@womp/kookie-ui 0.22.1 → 0.24.0

package/src/components/_internal/base-button.tsx

@@ -6,7 +6,7 @@ import { useComposedRefs, useLayoutEffect } from 'radix-ui/internal';
 import { baseButtonPropDefs } from './base-button.props.js';
 import { Flex } from '../flex.js';
 import { Spinner } from '../spinner.js';
-import { VisuallyHidden } from '../visually-hidden.js';
+import { TickIcon } from '../icons.js';
 import { extractProps } from '../../helpers/extract-props.js';
 import { useThemeSizeProps } from '../../helpers/theme-size.js';
 
@@ -25,7 +25,19 @@ type PolymorphicBaseButtonProps<C extends React.ElementType = 'button'> = {
   /** Element type to render as (e.g., 'a', 'span', etc.) */
   as?: C;
 } & BaseButtonOwnProps &
-  ComponentPropsWithout<C, RemovedProps | keyof BaseButtonOwnProps | 'as'>;
+  BaseButtonDoneProps &
+  ComponentPropsWithout<C, RemovedProps | keyof BaseButtonOwnProps | 'as' | 'done'>;
+
+interface BaseButtonDoneProps {
+  /**
+   * Shows a tick in place of the icon to say that the action finished. The tick takes the
+   * icon's box, so nothing moves, and the icon comes back as soon as `done` is false again. On
+   * an `iconOnly` button the tick replaces the content. It doesn't block the press. Screen
+   * readers don't announce the tick, so also change the label or `aria-label` (for example,
+   * `Copy` to `Copied`).
+   */
+  done?: boolean;
+}
 
 /**
  * BaseButton props interface that combines all available props
@@ -68,6 +80,7 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
     color,
     radius,
     disabled: nativeDisabled,
+    done = false,
     ...baseButtonProps
   } = extractProps(props, baseButtonPropDefs);
 
@@ -102,13 +115,7 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
     const content =
       asChild && React.isValidElement(children) ? (children.props as { children?: React.ReactNode }).children : children;
     // Fragments are see-through: their own first and last children are the edges.
-    const flatten = (nodes: React.ReactNode): React.ReactNode[] =>
-      React.Children.toArray(nodes).flatMap((node) =>
-        React.isValidElement(node) && node.type === React.Fragment
-          ? flatten((node.props as { children?: React.ReactNode }).children)
-          : [node],
-      );
-    const items = flatten(content);
+    const items = flattenFragments(content);
     const isIcon = (node: React.ReactNode) => React.isValidElement(node) && node.type === 'svg';
     return { iconStart: isIcon(items[0]), iconEnd: isIcon(items[items.length - 1]) };
   }, [asChild, children]);
@@ -117,14 +124,35 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
   const composedRef = useComposedRefs(forwardedRef, elementRef as React.Ref<BaseButtonElement>);
   useLayoutEffect(() => {
     const element = elementRef.current;
-    // While loading the label sits in a wrapper; keep the edges read before it.
-    if (!element || loading) return;
+    // While loading the label sits in a wrapper, and while done the tick stands at the start;
+    // keep the edges read before either.
+    if (!element || loading || done) return;
     const iconStart = edgeIsSvg(element, 'start');
     const iconEnd = edgeIsSvg(element, 'end');
     setDomEdges((prev) => (prev && prev.iconStart === iconStart && prev.iconEnd === iconEnd ? prev : { iconStart, iconEnd }));
   });
   const { iconStart, iconEnd } = domEdges ?? childEdges;
 
+  // Done swaps the icon for a tick in the same place: the leading icon when there is one, the
+  // whole content on an icon-only button. Without a leading icon the tick goes before the label.
+  const iconOnly = Boolean((baseButtonProps as Record<string, unknown>)['data-icon-only']);
+  const content = React.useMemo(() => {
+    if (!done) return children;
+    const tick = <TickIcon key="kui-done-tick" className="kui-BaseButtonTick" aria-hidden />;
+    const swap = (nodes: React.ReactNode): React.ReactNode => {
+      if (iconOnly) return tick;
+      const items = flattenFragments(nodes);
+      const first = items.findIndex((node) => !(typeof node === 'string' && !node.trim()));
+      if (iconStart && first !== -1) return items.map((node, index) => (index === first ? tick : node));
+      return [tick, ...items];
+    };
+    if (asChild && React.isValidElement(children)) {
+      const element = children as React.ReactElement<{ children?: React.ReactNode }>;
+      return React.cloneElement(element, undefined, swap(element.props.children));
+    }
+    return swap(children);
+  }, [done, children, iconOnly, iconStart, asChild]);
+
   // asChild takes precedence over as prop for Radix Slot integration
   // When asChild is true, we use Slot.Root to merge props onto the child element
   // When asChild is false, we render as the specified element (or button by default)
@@ -168,6 +196,7 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
       data-radius={radius}
       data-icon-start={iconStart || undefined}
       data-icon-end={iconEnd || undefined}
+      data-done={done || undefined}
       {...baseButtonProps}
       {...accessibilityProps}
       // After the spread: `data-disabled` styles `<Button asChild disabled>`, and a wrapping
@@ -186,19 +215,20 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
            * The button is a flex container with a `gap`, so we use `display: contents` to ensure the correct flex layout.
            *
            * However, `display: contents` removes the content from the accessibility tree in some browsers,
-           * so we force remove it with `aria-hidden` and re-add it in the tree with `VisuallyHidden`
+           * so we force remove it with `aria-hidden` and re-add it in the tree with a `kui-sr-only` copy.
+           * Both are classes, not style attributes, so a loading button carries no inline style.
            */}
