@teseor/css 1.8.0 → 1.9.0

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

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "alert",
   "element": "div",
   "modifiers": {
@@ -13,108 +14,82 @@
     }
   },
   "elements": {
+    "icon": {},
     "content": {},
     "title": {},
     "description": {},
-    "icon": {},
     "close": {}
   },
   "cssVars": [
+    {
+      "name": "--ui-alert-accent",
+      "default": "var(--ui-color-border)",
+      "description": "Accent color"
+    },
     {
       "name": "--ui-alert-padding",
-      "default": "var(--ui-space-2)"
+      "default": "var(--ui-space-2)",
+      "description": "Padding on all sides"
     },
     {
       "name": "--ui-alert-border-width",
-      "default": "var(--ui-border-width-sm)"
+      "default": "var(--ui-border-width-sm)",
+      "description": "Border thickness"
     },
     {
       "name": "--ui-alert-gap",
-      "default": "var(--ui-space-1)"
+      "default": "var(--ui-space-1)",
+      "description": "Gap between children"
     },
     {
       "name": "--ui-alert-radius",
-      "default": "var(--ui-radius-md)"
-    },
-    {
-      "name": "--ui-alert-bg",
-      "default": "var(--ui-color-bg-subtle)"
-    },
-    {
-      "name": "--ui-alert-border-color",
-      "default": "var(--ui-color-border)"
+      "default": "var(--ui-radius-md)",
+      "description": "Corner radius"
     },
     {
       "name": "--ui-alert-color",
-      "default": "var(--ui-color-text)"
+      "default": "var(--ui-color-text)",
+      "description": "Text color"
     },
     {
-      "name": "--ui-alert-icon-color",
-      "default": "currentcolor"
+      "name": "--ui-alert-font-size",
+      "default": "inherit",
+      "description": "Font size"
     },
     {
       "name": "--ui-alert-padding-sm",
-      "default": "var(--ui-space-1)"
-    },
-    {
-      "name": "--ui-alert-font-size-sm",
-      "default": "var(--ui-font-size-sm)"
-    },
-    {
-      "name": "--ui-alert-padding-lg",
-      "default": "var(--ui-space-4)"
-    },
-    {
-      "name": "--ui-alert-font-size-lg",
-      "default": "var(--ui-font-size-lg)"
-    },
-    {
-      "name": "--ui-alert-info-bg",
-      "default": "var(--ui-color-bg-subtle)"
-    },
-    {
-      "name": "--ui-alert-info-border",
-      "default": "var(--ui-color-primary)"
-    },
-    {
-      "name": "--ui-alert-info-icon",
-      "default": "var(--ui-color-primary)"
-    },
-    {
-      "name": "--ui-alert-success-bg",
-      "default": "var(--ui-color-bg-subtle)"
-    },
-    {
-      "name": "--ui-alert-success-border",
-      "default": "var(--ui-color-success)"
-    },
-    {
-      "name": "--ui-alert-success-icon",
-      "default": "var(--ui-color-success)"
+      "default": "var(--ui-space-1)",
+      "description": "Padding on all sides at small size"
     },
     {
-      "name": "--ui-alert-warning-bg",
-      "default": "var(--ui-color-bg-subtle)"
+      "name": "--ui-alert-gap-sm",
+      "default": "calc(var(--ui-unit) * 0.5)",
+      "description": "Gap between children at small size"
     },
     {
-      "name": "--ui-alert-warning-border",
-      "default": "var(--ui-color-warning)"
+      "name": "--ui-alert-font-size-sm",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size at small size"
     },
     {
-      "name": "--ui-alert-warning-icon",
-      "default": "var(--ui-color-warning)"
+      "name": "--ui-alert-padding-lg",
+      "default": "var(--ui-space-4)",
+      "description": "Padding on all sides at large size"
     },
     {
-      "name": "--ui-alert-danger-bg",
-      "default": "var(--ui-color-bg-subtle)"
+      "name": "--ui-alert-gap-lg",
+      "default": "var(--ui-space-2)",
+      "description": "Gap between children at large size"
     },
     {
-      "name": "--ui-alert-danger-border",
-      "default": "var(--ui-color-danger)"
+      "name": "--ui-alert-font-size-lg",
+      "default": "var(--ui-font-size-lg)",
+      "description": "Font size at large size"
     },
     {
-      "name": "--ui-alert-danger-icon",
-      "default": "var(--ui-color-danger)"
+      "name": "--ui-alert-padding-end",
+      "default": "calc(var(--ui-unit) * 5)",
+      "description": "Padding end"
     }
   ]
 }

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

