@teseor/css 1.7.0 → 1.9.0

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

@@ -0,0 +1,326 @@
+{
+  "id": "menu",
+  "type": "component",
+  "title": "Menu",
+  "api": "./menu.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-menu",
+              "children": [
+                {
+                  "tag": "ul",
+                  "class": "ui-menu__group",
+                  "children": [
+                    {
+                      "tag": "li",
+                      "children": [{ "tag": "button", "class": "ui-menu__item", "text": "Edit" }]
+                    },
+                    {
+                      "tag": "li",
+                      "children": [
+                        { "tag": "button", "class": "ui-menu__item", "text": "Duplicate" }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "children": [{ "tag": "button", "class": "ui-menu__item", "text": "Archive" }]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "With Icons and Shortcuts",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-menu",
+              "children": [
+                {
+                  "tag": "ul",
+                  "class": "ui-menu__group",
+                  "children": [
+                    {
+                      "tag": "li",
+                      "children": [
+                        {
+                          "tag": "button",
+                          "class": "ui-menu__item",
+                          "children": [
+                            { "tag": "span", "class": "ui-menu__item-icon", "text": "+" },
+                            { "text": "New File" },
+                            { "tag": "span", "class": "ui-menu__item-shortcut", "text": "Cmd+N" }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "children": [
+                        {
+                          "tag": "button",
+                          "class": "ui-menu__item",
+                          "children": [
+                            { "tag": "span", "class": "ui-menu__item-icon", "text": "O" },
+                            { "text": "Open" },
+                            { "tag": "span", "class": "ui-menu__item-shortcut", "text": "Cmd+O" }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "children": [
+                        {
+                          "tag": "button",
+                          "class": "ui-menu__item",
+                          "children": [
+                            { "tag": "span", "class": "ui-menu__item-icon", "text": "S" },
+                            { "text": "Save" },
+                            { "tag": "span", "class": "ui-menu__item-shortcut", "text": "Cmd+S" }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Groups with Labels",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-menu",
+              "children": [
+                { "tag": "div", "class": "ui-menu__label", "text": "Edit" },
+                {
+                  "tag": "ul",
+                  "class": "ui-menu__group",
+                  "children": [
+                    {
+                      "tag": "li",
+                      "children": [{ "tag": "button", "class": "ui-menu__item", "text": "Cut" }]
+                    },
+                    {
+                      "tag": "li",
+                      "children": [{ "tag": "button", "class": "ui-menu__item", "text": "Copy" }]
+                    },
+                    {
+                      "tag": "li",
+                      "children": [{ "tag": "button", "class": "ui-menu__item", "text": "Paste" }]
+                    }
+                  ]
+                },
+                { "tag": "div", "class": "ui-menu__separator" },
+                { "tag": "div", "class": "ui-menu__label", "text": "View" },
+                {
+                  "tag": "ul",
+                  "class": "ui-menu__group",
+                  "children": [
+                    {
+                      "tag": "li",
+                      "children": [{ "tag": "button", "class": "ui-menu__item", "text": "Zoom In" }]
+                    },
+                    {
+                      "tag": "li",
+                      "children": [
+                        { "tag": "button", "class": "ui-menu__item", "text": "Zoom Out" }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "States",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-menu",
+              "children": [
+                {
+                  "tag": "ul",
+                  "class": "ui-menu__group",
+                  "children": [
+                    {
+                      "tag": "li",
+                      "children": [
+                        { "tag": "button", "class": "ui-menu__item", "text": "Normal Item" }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "children": [
+                        {
+                          "tag": "button",
+                          "class": "ui-menu__item ui-menu__item--disabled",
+                          "attrs": { "aria-disabled": "true" },
+                          "text": "Disabled Item"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "children": [
+                        {
+                          "tag": "button",
+                          "class": "ui-menu__item ui-menu__item--danger",
+                          "text": "Delete"
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Checkable Items",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-menu",
+              "children": [
+                {
+                  "tag": "ul",
+                  "class": "ui-menu__group",
+                  "children": [
+                    {
+                      "tag": "li",
+                      "children": [
+                        {
+                          "tag": "button",
+                          "class": "ui-menu__item ui-menu__item--check",
+                          "children": [
+                            { "tag": "span", "class": "ui-menu__item-indicator", "text": "\u2713" },
+                            { "text": "Show Toolbar" }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "children": [
+                        {
+                          "tag": "button",
+                          "class": "ui-menu__item ui-menu__item--check",
+                          "children": [
+                            { "tag": "span", "class": "ui-menu__item-indicator" },
+                            { "text": "Show Sidebar" }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                },
+                { "tag": "div", "class": "ui-menu__separator" },
+                {
+                  "tag": "ul",
+                  "class": "ui-menu__group",
+                  "children": [
+                    {
+                      "tag": "li",
+                      "children": [
+                        {
+                          "tag": "button",
+                          "class": "ui-menu__item ui-menu__item--radio",
+                          "children": [
+                            { "tag": "span", "class": "ui-menu__item-indicator", "text": "\u2022" },
+                            { "text": "List View" }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "children": [
+                        {
+                          "tag": "button",
+                          "class": "ui-menu__item ui-menu__item--radio",
+                          "children": [
+                            { "tag": "span", "class": "ui-menu__item-indicator" },
+                            { "text": "Grid View" }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-menu-min-width",
+      "default": "calc(var(--ui-unit) * 16)",
+      "description": "Minimum width"
+    },
+    {
+      "token": "--ui-menu-max-height",
+      "default": "calc(var(--ui-unit) * 40)",
+      "description": "Maximum height"
+    },
+    {
+      "token": "--ui-menu-padding",
+      "default": "var(--ui-unit)",
+      "description": "Container padding"
+    },
+    {
+      "token": "--ui-menu-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Border radius"
+    },
+    { "token": "--ui-menu-bg", "default": "var(--ui-color-bg)", "description": "Background color" },
+    {
+      "token": "--ui-menu-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
+    },
+    { "token": "--ui-menu-shadow", "default": "var(--shadow-lg)", "description": "Box shadow" },
+    { "token": "--ui-menu-item-padding", "default": "8px 16px", "description": "Item padding" },
+    {
+      "token": "--ui-menu-item-radius",
+      "default": "var(--ui-radius-sm)",
+      "description": "Item border radius"
+    },
+    {
+      "token": "--ui-menu-item-bg-hover",
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Item hover background"
+    }
+  ]
+}

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

@@ -1,26 +1,45 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component nav
 // @element nav
 
 @layer components.tokens {
   .nav {
+    --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
+    --_font-sans: var(--ui-font-sans, #{t.$font-sans});
+    --_border-width-md: var(--ui-border-width-md, #{t.$border-width-md});
+    --_duration-base: var(--ui-duration-base);
+    --_ease-default: var(--ui-ease-default);
+    --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
+    // @desc Gap between children
     --_gap: var(--ui-nav-gap, var(--ui-space-1, #{t.$space-1}));
+    // @desc Item overall height
     --_item-height: var(--ui-nav-item-height, var(--ui-row-2, #{t.$row-2}));
+    // @desc Item horizontal padding
     --_item-padding-x: var(--ui-nav-item-padding-x, var(--ui-space-2, #{t.$space-2}));
+    // @desc Item font size
     --_item-font-size: var(--ui-nav-item-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Item font weight
     --_item-font-weight: var(--ui-nav-item-font-weight, var(--ui-weight-medium, #{t.$weight-medium}));
+    // @desc Item text color
     --_item-color: var(--ui-nav-item-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    // @desc Item color hover
     --_item-color-hover: var(--ui-nav-item-color-hover, var(--ui-color-text, #{t.$color-text}));
+    // @desc Item color active
     --_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-primary, #{t.$color-primary}));
+    // @desc Item corner radius
     --_item-radius: var(--ui-nav-item-radius, var(--ui-radius-sm, #{t.$radius-sm}));
+    // @desc Border color
     --_border-color: var(--ui-nav-border-color, var(--ui-color-border, #{t.$color-border}));
   }
 
   // @modifier pills
   .nav--pills {
+    // @desc Item bg hover
     --_item-bg-hover: var(--ui-nav-item-bg-hover, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    // @desc Item bg active
     --_item-bg-active: var(--ui-nav-item-bg-active, var(--ui-color-primary, #{t.$color-primary}));
+    // @desc Item color active
     --_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
   }
 
@@ -41,7 +60,7 @@
     list-style: none;
 
     // Bottom border via box-shadow to avoid height impact
-    box-shadow: inset 0 calc(var(--ui-border-width-sm, #{t.$border-width-sm}) * -1) 0 var(--_border-color);
+    box-shadow: inset 0 calc(var(--_border-width-sm) * -1) 0 var(--_border-color);
   }
 
   .nav__item {
@@ -52,7 +71,7 @@
     block-size: var(--_item-height);
     padding-inline: var(--_item-padding-x);
 
-    font-family: var(--ui-font-sans, #{t.$font-sans});
+    font-family: var(--_font-sans);
     font-size: var(--_item-font-size);
     font-weight: var(--_item-font-weight);
     line-height: 1;
@@ -63,13 +82,13 @@
     background: transparent;
     border: none;
     // Underline indicator via box-shadow
-    box-shadow: inset 0 calc(var(--ui-border-width-md, #{t.$border-width-md}) * -1) 0 transparent;
+    box-shadow: inset 0 calc(var(--_border-width-md) * -1) 0 transparent;
     cursor: pointer;
 
     transition:
-      color var(--ui-duration-base) var(--ui-ease-default),
-      background var(--ui-duration-base) var(--ui-ease-default),
-      box-shadow var(--ui-duration-base) var(--ui-ease-default);
+      color var(--_duration-base) var(--_ease-default),
+      background var(--_duration-base) var(--_ease-default),
+      box-shadow var(--_duration-base) var(--_ease-default);
 
     &:hover {
       color: var(--_item-color-hover);
@@ -78,11 +97,11 @@
     &--active {
       color: var(--_item-color-active);
 
-      box-shadow: inset 0 calc(var(--ui-border-width-md, #{t.$border-width-md}) * -1) 0 var(--_item-color-active);
+      box-shadow: inset 0 calc(var(--_border-width-md) * -1) 0 var(--_item-color-active);
     }
 
     &--disabled {
-      opacity: 0.5;
+      opacity: var(--_opacity-disabled);
       pointer-events: none;
     }
   }
@@ -117,14 +136,14 @@
 
       block-size: auto;
 
-      box-shadow: inset calc(var(--ui-border-width-sm, #{t.$border-width-sm}) * -1) 0 0 var(--_border-color);
+      box-shadow: inset calc(var(--_border-width-sm) * -1) 0 0 var(--_border-color);
     }
 
     .nav__item {
-      box-shadow: inset calc(var(--ui-border-width-md, #{t.$border-width-md}) * -1) 0 0 transparent;
+      box-shadow: inset calc(var(--_border-width-md) * -1) 0 0 transparent;
 
       &--active {
-        box-shadow: inset calc(var(--ui-border-width-md, #{t.$border-width-md}) * -1) 0 0 var(--_item-color-active);
+        box-shadow: inset calc(var(--_border-width-md) * -1) 0 0 var(--_item-color-active);
       }
     }
   }

package/src/components/navigation/nav/nav.api.json

@@ -0,0 +1,79 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "nav",
+  "element": "nav",
+  "modifiers": {
+    "pills": {
+      "values": ["pills"]
+    },
+    "vertical": {
+      "type": "boolean"
+    }
+  },
+  "elements": {
+    "list": {},
+    "item": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-nav-gap",
+      "default": "var(--ui-space-1)",
+      "description": "Gap between children"
+    },
+    {
+      "name": "--ui-nav-item-height",
+      "default": "var(--ui-row-2)",
+      "description": "Item overall height"
+    },
+    {
+      "name": "--ui-nav-item-padding-x",
+      "default": "var(--ui-space-2)",
+      "description": "Item horizontal padding"
+    },
+    {
+      "name": "--ui-nav-item-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Item font size"
+    },
+    {
+      "name": "--ui-nav-item-font-weight",
+      "default": "var(--ui-weight-medium)",
+      "description": "Item font weight"
+    },
+    {
+      "name": "--ui-nav-item-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Item text color"
+    },
+    {
+      "name": "--ui-nav-item-color-hover",
+      "default": "var(--ui-color-text)",
+      "description": "Item color hover"
+    },
+    {
+      "name": "--ui-nav-item-color-active",
+      "default": "var(--ui-color-primary)",
+      "description": "Item color active"
+    },
+    {
+      "name": "--ui-nav-item-radius",
+      "default": "var(--ui-radius-sm)",
+      "description": "Item corner radius"
+    },
+    {
+      "name": "--ui-nav-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
+    },
+    {
+      "name": "--ui-nav-item-bg-hover",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Item bg hover"
+    },
+    {
+      "name": "--ui-nav-item-bg-active",
+      "default": "var(--ui-color-primary)",
+      "description": "Item bg active"
+    }
+  ]
+}

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

@@ -1,17 +1,32 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
+// @component pagination
+// @element div
 
 // Pagination - page navigation
 // Navigation through paginated content
 
 @layer components.tokens {
   .pagination {
+    --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, ease);
+    --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
+    --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});
+    // @desc Gap between children
     --_gap: var(--ui-pagination-gap, calc(#{t.$unit} * 0.5));
+    // @desc Item overall size
     --_item-size: var(--ui-pagination-item-size, calc(#{t.$unit} * 4));
+    // @desc Item corner radius
     --_item-radius: var(--ui-pagination-item-radius, var(--ui-radius-sm, #{t.$radius-sm}));
+    // @desc Item background color
     --_item-bg: var(--ui-pagination-item-bg, transparent);
+    // @desc Item bg hover
     --_item-bg-hover: var(--ui-pagination-item-bg-hover, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+    // @desc Item bg active
     --_item-bg-active: var(--ui-pagination-item-bg-active, var(--ui-color-primary));
+    // @desc Item text color
     --_item-color: var(--ui-pagination-item-color, var(--ui-color-text, #{t.$color-text}));
+    // @desc Item color active
     --_item-color-active: var(--ui-pagination-item-color-active, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
   }
 }
@@ -47,7 +62,7 @@
     min-inline-size: var(--_item-size);
     padding-inline: calc(#{t.$unit} * 1);
 
-    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
+    font-size: var(--_font-size-sm);
     text-decoration: none;
     color: var(--_item-color);
 
@@ -55,8 +70,8 @@
     border-radius: var(--_item-radius);
 
     transition:
-      background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease),
-      color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+      background var(--_duration-fast) var(--_ease-default),
+      color var(--_duration-fast) var(--_ease-default);
 
     &:hover {
       background: var(--_item-bg-hover);
@@ -75,7 +90,7 @@
   // Disabled state
   .pagination__link[aria-disabled="true"],
   .pagination__link--disabled {
-    opacity: 0.5;
+    opacity: var(--_opacity-disabled);
     pointer-events: none;
   }
 
@@ -98,10 +113,11 @@
     block-size: var(--_item-size);
     min-inline-size: var(--_item-size);
 
-    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+    color: var(--_color-text-muted);
   }
 
   // Size variants
+  // @modifier size
   .pagination--sm {
     --_item-size: calc(#{t.$unit} * 3);
     --_gap: calc(#{t.$unit} * 0.25);

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

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "pagination",
   "element": "div",
   "modifiers": {
@@ -7,11 +8,8 @@
     }
   },
   "elements": {
-    "prev": {},
-    "next": {},
     "list": {},
     "item": {},
-    "ellipsis": {},
     "link": {
       "modifiers": {
         "active": {
@@ -21,40 +19,51 @@
           "type": "boolean"
         }
       }
-    }
+    },
+    "prev": {},
+    "next": {},
+    "ellipsis": {}
   },
   "cssVars": [
     {
       "name": "--ui-pagination-gap",
-      "default": "calc(#{t.$unit} * 0.5"
+      "default": "calc(var(--ui-unit) * 0.5)",
+      "description": "Gap between children"
     },
     {
       "name": "--ui-pagination-item-size",
-      "default": "calc(#{t.$unit} * 4"
+      "default": "calc(var(--ui-unit) * 4)",
+      "description": "Item overall size"
     },
     {
       "name": "--ui-pagination-item-radius",
-      "default": "var(--ui-radius-sm)"
+      "default": "var(--ui-radius-sm)",
+      "description": "Item corner radius"
     },
     {
       "name": "--ui-pagination-item-bg",
-      "default": "transparent"
+      "default": "transparent",
+      "description": "Item background color"
     },
     {
       "name": "--ui-pagination-item-bg-hover",
-      "default": "var(--ui-color-bg-subtle)"
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Item bg hover"
     },
     {
       "name": "--ui-pagination-item-bg-active",
-      "default": "var(--ui-color-primary)"
+      "default": "var(--ui-color-primary)",
+      "description": "Item bg active"
     },
     {
       "name": "--ui-pagination-item-color",
-      "default": "var(--ui-color-text)"
+      "default": "var(--ui-color-text)",
+      "description": "Item text color"
     },
     {
       "name": "--ui-pagination-item-color-active",
-      "default": "var(--ui-color-text-inverse)"
+      "default": "var(--ui-color-text-inverse)",
+      "description": "Item color active"
     }
   ]
 }