@teseor/css 1.7.0 → 1.9.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/index.scss

@@ -1,77 +0,0 @@
-@use '../../../00-config/tokens/variables' as t;
-
-// Token definitions
-@layer components.tokens {
-  .tabs {
-    --_border-color: var(--ui-tabs-border-color, var(--ui-color-border, #{t.$color-border}));
-    --_tab-padding-x: var(--ui-tabs-tab-padding-x, var(--ui-space-2, #{t.$space-2}));
-    --_tab-padding-y: var(--ui-tabs-tab-padding-y, var(--ui-space-1, #{t.$space-1}));
-    --_tab-bg: var(--ui-tabs-tab-bg, transparent);
-    --_tab-bg-active: var(--ui-tabs-tab-bg-active, var(--ui-color-bg, #{t.$color-bg}));
-    --_panel-padding: var(--ui-tabs-panel-padding, var(--ui-space-3, #{t.$space-3}));
-  }
-}
-
-// Implementation
-@layer components.styles {
-  .tabs__list {
-    display: flex;
-    align-items: stretch;
-    gap: var(--ui-space-1, #{t.$space-1});
-
-    box-sizing: border-box;
-    block-size: var(--ui-row-2, #{t.$row-2});
-
-    // Use box-shadow instead of border to avoid affecting height
-    box-shadow: inset 0 calc(var(--ui-border-width-sm, #{t.$border-width-sm}) * -1) 0 var(--_border-color);
-  }
-
-  .tabs__tab {
-    display: inline-flex;
-    align-items: center;
-
-    box-sizing: border-box;
-    block-size: var(--ui-row-2, #{t.$row-2});
-    padding-inline: var(--_tab-padding-x);
-    margin: 0;
-
-    font-family: var(--ui-font-sans, #{t.$font-sans});
-    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
-    font-weight: var(--ui-weight-medium, #{t.$weight-medium});
-    line-height: 1;
-    color: var(--ui-color-text-muted, #{t.$color-text-muted});
-
-    background: var(--_tab-bg);
-    border: none;
-    // Use box-shadow for indicator to avoid affecting height
-    box-shadow: inset 0 calc(var(--ui-border-width-md, #{t.$border-width-md}) * -1) 0 transparent;
-    cursor: pointer;
-
-    transition:
-      color var(--ui-duration-base) var(--ui-ease-default),
-      box-shadow var(--ui-duration-base) var(--ui-ease-default);
-
-    &:hover {
-      color: var(--ui-color-text, #{t.$color-text});
-    }
-
-    &--active {
-      color: var(--ui-color-primary, #{t.$color-primary});
-
-      background: var(--_tab-bg-active);
-      box-shadow: inset 0 calc(var(--ui-border-width-md, #{t.$border-width-md}) * -1) 0 var(--ui-color-primary, #{t.$color-primary});
-    }
-  }
-
-  .tabs__panel {
-    display: none;
-
-    padding: var(--_panel-padding);
-
-    line-height: var(--ui-row-1, #{t.$row});
-
-    &--active {
-      display: block;
-    }
-  }
-}

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

@@ -1,48 +0,0 @@
-{
-  "name": "tabs",
-  "element": "div",
-  "modifiers": {},
-  "elements": {
-    "list": {},
-    "tab": {
-      "modifiers": {
-        "active": {
-          "type": "boolean"
-        }
-      }
-    },
-    "panel": {
-      "modifiers": {
-        "active": {
-          "type": "boolean"
-        }
-      }
-    }
-  },
-  "cssVars": [
-    {
-      "name": "--ui-tabs-border-color",
-      "default": "var(--ui-color-border)"
-    },
-    {
-      "name": "--ui-tabs-tab-padding-x",
-      "default": "var(--ui-space-2)"
-    },
-    {
-      "name": "--ui-tabs-tab-padding-y",
-      "default": "var(--ui-space-1)"
-    },
-    {
-      "name": "--ui-tabs-tab-bg",
-      "default": "transparent"
-    },
-    {
-      "name": "--ui-tabs-tab-bg-active",
-      "default": "var(--ui-color-bg)"
-    },
-    {
-      "name": "--ui-tabs-panel-padding",
-      "default": "var(--ui-space-3)"
-    }
-  ]
-}

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.api.json

@@ -1,34 +0,0 @@
-{
-  "name": "dialog",
-  "element": "div",
-  "modifiers": {
-    "borderless": {
-      "type": "boolean"
-    }
-  },
-  "elements": {
-    "header": {},
-    "title": {},
-    "close": {},
-    "body": {},
-    "footer": {}
-  },
-  "cssVars": [
-    {
-      "name": "--ui-dialog-header-padding",
-      "default": "calc(#{t.$unit} * 2"
-    },
-    {
-      "name": "--ui-dialog-body-padding",
-      "default": "calc(#{t.$unit} * 3"
-    },
-    {
-      "name": "--ui-dialog-footer-padding",
-      "default": "calc(#{t.$unit} * 2"
-    },
-    {
-      "name": "--ui-dialog-border-color",
-      "default": "var(--ui-color-border)"
-    }
-  ]
-}

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.api.json

@@ -1,55 +0,0 @@
-{
-  "name": "drawer",
-  "element": "div",
-  "modifiers": {
-    "position": {
-      "values": ["start", "end", "top", "bottom"]
-    },
-    "size": {
-      "values": ["sm", "lg"]
-    }
-  },
-  "elements": {
-    "header": {},
-    "title": {},
-    "description": {},
-    "close": {},
-    "body": {},
-    "footer": {}
-  },
-  "relatedComponents": ["drawer-overlay"],
-  "cssVars": [
-    {
-      "name": "--ui-drawer-size",
-      "default": "calc(#{t.$unit} * 40"
-    },
-    {
-      "name": "--ui-drawer-max-size",
-      "default": "90%"
-    },
-    {
-      "name": "--ui-drawer-bg",
-      "default": "var(--ui-color-bg)"
-    },
-    {
-      "name": "--ui-drawer-shadow",
-      "default": "var(--shadow-lg)"
-    },
-    {
-      "name": "--ui-drawer-header-padding",
-      "default": "calc(#{t.$unit} * 2"
-    },
-    {
-      "name": "--ui-drawer-body-padding",
-      "default": "calc(#{t.$unit} * 3"
-    },
-    {
-      "name": "--ui-drawer-footer-padding",
-      "default": "calc(#{t.$unit} * 2"
-    },
-    {
-      "name": "--ui-drawer-border-color",
-      "default": "var(--ui-color-border)"
-    }
-  ]
-}

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.api.json

@@ -1,54 +0,0 @@
-{
-  "name": "modal",
-  "element": "div",
-  "modifiers": {
-    "visible": {
-      "type": "boolean"
-    },
-    "size": {
-      "values": ["sm"]
-    }
-  },
-  "elements": {
-    "content": {},
-    "body": {}
-  },
-  "cssVars": [
-    {
-      "name": "--ui-modal-bg",
-      "default": "var(--ui-color-bg)"
-    },
-    {
-      "name": "--ui-modal-radius",
-      "default": "var(--ui-radius-lg)"
-    },
-    {
-      "name": "--ui-modal-shadow",
-      "default": "0 calc(#{t.$unit} * 3"
-    },
-    {
-      "name": "--ui-modal-padding",
-      "default": "calc(#{t.$unit} * 3"
-    },
-    {
-      "name": "--ui-modal-max-width",
-      "default": "calc(#{t.$unit} * 60"
-    },
-    {
-      "name": "--ui-modal-max-height",
-      "default": "calc(100vh - #{t.$unit} * 8"
-    },
-    {
-      "name": "--ui-modal-z",
-      "default": "var(--ui-z-modal)"
-    },
-    {
-      "name": "--ui-modal-max-width-sm",
-      "default": "calc(#{t.$unit} * 40"
-    },
-    {
-      "name": "--ui-modal-max-width-lg",
-      "default": "calc(#{t.$unit} * 80"
-    }
-  ]
-}

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" }
-  ]
-}