@tangible/ui 0.0.5 → 0.0.7

package/styles/components/input/index.scss

@@ -57,7 +57,7 @@
     select
   ) {
     // Internal tokens — read component API with fallback to primitives
-    --_bg: var(--#{sys.$prefix}input-bg, var(--#{sys.$prefix}color-bg));
+    --_bg: var(--#{sys.$prefix}input-bg, var(--#{sys.$prefix}color-bg-surface));
     --_fg: var(--#{sys.$prefix}input-fg, var(--#{sys.$prefix}color-fg-muted));
     --_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));
@@ -215,7 +215,7 @@
   // ---------------------------------------------------------------------------
   :where(.#{sys.$prefix}interface) input[type="file"] {
     // Internal tokens
-    --_bg: var(--#{sys.$prefix}input-bg, var(--#{sys.$prefix}color-bg));
+    --_bg: var(--#{sys.$prefix}input-bg, var(--#{sys.$prefix}color-bg-surface));
     --_fg: var(--#{sys.$prefix}input-fg, var(--#{sys.$prefix}color-fg-muted));
     --_border: var(--#{sys.$prefix}input-border, var(--#{sys.$prefix}color-border));
     --_radius: var(--#{sys.$prefix}input-radius, var(--#{sys.$prefix}radius-md));

package/styles/index.scss

@@ -35,6 +35,9 @@
   
   @include sys.emit-scale-vars(sys.$prefix, sys.$radius, sys.$font);
 
+  --#{sys.$prefix}typography-weight-normal: 400;
+  --#{sys.$prefix}typography-weight-bold: 700;
+
   --#{sys.$prefix}typography-size: var(--#{sys.$prefix}font-size-base);
   --#{sys.$prefix}typography-line-height: 1.4;
   --#{sys.$prefix}typography-font-family: inherit;
@@ -82,6 +85,17 @@
       text-transform: none;
       letter-spacing: normal;
     }
+
+    // Form input reset — WP and other hosts apply box-shadow on :focus
+    // that competes with our outline-based focus ring.
+    input,
+    textarea,
+    select {
+      &:focus,
+      &:focus-visible {
+        box-shadow: none;
+      }
+    }
   }
 }
 

package/styles/system/_control.scss

@@ -21,6 +21,9 @@
 //     --tui-control-height-sm: 32px;
 //     --tui-control-height-md: 36px;
 //     --tui-control-height-lg: 44px;
+//     --tui-control-font-size-sm: 13px;  /* optional: decouple font from size tier */
+//     --tui-control-font-size-md: 13px;
+//     --tui-control-font-size-lg: 13px;
 //   }
 //
 // Usage:
@@ -29,7 +32,7 @@
 // =============================================================================
 
 @mixin control-sizing($prefix) {
-  --_fs: var(--#{$prefix}typography-size-md);
+  --_fs: var(--#{$prefix}control-font-size-md, var(--#{$prefix}typography-size-md));
   --_py: var(--#{$prefix}spacing-xxs);
   --_height: calc(2em + 2 * var(--_py));
 
@@ -38,12 +41,12 @@
   min-height: var(--#{$prefix}control-height-md, var(--_height));
 
   &.is-size-sm {
-    --_fs: var(--#{$prefix}typography-size-sm);
+    --_fs: var(--#{$prefix}control-font-size-sm, var(--#{$prefix}typography-size-sm));
     min-height: var(--#{$prefix}control-height-sm, var(--_height));
   }
 
   &.is-size-lg {
-    --_fs: var(--#{$prefix}typography-size-lg);
+    --_fs: var(--#{$prefix}control-font-size-lg, var(--#{$prefix}typography-size-lg));
     min-height: var(--#{$prefix}control-height-lg, var(--_height));
   }
 }

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.5",
-  "generated": "2026-03-10T01:28:11.655Z",
+  "version": "0.0.7",
+  "generated": "2026-03-14T17:17:34.578Z",
   "components": {
     "Accordion": {
       "props": {
@@ -428,6 +428,7 @@
       "cssTokens": [
         "--tui-card-bg",
         "--tui-card-border",
+        "--tui-card-border-width",
         "--tui-card-border-interact",
         "--tui-card-radius",
         "--tui-card-shadow",
@@ -829,6 +830,12 @@
           "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,
@@ -845,6 +852,7 @@
         "--tui-combobox-content-border",
         "--tui-combobox-content-shadow",
         "--tui-combobox-content-radius",
+        "--tui-combobox-option-radius",
         "--tui-combobox-option-bg-hover",
         "--tui-combobox-option-bg-selected"
       ],
@@ -1206,6 +1214,11 @@
       "cssTokens": [
         "--tui-modal-z",
         "--tui-modal-max",
+        "--tui-modal-spacing",
+        "--tui-modal-offset-top",
+        "--tui-modal-offset-bottom",
+        "--tui-modal-offset-start",
+        "--tui-modal-offset-end",
         "--tui-modal-backdrop",
         "--tui-modal-bg",
         "--tui-modal-border",
@@ -1399,6 +1412,7 @@
         "--tui-multiselect-content-border",
         "--tui-multiselect-content-shadow",
         "--tui-multiselect-content-radius",
+        "--tui-multiselect-option-radius",
         "--tui-multiselect-option-bg-hover",
         "--tui-multiselect-option-bg-selected",
         "--tui-multiselect-chip-bg",
@@ -1817,6 +1831,11 @@
           "type": "ReactNode",
           "required": false
         },
+        "description": {
+          "type": "string",
+          "required": false,
+          "description": "Description text displayed below the label."
+        },
         "disabled": {
           "type": "boolean",
           "required": false,
@@ -1828,7 +1847,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",
@@ -2099,6 +2126,7 @@
         "--tui-select-content-border",
         "--tui-select-content-shadow",
         "--tui-select-content-radius",
+        "--tui-select-option-radius",
         "--tui-select-option-bg-hover",
         "--tui-select-option-bg-selected"
       ],
@@ -2323,7 +2351,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",

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,