@tangible/ui 0.0.7 → 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/tui-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.0.7",
-  "generated": "2026-03-14T17:17:34.578Z",
+  "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,
@@ -521,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,
@@ -840,6 +859,11 @@
           "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": [
@@ -859,6 +883,7 @@
       "story": {
         "title": "Forms/Combobox",
         "tags": [
+          "stable",
           "lms"
         ]
       },
@@ -968,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",
@@ -1285,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",
@@ -1396,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,
@@ -1422,6 +1426,7 @@
         "title": "Forms/MultiSelect",
         "tags": [
           "autodocs",
+          "stable",
           "lms"
         ]
       },
@@ -1698,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": [
@@ -1930,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": [
@@ -1970,7 +1985,7 @@
           "description": "Visual style"
         },
         "size": {
-          "type": "\"sm\" | \"md\"",
+          "type": "\"sm\" | \"md\" | \"lg\"",
           "required": false,
           "description": "Size scale"
         },
@@ -1984,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,
@@ -2005,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": [
@@ -2134,7 +2157,8 @@
         "title": "Forms/Select",
         "tags": [
           "autodocs",
-          "lms"
+          "lms",
+          "stable"
         ]
       },
       "subcomponents": null,
@@ -2242,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": [],
@@ -2523,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": [],
@@ -2603,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": [
@@ -2902,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"
   }
 }