@teseor/css 2.3.2 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teseor/css",
-  "version": "2.3.2",
+  "version": "2.5.0",
   "description": "CSS library - reset, primitives, components, utilities",
   "license": "MIT",
   "author": "letanure",

package/src/components/forms/input/api.json

@@ -12,6 +12,9 @@
     "state": {
       "values": ["error", "success"]
     },
+    "auto-size": {
+      "type": "boolean"
+    },
     "block": {
       "type": "boolean"
     }

package/src/components/forms/input/docs.html

@@ -26,6 +26,11 @@ description: Text input field for user data entry. Heights align to grid rows.
 <!-- @full_width -->
 <input class="ui-input ui-input--block" type="text" placeholder="{{ t('full_width_input', 'Full width input') }}"></input>
 
+<!-- @auto_size | column -->
+<!-- Auto-sizing textarea grows with content. Requires browser support for field-sizing. -->
+<textarea class="ui-input ui-input--auto-size ui-input--block" placeholder="{{ t('auto_size_textarea', 'Type here and watch it grow...') }}"></textarea>
+<input class="ui-input ui-input--auto-size" type="text" placeholder="{{ t('auto_size_input', 'Auto-sizing input') }}"></input>
+
 <!-- @with_prefix_icon -->
 <div class="ui-input-group ui-input-group--has-prefix">
   <span class="ui-input-group__addon ui-input-group__addon--start">

package/src/components/forms/input/index.scss

@@ -79,6 +79,12 @@
     // @desc Success border
     --_border-color-focus: var(--ui-input-success-border, var(--ui-color-success, #{t.$color-success}));
   }
+
+  // @modifier boolean auto-size
+  .input--auto-size {
+    --_height: auto;
+    --_min-height: var(--ui-input-height, var(--ui-row-2, #{t.$row-2}));
+  }
 }
 
 @layer components.styles {
@@ -129,6 +135,13 @@
       background: var(--_color-bg-subtle);
     }
 
+    // Auto-size — textarea/input grows with content
+    &--auto-size {
+      field-sizing: content;
+
+      min-block-size: var(--_min-height);
+    }
+
     // Full width
   // @modifier boolean block
     &--block {

package/src/components/navigation/nav/api.json

@@ -8,6 +8,9 @@
     },
     "vertical": {
       "type": "boolean"
+    },
+    "responsive": {
+      "type": "boolean"
     }
   },
   "elements": {

package/src/components/navigation/nav/docs.html

@@ -54,6 +54,24 @@ description: Horizontal or vertical navigation links for primary and secondary n
   </ul>
 </nav>
 
+<!-- @responsive -->
+<!-- Auto-collapses to vertical when container is narrow. -->
+<div class="ui-bg-muted ui-p-2" style="inline-size: 250px">
+  <nav class="ui-nav ui-nav--responsive">
+    <ul class="ui-nav__list">
+      <li>
+        <a class="ui-nav__item ui-nav__item--active" href="#">{{ t('home', 'Home') }}</a>
+      </li>
+      <li>
+        <a class="ui-nav__item" href="#">{{ t('about', 'About') }}</a>
+      </li>
+      <li>
+        <a class="ui-nav__item" href="#">{{ t('contact', 'Contact') }}</a>
+      </li>
+    </ul>
+  </nav>
+</div>
+
 <!-- @vertical_pills -->
 <!-- Vertical navigation with pill-style active indicator. -->
 <nav class="ui-nav ui-nav--vertical ui-nav--pills" style="inline-size: 200px">

package/src/components/navigation/nav/index.scss

@@ -44,6 +44,8 @@
   }
 
   // @modifier boolean vertical
+
+  // @modifier boolean responsive
 }
 
 @layer components.styles {
@@ -148,6 +150,30 @@
     }
   }
 
