@teseor/css 1.6.0 → 1.8.0

package/src/{04-components → components}/data-display/tag/tag.docs.json

@@ -9,7 +9,7 @@
       "title": "Default",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             { "tag": "span", "class": "ui-tag", "text": "Tag" },
             { "tag": "span", "class": "ui-tag", "text": "Category" },
@@ -23,12 +23,13 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             { "tag": "span", "class": "ui-tag ui-tag--sm", "text": "Small" },
-            { "tag": "span", "class": "ui-tag", "text": "Default" }
+            { "tag": "span", "class": "ui-tag", "text": "Default" },
+            { "tag": "span", "class": "ui-tag ui-tag--lg", "text": "Large" }
           ],
-          "code": "<span class=\"ui-tag ui-tag--sm\">Small</span>\n<span class=\"ui-tag\">Default</span>"
+          "code": "<span class=\"ui-tag ui-tag--sm\">Small</span>\n<span class=\"ui-tag\">Default</span>\n<span class=\"ui-tag ui-tag--lg\">Large</span>"
         }
       ]
     },
@@ -36,7 +37,7 @@
       "title": "Variants",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             { "tag": "span", "class": "ui-tag", "text": "Default" },
             { "tag": "span", "class": "ui-tag ui-tag--primary", "text": "Primary" },
@@ -52,7 +53,28 @@
       "title": "With Remove Button",
       "examples": [
         {
-          "html": "<span class=\"ui-tag\">Removable<button class=\"ui-tag__remove\" aria-label=\"Remove\"><svg class=\"ui-icon ui-icon--xs\" viewBox=\"0 0 24 24\"><path d=\"M18 6 6 18M6 6l12 12\"></path></svg></button></span>",
+          "items": [
+            {
+              "tag": "span",
+              "class": "ui-tag",
+              "children": [
+                { "tag": "span", "text": "Removable" },
+                {
+                  "tag": "button",
+                  "class": "ui-tag__remove",
+                  "attrs": { "aria-label": "Remove" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "class": "ui-icon ui-icon--xs",
+                      "attrs": { "viewBox": "0 0 24 24" },
+                      "children": [{ "tag": "path", "attrs": { "d": "M18 6 6 18M6 6l12 12" } }]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
           "code": "<span class=\"ui-tag\">\n  Removable\n  <button class=\"ui-tag__remove\" aria-label=\"Remove\">\n    <svg class=\"ui-icon\">...</svg>\n  </button>\n</span>"
         }
       ]
@@ -61,7 +83,18 @@
       "title": "Tag Group",
       "examples": [
         {
-          "html": "<div class=\"ui-tag-group\"><span class=\"ui-tag\">JavaScript</span><span class=\"ui-tag\">TypeScript</span><span class=\"ui-tag\">React</span><span class=\"ui-tag\">CSS</span></div>",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-tag-group",
+              "children": [
+                { "tag": "span", "class": "ui-tag", "text": "JavaScript" },
+                { "tag": "span", "class": "ui-tag", "text": "TypeScript" },
+                { "tag": "span", "class": "ui-tag", "text": "React" },
+                { "tag": "span", "class": "ui-tag", "text": "CSS" }
+              ]
+            }
+          ],
           "code": "<div class=\"ui-tag-group\">\n  <span class=\"ui-tag\">JavaScript</span>\n  <span class=\"ui-tag\">TypeScript</span>\n  <span class=\"ui-tag\">React</span>\n</div>"
         }
       ]
@@ -70,14 +103,19 @@
   "customization": [
     {
       "token": "--ui-tag-height",
-      "default": "calc(var(--unit) * 3)",
+      "default": "calc(var(--ui-unit) * 3)",
       "description": "Default height"
     },
     {
       "token": "--ui-tag-height-sm",
-      "default": "calc(var(--unit) * 2.5)",
+      "default": "calc(var(--ui-unit) * 2.5)",
       "description": "Small height"
     },
+    {
+      "token": "--ui-tag-height-lg",
+      "default": "calc(var(--ui-unit) * 3.5)",
+      "description": "Large height"
+    },
     {
       "token": "--ui-tag-padding-x",
       "default": "var(--ui-space-1)",
@@ -85,7 +123,7 @@
     },
     {
       "token": "--ui-tag-gap",
-      "default": "calc(var(--unit) * 0.5)",
+      "default": "calc(var(--ui-unit) * 0.5)",
       "description": "Gap between content and remove button"
     },
     {

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

@@ -0,0 +1,206 @@
+{
+  "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/{04-components → components}/disclosure/accordion/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Accordion - grouped expandable sections
 // Container for multiple disclosure items

package/src/{04-components → components}/disclosure/disclosure/disclosure.api.json

@@ -33,11 +33,11 @@
     },
     {
       "name": "--ui-disclosure-padding-x",
-      "default": "calc(#{t.$unit} * 2"
+      "default": "calc(var(--ui-unit) * 2"
     },
     {
       "name": "--ui-disclosure-padding-y",
-      "default": "calc(#{t.$unit} * 2"
+      "default": "calc(var(--ui-unit) * 2"
     }
   ]
 }

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

@@ -0,0 +1,154 @@
+{
+  "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/{04-components → components}/disclosure/disclosure/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Disclosure - expandable/collapsible content section
 // Uses native details/summary for no-JS accessibility
@@ -108,4 +108,14 @@
   .disclosure--flush .disclosure__content {
     padding-inline: 0;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .disclosure--animate .disclosure__content {
+      animation: none;
+    }
+
+    .disclosure__icon {
+      transition: none;
+    }
+  }
 }

package/src/{04-components → components}/feedback/alert/alert.api.json

@@ -4,13 +4,20 @@
   "modifiers": {
     "variant": {
       "values": ["info", "success", "warning", "danger"]
+    },
+    "size": {
+      "values": ["sm", "lg"]
+    },
+    "dismissible": {
+      "type": "boolean"
     }
   },
   "elements": {
     "content": {},
     "title": {},
     "description": {},
-    "icon": {}
+    "icon": {},
+    "close": {}
   },
   "cssVars": [
     {
@@ -45,6 +52,22 @@
       "name": "--ui-alert-icon-color",
       "default": "currentcolor"
     },
+    {
+      "name": "--ui-alert-padding-sm",
+      "default": "var(--ui-space-1)"
+    },
+    {
+      "name": "--ui-alert-font-size-sm",
+      "default": "var(--ui-font-size-sm)"
+    },
+    {
+      "name": "--ui-alert-padding-lg",
+      "default": "var(--ui-space-4)"
+    },
+    {
+      "name": "--ui-alert-font-size-lg",
+      "default": "var(--ui-font-size-lg)"
+    },
     {
       "name": "--ui-alert-info-bg",
       "default": "var(--ui-color-bg-subtle)"