@teseor/css 1.8.0 → 1.9.0

package/src/components/typography/link/link.api.json

@@ -1,45 +1,53 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "link",
   "element": "a",
   "modifiers": {
     "variant": {
       "values": ["muted", "subtle"]
     },
-    "external": {
+    "disabled": {
       "type": "boolean"
     },
-    "disabled": {
+    "external": {
       "type": "boolean"
     }
   },
   "cssVars": [
     {
       "name": "--ui-link-color",
-      "default": "var(--ui-color-primary)"
+      "default": "var(--ui-color-primary)",
+      "description": "Text color"
     },
     {
       "name": "--ui-link-color-hover",
-      "default": "var(--ui-color-primary-hover)"
+      "default": "var(--ui-color-primary-hover)",
+      "description": "Color hover"
     },
     {
       "name": "--ui-link-color-visited",
-      "default": "var(--_color)"
+      "default": "var(--_color)",
+      "description": "Color visited"
     },
     {
       "name": "--ui-link-decoration",
-      "default": "underline"
+      "default": "underline",
+      "description": "Decoration"
     },
     {
       "name": "--ui-link-decoration-hover",
-      "default": "underline"
+      "default": "underline",
+      "description": "Decoration hover"
     },
     {
       "name": "--ui-link-color-muted",
-      "default": "var(--ui-color-text-muted)"
+      "default": "var(--ui-color-text-muted)",
+      "description": "Color muted"
     },
     {
       "name": "--ui-link-color-muted-hover",
-      "default": "var(--ui-color-text)"
+      "default": "var(--ui-color-text)",
+      "description": "Color muted hover"
     }
   ]
 }

package/src/components/typography/list/index.scss

@@ -1,12 +1,18 @@
 @use '../../../config/tokens/variables' as t;
+// @component list
+// @element ul
 
 // Ordered and unordered lists with spacing and layout variants
 
 @layer components.tokens {
   .list {
+    // @desc Spacing
     --_spacing: var(--ui-list-spacing, #{t.$unit});
+    // @desc Marker color
     --_marker-color: var(--ui-list-marker-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    // @desc Indent
     --_indent: var(--ui-list-indent, var(--ui-space-3, #{t.$space-3}));
+    // @desc Line height
     --_line-height: var(--ui-list-line-height, var(--ui-leading-md, #{t.$leading-md}));
   }
 
@@ -38,6 +44,7 @@
   }
 
   // Removes markers and indent
+  // @modifier style
   .list--unstyled {
     padding-inline-start: 0;
 

package/src/components/typography/list/list.api.json

@@ -1,12 +1,13 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "list",
   "element": "ul",
   "modifiers": {
-    "style": {
-      "values": ["unstyled", "inline"]
-    },
     "spacing": {
       "values": ["compact", "loose"]
+    },
+    "style": {
+      "values": ["unstyled", "inline"]
     }
   },
   "elements": {
@@ -15,19 +16,23 @@
   "cssVars": [
     {
       "name": "--ui-list-spacing",
-      "default": "var(--ui-unit)"
+      "default": "var(--ui-unit)",
+      "description": "Spacing"
     },
     {
       "name": "--ui-list-marker-color",
-      "default": "var(--ui-color-text-muted)"
+      "default": "var(--ui-color-text-muted)",
+      "description": "Marker color"
     },
     {
       "name": "--ui-list-indent",
-      "default": "var(--ui-space-3)"
+      "default": "var(--ui-space-3)",
+      "description": "Indent"
     },
     {
       "name": "--ui-list-line-height",
-      "default": "var(--ui-leading-md)"
+      "default": "var(--ui-leading-md)",
+      "description": "Line height"
     }
   ]
 }

package/src/components/typography/list/list.docs.json

@@ -17,14 +17,17 @@
               "children": [
                 {
                   "tag": "li",
+                  "class": "ui-list__item",
                   "text": "First item in the list"
                 },
                 {
                   "tag": "li",
+                  "class": "ui-list__item",
                   "text": "Second item in the list"
                 },
                 {
                   "tag": "li",
+                  "class": "ui-list__item",
                   "text": "Third item in the list"
                 }
               ]

package/src/components/typography/mark/index.scss

@@ -1,11 +1,18 @@
 @use '../../../config/tokens/variables' as t;
+// @component mark
+// @element mark
 
 @layer components.tokens {
   .mark {
+    // @desc Background color
     --_bg: var(--ui-mark-bg, var(--ui-color-warning, #{t.$color-warning}));
+    // @desc Text color
     --_color: var(--ui-mark-color, var(--ui-color-text, #{t.$color-text}));
+    // @desc Horizontal padding
     --_padding-x: var(--ui-mark-padding-x, var(--ui-space-quarter, #{t.$space-quarter}));
+    // @desc Vertical padding
     --_padding-y: var(--ui-mark-padding-y, 0);
+    // @desc Corner radius
     --_radius: var(--ui-mark-radius, var(--ui-radius-sm, #{t.$radius-sm}));
   }
 }

package/src/components/typography/mark/mark.api.json

@@ -1,12 +1,33 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "mark",
   "element": "mark",
   "modifiers": {},
   "cssVars": [
-    { "name": "--ui-mark-bg", "default": "var(--ui-color-warning)" },
-    { "name": "--ui-mark-color", "default": "var(--ui-color-text)" },
-    { "name": "--ui-mark-padding-x", "default": "var(--ui-space-quarter)" },
-    { "name": "--ui-mark-padding-y", "default": "0" },
-    { "name": "--ui-mark-radius", "default": "var(--ui-radius-sm)" }
+    {
+      "name": "--ui-mark-bg",
+      "default": "var(--ui-color-warning)",
+      "description": "Background color"
+    },
+    {
+      "name": "--ui-mark-color",
+      "default": "var(--ui-color-text)",
+      "description": "Text color"
+    },
+    {
+      "name": "--ui-mark-padding-x",
+      "default": "var(--ui-space-quarter)",
+      "description": "Horizontal padding"
+    },
+    {
+      "name": "--ui-mark-padding-y",
+      "default": "0",
+      "description": "Vertical padding"
+    },
+    {
+      "name": "--ui-mark-radius",
+      "default": "var(--ui-radius-sm)",
+      "description": "Corner radius"
+    }
   ]
 }

package/src/config/tokens/_variables.scss

@@ -133,6 +133,50 @@ $color-interactive-hover: $color-primary-dark;
 
 $color-focus: $color-primary-light;
 
+// Motion - duration scale (matches config/tokens/motion)
+$duration-instant: 50ms;
+$duration-fast: 100ms;
+$duration-base: 150ms;
+$duration-normal: 200ms;
+$duration-slow: 250ms;
+$duration-slower: 400ms;
+
+// Z-index scale (matches config/tokens/zindex)
+$z-base: 0;
+$z-sticky: 100;
+$z-dropdown: 200;
+$z-overlay: 300;
+$z-modal: 400;
+$z-popover: 500;
+$z-tooltip: 600;
+$z-toast: 700;
+$z-drawer: 800;
+$z-debug: 9999;
+
+// Theming
+$hue-primary: 220;
+
 // State opacity
 $opacity-disabled: 0.5;
 $opacity-loading: 0.7;
+
+// Overlay backgrounds
+$overlay-bg: rgb(0 0 0 / 0.5);
+$overlay-bg-light: rgb(255 255 255 / 0.7);
+$overlay-bg-blur: rgb(0 0 0 / 0.3);
+$overlay-bg-subtle: rgb(0 0 0 / 0.1);
+
+// Component defaults - icons
+$icon-stroke: 2;
+$icon-stroke-thin: 1;
+$icon-stroke-thick: 2.5;
+
+// Component defaults - feedback
+$spinner-duration: 750ms;
+$progress-circle-stroke-width: 8;
+$skeleton-shimmer: rgb(255 255 255 / 0.5);
+
+// Component defaults - misc
+$slider-thumb-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
+$toast-viewport-max-width: 420px;
+$spacer-size: 1;

package/src/config/tokens/motion/index.scss

@@ -4,6 +4,7 @@
     --ui-duration-instant: 50ms;
     --ui-duration-fast: 100ms;
     --ui-duration-base: 150ms;
+    --ui-duration-normal: 200ms;
     --ui-duration-slow: 250ms;
     --ui-duration-slower: 400ms;
 
@@ -18,6 +19,7 @@
       --ui-duration-instant: 0ms;
       --ui-duration-fast: 0ms;
       --ui-duration-base: 0ms;
+      --ui-duration-normal: 0ms;
       --ui-duration-slow: 0ms;
       --ui-duration-slower: 0ms;
     }

package/src/config/tokens/zindex/index.scss

@@ -9,6 +9,7 @@
     --ui-z-popover: 500;
     --ui-z-tooltip: 600;
     --ui-z-toast: 700;
+    --ui-z-drawer: 800;
     --ui-z-debug: 9999;
   }
 }

package/src/debug/grid-overlay.scss

@@ -1,3 +1,4 @@
+@use '../config/tokens/variables' as t;
 // Debug grid overlay - add class="debug-grid" to body or any container
 .debug-grid,
 .debug-grid-rows,
@@ -7,7 +8,7 @@
 
 .debug-grid {
   // Fallback hue 220 (blue) when --ui-hue-primary not set
-  --debug-color: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.15);
+  --debug-color: hsl(var(--ui-hue-primary, #{t.$hue-primary}) 80% 50% / 0.15);
 }
 
 .debug-grid::after {
@@ -30,8 +31,8 @@
 
 // Stronger grid at row intervals
 .debug-grid-rows {
-  --debug-color: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.1);
-  --debug-color-strong: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.25);
+  --debug-color: hsl(var(--ui-hue-primary, #{t.$hue-primary}) 80% 50% / 0.1);
+  --debug-color-strong: hsl(var(--ui-hue-primary, #{t.$hue-primary}) 80% 50% / 0.25);
 }
 
 .debug-grid-rows::after {

package/src/layout/app-shell/app-shell.api.json

@@ -1,43 +1,23 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "app-shell",
   "element": "body",
   "modifiers": {},
   "relatedComponents": [
     {
-      "name": "topbar",
-      "modifiers": {
-        "sticky": { "type": "boolean" },
-        "fixed": { "type": "boolean" },
-        "bordered": { "type": "boolean" },
-        "raised": { "type": "boolean" }
-      }
+      "name": "topbar"
     },
     {
-      "name": "sidebar",
-      "modifiers": {
-        "end": { "type": "boolean" }
-      }
+      "name": "sidebar"
     },
     {
-      "name": "main",
-      "modifiers": {
-        "sidebar-end": { "type": "boolean" }
-      }
+      "name": "main"
     },
     {
-      "name": "container",
-      "modifiers": {
-        "center": { "type": "boolean" }
-      }
+      "name": "container"
     },
     {
-      "name": "footer",
-      "modifiers": {
-        "sticky": { "type": "boolean" },
-        "fixed": { "type": "boolean" },
-        "bordered": { "type": "boolean" },
-        "raised": { "type": "boolean" }
-      }
+      "name": "footer"
     }
   ],
   "cssVars": []

package/src/layout/app-shell/app-shell.docs.json

@@ -125,6 +125,24 @@
         }
       ]
     },
+    {
+      "title": "Topbar Variants",
+      "description": "Sticky stays in flow, raised adds shadow.",
+      "examples": [
+        {
+          "code": "<header class=\"ui-topbar ui-topbar--sticky ui-topbar--bordered\">...</header>\n<header class=\"ui-topbar ui-topbar--raised\">...</header>"
+        }
+      ]
+    },
+    {
+      "title": "Footer Variants",
+      "description": "Sticky, fixed, and raised options.",
+      "examples": [
+        {
+          "code": "<footer class=\"ui-footer ui-footer--sticky ui-footer--bordered\">...</footer>\n<footer class=\"ui-footer ui-footer--fixed\">...</footer>\n<footer class=\"ui-footer ui-footer--raised\">...</footer>"
+        }
+      ]
+    },
     {
       "title": "Centered Container",
       "examples": [

package/src/layout/app-shell/index.scss

@@ -1,3 +1,7 @@
+// @component app-shell
+// @element body
+// @related topbar, sidebar, main, container, footer
+
 @layer primitives {
   .app-shell {
     min-block-size: 100vh;

package/src/layout/aspect-ratio/aspect-ratio.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "aspect-ratio",
   "element": "div",
   "modifiers": {
@@ -6,11 +7,5 @@
       "values": ["square", "video", "photo", "wide", "portrait"]
     }
   },
-  "cssVars": [
-    {
-      "name": "--ui-aspect-ratio",
-      "description": "Custom aspect ratio",
-      "default": "1 / 1"
-    }
-  ]
+  "cssVars": []
 }

package/src/layout/aspect-ratio/index.scss

@@ -1,3 +1,6 @@
+// @component aspect-ratio
+// @element div
+
 @layer primitives {
   .aspect-ratio {
     aspect-ratio: var(--aspect-ratio, 1 / 1);
@@ -15,6 +18,7 @@
   }
 
   // Preset ratios — functional names, not math
+  // @modifier ratio
   .aspect-ratio--square { --aspect-ratio: 1 / 1; }
   .aspect-ratio--video { --aspect-ratio: 16 / 9; }
   .aspect-ratio--photo { --aspect-ratio: 4 / 3; }

package/src/layout/box/box.api.json

@@ -1,15 +1,32 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "box",
   "element": "div",
   "modifiers": {
-    "p-1": { "type": "boolean" },
-    "p-2": { "type": "boolean" },
-    "p-3": { "type": "boolean" },
-    "p-4": { "type": "boolean" },
-    "bg-subtle": { "type": "boolean" },
-    "bg-muted": { "type": "boolean" },
-    "rounded": { "type": "boolean" },
-    "rounded-lg": { "type": "boolean" }
+    "p-1": {
+      "type": "boolean"
+    },
+    "p-2": {
+      "type": "boolean"
+    },
+    "p-3": {
+      "type": "boolean"
+    },
+    "p-4": {
+      "type": "boolean"
+    },
+    "bg-subtle": {
+      "type": "boolean"
+    },
+    "bg-muted": {
+      "type": "boolean"
+    },
+    "rounded": {
+      "type": "boolean"
+    },
+    "rounded-lg": {
+      "type": "boolean"
+    }
   },
   "cssVars": []
 }

package/src/layout/box/index.scss

@@ -1,10 +1,20 @@
 @use '../../config/tokens/variables' as t;
+// @component box
+// @element div
 
 // Box - base container with style props
 // Foundation for other layout primitives
 
 @layer primitives {
   .box {
+    --_space-1: var(--ui-space-1, #{t.$space-1});
+    --_space-2: var(--ui-space-2, #{t.$space-2});
+    --_space-3: var(--ui-space-3, #{t.$space-3});
+    --_space-4: var(--ui-space-4, #{t.$space-4});
+    --_color-bg-subtle: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});
+    --_color-bg-muted: var(--ui-color-bg-muted, #{t.$color-bg-muted});
+    --_radius-md: var(--ui-radius-md, #{t.$radius-md});
+    --_radius-lg: var(--ui-radius-lg, #{t.$radius-lg});
     --_padding: var(--box-padding, 0);
     --_bg: var(--box-bg, transparent);
     --_color: var(--box-color, inherit);
@@ -19,16 +29,24 @@
   }
 
   // Padding modifiers
-  .box--p-1 { --_padding: var(--ui-space-1, #{t.$space-1}); }
-  .box--p-2 { --_padding: var(--ui-space-2, #{t.$space-2}); }
-  .box--p-3 { --_padding: var(--ui-space-3, #{t.$space-3}); }
-  .box--p-4 { --_padding: var(--ui-space-4, #{t.$space-4}); }
+  // @modifier boolean p-1
+  .box--p-1 { --_padding: var(--_space-1); }
+  // @modifier boolean p-2
+  .box--p-2 { --_padding: var(--_space-2); }
+  // @modifier boolean p-3
+  .box--p-3 { --_padding: var(--_space-3); }
+  // @modifier boolean p-4
+  .box--p-4 { --_padding: var(--_space-4); }
 
   // Background modifiers
-  .box--bg-subtle { --_bg: var(--ui-color-bg-subtle, #{t.$color-bg-subtle}); }
-  .box--bg-muted { --_bg: var(--ui-color-bg-muted, #{t.$color-bg-muted}); }
+  // @modifier boolean bg-subtle
+  .box--bg-subtle { --_bg: var(--_color-bg-subtle); }
+  // @modifier boolean bg-muted
+  .box--bg-muted { --_bg: var(--_color-bg-muted); }
 
   // Border radius modifiers
-  .box--rounded { --_radius: var(--ui-radius-md, #{t.$radius-md}); }
-  .box--rounded-lg { --_radius: var(--ui-radius-lg, #{t.$radius-lg}); }
+  // @modifier boolean rounded
+  .box--rounded { --_radius: var(--_radius-md); }
+  // @modifier boolean rounded-lg
+  .box--rounded-lg { --_radius: var(--_radius-lg); }
 }

package/src/layout/center/center.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "center",
   "element": "div",
   "modifiers": {},

package/src/layout/center/index.scss

@@ -1,3 +1,6 @@
+// @component center
+// @element div
+
 @layer primitives {
   .center {
     display: flex;

package/src/layout/column/column.api.json

@@ -1,9 +1,10 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "column",
   "element": "div",
   "modifiers": {
     "size": {
-      "values": ["xs", "sm", "md", "lg"]
+      "values": ["xs", "sm", "md", "lg", "xl"]
     }
   },
   "cssVars": []

package/src/layout/column/index.scss

@@ -1,13 +1,22 @@
+// @component column
+// @element div
+
 @layer primitives {
   .column {
+    --_space-2: var(--ui-space-2);
+    --_space-1: var(--ui-space-1);
+    --_space-4: var(--ui-space-4);
+    --_space-6: var(--ui-space-6);
+    --_space-8: var(--ui-space-8);
     display: flex;
     flex-direction: column;
-    gap: var(--column-gap, var(--ui-space-2));
+    gap: var(--column-gap, var(--_space-2));
   }
 
-  .column--xs { --column-gap: var(--ui-space-1); }
-  .column--sm { --column-gap: var(--ui-space-2); }
-  .column--md { --column-gap: var(--ui-space-4); }
-  .column--lg { --column-gap: var(--ui-space-6); }
-  .column--xl { --column-gap: var(--ui-space-8); }
+  // @modifier size
+  .column--xs { --column-gap: var(--_space-1); }
+  .column--sm { --column-gap: var(--_space-2); }
+  .column--md { --column-gap: var(--_space-4); }
+  .column--lg { --column-gap: var(--_space-6); }
+  .column--xl { --column-gap: var(--_space-8); }
 }

package/src/layout/container/container.api.json

@@ -1,12 +1,13 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "container",
   "element": "div",
   "modifiers": {
-    "size": {
-      "values": ["sm", "md", "lg", "xl", "full"]
-    },
     "center": {
       "type": "boolean"
+    },
+    "size": {
+      "values": ["sm", "md", "lg", "xl", "full"]
     }
   },
   "cssVars": []

package/src/layout/container/index.scss

@@ -1,17 +1,24 @@
+// @component container
+// @element div
+
 @layer primitives {
   .container {
-    max-inline-size: var(--container-width, calc(var(--ui-unit) * 120));
-    padding-inline: var(--ui-space-4);
+    --_unit: var(--ui-unit);
+    --_space-4: var(--ui-space-4);
+    max-inline-size: var(--container-width, calc(var(--_unit) * 120));
+    padding-inline: var(--_space-4);
   }
 
+  // @modifier boolean center
   .container--center {
     margin-inline: auto;
   }
 
   // Size modifiers
-  .container--sm { --container-width: calc(var(--ui-unit) * 80); }
-  .container--md { --container-width: calc(var(--ui-unit) * 100); }
-  .container--lg { --container-width: calc(var(--ui-unit) * 120); }
-  .container--xl { --container-width: calc(var(--ui-unit) * 160); }
+  // @modifier size
+  .container--sm { --container-width: calc(var(--_unit) * 80); }
+  .container--md { --container-width: calc(var(--_unit) * 100); }
+  .container--lg { --container-width: calc(var(--_unit) * 120); }
+  .container--xl { --container-width: calc(var(--_unit) * 160); }
   .container--full { max-inline-size: none; }
 }