@teseor/css 1.14.2 → 1.15.0

package/src/components/disclosure/accordion/accordion.docs.json

@@ -1,206 +0,0 @@
-{
-  "id": "accordion",
-  "type": "component",
-  "title": "Accordion",
-  "description": "Container for grouped expandable sections. Use with disclosure components.",
-  "api": "./accordion.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-accordion",
-              "children": [
-                {
-                  "tag": "details",
-                  "class": "ui-disclosure",
-                  "children": [
-                    {
-                      "tag": "summary",
-                      "class": "ui-disclosure__trigger",
-                      "children": [
-                        { "text": "Section 1" },
-                        { "tag": "span", "class": "ui-disclosure__icon", "text": "\u25BE" }
-                      ]
-                    },
-                    {
-                      "tag": "div",
-                      "class": "ui-disclosure__content",
-                      "children": [{ "tag": "p", "text": "Content for section 1" }]
-                    }
-                  ]
-                },
-                {
-                  "tag": "details",
-                  "class": "ui-disclosure",
-                  "children": [
-                    {
-                      "tag": "summary",
-                      "class": "ui-disclosure__trigger",
-                      "children": [
-                        { "text": "Section 2" },
-                        { "tag": "span", "class": "ui-disclosure__icon", "text": "\u25BE" }
-                      ]
-                    },
-                    {
-                      "tag": "div",
-                      "class": "ui-disclosure__content",
-                      "children": [{ "tag": "p", "text": "Content for section 2" }]
-                    }
-                  ]
-                },
-                {
-                  "tag": "details",
-                  "class": "ui-disclosure",
-                  "children": [
-                    {
-                      "tag": "summary",
-                      "class": "ui-disclosure__trigger",
-                      "children": [
-                        { "text": "Section 3" },
-                        { "tag": "span", "class": "ui-disclosure__icon", "text": "\u25BE" }
-                      ]
-                    },
-                    {
-                      "tag": "div",
-                      "class": "ui-disclosure__content",
-                      "children": [{ "tag": "p", "text": "Content for section 3" }]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-accordion\">\n  <details class=\"ui-disclosure\">\n    <summary class=\"ui-disclosure__trigger\">Section 1</summary>\n    <div class=\"ui-disclosure__content\">...</div>\n  </details>\n  <details class=\"ui-disclosure\">\n    <summary class=\"ui-disclosure__trigger\">Section 2</summary>\n    <div class=\"ui-disclosure__content\">...</div>\n  </details>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Separated",
-      "description": "Gap between accordion items",
-      "api": "./accordion.api.json",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-accordion ui-accordion--separated",
-              "children": [
-                {
-                  "tag": "details",
-                  "class": "ui-disclosure",
-                  "children": [
-                    {
-                      "tag": "summary",
-                      "class": "ui-disclosure__trigger",
-                      "children": [
-                        { "text": "Section 1" },
-                        { "tag": "span", "class": "ui-disclosure__icon", "text": "\u25BE" }
-                      ]
-                    },
-                    {
-                      "tag": "div",
-                      "class": "ui-disclosure__content",
-                      "children": [{ "tag": "p", "text": "Content for section 1" }]
-                    }
-                  ]
-                },
-                {
-                  "tag": "details",
-                  "class": "ui-disclosure",
-                  "children": [
-                    {
-                      "tag": "summary",
-                      "class": "ui-disclosure__trigger",
-                      "children": [
-                        { "text": "Section 2" },
-                        { "tag": "span", "class": "ui-disclosure__icon", "text": "\u25BE" }
-                      ]
-                    },
-                    {
-                      "tag": "div",
-                      "class": "ui-disclosure__content",
-                      "children": [{ "tag": "p", "text": "Content for section 2" }]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-accordion ui-accordion--separated\">\n  ...\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "With One Open",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-accordion",
-              "children": [
-                {
-                  "tag": "details",
-                  "class": "ui-disclosure",
-                  "attrs": { "open": true },
-                  "children": [
-                    {
-                      "tag": "summary",
-                      "class": "ui-disclosure__trigger",
-                      "children": [
-                        { "text": "Open Section" },
-                        { "tag": "span", "class": "ui-disclosure__icon", "text": "\u25BE" }
-                      ]
-                    },
-                    {
-                      "tag": "div",
-                      "class": "ui-disclosure__content",
-                      "children": [{ "tag": "p", "text": "This section starts open" }]
-                    }
-                  ]
-                },
-                {
-                  "tag": "details",
-                  "class": "ui-disclosure",
-                  "children": [
-                    {
-                      "tag": "summary",
-                      "class": "ui-disclosure__trigger",
-                      "children": [
-                        { "text": "Closed Section" },
-                        { "tag": "span", "class": "ui-disclosure__icon", "text": "\u25BE" }
-                      ]
-                    },
-                    {
-                      "tag": "div",
-                      "class": "ui-disclosure__content",
-                      "children": [{ "tag": "p", "text": "Click to open" }]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-accordion\">\n  <details class=\"ui-disclosure\" open>\n    <summary class=\"ui-disclosure__trigger\">Open Section</summary>\n    <div class=\"ui-disclosure__content\">...</div>\n  </details>\n  <details class=\"ui-disclosure\">\n    ...\n  </details>\n</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-accordion-border-color",
-      "default": "var(--ui-color-border)",
-      "description": "Border color"
-    },
-    { "token": "--ui-accordion-border-width", "default": "1px", "description": "Border width" },
-    {
-      "token": "--ui-accordion-radius",
-      "default": "var(--ui-radius-md)",
-      "description": "Border radius"
-    }
-  ]
-}

package/src/components/disclosure/disclosure/disclosure.docs.json

@@ -1,154 +0,0 @@
-{
-  "id": "disclosure",
-  "type": "component",
-  "title": "Disclosure",
-  "description": "Expandable/collapsible content section. Uses native details/summary for accessibility without JS.",
-  "api": "./disclosure.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "details",
-              "class": "ui-disclosure",
-              "children": [
-                {
-                  "tag": "summary",
-                  "class": "ui-disclosure__trigger",
-                  "children": [
-                    { "text": "Click to expand" },
-                    { "tag": "span", "class": "ui-disclosure__icon", "text": "\u25BE" }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-disclosure__content",
-                  "children": [{ "tag": "p", "text": "Hidden content that expands when clicked." }]
-                }
-              ]
-            }
-          ],
-          "code": "<details class=\"ui-disclosure\">\n  <summary class=\"ui-disclosure__trigger\">\n    Click to expand\n    <span class=\"ui-disclosure__icon\">&#9662;</span>\n  </summary>\n  <div class=\"ui-disclosure__content\">\n    <p>Hidden content that expands when clicked.</p>\n  </div>\n</details>"
-        }
-      ]
-    },
-    {
-      "title": "Open by Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "details",
-              "class": "ui-disclosure",
-              "attrs": { "open": true },
-              "children": [
-                {
-                  "tag": "summary",
-                  "class": "ui-disclosure__trigger",
-                  "children": [
-                    { "text": "Already expanded" },
-                    { "tag": "span", "class": "ui-disclosure__icon", "text": "\u25BE" }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-disclosure__content",
-                  "children": [{ "tag": "p", "text": "This content is visible by default." }]
-                }
-              ]
-            }
-          ],
-          "code": "<details class=\"ui-disclosure\" open>\n  <summary class=\"ui-disclosure__trigger\">Already expanded</summary>\n  <div class=\"ui-disclosure__content\">...</div>\n</details>"
-        }
-      ]
-    },
-    {
-      "title": "Borderless",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "details",
-              "class": "ui-disclosure ui-disclosure--borderless",
-              "children": [
-                {
-                  "tag": "summary",
-                  "class": "ui-disclosure__trigger",
-                  "children": [
-                    { "text": "Borderless disclosure" },
-                    { "tag": "span", "class": "ui-disclosure__icon", "text": "\u25BE" }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-disclosure__content",
-                  "children": [{ "tag": "p", "text": "No border around the disclosure." }]
-                }
-              ]
-            }
-          ],
-          "code": "<details class=\"ui-disclosure ui-disclosure--borderless\">\n  ...\n</details>"
-        }
-      ]
-    },
-    {
-      "title": "Animated",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "details",
-              "class": "ui-disclosure ui-disclosure--animate",
-              "children": [
-                {
-                  "tag": "summary",
-                  "class": "ui-disclosure__trigger",
-                  "children": [
-                    { "text": "Animated expansion" },
-                    { "tag": "span", "class": "ui-disclosure__icon", "text": "\u25BE" }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-disclosure__content",
-                  "children": [{ "tag": "p", "text": "Content animates in when opened." }]
-                }
-              ]
-            }
-          ],
-          "code": "<details class=\"ui-disclosure ui-disclosure--animate\">\n  ...\n</details>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-disclosure-border-color",
-      "default": "var(--ui-color-border)",
-      "description": "Border color"
-    },
-    { "token": "--ui-disclosure-border-width", "default": "1px", "description": "Border width" },
-    {
-      "token": "--ui-disclosure-radius",
-      "default": "var(--ui-radius-md)",
-      "description": "Border radius"
-    },
-    {
-      "token": "--ui-disclosure-trigger-height",
-      "default": "var(--ui-row-3)",
-      "description": "Trigger button height"
-    },
-    {
-      "token": "--ui-disclosure-padding-x",
-      "default": "calc(var(--ui-unit) * 2)",
-      "description": "Horizontal padding"
-    },
-    {
-      "token": "--ui-disclosure-padding-y",
-      "default": "calc(var(--ui-unit) * 2)",
-      "description": "Content vertical padding"
-    }
-  ]
-}

