@teseor/css 1.7.0 → 1.9.0

package/src/{04-components → components}/forms/label/label.docs.json

@@ -9,7 +9,14 @@
       "title": "Default",
       "examples": [
         {
-          "html": "<label class=\"ui-label\" for=\"input1\">Email address</label>",
+          "items": [
+            {
+              "tag": "label",
+              "class": "ui-label",
+              "text": "Email address",
+              "attrs": { "for": "input1" }
+            }
+          ],
           "code": "<label class=\"ui-label\" for=\"input\">Email address</label>"
         }
       ]
@@ -18,7 +25,17 @@
       "title": "Required",
       "examples": [
         {
-          "html": "<label class=\"ui-label\" for=\"input2\">Email address<span class=\"ui-label__required\">*</span></label>",
+          "items": [
+            {
+              "tag": "label",
+              "class": "ui-label",
+              "attrs": { "for": "input2" },
+              "children": [
+                { "text": "Email address" },
+                { "tag": "span", "class": "ui-label__required", "text": "*" }
+              ]
+            }
+          ],
           "code": "<label class=\"ui-label\" for=\"input\">\n  Email address\n  <span class=\"ui-label__required\">*</span>\n</label>"
         }
       ]
@@ -27,7 +44,17 @@
       "title": "Optional",
       "examples": [
         {
-          "html": "<label class=\"ui-label\" for=\"input3\">Phone number<span class=\"ui-label__optional\">(optional)</span></label>",
+          "items": [
+            {
+              "tag": "label",
+              "class": "ui-label",
+              "attrs": { "for": "input3" },
+              "children": [
+                { "text": "Phone number" },
+                { "tag": "span", "class": "ui-label__optional", "text": "(optional)" }
+              ]
+            }
+          ],
           "code": "<label class=\"ui-label\" for=\"input\">\n  Phone number\n  <span class=\"ui-label__optional\">(optional)</span>\n</label>"
         }
       ]
@@ -36,8 +63,11 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "stack",
-          "html": "<label class=\"ui-label\">Default size</label><label class=\"ui-label ui-label--lg\">Large size</label>",
+          "layout": "column",
+          "items": [
+            { "tag": "label", "class": "ui-label", "text": "Default size" },
+            { "tag": "label", "class": "ui-label ui-label--lg", "text": "Large size" }
+          ],
           "code": "<label class=\"ui-label\">Default</label>\n<label class=\"ui-label ui-label--lg\">Large</label>"
         }
       ]
@@ -46,7 +76,14 @@
       "title": "Disabled",
       "examples": [
         {
-          "html": "<label class=\"ui-label\" aria-disabled=\"true\">Disabled label</label>",
+          "items": [
+            {
+              "tag": "label",
+              "class": "ui-label",
+              "text": "Disabled label",
+              "attrs": { "aria-disabled": "true" }
+            }
+          ],
           "code": "<label class=\"ui-label\" aria-disabled=\"true\">Disabled</label>"
         }
       ]

package/src/{04-components → components}/forms/number-input/index.scss

@@ -1,32 +1,55 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component number-input
 // @element div
 
 @layer components.tokens {
   .number-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);