-          <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>
-            {children}
+          <span className="kui-BaseButtonContent" aria-hidden>
+            {content}
           </span>
 
           {/* The label stays the name; the hidden "Loading" only describes (aria-describedby reads hidden text). */}
-          <VisuallyHidden>
+          <span className="kui-sr-only">
             <span id={describedById} aria-hidden>
               Loading
             </span>
             {children}
-          </VisuallyHidden>
+          </span>
 
           {/* Centered spinner overlay during loading state */}
           <Flex asChild align="center" justify="center" position="absolute" inset="0">
@@ -208,13 +238,22 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
           </Flex>
         </>
       ) : (
-        children
+        content
       )}
     </Comp>
   );
 });
 BaseButton.displayName = 'BaseButton';
 
+/** The child list with fragments opened up: a fragment's own children are the edges. */
+function flattenFragments(nodes: React.ReactNode): React.ReactNode[] {
+  return React.Children.toArray(nodes).flatMap((node) =>
+    React.isValidElement(node) && node.type === React.Fragment
+      ? flattenFragments((node.props as { children?: React.ReactNode }).children)
+      : [node],
+  );
+}
+
 /** Whether the first or last rendered node of `element` (blank text and comments skipped) is an svg. */
 function edgeIsSvg(element: Element, edge: 'start' | 'end'): boolean {
   let node = edge === 'start' ? element.firstChild : element.lastChild;

package/src/components/_internal/base-sidebar-menu.css

@@ -185,3 +185,11 @@
   margin-top: 1px;
   margin-bottom: 1px;
 }
+
+/* A sub-menu's rows are list items, so their list is a list. Zero specificity: only the UA's
+   list indent is removed. */
+:where(.kui-SidebarMenuSubList) {
+  list-style: none;
+  margin-block: 0;
+  padding: 0;
+}

package/src/components/_internal/menu-context.tsx