package/src/components/feedback/alert/alert.docs.json

@@ -1,325 +0,0 @@
-{
-  "id": "alert",
-  "type": "component",
-  "title": "Alert",
-  "description": "Informational banner for important messages. Use variants for different message types.",
-  "api": "./alert.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-alert",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-alert__content",
-                  "children": [
-                    { "tag": "p", "class": "ui-alert__title", "text": "Note" },
-                    {
-                      "tag": "p",
-                      "class": "ui-alert__description",
-                      "text": "This is a default alert message."
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-alert\">\n  <div class=\"ui-alert__content\">\n    <p class=\"ui-alert__title\">Note</p>\n    <p class=\"ui-alert__description\">This is a default alert.</p>\n  </div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Variants",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-column",
-              "attrs": { "style": "--column-gap: var(--ui-space-2);" },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-alert ui-alert--info",
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-alert__content",
-                      "children": [
-                        { "tag": "p", "class": "ui-alert__title", "text": "Info" },
-                        {
-                          "tag": "p",
-                          "class": "ui-alert__description",
-                          "text": "Informational message for the user."
-                        }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-alert ui-alert--success",
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-alert__content",
-                      "children": [
-                        { "tag": "p", "class": "ui-alert__title", "text": "Success" },
-                        {
-                          "tag": "p",
-                          "class": "ui-alert__description",
-                          "text": "Your action was completed successfully."
-                        }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-alert ui-alert--warning",
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-alert__content",
-                      "children": [
-                        { "tag": "p", "class": "ui-alert__title", "text": "Warning" },
-                        {
-                          "tag": "p",
-                          "class": "ui-alert__description",
-                          "text": "Please review before continuing."
-                        }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-alert ui-alert--danger",
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-alert__content",
-                      "children": [
-                        { "tag": "p", "class": "ui-alert__title", "text": "Error" },
-                        {
-                          "tag": "p",
-                          "class": "ui-alert__description",
-                          "text": "Something went wrong. Please try again."
-                        }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-alert ui-alert--info\">...</div>\n<div class=\"ui-alert ui-alert--success\">...</div>\n<div class=\"ui-alert ui-alert--warning\">...</div>\n<div class=\"ui-alert ui-alert--danger\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "With Icon",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-alert ui-alert--info",
-              "children": [
-                {
-                  "tag": "svg",
-                  "class": "ui-icon ui-icon--sm ui-alert__icon",
-                  "attrs": { "viewBox": "0 0 24 24" },
-                  "children": [
-                    { "tag": "circle", "attrs": { "cx": "12", "cy": "12", "r": "10" } },
-                    { "tag": "path", "attrs": { "d": "M12 16v-4" } },
-                    { "tag": "path", "attrs": { "d": "M12 8h.01" } }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-alert__content",
-                  "children": [
-                    {
-                      "tag": "p",
-                      "class": "ui-alert__description",
-                      "text": "Your session will expire in 5 minutes."
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-alert ui-alert--info\">\n  <svg class=\"ui-icon ui-alert__icon\">...</svg>\n  <div class=\"ui-alert__content\">\n    <p class=\"ui-alert__description\">Your session will expire.</p>\n  </div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Description Only",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-alert ui-alert--success",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-alert__content",
-                  "children": [
-                    {
-                      "tag": "p",
-                      "class": "ui-alert__description",
-                      "text": "File uploaded successfully."
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-alert ui-alert--success\">\n  <div class=\"ui-alert__content\">\n    <p class=\"ui-alert__description\">File uploaded.</p>\n  </div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-column",
-              "attrs": { "style": "--column-gap: var(--ui-space-2);" },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-alert ui-alert--info ui-alert--sm",
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-alert__content",
-                      "children": [
-                        {
-                          "tag": "p",
-                          "class": "ui-alert__description",
-                          "text": "Small alert with compact padding."
-                        }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-alert ui-alert--info",
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-alert__content",
-                      "children": [
-                        {
-                          "tag": "p",
-                          "class": "ui-alert__description",
-                          "text": "Default alert size."
-                        }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-alert ui-alert--info ui-alert--lg",
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-alert__content",
-                      "children": [
-                        {
-                          "tag": "p",
-                          "class": "ui-alert__description",
-                          "text": "Large alert with extra padding."
-                        }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-alert ui-alert--sm\">...</div>\n<div class=\"ui-alert\">...</div>\n<div class=\"ui-alert ui-alert--lg\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Dismissible",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-alert ui-alert--info ui-alert--dismissible",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-alert__content",
-                  "children": [
-                    { "tag": "p", "class": "ui-alert__title", "text": "Dismissible" },
-                    {
-                      "tag": "p",
-                      "class": "ui-alert__description",
-                      "text": "This alert can be closed by the user."
-                    }
-                  ]
-                },
-                {
-                  "tag": "button",
-                  "class": "ui-alert__close ui-close-button",
-                  "attrs": { "aria-label": "Close" }
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-alert ui-alert--info ui-alert--dismissible\">\n  <div class=\"ui-alert__content\">\n    <p class=\"ui-alert__title\">Dismissible</p>\n    <p class=\"ui-alert__description\">This alert can be closed.</p>\n  </div>\n  <button class=\"ui-alert__close\" aria-label=\"Close\">...</button>\n</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-alert-padding",
-      "default": "var(--ui-space-2)",
-      "description": "Inner padding"
-    },
-    {
-      "token": "--ui-alert-gap",
-      "default": "var(--ui-space-1)",
-      "description": "Gap between icon and content"
-    },
-    {
-      "token": "--ui-alert-radius",
-      "default": "var(--ui-radius-md)",
-      "description": "Border radius"
-    },
-    {
-      "token": "--ui-alert-border-width",
-      "default": "var(--ui-border-width-sm)",
-      "description": "Border width"
-    },
-    {
-      "token": "--ui-alert-bg",
-      "default": "var(--ui-color-bg-subtle)",
-      "description": "Background color"
-    },
-    {
-      "token": "--ui-alert-border-color",
-      "default": "var(--ui-color-border)",
-      "description": "Border color"
-    },
-    { "token": "--ui-alert-color", "default": "var(--ui-color-text)", "description": "Text color" },
-    { "token": "--ui-alert-icon-color", "default": "currentcolor", "description": "Icon color" }
-  ]
-}