@teseor/css 1.8.0 → 1.10.0

package/src/components/data-display/table/index.scss

@@ -1,15 +1,28 @@
 @use '../../../config/tokens/variables' as t;
+// @component table
+// @element div
 
 // Token definitions
 @layer components.tokens {
   .table {
+    --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
+    --_unit: var(--ui-unit, #{t.$unit});
+    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_color-bg-subtle: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});
+    --_color-bg-muted: var(--ui-color-bg-muted, #{t.$color-bg-muted});
+    // @desc Font size
     --_font-size: var(--ui-table-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Border color
     --_border-color: var(--ui-table-border-color, var(--ui-color-border, #{t.$color-border}));
+    // @desc Header background color
     --_header-bg: var(--ui-table-header-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+    // @desc Cell padding x
     --_cell-padding-x: var(--ui-table-cell-padding-x, var(--ui-space-2, #{t.$space-2}));
+    // @desc Cell padding y
     --_cell-padding-y: var(--ui-table-cell-padding-y, var(--ui-space-1, #{t.$space-1}));
   }
 
+  // @modifier boolean compact
   .table--compact {
     --_cell-padding-y: var(--ui-space-0, #{t.$space-0});
     --_cell-padding-x: var(--ui-space-1, #{t.$space-1});
@@ -31,29 +44,30 @@
     td {
       // Subtract border from bottom padding to keep row on grid
       padding-block-start: var(--_cell-padding-y);
-      padding-block-end: calc(var(--_cell-padding-y) - var(--ui-border-width-sm, #{t.$border-width-sm}));
+      padding-block-end: calc(var(--_cell-padding-y) - var(--_border-width-sm));
       padding-inline: var(--_cell-padding-x);
       // Grid-aligned line-height (3 units = 24px at 8px unit)
-      line-height: calc(var(--ui-unit, #{t.$unit}) * 3);
+      line-height: calc(var(--_unit) * 3);
       text-align: start;
 
-      border-block-end: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+      border-block-end: var(--_border-width-sm) solid var(--_border-color);
     }
 
     th {
-      font-weight: var(--ui-weight-medium, #{t.$weight-medium});
+      font-weight: var(--_weight-medium);
 
       background: var(--_header-bg);
     }
 
     // Striped variant
+  // @modifier boolean striped
     &--striped {
       tbody tr:nth-child(odd) {
-        background: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});
+        background: var(--_color-bg-subtle);
       }
 
       th {
-        background: var(--ui-color-bg-muted, #{t.$color-bg-muted});
+        background: var(--_color-bg-muted);
       }
     }
   }

package/src/components/data-display/table/table.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "table",
   "element": "div",
   "modifiers": {
@@ -12,23 +13,28 @@
   "cssVars": [
     {
       "name": "--ui-table-font-size",
-      "default": "var(--ui-font-size-sm)"
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
     },
     {
       "name": "--ui-table-border-color",
-      "default": "var(--ui-color-border)"
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
     },
     {
       "name": "--ui-table-header-bg",
-      "default": "var(--ui-color-bg-subtle)"
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Header background color"
     },
     {
       "name": "--ui-table-cell-padding-x",
-      "default": "var(--ui-space-2)"
+      "default": "var(--ui-space-2)",
+      "description": "Cell padding x"
     },
     {
       "name": "--ui-table-cell-padding-y",
-      "default": "var(--ui-space-1)"
+      "default": "var(--ui-space-1)",
+      "description": "Cell padding y"
     }
   ]
 }

package/src/components/data-display/tag/index.scss

@@ -2,49 +2,74 @@
 
 // @component tag
 // @element span
+// @related tag-group
 
 @layer components.tokens {
   .tag {
+    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
+    --_opacity-loading: var(--ui-opacity-loading, #{t.$opacity-loading});
+    // @desc Overall height
     --_height: var(--ui-tag-height, calc(#{t.$unit} * 3));
+    // @desc Horizontal padding
     --_padding-x: var(--ui-tag-padding-x, var(--ui-space-1, #{t.$space-1}));
+    // @desc Gap between children
     --_gap: var(--ui-tag-gap, calc(#{t.$unit} * 0.5));
+    // @desc Corner radius
     --_radius: var(--ui-tag-radius, var(--ui-radius-full, #{t.$radius-full}));
+    // @desc Font size
     --_font-size: var(--ui-tag-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Background color
     --_bg: var(--ui-tag-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    // @desc Text color
     --_color: var(--ui-tag-color, var(--ui-color-text, #{t.$color-text}));
   }
 
   // @modifier size
   .tag--sm {
+    // @desc Overall height at small size
     --_height: var(--ui-tag-height-sm, calc(#{t.$unit} * 2.5));
+    // @desc Horizontal padding at small size
     --_padding-x: var(--ui-tag-padding-x-sm, calc(#{t.$unit} * 1));
+    // @desc Font size at small size
     --_font-size: var(--ui-tag-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
   }
 
   .tag--lg {
+    // @desc Overall height at large size
     --_height: var(--ui-tag-height-lg, calc(#{t.$unit} * 3.5));
+    // @desc Horizontal padding at large size
     --_padding-x: var(--ui-tag-padding-x-lg, var(--ui-space-2, #{t.$space-2}));
+    // @desc Font size at large size
     --_font-size: var(--ui-tag-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
   }
 
   // @modifier variant
   .tag--primary {
+    // @desc Primary bg
     --_bg: var(--ui-tag-primary-bg, var(--ui-color-primary, #{t.$color-primary}));
+    // @desc Primary color
     --_color: var(--ui-tag-primary-color, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
   }
 
   .tag--success {
+    // @desc Success bg
     --_bg: var(--ui-tag-success-bg, var(--ui-color-success, #{t.$color-success}));
+    // @desc Success color
     --_color: var(--ui-tag-success-color, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
   }
 
   .tag--warning {
+    // @desc Warning bg
     --_bg: var(--ui-tag-warning-bg, var(--ui-color-warning, #{t.$color-warning}));
+    // @desc Warning color
     --_color: var(--ui-tag-warning-color, var(--ui-color-text, #{t.$color-text}));
   }
 
   .tag--danger {
+    // @desc Danger bg
     --_bg: var(--ui-tag-danger-bg, var(--ui-color-danger, #{t.$color-danger}));
+    // @desc Danger color
     --_color: var(--ui-tag-danger-color, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
   }
 }
@@ -59,7 +84,7 @@
     padding-inline: var(--_padding-x);
 
     font-size: var(--_font-size);
-    font-weight: var(--ui-weight-medium, #{t.$weight-medium});
+    font-weight: var(--_weight-medium);
     line-height: 1;
     white-space: nowrap;
     color: var(--_color);
@@ -69,7 +94,7 @@
 
     &:disabled,
     &[aria-disabled='true'] {
-      opacity: var(--ui-opacity-disabled, 0.5);
+      opacity: var(--_opacity-disabled);
       cursor: not-allowed;
     }
   }
@@ -87,7 +112,7 @@
 
     background: none;
     border: none;
-    opacity: var(--ui-opacity-loading, 0.7);
+    opacity: var(--_opacity-loading);
     cursor: pointer;
 
     &:hover {

package/src/components/data-display/tag/tag.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "tag",
   "element": "span",
   "modifiers": {
@@ -12,91 +13,116 @@
   "elements": {
     "remove": {}
   },
-  "relatedComponents": ["tag-group"],
+  "relatedComponents": [
+    {
+      "name": "tag-group"
+    }
+  ],
   "cssVars": [
     {
       "name": "--ui-tag-height",
-      "default": "calc(var(--ui-unit) * 3"
+      "default": "calc(var(--ui-unit) * 3)",
+      "description": "Overall height"
     },
     {
       "name": "--ui-tag-padding-x",
-      "default": "var(--ui-space-1)"
+      "default": "var(--ui-space-1)",
+      "description": "Horizontal padding"
     },
     {
       "name": "--ui-tag-gap",
-      "default": "calc(var(--ui-unit) * 0.5"
+      "default": "calc(var(--ui-unit) * 0.5)",
+      "description": "Gap between children"
     },
     {
       "name": "--ui-tag-radius",
-      "default": "var(--ui-radius-full)"
+      "default": "var(--ui-radius-full)",
+      "description": "Corner radius"
     },
     {
       "name": "--ui-tag-font-size",
-      "default": "var(--ui-font-size-sm)"
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
     },
     {
       "name": "--ui-tag-bg",
-      "default": "var(--ui-color-bg-muted)"
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Background color"
     },
     {
       "name": "--ui-tag-color",
-      "default": "var(--ui-color-text)"
+      "default": "var(--ui-color-text)",
+      "description": "Text color"
     },
     {
       "name": "--ui-tag-height-sm",
-      "default": "calc(var(--ui-unit) * 2.5"
+      "default": "calc(var(--ui-unit) * 2.5)",
+      "description": "Overall height at small size"
     },
     {
       "name": "--ui-tag-padding-x-sm",
-      "default": "calc(var(--ui-unit) * 1"
+      "default": "calc(var(--ui-unit) * 1)",
+      "description": "Horizontal padding at small size"
     },
     {
       "name": "--ui-tag-font-size-sm",
-      "default": "var(--ui-font-size-xs)"
+      "default": "var(--ui-font-size-xs)",
+      "description": "Font size at small size"
     },
     {
       "name": "--ui-tag-height-lg",
-      "default": "calc(var(--ui-unit) * 3.5)"
+      "default": "calc(var(--ui-unit) * 3.5)",
+      "description": "Overall height at large size"
     },
     {
       "name": "--ui-tag-padding-x-lg",
-      "default": "var(--ui-space-2)"
+      "default": "var(--ui-space-2)",
+      "description": "Horizontal padding at large size"
     },
     {
       "name": "--ui-tag-font-size-lg",
-      "default": "var(--ui-font-size-md)"
+      "default": "var(--ui-font-size-md)",
+      "description": "Font size at large size"
     },
     {
       "name": "--ui-tag-primary-bg",
-      "default": "var(--ui-color-primary)"
+      "default": "var(--ui-color-primary)",
+      "description": "Primary bg"
     },
     {
       "name": "--ui-tag-primary-color",
-      "default": "var(--ui-color-text-inverse)"
+      "default": "var(--ui-color-text-inverse)",
+      "description": "Primary color"
     },
     {
       "name": "--ui-tag-success-bg",
-      "default": "var(--ui-color-success)"
+      "default": "var(--ui-color-success)",
+      "description": "Success bg"
     },
     {
       "name": "--ui-tag-success-color",
-      "default": "var(--ui-color-text-inverse)"
+      "default": "var(--ui-color-text-inverse)",
+      "description": "Success color"
     },
     {
       "name": "--ui-tag-warning-bg",
-      "default": "var(--ui-color-warning)"
+      "default": "var(--ui-color-warning)",
+      "description": "Warning bg"
     },
     {
       "name": "--ui-tag-warning-color",
-      "default": "var(--ui-color-text)"
+      "default": "var(--ui-color-text)",
+      "description": "Warning color"
     },
     {
       "name": "--ui-tag-danger-bg",
-      "default": "var(--ui-color-danger)"
+      "default": "var(--ui-color-danger)",
+      "description": "Danger bg"
     },
     {
       "name": "--ui-tag-danger-color",
-      "default": "var(--ui-color-text-inverse)"
+      "default": "var(--ui-color-text-inverse)",
+      "description": "Danger color"
     }
   ]
 }

package/src/components/disclosure/accordion/accordion.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "accordion",
   "element": "div",
   "modifiers": {
@@ -9,15 +10,18 @@
   "cssVars": [
     {
       "name": "--ui-accordion-border-color",
-      "default": "var(--ui-color-border)"
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
     },
     {
       "name": "--ui-accordion-border-width",
-      "default": "1px"
+      "default": "var(--ui-border-width-sm)",
+      "description": "Border thickness"
     },
     {
       "name": "--ui-accordion-radius",
-      "default": "var(--ui-radius-md)"
+      "default": "var(--ui-radius-md)",
+      "description": "Corner radius"
     }
   ]
 }

package/src/components/disclosure/accordion/index.scss

@@ -1,12 +1,17 @@
 @use '../../../config/tokens/variables' as t;
+// @component accordion
+// @element div
 
 // Accordion - grouped expandable sections
 // Container for multiple disclosure items
 
 @layer components.tokens {
   .accordion {
-    --_border-color: var(--ui-accordion-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
-    --_border-width: var(--ui-accordion-border-width, 1px);
+    // @desc Border color
+    --_border-color: var(--ui-accordion-border-color, var(--ui-color-border, #{t.$color-border}));
+    // @desc Border thickness
+    --_border-width: var(--ui-accordion-border-width, #{t.$border-width-sm});
+    // @desc Corner radius
     --_radius: var(--ui-accordion-radius, var(--ui-radius-md, calc(#{t.$unit} * 1)));
   }
 }
@@ -59,6 +64,7 @@
   }
 
   // Separated variant - gap between items
+  // @modifier boolean separated
   .accordion--separated {
     display: flex;
     flex-direction: column;

package/src/components/disclosure/disclosure/disclosure.api.json

@@ -1,11 +1,12 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "disclosure",
   "element": "div",
   "modifiers": {
-    "borderless": {
+    "animate": {
       "type": "boolean"
     },
-    "animate": {
+    "borderless": {
       "type": "boolean"
     }
   },
@@ -17,27 +18,33 @@
   "cssVars": [
     {
       "name": "--ui-disclosure-border-color",
-      "default": "var(--ui-color-border)"
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
     },
     {
       "name": "--ui-disclosure-border-width",
-      "default": "1px"
+      "default": "var(--ui-border-width-sm)",
+      "description": "Border thickness"
     },
     {
       "name": "--ui-disclosure-radius",
-      "default": "var(--ui-radius-md)"
+      "default": "var(--ui-radius-md)",
+      "description": "Corner radius"
     },
     {
       "name": "--ui-disclosure-trigger-height",
-      "default": "var(--ui-row-3)"
+      "default": "var(--ui-row-3)",
+      "description": "Trigger overall height"
     },
     {
       "name": "--ui-disclosure-padding-x",
-      "default": "calc(var(--ui-unit) * 2"
+      "default": "calc(var(--ui-unit) * 2)",
+      "description": "Horizontal padding"
     },
     {
       "name": "--ui-disclosure-padding-y",
-      "default": "calc(var(--ui-unit) * 2"
+      "default": "calc(var(--ui-unit) * 2)",
+      "description": "Vertical padding"
     }
   ]
 }

package/src/components/disclosure/disclosure/index.scss

@@ -1,15 +1,28 @@
 @use '../../../config/tokens/variables' as t;
+// @component disclosure
+// @element div
 
 // Disclosure - expandable/collapsible content section
 // Uses native details/summary for no-JS accessibility
 
 @layer components.tokens {
   .disclosure {
-    --_border-color: var(--ui-disclosure-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
-    --_border-width: var(--ui-disclosure-border-width, 1px);
+    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_color-bg-subtle: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, ease);
+    --_duration-normal: var(--ui-duration-normal, #{t.$duration-normal});
+    // @desc Border color
+    --_border-color: var(--ui-disclosure-border-color, var(--ui-color-border, #{t.$color-border}));
+    // @desc Border thickness
+    --_border-width: var(--ui-disclosure-border-width, #{t.$border-width-sm});
+    // @desc Corner radius
     --_radius: var(--ui-disclosure-radius, var(--ui-radius-md, calc(#{t.$unit} * 1)));
+    // @desc Trigger overall height
     --_trigger-height: var(--ui-disclosure-trigger-height, var(--ui-row-3, calc(#{t.$row} * 3)));
+    // @desc Horizontal padding
     --_padding-x: var(--ui-disclosure-padding-x, calc(#{t.$unit} * 2));
+    // @desc Vertical padding
     --_padding-y: var(--ui-disclosure-padding-y, calc(#{t.$unit} * 2));
   }
 }
@@ -38,7 +51,7 @@
     inline-size: 100%;
     padding-inline: var(--_padding-x);
 
-    font-weight: var(--ui-weight-medium, 500);
+    font-weight: var(--_weight-medium);
     line-height: 1;
     text-align: start;
 
@@ -56,14 +69,14 @@
 
   // Trigger hover state
   .disclosure__trigger:hover {
-    background: var(--ui-color-bg-subtle, rgb(0 0 0 / 0.02));
+    background: var(--_color-bg-subtle);
   }
 
   // Icon that rotates when open
   .disclosure__icon {
     flex-shrink: 0;
 
-    transition: transform var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+    transition: transform var(--_duration-fast) var(--_ease-default);
   }
 
   .disclosure[open] .disclosure__icon {
@@ -76,8 +89,9 @@
   }
 
   // Animation for content
+  // @modifier boolean animate
   .disclosure--animate .disclosure__content {
-    animation: disclosure-open var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
+    animation: disclosure-open var(--_duration-normal) var(--_ease-default);
   }
 
   @keyframes disclosure-open {
@@ -93,6 +107,7 @@
   }
 
   // Borderless variant
+  // @modifier boolean borderless
   .disclosure--borderless {
     --_border-width: 0;