@teseor/css 1.7.0 → 1.9.0

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,12 +1,17 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
+// @component accordion
+// @element div
 
 // Accordion - grouped expandable sections
 // Container for multiple disclosure items
 
 @layer components.tokens {
   .accordion {
-    --_border-color: var(--ui-accordion-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
-    --_border-width: var(--ui-accordion-border-width, 1px);
+    // @desc Border color
+    --_border-color: var(--ui-accordion-border-color, var(--ui-color-border, #{t.$color-border}));
+    // @desc Border thickness
+    --_border-width: var(--ui-accordion-border-width, #{t.$border-width-sm});
+    // @desc Corner radius
     --_radius: var(--ui-accordion-radius, var(--ui-radius-md, calc(#{t.$unit} * 1)));
   }
 }
@@ -59,6 +64,7 @@
   }
 
   // Separated variant - gap between items
+  // @modifier boolean separated
   .accordion--separated {
     display: flex;
     flex-direction: column;

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

@@ -1,11 +1,12 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "disclosure",
   "element": "div",
   "modifiers": {
-    "borderless": {
+    "animate": {
       "type": "boolean"
     },
-    "animate": {
+    "borderless": {
       "type": "boolean"
     }
   },
@@ -17,27 +18,33 @@
   "cssVars": [
     {
       "name": "--ui-disclosure-border-color",
-      "default": "var(--ui-color-border)"
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
     },
     {
       "name": "--ui-disclosure-border-width",
-      "default": "1px"
+      "default": "var(--ui-border-width-sm)",
+      "description": "Border thickness"
     },
     {
       "name": "--ui-disclosure-radius",
-      "default": "var(--ui-radius-md)"
+      "default": "var(--ui-radius-md)",
+      "description": "Corner radius"
     },
     {
       "name": "--ui-disclosure-trigger-height",
-      "default": "var(--ui-row-3)"
+      "default": "var(--ui-row-3)",
+      "description": "Trigger overall height"
     },
     {
       "name": "--ui-disclosure-padding-x",
-      "default": "calc(#{t.$unit} * 2"
+      "default": "calc(var(--ui-unit) * 2)",
+      "description": "Horizontal padding"
     },
     {
       "name": "--ui-disclosure-padding-y",
-      "default": "calc(#{t.$unit} * 2"
+      "default": "calc(var(--ui-unit) * 2)",
+      "description": "Vertical padding"
     }
   ]
 }

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,15 +1,28 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
+// @component disclosure
+// @element div
 
 // Disclosure - expandable/collapsible content section
 // Uses native details/summary for no-JS accessibility
 
 @layer components.tokens {
   .disclosure {
-    --_border-color: var(--ui-disclosure-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
-    --_border-width: var(--ui-disclosure-border-width, 1px);
+    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_color-bg-subtle: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, ease);
+    --_duration-normal: var(--ui-duration-normal, #{t.$duration-normal});
+    // @desc Border color
+    --_border-color: var(--ui-disclosure-border-color, var(--ui-color-border, #{t.$color-border}));
+    // @desc Border thickness
+    --_border-width: var(--ui-disclosure-border-width, #{t.$border-width-sm});
+    // @desc Corner radius
     --_radius: var(--ui-disclosure-radius, var(--ui-radius-md, calc(#{t.$unit} * 1)));
+    // @desc Trigger overall height
     --_trigger-height: var(--ui-disclosure-trigger-height, var(--ui-row-3, calc(#{t.$row} * 3)));
+    // @desc Horizontal padding
     --_padding-x: var(--ui-disclosure-padding-x, calc(#{t.$unit} * 2));
+    // @desc Vertical padding
     --_padding-y: var(--ui-disclosure-padding-y, calc(#{t.$unit} * 2));
   }
 }
@@ -38,7 +51,7 @@
     inline-size: 100%;
     padding-inline: var(--_padding-x);
 
-    font-weight: var(--ui-weight-medium, 500);
+    font-weight: var(--_weight-medium);
     line-height: 1;
     text-align: start;
 
@@ -56,14 +69,14 @@
 
   // Trigger hover state
   .disclosure__trigger:hover {
-    background: var(--ui-color-bg-subtle, rgb(0 0 0 / 0.02));
+    background: var(--_color-bg-subtle);
   }
 
   // Icon that rotates when open
   .disclosure__icon {
     flex-shrink: 0;
 
-    transition: transform var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+    transition: transform var(--_duration-fast) var(--_ease-default);
   }
 
   .disclosure[open] .disclosure__icon {
@@ -76,8 +89,9 @@
   }
 
   // Animation for content
+  // @modifier boolean animate
   .disclosure--animate .disclosure__content {
-    animation: disclosure-open var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
+    animation: disclosure-open var(--_duration-normal) var(--_ease-default);
   }
 
   @keyframes disclosure-open {
@@ -93,6 +107,7 @@
   }
 
   // Borderless variant
+  // @modifier boolean borderless
   .disclosure--borderless {
     --_border-width: 0;
 
@@ -108,4 +123,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/components/feedback/alert/alert.api.json

@@ -0,0 +1,95 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "alert",
+  "element": "div",
+  "modifiers": {
+    "variant": {
+      "values": ["info", "success", "warning", "danger"]
+    },
+    "size": {
+      "values": ["sm", "lg"]
+    },
+    "dismissible": {
+      "type": "boolean"
+    }
+  },
+  "elements": {
+    "icon": {},
+    "content": {},
+    "title": {},
+    "description": {},
+    "close": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-alert-accent",
+      "default": "var(--ui-color-border)",
+      "description": "Accent color"
+    },
+    {
+      "name": "--ui-alert-padding",
+      "default": "var(--ui-space-2)",
+      "description": "Padding on all sides"
+    },
+    {
+      "name": "--ui-alert-border-width",
+      "default": "var(--ui-border-width-sm)",
+      "description": "Border thickness"
+    },
+    {
+      "name": "--ui-alert-gap",
+      "default": "var(--ui-space-1)",
+      "description": "Gap between children"
+    },
+    {
+      "name": "--ui-alert-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Corner radius"
+    },
+    {
+      "name": "--ui-alert-color",
+      "default": "var(--ui-color-text)",
+      "description": "Text color"
+    },
+    {
+      "name": "--ui-alert-font-size",
+      "default": "inherit",
+      "description": "Font size"
+    },
+    {
+      "name": "--ui-alert-padding-sm",
+      "default": "var(--ui-space-1)",
+      "description": "Padding on all sides at small size"
+    },
+    {
+      "name": "--ui-alert-gap-sm",
+      "default": "calc(var(--ui-unit) * 0.5)",
+      "description": "Gap between children at small size"
+    },
+    {
+      "name": "--ui-alert-font-size-sm",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size at small size"
+    },
+    {
+      "name": "--ui-alert-padding-lg",
+      "default": "var(--ui-space-4)",
+      "description": "Padding on all sides at large size"
+    },
+    {
+      "name": "--ui-alert-gap-lg",
+      "default": "var(--ui-space-2)",
+      "description": "Gap between children at large size"
+    },
+    {
+      "name": "--ui-alert-font-size-lg",
+      "default": "var(--ui-font-size-lg)",
+      "description": "Font size at large size"
+    },
+    {
+      "name": "--ui-alert-padding-end",
+      "default": "calc(var(--ui-unit) * 5)",
+      "description": "Padding end"
+    }
+  ]
+}