@teseor/css 1.6.0 → 1.8.0

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",
@@ -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,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component image
 // @element figure

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

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 @layer components.tokens {
   .stat {

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,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Status - visual status indicator
 // Small dot or badge to show state
@@ -72,6 +72,12 @@
     }
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .status--pulse .status__dot::before {
+      animation: none;
+    }
+  }
+
   // Size variants
   .status--sm {
     --_size: calc(#{t.$unit} * 0.75);

package/src/{04-components → components}/data-display/status/status.api.json

@@ -18,7 +18,7 @@
   "cssVars": [
     {
       "name": "--ui-status-size",
-      "default": "calc(#{t.$unit} * 1"
+      "default": "calc(var(--ui-unit) * 1"
     },
     {
       "name": "--ui-status-color",
@@ -26,7 +26,7 @@
     },
     {
       "name": "--ui-status-gap",
-      "default": "calc(#{t.$unit} * 1"
+      "default": "calc(var(--ui-unit) * 1"
     }
   ]
 }

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"
+    }
+  ]
+}

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

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Token definitions
 @layer components.tokens {
@@ -34,7 +34,7 @@
       padding-block-end: calc(var(--_cell-padding-y) - var(--ui-border-width-sm, #{t.$border-width-sm}));
       padding-inline: var(--_cell-padding-x);
       // Grid-aligned line-height (3 units = 24px at 8px unit)
-      line-height: calc(var(--unit, #{t.$unit}) * 3);
+      line-height: calc(var(--ui-unit, #{t.$unit}) * 3);
       text-align: start;
 
       border-block-end: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);

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

@@ -0,0 +1,184 @@
+{
+  "id": "table",
+  "type": "component",
+  "title": "Table",
+  "description": "Styled table with header formatting and optional variants.",
+  "api": "./table.api.json",
+  "componentName": "table",
+  "sections": [
+    {
+      "title": "Basic table",
+      "examples": [
+        {
+          "title": "Default",
+          "items": [
+            {
+              "tag": "table",
+              "class": "ui-table",
+              "children": [
+                {
+                  "tag": "thead",
+                  "children": [
+                    {
+                      "tag": "tr",
+                      "children": [
+                        { "tag": "th", "text": "Name" },
+                        { "tag": "th", "text": "Value" }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "tbody",
+                  "children": [
+                    {
+                      "tag": "tr",
+                      "children": [{ "tag": "td", "text": "Alpha" }, { "tag": "td", "text": "100" }]
+                    },
+                    {
+                      "tag": "tr",
+                      "children": [{ "tag": "td", "text": "Beta" }, { "tag": "td", "text": "200" }]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Variants",
+      "examples": [
+        {
+          "title": "Compact",
+          "items": [
+            {
+              "tag": "table",
+              "class": "ui-table ui-table--compact",
+              "children": [
+                {
+                  "tag": "thead",
+                  "children": [
+                    {
+                      "tag": "tr",
+                      "children": [
+                        { "tag": "th", "text": "Token" },
+                        { "tag": "th", "text": "Value" }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "tbody",
+                  "children": [
+                    {
+                      "tag": "tr",
+                      "children": [
+                        {
+                          "tag": "td",
+                          "children": [
+                            { "tag": "code", "class": "ui-code ui-code--sm", "text": "--space-1" }
+                          ]
+                        },
+                        { "tag": "td", "text": "0.5rem" }
+                      ]
+                    },
+                    {
+                      "tag": "tr",
+                      "children": [
+                        {
+                          "tag": "td",
+                          "children": [
+                            { "tag": "code", "class": "ui-code ui-code--sm", "text": "--space-2" }
+                          ]
+                        },
+                        { "tag": "td", "text": "1rem" }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "title": "Striped",
+          "items": [
+            {
+              "tag": "table",
+              "class": "ui-table ui-table--striped",
+              "children": [
+                {
+                  "tag": "thead",
+                  "children": [
+                    {
+                      "tag": "tr",
+                      "children": [
+                        { "tag": "th", "text": "Item" },
+                        { "tag": "th", "text": "Status" }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "tbody",
+                  "children": [
+                    {
+                      "tag": "tr",
+                      "children": [
+                        { "tag": "td", "text": "Task 1" },
+                        { "tag": "td", "text": "Done" }
+                      ]
+                    },
+                    {
+                      "tag": "tr",
+                      "children": [
+                        { "tag": "td", "text": "Task 2" },
+                        { "tag": "td", "text": "Pending" }
+                      ]
+                    },
+                    {
+                      "tag": "tr",
+                      "children": [
+                        { "tag": "td", "text": "Task 3" },
+                        { "tag": "td", "text": "Done" }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-table-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Table font size"
+    },
+    {
+      "token": "--ui-table-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
+    },
+    {
+      "token": "--ui-table-header-bg",
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Header background"
+    },
+    {
+      "token": "--ui-table-cell-padding-x",
+      "default": "var(--ui-space-2)",
+      "description": "Cell horizontal padding"
+    },
+    {
+      "token": "--ui-table-cell-padding-y",
+      "default": "var(--ui-space-1)",
+      "description": "Cell vertical padding"
+    }
+  ]
+}

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

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component tag
 // @element span
@@ -21,6 +21,12 @@
     --_font-size: var(--ui-tag-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
   }
 
+  .tag--lg {
+    --_height: var(--ui-tag-height-lg, calc(#{t.$unit} * 3.5));
+    --_padding-x: var(--ui-tag-padding-x-lg, var(--ui-space-2, #{t.$space-2}));
+    --_font-size: var(--ui-tag-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
+  }
+
   // @modifier variant
   .tag--primary {
     --_bg: var(--ui-tag-primary-bg, var(--ui-color-primary, #{t.$color-primary}));
@@ -63,7 +69,7 @@
 
     &:disabled,
     &[aria-disabled='true'] {
-      opacity: 0.5;
+      opacity: var(--ui-opacity-disabled, 0.5);
       cursor: not-allowed;
     }
   }
@@ -81,7 +87,7 @@
 
     background: none;
     border: none;
-    opacity: 0.7;
+    opacity: var(--ui-opacity-loading, 0.7);
     cursor: pointer;
 
     &:hover {

package/src/{04-components → components}/data-display/tag/tag.api.json

@@ -3,7 +3,7 @@
   "element": "span",
   "modifiers": {
     "size": {
-      "values": ["sm"]
+      "values": ["sm", "lg"]
     },
     "variant": {
       "values": ["primary", "success", "warning", "danger"]
@@ -16,7 +16,7 @@
   "cssVars": [
     {
       "name": "--ui-tag-height",
-      "default": "calc(#{t.$unit} * 3"
+      "default": "calc(var(--ui-unit) * 3"
     },
     {
       "name": "--ui-tag-padding-x",
@@ -24,7 +24,7 @@
     },
     {
       "name": "--ui-tag-gap",
-      "default": "calc(#{t.$unit} * 0.5"
+      "default": "calc(var(--ui-unit) * 0.5"
     },
     {
       "name": "--ui-tag-radius",
@@ -44,16 +44,28 @@
     },
     {
       "name": "--ui-tag-height-sm",
-      "default": "calc(#{t.$unit} * 2.5"
+      "default": "calc(var(--ui-unit) * 2.5"
     },
     {
       "name": "--ui-tag-padding-x-sm",
-      "default": "calc(#{t.$unit} * 1"
+      "default": "calc(var(--ui-unit) * 1"
     },
     {
       "name": "--ui-tag-font-size-sm",
       "default": "var(--ui-font-size-xs)"
     },
+    {
+      "name": "--ui-tag-height-lg",
+      "default": "calc(var(--ui-unit) * 3.5)"
+    },
+    {
+      "name": "--ui-tag-padding-x-lg",
+      "default": "var(--ui-space-2)"
+    },
+    {
+      "name": "--ui-tag-font-size-lg",
+      "default": "var(--ui-font-size-md)"
+    },
     {
       "name": "--ui-tag-primary-bg",
       "default": "var(--ui-color-primary)"