@teseor/css 1.8.0 → 1.9.0

package/package.json

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

package/src/components/actions/button/button.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "button",
   "element": "button",
   "modifiers": {
@@ -36,77 +37,73 @@
   "cssVars": [
     {
       "name": "--ui-button-accent",
-      "description": "Primary accent color. All shades auto-generated via color-mix.",
-      "default": "var(--ui-color-primary)"
+      "default": "var(--ui-color-primary)",
+      "description": "Primary accent color. All shades auto-generated via color-mix."
     },
     {
       "name": "--ui-button-height",
-      "default": "var(--ui-row-2)"
+      "default": "var(--ui-row-2)",
+      "description": "Overall height"
     },
     {
       "name": "--ui-button-padding-x",
-      "default": "var(--ui-space-2)"
+      "default": "var(--ui-space-2)",
+      "description": "Horizontal padding"
     },
     {
       "name": "--ui-button-font-size",
-      "default": "var(--ui-font-size-sm)"
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
     },
     {
       "name": "--ui-button-font-weight",
-      "default": "var(--ui-weight-medium)"
+      "default": "var(--ui-weight-medium)",
+      "description": "Font weight"
     },
     {
       "name": "--ui-button-radius",
-      "default": "var(--ui-radius-md)"
+      "default": "var(--ui-radius-md)",
+      "description": "Corner radius"
     },
     {
       "name": "--ui-button-color",
-      "default": "var(--ui-color-text-inverse)"
+      "default": "var(--ui-color-text-inverse)",
+      "description": "Text color"
     },
     {
       "name": "--ui-button-height-sm",
-      "default": "calc(var(--ui-row) * 1.5)"
+      "default": "calc(var(--ui-row) * 1.5)",
+      "description": "Overall height at small size"
     },
     {
       "name": "--ui-button-font-size-sm",
-      "default": "var(--ui-font-size-xs)"
+      "default": "var(--ui-font-size-xs)",
+      "description": "Font size at small size"
     },
     {
       "name": "--ui-button-height-md",
-      "default": "var(--ui-row-2)"
+      "default": "var(--ui-row-2)",
+      "description": "Overall height at medium size"
     },
     {
       "name": "--ui-button-font-size-md",
-      "default": "var(--ui-font-size-sm)"
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size at medium size"
     },
     {
       "name": "--ui-button-height-lg",
-      "default": "calc(var(--ui-row) * 2.5)"
+      "default": "calc(var(--ui-row) * 2.5)",
+      "description": "Overall height at large size"
     },
     {
       "name": "--ui-button-padding-x-lg",
-      "default": "var(--ui-space-3)"
+      "default": "var(--ui-space-3)",
+      "description": "Horizontal padding at large size"
     },
     {
       "name": "--ui-button-font-size-lg",
-      "default": "var(--ui-font-size-md)"
-    },
-    {
-      "name": "--ui-button-secondary-bg",
-      "default": "var(--ui-color-bg-muted)"
-    },
-    {
-      "name": "--ui-button-secondary-bg-hover",
-      "default": "var(--ui-color-border-strong)"
-    },
-    {
-      "name": "--ui-button-secondary-color",
-      "default": "var(--ui-color-text)"
-    },
-    {
-      "name": "--ui-color-danger",
-      "description": "Used by --danger variant as accent color",
-      "default": "var(--ui-color-danger)"
+      "default": "var(--ui-font-size-md)",
+      "description": "Font size at large size"
     }
   ]
 }

package/src/components/actions/button/index.scss

