@nuvoui/core 1.2.7 → 1.3.1

package/src/styles/utilities/_tooltips.scss

@@ -1,4 +1,5 @@
 @use "../abstracts/config" as VAR;
+@use "../abstracts/functions" as FN;
 
 @mixin tooltip-variables {
   // Tooltip core variables
@@ -23,233 +24,235 @@
   --tooltip-border-radius: 4px;
 }
 
-// Apply variables based on parent selector
-@if VAR.$parent-selector == "" {
-  :root {
-    @include tooltip-variables;
-  }
-} @else {
-  #{VAR.$parent-selector} {
-    @include tooltip-variables;
-  }
-}
-
-#{VAR.$parent-selector} [data-tooltip][role~="tooltip"] {
-  position: relative;
-
-  &::before,
-  &::after {
-    transform: translate3d(0, 0, 0);
-    backface-visibility: hidden;
-    will-change: transform;
-    opacity: 0;
-    pointer-events: none;
-    transition: all var(--microtip-transition-duration) var(--microtip-transition-easing) var(--microtip-transition-delay);
-    position: absolute;
-    box-sizing: border-box;
-    z-index: 10;
-    transform-origin: top;
-  }
-
-  &::before {
-    background-size: 100% auto !important;
-    content: "";
-  }
-
-  &::after {
-    background: var(--tooltip-bg);
-    box-shadow: 0 3px 7px var(--tooltip-shadow-color);
-    border-radius: var(--tooltip-border-radius);
-    color: var(--tooltip-text-color);
-    content: attr(data-tooltip);
-    font-size: var(--microtip-font-size);
-    font-weight: var(--microtip-font-weight);
-    text-transform: var(--microtip-text-transform);
-    padding: 0.5em 1em;
-    white-space: nowrap;
-    box-sizing: content-box;
-  }
-
-  &:hover::before,
-  &:hover::after,
-  &:focus::before,
-  &:focus::after {
-    opacity: 1;
-    pointer-events: auto;
-  }
-}
-
-// Top position tooltips
-#{VAR.$parent-selector} [role~="tooltip"][data-microtip-position|="top"] {
-  &::before {
-    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
-    height: 6px;
-    width: 18px;
-    margin-bottom: 6px;
-    transform: translate3d(-50%, 0, 0);
-    bottom: 100%;
-    left: 50%;
-  }
-
-  &::after {
-    margin-bottom: 11px;
-    transform: translate3d(-50%, 0, 0);
-    bottom: 100%;
-    left: 50%;
-  }
-
-  &:hover::before {
-    transform: translate3d(-50%, -5px, 0);
-  }
-
-  &:hover::after {
-    transform: translate3d(-50%, -5px, 0);
-  }
-}
-
-#{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="top-left"] {
-  &::after {
-    transform: translate3d(calc(-100% + 16px), 0, 0);
-    bottom: 100%;
+@if FN.feature-enabled("tooltips") {
+  // Apply variables based on parent selector
+  @if VAR.$parent-selector == "" {
+    :root {
+      @include tooltip-variables;
+    }
+  } @else {
+    #{VAR.$parent-selector} {
+      @include tooltip-variables;
+    }
   }
 
-  &:hover::after {
-    transform: translate3d(calc(-100% + 16px), -5px, 0);
-  }
-}
-
-#{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="top-right"] {
-  &::after {
-    transform: translate3d(calc(0% + -16px), 0, 0);
-    bottom: 100%;
+  #{VAR.$parent-selector} [data-tooltip][role~="tooltip"] {
+    position: relative;
+
+    &::before,
+    &::after {
+      transform: translate3d(0, 0, 0);
+      backface-visibility: hidden;
+      will-change: transform;
+      opacity: 0;
+      pointer-events: none;
+      transition: all var(--microtip-transition-duration) var(--microtip-transition-easing) var(--microtip-transition-delay);
+      position: absolute;
+      box-sizing: border-box;
+      z-index: 10;
+      transform-origin: top;
+    }
+
+    &::before {
+      background-size: 100% auto !important;
+      content: "";
+    }
+
+    &::after {
+      background: var(--tooltip-bg);
+      box-shadow: 0 3px 7px var(--tooltip-shadow-color);
+      border-radius: var(--tooltip-border-radius);
+      color: var(--tooltip-text-color);
+      content: attr(data-tooltip);
+      font-size: var(--microtip-font-size);
+      font-weight: var(--microtip-font-weight);
+      text-transform: var(--microtip-text-transform);
+      padding: 0.5em 1em;
+      white-space: nowrap;
+      box-sizing: content-box;
+    }
+
+    &:hover::before,
+    &:hover::after,
+    &:focus::before,
+    &:focus::after {
+      opacity: 1;
+      pointer-events: auto;
+    }
   }
 
