@teseor/css 1.8.0 → 1.9.0

package/src/components/feedback/spinner/spinner.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "spinner",
   "element": "div",
   "modifiers": {
@@ -9,55 +10,68 @@
   "cssVars": [
     {
       "name": "--ui-spinner-size",
-      "default": "var(--ui-unit)"
+      "default": "calc(var(--ui-unit) * 4)",
+      "description": "Overall size"
     },
     {
       "name": "--ui-spinner-border-width",
-      "default": "var(--ui-border-width-md)"
+      "default": "var(--ui-border-width-md)",
+      "description": "Border thickness"
     },
     {
       "name": "--ui-spinner-color",
-      "default": "currentcolor"
+      "default": "currentcolor",
+      "description": "Text color"
     },
     {
       "name": "--ui-spinner-track-color",
-      "default": "transparent"
+      "default": "transparent",
+      "description": "Track text color"
     },
     {
       "name": "--ui-spinner-duration",
-      "default": "750ms"
+      "default": "var(--ui-spinner-duration)",
+      "description": "Animation duration"
     },
     {
       "name": "--ui-spinner-size-xs",
-      "default": "var(--ui-unit)"
+      "default": "calc(var(--ui-unit) * 2)",
+      "description": "Overall size at extra-small size"
     },
     {
       "name": "--ui-spinner-border-width-xs",
-      "default": "var(--ui-border-width-sm)"
+      "default": "var(--ui-border-width-sm)",
+      "description": "Border thickness at extra-small size"
     },
     {
       "name": "--ui-spinner-size-sm",
-      "default": "var(--ui-unit)"
+      "default": "calc(var(--ui-unit) * 3)",
+      "description": "Overall size at small size"
     },
     {
       "name": "--ui-spinner-border-width-sm",
-      "default": "var(--ui-border-width-md)"
+      "default": "var(--ui-border-width-md)",
+      "description": "Border thickness at small size"
     },
     {
       "name": "--ui-spinner-size-lg",
-      "default": "var(--ui-unit)"
+      "default": "calc(var(--ui-unit) * 5)",
+      "description": "Overall size at large size"
     },
     {
       "name": "--ui-spinner-border-width-lg",
-      "default": "var(--ui-border-width-md)"
+      "default": "var(--ui-border-width-md)",
+      "description": "Border thickness at large size"
     },
     {
       "name": "--ui-spinner-size-xl",
-      "default": "var(--ui-unit)"
+      "default": "calc(var(--ui-unit) * 6)",
+      "description": "Overall size at extra-large size"
     },
     {
       "name": "--ui-spinner-border-width-xl",
-      "default": "var(--ui-border-width-lg)"
+      "default": "var(--ui-border-width-lg)",
+      "description": "Border thickness at extra-large size"
     }
   ]
 }

package/src/components/feedback/toast/index.scss

@@ -1,24 +1,48 @@
 @use '../../../config/tokens/variables' as t;
