Refactor SCSS files to implement cascade layers for better organization and maintainability. This includes defining layers for components, utilities, and forms across various SCSS files, enhancing the overall structure of the stylesheets.

.changeset/scss-layers-other-bundles.md

@@ -0,0 +1,6 @@
+---
+"@tabler/core": patch
+---
+
+Updated `tabler-vendors.css`, `tabler-themes.css`, and `tabler-marketing.css` to use CSS Cascade Layers (`@layer`) for predictable cascade ordering.
+

.cursor/rules/scss-layers.mdc

@@ -0,0 +1,140 @@
+---
+alwaysApply: false
+---
+
+## SCSS Cascade Layers Guidelines
+
+Use CSS Cascade Layers (`@layer`) to make the cascade predictable across modules (reboot/layout/forms/components/helpers/utilities), without relying on import order or widespread `!important`.
+
+### 0. Inventory: SCSS entrypoints → CSS bundles → consumers
+
+This repo produces multiple CSS bundles from multiple SCSS entrypoints. Before moving rules into layers, keep this mapping handy so you can reason about bundle-level ordering and who consumes what.
+
+#### `@tabler/core` (published bundles)
+
+- **Build tool**: Sass CLI (not Vite) compiles `core/scss/` → `core/dist/css/` via `sass scss/:dist/css/`
+- **Entrypoints (non-partials)**:
+  - `core/scss/tabler.scss` → `core/dist/css/tabler.css` (+ `tabler.min.css`, `tabler.rtl.css`, `tabler.rtl.min.css`)
+    - **Consumers**:
+      - `shared/includes/layout/css.html` (preview pages, mandatory styles)
+      - `shared/layouts/docs/default.html` (docs site)
+      - `core/package.json` exposes it via `style: dist/css/tabler.css` and `sass: scss/tabler.scss`
+  - `core/scss/tabler-flags.scss` → `core/dist/css/tabler-flags.css` (+ `.min`, `.rtl`, `.rtl.min`)
+  - `core/scss/tabler-socials.scss` → `core/dist/css/tabler-socials.css` (+ `.min`, `.rtl`, `.rtl.min`)
+  - `core/scss/tabler-payments.scss` → `core/dist/css/tabler-payments.css` (+ `.min`, `.rtl`, `.rtl.min`)
+  - `core/scss/tabler-vendors.scss` → `core/dist/css/tabler-vendors.css` (+ `.min`, `.rtl`, `.rtl.min`)
+  - `core/scss/tabler-marketing.scss` → `core/dist/css/tabler-marketing.css` (+ `.min`, `.rtl`, `.rtl.min`)
+  - `core/scss/tabler-themes.scss` → `core/dist/css/tabler-themes.css` (+ `.min`, `.rtl`, `.rtl.min`)
+  - `core/scss/tabler-props.scss` → `core/dist/css/tabler-props.css` (+ `.min`, `.rtl`, `.rtl.min`)
+    - **Note**: currently not included by default layouts (it exists as a separate bundle and is covered by SRI generation).
+- **Plugin consumers**:
+  - Preview pages: `shared/includes/layout/css.html` loads `tabler-{{ plugin }}` for each plugin in `shared/data/site.json` (`cssPlugins`).
+  - Docs site: `shared/layouts/docs/default.html` loads the same plugin list.
+- **Copying into static sites**:
+  - `preview/eleventy.config.mjs` and `docs/eleventy.config.mjs` both `addPassthroughCopy({ "node_modules/@tabler/core/dist": "dist" })`, so core bundles are available at `/dist/css/...` in those sites.
+
+#### `@tabler/preview` (preview-only bundle)
+
+- **Build tool**: Sass CLI compiles `preview/scss/` → `preview/dist/preview/css/` via `sass scss/:dist/preview/css/`
+- **Entrypoints**:
+  - `preview/scss/demo.scss` → `preview/dist/preview/css/demo.css` (+ `.min`)
+    - **Consumer**: `shared/includes/layout/css.html` loads it as `/preview/css/demo...`
+
+#### `@tabler/docs` (docs-only bundle)
+
+- **Build tool**: Sass CLI compiles `docs/scss/` → `docs/dist/css/` via `sass scss/:dist/css/`
+- **Entrypoints**:
+  - `docs/scss/docs.scss` → `docs/dist/css/docs.css` (+ `.min`)
+    - **Consumer**: `shared/layouts/docs/default.html` loads it as `/css/docs...`
+
+### 1. Canonical layer order (single source of truth)
+
+- Define the layer order exactly once in the main entrypoint (e.g. the file that builds the final CSS bundle).
+- Do not redefine the global ordering in multiple places.
+- Keep the names stable (typos create new layers and break the intended cascade).
+
+**Recommended order (based on Bootstrap v6 CSS layers work):**
+
+```scss
+@layer colors, theme, config, root, reboot, layout, content, forms, components, helpers, custom, utilities;
+```
+
+### 2. Naming rules
+
+- Use lowercase, ASCII names.
+- Use the canonical names only:
+  - `colors`, `theme`, `config`, `root`, `reboot`, `layout`, `content`, `forms`, `components`, `helpers`, `custom`, `utilities`
+- Never introduce new layer names without updating the canonical ordering and documenting the reasoning.
+- Treat any misspelling (e.g. `componenents`) as a **blocker**: it creates a separate layer and changes cascade behavior.
+
+### 3. File-to-layer mapping (convention)
+
+Use one layer per partial whenever the file outputs CSS rules.
+
+- **Reboot/reset**: `scss/content/_reboot.scss` → `@layer reboot`
+- **Content styles**: `scss/content/*` → `@layer content`
+- **Form styles**: `scss/forms/*` → `@layer forms`
+- **Helpers**: `scss/helpers/*` → `@layer helpers`
+- **Layout**: `scss/layout/*` → `@layer layout`
+- **Components**: component partials (e.g. `scss/_buttons.scss`, `scss/_modal.scss`) → `@layer components`
+- **Utilities**: utility output → `@layer utilities` (should be last/highest layer)
+- **Project overrides/adapters**: local overrides → `@layer custom`
+
+### 4. How to refactor a partial
+
+- Wrap the file’s CSS output in a single `@layer <name> { ... }` block.
+- Keep Sass-only constructs (e.g. `@use`, variables, functions, mixins) outside the layer when it improves clarity.
+- Keep `@keyframes` inside the same layer as the rules that use them.
+
+**Good example**
+
+```scss
+@use "mixins/foo" as *;
+
+@layer components {
+  .component {
+    display: block;
+  }
+
+  @keyframes component-spin {
+    to { transform: rotate(360deg); }
+  }
+}
+```
+
+**Bad example (creates an unintended layer due to typo)**
+
+```scss
+@layer componenents {
+  .component { display: block; }
+}
+```
+
+### 5. Strategy for `:root` and CSS variables
+
+Choose one strategy and apply it consistently:
+
+- **Layered root (recommended for predictability)**: put `:root { ... }` in `@layer root { ... }`.
+- **Unlayered root (explicit exception)**: keep `:root` outside layers and document why (it will participate in the unlayered cascade).
+
+Do not mix both approaches within the same codebase.
+
+### 6. Utilities and `!important`
+
+- Prefer putting utility output in the `utilities` layer (highest) instead of adding `!important`.
+- If `!important` is still needed, keep it limited and document the exception (utilities are expected to win via layer order).
+
+### 7. Review checklist (must-pass)
+
+- **Layer order** is declared once and uses the canonical names.
+- **No typos** in layer names (any unknown layer name is a blocker).
+- Each refactored partial that emits CSS rules is wrapped in the correct `@layer`.
+- No accidental unlayered rules were introduced (unless explicitly documented as an exception).
+- Bundle size budgets are updated if `@layer` increases output size (e.g. bundlewatch thresholds).
+
+### 8. Anti-patterns
+
+- Mixing multiple layers inside one partial without a clear need.
+- Adding new layer names ad-hoc.
+- Relying on import order to “fix” layer behavior.
+- Adding `!important` broadly instead of using the `utilities` layer strategy.

core/scss/_bootstrap-components.scss

