@tangible/ui 0.0.6 → 0.0.7

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.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,
@@ -1824,6 +1831,11 @@
           "type": "ReactNode",
           "required": false
         },
+        "description": {
+          "type": "string",
+          "required": false,
+          "description": "Description text displayed below the label."
+        },
         "disabled": {
           "type": "boolean",
           "required": false,
@@ -1835,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",
@@ -2331,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,