@teseor/css 1.7.0 → 1.9.0

package/src/{04-components → components}/data-display/icon/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component icon
 // @element svg
@@ -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
@@ -63,4 +68,10 @@
       transform: rotate(360deg);
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .icon--spin {
+      animation: none;
+    }
+  }
 }

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

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

package/src/{04-components → components}/data-display/image/image.docs.json

@@ -33,7 +33,7 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "figure",
@@ -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>"
         }
       ]
     },
@@ -110,7 +110,7 @@
       "title": "Circle",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "figure",
@@ -149,7 +149,7 @@
       "title": "Object Fit",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "figure",
@@ -217,7 +217,7 @@
       "title": "Fallback",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "figure",
@@ -275,22 +275,22 @@
     },
     {
       "token": "--ui-image-size-sm",
-      "default": "calc(var(--unit) * 12)",
+      "default": "calc(var(--ui-unit) * 12)",
       "description": "Small size"
     },
     {
       "token": "--ui-image-size-md",
-      "default": "calc(var(--unit) * 24)",
+      "default": "calc(var(--ui-unit) * 24)",
       "description": "Medium size"
     },
     {
       "token": "--ui-image-size-lg",
-      "default": "calc(var(--unit) * 40)",
+      "default": "calc(var(--ui-unit) * 40)",
       "description": "Large size"
     },
     {
       "token": "--ui-image-size-xl",
-      "default": "calc(var(--unit) * 60)",
+      "default": "calc(var(--ui-unit) * 60)",
       "description": "Extra large size"
     },
     {

package/src/{04-components → components}/data-display/image/index.scss

@@ -1,33 +1,45 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component image
 // @element figure
 
 @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/{04-components → components}/data-display/stat/index.scss

@@ -1,23 +1,35 @@
-@use '../../../00-config/tokens/variables' as t;
+@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

@@ -0,0 +1,56 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "stat",
+  "element": "div",
+  "modifiers": {
+    "size": {
+      "values": ["sm"]
+    }
+  },
+  "elements": {
+    "value": {},
+    "label": {}
+  },
+  "cssVars": [
+    {
+      "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/{04-components → components}/data-display/stat/stat.docs.json

@@ -29,7 +29,7 @@
           "items": [
             {
               "tag": "div",
-              "class": "ui-cluster ui-cluster--lg",
+              "class": "ui-row ui-row--lg",
               "children": [
                 {
                   "tag": "div",

package/src/{04-components → components}/data-display/status/index.scss

@@ -1,15 +1,21 @@
-@use '../../../00-config/tokens/variables' as t;
+@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;
   }
@@ -72,7 +79,14 @@
     }
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .status--pulse .status__dot::before {
+      animation: none;
+    }
+  }
+
   // Size variants
+  // @modifier size
   .status--sm {
     --_size: calc(#{t.$unit} * 0.75);
     --_gap: calc(#{t.$unit} * 0.75);

package/src/{04-components → 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(#{t.$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(#{t.$unit} * 1"
+      "default": "calc(var(--ui-unit) * 1)",
+      "description": "Gap between children"
     }
   ]
 }

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

@@ -0,0 +1,147 @@
+{
+  "id": "status",
+  "type": "component",
+  "title": "Status",
+  "description": "Visual status indicator with colored dot to show state.",
+  "api": "./status.api.json",
+  "sections": [
+    {
+      "title": "Variants",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "display: flex; flex-direction: column; gap: var(--ui-space-2);"
+              },
+              "children": [
+                {
+                  "tag": "span",
+                  "class": "ui-status",
+                  "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Default" }]
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-status ui-status--success",
+                  "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Online" }]
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-status ui-status--warning",
+                  "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Away" }]
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-status ui-status--danger",
+                  "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Busy" }]
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-status ui-status--info",
+                  "children": [
+                    { "tag": "span", "class": "ui-status__dot" },
+                    { "text": "In a meeting" }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<span class=\"ui-status ui-status--success\">\n  <span class=\"ui-status__dot\"></span>\n  Online\n</span>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": { "style": "display: flex; gap: var(--ui-space-4); align-items: center;" },
+              "children": [
+                {
+                  "tag": "span",
+                  "class": "ui-status ui-status--success ui-status--sm",
+                  "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Small" }]
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-status ui-status--success",
+                  "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Default" }]
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-status ui-status--success ui-status--lg",
+                  "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Large" }]
+                }
+              ]
+            }
+          ],
+          "code": "<span class=\"ui-status ui-status--sm\">...</span>\n<span class=\"ui-status\">...</span>\n<span class=\"ui-status ui-status--lg\">...</span>"
+        }
+      ]
+    },
+    {
+      "title": "Pulse Animation",
+      "description": "For live or active indicators",
+      "api": "./status.api.json",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "span",
+              "class": "ui-status ui-status--success ui-status--pulse",
+              "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Live" }]
+            }
+          ],
+          "code": "<span class=\"ui-status ui-status--success ui-status--pulse\">\n  <span class=\"ui-status__dot\"></span>\n  Live\n</span>"
+        }
+      ]
+    },
+    {
+      "title": "Dot Only",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": { "style": "display: flex; gap: var(--ui-space-2);" },
+              "children": [
+                {
+                  "tag": "span",
+                  "class": "ui-status ui-status--success",
+                  "children": [{ "tag": "span", "class": "ui-status__dot" }]
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-status ui-status--warning",
+                  "children": [{ "tag": "span", "class": "ui-status__dot" }]
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-status ui-status--danger",
+                  "children": [{ "tag": "span", "class": "ui-status__dot" }]
+                }
+              ]
+            }
+          ],
+          "code": "<span class=\"ui-status ui-status--success\">\n  <span class=\"ui-status__dot\"></span>\n</span>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    { "token": "--ui-status-size", "default": "var(--ui-unit)", "description": "Dot size" },
+    {
+      "token": "--ui-status-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Default dot color"
+    },
+    {
+      "token": "--ui-status-gap",
+      "default": "var(--ui-unit)",
+      "description": "Gap between dot and text"
+    }
+  ]
+}