@collectivetrait/lineaui 0.0.0-stage → 1.0.0

package/scss/tokens/_palette.scss

@@ -0,0 +1,50 @@
+// Raw color ramps — never emitted as CSS custom properties or classes.
+// Used only by _roles.scss to derive theme values.
+
+$zinc: (
+  50:  #fafafa,
+  100: #f4f4f5,
+  200: #e4e4e7,
+  300: #d4d4d8,
+  400: #a1a1aa,
+  500: #71717a,
+  600: #52525b,
+  700: #3f3f46,
+  800: #27272a,
+  900: #18181b,
+  950: #09090b,
+);
+
+$violet: (
+  50:  #f5f3ff,
+  100: #ede9fe,
+  200: #ddd6fe,
+  300: #c4b5fd,
+  400: #a78bfa,
+  500: #8b5cf6,
+  600: #7c3aed,
+  700: #6d28d9,
+  800: #5b21b6,
+  900: #4c1d95,
+  950: #2e1065,
+);
+
+$teal: (
+  50:  #f0fdfa,
+  100: #ccfbf1,
+  200: #99f6e4,
+  300: #5eead4,
+  400: #2dd4bf,
+  500: #14b8a6,
+  600: #0d9488,
+  700: #0f766e,
+  800: #115e59,
+  900: #134e4a,
+  950: #042f2e,
+);
+
+// Remaining ramps — stub, filled during component passes
+$emerald: ();
+$amber:   ();
+$red:     ();
+$blue:    ();

package/scss/tokens/_roles.scss

