@teseor/css 1.8.0 → 1.9.0

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

@@ -1,85 +1,126 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "search-input",
   "element": "div",
   "modifiers": {
     "size": {
       "values": ["sm", "lg"]
     },
-    "has-clear": {
-      "type": "boolean"
-    },
     "block": {
       "type": "boolean"
     },
     "disabled": {
       "type": "boolean"
+    },
+    "has-clear": {
+      "type": "boolean"
     }
   },
   "elements": {
-    "icon": {},
     "field": {},
+    "icon": {},
     "clear": {}
   },
   "cssVars": [
     {
       "name": "--ui-search-input-height",
-      "default": "var(--ui-row-2)"
-    },
-    {
-      "name": "--ui-search-input-height-sm",
-      "default": "calc(var(--ui-row) * 1.5)"
-    },
-    {
-      "name": "--ui-search-input-height-lg",
-      "default": "calc(var(--ui-row) * 2.5)"
+      "default": "var(--ui-row-2)",
+      "description": "Overall height"
     },
     {
       "name": "--ui-search-input-padding-x",
-      "default": "var(--ui-space-1)"
+      "default": "var(--ui-space-1)",
+      "description": "Horizontal padding"
     },
     {
       "name": "--ui-search-input-font-size",
-      "default": "var(--ui-font-size-sm)"
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
     },
     {
       "name": "--ui-search-input-radius",
-      "default": "var(--ui-radius-md)"
+      "default": "var(--ui-radius-md)",
+      "description": "Corner radius"
     },
     {
       "name": "--ui-search-input-bg",
-      "default": "var(--ui-color-bg)"
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
     },
     {
       "name": "--ui-search-input-border-color",
-      "default": "var(--ui-color-border-strong)"
+      "default": "var(--ui-color-border-strong)",
+      "description": "Border color"
     },
     {
       "name": "--ui-search-input-border-color-focus",
-      "default": "var(--ui-color-primary)"
+      "default": "var(--ui-color-primary)",
+      "description": "Border color focus"
     },
     {
       "name": "--ui-search-input-text",
-      "default": "var(--ui-color-text)"
+      "default": "var(--ui-color-text)",
+      "description": "Text"
     },
     {
       "name": "--ui-search-input-placeholder",
-      "default": "var(--ui-color-text-muted)"
+      "default": "var(--ui-color-text-muted)",
+      "description": "Placeholder"
     },
     {
       "name": "--ui-search-input-icon-color",
-      "default": "var(--ui-color-text-muted)"
+      "default": "var(--ui-color-text-muted)",
+      "description": "Icon color"
     },
     {
       "name": "--ui-search-input-icon-size",
-      "default": "var(--ui-size-md)"
+      "default": "var(--ui-size-md)",
+      "description": "Icon dimensions"
     },
     {
       "name": "--ui-search-input-clear-color",
-      "default": "var(--ui-color-text-muted)"
+      "default": "var(--ui-color-text-muted)",
+      "description": "Clear color"
     },
     {
       "name": "--ui-search-input-clear-hover-bg",
-      "default": "var(--ui-color-bg-muted)"
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Clear hover bg"
+    },
+    {
+      "name": "--ui-search-input-height-sm",
+      "default": "calc(var(--ui-row) * 1.5)",
+      "description": "Overall height at small size"
+    },
+    {
+      "name": "--ui-search-input-font-size-sm",
+      "default": "var(--ui-font-size-xs)",
+      "description": "Font size at small size"
+    },
+    {
+      "name": "--ui-search-input-icon-size-sm",
+      "default": "var(--ui-size-sm)",
+      "description": "Icon dimensions at small size"
+    },
+    {
+      "name": "--ui-search-input-height-lg",
+      "default": "calc(var(--ui-row) * 2.5)",
+      "description": "Overall height at large size"
+    },
+    {
+      "name": "--ui-search-input-padding-x-lg",
+      "default": "var(--ui-space-2)",
+      "description": "Horizontal padding at large size"
+    },
+    {
+      "name": "--ui-search-input-font-size-lg",
+      "default": "var(--ui-font-size-md)",
+      "description": "Font size at large size"
+    },
+    {
+      "name": "--ui-search-input-icon-size-lg",
+      "default": "var(--ui-size-lg)",
+      "description": "Icon dimensions at large size"
     }
   ]
 }

