@tangible/ui 0.0.7 → 0.0.9

package/components/Sidebar/Sidebar.js

@@ -25,45 +25,50 @@ function SidebarRoot(props) {
     }, [open]);
     const isClosing = drawer && !open && visible;
     const shouldRender = drawer && (open || visible);
+    // Dismiss: set visible false and restore focus to the element that opened
+    // the drawer. Called from both the reduced-motion layout effect and the
+    // animation-end handler — these are the actual unmount points, so focus
+    // must be restored here (not in a useEffect, which may not fire before
+    // the synchronous re-render unmounts the component).
+    const dismiss = useCallback(() => {
+        setVisible(false);
+        const el = restoreRef.current;
+        if (el && typeof el.focus === 'function' && document.contains(el)) {
+            el.focus();
+        }
+        restoreRef.current = null;
+    }, []);
     // When closing, check if animation will actually play (reduced motion).
-    // If not, unmount immediately to avoid getting stuck.
+    // If not, dismiss immediately to avoid getting stuck.
     useLayoutEffect(() => {
         if (!isClosing)
             return;
         const panel = panelRef.current;
         if (!panel) {
-            setVisible(false);
+            dismiss();
             return;
         }
         const style = getComputedStyle(panel);
         if (!style.animationName || style.animationName === 'none') {
-            setVisible(false);
+            dismiss();
         }
-    }, [isClosing]);
+    }, [isClosing, dismiss]);
     const handleAnimationEnd = useCallback((e) => {
         if (e.target === panelRef.current) {
-            setVisible(false);
+            dismiss();
         }
-    }, []);
+    }, [dismiss]);
     const rootClassName = ['tui-sidebar', className].filter(Boolean).join(' ');
     // ---------------------------------------------------------------------------
     // Drawer mode: capture trigger for focus restoration
     // ---------------------------------------------------------------------------
