@teseor/css 1.6.0 → 1.8.0

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

@@ -25,15 +25,15 @@
     },
     {
       "name": "--ui-popover-shadow",
-      "default": "0 calc(#{t.$unit} / 2"
+      "default": "0 calc(var(--ui-unit) / 2"
     },
     {
       "name": "--ui-popover-padding",
-      "default": "calc(#{t.$unit} * 2"
+      "default": "calc(var(--ui-unit) * 2"
     },
     {
       "name": "--ui-popover-max-width",
-      "default": "calc(#{t.$unit} * 40"
+      "default": "calc(var(--ui-unit) * 40"
     },
     {
       "name": "--ui-popover-z",
@@ -41,7 +41,7 @@
     },
     {
       "name": "--ui-popover-arrow-size",
-      "default": "calc(#{t.$unit}"
+      "default": "calc(var(--ui-unit)"
     }
   ]
 }

package/src/{04-components → components}/overlays/popover/popover.docs.json

@@ -9,7 +9,19 @@
       "title": "Default",
       "examples": [
         {
-          "html": "<div class=\"ui-popover\" style=\"position: relative;\"><p>Popover content goes here. Can contain multiple paragraphs and other elements.</p></div>",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-popover",
+              "attrs": { "style": "position: relative;" },
+              "children": [
+                {
+                  "tag": "p",
+                  "text": "Popover content goes here. Can contain multiple paragraphs and other elements."
+                }
+              ]
+            }
+          ],
           "code": "<div class=\"ui-popover\">\n  <p>Popover content goes here.</p>\n</div>"
         }
       ]
@@ -18,7 +30,23 @@
       "title": "With Header",
       "examples": [
         {
-          "html": "<div class=\"ui-popover\" style=\"position: relative;\"><header class=\"ui-popover__header\"><h3 class=\"ui-popover__title\">Popover Title</h3></header><p>Content with a header section.</p></div>",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-popover",
+              "attrs": { "style": "position: relative;" },
+              "children": [
+                {
+                  "tag": "header",
+                  "class": "ui-popover__header",
+                  "children": [
+                    { "tag": "h3", "class": "ui-popover__title", "text": "Popover Title" }
+                  ]
+                },
+                { "tag": "p", "text": "Content with a header section." }
+              ]
+            }
+          ],
           "code": "<div class=\"ui-popover\">\n  <header class=\"ui-popover__header\">\n    <h3 class=\"ui-popover__title\">Popover Title</h3>\n  </header>\n  <p>Content with a header section.</p>\n</div>"
         }
       ]
@@ -27,7 +55,20 @@
       "title": "With Arrow",
       "examples": [
         {
-          "html": "<div style=\"padding: var(--ui-space-4);\"><div class=\"ui-popover ui-popover--top\" style=\"position: relative;\"><p>Popover with arrow pointing down</p></div></div>",
+          "items": [
+            {
+              "tag": "div",
+              "attrs": { "style": "padding: var(--ui-space-4);" },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-popover ui-popover--top",
+                  "attrs": { "style": "position: relative;" },
+                  "children": [{ "tag": "p", "text": "Popover with arrow pointing down" }]
+                }
+              ]
+            }
+          ],
           "code": "<div class=\"ui-popover ui-popover--top\">\n  <p>Popover with arrow pointing down</p>\n</div>"
         }
       ]
@@ -56,15 +97,15 @@
     },
     {
       "token": "--ui-popover-padding",
-      "default": "calc(var(--unit) * 2)",
+      "default": "calc(var(--ui-unit) * 2)",
       "description": "Content padding"
     },
     {
       "token": "--ui-popover-max-width",
-      "default": "calc(var(--unit) * 40)",
+      "default": "calc(var(--ui-unit) * 40)",
       "description": "Maximum width"
     },
     { "token": "--ui-popover-z", "default": "var(--ui-z-popover)", "description": "Z-index layer" },
-    { "token": "--ui-popover-arrow-size", "default": "var(--unit)", "description": "Arrow size" }
+    { "token": "--ui-popover-arrow-size", "default": "var(--ui-unit)", "description": "Arrow size" }
   ]
 }

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