package/src/components/forms/search-input/search-input.docs.json

@@ -176,6 +176,42 @@
         }
       ]
     },
+    {
+      "title": "Block",
+      "description": "Full-width layout.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-search-input ui-search-input--block",
+              "children": [
+                {
+                  "tag": "span",
+                  "class": "ui-search-input__icon",
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "viewBox": "0 0 24 24" },
+                      "children": [
+                        { "tag": "circle", "attrs": { "cx": "11", "cy": "11", "r": "8" } },
+                        { "tag": "path", "attrs": { "d": "m21 21-4.3-4.3" } }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "input",
+                  "class": "ui-search-input__field",
+                  "attrs": { "type": "search", "placeholder": "Full width search..." }
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-search-input ui-search-input--block\">...</div>"
+        }
+      ]
+    },
     {
       "title": "Disabled",
       "examples": [

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

@@ -5,31 +5,55 @@
 
 @layer components.tokens {
   .select {
+    --_space-half: var(--ui-space-half, #{t.$space-0});
+    --_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-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});
+    // @desc Overall height
     --_height: var(--ui-select-height, var(--ui-row-2, #{t.$row-2}));
+    // @desc Horizontal padding
     --_padding-x: var(--ui-select-padding-x, var(--ui-space-1, #{t.$space-1}));
+    // @desc Font size
     --_font-size: var(--ui-select-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Corner radius
     --_radius: var(--ui-select-radius, var(--ui-radius-md, #{t.$radius-md}));
+    // @desc Background color
     --_bg: var(--ui-select-bg, var(--ui-color-bg, #{t.$color-bg}));
+    // @desc Border color
     --_border-color: var(--ui-select-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    // @desc Border color focus
     --_border-color-focus: var(--ui-select-border-color-focus, var(--ui-color-primary, #{t.$color-primary}));
+    // @desc Text color
     --_color: var(--ui-select-color, var(--ui-color-text, #{t.$color-text}));
+    // @desc Icon color
     --_icon-color: var(--ui-select-icon-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
   }
 
   // @modifier size
   .select--sm {
+    // @desc Overall height at small size
     --_height: var(--ui-select-height-sm, calc(#{t.$row} * 1.5));
+    // @desc Font size at small size
     --_font-size: var(--ui-select-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
   }
 
   .select--lg {
+    // @desc Overall height at large size
     --_height: var(--ui-select-height-lg, calc(#{t.$row} * 2.5));
+    // @desc Horizontal padding at large size
     --_padding-x: var(--ui-select-padding-x-lg, var(--ui-space-2, #{t.$space-2}));
+    // @desc Font size at large size
     --_font-size: var(--ui-select-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
   }
 
   // @modifier variant
   .select--filled {
+    // @desc Filled bg
     --_bg: var(--ui-select-filled-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
     --_border-color: transparent;
   }
@@ -41,12 +65,16 @@
 
   // @modifier state
   .select--error {
+    // @desc Error border
     --_border-color: var(--ui-select-error-border, var(--ui-color-danger, #{t.$color-danger}));
+    // @desc Error border
     --_border-color-focus: var(--ui-select-error-border, var(--ui-color-danger, #{t.$color-danger}));
   }
 
   .select--success {
+    // @desc Success border
     --_border-color: var(--ui-select-success-border, var(--ui-color-success, #{t.$color-success}));
+    // @desc Success border
     --_border-color-focus: var(--ui-select-success-border, var(--ui-color-success, #{t.$color-success}));
   }
 }
@@ -59,7 +87,7 @@
     block-size: var(--_height);
     // Extra padding for arrow
     padding-inline-start: var(--_padding-x);
-    padding-inline-end: calc(var(--_height) - var(--ui-space-half, #{t.$space-0}));
+    padding-inline-end: calc(var(--_height) - var(--_space-half));
 
     font-family: inherit;
     font-size: var(--_font-size);
@@ -69,39 +97,40 @@
     background-color: var(--_bg);
     // Chevron down arrow
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
-    border: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+    border: var(--_border-width-sm) solid var(--_border-color);
     border-radius: var(--_radius);
     cursor: pointer;
     // Reset native select
     appearance: none;
 
     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);
+      border-color var(--_duration-fast) var(--_ease-default),
+      box-shadow var(--_duration-fast) var(--_ease-default);
     background-repeat: no-repeat;
-    background-position: right var(--ui-space-half, #{t.$space-0}) center;
+    background-position: right var(--_space-half) center;
     background-size: calc(var(--_height) * 0.5);
 
     &:hover:not(:disabled, :focus-visible) {
-      border-color: var(--ui-color-border-strong, #{t.$color-border-strong});
+      border-color: var(--_color-border-strong);
     }
 
     &:focus-visible,
     &--focus {
       border-color: var(--_border-color-focus);
-      outline: var(--ui-border-width-md, #{t.$border-width-md}) solid transparent;
-      outline-offset: var(--ui-border-width-sm, #{t.$border-width-sm});
+      outline: var(--_border-width-md) solid transparent;
+      outline-offset: var(--_border-width-sm);
 
-      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;
     }
 
     // Full width
+  // @modifier boolean block
     &--block {
       inline-size: 100%;
     }
@@ -109,7 +138,7 @@
     // Placeholder option styling
     &:invalid,
     &--placeholder {
-      color: var(--ui-color-text-muted, #{t.$color-text-muted});
+      color: var(--_color-text-muted);
     }
   }
 }

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

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "select",
   "element": "select",
   "modifiers": {
@@ -18,71 +19,88 @@
   "cssVars": [
     {
       "name": "--ui-select-height",
-      "default": "var(--ui-row-2)"
+      "default": "var(--ui-row-2)",
+      "description": "Overall height"
     },
     {
       "name": "--ui-select-padding-x",
-      "default": "var(--ui-space-1)"
+      "default": "var(--ui-space-1)",
+      "description": "Horizontal padding"
     },
     {
       "name": "--ui-select-font-size",
-      "default": "var(--ui-font-size-sm)"
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
     },
     {
       "name": "--ui-select-radius",
-      "default": "var(--ui-radius-md)"
+      "default": "var(--ui-radius-md)",
+      "description": "Corner radius"
     },
     {
       "name": "--ui-select-bg",
-      "default": "var(--ui-color-bg)"
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
     },
     {
       "name": "--ui-select-border-color",
-      "default": "var(--ui-color-border-strong)"
+      "default": "var(--ui-color-border-strong)",
+      "description": "Border color"
     },
     {
       "name": "--ui-select-border-color-focus",
-      "default": "var(--ui-color-primary)"
+      "default": "var(--ui-color-primary)",
+      "description": "Border color focus"
     },
     {
       "name": "--ui-select-color",
-      "default": "var(--ui-color-text)"
+      "default": "var(--ui-color-text)",
+      "description": "Text color"
     },
     {
       "name": "--ui-select-icon-color",
-      "default": "var(--ui-color-text-muted)"
+      "default": "var(--ui-color-text-muted)",
+      "description": "Icon color"
     },
     {
       "name": "--ui-select-height-sm",
-      "default": "calc(var(--ui-row) * 1.5"
+      "default": "calc(var(--ui-row) * 1.5)",
+      "description": "Overall height at small size"
     },
     {
       "name": "--ui-select-font-size-sm",
-      "default": "var(--ui-font-size-xs)"
+      "default": "var(--ui-font-size-xs)",
+      "description": "Font size at small size"
     },
     {
       "name": "--ui-select-height-lg",
-      "default": "calc(var(--ui-row) * 2.5"
+      "default": "calc(var(--ui-row) * 2.5)",
+      "description": "Overall height at large size"
     },
     {
       "name": "--ui-select-padding-x-lg",
-      "default": "var(--ui-space-2)"
+      "default": "var(--ui-space-2)",
+      "description": "Horizontal padding at large size"
     },
     {
       "name": "--ui-select-font-size-lg",
-      "default": "var(--ui-font-size-md)"
+      "default": "var(--ui-font-size-md)",
+      "description": "Font size at large size"
     },
     {
       "name": "--ui-select-filled-bg",
-      "default": "var(--ui-color-bg-muted)"
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Filled bg"
     },
     {
       "name": "--ui-select-error-border",
-      "default": "var(--ui-color-danger)"
+      "default": "var(--ui-color-danger)",
+      "description": "Error border"
     },
     {
       "name": "--ui-select-success-border",
-      "default": "var(--ui-color-success)"
+      "default": "var(--ui-color-success)",
+      "description": "Success border"
     }
   ]
 }

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

@@ -5,28 +5,46 @@
 
 @layer components.tokens {
   .slider {
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, ease);
+    --_border-width-md: var(--ui-border-width-md, #{t.$border-width-md});
+    --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
+    // @desc Overall height
     --_height: var(--ui-slider-height, var(--ui-row-2, #{t.$row-2}));
+    // @desc Track height
     --_track-height: var(--ui-slider-track-height, #{t.$unit});
-    --_track-bg: var(--ui-slider-track-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));
+    // @desc Track background
+    --_track-bg: var(--ui-slider-track-bg, var(--ui-color-bg-subtle, #{t.$overlay-bg-subtle}));
+    // @desc Track fill
     --_track-fill: var(--ui-slider-track-fill, var(--ui-color-primary));
+    // @desc Track corner radius
     --_track-radius: var(--ui-slider-track-radius, var(--ui-radius-full, #{t.$radius-full}));
+    // @desc Thumb control size
     --_thumb-size: var(--ui-slider-thumb-size, calc(#{t.$unit} * 2.5));
+    // @desc Thumb background
     --_thumb-bg: var(--ui-slider-thumb-bg, var(--ui-color-bg, #{t.$color-bg}));
+    // @desc Thumb control border color
     --_thumb-border-color: var(--ui-slider-thumb-border-color, var(--ui-color-primary));
+    // @desc Thumb control border thickness
     --_thumb-border-width: var(--ui-slider-thumb-border-width, var(--ui-border-width-md, #{t.$border-width-md}));
+    // @desc Thumb corner radius
     --_thumb-radius: var(--ui-slider-thumb-radius, var(--ui-radius-full, #{t.$radius-full}));
-    --_thumb-shadow: var(--ui-slider-thumb-shadow, 0 1px 3px rgb(0 0 0 / 0.2));
+    // @desc Thumb control box shadow
+    --_thumb-shadow: var(--ui-slider-thumb-shadow, #{t.$slider-thumb-shadow});
+    // @desc Focus ring
     --_focus-ring: var(--ui-slider-focus-ring, var(--ui-color-focus, #{t.$color-focus}));
   }
 
   // @modifier size
   .slider--sm {
+    // @desc Overall height at small size
     --_height: var(--ui-slider-height-sm, calc(#{t.$row} * 1.5));
     --_track-height: calc(#{t.$unit} * 0.5);
     --_thumb-size: calc(#{t.$unit} * 2);
   }
 
   .slider--lg {
+    // @desc Overall height at large size
     --_height: var(--ui-slider-height-lg, calc(#{t.$row} * 2.5));
     --_track-height: calc(#{t.$unit} * 1.5);
     --_thumb-size: calc(#{t.$unit} * 3);
@@ -101,8 +119,8 @@
       appearance: none;
 
       transition:
-        box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),
-        transform var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+        box-shadow var(--_duration-fast) var(--_ease-default),
+        transform var(--_duration-fast) var(--_ease-default);
     }
 
     // Firefox thumb
@@ -116,20 +134,20 @@
       box-shadow: var(--_thumb-shadow);
 
       transition:
-        box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),
-        transform var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+        box-shadow var(--_duration-fast) var(--_ease-default),
+        transform var(--_duration-fast) var(--_ease-default);
     }
 
     // Focus state
     &:focus-visible {
-      outline: var(--ui-border-width-md, #{t.$border-width-md}) solid transparent;
+      outline: var(--_border-width-md) solid transparent;
 
       &::-webkit-slider-thumb {
-        box-shadow: 0 0 0 var(--ui-border-width-md, #{t.$border-width-md}) var(--_focus-ring);
+        box-shadow: 0 0 0 var(--_border-width-md) var(--_focus-ring);
       }
 
       &::-moz-range-thumb {
-        box-shadow: 0 0 0 var(--ui-border-width-md, #{t.$border-width-md}) var(--_focus-ring);
+        box-shadow: 0 0 0 var(--_border-width-md) var(--_focus-ring);
       }
     }
 
@@ -146,7 +164,7 @@
 
     // Disabled state
     &:disabled {
-      opacity: var(--ui-opacity-disabled, 0.5);
+      opacity: var(--_opacity-disabled);
       cursor: not-allowed;
     }
   }

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

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "slider",
   "element": "input",
   "modifiers": {
@@ -12,59 +13,73 @@
   "cssVars": [
     {
       "name": "--ui-slider-height",
-      "default": "var(--ui-row-2)"
-    },
-    {
-      "name": "--ui-slider-height-sm",
-      "default": "calc(var(--ui-row) * 1.5)"
-    },
-    {
-      "name": "--ui-slider-height-lg",
-      "default": "calc(var(--ui-row) * 2.5)"
+      "default": "var(--ui-row-2)",
+      "description": "Overall height"
     },
     {
       "name": "--ui-slider-track-height",
-      "default": "var(--ui-unit)"
+      "default": "var(--ui-unit)",
+      "description": "Track height"
     },
     {
       "name": "--ui-slider-track-bg",
-      "default": "var(--ui-color-bg-subtle)"
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Track background"
     },
     {
       "name": "--ui-slider-track-fill",
-      "default": "var(--ui-color-primary)"
+      "default": "var(--ui-color-primary)",
+      "description": "Track fill"
     },
     {
       "name": "--ui-slider-track-radius",
-      "default": "var(--ui-radius-full)"
+      "default": "var(--ui-radius-full)",
+      "description": "Track corner radius"
     },
     {
       "name": "--ui-slider-thumb-size",
-      "default": "calc(var(--ui-unit) * 2.5)"
+      "default": "calc(var(--ui-unit) * 2.5)",
+      "description": "Thumb control size"
     },
     {
       "name": "--ui-slider-thumb-bg",
-      "default": "var(--ui-color-bg)"
+      "default": "var(--ui-color-bg)",
+      "description": "Thumb background"
     },
     {
       "name": "--ui-slider-thumb-border-color",
-      "default": "var(--ui-color-primary)"
+      "default": "var(--ui-color-primary)",
+      "description": "Thumb control border color"
     },
     {
       "name": "--ui-slider-thumb-border-width",
-      "default": "var(--ui-border-width-md)"
+      "default": "var(--ui-border-width-md)",
+      "description": "Thumb control border thickness"
     },
     {
       "name": "--ui-slider-thumb-radius",
-      "default": "var(--ui-radius-full)"
+      "default": "var(--ui-radius-full)",
+      "description": "Thumb corner radius"
     },
     {
       "name": "--ui-slider-thumb-shadow",
-      "default": "0 1px 3px rgb(0 0 0 / 0.2)"
+      "default": "var(--ui-slider-thumb-shadow)",
+      "description": "Thumb control box shadow"
     },
     {
       "name": "--ui-slider-focus-ring",
-      "default": "var(--ui-color-focus)"
+      "default": "var(--ui-color-focus)",
+      "description": "Focus ring"
+    },
+    {
+      "name": "--ui-slider-height-sm",
+      "default": "calc(var(--ui-row) * 1.5)",
+      "description": "Overall height at small size"
+    },
+    {
+      "name": "--ui-slider-height-lg",
+      "default": "calc(var(--ui-row) * 2.5)",
+      "description": "Overall height at large size"
     }
   ]
 }