dynamic-ds 1.0.4 → 1.0.6

package/src/lib/styles/_spacing.scss

@@ -0,0 +1,924 @@
+// ============================================================================
+// SPACING & LAYOUT SYSTEM - Dynamic Design System
+// ============================================================================
+// Comprehensive spacing utilities with 4px base grid system
+// ============================================================================
+
+// ============================================================================
+// 1. SPACING SCALE (Based on 4px grid)
+// ============================================================================
+$spacing-base: 4px;
+
+$spacing-0: 0;
+$spacing-px: 1px;
+$spacing-0_5: $spacing-base * 0.5;   // 2px
+$spacing-1: $spacing-base;           // 4px
+$spacing-1_5: $spacing-base * 1.5;   // 6px
+$spacing-2: $spacing-base * 2;       // 8px
+$spacing-2_5: $spacing-base * 2.5;   // 10px
+$spacing-3: $spacing-base * 3;       // 12px
+$spacing-3_5: $spacing-base * 3.5;   // 14px
+$spacing-4: $spacing-base * 4;       // 16px
+$spacing-5: $spacing-base * 5;       // 20px
+$spacing-6: $spacing-base * 6;       // 24px
+$spacing-7: $spacing-base * 7;       // 28px
+$spacing-8: $spacing-base * 8;       // 32px
+$spacing-9: $spacing-base * 9;       // 36px
+$spacing-10: $spacing-base * 10;     // 40px
+$spacing-11: $spacing-base * 11;     // 44px
+$spacing-12: $spacing-base * 12;     // 48px
+$spacing-14: $spacing-base * 14;     // 56px
+$spacing-16: $spacing-base * 16;     // 64px
+$spacing-20: $spacing-base * 20;     // 80px
+$spacing-24: $spacing-base * 24;     // 96px
+$spacing-28: $spacing-base * 28;     // 112px
+$spacing-32: $spacing-base * 32;     // 128px
+$spacing-36: $spacing-base * 36;     // 144px
+$spacing-40: $spacing-base * 40;     // 160px
+$spacing-44: $spacing-base * 44;     // 176px
+$spacing-48: $spacing-base * 48;     // 192px
+$spacing-52: $spacing-base * 52;     // 208px
+$spacing-56: $spacing-base * 56;     // 224px
+$spacing-60: $spacing-base * 60;     // 240px
+$spacing-64: $spacing-base * 64;     // 256px
+$spacing-72: $spacing-base * 72;     // 288px
+$spacing-80: $spacing-base * 80;     // 320px
+$spacing-96: $spacing-base * 96;     // 384px
+
+$spacing-map: (
+  '0': $spacing-0,
+  'px': $spacing-px,
+  '0\\.5': $spacing-0_5,
+  '1': $spacing-1,
+  '1\\.5': $spacing-1_5,
+  '2': $spacing-2,
+  '2\\.5': $spacing-2_5,
+  '3': $spacing-3,
+  '3\\.5': $spacing-3_5,
+  '4': $spacing-4,
+  '5': $spacing-5,
+  '6': $spacing-6,
+  '7': $spacing-7,
+  '8': $spacing-8,
+  '9': $spacing-9,
+  '10': $spacing-10,
+  '11': $spacing-11,
+  '12': $spacing-12,
+  '14': $spacing-14,
+  '16': $spacing-16,
+  '20': $spacing-20,
+  '24': $spacing-24,
+  '28': $spacing-28,
+  '32': $spacing-32,
+  '36': $spacing-36,
+  '40': $spacing-40,
+  '44': $spacing-44,
+  '48': $spacing-48,
+  '52': $spacing-52,
+  '56': $spacing-56,
+  '60': $spacing-60,
+  '64': $spacing-64,
+  '72': $spacing-72,
+  '80': $spacing-80,
+  '96': $spacing-96,
+);
+
+// CSS Custom Properties for spacing
+:root {
+  --spacing-0: #{$spacing-0};
+  --spacing-px: #{$spacing-px};
+  --spacing-0_5: #{$spacing-0_5};
+  --spacing-1: #{$spacing-1};
+  --spacing-1_5: #{$spacing-1_5};
+  --spacing-2: #{$spacing-2};
+  --spacing-2_5: #{$spacing-2_5};
+  --spacing-3: #{$spacing-3};
+  --spacing-3_5: #{$spacing-3_5};
+  --spacing-4: #{$spacing-4};
+  --spacing-5: #{$spacing-5};
+  --spacing-6: #{$spacing-6};
+  --spacing-7: #{$spacing-7};
+  --spacing-8: #{$spacing-8};
+  --spacing-9: #{$spacing-9};
+  --spacing-10: #{$spacing-10};
+  --spacing-11: #{$spacing-11};
+  --spacing-12: #{$spacing-12};
+  --spacing-14: #{$spacing-14};
+  --spacing-16: #{$spacing-16};
+  --spacing-20: #{$spacing-20};
+  --spacing-24: #{$spacing-24};
+  --spacing-28: #{$spacing-28};
+  --spacing-32: #{$spacing-32};
+  --spacing-36: #{$spacing-36};
+  --spacing-40: #{$spacing-40};
+  --spacing-44: #{$spacing-44};
+  --spacing-48: #{$spacing-48};
+  --spacing-52: #{$spacing-52};
+  --spacing-56: #{$spacing-56};
+  --spacing-60: #{$spacing-60};
+  --spacing-64: #{$spacing-64};
+  --spacing-72: #{$spacing-72};
+  --spacing-80: #{$spacing-80};
+  --spacing-96: #{$spacing-96};
+}
+
+// ============================================================================
+// 2. MARGIN UTILITIES
+// ============================================================================
+// All sides margin
+@each $key, $value in $spacing-map {
+  .m-#{$key} { margin: $value !important; }
+}
+.m-auto { margin: auto !important; }
+
+// Margin X (horizontal)
+@each $key, $value in $spacing-map {
+  .mx-#{$key} { 
+    margin-left: $value !important; 
+    margin-right: $value !important; 
+  }
+}
+.mx-auto { 
+  margin-left: auto !important; 
+  margin-right: auto !important; 
+}
+
+// Margin Y (vertical)
+@each $key, $value in $spacing-map {
+  .my-#{$key} { 
+    margin-top: $value !important; 
+    margin-bottom: $value !important; 
+  }
+}
+.my-auto { 
+  margin-top: auto !important; 
+  margin-bottom: auto !important; 
+}
+
+// Margin Top
+@each $key, $value in $spacing-map {
+  .mt-#{$key} { margin-top: $value !important; }
+}
+.mt-auto { margin-top: auto !important; }
+
+// Margin Right
+@each $key, $value in $spacing-map {
+  .mr-#{$key} { margin-right: $value !important; }
+}
+.mr-auto { margin-right: auto !important; }
+
+// Margin Bottom
+@each $key, $value in $spacing-map {
+  .mb-#{$key} { margin-bottom: $value !important; }
+}
+.mb-auto { margin-bottom: auto !important; }
+
+// Margin Left
+@each $key, $value in $spacing-map {
+  .ml-#{$key} { margin-left: $value !important; }
+}
+.ml-auto { margin-left: auto !important; }
+
+// Margin Start (logical)
+@each $key, $value in $spacing-map {
+  .ms-#{$key} { margin-inline-start: $value !important; }
+}
+.ms-auto { margin-inline-start: auto !important; }
+
+// Margin End (logical)
+@each $key, $value in $spacing-map {
+  .me-#{$key} { margin-inline-end: $value !important; }
+}
+.me-auto { margin-inline-end: auto !important; }
+
+// Negative margins
+@each $key, $value in $spacing-map {
+  @if $key != '0' and $key != 'px' {
+    .-m-#{$key} { margin: -#{$value} !important; }
+    .-mx-#{$key} { margin-left: -#{$value} !important; margin-right: -#{$value} !important; }
+    .-my-#{$key} { margin-top: -#{$value} !important; margin-bottom: -#{$value} !important; }
+    .-mt-#{$key} { margin-top: -#{$value} !important; }
+    .-mr-#{$key} { margin-right: -#{$value} !important; }
+    .-mb-#{$key} { margin-bottom: -#{$value} !important; }
+    .-ml-#{$key} { margin-left: -#{$value} !important; }
+  }
+}
+
+// ============================================================================
+// 3. PADDING UTILITIES
+// ============================================================================
+// All sides padding
+@each $key, $value in $spacing-map {
+  .p-#{$key} { padding: $value !important; }
+}
+
+// Padding X (horizontal)
+@each $key, $value in $spacing-map {
+  .px-#{$key} { 
+    padding-left: $value !important; 
+    padding-right: $value !important; 
+  }
+}
+
+// Padding Y (vertical)
+@each $key, $value in $spacing-map {
+  .py-#{$key} { 
+    padding-top: $value !important; 
+    padding-bottom: $value !important; 
+  }
+}
+
+// Padding Top
+@each $key, $value in $spacing-map {
+  .pt-#{$key} { padding-top: $value !important; }
+}
+
+// Padding Right
+@each $key, $value in $spacing-map {
+  .pr-#{$key} { padding-right: $value !important; }
+}
+
+// Padding Bottom
+@each $key, $value in $spacing-map {
+  .pb-#{$key} { padding-bottom: $value !important; }
+}
+
+// Padding Left
+@each $key, $value in $spacing-map {
+  .pl-#{$key} { padding-left: $value !important; }
+}
+
+// Padding Start (logical)
+@each $key, $value in $spacing-map {
+  .ps-#{$key} { padding-inline-start: $value !important; }
+}
+
+// Padding End (logical)
+@each $key, $value in $spacing-map {
+  .pe-#{$key} { padding-inline-end: $value !important; }
+}
+
+// ============================================================================
+// 4. GAP UTILITIES (for Flexbox/Grid)
+// ============================================================================
+@each $key, $value in $spacing-map {
+  .gap-#{$key} { gap: $value !important; }
+  .gap-x-#{$key} { column-gap: $value !important; }
+  .gap-y-#{$key} { row-gap: $value !important; }
+}
+
+// ============================================================================
+// 5. WIDTH UTILITIES
+// ============================================================================
+// Fractional widths using hyphen separator (SCSS-compatible naming)
+// Format: {numerator}-{denominator} e.g., 1-2 = 1/2 = 50%
+$width-fractions: (
+  '1-2': 50%,
+  '1-3': 33.333333%,
+  '2-3': 66.666667%,
+  '1-4': 25%,
+  '2-4': 50%,
+  '3-4': 75%,
+  '1-5': 20%,
+  '2-5': 40%,
+  '3-5': 60%,
+  '4-5': 80%,
+  '1-6': 16.666667%,
+  '2-6': 33.333333%,
+  '3-6': 50%,
+  '4-6': 66.666667%,
+  '5-6': 83.333333%,
+  '1-12': 8.333333%,
+  '2-12': 16.666667%,
+  '3-12': 25%,
+  '4-12': 33.333333%,
+  '5-12': 41.666667%,
+  '6-12': 50%,
+  '7-12': 58.333333%,
+  '8-12': 66.666667%,
+  '9-12': 75%,
+  '10-12': 83.333333%,
+  '11-12': 91.666667%,
+);
+
+// Fixed widths
+@each $key, $value in $spacing-map {
+  .w-#{$key} { width: $value !important; }
+}
+
+// Fraction widths
+@each $key, $value in $width-fractions {
+  .w-#{$key} { width: $value !important; }
+}
+
+// Special widths
+.w-auto { width: auto !important; }
+.w-full { width: 100% !important; }
+.w-screen { width: 100vw !important; }
+.w-svw { width: 100svw !important; }
+.w-lvw { width: 100lvw !important; }
+.w-dvw { width: 100dvw !important; }
+.w-min { width: min-content !important; }
+.w-max { width: max-content !important; }
+.w-fit { width: fit-content !important; }
+
+// Min-width
+.min-w-0 { min-width: 0 !important; }
+.min-w-full { min-width: 100% !important; }
+.min-w-min { min-width: min-content !important; }
+.min-w-max { min-width: max-content !important; }
+.min-w-fit { min-width: fit-content !important; }
+
+// Max-width
+.max-w-0 { max-width: 0 !important; }
+.max-w-none { max-width: none !important; }
+.max-w-xs { max-width: 20rem !important; }      // 320px
+.max-w-sm { max-width: 24rem !important; }      // 384px
+.max-w-md { max-width: 28rem !important; }      // 448px
+.max-w-lg { max-width: 32rem !important; }      // 512px
+.max-w-xl { max-width: 36rem !important; }      // 576px
+.max-w-2xl { max-width: 42rem !important; }     // 672px
+.max-w-3xl { max-width: 48rem !important; }     // 768px
+.max-w-4xl { max-width: 56rem !important; }     // 896px
+.max-w-5xl { max-width: 64rem !important; }     // 1024px
+.max-w-6xl { max-width: 72rem !important; }     // 1152px
+.max-w-7xl { max-width: 80rem !important; }     // 1280px
+.max-w-full { max-width: 100% !important; }
+.max-w-min { max-width: min-content !important; }
+.max-w-max { max-width: max-content !important; }
+.max-w-fit { max-width: fit-content !important; }
+.max-w-prose { max-width: 65ch !important; }
+.max-w-screen-sm { max-width: 640px !important; }
+.max-w-screen-md { max-width: 768px !important; }
+.max-w-screen-lg { max-width: 1024px !important; }
+.max-w-screen-xl { max-width: 1280px !important; }
+.max-w-screen-2xl { max-width: 1536px !important; }
+
+// ============================================================================
+// 6. HEIGHT UTILITIES
+// ============================================================================
+// Fixed heights
+@each $key, $value in $spacing-map {
+  .h-#{$key} { height: $value !important; }
+}
+
+// Fraction heights
+@each $key, $value in $width-fractions {
+  .h-#{$key} { height: $value !important; }
+}
+
+// Special heights
+.h-auto { height: auto !important; }
+.h-full { height: 100% !important; }
+.h-screen { height: 100vh !important; }
+.h-svh { height: 100svh !important; }
+.h-lvh { height: 100lvh !important; }
+.h-dvh { height: 100dvh !important; }
+.h-min { height: min-content !important; }
+.h-max { height: max-content !important; }
+.h-fit { height: fit-content !important; }
+
+// Min-height
+.min-h-0 { min-height: 0 !important; }
+.min-h-full { min-height: 100% !important; }
+.min-h-screen { min-height: 100vh !important; }
+.min-h-svh { min-height: 100svh !important; }
+.min-h-lvh { min-height: 100lvh !important; }
+.min-h-dvh { min-height: 100dvh !important; }
+.min-h-min { min-height: min-content !important; }
+.min-h-max { min-height: max-content !important; }
+.min-h-fit { min-height: fit-content !important; }
+
+// Max-height
+.max-h-0 { max-height: 0 !important; }
+.max-h-none { max-height: none !important; }
+.max-h-full { max-height: 100% !important; }
+.max-h-screen { max-height: 100vh !important; }
+.max-h-svh { max-height: 100svh !important; }
+.max-h-lvh { max-height: 100lvh !important; }
+.max-h-dvh { max-height: 100dvh !important; }
+.max-h-min { max-height: min-content !important; }
+.max-h-max { max-height: max-content !important; }
+.max-h-fit { max-height: fit-content !important; }
+
+// ============================================================================
+// 7. SQUARE SIZE (width & height equal)
+// ============================================================================
+@each $key, $value in $spacing-map {
+  .size-#{$key} { 
+    width: $value !important; 
+    height: $value !important; 
+  }
+}
+.size-auto { width: auto !important; height: auto !important; }
+.size-full { width: 100% !important; height: 100% !important; }
+
+// ============================================================================
+// 8. FLEXBOX UTILITIES
+// ============================================================================
+
+// Display
+.flex { display: flex !important; }
+.inline-flex { display: inline-flex !important; }
+
+// Flex Direction
+.flex-row { flex-direction: row !important; }
+.flex-row-reverse { flex-direction: row-reverse !important; }
+.flex-col { flex-direction: column !important; }
+.flex-col-reverse { flex-direction: column-reverse !important; }
+
+// Flex Wrap
+.flex-wrap { flex-wrap: wrap !important; }
+.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
+.flex-nowrap { flex-wrap: nowrap !important; }
+
+// Flex
+.flex-1 { flex: 1 1 0% !important; }
+.flex-auto { flex: 1 1 auto !important; }
+.flex-initial { flex: 0 1 auto !important; }
+.flex-none { flex: none !important; }
+
+// Flex Grow
+.grow { flex-grow: 1 !important; }
+.grow-0 { flex-grow: 0 !important; }
+
+// Flex Shrink
+.shrink { flex-shrink: 1 !important; }
+.shrink-0 { flex-shrink: 0 !important; }
+
+// Flex Basis
+.basis-0 { flex-basis: 0 !important; }
+.basis-1 { flex-basis: $spacing-1 !important; }
+.basis-2 { flex-basis: $spacing-2 !important; }
+.basis-4 { flex-basis: $spacing-4 !important; }
+.basis-8 { flex-basis: $spacing-8 !important; }
+.basis-12 { flex-basis: $spacing-12 !important; }
+.basis-16 { flex-basis: $spacing-16 !important; }
+.basis-auto { flex-basis: auto !important; }
+.basis-full { flex-basis: 100% !important; }
+@each $key, $value in $width-fractions {
+  .basis-#{$key} { flex-basis: $value !important; }
+}
+
+// Justify Content
+.justify-start { justify-content: flex-start !important; }
+.justify-end { justify-content: flex-end !important; }
+.justify-center { justify-content: center !important; }
+.justify-between { justify-content: space-between !important; }
+.justify-around { justify-content: space-around !important; }
+.justify-evenly { justify-content: space-evenly !important; }
+.justify-stretch { justify-content: stretch !important; }
+
+// Justify Items
+.justify-items-start { justify-items: start !important; }
+.justify-items-end { justify-items: end !important; }
+.justify-items-center { justify-items: center !important; }
+.justify-items-stretch { justify-items: stretch !important; }
+
+// Justify Self
+.justify-self-auto { justify-self: auto !important; }
+.justify-self-start { justify-self: start !important; }
+.justify-self-end { justify-self: end !important; }
+.justify-self-center { justify-self: center !important; }
+.justify-self-stretch { justify-self: stretch !important; }
+
+// Align Content
+.content-start { align-content: flex-start !important; }
+.content-end { align-content: flex-end !important; }
+.content-center { align-content: center !important; }
+.content-between { align-content: space-between !important; }
+.content-around { align-content: space-around !important; }
+.content-evenly { align-content: space-evenly !important; }
+.content-stretch { align-content: stretch !important; }
+.content-baseline { align-content: baseline !important; }
+
+// Align Items
+.items-start { align-items: flex-start !important; }
+.items-end { align-items: flex-end !important; }
+.items-center { align-items: center !important; }
+.items-baseline { align-items: baseline !important; }
+.items-stretch { align-items: stretch !important; }
+
+// Align Self
+.self-auto { align-self: auto !important; }
+.self-start { align-self: flex-start !important; }
+.self-end { align-self: flex-end !important; }
+.self-center { align-self: center !important; }
+.self-baseline { align-self: baseline !important; }
+.self-stretch { align-self: stretch !important; }
+
+// Place Content
+.place-content-start { place-content: start !important; }
+.place-content-end { place-content: end !important; }
+.place-content-center { place-content: center !important; }
+.place-content-between { place-content: space-between !important; }
+.place-content-around { place-content: space-around !important; }
+.place-content-evenly { place-content: space-evenly !important; }
+.place-content-stretch { place-content: stretch !important; }
+.place-content-baseline { place-content: baseline !important; }
+
+// Place Items
+.place-items-start { place-items: start !important; }
+.place-items-end { place-items: end !important; }
+.place-items-center { place-items: center !important; }
+.place-items-baseline { place-items: baseline !important; }
+.place-items-stretch { place-items: stretch !important; }
+
+// Place Self
+.place-self-auto { place-self: auto !important; }
+.place-self-start { place-self: start !important; }
+.place-self-end { place-self: end !important; }
+.place-self-center { place-self: center !important; }
+.place-self-stretch { place-self: stretch !important; }
+
+// ============================================================================
+// 9. CSS GRID UTILITIES
+// ============================================================================
+
+// Display
+.grid { display: grid !important; }
+.inline-grid { display: inline-grid !important; }
+
+// Grid Template Columns
+.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
+.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
+.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
+.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
+.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
+.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
+.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
+.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
+.grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; }
+.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
+.grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)) !important; }
+.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
+.grid-cols-none { grid-template-columns: none !important; }
+.grid-cols-subgrid { grid-template-columns: subgrid !important; }
+
+// Grid Column Span
+.col-auto { grid-column: auto !important; }
+.col-span-1 { grid-column: span 1 / span 1 !important; }
+.col-span-2 { grid-column: span 2 / span 2 !important; }
+.col-span-3 { grid-column: span 3 / span 3 !important; }
+.col-span-4 { grid-column: span 4 / span 4 !important; }
+.col-span-5 { grid-column: span 5 / span 5 !important; }
+.col-span-6 { grid-column: span 6 / span 6 !important; }
+.col-span-7 { grid-column: span 7 / span 7 !important; }
+.col-span-8 { grid-column: span 8 / span 8 !important; }
+.col-span-9 { grid-column: span 9 / span 9 !important; }
+.col-span-10 { grid-column: span 10 / span 10 !important; }
+.col-span-11 { grid-column: span 11 / span 11 !important; }
+.col-span-12 { grid-column: span 12 / span 12 !important; }
+.col-span-full { grid-column: 1 / -1 !important; }
+
+// Grid Column Start
+.col-start-1 { grid-column-start: 1 !important; }
+.col-start-2 { grid-column-start: 2 !important; }
+.col-start-3 { grid-column-start: 3 !important; }
+.col-start-4 { grid-column-start: 4 !important; }
+.col-start-5 { grid-column-start: 5 !important; }
+.col-start-6 { grid-column-start: 6 !important; }
+.col-start-7 { grid-column-start: 7 !important; }
+.col-start-8 { grid-column-start: 8 !important; }
+.col-start-9 { grid-column-start: 9 !important; }
+.col-start-10 { grid-column-start: 10 !important; }
+.col-start-11 { grid-column-start: 11 !important; }
+.col-start-12 { grid-column-start: 12 !important; }
+.col-start-13 { grid-column-start: 13 !important; }
+.col-start-auto { grid-column-start: auto !important; }
+
+// Grid Column End
+.col-end-1 { grid-column-end: 1 !important; }
+.col-end-2 { grid-column-end: 2 !important; }
+.col-end-3 { grid-column-end: 3 !important; }
+.col-end-4 { grid-column-end: 4 !important; }
+.col-end-5 { grid-column-end: 5 !important; }
+.col-end-6 { grid-column-end: 6 !important; }
+.col-end-7 { grid-column-end: 7 !important; }
+.col-end-8 { grid-column-end: 8 !important; }
+.col-end-9 { grid-column-end: 9 !important; }
+.col-end-10 { grid-column-end: 10 !important; }
+.col-end-11 { grid-column-end: 11 !important; }
+.col-end-12 { grid-column-end: 12 !important; }
+.col-end-13 { grid-column-end: 13 !important; }
+.col-end-auto { grid-column-end: auto !important; }
+
+// Grid Template Rows
+.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)) !important; }
+.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)) !important; }
+.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)) !important; }
+.grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)) !important; }
+.grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)) !important; }
+.grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)) !important; }
+.grid-rows-none { grid-template-rows: none !important; }
+.grid-rows-subgrid { grid-template-rows: subgrid !important; }
+
+// Grid Row Span
+.row-auto { grid-row: auto !important; }
+.row-span-1 { grid-row: span 1 / span 1 !important; }
+.row-span-2 { grid-row: span 2 / span 2 !important; }
+.row-span-3 { grid-row: span 3 / span 3 !important; }
+.row-span-4 { grid-row: span 4 / span 4 !important; }
+.row-span-5 { grid-row: span 5 / span 5 !important; }
+.row-span-6 { grid-row: span 6 / span 6 !important; }
+.row-span-full { grid-row: 1 / -1 !important; }
+
+// Grid Row Start
+.row-start-1 { grid-row-start: 1 !important; }
+.row-start-2 { grid-row-start: 2 !important; }
+.row-start-3 { grid-row-start: 3 !important; }
+.row-start-4 { grid-row-start: 4 !important; }
+.row-start-5 { grid-row-start: 5 !important; }
+.row-start-6 { grid-row-start: 6 !important; }
+.row-start-7 { grid-row-start: 7 !important; }
+.row-start-auto { grid-row-start: auto !important; }
+
+// Grid Row End
+.row-end-1 { grid-row-end: 1 !important; }
+.row-end-2 { grid-row-end: 2 !important; }
+.row-end-3 { grid-row-end: 3 !important; }
+.row-end-4 { grid-row-end: 4 !important; }
+.row-end-5 { grid-row-end: 5 !important; }
+.row-end-6 { grid-row-end: 6 !important; }
+.row-end-7 { grid-row-end: 7 !important; }
+.row-end-auto { grid-row-end: auto !important; }
+
+// Grid Auto Flow
+.grid-flow-row { grid-auto-flow: row !important; }
+.grid-flow-col { grid-auto-flow: column !important; }
+.grid-flow-dense { grid-auto-flow: dense !important; }
+.grid-flow-row-dense { grid-auto-flow: row dense !important; }
+.grid-flow-col-dense { grid-auto-flow: column dense !important; }
+
+// Grid Auto Columns
+.auto-cols-auto { grid-auto-columns: auto !important; }
+.auto-cols-min { grid-auto-columns: min-content !important; }
+.auto-cols-max { grid-auto-columns: max-content !important; }
+.auto-cols-fr { grid-auto-columns: minmax(0, 1fr) !important; }
+
+// Grid Auto Rows
+.auto-rows-auto { grid-auto-rows: auto !important; }
+.auto-rows-min { grid-auto-rows: min-content !important; }
+.auto-rows-max { grid-auto-rows: max-content !important; }
+.auto-rows-fr { grid-auto-rows: minmax(0, 1fr) !important; }
+
+// ============================================================================
+// 10. ORDER UTILITIES
+// ============================================================================
+.order-first { order: -9999 !important; }
+.order-last { order: 9999 !important; }
+.order-none { order: 0 !important; }
+.order-1 { order: 1 !important; }
+.order-2 { order: 2 !important; }
+.order-3 { order: 3 !important; }
+.order-4 { order: 4 !important; }
+.order-5 { order: 5 !important; }
+.order-6 { order: 6 !important; }
+.order-7 { order: 7 !important; }
+.order-8 { order: 8 !important; }
+.order-9 { order: 9 !important; }
+.order-10 { order: 10 !important; }
+.order-11 { order: 11 !important; }
+.order-12 { order: 12 !important; }
+
+// ============================================================================
+// 11. DISPLAY UTILITIES
+// ============================================================================
+.block { display: block !important; }
+.inline-block { display: inline-block !important; }
+.inline { display: inline !important; }
+.hidden { display: none !important; }
+.contents { display: contents !important; }
+.flow-root { display: flow-root !important; }
+.list-item { display: list-item !important; }
+
+// Table display
+.table { display: table !important; }
+.inline-table { display: inline-table !important; }
+.table-caption { display: table-caption !important; }
+.table-cell { display: table-cell !important; }
+.table-column { display: table-column !important; }
+.table-column-group { display: table-column-group !important; }
+.table-footer-group { display: table-footer-group !important; }
+.table-header-group { display: table-header-group !important; }
+.table-row-group { display: table-row-group !important; }
+.table-row { display: table-row !important; }
+
+// ============================================================================
+// 12. POSITION UTILITIES
+// ============================================================================
+.static { position: static !important; }
+.fixed { position: fixed !important; }
+.absolute { position: absolute !important; }
+.relative { position: relative !important; }
+.sticky { position: sticky !important; }
+
+// Top/Right/Bottom/Left
+$inset-values: (
+  '0': 0,
+  'px': 1px,
+  '0\\.5': $spacing-0_5,
+  '1': $spacing-1,
+  '2': $spacing-2,
+  '3': $spacing-3,
+  '4': $spacing-4,
+  '5': $spacing-5,
+  '6': $spacing-6,
+  '8': $spacing-8,
+  '10': $spacing-10,
+  '12': $spacing-12,
+  '16': $spacing-16,
+  '20': $spacing-20,
+  '24': $spacing-24,
+  '1\\/2': 50%,
+  '1\\/3': 33.333333%,
+  '2\\/3': 66.666667%,
+  '1\\/4': 25%,
+  '3\\/4': 75%,
+  'full': 100%,
+  'auto': auto,
+);
+
+@each $key, $value in $inset-values {
+  .inset-#{$key} { inset: $value !important; }
+  .inset-x-#{$key} { left: $value !important; right: $value !important; }
+  .inset-y-#{$key} { top: $value !important; bottom: $value !important; }
+  .top-#{$key} { top: $value !important; }
+  .right-#{$key} { right: $value !important; }
+  .bottom-#{$key} { bottom: $value !important; }
+  .left-#{$key} { left: $value !important; }
+  .start-#{$key} { inset-inline-start: $value !important; }
+  .end-#{$key} { inset-inline-end: $value !important; }
+  
+  // Negative values
+  @if $value != auto and $key != '0' {
+    .-inset-#{$key} { inset: -#{$value} !important; }
+    .-inset-x-#{$key} { left: -#{$value} !important; right: -#{$value} !important; }
+    .-inset-y-#{$key} { top: -#{$value} !important; bottom: -#{$value} !important; }
+    .-top-#{$key} { top: -#{$value} !important; }
+    .-right-#{$key} { right: -#{$value} !important; }
+    .-bottom-#{$key} { bottom: -#{$value} !important; }
+    .-left-#{$key} { left: -#{$value} !important; }
+  }
+}
+
+// ============================================================================
+// 13. Z-INDEX UTILITIES
+// ============================================================================
+.z-0 { z-index: 0 !important; }
+.z-10 { z-index: 10 !important; }
+.z-20 { z-index: 20 !important; }
+.z-30 { z-index: 30 !important; }
+.z-40 { z-index: 40 !important; }
+.z-50 { z-index: 50 !important; }
+.z-auto { z-index: auto !important; }
+.-z-10 { z-index: -10 !important; }
+
+// ============================================================================
+// 14. OVERFLOW UTILITIES
+// ============================================================================
+.overflow-auto { overflow: auto !important; }
+.overflow-hidden { overflow: hidden !important; }
+.overflow-clip { overflow: clip !important; }
+.overflow-visible { overflow: visible !important; }
+.overflow-scroll { overflow: scroll !important; }
+
+.overflow-x-auto { overflow-x: auto !important; }
+.overflow-x-hidden { overflow-x: hidden !important; }
+.overflow-x-clip { overflow-x: clip !important; }
+.overflow-x-visible { overflow-x: visible !important; }
+.overflow-x-scroll { overflow-x: scroll !important; }
+
+.overflow-y-auto { overflow-y: auto !important; }
+.overflow-y-hidden { overflow-y: hidden !important; }
+.overflow-y-clip { overflow-y: clip !important; }
+.overflow-y-visible { overflow-y: visible !important; }
+.overflow-y-scroll { overflow-y: scroll !important; }
+
+// ============================================================================
+// 15. VISIBILITY UTILITIES
+// ============================================================================
+.visible { visibility: visible !important; }
+.invisible { visibility: hidden !important; }
+.collapse { visibility: collapse !important; }
+
+// ============================================================================
+// 16. ASPECT RATIO UTILITIES
+// ============================================================================
+.aspect-auto { aspect-ratio: auto !important; }
+.aspect-square { aspect-ratio: 1 / 1 !important; }
+.aspect-video { aspect-ratio: 16 / 9 !important; }
+.aspect-4\\/3 { aspect-ratio: 4 / 3 !important; }
+.aspect-3\\/2 { aspect-ratio: 3 / 2 !important; }
+.aspect-2\\/1 { aspect-ratio: 2 / 1 !important; }
+
+// ============================================================================
+// 17. OBJECT FIT & POSITION UTILITIES
+// ============================================================================
+.object-contain { object-fit: contain !important; }
+.object-cover { object-fit: cover !important; }
+.object-fill { object-fit: fill !important; }
+.object-none { object-fit: none !important; }
+.object-scale-down { object-fit: scale-down !important; }
+
+.object-bottom { object-position: bottom !important; }
+.object-center { object-position: center !important; }
+.object-left { object-position: left !important; }
+.object-left-bottom { object-position: left bottom !important; }
+.object-left-top { object-position: left top !important; }
+.object-right { object-position: right !important; }
+.object-right-bottom { object-position: right bottom !important; }
+.object-right-top { object-position: right top !important; }
+.object-top { object-position: top !important; }
+
+// ============================================================================
+// 18. FLOAT & CLEAR UTILITIES
+// ============================================================================
+.float-start { float: inline-start !important; }
+.float-end { float: inline-end !important; }
+.float-left { float: left !important; }
+.float-right { float: right !important; }
+.float-none { float: none !important; }
+
+.clear-left { clear: left !important; }
+.clear-right { clear: right !important; }
+.clear-both { clear: both !important; }
+.clear-none { clear: none !important; }
+.clear-start { clear: inline-start !important; }
+.clear-end { clear: inline-end !important; }
+
+// ============================================================================
+// 19. CONTAINER UTILITY
+// ============================================================================
+.container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--spacing-4);
+  padding-right: var(--spacing-4);
+  
+  @media (min-width: 640px) {
+    max-width: 640px;
+  }
+  @media (min-width: 768px) {
+    max-width: 768px;
+  }
+  @media (min-width: 1024px) {
+    max-width: 1024px;
+  }
+  @media (min-width: 1280px) {
+    max-width: 1280px;
+  }
+  @media (min-width: 1536px) {
+    max-width: 1536px;
+  }
+}
+
+.container-fluid {
+  width: 100%;
+  padding-left: var(--spacing-4);
+  padding-right: var(--spacing-4);
+}
+
+// ============================================================================
+// 20. BOX SIZING UTILITIES
+// ============================================================================
+.box-border { box-sizing: border-box !important; }
+.box-content { box-sizing: content-box !important; }
+
+// ============================================================================
+// 21. ISOLATION UTILITIES
+// ============================================================================
+.isolate { isolation: isolate !important; }
+.isolation-auto { isolation: auto !important; }
+
+// ============================================================================
+// 22. SCROLLBAR UTILITIES
+// ============================================================================
+.scrollbar-auto { scrollbar-width: auto !important; }
+.scrollbar-thin { scrollbar-width: thin !important; }
+.scrollbar-none { scrollbar-width: none !important; }
+
+// Overscroll behavior
+.overscroll-auto { overscroll-behavior: auto !important; }
+.overscroll-contain { overscroll-behavior: contain !important; }
+.overscroll-none { overscroll-behavior: none !important; }
+.overscroll-x-auto { overscroll-behavior-x: auto !important; }
+.overscroll-x-contain { overscroll-behavior-x: contain !important; }
+.overscroll-x-none { overscroll-behavior-x: none !important; }
+.overscroll-y-auto { overscroll-behavior-y: auto !important; }
+.overscroll-y-contain { overscroll-behavior-y: contain !important; }
+.overscroll-y-none { overscroll-behavior-y: none !important; }
+
+// Scroll snap
+.snap-start { scroll-snap-align: start !important; }
+.snap-end { scroll-snap-align: end !important; }
+.snap-center { scroll-snap-align: center !important; }
+.snap-align-none { scroll-snap-align: none !important; }
+
+.snap-none { scroll-snap-type: none !important; }
+.snap-x { scroll-snap-type: x var(--snap-strictness, mandatory) !important; }
+.snap-y { scroll-snap-type: y var(--snap-strictness, mandatory) !important; }
+.snap-both { scroll-snap-type: both var(--snap-strictness, mandatory) !important; }
+.snap-mandatory { --snap-strictness: mandatory; }
+.snap-proximity { --snap-strictness: proximity; }