@@ -1,30 +1,48 @@
-// Layout & components
-@import 'bootstrap/scss/root';
-@import 'bootstrap/scss/reboot';
-@import 'bootstrap/scss/type';
-@import 'bootstrap/scss/images';
-@import 'bootstrap/scss/containers';
-@import 'bootstrap/scss/grid';
-@import 'bootstrap/scss/tables';
-@import 'bootstrap/scss/forms';
-@import 'bootstrap/scss/buttons';
-@import 'bootstrap/scss/transitions';
-@import 'bootstrap/scss/dropdown';
-@import 'bootstrap/scss/button-group';
-@import 'bootstrap/scss/nav';
-@import 'bootstrap/scss/navbar';
-@import 'bootstrap/scss/card';
-@import 'bootstrap/scss/pagination';
-@import 'bootstrap/scss/progress';
-@import 'bootstrap/scss/list-group';
-@import 'bootstrap/scss/toasts';
-@import 'bootstrap/scss/modal';
-@import 'bootstrap/scss/tooltip';
-@import 'bootstrap/scss/popover';
-@import 'bootstrap/scss/carousel';
-@import 'bootstrap/scss/spinners';
-@import 'bootstrap/scss/offcanvas';
-@import 'bootstrap/scss/placeholders';
+// Bootstrap (CSS Cascade Layers)
+@layer root {
+  @import 'bootstrap/scss/root';
+}
 
-// Utilities
-@import 'bootstrap/scss/utilities/api';
+@layer reboot {
+  @import 'bootstrap/scss/reboot';
+}
+
+@layer content {
+  @import 'bootstrap/scss/type';
+  @import 'bootstrap/scss/images';
+  @import 'bootstrap/scss/tables';
+}
+
+@layer layout {
+  @import 'bootstrap/scss/containers';
+  @import 'bootstrap/scss/grid';
+  @import 'bootstrap/scss/nav';
+  @import 'bootstrap/scss/navbar';
+}
+
+@layer forms {
+  @import 'bootstrap/scss/forms';
+}
+
+@layer components {
+  @import 'bootstrap/scss/buttons';
+  @import 'bootstrap/scss/transitions';
+  @import 'bootstrap/scss/dropdown';
+  @import 'bootstrap/scss/button-group';
+  @import 'bootstrap/scss/card';
+  @import 'bootstrap/scss/pagination';
+  @import 'bootstrap/scss/progress';
+  @import 'bootstrap/scss/list-group';
+  @import 'bootstrap/scss/toasts';
+  @import 'bootstrap/scss/modal';
+  @import 'bootstrap/scss/tooltip';
+  @import 'bootstrap/scss/popover';
+  @import 'bootstrap/scss/carousel';
+  @import 'bootstrap/scss/spinners';
+  @import 'bootstrap/scss/offcanvas';
+  @import 'bootstrap/scss/placeholders';
+}
+
+@layer utilities {
+  @import 'bootstrap/scss/utilities/api';
+}

core/scss/_layers.scss

@@ -0,0 +1,3 @@
+// Canonical CSS Cascade Layers order.
+// Keep in sync with `.cursor/rules/scss-layers.mdc`.
+@layer colors, theme, config, root, reboot, layout, content, forms, components, helpers, custom, utilities;

core/scss/_props.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @import 'config';
 
+@layer root {
 :root,
 :host {
   /** Fonts */
@@ -91,3 +92,4 @@
   --#{$prefix}backdrop-blur: #{$backdrop-blur};
   --#{$prefix}backdrop-filter: blur(var(--#{$prefix}backdrop-blur));
 }
+}

core/scss/fonts/_geist.scss

@@ -1,3 +1,4 @@
+@layer root {
 // Geist Sans Font Family
 @font-face {
   font-family: 'Geist';
@@ -201,3 +202,5 @@
   font-style: normal;
   font-display: swap;
 }
+
+}

core/scss/helpers/_index.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 
+@layer helpers {
 //
 // Clearfix
 //
@@ -142,3 +143,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/_animations.scss

@@ -1,3 +1,4 @@
+@layer layout {
 @keyframes pulse {
   0% {
     transform: scale(1);
@@ -96,3 +97,4 @@
     transform: scaleX(1);
   }
 }
+}

core/scss/layout/_core.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 
+@layer layout {
 html {
   scrollbar-gutter: stable;
 
@@ -74,3 +75,4 @@ body {
     }
   }
 }
+}

core/scss/layout/_dark.scss

@@ -2,6 +2,7 @@
 
 // stylelint-disable declaration-no-important
 
+@layer layout {
 @if $enable-dark-mode {
   :root {
     &:not(.theme-dark):not([data-bs-theme='dark']) {
@@ -67,3 +68,4 @@
     @extend [data-bs-theme='dark'];
   }
 }
+}

core/scss/layout/_footer.scss

@@ -1,3 +1,4 @@
+@layer layout {
 .footer {
   border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $footer-border-color;
   background-color: $footer-bg;
@@ -14,3 +15,4 @@
   background-color: transparent;
   border-top: 0;
 }
+}

core/scss/layout/_navbar.scss

@@ -76,6 +76,7 @@
   }
 }
 
+@layer layout {
 /**
 Navbar
  */
@@ -391,3 +392,4 @@ Navbar vertical
     box-shadow: inherit;
   }
 }
+}

core/scss/layout/_page.scss

@@ -1,3 +1,4 @@
+@layer layout {
 .page {
   display: flex;
   flex-direction: column;
@@ -167,3 +168,4 @@
     margin-top: 0;
   }
 }
+}

core/scss/layout/_root.scss

@@ -1,3 +1,4 @@
+@layer root {
 :root,
 :host {
   font-size: 16px;
@@ -60,3 +61,4 @@
     --#{$prefix}page-padding: #{$page-padding-sm};
   }
 }
+}

core/scss/marketing/_browser.scss

@@ -1,69 +1,71 @@
 //
 // Browser
 //
