chore: update versions

Co-authored-by: codecalm <codecalm@gmail.com>

.changeset/chilled-pans-cheer.md

@@ -1,5 +0,0 @@
----
-"@tabler/preview": minor
----
-
-Add a color palette in the signing component

.changeset/fresh-rockets-retire.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Fix mixed declarations in SCSS

.changeset/light-cooks-hug.md

@@ -1,5 +0,0 @@
----
-"@tabler/preview": patch
----
-
-Update icons to v3.34.1 (75 new icons)

.changeset/modern-dots-bathe.md

@@ -1,5 +0,0 @@
----
-"@tabler/preview": patch
----
-
-Update activity messages

.changeset/tricky-moons-laugh.md

@@ -1,5 +0,0 @@
----
-"@tabler/docs": patch
----
-
-Fix Docs search in dark mode

.changeset/twelve-tables-attack.md

@@ -1,5 +0,0 @@
----
-"@tabler/preview": patch
----
-
-Fix responsive layputs in 'Form Elements' page

.cursor/rules/changelog.mdc

@@ -0,0 +1,100 @@
+---
+description: Cursor Rules for Tabler Changesets
+globs:
+alwaysApply: true
+---
+
+
+### File Structure
+
+- Each change must be in a separate changeset file in `.changeset/` directory
+- Use descriptive kebab-case filenames (e.g., `progress-sizes.md`, `button-ghost.md`)
+- Follow the standard changeset format with frontmatter and description
+
+### Change Description Format
+
+- **One sentence per changeset** - keep descriptions concise and focused
+- Use **backticks for code elements**: classes (`.btn-ghost`), properties (`stroke-width`), values (`1.5`), icons (`arrow-up`)
+- Start with action verbs: "Added", "Updated", "Fixed", "Removed"
+- Be specific about what was changed
+
+### Version Bump Guidelines
+
+- **Major**: Breaking changes, complete rewrites
+- **Minor**: New features, new components, new pages, significant enhancements
+- **Patch**: Bug fixes, small improvements, style updates, accessibility fixes
+
+### Package Selection
+
+- `"@tabler/core"`: Changes to SCSS, core functionality, CSS classes
+- `"@tabler/preview"`: New pages, demo updates, preview-specific changes
+- `"@tabler/docs"`: Documentation updates
+- Use multiple packages when change affects multiple areas
+
+### Examples
+
+#### New Feature (Minor)
+
+```md
+---
+"@tabler/core": minor
+"@tabler/preview": minor
+---
+
+Added Progress Steps component for step-by-step navigation indicators.
+```
+
+#### Bug Fix (Patch)
+
+```md
+---
+"@tabler/core": patch
+---
+
+Updated `stroke-width` for `.icon-sm` from `1` to `1.5` for better visibility.
+```
+
+#### New Page (Minor)
+
+```md
+---
+"@tabler/preview": minor
+---
+
+Added new onboarding page with progress indicator and navigation layout.
+```
+
+#### Style Enhancement (Patch)
+
+```md
+---
+"@tabler/core": patch
+---
+
+Added smooth transitions for progress bar width and background color changes.
+```
+
+### Code Formatting Rules
+
+- Class names: `.btn-ghost`, `.progress-lg`, `.icon-sm`
+- CSS properties: `stroke-width`, `background-color`, `width`
+- Values: `1.5`, `transparent`, `100%`
+- Icon names: `arrow-up`, `arrow-down`, `trending-up`
+- HTML attributes: `aria-label`, `role`, `data-*`
+- JavaScript functions: `addEventListener()`, `querySelector()`
+
+### Common Patterns
+
+- **Component additions**: "Added [ComponentName] component for [purpose]"
+- **Size variants**: "Added [size] size variant for [component] (`.class-size`)"
+- **Style fixes**: "Fixed [issue] in [component/element]"
+- **Icon updates**: "Updated [component] to use `new-icon` instead of `old-icon`"
+- **Accessibility**: "Improved accessibility by [specific change]"
+
+### Commit Message Format
+
+Use English for commit messages following conventional commit format when possible:
+
+- `feat: add progress steps component`
+- `fix: update icon stroke width for better visibility`
+- `style: add smooth transitions to progress bars`

.cursor/rules/html-elements.mdc

@@ -0,0 +1,171 @@
+---
+description: Tabler Project HTML Elements Guidelines
+globs: ["**/*.html", "**/*.liquid", "**/*.md"]
+alwaysApply: true
+---
+
+## HTML Elements Guidelines
+
+### 1. Icons
+
+When you need to use an icon, always use the Tabler icon include syntax:
+
+```html
+{% include "ui/icon.html" icon="ICON_NAME" %}
+```
+
+**Examples:**
+
+- `{% include "ui/icon.html" icon="home" %}`
+- `{% include "ui/icon.html" icon="building-community" %}`
+- `{% include "ui/icon.html" icon="map-pin" %}`
+
+### 2. Page Links
+
+When linking to other pages, always use the relative page syntax:
+
+```html
+href="{{ page | relative }}/url.html"
+```
+
+**Examples:**
+
+- `href="{{ page | relative }}/job-post.html"`
+- `href="{{ page | relative }}/job-listing.html"`
+- `href="{{ page | relative }}/marketing/index.html"`
+
+### 3. Static Generation
+
+All pages are statically generated to HTML using Eleventy (11ty). Keep this in mind when:
+
+- Writing frontmatter (must be static YAML, no Liquid templating)
+- Creating dynamic content (use Liquid templating in the body, not frontmatter)
+- Linking between pages (use relative paths)
+
+### 4. Additional Guidelines
+
+#### Frontmatter Rules
+
+- Frontmatter must be static YAML
+- Cannot use Liquid templating in frontmatter
+- Use static values for title, permalink, etc.
+
+#### Liquid Templating
+
+- Use Liquid templating only in the HTML body
+- Access data using `{{ variable }}` syntax
+- Use `{% for %}` loops for dynamic content
+- Use `{% if %}` conditions for conditional rendering
+
+#### File Structure
+
+- Pages go in `preview/pages/`
+- Includes go in `shared/includes/`
+- Data files go in `shared/data/`
+- Documentation goes in `docs/content/`
+
+#### CSS Classes
+
+- Use Bootstrap 5 classes
+- Use Tabler's custom CSS classes
+- Follow the pattern: `--#{$prefix}component-property`
+
+#### Accessibility
+
+- Include proper ARIA labels
+- Use semantic HTML elements
+- Ensure proper heading hierarchy
+- Add alt text for images
+
+### 5. Component Usage
+
+#### Cards
+
+- Use `card` class for main containers
+- Use `card-body` for content areas
+- Use `card-header` for card headers
+- Use `card-title` for card title
+
+#### Buttons
+
+- Use `btn` class for all buttons
+- Use `btn-primary` for primary actions
+- Use `btn` for secondary actions, don't use `btn-outline-secondary`
+- Use `btn-sm` for smaller buttons
+- Use `w-100` for full-width buttons
+
+#### Forms
+
+- Use `form-control` for input fields
+- Use `form-label` for labels
+- Use `form-check` for checkboxes/radio buttons
+- Use `form-select` for dropdowns
+
+#### Layout
+
+- Use Bootstrap grid system (`row`, `col-*`)
+- Use `container-xl` for main containers
+- Use `page-wrapper` for page structure
+- Use `page-body` for main content area
+
+#### Badges
+
+- Use `badge` class for badges
+- Don't use `badge-outline` for badges, use `badge` class instead
+- Don't use `badge-primary` for badges, use `badge` class instead
+- Don't change the text color of badges
+
+#### Markdown
+
+- Use `markdown` class for markdown content
+- Apply to containers that render markdown content
+- Example: `<div class="markdown">...</div>`
+
+#### Rest of the rules
+
+- Read the rest of the rules in the `docs/content/ui/` folder
+
+### 6. Data Integration
+
+#### Using JSON Data
+
+```liquid
+{% for item in items %}
+  <div>{{ item.name }}</div>
+{% endfor %}
+```
+
+#### Conditional Rendering
+
+```liquid
+{% if condition %}
+  <div>Content</div>
+{% endif %}
+```
+
+#### Including Components
+
+```liquid
+{% include "ui/button.html" color="primary" text="Click me" %}
+```
+
+### 7. Best Practices
+
+#### Performance
+
+- Minimize nested loops
+- Use `limit` filters when iterating large datasets
+- Optimize images for web use
+
+#### Code Organization
+
+- Keep components modular and reusable
+- Use consistent naming conventions
+- Comment complex logic
+- Group related functionality together
+
+#### Error Handling
+
+- Always check if data exists before using it
+- Provide fallback content for missing data
+- Use `{% if %}` guards for optional content

.github/workflows/argos.yml

@@ -26,7 +26,7 @@ jobs:
     if: false
     steps:
       - name: Clone repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Cache turbo build setup
         uses: actions/cache@v4
@@ -36,14 +36,15 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-turbo-
 
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "${{ env.NODE }}"
-
       - name: Install PNPM
         uses: pnpm/action-setup@v4
 
+      - name: Set up Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: "${{ env.NODE }}"
+          cache: 'pnpm'
+
       - name: Get installed Playwright version
         id: playwright-version
         run: echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package.json').devDependencies['@playwright/test'])")" >> $GITHUB_ENV

.github/workflows/bundlewatch.yml

@@ -17,7 +17,7 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Cache turbo build setup
         uses: actions/cache@v4
@@ -27,14 +27,15 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-turbo-
 
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "${{ env.NODE }}"
-     
       - name: Install PNPM
         uses: pnpm/action-setup@v4
 
+      - name: Set up Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: "${{ env.NODE }}"
+          cache: 'pnpm'
+
       - name: Set up Bundler
         uses: ruby/setup-ruby@v1
         with:

.github/workflows/calibreapp-image-actions.yml

@@ -16,7 +16,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           persist-credentials: false
 

.github/workflows/close_inactive.yml

@@ -11,7 +11,7 @@ jobs:
       pull-requests: write
       issues: write
     steps:
-      - uses: actions/stale@v9
+      - uses: actions/stale@v10
         with:
           days-before-issue-stale: 360
           days-before-issue-close: 14

.github/workflows/lockfiles.yaml

@@ -12,9 +12,9 @@ jobs:
     name: Verify lock file integrity
     steps:
       - name: Clone Tabler
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
       - name: Prevent lock file change
-        uses: xalvarez/prevent-file-change-action@v2
+        uses: xalvarez/prevent-file-change-action@v3
         with:
           githubToken: ${{ secrets.GITHUB_TOKEN }}
           pattern: Gemfile.lock|pnpm-lock.json|pnpm-lock.yaml

.github/workflows/release.yml

@@ -21,16 +21,17 @@ jobs:
       pull-requests: write # to create pull request
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
-
-      - name: Setup Node.js 18
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
 
       - name: Install PNPM
         uses: pnpm/action-setup@v4
 
+      - name: Setup Node.js 18
+        uses: actions/setup-node@v6
+        with:
+          node-version: "${{ env.NODE }}"
+          cache: 'pnpm'
+
       - name: Install Dependencies
         run: pnpm install
 

.github/workflows/test.yml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Clone repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Cache turbo build setup
         uses: actions/cache@v4
@@ -24,14 +24,15 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-turbo-
 
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "${{ env.NODE }}"
-
       - name: Install PNPM
         uses: pnpm/action-setup@v4
 
+      - name: Set up Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: "${{ env.NODE }}"
+          cache: 'pnpm'
+
       - run: node --version
 
       - name: Install pnpm dependencies

.prettierrc

@@ -4,7 +4,17 @@
 	"printWidth": 320,
 	"proseWrap": "always",
 	"semi": false,
-	"singleQuote": false,
+	"singleQuote": true,
+	"quoteProps": "consistent",
 	"tabWidth": 2,
-	"trailingComma": "all"
+	"useTabs": false,
+	"trailingComma": "all",
+	"overrides": [
+		{
+			"files": "*.scss",
+			"options": {
+				"parser": "scss"
+			}
+		}
+	]
 }

core/.build/compare-variables.mjs

@@ -0,0 +1,82 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+// Get __dirname in ES modules
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// File paths (relative to core/.build directory)
+const bootstrapPath = path.join(__dirname, '../node_modules/bootstrap/scss/_variables.scss');
+const tablerPath = path.join(__dirname, '../scss/_variables.scss');
+
+// Function to extract variable names from SCSS file
+function extractVariables(filePath) {
+  const content = fs.readFileSync(filePath, 'utf8');
+  const variables = new Set();
+  
+  // Regex to find SCSS variables
+  // Looks for patterns like: $variable-name: value
+  // Includes variables in maps and lists
+  const variableRegex = /\$([a-zA-Z0-9_-]+)\s*[:=]/g;
+  
+  let match;
+  while ((match = variableRegex.exec(content)) !== null) {
+    const varName = match[1];
+    variables.add(varName);
+  }
+  
+  return variables;
+}
+
+// Main function
+function compareVariables() {
+  console.log('Analyzing Bootstrap variables...');
+  const bootstrapVars = extractVariables(bootstrapPath);
+  console.log(`Found ${bootstrapVars.size} variables in Bootstrap\n`);
+  
+  console.log('Analyzing Tabler variables...');
+  const tablerVars = extractVariables(tablerPath);
+  console.log(`Found ${tablerVars.size} variables in Tabler\n`);
+  
+  // Find variables that are in Bootstrap but not in Tabler
+  const missingInTabler = [];
+  for (const varName of bootstrapVars) {
+    if (!tablerVars.has(varName)) {
+      missingInTabler.push(varName);
+    }
+  }
+  
+  // Sort alphabetically
+  missingInTabler.sort();
+  
+  console.log('='.repeat(60));
+  console.log(`Variables in Bootstrap that are missing in Tabler: ${missingInTabler.length}`);
+  console.log('='.repeat(60));
+  
+  if (missingInTabler.length === 0) {
+    console.log('All Bootstrap variables are present in Tabler!');
+  } else {
+    console.log('\nList of missing variables:\n');
+    missingInTabler.forEach((varName, index) => {
+      console.log(`${(index + 1).toString().padStart(4)}. $${varName}`);
+    });
+  }
+  
+  // Optionally: show statistics
+  console.log('\n' + '='.repeat(60));
+  console.log('Statistics:');
+  console.log(`  Bootstrap: ${bootstrapVars.size} variables`);
+  console.log(`  Tabler:    ${tablerVars.size} variables`);
+  console.log(`  Missing:    ${missingInTabler.length} variables`);
+  console.log(`  Coverage:   ${((1 - missingInTabler.length / bootstrapVars.size) * 100).toFixed(1)}%`);
+  console.log('='.repeat(60));
+}
+
+// Run analysis
+try {
+  compareVariables();
+} catch (error) {
+  console.error('Error during analysis:', error.message);
+  process.exit(1);
+}

core/.build/import-fonts.mjs

