@allxsmith/bestax-bulma 5.34.3 → 5.35.0

package/dist/esm/components/Menu.js

@@ -59,6 +59,10 @@ const STRIP_FROM_NON_LINK = { href: true };
 /**
  * MenuItem supports `as` prop for custom link components, e.g., react-router-dom Link.
  *
+ * Give each item an `href`, a router link through `as`, or `as="button"`, so
+ * the keyboard can reach it: an `<a>` with no `href` isn't a link, and Tab
+ * skips it.
+ *
  * @function
  * @param {MenuItemProps} props - Props for the MenuItem component.
  * @param {React.Ref} ref - Forwarded ref to the inner element `as` renders.
@@ -101,7 +105,7 @@ const MenuItem = forwardRef(function MenuItem(itemProps, ref) {
             labelChildren.push(child);
         }
     });
-    return (jsxs("li", { className: className, "data-testid": testId, style: style, id: id, title: title, role: role, tabIndex: tabIndex, children: [jsx(Component, { ref: ref, className: itemClass || undefined, ...linkProps, ...(Component === 'button'
+    return (jsxs("li", { className: className, "data-testid": testId, style: style, id: id, title: title, role: role, tabIndex: tabIndex, children: [jsx(Component, { ref: ref, className: itemClass || undefined, "aria-current": active ? 'page' : undefined, ...linkProps, ...(Component === 'button'
                     ? { type: buttonType(linkProps.type) }
                     : {}), children: labelChildren }), nestedMenuLists] }));
 });

package/dist/esm/components/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sources":["../../../src/components/Menu.tsx"],"sourcesContent":["import React, { createContext, forwardRef, useContext } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { omitAttrs } from '../helpers/anchorAttrs';\nimport { buttonType } from '../helpers/buttonType';\nimport {\n  isCustomElement,\n  type PolymorphicComponent,\n} from '../helpers/polymorphic';\n\n// Context to track MenuList nesting level\nconst MenuListLevelContext = createContext(0);\n\n/**\n * Props for the Menu component.\n */\nexport interface MenuProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, keyof BulmaClassesProps>,\n    BulmaClassesProps {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Menu content (labels, lists, items, etc). */\n  children: React.ReactNode;\n}\n\n/**\n * The `Menu` component provides Bulma's vertical navigation menu: a simple, accessible sidebar or section menu for your Bulma React UI.\n *\n * @function\n * @param {MenuProps} props - Props for the Menu component.\n * @returns {JSX.Element} The rendered menu.\n * @see {@link https://bulma.io/documentation/components/menu/ | Bulma Menu documentation}\n */\nconst MenuComponent: React.FC<MenuProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n\n  // Generate Bulma classes with prefix\n  const bulmaClasses = usePrefixedClassNames('menu');\n\n  return (\n    <aside\n      className={classNames(bulmaClasses, bulmaHelperClasses, className)}\n      {...rest}\n    >\n      {children}\n    </aside>\n  );\n};\n\n/**\n * Props for the MenuLabel component.\n */\nexport interface MenuLabelProps\n  extends\n    Omit<React.HTMLAttributes<HTMLParagraphElement>, keyof BulmaClassesProps>,\n    BulmaClassesProps {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Label content. */\n  children: React.ReactNode;\n}\n\n/**\n * Bulma Menu label component.\n *\n * @function\n * @param {MenuLabelProps} props - Props for the MenuLabel component.\n * @returns {JSX.Element} The rendered menu label.\n */\nexport const MenuLabel: React.FC<MenuLabelProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n\n  return (\n    <p\n      className={classNames(\n        usePrefixedClassNames('menu-label'),\n        className,\n        bulmaHelperClasses\n      )}\n      {...rest}\n    >\n      {children}\n    </p>\n  );\n};\n\n/**\n * Props for the MenuList component.\n */\nexport interface MenuListProps\n  extends\n    Omit<React.HTMLAttributes<HTMLUListElement>, keyof BulmaClassesProps>,\n    BulmaClassesProps {\n  /** Additional CSS classes. */\n  className?: string;\n  /** List items. */\n  children: React.ReactNode;\n}\n\n/**\n * MenuList applies `menu-list` class only at the top level (not for nested lists).\n *\n * @function\n * @param {MenuListProps} props - Props for the MenuList component.\n * @returns {JSX.Element} The rendered menu list.\n */\nexport const MenuList: React.FC<MenuListProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const level = useContext(MenuListLevelContext);\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n\n  const ulClass = classNames(className, bulmaHelperClasses, {\n    [usePrefixedClassNames('menu-list')]: level === 0,\n  });\n\n  // Increment level for nested MenuLists\n  return (\n    <MenuListLevelContext.Provider value={level + 1}>\n      <ul className={ulClass || undefined} {...rest}>\n        {children}\n      </ul>\n    </MenuListLevelContext.Provider>\n  );\n};\n\n/**\n * The MenuItem component's own props.\n *\n * A menu item is two elements: a wrapping `<li>` and, inside it, the element\n * `as` names. The props here are the ones the `<li>` consumes; everything else\n * follows `as` onto the inner element.\n */\nexport interface MenuItemOwnProps extends BulmaClassesProps {\n  /** Additional CSS classes for the wrapping `<li>`. */\n  className?: string;\n  /** Item content and optional nested MenuList. */\n  children: React.ReactNode;\n  /** Highlight item as active. */\n  active?: boolean;\n  /** Inline styles for the wrapping `<li>`. */\n  style?: React.CSSProperties;\n  /** `id` for the wrapping `<li>`. */\n  id?: string;\n  /** `title` for the wrapping `<li>`. */\n  title?: string;\n  /** ARIA role for the wrapping `<li>`. */\n  role?: React.AriaRole;\n  /** Tab index for the wrapping `<li>`. */\n  tabIndex?: number;\n  /** Test id for the wrapping `<li>`. */\n  'data-testid'?: string;\n}\n\n/**\n * Props for the MenuItem component. Everything the `<li>` does not consume\n * follows `as` onto the inner element: with the default `'a'` that means `href`\n * and the other anchor attributes, and with `as={Link}` it means that\n * component's own props.\n *\n * @extraProp {PolymorphicRef<React.ElementType>} [ref] - Ref forwarded to the inner element `as` renders, not the wrapping `<li>`, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.\n */\nexport type MenuItemProps<T extends React.ElementType = 'a'> =\n  MenuItemOwnProps &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof MenuItemOwnProps | 'as'> & {\n      /**\n       * Custom link component (e.g. `Link` from router).\n       *\n       * `'button'` renders `type=\"button\"` unless you pass `type=\"submit\"` or `type=\"reset\"`, so\n       * an item inside a form does not submit it.\n       */\n      as?: T;\n    };\n\n/**\n * `href` alone — annotated so a typo is a compile error rather than a silent\n * no-op, the way both siblings' sets are.\n */\nconst STRIP_FROM_NON_LINK: Readonly<Record<'href', true>> = { href: true };\n\n/**\n * The shape the implementation destructures. The public contract is the generic\n * `MenuItemProps<T>` above — the body cannot see through `T`.\n */\ntype MenuItemImplProps = MenuItemOwnProps & {\n  as?: React.ElementType;\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n};\n\n/**\n * MenuItem supports `as` prop for custom link components, e.g., react-router-dom Link.\n *\n * @function\n * @param {MenuItemProps} props - Props for the MenuItem component.\n * @param {React.Ref} ref - Forwarded ref to the inner element `as` renders.\n * @returns {JSX.Element} The rendered menu item.\n */\nexport const MenuItem = forwardRef(function MenuItem(\n  itemProps: MenuItemProps,\n  ref: React.Ref<HTMLElement>\n) {\n  const {\n    className,\n    children,\n    active,\n    as: Component = 'a',\n    'data-testid': testId,\n    style,\n    id,\n    title,\n    role,\n    tabIndex,\n    ...rest\n  } = itemProps as MenuItemImplProps;\n  const { bulmaHelperClasses, rest: forwarded } = useBulmaClasses(rest);\n  // `href` reaches an anchor or a custom component (which owns its own prop\n  // contract), but not another intrinsic tag — `<span href>` is invalid HTML.\n  // The same rule Avatar applies through `isLinkLike` and Button through its\n  // intrinsic-only strip. Before #641 `href` was an own prop re-applied only\n  // for `as=\"a\"`; deriving it from `as` must not quietly widen that.\n  const isLinkLike =\n    Component === 'a' ||\n    typeof Component !== 'string' ||\n    isCustomElement(Component);\n  // `href` ALONE. `Dropdown.Item` strips every anchor-only attribute except\n  // `type`; `Level.Item` strips all of them, plus `rel`.\n  //\n  // Not because nothing else can arrive: `as` here is an open `React.ElementType`,\n  // and a non-fresh spread skips excess-property checking, so a typed caller\n  // CAN deliver `target` or `download` and they are forwarded. The set stays at\n  // `href` because widening it would be wrong for an open `as` — `referrerPolicy`\n  // on `as=\"img\"`, `target` on `as=\"form\"` and `media` on `as=\"source\"` are all\n  // legal, and a flat strip would delete them. Getting that right needs a\n  // per-attribute-per-element rule, which `bestax-migrate` already models in\n  // `LINK_ATTR_ELEMENTS`.\n  const linkProps = isLinkLike\n    ? forwarded\n    : omitAttrs(forwarded, STRIP_FROM_NON_LINK);\n  const itemClass = classNames(\n    { [usePrefixedClassNames('is-active')]: active },\n    bulmaHelperClasses\n  );\n\n  // Split children into label and nested MenuList(s)\n  const labelChildren: React.ReactNode[] = [];\n  const nestedMenuLists: React.ReactNode[] = [];\n  React.Children.forEach(children, child => {\n    if (React.isValidElement(child) && child.type === MenuList) {\n      nestedMenuLists.push(child);\n    } else {\n      labelChildren.push(child);\n    }\n  });\n\n  return (\n    <li\n      className={className}\n      data-testid={testId}\n      style={style}\n      id={id}\n      title={title}\n      role={role}\n      tabIndex={tabIndex}\n    >\n      <Component\n        ref={ref}\n        className={itemClass || undefined}\n        {...linkProps}\n        // A menu item inside a form must not submit it, and `<button>` defaults\n        // to type=\"submit\". A sidebar menu sitting in a form is ordinary. A\n        // caller's `submit` or `reset` still wins. Anything else becomes\n        // `button`, since HTML reads a value it does not define for a button as\n        // submit too; `buttonType` says more.\n        //\n        // After `linkProps`, reading through it rather than before it: React\n        // treats `type={undefined}` as \"remove the attribute\", and a spread\n        // carrying the key with no value is how that arrives, so a default\n        // spread first would be erased by it. `Dropdown.Item` and `Avatar`\n        // apply their button type after the spread too.\n        {...(Component === 'button'\n          ? { type: buttonType(linkProps.type) }\n          : {})}\n      >\n        {labelChildren}\n      </Component>\n      {nestedMenuLists}\n    </li>\n  );\n}) as PolymorphicComponent<MenuItemOwnProps, 'a'>;\n\nMenuItem.displayName = 'MenuItem';\n\n// Attach static subcomponents\nexport const Menu = withSubComponents(\n  MenuComponent,\n  {\n    Label: MenuLabel,\n    List: MenuList,\n    Item: MenuItem,\n  },\n  'Menu'\n);\n\nexport default Menu;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Menu.js","sources":["../../../src/components/Menu.tsx"],"sourcesContent":["import React, { createContext, forwardRef, useContext } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { omitAttrs } from '../helpers/anchorAttrs';\nimport { buttonType } from '../helpers/buttonType';\nimport {\n  isCustomElement,\n  type PolymorphicComponent,\n} from '../helpers/polymorphic';\n\n// Context to track MenuList nesting level\nconst MenuListLevelContext = createContext(0);\n\n/**\n * Props for the Menu component.\n */\nexport interface MenuProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, keyof BulmaClassesProps>,\n    BulmaClassesProps {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Menu content (labels, lists, items, etc). */\n  children: React.ReactNode;\n}\n\n/**\n * The `Menu` component provides Bulma's vertical navigation menu: a simple, accessible sidebar or section menu for your Bulma React UI.\n *\n * @function\n * @param {MenuProps} props - Props for the Menu component.\n * @returns {JSX.Element} The rendered menu.\n * @see {@link https://bulma.io/documentation/components/menu/ | Bulma Menu documentation}\n */\nconst MenuComponent: React.FC<MenuProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n\n  // Generate Bulma classes with prefix\n  const bulmaClasses = usePrefixedClassNames('menu');\n\n  return (\n    <aside\n      className={classNames(bulmaClasses, bulmaHelperClasses, className)}\n      {...rest}\n    >\n      {children}\n    </aside>\n  );\n};\n\n/**\n * Props for the MenuLabel component.\n */\nexport interface MenuLabelProps\n  extends\n    Omit<React.HTMLAttributes<HTMLParagraphElement>, keyof BulmaClassesProps>,\n    BulmaClassesProps {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Label content. */\n  children: React.ReactNode;\n}\n\n/**\n * Bulma Menu label component.\n *\n * @function\n * @param {MenuLabelProps} props - Props for the MenuLabel component.\n * @returns {JSX.Element} The rendered menu label.\n */\nexport const MenuLabel: React.FC<MenuLabelProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n\n  return (\n    <p\n      className={classNames(\n        usePrefixedClassNames('menu-label'),\n        className,\n        bulmaHelperClasses\n      )}\n      {...rest}\n    >\n      {children}\n    </p>\n  );\n};\n\n/**\n * Props for the MenuList component.\n */\nexport interface MenuListProps\n  extends\n    Omit<React.HTMLAttributes<HTMLUListElement>, keyof BulmaClassesProps>,\n    BulmaClassesProps {\n  /** Additional CSS classes. */\n  className?: string;\n  /** List items. */\n  children: React.ReactNode;\n}\n\n/**\n * MenuList applies `menu-list` class only at the top level (not for nested lists).\n *\n * @function\n * @param {MenuListProps} props - Props for the MenuList component.\n * @returns {JSX.Element} The rendered menu list.\n */\nexport const MenuList: React.FC<MenuListProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const level = useContext(MenuListLevelContext);\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n\n  const ulClass = classNames(className, bulmaHelperClasses, {\n    [usePrefixedClassNames('menu-list')]: level === 0,\n  });\n\n  // Increment level for nested MenuLists\n  return (\n    <MenuListLevelContext.Provider value={level + 1}>\n      <ul className={ulClass || undefined} {...rest}>\n        {children}\n      </ul>\n    </MenuListLevelContext.Provider>\n  );\n};\n\n/**\n * The MenuItem component's own props.\n *\n * A menu item is two elements: a wrapping `<li>` and, inside it, the element\n * `as` names. The props here are the ones the `<li>` consumes; everything else\n * follows `as` onto the inner element.\n */\nexport interface MenuItemOwnProps extends BulmaClassesProps {\n  /** Additional CSS classes for the wrapping `<li>`. */\n  className?: string;\n  /** Item content and optional nested MenuList. */\n  children: React.ReactNode;\n  /**\n   * Marks the item as the current one. It adds Bulma's `is-active` class, and\n   * `aria-current=\"page\"` on the element `as` renders, so assistive tech can\n   * tell which item is current too. An `aria-current` you pass wins, even\n   * `undefined`: use it to say something else (`\"location\"` for a section of\n   * one page, say), or `aria-current={false}` to turn it off. A menu should\n   * mark one page, so when the section above the current page is `active` too,\n   * give it `aria-current=\"location\"`, and give an `active` item that isn't\n   * navigation, such as an `as=\"button\"` filter, `aria-current={false}`.\n   */\n  active?: boolean;\n  /** Inline styles for the wrapping `<li>`. */\n  style?: React.CSSProperties;\n  /** `id` for the wrapping `<li>`. */\n  id?: string;\n  /** `title` for the wrapping `<li>`. */\n  title?: string;\n  /** ARIA role for the wrapping `<li>`. */\n  role?: React.AriaRole;\n  /** Tab index for the wrapping `<li>`. */\n  tabIndex?: number;\n  /** Test id for the wrapping `<li>`. */\n  'data-testid'?: string;\n}\n\n/**\n * Props for the MenuItem component. Everything the `<li>` does not consume\n * follows `as` onto the inner element: with the default `'a'` that means `href`\n * and the other anchor attributes, and with `as={Link}` it means that\n * component's own props.\n *\n * @extraProp {PolymorphicRef<React.ElementType>} [ref] - Ref forwarded to the inner element `as` renders, not the wrapping `<li>`, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.\n */\nexport type MenuItemProps<T extends React.ElementType = 'a'> =\n  MenuItemOwnProps &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof MenuItemOwnProps | 'as'> & {\n      /**\n       * Custom link component (e.g. `Link` from router).\n       *\n       * `'button'` renders `type=\"button\"` unless you pass `type=\"submit\"` or `type=\"reset\"`, so\n       * an item inside a form does not submit it.\n       */\n      as?: T;\n    };\n\n/**\n * `href` alone — annotated so a typo is a compile error rather than a silent\n * no-op, the way both siblings' sets are.\n */\nconst STRIP_FROM_NON_LINK: Readonly<Record<'href', true>> = { href: true };\n\n/**\n * The shape the implementation destructures. The public contract is the generic\n * `MenuItemProps<T>` above — the body cannot see through `T`.\n */\ntype MenuItemImplProps = MenuItemOwnProps & {\n  as?: React.ElementType;\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n};\n\n/**\n * MenuItem supports `as` prop for custom link components, e.g., react-router-dom Link.\n *\n * Give each item an `href`, a router link through `as`, or `as=\"button\"`, so\n * the keyboard can reach it: an `<a>` with no `href` isn't a link, and Tab\n * skips it.\n *\n * @function\n * @param {MenuItemProps} props - Props for the MenuItem component.\n * @param {React.Ref} ref - Forwarded ref to the inner element `as` renders.\n * @returns {JSX.Element} The rendered menu item.\n */\nexport const MenuItem = forwardRef(function MenuItem(\n  itemProps: MenuItemProps,\n  ref: React.Ref<HTMLElement>\n) {\n  const {\n    className,\n    children,\n    active,\n    as: Component = 'a',\n    'data-testid': testId,\n    style,\n    id,\n    title,\n    role,\n    tabIndex,\n    ...rest\n  } = itemProps as MenuItemImplProps;\n  const { bulmaHelperClasses, rest: forwarded } = useBulmaClasses(rest);\n  // `href` reaches an anchor or a custom component (which owns its own prop\n  // contract), but not another intrinsic tag — `<span href>` is invalid HTML.\n  // The same rule Avatar applies through `isLinkLike` and Button through its\n  // intrinsic-only strip. Before #641 `href` was an own prop re-applied only\n  // for `as=\"a\"`; deriving it from `as` must not quietly widen that.\n  const isLinkLike =\n    Component === 'a' ||\n    typeof Component !== 'string' ||\n    isCustomElement(Component);\n  // `href` ALONE. `Dropdown.Item` strips every anchor-only attribute except\n  // `type`; `Level.Item` strips all of them, plus `rel`.\n  //\n  // Not because nothing else can arrive: `as` here is an open `React.ElementType`,\n  // and a non-fresh spread skips excess-property checking, so a typed caller\n  // CAN deliver `target` or `download` and they are forwarded. The set stays at\n  // `href` because widening it would be wrong for an open `as` — `referrerPolicy`\n  // on `as=\"img\"`, `target` on `as=\"form\"` and `media` on `as=\"source\"` are all\n  // legal, and a flat strip would delete them. Getting that right needs a\n  // per-attribute-per-element rule, which `bestax-migrate` already models in\n  // `LINK_ATTR_ELEMENTS`.\n  const linkProps = isLinkLike\n    ? forwarded\n    : omitAttrs(forwarded, STRIP_FROM_NON_LINK);\n  const itemClass = classNames(\n    { [usePrefixedClassNames('is-active')]: active },\n    bulmaHelperClasses\n  );\n\n  // Split children into label and nested MenuList(s)\n  const labelChildren: React.ReactNode[] = [];\n  const nestedMenuLists: React.ReactNode[] = [];\n  React.Children.forEach(children, child => {\n    if (React.isValidElement(child) && child.type === MenuList) {\n      nestedMenuLists.push(child);\n    } else {\n      labelChildren.push(child);\n    }\n  });\n\n  return (\n    <li\n      className={className}\n      data-testid={testId}\n      style={style}\n      id={id}\n      title={title}\n      role={role}\n      tabIndex={tabIndex}\n    >\n      <Component\n        ref={ref}\n        className={itemClass || undefined}\n        // The active item is the current page, the way Pagination marks its\n        // page. Before the spread, so an `aria-current` the caller passes\n        // decides, `false` and `undefined` included. bestax-migrate converts\n        // `is-active` to `active` only beside an `aria-current` of the\n        // element's own, and relies on that to render the same markup.\n        aria-current={active ? 'page' : undefined}\n        {...linkProps}\n        // A menu item inside a form must not submit it, and `<button>` defaults\n        // to type=\"submit\". A sidebar menu sitting in a form is ordinary. A\n        // caller's `submit` or `reset` still wins. Anything else becomes\n        // `button`, since HTML reads a value it does not define for a button as\n        // submit too; `buttonType` says more.\n        //\n        // After `linkProps`, reading through it rather than before it: React\n        // treats `type={undefined}` as \"remove the attribute\", and a spread\n        // carrying the key with no value is how that arrives, so a default\n        // spread first would be erased by it. `Dropdown.Item` and `Avatar`\n        // apply their button type after the spread too.\n        {...(Component === 'button'\n          ? { type: buttonType(linkProps.type) }\n          : {})}\n      >\n        {labelChildren}\n      </Component>\n      {nestedMenuLists}\n    </li>\n  );\n}) as PolymorphicComponent<MenuItemOwnProps, 'a'>;\n\nMenuItem.displayName = 'MenuItem';\n\n// Attach static subcomponents\nexport const Menu = withSubComponents(\n  MenuComponent,\n  {\n    Label: MenuLabel,\n    List: MenuList,\n    Item: MenuItem,\n  },\n  'Menu'\n);\n\nexport default Menu;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/components/Modal.js