@@ -1,16 +1,16 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Tooltip - small informational popup
 // Appears on hover/focus to provide additional context
 
 @layer components.tokens {
   .tooltip {
-    --_bg: var(--ui-tooltip-bg, var(--ui-color-text, #1a1a1a));
-    --_color: var(--ui-tooltip-color, var(--ui-color-bg, white));
+    --_bg: var(--ui-tooltip-bg, var(--ui-color-text, #{t.$color-text}));
+    --_color: var(--ui-tooltip-color, var(--ui-color-bg, #{t.$color-bg}));
     --_radius: var(--ui-tooltip-radius, var(--ui-radius-sm, calc(#{t.$unit} / 2)));
     --_padding-x: var(--ui-tooltip-padding-x, calc(#{t.$unit} * 1));
     --_padding-y: var(--ui-tooltip-padding-y, calc(#{t.$unit} / 2));
-    --_size: var(--ui-tooltip-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_font-size: var(--ui-tooltip-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
     --_z: var(--ui-tooltip-z, var(--ui-z-tooltip, 500));
     --_arrow-size: var(--ui-tooltip-arrow-size, calc(#{t.$unit} / 2));
   }
@@ -24,7 +24,7 @@
     max-inline-size: calc(#{t.$unit} * 25);
     padding: var(--_padding-y) var(--_padding-x);
 
-    font-size: var(--_size);
+    font-size: var(--_font-size);
     line-height: calc(#{t.$unit} * 2);
     text-align: center;
     white-space: nowrap;

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

@@ -27,14 +27,14 @@
     },
     {
       "name": "--ui-tooltip-padding-x",
-      "default": "calc(#{t.$unit} * 1"
+      "default": "calc(var(--ui-unit) * 1"
     },
     {
       "name": "--ui-tooltip-padding-y",
-      "default": "calc(#{t.$unit} / 2"
+      "default": "calc(var(--ui-unit) / 2"
     },
     {
-      "name": "--ui-tooltip-size",
+      "name": "--ui-tooltip-font-size",
       "default": "var(--ui-font-size-sm)"
     },
     {
@@ -43,7 +43,7 @@
     },
     {
       "name": "--ui-tooltip-arrow-size",
-      "default": "calc(#{t.$unit} / 2"
+      "default": "calc(var(--ui-unit) / 2"
     }
   ]
 }

package/src/{04-components → components}/overlays/tooltip/tooltip.docs.json

@@ -11,7 +11,40 @@
       "api": "./tooltip.api.json",
       "examples": [
         {
-          "html": "<div style=\"display: flex; gap: var(--ui-space-4); padding: var(--ui-space-4);\"><div style=\"position: relative;\"><span class=\"ui-tooltip ui-tooltip--top\" style=\"position: relative;\">Top tooltip</span></div><div style=\"position: relative;\"><span class=\"ui-tooltip ui-tooltip--bottom\" style=\"position: relative;\">Bottom tooltip</span></div></div>",
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "display: flex; gap: var(--ui-space-4); padding: var(--ui-space-4);"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "attrs": { "style": "position: relative;" },
+                  "children": [
+                    {
+                      "tag": "span",
+                      "class": "ui-tooltip ui-tooltip--top",
+                      "attrs": { "style": "position: relative;" },
+                      "text": "Top tooltip"
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "attrs": { "style": "position: relative;" },
+                  "children": [
+                    {
+                      "tag": "span",
+                      "class": "ui-tooltip ui-tooltip--bottom",
+                      "attrs": { "style": "position: relative;" },
+                      "text": "Bottom tooltip"
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
           "code": "<span class=\"ui-tooltip ui-tooltip--top\">Top tooltip</span>\n<span class=\"ui-tooltip ui-tooltip--bottom\">Bottom tooltip</span>\n<span class=\"ui-tooltip ui-tooltip--start\">Start tooltip</span>\n<span class=\"ui-tooltip ui-tooltip--end\">End tooltip</span>"
         }
       ]
@@ -20,7 +53,14 @@
       "title": "With Animation",
       "examples": [
         {
-          "html": "<span class=\"ui-tooltip ui-tooltip--top ui-tooltip--animate ui-tooltip--visible\" style=\"position: relative;\">Animated tooltip</span>",
+          "items": [
+            {
+              "tag": "span",
+              "class": "ui-tooltip ui-tooltip--top ui-tooltip--animate ui-tooltip--visible",
+              "attrs": { "style": "position: relative;" },
+              "text": "Animated tooltip"
+            }
+          ],
           "code": "<span class=\"ui-tooltip ui-tooltip--top ui-tooltip--animate ui-tooltip--visible\">\n  Animated tooltip\n</span>"
         }
       ]
@@ -40,22 +80,22 @@
     },
     {
       "token": "--ui-tooltip-padding-x",
-      "default": "calc(var(--unit) * 1)",
+      "default": "calc(var(--ui-unit) * 1)",
       "description": "Horizontal padding"
     },
     {
       "token": "--ui-tooltip-padding-y",
-      "default": "calc(var(--unit) / 2)",
+      "default": "calc(var(--ui-unit) / 2)",
       "description": "Vertical padding"
     },
     {
-      "token": "--ui-tooltip-size",
+      "token": "--ui-tooltip-font-size",
       "default": "var(--ui-font-size-sm)",
       "description": "Font size"
     },
     {
       "token": "--ui-tooltip-arrow-size",
-      "default": "calc(var(--unit) / 2)",
+      "default": "calc(var(--ui-unit) / 2)",
       "description": "Arrow size"
     },
     { "token": "--ui-tooltip-z", "default": "var(--ui-z-tooltip)", "description": "Z-index" }

package/src/{04-components → components}/typography/blockquote/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 @layer components.tokens {
   .blockquote {

package/src/{04-components → components}/typography/code/code.docs.json

@@ -11,11 +11,20 @@
       "examples": [
         {
           "title": "Default",
-          "html": "<p>Use the <code class=\"ui-code\">--space-2</code> token for padding.</p>"
+          "items": [
+            {
+              "tag": "p",
+              "children": [
+                { "text": "Use the " },
+                { "tag": "code", "class": "ui-code", "text": "--space-2" },
+                { "text": " token for padding." }
+              ]
+            }
+          ]
         },
         {
           "title": "Small (for tables)",
-          "html": "<code class=\"ui-code ui-code--sm\">--button-height</code>"
+          "items": [{ "tag": "code", "class": "ui-code ui-code--sm", "text": "--button-height" }]
         }
       ]
     },
@@ -24,7 +33,18 @@
       "examples": [
         {
           "title": "Default",
-          "html": "<pre class=\"ui-code-block\"><code>.button {\n  display: inline-flex;\n  align-items: center;\n}</code></pre>"
+          "items": [
+            {
+              "tag": "pre",
+              "class": "ui-code-block",
+              "children": [
+                {
+                  "tag": "code",
+                  "text": ".button {\n  display: inline-flex;\n  align-items: center;\n}"
+                }
+              ]
+            }
+          ]
         }
       ]
     }

package/src/{04-components → components}/typography/code/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Token definitions
 @layer components.tokens {

package/src/{04-components → components}/typography/code-block/code-block.docs.json

@@ -1,6 +1,7 @@
 {
   "id": "code-block",
   "type": "component",
+  "mergeInto": "code",
   "title": "Code Block",
   "description": "Multi-line code display with monospace font, horizontal scroll, and optional line numbers.",
   "api": "./code-block.api.json",

package/src/{04-components → components}/typography/code-block/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Token definitions
 @layer components.tokens {

package/src/{04-components → components}/typography/heading/heading.docs.json

@@ -9,8 +9,16 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "stack",
-          "html": "<h1 class=\"ui-heading ui-heading--4xl\">Heading 4xl</h1><h2 class=\"ui-heading ui-heading--3xl\">Heading 3xl</h2><h3 class=\"ui-heading ui-heading--2xl\">Heading 2xl</h3><h4 class=\"ui-heading ui-heading--xl\">Heading xl</h4><h5 class=\"ui-heading ui-heading--lg\">Heading lg</h5><h6 class=\"ui-heading ui-heading--md\">Heading md</h6><p class=\"ui-heading ui-heading--sm\">Heading sm</p>",
+          "layout": "column",
+          "items": [
+            { "tag": "h1", "class": "ui-heading ui-heading--4xl", "text": "Heading 4xl" },
+            { "tag": "h2", "class": "ui-heading ui-heading--3xl", "text": "Heading 3xl" },
+            { "tag": "h3", "class": "ui-heading ui-heading--2xl", "text": "Heading 2xl" },
+            { "tag": "h4", "class": "ui-heading ui-heading--xl", "text": "Heading xl" },
+            { "tag": "h5", "class": "ui-heading ui-heading--lg", "text": "Heading lg" },
+            { "tag": "h6", "class": "ui-heading ui-heading--md", "text": "Heading md" },
+            { "tag": "p", "class": "ui-heading ui-heading--sm", "text": "Heading sm" }
+          ],
           "code": "<h1 class=\"ui-heading ui-heading--4xl\">4xl</h1>\n<h2 class=\"ui-heading ui-heading--3xl\">3xl</h2>\n<h3 class=\"ui-heading ui-heading--2xl\">2xl</h3>\n<h4 class=\"ui-heading ui-heading--xl\">xl</h4>\n<h5 class=\"ui-heading ui-heading--lg\">lg</h5>\n<h6 class=\"ui-heading ui-heading--md\">md</h6>\n<p class=\"ui-heading ui-heading--sm\">sm</p>"
         }
       ]
@@ -20,8 +28,11 @@
       "description": "Use any size with any semantic level.",
       "examples": [
         {
-          "layout": "stack",
-          "html": "<h2 class=\"ui-heading ui-heading--3xl\">h2 styled as 3xl</h2><h1 class=\"ui-heading ui-heading--lg\">h1 styled as lg</h1>",
+          "layout": "column",
+          "items": [
+            { "tag": "h2", "class": "ui-heading ui-heading--3xl", "text": "h2 styled as 3xl" },
+            { "tag": "h1", "class": "ui-heading ui-heading--lg", "text": "h1 styled as lg" }
+          ],
           "code": "<h2 class=\"ui-heading ui-heading--3xl\">h2 as 3xl</h2>\n<h1 class=\"ui-heading ui-heading--lg\">h1 as lg</h1>"
         }
       ]
@@ -31,8 +42,19 @@
       "description": "Combine with text utilities for color and other styles.",
       "examples": [
         {
-          "layout": "stack",
-          "html": "<h2 class=\"ui-heading ui-heading--2xl ui-text-muted\">Muted heading</h2><h2 class=\"ui-heading ui-heading--2xl ui-text-primary\">Primary heading</h2>",
+          "layout": "column",
+          "items": [
+            {
+              "tag": "h2",
+              "class": "ui-heading ui-heading--2xl ui-text-muted",
+              "text": "Muted heading"
+            },
+            {
+              "tag": "h2",
+              "class": "ui-heading ui-heading--2xl ui-text-primary",
+              "text": "Primary heading"
+            }
+          ],
           "code": "<h2 class=\"ui-heading ui-text-muted\">Muted</h2>\n<h2 class=\"ui-heading ui-text-primary\">Primary</h2>"
         }
       ]

package/src/{04-components → components}/typography/heading/index.scss

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

package/src/{04-components → components}/typography/kbd/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 @layer components.tokens {
   .kbd {

package/src/{04-components → components}/typography/kbd/kbd.docs.json

@@ -35,7 +35,7 @@
             { "tag": "kbd", "class": "ui-kbd", "text": "Shift" },
             { "tag": "kbd", "class": "ui-kbd", "text": "Space" }
           ],
-          "layout": "cluster"
+          "layout": "row"
         }
       ]
     }

package/src/{04-components → components}/typography/link/index.scss

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

package/src/{04-components → components}/typography/link/link.docs.json

@@ -9,7 +9,9 @@
       "title": "Default",
       "examples": [
         {
-          "html": "<a href=\"#\" class=\"ui-link\">Default link</a>",
+          "items": [
+            { "tag": "a", "class": "ui-link", "attrs": { "href": "#" }, "text": "Default link" }
+          ],
           "code": "<a href=\"#\" class=\"ui-link\">Default link</a>"
         }
       ]
@@ -20,7 +22,14 @@
       "api": "./link.api.json",
       "examples": [
         {
-          "html": "<a href=\"#\" class=\"ui-link ui-link--muted\">Muted link</a>",
+          "items": [
+            {
+              "tag": "a",
+              "class": "ui-link ui-link--muted",
+              "attrs": { "href": "#" },
+              "text": "Muted link"
+            }
+          ],
           "code": "<a href=\"#\" class=\"ui-link ui-link--muted\">Muted link</a>"
         }
       ]
@@ -31,7 +40,14 @@
       "api": "./link.api.json",
       "examples": [
         {
-          "html": "<a href=\"#\" class=\"ui-link ui-link--subtle\">Subtle link</a>",
+          "items": [
+            {
+              "tag": "a",
+              "class": "ui-link ui-link--subtle",
+              "attrs": { "href": "#" },
+              "text": "Subtle link"
+            }
+          ],
           "code": "<a href=\"#\" class=\"ui-link ui-link--subtle\">Subtle link</a>"
         }
       ]
@@ -42,7 +58,14 @@
       "api": "./link.api.json",
       "examples": [
         {
-          "html": "<a href=\"#\" class=\"ui-link ui-link--external\">External link</a>",
+          "items": [
+            {
+              "tag": "a",
+              "class": "ui-link ui-link--external",
+              "attrs": { "href": "#" },
+              "text": "External link"
+            }
+          ],
           "code": "<a href=\"#\" class=\"ui-link ui-link--external\">External link</a>"
         }
       ]
@@ -51,7 +74,14 @@
       "title": "Disabled",
       "examples": [
         {
-          "html": "<a href=\"#\" class=\"ui-link ui-link--disabled\" aria-disabled=\"true\">Disabled link</a>",
+          "items": [
+            {
+              "tag": "a",
+              "class": "ui-link ui-link--disabled",
+              "attrs": { "href": "#", "aria-disabled": "true" },
+              "text": "Disabled link"
+            }
+          ],
           "code": "<a href=\"#\" class=\"ui-link ui-link--disabled\" aria-disabled=\"true\">\n  Disabled link\n</a>"
         }
       ]
@@ -62,7 +92,22 @@
       "api": "./link.api.json",
       "examples": [
         {
-          "html": "<p style=\"font-size: var(--ui-size-sm);\">Read our <a href=\"#\" class=\"ui-link\">privacy policy</a> for more information.</p>",
+          "items": [
+            {
+              "tag": "p",
+              "attrs": { "style": "font-size: var(--ui-size-sm);" },
+              "children": [
+                { "text": "Read our " },
+                {
+                  "tag": "a",
+                  "class": "ui-link",
+                  "attrs": { "href": "#" },
+                  "text": "privacy policy"
+                },
+                { "text": " for more information." }
+              ]
+            }
+          ],
           "code": "<p>\n  Read our <a href=\"#\" class=\"ui-link\">privacy policy</a>\n  for more information.\n</p>"
         }
       ]

package/src/{04-components → components}/typography/list/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Ordered and unordered lists with spacing and layout variants
 

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

@@ -15,7 +15,7 @@
   "cssVars": [
     {
       "name": "--ui-list-spacing",
-      "default": "var(--unit)"
+      "default": "var(--ui-unit)"
     },
     {
       "name": "--ui-list-marker-color",

package/src/{04-components → components}/typography/list/list.docs.json

@@ -141,7 +141,7 @@
           "items": [
             {
               "tag": "div",
-              "class": "ui-stack",
+              "class": "ui-column",
               "style": {
                 "gap": "var(--ui-space-2)"
               },
@@ -271,7 +271,7 @@
   "customization": [
     {
       "token": "--ui-list-spacing",
-      "default": "var(--unit)",
+      "default": "var(--ui-unit)",
       "description": "Gap between items"
     },
     {

package/src/{04-components → components}/typography/mark/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 @layer components.tokens {
   .mark {

package/src/{00-config → config}/tokens/_variables.scss

@@ -132,3 +132,7 @@ $color-interactive: $color-primary;
 $color-interactive-hover: $color-primary-dark;
 
 $color-focus: $color-primary-light;
+
+// State opacity
+$opacity-disabled: 0.5;
+$opacity-loading: 0.7;