@teseor/css 1.7.0 → 1.8.0

package/src/components/navigation/tabs/tabs.docs.json

@@ -0,0 +1,243 @@
+{
+  "id": "tabs",
+  "type": "component",
+  "title": "Tabs",
+  "api": "./tabs.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "data": {
+        "tabs": [
+          { "label": "Tab 1", "active": true, "content": "Panel 1 content" },
+          { "label": "Tab 2", "active": false, "content": "Panel 2 content" },
+          { "label": "Tab 3", "active": false, "content": "Panel 3 content" }
+        ]
+      },
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-tabs",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-tabs__list",
+                  "children": [
+                    {
+                      "tag": "button",
+                      "class": "ui-tabs__tab ui-tabs__tab--active",
+                      "text": "Tab 1"
+                    },
+                    { "tag": "button", "class": "ui-tabs__tab", "text": "Tab 2" },
+                    { "tag": "button", "class": "ui-tabs__tab", "text": "Tab 3" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-tabs__panel ui-tabs__panel--active",
+                  "text": "Panel 1 content"
+                },
+                { "tag": "div", "class": "ui-tabs__panel", "text": "Panel 2 content" },
+                { "tag": "div", "class": "ui-tabs__panel", "text": "Panel 3 content" }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-tabs\">\n  <div class=\"ui-tabs__list\">\n{% for t in tabs %}    <button class=\"ui-tabs__tab{% if t.active %} ui-tabs__tab--active{% endif %}\">{{ t.label }}</button>\n{% endfor %}  </div>\n{% for t in tabs %}  <div class=\"ui-tabs__panel{% if t.active %} ui-tabs__panel--active{% endif %}\">{{ t.content }}</div>\n{% endfor %}</div>"
+        }
+      ]
+    },
+    {
+      "title": "Two Tabs",
+      "data": {
+        "tabs": [{ "label": "Preview", "active": true }, { "label": "Code", "active": false }]
+      },
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-tabs",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-tabs__list",
+                  "children": [
+                    {
+                      "tag": "button",
+                      "class": "ui-tabs__tab ui-tabs__tab--active",
+                      "text": "Preview"
+                    },
+                    { "tag": "button", "class": "ui-tabs__tab", "text": "Code" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-tabs__panel ui-tabs__panel--active",
+                  "children": [
+                    { "tag": "div", "class": "ui-card", "text": "Preview content goes here" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-tabs__panel",
+                  "children": [
+                    {
+                      "tag": "pre",
+                      "class": "ui-code-block",
+                      "children": [{ "tag": "code", "text": "<div>Code snippet</div>" }]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-tabs\">\n  <div class=\"ui-tabs__list\">\n{% for t in tabs %}    <button class=\"ui-tabs__tab{% if t.active %} ui-tabs__tab--active{% endif %}\">{{ t.label }}</button>\n{% endfor %}  </div>\n  <div class=\"ui-tabs__panel ui-tabs__panel--active\">...</div>\n  <div class=\"ui-tabs__panel\">...</div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-column",
+              "attrs": { "style": "--column-gap: var(--ui-space-3);" },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-tabs ui-tabs--sm",
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-tabs__list",
+                      "children": [
+                        {
+                          "tag": "button",
+                          "class": "ui-tabs__tab ui-tabs__tab--active",
+                          "text": "Small"
+                        },
+                        { "tag": "button", "class": "ui-tabs__tab", "text": "Tab 2" }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-tabs",
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-tabs__list",
+                      "children": [
+                        {
+                          "tag": "button",
+                          "class": "ui-tabs__tab ui-tabs__tab--active",
+                          "text": "Default"
+                        },
+                        { "tag": "button", "class": "ui-tabs__tab", "text": "Tab 2" }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-tabs ui-tabs--lg",
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-tabs__list",
+                      "children": [
+                        {
+                          "tag": "button",
+                          "class": "ui-tabs__tab ui-tabs__tab--active",
+                          "text": "Large"
+                        },
+                        { "tag": "button", "class": "ui-tabs__tab", "text": "Tab 2" }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-tabs ui-tabs--sm\">...</div>\n<div class=\"ui-tabs\">...</div>\n<div class=\"ui-tabs ui-tabs--lg\">...</div>"
+        }
+      ]
+    },
+    {
+      "title": "Vertical",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-tabs ui-tabs--vertical",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-tabs__list",
+                  "children": [
+                    {
+                      "tag": "button",
+                      "class": "ui-tabs__tab ui-tabs__tab--active",
+                      "text": "Tab 1"
+                    },
+                    { "tag": "button", "class": "ui-tabs__tab", "text": "Tab 2" },
+                    { "tag": "button", "class": "ui-tabs__tab", "text": "Tab 3" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-tabs__panel ui-tabs__panel--active",
+                  "text": "Vertical tab content"
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-tabs ui-tabs--vertical\">\n  <div class=\"ui-tabs__list\">\n    <button class=\"ui-tabs__tab ui-tabs__tab--active\">Tab 1</button>\n    <button class=\"ui-tabs__tab\">Tab 2</button>\n  </div>\n  <div class=\"ui-tabs__panel ui-tabs__panel--active\">Content</div>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-tabs-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Tab list border color"
+    },
+    {
+      "token": "--ui-tabs-tab-height",
+      "default": "var(--ui-row-2)",
+      "description": "Tab height"
+    },
+    {
+      "token": "--ui-tabs-tab-padding-x",
+      "default": "var(--ui-space-2)",
+      "description": "Tab horizontal padding"
+    },
+    {
+      "token": "--ui-tabs-tab-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Tab font size"
+    },
+    {
+      "token": "--ui-tabs-tab-padding-y",
+      "default": "var(--ui-space-1)",
+      "description": "Tab vertical padding"
+    },
+    { "token": "--ui-tabs-tab-bg", "default": "transparent", "description": "Tab background" },
+    {
+      "token": "--ui-tabs-tab-bg-active",
+      "default": "var(--ui-color-bg)",
+      "description": "Active tab background"
+    },
+    {
+      "token": "--ui-tabs-panel-padding",
+      "default": "var(--ui-space-3)",
+      "description": "Panel padding"
+    }
+  ]
+}

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

@@ -16,15 +16,15 @@
   "cssVars": [
     {
       "name": "--ui-dialog-header-padding",
-      "default": "calc(#{t.$unit} * 2"
+      "default": "calc(var(--ui-unit) * 2"
     },
     {
       "name": "--ui-dialog-body-padding",
-      "default": "calc(#{t.$unit} * 3"
+      "default": "calc(var(--ui-unit) * 3"
     },
     {
       "name": "--ui-dialog-footer-padding",
-      "default": "calc(#{t.$unit} * 2"
+      "default": "calc(var(--ui-unit) * 2"
     },
     {
       "name": "--ui-dialog-border-color",

package/src/components/overlays/dialog/dialog.docs.json

@@ -0,0 +1,200 @@
+{
+  "id": "dialog",
+  "type": "component",
+  "title": "Dialog",
+  "description": "Structured modal with header, body, and footer sections. Use with modal component for positioning.",
+  "api": "./dialog.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position: relative; height: 240px; background: var(--ui-color-bg-subtle);"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-modal ui-modal--visible",
+                  "attrs": { "style": "position: absolute;" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-modal__content ui-dialog",
+                      "attrs": { "style": "max-height: 200px;" },
+                      "children": [
+                        {
+                          "tag": "header",
+                          "class": "ui-dialog__header",
+                          "children": [
+                            { "tag": "h2", "class": "ui-dialog__title", "text": "Dialog Title" },
+                            {
+                              "tag": "button",
+                              "class": "ui-button ui-button--ghost ui-button--sm ui-dialog__close",
+                              "text": "X"
+                            }
+                          ]
+                        },
+                        {
+                          "tag": "div",
+                          "class": "ui-dialog__body",
+                          "children": [{ "tag": "p", "text": "Dialog content goes here." }]
+                        },
+                        {
+                          "tag": "footer",
+                          "class": "ui-dialog__footer",
+                          "children": [
+                            {
+                              "tag": "button",
+                              "class": "ui-button ui-button--ghost",
+                              "text": "Cancel"
+                            },
+                            { "tag": "button", "class": "ui-button", "text": "Confirm" }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-modal\">\n  <div class=\"ui-modal__content ui-dialog\">\n    <header class=\"ui-dialog__header\">\n      <h2 class=\"ui-dialog__title\">Dialog Title</h2>\n      <button class=\"ui-button ui-button--ghost ui-dialog__close\">X</button>\n    </header>\n    <div class=\"ui-dialog__body\">\n      <p>Dialog content goes here.</p>\n    </div>\n    <footer class=\"ui-dialog__footer\">\n      <button class=\"ui-button ui-button--ghost\">Cancel</button>\n      <button class=\"ui-button\">Confirm</button>\n    </footer>\n  </div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Borderless",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position: relative; height: 200px; background: var(--ui-color-bg-subtle);"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-modal ui-modal--visible",
+                  "attrs": { "style": "position: absolute;" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-modal__content ui-dialog ui-dialog--borderless",
+                      "attrs": { "style": "max-height: 180px;" },
+                      "children": [
+                        {
+                          "tag": "header",
+                          "class": "ui-dialog__header",
+                          "children": [
+                            { "tag": "h2", "class": "ui-dialog__title", "text": "Simple Dialog" }
+                          ]
+                        },
+                        {
+                          "tag": "div",
+                          "class": "ui-dialog__body",
+                          "children": [{ "tag": "p", "text": "Content without borders." }]
+                        },
+                        {
+                          "tag": "footer",
+                          "class": "ui-dialog__footer",
+                          "children": [{ "tag": "button", "class": "ui-button", "text": "OK" }]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-modal\">\n  <div class=\"ui-modal__content ui-dialog ui-dialog--borderless\">\n    ...\n  </div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Confirmation Dialog",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position: relative; height: 200px; background: var(--ui-color-bg-subtle);"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-modal ui-modal--sm ui-modal--visible",
+                  "attrs": { "style": "position: absolute;" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-modal__content ui-dialog",
+                      "children": [
+                        {
+                          "tag": "header",
+                          "class": "ui-dialog__header",
+                          "children": [
+                            { "tag": "h2", "class": "ui-dialog__title", "text": "Delete Item?" }
+                          ]
+                        },
+                        {
+                          "tag": "div",
+                          "class": "ui-dialog__body",
+                          "children": [{ "tag": "p", "text": "This action cannot be undone." }]
+                        },
+                        {
+                          "tag": "footer",
+                          "class": "ui-dialog__footer",
+                          "children": [
+                            {
+                              "tag": "button",
+                              "class": "ui-button ui-button--ghost",
+                              "text": "Cancel"
+                            },
+                            {
+                              "tag": "button",
+                              "class": "ui-button ui-button--danger",
+                              "text": "Delete"
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-modal ui-modal--sm\">\n  <div class=\"ui-modal__content ui-dialog\">\n    <header class=\"ui-dialog__header\">\n      <h2 class=\"ui-dialog__title\">Delete Item?</h2>\n    </header>\n    <div class=\"ui-dialog__body\">\n      <p>This action cannot be undone.</p>\n    </div>\n    <footer class=\"ui-dialog__footer\">\n      <button class=\"ui-button ui-button--ghost\">Cancel</button>\n      <button class=\"ui-button ui-button--danger\">Delete</button>\n    </footer>\n  </div>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-dialog-header-padding",
+      "default": "calc(var(--ui-unit) * 2) calc(var(--ui-unit) * 3)",
+      "description": "Header padding"
+    },
+    {
+      "token": "--ui-dialog-body-padding",
+      "default": "calc(var(--ui-unit) * 3)",
+      "description": "Body padding"
+    },
+    {
+      "token": "--ui-dialog-footer-padding",
+      "default": "calc(var(--ui-unit) * 2) calc(var(--ui-unit) * 3)",
+      "description": "Footer padding"
+    },
+    {
+      "token": "--ui-dialog-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Section border color"
+    }
+  ]
+}

package/src/{04-components → components}/overlays/dialog/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Dialog - structured modal with header, body, footer
 // Extends modal with semantic sections

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

@@ -21,7 +21,7 @@
   "cssVars": [
     {
       "name": "--ui-drawer-size",
-      "default": "calc(#{t.$unit} * 40"
+      "default": "calc(var(--ui-unit) * 40"
     },
     {
       "name": "--ui-drawer-max-size",
@@ -37,15 +37,15 @@
     },
     {
       "name": "--ui-drawer-header-padding",
-      "default": "calc(#{t.$unit} * 2"
+      "default": "calc(var(--ui-unit) * 2"
     },
     {
       "name": "--ui-drawer-body-padding",
-      "default": "calc(#{t.$unit} * 3"
+      "default": "calc(var(--ui-unit) * 3"
     },
     {
       "name": "--ui-drawer-footer-padding",
-      "default": "calc(#{t.$unit} * 2"
+      "default": "calc(var(--ui-unit) * 2"
     },
     {
       "name": "--ui-drawer-border-color",