@aurora-ds/components 1.1.7 → 1.4.0

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { keyframes, createStyles, useTheme, cx, createVariants, createTheme } from '@aurora-ds/theme';
 import * as React from 'react';
-import { createElement, Fragment, useRef, useState, useCallback, useEffect, useId, isValidElement, cloneElement, useLayoutEffect, useMemo, createContext, useContext } from 'react';
+import { createElement, Fragment, useRef, useState, useCallback, useEffect, useId, isValidElement, cloneElement, useLayoutEffect, useMemo, createContext, useContext, Children } from 'react';
 import { createPortal } from 'react-dom';
 
 function _extends$8() { return _extends$8 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$8.apply(null, arguments); }
@@ -574,7 +574,7 @@ const ICON_SIZE$2 = {
  * @example <Button label='Delete' variant='outlined' color='error' startIcon={IconRegistry.CloseIcon} />
  * @example <Button label='Submitting…' color='success' isLoading width='100%' />
  */
-const Button = ({ ref, variant = 'contained', color = 'primary', size = 'md', width, flexGrow, flexShrink, isLoading = false, startIcon: StartIcon, endIcon: EndIcon, label, className, type = 'button', disabled, style, ...rest }) => {
+const Button = ({ ref, variant = 'contained', color = 'primary', size = 'md', width, flexGrow, flexShrink, isLoading = false, startIcon: StartIcon, endIcon: EndIcon, label, children, className, type = 'button', disabled, style, ...rest }) => {
     const isDisabled = disabled || isLoading;
     const iconSize = ICON_SIZE$2[size];
     const rootClassName = cx(BUTTON_STYLES.root({ variant, color, size }), className);
@@ -584,7 +584,7 @@ const Button = ({ ref, variant = 'contained', color = 'primary', size = 'md', wi
         ...(flexGrow !== undefined ? { flexGrow } : {}),
         ...(flexShrink !== undefined ? { flexShrink } : {}),
     };
-    return (jsxs("button", { ref: ref, type: type, className: rootClassName, disabled: isDisabled, "aria-busy": isLoading || undefined, style: mergedStyle, ...rest, children: [isLoading && (jsx("span", { className: BUTTON_STYLES.spinnerWrap, children: jsx(Icon, { icon: SpinnerIcon, size: iconSize, className: BUTTON_STYLES.spinnerIcon }) })), jsxs("span", { className: cx(BUTTON_STYLES.content, isLoading && BUTTON_STYLES.contentHidden), children: [StartIcon && (jsx(Icon, { icon: StartIcon, size: iconSize })), label && (jsx(Text, { variant: 'span', fontSize: LABEL_FONT_SIZE$1[size], fontWeight: 'medium', lineHeight: 'none', children: label })), EndIcon && (jsx(Icon, { icon: EndIcon, size: iconSize }))] })] }));
+    return (jsxs("button", { ref: ref, type: type, className: rootClassName, disabled: isDisabled, "aria-busy": isLoading || undefined, style: mergedStyle, ...rest, children: [isLoading && (jsx("span", { className: BUTTON_STYLES.spinnerWrap, children: jsx(Icon, { icon: SpinnerIcon, size: iconSize, className: BUTTON_STYLES.spinnerIcon }) })), jsxs("span", { className: cx(BUTTON_STYLES.content, isLoading && BUTTON_STYLES.contentHidden), children: [StartIcon && (jsx(Icon, { icon: StartIcon, size: iconSize })), (label !== undefined || children !== undefined) && (jsx(Text, { variant: 'span', fontSize: LABEL_FONT_SIZE$1[size], fontWeight: 'medium', lineHeight: 'none', children: label ?? children })), EndIcon && (jsx(Icon, { icon: EndIcon, size: iconSize }))] })] }));
 };
 Button.displayName = 'Button';
 
@@ -641,36 +641,42 @@ const IconButton = ({ ref, icon: IconComponent, ariaLabel, variant = 'contained'
 IconButton.displayName = 'IconButton';
 
 const LINK_STYLES = createStyles((theme) => ({
-    root: ({ underline = 'hover' }) => ({
-        display: 'inline-flex',
-        alignItems: 'center',
-        gap: '0.25em',
-        color: theme.colors.linkMain,
-        fontFamily: 'inherit',
-        fontSize: 'inherit',
-        lineHeight: 'inherit',
-        fontWeight: 'inherit',
-        textDecoration: underline === 'always' ? 'underline' : 'none',
-        cursor: 'pointer',
-        borderRadius: theme.radius.xs,
-        transition: `color ${theme.transition.fast}`,
-        ':hover:not([aria-disabled="true"])': {
-            color: theme.colors.linkHover,
-            textDecoration: underline !== 'none' ? 'underline' : 'none',
-        },
-        ':active:not([aria-disabled="true"])': {
-            color: theme.colors.linkActive,
-        },
-        ':focus-visible': {
-            outline: `2px solid ${theme.colors.linkMain}`,
-            outlineOffset: '2px',
-        },
-        '&[aria-disabled="true"]': {
-            color: theme.colors.linkDisabled,
-            cursor: 'not-allowed',
-            textDecoration: 'none',
-        },
-    }),
+    root: ({ underline = 'hover', color = 'default' }) => {
+        const mainColor = color === 'secondary' ? theme.colors.textSecondary : theme.colors.linkMain;
+        const hoverColor = color === 'secondary' ? theme.colors.textTertiary : theme.colors.linkHover;
+        const activeColor = color === 'secondary' ? theme.colors.textPrimary : theme.colors.linkActive;
+        const disabledColor = color === 'secondary' ? theme.colors.textDisabled : theme.colors.linkDisabled;
+        return {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '0.25em',
+            color: mainColor,
+            fontFamily: 'inherit',
+            fontSize: 'inherit',
+            lineHeight: 'inherit',
+            fontWeight: 'inherit',
+            textDecoration: underline === 'always' ? 'underline' : 'none',
+            cursor: 'pointer',
+            borderRadius: theme.radius.xs,
+            transition: `color ${theme.transition.fast}`,
+            ':hover:not([aria-disabled="true"])': {
+                color: hoverColor,
+                textDecoration: underline !== 'none' ? 'underline' : 'none',
+            },
+            ':active:not([aria-disabled="true"])': {
+                color: activeColor,
+            },
+            ':focus-visible': {
+                outline: `2px solid ${mainColor}`,
+                outlineOffset: '2px',
+            },
+            '&[aria-disabled="true"]': {
+                color: disabledColor,
+                cursor: 'not-allowed',
+                textDecoration: 'none',
+            },
+        };
+    },
     icon: {
         display: 'inline-flex',
         alignItems: 'center',
@@ -683,12 +689,20 @@ const LINK_STYLES = createStyles((theme) => ({
 /**
  * Theme-aware anchor element with optional icons and underline control.
  *
+ * Supports SPA navigation (e.g. React Router) via `onClick` without `href`.
+ * In that case the component stays accessible: it gets `role="link"`,
+ * `tabIndex={0}` and keyboard Enter support automatically.
+ *
  * @example <Link href='/about'>About</Link>
  * @example <Link href='https://example.com' external>External site</Link>
  * @example <Link href='/profile' underline='always' startIcon={UserIcon}>Profile</Link>
  * @example <Link href='/terms' underline='none'>Terms</Link>
+ * @example <Link onClick={() => navigate('/about')}>About (SPA)</Link>
  */
-const Link = ({ ref, underline = 'hover', external = false, disabled = false, startIcon: StartIcon, endIcon: EndIcon, children, className, onClick, onKeyDown, ...rest }) => {
+const Link = ({ ref, underline = 'hover', color = 'default', external = false, disabled = false, startIcon: StartIcon, endIcon: EndIcon, children, className, href, onClick, onKeyDown, ...rest }) => {
+    // An <a> without href has no implicit ARIA role and is not focusable.
+    // When used for SPA navigation (onClick only), we restore both behaviours.
+    const hasHref = !!href;
     const handleClick = (e) => {
         if (disabled) {
             e.preventDefault();
@@ -696,14 +710,22 @@ const Link = ({ ref, underline = 'hover', external = false, disabled = false, st
         }
         onClick?.(e);
     };
-    // Prevents Enter navigation when disabled; satisfies jsx-a11y/click-events-have-key-events.
     const handleKeyDown = (e) => {
         if (disabled && e.key === 'Enter') {
             e.preventDefault();
         }
+        // Without href, the browser does not fire a click on Enter natively.
+        if (!hasHref && !disabled && e.key === 'Enter') {
+            e.currentTarget.click();
+        }
         onKeyDown?.(e);
     };
-    return (jsxs("a", { ref: ref, className: cx(LINK_STYLES.root({ underline }), className), "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : undefined, target: external ? '_blank' : undefined, rel: external ? 'noopener noreferrer' : undefined, onClick: handleClick, onKeyDown: handleKeyDown, ...rest, children: [StartIcon && (jsx("span", { className: LINK_STYLES.icon, "aria-hidden": true, children: jsx(StartIcon, { width: '1em', height: '1em' }) })), children, EndIcon && (jsx("span", { className: LINK_STYLES.icon, "aria-hidden": true, children: jsx(EndIcon, { width: '1em', height: '1em' }) }))] }));
+    return (jsxs("a", { ref: ref, href: href, className: cx(LINK_STYLES.root({ underline, color }), className), "aria-disabled": disabled || undefined, 
+        // Without href: must be explicitly put in the tab order.
+        // With href: the browser handles focusability natively (no tabIndex needed).
+        tabIndex: disabled ? -1 : (!hasHref ? 0 : undefined), 
+        // Without href: <a> has no implicit ARIA role — add role="link" explicitly.
+        role: !hasHref ? 'link' : undefined, target: external ? '_blank' : undefined, rel: external ? 'noopener noreferrer' : undefined, onClick: handleClick, onKeyDown: handleKeyDown, ...rest, children: [StartIcon && (jsx("span", { className: LINK_STYLES.icon, "aria-hidden": true, children: jsx(StartIcon, { width: '1em', height: '1em' }) })), children, EndIcon && (jsx("span", { className: LINK_STYLES.icon, "aria-hidden": true, children: jsx(EndIcon, { width: '1em', height: '1em' }) }))] }));
 };
 Link.displayName = 'Link';
 
@@ -1759,7 +1781,7 @@ const useTextField = ({ id, ref, type, size, endAction, }) => {
  */
 const TextField = ({ ref, label, helperText, size = 'md', status = 'default', startIcon: StartIcon, endAction, type, id, disabled, required, ...rest }) => {
     const { fieldId, helperId, mergedRef, isPassword, showPassword, togglePassword, resolvedType, iconSize, iconButtonSize, hasEndSection, focusInput, } = useTextField({ id, ref, type, size, endAction });
-    return (jsxs(Stack, { flexDirection: 'column', gap: 'xs', children: [label !== undefined && (jsxs(Text, { variant: 'label', fontSize: 'sm', fontWeight: 'medium', color: 'textSecondary', htmlFor: fieldId, children: [label, required && (jsx(Text, { variant: 'span', color: 'errorMain', "aria-hidden": true, children: ' *' }))] })), jsxs("div", { className: TEXTFIELD_WRAPPER_VARIANTS({ size, status }), "data-disabled": disabled || undefined, children: [StartIcon && (jsx("span", { className: TEXTFIELD_STYLES.startIconWrap, onClick: focusInput, children: jsx(Icon, { icon: StartIcon, size: iconSize, strokeColor: 'textSecondary' }) })), jsx("input", { ref: mergedRef, id: fieldId, type: resolvedType, disabled: disabled, required: required, "aria-required": required || undefined, "aria-invalid": status === 'error' || undefined, "aria-describedby": helperText !== undefined ? helperId : undefined, className: TEXTFIELD_STYLES.input, ...rest }), hasEndSection && (jsxs("span", { className: TEXTFIELD_STYLES.endActionWrap, children: [endAction, isPassword && (jsx(IconButton, { icon: showPassword ? EyeSlashIcon : EyeIcon, ariaLabel: showPassword ? 'Hide password' : 'Show password', variant: 'text', color: 'neutral', size: iconButtonSize, type: 'button', tabIndex: -1, onClick: togglePassword }))] }))] }), helperText !== undefined && (jsx(FormHelperText, { id: helperId, status: status, children: helperText }))] }));
+    return (jsxs(Stack, { flexDirection: 'column', gap: 'xs', children: [label !== undefined && (jsxs(Text, { variant: 'label', fontSize: 'sm', fontWeight: 'medium', color: 'textSecondary', htmlFor: fieldId, children: [label, required && (jsx(Text, { variant: 'span', color: 'errorMain', "aria-hidden": true, children: ' *' }))] })), jsxs("div", { className: TEXTFIELD_WRAPPER_VARIANTS({ size, status }), "data-disabled": disabled || undefined, children: [StartIcon && (jsx("span", { className: TEXTFIELD_STYLES.startIconWrap, onClick: focusInput, "aria-hidden": true, children: jsx(Icon, { icon: StartIcon, size: iconSize, strokeColor: 'textSecondary' }) })), jsx("input", { ref: mergedRef, id: fieldId, type: resolvedType, disabled: disabled, required: required, "aria-required": required || undefined, "aria-invalid": status === 'error' || undefined, "aria-describedby": helperText !== undefined ? helperId : undefined, "aria-errormessage": status === 'error' && helperText !== undefined ? helperId : undefined, className: TEXTFIELD_STYLES.input, ...rest }), hasEndSection && (jsxs("span", { className: TEXTFIELD_STYLES.endActionWrap, children: [endAction, isPassword && (jsx(IconButton, { icon: showPassword ? EyeSlashIcon : EyeIcon, ariaLabel: showPassword ? 'Hide password' : 'Show password', variant: 'text', color: 'neutral', size: iconButtonSize, type: 'button', onClick: togglePassword }))] }))] }), helperText !== undefined && (jsx(FormHelperText, { id: helperId, status: status, children: helperText }))] }));
 };
 TextField.displayName = 'TextField';
 
@@ -1894,7 +1916,9 @@ const useMenuPosition = ({ anchorEl, open, menuRef, minWidth, gap = 4, }) => {
  */
 const useMenu = ({ open, onClose, anchorEl, minWidth }) => {
     const panelRef = useRef(null);
+    const baseId = useId();
     const [focusedIndex, setFocusedIndex] = useState(-1);
+    const [activeDescendant, setActiveDescendant] = useState(undefined);
     const { style } = useMenuPosition({ anchorEl, open, menuRef: panelRef, minWidth });
     /** Returns all non-disabled option elements inside the panel. */
     const getOptions = useCallback(() => {
@@ -1917,22 +1941,31 @@ const useMenu = ({ open, onClose, anchorEl, minWidth }) => {
         });
         return () => cancelAnimationFrame(raf);
     }, [open, getOptions]);
-    // Keep data-focused in sync with focusedIndex
+    // Keep data-focused (visual highlight) and aria-activedescendant (screen reader
+    // announcement) in sync with focusedIndex. Each option is assigned a stable id
+    // so the listbox can reference the active one via aria-activedescendant.
     useEffect(() => {
         if (!open) {
+            setActiveDescendant(undefined);
             return;
         }
         const options = getOptions();
+        let activeId;
         options.forEach((el, idx) => {
+            if (!el.id) {
+                el.id = `${baseId}-option-${idx}`;
+            }
             if (idx === focusedIndex) {
                 el.setAttribute('data-focused', 'true');
                 el.scrollIntoView({ block: 'nearest' });
+                activeId = el.id;
             }
             else {
                 el.removeAttribute('data-focused');
             }
         });
-    }, [focusedIndex, open, getOptions]);
+        setActiveDescendant(activeId);
+    }, [focusedIndex, open, getOptions, baseId]);
     useKeyPress({
         Escape: onClose,
         ArrowDown: (e) => {
@@ -1970,7 +2003,7 @@ const useMenu = ({ open, onClose, anchorEl, minWidth }) => {
             }
         },
     }, { enabled: open });
-    return { panelRef, style };
+    return { panelRef, style, activeDescendant };
 };
 
 const MENU_GROUP_STYLES = createStyles((theme) => {
@@ -2011,7 +2044,8 @@ const MENU_GROUP_STYLES = createStyles((theme) => {
 }, { id: 'menu-group' });
 
 const MenuGroup = ({ label, divider, children, }) => {
-    return (jsxs("div", { className: MENU_GROUP_STYLES.root, children: [divider && (jsx("div", { className: MENU_GROUP_STYLES.divider, role: 'separator', "aria-hidden": true })), label !== undefined && (jsx("span", { className: MENU_GROUP_STYLES.label, children: label })), jsx("ul", { className: MENU_GROUP_STYLES.list, role: 'group', "aria-label": label, children: children })] }));
+    const labelId = useId();
+    return (jsxs("div", { className: MENU_GROUP_STYLES.root, children: [divider && (jsx("div", { className: MENU_GROUP_STYLES.divider, role: 'separator', "aria-hidden": true })), label !== undefined && (jsx("span", { id: labelId, className: MENU_GROUP_STYLES.label, "aria-hidden": true, children: label })), jsx("ul", { className: MENU_GROUP_STYLES.list, role: 'group', "aria-labelledby": label !== undefined ? labelId : undefined, children: children })] }));
 };
 MenuGroup.displayName = 'MenuGroup';
 
@@ -2062,12 +2096,12 @@ const MenuItem = ({ ref, label, icon, selected, focused, disabled, onClick, ...r
 };
 MenuItem.displayName = 'MenuItem';
 
-const MenuBase = ({ open, onClose, anchorEl, minWidth, maxHeight = '20rem', id, children, }) => {
-    const { panelRef, style } = useMenu({ open, onClose, anchorEl, minWidth });
+const MenuBase = ({ open, onClose, anchorEl, minWidth, maxHeight = '20rem', id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, children, }) => {
+    const { panelRef, style, activeDescendant } = useMenu({ open, onClose, anchorEl, minWidth });
     if (!open) {
         return null;
     }
-    return createPortal(jsxs(Fragment$1, { children: [jsx("div", { className: MENU_STYLES.backdrop, onClick: onClose, "aria-hidden": true }), jsx("div", { ref: panelRef, id: id, role: 'listbox', tabIndex: -1, className: MENU_STYLES.panel, style: { ...style, maxHeight, outline: 'none' }, children: children })] }), document.body);
+    return createPortal(jsxs(Fragment$1, { children: [jsx("div", { className: MENU_STYLES.backdrop, onClick: onClose, "aria-hidden": true }), jsx("div", { ref: panelRef, id: id, role: 'listbox', tabIndex: -1, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-activedescendant": activeDescendant, className: MENU_STYLES.panel, style: { ...style, maxHeight, outline: 'none' }, children: children })] }), document.body);
 };
 MenuBase.displayName = 'Menu';
 const Menu = MenuBase;
@@ -2189,9 +2223,9 @@ const ICON_SIZE_MAP = {
     md: 'md',
     lg: 'lg',
 };
-const SelectTrigger = ({ ref, size = 'md', status = 'default', open, hasValue, startIcon, disabled, children, ...rest }) => {
+const SelectTrigger = ({ ref, size = 'md', status = 'default', open, hasValue, startIcon, disabled, children, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, ...rest }) => {
     const iconSize = ICON_SIZE_MAP[size];
-    return (jsxs("button", { type: 'button', ref: ref, className: SELECT_TRIGGER_VARIANTS({ size, status }), "data-open": open || undefined, "data-disabled": disabled || undefined, disabled: disabled, ...rest, children: [startIcon !== undefined && (jsx(Icon, { icon: startIcon, size: iconSize, strokeColor: 'textSecondary' })), jsx("span", { className: hasValue ? SELECT_TRIGGER_STYLES.value : SELECT_TRIGGER_STYLES.placeholder, children: children }), jsx(Icon, { icon: ChevronDownIcon, size: iconSize, className: cx(SELECT_TRIGGER_STYLES.chevron, open ? SELECT_TRIGGER_STYLES.chevronOpen : undefined), strokeColor: 'textSecondary' })] }));
+    return (jsxs("button", { type: 'button', role: 'combobox', ref: ref, className: SELECT_TRIGGER_VARIANTS({ size, status }), "data-open": open || undefined, "data-disabled": disabled || undefined, disabled: disabled, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, ...rest, children: [startIcon !== undefined && (jsx(Icon, { icon: startIcon, size: iconSize, strokeColor: 'textSecondary' })), jsx("span", { className: hasValue ? SELECT_TRIGGER_STYLES.value : SELECT_TRIGGER_STYLES.placeholder, children: children }), jsx(Icon, { icon: ChevronDownIcon, size: iconSize, className: cx(SELECT_TRIGGER_STYLES.chevron, open ? SELECT_TRIGGER_STYLES.chevronOpen : undefined), strokeColor: 'textSecondary' })] }));
 };
 SelectTrigger.displayName = 'SelectTrigger';
 
@@ -2205,6 +2239,7 @@ const useSelect = ({ id, ref, value, defaultValue, onChange, options, disabled,
     const fieldId = id ?? generatedId;
     const helperId = `${fieldId}-helper`;
     const menuId = `${fieldId}-menu`;
+    const labelId = `${fieldId}-label`;
     const triggerRef = useRef(null);
     const mergedRef = useMergedRefs(ref, triggerRef);
     const [open, setOpen] = useState(false);
@@ -2248,6 +2283,7 @@ const useSelect = ({ id, ref, value, defaultValue, onChange, options, disabled,
     const close = useCallback(() => setOpen(false), []);
     return {
         fieldId,
+        labelId,
         helperId,
         menuId,
         triggerRef,
@@ -2263,8 +2299,8 @@ const useSelect = ({ id, ref, value, defaultValue, onChange, options, disabled,
 };
 
 const Select = ({ ref, value, defaultValue, onChange, options, label, helperText, placeholder, size = 'md', status = 'default', disabled, required, width, id, }) => {
-    const { fieldId, helperId, menuId, triggerRef, mergedRef, open, toggle, close, currentValue, selectedOption, groupedOptions, handleSelect, } = useSelect({ id, ref, value, defaultValue, onChange, options, disabled });
-    return (jsxs(Stack, { flexDirection: 'column', gap: 'xs', style: { width: width ?? '100%' }, children: [label !== undefined && (jsxs(Text, { variant: 'label', fontSize: 'sm', fontWeight: 'medium', color: 'textSecondary', htmlFor: fieldId, children: [label, required && (jsx(Text, { variant: 'span', color: 'errorMain', "aria-hidden": true, children: ' *' }))] })), jsx(SelectTrigger, { ref: mergedRef, id: fieldId, size: size, status: status, open: open, hasValue: selectedOption !== undefined, disabled: disabled, required: required, "aria-haspopup": 'listbox', "aria-expanded": open, "aria-controls": menuId, "aria-invalid": status === 'error' || undefined, "aria-describedby": helperText !== undefined ? helperId : undefined, onClick: toggle, children: selectedOption !== undefined ? selectedOption.label : placeholder }), jsx(Menu, { open: open, onClose: close, anchorEl: triggerRef.current, id: menuId, children: Array.from(groupedOptions.entries()).map(([groupKey, groupOpts], groupIndex) => {
+    const { fieldId, labelId, helperId, menuId, triggerRef, mergedRef, open, toggle, close, currentValue, selectedOption, groupedOptions, handleSelect, } = useSelect({ id, ref, value, defaultValue, onChange, options, disabled });
+    return (jsxs(Stack, { flexDirection: 'column', gap: 'xs', style: { width: width ?? '100%' }, children: [label !== undefined && (jsxs(Text, { variant: 'label', fontSize: 'sm', fontWeight: 'medium', color: 'textSecondary', htmlFor: fieldId, id: labelId, children: [label, required && (jsx(Text, { variant: 'span', color: 'errorMain', "aria-hidden": true, children: ' *' }))] })), jsx(SelectTrigger, { ref: mergedRef, id: fieldId, size: size, status: status, open: open, hasValue: selectedOption !== undefined, disabled: disabled, "aria-haspopup": 'listbox', "aria-expanded": open, "aria-controls": menuId, "aria-labelledby": label !== undefined ? `${labelId} ${fieldId}` : undefined, "aria-required": required || undefined, "aria-invalid": status === 'error' || undefined, "aria-errormessage": status === 'error' && helperText !== undefined ? helperId : undefined, "aria-describedby": helperText !== undefined ? helperId : undefined, onClick: toggle, children: selectedOption !== undefined ? selectedOption.label : placeholder }), jsx(Menu, { open: open, onClose: close, anchorEl: triggerRef.current, id: menuId, "aria-labelledby": label !== undefined ? labelId : undefined, "aria-label": label === undefined ? placeholder : undefined, children: Array.from(groupedOptions.entries()).map(([groupKey, groupOpts], groupIndex) => {
                     const items = groupOpts.map((opt) => (jsx(Menu.Item, { label: opt.label, icon: opt.icon, selected: opt.value === currentValue, disabled: opt.disabled, onClick: () => handleSelect(opt.value) }, opt.value)));
                     return groupKey !== undefined ? (jsx(Menu.Group, { label: groupKey, divider: groupIndex > 0, children: items }, groupKey)) : (jsx(Menu.Group, { divider: groupIndex > 0, children: items }, '__ungrouped'));
                 }) }), helperText !== undefined && (jsx(FormHelperText, { id: helperId, status: status, children: helperText }))] }));
@@ -2432,7 +2468,7 @@ const useCheckbox = ({ id, ref, indeterminate = false }) => {
 const Checkbox = ({ ref, label, helperText, size = 'md', status = 'default', indeterminate = false, error, id, disabled, required, ...rest }) => {
     const resolvedStatus = error ? 'error' : status;
     const { checkboxId, helperId, mergedRef } = useCheckbox({ id, ref, indeterminate });
-    return (jsxs("div", { className: CHECKBOX_STYLES.wrapper, children: [jsxs("label", { htmlFor: checkboxId, className: CHECKBOX_ROOT_VARIANTS({ disabled: disabled ? 'true' : 'false' }), children: [jsx("input", { ref: mergedRef, id: checkboxId, type: 'checkbox', disabled: disabled, required: required, "aria-required": required || undefined, "aria-invalid": resolvedStatus === 'error' || undefined, "aria-describedby": helperText !== undefined ? helperId : undefined, className: CHECKBOX_INPUT_VARIANTS({
+    return (jsxs("div", { className: CHECKBOX_STYLES.wrapper, children: [jsxs("label", { htmlFor: checkboxId, className: CHECKBOX_ROOT_VARIANTS({ disabled: disabled ? 'true' : 'false' }), children: [jsx("input", { ref: mergedRef, id: checkboxId, type: 'checkbox', disabled: disabled, required: required, "aria-required": required || undefined, "aria-invalid": resolvedStatus === 'error' || undefined, "aria-describedby": helperText !== undefined ? helperId : undefined, "aria-errormessage": resolvedStatus === 'error' && helperText !== undefined ? helperId : undefined, className: CHECKBOX_INPUT_VARIANTS({
                             size,
                             status: resolvedStatus,
                             disabled: disabled ? 'true' : 'false',
@@ -2523,6 +2559,78 @@ const Grid = ({ display = 'grid', columns, rows, autoFlow, autoColumns, autoRows
 };
 Grid.displayName = 'Grid';
 
+const BREADCRUMB_STYLES = createStyles((_theme) => ({
+    nav: {
+        display: 'block',
+    },
+    list: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        listStyle: 'none',
+        margin: 0,
+        padding: 0,
+    },
+}), { id: 'breadcrumb' });
+
+const BreadcrumbContext = createContext({
+    separator: '/',
+});
+const useBreadcrumbContext = () => useContext(BreadcrumbContext);
+
+const BREADCRUMB_ITEM_STYLES = createStyles((theme) => ({
+    item: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        fontSize: theme.fontSize.sm,
+        lineHeight: theme.lineHeight.normal,
+    },
+    separator: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        marginLeft: theme.spacing.sm,
+        marginRight: theme.spacing.sm,
+        color: theme.colors.textTertiary,
+        userSelect: 'none',
+    },
+}), { id: 'breadcrumb-item' });
+
+const BreadcrumbItem = ({ label, href, onClick, current = false, isFirst = false, }) => {
+    const { separator } = useBreadcrumbContext();
+    return (jsxs("li", { className: BREADCRUMB_ITEM_STYLES.item, "aria-current": current ? 'page' : undefined, children: [!isFirst && (jsx("span", { "aria-hidden": true, className: BREADCRUMB_ITEM_STYLES.separator, children: separator })), current ? (jsx(Text, { variant: 'span', fontWeight: 'semibold', color: 'textPrimary', children: label })) : (jsx(Link, { href: href, onClick: onClick, color: 'secondary', underline: 'hover', children: label }))] }));
+};
+BreadcrumbItem.displayName = 'Breadcrumb.Item';
+
+/**
+ * WAI-ARIA compliant breadcrumb navigation using a compound component API.
+ *
+ * ```tsx
+ * <Breadcrumb separator='/'>
+ *     <Breadcrumb.Item label='Home' href='/' />
+ *     <Breadcrumb.Item label='Products' href='/products' />
+ *     <Breadcrumb.Item label='Laptop Pro X' current />
+ * </Breadcrumb>
+ * ```
+ *
+ * The last item is typically marked as `current` — it renders as bold text (non-clickable)
+ * and exposes `aria-current="page"` for assistive technologies.
+ */
+const BreadcrumbBase = ({ children, separator = '/', ariaLabel = 'Breadcrumb', }) => {
+    const contextValue = useMemo(() => ({ separator }), [separator]);
+    const items = Children.map(children, (child, index) => {
+        if (!isValidElement(child)) {
+            return child;
+        }
+        return cloneElement(child, {
+            isFirst: index === 0,
+        });
+    });
+    return (jsx(BreadcrumbContext.Provider, { value: contextValue, children: jsx("nav", { "aria-label": ariaLabel, className: BREADCRUMB_STYLES.nav, children: jsx("ol", { className: BREADCRUMB_STYLES.list, children: items }) }) }));
+};
+BreadcrumbBase.displayName = 'Breadcrumb';
+const Breadcrumb = BreadcrumbBase;
+Breadcrumb.Item = BreadcrumbItem;
+
 const DrawerContext = createContext({
     isExpanded: true,
 });
@@ -2878,6 +2986,234 @@ Drawer.Body = DrawerBody;
 Drawer.Footer = DrawerFooter;
 Drawer.Item = DrawerItem;
 
+const TABS_LIST_STYLES = createStyles(() => ({
+    root: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        overflowX: 'auto',
+        scrollbarWidth: 'none',
+        width: 'fit-content',
+        '::-webkit-scrollbar': { display: 'none' },
+    },
+}));
+
+const TabsContext = createContext(null);
+
+/**
+ * Internal hook — consumes the Tabs context and throws if used outside a `<Tabs>` provider.
+ * @internal
+ */
+const useTabsContext = () => {
+    const ctx = useContext(TabsContext);
+    if (!ctx) {
+        throw new Error('This component must be used inside a <Tabs> provider.');
+    }
+    return ctx;
+};
+
+const TabsList = ({ children, ariaLabel, ariaLabelledBy }) => {
+    const { value, setValue, baseId, getTabValues } = useTabsContext();
+    /**
+     * Returns true if the tab at the given index is aria-disabled.
+     * We check the DOM attribute because disabled state lives in TabItem,
+     * not in the shared context, and we want to avoid adding it to the context.
+     */
+    const isTabDisabled = (tabValue) => {
+        const el = document.getElementById(`${baseId}-tab-${tabValue}`);
+        return el?.getAttribute('aria-disabled') === 'true';
+    };
+    /**
+     * Moves focus to the nearest non-disabled tab starting from `startIndex`
+     * and stepping in the given `direction` (+1 = right, -1 = left).
+     * Stops after a full loop if all tabs are disabled.
+     */
+    const focusNextEnabled = (startIndex, direction) => {
+        const values = getTabValues();
+        for (let i = 1; i <= values.length; i++) {
+            const index = (startIndex + direction * i + values.length) % values.length;
+            const nextValue = values[index];
+            if (!isTabDisabled(nextValue)) {
+                document.getElementById(`${baseId}-tab-${nextValue}`)?.focus();
+                setValue(nextValue);
+                return;
+            }
+        }
+    };
+    const handleKeyDown = (event) => {
+        const values = getTabValues();
+        const currentIndex = values.indexOf(value);
+        if (currentIndex === -1) {
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                focusNextEnabled(currentIndex, 1);
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                focusNextEnabled(currentIndex, -1);
+                break;
+            case 'Home': {
+                event.preventDefault();
+                // Focus the first non-disabled tab
+                const firstIdx = values.findIndex((v) => !isTabDisabled(v));
+                if (firstIdx !== -1) {
+                    document.getElementById(`${baseId}-tab-${values[firstIdx]}`)?.focus();
+                    setValue(values[firstIdx]);
+                }
+                break;
+            }
+            case 'End': {
+                event.preventDefault();
+                // Focus the last non-disabled tab
+                const lastIdx = [...values].reverse().findIndex((v) => !isTabDisabled(v));
+                if (lastIdx !== -1) {
+                    const realIndex = values.length - 1 - lastIdx;
+                    document.getElementById(`${baseId}-tab-${values[realIndex]}`)?.focus();
+                    setValue(values[realIndex]);
+                }
+                break;
+            }
+        }
+    };
+    return (jsx("div", { role: 'tablist', "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: TABS_LIST_STYLES.root, onKeyDown: handleKeyDown, children: children }));
+};
+TabsList.displayName = 'Tabs.List';
+
+const TABS_PANEL_STYLES = createStyles(() => ({
+    root: {
+        width: '100%',
+    },
+}));
+
+const TabsPanel = ({ value, children, keepMounted = false }) => {
+    const { value: activeValue, baseId } = useTabsContext();
+    const isActive = activeValue === value;
+    if (!isActive && !keepMounted) {
+        return null;
+    }
+    return (jsx("div", { role: 'tabpanel', id: `${baseId}-panel-${value}`, "aria-labelledby": `${baseId}-tab-${value}`, 
+        // WAI-ARIA APG: tabIndex={0} allows keyboard scrolling when the panel has no focusable child.
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex: 0, hidden: !isActive, className: TABS_PANEL_STYLES.root, children: children }));
+};
+TabsPanel.displayName = 'Tabs.Panel';
+
+const TAB_ITEM_STYLES = createStyles((theme) => ({
+    root: ({ isActive, disabled }) => ({
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        boxSizing: 'border-box',
+        paddingTop: theme.spacing.xs,
+        paddingBottom: theme.spacing.xs,
+        paddingLeft: theme.spacing.md,
+        paddingRight: theme.spacing.md,
+        border: 'none',
+        borderBottom: `2px solid ${isActive ? theme.colors.primaryMain : 'transparent'}`,
+        background: 'transparent',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        fontFamily: 'inherit',
+        whiteSpace: 'nowrap',
+        transition: `border-color ${theme.transition.fast}`,
+        ...(disabled ? {} : {
+            ':hover': {
+                borderBottomColor: isActive ? theme.colors.primaryMain : theme.colors.textTertiary,
+            },
+        }),
+        ':focus-visible': {
+            outline: `2px solid ${theme.colors.primaryMain}`,
+            outlineOffset: '2px',
+        },
+    }),
+}));
+
+/**
+ * Handles tab registration, active state derivation and interaction props
+ * for a single `Tabs.Tab` (TabItem) button.
+ *
+ * Registers the tab value into the shared ordered registry on mount so that
+ * `TabsList` can perform correct ArrowLeft/Right/Home/End keyboard navigation.
+ */
+const useTabItem = ({ value, disabled }) => {
+    const { value: activeValue, setValue, baseId, registerTab } = useTabsContext();
+    // Maintains the ordered tab registry used by TabsList for keyboard navigation.
+    useEffect(() => registerTab(value), [registerTab, value]);
+    const isActive = activeValue === value;
+    return {
+        isActive,
+        buttonProps: {
+            id: `${baseId}-tab-${value}`,
+            'aria-selected': isActive,
+            'aria-controls': `${baseId}-panel-${value}`,
+            'aria-disabled': disabled || undefined,
+            tabIndex: isActive ? 0 : -1,
+            onClick: () => {
+                if (!disabled) {
+                    setValue(value);
+                }
+            },
+        },
+    };
+};
+
+const TabItem = ({ value, label, disabled = false }) => {
+    const { isActive, buttonProps } = useTabItem({ value, disabled });
+    return (jsx("button", { type: 'button', role: 'tab', className: TAB_ITEM_STYLES.root({ isActive, disabled }), ...buttonProps, children: jsx(Text, { variant: 'span', fontSize: 'sm', fontWeight: isActive ? 'semibold' : 'medium', color: disabled ? 'textDisabled' : isActive ? 'textPrimary' : 'textSecondary', children: label }) }));
+};
+TabItem.displayName = 'Tabs.Tab';
+
+/**
+ * WAI-ARIA compliant tab interface using a compound component API.
+ *
+ * ```tsx
+ * <Tabs defaultValue={'active'} onChange={handleChange}>
+ *     <Tabs.List ariaLabel={'Subscriptions'}>
+ *         <Tabs.Tab value={'active'} label={'Active'} />
+ *         <Tabs.Tab value={'cancelled'} label={'Cancelled'} />
+ *     </Tabs.List>
+ *     <Tabs.Panel value={'active'}>...</Tabs.Panel>
+ *     <Tabs.Panel value={'cancelled'}>...</Tabs.Panel>
+ * </Tabs>
+ * ```
+ *
+ * Supports controlled (`value` + `onChange`) and uncontrolled (`defaultValue`) modes.
+ * Keyboard navigation: `ArrowLeft/Right`, `Home`, `End`.
+ * Only the active panel is mounted — use `keepMounted` on `Tabs.Panel` to preserve state across switches.
+ */
+const TabsBase = ({ children, value: controlledValue, defaultValue, onChange, id, }) => {
+    const reactId = useId();
+    const baseId = id ?? `tabs-${reactId}`;
+    const [internalValue, setInternalValue] = useState(defaultValue ?? '');
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : internalValue;
+    const tabsRef = useRef([]);
+    const registerTab = useCallback((tabValue) => {
+        if (!tabsRef.current.includes(tabValue)) {
+            tabsRef.current.push(tabValue);
+        }
+        return () => {
+            tabsRef.current = tabsRef.current.filter((v) => v !== tabValue);
+        };
+    }, []);
+    const getTabValues = useCallback(() => tabsRef.current, []);
+    const setValue = useCallback((next) => {
+        if (!isControlled) {
+            setInternalValue(next);
+        }
+        onChange?.(next);
+    }, [isControlled, onChange]);
+    const contextValue = useMemo(() => ({ value, setValue, baseId, registerTab, getTabValues }), [value, setValue, baseId, registerTab, getTabValues]);
+    return (jsx(TabsContext.Provider, { value: contextValue, children: children }));
+};
+TabsBase.displayName = 'Tabs';
+const Tabs = TabsBase;
+Tabs.List = TabsList;
+Tabs.Tab = TabItem;
+Tabs.Panel = TabsPanel;
+
 const AlertContext = createContext({
     variant: 'default',
     accentColor: 'defaultActive',
@@ -2930,6 +3266,15 @@ const VARIANT_ARIA_LIVE = {
     warning: 'polite',
     info: 'polite',
 };
+/** role="alert" implies aria-live="assertive" — reserve it for errors.
+ *  Other variants use role="status" (implies aria-live="polite"). */
+const VARIANT_ROLE = {
+    default: 'status',
+    success: 'status',
+    error: 'alert',
+    warning: 'status',
+    info: 'status',
+};
 /**
  * Inline alert banner with 5 visual variants: default, success, error, warning, info.
  * Use `Alert.Title` (icon + heading) and `Alert.Body` (message) as children.
@@ -2942,7 +3287,7 @@ const VARIANT_ARIA_LIVE = {
  */
 const AlertBase = ({ variant = 'default', children, width = '100%', outline = false, shadow = 'none', }) => {
     const { backgroundColor, borderColor, accentColor } = VARIANT_TOKENS[variant];
-    return (jsx(AlertContext.Provider, { value: { variant, accentColor }, children: jsx(Stack, { role: 'alert', "aria-live": VARIANT_ARIA_LIVE[variant], flexDirection: 'column', gap: 'xs', padding: 'md', borderRadius: 'lg', backgroundColor: backgroundColor, borderColor: outline ? borderColor : undefined, borderWidth: outline ? '1px' : undefined, borderStyle: outline ? 'solid' : undefined, boxShadow: shadow, width: width, children: children }) }));
+    return (jsx(AlertContext.Provider, { value: { variant, accentColor }, children: jsx(Stack, { role: VARIANT_ROLE[variant], "aria-live": VARIANT_ARIA_LIVE[variant], flexDirection: 'column', gap: 'xs', padding: 'md', borderRadius: 'lg', backgroundColor: backgroundColor, borderColor: outline ? borderColor : undefined, borderWidth: outline ? '1px' : undefined, borderStyle: outline ? 'solid' : undefined, boxShadow: shadow, width: width, children: children }) }));
 };
 AlertBase.displayName = 'Alert';
 const Alert = AlertBase;
@@ -3109,7 +3454,7 @@ const useDialog = ({ open, onClose, closeOnBackdropClick, maxWidth, maxHeight, m
  */
 const DialogHeader = ({ title, onClose }) => {
     const { titleId, CloseIconComponent } = useContext(DialogContext);
-    return (jsxs(Stack, { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 'md', paddingTop: 'md', paddingBottom: 'md', paddingLeft: 'lg', paddingRight: 'md', flexShrink: 0, children: [jsx(Text, { id: titleId, variant: 'span', fontSize: 'md', fontWeight: 'semibold', color: 'textPrimary', children: title }), jsx(IconButton, { icon: CloseIconComponent, ariaLabel: 'Close dialog', variant: 'text', color: 'neutral', size: 'sm', type: 'button', onClick: onClose })] }));
+    return (jsxs(Stack, { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 'md', paddingTop: 'md', paddingBottom: 'md', paddingLeft: 'lg', paddingRight: 'md', flexShrink: 0, children: [jsx(Text, { id: titleId, variant: 'span', as: 'h2', fontSize: 'md', fontWeight: 'semibold', color: 'textPrimary', children: title }), jsx(IconButton, { icon: CloseIconComponent, ariaLabel: 'Close dialog', variant: 'text', color: 'neutral', size: 'sm', type: 'button', onClick: onClose })] }));
 };
 DialogHeader.displayName = 'Dialog.Header';
 
@@ -3537,5 +3882,5 @@ const darkTheme = createTheme({
     breakpoints: themeBreakpoints,
 });
 
-export { Alert, Backdrop, Badge, Box, Button, Card, Checkbox, Dialog, Drawer, Form, Grid, Icon, IconButton, InfoBubble, Link, Menu, Select, Skeleton, Stack, Switch, Text, TextField, Tooltip, darkTheme, lightTheme, useDrawerContext };
+export { Alert, Backdrop, Badge, Box, Breadcrumb, Button, Card, Checkbox, Dialog, Drawer, Form, Grid, Icon, IconButton, InfoBubble, Link, Menu, Select, Skeleton, Stack, Switch, Tabs, Text, TextField, Tooltip, darkTheme, lightTheme, useDrawerContext };
 //# sourceMappingURL=index.js.map