@teseor/css 1.14.2 → 1.15.0

package/src/components/content/scroll-area/scroll-area.docs.json

@@ -1,273 +0,0 @@
-{
-  "id": "scroll-area",
-  "type": "component",
-  "title": "Scroll Area",
-  "description": "Scrollable container with styled scrollbar. Provides overflow control and custom scrollbar styling.",
-  "api": "./scroll-area.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-scroll-area",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-scroll-area__viewport",
-                  "children": [
-                    { "tag": "p", "text": "Line 1 of scrollable content" },
-                    { "tag": "p", "text": "Line 2 of scrollable content" },
-                    { "tag": "p", "text": "Line 3 of scrollable content" },
-                    { "tag": "p", "text": "Line 4 of scrollable content" },
-                    { "tag": "p", "text": "Line 5 of scrollable content" },
-                    { "tag": "p", "text": "Line 6 of scrollable content" },
-                    { "tag": "p", "text": "Line 7 of scrollable content" },
-                    { "tag": "p", "text": "Line 8 of scrollable content" },
-                    { "tag": "p", "text": "Line 9 of scrollable content" },
-                    { "tag": "p", "text": "Line 10 of scrollable content" },
-                    { "tag": "p", "text": "Line 11 of scrollable content" },
-                    { "tag": "p", "text": "Line 12 of scrollable content" },
-                    { "tag": "p", "text": "Line 13 of scrollable content" },
-                    { "tag": "p", "text": "Line 14 of scrollable content" },
-                    { "tag": "p", "text": "Line 15 of scrollable content" }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-scroll-area\">\n  <div class=\"ui-scroll-area__viewport\">\n    Content...\n  </div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-scroll-area ui-scroll-area--sm",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-scroll-area__viewport",
-                  "children": [
-                    { "tag": "p", "text": "Small - Line 1" },
-                    { "tag": "p", "text": "Small - Line 2" },
-                    { "tag": "p", "text": "Small - Line 3" },
-                    { "tag": "p", "text": "Small - Line 4" },
-                    { "tag": "p", "text": "Small - Line 5" },
-                    { "tag": "p", "text": "Small - Line 6" },
-                    { "tag": "p", "text": "Small - Line 7" },
-                    { "tag": "p", "text": "Small - Line 8" }
-                  ]
-                }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-scroll-area ui-scroll-area--xl",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-scroll-area__viewport",
-                  "children": [
-                    { "tag": "p", "text": "XL - Line 1" },
-                    { "tag": "p", "text": "XL - Line 2" },
-                    { "tag": "p", "text": "XL - Line 3" },
-                    { "tag": "p", "text": "XL - Line 4" },
-                    { "tag": "p", "text": "XL - Line 5" }
-                  ]
-                }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-scroll-area ui-scroll-area--lg",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-scroll-area__viewport",
-                  "children": [
-                    { "tag": "p", "text": "Large - Line 1" },
-                    { "tag": "p", "text": "Large - Line 2" },
-                    { "tag": "p", "text": "Large - Line 3" },
-                    { "tag": "p", "text": "Large - Line 4" },
-                    { "tag": "p", "text": "Large - Line 5" },
-                    { "tag": "p", "text": "Large - Line 6" },
-                    { "tag": "p", "text": "Large - Line 7" },
-                    { "tag": "p", "text": "Large - Line 8" },
-                    { "tag": "p", "text": "Large - Line 9" },
-                    { "tag": "p", "text": "Large - Line 10" },
-                    { "tag": "p", "text": "Large - Line 11" },
-                    { "tag": "p", "text": "Large - Line 12" },
-                    { "tag": "p", "text": "Large - Line 13" },
-                    { "tag": "p", "text": "Large - Line 14" },
-                    { "tag": "p", "text": "Large - Line 15" },
-                    { "tag": "p", "text": "Large - Line 16" },
-                    { "tag": "p", "text": "Large - Line 17" },
-                    { "tag": "p", "text": "Large - Line 18" },
-                    { "tag": "p", "text": "Large - Line 19" },
-                    { "tag": "p", "text": "Large - Line 20" }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-scroll-area ui-scroll-area--sm\">...</div>\n<div class=\"ui-scroll-area ui-scroll-area--lg\">...</div>\n<div class=\"ui-scroll-area ui-scroll-area--xl\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Direction",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-scroll-area ui-scroll-area--horizontal",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-scroll-area__viewport",
-                  "children": [
-                    {
-                      "tag": "p",
-                      "style": { "white-space": "nowrap" },
-                      "text": "This content scrolls horizontally when it overflows the container width. Resize the window to test."
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-scroll-area ui-scroll-area--both ui-scroll-area--sm",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-scroll-area__viewport",
-                  "children": [
-                    {
-                      "tag": "p",
-                      "style": { "white-space": "nowrap" },
-                      "text": "Both directions - Line 1 with long content that overflows horizontally"
-                    },
-                    { "tag": "p", "text": "Line 2" },
-                    { "tag": "p", "text": "Line 3" },
-                    { "tag": "p", "text": "Line 4" },
-                    { "tag": "p", "text": "Line 5" },
-                    { "tag": "p", "text": "Line 6" },
-                    { "tag": "p", "text": "Line 7" },
-                    { "tag": "p", "text": "Line 8" }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-scroll-area ui-scroll-area--horizontal\">...</div>\n<div class=\"ui-scroll-area ui-scroll-area--both\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Thin Scrollbar",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-scroll-area ui-scroll-area--thin",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-scroll-area__viewport",
-                  "children": [
-                    { "tag": "p", "text": "Thin scrollbar - Line 1" },
-                    { "tag": "p", "text": "Thin scrollbar - Line 2" },
-                    { "tag": "p", "text": "Thin scrollbar - Line 3" },
-                    { "tag": "p", "text": "Thin scrollbar - Line 4" },
-                    { "tag": "p", "text": "Thin scrollbar - Line 5" },
-                    { "tag": "p", "text": "Thin scrollbar - Line 6" },
-                    { "tag": "p", "text": "Thin scrollbar - Line 7" },
-                    { "tag": "p", "text": "Thin scrollbar - Line 8" },
-                    { "tag": "p", "text": "Thin scrollbar - Line 9" },
-                    { "tag": "p", "text": "Thin scrollbar - Line 10" },
-                    { "tag": "p", "text": "Thin scrollbar - Line 11" },
-                    { "tag": "p", "text": "Thin scrollbar - Line 12" }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-scroll-area ui-scroll-area--thin\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Auto-Hide",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-scroll-area ui-scroll-area--auto-hide",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-scroll-area__viewport",
-                  "children": [
-                    { "tag": "p", "text": "Scrollbar hidden until hover - Line 1" },
-                    { "tag": "p", "text": "Scrollbar hidden until hover - Line 2" },
-                    { "tag": "p", "text": "Scrollbar hidden until hover - Line 3" },
-                    { "tag": "p", "text": "Scrollbar hidden until hover - Line 4" },
-                    { "tag": "p", "text": "Scrollbar hidden until hover - Line 5" },
-                    { "tag": "p", "text": "Scrollbar hidden until hover - Line 6" },
-                    { "tag": "p", "text": "Scrollbar hidden until hover - Line 7" },
-                    { "tag": "p", "text": "Scrollbar hidden until hover - Line 8" },
-                    { "tag": "p", "text": "Scrollbar hidden until hover - Line 9" },
-                    { "tag": "p", "text": "Scrollbar hidden until hover - Line 10" },
-                    { "tag": "p", "text": "Scrollbar hidden until hover - Line 11" },
-                    { "tag": "p", "text": "Scrollbar hidden until hover - Line 12" }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-scroll-area ui-scroll-area--auto-hide\">...</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-scroll-area-max-height",
-      "default": "calc(var(--ui-row) * 10)",
-      "description": "Default max height"
-    },
-    {
-      "token": "--ui-scroll-area-scrollbar-size",
-      "default": "var(--ui-space-1)",
-      "description": "Scrollbar width"
-    },
-    {
-      "token": "--ui-scroll-area-thumb-color",
-      "default": "var(--ui-color-border-strong)",
-      "description": "Scrollbar thumb color"
-    },
-    {
-      "token": "--ui-scroll-area-thumb-hover-color",
-      "default": "var(--ui-color-neutral-400)",
-      "description": "Scrollbar thumb hover color"
-    },
-    {
-      "token": "--ui-scroll-area-track-color",
-      "default": "transparent",
-      "description": "Scrollbar track background"
-    }
-  ]
-}

package/src/components/content/spacer/spacer.docs.json

@@ -1,102 +0,0 @@
-{
-  "id": "spacer",
-  "type": "component",
-  "title": "Spacer",
-  "description": "Flexible space filler that grows to fill available space in flex containers.",
-  "api": "./spacer.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row",
-              "style": {
-                "inline-size": "100%",
-                "background": "var(--ui-color-bg-subtle)",
-                "padding": "var(--ui-space-2)"
-              },
-              "children": [
-                {
-                  "tag": "span",
-                  "text": "Start",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                },
-                { "tag": "div", "class": "ui-spacer" },
-                {
-                  "tag": "span",
-                  "text": "End",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Between items",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row",
-              "style": {
-                "inline-size": "100%",
-                "background": "var(--ui-color-bg-subtle)",
-                "padding": "var(--ui-space-2)"
-              },
-              "children": [
-                {
-                  "tag": "span",
-                  "text": "Logo",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                },
-                { "tag": "div", "class": "ui-spacer" },
-                {
-                  "tag": "span",
-                  "text": "Nav 1",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                },
-                {
-                  "tag": "span",
-                  "text": "Nav 2",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                },
-                {
-                  "tag": "span",
-                  "text": "Nav 3",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ],
-  "customization": [
-    { "token": "--ui-spacer-size", "default": "1", "description": "Flex grow factor" }
-  ]
-}

package/src/components/data-display/avatar/avatar.docs.json

@@ -1,245 +0,0 @@
-{
-  "id": "avatar",
-  "type": "component",
-  "title": "Avatar",
-  "description": "User or entity thumbnail representation. Supports image with fallback to initials.",
-  "api": "./avatar.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-avatar",
-              "children": [{ "tag": "span", "class": "ui-avatar__fallback", "text": "JD" }]
-            },
-            {
-              "tag": "div",
-              "class": "ui-avatar",
-              "children": [
-                {
-                  "tag": "img",
-                  "class": "ui-avatar__image",
-                  "attrs": { "src": "https://i.pravatar.cc/80?u=1", "alt": "User" }
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-avatar\">\n  <span class=\"ui-avatar__fallback\">JD</span>\n</div>\n\n<div class=\"ui-avatar\">\n  <img class=\"ui-avatar__image\" src=\"...\" alt=\"User\">\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-avatar ui-avatar--xs",
-              "children": [{ "tag": "span", "class": "ui-avatar__fallback", "text": "XS" }]
-            },
-            {
-              "tag": "div",
-              "class": "ui-avatar ui-avatar--sm",
-              "children": [{ "tag": "span", "class": "ui-avatar__fallback", "text": "SM" }]
-            },
-            {
-              "tag": "div",
-              "class": "ui-avatar",
-              "children": [{ "tag": "span", "class": "ui-avatar__fallback", "text": "MD" }]
-            },
-            {
-              "tag": "div",
-              "class": "ui-avatar ui-avatar--lg",
-              "children": [{ "tag": "span", "class": "ui-avatar__fallback", "text": "LG" }]
-            },
-            {
-              "tag": "div",
-              "class": "ui-avatar ui-avatar--xl",
-              "children": [{ "tag": "span", "class": "ui-avatar__fallback", "text": "XL" }]
-            }
-          ],
-          "code": "<div class=\"ui-avatar ui-avatar--xs\"><span class=\"ui-avatar__fallback\">XS</span></div>\n<div class=\"ui-avatar ui-avatar--sm\"><span class=\"ui-avatar__fallback\">SM</span></div>\n<div class=\"ui-avatar\"><span class=\"ui-avatar__fallback\">MD</span></div>\n<div class=\"ui-avatar ui-avatar--lg\"><span class=\"ui-avatar__fallback\">LG</span></div>\n<div class=\"ui-avatar ui-avatar--xl\"><span class=\"ui-avatar__fallback\">XL</span></div>"
-        }
-      ]
-    },
-    {
-      "title": "Square Shape",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-avatar ui-avatar--square",
-              "children": [{ "tag": "span", "class": "ui-avatar__fallback", "text": "ORG" }]
-            },
-            {
-              "tag": "div",
-              "class": "ui-avatar ui-avatar--square",
-              "children": [
-                {
-                  "tag": "img",
-                  "class": "ui-avatar__image",
-                  "attrs": { "src": "https://i.pravatar.cc/80?u=org", "alt": "Org" }
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-avatar ui-avatar--square\">\n  <span class=\"ui-avatar__fallback\">ORG</span>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "With Images",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-avatar ui-avatar--sm",
-              "children": [
-                {
-                  "tag": "img",
-                  "class": "ui-avatar__image",
-                  "attrs": { "src": "https://i.pravatar.cc/64?u=a", "alt": "User A" }
-                }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-avatar",
-              "children": [
-                {
-                  "tag": "img",
-                  "class": "ui-avatar__image",
-                  "attrs": { "src": "https://i.pravatar.cc/80?u=b", "alt": "User B" }
-                }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-avatar ui-avatar--lg",
-              "children": [
-                {
-                  "tag": "img",
-                  "class": "ui-avatar__image",
-                  "attrs": { "src": "https://i.pravatar.cc/96?u=c", "alt": "User C" }
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-avatar\">\n  <img class=\"ui-avatar__image\" src=\"...\" alt=\"User\">\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Avatar Group",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-avatar-group",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-avatar",
-                  "children": [
-                    {
-                      "tag": "img",
-                      "class": "ui-avatar__image",
-                      "attrs": { "src": "https://i.pravatar.cc/80?u=g1", "alt": "" }
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-avatar",
-                  "children": [
-                    {
-                      "tag": "img",
-                      "class": "ui-avatar__image",
-                      "attrs": { "src": "https://i.pravatar.cc/80?u=g2", "alt": "" }
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-avatar",
-                  "children": [
-                    {
-                      "tag": "img",
-                      "class": "ui-avatar__image",
-                      "attrs": { "src": "https://i.pravatar.cc/80?u=g3", "alt": "" }
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-avatar",
-                  "children": [{ "tag": "span", "class": "ui-avatar__fallback", "text": "+5" }]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-avatar-group\">\n  <div class=\"ui-avatar\">\n    <img class=\"ui-avatar__image\" src=\"...\" alt=\"\">\n  </div>\n  <div class=\"ui-avatar\">\n    <img class=\"ui-avatar__image\" src=\"...\" alt=\"\">\n  </div>\n  <div class=\"ui-avatar\">\n    <span class=\"ui-avatar__fallback\">+5</span>\n  </div>\n</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-avatar-size",
-      "default": "calc(var(--ui-unit) * 5)",
-      "description": "Default size"
-    },
-    {
-      "token": "--ui-avatar-size-xs",
-      "default": "calc(var(--ui-unit) * 3)",
-      "description": "Extra small size"
-    },
-    {
-      "token": "--ui-avatar-size-sm",
-      "default": "calc(var(--ui-unit) * 4)",
-      "description": "Small size"
-    },
-    {
-      "token": "--ui-avatar-size-lg",
-      "default": "calc(var(--ui-unit) * 6)",
-      "description": "Large size"
-    },
-    {
-      "token": "--ui-avatar-size-xl",
-      "default": "calc(var(--ui-unit) * 8)",
-      "description": "Extra large size"
-    },
-    {
-      "token": "--ui-avatar-bg",
-      "default": "var(--ui-color-bg-subtle)",
-      "description": "Background color"
-    },
-    {
-      "token": "--ui-avatar-color",
-      "default": "var(--ui-color-text-muted)",
-      "description": "Text color"
-    },
-    {
-      "token": "--ui-avatar-font-size",
-      "default": "var(--ui-font-size-sm)",
-      "description": "Font size"
-    },
-    { "token": "--ui-avatar-radius", "default": "50%", "description": "Border radius" },
-    {
-      "token": "--ui-avatar-radius-square",
-      "default": "var(--ui-radius-md)",
-      "description": "Square variant radius"
-    }
-  ]
-}