+// @component toast
+// @element div
+// @related toast-viewport
 
 // Toast - notification messages
 // Appears in viewport corner with auto-dismiss
 
 @layer components.tokens {
   .toast-viewport {
+    --_z-toast: var(--ui-z-toast, #{t.$z-toast});
+    // @desc Viewport gap
     --_gap: var(--ui-toast-viewport-gap, calc(#{t.$unit} * 1));
+    // @desc Viewport padding
     --_padding: var(--ui-toast-viewport-padding, calc(#{t.$unit} * 2));
-    --_max-width: var(--ui-toast-viewport-max-width, 420px);
+    // @desc Viewport max width
+    --_max-width: var(--ui-toast-viewport-max-width, #{t.$toast-viewport-max-width});
   }
 
   .toast {
+    --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
+    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_row-1: var(--ui-row-1, #{t.$row});
+    --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
+    --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});
+    --_color-text: var(--ui-color-text, #{t.$color-text});
+    --_duration-normal: var(--ui-duration-normal, #{t.$duration-normal});
+    --_ease-out: var(--ui-ease-out, ease-out);
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-in: var(--ui-ease-in, ease-in);
+    // @desc Padding on all sides
     --_padding: var(--ui-toast-padding, calc(#{t.$unit} * 2));
+    // @desc Gap between children
     --_gap: var(--ui-toast-gap, calc(#{t.$unit} * 1));
+    // @desc Corner radius
     --_radius: var(--ui-toast-radius, var(--ui-radius-md, #{t.$radius-md}));
+    // @desc Background color
     --_bg: var(--ui-toast-bg, var(--ui-color-bg, #{t.$color-bg}));
+    // @desc Border color
     --_border-color: var(--ui-toast-border-color, var(--ui-color-border, #{t.$color-border}));
+    // @desc Box shadow
     --_shadow: var(--ui-toast-shadow, var(--ui-shadow-lg));
   }
 
+  // @modifier variant
   .toast--success {
     --_border-color: var(--ui-color-success);
   }
@@ -44,7 +68,7 @@
     flex-direction: column;
     gap: var(--_gap);
     position: fixed;
-    z-index: var(--ui-z-toast, 1000);
+    z-index: var(--_z-toast);
 
     max-inline-size: var(--_max-width);
     padding: var(--_padding);
@@ -99,10 +123,10 @@
 
     background: var(--_bg);
     border-radius: var(--_radius);
-    outline: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
+    outline: var(--_border-width-sm) solid var(--_border-color);
     box-shadow: var(--_shadow);
     pointer-events: auto;
-    outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
+    outline-offset: calc(var(--_border-width-sm) * -1);
   }
 
   .toast__icon {
@@ -118,16 +142,16 @@
   .toast__title {
     margin: 0;
 
-    font-weight: var(--ui-weight-medium, #{t.$weight-medium});
-    line-height: var(--ui-row-1, #{t.$row});
+    font-weight: var(--_weight-medium);
+    line-height: var(--_row-1);
   }
 
   .toast__description {
     margin: 0;
 
-    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
-    line-height: var(--ui-row-1, #{t.$row});
-    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+    font-size: var(--_font-size-sm);
+    line-height: var(--_row-1);
+    color: var(--_color-text-muted);
   }
 
   .toast__action {
@@ -140,28 +164,28 @@
     align-items: center;
     justify-content: center;
 
-    block-size: var(--ui-row-1, #{t.$row});
-    inline-size: var(--ui-row-1, #{t.$row});
+    block-size: var(--_row-1);
+    inline-size: var(--_row-1);
     padding: 0;
 
-    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+    color: var(--_color-text-muted);
 
     background: none;
     border: none;
     cursor: pointer;
 
     &:hover {
-      color: var(--ui-color-text, #{t.$color-text});
+      color: var(--_color-text);
     }
   }
 
   // Animation states
   .toast[data-state="open"] {
-    animation: toast-slide-in var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
+    animation: toast-slide-in var(--_duration-normal) var(--_ease-out);
   }
 
   .toast[data-state="closed"] {
-    animation: toast-slide-out var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
+    animation: toast-slide-out var(--_duration-fast) var(--_ease-in);
   }
 
   @keyframes toast-slide-in {

package/src/components/feedback/toast/toast.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "toast",
   "element": "div",
   "modifiers": {
@@ -7,18 +8,34 @@
     }
   },
   "elements": {
+    "icon": {},
     "content": {},
     "title": {},
     "description": {},
-    "close": {},
-    "action": {}
+    "action": {},
+    "close": {}
   },
   "relatedComponents": [
     {
       "name": "toast-viewport",
       "modifiers": {
-        "position": {
-          "values": ["top-end", "bottom-end"]
+        "top-end": {
+          "type": "boolean"
+        },
+        "top-start": {
+          "type": "boolean"
+        },
+        "bottom-end": {
+          "type": "boolean"
+        },
+        "bottom-start": {
+          "type": "boolean"
+        },
+        "top-center": {
+          "type": "boolean"
+        },
+        "bottom-center": {
+          "type": "boolean"
         }
       }
     }
@@ -26,39 +43,48 @@
   "cssVars": [
     {
       "name": "--ui-toast-viewport-gap",
-      "default": "calc(var(--ui-unit) * 1"
+      "default": "calc(var(--ui-unit) * 1)",
+      "description": "Viewport gap"
     },
     {
       "name": "--ui-toast-viewport-padding",
-      "default": "calc(var(--ui-unit) * 2"
+      "default": "calc(var(--ui-unit) * 2)",
+      "description": "Viewport padding"
     },
     {
       "name": "--ui-toast-viewport-max-width",
-      "default": "420px"
+      "default": "var(--ui-toast-viewport-max-width)",
+      "description": "Viewport max width"
     },
     {
       "name": "--ui-toast-padding",
-      "default": "calc(var(--ui-unit) * 2"
+      "default": "calc(var(--ui-unit) * 2)",
+      "description": "Padding on all sides"
     },
     {
       "name": "--ui-toast-gap",
-      "default": "calc(var(--ui-unit) * 1"
+      "default": "calc(var(--ui-unit) * 1)",
+      "description": "Gap between children"
     },
     {
       "name": "--ui-toast-radius",
-      "default": "var(--ui-radius-md)"
+      "default": "var(--ui-radius-md)",
+      "description": "Corner radius"
     },
     {
       "name": "--ui-toast-bg",
-      "default": "var(--ui-color-bg)"
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
     },
     {
       "name": "--ui-toast-border-color",
-      "default": "var(--ui-color-border)"
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
     },
     {
       "name": "--ui-toast-shadow",
-      "default": "var(--shadow-lg)"
+      "default": "var(--ui-shadow-lg)",
+      "description": "Box shadow"
     }
   ]
 }

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

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

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

@@ -5,28 +5,46 @@
 
 @layer components.tokens {
   .checkbox {
+    --_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-checkbox-size, calc(#{t.$unit} * 2));
+    // @desc Corner radius
     --_radius: var(--ui-checkbox-radius, var(--ui-radius-sm, #{t.$radius-sm}));
+    // @desc Background color
     --_bg: var(--ui-checkbox-bg, var(--ui-color-bg, #{t.$color-bg}));
+    // @desc Bg checked
     --_bg-checked: var(--ui-checkbox-bg-checked, var(--ui-color-primary, #{t.$color-primary}));
+    // @desc Border color
     --_border-color: var(--ui-checkbox-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    // @desc Border color focus
     --_border-color-focus: var(--ui-checkbox-border-color-focus, var(--ui-color-primary, #{t.$color-primary}));
+    // @desc Check mark text color
     --_check-color: var(--ui-checkbox-check-color, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
   }
 
   // @modifier size
   .checkbox--lg {
+    // @desc Overall size at large size
     --_size: var(--ui-checkbox-size-lg, calc(#{t.$unit} * 3));
   }
 
   // @modifier state
   .checkbox--error {
+    // @desc Error border
     --_border-color: var(--ui-checkbox-error-border, var(--ui-color-danger, #{t.$color-danger}));
+    // @desc Error border
     --_border-color-focus: var(--ui-checkbox-error-border, var(--ui-color-danger, #{t.$color-danger}));
   }
 
   .checkbox--success {
+    // @desc Success border
     --_border-color: var(--ui-checkbox-success-border, var(--ui-color-success, #{t.$color-success}));
+    // @desc Success border
     --_border-color-focus: var(--ui-checkbox-success-border, var(--ui-color-success, #{t.$color-success}));
   }
 }
@@ -46,16 +64,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: var(--_radius);
     cursor: pointer;
     // Reset native checkbox
     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);
 
     &::before {
       content: '';
@@ -68,7 +86,7 @@
       // Checkmark via clip-path
       clip-path: polygon(20% 55%, 40% 75%, 80% 25%, 85% 30%, 40% 85%, 15% 60%);
 
-      transition: opacity var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+      transition: opacity var(--_duration-fast) var(--_ease-default);
     }
 
     &:hover:not(:disabled) {
@@ -77,10 +95,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 {
@@ -104,7 +122,7 @@
     }
 
     &:disabled {
-      opacity: var(--ui-opacity-disabled, 0.5);
+      opacity: var(--_opacity-disabled);
       cursor: not-allowed;
     }
   }

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

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

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

@@ -5,22 +5,38 @@
 
 @layer components.tokens {
   .checkbox-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-checkbox-group-spacing, var(--ui-space-1, #{t.$space-1}));
+    // @desc Legend size
     --_legend-size: var(--ui-checkbox-group-legend-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Legend weight
     --_legend-weight: var(--ui-checkbox-group-legend-weight, var(--ui-weight-medium, #{t.$weight-medium}));
+    // @desc Legend color
     --_legend-color: var(--ui-checkbox-group-legend-color, var(--ui-color-text, #{t.$color-text}));
+    // @desc Legend spacing
     --_legend-spacing: var(--ui-checkbox-group-legend-spacing, var(--ui-space-1, #{t.$space-1}));
+    // @desc Item gap between children
     --_item-gap: var(--ui-checkbox-group-item-gap, var(--ui-space-1, #{t.$space-1}));
   }
 
+  // @modifier boolean compact
   .checkbox-group--compact {
+    // @desc Spacing compact
     --_spacing: var(--ui-checkbox-group-spacing-compact, 0);
+    // @desc Legend spacing compact
     --_legend-spacing: var(--ui-checkbox-group-legend-spacing-compact, 0);
+    // @desc Item gap compact
     --_item-gap: var(--ui-checkbox-group-item-gap-compact, 0);
   }
 
   // @modifier state
+  // @modifier boolean error
   .checkbox-group--error {
+    // @desc Error color
     --_legend-color: var(--ui-checkbox-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;
   }
 
   .checkbox-group__item:has(:disabled) {
-    opacity: var(--ui-opacity-disabled, 0.5);
+    opacity: var(--_opacity-disabled);
     cursor: not-allowed;
   }
 
   // Horizontal layout
+  // @modifier boolean horizontal
   .checkbox-group--horizontal > .checkbox-group__items {
     flex-direction: row;
     flex-wrap: wrap;
-    gap: var(--ui-space-2, #{t.$space-2});
+    gap: var(--_space-2);
   }
 
   // Disabled group
   .checkbox-group:disabled,
   .checkbox-group[aria-disabled='true'] {
-    opacity: var(--ui-opacity-disabled, 0.5);
+    opacity: var(--_opacity-disabled);
     cursor: not-allowed;
   }
 }