@teseor/css 1.7.0 → 1.8.0

package/src/components/actions/button-group/button-group.docs.json

@@ -0,0 +1,151 @@
+{
+  "id": "button-group",
+  "type": "component",
+  "mergeInto": "button",
+  "title": "Button Group",
+  "description": "Container for grouped buttons that share borders and have connected appearance.",
+  "api": "./button-group.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-button-group",
+              "attrs": { "role": "group" },
+              "children": [
+                { "tag": "button", "class": "ui-button ui-button--outline", "text": "Left" },
+                { "tag": "button", "class": "ui-button ui-button--outline", "text": "Middle" },
+                { "tag": "button", "class": "ui-button ui-button--outline", "text": "Right" }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-button-group\" role=\"group\">\n  <button class=\"ui-button ui-button--outline\">Left</button>\n  <button class=\"ui-button ui-button--outline\">Middle</button>\n  <button class=\"ui-button ui-button--outline\">Right</button>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Primary Buttons",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-button-group",
+              "attrs": { "role": "group" },
+              "children": [
+                { "tag": "button", "class": "ui-button", "text": "Save" },
+                { "tag": "button", "class": "ui-button", "text": "Save & Close" }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-button-group\" role=\"group\">\n  <button class=\"ui-button\">Save</button>\n  <button class=\"ui-button\">Save & Close</button>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Vertical",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-button-group ui-button-group--vertical",
+              "attrs": { "role": "group" },
+              "children": [
+                { "tag": "button", "class": "ui-button ui-button--outline", "text": "Top" },
+                { "tag": "button", "class": "ui-button ui-button--outline", "text": "Middle" },
+                { "tag": "button", "class": "ui-button ui-button--outline", "text": "Bottom" }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-button-group ui-button-group--vertical\" role=\"group\">\n  <button class=\"ui-button ui-button--outline\">Top</button>\n  <button class=\"ui-button ui-button--outline\">Middle</button>\n  <button class=\"ui-button ui-button--outline\">Bottom</button>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "With Icons",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-button-group",
+              "attrs": { "role": "group", "aria-label": "Text formatting" },
+              "children": [
+                {
+                  "tag": "button",
+                  "class": "ui-button ui-button--outline ui-button--icon",
+                  "attrs": { "aria-label": "Bold" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "class": "ui-icon",
+                      "attrs": { "viewBox": "0 0 24 24", "fill": "currentColor" },
+                      "children": [
+                        {
+                          "tag": "path",
+                          "attrs": {
+                            "d": "M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-button ui-button--outline ui-button--icon",
+                  "attrs": { "aria-label": "Italic" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "class": "ui-icon",
+                      "attrs": { "viewBox": "0 0 24 24", "fill": "currentColor" },
+                      "children": [
+                        {
+                          "tag": "path",
+                          "attrs": { "d": "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-button ui-button--outline ui-button--icon",
+                  "attrs": { "aria-label": "Underline" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "class": "ui-icon",
+                      "attrs": { "viewBox": "0 0 24 24", "fill": "currentColor" },
+                      "children": [
+                        {
+                          "tag": "path",
+                          "attrs": {
+                            "d": "M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-button-group\" role=\"group\" aria-label=\"Text formatting\">\n  <button class=\"ui-button ui-button--outline ui-button--icon\" aria-label=\"Bold\">...</button>\n  <button class=\"ui-button ui-button--outline ui-button--icon\" aria-label=\"Italic\">...</button>\n  <button class=\"ui-button ui-button--outline ui-button--icon\" aria-label=\"Underline\">...</button>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-button-group-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Border radius for first and last buttons"
+    }
+  ]
+}

package/src/{04-components → components}/actions/button-group/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Button Group - container for grouped buttons
 // Joins buttons together with shared borders

package/src/{04-components → components}/actions/close-button/close-button.docs.json

@@ -1,6 +1,7 @@
 {
   "id": "close-button",
   "type": "component",
+  "mergeInto": "button",
   "title": "Close Button",
   "description": "Dismiss button for closing modals, alerts, drawers, and other dismissible elements.",
   "api": "./close-button.api.json",
@@ -54,7 +55,7 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "button",
@@ -114,7 +115,7 @@
       "description": "Lower visual prominence for secondary dismiss actions.",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "button",
@@ -157,7 +158,7 @@
       "title": "States",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "button",

package/src/{04-components → components}/actions/close-button/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component close-button
 // @element button
@@ -74,7 +74,7 @@
     }
 
     &:disabled {
-      opacity: 0.5;
+      opacity: var(--ui-opacity-disabled, 0.5);
       cursor: not-allowed;
 
       &:hover {

package/src/{04-components/layout → components/content}/divider/divider.api.json

@@ -23,11 +23,11 @@
     },
     {
       "name": "--ui-divider-height",
-      "default": "#{t.$unit}"
+      "default": "var(--ui-unit)"
     },
     {
       "name": "--ui-divider-gap",
-      "default": "calc(#{t.$unit} * 2"
+      "default": "calc(var(--ui-unit) * 2"
     }
   ]
 }

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

@@ -0,0 +1,113 @@
+{
+  "id": "divider",
+  "type": "component",
+  "title": "Divider",
+  "description": "Visual separator between content sections. Supports horizontal/vertical orientation and optional text label.",
+  "api": "./divider.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [{ "tag": "div", "class": "ui-divider", "attrs": { "role": "separator" } }],
+          "code": "<div class=\"ui-divider\" role=\"separator\"></div>"
+        }
+      ]
+    },
+    {
+      "title": "With Label",
+      "examples": [
+        {
+          "items": [
+            { "tag": "div", "class": "ui-divider", "attrs": { "role": "separator" }, "text": "OR" }
+          ],
+          "code": "<div class=\"ui-divider\" role=\"separator\">OR</div>"
+        }
+      ]
+    },
+    {
+      "title": "Label Alignment",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-divider ui-divider--start",
+              "attrs": { "role": "separator" },
+              "text": "Start"
+            },
+            {
+              "tag": "div",
+              "class": "ui-divider",
+              "attrs": { "role": "separator" },
+              "text": "Center"
+            },
+            {
+              "tag": "div",
+              "class": "ui-divider ui-divider--end",
+              "attrs": { "role": "separator" },
+              "text": "End"
+            }
+          ],
+          "code": "<div class=\"ui-divider ui-divider--start\">Start</div>\n<div class=\"ui-divider\">Center</div>\n<div class=\"ui-divider ui-divider--end\">End</div>"
+        }
+      ]
+    },
+    {
+      "title": "Dashed",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-divider ui-divider--dashed",
+              "attrs": { "role": "separator" }
+            }
+          ],
+          "code": "<div class=\"ui-divider ui-divider--dashed\"></div>"
+        }
+      ]
+    },
+    {
+      "title": "Vertical",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": { "style": "display: flex; height: 64px; align-items: center;" },
+              "children": [
+                { "tag": "span", "text": "Left" },
+                {
+                  "tag": "div",
+                  "class": "ui-divider ui-divider--vertical",
+                  "attrs": { "role": "separator" }
+                },
+                { "tag": "span", "text": "Right" }
+              ]
+            }
+          ],
+          "code": "<div style=\"display: flex;\">\n  <span>Left</span>\n  <div class=\"ui-divider ui-divider--vertical\"></div>\n  <span>Right</span>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-divider-color",
+      "default": "var(--ui-color-border)",
+      "description": "Line color"
+    },
+    { "token": "--ui-divider-line-size", "default": "1px", "description": "Line thickness" },
+    {
+      "token": "--ui-divider-height",
+      "default": "var(--ui-unit)",
+      "description": "Container height"
+    },
+    {
+      "token": "--ui-divider-gap",
+      "default": "calc(var(--ui-unit) * 2)",
+      "description": "Vertical margin"
+    }
+  ]
+}

