@teseor/css 1.8.0 → 1.9.0

package/src/components/forms/field/field.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "field",
   "element": "div",
   "modifiers": {
@@ -7,13 +8,14 @@
     }
   },
   "elements": {
-    "label": {},
-    "control": {}
+    "control": {},
+    "label": {}
   },
   "cssVars": [
     {
       "name": "--ui-field-gap",
-      "default": "0"
+      "default": "0",
+      "description": "Gap between children"
     }
   ]
 }

package/src/components/forms/field/index.scss

@@ -1,10 +1,13 @@
 @use '../../../config/tokens/variables' as t;
+// @component field
+// @element div
 
 // Field - form field wrapper
 // Combines label, control, helper text, and error message
 
 @layer components.tokens {
   .field {
+    // @desc Gap between children
     --_gap: var(--ui-field-gap, 0);
   }
 }
@@ -23,6 +26,7 @@
   }
 
   // Horizontal layout variant
+  // @modifier boolean horizontal
   .field--horizontal {
     flex-direction: row;
     flex-wrap: wrap;

package/src/components/forms/fieldset/fieldset.api.json

@@ -1,11 +1,12 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "fieldset",
   "element": "fieldset",
   "modifiers": {
-    "bordered": {
+    "compact": {
       "type": "boolean"
     },
-    "compact": {
+    "bordered": {
       "type": "boolean"
     }
   },
@@ -15,35 +16,53 @@
   "cssVars": [
     {
       "name": "--ui-fieldset-spacing",
-      "default": "var(--ui-space-2)"
+      "default": "var(--ui-space-2)",
+      "description": "Spacing"
     },
     {
       "name": "--ui-fieldset-border-color",
-      "default": "var(--ui-color-border)"
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
     },
     {
       "name": "--ui-fieldset-border-width",
-      "default": "var(--ui-border-width-sm)"
+      "default": "var(--ui-border-width-sm)",
+      "description": "Border thickness"
     },
     {
       "name": "--ui-fieldset-border-radius",
-      "default": "var(--ui-radius-md)"
+      "default": "var(--ui-radius-md)",
+      "description": "Border radius"
     },
     {
       "name": "--ui-fieldset-padding",
-      "default": "var(--ui-space-2)"
+      "default": "var(--ui-space-2)",
+      "description": "Padding on all sides"
     },
     {
       "name": "--ui-fieldset-legend-size",
-      "default": "var(--ui-font-size-sm)"
+      "default": "var(--ui-font-size-sm)",
+      "description": "Legend size"
     },
     {
       "name": "--ui-fieldset-legend-weight",
-      "default": "var(--ui-weight-medium)"
+      "default": "var(--ui-weight-medium)",
+      "description": "Legend weight"
     },
     {
       "name": "--ui-fieldset-legend-color",
-      "default": "var(--ui-color-text)"
+      "default": "var(--ui-color-text)",
+      "description": "Legend color"
+    },
+    {
+      "name": "--ui-fieldset-spacing-compact",
+      "default": "var(--ui-space-1)",
+      "description": "Spacing compact"
+    },
+    {
+      "name": "--ui-fieldset-padding-compact",
+      "default": "var(--ui-space-1)",
+      "description": "Padding compact"
     }
   ]
 }

package/src/components/forms/fieldset/index.scss

@@ -1,22 +1,38 @@
 @use '../../../config/tokens/variables' as t;
+// @component fieldset
+// @element fieldset
 
 // Fieldset - groups related form fields
 // Resets native fieldset chrome, provides consistent spacing and optional border
 
 @layer components.tokens {
   .fieldset {
+    --_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1, #{t.$leading-tight-sm}));
+    --_space-half: var(--ui-space-half, #{t.$space-0});
+    --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
+    // @desc Spacing
     --_spacing: var(--ui-fieldset-spacing, var(--ui-space-2, #{t.$space-2}));
+    // @desc Border color
     --_border-color: var(--ui-fieldset-border-color, var(--ui-color-border, #{t.$color-border}));
+    // @desc Border thickness
     --_border-width: var(--ui-fieldset-border-width, var(--ui-border-width-sm, #{t.$border-width-sm}));
+    // @desc Border radius
     --_border-radius: var(--ui-fieldset-border-radius, var(--ui-radius-md, #{t.$radius-md}));
+    // @desc Padding on all sides
     --_padding: var(--ui-fieldset-padding, var(--ui-space-2, #{t.$space-2}));
+    // @desc Legend size
     --_legend-size: var(--ui-fieldset-legend-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Legend weight
     --_legend-weight: var(--ui-fieldset-legend-weight, var(--ui-weight-medium, #{t.$weight-medium}));
+    // @desc Legend color
     --_legend-color: var(--ui-fieldset-legend-color, var(--ui-color-text, #{t.$color-text}));
   }
 
+  // @modifier boolean compact
   .fieldset--compact {
+    // @desc Spacing compact
     --_spacing: var(--ui-fieldset-spacing-compact, var(--ui-space-1, #{t.$space-1}));
+    // @desc Padding compact
     --_padding: var(--ui-fieldset-padding-compact, var(--ui-space-1, #{t.$space-1}));
   }
 }
@@ -40,12 +56,13 @@
 
     font-size: var(--_legend-size);
     font-weight: var(--_legend-weight);
-    line-height: var(--ui-leading-tight-sm, var(--ui-row-1, #{t.$leading-tight-sm}));
+    line-height: var(--_leading-tight-sm);
     color: var(--_legend-color);
   }
 
   // Bordered variant - visible border wrapping the group
   // Legend absorbs the top border; compensate bottom border to keep grid rhythm
+  // @modifier boolean bordered
   .fieldset--bordered {
     padding: var(--_padding);
     padding-block-end: calc(var(--_padding) - var(--_border-width));
@@ -56,14 +73,14 @@
 
   .fieldset--bordered > .fieldset__legend {
     inline-size: auto;
-    padding-inline: var(--ui-space-half, #{t.$space-0});
-    margin-inline-start: calc(-1 * var(--ui-space-half, #{t.$space-0}));
+    padding-inline: var(--_space-half);
+    margin-inline-start: calc(-1 * var(--_space-half));
   }
 
   // Disabled state - fieldset[disabled] natively disables children
   .fieldset:disabled,
   .fieldset[aria-disabled='true'] {
-    opacity: var(--ui-opacity-disabled, 0.5);
+    opacity: var(--_opacity-disabled);
     cursor: not-allowed;
   }
 }

package/src/components/forms/form/form.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "form",
   "element": "form",
   "modifiers": {
@@ -13,26 +14,29 @@
     "section": {},
     "actions": {}
   },
+  "relatedComponents": [
+    {
+      "name": "form-error"
+    },
+    {
+      "name": "form-helper"
+    }
+  ],
   "cssVars": [
     {
       "name": "--ui-form-spacing",
-      "default": "var(--ui-space-3)"
+      "default": "var(--ui-space-3)",
+      "description": "Spacing"
     },
     {
       "name": "--ui-form-actions-gap",
-      "default": "var(--ui-space-2)"
+      "default": "var(--ui-space-2)",
+      "description": "Actions gap"
     },
     {
       "name": "--ui-form-section-spacing",
-      "default": "var(--ui-space-4)"
-    },
-    {
-      "name": "--ui-form-spacing-compact",
-      "default": "var(--ui-space-2)"
-    },
-    {
-      "name": "--ui-form-section-spacing-compact",
-      "default": "var(--ui-space-3)"
+      "default": "var(--ui-space-4)",
+      "description": "Section spacing"
     }
   ]
 }

package/src/components/forms/form/index.scss

@@ -1,12 +1,18 @@
 @use '../../../config/tokens/variables' as t;
+// @component form
+// @element form
+// @related form-error, form-helper
 
 // Form - layout container for form fields
 // Provides consistent vertical spacing between fields, sections, and actions
 
 @layer components.tokens {
   .form {
+    // @desc Spacing
     --_spacing: var(--ui-form-spacing, var(--ui-space-3, calc(#{t.$unit} * 3)));
+    // @desc Actions gap
     --_actions-gap: var(--ui-form-actions-gap, var(--ui-space-2, calc(#{t.$unit} * 2)));
+    // @desc Section spacing
     --_section-spacing: var(--ui-form-section-spacing, var(--ui-space-4, calc(#{t.$unit} * 4)));
   }
 }
@@ -44,12 +50,16 @@
   }
 
   // Compact variant - tighter spacing
+  // @modifier boolean compact
   .form--compact {
+    // @desc Spacing compact
     --_spacing: var(--ui-form-spacing-compact, var(--ui-space-2, calc(#{t.$unit} * 2)));
+    // @desc Section spacing compact
     --_section-spacing: var(--ui-form-section-spacing-compact, var(--ui-space-3, calc(#{t.$unit} * 3)));
   }
 
   // Inline variant - horizontal layout for short forms (search, filters)
+  // @modifier boolean inline
   .form--inline {
     flex-direction: row;
     flex-wrap: wrap;

package/src/components/forms/form-error/form-error.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "form-error",
   "element": "div",
   "modifiers": {},
@@ -8,15 +9,18 @@
   "cssVars": [
     {
       "name": "--ui-form-error-color",
-      "default": "var(--ui-color-danger)"
+      "default": "var(--ui-color-danger)",
+      "description": "Text color"
     },
     {
       "name": "--ui-form-error-size",
-      "default": "var(--ui-font-size-sm)"
+      "default": "var(--ui-font-size-sm)",
+      "description": "Overall size"
     },
     {
       "name": "--ui-form-error-gap",
-      "default": "0"
+      "default": "0",
+      "description": "Gap between children"
     }
   ]
 }

package/src/components/forms/form-error/index.scss

@@ -1,12 +1,18 @@
 @use '../../../config/tokens/variables' as t;
+// @component form-error
+// @element div
 
 // Form Error - validation error message for form fields
 // Displays error text with danger color
 
 @layer components.tokens {
   .form-error {
+    --_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1));
+    // @desc Text color
     --_color: var(--ui-form-error-color, var(--ui-color-danger));
+    // @desc Overall size
     --_size: var(--ui-form-error-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Gap between children
     --_gap: var(--ui-form-error-gap, 0);
   }
 }
@@ -20,7 +26,7 @@
     margin-block-start: var(--_gap);
 
     font-size: var(--_size);
-    line-height: var(--ui-leading-tight-sm, var(--ui-row-1));
+    line-height: var(--_leading-tight-sm);
     color: var(--_color);
   }
 

package/src/components/forms/form-helper/form-helper.api.json

@@ -1,19 +1,23 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "form-helper",
   "element": "div",
   "modifiers": {},
   "cssVars": [
     {
       "name": "--ui-form-helper-color",
-      "default": "var(--ui-color-text-muted)"
+      "default": "var(--ui-color-text-muted)",
+      "description": "Text color"
     },
     {
       "name": "--ui-form-helper-size",
-      "default": "var(--ui-font-size-sm)"
+      "default": "var(--ui-font-size-sm)",
+      "description": "Overall size"
     },
     {
       "name": "--ui-form-helper-gap",
-      "default": "0"
+      "default": "0",
+      "description": "Gap between children"
     }
   ]
 }

package/src/components/forms/form-helper/index.scss

@@ -1,12 +1,18 @@
 @use '../../../config/tokens/variables' as t;
+// @component form-helper
+// @element div
 
 // Form Helper - helper text for form fields
 // Displays muted text below form controls
 
 @layer components.tokens {
   .form-helper {
+    --_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1));
+    // @desc Text color
     --_color: var(--ui-form-helper-color, var(--ui-color-text-muted));
+    // @desc Overall size
     --_size: var(--ui-form-helper-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Gap between children
     --_gap: var(--ui-form-helper-gap, 0);
   }
 }
@@ -18,7 +24,7 @@
     margin-block-start: var(--_gap);
 
     font-size: var(--_size);
-    line-height: var(--ui-leading-tight-sm, var(--ui-row-1));
+    line-height: var(--_leading-tight-sm);
     color: var(--_color);
   }
 }

package/src/components/forms/input/index.scss

@@ -2,34 +2,60 @@
 
 // @component input
 // @element input
+// @related input-group
 
 @layer components.tokens {
   .input {
+    --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, ease);
+    --_color-border-strong: var(--ui-color-border-strong, #{t.$color-border-strong});
+    --_border-width-md: var(--ui-border-width-md, #{t.$border-width-md});
+    --_color-focus: var(--ui-color-focus, #{t.$color-focus});
+    --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
+    --_color-bg-subtle: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});
+    --_space-half: var(--ui-space-half, #{t.$space-0});
+    --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});
+    // @desc Overall height
     --_height: var(--ui-input-height, var(--ui-row-2, #{t.$row-2}));
+    // @desc Horizontal padding
     --_padding-x: var(--ui-input-padding-x, var(--ui-space-1, #{t.$space-1}));
+    // @desc Font size
     --_font-size: var(--ui-input-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Corner radius
     --_radius: var(--ui-input-radius, var(--ui-radius-md, #{t.$radius-md}));
+    // @desc Background color
     --_bg: var(--ui-input-bg, var(--ui-color-bg, #{t.$color-bg}));
+    // @desc Border color
     --_border-color: var(--ui-input-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    // @desc Border color focus
     --_border-color-focus: var(--ui-input-border-color-focus, var(--ui-color-primary, #{t.$color-primary}));
+    // @desc Text color
     --_color: var(--ui-input-color, var(--ui-color-text, #{t.$color-text}));
+    // @desc Placeholder
     --_placeholder: var(--ui-input-placeholder, var(--ui-color-text-muted, #{t.$color-text-muted}));
   }
 
   // @modifier size
   .input--sm {
+    // @desc Overall height at small size
     --_height: var(--ui-input-height-sm, calc(#{t.$row} * 1.5));
+    // @desc Font size at small size
     --_font-size: var(--ui-input-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
   }
 
   .input--lg {
+    // @desc Overall height at large size
     --_height: var(--ui-input-height-lg, calc(#{t.$row} * 2.5));
+    // @desc Horizontal padding at large size
     --_padding-x: var(--ui-input-padding-x-lg, var(--ui-space-2, #{t.$space-2}));
+    // @desc Font size at large size
     --_font-size: var(--ui-input-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
   }
 
   // @modifier variant
   .input--filled {
+    // @desc Filled bg
     --_bg: var(--ui-input-filled-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
     --_border-color: transparent;
   }
@@ -41,12 +67,16 @@
 
   // @modifier state
   .input--error {
+    // @desc Error border
     --_border-color: var(--ui-input-error-border, var(--ui-color-danger, #{t.$color-danger}));
+    // @desc Error border
     --_border-color-focus: var(--ui-input-error-border, var(--ui-color-danger, #{t.$color-danger}));
   }
 
   .input--success {
+    // @desc Success border
     --_border-color: var(--ui-input-success-border, var(--ui-color-success, #{t.$color-success}));
+    // @desc Success border
     --_border-color-focus: var(--ui-input-success-border, var(--ui-color-success, #{t.$color-success}));
   }
 }
@@ -65,41 +95,42 @@
     color: var(--_color);
 
     background: var(--_bg);
-    border: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+    border: var(--_border-width-sm) solid var(--_border-color);
     border-radius: var(--_radius);
 
     transition:
-      border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),
-      box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+      border-color var(--_duration-fast) var(--_ease-default),
+      box-shadow var(--_duration-fast) var(--_ease-default);
 
     &::placeholder {
       color: var(--_placeholder);
     }
 
     &:hover:not(:disabled, :focus-visible) {
-      border-color: var(--ui-color-border-strong, #{t.$color-border-strong});
+      border-color: var(--_color-border-strong);
     }
 
     &:focus-visible,
     &--focus {
       border-color: var(--_border-color-focus);
-      outline: var(--ui-border-width-md, #{t.$border-width-md}) solid transparent;
-      outline-offset: var(--ui-border-width-sm, #{t.$border-width-sm});
+      outline: var(--_border-width-md) solid transparent;
+      outline-offset: var(--_border-width-sm);
 
-      box-shadow: 0 0 0 var(--ui-border-width-md, #{t.$border-width-md}) var(--ui-color-focus, #{t.$color-focus});
+      box-shadow: 0 0 0 var(--_border-width-md) var(--_color-focus);
     }
 
     &:disabled,
     &--disabled {
-      opacity: var(--ui-opacity-disabled, 0.5);
+      opacity: var(--_opacity-disabled);
       cursor: not-allowed;
     }
 
     &:read-only {
-      background: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});
+      background: var(--_color-bg-subtle);
     }
 
     // Full width
+  // @modifier boolean block
     &--block {
       inline-size: 100%;
     }
@@ -117,12 +148,12 @@
 
     // With prefix
     &--has-prefix .input {
-      padding-inline-start: calc(var(--_height) + var(--ui-space-half, #{t.$space-0}));
+      padding-inline-start: calc(var(--_height) + var(--_space-half));
     }
 
     // With suffix
     &--has-suffix .input {
-      padding-inline-end: calc(var(--_height) + var(--ui-space-half, #{t.$space-0}));
+      padding-inline-end: calc(var(--_height) + var(--_space-half));
     }
   }
 
@@ -135,7 +166,7 @@
 
     inline-size: var(--_height, #{t.$row-2});
 
-    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+    color: var(--_color-text-muted);
 
     pointer-events: none;