@@ -5,16 +5,28 @@
 
 @layer components.tokens {
   .alert {
+    --_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});
     // Single accent color - variants override, bg/border derived via color-mix
+    // @desc Accent color
     --_accent: var(--ui-alert-accent, var(--ui-color-border, #{t.$color-border}));
 
+    // @desc Padding on all sides
     --_padding: var(--ui-alert-padding, var(--ui-space-2, #{t.$space-2}));
+    // @desc Border thickness
     --_border-width: var(--ui-alert-border-width, var(--ui-border-width-sm, #{t.$border-width-sm}));
+    // @desc Gap between children
     --_gap: var(--ui-alert-gap, var(--ui-space-1, #{t.$space-1}));
+    // @desc Corner radius
     --_radius: var(--ui-alert-radius, var(--ui-radius-md, #{t.$radius-md}));
     --_bg: color-mix(in oklch, var(--_accent) 8%, white);
     --_border-color: var(--_accent);
+    // @desc Text color
     --_color: var(--ui-alert-color, var(--ui-color-text, #{t.$color-text}));
+    // @desc Font size
     --_font-size: var(--ui-alert-font-size, inherit);
     --_padding-end: 0;
     --_icon-color: var(--_accent);
@@ -39,19 +51,26 @@
 
   // @modifier size
   .alert--sm {
+    // @desc Padding on all sides at small size
     --_padding: var(--ui-alert-padding-sm, var(--ui-space-1, #{t.$space-1}));
+    // @desc Gap between children at small size
     --_gap: var(--ui-alert-gap-sm, calc(#{t.$unit} * 0.5));
+    // @desc Font size at small size
     --_font-size: var(--ui-alert-font-size-sm, var(--ui-font-size-sm, #{t.$font-size-sm}));
   }
 
   .alert--lg {
+    // @desc Padding on all sides at large size
     --_padding: var(--ui-alert-padding-lg, var(--ui-space-4, #{t.$space-4}));
+    // @desc Gap between children at large size
     --_gap: var(--ui-alert-gap-lg, var(--ui-space-2, #{t.$space-2}));
+    // @desc Font size at large size
     --_font-size: var(--ui-alert-font-size-lg, var(--ui-font-size-lg, #{t.$font-size-lg}));
   }
 
   // @modifier boolean dismissible
   .alert--dismissible {
+    // @desc Padding end
     --_padding-end: var(--ui-alert-padding-end, calc(#{t.$unit} * 5));
   }
 }
@@ -91,19 +110,19 @@
   .alert__title {
     margin: 0;
 
-    font-weight: var(--ui-weight-medium, #{t.$weight-medium});
+    font-weight: var(--_weight-medium);
     // Line-height aligned to grid (24px = 3 units)
-    line-height: var(--ui-row-1, #{t.$row});
+    line-height: var(--_row-1);
   }
 
   .alert__description {
     margin: 0;
     margin-block-start: calc(#{t.$unit} * 1);
 
-    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
+    font-size: var(--_font-size-sm);
     // Line-height aligned to grid (16px = 2 units for smaller text)
-    line-height: var(--ui-row-1, #{t.$row});
-    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+    line-height: var(--_row-1);
+    color: var(--_color-text-muted);
   }
 
   .alert__close {
@@ -112,14 +131,14 @@
 
     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);
     }
   }
 }

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

@@ -1,16 +1,25 @@
 @use '../../../config/tokens/variables' as t;
+// @component progress
+// @element div
 
 // Progress - progress bar indicator
 // Shows completion status of a task
 
 @layer components.tokens {
   .progress {
+    --_duration-normal: var(--ui-duration-normal, #{t.$duration-normal});
+    --_ease-default: var(--ui-ease-default, ease);
+    // @desc Overall height
     --_height: var(--ui-progress-height, calc(#{t.$unit} * 1));
-    --_bg: var(--ui-progress-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));
+    // @desc Background color
+    --_bg: var(--ui-progress-bg, var(--ui-color-bg-subtle, #{t.$overlay-bg-subtle}));
+    // @desc Fill
     --_fill: var(--ui-progress-fill, var(--ui-color-primary));
-    --_radius: var(--ui-progress-radius, var(--ui-radius-full, 9999px));
+    // @desc Corner radius
+    --_radius: var(--ui-progress-radius, var(--ui-radius-full, #{t.$radius-full}));
   }
 
+  // @modifier size
   .progress--sm {
     --_height: calc(#{t.$unit} * 1);
   }
@@ -37,10 +46,11 @@
     background: var(--_fill);
     border-radius: var(--_radius);
 
-    transition: inline-size var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
+    transition: inline-size var(--_duration-normal) var(--_ease-default);
   }
 
   // Indeterminate state - animated stripe
+  // @modifier boolean indeterminate
   .progress--indeterminate .progress__bar {
     inline-size: 30%;
 
@@ -58,6 +68,7 @@
   }
 
   // Striped variant
+  // @modifier boolean striped
   .progress--striped .progress__bar {
     background-image: linear-gradient(
       45deg,
@@ -73,6 +84,7 @@
   }
 
   // Animated stripes
+  // @modifier boolean animated
   .progress--animated .progress__bar {
     animation: progress-stripes 1s linear infinite;
   }
@@ -98,6 +110,7 @@
   }
 
   // Color variants
+  // @modifier variant
   .progress--success {
     --_fill: var(--ui-color-success);
   }

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

@@ -1,12 +1,13 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "progress",
   "element": "div",
   "modifiers": {
     "size": {
       "values": ["sm", "lg"]
     },
-    "variant": {
-      "values": ["success", "warning", "danger"]
+    "indeterminate": {
+      "type": "boolean"
     },
     "striped": {
       "type": "boolean"
@@ -14,8 +15,8 @@
     "animated": {
       "type": "boolean"
     },
-    "indeterminate": {
-      "type": "boolean"
+    "variant": {
+      "values": ["success", "warning", "danger"]
     }
   },
   "elements": {
@@ -24,19 +25,23 @@
   "cssVars": [
     {
       "name": "--ui-progress-height",
-      "default": "calc(var(--ui-unit) * 1"
+      "default": "calc(var(--ui-unit) * 1)",
+      "description": "Overall height"
     },
     {
       "name": "--ui-progress-bg",
-      "default": "var(--ui-color-bg-subtle)"
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Background color"
     },
     {
       "name": "--ui-progress-fill",
-      "default": "var(--ui-color-primary)"
+      "default": "var(--ui-color-primary)",
+      "description": "Fill"
     },
     {
       "name": "--ui-progress-radius",
-      "default": "var(--ui-radius-full)"
+      "default": "var(--ui-radius-full)",
+      "description": "Corner radius"
     }
   ]
 }

package/src/components/feedback/progress-circle/index.scss

@@ -1,28 +1,40 @@
 @use '../../../config/tokens/variables' as t;
+// @component progress-circle
+// @element svg
 
 // Progress Circle - circular progress indicator
 // Uses SVG circles with stroke-dasharray/dashoffset driven by --ui-progress-circle-value
 
 @layer components.tokens {
   .progress-circle {
+    --_duration-slow: var(--ui-duration-slow, #{t.$duration-slow});
+    --_ease-default: var(--ui-ease-default, ease);
+    // @desc Overall size
     --_size: var(--ui-progress-circle-size, calc(var(--ui-unit) * 6));
-    --_stroke-width: var(--ui-progress-circle-stroke-width, 8);
+    // @desc Stroke width
+    --_stroke-width: var(--ui-progress-circle-stroke-width, #{t.$progress-circle-stroke-width});
+    // @desc Fill area text color
     --_fill-color: var(--ui-progress-circle-fill-color, var(--ui-color-primary));
+    // @desc Track text color
     --_track-color: var(--ui-progress-circle-track-color, var(--ui-color-border));
+    // @desc Value
     --_value: var(--ui-progress-circle-value, 0);
     --_circumference: 282.743;
   }
 
   // @modifier size
   .progress-circle--sm {
+    // @desc Overall size at small size
     --_size: var(--ui-progress-circle-size-sm, calc(var(--ui-unit) * 4));
   }
 
   .progress-circle--lg {
+    // @desc Overall size at large size
     --_size: var(--ui-progress-circle-size-lg, calc(var(--ui-unit) * 8));
   }
 
   .progress-circle--xl {
+    // @desc Overall size at extra-large size
     --_size: var(--ui-progress-circle-size-xl, calc(var(--ui-unit) * 12));
   }
 
@@ -66,10 +78,11 @@
     stroke-dasharray: var(--_circumference);
     stroke-dashoffset: calc(var(--_circumference) * (1 - var(--_value) / 100));
 
-    transition: stroke-dashoffset var(--ui-duration-slow, 300ms) var(--ui-ease-default, ease);
+    transition: stroke-dashoffset var(--_duration-slow) var(--_ease-default);
   }
 
   // Indeterminate - rotating partial arc
+  // @modifier boolean indeterminate
   .progress-circle--indeterminate {
     animation: progress-circle-rotate 1.4s linear infinite;
   }

package/src/components/feedback/progress-circle/progress-circle.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "progress-circle",
   "element": "svg",
   "modifiers": {
@@ -19,35 +20,43 @@
   "cssVars": [
     {
       "name": "--ui-progress-circle-size",
-      "default": "calc(var(--ui-unit) * 6)"
+      "default": "calc(var(--ui-unit) * 6)",
+      "description": "Overall size"
     },
     {
       "name": "--ui-progress-circle-stroke-width",
-      "default": "8"
+      "default": "var(--ui-progress-circle-stroke-width)",
+      "description": "Stroke width"
     },
     {
       "name": "--ui-progress-circle-fill-color",
-      "default": "var(--ui-color-primary)"
+      "default": "var(--ui-color-primary)",
+      "description": "Fill area text color"
     },
     {
       "name": "--ui-progress-circle-track-color",
-      "default": "var(--ui-color-border)"
+      "default": "var(--ui-color-border)",
+      "description": "Track text color"
     },
     {
       "name": "--ui-progress-circle-value",
-      "default": "0"
+      "default": "0",
+      "description": "Value"
     },
     {
       "name": "--ui-progress-circle-size-sm",
-      "default": "calc(var(--ui-unit) * 4)"
+      "default": "calc(var(--ui-unit) * 4)",
+      "description": "Overall size at small size"
     },
     {
       "name": "--ui-progress-circle-size-lg",
-      "default": "calc(var(--ui-unit) * 8)"
+      "default": "calc(var(--ui-unit) * 8)",
+      "description": "Overall size at large size"
     },
     {
       "name": "--ui-progress-circle-size-xl",
-      "default": "calc(var(--ui-unit) * 12)"
+      "default": "calc(var(--ui-unit) * 12)",
+      "description": "Overall size at extra-large size"
     }
   ]
 }

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

@@ -1,12 +1,17 @@
 @use '../../../config/tokens/variables' as t;
+// @component skeleton
+// @element div
 
 // Skeleton - loading placeholder
 // Animated shimmer effect for content loading states
 
 @layer components.tokens {
   .skeleton {
-    --_bg: var(--ui-skeleton-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));
-    --_shimmer: var(--ui-skeleton-shimmer, rgb(255 255 255 / 0.5));
+    // @desc Background color
+    --_bg: var(--ui-skeleton-bg, var(--ui-color-bg-subtle, #{t.$overlay-bg-subtle}));
+    // @desc Shimmer
+    --_shimmer: var(--ui-skeleton-shimmer, #{t.$skeleton-shimmer});
+    // @desc Corner radius
     --_radius: var(--ui-skeleton-radius, var(--ui-radius-sm, calc(#{t.$unit} / 2)));
   }
 }
@@ -47,6 +52,7 @@
   }
 
   // Text line variant
+  // @modifier variant
   .skeleton--text {
     block-size: calc(#{t.$unit} * 2);
     inline-size: 100%;
@@ -78,6 +84,7 @@
   }
 
   // Pulse animation alternative
+  // @modifier boolean pulse
   .skeleton--pulse {
     animation: skeleton-pulse 1.5s infinite ease-in-out;
   }

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

@@ -1,9 +1,10 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "skeleton",
   "element": "div",
   "modifiers": {
     "variant": {
-      "values": ["text", "circle", "heading", "rect"]
+      "values": ["text", "heading", "circle", "rect", "static"]
     },
     "pulse": {
       "type": "boolean"
@@ -12,15 +13,18 @@
   "cssVars": [
     {
       "name": "--ui-skeleton-bg",
-      "default": "var(--ui-color-bg-subtle)"
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Background color"
     },
     {
       "name": "--ui-skeleton-shimmer",
-      "default": "rgb(255 255 255 / 0.5"
+      "default": "var(--ui-skeleton-shimmer)",
+      "description": "Shimmer"
     },
     {
       "name": "--ui-skeleton-radius",
-      "default": "var(--ui-radius-sm)"
+      "default": "var(--ui-radius-sm)",
+      "description": "Corner radius"
     }
   ]
 }

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

@@ -5,31 +5,44 @@
 
 @layer components.tokens {
   .spinner {
+    // @desc Overall size
     --_size: var(--ui-spinner-size, calc(var(--ui-unit) * 4));
+    // @desc Border thickness
     --_border-width: var(--ui-spinner-border-width, var(--ui-border-width-md));
+    // @desc Text color
     --_color: var(--ui-spinner-color, currentcolor);
+    // @desc Track text color
     --_track-color: var(--ui-spinner-track-color, transparent);
-    --_duration: var(--ui-spinner-duration, 750ms);
+    // @desc Animation duration
+    --_duration: var(--ui-spinner-duration, #{t.$spinner-duration});
   }
 
   // @modifier size
   .spinner--xs {
+    // @desc Overall size at extra-small size
     --_size: var(--ui-spinner-size-xs, calc(var(--ui-unit) * 2));
+    // @desc Border thickness at extra-small size
     --_border-width: var(--ui-spinner-border-width-xs, var(--ui-border-width-sm));
   }
 
   .spinner--sm {
+    // @desc Overall size at small size
     --_size: var(--ui-spinner-size-sm, calc(var(--ui-unit) * 3));
+    // @desc Border thickness at small size
     --_border-width: var(--ui-spinner-border-width-sm, var(--ui-border-width-md));
   }
 
   .spinner--lg {
+    // @desc Overall size at large size
     --_size: var(--ui-spinner-size-lg, calc(var(--ui-unit) * 5));
+    // @desc Border thickness at large size
     --_border-width: var(--ui-spinner-border-width-lg, var(--ui-border-width-md));
   }
 
   .spinner--xl {
+    // @desc Overall size at extra-large size
     --_size: var(--ui-spinner-size-xl, calc(var(--ui-unit) * 6));
+    // @desc Border thickness at extra-large size
     --_border-width: var(--ui-spinner-border-width-xl, var(--ui-border-width-lg));
   }
 }