@teseor/css 1.7.0 → 1.9.0

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

@@ -0,0 +1,827 @@
+{
+  "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": [
+        {
+          "items": [
+            {
+              "tag": "nav",
+              "class": "ui-sidebar-nav",
+              "attrs": { "aria-label": "Main navigation", "style": "block-size: 400px;" },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-sidebar-nav__header",
+                  "children": [{ "tag": "strong", "text": "App Name" }]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-sidebar-nav__content",
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-sidebar-nav__group",
+                      "children": [
+                        { "tag": "span", "class": "ui-sidebar-nav__group-label", "text": "Main" },
+                        {
+                          "tag": "ul",
+                          "class": "ui-sidebar-nav__group-items",
+                          "children": [
+                            {
+                              "tag": "li",
+                              "children": [
+                                {
+                                  "tag": "a",
+                                  "class": "ui-sidebar-nav__item ui-sidebar-nav__item--active",
+                                  "attrs": { "href": "#", "aria-current": "page" },
+                                  "children": [
+                                    {
+                                      "tag": "span",
+                                      "class": "ui-sidebar-nav__label",
+                                      "text": "Dashboard"
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "tag": "li",
+                              "children": [
+                                {
+                                  "tag": "a",
+                                  "class": "ui-sidebar-nav__item",
+                                  "attrs": { "href": "#" },
+                                  "children": [
+                                    {
+                                      "tag": "span",
+                                      "class": "ui-sidebar-nav__label",
+                                      "text": "Projects"
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "tag": "li",
+                              "children": [
+                                {
+                                  "tag": "a",
+                                  "class": "ui-sidebar-nav__item",
+                                  "attrs": { "href": "#" },
+                                  "children": [
+                                    {
+                                      "tag": "span",
+                                      "class": "ui-sidebar-nav__label",
+                                      "text": "Tasks"
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "div",
+                      "class": "ui-sidebar-nav__group",
+                      "children": [
+                        {
+                          "tag": "span",
+                          "class": "ui-sidebar-nav__group-label",
+                          "text": "Settings"
+                        },
+                        {
+                          "tag": "ul",
+                          "class": "ui-sidebar-nav__group-items",
+                          "children": [
+                            {
+                              "tag": "li",
+                              "children": [
+                                {
+                                  "tag": "a",
+                                  "class": "ui-sidebar-nav__item",
+                                  "attrs": { "href": "#" },
+                                  "children": [
+                                    {
+                                      "tag": "span",
+                                      "class": "ui-sidebar-nav__label",
+                                      "text": "Profile"
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "tag": "li",
+                              "children": [
+                                {
+                                  "tag": "a",
+                                  "class": "ui-sidebar-nav__item",
+                                  "attrs": { "href": "#" },
+                                  "children": [
+                                    {
+                                      "tag": "span",
+                                      "class": "ui-sidebar-nav__label",
+                                      "text": "Preferences"
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-sidebar-nav__footer",
+                  "children": [
+                    {
+                      "tag": "a",
+                      "class": "ui-sidebar-nav__item",
+                      "attrs": { "href": "#" },
+                      "children": [
+                        { "tag": "span", "class": "ui-sidebar-nav__label", "text": "Logout" }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "With Icons",
+      "description": "Navigation items with icons for visual clarity.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "nav",
+              "class": "ui-sidebar-nav",
+              "attrs": { "aria-label": "Navigation", "style": "block-size: 300px;" },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-sidebar-nav__content",
+                  "children": [
+                    {
+                      "tag": "ul",
+                      "class": "ui-sidebar-nav__group-items",
+                      "children": [
+                        {
+                          "tag": "li",
+                          "children": [
+                            {
+                              "tag": "a",
+                              "class": "ui-sidebar-nav__item ui-sidebar-nav__item--active",
+                              "attrs": { "href": "#", "aria-current": "page" },
+                              "children": [
+                                {
+                                  "tag": "span",
+                                  "class": "ui-sidebar-nav__icon",
+                                  "children": [
+                                    {
+                                      "tag": "svg",
+                                      "attrs": {
+                                        "width": "16",
+                                        "height": "16",
+                                        "viewBox": "0 0 24 24",
+                                        "fill": "none",
+                                        "stroke": "currentColor",
+                                        "stroke-width": "2"
+                                      },
+                                      "children": [
+                                        {
+                                          "tag": "path",
+                                          "attrs": {
+                                            "d": "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                { "tag": "span", "class": "ui-sidebar-nav__label", "text": "Home" }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "tag": "li",
+                          "children": [
+                            {
+                              "tag": "a",
+                              "class": "ui-sidebar-nav__item",
+                              "attrs": { "href": "#" },
+                              "children": [
+                                {
+                                  "tag": "span",
+                                  "class": "ui-sidebar-nav__icon",
+                                  "children": [
+                                    {
+                                      "tag": "svg",
+                                      "attrs": {
+                                        "width": "16",
+                                        "height": "16",
+                                        "viewBox": "0 0 24 24",
+                                        "fill": "none",
+                                        "stroke": "currentColor",
+                                        "stroke-width": "2"
+                                      },
+                                      "children": [
+                                        {
+                                          "tag": "path",
+                                          "attrs": {
+                                            "d": "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"
+                                          }
+                                        },
+                                        {
+                                          "tag": "circle",
+                                          "attrs": { "cx": "9", "cy": "7", "r": "4" }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                { "tag": "span", "class": "ui-sidebar-nav__label", "text": "Users" }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "tag": "li",
+                          "children": [
+                            {
+                              "tag": "a",
+                              "class": "ui-sidebar-nav__item",
+                              "attrs": { "href": "#" },
+                              "children": [
+                                {
+                                  "tag": "span",
+                                  "class": "ui-sidebar-nav__icon",
+                                  "children": [
+                                    {
+                                      "tag": "svg",
+                                      "attrs": {
+                                        "width": "16",
+                                        "height": "16",
+                                        "viewBox": "0 0 24 24",
+                                        "fill": "none",
+                                        "stroke": "currentColor",
+                                        "stroke-width": "2"
+                                      },
+                                      "children": [
+                                        {
+                                          "tag": "circle",
+                                          "attrs": { "cx": "12", "cy": "12", "r": "3" }
+                                        },
+                                        {
+                                          "tag": "path",
+                                          "attrs": {
+                                            "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"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                {
+                                  "tag": "span",
+                                  "class": "ui-sidebar-nav__label",
+                                  "text": "Settings"
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "With Badges",
+      "description": "Navigation items with badges for counts or status indicators.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "nav",
+              "class": "ui-sidebar-nav",
+              "attrs": { "aria-label": "Navigation", "style": "block-size: 200px;" },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-sidebar-nav__content",
+                  "children": [
+                    {
+                      "tag": "ul",
+                      "class": "ui-sidebar-nav__group-items",
+                      "children": [
+                        {
+                          "tag": "li",
+                          "children": [
+                            {
+                              "tag": "a",
+                              "class": "ui-sidebar-nav__item",
+                              "attrs": { "href": "#" },
+                              "children": [
+                                {
+                                  "tag": "span",
+                                  "class": "ui-sidebar-nav__label",
+                                  "text": "Inbox"
+                                },
+                                {
+                                  "tag": "span",
+                                  "class": "ui-sidebar-nav__badge",
+                                  "children": [
+                                    {
+                                      "tag": "span",
+                                      "class": "ui-badge ui-badge--primary",
+                                      "text": "12"
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "tag": "li",
+                          "children": [
+                            {
+                              "tag": "a",
+                              "class": "ui-sidebar-nav__item",
+                              "attrs": { "href": "#" },
+                              "children": [
+                                {
+                                  "tag": "span",
+                                  "class": "ui-sidebar-nav__label",
+                                  "text": "Notifications"
+                                },
+                                {
+                                  "tag": "span",
+                                  "class": "ui-sidebar-nav__badge",
+                                  "children": [
+                                    {
+                                      "tag": "span",
+                                      "class": "ui-badge ui-badge--danger",
+                                      "text": "3"
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "tag": "li",
+                          "children": [
+                            {
+                              "tag": "a",
+                              "class": "ui-sidebar-nav__item",
+                              "attrs": { "href": "#" },
+                              "children": [
+                                {
+                                  "tag": "span",
+                                  "class": "ui-sidebar-nav__label",
+                                  "text": "Updates"
+                                },
+                                {
+                                  "tag": "span",
+                                  "class": "ui-sidebar-nav__badge",
+                                  "children": [
+                                    { "tag": "span", "class": "ui-status ui-status--success" }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Nested Items",
+      "description": "Navigation with nested/indented items for sub-sections.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "nav",
+              "class": "ui-sidebar-nav",
+              "attrs": { "aria-label": "Navigation", "style": "block-size: 280px;" },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-sidebar-nav__content",
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-sidebar-nav__group",
+                      "children": [
+                        {
+                          "tag": "span",
+                          "class": "ui-sidebar-nav__group-label",
+                          "text": "Components"
+                        },
+                        {
+                          "tag": "ul",
+                          "class": "ui-sidebar-nav__group-items",
+                          "children": [
+                            {
+                              "tag": "li",
+                              "children": [
+                                {
+                                  "tag": "span",
+                                  "class": "ui-sidebar-nav__subgroup-label",
+                                  "text": "Actions"
+                                }
+                              ]
+                            },
+                            {
+                              "tag": "li",
+                              "children": [
+                                {
+                                  "tag": "a",
+                                  "class": "ui-sidebar-nav__item ui-sidebar-nav__item--nested",
+                                  "attrs": { "href": "#" },
+                                  "children": [
+                                    {
+                                      "tag": "span",
+                                      "class": "ui-sidebar-nav__label",
+                                      "text": "Button"
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "tag": "li",
+                              "children": [
+                                {
+                                  "tag": "a",
+                                  "class": "ui-sidebar-nav__item ui-sidebar-nav__item--nested ui-sidebar-nav__item--active",
+                                  "attrs": { "href": "#", "aria-current": "page" },
+                                  "children": [
+                                    {
+                                      "tag": "span",
+                                      "class": "ui-sidebar-nav__label",
+                                      "text": "Button Group"
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "tag": "li",
+                              "children": [
+                                {
+                                  "tag": "span",
+                                  "class": "ui-sidebar-nav__subgroup-label",
+                                  "text": "Forms"
+                                }
+                              ]
+                            },
+                            {
+                              "tag": "li",
+                              "children": [
+                                {
+                                  "tag": "a",
+                                  "class": "ui-sidebar-nav__item ui-sidebar-nav__item--nested",
+                                  "attrs": { "href": "#" },
+                                  "children": [
+                                    {
+                                      "tag": "span",
+                                      "class": "ui-sidebar-nav__label",
+                                      "text": "Input"
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "tag": "li",
+                              "children": [
+                                {
+                                  "tag": "a",
+                                  "class": "ui-sidebar-nav__item ui-sidebar-nav__item--nested",
+                                  "attrs": { "href": "#" },
+                                  "children": [
+                                    {
+                                      "tag": "span",
+                                      "class": "ui-sidebar-nav__label",
+                                      "text": "Select"
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Collapsed",
+      "description": "Icon-only mode for compact sidebars.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "nav",
+              "class": "ui-sidebar-nav ui-sidebar-nav--collapsed",
+              "attrs": { "aria-label": "Navigation", "style": "block-size: 200px;" },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-sidebar-nav__content",
+                  "children": [
+                    {
+                      "tag": "ul",
+                      "class": "ui-sidebar-nav__group-items",
+                      "children": [
+                        {
+                          "tag": "li",
+                          "children": [
+                            {
+                              "tag": "a",
+                              "class": "ui-sidebar-nav__item ui-sidebar-nav__item--active",
+                              "attrs": {
+                                "href": "#",
+                                "aria-current": "page",
+                                "aria-label": "Home"
+                              },
+                              "children": [
+                                {
+                                  "tag": "span",
+                                  "class": "ui-sidebar-nav__icon",
+                                  "children": [
+                                    {
+                                      "tag": "svg",
+                                      "attrs": {
+                                        "width": "16",
+                                        "height": "16",
+                                        "viewBox": "0 0 24 24",
+                                        "fill": "none",
+                                        "stroke": "currentColor",
+                                        "stroke-width": "2"
+                                      },
+                                      "children": [
+                                        {
+                                          "tag": "path",
+                                          "attrs": {
+                                            "d": "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                { "tag": "span", "class": "ui-sidebar-nav__label", "text": "Home" }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "tag": "li",
+                          "children": [
+                            {
+                              "tag": "a",
+                              "class": "ui-sidebar-nav__item",
+                              "attrs": { "href": "#", "aria-label": "Users" },
+                              "children": [
+                                {
+                                  "tag": "span",
+                                  "class": "ui-sidebar-nav__icon",
+                                  "children": [
+                                    {
+                                      "tag": "svg",
+                                      "attrs": {
+                                        "width": "16",
+                                        "height": "16",
+                                        "viewBox": "0 0 24 24",
+                                        "fill": "none",
+                                        "stroke": "currentColor",
+                                        "stroke-width": "2"
+                                      },
+                                      "children": [
+                                        {
+                                          "tag": "path",
+                                          "attrs": {
+                                            "d": "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"
+                                          }
+                                        },
+                                        {
+                                          "tag": "circle",
+                                          "attrs": { "cx": "9", "cy": "7", "r": "4" }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                { "tag": "span", "class": "ui-sidebar-nav__label", "text": "Users" }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "tag": "li",
+                          "children": [
+                            {
+                              "tag": "a",
+                              "class": "ui-sidebar-nav__item",
+                              "attrs": { "href": "#", "aria-label": "Settings" },
+                              "children": [
+                                {
+                                  "tag": "span",
+                                  "class": "ui-sidebar-nav__icon",
+                                  "children": [
+                                    {
+                                      "tag": "svg",
+                                      "attrs": {
+                                        "width": "16",
+                                        "height": "16",
+                                        "viewBox": "0 0 24 24",
+                                        "fill": "none",
+                                        "stroke": "currentColor",
+                                        "stroke-width": "2"
+                                      },
+                                      "children": [
+                                        {
+                                          "tag": "circle",
+                                          "attrs": { "cx": "12", "cy": "12", "r": "3" }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                {
+                                  "tag": "span",
+                                  "class": "ui-sidebar-nav__label",
+                                  "text": "Settings"
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Disabled Items",
+      "description": "Non-interactive navigation items.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "nav",
+              "class": "ui-sidebar-nav",
+              "attrs": { "aria-label": "Navigation", "style": "block-size: 180px;" },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-sidebar-nav__content",
+                  "children": [
+                    {
+                      "tag": "ul",
+                      "class": "ui-sidebar-nav__group-items",
+                      "children": [
+                        {
+                          "tag": "li",
+                          "children": [
+                            {
+                              "tag": "a",
+                              "class": "ui-sidebar-nav__item",
+                              "attrs": { "href": "#" },
+                              "children": [
+                                {
+                                  "tag": "span",
+                                  "class": "ui-sidebar-nav__label",
+                                  "text": "Active Link"
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "tag": "li",
+                          "children": [
+                            {
+                              "tag": "span",
+                              "class": "ui-sidebar-nav__item ui-sidebar-nav__item--disabled",
+                              "children": [
+                                {
+                                  "tag": "span",
+                                  "class": "ui-sidebar-nav__label",
+                                  "text": "Disabled Link"
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "tag": "li",
+                          "children": [
+                            {
+                              "tag": "a",
+                              "class": "ui-sidebar-nav__item",
+                              "attrs": { "href": "#" },
+                              "children": [
+                                {
+                                  "tag": "span",
+                                  "class": "ui-sidebar-nav__label",
+                                  "text": "Another Link"
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}