package/src/{04-components/layout → components/content}/divider/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component divider
 // @element div

package/src/{04-components/layout → components/content}/scroll-area/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component scroll-area
 // @element div

package/src/{04-components/layout → components/content}/scroll-area/scroll-area.docs.json

@@ -46,7 +46,7 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "div",

package/src/{04-components/layout → components/content}/spacer/spacer.docs.json

@@ -12,7 +12,7 @@
           "items": [
             {
               "tag": "div",
-              "class": "ui-cluster",
+              "class": "ui-row",
               "style": {
                 "inline-size": "100%",
                 "background": "var(--ui-color-bg-subtle)",
@@ -49,7 +49,7 @@
           "items": [
             {
               "tag": "div",
-              "class": "ui-cluster",
+              "class": "ui-row",
               "style": {
                 "inline-size": "100%",
                 "background": "var(--ui-color-bg-subtle)",

package/src/{04-components → components}/data-display/avatar/avatar.api.json

@@ -17,7 +17,7 @@
   "cssVars": [
     {
       "name": "--ui-avatar-size",
-      "default": "calc(#{t.$unit} * 5"
+      "default": "calc(var(--ui-unit) * 5"
     },
     {
       "name": "--ui-avatar-bg",
@@ -37,7 +37,7 @@
     },
     {
       "name": "--ui-avatar-size-xs",
-      "default": "calc(#{t.$unit} * 3"
+      "default": "calc(var(--ui-unit) * 3"
     },
     {
       "name": "--ui-avatar-font-size-xs",
@@ -45,7 +45,7 @@
     },
     {
       "name": "--ui-avatar-size-sm",
-      "default": "calc(#{t.$unit} * 4"
+      "default": "calc(var(--ui-unit) * 4"
     },
     {
       "name": "--ui-avatar-font-size-sm",
@@ -53,7 +53,7 @@
     },
     {
       "name": "--ui-avatar-size-lg",
-      "default": "calc(#{t.$unit} * 6"
+      "default": "calc(var(--ui-unit) * 6"
     },
     {
       "name": "--ui-avatar-font-size-lg",
@@ -61,7 +61,7 @@
     },
     {
       "name": "--ui-avatar-size-xl",
-      "default": "calc(#{t.$unit} * 8"
+      "default": "calc(var(--ui-unit) * 8"
     },
     {
       "name": "--ui-avatar-font-size-xl",

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

@@ -9,7 +9,7 @@
       "title": "Default",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "div",
@@ -36,7 +36,7 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "div",
@@ -72,7 +72,7 @@
       "title": "Square Shape",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "div",
@@ -99,7 +99,7 @@
       "title": "With Images",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "div",
@@ -143,7 +143,52 @@
       "title": "Avatar Group",
       "examples": [
         {
-          "html": "<div class=\"ui-avatar-group\"><div class=\"ui-avatar\"><img class=\"ui-avatar__image\" src=\"https://i.pravatar.cc/80?u=g1\" alt=\"\"></div><div class=\"ui-avatar\"><img class=\"ui-avatar__image\" src=\"https://i.pravatar.cc/80?u=g2\" alt=\"\"></div><div class=\"ui-avatar\"><img class=\"ui-avatar__image\" src=\"https://i.pravatar.cc/80?u=g3\" alt=\"\"></div><div class=\"ui-avatar\"><span class=\"ui-avatar__fallback\">+5</span></div></div>",
+          "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>"
         }
       ]
@@ -152,27 +197,27 @@
   "customization": [
     {
       "token": "--ui-avatar-size",
-      "default": "calc(var(--unit) * 5)",
+      "default": "calc(var(--ui-unit) * 5)",
       "description": "Default size"
     },
     {
       "token": "--ui-avatar-size-xs",
-      "default": "calc(var(--unit) * 3)",
+      "default": "calc(var(--ui-unit) * 3)",
       "description": "Extra small size"
     },
     {
       "token": "--ui-avatar-size-sm",
-      "default": "calc(var(--unit) * 4)",
+      "default": "calc(var(--ui-unit) * 4)",
       "description": "Small size"
     },
     {
       "token": "--ui-avatar-size-lg",
-      "default": "calc(var(--unit) * 6)",
+      "default": "calc(var(--ui-unit) * 6)",
       "description": "Large size"
     },
     {
       "token": "--ui-avatar-size-xl",
-      "default": "calc(var(--unit) * 8)",
+      "default": "calc(var(--ui-unit) * 8)",
       "description": "Extra large size"
     },
     {

package/src/{04-components → components}/data-display/avatar/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component avatar
 // @element div

package/src/{04-components → components}/data-display/badge/badge.api.json

@@ -3,7 +3,7 @@
   "element": "span",
   "modifiers": {
     "size": {
-      "values": ["sm"]
+      "values": ["sm", "lg"]
     },
     "variant": {
       "values": ["primary", "success", "warning", "danger"]
@@ -35,7 +35,7 @@
       "default": "var(--ui-color-bg-muted)"
     },
     {
-      "name": "--ui-badge-text",
+      "name": "--ui-badge-color",
       "default": "var(--ui-color-text)"
     },
     {
@@ -50,6 +50,18 @@
       "name": "--ui-badge-font-size-sm",
       "default": "var(--ui-font-size-xs)"
     },
+    {
+      "name": "--ui-badge-height-lg",
+      "default": "calc(var(--ui-row) * 1.5)"
+    },
+    {
+      "name": "--ui-badge-padding-x-lg",
+      "default": "var(--ui-space-2)"
+    },
+    {
+      "name": "--ui-badge-font-size-lg",
+      "default": "var(--ui-font-size-md)"
+    },
     {
       "name": "--ui-badge-primary-bg",
       "default": "var(--ui-color-primary)"