chore: update versions

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

.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
-
-      - name: Setup Node.js 18
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
+        uses: actions/checkout@v6
 
       - 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/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);
-	});
+  elements.forEach(function (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 = {};
-		try {
-			const dataOptions = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')) : {};
-			options = Object.assign({
-				'enableScrollSpy': true
-			}, dataOptions);
+  elements.forEach(function (element) {
+    let options = {}
+    try {
+      const dataOptions = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')) : {}
+      options = Object.assign(
+        {
+          enableScrollSpy: true,
+        },
+        dataOptions,
+      )
+    } catch (error) {}
 
-		} 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);
-			if (!countUp.error) {
-				countUp.start();
-			}
-		}
-	});
+    if (window.countUp && window.countUp.CountUp) {
+      const countUp = new window.countUp.CountUp(element, value, options)
+      if (!countUp.error) {
+        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);
-});
+  let options = {
+    boundary: dropdownTriggerEl.getAttribute('data-bs-boundary') === 'viewport' ? document.querySelector('.btn') : 'clippingParents',
+  }
+  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, {
-		mask: maskEl.dataset.mask,
-		lazy: maskEl.dataset['mask-visible'] === 'true'
-	})
-});
+  window.IMask &&
+    new window.IMask(maskEl, {
+      mask: maskEl.dataset.mask,
+      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,
-		placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto'
-	};
-	return new Popover(popoverTriggerEl, options);
-});
+  let options = {
+    delay: { show: 50, hide: 50 },
+    html: popoverTriggerEl.getAttribute('data-bs-html') === 'true',
+    placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto',
+  }
+  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();
+  switchTriggerEl.addEventListener('click', (e) => {
+    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 matchedTabs = tabsList.filter(tab => tab.hash === locationHash);
+    const tabsList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tab"]'))
+    const matchedTabs = tabsList.filter((tab) => tab.hash === locationHash)
 
-	 matchedTabs.map(tab => {
-		new Tab(tab).show();
-	 });
+    matchedTabs.map((tab) => {
+      new Tab(tab).show()
+    })
   }
 }
 

core/js/src/tabler.js

@@ -10,7 +10,7 @@ export const getColor = (color, opacity = 1) => {
   const c = getComputedStyle(document.body).getPropertyValue(`--${prefix}${color}`).trim()
 
   if (opacity !== 1) {
-	 return hexToRgba(c, opacity)
+    return hexToRgba(c, opacity)
   }
 
   return c

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;
-	}
+  if (!toastTriggerEl.hasAttribute('data-bs-target')) {
+    return
+  }
 
-	const toastEl = new Toast(toastTriggerEl.getAttribute('data-bs-target'));
+  const toastEl = new Toast(toastTriggerEl.getAttribute('data-bs-target'))
 
-	toastTriggerEl.addEventListener('click', () => {
-		toastEl.show()
-	});
-});
+  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,
-		placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto'
-	};
-	return new Tooltip(tooltipTriggerEl, options);
-});
+  let options = {
+    delay: { show: 50, hide: 50 },
+    html: tooltipTriggerEl.getAttribute('data-bs-html') === 'true',
+    placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto',
+  }
+  return new Tooltip(tooltipTriggerEl, options)
+})

core/js/tabler-theme.js