@@ -0,0 +1,90 @@
+@layer tokens {
+  :root {
+    color-scheme: light dark;
+
+    // Canvas / surface
+    --canvas:          light-dark(#FAFAFA, #09090B);
+    --surface:         light-dark(#FFFFFF, #18181B);
+    --surface-raised:  light-dark(#F4F4F5, #2C2C31);
+    --surface-sunken:  light-dark(#F4F4F5, #040405);
+    --surface-inverse: light-dark(#18181B, #FAFAFA);
+    --overlay:         light-dark(rgba(24,24,27,0.4), rgba(0,0,0,0.6));
+
+    // Text
+    --text:          light-dark(#09090B, #FAFAFA);
+    --c-muted:    light-dark(#52525B, #A1A1AA);
+    --c-subtle:   light-dark(#71717A, #828289);
+    --c-disabled: light-dark(#A1A1AA, #3F3F46);
+    --c-inverse:  light-dark(#FAFAFA, #09090B);
+
+    // Border
+    --border:         light-dark(#E4E4E7, #3F3F46);
+    --border-control: light-dark(#E4E4E7, #3F3F46);
+    --border-strong:  light-dark(#52525B, #71717A);
+
+    // Primary (violet)
+    --primary:         light-dark(#7C3AED, #8B5CF6);
+    --primary-text:    light-dark(#7C3AED, #8B5CF6);
+    --on-primary:      #FFFFFF;
+    --primary-subtle:  color-mix(in srgb, var(--primary) 16%, var(--canvas));
+    --primary-hover:   color-mix(in srgb, var(--primary) 88%, var(--canvas));
+    --primary-border:  color-mix(in srgb, var(--primary) 40%, var(--canvas));
+
+    // Secondary (teal)
+    --secondary:         #0D9488;
+    --secondary-text:    light-dark(#115E59, #2DD4BF);
+    --on-secondary:      #FFFFFF;
+    --secondary-subtle:  color-mix(in srgb, var(--secondary) 12%, var(--canvas));
+    --secondary-hover:   color-mix(in srgb, var(--secondary) 88%, var(--canvas));
+    --secondary-border:  color-mix(in srgb, var(--secondary) 40%, var(--canvas));
+
+    // Success (green)
+    --success:         #16A34A;
+    --success-text:    light-dark(#15803D, #4ADE80);
+    --on-success:      #FFFFFF;
+    --success-subtle:  color-mix(in srgb, var(--success) 12%, var(--canvas));
+    --success-hover:   color-mix(in srgb, var(--success) 88%, var(--canvas));
+    --success-border:  color-mix(in srgb, var(--success) 40%, var(--canvas));
+
+    // Warning (amber)
+    --warning:         light-dark(#D97706, #FBBF24);
+    --warning-text:    light-dark(#92400E, #FBBF24);
+    --on-warning:      #FFFFFF;
+    --warning-subtle:  color-mix(in srgb, var(--warning) 12%, var(--canvas));
+    --warning-hover:   color-mix(in srgb, var(--warning) 88%, var(--canvas));
+    --warning-border:  color-mix(in srgb, var(--warning) 40%, var(--canvas));
+
+    // Danger (red)
+    --danger:         #DC2626;
+    --danger-text:    light-dark(#DC2626, #F87171);
+    --on-danger:      #FFFFFF;
+    --danger-subtle:  color-mix(in srgb, var(--danger) 12%, var(--canvas));
+    --danger-hover:   color-mix(in srgb, var(--danger) 88%, var(--canvas));
+    --danger-border:  color-mix(in srgb, var(--danger) 40%, var(--canvas));
+
+    // Info (blue)
+    --info:         #2563EB;
+    --info-text:    light-dark(#2563EB, #60A5FA);
+    --on-info:      #FFFFFF;
+    --info-subtle:  color-mix(in srgb, var(--info) 12%, var(--canvas));
+    --info-hover:   color-mix(in srgb, var(--info) 88%, var(--canvas));
+    --info-border:  color-mix(in srgb, var(--info) 40%, var(--canvas));
+
+    // Neutral (surface-based)
+    --neutral:        var(--surface-raised);
+    --neutral-text:   var(--text);
+    --on-neutral:     var(--text);
+    --neutral-subtle: var(--surface-sunken);
+    --neutral-border: light-dark(#E4E4E7, #3F3F46);
+
+    // Link, focus, selection
+    --link:       var(--primary-text);
+    --link-hover: color-mix(in srgb, var(--primary-text) 80%, var(--canvas));
+    --focus:      var(--primary);
+    --selection:  color-mix(in srgb, var(--primary) 30%, transparent);
+  }
+
+  // Force theme for a subtree
+  [data-theme="light"] { color-scheme: light; }
+  [data-theme="dark"]  { color-scheme: dark; }
+}

package/scss/tokens/_space.scss

@@ -0,0 +1,9 @@
+@layer tokens {
+  :root {
+    --s-h: 0.25rem;  // 4px  — inline internals only
+    --s1:  0.5rem;   // 8px
+    --s2:  1rem;     // 16px
+    --s3:  1.5rem;   // 24px (1 line)
+    --s4:  2rem;     // 32px
+  }
+}

package/scss/tokens/_type.scss

@@ -0,0 +1,57 @@
+@use '../settings' as s;
+
+@layer tokens {
+  :root {
+    --f-prose: #{s.$font-prose};
+    --f-ui:    #{s.$font-ui};
+    --f-mono:  #{s.$font-mono};
+
+    --t-display-1-s:  5rem;
+    --t-display-1-lh: 6rem;
+
+    --t-display-2-s:  3.5rem;
+    --t-display-2-lh: 4.5rem;
+
+    --t-h1-s:  2.5rem;
+    --t-h1-lh: 3rem;
+
+    --t-h2-s:  2rem;
+    --t-h2-lh: 3rem;
+
+    --t-h3-s:  1.25rem;
+    --t-h3-lh: 1.5rem;
+
+    --t-h4-s:  1.125rem;
+    --t-h4-lh: 1.5rem;
+
+    --t-h5-s:  1rem;
+    --t-h5-lh: 1.5rem;
+
+    --t-h6-s:  0.75rem;
+    --t-h6-lh: 1rem;
+
+    --t-lead-s:  1.125rem;
+    --t-lead-lh: 1.5rem;
+
+    --t-body-prose-s:  1rem;
+    --t-body-prose-lh: 1.5rem;
+
+    --t-body-lg-s:  1.125rem;
+    --t-body-lg-lh: 1.5rem;
+
+    --t-body-s:  1rem;
+    --t-body-lh: 1.5rem;
+
+    --t-body-sm-s:  0.875rem;
+    --t-body-sm-lh: 1.5rem;
+
+    --t-body-xs-s:  0.75rem;
+    --t-body-xs-lh: 1rem;
+
+    --t-meta-s:  0.75rem;
+    --t-meta-lh: 1rem;
+
+    --t-code-s:  0.875rem;
+    --t-code-lh: 1.5rem;
+  }
+}

package/scss/tools/_bem.scss

@@ -0,0 +1,22 @@
+@use '../settings' as s;
+
+// Use at the top of every block file to emit the prefixed root class.
+@mixin block($name) {
+  .#{s.$prefix}#{$name} {
+    @content;
+  }
+}
+
+// Use inside a block mixin for BEM elements.
+@mixin element($name) {
+  &__#{$name} {
+    @content;
+  }
+}
+
+// Use inside a block mixin for BEM modifiers.
+@mixin modifier($name) {
+  &--#{$name} {
+    @content;
+  }
+}

package/scss/tools/_index.scss

@@ -0,0 +1,4 @@
+@forward 'rhythm';
+@forward 'bem';
+@forward 'role-engine';
+@forward 'utility-generator';

package/scss/tools/_rhythm.scss

@@ -0,0 +1,26 @@
+@use '../settings' as s;
+
+@function step($n) {
+  @return $n * s.$g;
+}
+
+@function lines($n) {
+  @return $n * s.$r;
+}
+
+// Returns the smallest whole multiple of $r that is >= $size * 1.1
+@function line-height($size) {
+  $min: $size * 1.1;
+  $lh: s.$r;
+  @while $lh < $min {
+    $lh: $lh + s.$r;
+  }
+  @return $lh;
+}
+
+
+@mixin assert($value) {
+  @if $value % s.$g != 0 {
+    @warn "#{$value} is not a multiple of the base grid (#{s.$g}).";
+  }
+}

package/scss/tools/_role-engine.scss

@@ -0,0 +1,16 @@
+@use '../settings' as s;
+
+$roles: (primary, secondary, success, warning, danger, info);
+
+@mixin role-modifiers {
+  @each $role in $roles {
+    &--#{$role} {
+      --_fill: var(--#{$role});
+      --_on: var(--on-#{$role});
+      --_subtle: var(--#{$role}-subtle);
+      --_text: var(--#{$role}-text);
+      --_border-color: var(--#{$role}-border);
+      --_hover: var(--#{$role}-hover);
+    }
+  }
+}

package/scss/tools/_utility-generator.scss

@@ -0,0 +1,74 @@
+@use 'sass:map';
+@use 'sass:list';
+@use '../settings' as s;
+
+@mixin _emit-family($config, $suffix: '') {
+  $class: map.get($config, class);
+
+  @if map.has-key($config, property) {
+    $property: map.get($config, property);
+    $values:   map.get($config, values);
+
+    @each $key, $val in $values {
+      @if $key == '' {
+        .#{$class}#{$suffix} { #{$property}: #{$val}; }
+      } @else {
+        .#{$class}-#{$key}#{$suffix} { #{$property}: #{$val}; }
+      }
+    }
+  } @else if map.has-key($config, properties) {
+    $properties: map.get($config, properties);
+    $values:     map.get($config, values);
+
+    @each $key, $val in $values {
+      @if $key == '' {
+        .#{$class}#{$suffix} {
+          @each $prop in $properties { #{$prop}: #{$val}; }
+        }
+      } @else {
+        .#{$class}-#{$key}#{$suffix} {
+          @each $prop in $properties { #{$prop}: #{$val}; }
+        }
+      }
+    }
+  } @else if map.has-key($config, declarations) {
+    $declarations: map.get($config, declarations);
+
+    @each $key, $decl-map in $declarations {
+      @if $key == '' {
+        .#{$class}#{$suffix} {
+          @each $prop, $val in $decl-map { #{$prop}: #{$val}; }
+        }
+      } @else {
+        .#{$class}-#{$key}#{$suffix} {
+          @each $prop, $val in $decl-map { #{$prop}: #{$val}; }
+        }
+      }
+    }
+  }
+}
+
+@mixin generate-utilities($utilities, $breakpoints) {
+  @each $family, $config in $utilities {
+    @if list.length(s.$utilities) == 0 or list.index(s.$utilities, $family) {
+      @include _emit-family($config);
+    }
+  }
+
+  @each $bp, $bp-val in $breakpoints {
+    @media (min-width: #{$bp-val}) {
+      @each $family, $config in $utilities {
+        @if list.length(s.$utilities) == 0 or list.index(s.$utilities, $family) {
+          $responsive: map.get($config, responsive);
+          $emit: $responsive == true;
+          @if s.$responsive-utilities != null {
+            $emit: list.index(s.$responsive-utilities, $family) != null;
+          }
+          @if $emit {
+            @include _emit-family($config, '\\@#{$bp}');
+          }
+        }
+      }
+    }
+  }
+}

package/scss/utilities/_index.scss

@@ -0,0 +1,8 @@
+@use '../settings' as s;
+@use '../tools/utility-generator' as gen;
+@use 'map' as u;
+@forward 'map';
+
+@layer utilities {
+  @include gen.generate-utilities(u.$utilities, s.$breakpoints);
+}

package/scss/utilities/_map.scss

@@ -0,0 +1,321 @@
+$space-values: (
+  '0': 0,
+  'half': var(--s-h),
+  '1': var(--s1),
+  '2': var(--s2),
+  '3': var(--s3),
+  '4': var(--s4),
+);
+
+$space-values-auto: (
+  '0': 0,
+  'half': var(--s-h),
+  '1': var(--s1),
+  '2': var(--s2),
+  '3': var(--s3),
+  '4': var(--s4),
+  'auto': auto,
+);
+
+$neg-space-values: (
+  '1px': -1px,
+  '1': calc(-1 * var(--s1)),
+  '2': calc(-1 * var(--s2)),
+  '3': calc(-1 * var(--s3)),
+  '4': calc(-1 * var(--s4)),
+);
+
+$utilities: (
+  // --- Spacing (responsive) ---
+  'm':  (class: 'm',  property: margin,          responsive: true, values: $space-values-auto),
+  'mt': (class: 'mt', property: margin-top,      responsive: true, values: $space-values-auto),
+  'mb': (class: 'mb', property: margin-bottom,   responsive: true, values: $space-values-auto),
+  'ms': (class: 'ms', property: margin-left,     responsive: true, values: $space-values-auto),
+  'me': (class: 'me', property: margin-right,    responsive: true, values: $space-values-auto),
+  'mx': (class: 'mx', property: margin-inline,   responsive: true, values: $space-values-auto),
+  'my': (class: 'my', property: margin-block,    responsive: true, values: $space-values-auto),
+
+  '-m':  (class: '-m',  property: margin,        responsive: true, values: $neg-space-values),
+  '-mx': (class: '-mx', property: margin-inline, responsive: true, values: $neg-space-values),
+  '-my': (class: '-my', property: margin-block,  responsive: true, values: $neg-space-values),
+
+  'p':  (class: 'p',  property: padding,         responsive: true, values: $space-values),
+  'pt': (class: 'pt', property: padding-top,     responsive: true, values: $space-values),
+  'pb': (class: 'pb', property: padding-bottom,  responsive: true, values: $space-values),
+  'ps': (class: 'ps', property: padding-left,    responsive: true, values: $space-values),
+  'pe': (class: 'pe', property: padding-right,   responsive: true, values: $space-values),
+  'px': (class: 'px', property: padding-inline,  responsive: true, values: $space-values),
+  'py': (class: 'py', property: padding-block,   responsive: true, values: $space-values),
+
+  'gap':        (class: 'gap',     property: gap,        responsive: true, values: $space-values),
+  'row-gap':    (class: 'row-gap', property: row-gap,    responsive: true, values: $space-values),
+  'column-gap': (class: 'col-gap', property: column-gap, responsive: true, values: $space-values),
+
+  // --- Display (responsive) ---
+  'd': (class: 'd', property: display, responsive: true, values: (
+    'none': none,
+    'inline': inline,
+    'inline-block': inline-block,
+    'block': block,
+    'flex': flex,
+    'inline-flex': inline-flex,
+    'grid': grid,
+    'inline-grid': inline-grid,
+    'contents': contents,
+  )),
+
+  // --- Flex (responsive) ---
+  'flex-direction': (class: 'flex', property: flex-direction, responsive: true, values: (
+    'row': row,
+    'column': column,
+    'row-reverse': row-reverse,
+    'column-reverse': column-reverse,
+  )),
+  'flex-wrap': (class: 'flex', property: flex-wrap, responsive: true, values: (
+    'wrap': wrap,
+    'nowrap': nowrap,
+    'wrap-reverse': wrap-reverse,
+  )),
+  'flex-fill': (class: 'flex', property: flex, responsive: false, values: (
+    'fill': 1 1 auto,
+  )),
+  'flex-grow': (class: 'flex-grow', property: flex-grow, responsive: false, values: (
+    '0': 0,
+    '1': 1,
+  )),
+  'flex-shrink': (class: 'flex-shrink', property: flex-shrink, responsive: false, values: (
+    '0': 0,
+    '1': 1,
+  )),
+  'justify-content': (class: 'justify-content', property: justify-content, responsive: true, values: (
+    'start': flex-start,
+    'center': center,
+    'end': flex-end,
+    'between': space-between,
+    'around': space-around,
+    'evenly': space-evenly,
+  )),
+  'align-items': (class: 'align-items', property: align-items, responsive: true, values: (
+    'start': flex-start,
+    'center': center,
+    'end': flex-end,
+    'baseline': baseline,
+    'stretch': stretch,
+  )),
+  'align-self': (class: 'align-self', property: align-self, responsive: true, values: (
+    'start': flex-start,
+    'center': center,
+    'end': flex-end,
+    'baseline': baseline,
+    'stretch': stretch,
+    'auto': auto,
+  )),
+
+  // --- Sizing (responsive) ---
+  'w': (class: 'w', property: width, responsive: true, values: (
+    '25': 25%,
+    '50': 50%,
+    '75': 75%,
+    '100': 100%,
+    'auto': auto,
+    'measure': var(--measure),
+    'contained': var(--container),
+    'wide': var(--container-wide),
+  )),
+  'h': (class: 'h', property: height, responsive: false, values: (
+    '25': 25%,
+    '50': 50%,
+    '75': 75%,
+    '100': 100%,
+    'auto': auto,
+  )),
+  'mw': (class: 'mw', property: max-width, responsive: false, values: (
+    '100': 100%,
+  )),
+  'mh': (class: 'mh', property: max-height, responsive: false, values: (
+    '100': 100%,
+  )),
+
+  // --- Position ---
+  'position': (class: 'position', property: position, responsive: false, values: (
+    'static': static,
+    'relative': relative,
+    'absolute': absolute,
+    'fixed': fixed,
+    'sticky': sticky,
+  )),
+
+  // --- Z-index ---
+  'z': (class: 'z', property: z-index, responsive: false, values: (
+    '0': 0,
+    '10': 10,
+    '20': 20,
+    '30': 30,
+    '40': 40,
+    '50': 50,
+    'auto': auto,
+  )),
+
+  // --- Float (responsive) ---
+  'float': (class: 'float', property: float, responsive: true, values: (
+    'start': left,
+    'end': right,
+    'none': none,
+  )),
+
+  // --- Typography ---
+  'text-align': (class: 'text', property: text-align, responsive: true, values: (
+    'start': start,
+    'center': center,
+    'end': end,
+  )),
+  'text-wrap': (class: 'text', property: text-wrap, responsive: false, values: (
+    'wrap': wrap,
+    'nowrap': nowrap,
+    'balance': balance,
+    'pretty': pretty,
+  )),
+  'text-decoration': (class: 'text-decoration', property: text-decoration, responsive: false, values: (
+    'none': none,
+    'underline': underline,
+    'line-through': line-through,
+  )),
+  'h1': (class: 'h1', responsive: true, declarations: (
+    '': (font-family: var(--f-prose), font-size: var(--t-h1-s), line-height: var(--t-h1-lh), font-weight: 400, letter-spacing: -0.01em),
+  )),
+  'h2': (class: 'h2', responsive: true, declarations: (
+    '': (font-family: var(--f-prose), font-size: var(--t-h2-s), line-height: var(--t-h2-lh), font-weight: 400, letter-spacing: -0.005em),
+  )),
+  'h3': (class: 'h3', responsive: true, declarations: (
+    '': (font-family: var(--f-prose), font-size: var(--t-h3-s), line-height: var(--t-h3-lh), font-weight: 400),
+  )),
+  'h4': (class: 'h4', responsive: true, declarations: (
+    '': (font-family: var(--f-ui), font-size: var(--t-h4-s), line-height: var(--t-h4-lh), font-weight: 600),
+  )),
+  'h5': (class: 'h5', responsive: true, declarations: (
+    '': (font-family: var(--f-ui), font-size: var(--t-h5-s), line-height: var(--t-h5-lh), font-weight: 600),
+  )),
+  'h6': (class: 'h6', responsive: true, declarations: (
+    '': (font-family: var(--f-mono), font-size: var(--t-h6-s), line-height: var(--t-h6-lh), font-weight: 500, text-transform: uppercase, letter-spacing: 0.08em, color: var(--c-muted)),
+  )),
+  'text-display-1': (class: 'text-display-1', responsive: true, declarations: (
+    '': (font-family: var(--f-prose), font-size: var(--t-display-1-s), line-height: var(--t-display-1-lh)),
+  )),
+  'text-display-2': (class: 'text-display-2', responsive: true, declarations: (
+    '': (font-family: var(--f-prose), font-size: var(--t-display-2-s), line-height: var(--t-display-2-lh)),
+  )),
+  'fw': (class: 'fw', property: font-weight, responsive: true, values: (
+    'normal': 400,
+    'medium': 500,
+    'semibold': 600,
+    'bold': 700,
+  )),
+  'fs': (class: 'fs', property: font-style, responsive: true, values: (
+    'normal': normal,
+    'italic': italic,
+  )),
+  'font-family': (class: 'font', property: font-family, responsive: true, values: (
+    'prose': var(--f-prose),
+    'ui': var(--f-ui),
+    'mono': var(--f-mono),
+  )),
+
+  // --- Colors ---
+  'text-color': (class: 'text', property: color, responsive: false, values: (
+    'primary': var(--primary-text),
+    'secondary': var(--secondary-text),
+    'success': var(--success-text),
+    'warning': var(--warning-text),
+    'danger': var(--danger-text),
+    'info': var(--info-text),
+    'muted': var(--c-muted),
+    'subtle': var(--c-subtle),
+    'inverse': var(--c-inverse),
+  )),
+  'bg': (class: 'bg', property: background-color, responsive: false, values: (
+    'primary': var(--primary),
+    'primary-subtle': var(--primary-subtle),
+    'secondary': var(--secondary),
+    'secondary-subtle': var(--secondary-subtle),
+    'success': var(--success),
+    'success-subtle': var(--success-subtle),
+    'warning': var(--warning),
+    'warning-subtle': var(--warning-subtle),
+    'danger': var(--danger),
+    'danger-subtle': var(--danger-subtle),
+    'info': var(--info),
+    'info-subtle': var(--info-subtle),
+    'canvas': var(--canvas),
+    'surface': var(--surface),
+    'surface-raised': var(--surface-raised),
+    'surface-sunken': var(--surface-sunken),
+    'surface-inverse': var(--surface-inverse),
+  )),
+
+  // --- Borders ---
+  'border-default': (class: 'border-default', responsive: false, declarations: (
+    '': (outline: var(--bd1) solid var(--neutral-border), outline-offset: calc(-1 * var(--bd1))),
+    '2': (outline: var(--bd2) solid var(--neutral-border), outline-offset: calc(-1 * var(--bd2))),
+    '3': (outline: var(--bd3) solid var(--neutral-border), outline-offset: calc(-1 * var(--bd3))),
+  )),
+  'border': (class: 'border', responsive: false, declarations: (
+    '': (outline: var(--bd1) solid var(--border), outline-offset: calc(-1 * var(--bd1))),
+    '0': (outline: 0),
+    '2': (outline: var(--bd2) solid var(--border), outline-offset: calc(-1 * var(--bd2))),
+    '3': (outline: var(--bd3) solid var(--border), outline-offset: calc(-1 * var(--bd3))),
+  )),
+  'rounded': (class: 'rounded', property: border-radius, responsive: false, values: (
+    'none': var(--r-none),
+    'xs': var(--r-xs),
+    'sm': var(--r-sm),
+    'md': var(--r-md),
+    'lg': var(--r-lg),
+    'xl': var(--r-xl),
+    'pill': var(--r-pill),
+    'circle': var(--r-circle),
+  )),
+
+  // --- Effects ---
+  'shadow': (class: 'shadow', property: box-shadow, responsive: false, values: (
+    '0': var(--sh0),
+    '1': var(--sh1),
+    '2': var(--sh2),
+    '3': var(--sh3),
+    '4': var(--sh4),
+    'inset-1': var(--sh-inset-1),
+    'inset-2': var(--sh-inset-2),
+    'inset-3': var(--sh-inset-3),
+    'inset-4': var(--sh-inset-4),
+  )),
+  'opacity': (class: 'opacity', property: opacity, responsive: false, values: (
+    '0': 0,
+    '25': 0.25,
+    '50': 0.5,
+    '75': 0.75,
+    '100': 1,
+  )),
+  'overflow': (class: 'overflow', property: overflow, responsive: false, values: (
+    'auto': auto,
+    'hidden': hidden,
+    'visible': visible,
+    'scroll': scroll,
+  )),
+  'overflow-x': (class: 'overflow-x', property: overflow-x, responsive: false, values: (
+    'auto': auto,
+    'hidden': hidden,
+    'visible': visible,
+    'scroll': scroll,
+  )),
+  'overflow-y': (class: 'overflow-y', property: overflow-y, responsive: false, values: (
+    'auto': auto,
+    'hidden': hidden,
+    'visible': visible,
+    'scroll': scroll,
+  )),
+
+  // --- Pointer events ---
+  'pointer-events': (class: 'pointer', property: pointer-events, responsive: false, values: (
+    'none': none,
+    'auto': auto,
+  )),
+);