@teseor/css 1.6.0 → 1.8.0

package/src/03-layout/sidebar-nav/sidebar-nav.docs.json

@@ -1,100 +0,0 @@
-{
-  "id": "sidebar-nav",
-  "type": "primitive",
-  "title": "Sidebar Nav",
-  "description": "Navigation component for sidebars with support for groups, nested items, icons, and badges.",
-  "api": "./sidebar-nav.api.json",
-  "customization": [
-    {
-      "token": "--ui-sidebar-nav-width",
-      "default": "calc(var(--ui-unit) * 30)",
-      "description": "Default sidebar width"
-    },
-    {
-      "token": "--ui-sidebar-nav-width-collapsed",
-      "default": "var(--ui-row-3)",
-      "description": "Width in collapsed mode"
-    },
-    {
-      "token": "--ui-sidebar-nav-bg",
-      "default": "var(--ui-color-bg-subtle)",
-      "description": "Background color"
-    },
-    {
-      "token": "--ui-sidebar-nav-item-height",
-      "default": "var(--ui-row-2)",
-      "description": "Nav item height"
-    },
-    {
-      "token": "--ui-sidebar-nav-item-hover-bg",
-      "default": "var(--ui-color-bg-muted)",
-      "description": "Item hover background"
-    },
-    {
-      "token": "--ui-sidebar-nav-item-active-bg",
-      "default": "var(--ui-color-primary-subtle)",
-      "description": "Active item background"
-    },
-    {
-      "token": "--ui-sidebar-nav-item-active-color",
-      "default": "var(--ui-color-primary)",
-      "description": "Active item text color"
-    }
-  ],
-  "sections": [
-    {
-      "title": "Basic",
-      "description": "Simple navigation with grouped items.",
-      "examples": [
-        {
-          "html": "<nav class=\"ui-sidebar-nav\" aria-label=\"Main navigation\" style=\"block-size: 400px;\">\n  <div class=\"ui-sidebar-nav__header\">\n    <strong>App Name</strong>\n  </div>\n  <div class=\"ui-sidebar-nav__content\">\n    <div class=\"ui-sidebar-nav__group\">\n      <span class=\"ui-sidebar-nav__group-label\">Main</span>\n      <ul class=\"ui-sidebar-nav__group-items\">\n        <li><a href=\"#\" class=\"ui-sidebar-nav__item ui-sidebar-nav__item--active\" aria-current=\"page\"><span class=\"ui-sidebar-nav__label\">Dashboard</span></a></li>\n        <li><a href=\"#\" class=\"ui-sidebar-nav__item\"><span class=\"ui-sidebar-nav__label\">Projects</span></a></li>\n        <li><a href=\"#\" class=\"ui-sidebar-nav__item\"><span class=\"ui-sidebar-nav__label\">Tasks</span></a></li>\n      </ul>\n    </div>\n    <div class=\"ui-sidebar-nav__group\">\n      <span class=\"ui-sidebar-nav__group-label\">Settings</span>\n      <ul class=\"ui-sidebar-nav__group-items\">\n        <li><a href=\"#\" class=\"ui-sidebar-nav__item\"><span class=\"ui-sidebar-nav__label\">Profile</span></a></li>\n        <li><a href=\"#\" class=\"ui-sidebar-nav__item\"><span class=\"ui-sidebar-nav__label\">Preferences</span></a></li>\n      </ul>\n    </div>\n  </div>\n  <div class=\"ui-sidebar-nav__footer\">\n    <a href=\"#\" class=\"ui-sidebar-nav__item\"><span class=\"ui-sidebar-nav__label\">Logout</span></a>\n  </div>\n</nav>"
-        }
-      ]
-    },
-    {
-      "title": "With Icons",
-      "description": "Navigation items with icons for visual clarity.",
-      "examples": [
-        {
-          "html": "<nav class=\"ui-sidebar-nav\" aria-label=\"Navigation\" style=\"block-size: 300px;\">\n  <div class=\"ui-sidebar-nav__content\">\n    <ul class=\"ui-sidebar-nav__group-items\">\n      <li><a href=\"#\" class=\"ui-sidebar-nav__item ui-sidebar-nav__item--active\" aria-current=\"page\">\n        <span class=\"ui-sidebar-nav__icon\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"/></svg></span>\n        <span class=\"ui-sidebar-nav__label\">Home</span>\n      </a></li>\n      <li><a href=\"#\" class=\"ui-sidebar-nav__item\">\n        <span class=\"ui-sidebar-nav__icon\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"/><circle cx=\"9\" cy=\"7\" r=\"4\"/></svg></span>\n        <span class=\"ui-sidebar-nav__label\">Users</span>\n      </a></li>\n      <li><a href=\"#\" class=\"ui-sidebar-nav__item\">\n        <span class=\"ui-sidebar-nav__icon\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"3\"/><path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"/></svg></span>\n        <span class=\"ui-sidebar-nav__label\">Settings</span>\n      </a></li>\n    </ul>\n  </div>\n</nav>"
-        }
-      ]
-    },
-    {
-      "title": "With Badges",
-      "description": "Navigation items with badges for counts or status indicators.",
-      "examples": [
-        {
-          "html": "<nav class=\"ui-sidebar-nav\" aria-label=\"Navigation\" style=\"block-size: 200px;\">\n  <div class=\"ui-sidebar-nav__content\">\n    <ul class=\"ui-sidebar-nav__group-items\">\n      <li><a href=\"#\" class=\"ui-sidebar-nav__item\">\n        <span class=\"ui-sidebar-nav__label\">Inbox</span>\n        <span class=\"ui-sidebar-nav__badge\"><span class=\"ui-badge ui-badge--primary\">12</span></span>\n      </a></li>\n      <li><a href=\"#\" class=\"ui-sidebar-nav__item\">\n        <span class=\"ui-sidebar-nav__label\">Notifications</span>\n        <span class=\"ui-sidebar-nav__badge\"><span class=\"ui-badge ui-badge--danger\">3</span></span>\n      </a></li>\n      <li><a href=\"#\" class=\"ui-sidebar-nav__item\">\n        <span class=\"ui-sidebar-nav__label\">Updates</span>\n        <span class=\"ui-sidebar-nav__badge\"><span class=\"ui-status ui-status--success\"></span></span>\n      </a></li>\n    </ul>\n  </div>\n</nav>"
-        }
-      ]
-    },
-    {
-      "title": "Nested Items",
-      "description": "Navigation with nested/indented items for sub-sections.",
-      "examples": [
-        {
-          "html": "<nav class=\"ui-sidebar-nav\" aria-label=\"Navigation\" style=\"block-size: 280px;\">\n  <div class=\"ui-sidebar-nav__content\">\n    <div class=\"ui-sidebar-nav__group\">\n      <span class=\"ui-sidebar-nav__group-label\">Components</span>\n      <ul class=\"ui-sidebar-nav__group-items\">\n        <li><span class=\"ui-sidebar-nav__subgroup-label\">Actions</span></li>\n        <li><a href=\"#\" class=\"ui-sidebar-nav__item ui-sidebar-nav__item--nested\"><span class=\"ui-sidebar-nav__label\">Button</span></a></li>\n        <li><a href=\"#\" class=\"ui-sidebar-nav__item ui-sidebar-nav__item--nested ui-sidebar-nav__item--active\" aria-current=\"page\"><span class=\"ui-sidebar-nav__label\">Button Group</span></a></li>\n        <li><span class=\"ui-sidebar-nav__subgroup-label\">Forms</span></li>\n        <li><a href=\"#\" class=\"ui-sidebar-nav__item ui-sidebar-nav__item--nested\"><span class=\"ui-sidebar-nav__label\">Input</span></a></li>\n        <li><a href=\"#\" class=\"ui-sidebar-nav__item ui-sidebar-nav__item--nested\"><span class=\"ui-sidebar-nav__label\">Select</span></a></li>\n      </ul>\n    </div>\n  </div>\n</nav>"
-        }
-      ]
-    },
-    {
-      "title": "Collapsed",
-      "description": "Icon-only mode for compact sidebars.",
-      "examples": [
-        {
-          "html": "<nav class=\"ui-sidebar-nav ui-sidebar-nav--collapsed\" aria-label=\"Navigation\" style=\"block-size: 200px;\">\n  <div class=\"ui-sidebar-nav__content\">\n    <ul class=\"ui-sidebar-nav__group-items\">\n      <li><a href=\"#\" class=\"ui-sidebar-nav__item ui-sidebar-nav__item--active\" aria-current=\"page\" aria-label=\"Home\">\n        <span class=\"ui-sidebar-nav__icon\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"/></svg></span>\n        <span class=\"ui-sidebar-nav__label\">Home</span>\n      </a></li>\n      <li><a href=\"#\" class=\"ui-sidebar-nav__item\" aria-label=\"Users\">\n        <span class=\"ui-sidebar-nav__icon\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"/><circle cx=\"9\" cy=\"7\" r=\"4\"/></svg></span>\n        <span class=\"ui-sidebar-nav__label\">Users</span>\n      </a></li>\n      <li><a href=\"#\" class=\"ui-sidebar-nav__item\" aria-label=\"Settings\">\n        <span class=\"ui-sidebar-nav__icon\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg></span>\n        <span class=\"ui-sidebar-nav__label\">Settings</span>\n      </a></li>\n    </ul>\n  </div>\n</nav>"
-        }
-      ]
-    },
-    {
-      "title": "Disabled Items",
-      "description": "Non-interactive navigation items.",
-      "examples": [
-        {
-          "html": "<nav class=\"ui-sidebar-nav\" aria-label=\"Navigation\" style=\"block-size: 180px;\">\n  <div class=\"ui-sidebar-nav__content\">\n    <ul class=\"ui-sidebar-nav__group-items\">\n      <li><a href=\"#\" class=\"ui-sidebar-nav__item\"><span class=\"ui-sidebar-nav__label\">Active Link</span></a></li>\n      <li><span class=\"ui-sidebar-nav__item ui-sidebar-nav__item--disabled\"><span class=\"ui-sidebar-nav__label\">Disabled Link</span></span></li>\n      <li><a href=\"#\" class=\"ui-sidebar-nav__item\"><span class=\"ui-sidebar-nav__label\">Another Link</span></a></li>\n    </ul>\n  </div>\n</nav>"
-        }
-      ]
-    }
-  ]
-}