-.browser {
-  border-radius: var(--#{$prefix}border-radius-lg);
-  box-shadow: 0 0 0 1px var(--#{$prefix}border-color);
-  background: var(--#{$prefix}bg-surface-secondary);
-  overflow: hidden;
-}
+@layer components {
+  .browser {
+    border-radius: var(--#{$prefix}border-radius-lg);
+    box-shadow: 0 0 0 1px var(--#{$prefix}border-color);
+    background: var(--#{$prefix}bg-surface-secondary);
+    overflow: hidden;
+  }
 
-.browser-header {
-  padding: 0.25rem 1rem;
-  background: var(--#{$prefix}border-color-light) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03));
-  border-bottom: 1px solid var(--#{$prefix}border-color);
-  border-radius: calc(var(--#{$prefix}border-radius-lg) - 1px) calc(var(--#{$prefix}border-radius-lg) - 1px) 0 0;
-}
+  .browser-header {
+    padding: 0.25rem 1rem;
+    background: var(--#{$prefix}border-color-light) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03));
+    border-bottom: 1px solid var(--#{$prefix}border-color);
+    border-radius: calc(var(--#{$prefix}border-radius-lg) - 1px) calc(var(--#{$prefix}border-radius-lg) - 1px) 0 0;
+  }
 
-.browser-dots {
-  margin-inline-end: 3rem;
-  display: flex;
-}
+  .browser-dots {
+    margin-inline-end: 3rem;
+    display: flex;
+  }
+
+  .browser-dots-colored {
+    .browser-dot {
+      &:nth-child(1) {
+        background: #fb6058;
+      }
+
+      &:nth-child(2) {
+        background: #fcbe3b;
+      }
+
+      &:nth-child(3) {
+        background: #2ccb4c;
+      }
+    }
+  }
 
-.browser-dots-colored {
   .browser-dot {
-    &:nth-child(1) {
-      background: #fb6058;
-    }
-
-    &:nth-child(2) {
-      background: #fcbe3b;
-    }
-
-    &:nth-child(3) {
-      background: #2ccb4c;
-    }
+    margin-inline-end: 0.5rem;
+    width: 0.75rem;
+    min-width: 0.75rem;
+    height: 0.75rem;
+    background: var(--#{$prefix}border-color);
+    border-radius: 50%;
+    border: 1px solid var(--#{$prefix}border-color-dark);
   }
-}
 
-.browser-dot {
-  margin-inline-end: 0.5rem;
-  width: 0.75rem;
-  min-width: 0.75rem;
-  height: 0.75rem;
-  background: var(--#{$prefix}border-color);
-  border-radius: 50%;
-  border: 1px solid var(--#{$prefix}border-color-dark);
-}
-
-.browser-input {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  padding: 0.25rem;
-  color: var(--#{$prefix}secondary);
-  font-size: var(--#{$prefix}font-size-h5);
-  border-radius: var(--#{$prefix}border-radius);
-  line-height: 1;
-  cursor: pointer;
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.05),
-    0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  background-image: linear-gradient(to bottom, var(--#{$prefix}bg-surface), var(--#{$prefix}bg-surface-secondary));
-
-  &:hover {
+  .browser-input {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     text-decoration: none;
+    padding: 0.25rem;
+    color: var(--#{$prefix}secondary);
+    font-size: var(--#{$prefix}font-size-h5);
+    border-radius: var(--#{$prefix}border-radius);
+    line-height: 1;
+    cursor: pointer;
+    box-shadow:
+      0 0 0 1px rgba(0, 0, 0, 0.05),
+      0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    background-image: linear-gradient(to bottom, var(--#{$prefix}bg-surface), var(--#{$prefix}bg-surface-secondary));
+
+    &:hover {
+      text-decoration: none;
+    }
   }
 }

core/scss/marketing/_core.scss

@@ -1,8 +1,10 @@
-.body-marketing {
-  --#{$prefix}body-font-size: 1rem;
-  --#{$prefix}body-line-height: 1.75;
-}
+@layer components {
+  .body-marketing {
+    --#{$prefix}body-font-size: 1rem;
+    --#{$prefix}body-line-height: 1.75;
+  }
 
-.body-gradient {
-  background: var(--#{$prefix}bg-surface) linear-gradient(to bottom, var(--#{$prefix}bg-surface-secondary) 12%, var(--#{$prefix}bg-surface) 99%) repeat-x top center/100% 100vh;
+  .body-gradient {
+    background: var(--#{$prefix}bg-surface) linear-gradient(to bottom, var(--#{$prefix}bg-surface-secondary) 12%, var(--#{$prefix}bg-surface) 99%) repeat-x top center/100% 100vh;
+  }
 }

core/scss/marketing/_hero.scss

@@ -1,69 +1,71 @@
 //
 // Hero
 //
-.hero {
-  text-align: center;
-  padding: 6.5rem 0;
-}
-
-.hero-title {
-  font-size: 3rem;
-  font-weight: var(--#{$prefix}font-weight-black);
-  letter-spacing: $spacing-tight;
-  line-height: $headings-line-height;
-
-  @include media-breakpoint-down(md) {
-    font-size: 2rem;
+@layer components {
+  .hero {
+    text-align: center;
+    padding: 6.5rem 0;
   }
-}
 
-.hero-description {
-  color: var(--#{$prefix}secondary);
-  font-size: var(--#{$prefix}font-size-h2);
-  line-height: 1.5;
-  margin: 0 auto;
-  max-width: 45rem;
+  .hero-title {
+    font-size: 3rem;
+    font-weight: var(--#{$prefix}font-weight-black);
+    letter-spacing: $spacing-tight;
+    line-height: $headings-line-height;
 
-  @include media-breakpoint-down(sm) {
-    font-size: var(--#{$prefix}font-size-h3);
+    @include media-breakpoint-down(md) {
+      font-size: 2rem;
+    }
   }
-}
 
-.hero-description-wide {
-  max-width: 61.875rem;
-}
+  .hero-description {
+    color: var(--#{$prefix}secondary);
+    font-size: var(--#{$prefix}font-size-h2);
+    line-height: 1.5;
+    margin: 0 auto;
+    max-width: 45rem;
 
-//
-// Hero subheader
-//
-.hero-subheader {
-  @include subheader;
-  margin-bottom: 0.5rem;
-}
+    @include media-breakpoint-down(sm) {
+      font-size: var(--#{$prefix}font-size-h3);
+    }
+  }
 
-.hero-img {
-  margin: 4rem auto;
-  max-width: 65rem;
-  border-radius: $border-radius-lg;
-  position: relative;
-  z-index: 1;
-  //box-shadow: 0 10px 15px -3px rgba($color-text, 0.1),
-  //  0 4px 6px -2px rgba($color-text, 0.05);
+  .hero-description-wide {
+    max-width: 61.875rem;
+  }
 
-  img,
-  svg {
-    max-width: 100%;
-    height: auto;
-    display: block;
+  //
+  // Hero subheader
+  //
+  .hero-subheader {
+    @include subheader;
+    margin-bottom: 0.5rem;
+  }
+
+  .hero-img {
+    margin: 4rem auto;
+    max-width: 65rem;
+    border-radius: $border-radius-lg;
     position: relative;
+    z-index: 1;
+    //box-shadow: 0 10px 15px -3px rgba($color-text, 0.1),
+    //  0 4px 6px -2px rgba($color-text, 0.05);
+
+    img,
+    svg {
+      max-width: 100%;
+      height: auto;
+      display: block;
+      position: relative;
+    }
   }
+  //
+  //.hero-img-side {
+  //  img,
+  //  svg {
+  //    max-width: 100%;
+  //    height: auto;
+  //    display: block;
+  //  }
+  //}
 }
-//
-//.hero-img-side {
-//  img,
-//  svg {
-//    max-width: 100%;
-//    height: auto;
-//    display: block;
-//  }
-//}

core/scss/marketing/_pricing.scss

@@ -1,111 +1,113 @@
 $pricing-card-width: 22rem;
 
-.pricing {
-  display: flex;
-  flex-direction: column;
-  margin: 0 auto;
-  justify-content: center;
-
-  @include media-breakpoint-up(md) {
-    flex-direction: row;
-  }
-}
-
-.pricing-card {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  background: var(--#{$prefix}bg-surface);
-  border: 1px solid $border-color;
-  padding: 2rem;
-  margin: 0 0 1rem;
-  position: relative;
-  box-shadow: $box-shadow-card;
-  text-align: center;
-  border-radius: $border-radius-lg;
-
-  @include media-breakpoint-up(md) {
-    margin: 1rem -1px;
-    max-width: $pricing-card-width;
-
-    &:first-child {
-      border-radius: $border-radius-lg 0 0 $border-radius-lg;
-    }
-
-    &:last-child {
-      border-radius: 0 $border-radius-lg $border-radius-lg 0;
-    }
-  }
-
-  &.featured {
-    z-index: 1;
-    border: 2px solid var(--#{$prefix}primary);
-    order: -1;
+@layer components {
+  .pricing {
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    justify-content: center;
 
     @include media-breakpoint-up(md) {
-      order: unset;
-      margin-top: 0;
-      margin-bottom: 0;
-      box-shadow: $box-shadow-card;
-      border-radius: $border-radius-lg;
+      flex-direction: row;
+    }
+  }
+
+  .pricing-card {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: var(--#{$prefix}bg-surface);
+    border: 1px solid $border-color;
+    padding: 2rem;
+    margin: 0 0 1rem;
+    position: relative;
+    box-shadow: $box-shadow-card;
+    text-align: center;
+    border-radius: $border-radius-lg;
+
+    @include media-breakpoint-up(md) {
+      margin: 1rem -1px;
+      max-width: $pricing-card-width;
+
+      &:first-child {
+        border-radius: $border-radius-lg 0 0 $border-radius-lg;
+      }
+
+      &:last-child {
+        border-radius: 0 $border-radius-lg $border-radius-lg 0;
+      }
+    }
+
+    &.featured {
+      z-index: 1;
+      border: 2px solid var(--#{$prefix}primary);
+      order: -1;
+
+      @include media-breakpoint-up(md) {
+        order: unset;
+        margin-top: 0;
+        margin-bottom: 0;
+        box-shadow: $box-shadow-card;
+        border-radius: $border-radius-lg;
+      }
+    }
+  }
+
+  .pricing-title {
+    font-size: $h2-font-size;
+    line-height: $h2-line-height;
+  }
+
+  .pricing-label {
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    transform: translateY(-50%);
+    vertical-align: bottom;
+    inset-inline-end: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .pricing-btn {
+    margin-top: auto;
+    padding-top: 2rem;
+  }
+
+  .pricing-price {
+    display: flex;
+    justify-content: center;
+    font-size: 2.5rem;
+    line-height: 1;
+    font-weight: $font-weight-semibold;
+    margin: 0.75rem 0;
+  }
+
+  .pricing-price-currency {
+    font-size: $h2-font-size;
+    line-height: 1.5;
+    margin-inline-end: 0.25rem;
+    font-weight: $font-weight-semibold;
+  }
+
+  .pricing-price-description {
+    font-size: $h4-font-size;
+    line-height: $h4-line-height;
+    font-weight: $font-weight-normal;
+    color: $text-secondary;
+    align-self: center;
+    margin-inline-start: 0.5rem;
+  }
+
+  .pricing-features {
+    margin: 1rem 0 0;
+    padding: 0;
+    list-style: none;
+    text-align: start;
+
+    > li:not(:first-child) {
+      margin-top: 0.25rem;
     }
   }
 }
-
-.pricing-title {
-  font-size: $h2-font-size;
-  line-height: $h2-line-height;
-}
-
-.pricing-label {
-  position: absolute;
-  top: 0;
-  inset-inline-start: 0;
-  transform: translateY(-50%);
-  vertical-align: bottom;
-  inset-inline-end: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pricing-btn {
-  margin-top: auto;
-  padding-top: 2rem;
-}
-
-.pricing-price {
-  display: flex;
-  justify-content: center;
-  font-size: 2.5rem;
-  line-height: 1;
-  font-weight: $font-weight-semibold;
-  margin: 0.75rem 0;
-}
-
-.pricing-price-currency {
-  font-size: $h2-font-size;
-  line-height: 1.5;
-  margin-inline-end: 0.25rem;
-  font-weight: $font-weight-semibold;
-}
-
-.pricing-price-description {
-  font-size: $h4-font-size;
-  line-height: $h4-line-height;
-  font-weight: $font-weight-normal;
-  color: $text-secondary;
-  align-self: center;
-  margin-inline-start: 0.5rem;
-}
-
-.pricing-features {
-  margin: 1rem 0 0;
-  padding: 0;
-  list-style: none;
-  text-align: start;
-
-  > li:not(:first-child) {
-    margin-top: 0.25rem;
-  }
-}

core/scss/marketing/_sections.scss

@@ -1,124 +1,126 @@
-@keyframes move-forever1 {
-  0% {
-    transform: translate(85px, 0%);
+@layer components {
+  @keyframes move-forever1 {
+    0% {
+      transform: translate(85px, 0%);
+    }
+
+    100% {
+      transform: translate(-90px, 0%);
+    }
   }
 
-  100% {
-    transform: translate(-90px, 0%);
-  }
-}
+  @keyframes move-forever2 {
+    0% {
+      transform: translate(-90px, 0%);
+    }
 
-@keyframes move-forever2 {
-  0% {
-    transform: translate(-90px, 0%);
+    100% {
+      transform: translate(85px, 0%);
+    }
   }
 
-  100% {
-    transform: translate(85px, 0%);
-  }
-}
+  @keyframes move-forever3 {
+    0% {
+      transform: translate(-90px, 0%);
+    }
 
-@keyframes move-forever3 {
-  0% {
-    transform: translate(-90px, 0%);
+    100% {
+      transform: translate(85px, 0%);
+    }
   }
 
-  100% {
-    transform: translate(85px, 0%);
-  }
-}
-
-//
-// Sections
-//
-.section {
-  --section-bg: transparent;
-  background: var(--section-bg);
-  position: relative;
-  padding: 5rem 0;
-}
-
-.section-sm {
-  padding: 4rem 0;
-}
-
-.section-white {
-  --section-bg: var(--#{$prefix}bg-surface);
-}
-
-.section-light {
-  --section-bg: var(--#{$prefix}bg-surface-secondary);
-}
-
-.section-primary {
-  --section-bg: var(--#{$prefix}primary);
-  color: $white;
-}
-
-.section-dark {
-  --section-bg: var(--#{$prefix}dark);
-  color: $white;
-}
-
-.section-header {
-  text-align: center;
-  max-width: 45rem;
-  margin: 0 auto 5rem;
-
-  @at-root .section-sm & {
-    margin-bottom: 4rem;
-  }
-}
-
-.section-title {
-  font-size: var(--#{$prefix}font-size-h1);
-  font-weight: var(--#{$prefix}font-weight-semibold);
-  line-height: 1.2;
-}
-
-.section-title-lg {
-  font-size: 2rem;
-}
-
-.section-description {
-  color: var(--#{$prefix}secondary);
-  font-size: var(--#{$prefix}font-size-h3);
-  line-height: var(--#{$prefix}line-height-h3);
-  margin-top: 1rem;
-}
-
-//
-// Section divider
-//
-.section-divider {
-  position: absolute;
-  bottom: 100%;
-  pointer-events: none;
-  height: 5rem;
-  width: 100%;
-
-  path {
-    fill: var(--section-bg);
+  //
+  // Sections
+  //
+  .section {
+    --section-bg: transparent;
+    background: var(--section-bg);
+    position: relative;
+    padding: 5rem 0;
   }
 
-  .wave-1 {
-    animation: move-forever1 30s linear infinite;
-    animation-delay: -2s;
+  .section-sm {
+    padding: 4rem 0;
   }
 
-  .wave-2 {
-    animation: move-forever2 24s linear infinite;
-    opacity: 0.5;
-    animation-delay: -2s;
+  .section-white {
+    --section-bg: var(--#{$prefix}bg-surface);
   }
 
-  .wave-3 {
-    animation: move-forever3 18s linear infinite;
-    opacity: 0.3;
-    animation-delay: -2s;
+  .section-light {
+    --section-bg: var(--#{$prefix}bg-surface-secondary);
+  }
+
+  .section-primary {
+    --section-bg: var(--#{$prefix}primary);
+    color: $white;
+  }
+
+  .section-dark {
+    --section-bg: var(--#{$prefix}dark);
+    color: $white;
+  }
+
+  .section-header {
+    text-align: center;
+    max-width: 45rem;
+    margin: 0 auto 5rem;
+
+    @at-root .section-sm & {
+      margin-bottom: 4rem;
+    }
+  }
+
+  .section-title {
+    font-size: var(--#{$prefix}font-size-h1);
+    font-weight: var(--#{$prefix}font-weight-semibold);
+    line-height: 1.2;
+  }
+
+  .section-title-lg {
+    font-size: 2rem;
+  }
+
+  .section-description {
+    color: var(--#{$prefix}secondary);
+    font-size: var(--#{$prefix}font-size-h3);
+    line-height: var(--#{$prefix}line-height-h3);
+    margin-top: 1rem;
+  }
+
+  //
+  // Section divider
+  //
+  .section-divider {
+    position: absolute;
+    bottom: 100%;
+    pointer-events: none;
+    height: 5rem;
+    width: 100%;
+
+    path {
+      fill: var(--section-bg);
+    }
+
+    .wave-1 {
+      animation: move-forever1 30s linear infinite;
+      animation-delay: -2s;
+    }
+
+    .wave-2 {
+      animation: move-forever2 24s linear infinite;
+      opacity: 0.5;
+      animation-delay: -2s;
+    }
+
+    .wave-3 {
+      animation: move-forever3 18s linear infinite;
+      opacity: 0.3;
+      animation-delay: -2s;
+    }
+  }
+
+  .section-divider-auto {
+    height: auto;
   }
 }
-
-.section-divider-auto {
-  height: auto;
-}

core/scss/marketing/_shape.scss

@@ -1,33 +1,35 @@
 @use 'sass:map';
 
-.shape {
-  --#{$prefix}shape-size: #{$avatar-size};
-  --#{$prefix}shape-icon-size: #{$avatar-icon-size};
-  background-color: var(--#{$prefix}primary-lt);
-  color: var(--#{$prefix}primary);
-  border-radius: 35%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: var(--#{$prefix}shape-size);
-  width: var(--#{$prefix}shape-size);
+@layer components {
+  .shape {
+    --#{$prefix}shape-size: #{$avatar-size};
+    --#{$prefix}shape-icon-size: #{$avatar-icon-size};
+    background-color: var(--#{$prefix}primary-lt);
+    color: var(--#{$prefix}primary);
+    border-radius: 35%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--#{$prefix}shape-size);
+    width: var(--#{$prefix}shape-size);
 
-  .icon {
-    width: var(--#{$prefix}shape-icon-size);
-    height: var(--#{$prefix}shape-icon-size);
-  }
-}
-
-@each $avatar-size, $size in $avatar-sizes {
-  .shape-#{$avatar-size} {
-    --#{$prefix}shape-size: #{map.get($size, size)};
-    --#{$prefix}shape-icon-size: #{map.get($size, icon-size)};
-  }
-}
-
-@each $name, $color in $colors {
-  .shape-#{$name} {
-    background: var(--#{$prefix}#{$name}-lt);
-    color: var(--#{$prefix}#{$name});
+    .icon {
+      width: var(--#{$prefix}shape-icon-size);
+      height: var(--#{$prefix}shape-icon-size);
+    }
+  }
+
+  @each $avatar-size, $size in $avatar-sizes {
+    .shape-#{$avatar-size} {
+      --#{$prefix}shape-size: #{map.get($size, size)};
+      --#{$prefix}shape-icon-size: #{map.get($size, icon-size)};
+    }
+  }
+
+  @each $name, $color in $colors {
+    .shape-#{$name} {
+      background: var(--#{$prefix}#{$name}-lt);
+      color: var(--#{$prefix}#{$name});
+    }
   }
 }

core/scss/tabler-flags.scss

@@ -1 +1,3 @@
+@use 'layers';
+
 @import 'ui/flags';

core/scss/tabler-marketing.scss

@@ -1,3 +1,5 @@
+@use 'layers';
+
 @import 'config';
 @import 'variables';
 @import 'utilities-marketing';
@@ -10,4 +12,6 @@
 @import 'marketing/pricing';
 @import 'marketing/shape';
 
-@import 'bootstrap/scss/utilities/api';
+@layer utilities {
+  @import 'bootstrap/scss/utilities/api';
+}

core/scss/tabler-payments.scss

@@ -1 +1,3 @@
+@use 'layers';
+
 @forward 'ui/payments';

core/scss/tabler-props.scss

@@ -1 +1,3 @@
+@use 'layers';
+
 @import 'props';

core/scss/tabler-socials.scss

@@ -1 +1,3 @@
+@use 'layers';
+
 @import 'ui/social';

core/scss/tabler-themes.scss

@@ -1,121 +1,125 @@
+@use 'layers';
+
 @import 'config';
 
-[data-bs-theme-base='slate'] {
-  --#{$prefix}gray-50: #f8fafc;
-  --#{$prefix}gray-100: #f1f5f9;
-  --#{$prefix}gray-200: #e2e8f0;
-  --#{$prefix}gray-300: #cbd5e1;
-  --#{$prefix}gray-400: #94a3b8;
-  --#{$prefix}gray-500: #64748b;
-  --#{$prefix}gray-600: #475569;
-  --#{$prefix}gray-700: #334155;
-  --#{$prefix}gray-800: #1e293b;
-  --#{$prefix}gray-900: #0f172a;
-  --#{$prefix}gray-950: #020617;
-}
-
-[data-bs-theme-base='gray'] {
-  --#{$prefix}gray-50: $gray-50;
-  --#{$prefix}gray-100: $gray-100;
-  --#{$prefix}gray-200: $gray-200;
-  --#{$prefix}gray-300: $gray-300;
-  --#{$prefix}gray-400: $gray-400;
-  --#{$prefix}gray-500: $gray-500;
-  --#{$prefix}gray-600: $gray-600;
-  --#{$prefix}gray-700: $gray-700;
-  --#{$prefix}gray-800: $gray-800;
-  --#{$prefix}gray-900: $gray-900;
-  --#{$prefix}gray-950: $gray-950;
-}
-
-[data-bs-theme-base='zinc'] {
-  --#{$prefix}gray-50: #fafafa;
-  --#{$prefix}gray-100: #f4f4f5;
-  --#{$prefix}gray-200: #e4e4e7;
-  --#{$prefix}gray-300: #d4d4d8;
-  --#{$prefix}gray-400: #a1a1aa;
-  --#{$prefix}gray-500: #71717a;
-  --#{$prefix}gray-600: #52525b;
-  --#{$prefix}gray-700: #3f3f46;
-  --#{$prefix}gray-800: #27272a;
-  --#{$prefix}gray-900: #18181b;
-  --#{$prefix}gray-950: #09090b;
-}
-
-[data-bs-theme-base='neutral'] {
-  --#{$prefix}gray-50: #fafafa;
-  --#{$prefix}gray-100: #f5f5f5;
-  --#{$prefix}gray-200: #e5e5e5;
-  --#{$prefix}gray-300: #d4d4d4;
-  --#{$prefix}gray-400: #a3a3a3;
-  --#{$prefix}gray-500: #737373;
-  --#{$prefix}gray-600: #525252;
-  --#{$prefix}gray-700: #404040;
-  --#{$prefix}gray-800: #262626;
-  --#{$prefix}gray-900: #171717;
-  --#{$prefix}gray-950: #0a0a0a;
-}
-
-[data-bs-theme-base='stone'] {
-  --#{$prefix}gray-50: #fafaf9;
-  --#{$prefix}gray-100: #f5f5f4;
-  --#{$prefix}gray-200: #e7e5e4;
-  --#{$prefix}gray-300: #d6d3d1;
-  --#{$prefix}gray-400: #a8a29e;
-  --#{$prefix}gray-500: #78716c;
-  --#{$prefix}gray-600: #57534e;
-  --#{$prefix}gray-700: #44403c;
-  --#{$prefix}gray-800: #292524;
-  --#{$prefix}gray-900: #1c1917;
-  --#{$prefix}gray-950: #0c0a09;
-}
-
-[data-bs-theme-base='pink'] {
-  --#{$prefix}gray-50: #fdf2f8;
-  --#{$prefix}gray-100: #fce7f3;
-  --#{$prefix}gray-200: #fbcfe8;
-  --#{$prefix}gray-300: #f9a8d4;
-  --#{$prefix}gray-400: #f472b6;
-  --#{$prefix}gray-500: #ec4899;
-  --#{$prefix}gray-600: #db2777;
-  --#{$prefix}gray-700: #be185d;
-  --#{$prefix}gray-800: #9d174d;
-  --#{$prefix}gray-900: #831843;
-  --#{$prefix}gray-950: #500724;
-}
-
-@each $name, $value in $extra-colors {
-  [data-bs-theme-primary='#{$name}'] {
-    --#{$prefix}primary: #{$value};
-    --#{$prefix}primary-rgb: #{to-rgb($value)};
+@layer theme {
+  [data-bs-theme-base='slate'] {
+    --#{$prefix}gray-50: #f8fafc;
+    --#{$prefix}gray-100: #f1f5f9;
+    --#{$prefix}gray-200: #e2e8f0;
+    --#{$prefix}gray-300: #cbd5e1;
+    --#{$prefix}gray-400: #94a3b8;
+    --#{$prefix}gray-500: #64748b;
+    --#{$prefix}gray-600: #475569;
+    --#{$prefix}gray-700: #334155;
+    --#{$prefix}gray-800: #1e293b;
+    --#{$prefix}gray-900: #0f172a;
+    --#{$prefix}gray-950: #020617;
   }
-}
 
-@each $value in (0, 0.5, 1, 1.5, 2) {
-  [data-bs-theme-radius='#{$value}'] {
-    --#{$prefix}border-radius-scale: #{$value};
+  [data-bs-theme-base='gray'] {
+    --#{$prefix}gray-50: $gray-50;
+    --#{$prefix}gray-100: $gray-100;
+    --#{$prefix}gray-200: $gray-200;
+    --#{$prefix}gray-300: $gray-300;
+    --#{$prefix}gray-400: $gray-400;
+    --#{$prefix}gray-500: $gray-500;
+    --#{$prefix}gray-600: $gray-600;
+    --#{$prefix}gray-700: $gray-700;
+    --#{$prefix}gray-800: $gray-800;
+    --#{$prefix}gray-900: $gray-900;
+    --#{$prefix}gray-950: $gray-950;
   }
-}
 
-[data-bs-theme-primary='inverted'] {
-  --#{$prefix}primary: var(--#{$prefix}gray-800);
-  --#{$prefix}primary-fg: var(--#{$prefix}light);
-  --#{$prefix}primary-rgb: #{to-rgb($dark)};
-
-  &[data-bs-theme='dark'],
-  [data-bs-theme='dark'] {
-    --#{$prefix}primary: #{$light};
-    --#{$prefix}primary-fg: var(--#{$prefix}dark);
-    --#{$prefix}primary-rgb: #{to-rgb($light)};
+  [data-bs-theme-base='zinc'] {
+    --#{$prefix}gray-50: #fafafa;
+    --#{$prefix}gray-100: #f4f4f5;
+    --#{$prefix}gray-200: #e4e4e7;
+    --#{$prefix}gray-300: #d4d4d8;
+    --#{$prefix}gray-400: #a1a1aa;
+    --#{$prefix}gray-500: #71717a;
+    --#{$prefix}gray-600: #52525b;
+    --#{$prefix}gray-700: #3f3f46;
+    --#{$prefix}gray-800: #27272a;
+    --#{$prefix}gray-900: #18181b;
+    --#{$prefix}gray-950: #09090b;
   }
-}
 
-@each $name, $value in (monospace: $font-family-monospace, sans-serif: $font-family-sans-serif, serif: $font-family-serif, comic: $font-family-comic) {
-  [data-bs-theme-font='#{$name}'] {
-    --#{$prefix}body-font-family: var(--#{$prefix}font-#{$name});
+  [data-bs-theme-base='neutral'] {
+    --#{$prefix}gray-50: #fafafa;
+    --#{$prefix}gray-100: #f5f5f5;
+    --#{$prefix}gray-200: #e5e5e5;
+    --#{$prefix}gray-300: #d4d4d4;
+    --#{$prefix}gray-400: #a3a3a3;
+    --#{$prefix}gray-500: #737373;
+    --#{$prefix}gray-600: #525252;
+    --#{$prefix}gray-700: #404040;
+    --#{$prefix}gray-800: #262626;
+    --#{$prefix}gray-900: #171717;
+    --#{$prefix}gray-950: #0a0a0a;
+  }
 
-    @if $name == 'monospace' {
-      --#{$prefix}body-font-size: 80%;
+  [data-bs-theme-base='stone'] {
+    --#{$prefix}gray-50: #fafaf9;
+    --#{$prefix}gray-100: #f5f5f4;
+    --#{$prefix}gray-200: #e7e5e4;
+    --#{$prefix}gray-300: #d6d3d1;
+    --#{$prefix}gray-400: #a8a29e;
+    --#{$prefix}gray-500: #78716c;
+    --#{$prefix}gray-600: #57534e;
+    --#{$prefix}gray-700: #44403c;
+    --#{$prefix}gray-800: #292524;
+    --#{$prefix}gray-900: #1c1917;
+    --#{$prefix}gray-950: #0c0a09;
+  }
+
+  [data-bs-theme-base='pink'] {
+    --#{$prefix}gray-50: #fdf2f8;
+    --#{$prefix}gray-100: #fce7f3;
+    --#{$prefix}gray-200: #fbcfe8;
+    --#{$prefix}gray-300: #f9a8d4;
+    --#{$prefix}gray-400: #f472b6;
+    --#{$prefix}gray-500: #ec4899;
+    --#{$prefix}gray-600: #db2777;
+    --#{$prefix}gray-700: #be185d;
+    --#{$prefix}gray-800: #9d174d;
+    --#{$prefix}gray-900: #831843;
+    --#{$prefix}gray-950: #500724;
+  }
+
+  @each $name, $value in $extra-colors {
+    [data-bs-theme-primary='#{$name}'] {
+      --#{$prefix}primary: #{$value};
+      --#{$prefix}primary-rgb: #{to-rgb($value)};
+    }
+  }
+
+  @each $value in (0, 0.5, 1, 1.5, 2) {
+    [data-bs-theme-radius='#{$value}'] {
+      --#{$prefix}border-radius-scale: #{$value};
+    }
+  }
+
+  [data-bs-theme-primary='inverted'] {
+    --#{$prefix}primary: var(--#{$prefix}gray-800);
+    --#{$prefix}primary-fg: var(--#{$prefix}light);
+    --#{$prefix}primary-rgb: #{to-rgb($dark)};
+
+    &[data-bs-theme='dark'],
+    [data-bs-theme='dark'] {
+      --#{$prefix}primary: #{$light};
+      --#{$prefix}primary-fg: var(--#{$prefix}dark);
+      --#{$prefix}primary-rgb: #{to-rgb($light)};
+    }
+  }
+
+  @each $name, $value in (monospace: $font-family-monospace, sans-serif: $font-family-sans-serif, serif: $font-family-serif, comic: $font-family-comic) {
+    [data-bs-theme-font='#{$name}'] {
+      --#{$prefix}body-font-family: var(--#{$prefix}font-#{$name});
+
+      @if $name == 'monospace' {
+        --#{$prefix}body-font-size: 80%;
+      }
     }
   }
 }

core/scss/tabler-vendors.scss

@@ -1,16 +1,20 @@
+@use 'layers';
+
 @import 'config';
 
-@import 'vendor/nouislider';
-@import 'vendor/litepicker';
-@import 'vendor/tom-select';
-@import 'vendor/apexcharts';
-@import 'vendor/jsvectormap';
-@import 'vendor/dropzone';
-@import 'vendor/fslightbox';
-@import 'vendor/plyr';
-@import 'vendor/wysiwyg';
-@import 'vendor/stars-rating';
-@import 'vendor/coloris';
-@import 'vendor/typed';
-@import 'vendor/turbo';
-@import 'vendor/fullcalendar';
+@layer components {
+  @import 'vendor/nouislider';
+  @import 'vendor/litepicker';
+  @import 'vendor/tom-select';
+  @import 'vendor/apexcharts';
+  @import 'vendor/jsvectormap';
+  @import 'vendor/dropzone';
+  @import 'vendor/fslightbox';
+  @import 'vendor/plyr';
+  @import 'vendor/wysiwyg';
+  @import 'vendor/stars-rating';
+  @import 'vendor/coloris';
+  @import 'vendor/typed';
+  @import 'vendor/turbo';
+  @import 'vendor/fullcalendar';
+}

core/scss/tabler.scss

@@ -1 +1,3 @@
+@use 'layers';
+
 @import 'core';

core/scss/ui/_accordion.scss

@@ -1,3 +1,4 @@
+@layer components {
 .accordion {
   --#{$prefix}accordion-color: var(--#{$prefix}body-color);
   --#{$prefix}accordion-border-color: var(--#{$prefix}border-color);
@@ -175,3 +176,4 @@
     margin-inline-start: 0;
   }
 }
+}

core/scss/ui/_alerts.scss

@@ -1,3 +1,4 @@
+@layer components {
 .alert {
   --#{$prefix}alert-variant-color: var(--#{$prefix}body-color);
   --#{$prefix}alert-color: var(--#{$prefix}alert-variant-color);
@@ -99,3 +100,4 @@
     --#{$prefix}alert-variant-color: var(--#{$prefix}#{$name});
   }
 }
+}

core/scss/ui/_avatars.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 
+@layer components {
 .avatar {
   --#{$prefix}avatar-size: var(--#{$prefix}avatar-list-size, #{$avatar-size});
   --#{$prefix}avatar-status-size: #{$avatar-status-size};
@@ -162,3 +163,4 @@
   border-radius: var(--#{$prefix}border-radius);
   border: 1px solid var(--#{$prefix}border-color);
 }
+}

core/scss/ui/_badges.scss

@@ -1,3 +1,4 @@
+@layer components {
 .badge {
   --#{$prefix}badge-padding-x: #{$badge-padding-x};
   --#{$prefix}badge-padding-y: #{$badge-padding-y};
@@ -111,3 +112,4 @@
 .badge-icononly {
   --#{$prefix}badge-padding-x: 0;
 }
+}

core/scss/ui/_breadcrumbs.scss

@@ -1,3 +1,4 @@
+@layer components {
 .breadcrumb {
   --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
   --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
@@ -79,3 +80,4 @@
     --#{$prefix}breadcrumb-divider: '#{quote($symbol)}';
   }
 }
+}

core/scss/ui/_button-group.scss

@@ -1,3 +1,4 @@
+@layer components {
 .btn-group,
 .btn-group-vertical {
   box-shadow: $input-box-shadow;
@@ -14,3 +15,4 @@
     z-index: 1;
   }
 }
+}

core/scss/ui/_buttons.scss

@@ -1,6 +1,7 @@
 @use 'sass:color';
 @use 'sass:map';
 
+@layer components {
 //
 // Button
 //
@@ -359,3 +360,4 @@
     }
   }
 }
+}

core/scss/ui/_calendars.scss

@@ -1,3 +1,4 @@
+@layer components {
 .calendar {
   display: block;
   font-size: $font-size-sm;
@@ -102,3 +103,4 @@
     inset-inline-end: 50%;
   }
 }
+}

core/scss/ui/_cards.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 
+@layer components {
 @property --tblr-card-gradient-direction {
   syntax: '<angle>';
   inherits: true;
@@ -735,3 +736,4 @@ Card gradient
 .card-gradient-start {
   --#{$prefix}card-gradient-direction: 90deg;
 }
+}

core/scss/ui/_carousel.scss

@@ -1,3 +1,4 @@
+@layer components {
 .carousel {
 }
 
@@ -65,3 +66,4 @@
   height: 90%;
   background: linear-gradient(0deg, rgba($dark, 0.9), rgba($dark, 0));
 }
+}

core/scss/ui/_charts.scss

@@ -1,3 +1,4 @@
+@layer components {
 .chart {
   display: block;
   min-height: 10rem;
@@ -59,3 +60,4 @@ Chart sparkline
     font-size: 1rem;
   }
 }
+}

core/scss/ui/_chat.scss

@@ -1,3 +1,4 @@
+@layer components {
 .chat {
 }
 
@@ -36,3 +37,4 @@
     margin-bottom: 0;
   }
 }
+}

core/scss/ui/_close.scss

@@ -1,3 +1,4 @@
+@layer components {
 .btn-close {
   --#{$prefix}btn-close-color: currentColor;
   --#{$prefix}btn-close-bg: #{escape-svg($btn-close-bg)};
@@ -63,3 +64,5 @@
 //     @include btn-close-white();
 //   }
 // }
+
+}

core/scss/ui/_datagrid.scss

@@ -2,6 +2,7 @@
 // Base styles
 //
 
+@layer components {
 .datagrid {
   --#{$prefix}datagrid-padding: #{$datagrid-padding};
   --#{$prefix}datagrid-item-width: #{$datagrid-item-width};
@@ -15,3 +16,5 @@
   @include subheader;
   margin-bottom: 0.25rem;
 }
+
+}

core/scss/ui/_dropdowns.scss

@@ -1,3 +1,4 @@
+@layer components {
 .dropdown-menu {
   --#{$prefix}dropdown-item-gap: 0.5rem;
   --#{$prefix}dropdown-item-icon-size: #{$icon-size};
@@ -119,3 +120,5 @@
     box-shadow: none;
   }
 }
+
+}

core/scss/ui/_empty.scss

@@ -1,3 +1,4 @@
+@layer components {
 .empty {
   display: flex;
   flex-direction: column;
@@ -57,3 +58,5 @@
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   border-radius: var(--#{$prefix}border-radius);
 }
+
+}

core/scss/ui/_flags.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../config';
 
+@layer components {
 .flag {
   position: relative;
   display: inline-block;
@@ -32,3 +33,4 @@
     }
   }
 }
+}

core/scss/ui/_forms.scss

@@ -1,3 +1,4 @@
+@layer forms {
 textarea {
   &[cols] {
     height: auto;
@@ -249,3 +250,4 @@ Forms on mobile devices
     font-size: 1rem;
   }
 }
+}

core/scss/ui/_grid.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 
+@layer components {
 .row > * {
   min-width: 0;
 }
@@ -131,3 +132,4 @@
     flex-direction: column;
   }
 }
+}

core/scss/ui/_icons.scss

@@ -1,6 +1,7 @@
 //
 // Icon component
 //
+@layer components {
 .icon {
   --#{$prefix}icon-size: #{$font-size-base * $line-height-base};
   width: var(--#{$prefix}icon-size);
@@ -70,3 +71,5 @@
   animation: rotate-360 3s linear infinite;
   animation-fill-mode: both;
 }
+
+}

core/scss/ui/_images.scss

@@ -1,5 +1,6 @@
 @use 'sass:math';
 
+@layer components {
 .img-responsive {
   --#{$prefix}img-responsive-ratio: #{math.percentage(0.75)};
   background: no-repeat center/cover;
@@ -19,3 +20,4 @@
 .img-bg {
   background: no-repeat center/cover;
 }
+}

core/scss/ui/_legend.scss

@@ -1,6 +1,7 @@
 /**
 Legend
  */
+@layer components {
 .legend {
   --#{$prefix}legend-size: #{$legend-size};
   display: inline-block;
@@ -10,3 +11,5 @@ Legend
   border-radius: $legend-border-radius;
   border: 1px solid var(--#{$prefix}border-color-translucent);
 }
+
+}

core/scss/ui/_lists.scss

@@ -1,3 +1,4 @@
+@layer components {
 .list-group {
   margin-inline-start: 0;
   margin-inline-end: 0;
@@ -120,3 +121,5 @@ Inline list
     margin-inline-end: $list-inline-padding;
   }
 }
+
+}

core/scss/ui/_loaders.scss

@@ -1,3 +1,4 @@
+@layer components {
 .loader {
   position: relative;
   display: block;
@@ -69,3 +70,5 @@ Dimmer
     animation: animated-dots 1.2s steps(4, jump-none) infinite;
   }
 }
+
+}

core/scss/ui/_markdown.scss

@@ -1,6 +1,7 @@
 $markdown-font-size: var(--#{$prefix}font-size-h3) !default;
 $markdown-line-height: var(--#{$prefix}line-height-lg) !default;
 
+@layer components {
 /**
 Markdown
  */
@@ -64,3 +65,5 @@ Markdown
     max-height: 20rem;
   }
 }
+
+}

core/scss/ui/_modals.scss

@@ -1,3 +1,4 @@
+@layer components {
 .modal-content,
 .modal-header {
   > .btn-close {
@@ -72,3 +73,5 @@
     display: none !important;
   }
 }
+
+}

core/scss/ui/_nav.scss

@@ -1,3 +1,4 @@
+@layer components {
 .nav {
   --#{$prefix}nav-link-hover-bg: #{color-transparent(var(--#{$prefix}nav-link-color), 0.04)};
 }
@@ -108,3 +109,5 @@
     }
   }
 }
+
+}

core/scss/ui/_offcanvas.scss

@@ -1,3 +1,4 @@
+@layer components {
 .offcanvas {
   @include media-print {
     display: none;
@@ -21,3 +22,5 @@
 .offcanvas-narrow {
   width: 20rem;
 }
+
+}

core/scss/ui/_pagination.scss

@@ -1,3 +1,4 @@
+@layer components {
 .pagination {
   margin: 0;
   --#{$prefix}pagination-gap: 0.25rem;
@@ -73,3 +74,5 @@
 .pagination-circle {
   --#{$prefix}pagination-border-radius: var(--tblr-border-radius-pill);
 }
+
+}

core/scss/ui/_payments.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../config';
 
+@layer components {
 .payment {
   height: config.$avatar-size;
   aspect-ratio: 1.66666;
@@ -27,3 +28,4 @@
     height: map.get($size, size);
   }
 }
+}

core/scss/ui/_placeholder.scss

@@ -1,3 +1,4 @@
+@layer components {
 .placeholder {
   &:not(.btn):not([class*='bg-']) {
     background-color: currentColor !important;
@@ -7,3 +8,5 @@
     border-radius: var(--#{$prefix}border-radius);
   }
 }
+
+}

core/scss/ui/_popovers.scss

@@ -1,5 +1,8 @@
+@layer components {
 .popover {
   @include media-print {
     display: none;
   }
 }
+
+}

core/scss/ui/_progress.scss

@@ -1,3 +1,4 @@
+@layer components {
 @keyframes progress-indeterminate {
   0% {
     inset-inline-end: 100%;
@@ -38,6 +39,8 @@ Progress
   }
 }
 
+}
+
 .progress-sm {
   height: 0.25rem;
 }

core/scss/ui/_ribbons.scss

@@ -1,5 +1,6 @@
 // stylelint-disable declaration-no-important
 
+@layer components {
 .ribbon {
   --#{$prefix}ribbon-margin: #{$card-ribbon-margin};
   --#{$prefix}ribbon-border-radius: #{$card-ribbon-border-radius};
@@ -154,3 +155,5 @@
     }
   }
 }
+
+}

core/scss/ui/_segmented.scss

@@ -1,3 +1,4 @@
+@layer components {
 .nav-segmented {
   --#{$prefix}nav-bg: var(--#{$prefix}bg-surface-tertiary);
   --#{$prefix}nav-padding: 2px;
@@ -75,6 +76,8 @@
   }
 }
 
+}
+
 .nav-segmented-vertical {
   flex-direction: column;
 

core/scss/ui/_signature.scss

@@ -1,3 +1,4 @@
+@layer components {
 .signature {
   --#{$prefix}signature-padding: var(--#{$prefix}spacer-1);
   --#{$prefix}signature-border-radius: var(--#{$prefix}border-radius);
@@ -13,3 +14,5 @@
   cursor: crosshair;
   width: 100%;
 }
+
+}

core/scss/ui/_social.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../config';
 
+@layer components {
 .social {
   position: relative;
   display: inline-block;
@@ -25,3 +26,4 @@
     height: map.get($size, size);
   }
 }
+}

core/scss/ui/_stars.scss

@@ -1,3 +1,4 @@
+@layer components {
 .stars {
   display: inline-flex;
   color: $gray-400;
@@ -7,3 +8,5 @@
     margin-inline-start: 0.25rem;
   }
 }
+
+}

core/scss/ui/_status.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 
+@layer components {
 @keyframes status-pulsate-main {
   40% {
     transform: scale(1.25, 1.25);
@@ -163,3 +164,4 @@
     }
   }
 }
+}

core/scss/ui/_steps.scss

@@ -1,6 +1,7 @@
 //
 // Steps
 //
+@layer components {
 .steps {
   --#{$prefix}steps-color: #{$steps-color};
   --#{$prefix}steps-inactive-color: #{$steps-inactive-color};
@@ -98,6 +99,8 @@
   }
 }
 
+}
+
 //
 // Steps counter
 //

core/scss/ui/_switch-icon.scss

@@ -1,3 +1,4 @@
+@layer components {
 .switch-icon {
   display: inline-block;
   line-height: 1;
@@ -62,6 +63,8 @@
   }
 }
 
+}
+
 // Scale variant
 .switch-icon-scale {
   .switch-icon-a,

core/scss/ui/_tables.scss

@@ -1,3 +1,4 @@
+@layer components {
 .table {
   font: inherit;
 
@@ -42,6 +43,8 @@
   }
 }
 
+}
+
 .table-center {
   > :not(caption) > * > * {
     text-align: center;

core/scss/ui/_tags.scss

@@ -1,3 +1,4 @@
+@layer components {
 .tag {
   --#{$prefix}tag-height: 1.5rem;
   border: $border-width solid var(--#{$prefix}border-color);
@@ -35,6 +36,8 @@
   margin-inline-start: -0.25rem;
 }
 
+}
+
 .tag-icon {
   color: var(--#{$prefix}secondary);
   margin-inline-end: -0.125rem;

core/scss/ui/_timeline.scss

@@ -1,6 +1,7 @@
 //
 // Timeline
 //
+@layer components {
 .timeline {
   --#{$prefix}timeline-icon-size: #{$avatar-size};
   position: relative;
@@ -30,6 +31,8 @@
   }
 }
 
+}
+
 .timeline-event-icon {
   position: absolute;
   display: flex;

core/scss/ui/_toasts.scss

@@ -1,3 +1,4 @@
+@layer components {
 .toast {
   border: $alert-border-width var(--#{$prefix}border-style) $alert-border-color;
   box-shadow: $alert-shadow;
@@ -20,3 +21,5 @@
     --#{$prefix}toast-color: #{$value};
   }
 }
+
+}

core/scss/ui/_toolbar.scss

@@ -1,3 +1,4 @@
+@layer components {
 .toolbar {
   display: flex;
   flex-wrap: nowrap;
@@ -12,3 +13,5 @@
     display: none;
   }
 }
+
+}

core/scss/ui/_tracking.scss

@@ -1,3 +1,4 @@
+@layer components {
 .tracking {
   --#{$prefix}tracking-height: #{$tracking-height};
   --#{$prefix}tracking-gap-width: #{$tracking-gap-width};
@@ -27,3 +28,5 @@
   min-width: 0.25rem;
   background: var(--#{$prefix}border-color);
 }
+
+}

core/scss/ui/_type.scss

@@ -1,3 +1,4 @@
+@layer components {
 @import 'typo/hr';
 
 .lead {
@@ -81,6 +82,8 @@ b {
   font-weight: $headings-font-weight;
 }
 
+}
+
 blockquote {
   padding: 1rem 1rem 1rem;
   border-inline-start: 2px var(--#{$prefix}border-style) var(--#{$prefix}border-color);

core/scss/ui/forms/_form-check.scss

@@ -1,3 +1,4 @@
+@layer forms {
 /*
 Form check
  */
@@ -83,3 +84,4 @@ Form switch
     padding-top: 0.125rem;
   }
 }
+}

core/scss/ui/forms/_form-colorinput.scss

@@ -1,3 +1,4 @@
+@layer forms {
 /*
 Color Input
  */
@@ -52,3 +53,4 @@ Color Input
     }
   }
 }
+}

core/scss/ui/forms/_form-custom.scss

@@ -1,3 +1,4 @@
+@layer forms {
 /**
 Bootstrap color input
  */
@@ -26,3 +27,4 @@ Form control dark theme fix
     background-color: var(--#{$prefix}btn-color, #{$form-file-button-hover-bg});
   }
 }
+}

core/scss/ui/forms/_form-icon.scss

@@ -1,3 +1,4 @@
+@layer forms {
 /**
 Icon input
  */
@@ -35,3 +36,4 @@ Icon input
     inset-inline-start: auto;
   }
 }
+}

core/scss/ui/forms/_form-imagecheck.scss

@@ -1,3 +1,4 @@
+@layer forms {
 /**
 Image check
  */
@@ -103,3 +104,4 @@ Image check
     color: var(--#{$prefix}body-color);
   }
 }
+}

core/scss/ui/forms/_form-selectgroup.scss

@@ -1,3 +1,4 @@
+@layer forms {
 /*
 Select group
  */
@@ -152,3 +153,4 @@ Select group
     border-radius: 50px;
   }
 }
+}

core/scss/ui/forms/_validation.scss

@@ -1,3 +1,4 @@
+@layer forms {
 %validation-lite {
   border-color: var(--#{$prefix}border-color) !important;
 }
@@ -11,3 +12,4 @@
     @extend %validation-lite;
   }
 }
+}

core/scss/ui/typo/_hr.scss

@@ -1,3 +1,4 @@
+@layer components {
 /**
 Horizontal rules
  */
@@ -74,3 +75,4 @@ Hr text
 .hr-text-spaceless {
   margin: -0.5rem 0;
 }
+}

core/scss/utils/_background.scss

@@ -1,3 +1,4 @@
+@layer utilities {
 .bg-white-overlay {
   color: $white;
   background-color: rgba($light, 0.24);
@@ -13,3 +14,4 @@
   background-size: cover;
   background-position: center;
 }
+}

core/scss/utils/_colors.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 
+@layer utilities {
 // All colors
 @each $color,
   $value
@@ -108,3 +109,4 @@
 .bg-surface-backdrop {
   background-color: color-transparent($modal-backdrop-bg, $modal-backdrop-opacity) !important;
 }
+}

core/scss/utils/_hover.scss

@@ -1,3 +1,4 @@
+@layer utilities {
 %hover-animation {
   transition: transform 0.3s ease;
 
@@ -45,3 +46,4 @@
     transform: rotate(-4deg);
   }
 }
+}

core/scss/utils/_opacity.scss

@@ -1,3 +1,4 @@
+@layer utilities {
 // stylelint-disable declaration-no-important
 
 @for $i from 0 through 20 {
@@ -5,3 +6,4 @@
     opacity: calc(#{$i * 5} / 100) !important;
   }
 }
+}

core/scss/utils/_scroll.scss

@@ -1,3 +1,4 @@
+@layer utilities {
 /*
 Scrollable
 */
@@ -43,3 +44,4 @@ Scrollable
 .no-scroll {
   overflow: hidden;
 }
+}

core/scss/utils/_shadow.scss

@@ -1,3 +1,4 @@
+@layer utilities {
 // stylelint-disable declaration-no-important
 
 .hover-shadow-sm:hover {
@@ -15,3 +16,4 @@
 .hover-shadow-none:hover {
   box-shadow: none !important;
 }
+}

core/scss/utils/_sizing.scss

@@ -1,3 +1,4 @@
+@layer utilities {
 // stylelint-disable declaration-no-important
 
 @each $size-name, $size in map_merge($spacers, $size-spacers) {
@@ -8,3 +9,4 @@
     height: $size !important;
   }
 }
+}

core/scss/utils/_text.scss

@@ -1,3 +1,4 @@
+@layer utilities {
 // stylelint-disable declaration-no-important
 
 /**
@@ -12,3 +13,4 @@ Antialiasing
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
 }
+}