@teseor/css 1.7.0 → 1.8.0

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

@@ -9,7 +9,7 @@
       "title": "Default",
       "examples": [
         {
-          "html": "<span class=\"ui-badge\">Default</span>"
+          "items": [{ "tag": "span", "class": "ui-badge", "text": "Default" }]
         }
       ]
     },
@@ -24,7 +24,7 @@
             { "tag": "span", "class": "ui-badge ui-badge--warning", "text": "Warning" },
             { "tag": "span", "class": "ui-badge ui-badge--danger", "text": "Danger" }
           ],
-          "layout": "cluster"
+          "layout": "row"
         }
       ]
     },
@@ -34,9 +34,10 @@
         {
           "items": [
             { "tag": "span", "class": "ui-badge ui-badge--sm", "text": "Small" },
-            { "tag": "span", "class": "ui-badge", "text": "Default" }
+            { "tag": "span", "class": "ui-badge", "text": "Default" },
+            { "tag": "span", "class": "ui-badge ui-badge--lg", "text": "Large" }
           ],
-          "layout": "cluster"
+          "layout": "row"
         }
       ]
     },
@@ -44,10 +45,29 @@
       "title": "Use Cases",
       "examples": [
         {
-          "html": "<div class=\"ui-cluster\"><span>Notifications</span><span class=\"ui-badge ui-badge--primary\">5</span></div>"
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row",
+              "children": [
+                { "tag": "span", "text": "Notifications" },
+                { "tag": "span", "class": "ui-badge ui-badge--primary", "text": "5" }
+              ]
+            }
+          ]
         },
         {
-          "html": "<div class=\"ui-cluster\"><span class=\"ui-badge ui-badge--success\">Published</span><span class=\"ui-badge ui-badge--warning\">Draft</span><span class=\"ui-badge ui-badge--danger\">Archived</span></div>"
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row",
+              "children": [
+                { "tag": "span", "class": "ui-badge ui-badge--success", "text": "Published" },
+                { "tag": "span", "class": "ui-badge ui-badge--warning", "text": "Draft" },
+                { "tag": "span", "class": "ui-badge ui-badge--danger", "text": "Archived" }
+              ]
+            }
+          ]
         }
       ]
     }
@@ -59,6 +79,11 @@
       "description": "Default height"
     },
     { "token": "--ui-badge-height-sm", "default": "var(--ui-row)", "description": "Small height" },
+    {
+      "token": "--ui-badge-height-lg",
+      "default": "calc(var(--ui-row) * 1.5)",
+      "description": "Large height"
+    },
     {
       "token": "--ui-badge-padding-x",
       "default": "var(--ui-space-1)",
@@ -84,6 +109,6 @@
       "default": "var(--ui-color-bg-muted)",
       "description": "Background color"
     },
-    { "token": "--ui-badge-text", "default": "var(--ui-color-text)", "description": "Text color" }
+    { "token": "--ui-badge-color", "default": "var(--ui-color-text)", "description": "Text color" }
   ]
 }

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

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component badge
 // @element span
