@tangible/ui 0.0.9 → 0.0.10

package/components/Combobox/Combobox.js

@@ -152,8 +152,18 @@ function ComboboxRoot({ value: controlledValue, defaultValue, onValueChange, inp
         role,
         listNavigation,
     ]);
+    // Flag: first registerOption call after open clears stale entries.
+    const prevOpenForFlush = useRef(open);
+    const needsFlushRef = useRef(false);
+    if (open && !prevOpenForFlush.current)
+        needsFlushRef.current = true;
+    prevOpenForFlush.current = open;
     // Register option
     const registerOption = useCallback((option) => {
+        if (needsFlushRef.current) {
+            optionsRef.current.clear();
+            needsFlushRef.current = false;
+        }
         optionsRef.current.set(toKey(option.value), option);
         setRegistryVersion((v) => v + 1);
     }, []);
@@ -166,14 +176,6 @@ function ComboboxRoot({ value: controlledValue, defaultValue, onValueChange, inp
         optionsRef.current.delete(toKey(optionValue));
         setRegistryVersion((v) => v + 1);
     }, []);
-    // Flush stale registry on open. Options that were registered before close
-    // may no longer exist (parent changed children while closed). Clearing
-    // before the new options mount ensures no orphaned entries accumulate.
-    useLayoutEffect(() => {
-        if (open) {
-            optionsRef.current.clear();
-        }
-    }, [open]);
     // Active option ID for aria-activedescendant (hash-based for stability during filtering)
     const activeOptionId = activeIndex >= 0 && orderedOptions[activeIndex]
         ? `${listboxId}-opt-${hashForId(toKey(orderedOptions[activeIndex].value))}`
@@ -384,7 +386,7 @@ function ComboboxRoot({ value: controlledValue, defaultValue, onValueChange, inp
     return (_jsx(ComboboxActionsContext.Provider, { value: actionsValue, children: _jsx(ComboboxStateContext.Provider, { value: stateValue, children: _jsxs("div", { className: "tui-combobox", children: [_jsxs("div", { className: "tui-combobox__input-wrapper", children: [_jsx("input", { ref: (node) => {
                                     inputRef.current = node;
                                     refs.setReference(node);
-                                }, type: "text", id: inputId, className: cx('tui-combobox__input', size !== 'md' && `is-size-${size}`, inputClassName), role: "combobox", "aria-expanded": open, "aria-controls": listboxId, "aria-autocomplete": "list", "aria-activedescendant": activeOptionId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disabled: disabled, placeholder: placeholder, value: inputValue, autoComplete: "off", ...referenceProps, onChange: handleInputChange }), clearable && inputValue && !disabled && (_jsx("button", { type: "button", className: "tui-combobox__clear", onClick: handleClear, onMouseDown: (e) => e.preventDefault(), "aria-label": labels.clear, tabIndex: -1, children: _jsx(Icon, { name: "system/close", size: "sm" }) })), _jsx("span", { className: "tui-combobox__icon", "aria-hidden": "true", children: _jsx(Icon, { name: "system/chevron-down", size: "sm" }) })] }), children] }) }) }));
+                                }, type: "text", id: inputId, className: cx('tui-combobox__input', size !== 'md' && `is-size-${size}`, inputClassName), role: "combobox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-autocomplete": "list", "aria-activedescendant": activeOptionId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disabled: disabled, placeholder: placeholder, value: inputValue, autoComplete: "off", ...referenceProps, onChange: handleInputChange }), clearable && inputValue && !disabled && (_jsx("button", { type: "button", className: "tui-combobox__clear", onClick: handleClear, onMouseDown: (e) => e.preventDefault(), "aria-label": labels.clear, tabIndex: -1, children: _jsx(Icon, { name: "system/close", size: "sm" }) })), _jsx("span", { className: "tui-combobox__icon", "aria-hidden": "true", children: _jsx(Icon, { name: "system/chevron-down", size: "sm" }) })] }), children] }) }) }));
 }
 ComboboxRoot.displayName = 'Combobox';
 // =============================================================================

package/components/MultiSelect/MultiSelect.js

@@ -213,7 +213,17 @@ function MultiSelectRoot({ id: triggerIdProp, value: controlledValue, defaultVal
         typeahead,
     ]);
     // Register option
+    // Flag: first registerOption call after open clears stale entries.
+    const prevOpenForFlush = useRef(open);
+    const needsFlushRef = useRef(false);
+    if (open && !prevOpenForFlush.current)
+        needsFlushRef.current = true;
+    prevOpenForFlush.current = open;
     const registerOption = useCallback((option) => {
+        if (needsFlushRef.current) {
+            optionsRef.current.clear();
+            needsFlushRef.current = false;
+        }
         optionsRef.current.set(toKey(option.value), option);
         setRegistryVersion((v) => v + 1);
     }, []);
@@ -225,14 +235,6 @@ function MultiSelectRoot({ id: triggerIdProp, value: controlledValue, defaultVal
         optionsRef.current.delete(toKey(optionValue));
         setRegistryVersion((v) => v + 1);
     }, []);
