@teseor/css 1.6.0 → 1.8.0

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

@@ -1,88 +0,0 @@
-{
-  "api": "./pagination.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<nav class=\"ui-pagination\"><a class=\"ui-pagination__link ui-pagination__prev\" href=\"#\">Prev</a><ul class=\"ui-pagination__list\"><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">1</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link ui-pagination__link--active\" aria-current=\"page\" href=\"#\">2</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">3</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">4</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">5</a></li></ul><a class=\"ui-pagination__link ui-pagination__next\" href=\"#\">Next</a></nav>"
-        }
-      ]
-    },
-    {
-      "title": "With Ellipsis",
-      "examples": [
-        {
-          "html": "<nav class=\"ui-pagination\"><a class=\"ui-pagination__link ui-pagination__prev\" href=\"#\">Prev</a><ul class=\"ui-pagination__list\"><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">1</a></li><li class=\"ui-pagination__item\"><span class=\"ui-pagination__ellipsis\">...</span></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">4</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link ui-pagination__link--active\" aria-current=\"page\" href=\"#\">5</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">6</a></li><li class=\"ui-pagination__item\"><span class=\"ui-pagination__ellipsis\">...</span></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">20</a></li></ul><a class=\"ui-pagination__link ui-pagination__next\" href=\"#\">Next</a></nav>"
-        }
-      ]
-    },
-    {
-      "title": "Disabled States",
-      "examples": [
-        {
-          "html": "<nav class=\"ui-pagination\"><a class=\"ui-pagination__link ui-pagination__prev ui-pagination__link--disabled\" aria-disabled=\"true\">Prev</a><ul class=\"ui-pagination__list\"><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link ui-pagination__link--active\" aria-current=\"page\" href=\"#\">1</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">2</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">3</a></li></ul><a class=\"ui-pagination__link ui-pagination__next\" href=\"#\">Next</a></nav>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "html": "<nav class=\"ui-pagination ui-pagination--sm\"><ul class=\"ui-pagination__list\"><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">1</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link ui-pagination__link--active\" aria-current=\"page\" href=\"#\">2</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">3</a></li></ul></nav>",
-          "layout": "stack"
-        },
-        {
-          "html": "<nav class=\"ui-pagination\"><ul class=\"ui-pagination__list\"><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">1</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link ui-pagination__link--active\" aria-current=\"page\" href=\"#\">2</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">3</a></li></ul></nav>",
-          "layout": "stack"
-        },
-        {
-          "html": "<nav class=\"ui-pagination ui-pagination--lg\"><ul class=\"ui-pagination__list\"><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">1</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link ui-pagination__link--active\" aria-current=\"page\" href=\"#\">2</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">3</a></li></ul></nav>",
-          "layout": "stack"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-pagination-gap",
-      "default": "calc(var(--unit) * 0.5)",
-      "description": "Gap between items"
-    },
-    {
-      "token": "--ui-pagination-item-size",
-      "default": "calc(var(--unit) * 4)",
-      "description": "Item size"
-    },
-    {
-      "token": "--ui-pagination-item-radius",
-      "default": "var(--ui-radius-sm)",
-      "description": "Item border radius"
-    },
-    {
-      "token": "--ui-pagination-item-bg",
-      "default": "transparent",
-      "description": "Item background"
-    },
-    {
-      "token": "--ui-pagination-item-bg-hover",
-      "default": "var(--ui-color-bg-subtle)",
-      "description": "Item hover background"
-    },
-    {
-      "token": "--ui-pagination-item-bg-active",
-      "default": "var(--ui-color-primary)",
-      "description": "Active item background"
-    },
-    {
-      "token": "--ui-pagination-item-color",
-      "default": "var(--ui-color-text)",
-      "description": "Item text color"
-    },
-    {
-      "token": "--ui-pagination-item-color-active",
-      "default": "var(--ui-color-text-inverse)",
-      "description": "Active item text color"
-    }
-  ]
-}

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

