@teseor/css 1.7.0 → 1.8.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,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component number-input
 // @element div
@@ -57,7 +57,7 @@
 
     &--disabled,
     &:has(.number-input__field:disabled) {
-      opacity: 0.5;
+      opacity: var(--ui-opacity-disabled, 0.5);
       cursor: not-allowed;
     }
   }

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",

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

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component password-input
 // @element div
@@ -69,7 +69,7 @@
 
     &--disabled,
     &:has(.password-input__field:disabled) {
-      opacity: 0.5;
+      opacity: var(--ui-opacity-disabled, 0.5);
       cursor: not-allowed;
     }
   }

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

@@ -48,7 +48,7 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "div",
@@ -146,7 +146,7 @@
       "title": "States",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "div",

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

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component radio
 // @element input
@@ -18,11 +18,16 @@
     --_size: var(--ui-radio-size-lg, calc(#{t.$unit} * 3));
   }
 
-  // @modifier boolean error
+  // @modifier state
   .radio--error {
     --_border-color: var(--ui-radio-error-border, var(--ui-color-danger, #{t.$color-danger}));
     --_border-color-focus: var(--ui-radio-error-border, var(--ui-color-danger, #{t.$color-danger}));
   }
+
+  .radio--success {
+    --_border-color: var(--ui-radio-success-border, var(--ui-color-success, #{t.$color-success}));
+    --_border-color-focus: var(--ui-radio-success-border, var(--ui-color-success, #{t.$color-success}));
+  }
 }
 
 @layer components.styles {
@@ -74,7 +79,9 @@
 
     &:focus-visible {
       border-color: var(--_border-color-focus);
-      outline: none;
+      outline: var(--ui-border-width-md, #{t.$border-width-md}) solid transparent;
+      outline-offset: var(--ui-border-width-sm, #{t.$border-width-sm});
+
       box-shadow: 0 0 0 var(--ui-border-width-md, #{t.$border-width-md}) var(--ui-color-focus, #{t.$color-focus});
     }
 
@@ -89,7 +96,7 @@
     }
 
     &:disabled {
-      opacity: 0.5;
+      opacity: var(--ui-opacity-disabled, 0.5);
       cursor: not-allowed;
     }
   }

package/src/{04-components → components}/forms/radio/radio.api.json

@@ -5,14 +5,14 @@
     "size": {
       "values": ["sm", "lg"]
     },
-    "error": {
-      "type": "boolean"
+    "state": {
+      "values": ["error", "success"]
     }
   },
   "cssVars": [
     {
       "name": "--ui-radio-size",
-      "default": "calc(#{t.$unit} * 2"
+      "default": "calc(var(--ui-unit) * 2"
     },
     {
       "name": "--ui-radio-bg",
@@ -36,11 +36,15 @@
     },
     {
       "name": "--ui-radio-size-lg",
-      "default": "calc(#{t.$unit} * 3"
+      "default": "calc(var(--ui-unit) * 3"
     },
     {
       "name": "--ui-radio-error-border",
       "default": "var(--ui-color-danger)"
+    },
+    {
+      "name": "--ui-radio-success-border",
+      "default": "var(--ui-color-success)"
     }
   ]
 }

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

@@ -9,7 +9,7 @@
       "title": "Default",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             { "tag": "input", "class": "ui-radio", "attrs": { "type": "radio", "name": "demo1" } },
             {
@@ -26,7 +26,7 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "input",
@@ -52,7 +52,7 @@
       "title": "States",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "input",
@@ -80,10 +80,10 @@
       ]
     },
     {
-      "title": "Error State",
+      "title": "Validation States",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "input",
@@ -94,9 +94,19 @@
               "tag": "input",
               "class": "ui-radio ui-radio--error",
               "attrs": { "type": "radio", "name": "error2", "checked": "" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-radio ui-radio--success",
+              "attrs": { "type": "radio", "name": "success1" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-radio ui-radio--success",
+              "attrs": { "type": "radio", "name": "success2", "checked": "" }
             }
           ],
-          "code": "<input type=\"radio\" class=\"ui-radio ui-radio--error\">\n<input type=\"radio\" class=\"ui-radio ui-radio--error\" checked>"
+          "code": "<input type=\"radio\" class=\"ui-radio ui-radio--error\">\n<input type=\"radio\" class=\"ui-radio ui-radio--error\" checked>\n<input type=\"radio\" class=\"ui-radio ui-radio--success\">\n<input type=\"radio\" class=\"ui-radio ui-radio--success\" checked>"
         }
       ]
     },
@@ -104,8 +114,22 @@
       "title": "With Label",
       "examples": [
         {
-          "html": "<label class=\"ui-cluster\" style=\"gap: var(--ui-space-1); cursor: pointer;\"><input type=\"radio\" class=\"ui-radio\" name=\"labeled\"><span>Option one</span></label>",
-          "code": "<label class=\"ui-cluster\">\n  <input type=\"radio\" class=\"ui-radio\" name=\"group\">\n  <span>Option one</span>\n</label>"
+          "items": [
+            {
+              "tag": "label",
+              "class": "ui-row",
+              "attrs": { "style": "gap: var(--ui-space-1); cursor: pointer;" },
+              "children": [
+                {
+                  "tag": "input",
+                  "class": "ui-radio",
+                  "attrs": { "type": "radio", "name": "labeled" }
+                },
+                { "tag": "span", "text": "Option one" }
+              ]
+            }
+          ],
+          "code": "<label class=\"ui-row\">\n  <input type=\"radio\" class=\"ui-radio\" name=\"group\">\n  <span>Option one</span>\n</label>"
         }
       ]
     },
@@ -113,8 +137,66 @@
       "title": "Radio Group",
       "examples": [
         {
-          "html": "<fieldset style=\"border: none; padding: 0; margin: 0;\"><legend style=\"font-weight: 600; margin-block-end: var(--ui-space-1);\">Choose an option</legend><div class=\"ui-stack\" style=\"--stack-gap: var(--ui-space-1);\"><label class=\"ui-cluster\" style=\"gap: var(--ui-space-1); cursor: pointer;\"><input type=\"radio\" class=\"ui-radio\" name=\"group-demo\" checked><span>Option A</span></label><label class=\"ui-cluster\" style=\"gap: var(--ui-space-1); cursor: pointer;\"><input type=\"radio\" class=\"ui-radio\" name=\"group-demo\"><span>Option B</span></label><label class=\"ui-cluster\" style=\"gap: var(--ui-space-1); cursor: pointer;\"><input type=\"radio\" class=\"ui-radio\" name=\"group-demo\"><span>Option C</span></label></div></fieldset>",
-          "code": "<fieldset>\n  <legend>Choose an option</legend>\n  <div class=\"ui-stack\">\n    <label class=\"ui-cluster\">\n      <input type=\"radio\" class=\"ui-radio\" name=\"group\" checked>\n      <span>Option A</span>\n    </label>\n    <label class=\"ui-cluster\">\n      <input type=\"radio\" class=\"ui-radio\" name=\"group\">\n      <span>Option B</span>\n    </label>\n  </div>\n</fieldset>"
+          "items": [
+            {
+              "tag": "fieldset",
+              "attrs": { "style": "border: none; padding: 0; margin: 0;" },
+              "children": [
+                {
+                  "tag": "legend",
+                  "attrs": { "style": "font-weight: 600; margin-block-end: var(--ui-space-1);" },
+                  "text": "Choose an option"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-column",
+                  "attrs": { "style": "--column-gap: var(--ui-space-1);" },
+                  "children": [
+                    {
+                      "tag": "label",
+                      "class": "ui-row",
+                      "attrs": { "style": "gap: var(--ui-space-1); cursor: pointer;" },
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-radio",
+                          "attrs": { "type": "radio", "name": "group-demo", "checked": "" }
+                        },
+                        { "tag": "span", "text": "Option A" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-row",
+                      "attrs": { "style": "gap: var(--ui-space-1); cursor: pointer;" },
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-radio",
+                          "attrs": { "type": "radio", "name": "group-demo" }
+                        },
+                        { "tag": "span", "text": "Option B" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-row",
+                      "attrs": { "style": "gap: var(--ui-space-1); cursor: pointer;" },
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-radio",
+                          "attrs": { "type": "radio", "name": "group-demo" }
+                        },
+                        { "tag": "span", "text": "Option C" }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<fieldset>\n  <legend>Choose an option</legend>\n  <div class=\"ui-column\">\n    <label class=\"ui-row\">\n      <input type=\"radio\" class=\"ui-radio\" name=\"group\" checked>\n      <span>Option A</span>\n    </label>\n    <label class=\"ui-row\">\n      <input type=\"radio\" class=\"ui-radio\" name=\"group\">\n      <span>Option B</span>\n    </label>\n  </div>\n</fieldset>"
         }
       ]
     }
@@ -122,12 +204,12 @@
   "customization": [
     {
       "token": "--ui-radio-size",
-      "default": "calc(var(--unit) * 2)",
+      "default": "calc(var(--ui-unit) * 2)",
       "description": "Default size"
     },
     {
       "token": "--ui-radio-size-lg",
-      "default": "calc(var(--unit) * 3)",
+      "default": "calc(var(--ui-unit) * 3)",
       "description": "Large size"
     },
     {

package/src/{04-components → components}/forms/radio-group/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component radio-group
 // @element fieldset
@@ -64,7 +64,7 @@
   }
 
   .radio-group__item:has(:disabled) {
-    opacity: 0.5;
+    opacity: var(--ui-opacity-disabled, 0.5);
     cursor: not-allowed;
   }
 
@@ -78,7 +78,7 @@
   // Disabled group
   .radio-group:disabled,
   .radio-group[aria-disabled='true'] {
-    opacity: 0.5;
+    opacity: var(--ui-opacity-disabled, 0.5);
     cursor: not-allowed;
   }
 }

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

@@ -1,6 +1,7 @@
 {
   "id": "radio-group",
   "type": "component",
+  "mergeInto": "radio",
   "title": "Radio Group",
   "description": "Groups related radio buttons with a legend for single selection. Built on native fieldset semantics.",
   "api": "./radio-group.api.json",

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

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component search-input
 // @element div
@@ -65,7 +65,7 @@
     // Disabled
     &--disabled,
     &:has(.search-input__field:disabled) {
-      opacity: 0.5;
+      opacity: var(--ui-opacity-disabled, 0.5);
       cursor: not-allowed;
     }
   }

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

@@ -94,7 +94,7 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "div",

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

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component select
 // @element select
@@ -12,7 +12,7 @@
     --_bg: var(--ui-select-bg, var(--ui-color-bg, #{t.$color-bg}));
     --_border-color: var(--ui-select-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
     --_border-color-focus: var(--ui-select-border-color-focus, var(--ui-color-primary, #{t.$color-primary}));
-    --_text: var(--ui-select-text, var(--ui-color-text, #{t.$color-text}));
+    --_color: var(--ui-select-color, var(--ui-color-text, #{t.$color-text}));
     --_icon-color: var(--ui-select-icon-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
   }
 
@@ -64,7 +64,7 @@
     font-family: inherit;
     font-size: var(--_font-size);
     line-height: 1;
-    color: var(--_text);
+    color: var(--_color);
 
     background-color: var(--_bg);
     // Chevron down arrow
@@ -82,20 +82,22 @@
     background-position: right var(--ui-space-half, #{t.$space-0}) center;
     background-size: calc(var(--_height) * 0.5);
 
-    &:hover:not(:disabled, :focus) {
+    &:hover:not(:disabled, :focus-visible) {
       border-color: var(--ui-color-border-strong, #{t.$color-border-strong});
     }
 
-    &:focus,
+    &:focus-visible,
     &--focus {
       border-color: var(--_border-color-focus);
-      outline: none;
+      outline: var(--ui-border-width-md, #{t.$border-width-md}) solid transparent;
+      outline-offset: var(--ui-border-width-sm, #{t.$border-width-sm});
+
       box-shadow: 0 0 0 var(--ui-border-width-md, #{t.$border-width-md}) var(--ui-color-focus, #{t.$color-focus});
     }
 
     &:disabled,
     &--disabled {
-      opacity: 0.5;
+      opacity: var(--ui-opacity-disabled, 0.5);
       cursor: not-allowed;
     }
 

package/src/{04-components → components}/forms/select/select.api.json

@@ -45,7 +45,7 @@
       "default": "var(--ui-color-primary)"
     },
     {
-      "name": "--ui-select-text",
+      "name": "--ui-select-color",
       "default": "var(--ui-color-text)"
     },
     {
@@ -54,7 +54,7 @@
     },
     {
       "name": "--ui-select-height-sm",
-      "default": "calc(#{t.$row} * 1.5"
+      "default": "calc(var(--ui-row) * 1.5"
     },
     {
       "name": "--ui-select-font-size-sm",
@@ -62,7 +62,7 @@
     },
     {
       "name": "--ui-select-height-lg",
-      "default": "calc(#{t.$row} * 2.5"
+      "default": "calc(var(--ui-row) * 2.5"
     },
     {
       "name": "--ui-select-padding-x-lg",