@teseor/css 1.7.0 → 1.9.0

package/src/{04-components → components}/actions/button/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component button
 // @element button
@@ -6,36 +6,60 @@
 // Token definitions - what makes each variant
 @layer components.tokens {
   .button {
+    --_space-1: var(--ui-space-1, #{t.$space-1});
+    --_font-sans: var(--ui-font-sans, #{t.$font-sans});
+    --_duration-base: var(--ui-duration-base);
+    --_ease-default: var(--ui-ease-default);
+    --_duration-fast: var(--ui-duration-fast);
+    --_border-width-md: var(--ui-border-width-md, #{t.$border-width-md});
+    --_color-focus: var(--ui-color-focus, #{t.$color-focus});
+    --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
+    --_space-quarter: var(--ui-space-quarter);
+    --_opacity-loading: var(--ui-opacity-loading, #{t.$opacity-loading});
     // Single accent color - all shades derived via color-mix
+    // @desc Primary accent color. All shades auto-generated via color-mix.
     --_accent: var(--ui-button-accent, var(--ui-color-primary, #{t.$color-primary}));
 
+    // @desc Overall height
     --_height: var(--ui-button-height, var(--ui-row-2, #{t.$row-2}));
+    // @desc Horizontal padding
     --_padding-x: var(--ui-button-padding-x, var(--ui-space-2, #{t.$space-2}));
+    // @desc Font size
     --_font-size: var(--ui-button-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Font weight
     --_font-weight: var(--ui-button-font-weight, var(--ui-weight-medium, #{t.$weight-medium}));
+    // @desc Corner radius
     --_radius: var(--ui-button-radius, var(--ui-radius-md, #{t.$radius-md}));
     --_bg: var(--_accent);
     --_bg-hover: color-mix(in oklch, var(--_accent) 80%, black);
-    --_text: var(--ui-button-text, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
+    // @desc Text color
+    --_color: var(--ui-button-color, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
   }
 
   // @modifier size
   .button--sm {
     --ui-ctx-size: var(--ui-size-sm, #{t.size(sm)});
-    --_height: var(--ui-button-height-sm, calc(var(--row, #{t.$row}) * 1.5));
+    // @desc Overall height at small size
+    --_height: var(--ui-button-height-sm, calc(var(--ui-row, #{t.$row}) * 1.5));
+    // @desc Font size at small size
     --_font-size: var(--ui-button-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
   }
 
   .button--md {
     --ui-ctx-size: var(--ui-size-md, #{t.size(md)});
+    // @desc Overall height at medium size
     --_height: var(--ui-button-height-md, var(--ui-row-2, #{t.$row-2}));
+    // @desc Font size at medium size
     --_font-size: var(--ui-button-font-size-md, var(--ui-font-size-sm, #{t.$font-size-sm}));
   }
 
   .button--lg {
     --ui-ctx-size: var(--ui-size-lg, #{t.size(lg)});
-    --_height: var(--ui-button-height-lg, calc(var(--row, #{t.$row}) * 2.5));
+    // @desc Overall height at large size
+    --_height: var(--ui-button-height-lg, calc(var(--ui-row, #{t.$row}) * 2.5));
+    // @desc Horizontal padding at large size
     --_padding-x: var(--ui-button-padding-x-lg, var(--ui-space-3, #{t.$space-3}));
+    // @desc Font size at large size
     --_font-size: var(--ui-button-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
   }
 
@@ -43,32 +67,33 @@
   .button--secondary {
     --_bg: var(--ui-color-bg-muted, #{t.$color-bg-muted});
     --_bg-hover: var(--ui-color-border-strong, #{t.$color-border-strong});
-    --_text: var(--ui-color-text, #{t.$color-text});
+    --_color: var(--ui-color-text, #{t.$color-text});
   }
 
   .button--ghost {
     --_bg: transparent;
     --_bg-hover: color-mix(in oklch, var(--_accent) 10%, transparent);
-    --_text: var(--_accent);
+    --_color: var(--_accent);
   }
 
   .button--outline {
     --_bg: transparent;
     --_bg-hover: var(--_accent);
-    --_text: var(--_accent);
-    --_text-hover: var(--ui-color-text-inverse, #{t.$color-text-inverse});
+    --_color: var(--_accent);
+    --_color-hover: var(--ui-color-text-inverse, #{t.$color-text-inverse});
     --_border: var(--ui-border-width-sm, #{t.$border-width-sm}) solid currentColor;
   }
 
   .button--danger {
+    // @desc Used by --danger variant as accent color
     --_accent: var(--ui-color-danger, #{t.$color-danger});
   }
 
   .button--link {
     --_bg: transparent;
     --_bg-hover: transparent;
-    --_text: var(--_accent);
-    --_text-hover: color-mix(in oklch, var(--_accent) 70%, black);
+    --_color: var(--_accent);
+    --_color-hover: color-mix(in oklch, var(--_accent) 70%, black);
     --_height: auto;
     --_padding-x: 0;
     --_radius: 0;
@@ -107,7 +132,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--ui-space-1, #{t.$space-1});
+    gap: var(--_space-1);
 
     // Size
     block-size: var(--_height);
@@ -117,13 +142,13 @@
     margin: 0;
 
     // Typography
-    font-family: var(--ui-font-sans, #{t.$font-sans});
+    font-family: var(--_font-sans);
     font-size: var(--_font-size);
     font-weight: var(--_font-weight);
     line-height: 1;
     text-decoration: none;
     white-space: nowrap;
-    color: var(--_text);
+    color: var(--_color);
 
     background: var(--_bg);
     border: var(--_border, none);
@@ -132,22 +157,22 @@
 
     // Transitions
     transition:
-      background-color var(--ui-duration-base) var(--ui-ease-default),
-      color var(--ui-duration-base) var(--ui-ease-default),
-      transform var(--ui-duration-fast) var(--ui-ease-default);
+      background-color var(--_duration-base) var(--_ease-default),
+      color var(--_duration-base) var(--_ease-default),
+      transform var(--_duration-fast) var(--_ease-default);
 
     // States - modifiers mirror pseudo-classes for testing/docs
     &:hover,
     &--hover {
-      color: var(--_text-hover, var(--_text));
+      color: var(--_color-hover, var(--_color));
 
       background: var(--_bg-hover);
     }
 
     &:focus-visible,
     &--focus {
-      outline: var(--ui-border-width-md, #{t.$border-width-md}) solid var(--ui-color-focus, #{t.$color-focus});
-      outline-offset: var(--ui-border-width-md, #{t.$border-width-md});
+      outline: var(--_border-width-md) solid var(--_color-focus);
+      outline-offset: var(--_border-width-md);
     }
 
     &:active,
@@ -156,7 +181,7 @@
     }
 
     &:disabled {
-      opacity: 0.5;
+      opacity: var(--_opacity-disabled);
       cursor: not-allowed;
 
       &:hover {
@@ -178,10 +203,10 @@
     // Link variant underline
     &--link {
       text-decoration: underline;
-      text-underline-offset: var(--ui-space-quarter);
+      text-underline-offset: var(--_space-quarter);
 
       &:hover {
-        text-decoration-thickness: var(--ui-space-quarter);
+        text-decoration-thickness: var(--_space-quarter);
       }
     }
 
@@ -205,7 +230,7 @@
     &--loading {
       position: relative;
 
-      opacity: 0.7;
+      opacity: var(--_opacity-loading);
       pointer-events: none;
 
       &::after {
@@ -229,4 +254,10 @@
       transform: rotate(360deg);
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .button--loading::after {
+      animation: none;
+    }
+  }
 }

package/src/{04-components → components}/actions/button-group/button-group.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "button-group",
   "element": "div",
   "modifiers": {
@@ -9,7 +10,8 @@
   "cssVars": [
     {
       "name": "--ui-button-group-radius",
-      "default": "var(--ui-radius-md)"
+      "default": "var(--ui-radius-md)",
+      "description": "Corner radius"
     }
   ]
 }

package/src/components/actions/button-group/button-group.docs.json

@@ -0,0 +1,151 @@
+{
+  "id": "button-group",
+  "type": "component",
+  "mergeInto": "button",
+  "title": "Button Group",
+  "description": "Container for grouped buttons that share borders and have connected appearance.",
+  "api": "./button-group.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-button-group",
+              "attrs": { "role": "group" },
+              "children": [
+                { "tag": "button", "class": "ui-button ui-button--outline", "text": "Left" },
+                { "tag": "button", "class": "ui-button ui-button--outline", "text": "Middle" },
+                { "tag": "button", "class": "ui-button ui-button--outline", "text": "Right" }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-button-group\" role=\"group\">\n  <button class=\"ui-button ui-button--outline\">Left</button>\n  <button class=\"ui-button ui-button--outline\">Middle</button>\n  <button class=\"ui-button ui-button--outline\">Right</button>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Primary Buttons",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-button-group",
+              "attrs": { "role": "group" },
+              "children": [
+                { "tag": "button", "class": "ui-button", "text": "Save" },
+                { "tag": "button", "class": "ui-button", "text": "Save & Close" }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-button-group\" role=\"group\">\n  <button class=\"ui-button\">Save</button>\n  <button class=\"ui-button\">Save & Close</button>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Vertical",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-button-group ui-button-group--vertical",
+              "attrs": { "role": "group" },
+              "children": [
+                { "tag": "button", "class": "ui-button ui-button--outline", "text": "Top" },
+                { "tag": "button", "class": "ui-button ui-button--outline", "text": "Middle" },
+                { "tag": "button", "class": "ui-button ui-button--outline", "text": "Bottom" }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-button-group ui-button-group--vertical\" role=\"group\">\n  <button class=\"ui-button ui-button--outline\">Top</button>\n  <button class=\"ui-button ui-button--outline\">Middle</button>\n  <button class=\"ui-button ui-button--outline\">Bottom</button>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "With Icons",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-button-group",
+              "attrs": { "role": "group", "aria-label": "Text formatting" },
+              "children": [
+                {
+                  "tag": "button",
+                  "class": "ui-button ui-button--outline ui-button--icon",
+                  "attrs": { "aria-label": "Bold" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "class": "ui-icon",
+                      "attrs": { "viewBox": "0 0 24 24", "fill": "currentColor" },
+                      "children": [
+                        {
+                          "tag": "path",
+                          "attrs": {
+                            "d": "M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-button ui-button--outline ui-button--icon",
+                  "attrs": { "aria-label": "Italic" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "class": "ui-icon",
+                      "attrs": { "viewBox": "0 0 24 24", "fill": "currentColor" },
+                      "children": [
+                        {
+                          "tag": "path",
+                          "attrs": { "d": "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-button ui-button--outline ui-button--icon",
+                  "attrs": { "aria-label": "Underline" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "class": "ui-icon",
+                      "attrs": { "viewBox": "0 0 24 24", "fill": "currentColor" },
+                      "children": [
+                        {
+                          "tag": "path",
+                          "attrs": {
+                            "d": "M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-button-group\" role=\"group\" aria-label=\"Text formatting\">\n  <button class=\"ui-button ui-button--outline ui-button--icon\" aria-label=\"Bold\">...</button>\n  <button class=\"ui-button ui-button--outline ui-button--icon\" aria-label=\"Italic\">...</button>\n  <button class=\"ui-button ui-button--outline ui-button--icon\" aria-label=\"Underline\">...</button>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-button-group-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Border radius for first and last buttons"
+    }
+  ]
+}

package/src/{04-components → components}/actions/button-group/index.scss

@@ -1,10 +1,13 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
+// @component button-group
+// @element div
 
 // Button Group - container for grouped buttons
 // Joins buttons together with shared borders
 
 @layer components.tokens {
   .button-group {
+    // @desc Corner radius
     --_radius: var(--ui-button-group-radius, var(--ui-radius-md, calc(#{t.$unit} / 2)));
   }
 }
@@ -40,6 +43,7 @@
   }
 
   // Vertical orientation
+  // @modifier boolean vertical
   .button-group--vertical {
     flex-direction: column;
   }

package/src/components/actions/close-button/close-button.api.json

@@ -0,0 +1,84 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "close-button",
+  "element": "button",
+  "modifiers": {
+    "size": {
+      "values": ["sm", "lg"]
+    },
+    "subtle": {
+      "type": "boolean"
+    },
+    "hover": {
+      "type": "boolean"
+    },
+    "focus": {
+      "type": "boolean"
+    }
+  },
+  "elements": {
+    "icon": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-close-button-size",
+      "default": "var(--ui-row-2)",
+      "description": "Overall button size (width and height)"
+    },
+    {
+      "name": "--ui-close-button-icon-size",
+      "default": "var(--ui-size-md)",
+      "description": "Size of the X icon"
+    },
+    {
+      "name": "--ui-close-button-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Icon color"
+    },
+    {
+      "name": "--ui-close-button-bg",
+      "default": "transparent",
+      "description": "Background color"
+    },
+    {
+      "name": "--ui-close-button-hover-bg",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Background color on hover"
+    },
+    {
+      "name": "--ui-close-button-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Border radius"
+    },
+    {
+      "name": "--ui-close-button-size-sm",
+      "default": "calc(var(--ui-unit) * 3)",
+      "description": "Overall size at small size"
+    },
+    {
+      "name": "--ui-close-button-icon-size-sm",
+      "default": "var(--ui-size-sm)",
+      "description": "Icon dimensions at small size"
+    },
+    {
+      "name": "--ui-close-button-size-lg",
+      "default": "var(--ui-row-3)",
+      "description": "Overall size at large size"
+    },
+    {
+      "name": "--ui-close-button-icon-size-lg",
+      "default": "var(--ui-size-lg)",
+      "description": "Icon dimensions at large size"
+    },
+    {
+      "name": "--ui-close-button-subtle-color",
+      "default": "var(--ui-color-border-strong)",
+      "description": "Subtle color"
+    },
+    {
+      "name": "--ui-close-button-subtle-hover-bg",
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Subtle hover bg"
+    }
+  ]
+}

package/src/{04-components → components}/actions/close-button/close-button.docs.json

@@ -1,6 +1,7 @@
 {
   "id": "close-button",
   "type": "component",
+  "mergeInto": "button",
   "title": "Close Button",
   "description": "Dismiss button for closing modals, alerts, drawers, and other dismissible elements.",
   "api": "./close-button.api.json",
@@ -54,7 +55,7 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "button",
@@ -114,7 +115,7 @@
       "description": "Lower visual prominence for secondary dismiss actions.",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "button",
@@ -157,7 +158,7 @@
       "title": "States",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "button",

package/src/{04-components → components}/actions/close-button/index.scss

@@ -1,32 +1,50 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component close-button
 // @element button
 
 @layer components.tokens {
   .close-button {
+    --_duration-base: var(--ui-duration-base, #{t.$duration-base});
+    --_ease-default: var(--ui-ease-default, ease);
+    --_color-text: var(--ui-color-text, #{t.$color-text});
+    --_border-width-md: var(--ui-border-width-md, #{t.$border-width-md});
+    --_color-focus: var(--ui-color-focus, #{t.$color-focus});
+    --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
+    // @desc Overall button size (width and height)
     --_size: var(--ui-close-button-size, var(--ui-row-2, #{t.$row-2}));
+    // @desc Size of the X icon
     --_icon-size: var(--ui-close-button-icon-size, var(--ui-size-md, #{t.size(md)}));
+    // @desc Icon color
     --_color: var(--ui-close-button-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    // @desc Background color
     --_bg: var(--ui-close-button-bg, transparent);
+    // @desc Background color on hover
     --_hover-bg: var(--ui-close-button-hover-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    // @desc Border radius
     --_radius: var(--ui-close-button-radius, var(--ui-radius-md, #{t.$radius-md}));
   }
 
   // @modifier size
   .close-button--sm {
+    // @desc Overall size at small size
     --_size: var(--ui-close-button-size-sm, calc(#{t.$unit} * 3));
+    // @desc Icon dimensions at small size
     --_icon-size: var(--ui-close-button-icon-size-sm, var(--ui-size-sm, #{t.size(sm)}));
   }
 
   .close-button--lg {
+    // @desc Overall size at large size
     --_size: var(--ui-close-button-size-lg, var(--ui-row-3, #{t.$row-3}));
+    // @desc Icon dimensions at large size
     --_icon-size: var(--ui-close-button-icon-size-lg, var(--ui-size-lg, #{t.size(lg)}));
   }
 
   // @modifier boolean subtle
   .close-button--subtle {
+    // @desc Subtle color
     --_color: var(--ui-close-button-subtle-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    // @desc Subtle hover bg
     --_hover-bg: var(--ui-close-button-subtle-hover-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
   }
 }
@@ -52,20 +70,22 @@
     appearance: none;
 
     transition:
-      background-color var(--ui-duration-base, 150ms) var(--ui-ease-default, ease),
-      color var(--ui-duration-base, 150ms) var(--ui-ease-default, ease);
+      background-color var(--_duration-base) var(--_ease-default),
+      color var(--_duration-base) var(--_ease-default);
 
     &:hover,
+  // @modifier boolean hover
     &--hover {
-      color: var(--ui-color-text, #{t.$color-text});
+      color: var(--_color-text);
 
       background: var(--_hover-bg);
     }
 
     &:focus-visible,
+  // @modifier boolean focus
     &--focus {
-      outline: var(--ui-border-width-md, #{t.$border-width-md}) solid var(--ui-color-focus, #{t.$color-focus});
-      outline-offset: var(--ui-border-width-md, #{t.$border-width-md});
+      outline: var(--_border-width-md) solid var(--_color-focus);
+      outline-offset: var(--_border-width-md);
     }
 
     &:active,
@@ -74,7 +94,7 @@
     }
 
     &:disabled {
-      opacity: 0.5;
+      opacity: var(--_opacity-disabled);
       cursor: not-allowed;
 
       &:hover {

package/src/{04-components/layout → components/content}/divider/divider.api.json

@@ -1,33 +1,38 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "divider",
   "element": "div",
   "modifiers": {
     "vertical": {
       "type": "boolean"
     },
-    "dashed": {
-      "type": "boolean"
-    },
     "position": {
       "values": ["start", "end"]
+    },
+    "dashed": {
+      "type": "boolean"
     }
   },
   "cssVars": [
     {
       "name": "--ui-divider-color",
-      "default": "var(--ui-color-border)"
+      "default": "var(--ui-color-border)",
+      "description": "Text color"
     },
     {
       "name": "--ui-divider-line-size",
-      "default": "1px"
+      "default": "var(--ui-border-width-sm)",
+      "description": "Line size"
     },
     {
       "name": "--ui-divider-height",
-      "default": "#{t.$unit}"
+      "default": "var(--ui-unit)",
+      "description": "Overall height"
     },
     {
       "name": "--ui-divider-gap",
-      "default": "calc(#{t.$unit} * 2"
+      "default": "calc(var(--ui-unit) * 2)",
+      "description": "Gap between children"
     }
   ]
 }