@@ -4,32 +4,32 @@
  * This will prevent any flashes of the light theme (default) before switching.
  */
 const themeConfig = {
-	"theme": "light",
-	"theme-base": "gray",
-	"theme-font": "sans-serif",
-	"theme-primary": "blue",
-	"theme-radius": "1",
+  'theme': 'light',
+  'theme-base': 'gray',
+  'theme-font': 'sans-serif',
+  'theme-primary': 'blue',
+  'theme-radius': '1',
 }
 
 const params = new Proxy(new URLSearchParams(window.location.search), {
-	get: (searchParams, prop) => searchParams.get(prop),
+  get: (searchParams, prop) => searchParams.get(prop),
 })
 
 for (const key in themeConfig) {
-	const param = params[key]
-	let selectedValue
+  const param = params[key]
+  let selectedValue
 
-	if (!!param) {
-		localStorage.setItem('tabler-' + key, param)
-		selectedValue = param
-	} else {
-		const storedTheme = localStorage.getItem('tabler-' + key)
-		selectedValue = storedTheme ? storedTheme : themeConfig[key]
-	}
+  if (!!param) {
+    localStorage.setItem('tabler-' + key, param)
+    selectedValue = param
+  } else {
+    const storedTheme = localStorage.getItem('tabler-' + key)
+    selectedValue = storedTheme ? storedTheme : themeConfig[key]
+  }
 
-	if (selectedValue !== themeConfig[key]) {
-		document.documentElement.setAttribute('data-bs-' + key, selectedValue)
-	} else {
-		document.documentElement.removeAttribute('data-bs-' + key)
-	}
+  if (selectedValue !== themeConfig[key]) {
+    document.documentElement.setAttribute('data-bs-' + key, selectedValue)
+  } else {
+    document.documentElement.removeAttribute('data-bs-' + key)
+  }
 }

core/js/tabler.js

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

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:write": "prettier --write src/**/*.{js,scss} --cache"
+    "format:check": "prettier --check \"scss/**/*.scss\" \"js/**/*.js\" --cache",
+    "format:write": "prettier --write \"scss/**/*.scss\" \"js/**/*.js\" --cache"
   },
   "repository": {
     "type": "git",
@@ -146,31 +151,35 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "bootstrap": "5.3.7"
+    "bootstrap": "5.3.8"
   },
   "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",
-    "fullcalendar": "^6.1.18",
+    "fslightbox": "^3.7.4",
+    "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",
-    "signature_pad": "^5.0.10",
+    "plyr": "^3.8.3",
+    "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/reboot";
-@import "bootstrap/scss/type";
-@import "bootstrap/scss/images";
-@import "bootstrap/scss/containers";
-@import "bootstrap/scss/grid";
-@import "bootstrap/scss/tables";
-@import "bootstrap/scss/forms";
-@import "bootstrap/scss/buttons";
-@import "bootstrap/scss/transitions";
-@import "bootstrap/scss/dropdown";
-@import "bootstrap/scss/button-group";
-@import "bootstrap/scss/nav";
-@import "bootstrap/scss/navbar";
-@import "bootstrap/scss/card";
-@import "bootstrap/scss/pagination";
-@import "bootstrap/scss/progress";
-@import "bootstrap/scss/list-group";
-@import "bootstrap/scss/toasts";
-@import "bootstrap/scss/modal";
-@import "bootstrap/scss/tooltip";
-@import "bootstrap/scss/popover";
-@import "bootstrap/scss/carousel";
-@import "bootstrap/scss/spinners";
-@import "bootstrap/scss/offcanvas";
-@import "bootstrap/scss/placeholders";
+@import 'bootstrap/scss/root';
+@import 'bootstrap/scss/reboot';
+@import 'bootstrap/scss/type';
+@import 'bootstrap/scss/images';
+@import 'bootstrap/scss/containers';
+@import 'bootstrap/scss/grid';
+@import 'bootstrap/scss/tables';
+@import 'bootstrap/scss/forms';
+@import 'bootstrap/scss/buttons';
+@import 'bootstrap/scss/transitions';
+@import 'bootstrap/scss/dropdown';
+@import 'bootstrap/scss/button-group';
+@import 'bootstrap/scss/nav';
+@import 'bootstrap/scss/navbar';
+@import 'bootstrap/scss/card';
+@import 'bootstrap/scss/pagination';
+@import 'bootstrap/scss/progress';
+@import 'bootstrap/scss/list-group';
+@import 'bootstrap/scss/toasts';
+@import 'bootstrap/scss/modal';
+@import 'bootstrap/scss/tooltip';
+@import 'bootstrap/scss/popover';
+@import 'bootstrap/scss/carousel';
+@import 'bootstrap/scss/spinners';
+@import 'bootstrap/scss/offcanvas';
+@import 'bootstrap/scss/placeholders';
 
 // Utilities
