@teseor/css 1.7.0 → 1.9.0

package/src/{04-components → components}/forms/textarea/textarea.docs.json

@@ -9,7 +9,13 @@
       "title": "Default",
       "examples": [
         {
-          "html": "<textarea class=\"ui-textarea\" placeholder=\"Enter your message...\"></textarea>"
+          "items": [
+            {
+              "tag": "textarea",
+              "class": "ui-textarea",
+              "attrs": { "placeholder": "Enter your message..." }
+            }
+          ]
         }
       ]
     },
@@ -17,7 +23,7 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "textarea",
@@ -43,7 +49,7 @@
       "title": "Variants",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "textarea",
@@ -69,7 +75,7 @@
       "title": "States",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "textarea",
@@ -103,7 +109,7 @@
       "api": "./textarea.api.json",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "textarea",
@@ -129,17 +135,17 @@
   "customization": [
     {
       "token": "--ui-textarea-min-height",
-      "default": "calc(var(--row) * 4)",
+      "default": "calc(var(--ui-row) * 4)",
       "description": "Default minimum height"
     },
     {
       "token": "--ui-textarea-min-height-sm",
-      "default": "calc(var(--row) * 3)",
+      "default": "calc(var(--ui-row) * 3)",
       "description": "Small minimum height"
     },
     {
       "token": "--ui-textarea-min-height-lg",
-      "default": "calc(var(--row) * 6)",
+      "default": "calc(var(--ui-row) * 6)",
       "description": "Large minimum height"
     },
     {
@@ -178,7 +184,7 @@
       "description": "Focus border color"
     },
     {
-      "token": "--ui-textarea-text",
+      "token": "--ui-textarea-color",
       "default": "var(--ui-color-text)",
       "description": "Text color"
     },

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

@@ -1,17 +1,29 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component toggle
 // @element div
 
 @layer components.tokens {
   .toggle {
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, ease);
+    --_color-focus: var(--ui-color-focus, var(--ui-color-primary));
+    --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
+    // @desc Track width
     --_track-width: var(--ui-toggle-track-width, calc(#{t.$unit} * 5));
+    // @desc Track height
     --_track-height: var(--ui-toggle-track-height, calc(#{t.$unit} * 3));
-    --_track-bg: var(--ui-toggle-track-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));
+    // @desc Track background
+    --_track-bg: var(--ui-toggle-track-bg, var(--ui-color-bg-subtle, #{t.$overlay-bg-subtle}));
+    // @desc Track bg checked
     --_track-bg-checked: var(--ui-toggle-track-bg-checked, var(--ui-color-primary));
+    // @desc Track corner radius
     --_track-radius: var(--ui-toggle-track-radius, calc(#{t.$unit} * 1.5));
+    // @desc Thumb control size
     --_thumb-size: var(--ui-toggle-thumb-size, calc(#{t.$unit} * 2.5));
-    --_thumb-bg: var(--ui-toggle-thumb-bg, white);
+    // @desc Thumb background
+    --_thumb-bg: var(--ui-toggle-thumb-bg, var(--ui-color-bg, #{t.$color-bg}));
+    // @desc Thumb control offset from anchor
     --_thumb-offset: var(--ui-toggle-thumb-offset, calc(#{t.$unit} / 4));
   }
 
@@ -46,7 +58,7 @@
     border-radius: var(--_track-radius);
     cursor: pointer;
 
-    transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+    transition: background var(--_duration-fast) var(--_ease-default);
   }
 
   // Hidden checkbox input
@@ -70,7 +82,7 @@
     background: var(--_track-bg);
     border-radius: var(--_track-radius);
 
-    transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+    transition: background var(--_duration-fast) var(--_ease-default);
   }
 
   // Thumb (sliding indicator)
@@ -86,7 +98,7 @@
     border-radius: 50%;
     box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
 
-    transition: transform var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+    transition: transform var(--_duration-fast) var(--_ease-default);
   }
 
   // Checked state
@@ -100,14 +112,14 @@
 
   // Focus state
   .toggle__input:focus-visible ~ .toggle__track {
-    outline: 2px solid var(--ui-color-focus, var(--ui-color-primary));
+    outline: 2px solid var(--_color-focus);
     outline-offset: calc(#{t.$unit} / 4);
   }
 
   // Disabled state
   .toggle__input:disabled ~ .toggle__track,
   .toggle__input:disabled ~ .toggle__thumb {
-    opacity: 0.5;
+    opacity: var(--_opacity-disabled);
     cursor: not-allowed;
   }
 

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

@@ -0,0 +1,57 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "toggle",
+  "element": "div",
+  "modifiers": {
+    "size": {
+      "values": ["sm", "lg"]
+    }
+  },
+  "elements": {
+    "input": {},
+    "track": {},
+    "thumb": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-toggle-track-width",
+      "default": "calc(var(--ui-unit) * 5)",
+      "description": "Track width"
+    },
+    {
+      "name": "--ui-toggle-track-height",
+      "default": "calc(var(--ui-unit) * 3)",
+      "description": "Track height"
+    },
+    {
+      "name": "--ui-toggle-track-bg",
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Track background"
+    },
+    {
+      "name": "--ui-toggle-track-bg-checked",
+      "default": "var(--ui-color-primary)",
+      "description": "Track bg checked"
+    },
+    {
+      "name": "--ui-toggle-track-radius",
+      "default": "calc(var(--ui-unit) * 1.5)",
+      "description": "Track corner radius"
+    },
+    {
+      "name": "--ui-toggle-thumb-size",
+      "default": "calc(var(--ui-unit) * 2.5)",
+      "description": "Thumb control size"
+    },
+    {
+      "name": "--ui-toggle-thumb-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Thumb background"
+    },
+    {
+      "name": "--ui-toggle-thumb-offset",
+      "default": "calc(var(--ui-unit) / 4)",
+      "description": "Thumb control offset from anchor"
+    }
+  ]
+}

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/components/navigation/breadcrumb/breadcrumb.api.json

@@ -0,0 +1,50 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "breadcrumb",
+  "element": "div",
+  "modifiers": {},
+  "elements": {
+    "item": {
+      "modifiers": {
+        "hidden": {
+          "type": "boolean"
+        }
+      }
+    },
+    "link": {},
+    "current": {},
+    "ellipsis": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-breadcrumb-separator",
+      "default": "\"/\"",
+      "description": "Separator"
+    },
+    {
+      "name": "--ui-breadcrumb-height",
+      "default": "var(--ui-row-1)",
+      "description": "Overall height"
+    },
+    {
+      "name": "--ui-breadcrumb-gap",
+      "default": "calc(var(--ui-unit) * 1)",
+      "description": "Gap between children"
+    },
+    {
+      "name": "--ui-breadcrumb-separator-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Separator text color"
+    },
+    {
+      "name": "--ui-breadcrumb-link-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Link text color"
+    },
+    {
+      "name": "--ui-breadcrumb-current-color",
+      "default": "var(--ui-color-text)",
+      "description": "Current color"
+    }
+  ]
+}