@teseor/css 1.8.0 → 1.9.0

package/src/components/data-display/card/index.scss

@@ -3,19 +3,31 @@
 
 @layer components.tokens {
   .card {
+    --_row-1: var(--ui-row-1);
+    --_duration-fast: var(--ui-duration-fast);
+    --_ease-default: var(--ui-ease-default);
+    // @desc Padding on all sides
     --_padding: var(--ui-card-padding, var(--ui-space-4));
+    // @desc Border thickness
     --_border-width: var(--ui-card-border-width, var(--ui-border-width-sm));
+    // @desc Background color
     --_bg: var(--ui-card-bg, var(--ui-color-bg));
+    // @desc Border color
     --_border-color: var(--ui-card-border-color, var(--ui-color-border));
+    // @desc Corner radius
     --_radius: var(--ui-card-radius, var(--ui-radius-md));
   }
 
   // @modifier variant
+  // @desc Bg subtle
   .card--subtle { --_bg: var(--ui-card-bg-subtle, var(--ui-color-bg-subtle)); }
+  // @desc Bg muted
   .card--muted { --_bg: var(--ui-card-bg-muted, var(--ui-color-bg-muted)); }
 
   // @modifier size
+  // @desc Padding on all sides at small size
   .card--sm { --_padding: var(--ui-card-padding-sm, var(--ui-space-2)); }
+  // @desc Padding on all sides at large size
   .card--lg { --_padding: var(--ui-card-padding-lg, var(--ui-space-6)); }
 
   // @modifier boolean interactive
@@ -36,7 +48,7 @@
     padding: calc(var(--_padding) - var(--_border-width));
 
     // Grid-aligned line-height for text content
-    line-height: var(--ui-row-1);
+    line-height: var(--_row-1);
 
     background: var(--_bg);
     border: var(--_border-width) solid var(--_border-color);
@@ -45,16 +57,19 @@
 
   .card--interactive {
     transition:
-      background-color var(--ui-duration-fast) var(--ui-ease-default),
-      border-color var(--ui-duration-fast) var(--ui-ease-default),
-      box-shadow var(--ui-duration-fast) var(--ui-ease-default);
+      background-color var(--_duration-fast) var(--_ease-default),
+      border-color var(--_duration-fast) var(--_ease-default),
+      box-shadow var(--_duration-fast) var(--_ease-default);
 
     &:hover {
+      // @desc Bg hover
       --_bg: var(--ui-card-bg-hover, var(--ui-color-bg-subtle));
+      // @desc Border color hover
       --_border-color: var(--ui-card-border-color-hover, var(--ui-color-border-strong));
     }
 
     &:active {
+      // @desc Bg active
       --_bg: var(--ui-card-bg-active, var(--ui-color-bg-muted));
     }
   }

package/src/components/data-display/data-list/data-list.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "data-list",
   "element": "div",
   "modifiers": {
@@ -20,19 +21,23 @@
   "cssVars": [
     {
       "name": "--ui-data-list-gap",
-      "default": "calc(var(--ui-unit) * 2"
+      "default": "calc(var(--ui-unit) * 2)",
+      "description": "Gap between children"
     },
     {
       "name": "--ui-data-list-item-gap",
-      "default": "calc(var(--ui-unit) * 1"
+      "default": "calc(var(--ui-unit) * 1)",
+      "description": "Item gap between children"
     },
     {
       "name": "--ui-data-list-label-color",
-      "default": "var(--ui-color-text-muted)"
+      "default": "var(--ui-color-text-muted)",
+      "description": "Label text color"
     },
     {
       "name": "--ui-data-list-value-color",
-      "default": "var(--ui-color-text)"
+      "default": "var(--ui-color-text)",
+      "description": "Value display text color"
     }
   ]
 }

package/src/components/data-display/data-list/index.scss

@@ -1,13 +1,27 @@
 @use '../../../config/tokens/variables' as t;
+// @component data-list
+// @element div
 
 // Data-List - key-value pairs
 // Display structured data with labels and values
 
 @layer components.tokens {
   .data-list {
+    --_row-1: var(--ui-row-1, #{t.$row});
+    --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
+    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
+    --_color-border: var(--ui-color-border, #{t.$color-border});
+    --_color-bg-subtle: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});
+    --_radius-sm: var(--ui-radius-sm, #{t.$radius-sm});
+    --_font-size-lg: var(--ui-font-size-lg, #{t.$font-size-lg});
+    // @desc Gap between children
     --_gap: var(--ui-data-list-gap, calc(#{t.$unit} * 2));
+    // @desc Item gap between children
     --_item-gap: var(--ui-data-list-item-gap, calc(#{t.$unit} * 1));
+    // @desc Label text color
     --_label-color: var(--ui-data-list-label-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    // @desc Value display text color
     --_value-color: var(--ui-data-list-value-color, var(--ui-color-text, #{t.$color-text}));
   }
 }
@@ -20,7 +34,7 @@
 
     margin: 0;
 
-    line-height: var(--ui-row-1, #{t.$row});
+    line-height: var(--_row-1);
   }
 
   .data-list__item {
@@ -30,20 +44,21 @@
   }
 
   .data-list__label {
-    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
-    font-weight: var(--ui-weight-medium, #{t.$weight-medium});
-    line-height: var(--ui-row-1, #{t.$row});
+    font-size: var(--_font-size-sm);
+    font-weight: var(--_weight-medium);
+    line-height: var(--_row-1);
     color: var(--_label-color);
   }
 
   .data-list__value {
     margin: 0;
 
-    line-height: var(--ui-row-1, #{t.$row});
+    line-height: var(--_row-1);
     color: var(--_value-color);
   }
 
   // Horizontal layout (side-by-side)
+  // @modifier layout
   .data-list--horizontal .data-list__item {
     flex-direction: row;
     align-items: baseline;
@@ -60,11 +75,12 @@
   }
 
   // With dividers
+  // @modifier style
   .data-list--divided .data-list__item {
     // Subtract border from padding to keep total on grid
-    padding-block-end: calc(var(--_gap) - var(--ui-border-width-sm, #{t.$border-width-sm}));
+    padding-block-end: calc(var(--_gap) - var(--_border-width-sm));
 
-    border-block-end: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--ui-color-border, #{t.$color-border});
+    border-block-end: var(--_border-width-sm) solid var(--_color-border);
   }
 
   .data-list--divided .data-list__item:last-child {
@@ -77,16 +93,17 @@
   .data-list--striped .data-list__item:nth-child(odd) {
     padding: calc(#{t.$unit} * 1);
 
-    background: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});
-    border-radius: var(--ui-radius-sm, #{t.$radius-sm});
+    background: var(--_color-bg-subtle);
+    border-radius: var(--_radius-sm);
   }
 
   // Compact size
+  // @modifier size
   .data-list--sm {
     --_gap: calc(#{t.$unit} * 1);
     --_item-gap: 0;
 
-    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
+    font-size: var(--_font-size-sm);
   }
 
   // Large size
@@ -94,6 +111,6 @@
     --_gap: calc(#{t.$unit} * 3);
     --_item-gap: calc(#{t.$unit} * 1);
 
-    font-size: var(--ui-font-size-lg, #{t.$font-size-lg});
+    font-size: var(--_font-size-lg);
   }
 }

package/src/components/data-display/icon/icon.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "icon",
   "element": "svg",
   "modifiers": {
@@ -18,40 +19,28 @@
   "cssVars": [
     {
       "name": "--ui-icon-size",
-      "default": "var(--ui-ctx-size, 1rem)",
+      "default": "var(--ui-ctx-size)",
       "description": "3-tier: global > context > default"
     },
     {
       "name": "--ui-icon-stroke",
-      "default": "2"
+      "default": "var(--ui-icon-stroke)",
+      "description": "Stroke"
     },
     {
-      "name": "--ui-icon-size-xs",
-      "default": "var(--ui-size-xs)"
-    },
-    {
-      "name": "--ui-icon-size-sm",
-      "default": "var(--ui-size-sm)"
-    },
-    {
-      "name": "--ui-icon-size-md",
-      "default": "var(--ui-size-md)"
-    },
-    {
-      "name": "--ui-icon-size-lg",
-      "default": "var(--ui-size-lg)"
-    },
-    {
-      "name": "--ui-icon-size-xl",
-      "default": "var(--ui-size-xl)"
+      "name": "--ui-icon-size-",
+      "default": "",
+      "description": "Size"
     },
     {
       "name": "--ui-icon-stroke-thin",
-      "default": "1"
+      "default": "var(--ui-icon-stroke-thin)",
+      "description": "Stroke thin"
     },
     {
       "name": "--ui-icon-stroke-thick",
-      "default": "2.5"
+      "default": "var(--ui-icon-stroke-thick)",
+      "description": "Stroke thick"
     }
   ]
 }

package/src/components/data-display/icon/index.scss

@@ -6,24 +6,29 @@
 @layer components.tokens {
   .icon {
     // 3-tier inheritance: global > context > default
+    // @desc 3-tier: global > context > default
     --_size: var(--ui-icon-size, var(--ui-ctx-size, #{t.size(md)}));
-    --_stroke: var(--ui-icon-stroke, 2);
+    // @desc Stroke
+    --_stroke: var(--ui-icon-stroke, #{t.$icon-stroke});
   }
 
-  // @modifier size
+  // @modifier size xs, sm, md, lg, xl
   @each $name, $value in t.$sizes {
     .icon--#{$name} {
+      // @desc Size 
       --_size: var(--ui-icon-size-#{$name}, var(--ui-size-#{$name}, #{$value}));
     }
   }
 
   // @modifier stroke
   .icon--stroke-thin {
-    --_stroke: var(--ui-icon-stroke-thin, 1);
+    // @desc Stroke thin
+    --_stroke: var(--ui-icon-stroke-thin, #{t.$icon-stroke-thin});
   }
 
   .icon--stroke-thick {
-    --_stroke: var(--ui-icon-stroke-thick, 2.5);
+    // @desc Stroke thick
+    --_stroke: var(--ui-icon-stroke-thick, #{t.$icon-stroke-thick});
   }
 
   // @modifier boolean filled

package/src/components/data-display/image/image.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "image",
   "element": "figure",
   "modifiers": {
@@ -12,7 +13,7 @@
       "type": "boolean"
     },
     "object-fit": {
-      "values": ["cover", "contain"]
+      "values": ["cover", "contain", "circle"]
     }
   },
   "elements": {
@@ -22,55 +23,68 @@
   "cssVars": [
     {
       "name": "--ui-image-size",
-      "default": "auto"
+      "default": "auto",
+      "description": "Overall size"
     },
     {
-      "name": "--ui-image-size-sm",
-      "default": "calc(var(--ui-unit) * 12)"
+      "name": "--ui-image-radius",
+      "default": "0",
+      "description": "Corner radius"
     },
     {
-      "name": "--ui-image-size-md",
-      "default": "calc(var(--ui-unit) * 24)"
+      "name": "--ui-image-object-fit",
+      "default": "cover",
+      "description": "Object fit"
     },
     {
-      "name": "--ui-image-size-lg",
-      "default": "calc(var(--ui-unit) * 40)"
+      "name": "--ui-image-bg",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Background color"
     },
     {
-      "name": "--ui-image-size-xl",
-      "default": "calc(var(--ui-unit) * 60)"
+      "name": "--ui-image-caption-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Caption color"
     },
     {
-      "name": "--ui-image-bg",
-      "default": "var(--ui-color-bg-muted)"
+      "name": "--ui-image-caption-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Caption font size"
     },
     {
-      "name": "--ui-image-radius",
-      "default": "0"
+      "name": "--ui-image-caption-spacing",
+      "default": "var(--ui-space-1)",
+      "description": "Caption spacing"
     },
     {
-      "name": "--ui-image-radius-rounded",
-      "default": "var(--ui-radius-lg)"
+      "name": "--ui-image-size-sm",
+      "default": "calc(var(--ui-unit) * 12)",
+      "description": "Overall size at small size"
     },
     {
-      "name": "--ui-image-radius-circle",
-      "default": "50%"
+      "name": "--ui-image-size-md",
+      "default": "calc(var(--ui-unit) * 24)",
+      "description": "Overall size at medium size"
     },
     {
-      "name": "--ui-image-object-fit",
-      "default": "cover"
+      "name": "--ui-image-size-lg",
+      "default": "calc(var(--ui-unit) * 40)",
+      "description": "Overall size at large size"
     },
     {
-      "name": "--ui-image-caption-color",
-      "default": "var(--ui-color-text-muted)"
+      "name": "--ui-image-size-xl",
+      "default": "calc(var(--ui-unit) * 60)",
+      "description": "Overall size at extra-large size"
     },
     {
-      "name": "--ui-image-caption-font-size",
-      "default": "var(--ui-font-size-sm)"
+      "name": "--ui-image-radius-rounded",
+      "default": "var(--ui-radius-lg)",
+      "description": "Radius rounded"
     },
     {
-      "name": "--ui-image-caption-spacing",
-      "default": "var(--ui-space-1)"
+      "name": "--ui-image-radius-circle",
+      "default": "50%",
+      "description": "Radius circle"
     }
   ]
 }

package/src/components/data-display/image/image.docs.json

@@ -78,7 +78,7 @@
               ]
             }
           ],
-          "code": "<figure class=\"ui-image ui-image--sm\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Small\">\n</figure>\n<figure class=\"ui-image ui-image--md\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Medium\">\n</figure>\n<figure class=\"ui-image ui-image--lg\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Large\">\n</figure>"
+          "code": "<figure class=\"ui-image ui-image--sm\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Small\">\n</figure>\n<figure class=\"ui-image ui-image--md\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Medium\">\n</figure>\n<figure class=\"ui-image ui-image--lg\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Large\">\n</figure>\n<figure class=\"ui-image ui-image--xl\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"XL\">\n</figure>\n<figure class=\"ui-image ui-image--full\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Full\">\n</figure>"
         }
       ]
     },

package/src/components/data-display/image/index.scss

@@ -5,29 +5,41 @@
 
 @layer components.tokens {
   .image {
+    --_row-1: var(--ui-row-1, #{t.$row-1});
+    // @desc Overall size
     --_size: var(--ui-image-size, auto);
+    // @desc Corner radius
     --_radius: var(--ui-image-radius, 0);
+    // @desc Object fit
     --_object-fit: var(--ui-image-object-fit, cover);
+    // @desc Background color
     --_bg: var(--ui-image-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    // @desc Caption color
     --_caption-color: var(--ui-image-caption-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    // @desc Caption font size
     --_caption-font-size: var(--ui-image-caption-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Caption spacing
     --_caption-spacing: var(--ui-image-caption-spacing, var(--ui-space-1));
   }
 
   // @modifier size
   .image--sm {
+    // @desc Overall size at small size
     --_size: var(--ui-image-size-sm, calc(#{t.$unit} * 12));
   }
 
   .image--md {
+    // @desc Overall size at medium size
     --_size: var(--ui-image-size-md, calc(#{t.$unit} * 24));
   }
 
   .image--lg {
+    // @desc Overall size at large size
     --_size: var(--ui-image-size-lg, calc(#{t.$unit} * 40));
   }
 
   .image--xl {
+    // @desc Overall size at extra-large size
     --_size: var(--ui-image-size-xl, calc(#{t.$unit} * 60));
   }
 
@@ -37,11 +49,13 @@
 
   // @modifier boolean rounded
   .image--rounded {
+    // @desc Radius rounded
     --_radius: var(--ui-image-radius-rounded, var(--ui-radius-lg, #{t.$radius-lg}));
   }
 
   // @modifier boolean circle
   .image--circle {
+    // @desc Radius circle
     --_radius: var(--ui-image-radius-circle, 50%);
   }
 
@@ -92,7 +106,7 @@
     margin-block-start: var(--_caption-spacing);
 
     font-size: var(--_caption-font-size);
-    line-height: var(--ui-row-1, #{t.$row-1});
+    line-height: var(--_row-1);
     color: var(--_caption-color);
   }
 

package/src/components/data-display/stat/index.scss

@@ -1,23 +1,35 @@
 @use '../../../config/tokens/variables' as t;
+// @component stat
+// @element div
 
 @layer components.tokens {
   .stat {
+    --_tracking-display: var(--ui-tracking-display, #{t.$tracking-display});
+    // @desc Gap between children
     --_gap: var(--ui-stat-gap, var(--ui-space-1, #{t.$space-1}));
   }
 
   .stat__value {
+    // @desc Value display font size
     --_font-size: var(--ui-stat-value-font-size, var(--ui-font-size-3xl, #{t.$font-size-3xl}));
+    // @desc Value display font weight
     --_font-weight: var(--ui-stat-value-font-weight, var(--ui-weight-bold, #{t.$weight-bold}));
+    // @desc Value display line height
     --_line-height: var(--ui-stat-value-line-height, var(--ui-leading-3xl, #{t.$leading-3xl}));
+    // @desc Value display text color
     --_color: var(--ui-stat-value-color, var(--ui-color-text, #{t.$color-text}));
   }
 
   .stat__label {
+    // @desc Label font size
     --_font-size: var(--ui-stat-label-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Label text color
     --_color: var(--ui-stat-label-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    // @desc Label line height
     --_line-height: var(--ui-stat-label-line-height, var(--ui-leading-sm, #{t.$leading-sm}));
   }
 
+  // @modifier size
   .stat--sm .stat__value {
     --_font-size: var(--ui-font-size-xl, #{t.$font-size-xl});
     --_line-height: var(--ui-leading-xl, #{t.$leading-xl});
@@ -35,7 +47,7 @@
     font-size: var(--_font-size);
     font-weight: var(--_font-weight);
     line-height: var(--_line-height);
-    letter-spacing: var(--ui-tracking-display, #{t.$tracking-display});
+    letter-spacing: var(--_tracking-display);
     color: var(--_color);
   }
 

package/src/components/data-display/stat/stat.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "stat",
   "element": "div",
   "modifiers": {
@@ -6,13 +7,50 @@
       "values": ["sm"]
     }
   },
-  "subElements": ["value", "label"],
+  "elements": {
+    "value": {},
+    "label": {}
+  },
   "cssVars": [
-    { "name": "--ui-stat-gap", "default": "var(--ui-space-1)" },
-    { "name": "--ui-stat-value-font-size", "default": "var(--ui-font-size-3xl)" },
-    { "name": "--ui-stat-value-font-weight", "default": "var(--ui-weight-bold)" },
-    { "name": "--ui-stat-value-color", "default": "var(--ui-color-text)" },
-    { "name": "--ui-stat-label-font-size", "default": "var(--ui-font-size-sm)" },
-    { "name": "--ui-stat-label-color", "default": "var(--ui-color-text-muted)" }
+    {
+      "name": "--ui-stat-gap",
+      "default": "var(--ui-space-1)",
+      "description": "Gap between children"
+    },
+    {
+      "name": "--ui-stat-value-font-size",
+      "default": "var(--ui-font-size-3xl)",
+      "description": "Value display font size"
+    },
+    {
+      "name": "--ui-stat-value-font-weight",
+      "default": "var(--ui-weight-bold)",
+      "description": "Value display font weight"
+    },
+    {
+      "name": "--ui-stat-value-line-height",
+      "default": "var(--ui-leading-3xl)",
+      "description": "Value display line height"
+    },
+    {
+      "name": "--ui-stat-value-color",
+      "default": "var(--ui-color-text)",
+      "description": "Value display text color"
+    },
+    {
+      "name": "--ui-stat-label-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Label font size"
+    },
+    {
+      "name": "--ui-stat-label-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Label text color"
+    },
+    {
+      "name": "--ui-stat-label-line-height",
+      "default": "var(--ui-leading-sm)",
+      "description": "Label line height"
+    }
   ]
 }

package/src/components/data-display/status/index.scss

@@ -1,15 +1,21 @@
 @use '../../../config/tokens/variables' as t;
+// @component status
+// @element div
 
 // Status - visual status indicator
 // Small dot or badge to show state
 
 @layer components.tokens {
   .status {
+    // @desc Overall size
     --_size: var(--ui-status-size, calc(#{t.$unit} * 1));
+    // @desc Text color
     --_color: var(--ui-status-color, var(--ui-color-text-muted));
+    // @desc Gap between children
     --_gap: var(--ui-status-gap, calc(#{t.$unit} * 1));
   }
 
+  // @modifier variant
   .status--success {
     --_color: var(--ui-color-success);
   }
@@ -45,6 +51,7 @@
   }
 
   // Pulse animation for active status
+  // @modifier boolean pulse
   .status--pulse .status__dot {
     position: relative;
   }
@@ -79,6 +86,7 @@
   }
 
   // Size variants
+  // @modifier size
   .status--sm {
     --_size: calc(#{t.$unit} * 0.75);
     --_gap: calc(#{t.$unit} * 0.75);

package/src/components/data-display/status/status.api.json

@@ -1,15 +1,16 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "status",
   "element": "div",
   "modifiers": {
     "variant": {
       "values": ["success", "warning", "danger", "info"]
     },
-    "size": {
-      "values": ["sm", "lg"]
-    },
     "pulse": {
       "type": "boolean"
+    },
+    "size": {
+      "values": ["sm", "lg"]
     }
   },
   "elements": {
@@ -18,15 +19,18 @@
   "cssVars": [
     {
       "name": "--ui-status-size",
-      "default": "calc(var(--ui-unit) * 1"
+      "default": "calc(var(--ui-unit) * 1)",
+      "description": "Overall size"
     },
     {
       "name": "--ui-status-color",
-      "default": "var(--ui-color-text-muted)"
+      "default": "var(--ui-color-text-muted)",
+      "description": "Text color"
     },
     {
       "name": "--ui-status-gap",
-      "default": "calc(var(--ui-unit) * 1"
+      "default": "calc(var(--ui-unit) * 1)",
+      "description": "Gap between children"
     }
   ]
 }