@@ -6,36 +6,60 @@
 // Token definitions - what makes each variant
 @layer components.tokens {
   .button {
+    --_space-1: var(--ui-space-1, #{t.$space-1});
+    --_font-sans: var(--ui-font-sans, #{t.$font-sans});
+    --_duration-base: var(--ui-duration-base);
+    --_ease-default: var(--ui-ease-default);
+    --_duration-fast: var(--ui-duration-fast);
+    --_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});
+    --_space-quarter: var(--ui-space-quarter);
+    --_opacity-loading: var(--ui-opacity-loading, #{t.$opacity-loading});
     // Single accent color - all shades derived via color-mix
+    // @desc Primary accent color. All shades auto-generated via color-mix.
     --_accent: var(--ui-button-accent, var(--ui-color-primary, #{t.$color-primary}));
 
+    // @desc Overall height
     --_height: var(--ui-button-height, var(--ui-row-2, #{t.$row-2}));
+    // @desc Horizontal padding
     --_padding-x: var(--ui-button-padding-x, var(--ui-space-2, #{t.$space-2}));
+    // @desc Font size
     --_font-size: var(--ui-button-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Font weight
     --_font-weight: var(--ui-button-font-weight, var(--ui-weight-medium, #{t.$weight-medium}));
+    // @desc Corner radius
     --_radius: var(--ui-button-radius, var(--ui-radius-md, #{t.$radius-md}));
     --_bg: var(--_accent);
     --_bg-hover: color-mix(in oklch, var(--_accent) 80%, black);
+    // @desc Text color
     --_color: var(--ui-button-color, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
   }
 
   // @modifier size
   .button--sm {
     --ui-ctx-size: var(--ui-size-sm, #{t.size(sm)});
+    // @desc Overall height at small size
     --_height: var(--ui-button-height-sm, calc(var(--ui-row, #{t.$row}) * 1.5));
+    // @desc Font size at small size
     --_font-size: var(--ui-button-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
   }
 
   .button--md {
     --ui-ctx-size: var(--ui-size-md, #{t.size(md)});
+    // @desc Overall height at medium size
     --_height: var(--ui-button-height-md, var(--ui-row-2, #{t.$row-2}));
+    // @desc Font size at medium size
     --_font-size: var(--ui-button-font-size-md, var(--ui-font-size-sm, #{t.$font-size-sm}));
   }
 
   .button--lg {
     --ui-ctx-size: var(--ui-size-lg, #{t.size(lg)});
+    // @desc Overall height at large size
     --_height: var(--ui-button-height-lg, calc(var(--ui-row, #{t.$row}) * 2.5));
+    // @desc Horizontal padding at large size
     --_padding-x: var(--ui-button-padding-x-lg, var(--ui-space-3, #{t.$space-3}));
+    // @desc Font size at large size
     --_font-size: var(--ui-button-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
   }
 
@@ -61,6 +85,7 @@
   }
 
   .button--danger {
+    // @desc Used by --danger variant as accent color
     --_accent: var(--ui-color-danger, #{t.$color-danger});
   }
 
@@ -107,7 +132,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--ui-space-1, #{t.$space-1});
+    gap: var(--_space-1);
 
     // Size
     block-size: var(--_height);
@@ -117,7 +142,7 @@
     margin: 0;
 
     // Typography
-    font-family: var(--ui-font-sans, #{t.$font-sans});
+    font-family: var(--_font-sans);
     font-size: var(--_font-size);
     font-weight: var(--_font-weight);
     line-height: 1;
@@ -132,9 +157,9 @@
 
     // Transitions
     transition:
-      background-color var(--ui-duration-base) var(--ui-ease-default),
-      color var(--ui-duration-base) var(--ui-ease-default),
-      transform var(--ui-duration-fast) var(--ui-ease-default);
+      background-color var(--_duration-base) var(--_ease-default),
+      color var(--_duration-base) var(--_ease-default),
+      transform var(--_duration-fast) var(--_ease-default);
 
     // States - modifiers mirror pseudo-classes for testing/docs
     &:hover,
@@ -146,8 +171,8 @@
 
     &:focus-visible,
     &--focus {
-      outline: var(--ui-border-width-md, #{t.$border-width-md}) solid var(--ui-color-focus, #{t.$color-focus});
-      outline-offset: var(--ui-border-width-md, #{t.$border-width-md});
+      outline: var(--_border-width-md) solid var(--_color-focus);
+      outline-offset: var(--_border-width-md);
     }
 
     &:active,
@@ -156,7 +181,7 @@
     }
 
     &:disabled {
-      opacity: var(--ui-opacity-disabled, 0.5);
+      opacity: var(--_opacity-disabled);
       cursor: not-allowed;
 
       &:hover {
@@ -178,10 +203,10 @@
     // Link variant underline
     &--link {
       text-decoration: underline;
-      text-underline-offset: var(--ui-space-quarter);
+      text-underline-offset: var(--_space-quarter);
 
       &:hover {
-        text-decoration-thickness: var(--ui-space-quarter);
+        text-decoration-thickness: var(--_space-quarter);
       }
     }
 
@@ -205,7 +230,7 @@
     &--loading {
       position: relative;
 
-      opacity: var(--ui-opacity-loading, 0.7);
+      opacity: var(--_opacity-loading);
       pointer-events: none;
 
       &::after {

package/src/components/actions/button-group/button-group.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "button-group",
   "element": "div",
   "modifiers": {
@@ -9,7 +10,8 @@
   "cssVars": [
     {
       "name": "--ui-button-group-radius",
-      "default": "var(--ui-radius-md)"
+      "default": "var(--ui-radius-md)",
+      "description": "Corner radius"
     }
   ]
 }

package/src/components/actions/button-group/index.scss

@@ -1,10 +1,13 @@
 @use '../../../config/tokens/variables' as t;
+// @component button-group
+// @element div
 
 // Button Group - container for grouped buttons
 // Joins buttons together with shared borders
 
 @layer components.tokens {
   .button-group {
+    // @desc Corner radius
     --_radius: var(--ui-button-group-radius, var(--ui-radius-md, calc(#{t.$unit} / 2)));
   }
 }
@@ -40,6 +43,7 @@
   }
 
   // Vertical orientation
+  // @modifier boolean vertical
   .button-group--vertical {
     flex-direction: column;
   }

package/src/components/actions/close-button/close-button.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "close-button",
   "element": "button",
   "modifiers": {
@@ -7,6 +8,12 @@
     },
     "subtle": {
       "type": "boolean"
+    },
+    "hover": {
+      "type": "boolean"
+    },
+    "focus": {
+      "type": "boolean"
     }
   },
   "elements": {
@@ -15,57 +22,63 @@
   "cssVars": [
     {
       "name": "--ui-close-button-size",
-      "description": "Overall button size (width and height)",
-      "default": "var(--ui-row-2)"
+      "default": "var(--ui-row-2)",
+      "description": "Overall button size (width and height)"
     },
     {
       "name": "--ui-close-button-icon-size",
-      "description": "Size of the X icon",
-      "default": "var(--ui-size-md)"
+      "default": "var(--ui-size-md)",
+      "description": "Size of the X icon"
     },
     {
       "name": "--ui-close-button-color",
-      "description": "Icon color",
-      "default": "var(--ui-color-text-muted)"
+      "default": "var(--ui-color-text-muted)",
+      "description": "Icon color"
     },
     {
       "name": "--ui-close-button-bg",
-      "description": "Background color",
-      "default": "transparent"
+      "default": "transparent",
+      "description": "Background color"
     },
     {
       "name": "--ui-close-button-hover-bg",
-      "description": "Background color on hover",
-      "default": "var(--ui-color-bg-muted)"
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Background color on hover"
     },
     {
       "name": "--ui-close-button-radius",
-      "description": "Border radius",
-      "default": "var(--ui-radius-md)"
+      "default": "var(--ui-radius-md)",
+      "description": "Border radius"
     },
     {
       "name": "--ui-close-button-size-sm",
-      "default": "calc(var(--ui-unit) * 3)"
+      "default": "calc(var(--ui-unit) * 3)",
+      "description": "Overall size at small size"
     },
     {
       "name": "--ui-close-button-icon-size-sm",
-      "default": "var(--ui-size-sm)"
+      "default": "var(--ui-size-sm)",
+      "description": "Icon dimensions at small size"
     },
     {
       "name": "--ui-close-button-size-lg",
-      "default": "var(--ui-row-3)"
+      "default": "var(--ui-row-3)",
+      "description": "Overall size at large size"
     },
     {
       "name": "--ui-close-button-icon-size-lg",
-      "default": "var(--ui-size-lg)"
+      "default": "var(--ui-size-lg)",
+      "description": "Icon dimensions at large size"
     },
     {
       "name": "--ui-close-button-subtle-color",
-      "default": "var(--ui-color-border-strong)"
+      "default": "var(--ui-color-border-strong)",
+      "description": "Subtle color"
     },
     {
       "name": "--ui-close-button-subtle-hover-bg",
-      "default": "var(--ui-color-bg-subtle)"
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Subtle hover bg"
     }
   ]
 }

package/src/components/actions/close-button/index.scss

@@ -5,28 +5,46 @@
 
 @layer components.tokens {
   .close-button {
+    --_duration-base: var(--ui-duration-base, #{t.$duration-base});
+    --_ease-default: var(--ui-ease-default, ease);
+    --_color-text: var(--ui-color-text, #{t.$color-text});
+    --_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});
+    // @desc Overall button size (width and height)
     --_size: var(--ui-close-button-size, var(--ui-row-2, #{t.$row-2}));
+    // @desc Size of the X icon
     --_icon-size: var(--ui-close-button-icon-size, var(--ui-size-md, #{t.size(md)}));
+    // @desc Icon color
     --_color: var(--ui-close-button-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    // @desc Background color
     --_bg: var(--ui-close-button-bg, transparent);
+    // @desc Background color on hover
     --_hover-bg: var(--ui-close-button-hover-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    // @desc Border radius
     --_radius: var(--ui-close-button-radius, var(--ui-radius-md, #{t.$radius-md}));
   }
 
   // @modifier size
   .close-button--sm {
+    // @desc Overall size at small size
     --_size: var(--ui-close-button-size-sm, calc(#{t.$unit} * 3));
+    // @desc Icon dimensions at small size
     --_icon-size: var(--ui-close-button-icon-size-sm, var(--ui-size-sm, #{t.size(sm)}));
   }
 
   .close-button--lg {
+    // @desc Overall size at large size
     --_size: var(--ui-close-button-size-lg, var(--ui-row-3, #{t.$row-3}));
+    // @desc Icon dimensions at large size
     --_icon-size: var(--ui-close-button-icon-size-lg, var(--ui-size-lg, #{t.size(lg)}));
   }
 
   // @modifier boolean subtle
   .close-button--subtle {
+    // @desc Subtle color
     --_color: var(--ui-close-button-subtle-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    // @desc Subtle hover bg
     --_hover-bg: var(--ui-close-button-subtle-hover-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
   }
 }
@@ -52,20 +70,22 @@
     appearance: none;
 
     transition:
-      background-color var(--ui-duration-base, 150ms) var(--ui-ease-default, ease),
-      color var(--ui-duration-base, 150ms) var(--ui-ease-default, ease);
+      background-color var(--_duration-base) var(--_ease-default),
+      color var(--_duration-base) var(--_ease-default);
 
     &:hover,
+  // @modifier boolean hover
     &--hover {
-      color: var(--ui-color-text, #{t.$color-text});
+      color: var(--_color-text);
 
       background: var(--_hover-bg);
     }
 
     &:focus-visible,
+  // @modifier boolean focus
     &--focus {
-      outline: var(--ui-border-width-md, #{t.$border-width-md}) solid var(--ui-color-focus, #{t.$color-focus});
-      outline-offset: var(--ui-border-width-md, #{t.$border-width-md});
+      outline: var(--_border-width-md) solid var(--_color-focus);
+      outline-offset: var(--_border-width-md);
     }
 
     &:active,
@@ -74,7 +94,7 @@
     }
 
     &:disabled {
-      opacity: var(--ui-opacity-disabled, 0.5);
+      opacity: var(--_opacity-disabled);
       cursor: not-allowed;
 
       &:hover {

package/src/components/content/divider/divider.api.json

@@ -1,33 +1,38 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "divider",
   "element": "div",
   "modifiers": {
     "vertical": {
       "type": "boolean"
     },
-    "dashed": {
-      "type": "boolean"
-    },
     "position": {
       "values": ["start", "end"]
+    },
+    "dashed": {
+      "type": "boolean"
     }
   },
   "cssVars": [
     {
       "name": "--ui-divider-color",
-      "default": "var(--ui-color-border)"
+      "default": "var(--ui-color-border)",
+      "description": "Text color"
     },
     {
       "name": "--ui-divider-line-size",
-      "default": "1px"
+      "default": "var(--ui-border-width-sm)",
+      "description": "Line size"
     },
     {
       "name": "--ui-divider-height",
-      "default": "var(--ui-unit)"
+      "default": "var(--ui-unit)",
+      "description": "Overall height"
     },
     {
       "name": "--ui-divider-gap",
-      "default": "calc(var(--ui-unit) * 2"
+      "default": "calc(var(--ui-unit) * 2)",
+      "description": "Gap between children"
     }
   ]
 }

package/src/components/content/divider/index.scss

@@ -5,9 +5,15 @@
 
 @layer components.tokens {
   .divider {
-    --_color: var(--ui-divider-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
-    --_line-size: var(--ui-divider-line-size, 1px);
+    --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
+    --_color-text-muted: var(--ui-color-text-muted);
+    // @desc Text color
+    --_color: var(--ui-divider-color, var(--ui-color-border, #{t.$color-border}));
+    // @desc Line size
+    --_line-size: var(--ui-divider-line-size, #{t.$border-width-sm});
+    // @desc Overall height
     --_height: var(--ui-divider-height, #{t.$unit});
+    // @desc Gap between children
     --_gap: var(--ui-divider-gap, calc(#{t.$unit} * 2));
   }
 }
@@ -20,9 +26,9 @@
     block-size: var(--_height);
     margin: var(--_gap) 0;
 
-    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
+    font-size: var(--_font-size-sm);
     line-height: 1;
-    color: var(--ui-color-text-muted);
+    color: var(--_color-text-muted);
   }
 
   // Horizontal line (default)
@@ -74,6 +80,7 @@
   }
 
   // @modifier align
+  // @modifier position
   .divider--start::before {
     display: none;
   }

package/src/components/content/scroll-area/index.scss

@@ -5,29 +5,41 @@
 
 @layer components.tokens {
   .scroll-area {
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, ease);
+    // @desc Maximum height
     --_max-height: var(--ui-scroll-area-max-height, calc(#{t.$row} * 10));
+    // @desc Scrollbar size
     --_scrollbar-size: var(--ui-scroll-area-scrollbar-size, calc(#{t.$unit} * 1));
+    // @desc Thumb control text color
     --_thumb-color: var(--ui-scroll-area-thumb-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    // @desc Thumb hover color
     --_thumb-hover-color: var(--ui-scroll-area-thumb-hover-color, var(--ui-color-neutral-400, #{t.$color-neutral-400}));
+    // @desc Track text color
     --_track-color: var(--ui-scroll-area-track-color, transparent);
+    // @desc Thumb corner radius
     --_thumb-radius: var(--ui-scroll-area-thumb-radius, var(--ui-radius-full, #{t.$radius-full}));
   }
 
   // @modifier size
   .scroll-area--sm {
+    // @desc Maximum height at small size
     --_max-height: var(--ui-scroll-area-max-height-sm, calc(#{t.$row} * 5));
   }
 
   .scroll-area--lg {
+    // @desc Maximum height at large size
     --_max-height: var(--ui-scroll-area-max-height-lg, calc(#{t.$row} * 15));
   }
 
   .scroll-area--xl {
+    // @desc Maximum height at extra-large size
     --_max-height: var(--ui-scroll-area-max-height-xl, calc(#{t.$row} * 20));
   }
 
   // @modifier thin scrollbar
   .scroll-area--thin {
+    // @desc Scrollbar size thin
     --_scrollbar-size: var(--ui-scroll-area-scrollbar-size-thin, calc(#{t.$unit} * 0.5));
   }
 }
@@ -67,6 +79,7 @@
   }
 
   // Horizontal scrolling
+  // @modifier direction
   .scroll-area--horizontal > .scroll-area__viewport {
     max-block-size: none;
     overflow-x: auto;
@@ -80,10 +93,11 @@
   }
 
   // Auto-hide: fade scrollbar until hover
+  // @modifier boolean auto-hide
   .scroll-area--auto-hide > .scroll-area__viewport::-webkit-scrollbar-thumb {
     background: transparent;
 
-    transition: background var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+    transition: background var(--_duration-fast) var(--_ease-default);
   }
 
   .scroll-area--auto-hide > .scroll-area__viewport:hover::-webkit-scrollbar-thumb {