@teseor/css 1.7.0 → 1.8.0

package/src/components/forms/toggle/toggle.docs.json

@@ -0,0 +1,229 @@
+{
+  "id": "toggle",
+  "type": "component",
+  "title": "Toggle",
+  "description": "Switch control for boolean states. Uses checkbox semantics with role=switch for accessibility.",
+  "api": "./toggle.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "label",
+              "class": "ui-toggle",
+              "children": [
+                {
+                  "tag": "input",
+                  "class": "ui-toggle__input",
+                  "attrs": { "type": "checkbox", "role": "switch" }
+                },
+                { "tag": "span", "class": "ui-toggle__track" },
+                { "tag": "span", "class": "ui-toggle__thumb" }
+              ]
+            }
+          ],
+          "code": "<label class=\"ui-toggle\">\n  <input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\">\n  <span class=\"ui-toggle__track\"></span>\n  <span class=\"ui-toggle__thumb\"></span>\n</label>"
+        }
+      ]
+    },
+    {
+      "title": "Checked",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "label",
+              "class": "ui-toggle",
+              "children": [
+                {
+                  "tag": "input",
+                  "class": "ui-toggle__input",
+                  "attrs": { "type": "checkbox", "role": "switch", "checked": "" }
+                },
+                { "tag": "span", "class": "ui-toggle__track" },
+                { "tag": "span", "class": "ui-toggle__thumb" }
+              ]
+            }
+          ],
+          "code": "<label class=\"ui-toggle\">\n  <input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\" checked>\n  ...\n</label>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": { "style": "display: flex; gap: var(--ui-space-2); align-items: center;" },
+              "children": [
+                {
+                  "tag": "label",
+                  "class": "ui-toggle ui-toggle--sm",
+                  "children": [
+                    {
+                      "tag": "input",
+                      "class": "ui-toggle__input",
+                      "attrs": { "type": "checkbox", "role": "switch" }
+                    },
+                    { "tag": "span", "class": "ui-toggle__track" },
+                    { "tag": "span", "class": "ui-toggle__thumb" }
+                  ]
+                },
+                {
+                  "tag": "label",
+                  "class": "ui-toggle",
+                  "children": [
+                    {
+                      "tag": "input",
+                      "class": "ui-toggle__input",
+                      "attrs": { "type": "checkbox", "role": "switch", "checked": "" }
+                    },
+                    { "tag": "span", "class": "ui-toggle__track" },
+                    { "tag": "span", "class": "ui-toggle__thumb" }
+                  ]
+                },
+                {
+                  "tag": "label",
+                  "class": "ui-toggle ui-toggle--lg",
+                  "children": [
+                    {
+                      "tag": "input",
+                      "class": "ui-toggle__input",
+                      "attrs": { "type": "checkbox", "role": "switch" }
+                    },
+                    { "tag": "span", "class": "ui-toggle__track" },
+                    { "tag": "span", "class": "ui-toggle__thumb" }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<label class=\"ui-toggle ui-toggle--sm\">...</label>\n<label class=\"ui-toggle\">...</label>\n<label class=\"ui-toggle ui-toggle--lg\">...</label>"
+        }
+      ]
+    },
+    {
+      "title": "Disabled",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": { "style": "display: flex; gap: var(--ui-space-2);" },
+              "children": [
+                {
+                  "tag": "label",
+                  "class": "ui-toggle",
+                  "children": [
+                    {
+                      "tag": "input",
+                      "class": "ui-toggle__input",
+                      "attrs": { "type": "checkbox", "role": "switch", "disabled": "" }
+                    },
+                    { "tag": "span", "class": "ui-toggle__track" },
+                    { "tag": "span", "class": "ui-toggle__thumb" }
+                  ]
+                },
+                {
+                  "tag": "label",
+                  "class": "ui-toggle",
+                  "children": [
+                    {
+                      "tag": "input",
+                      "class": "ui-toggle__input",
+                      "attrs": {
+                        "type": "checkbox",
+                        "role": "switch",
+                        "checked": "",
+                        "disabled": ""
+                      }
+                    },
+                    { "tag": "span", "class": "ui-toggle__track" },
+                    { "tag": "span", "class": "ui-toggle__thumb" }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<label class=\"ui-toggle\">\n  <input type=\"checkbox\" ... disabled>\n  ...\n</label>"
+        }
+      ]
+    },
+    {
+      "title": "With Label",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": { "style": "display: flex; align-items: center; gap: var(--ui-space-2);" },
+              "children": [
+                {
+                  "tag": "label",
+                  "class": "ui-toggle",
+                  "children": [
+                    {
+                      "tag": "input",
+                      "class": "ui-toggle__input",
+                      "attrs": { "type": "checkbox", "role": "switch", "id": "notifications" }
+                    },
+                    { "tag": "span", "class": "ui-toggle__track" },
+                    { "tag": "span", "class": "ui-toggle__thumb" }
+                  ]
+                },
+                {
+                  "tag": "label",
+                  "attrs": { "for": "notifications" },
+                  "text": "Enable notifications"
+                }
+              ]
+            }
+          ],
+          "code": "<div style=\"display: flex; align-items: center; gap: var(--ui-space-2);\">\n  <label class=\"ui-toggle\">\n    <input type=\"checkbox\" ... id=\"notifications\">\n    ...\n  </label>\n  <label for=\"notifications\">Enable notifications</label>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-toggle-track-width",
+      "default": "calc(var(--ui-unit) * 5)",
+      "description": "Track width"
+    },
+    {
+      "token": "--ui-toggle-track-height",
+      "default": "calc(var(--ui-unit) * 3)",
+      "description": "Track height"
+    },
+    {
+      "token": "--ui-toggle-track-bg",
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Track background (unchecked)"
+    },
+    {
+      "token": "--ui-toggle-track-bg-checked",
+      "default": "var(--ui-color-primary)",
+      "description": "Track background (checked)"
+    },
+    {
+      "token": "--ui-toggle-track-radius",
+      "default": "calc(var(--ui-unit) * 1.5)",
+      "description": "Track border radius"
+    },
+    {
+      "token": "--ui-toggle-thumb-size",
+      "default": "calc(var(--ui-unit) * 2.5)",
+      "description": "Thumb size"
+    },
+    { "token": "--ui-toggle-thumb-bg", "default": "white", "description": "Thumb background" },
+    {
+      "token": "--ui-toggle-thumb-offset",
+      "default": "calc(var(--ui-unit) / 4)",
+      "description": "Thumb offset from edge"
+    }
+  ]
+}

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

