@teseor/css 1.8.0 → 1.10.0

package/src/components/overlays/modal/modal.api.json

@@ -1,12 +1,13 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "modal",
   "element": "div",
   "modifiers": {
+    "size": {
+      "values": ["sm", "lg", "full", "entering"]
+    },
     "visible": {
       "type": "boolean"
-    },
-    "size": {
-      "values": ["sm"]
     }
   },
   "elements": {
@@ -16,39 +17,48 @@
   "cssVars": [
     {
       "name": "--ui-modal-bg",
-      "default": "var(--ui-color-bg)"
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
     },
     {
       "name": "--ui-modal-radius",
-      "default": "var(--ui-radius-lg)"
+      "default": "var(--ui-radius-lg)",
+      "description": "Corner radius"
     },
     {
       "name": "--ui-modal-shadow",
-      "default": "0 calc(var(--ui-unit) * 3"
+      "default": "0 calc(var(--ui-unit) * 3) calc(var(--ui-unit) * 6) rgb(0 0 0 / 0.25)",
+      "description": "Box shadow"
     },
     {
       "name": "--ui-modal-padding",
-      "default": "calc(var(--ui-unit) * 3"
+      "default": "calc(var(--ui-unit) * 3)",
+      "description": "Padding on all sides"
     },
     {
       "name": "--ui-modal-max-width",
-      "default": "calc(var(--ui-unit) * 60"
+      "default": "calc(var(--ui-unit) * 60)",
+      "description": "Maximum width"
     },
     {
       "name": "--ui-modal-max-height",
-      "default": "calc(100vh - var(--ui-unit) * 8"
+      "default": "calc(100vh - var(--ui-unit) * 8)",
+      "description": "Maximum height"
     },
     {
       "name": "--ui-modal-z",
-      "default": "var(--ui-z-modal)"
+      "default": "var(--ui-z-modal)",
+      "description": "Z-index stacking order"
     },
     {
       "name": "--ui-modal-max-width-sm",
-      "default": "calc(var(--ui-unit) * 40"
+      "default": "calc(var(--ui-unit) * 40)",
+      "description": "Maximum width at small size"
     },
     {
       "name": "--ui-modal-max-width-lg",
-      "default": "calc(var(--ui-unit) * 80"
+      "default": "calc(var(--ui-unit) * 80)",
+      "description": "Maximum width at large size"
     }
   ]
 }

package/src/components/overlays/overlay/index.scss

@@ -1,20 +1,30 @@
 @use '../../../config/tokens/variables' as t;