-  &:hover::after {
-    transform: translate3d(calc(0% + -16px), -5px, 0);
+  // Top position tooltips
+  #{VAR.$parent-selector} [role~="tooltip"][data-microtip-position|="top"] {
+    &::before {
+      background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A// www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+      height: 6px;
+      width: 18px;
+      margin-bottom: 6px;
+      transform: translate3d(-50%, 0, 0);
+      bottom: 100%;
+      left: 50%;
+    }
+
+    &::after {
+      margin-bottom: 11px;
+      transform: translate3d(-50%, 0, 0);
+      bottom: 100%;
+      left: 50%;
+    }
+
+    &:hover::before {
+      transform: translate3d(-50%, -5px, 0);
+    }
+
+    &:hover::after {
+      transform: translate3d(-50%, -5px, 0);
+    }
   }
-}
 
-// Bottom position tooltips
-#{VAR.$parent-selector} [role~="tooltip"][data-microtip-position|="bottom"] {
-  &::before {
-    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
-    height: 6px;
-    width: 18px;
-    margin-top: 5px;
-    margin-bottom: 0;
-    transform: translate3d(-50%, -10px, 0);
-    bottom: auto;
-    left: 50%;
-    top: 100%;
-  }
+  #{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="top-left"] {
+    &::after {
+      transform: translate3d(calc(-100% + 16px), 0, 0);
+      bottom: 100%;
+    }
 
-  &::after {
-    margin-top: 11px;
-    transform: translate3d(-50%, -10px, 0);
-    top: 100%;
-    left: 50%;
+    &:hover::after {
+      transform: translate3d(calc(-100% + 16px), -5px, 0);
+    }
   }
 
-  &:hover::before {
-    transform: translate3d(-50%, 0, 0);
-  }
-
-  &:hover::after {
-    transform: translate3d(-50%, 0, 0);
-  }
-}
-
-#{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="bottom-left"] {
-  &::after {
-    transform: translate3d(calc(-100% + 16px), -10px, 0);
-    top: 100%;
-  }
+  #{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="top-right"] {
+    &::after {
+      transform: translate3d(calc(0% + -16px), 0, 0);
+      bottom: 100%;
+    }
 
-  &:hover::after {
-    transform: translate3d(calc(-100% + 16px), 0, 0);
+    &:hover::after {
+      transform: translate3d(calc(0% + -16px), -5px, 0);
+    }
   }
-}
 
-#{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="bottom-right"] {
-  &::after {
-    transform: translate3d(calc(0% + -16px), -10px, 0);
-    top: 100%;
+  // Bottom position tooltips
+  #{VAR.$parent-selector} [role~="tooltip"][data-microtip-position|="bottom"] {
+    &::before {
+      background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A// www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+      height: 6px;
+      width: 18px;
+      margin-top: 5px;
+      margin-bottom: 0;
+      transform: translate3d(-50%, -10px, 0);
+      bottom: auto;
+      left: 50%;
+      top: 100%;
+    }
+
+    &::after {
+      margin-top: 11px;
+      transform: translate3d(-50%, -10px, 0);
+      top: 100%;
+      left: 50%;
+    }
+
+    &:hover::before {
+      transform: translate3d(-50%, 0, 0);
+    }
+
+    &:hover::after {
+      transform: translate3d(-50%, 0, 0);
+    }
   }
 
-  &:hover::after {
-    transform: translate3d(calc(0% + -16px), 0, 0);
-  }
-}
+  #{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="bottom-left"] {
+    &::after {
+      transform: translate3d(calc(-100% + 16px), -10px, 0);
+      top: 100%;
+    }
 