@@ -61,3 +61,14 @@ export function MenuProvider({ children, size }: MenuProviderProps) {
 export function useMenuContext() {
   return React.useContext(MenuContext);
 }
+
+/**
+ * Closes the whole menu from inside it. DropdownMenu.Root and ContextMenu.Root provide it,
+ * so a VirtualMenu row can close the menu on select the way a menu item does.
+ */
+const MenuCloseContext = React.createContext<(() => void) | undefined>(undefined);
+export const MenuCloseProvider = MenuCloseContext.Provider;
+
+export function useMenuClose() {
+  return React.useContext(MenuCloseContext);
+}

package/src/components/_internal/pane-chrome.tsx

@@ -13,6 +13,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 import { ScrollArea } from '../scroll-area.js';
+import { ShellStoreContext } from './shell-store.js';
 
 type PaneSize = '1' | '2' | '3';
 
@@ -33,6 +34,13 @@ function useSidebarVisual() {
 /** The Shell's index. `Shell.Root size` sets it; panes hand it to their chrome. */
 const ShellSizeContext = React.createContext<PaneSize>('2');
 
+/**
+ * True inside `Shell.Content`. `Shell.Root` sets it back to false, so a Shell nested in the
+ * content gets pane chrome in its own panes. Read by `Shell.Scroll`: in the content it holds a
+ * page, not a menu, so it takes none of the menu's padding, gap or layering.
+ */
+const ShellContentContext = React.createContext(false);
+
 /**
  * Gives a Shell pane's children the Shell's index, so Sidebar parts size themselves. In a Rail
  * the rows are `thin`: icon tiles with a small label, sub-menus as dropdowns.
@@ -60,12 +68,11 @@ type BandSize = '1' | '2' | '3' | '4';
  */
 const BAND_STEP = { '1': '2', '2': '3', '3': '4', '4': '4' } as const satisfies Record<BandSize, BandSize>;
 
-/** Set by `Shell.PaneHeader` and `Shell.PaneFooter`; read by Toolbar as its fallback size. Null elsewhere. */
-const PaneBandSizeContext = React.createContext<BandSize | null>(null);
-
-function usePaneBandSize() {
-  return React.useContext(PaneBandSizeContext);
-}
+/**
+ * Set by `Shell.PaneHeader` and `Shell.PaneFooter` to their band size, and by `Shell.Scroll` to
+ * null (a scrolling list has no band). Unset (`undefined`) everywhere else.
+ */
+const PaneBandSizeContext = React.createContext<BandSize | null | undefined>(undefined);
 
 function useBandSize(): BandSize {
   const visual = useSidebarVisual();
@@ -73,6 +80,22 @@ function useBandSize(): BandSize {
   return BAND_STEP[visual?.size ?? shellSize];
 }
 
+/**
+ * The size a Toolbar with no `size` of its own rests at, or null for none.
+ *
+ * In a pane's header or footer it is that band's size. Anywhere else inside a Shell, such as
+ * `Shell.Content` or a pane's body, it is the same step: one above the Shell's index, so a
+ * toolbar in the content area matches the ones in the pane headers beside it (v2 sizes every
+ * toolbar this way). A pane's scrolling list, and anything outside a Shell, has none.
+ */
+function usePaneBandSize(): BandSize | null {
+  const band = React.useContext(PaneBandSizeContext);
+  const inShell = React.useContext(ShellStoreContext) !== null;
+  const step = useBandSize();
+  if (band !== undefined) return band;
+  return inShell ? step : null;
+}
+
 interface PaneHeaderProps extends React.ComponentPropsWithoutRef<'div'> {
   /**
    * Floats the row over the top of `Shell.Scroll`, so the list scrolls behind it. The list
@@ -129,10 +152,24 @@ interface ScrollProps extends React.ComponentPropsWithoutRef<'div'> {
 
 /**
  * The one region of a pane that scrolls; it takes the room the header and footer leave.
- * It is not a landmark: for navigation, pass `role="navigation"` and an `aria-label`.
+ * In `Shell.Content` it is the page's scroller, and a `Shell.PaneHeader float` beside it pins
+ * the page's toolbar over it. It is not a landmark: for navigation, pass `role="navigation"` and an `aria-label`.
  */
 const Scroll = React.forwardRef<HTMLDivElement, ScrollProps>(({ className, children, fade = false, ...props }, forwardedRef) => {
   const chrome = useChromeClasses();
+  // A Sidebar.Root inside the content still gets a menu.
+  const contentPane = React.useContext(ShellContentContext);
+  const visual = useSidebarVisual();
+  const inContent = contentPane && visual === null;
+  if (inContent) {
+    return (
+      <ScrollArea type="hover" fade={fade} className="kui-ShellScroll">
+        <div {...props} ref={forwardedRef} className={classNames('kui-ShellScrollContent', className)}>
+          {children}
+        </div>
+      </ScrollArea>
+    );
+  }
   return (
     <ScrollArea type="hover" fade={fade} className="kui-ShellScroll">
       <div {...props} ref={forwardedRef} className={classNames('kui-BaseMenuContent', 'kui-SidebarContent', ...chrome, className)}>
@@ -146,5 +183,5 @@ const Scroll = React.forwardRef<HTMLDivElement, ScrollProps>(({ className, child
 });
 Scroll.displayName = 'Shell.Scroll';
 
-export { SidebarVisualContext, useSidebarVisual, ShellSizeContext, PaneChromeScope, PaneHeader, PaneFooter, Scroll, BAND_STEP, usePaneBandSize };
+export { SidebarVisualContext, useSidebarVisual, ShellSizeContext, ShellContentContext, PaneChromeScope, PaneHeader, PaneFooter, Scroll, BAND_STEP, usePaneBandSize };
 export type { SidebarVisualContextValue, PaneSize, BandSize, PaneHeaderProps, PaneFooterProps, ScrollProps };

package/src/components/accordion.css

@@ -12,13 +12,13 @@
       border-radius: var(--radius-surface-1);
     }
     &:where(.kui-r-size-2) {
-      border-radius: var(--radius-surface-1);
+      border-radius: var(--radius-surface-2);
     }
     &:where(.kui-r-size-3) {
-      border-radius: var(--radius-surface-1);
+      border-radius: var(--radius-surface-3);
     }
     &:where(.kui-r-size-4) {
-      border-radius: var(--radius-surface-1);
+      border-radius: var(--radius-surface-4);
     }
   }
 }
@@ -100,6 +100,38 @@
   font-size: var(--font-size-4);
 }
 
+/* Disclosure chevron: at the far end of the trigger, turned up while the section is open */
+.kui-AccordionChevron {
+  flex-shrink: 0;
+  width: var(--icon-size-2);
+  height: var(--icon-size-2);
+  margin-inline-start: var(--space-3);
+  color: var(--neutral-a11);
+}
+
+:where(.kui-AccordionTrigger[data-state='open']) .kui-AccordionChevron {
+  rotate: 180deg;
+}
+
+:where(.kui-AccordionRoot:where(.kui-r-size-1)) .kui-AccordionChevron {
+  width: var(--icon-size-1);
+  height: var(--icon-size-1);
+}
+
+:where(.kui-AccordionRoot:where(.kui-r-size-3)) .kui-AccordionChevron {
+  width: var(--icon-size-3);
+  height: var(--icon-size-3);
+}
+
+:where(.kui-AccordionRoot:where(.kui-r-size-4)) .kui-AccordionChevron {
+  width: var(--icon-size-4);
+  height: var(--icon-size-4);
+}
+
+:where(.kui-AccordionTrigger[data-disabled]) .kui-AccordionChevron {
+  color: inherit;
+}
+
 /* Trigger hover states */
 @media (hover: hover) {
   :where(.kui-AccordionTrigger:hover) {
@@ -186,7 +218,6 @@
   color: var(--accent-ink);
   line-height: var(--line-height-4);
   transform-origin: top;
-  will-change: height, opacity, transform;
 }
 
 .kui-AccordionContentInner {

package/src/components/accordion.tsx

@@ -9,6 +9,8 @@ import {
   accordionTriggerPropDefs,
   accordionContentPropDefs,
 } from './accordion.props.js';
+import { ChevronDownIcon } from './icons.js';
+import { Slottable } from './slot.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSizeProps } from '../helpers/theme-size.js';
 
@@ -23,9 +25,13 @@ import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-p
 
 // Root component
 type AccordionRootElement = React.ElementRef<typeof AccordionPrimitive.Root>;
-interface AccordionRootProps
-  extends ComponentPropsWithout<typeof AccordionPrimitive.Root, RemovedProps>,
-    AccordionRootOwnProps {}
+// Radix's Root props are a union of single and multiple. Omit each member on its own, so
+// `defaultValue`, `value` and `collapsible` survive with the right type for each `type`.
+type AccordionRootRadixProps =
+  | Omit<AccordionPrimitive.AccordionSingleProps, 'asChild' | 'color'>
+  | Omit<AccordionPrimitive.AccordionMultipleProps, 'asChild' | 'color'>;
+
+type AccordionRootProps = AccordionRootRadixProps & AccordionRootOwnProps;
 
 const AccordionRoot = React.forwardRef<AccordionRootElement, AccordionRootProps>(
   (ownProps, forwardedRef) => {
@@ -133,23 +139,14 @@ const AccordionTrigger = React.forwardRef<AccordionTriggerElement, AccordionTrig
   ({ children, ...props }, forwardedRef) => {
     const { className, ...triggerProps } = extractProps(props, accordionTriggerPropDefs);
 
-    // Radix UI handles focus management automatically
-    const triggerRef = React.useRef<HTMLButtonElement>(null);
-
     return (
       <AccordionPrimitive.Trigger
         {...triggerProps}
-        ref={(node) => {
-          triggerRef.current = node;
-          if (typeof forwardedRef === 'function') {
-            forwardedRef(node);
-          } else if (forwardedRef) {
-            forwardedRef.current = node;
-          }
-        }}
+        ref={forwardedRef}
         className={classNames('kui-AccordionTrigger', className)}
       >
-        {children}
+        <Slottable>{children}</Slottable>
+        <ChevronDownIcon className="kui-AccordionChevron" aria-hidden />
       </AccordionPrimitive.Trigger>
     );
   },
@@ -171,7 +168,6 @@ const AccordionContent = React.forwardRef<AccordionContentElement, AccordionCont
         {...contentProps}
         ref={forwardedRef}
         className={classNames('kui-AccordionContent', className)}
-        aria-live="polite"
       >
         <div className="kui-AccordionContentInner">{children}</div>
       </AccordionPrimitive.Content>

package/src/components/alert-dialog.tsx

@@ -11,172 +11,76 @@ import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 
 import type { AlertDialogContentOwnProps } from './alert-dialog.props.js';
-import type {
-  ComponentPropsWithout,
-  RemovedProps,
-  ComponentPropsAs,
-} from '../helpers/component-props.js';
+import type { ComponentPropsWithout, RemovedProps, ComponentPropsAs } from '../helpers/component-props.js';
 
-interface AlertDialogRootProps
-  extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root> {}
-const AlertDialogRoot: React.FC<AlertDialogRootProps> = (props) => (
-  <AlertDialogPrimitive.Root {...props} />
-);
+interface AlertDialogRootProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root> {}
+const AlertDialogRoot: React.FC<AlertDialogRootProps> = (props) => <AlertDialogPrimitive.Root {...props} />;
 AlertDialogRoot.displayName = 'AlertDialog.Root';
 
 type AlertDialogTriggerElement = React.ElementRef<typeof AlertDialogPrimitive.Trigger>;
-interface AlertDialogTriggerProps
-  extends ComponentPropsWithout<typeof AlertDialogPrimitive.Trigger, RemovedProps> {}
-const AlertDialogTrigger = React.forwardRef<AlertDialogTriggerElement, AlertDialogTriggerProps>(
-  ({ children, ...props }, forwardedRef) => (
-    <AlertDialogPrimitive.Trigger {...props} ref={forwardedRef} asChild>
-      {requireReactElement(children)}
-    </AlertDialogPrimitive.Trigger>
-  ),
-);
+interface AlertDialogTriggerProps extends ComponentPropsWithout<typeof AlertDialogPrimitive.Trigger, RemovedProps> {}
+const AlertDialogTrigger = React.forwardRef<AlertDialogTriggerElement, AlertDialogTriggerProps>(({ children, ...props }, forwardedRef) => (
+  <AlertDialogPrimitive.Trigger {...props} ref={forwardedRef} asChild>
+    {requireReactElement(children)}
+  </AlertDialogPrimitive.Trigger>
+));
 AlertDialogTrigger.displayName = 'AlertDialog.Trigger';
 
 // Split once at module scope. `extractProps` memoises on the identity of the
 // prop def objects it is handed, so rebuilding these per render would recompile
 // them on every render.
-const {
-  align: alignPropDef,
-  ...contentPropDefs
-} = alertDialogContentPropDefs;
+const { align: alignPropDef, ...contentPropDefs } = alertDialogContentPropDefs;
 const alignPropDefs = { align: alignPropDef };
 
 type AlertDialogContentElement = React.ElementRef<typeof AlertDialogPrimitive.Content>;
-interface AlertDialogContentProps
-  extends ComponentPropsWithout<typeof AlertDialogPrimitive.Content, RemovedProps>,
-    AlertDialogContentOwnProps {
+interface AlertDialogContentProps extends ComponentPropsWithout<typeof AlertDialogPrimitive.Content, RemovedProps>, AlertDialogContentOwnProps {
   container?: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Portal>['container'];
 }
-const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDialogContentProps>(
-  ({ align, ...ownProps }, forwardedRef) => {
-    const props = useThemeSizeProps(ownProps, contentPropDefs.size);
-    const { className: alignClassName } = extractProps({ align }, alignPropDefs);
-
-    const {
-      className,
-      forceMount,
-      container,
-      ...contentProps
-    } = extractProps(props, contentPropDefs);
-
-    // Focus management
-    const contentRef = React.useRef<HTMLDivElement>(null);
-    const combinedRef = React.useMemo(
-      () => (node: HTMLDivElement | null) => {
-        contentRef.current = node;
-        if (typeof forwardedRef === 'function') {
-          forwardedRef(node);
-        } else if (forwardedRef) {
-          forwardedRef.current = node;
-        }
-      },
-      [forwardedRef],
-    );
-
-    // Focus trap effect
-    React.useEffect(() => {
-      // SSR safety - only run on client
-      if (typeof window === 'undefined') return;
-
-      const content = contentRef.current;
-      if (!content) return;
-
-      const focusableElements = content.querySelectorAll(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
-      );
-
-      if (focusableElements.length === 0) return;
-
-      const firstElement = focusableElements[0] as HTMLElement;
-      const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
-
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if (event.key === 'Tab') {
-          if (event.shiftKey) {
-            if (document.activeElement === firstElement) {
-              event.preventDefault();
-              lastElement.focus();
-            }
-          } else {
-            if (document.activeElement === lastElement) {
-              event.preventDefault();
-              firstElement.focus();
-            }
-          }
-        }
-      };
-
-      content.addEventListener('keydown', handleKeyDown);
-
-      // Focus first element when dialog opens
-      firstElement.focus();
-
-      return () => {
-        content.removeEventListener('keydown', handleKeyDown);
-      };
-    }, []);
-
-    return (
-      <AlertDialogPrimitive.Portal container={container} forceMount={forceMount}>
-        <Theme asChild>
-          <AlertDialogPrimitive.Overlay className="kui-BaseDialogOverlay kui-AlertDialogOverlay">
-            <div className="kui-BaseDialogScroll kui-AlertDialogScroll">
-              <div
-                className={`kui-BaseDialogScrollPadding kui-AlertDialogScrollPadding ${alignClassName}`}
-              >
-                <AlertDialogPrimitive.Content
-                  {...contentProps}
-                  ref={combinedRef}
-                  className={classNames('kui-BaseDialogContent', 'kui-AlertDialogContent', className)}
-                  tabIndex={-1}
-                  role="alertdialog"
-                  aria-modal="true"
-                  aria-describedby="alert-dialog-description"
-                  onCloseAutoFocus={(event) => {
-                    // Prevent default focus behavior
-                    event.preventDefault();
-                    // Restore pointer-events to body (Radix UI fix for issue #1241)
-                    document.body.style.pointerEvents = '';
-                  }}
-                />
-                {/* ARIA live region for screen reader announcements */}
-                <div
-                  aria-live="assertive"
-                  aria-atomic="true"
-                  className="kui-sr-only"
-                  id="alert-dialog-announcement"
-                />
-              </div>
+const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDialogContentProps>(({ align, ...ownProps }, forwardedRef) => {
+  const props = useThemeSizeProps(ownProps, contentPropDefs.size);
+  const { className: alignClassName } = extractProps({ align }, alignPropDefs);
+
+  const { className, forceMount, container, onCloseAutoFocus, ...contentProps } = extractProps(props, contentPropDefs);
+
+  return (
+    <AlertDialogPrimitive.Portal container={container} forceMount={forceMount}>
+      <Theme asChild>
+        <AlertDialogPrimitive.Overlay className="kui-BaseDialogOverlay kui-AlertDialogOverlay">
+          <div className="kui-BaseDialogScroll kui-AlertDialogScroll">
+            <div className={`kui-BaseDialogScrollPadding kui-AlertDialogScrollPadding ${alignClassName}`}>
+              <AlertDialogPrimitive.Content
+                {...contentProps}
+                ref={forwardedRef}
+                className={classNames('kui-BaseDialogContent', 'kui-AlertDialogContent', className)}
+                aria-modal="true"
+                onCloseAutoFocus={(event) => {
+                  // Radix returns focus to the trigger unless the caller prevents it.
+                  onCloseAutoFocus?.(event);
+                  // Restore pointer-events to body (Radix UI fix for issue #1241)
+                  document.body.style.pointerEvents = '';
+                }}
+              />
             </div>
-          </AlertDialogPrimitive.Overlay>
-        </Theme>
-      </AlertDialogPrimitive.Portal>
-    );
-  },
-);
+          </div>
+        </AlertDialogPrimitive.Overlay>
+      </Theme>
+    </AlertDialogPrimitive.Portal>
+  );
+});
 AlertDialogContent.displayName = 'AlertDialog.Content';
 
 type AlertDialogTitleElement = React.ElementRef<typeof Heading>;
 type AlertDialogTitleProps = ComponentPropsWithout<typeof Heading, 'asChild'>;
-const AlertDialogTitle = React.forwardRef<AlertDialogTitleElement, AlertDialogTitleProps>(
-  (props, forwardedRef) => (
-    <AlertDialogPrimitive.Title asChild>
-      <Heading size="5" trim="start" {...props} asChild={false} ref={forwardedRef} />
-    </AlertDialogPrimitive.Title>
-  ),
-);
+const AlertDialogTitle = React.forwardRef<AlertDialogTitleElement, AlertDialogTitleProps>((props, forwardedRef) => (
+  <AlertDialogPrimitive.Title asChild>
+    <Heading size="5" trim="start" {...props} asChild={false} ref={forwardedRef} />
+  </AlertDialogPrimitive.Title>
+));
 AlertDialogTitle.displayName = 'AlertDialog.Title';
 
 type AlertDialogDescriptionElement = HTMLParagraphElement;
 type AlertDialogDescriptionProps = ComponentPropsAs<typeof Text, 'p'>;
-const AlertDialogDescription = React.forwardRef<
-  AlertDialogDescriptionElement,
-  AlertDialogDescriptionProps
->((props, forwardedRef) => (
+const AlertDialogDescription = React.forwardRef<AlertDialogDescriptionElement, AlertDialogDescriptionProps>((props, forwardedRef) => (
   <AlertDialogPrimitive.Description asChild>
     <Text as="p" size="3" {...props} asChild={false} ref={forwardedRef} />
   </AlertDialogPrimitive.Description>
@@ -184,27 +88,21 @@ const AlertDialogDescription = React.forwardRef<
 AlertDialogDescription.displayName = 'AlertDialog.Description';
 
 type AlertDialogActionElement = React.ElementRef<typeof AlertDialogPrimitive.Action>;
-interface AlertDialogActionProps
-  extends ComponentPropsWithout<typeof AlertDialogPrimitive.Action, RemovedProps> {}
-const AlertDialogAction = React.forwardRef<AlertDialogActionElement, AlertDialogActionProps>(
-  ({ children, ...props }, forwardedRef) => (
-    <AlertDialogPrimitive.Action {...props} ref={forwardedRef} asChild>
-      {requireReactElement(children)}
-    </AlertDialogPrimitive.Action>
-  ),
-);
+interface AlertDialogActionProps extends ComponentPropsWithout<typeof AlertDialogPrimitive.Action, RemovedProps> {}
+const AlertDialogAction = React.forwardRef<AlertDialogActionElement, AlertDialogActionProps>(({ children, ...props }, forwardedRef) => (
+  <AlertDialogPrimitive.Action {...props} ref={forwardedRef} asChild>
+    {requireReactElement(children)}
+  </AlertDialogPrimitive.Action>
+));
 AlertDialogAction.displayName = 'AlertDialog.Action';
 
 type AlertDialogCancelElement = React.ElementRef<typeof AlertDialogPrimitive.Cancel>;
-interface AlertDialogCancelProps
-  extends ComponentPropsWithout<typeof AlertDialogPrimitive.Cancel, RemovedProps> {}
-const AlertDialogCancel = React.forwardRef<AlertDialogCancelElement, AlertDialogCancelProps>(
-  ({ children, ...props }, forwardedRef) => (
-    <AlertDialogPrimitive.Cancel {...props} ref={forwardedRef} asChild>
-      {requireReactElement(children)}
-    </AlertDialogPrimitive.Cancel>
-  ),
-);
+interface AlertDialogCancelProps extends ComponentPropsWithout<typeof AlertDialogPrimitive.Cancel, RemovedProps> {}
+const AlertDialogCancel = React.forwardRef<AlertDialogCancelElement, AlertDialogCancelProps>(({ children, ...props }, forwardedRef) => (
+  <AlertDialogPrimitive.Cancel {...props} ref={forwardedRef} asChild>
+    {requireReactElement(children)}
+  </AlertDialogPrimitive.Cancel>
+));
 AlertDialogCancel.displayName = 'AlertDialog.Cancel';
 
 export {