feat: enhance sidebar and layout options in theme settings

.changeset/btn-icon-square.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Fixed `.btn-icon` to be square by aligning `min-width` calculation with base `.btn` formula.

.changeset/change-password-modal.md

@@ -1,6 +0,0 @@
----
-"@tabler/preview": minor
----
-
-Added Change Password modal with current password, new password with strength indicator, confirm password validation, and show/hide password toggles.
-

.changeset/confirm-delete-modal.md

@@ -1,6 +0,0 @@
----
-"@tabler/preview": minor
----
-
-Added Confirm Delete modal with warning icon, confirmation checkbox, and JavaScript validation to enable delete button only when confirmed.
-

.changeset/crypto-dashboard.md

@@ -1,6 +0,0 @@
----
-"@tabler/preview": minor
----
-
-Added new Crypto Dashboard page with cryptocurrency portfolio overview, market data, and order history.
-

.changeset/crypto-data-files.md

@@ -1,6 +0,0 @@
----
-"@tabler/preview": patch
----
-
-Added crypto markets and orders data files (`crypto-markets.json`, `crypto-orders.json`) for cryptocurrency dashboard functionality.
-

.changeset/edit-profile-modal.md

@@ -1,6 +0,0 @@
----
-"@tabler/preview": minor
----
-
-Added Edit Profile modal with avatar upload, personal information fields, social links, and date of birth.
-

.changeset/eleven-trainers-sip.md

@@ -1,5 +0,0 @@
----
-"@tabler/preview": patch
----
-
-Update Tabler Icons to v3.35.0

.changeset/fix-input-icon-z-index.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Fixed `.input-icon-addon` z-index issue with form validation feedback and added default height.

.changeset/flags-avatars-updates.md

@@ -1,6 +0,0 @@
----
-"@tabler/core": patch
----
-
-Updated flags and avatars styling for better visual consistency.
-

.changeset/funny-kings-double.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Update SCSS to use logical properties

.changeset/language-selector.md

@@ -1,6 +0,0 @@
----
-"@tabler/core": minor
-"@tabler/preview": minor
----
-
-Added language selector dropdown to navbar with flag indicators for multilingual support.

.changeset/media-print-mixin.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Added `media-print` mixin and print styles to hide interactive components during printing.

.changeset/menu-structure-refactor.md

@@ -1,6 +0,0 @@
----
-"@tabler/preview": minor
----
-
-Refactored page-menu structure for dashboards and updated navigation menu organization.
-

.changeset/navbar-side-refactor.md

@@ -1,7 +0,0 @@
----
-"@tabler/core": minor
-"@tabler/preview": minor
----
-
-Refactored navbar-side component by consolidating separate include files (apps, language, notifications, theme, user) into a single `navbar-side.html` file for better maintainability.
-

.changeset/new-task-modal.md

@@ -1,6 +0,0 @@
----
-"@tabler/preview": minor
----
-
-Added New Task modal with fields for task name, description, assigned user, priority, due date, and category tags.
-

.changeset/tasks-list-page.md

@@ -1,6 +0,0 @@
----
-"@tabler/preview": minor
----
-
-Added new Task List page with tables showing tasks organized by status (Upcoming, In Progress, Completed) and modal dialog for adding new tasks.
-

.changeset/young-needles-love.md

@@ -1,5 +0,0 @@
----
-"@tabler/preview": patch
----
-
-Added comprehensive All Elements page with all UI components and Bootstrap elements

.github/workflows/argos.yml

@@ -40,7 +40,7 @@ jobs:
         uses: pnpm/action-setup@v4
 
       - name: Set up Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
           node-version: "${{ env.NODE }}"
           cache: 'pnpm'

.github/workflows/bundlewatch.yml

@@ -31,7 +31,7 @@ jobs:
         uses: pnpm/action-setup@v4
 
       - name: Set up Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
           node-version: "${{ env.NODE }}"
           cache: 'pnpm'

.github/workflows/lockfiles.yaml

@@ -14,7 +14,7 @@ jobs:
       - name: Clone Tabler
         uses: actions/checkout@v5
       - name: Prevent lock file change
-        uses: xalvarez/prevent-file-change-action@v3
+        uses: xalvarez/prevent-file-change-action@v2
         with:
           githubToken: ${{ secrets.GITHUB_TOKEN }}
           pattern: Gemfile.lock|pnpm-lock.json|pnpm-lock.yaml