-@import "bootstrap/scss/utilities/api";
+@import 'bootstrap/scss/utilities/api';

core/scss/_bootstrap-config.scss

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

core/scss/_bootstrap-override.scss

@@ -1,24 +1,26 @@
-@mixin caret($direction: down) {
-  $selector: "after";
+@use 'sass:color';
 
-  @if $direction == "left" {
-    $selector: "before";
+@mixin caret($direction: down) {
+  $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);
-    margin-right: 0.1em;
+    border-inline-start: 1px var(--#{$prefix}border-style);
+    margin-inline-end: 0.1em;
 
-    @if $direction != "left" {
-      margin-left: $caret-spacing;
+    @if $direction != 'left' {
+      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,30 +45,11 @@
   // Override bootstrap core
 }
 
-@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
-) {
+@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) {
   // Override bootstrap core
 }
 
-@mixin button-outline-variant(
-  $color: null,
-  $color-hover: null,
-  $active-background: null,
-  $active-border: null,
-  $active-color: null
-) {
+@mixin button-outline-variant($color: null, $color-hover: null, $active-background: null, $active-border: null, $active-color: null) {
   // Override bootstrap core
 }
 
@@ -74,5 +57,5 @@
 // TODO: remove when https://github.com/twbs/bootstrap/pull/37425/ will be released
 //
 @function opaque($background, $foreground) {
-  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
+  @return color.mix(rgba($foreground, 1), $background, color.alpha($foreground) * 100%);
 }

core/scss/_config.scss

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

core/scss/_core.scss

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

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/functions";
+@import 'mixins/mixins';
+@import 'mixins/functions';

core/scss/_props.scss

@@ -1,4 +1,5 @@
-@import "config";
+@use 'sass:map';
+@import 'config';
 
 :root,
 :host {
@@ -30,7 +31,8 @@
   --#{$prefix}brand: #{$primary};
 
   /** Theme colors */
-  @each $name, $color in map-merge($theme-colors, $social-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,165 +1,158 @@
-$negative-spacers-extra: if(
-  $enable-negative-margins,
-  negativify-map(map-merge($spacers, $spacers-extra)),
-  null
-);
+@use 'sass:map';
+
+$negative-spacers-extra: if($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: (
@@ -168,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)
-    var(--#{$prefix}border-color-translucent),
-  wide: $border-width-wide var(--#{$prefix}border-style)
-    var(--#{$prefix}border-color-translucent),
+  null: var(--#{$prefix}border-width) 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((
-  "red": red,
-  "green": green,
-), rgba-css-var, "$key", "border") !default;
+$utilities-border-colors: map-loop(
+  (
+    'red': red,
+    '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(
-        '<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,
-    )
+      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,
+    ),
   ),
-  "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;
-    z-index: $stretched-link-z-index;
-    content: "";
+    inset-inline-start: 0;
+    z-index: 1;
+    content: '';
   }
 }
 
@@ -72,21 +74,21 @@
 .fixed-top {
   position: fixed;
   top: 0;
-  right: 0;
-  left: 0;
+  inset-inline-end: 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-top-right-radius: var(--#{$prefix}theme-boxed-border-radius);
+      border-start-start-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}dark-mode-border-color-translucent
-    );
+    --#{$prefix}border-color-translucent: var(--#{$prefix}dark-mode-border-color-translucent);
     --#{$prefix}border-dark-color: var(--#{$prefix}dark-mode-border-dark-color);
-    --#{$prefix}border-active-color: var(
-      --#{$prefix}dark-mode-border-active-color
-    );
+    --#{$prefix}border-active-color: var(--#{$prefix}dark-mode-border-active-color);
 
     --#{$prefix}btn-color: #{$darken-dark};
 
@@ -68,7 +63,7 @@
     }
   }
 
-  body[data-bs-theme=dark] [data-bs-theme=light] {
-    @extend [data-bs-theme=dark];
+  body[data-bs-theme='dark'] [data-bs-theme='light'] {
+    @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-right: 0;
+      margin-inline-start: 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;
-      right: auto;
+      border-inline-start-width: 3px;
+  inset-inline-end: auto;
       top: 0;
       bottom: 0;
     }
@@ -115,8 +117,8 @@ Navbar
 
       .badge {
         position: absolute;
-        top: 0.375rem;
-        right: 0.375rem;
+        top: 0.5rem;
+  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;
-            right: 0;
+  inset-inline-start: 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-right: $sidebar-width;
+            margin-inline-start: 0;
+            margin-inline-end: $sidebar-width;
           }
         }
       }
@@ -221,24 +223,19 @@ Navbar toggler
   width: 1.25em;
   background: currentColor;
   border-radius: 10px;
-  @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
-  );
   position: relative;
+  @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);
 
   &: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;
