@teseor/css 1.8.0 → 1.9.0

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

@@ -5,33 +5,59 @@
 
 @layer components.tokens {
   .textarea {
+    --_row-1: var(--ui-row-1, #{t.$row});
+    --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, ease);
+    --_color-border-strong: var(--ui-color-border-strong, #{t.$color-border-strong});
+    --_border-width-md: var(--ui-border-width-md, #{t.$border-width-md});
+    --_color-focus: var(--ui-color-focus, #{t.$color-focus});
+    --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
+    --_color-bg-subtle: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});
+    // @desc Minimum height
     --_min-height: var(--ui-textarea-min-height, calc(#{t.$row} * 4));
+    // @desc Horizontal padding
     --_padding-x: var(--ui-textarea-padding-x, var(--ui-space-1, #{t.$space-1}));
+    // @desc Vertical padding
     --_padding-y: var(--ui-textarea-padding-y, var(--ui-space-1, #{t.$space-1}));
+    // @desc Font size
     --_font-size: var(--ui-textarea-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Corner radius
     --_radius: var(--ui-textarea-radius, var(--ui-radius-md, #{t.$radius-md}));
+    // @desc Background color
     --_bg: var(--ui-textarea-bg, var(--ui-color-bg, #{t.$color-bg}));
+    // @desc Border color
     --_border-color: var(--ui-textarea-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    // @desc Border color focus
     --_border-color-focus: var(--ui-textarea-border-color-focus, var(--ui-color-primary, #{t.$color-primary}));
+    // @desc Text color
     --_color: var(--ui-textarea-color, var(--ui-color-text, #{t.$color-text}));
+    // @desc Placeholder
     --_placeholder: var(--ui-textarea-placeholder, var(--ui-color-text-muted, #{t.$color-text-muted}));
   }
 
   // @modifier size
   .textarea--sm {
+    // @desc Minimum height at small size
     --_min-height: var(--ui-textarea-min-height-sm, calc(#{t.$row} * 3));
+    // @desc Font size at small size
     --_font-size: var(--ui-textarea-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
   }
 
   .textarea--lg {
+    // @desc Minimum height at large size
     --_min-height: var(--ui-textarea-min-height-lg, calc(#{t.$row} * 6));
+    // @desc Horizontal padding at large size
     --_padding-x: var(--ui-textarea-padding-x-lg, var(--ui-space-2, #{t.$space-2}));
+    // @desc Vertical padding at large size
     --_padding-y: var(--ui-textarea-padding-y-lg, var(--ui-space-2, #{t.$space-2}));
+    // @desc Font size at large size
     --_font-size: var(--ui-textarea-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
   }
 
   // @modifier variant
   .textarea--filled {
+    // @desc Filled bg
     --_bg: var(--ui-textarea-filled-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
     --_border-color: transparent;
   }
@@ -43,12 +69,16 @@
 
   // @modifier state
   .textarea--error {
+    // @desc Error border
     --_border-color: var(--ui-textarea-error-border, var(--ui-color-danger, #{t.$color-danger}));
+    // @desc Error border
     --_border-color-focus: var(--ui-textarea-error-border, var(--ui-color-danger, #{t.$color-danger}));
   }
 
   .textarea--success {
+    // @desc Success border
     --_border-color: var(--ui-textarea-success-border, var(--ui-color-success, #{t.$color-success}));
+    // @desc Success border
     --_border-color-focus: var(--ui-textarea-success-border, var(--ui-color-success, #{t.$color-success}));
   }
 }
@@ -65,18 +95,18 @@
 
     font-family: inherit;
     font-size: var(--_font-size);
-    line-height: var(--ui-row-1, #{t.$row});
+    line-height: var(--_row-1);
     color: var(--_color);
 
     background: var(--_bg);
     border: none;
     border-radius: var(--_radius);
-    outline: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+    outline: var(--_border-width-sm) solid var(--_border-color);
 
     transition:
-      border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),
-      box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
-    outline-offset: calc(var(--ui-border-width-sm, #{t.$border-width-sm}) * -1);
+      border-color var(--_duration-fast) var(--_ease-default),
+      box-shadow var(--_duration-fast) var(--_ease-default);
+    outline-offset: calc(var(--_border-width-sm) * -1);
 
     // Default resize behavior
     resize: vertical;
@@ -86,29 +116,30 @@
     }
 
     &:hover:not(:disabled, :focus-visible) {
-      outline-color: var(--ui-color-border-strong, #{t.$color-border-strong});
+      outline-color: var(--_color-border-strong);
     }
 
     &:focus-visible,
     &--focus {
       outline-color: var(--_border-color-focus);
 
-      box-shadow: 0 0 0 var(--ui-border-width-md, #{t.$border-width-md}) var(--ui-color-focus, #{t.$color-focus});
+      box-shadow: 0 0 0 var(--_border-width-md) var(--_color-focus);
     }
 
     &:disabled,
     &--disabled {
-      opacity: var(--ui-opacity-disabled, 0.5);
+      opacity: var(--_opacity-disabled);
       cursor: not-allowed;
       resize: none;
     }
 
     &:read-only {
-      background: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});
+      background: var(--_color-bg-subtle);
       resize: none;
     }
 
     // Resize variants
+  // @modifier resize
     &--resize-none {
       resize: none;
     }

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

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "textarea",
   "element": "textarea",
   "modifiers": {
@@ -12,85 +13,104 @@
       "values": ["error", "success"]
     },
     "resize": {
-      "values": ["resize-none", "resize-both"]
+      "values": ["resize-none", "resize-horizontal", "resize-both"]
     }
   },
   "cssVars": [
     {
       "name": "--ui-textarea-min-height",
-      "default": "calc(var(--ui-row) * 4"
+      "default": "calc(var(--ui-row) * 4)",
+      "description": "Minimum height"
     },
     {
       "name": "--ui-textarea-padding-x",
-      "default": "var(--ui-space-1)"
+      "default": "var(--ui-space-1)",
+      "description": "Horizontal padding"
     },
     {
       "name": "--ui-textarea-padding-y",
-      "default": "var(--ui-space-1)"
+      "default": "var(--ui-space-1)",
+      "description": "Vertical padding"
     },
     {
       "name": "--ui-textarea-font-size",
-      "default": "var(--ui-font-size-sm)"
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
     },
     {
       "name": "--ui-textarea-radius",
-      "default": "var(--ui-radius-md)"
+      "default": "var(--ui-radius-md)",
+      "description": "Corner radius"
     },
     {
       "name": "--ui-textarea-bg",
-      "default": "var(--ui-color-bg)"
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
     },
     {
       "name": "--ui-textarea-border-color",
-      "default": "var(--ui-color-border-strong)"
+      "default": "var(--ui-color-border-strong)",
+      "description": "Border color"
     },
     {
       "name": "--ui-textarea-border-color-focus",
-      "default": "var(--ui-color-primary)"
+      "default": "var(--ui-color-primary)",
+      "description": "Border color focus"
     },
     {
       "name": "--ui-textarea-color",
-      "default": "var(--ui-color-text)"
+      "default": "var(--ui-color-text)",
+      "description": "Text color"
     },
     {
       "name": "--ui-textarea-placeholder",
-      "default": "var(--ui-color-text-muted)"
+      "default": "var(--ui-color-text-muted)",
+      "description": "Placeholder"
     },
     {
       "name": "--ui-textarea-min-height-sm",
-      "default": "calc(var(--ui-row) * 3"
+      "default": "calc(var(--ui-row) * 3)",
+      "description": "Minimum height at small size"
     },
     {
       "name": "--ui-textarea-font-size-sm",
-      "default": "var(--ui-font-size-xs)"
+      "default": "var(--ui-font-size-xs)",
+      "description": "Font size at small size"
     },
     {
       "name": "--ui-textarea-min-height-lg",
-      "default": "calc(var(--ui-row) * 6"
+      "default": "calc(var(--ui-row) * 6)",
+      "description": "Minimum height at large size"
     },
     {
       "name": "--ui-textarea-padding-x-lg",
-      "default": "var(--ui-space-2)"
+      "default": "var(--ui-space-2)",
+      "description": "Horizontal padding at large size"
     },
     {
       "name": "--ui-textarea-padding-y-lg",
-      "default": "var(--ui-space-2)"
+      "default": "var(--ui-space-2)",
+      "description": "Vertical padding at large size"
     },
     {
       "name": "--ui-textarea-font-size-lg",
-      "default": "var(--ui-font-size-md)"
+      "default": "var(--ui-font-size-md)",
+      "description": "Font size at large size"
     },
     {
       "name": "--ui-textarea-filled-bg",
-      "default": "var(--ui-color-bg-muted)"
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Filled bg"
     },
     {
       "name": "--ui-textarea-error-border",
-      "default": "var(--ui-color-danger)"
+      "default": "var(--ui-color-danger)",
+      "description": "Error border"
     },
     {
       "name": "--ui-textarea-success-border",
-      "default": "var(--ui-color-success)"
+      "default": "var(--ui-color-success)",
+      "description": "Success border"
     }
   ]
 }

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

@@ -5,13 +5,25 @@
 
 @layer components.tokens {
   .toggle {
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, ease);
+    --_color-focus: var(--ui-color-focus, var(--ui-color-primary));
+    --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
+    // @desc Track width
     --_track-width: var(--ui-toggle-track-width, calc(#{t.$unit} * 5));
+    // @desc Track height
     --_track-height: var(--ui-toggle-track-height, calc(#{t.$unit} * 3));
-    --_track-bg: var(--ui-toggle-track-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));
+    // @desc Track background
+    --_track-bg: var(--ui-toggle-track-bg, var(--ui-color-bg-subtle, #{t.$overlay-bg-subtle}));
+    // @desc Track bg checked
     --_track-bg-checked: var(--ui-toggle-track-bg-checked, var(--ui-color-primary));
+    // @desc Track corner radius
     --_track-radius: var(--ui-toggle-track-radius, calc(#{t.$unit} * 1.5));
+    // @desc Thumb control size
     --_thumb-size: var(--ui-toggle-thumb-size, calc(#{t.$unit} * 2.5));
+    // @desc Thumb background
     --_thumb-bg: var(--ui-toggle-thumb-bg, var(--ui-color-bg, #{t.$color-bg}));
+    // @desc Thumb control offset from anchor
     --_thumb-offset: var(--ui-toggle-thumb-offset, calc(#{t.$unit} / 4));
   }
 
@@ -46,7 +58,7 @@
     border-radius: var(--_track-radius);
     cursor: pointer;
 
-    transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+    transition: background var(--_duration-fast) var(--_ease-default);
   }
 
   // Hidden checkbox input
@@ -70,7 +82,7 @@
     background: var(--_track-bg);
     border-radius: var(--_track-radius);
 
-    transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+    transition: background var(--_duration-fast) var(--_ease-default);
   }
 
   // Thumb (sliding indicator)
@@ -86,7 +98,7 @@
     border-radius: 50%;
     box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
 
-    transition: transform var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+    transition: transform var(--_duration-fast) var(--_ease-default);
   }
 
   // Checked state
@@ -100,14 +112,14 @@
 
   // Focus state
   .toggle__input:focus-visible ~ .toggle__track {
-    outline: 2px solid var(--ui-color-focus, var(--ui-color-primary));
+    outline: 2px solid var(--_color-focus);
     outline-offset: calc(#{t.$unit} / 4);
   }
 
   // Disabled state
   .toggle__input:disabled ~ .toggle__track,
   .toggle__input:disabled ~ .toggle__thumb {
-    opacity: var(--ui-opacity-disabled, 0.5);
+    opacity: var(--_opacity-disabled);
     cursor: not-allowed;
   }
 

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

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "toggle",
   "element": "div",
   "modifiers": {
@@ -14,35 +15,43 @@
   "cssVars": [
     {
       "name": "--ui-toggle-track-width",
-      "default": "calc(var(--ui-unit) * 5"
+      "default": "calc(var(--ui-unit) * 5)",
+      "description": "Track width"
     },
     {
       "name": "--ui-toggle-track-height",
-      "default": "calc(var(--ui-unit) * 3"
+      "default": "calc(var(--ui-unit) * 3)",
+      "description": "Track height"
     },
     {
       "name": "--ui-toggle-track-bg",
-      "default": "var(--ui-color-bg-subtle)"
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Track background"
     },
     {
       "name": "--ui-toggle-track-bg-checked",
-      "default": "var(--ui-color-primary)"
+      "default": "var(--ui-color-primary)",
+      "description": "Track bg checked"
     },
     {
       "name": "--ui-toggle-track-radius",
-      "default": "calc(var(--ui-unit) * 1.5"
+      "default": "calc(var(--ui-unit) * 1.5)",
+      "description": "Track corner radius"
     },
     {
       "name": "--ui-toggle-thumb-size",
-      "default": "calc(var(--ui-unit) * 2.5"
+      "default": "calc(var(--ui-unit) * 2.5)",
+      "description": "Thumb control size"
     },
     {
       "name": "--ui-toggle-thumb-bg",
-      "default": "white"
+      "default": "var(--ui-color-bg)",
+      "description": "Thumb background"
     },
     {
       "name": "--ui-toggle-thumb-offset",
-      "default": "calc(var(--ui-unit) / 4"
+      "default": "calc(var(--ui-unit) / 4)",
+      "description": "Thumb control offset from anchor"
     }
   ]
 }

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

@@ -1,36 +1,50 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "breadcrumb",
   "element": "div",
   "modifiers": {},
   "elements": {
-    "item": {},
+    "item": {
+      "modifiers": {
+        "hidden": {
+          "type": "boolean"
+        }
+      }
+    },
     "link": {},
-    "current": {}
+    "current": {},
+    "ellipsis": {}
   },
   "cssVars": [
+    {
+      "name": "--ui-breadcrumb-separator",
+      "default": "\"/\"",
+      "description": "Separator"
+    },
     {
       "name": "--ui-breadcrumb-height",
-      "default": "var(--ui-row-1)"
+      "default": "var(--ui-row-1)",
+      "description": "Overall height"
     },
     {
       "name": "--ui-breadcrumb-gap",
-      "default": "calc(var(--ui-unit) * 1"
+      "default": "calc(var(--ui-unit) * 1)",
+      "description": "Gap between children"
     },
     {
       "name": "--ui-breadcrumb-separator-color",
-      "default": "var(--ui-color-text-muted)"
+      "default": "var(--ui-color-text-muted)",
+      "description": "Separator text color"
     },
     {
       "name": "--ui-breadcrumb-link-color",
-      "default": "var(--ui-color-text-muted)"
+      "default": "var(--ui-color-text-muted)",
+      "description": "Link text color"
     },
     {
       "name": "--ui-breadcrumb-current-color",
-      "default": "var(--ui-color-text)"
-    },
-    {
-      "name": "--ui-breadcrumb-separator",
-      "default": "\"/\""
+      "default": "var(--ui-color-text)",
+      "description": "Current color"
     }
   ]
 }

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

@@ -1,14 +1,27 @@
 @use '../../../config/tokens/variables' as t;
+// @component breadcrumb
+// @element div
 
 // Breadcrumb - navigation hierarchy
 // Shows current page location in site structure
 
 @layer components.tokens {
   .breadcrumb {
+    --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
+    // @desc Separator
+    --_breadcrumb-separator: var(--ui-breadcrumb-separator, "/");
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, ease);
+    --_color-primary: var(--ui-color-primary);
+    // @desc Overall height
     --_height: var(--ui-breadcrumb-height, var(--ui-row-1, #{t.$row}));
+    // @desc Gap between children
     --_gap: var(--ui-breadcrumb-gap, calc(#{t.$unit} * 1));
+    // @desc Separator text color
     --_separator-color: var(--ui-breadcrumb-separator-color, var(--ui-color-text-muted));
+    // @desc Link text color
     --_link-color: var(--ui-breadcrumb-link-color, var(--ui-color-text-muted));
+    // @desc Current color
     --_current-color: var(--ui-breadcrumb-current-color, var(--ui-color-text));
   }
 }
@@ -24,7 +37,7 @@
     padding: 0;
     margin: 0;
 
-    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
+    font-size: var(--_font-size-sm);
     line-height: 1;
 
     list-style: none;
@@ -41,7 +54,7 @@
   // Separator after each item except last
   .breadcrumb__item:not(:last-child)::after {
 
-    content: var(--ui-breadcrumb-separator, "/");
+    content: var(--_breadcrumb-separator);
 
     color: var(--_separator-color);
   }
@@ -50,11 +63,11 @@
     text-decoration: none;
     color: var(--_link-color);
 
-    transition: color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+    transition: color var(--_duration-fast) var(--_ease-default);
 
     &:hover {
       text-decoration: underline;
-      color: var(--ui-color-primary);
+      color: var(--_color-primary);
     }
   }
 

package/src/components/navigation/dropdown-menu/dropdown-menu.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "dropdown-menu",
   "element": "div",
   "modifiers": {
@@ -23,15 +24,18 @@
   "cssVars": [
     {
       "name": "--ui-dropdown-menu-z",
-      "default": "200"
+      "default": "var(--ui-z-dropdown)",
+      "description": "Z-index stacking order"
     },
     {
       "name": "--ui-dropdown-menu-panel-offset",
-      "default": "var(--ui-space-1)"
+      "default": "var(--ui-space-1)",
+      "description": "Panel offset from anchor"
     },
     {
       "name": "--ui-dropdown-menu-panel-min-width",
-      "default": "auto"
+      "default": "auto",
+      "description": "Panel minimum width"
     }
   ]
 }

package/src/components/navigation/dropdown-menu/dropdown-menu.docs.json

@@ -171,6 +171,24 @@
         }
       ]
     },
+    {
+      "title": "Top Position",
+      "description": "Opens panel above the trigger.",
+      "examples": [
+        {
+          "code": "<div class=\"ui-dropdown-menu ui-dropdown-menu--open ui-dropdown-menu--top\">\n  <button class=\"ui-dropdown-menu__trigger ui-button\">Actions</button>\n  <div class=\"ui-dropdown-menu__panel\" role=\"menu\">\n    <div class=\"ui-menu\">...</div>\n  </div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Full Width",
+      "description": "Panel stretches to match trigger width.",
+      "examples": [
+        {
+          "code": "<div class=\"ui-dropdown-menu ui-dropdown-menu--open ui-dropdown-menu--full-width\">\n  <button class=\"ui-dropdown-menu__trigger ui-button\">Select option</button>\n  <div class=\"ui-dropdown-menu__panel\" role=\"menu\">\n    <div class=\"ui-menu\">...</div>\n  </div>\n</div>"
+        }
+      ]
+    },
     {
       "title": "Align End",
       "examples": [

package/src/components/navigation/dropdown-menu/index.scss

@@ -6,8 +6,14 @@
 
 @layer components.tokens {
   .dropdown-menu {
-    --_z: var(--ui-dropdown-menu-z, 200);
+    --_space-0: var(--ui-space-0, #{t.$space-0});
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, ease);
+    // @desc Z-index stacking order
+    --_z: var(--ui-dropdown-menu-z, #{t.$z-dropdown});
+    // @desc Panel offset from anchor
     --_panel-offset: var(--ui-dropdown-menu-panel-offset, var(--ui-space-1, #{t.$space-1}));
+    // @desc Panel minimum width
     --_panel-min-width: var(--ui-dropdown-menu-panel-min-width, auto);
   }
 }
@@ -21,7 +27,7 @@
   .dropdown-menu__trigger {
     display: inline-flex;
     align-items: center;
-    gap: var(--ui-space-0, #{t.$space-0});
+    gap: var(--_space-0);
   }
 
   .dropdown-menu__trigger-icon {
@@ -29,9 +35,10 @@
 
     font-size: 0.6em;
 
-    transition: transform var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+    transition: transform var(--_duration-fast) var(--_ease-default);
   }
 
+  // @modifier boolean open
   .dropdown-menu--open .dropdown-menu__trigger-icon {
     transform: rotate(180deg);
   }
@@ -49,8 +56,8 @@
     transform: translateY(calc(#{t.$unit} * -1));
 
     transition:
-      opacity var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),
-      transform var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+      opacity var(--_duration-fast) var(--_ease-default),
+      transform var(--_duration-fast) var(--_ease-default);
   }
 
   .dropdown-menu--open .dropdown-menu__panel {
@@ -60,6 +67,7 @@
   }
 
   // Position above trigger
+  // @modifier boolean top
   .dropdown-menu--top .dropdown-menu__panel {
     inset-block-start: auto;
     inset-block-end: calc(100% + var(--_panel-offset));
@@ -72,12 +80,14 @@
   }
 
   // Align to end edge
+  // @modifier boolean align-end
   .dropdown-menu--align-end .dropdown-menu__panel {
     inset-inline-start: auto;
     inset-inline-end: 0;
   }
 
   // Full-width panel matches trigger width
+  // @modifier boolean full-width
   .dropdown-menu--full-width .dropdown-menu__panel {
     min-inline-size: 100%;
   }