@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+
+'use strict'
+
+import { existsSync, mkdirSync } from 'fs'
+import { copySync } from 'fs-extra/esm'
+import { fileURLToPath } from 'url'
+import { join, dirname } from 'node:path'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+const fromDir = join(__dirname, '..', 'node_modules/geist/dist/fonts')
+const toDir = join(__dirname, '..', 'fonts')
+
+// Create fonts directory if it doesn't exist
+if (!existsSync(toDir)) {
+	mkdirSync(toDir, { recursive: true })
+}
+
+// Copy geist-mono fonts
+const monoFrom = join(fromDir, 'geist-mono')
+const monoTo = join(toDir, 'geist-mono')
+
+if (existsSync(monoFrom)) {
+	if (!existsSync(monoTo)) {
+		mkdirSync(monoTo, { recursive: true })
+	}
+	
+	copySync(monoFrom, monoTo, {
+		dereference: true,
+	})
+	
+	console.log(`Successfully copied geist-mono fonts`)
+} else {
+	console.warn(`Warning: geist-mono fonts not found at ${monoFrom}`)
+}
+
+// Copy geist-sans fonts
+const sansFrom = join(fromDir, 'geist-sans')
+const sansTo = join(toDir, 'geist-sans')
+
+if (existsSync(sansFrom)) {
+	if (!existsSync(sansTo)) {
+		mkdirSync(sansTo, { recursive: true })
+	}
+	
+	copySync(sansFrom, sansTo, {
+		dereference: true,
+	})
+	
+	console.log(`Successfully copied geist-sans fonts`)
+} else {
+	console.warn(`Warning: geist-sans fonts not found at ${sansFrom}`)
+}
+

core/.build/postcss.config.mjs

@@ -9,10 +9,7 @@ export default context => {
 			autoprefixer: {
 				cascade: false
 			},
-			rtlcss: context.env === 'RTL',
+			rtlcss: context.env === 'RTL'
-			'postcss-discard-comments': {
-				removeAll: true
-			},
 		}
 	}
 }

core/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @tabler/core
 
+## 1.5.0
+
+### Minor Changes
+
+- 5e119d4: Added Pay page with dedicated layout, navigation link, and card/PayPal payment form.
+- 9c5d729: Added `.btn-ghost` button variant with transparent background and hover effects.
+- ec94693: Added `.card-gradient` component with gradient variants, direction modifiers, and animated backgrounds.
+- a198b0c: Added Geist font family integration.
+- 8d8727f: Added language selector dropdown to navbar with flag indicators for multilingual support.
+- 4ce08ca: Refactored navbar-side component by consolidating separate include files (apps, language, notifications, theme, user) into a single `navbar-side.html` file for better maintainability.
+- 9c5d729: Added Progress Background component with text labels and value display.
+- 9c5d729: Added `.progress-lg` and `.progress-xl` size variants for the progress component.
+- 9c5d729: Added Progress Steps component for step-by-step navigation indicators.
+- e3d86c5: Upgraded `apexcharts` from `3.54.1` to `5.3.6` and added CSS variables (`--chart-{id}-color-{index}`) for dynamic chart colors to fix compatibility with the new version.
+
+### Patch Changes
+
+- 059bae1: Refactored Bootstrap exports to use single source of truth in `bootstrap.js` and removed duplicate exports from `tabler.js` for better maintainability.
+- 5018aa9: Fixed `.btn-icon` to be square by aligning `min-width` calculation with base `.btn` formula.
+- c860288: Fixed icon alignment for `.btn-sm` and `.btn-xl` sizes.
+- 2dc7eda: Updated `$border-color-translucent-dark` from `rgba(72, 110, 149, 0.14)` to `rgba(128, 150, 172, 0.2)` to improve visibility of form checkboxes and other form elements in dark mode.
+- 6e656ad: Fixed `.input-icon-addon` z-index issue with form validation feedback and added default height.
+- 8bc6fa7: Fixed status color classes to use CSS variables instead of hardcoded values and include social colors (bitbucket, facebook, etc.) in status class generation.
+- e206d7a: Fixed white space on left side when scrollbar is present by replacing `margin-inline-start: calc(100vw - 100%)` with `scrollbar-gutter: stable` on `html` element, with `overflow-y: scroll` fallback for unsupported browsers.
+- 4ce08ca: Updated flags and avatars styling for better visual consistency.
+- b8b63d7: Fixed mixed declarations in SCSS.
+- 0106d6b: Update SCSS to use logical properties
+- 9c5d729: Updated `stroke-width` for `.icon-sm` from `1` to `1.5` for better visibility.
+- 5e119d4: Added `bg-blur` utility and increased `container-tight` width for layout flexibility.
+- 3aba62e: Added `border-top-left-radius` and `border-top-right-radius` to first and last child elements in `.card-table` for proper corner rounding.
+- 0c79963: Added `media-print` mixin and print styles to hide interactive components during printing.
+- 9a3361f: Fixed double bottom border in tables.
+- 9c5d729: Added smooth transitions for progress bar `width` and `background-color` changes.
+- 41ed22a: Removed redundant nullish coalescing operator from `html` option in popover and tooltip initialization.
+- 83ec6f8: Added Driver.js library integration and Tour demo page for interactive product tours and onboarding guides.
+- 9c5d729: Updated skip-link to use `visually-hidden` for improved accessibility.
+- 736e604: Updated deprecated global Sass functions to module equivalents (`map.merge`, `string.slice`, `math.percentage`, etc.).
+- f8dee0a: Updated Bootstrap to v5.3.8.
+- 9c5d729: Updated trending component to use `arrow-up`/`arrow-down` instead of `trending-up`/`trending-down`.
+
 ## 1.4.0
 
 ### Minor Changes

core/img/flags/eu.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="21" height="16" fill="none"><mask id="a" width="21" height="16" x="0" y="0" mask-type="alpha" maskUnits="userSpaceOnUse"><path fill="#fff" d="M.001.927h20v15h-20z"/></mask><g mask="url(#a)"><path fill="#F7FCFF" fill-rule="evenodd" d="M.001.927v15h20v-15h-20Z" clip-rule="evenodd"/><mask id="b" width="21" height="16" x="0" y="0" mask-type="alpha" maskUnits="userSpaceOnUse"><path fill="#fff" fill-rule="evenodd" d="M.001.927v15h20v-15h-20Z" clip-rule="evenodd"/></mask><g fill-rule="evenodd" clip-rule="evenodd" mask="url(#b)"><path fill="#3D58DB" d="M.001.927v15h20v-15h-20Z"/><path fill="#FFD018" d="m9.407 3.137-.14.818L10 3.57l.735.386-.14-.818.594-.64h-.821L10 1.695l-.367.804h-.822l.595.639Zm0 10.855-.14.819.734-.387.735.387-.14-.819.594-.639h-.821L10 12.55l-.367.804h-.822l.595.64ZM3.484 9.438l.14-.818-.594-.64h.822l.367-.803.367.804h.822l-.595.639.14.818-.734-.386-.735.386Zm1.352 1.77-.14.818.734-.386.735.386-.14-.818.594-.64h-.821l-.368-.803-.367.804H4.24l.595.639Zm9.009.818.14-.818-.595-.64h.822l.367-.803.368.804h.821l-.594.639.14.818-.735-.386-.734.386Zm-9.01-6.062-.14.818.735-.386.735.386-.14-.818.594-.639h-.821l-.368-.804-.367.804H4.24l.595.64Zm9.01.818.14-.818-.595-.639h.822l.367-.804.368.804h.821l-.594.64.14.817-.735-.386-.734.386ZM6.66 13.29l-.14.819.735-.387.734.386-.14-.818.595-.639h-.822l-.367-.804-.368.804h-.821l.594.64Zm5.418.819.14-.819-.594-.639h.821l.367-.804.368.804h.821l-.594.64.14.817-.735-.386-.734.386ZM6.52 4.666l.735-.387.734.387-.14-.818.595-.64h-.822l-.367-.804-.368.804h-.821l.594.64-.14.818Zm5.558 0 .14-.818-.594-.64h.821l.367-.804.368.804h.821l-.594.64.14.818-.735-.387-.734.387Zm3.062 3.879-.14.818.735-.386.735.386-.14-.818.593-.64h-.82l-.368-.803-.368.804h-.821l.594.639Z"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="15" fill="none" viewBox="0 0 20 15"><path fill="#3d58db" fill-rule="evenodd" d="M0 0v15h20V0z" clip-rule="evenodd"/><path fill="#ffd018" fill-rule="evenodd" d="m9.407 2.442-.14.818.733-.385.735.386-.14-.818.594-.64h-.821L10 1l-.367.804h-.822zm0 10.855-.14.819.734-.387.735.387-.14-.819.594-.639h-.821L10 11.855l-.367.804h-.822l.595.64zM3.484 8.743l.14-.818-.594-.64h.822l.367-.803.367.804h.822l-.595.639.14.818-.734-.386zm1.352 1.77-.14.818.734-.386.735.386-.14-.818.594-.64h-.821L5.43 9.07l-.367.804H4.24zm9.009.818.14-.818-.595-.64h.822l.367-.803.368.804h.821l-.594.639.14.818-.735-.386zm-9.01-6.062-.14.818.735-.386.735.386-.14-.818.594-.639h-.821l-.368-.804-.367.804H4.24zm9.01.818.14-.818-.595-.639h.822l.367-.804.368.804h.821l-.594.64.14.817-.735-.386zM6.66 12.595l-.14.819.735-.387.734.386-.14-.818.595-.639h-.822l-.367-.804-.368.804h-.821zm5.418.819.14-.819-.594-.639h.821l.367-.804.368.804h.821l-.594.64.14.817-.735-.386zM6.52 3.971l.735-.387.734.387-.14-.818.595-.64h-.822l-.367-.804-.368.804h-.821l.594.64zm5.558 0 .14-.818-.594-.64h.821l.367-.804.368.804h.821l-.594.64.14.818-.735-.387zM15.14 7.85l-.14.818.735-.386.735.386-.14-.818.593-.64h-.82l-.368-.803-.368.804h-.821z" clip-rule="evenodd"/></svg> 

core/js/src/autosize.js

@@ -1,7 +1,8 @@
 // Autosize plugin
-const elements = document.querySelectorAll('[data-bs-toggle="autosize"]');
+const elements = document.querySelectorAll('[data-bs-toggle="autosize"]')
+
 if (elements.length) {
   elements.forEach(function (element) {
-		window.autosize && window.autosize(element);
+    window.autosize && window.autosize(element)
-	});
+  })
 }

core/js/src/bootstrap.js

@@ -1,3 +1,20 @@
-export * as Popper from '@popperjs/core';
+export * as Popper from '@popperjs/core'
 
-export { Dropdown, Tooltip, Popover, Tab, Toast } from 'bootstrap';
+// Export all Bootstrap components directly for consistent usage
+export {
+  Alert,
+  Button,
+  Carousel,
+  Collapse,
+  Dropdown,
+  Modal,
+  Offcanvas,
+  Popover,
+  ScrollSpy,
+  Tab,
+  Toast,
+  Tooltip
+} from 'bootstrap'
+
+// Re-export everything as namespace for backward compatibility
+export * as bootstrap from 'bootstrap'

core/js/src/countup.js

@@ -1,23 +1,25 @@
-const elements = document.querySelectorAll('[data-countup]');
+const elements = document.querySelectorAll('[data-countup]')
 
 if (elements.length) {
   elements.forEach(function (element) {
-		let options = {};
+    let options = {}
     try {
-			const dataOptions = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')) : {};
+      const dataOptions = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')) : {}
-			options = Object.assign({
+      options = Object.assign(
-				'enableScrollSpy': true
+        {
-			}, dataOptions);
+          enableScrollSpy: true,
-			
+        },
+        dataOptions,
+      )
     } catch (error) {}
 
-		const value = parseInt(element.innerHTML, 10);
+    const value = parseInt(element.innerHTML, 10)
 
     if (window.countUp && window.countUp.CountUp) {
-			const countUp = new window.countUp.CountUp(element, value, options);
+      const countUp = new window.countUp.CountUp(element, value, options)
       if (!countUp.error) {
-				countUp.start();
+        countUp.start()
       }
     }
-	});
+  })
 }

core/js/src/dropdown.js

@@ -1,12 +1,12 @@
-import { Dropdown } from './bootstrap';
+import { Dropdown } from './bootstrap'
 
 /*
 Core dropdowns
  */
-let dropdownTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="dropdown"]'));
+let dropdownTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="dropdown"]'))
 dropdownTriggerList.map(function (dropdownTriggerEl) {
   let options = {
     boundary: dropdownTriggerEl.getAttribute('data-bs-boundary') === 'viewport' ? document.querySelector('.btn') : 'clippingParents',
   }
-	return new Dropdown(dropdownTriggerEl, options);
+  return new Dropdown(dropdownTriggerEl, options)
-});
+})

core/js/src/input-mask.js

@@ -1,9 +1,10 @@
 // Input mask plugin
 
-var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'));
+var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'))
 maskElementList.map(function (maskEl) {
-	window.IMask && new window.IMask(maskEl, {
+  window.IMask &&
+    new window.IMask(maskEl, {
       mask: maskEl.dataset.mask,
-		lazy: maskEl.dataset['mask-visible'] === 'true'
+      lazy: maskEl.dataset['mask-visible'] === 'true',
+    })
 })
-});

core/js/src/popover.js

@@ -1,14 +1,14 @@
-import { Popover } from './bootstrap';
+import { Popover } from './bootstrap'
 
 /*
 Core popovers
  */
-let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
+let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
 popoverTriggerList.map(function (popoverTriggerEl) {
   let options = {
     delay: { show: 50, hide: 50 },
-		html: popoverTriggerEl.getAttribute('data-bs-html') === "true" ?? false,
+    html: popoverTriggerEl.getAttribute('data-bs-html') === 'true',
-		placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto'
+    placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto',
-	};
+  }
-	return new Popover(popoverTriggerEl, options);
+  return new Popover(popoverTriggerEl, options)
-});
+})

core/js/src/sortable.js

@@ -0,0 +1,23 @@
+// SortableJS plugin
+// Initializes Sortable on elements marked with [data-sortable]
+// Allows options via JSON in data attribute: data-sortable='{"animation":150}'
+
+const sortableElements = document.querySelectorAll('[data-sortable]')
+
+if (sortableElements.length) {
+  sortableElements.forEach(function (element) {
+    let options = {}
+
+    try {
+      const rawOptions = element.getAttribute('data-sortable')
+      options = rawOptions ? JSON.parse(rawOptions) : {}
+    } catch (e) {
+      // ignore invalid JSON
+    }
+
+    if (window.Sortable) {
+      // eslint-disable-next-line no-new
+      new window.Sortable(element, options)
+    }
+  })
+}

core/js/src/switch-icon.js

@@ -1,11 +1,11 @@
 /*
 Switch icons
  */
