@teseor/css 1.7.0 → 1.8.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,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component nav
 // @element nav
@@ -82,7 +82,7 @@
     }
 
     &--disabled {
-      opacity: 0.5;
+      opacity: var(--ui-opacity-disabled, 0.5);
       pointer-events: none;
     }
   }

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

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Pagination - page navigation
 // Navigation through paginated content
@@ -75,7 +75,7 @@
   // Disabled state
   .pagination__link[aria-disabled="true"],
   .pagination__link--disabled {
-    opacity: 0.5;
+    opacity: var(--ui-opacity-disabled, 0.5);
     pointer-events: none;
   }
 

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

@@ -26,11 +26,11 @@
   "cssVars": [
     {
       "name": "--ui-pagination-gap",
-      "default": "calc(#{t.$unit} * 0.5"
+      "default": "calc(var(--ui-unit) * 0.5"
     },
     {
       "name": "--ui-pagination-item-size",
-      "default": "calc(#{t.$unit} * 4"
+      "default": "calc(var(--ui-unit) * 4"
     },
     {
       "name": "--ui-pagination-item-radius",