@teseor/css 1.7.0 → 1.9.0

package/src/components/navigation/breadcrumb/breadcrumb.docs.json

@@ -0,0 +1,170 @@
+{
+  "id": "breadcrumb",
+  "type": "component",
+  "title": "Breadcrumb",
+  "description": "Navigation hierarchy showing current page location in site structure.",
+  "api": "./breadcrumb.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "nav",
+              "class": "ui-breadcrumb",
+              "attrs": { "aria-label": "Breadcrumb" },
+              "children": [
+                {
+                  "tag": "ol",
+                  "class": "ui-breadcrumb",
+                  "children": [
+                    {
+                      "tag": "li",
+                      "class": "ui-breadcrumb__item",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-breadcrumb__link",
+                          "attrs": { "href": "#" },
+                          "text": "Home"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "class": "ui-breadcrumb__item",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-breadcrumb__link",
+                          "attrs": { "href": "#" },
+                          "text": "Products"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "class": "ui-breadcrumb__item",
+                      "children": [
+                        {
+                          "tag": "span",
+                          "class": "ui-breadcrumb__current",
+                          "attrs": { "aria-current": "page" },
+                          "text": "Shoes"
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<nav aria-label=\"Breadcrumb\">\n  <ol class=\"ui-breadcrumb\">\n    <li class=\"ui-breadcrumb__item\">\n      <a href=\"#\" class=\"ui-breadcrumb__link\">Home</a>\n    </li>\n    <li class=\"ui-breadcrumb__item\">\n      <a href=\"#\" class=\"ui-breadcrumb__link\">Products</a>\n    </li>\n    <li class=\"ui-breadcrumb__item\">\n      <span aria-current=\"page\">Shoes</span>\n    </li>\n  </ol>\n</nav>"
+        }
+      ]
+    },
+    {
+      "title": "With Icons",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "nav",
+              "attrs": { "aria-label": "Breadcrumb" },
+              "children": [
+                {
+                  "tag": "ol",
+                  "class": "ui-breadcrumb",
+                  "children": [
+                    {
+                      "tag": "li",
+                      "class": "ui-breadcrumb__item",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-breadcrumb__link",
+                          "attrs": { "href": "#" },
+                          "children": [
+                            {
+                              "tag": "svg",
+                              "class": "ui-icon ui-icon--sm",
+                              "attrs": { "viewBox": "0 0 24 24", "fill": "currentColor" },
+                              "children": [
+                                {
+                                  "tag": "path",
+                                  "attrs": { "d": "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "class": "ui-breadcrumb__item",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-breadcrumb__link",
+                          "attrs": { "href": "#" },
+                          "text": "Settings"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "class": "ui-breadcrumb__item",
+                      "children": [
+                        {
+                          "tag": "span",
+                          "class": "ui-breadcrumb__current",
+                          "attrs": { "aria-current": "page" },
+                          "text": "Profile"
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<ol class=\"ui-breadcrumb\">\n  <li class=\"ui-breadcrumb__item\">\n    <a href=\"#\" class=\"ui-breadcrumb__link\">\n      <svg class=\"ui-icon\">...</svg>\n    </a>\n  </li>\n  ...\n</ol>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-breadcrumb-height",
+      "default": "var(--ui-row-1)",
+      "description": "Container height"
+    },
+    {
+      "token": "--ui-breadcrumb-gap",
+      "default": "var(--ui-unit)",
+      "description": "Gap between items"
+    },
+    {
+      "token": "--ui-breadcrumb-separator",
+      "default": "\"/\"",
+      "description": "Separator character"
+    },
+    {
+      "token": "--ui-breadcrumb-separator-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Separator color"
+    },
+    {
+      "token": "--ui-breadcrumb-link-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Link color"
+    },
+    {
+      "token": "--ui-breadcrumb-current-color",
+      "default": "var(--ui-color-text)",
+      "description": "Current page color"
+    }
+  ]
+}

package/src/{04-components → components}/navigation/breadcrumb/index.scss

@@ -1,14 +1,27 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
+// @component breadcrumb
+// @element div
 
 // Breadcrumb - navigation hierarchy
 // Shows current page location in site structure
 
 @layer components.tokens {
   .breadcrumb {
+    --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
+    // @desc Separator
+    --_breadcrumb-separator: var(--ui-breadcrumb-separator, "/");
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, ease);
+    --_color-primary: var(--ui-color-primary);
+    // @desc Overall height
     --_height: var(--ui-breadcrumb-height, var(--ui-row-1, #{t.$row}));
+    // @desc Gap between children
     --_gap: var(--ui-breadcrumb-gap, calc(#{t.$unit} * 1));
+    // @desc Separator text color
     --_separator-color: var(--ui-breadcrumb-separator-color, var(--ui-color-text-muted));
+    // @desc Link text color
     --_link-color: var(--ui-breadcrumb-link-color, var(--ui-color-text-muted));
+    // @desc Current color
     --_current-color: var(--ui-breadcrumb-current-color, var(--ui-color-text));
   }
 }
@@ -24,7 +37,7 @@
     padding: 0;
     margin: 0;
 
-    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
+    font-size: var(--_font-size-sm);
     line-height: 1;
 
     list-style: none;
@@ -41,7 +54,7 @@
   // Separator after each item except last
   .breadcrumb__item:not(:last-child)::after {
 
-    content: var(--ui-breadcrumb-separator, "/");
+    content: var(--_breadcrumb-separator);
 
     color: var(--_separator-color);
   }
@@ -50,11 +63,11 @@
     text-decoration: none;
     color: var(--_link-color);
 
-    transition: color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+    transition: color var(--_duration-fast) var(--_ease-default);
 
     &:hover {
       text-decoration: underline;
-      color: var(--ui-color-primary);
+      color: var(--_color-primary);
     }
   }
 

package/src/{04-components → components}/navigation/dropdown-menu/dropdown-menu.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "dropdown-menu",
   "element": "div",
   "modifiers": {
@@ -23,15 +24,18 @@
   "cssVars": [
     {
       "name": "--ui-dropdown-menu-z",
-      "default": "200"
+      "default": "var(--ui-z-dropdown)",
+      "description": "Z-index stacking order"
     },
     {
       "name": "--ui-dropdown-menu-panel-offset",
-      "default": "var(--ui-space-1)"
+      "default": "var(--ui-space-1)",
+      "description": "Panel offset from anchor"
     },
     {
       "name": "--ui-dropdown-menu-panel-min-width",
-      "default": "auto"
+      "default": "auto",
+      "description": "Panel minimum width"
     }
   ]
 }

package/src/{04-components → components}/navigation/dropdown-menu/dropdown-menu.docs.json

@@ -171,6 +171,24 @@
         }
       ]
     },
+    {
+      "title": "Top Position",
+      "description": "Opens panel above the trigger.",
+      "examples": [
+        {
+          "code": "<div class=\"ui-dropdown-menu ui-dropdown-menu--open ui-dropdown-menu--top\">\n  <button class=\"ui-dropdown-menu__trigger ui-button\">Actions</button>\n  <div class=\"ui-dropdown-menu__panel\" role=\"menu\">\n    <div class=\"ui-menu\">...</div>\n  </div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Full Width",
+      "description": "Panel stretches to match trigger width.",
+      "examples": [
+        {
+          "code": "<div class=\"ui-dropdown-menu ui-dropdown-menu--open ui-dropdown-menu--full-width\">\n  <button class=\"ui-dropdown-menu__trigger ui-button\">Select option</button>\n  <div class=\"ui-dropdown-menu__panel\" role=\"menu\">\n    <div class=\"ui-menu\">...</div>\n  </div>\n</div>"
+        }
+      ]
+    },
     {
       "title": "Align End",
       "examples": [

package/src/{04-components → components}/navigation/dropdown-menu/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component dropdown-menu
 // @element div
@@ -6,8 +6,14 @@
 
 @layer components.tokens {
   .dropdown-menu {
-    --_z: var(--ui-dropdown-menu-z, 200);
+    --_space-0: var(--ui-space-0, #{t.$space-0});
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, ease);
+    // @desc Z-index stacking order
+    --_z: var(--ui-dropdown-menu-z, #{t.$z-dropdown});
+    // @desc Panel offset from anchor
     --_panel-offset: var(--ui-dropdown-menu-panel-offset, var(--ui-space-1, #{t.$space-1}));
+    // @desc Panel minimum width
     --_panel-min-width: var(--ui-dropdown-menu-panel-min-width, auto);
   }
 }
@@ -21,7 +27,7 @@
   .dropdown-menu__trigger {
     display: inline-flex;
     align-items: center;
-    gap: var(--ui-space-0, #{t.$space-0});
+    gap: var(--_space-0);
   }
 
   .dropdown-menu__trigger-icon {
@@ -29,9 +35,10 @@
 
     font-size: 0.6em;
 
-    transition: transform var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+    transition: transform var(--_duration-fast) var(--_ease-default);
   }
 
+  // @modifier boolean open
   .dropdown-menu--open .dropdown-menu__trigger-icon {
     transform: rotate(180deg);
   }
@@ -49,8 +56,8 @@
     transform: translateY(calc(#{t.$unit} * -1));
 
     transition:
-      opacity var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),
-      transform var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+      opacity var(--_duration-fast) var(--_ease-default),
+      transform var(--_duration-fast) var(--_ease-default);
   }
 
   .dropdown-menu--open .dropdown-menu__panel {
@@ -60,6 +67,7 @@
   }
 
   // Position above trigger
+  // @modifier boolean top
   .dropdown-menu--top .dropdown-menu__panel {
     inset-block-start: auto;
     inset-block-end: calc(100% + var(--_panel-offset));
@@ -72,12 +80,14 @@
   }
 
   // Align to end edge
+  // @modifier boolean align-end
   .dropdown-menu--align-end .dropdown-menu__panel {
     inset-inline-start: auto;
     inset-inline-end: 0;
   }
 
   // Full-width panel matches trigger width
+  // @modifier boolean full-width
   .dropdown-menu--full-width .dropdown-menu__panel {
     min-inline-size: 100%;
   }

package/src/{04-components → components}/navigation/menu/index.scss

@@ -1,19 +1,43 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
+// @component menu
+// @element div
 
 // Menu - action menu
 // Dropdown list of actions or options
 
 @layer components.tokens {
   .menu {
+    --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
+    --_font-size-xs: var(--ui-font-size-xs, #{t.$font-size-xs});
+    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_row-1: var(--ui-row-1, #{t.$row});
+    --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});
+    --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
+    --_color-text: var(--ui-color-text, #{t.$color-text});
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, ease);
+    --_color-danger: var(--ui-color-danger, #{t.$color-danger});
+    --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
+    --_color-border: var(--ui-color-border, #{t.$color-border});
+    // @desc Minimum width
     --_min-width: var(--ui-menu-min-width, calc(#{t.$unit} * 16));
+    // @desc Maximum height
     --_max-height: var(--ui-menu-max-height, calc(#{t.$unit} * 40));
+    // @desc Padding on all sides
     --_padding: var(--ui-menu-padding, calc(#{t.$unit} * 1));
+    // @desc Corner radius
     --_radius: var(--ui-menu-radius, var(--ui-radius-md, #{t.$radius-md}));
+    // @desc Background color
     --_bg: var(--ui-menu-bg, var(--ui-color-bg, #{t.$color-bg}));
+    // @desc Border color
     --_border-color: var(--ui-menu-border-color, var(--ui-color-border, #{t.$color-border}));
-    --_shadow: var(--ui-menu-shadow, var(--shadow-lg));
+    // @desc Box shadow
+    --_shadow: var(--ui-menu-shadow, var(--ui-shadow-lg));
+    // @desc Item padding on all sides
     --_item-padding: var(--ui-menu-item-padding, calc(#{t.$unit} * 1) calc(#{t.$unit} * 2));
+    // @desc Item corner radius
     --_item-radius: var(--ui-menu-item-radius, var(--ui-radius-sm, #{t.$radius-sm}));
+    // @desc Item bg hover
     --_item-bg-hover: var(--ui-menu-item-bg-hover, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
   }
 }
@@ -27,9 +51,9 @@
 
     background: var(--_bg);
     border-radius: var(--_radius);
-    outline: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
+    outline: var(--_border-width-sm) solid var(--_border-color);
     box-shadow: var(--_shadow);
-    outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
+    outline-offset: calc(var(--_border-width-sm) * -1);
   }
 
   .menu__group {
@@ -42,12 +66,12 @@
   .menu__label {
     padding: var(--_item-padding);
 
-    font-size: var(--ui-font-size-xs, #{t.$font-size-xs});
-    font-weight: var(--ui-weight-medium, #{t.$weight-medium});
-    line-height: var(--ui-row-1, #{t.$row});
+    font-size: var(--_font-size-xs);
+    font-weight: var(--_weight-medium);
+    line-height: var(--_row-1);
     letter-spacing: 0.05em;
     text-transform: uppercase;
-    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+    color: var(--_color-text-muted);
   }
 
   .menu__item {
@@ -57,17 +81,17 @@
 
     padding: var(--_item-padding);
 
-    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
-    line-height: var(--ui-row-1, #{t.$row});
+    font-size: var(--_font-size-sm);
+    line-height: var(--_row-1);
     text-decoration: none;
-    color: var(--ui-color-text, #{t.$color-text});
+    color: var(--_color-text);
 
     background: transparent;
     border: none;
     border-radius: var(--_item-radius);
     cursor: pointer;
 
-    transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+    transition: background var(--_duration-fast) var(--_ease-default);
 
     &:hover,
     &:focus-visible {
@@ -77,17 +101,17 @@
   }
 
   .menu__item--danger {
-    color: var(--ui-color-danger, #{t.$color-danger});
+    color: var(--_color-danger);
 
     &:hover,
     &:focus-visible {
-      color: var(--ui-color-danger, #{t.$color-danger});
+      color: var(--_color-danger);
     }
   }
 
   .menu__item--disabled,
   .menu__item[aria-disabled="true"] {
-    opacity: 0.5;
+    opacity: var(--_opacity-disabled);
     pointer-events: none;
   }
 
@@ -101,8 +125,8 @@
   .menu__item-shortcut {
     margin-inline-start: auto;
 
-    font-size: var(--ui-font-size-xs, #{t.$font-size-xs});
-    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+    font-size: var(--_font-size-xs);
+    color: var(--_color-text-muted);
   }
 
   .menu__separator {
@@ -116,9 +140,9 @@
       content: '';
       flex: 1;
 
-      block-size: var(--ui-border-width-sm, 1px);
+      block-size: var(--_border-width-sm);
 
-      background: var(--ui-color-border, #{t.$color-border});
+      background: var(--_color-border);
     }
   }
 

package/src/{04-components → components}/navigation/menu/menu.api.json

@@ -1,17 +1,17 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "menu",
   "element": "div",
   "modifiers": {},
   "elements": {
     "group": {},
     "label": {},
-    "separator": {},
     "item": {
       "modifiers": {
-        "disabled": {
+        "danger": {
           "type": "boolean"
         },
-        "danger": {
+        "disabled": {
           "type": "boolean"
         },
         "check": {
@@ -24,48 +24,59 @@
     },
     "item-icon": {},
     "item-shortcut": {},
+    "separator": {},
     "item-indicator": {}
   },
   "cssVars": [
     {
       "name": "--ui-menu-min-width",
-      "default": "calc(#{t.$unit} * 16"
+      "default": "calc(var(--ui-unit) * 16)",
+      "description": "Minimum width"
     },
     {
       "name": "--ui-menu-max-height",
-      "default": "calc(#{t.$unit} * 40"
+      "default": "calc(var(--ui-unit) * 40)",
+      "description": "Maximum height"
     },
     {
       "name": "--ui-menu-padding",
-      "default": "calc(#{t.$unit} * 1"
+      "default": "calc(var(--ui-unit) * 1)",
+      "description": "Padding on all sides"
     },
     {
       "name": "--ui-menu-radius",
-      "default": "var(--ui-radius-md)"
+      "default": "var(--ui-radius-md)",
+      "description": "Corner radius"
     },
     {
       "name": "--ui-menu-bg",
-      "default": "var(--ui-color-bg)"
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
     },
     {
       "name": "--ui-menu-border-color",
-      "default": "var(--ui-color-border)"
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
     },
     {
       "name": "--ui-menu-shadow",
-      "default": "var(--shadow-lg)"
+      "default": "var(--ui-shadow-lg)",
+      "description": "Box shadow"
     },
     {
       "name": "--ui-menu-item-padding",
-      "default": "calc(#{t.$unit} * 1"
+      "default": "calc(var(--ui-unit) * 1) calc(var(--ui-unit) * 2)",
+      "description": "Item padding on all sides"
     },
     {
       "name": "--ui-menu-item-radius",
-      "default": "var(--ui-radius-sm)"
+      "default": "var(--ui-radius-sm)",
+      "description": "Item corner radius"
     },
     {
       "name": "--ui-menu-item-bg-hover",
-      "default": "var(--ui-color-bg-subtle)"
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Item bg hover"
     }
   ]
 }