@@ -1,61 +0,0 @@
-{
-  "api": "./tabs.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "data": {
-        "tabs": [
-          { "label": "Tab 1", "active": true, "content": "Panel 1 content" },
-          { "label": "Tab 2", "active": false, "content": "Panel 2 content" },
-          { "label": "Tab 3", "active": false, "content": "Panel 3 content" }
-        ]
-      },
-      "examples": [
-        {
-          "html": "<div class=\"ui-tabs\"><div class=\"ui-tabs__list\"><button class=\"ui-tabs__tab ui-tabs__tab--active\">Tab 1</button><button class=\"ui-tabs__tab\">Tab 2</button><button class=\"ui-tabs__tab\">Tab 3</button></div><div class=\"ui-tabs__panel ui-tabs__panel--active\">Panel 1 content</div><div class=\"ui-tabs__panel\">Panel 2 content</div><div class=\"ui-tabs__panel\">Panel 3 content</div></div>",
-          "code": "<div class=\"ui-tabs\">\n  <div class=\"ui-tabs__list\">\n{% for t in tabs %}    <button class=\"ui-tabs__tab{% if t.active %} ui-tabs__tab--active{% endif %}\">{{ t.label }}</button>\n{% endfor %}  </div>\n{% for t in tabs %}  <div class=\"ui-tabs__panel{% if t.active %} ui-tabs__panel--active{% endif %}\">{{ t.content }}</div>\n{% endfor %}</div>"
-        }
-      ]
-    },
-    {
-      "title": "Two Tabs",
-      "data": {
-        "tabs": [{ "label": "Preview", "active": true }, { "label": "Code", "active": false }]
-      },
-      "examples": [
-        {
-          "html": "<div class=\"ui-tabs\"><div class=\"ui-tabs__list\"><button class=\"ui-tabs__tab ui-tabs__tab--active\">Preview</button><button class=\"ui-tabs__tab\">Code</button></div><div class=\"ui-tabs__panel ui-tabs__panel--active\"><div class=\"ui-card\">Preview content goes here</div></div><div class=\"ui-tabs__panel\"><pre class=\"ui-code-block\"><code>&lt;div&gt;Code snippet&lt;/div&gt;</code></pre></div></div>",
-          "code": "<div class=\"ui-tabs\">\n  <div class=\"ui-tabs__list\">\n{% for t in tabs %}    <button class=\"ui-tabs__tab{% if t.active %} ui-tabs__tab--active{% endif %}\">{{ t.label }}</button>\n{% endfor %}  </div>\n  <div class=\"ui-tabs__panel ui-tabs__panel--active\">...</div>\n  <div class=\"ui-tabs__panel\">...</div>\n</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-tabs-border-color",
-      "default": "var(--ui-color-border)",
-      "description": "Tab list border color"
-    },
-    {
-      "token": "--ui-tabs-tab-padding-x",
-      "default": "var(--ui-space-2)",
-      "description": "Tab horizontal padding"
-    },
-    {
-      "token": "--ui-tabs-tab-padding-y",
-      "default": "var(--ui-space-1)",
-      "description": "Tab vertical padding"
-    },
-    { "token": "--ui-tabs-tab-bg", "default": "transparent", "description": "Tab background" },
-    {
-      "token": "--ui-tabs-tab-bg-active",
-      "default": "var(--ui-color-bg)",
-      "description": "Active tab background"
-    },
-    {
-      "token": "--ui-tabs-panel-padding",
-      "default": "var(--ui-space-3)",
-      "description": "Panel padding"
-    }
-  ]
-}

package/src/04-components/overlays/dialog/dialog.docs.json