-// Left position tooltips
-#{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="left"] {
-  &::before,
-  &::after {
-    inset: auto auto auto 100%;
-    left: auto; // Remove any left positioning
-    right: 100%; // Position to the left of the element
-    top: 50%;
-    transform: translate3d(10px, -50%, 0);
+    &:hover::after {
+      transform: translate3d(calc(-100% + 16px), 0, 0);
+    }
   }
 
-  &::before {
-    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
-    height: 18px;
-    width: 6px;
-    margin-right: 5px;
-    margin-bottom: 0;
-  }
+  #{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="bottom-right"] {
+    &::after {
+      transform: translate3d(calc(0% + -16px), -10px, 0);
+      top: 100%;
+    }
 
-  &::after {
-    margin-right: 11px;
+    &:hover::after {
+      transform: translate3d(calc(0% + -16px), 0, 0);
+    }
   }
 
-  &:hover::before,
-  &:hover::after {
-    transform: translate3d(0, -50%, 0);
+  // Left position tooltips
+  #{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="left"] {
+    &::before,
+    &::after {
+      inset: auto auto auto 100%;
+      left: auto; // Remove any left positioning
+      right: 100%; // Position to the left of the element
+      top: 50%;
+      transform: translate3d(10px, -50%, 0);
+    }
+
+    &::before {
+      background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A// www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+      height: 18px;
+      width: 6px;
+      margin-right: 5px;
+      margin-bottom: 0;
+    }
+
+    &::after {
+      margin-right: 11px;
+    }
+
+    &:hover::before,
+    &:hover::after {
+      transform: translate3d(0, -50%, 0);
+    }
   }
-}
 
-// Right position tooltips
-#{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="right"] {
-  &::before,
-  &::after {
-    bottom: auto;
-    left: 100%;
-    top: 50%;
-    transform: translate3d(-10px, -50%, 0);
+  // Right position tooltips
+  #{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="right"] {
+    &::before,
+    &::after {
+      bottom: auto;
+      left: 100%;
+      top: 50%;
+      transform: translate3d(-10px, -50%, 0);
+    }
+
+    &::before {
+      background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A// www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+      height: 18px;
+      width: 6px;
+      margin-bottom: 0;
+      margin-left: 5px;
+    }
+
+    &::after {
+      margin-left: 11px;
+    }
+
+    &:hover::before,
+    &:hover::after {
+      transform: translate3d(0, -50%, 0);
+    }
   }
 
-  &::before {
-    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
-    height: 18px;
-    width: 6px;
-    margin-bottom: 0;
-    margin-left: 5px;
+  // Tooltip sizes
+  #{VAR.$parent-selector} [role~="tooltip"][data-microtip-size="small"]::after {
+    white-space: initial;
+    width: var(--tooltip-small-width);
   }
 
-  &::after {
-    margin-left: 11px;
+  #{VAR.$parent-selector} [role~="tooltip"][data-microtip-size="medium"]::after {
+    white-space: initial;
+    width: var(--tooltip-medium-width);
   }
 
-  &:hover::before,
-  &:hover::after {
-    transform: translate3d(0, -50%, 0);
+  #{VAR.$parent-selector} [role~="tooltip"][data-microtip-size="large"]::after {
+    white-space: initial;
+    width: var(--tooltip-large-width);
   }
 }
-
-// Tooltip sizes
-#{VAR.$parent-selector} [role~="tooltip"][data-microtip-size="small"]::after {
-  white-space: initial;
-  width: var(--tooltip-small-width);
-}
-
-#{VAR.$parent-selector} [role~="tooltip"][data-microtip-size="medium"]::after {
-  white-space: initial;
-  width: var(--tooltip-medium-width);
-}
-
-#{VAR.$parent-selector} [role~="tooltip"][data-microtip-size="large"]::after {
-  white-space: initial;
-  width: var(--tooltip-large-width);
-}

package/src/styles/utilities/_transforms.scss

@@ -1,15 +1,13 @@
-@use "../abstracts/config" as VAR;
 @use "sass:map";
+@use "../abstracts/config" as VAR;
+@use "../abstracts/functions" as FN;
 