@@ -14,7 +14,7 @@
     --_font-weight: var(--ui-badge-font-weight, var(--ui-weight-medium, #{t.$weight-medium}));
     --_radius: var(--ui-badge-radius, var(--ui-radius-full, #{t.$radius-full}));
     --_bg: var(--_accent);
-    --_text: var(--ui-badge-text, var(--ui-color-text, #{t.$color-text}));
+    --_color: var(--ui-badge-color, var(--ui-color-text, #{t.$color-text}));
   }
 
   // @modifier size
@@ -24,25 +24,31 @@
     --_font-size: var(--ui-badge-font-size-sm, calc(var(--ui-font-size-xs, #{t.$font-size-xs}) * 0.85));
   }
 
+  .badge--lg {
+    --_height: var(--ui-badge-height-lg, calc(var(--ui-row, #{t.$row}) * 1.5));
+    --_padding-x: var(--ui-badge-padding-x-lg, var(--ui-space-2, #{t.$space-2}));
+    --_font-size: var(--ui-badge-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
+  }
+
   // @modifier variant
   .badge--primary {
     --_accent: var(--ui-color-primary, #{t.$color-primary});
-    --_text: var(--ui-color-text-inverse, #{t.$color-text-inverse});
+    --_color: var(--ui-color-text-inverse, #{t.$color-text-inverse});
   }
 
   .badge--success {
     --_accent: var(--ui-color-success, #{t.$color-success});
-    --_text: var(--ui-color-text-inverse, #{t.$color-text-inverse});
+    --_color: var(--ui-color-text-inverse, #{t.$color-text-inverse});
   }
 
   .badge--warning {
     --_accent: var(--ui-color-warning, #{t.$color-warning});
-    --_text: var(--ui-color-text, #{t.$color-text});
+    --_color: var(--ui-color-text, #{t.$color-text});
   }
 
   .badge--danger {
     --_accent: var(--ui-color-danger, #{t.$color-danger});
-    --_text: var(--ui-color-text-inverse, #{t.$color-text-inverse});
+    --_color: var(--ui-color-text-inverse, #{t.$color-text-inverse});
   }
 }
 
@@ -59,7 +65,7 @@
     font-weight: var(--_font-weight);
     line-height: 1;
     white-space: nowrap;
-    color: var(--_text);
+    color: var(--_color);
 
     background: var(--_bg);
     border-radius: var(--_radius);

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

@@ -10,6 +10,9 @@
     },
     "flush": {
       "type": "boolean"
+    },
+    "interactive": {
+      "type": "boolean"
     }
   },
   "cssVars": [
@@ -48,6 +51,18 @@
     {
       "name": "--ui-card-padding-lg",
       "default": "var(--ui-space-6)"
+    },
+    {
+      "name": "--ui-card-bg-hover",
+      "default": "var(--ui-color-bg-subtle)"
+    },
+    {
+      "name": "--ui-card-border-color-hover",
+      "default": "var(--ui-color-border-strong)"
+    },
+    {
+      "name": "--ui-card-bg-active",
+      "default": "var(--ui-color-bg-muted)"
     }
   ]
 }

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

@@ -1,4 +1,7 @@
 {
+  "id": "card",
+  "type": "component",
+  "title": "Card",
   "api": "./card.api.json",
   "sections": [
     {
@@ -23,7 +26,7 @@
       },
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             { "tag": "div", "class": "ui-card", "text": "Default background" },
             { "tag": "div", "class": "ui-card ui-card--subtle", "text": "Subtle background" },
@@ -45,7 +48,7 @@
       },
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             { "tag": "div", "class": "ui-card ui-card--sm", "text": "Small padding" },
             { "tag": "div", "class": "ui-card", "text": "Default padding" },
@@ -55,6 +58,27 @@
           "code": "{% for s in sizes %}<div class=\"ui-card{% if s.mod %} ui-card--{{ s.mod }}{% endif %}\">{{ s.label }}</div>\n{% endfor %}"
         }
       ]
+    },
+    {
+      "title": "Interactive",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-card ui-card--interactive",
+              "text": "Hover and click this card"
+            },
+            {
+              "tag": "div",
+              "class": "ui-card ui-card--interactive ui-card--subtle",
+              "text": "Interactive subtle card"
+            }
+          ],
+          "code": "<div class=\"ui-card ui-card--interactive\">Clickable card</div>"
+        }
+      ]
     }
   ],
   "customization": [

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

@@ -1,5 +1,3 @@
-@use '../../../00-config/mixins/border' as *;
-
 // @component card
 // @element div
 
@@ -20,6 +18,11 @@
   .card--sm { --_padding: var(--ui-card-padding-sm, var(--ui-space-2)); }
   .card--lg { --_padding: var(--ui-card-padding-lg, var(--ui-space-6)); }
 
+  // @modifier boolean interactive
+  .card--interactive {
+    cursor: pointer;
+  }
+
   // @modifier boolean flush
   .card--flush {
     --_padding: 0;
@@ -27,15 +30,32 @@
   }
 }
 
-// Implementation
 @layer components.styles {
   .card {
-    @include border(var(--_border-width), var(--_border-color));
-    @include rounded(var(--_radius));
-    @include surface(var(--_bg));
     // Subtract border from padding to keep total on grid
     padding: calc(var(--_padding) - var(--_border-width));
+
     // Grid-aligned line-height for text content
     line-height: var(--ui-row-1);
+
+    background: var(--_bg);
+    border: var(--_border-width) solid var(--_border-color);
+    border-radius: var(--_radius);
+  }
+
+  .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);
+
+    &:hover {
+      --_bg: var(--ui-card-bg-hover, var(--ui-color-bg-subtle));
+      --_border-color: var(--ui-card-border-color-hover, var(--ui-color-border-strong));
+    }
+
+    &:active {
+      --_bg: var(--ui-card-bg-active, var(--ui-color-bg-muted));
+    }
   }
 }

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

@@ -20,11 +20,11 @@
   "cssVars": [
     {
       "name": "--ui-data-list-gap",
-      "default": "calc(#{t.$unit} * 2"
+      "default": "calc(var(--ui-unit) * 2"
     },
     {
       "name": "--ui-data-list-item-gap",
-      "default": "calc(#{t.$unit} * 1"
+      "default": "calc(var(--ui-unit) * 1"
     },
     {
       "name": "--ui-data-list-label-color",

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

@@ -0,0 +1,259 @@
+{
+  "id": "data-list",
+  "type": "component",
+  "title": "Data List",
+  "api": "./data-list.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "dl",
+              "class": "ui-data-list",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Name" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "John Doe" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Email" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "john@example.com" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Role" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Administrator" }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Horizontal Layout",
+      "description": "Side-by-side label and value",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "dl",
+              "class": "ui-data-list ui-data-list--horizontal",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Status" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Active" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Created" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Dec 8, 2025" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Updated" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Dec 8, 2025" }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Divided",
+      "description": "With separator lines between items",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "dl",
+              "class": "ui-data-list ui-data-list--divided",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Order ID" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "#12345" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Total" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "$99.00" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Payment" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Credit Card" }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Striped",
+      "description": "Alternating background for readability",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "dl",
+              "class": "ui-data-list ui-data-list--striped",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "CPU" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Intel i7" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Memory" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "16 GB" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Storage" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "512 GB SSD" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Display" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "14\" Retina" }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "dl",
+              "class": "ui-data-list ui-data-list--sm",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Small" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Compact display" }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        },
+        {
+          "items": [
+            {
+              "tag": "dl",
+              "class": "ui-data-list",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Default" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Standard display" }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        },
+        {
+          "items": [
+            {
+              "tag": "dl",
+              "class": "ui-data-list ui-data-list--lg",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Large" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Spacious display" }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-data-list-gap",
+      "default": "calc(var(--ui-unit) * 2)",
+      "description": "Gap between items"
+    },
+    {
+      "token": "--ui-data-list-item-gap",
+      "default": "var(--ui-unit)",
+      "description": "Gap between label and value"
+    },
+    {
+      "token": "--ui-data-list-label-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Label color"
+    },
+    {
+      "token": "--ui-data-list-value-color",
+      "default": "var(--ui-color-text)",
+      "description": "Value color"
+    }
+  ]
+}

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

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Data-List - key-value pairs
 // Display structured data with labels and values