@allxsmith/bestax-bulma 5.67.10 → 5.67.12

package/dist/esm/components/Message.js

@@ -34,7 +34,10 @@ const MessageComponent = ({ className, title, textColor, color, bgColor, size, o
     // Built from its parts, the header and body are the article's own
     // children, as Bulma lays them out, so they get no body around them.
     const composed = React.Children.toArray(children).some(child => isElementOf(child, MessageHeader, MessageBody));
-    return (jsxs("article", { className: messageClasses, ...rest, "data-testid": "message", children: [(title || onClose) && (jsxs("div", { className: prefixedClassNames(classPrefix, 'message-header'), children: [title && jsx("span", { children: title }), onClose && (jsx("button", { className: deleteClass, "aria-label": "delete", onClick: onClose, type: "button", "data-testid": "message-close" }))] })), composed
+    // A test id the caller passes wins. It's written after `rest`, since a
+    // spread carrying `data-testid: undefined` would otherwise erase the default.
+    const testId = rest['data-testid'] ?? 'message';
+    return (jsxs("article", { className: messageClasses, ...rest, "data-testid": testId, children: [(title || onClose) && (jsxs("div", { className: prefixedClassNames(classPrefix, 'message-header'), children: [title && jsx("span", { children: title }), onClose && (jsx("button", { className: deleteClass, "aria-label": "delete", onClick: onClose, type: "button", "data-testid": "message-close" }))] })), composed
                 ? children
                 : children && (jsx("div", { className: prefixedClassNames(classPrefix, 'message-body'), "data-testid": "message-body", children: children }))] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Message.js","sources":["../../../src/components/Message.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  classNames,\n  usePrefixedClassNames,\n  prefixedClassNames,\n} from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { isElementOf } from '../helpers/elementType';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { useConfig } from '../helpers/Config';\n\nconst validMessageSizes = ['small', 'medium', 'large'] as const;\n/**\n * Valid size values for the Message component (Bulma message sizes).\n */\nexport type MessageSize = (typeof validMessageSizes)[number];\n\n/**\n * Props for the Message component.\n */\nexport interface MessageProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, 'title'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Title string/node (renders header section). */\n  title?: React.ReactNode;\n  /** Text color for the message (Bulma helper). */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Bulma color modifier for the message. */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** Background color for the message (Bulma helper). */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Size of the message. */\n  size?: MessageSize;\n  /** Callback for the close (\"X\") button. */\n  onClose?: () => void;\n  /**\n   * Body content for the message, wrapped in a `.message-body`. Children that\n   * include a `Message.Header` or `Message.Body` aren't wrapped: they render as\n   * the article's own children, after the header `title` and `onClose` make.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Message` component provides Bulma's flexible notice/message box for your Bulma React UI.\n *\n * @function\n * @param {MessageProps} props - Props for the Message component.\n * @returns {JSX.Element} The rendered message.\n * @see {@link https://bulma.io/documentation/components/message/ | Bulma Message documentation}\n */\nconst MessageComponent: React.FC<MessageProps> = ({\n  className,\n  title,\n  textColor,\n  color,\n  bgColor,\n  size,\n  onClose,\n  children,\n  ...props\n}) => {\n  const { classPrefix } = useConfig();\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  });\n\n  // Generate Bulma classes with prefix\n  const bulmaClasses = usePrefixedClassNames('message', {\n    [`is-${color}`]: color,\n    [`is-${size}`]: size && validMessageSizes.includes(size),\n  });\n  const deleteClass = usePrefixedClassNames('delete');\n\n  const messageClasses = classNames(\n    bulmaClasses,\n    bulmaHelperClasses,\n    className\n  );\n\n  // Built from its parts, the header and body are the article's own\n  // children, as Bulma lays them out, so they get no body around them.\n  const composed = React.Children.toArray(children).some(child =>\n    isElementOf(child, MessageHeader, MessageBody)\n  );\n\n  return (\n    <article className={messageClasses} {...rest} data-testid=\"message\">\n      {(title || onClose) && (\n        <div className={prefixedClassNames(classPrefix, 'message-header')}>\n          {title && <span>{title}</span>}\n          {onClose && (\n            <button\n              className={deleteClass}\n              aria-label=\"delete\"\n              onClick={onClose}\n              type=\"button\"\n              data-testid=\"message-close\"\n            />\n          )}\n        </div>\n      )}\n      {composed\n        ? children\n        : children && (\n            <div\n              className={prefixedClassNames(classPrefix, 'message-body')}\n              data-testid=\"message-body\"\n            >\n              {children}\n            </div>\n          )}\n    </article>\n  );\n};\n\n// Compound components for flexible composition\n\n/**\n * Props for the Message.Header compound component.\n */\nexport interface MessageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Header content (title, close button, etc.). */\n  children?: React.ReactNode;\n}\n\n/**\n * Props for the Message.Body compound component.\n */\nexport interface MessageBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Message body content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Message header compound component. Renders a `.message-header` element.\n *\n * @function\n * @param {MessageHeaderProps} props - Props for the MessageHeader component.\n * @returns {JSX.Element} The rendered message header.\n */\nexport const MessageHeader: React.FC<MessageHeaderProps> = ({\n  className,\n  children,\n  ...props\n}) => (\n  <div\n    className={classNames(usePrefixedClassNames('message-header'), className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\n/**\n * Message body compound component. Renders a `.message-body` element.\n *\n * @function\n * @param {MessageBodyProps} props - Props for the MessageBody component.\n * @returns {JSX.Element} The rendered message body.\n */\nexport const MessageBody: React.FC<MessageBodyProps> = ({\n  className,\n  children,\n  ...props\n}) => (\n  <div\n    className={classNames(usePrefixedClassNames('message-body'), className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\n// Attach compound components\nexport const Message = withSubComponents(\n  MessageComponent,\n  {\n    Header: MessageHeader,\n    Body: MessageBody,\n  },\n  'Message'\n);\n\nexport default Message;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Message.js","sources":["../../../src/components/Message.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  classNames,\n  usePrefixedClassNames,\n  prefixedClassNames,\n} from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { isElementOf } from '../helpers/elementType';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { useConfig } from '../helpers/Config';\n\nconst validMessageSizes = ['small', 'medium', 'large'] as const;\n/**\n * Valid size values for the Message component (Bulma message sizes).\n */\nexport type MessageSize = (typeof validMessageSizes)[number];\n\n/**\n * Props for the Message component.\n */\nexport interface MessageProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, 'title'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Title string/node (renders header section). */\n  title?: React.ReactNode;\n  /** Text color for the message (Bulma helper). */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Bulma color modifier for the message. */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** Background color for the message (Bulma helper). */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Size of the message. */\n  size?: MessageSize;\n  /** Callback for the close (\"X\") button. */\n  onClose?: () => void;\n  /**\n   * Body content for the message, wrapped in a `.message-body`. Children that\n   * include a `Message.Header` or `Message.Body` aren't wrapped: they render as\n   * the article's own children, after the header `title` and `onClose` make.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Message` component provides Bulma's flexible notice/message box for your Bulma React UI.\n *\n * @function\n * @param {MessageProps} props - Props for the Message component.\n * @returns {JSX.Element} The rendered message.\n * @see {@link https://bulma.io/documentation/components/message/ | Bulma Message documentation}\n */\nconst MessageComponent: React.FC<MessageProps> = ({\n  className,\n  title,\n  textColor,\n  color,\n  bgColor,\n  size,\n  onClose,\n  children,\n  ...props\n}) => {\n  const { classPrefix } = useConfig();\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  });\n\n  // Generate Bulma classes with prefix\n  const bulmaClasses = usePrefixedClassNames('message', {\n    [`is-${color}`]: color,\n    [`is-${size}`]: size && validMessageSizes.includes(size),\n  });\n  const deleteClass = usePrefixedClassNames('delete');\n\n  const messageClasses = classNames(\n    bulmaClasses,\n    bulmaHelperClasses,\n    className\n  );\n\n  // Built from its parts, the header and body are the article's own\n  // children, as Bulma lays them out, so they get no body around them.\n  const composed = React.Children.toArray(children).some(child =>\n    isElementOf(child, MessageHeader, MessageBody)\n  );\n\n  // A test id the caller passes wins. It's written after `rest`, since a\n  // spread carrying `data-testid: undefined` would otherwise erase the default.\n  const testId =\n    (rest as { 'data-testid'?: string })['data-testid'] ?? 'message';\n\n  return (\n    <article className={messageClasses} {...rest} data-testid={testId}>\n      {(title || onClose) && (\n        <div className={prefixedClassNames(classPrefix, 'message-header')}>\n          {title && <span>{title}</span>}\n          {onClose && (\n            <button\n              className={deleteClass}\n              aria-label=\"delete\"\n              onClick={onClose}\n              type=\"button\"\n              data-testid=\"message-close\"\n            />\n          )}\n        </div>\n      )}\n      {composed\n        ? children\n        : children && (\n            <div\n              className={prefixedClassNames(classPrefix, 'message-body')}\n              data-testid=\"message-body\"\n            >\n              {children}\n            </div>\n          )}\n    </article>\n  );\n};\n\n// Compound components for flexible composition\n\n/**\n * Props for the Message.Header compound component.\n */\nexport interface MessageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Header content (title, close button, etc.). */\n  children?: React.ReactNode;\n}\n\n/**\n * Props for the Message.Body compound component.\n */\nexport interface MessageBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Message body content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Message header compound component. Renders a `.message-header` element.\n *\n * @function\n * @param {MessageHeaderProps} props - Props for the MessageHeader component.\n * @returns {JSX.Element} The rendered message header.\n */\nexport const MessageHeader: React.FC<MessageHeaderProps> = ({\n  className,\n  children,\n  ...props\n}) => (\n  <div\n    className={classNames(usePrefixedClassNames('message-header'), className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\n/**\n * Message body compound component. Renders a `.message-body` element.\n *\n * @function\n * @param {MessageBodyProps} props - Props for the MessageBody component.\n * @returns {JSX.Element} The rendered message body.\n */\nexport const MessageBody: React.FC<MessageBodyProps> = ({\n  className,\n  children,\n  ...props\n}) => (\n  <div\n    className={classNames(usePrefixedClassNames('message-body'), className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\n// Attach compound components\nexport const Message = withSubComponents(\n  MessageComponent,\n  {\n    Header: MessageHeader,\n    Body: MessageBody,\n  },\n  'Message'\n);\n\nexport default Message;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/Modal.js

@@ -306,10 +306,13 @@ const ModalRoot = forwardRef(function ModalRoot({ active, isActive, onClose, cla
     // automatically, compound users pass their own aria-label/aria-labelledby
     // (both arrive in `rest`, which is spread last and so wins).
     const titleId = modalCardTitle ? generatedTitleId : undefined;
+    // A test id the caller passes wins. It's written after `rest`, since a
+    // spread carrying `data-testid: undefined` would otherwise erase the default.
+    const testId = rest['data-testid'] ?? 'modal';
     let modalElement;
     // If using compound components, render children as-is
     if (hasCompoundComponents) {
-        modalElement = (jsx("div", { className: modalClasses, ref: combinedRef, role: resolvedRole, "aria-modal": resolvedAriaModal, tabIndex: -1, ...rest, "data-testid": "modal", children: children }));
+        modalElement = (jsx("div", { className: modalClasses, ref: combinedRef, role: resolvedRole, "aria-modal": resolvedAriaModal, tabIndex: -1, ...rest, "data-testid": testId, children: children }));
     }
     else {
         // Legacy API: EXPLICIT type wins; fallback to auto detection if not provided
@@ -320,7 +323,7 @@ const ModalRoot = forwardRef(function ModalRoot({ active, isActive, onClose, cla
             isModalCard = false;
         else
             isModalCard = !!modalCardTitle || !!modalCardFoot;
-        modalElement = (jsxs("div", { className: modalClasses, ref: combinedRef, role: resolvedRole, "aria-modal": resolvedAriaModal, "aria-labelledby": titleId, tabIndex: -1, ...rest, "data-testid": "modal", children: [jsx("div", { className: prefixedClassNames(classPrefix, 'modal-background'), onClick: onClose, "data-testid": "modal-background" }), isModalCard ? (jsxs("div", { className: prefixedClassNames(classPrefix, 'modal-card'), children: [modalCardTitle && (jsxs("header", { className: prefixedClassNames(classPrefix, 'modal-card-head'), children: [jsx("p", { id: titleId, className: prefixedClassNames(classPrefix, 'modal-card-title'), children: modalCardTitle }), onClose && (jsx("button", { className: deleteClass, "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close" }))] })), jsx("section", { className: prefixedClassNames(classPrefix, 'modal-card-body'), "data-testid": "modal-body", children: children }), modalCardFoot && (jsx("footer", { className: prefixedClassNames(classPrefix, 'modal-card-foot'), children: modalCardFoot }))] })) : (jsx("div", { className: prefixedClassNames(classPrefix, 'modal-content'), "data-testid": "modal-content", children: children })), (!isModalCard || (!modalCardTitle && onClose)) && onClose && (jsx("button", { className: prefixedClassNames(classPrefix, 'modal-close', 'is-large'), "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close-float" }))] }));
+        modalElement = (jsxs("div", { className: modalClasses, ref: combinedRef, role: resolvedRole, "aria-modal": resolvedAriaModal, "aria-labelledby": titleId, tabIndex: -1, ...rest, "data-testid": testId, children: [jsx("div", { className: prefixedClassNames(classPrefix, 'modal-background'), onClick: onClose, "data-testid": "modal-background" }), isModalCard ? (jsxs("div", { className: prefixedClassNames(classPrefix, 'modal-card'), children: [modalCardTitle && (jsxs("header", { className: prefixedClassNames(classPrefix, 'modal-card-head'), children: [jsx("p", { id: titleId, className: prefixedClassNames(classPrefix, 'modal-card-title'), children: modalCardTitle }), onClose && (jsx("button", { className: deleteClass, "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close" }))] })), jsx("section", { className: prefixedClassNames(classPrefix, 'modal-card-body'), "data-testid": "modal-body", children: children }), modalCardFoot && (jsx("footer", { className: prefixedClassNames(classPrefix, 'modal-card-foot'), children: modalCardFoot }))] })) : (jsx("div", { className: prefixedClassNames(classPrefix, 'modal-content'), "data-testid": "modal-content", children: children })), (!isModalCard || (!modalCardTitle && onClose)) && onClose && (jsx("button", { className: prefixedClassNames(classPrefix, 'modal-close', 'is-large'), "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close-float" }))] }));
     }
     // In both forms, so a `Modal.Close` anywhere inside closes this modal, and
     // a popup anywhere inside portals into it.

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal.tsx"],"sourcesContent":["import React, {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  classNames,\n  usePrefixedClassNames,\n  prefixedClassNames,\n} from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { isElementOf } from '../helpers/elementType';\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 { Portal, PortalScope, usePortalProp } from '../helpers/portal';\nimport { useLatestRef } from '../helpers/useLatestRef';\nimport { useOverlayStack } from '../helpers/overlayStack';\nimport { focusTabStop, trapTab } from '../helpers/useFocusTrap';\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  /**\n   * Called to ask for the modal to close. The props form calls it from the\n   * background and the close button it renders. In the compound form,\n   * `Modal.Close` calls it unless you give it an `onClick` of your own, and\n   * `Modal.Background` doesn't call it on its own: pass it\n   * `onClick={onClose}` for a click on the background to close the modal.\n   * Escape calls it in both forms unless `closeOnEscape` is `false`.\n   */\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 page scroll while the modal is active, padding the page by the room\n   * its scrollbar took so the content stays put. An element fixed to the\n   * window's right edge, such as a `fixed` Navbar, isn't padded, and moves by\n   * the scrollbar's width while the page is locked. Ref-counted and shared\n   * with `Dialog`, `Sidebar` and `Loading`, so whichever overlay closes first\n   * does 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 * @extraProp {React.MouseEventHandler<HTMLDivElement>} [onClick] - Called when the background is clicked. The background doesn't call the modal's `onClose` on its own, so pass `onClick={onClose}` for a click on it to close the modal.\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 * @extraProp {React.MouseEventHandler<HTMLButtonElement>} [onClick] - Called when the button is clicked. Without one, the button calls the `onClose` of the `Modal` around it. Yours replaces that rather than running before it, so call `onClose` from it if the button should still close the modal.\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// The enclosing modal's `onClose`, for a `Modal.Close` written as a part, so\n// it closes the modal the way the button the props form renders does.\nconst ModalCloseContext = createContext<(() => void) | undefined>(undefined);\n\n/**\n * Modal.Background - Renders the modal background overlay. Pass it\n * `onClick={onClose}` for a click on it to close the modal.\n *\n * @function\n * @param {ModalBackgroundProps} props - Component props.\n * @returns {JSX.Element} Modal background element.\n */\nexport const 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 */\nexport const ModalContent: React.FC<ModalContentProps> = ({\n  className,\n  ...props\n}) => {\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 */\nexport const 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 */\nexport const 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 */\nexport const 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 */\nexport const 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\nexport const 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. It calls\n * the modal's `onClose` unless given an `onClick` of its own.\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 */\nexport const ModalClose: React.FC<ModalCloseProps> = ({\n  className,\n  size = 'large',\n  variant = 'delete',\n  onClick,\n  ...props\n}) => {\n  const onClose = useContext(ModalCloseContext);\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      // A caller's own `onClick` replaces the close rather than running\n      // before it, unlike `Popover.Close`: this button used to close only\n      // through that handler, so a caller already closing there, as with\n      // `onClick={onClose}`, would otherwise close twice.\n      onClick={onClick ?? (onClose && (() => onClose()))}\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} onClose={handleClose}>\n *   <Modal.Background onClick={handleClose} />\n *   <Modal.Card>\n *     <Modal.Card.Head>\n *       <Modal.Card.Title>Title</Modal.Card.Title>\n *       <Modal.Close />\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 } = 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 root, as state, for the popups inside to portal into: outside it,\n  // its `aria-modal` hides them from screen readers.\n  const [scopeNode, setScopeNode] = useState<HTMLDivElement | 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      setScopeNode(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 stay inline and only move into the portal once we're\n  // past hydration. Moving into the portal, or from one portal target to\n  // another, remounts the modal's subtree, so any effect holding a DOM node\n  // from before the move is holding a detached one. Effects that touch the\n  // modal's nodes key on `isPortaled`, on `portal` and on `defaultTarget`, so\n  // they re-run against the new tree. `defaultTarget` is the configured\n  // `portalContainer` only while it places the modal (portaled with `portal`\n  // set to `true`), so a change to it that moves nothing re-runs nothing.\n  const { isPortaled, container, defaultTarget } = usePortalProp(portal);\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 on top.\n  const isTopmost = useOverlayStack(isModalActive);\n\n  // Escape closes, only for the topmost overlay. The listener is on\n  // `window`, where a keydown arrives last, so everything inside the modal\n  // has had the key first: React's handlers, and `document` listeners added\n  // after this one, such as a date picker's.\n  useEffect(() => {\n    if (!isModalActive) return undefined;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== 'Escape' || !isTopmost()) return;\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    };\n\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [isModalActive, closeOnEscape, onCloseRef, isTopmost]);\n\n  // Keep Tab within the modal: `aria-modal` hides the rest of the page from\n  // assistive technology, so the keyboard order has to agree. Only while\n  // it's the topmost modal overlay, so an overlay that isn't modal, such as\n  // a Sidebar without an overlay, takes Escape from it but leaves it Tab.\n  // It's the trap `useFocusTrap` sets, so it wraps at the stops Tab really\n  // visits, skipping hidden, inert and closed content, and sends back a Tab\n  // the browser still takes out. On `window` for the same reason as Escape:\n  // a trap inside, such as a portaled popup's, has had the Tab first, and\n  // one it used is left where it put focus. It reads the modal's node as\n  // each key arrives, so a portal move that remounts the node, including one\n  // to a selector that only starts matching while the modal is open, keeps\n  // it trapped.\n  useEffect(() => {\n    if (!isModalActive) return undefined;\n    return trapTab(\n      () => modalRootRef.current,\n      window,\n      () => isTopmost('modal')\n    );\n  }, [isModalActive, 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    if (node) focusTabStop(node);\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(child =>\n    isElementOf(child, ModalBackground, ModalContent, ModalCard, 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  // In both forms, so a `Modal.Close` anywhere inside closes this modal, and\n  // a popup anywhere inside portals into it.\n  modalElement = (\n    <ModalCloseContext.Provider value={onClose}>\n      <PortalScope node={scopeNode}>{modalElement}</PortalScope>\n    </ModalCloseContext.Provider>\n  );\n\n  return (\n    <Portal disabled={!isPortaled} container={container}>\n      {modalElement}\n    </Portal>\n  );\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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"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal.tsx"],"sourcesContent":["import React, {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  classNames,\n  usePrefixedClassNames,\n  prefixedClassNames,\n} from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { isElementOf } from '../helpers/elementType';\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 { Portal, PortalScope, usePortalProp } from '../helpers/portal';\nimport { useLatestRef } from '../helpers/useLatestRef';\nimport { useOverlayStack } from '../helpers/overlayStack';\nimport { focusTabStop, trapTab } from '../helpers/useFocusTrap';\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  /**\n   * Called to ask for the modal to close. The props form calls it from the\n   * background and the close button it renders. In the compound form,\n   * `Modal.Close` calls it unless you give it an `onClick` of your own, and\n   * `Modal.Background` doesn't call it on its own: pass it\n   * `onClick={onClose}` for a click on the background to close the modal.\n   * Escape calls it in both forms unless `closeOnEscape` is `false`.\n   */\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 page scroll while the modal is active, padding the page by the room\n   * its scrollbar took so the content stays put. A `fixed` Navbar, the toast\n   * and notification stacks and an Affix stay put too. The padding doesn't\n   * reach an element of your own fixed to the window's edge, which moves by\n   * the scrollbar's width unless it adds\n   * `var(--bulma-scroll-lock-offset-right, 0px)` to its `right` (the `-left`\n   * one to its `left`), which the lock sets on `<html>` while it's on.\n   * Ref-counted and shared with `Dialog`, `Sidebar` and `Loading`, so\n   * whichever overlay closes first does not unlock the page underneath one\n   * 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 * @extraProp {React.MouseEventHandler<HTMLDivElement>} [onClick] - Called when the background is clicked. The background doesn't call the modal's `onClose` on its own, so pass `onClick={onClose}` for a click on it to close the modal.\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 * @extraProp {React.MouseEventHandler<HTMLButtonElement>} [onClick] - Called when the button is clicked. Without one, the button calls the `onClose` of the `Modal` around it. Yours replaces that rather than running before it, so call `onClose` from it if the button should still close the modal.\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// The enclosing modal's `onClose`, for a `Modal.Close` written as a part, so\n// it closes the modal the way the button the props form renders does.\nconst ModalCloseContext = createContext<(() => void) | undefined>(undefined);\n\n/**\n * Modal.Background - Renders the modal background overlay. Pass it\n * `onClick={onClose}` for a click on it to close the modal.\n *\n * @function\n * @param {ModalBackgroundProps} props - Component props.\n * @returns {JSX.Element} Modal background element.\n */\nexport const 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 */\nexport const ModalContent: React.FC<ModalContentProps> = ({\n  className,\n  ...props\n}) => {\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 */\nexport const 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 */\nexport const 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 */\nexport const 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 */\nexport const 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\nexport const 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. It calls\n * the modal's `onClose` unless given an `onClick` of its own.\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 */\nexport const ModalClose: React.FC<ModalCloseProps> = ({\n  className,\n  size = 'large',\n  variant = 'delete',\n  onClick,\n  ...props\n}) => {\n  const onClose = useContext(ModalCloseContext);\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      // A caller's own `onClick` replaces the close rather than running\n      // before it, unlike `Popover.Close`: this button used to close only\n      // through that handler, so a caller already closing there, as with\n      // `onClick={onClose}`, would otherwise close twice.\n      onClick={onClick ?? (onClose && (() => onClose()))}\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} onClose={handleClose}>\n *   <Modal.Background onClick={handleClose} />\n *   <Modal.Card>\n *     <Modal.Card.Head>\n *       <Modal.Card.Title>Title</Modal.Card.Title>\n *       <Modal.Close />\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 } = 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 root, as state, for the popups inside to portal into: outside it,\n  // its `aria-modal` hides them from screen readers.\n  const [scopeNode, setScopeNode] = useState<HTMLDivElement | 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      setScopeNode(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 stay inline and only move into the portal once we're\n  // past hydration. Moving into the portal, or from one portal target to\n  // another, remounts the modal's subtree, so any effect holding a DOM node\n  // from before the move is holding a detached one. Effects that touch the\n  // modal's nodes key on `isPortaled`, on `portal` and on `defaultTarget`, so\n  // they re-run against the new tree. `defaultTarget` is the configured\n  // `portalContainer` only while it places the modal (portaled with `portal`\n  // set to `true`), so a change to it that moves nothing re-runs nothing.\n  const { isPortaled, container, defaultTarget } = usePortalProp(portal);\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 on top.\n  const isTopmost = useOverlayStack(isModalActive);\n\n  // Escape closes, only for the topmost overlay. The listener is on\n  // `window`, where a keydown arrives last, so everything inside the modal\n  // has had the key first: React's handlers, and `document` listeners added\n  // after this one, such as a date picker's.\n  useEffect(() => {\n    if (!isModalActive) return undefined;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== 'Escape' || !isTopmost()) return;\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    };\n\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [isModalActive, closeOnEscape, onCloseRef, isTopmost]);\n\n  // Keep Tab within the modal: `aria-modal` hides the rest of the page from\n  // assistive technology, so the keyboard order has to agree. Only while\n  // it's the topmost modal overlay, so an overlay that isn't modal, such as\n  // a Sidebar without an overlay, takes Escape from it but leaves it Tab.\n  // It's the trap `useFocusTrap` sets, so it wraps at the stops Tab really\n  // visits, skipping hidden, inert and closed content, and sends back a Tab\n  // the browser still takes out. On `window` for the same reason as Escape:\n  // a trap inside, such as a portaled popup's, has had the Tab first, and\n  // one it used is left where it put focus. It reads the modal's node as\n  // each key arrives, so a portal move that remounts the node, including one\n  // to a selector that only starts matching while the modal is open, keeps\n  // it trapped.\n  useEffect(() => {\n    if (!isModalActive) return undefined;\n    return trapTab(\n      () => modalRootRef.current,\n      window,\n      () => isTopmost('modal')\n    );\n  }, [isModalActive, 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    if (node) focusTabStop(node);\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(child =>\n    isElementOf(child, ModalBackground, ModalContent, ModalCard, 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  // A test id the caller passes wins. It's written after `rest`, since a\n  // spread carrying `data-testid: undefined` would otherwise erase the default.\n  const testId = (rest as { 'data-testid'?: string })['data-testid'] ?? 'modal';\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={testId}\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={testId}\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  // In both forms, so a `Modal.Close` anywhere inside closes this modal, and\n  // a popup anywhere inside portals into it.\n  modalElement = (\n    <ModalCloseContext.Provider value={onClose}>\n      <PortalScope node={scopeNode}>{modalElement}</PortalScope>\n    </ModalCloseContext.Provider>\n  );\n\n  return (\n    <Portal disabled={!isPortaled} container={container}>\n      {modalElement}\n    </Portal>\n  );\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/elements/Button.js

@@ -30,7 +30,9 @@ const Button = forwardRef(function Button(props, ref) {
             validButtonColors.includes(color),
         [`is-${size}`]: size,
         'is-outlined': isOutlined,
-        'is-light': isLight,
+        // The light color's own class is this key too, and this one comes later,
+        // so it has to set the class for `light` as well or it erases it.
+        'is-light': isLight || color === 'light',
         'is-loading': isLoading,
         'is-static': isStatic,
         'is-disabled': isDisabled,

package/dist/esm/elements/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/elements/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  isCustomElement,\n  type PolymorphicComponent,\n} from '../helpers/polymorphic';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\n\n/**\n * The Button component's own props — everything it adds on top of the\n * attributes of whatever element `as` renders.\n */\nexport interface ButtonOwnProps extends Omit<\n  BulmaClassesProps,\n  'color' | 'backgroundColor' | 'size'\n> {\n  /**\n   * Not accepted under this name. `useBulmaClasses` consumes any\n   * `backgroundColor` key before `rest` is spread, so a custom `as` target\n   * declaring one would never receive it. Use `bgColor`.\n   * @internal\n   */\n  backgroundColor?: never;\n  /** Bulma color variant for the button. `ghost` renders a link-like button; `text` renders a minimal text-only button. */\n  color?:\n    | 'primary'\n    | 'link'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'white'\n    | 'light'\n    | 'dark'\n    | 'black'\n    | 'text'\n    | 'ghost';\n  /** Size of the button. */\n  size?: 'small' | 'normal' | 'medium' | 'large';\n  /** Applies a lighter color variant. */\n  isLight?: boolean;\n  /** Makes the button rounded. */\n  isRounded?: boolean;\n  /**\n   * Displays a loading spinner, with everything inside the button hidden\n   * behind it, in forced colors (Windows' contrast themes) too. Under\n   * `prefers-reduced-motion: reduce` the spinner stops and stays drawn.\n   * Bulma alone hides only the label, so the rest needs bestax's CSS loaded.\n   */\n  isLoading?: boolean;\n  /** Makes the button non-interactive. */\n  isStatic?: boolean;\n  /** Makes the button full-width. */\n  isFullwidth?: boolean;\n  /** Makes the button full-width. @deprecated Use `isFullwidth` instead — `isFullwidth` wins if both are set. */\n  isFullWidth?: boolean;\n  /** Applies outlined styling (requires color). */\n  isOutlined?: boolean;\n  /** Applies inverted styling (requires color). */\n  isInverted?: boolean;\n  /** Applies focused styling (visual only). */\n  isFocused?: boolean;\n  /** Applies active styling (visual only), with no `aria-pressed`. For a button that stays pressed, use `ToggleButton`. */\n  isActive?: boolean;\n  /** Applies hovered styling (visual only). */\n  isHovered?: boolean;\n  /** Applies disabled styling. */\n  isDisabled?: boolean;\n  /** Custom class name. */\n  className?: string;\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color helper. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Button content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Props for the Button component. The DOM attributes and the `ref` both follow\n * `as`: with `as=\"a\"` the anchor attributes are accepted, with `as=\"div\"` they\n * are not.\n *\n * @extraProp {PolymorphicRef<React.ElementType>} [ref] - Ref forwarded to the element `as` renders, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.\n */\nexport type ButtonProps<T extends React.ElementType = 'button'> =\n  ButtonOwnProps &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof ButtonOwnProps | 'as'> & {\n      /** Render as a `<button>`, `<a>`, or a custom component (e.g. a router `Link`). Defaults to `'button'`; anything else renders through the anchor path, which adds `href`/`target`/`rel` and withholds the submit-override attributes (`formAction` and friends) from an `<a>`. */\n      as?: T;\n    };\n\n/**\n * The shape the implementation destructures. The public contract is the generic\n * `ButtonProps<T>` above — the body cannot see through `T`, so it reads the\n * widest form of the props it actually touches.\n */\ntype ButtonImplProps = ButtonOwnProps & {\n  as?: React.ElementType;\n  href?: string;\n  target?: string;\n  rel?: string;\n  onClick?:\n    | React.MouseEventHandler<HTMLButtonElement>\n    | React.MouseEventHandler<HTMLAnchorElement>;\n};\n\nconst validButtonColors = [...validColors, 'text', 'ghost'] as const;\n\n/**\n * The `Button` component provides a flexible and highly customizable button for your Bulma React UI.\n *\n * @function\n * @param {ButtonProps} props - Props for the Button component.\n * @param {React.Ref} ref - Forwarded ref to the element `as` renders.\n * @returns {JSX.Element} The rendered button, anchor, or custom element.\n * @see {@link https://bulma.io/documentation/elements/button/ | Bulma Button documentation}\n */\n\nexport const Button = forwardRef(function Button(\n  props: ButtonProps,\n  ref: React.Ref<HTMLElement>\n) {\n  const {\n    color,\n    size,\n    isLight,\n    isRounded,\n    isLoading,\n    isStatic,\n    isFullwidth,\n    isFullWidth,\n    isOutlined,\n    isInverted,\n    isFocused,\n    isActive,\n    isHovered,\n    isDisabled,\n    className,\n    children,\n    textColor,\n    bgColor,\n    as: Component = 'button',\n    href,\n    onClick,\n    target,\n    rel,\n    ...bulmaProps\n  } = props as ButtonImplProps;\n\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...bulmaProps,\n  });\n\n  // Generate Bulma classes with prefix\n  const bulmaClasses = usePrefixedClassNames('button', {\n    [`is-${color}`]:\n      color &&\n      validButtonColors.includes(color as (typeof validButtonColors)[number]),\n    [`is-${size}`]: size,\n    'is-outlined': isOutlined,\n    'is-light': isLight,\n    'is-loading': isLoading,\n    'is-static': isStatic,\n    'is-disabled': isDisabled,\n    'is-rounded': isRounded,\n    'is-hovered': isHovered,\n    'is-focused': isFocused,\n    'is-active': isActive,\n    'is-inverted': isInverted,\n    'is-fullwidth': isFullwidth ?? isFullWidth,\n  });\n\n  // Combine prefixed Bulma classes with unprefixed user className and prefixed helper classes\n  const buttonClasses = classNames(bulmaClasses, bulmaHelperClasses, className);\n\n  if (Component !== 'button') {\n    // Strip the form-control attributes a link-like element cannot carry, so a\n    // JavaScript consumer or a spread object doesn't put them on the DOM. The\n    // types no longer allow them through; this is the runtime backstop.\n    //\n    // Only for INTRINSIC tags. A custom component (a router Link, ...) owns its\n    // prop contract, and `ComponentPropsWithoutRef<T>` promises the caller that\n    // its props reach it. Stripping names by their spelling alone broke that\n    // promise silently: `<Button as={Custom} name=\"x\" />` type-checked while\n    // `Custom` never received the `name` it requires.\n    //\n    // `autoFocus` and `type` are deliberately NOT stripped: both are valid on\n    // targets this list was filtering them from. `autoFocus` is a global\n    // attribute (React decides per element whether to honour it, which is not\n    // ours to pre-empt), and `type` on an anchor is the MIME hint that\n    // `ButtonProps<'a'>` now types it as.\n    //\n    // The types already answer this for a TypeScript caller: `ButtonProps<T>`\n    // derives from `ComponentPropsWithoutRef<T>`, so only what the target\n    // accepts can be passed. What is left is a runtime backstop for JavaScript\n    // consumers and spread objects.\n    //\n    // Keep it to the two cases where a stray attribute does something. The\n    // submit-overrides belong to a submit control and never make sense on the\n    // anchor path. `disabled` is the one that is VISIBLE: Bulma styles\n    // `.button[disabled]` (background, border, shadow, opacity), so letting it\n    // through to a `<span>` greys the element out — main stripped it, and not\n    // stripping it would be a silent visual change on a types-only release.\n    //\n    // Everything else (`name`, `value`, `form`) is inert where it does not\n    // belong, and enumerating which tags own it is what kept going wrong:\n    // first all nine names on every non-button tag (so `<Button as=\"input\"\n    // name=\"query\" value=\"Search\">` submitted nothing), then a form-control\n    // allowlist that still lost `formAction` on an input and `value` on an\n    // option. Those now ride on the types instead.\n    //\n    // A custom component is exempt entirely — it owns its prop contract, and\n    // `ComponentPropsWithoutRef<T>` promises the caller its props arrive.\n    //\n    // The elements that own `disabled`, per the HTML spec. A closed set, unlike\n    // the open-ended question of which tag owns which attribute.\n    const SUBMIT_OVERRIDES = [\n      'formAction',\n      'formEncType',\n      'formMethod',\n      'formNoValidate',\n      'formTarget',\n    ];\n    const OWNS_DISABLED = [\n      'button',\n      'fieldset',\n      'input',\n      'optgroup',\n      'option',\n      'select',\n      'textarea',\n    ];\n\n    // Two independent filters. They are not exclusive — an `<a>` owns neither\n    // the submit-overrides nor `disabled`, so it takes both — and deriving them\n    // from one destructure, or from one if/else, is what broke each of them in\n    // turn: first the overrides came off every intrinsic (an `as=\"input\"` lost\n    // `formAction`), then scoping them to the anchor let `disabled` back onto\n    // it.\n    const forwardedRest: Record<string, unknown> = { ...rest };\n    if (typeof Component === 'string' && !isCustomElement(Component)) {\n      // Meaningless anywhere but a submit control, and an anchor is not one.\n      if (Component === 'a') {\n        for (const key of SUBMIT_OVERRIDES) delete forwardedRest[key];\n      }\n      // Visible via Bulma's `.button[disabled]`, so withheld from any element\n      // that does not own it.\n      if (!OWNS_DISABLED.includes(Component)) delete forwardedRest.disabled;\n    }\n\n    return (\n      <Component\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        className={buttonClasses}\n        href={href}\n        target={target}\n        rel={rel}\n        aria-disabled={isDisabled}\n        tabIndex={isDisabled ? -1 : undefined}\n        onClick={\n          isDisabled\n            ? // Guarded, because this handler is installed into whatever `as`\n              // renders and a custom component's `onClick` need not be a DOM\n              // event handler at all. One declaring `onClick: (v: string) =>\n              // void` calls this with a string, and an unguarded\n              // `e.preventDefault()` throws `is not a function`. Blocking the\n              // real event is the point; a foreign payload is simply not ours\n              // to act on.\n              (e: React.MouseEvent<HTMLAnchorElement>) => {\n                if (typeof e?.preventDefault === 'function') e.preventDefault();\n              }\n            : (onClick as\n                React.MouseEventHandler<HTMLAnchorElement> | undefined)\n        }\n        {...(forwardedRest as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n      >\n        {children}\n      </Component>\n    );\n  }\n\n  return (\n    <button\n      ref={ref as React.Ref<HTMLButtonElement>}\n      className={buttonClasses}\n      disabled={isDisabled}\n      onClick={\n        onClick as React.MouseEventHandler<HTMLButtonElement> | undefined\n      }\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n}) as PolymorphicComponent<ButtonOwnProps, 'button'>;\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../../src/elements/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  isCustomElement,\n  type PolymorphicComponent,\n} from '../helpers/polymorphic';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\n\n/**\n * The Button component's own props — everything it adds on top of the\n * attributes of whatever element `as` renders.\n */\nexport interface ButtonOwnProps extends Omit<\n  BulmaClassesProps,\n  'color' | 'backgroundColor' | 'size'\n> {\n  /**\n   * Not accepted under this name. `useBulmaClasses` consumes any\n   * `backgroundColor` key before `rest` is spread, so a custom `as` target\n   * declaring one would never receive it. Use `bgColor`.\n   * @internal\n   */\n  backgroundColor?: never;\n  /** Bulma color variant for the button. `ghost` renders a link-like button; `text` renders a minimal text-only button. */\n  color?:\n    | 'primary'\n    | 'link'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'white'\n    | 'light'\n    | 'dark'\n    | 'black'\n    | 'text'\n    | 'ghost';\n  /** Size of the button. */\n  size?: 'small' | 'normal' | 'medium' | 'large';\n  /** Applies a lighter color variant. */\n  isLight?: boolean;\n  /** Makes the button rounded. */\n  isRounded?: boolean;\n  /**\n   * Displays a loading spinner, with everything inside the button hidden\n   * behind it, in forced colors (Windows' contrast themes) too. Under\n   * `prefers-reduced-motion: reduce` the spinner stops and stays drawn.\n   * Bulma alone hides only the label, so the rest needs bestax's CSS loaded.\n   */\n  isLoading?: boolean;\n  /** Makes the button non-interactive. */\n  isStatic?: boolean;\n  /** Makes the button full-width. */\n  isFullwidth?: boolean;\n  /** Makes the button full-width. @deprecated Use `isFullwidth` instead — `isFullwidth` wins if both are set. */\n  isFullWidth?: boolean;\n  /** Applies outlined styling (requires color). */\n  isOutlined?: boolean;\n  /** Applies inverted styling (requires color). */\n  isInverted?: boolean;\n  /** Applies focused styling (visual only). */\n  isFocused?: boolean;\n  /** Applies active styling (visual only), with no `aria-pressed`. For a button that stays pressed, use `ToggleButton`. */\n  isActive?: boolean;\n  /** Applies hovered styling (visual only). */\n  isHovered?: boolean;\n  /** Applies disabled styling. */\n  isDisabled?: boolean;\n  /** Custom class name. */\n  className?: string;\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color helper. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Button content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Props for the Button component. The DOM attributes and the `ref` both follow\n * `as`: with `as=\"a\"` the anchor attributes are accepted, with `as=\"div\"` they\n * are not.\n *\n * @extraProp {PolymorphicRef<React.ElementType>} [ref] - Ref forwarded to the element `as` renders, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.\n */\nexport type ButtonProps<T extends React.ElementType = 'button'> =\n  ButtonOwnProps &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof ButtonOwnProps | 'as'> & {\n      /** Render as a `<button>`, `<a>`, or a custom component (e.g. a router `Link`). Defaults to `'button'`; anything else renders through the anchor path, which adds `href`/`target`/`rel` and withholds the submit-override attributes (`formAction` and friends) from an `<a>`. */\n      as?: T;\n    };\n\n/**\n * The shape the implementation destructures. The public contract is the generic\n * `ButtonProps<T>` above — the body cannot see through `T`, so it reads the\n * widest form of the props it actually touches.\n */\ntype ButtonImplProps = ButtonOwnProps & {\n  as?: React.ElementType;\n  href?: string;\n  target?: string;\n  rel?: string;\n  onClick?:\n    | React.MouseEventHandler<HTMLButtonElement>\n    | React.MouseEventHandler<HTMLAnchorElement>;\n};\n\nconst validButtonColors = [...validColors, 'text', 'ghost'] as const;\n\n/**\n * The `Button` component provides a flexible and highly customizable button for your Bulma React UI.\n *\n * @function\n * @param {ButtonProps} props - Props for the Button component.\n * @param {React.Ref} ref - Forwarded ref to the element `as` renders.\n * @returns {JSX.Element} The rendered button, anchor, or custom element.\n * @see {@link https://bulma.io/documentation/elements/button/ | Bulma Button documentation}\n */\n\nexport const Button = forwardRef(function Button(\n  props: ButtonProps,\n  ref: React.Ref<HTMLElement>\n) {\n  const {\n    color,\n    size,\n    isLight,\n    isRounded,\n    isLoading,\n    isStatic,\n    isFullwidth,\n    isFullWidth,\n    isOutlined,\n    isInverted,\n    isFocused,\n    isActive,\n    isHovered,\n    isDisabled,\n    className,\n    children,\n    textColor,\n    bgColor,\n    as: Component = 'button',\n    href,\n    onClick,\n    target,\n    rel,\n    ...bulmaProps\n  } = props as ButtonImplProps;\n\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...bulmaProps,\n  });\n\n  // Generate Bulma classes with prefix\n  const bulmaClasses = usePrefixedClassNames('button', {\n    [`is-${color}`]:\n      color &&\n      validButtonColors.includes(color as (typeof validButtonColors)[number]),\n    [`is-${size}`]: size,\n    'is-outlined': isOutlined,\n    // The light color's own class is this key too, and this one comes later,\n    // so it has to set the class for `light` as well or it erases it.\n    'is-light': isLight || color === 'light',\n    'is-loading': isLoading,\n    'is-static': isStatic,\n    'is-disabled': isDisabled,\n    'is-rounded': isRounded,\n    'is-hovered': isHovered,\n    'is-focused': isFocused,\n    'is-active': isActive,\n    'is-inverted': isInverted,\n    'is-fullwidth': isFullwidth ?? isFullWidth,\n  });\n\n  // Combine prefixed Bulma classes with unprefixed user className and prefixed helper classes\n  const buttonClasses = classNames(bulmaClasses, bulmaHelperClasses, className);\n\n  if (Component !== 'button') {\n    // Strip the form-control attributes a link-like element cannot carry, so a\n    // JavaScript consumer or a spread object doesn't put them on the DOM. The\n    // types no longer allow them through; this is the runtime backstop.\n    //\n    // Only for INTRINSIC tags. A custom component (a router Link, ...) owns its\n    // prop contract, and `ComponentPropsWithoutRef<T>` promises the caller that\n    // its props reach it. Stripping names by their spelling alone broke that\n    // promise silently: `<Button as={Custom} name=\"x\" />` type-checked while\n    // `Custom` never received the `name` it requires.\n    //\n    // `autoFocus` and `type` are deliberately NOT stripped: both are valid on\n    // targets this list was filtering them from. `autoFocus` is a global\n    // attribute (React decides per element whether to honour it, which is not\n    // ours to pre-empt), and `type` on an anchor is the MIME hint that\n    // `ButtonProps<'a'>` now types it as.\n    //\n    // The types already answer this for a TypeScript caller: `ButtonProps<T>`\n    // derives from `ComponentPropsWithoutRef<T>`, so only what the target\n    // accepts can be passed. What is left is a runtime backstop for JavaScript\n    // consumers and spread objects.\n    //\n    // Keep it to the two cases where a stray attribute does something. The\n    // submit-overrides belong to a submit control and never make sense on the\n    // anchor path. `disabled` is the one that is VISIBLE: Bulma styles\n    // `.button[disabled]` (background, border, shadow, opacity), so letting it\n    // through to a `<span>` greys the element out — main stripped it, and not\n    // stripping it would be a silent visual change on a types-only release.\n    //\n    // Everything else (`name`, `value`, `form`) is inert where it does not\n    // belong, and enumerating which tags own it is what kept going wrong:\n    // first all nine names on every non-button tag (so `<Button as=\"input\"\n    // name=\"query\" value=\"Search\">` submitted nothing), then a form-control\n    // allowlist that still lost `formAction` on an input and `value` on an\n    // option. Those now ride on the types instead.\n    //\n    // A custom component is exempt entirely — it owns its prop contract, and\n    // `ComponentPropsWithoutRef<T>` promises the caller its props arrive.\n    //\n    // The elements that own `disabled`, per the HTML spec. A closed set, unlike\n    // the open-ended question of which tag owns which attribute.\n    const SUBMIT_OVERRIDES = [\n      'formAction',\n      'formEncType',\n      'formMethod',\n      'formNoValidate',\n      'formTarget',\n    ];\n    const OWNS_DISABLED = [\n      'button',\n      'fieldset',\n      'input',\n      'optgroup',\n      'option',\n      'select',\n      'textarea',\n    ];\n\n    // Two independent filters. They are not exclusive — an `<a>` owns neither\n    // the submit-overrides nor `disabled`, so it takes both — and deriving them\n    // from one destructure, or from one if/else, is what broke each of them in\n    // turn: first the overrides came off every intrinsic (an `as=\"input\"` lost\n    // `formAction`), then scoping them to the anchor let `disabled` back onto\n    // it.\n    const forwardedRest: Record<string, unknown> = { ...rest };\n    if (typeof Component === 'string' && !isCustomElement(Component)) {\n      // Meaningless anywhere but a submit control, and an anchor is not one.\n      if (Component === 'a') {\n        for (const key of SUBMIT_OVERRIDES) delete forwardedRest[key];\n      }\n      // Visible via Bulma's `.button[disabled]`, so withheld from any element\n      // that does not own it.\n      if (!OWNS_DISABLED.includes(Component)) delete forwardedRest.disabled;\n    }\n\n    return (\n      <Component\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        className={buttonClasses}\n        href={href}\n        target={target}\n        rel={rel}\n        aria-disabled={isDisabled}\n        tabIndex={isDisabled ? -1 : undefined}\n        onClick={\n          isDisabled\n            ? // Guarded, because this handler is installed into whatever `as`\n              // renders and a custom component's `onClick` need not be a DOM\n              // event handler at all. One declaring `onClick: (v: string) =>\n              // void` calls this with a string, and an unguarded\n              // `e.preventDefault()` throws `is not a function`. Blocking the\n              // real event is the point; a foreign payload is simply not ours\n              // to act on.\n              (e: React.MouseEvent<HTMLAnchorElement>) => {\n                if (typeof e?.preventDefault === 'function') e.preventDefault();\n              }\n            : (onClick as\n                React.MouseEventHandler<HTMLAnchorElement> | undefined)\n        }\n        {...(forwardedRest as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n      >\n        {children}\n      </Component>\n    );\n  }\n\n  return (\n    <button\n      ref={ref as React.Ref<HTMLButtonElement>}\n      className={buttonClasses}\n      disabled={isDisabled}\n      onClick={\n        onClick as React.MouseEventHandler<HTMLButtonElement> | undefined\n      }\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n}) as PolymorphicComponent<ButtonOwnProps, 'button'>;\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["_jsx"],"mappings":"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"}

package/dist/esm/elements/Notification.js

@@ -11,6 +11,7 @@ import { useIsHydrated } from '../helpers/useIsHydrated.js';
 import { usePortalContainer } from '../helpers/portal.js';
 import { LocalePortalScope } from '../helpers/LocaleProvider.js';
 import { spokenText, StatusRegion } from '../helpers/statusRegion.js';
+import { scrollLockOffset } from '../helpers/scrollLock.js';
 import { validColors } from '../helpers/bulmaClassHelpers.js';
 
 /**
@@ -32,7 +33,9 @@ const Notification = ({ className, color, textColor, isLight, hasDelete, onDelet
     });
     const bulmaClasses = usePrefixedClassNames('notification', {
         [`is-${color}`]: color && validColors.includes(color),
-        'is-light': isLight,
+        // The light color's own class is this key too, and this one comes later,
+        // so it has to set the class for `light` as well or it erases it.
+        'is-light': isLight || color === 'light',
         'has-delete': hasDelete,
     });
     const deleteClasses = usePrefixedClassNames('delete');
@@ -224,6 +227,8 @@ const notificationStackOrder = [
 ];
 /**
  * Inline style that fixes a stack of notifications to its place on the screen.
+ * While an overlay locks the page, each side adds the room the page's
+ * scrollbar gave back there, so the stack stays put as the scrollbar goes.
  *
  * @function
  * @param {NotificationPosition} position - Where the stack sits.
@@ -233,6 +238,8 @@ const notificationStackStyle = (position) => {
     const isBottom = position.startsWith('bottom');
     const isCenter = position === 'top' || position === 'bottom';
     const isRight = position.endsWith('right');
+    const left = scrollLockOffset('left');
+    const right = scrollLockOffset('right');
     return {
         position: 'fixed',
         zIndex: 100,
@@ -241,13 +248,17 @@ const notificationStackStyle = (position) => {
         gap: '0.75rem',
         padding: '1rem',
         pointerEvents: 'none',
-        maxWidth: '100%',
+        maxWidth: `calc(100% - ${left} - ${right})`,
         ...(isBottom ? { bottom: 0 } : { top: 0 }),
         ...(isCenter
-            ? { left: '50%', transform: 'translateX(-50%)', alignItems: 'center' }
+            ? {
+                left: `calc(50% + (${left} - ${right}) / 2)`,
+                transform: 'translateX(-50%)',
+                alignItems: 'center',
+            }
             : isRight
-                ? { right: 0, alignItems: 'flex-end' }
-                : { left: 0, alignItems: 'flex-start' }),
+                ? { right, alignItems: 'flex-end' }
+                : { left, alignItems: 'flex-start' }),
     };
 };
 /**

package/dist/esm/elements/Notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sources":["../../../src/elements/Notification.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useCallback,\n  useSyncExternalStore,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { warnUnstyledColor } from '../helpers/colorDeprecations';\nimport { groupIntoPositionStacks } from '../helpers/positionStacks';\nimport { useIsHydrated } from '../helpers/useIsHydrated';\nimport { usePortalContainer } from '../helpers/portal';\nimport { LocalePortalScope } from '../helpers/LocaleProvider';\nimport { StatusRegion, spokenText } from '../helpers/statusRegion';\n\n/**\n * Props for the Notification component.\n */\nexport interface NotificationProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /**\n   * Bulma color modifier for the notification (renders `is-<color>`).\n   *\n   * Only `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`,\n   * `white`, `light`, and `dark` have shipped CSS for `.notification`. Every\n   * other value the union accepts emits a class no CSS rule matches, so the\n   * notification renders unstyled; those log a console warning in development\n   * and will be removed from this union in the next major version.\n   *\n   * `dark` takes the dark color's own text and background from bestax's\n   * stylesheets, as a dark `Button` has. With Bulma's CSS alone, a dark\n   * notification's text inherits the color around it, which on a light page\n   * is one shade off its background.\n   */\n  color?: (typeof validColors)[number];\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /**\n   * Use the light color variant. The dark color has none, so `color=\"dark\"`\n   * with `isLight` looks the same as without it, as a dark `Button` does.\n   */\n  isLight?: boolean;\n  /**\n   * Shows a close (delete) button in the notification. It renders\n   * `type=\"button\"`, so it does not submit a form around it.\n   *\n   * The notification also takes `has-delete`, which pads its end by\n   * `--bulma-notification-delete-padding-inline-end` so the text clears the\n   * button. That rule ships in bestax's stylesheets, not Bulma's, so an app\n   * styled by Bulma's CSS alone keeps Bulma's padding.\n   */\n  hasDelete?: boolean;\n  /** Callback fired when the delete button is clicked. */\n  onDelete?: () => void;\n  /** Content inside the notification. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Notification` component is a Bulma-styled alert/message area for providing feedback, warnings, or information to users.\n *\n * @function\n * @param {NotificationProps} props - Props for the Notification component.\n * @returns {JSX.Element} The rendered notification element.\n * @see {@link https://bulma.io/documentation/elements/notification/ | Bulma Notification documentation}\n */\nexport const Notification: React.FC<NotificationProps> = ({\n  className,\n  color,\n  textColor,\n  isLight,\n  hasDelete,\n  onDelete,\n  children,\n  ...props\n}) => {\n  warnUnstyledColor('Notification', color);\n\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    ...props,\n  });\n\n  const bulmaClasses = usePrefixedClassNames('notification', {\n    [`is-${color}`]: color && validColors.includes(color),\n    'is-light': isLight,\n    'has-delete': hasDelete,\n  });\n\n  const deleteClasses = usePrefixedClassNames('delete');\n\n  const notificationClasses = classNames(\n    bulmaClasses,\n    bulmaHelperClasses,\n    className\n  );\n\n  return (\n    <div className={notificationClasses} {...rest}>\n      {hasDelete && (\n        <button\n          type=\"button\"\n          className={deleteClasses}\n          onClick={onDelete}\n          aria-label=\"Close notification\"\n        />\n      )}\n      {children}\n    </div>\n  );\n};\n\n// Programmatic Notification API\n\n/** Screen positions where programmatic notifications can be displayed. */\nexport type NotificationPosition =\n  'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right';\n\n/**\n * Options for showing a programmatic notification.\n */\nexport interface NotificationOptions {\n  /**\n   * The message to display.\n   *\n   * For a notification other than `danger` and `warning`, NotificationContainer\n   * announces the text the message renders, with an element's `aria-label`,\n   * or an image's `alt`, standing in for what's inside it, a break between\n   * block-level elements, and parts that are `aria-hidden`, `hidden` or\n   * inline-styled `display: none` left out. Other ways of naming or hiding\n   * content, such as `aria-labelledby`, CSS-generated content or a\n   * stylesheet's `display: none`, aren't followed, so a message that relies on\n   * them can be announced differently from what a screen reader would read.\n   */\n  message: string | React.ReactNode;\n  /**\n   * Bulma color modifier for the notification (renders `is-<color>`).\n   *\n   * Only `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`,\n   * `white`, `light`, and `dark` have shipped CSS for `.notification`. Every\n   * other value the union accepts emits a class no CSS rule matches, so the\n   * notification renders unstyled; those log a console warning in development\n   * and will be removed from this union in the next major version.\n   *\n   * `dark` takes the dark color's own text and background from bestax's\n   * stylesheets, as a dark `Button` has. With Bulma's CSS alone, a dark\n   * notification's text inherits the color around it, which on a light page\n   * is one shade off its background.\n   */\n  color?: (typeof validColors)[number];\n  /**\n   * Use the light color variant. The dark color has none, so `color=\"dark\"`\n   * with `isLight` looks the same as without it, as a dark `Button` does.\n   */\n  isLight?: boolean;\n  /** Duration in ms before auto-close. Default 3000. */\n  duration?: number;\n  /**\n   * Position on the screen. A notification shown without one goes to\n   * `NotificationContainer`'s `position`.\n   */\n  position?: NotificationPosition;\n  /**\n   * When true, notifications enter a FIFO queue and display one at a time,\n   * one queue across every `position`. Default false.\n   */\n  queue?: boolean;\n  /** Show a delete (close) button. Default true. */\n  hasDelete?: boolean;\n  /** Stay open until dismissed. */\n  indefinite?: boolean;\n  /** Pause auto-close timer on hover. Default true. */\n  pauseOnHover?: boolean;\n}\n\n/**\n * Internal representation of a notification instance.\n */\ninterface NotificationInstance {\n  /** Unique identifier for this notification. */\n  id: string;\n  /** Configuration options for the notification. */\n  options: NotificationOptions;\n}\n\nlet notificationId = 0;\nconst notificationListeners: Set<(items: NotificationInstance[]) => void> =\n  new Set();\nlet notifications: NotificationInstance[] = [];\n\n// Queue support\nlet queuedNotifications: NotificationInstance[] = [];\nlet currentQueuedNotification: NotificationInstance | null = null;\n\n// The server has nowhere to portal a notification to, and its copy of this\n// module is shared by every request, so server rendering reads an empty list.\n// Hydration reads it too, which keeps the first client render matching the\n// server's.\nconst noNotifications: NotificationInstance[] = [];\nconst getServerNotifications = () => noNotifications;\n\n// What a container shows right now: the stacked notifications, then the queued\n// one on screen. NotificationContainer renders from this rather than from\n// updates alone, so notifications raised before it mounted still appear. It is\n// replaced rather than mutated, and only when listeners are notified, because\n// useSyncExternalStore needs the same array back between changes. An empty\n// list is `noNotifications` itself, so an empty store reads the same snapshot\n// on the client as on the server, and a notify that leaves nothing showing\n// when nothing was showing doesn't render the container again.\nlet visibleNotifications: NotificationInstance[] = noNotifications;\nconst getVisibleNotifications = () => visibleNotifications;\n\nconst notifyNotificationListeners = () => {\n  const allVisible = [...notifications];\n  if (currentQueuedNotification) {\n    allVisible.push(currentQueuedNotification);\n  }\n  visibleNotifications = allVisible.length > 0 ? allVisible : noNotifications;\n  notificationListeners.forEach(listener => listener([...allVisible]));\n};\n\nconst processQueuedNotification = () => {\n  if (currentQueuedNotification || queuedNotifications.length === 0) return;\n  currentQueuedNotification = queuedNotifications.shift()!;\n  notifyNotificationListeners();\n};\n\n/**\n * Programmatic notification API for showing, closing, and managing notifications.\n *\n * @example\n * notification.success('File saved successfully');\n * notification.danger('Something went wrong', { duration: 5000 });\n */\nexport const notification = {\n  /**\n   * Show a notification with the given options.\n   * @param {NotificationOptions} options - Notification configuration.\n   * @returns {string} The unique ID of the created notification.\n   */\n  show: (options: NotificationOptions): string => {\n    const id = `notification-${++notificationId}`;\n    const instance = { id, options };\n\n    if (options.queue) {\n      queuedNotifications.push(instance);\n      processQueuedNotification();\n    } else {\n      notifications.push(instance);\n      notifyNotificationListeners();\n    }\n\n    return id;\n  },\n\n  /**\n   * Show a success notification.\n   * @param {string|React.ReactNode} message - The message to display.\n   * @param {Partial<NotificationOptions>} [options] - Additional options.\n   * @returns {string} The notification ID.\n   */\n  success: (\n    message: string | React.ReactNode,\n    options?: Partial<NotificationOptions>\n  ): string => {\n    return notification.show({ message, color: 'success', ...options });\n  },\n\n  /**\n   * Show a danger notification.\n   * @param {string|React.ReactNode} message - The message to display.\n   * @param {Partial<NotificationOptions>} [options] - Additional options.\n   * @returns {string} The notification ID.\n   */\n  danger: (\n    message: string | React.ReactNode,\n    options?: Partial<NotificationOptions>\n  ): string => {\n    return notification.show({ message, color: 'danger', ...options });\n  },\n\n  /**\n   * Show a warning notification.\n   * @param {string|React.ReactNode} message - The message to display.\n   * @param {Partial<NotificationOptions>} [options] - Additional options.\n   * @returns {string} The notification ID.\n   */\n  warning: (\n    message: string | React.ReactNode,\n    options?: Partial<NotificationOptions>\n  ): string => {\n    return notification.show({ message, color: 'warning', ...options });\n  },\n\n  /**\n   * Show an info notification.\n   * @param {string|React.ReactNode} message - The message to display.\n   * @param {Partial<NotificationOptions>} [options] - Additional options.\n   * @returns {string} The notification ID.\n   */\n  info: (\n    message: string | React.ReactNode,\n    options?: Partial<NotificationOptions>\n  ): string => {\n    return notification.show({ message, color: 'info', ...options });\n  },\n\n  /**\n   * Close a specific notification by ID.\n   * @param {string} id - The notification ID to close.\n   */\n  close: (id: string): void => {\n    if (currentQueuedNotification && currentQueuedNotification.id === id) {\n      currentQueuedNotification = null;\n      processQueuedNotification();\n    } else {\n      queuedNotifications = queuedNotifications.filter(n => n.id !== id);\n      notifications = notifications.filter(n => n.id !== id);\n    }\n    notifyNotificationListeners();\n  },\n\n  /** Close all notifications and clear the queue. */\n  closeAll: (): void => {\n    notifications = [];\n    queuedNotifications = [];\n    currentQueuedNotification = null;\n    notifyNotificationListeners();\n  },\n\n  /**\n   * Subscribe to notification state changes.\n   * @param {(items: NotificationInstance[]) => void} listener - Callback invoked on changes.\n   * @returns {() => void} Unsubscribe function.\n   */\n  subscribe: (\n    listener: (items: NotificationInstance[]) => void\n  ): (() => void) => {\n    notificationListeners.add(listener);\n    return () => notificationListeners.delete(listener);\n  },\n};\n\n/**\n * Whether a notification of this color announces itself as an alert, rather\n * than politely through NotificationContainer's status region.\n *\n * @function isUrgentColor\n * @param {NotificationOptions['color']} color - The notification's color.\n * @returns {boolean} True for `danger` and `warning`.\n */\nconst isUrgentColor = (color: NotificationOptions['color']): boolean =>\n  color === 'danger' || color === 'warning';\n\n/**\n * Single auto-dismissing notification item used by NotificationContainer.\n *\n * @function\n * @param {{ instance: NotificationInstance; onClose: (id: string) => void; registerMessage: (id: string, node: HTMLElement | null) => void }} props - Component props.\n * @returns {JSX.Element} The rendered notification item.\n */\nconst NotificationItem: React.FC<{\n  instance: NotificationInstance;\n  onClose: (id: string) => void;\n  registerMessage: (id: string, node: HTMLElement | null) => void;\n}> = ({ instance, onClose, registerMessage }) => {\n  const {\n    message,\n    color,\n    isLight,\n    duration = 3000,\n    hasDelete = true,\n    indefinite = false,\n    pauseOnHover = true,\n  } = instance.options;\n\n  const [isPaused, setIsPaused] = useState(false);\n  const urgent = isUrgentColor(color);\n\n  const handleClose = useCallback(() => {\n    onClose(instance.id);\n  }, [onClose, instance.id]);\n\n  const messageRef = useCallback(\n    (node: HTMLElement | null) => {\n      registerMessage(instance.id, node);\n    },\n    [registerMessage, instance.id]\n  );\n\n  // Auto-close timer\n  useEffect(() => {\n    if (indefinite || duration === 0 || isPaused) return undefined;\n\n    const timer = setTimeout(handleClose, duration);\n    return () => clearTimeout(timer);\n  }, [duration, indefinite, isPaused, handleClose]);\n\n  const handleMouseEnter = useCallback(() => {\n    if (pauseOnHover) setIsPaused(true);\n  }, [pauseOnHover]);\n\n  const handleMouseLeave = useCallback(() => {\n    if (pauseOnHover) setIsPaused(false);\n  }, [pauseOnHover]);\n\n  return (\n    <Notification\n      color={color}\n      isLight={isLight}\n      hasDelete={hasDelete}\n      onDelete={handleClose}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      style={{ pointerEvents: 'auto' }}\n    >\n      {/* Only the message is announced, not the close button Notification\n          renders ahead of its children. Danger and warning announce\n          themselves as an assertive alert, which a screen reader reliably\n          reads out even when it arrives with its text. The rest are announced\n          through the container's status region, which reads their text from\n          this span, so it carries no role of its own that would announce them\n          a second time. */}\n      {urgent ? (\n        <span role=\"alert\" aria-live=\"assertive\">\n          {message}\n        </span>\n      ) : (\n        <span ref={messageRef}>{message}</span>\n      )}\n    </Notification>\n  );\n};\n\n// The order NotificationContainer renders its stacks in: across the top of the\n// screen, then across the bottom.\nconst notificationStackOrder: readonly NotificationPosition[] = [\n  'top-left',\n  'top',\n  'top-right',\n  'bottom-left',\n  'bottom',\n  'bottom-right',\n];\n\n/**\n * Inline style that fixes a stack of notifications to its place on the screen.\n *\n * @function\n * @param {NotificationPosition} position - Where the stack sits.\n * @returns {React.CSSProperties} The stack's style.\n */\nconst notificationStackStyle = (\n  position: NotificationPosition\n): React.CSSProperties => {\n  const isBottom = position.startsWith('bottom');\n  const isCenter = position === 'top' || position === 'bottom';\n  const isRight = position.endsWith('right');\n\n  return {\n    position: 'fixed',\n    zIndex: 100,\n    display: 'flex',\n    flexDirection: isBottom ? 'column-reverse' : 'column',\n    gap: '0.75rem',\n    padding: '1rem',\n    pointerEvents: 'none',\n    maxWidth: '100%',\n    ...(isBottom ? { bottom: 0 } : { top: 0 }),\n    ...(isCenter\n      ? { left: '50%', transform: 'translateX(-50%)', alignItems: 'center' }\n      : isRight\n        ? { right: 0, alignItems: 'flex-end' }\n        : { left: 0, alignItems: 'flex-start' }),\n  };\n};\n\n/**\n * Container component for rendering programmatic notifications.\n * Place once at your app root to enable the notification API. A notification\n * shown with a `position` appears there, and one shown without goes to the\n * container's `position`, so the container renders a stack for each position\n * in use.\n *\n * It keeps a visually hidden `role=\"status\"` live region in the page from the\n * moment it mounts, even while nothing is showing, and announces every\n * notification other than `danger` and `warning` through it, a moment after\n * the notification appears. Those notifications carry no `role=\"status\"` of\n * their own, so `getByRole('status')` finds the region, not the notification.\n * The text stays in the region briefly, even if the notification closes in\n * the meantime, and while both are up the page holds two copies of it. A\n * polite notification that closes before its announcement is written, a\n * moment after it appears, isn't announced at all. `danger` and `warning`\n * notifications announce themselves as assertive alerts. The region is hidden\n * with inline styles, so it needs no stylesheet.\n *\n * @function\n * @param {{ position?: NotificationPosition }} props - Container props.\n * @returns {JSX.Element | null} The rendered notification container, or null on the server and while hydrating.\n */\nexport const NotificationContainer: React.FC<{\n  /**\n   * Where a notification shown without a `position` of its own appears.\n   * Default: 'top-right'. When it changes, those notifications move without\n   * remounting, but one shown with its own `position` equal to the old or new\n   * value remounts and starts over as if it had just been shown.\n   */\n  position?: NotificationPosition;\n}> = ({ position = 'top-right' }) => {\n  // Starts from the notifications already showing instead of an empty list,\n  // then follows changes.\n  const items = useSyncExternalStore(\n    notification.subscribe,\n    getVisibleNotifications,\n    getServerNotifications\n  );\n  // A portal needs a document, and it has no server-rendered counterpart, so\n  // the server render and the hydrating one render nothing, and the container\n  // portals in from the render after hydration.\n  const isHydrated = useIsHydrated();\n  const resolveContainer = usePortalContainer();\n\n  // The notifications the status region announces. Danger and warning\n  // announce themselves.\n  const politeItems = useMemo(\n    () => items.filter(item => !isUrgentColor(item.options.color)),\n    [items]\n  );\n\n  // Each polite notification's message element, so the text the region\n  // announces is the text on screen, whatever the message renders.\n  const messageNodesRef = useRef(new Map<string, HTMLElement>());\n  const registerMessage = useCallback(\n    (id: string, node: HTMLElement | null) => {\n      if (node) {\n        messageNodesRef.current.set(id, node);\n      } else {\n        messageNodesRef.current.delete(id);\n      }\n    },\n    []\n  );\n  // StatusRegion only describes polite notifications that are on screen, and\n  // each of those registered its message element when it mounted. The\n  // fallback is for a notification announced without being rendered, should\n  // the container ever render fewer than it announces: a plain-text message\n  // still says itself, and anything else is skipped.\n  const describe = useCallback((item: NotificationInstance) => {\n    const node = messageNodesRef.current.get(item.id);\n    /* istanbul ignore if: every polite notification on screen registers its message element when it mounts */\n    if (!node) {\n      const { message } = item.options;\n      return typeof message === 'string' ? message : null;\n    }\n    return spokenText(node);\n  }, []);\n\n  if (typeof document === 'undefined' || !isHydrated) {\n    return null;\n  }\n\n  const stacks = groupIntoPositionStacks(\n    items,\n    item => item.options.position,\n    position,\n    notificationStackOrder\n  );\n\n  const target = resolveContainer();\n  return createPortal(\n    <LocalePortalScope target={target}>\n      {stacks.map(stack => (\n        <div key={stack.key} style={notificationStackStyle(stack.position)}>\n          {stack.items.map(item => (\n            <NotificationItem\n              key={item.id}\n              instance={item}\n              onClose={notification.close}\n              registerMessage={registerMessage}\n            />\n          ))}\n        </div>\n      ))}\n      <StatusRegion items={politeItems} describe={describe} />\n    </LocalePortalScope>,\n    target\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Notification.js","sources":["../../../src/elements/Notification.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useCallback,\n  useSyncExternalStore,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { warnUnstyledColor } from '../helpers/colorDeprecations';\nimport { groupIntoPositionStacks } from '../helpers/positionStacks';\nimport { useIsHydrated } from '../helpers/useIsHydrated';\nimport { usePortalContainer } from '../helpers/portal';\nimport { LocalePortalScope } from '../helpers/LocaleProvider';\nimport { StatusRegion, spokenText } from '../helpers/statusRegion';\nimport { scrollLockOffset } from '../helpers/scrollLock';\n\n/**\n * Props for the Notification component.\n */\nexport interface NotificationProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /**\n   * Bulma color modifier for the notification (renders `is-<color>`).\n   *\n   * Only `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`,\n   * `white`, `light`, and `dark` have shipped CSS for `.notification`. Every\n   * other value the union accepts emits a class no CSS rule matches, so the\n   * notification renders unstyled; those log a console warning in development\n   * and will be removed from this union in the next major version.\n   *\n   * `dark` and `light` take their color's own text and background from\n   * bestax's stylesheets, as a dark or light `Button` has. With Bulma's CSS\n   * alone, their text inherits the color around it, which on a light page is\n   * one shade off a dark notification's background, and on a dark page is\n   * hard to read on a light one.\n   */\n  color?: (typeof validColors)[number];\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /**\n   * Use the light color variant. The light and dark colors have none, so\n   * `color=\"light\"` or `color=\"dark\"` with `isLight` looks the same as\n   * without it, as a light or dark `Button` does.\n   */\n  isLight?: boolean;\n  /**\n   * Shows a close (delete) button in the notification. It renders\n   * `type=\"button\"`, so it does not submit a form around it.\n   *\n   * The notification also takes `has-delete`, which pads its end by\n   * `--bulma-notification-delete-padding-inline-end` so the text clears the\n   * button. That rule ships in bestax's stylesheets, not Bulma's, so an app\n   * styled by Bulma's CSS alone keeps Bulma's padding.\n   */\n  hasDelete?: boolean;\n  /** Callback fired when the delete button is clicked. */\n  onDelete?: () => void;\n  /** Content inside the notification. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Notification` component is a Bulma-styled alert/message area for providing feedback, warnings, or information to users.\n *\n * @function\n * @param {NotificationProps} props - Props for the Notification component.\n * @returns {JSX.Element} The rendered notification element.\n * @see {@link https://bulma.io/documentation/elements/notification/ | Bulma Notification documentation}\n */\nexport const Notification: React.FC<NotificationProps> = ({\n  className,\n  color,\n  textColor,\n  isLight,\n  hasDelete,\n  onDelete,\n  children,\n  ...props\n}) => {\n  warnUnstyledColor('Notification', color);\n\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    ...props,\n  });\n\n  const bulmaClasses = usePrefixedClassNames('notification', {\n    [`is-${color}`]: color && validColors.includes(color),\n    // The light color's own class is this key too, and this one comes later,\n    // so it has to set the class for `light` as well or it erases it.\n    'is-light': isLight || color === 'light',\n    'has-delete': hasDelete,\n  });\n\n  const deleteClasses = usePrefixedClassNames('delete');\n\n  const notificationClasses = classNames(\n    bulmaClasses,\n    bulmaHelperClasses,\n    className\n  );\n\n  return (\n    <div className={notificationClasses} {...rest}>\n      {hasDelete && (\n        <button\n          type=\"button\"\n          className={deleteClasses}\n          onClick={onDelete}\n          aria-label=\"Close notification\"\n        />\n      )}\n      {children}\n    </div>\n  );\n};\n\n// Programmatic Notification API\n\n/** Screen positions where programmatic notifications can be displayed. */\nexport type NotificationPosition =\n  'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right';\n\n/**\n * Options for showing a programmatic notification.\n */\nexport interface NotificationOptions {\n  /**\n   * The message to display.\n   *\n   * For a notification other than `danger` and `warning`, NotificationContainer\n   * announces the text the message renders, with an element's `aria-label`,\n   * or an image's `alt`, standing in for what's inside it, a break between\n   * block-level elements, and parts that are `aria-hidden`, `hidden` or\n   * inline-styled `display: none` left out. Other ways of naming or hiding\n   * content, such as `aria-labelledby`, CSS-generated content or a\n   * stylesheet's `display: none`, aren't followed, so a message that relies on\n   * them can be announced differently from what a screen reader would read.\n   */\n  message: string | React.ReactNode;\n  /**\n   * Bulma color modifier for the notification (renders `is-<color>`).\n   *\n   * Only `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`,\n   * `white`, `light`, and `dark` have shipped CSS for `.notification`. Every\n   * other value the union accepts emits a class no CSS rule matches, so the\n   * notification renders unstyled; those log a console warning in development\n   * and will be removed from this union in the next major version.\n   *\n   * `dark` and `light` take their color's own text and background from\n   * bestax's stylesheets, as a dark or light `Button` has. With Bulma's CSS\n   * alone, their text inherits the color around it, which on a light page is\n   * one shade off a dark notification's background, and on a dark page is\n   * hard to read on a light one.\n   */\n  color?: (typeof validColors)[number];\n  /**\n   * Use the light color variant. The light and dark colors have none, so\n   * `color=\"light\"` or `color=\"dark\"` with `isLight` looks the same as\n   * without it, as a light or dark `Button` does.\n   */\n  isLight?: boolean;\n  /** Duration in ms before auto-close. Default 3000. */\n  duration?: number;\n  /**\n   * Position on the screen. A notification shown without one goes to\n   * `NotificationContainer`'s `position`.\n   */\n  position?: NotificationPosition;\n  /**\n   * When true, notifications enter a FIFO queue and display one at a time,\n   * one queue across every `position`. Default false.\n   */\n  queue?: boolean;\n  /** Show a delete (close) button. Default true. */\n  hasDelete?: boolean;\n  /** Stay open until dismissed. */\n  indefinite?: boolean;\n  /** Pause auto-close timer on hover. Default true. */\n  pauseOnHover?: boolean;\n}\n\n/**\n * Internal representation of a notification instance.\n */\ninterface NotificationInstance {\n  /** Unique identifier for this notification. */\n  id: string;\n  /** Configuration options for the notification. */\n  options: NotificationOptions;\n}\n\nlet notificationId = 0;\nconst notificationListeners: Set<(items: NotificationInstance[]) => void> =\n  new Set();\nlet notifications: NotificationInstance[] = [];\n\n// Queue support\nlet queuedNotifications: NotificationInstance[] = [];\nlet currentQueuedNotification: NotificationInstance | null = null;\n\n// The server has nowhere to portal a notification to, and its copy of this\n// module is shared by every request, so server rendering reads an empty list.\n// Hydration reads it too, which keeps the first client render matching the\n// server's.\nconst noNotifications: NotificationInstance[] = [];\nconst getServerNotifications = () => noNotifications;\n\n// What a container shows right now: the stacked notifications, then the queued\n// one on screen. NotificationContainer renders from this rather than from\n// updates alone, so notifications raised before it mounted still appear. It is\n// replaced rather than mutated, and only when listeners are notified, because\n// useSyncExternalStore needs the same array back between changes. An empty\n// list is `noNotifications` itself, so an empty store reads the same snapshot\n// on the client as on the server, and a notify that leaves nothing showing\n// when nothing was showing doesn't render the container again.\nlet visibleNotifications: NotificationInstance[] = noNotifications;\nconst getVisibleNotifications = () => visibleNotifications;\n\nconst notifyNotificationListeners = () => {\n  const allVisible = [...notifications];\n  if (currentQueuedNotification) {\n    allVisible.push(currentQueuedNotification);\n  }\n  visibleNotifications = allVisible.length > 0 ? allVisible : noNotifications;\n  notificationListeners.forEach(listener => listener([...allVisible]));\n};\n\nconst processQueuedNotification = () => {\n  if (currentQueuedNotification || queuedNotifications.length === 0) return;\n  currentQueuedNotification = queuedNotifications.shift()!;\n  notifyNotificationListeners();\n};\n\n/**\n * Programmatic notification API for showing, closing, and managing notifications.\n *\n * @example\n * notification.success('File saved successfully');\n * notification.danger('Something went wrong', { duration: 5000 });\n */\nexport const notification = {\n  /**\n   * Show a notification with the given options.\n   * @param {NotificationOptions} options - Notification configuration.\n   * @returns {string} The unique ID of the created notification.\n   */\n  show: (options: NotificationOptions): string => {\n    const id = `notification-${++notificationId}`;\n    const instance = { id, options };\n\n    if (options.queue) {\n      queuedNotifications.push(instance);\n      processQueuedNotification();\n    } else {\n      notifications.push(instance);\n      notifyNotificationListeners();\n    }\n\n    return id;\n  },\n\n  /**\n   * Show a success notification.\n   * @param {string|React.ReactNode} message - The message to display.\n   * @param {Partial<NotificationOptions>} [options] - Additional options.\n   * @returns {string} The notification ID.\n   */\n  success: (\n    message: string | React.ReactNode,\n    options?: Partial<NotificationOptions>\n  ): string => {\n    return notification.show({ message, color: 'success', ...options });\n  },\n\n  /**\n   * Show a danger notification.\n   * @param {string|React.ReactNode} message - The message to display.\n   * @param {Partial<NotificationOptions>} [options] - Additional options.\n   * @returns {string} The notification ID.\n   */\n  danger: (\n    message: string | React.ReactNode,\n    options?: Partial<NotificationOptions>\n  ): string => {\n    return notification.show({ message, color: 'danger', ...options });\n  },\n\n  /**\n   * Show a warning notification.\n   * @param {string|React.ReactNode} message - The message to display.\n   * @param {Partial<NotificationOptions>} [options] - Additional options.\n   * @returns {string} The notification ID.\n   */\n  warning: (\n    message: string | React.ReactNode,\n    options?: Partial<NotificationOptions>\n  ): string => {\n    return notification.show({ message, color: 'warning', ...options });\n  },\n\n  /**\n   * Show an info notification.\n   * @param {string|React.ReactNode} message - The message to display.\n   * @param {Partial<NotificationOptions>} [options] - Additional options.\n   * @returns {string} The notification ID.\n   */\n  info: (\n    message: string | React.ReactNode,\n    options?: Partial<NotificationOptions>\n  ): string => {\n    return notification.show({ message, color: 'info', ...options });\n  },\n\n  /**\n   * Close a specific notification by ID.\n   * @param {string} id - The notification ID to close.\n   */\n  close: (id: string): void => {\n    if (currentQueuedNotification && currentQueuedNotification.id === id) {\n      currentQueuedNotification = null;\n      processQueuedNotification();\n    } else {\n      queuedNotifications = queuedNotifications.filter(n => n.id !== id);\n      notifications = notifications.filter(n => n.id !== id);\n    }\n    notifyNotificationListeners();\n  },\n\n  /** Close all notifications and clear the queue. */\n  closeAll: (): void => {\n    notifications = [];\n    queuedNotifications = [];\n    currentQueuedNotification = null;\n    notifyNotificationListeners();\n  },\n\n  /**\n   * Subscribe to notification state changes.\n   * @param {(items: NotificationInstance[]) => void} listener - Callback invoked on changes.\n   * @returns {() => void} Unsubscribe function.\n   */\n  subscribe: (\n    listener: (items: NotificationInstance[]) => void\n  ): (() => void) => {\n    notificationListeners.add(listener);\n    return () => notificationListeners.delete(listener);\n  },\n};\n\n/**\n * Whether a notification of this color announces itself as an alert, rather\n * than politely through NotificationContainer's status region.\n *\n * @function isUrgentColor\n * @param {NotificationOptions['color']} color - The notification's color.\n * @returns {boolean} True for `danger` and `warning`.\n */\nconst isUrgentColor = (color: NotificationOptions['color']): boolean =>\n  color === 'danger' || color === 'warning';\n\n/**\n * Single auto-dismissing notification item used by NotificationContainer.\n *\n * @function\n * @param {{ instance: NotificationInstance; onClose: (id: string) => void; registerMessage: (id: string, node: HTMLElement | null) => void }} props - Component props.\n * @returns {JSX.Element} The rendered notification item.\n */\nconst NotificationItem: React.FC<{\n  instance: NotificationInstance;\n  onClose: (id: string) => void;\n  registerMessage: (id: string, node: HTMLElement | null) => void;\n}> = ({ instance, onClose, registerMessage }) => {\n  const {\n    message,\n    color,\n    isLight,\n    duration = 3000,\n    hasDelete = true,\n    indefinite = false,\n    pauseOnHover = true,\n  } = instance.options;\n\n  const [isPaused, setIsPaused] = useState(false);\n  const urgent = isUrgentColor(color);\n\n  const handleClose = useCallback(() => {\n    onClose(instance.id);\n  }, [onClose, instance.id]);\n\n  const messageRef = useCallback(\n    (node: HTMLElement | null) => {\n      registerMessage(instance.id, node);\n    },\n    [registerMessage, instance.id]\n  );\n\n  // Auto-close timer\n  useEffect(() => {\n    if (indefinite || duration === 0 || isPaused) return undefined;\n\n    const timer = setTimeout(handleClose, duration);\n    return () => clearTimeout(timer);\n  }, [duration, indefinite, isPaused, handleClose]);\n\n  const handleMouseEnter = useCallback(() => {\n    if (pauseOnHover) setIsPaused(true);\n  }, [pauseOnHover]);\n\n  const handleMouseLeave = useCallback(() => {\n    if (pauseOnHover) setIsPaused(false);\n  }, [pauseOnHover]);\n\n  return (\n    <Notification\n      color={color}\n      isLight={isLight}\n      hasDelete={hasDelete}\n      onDelete={handleClose}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      style={{ pointerEvents: 'auto' }}\n    >\n      {/* Only the message is announced, not the close button Notification\n          renders ahead of its children. Danger and warning announce\n          themselves as an assertive alert, which a screen reader reliably\n          reads out even when it arrives with its text. The rest are announced\n          through the container's status region, which reads their text from\n          this span, so it carries no role of its own that would announce them\n          a second time. */}\n      {urgent ? (\n        <span role=\"alert\" aria-live=\"assertive\">\n          {message}\n        </span>\n      ) : (\n        <span ref={messageRef}>{message}</span>\n      )}\n    </Notification>\n  );\n};\n\n// The order NotificationContainer renders its stacks in: across the top of the\n// screen, then across the bottom.\nconst notificationStackOrder: readonly NotificationPosition[] = [\n  'top-left',\n  'top',\n  'top-right',\n  'bottom-left',\n  'bottom',\n  'bottom-right',\n];\n\n/**\n * Inline style that fixes a stack of notifications to its place on the screen.\n * While an overlay locks the page, each side adds the room the page's\n * scrollbar gave back there, so the stack stays put as the scrollbar goes.\n *\n * @function\n * @param {NotificationPosition} position - Where the stack sits.\n * @returns {React.CSSProperties} The stack's style.\n */\nconst notificationStackStyle = (\n  position: NotificationPosition\n): React.CSSProperties => {\n  const isBottom = position.startsWith('bottom');\n  const isCenter = position === 'top' || position === 'bottom';\n  const isRight = position.endsWith('right');\n  const left = scrollLockOffset('left');\n  const right = scrollLockOffset('right');\n\n  return {\n    position: 'fixed',\n    zIndex: 100,\n    display: 'flex',\n    flexDirection: isBottom ? 'column-reverse' : 'column',\n    gap: '0.75rem',\n    padding: '1rem',\n    pointerEvents: 'none',\n    maxWidth: `calc(100% - ${left} - ${right})`,\n    ...(isBottom ? { bottom: 0 } : { top: 0 }),\n    ...(isCenter\n      ? {\n          left: `calc(50% + (${left} - ${right}) / 2)`,\n          transform: 'translateX(-50%)',\n          alignItems: 'center',\n        }\n      : isRight\n        ? { right, alignItems: 'flex-end' }\n        : { left, alignItems: 'flex-start' }),\n  };\n};\n\n/**\n * Container component for rendering programmatic notifications.\n * Place once at your app root to enable the notification API. A notification\n * shown with a `position` appears there, and one shown without goes to the\n * container's `position`, so the container renders a stack for each position\n * in use.\n *\n * It keeps a visually hidden `role=\"status\"` live region in the page from the\n * moment it mounts, even while nothing is showing, and announces every\n * notification other than `danger` and `warning` through it, a moment after\n * the notification appears. Those notifications carry no `role=\"status\"` of\n * their own, so `getByRole('status')` finds the region, not the notification.\n * The text stays in the region briefly, even if the notification closes in\n * the meantime, and while both are up the page holds two copies of it. A\n * polite notification that closes before its announcement is written, a\n * moment after it appears, isn't announced at all. `danger` and `warning`\n * notifications announce themselves as assertive alerts. The region is hidden\n * with inline styles, so it needs no stylesheet.\n *\n * @function\n * @param {{ position?: NotificationPosition }} props - Container props.\n * @returns {JSX.Element | null} The rendered notification container, or null on the server and while hydrating.\n */\nexport const NotificationContainer: React.FC<{\n  /**\n   * Where a notification shown without a `position` of its own appears.\n   * Default: 'top-right'. When it changes, those notifications move without\n   * remounting, but one shown with its own `position` equal to the old or new\n   * value remounts and starts over as if it had just been shown.\n   */\n  position?: NotificationPosition;\n}> = ({ position = 'top-right' }) => {\n  // Starts from the notifications already showing instead of an empty list,\n  // then follows changes.\n  const items = useSyncExternalStore(\n    notification.subscribe,\n    getVisibleNotifications,\n    getServerNotifications\n  );\n  // A portal needs a document, and it has no server-rendered counterpart, so\n  // the server render and the hydrating one render nothing, and the container\n  // portals in from the render after hydration.\n  const isHydrated = useIsHydrated();\n  const resolveContainer = usePortalContainer();\n\n  // The notifications the status region announces. Danger and warning\n  // announce themselves.\n  const politeItems = useMemo(\n    () => items.filter(item => !isUrgentColor(item.options.color)),\n    [items]\n  );\n\n  // Each polite notification's message element, so the text the region\n  // announces is the text on screen, whatever the message renders.\n  const messageNodesRef = useRef(new Map<string, HTMLElement>());\n  const registerMessage = useCallback(\n    (id: string, node: HTMLElement | null) => {\n      if (node) {\n        messageNodesRef.current.set(id, node);\n      } else {\n        messageNodesRef.current.delete(id);\n      }\n    },\n    []\n  );\n  // StatusRegion only describes polite notifications that are on screen, and\n  // each of those registered its message element when it mounted. The\n  // fallback is for a notification announced without being rendered, should\n  // the container ever render fewer than it announces: a plain-text message\n  // still says itself, and anything else is skipped.\n  const describe = useCallback((item: NotificationInstance) => {\n    const node = messageNodesRef.current.get(item.id);\n    /* istanbul ignore if: every polite notification on screen registers its message element when it mounts */\n    if (!node) {\n      const { message } = item.options;\n      return typeof message === 'string' ? message : null;\n    }\n    return spokenText(node);\n  }, []);\n\n  if (typeof document === 'undefined' || !isHydrated) {\n    return null;\n  }\n\n  const stacks = groupIntoPositionStacks(\n    items,\n    item => item.options.position,\n    position,\n    notificationStackOrder\n  );\n\n  const target = resolveContainer();\n  return createPortal(\n    <LocalePortalScope target={target}>\n      {stacks.map(stack => (\n        <div key={stack.key} style={notificationStackStyle(stack.position)}>\n          {stack.items.map(item => (\n            <NotificationItem\n              key={item.id}\n              instance={item}\n              onClose={notification.close}\n              registerMessage={registerMessage}\n            />\n          ))}\n        </div>\n      ))}\n      <StatusRegion items={politeItems} describe={describe} />\n    </LocalePortalScope>,\n    target\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/elements/Tag.js

@@ -34,7 +34,9 @@ const Tag = ({ className, color, size, isLight, isRounded, isDelete, isHoverable
     const bulmaClasses = usePrefixedClassNames('tag', {
         [`is-${color}`]: color && validTagColors.includes(color),
         [`is-${size}`]: size && size !== 'normal' && validTagSizes.includes(size),
-        'is-light': isLight,
+        // The light color's own class is this key too, and this one comes later,
+        // so it has to set the class for `light` as well or it erases it.
+        'is-light': isLight || color === 'light',
         'is-rounded': isRounded,
         'is-delete': isDelete,
         'is-hoverable': isHoverable,