@teseor/css 1.8.0 → 1.9.0

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

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "password-input",
   "element": "div",
   "modifiers": {
@@ -22,63 +23,93 @@
   "cssVars": [
     {
       "name": "--ui-password-input-height",
-      "default": "var(--ui-row-2)"
-    },
-    {
-      "name": "--ui-password-input-height-sm",
-      "default": "calc(var(--ui-row) * 1.5)"
-    },
-    {
-      "name": "--ui-password-input-height-lg",
-      "default": "calc(var(--ui-row) * 2.5)"
+      "default": "var(--ui-row-2)",
+      "description": "Overall height"
     },
     {
       "name": "--ui-password-input-padding-x",
-      "default": "var(--ui-space-1)"
+      "default": "var(--ui-space-1)",
+      "description": "Horizontal padding"
     },
     {
       "name": "--ui-password-input-font-size",
-      "default": "var(--ui-font-size-sm)"
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
     },
     {
       "name": "--ui-password-input-radius",
-      "default": "var(--ui-radius-md)"
+      "default": "var(--ui-radius-md)",
+      "description": "Corner radius"
     },
     {
       "name": "--ui-password-input-bg",
-      "default": "var(--ui-color-bg)"
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
     },
     {
       "name": "--ui-password-input-border-color",
-      "default": "var(--ui-color-border-strong)"
+      "default": "var(--ui-color-border-strong)",
+      "description": "Border color"
     },
     {
       "name": "--ui-password-input-border-color-focus",
-      "default": "var(--ui-color-primary)"
+      "default": "var(--ui-color-primary)",
+      "description": "Border color focus"
     },
     {
       "name": "--ui-password-input-text",
-      "default": "var(--ui-color-text)"
+      "default": "var(--ui-color-text)",
+      "description": "Text"
     },
     {
       "name": "--ui-password-input-placeholder",
-      "default": "var(--ui-color-text-muted)"
+      "default": "var(--ui-color-text-muted)",
+      "description": "Placeholder"
     },
     {
-      "name": "--ui-password-input-error-border",
-      "default": "var(--ui-color-danger)"
+      "name": "--ui-password-input-toggle-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Toggle color"
     },
     {
-      "name": "--ui-password-input-success-border",
-      "default": "var(--ui-color-success)"
+      "name": "--ui-password-input-toggle-hover-bg",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Toggle hover bg"
     },
     {
-      "name": "--ui-password-input-toggle-color",
-      "default": "var(--ui-color-text-muted)"
+      "name": "--ui-password-input-height-sm",
+      "default": "calc(var(--ui-row) * 1.5)",
+      "description": "Overall height at small size"
     },
     {
-      "name": "--ui-password-input-toggle-hover-bg",
-      "default": "var(--ui-color-bg-muted)"
+      "name": "--ui-password-input-font-size-sm",
+      "default": "var(--ui-font-size-xs)",
+      "description": "Font size at small size"
+    },
+    {
+      "name": "--ui-password-input-height-lg",
+      "default": "calc(var(--ui-row) * 2.5)",
+      "description": "Overall height at large size"
+    },
+    {
+      "name": "--ui-password-input-padding-x-lg",
+      "default": "var(--ui-space-2)",
+      "description": "Horizontal padding at large size"
+    },
+    {
+      "name": "--ui-password-input-font-size-lg",
+      "default": "var(--ui-font-size-md)",
+      "description": "Font size at large size"
+    },
+    {
+      "name": "--ui-password-input-error-border",
+      "default": "var(--ui-color-danger)",
+      "description": "Error border"
+    },
+    {
+      "name": "--ui-password-input-success-border",
+      "default": "var(--ui-color-success)",
+      "description": "Success border"
     }
   ]
 }

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

@@ -142,6 +142,46 @@
         }
       ]
     },
