@aurora-ds/components 1.1.7 → 1.2.0

package/dist/esm/index.js

@@ -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';
 
@@ -683,12 +683,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', 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 +704,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 }), 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 +1775,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 +1910,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 +1935,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 +1997,7 @@ const useMenu = ({ open, onClose, anchorEl, minWidth }) => {
             }
         },
     }, { enabled: open });
-    return { panelRef, style };
+    return { panelRef, style, activeDescendant };
 };
 
 const MENU_GROUP_STYLES = createStyles((theme) => {
@@ -2011,7 +2038,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 +2090,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 +2217,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 +2233,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 +2277,7 @@ const useSelect = ({ id, ref, value, defaultValue, onChange, options, disabled,
     const close = useCallback(() => setOpen(false), []);
     return {
         fieldId,
+        labelId,
         helperId,
         menuId,
         triggerRef,
@@ -2263,8 +2293,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 +2462,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',
@@ -2930,6 +2960,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 +2981,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 +3148,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';