@teseor/css 2.4.0 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teseor/css",
-  "version": "2.4.0",
+  "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/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>