+    {
+      "title": "Block",
+      "description": "Full-width layout.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-password-input ui-password-input--block",
+              "children": [
+                {
+                  "tag": "input",
+                  "class": "ui-password-input__field",
+                  "attrs": { "type": "password", "placeholder": "Full width" }
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-password-input__toggle",
+                  "attrs": { "type": "button", "aria-label": "Show password" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "viewBox": "0 0 24 24" },
+                      "children": [
+                        {
+                          "tag": "path",
+                          "attrs": { "d": "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }
+                        },
+                        { "tag": "circle", "attrs": { "cx": "12", "cy": "12", "r": "3" } }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-password-input ui-password-input--block\">...</div>"
+        }
+      ]
+    },
     {
       "title": "States",
       "examples": [

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

@@ -5,27 +5,44 @@
 
 @layer components.tokens {
   .radio {
+    --_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);
+    --_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 size
     --_size: var(--ui-radio-size, calc(#{t.$unit} * 2));
+    // @desc Background color
     --_bg: var(--ui-radio-bg, var(--ui-color-bg, #{t.$color-bg}));
+    // @desc Bg checked
     --_bg-checked: var(--ui-radio-bg-checked, var(--ui-color-primary, #{t.$color-primary}));
+    // @desc Border color
     --_border-color: var(--ui-radio-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    // @desc Border color focus
     --_border-color-focus: var(--ui-radio-border-color-focus, var(--ui-color-primary, #{t.$color-primary}));
+    // @desc Dot color
     --_dot-color: var(--ui-radio-dot-color, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
   }
 
   // @modifier size
   .radio--lg {
+    // @desc Overall size at large size
     --_size: var(--ui-radio-size-lg, calc(#{t.$unit} * 3));
   }
 
   // @modifier state
   .radio--error {
+    // @desc Error border
     --_border-color: var(--ui-radio-error-border, var(--ui-color-danger, #{t.$color-danger}));
+    // @desc Error border
     --_border-color-focus: var(--ui-radio-error-border, var(--ui-color-danger, #{t.$color-danger}));
   }
 
   .radio--success {
+    // @desc Success border
     --_border-color: var(--ui-radio-success-border, var(--ui-color-success, #{t.$color-success}));
+    // @desc Success border
     --_border-color-focus: var(--ui-radio-success-border, var(--ui-color-success, #{t.$color-success}));
   }
 }
@@ -45,16 +62,16 @@
     vertical-align: middle;
 
     background: var(--_bg);
-    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: 50%;
     cursor: pointer;
     // Reset native radio
     appearance: none;
 
     transition:
-      background-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),
-      border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),
-      box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+      background-color var(--_duration-fast) var(--_ease-default),
+      border-color var(--_duration-fast) var(--_ease-default),
+      box-shadow var(--_duration-fast) var(--_ease-default);
 
     // Inner dot for checked state
     &::before {
@@ -69,8 +86,8 @@
       transform: scale(0);
 
       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);
     }
 
     &:hover:not(:disabled) {
@@ -79,10 +96,10 @@
 
     &:focus-visible {
       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);
     }
 
     &:checked {
@@ -96,7 +113,7 @@
     }
 
     &:disabled {
-      opacity: var(--ui-opacity-disabled, 0.5);
+      opacity: var(--_opacity-disabled);
       cursor: not-allowed;
     }
   }

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

@@ -1,9 +1,10 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "radio",
   "element": "input",
   "modifiers": {
     "size": {
-      "values": ["sm", "lg"]
+      "values": ["lg"]
     },
     "state": {
       "values": ["error", "success"]
@@ -12,39 +13,48 @@
   "cssVars": [
     {
       "name": "--ui-radio-size",
-      "default": "calc(var(--ui-unit) * 2"
+      "default": "calc(var(--ui-unit) * 2)",
+      "description": "Overall size"
     },
     {
       "name": "--ui-radio-bg",
-      "default": "var(--ui-color-bg)"
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
     },
     {
       "name": "--ui-radio-bg-checked",
-      "default": "var(--ui-color-primary)"
+      "default": "var(--ui-color-primary)",
+      "description": "Bg checked"
     },
     {
       "name": "--ui-radio-border-color",
-      "default": "var(--ui-color-border-strong)"
+      "default": "var(--ui-color-border-strong)",
+      "description": "Border color"
     },
     {
       "name": "--ui-radio-border-color-focus",
-      "default": "var(--ui-color-primary)"
+      "default": "var(--ui-color-primary)",
+      "description": "Border color focus"
     },
     {
       "name": "--ui-radio-dot-color",
-      "default": "var(--ui-color-text-inverse)"
+      "default": "var(--ui-color-text-inverse)",
+      "description": "Dot color"
     },
     {
       "name": "--ui-radio-size-lg",
-      "default": "calc(var(--ui-unit) * 3"
+      "default": "calc(var(--ui-unit) * 3)",
+      "description": "Overall size at large size"
     },
     {
       "name": "--ui-radio-error-border",
-      "default": "var(--ui-color-danger)"
+      "default": "var(--ui-color-danger)",
+      "description": "Error border"
     },
     {
       "name": "--ui-radio-success-border",
-      "default": "var(--ui-color-success)"
+      "default": "var(--ui-color-success)",
+      "description": "Success border"
     }
   ]
 }

package/src/components/forms/radio-group/index.scss

@@ -5,22 +5,38 @@
 
 @layer components.tokens {
   .radio-group {
+    --_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1, #{t.$leading-tight-sm}));
+    --_row-1: var(--ui-row-1, #{t.$row-1});
+    --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
+    --_space-2: var(--ui-space-2, #{t.$space-2});
+    // @desc Spacing
     --_spacing: var(--ui-radio-group-spacing, var(--ui-space-1, #{t.$space-1}));
+    // @desc Legend size
     --_legend-size: var(--ui-radio-group-legend-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Legend weight
     --_legend-weight: var(--ui-radio-group-legend-weight, var(--ui-weight-medium, #{t.$weight-medium}));
+    // @desc Legend color
     --_legend-color: var(--ui-radio-group-legend-color, var(--ui-color-text, #{t.$color-text}));
+    // @desc Legend spacing
     --_legend-spacing: var(--ui-radio-group-legend-spacing, var(--ui-space-1, #{t.$space-1}));
+    // @desc Item gap between children
     --_item-gap: var(--ui-radio-group-item-gap, var(--ui-space-1, #{t.$space-1}));
   }
 
+  // @modifier boolean compact
   .radio-group--compact {
+    // @desc Spacing compact
     --_spacing: var(--ui-radio-group-spacing-compact, 0);
+    // @desc Legend spacing compact
     --_legend-spacing: var(--ui-radio-group-legend-spacing-compact, 0);
+    // @desc Item gap compact
     --_item-gap: var(--ui-radio-group-item-gap-compact, 0);
   }
 
   // @modifier state
+  // @modifier boolean error
   .radio-group--error {
+    // @desc Error color
     --_legend-color: var(--ui-radio-group-error-color, var(--ui-color-danger, #{t.$color-danger}));
   }
 }
@@ -43,7 +59,7 @@
 
     font-size: var(--_legend-size);
     font-weight: var(--_legend-weight);
-    line-height: var(--ui-leading-tight-sm, var(--ui-row-1, #{t.$leading-tight-sm}));
+    line-height: var(--_leading-tight-sm);
     color: var(--_legend-color);
   }
 
@@ -58,27 +74,28 @@
     align-items: center;
     gap: var(--_item-gap);
 
-    line-height: var(--ui-row-1, #{t.$row-1});
+    line-height: var(--_row-1);
 
     cursor: pointer;
   }
 
   .radio-group__item:has(:disabled) {
-    opacity: var(--ui-opacity-disabled, 0.5);
+    opacity: var(--_opacity-disabled);
     cursor: not-allowed;
   }
 
   // Horizontal layout
+  // @modifier boolean horizontal
   .radio-group--horizontal > .radio-group__items {
     flex-direction: row;
     flex-wrap: wrap;
-    gap: var(--ui-space-2, #{t.$space-2});
+    gap: var(--_space-2);
   }
 
   // Disabled group
   .radio-group:disabled,
   .radio-group[aria-disabled='true'] {
-    opacity: var(--ui-opacity-disabled, 0.5);
+    opacity: var(--_opacity-disabled);
     cursor: not-allowed;
   }
 }

package/src/components/forms/radio-group/radio-group.api.json

@@ -1,15 +1,16 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "radio-group",
   "element": "fieldset",
   "modifiers": {
-    "horizontal": {
-      "type": "boolean"
-    },
     "compact": {
       "type": "boolean"
     },
     "error": {
       "type": "boolean"
+    },
+    "horizontal": {
+      "type": "boolean"
     }
   },
   "elements": {
@@ -20,35 +21,53 @@
   "cssVars": [
     {
       "name": "--ui-radio-group-spacing",
-      "default": "var(--ui-space-1)"
-    },
-    {
-      "name": "--ui-radio-group-spacing-compact",
-      "default": "0"
+      "default": "var(--ui-space-1)",
+      "description": "Spacing"
     },
     {
       "name": "--ui-radio-group-legend-size",
-      "default": "var(--ui-font-size-sm)"
+      "default": "var(--ui-font-size-sm)",
+      "description": "Legend size"
     },
     {
       "name": "--ui-radio-group-legend-weight",
-      "default": "var(--ui-weight-medium)"
+      "default": "var(--ui-weight-medium)",
+      "description": "Legend weight"
     },
     {
       "name": "--ui-radio-group-legend-color",
-      "default": "var(--ui-color-text)"
+      "default": "var(--ui-color-text)",
+      "description": "Legend color"
     },
     {
       "name": "--ui-radio-group-legend-spacing",
-      "default": "var(--ui-space-1)"
+      "default": "var(--ui-space-1)",
+      "description": "Legend spacing"
     },
     {
       "name": "--ui-radio-group-item-gap",
-      "default": "var(--ui-space-1)"
+      "default": "var(--ui-space-1)",
+      "description": "Item gap between children"
+    },
+    {
+      "name": "--ui-radio-group-spacing-compact",
+      "default": "0",
+      "description": "Spacing compact"
+    },
+    {
+      "name": "--ui-radio-group-legend-spacing-compact",
+      "default": "0",
+      "description": "Legend spacing compact"
+    },
+    {
+      "name": "--ui-radio-group-item-gap-compact",
+      "default": "0",
+      "description": "Item gap compact"
     },
     {
       "name": "--ui-radio-group-error-color",
-      "default": "var(--ui-color-danger)"
+      "default": "var(--ui-color-danger)",
+      "description": "Error color"
     }
   ]
 }

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

@@ -5,32 +5,60 @@
 
 @layer components.tokens {
   .search-input {
+    --_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);
+    --_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-half: var(--ui-space-half, #{t.$space-0});
+    --_radius-sm: var(--ui-radius-sm, #{t.$radius-sm});
+    // @desc Overall height
     --_height: var(--ui-search-input-height, var(--ui-row-2, #{t.$row-2}));
+    // @desc Horizontal padding
     --_padding-x: var(--ui-search-input-padding-x, var(--ui-space-1, #{t.$space-1}));
+    // @desc Font size
     --_font-size: var(--ui-search-input-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Corner radius
     --_radius: var(--ui-search-input-radius, var(--ui-radius-md, #{t.$radius-md}));
+    // @desc Background color
     --_bg: var(--ui-search-input-bg, var(--ui-color-bg, #{t.$color-bg}));
+    // @desc Border color
     --_border-color: var(--ui-search-input-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    // @desc Border color focus
     --_border-color-focus: var(--ui-search-input-border-color-focus, var(--ui-color-primary, #{t.$color-primary}));
+    // @desc Text
     --_text: var(--ui-search-input-text, var(--ui-color-text, #{t.$color-text}));
+    // @desc Placeholder
     --_placeholder: var(--ui-search-input-placeholder, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    // @desc Icon color
     --_icon-color: var(--ui-search-input-icon-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    // @desc Icon dimensions
     --_icon-size: var(--ui-search-input-icon-size, var(--ui-size-md, #{t.size(md)}));
+    // @desc Clear color
     --_clear-color: var(--ui-search-input-clear-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    // @desc Clear hover bg
     --_clear-hover-bg: var(--ui-search-input-clear-hover-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
   }
 
   // @modifier size
   .search-input--sm {
+    // @desc Overall height at small size
     --_height: var(--ui-search-input-height-sm, calc(#{t.$row} * 1.5));
+    // @desc Font size at small size
     --_font-size: var(--ui-search-input-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
+    // @desc Icon dimensions at small size
     --_icon-size: var(--ui-search-input-icon-size-sm, var(--ui-size-sm, #{t.size(sm)}));
   }
 
   .search-input--lg {
+    // @desc Overall height at large size
     --_height: var(--ui-search-input-height-lg, calc(#{t.$row} * 2.5));
+    // @desc Horizontal padding at large size
     --_padding-x: var(--ui-search-input-padding-x-lg, var(--ui-space-2, #{t.$space-2}));
+    // @desc Font size at large size
     --_font-size: var(--ui-search-input-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
+    // @desc Icon dimensions at large size
     --_icon-size: var(--ui-search-input-icon-size-lg, var(--ui-size-lg, #{t.size(lg)}));
   }
 }
@@ -43,29 +71,31 @@
     block-size: var(--_height);
 
     background: var(--_bg);
-    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);
 
     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);
 
     // Focus via inner field
     &:focus-within,
     &--focus {
       border-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);
     }
 
     // Full width
+  // @modifier boolean block
     &--block {
       inline-size: 100%;
     }
 
     // Disabled
+  // @modifier boolean disabled
     &--disabled,
     &:has(.search-input__field:disabled) {
-      opacity: var(--ui-opacity-disabled, 0.5);
+      opacity: var(--_opacity-disabled);
       cursor: not-allowed;
     }
   }
@@ -125,6 +155,7 @@
   }
 
   // Field padding when clear button present
+  // @modifier boolean has-clear
   .search-input--has-clear .search-input__field {
     padding-inline-end: 0;
   }
@@ -136,25 +167,25 @@
     align-items: center;
     justify-content: center;
 
-    block-size: calc(var(--_height) - var(--ui-space-half, #{t.$space-0}) * 2);
-    inline-size: calc(var(--_height) - var(--ui-space-half, #{t.$space-0}) * 2);
-    margin-inline-end: calc(var(--ui-space-half, #{t.$space-0}));
+    block-size: calc(var(--_height) - var(--_space-half) * 2);
+    inline-size: calc(var(--_height) - var(--_space-half) * 2);
+    margin-inline-end: calc(var(--_space-half));
 
     color: var(--_clear-color);
 
     background: transparent;
     border: none;
-    border-radius: var(--ui-radius-sm, #{t.$radius-sm});
+    border-radius: var(--_radius-sm);
     cursor: pointer;
 
-    transition: background var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+    transition: background var(--_duration-fast) var(--_ease-default);
 
     &:hover {
       background: var(--_clear-hover-bg);
     }
 
     &:focus-visible {
-      outline: 2px solid var(--ui-color-focus, #{t.$color-focus});
+      outline: 2px solid var(--_color-focus);
       outline-offset: -2px;
     }