@tangible/ui 0.0.6 → 0.0.8

package/styles/components/input/index.scss

@@ -13,6 +13,8 @@
   //   --tui-input-border-focus  Focus state border color
   //   --tui-input-border-invalid Invalid state border color
   //   --tui-input-radius        Border radius
+  //   --tui-input-fg-placeholder Placeholder text color
+  //   --tui-input-bg-readonly   Read-only background color
   //   --tui-input-accent        Accent color (checkboxes, toggles)
   //
   // To override from consuming code:
@@ -58,7 +60,7 @@
   ) {
     // Internal tokens — read component API with fallback to primitives
     --_bg: var(--#{sys.$prefix}input-bg, var(--#{sys.$prefix}color-bg-surface));
-    --_fg: var(--#{sys.$prefix}input-fg, var(--#{sys.$prefix}color-fg-muted));
+    --_fg: var(--#{sys.$prefix}input-fg, var(--#{sys.$prefix}color-fg));
     --_border: var(--#{sys.$prefix}input-border, var(--#{sys.$prefix}color-border));
     --_border-focus: var(--#{sys.$prefix}input-border-focus, var(--#{sys.$prefix}theme-primary-base));
     --_border-invalid: var(--#{sys.$prefix}input-border-invalid, var(--#{sys.$prefix}theme-danger-base));
@@ -79,12 +81,22 @@
     transition-timing-function: var(--#{sys.$prefix}motion-timing);
     transition-property: border-color, color, background-color;
 
+    &::placeholder {
+      color: var(--#{sys.$prefix}input-fg-placeholder, var(--#{sys.$prefix}color-fg-muted));
+      opacity: 1; // Normalize Firefox which applies its own opacity reduction
+    }
+
     &:focus-visible {
       --_border: var(--_border-focus);
       outline: var(--#{sys.$prefix}focus-ring-width) solid var(--#{sys.$prefix}focus-ring-color);
       outline-offset: var(--#{sys.$prefix}focus-ring-offset);
     }
 
+    &[readonly] {
+      background-color: var(--#{sys.$prefix}input-bg-readonly, var(--#{sys.$prefix}color-bg));
+      cursor: default;
+    }
+
     &[disabled] {
       opacity: var(--#{sys.$prefix}opacity-disabled);
       cursor: not-allowed;
@@ -110,26 +122,33 @@
   // Inline choice (radio/checkbox with label)
   // ---------------------------------------------------------------------------
   :where(.#{sys.$prefix}interface) .#{sys.$prefix}inline-choice {
-    // Internal tokens
-    --_accent: var(--#{sys.$prefix}input-accent, var(--#{sys.$prefix}theme-primary-base));
-
     display: flex;
     align-items: center;
     gap: var(--#{sys.$prefix}spacing-xs);
+    cursor: pointer;
+
+    // Radio: native appearance with accent-color
+    input[type="radio"] {
+      --_accent: var(--#{sys.$prefix}input-accent, var(--#{sys.$prefix}theme-primary-base));
 
-    input[type="radio"],
-    input[type="checkbox"] {
       font-size: 1.15em;
       width: 1em;
       height: 1em;
       flex: 0 0 1em;
       margin: 0;
 
+      &:focus-visible {
+        outline: var(--#{sys.$prefix}focus-ring-width) solid var(--#{sys.$prefix}focus-ring-color);
+        outline-offset: var(--#{sys.$prefix}focus-ring-offset);
+      }
+
       &:checked {
         accent-color: var(--_accent);
       }
     }
 
+    // Checkbox: fully handled by Checkbox/styles.scss (appearance, sizing, states).
+
     label {
       font-weight: unset;
       line-height: 1.25em;
@@ -140,6 +159,9 @@
   // ---------------------------------------------------------------------------
   // Toggle switch
   // ---------------------------------------------------------------------------
+  // The base checkbox rule (Checkbox/styles.scss) applies appearance: none and
+  // visual properties to ALL checkboxes. The toggle's checkbox is visually hidden
+  // via clip/position — those properties are inert on a clipped element.
   :where(.#{sys.$prefix}interface) .#{sys.$prefix}toggle {
     // Internal tokens
     --_accent: var(--#{sys.$prefix}input-accent, var(--#{sys.$prefix}theme-primary-base));
@@ -216,7 +238,7 @@
   :where(.#{sys.$prefix}interface) input[type="file"] {
     // Internal tokens
     --_bg: var(--#{sys.$prefix}input-bg, var(--#{sys.$prefix}color-bg-surface));
-    --_fg: var(--#{sys.$prefix}input-fg, var(--#{sys.$prefix}color-fg-muted));
+    --_fg: var(--#{sys.$prefix}input-fg, var(--#{sys.$prefix}color-fg));
     --_border: var(--#{sys.$prefix}input-border, var(--#{sys.$prefix}color-border));
     --_radius: var(--#{sys.$prefix}input-radius, var(--#{sys.$prefix}radius-md));
 

package/styles/system/_constants.scss

@@ -7,6 +7,6 @@
 
 $prefix: tui- !default;
 $container-name: tuiContainer !default;
-$radius: (xs: 2px, sm: 4px, md: 8px, lg: 12px) !default;
+$radius: (xs: 2px, sm: 4px, md: 8px, lg: 12px, full: 9999px) !default;
 $space : (1: .25rem, 2: .5rem, 3: .75rem, 4: 1rem) !default;
 $font  : (base-size: 16px, line: 1.5) !default;

package/styles/system/_tokens.scss

@@ -48,6 +48,7 @@ $brand: 'blue';
 
     /* Font Weight */
     --#{$prefix}font-weight-medium: 500;
+    --#{$prefix}font-weight-semibold: 600;
 
     /* Border */
     --#{$prefix}border-width: 1px;

package/styles/utilities/_index.scss

@@ -209,19 +209,29 @@
     .is-place-center { place-items: center; }
     .is-place-end    { place-items: end; }
 
-    // Lists as layout containers
-    ul.#{sys.$prefix}grid, 
+    // Lists as layout containers — strip list chrome but leave margin alone
+    // so spacing utilities (tui-margin-block-end-lg etc.) can still win.
+    ul.#{sys.$prefix}grid,
     ul.#{sys.$prefix}stack,
     ul.#{sys.$prefix}inline-flex,
-    ul.#{sys.$prefix}flex { list-style: none !important; padding: 0 !important; margin: 0 !important; }
+    ul.#{sys.$prefix}flex { list-style: none !important; padding-inline-start: 0 !important; }
 
-    ul.#{sys.$prefix}grid > li, 
+    ul.#{sys.$prefix}grid > li,
     ul.#{sys.$prefix}stack > li,
     ul.#{sys.$prefix}inline-flex > li,
     ul.#{sys.$prefix}flex > li {
       list-style: none !important;
     }
 
+    // Opt-in full list reset — use when you want zero margin/padding on a list
+    .#{sys.$prefix}list-reset {
+      list-style: none !important;
+      padding: 0 !important;
+      margin: 0 !important;
+
+      > li { list-style: none !important; }
+    }
+
     // ---------------------------
     // Density utilities (aliases)
     // Applies to BOTH grid and flex via shared custom props.

package/tui-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.0.6",
-  "generated": "2026-03-11T21:53:09.418Z",
+  "version": "0.0.8",
+  "generated": "2026-03-17T20:49:24.034Z",
   "components": {
     "Accordion": {
       "props": {
@@ -140,6 +140,11 @@
           "required": false,
           "description": "When true, wraps the avatar with a Tooltip showing the `name`.\nHelps sighted users discover the user's name on hover/focus.\nHas no effect when `name` is not provided."
         },
+        "labels": {
+          "type": "AvatarLabels",
+          "required": false,
+          "description": "Overridable strings for i18n."
+        },
         "className": {
           "type": "string",
           "required": false,
@@ -230,6 +235,11 @@
           "defaultValue": "`${label}, loading` (English)",
           "description": "Accessible label override during loading state. For i18n support.\nWhen loading, this replaces the auto-composed label."
         },
+        "labels": {
+          "type": "ButtonLabels",
+          "required": false,
+          "description": "Override default English strings for i18n.\nCovers strings not already handled by existing props (e.g. `loadingLabel`)."
+        },
         "target": {
           "type": "HTMLAttributeAnchorTarget",
           "required": false,
@@ -428,6 +438,7 @@
       "cssTokens": [
         "--tui-card-bg",
         "--tui-card-border",
+        "--tui-card-border-width",
         "--tui-card-border-interact",
         "--tui-card-radius",
         "--tui-card-shadow",
@@ -520,17 +531,26 @@
         },
         "label": {
           "type": "ReactNode",
-          "required": false
+          "required": false,
+          "description": "When provided, renders the checkbox inside a `<label>` with this content.\nWhen omitted, renders a bare `<input>` — you must provide an accessible name\nvia `aria-label`, `aria-labelledby`, or a wrapping `Field.Control` + `Field.Label`.\n@remarks When used inside `Field.Control`, `Field.Label` injects `aria-labelledby`\nonto the input. If both `label` and `Field.Label` are present, AT may concatenate\nboth names. Prefer one labelling mechanism — either `label` prop or `Field.Label`."
         }
       },
       "cssTokens": [
-        "--tui-input-accent"
+        "--tui-checkbox-accent",
+        "--tui-checkbox-border",
+        "--tui-checkbox-border-invalid",
+        "--tui-checkbox-radius",
+        "--tui-checkbox-bg",
+        "--tui-checkbox-size",
+        "--tui-checkbox-gap",
+        "--tui-checkbox-label-color"
       ],
       "story": {
         "title": "Forms/Checkbox",
         "tags": [
           "autodocs",
-          "lms"
+          "lms",
+          "a11y"
         ]
       },
       "subcomponents": null,
@@ -829,10 +849,21 @@
           "defaultValue": "true",
           "description": "Whether to open the listbox when the input receives focus."
         },
+        "clearable": {
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether to show the clear button when a value is present."
+        },
         "inputClassName": {
           "type": "string",
           "required": false,
           "description": "Class name applied directly to the `<input>` element.\nUse for utilities like `tui-input-reset` that must target the input itself."
+        },
+        "labels": {
+          "type": "ComboboxLabels",
+          "required": false,
+          "description": "Override default English strings for i18n."
         }
       },
       "cssTokens": [
@@ -852,6 +883,7 @@
       "story": {
         "title": "Forms/Combobox",
         "tags": [
+          "stable",
           "lms"
         ]
       },
@@ -961,33 +993,7 @@
       "notFor": null
     },
     "Field": {
-      "props": {
-        "error": {
-          "type": "boolean",
-          "required": false,
-          "description": "Whether the field has an error state"
-        },
-        "required": {
-          "type": "boolean",
-          "required": false,
-          "description": "Whether the field is required"
-        },
-        "disabled": {
-          "type": "boolean",
-          "required": false,
-          "description": "Whether the field is disabled"
-        },
-        "inline": {
-          "type": "boolean",
-          "required": false,
-          "description": "Inline layout: label and control on same row"
-        },
-        "className": {
-          "type": "string",
-          "required": false,
-          "description": "Additional class name for the field wrapper"
-        }
-      },
+      "props": {},
       "cssTokens": [
         "--tui-field-gap",
         "--tui-field-label-fg",
@@ -1278,7 +1284,7 @@
           "type": "\"sm\" | \"md\"",
           "required": false,
           "defaultValue": "md",
-          "description": "Component scale. sm = 32px, md = 40px. Ignored when mode is 'handle'."
+          "description": "Component scale. Full mode: sm = 32px, md = 40px. Handle mode: sm = 24px, md = 32px."
         },
         "index": {
           "type": "number",
@@ -1389,6 +1395,11 @@
           "required": false,
           "description": "Maximum number of selections allowed.\nWhen reached, unselected options become disabled."
         },
+        "labels": {
+          "type": "MultiSelectLabels",
+          "required": false,
+          "description": "Override internal display and screen reader strings for i18n.\nAll keys are optional — omitted keys use English defaults."
+        },
         "id": {
           "type": "string",
           "required": false,
@@ -1415,6 +1426,7 @@
         "title": "Forms/MultiSelect",
         "tags": [
           "autodocs",
+          "stable",
           "lms"
         ]
       },
@@ -1691,6 +1703,11 @@
           "type": "string",
           "required": false,
           "description": "Additional class name"
+        },
+        "labels": {
+          "type": "PagerLabels",
+          "required": false,
+          "description": "Overridable label strings for i18n.\nAll keys are optional — defaults are English."
         }
       },
       "cssTokens": [
@@ -1824,6 +1841,11 @@
           "type": "ReactNode",
           "required": false
         },
+        "description": {
+          "type": "string",
+          "required": false,
+          "description": "Description text displayed below the label."
+        },
         "disabled": {
           "type": "boolean",
           "required": false,
@@ -1835,7 +1857,15 @@
         }
       },
       "cssTokens": [
-        "--tui-radio-accent"
+        "--tui-radio-accent",
+        "--tui-radio-size",
+        "--tui-radio-border",
+        "--tui-radio-bg",
+        "--tui-radio-gap",
+        "--tui-radio-font-size",
+        "--tui-radio-label-color",
+        "--tui-radio-description-color",
+        "--tui-radio-group-gap"
       ],
       "story": {
         "title": "Forms/RadioGroup",
@@ -1910,6 +1940,11 @@
           "type": "string",
           "required": false,
           "description": "Gap override (e.g. '0.25rem') – otherwise uses density utilities"
+        },
+        "labels": {
+          "type": "RatingLabels",
+          "required": false,
+          "description": "Override default English strings for i18n."
         }
       },
       "cssTokens": [
@@ -1950,7 +1985,7 @@
           "description": "Visual style"
         },
         "size": {
-          "type": "\"sm\" | \"md\"",
+          "type": "\"sm\" | \"md\" | \"lg\"",
           "required": false,
           "description": "Size scale"
         },
@@ -1964,6 +1999,11 @@
           "required": false,
           "description": "Whether arrow keys wrap around"
         },
+        "wrap": {
+          "type": "boolean",
+          "required": false,
+          "description": "Allow items to wrap to multiple lines (default: false)"
+        },
         "disabled": {
           "type": "boolean",
           "required": false,
@@ -1985,13 +2025,16 @@
         "--tui-segmented-item-radius",
         "--tui-segmented-item-fg",
         "--tui-segmented-item-bg-active",
-        "--tui-segmented-item-fg-active"
+        "--tui-segmented-item-fg-active",
+        "--tui-segmented-indicator",
+        "--tui-segmented-indicator-size"
       ],
       "story": {
         "title": "Components/SegmentedControl",
         "tags": [
           "autodocs",
-          "stable"
+          "stable",
+          "a11y"
         ]
       },
       "subcomponents": [
@@ -2114,7 +2157,8 @@
         "title": "Forms/Select",
         "tags": [
           "autodocs",
-          "lms"
+          "lms",
+          "stable"
         ]
       },
       "subcomponents": null,
@@ -2222,6 +2266,11 @@
           "type": "string",
           "required": false,
           "description": "Additional CSS class names."
+        },
+        "labels": {
+          "type": "StepIndicatorLabels",
+          "required": false,
+          "description": "Override default English strings for i18n.\nCovers status display names and the aria-label template."
         }
       },
       "cssTokens": [],
@@ -2331,7 +2380,14 @@
       },
       "cssTokens": [
         "--tui-switch-accent",
-        "--tui-switch-track-off"
+        "--tui-switch-bg",
+        "--tui-switch-border",
+        "--tui-switch-thumb-bg",
+        "--tui-switch-track-height",
+        "--tui-switch-size",
+        "--tui-switch-label-color",
+        "--tui-switch-font-size",
+        "--tui-switch-gap"
       ],
       "story": {
         "title": "Forms/Switch",
@@ -2496,13 +2552,13 @@
           "type": "\"none\" | \"vertical\" | \"horizontal\" | \"both\"",
           "required": false,
           "defaultValue": "vertical",
-          "description": "Resize behaviour.\nIgnored when `autoResize` is true (resize is disabled to avoid conflict)."
+          "description": "Resize behaviour.\nIgnored when `autoResize` is true (resize is disabled to avoid conflict).\nTakes precedence over `style.resize` when both are provided."
         },
         "autoResize": {
           "type": "boolean",
           "required": false,
           "defaultValue": "false",
-          "description": "Automatically grow height to fit content.\nDisables manual resize and scrollbar."
+          "description": "Automatically grow height to fit content.\nDisables manual resize and sets `overflow: hidden`.\n\n**Warning:** If you apply an external `max-height` via CSS or `style`,\ncontent beyond that height will be clipped with no scrollbar.\nIn that case, add `overflow-y: auto` to restore scrolling."
         }
       },
       "cssTokens": [],
@@ -2576,12 +2632,12 @@
         "suffix": {
           "type": "ReactNode",
           "required": false,
-          "description": "Content to render after the input (icon, button)."
+          "description": "Content to render after the input (icon, button).\n@remarks String addons (e.g. \"USD\", \".com\") are not part of the input's\naccessible name. Use `aria-label` on the input to provide full context."
         },
         "inputClassName": {
           "type": "string",
           "required": false,
-          "description": "Class name applied directly to the `<input>` element.\nUse for utilities like `tui-input-reset` that must target the input itself."
+          "description": "Class name applied directly to the `<input>` element.\nUse for utilities like `tui-input-reset` (removes browser-native search\ndecoration, clear buttons, and spinners) that must target the input itself."
         }
       },
       "cssTokens": [
@@ -2875,12 +2931,12 @@
   "icons": {
     "sets": {
       "cred": 12,
-      "lms": 7,
+      "lms": 11,
       "player": 24,
       "reaction": 36,
-      "system": 76
+      "system": 86
     },
-    "total": 155,
+    "total": 169,
     "manifest": "./icons/manifest.json"
   }
 }

package/utils/use-roving-group.js

@@ -52,11 +52,15 @@ export function useRovingGroup({ selectedValue, onSelect, disabled = false, loop
         const items = getOrderedItems().filter((item) => !item.disabled && !disabled);
         if (items.length === 0)
             return;
-        let currentIndex = selectedValue !== undefined
-            ? items.findIndex((item) => toKey(item.value) === toKey(selectedValue))
-            : -1;
-        if (currentIndex === -1)
-            currentIndex = 0;
+        // Only handle keys when a registered item has focus — don't hijack
+        // arrow keys from nested interactive controls (e.g. number inputs).
+        const target = event.target;
+        if (!items.some((item) => item.element === target))
+            return;
+        // Navigate from the focused item, not the selected value — these can
+        // differ when there's no selection or when focus moved without selecting.
+        const focusedIndex = items.findIndex((item) => item.element === target);
+        const currentIndex = focusedIndex !== -1 ? focusedIndex : 0;
         // Determine which keys map to next/prev
         let nextKeys;
         let prevKeys;
@@ -107,7 +111,6 @@ export function useRovingGroup({ selectedValue, onSelect, disabled = false, loop
     }, [
         getOrderedItems,
         disabled,
-        selectedValue,
         orientationKeyboard,
         orientation,
         loop,