@tangible/ui 0.0.6 → 0.0.7

package/components/Combobox/Combobox.d.ts

@@ -1,5 +1,5 @@
 import type { ComboboxProps, ComboboxContentProps, ComboboxOptionProps, ComboboxGroupProps, ComboboxLabelProps } from './types';
-declare function ComboboxRoot({ value: controlledValue, defaultValue, onValueChange, inputValue: controlledInputValue, onInputChange, open: controlledOpen, defaultOpen, onOpenChange, disabled, placeholder, size, openOnFocus, filterMode, onQueryChange, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, inputClassName, children, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxRoot({ value: controlledValue, defaultValue, onValueChange, inputValue: controlledInputValue, onInputChange, open: controlledOpen, defaultOpen, onOpenChange, disabled, placeholder, size, openOnFocus, filterMode, onQueryChange, clearable, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, inputClassName, children, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ComboboxRoot {
     var displayName: string;
 }

package/components/Combobox/Combobox.js

@@ -12,7 +12,7 @@ import { ComboboxActionsContext, ComboboxStateContext, ComboboxContentContext, u
 // =============================================================================
 // Combobox Root
 // =============================================================================
-function ComboboxRoot({ value: controlledValue, defaultValue, onValueChange, inputValue: controlledInputValue, onInputChange, open: controlledOpen, defaultOpen, onOpenChange, disabled = false, placeholder = '', size = 'md', openOnFocus = true, filterMode = 'always', onQueryChange, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, inputClassName, children, }) {
+function ComboboxRoot({ value: controlledValue, defaultValue, onValueChange, inputValue: controlledInputValue, onInputChange, open: controlledOpen, defaultOpen, onOpenChange, disabled = false, placeholder = '', size = 'md', openOnFocus = true, filterMode = 'always', onQueryChange, clearable = true, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, inputClassName, children, }) {
     // Controlled/uncontrolled value (initialize from defaultValue)
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
     const isValueControlled = controlledValue !== undefined;
@@ -365,7 +365,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 }), inputValue && !disabled && (_jsx("span", { className: "tui-combobox__clear", onPointerDown: handleClear, "aria-hidden": "true", 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": 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("span", { className: "tui-combobox__clear", onPointerDown: handleClear, "aria-hidden": "true", 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/Combobox/types.d.ts

@@ -86,6 +86,11 @@ export type ComboboxProps = {
      * ID of element that labels this combobox.
      */
     'aria-labelledby'?: string;
+    /**
+     * Whether to show the clear button when a value is present.
+     * @default true
+     */
+    clearable?: boolean;
     /**
      * Class name applied directly to the `<input>` element.
      * Use for utilities like `tui-input-reset` that must target the input itself.

package/components/Field/Field.js

@@ -5,16 +5,18 @@ import { FieldContext, useFieldContext } from './FieldContext.js';
 export const Field = forwardRef(function Field({ error = false, required = false, disabled = false, inline = false, className, children, }, ref) {
     const baseId = useId();
     const controlId = `${baseId}-control`;
+    const labelId = `${baseId}-label`;
     const helperTextId = `${baseId}-helper`;
     const errorId = `${baseId}-error`;
     const contextValue = useMemo(() => ({
         controlId,
+        labelId,
         helperTextId,
         errorId,
         hasError: error,
         required,
         disabled,
-    }), [controlId, helperTextId, errorId, error, required, disabled]);
+    }), [controlId, labelId, helperTextId, errorId, error, required, disabled]);
     const classes = cx('tui-field', error && 'is-error', disabled && 'is-disabled', inline && 'is-layout-inline', className);
     return (_jsx(FieldContext.Provider, { value: contextValue, children: _jsx("div", { ref: ref, className: classes, children: children }) }));
 });
@@ -22,16 +24,16 @@ export const Field = forwardRef(function Field({ error = false, required = false
 // Field.Label
 // =============================================================================
 function FieldLabel({ hidden = false, className, children, ...rest }) {
-    const { controlId, required } = useFieldContext();
+    const { controlId, labelId, required } = useFieldContext();
     const classes = cx('tui-field__label', hidden && 'tui-visually-hidden', className);
-    return (_jsxs("label", { htmlFor: controlId, className: classes, ...rest, children: [children, required && (_jsxs(_Fragment, { children: [_jsx("span", { className: "tui-field__required", "aria-hidden": "true", children: "*" }), _jsx("span", { className: "tui-visually-hidden", children: "required" })] }))] }));
+    return (_jsxs("label", { id: labelId, htmlFor: controlId, className: classes, ...rest, children: [children, required && (_jsxs(_Fragment, { children: [_jsx("span", { className: "tui-field__required", "aria-hidden": "true", children: "*" }), _jsx("span", { className: "tui-visually-hidden", children: "required" })] }))] }));
 }
 FieldLabel.displayName = 'Field.Label';
 // =============================================================================
 // Field.Control
 // =============================================================================
 function FieldControl({ children }) {
-    const { controlId, helperTextId, errorId, hasError, required, disabled, } = useFieldContext();
+    const { controlId, labelId, helperTextId, errorId, hasError, required, disabled, } = useFieldContext();
     const child = Children.only(children);
     if (!isValidElement(child)) {
         throw new Error('Field.Control expects a single React element as its child');
@@ -48,10 +50,18 @@ function FieldControl({ children }) {
         describedByParts.push(errorId);
     }
     const describedBy = describedByParts.join(' ');
+    // Build aria-labelledby for non-labelable elements (<button>, <div>, etc.)
+    // <label htmlFor> only works with labelable elements (input, textarea, select,
+    // meter, output, progress). For everything else (Switch, future Slider, etc.)
+    // aria-labelledby provides the accessible name. For native inputs this is
+    // redundant with htmlFor but harmless — aria-labelledby takes priority in the
+    // accessible name algorithm and points at the same label text.
+    const labelledBy = childProps['aria-labelledby'] ?? labelId;
     // Clone child with a11y props
     // Note: aria-invalid and aria-required must be string "true", not boolean
     return cloneElement(child, {
         id: controlId,
+        'aria-labelledby': labelledBy,
         'aria-describedby': describedBy,
         'aria-invalid': hasError ? 'true' : undefined,
         'aria-required': required ? 'true' : undefined,

package/components/Field/FieldContext.d.ts

@@ -1,6 +1,8 @@
 export type FieldContextValue = {
     /** ID for the form control element */
     controlId: string;
+    /** ID for the label element (for aria-labelledby on non-labelable controls) */
+    labelId: string;
     /** ID for helper text (for aria-describedby) */
     helperTextId: string;
     /** ID for error message (for aria-describedby) */

package/components/Radio/Radio.d.ts

@@ -1,2 +1,6 @@
 import type { RadioProps } from './types';
+/**
+ * Ref targets the inner `<button role="radio">`, not the outer wrapper `<div>`.
+ * This is intentional — roving tabindex and focus management operate on the button.
+ */
 export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLButtonElement>>;

package/components/Radio/Radio.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useRef } from 'react';
+import { forwardRef, useCallback, useEffect, useId, useRef } from 'react';
 import { cx } from '../../utils/cx.js';
 import { composeRefs } from '../../utils/compose-refs.js';
 import { toKey } from '../../utils/value-key.js';
@@ -14,8 +14,14 @@ import { useRadioGroupContext } from './RadioGroupContext.js';
 // Arrow keys in the group move focus AND select.
 //
 // =============================================================================
-export const Radio = forwardRef(function Radio({ value, label, disabled = false, className }, externalRef) {
+/**
+ * Ref targets the inner `<button role="radio">`, not the outer wrapper `<div>`.
+ * This is intentional — roving tabindex and focus management operate on the button.
+ */
+export const Radio = forwardRef(function Radio({ value, label, description, disabled = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, children, }, externalRef) {
     const { selectedValue, focusableValue, rootDisabled, registerItem, unregisterItem, onSelect, } = useRadioGroupContext();
+    const id = useId();
+    const descriptionId = `${id}-desc`;
     const isSelected = selectedValue !== undefined && toKey(selectedValue) === toKey(value);
     const isDisabled = rootDisabled || disabled;
     const isFocusable = focusableValue !== undefined && toKey(focusableValue) === toKey(value);
@@ -24,8 +30,8 @@ export const Radio = forwardRef(function Radio({ value, label, disabled = false,
     useEffect(() => {
         if (hasWarnedRef.current)
             return;
-        if (isDev() && !label) {
-            console.warn('Radio: Missing accessible name. Provide a label prop.');
+        if (isDev() && !label && !ariaLabel && !ariaLabelledBy) {
+            console.warn('Radio: Missing accessible name. Provide a label, aria-label, or aria-labelledby prop.');
             hasWarnedRef.current = true;
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -45,6 +51,10 @@ export const Radio = forwardRef(function Radio({ value, label, disabled = false,
             return;
         onSelect(value);
     };
-    return (_jsxs("button", { ref: composeRefs(callbackRef, externalRef), type: "button", role: "radio", className: cx('tui-radio', className), "aria-checked": isSelected, disabled: isDisabled, tabIndex: isFocusable ? 0 : -1, onClick: handleClick, children: [_jsx("span", { className: "tui-radio__indicator", "aria-hidden": "true" }), label && _jsx("span", { className: "tui-radio__label", children: label })] }));
+    const hasExpandedContent = !!(description || children);
+    return (_jsxs("div", { className: cx('tui-radio', hasExpandedContent && 'has-content', className), children: [_jsxs("button", { ref: composeRefs(callbackRef, externalRef), type: "button", role: "radio", className: "tui-radio__control", "aria-checked": isSelected, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": description ? descriptionId : undefined, 
+                // Item-level disabled: native disabled (removes from focus cycle).
+                // Group-level disabled: aria-disabled (preserves AT group context).
+                disabled: disabled || undefined, "aria-disabled": rootDisabled || undefined, tabIndex: isFocusable ? 0 : -1, onClick: handleClick, children: [_jsx("span", { className: "tui-radio__indicator", "aria-hidden": "true" }), label && _jsx("span", { className: "tui-radio__label", children: label })] }), hasExpandedContent && (_jsxs("div", { className: "tui-radio__body", children: [description && (_jsx("p", { id: descriptionId, className: "tui-radio__description", children: description })), children] }))] }));
 });
 Radio.displayName = 'Radio';

package/components/Radio/RadioGroup.d.ts

@@ -1,2 +1,2 @@
 import type { RadioGroupProps } from './types';
-export declare function RadioGroup({ value: controlledValue, defaultValue, onValueChange, disabled, orientation, loop, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, children, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function RadioGroup({ value: controlledValue, defaultValue, onValueChange, disabled, orientation, loop, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, className, children, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;

package/components/Radio/RadioGroup.js

@@ -17,7 +17,7 @@ import { isDev } from '../../utils/is-dev.js';
 //   --tui-radio-accent    Accent color for selected state
 //
 // =============================================================================
-export function RadioGroup({ value: controlledValue, defaultValue, onValueChange, disabled = false, orientation = 'vertical', loop = true, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, children, }) {
+export function RadioGroup({ value: controlledValue, defaultValue, onValueChange, disabled = false, orientation = 'vertical', loop = true, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, className, children, }) {
     const [selectedValue, setSelectedValue] = useControllableState({
         value: controlledValue,
         defaultValue,
@@ -50,5 +50,5 @@ export function RadioGroup({ value: controlledValue, defaultValue, onValueChange
         unregisterItem,
         onSelect,
     }), [selectedValue, focusableValue, disabled, orientation, registerItem, unregisterItem, onSelect]);
-    return (_jsx(RadioGroupContext.Provider, { value: contextValue, children: _jsx("div", { role: "radiogroup", className: cx('tui-radio-group', orientation === 'horizontal' && 'is-horizontal', className), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-disabled": disabled || undefined, "aria-orientation": orientation === 'horizontal' ? 'horizontal' : undefined, onKeyDown: handleKeyDown, children: children }) }));
+    return (_jsx(RadioGroupContext.Provider, { value: contextValue, children: _jsx("div", { role: "radiogroup", className: cx('tui-radio-group', orientation === 'horizontal' && 'is-horizontal', className), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-disabled": disabled || undefined, "aria-orientation": orientation, onKeyDown: handleKeyDown, children: children }) }));
 }

package/components/Radio/types.d.ts

@@ -10,14 +10,24 @@ export type RadioGroupProps = {
     loop?: boolean;
     'aria-label'?: string;
     'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean | 'true' | 'false';
+    'aria-required'?: boolean | 'true' | 'false';
     className?: string;
     children: ReactNode;
 };
 export type RadioProps = {
     value: OptionValue;
     label?: ReactNode;
+    /**
+     * Description text displayed below the label.
+     */
+    description?: string;
     disabled?: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
     className?: string;
+    children?: ReactNode;
 };
 export type RadioItemRecord = RovingItemRecord;
 export type RadioGroupContextValue = {

package/components/Switch/Switch.js

@@ -8,18 +8,13 @@ import { isDev } from '../../utils/is-dev.js';
 // Switch Component
 // =============================================================================
 //
-// <button role="switch"> with animated thumb. Uses new tui-switch SCSS.
-// Existing tui-toggle CSS untouched (stays for CSS-only usage).
+// <button role="switch"> with animated thumb. Uses tui-switch SCSS.
 //
 // Bare (no label): returns <button> directly for Field.Control cloneElement.
-// With label: wraps in <label>, native label click focuses the button.
-//
-// CSS token API:
-//   --tui-switch-accent     Accent color for on state
-//   --tui-switch-track-off  Track color when off
+// With label: wraps in <label>, label-text clicks forward to button.
 //
 // =============================================================================
-// Props that should route to the <button>, not the wrapper
+// Props that should route to the <button>, not the wrapper.
 const BUTTON_PROPS = new Set([
     'id',
     'aria-describedby',
@@ -29,6 +24,7 @@ const BUTTON_PROPS = new Set([
     'aria-labelledby',
     'form',
     'tabIndex',
+    'onClick',
     'onFocus',
     'onBlur',
 ]);
@@ -57,13 +53,18 @@ export const Switch = forwardRef(function Switch({ checked: controlledChecked, d
     // Extract onClick from rest so prop spreading can't override internal handler
     const { onClick: onClickProp, ...restWithoutClick } = rest;
     const handleClick = (e) => {
+        if (disabled)
+            return;
         setChecked((prev) => !prev);
         onClickProp?.(e);
     };
     const isChecked = checked ?? false;
+    // Shared button element — single source of truth for both render paths.
+    // In labeled mode, buttonProps/sizeClass are set differently (see below).
+    const renderButton = (extraProps, extraClass) => (_jsx("button", { ref: composeRefs(internalRef, externalRef), type: "button", role: "switch", "aria-checked": isChecked, disabled: disabled, className: cx('tui-switch__track', extraClass), onClick: handleClick, ...extraProps, children: _jsx("span", { className: "tui-switch__thumb" }) }));
     // Bare: no label — Field.Control can inject id/aria-* directly
     if (!label) {
-        return (_jsx("button", { ref: composeRefs(internalRef, externalRef), type: "button", role: "switch", "aria-checked": isChecked, disabled: disabled, className: cx('tui-switch__track', sizeClass, isChecked && 'is-checked', className), onClick: handleClick, ...restWithoutClick, children: _jsx("span", { className: "tui-switch__thumb" }) }));
+        return renderButton(restWithoutClick, cx(sizeClass, className));
     }
     // Split rest props: some go on button, some on wrapper
     const buttonProps = {};
@@ -76,16 +77,29 @@ export const Switch = forwardRef(function Switch({ checked: controlledChecked, d
             wrapperProps[key] = val;
         }
     }
-    // With label: <label> wrapper provides click-anywhere-to-toggle natively.
-    // We intercept the label click to toggle state and prevent the browser's
-    // default label→button activation (which would double-toggle).
+    // DEV: warn if button-like props leaked to the wrapper
+    if (isDev()) {
+        const suspect = Object.keys(wrapperProps).filter((k) => k.startsWith('aria-') || k.startsWith('on') || k === 'tabIndex');
+        if (suspect.length > 0) {
+            console.warn(`Switch: Props [${suspect.join(', ')}] ended up on the <label> wrapper. ` +
+                'Add them to BUTTON_PROPS if they belong on the <button>.');
+        }
+    }
+    // <label> wrapping a <button> causes native click-forwarding (button IS
+    // a labelable element). Without preventDefault, clicking the button fires
+    // handleClick AND the forwarded click — double-toggle.
+    // We suppress native forwarding. Clicks on the button are handled by its
+    // own onClick (handleClick). Clicks on the label text toggle state here.
     const handleLabelClick = (e) => {
-        // Prevent native label click from also activating the button
         e.preventDefault();
+        // Clicks on/inside the button are handled by handleClick (via bubbling)
+        if (internalRef.current?.contains(e.target))
+            return;
         if (disabled)
             return;
         internalRef.current?.focus();
         setChecked((prev) => !prev);
     };
-    return (_jsxs("label", { className: cx('tui-switch', sizeClass, disabled && 'is-disabled', className), onClick: handleLabelClick, ...wrapperProps, children: [_jsx("button", { ref: composeRefs(internalRef, externalRef), type: "button", role: "switch", "aria-checked": isChecked, disabled: disabled, className: cx('tui-switch__track', isChecked && 'is-checked'), ...buttonProps, children: _jsx("span", { className: "tui-switch__thumb" }) }), _jsx("span", { className: "tui-switch__label", children: label })] }));
+    return (_jsxs("label", { className: cx('tui-switch', sizeClass, disabled && 'is-disabled', className), onClick: handleLabelClick, ...wrapperProps, children: [renderButton(buttonProps), _jsx("span", { className: "tui-switch__label", children: label })] }));
 });
+Switch.displayName = 'Switch';

package/package.json

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