-let switchesTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="switch-icon"]'));
+let switchesTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="switch-icon"]'))
 switchesTriggerList.map(function (switchTriggerEl) {
   switchTriggerEl.addEventListener('click', (e) => {
-		e.stopPropagation();
+    e.stopPropagation()
 
-		switchTriggerEl.classList.toggle('active');
+    switchTriggerEl.classList.toggle('active')
-	});
+  })
-});
+})

core/js/src/tab.js

@@ -1,15 +1,15 @@
-import { Tab } from './bootstrap';
+import { Tab } from './bootstrap'
 
 export const EnableActivationTabsFromLocationHash = () => {
-  const locationHash = window.location.hash;
+  const locationHash = window.location.hash
 
   if (locationHash) {
-	 const tabsList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tab"]'));
+    const tabsList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tab"]'))
-	 const matchedTabs = tabsList.filter(tab => tab.hash === locationHash);
+    const matchedTabs = tabsList.filter((tab) => tab.hash === locationHash)
 
-	 matchedTabs.map(tab => {
+    matchedTabs.map((tab) => {
-		new Tab(tab).show();
+      new Tab(tab).show()
-	 });
+    })
   }
 }
 

core/js/src/toast.js

@@ -1,17 +1,17 @@
-import { Toast } from './bootstrap';
+import { Toast } from './bootstrap'
 
 /*
 Toasts
  */
-let toastsTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="toast"]'));
+let toastsTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="toast"]'))
 toastsTriggerList.map(function (toastTriggerEl) {
   if (!toastTriggerEl.hasAttribute('data-bs-target')) {
-		return;
+    return
   }
 
-	const toastEl = new Toast(toastTriggerEl.getAttribute('data-bs-target'));
+  const toastEl = new Toast(toastTriggerEl.getAttribute('data-bs-target'))
 
   toastTriggerEl.addEventListener('click', () => {
     toastEl.show()
-	});
+  })
-});
+})

core/js/src/tooltip.js

@@ -1,11 +1,11 @@
-import { Tooltip } from './bootstrap';
+import { Tooltip } from './bootstrap'
 
-let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
 tooltipTriggerList.map(function (tooltipTriggerEl) {
   let options = {
     delay: { show: 50, hide: 50 },
-		html: tooltipTriggerEl.getAttribute("data-bs-html") === "true" ?? false,
+    html: tooltipTriggerEl.getAttribute('data-bs-html') === 'true',
-		placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto'
+    placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto',
-	};
+  }
-	return new Tooltip(tooltipTriggerEl, options);
+  return new Tooltip(tooltipTriggerEl, options)
-});
+})

core/js/tabler-theme.js

@@ -4,11 +4,11 @@
  * This will prevent any flashes of the light theme (default) before switching.
  */
 const themeConfig = {
-	"theme": "light",
+  'theme': 'light',
-	"theme-base": "gray",
+  'theme-base': 'gray',
-	"theme-font": "sans-serif",
+  'theme-font': 'sans-serif',
-	"theme-primary": "blue",
+  'theme-primary': 'blue',
-	"theme-radius": "1",
+  'theme-radius': '1',
 }
 
 const params = new Proxy(new URLSearchParams(window.location.search), {

core/js/tabler.js

@@ -1,27 +1,16 @@
-import "./src/autosize"
+import './src/autosize'
-import "./src/countup"
+import './src/countup'
-import "./src/input-mask"
+import './src/input-mask'
-import "./src/dropdown"
+import './src/dropdown'
-import "./src/tooltip"
+import './src/tooltip'
-import "./src/popover"
+import './src/popover'
-import "./src/switch-icon"
+import './src/switch-icon'
-import "./src/tab"
+import './src/tab'
-import "./src/toast"
+import './src/toast'
+import './src/sortable'
 
-export * as bootstrap from "bootstrap"
+// Re-export everything from bootstrap.js (single source of truth)
-export * as tabler from "./src/tabler"
+export * from './src/bootstrap'
 
-export {
+// Re-export tabler namespace
-	Alert,
+export * as tabler from './src/tabler'
-	Modal,
-	Toast,
-	Tooltip,
-	Tab,
-	Button,
-	Carousel,
-	Collapse,
-	Dropdown,
-	Popover,
-	ScrollSpy,
-	Offcanvas
-} from 'bootstrap'

core/libs.json

@@ -38,6 +38,12 @@
       "dist/list.min.js"
     ]
   },
+  "sortablejs": {
+    "npm": "sortablejs",
+    "js": [
+      "Sortable.min.js"
+    ]
+  },
   "masonry": {
     "js": [
       "https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"
@@ -160,5 +166,14 @@
       "dist/turbo.es2017-umd.js"
     ],
     "head": true
+  },
+  "driver.js": {
+    "npm": "driver.js",
+    "js": [
+      "dist/driver.js.iife.js"
+    ],
+    "css": [
+      "dist/driver.css"
+    ]
   }
 }

core/package.json