+  // Responsive — auto-collapses to vertical in narrow containers
+  .nav--responsive {
+    container-type: inline-size;
+
+    @container (max-width: #{t.$container-threshold-sm}) {
+      .nav__list {
+        flex-direction: column;
+        align-items: stretch;
+
+        block-size: auto;
+
+        box-shadow: inset calc(var(--_border-width-sm) * -1) 0 0 var(--_border-color);
+      }
+
+      .nav__item {
+        box-shadow: inset calc(var(--_border-width-md) * -1) 0 0 transparent;
+
+        &--active {
+          box-shadow: inset calc(var(--_border-width-md) * -1) 0 0 var(--_item-color-active);
+        }
+      }
+    }
+  }
+
   // Vertical + pills
   .nav--vertical.nav--pills {
     .nav__list {

package/src/components/navigation/tabs/api.json

@@ -63,6 +63,11 @@
       "default": "var(--ui-color-bg)",
       "description": "Tab bg active"
     },
+    {
+      "name": "--ui-tabs-tab-line-height",
+      "default": "var(--ui-line-height-none)",
+      "description": "Tab line height"
+    },
     {
       "name": "--ui-tabs-panel-padding",
       "default": "var(--ui-space-3)",

package/src/components/navigation/tabs/index.scss

@@ -30,6 +30,8 @@
     --_tab-bg: var(--ui-tabs-tab-bg, transparent);
     // @desc Tab bg active
     --_tab-bg-active: var(--ui-tabs-tab-bg-active, var(--ui-color-bg, #{t.$color-bg}));
+    // @desc Tab line height
+    --_tab-line-height: var(--ui-tabs-tab-line-height, var(--ui-line-height-none, #{t.$line-height-none}));
     // @desc Panel padding on all sides
     --_panel-padding: var(--ui-tabs-panel-padding, var(--ui-space-3, #{t.$space-3}));
   }
@@ -80,7 +82,7 @@
     font-family: var(--_font-sans);
     font-size: var(--_tab-font-size);
     font-weight: var(--_weight-medium);
-    line-height: 1;
+    line-height: var(--_tab-line-height);
     color: var(--_color-text-muted);
 
     background: var(--_tab-bg);

package/src/config/tokens/_variables.scss

@@ -103,8 +103,8 @@ $sizes: (
 // ==========================================================================
 
 // Font families (system stack, consumers override via CSS tokens)
-$font-sans: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
-$font-mono: ui-monospace, sfmono-regular, "SF Mono", menlo, consolas, "Liberation Mono", monospace;
+$font-sans: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Helvetica Neue", arial, sans-serif;
+$font-mono: ui-monospace, "SFMono-Regular", "SF Mono", menlo, consolas, "Liberation Mono", "Courier New", monospace;
 
 // Font sizes (derived from base, 1.2 modular scale)
 $font-size-base: 1rem; // 16px — core knob
@@ -117,6 +117,9 @@ $font-size-2xl: 1.75rem; // 28px
 $font-size-3xl: 2rem; // 32px
 $font-size-4xl: 2.5rem; // 40px
 
+// Unitless line height (no extra leading)
+$line-height-none: 1;
+
 // Tight line heights (compact UI elements)
 $line-height-tight-xs: $row;
 $line-height-tight-sm: $row;

package/src/config/tokens/core.scss

@@ -8,26 +8,26 @@
     --ui-unit: calc(8px * var(--ui-scale));
 
     // Base colors — shades auto-generated via color-mix in tokens.scale
-    --ui-color-primary: oklch(55% 0.22 250);
+    --ui-color-primary: oklch(54% 0.20 260);
     --ui-color-success: oklch(60% 0.18 145);
     --ui-color-warning: oklch(75% 0.18 70);
     --ui-color-danger: oklch(60% 0.22 25);
-    --ui-color-neutral: oklch(50% 0.02 250);
+    --ui-color-neutral: oklch(45% 0.015 260);
 
     // Font families — system stacks, override for brand fonts
-    --ui-font-sans: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
-    --ui-font-mono: ui-monospace, sfmono-regular, "SF Mono", menlo, consolas, "Liberation Mono", monospace;
+    --ui-font-sans: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Helvetica Neue", arial, sans-serif;
+    --ui-font-mono: ui-monospace, "SFMono-Regular", "SF Mono", menlo, consolas, "Liberation Mono", "Courier New", monospace;
 
     // Base font size — all font-size-* tokens derive from this via calc()
     --ui-font-size-base: calc(1rem * var(--ui-scale));
 
     // Base radius — sm/md/lg derive from this
-    --ui-radius-base: var(--ui-unit);
+    --ui-radius-base: 6px;
 
     // Base border width — sm/md/lg derive from this
     --ui-border-width-base: calc(var(--ui-unit) * 0.125);
 
     // Shadow strength — controls opacity of all shadow levels
-    --ui-shadow-strength: 20%;
+    --ui-shadow-strength: 12%;
   }
 }

package/src/config/tokens/typography.scss

@@ -17,6 +17,9 @@
     // Two modes: normal (for body text) and tight (for UI/forms)
     // ==========================================================================
 
+    // Unitless line height (no extra leading)
+    --ui-line-height-none: 1;
+
     // Tight line-heights for compact UI elements
     --ui-line-height-tight-xs: var(--ui-row-1);
     --ui-line-height-tight-sm: var(--ui-row-1);

package/src/layout/sidebar-nav/api.json

@@ -76,9 +76,19 @@
     },
     {
       "name": "--ui-sidebar-nav-group-label-weight",
-      "default": "var(--ui-font-weight-bold)",
+      "default": "var(--ui-font-weight-semibold)",
       "description": "Group label weight"
     },
+    {
+      "name": "--ui-sidebar-nav-group-label-transform",
+      "default": "none",
+      "description": "Group label text-transform"
+    },
+    {
+      "name": "--ui-sidebar-nav-group-label-letter-spacing",
+      "default": "normal",
+      "description": "Group label letter-spacing"
+    },
     {
       "name": "--ui-sidebar-nav-item-height",
       "default": "var(--ui-row-2)",
@@ -116,17 +126,17 @@
     },
     {
       "name": "--ui-sidebar-nav-item-active-bg",
-      "default": "var(--ui-color-primary-subtle)",
+      "default": "var(--ui-color-bg-muted)",
       "description": "Item active bg"
     },
     {
       "name": "--ui-sidebar-nav-item-active-color",
-      "default": "var(--ui-color-primary-hover)",
+      "default": "var(--ui-color-primary)",
       "description": "Item active color"
     },
     {
       "name": "--ui-sidebar-nav-item-active-weight",
-      "default": "var(--ui-font-weight-medium)",
+      "default": "normal",
       "description": "Item active weight"
     },
     {

package/src/layout/sidebar-nav/index.scss

@@ -83,7 +83,11 @@
     // @desc Group label color
     --_color: var(--ui-sidebar-nav-group-label-color, var(--ui-color-text-muted));
     // @desc Group label weight
-    --_weight: var(--ui-sidebar-nav-group-label-weight, var(--ui-font-weight-bold));
+    --_weight: var(--ui-sidebar-nav-group-label-weight, var(--ui-font-weight-semibold));
+    // @desc Group label text-transform
+    --_transform: var(--ui-sidebar-nav-group-label-transform, none);
+    // @desc Group label letter-spacing
+    --_letter-spacing: var(--ui-sidebar-nav-group-label-letter-spacing, normal);
 
     display: block;
 
@@ -92,8 +96,8 @@
 
     font-size: var(--_font-size);
     font-weight: var(--_weight);
-    letter-spacing: #{t.$letter-spacing-wide};
-    text-transform: uppercase;
+    letter-spacing: var(--_letter-spacing);
+    text-transform: var(--_transform);
     color: var(--_color);
   }
 
@@ -156,12 +160,14 @@
     min-block-size: var(--_height);
     padding-inline: var(--_padding-inline);
 
+    font-family: inherit;
     font-size: var(--_font-size);
     font-weight: var(--_weight, normal);
     text-decoration: none;
     color: var(--_color);
 
     background: var(--_bg);
+    border: none;
     border-radius: var(--_radius);
     cursor: pointer;
 
@@ -187,11 +193,11 @@
   // Active state
   .sidebar-nav__item--active {
     // @desc Item active bg
-    --_bg: var(--ui-sidebar-nav-item-active-bg, var(--ui-color-primary-subtle));
+    --_bg: var(--ui-sidebar-nav-item-active-bg, var(--ui-color-bg-muted));
     // @desc Item active color
-    --_color: var(--ui-sidebar-nav-item-active-color, var(--ui-color-primary-hover));
+    --_color: var(--ui-sidebar-nav-item-active-color, var(--ui-color-primary));
     // @desc Item active weight
-    --_weight: var(--ui-sidebar-nav-item-active-weight, var(--ui-font-weight-medium));
+    --_weight: var(--ui-sidebar-nav-item-active-weight, normal);
   }
 
   // Nested item indent

package/src/utilities/display/api.json

@@ -1,6 +1,14 @@
 {
   "name": "display",
   "type": "utility",
-  "utilities": ["flex", "justify-between", "items-center", "gap-2", "p-2"],
+  "utilities": [
+    "flex",
+    "justify-between",
+    "items-center",
+    "gap-2",
+    "p-2",
+    "container-inline",
+    "container-normal"
+  ],
   "cssVars": []
 }

package/src/utilities/display/display.scss

@@ -174,6 +174,15 @@
     visibility: hidden;
   }
 
+  // Container query types
+  .container-inline {
+    container-type: inline-size;
+  }
+
+  .container-normal {
+    container-type: normal;
+  }
+
   // Screen reader only - visually hidden but accessible
   .sr-only {
     position: absolute;

package/src/utilities/display/docs.html

@@ -22,6 +22,15 @@ description: Flexbox and display utilities.
   <span>{{ t('row_3', 'Row 3') }}</span>
 </div>
 
+<!-- @container_queries | row -->
+<!-- Make an element a container query context. -->
+<div class="ui-container-inline ui-bg-muted ui-p-2">
+  <span class="ui-text-sm">{{ t('container_inline_desc', 'container-inline: enables inline-size container queries on children') }}</span>
+</div>
+<div class="ui-container-normal ui-bg-muted ui-p-2">
+  <span class="ui-text-sm">{{ t('container_normal_desc', 'container-normal: named container without size containment') }}</span>
+</div>
+
 <!-- @visibility | row -->
 <span class="ui-visible ui-p-1 ui-bg-muted">{{ t('visible', 'Visible') }}</span>
 <span class="ui-invisible ui-p-1 ui-bg-muted">{{ t('invisible_hidden_but_occupies_space', 'Invisible (hidden but occupies space)') }}</span>

package/src/utilities/position/api.json

@@ -1,6 +1,25 @@
 {
   "name": "position",
   "type": "utility",
-  "utilities": ["relative", "absolute", "overflow-hidden", "inset-0"],
+  "utilities": [
+    "relative",
+    "absolute",
+    "fixed",
+    "sticky",
+    "inset-0",
+    "top-0",
+    "bottom-0",
+    "start-0",
+    "end-0",
+    "top-2",
+    "bottom-2",
+    "start-2",
+    "end-2",
+    "z-10",
+    "z-20",
+    "z-50",
+    "overflow-hidden",
+    "overflow-auto"
+  ],
   "cssVars": []
 }

package/src/utilities/position/docs.html

@@ -9,6 +9,13 @@ description: Position, overflow, and inset utilities for controlling element pla
   <div class="ui-absolute ui-top-0 ui-end-0 ui-bg-subtle ui-p-1">{{ t('absolute_top_end', 'Absolute top-end') }}</div>
   <div class="ui-absolute ui-bottom-0 ui-start-0 ui-bg-subtle ui-p-1">{{ t('absolute_bottom_start', 'Absolute bottom-start') }}</div>
 </div>
+<div class="ui-sticky ui-top-0 ui-bg-muted ui-p-2">
+  <span class="ui-text-sm">{{ t('sticky_element', 'Sticky element (sticks to top on scroll)') }}</span>
+</div>
+<div class="ui-relative ui-overflow-hidden ui-bg-muted" style="block-size: var(--ui-row-4); transform: translate(0)">
+  <div class="ui-fixed ui-top-0 ui-start-0 ui-bg-subtle ui-p-1">{{ t('fixed_in_container', 'Fixed (contained by transform parent)') }}</div>
+</div>
+<p class="ui-text-sm ui-text-muted">{{ t('position_classes', 'Also available: ui-static') }}</p>
 
 <!-- @inset | row -->
 <!-- Pin element to all edges or specific sides. -->
@@ -19,6 +26,24 @@ description: Position, overflow, and inset utilities for controlling element pla
   <div class="ui-absolute ui-inset-block-0 ui-start-0 ui-bg-subtle ui-p-2">{{ t('inset_block_0_start_0', 'inset-block-0 + start-0') }}</div>
 </div>
 
+<!-- @inset-scale | row -->
+<!-- Offset from edges using space tokens (1-4). -->
+<div class="ui-relative ui-bg-muted" style="block-size: var(--ui-row-4)">
+  <div class="ui-absolute ui-top-1 ui-end-1 ui-bg-subtle ui-p-1">{{ t('top_1_end_1', 'top-1 end-1') }}</div>
+  <div class="ui-absolute ui-bottom-2 ui-start-2 ui-bg-subtle ui-p-1">{{ t('bottom_2_start_2', 'bottom-2 start-2') }}</div>
+</div>
+<div class="ui-relative ui-bg-muted" style="block-size: var(--ui-row-4)">
+  <div class="ui-absolute ui-top-0 ui-end-2 ui-bg-subtle ui-p-1">{{ t('top_0_end_2', 'top-0 end-2') }}</div>
+</div>
+
+<!-- @z-index | row -->
+<!-- Control stacking order. Scale: 0, 10, 20, 30, 40, 50. -->
+<div class="ui-relative ui-bg-muted" style="block-size: var(--ui-row-4)">
+  <div class="ui-absolute ui-top-1 ui-start-1 ui-z-10 ui-bg-subtle ui-p-1">{{ t('z_10', 'z-10') }}</div>
+  <div class="ui-absolute ui-top-2 ui-start-2 ui-z-20 ui-bg ui-p-1 ui-rounded">{{ t('z_20_on_top', 'z-20 on top') }}</div>
+  <div class="ui-absolute ui-top-3 ui-start-3 ui-z-50 ui-bg-subtle ui-p-1 ui-rounded">{{ t('z_50_highest', 'z-50 highest') }}</div>
+</div>
+
 <!-- @overflow | row -->
 <!-- Control overflow behavior. -->
 <div class="ui-overflow-hidden ui-bg-muted ui-p-2" style="block-size: var(--ui-row-3)">

package/src/utilities/position/position.scss

@@ -35,20 +35,51 @@
     inset-inline: 0;
   }
 
-  .top-0 {
-    inset-block-start: 0;
+  @each $n in (0, 1, 2, 3, 4) {
+    .top-#{$n} {
+      inset-block-start: if($n == 0, 0, var(--ui-space-#{$n}));
+    }
+
+    .bottom-#{$n} {
+      inset-block-end: if($n == 0, 0, var(--ui-space-#{$n}));
+    }
+
+    .start-#{$n} {
+      inset-inline-start: if($n == 0, 0, var(--ui-space-#{$n}));
+    }
+
+    .end-#{$n} {
+      inset-inline-end: if($n == 0, 0, var(--ui-space-#{$n}));
+    }
+  }
+
+  // Z-index
+  .z-0 {
+    z-index: 0;
+  }
+
+  .z-10 {
+    z-index: 10;
+  }
+
+  .z-20 {
+    z-index: 20;
+  }
+
+  .z-30 {
+    z-index: 30;
   }
 
-  .bottom-0 {
-    inset-block-end: 0;
+  .z-40 {
+    z-index: 40;
   }
 
-  .start-0 {
-    inset-inline-start: 0;
+  .z-50 {
+    z-index: 50;
   }
 
-  .end-0 {
-    inset-inline-end: 0;
+  .z-auto {
+    z-index: auto;
   }
 
   // Overflow