.github/workflows/release.yml

@@ -27,7 +27,7 @@ jobs:
         uses: pnpm/action-setup@v4
 
       - name: Setup Node.js 18
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
           node-version: "${{ env.NODE }}"
           cache: 'pnpm'

.github/workflows/test.yml

@@ -28,7 +28,7 @@ jobs:
         uses: pnpm/action-setup@v4
 
       - name: Set up Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
           node-version: "${{ env.NODE }}"
           cache: 'pnpm'

.prettierrc

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

core/.build/compare-variables.mjs

@@ -1,82 +0,0 @@
-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/copy-fonts.mjs

@@ -1,55 +0,0 @@
-#!/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/js/src/autosize.js

@@ -1,8 +1,7 @@
 // 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) {
+	elements.forEach(function (element) {
-    window.autosize && window.autosize(element)
+		window.autosize && window.autosize(element);
-  })
+	});
 }

core/js/src/bootstrap.js

@@ -1,3 +1,3 @@
-export * as Popper from '@popperjs/core'
+export * as Popper from '@popperjs/core';
 
-export { Dropdown, Tooltip, Popover, Tab, Toast } from 'bootstrap'
+export { Dropdown, Tooltip, Popover, Tab, Toast } from 'bootstrap';

core/js/src/countup.js

@@ -1,25 +1,23 @@
-const elements = document.querySelectorAll('[data-countup]')
+const elements = document.querySelectorAll('[data-countup]');
 
 if (elements.length) {
-  elements.forEach(function (element) {
+	elements.forEach(function (element) {
-    let options = {}
+		let options = {};
-    try {
+		try {
-      const dataOptions = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')) : {}
+			const dataOptions = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')) : {};
-      options = Object.assign(
+			options = Object.assign({
-        {
+				'enableScrollSpy': true
-          enableScrollSpy: true,
+			}, dataOptions);
-        },
-        dataOptions,
-      )
-    } catch (error) {}
 			
-    const value = parseInt(element.innerHTML, 10)
+		} catch (error) {}
 
-    if (window.countUp && window.countUp.CountUp) {
+		const value = parseInt(element.innerHTML, 10);
-      const countUp = new window.countUp.CountUp(element, value, options)
+
-      if (!countUp.error) {
+		if (window.countUp && window.countUp.CountUp) {
-        countUp.start()
+			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 = {
+	let options = {
-    boundary: dropdownTriggerEl.getAttribute('data-bs-boundary') === 'viewport' ? document.querySelector('.btn') : 'clippingParents',
+		boundary: dropdownTriggerEl.getAttribute('data-bs-boundary') === 'viewport' ? document.querySelector('.btn') : 'clippingParents',
-  }
+	}
-  return new Dropdown(dropdownTriggerEl, options)
+	return new Dropdown(dropdownTriggerEl, options);
-})
+});

core/js/src/input-mask.js

@@ -1,10 +1,9 @@
 // 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 &&
+	window.IMask && new window.IMask(maskEl, {
-    new window.IMask(maskEl, {
+		mask: maskEl.dataset.mask,
-      mask: maskEl.dataset.mask,
+		lazy: maskEl.dataset['mask-visible'] === 'true'
-      lazy: maskEl.dataset['mask-visible'] === 'true',
+	})
-    })
+});
-})

core/js/src/popover.js

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

core/js/src/sortable.js

@@ -2,22 +2,24 @@
 // 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]')
+const sortableElements = document.querySelectorAll('[data-sortable]');
 
 if (sortableElements.length) {
   sortableElements.forEach(function (element) {
-    let options = {}
+    let options = {};
 
     try {
-      const rawOptions = element.getAttribute('data-sortable')
+      const rawOptions = element.getAttribute('data-sortable');
-      options = rawOptions ? JSON.parse(rawOptions) : {}
+      options = rawOptions ? JSON.parse(rawOptions) : {};
     } catch (e) {
       // ignore invalid JSON
     }
 
     if (window.Sortable) {
       // eslint-disable-next-line no-new
-      new window.Sortable(element, options)
+      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) => {
+	switchTriggerEl.addEventListener('click', (e) => {
-    e.stopPropagation()
+		e.stopPropagation();
 
-    switchTriggerEl.classList.toggle('active')
+		switchTriggerEl.classList.toggle('active');
-  })
+	});
-})
+});