@@ -1,41 +1,46 @@
 {
   "name": "@tabler/core",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "homepage": "https://tabler.io",
   "scripts": {
     "dev": "pnpm run clean && pnpm run copy && pnpm run watch",
-    "build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run copy && pnpm run generate-sri",
+    "build": "pnpm run clean && pnpm run build-assets && pnpm run copy && pnpm run generate-sri",
+    "build-assets": "concurrently \"pnpm run css\" \"pnpm run js\"",
     "clean": "shx rm -rf dist demo",
     "css": "pnpm run css-compile && pnpm run css-prefix && pnpm run css-rtl && pnpm run css-minify && pnpm run css-banner",
     "css-compile": "sass --no-source-map --load-path=node_modules --style expanded scss/:dist/css/",
     "css-banner": "node .build/add-banner.mjs",
     "css-prefix": "postcss --config .build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
     "css-rtl": "cross-env NODE_ENV=RTL postcss --config .build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
-    "css-minify": "pnpm run css-minify-main && pnpm run css-minify-rtl",
+    "css-minify": "concurrently \"pnpm run css-minify-main\" \"pnpm run css-minify-rtl\"",
     "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
     "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
+    "css-lint": "pnpm run css-lint-variables",
+    "css-lint-variables": "find-unused-sass-variables scss/ node_modules/bootstrap/scss/",
     "js": "pnpm run js-compile && pnpm run js-minify",
-    "js-compile": "pnpm run js-compile-standalone && pnpm run js-compile-standalone-esm && pnpm run js-compile-theme && pnpm run js-compile-theme-esm",
+    "js-compile": "concurrently \"pnpm run js-compile-standalone\" \"pnpm run js-compile-standalone-esm\" \"pnpm run js-compile-theme\" \"pnpm run js-compile-theme-esm\"",
     "js-compile-theme-esm": "rollup --environment THEME:true --environment ESM:true --config .build/rollup.config.mjs --sourcemap",
     "js-compile-theme": "rollup --environment THEME:true --config .build/rollup.config.mjs --sourcemap",
     "js-compile-standalone": "rollup --config .build/rollup.config.mjs --sourcemap",
     "js-compile-standalone-esm": "rollup --environment ESM:true --config .build/rollup.config.mjs --sourcemap",
-    "js-minify": "pnpm run js-minify-standalone && pnpm run js-minify-standalone-esm && pnpm run js-minify-theme && pnpm run js-minify-theme-esm",
+    "js-minify": "concurrently \"pnpm run js-minify-standalone\" \"pnpm run js-minify-standalone-esm\" \"pnpm run js-minify-theme\" \"pnpm run js-minify-theme-esm\"",
     "js-minify-standalone": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.js.map,includeSources,url=tabler.min.js.map\" --output dist/js/tabler.min.js dist/js/tabler.js",
     "js-minify-standalone-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.esm.js.map,includeSources,url=tabler.esm.min.js.map\" --output dist/js/tabler.esm.min.js dist/js/tabler.esm.js",
     "js-minify-theme": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler-theme.js.map,includeSources,url=tabler-theme.min.js.map\" --output dist/js/tabler-theme.min.js dist/js/tabler-theme.js",
     "js-minify-theme-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler-theme.esm.js.map,includeSources,url=tabler-theme.esm.min.js.map\" --output dist/js/tabler-theme.esm.min.js dist/js/tabler-theme.esm.js",
-    "copy": "pnpm run copy-img && pnpm run copy-libs",
+    "copy": "concurrently \"pnpm run copy-img\" \"pnpm run copy-libs\" \"pnpm run copy-fonts\"",
     "copy-img": "shx mkdir -p dist/img && shx cp -rf img/* dist/img",
     "copy-libs": "node .build/copy-libs.mjs",
+    "copy-fonts": "shx mkdir -p dist/fonts && shx cp -rf fonts/* dist/fonts",
+    "import-fonts": "node .build/import-fonts.mjs",
     "watch": "concurrently \"pnpm run watch-css\" \"pnpm run watch-js\"",
     "watch-css": "nodemon --watch scss/ --ext scss --exec \"pnpm run css-compile && pnpm run css-prefix\"",
     "watch-js": "nodemon --watch js/ --ext js --exec \"pnpm run js-compile\"",
     "bundlewatch": "bundlewatch",
     "generate-sri": "node .build/generate-sri.js",
-    "format:check": "prettier --check src/**/*.{js,scss} --cache",
+    "format:check": "prettier --check \"scss/**/*.scss\" \"js/**/*.js\" --cache",
-    "format:write": "prettier --write src/**/*.{js,scss} --cache"
+    "format:write": "prettier --write \"scss/**/*.scss\" \"js/**/*.js\" --cache"
   },
   "repository": {
     "type": "git",
@@ -146,32 +151,35 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "bootstrap": "5.3.7",
+    "bootstrap": "5.3.8"
-    "postcss-discard-comments": "^7.0.4"
   },
   "devDependencies": {
-    "@hotwired/turbo": "^8.0.13",
+    "@hotwired/turbo": "^8.0.18",
     "@melloware/coloris": "^0.25.0",
-    "apexcharts": "3.54.1",
+    "apexcharts": "^5.3.6",
     "autosize": "^6.0.1",
     "choices.js": "^11.1.0",
     "clipboard": "^2.0.11",
     "countup.js": "^2.9.0",
     "dropzone": "^6.0.0-beta.2",
+    "find-unused-sass-variables": "^6.1.0",
     "flatpickr": "^4.6.13",
-    "fslightbox": "^3.6.1",
+    "fslightbox": "^3.7.4",
-    "fullcalendar": "^6.1.18",
+    "fullcalendar": "^6.1.19",
+    "geist": "^1.5.1",
     "hugerte": "^1.0.9",
     "imask": "^7.6.1",
     "jsvectormap": "^1.7.0",
     "list.js": "^2.3.1",
     "litepicker": "^2.0.12",
     "nouislider": "^15.8.1",
-    "plyr": "^3.7.8",
+    "plyr": "^3.8.3",
-    "signature_pad": "^5.0.10",
+    "signature_pad": "^5.1.1",
+    "sortablejs": "^1.15.6",
     "star-rating.js": "^4.3.1",
     "tom-select": "^2.4.3",
-    "typed.js": "^2.1.0"
+    "typed.js": "^2.1.0",
+    "driver.js": "^1.0.0"
   },
   "directories": {
     "doc": "docs"

core/scss/_bootstrap-components.scss

@@ -1,30 +1,30 @@
 // Layout & components
-@import "bootstrap/scss/root";
+@import 'bootstrap/scss/root';
-@import "bootstrap/scss/reboot";
+@import 'bootstrap/scss/reboot';
-@import "bootstrap/scss/type";
+@import 'bootstrap/scss/type';
-@import "bootstrap/scss/images";
+@import 'bootstrap/scss/images';
-@import "bootstrap/scss/containers";
+@import 'bootstrap/scss/containers';
-@import "bootstrap/scss/grid";
+@import 'bootstrap/scss/grid';
-@import "bootstrap/scss/tables";
+@import 'bootstrap/scss/tables';
-@import "bootstrap/scss/forms";
+@import 'bootstrap/scss/forms';
-@import "bootstrap/scss/buttons";
+@import 'bootstrap/scss/buttons';
-@import "bootstrap/scss/transitions";
+@import 'bootstrap/scss/transitions';
-@import "bootstrap/scss/dropdown";
+@import 'bootstrap/scss/dropdown';
-@import "bootstrap/scss/button-group";
+@import 'bootstrap/scss/button-group';
-@import "bootstrap/scss/nav";
+@import 'bootstrap/scss/nav';
-@import "bootstrap/scss/navbar";
+@import 'bootstrap/scss/navbar';
-@import "bootstrap/scss/card";
+@import 'bootstrap/scss/card';
-@import "bootstrap/scss/pagination";
+@import 'bootstrap/scss/pagination';
-@import "bootstrap/scss/progress";
+@import 'bootstrap/scss/progress';
-@import "bootstrap/scss/list-group";
+@import 'bootstrap/scss/list-group';
-@import "bootstrap/scss/toasts";
+@import 'bootstrap/scss/toasts';
-@import "bootstrap/scss/modal";
+@import 'bootstrap/scss/modal';
-@import "bootstrap/scss/tooltip";
+@import 'bootstrap/scss/tooltip';
-@import "bootstrap/scss/popover";
+@import 'bootstrap/scss/popover';
-@import "bootstrap/scss/carousel";
+@import 'bootstrap/scss/carousel';
-@import "bootstrap/scss/spinners";
+@import 'bootstrap/scss/spinners';
-@import "bootstrap/scss/offcanvas";
+@import 'bootstrap/scss/offcanvas';
-@import "bootstrap/scss/placeholders";
+@import 'bootstrap/scss/placeholders';
 
 // Utilities
-@import "bootstrap/scss/utilities/api";
+@import 'bootstrap/scss/utilities/api';

core/scss/_bootstrap-config.scss

@@ -1,9 +1,6 @@
 // Config
-@import "bootstrap/scss/functions";
+// @import "bootstrap/scss/variables";
-@import "bootstrap-functions";
+// @import "bootstrap/scss/variables-dark";
-
+// @import "bootstrap/scss/maps";
-@import "bootstrap/scss/variables";
+@import 'bootstrap/scss/mixins';
-@import "bootstrap/scss/variables-dark";
+// @import "bootstrap/scss/utilities";
-@import "bootstrap/scss/maps";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";

core/scss/_bootstrap-functions.scss

@@ -1,258 +0,0 @@
-@use "sass:color";
-@use "sass:map";
-@use "sass:math";
-@use "sass:meta";
-@use "sass:string";
-@use "sass:list";
-
-/**
- * Converts a color value to RGB format
- * 
- * @param {Color} $value - The color value to convert
- * @return {List} - RGB values as a list (red, green, blue)
- * 
- * @example
- *   to-rgb(#ff0000) // Returns: (255, 0, 0)
- */
-@function to-rgb($value) {
-  @return color.channel($value, "red", $space: rgb), color.channel($value, "green", $space: rgb), color.channel($value, "blue", $space: rgb);
-}
-
-/**
- * Creates an opaque color by mixing a foreground color with a background color
- * 
- * @param {Color} $background - The background color
- * @param {Color} $foreground - The foreground color to make opaque
- * @return {Color} - The resulting opaque color
- * 
- * @example
- *   opaque(#ffffff, rgba(255, 0, 0, 0.5)) // Returns solid red color
- */
-@function opaque($background, $foreground) {
-  @return color.mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
-}
-
-/**
- * Adjusts a color channel value for luminance calculation
- * 
- * @param {Number} $channel - The color channel value (0-1)
- * @return {Number} - The adjusted channel value
- * 
- * @example
- *   adjust(0.5) // Returns adjusted value for luminance calculation
- */
-@function adjust($channel) {
-  @return if($channel < 0.03928, math.div($channel, 12.92), pow(($channel + 0.055) / 1.055, 2.4));
-}
-
-/**
- * Calculates the relative luminance of a color using WCAG formula
- * 
- * @param {Color} $color - The color to calculate luminance for
- * @return {Number} - The luminance value (0-1)
- * 
- * @example
- *   luminance(#ffffff) // Returns: 1
- *   luminance(#000000) // Returns: 0
- */
-@function luminance($color) {
-  $r: math.div(color.channel($color, "red", $space: rgb), 255);
-  $g: math.div(color.channel($color, "green", $space: rgb), 255);
-  $b: math.div(color.channel($color, "blue", $space: rgb), 255);
-
-  $r: adjust($r);
-  $g: adjust($g);
-  $b: adjust($b);
-
-  @return 0.2126 * $r + 0.7152 * $g + 0.0722 * $b;
-}
-
-/**
- * Determines the best contrasting color for a given background
- * 
- * @param {Color} $background - The background color
- * @param {Color} $light - The light color option (default: #ffffff)
- * @param {Color} $dark - The dark color option (default: #000000)
- * @return {Color} - The contrasting color (light or dark)
- * 
- * @example
- *   color-contrast(#000000) // Returns: #ffffff
- *   color-contrast(#ffffff) // Returns: #000000
- */
-@function color-contrast($background, $light: #ffffff, $dark: #000000) {
-  // Get relative luminance using WCAG formula
-
-  $bg-luminance: luminance($background);
-
-  // If background is dark, return light color, otherwise dark
-  @return if($bg-luminance > 0.179, $dark, $light);
-}
-
-/**
- * Adds two values together, handling different data types
- * 
- * @param {*} $value1 - First value to add
- * @param {*} $value2 - Second value to add
- * @param {Boolean} $return-calc - Whether to return calc() function (default: true)
- * @return {*} - The result of addition or calc() expression
- * 
- * @example
- *   add(10px, 5px) // Returns: 15px
- *   add(10px, 5px, false) // Returns: 10px + 5px
- */
-@function add($value1, $value2, $return-calc: true) {
-  @if $value1 == null {
-    @return $value2;
-  }
-
-  @if $value2 == null {
-    @return $value1;
-  }
-
-  @if meta.type-of($value1) == number and meta.type-of($value2) == number and math.compatible($value1, $value2) {
-    @return $value1 + $value2;
-  }
-
-  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + string.unquote(" + ") + $value2);
-}
-
-/**
- * Subtracts the second value from the first value
- * 
- * @param {*} $value1 - The value to subtract from
- * @param {*} $value2 - The value to subtract
- * @param {Boolean} $return-calc - Whether to return calc() function (default: true)
- * @return {*} - The result of subtraction or calc() expression
- * 
- * @example
- *   subtract(10px, 5px) // Returns: 5px
- *   subtract(10px, 5px, false) // Returns: 10px - 5px
- */
-@function subtract($value1, $value2, $return-calc: true) {
-  @if $value1 == null and $value2 == null {
-    @return null;
-  }
-
-  @if $value1 == null {
-    @return -$value2;
-  }
-
-  @if $value2 == null {
-    @return $value1;
-  }
-
-  @if meta.type-of($value1) == number and meta.type-of($value2) == number and math.compatible($value1, $value2) {
-    @return $value1 - $value2;
-  }
-
-  @if meta.type-of($value2) != number {
-    $value2: string.unquote("(") + $value2 + string.unquote(")");
-  }
-
-  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
-}
-
-/**
- * Divides the dividend by the divisor with specified precision
- * 
- * @param {Number} $dividend - The number to be divided
- * @param {Number} $divisor - The number to divide by
- * @param {Number} $precision - The number of decimal places (default: 10)
- * @return {Number} - The result of division
- * 
- * @example
- *   divide(10, 2) // Returns: 5
- *   divide(10px, 2) // Returns: 5px
- *   divide(10, 3) // Returns: 3.3333333333
- */
-@function divide($dividend, $divisor, $precision: 10) {
-  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
-  $dividend: abs($dividend);
-  $divisor: abs($divisor);
-  @if $dividend == 0 {
-    @return 0;
-  }
-  @if $divisor == 0 {
-    @error "Cannot divide by 0";
-  }
-  $remainder: $dividend;
-  $result: 0;
-  $factor: 10;
-  @while ($remainder > 0 and $precision >= 0) {
-    $quotient: 0;
-    @while ($remainder >= $divisor) {
-      $remainder: $remainder - $divisor;
-      $quotient: $quotient + 1;
-    }
-    $result: $result * 10 + $quotient;
-    $factor: $factor * 0.1;
-    $remainder: $remainder * 10;
-    $precision: $precision - 1;
-    @if ($precision < 0 and $remainder >= $divisor * 5) {
-      $result: $result + 1;
-    }
-  }
-  $result: $result * $factor * $sign;
-  $dividend-unit: math.unit($dividend);
-  $divisor-unit: math.unit($divisor);
-  $unit-map: (
-    "px": 1px,
-    "rem": 1rem,
-    "em": 1em,
-    "%": 1%,
-  );
-  @if ($dividend-unit != $divisor-unit and map.has-key($unit-map, $dividend-unit)) {
-    $result: $result * map.get($unit-map, $dividend-unit);
-  }
-  @return $result;
-}
-
-/**
- * Replaces all occurrences of a search string with a replace string
- * 
- * @param {String} $string - The string to search in
- * @param {String} $search - The string to search for
- * @param {String} $replace - The string to replace with (default: "")
- * @return {String} - The string with replacements made
- * 
- * @example
- *   str-replace("hello world", "world", "universe") // Returns: "hello universe"
- *   str-replace("hello world", "o") // Returns: "hell wrld"
- */
-@function str-replace($string, $search, $replace: "") {
-  $index: string.index($string, $search);
-
-  @if $index {
-    @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
-  }
-
-  @return $string;
-}
-
-/**
- * Applies a function to each key-value pair in a map
- * 
- * @param {Map} $map - The map to iterate over
- * @param {String} $func - The name of the function to apply
- * @param {*} $args... - Additional arguments to pass to the function
- * @return {Map} - A new map with the function applied to each value
- * 
- * @example
- *   $colors: (primary: #007bff, secondary: #6c757d);
- *   map-loop($colors, darken, 10%) // Returns map with darkened colors
- */
-@function map-loop($map, $func, $args...) {
-  $_map: ();
-
-  @each $key, $value in $map {
-    // allow to pass the $key and $value of the map as an function argument
-    $_args: ();
-    @each $arg in $args {
-      $_args: list.append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
-    }
-
-    $_map: map.merge($_map, ($key: meta.call(meta.get-function($func), $_args...)));
-  }
-
-  @return $_map;
-}

core/scss/_bootstrap-override.scss

@@ -1,24 +1,26 @@
-@mixin caret($direction: down) {
+@use 'sass:color';
-  $selector: "after";
 
-  @if $direction == "left" {
+@mixin caret($direction: down) {
-    $selector: "before";
+  $selector: 'after';
+
+  @if $direction == 'left' {
+    $selector: 'before';
   }
 
   &:#{$selector} {
-    content: "";
+    content: '';
     display: inline-block;
     vertical-align: $caret-vertical-align;
     width: $caret-width;
     height: $caret-width;
     border-bottom: 1px var(--#{$prefix}border-style);
-    border-left: 1px var(--#{$prefix}border-style);
+    border-inline-start: 1px var(--#{$prefix}border-style);
-    margin-right: 0.1em;
+    margin-inline-end: 0.1em;
 
-    @if $direction != "left" {
+    @if $direction != 'left' {
-      margin-left: $caret-spacing;
+      margin-inline-start: $caret-spacing;
     } @else {
-      margin-right: $caret-spacing;
+      margin-inline-end: $caret-spacing;
     }
 
     @if $direction == down {
@@ -32,7 +34,7 @@
     }
   }
 
-  @if $direction == "left" {
+  @if $direction == 'left' {
     &:after {
       content: none;
     }
@@ -43,31 +45,17 @@
   // Override bootstrap core
 }
 
-@mixin button-variant(
+@mixin button-variant($background: null, $border: null, $color: null, $hover-background: null, $hover-border: null, $hover-color: null, $active-background: null, $active-border: null, $active-color: null, $disabled-background: null, $disabled-border: null, $disabled-color: null) {
-  $background: null,
-  $border: null,
-  $color: null,
-  $hover-background: null,
-  $hover-border: null,
-  $hover-color: null,
-  $active-background: null,
-  $active-border: null,
-  $active-color: null,
-  $disabled-background: null,
-  $disabled-border: null,
-  $disabled-color: null
-) {
   // Override bootstrap core
 }
 
-@mixin button-outline-variant(
+@mixin button-outline-variant($color: null, $color-hover: null, $active-background: null, $active-border: null, $active-color: null) {
-  $color: null,
-  $color-hover: null,
-  $active-background: null,
-  $active-border: null,
-  $active-color: null
-) {
   // Override bootstrap core
 }
 
-
+//
+// TODO: remove when https://github.com/twbs/bootstrap/pull/37425/ will be released
+//
+@function opaque($background, $foreground) {
+  @return color.mix(rgba($foreground, 1), $background, color.alpha($foreground) * 100%);
+}

core/scss/_config.scss

@@ -1,10 +1,8 @@
-@import "bootstrap/scss/functions";
+@import 'mixins';
-@import "bootstrap-functions";
+@import 'variables';
+@import 'variables-dark';
+@import 'maps';
+@import 'utilities';
 
-@import "mixins";
+@import 'bootstrap-config';
-@import "variables";
+@import 'bootstrap-override';
-@import "variables-dark";
-@import "utilities";
-
-@import "bootstrap-config";
-@import "bootstrap-override";

core/scss/_core.scss

@@ -1,84 +1,80 @@
-@import "config";
+@import 'config';
-@import "bootstrap-components";
+@import 'bootstrap-components';
 
-@import "props";
+@import 'props';
 
-@import "fonts/webfonts";
+@import 'fonts/webfonts';
+@import 'fonts/geist';
 
-@import "layout/root";
+@import 'layout/root';
-@import "layout/animations";
+@import 'layout/animations';
-@import "layout/core";
+@import 'layout/core';
-@import "layout/navbar";
+@import 'layout/navbar';
-@import "layout/page";
+@import 'layout/page';
-@import "layout/footer";
+@import 'layout/footer';
-@import "layout/dark";
+@import 'layout/dark';
 
-@import "ui/accordion";
+@import 'ui/accordion';
-@import "ui/alerts";
+@import 'ui/alerts';
-@import "ui/avatars";
+@import 'ui/avatars';
-@import "ui/badges";
+@import 'ui/badges';
-@import "ui/breadcrumbs";
+@import 'ui/breadcrumbs';
-@import "ui/buttons";
+@import 'ui/buttons';
-@import "ui/button-group";
+@import 'ui/button-group';
-@import "ui/calendars";
+@import 'ui/calendars';
-@import "ui/carousel";
+@import 'ui/carousel';
-@import "ui/cards";
+@import 'ui/cards';
-@import "ui/close";
+@import 'ui/close';
-@import "ui/dropdowns";
+@import 'ui/dropdowns';
-@import "ui/datagrid";
+@import 'ui/datagrid';
-@import "ui/empty";
+@import 'ui/empty';
-@import "ui/grid";
+@import 'ui/grid';
-@import "ui/icons";
+@import 'ui/icons';
-@import "ui/images";
+@import 'ui/images';
-@import "ui/forms";
+@import 'ui/forms';
-@import "ui/forms/form-icon";
+@import 'ui/forms/form-icon';
-@import "ui/forms/form-colorinput";
+@import 'ui/forms/form-colorinput';
-@import "ui/forms/form-imagecheck";
+@import 'ui/forms/form-imagecheck';
-@import "ui/forms/form-selectgroup";
+@import 'ui/forms/form-selectgroup';
-@import "ui/forms/form-custom";
+@import 'ui/forms/form-custom';
-@import "ui/forms/form-check";
+@import 'ui/forms/form-check';
-@import "ui/forms/validation";
+@import 'ui/forms/validation';
-@import "ui/legend";
+@import 'ui/legend';
-@import "ui/lists";
+@import 'ui/lists';
-@import "ui/loaders";
+@import 'ui/loaders';
-@import "ui/login";
+@import 'ui/login';
-@import "ui/modals";
+@import 'ui/modals';
-@import "ui/nav";
+@import 'ui/nav';
-@import "ui/stars";
+@import 'ui/stars';
-@import "ui/pagination";
+@import 'ui/pagination';
-@import "ui/popovers";
+@import 'ui/popovers';
-@import "ui/progress";
+@import 'ui/progress';
-@import "ui/ribbons";
+@import 'ui/ribbons';
-@import "ui/markdown";
+@import 'ui/markdown';
-@import "ui/placeholder";
+@import 'ui/placeholder';
-@import "ui/segmented";
+@import 'ui/segmented';
-@import "ui/steps";
+@import 'ui/steps';
-@import "ui/status";
+@import 'ui/status';
-@import "ui/switch-icon";
+@import 'ui/switch-icon';
-@import "ui/tables";
+@import 'ui/tables';
-@import "ui/tags";
+@import 'ui/tags';
-@import "ui/toasts";
+@import 'ui/toasts';
-@import "ui/toolbar";
+@import 'ui/toolbar';
-@import "ui/tracking";
+@import 'ui/tracking';
-@import "ui/timeline";
+@import 'ui/timeline';
-@import "ui/type";
+@import 'ui/type';
-@import "ui/charts";
+@import 'ui/charts';
-@import "ui/offcanvas";
+@import 'ui/offcanvas';
-@import "ui/chat";
+@import 'ui/chat';
-@import "ui/signature";
+@import 'ui/signature';
 
-@import "helpers/index";
+@import 'helpers/index';
 
-@import "utils/background";
+@import 'utils/background';
-@import "utils/colors";
+@import 'utils/colors';
-@import "utils/scroll";
+@import 'utils/scroll';
-@import "utils/sizing";
+@import 'utils/sizing';
-@import "utils/opacity";
+@import 'utils/opacity';
-@import "utils/shadow";
+@import 'utils/shadow';
-@import "utils/text";
+@import 'utils/text';
-@import "utils/hover";
+@import 'utils/hover';
-
-@import "debug";
-
-
-@import "debug";

core/scss/_debug.scss

@@ -1,49 +0,0 @@
-$debug: false;
-
-@if $debug {
-  $colors: (
-    "blue": $blue,
-    "azure": $azure,
-    "indigo": $indigo,
-    "purple": $purple,
-    "pink": $pink,
-    "red": $red,
-    "orange": $orange,
-    "yellow": $yellow,
-    "lime": $lime,
-    "green": $green,
-    "teal": $teal,
-    "cyan": $cyan,
-  );
-
-  @each $name, $color in $colors {
-    @debug ("#{$name}: '#{$color}'");
-    @debug ("#{$name}-100: '#{tint-color($color, 8)}'");
-    @debug ("#{$name}-200: '#{tint-color($color, 6)}'");
-    @debug ("#{$name}-300: '#{tint-color($color, 4)}'");
-    @debug ("#{$name}-400: '#{tint-color($color, 2)}'");
-    @debug ("#{$name}-500: '#{$color}'");
-    @debug ("#{$name}-600: '#{shade-color($color, 2)}'");
-    @debug ("#{$name}-700: '#{shade-color($color, 4)}'");
-    @debug ("#{$name}-800: '#{shade-color($color, 6)}'");
-    @debug ("#{$name}-900: '#{shade-color($color, 8)}'");
-  }
-
-  @debug ("gray: '#{$gray-500}'");
-  @debug ("gray-100: '#{$gray-100}'");
-  @debug ("gray-200: '#{$gray-200}'");
-  @debug ("gray-300: '#{$gray-300}'");
-  @debug ("gray-400: '#{$gray-400}'");
-  @debug ("gray-500: '#{$gray-500}'");
-  @debug ("gray-600: '#{$gray-600}'");
-  @debug ("gray-700: '#{$gray-700}'");
-  @debug ("gray-800: '#{$gray-800}'");
-  @debug ("gray-900: '#{$gray-900}'");
-
-  @debug ("border-color: '#{$border-color}'");
-  @debug ("text-secondary: '#{$text-secondary}'");
-
-  @each $name, $color in $social-colors {
-    @debug ("#{$name}: '#{$color}'");
-  }
-}

core/scss/_maps.scss

@@ -0,0 +1,155 @@
+@use 'sass:map';
+
+// Re-assigned maps
+//
+// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
+
+$theme-colors-rgb: map-loop($theme-colors, to-rgb, '$value') !default;
+
+$theme-colors-text: (
+  'primary': $primary-text-emphasis,
+  'secondary': $secondary-text-emphasis,
+  'success': $success-text-emphasis,
+  'info': $info-text-emphasis,
+  'warning': $warning-text-emphasis,
+  'danger': $danger-text-emphasis,
+  'light': $light-text-emphasis,
+  'dark': $dark-text-emphasis,
+) !default;
+
+$theme-colors-bg-subtle: (
+  'primary': $primary-bg-subtle,
+  'secondary': $secondary-bg-subtle,
+  'success': $success-bg-subtle,
+  'info': $info-bg-subtle,
+  'warning': $warning-bg-subtle,
+  'danger': $danger-bg-subtle,
+  'light': $light-bg-subtle,
+  'dark': $dark-bg-subtle,
+) !default;
+
+$theme-colors-border-subtle: (
+  'primary': $primary-border-subtle,
+  'secondary': $secondary-border-subtle,
+  'success': $success-border-subtle,
+  'info': $info-border-subtle,
+  'warning': $warning-border-subtle,
+  'danger': $danger-border-subtle,
+  'light': $light-border-subtle,
+  'dark': $dark-border-subtle,
+) !default;
+
+$theme-colors-text-dark: null !default;
+$theme-colors-bg-subtle-dark: null !default;
+$theme-colors-border-subtle-dark: null !default;
+
+@if $enable-dark-mode {
+  $theme-colors-text-dark: (
+    'primary': $primary-text-emphasis-dark,
+    'secondary': $secondary-text-emphasis-dark,
+    'success': $success-text-emphasis-dark,
+    'info': $info-text-emphasis-dark,
+    'warning': $warning-text-emphasis-dark,
+    'danger': $danger-text-emphasis-dark,
+    'light': $light-text-emphasis-dark,
+    'dark': $dark-text-emphasis-dark,
+  ) !default;
+
+  $theme-colors-bg-subtle-dark: (
+    'primary': $primary-bg-subtle-dark,
+    'secondary': $secondary-bg-subtle-dark,
+    'success': $success-bg-subtle-dark,
+    'info': $info-bg-subtle-dark,
+    'warning': $warning-bg-subtle-dark,
+    'danger': $danger-bg-subtle-dark,
+    'light': $light-bg-subtle-dark,
+    'dark': $dark-bg-subtle-dark,
+  ) !default;
+
+  $theme-colors-border-subtle-dark: (
+    'primary': $primary-border-subtle-dark,
+    'secondary': $secondary-border-subtle-dark,
+    'success': $success-border-subtle-dark,
+    'info': $info-border-subtle-dark,
+    'warning': $warning-border-subtle-dark,
+    'danger': $danger-border-subtle-dark,
+    'light': $light-border-subtle-dark,
+    'dark': $dark-border-subtle-dark,
+  ) !default;
+}
+
+// Utilities maps
+//
+// Extends the default `$theme-colors` maps to help create our utilities.
+
+// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
+
+$utilities-colors: $theme-colors-rgb !default;
+
+$utilities-text: map.merge(
+  $utilities-colors,
+  (
+    'black': to-rgb($black),
+    'white': to-rgb($white),
+    'body': to-rgb($body-color),
+  )
+) !default;
+$utilities-text-colors: map-loop($utilities-text, rgba-css-var, '$key', 'text') !default;
+
+$utilities-text-emphasis-colors: (
+  'primary-emphasis': var(--#{$prefix}primary-text-emphasis),
+  'secondary-emphasis': var(--#{$prefix}secondary-text-emphasis),
+  'success-emphasis': var(--#{$prefix}success-text-emphasis),
+  'info-emphasis': var(--#{$prefix}info-text-emphasis),
+  'warning-emphasis': var(--#{$prefix}warning-text-emphasis),
+  'danger-emphasis': var(--#{$prefix}danger-text-emphasis),
+  'light-emphasis': var(--#{$prefix}light-text-emphasis),
+  'dark-emphasis': var(--#{$prefix}dark-text-emphasis),
+) !default;
+
+$utilities-bg: map.merge(
+  $utilities-colors,
+  (
+    'black': to-rgb($black),
+    'white': to-rgb($white),
+    'body': to-rgb($body-bg),
+  )
+) !default;
+$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, '$key', 'bg') !default;
+
+$utilities-bg-subtle: (
+  'primary-subtle': var(--#{$prefix}primary-bg-subtle),
+  'secondary-subtle': var(--#{$prefix}secondary-bg-subtle),
+  'success-subtle': var(--#{$prefix}success-bg-subtle),
+  'info-subtle': var(--#{$prefix}info-bg-subtle),
+  'warning-subtle': var(--#{$prefix}warning-bg-subtle),
+  'danger-subtle': var(--#{$prefix}danger-bg-subtle),
+  'light-subtle': var(--#{$prefix}light-bg-subtle),
+  'dark-subtle': var(--#{$prefix}dark-bg-subtle),
+) !default;
+
+$utilities-border: map.merge(
+  $utilities-colors,
+  (
+    'black': to-rgb($black),
+    'white': to-rgb($white),
+  )
+) !default;
+$utilities-border-colors: map-loop($utilities-border, rgba-css-var, '$key', 'border') !default;
+
+$utilities-border-subtle: (
+  'primary-subtle': var(--#{$prefix}primary-border-subtle),
+  'secondary-subtle': var(--#{$prefix}secondary-border-subtle),
+  'success-subtle': var(--#{$prefix}success-border-subtle),
+  'info-subtle': var(--#{$prefix}info-border-subtle),
+  'warning-subtle': var(--#{$prefix}warning-border-subtle),
+  'danger-subtle': var(--#{$prefix}danger-border-subtle),
+  'light-subtle': var(--#{$prefix}light-border-subtle),
+  'dark-subtle': var(--#{$prefix}dark-border-subtle),
+) !default;
+
+$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, '$key', 'link-underline') !default;
+
+$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
+
+$gutters: $spacers !default;

core/scss/_mixins.scss

@@ -1,2 +1,2 @@
-@import "mixins/mixins";
+@import 'mixins/mixins';
-@import "mixins/functions";
+@import 'mixins/functions';

core/scss/_props.scss

@@ -1,5 +1,5 @@
-@use "sass:map";
+@use 'sass:map';
-@import "config";
+@import 'config';
 
 :root,
 :host {
@@ -32,6 +32,7 @@
 
   /** Theme colors */
   @each $name, $color in map.merge($theme-colors, $social-colors) {
+    @debug contrast-ratio($color, white), $name, $min-contrast-ratio;
     --#{$prefix}#{$name}: #{$color};
     --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
     --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};

core/scss/_utilities-marketing.scss

@@ -1,167 +1,158 @@
-@use "sass:map";
+@use 'sass:map';
 
-$negative-spacers-extra: if(
+$negative-spacers-extra: if($enable-negative-margins, negativify-map(map.merge($spacers, $spacers-extra)), null);
-  $enable-negative-margins,
-  negativify-map(map.merge($spacers, $spacers-extra)),
-  null
-);
 
 $utilities: (
   // Margin utilities
-  "margin":
+  'margin': (
-    (
       responsive: true,
       property: margin,
       class: m,
       values: $spacers-extra,
     ),
-  "margin-x": (
+  'margin-x': (
     responsive: true,
-    property: margin-right margin-left,
+    property: margin-inline-end margin-inline-start,
     class: mx,
     values: $spacers-extra,
   ),
-  "margin-y": (
+  'margin-y': (
     responsive: true,
     property: margin-top margin-bottom,
     class: my,
     values: $spacers-extra,
   ),
-  "margin-top": (
+  'margin-top': (
     responsive: true,
     property: margin-top,
     class: mt,
     values: $spacers-extra,
   ),
-  "margin-end": (
+  'margin-end': (
     responsive: true,
-    property: margin-right,
+    property: margin-inline-end,
     class: me,
     values: $spacers-extra,
   ),
-  "margin-bottom": (
+  'margin-bottom': (
     responsive: true,
     property: margin-bottom,
     class: mb,
     values: $spacers-extra,
   ),
-  "margin-start": (
+  'margin-start': (
     responsive: true,
-    property: margin-left,
+    property: margin-inline-start,
     class: ms,
     values: $spacers-extra,
   ),
   // Negative margin utilities
-  "negative-margin":
+  'negative-margin': (
-    (
       responsive: true,
       property: margin,
       class: m,
       values: $negative-spacers-extra,
     ),
-  "negative-margin-x": (
+  'negative-margin-x': (
     responsive: true,
-    property: margin-right margin-left,
+    property: margin-inline-end margin-inline-start,
     class: mx,
     values: $negative-spacers-extra,
   ),
-  "negative-margin-y": (
+  'negative-margin-y': (
     responsive: true,
     property: margin-top margin-bottom,
     class: my,
     values: $negative-spacers-extra,
   ),
-  "negative-margin-top": (
+  'negative-margin-top': (
     responsive: true,
     property: margin-top,
     class: mt,
     values: $negative-spacers-extra,
   ),
-  "negative-margin-end": (
+  'negative-margin-end': (
     responsive: true,
-    property: margin-right,
+    property: margin-inline-end,
     class: me,
     values: $negative-spacers-extra,
   ),
-  "negative-margin-bottom": (
+  'negative-margin-bottom': (
     responsive: true,
     property: margin-bottom,
     class: mb,
     values: $negative-spacers-extra,
   ),
-  "negative-margin-start": (
+  'negative-margin-start': (
     responsive: true,
-    property: margin-left,
+    property: margin-inline-start,
     class: ms,
     values: $negative-spacers-extra,
   ),
   // Padding utilities
-  "padding":
+  'padding': (
-    (
       responsive: true,
       property: padding,
       class: p,
       values: $spacers-extra,
     ),
-  "padding-x": (
+  'padding-x': (
     responsive: true,
-    property: padding-right padding-left,
+    property: padding-inline-end padding-inline-start,
     class: px,
     values: $spacers-extra,
   ),
-  "padding-y": (
+  'padding-y': (
     responsive: true,
     property: padding-top padding-bottom,
     class: py,
     values: $spacers-extra,
   ),
-  "padding-top": (
+  'padding-top': (
     responsive: true,
     property: padding-top,
     class: pt,
     values: $spacers-extra,
   ),
-  "padding-end": (
+  'padding-end': (
     responsive: true,
-    property: padding-right,
+    property: padding-inline-end,
     class: pe,
     values: $spacers-extra,
   ),
-  "padding-bottom": (
+  'padding-bottom': (
     responsive: true,
     property: padding-bottom,
     class: pb,
     values: $spacers-extra,
   ),
-  "padding-start": (
+  'padding-start': (
     responsive: true,
-    property: padding-left,
+    property: padding-inline-start,
     class: ps,
     values: $spacers-extra,
   ),
   // Gap utility
-  "gap":
+  'gap': (
-    (
       responsive: true,
       property: gap,
       class: gap,
       values: $spacers-extra,
     ),
-  "row-gap": (
+  'row-gap': (
     responsive: true,
     property: row-gap,
     class: row-gap,
     values: $spacers-extra,
   ),
-  "column-gap": (
+  'column-gap': (
     responsive: true,
     property: column-gap,
     class: column-gap,
     values: $spacers-extra,
   ),
   // Letter spacing
-  "spacing":
+  'spacing': (
-    (
       property: letter-spacing,
       class: tracking,
       values: (
@@ -170,38 +161,38 @@ $utilities: (
         wide: $spacing-wide,
       ),
     ),
-  "width": (
+  'width': (
     property: width,
     class: w,
     values: $spacers-extra,
   ),
-  "height": (
+  'height': (
     property: height,
     class: h,
     values: $spacers-extra,
   ),
-  "filter": (
+  'filter': (
     property: filter,
     class: filter,
     values: (
       grayscale: grayscale(100%),
     ),
   ),
-  "gutter-x": (
+  'gutter-x': (
     responsive: true,
     css-var: true,
     css-variable-name: gutter-x,
     class: gx,
     values: $spacers-extra,
   ),
-  "gutter-y": (
+  'gutter-y': (
     responsive: true,
     css-var: true,
     css-variable-name: gutter-y,
     class: gy,
     values: $spacers-extra,
   ),
-  "gutter": (
+  'gutter': (
     responsive: true,
     css-var: true,
     css-variable-name: gutter-x,

core/scss/_utilities.scss

@@ -1,19 +1,127 @@
+@use 'sass:map';
+
 $border-values: (
-  null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
+  null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent),
-    var(--#{$prefix}border-color-translucent),
+  wide: $border-width-wide var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent),
-  wide: $border-width-wide var(--#{$prefix}border-style)
-    var(--#{$prefix}border-color-translucent),
   0: 0,
 );
 
-$utilities-border-colors: map-loop((
+$utilities-border-colors: map-loop(
-  "red": red,
+  (
-  "green": green,
+    'red': red,
-), rgba-css-var, "$key", "border") !default;
+    'green': green,
+  ),
+  rgba-css-var,
+  '$key',
+  'border'
+) !default;
 
 //Utilities
 $utilities: (
-  "object": (
+  'align': (
+    property: vertical-align,
+    class: align,
+    values: baseline top middle bottom text-bottom text-top,
+  ),
+  'float': (
+    responsive: true,
+    property: float,
+    values: (
+      start: left,
+      end: right,
+      none: none,
+    ),
+  ),
+  // Object Fit utilities
+  'object-fit': (
+      responsive: true,
+      property: object-fit,
+      values: (
+        contain: contain,
+        cover: cover,
+        fill: fill,
+        scale: scale-down,
+        none: none,
+      ),
+    ),
+  // Opacity utilities
+  'opacity': (
+      property: opacity,
+      values: (
+        0: 0,
+        25: 0.25,
+        50: 0.5,
+        75: 0.75,
+        100: 1,
+      ),
+    ),
+  'overflow': (
+    property: overflow,
+    values: auto hidden visible scroll,
+  ),
+  'overflow-x': (
+    property: overflow-x,
+    values: auto hidden visible scroll,
+  ),
+  'overflow-y': (
+    property: overflow-y,
+    values: auto hidden visible scroll,
+  ),
+  'display': (
+    responsive: true,
+    print: true,
+    property: display,
+    class: d,
+    values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none,
+  ),
+  'shadow': (
+    property: box-shadow,
+    class: shadow,
+    values: (
+      null: var(--#{$prefix}box-shadow),
+      sm: var(--#{$prefix}box-shadow-sm),
+      lg: var(--#{$prefix}box-shadow-lg),
+      none: none,
+    ),
+  ),
+  'focus-ring': (
+    css-var: true,
+    css-variable-name: focus-ring-color,
+    class: focus-ring,
+    values: map-loop($theme-colors-rgb, rgba-css-var, '$key', 'focus-ring'),
+  ),
+  'position': (
+    property: position,
+    values: static relative absolute fixed sticky,
+  ),
+  'top': (
+    property: top,
+    values: $position-values,
+  ),
+  'bottom': (
+    property: bottom,
+    values: $position-values,
+  ),
+  'start': (
+    property: left,
+    class: start,
+    values: $position-values,
+  ),
+  'end': (
+    property: right,
+    class: end,
+    values: $position-values,
+  ),
+  'translate-middle': (
+    property: transform,
+    class: translate-middle,
+    values: (
+      null: translate(-50%, -50%),
+      x: translateX(-50%),
+      y: translateY(-50%),
+    ),
+  ),
+  'object': (
     property: object-fit,
     class: object,
     values: (
@@ -24,7 +132,7 @@ $utilities: (
       none: none,
     ),
   ),
-  "cursor": (
+  'cursor': (
     property: cursor,
     class: cursor,
     values: (
@@ -46,71 +154,429 @@ $utilities: (
       crosshair: crosshair,
     ),
   ),
-  "border": (
+  'border': (
     property: border,
     values: $border-values,
   ),
-  "border-top": (
+  'border-top': (
     property: border-top,
     values: $border-values,
   ),
-  "border-end": (
+  'border-end': (
     class: border-end,
-    property: border-right,
+    property: border-inline-end,
     values: $border-values,
   ),
-  "border-bottom": (
+  'border-bottom': (
     property: border-bottom,
     values: $border-values,
   ),
-  "border-start": (
+  'border-start': (
     class: border-start,
-    property: border-left,
+    property: border-inline-start,
     values: $border-values,
   ),
-  "border-x": (
+  'border-x': (
     class: border-x,
-    property: border-left border-right,
+    property: border-inline-start border-inline-end,
     values: $border-values,
   ),
-  "border-y": (
+  'border-y': (
     class: border-y,
     property: border-top border-bottom,
     values: $border-values,
   ),
-  "width": (
+  'border-color': (
+    property: border-color,
+    class: border,
+    local-vars: (
+      'border-opacity': 1,
+    ),
+    values: $utilities-border-colors,
+  ),
+  'subtle-border-color': (
+    property: border-color,
+    class: border,
+    values: $utilities-border-subtle,
+  ),
+  'border-width': (
+    property: border-width,
+    class: border,
+    values: $border-widths,
+  ),
+  'border-opacity': (
+    css-var: true,
+    class: border-opacity,
+    values: (
+      10: 0.1,
+      25: 0.25,
+      50: 0.5,
+      75: 0.75,
+      100: 1,
+    ),
+  ),
+  'width': (
     property: width,
     class: w,
     values: $size-values,
   ),
-  "height": (
+  'max-width': (
+    property: max-width,
+    class: mw,
+    values: (
+      100: 100%,
+    ),
+  ),
+  'viewport-width': (
+    property: width,
+    class: vw,
+    values: (
+      100: 100vw,
+    ),
+  ),
+  'min-viewport-width': (
+    property: min-width,
+    class: min-vw,
+    values: (
+      100: 100vw,
+    ),
+  ),
+  'height': (
     property: height,
     class: h,
     values: $size-values,
   ),
-  "columns": (
+  'max-height': (
+    property: max-height,
+    class: mh,
+    values: (
+      100: 100%,
+    ),
+  ),
+  'viewport-height': (
+    property: height,
+    class: vh,
+    values: (
+      100: 100vh,
+    ),
+  ),
+  'min-viewport-height': (
+    property: min-height,
+    class: min-vh,
+    values: (
+      100: 100vh,
+    ),
+  ),
+  'columns': (
     property: columns,
     class: columns,
     responsive: true,
     values: 2 3 4,
   ),
-  "bg-pattern": (
+  // Flex utilities
+  'flex': (
+      responsive: true,
+      property: flex,
+      values: (
+        fill: 1 1 auto,
+      ),
+    ),
+  'flex-direction': (
+    responsive: true,
+    property: flex-direction,
+    class: flex,
+    values: row column row-reverse column-reverse,
+  ),
+  'flex-grow': (
+    responsive: true,
+    property: flex-grow,
+    class: flex,
+    values: (
+      grow-0: 0,
+      grow-1: 1,
+    ),
+  ),
+  'flex-shrink': (
+    responsive: true,
+    property: flex-shrink,
+    class: flex,
+    values: (
+      shrink-0: 0,
+      shrink-1: 1,
+    ),
+  ),
+  'flex-wrap': (
+    responsive: true,
+    property: flex-wrap,
+    class: flex,
+    values: wrap nowrap wrap-reverse,
+  ),
+  'justify-content': (
+    responsive: true,
+    property: justify-content,
+    values: (
+      start: flex-start,
+      end: flex-end,
+      center: center,
+      between: space-between,
+      around: space-around,
+      evenly: space-evenly,
+    ),
+  ),
+  'align-items': (
+    responsive: true,
+    property: align-items,
+    values: (
+      start: flex-start,
+      end: flex-end,
+      center: center,
+      baseline: baseline,
+      stretch: stretch,
+    ),
+  ),
+  'align-content': (
+    responsive: true,
+    property: align-content,
+    values: (
+      start: flex-start,
+      end: flex-end,
+      center: center,
+      between: space-between,
+      around: space-around,
+      stretch: stretch,
+    ),
+  ),
+  'align-self': (
+    responsive: true,
+    property: align-self,
+    values: (
+      auto: auto,
+      start: flex-start,
+      end: flex-end,
+      center: center,
+      baseline: baseline,
+      stretch: stretch,
+    ),
+  ),
+  'order': (
+    responsive: true,
+    property: order,
+    values: (
+      first: -1,
+      0: 0,
+      1: 1,
+      2: 2,
+      3: 3,
+      4: 4,
+      5: 5,
+      last: 6,
+    ),
+  ),
+  // Margin utilities
+  'margin': (
+      responsive: true,
+      property: margin,
+      class: m,
+      values: map.merge(
+          $spacers,
+          (
+            auto: auto,
+          )
+        ),
+    ),
+  'margin-x': (
+    responsive: true,
+    property: margin-right margin-left,
+    class: mx,
+    values: map.merge(
+        $spacers,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  'margin-y': (
+    responsive: true,
+    property: margin-top margin-bottom,
+    class: my,
+    values: map.merge(
+        $spacers,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  'margin-top': (
+    responsive: true,
+    property: margin-top,
+    class: mt,
+    values: map.merge(
+        $spacers,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  'margin-end': (
+    responsive: true,
+    property: margin-right,
+    class: me,
+    values: map.merge(
+        $spacers,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  'margin-bottom': (
+    responsive: true,
+    property: margin-bottom,
+    class: mb,
+    values: map.merge(
+        $spacers,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  'margin-start': (
+    responsive: true,
+    property: margin-left,
+    class: ms,
+    values: map.merge(
+        $spacers,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  // Negative margin utilities
+  'negative-margin': (
+      responsive: true,
+      property: margin,
+      class: m,
+      values: $negative-spacers,
+    ),
+  'negative-margin-x': (
+    responsive: true,
+    property: margin-right margin-left,
+    class: mx,
+    values: $negative-spacers,
+  ),
+  'negative-margin-y': (
+    responsive: true,
+    property: margin-top margin-bottom,
+    class: my,
+    values: $negative-spacers,
+  ),
+  'negative-margin-top': (
+    responsive: true,
+    property: margin-top,
+    class: mt,
+    values: $negative-spacers,
+  ),
+  'negative-margin-end': (
+    responsive: true,
+    property: margin-right,
+    class: me,
+    values: $negative-spacers,
+  ),
+  'negative-margin-bottom': (
+    responsive: true,
+    property: margin-bottom,
+    class: mb,
+    values: $negative-spacers,
+  ),
+  'negative-margin-start': (
+    responsive: true,
+    property: margin-left,
+    class: ms,
+    values: $negative-spacers,
+  ),
+  // Padding utilities
+  'padding': (
+      responsive: true,
+      property: padding,
+      class: p,
+      values: $spacers,
+    ),
+  'padding-x': (
+    responsive: true,
+    property: padding-right padding-left,
+    class: px,
+    values: $spacers,
+  ),
+  'padding-y': (
+    responsive: true,
+    property: padding-top padding-bottom,
+    class: py,
+    values: $spacers,
+  ),
+  'padding-top': (
+    responsive: true,
+    property: padding-top,
+    class: pt,
+    values: $spacers,
+  ),
+  'padding-end': (
+    responsive: true,
+    property: padding-right,
+    class: pe,
+    values: $spacers,
+  ),
+  'padding-bottom': (
+    responsive: true,
+    property: padding-bottom,
+    class: pb,
+    values: $spacers,
+  ),
+  'padding-start': (
+    responsive: true,
+    property: padding-left,
+    class: ps,
+    values: $spacers,
+  ),
+  // Gap utility
+  'gap': (
+      responsive: true,
+      property: gap,
+      class: gap,
+      values: $spacers,
+    ),
+  'row-gap': (
+    responsive: true,
+    property: row-gap,
+    class: row-gap,
+    values: $spacers,
+  ),
+  'column-gap': (
+    responsive: true,
+    property: column-gap,
+    class: column-gap,
+    values: $spacers,
+  ),
+  'bg-pattern': (
     property: background,
     class: bg-pattern,
     values: (
-      transparent: #{url-svg(
+      transparent: #{url-svg('<svg width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="8" height="8" fill="rgba(130, 130, 130, .1)" /><rect x="8" y="8" width="8" height="8" fill="rgba(130, 130, 130, .1)" /></svg>')} repeat center/16px 16px,
-        '<svg width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="8" height="8" fill="rgba(130, 130, 130, .1)" /><rect x="8" y="8" width="8" height="8" fill="rgba(130, 130, 130, .1)" /></svg>'
-      )} repeat center/16px 16px,
-    )
     ),
-  "bg-gradient": (
+  ),
+  'bg-gradient': (
     property: background,
     class: bg-gradient,
     values: (
       null: linear-gradient(var(--#{$prefix}gradient-direction, to right), var(--#{$prefix}gradient-stops, var(--#{$prefix}gradient-from, transparent), var(--#{$prefix}gradient-to, transparent))) no-repeat,
     ),
   ),
-  "bg-gradient-direction": (
+  'bg-blur': (
+    property: backdrop-filter,
+    class: bg-blur,
+    values: (
+      null: blur($backdrop-blur),
+    ),
+  ),
+  'bg-gradient-direction': (
     property: --#{$prefix}gradient-direction,
     class: bg-gradient,
     values: (
@@ -124,7 +590,7 @@ $utilities: (
       to-ts: to top left,
     ),
   ),
-  "table-layout": (
+  'table-layout': (
     property: table-layout,
     class: table,
     values: (
@@ -132,4 +598,300 @@ $utilities: (
       fixed: fixed,
     ),
   ),
+  // Text
+  'font-family': (
+      property: font-family,
+      class: font,
+      values: (
+        monospace: var(--#{$prefix}font-monospace),
+      ),
+    ),
+  'font-size': (
+    property: font-size,
+    class: fs,
+    values: $font-sizes,
+  ),
+  'font-style': (
+    property: font-style,
+    class: fst,
+    values: italic normal,
+  ),
+  'font-weight': (
+    property: font-weight,
+    class: fw,
+    values: (
+      lighter: $font-weight-lighter,
+      light: $font-weight-light,
+      normal: $font-weight-normal,
+      medium: $font-weight-medium,
+      semibold: $font-weight-semibold,
+      bold: $font-weight-bold,
+      bolder: $font-weight-bolder,
+    ),
+  ),
+  'line-height': (
+    property: line-height,
+    class: lh,
+    values: (
+      1: 1,
+      sm: $line-height-sm,
+      base: $line-height-base,
+      lg: $line-height-lg,
+    ),
+  ),
+  'text-align': (
+    responsive: true,
+    property: text-align,
+    class: text,
+    values: (
+      start: left,
+      end: right,
+      center: center,
+    ),
+  ),
+  'text-decoration': (
+    property: text-decoration,
+    values: none underline line-through,
+  ),
+  'text-transform': (
+    property: text-transform,
+    class: text,
+    values: lowercase uppercase capitalize,
+  ),
+  'white-space': (
+    property: white-space,
+    class: text,
+    values: (
+      wrap: normal,
+      nowrap: nowrap,
+    ),
+  ),
+  'word-wrap': (
+    property: word-wrap word-break,
+    class: text,
+    values: (
+      break: break-word,
+    ),
+    rtl: false,
+  ),
+  'color': (
+    property: color,
+    class: text,
+    local-vars: (
+      'text-opacity': 1,
+    ),
+    values: map.merge(
+        $utilities-text-colors,
+        (
+          'muted': var(--#{$prefix}secondary-color),
+          // deprecated
+          'black-50': rgba($black, 0.5),
+          // deprecated
+          'white-50': rgba($white, 0.5),
+          // deprecated
+          'body-secondary': var(--#{$prefix}secondary-color),
+          'body-tertiary': var(--#{$prefix}tertiary-color),
+          'body-emphasis': var(--#{$prefix}emphasis-color),
+          'reset': inherit,
+        )
+      ),
+  ),
+  'text-opacity': (
+    css-var: true,
+    class: text-opacity,
+    values: (
+      25: 0.25,
+      50: 0.5,
+      75: 0.75,
+      100: 1,
+    ),
+  ),
+  'text-color': (
+    property: color,
+    class: text,
+    values: $utilities-text-emphasis-colors,
+  ),
+  'link-opacity': (
+    css-var: true,
+    class: link-opacity,
+    state: hover,
+    values: (
+      10: 0.1,
+      25: 0.25,
+      50: 0.5,
+      75: 0.75,
+      100: 1,
+    ),
+  ),
+  'link-offset': (
+    property: text-underline-offset,
+    class: link-offset,
+    state: hover,
+    values: (
+      1: 0.125em,
+      2: 0.25em,
+      3: 0.375em,
+    ),
+  ),
+  'link-underline': (
+    property: text-decoration-color,
+    class: link-underline,
+    local-vars: (
+      'link-underline-opacity': 1,
+    ),
+    values: map.merge(
+        $utilities-links-underline,
+        (
+          null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
+        )
+      ),
+  ),
+  'link-underline-opacity': (
+    css-var: true,
+    class: link-underline-opacity,
+    state: hover,
+    values: (
+      0: 0,
+      10: 0.1,
+      25: 0.25,
+      50: 0.5,
+      75: 0.75,
+      100: 1,
+    ),
+  ),
+  'background-color': (
+    property: background-color,
+    class: bg,
+    local-vars: (
+      'bg-opacity': 1,
+    ),
+    values: map.merge(
+        $utilities-bg-colors,
+        (
+          'transparent': transparent,
+          'body-secondary': rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
+          'body-tertiary': rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
+        )
+      ),
+  ),
+  'bg-opacity': (
+    css-var: true,
+    class: bg-opacity,
+    values: (
+      10: 0.1,
+      25: 0.25,
+      50: 0.5,
+      75: 0.75,
+      100: 1,
+    ),
+  ),
+  'subtle-background-color': (
+    property: background-color,
+    class: bg,
+    values: $utilities-bg-subtle,
+  ),
+  'gradient': (
+    property: background-image,
+    class: bg,
+    values: (
+      gradient: var(--#{$prefix}gradient),
+    ),
+  ),
+  'user-select': (
+    property: user-select,
+    values: all auto none,
+  ),
+  'pointer-events': (
+    property: pointer-events,
+    class: pe,
+    values: none auto,
+  ),
+  'rounded': (
+    property: border-radius,
+    class: rounded,
+    values: (
+      null: var(--#{$prefix}border-radius),
+      0: 0,
+      1: var(--#{$prefix}border-radius-sm),
+      2: var(--#{$prefix}border-radius),
+      3: var(--#{$prefix}border-radius-lg),
+      4: var(--#{$prefix}border-radius-xl),
+      5: var(--#{$prefix}border-radius-xxl),
+      circle: 50%,
+      pill: var(--#{$prefix}border-radius-pill),
+    ),
+  ),
+  'rounded-top': (
+    property: border-start-start-radius border-start-end-radius,
+    class: rounded-top,
+    values: (
+      null: var(--#{$prefix}border-radius),
+      0: 0,
+      1: var(--#{$prefix}border-radius-sm),
+      2: var(--#{$prefix}border-radius),
+      3: var(--#{$prefix}border-radius-lg),
+      4: var(--#{$prefix}border-radius-xl),
+      5: var(--#{$prefix}border-radius-xxl),
+      circle: 50%,
+      pill: var(--#{$prefix}border-radius-pill),
+    ),
+  ),
+  'rounded-end': (
+    property: border-end-end-radius border-end-start-radius,
+    class: rounded-end,
+    values: (
+      null: var(--#{$prefix}border-radius),
+      0: 0,
+      1: var(--#{$prefix}border-radius-sm),
+      2: var(--#{$prefix}border-radius),
+      3: var(--#{$prefix}border-radius-lg),
+      4: var(--#{$prefix}border-radius-xl),
+      5: var(--#{$prefix}border-radius-xxl),
+      circle: 50%,
+      pill: var(--#{$prefix}border-radius-pill),
+    ),
+  ),
+  'rounded-bottom': (
+    property: border-end-end-radius border-end-start-radius,
+    class: rounded-bottom,
+    values: (
+      null: var(--#{$prefix}border-radius),
+      0: 0,
+      1: var(--#{$prefix}border-radius-sm),
+      2: var(--#{$prefix}border-radius),
+      3: var(--#{$prefix}border-radius-lg),
+      4: var(--#{$prefix}border-radius-xl),
+      5: var(--#{$prefix}border-radius-xxl),
+      circle: 50%,
+      pill: var(--#{$prefix}border-radius-pill),
+    ),
+  ),
+  'rounded-start': (
+    property: border-start-start-radius border-start-end-radius,
+    class: rounded-start,
+    values: (
+      null: var(--#{$prefix}border-radius),
+      0: 0,
+      1: var(--#{$prefix}border-radius-sm),
+      2: var(--#{$prefix}border-radius),
+      3: var(--#{$prefix}border-radius-lg),
+      4: var(--#{$prefix}border-radius-xl),
+      5: var(--#{$prefix}border-radius-xxl),
+      circle: 50%,
+      pill: var(--#{$prefix}border-radius-pill),
+    ),
+  ),
+  'visibility': (
+    property: visibility,
+    class: null,
+    values: (
+      visible: visible,
+      invisible: hidden,
+    ),
+  ),
+  'z-index': (
+    property: z-index,
+    class: z,
+    values: $zindex-levels,
+  ),
 ) !default;

core/scss/_variables-dark.scss

@@ -1,4 +1,4 @@
-@use "sass:color";
+@use 'sass:color';
 
 //
 // Dark mode
@@ -6,7 +6,7 @@
 $darken-dark: color.adjust($dark, $lightness: -2%) !default;
 $lighten-dark: color.adjust($dark, $lightness: 2%) !default;
 $border-color-dark: color.adjust($dark, $lightness: 8%) !default;
-$border-color-translucent-dark: rgba(72, 110, 149, .14) !default;
+$border-color-translucent-dark: rgba(128, 150, 172, 0.2) !default;
 $border-dark-color-dark: color.adjust($dark, $lightness: 4%) !default;
 $border-active-color-dark: color.adjust($dark, $lightness: 12%) !default;
 
@@ -17,3 +17,96 @@ $body-emphasis-color-dark: $white !default;
 $code-color-dark: var(--#{$prefix}gray-300) !default;
 $text-secondary-dark: rgba(153, 159, 164, 1) !default;
 
+// Theme text emphasis dark
+$primary-text-emphasis-dark: tint-color($primary, 40%) !default;
+$secondary-text-emphasis-dark: tint-color($secondary, 40%) !default;
+$success-text-emphasis-dark: tint-color($success, 40%) !default;
+$info-text-emphasis-dark: tint-color($info, 40%) !default;
+$warning-text-emphasis-dark: tint-color($warning, 40%) !default;
+$danger-text-emphasis-dark: tint-color($danger, 40%) !default;
+$light-text-emphasis-dark: $gray-100 !default;
+$dark-text-emphasis-dark: $gray-300 !default;
+
+// Theme bg subtle dark
+$primary-bg-subtle-dark: shade-color($primary, 80%) !default;
+$secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;
+$success-bg-subtle-dark: shade-color($success, 80%) !default;
+$info-bg-subtle-dark: shade-color($info, 80%) !default;
+$warning-bg-subtle-dark: shade-color($warning, 80%) !default;
+$danger-bg-subtle-dark: shade-color($danger, 80%) !default;
+$light-bg-subtle-dark: $gray-800 !default;
+$dark-bg-subtle-dark: color.mix($gray-800, $black) !default;
+
+// Theme border subtle dark
+$primary-border-subtle-dark: shade-color($primary, 40%) !default;
+$secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
+$success-border-subtle-dark: shade-color($success, 40%) !default;
+$info-border-subtle-dark: shade-color($info, 40%) !default;
+$warning-border-subtle-dark: shade-color($warning, 40%) !default;
+$danger-border-subtle-dark: shade-color($danger, 40%) !default;
+$light-border-subtle-dark: $gray-700 !default;
+$dark-border-subtle-dark: $gray-800 !default;
+
+// Body dark
+$body-bg-dark: $gray-900 !default;
+$body-secondary-color-dark: rgba($body-color-dark, 0.75) !default;
+$body-secondary-bg-dark: $gray-800 !default;
+$body-tertiary-color-dark: rgba($body-color-dark, 0.5) !default;
+$body-tertiary-bg-dark: color.mix($gray-800, $gray-900, 50%) !default;
+
+// Headings dark
+$headings-color-dark: inherit !default;
+
+// Link dark
+$link-color-dark: tint-color($primary, 40%) !default;
+$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
+
+// Mark dark
+$mark-color-dark: $body-color-dark !default;
+$mark-bg-dark: shade-color($yellow, 60%) !default;
+
+//
+// Forms dark
+//
+
+$form-select-indicator-color-dark: $body-color-dark !default;
+$form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
+
+$form-switch-color-dark: rgba($white, 0.25) !default;
+$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
+
+// Form validation colors dark
+$form-valid-color-dark: tint-color($green, 40%) !default;
+$form-valid-border-color-dark: tint-color($green, 40%) !default;
+$form-invalid-color-dark: tint-color($red, 40%) !default;
+$form-invalid-border-color-dark: tint-color($red, 40%) !default;
+
+//
+// Accordion dark
+//
+
+$accordion-icon-color-dark: $primary-text-emphasis-dark !default;
+$accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
+
+$accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
+$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
+
+//
+// Carousel dark
+//
+
+$carousel-dark-indicator-active-bg: $black !default; // Deprecated in v5.3.4
+$carousel-dark-caption-color: $black !default; // Deprecated in v5.3.4
+$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; // Deprecated in v5.3.4
+
+$carousel-indicator-active-bg-dark: $carousel-dark-indicator-active-bg !default;
+$carousel-caption-color-dark: $carousel-dark-caption-color !default;
+$carousel-control-icon-filter-dark: $carousel-dark-control-icon-filter !default;
+
+//
+// Close button dark
+//
+
+$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; // Deprecated in v5.3.4
+
+$btn-close-filter-dark: $btn-close-white-filter !default;

core/scss/fonts/_geist.scss

@@ -0,0 +1,184 @@
+// Geist Sans Font Family
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Thin.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Thin.ttf') format('truetype');
+	font-weight: 100;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.ttf') format('truetype');
+	font-weight: 200;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Light.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Light.ttf') format('truetype');
+	font-weight: 300;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Regular.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Regular.ttf') format('truetype');
+	font-weight: 400;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Medium.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Medium.ttf') format('truetype');
+	font-weight: 500;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.ttf') format('truetype');
+	font-weight: 600;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Bold.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Bold.ttf') format('truetype');
+	font-weight: 700;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Black.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Black.ttf') format('truetype');
+	font-weight: 800;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.ttf') format('truetype');
+	font-weight: 900;
+	font-style: normal;
+	font-display: swap;
+}
+
+// Geist Sans Variable Font
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Variable.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Variable.ttf') format('truetype');
+	font-weight: 100 900;
+	font-style: normal;
+	font-display: swap;
+}
+
+// Geist Mono Font Family
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.ttf') format('truetype');
+	font-weight: 100;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.ttf') format('truetype');
+	font-weight: 200;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.ttf') format('truetype');
+	font-weight: 300;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.ttf') format('truetype');
+	font-weight: 400;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.ttf') format('truetype');
+	font-weight: 500;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.ttf') format('truetype');
+	font-weight: 600;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.ttf') format('truetype');
+	font-weight: 700;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.ttf') format('truetype');
+	font-weight: 800;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.ttf') format('truetype');
+	font-weight: 900;
+	font-style: normal;
+	font-display: swap;
+}
+
+// Geist Mono Variable Font
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.ttf') format('truetype');
+	font-weight: 100 900;
+	font-style: normal;
+	font-display: swap;
+}
+

core/scss/fonts/_webfonts.scss

@@ -1,10 +1,10 @@
 @if $font-google {
-  $google-font-url: "https://fonts.googleapis.com/css2?family=" + str-replace($font-google, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
+  $google-font-url: 'https://fonts.googleapis.com/css2?family=' + str-replace($font-google, ' ', '+') + ':wght@300;400;500;600;700&display=swap' !default;
   @import url($google-font-url);
 }
 
 @if $font-google-monospaced {
-  $google-font-monospaced-url: "https://fonts.googleapis.com/css2?family=" + str-replace($font-google-monospaced, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
+  $google-font-monospaced-url: 'https://fonts.googleapis.com/css2?family=' + str-replace($font-google-monospaced, ' ', '+') + ':wght@300;400;500;600;700&display=swap' !default;
   @import url($google-font-monospaced-url);
 }
 

core/scss/helpers/_index.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 //
 // Clearfix
 //
@@ -28,14 +30,14 @@
 // Stretched link
 //
 .stretched-link {
-  &::#{$stretched-link-pseudo-element} {
+  &::after {
     position: absolute;
     top: 0;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
-    left: 0;
+    inset-inline-start: 0;
-    z-index: $stretched-link-z-index;
+    z-index: 1;
-    content: "";
+    content: '';
   }
 }
 
@@ -72,21 +74,21 @@
 .fixed-top {
   position: fixed;
   top: 0;
-  right: 0;
+  inset-inline-end: 0;
-  left: 0;
+  inset-inline-start: 0;
   z-index: $zindex-fixed;
 }
 
 .fixed-bottom {
   position: fixed;
-  right: 0;
+  inset-inline-end: 0;
   bottom: 0;
-  left: 0;
+  inset-inline-start: 0;
   z-index: $zindex-fixed;
 }
 
 // Responsive sticky top and bottom
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
@@ -114,13 +116,13 @@
   &::before {
     display: block;
     padding-top: var(--#{$prefix}aspect-ratio);
-    content: "";
+    content: '';
   }
 
   >* {
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     width: 100%;
     height: 100%;
   }
@@ -140,4 +142,3 @@
   // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
   box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
 }
-

core/scss/layout/_core.scss

@@ -1,9 +1,23 @@
+@use 'sass:map';
+
+html {
+  scrollbar-gutter: stable;
+
+  @supports not (scrollbar-gutter: stable) {
+    overflow-y: scroll;
+  }
+}
+
 // stylelint-disable property-no-vendor-prefix
 body {
   letter-spacing: $body-letter-spacing;
   touch-action: manipulation;
   text-rendering: optimizeLegibility;
-  font-feature-settings: "liga" 0, "cv03", "cv04", "cv11";
+  font-feature-settings:
+    'liga' 0,
+    'cv03',
+    'cv04',
+    'cv11';
   position: relative;
   min-height: 100%;
   height: 100%;
@@ -12,7 +26,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  @media print {
+  @include media-print {
     background: transparent;
   }
 }
@@ -24,8 +38,8 @@ body {
 //
 .layout-fluid {
   .container,
-  [class^="container-"],
+  [class^='container-'],
-  [class*=" container-"] {
+  [class*=' container-'] {
     max-width: 100%;
   }
 }
@@ -35,10 +49,10 @@ body {
 //
 .layout-boxed {
   --#{$prefix}theme-boxed-border-radius: 0;
-  --#{$prefix}theme-boxed-width: #{map-get($container-max-widths, xxl)};
+  --#{$prefix}theme-boxed-width: #{map.get($container-max-widths, xxl)};
 
   @include media-breakpoint-up(md) {
-    background: $dark linear-gradient(to right, rgba(#fff, .1), transparent) fixed;
+    background: $dark linear-gradient(to right, rgba(#fff, 0.1), transparent) fixed;
     padding: 1rem;
     --#{$prefix}theme-boxed-border-radius: #{$border-radius};
   }
@@ -55,8 +69,8 @@ body {
     }
 
     > .navbar:first-child {
-      border-top-left-radius: var(--#{$prefix}theme-boxed-border-radius);
+      border-start-start-radius: var(--#{$prefix}theme-boxed-border-radius);
-      border-top-right-radius: var(--#{$prefix}theme-boxed-border-radius);
+      border-start-end-radius: var(--#{$prefix}theme-boxed-border-radius);
     }
   }
 }

core/scss/layout/_dark.scss

@@ -1,10 +1,10 @@
-@use "sass:color";
+@use 'sass:color';
 
 // stylelint-disable declaration-no-important
 
 @if $enable-dark-mode {
   :root {
-    &:not(.theme-dark):not([data-bs-theme="dark"]) {
+    &:not(.theme-dark):not([data-bs-theme='dark']) {
       .hide-theme-light {
         display: none !important;
       }
@@ -15,7 +15,7 @@
     }
 
     &.theme-dark,
-    &[data-bs-theme="dark"] {
+    &[data-bs-theme='dark'] {
       .hide-theme-dark {
         display: none !important;
       }
@@ -26,7 +26,6 @@
     }
   }
 
-
   @include color-mode(dark, true) {
     color-scheme: dark;
     --#{$prefix}body-color: var(--#{$prefix}gray-200);
@@ -48,16 +47,12 @@
     --#{$prefix}link-hover-color: color-mix(in srgb, var(--#{$prefix}primary), black 20%);
 
     --#{$prefix}active-bg: #{$lighten-dark};
-    --#{$prefix}disabled-color: #{color-transparent(var(--#{$prefix}body-color), .4)};
+    --#{$prefix}disabled-color: #{color-transparent(var(--#{$prefix}body-color), 0.4)};
 
     --#{$prefix}border-color: var(--#{$prefix}gray-700);
-    --#{$prefix}border-color-translucent: var(
+    --#{$prefix}border-color-translucent: var(--#{$prefix}dark-mode-border-color-translucent);
-      --#{$prefix}dark-mode-border-color-translucent
-    );
     --#{$prefix}border-dark-color: var(--#{$prefix}dark-mode-border-dark-color);
-    --#{$prefix}border-active-color: var(
+    --#{$prefix}border-active-color: var(--#{$prefix}dark-mode-border-active-color);
-      --#{$prefix}dark-mode-border-active-color
-    );
 
     --#{$prefix}btn-color: #{$darken-dark};
 
@@ -68,7 +63,7 @@
     }
   }
 
-  body[data-bs-theme=dark] [data-bs-theme=light] {
+  body[data-bs-theme='dark'] [data-bs-theme='light'] {
-    @extend [data-bs-theme=dark];
+    @extend [data-bs-theme='dark'];
   }
 }

core/scss/layout/_footer.scss

@@ -4,6 +4,10 @@
   padding: $footer-padding-y 0;
   color: $footer-color;
   margin-top: auto;
+
+  @include media-print {
+    display: none;
+  }
 }
 
 .footer-transparent {

core/scss/layout/_navbar.scss

@@ -1,20 +1,22 @@
+@use 'sass:map';
+
 @mixin navbar-vertical-nav {
   .navbar-collapse {
     flex-direction: column;
 
-    [class^="container"] {
+    [class^='container'] {
       flex-direction: column;
       align-items: stretch;
       padding: 0;
     }
 
     .navbar-nav {
-      margin-left: 0;
+      margin-inline-start: 0;
-      margin-right: 0;
+      margin-inline-end: 0;
 
       .nav-link {
         padding: 0.5rem calc(#{$container-padding-x} / 2);
-        justify-content: flex-start;
+        justify-content: start;
       }
     }
 
@@ -36,7 +38,7 @@
         min-width: 0;
         display: flex;
         width: auto;
-        padding-left: add(calc(#{$container-padding-x} / 2), 1.75rem);
+        padding-inline-start: add(calc(#{$container-padding-x} / 2), 1.75rem);
         color: inherit;
 
         &.disabled {
@@ -52,22 +54,22 @@
       }
 
       .dropdown-menu .dropdown-item {
-        padding-left: add(calc(#{$container-padding-x} / 2), 3.25rem);
+        padding-inline-start: add(calc(#{$container-padding-x} / 2), 3.25rem);
       }
 
       .dropdown-menu .dropdown-menu .dropdown-item {
-        padding-left: add(calc(#{$container-padding-x} / 2), 4.75rem);
+        padding-inline-start: add(calc(#{$container-padding-x} / 2), 4.75rem);
       }
     }
 
     .dropdown-toggle:after {
-      margin-left: auto;
+      margin-inline-start: auto;
     }
 
     .nav-item.active:after {
       border-bottom-width: 0;
-      border-left-width: 3px;
+      border-inline-start-width: 3px;
-      right: auto;
+  inset-inline-end: auto;
       top: 0;
       bottom: 0;
     }
@@ -115,8 +117,8 @@ Navbar
 
       .badge {
         position: absolute;
-        top: 0.375rem;
+        top: 0.5rem;
-        right: 0.375rem;
+  inset-inline-end: 0.5rem;
         transform: translate(50%, -50%);
       }
     }
@@ -124,7 +126,7 @@ Navbar
 }
 
 .navbar-expand {
-  @each $breakpoint in map-keys($grid-breakpoints) {
+  @each $breakpoint in map.keys($grid-breakpoints) {
     $next: breakpoint-next($breakpoint, $grid-breakpoints);
     $infix: breakpoint-infix($next, $grid-breakpoints);
 
@@ -147,10 +149,10 @@ Navbar
           }
 
           &:after {
-            content: "";
+            content: '';
             position: absolute;
-            left: 0;
+  inset-inline-start: 0;
-            right: 0;
+  inset-inline-end: 0;
             bottom: -0.25rem;
             border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
             border-bottom-width: 2px;
@@ -169,7 +171,7 @@ Navbar
         &.navbar-vertical {
           ~ .navbar,
           ~ .page-wrapper {
-            margin-left: $sidebar-width;
+            margin-inline-start: $sidebar-width;
           }
         }
 
@@ -177,8 +179,8 @@ Navbar
         &.navbar-vertical.navbar-end {
           ~ .navbar,
           ~ .page-wrapper {
-            margin-left: 0;
+            margin-inline-start: 0;
-            margin-right: $sidebar-width;
+            margin-inline-end: $sidebar-width;
           }
         }
       }
@@ -222,23 +224,18 @@ Navbar toggler
   background: currentColor;
   border-radius: 10px;
   position: relative;
-  @include transition(
+  @include transition(top $navbar-toggler-animation-time $navbar-toggler-animation-time, bottom $navbar-toggler-animation-time $navbar-toggler-animation-time, transform $navbar-toggler-animation-time, opacity 0s $navbar-toggler-animation-time);
-    top $navbar-toggler-animation-time $navbar-toggler-animation-time,
-    bottom $navbar-toggler-animation-time $navbar-toggler-animation-time,
-    transform $navbar-toggler-animation-time,
-    opacity 0s $navbar-toggler-animation-time
-  );
 
   &:before,
   &:after {
-    content: "";
+    content: '';
     display: block;
     height: inherit;
     width: inherit;
     border-radius: inherit;
     background: inherit;
     position: absolute;
-    left: 0;
+  inset-inline-start: 0;
     @include transition(inherit);
   }
 
@@ -250,7 +247,7 @@ Navbar toggler
     bottom: -0.45em;
   }
 
-  .navbar-toggler[aria-expanded="true"] & {
+  .navbar-toggler[aria-expanded='true'] & {
     transform: rotate(45deg);
     @include transition(top $transition-time, bottom $transition-time, transform $transition-time $transition-time, opacity 0s $transition-time);
 
@@ -307,7 +304,7 @@ Navbar vertical
 @if $enable-navbar-vertical {
   .navbar-vertical {
     &.navbar-expand {
-      @each $breakpoint in map-keys($grid-breakpoints) {
+      @each $breakpoint in map.keys($grid-breakpoints) {
         $next: breakpoint-next($breakpoint, $grid-breakpoints);
         $infix: breakpoint-infix($next, $grid-breakpoints);
 
@@ -316,18 +313,18 @@ Navbar vertical
             width: $sidebar-width;
             position: fixed;
             top: 0;
-            left: 0;
+  inset-inline-start: 0;
             bottom: 0;
             z-index: $zindex-fixed;
-            align-items: flex-start;
+            align-items: start;
             overflow-y: scroll;
             padding: 0;
             @include transition(transform $transition-time);
 
             &.navbar-right,
             &.navbar-end {
-              left: auto;
+  inset-inline-start: auto;
-              right: 0;
+  inset-inline-end: 0;
             }
 
             .navbar-brand {
@@ -350,27 +347,27 @@ Navbar vertical
               }
             }
 
-            > [class^="container"] {
+            > [class^='container'] {
               flex-direction: column;
               align-items: stretch;
               min-height: 100%;
-              justify-content: flex-start;
+              justify-content: start;
               padding: 0;
             }
 
             ~ .page {
-              padding-left: $sidebar-width;
+              padding-inline-start: $sidebar-width;
 
-              [class^="container"] {
+              [class^='container'] {
-                padding-left: 1.5rem;
+                padding-inline-start: 1.5rem;
-                padding-right: 1.5rem;
+                padding-inline-end: 1.5rem;
               }
             }
 
             &.navbar-right ~ .page,
             &.navbar-end ~ .page {
-              padding-left: 0;
+              padding-inline-start: 0;
-              padding-right: $sidebar-width;
+              padding-inline-end: $sidebar-width;
             }
 
             @include navbar-vertical-nav;
@@ -383,12 +380,12 @@ Navbar vertical
 
 .navbar-overlap {
   &:after {
-    content: "";
+    content: '';
     height: $navbar-overlap-height;
     position: absolute;
     top: 100%;
-    left: 0;
+  inset-inline-start: 0;
-    right: 0;
+  inset-inline-end: 0;
     background: inherit;
     z-index: -1;
     box-shadow: inherit;

core/scss/layout/_page.scss

@@ -14,7 +14,7 @@
   display: flex;
   flex-direction: column;
 
-  @media print {
+  @include media-print {
     margin: 0 !important;
   }
 }
@@ -64,17 +64,16 @@
   position: relative;
 
   &:after {
-    content: "";
+    content: '';
     position: absolute;
     top: 0;
-    left: 0;
+  inset-inline-start: 0;
-    right: 0;
+  inset-inline-end: 0;
     bottom: 0;
     background-image: $overlay-gradient;
   }
 }
 
-
 .page-header {
   display: flex;
   flex-wrap: wrap;
@@ -111,7 +110,7 @@
   svg {
     width: 1.5rem;
     height: 1.5rem;
-    margin-right: .25rem;
+    margin-inline-end: 0.25rem;
   }
 }
 
@@ -121,7 +120,7 @@
 }
 
 .page-subtitle {
-  margin-top: .25rem;
+  margin-top: 0.25rem;
   color: var(--#{$prefix}secondary);
 }
 
@@ -140,8 +139,8 @@
 .page-cover-img {
   position: absolute;
   top: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
-  left: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
+  inset-inline-start: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
-  right: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
+  inset-inline-end: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
   bottom: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
   pointer-events: none;
   filter: blur(var(--#{$prefix}page-cover-blur));
@@ -155,7 +154,7 @@
 // Page tabs
 //
 .page-tabs {
-  margin-top: .5rem;
+  margin-top: 0.5rem;
   position: relative;
 }
 

core/scss/layout/_root.scss

@@ -2,16 +2,11 @@
 :host {
   font-size: 16px;
   height: 100%;
-
-  @include media-breakpoint-up(lg) {
-    margin-left: calc(100vw - 100%);
-    margin-right: 0;
-  }
 }
 
 :root,
 :host,
-[data-bs-theme="light"] {
+[data-bs-theme='light'] {
   color-scheme: light;
   --#{$prefix}spacer: var(--#{$prefix}spacer-2);
 

core/scss/marketing/_browser.scss

@@ -9,14 +9,14 @@
 }
 
 .browser-header {
-  padding: .25rem 1rem;
+  padding: 0.25rem 1rem;
-  background: var(--#{$prefix}border-color-light) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .03));
+  background: var(--#{$prefix}border-color-light) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03));
   border-bottom: 1px solid var(--#{$prefix}border-color);
   border-radius: calc(var(--#{$prefix}border-radius-lg) - 1px) calc(var(--#{$prefix}border-radius-lg) - 1px) 0 0;
 }
 
 .browser-dots {
-  margin-right: 3rem;
+  margin-inline-end: 3rem;
   display: flex;
 }
 
@@ -37,10 +37,10 @@
 }
 
 .browser-dot {
-  margin-right: .5rem;
+  margin-inline-end: 0.5rem;
-  width: .75rem;
+  width: 0.75rem;
-  min-width: .75rem;
+  min-width: 0.75rem;
-  height: .75rem;
+  height: 0.75rem;
   background: var(--#{$prefix}border-color);
   border-radius: 50%;
   border: 1px solid var(--#{$prefix}border-color-dark);
@@ -52,13 +52,15 @@
   align-items: center;
   justify-content: center;
   text-decoration: none;
-  padding: .25rem;
+  padding: 0.25rem;
   color: var(--#{$prefix}secondary);
   font-size: var(--#{$prefix}font-size-h5);
   border-radius: var(--#{$prefix}border-radius);
   line-height: 1;
   cursor: pointer;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.05),
+    0 1px 2px 0 rgba(0, 0, 0, 0.05);
   background-image: linear-gradient(to bottom, var(--#{$prefix}bg-surface), var(--#{$prefix}bg-surface-secondary));
 
   &:hover {