@teseor/css 1.7.0 → 1.9.0

package/src/03-layout/box/box.docs.json

@@ -1,57 +0,0 @@
-{
-  "id": "box",
-  "type": "primitive",
-  "title": "Box",
-  "description": "Base container with style props. Foundation for layout primitives.",
-  "api": "box.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<div class=\"ui-box\">Content</div>",
-          "code": "<div class=\"ui-box\">Content</div>"
-        }
-      ]
-    },
-    {
-      "title": "Padding",
-      "examples": [
-        {
-          "layout": "stack",
-          "html": "<div class=\"ui-box ui-box--p-1 ui-box--bg-subtle\">Padding 1</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Padding 2</div><div class=\"ui-box ui-box--p-3 ui-box--bg-subtle\">Padding 3</div><div class=\"ui-box ui-box--p-4 ui-box--bg-subtle\">Padding 4</div>",
-          "code": "<div class=\"ui-box ui-box--p-1\">...</div>\n<div class=\"ui-box ui-box--p-2\">...</div>\n<div class=\"ui-box ui-box--p-3\">...</div>\n<div class=\"ui-box ui-box--p-4\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Background",
-      "examples": [
-        {
-          "layout": "stack",
-          "html": "<div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Subtle background</div><div class=\"ui-box ui-box--p-2 ui-box--bg-muted\">Muted background</div>",
-          "code": "<div class=\"ui-box ui-box--bg-subtle\">...</div>\n<div class=\"ui-box ui-box--bg-muted\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Rounded",
-      "examples": [
-        {
-          "layout": "cluster",
-          "html": "<div class=\"ui-box ui-box--p-3 ui-box--bg-subtle ui-box--rounded\">Rounded</div><div class=\"ui-box ui-box--p-3 ui-box--bg-subtle ui-box--rounded-lg\">Rounded lg</div>",
-          "code": "<div class=\"ui-box ui-box--rounded\">...</div>\n<div class=\"ui-box ui-box--rounded-lg\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Custom via CSS Variables",
-      "examples": [
-        {
-          "html": "<div class=\"ui-box\" style=\"--box-padding: var(--ui-space-3); --box-bg: var(--ui-color-primary); --box-color: white; --box-radius: var(--ui-radius-lg);\">Custom box</div>",
-          "code": "<div class=\"ui-box\" style=\"--box-padding: ...; --box-bg: ...;\">...</div>"
-        }
-      ]
-    }
-  ]
-}

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

@@ -1,34 +0,0 @@
-@use '../../00-config/tokens/variables' as t;
-
-// Box - base container with style props
-// Foundation for other layout primitives
-
-@layer primitives {
-  .box {
-    --_padding: var(--box-padding, 0);
-    --_bg: var(--box-bg, transparent);
-    --_color: var(--box-color, inherit);
-    --_radius: var(--box-radius, 0);
-
-    padding: var(--_padding);
-
-    color: var(--_color);
-
-    background: var(--_bg);
-    border-radius: var(--_radius);
-  }
-
-  // Padding modifiers
-  .box--p-1 { --_padding: var(--ui-space-1, #{t.$space-1}); }
-  .box--p-2 { --_padding: var(--ui-space-2, #{t.$space-2}); }
-  .box--p-3 { --_padding: var(--ui-space-3, #{t.$space-3}); }
-  .box--p-4 { --_padding: var(--ui-space-4, #{t.$space-4}); }
-
-  // Background modifiers
-  .box--bg-subtle { --_bg: var(--ui-color-bg-subtle, #{t.$color-bg-subtle}); }
-  .box--bg-muted { --_bg: var(--ui-color-bg-muted, #{t.$color-bg-muted}); }
-
-  // Border radius modifiers
-  .box--rounded { --_radius: var(--ui-radius-md, #{t.$radius-md}); }
-  .box--rounded-lg { --_radius: var(--ui-radius-lg, #{t.$radius-lg}); }
-}

package/src/03-layout/center/center.api.json

@@ -1,6 +0,0 @@
-{
-  "name": "center",
-  "element": "div",
-  "modifiers": {},
-  "cssVars": []
-}

package/src/03-layout/cluster/cluster.api.json

@@ -1,10 +0,0 @@
-{
-  "name": "cluster",
-  "element": "div",
-  "modifiers": {
-    "size": {
-      "values": ["xs", "md", "lg"]
-    }
-  },
-  "cssVars": []
-}

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

@@ -1,18 +0,0 @@
-@layer primitives {
-  .cluster {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--cluster-gap, var(--ui-space-2));
-  }
-
-  .cluster--xs { --cluster-gap: var(--ui-space-1); }
-  .cluster--sm { --cluster-gap: var(--ui-space-2); }
-  .cluster--md { --cluster-gap: var(--ui-space-4); }
-  .cluster--lg { --cluster-gap: var(--ui-space-6); }
-
-  .cluster--start { justify-content: flex-start; }
-  .cluster--center { justify-content: center; }
-  .cluster--end { justify-content: flex-end; }
-  .cluster--between { justify-content: space-between; }
-}

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

@@ -1,17 +0,0 @@
-@layer primitives {
-  .container {
-    max-inline-size: var(--container-width, calc(var(--unit) * 120));
-    padding-inline: var(--ui-space-4);
-  }
-
-  .container--center {
-    margin-inline: auto;
-  }
-
-  /* Size modifiers */
-  .container--sm { --container-width: calc(var(--unit) * 80); }
-  .container--md { --container-width: calc(var(--unit) * 100); }
-  .container--lg { --container-width: calc(var(--unit) * 120); }
-  .container--xl { --container-width: calc(var(--unit) * 160); }
-  .container--full { max-inline-size: none; }
-}

package/src/03-layout/content/content.api.json

@@ -1,26 +0,0 @@
-{
-  "name": "content",
-  "element": "div",
-  "modifiers": {
-    "prose": {
-      "type": "boolean"
-    },
-    "flush": {
-      "type": "boolean"
-    }
-  },
-  "cssVars": [
-    {
-      "name": "--ui-content-padding-block",
-      "default": "var(--ui-space-4)"
-    },
-    {
-      "name": "--ui-content-padding-inline",
-      "default": "var(--ui-space-4)"
-    },
-    {
-      "name": "--ui-content-gap",
-      "default": "var(--ui-space-3)"
-    }
-  ]
-}

package/src/03-layout/flex/flex.api.json

@@ -1,15 +0,0 @@
-{
-  "name": "flex",
-  "element": "div",
-  "modifiers": {
-    "row": { "type": "boolean" },
-    "col": { "type": "boolean" },
-    "wrap": { "type": "boolean" },
-    "items-center": { "type": "boolean" },
-    "justify-between": { "type": "boolean" },
-    "gap-1": { "type": "boolean" },
-    "gap-2": { "type": "boolean" },
-    "gap-4": { "type": "boolean" }
-  },
-  "cssVars": []
-}

package/src/03-layout/flex/flex.docs.json

@@ -1,56 +0,0 @@
-{
-  "id": "flex",
-  "type": "primitive",
-  "title": "Flex",
-  "description": "Flexbox layout container with direction, wrap, gap, and alignment controls.",
-  "api": "flex.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<div class=\"ui-flex\"><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">A</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">B</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">C</div></div>",
-          "code": "<div class=\"ui-flex\">\n  <div>A</div>\n  <div>B</div>\n  <div>C</div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Direction",
-      "examples": [
-        {
-          "layout": "stack",
-          "html": "<div class=\"ui-flex ui-flex--row\"><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Row</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Row</div></div><div class=\"ui-flex ui-flex--col\"><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Column</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Column</div></div>",
-          "code": "<div class=\"ui-flex ui-flex--row\">...</div>\n<div class=\"ui-flex ui-flex--col\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Alignment",
-      "examples": [
-        {
-          "html": "<div class=\"ui-flex ui-flex--items-center ui-flex--justify-between\" style=\"min-height: 80px; background: var(--ui-color-bg-subtle);\"><div class=\"ui-box ui-box--p-2 ui-box--bg-muted\">Start</div><div class=\"ui-box ui-box--p-2 ui-box--bg-muted\">Center</div><div class=\"ui-box ui-box--p-2 ui-box--bg-muted\">End</div></div>",
-          "code": "<div class=\"ui-flex ui-flex--items-center ui-flex--justify-between\">\n  ...\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Gap",
-      "examples": [
-        {
-          "layout": "stack",
-          "html": "<div class=\"ui-flex ui-flex--gap-1\"><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Gap 1</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Gap 1</div></div><div class=\"ui-flex ui-flex--gap-4\"><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Gap 4</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Gap 4</div></div>",
-          "code": "<div class=\"ui-flex ui-flex--gap-1\">...</div>\n<div class=\"ui-flex ui-flex--gap-4\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Wrap",
-      "examples": [
-        {
-          "html": "<div class=\"ui-flex ui-flex--wrap ui-flex--gap-2\" style=\"max-width: 200px;\"><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Wrap</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Wrap</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Wrap</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Wrap</div></div>",
-          "code": "<div class=\"ui-flex ui-flex--wrap\">...</div>"
-        }
-      ]
-    }
-  ]
-}

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

@@ -1,51 +0,0 @@
-@use '../../00-config/tokens/variables' as t;
-
-// Flex - flexbox layout container
-// Generic flexbox with direction, wrap, gap, alignment
-
-@layer primitives {
-  .flex {
-    --_gap: var(--flex-gap, var(--ui-space-2, #{t.$space-2}));
-    --_direction: var(--flex-direction, row);
-    --_wrap: var(--flex-wrap, nowrap);
-    --_align: var(--flex-align, stretch);
-    --_justify: var(--flex-justify, flex-start);
-
-    display: flex;
-    flex-direction: var(--_direction);
-    flex-wrap: var(--_wrap);
-    align-items: var(--_align);
-    justify-content: var(--_justify);
-    gap: var(--_gap);
-  }
-
-  // Direction modifiers
-  .flex--row { --_direction: row; }
-  .flex--col { --_direction: column; }
-  .flex--row-reverse { --_direction: row-reverse; }
-  .flex--col-reverse { --_direction: column-reverse; }
-
-  // Wrap modifiers
-  .flex--wrap { --_wrap: wrap; }
-  .flex--nowrap { --_wrap: nowrap; }
-
-  // Alignment modifiers
-  .flex--items-start { --_align: flex-start; }
-  .flex--items-center { --_align: center; }
-  .flex--items-end { --_align: flex-end; }
-  .flex--items-baseline { --_align: baseline; }
-
-  // Justify modifiers
-  .flex--justify-start { --_justify: flex-start; }
-  .flex--justify-center { --_justify: center; }
-  .flex--justify-end { --_justify: flex-end; }
-  .flex--justify-between { --_justify: space-between; }
-  .flex--justify-around { --_justify: space-around; }
-
-  // Gap modifiers
-  .flex--gap-0 { --_gap: 0; }
-  .flex--gap-1 { --_gap: var(--ui-space-1, #{t.$space-1}); }
-  .flex--gap-2 { --_gap: var(--ui-space-2, #{t.$space-2}); }
-  .flex--gap-3 { --_gap: var(--ui-space-3, #{t.$space-3}); }
-  .flex--gap-4 { --_gap: var(--ui-space-4, #{t.$space-4}); }
-}

package/src/03-layout/grid/grid.api.json

@@ -1,10 +0,0 @@
-{
-  "name": "grid",
-  "element": "div",
-  "modifiers": {
-    "columns": {
-      "values": ["2", "3", "4"]
-    }
-  },
-  "cssVars": []
-}

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

@@ -1,18 +0,0 @@
-@layer primitives {
-  .main {
-    padding-block-start: var(--topbar-height, 0);
-    margin-inline-start: var(--sidebar-width, calc(var(--unit) * 30));
-  }
-
-  /* When sidebar is on the end */
-  .main--sidebar-end {
-    margin-inline-start: 0;
-    margin-inline-end: var(--sidebar-width, calc(var(--unit) * 30));
-  }
-
-  /* No sidebar */
-  .main--full {
-    margin-inline-start: 0;
-    margin-inline-end: 0;
-  }
-}

package/src/03-layout/nav-rail/nav-rail.api.json

@@ -1,35 +0,0 @@
-{
-  "name": "nav-rail",
-  "element": "nav",
-  "modifiers": {
-    "end": {
-      "type": "boolean"
-    }
-  },
-  "elements": {
-    "items": {},
-    "actions": {}
-  },
-  "cssVars": [
-    {
-      "name": "--ui-nav-rail-width",
-      "default": "var(--ui-row-4)"
-    },
-    {
-      "name": "--ui-nav-rail-bg",
-      "default": "var(--ui-color-bg-subtle)"
-    },
-    {
-      "name": "--ui-nav-rail-border-color",
-      "default": "var(--ui-color-border)"
-    },
-    {
-      "name": "--ui-nav-rail-gap",
-      "default": "var(--ui-space-1)"
-    },
-    {
-      "name": "--ui-nav-rail-z",
-      "default": "var(--ui-z-sticky)"
-    }
-  ]
-}

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

@@ -1,30 +0,0 @@
-@layer primitives {
-  .sidebar {
-    display: flex;
-    flex-direction: column;
-    position: fixed;
-    inset-block-start: var(--topbar-height, 0);
-    inset-inline-start: 0;
-    z-index: var(--ui-z-sticky);
-
-    block-size: calc(100vh - var(--topbar-height, 0px));
-    inline-size: var(--sidebar-width, calc(var(--unit) * 30));
-    overflow-y: auto;
-
-    background: var(--ui-color-bg-subtle);
-    box-shadow: inset calc(var(--ui-border-width-sm) * -1) 0 0 0 var(--ui-color-border);
-  }
-
-  /* Width modifiers */
-  .sidebar--sm { --sidebar-width: calc(var(--unit) * 24); }
-  .sidebar--md { --sidebar-width: calc(var(--unit) * 30); }
-  .sidebar--lg { --sidebar-width: calc(var(--unit) * 40); }
-
-  /* Position modifier - sidebar on end (right in LTR) */
-  .sidebar--end {
-    inset-inline-start: auto;
-    inset-inline-end: 0;
-
-    box-shadow: inset var(--ui-border-width-sm) 0 0 0 var(--ui-color-border);
-  }
-}

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

@@ -1,64 +0,0 @@
-{
-  "name": "sidebar-nav",
-  "element": "nav",
-  "modifiers": {
-    "collapsed": {
-      "type": "boolean"
-    }
-  },
-  "elements": {
-    "header": {},
-    "content": {},
-    "footer": {},
-    "group": {},
-    "group-label": {},
-    "group-items": {},
-    "subgroup-label": {},
-    "item": {
-      "modifiers": {
-        "active": {
-          "type": "boolean"
-        },
-        "disabled": {
-          "type": "boolean"
-        },
-        "nested": {
-          "type": "boolean"
-        }
-      }
-    },
-    "icon": {},
-    "label": {},
-    "badge": {}
-  },
-  "cssVars": [
-    {
-      "name": "--ui-sidebar-nav-width",
-      "default": "calc(var(--ui-unit) * 30)"
-    },
-    {
-      "name": "--ui-sidebar-nav-width-collapsed",
-      "default": "var(--ui-row-3)"
-    },
-    {
-      "name": "--ui-sidebar-nav-bg",
-      "default": "var(--ui-color-bg-subtle)"
-    },
-    {
-      "name": "--ui-sidebar-nav-item-height",
-      "default": "var(--ui-row-2)"
-    },
-    {
-      "name": "--ui-sidebar-nav-item-hover-bg",
-      "default": "var(--ui-color-bg-muted)"
-    },
-    {
-      "name": "--ui-sidebar-nav-item-active-bg",
-      "default": "var(--ui-color-primary-subtle)"
-    },
-    {
-      "name": "--ui-sidebar-nav-item-active-color",
-      "default": "var(--ui-color-primary)"
-    }
-  ]
-}

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/03-layout/stack/stack.api.json

@@ -1,10 +0,0 @@
-{
-  "name": "stack",
-  "element": "div",
-  "modifiers": {
-    "size": {
-      "values": ["xs", "sm", "md", "lg"]
-    }
-  },
-  "cssVars": []
-}