chore: update versions

.changeset/angry-bananas-brake.md

@@ -1,6 +0,0 @@
----
-"@tabler/core": minor
-"@tabler/preview": minor
----
-
-Added Pay page with dedicated layout, navigation link, and card/PayPal payment form.

.changeset/bootstrap-exports-cleanup.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Refactored Bootstrap exports to use single source of truth in `bootstrap.js` and removed duplicate exports from `tabler.js` for better maintainability.

.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/button-ghost.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": minor
----
-
-Added `.btn-ghost` button variant with transparent background and hover effects.

.changeset/card-gradient-components.md

@@ -1,6 +0,0 @@
----
-"@tabler/core": minor
----
-
-Added `.card-gradient` component with gradient variants, direction modifiers, and animated backgrounds.
-

.changeset/card-gradients-page.md

@@ -1,6 +0,0 @@
----
-"@tabler/preview": minor
----
-
-Added new `card-gradients.html` page showcasing various gradient card styles and components.
-

.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/chilled-pans-cheer.md

@@ -1,5 +0,0 @@
----
-"@tabler/preview": minor
----
-
-Added color palette to signing component.

.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/curvy-timers-sneeze.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Fixed icon alignment for `.btn-sm` and `.btn-xl` sizes.

.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-border-color-translucent-dark.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Updated `$border-color-translucent-dark` from `rgba(72, 110, 149, 0.14)` to `rgba(128, 150, 172, 0.2)` to improve visibility of form checkboxes and other form elements in dark mode.

.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/fix-status-colors-variables.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Fixed status color classes to use CSS variables instead of hardcoded values and include social colors (bitbucket, facebook, etc.) in status class generation.

.changeset/fix-white-space-scrollbar.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Fixed white space on left side when scrollbar is present by replacing `margin-inline-start: calc(100vw - 100%)` with `scrollbar-gutter: stable` on `html` element, with `overflow-y: scroll` fallback for unsupported browsers.

.changeset/flags-avatars-updates.md

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

.changeset/fresh-rockets-retire.md

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

.changeset/funny-kings-double.md

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

.changeset/geist-fonts.md

@@ -1,7 +0,0 @@
----
-"@tabler/core": minor
-"@tabler/docs": patch
----
-
-Added Geist font family integration.
-

.changeset/icon-stroke-width.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Updated `stroke-width` for `.icon-sm` from `1` to `1.5` for better visibility.

.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/late-pugs-breathe2.md

@@ -1,6 +0,0 @@
----
-"@tabler/core": patch
-"@tabler/preview": patch
----
-
-Added `bg-blur` utility and increased `container-tight` width for layout flexibility.

.changeset/light-cooks-hug.md

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

.changeset/many-dogs-rest.md

@@ -1,6 +0,0 @@
----
-"@tabler/core": patch
----
-
-Added `border-top-left-radius` and `border-top-right-radius` to first and last child elements in `.card-table` for proper corner rounding.
-

.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/modern-dots-bathe.md

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

.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/onboarding-page.md

@@ -1,5 +0,0 @@
----
-"@tabler/preview": minor
----
-
-Added new onboarding page with progress indicator and navigation layout.

.changeset/pretty-chefs-design.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Fixed double bottom border in tables.

.changeset/progress-background.md

@@ -1,6 +0,0 @@
----
-"@tabler/core": minor
-"@tabler/preview": minor
----
-
-Added Progress Background component with text labels and value display.

.changeset/progress-sizes.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": minor
----
-
-Added `.progress-lg` and `.progress-xl` size variants for the progress component.

.changeset/progress-steps.md

@@ -1,6 +0,0 @@
----
-"@tabler/core": minor
-"@tabler/preview": minor
----
-
-Added Progress Steps component for step-by-step navigation indicators.

.changeset/progress-transitions.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Added smooth transitions for progress bar `width` and `background-color` changes.

.changeset/redundant-nullish-operator.md

@@ -1,6 +0,0 @@
----
-"@tabler/core": patch
----
-
-Removed redundant nullish coalescing operator from `html` option in popover and tooltip initialization.
-

.changeset/silly-crabs-walk.md

@@ -1,7 +0,0 @@
----
-"@tabler/core": patch
-"@tabler/preview": patch
----
-
-Added Driver.js library integration and Tour demo page for interactive product tours and onboarding guides.
-

.changeset/skip-link-accessibility.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Updated skip-link to use `visually-hidden` for improved accessibility.

.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/three-seas-move.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Updated deprecated global Sass functions to module equivalents (`map.merge`, `string.slice`, `math.percentage`, etc.).

.changeset/tidy-apples-ring.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Updated Bootstrap to v5.3.8.

.changeset/trending-icons.md

@@ -1,6 +0,0 @@
----
-"@tabler/core": patch
-"@tabler/preview": patch
----
-
-Updated trending component to use `arrow-up`/`arrow-down` instead of `trending-up`/`trending-down`.

.changeset/tricky-moons-laugh.md

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

.changeset/twelve-tables-attack.md

@@ -1,5 +0,0 @@
----
-"@tabler/preview": patch
----
-
-Fixed responsive layouts on the Form Elements page.

.changeset/upgrade-apexcharts.md

@@ -1,7 +0,0 @@
----
-"@tabler/core": minor
-"@tabler/preview": minor
----
-
-Upgraded `apexcharts` from `3.54.1` to `5.3.6` and added CSS variables (`--chart-{id}-color-{index}`) for dynamic chart colors to fix compatibility with the new version.
-

.changeset/young-needles-love.md

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

core/CHANGELOG.md

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

core/img/flags/eu.svg

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

core/js/src/bootstrap.js

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

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tabler/core",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "homepage": "https://tabler.io",
   "scripts": {

core/scss/_utilities.scss

@@ -16,12 +16,8 @@ $utilities-border-colors: map-loop(
   'border'
 ) !default;
 
-// Utilities
+//Utilities
-
+$utilities: (
-$utilities: () !default;
-
-$utilities: map-merge(
-  (
   'align': (
     property: vertical-align,
     class: align,
@@ -898,6 +894,4 @@ $utilities: map-merge(
     class: z,
     values: $zindex-levels,
   ),
-  ),
+) !default;
-  $utilities
-);

core/scss/_variables.scss

@@ -33,7 +33,12 @@ $enable-deprecation-messages: true !default;
 $enable-important-utilities: true !default;
 
 // Escaped Characters
-$escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), (')', '%29')) !default;
+$escaped-characters: (
+  ('<', '%3c'),
+  ('>', '%3e'),
+  ('#', '%23'),
+  ('(', '%28'),
+  (')', '%29')) !default;
 
 // Dark Mode
 $color-mode-type: data !default;
@@ -555,6 +560,11 @@ $text-secondary-opacity: 0.7 !default;
 $text-secondary-light-opacity: 0.4 !default;
 $text-secondary-dark-opacity: 0.8 !default;
 