@@ -1,6 +1,9 @@
 @forward './actions/button/index';
 @forward './actions/button-group/index';
 @forward './actions/close-button/index';
+@forward './content/divider/index';
+@forward './content/scroll-area/index';
+@forward './content/spacer/index';
 @forward './data-display/avatar/index';
 @forward './data-display/badge/index';
 @forward './data-display/card/index';
@@ -37,9 +40,6 @@
 @forward './forms/slider/index';
 @forward './forms/textarea/index';
 @forward './forms/toggle/index';
-@forward './layout/divider/index';
-@forward './layout/scroll-area/index';
-@forward './layout/spacer/index';
 @forward './navigation/breadcrumb/index';
 @forward './navigation/dropdown-menu/index';
 @forward './navigation/menu/index';

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

@@ -14,7 +14,7 @@
     },
     {
       "name": "--ui-breadcrumb-gap",
-      "default": "calc(#{t.$unit} * 1"
+      "default": "calc(var(--ui-unit) * 1"
     },
     {
       "name": "--ui-breadcrumb-separator-color",

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,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Breadcrumb - navigation hierarchy
 // Shows current page location in site structure

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

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

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Menu - action menu
 // Dropdown list of actions or options
@@ -11,7 +11,7 @@
     --_radius: var(--ui-menu-radius, var(--ui-radius-md, #{t.$radius-md}));
     --_bg: var(--ui-menu-bg, var(--ui-color-bg, #{t.$color-bg}));
     --_border-color: var(--ui-menu-border-color, var(--ui-color-border, #{t.$color-border}));
-    --_shadow: var(--ui-menu-shadow, var(--shadow-lg));
+    --_shadow: var(--ui-menu-shadow, var(--ui-shadow-lg));
     --_item-padding: var(--ui-menu-item-padding, calc(#{t.$unit} * 1) calc(#{t.$unit} * 2));
     --_item-radius: var(--ui-menu-item-radius, var(--ui-radius-sm, #{t.$radius-sm}));
     --_item-bg-hover: var(--ui-menu-item-bg-hover, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
@@ -87,7 +87,7 @@
 
   .menu__item--disabled,
   .menu__item[aria-disabled="true"] {
-    opacity: 0.5;
+    opacity: var(--ui-opacity-disabled, 0.5);
     pointer-events: none;
   }
 

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

@@ -29,15 +29,15 @@
   "cssVars": [
     {
       "name": "--ui-menu-min-width",
-      "default": "calc(#{t.$unit} * 16"
+      "default": "calc(var(--ui-unit) * 16"
     },
     {
       "name": "--ui-menu-max-height",
-      "default": "calc(#{t.$unit} * 40"
+      "default": "calc(var(--ui-unit) * 40"
     },
     {
       "name": "--ui-menu-padding",
-      "default": "calc(#{t.$unit} * 1"
+      "default": "calc(var(--ui-unit) * 1"
     },
     {
       "name": "--ui-menu-radius",
@@ -57,7 +57,7 @@
     },
     {
       "name": "--ui-menu-item-padding",
-      "default": "calc(#{t.$unit} * 1"
+      "default": "calc(var(--ui-unit) * 1"
     },
     {
       "name": "--ui-menu-item-radius",