-            @include transition(transform $transition-time);
+            align-items: start;
             overflow-y: scroll;
             padding: 0;
+            @include transition(transform $transition-time);
 
             &.navbar-right,
             &.navbar-end {
-              left: auto;
-              right: 0;
+  inset-inline-start: auto;
+  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"] {
-                padding-left: 1.5rem;
-                padding-right: 1.5rem;
+              [class^='container'] {
+                padding-inline-start: 1.5rem;
+                padding-inline-end: 1.5rem;
               }
             }
 
             &.navbar-right ~ .page,
             &.navbar-end ~ .page {
-              padding-left: 0;
-              padding-right: $sidebar-width;
+              padding-inline-start: 0;
+              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;
-    right: 0;
+  inset-inline-start: 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;
-    right: 0;
+  inset-inline-start: 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));
-  right: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
+  inset-inline-start: 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;
-  background: var(--#{$prefix}border-color-light) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .03));
+  padding: 0.25rem 1rem;
+  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;
-  width: .75rem;
-  min-width: .75rem;
-  height: .75rem;
+  margin-inline-end: 0.5rem;
+  width: 0.75rem;
+  min-width: 0.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 {

core/scss/marketing/_pricing.scss

@@ -60,10 +60,10 @@ $pricing-card-width: 22rem;
 .pricing-label {
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   transform: translateY(-50%);
   vertical-align: bottom;
-  right: 0;
+  inset-inline-end: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -79,15 +79,15 @@ $pricing-card-width: 22rem;
   justify-content: center;
   font-size: 2.5rem;
   line-height: 1;
-  font-weight: $font-weight-black;
+  font-weight: $font-weight-semibold;
   margin: 0.75rem 0;
 }
 
 .pricing-price-currency {
   font-size: $h2-font-size;
   line-height: 1.5;
-  margin-right: 0.25rem;
-  font-weight: $font-weight-bold;
+  margin-inline-end: 0.25rem;
+  font-weight: $font-weight-semibold;
 }
 
 .pricing-price-description {
@@ -96,14 +96,14 @@ $pricing-card-width: 22rem;
   font-weight: $font-weight-normal;
   color: $text-secondary;
   align-self: center;
-  margin-left: 0.5rem;
+  margin-inline-start: 0.5rem;
 }
 
 .pricing-features {
   margin: 1rem 0 0;
   padding: 0;
   list-style: none;
-  text-align: left;
+  text-align: start;
 
   > li:not(:first-child) {
     margin-top: 0.25rem;

core/scss/marketing/_sections.scss

@@ -72,7 +72,7 @@
 
 .section-title {
   font-size: var(--#{$prefix}font-size-h1);
-  font-weight: var(--#{$prefix}font-weight-bold);
+  font-weight: var(--#{$prefix}font-weight-semibold);
   line-height: 1.2;
 }
 
@@ -108,13 +108,13 @@
 
   .wave-2 {
     animation: move-forever2 24s linear infinite;
-    opacity: .5;
+    opacity: 0.5;
     animation-delay: -2s;
   }
 
   .wave-3 {
     animation: move-forever3 18s linear infinite;
-    opacity: .3;
+    opacity: 0.3;
     animation-delay: -2s;
   }
 }

core/scss/marketing/_shape.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 .shape {
   --#{$prefix}shape-size: #{$avatar-size};
   --#{$prefix}shape-icon-size: #{$avatar-icon-size};
@@ -18,8 +20,8 @@
 
 @each $avatar-size, $size in $avatar-sizes {
   .shape-#{$avatar-size} {
-    --#{$prefix}shape-size: #{map-get($size, size)};
-    --#{$prefix}shape-icon-size: #{map-get($size, icon-size)};
+    --#{$prefix}shape-size: #{map.get($size, size)};
+    --#{$prefix}shape-icon-size: #{map.get($size, icon-size)};
   }
 }
 

core/scss/mixins/_functions.scss

@@ -1,5 +1,12 @@
+@use 'sass:math';
+@use 'sass:string';
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:color';
+@use 'sass:meta';
+
 @function theme-color-lighter($color, $background: #fff) {
-  @return mix($color, $background, 10%);
+  @return color.mix($color, $background, 10%);
 }
 
 @function theme-color-darker($color) {
@@ -9,11 +16,11 @@
 //
 // Replace all occurrences of a substring within a string.
 //
-@function str-replace($string, $search, $replace: "") {
-  $index: str-index($string, $search);
+@function str-replace($string, $search, $replace: '') {
+  $index: string.index($string, $search);
 
   @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
   }
 
   @return $string;
@@ -37,23 +44,23 @@
   }
 }
 
-@function breakpoint-prev($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+@function breakpoint-prev($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
   $n: index($breakpoint-names, $name);
   @if not $n {
     @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
   }
-  @return if($n > 1, nth($breakpoint-names, $n - 1), null);
+  @return if($n > 1, list.nth($breakpoint-names, $n - 1), null);
 }
 
 //
 // Escape SVG strings.
 //
 @function escape-svg($string) {
-  @if str-index($string, "data:image/svg+xml") {
+  @if string.index($string, 'data:image/svg+xml') {
     @each $char, $encoded in $escaped-characters {
       // Do not escape the url brackets
-      @if str-index($string, "url(") == 1 {
-        $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
+      @if string.index($string, 'url(') == 1 {
+        $string: url('#{str-replace(string.slice($string, 6, -3), $char, $encoded)}');
       } @else {
         $string: str-replace($string, $char, $encoded);
       }
@@ -70,7 +77,7 @@
  * @return {String} - The percentage representation of the value.
  */
 @function to-percentage($value) {
-  @return if(unitless($value), percentage($value), $value);
+  @return if(math.is-unitless($value), math.percentage($value), $value);
 }
 
 /**
@@ -94,3 +101,325 @@
 
   @return url('data:image/svg+xml;charset=UTF-8,#{$svg}');
 }
+
+// Bootstrap functions
+//
+// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
+
+// Ascending
+// Used to evaluate Sass maps like our grid breakpoints.
+@mixin _assert-ascending($map, $map-name) {
+  $prev-key: null;
+  $prev-num: null;
+  @each $key, $num in $map {
+    @if $prev-num == null or math.unit($num) == '%' or math.unit($prev-num) == '%' {
+      // Do nothing
+    } @else if not math.compatible($prev-num, $num) {
+      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    } @else if $prev-num >= $num {
+      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    }
+    $prev-key: $key;
+    $prev-num: $num;
+  }
+}
+
+// Starts at zero
+// Used to ensure the min-width of the lowest breakpoint starts at 0.
+@mixin _assert-starts-at-zero($map, $map-name: '$grid-breakpoints') {
+  @if list.length($map) > 0 {
+    $values: map.values($map);
+    $first-value: list.nth($values, 1);
+    @if $first-value != 0 {
+      @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
+    }
+  }
+}
+
+// Colors
+@function to-rgb($value) {
+  @return color.channel($value, 'red', $space: rgb), color.channel($value, 'green', $space: rgb), color.channel($value, 'blue', $space: rgb);
+}
+
+// stylelint-disable scss/dollar-variable-pattern
+@function rgba-css-var($identifier, $target) {
+  @if $identifier == 'body' and $target == 'bg' {
+    @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
+  }
+  @if $identifier == 'body' and $target == 'text' {
+    @return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
+  } @else {
+    @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
+  }
+}
+
+@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;
+}
+// stylelint-enable scss/dollar-variable-pattern
+
+@function varify($list) {
+  $result: null;
+  @each $entry in $list {
+    $result: list.append($result, var(--#{$prefix}#{$entry}), space);
+  }
+  @return $result;
+}
+
+// Internal Bootstrap function to turn maps into its negative variant.
+// It prefixes the keys with `n` and makes the value negative.
+@function negativify-map($map) {
+  $result: ();
+  @each $key, $value in $map {
+    @if $key != 0 {
+      $result: map.merge($result, ('n' + $key: (-$value)));
+    }
+  }
+  @return $result;
+}
+
+// Get multiple keys from a sass map
+@function map-get-multiple($map, $values) {
+  $result: ();
+  @each $key, $value in $map {
+    @if (index($values, $key) != null) {
+      $result: map.merge(
+        $result,
+        (
+          $key: $value,
+        )
+      );
+    }
+  }
+  @return $result;
+}
+
+// Merge multiple maps
+@function map-merge-multiple($maps...) {
+  $merged-maps: ();
+
+  @each $map in $maps {
+    $merged-maps: map.merge($merged-maps, $map);
+  }
+  @return $merged-maps;
+}
+
+// Replace `$search` with `$replace` in `$string`
+// Used on our SVG icon backgrounds for custom forms.
+//
+// @author Kitty Giraudel
+// @param {String} $string - Initial string
+// @param {String} $search - Substring to replace
+// @param {String} $replace ('') - New value
+// @return {String} - Updated string
+@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;
+}
+
+// See https://codepen.io/kevinweber/pen/dXWoRw
+//
+// Requires the use of quotes around data URIs.
+
+@function escape-svg($string) {
+  @if string.index($string, 'data:image/svg+xml') {
+    @each $char, $encoded in $escaped-characters {
+      // Do not escape the url brackets
+      @if string.index($string, 'url(') == 1 {
+        $string: url('#{str-replace(string.slice($string, 6, -3), $char, $encoded)}');
+      } @else {
+        $string: str-replace($string, $char, $encoded);
+      }
+    }
+  }
+
+  @return $string;
+}
+
+// Color contrast
+// See https://github.com/twbs/bootstrap/pull/30168
+
+// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
+// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
+$_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0.0027 0.003 0.0033 0.0037 0.004 0.0044 0.0048 0.0052 0.0056 0.006 0.0065 0.007 0.0075 0.008 0.0086 0.0091 0.0097 0.0103 0.011 0.0116 0.0123 0.013 0.0137 0.0144 0.0152 0.016 0.0168 0.0176 0.0185 0.0194 0.0203 0.0212 0.0222 0.0232 0.0242
+  0.0252 0.0262 0.0273 0.0284 0.0296 0.0307 0.0319 0.0331 0.0343 0.0356 0.0369 0.0382 0.0395 0.0409 0.0423 0.0437 0.0452 0.0467 0.0482 0.0497 0.0513 0.0529 0.0545 0.0561 0.0578 0.0595 0.0612 0.063 0.0648 0.0666 0.0685 0.0704 0.0723 0.0742 0.0762 0.0782 0.0802 0.0823 0.0844 0.0865 0.0887 0.0908 0.0931 0.0953 0.0976
+  0.0999 0.1022 0.1046 0.107 0.1095 0.1119 0.1144 0.117 0.1195 0.1221 0.1248 0.1274 0.1301 0.1329 0.1356 0.1384 0.1413 0.1441 0.147 0.15 0.1529 0.1559 0.159 0.162 0.1651 0.1683 0.1714 0.1746 0.1779 0.1812 0.1845 0.1878 0.1912 0.1946 0.1981 0.2016 0.2051 0.2086 0.2122 0.2159 0.2195 0.2232 0.227 0.2307 0.2346 0.2384
+  0.2423 0.2462 0.2502 0.2542 0.2582 0.2623 0.2664 0.2705 0.2747 0.2789 0.2831 0.2874 0.2918 0.2961 0.3005 0.305 0.3095 0.314 0.3185 0.3231 0.3278 0.3325 0.3372 0.3419 0.3467 0.3515 0.3564 0.3613 0.3663 0.3712 0.3763 0.3813 0.3864 0.3916 0.3968 0.402 0.4072 0.4125 0.4179 0.4233 0.4287 0.4342 0.4397 0.4452 0.4508 0.4564
+  0.4621 0.4678 0.4735 0.4793 0.4851 0.491 0.4969 0.5029 0.5089 0.5149 0.521 0.5271 0.5333 0.5395 0.5457 0.552 0.5583 0.5647 0.5711 0.5776 0.5841 0.5906 0.5972 0.6038 0.6105 0.6172 0.624 0.6308 0.6376 0.6445 0.6514 0.6584 0.6654 0.6724 0.6795 0.6867 0.6939 0.7011 0.7084 0.7157 0.7231 0.7305 0.7379 0.7454 0.7529 0.7605
+  0.7682 0.7758 0.7835 0.7913 0.7991 0.807 0.8148 0.8228 0.8308 0.8388 0.8469 0.855 0.8632 0.8714 0.8796 0.8879 0.8963 0.9047 0.9131 0.9216 0.9301 0.9387 0.9473 0.956 0.9647 0.9734 0.9823 0.9911 1;
+
+@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
+  $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
+  $max-ratio: 0;
+  $max-ratio-color: null;
+
+  @each $color in $foregrounds {
+    $contrast-ratio: contrast-ratio($background, $color);
+    @if $contrast-ratio >= $min-contrast-ratio {
+      @return $color;
+    } @else if $contrast-ratio > $max-ratio {
+      $max-ratio: $contrast-ratio;
+      $max-ratio-color: $color;
+    }
+  }
+
+  @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
+
+  @return $max-ratio-color;
+}
+
+@function contrast-ratio($background, $foreground: $color-contrast-light) {
+  $l1: luminance($background);
+  $l2: luminance(opaque($background, $foreground));
+
+  @return if($l1 > $l2, divide($l1 + 0.05, $l2 + 0.05), divide($l2 + 0.05, $l1 + 0.05));
+}
+
+// Return WCAG2.2 relative luminance
+// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
+// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
+@function luminance($color) {
+  $rgb: (
+    'r': math.round(color.channel($color, 'red', $space: rgb)),
+    'g': math.round(color.channel($color, 'green', $space: rgb)),
+    'b': math.round(color.channel($color, 'blue', $space: rgb)),
+  );
+
+  @each $name, $value in $rgb {
+    $value: if(divide($value, 255) < 0.04045, divide(divide($value, 255), 12.92), list.nth($_luminance-list, $value + 1));
+    $rgb: map.merge(
+      $rgb,
+      (
+        $name: $value,
+      )
+    );
+  }
+
+  @return (map.get($rgb, 'r') * 0.2126) + (map.get($rgb, 'g') * 0.7152) + (map.get($rgb, 'b') * 0.0722);
+}
+
+// Return opaque color
+// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
+@function opaque($background, $foreground) {
+  @return color.mix(rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
+}
+
+// Tint a color: mix a color with white
+@function tint-color($color, $weight) {
+  @return color.mix(white, $color, $weight);
+}
+
+// Shade a color: mix a color with black
+@function shade-color($color, $weight) {
+  @return color.mix(black, $color, $weight);
+}
+
+// Shade the color if the weight is positive, else tint it
+@function shift-color($color, $weight) {
+  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
+}
+
+// Return valid calc
+@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);
+}
+
+@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 + string.unquote(' - ') + $value2);
+}
+
+@function divide($dividend, $divisor, $precision: 10) {
+  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+  $dividend: math.abs($dividend);
+  $divisor: math.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;
+}

core/scss/mixins/_mixins.scss

@@ -2,7 +2,7 @@
   font-size: $h5-font-size;
   font-weight: var(--#{$prefix}font-weight-medium);
   text-transform: uppercase;
-  letter-spacing: .04em;   
+  letter-spacing: 0.04em;
 
   @if $include-line-height {
     line-height: $h5-line-height;
@@ -15,7 +15,7 @@
 
 @mixin scrollbar {
   #{if(&, "&", "*")} {
-    scrollbar-color: color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), .20) transparent;
+    scrollbar-color: color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), 0.2) transparent;
   }
 
   #{if(&, "&", "*")}::-webkit-scrollbar {
@@ -27,7 +27,7 @@
   #{if(&, "&", "*")}::-webkit-scrollbar-thumb {
     border-radius: 1rem;
     border: 5px solid transparent;
-    box-shadow: inset 0 0 0 1rem color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), .20);
+    box-shadow: inset 0 0 0 1rem color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), 0.2);
   }
 
   #{if(&, "&", "*")}::-webkit-scrollbar-track {
@@ -35,7 +35,7 @@
   }
 
   #{if(&, "&", "*")}:hover::-webkit-scrollbar-thumb {
-    box-shadow: inset 0 0 0 1rem color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), .40);
+    box-shadow: inset 0 0 0 1rem color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), 0.4);
   }
 
   #{if(&, "&", "*")}::-webkit-scrollbar-corner {
@@ -43,7 +43,6 @@
   }
 }
 
-
 @mixin autodark-image {
   filter: brightness(0) invert(1);
 }
@@ -51,7 +50,7 @@
 //
 // Elements list
 //
-@mixin elements-list($gap: .5rem) {
+@mixin elements-list($gap: 0.5rem) {
   --#{$prefix}list-gap: #{$gap};
   display: flex;
   flex-wrap: wrap;
@@ -62,7 +61,16 @@
   outline: 0;
   box-shadow: 0 0 $focus-ring-blur $focus-ring-width rgba(var(--#{$prefix}primary-rgb), 0.25);
 
-  @if($show-border) {
+  @if ($show-border) {
     border-color: rgba(var(--#{$prefix}primary-rgb), 0.25);
   }
 }
+
+//
+// Print styles
+//
+@mixin media-print {
+  @media print {
+    @content;
+  }
+}

core/scss/tabler-flags.scss

@@ -1,2 +1 @@
-@import "config";
-@import "ui/flags";
+@import 'ui/flags';

core/scss/tabler-marketing.scss

@@ -1,13 +1,13 @@
-@import "config";
-@import "variables";
-@import "utilities-marketing";
+@import 'config';
+@import 'variables';
+@import 'utilities-marketing';
 
-@import "marketing/core";
-@import "marketing/hero";
-@import "marketing/browser";
-@import "marketing/sections";
-@import "marketing/filters";
-@import "marketing/pricing";
-@import "marketing/shape";
+@import 'marketing/core';
+@import 'marketing/hero';
+@import 'marketing/browser';
+@import 'marketing/sections';
+@import 'marketing/filters';
+@import 'marketing/pricing';
+@import 'marketing/shape';
 
-@import "bootstrap/scss/utilities/api";
+@import 'bootstrap/scss/utilities/api';