+$border-opacity: 0.16 !default;
+$border-light-opacity: 0.08 !default;
+$border-dark-opacity: 0.24 !default;
+$border-active-opacity: 0.58 !default;
+
 $bg-surface: var(--#{$prefix}white) !default;
 $bg-surface-secondary: var(--#{$prefix}gray-100) !default;
 $bg-surface-tertiary: var(--#{$prefix}gray-50) !default;
@@ -562,7 +572,7 @@ $bg-surface-dark: var(--#{$prefix}dark) !default;
 
 $body-text-align: null !default;
 $body-bg: $gray-50 !default;
-$body-color: $gray-800 !default;
+$body-color: $dark !default;
 $body-emphasis-color: $gray-700 !default;
 $body-secondary-color: rgba($body-color, 0.75) !default;
 $body-secondary-bg: $gray-200 !default;
@@ -577,21 +587,14 @@ $text-secondary: $gray-500 !default;
 $text-secondary-light: $gray-400 !default;
 $text-secondary-dark: $gray-600 !default;
 
-$border-light-color: var(--#{$prefix}gray-200) !default;
+$border-color: $gray-200 !default;
-$border-light-opacity: 4.7% !default;
+$border-color-translucent: rgba(4, 32, 69, 0.1);
-$border-light-color-translucent: color-mix(in srgb, var(--#{$prefix}gray-800) #{$border-light-opacity}, transparent) !default;
 
-$border-color: var(--#{$prefix}gray-200) !default;
+$border-dark-color: $gray-400 !default;
-$border-opacity: 11.9% !default;
+$border-dark-color-translucent: rgba(4, 32, 69, 0.27);
-$border-color-translucent: color-mix(in srgb, var(--#{$prefix}gray-800) #{$border-opacity}, transparent) !default;
 
-$border-dark-color: var(--#{$prefix}gray-300) !default;
+$border-active-color: color.mix($text-secondary, #ffffff, math.percentage($border-active-opacity)) !default;
-$border-dark-opacity: 20.7% !default;
+$border-active-color-translucent: rgba($text-secondary, $border-active-opacity) !default;
-$border-dark-color-translucent: color-mix(in srgb, var(--#{$prefix}gray-800) #{$border-dark-opacity}, transparent) !default;
-
-$border-active-color: var(--#{$prefix}gray-400) !default;
-$border-active-opacity: 44.8% !default;
-$border-active-color-translucent: color-mix(in srgb, var(--#{$prefix}gray-800) #{$border-active-opacity}, transparent) !default;
 
 $active-bg: rgba(var(--#{$prefix}primary-rgb), 0.04) !default;
 $active-color: var(--#{$prefix}primary) !default;
@@ -877,7 +880,7 @@ $avatar-sizes: (
     brand-size: 2rem,
   ),
 ) !default;
-$avatar-border-radius: var(--#{$prefix}border-radius-pill) !default;
+$avatar-border-radius: var(--#{$prefix}border-radius) !default;
 $avatar-font-size: $h4-font-size !default;
 $avatar-box-shadow: var(--#{$prefix}shadow-border) !default;
 $avatar-list-spacing: -0.5;
@@ -991,7 +994,7 @@ $box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default;
 $box-shadow-transparent: 0 0 0 0 transparent !default;
 $box-shadow-border: inset 0 0 0 1px var(--#{$prefix}border-color-translucent) !default;
 $box-shadow-input: 0 1px 1px rgba(var(--#{$prefix}body-color-rgb), 0.06) !default;
-$box-shadow-card: 0px 1px 3px rgba(0, 0, 0, 0.08) !default;
+$box-shadow-card: 0 0 4px rgba(var(--#{$prefix}body-color-rgb), 0.04) !default;
 $box-shadow-card-hover: rgba(var(--#{$prefix}body-color-rgb), 0.16) 0 2px 16px 0 !default;
 $box-shadow-dropdown:
   0 16px 24px 2px rgba(0, 0, 0, 0.07),
@@ -1163,9 +1166,9 @@ $btn-padding-y-lg: $input-btn-padding-y-lg !default;
 $btn-padding-x-lg: $input-btn-padding-x-lg !default;
 
 // Inputs
-$input-bg: var(--#{$prefix}bg-forms) !default;
+$input-bg: var(--#{$prefix}body-bg) !default;
 $input-disabled-color: null !default;
-$input-disabled-bg: var(--#{$prefix}bg-surface-secondary) !default;
+$input-disabled-bg: var(--#{$prefix}secondary-bg) !default;
 $input-disabled-border-color: null !default;
 
 $input-height: null !default;
@@ -1862,16 +1865,16 @@ $form-select-font-size-lg: $input-font-size-lg !default;
 $form-select-border-radius-lg: $input-border-radius-lg !default;
 $form-select-transition: $input-transition !default;
 
-$form-switch-color: white !default;
+$form-switch-color: rgba($black, 0.25) !default;
 $form-switch-width: 2rem !default;
 $form-switch-height: 1.25rem !default;
 $form-switch-padding-start: $form-switch-width + 0.5rem !default;
-$form-switch-bg-image: 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}'/></svg>") !default;
+$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$border-color}'/></svg>") !default;
 $form-switch-border-radius: $form-switch-width !default;
 $form-switch-transition: background-position 0.15s ease-in-out !default;
-$form-switch-focus-color: white !default;
+$form-switch-focus-color: $input-focus-border-color !default;
 $form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
-$form-switch-checked-color: white !default;
+$form-switch-checked-color: $component-active-color !default;
 $form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
 $form-switch-checked-bg-position: right center !default;
 $form-switch-bg-size: auto !default;

core/scss/fonts/_geist.scss

@@ -1,8 +1,7 @@
 // Geist Sans Font Family
 @font-face {
 	font-family: 'Geist';
-  src:
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Thin.woff2') format('woff2'),
-    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;
@@ -11,8 +10,7 @@
 
 @font-face {
 	font-family: 'Geist';
-  src:
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.woff2') format('woff2'),
-    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;
@@ -21,8 +19,7 @@
 
 @font-face {
 	font-family: 'Geist';
-  src:
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Light.woff2') format('woff2'),
-    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;
@@ -31,8 +28,7 @@
 
 @font-face {
 	font-family: 'Geist';
-  src:
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Regular.woff2') format('woff2'),
-    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;
@@ -41,8 +37,7 @@
 
 @font-face {
 	font-family: 'Geist';
-  src:
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Medium.woff2') format('woff2'),
-    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;
@@ -51,8 +46,7 @@
 
 @font-face {
 	font-family: 'Geist';
-  src:
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2'),
-    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;
@@ -61,8 +55,7 @@
 
 @font-face {
 	font-family: 'Geist';
-  src:
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Bold.woff2') format('woff2'),
-    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;
@@ -71,8 +64,7 @@
 
 @font-face {
 	font-family: 'Geist';
-  src:
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Black.woff2') format('woff2'),
-    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;
@@ -81,8 +73,7 @@
 
 @font-face {
 	font-family: 'Geist';
-  src:
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.woff2') format('woff2'),
-    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;
@@ -92,8 +83,7 @@
 // Geist Sans Variable Font
 @font-face {
 	font-family: 'Geist';
-  src:
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Variable.woff2') format('woff2'),
-    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;
@@ -103,8 +93,7 @@
 // Geist Mono Font Family
 @font-face {
 	font-family: 'Geist Mono';
-  src:
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.woff2') format('woff2'),
-    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;
@@ -113,8 +102,7 @@
 
 @font-face {
 	font-family: 'Geist Mono';
-  src:
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.woff2') format('woff2'),
-    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;
@@ -123,8 +111,7 @@
 
 @font-face {
 	font-family: 'Geist Mono';
-  src:
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.woff2') format('woff2'),
-    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;
@@ -133,8 +120,7 @@
 
 @font-face {
 	font-family: 'Geist Mono';
-  src:
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2'),
-    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;
@@ -143,8 +129,7 @@
 
 @font-face {
 	font-family: 'Geist Mono';
-  src:
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2'),
-    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;
@@ -153,8 +138,7 @@
 
 @font-face {
 	font-family: 'Geist Mono';
-  src:
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.woff2') format('woff2'),
-    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;
@@ -163,8 +147,7 @@
 
 @font-face {
 	font-family: 'Geist Mono';
-  src:
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.woff2') format('woff2'),
-    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;
@@ -173,8 +156,7 @@
 
 @font-face {
 	font-family: 'Geist Mono';
-  src:
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.woff2') format('woff2'),
-    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;
@@ -183,8 +165,7 @@
 
 @font-face {
 	font-family: 'Geist Mono';
-  src:
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.woff2') format('woff2'),
-    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;
@@ -194,10 +175,10 @@
 // Geist Mono Variable Font
 @font-face {
 	font-family: 'Geist Mono';
-  src:
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2'),
-    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/helpers/_index.scss

@@ -119,7 +119,7 @@
     content: '';
   }
 
-  > * {
+  >* {
     position: absolute;
     top: 0;
     inset-inline-start: 0;

core/scss/layout/_root.scss

@@ -33,10 +33,7 @@
   --#{$prefix}border-color-translucent: #{$border-color-translucent};
   --#{$prefix}border-dark-color: #{$border-dark-color};
   --#{$prefix}border-dark-color-translucent: #{$border-dark-color-translucent};
-  --#{$prefix}border-light-color: #{$border-light-color};
-  --#{$prefix}border-light-color-translucent: #{$border-light-color-translucent};
   --#{$prefix}border-active-color: #{$border-active-color};
-  --#{$prefix}border-active-color-translucent: #{$border-active-color-translucent};
 
   --#{$prefix}icon-color: #{$icon-color};
 

core/scss/tabler-themes.scss

@@ -15,17 +15,17 @@
 }
 
 [data-bs-theme-base='gray'] {
-  --#{$prefix}gray-50: $gray-50;
+  --#{$prefix}gray-50: #f9fafb;
-  --#{$prefix}gray-100: $gray-100;
+  --#{$prefix}gray-100: #f3f4f6;
-  --#{$prefix}gray-200: $gray-200;
+  --#{$prefix}gray-200: #e5e7eb;
-  --#{$prefix}gray-300: $gray-300;
+  --#{$prefix}gray-300: #d1d5db;
-  --#{$prefix}gray-400: $gray-400;
+  --#{$prefix}gray-400: #9ca3af;
-  --#{$prefix}gray-500: $gray-500;
+  --#{$prefix}gray-500: #6b7280;
-  --#{$prefix}gray-600: $gray-600;
+  --#{$prefix}gray-600: #4b5563;
-  --#{$prefix}gray-700: $gray-700;
+  --#{$prefix}gray-700: #374151;
-  --#{$prefix}gray-800: $gray-800;
+  --#{$prefix}gray-800: #1f2937;
-  --#{$prefix}gray-900: $gray-900;
+  --#{$prefix}gray-900: #111827;
-  --#{$prefix}gray-950: $gray-950;
+  --#{$prefix}gray-950: #030712;
 }
 
 [data-bs-theme-base='zinc'] {

core/scss/ui/_alerts.scss

@@ -1,12 +1,10 @@
 .alert {
-  --#{$prefix}alert-variant-color: var(--#{$prefix}body-color);
+  --#{$prefix}alert-color: var(--#{$prefix}body-color);
-  --#{$prefix}alert-color: var(--#{$prefix}alert-variant-color);
+  --#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-color), 0.1)};
-  --#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-variant-color), 0.16, var(--#{$prefix}bg-surface))};
   --#{$prefix}alert-padding-x: #{$alert-padding-x};
   --#{$prefix}alert-padding-y: #{$alert-padding-y};
   --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
-  --#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-variant-color), 0.2, var(--#{$prefix}bg-surface))};
+  --#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-color), 0.2)};
-  --#{$prefix}alert-border-color: var(--#{$prefix}border-color);
   --#{$prefix}alert-border: var(--#{$prefix}border-width) solid var(--#{$prefix}alert-border-color);
   --#{$prefix}alert-border-radius: var(--#{$prefix}border-radius);
   --#{$prefix}alert-link-color: inherit;
@@ -18,8 +16,6 @@
   background-color: color-mix(in srgb, var(--#{$prefix}alert-bg), var(--#{$prefix}bg-surface));
   border-radius: var(--#{$prefix}alert-border-radius);
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}alert-border-color);
-  box-shadow: var(--#{$prefix}box-shadow);
-  color: var(--#{$prefix}alert-color);
   display: flex;
   flex-direction: row;
   gap: 1rem;
@@ -77,7 +73,8 @@
 }
 
 .alert-important {
-  background-color: var(--#{$prefix}alert-variant-color);
+  border-color: var(--#{$prefix}alert-color);
+  background-color: var(--#{$prefix}alert-color);
   color: var(--#{$prefix}white);
 
   .alert-description {
@@ -96,6 +93,6 @@
 
 @each $name, $color in $theme-colors {
   .alert-#{$name} {
-    --#{$prefix}alert-variant-color: var(--#{$prefix}#{$name});
+    --#{$prefix}alert-color: var(--#{$prefix}#{$name});
   }
 }

core/scss/ui/_avatars.scss

@@ -9,7 +9,6 @@
   --#{$prefix}avatar-font-size: #{$avatar-font-size};
   --#{$prefix}avatar-icon-size: #{$avatar-icon-size};
   --#{$prefix}avatar-brand-size: #{$avatar-brand-size};
-  --#{$prefix}avatar-border-radius: #{$avatar-border-radius};
   position: relative;
   width: var(--#{$prefix}avatar-size);
   height: var(--#{$prefix}avatar-size);
@@ -25,7 +24,7 @@
   vertical-align: bottom;
   user-select: none;
   background: var(--#{$prefix}avatar-bg) no-repeat center/cover;
-  border-radius: var(--#{$prefix}avatar-border-radius);
+  border-radius: $avatar-border-radius;
   box-shadow: var(--#{$prefix}avatar-box-shadow);
   transition:
     color $transition-time,
@@ -59,10 +58,6 @@
   border-radius: $border-radius-pill;
 }
 
-.avatar-square {
-  border-radius: var(--#{$prefix}border-radius);
-}
-
 @each $avatar-size, $size in $avatar-sizes {
   .avatar-#{$avatar-size} {
     --#{$prefix}avatar-size: #{map.get($size, size)};
@@ -71,14 +66,14 @@
     --#{$prefix}avatar-icon-size: #{map.get($size, icon-size)};
     --#{$prefix}avatar-brand-size: #{map.get($size, brand-size)};
 
+    @if map.has-key($size, border-radius) {
+      border-radius: map.get($size, border-radius);
+    }
+
     .badge:empty {
       width: map.get($size, status-size);
       height: map.get($size, status-size);
     }
-
-    &.avatar-square {
-      --#{$prefix}avatar-border-radius: #{map.get($size, border-radius)};
-    }
   }
 }
 
@@ -101,13 +96,10 @@
   --#{$prefix}list-gap: 0;
 
   .avatar {
+    margin-inline-end: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important;
     box-shadow:
       var(--#{$prefix}avatar-box-shadow),
       0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
-
-    &:not(:first-child) {
-      margin-inline-start: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important;
-    }
   }
 }
 

core/scss/ui/_buttons.scss

@@ -76,15 +76,6 @@
 //
 // Button color variations
 //
-.btn-ghost {
-  --#{$prefix}btn-bg: transparent;
-  --#{$prefix}btn-border-color: transparent;
-  --#{$prefix}btn-box-shadow: none;
-  --#{$prefix}btn-hover-bg: var(--#{$prefix}bg-surface-secondary);
-  --#{$prefix}btn-hover-border-color: transparent;
-  --#{$prefix}btn-hover-color: var(--#{$prefix}body-color);
-}
-
 @each $color, $value in map.merge($theme-colors, $social-colors) {
   .btn-#{$color} {
     @if $color == 'dark' {
@@ -123,6 +114,15 @@
     --#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$color});
   }
 
+  .btn-ghost {
+    --#{$prefix}btn-bg: transparent;
+    --#{$prefix}btn-border-color: transparent;
+    --#{$prefix}btn-box-shadow: none;
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}bg-surface-secondary);
+    --#{$prefix}btn-hover-border-color: transparent;
+    --#{$prefix}btn-hover-color: var(--#{$prefix}body-color);
+  }
+
   .btn-ghost-#{$color},
   .btn-ghost.btn-#{$color} {
     --#{$prefix}btn-color: var(--#{$prefix}#{$color});

core/scss/ui/_cards.scss

@@ -40,6 +40,7 @@
 
 // Card borderless
 .card-borderless {
+
   &,
   .card-header,
   .card-footer {
@@ -47,18 +48,6 @@
   }
 }
 
-// Card dashed
-.card-dashed {
-  border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
-}
-
-// Card transparent
-.card-transparent {
-  background: transparent;
-  border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
-  box-shadow: none;
-}
-
 // Card stamp
 .card-stamp {
   --#{$prefix}stamp-size: 7rem;
@@ -152,7 +141,7 @@
     background: $active-bg;
   }
 
-  & + & {
+  &+& {
     border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   }
 }
@@ -351,17 +340,17 @@ Stacked card
     margin-bottom: 0;
   }
 
-  .card-sm > & {
+  .card-sm>& {
     padding: 1rem;
   }
 
-  .card-md > & {
+  .card-md>& {
     @include media-breakpoint-up(md) {
       padding: 2.5rem;
     }
   }
 
-  .card-lg > & {
+  .card-lg>& {
     @include media-breakpoint-up(md) {
       padding: 2rem;
     }
@@ -375,7 +364,7 @@ Stacked card
     padding: 0;
   }
 
-  & + & {
+  &+& {
     border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   }
 }
@@ -438,6 +427,7 @@ Card table
   margin-bottom: 0 !important;
 
   tr {
+
     td,
     th {
       &:first-child {
@@ -466,11 +456,11 @@ Card table
   tfoot {
     &:last-child {
       tr:last-child {
-        > *:last-child {
+        >*:last-child {
           border-end-end-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width));
         }
 
-        > *:first-child {
+        >*:first-child {
           border-end-start-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width));
         }
       }
@@ -506,7 +496,7 @@ Card table
     }
   }
 
-  .card-body + & {
+  .card-body+& {
     border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}table-border-color);
   }
 }
@@ -551,7 +541,7 @@ Card avatar
 Card list group
  */
 .card-list-group {
-  .card-body + & {
+  .card-body+& {
     border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   }
 
@@ -610,7 +600,7 @@ Card list group
         }
       }
 
-      + .nav-item {
+      +.nav-item {
         margin-inline-start: calc(-1 * #{$card-border-width});
       }
     }
@@ -650,7 +640,7 @@ Card list group
     border-end-start-radius: 0;
   }
 
-  .nav-tabs + .tab-content .card {
+  .nav-tabs+.tab-content .card {
     border-end-start-radius: var(--#{$prefix}card-border-radius);
     border-start-start-radius: 0;
   }
@@ -664,6 +654,7 @@ Card note
   --#{$prefix}card-border-color: #fff1c9;
 }
 
+
 /**
 Card gradient
 */
@@ -672,10 +663,10 @@ Card gradient
   --#{$prefix}card-gradient-opacity: 86%;
   --#{$prefix}card-gradient: var(--tblr-primary), var(--tblr-primary);
 
-  background:
+  background: radial-gradient(ellipse at center, var(--#{$prefix}card-bg) 0%, color-mix(in srgb, var(--#{$prefix}card-bg) 0%, transparent) 80%) border-box,
-    radial-gradient(ellipse at center, var(--#{$prefix}card-bg) 0%, color-mix(in srgb, var(--#{$prefix}card-bg) 0%, transparent) 80%) border-box,
   linear-gradient(var(--#{$prefix}card-gradient-direction), color-mix(in srgb, var(--#{$prefix}card-bg) var(--#{$prefix}card-gradient-opacity), transparent) 0%, var(--#{$prefix}card-bg) 40%) border-box,
   linear-gradient(calc(270deg + var(--#{$prefix}card-gradient-direction)), var(--#{$prefix}card-gradient)) border-box;
+
 }
 
 @each $name, $color in map.merge($colors, $theme-colors) {
@@ -685,7 +676,14 @@ Card gradient
 }
 
 .card-gradient-rainbow {
-  --#{$prefix}card-gradient: #78c5d6, #459ba8, #79c267, #c5d647, #f5d63d, #f08b33, #e868a2, #be61a5;
+  --#{$prefix}card-gradient: #78C5D6,
+    #459BA8,
+    #79C267,
+    #C5D647,
+    #F5D63D,
+    #F08B33,
+    #E868A2,
+    #BE61A5;
 }
 
 .card-gradient-sun {
@@ -697,7 +695,7 @@ Card gradient
 }
 
 .card-gradient-ocean {
-  --#{$prefix}card-gradient: #1cb5e0, #000851;
+  --#{$prefix}card-gradient: #1CB5E0, #000851;
 }
 
 .card-gradient-mellow {
@@ -705,7 +703,7 @@ Card gradient
 }
 
 .card-gradient-disco {
-  --#{$prefix}card-gradient: #fc466b, #3f5efb;
+  --#{$prefix}card-gradient: #FC466B, #3F5EFB;
 }
 
 .card-gradient-psychedelic {
@@ -717,7 +715,7 @@ Card gradient
 }
 
 .card-gradient-gold {
-  --#{$prefix}card-gradient: #9d4100, #bf7122, #f59f00, #ffd700;
+  --#{$prefix}card-gradient: #9d4100, #bf7122, #f59f00, #FFD700;
 }
 
 .card-gradient-animated {

core/scss/ui/_progress.scss

@@ -93,8 +93,6 @@ Progressbg
 .progressbg-text {
   position: relative;
   z-index: 1;
-  display: flex;
-  align-items: center;
   @include text-truncate;
 }
 

docs/CHANGELOG.md

@@ -1,5 +1,45 @@
 # Tabler Documentation Changelog
 
+## 1.5.0
+
+### Patch Changes
+
+- a198b0c: Added Geist font family integration.
+- ab8009b: Fixed Docs search display in dark mode.
+- Updated dependencies [5e119d4]
+- Updated dependencies [059bae1]
+- Updated dependencies [5018aa9]
+- Updated dependencies [9c5d729]
+- Updated dependencies [ec94693]
+- Updated dependencies [c860288]
+- Updated dependencies [2dc7eda]
+- Updated dependencies [6e656ad]
+- Updated dependencies [8bc6fa7]
+- Updated dependencies [e206d7a]
+- Updated dependencies [4ce08ca]
+- Updated dependencies [b8b63d7]
+- Updated dependencies [0106d6b]
+- Updated dependencies [a198b0c]
+- Updated dependencies [9c5d729]
+- Updated dependencies [8d8727f]
+- Updated dependencies [5e119d4]
+- Updated dependencies [3aba62e]
+- Updated dependencies [0c79963]
+- Updated dependencies [4ce08ca]
+- Updated dependencies [9a3361f]
+- Updated dependencies [9c5d729]
+- Updated dependencies [9c5d729]
+- Updated dependencies [9c5d729]
+- Updated dependencies [9c5d729]
+- Updated dependencies [41ed22a]
+- Updated dependencies [83ec6f8]
+- Updated dependencies [9c5d729]
+- Updated dependencies [736e604]
+- Updated dependencies [f8dee0a]
+- Updated dependencies [9c5d729]
+- Updated dependencies [e3d86c5]
+  - @tabler/core@1.5.0
+
 ## 1.4.0
 
 ### Patch Changes

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tabler/docs",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "",
   "private": true,
   "scripts": {

preview/CHANGELOG.md

@@ -1,5 +1,71 @@
 # @tabler/preview
 
+## 1.5.0
+
+### Minor Changes
+
+- 5e119d4: Added Pay page with dedicated layout, navigation link, and card/PayPal payment form.
+- ec94693: Added new `card-gradients.html` page showcasing various gradient card styles and components.
+- b0fa655: Added Change Password modal with current password, new password with strength indicator, confirm password validation, and show/hide password toggles.
+- ad22d04: Added color palette to signing component.
+- b0fa655: Added Confirm Delete modal with warning icon, confirmation checkbox, and JavaScript validation to enable delete button only when confirmed.
+- 4ce08ca: Added new Crypto Dashboard page with cryptocurrency portfolio overview, market data, and order history.
+- b0fa655: Added Edit Profile modal with avatar upload, personal information fields, social links, and date of birth.
+- 8d8727f: Added language selector dropdown to navbar with flag indicators for multilingual support.
+- 4ce08ca: Refactored page-menu structure for dashboards and updated navigation menu organization.
+- 4ce08ca: Refactored navbar-side component by consolidating separate include files (apps, language, notifications, theme, user) into a single `navbar-side.html` file for better maintainability.
+- b0fa655: Added New Task modal with fields for task name, description, assigned user, priority, due date, and category tags.
+- 9c5d729: Added new onboarding page with progress indicator and navigation layout.
+- 9c5d729: Added Progress Background component with text labels and value display.
+- 9c5d729: Added Progress Steps component for step-by-step navigation indicators.
+- 99b9ea4: Added new Task List page with tables showing tasks organized by status (Upcoming, In Progress, Completed) and modal dialog for adding new tasks.
+- e3d86c5: Upgraded `apexcharts` from `3.54.1` to `5.3.6` and added CSS variables (`--chart-{id}-color-{index}`) for dynamic chart colors to fix compatibility with the new version.
+
+### Patch Changes
+
+- 4ce08ca: Added crypto markets and orders data files (`crypto-markets.json`, `crypto-orders.json`) for cryptocurrency dashboard functionality.
+- cf04a00: Update Tabler Icons to v3.35.0
+- 5e119d4: Added `bg-blur` utility and increased `container-tight` width for layout flexibility.
+- 399a5c5: Updated icons to v3.34.1 with 75 new icons.
+- 8947d7c: Updated activity messages.
+- 83ec6f8: Added Driver.js library integration and Tour demo page for interactive product tours and onboarding guides.
+- 9c5d729: Updated trending component to use `arrow-up`/`arrow-down` instead of `trending-up`/`trending-down`.
+- bd35fd3: Fixed responsive layouts on the Form Elements page.
+- c707018: Added comprehensive All Elements page with all UI components and Bootstrap elements
+- Updated dependencies [5e119d4]
+- Updated dependencies [059bae1]
+- Updated dependencies [5018aa9]
+- Updated dependencies [9c5d729]
+- Updated dependencies [ec94693]
+- Updated dependencies [c860288]
+- Updated dependencies [2dc7eda]
+- Updated dependencies [6e656ad]
+- Updated dependencies [8bc6fa7]
+- Updated dependencies [e206d7a]
+- Updated dependencies [4ce08ca]
+- Updated dependencies [b8b63d7]
+- Updated dependencies [0106d6b]
+- Updated dependencies [a198b0c]
+- Updated dependencies [9c5d729]
+- Updated dependencies [8d8727f]
+- Updated dependencies [5e119d4]
+- Updated dependencies [3aba62e]
+- Updated dependencies [0c79963]
+- Updated dependencies [4ce08ca]
+- Updated dependencies [9a3361f]
+- Updated dependencies [9c5d729]
+- Updated dependencies [9c5d729]
+- Updated dependencies [9c5d729]
+- Updated dependencies [9c5d729]
+- Updated dependencies [41ed22a]
+- Updated dependencies [83ec6f8]
+- Updated dependencies [9c5d729]
+- Updated dependencies [736e604]
+- Updated dependencies [f8dee0a]
+- Updated dependencies [9c5d729]
+- Updated dependencies [e3d86c5]
+  - @tabler/core@1.5.0
+
 ## 1.4.0
 
 ### Patch Changes

preview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tabler/preview",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "private": true,
   "scripts": {
     "build": "pnpm run clean && pnpm run build-assets && pnpm run html",

preview/pages/all-elements.html

@@ -714,22 +714,25 @@ permalink: all-elements.html
           <div class="card-body">
              <h4>Basic Segmented</h4>
              <div class="mb-3">
-                {% include "ui/nav-segmented.html" items="Home,Profile,Settings" %}
+                {% include "ui/nav-segmented.html" %}
              </div>
 
              <h4>With Icons</h4>
              <div class="mb-3">
-                {% include "ui/nav-segmented.html" icons="home,user,settings" %}
+                <nav class="nav nav-segmented" role="tablist">
-             </div>
+                   <button class="nav-link active" role="tab">
-
+                      {% include "ui/icon.html" icon="home" class="nav-link-icon" %}
-             <h4>With Emojis</h4>
+                      Home
-             <div class="mb-3">
+                   </button>
-                {% include "ui/nav-segmented.html" items="👦,👦🏿,👦🏾,👦🏽,👦🏼,👦🏻" %}
+                   <button class="nav-link" role="tab">
-             </div>
+                      {% include "ui/icon.html" icon="user" class="nav-link-icon" %}
-
+                      Profile
-             <h4>With Icons and Text</h4>
+                   </button>
-             <div class="mb-3">
+                   <button class="nav-link" role="tab">
-                {% include "ui/nav-segmented.html" items="Home,Profile,Settings" icons="home,user,settings" %}
+                      {% include "ui/icon.html" icon="settings" class="nav-link-icon" %}
+                      Settings
+                   </button>
+                </nav>
              </div>
           </div>
        </div>

preview/pages/cards.html

@@ -108,7 +108,17 @@ permalink: cards.html
 		</div>
 	</div>
 	<div class="col-md-6 col-lg-3">
-		{% include "cards/card-background-icon.html" %}
+		<div class="card bg-primary text-primary-fg">
+			<div class="card-stamp">
+				<div class="card-stamp-icon bg-white text-primary">
+					{% include "ui/icon.html" icon="star" %}
+				</div>
+			</div>
+			<div class="card-body">
+				<h3 class="card-title">Card with background and icon</h3>
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
+			</div>
+		</div>
 	</div>
 	<div class="col-md-6 col-lg-3">
 		{% include "cards/card.html" status-top="danger" title="Card with top status" %}
@@ -121,10 +131,22 @@ permalink: cards.html
 	</div>
 
 	<div class="col-md-6 col-lg-3">
-		{% include "cards/card-ribbon-top.html" %}
+		<div class="card">
+			<div class="ribbon ribbon-top bg-yellow">{% include "ui/icon.html" icon="star" %}</div>
+			<div class="card-body">
+				<h3 class="card-title">Card with top ribbon</h3>
+				<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
+			</div>
+		</div>
 	</div>
 	<div class="col-md-6 col-lg-3">
-		{% include "cards/card-ribbon-text.html" %}
+		<div class="card">
+			<div class="ribbon bg-red">NEW</div>
+			<div class="card-body">
+				<h3 class="card-title">Card with text ribbon</h3>
+				<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
+			</div>
+		</div>
 	</div>
 	<div class="col-md-6 col-lg-3">
 		{% include "cards/card.html" progress=true title="Card with progress bar" %}
@@ -177,8 +199,8 @@ permalink: cards.html
 
 	<div class="col-md-6 col-lg-4">{% include "cards/card.html" header-tabs=true %}</div>
 	<div class="col-md-6 col-lg-4">{% include "cards/card.html" header-pills=true %}</div>
-	<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" %}</div>
+	<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" count=4 %}</div>
-	<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" bottom=true id="bottom" %}</div>
+	<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" count=4 bottom=true id="bottom" %}</div>
 
 
 	<div class="col-12">
@@ -256,6 +278,5 @@ permalink: cards.html
 	</div>
 
 	<div class="col-lg-4">{% include "cards/card.html" empty=true %}</div>
-	<div class="col-lg-4">{% include "cards/empty-team.html" %}</div>
 	<div class="col-lg-4">{% include "cards/credit-card.html" %}</div>
 </div>

preview/pages/colors.html

@@ -21,7 +21,7 @@ permalink: colors.html
 					<div class="col-12">
 						<div class="row align-items-center">
 							<div class="col-auto">
-								<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg avatar-square">
+								<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
 									{{ color[1].abbr }}
 								</div>
 							</div>
@@ -44,7 +44,7 @@ permalink: colors.html
 					<div class="col-12">
 						<div class="row align-items-center">
 							<div class="col-auto">
-								<div class="avatar bg-{{ color[0] }}-lt text-{{ color[0] }}-lt-fg avatar-square">
+								<div class="avatar bg-{{ color[0] }}-lt text-{{ color[0] }}-lt-fg">
 									{{ color[1].abbr }}
 								</div>
 							</div>
@@ -67,7 +67,7 @@ permalink: colors.html
 					<div class="col-12">
 						<div class="row align-items-center">
 							<div class="col-auto">
-								<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg avatar-square">
+								<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
 									{{ color[1].abbr }}
 								</div>
 							</div>
@@ -90,7 +90,7 @@ permalink: colors.html
 					<div class="col-12">
 						<div class="row align-items-center">
 							<div class="col-auto">
-								<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg avatar-square">
+								<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
 									{% include "ui/icon.html" icon=color[1].icon %}
 								</div>
 							</div>

preview/pages/form-layout.html

@@ -7,7 +7,7 @@ permalink: form-layout.html
 page-libs: [litepicker]
 ---
 
-<div class="row row-cards row-cols-1 row-cols-md-3">
+<div class="row row-cards row-cols-1 row-cols-md-2">
 	<div class="col">
 		<div class="row row-cards">
 			<div class="col-12">
@@ -360,8 +360,4 @@ page-libs: [litepicker]
 			</div>
 		</div>
 	</div>
-
-	<div class="col">
-		{% include "cards/form/payment.html" %}
-	</div>
 </div>

preview/pages/logs.html

@@ -6,9 +6,7 @@ layout: default
 permalink: logs.html
 ---
 
-<div class="row">
+<div class="card">
-	<div class="col-lg-6">
-		<div class="card">
 	<div class="card-body">
 		<h4>
 			Checked URL
@@ -31,38 +29,4 @@ permalink: logs.html
 		<h4>Escalation</h4>
 		<div>Entire team</div>
 	</div>
-		</div>
-	</div>
-	<div class="col-lg-6">
-		<div class="card">
-			<div class="card-body">
-				<h4>
-					Application Log
-				</h4>
-				<div>
-					<pre><code>2024-01-15 14:23:45 [INFO] Application started successfully
-2024-01-15 14:23:46 [DEBUG] Database connection established
-2024-01-15 14:23:47 [INFO] User authentication successful: user_id=12345
-2024-01-15 14:23:48 [WARNING] Rate limit approaching: 85% of quota used
-2024-01-15 14:23:49 [ERROR] Failed to process payment: transaction_id=tx_789
-2024-01-15 14:23:50 [INFO] Cache cleared: keys=1523
-2024-01-15 14:23:51 [DEBUG] API request completed: endpoint=/api/users, duration=234ms</code></pre>
-				</div>
-		
-				<h4>Log Levels</h4>
-				<div>
-					<div class="mb-2">
-						{% include "ui/badge.html" text="INFO" color="success" %}
-						{% include "ui/badge.html" text="WARNING" color="warning" %}
-						{% include "ui/badge.html" text="ERROR" color="disabled" %}
-						{% include "ui/badge.html" text="DEBUG" color="disabled" %}
-					</div>
-				</div>
-			</div>
-			<div class="card-footer">
-				<h4>Log Source</h4>
-				<div>Application Server (prod-01)</div>
-			</div>
-		</div>
-	</div>
 </div>

shared/e11ty/filters.mjs

@@ -160,36 +160,31 @@ export function appFilters(eleventyConfig) {
 
 	// time ago from today
 	eleventyConfig.addFilter("timeago", function (date) {
-		let seconds;
+		const seconds = Math.floor((new Date() - date) / 1000);
-		if (typeof date === 'number') {
-			seconds = date;
-		} else {
-			seconds = Math.floor((new Date() - date) / 1000);
-		}
 
 		let interval = Math.floor(seconds / 31536000);
 
-		if (interval >= 1) {
+		if (interval > 1) {
-			return `${interval} year${interval > 1 ? 's' : ''} ago`;
+			return interval + " years ago";
 		}
 		interval = Math.floor(seconds / 2592000);
-		if (interval >= 1) {
+		if (interval > 1) {
-			return `${interval} month${interval > 1 ? 's' : ''} ago`;
+			return interval + " months ago";
 		}
 		interval = Math.floor(seconds / 86400);
-		if (interval >= 1) {
+		if (interval > 1) {
-			return `${interval} day${interval > 1 ? 's' : ''} ago`;
+			return interval + " days ago";
 		}
 		interval = Math.floor(seconds / 3600);
-		if (interval >= 1) {
+		if (interval > 1) {
-			return `${interval} hour${interval > 1 ? 's' : ''} ago`;
+			return interval + " hours ago";
 		}
 		interval = Math.floor(seconds / 60);
-		if (interval >= 1) {
+		if (interval > 1) {
-			return `${interval} minute${interval > 1 ? 's' : ''} ago`;
+			return interval + " minutes ago";
 		}
 		if (seconds > 0) {
-			return `${Math.floor(seconds)} second${Math.floor(seconds) > 1 ? 's' : ''} ago`;
+			return Math.floor(seconds) + " seconds ago";
 		}
 
 		return "now";

shared/includes/cards/card-background-icon.html

@@ -1,12 +0,0 @@
-<div class="card bg-primary text-primary-fg">
-	<div class="card-stamp">
-		<div class="card-stamp-icon bg-white text-primary">
-			{% include "ui/icon.html" icon="star" %}
-		</div>
-	</div>
-	<div class="card-body">
-		<h3 class="card-title">Card with background and icon</h3>
-		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
-	</div>
-</div>
-

shared/includes/cards/card-ribbon-text.html

@@ -1,8 +0,0 @@
-<div class="card">
-	<div class="ribbon bg-red">NEW</div>
-	<div class="card-body">
-		<h3 class="card-title">Card with text ribbon</h3>
-		<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
-	</div>
-</div>
-

shared/includes/cards/card-ribbon-top.html

@@ -1,8 +0,0 @@
-<div class="card">
-	<div class="ribbon ribbon-top bg-yellow">{% include "ui/icon.html" icon="star" %}</div>
-	<div class="card-body">
-		<h3 class="card-title">Card with top ribbon</h3>
-		<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
-	</div>
-</div>
-

shared/includes/cards/card-tabs.html

@@ -1,12 +1,12 @@
 {% assign tabs-count = include.count | default: 3 %}
 {% assign id = include.id | default: 'top' %}
-{% assign tabs = 'Activity,Profile,Settings' | split: "," %}
+{% assign tabs = (1..tabs-count) %}
 
 {% capture tabs-html %}
 <!-- Cards navigation -->
 <ul class="nav nav-tabs{% if include.bottom %} nav-tabs-bottom{% endif %}">
    {% for tab in tabs %}
-   <li class="nav-item"><a href="#tab-{{ id }}-{{ forloop.index }}" class="nav-link{% if forloop.first %} active{% endif %}" data-bs-toggle="tab">{{ tab }}</a></li>
+   <li class="nav-item"><a href="#tab-{{ id }}-{{ tab }}" class="nav-link{% if forloop.first %} active{% endif %}" data-bs-toggle="tab">Tab {{ tab }}</a></li>
    {% endfor %}
 </ul>
 {%- endcapture %}
@@ -15,9 +15,9 @@
 <div class="tab-content">
    {% for tab in tabs %}
    <!-- Content of card #{{ tab }} -->
-   <div id="tab-{{ id }}-{{ forloop.index }}" class="card tab-pane{% if forloop.first %} active show{% endif %}">
+   <div id="tab-{{ id }}-{{ tab }}" class="card tab-pane{% if forloop.first %} active show{% endif %}">
       <div class="card-body">
-         <div class="card-title">{{ tab }}</div>
+         <div class="card-title">Content of tab #{{ tab }}</div>
          <p class="text-secondary">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
          </p>

shared/includes/cards/card.html

@@ -2,7 +2,7 @@
 <{% if link %}a href="#"{% else %}div{% endif %} class="card{% if include.active %} card-active{% endif %}{% if include.inactive %} card-inactive{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
 
 	{% if include['empty'] %}
-		{% include "ui/empty.html" illustration="not-found" height=160 %}
+		{% include "ui/empty.html" illustration=true %}
 
 	{% else %}
 
@@ -78,7 +78,7 @@
 							{% when "check" %}
 								{% include "ui/form/check.html" empty=true checked=true class="m-0" %}
 							{% when "avatars" %}
-								{% include "ui/avatar-list.html" stacked=true text="+3" size="sm" %}
+								{% include "ui/avatar-list.html" stacked=true text="+3" %}
 							{% when "more" %}
 								<a href="#">More information</a>
 						{% endcase %}

shared/includes/cards/charts/revenue.html

@@ -13,5 +13,5 @@
 			</div>
 		</div>
 	</div>
-	{% include "ui/chart.html" chart-id="revenue-bg" size="sm" class="rounded-bottom-3" %}
+	{% include "ui/chart.html" chart-id="revenue-bg" size="sm" class="rounded-bottom" %}
 </div>

shared/includes/cards/empty-team.html

@@ -1,12 +0,0 @@
-<div class="card card-lg card-dashed card-transparent">
-	<div class="card-body text-center">
-		<div class="mb-3">
-         {% include "ui/avatar-list.html" stacked %}
-		</div>
-		<h3 class="card-title">No Team Members</h3>
-		<p class="text-secondary">Invite your team to<br>collaborate on this project.</p>
-		<div class="mt-4">
-			{% include "ui/button.html" text="Invite Members" color="primary" icon="plus" %}
-		</div>
-	</div>
-</div>

shared/includes/cards/form/payment.html

@@ -1,91 +0,0 @@
-<form class="card">
-	<div class="card-body">
-		<h3 class="card-title">Payment Method</h3>
-		<p class="card-subtitle mb-4">All transactions are secure and encrypted</p>
-
-		<div class="mb-3">
-			<label class="form-label">Name on Card</label>
-			<input type="text" class="form-control" placeholder="John Doe">
-		</div>
-
-		<div class="row">
-			<div class="col-8">
-				<div class="mb-3">
-					<label class="form-label">Card Number</label>
-					<input type="text" class="form-control" placeholder="1234 5678 9012 3456">
-					<small class="form-hint">Enter your 16-digit number.</small>
-				</div>
-			</div>
-			<div class="col-4">
-				<div class="mb-3">
-					<label class="form-label">CVV</label>
-					<input type="text" class="form-control" placeholder="123">
-				</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="col-6">
-				<div class="mb-3">
-					<label class="form-label">Month</label>
-					<select class="form-select">
-						<option value="">MM</option>
-						<option value="1">January</option>
-						<option value="2">February</option>
-						<option value="3">March</option>
-						<option value="4">April</option>
-						<option value="5">May</option>
-						<option value="6">June</option>
-						<option value="7">July</option>
-						<option value="8">August</option>
-						<option value="9">September</option>
-						<option value="10">October</option>
-						<option value="11">November</option>
-						<option value="12">December</option>
-					</select>
-				</div>
-			</div>
-			<div class="col-6">
-				<div class="mb-3">
-					<label class="form-label">Year</label>
-					<select class="form-select">
-						<option value="">YYYY</option>
-						<option value="2025">2025</option>
-						<option value="2026">2026</option>
-						<option value="2027">2027</option>
-						<option value="2028">2028</option>
-						<option value="2029">2029</option>
-						<option value="2030">2030</option>
-					</select>
-				</div>
-			</div>
-		</div>
-
-		<hr class="my-4" />
-
-		<h3 class="card-title">Billing Address</h3>
-		<p class="card-subtitle mb-4">The billing address associated with your payment method</p>
-
-		<div class="mb-3">
-			<label class="form-check">
-				<input class="form-check-input" type="checkbox" checked>
-				<span class="form-check-label">Same as shipping address</span>
-			</label>
-		</div>
-
-		<hr class="my-4" />
-
-		<div class="mb-3">
-			<label class="form-label">Comments</label>
-			<textarea class="form-control" rows="3" placeholder="Add any additional comments"></textarea>
-		</div>
-
-		<div class="mt-4">
-         <div class="btn-list">
-            {% include "ui/button.html" text="Submit" color="primary" %}
-            {% include "ui/button.html" text="Cancel" %}
-         </div>
-		</div>
-	</div>
-</form>
-

shared/includes/cards/small-stats.html

@@ -1,12 +1,11 @@
 {% assign chart-type = include.chart-type | default: 'line' %}
 {% assign chart-position = include.chart-position | default: 'right' %}
-{% assign chart-color = include.color | default: 'primary' %}
 <div class="card card-sm{% if include.class %} {{ include.class }}{% endif %}">
 	<div class="card-body">
 		<div class="row align-items-center">
 			{% if include.icon %}
 				<div class="col-auto">
-					<span class="{% if include.color %}bg-{{ include.color }}{% if include.lt %}-lt{% else %} text-white{% endif %}{% endif %} avatar avatar-square">{% include "ui/icon.html" icon=include.icon %}</span>
+					<span class="{% if include.color %}bg-{{ include.color }}{% if include.lt %}-lt{% else %} text-white{% endif %}{% endif %} avatar">{% include "ui/icon.html" icon=include.icon %}</span>
 				</div>
 			{% elsif include.person-id %}
 				<div class="col-auto">
@@ -31,24 +30,13 @@
 				</div>
 				<div class="text-secondary">
 					{{ include.description | default: "Users" }}
+
 				</div>
 			</div>
 
 			{% if include.chart-data and chart-position=="right" %}
 			<div class="col-auto">
-				{% include "ui/chart-sparkline.html" id=include.id data=include.chart-data type=chart-type color=chart-color label=include.chart-label label-icon=include.chart-label-icon %}
+				{% include "ui/chart-sparkline.html" id=include.id data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
-			</div>
-			{% endif %}
-
-			{% if include.trending %}
-			<div class="col-auto">
-				{% include "ui/trending.html" value=include.trending %}
-			</div>
-			{% endif %}
-
-			{% if include.button %}
-			<div class="col-auto">
-				{% include "ui/button.html" text=include.button size="sm" %}
 			</div>
 			{% endif %}
 		</div>

shared/includes/cards/tables/progressbg.html

@@ -10,12 +10,12 @@
 			</tr>
 			</thead>
 			<tbody>
-			{% for url in urls limit: 8 %}
+			{% for url in urls %}
 			<tr>
 				<td>
 					{% include "ui/progressbg.html" value=url.bounce text=url.uri %}
 				</td>
-				<td class="w-1 fw-medium text-end">{{ url.visitors }}</td>
+				<td class="w-1 fw-bold text-end">{{ url.visitors }}</td>
 			</tr>
 			{% endfor %}
 			</tbody>

shared/includes/ui/alert.html

@@ -12,7 +12,7 @@
 		{%- assign icon = 'info-circle' -%}
 	{%- endif -%}
 {%- endunless -%}
-<div class="alert{% if include.important %} alert-important{% elsif include.minor %} alert-minor{% endif %} alert-{{ type }}{%if include.show-close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}{% if include.class %} {{ include.class }}{% endif %}" role="alert">
+<div class="alert{% if include.important %} alert-important{% elsif include.minor %} alert-minor{% endif %} alert-{{ type }}{%if include.show-close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}" role="alert">
 	<div class="alert-icon">
 		{%- include "ui/icon.html" icon=icon class="alert-icon" -%}
 	</div>

shared/includes/ui/avatar.html

@@ -20,7 +20,7 @@
 {%- endif -%}
 {%- assign el = 'span' -%}
 {%- if link -%}{%- assign el = 'a' -%}{%- endif -%}
-<{{ el }} class="avatar{% if include.size %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} avatar-{{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}{% if include.square %} avatar-square{% endif %}"{% if src %} style="background-image: url({{ page | relative }}/{{ src }})"{% endif %}{% if include.dropdown %} data-bs-toggle="dropdown"{% endif %}>
+<{{ el }} class="avatar{% if include.size %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} {{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}"{% if src %} style="background-image: url({{ page | relative }}/{{ src }})"{% endif %}{% if include.dropdown %} data-bs-toggle="dropdown"{% endif %}>
 {%- if include.status -%}
 <span class="badge bg-{{ include.status }}">{% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include "ui/icon.html" icon=include.status-icon class="avatar-status-icon" %}{% endif %}</span>
 {%- endif -%}

shared/includes/ui/button.html

@@ -18,7 +18,7 @@
 {% endif %}
 
 {% assign e = include.element | default: 'a' %}
-<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %}{% if include.id %} id="{{ include.id }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% elsif include.ghost %}ghost-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.loading %} btn-loading{% endif %}{% if include.action %} btn-action{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} w-100{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank" rel="noreferrer"{% endif %}{% if include.modal-id %} data-bs-toggle="modal" data-bs-target="#modal-{{ include.modal-id }}"{% endif %}{% if include.toast-id %} data-bs-toggle="toast" data-bs-target="#toast-{{ include.toast-id }}"{% endif %}{% if include.icon-only %} aria-label="{{ include.text | default: "Button" }}"{% endif %}{% if include.dismiss %} data-bs-dismiss="modal"{% endif %}>
+<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %}{% if include.id %} id="{{ include.id }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% elsif include.ghost %}ghost-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.loading %} btn-loading{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} w-100{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank" rel="noreferrer"{% endif %}{% if include.modal-id %} data-bs-toggle="modal" data-bs-target="#modal-{{ include.modal-id }}"{% endif %}{% if include.toast-id %} data-bs-toggle="toast" data-bs-target="#toast-{{ include.toast-id }}"{% endif %}{% if include.icon-only %} aria-label="{{ include.text | default: "Button" }}"{% endif %}{% if include.dismiss %} data-bs-dismiss="modal"{% endif %}>
 {% if include.spinner %}
 {% include "ui/spinner.html" color=false size="sm" class=spinner-class element="span" %}{% endif %}
 {% if include.icon %}{% include "ui/icon.html" icon=include.icon color=include.icon-color %}{% endif %}

shared/includes/ui/card-title.html

@@ -1,10 +0,0 @@
-<div class="d-flex">
-   <h3 class="card-title{% if include.class %} {{ include.class }}{% endif %}">
-      {{ include.text | default: include.title | default: 'Card title' }}
-   </h3>
-   {% if include.more %}
-   <div class="ms-auto">
-      {% include "ui/button.html" icon="dots" size="sm" icon-only action %}
-   </div>
-   {% endif %}
-</div>

shared/includes/ui/empty.html

@@ -1,10 +1,9 @@
 {% assign icon = include.icon | default: "mood-sad" %}
-{% assign height = include.height | default: 256 %}
 <div class="empty{% if include.bordered %} empty-bordered{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
 
 	{% if include.illustration %}
 		{% assign illustration = include.illustration | default: 'boy-girl.svg' %}
-		<div class="empty-img">{% include "ui/illustration.html" image=illustration height=height %}</div>
+		<div class="empty-img">{% include "ui/illustration.html" image=illustration height="256" %}</div>
 	{% elsif include.icon-text %}
 		<div class="empty-header">{{ include.icon-text }}</div>
 	{% else %}

shared/includes/ui/nav-segmented.html

@@ -1,5 +1,5 @@
+{% assign segmented-items = include.items | default: "First,Second,Third" | split: "," %}
 {% assign segmented-icons = include.icons | default: "" | split: "," %}
-{% assign segmented-items = include.items | default: "" | split: "," %}
 {% assign segmented-disabled = include.disabled | default: "" | split: "," %}
 {% assign segmented-hover = include.hover | default: "" %}
 {% assign segmented-default = include.default | default: 1 | plus: 0 %}
@@ -18,7 +18,7 @@
 
 		{% if include.name %}<input type="radio" class="nav-link-input" name="{{ include.name }}" id="segmented-{{include.name }}-{{ index }}" {% if is-default %}checked{% endif %} />{% endif %}
 
-		<{% if include.name %}label for="segmented-{{include.name }}-{{ index }}"{% else %}button{% endif %} class="nav-link{% if disabled %} disabled{% endif %}{% if segmented-hover == index %} hover{% endif %}{% if is-default %} active{% endif %}" role="tab"{% unless include.name %} data-bs-toggle="tab"{% endunless %} aria-selected="{% if is-default %}true{% else %}false{% endif %}" {% if disabled %} aria-disabled="true"{% endif %}{% if is-default %} aria-current="page"{% endif %}>
+		<{% if include.name %}label for="segmented-{{include.name }}-{{ index }}"{% else %}button{% endif %} class="nav-link{% if disabled %} disabled{% endif %}{% if segmented-hover == index %} hover{% endif %}" role="tab"{% unless include.name %} data-bs-toggle="tab"{% endunless %} aria-selected="{% if is-default %}true{% else %}false{% endif %}" {% if disabled %} aria-disabled="true"{% endif %}{% if is-default %} aria-current="page"{% endif %}>
 			{% if segmented-icons[forloop.index0] %}
 				{% include "ui/icon.html" icon=segmented-icons[forloop.index0] class="nav-link-icon" %}
 			{% endif %}

shared/includes/ui/progressbg.html

@@ -2,6 +2,6 @@
 {% assign color = include.color | default: 'primary-lt' %}
 <div class="progressbg{% if include.class %} {{ include.class }}{% endif %}">
 	{% include "ui/progress.html" value=percentage class="progressbg-progress" color=color %}
-	{% if include.text %}<div class="progressbg-text">{% if include.flag %}{% include "ui/flag.html" flag=include.flag class="me-2" size="xs" %}{% endif %}{{ include.text }}</div>{% endif %}
+	{% if include.text %}<div class="progressbg-text">{{ include.text }}</div>{% endif %}
 	{% if include.show-value %}<div class="progressbg-value">{{ percentage }}%</div>{% endif %}
 </div>