npm - @teseor/css - Versions diffs - 1.14.2 → 1.15.0 - Mend

@teseor/css 1.14.2 → 1.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (300) hide show

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

@@ -1,833 +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": [
-        {
-          "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": "div",
-                                  "class": "ui-sidebar-nav__subgroup",
-                                  "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"
-                                }
-                              ]
-                            }
-                          ]
-                        }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}