@teseor/css 1.0.0

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

@@ -0,0 +1,116 @@
+{
+  "id": "grid-primitive",
+  "type": "primitive",
+  "title": "Grid",
+  "description": "CSS Grid with column variants.",
+  "api": "grid.api.json",
+  "sections": [
+    {
+      "title": "Columns",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-grid ui-grid--2",
+              "children": [
+                {
+                  "tag": "div",
+                  "text": "1",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-2)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "text": "2",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-2)"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-grid ui-grid--3",
+              "children": [
+                {
+                  "tag": "div",
+                  "text": "1",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-2)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "text": "2",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-2)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "text": "3",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-2)"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-grid ui-grid--4",
+              "children": [
+                {
+                  "tag": "div",
+                  "text": "1",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-2)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "text": "2",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-2)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "text": "3",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-2)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "text": "4",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-2)"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,15 @@
+@layer primitives {
+  .grid {
+    display: grid;
+    gap: var(--grid-gap, var(--ui-space-4));
+    grid-template-columns: repeat(var(--grid-cols, 1), minmax(0, 1fr));
+  }
+
+  .grid--2 { --grid-cols: 2; }
+  .grid--3 { --grid-cols: 3; }
+  .grid--4 { --grid-cols: 4; }
+
+  .grid--auto {
+    grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 16rem), 1fr));
+  }
+}

package/src/03-layout/index.scss

@@ -0,0 +1,11 @@
+@forward './box';
+@forward './stack';
+@forward './cluster';
+@forward './flex';
+@forward './center';
+@forward './grid';
+@forward './app-shell';
+@forward './sidebar';
+@forward './sidebar-nav';
+@forward './main';
+@forward './container';

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

