@tangible/ui 0.0.7 → 0.0.9

package/components/MultiSelect/types.d.ts

@@ -11,6 +11,34 @@ export type MultiSelectValue = Array<string | number>;
  * Display mode for the trigger.
  */
 export type DisplayMode = 'count' | 'chips';
+/**
+ * Overridable label strings for i18n.
+ *
+ * Static strings use plain `string`, dynamic strings use function signatures.
+ * All keys are optional — defaults are English.
+ */
+export type MultiSelectLabels = {
+    /**
+     * Trigger text in count display mode.
+     * @default (count) => `${count} selected`
+     */
+    selected?: (count: number) => string;
+    /**
+     * Overflow badge text in chips display mode.
+     * @default (count) => `+${count} more`
+     */
+    more?: (count: number) => string;
+    /**
+     * Screen reader status announcement. Called on every selection change.
+     * When `max` is defined and `count >= max`, include a "maximum reached" note.
+     * @default (count, max) => count === 0 ? '0 items selected' : `${count} item${count === 1 ? '' : 's'} selected${max !== undefined && count >= max ? `. Maximum of ${max} reached` : ''}`
+     */
+    status?: (count: number, max?: number) => string;
+};
+/**
+ * Default English labels. Exported for reference or spread-override patterns.
+ */
+export declare const defaultMultiSelectLabels: Required<MultiSelectLabels>;
 export type MultiSelectProps = {
     /**
      * Control size.
@@ -73,6 +101,11 @@ export type MultiSelectProps = {
      * Callback when max selections is reached.
      */
     onMaxReached?: () => void;
+    /**
+     * Override internal display and screen reader strings for i18n.
+     * All keys are optional — omitted keys use English defaults.
+     */
+    labels?: MultiSelectLabels;
     /**
      * Accessible name for the select.
      */
@@ -169,6 +202,7 @@ export type MultiSelectActionsContextValue = {
     maxChips: number;
     max: number | undefined;
     size: SizeStandard;
+    labels: Required<MultiSelectLabels>;
     triggerId: string;
     listboxId: string;
     ariaLabel?: string;

package/components/MultiSelect/types.js

@@ -1,3 +1,13 @@
 import { toKey } from '../../utils/value-key.js';
 // Re-export shared value-key types so existing consumers don't break
 export { toKey };
+/**
+ * Default English labels. Exported for reference or spread-override patterns.
+ */
+export const defaultMultiSelectLabels = {
+    selected: (count) => `${count} selected`,
+    more: (count) => `+${count} more`,
+    status: (count, max) => count === 0
+        ? '0 items selected'
+        : `${count} item${count === 1 ? '' : 's'} selected${max !== undefined && count >= max ? `. Maximum of ${max} reached` : ''}`,
+};

package/components/Pager/Pager.d.ts

@@ -1,3 +1,4 @@
+import { type PagerLabels } from './types';
 export type PagerMode = 'simple' | 'ends' | 'full' | 'smart';
 export type PagerProps = {
     /** Current page (1-indexed) */
@@ -22,5 +23,10 @@ export type PagerProps = {
     hidden?: boolean;
     /** Additional class name */
     className?: string;
+    /**
+     * Overridable label strings for i18n.
+     * All keys are optional — defaults are English.
+     */
+    labels?: PagerLabels;
 };
-export declare function Pager({ currentPage, totalPages, onPageChange, pageSize, pageSizeOptions, onPageSizeChange, mode, maxNumbers, navStyle, hidden, className, }: PagerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Pager({ currentPage, totalPages, onPageChange, pageSize, pageSizeOptions, onPageSizeChange, mode, maxNumbers, navStyle, hidden, className, labels: labelsProp, }: PagerProps): import("react/jsx-runtime").JSX.Element | null;

package/components/Pager/Pager.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { cx } from '../../utils/cx.js';
 import { Button } from '../Button/index.js';
 import { IconButton } from '../IconButton/index.js';
+import { defaultPagerLabels } from './types.js';
 // =============================================================================
 // Pager Component
 // =============================================================================
@@ -121,7 +122,8 @@ function buildItems(total, current, mode, maxNumbers) {
 // -----------------------------------------------------------------------------
 // Component
 // -----------------------------------------------------------------------------
-export function Pager({ currentPage, totalPages, onPageChange, pageSize, pageSizeOptions, onPageSizeChange, mode = 'smart', maxNumbers = DEFAULT_MAX_SLOTS, navStyle = 'text', hidden = false, className, }) {
+export function Pager({ currentPage, totalPages, onPageChange, pageSize, pageSizeOptions, onPageSizeChange, mode = 'smart', maxNumbers = DEFAULT_MAX_SLOTS, navStyle = 'text', hidden = false, className, labels: labelsProp, }) {
+    const labels = React.useMemo(() => ({ ...defaultPagerLabels, ...labelsProp }), [labelsProp]);
     // Normalise inputs
     const total = Math.max(1, totalPages);
     const current = Math.min(total, Math.max(1, currentPage));
@@ -130,13 +132,13 @@ export function Pager({ currentPage, totalPages, onPageChange, pageSize, pageSiz
     if (hidden)
         return null;
     const showPageSizeSelector = pageSizeOptions && pageSizeOptions.length > 0 && onPageSizeChange;
-    return (_jsxs("div", { className: cx('tui-pager', className), children: [_jsx("nav", { className: "tui-pager__nav", "aria-label": "Pagination", children: items.map((it, i) => {
+    return (_jsxs("div", { className: cx('tui-pager', className), children: [_jsx("nav", { className: "tui-pager__nav", "aria-label": labels.navigation, children: items.map((it, i) => {
                     if (it.kind === 'ellipsis') {
                         return (_jsx("span", { className: "tui-pager__ellipsis", "aria-hidden": true, children: "..." }, `e${i}`));
                     }
                     if (it.kind === 'prev' || it.kind === 'next') {
                         const isPrev = it.kind === 'prev';
-                        const label = isPrev ? 'Previous page' : 'Next page';
+                        const label = isPrev ? labels.previous : labels.next;
                         if (navStyle === 'icon') {
                             return (_jsx(IconButton, { icon: isPrev ? 'system/chevron-left' : 'system/chevron-right', label: label, showTooltip: true, size: "sm", theme: "secondary", variant: "outline", disabled: it.disabled, onClick: () => go(it.page), className: "tui-pager__item" }, it.kind));
                         }
@@ -144,8 +146,8 @@ export function Pager({ currentPage, totalPages, onPageChange, pageSize, pageSiz
                     }
                     // Page number
                     if (it.kind === 'page') {
-                        return (_jsx(Button, { size: "sm", theme: it.current ? 'primary' : 'secondary', variant: it.current ? 'solid' : 'outline', "aria-current": it.current ? 'page' : undefined, "aria-label": `Page ${it.page}`, onClick: () => go(it.page), className: "tui-pager__item", children: it.page }, it.page));
+                        return (_jsx(Button, { size: "sm", theme: it.current ? 'primary' : 'secondary', variant: it.current ? 'solid' : 'outline', "aria-current": it.current ? 'page' : undefined, "aria-label": labels.page(it.page), onClick: () => go(it.page), className: "tui-pager__item", children: it.page }, it.page));
                     }
                     return null;
-                }) }), _jsxs("div", { className: "tui-pager__info", children: [_jsxs("span", { children: ["Page ", _jsx("strong", { children: current }), " of ", total] }), showPageSizeSelector && (_jsxs("label", { className: "tui-pager__page-size-label", children: [_jsx("span", { className: "tui-visually-hidden", children: "Items per page" }), _jsx("select", { className: "tui-input", value: pageSize, onChange: (e) => onPageSizeChange(Number(e.target.value)), children: pageSizeOptions.map((s) => (_jsxs("option", { value: s, children: [s, " / page"] }, s))) })] }))] })] }));
+                }) }), _jsxs("div", { className: "tui-pager__info", children: [_jsx("span", { children: labels.pageStatus(current, total) }), showPageSizeSelector && (_jsxs("label", { className: "tui-pager__page-size-label", children: [_jsx("span", { className: "tui-visually-hidden", children: labels.itemsPerPage }), _jsx("select", { className: "tui-input", value: pageSize, onChange: (e) => onPageSizeChange(Number(e.target.value)), children: pageSizeOptions.map((s) => (_jsx("option", { value: s, children: labels.perPage(s) }, s))) })] }))] })] }));
 }

package/components/Pager/index.d.ts

@@ -1,2 +1,4 @@
 export { Pager } from './Pager';
 export type { PagerProps, PagerMode } from './Pager';
+export { defaultPagerLabels } from './types';
+export type { PagerLabels } from './types';

package/components/Pager/index.js

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

package/components/Pager/types.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Overridable label strings for i18n.
+ *
+ * Static strings use plain `string`, dynamic strings use function signatures.
+ * All keys are optional — defaults are English.
+ */
+export type PagerLabels = {
+    /** Label for previous page button (aria-label on icon style, aria-label on text style).
+     * @default "Previous page"
+     */
+    previous?: string;
+    /** Label for next page button.
+     * @default "Next page"
+     */
+    next?: string;
+    /** Label for individual page buttons.
+     * @default (n) => `Page ${n}`
+     */
+    page?: (n: number) => string;
+    /** aria-label for the nav landmark.
+     * @default "Pagination"
+     */
+    navigation?: string;
+    /** "Page X of Y" status text.
+     * @default (current, total) => `Page ${current} of ${total}`
+     */
+    pageStatus?: (current: number, total: number) => string;
+    /** Visually-hidden label for the page size selector.
+     * @default "Items per page"
+     */
+    itemsPerPage?: string;
+    /** Option text in the page size selector.
+     * @default (n) => `${n} / page`
+     */
+    perPage?: (n: number) => string;
+};
+export declare const defaultPagerLabels: Required<PagerLabels>;

package/components/Pager/types.js

@@ -0,0 +1,12 @@
+// =============================================================================
+// Pager Types
+// =============================================================================
+export const defaultPagerLabels = {
+    previous: 'Previous page',
+    next: 'Next page',
+    page: (n) => `Page ${n}`,
+    navigation: 'Pagination',
+    pageStatus: (current, total) => `Page ${current} of ${total}`,
+    itemsPerPage: 'Items per page',
+    perPage: (n) => `${n} / page`,
+};

package/components/Progress/Progress.d.ts

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

package/components/Progress/Progress.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from 'react';
+import React, { memo } from 'react';
 import { useProgressSegments } from './useProgressSegments.js';
 import { cx } from '../../utils/cx.js';
 import { isDev } from '../../utils/is-dev.js';
 // =============================================================================
 // COMPONENT
 // =============================================================================
-export function Progress(props) {
+export const Progress = memo(function Progress(props) {
     const { children, mode = 'line', size = 'md', max = 100, showLabels = true, 'aria-labelledby': labelledBy, 'aria-label': ariaLabel, defaultLabel, className, } = props;
     // Determine mode
     const isSegmented = 'segments' in props && Array.isArray(props.segments);
@@ -98,4 +98,4 @@ export function Progress(props) {
     // Above/below/inline positions: render labels outside the track
     const labelRow = (_jsxs("div", { className: "tui-progress__labels", children: [labelStart && _jsx("span", { className: "tui-progress__label is-start", children: labelStart }), labelEnd && _jsx("span", { className: "tui-progress__label is-end", children: labelEnd })] }));
     return (_jsxs("div", { ...rootProps, children: [labelPosition === 'above' && labelRow, labelPosition === 'inline' ? (_jsxs("div", { className: "tui-progress__inline", children: [labelStart && _jsx("span", { className: "tui-progress__label is-start", children: labelStart }), trackContent, labelEnd && _jsx("span", { className: "tui-progress__label is-end", children: labelEnd })] })) : (trackContent), labelPosition === 'below' && labelRow, !labelledBy && !ariaLabel && defaultLabel && (_jsx("span", { className: "visually-hidden", children: defaultLabel }))] }));
-}
+});

package/components/Rating/Rating.d.ts

@@ -1,32 +1,2 @@
-import type { SizeStandard, Theme as ThemeFull } from '../../types';
-type Size = SizeStandard;
-type Theme = ThemeFull;
-export type RatingProps = {
-    /** Controlled value (1..max). Use with onValueChange */
-    value?: number;
-    /** Uncontrolled initial value */
-    defaultValue?: number;
-    /** Maximum icons shown */
-    max?: number;
-    /** Disable interaction (keeps semantics) */
-    disabled?: boolean;
-    /** Presentational readOnly (no form semantics) */
-    readOnly?: boolean;
-    /** Name for the radio group (if you care about form posts) */
-    name?: string;
-    /** Size maps to icon + spacing */
-    size?: Size;
-    /** Theme feeds foreground color tokens */
-    theme?: Theme;
-    /** Called when the value changes */
-    onValueChange?: (value: number) => void;
-    /** Allow clicking the current selection to clear back to 0 */
-    allowClear?: boolean;
-    className?: string;
-    /** Gap override (e.g. '0.25rem') – otherwise uses density utilities */
-    gap?: string;
-    /** Accessible label for the rating group. Defaults to "Rating: X of Y" */
-    'aria-label'?: string;
-};
-export declare function Rating({ value, defaultValue, max, disabled, readOnly, name, size, theme, onValueChange, allowClear, className, gap, 'aria-label': ariaLabel, }: RatingProps): import("react/jsx-runtime").JSX.Element;
-export {};
+import type { RatingProps } from './types';
+export declare function Rating({ value, defaultValue, max, disabled, readOnly, name, size, theme, onValueChange, allowClear, className, gap, 'aria-label': ariaLabel, labels: labelsProp, }: RatingProps): import("react/jsx-runtime").JSX.Element;

package/components/Rating/Rating.js

@@ -2,10 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { cx } from '../../utils/cx.js';
 import { Icon } from '../Icon/index.js';
-export function Rating({ value, defaultValue = 0, max = 5, disabled, readOnly, name, size = 'lg', theme = 'secondary', onValueChange, allowClear, className, gap, 'aria-label': ariaLabel, }) {
+import { defaultRatingLabels } from './types.js';
+export function Rating({ value, defaultValue = 0, max = 5, disabled, readOnly, name, size = 'lg', theme = 'secondary', onValueChange, allowClear, className, gap, 'aria-label': ariaLabel, labels: labelsProp, }) {
     const isControlled = value != null;
     const [internal, setInternal] = React.useState(defaultValue);
     const current = isControlled ? value : internal;
+    const labels = { ...defaultRatingLabels, ...labelsProp };
     const generatedId = React.useId();
     const groupName = name ?? generatedId;
     const setValue = (v) => {
@@ -62,13 +64,13 @@ export function Rating({ value, defaultValue = 0, max = 5, disabled, readOnly, n
                 return;
         }
     };
-    const defaultAriaLabel = `Rating: ${current} of ${max}`;
+    const defaultAriaLabel = labels.rating(current, max);
     // Roving tabindex: only the selected radio (or first if none) is in tab order
     const focusableIndex = current > 0 ? current : 1;
     return (_jsx("div", { className: cx('tui-rating', `is-size-${size}`, `is-theme-${theme}`, disabled && 'is-disabled', className), style: { gap }, role: readOnly ? 'img' : 'radiogroup', "aria-label": ariaLabel ?? defaultAriaLabel, onKeyDown: readOnly ? undefined : onKeyDown, children: Array.from({ length: max }).map((_, i) => {
             const n = i + 1;
             const checked = current >= n;
             const id = `${groupName}__star-${n}`;
-            return (_jsxs("div", { className: "tui-rating__item", children: [!readOnly && (_jsx("input", { className: "tui-visually-hidden", type: "radio", id: id, name: groupName, value: n, checked: current === n, "aria-checked": current === n, tabIndex: n === focusableIndex ? 0 : -1, onChange: () => handleSelect(n), disabled: disabled })), readOnly ? (_jsx("span", { className: cx('tui-rating__star', checked && 'is-active'), children: _jsx(Icon, { name: checked ? 'system/star-fill' : 'system/star-outline' }) })) : (_jsxs("label", { className: cx('tui-rating__star', checked && 'is-active'), htmlFor: id, tabIndex: -1, children: [_jsx(Icon, { name: checked ? 'system/star-fill' : 'system/star-outline' }), _jsx("span", { className: "tui-visually-hidden", children: `${n} of ${max}` })] }))] }, n));
+            return (_jsxs("div", { className: "tui-rating__item", children: [!readOnly && (_jsx("input", { className: "tui-visually-hidden", type: "radio", id: id, name: groupName, value: n, checked: current === n, "aria-checked": current === n, tabIndex: n === focusableIndex ? 0 : -1, onChange: () => handleSelect(n), disabled: disabled })), readOnly ? (_jsx("span", { className: cx('tui-rating__star', checked && 'is-active'), children: _jsx(Icon, { name: checked ? 'system/star-fill' : 'system/star-outline' }) })) : (_jsxs("label", { className: cx('tui-rating__star', checked && 'is-active'), htmlFor: id, tabIndex: -1, children: [_jsx(Icon, { name: checked ? 'system/star-fill' : 'system/star-outline' }), _jsx("span", { className: "tui-visually-hidden", children: labels.value(n, max) })] }))] }, n));
         }) }));
 }

package/components/Rating/index.d.ts

@@ -1,2 +1,3 @@
 export { Rating } from './Rating';
-export type { RatingProps } from './Rating';
+export type { RatingProps, RatingLabels } from './types';
+export { defaultRatingLabels } from './types';

package/components/Rating/index.js

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

package/components/Rating/types.d.ts

@@ -0,0 +1,41 @@
+import type { SizeStandard, Theme as ThemeFull } from '../../types';
+export type Size = SizeStandard;
+export type Theme = ThemeFull;
+export type RatingLabels = {
+    /** Group label for the radiogroup/img. Receives current value and max. */
+    rating?: (value: number, max: number) => string;
+    /** Visually-hidden label for each star. Receives star number and max. */
+    value?: (n: number, max: number) => string;
+};
+export declare const defaultRatingLabels: Required<RatingLabels>;
+export type RatingProps = {
+    /** Controlled value (1..max). Use with onValueChange */
+    value?: number;
+    /** Uncontrolled initial value */
+    defaultValue?: number;
+    /** Maximum icons shown */
+    max?: number;
+    /** Disable interaction (keeps semantics) */
+    disabled?: boolean;
+    /** Presentational readOnly (no form semantics) */
+    readOnly?: boolean;
+    /** Name for the radio group (if you care about form posts) */
+    name?: string;
+    /** Size maps to icon + spacing */
+    size?: Size;
+    /** Theme feeds foreground color tokens */
+    theme?: Theme;
+    /** Called when the value changes */
+    onValueChange?: (value: number) => void;
+    /** Allow clicking the current selection to clear back to 0 */
+    allowClear?: boolean;
+    className?: string;
+    /** Gap override (e.g. '0.25rem') – otherwise uses density utilities */
+    gap?: string;
+    /** Accessible label for the rating group. Defaults to "Rating: X of Y" */
+    'aria-label'?: string;
+    /**
+     * Override default English strings for i18n.
+     */
+    labels?: RatingLabels;
+};

package/components/Rating/types.js

@@ -0,0 +1,4 @@
+export const defaultRatingLabels = {
+    rating: (value, max) => `Rating: ${value} of ${max}`,
+    value: (n, max) => `${n} of ${max}`,
+};

package/components/SegmentedControl/SegmentedControl.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { cx } from '../../utils/cx.js';
 import { isDev } from '../../utils/is-dev.js';
 import { toKey } from '../../utils/value-key.js';
@@ -8,9 +8,10 @@ import { SegmentedControlContext, useSegmentedControlContext } from './Segmented
 // =============================================================================
 // SegmentedControl Root
 // =============================================================================
-function SegmentedControlRoot({ value: controlledValue, defaultValue, onValueChange, variant = 'pill', size = 'md', orientation = 'horizontal', loop = true, disabled = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, children, }) {
+function SegmentedControlRoot({ value: controlledValue, defaultValue, onValueChange, variant = 'pill', size = 'md', orientation = 'horizontal', loop = true, wrap = false, disabled = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, children, }) {
     const [internalValue, setInternalValue] = useState(defaultValue);
-    const isControlled = controlledValue !== undefined;
+    // Lock controlled/uncontrolled decision at mount to prevent mode switching
+    const isControlled = useRef(controlledValue !== undefined).current;
     const selectedValue = isControlled ? controlledValue : internalValue;
     // Selection handler
     const onSelect = useCallback((newValue) => {
@@ -28,7 +29,7 @@ function SegmentedControlRoot({ value: controlledValue, defaultValue, onValueCha
         disabled,
         loop,
         orientation,
-        orientationKeyboard: true,
+        orientationKeyboard: false,
     });
     // Dev-only: Warn if missing accessible name
     useEffect(() => {
@@ -60,7 +61,7 @@ function SegmentedControlRoot({ value: controlledValue, defaultValue, onValueCha
         unregisterItem,
         onSelect,
     ]);
-    return (_jsx(SegmentedControlContext.Provider, { value: contextValue, children: _jsx("div", { role: "radiogroup", className: cx('tui-segmented', `is-variant-${variant}`, `is-size-${size}`, orientation === 'vertical' && 'is-vertical', className), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-disabled": disabled || undefined, "aria-orientation": orientation, onKeyDown: handleKeyDown, children: children }) }));
+    return (_jsx(SegmentedControlContext.Provider, { value: contextValue, children: _jsx("div", { role: "radiogroup", className: cx('tui-segmented', `is-variant-${variant}`, `is-size-${size}`, orientation === 'vertical' && 'is-vertical', wrap && 'is-wrap', className), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-disabled": disabled || undefined, "aria-orientation": orientation, onKeyDown: handleKeyDown, children: children }) }));
 }
 // =============================================================================
 // SegmentedControl.Item

package/components/SegmentedControl/types.d.ts

@@ -1,8 +1,9 @@
 import type { ReactNode } from 'react';
 import type { RovingItemRecord } from '../../utils/use-roving-group';
+import type { SizeStandard } from '../../types/sizes';
 export type SegmentedControlValue = string | number;
 export type SegmentedControlVariant = 'pill' | 'outline' | 'underline';
-export type SegmentedControlSize = 'sm' | 'md';
+export type SegmentedControlSize = SizeStandard;
 export type SegmentedControlOrientation = 'horizontal' | 'vertical';
 export type SegmentedControlProps = {
     /** Controlled selected value */
@@ -19,11 +20,19 @@ export type SegmentedControlProps = {
     orientation?: SegmentedControlOrientation;
     /** Whether arrow keys wrap around */
     loop?: boolean;
+    /** Allow items to wrap to multiple lines (default: false) */
+    wrap?: boolean;
     /** Disable all items */
     disabled?: boolean;
-    /** Accessible label */
+    /**
+     * Accessible label for the radiogroup.
+     * At least one of `aria-label` or `aria-labelledby` is required.
+     */
     'aria-label'?: string;
-    /** ID of element that labels this control */
+    /**
+     * ID of element that labels this control.
+     * At least one of `aria-label` or `aria-labelledby` is required.
+     */
     'aria-labelledby'?: string;
     /** Additional classes */
     className?: string;
@@ -34,9 +43,12 @@ export type SegmentedControlItemProps = {
     value: SegmentedControlValue;
     /** Disable this item */
     disabled?: boolean;
-    /** Icon element */
+    /**
+     * Icon element rendered before the label.
+     * @remarks Icon-only items (no `children`) must provide `aria-label`.
+     */
     icon?: ReactNode;
-    /** Accessible label for icon-only items */
+    /** Accessible label — required for icon-only items */
     'aria-label'?: string;
     /** Additional classes */
     className?: string;

package/components/Select/Select.d.ts

@@ -37,3 +37,4 @@ export declare const SelectOption: typeof SelectOptionComponent;
 export declare const SelectGroup: typeof SelectGroupComponent;
 export declare const SelectLabel: typeof SelectLabelComponent;
 export { useSelectContext as useSelect } from './SelectContext';
+export type { SelectContextValue } from './types';