package/src/03-layout/stack/index.scss

@@ -1,13 +0,0 @@
-@layer primitives {
-  .stack {
-    display: flex;
-    flex-direction: column;
-    gap: var(--stack-gap, var(--ui-space-2));
-  }
-
-  .stack--xs { --stack-gap: var(--ui-space-1); }
-  .stack--sm { --stack-gap: var(--ui-space-2); }
-  .stack--md { --stack-gap: var(--ui-space-4); }
-  .stack--lg { --stack-gap: var(--ui-space-6); }
-  .stack--xl { --stack-gap: var(--ui-space-8); }
-}

package/src/04-components/actions/button-group/button-group.docs.json

@@ -1,52 +0,0 @@
-{
-  "id": "button-group",
-  "type": "component",
-  "title": "Button Group",
-  "description": "Container for grouped buttons that share borders and have connected appearance.",
-  "api": "./button-group.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<div class=\"ui-button-group\" role=\"group\"><button class=\"ui-button ui-button--outline\">Left</button><button class=\"ui-button ui-button--outline\">Middle</button><button class=\"ui-button ui-button--outline\">Right</button></div>",
-          "code": "<div class=\"ui-button-group\" role=\"group\">\n  <button class=\"ui-button ui-button--outline\">Left</button>\n  <button class=\"ui-button ui-button--outline\">Middle</button>\n  <button class=\"ui-button ui-button--outline\">Right</button>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Primary Buttons",
-      "examples": [
-        {
-          "html": "<div class=\"ui-button-group\" role=\"group\"><button class=\"ui-button\">Save</button><button class=\"ui-button\">Save & Close</button></div>",
-          "code": "<div class=\"ui-button-group\" role=\"group\">\n  <button class=\"ui-button\">Save</button>\n  <button class=\"ui-button\">Save & Close</button>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Vertical",
-      "examples": [
-        {
-          "html": "<div class=\"ui-button-group ui-button-group--vertical\" role=\"group\"><button class=\"ui-button ui-button--outline\">Top</button><button class=\"ui-button ui-button--outline\">Middle</button><button class=\"ui-button ui-button--outline\">Bottom</button></div>",
-          "code": "<div class=\"ui-button-group ui-button-group--vertical\" role=\"group\">\n  <button class=\"ui-button ui-button--outline\">Top</button>\n  <button class=\"ui-button ui-button--outline\">Middle</button>\n  <button class=\"ui-button ui-button--outline\">Bottom</button>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "With Icons",
-      "examples": [
-        {
-          "html": "<div class=\"ui-button-group\" role=\"group\" aria-label=\"Text formatting\"><button class=\"ui-button ui-button--outline ui-button--icon\" aria-label=\"Bold\"><svg class=\"ui-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z\"/></svg></button><button class=\"ui-button ui-button--outline ui-button--icon\" aria-label=\"Italic\"><svg class=\"ui-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z\"/></svg></button><button class=\"ui-button ui-button--outline ui-button--icon\" aria-label=\"Underline\"><svg class=\"ui-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z\"/></svg></button></div>",
-          "code": "<div class=\"ui-button-group\" role=\"group\" aria-label=\"Text formatting\">\n  <button class=\"ui-button ui-button--outline ui-button--icon\" aria-label=\"Bold\">...</button>\n  <button class=\"ui-button ui-button--outline ui-button--icon\" aria-label=\"Italic\">...</button>\n  <button class=\"ui-button ui-button--outline ui-button--icon\" aria-label=\"Underline\">...</button>\n</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-button-group-radius",
-      "default": "var(--ui-radius-md)",
-      "description": "Border radius for first and last buttons"
-    }
-  ]
-}

package/src/04-components/data-display/data-list/data-list.docs.json

@@ -1,79 +0,0 @@
-{
-  "api": "./data-list.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<dl class=\"ui-data-list\"><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Name</dt><dd class=\"ui-data-list__value\">John Doe</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Email</dt><dd class=\"ui-data-list__value\">john@example.com</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Role</dt><dd class=\"ui-data-list__value\">Administrator</dd></div></dl>"
-        }
-      ]
-    },
-    {
-      "title": "Horizontal Layout",
-      "description": "Side-by-side label and value",
-      "examples": [
-        {
-          "html": "<dl class=\"ui-data-list ui-data-list--horizontal\"><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Status</dt><dd class=\"ui-data-list__value\">Active</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Created</dt><dd class=\"ui-data-list__value\">Dec 8, 2025</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Updated</dt><dd class=\"ui-data-list__value\">Dec 8, 2025</dd></div></dl>"
-        }
-      ]
-    },
-    {
-      "title": "Divided",
-      "description": "With separator lines between items",
-      "examples": [
-        {
-          "html": "<dl class=\"ui-data-list ui-data-list--divided\"><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Order ID</dt><dd class=\"ui-data-list__value\">#12345</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Total</dt><dd class=\"ui-data-list__value\">$99.00</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Payment</dt><dd class=\"ui-data-list__value\">Credit Card</dd></div></dl>"
-        }
-      ]
-    },
-    {
-      "title": "Striped",
-      "description": "Alternating background for readability",
-      "examples": [
-        {
-          "html": "<dl class=\"ui-data-list ui-data-list--striped\"><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">CPU</dt><dd class=\"ui-data-list__value\">Intel i7</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Memory</dt><dd class=\"ui-data-list__value\">16 GB</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Storage</dt><dd class=\"ui-data-list__value\">512 GB SSD</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Display</dt><dd class=\"ui-data-list__value\">14\" Retina</dd></div></dl>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "html": "<dl class=\"ui-data-list ui-data-list--sm\"><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Small</dt><dd class=\"ui-data-list__value\">Compact display</dd></div></dl>",
-          "layout": "stack"
-        },
-        {
-          "html": "<dl class=\"ui-data-list\"><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Default</dt><dd class=\"ui-data-list__value\">Standard display</dd></div></dl>",
-          "layout": "stack"
-        },
-        {
-          "html": "<dl class=\"ui-data-list ui-data-list--lg\"><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Large</dt><dd class=\"ui-data-list__value\">Spacious display</dd></div></dl>",
-          "layout": "stack"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-data-list-gap",
-      "default": "calc(var(--unit) * 2)",
-      "description": "Gap between items"
-    },
-    {
-      "token": "--ui-data-list-item-gap",
-      "default": "var(--unit)",
-      "description": "Gap between label and value"
-    },
-    {
-      "token": "--ui-data-list-label-color",
-      "default": "var(--ui-color-text-muted)",
-      "description": "Label color"
-    },
-    {
-      "token": "--ui-data-list-value-color",
-      "default": "var(--ui-color-text)",
-      "description": "Value color"
-    }
-  ]
-}

package/src/04-components/data-display/status/status.docs.json

@@ -1,60 +0,0 @@
-{
-  "id": "status",
-  "type": "component",
-  "title": "Status",
-  "description": "Visual status indicator with colored dot to show state.",
-  "api": "./status.api.json",
-  "sections": [
-    {
-      "title": "Variants",
-      "examples": [
-        {
-          "html": "<div style=\"display: flex; flex-direction: column; gap: var(--ui-space-2);\"><span class=\"ui-status\"><span class=\"ui-status__dot\"></span>Default</span><span class=\"ui-status ui-status--success\"><span class=\"ui-status__dot\"></span>Online</span><span class=\"ui-status ui-status--warning\"><span class=\"ui-status__dot\"></span>Away</span><span class=\"ui-status ui-status--danger\"><span class=\"ui-status__dot\"></span>Busy</span><span class=\"ui-status ui-status--info\"><span class=\"ui-status__dot\"></span>In a meeting</span></div>",
-          "code": "<span class=\"ui-status ui-status--success\">\n  <span class=\"ui-status__dot\"></span>\n  Online\n</span>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "html": "<div style=\"display: flex; gap: var(--ui-space-4); align-items: center;\"><span class=\"ui-status ui-status--success ui-status--sm\"><span class=\"ui-status__dot\"></span>Small</span><span class=\"ui-status ui-status--success\"><span class=\"ui-status__dot\"></span>Default</span><span class=\"ui-status ui-status--success ui-status--lg\"><span class=\"ui-status__dot\"></span>Large</span></div>",
-          "code": "<span class=\"ui-status ui-status--sm\">...</span>\n<span class=\"ui-status\">...</span>\n<span class=\"ui-status ui-status--lg\">...</span>"
-        }
-      ]
-    },
-    {
-      "title": "Pulse Animation",
-      "description": "For live or active indicators",
-      "api": "./status.api.json",
-      "examples": [
-        {
-          "html": "<span class=\"ui-status ui-status--success ui-status--pulse\"><span class=\"ui-status__dot\"></span>Live</span>",
-          "code": "<span class=\"ui-status ui-status--success ui-status--pulse\">\n  <span class=\"ui-status__dot\"></span>\n  Live\n</span>"
-        }
-      ]
-    },
-    {
-      "title": "Dot Only",
-      "examples": [
-        {
-          "html": "<div style=\"display: flex; gap: var(--ui-space-2);\"><span class=\"ui-status ui-status--success\"><span class=\"ui-status__dot\"></span></span><span class=\"ui-status ui-status--warning\"><span class=\"ui-status__dot\"></span></span><span class=\"ui-status ui-status--danger\"><span class=\"ui-status__dot\"></span></span></div>",
-          "code": "<span class=\"ui-status ui-status--success\">\n  <span class=\"ui-status__dot\"></span>\n</span>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    { "token": "--ui-status-size", "default": "var(--unit)", "description": "Dot size" },
-    {
-      "token": "--ui-status-color",
-      "default": "var(--ui-color-text-muted)",
-      "description": "Default dot color"
-    },
-    {
-      "token": "--ui-status-gap",
-      "default": "var(--unit)",
-      "description": "Gap between dot and text"
-    }
-  ]
-}

package/src/04-components/data-display/table/table.docs.json

@@ -1,59 +0,0 @@
-{
-  "id": "table",
-  "type": "component",
-  "title": "Table",
-  "description": "Styled table with header formatting and optional variants.",
-  "api": "./table.api.json",
-  "componentName": "table",
-  "sections": [
-    {
-      "title": "Basic table",
-      "examples": [
-        {
-          "title": "Default",
-          "html": "<table class=\"ui-table\"><thead><tr><th>Name</th><th>Value</th></tr></thead><tbody><tr><td>Alpha</td><td>100</td></tr><tr><td>Beta</td><td>200</td></tr></tbody></table>"
-        }
-      ]
-    },
-    {
-      "title": "Variants",
-      "examples": [
-        {
-          "title": "Compact",
-          "html": "<table class=\"ui-table ui-table--compact\"><thead><tr><th>Token</th><th>Value</th></tr></thead><tbody><tr><td><code class=\"ui-code ui-code--sm\">--space-1</code></td><td>0.5rem</td></tr><tr><td><code class=\"ui-code ui-code--sm\">--space-2</code></td><td>1rem</td></tr></tbody></table>"
-        },
-        {
-          "title": "Striped",
-          "html": "<table class=\"ui-table ui-table--striped\"><thead><tr><th>Item</th><th>Status</th></tr></thead><tbody><tr><td>Task 1</td><td>Done</td></tr><tr><td>Task 2</td><td>Pending</td></tr><tr><td>Task 3</td><td>Done</td></tr></tbody></table>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-table-font-size",
-      "default": "var(--ui-font-size-sm)",
-      "description": "Table font size"
-    },
-    {
-      "token": "--ui-table-border-color",
-      "default": "var(--ui-color-border)",
-      "description": "Border color"
-    },
-    {
-      "token": "--ui-table-header-bg",
-      "default": "var(--ui-color-bg-subtle)",
-      "description": "Header background"
-    },
-    {
-      "token": "--ui-table-cell-padding-x",
-      "default": "var(--ui-space-2)",
-      "description": "Cell horizontal padding"
-    },
-    {
-      "token": "--ui-table-cell-padding-y",
-      "default": "var(--ui-space-1)",
-      "description": "Cell vertical padding"
-    }
-  ]
-}

package/src/04-components/disclosure/accordion/accordion.docs.json

@@ -1,51 +0,0 @@
-{
-  "id": "accordion",
-  "type": "component",
-  "title": "Accordion",
-  "description": "Container for grouped expandable sections. Use with disclosure components.",
-  "api": "./accordion.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<div class=\"ui-accordion\"><details class=\"ui-disclosure\"><summary class=\"ui-disclosure__trigger\">Section 1<span class=\"ui-disclosure__icon\">&#9662;</span></summary><div class=\"ui-disclosure__content\"><p>Content for section 1</p></div></details><details class=\"ui-disclosure\"><summary class=\"ui-disclosure__trigger\">Section 2<span class=\"ui-disclosure__icon\">&#9662;</span></summary><div class=\"ui-disclosure__content\"><p>Content for section 2</p></div></details><details class=\"ui-disclosure\"><summary class=\"ui-disclosure__trigger\">Section 3<span class=\"ui-disclosure__icon\">&#9662;</span></summary><div class=\"ui-disclosure__content\"><p>Content for section 3</p></div></details></div>",
-          "code": "<div class=\"ui-accordion\">\n  <details class=\"ui-disclosure\">\n    <summary class=\"ui-disclosure__trigger\">Section 1</summary>\n    <div class=\"ui-disclosure__content\">...</div>\n  </details>\n  <details class=\"ui-disclosure\">\n    <summary class=\"ui-disclosure__trigger\">Section 2</summary>\n    <div class=\"ui-disclosure__content\">...</div>\n  </details>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Separated",
-      "description": "Gap between accordion items",
-      "api": "./accordion.api.json",
-      "examples": [
-        {
-          "html": "<div class=\"ui-accordion ui-accordion--separated\"><details class=\"ui-disclosure\"><summary class=\"ui-disclosure__trigger\">Section 1<span class=\"ui-disclosure__icon\">&#9662;</span></summary><div class=\"ui-disclosure__content\"><p>Content for section 1</p></div></details><details class=\"ui-disclosure\"><summary class=\"ui-disclosure__trigger\">Section 2<span class=\"ui-disclosure__icon\">&#9662;</span></summary><div class=\"ui-disclosure__content\"><p>Content for section 2</p></div></details></div>",
-          "code": "<div class=\"ui-accordion ui-accordion--separated\">\n  ...\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "With One Open",
-      "examples": [
-        {
-          "html": "<div class=\"ui-accordion\"><details class=\"ui-disclosure\" open><summary class=\"ui-disclosure__trigger\">Open Section<span class=\"ui-disclosure__icon\">&#9662;</span></summary><div class=\"ui-disclosure__content\"><p>This section starts open</p></div></details><details class=\"ui-disclosure\"><summary class=\"ui-disclosure__trigger\">Closed Section<span class=\"ui-disclosure__icon\">&#9662;</span></summary><div class=\"ui-disclosure__content\"><p>Click to open</p></div></details></div>",
-          "code": "<div class=\"ui-accordion\">\n  <details class=\"ui-disclosure\" open>\n    <summary class=\"ui-disclosure__trigger\">Open Section</summary>\n    <div class=\"ui-disclosure__content\">...</div>\n  </details>\n  <details class=\"ui-disclosure\">\n    ...\n  </details>\n</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-accordion-border-color",
-      "default": "var(--ui-color-border)",
-      "description": "Border color"
-    },
-    { "token": "--ui-accordion-border-width", "default": "1px", "description": "Border width" },
-    {
-      "token": "--ui-accordion-radius",
-      "default": "var(--ui-radius-md)",
-      "description": "Border radius"
-    }
-  ]
-}

package/src/04-components/disclosure/disclosure/disclosure.docs.json

@@ -1,73 +0,0 @@
-{
-  "id": "disclosure",
-  "type": "component",
-  "title": "Disclosure",
-  "description": "Expandable/collapsible content section. Uses native details/summary for accessibility without JS.",
-  "api": "./disclosure.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<details class=\"ui-disclosure\"><summary class=\"ui-disclosure__trigger\">Click to expand<span class=\"ui-disclosure__icon\">&#9662;</span></summary><div class=\"ui-disclosure__content\"><p>Hidden content that expands when clicked.</p></div></details>",
-          "code": "<details class=\"ui-disclosure\">\n  <summary class=\"ui-disclosure__trigger\">\n    Click to expand\n    <span class=\"ui-disclosure__icon\">&#9662;</span>\n  </summary>\n  <div class=\"ui-disclosure__content\">\n    <p>Hidden content that expands when clicked.</p>\n  </div>\n</details>"
-        }
-      ]
-    },
-    {
-      "title": "Open by Default",
-      "examples": [
-        {
-          "html": "<details class=\"ui-disclosure\" open><summary class=\"ui-disclosure__trigger\">Already expanded<span class=\"ui-disclosure__icon\">&#9662;</span></summary><div class=\"ui-disclosure__content\"><p>This content is visible by default.</p></div></details>",
-          "code": "<details class=\"ui-disclosure\" open>\n  <summary class=\"ui-disclosure__trigger\">Already expanded</summary>\n  <div class=\"ui-disclosure__content\">...</div>\n</details>"
-        }
-      ]
-    },
-    {
-      "title": "Borderless",
-      "examples": [
-        {
-          "html": "<details class=\"ui-disclosure ui-disclosure--borderless\"><summary class=\"ui-disclosure__trigger\">Borderless disclosure<span class=\"ui-disclosure__icon\">&#9662;</span></summary><div class=\"ui-disclosure__content\"><p>No border around the disclosure.</p></div></details>",
-          "code": "<details class=\"ui-disclosure ui-disclosure--borderless\">\n  ...\n</details>"
-        }
-      ]
-    },
-    {
-      "title": "Animated",
-      "examples": [
-        {
-          "html": "<details class=\"ui-disclosure ui-disclosure--animate\"><summary class=\"ui-disclosure__trigger\">Animated expansion<span class=\"ui-disclosure__icon\">&#9662;</span></summary><div class=\"ui-disclosure__content\"><p>Content animates in when opened.</p></div></details>",
-          "code": "<details class=\"ui-disclosure ui-disclosure--animate\">\n  ...\n</details>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-disclosure-border-color",
-      "default": "var(--ui-color-border)",
-      "description": "Border color"
-    },
-    { "token": "--ui-disclosure-border-width", "default": "1px", "description": "Border width" },
-    {
-      "token": "--ui-disclosure-radius",
-      "default": "var(--ui-radius-md)",
-      "description": "Border radius"
-    },
-    {
-      "token": "--ui-disclosure-trigger-height",
-      "default": "var(--ui-row-3)",
-      "description": "Trigger button height"
-    },
-    {
-      "token": "--ui-disclosure-padding-x",
-      "default": "calc(var(--unit) * 2)",
-      "description": "Horizontal padding"
-    },
-    {
-      "token": "--ui-disclosure-padding-y",
-      "default": "calc(var(--unit) * 2)",
-      "description": "Content vertical padding"
-    }
-  ]
-}

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

@@ -1,79 +0,0 @@
-{
-  "id": "alert",
-  "type": "component",
-  "title": "Alert",
-  "description": "Informational banner for important messages. Use variants for different message types.",
-  "api": "./alert.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<div class=\"ui-alert\"><div class=\"ui-alert__content\"><p class=\"ui-alert__title\">Note</p><p class=\"ui-alert__description\">This is a default alert message.</p></div></div>",
-          "code": "<div class=\"ui-alert\">\n  <div class=\"ui-alert__content\">\n    <p class=\"ui-alert__title\">Note</p>\n    <p class=\"ui-alert__description\">This is a default alert.</p>\n  </div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Variants",
-      "examples": [
-        {
-          "html": "<div class=\"ui-stack\" style=\"--stack-gap: var(--ui-space-2);\"><div class=\"ui-alert ui-alert--info\"><div class=\"ui-alert__content\"><p class=\"ui-alert__title\">Info</p><p class=\"ui-alert__description\">Informational message for the user.</p></div></div><div class=\"ui-alert ui-alert--success\"><div class=\"ui-alert__content\"><p class=\"ui-alert__title\">Success</p><p class=\"ui-alert__description\">Your action was completed successfully.</p></div></div><div class=\"ui-alert ui-alert--warning\"><div class=\"ui-alert__content\"><p class=\"ui-alert__title\">Warning</p><p class=\"ui-alert__description\">Please review before continuing.</p></div></div><div class=\"ui-alert ui-alert--danger\"><div class=\"ui-alert__content\"><p class=\"ui-alert__title\">Error</p><p class=\"ui-alert__description\">Something went wrong. Please try again.</p></div></div></div>",
-          "code": "<div class=\"ui-alert ui-alert--info\">...</div>\n<div class=\"ui-alert ui-alert--success\">...</div>\n<div class=\"ui-alert ui-alert--warning\">...</div>\n<div class=\"ui-alert ui-alert--danger\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "With Icon",
-      "examples": [
-        {
-          "html": "<div class=\"ui-alert ui-alert--info\"><svg class=\"ui-icon ui-icon--sm ui-alert__icon\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><path d=\"M12 16v-4\"></path><path d=\"M12 8h.01\"></path></svg><div class=\"ui-alert__content\"><p class=\"ui-alert__description\">Your session will expire in 5 minutes.</p></div></div>",
-          "code": "<div class=\"ui-alert ui-alert--info\">\n  <svg class=\"ui-icon ui-alert__icon\">...</svg>\n  <div class=\"ui-alert__content\">\n    <p class=\"ui-alert__description\">Your session will expire.</p>\n  </div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Description Only",
-      "examples": [
-        {
-          "html": "<div class=\"ui-alert ui-alert--success\"><div class=\"ui-alert__content\"><p class=\"ui-alert__description\">File uploaded successfully.</p></div></div>",
-          "code": "<div class=\"ui-alert ui-alert--success\">\n  <div class=\"ui-alert__content\">\n    <p class=\"ui-alert__description\">File uploaded.</p>\n  </div>\n</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-alert-padding",
-      "default": "var(--ui-space-2)",
-      "description": "Inner padding"
-    },
-    {
-      "token": "--ui-alert-gap",
-      "default": "var(--ui-space-1)",
-      "description": "Gap between icon and content"
-    },
-    {
-      "token": "--ui-alert-radius",
-      "default": "var(--ui-radius-md)",
-      "description": "Border radius"
-    },
-    {
-      "token": "--ui-alert-border-width",
-      "default": "var(--ui-border-width-sm)",
-      "description": "Border width"
-    },
-    {
-      "token": "--ui-alert-bg",
-      "default": "var(--ui-color-bg-subtle)",
-      "description": "Background color"
-    },
-    {
-      "token": "--ui-alert-border-color",
-      "default": "var(--ui-color-border)",
-      "description": "Border color"
-    },
-    { "token": "--ui-alert-color", "default": "var(--ui-color-text)", "description": "Text color" },
-    { "token": "--ui-alert-icon-color", "default": "currentcolor", "description": "Icon color" }
-  ]
-}