-    useEffect(() => {
-        if (!drawer || !isBrowser)
+    // Capture the element that had focus when the drawer opens.
+    // Must be a layout effect so it runs BEFORE the initial focus layout effect
+    // moves focus into the drawer. Focus restoration is handled by `dismiss()`.
+    useLayoutEffect(() => {
+        if (!drawer || !isBrowser || !open)
             return;
-        if (open) {
-            // Capture focus target when opening
-            restoreRef.current = document.activeElement;
-        }
-        else {
-            // Restore focus when closing (with DOM containment guard)
-            const el = restoreRef.current;
-            if (el && typeof el.focus === 'function' && document.contains(el)) {
-                el.focus();
-            }
-            restoreRef.current = null;
-        }
+        restoreRef.current = document.activeElement;
     }, [drawer, open]);
     // ---------------------------------------------------------------------------
     // Drawer mode: body scroll lock

package/components/StepIndicator/StepIndicator.d.ts

@@ -1,2 +1,2 @@
 import type { StepIndicatorProps } from './types';
-export declare function StepIndicator(props: StepIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export declare const StepIndicator: import("react").NamedExoticComponent<StepIndicatorProps>;

package/components/StepIndicator/StepIndicator.js

@@ -1,4 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { defaultStepIndicatorLabels } from './types.js';
 import { Progress } from '../Progress/index.js';
 import { Icon } from '../Icon/index.js';
 // =============================================================================
@@ -8,12 +10,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
 // =============================================================================
@@ -27,8 +23,9 @@ function inferStatus(value) {
 // =============================================================================
 // Component
 // =============================================================================
-export function StepIndicator(props) {
-    const { value = 0, status: statusOverride, icon: customIcon, size = 'sm', showValue = false, label, className, } = props;
+export const StepIndicator = memo(function StepIndicator(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 +45,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',
@@ -61,4 +65,4 @@ export function StepIndicator(props) {
         .filter(Boolean)
         .join(' ');
     return (_jsx("div", { className: rootClassName, children: _jsxs(Progress, { mode: "circle", variant: variant, size: size, value: displayValue, showLabels: showValue || hasIcon, labelPosition: "inside", "aria-label": ariaLabel, children: [hasIcon && iconName && (_jsx(Icon, { name: iconName })), showValue && status === 'in-progress' && (_jsxs("span", { className: "tui-step-indicator__value", children: [Math.round(displayValue), "%"] }))] }) }));
-}
+});

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/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;
     /**

package/components/Tooltip/Tooltip.d.ts

@@ -2,7 +2,7 @@ import type { TooltipProviderProps, TooltipProps, TooltipTriggerProps, TooltipCo
 declare function TooltipProviderComponent({ delayDuration, closeDelayDuration, children, }: TooltipProviderProps): import("react/jsx-runtime").JSX.Element;
 declare function TooltipRoot({ open: controlledOpen, onOpenChange, defaultOpen, delayDuration: localDelay, children, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
 declare function TooltipTriggerComponent({ asChild, 'aria-label': ariaLabel, children, }: TooltipTriggerProps): import("react/jsx-runtime").JSX.Element;
-declare function TooltipContentComponent({ side, align, sideOffset, theme, className, children, }: TooltipContentProps): import("react/jsx-runtime").JSX.Element | null;
+declare function TooltipContentComponent(props: TooltipContentProps): import("react/jsx-runtime").JSX.Element | null;
 type TooltipCompound = typeof TooltipRoot & {
     Provider: typeof TooltipProviderComponent;
     Trigger: typeof TooltipTriggerComponent;

package/components/Tooltip/Tooltip.js

@@ -120,12 +120,22 @@ function TooltipTriggerComponent({ asChild = false, 'aria-label': ariaLabel, chi
 // =============================================================================
 // TooltipContent
 // =============================================================================
-function TooltipContentComponent({ side = 'top', align = 'center', sideOffset = 8, theme = 'dark', className, children, }) {
-    const { open, setOpen, triggerRef, contentId, cancelClose, handleClose } = useTooltipContext();
+// Gate component: reads context to decide whether to mount the real content.
+// This ensures useFloating and all other hooks in TooltipContentInner only
+// run when the tooltip is actually open — not on every render cycle.
+function TooltipContentComponent(props) {
+    const { open } = useTooltipContext();
+    if (!open)
+        return null;
+    return _jsx(TooltipContentInner, { ...props });
+}
+// Inner component: only mounted when open. All Floating UI hooks live here.
+function TooltipContentInner({ side = 'top', align = 'center', sideOffset = 8, theme = 'dark', className, children, }) {
+    const { setOpen, triggerRef, contentId, cancelClose, handleClose } = useTooltipContext();
     const arrowRef = useRef(null);
     const { refs, floatingStyles, context } = useFloating({
         placement: toPlacement(side, align),
-        open,
+        open: true, // Always true when mounted (gate handles the conditional)
         middleware: [
             offset(sideOffset),
             flip(),
@@ -145,8 +155,6 @@ function TooltipContentComponent({ side = 'top', align = 'center', sideOffset =
     // - Focus on trigger: close + stopPropagation (avoid closing parent modal)
     // - Hover-only (focus elsewhere): close without stopPropagation
     useEffect(() => {
-        if (!open)
-            return;
         const handleKeyDown = (e) => {
             if (e.key === 'Escape') {
                 const activeEl = document.activeElement;
@@ -160,22 +168,20 @@ function TooltipContentComponent({ side = 'top', align = 'center', sideOffset =
         };
         document.addEventListener('keydown', handleKeyDown);
         return () => document.removeEventListener('keydown', handleKeyDown);
-    }, [open, setOpen, triggerRef]);
+    }, [setOpen, triggerRef]);
     // Get portal root inside .tui-interface
     const portalRoot = getPortalRootFor(triggerRef.current);
     // Dev warning: tooltips should not contain interactive content (WCAG 1.4.13)
     // Use Popover for interactive overlays instead
     useEffect(() => {
-        if (isDev() && open && refs.floating.current) {
+        if (isDev() && refs.floating.current) {
             const interactive = refs.floating.current.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
             if (interactive.length > 0) {
                 console.warn('[Tooltip] Contains interactive elements which violates WCAG 1.4.13. ' +
                     'Tooltips should only contain plain text. Use Popover for interactive content.');
             }
         }
-    }, [open, refs.floating]);
-    if (!open)
-        return null;
+    }, [refs.floating]);
     return (_jsx(FloatingPortal, { root: portalRoot, children: _jsxs("div", { ref: refs.setFloating, id: contentId, role: "tooltip", className: cx('tui-tooltip', theme === 'light' && 'is-theme-light', className), style: floatingStyles, onMouseEnter: cancelClose, onMouseLeave: handleClose, children: [children, _jsx(FloatingArrow, { ref: arrowRef, context: context, className: "tui-tooltip__arrow" })] }) }));
 }
 export const Tooltip = TooltipRoot;