-/**
- * Transform Utilities
- * 
- * - Translate (X, Y, Z)
- * - Scale
- * - Rotate
- * - Skew
- * - Transform origin
- */
+// Transform Utilities
+// - Translate (X, Y, Z)
+// - Scale
+// - Rotate
+// - Skew
+// - Transform origin
 
 // Common transform function to avoid repetition
 @mixin apply-transform {
@@ -173,7 +171,7 @@ $origin-values: (
 );
 
 // Generate utility classes
-@if VAR.$generate-utility-classes {
+@if FN.feature-enabled("transforms") {
   // Translate utilities
   @each $key, $value in $translate-values {
     #{VAR.$parent-selector} .translate-x-#{$key},
@@ -259,7 +257,7 @@ $origin-values: (
           @include translate-x($value);
         }
 
-        #{VAR.$parent-selector} .translate-x-#{$key}\@#{$breakpoint},
+        #{VAR.$parent-selector} .translate-y-#{$key}\@#{$breakpoint},
         #{VAR.$parent-selector} .hover\:translate-y-#{$key}\@#{$breakpoint}:hover,
         #{VAR.$parent-selector} .group:hover .group-hover\:translate-y-#{$key}\@#{$breakpoint} {
           @include translate-y($value);
@@ -272,7 +270,7 @@ $origin-values: (
           @include translate-x($value);
         }
 
-        #{VAR.$parent-selector} .-translate-x-#{$key}\@#{$breakpoint},
+        #{VAR.$parent-selector} .-translate-y-#{$key}\@#{$breakpoint},
         #{VAR.$parent-selector} .hover\:-translate-y-#{$key}\@#{$breakpoint}:hover,
         #{VAR.$parent-selector} .group:hover .group-hover\:-translate-y-#{$key}\@#{$breakpoint} {
           @include translate-y($value);
@@ -286,6 +284,18 @@ $origin-values: (
         #{VAR.$parent-selector} .group:hover .group-hover\:scale-#{$key}\@#{$breakpoint} {
           @include scale($value);
         }
+
+        #{VAR.$parent-selector} .scale-x-#{$key}\@#{$breakpoint},
+        #{VAR.$parent-selector} .hover\:scale-x-#{$key}\@#{$breakpoint}:hover,
+        #{VAR.$parent-selector} .group:hover .group-hover\:scale-x-#{$key}\@#{$breakpoint} {
+          @include scale-x($value);
+        }
+
+        #{VAR.$parent-selector} .scale-y-#{$key}\@#{$breakpoint},
+        #{VAR.$parent-selector} .hover\:scale-y-#{$key}\@#{$breakpoint}:hover,
+        #{VAR.$parent-selector} .group:hover .group-hover\:scale-y-#{$key}\@#{$breakpoint} {
+          @include scale-y($value);
+        }
       }
 
       // Rotation hover responsive
@@ -305,6 +315,15 @@ $origin-values: (
           @include rotate($value);
         }
       }
+
+      // Add missing origin responsive variants
+      @each $key, $value in $origin-values {
+        #{VAR.$parent-selector} .origin-#{$key}\@#{$breakpoint},
+        #{VAR.$parent-selector} .hover\:origin-#{$key}\@#{$breakpoint}:hover,
+        #{VAR.$parent-selector} .group:hover .group-hover\:origin-#{$key}\@#{$breakpoint} {
+          @include origin($value);
+        }
+      }
     }
   }
 }

package/src/styles/utilities/_transitions.scss

@@ -1,15 +1,13 @@
 // _transitions.scss
 @use "../abstracts/config" as VAR;
+@use "../abstracts/functions" as FN;
 