@@ -0,0 +1,17 @@
+@layer primitives {
+  .main {
+    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/main/main.api.json

@@ -0,0 +1,13 @@
+{
+  "name": "main",
+  "element": "main",
+  "modifiers": {
+    "sidebar-end": {
+      "type": "boolean"
+    },
+    "full": {
+      "type": "boolean"
+    }
+  },
+  "cssVars": []
+}

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

@@ -0,0 +1,30 @@
+@layer primitives {
+  .sidebar {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    z-index: var(--ui-z-sticky);
+
+    block-size: 100vh;
+    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/sidebar.api.json

@@ -0,0 +1,13 @@
+{
+  "name": "sidebar",
+  "element": "aside",
+  "modifiers": {
+    "size": {
+      "values": ["sm", "md", "lg"]
+    },
+    "end": {
+      "type": "boolean"
+    }
+  },
+  "cssVars": []
+}

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

@@ -0,0 +1,209 @@
+// Sidebar Navigation
+// Primary navigation for sidebar with groups, items, and nested levels
+
+@layer primitives {
+  .sidebar-nav {
+    // Tokens
+    --_width: var(--ui-sidebar-nav-width, calc(var(--ui-unit) * 30));
+    --_bg: var(--ui-sidebar-nav-bg, var(--ui-color-bg-subtle));
+    --_border-color: var(--ui-sidebar-nav-border-color, var(--ui-color-border));
+    --_padding: var(--ui-sidebar-nav-padding, var(--ui-space-2));
+
+    // Styles
+    display: flex;
+    flex-direction: column;
+
+    block-size: 100%;
+    inline-size: var(--_width);
+
+    background: var(--_bg);
+  }
+
+  // Header - sticky at top
+  .sidebar-nav__header {
+    --_padding: var(--ui-sidebar-nav-header-padding, var(--ui-space-2));
+
+    flex-shrink: 0;
+
+    padding: var(--_padding);
+
+    box-shadow: inset 0 calc(var(--ui-border-width-sm) * -1) 0 0 var(--_border-color);
+  }
+
+  // Content - scrollable
+  .sidebar-nav__content {
+    flex: 1;
+
+    padding: var(--_padding);
+    overflow-y: auto;
+  }
+
+  // Footer - sticky at bottom
+  .sidebar-nav__footer {
+    --_padding: var(--ui-sidebar-nav-footer-padding, var(--ui-space-2));
+
+    flex-shrink: 0;
+
+    padding: var(--_padding);
+
+    box-shadow: inset 0 var(--ui-border-width-sm) 0 0 var(--_border-color);
+  }
+
+  // Group container
+  .sidebar-nav__group {
+    margin-block-end: var(--ui-space-2);
+  }
+
+  // Group label (section heading)
+  .sidebar-nav__group-label {
+    --_font-size: var(--ui-sidebar-nav-group-label-size, var(--ui-size-xs));
+    --_color: var(--ui-sidebar-nav-group-label-color, var(--ui-color-text-muted));
+    --_weight: var(--ui-sidebar-nav-group-label-weight, var(--ui-weight-bold));
+
+    display: block;
+
+    padding: var(--ui-space-1) var(--ui-space-2);
+    margin: 0;
+
+    font-size: var(--_font-size);
+    font-weight: var(--_weight);
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--_color);
+  }
+
+  // Group items container
+  .sidebar-nav__group-items {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-half);
+
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  // Subgroup label (nested section)
+  .sidebar-nav__subgroup-label {
+    display: block;
+
+    padding: var(--ui-space-1) var(--ui-space-2);
+    margin: 0;
+    margin-block-start: var(--ui-space-1);
+
+    font-size: var(--ui-size-xs);
+    font-weight: var(--ui-weight-medium);
+    color: var(--ui-color-text-muted);
+  }
+
+  // Nav item (link wrapper)
+  .sidebar-nav__item {
+    --_height: var(--ui-sidebar-nav-item-height, var(--ui-row-2));
+    --_padding-inline: var(--ui-sidebar-nav-item-padding-inline, var(--ui-space-2));
+    --_font-size: var(--ui-sidebar-nav-item-size, var(--ui-size-sm));
+    --_color: var(--ui-sidebar-nav-item-color, var(--ui-color-text));
+    --_bg: var(--ui-sidebar-nav-item-bg, transparent);
+    --_radius: var(--ui-sidebar-nav-item-radius, var(--ui-radius-sm));
+
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-1);
+
+    min-block-size: var(--_height);
+    padding-inline: var(--_padding-inline);
+
+    font-size: var(--_font-size);
+    font-weight: var(--_weight, normal);
+    text-decoration: none;
+    color: var(--_color);
+
+    background: var(--_bg);
+    border-radius: var(--_radius);
+    cursor: pointer;
+
+    transition:
+      background var(--ui-duration-fast) var(--ui-easing-default),
+      color var(--ui-duration-fast) var(--ui-easing-default);
+  }
+
+  .sidebar-nav__item:hover {
+    --_bg: var(--ui-sidebar-nav-item-hover-bg, var(--ui-color-bg-muted));
+  }
+
+  .sidebar-nav__item:visited {
+    color: var(--_color);
+  }
+
+  .sidebar-nav__item:focus-visible {
+    outline: 2px solid var(--ui-color-focus);
+    outline-offset: -2px;
+  }
+
+  // Active state
+  .sidebar-nav__item--active {
+    --_bg: var(--ui-sidebar-nav-item-active-bg, var(--ui-color-primary-subtle));
+    --_color: var(--ui-sidebar-nav-item-active-color, var(--ui-color-primary));
+    --_weight: var(--ui-sidebar-nav-item-active-weight, var(--ui-weight-medium));
+  }
+
+  // Nested item indent
+  .sidebar-nav__item--nested {
+    --_padding-inline-start: var(--ui-sidebar-nav-item-nested-indent, var(--ui-space-4));
+
+    padding-inline-start: var(--_padding-inline-start);
+  }
+
+  // Disabled state
+  .sidebar-nav__item--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  // Icon container
+  .sidebar-nav__icon {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    block-size: var(--ui-size-md);
+    inline-size: var(--ui-size-md);
+  }
+
+  // Label text
+  .sidebar-nav__label {
+    flex: 1;
+
+    min-inline-size: 0;
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // Badge (counts, status)
+  .sidebar-nav__badge {
+    flex-shrink: 0;
+
+    margin-inline-start: auto;
+  }
+
+  // Collapsed mode - icon only
+  .sidebar-nav--collapsed {
+    --_width: var(--ui-sidebar-nav-width-collapsed, var(--ui-row-3));
+
+    .sidebar-nav__label,
+    .sidebar-nav__badge,
+    .sidebar-nav__group-label,
+    .sidebar-nav__subgroup-label {
+      display: none;
+    }
+
+    .sidebar-nav__item {
+      justify-content: center;
+
+      padding-inline: var(--ui-space-1);
+    }
+  }
+}

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

@@ -0,0 +1,115 @@
+{
+  "name": "sidebar-nav",
+  "baseClass": "sidebar-nav",
+  "element": "nav",
+  "description": "Navigation component for sidebars with support for groups, nested items, icons, and badges",
+  "modifiers": {
+    "collapsed": {
+      "type": "boolean",
+      "description": "Icon-only mode, hides labels and badges"
+    }
+  },
+  "elements": {
+    "header": {
+      "element": "div",
+      "description": "Sticky header section"
+    },
+    "content": {
+      "element": "div",
+      "description": "Scrollable content area"
+    },
+    "footer": {
+      "element": "div",
+      "description": "Sticky footer section"
+    },
+    "group": {
+      "element": "div",
+      "description": "Navigation group container"
+    },
+    "group-label": {
+      "element": "span",
+      "description": "Group section heading"
+    },
+    "group-items": {
+      "element": "ul",
+      "description": "List of nav items in a group"
+    },
+    "subgroup-label": {
+      "element": "span",
+      "description": "Nested subgroup heading"
+    },
+    "item": {
+      "element": "a",
+      "description": "Navigation link",
+      "modifiers": {
+        "active": {
+          "type": "boolean",
+          "description": "Current/active page state"
+        },
+        "disabled": {
+          "type": "boolean",
+          "description": "Non-interactive item"
+        },
+        "nested": {
+          "type": "boolean",
+          "description": "Indented nested item"
+        }
+      }
+    },
+    "icon": {
+      "element": "span",
+      "description": "Icon container"
+    },
+    "label": {
+      "element": "span",
+      "description": "Text label"
+    },
+    "badge": {
+      "element": "span",
+      "description": "Badge or count indicator"
+    }
+  },
+  "accessibility": {
+    "role": "navigation",
+    "aria-label": "Required - descriptive label for the navigation",
+    "aria-current": "Use 'page' on active item link",
+    "keyboard": "Tab navigation between focusable items"
+  },
+  "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/icon-only 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"
+    }
+  ]
+}

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

@@ -0,0 +1,100 @@
+{
+  "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/sidebar-nav/sidebar-nav.visual.spec.ts

@@ -0,0 +1,14 @@
+import { resolve } from 'node:path';
+import { expect, test } from '@playwright/test';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+
+const DOCS_PATH = resolve(__dirname, 'sidebar-nav.docs.json');
+
+test.describe('sidebar-nav visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await validateGridRhythm(page, 'sidebar-nav__item');
+    await saveForLostPixel(page, 'sidebar-nav');
+    await expect(page.locator('.test-container')).toHaveScreenshot('sidebar-nav-all.png');
+  });
+});