@tangible/ui 0.0.6 → 0.0.8

package/components/StepIndicator/StepIndicator.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defaultStepIndicatorLabels } from './types.js';
 import { Progress } from '../Progress/index.js';
 import { Icon } from '../Icon/index.js';
 // =============================================================================
@@ -8,12 +9,6 @@ const statusIcons = {
     complete: 'lms/checkmark',
     locked: 'lms/lock',
 };
-const statusLabels = {
-    'not-started': 'Not started',
-    'in-progress': 'In progress',
-    complete: 'Complete',
-    locked: 'Locked',
-};
 // =============================================================================
 // Status inference
 // =============================================================================
@@ -28,7 +23,8 @@ function inferStatus(value) {
 // Component
 // =============================================================================
 export function StepIndicator(props) {
-    const { value = 0, status: statusOverride, icon: customIcon, size = 'sm', showValue = false, label, className, } = props;
+    const { value = 0, status: statusOverride, icon: customIcon, size = 'sm', showValue = false, label, className, labels: labelsProp, } = props;
+    const labels = { ...defaultStepIndicatorLabels, ...labelsProp };
     // Infer status from value, allow override
     const status = statusOverride ?? inferStatus(value);
     // When status is explicit, the visual should match the status, not the value
@@ -48,8 +44,15 @@ export function StepIndicator(props) {
     const iconName = hasStatusIcon ? statusIcons[status] : customIcon;
     // Use solid variant for complete state (filled circle)
     const variant = status === 'complete' ? 'solid' : 'ring';
+    // Resolve status display name from labels
+    const statusLabelMap = {
+        'not-started': labels.notStarted,
+        'in-progress': labels.inProgress,
+        complete: labels.complete,
+        locked: labels.locked,
+    };
     // Accessible label
-    const ariaLabel = label ?? `Step status: ${statusLabels[status]}`;
+    const ariaLabel = label ?? labels.status(statusLabelMap[status]);
     // Build class names
     const rootClassName = [
         'tui-step-indicator',

package/components/StepIndicator/index.d.ts

@@ -1,2 +1,3 @@
 export { StepIndicator } from './StepIndicator';
-export type { StepIndicatorProps, StepStatus } from './types';
+export type { StepIndicatorProps, StepStatus, StepIndicatorLabels } from './types';
+export { defaultStepIndicatorLabels } from './types';

package/components/StepIndicator/index.js

@@ -1 +1,2 @@
 export { StepIndicator } from './StepIndicator.js';
+export { defaultStepIndicatorLabels } from './types.js';

package/components/StepIndicator/types.d.ts

@@ -9,6 +9,19 @@ export type { Size };
  * - `locked`: Ring with lock icon (overrides value-based inference)
  */
 export type StepStatus = 'not-started' | 'in-progress' | 'complete' | 'locked';
+export type StepIndicatorLabels = {
+    /** Label for "Not started" status. */
+    notStarted?: string;
+    /** Label for "In progress" status. */
+    inProgress?: string;
+    /** Label for "Complete" status. */
+    complete?: string;
+    /** Label for "Locked" status. */
+    locked?: string;
+    /** Full aria-label template. Receives the resolved status label string. */
+    status?: (statusLabel: string) => string;
+};
+export declare const defaultStepIndicatorLabels: Required<StepIndicatorLabels>;
 export type StepIndicatorProps = {
     /**
      * Progress value (0-100).
@@ -65,4 +78,9 @@ export type StepIndicatorProps = {
      * Additional CSS class names.
      */
     className?: string;
+    /**
+     * Override default English strings for i18n.
+     * Covers status display names and the aria-label template.
+     */
+    labels?: StepIndicatorLabels;
 };

package/components/StepIndicator/types.js

@@ -1 +1,7 @@
-export {};
+export const defaultStepIndicatorLabels = {
+    notStarted: 'Not started',
+    inProgress: 'In progress',
+    complete: 'Complete',
+    locked: 'Locked',
+    status: (statusLabel) => `Step status: ${statusLabel}`,
+};

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/components/Table/BulkActionsBar.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { BulkActionsBarLabels } from './types';
 type BulkActionsBarProps = {
     count: number;
     onClear?: () => void;
@@ -7,6 +8,8 @@ type BulkActionsBarProps = {
     className?: string;
     /** ID of the table element this toolbar controls */
     'aria-controls'?: string;
+    /** Override hardcoded English strings for i18n. */
+    labels?: BulkActionsBarLabels;
 };
-export declare function BulkActionsBar({ count, onClear, clearLabel, children, className, 'aria-controls': ariaControls, }: BulkActionsBarProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function BulkActionsBar({ count, onClear, clearLabel, children, className, 'aria-controls': ariaControls, labels: labelsProp, }: BulkActionsBarProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/components/Table/BulkActionsBar.js

@@ -1,9 +1,10 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { cx } from '../../utils/cx.js';
-export function BulkActionsBar({ count, onClear, clearLabel = 'Clear', children, className, 'aria-controls': ariaControls, }) {
+import { defaultBulkActionsBarLabels } from './types.js';
+export function BulkActionsBar({ count, onClear, clearLabel = 'Clear', children, className, 'aria-controls': ariaControls, labels: labelsProp, }) {
+    const labels = { ...defaultBulkActionsBarLabels, ...labelsProp };
     if (count === 0)
         return null;
-    const label = `Bulk actions for ${count} selected row${count === 1 ? '' : 's'}`;
-    return (_jsxs("div", { role: "toolbar", "aria-label": label, "aria-controls": ariaControls, className: cx('tui-table__bulkActions', className), children: [_jsxs("span", { className: "tui-table__bulkActions__count", role: "status", children: [count, " selected"] }), _jsxs("div", { className: "tui-table__bulkActions__actions", children: [children, onClear && (_jsx("button", { type: "button", onClick: onClear, className: "tui-table__bulkActions__clear tui-button is-style-outline is-size-xs", children: clearLabel }))] })] }));
+    return (_jsxs("div", { role: "toolbar", "aria-label": labels.actions(count), "aria-controls": ariaControls, className: cx('tui-table__bulkActions', className), children: [_jsx("span", { className: "tui-table__bulkActions__count", role: "status", children: labels.selected(count) }), _jsxs("div", { className: "tui-table__bulkActions__actions", children: [children, onClear && (_jsx("button", { type: "button", onClick: onClear, className: "tui-table__bulkActions__clear tui-button is-style-outline is-size-xs", children: clearLabel }))] })] }));
 }

package/components/Table/DataTable.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { ColumnDef, SortingState, Table as TanTable, RowSelectionState, Updater } from '@tanstack/react-table';
+import type { DataTableLabels } from './types';
 type RowId = string | number;
 type BulkSelectionRenderArgs<T> = {
     selectedRows: T[];
@@ -17,6 +18,8 @@ export type DataTableProps<T> = {
     loading?: boolean;
     loadingMessage?: React.ReactNode;
     emptyMessage?: React.ReactNode;
+    /** Override hardcoded English strings for i18n. Unset keys use English defaults. */
+    labels?: DataTableLabels;
     renderPagination?: (table: TanTable<T>) => React.ReactNode;
     paginationMode?: 'simple' | 'ends' | 'full' | 'smart';
     paginationMaxNumbers?: number;
@@ -31,5 +34,5 @@ export type DataTableProps<T> = {
     onSelectionChange?: (selectedRows: T[], selectedIds: (string | number)[]) => void;
     renderBulkBar?: (args: BulkSelectionRenderArgs<T>) => React.ReactNode;
 };
-export declare function DataTable<T>({ data, columns, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, defaultSorting, loading, loadingMessage, emptyMessage, renderPagination, paginationMode, paginationMaxNumbers, paginationNavStyle, pageSizeOptions, initialPageSize, enableRowSelection, getRowId, getRowLabelForSelection, onSelectionChange, renderBulkBar, rowSelection, onRowSelectionChange, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<T>({ data, columns, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, defaultSorting, loading, loadingMessage, emptyMessage, labels: labelsProp, renderPagination, paginationMode, paginationMaxNumbers, paginationNavStyle, pageSizeOptions, initialPageSize, enableRowSelection, getRowId, getRowLabelForSelection, onSelectionChange, renderBulkBar, rowSelection, onRowSelectionChange, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/Table/DataTable.js

@@ -4,9 +4,11 @@ import { cx } from '../../utils/cx.js';
 import { useReactTable, getCoreRowModel, getSortedRowModel, getPaginationRowModel, flexRender } from '@tanstack/react-table';
 import { BulkActionsBar } from './BulkActionsBar.js';
 import { Pagination } from './Pagination.js';
-export function DataTable({ data, columns, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, defaultSorting = [], loading = false, loadingMessage = 'Loading...', emptyMessage = 'No results', renderPagination, paginationMode = 'smart', paginationMaxNumbers = 7, paginationNavStyle = 'text', pageSizeOptions = [10, 20, 50], initialPageSize, 
+import { defaultDataTableLabels } from './types.js';
+export function DataTable({ data, columns, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, defaultSorting = [], loading = false, loadingMessage = 'Loading...', emptyMessage = 'No results', labels: labelsProp, renderPagination, paginationMode = 'smart', paginationMaxNumbers = 7, paginationNavStyle = 'text', pageSizeOptions = [10, 20, 50], initialPageSize, 
 // selection
 enableRowSelection = false, getRowId, getRowLabelForSelection, onSelectionChange, renderBulkBar, rowSelection, onRowSelectionChange, }) {
+    const labels = React.useMemo(() => ({ ...defaultDataTableLabels, ...labelsProp }), [labelsProp]);
     const tableId = React.useId();
     const [sorting, setSorting] = React.useState(defaultSorting);
     const [uncontrolledRowSelection, setUncontrolledRowSelection] = React.useState({});
@@ -29,7 +31,7 @@ enableRowSelection = false, getRowId, getRowLabelForSelection, onSelectionChange
             const isAllSelected = table.getIsAllPageRowsSelected();
             const isSomeSelected = table.getIsSomePageRowsSelected();
             const isIndeterminate = isSomeSelected && !isAllSelected;
-            return (_jsx("input", { type: "checkbox", "aria-label": "Select all rows on this page", "aria-checked": isIndeterminate ? 'mixed' : isAllSelected, checked: isAllSelected, ref: (el) => {
+            return (_jsx("input", { type: "checkbox", "aria-label": labels.selectAll, "aria-checked": isIndeterminate ? 'mixed' : isAllSelected, checked: isAllSelected, ref: (el) => {
                     if (el)
                         el.indeterminate = isIndeterminate;
                 }, onChange: table.getToggleAllPageRowsSelectedHandler() }));
@@ -37,7 +39,7 @@ enableRowSelection = false, getRowId, getRowLabelForSelection, onSelectionChange
         cell: ({ row, table }) => {
             const idx = row.index;
             const original = row.original;
-            const labelText = getRowLabelForSelection?.(original, idx) ?? `Select row ${idx + 1}`;
+            const labelText = getRowLabelForSelection?.(original, idx) ?? labels.selectRow(idx);
             const handleChange = (e) => {
                 const willSelect = e.target.checked;
                 const isShift = e.nativeEvent.shiftKey;
@@ -75,7 +77,7 @@ enableRowSelection = false, getRowId, getRowLabelForSelection, onSelectionChange
         },
         enableSorting: false,
         enableHiding: false,
-    }), [getRowLabelForSelection]);
+    }), [getRowLabelForSelection, labels]);
     const effectiveColumns = React.useMemo(() => {
         if (!enableRowSelection)
             return columns;
@@ -144,17 +146,17 @@ enableRowSelection = false, getRowId, getRowLabelForSelection, onSelectionChange
             return;
         }
         if (prevPageRef.current !== currentPageIndex) {
-            setAnnouncement(`Page ${currentPageIndex + 1} of ${pageCount}`);
+            setAnnouncement(labels.pageStatus(currentPageIndex + 1, pageCount));
         }
         else if (prevSortRef.current !== currentSorting && currentSorting.length > 0) {
             const sort = currentSorting[0];
             const col = columns.find(c => 'accessorKey' in c && c.accessorKey === sort.id);
             const colName = col && typeof col.header === 'string' ? col.header : sort.id;
-            setAnnouncement(`Sorted by ${colName}, ${sort.desc ? 'descending' : 'ascending'}`);
+            setAnnouncement(labels.sorted(colName, sort.desc ? 'descending' : 'ascending'));
         }
         prevPageRef.current = currentPageIndex;
         prevSortRef.current = currentSorting;
-    }, [currentPageIndex, currentSorting, pageCount, columns]);
+    }, [currentPageIndex, currentSorting, pageCount, columns, labels]);
     return (_jsxs("div", { className: cx('tui-table-container', className), children: [_jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "tui-visually-hidden", children: announcement }), showBulkBar && (renderBulkBar ? (renderBulkBar({
                 selectedRows,
                 selectedRowIds,
@@ -173,7 +175,7 @@ enableRowSelection = false, getRowId, getRowLabelForSelection, onSelectionChange
                                             : sortDirection === 'desc'
                                                 ? 'descending'
                                                 : 'none'
-                                        : undefined, children: canSort ? (_jsxs("button", { className: "tui-table__sortButton", onClick: header.column.getToggleSortingHandler(), "aria-label": `Sort by ${headerLabel}`, children: [headerContent, _jsx("span", { className: "tui-table__sortButton__icon", "aria-hidden": "true", children: sortDirection === 'asc'
+                                        : undefined, children: canSort ? (_jsxs("button", { className: "tui-table__sortButton", onClick: header.column.getToggleSortingHandler(), "aria-label": labels.sortBy(headerLabel), children: [headerContent, _jsx("span", { className: "tui-table__sortButton__icon", "aria-hidden": "true", children: sortDirection === 'asc'
                                                     ? '▲'
                                                     : sortDirection === 'desc'
                                                         ? '▼'

package/components/Table/index.d.ts

@@ -1,2 +1,5 @@
 export { DataTable } from './DataTable';
 export type { DataTableProps } from './DataTable';
+export { BulkActionsBar } from './BulkActionsBar';
+export { defaultBulkActionsBarLabels, defaultDataTableLabels } from './types';
+export type { BulkActionsBarLabels, DataTableLabels } from './types';

package/components/Table/index.js

@@ -1 +1,3 @@
 export { DataTable } from './DataTable.js';
+export { BulkActionsBar } from './BulkActionsBar.js';
+export { defaultBulkActionsBarLabels, defaultDataTableLabels } from './types.js';

package/components/Table/types.d.ts

@@ -0,0 +1,20 @@
+export type BulkActionsBarLabels = {
+    /** Visible count text, e.g. `"3 selected"`. Default: `` `${count} selected` `` */
+    selected?: (count: number) => string;
+    /** Toolbar `aria-label`, e.g. `"Bulk actions for 3 selected rows"`. Default: `` `Bulk actions for ${count} selected row(s)` `` */
+    actions?: (count: number) => string;
+};
+export declare const defaultBulkActionsBarLabels: Required<BulkActionsBarLabels>;
+export type DataTableLabels = {
+    /** Label for the "select all rows" checkbox. Default: `"Select all rows on this page"` */
+    selectAll?: string;
+    /** Label for individual row checkboxes. Default: `` `Select row ${index + 1}` `` */
+    selectRow?: (index: number) => string;
+    /** Live-region announcement when page changes. Default: `` `Page ${current} of ${total}` `` */
+    pageStatus?: (current: number, total: number) => string;
+    /** Label for column sort buttons. Default: `` `Sort by ${column}` `` */
+    sortBy?: (column: string) => string;
+    /** Live-region announcement after sorting. Default: `` `Sorted by ${column}, ${direction}` `` */
+    sorted?: (column: string, direction: 'ascending' | 'descending') => string;
+};
+export declare const defaultDataTableLabels: Required<DataTableLabels>;

package/components/Table/types.js

@@ -0,0 +1,11 @@
+export const defaultBulkActionsBarLabels = {
+    selected: (count) => `${count} selected`,
+    actions: (count) => `Bulk actions for ${count} selected row${count === 1 ? '' : 's'}`,
+};
+export const defaultDataTableLabels = {
+    selectAll: 'Select all rows on this page',
+    selectRow: (index) => `Select row ${index + 1}`,
+    pageStatus: (current, total) => `Page ${current} of ${total}`,
+    sortBy: (column) => `Sort by ${column}`,
+    sorted: (column, direction) => `Sorted by ${column}, ${direction}`,
+};

package/components/Tabs/Tabs.js

@@ -291,6 +291,7 @@ function Tab({ value, icon, 'aria-label': ariaLabel, disabled = false, className
 // =============================================================================
 function TabPanel({ value, className, children }) {
     const { activeValue, registerPanel, unregisterPanel, getTabId, getPanelId } = useTabsContext();
+    const panelRef = useRef(null);
     const tabId = getTabId(value);
     const panelId = getPanelId(value);
     const isActive = activeValue === value;
@@ -299,11 +300,17 @@ function TabPanel({ value, className, children }) {
         registerPanel(value);
         return () => unregisterPanel(value);
     }, [value, registerPanel, unregisterPanel]);
-    return (_jsx("div", { role: "tabpanel", id: panelId, className: cx('tui-tabs__panel', className), "data-state": isActive ? 'active' : 'inactive', "aria-labelledby": tabId, "aria-hidden": isActive ? undefined : true, 
+    // Set inert via DOM property for React 18 compatibility.
+    // React 18 doesn't handle `inert` as a boolean prop — setting the DOM
+    // property directly works across React 18 and 19.
+    useEffect(() => {
+        if (panelRef.current) {
+            panelRef.current.inert = !isActive;
+        }
+    }, [isActive]);
+    return (_jsx("div", { ref: panelRef, role: "tabpanel", id: panelId, className: cx('tui-tabs__panel', className), "data-state": isActive ? 'active' : 'inactive', "aria-labelledby": tabId, "aria-hidden": isActive ? undefined : true, 
         // tabIndex={0} allows direct focus on panel for screen reader navigation
-        tabIndex: isActive ? 0 : undefined, 
-        // inert prevents Tab navigation into hidden panel content
-        inert: !isActive || undefined, children: children }));
+        tabIndex: isActive ? 0 : undefined, children: children }));
 }
 // =============================================================================
 // Compound Component Export

package/components/TextInput/TextInput.js

@@ -15,6 +15,7 @@ import { cx } from '../../utils/cx.js';
 //   --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
 //
 // =============================================================================
 /** String or number content gets the `.is-text` visual treatment. */
@@ -23,7 +24,7 @@ export const TextInput = forwardRef(function TextInput({ type = 'text', size = '
     const sizeClass = size !== 'md' ? `is-size-${size}` : undefined;
     const handleGroupClick = useCallback((e) => {
         const target = e.target;
-        if (target.closest('button, a, [role="button"], input'))
+        if (target.closest('button, a, input, select, textarea, [tabindex]:not([tabindex="-1"]), [role="button"]'))
             return;
         e.currentTarget.querySelector('input')?.focus();
     }, []);

package/components/TextInput/types.d.ts

@@ -14,10 +14,15 @@ export type TextInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'
     size?: SizeStandard;
     /**
      * Content to render before the input (icon, text).
+     * @remarks String addons (e.g. "$", "https://") are not part of the input's
+     * accessible name. Use `aria-label` on the input to provide full context
+     * (e.g. `aria-label="Amount in US dollars"` when prefix is "$").
      */
     prefix?: ReactNode;
     /**
      * Content to render after the input (icon, button).
+     * @remarks String addons (e.g. "USD", ".com") are not part of the input's
+     * accessible name. Use `aria-label` on the input to provide full context.
      */
     suffix?: ReactNode;
     /**
@@ -26,7 +31,8 @@ export type TextInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'
     className?: string;
     /**
      * Class name applied directly to the `<input>` element.
-     * Use for utilities like `tui-input-reset` that must target the input itself.
+     * Use for utilities like `tui-input-reset` (removes browser-native search
+     * decoration, clear buttons, and spinners) that must target the input itself.
      */
     inputClassName?: string;
 };

package/components/Textarea/Textarea.js

@@ -16,9 +16,10 @@ import { composeRefs } from '../../utils/compose-refs.js';
 //   --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
 //
 // =============================================================================
-export const Textarea = forwardRef(function Textarea({ size = 'md', resize = 'vertical', autoResize = false, className, onInput, ...rest }, externalRef) {
+export const Textarea = forwardRef(function Textarea({ size = 'md', resize = 'vertical', autoResize = false, className, onInput, style, ...rest }, externalRef) {
     const internalRef = useRef(null);
     const sizeClass = size !== 'md' ? `is-size-${size}` : undefined;
     // Auto-resize: adjust height to fit content
@@ -45,5 +46,5 @@ export const Textarea = forwardRef(function Textarea({ size = 'md', resize = 've
         }
         onInput?.(e);
     }, [autoResize, adjustHeight, onInput]);
-    return (_jsx("textarea", { ref: composeRefs(internalRef, externalRef), className: cx('tui-textarea', sizeClass, autoResize && 'is-autoresize', className), style: !autoResize ? { resize } : undefined, onInput: handleInput, ...rest }));
+    return (_jsx("textarea", { ref: composeRefs(internalRef, externalRef), className: cx('tui-textarea', sizeClass, autoResize && 'is-autoresize', className), style: { ...style, ...(!autoResize ? { resize } : {}) }, onInput: handleInput, ...rest }));
 });

package/components/Textarea/types.d.ts

@@ -10,12 +10,17 @@ export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 's
     /**
      * Resize behaviour.
      * Ignored when `autoResize` is true (resize is disabled to avoid conflict).
+     * Takes precedence over `style.resize` when both are provided.
      * @default 'vertical'
      */
     resize?: TextareaResize;
     /**
      * Automatically grow height to fit content.
-     * Disables manual resize and scrollbar.
+     * Disables manual resize and sets `overflow: hidden`.
+     *
+     * **Warning:** If you apply an external `max-height` via CSS or `style`,
+     * content beyond that height will be clipped with no scrollbar.
+     * In that case, add `overflow-y: auto` to restore scrolling.
      */
     autoResize?: boolean;
     /**