+// @component overlay
+// @element div
 
 // Overlay - backdrop for modals, dialogs, drawers
 // Full viewport coverage with semi-transparent background
 
 @layer components.tokens {
   .overlay {
-    --_bg: var(--ui-overlay-bg, rgb(0 0 0 / 0.5));
-    --_z: var(--ui-overlay-z, var(--ui-z-overlay, 300));
+    --_duration-normal: var(--ui-duration-normal, #{t.$duration-normal});
+    --_ease-default: var(--ui-ease-default, ease);
+    // @desc Background color
+    --_bg: var(--ui-overlay-bg, #{t.$overlay-bg});
+    // @desc Z-index stacking order
+    --_z: var(--ui-overlay-z, var(--ui-z-overlay, #{t.$z-overlay}));
   }
 
+  // @modifier boolean light
   .overlay--light {
-    --_bg: var(--ui-overlay-bg-light, rgb(255 255 255 / 0.7));
+    // @desc Bg light
+    --_bg: var(--ui-overlay-bg-light, #{t.$overlay-bg-light});
   }
 
+  // @modifier boolean blur
   .overlay--blur {
-    --_bg: var(--ui-overlay-bg-blur, rgb(0 0 0 / 0.3));
+    // @desc Bg blur
+    --_bg: var(--ui-overlay-bg-blur, #{t.$overlay-bg-blur});
   }
 }
 
@@ -33,6 +43,7 @@
 
   // Animation states (controlled via JS)
   .overlay--entering,
+  // @modifier boolean visible
   .overlay--visible {
     opacity: 1;
   }
@@ -43,7 +54,8 @@
     pointer-events: none;
   }
 
+  // @modifier boolean animate
   .overlay--animate {
-    transition: opacity var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
+    transition: opacity var(--_duration-normal) var(--_ease-default);
   }
 }

package/src/components/overlays/overlay/overlay.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "overlay",
   "element": "div",
   "modifiers": {
@@ -8,29 +9,33 @@
     "blur": {
       "type": "boolean"
     },
-    "animate": {
+    "visible": {
       "type": "boolean"
     },
-    "visible": {
+    "animate": {
       "type": "boolean"
     }
   },
   "cssVars": [
     {
       "name": "--ui-overlay-bg",
-      "default": "rgb(0 0 0 / 0.5"
+      "default": "var(--ui-overlay-bg)",
+      "description": "Background color"
     },
     {
       "name": "--ui-overlay-z",
-      "default": "var(--ui-z-overlay)"
+      "default": "var(--ui-z-overlay)",
+      "description": "Z-index stacking order"
     },
     {
       "name": "--ui-overlay-bg-light",
-      "default": "rgb(255 255 255 / 0.7"
+      "default": "var(--ui-overlay-bg-light)",
+      "description": "Bg light"
     },
     {
       "name": "--ui-overlay-bg-blur",
-      "default": "rgb(0 0 0 / 0.3"
+      "default": "var(--ui-overlay-bg-blur)",
+      "description": "Bg blur"
     }
   ]
 }

package/src/components/overlays/popover/index.scss

@@ -1,17 +1,33 @@
 @use '../../../config/tokens/variables' as t;
+// @component popover
+// @element div
 
 // Popover - floating panel for additional content
 // Larger than tooltip, can contain structured content
 
 @layer components.tokens {
   .popover {
+    --_row-1: var(--ui-row-1, #{t.$row});
+    --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
+    --_font-size-md: var(--ui-font-size-md, #{t.$font-size-md});
+    --_weight-semibold: var(--ui-weight-semibold, #{t.$weight-semibold});
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, ease);
+    // @desc Background color
     --_bg: var(--ui-popover-bg, var(--ui-color-bg, white));
-    --_border-color: var(--ui-popover-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
+    // @desc Border color
+    --_border-color: var(--ui-popover-border-color, var(--ui-color-border, #{t.$color-border}));
+    // @desc Corner radius
     --_radius: var(--ui-popover-radius, var(--ui-radius-md, calc(#{t.$unit} * 1)));
+    // @desc Box shadow
     --_shadow: var(--ui-popover-shadow, 0 calc(#{t.$unit} / 2) calc(#{t.$unit} * 2) rgb(0 0 0 / 0.15));
+    // @desc Padding on all sides
     --_padding: var(--ui-popover-padding, calc(#{t.$unit} * 2));
+    // @desc Maximum width
     --_max-width: var(--ui-popover-max-width, calc(#{t.$unit} * 40));
-    --_z: var(--ui-popover-z, var(--ui-z-popover, 500));
+    // @desc Z-index stacking order
+    --_z: var(--ui-popover-z, var(--ui-z-popover, #{t.$z-popover}));
+    // @desc Arrow size
     --_arrow-size: var(--ui-popover-arrow-size, calc(#{t.$unit}));
   }
 }
@@ -24,13 +40,13 @@
     max-inline-size: var(--_max-width);
     padding: var(--_padding);
 
-    line-height: var(--ui-row-1, #{t.$row});
+    line-height: var(--_row-1);
 
     background: var(--_bg);
     border-radius: var(--_radius);
-    outline: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
+    outline: var(--_border-width-sm) solid var(--_border-color);
     box-shadow: var(--_shadow);
-    outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
+    outline-offset: calc(var(--_border-width-sm) * -1);
   }
 
   // Header section
@@ -38,17 +54,18 @@
     padding-block-end: calc(#{t.$unit} * 2);
     margin-block-end: calc(#{t.$unit} * 2);
 
-    box-shadow: inset 0 calc(var(--ui-border-width-sm, 1px) * -1) 0 var(--_border-color);
+    box-shadow: inset 0 calc(var(--_border-width-sm) * -1) 0 var(--_border-color);
   }
 
   .popover__title {
     margin: 0;
 
-    font-size: var(--ui-font-size-md, #{t.$font-size-md});
-    font-weight: var(--ui-weight-semibold, 600);
+    font-size: var(--_font-size-md);
+    font-weight: var(--_weight-semibold);
   }
 
   // Arrow pointing down (popover above trigger)
+  // @modifier position
   .popover--top::after {
 
     content: "";
@@ -109,6 +126,6 @@
   }
 
   .popover--animate {
-    transition: opacity var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+    transition: opacity var(--_duration-fast) var(--_ease-default);
   }
 }

package/src/components/overlays/popover/popover.api.json

@@ -1,9 +1,10 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "popover",
   "element": "div",
   "modifiers": {
     "position": {
-      "values": ["top"]
+      "values": ["top", "bottom", "visible", "hidden", "animate"]
     }
   },
   "elements": {
@@ -13,35 +14,43 @@
   "cssVars": [
     {
       "name": "--ui-popover-bg",
-      "default": "var(--ui-color-bg)"
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
     },
     {
       "name": "--ui-popover-border-color",
-      "default": "var(--ui-color-border)"
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
     },
     {
       "name": "--ui-popover-radius",
-      "default": "var(--ui-radius-md)"
+      "default": "var(--ui-radius-md)",
+      "description": "Corner radius"
     },
     {
       "name": "--ui-popover-shadow",
-      "default": "0 calc(var(--ui-unit) / 2"
+      "default": "0 calc(var(--ui-unit) / 2) calc(var(--ui-unit) * 2) rgb(0 0 0 / 0.15)",
+      "description": "Box shadow"
     },
     {
       "name": "--ui-popover-padding",
-      "default": "calc(var(--ui-unit) * 2"
+      "default": "calc(var(--ui-unit) * 2)",
+      "description": "Padding on all sides"
     },
     {
       "name": "--ui-popover-max-width",
-      "default": "calc(var(--ui-unit) * 40"
+      "default": "calc(var(--ui-unit) * 40)",
+      "description": "Maximum width"
     },
     {
       "name": "--ui-popover-z",
-      "default": "var(--ui-z-popover)"
+      "default": "var(--ui-z-popover)",
+      "description": "Z-index stacking order"
     },
     {
       "name": "--ui-popover-arrow-size",
-      "default": "calc(var(--ui-unit)"
+      "default": "calc(var(--ui-unit))",
+      "description": "Arrow size"
     }
   ]
 }

package/src/components/overlays/tooltip/index.scss

@@ -1,17 +1,29 @@
 @use '../../../config/tokens/variables' as t;
+// @component tooltip
+// @element div
 
 // Tooltip - small informational popup
 // Appears on hover/focus to provide additional context
 
 @layer components.tokens {
   .tooltip {
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, ease);
+    // @desc Background color
     --_bg: var(--ui-tooltip-bg, var(--ui-color-text, #{t.$color-text}));
+    // @desc Text color
     --_color: var(--ui-tooltip-color, var(--ui-color-bg, #{t.$color-bg}));
+    // @desc Corner radius
     --_radius: var(--ui-tooltip-radius, var(--ui-radius-sm, calc(#{t.$unit} / 2)));
+    // @desc Horizontal padding
     --_padding-x: var(--ui-tooltip-padding-x, calc(#{t.$unit} * 1));
+    // @desc Vertical padding
     --_padding-y: var(--ui-tooltip-padding-y, calc(#{t.$unit} / 2));
+    // @desc Font size
     --_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));
+    // @desc Z-index stacking order
+    --_z: var(--ui-tooltip-z, var(--ui-z-tooltip, #{t.$z-tooltip}));
+    // @desc Arrow size
     --_arrow-size: var(--ui-tooltip-arrow-size, calc(#{t.$unit} / 2));
   }
 }
@@ -35,6 +47,7 @@
   }
 
   // Arrow pointing down (tooltip above trigger)
+  // @modifier position
   .tooltip--top::after {
 
     content: "";
@@ -87,6 +100,7 @@
   }
 
   // Animation states
+  // @modifier boolean visible
   .tooltip--visible {
     opacity: 1;
   }
@@ -96,7 +110,8 @@
     pointer-events: none;
   }
 
+  // @modifier boolean animate
   .tooltip--animate {
-    transition: opacity var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+    transition: opacity var(--_duration-fast) var(--_ease-default);
   }
 }

package/src/components/overlays/tooltip/tooltip.api.json

@@ -1,49 +1,58 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "tooltip",
   "element": "div",
   "modifiers": {
     "position": {
       "values": ["top", "bottom", "start", "end"]
     },
-    "animate": {
+    "visible": {
       "type": "boolean"
     },
-    "visible": {
+    "animate": {
       "type": "boolean"
     }
   },
   "cssVars": [
     {
       "name": "--ui-tooltip-bg",
-      "default": "var(--ui-color-text)"
+      "default": "var(--ui-color-text)",
+      "description": "Background color"
     },
     {
       "name": "--ui-tooltip-color",
-      "default": "var(--ui-color-bg)"
+      "default": "var(--ui-color-bg)",
+      "description": "Text color"
     },
     {
       "name": "--ui-tooltip-radius",
-      "default": "var(--ui-radius-sm)"
+      "default": "var(--ui-radius-sm)",
+      "description": "Corner radius"
     },
     {
       "name": "--ui-tooltip-padding-x",
-      "default": "calc(var(--ui-unit) * 1"
+      "default": "calc(var(--ui-unit) * 1)",
+      "description": "Horizontal padding"
     },
     {
       "name": "--ui-tooltip-padding-y",
-      "default": "calc(var(--ui-unit) / 2"
+      "default": "calc(var(--ui-unit) / 2)",
+      "description": "Vertical padding"
     },
     {
       "name": "--ui-tooltip-font-size",
-      "default": "var(--ui-font-size-sm)"
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
     },
     {
       "name": "--ui-tooltip-z",
-      "default": "var(--ui-z-tooltip)"
+      "default": "var(--ui-z-tooltip)",
+      "description": "Z-index stacking order"
     },
     {
       "name": "--ui-tooltip-arrow-size",
-      "default": "calc(var(--ui-unit) / 2"
+      "default": "calc(var(--ui-unit) / 2)",
+      "description": "Arrow size"
     }
   ]
 }

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

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "blockquote",
   "element": "blockquote",
   "modifiers": {
@@ -6,13 +7,39 @@
       "values": ["accent"]
     }
   },
-  "subElements": ["cite"],
+  "elements": {
+    "cite": {}
+  },
   "cssVars": [
-    { "name": "--ui-blockquote-border-color", "default": "var(--ui-color-border-strong)" },
-    { "name": "--ui-blockquote-border-width", "default": "var(--ui-border-width-lg)" },
-    { "name": "--ui-blockquote-padding-inline", "default": "var(--ui-space-3)" },
-    { "name": "--ui-blockquote-color", "default": "var(--ui-color-text-muted)" },
-    { "name": "--ui-blockquote-font-size", "default": "var(--ui-font-size-lg)" },
-    { "name": "--ui-blockquote-line-height", "default": "var(--ui-leading-lg)" }
+    {
+      "name": "--ui-blockquote-border-color",
+      "default": "var(--ui-color-border-strong)",
+      "description": "Border color"
+    },
+    {
+      "name": "--ui-blockquote-border-width",
+      "default": "var(--ui-border-width-lg)",
+      "description": "Border thickness"
+    },
+    {
+      "name": "--ui-blockquote-padding-inline",
+      "default": "var(--ui-space-3)",
+      "description": "Horizontal padding"
+    },
+    {
+      "name": "--ui-blockquote-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Text color"
+    },
+    {
+      "name": "--ui-blockquote-font-size",
+      "default": "var(--ui-font-size-lg)",
+      "description": "Font size"
+    },
+    {
+      "name": "--ui-blockquote-line-height",
+      "default": "var(--ui-leading-lg)",
+      "description": "Line height"
+    }
   ]
 }

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

@@ -1,15 +1,28 @@
 @use '../../../config/tokens/variables' as t;
+// @component blockquote
+// @element blockquote
 
 @layer components.tokens {
   .blockquote {
+    --_space-1: var(--ui-space-1, #{t.$space-1});
+    --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
+    --_leading-sm: var(--ui-leading-sm, #{t.$leading-sm});
+    --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});
+    // @desc Border color
     --_border-color: var(--ui-blockquote-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    // @desc Border thickness
     --_border-width: var(--ui-blockquote-border-width, var(--ui-border-width-lg, #{t.$border-width-lg}));
+    // @desc Horizontal padding
     --_padding-inline: var(--ui-blockquote-padding-inline, var(--ui-space-3, #{t.$space-3}));
+    // @desc Text color
     --_color: var(--ui-blockquote-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    // @desc Font size
     --_font-size: var(--ui-blockquote-font-size, var(--ui-font-size-lg, #{t.$font-size-lg}));
+    // @desc Line height
     --_line-height: var(--ui-blockquote-line-height, var(--ui-leading-lg, #{t.$leading-lg}));
   }
 
+  // @modifier variant
   .blockquote--accent {
     --_border-color: var(--ui-color-primary, #{t.$color-primary});
   }
@@ -31,11 +44,11 @@
   .blockquote__cite {
     display: block;
 
-    margin-block-start: var(--ui-space-1, #{t.$space-1});
+    margin-block-start: var(--_space-1);
 
-    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
+    font-size: var(--_font-size-sm);
     font-style: normal;
-    line-height: var(--ui-leading-sm, #{t.$leading-sm});
-    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+    line-height: var(--_leading-sm);
+    color: var(--_color-text-muted);
   }
 }

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

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "code",
   "element": "div",
   "modifiers": {
@@ -6,47 +7,61 @@
       "values": ["sm"]
     }
   },
-  "relatedComponents": ["code-block"],
+  "relatedComponents": [
+    {
+      "name": "code-block"
+    }
+  ],
   "cssVars": [
     {
       "name": "--ui-code-font-size",
-      "default": "var(--ui-font-size-sm)"
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
     },
     {
       "name": "--ui-code-bg",
-      "default": "var(--ui-color-bg-muted)"
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Background color"
     },
     {
       "name": "--ui-code-padding-x",
-      "default": "var(--ui-space-1)"
+      "default": "var(--ui-space-1)",
+      "description": "Horizontal padding"
     },
     {
       "name": "--ui-code-padding-y",
-      "default": "var(--ui-space-0)"
+      "default": "var(--ui-space-0)",
+      "description": "Vertical padding"
     },
     {
       "name": "--ui-code-radius",
-      "default": "var(--ui-radius-sm)"
+      "default": "var(--ui-radius-sm)",
+      "description": "Corner radius"
     },
     {
       "name": "--ui-code-font-size-block",
-      "default": "var(--ui-font-size-sm)"
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size block"
     },
     {
       "name": "--ui-code-bg-block",
-      "default": "var(--ui-color-bg-muted)"
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Bg block"
     },
     {
       "name": "--ui-code-padding-block",
-      "default": "var(--ui-space-3)"
+      "default": "var(--ui-space-3)",
+      "description": "Vertical padding"
     },
     {
       "name": "--ui-code-radius-block",
-      "default": "var(--ui-radius-md)"
+      "default": "var(--ui-radius-md)",
+      "description": "Radius block"
     },
     {
       "name": "--ui-code-border-color-block",
-      "default": "var(--ui-color-border)"
+      "default": "var(--ui-color-border)",
+      "description": "Border color block"
     }
   ]
 }