-/**
- * Transition Utilities
- * 
- * - .transition: Default transition for common properties
- * - .transition-{property}: Transition specific properties
- * - .duration-{time}: Set transition duration
- * - .ease-{type}: Set transition timing function
- * - .delay-{time}: Set transition delay
- */
+// Transition Utilities
+// - .transition: Default transition for common properties
+// - .transition-{property}: Transition specific properties
+// - .duration-{time}: Set transition duration
+// - .ease-{type}: Set transition timing function
+// - .delay-{time}: Set transition delay
 
 // Property-specific transition mixins
 @mixin transition-none {
@@ -89,7 +87,7 @@ $delays: (
   "1000": 1000ms,
 );
 
-@if VAR.$generate-utility-classes {
+@if FN.feature-enabled("transitions") {
   // Property-specific transitions
   #{VAR.$parent-selector} .transition-none {
     @include transition-none;

package/src/styles/utilities/_typography.scss

@@ -6,30 +6,25 @@
 
 // Import variables
 @use "../abstracts/config" as VAR;
-
-/**
- * Typography Utilities
- * 
- * Classes:
- * - Font Size: .text-xs, .text-sm, .text-base, etc.
- * - Font Weight: .font-thin, .font-normal, .font-bold, etc.
- * - Line Height: .leading-none, .leading-tight, .leading-normal, etc.
- * - Text Align: .text-left, .text-center, .text-right, .text-justify
- * - Text Transform: .uppercase, .lowercase, .capitalize, .normal-case
- * - Text Style: .italic, .not-italic
- * - Text Decoration: .underline, .line-through, .no-underline
- * - Text Overflow: .truncate
- * 
- * All utilities support responsive variants with @breakpoint suffix:
- * - .text-lg@md, .font-bold@lg, etc.
- */
+@use "../abstracts/functions" as FN;
+
+// Typography Utilities
+// Classes:
+// - Font Size: .text-xs, .text-sm, .text-base, etc.
+// - Font Weight: .font-thin, .font-normal, .font-bold, etc.
+// - Line Height: .leading-none, .leading-tight, .leading-normal, etc.
+// - Text Align: .text-left, .text-center, .text-right, .text-justify
+// - Text Transform: .uppercase, .lowercase, .capitalize, .normal-case
+// - Text Style: .italic, .not-italic
+// - Text Decoration: .underline, .line-through, .no-underline
+// - Text Overflow: .truncate
+// All utilities support responsive variants with @breakpoint suffix:
+// - .text-lg@md, .font-bold@lg, etc.
 
 // Utilities for text sizes
 
-/**
-* Text size utility
-* @param {string} $size - The size of the text.
-*/
+// Text size utility
+// @param {string} $size - The size of the text.
 @mixin text-size($size) {
   @if map.has-key(VAR.$font-sizes, $size) {
     font-size: map.get(VAR.$font-sizes, $size);
@@ -418,7 +413,7 @@
   }
 }
 
-@if VAR.$generate-utility-classes {
+@if FN.feature-enabled("typography") {
   @include responsive-typography;
 
   #{VAR.$parent-selector} .break-normal {

package/src/styles/utilities/_z-index.scss

@@ -6,17 +6,14 @@
 
 // Import variables
 @use "../abstracts/config" as VAR;
+@use "../abstracts/functions" as FN;
 
-/**
- * Z-Index Utilities
- * 
- * Classes:
- * - z-index values: .z-0, .z-10, .z-20, etc.
- * - Named z-index levels: .z-auto, .z-base, .z-dropdown, etc.
- * 
- * All utilities support responsive variants with @breakpoint suffix:
- * - .z-10@md, .z-dropdown@lg, etc.
- */
+// Z-Index Utilities
+// Classes:
+// - z-index values: .z-0, .z-10, .z-20, etc.
+// - Named z-index levels: .z-auto, .z-base, .z-dropdown, etc.
+// All utilities support responsive variants with @breakpoint suffix:
+// - .z-10@md, .z-dropdown@lg, etc.
 
 // Z-index values map (can be moved to variables)
 $z-indexes: (
@@ -53,10 +50,8 @@ $z-index-levels: (
   "max": 9999,
 );
 
-/**
- * Apply a z-index value
- * @param {Number|String} $value - Z-index value or key
- */
+// Apply a z-index value
+// @param {Number|String} $value - Z-index value or key
 @mixin z-index($value) {
   @if map.has-key($z-indexes, $value) {
     z-index: map.get($z-indexes, $value);
@@ -67,10 +62,8 @@ $z-index-levels: (
   }
 }
 
-/**
- * Generate z-index utility classes
- * @param {String} $breakpoint - Optional breakpoint name for responsive variants
- */
+// Generate z-index utility classes
+// @param {String} $breakpoint - Optional breakpoint name for responsive variants
 @mixin z-index-utilities($breakpoint: null) {
   $suffix: if($breakpoint, "\\@#{$breakpoint}", "");
 
@@ -131,7 +124,7 @@ $z-index-levels: (
 }
 
 // Generate utility classes
-@if VAR.$generate-utility-classes {
+@if FN.feature-enabled("z-index") {
   // Generate base utilities
   @include z-index-utilities;