@@ -11,13 +11,9 @@ import { useScrollLock } from '../helpers/scrollLock.js';
 import { getDeepestActiveElement, getActiveElementInTree } from '../helpers/shadowDom.js';
 import { usePortalContainer } from '../helpers/portal.js';
 import { useIsHydrated } from '../helpers/useIsHydrated.js';
+import { useLatestRef } from '../helpers/useLatestRef.js';
+import { useOverlayStack } from '../helpers/overlayStack.js';
 
-/**
- * Every currently active modal, in the order they opened. Only the last entry
- * — the topmost modal — reacts to Escape and Tab, so one keypress can't
- * dismiss a whole stack (e.g. a `Dialog` opened on top of a `Modal`).
- */
-const activeModalStack = [];
 /**
  * Controls the modal can hand focus to. Disabled and hidden controls are
  * excluded because `focus()` on them is a no-op, which would leave focus
@@ -176,8 +172,8 @@ const ModalRoot = forwardRef(function ModalRoot({ active, isActive, onClose, cla
     // Cleanup returned by a consumer's callback ref on attach, held until detach.
     const consumerCleanupRef = useRef(null);
     // The forwarded ref and the internal one must both see the node: focus
-    // management, the scroll lock and the topmost-modal check all read
-    // `modalRootRef`, while consumers expect their own ref to resolve.
+    // management and the Tab trap read `modalRootRef`, while consumers expect
+    // their own ref to resolve.
     const combinedRef = useCallback((node) => {
         modalRootRef.current =
             node;
@@ -208,7 +204,6 @@ const ModalRoot = forwardRef(function ModalRoot({ active, isActive, onClose, cla
         }
     }, [ref]);
     const previouslyFocusedRef = useRef(null);
-    const stackTokenRef = useRef({});
     const generatedTitleId = useId();
     // A portal has no server-rendered counterpart, so the server render and the
     // hydrating render have to stay inline and only move into the portal once
@@ -226,35 +221,31 @@ const ModalRoot = forwardRef(function ModalRoot({ active, isActive, onClose, cla
     // to it moves nothing, so it mustn't re-run the effects either.
     const defaultTarget = isPortaled && portal === true ? portalContainer : undefined;
     useScrollLock(isModalActive && lockScroll);
-    // Record open order so keyboard handling only applies to the topmost modal.
-    useEffect(() => {
-        if (!isModalActive)
-            return undefined;
-        const token = stackTokenRef.current;
-        activeModalStack.push(token);
-        return () => {
-            const index = activeModalStack.indexOf(token);
-            if (index !== -1)
-                activeModalStack.splice(index, 1);
-        };
-    }, [isModalActive]);
-    // Escape closes; Tab cycles inside the modal. Both only for the topmost one.
-    // The listener is on `window`, where a keydown arrives last, so everything
-    // inside the modal has had the key first: React's handlers, and `document`
-    // listeners added after this one, such as a date picker's.
+    // Read when Escape arrives, so the key listener stays put while `onClose`
+    // changes identity, as an inline one does on every render of the parent.
+    const onCloseRef = useLatestRef(onClose);
+    // Joins the stack of open overlays, so the keyboard handling below only
+    // applies while this modal is the topmost overlay.
+    const isTopmost = useOverlayStack(isModalActive);
+    // Escape closes; Tab cycles inside the modal. Both only for the topmost
+    // overlay. The listener is on `window`, where a keydown arrives last, so
+    // everything inside the modal has had the key first: React's handlers, and
+    // `document` listeners added after this one, such as a date picker's.
     useEffect(() => {
         if (!isModalActive)
             return undefined;
         const handleKeyDown = (e) => {
             const node = modalRootRef.current;
-            if (activeModalStack[activeModalStack.length - 1] !== stackTokenRef.current) {
+            if (!isTopmost())
                 return;
-            }
             if (e.key === 'Escape') {
                 // Something inside already used this Escape, such as a popup that
-                // closed on it, so the modal waits for the next one.
-                if (closeOnEscape && !e.defaultPrevented)
-                    onClose?.();
+                // closed on it, so the modal waits for the next one. One the modal
+                // closes on is marked used, so nothing under it acts on it as well.
+                if (closeOnEscape && onCloseRef.current && !e.defaultPrevented) {
+                    e.preventDefault();
+                    onCloseRef.current();
+                }
                 return;
             }
             // A trap inside the modal, such as a portaled popup's, already moved
@@ -286,7 +277,7 @@ const ModalRoot = forwardRef(function ModalRoot({ active, isActive, onClose, cla
         };
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [isModalActive, closeOnEscape, onClose]);
+    }, [isModalActive, closeOnEscape, onCloseRef, isTopmost]);
     // Move focus into the modal on open, restore it on close
     useEffect(() => {
         if (!isModalActive)

package/dist/esm/components/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  classNames,\n  usePrefixedClassNames,\n  prefixedClassNames,\n} from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { buttonType } from '../helpers/buttonType';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { useConfig } from '../helpers/Config';\nimport { useScrollLock } from '../helpers/scrollLock';\nimport {\n  getActiveElementInTree,\n  getDeepestActiveElement,\n} from '../helpers/shadowDom';\nimport { usePortalContainer } from '../helpers/portal';\nimport { useIsHydrated } from '../helpers/useIsHydrated';\n\n/**\n * Every currently active modal, in the order they opened. Only the last entry\n * — the topmost modal — reacts to Escape and Tab, so one keypress can't\n * dismiss a whole stack (e.g. a `Dialog` opened on top of a `Modal`).\n */\nconst activeModalStack: object[] = [];\n\n/**\n * Controls the modal can hand focus to. Disabled and hidden controls are\n * excluded because `focus()` on them is a no-op, which would leave focus\n * outside the modal.\n */\nconst FOCUSABLE_SELECTOR =\n  'button:not(:disabled), [href], input:not(:disabled):not([type=\"hidden\"]), select:not(:disabled), textarea:not(:disabled), [tabindex]';\n\n/**\n * The modal's tab stops, in document order. The selector alone is not the\n * tabbable set — `[href]` and `button` match regardless of `tabindex`, so an\n * `<a href tabIndex={-1}>` would otherwise be treated as a tab stop and let\n * Tab escape the modal when it sorts last. `el.tabIndex` is the browser's own\n * resolved value, so filtering on it drops every negative index (not just\n * `-1`) without a second selector to keep in sync.\n */\nconst getTabbable = (node: HTMLElement): HTMLElement[] =>\n  Array.from(node.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(\n    el => el.tabIndex >= 0\n  );\n\n/**\n * Props for the Modal component.\n * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the root `.modal` element.\n */\nexport interface ModalProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'title'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Whether the modal is open/visible. */\n  active?: boolean;\n  /** Alias for `active`. Whether the modal is open/visible. */\n  isActive?: boolean; // Alias for active\n  /** Callback invoked to request modal close (background or close button). */\n  onClose?: () => void;\n  /** Additional CSS classes for the modal. */\n  className?: string;\n  /** Text color for modal content. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color for modal content. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Title/header for modal-card variant. (Legacy API only) */\n  modalCardTitle?: React.ReactNode;\n  /** Footer for modal-card variant. (Legacy API only) */\n  modalCardFoot?: React.ReactNode;\n  /**\n   * Modal style: `'card'` for modal-card, `'content'` for modal-content. (Legacy API only)\n   * @defaultValue auto\n   */\n  type?: 'card' | 'content';\n  /** Modal body/content or compound components. */\n  children?: React.ReactNode;\n  /**\n   * Close the modal when the Escape key is pressed (calls `onClose`). Only the\n   * topmost open modal responds, so Escape closes one layer at a time. A popup\n   * inside it, such as a Dropdown's menu or a date picker's calendar, takes\n   * its own Escape first, and so does content that calls `preventDefault()`\n   * on it.\n   * @defaultValue true\n   */\n  closeOnEscape?: boolean;\n  /**\n   * Lock body scroll while the modal is active. Ref-counted and shared with\n   * `Dialog`, `Sidebar` and `Loading`, so whichever overlay closes first does\n   * not unlock the page underneath one that is still open.\n   * @defaultValue true\n   */\n  lockScroll?: boolean;\n  /**\n   * Renders the modal into a portal target instead of inline, so it isn't\n   * clipped by an ancestor with `overflow: hidden`, `filter` or `transform`.\n   * `true` portals to the `portalContainer` a `ConfigProvider` sets,\n   * `document.body` by default; a string is used as a\n   * `document.querySelector` selector; an element is used directly. Renders\n   * inline on the server and while hydrating, moving into the portal once the\n   * client takes over, so hydration matches.\n   * @defaultValue false\n   */\n  portal?: boolean | string | HTMLElement;\n}\n\n/**\n * Props for Modal.Background component.\n */\nexport interface ModalBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Content component.\n */\nexport interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Card component.\n */\nexport interface ModalCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Card.Head component.\n */\nexport interface ModalCardHeadProps extends React.HTMLAttributes<HTMLElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Card.Title component.\n */\nexport interface ModalCardTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Card.Body component.\n */\nexport interface ModalCardBodyProps extends React.HTMLAttributes<HTMLElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Card.Foot component.\n */\nexport interface ModalCardFootProps extends React.HTMLAttributes<HTMLElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Close component.\n * @extraProp {'button' | 'submit' | 'reset'} [type='button'] - Button type. Defaults to `'button'`, so a close button inside a form does not submit it. Pass `'submit'` or `'reset'` and yours is used; any other value, or a spread carrying `type: undefined`, renders `'button'`.\n * @extraProp {string} [aria-label='close'] - Accessible name. Pass your own to replace it. An empty one, or a spread carrying `'aria-label': undefined`, keeps the default rather than leaving the button unnamed.\n */\nexport interface ModalCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Size of the close button (only applies to 'floating' variant). */\n  size?: 'small' | 'medium' | 'large';\n  /** Button variant. 'delete' (default) for modal card headers, 'floating' for overlay close button. */\n  variant?: 'delete' | 'floating';\n}\n\n/**\n * Modal.Background - Renders the modal background overlay.\n *\n * @function\n * @param {ModalBackgroundProps} props - Component props.\n * @returns {JSX.Element} Modal background element.\n */\nconst ModalBackground: React.FC<ModalBackgroundProps> = ({\n  className,\n  ...props\n}) => {\n  const classes = classNames(\n    usePrefixedClassNames('modal-background'),\n    className\n  );\n  return <div className={classes} {...props} />;\n};\n\n/**\n * Modal.Content - Renders modal content wrapper for custom content.\n *\n * @function\n * @param {ModalContentProps} props - Component props.\n * @returns {JSX.Element} Modal content element.\n */\nconst ModalContent: React.FC<ModalContentProps> = ({ className, ...props }) => {\n  const classes = classNames(usePrefixedClassNames('modal-content'), className);\n  return <div className={classes} {...props} />;\n};\n\n/**\n * Modal.Card.Head - Renders modal card header section.\n *\n * @function\n * @param {ModalCardHeadProps} props - Component props.\n * @returns {JSX.Element} Modal card header element.\n */\nconst ModalCardHead: React.FC<ModalCardHeadProps> = ({\n  className,\n  ...props\n}) => {\n  const classes = classNames(\n    usePrefixedClassNames('modal-card-head'),\n    className\n  );\n  return <header className={classes} {...props} />;\n};\n\n/**\n * Modal.Card.Title - Renders modal card title.\n *\n * @function\n * @param {ModalCardTitleProps} props - Component props.\n * @returns {JSX.Element} Modal card title element.\n */\nconst ModalCardTitle: React.FC<ModalCardTitleProps> = ({\n  className,\n  ...props\n}) => {\n  const classes = classNames(\n    usePrefixedClassNames('modal-card-title'),\n    className\n  );\n  return <p className={classes} {...props} />;\n};\n\n/**\n * Modal.Card.Body - Renders modal card body section.\n *\n * @function\n * @param {ModalCardBodyProps} props - Component props.\n * @returns {JSX.Element} Modal card body element.\n */\nconst ModalCardBody: React.FC<ModalCardBodyProps> = ({\n  className,\n  ...props\n}) => {\n  const classes = classNames(\n    usePrefixedClassNames('modal-card-body'),\n    className\n  );\n  return <section className={classes} {...props} />;\n};\n\n/**\n * Modal.Card.Foot - Renders modal card footer section.\n *\n * @function\n * @param {ModalCardFootProps} props - Component props.\n * @returns {JSX.Element} Modal card footer element.\n */\nconst ModalCardFoot: React.FC<ModalCardFootProps> = ({\n  className,\n  ...props\n}) => {\n  const classes = classNames(\n    usePrefixedClassNames('modal-card-foot'),\n    className\n  );\n  return <footer className={classes} {...props} />;\n};\n\n/**\n * Modal.Card - Renders modal card wrapper with compound components.\n * Use with Modal.Card.Head, Modal.Card.Title, Modal.Card.Body, and Modal.Card.Foot.\n *\n * @function\n * @param {ModalCardProps} props - Component props.\n * @returns {JSX.Element} Modal card element.\n */\nconst ModalCardComponent: React.FC<ModalCardProps> = ({\n  className,\n  ...props\n}) => {\n  const classes = classNames(usePrefixedClassNames('modal-card'), className);\n  return <div className={classes} {...props} />;\n};\n\nconst ModalCard = withSubComponents(ModalCardComponent, {\n  Head: ModalCardHead,\n  Title: ModalCardTitle,\n  Body: ModalCardBody,\n  Foot: ModalCardFoot,\n});\n\n/**\n * Modal.Close - Renders modal close button with two variant styles.\n *\n * @function\n * @param {ModalCloseProps} props - Component props.\n * @returns {JSX.Element} Close button element.\n *\n * @remarks\n * Supports two variants:\n * - 'delete' (default): For use in modal card headers, renders with 'delete' class\n * - 'floating': For floating overlay close button, renders with 'modal-close' class\n *\n * The size prop only applies to the 'floating' variant.\n */\nconst ModalClose: React.FC<ModalCloseProps> = ({\n  className,\n  size = 'large',\n  variant = 'delete',\n  ...props\n}) => {\n  const classes = classNames(\n    usePrefixedClassNames(\n      variant === 'delete' ? 'delete' : 'modal-close',\n      variant === 'floating' && size && { [`is-${size}`]: true }\n    ),\n    className\n  );\n  return (\n    <button\n      className={classes}\n      {...props}\n      // After the spread, reading through it: a key the spread carries with no\n      // value would otherwise erase the default, leaving a nameless button\n      // that submits the form around it. An empty label falls back too: the\n      // button is drawn as an icon, so `''` would leave it unnamed. A caller's\n      // own value still wins; `buttonType` says more.\n      aria-label={props['aria-label'] || 'close'}\n      type={buttonType(props.type)}\n    />\n  );\n};\n\n/**\n * The `Modal` component provides an empty, accessible overlay for arbitrary content — for a ready-made confirm or alert, reach for `Dialog` instead.\n *\n * @function\n * @param {ModalProps} props - Props for the Modal component.\n * @returns {JSX.Element} The rendered modal.\n *\n * @example\n * // Legacy API\n * <Modal active={isOpen} onClose={handleClose} modalCardTitle=\"Title\">\n *   Content\n * </Modal>\n *\n * @example\n * // Compound Component API\n * <Modal isActive={isOpen}>\n *   <Modal.Background onClick={handleClose} />\n *   <Modal.Card>\n *     <Modal.Card.Head>\n *       <Modal.Card.Title>Title</Modal.Card.Title>\n *       <Modal.Close onClick={handleClose} />\n *     </Modal.Card.Head>\n *     <Modal.Card.Body>Content</Modal.Card.Body>\n *   </Modal.Card>\n * </Modal>\n *\n * @see {@link https://bulma.io/documentation/components/modal/ | Bulma Modal documentation}\n */\nconst ModalRoot = forwardRef<HTMLDivElement, ModalProps>(function ModalRoot(\n  {\n    active,\n    isActive,\n    onClose,\n    className,\n    textColor,\n    bgColor,\n    modalCardTitle,\n    modalCardFoot,\n    type,\n    children,\n    closeOnEscape = true,\n    lockScroll = true,\n    portal = false,\n    role,\n    'aria-modal': ariaModalProp,\n    ...props\n  },\n  ref\n) {\n  const { classPrefix, portalContainer } = useConfig();\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  });\n\n  // Support both active and isActive props\n  const isModalActive = active ?? isActive ?? false;\n\n  const modalRootRef = useRef<HTMLDivElement>(null);\n\n  // Cleanup returned by a consumer's callback ref on attach, held until detach.\n  const consumerCleanupRef = useRef<(() => void) | null>(null);\n\n  // The forwarded ref and the internal one must both see the node: focus\n  // management, the scroll lock and the topmost-modal check all read\n  // `modalRootRef`, while consumers expect their own ref to resolve.\n  const combinedRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      (modalRootRef as React.MutableRefObject<HTMLDivElement | null>).current =\n        node;\n      if (typeof ref === 'function') {\n        // React 19 lets a callback ref return a cleanup function and detaches\n        // by running it instead of calling the ref with `null`; React 18\n        // discards the return value entirely. Returning it from here would be\n        // a React-19-only contract, so instead we hold the cleanup and run it\n        // ourselves on detach — a consumer's cleanup ref then behaves the same\n        // on both majors of the CI matrix. Same shape as `Dropdown`.\n        if (node === null) {\n          const consumerCleanup = consumerCleanupRef.current;\n          consumerCleanupRef.current = null;\n          if (consumerCleanup) {\n            consumerCleanup();\n          } else {\n            ref(null);\n          }\n          return;\n        }\n        const cleanup: unknown = ref(node);\n        consumerCleanupRef.current =\n          typeof cleanup === 'function' ? (cleanup as () => void) : null;\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      }\n    },\n    [ref]\n  );\n  const previouslyFocusedRef = useRef<HTMLElement | null>(null);\n  const stackTokenRef = useRef<object>({});\n  const generatedTitleId = useId();\n  // A portal has no server-rendered counterpart, so the server render and the\n  // hydrating render have to stay inline and only move into the portal once\n  // we're past hydration.\n  const onClient = useIsHydrated();\n  const resolveContainer = usePortalContainer();\n  // Moving into the portal, or from one portal target to another, remounts\n  // the modal's subtree, so any effect holding a DOM node from before the move\n  // is holding a detached one. Effects that touch the modal's nodes key on\n  // this, on `portal` and on `defaultTarget`, so they re-run against the new\n  // tree.\n  const isPortaled = Boolean(portal) && onClient;\n  // The configured `portalContainer` only places a modal portaled with\n  // `portal` set to `true`. In place, or with a target of its own, a change\n  // to it moves nothing, so it mustn't re-run the effects either.\n  const defaultTarget =\n    isPortaled && portal === true ? portalContainer : undefined;\n\n  useScrollLock(isModalActive && lockScroll);\n\n  // Record open order so keyboard handling only applies to the topmost modal.\n  useEffect(() => {\n    if (!isModalActive) return undefined;\n\n    const token = stackTokenRef.current;\n    activeModalStack.push(token);\n    return () => {\n      const index = activeModalStack.indexOf(token);\n      if (index !== -1) activeModalStack.splice(index, 1);\n    };\n  }, [isModalActive]);\n\n  // Escape closes; Tab cycles inside the modal. Both only for the topmost one.\n  // The listener is on `window`, where a keydown arrives last, so everything\n  // inside the modal has had the key first: React's handlers, and `document`\n  // listeners added after this one, such as a date picker's.\n  useEffect(() => {\n    if (!isModalActive) return undefined;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      const node = modalRootRef.current;\n      if (\n        activeModalStack[activeModalStack.length - 1] !== stackTokenRef.current\n      ) {\n        return;\n      }\n\n      if (e.key === 'Escape') {\n        // Something inside already used this Escape, such as a popup that\n        // closed on it, so the modal waits for the next one.\n        if (closeOnEscape && !e.defaultPrevented) onClose?.();\n        return;\n      }\n      // A trap inside the modal, such as a portaled popup's, already moved\n      // focus on this Tab, so the modal leaves it where it went.\n      if (e.key !== 'Tab' || !node || e.defaultPrevented) return;\n\n      // Keep Tab within the modal — `aria-modal` hides the rest of the page\n      // from assistive technology, so the keyboard order has to agree.\n      const focusable = getTabbable(node);\n      const activeElement = getActiveElementInTree(node);\n      if (focusable.length === 0) {\n        e.preventDefault();\n        node.focus();\n        return;\n      }\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      const outside = !node.contains(activeElement);\n      if (e.shiftKey) {\n        if (outside || activeElement === first) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else if (outside || activeElement === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [isModalActive, closeOnEscape, onClose]);\n\n  // Move focus into the modal on open, restore it on close\n  useEffect(() => {\n    if (!isModalActive) return undefined;\n\n    // The element that had focus, wherever it sits: a portaled modal renders\n    // under `document.body` while its opener can be inside a shadow root.\n    previouslyFocusedRef.current =\n      getDeepestActiveElement() as HTMLElement | null;\n    const node = modalRootRef.current;\n    const focusable = node ? getTabbable(node)[0] : undefined;\n    (focusable ?? node)?.focus();\n\n    return () => {\n      // Only hand focus back if this modal still owns it: closing a background\n      // modal must not pull focus out of one that is still open on top. A\n      // removed subtree leaves focus on <body>, which still counts as ours.\n      const activeElement = getActiveElementInTree(node);\n      if (\n        activeElement &&\n        activeElement !== document.body &&\n        !node?.contains(activeElement)\n      ) {\n        return;\n      }\n      previouslyFocusedRef.current?.focus?.();\n    };\n    // `isPortaled` flips once when a hydrated portal modal moves out of the\n    // inline tree, and `portal` or `defaultTarget` changing moves a portaled\n    // one to another target; re-running rebinds focus onto the remounted\n    // nodes. The cleanup above restores focus to the pre-open element first\n    // (the detached subtree has left focus on <body>), so the re-run re-records\n    // the same element and restore-on-close still lands in the right place.\n  }, [isModalActive, isPortaled, portal, defaultTarget]);\n\n  // Check if children contain compound components\n  const hasCompoundComponents = React.Children.toArray(children).some(\n    child =>\n      React.isValidElement(child) &&\n      (child.type === ModalBackground ||\n        child.type === ModalContent ||\n        child.type === ModalCard ||\n        child.type === ModalClose)\n  );\n\n  // Generate Bulma classes with prefix\n  const bulmaClasses = usePrefixedClassNames('modal', {\n    'is-active': isModalActive,\n  });\n  const deleteClass = usePrefixedClassNames('delete');\n\n  const modalClasses = classNames(bulmaClasses, bulmaHelperClasses, className);\n\n  const resolvedRole = role ?? (isModalActive ? 'dialog' : undefined);\n  const resolvedAriaModal =\n    ariaModalProp ??\n    (isModalActive && resolvedRole !== 'presentation' ? 'true' : undefined);\n  // A dialog needs an accessible name: the legacy card title is wired up\n  // automatically, compound users pass their own aria-label/aria-labelledby\n  // (both arrive in `rest`, which is spread last and so wins).\n  const titleId = modalCardTitle ? generatedTitleId : undefined;\n\n  let modalElement: React.ReactElement;\n\n  // If using compound components, render children as-is\n  if (hasCompoundComponents) {\n    modalElement = (\n      <div\n        className={modalClasses}\n        ref={combinedRef}\n        role={resolvedRole}\n        aria-modal={resolvedAriaModal}\n        tabIndex={-1}\n        {...rest}\n        data-testid=\"modal\"\n      >\n        {children}\n      </div>\n    );\n  } else {\n    // Legacy API: EXPLICIT type wins; fallback to auto detection if not provided\n    let isModalCard: boolean;\n    if (type === 'card') isModalCard = true;\n    else if (type === 'content') isModalCard = false;\n    else isModalCard = !!modalCardTitle || !!modalCardFoot;\n\n    modalElement = (\n      <div\n        className={modalClasses}\n        ref={combinedRef}\n        role={resolvedRole}\n        aria-modal={resolvedAriaModal}\n        aria-labelledby={titleId}\n        tabIndex={-1}\n        {...rest}\n        data-testid=\"modal\"\n      >\n        <div\n          className={prefixedClassNames(classPrefix, 'modal-background')}\n          onClick={onClose}\n          data-testid=\"modal-background\"\n        />\n        {isModalCard ? (\n          <div className={prefixedClassNames(classPrefix, 'modal-card')}>\n            {modalCardTitle && (\n              <header\n                className={prefixedClassNames(classPrefix, 'modal-card-head')}\n              >\n                <p\n                  id={titleId}\n                  className={prefixedClassNames(\n                    classPrefix,\n                    'modal-card-title'\n                  )}\n                >\n                  {modalCardTitle}\n                </p>\n                {onClose && (\n                  <button\n                    className={deleteClass}\n                    aria-label=\"close\"\n                    onClick={onClose}\n                    type=\"button\"\n                    data-testid=\"modal-close\"\n                  />\n                )}\n              </header>\n            )}\n            <section\n              className={prefixedClassNames(classPrefix, 'modal-card-body')}\n              data-testid=\"modal-body\"\n            >\n              {children}\n            </section>\n            {modalCardFoot && (\n              <footer\n                className={prefixedClassNames(classPrefix, 'modal-card-foot')}\n              >\n                {modalCardFoot}\n              </footer>\n            )}\n          </div>\n        ) : (\n          <div\n            className={prefixedClassNames(classPrefix, 'modal-content')}\n            data-testid=\"modal-content\"\n          >\n            {children}\n          </div>\n        )}\n        {/* Show floating close button for modal-content, or for modal-card when no header */}\n        {(!isModalCard || (!modalCardTitle && onClose)) && onClose && (\n          <button\n            className={prefixedClassNames(\n              classPrefix,\n              'modal-close',\n              'is-large'\n            )}\n            aria-label=\"close\"\n            onClick={onClose}\n            type=\"button\"\n            data-testid=\"modal-close-float\"\n          />\n        )}\n      </div>\n    );\n  }\n\n  if (isPortaled) {\n    const target = resolveContainer(\n      typeof portal === 'boolean' ? undefined : portal\n    );\n    return createPortal(modalElement, target);\n  }\n\n  return modalElement;\n});\n\nexport const Modal = withSubComponents(\n  ModalRoot,\n  {\n    Background: ModalBackground,\n    Content: ModalContent,\n    Card: ModalCard,\n    Close: ModalClose,\n  },\n  'Modal'\n);\nexport default Modal;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;AA6BA;;;;AAIG;AACH,MAAM,gBAAgB,GAAa,EAAE;AAErC;;;;AAIG;AACH,MAAM,kBAAkB,GACtB,sIAAsI;AAExI;;;;;;;AAOG;AACH,MAAM,WAAW,GAAG,CAAC,IAAiB,KACpC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAc,kBAAkB,CAAC,CAAC,CAAC,MAAM,CACvE,EAAE,IAAI,EAAE,CAAC,QAAQ,IAAI,CAAC,CACvB;AAoIH;;;;;;AAMG;AACH,MAAM,eAAe,GAAmC,CAAC,EACvD,SAAS,EACT,GAAG,KAAK,EACT,KAAI;IACH,MAAM,OAAO,GAAG,UAAU,CACxB,qBAAqB,CAAC,kBAAkB,CAAC,EACzC,SAAS,CACV;AACD,IAAA,OAAOA,aAAK,SAAS,EAAE,OAAO,EAAA,GAAM,KAAK,GAAI;AAC/C,CAAC;AAED;;;;;;AAMG;AACH,MAAM,YAAY,GAAgC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,KAAI;IAC5E,MAAM,OAAO,GAAG,UAAU,CAAC,qBAAqB,CAAC,eAAe,CAAC,EAAE,SAAS,CAAC;AAC7E,IAAA,OAAOA,aAAK,SAAS,EAAE,OAAO,EAAA,GAAM,KAAK,GAAI;AAC/C,CAAC;AAED;;;;;;AAMG;AACH,MAAM,aAAa,GAAiC,CAAC,EACnD,SAAS,EACT,GAAG,KAAK,EACT,KAAI;IACH,MAAM,OAAO,GAAG,UAAU,CACxB,qBAAqB,CAAC,iBAAiB,CAAC,EACxC,SAAS,CACV;AACD,IAAA,OAAOA,gBAAQ,SAAS,EAAE,OAAO,EAAA,GAAM,KAAK,GAAI;AAClD,CAAC;AAED;;;;;;AAMG;AACH,MAAM,cAAc,GAAkC,CAAC,EACrD,SAAS,EACT,GAAG,KAAK,EACT,KAAI;IACH,MAAM,OAAO,GAAG,UAAU,CACxB,qBAAqB,CAAC,kBAAkB,CAAC,EACzC,SAAS,CACV;AACD,IAAA,OAAOA,WAAG,SAAS,EAAE,OAAO,EAAA,GAAM,KAAK,GAAI;AAC7C,CAAC;AAED;;;;;;AAMG;AACH,MAAM,aAAa,GAAiC,CAAC,EACnD,SAAS,EACT,GAAG,KAAK,EACT,KAAI;IACH,MAAM,OAAO,GAAG,UAAU,CACxB,qBAAqB,CAAC,iBAAiB,CAAC,EACxC,SAAS,CACV;AACD,IAAA,OAAOA,iBAAS,SAAS,EAAE,OAAO,EAAA,GAAM,KAAK,GAAI;AACnD,CAAC;AAED;;;;;;AAMG;AACH,MAAM,aAAa,GAAiC,CAAC,EACnD,SAAS,EACT,GAAG,KAAK,EACT,KAAI;IACH,MAAM,OAAO,GAAG,UAAU,CACxB,qBAAqB,CAAC,iBAAiB,CAAC,EACxC,SAAS,CACV;AACD,IAAA,OAAOA,gBAAQ,SAAS,EAAE,OAAO,EAAA,GAAM,KAAK,GAAI;AAClD,CAAC;AAED;;;;;;;AAOG;AACH,MAAM,kBAAkB,GAA6B,CAAC,EACpD,SAAS,EACT,GAAG,KAAK,EACT,KAAI;IACH,MAAM,OAAO,GAAG,UAAU,CAAC,qBAAqB,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC;AAC1E,IAAA,OAAOA,aAAK,SAAS,EAAE,OAAO,EAAA,GAAM,KAAK,GAAI;AAC/C,CAAC;AAED,MAAM,SAAS,GAAG,iBAAiB,CAAC,kBAAkB,EAAE;AACtD,IAAA,IAAI,EAAE,aAAa;AACnB,IAAA,KAAK,EAAE,cAAc;AACrB,IAAA,IAAI,EAAE,aAAa;AACnB,IAAA,IAAI,EAAE,aAAa;AACpB,CAAA,CAAC;AAEF;;;;;;;;;;;;;AAaG;AACH,MAAM,UAAU,GAA8B,CAAC,EAC7C,SAAS,EACT,IAAI,GAAG,OAAO,EACd,OAAO,GAAG,QAAQ,EAClB,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,OAAO,GAAG,UAAU,CACxB,qBAAqB,CACnB,OAAO,KAAK,QAAQ,GAAG,QAAQ,GAAG,aAAa,EAC/C,OAAO,KAAK,UAAU,IAAI,IAAI,IAAI,EAAE,CAAC,CAAA,GAAA,EAAM,IAAI,CAAA,CAAE,GAAG,IAAI,EAAE,CAC3D,EACD,SAAS,CACV;IACD,QACEA,GAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAE,OAAO,KACd,KAAK,EAAA,YAAA,EAMG,KAAK,CAAC,YAAY,CAAC,IAAI,OAAO,EAC1C,IAAI,EAAE,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,EAAA,CAC5B;AAEN,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BG;AACH,MAAM,SAAS,GAAG,UAAU,CAA6B,SAAS,SAAS,CACzE,EACE,MAAM,EACN,QAAQ,EACR,OAAO,EACP,SAAS,EACT,SAAS,EACT,OAAO,EACP,cAAc,EACd,aAAa,EACb,IAAI,EACJ,QAAQ,EACR,aAAa,GAAG,IAAI,EACpB,UAAU,GAAG,IAAI,EACjB,MAAM,GAAG,KAAK,EACd,IAAI,EACJ,YAAY,EAAE,aAAa,EAC3B,GAAG,KAAK,EACT,EACD,GAAG,EAAA;IAEH,MAAM,EAAE,WAAW,EAAE,eAAe,EAAE,GAAG,SAAS,EAAE;AACpD,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;AACnD,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,eAAe,EAAE,OAAO;AACxB,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;;AAGF,IAAA,MAAM,aAAa,GAAG,MAAM,IAAI,QAAQ,IAAI,KAAK;AAEjD,IAAA,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC;;AAGjD,IAAA,MAAM,kBAAkB,GAAG,MAAM,CAAsB,IAAI,CAAC;;;;AAK5D,IAAA,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,IAA2B,KAAI;AAC7B,QAAA,YAA8D,CAAC,OAAO;AACrE,YAAA,IAAI;AACN,QAAA,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;;;;;;;AAO7B,YAAA,IAAI,IAAI,KAAK,IAAI,EAAE;AACjB,gBAAA,MAAM,eAAe,GAAG,kBAAkB,CAAC,OAAO;AAClD,gBAAA,kBAAkB,CAAC,OAAO,GAAG,IAAI;gBACjC,IAAI,eAAe,EAAE;AACnB,oBAAA,eAAe,EAAE;gBACnB;qBAAO;oBACL,GAAG,CAAC,IAAI,CAAC;gBACX;gBACA;YACF;AACA,YAAA,MAAM,OAAO,GAAY,GAAG,CAAC,IAAI,CAAC;AAClC,YAAA,kBAAkB,CAAC,OAAO;gBACxB,OAAO,OAAO,KAAK,UAAU,GAAI,OAAsB,GAAG,IAAI;QAClE;aAAO,IAAI,GAAG,EAAE;AACb,YAAA,GAAqD,CAAC,OAAO,GAAG,IAAI;QACvE;AACF,IAAA,CAAC,EACD,CAAC,GAAG,CAAC,CACN;AACD,IAAA,MAAM,oBAAoB,GAAG,MAAM,CAAqB,IAAI,CAAC;AAC7D,IAAA,MAAM,aAAa,GAAG,MAAM,CAAS,EAAE,CAAC;AACxC,IAAA,MAAM,gBAAgB,GAAG,KAAK,EAAE;;;;AAIhC,IAAA,MAAM,QAAQ,GAAG,aAAa,EAAE;AAChC,IAAA,MAAM,gBAAgB,GAAG,kBAAkB,EAAE;;;;;;IAM7C,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,QAAQ;;;;AAI9C,IAAA,MAAM,aAAa,GACjB,UAAU,IAAI,MAAM,KAAK,IAAI,GAAG,eAAe,GAAG,SAAS;AAE7D,IAAA,aAAa,CAAC,aAAa,IAAI,UAAU,CAAC;;IAG1C,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,aAAa;AAAE,YAAA,OAAO,SAAS;AAEpC,QAAA,MAAM,KAAK,GAAG,aAAa,CAAC,OAAO;AACnC,QAAA,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC;AAC5B,QAAA,OAAO,MAAK;YACV,MAAM,KAAK,GAAG,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC;YAC7C,IAAI,KAAK,KAAK,EAAE;AAAE,gBAAA,gBAAgB,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;AACrD,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC;;;;;IAMnB,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,aAAa;AAAE,YAAA,OAAO,SAAS;AAEpC,QAAA,MAAM,aAAa,GAAG,CAAC,CAAgB,KAAI;AACzC,YAAA,MAAM,IAAI,GAAG,YAAY,CAAC,OAAO;AACjC,YAAA,IACE,gBAAgB,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,aAAa,CAAC,OAAO,EACvE;gBACA;YACF;AAEA,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;;;AAGtB,gBAAA,IAAI,aAAa,IAAI,CAAC,CAAC,CAAC,gBAAgB;oBAAE,OAAO,IAAI;gBACrD;YACF;;;YAGA,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,gBAAgB;gBAAE;;;AAIpD,YAAA,MAAM,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC;AACnC,YAAA,MAAM,aAAa,GAAG,sBAAsB,CAAC,IAAI,CAAC;AAClD,YAAA,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC1B,CAAC,CAAC,cAAc,EAAE;gBAClB,IAAI,CAAC,KAAK,EAAE;gBACZ;YACF;AAEA,YAAA,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC;YAC1B,MAAM,IAAI,GAAG,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;YAC5C,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC;AAC7C,YAAA,IAAI,CAAC,CAAC,QAAQ,EAAE;AACd,gBAAA,IAAI,OAAO,IAAI,aAAa,KAAK,KAAK,EAAE;oBACtC,CAAC,CAAC,cAAc,EAAE;oBAClB,IAAI,CAAC,KAAK,EAAE;gBACd;YACF;AAAO,iBAAA,IAAI,OAAO,IAAI,aAAa,KAAK,IAAI,EAAE;gBAC5C,CAAC,CAAC,cAAc,EAAE;gBAClB,KAAK,CAAC,KAAK,EAAE;YACf;AACF,QAAA,CAAC;AAED,QAAA,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC;QACjD,OAAO,MAAM,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC;IACnE,CAAC,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,OAAO,CAAC,CAAC;;IAG3C,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,aAAa;AAAE,YAAA,OAAO,SAAS;;;AAIpC,QAAA,oBAAoB,CAAC,OAAO;AAC1B,YAAA,uBAAuB,EAAwB;AACjD,QAAA,MAAM,IAAI,GAAG,YAAY,CAAC,OAAO;AACjC,QAAA,MAAM,SAAS,GAAG,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS;AACzD,QAAA,CAAC,SAAS,IAAI,IAAI,GAAG,KAAK,EAAE;AAE5B,QAAA,OAAO,MAAK;;;;AAIV,YAAA,MAAM,aAAa,GAAG,sBAAsB,CAAC,IAAI,CAAC;AAClD,YAAA,IACE,aAAa;gBACb,aAAa,KAAK,QAAQ,CAAC,IAAI;AAC/B,gBAAA,CAAC,IAAI,EAAE,QAAQ,CAAC,aAAa,CAAC,EAC9B;gBACA;YACF;AACA,YAAA,oBAAoB,CAAC,OAAO,EAAE,KAAK,IAAI;AACzC,QAAA,CAAC;;;;;;;IAOH,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC;;IAGtD,MAAM,qBAAqB,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CACjE,KAAK,IACH,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;AAC3B,SAAC,KAAK,CAAC,IAAI,KAAK,eAAe;YAC7B,KAAK,CAAC,IAAI,KAAK,YAAY;YAC3B,KAAK,CAAC,IAAI,KAAK,SAAS;AACxB,YAAA,KAAK,CAAC,IAAI,KAAK,UAAU,CAAC,CAC/B;;AAGD,IAAA,MAAM,YAAY,GAAG,qBAAqB,CAAC,OAAO,EAAE;AAClD,QAAA,WAAW,EAAE,aAAa;AAC3B,KAAA,CAAC;AACF,IAAA,MAAM,WAAW,GAAG,qBAAqB,CAAC,QAAQ,CAAC;IAEnD,MAAM,YAAY,GAAG,UAAU,CAAC,YAAY,EAAE,kBAAkB,EAAE,SAAS,CAAC;AAE5E,IAAA,MAAM,YAAY,GAAG,IAAI,KAAK,aAAa,GAAG,QAAQ,GAAG,SAAS,CAAC;IACnE,MAAM,iBAAiB,GACrB,aAAa;AACb,SAAC,aAAa,IAAI,YAAY,KAAK,cAAc,GAAG,MAAM,GAAG,SAAS,CAAC;;;;IAIzE,MAAM,OAAO,GAAG,cAAc,GAAG,gBAAgB,GAAG,SAAS;AAE7D,IAAA,IAAI,YAAgC;;IAGpC,IAAI,qBAAqB,EAAE;AACzB,QAAA,YAAY,IACVA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,YAAY,EACvB,GAAG,EAAE,WAAW,EAChB,IAAI,EAAE,YAAY,EAAA,YAAA,EACN,iBAAiB,EAC7B,QAAQ,EAAE,EAAE,EAAA,GACR,IAAI,EAAA,aAAA,EACI,OAAO,EAAA,QAAA,EAElB,QAAQ,EAAA,CACL,CACP;IACH;SAAO;;AAEL,QAAA,IAAI,WAAoB;QACxB,IAAI,IAAI,KAAK,MAAM;YAAE,WAAW,GAAG,IAAI;aAClC,IAAI,IAAI,KAAK,SAAS;YAAE,WAAW,GAAG,KAAK;;YAC3C,WAAW,GAAG,CAAC,CAAC,cAAc,IAAI,CAAC,CAAC,aAAa;QAEtD,YAAY,IACVC,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,YAAY,EACvB,GAAG,EAAE,WAAW,EAChB,IAAI,EAAE,YAAY,gBACN,iBAAiB,EAAA,iBAAA,EACZ,OAAO,EACxB,QAAQ,EAAE,EAAE,EAAA,GACR,IAAI,EAAA,aAAA,EACI,OAAO,aAEnBD,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,kBAAkB,CAAC,WAAW,EAAE,kBAAkB,CAAC,EAC9D,OAAO,EAAE,OAAO,EAAA,aAAA,EACJ,kBAAkB,EAAA,CAC9B,EACD,WAAW,IACVC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,kBAAkB,CAAC,WAAW,EAAE,YAAY,CAAC,EAAA,QAAA,EAAA,CAC1D,cAAc,KACbA,IAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAE,kBAAkB,CAAC,WAAW,EAAE,iBAAiB,CAAC,EAAA,QAAA,EAAA,CAE7DD,GAAA,CAAA,GAAA,EAAA,EACE,EAAE,EAAE,OAAO,EACX,SAAS,EAAE,kBAAkB,CAC3B,WAAW,EACX,kBAAkB,CACnB,EAAA,QAAA,EAEA,cAAc,EAAA,CACb,EACH,OAAO,KACNA,GAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAE,WAAW,gBACX,OAAO,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,QAAQ,iBACD,aAAa,EAAA,CACzB,CACH,CAAA,EAAA,CACM,CACV,EACDA,GAAA,CAAA,SAAA,EAAA,EACE,SAAS,EAAE,kBAAkB,CAAC,WAAW,EAAE,iBAAiB,CAAC,iBACjD,YAAY,EAAA,QAAA,EAEvB,QAAQ,EAAA,CACD,EACT,aAAa,KACZA,GAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAE,kBAAkB,CAAC,WAAW,EAAE,iBAAiB,CAAC,EAAA,QAAA,EAE5D,aAAa,GACP,CACV,CAAA,EAAA,CACG,KAENA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,kBAAkB,CAAC,WAAW,EAAE,eAAe,CAAC,iBAC/C,eAAe,EAAA,QAAA,EAE1B,QAAQ,EAAA,CACL,CACP,EAEA,CAAC,CAAC,WAAW,KAAK,CAAC,cAAc,IAAI,OAAO,CAAC,KAAK,OAAO,KACxDA,GAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAE,kBAAkB,CAC3B,WAAW,EACX,aAAa,EACb,UAAU,CACX,EAAA,YAAA,EACU,OAAO,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,QAAQ,EAAA,aAAA,EACD,mBAAmB,EAAA,CAC/B,CACH,CAAA,EAAA,CACG,CACP;IACH;IAEA,IAAI,UAAU,EAAE;AACd,QAAA,MAAM,MAAM,GAAG,gBAAgB,CAC7B,OAAO,MAAM,KAAK,SAAS,GAAG,SAAS,GAAG,MAAM,CACjD;AACD,QAAA,OAAO,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC;IAC3C;AAEA,IAAA,OAAO,YAAY;AACrB,CAAC,CAAC;AAEK,MAAM,KAAK,GAAG,iBAAiB,CACpC,SAAS,EACT;AACE,IAAA,UAAU,EAAE,eAAe;AAC3B,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,IAAI,EAAE,SAAS;AACf,IAAA,KAAK,EAAE,UAAU;CAClB,EACD,OAAO;;"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  classNames,\n  usePrefixedClassNames,\n  prefixedClassNames,\n} from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { buttonType } from '../helpers/buttonType';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { useConfig } from '../helpers/Config';\nimport { useScrollLock } from '../helpers/scrollLock';\nimport {\n  getActiveElementInTree,\n  getDeepestActiveElement,\n} from '../helpers/shadowDom';\nimport { usePortalContainer } from '../helpers/portal';\nimport { useIsHydrated } from '../helpers/useIsHydrated';\nimport { useLatestRef } from '../helpers/useLatestRef';\nimport { useOverlayStack } from '../helpers/overlayStack';\n\n/**\n * Controls the modal can hand focus to. Disabled and hidden controls are\n * excluded because `focus()` on them is a no-op, which would leave focus\n * outside the modal.\n */\nconst FOCUSABLE_SELECTOR =\n  'button:not(:disabled), [href], input:not(:disabled):not([type=\"hidden\"]), select:not(:disabled), textarea:not(:disabled), [tabindex]';\n\n/**\n * The modal's tab stops, in document order. The selector alone is not the\n * tabbable set — `[href]` and `button` match regardless of `tabindex`, so an\n * `<a href tabIndex={-1}>` would otherwise be treated as a tab stop and let\n * Tab escape the modal when it sorts last. `el.tabIndex` is the browser's own\n * resolved value, so filtering on it drops every negative index (not just\n * `-1`) without a second selector to keep in sync.\n */\nconst getTabbable = (node: HTMLElement): HTMLElement[] =>\n  Array.from(node.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(\n    el => el.tabIndex >= 0\n  );\n\n/**\n * Props for the Modal component.\n * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the root `.modal` element.\n */\nexport interface ModalProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'title'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Whether the modal is open/visible. */\n  active?: boolean;\n  /** Alias for `active`. Whether the modal is open/visible. */\n  isActive?: boolean; // Alias for active\n  /** Callback invoked to request modal close (background or close button). */\n  onClose?: () => void;\n  /** Additional CSS classes for the modal. */\n  className?: string;\n  /** Text color for modal content. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color for modal content. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Title/header for modal-card variant. (Legacy API only) */\n  modalCardTitle?: React.ReactNode;\n  /** Footer for modal-card variant. (Legacy API only) */\n  modalCardFoot?: React.ReactNode;\n  /**\n   * Modal style: `'card'` for modal-card, `'content'` for modal-content. (Legacy API only)\n   * @defaultValue auto\n   */\n  type?: 'card' | 'content';\n  /** Modal body/content or compound components. */\n  children?: React.ReactNode;\n  /**\n   * Close the modal when the Escape key is pressed (calls `onClose`). Only the\n   * topmost open overlay responds, whichever Modal, Dialog, Sidebar or\n   * full-page Loading opened last, so Escape closes one layer at a time. The\n   * modal marks the Escape it closes on as used with `preventDefault()`, and\n   * a Toast waits until no overlay is open. Turned off, a modal on top still\n   * keeps Escape from the layers under it. A popup inside it, such as a\n   * Dropdown's menu or a date picker's calendar, takes its own Escape first,\n   * and so does content that calls `preventDefault()` on it.\n   * @defaultValue true\n   */\n  closeOnEscape?: boolean;\n  /**\n   * Lock body scroll while the modal is active. Ref-counted and shared with\n   * `Dialog`, `Sidebar` and `Loading`, so whichever overlay closes first does\n   * not unlock the page underneath one that is still open.\n   * @defaultValue true\n   */\n  lockScroll?: boolean;\n  /**\n   * Renders the modal into a portal target instead of inline, so it isn't\n   * clipped by an ancestor with `overflow: hidden`, `filter` or `transform`.\n   * `true` portals to the `portalContainer` a `ConfigProvider` sets,\n   * `document.body` by default; a string is used as a\n   * `document.querySelector` selector; an element is used directly. Renders\n   * inline on the server and while hydrating, moving into the portal once the\n   * client takes over, so hydration matches.\n   * @defaultValue false\n   */\n  portal?: boolean | string | HTMLElement;\n}\n\n/**\n * Props for Modal.Background component.\n */\nexport interface ModalBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Content component.\n */\nexport interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Card component.\n */\nexport interface ModalCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Card.Head component.\n */\nexport interface ModalCardHeadProps extends React.HTMLAttributes<HTMLElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Card.Title component.\n */\nexport interface ModalCardTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Card.Body component.\n */\nexport interface ModalCardBodyProps extends React.HTMLAttributes<HTMLElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Card.Foot component.\n */\nexport interface ModalCardFootProps extends React.HTMLAttributes<HTMLElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Close component.\n * @extraProp {'button' | 'submit' | 'reset'} [type='button'] - Button type. Defaults to `'button'`, so a close button inside a form does not submit it. Pass `'submit'` or `'reset'` and yours is used; any other value, or a spread carrying `type: undefined`, renders `'button'`.\n * @extraProp {string} [aria-label='close'] - Accessible name. Pass your own to replace it. An empty one, or a spread carrying `'aria-label': undefined`, keeps the default rather than leaving the button unnamed.\n */\nexport interface ModalCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Size of the close button (only applies to 'floating' variant). */\n  size?: 'small' | 'medium' | 'large';\n  /** Button variant. 'delete' (default) for modal card headers, 'floating' for overlay close button. */\n  variant?: 'delete' | 'floating';\n}\n\n/**\n * Modal.Background - Renders the modal background overlay.\n *\n * @function\n * @param {ModalBackgroundProps} props - Component props.\n * @returns {JSX.Element} Modal background element.\n */\nconst ModalBackground: React.FC<ModalBackgroundProps> = ({\n  className,\n  ...props\n}) => {\n  const classes = classNames(\n    usePrefixedClassNames('modal-background'),\n    className\n  );\n  return <div className={classes} {...props} />;\n};\n\n/**\n * Modal.Content - Renders modal content wrapper for custom content.\n *\n * @function\n * @param {ModalContentProps} props - Component props.\n * @returns {JSX.Element} Modal content element.\n */\nconst ModalContent: React.FC<ModalContentProps> = ({ className, ...props }) => {\n  const classes = classNames(usePrefixedClassNames('modal-content'), className);\n  return <div className={classes} {...props} />;\n};\n\n/**\n * Modal.Card.Head - Renders modal card header section.\n *\n * @function\n * @param {ModalCardHeadProps} props - Component props.\n * @returns {JSX.Element} Modal card header element.\n */\nconst ModalCardHead: React.FC<ModalCardHeadProps> = ({\n  className,\n  ...props\n}) => {\n  const classes = classNames(\n    usePrefixedClassNames('modal-card-head'),\n    className\n  );\n  return <header className={classes} {...props} />;\n};\n\n/**\n * Modal.Card.Title - Renders modal card title.\n *\n * @function\n * @param {ModalCardTitleProps} props - Component props.\n * @returns {JSX.Element} Modal card title element.\n */\nconst ModalCardTitle: React.FC<ModalCardTitleProps> = ({\n  className,\n  ...props\n}) => {\n  const classes = classNames(\n    usePrefixedClassNames('modal-card-title'),\n    className\n  );\n  return <p className={classes} {...props} />;\n};\n\n/**\n * Modal.Card.Body - Renders modal card body section.\n *\n * @function\n * @param {ModalCardBodyProps} props - Component props.\n * @returns {JSX.Element} Modal card body element.\n */\nconst ModalCardBody: React.FC<ModalCardBodyProps> = ({\n  className,\n  ...props\n}) => {\n  const classes = classNames(\n    usePrefixedClassNames('modal-card-body'),\n    className\n  );\n  return <section className={classes} {...props} />;\n};\n\n/**\n * Modal.Card.Foot - Renders modal card footer section.\n *\n * @function\n * @param {ModalCardFootProps} props - Component props.\n * @returns {JSX.Element} Modal card footer element.\n */\nconst ModalCardFoot: React.FC<ModalCardFootProps> = ({\n  className,\n  ...props\n}) => {\n  const classes = classNames(\n    usePrefixedClassNames('modal-card-foot'),\n    className\n  );\n  return <footer className={classes} {...props} />;\n};\n\n/**\n * Modal.Card - Renders modal card wrapper with compound components.\n * Use with Modal.Card.Head, Modal.Card.Title, Modal.Card.Body, and Modal.Card.Foot.\n *\n * @function\n * @param {ModalCardProps} props - Component props.\n * @returns {JSX.Element} Modal card element.\n */\nconst ModalCardComponent: React.FC<ModalCardProps> = ({\n  className,\n  ...props\n}) => {\n  const classes = classNames(usePrefixedClassNames('modal-card'), className);\n  return <div className={classes} {...props} />;\n};\n\nconst ModalCard = withSubComponents(ModalCardComponent, {\n  Head: ModalCardHead,\n  Title: ModalCardTitle,\n  Body: ModalCardBody,\n  Foot: ModalCardFoot,\n});\n\n/**\n * Modal.Close - Renders modal close button with two variant styles.\n *\n * @function\n * @param {ModalCloseProps} props - Component props.\n * @returns {JSX.Element} Close button element.\n *\n * @remarks\n * Supports two variants:\n * - 'delete' (default): For use in modal card headers, renders with 'delete' class\n * - 'floating': For floating overlay close button, renders with 'modal-close' class\n *\n * The size prop only applies to the 'floating' variant.\n */\nconst ModalClose: React.FC<ModalCloseProps> = ({\n  className,\n  size = 'large',\n  variant = 'delete',\n  ...props\n}) => {\n  const classes = classNames(\n    usePrefixedClassNames(\n      variant === 'delete' ? 'delete' : 'modal-close',\n      variant === 'floating' && size && { [`is-${size}`]: true }\n    ),\n    className\n  );\n  return (\n    <button\n      className={classes}\n      {...props}\n      // After the spread, reading through it: a key the spread carries with no\n      // value would otherwise erase the default, leaving a nameless button\n      // that submits the form around it. An empty label falls back too: the\n      // button is drawn as an icon, so `''` would leave it unnamed. A caller's\n      // own value still wins; `buttonType` says more.\n      aria-label={props['aria-label'] || 'close'}\n      type={buttonType(props.type)}\n    />\n  );\n};\n\n/**\n * The `Modal` component provides an empty, accessible overlay for arbitrary content — for a ready-made confirm or alert, reach for `Dialog` instead.\n *\n * @function\n * @param {ModalProps} props - Props for the Modal component.\n * @returns {JSX.Element} The rendered modal.\n *\n * @example\n * // Legacy API\n * <Modal active={isOpen} onClose={handleClose} modalCardTitle=\"Title\">\n *   Content\n * </Modal>\n *\n * @example\n * // Compound Component API\n * <Modal isActive={isOpen}>\n *   <Modal.Background onClick={handleClose} />\n *   <Modal.Card>\n *     <Modal.Card.Head>\n *       <Modal.Card.Title>Title</Modal.Card.Title>\n *       <Modal.Close onClick={handleClose} />\n *     </Modal.Card.Head>\n *     <Modal.Card.Body>Content</Modal.Card.Body>\n *   </Modal.Card>\n * </Modal>\n *\n * @see {@link https://bulma.io/documentation/components/modal/ | Bulma Modal documentation}\n */\nconst ModalRoot = forwardRef<HTMLDivElement, ModalProps>(function ModalRoot(\n  {\n    active,\n    isActive,\n    onClose,\n    className,\n    textColor,\n    bgColor,\n    modalCardTitle,\n    modalCardFoot,\n    type,\n    children,\n    closeOnEscape = true,\n    lockScroll = true,\n    portal = false,\n    role,\n    'aria-modal': ariaModalProp,\n    ...props\n  },\n  ref\n) {\n  const { classPrefix, portalContainer } = useConfig();\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  });\n\n  // Support both active and isActive props\n  const isModalActive = active ?? isActive ?? false;\n\n  const modalRootRef = useRef<HTMLDivElement>(null);\n\n  // Cleanup returned by a consumer's callback ref on attach, held until detach.\n  const consumerCleanupRef = useRef<(() => void) | null>(null);\n\n  // The forwarded ref and the internal one must both see the node: focus\n  // management and the Tab trap read `modalRootRef`, while consumers expect\n  // their own ref to resolve.\n  const combinedRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      (modalRootRef as React.MutableRefObject<HTMLDivElement | null>).current =\n        node;\n      if (typeof ref === 'function') {\n        // React 19 lets a callback ref return a cleanup function and detaches\n        // by running it instead of calling the ref with `null`; React 18\n        // discards the return value entirely. Returning it from here would be\n        // a React-19-only contract, so instead we hold the cleanup and run it\n        // ourselves on detach — a consumer's cleanup ref then behaves the same\n        // on both majors of the CI matrix. Same shape as `Dropdown`.\n        if (node === null) {\n          const consumerCleanup = consumerCleanupRef.current;\n          consumerCleanupRef.current = null;\n          if (consumerCleanup) {\n            consumerCleanup();\n          } else {\n            ref(null);\n          }\n          return;\n        }\n        const cleanup: unknown = ref(node);\n        consumerCleanupRef.current =\n          typeof cleanup === 'function' ? (cleanup as () => void) : null;\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      }\n    },\n    [ref]\n  );\n  const previouslyFocusedRef = useRef<HTMLElement | null>(null);\n  const generatedTitleId = useId();\n  // A portal has no server-rendered counterpart, so the server render and the\n  // hydrating render have to stay inline and only move into the portal once\n  // we're past hydration.\n  const onClient = useIsHydrated();\n  const resolveContainer = usePortalContainer();\n  // Moving into the portal, or from one portal target to another, remounts\n  // the modal's subtree, so any effect holding a DOM node from before the move\n  // is holding a detached one. Effects that touch the modal's nodes key on\n  // this, on `portal` and on `defaultTarget`, so they re-run against the new\n  // tree.\n  const isPortaled = Boolean(portal) && onClient;\n  // The configured `portalContainer` only places a modal portaled with\n  // `portal` set to `true`. In place, or with a target of its own, a change\n  // to it moves nothing, so it mustn't re-run the effects either.\n  const defaultTarget =\n    isPortaled && portal === true ? portalContainer : undefined;\n\n  useScrollLock(isModalActive && lockScroll);\n\n  // Read when Escape arrives, so the key listener stays put while `onClose`\n  // changes identity, as an inline one does on every render of the parent.\n  const onCloseRef = useLatestRef(onClose);\n\n  // Joins the stack of open overlays, so the keyboard handling below only\n  // applies while this modal is the topmost overlay.\n  const isTopmost = useOverlayStack(isModalActive);\n\n  // Escape closes; Tab cycles inside the modal. Both only for the topmost\n  // overlay. The listener is on `window`, where a keydown arrives last, so\n  // everything inside the modal has had the key first: React's handlers, and\n  // `document` listeners added after this one, such as a date picker's.\n  useEffect(() => {\n    if (!isModalActive) return undefined;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      const node = modalRootRef.current;\n      if (!isTopmost()) return;\n\n      if (e.key === 'Escape') {\n        // Something inside already used this Escape, such as a popup that\n        // closed on it, so the modal waits for the next one. One the modal\n        // closes on is marked used, so nothing under it acts on it as well.\n        if (closeOnEscape && onCloseRef.current && !e.defaultPrevented) {\n          e.preventDefault();\n          onCloseRef.current();\n        }\n        return;\n      }\n      // A trap inside the modal, such as a portaled popup's, already moved\n      // focus on this Tab, so the modal leaves it where it went.\n      if (e.key !== 'Tab' || !node || e.defaultPrevented) return;\n\n      // Keep Tab within the modal — `aria-modal` hides the rest of the page\n      // from assistive technology, so the keyboard order has to agree.\n      const focusable = getTabbable(node);\n      const activeElement = getActiveElementInTree(node);\n      if (focusable.length === 0) {\n        e.preventDefault();\n        node.focus();\n        return;\n      }\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      const outside = !node.contains(activeElement);\n      if (e.shiftKey) {\n        if (outside || activeElement === first) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else if (outside || activeElement === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [isModalActive, closeOnEscape, onCloseRef, isTopmost]);\n\n  // Move focus into the modal on open, restore it on close\n  useEffect(() => {\n    if (!isModalActive) return undefined;\n\n    // The element that had focus, wherever it sits: a portaled modal renders\n    // under `document.body` while its opener can be inside a shadow root.\n    previouslyFocusedRef.current =\n      getDeepestActiveElement() as HTMLElement | null;\n    const node = modalRootRef.current;\n    const focusable = node ? getTabbable(node)[0] : undefined;\n    (focusable ?? node)?.focus();\n\n    return () => {\n      // Only hand focus back if this modal still owns it: closing a background\n      // modal must not pull focus out of one that is still open on top. A\n      // removed subtree leaves focus on <body>, which still counts as ours.\n      const activeElement = getActiveElementInTree(node);\n      if (\n        activeElement &&\n        activeElement !== document.body &&\n        !node?.contains(activeElement)\n      ) {\n        return;\n      }\n      previouslyFocusedRef.current?.focus?.();\n    };\n    // `isPortaled` flips once when a hydrated portal modal moves out of the\n    // inline tree, and `portal` or `defaultTarget` changing moves a portaled\n    // one to another target; re-running rebinds focus onto the remounted\n    // nodes. The cleanup above restores focus to the pre-open element first\n    // (the detached subtree has left focus on <body>), so the re-run re-records\n    // the same element and restore-on-close still lands in the right place.\n  }, [isModalActive, isPortaled, portal, defaultTarget]);\n\n  // Check if children contain compound components\n  const hasCompoundComponents = React.Children.toArray(children).some(\n    child =>\n      React.isValidElement(child) &&\n      (child.type === ModalBackground ||\n        child.type === ModalContent ||\n        child.type === ModalCard ||\n        child.type === ModalClose)\n  );\n\n  // Generate Bulma classes with prefix\n  const bulmaClasses = usePrefixedClassNames('modal', {\n    'is-active': isModalActive,\n  });\n  const deleteClass = usePrefixedClassNames('delete');\n\n  const modalClasses = classNames(bulmaClasses, bulmaHelperClasses, className);\n\n  const resolvedRole = role ?? (isModalActive ? 'dialog' : undefined);\n  const resolvedAriaModal =\n    ariaModalProp ??\n    (isModalActive && resolvedRole !== 'presentation' ? 'true' : undefined);\n  // A dialog needs an accessible name: the legacy card title is wired up\n  // automatically, compound users pass their own aria-label/aria-labelledby\n  // (both arrive in `rest`, which is spread last and so wins).\n  const titleId = modalCardTitle ? generatedTitleId : undefined;\n\n  let modalElement: React.ReactElement;\n\n  // If using compound components, render children as-is\n  if (hasCompoundComponents) {\n    modalElement = (\n      <div\n        className={modalClasses}\n        ref={combinedRef}\n        role={resolvedRole}\n        aria-modal={resolvedAriaModal}\n        tabIndex={-1}\n        {...rest}\n        data-testid=\"modal\"\n      >\n        {children}\n      </div>\n    );\n  } else {\n    // Legacy API: EXPLICIT type wins; fallback to auto detection if not provided\n    let isModalCard: boolean;\n    if (type === 'card') isModalCard = true;\n    else if (type === 'content') isModalCard = false;\n    else isModalCard = !!modalCardTitle || !!modalCardFoot;\n\n    modalElement = (\n      <div\n        className={modalClasses}\n        ref={combinedRef}\n        role={resolvedRole}\n        aria-modal={resolvedAriaModal}\n        aria-labelledby={titleId}\n        tabIndex={-1}\n        {...rest}\n        data-testid=\"modal\"\n      >\n        <div\n          className={prefixedClassNames(classPrefix, 'modal-background')}\n          onClick={onClose}\n          data-testid=\"modal-background\"\n        />\n        {isModalCard ? (\n          <div className={prefixedClassNames(classPrefix, 'modal-card')}>\n            {modalCardTitle && (\n              <header\n                className={prefixedClassNames(classPrefix, 'modal-card-head')}\n              >\n                <p\n                  id={titleId}\n                  className={prefixedClassNames(\n                    classPrefix,\n                    'modal-card-title'\n                  )}\n                >\n                  {modalCardTitle}\n                </p>\n                {onClose && (\n                  <button\n                    className={deleteClass}\n                    aria-label=\"close\"\n                    onClick={onClose}\n                    type=\"button\"\n                    data-testid=\"modal-close\"\n                  />\n                )}\n              </header>\n            )}\n            <section\n              className={prefixedClassNames(classPrefix, 'modal-card-body')}\n              data-testid=\"modal-body\"\n            >\n              {children}\n            </section>\n            {modalCardFoot && (\n              <footer\n                className={prefixedClassNames(classPrefix, 'modal-card-foot')}\n              >\n                {modalCardFoot}\n              </footer>\n            )}\n          </div>\n        ) : (\n          <div\n            className={prefixedClassNames(classPrefix, 'modal-content')}\n            data-testid=\"modal-content\"\n          >\n            {children}\n          </div>\n        )}\n        {/* Show floating close button for modal-content, or for modal-card when no header */}\n        {(!isModalCard || (!modalCardTitle && onClose)) && onClose && (\n          <button\n            className={prefixedClassNames(\n              classPrefix,\n              'modal-close',\n              'is-large'\n            )}\n            aria-label=\"close\"\n            onClick={onClose}\n            type=\"button\"\n            data-testid=\"modal-close-float\"\n          />\n        )}\n      </div>\n    );\n  }\n\n  if (isPortaled) {\n    const target = resolveContainer(\n      typeof portal === 'boolean' ? undefined : portal\n    );\n    return createPortal(modalElement, target);\n  }\n\n  return modalElement;\n});\n\nexport const Modal = withSubComponents(\n  ModalRoot,\n  {\n    Background: ModalBackground,\n    Content: ModalContent,\n    Card: ModalCard,\n    Close: ModalClose,\n  },\n  'Modal'\n);\nexport default Modal;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/components/Sidebar.js

@@ -9,6 +9,8 @@ import { useScrollLock } from '../helpers/scrollLock.js';
 import { usePortalContainer } from '../helpers/portal.js';
 import { useConfig } from '../helpers/Config.js';
 import { buttonType } from '../helpers/buttonType.js';
+import { useLatestRef } from '../helpers/useLatestRef.js';
+import { useOverlayStack } from '../helpers/overlayStack.js';
 
 /**
  * The `Sidebar` component provides a slide-out navigation panel that appears from the left or right side of the screen.
@@ -59,19 +61,29 @@ const SidebarComponent = forwardRef(({ isOpen, onClose, position = 'left', width
             handleClose();
         }
     }, [overlayClose, handleClose]);
+    // Read when Escape arrives, so the key listener stays put while
+    // `onClose` changes identity, as an inline one does on every render of
+    // the parent.
+    const handleCloseRef = useLatestRef(handleClose);
+    // Joins the stack of open overlays, so the sidebar answers Escape only
+    // while it's the topmost overlay, and keeps it from those under it.
+    const isTopmost = useOverlayStack(isOpen);
+    const closesOnEscape = escapeClose && canCancel && Boolean(onClose);
     // Handle escape key. On `window`, as in `Modal`, so everything inside the
-    // sidebar has had the key first, and an Escape it used is left to it.
+    // sidebar has had the key first, and an Escape it used is left to it. One
+    // the sidebar closes on is marked used, so nothing under it acts on it.
     useEffect(() => {
-        if (!isOpen || !escapeClose)
+        if (!isOpen || !closesOnEscape)
             return;
         const handleKeyDown = (e) => {
-            if (e.key === 'Escape' && !e.defaultPrevented) {
-                handleClose();
-            }
+            if (e.key !== 'Escape' || e.defaultPrevented || !isTopmost())
+                return;
+            e.preventDefault();
+            handleCloseRef.current();
         };
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [isOpen, escapeClose, handleClose]);
+    }, [isOpen, closesOnEscape, handleCloseRef, isTopmost]);
     // Prevent body scroll when sidebar is open. Ref-counted through the shared
     // helper so an overlapping Modal/Dialog/Loading doesn't unlock underneath.
     useScrollLock(isOpen && overlay);
@@ -81,6 +93,7 @@ const SidebarComponent = forwardRef(({ isOpen, onClose, position = 'left', width
     useEffect(() => {
         if (isOpen) {
             const element = sidebarRef.current;
+            /* istanbul ignore else: the aside renders whenever the sidebar is open, so its ref is set before this runs */
             if (element) {
                 // Focus first focusable element or sidebar itself
                 const focusable = element.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');

package/dist/esm/components/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../src/components/Sidebar.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useCallback, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { useScrollLock } from '../helpers/scrollLock';\nimport { usePortalContainer } from '../helpers/portal';\nimport { useConfig } from '../helpers/Config';\nimport { buttonType } from '../helpers/buttonType';\n\n/** Position of the sidebar relative to the viewport. */\nexport type SidebarPosition = 'left' | 'right';\n\n/**\n * Props for the Sidebar component.\n * @extraProp {string} [className] - Additional CSS classes.\n * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the sidebar element.\n */\nexport interface SidebarProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'color'>,\n    BulmaClassesProps {\n  /** Whether the sidebar is open (required). */\n  isOpen: boolean;\n  /** Callback when sidebar should close. */\n  onClose?: () => void;\n  /** Which side the sidebar appears from. Default: 'left'. */\n  position?: SidebarPosition;\n  /** Custom width of the sidebar. */\n  width?: string;\n  /** Sidebar takes full width (mobile-style). */\n  isFullwidth?: boolean;\n  /** Sidebar takes full width (mobile-style). @deprecated Use `isFullwidth` instead — `isFullwidth` wins if both are set. */\n  fullWidth?: boolean;\n  /** Show overlay behind sidebar. Default: true. */\n  overlay?: boolean;\n  /** Close sidebar when overlay is clicked. Default: true. */\n  overlayClose?: boolean;\n  /**\n   * Close sidebar on Escape key. A popup inside it, such as a Dropdown's menu\n   * or a date picker's calendar, takes its own Escape first, and so does\n   * content that calls `preventDefault()` on it. Default: true.\n   */\n  escapeClose?: boolean;\n  /** Allow closing the sidebar. Default: true. */\n  canCancel?: boolean;\n  /** Content to display in the sidebar. */\n  children?: React.ReactNode;\n  /** Renders inline instead of using a portal. */\n  inline?: boolean;\n}\n\n/**\n * The `Sidebar` component provides a slide-out navigation panel that appears from the left or right side of the screen.\n *\n * @function\n * @param {SidebarProps} props - Props for the Sidebar component.\n * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the sidebar element.\n * @returns {JSX.Element | null} The rendered sidebar component.\n *\n * @example\n * // Basic sidebar\n * const [isOpen, setIsOpen] = useState(false);\n * <Sidebar isOpen={isOpen} onClose={() => setIsOpen(false)}>\n *   <Menu>...</Menu>\n * </Sidebar>\n *\n * @example\n * // Right-side sidebar with custom width\n * <Sidebar\n *   isOpen={isOpen}\n *   onClose={() => setIsOpen(false)}\n *   position=\"right\"\n *   width=\"320px\"\n * >\n *   <div>Panel content</div>\n * </Sidebar>\n */\nconst SidebarComponent = forwardRef<HTMLElement, SidebarProps>(\n  (\n    {\n      isOpen,\n      onClose,\n      position = 'left',\n      width = '260px',\n      isFullwidth,\n      fullWidth,\n      overlay = true,\n      overlayClose = true,\n      escapeClose = true,\n      canCancel = true,\n      children,\n      inline = false,\n      className,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n    const resolveContainer = usePortalContainer();\n    const { portalContainer } = useConfig();\n    // Where the configured default puts the sidebar. An `inline` one doesn't\n    // portal, so a change to the default moves nothing.\n    const defaultTarget = inline ? undefined : portalContainer;\n    const sidebarRef = useRef<HTMLElement>(null);\n    // Cleanup returned by a consumer's callback ref on attach, held until detach.\n    const consumerCleanupRef = useRef<(() => void) | null>(null);\n    const resolvedFullwidth = isFullwidth ?? fullWidth ?? false;\n\n    // Close handler\n    const handleClose = useCallback(() => {\n      if (canCancel && onClose) {\n        onClose();\n      }\n    }, [canCancel, onClose]);\n\n    // Handle overlay click\n    const handleOverlayClick = useCallback(() => {\n      if (overlayClose) {\n        handleClose();\n      }\n    }, [overlayClose, handleClose]);\n\n    // Handle escape key. On `window`, as in `Modal`, so everything inside the\n    // sidebar has had the key first, and an Escape it used is left to it.\n    useEffect(() => {\n      if (!isOpen || !escapeClose) return;\n\n      const handleKeyDown = (e: KeyboardEvent) => {\n        if (e.key === 'Escape' && !e.defaultPrevented) {\n          handleClose();\n        }\n      };\n\n      window.addEventListener('keydown', handleKeyDown);\n      return () => window.removeEventListener('keydown', handleKeyDown);\n    }, [isOpen, escapeClose, handleClose]);\n\n    // Prevent body scroll when sidebar is open. Ref-counted through the shared\n    // helper so an overlapping Modal/Dialog/Loading doesn't unlock underneath.\n    useScrollLock(isOpen && overlay);\n\n    // Focus trap (basic - focus sidebar when opened). A different\n    // `defaultTarget` remounts the portaled sidebar, so it focuses the new\n    // nodes then too.\n    useEffect(() => {\n      if (isOpen) {\n        const element = sidebarRef.current;\n        if (element) {\n          // Focus first focusable element or sidebar itself\n          const focusable = element.querySelector<HTMLElement>(\n            'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n          );\n          if (focusable) {\n            focusable.focus();\n          } else {\n            element.focus();\n          }\n        }\n      }\n    }, [isOpen, defaultTarget]);\n\n    // Use combined ref\n    const combinedRef = useCallback(\n      (node: HTMLElement | null) => {\n        (sidebarRef as React.MutableRefObject<HTMLElement | null>).current =\n          node;\n        if (typeof ref === 'function') {\n          // React 19 lets a callback ref return a cleanup function and detaches by\n          // running it instead of calling the ref with `null`; React 18 discards the\n          // return value entirely. Returning it from here would be a React-19-only\n          // contract, so we hold the cleanup and run it ourselves on detach — the\n          // same shape as `Dropdown`, `Modal`, `Dialog`, `Toast` and `Carousel`.\n          // The form controls that merge a forwarded ref still discard the cleanup\n          // and detach with `ref(null)`, so this is not yet library-wide — grep\n          // `typeof ref === 'function'` for the current split.\n          if (node === null) {\n            const consumerCleanup = consumerCleanupRef.current;\n            consumerCleanupRef.current = null;\n            if (consumerCleanup) {\n              consumerCleanup();\n            } else {\n              ref(null);\n            }\n            return;\n          }\n          const cleanup: unknown = ref(node);\n          consumerCleanupRef.current =\n            typeof cleanup === 'function' ? (cleanup as () => void) : null;\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLElement | null>).current = node;\n        }\n      },\n      [ref]\n    );\n\n    // Generate classes\n    const sidebarClasses = usePrefixedClassNames('sidebar', {\n      'is-active': isOpen,\n      [`is-${position}`]: position,\n      'is-fullwidth': resolvedFullwidth,\n    });\n    const backgroundClass = usePrefixedClassNames('sidebar-background', {\n      'is-active': isOpen,\n    });\n    const contentClass = usePrefixedClassNames('sidebar-content');\n\n    const combinedClasses = classNames(\n      sidebarClasses,\n      bulmaHelperClasses,\n      className\n    );\n\n    // Custom style for width\n    const sidebarStyle: React.CSSProperties = {\n      ...style,\n      '--bulma-sidebar-width': resolvedFullwidth ? '100%' : width,\n    } as React.CSSProperties;\n\n    const sidebarContent = (\n      <>\n        {overlay && (\n          <div\n            className={backgroundClass}\n            onClick={handleOverlayClick}\n            aria-hidden=\"true\"\n          />\n        )}\n        <aside\n          ref={combinedRef}\n          className={combinedClasses}\n          style={sidebarStyle}\n          role=\"dialog\"\n          aria-modal={overlay ? 'true' : undefined}\n          aria-hidden={!isOpen}\n          tabIndex={-1}\n          {...rest}\n        >\n          <div className={contentClass}>{children}</div>\n        </aside>\n      </>\n    );\n\n    if (inline) {\n      return sidebarContent;\n    }\n\n    // Render to portal for proper stacking\n    if (typeof document !== 'undefined') {\n      return createPortal(sidebarContent, resolveContainer());\n    }\n\n    return null;\n  }\n);\n\n// Sub-components\n\n/**\n * Props for the SidebarHeader component.\n */\ninterface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Header content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Container for the sidebar header.\n *\n * @function\n * @param {SidebarHeaderProps} props - Props for the SidebarHeader component.\n * @returns {JSX.Element} The rendered sidebar header.\n */\nconst SidebarHeader: React.FC<SidebarHeaderProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const headerClass = usePrefixedClassNames('sidebar-header');\n  return (\n    <div className={classNames(headerClass, className)} {...props}>\n      {children}\n    </div>\n  );\n};\n\n/**\n * Props for the SidebarTitle component.\n */\ninterface SidebarTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  /** Title content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Title text inside the header.\n *\n * @function\n * @param {SidebarTitleProps} props - Props for the SidebarTitle component.\n * @returns {JSX.Element} The rendered sidebar title.\n */\nconst SidebarTitle: React.FC<SidebarTitleProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const titleClass = usePrefixedClassNames('sidebar-title');\n  return (\n    <p className={classNames(titleClass, className)} {...props}>\n      {children}\n    </p>\n  );\n};\n\n/**\n * Props for the SidebarClose component.\n * Extends standard button attributes.\n * @extraProp {'button' | 'submit' | 'reset'} [type='button'] - Button type. Defaults to `'button'`, so a close button inside a form does not submit it. Pass `'submit'` or `'reset'` and yours is used; any other value, or a spread carrying `type: undefined`, renders `'button'`.\n * @extraProp {string} [aria-label='Close'] - Accessible name. Pass your own to replace it. An empty one, or a spread carrying `'aria-label': undefined`, keeps the default rather than leaving the button unnamed.\n */\ntype SidebarCloseProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * Close button for the sidebar.\n *\n * @function\n * @param {SidebarCloseProps} props - Props for the SidebarClose component.\n * @returns {JSX.Element} The rendered close button.\n */\nconst SidebarClose: React.FC<SidebarCloseProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const closeClass = usePrefixedClassNames('sidebar-close');\n  return (\n    <button\n      className={classNames(closeClass, className)}\n      {...props}\n      // After the spread, reading through it: a key the spread carries with no\n      // value would otherwise erase the default, leaving a nameless button\n      // that submits the form around it. An empty label falls back too: the\n      // button is drawn as an icon, so `''` would leave it unnamed. A caller's\n      // own value still wins; `buttonType` says more.\n      aria-label={props['aria-label'] || 'Close'}\n      type={buttonType(props.type)}\n    >\n      {children}\n    </button>\n  );\n};\n\n/**\n * Props for the SidebarBody component.\n */\ninterface SidebarBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Body content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Main content area of the sidebar.\n *\n * @function\n * @param {SidebarBodyProps} props - Props for the SidebarBody component.\n * @returns {JSX.Element} The rendered sidebar body.\n */\nconst SidebarBody: React.FC<SidebarBodyProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const bodyClass = usePrefixedClassNames('sidebar-body');\n  return (\n    <div className={classNames(bodyClass, className)} {...props}>\n      {children}\n    </div>\n  );\n};\n\n/**\n * Props for the SidebarFooter component.\n */\ninterface SidebarFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Footer content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Footer area of the sidebar.\n *\n * @function\n * @param {SidebarFooterProps} props - Props for the SidebarFooter component.\n * @returns {JSX.Element} The rendered sidebar footer.\n */\nconst SidebarFooter: React.FC<SidebarFooterProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const footerClass = usePrefixedClassNames('sidebar-footer');\n  return (\n    <div className={classNames(footerClass, className)} {...props}>\n      {children}\n    </div>\n  );\n};\n\n// Attach static subcomponents\nexport const Sidebar = withSubComponents(\n  SidebarComponent,\n  {\n    Header: SidebarHeader,\n    Title: SidebarTitle,\n    Close: SidebarClose,\n    Body: SidebarBody,\n    Footer: SidebarFooter,\n  },\n  'Sidebar'\n);\n\nexport default Sidebar;\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
+{"version":3,"file":"Sidebar.js","sources":["../../../src/components/Sidebar.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useCallback, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { useScrollLock } from '../helpers/scrollLock';\nimport { usePortalContainer } from '../helpers/portal';\nimport { useConfig } from '../helpers/Config';\nimport { buttonType } from '../helpers/buttonType';\nimport { useLatestRef } from '../helpers/useLatestRef';\nimport { useOverlayStack } from '../helpers/overlayStack';\n\n/** Position of the sidebar relative to the viewport. */\nexport type SidebarPosition = 'left' | 'right';\n\n/**\n * Props for the Sidebar component.\n * @extraProp {string} [className] - Additional CSS classes.\n * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the sidebar element.\n */\nexport interface SidebarProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'color'>,\n    BulmaClassesProps {\n  /** Whether the sidebar is open (required). */\n  isOpen: boolean;\n  /** Callback when sidebar should close. */\n  onClose?: () => void;\n  /** Which side the sidebar appears from. Default: 'left'. */\n  position?: SidebarPosition;\n  /** Custom width of the sidebar. */\n  width?: string;\n  /** Sidebar takes full width (mobile-style). */\n  isFullwidth?: boolean;\n  /** Sidebar takes full width (mobile-style). @deprecated Use `isFullwidth` instead — `isFullwidth` wins if both are set. */\n  fullWidth?: boolean;\n  /** Show overlay behind sidebar. Default: true. */\n  overlay?: boolean;\n  /** Close sidebar when overlay is clicked. Default: true. */\n  overlayClose?: boolean;\n  /**\n   * Close sidebar on Escape key. Only the topmost open overlay responds,\n   * whichever Modal, Dialog, Sidebar or full-page Loading opened last, so\n   * Escape closes one layer at a time. The sidebar marks the Escape it closes\n   * on as used with `preventDefault()`, and a Toast waits until no overlay is\n   * open. Turned off, a sidebar on top still keeps Escape from the layers\n   * under it. A popup inside it, such as a Dropdown's menu or a date picker's\n   * calendar, takes its own Escape first, and so does content that calls\n   * `preventDefault()` on it. Default: true.\n   */\n  escapeClose?: boolean;\n  /** Allow closing the sidebar. Default: true. */\n  canCancel?: boolean;\n  /** Content to display in the sidebar. */\n  children?: React.ReactNode;\n  /** Renders inline instead of using a portal. */\n  inline?: boolean;\n}\n\n/**\n * The `Sidebar` component provides a slide-out navigation panel that appears from the left or right side of the screen.\n *\n * @function\n * @param {SidebarProps} props - Props for the Sidebar component.\n * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the sidebar element.\n * @returns {JSX.Element | null} The rendered sidebar component.\n *\n * @example\n * // Basic sidebar\n * const [isOpen, setIsOpen] = useState(false);\n * <Sidebar isOpen={isOpen} onClose={() => setIsOpen(false)}>\n *   <Menu>...</Menu>\n * </Sidebar>\n *\n * @example\n * // Right-side sidebar with custom width\n * <Sidebar\n *   isOpen={isOpen}\n *   onClose={() => setIsOpen(false)}\n *   position=\"right\"\n *   width=\"320px\"\n * >\n *   <div>Panel content</div>\n * </Sidebar>\n */\nconst SidebarComponent = forwardRef<HTMLElement, SidebarProps>(\n  (\n    {\n      isOpen,\n      onClose,\n      position = 'left',\n      width = '260px',\n      isFullwidth,\n      fullWidth,\n      overlay = true,\n      overlayClose = true,\n      escapeClose = true,\n      canCancel = true,\n      children,\n      inline = false,\n      className,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n    const resolveContainer = usePortalContainer();\n    const { portalContainer } = useConfig();\n    // Where the configured default puts the sidebar. An `inline` one doesn't\n    // portal, so a change to the default moves nothing.\n    const defaultTarget = inline ? undefined : portalContainer;\n    const sidebarRef = useRef<HTMLElement>(null);\n    // Cleanup returned by a consumer's callback ref on attach, held until detach.\n    const consumerCleanupRef = useRef<(() => void) | null>(null);\n    const resolvedFullwidth = isFullwidth ?? fullWidth ?? false;\n\n    // Close handler\n    const handleClose = useCallback(() => {\n      if (canCancel && onClose) {\n        onClose();\n      }\n    }, [canCancel, onClose]);\n\n    // Handle overlay click\n    const handleOverlayClick = useCallback(() => {\n      if (overlayClose) {\n        handleClose();\n      }\n    }, [overlayClose, handleClose]);\n\n    // Read when Escape arrives, so the key listener stays put while\n    // `onClose` changes identity, as an inline one does on every render of\n    // the parent.\n    const handleCloseRef = useLatestRef(handleClose);\n\n    // Joins the stack of open overlays, so the sidebar answers Escape only\n    // while it's the topmost overlay, and keeps it from those under it.\n    const isTopmost = useOverlayStack(isOpen);\n    const closesOnEscape = escapeClose && canCancel && Boolean(onClose);\n\n    // Handle escape key. On `window`, as in `Modal`, so everything inside the\n    // sidebar has had the key first, and an Escape it used is left to it. One\n    // the sidebar closes on is marked used, so nothing under it acts on it.\n    useEffect(() => {\n      if (!isOpen || !closesOnEscape) return;\n\n      const handleKeyDown = (e: KeyboardEvent) => {\n        if (e.key !== 'Escape' || e.defaultPrevented || !isTopmost()) return;\n        e.preventDefault();\n        handleCloseRef.current();\n      };\n\n      window.addEventListener('keydown', handleKeyDown);\n      return () => window.removeEventListener('keydown', handleKeyDown);\n    }, [isOpen, closesOnEscape, handleCloseRef, isTopmost]);\n\n    // Prevent body scroll when sidebar is open. Ref-counted through the shared\n    // helper so an overlapping Modal/Dialog/Loading doesn't unlock underneath.\n    useScrollLock(isOpen && overlay);\n\n    // Focus trap (basic - focus sidebar when opened). A different\n    // `defaultTarget` remounts the portaled sidebar, so it focuses the new\n    // nodes then too.\n    useEffect(() => {\n      if (isOpen) {\n        const element = sidebarRef.current;\n        /* istanbul ignore else: the aside renders whenever the sidebar is open, so its ref is set before this runs */\n        if (element) {\n          // Focus first focusable element or sidebar itself\n          const focusable = element.querySelector<HTMLElement>(\n            'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n          );\n          if (focusable) {\n            focusable.focus();\n          } else {\n            element.focus();\n          }\n        }\n      }\n    }, [isOpen, defaultTarget]);\n\n    // Use combined ref\n    const combinedRef = useCallback(\n      (node: HTMLElement | null) => {\n        (sidebarRef as React.MutableRefObject<HTMLElement | null>).current =\n          node;\n        if (typeof ref === 'function') {\n          // React 19 lets a callback ref return a cleanup function and detaches by\n          // running it instead of calling the ref with `null`; React 18 discards the\n          // return value entirely. Returning it from here would be a React-19-only\n          // contract, so we hold the cleanup and run it ourselves on detach — the\n          // same shape as `Dropdown`, `Modal`, `Dialog`, `Toast` and `Carousel`.\n          // The form controls that merge a forwarded ref still discard the cleanup\n          // and detach with `ref(null)`, so this is not yet library-wide — grep\n          // `typeof ref === 'function'` for the current split.\n          if (node === null) {\n            const consumerCleanup = consumerCleanupRef.current;\n            consumerCleanupRef.current = null;\n            if (consumerCleanup) {\n              consumerCleanup();\n            } else {\n              ref(null);\n            }\n            return;\n          }\n          const cleanup: unknown = ref(node);\n          consumerCleanupRef.current =\n            typeof cleanup === 'function' ? (cleanup as () => void) : null;\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLElement | null>).current = node;\n        }\n      },\n      [ref]\n    );\n\n    // Generate classes\n    const sidebarClasses = usePrefixedClassNames('sidebar', {\n      'is-active': isOpen,\n      [`is-${position}`]: position,\n      'is-fullwidth': resolvedFullwidth,\n    });\n    const backgroundClass = usePrefixedClassNames('sidebar-background', {\n      'is-active': isOpen,\n    });\n    const contentClass = usePrefixedClassNames('sidebar-content');\n\n    const combinedClasses = classNames(\n      sidebarClasses,\n      bulmaHelperClasses,\n      className\n    );\n\n    // Custom style for width\n    const sidebarStyle: React.CSSProperties = {\n      ...style,\n      '--bulma-sidebar-width': resolvedFullwidth ? '100%' : width,\n    } as React.CSSProperties;\n\n    const sidebarContent = (\n      <>\n        {overlay && (\n          <div\n            className={backgroundClass}\n            onClick={handleOverlayClick}\n            aria-hidden=\"true\"\n          />\n        )}\n        <aside\n          ref={combinedRef}\n          className={combinedClasses}\n          style={sidebarStyle}\n          role=\"dialog\"\n          aria-modal={overlay ? 'true' : undefined}\n          aria-hidden={!isOpen}\n          tabIndex={-1}\n          {...rest}\n        >\n          <div className={contentClass}>{children}</div>\n        </aside>\n      </>\n    );\n\n    if (inline) {\n      return sidebarContent;\n    }\n\n    // Render to portal for proper stacking\n    if (typeof document !== 'undefined') {\n      return createPortal(sidebarContent, resolveContainer());\n    }\n\n    return null;\n  }\n);\n\n// Sub-components\n\n/**\n * Props for the SidebarHeader component.\n */\ninterface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Header content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Container for the sidebar header.\n *\n * @function\n * @param {SidebarHeaderProps} props - Props for the SidebarHeader component.\n * @returns {JSX.Element} The rendered sidebar header.\n */\nconst SidebarHeader: React.FC<SidebarHeaderProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const headerClass = usePrefixedClassNames('sidebar-header');\n  return (\n    <div className={classNames(headerClass, className)} {...props}>\n      {children}\n    </div>\n  );\n};\n\n/**\n * Props for the SidebarTitle component.\n */\ninterface SidebarTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  /** Title content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Title text inside the header.\n *\n * @function\n * @param {SidebarTitleProps} props - Props for the SidebarTitle component.\n * @returns {JSX.Element} The rendered sidebar title.\n */\nconst SidebarTitle: React.FC<SidebarTitleProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const titleClass = usePrefixedClassNames('sidebar-title');\n  return (\n    <p className={classNames(titleClass, className)} {...props}>\n      {children}\n    </p>\n  );\n};\n\n/**\n * Props for the SidebarClose component.\n * Extends standard button attributes.\n * @extraProp {'button' | 'submit' | 'reset'} [type='button'] - Button type. Defaults to `'button'`, so a close button inside a form does not submit it. Pass `'submit'` or `'reset'` and yours is used; any other value, or a spread carrying `type: undefined`, renders `'button'`.\n * @extraProp {string} [aria-label='Close'] - Accessible name. Pass your own to replace it. An empty one, or a spread carrying `'aria-label': undefined`, keeps the default rather than leaving the button unnamed.\n */\ntype SidebarCloseProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * Close button for the sidebar.\n *\n * @function\n * @param {SidebarCloseProps} props - Props for the SidebarClose component.\n * @returns {JSX.Element} The rendered close button.\n */\nconst SidebarClose: React.FC<SidebarCloseProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const closeClass = usePrefixedClassNames('sidebar-close');\n  return (\n    <button\n      className={classNames(closeClass, className)}\n      {...props}\n      // After the spread, reading through it: a key the spread carries with no\n      // value would otherwise erase the default, leaving a nameless button\n      // that submits the form around it. An empty label falls back too: the\n      // button is drawn as an icon, so `''` would leave it unnamed. A caller's\n      // own value still wins; `buttonType` says more.\n      aria-label={props['aria-label'] || 'Close'}\n      type={buttonType(props.type)}\n    >\n      {children}\n    </button>\n  );\n};\n\n/**\n * Props for the SidebarBody component.\n */\ninterface SidebarBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Body content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Main content area of the sidebar.\n *\n * @function\n * @param {SidebarBodyProps} props - Props for the SidebarBody component.\n * @returns {JSX.Element} The rendered sidebar body.\n */\nconst SidebarBody: React.FC<SidebarBodyProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const bodyClass = usePrefixedClassNames('sidebar-body');\n  return (\n    <div className={classNames(bodyClass, className)} {...props}>\n      {children}\n    </div>\n  );\n};\n\n/**\n * Props for the SidebarFooter component.\n */\ninterface SidebarFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Footer content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Footer area of the sidebar.\n *\n * @function\n * @param {SidebarFooterProps} props - Props for the SidebarFooter component.\n * @returns {JSX.Element} The rendered sidebar footer.\n */\nconst SidebarFooter: React.FC<SidebarFooterProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const footerClass = usePrefixedClassNames('sidebar-footer');\n  return (\n    <div className={classNames(footerClass, className)} {...props}>\n      {children}\n    </div>\n  );\n};\n\n// Attach static subcomponents\nexport const Sidebar = withSubComponents(\n  SidebarComponent,\n  {\n    Header: SidebarHeader,\n    Title: SidebarTitle,\n    Close: SidebarClose,\n    Body: SidebarBody,\n    Footer: SidebarFooter,\n  },\n  'Sidebar'\n);\n\nexport default Sidebar;\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}

package/dist/esm/components/Steps.js

@@ -22,23 +22,21 @@ const Step = ({ isActive = false, isCompleted = false, label, icon, clickable =
     const stepsMarkerClass = usePrefixedClassNames('steps-marker');
     const stepsContentClass = usePrefixedClassNames('steps-content');
     const stepsTitleClass = usePrefixedClassNames('steps-title');
-    const handleClick = () => {
-        if (clickable && onClick) {
-            onClick();
-        }
-    };
-    const handleKeyDown = (e) => {
-        if (clickable && onClick && (e.key === 'Enter' || e.key === ' ')) {
-            e.preventDefault();
-            onClick();
-        }
-    };
     const resolvedCompletedIcon = completedIcon === undefined ? '\u2713' : completedIcon;
     const markerContent = icon ||
         (isCompleted && resolvedCompletedIcon
             ? resolvedCompletedIcon
             : (stepNumber ?? null));
-    return (jsx("li", { className: stepClasses, onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: clickable ? 0 : undefined, role: clickable ? 'button' : undefined, "aria-current": isActive ? 'step' : undefined, ...rest, children: jsxs("div", { className: stepsLinkClass, children: [jsx("span", { className: stepsMarkerClass, children: markerContent }), (label || children) && (jsx("div", { className: stepsContentClass, children: jsx("p", { className: stepsTitleClass, children: label || children }) }))] }) }));
+    const title = label || children;
+    const current = isActive ? 'step' : undefined;
+    // The step stays a list item, and a real button inside it does the
+    // clicking, so the list keeps its items and the button brings Enter, Space
+    // and focus with it. A button holds only phrasing content, so its parts
+    // are spans.
+    if (clickable) {
+        return (jsx("li", { className: stepClasses, ...rest, children: jsxs("button", { type: "button", className: stepsLinkClass, onClick: () => onClick?.(), "aria-current": current, children: [jsx("span", { className: stepsMarkerClass, children: markerContent }), title && (jsx("span", { className: stepsContentClass, children: jsx("span", { className: stepsTitleClass, children: title }) }))] }) }));
+    }
+    return (jsx("li", { className: stepClasses, "aria-current": current, ...rest, children: jsxs("div", { className: stepsLinkClass, children: [jsx("span", { className: stepsMarkerClass, children: markerContent }), title && (jsx("div", { className: stepsContentClass, children: jsx("p", { className: stepsTitleClass, children: title }) }))] }) }));
 };
 /**
  * The `Steps` component provides a multi-step progress indicator for wizard flows, checkout processes, or any multi-step workflow.
@@ -119,7 +117,10 @@ const StepsComponent = ({ value = 0, items, size, color, hasMarker = true, anima
         }
         return null;
     };
-    return (jsxs("div", { className: combinedClasses, ...rest, children: [jsx("ul", { className: listClasses, children: renderSteps() }), hasNavigation && (jsxs("div", { className: stepsNavigationClass, children: [jsx("button", { type: "button", className: prevButtonClass, disabled: value === 0, onClick: onPrev ?? (() => onStepClick?.(value - 1)), children: prevLabel ?? 'Previous' }), jsx("button", { type: "button", className: nextButtonClass, disabled: value === totalSteps - 1, onClick: onNext ?? (() => onStepClick?.(value + 1)), children: nextLabel ?? 'Next' })] }))] }));
+    // role="list" restates the <ul>'s own role, for Safari: WebKit stops
+    // exposing a list as one once its markers are hidden, as they are here,
+    // unless the role is set explicitly.
+    return (jsxs("div", { className: combinedClasses, ...rest, children: [jsx("ul", { className: listClasses, role: "list", children: renderSteps() }), hasNavigation && (jsxs("div", { className: stepsNavigationClass, children: [jsx("button", { type: "button", className: prevButtonClass, disabled: value === 0, onClick: onPrev ?? (() => onStepClick?.(value - 1)), children: prevLabel ?? 'Previous' }), jsx("button", { type: "button", className: nextButtonClass, disabled: value === totalSteps - 1, onClick: onNext ?? (() => onStepClick?.(value + 1)), children: nextLabel ?? 'Next' })] }))] }));
 };
 // Attach Step as static property
 const Steps = withSubComponents(StepsComponent, { Step }, 'Steps');