@@ -1,58 +0,0 @@
-{
-  "id": "dialog",
-  "type": "component",
-  "title": "Dialog",
-  "description": "Structured modal with header, body, and footer sections. Use with modal component for positioning.",
-  "api": "./dialog.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<div style=\"position: relative; height: 240px; background: var(--ui-color-bg-subtle);\"><div class=\"ui-modal ui-modal--visible\" style=\"position: absolute;\"><div class=\"ui-modal__content ui-dialog\" style=\"max-height: 200px;\"><header class=\"ui-dialog__header\"><h2 class=\"ui-dialog__title\">Dialog Title</h2><button class=\"ui-button ui-button--ghost ui-button--sm ui-dialog__close\">X</button></header><div class=\"ui-dialog__body\"><p>Dialog content goes here.</p></div><footer class=\"ui-dialog__footer\"><button class=\"ui-button ui-button--ghost\">Cancel</button><button class=\"ui-button\">Confirm</button></footer></div></div></div>",
-          "code": "<div class=\"ui-modal\">\n  <div class=\"ui-modal__content ui-dialog\">\n    <header class=\"ui-dialog__header\">\n      <h2 class=\"ui-dialog__title\">Dialog Title</h2>\n      <button class=\"ui-button ui-button--ghost ui-dialog__close\">X</button>\n    </header>\n    <div class=\"ui-dialog__body\">\n      <p>Dialog content goes here.</p>\n    </div>\n    <footer class=\"ui-dialog__footer\">\n      <button class=\"ui-button ui-button--ghost\">Cancel</button>\n      <button class=\"ui-button\">Confirm</button>\n    </footer>\n  </div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Borderless",
-      "examples": [
-        {
-          "html": "<div style=\"position: relative; height: 200px; background: var(--ui-color-bg-subtle);\"><div class=\"ui-modal ui-modal--visible\" style=\"position: absolute;\"><div class=\"ui-modal__content ui-dialog ui-dialog--borderless\" style=\"max-height: 180px;\"><header class=\"ui-dialog__header\"><h2 class=\"ui-dialog__title\">Simple Dialog</h2></header><div class=\"ui-dialog__body\"><p>Content without borders.</p></div><footer class=\"ui-dialog__footer\"><button class=\"ui-button\">OK</button></footer></div></div></div>",
-          "code": "<div class=\"ui-modal\">\n  <div class=\"ui-modal__content ui-dialog ui-dialog--borderless\">\n    ...\n  </div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Confirmation Dialog",
-      "examples": [
-        {
-          "html": "<div style=\"position: relative; height: 200px; background: var(--ui-color-bg-subtle);\"><div class=\"ui-modal ui-modal--sm ui-modal--visible\" style=\"position: absolute;\"><div class=\"ui-modal__content ui-dialog\"><header class=\"ui-dialog__header\"><h2 class=\"ui-dialog__title\">Delete Item?</h2></header><div class=\"ui-dialog__body\"><p>This action cannot be undone.</p></div><footer class=\"ui-dialog__footer\"><button class=\"ui-button ui-button--ghost\">Cancel</button><button class=\"ui-button ui-button--danger\">Delete</button></footer></div></div></div>",
-          "code": "<div class=\"ui-modal ui-modal--sm\">\n  <div class=\"ui-modal__content ui-dialog\">\n    <header class=\"ui-dialog__header\">\n      <h2 class=\"ui-dialog__title\">Delete Item?</h2>\n    </header>\n    <div class=\"ui-dialog__body\">\n      <p>This action cannot be undone.</p>\n    </div>\n    <footer class=\"ui-dialog__footer\">\n      <button class=\"ui-button ui-button--ghost\">Cancel</button>\n      <button class=\"ui-button ui-button--danger\">Delete</button>\n    </footer>\n  </div>\n</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-dialog-header-padding",
-      "default": "calc(var(--unit) * 2) calc(var(--unit) * 3)",
-      "description": "Header padding"
-    },
-    {
-      "token": "--ui-dialog-body-padding",
-      "default": "calc(var(--unit) * 3)",
-      "description": "Body padding"
-    },
-    {
-      "token": "--ui-dialog-footer-padding",
-      "default": "calc(var(--unit) * 2) calc(var(--unit) * 3)",
-      "description": "Footer padding"
-    },
-    {
-      "token": "--ui-dialog-border-color",
-      "default": "var(--ui-color-border)",
-      "description": "Section border color"
-    }
-  ]
-}

package/src/04-components/overlays/drawer/drawer.docs.json

@@ -1,78 +0,0 @@
-{
-  "api": "./drawer.api.json",
-  "sections": [
-    {
-      "title": "Default (End)",
-      "description": "Slides in from the end (right in LTR)",
-      "examples": [
-        {
-          "html": "<div style=\"position:relative;height:300px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)\"><div class=\"ui-drawer-overlay\" style=\"position:absolute\"></div><div class=\"ui-drawer ui-drawer--end\" style=\"position:absolute\" data-state=\"open\"><div class=\"ui-drawer__header\"><div><h2 class=\"ui-drawer__title\">Drawer Title</h2><p class=\"ui-drawer__description\">Optional description text</p></div><button class=\"ui-drawer__close ui-button ui-button--ghost ui-button--icon\">X</button></div><div class=\"ui-drawer__body\"><p>Drawer content goes here.</p></div><div class=\"ui-drawer__footer\"><button class=\"ui-button ui-button--secondary\">Cancel</button><button class=\"ui-button\">Save</button></div></div></div>"
-        }
-      ]
-    },
-    {
-      "title": "Positions",
-      "examples": [
-        {
-          "html": "<div style=\"position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)\"><div class=\"ui-drawer ui-drawer--start ui-drawer--sm\" style=\"position:absolute\" data-state=\"open\"><div class=\"ui-drawer__header\"><h2 class=\"ui-drawer__title\">Start</h2></div><div class=\"ui-drawer__body\"><p>From start edge</p></div></div></div>",
-          "layout": "stack"
-        },
-        {
-          "html": "<div style=\"position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)\"><div class=\"ui-drawer ui-drawer--top\" style=\"position:absolute\" data-state=\"open\"><div class=\"ui-drawer__header\"><h2 class=\"ui-drawer__title\">Top</h2></div><div class=\"ui-drawer__body\"><p>From top edge</p></div></div></div>",
-          "layout": "stack"
-        },
-        {
-          "html": "<div style=\"position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)\"><div class=\"ui-drawer ui-drawer--bottom\" style=\"position:absolute\" data-state=\"open\"><div class=\"ui-drawer__header\"><h2 class=\"ui-drawer__title\">Bottom</h2></div><div class=\"ui-drawer__body\"><p>From bottom edge</p></div></div></div>",
-          "layout": "stack"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "html": "<div style=\"position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)\"><div class=\"ui-drawer ui-drawer--end ui-drawer--sm\" style=\"position:absolute\" data-state=\"open\"><div class=\"ui-drawer__body\"><p>Small drawer</p></div></div></div>",
-          "layout": "stack"
-        },
-        {
-          "html": "<div style=\"position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)\"><div class=\"ui-drawer ui-drawer--end\" style=\"position:absolute\" data-state=\"open\"><div class=\"ui-drawer__body\"><p>Default drawer</p></div></div></div>",
-          "layout": "stack"
-        },
-        {
-          "html": "<div style=\"position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)\"><div class=\"ui-drawer ui-drawer--end ui-drawer--lg\" style=\"position:absolute\" data-state=\"open\"><div class=\"ui-drawer__body\"><p>Large drawer</p></div></div></div>",
-          "layout": "stack"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-drawer-size",
-      "default": "calc(var(--unit) * 40)",
-      "description": "Default width/height"
-    },
-    { "token": "--ui-drawer-max-size", "default": "90%", "description": "Maximum size" },
-    {
-      "token": "--ui-drawer-bg",
-      "default": "var(--ui-color-bg)",
-      "description": "Background color"
-    },
-    { "token": "--ui-drawer-shadow", "default": "var(--shadow-lg)", "description": "Box shadow" },
-    {
-      "token": "--ui-drawer-header-padding",
-      "default": "16px 24px",
-      "description": "Header padding"
-    },
-    { "token": "--ui-drawer-body-padding", "default": "24px", "description": "Body padding" },
-    {
-      "token": "--ui-drawer-footer-padding",
-      "default": "16px 24px",
-      "description": "Footer padding"
-    },
-    {
-      "token": "--ui-drawer-border-color",
-      "default": "var(--ui-color-border)",
-      "description": "Border color"
-    }
-  ]
-}

package/src/04-components/overlays/modal/modal.docs.json

@@ -1,86 +0,0 @@
-{
-  "id": "modal",
-  "type": "component",
-  "title": "Modal",
-  "description": "Container for modal dialogs. Use with overlay for backdrop effect.",
-  "api": "./modal.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<div style=\"position: relative; height: 200px; background: var(--ui-color-bg-subtle);\"><div class=\"ui-modal ui-modal--visible\" style=\"position: absolute;\"><div class=\"ui-modal__content\"><p>Modal content goes here</p></div></div></div>",
-          "code": "<div class=\"ui-overlay\"></div>\n<div class=\"ui-modal\">\n  <div class=\"ui-modal__content\">\n    <p>Modal content goes here</p>\n  </div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "data": {
-        "sizes": [
-          { "mod": "sm", "label": "Small" },
-          { "mod": "", "label": "Default" },
-          { "mod": "lg", "label": "Large" }
-        ]
-      },
-      "examples": [
-        {
-          "html": "<div style=\"position: relative; height: 120px; background: var(--ui-color-bg-subtle);\"><div class=\"ui-modal ui-modal--sm ui-modal--visible\" style=\"position: absolute;\"><div class=\"ui-modal__content\"><p>Small modal</p></div></div></div>",
-          "code": "<div class=\"ui-modal ui-modal--sm\">\n  <div class=\"ui-modal__content\">Small modal</div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "With Scrollable Content",
-      "examples": [
-        {
-          "html": "<div style=\"position: relative; height: 200px; background: var(--ui-color-bg-subtle);\"><div class=\"ui-modal ui-modal--visible\" style=\"position: absolute;\"><div class=\"ui-modal__content\" style=\"max-height: 150px;\"><div class=\"ui-modal__body\"><p>Line 1</p><p>Line 2</p><p>Line 3</p><p>Line 4</p><p>Line 5</p><p>Line 6</p></div></div></div></div>",
-          "code": "<div class=\"ui-modal\">\n  <div class=\"ui-modal__content\">\n    <div class=\"ui-modal__body\">\n      <!-- Scrollable content -->\n    </div>\n  </div>\n</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-modal-bg",
-      "default": "var(--ui-color-bg)",
-      "description": "Background color"
-    },
-    {
-      "token": "--ui-modal-radius",
-      "default": "var(--ui-radius-lg)",
-      "description": "Border radius"
-    },
-    {
-      "token": "--ui-modal-shadow",
-      "default": "0 24px 48px rgb(0 0 0 / 0.25)",
-      "description": "Box shadow"
-    },
-    {
-      "token": "--ui-modal-padding",
-      "default": "calc(var(--unit) * 3)",
-      "description": "Content padding"
-    },
-    {
-      "token": "--ui-modal-max-width",
-      "default": "calc(var(--unit) * 60)",
-      "description": "Max width (default)"
-    },
-    {
-      "token": "--ui-modal-max-width-sm",
-      "default": "calc(var(--unit) * 40)",
-      "description": "Max width (small)"
-    },
-    {
-      "token": "--ui-modal-max-width-lg",
-      "default": "calc(var(--unit) * 80)",
-      "description": "Max width (large)"
-    },
-    {
-      "token": "--ui-modal-max-height",
-      "default": "calc(100vh - var(--unit) * 8)",
-      "description": "Max height"
-    },
-    { "token": "--ui-modal-z", "default": "var(--ui-z-modal)", "description": "Z-index" }
-  ]
-}

package/src/04-components/overlays/overlay/overlay.docs.json

@@ -1,63 +0,0 @@
-{
-  "id": "overlay",
-  "type": "component",
-  "title": "Overlay",
-  "description": "Full viewport backdrop for modals, dialogs, and drawers. Controls visibility via state modifiers.",
-  "api": "./overlay.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<div style=\"position: relative; height: 120px; background: var(--ui-color-bg-subtle);\"><div class=\"ui-overlay\" style=\"position: absolute;\"></div><p style=\"position: relative; padding: var(--ui-space-2);\">Content behind overlay</p></div>",
-          "code": "<div class=\"ui-overlay\"></div>"
-        }
-      ]
-    },
-    {
-      "title": "Light Variant",
-      "examples": [
-        {
-          "html": "<div style=\"position: relative; height: 120px; background: var(--ui-color-text);\"><div class=\"ui-overlay ui-overlay--light\" style=\"position: absolute;\"></div><p style=\"position: relative; padding: var(--ui-space-2); color: white;\">Dark content behind light overlay</p></div>",
-          "code": "<div class=\"ui-overlay ui-overlay--light\"></div>"
-        }
-      ]
-    },
-    {
-      "title": "Blur Variant",
-      "examples": [
-        {
-          "html": "<div style=\"position: relative; height: 120px; background: linear-gradient(45deg, var(--ui-color-primary), var(--ui-color-success));\"><div class=\"ui-overlay ui-overlay--blur\" style=\"position: absolute;\"></div><p style=\"position: relative; padding: var(--ui-space-2); color: white;\">Blurred backdrop</p></div>",
-          "code": "<div class=\"ui-overlay ui-overlay--blur\"></div>"
-        }
-      ]
-    },
-    {
-      "title": "With Animation",
-      "examples": [
-        {
-          "html": "<div style=\"position: relative; height: 120px; background: var(--ui-color-bg-subtle);\"><div class=\"ui-overlay ui-overlay--animate ui-overlay--visible\" style=\"position: absolute;\"></div></div>",
-          "code": "<div class=\"ui-overlay ui-overlay--animate ui-overlay--visible\"></div>\n<!-- JS toggles between --visible and --hidden -->"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-overlay-bg",
-      "default": "rgb(0 0 0 / 0.5)",
-      "description": "Default backdrop color"
-    },
-    {
-      "token": "--ui-overlay-bg-light",
-      "default": "rgb(255 255 255 / 0.7)",
-      "description": "Light variant backdrop color"
-    },
-    {
-      "token": "--ui-overlay-bg-blur",
-      "default": "rgb(0 0 0 / 0.3)",
-      "description": "Blur variant backdrop color"
-    },
-    { "token": "--ui-overlay-z", "default": "var(--ui-z-overlay)", "description": "Z-index layer" }
-  ]
-}

package/src/05-utilities/border/index.scss

@@ -1,21 +0,0 @@
-@use '../../00-config/mixins/border' as *;
-
-// Border utilities - uses same mixins as components
-@layer utilities {
-  // Border
-  .border { @include border; }
-  .border-0 { border: none; }
-
-  // Radius
-  .rounded { @include rounded; }
-  .rounded-none { border-radius: 0; }
-  .rounded-sm { @include rounded(var(--ui-radius-sm)); }
-  .rounded-lg { @include rounded(var(--ui-radius-lg)); }
-  .rounded-full { @include rounded(var(--ui-radius-full)); }
-
-  // Background
-  .bg { @include surface; }
-  .bg-subtle { @include surface(var(--ui-color-bg-subtle)); }
-  .bg-muted { @include surface(var(--ui-color-bg-muted)); }
-  .bg-transparent { background: transparent; }
-}

package/src/testing/sidebar-toggles.spec.ts

@@ -1,103 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-// Needs docs server running at localhost:3000
-test.skip(!!process.env.CI, 'Sidebar toggle test requires docs server');
-
-test.describe('sidebar toggle buttons', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/');
-    // Clear sessionStorage/localStorage to start fresh
-    await page.evaluate(() => {
-      sessionStorage.clear();
-      localStorage.clear();
-    });
-    await page.reload();
-  });
-
-  test('all buttons start with aria-pressed=false', async ({ page }) => {
-    const buttons = page.locator('.ui-sidebar-nav__footer button[aria-pressed]');
-    const count = await buttons.count();
-    expect(count).toBe(5);
-    for (let i = 0; i < count; i++) {
-      await expect(buttons.nth(i)).toHaveAttribute('aria-pressed', 'false');
-    }
-  });
-
-  test('debug grid toggle adds class and sets aria-pressed', async ({ page }) => {
-    const btn = page.locator('button', { hasText: 'Toggle Grid' }).first();
-    await btn.click();
-    await expect(btn).toHaveAttribute('aria-pressed', 'true');
-    const hasClass = await page.evaluate(() => document.body.classList.contains('ui-debug-grid'));
-    expect(hasClass).toBe(true);
-
-    // Toggle off
-    await btn.click();
-    await expect(btn).toHaveAttribute('aria-pressed', 'false');
-    const removed = await page.evaluate(() => !document.body.classList.contains('ui-debug-grid'));
-    expect(removed).toBe(true);
-  });
-
-  test('debug grid overlay renders background-image', async ({ page }) => {
-    const btn = page.locator('button', { hasText: 'Toggle Grid' }).first();
-    await btn.click();
-
-    const bg = await page.evaluate(() => {
-      return window.getComputedStyle(document.body, '::after').backgroundImage;
-    });
-    expect(bg).not.toBe('none');
-  });
-
-  test('debug baseline toggle works', async ({ page }) => {
-    const btn = page.locator('button', { hasText: 'Toggle Baseline' });
-    await btn.click();
-    await expect(btn).toHaveAttribute('aria-pressed', 'true');
-    const hasClass = await page.evaluate(() =>
-      document.body.classList.contains('ui-debug-baseline'),
-    );
-    expect(hasClass).toBe(true);
-  });
-
-  test('debug outline toggle adds outlines to children', async ({ page }) => {
-    const btn = page.locator('button', { hasText: 'Toggle Outlines' });
-    await btn.click();
-    await expect(btn).toHaveAttribute('aria-pressed', 'true');
-    const outlineStyle = await page.evaluate(() => {
-      const el = document.querySelector('.ui-main');
-      return el ? window.getComputedStyle(el).outlineStyle : '';
-    });
-    expect(outlineStyle).toBe('solid');
-  });
-
-  test('dark mode toggle sets data-theme and aria-pressed', async ({ page }) => {
-    const btn = page.locator('#theme-toggle');
-    await expect(btn).toHaveAttribute('aria-pressed', 'false');
-
-    await btn.click();
-    await expect(btn).toHaveAttribute('aria-pressed', 'true');
-    await expect(btn).toHaveText('Light Mode');
-    const theme = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
-    expect(theme).toBe('dark');
-
-    await btn.click();
-    await expect(btn).toHaveAttribute('aria-pressed', 'false');
-    await expect(btn).toHaveText('Dark Mode');
-  });
-
-  test('debug state persists across page loads', async ({ page }) => {
-    // Enable grid
-    const gridBtn = page.locator('button', { hasText: 'Toggle Grid' }).first();
-    await gridBtn.click();
-    await expect(gridBtn).toHaveAttribute('aria-pressed', 'true');
-
-    // Reload page
-    await page.reload();
-
-    // Body should still have the class
-    const hasClass = await page.evaluate(() => document.body.classList.contains('ui-debug-grid'));
-    expect(hasClass).toBe(true);
-
-    // Button should reflect the restored state
-    const restoredBtn = page.locator('button', { hasText: 'Toggle Grid' }).first();
-    await expect(restoredBtn).toHaveAttribute('aria-pressed', 'true');
-  });
-});