-    // Flush stale registry on open. Options that were registered before close
-    // may no longer exist (parent changed children while closed). Clearing
-    // before the new options mount ensures no orphaned entries accumulate.
-    useLayoutEffect(() => {
-        if (open) {
-            optionsRef.current.clear();
-        }
-    }, [open]);
     // Get selected options for trigger display
     const getSelectedOptions = useCallback(() => {
         return value
@@ -462,7 +464,7 @@ function MultiSelectTriggerComponent({ asChild = false, className, children, })
         'aria-describedby': ariaDescribedBy,
         'aria-haspopup': 'listbox',
         'aria-expanded': open,
-        'aria-controls': listboxId,
+        'aria-controls': open ? listboxId : undefined,
         'aria-keyshortcuts': hasSelection && !open ? 'Delete' : undefined,
         'data-state': open ? 'open' : 'closed',
         ...floatingProps,
@@ -494,7 +496,7 @@ function MultiSelectTriggerComponent({ asChild = false, className, children, })
                     ref: refs.setReference,
                     'aria-haspopup': 'listbox',
                     'aria-expanded': open,
-                    'aria-controls': listboxId,
+                    'aria-controls': open ? listboxId : undefined,
                     'aria-activedescendant': floatingProps['aria-activedescendant'],
                     'aria-describedby': ariaDescribedBy,
                     // asChild: use aria-disabled + data-disabled since element may not support native disabled
@@ -522,7 +524,7 @@ function MultiSelectTriggerComponent({ asChild = false, className, children, })
     }
     // Default: render button with optional custom content
     const triggerContent = children ?? defaultTriggerContent;
-    return (_jsxs(_Fragment, { children: [_jsx("button", { ref: refs.setReference, type: "button", id: triggerId, className: cx('tui-multiselect__trigger', sizeClass, className), disabled: disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": listboxId, "data-state": open ? 'open' : 'closed', ...floatingProps, 
+    return (_jsxs(_Fragment, { children: [_jsx("button", { ref: refs.setReference, type: "button", id: triggerId, className: cx('tui-multiselect__trigger', sizeClass, className), disabled: disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "data-state": open ? 'open' : 'closed', ...floatingProps, 
                 // Handle Backspace/Delete AFTER floatingProps to ensure we catch it
                 // (typeahead may intercept these for its buffer)
                 onKeyDown: (e) => {

package/components/Select/Select.js

@@ -185,8 +185,21 @@ function SelectRoot({ id: triggerIdProp, value: controlledValue, defaultValue, o
         listNavigation,
         typeahead,
     ]);
+    // Flag: when the dropdown opens, the first registerOption call clears the
+    // registry before adding. This ensures stale entries from options that changed
+    // while closed don't persist — and avoids a useLayoutEffect ordering issue
+    // where a parent clear would run after children register.
+    const prevOpenForFlush = useRef(open);
+    const needsFlushRef = useRef(false);
+    if (open && !prevOpenForFlush.current)
+        needsFlushRef.current = true;
+    prevOpenForFlush.current = open;
     // Register option (stable callback - no value/displayText deps)
     const registerOption = useCallback((option) => {
+        if (needsFlushRef.current) {
+            optionsRef.current.clear();
+            needsFlushRef.current = false;
+        }
         optionsRef.current.set(toKey(option.value), option);
         setRegistryVersion((v) => v + 1);
     }, []);
@@ -201,14 +214,6 @@ function SelectRoot({ id: triggerIdProp, value: controlledValue, defaultValue, o
     }, []);
     // Highlighted value for keyboard navigation
     const highlightedValue = activeIndex !== null ? orderedOptions[activeIndex]?.value ?? null : null;
-    // Flush stale registry on open. Options that were registered before close
-    // may no longer exist (parent changed children while closed). Clearing
-    // before the new options mount ensures no orphaned entries accumulate.
-    useLayoutEffect(() => {
-        if (open) {
-            optionsRef.current.clear();
-        }
-    }, [open]);
     // Reset active index when closing
     useEffect(() => {
         if (!open) {
@@ -371,6 +376,10 @@ function SelectTriggerComponent({ asChild = false, className, children, }) {
         'aria-keyshortcuts': clearable && hasValue ? 'Delete' : undefined,
         'data-state': open ? 'open' : 'closed',
         ...floatingProps,
+        // Override Floating UI's aria-controls — only reference the listbox when
+        // it's actually in the DOM. After first open, the listbox unmounts when
+        // closed to save hooks. A phantom aria-controls violates ARIA 1.2.
+        'aria-controls': open ? floatingProps['aria-controls'] : undefined,
     };
     if (asChild && isValidElement(children)) {
         const childProps = children.props;
@@ -398,7 +407,7 @@ function SelectTriggerComponent({ asChild = false, className, children, }) {
             ref: refs.setReference,
             'aria-haspopup': floatingProps['aria-haspopup'],
             'aria-expanded': floatingProps['aria-expanded'],
-            'aria-controls': floatingProps['aria-controls'],
+            'aria-controls': open ? floatingProps['aria-controls'] : undefined,
             'aria-activedescendant': floatingProps['aria-activedescendant'],
             'aria-describedby': ariaDescribedBy,
             // asChild: use aria-disabled + data-disabled since element may not support native disabled

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangible/ui",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Tangible Design System",
   "type": "module",
   "main": "./components/index.js",

package/tui-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.0.9",
-  "generated": "2026-03-19T22:46:07.954Z",
+  "version": "0.0.10",
+  "generated": "2026-03-19T23:08:17.377Z",
   "components": {
     "Accordion": {
       "props": {