core/js/src/tab.js

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

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

core/js/tabler-theme.js

@@ -4,32 +4,35 @@
  * This will prevent any flashes of the light theme (default) before switching.
  */
 const themeConfig = {
-  'theme': 'light',
+	"theme": "light",
-  'theme-base': 'gray',
+	"theme-base": "gray",
-  'theme-font': 'sans-serif',
+	"theme-font": "sans-serif",
-  'theme-primary': 'blue',
+	"theme-primary": "blue",
-  'theme-radius': '1',
+	"theme-radius": "1",
+	"sidebar-position": "left",
+	"sidebar-behavior": "sticky",
+	"layout": "container",
 }
 
 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]
+	const param = params[key]
-  let selectedValue
+	let selectedValue
 
-  if (!!param) {
+	if (!!param) {
-    localStorage.setItem('tabler-' + key, param)
+		localStorage.setItem('tabler-' + key, param)
-    selectedValue = param
+		selectedValue = param
-  } else {
+	} else {
-    const storedTheme = localStorage.getItem('tabler-' + key)
+		const storedTheme = localStorage.getItem('tabler-' + key)
-    selectedValue = storedTheme ? storedTheme : themeConfig[key]
+		selectedValue = storedTheme ? storedTheme : themeConfig[key]
-  }
+	}
 
-  if (selectedValue !== themeConfig[key]) {
+	if (selectedValue !== themeConfig[key]) {
-    document.documentElement.setAttribute('data-bs-' + key, selectedValue)
+		document.documentElement.setAttribute('data-bs-' + key, selectedValue)
-  } else {
+	} else {
-    document.documentElement.removeAttribute('data-bs-' + key)
+		document.documentElement.removeAttribute('data-bs-' + key)
-  }
+	}
 }

core/js/tabler.js

@@ -1,15 +1,28 @@
-import './src/autosize'
+import "./src/autosize"
-import './src/countup'
+import "./src/countup"
-import './src/input-mask'
+import "./src/input-mask"
-import './src/dropdown'
+import "./src/dropdown"
-import './src/tooltip'
+import "./src/tooltip"
-import './src/popover'
+import "./src/popover"
-import './src/switch-icon'
+import "./src/switch-icon"
-import './src/tab'
+import "./src/tab"
-import './src/toast'
+import "./src/toast"
-import './src/sortable'
+import "./src/sortable"
 
-export * as bootstrap from 'bootstrap'
+export * as bootstrap from "bootstrap"
-export * as tabler from './src/tabler'
+export * as tabler from "./src/tabler"
 
-export { Alert, Modal, Toast, Tooltip, Tab, Button, Carousel, Collapse, Dropdown, Popover, ScrollSpy, Offcanvas } from 'bootstrap'
+export {
+	Alert,
+	Modal,
+	Toast,
+	Tooltip,
+	Tab,
+	Button,
+	Carousel,
+	Collapse,
+	Dropdown,
+	Popover,
+	ScrollSpy,
+	Offcanvas
+} from 'bootstrap'

core/package.json

@@ -15,8 +15,6 @@
     "css-minify": "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-theme-esm": "rollup --environment THEME:true --environment ESM:true --config .build/rollup.config.mjs --sourcemap",
@@ -28,18 +26,16 @@
     "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 && pnpm run copy-fonts",
+    "copy": "pnpm run copy-img && pnpm run copy-libs",
     "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 \"scss/**/*.scss\" \"js/**/*.js\" --cache",