+    --_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});
+    --_size-sm: var(--ui-size-sm, #{t.size(sm)});
+    // @desc Overall height
     --_height: var(--ui-number-input-height, var(--ui-row-2, #{t.$row-2}));
+    // @desc Horizontal padding
     --_padding-x: var(--ui-number-input-padding-x, var(--ui-space-1, #{t.$space-1}));
+    // @desc Font size
     --_font-size: var(--ui-number-input-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Corner radius
     --_radius: var(--ui-number-input-radius, var(--ui-radius-md, #{t.$radius-md}));
+    // @desc Background color
     --_bg: var(--ui-number-input-bg, var(--ui-color-bg, #{t.$color-bg}));
+    // @desc Border color
     --_border-color: var(--ui-number-input-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    // @desc Border color focus
     --_border-color-focus: var(--ui-number-input-border-color-focus, var(--ui-color-primary, #{t.$color-primary}));
+    // @desc Text
     --_text: var(--ui-number-input-text, var(--ui-color-text, #{t.$color-text}));
+    // @desc Button color
     --_button-color: var(--ui-number-input-button-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    // @desc Button bg
     --_button-bg: var(--ui-number-input-button-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    // @desc Button hover bg
     --_button-hover-bg: var(--ui-number-input-button-hover-bg, var(--ui-color-border, #{t.$color-border}));
   }
 
   // @modifier size
   .number-input--sm {
+    // @desc Overall height at small size
     --_height: var(--ui-number-input-height-sm, calc(#{t.$row} * 1.5));
+    // @desc Font size at small size
     --_font-size: var(--ui-number-input-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
   }
 
   .number-input--lg {
+    // @desc Overall height at large size
     --_height: var(--ui-number-input-height-lg, calc(#{t.$row} * 2.5));
+    // @desc Horizontal padding at large size
     --_padding-x: var(--ui-number-input-padding-x-lg, var(--ui-space-2, #{t.$space-2}));
+    // @desc Font size at large size
     --_font-size: var(--ui-number-input-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
   }
 }
@@ -39,25 +62,27 @@
     block-size: var(--_height);
 
     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);
 
     &:focus-within {
       border-color: var(--_border-color-focus);
-      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);
     }
 
+  // @modifier boolean block
     &--block {
       inline-size: 100%;
     }
 
+  // @modifier boolean disabled
     &--disabled,
     &:has(.number-input__field:disabled) {
-      opacity: 0.5;
+      opacity: var(--_opacity-disabled);
       cursor: not-allowed;
     }
   }
@@ -110,14 +135,14 @@
     border: none;
     cursor: pointer;
 
-    transition: background var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+    transition: background var(--_duration-fast) var(--_ease-default);
 
     &:hover:not(:disabled) {
       background: var(--_button-hover-bg);
     }
 
     &:focus-visible {
-      outline: 2px solid var(--ui-color-focus, #{t.$color-focus});
+      outline: 2px solid var(--_color-focus);
       outline-offset: -2px;
     }
 
@@ -126,8 +151,8 @@
     }
 
     svg {
-      block-size: var(--ui-size-sm, #{t.size(sm)});
-      inline-size: var(--ui-size-sm, #{t.size(sm)});
+      block-size: var(--_size-sm);
+      inline-size: var(--_size-sm);
 
       fill: none;
       stroke: currentcolor;
@@ -138,16 +163,16 @@
   }
 
   .number-input__decrement {
-    border-start-start-radius: calc(var(--_radius) - var(--ui-border-width-sm, #{t.$border-width-sm}));
-    border-end-start-radius: calc(var(--_radius) - var(--ui-border-width-sm, #{t.$border-width-sm}));
+    border-start-start-radius: calc(var(--_radius) - var(--_border-width-sm));
+    border-end-start-radius: calc(var(--_radius) - var(--_border-width-sm));
 
-    border-inline-end: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+    border-inline-end: var(--_border-width-sm) solid var(--_border-color);
   }
 
   .number-input__increment {
-    border-start-end-radius: calc(var(--_radius) - var(--ui-border-width-sm, #{t.$border-width-sm}));
-    border-end-end-radius: calc(var(--_radius) - var(--ui-border-width-sm, #{t.$border-width-sm}));
+    border-start-end-radius: calc(var(--_radius) - var(--_border-width-sm));
+    border-end-end-radius: calc(var(--_radius) - var(--_border-width-sm));
 
-    border-inline-start: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+    border-inline-start: var(--_border-width-sm) solid var(--_border-color);
   }
 }

package/src/components/forms/number-input/number-input.api.json

@@ -0,0 +1,103 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "number-input",
+  "element": "div",
+  "modifiers": {
+    "size": {
+      "values": ["sm", "lg"]
+    },
+    "block": {
+      "type": "boolean"
+    },
+    "disabled": {
+      "type": "boolean"
+    }
+  },
+  "elements": {
+    "field": {},
+    "decrement": {},
+    "increment": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-number-input-height",
+      "default": "var(--ui-row-2)",
+      "description": "Overall height"
+    },
+    {
+      "name": "--ui-number-input-padding-x",
+      "default": "var(--ui-space-1)",
+      "description": "Horizontal padding"
+    },
+    {
+      "name": "--ui-number-input-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
+    },
+    {
+      "name": "--ui-number-input-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Corner radius"
+    },
+    {
+      "name": "--ui-number-input-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
+    },
+    {
+      "name": "--ui-number-input-border-color",
+      "default": "var(--ui-color-border-strong)",
+      "description": "Border color"
+    },
+    {
+      "name": "--ui-number-input-border-color-focus",
+      "default": "var(--ui-color-primary)",
+      "description": "Border color focus"
+    },
+    {
+      "name": "--ui-number-input-text",
+      "default": "var(--ui-color-text)",
+      "description": "Text"
+    },
+    {
+      "name": "--ui-number-input-button-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Button color"
+    },
+    {
+      "name": "--ui-number-input-button-bg",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Button bg"
+    },
+    {
+      "name": "--ui-number-input-button-hover-bg",
+      "default": "var(--ui-color-border)",
+      "description": "Button hover bg"
+    },
+    {
+      "name": "--ui-number-input-height-sm",
+      "default": "calc(var(--ui-row) * 1.5)",
+      "description": "Overall height at small size"
+    },
+    {
+      "name": "--ui-number-input-font-size-sm",
+      "default": "var(--ui-font-size-xs)",
+      "description": "Font size at small size"
+    },
+    {
+      "name": "--ui-number-input-height-lg",
+      "default": "calc(var(--ui-row) * 2.5)",
+      "description": "Overall height at large size"
+    },
+    {
+      "name": "--ui-number-input-padding-x-lg",
+      "default": "var(--ui-space-2)",
+      "description": "Horizontal padding at large size"
+    },
+    {
+      "name": "--ui-number-input-font-size-lg",
+      "default": "var(--ui-font-size-md)",
+      "description": "Font size at large size"
+    }
+  ]
+}

package/src/{04-components → components}/forms/number-input/number-input.docs.json

@@ -57,7 +57,7 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "div",
@@ -178,6 +178,55 @@
         }
       ]
     },
+    {
+      "title": "Block",
+      "description": "Full-width layout.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-number-input ui-number-input--block",
+              "children": [
+                {
+                  "tag": "button",
+                  "class": "ui-number-input__decrement",
+                  "attrs": { "type": "button", "aria-label": "Decrease" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "viewBox": "0 0 24 24" },
+                      "children": [{ "tag": "path", "attrs": { "d": "M5 12h14" } }]
+                    }
+                  ]
+                },
+                {
+                  "tag": "input",
+                  "class": "ui-number-input__field",
+                  "attrs": { "type": "number", "value": "5" }
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-number-input__increment",
+                  "attrs": { "type": "button", "aria-label": "Increase" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "viewBox": "0 0 24 24" },
+                      "children": [
+                        { "tag": "path", "attrs": { "d": "M12 5v14" } },
+                        { "tag": "path", "attrs": { "d": "M5 12h14" } }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-number-input ui-number-input--block\">...</div>"
+        }
+      ]
+    },
     {
       "title": "Disabled",
       "examples": [

package/src/{04-components → components}/forms/password-input/index.scss

@@ -1,43 +1,72 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component password-input
 // @element div
 
 @layer components.tokens {
   .password-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);
+    --_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});
+    --_space-half: var(--ui-space-half, #{t.$space-0});
+    --_radius-sm: var(--ui-radius-sm, #{t.$radius-sm});
+    --_size-md: var(--ui-size-md, #{t.size(md)});
+    // @desc Overall height
     --_height: var(--ui-password-input-height, var(--ui-row-2, #{t.$row-2}));
+    // @desc Horizontal padding
     --_padding-x: var(--ui-password-input-padding-x, var(--ui-space-1, #{t.$space-1}));
+    // @desc Font size
     --_font-size: var(--ui-password-input-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Corner radius
     --_radius: var(--ui-password-input-radius, var(--ui-radius-md, #{t.$radius-md}));
+    // @desc Background color
     --_bg: var(--ui-password-input-bg, var(--ui-color-bg, #{t.$color-bg}));
+    // @desc Border color
     --_border-color: var(--ui-password-input-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    // @desc Border color focus
     --_border-color-focus: var(--ui-password-input-border-color-focus, var(--ui-color-primary, #{t.$color-primary}));
+    // @desc Text
     --_text: var(--ui-password-input-text, var(--ui-color-text, #{t.$color-text}));
+    // @desc Placeholder
     --_placeholder: var(--ui-password-input-placeholder, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    // @desc Toggle color
     --_toggle-color: var(--ui-password-input-toggle-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    // @desc Toggle hover bg
     --_toggle-hover-bg: var(--ui-password-input-toggle-hover-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
   }
 
   // @modifier size
   .password-input--sm {
+    // @desc Overall height at small size
     --_height: var(--ui-password-input-height-sm, calc(#{t.$row} * 1.5));
+    // @desc Font size at small size
     --_font-size: var(--ui-password-input-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
   }
 
   .password-input--lg {
+    // @desc Overall height at large size
     --_height: var(--ui-password-input-height-lg, calc(#{t.$row} * 2.5));
+    // @desc Horizontal padding at large size
     --_padding-x: var(--ui-password-input-padding-x-lg, var(--ui-space-2, #{t.$space-2}));
+    // @desc Font size at large size
     --_font-size: var(--ui-password-input-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
   }
 
   // @modifier state
   .password-input--error {
+    // @desc Error border
     --_border-color: var(--ui-password-input-error-border, var(--ui-color-danger, #{t.$color-danger}));
+    // @desc Error border
     --_border-color-focus: var(--ui-password-input-error-border, var(--ui-color-danger, #{t.$color-danger}));
   }
 
   .password-input--success {
+    // @desc Success border
     --_border-color: var(--ui-password-input-success-border, var(--ui-color-success, #{t.$color-success}));
+    // @desc Success border
     --_border-color-focus: var(--ui-password-input-success-border, var(--ui-color-success, #{t.$color-success}));
   }
 }
@@ -50,26 +79,28 @@
     block-size: var(--_height);
 
     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);
 
     &:focus-within,
     &--focus {
       border-color: var(--_border-color-focus);
-      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);
     }
 
+  // @modifier boolean block
     &--block {
       inline-size: 100%;
     }
 
+  // @modifier boolean disabled
     &--disabled,
     &:has(.password-input__field:disabled) {
-      opacity: 0.5;
+      opacity: var(--_opacity-disabled);
       cursor: not-allowed;
     }
   }
@@ -102,31 +133,31 @@
     align-items: center;
     justify-content: center;
 
-    block-size: calc(var(--_height) - var(--ui-space-half, #{t.$space-0}) * 2);
-    inline-size: calc(var(--_height) - var(--ui-space-half, #{t.$space-0}) * 2);
-    margin-inline-end: calc(var(--ui-space-half, #{t.$space-0}));
+    block-size: calc(var(--_height) - var(--_space-half) * 2);
+    inline-size: calc(var(--_height) - var(--_space-half) * 2);
+    margin-inline-end: calc(var(--_space-half));
 
     color: var(--_toggle-color);
 
     background: transparent;
     border: none;
-    border-radius: var(--ui-radius-sm, #{t.$radius-sm});
+    border-radius: var(--_radius-sm);
     cursor: pointer;
 
-    transition: background var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+    transition: background var(--_duration-fast) var(--_ease-default);
 
     &:hover {
       background: var(--_toggle-hover-bg);
     }
 
     &:focus-visible {
-      outline: 2px solid var(--ui-color-focus, #{t.$color-focus});
+      outline: 2px solid var(--_color-focus);
       outline-offset: -2px;
     }
 
     svg {
-      block-size: var(--ui-size-md, #{t.size(md)});
-      inline-size: var(--ui-size-md, #{t.size(md)});
+      block-size: var(--_size-md);
+      inline-size: var(--_size-md);
 
       fill: none;
       stroke: currentcolor;

package/src/components/forms/password-input/password-input.api.json

@@ -0,0 +1,115 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "password-input",
+  "element": "div",
+  "modifiers": {
+    "size": {
+      "values": ["sm", "lg"]
+    },
+    "state": {
+      "values": ["error", "success"]
+    },
+    "block": {
+      "type": "boolean"
+    },
+    "disabled": {
+      "type": "boolean"
+    }
+  },
+  "elements": {
+    "field": {},
+    "toggle": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-password-input-height",
+      "default": "var(--ui-row-2)",
+      "description": "Overall height"
+    },
+    {
+      "name": "--ui-password-input-padding-x",
+      "default": "var(--ui-space-1)",
+      "description": "Horizontal padding"
+    },
+    {
+      "name": "--ui-password-input-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
+    },
+    {
+      "name": "--ui-password-input-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Corner radius"
+    },
+    {
+      "name": "--ui-password-input-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
+    },
+    {
+      "name": "--ui-password-input-border-color",
+      "default": "var(--ui-color-border-strong)",
+      "description": "Border color"
+    },
+    {
+      "name": "--ui-password-input-border-color-focus",
+      "default": "var(--ui-color-primary)",
+      "description": "Border color focus"
+    },
+    {
+      "name": "--ui-password-input-text",
+      "default": "var(--ui-color-text)",
+      "description": "Text"
+    },
+    {
+      "name": "--ui-password-input-placeholder",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Placeholder"
+    },
+    {
+      "name": "--ui-password-input-toggle-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Toggle color"
+    },
+    {
+      "name": "--ui-password-input-toggle-hover-bg",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Toggle hover bg"
+    },
+    {
+      "name": "--ui-password-input-height-sm",
+      "default": "calc(var(--ui-row) * 1.5)",
+      "description": "Overall height at small size"
+    },
+    {
+      "name": "--ui-password-input-font-size-sm",
+      "default": "var(--ui-font-size-xs)",
+      "description": "Font size at small size"
+    },
+    {
+      "name": "--ui-password-input-height-lg",
+      "default": "calc(var(--ui-row) * 2.5)",
+      "description": "Overall height at large size"
+    },
+    {
+      "name": "--ui-password-input-padding-x-lg",
+      "default": "var(--ui-space-2)",
+      "description": "Horizontal padding at large size"
+    },
+    {
+      "name": "--ui-password-input-font-size-lg",
+      "default": "var(--ui-font-size-md)",
+      "description": "Font size at large size"
+    },
+    {
+      "name": "--ui-password-input-error-border",
+      "default": "var(--ui-color-danger)",
+      "description": "Error border"
+    },
+    {
+      "name": "--ui-password-input-success-border",
+      "default": "var(--ui-color-success)",
+      "description": "Success border"
+    }
+  ]
+}