@teseor/css 1.6.0 → 1.8.0

package/src/04-components/feedback/progress/progress.docs.json

@@ -1,87 +0,0 @@
-{
-  "id": "progress",
-  "type": "component",
-  "title": "Progress",
-  "description": "Progress bar indicator showing completion status. Use aria-valuenow for accessibility.",
-  "api": "./progress.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<div class=\"ui-progress\" role=\"progressbar\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Loading\"><div class=\"ui-progress__bar\" style=\"width: 60%;\"></div></div>",
-          "code": "<div class=\"ui-progress\" role=\"progressbar\"\n     aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n  <div class=\"ui-progress__bar\" style=\"width: 60%;\"></div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "html": "<div style=\"display: flex; flex-direction: column; gap: var(--ui-space-2);\"><div class=\"ui-progress ui-progress--sm\" role=\"progressbar\" aria-valuenow=\"40\" aria-valuemin=\"0\" aria-valuemax=\"100\"><div class=\"ui-progress__bar\" style=\"width: 40%;\"></div></div><div class=\"ui-progress\" role=\"progressbar\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\"><div class=\"ui-progress__bar\" style=\"width: 60%;\"></div></div><div class=\"ui-progress ui-progress--lg\" role=\"progressbar\" aria-valuenow=\"80\" aria-valuemin=\"0\" aria-valuemax=\"100\"><div class=\"ui-progress__bar\" style=\"width: 80%;\"></div></div></div>",
-          "code": "<div class=\"ui-progress ui-progress--sm\">...</div>\n<div class=\"ui-progress\">...</div>\n<div class=\"ui-progress ui-progress--lg\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Colors",
-      "examples": [
-        {
-          "html": "<div style=\"display: flex; flex-direction: column; gap: var(--ui-space-2);\"><div class=\"ui-progress ui-progress--success\" role=\"progressbar\" aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\"><div class=\"ui-progress__bar\" style=\"width: 100%;\"></div></div><div class=\"ui-progress ui-progress--warning\" role=\"progressbar\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\"><div class=\"ui-progress__bar\" style=\"width: 60%;\"></div></div><div class=\"ui-progress ui-progress--danger\" role=\"progressbar\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\"><div class=\"ui-progress__bar\" style=\"width: 25%;\"></div></div></div>",
-          "code": "<div class=\"ui-progress ui-progress--success\">...</div>\n<div class=\"ui-progress ui-progress--warning\">...</div>\n<div class=\"ui-progress ui-progress--danger\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Striped",
-      "examples": [
-        {
-          "html": "<div class=\"ui-progress ui-progress--striped\" role=\"progressbar\" aria-valuenow=\"70\" aria-valuemin=\"0\" aria-valuemax=\"100\"><div class=\"ui-progress__bar\" style=\"width: 70%;\"></div></div>",
-          "code": "<div class=\"ui-progress ui-progress--striped\">\n  <div class=\"ui-progress__bar\" style=\"width: 70%;\"></div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Animated Stripes",
-      "examples": [
-        {
-          "html": "<div class=\"ui-progress ui-progress--striped ui-progress--animated\" role=\"progressbar\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\"><div class=\"ui-progress__bar\" style=\"width: 50%;\"></div></div>",
-          "code": "<div class=\"ui-progress ui-progress--striped ui-progress--animated\">\n  <div class=\"ui-progress__bar\" style=\"width: 50%;\"></div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Indeterminate",
-      "description": "For unknown progress duration",
-      "api": "./progress.api.json",
-      "examples": [
-        {
-          "html": "<div class=\"ui-progress ui-progress--indeterminate\" role=\"progressbar\" aria-label=\"Loading\"><div class=\"ui-progress__bar\"></div></div>",
-          "code": "<div class=\"ui-progress ui-progress--indeterminate\"\n     role=\"progressbar\" aria-label=\"Loading\">\n  <div class=\"ui-progress__bar\"></div>\n</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-progress-height",
-      "default": "calc(var(--unit) * 1)",
-      "description": "Bar height"
-    },
-    {
-      "token": "--ui-progress-bg",
-      "default": "var(--ui-color-bg-subtle)",
-      "description": "Track background"
-    },
-    {
-      "token": "--ui-progress-fill",
-      "default": "var(--ui-color-primary)",
-      "description": "Fill color"
-    },
-    {
-      "token": "--ui-progress-radius",
-      "default": "var(--ui-radius-full)",
-      "description": "Border radius"
-    }
-  ]
-}

package/src/04-components/feedback/skeleton/skeleton.docs.json

@@ -1,62 +0,0 @@
-{
-  "id": "skeleton",
-  "type": "component",
-  "title": "Skeleton",
-  "description": "Loading placeholder with shimmer animation for content loading states.",
-  "api": "./skeleton.api.json",
-  "sections": [
-    {
-      "title": "Text Lines",
-      "examples": [
-        {
-          "html": "<div style=\"display: flex; flex-direction: column; gap: var(--ui-space-1);\"><div class=\"ui-skeleton ui-skeleton--text\"></div><div class=\"ui-skeleton ui-skeleton--text\" style=\"width: 80%;\"></div><div class=\"ui-skeleton ui-skeleton--text\" style=\"width: 60%;\"></div></div>",
-          "code": "<div class=\"ui-skeleton ui-skeleton--text\"></div>\n<div class=\"ui-skeleton ui-skeleton--text\" style=\"width: 80%;\"></div>\n<div class=\"ui-skeleton ui-skeleton--text\" style=\"width: 60%;\"></div>"
-        }
-      ]
-    },
-    {
-      "title": "Shapes",
-      "examples": [
-        {
-          "html": "<div style=\"display: flex; gap: var(--ui-space-2); align-items: flex-start;\"><div class=\"ui-skeleton ui-skeleton--circle\"></div><div style=\"flex: 1; display: flex; flex-direction: column; gap: var(--ui-space-1);\"><div class=\"ui-skeleton ui-skeleton--heading\"></div><div class=\"ui-skeleton ui-skeleton--text\"></div></div></div>",
-          "code": "<div class=\"ui-skeleton ui-skeleton--circle\"></div>\n<div class=\"ui-skeleton ui-skeleton--heading\"></div>\n<div class=\"ui-skeleton ui-skeleton--text\"></div>"
-        }
-      ]
-    },
-    {
-      "title": "Card Skeleton",
-      "examples": [
-        {
-          "html": "<div class=\"ui-card\" style=\"width: 300px;\"><div class=\"ui-skeleton ui-skeleton--rect\"></div><div style=\"padding: var(--ui-space-2); display: flex; flex-direction: column; gap: var(--ui-space-1);\"><div class=\"ui-skeleton ui-skeleton--heading\"></div><div class=\"ui-skeleton ui-skeleton--text\"></div><div class=\"ui-skeleton ui-skeleton--text\" style=\"width: 70%;\"></div></div></div>",
-          "code": "<div class=\"ui-card\">\n  <div class=\"ui-skeleton ui-skeleton--rect\"></div>\n  <div class=\"ui-skeleton ui-skeleton--heading\"></div>\n  <div class=\"ui-skeleton ui-skeleton--text\"></div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Pulse Animation",
-      "examples": [
-        {
-          "html": "<div class=\"ui-skeleton ui-skeleton--text ui-skeleton--pulse\"></div>",
-          "code": "<div class=\"ui-skeleton ui-skeleton--text ui-skeleton--pulse\"></div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-skeleton-bg",
-      "default": "var(--ui-color-bg-subtle)",
-      "description": "Background color"
-    },
-    {
-      "token": "--ui-skeleton-shimmer",
-      "default": "rgb(255 255 255 / 0.5)",
-      "description": "Shimmer highlight color"
-    },
-    {
-      "token": "--ui-skeleton-radius",
-      "default": "var(--ui-radius-sm)",
-      "description": "Border radius"
-    }
-  ]
-}

package/src/04-components/feedback/toast/toast.docs.json

@@ -1,99 +0,0 @@
-{
-  "api": "./toast.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<div class=\"ui-toast\"><div class=\"ui-toast__content\"><p class=\"ui-toast__title\">Notification</p><p class=\"ui-toast__description\">Your changes have been saved.</p></div><button class=\"ui-toast__close\">X</button></div>"
-        }
-      ]
-    },
-    {
-      "title": "Variants",
-      "examples": [
-        {
-          "html": "<div class=\"ui-toast ui-toast--success\"><div class=\"ui-toast__content\"><p class=\"ui-toast__title\">Success</p><p class=\"ui-toast__description\">Operation completed successfully.</p></div></div>",
-          "layout": "stack"
-        },
-        {
-          "html": "<div class=\"ui-toast ui-toast--warning\"><div class=\"ui-toast__content\"><p class=\"ui-toast__title\">Warning</p><p class=\"ui-toast__description\">Please review before continuing.</p></div></div>",
-          "layout": "stack"
-        },
-        {
-          "html": "<div class=\"ui-toast ui-toast--danger\"><div class=\"ui-toast__content\"><p class=\"ui-toast__title\">Error</p><p class=\"ui-toast__description\">Something went wrong.</p></div></div>",
-          "layout": "stack"
-        },
-        {
-          "html": "<div class=\"ui-toast ui-toast--info\"><div class=\"ui-toast__content\"><p class=\"ui-toast__title\">Info</p><p class=\"ui-toast__description\">New updates available.</p></div></div>",
-          "layout": "stack"
-        }
-      ]
-    },
-    {
-      "title": "With Action",
-      "examples": [
-        {
-          "html": "<div class=\"ui-toast\"><div class=\"ui-toast__content\"><p class=\"ui-toast__title\">File deleted</p><p class=\"ui-toast__description\">document.pdf was moved to trash.</p></div><button class=\"ui-toast__action ui-button ui-button--sm ui-button--secondary\">Undo</button><button class=\"ui-toast__close\">X</button></div>"
-        }
-      ]
-    },
-    {
-      "title": "Viewport Positions",
-      "description": "Container positions for toast placement",
-      "examples": [
-        {
-          "html": "<div style=\"position:relative;height:200px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)\"><div class=\"ui-toast-viewport ui-toast-viewport--top-end\" style=\"position:absolute\"><div class=\"ui-toast\"><div class=\"ui-toast__content\"><p class=\"ui-toast__title\">Top End</p></div></div></div></div>",
-          "layout": "stack"
-        },
-        {
-          "html": "<div style=\"position:relative;height:200px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)\"><div class=\"ui-toast-viewport ui-toast-viewport--bottom-end\" style=\"position:absolute\"><div class=\"ui-toast\"><div class=\"ui-toast__content\"><p class=\"ui-toast__title\">Bottom End</p></div></div></div></div>",
-          "layout": "stack"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-toast-viewport-gap",
-      "default": "var(--unit)",
-      "description": "Gap between toasts in viewport"
-    },
-    {
-      "token": "--ui-toast-viewport-padding",
-      "default": "calc(var(--unit) * 2)",
-      "description": "Viewport padding from edges"
-    },
-    {
-      "token": "--ui-toast-viewport-max-width",
-      "default": "420px",
-      "description": "Maximum toast width"
-    },
-    {
-      "token": "--ui-toast-padding",
-      "default": "calc(var(--unit) * 2)",
-      "description": "Toast padding"
-    },
-    {
-      "token": "--ui-toast-gap",
-      "default": "var(--unit)",
-      "description": "Gap between toast elements"
-    },
-    {
-      "token": "--ui-toast-radius",
-      "default": "var(--ui-radius-md)",
-      "description": "Border radius"
-    },
-    {
-      "token": "--ui-toast-bg",
-      "default": "var(--ui-color-bg)",
-      "description": "Background color"
-    },
-    {
-      "token": "--ui-toast-border-color",
-      "default": "var(--ui-color-border)",
-      "description": "Border color"
-    },
-    { "token": "--ui-toast-shadow", "default": "var(--shadow-lg)", "description": "Box shadow" }
-  ]
-}

package/src/04-components/forms/field/field.docs.json

@@ -1,59 +0,0 @@
-{
-  "id": "field",
-  "type": "component",
-  "title": "Field",
-  "description": "Form field wrapper that combines label, control, helper text, and error message.",
-  "api": "./field.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<div class=\"ui-field\"><label class=\"ui-label\" for=\"email\">Email</label><div class=\"ui-field__control\"><input type=\"email\" id=\"email\" class=\"ui-input\" placeholder=\"Enter email\"></div></div>",
-          "code": "<div class=\"ui-field\">\n  <label class=\"ui-label\" for=\"email\">Email</label>\n  <div class=\"ui-field__control\">\n    <input type=\"email\" id=\"email\" class=\"ui-input\">\n  </div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "With Helper Text",
-      "examples": [
-        {
-          "html": "<div class=\"ui-field\"><label class=\"ui-label\" for=\"password\">Password</label><div class=\"ui-field__control\"><input type=\"password\" id=\"password\" class=\"ui-input\"><span class=\"ui-form-helper\">Must be at least 8 characters</span></div></div>",
-          "code": "<div class=\"ui-field\">\n  <label class=\"ui-label\" for=\"password\">Password</label>\n  <div class=\"ui-field__control\">\n    <input type=\"password\" id=\"password\" class=\"ui-input\">\n    <span class=\"ui-form-helper\">Must be at least 8 characters</span>\n  </div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "With Error",
-      "examples": [
-        {
-          "html": "<div class=\"ui-field\"><label class=\"ui-label\" for=\"username\">Username</label><div class=\"ui-field__control\"><input type=\"text\" id=\"username\" class=\"ui-input ui-input--error\" value=\"ab\"><span class=\"ui-form-error\">Username must be at least 3 characters</span></div></div>",
-          "code": "<div class=\"ui-field\">\n  <label class=\"ui-label\" for=\"username\">Username</label>\n  <div class=\"ui-field__control\">\n    <input type=\"text\" id=\"username\" class=\"ui-input ui-input--error\">\n    <span class=\"ui-form-error\">Username must be at least 3 characters</span>\n  </div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Horizontal Layout",
-      "description": "Label beside control for wider forms",
-      "api": "./field.api.json",
-      "examples": [
-        {
-          "html": "<div class=\"ui-field ui-field--horizontal\"><label class=\"ui-label ui-field__label\" for=\"name\">Full Name</label><div class=\"ui-field__control\"><input type=\"text\" id=\"name\" class=\"ui-input\"><span class=\"ui-form-helper\">As it appears on your ID</span></div></div>",
-          "code": "<div class=\"ui-field ui-field--horizontal\">\n  <label class=\"ui-label ui-field__label\" for=\"name\">Full Name</label>\n  <div class=\"ui-field__control\">\n    <input type=\"text\" id=\"name\" class=\"ui-input\">\n    <span class=\"ui-form-helper\">As it appears on your ID</span>\n  </div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Required Field",
-      "examples": [
-        {
-          "html": "<div class=\"ui-field\"><label class=\"ui-label ui-label--required\" for=\"req\">Required Field</label><div class=\"ui-field__control\"><input type=\"text\" id=\"req\" class=\"ui-input\" required></div></div>",
-          "code": "<div class=\"ui-field\">\n  <label class=\"ui-label ui-label--required\" for=\"req\">Required Field</label>\n  <div class=\"ui-field__control\">\n    <input type=\"text\" id=\"req\" class=\"ui-input\" required>\n  </div>\n</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    { "token": "--ui-field-gap", "default": "0", "description": "Gap between field elements" }
-  ]
-}

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

@@ -1,92 +0,0 @@
-{
-  "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": [
-        {
-          "html": "<label class=\"ui-toggle\"><input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\"><span class=\"ui-toggle__track\"></span><span class=\"ui-toggle__thumb\"></span></label>",
-          "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": [
-        {
-          "html": "<label class=\"ui-toggle\"><input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\" checked><span class=\"ui-toggle__track\"></span><span class=\"ui-toggle__thumb\"></span></label>",
-          "code": "<label class=\"ui-toggle\">\n  <input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\" checked>\n  ...\n</label>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "html": "<div style=\"display: flex; gap: var(--ui-space-2); align-items: center;\"><label class=\"ui-toggle ui-toggle--sm\"><input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\"><span class=\"ui-toggle__track\"></span><span class=\"ui-toggle__thumb\"></span></label><label class=\"ui-toggle\"><input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\" checked><span class=\"ui-toggle__track\"></span><span class=\"ui-toggle__thumb\"></span></label><label class=\"ui-toggle ui-toggle--lg\"><input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\"><span class=\"ui-toggle__track\"></span><span class=\"ui-toggle__thumb\"></span></label></div>",
-          "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": [
-        {
-          "html": "<div style=\"display: flex; gap: var(--ui-space-2);\"><label class=\"ui-toggle\"><input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\" disabled><span class=\"ui-toggle__track\"></span><span class=\"ui-toggle__thumb\"></span></label><label class=\"ui-toggle\"><input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\" checked disabled><span class=\"ui-toggle__track\"></span><span class=\"ui-toggle__thumb\"></span></label></div>",
-          "code": "<label class=\"ui-toggle\">\n  <input type=\"checkbox\" ... disabled>\n  ...\n</label>"
-        }
-      ]
-    },
-    {
-      "title": "With Label",
-      "examples": [
-        {
-          "html": "<div style=\"display: flex; align-items: center; gap: var(--ui-space-2);\"><label class=\"ui-toggle\"><input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\" id=\"notifications\"><span class=\"ui-toggle__track\"></span><span class=\"ui-toggle__thumb\"></span></label><label for=\"notifications\">Enable notifications</label></div>",
-          "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(--unit) * 5)",
-      "description": "Track width"
-    },
-    {
-      "token": "--ui-toggle-track-height",
-      "default": "calc(var(--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(--unit) * 1.5)",
-      "description": "Track border radius"
-    },
-    {
-      "token": "--ui-toggle-thumb-size",
-      "default": "calc(var(--unit) * 2.5)",
-      "description": "Thumb size"
-    },
-    { "token": "--ui-toggle-thumb-bg", "default": "white", "description": "Thumb background" },
-    {
-      "token": "--ui-toggle-thumb-offset",
-      "default": "calc(var(--unit) / 4)",
-      "description": "Thumb offset from edge"
-    }
-  ]
-}

package/src/04-components/layout/divider/divider.docs.json

@@ -1,68 +0,0 @@
-{
-  "id": "divider",
-  "type": "component",
-  "title": "Divider",
-  "description": "Visual separator between content sections. Supports horizontal/vertical orientation and optional text label.",
-  "api": "./divider.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<div class=\"ui-divider\" role=\"separator\"></div>",
-          "code": "<div class=\"ui-divider\" role=\"separator\"></div>"
-        }
-      ]
-    },
-    {
-      "title": "With Label",
-      "examples": [
-        {
-          "html": "<div class=\"ui-divider\" role=\"separator\">OR</div>",
-          "code": "<div class=\"ui-divider\" role=\"separator\">OR</div>"
-        }
-      ]
-    },
-    {
-      "title": "Label Alignment",
-      "examples": [
-        {
-          "html": "<div class=\"ui-divider ui-divider--start\" role=\"separator\">Start</div><div class=\"ui-divider\" role=\"separator\">Center</div><div class=\"ui-divider ui-divider--end\" role=\"separator\">End</div>",
-          "code": "<div class=\"ui-divider ui-divider--start\">Start</div>\n<div class=\"ui-divider\">Center</div>\n<div class=\"ui-divider ui-divider--end\">End</div>"
-        }
-      ]
-    },
-    {
-      "title": "Dashed",
-      "examples": [
-        {
-          "html": "<div class=\"ui-divider ui-divider--dashed\" role=\"separator\"></div>",
-          "code": "<div class=\"ui-divider ui-divider--dashed\"></div>"
-        }
-      ]
-    },
-    {
-      "title": "Vertical",
-      "examples": [
-        {
-          "html": "<div style=\"display: flex; height: 64px; align-items: center;\"><span>Left</span><div class=\"ui-divider ui-divider--vertical\" role=\"separator\"></div><span>Right</span></div>",
-          "code": "<div style=\"display: flex;\">\n  <span>Left</span>\n  <div class=\"ui-divider ui-divider--vertical\"></div>\n  <span>Right</span>\n</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-divider-color",
-      "default": "var(--ui-color-border)",
-      "description": "Line color"
-    },
-    { "token": "--ui-divider-line-size", "default": "1px", "description": "Line thickness" },
-    { "token": "--ui-divider-height", "default": "var(--unit)", "description": "Container height" },
-    {
-      "token": "--ui-divider-gap",
-      "default": "calc(var(--unit) * 2)",
-      "description": "Vertical margin"
-    }
-  ]
-}

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

@@ -1,59 +0,0 @@
-{
-  "id": "breadcrumb",
-  "type": "component",
-  "title": "Breadcrumb",
-  "description": "Navigation hierarchy showing current page location in site structure.",
-  "api": "./breadcrumb.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<nav class=\"ui-breadcrumb\" aria-label=\"Breadcrumb\"><ol class=\"ui-breadcrumb\"><li class=\"ui-breadcrumb__item\"><a href=\"#\" class=\"ui-breadcrumb__link\">Home</a></li><li class=\"ui-breadcrumb__item\"><a href=\"#\" class=\"ui-breadcrumb__link\">Products</a></li><li class=\"ui-breadcrumb__item\"><span class=\"ui-breadcrumb__current\" aria-current=\"page\">Shoes</span></li></ol></nav>",
-          "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": [
-        {
-          "html": "<nav aria-label=\"Breadcrumb\"><ol class=\"ui-breadcrumb\"><li class=\"ui-breadcrumb__item\"><a href=\"#\" class=\"ui-breadcrumb__link\"><svg class=\"ui-icon ui-icon--sm\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\"/></svg></a></li><li class=\"ui-breadcrumb__item\"><a href=\"#\" class=\"ui-breadcrumb__link\">Settings</a></li><li class=\"ui-breadcrumb__item\"><span class=\"ui-breadcrumb__current\" aria-current=\"page\">Profile</span></li></ol></nav>",
-          "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(--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/navigation/menu/menu.docs.json

@@ -1,81 +0,0 @@
-{
-  "api": "./menu.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<div class=\"ui-menu\"><ul class=\"ui-menu__group\"><li><button class=\"ui-menu__item\">Edit</button></li><li><button class=\"ui-menu__item\">Duplicate</button></li><li><button class=\"ui-menu__item\">Archive</button></li></ul></div>"
-        }
-      ]
-    },
-    {
-      "title": "With Icons and Shortcuts",
-      "examples": [
-        {
-          "html": "<div class=\"ui-menu\"><ul class=\"ui-menu__group\"><li><button class=\"ui-menu__item\"><span class=\"ui-menu__item-icon\">+</span>New File<span class=\"ui-menu__item-shortcut\">Cmd+N</span></button></li><li><button class=\"ui-menu__item\"><span class=\"ui-menu__item-icon\">O</span>Open<span class=\"ui-menu__item-shortcut\">Cmd+O</span></button></li><li><button class=\"ui-menu__item\"><span class=\"ui-menu__item-icon\">S</span>Save<span class=\"ui-menu__item-shortcut\">Cmd+S</span></button></li></ul></div>"
-        }
-      ]
-    },
-    {
-      "title": "Groups with Labels",
-      "examples": [
-        {
-          "html": "<div class=\"ui-menu\"><div class=\"ui-menu__label\">Edit</div><ul class=\"ui-menu__group\"><li><button class=\"ui-menu__item\">Cut</button></li><li><button class=\"ui-menu__item\">Copy</button></li><li><button class=\"ui-menu__item\">Paste</button></li></ul><div class=\"ui-menu__separator\"></div><div class=\"ui-menu__label\">View</div><ul class=\"ui-menu__group\"><li><button class=\"ui-menu__item\">Zoom In</button></li><li><button class=\"ui-menu__item\">Zoom Out</button></li></ul></div>"
-        }
-      ]
-    },
-    {
-      "title": "States",
-      "examples": [
-        {
-          "html": "<div class=\"ui-menu\"><ul class=\"ui-menu__group\"><li><button class=\"ui-menu__item\">Normal Item</button></li><li><button class=\"ui-menu__item ui-menu__item--disabled\" aria-disabled=\"true\">Disabled Item</button></li><li><button class=\"ui-menu__item ui-menu__item--danger\">Delete</button></li></ul></div>"
-        }
-      ]
-    },
-    {
-      "title": "Checkable Items",
-      "examples": [
-        {
-          "html": "<div class=\"ui-menu\"><ul class=\"ui-menu__group\"><li><button class=\"ui-menu__item ui-menu__item--check\"><span class=\"ui-menu__item-indicator\">&#10003;</span>Show Toolbar</button></li><li><button class=\"ui-menu__item ui-menu__item--check\"><span class=\"ui-menu__item-indicator\"></span>Show Sidebar</button></li></ul><div class=\"ui-menu__separator\"></div><ul class=\"ui-menu__group\"><li><button class=\"ui-menu__item ui-menu__item--radio\"><span class=\"ui-menu__item-indicator\">&#8226;</span>List View</button></li><li><button class=\"ui-menu__item ui-menu__item--radio\"><span class=\"ui-menu__item-indicator\"></span>Grid View</button></li></ul></div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-menu-min-width",
-      "default": "calc(var(--unit) * 16)",
-      "description": "Minimum width"
-    },
-    {
-      "token": "--ui-menu-max-height",
-      "default": "calc(var(--unit) * 40)",
-      "description": "Maximum height"
-    },
-    { "token": "--ui-menu-padding", "default": "var(--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"
-    }
-  ]
-}