+    "format:check": "prettier --check src/**/*.{js,scss} --cache",
-    "format:write": "prettier --write \"scss/**/*.scss\" \"js/**/*.js\" --cache"
+    "format:write": "prettier --write src/**/*.{js,scss} --cache"
   },
   "repository": {
     "type": "git",
@@ -150,11 +146,10 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "bootstrap": "5.3.8",
+    "bootstrap": "5.3.8"
-    "geist": "^1.5.1"
   },
   "devDependencies": {
-    "@hotwired/turbo": "^8.0.18",
+    "@hotwired/turbo": "^8.0.13",
     "@melloware/coloris": "^0.25.0",
     "apexcharts": "3.54.1",
     "autosize": "^6.0.1",
@@ -162,7 +157,6 @@
     "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.7.4",
     "fullcalendar": "^6.1.19",

core/scss/_bootstrap-components.scss

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

core/scss/_bootstrap-config.scss

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

core/scss/_bootstrap-override.scss

@@ -1,26 +1,26 @@
-@use 'sass:color';
+@use "sass:color";
 
 @mixin caret($direction: down) {
-  $selector: 'after';
+  $selector: "after";
 
-  @if $direction == 'left' {
+  @if $direction == "left" {
-    $selector: 'before';
+    $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-inline-start: 1px var(--#{$prefix}border-style);
+    border-left: 1px var(--#{$prefix}border-style);
-    margin-inline-end: 0.1em;
+    margin-right: 0.1em;
 
-    @if $direction != 'left' {
+    @if $direction != "left" {
-      margin-inline-start: $caret-spacing;
+      margin-left: $caret-spacing;
     } @else {
-      margin-inline-end: $caret-spacing;
+      margin-right: $caret-spacing;
     }
 
     @if $direction == down {
@@ -34,7 +34,7 @@
     }
   }
 
-  @if $direction == 'left' {
+  @if $direction == "left" {
     &:after {
       content: none;
     }
@@ -45,11 +45,30 @@
   // 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
 }
 

core/scss/_config.scss

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

core/scss/_core.scss

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

core/scss/_debug.scss

@@ -0,0 +1,49 @@
+$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

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

core/scss/_mixins.scss

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

core/scss/_props.scss

@@ -1,5 +1,5 @@
-@use 'sass:map';
+@use "sass:map";
-@import 'config';
+@import "config";
 
 :root,
 :host {

core/scss/_utilities-marketing.scss

@@ -1,158 +1,167 @@
-@use 'sass:map';
+@use "sass:map";
 
-$negative-spacers-extra: if($enable-negative-margins, negativify-map(map.merge($spacers, $spacers-extra)), null);
+$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-inline-end margin-inline-start,
+    property: margin-right margin-left,
     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-inline-end,
+    property: margin-right,
     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-inline-start,
+    property: margin-left,
     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-inline-end margin-inline-start,
+    property: margin-right margin-left,
     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-inline-end,
+    property: margin-right,
     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-inline-start,
+    property: margin-left,
     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-inline-end padding-inline-start,
+    property: padding-right padding-left,
     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-inline-end,
+    property: padding-right,
     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-inline-start,
+    property: padding-left,
     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: (
@@ -161,38 +170,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,127 +1,19 @@
-@use 'sass:map';
-
 $border-values: (
-  null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent),
+  null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
-  wide: $border-width-wide var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent),
+    var(--#{$prefix}border-color-translucent),
+  wide: $border-width-wide var(--#{$prefix}border-style)
+    var(--#{$prefix}border-color-translucent),
   0: 0,
 );
 
-$utilities-border-colors: map-loop(
+$utilities-border-colors: map-loop((
-  (
+  "red": red,
-    'red': red,
+  "green": green,
-    'green': green,
+), rgba-css-var, "$key", "border") !default;
-  ),
-  rgba-css-var,
-  '$key',
-  'border'
-) !default;
 
 //Utilities
 $utilities: (
-  'align': (
+  "object": (
-    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: (
@@ -132,7 +24,7 @@ $utilities: (
       none: none,
     ),
   ),
-  'cursor': (
+  "cursor": (
     property: cursor,
     class: cursor,
     values: (
@@ -154,429 +46,78 @@ $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-inline-end,
+    property: border-right,
     values: $border-values,
   ),
-  'border-bottom': (
+  "border-bottom": (
     property: border-bottom,
     values: $border-values,
   ),
-  'border-start': (
+  "border-start": (
     class: border-start,
-    property: border-inline-start,
+    property: border-left,
     values: $border-values,
   ),
-  'border-x': (
+  "border-x": (
     class: border-x,
-    property: border-inline-start border-inline-end,
+    property: border-left border-right,
     values: $border-values,
   ),
-  'border-y': (
+  "border-y": (
     class: border-y,
     property: border-top border-bottom,
     values: $border-values,
   ),
-  'border-color': (
+  "width": (
-    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,
   ),
-  'max-width': (
+  "height": (
-    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,
   ),
-  'max-height': (
+  "columns": (
-    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,
   ),
-  // Flex utilities
+  "bg-pattern": (
-  '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-blur': (
+  "bg-blur": (
     property: backdrop-filter,
     class: bg-blur,
     values: (
-      null: blur($backdrop-blur),
+      null: blur($backdrop-blur)
-    ),
+    )
   ),
-  'bg-gradient-direction': (
+  "bg-gradient-direction": (
     property: --#{$prefix}gradient-direction,
     class: bg-gradient,
     values: (
@@ -590,7 +131,7 @@ $utilities: (
       to-ts: to top left,
     ),
   ),
-  'table-layout': (
+  "table-layout": (
     property: table-layout,
     class: table,
     values: (
@@ -598,300 +139,4 @@ $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, 0.14) !default;
+$border-color-translucent-dark: rgba(72, 110, 149, .14) !default;
 $border-dark-color-dark: color.adjust($dark, $lightness: 4%) !default;
 $border-active-color-dark: color.adjust($dark, $lightness: 12%) !default;
 
@@ -17,96 +17,3 @@ $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

@@ -1,184 +0,0 @@
-// 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,4 +1,4 @@
-@use 'sass:map';
+@use "sass:map";
 
 //
 // Clearfix
@@ -30,14 +30,14 @@
 // Stretched link
 //
 .stretched-link {
-  &::after {
+  &::#{$stretched-link-pseudo-element} {
     position: absolute;
     top: 0;
-    inset-inline-end: 0;
+    right: 0;
     bottom: 0;
-    inset-inline-start: 0;
+    left: 0;
-    z-index: 1;
+    z-index: $stretched-link-z-index;
-    content: '';
+    content: "";
   }
 }
 
@@ -74,16 +74,16 @@
 .fixed-top {
   position: fixed;
   top: 0;
-  inset-inline-end: 0;
+  right: 0;
-  inset-inline-start: 0;
+  left: 0;
   z-index: $zindex-fixed;
 }
 
 .fixed-bottom {
   position: fixed;
-  inset-inline-end: 0;
+  right: 0;
   bottom: 0;
-  inset-inline-start: 0;
+  left: 0;
   z-index: $zindex-fixed;
 }
 
@@ -116,13 +116,13 @@
   &::before {
     display: block;
     padding-top: var(--#{$prefix}aspect-ratio);
-    content: '';
+    content: "";
   }
 
-  >* {
+  > * {
     position: absolute;
     top: 0;
-    inset-inline-start: 0;
+    left: 0;
     width: 100%;
     height: 100%;
   }
@@ -142,3 +142,4 @@
   // 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,15 +1,11 @@
-@use 'sass:map';
+@use "sass:map";
   
 // stylelint-disable property-no-vendor-prefix
 body {
   letter-spacing: $body-letter-spacing;
   touch-action: manipulation;
   text-rendering: optimizeLegibility;
-  font-feature-settings:
+  font-feature-settings: "liga" 0, "cv03", "cv04", "cv11";
-    'liga' 0,
-    'cv03',
-    'cv04',
-    'cv11';
   position: relative;
   min-height: 100%;
   height: 100%;
@@ -18,51 +14,9 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  @include media-print {
+  @media print {
     background: transparent;
   }
 }
 
 @include scrollbar;
-
-//
-// Fluid container
-//
-.layout-fluid {
-  .container,
-  [class^='container-'],
-  [class*=' container-'] {
-    max-width: 100%;
-  }
-}
-
-//
-// Boxed container
-//
-.layout-boxed {
-  --#{$prefix}theme-boxed-border-radius: 0;
-  --#{$prefix}theme-boxed-width: #{map.get($container-max-widths, xxl)};
-
-  @include media-breakpoint-up(md) {
-    background: $dark linear-gradient(to right, rgba(#fff, 0.1), transparent) fixed;
-    padding: 1rem;
-    --#{$prefix}theme-boxed-border-radius: #{$border-radius};
-  }
-
-  .page {
-    margin: 0 auto;
-    max-width: var(--#{$prefix}theme-boxed-width);
-    border-radius: var(--#{$prefix}theme-boxed-border-radius);
-    color: var(--#{$prefix}body-color);
-
-    @include media-breakpoint-up(md) {
-      border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-      background: var(--#{$prefix}body-bg);
-    }
-
-    > .navbar:first-child {
-      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,6 +26,7 @@
     }
   }
 
+
   @include color-mode(dark, true) {
     color-scheme: dark;
     --#{$prefix}body-color: var(--#{$prefix}gray-200);
@@ -47,12 +48,16 @@
     --#{$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), 0.4)};
+    --#{$prefix}disabled-color: #{color-transparent(var(--#{$prefix}body-color), .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};
 
@@ -63,7 +68,7 @@
     }
   }
 
-  body[data-bs-theme='dark'] [data-bs-theme='light'] {
+  body[data-bs-theme=dark] [data-bs-theme=light] {
-    @extend [data-bs-theme='dark'];
+    @extend [data-bs-theme=dark];
   }
 }

core/scss/layout/_footer.scss

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

core/scss/layout/_navbar.scss

@@ -1,22 +1,22 @@
-@use 'sass:map';
+@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-inline-start: 0;
+      margin-left: 0;
-      margin-inline-end: 0;
+      margin-right: 0;
 
       .nav-link {
         padding: 0.5rem calc(#{$container-padding-x} / 2);
-        justify-content: start;
+        justify-content: flex-start;
       }
     }
 
@@ -38,7 +38,7 @@
         min-width: 0;
         display: flex;
         width: auto;
-        padding-inline-start: add(calc(#{$container-padding-x} / 2), 1.75rem);
+        padding-left: add(calc(#{$container-padding-x} / 2), 1.75rem);
         color: inherit;
 
         &.disabled {
@@ -54,22 +54,22 @@
       }
 
       .dropdown-menu .dropdown-item {
-        padding-inline-start: add(calc(#{$container-padding-x} / 2), 3.25rem);
+        padding-left: add(calc(#{$container-padding-x} / 2), 3.25rem);
       }
 
       .dropdown-menu .dropdown-menu .dropdown-item {
-        padding-inline-start: add(calc(#{$container-padding-x} / 2), 4.75rem);
+        padding-left: add(calc(#{$container-padding-x} / 2), 4.75rem);
       }
     }
 
     .dropdown-toggle:after {
-      margin-inline-start: auto;
+      margin-left: auto;
     }
 
     .nav-item.active:after {
       border-bottom-width: 0;
-      border-inline-start-width: 3px;
+      border-left-width: 3px;
-  inset-inline-end: auto;
+      right: auto;
       top: 0;
       bottom: 0;
     }
@@ -117,8 +117,8 @@ Navbar
 
       .badge {
         position: absolute;
-        top: 0.5rem;
+        top: 0.375rem;
-  inset-inline-end: 0.5rem;
+        right: 0.375rem;
         transform: translate(50%, -50%);
       }
     }
@@ -149,10 +149,10 @@ Navbar
           }
 
           &:after {
-            content: '';
+            content: "";
             position: absolute;
-  inset-inline-start: 0;
+            left: 0;
-  inset-inline-end: 0;
+            right: 0;
             bottom: -0.25rem;
             border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
             border-bottom-width: 2px;
@@ -167,22 +167,6 @@ Navbar
             box-shadow: inset calc(1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color);
           }
         }
-
-        &.navbar-vertical {
-          ~ .navbar,
-          ~ .page-wrapper {
-            margin-inline-start: $sidebar-width;
-          }
-        }
-
-        &.navbar-vertical.navbar-right,
-        &.navbar-vertical.navbar-end {
-          ~ .navbar,
-          ~ .page-wrapper {
-            margin-inline-start: 0;
-            margin-inline-end: $sidebar-width;
-          }
-        }
       }
     }
   }
@@ -224,18 +208,23 @@ Navbar toggler
   background: currentColor;
   border-radius: 10px;
   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);
+  @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;
-  inset-inline-start: 0;
+    left: 0;
     @include transition(inherit);
   }
 
@@ -247,7 +236,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);
 
@@ -303,6 +292,10 @@ Navbar vertical
  */
 @if $enable-navbar-vertical {
   .navbar-vertical {
+    @at-root .page:has(>#{&}) {
+      margin-left: $sidebar-width;
+    }
+
     &.navbar-expand {
       @each $breakpoint in map.keys($grid-breakpoints) {
         $next: breakpoint-next($breakpoint, $grid-breakpoints);
@@ -313,18 +306,18 @@ Navbar vertical
             width: $sidebar-width;
             position: fixed;
             top: 0;
-  inset-inline-start: 0;
+            left: 0;
             bottom: 0;
             z-index: $zindex-fixed;
-            align-items: start;
+            align-items: flex-start;
             overflow-y: scroll;
             padding: 0;
             @include transition(transform $transition-time);
 
             &.navbar-right,
             &.navbar-end {
-  inset-inline-start: auto;
+              left: auto;
-  inset-inline-end: 0;
+              right: 0;
             }
 
             .navbar-brand {
@@ -347,27 +340,27 @@ Navbar vertical
               }
             }
 
-            > [class^='container'] {
+            > [class^="container"] {
               flex-direction: column;
               align-items: stretch;
               min-height: 100%;
-              justify-content: start;
+              justify-content: flex-start;
               padding: 0;
             }
 
             ~ .page {
-              padding-inline-start: $sidebar-width;
+              padding-left: $sidebar-width;
 
-              [class^='container'] {
+              [class^="container"] {
-                padding-inline-start: 1.5rem;
+                padding-left: 1.5rem;
-                padding-inline-end: 1.5rem;
+                padding-right: 1.5rem;
               }
             }
 
             &.navbar-right ~ .page,
             &.navbar-end ~ .page {
-              padding-inline-start: 0;
+              padding-left: 0;
-              padding-inline-end: $sidebar-width;
+              padding-right: $sidebar-width;
             }
 
             @include navbar-vertical-nav;
@@ -375,17 +368,108 @@ Navbar vertical
         }
       }
     }
+
+    // Narrow sidebar implementation
+    &.navbar-narrow {
+      @at-root .page:has(>#{&}) {
+        margin-left: $sidebar-narrow-width;
+      }
+
+      &.navbar-expand {
+        @each $breakpoint in map.keys($grid-breakpoints) {
+          $next: breakpoint-next($breakpoint, $grid-breakpoints);
+          $infix: breakpoint-infix($next, $grid-breakpoints);
+
+          &#{$infix} {
+            @include media-breakpoint-up($next) {
+              width: $sidebar-narrow-width;
+
+              .navbar-brand {
+                .navbar-brand-image {
+                  width: 1.5rem;
+                  height: 1.5rem;
+                }
+              }
+
+              .navbar-nav {
+                .nav-link {
+                  justify-content: center;
+                  padding-left: 0.5rem;
+                  padding-right: 0.5rem;
+
+                  .nav-link-title {
+                    display: none;
+                  }
+
+                  .nav-link-icon {
+                    margin-right: 0;
+                  }
+                }
+
+                .dropdown-menu {
+                  position: fixed !important;
+                  left: $sidebar-narrow-width;
+                  top: auto;
+                  margin-left: 0.25rem;
+                  background: var(--#{$prefix}bg-surface);
+                  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+                  box-shadow: var(--#{$prefix}shadow);
+                  border-radius: var(--#{$prefix}border-radius);
+                  min-width: 12rem;
+
+                  .dropdown-item {
+                    padding: 0.5rem 1rem;
+                    color: var(--#{$prefix}body-color);
+                    background: transparent;
+
+                    &:hover,
+                    &:focus {
+                      background: var(--#{$prefix}gray-100);
+                    }
+
+                    &.active {
+                      background: var(--#{$prefix}primary);
+                      color: var(--#{$prefix}white);
+                    }
+                  }
+                }
+              }
+
+              ~ .page {
+                padding-left: $sidebar-narrow-width;
+              }
+
+              &.navbar-right ~ .page,
+              &.navbar-end ~ .page {
+                padding-left: 0;
+                padding-right: $sidebar-narrow-width;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+/**
+Navbar narrow tooltips
+*/
+.navbar-narrow-tooltip {
+  .tooltip-inner {
+    font-size: 0.75rem;
+    padding: 0.25rem 0.5rem;
   }
 }
 
 .navbar-overlap {
   &:after {
-    content: '';
+    content: "";
     height: $navbar-overlap-height;
     position: absolute;
     top: 100%;
-  inset-inline-start: 0;
+    left: 0;
-  inset-inline-end: 0;
+    right: 0;
     background: inherit;
     z-index: -1;
     box-shadow: inherit;