@allxsmith/bestax-bulma 5.35.0 → 5.36.0

package/dist/index.cjs

@@ -3199,8 +3199,7 @@ function getIconClasses(library, name, variant, features) {
  */
 const Icon = ({ className, textColor, bgColor, name, library, variant, features, libraryFeatures, // Deprecated but maintained for backward compatibility
 size, ariaLabel, style, icon, // Capture and exclude the deprecated 'icon' prop from DOM
-color: _color, // Exclude 'color' prop if passed directly
-containerClassName, children, ...restProps }) => {
+color, containerClassName, children, ...restProps }) => {
     // Get the default icon library from context, fallback to 'fa' if not set
     const defaultLibrary = useIconLibrary();
     /**
@@ -3208,7 +3207,7 @@ containerClassName, children, ...restProps }) => {
      * Note: variant, features, and libraryFeatures are excluded from props spread
      */
     const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
+        color: textColor ?? color,
         backgroundColor: bgColor,
         ...restProps,
     });
@@ -3474,7 +3473,7 @@ const EmptyStateActions = ({ className, ...props }) => {
 };
 EmptyStateActions.displayName = 'EmptyState.Actions';
 /** Whether a shorthand prop was given something to render. */
-const isGiven = (node) => node !== undefined &&
+const isGiven$1 = (node) => node !== undefined &&
     node !== null &&
     typeof node !== 'boolean' &&
     node !== '';
@@ -3521,7 +3520,7 @@ const EmptyStateRoot = React.forwardRef(({ className, icon, title, titleAs = 'h2
     });
     // The props' parts first, each only when it's given, then the children
     // exactly as they were written: nothing here looks at them.
-    return (jsxRuntime.jsxs("div", { ref: ref, className: classNames(rootClass, bulmaHelperClasses, className), ...rest, children: [isGiven(icon) && (jsxRuntime.jsx(EmptyStateIndicator, { children: typeof icon === 'string' ? jsxRuntime.jsx(Icon, { name: icon }) : icon })), isGiven(title) && (jsxRuntime.jsx(EmptyStateTitle, { as: titleAs, children: title })), isGiven(description) && (jsxRuntime.jsx(EmptyStateDescription, { children: description })), children] }));
+    return (jsxRuntime.jsxs("div", { ref: ref, className: classNames(rootClass, bulmaHelperClasses, className), ...rest, children: [isGiven$1(icon) && (jsxRuntime.jsx(EmptyStateIndicator, { children: typeof icon === 'string' ? jsxRuntime.jsx(Icon, { name: icon }) : icon })), isGiven$1(title) && (jsxRuntime.jsx(EmptyStateTitle, { as: titleAs, children: title })), isGiven$1(description) && (jsxRuntime.jsx(EmptyStateDescription, { children: description })), children] }));
 });
 const EmptyState = withSubComponents(EmptyStateRoot, {
     Indicator: EmptyStateIndicator,
@@ -7835,213 +7834,634 @@ const StepsComponent = ({ value = 0, items, size, color, hasMarker = true, anima
 const Steps = withSubComponents(StepsComponent, { Step }, 'Steps');
 
 /**
- * The `Sidebar` component provides a slide-out navigation panel that appears from the left or right side of the screen.
- *
- * @function
- * @param {SidebarProps} props - Props for the Sidebar component.
- * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the sidebar element.
- * @returns {JSX.Element | null} The rendered sidebar component.
- *
- * @example
- * // Basic sidebar
- * const [isOpen, setIsOpen] = useState(false);
- * <Sidebar isOpen={isOpen} onClose={() => setIsOpen(false)}>
- *   <Menu>...</Menu>
- * </Sidebar>
- *
- * @example
- * // Right-side sidebar with custom width
- * <Sidebar
- *   isOpen={isOpen}
- *   onClose={() => setIsOpen(false)}
- *   position="right"
- *   width="320px"
- * >
- *   <div>Panel content</div>
- * </Sidebar>
- */
-const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left', width = '260px', isFullwidth, fullWidth, overlay = true, overlayClose = true, escapeClose = true, canCancel = true, children, inline = false, className, style, ...props }, ref) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const resolveContainer = usePortalContainer();
-    const { portalContainer } = useConfig();
-    // Where the configured default puts the sidebar. An `inline` one doesn't
-    // portal, so a change to the default moves nothing.
-    const defaultTarget = inline ? undefined : portalContainer;
-    const sidebarRef = React.useRef(null);
-    // Cleanup returned by a consumer's callback ref on attach, held until detach.
-    const consumerCleanupRef = React.useRef(null);
-    const resolvedFullwidth = isFullwidth ?? fullWidth ?? false;
-    // Close handler
-    const handleClose = React.useCallback(() => {
-        if (canCancel && onClose) {
-            onClose();
-        }
-    }, [canCancel, onClose]);
-    // Handle overlay click
-    const handleOverlayClick = React.useCallback(() => {
-        if (overlayClose) {
-            handleClose();
-        }
-    }, [overlayClose, handleClose]);
-    // Read when Escape arrives, so the key listener stays put while
-    // `onClose` changes identity, as an inline one does on every render of
-    // the parent.
-    const handleCloseRef = useLatestRef(handleClose);
-    // Joins the stack of open overlays, so the sidebar answers Escape only
-    // while it's the topmost overlay, and keeps it from those under it.
-    const isTopmost = useOverlayStack(isOpen);
-    const closesOnEscape = escapeClose && canCancel && Boolean(onClose);
-    // Handle escape key. On `window`, as in `Modal`, so everything inside the
-    // sidebar has had the key first, and an Escape it used is left to it. One
-    // the sidebar closes on is marked used, so nothing under it acts on it.
-    React.useEffect(() => {
-        if (!isOpen || !closesOnEscape)
-            return;
-        const handleKeyDown = (e) => {
-            if (e.key !== 'Escape' || e.defaultPrevented || !isTopmost())
-                return;
-            e.preventDefault();
-            handleCloseRef.current();
-        };
-        window.addEventListener('keydown', handleKeyDown);
-        return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [isOpen, closesOnEscape, handleCloseRef, isTopmost]);
-    // Prevent body scroll when sidebar is open. Ref-counted through the shared
-    // helper so an overlapping Modal/Dialog/Loading doesn't unlock underneath.
-    useScrollLock(isOpen && overlay);
-    // Focus trap (basic - focus sidebar when opened). A different
-    // `defaultTarget` remounts the portaled sidebar, so it focuses the new
-    // nodes then too.
-    React.useEffect(() => {
-        if (isOpen) {
-            const element = sidebarRef.current;
-            /* istanbul ignore else: the aside renders whenever the sidebar is open, so its ref is set before this runs */
-            if (element) {
-                // Focus first focusable element or sidebar itself
-                const focusable = element.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-                if (focusable) {
-                    focusable.focus();
-                }
-                else {
-                    element.focus();
-                }
-            }
-        }
-    }, [isOpen, defaultTarget]);
-    // Use combined ref
-    const combinedRef = React.useCallback((node) => {
-        sidebarRef.current =
-            node;
-        if (typeof ref === 'function') {
-            // React 19 lets a callback ref return a cleanup function and detaches by
-            // running it instead of calling the ref with `null`; React 18 discards the
-            // return value entirely. Returning it from here would be a React-19-only
-            // contract, so we hold the cleanup and run it ourselves on detach — the
-            // same shape as `Dropdown`, `Modal`, `Dialog`, `Toast` and `Carousel`.
-            // The form controls that merge a forwarded ref still discard the cleanup
-            // and detach with `ref(null)`, so this is not yet library-wide — grep
-            // `typeof ref === 'function'` for the current split.
-            if (node === null) {
-                const consumerCleanup = consumerCleanupRef.current;
-                consumerCleanupRef.current = null;
-                if (consumerCleanup) {
-                    consumerCleanup();
-                }
-                else {
-                    ref(null);
-                }
-                return;
-            }
-            const cleanup = ref(node);
-            consumerCleanupRef.current =
-                typeof cleanup === 'function' ? cleanup : null;
-        }
-        else if (ref) {
-            ref.current = node;
-        }
-    }, [ref]);
-    // Generate classes
-    const sidebarClasses = usePrefixedClassNames('sidebar', {
-        'is-active': isOpen,
-        [`is-${position}`]: position,
-        'is-fullwidth': resolvedFullwidth,
-    });
-    const backgroundClass = usePrefixedClassNames('sidebar-background', {
-        'is-active': isOpen,
-    });
-    const contentClass = usePrefixedClassNames('sidebar-content');
-    const combinedClasses = classNames(sidebarClasses, bulmaHelperClasses, className);
-    // Custom style for width
-    const sidebarStyle = {
-        ...style,
-        '--bulma-sidebar-width': resolvedFullwidth ? '100%' : width,
-    };
-    const sidebarContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [overlay && (jsxRuntime.jsx("div", { className: backgroundClass, onClick: handleOverlayClick, "aria-hidden": "true" })), jsxRuntime.jsx("aside", { ref: combinedRef, className: combinedClasses, style: sidebarStyle, role: "dialog", "aria-modal": overlay ? 'true' : undefined, "aria-hidden": !isOpen, tabIndex: -1, ...rest, children: jsxRuntime.jsx("div", { className: contentClass, children: children }) })] }));
-    if (inline) {
-        return sidebarContent;
-    }
-    // Render to portal for proper stacking
-    if (typeof document !== 'undefined') {
-        return reactDom.createPortal(sidebarContent, resolveContainer());
-    }
-    return null;
-});
-/**
- * Container for the sidebar header.
- *
- * @function
- * @param {SidebarHeaderProps} props - Props for the SidebarHeader component.
- * @returns {JSX.Element} The rendered sidebar header.
+ * How long after an item appears its announcement is written, in ms. The wait
+ * lets a screen reader register a region the container has only just mounted,
+ * and items shown in quick succession are written, and read out, together.
  */
-const SidebarHeader = ({ className, children, ...props }) => {
-    const headerClass = usePrefixedClassNames('sidebar-header');
-    return (jsxRuntime.jsx("div", { className: classNames(headerClass, className), ...props, children: children }));
-};
+const announceDelay = 100;
 /**
- * Title text inside the header.
- *
- * @function
- * @param {SidebarTitleProps} props - Props for the SidebarTitle component.
- * @returns {JSX.Element} The rendered sidebar title.
+ * How long an announcement stays in the region once written, in ms. That's
+ * long enough for a screen reader to pick it up. Clearing it after keeps a
+ * second copy of the item's text from sitting in the page, where someone
+ * reading through the page, or a test looking the text up, would find it
+ * again.
  */
-const SidebarTitle = ({ className, children, ...props }) => {
-    const titleClass = usePrefixedClassNames('sidebar-title');
-    return (jsxRuntime.jsx("p", { className: classNames(titleClass, className), ...props, children: children }));
+const announcementLifetime = 1000;
+const noAnnouncements = [];
+const nothingWritten = [];
+const noAnnouncementsYet = {
+    key: 0,
+    waiting: noAnnouncements,
+    written: nothingWritten,
 };
-/**
- * Close button for the sidebar.
- *
- * @function
- * @param {SidebarCloseProps} props - Props for the SidebarClose component.
- * @returns {JSX.Element} The rendered close button.
- */
-const SidebarClose = ({ className, children, ...props }) => {
-    const closeClass = usePrefixedClassNames('sidebar-close');
-    return (jsxRuntime.jsx("button", { className: classNames(closeClass, className), ...props, "aria-label": props['aria-label'] || 'Close', type: buttonType(props.type), children: children }));
+// Hides the region with inline styles rather than a class, so it needs no
+// stylesheet, including the helper classes a modular Bulma build can leave
+// out. Clipping it, rather than using `display` or `visibility`, keeps it in
+// the accessibility tree. The declarations match the `extras-sr-only` mixin,
+// plus `clip-path`, which replaces the deprecated `clip`. The negative margin
+// pulls the 1px box back inside the page, so it doesn't add scrollable
+// overflow. Exported for other live regions that must work without a
+// stylesheet, such as a range calendar's.
+const visuallyHidden = {
+    position: 'absolute',
+    width: '1px',
+    height: '1px',
+    padding: 0,
+    margin: '-1px',
+    overflow: 'hidden',
+    clip: 'rect(0, 0, 0, 0)',
+    clipPath: 'inset(50%)',
+    whiteSpace: 'nowrap',
+    border: 0,
 };
 /**
- * Main content area of the sidebar.
+ * Works out what a status region says. Each item is announced once each time
+ * it appears, so one that goes and comes back is announced again. Its
+ * announcement is written `announceDelay` after it appears, or after the last
+ * item to join it when several appear in quick succession, alongside whatever
+ * the region still says. Once written, it stays for `announcementLifetime`,
+ * whatever is written after it and whether or not its item goes in the
+ * meantime. An item that goes before its announcement is written isn't
+ * announced.
  *
- * @function
- * @param {SidebarBodyProps} props - Props for the SidebarBody component.
- * @returns {JSX.Element} The rendered sidebar body.
- */
-const SidebarBody = ({ className, children, ...props }) => {
-    const bodyClass = usePrefixedClassNames('sidebar-body');
-    return (jsxRuntime.jsx("div", { className: classNames(bodyClass, className), ...props, children: children }));
-};
-/**
- * Footer area of the sidebar.
+ * Nothing is written in the commit that mounts the region or the item. A
+ * screen reader reliably announces a polite live region whose content changes
+ * after the region is already in the page, and not always one that arrives
+ * with its content. By the time `describe` runs, an item's rendered text can
+ * be read.
  *
- * @function
- * @param {SidebarFooterProps} props - Props for the SidebarFooter component.
- * @returns {JSX.Element} The rendered sidebar footer.
+ * @function useAnnouncements
+ * @param items - The items to announce, in the order they were shown.
+ * @param describe - The text to announce for an item, or nothing to skip it.
+ *   It runs once the item is on screen, and it must keep its identity between
+ *   renders (a module-level function or a `useCallback`), or every render
+ *   re-checks the items.
+ * @returns The announcements to render, in the order they were written.
  */
-const SidebarFooter = ({ className, children, ...props }) => {
-    const footerClass = usePrefixedClassNames('sidebar-footer');
-    return (jsxRuntime.jsx("div", { className: classNames(footerClass, className), ...props, children: children }));
-};
-// Attach static subcomponents
+function useAnnouncements(items, describe) {
+    // The ids of the items on screen as of the last change, every one of which
+    // has been looked at for an announcement already.
+    const onScreenIdsRef = React.useRef(new Set());
+    // Clears that haven't run yet. They outlive the batch that started them, so
+    // they're only stopped when the region unmounts.
+    const clearTimersRef = React.useRef(new Set());
+    const [announcements, setAnnouncements] = React.useState(noAnnouncementsYet);
+    // Runs after the commit that puts an item on screen, which is the first
+    // point its rendered text can be read.
+    React.useEffect(() => {
+        const announced = onScreenIdsRef.current;
+        const appeared = items.filter(item => !announced.has(item.id));
+        // Items that have gone drop out here too, so one that comes back has
+        // appeared again.
+        onScreenIdsRef.current = new Set(items.map(item => item.id));
+        const next = [];
+        for (const item of appeared) {
+            const text = describe(item);
+            if (text)
+                next.push({ id: item.id, text });
+        }
+        if (next.length > 0) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect -- an item's rendered text can only be read once it's on screen
+            setAnnouncements(current => ({
+                ...current,
+                key: current.key + 1,
+                // Announcements still waiting go out with the new ones, apart from
+                // one whose item came back before it was written, which the new one
+                // replaces. What's already written stays put.
+                waiting: [
+                    ...current.waiting.filter(waiting => !next.some(({ id }) => id === waiting.id)),
+                    ...next,
+                ],
+            }));
+        }
+    }, [items, describe]);
+    // The write only touches the batch it was started for: a newer batch can
+    // be set before the render that cancels this timer. Its clear is started
+    // by the write itself, so it's timed from the write without waiting on a
+    // render, and a newer batch arriving doesn't cut short what's written.
+    const { key } = announcements;
+    React.useEffect(() => {
+        if (key === noAnnouncementsYet.key)
+            return undefined;
+        const clearTimers = clearTimersRef.current;
+        const write = setTimeout(() => {
+            // Whether an item is on screen is decided here, once. An item that
+            // went before its announcement was due isn't announced, and one that
+            // goes after keeps its announcement for the rest of its lifetime, when
+            // the region holds the only copy of its text rather than a second one.
+            const onScreen = onScreenIdsRef.current;
+            setAnnouncements(current => current.key === key
+                ? {
+                    ...current,
+                    waiting: noAnnouncements,
+                    written: [
+                        ...current.written,
+                        ...current.waiting
+                            .filter(announcement => onScreen.has(announcement.id))
+                            .map(announcement => ({ ...announcement, batch: key })),
+                    ],
+                }
+                : current);
+            // eslint-disable-next-line @eslint-react/web-api-no-leaked-timeout -- it has to outlive this effect when a newer batch arrives, so the unmount effect below clears it
+            const clear = setTimeout(() => {
+                clearTimers.delete(clear);
+                setAnnouncements(current => {
+                    const written = current.written.filter(announcement => announcement.batch !== key);
+                    return written.length === current.written.length
+                        ? current
+                        : { ...current, written };
+                });
+            }, announcementLifetime);
+            clearTimers.add(clear);
+        }, announceDelay);
+        return () => clearTimeout(write);
+    }, [key]);
+    React.useEffect(() => {
+        const clearTimers = clearTimersRef.current;
+        return () => {
+            clearTimers.forEach(clearTimeout);
+            clearTimers.clear();
+        };
+    }, []);
+    return announcements.written;
+}
+/**
+ * Reads an element out roughly the way a screen reader would: its text, with
+ * an element's `aria-label`, or an image's `alt`, standing in for what's
+ * inside it, a break between block-level elements, and parts that are
+ * `aria-hidden`, `hidden` or inline-styled `display: none` left out. It isn't
+ * the full accessible name computation, so `aria-labelledby`, CSS-generated
+ * content, content hidden by a stylesheet and other ways of naming or hiding
+ * content aren't followed.
+ *
+ * @function spokenText
+ * @param element - The element to read.
+ * @returns Its text, with runs of whitespace collapsed and the ends trimmed.
+ */
+function spokenText(element) {
+    return readAloud(element).replace(/\s+/g, ' ').trim();
+}
+// Elements a browser displays as blocks by default, and `br`. A screen reader
+// pauses between them, so their text shouldn't run into the text beside them.
+// They're known by tag rather than by computed `display`, which would depend
+// on a stylesheet and on layout.
+const blockLevelTags = new Set([
+    'ADDRESS',
+    'ARTICLE',
+    'ASIDE',
+    'BLOCKQUOTE',
+    'BR',
+    'CAPTION',
+    'DD',
+    'DETAILS',
+    'DIALOG',
+    'DIV',
+    'DL',
+    'DT',
+    'FIELDSET',
+    'FIGCAPTION',
+    'FIGURE',
+    'FOOTER',
+    'FORM',
+    'H1',
+    'H2',
+    'H3',
+    'H4',
+    'H5',
+    'H6',
+    'HEADER',
+    'HGROUP',
+    'HR',
+    'LEGEND',
+    'LI',
+    'MAIN',
+    'MENU',
+    'NAV',
+    'OL',
+    'P',
+    'PRE',
+    'SEARCH',
+    'SECTION',
+    'SUMMARY',
+    'TABLE',
+    'TBODY',
+    'TD',
+    'TFOOT',
+    'TH',
+    'THEAD',
+    'TR',
+    'UL',
+]);
+/**
+ * Whether an element is left out of what a screen reader reads.
+ *
+ * @function isHidden
+ * @param element - The element to check.
+ * @returns True for `aria-hidden="true"`, the `hidden` attribute, and an
+ *   inline `display: none`, on an HTML, SVG or any other element with an
+ *   inline style.
+ */
+const isHidden = (element) => element.getAttribute('aria-hidden') === 'true' ||
+    element.hasAttribute('hidden') ||
+    element.style?.display === 'none';
+/**
+ * The text `spokenText` reads for an element, before its whitespace is
+ * tidied.
+ *
+ * @function readAloud
+ * @param element - The element to read.
+ * @returns Its text.
+ */
+function readAloud(element) {
+    if (isHidden(element))
+        return '';
+    const name = element.getAttribute('aria-label') ||
+        (element.tagName === 'IMG' ? element.getAttribute('alt') : null);
+    const text = name ||
+        Array.from(element.childNodes, child => {
+            if (child instanceof Element)
+                return readAloud(child);
+            return child.nodeType === Node.TEXT_NODE ? child.textContent : '';
+        }).join('');
+    // A name stands in for the element's content, and a block's content stands
+    // apart from what's around it, so both are padded to keep them from running
+    // into the neighboring text. An inline run, like `<span>Up</span>` then
+    // `<span>loaded</span>`, still reads as one word.
+    return name || blockLevelTags.has(element.tagName) ? ` ${text} ` : text;
+}
+/**
+ * A visually hidden, polite `status` live region that a container announces
+ * its items through. The container renders it from the moment it mounts,
+ * whether or not it has anything to show, so the region is already in the
+ * page when an announcement is written into it.
+ *
+ * The announcements are this component's own state, so writing and clearing
+ * them re-renders the region and leaves the container's items alone. Each one
+ * is its own keyed node, so a re-render that leaves the announcements alone
+ * leaves the region's content alone too, and nothing is read out twice.
+ *
+ * @function StatusRegion
+ * @param props - The items to announce, and the text to announce for each.
+ * @returns The region.
+ */
+function StatusRegion({ items, describe, }) {
+    const announcements = useAnnouncements(items, describe);
+    // `role="status"` makes a region atomic unless it says otherwise, which
+    // reads the whole region on every change. Each announcement is its own
+    // node, and only additions are relevant by default, so with atomic off a
+    // screen reader reads just what was written, and removing one announcement
+    // doesn't read out the ones still there. A node is keyed by its batch as
+    // well as its item, since an item that comes back can be written again
+    // while what it said before is still there.
+    return (jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "false", style: visuallyHidden, children: announcements.map(announcement => (jsxRuntime.jsx("div", { children: announcement.text }, `${announcement.batch}:${announcement.id}`))) }));
+}
+
+const validTimelineColors = [
+    'primary',
+    'link',
+    'info',
+    'success',
+    'warning',
+    'danger',
+];
+const validTimelineTitleElements = ['h2', 'h3', 'h4', 'h5', 'h6', 'p'];
+// An item outside a Timeline is a record item with an h2 title.
+const TimelineItemContext = React.createContext({
+    titleAs: 'h2',
+});
+/** Whether a prop was given something to render. */
+const isGiven = (node) => node !== undefined &&
+    node !== null &&
+    typeof node !== 'boolean' &&
+    node !== '';
+const isTimelineColor = (color) => !!color && validTimelineColors.includes(color);
+/**
+ * One event: a marker on the rail, then its title, its time and anything else about it.
+ *
+ * Outside a `Timeline` it's a record item with an `h2` title, though the
+ * styles are registered on `.timeline`, so the rail and the marker need one.
+ *
+ * @function
+ * @param {TimelineItemProps} props - Props for Timeline.Item.
+ * @param {React.Ref<HTMLLIElement>} ref - Forwarded ref to the `<li>`.
+ * @returns {JSX.Element} The rendered event.
+ *
+ * @example
+ * <Timeline.Item title="Shipped" time="14 October 2026" dateTime="2026-10-14">
+ *   Left the warehouse in Leeds.
+ * </Timeline.Item>
+ */
+const TimelineItem = React.forwardRef(({ className, title, time, dateTime, icon, color, textColor, bgColor, children, ...props }, ref) => {
+    const { titleAs: TitleTag, state, label } = React.useContext(TimelineItemContext);
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const itemClass = usePrefixedClassNames('timeline-item', {
+        [`is-${state}`]: !!state,
+        [`is-${color}`]: isTimelineColor(color),
+    });
+    const markerClass = usePrefixedClassNames('timeline-marker', {
+        'is-icon': isGiven(icon),
+    });
+    const contentClass = usePrefixedClassNames('timeline-content');
+    const titleClass = usePrefixedClassNames('timeline-title');
+    const timeClass = usePrefixedClassNames('timeline-time');
+    // The state in words, read after the title so it's in the heading too:
+    // "Packed completed". The current item has none, since aria-current
+    // says it. The styles are inline, so the words stay hidden in a modular
+    // build that leaves out Bulma's helper classes.
+    const words = label ? (jsxRuntime.jsx("span", { style: visuallyHidden, children: ` ${label}` })) : null;
+    return (jsxRuntime.jsxs("li", { ref: ref, className: classNames(itemClass, bulmaHelperClasses, className), ...rest, ...(state && {
+            'aria-current': state === 'active' ? 'step' : undefined,
+        }), children: [jsxRuntime.jsx("div", { className: markerClass, "aria-hidden": "true", children: isGiven(icon) &&
+                    (typeof icon === 'string' ? jsxRuntime.jsx(Icon, { name: icon }) : icon) }), jsxRuntime.jsxs("div", { className: contentClass, children: [isGiven(title) ? (jsxRuntime.jsxs(TitleTag, { className: titleClass, children: [title, words] })) : (words), isGiven(time) &&
+                        (dateTime ? (jsxRuntime.jsx("time", { className: timeClass, dateTime: dateTime, children: time })) : (jsxRuntime.jsx("span", { className: timeClass, children: time }))), children] })] }));
+});
+TimelineItem.displayName = 'Timeline.Item';
+/**
+ * The `Timeline` component renders a list of events in the order they happened, each with a marker on a line down the side.
+ *
+ * By default it's a record, an order's history, a ticket's activity or a
+ * changelog, and it marks nothing. With `active` it marks progress, for
+ * something that moves along on its own and is reported to the user: a
+ * parcel, a deployment, a claim. That reads oldest first, and `pending` ends
+ * it on what's under way. A journey the user moves through themselves, like
+ * a wizard or a checkout, is `Steps`.
+ *
+ * It's an `<ol role="list">`, so it stays a list in Safari with its numbers
+ * hidden, and each title is a heading at the level `titleAs` sets. The
+ * markers are decoration and hidden from assistive tech, so the states are
+ * read as words: `aria-current="step"` on the current item, and "completed",
+ * "upcoming" or "in progress" after the other titles, in the language the
+ * label props set. Nothing here is a control or a live region, so a timeline
+ * that changes on screen keeps a `role="status"` region beside it.
+ *
+ * @function
+ * @param {TimelineProps} props - Props for the Timeline component.
+ * @param {React.Ref<HTMLOListElement>} ref - Forwarded ref to the `<ol>`.
+ * @returns {JSX.Element} The rendered timeline.
+ *
+ * @example
+ * <Timeline titleAs="h3">
+ *   <Timeline.Item title="Delivered" time="16 October 2026" dateTime="2026-10-16" />
+ *   <Timeline.Item title="Order placed" time="12 October 2026" dateTime="2026-10-12" />
+ * </Timeline>
+ *
+ * @example
+ * <Timeline titleAs="h3" active={1} pending="Out for delivery">
+ *   <Timeline.Item title="Order placed" />
+ *   <Timeline.Item title="Shipped" />
+ * </Timeline>
+ */
+const TimelineRoot = React.forwardRef(({ className, children, active, pending, align = 'start', titleAs = 'h2', color, completedLabel = 'completed', upcomingLabel = 'upcoming', pendingLabel = 'in progress', textColor, bgColor, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const rootClass = usePrefixedClassNames('timeline', {
+        'is-end': align === 'end',
+        'is-alternate': align === 'alternate',
+        [`is-${color}`]: isTimelineColor(color),
+    });
+    const level = validTimelineTitleElements.includes(titleAs) ? titleAs : 'h2';
+    const labels = {
+        completed: completedLabel,
+        active: undefined,
+        upcoming: upcomingLabel,
+        pending: pendingLabel,
+    };
+    const contextFor = (state) => ({
+        titleAs: level,
+        state,
+        label: state && labels[state],
+    });
+    // A fraction counts as the item it has reached, so one item is current.
+    const reached = typeof active === 'number' ? Math.floor(active) : undefined;
+    const stateAt = (index) => {
+        if (reached === undefined)
+            return undefined;
+        if (index === reached)
+            return 'active';
+        return index < reached ? 'completed' : 'upcoming';
+    };
+    // Each child gets its state through context rather than a clone, so an
+    // app's own component around a Timeline.Item still gets it. Fragments
+    // and arrays are opened up first, so each item inside one counts.
+    return (jsxRuntime.jsxs("ol", { ref: ref, className: classNames(rootClass, bulmaHelperClasses, className), ...rest, role: "list", children: [flattenChildren(children).map((child, index) => (jsxRuntime.jsx(TimelineItemContext.Provider, { value: contextFor(stateAt(index)), children: child }, React.isValidElement(child) ? child.key : index))), isGiven(pending) && (jsxRuntime.jsx(TimelineItemContext.Provider, { value: contextFor('pending'), children: jsxRuntime.jsx(TimelineItem, { title: pending }) }))] }));
+});
+const Timeline = withSubComponents(TimelineRoot, { Item: TimelineItem }, 'Timeline');
+
+/**
+ * The `Sidebar` component provides a slide-out navigation panel that appears from the left or right side of the screen.
+ *
+ * @function
+ * @param {SidebarProps} props - Props for the Sidebar component.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the sidebar element.
+ * @returns {JSX.Element | null} The rendered sidebar component.
+ *
+ * @example
+ * // Basic sidebar
+ * const [isOpen, setIsOpen] = useState(false);
+ * <Sidebar isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <Menu>...</Menu>
+ * </Sidebar>
+ *
+ * @example
+ * // Right-side sidebar with custom width
+ * <Sidebar
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   position="right"
+ *   width="320px"
+ * >
+ *   <div>Panel content</div>
+ * </Sidebar>
+ */
+const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left', width = '260px', isFullwidth, fullWidth, overlay = true, overlayClose = true, escapeClose = true, canCancel = true, children, inline = false, className, style, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const resolveContainer = usePortalContainer();
+    const { portalContainer } = useConfig();
+    // Where the configured default puts the sidebar. An `inline` one doesn't
+    // portal, so a change to the default moves nothing.
+    const defaultTarget = inline ? undefined : portalContainer;
+    const sidebarRef = React.useRef(null);
+    // Cleanup returned by a consumer's callback ref on attach, held until detach.
+    const consumerCleanupRef = React.useRef(null);
+    const resolvedFullwidth = isFullwidth ?? fullWidth ?? false;
+    // Close handler
+    const handleClose = React.useCallback(() => {
+        if (canCancel && onClose) {
+            onClose();
+        }
+    }, [canCancel, onClose]);
+    // Handle overlay click
+    const handleOverlayClick = React.useCallback(() => {
+        if (overlayClose) {
+            handleClose();
+        }
+    }, [overlayClose, handleClose]);
+    // Read when Escape arrives, so the key listener stays put while
+    // `onClose` changes identity, as an inline one does on every render of
+    // the parent.
+    const handleCloseRef = useLatestRef(handleClose);
+    // Joins the stack of open overlays, so the sidebar answers Escape only
+    // while it's the topmost overlay, and keeps it from those under it.
+    const isTopmost = useOverlayStack(isOpen);
+    const closesOnEscape = escapeClose && canCancel && Boolean(onClose);
+    // Handle escape key. On `window`, as in `Modal`, so everything inside the
+    // sidebar has had the key first, and an Escape it used is left to it. One
+    // the sidebar closes on is marked used, so nothing under it acts on it.
+    React.useEffect(() => {
+        if (!isOpen || !closesOnEscape)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key !== 'Escape' || e.defaultPrevented || !isTopmost())
+                return;
+            e.preventDefault();
+            handleCloseRef.current();
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [isOpen, closesOnEscape, handleCloseRef, isTopmost]);
+    // Prevent body scroll when sidebar is open. Ref-counted through the shared
+    // helper so an overlapping Modal/Dialog/Loading doesn't unlock underneath.
+    useScrollLock(isOpen && overlay);
+    // Focus trap (basic - focus sidebar when opened). A different
+    // `defaultTarget` remounts the portaled sidebar, so it focuses the new
+    // nodes then too.
+    React.useEffect(() => {
+        if (isOpen) {
+            const element = sidebarRef.current;
+            /* istanbul ignore else: the aside renders whenever the sidebar is open, so its ref is set before this runs */
+            if (element) {
+                // Focus first focusable element or sidebar itself
+                const focusable = element.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+                if (focusable) {
+                    focusable.focus();
+                }
+                else {
+                    element.focus();
+                }
+            }
+        }
+    }, [isOpen, defaultTarget]);
+    // Use combined ref
+    const combinedRef = React.useCallback((node) => {
+        sidebarRef.current =
+            node;
+        if (typeof ref === 'function') {
+            // React 19 lets a callback ref return a cleanup function and detaches by
+            // running it instead of calling the ref with `null`; React 18 discards the
+            // return value entirely. Returning it from here would be a React-19-only
+            // contract, so we hold the cleanup and run it ourselves on detach — the
+            // same shape as `Dropdown`, `Modal`, `Dialog`, `Toast` and `Carousel`.
+            // The form controls that merge a forwarded ref still discard the cleanup
+            // and detach with `ref(null)`, so this is not yet library-wide — grep
+            // `typeof ref === 'function'` for the current split.
+            if (node === null) {
+                const consumerCleanup = consumerCleanupRef.current;
+                consumerCleanupRef.current = null;
+                if (consumerCleanup) {
+                    consumerCleanup();
+                }
+                else {
+                    ref(null);
+                }
+                return;
+            }
+            const cleanup = ref(node);
+            consumerCleanupRef.current =
+                typeof cleanup === 'function' ? cleanup : null;
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    // Generate classes
+    const sidebarClasses = usePrefixedClassNames('sidebar', {
+        'is-active': isOpen,
+        [`is-${position}`]: position,
+        'is-fullwidth': resolvedFullwidth,
+    });
+    const backgroundClass = usePrefixedClassNames('sidebar-background', {
+        'is-active': isOpen,
+    });
+    const contentClass = usePrefixedClassNames('sidebar-content');
+    const combinedClasses = classNames(sidebarClasses, bulmaHelperClasses, className);
+    // Custom style for width
+    const sidebarStyle = {
+        ...style,
+        '--bulma-sidebar-width': resolvedFullwidth ? '100%' : width,
+    };
+    const sidebarContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [overlay && (jsxRuntime.jsx("div", { className: backgroundClass, onClick: handleOverlayClick, "aria-hidden": "true" })), jsxRuntime.jsx("aside", { ref: combinedRef, className: combinedClasses, style: sidebarStyle, role: "dialog", "aria-modal": overlay ? 'true' : undefined, "aria-hidden": !isOpen, tabIndex: -1, ...rest, children: jsxRuntime.jsx("div", { className: contentClass, children: children }) })] }));
+    if (inline) {
+        return sidebarContent;
+    }
+    // Render to portal for proper stacking
+    if (typeof document !== 'undefined') {
+        return reactDom.createPortal(sidebarContent, resolveContainer());
+    }
+    return null;
+});
+/**
+ * Container for the sidebar header.
+ *
+ * @function
+ * @param {SidebarHeaderProps} props - Props for the SidebarHeader component.
+ * @returns {JSX.Element} The rendered sidebar header.
+ */
+const SidebarHeader = ({ className, children, ...props }) => {
+    const headerClass = usePrefixedClassNames('sidebar-header');
+    return (jsxRuntime.jsx("div", { className: classNames(headerClass, className), ...props, children: children }));
+};
+/**
+ * Title text inside the header.
+ *
+ * @function
+ * @param {SidebarTitleProps} props - Props for the SidebarTitle component.
+ * @returns {JSX.Element} The rendered sidebar title.
+ */
+const SidebarTitle = ({ className, children, ...props }) => {
+    const titleClass = usePrefixedClassNames('sidebar-title');
+    return (jsxRuntime.jsx("p", { className: classNames(titleClass, className), ...props, children: children }));
+};
+/**
+ * Close button for the sidebar.
+ *
+ * @function
+ * @param {SidebarCloseProps} props - Props for the SidebarClose component.
+ * @returns {JSX.Element} The rendered close button.
+ */
+const SidebarClose = ({ className, children, ...props }) => {
+    const closeClass = usePrefixedClassNames('sidebar-close');
+    return (jsxRuntime.jsx("button", { className: classNames(closeClass, className), ...props, "aria-label": props['aria-label'] || 'Close', type: buttonType(props.type), children: children }));
+};
+/**
+ * Main content area of the sidebar.
+ *
+ * @function
+ * @param {SidebarBodyProps} props - Props for the SidebarBody component.
+ * @returns {JSX.Element} The rendered sidebar body.
+ */
+const SidebarBody = ({ className, children, ...props }) => {
+    const bodyClass = usePrefixedClassNames('sidebar-body');
+    return (jsxRuntime.jsx("div", { className: classNames(bodyClass, className), ...props, children: children }));
+};
+/**
+ * Footer area of the sidebar.
+ *
+ * @function
+ * @param {SidebarFooterProps} props - Props for the SidebarFooter component.
+ * @returns {JSX.Element} The rendered sidebar footer.
+ */
+const SidebarFooter = ({ className, children, ...props }) => {
+    const footerClass = usePrefixedClassNames('sidebar-footer');
+    return (jsxRuntime.jsx("div", { className: classNames(footerClass, className), ...props, children: children }));
+};
+// Attach static subcomponents
 const Sidebar = withSubComponents(SidebarComponent, {
     Header: SidebarHeader,
     Title: SidebarTitle,
@@ -9181,208 +9601,25 @@ const Box = ({ className, textColor, color, bgColor, hasShadow = true, children,
 const Code = ({ className, textColor, bgColor, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    const bulmaClasses = usePrefixedClassNames();
-    const codeClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("code", { className: codeClasses || undefined, ...rest, children: children }));
-};
-
-// Valid size modifiers for the content class
-const validSizes = ['small', 'medium', 'large'];
-/**
- * The `Content` component applies Bulma’s typographic styles to its children, enhancing the appearance of HTML elements like paragraphs, headings, lists, and tables.
- *
- * @function
- * @param {ContentProps} props - Props for the Content component.
- * @returns {JSX.Element} The rendered content block.
- * @see {@link https://bulma.io/documentation/elements/content/ | Bulma Content documentation}
- */
-const Content = ({ className, textColor, color, bgColor, size, children, ...props }) => {
-    /**
-     * Generates Bulma helper classes and separates out remaining props.
-     */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor ?? color,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    const bulmaClasses = usePrefixedClassNames('content', {
-        [`is-${size}`]: size && size !== 'normal' && validSizes.includes(size),
-    });
-    const contentClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("div", { className: contentClasses, ...rest, children: children }));
-};
-
-/**
- * The `Delete` component provides a Bulma-styled close/delete button for dismissing modals, notifications, tags, messages, and more.
- *
- * It renders `type="button"`, so a delete button inside a form does not submit it.
- *
- * @function
- * @param {DeleteProps} props - Props for the Delete component.
- * @returns {JSX.Element} The rendered delete button.
- * @see {@link https://bulma.io/documentation/elements/delete/ | Bulma Delete documentation}
- */
-const Delete = ({ className, textColor, color, bgColor, onClick, size, ariaLabel, disabled = false, ...props }) => {
-    /**
-     * Generates Bulma helper classes and separates out remaining props.
-     */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor ?? color,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    const bulmaClasses = usePrefixedClassNames('delete', {
-        [`is-${size}`]: size,
-        'is-disabled': disabled,
-    });
-    const classes = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("button", { className: classes, onClick: onClick, disabled: disabled, ...rest, "aria-label": rest['aria-label'] || ariaLabel || 'Close', type: buttonType(rest.type) }));
-};
-
-/**
- * The `Divider` component renders a styled horizontal rule (`<hr>`) element with Bulma helper class integration.
- *
- * @function
- * @param {DividerProps} props - Props for the Divider component.
- * @returns {JSX.Element} The rendered hr element.
- */
-const Divider = ({ className, bgColor, ...props }) => {
-    /**
-     * Generates Bulma helper classes and separates out remaining props.
-     */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        backgroundColor: bgColor,
-        ...props,
-    });
-    const bulmaClasses = usePrefixedClassNames();
-    const dividerClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return jsxRuntime.jsx("hr", { className: dividerClasses || undefined, ...rest });
-};
-
-/**
- * The `Emphasis` component renders a styled `<em>` element with Bulma helper class integration.
- *
- * @function
- * @param {EmphasisProps} props - Props for the Emphasis component.
- * @returns {JSX.Element} The rendered em element.
- */
-const Emphasis = ({ className, textColor, bgColor, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    const bulmaClasses = usePrefixedClassNames();
-    const emphasisClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("em", { className: emphasisClasses || undefined, ...rest, children: children }));
-};
-
-/**
- * FigureCaption component for rendering a styled figcaption element.
- *
- * A FigureCaption wraps the HTML `<figcaption>` element with Bulma helper class integration.
- * Use it inside Figure components to provide captions for images or other media.
- *
- * @function
- * @param {FigureCaptionProps} props - Props for the FigureCaption component.
- * @returns {JSX.Element} The rendered figcaption element.
- */
-const FigureCaption = ({ className, textColor, bgColor, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    const bulmaClasses = usePrefixedClassNames();
-    const captionClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("figcaption", { className: captionClasses || undefined, ...rest, children: children }));
-};
-/**
- * The `Figure` component renders a styled `<figure>` element with Bulma helper class integration.
- *
- * @function
- * @param {FigureProps} props - Props for the Figure component.
- * @returns {JSX.Element} The rendered figure element.
- */
-const FigureComponent = ({ className, textColor, bgColor, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    const bulmaClasses = usePrefixedClassNames();
-    const figureClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("figure", { className: figureClasses || undefined, ...rest, children: children }));
-};
-/**
- * Figure component with Caption subcomponent.
- *
- * @example
- * <Figure>
- *   <img src="image.jpg" alt="Description" />
- *   <Figure.Caption>Image caption text</Figure.Caption>
- * </Figure>
- */
-const Figure = withSubComponents(FigureComponent, {
-    Caption: FigureCaption,
-}, 'Figure');
-
-/**
- * Distinguishes an `IconProps` object from a plain custom node (an inline SVG, a
- * `react-icons` component, …) in a slot that accepts either — `Control`'s
- * `iconLeft`/`iconRight`, `IconText`'s `iconProps`.
- *
- * One copy, imported by both consumers: two hand-maintained copies, one per
- * consumer, is how the deprecated `icon` path came to crash both (#663).
- *
- * Its own module rather than `Icon.tsx` because `src/index.ts` wildcard-exports
- * that file, and everything published there is public forever. `polymorphic.ts`
- * makes the same call for `isCustomElement`: an internal discriminator is not
- * something to support for the life of the package.
- *
- * It tests each member's VALUE, not merely its key, and only after everything
- * React owns is out of the way. `'icon' in value` was enough
- * to claim a Font Awesome `IconDefinition` — `{ prefix, iconName, icon: [w, h, …,
- * path] }` — whose `icon` is a path array rather than a class string. That object
- * is not a renderable node either, so the honest outcome is the one this slot has
- * always had for it: the node branch, and React's own "Objects are not valid as a
- * React child". Claiming it here instead rendered a blank container that still
- * reserved layout.
- *
- * A member added to `IconProps` needs a line here, and a missed one is a crash
- * rather than a fallthrough. That is the cost of a slot taking either a props
- * object or a node; keeping the guard in one place is what keeps the cost to a
- * single line.
- */
-function isIconProps(value) {
-    if (typeof value !== 'object' || value === null)
-        return false;
-    // Anything React owns. `isValidElement` covers elements only; a PORTAL is a
-    // valid `ReactNode` that fails it and carries a `children` key, so the member
-    // test below claimed it and `Control` spread it into `<Icon>` as props —
-    // rendering the portal's child locally instead of in its container. Every
-    // React internal carries `$$typeof`, so testing for it covers lazy, context
-    // and whatever React adds next, rather than portals alone.
-    if (React.isValidElement(value) || '$$typeof' in value)
-        return false;
-    const candidate = value;
-    return (typeof candidate.name === 'string' ||
-        typeof candidate.icon === 'string' ||
-        'children' in candidate);
-}
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames();
+    const codeClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("code", { className: codeClasses || undefined, ...rest, children: children }));
+};
 
+// Valid size modifiers for the content class
+const validSizes = ['small', 'medium', 'large'];
 /**
- * The `IconText` component provides a Bulma-styled horizontal arrangement of one or more `Icon` components and optional text.
+ * The `Content` component applies Bulma’s typographic styles to its children, enhancing the appearance of HTML elements like paragraphs, headings, lists, and tables.
  *
  * @function
- * @param {IconTextProps} props - Props for the IconText component.
- * @returns {JSX.Element} The rendered icon text element.
- * @see {@link https://bulma.io/documentation/elements/icon/#icon-text | Bulma IconText documentation}
+ * @param {ContentProps} props - Props for the Content component.
+ * @returns {JSX.Element} The rendered content block.
+ * @see {@link https://bulma.io/documentation/elements/content/ | Bulma Content documentation}
  */
-const IconTextComponent = ({ className, textColor, color, bgColor, iconProps, children, items, ...props }) => {
+const Content = ({ className, textColor, color, bgColor, size, children, ...props }) => {
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
@@ -9391,23 +9628,24 @@ const IconTextComponent = ({ className, textColor, color, bgColor, iconProps, ch
         backgroundColor: bgColor,
         ...props,
     });
-    const bulmaClasses = usePrefixedClassNames('icon-text');
-    const iconTextClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("span", { className: iconTextClasses, ...rest, children: items ? (items.map((item, index) => (jsxRuntime.jsxs(React.Fragment, { children: [item.iconProps &&
-                    (isIconProps(item.iconProps) ? (jsxRuntime.jsx(Icon, { ...item.iconProps })) : (jsxRuntime.jsx(Icon, { children: item.iconProps }))), item.text && jsxRuntime.jsx("span", { children: item.text })] }, index)))) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconProps &&
-                    (isIconProps(iconProps) ? (jsxRuntime.jsx(Icon, { ...iconProps })) : (jsxRuntime.jsx(Icon, { children: iconProps }))), children && jsxRuntime.jsx("span", { children: children })] })) }));
+    const bulmaClasses = usePrefixedClassNames('content', {
+        [`is-${size}`]: size && size !== 'normal' && validSizes.includes(size),
+    });
+    const contentClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("div", { className: contentClasses, ...rest, children: children }));
 };
-const IconText = withSubComponents(IconTextComponent, { Icon }, 'IconText');
 
 /**
- * The `Image` component wraps images, iframes, or custom content in a Bulma-styled container, supporting fixed sizes, aspect ratios, rounded corners, retina images, and all Bulma helper props for color and spacing.
+ * The `Delete` component provides a Bulma-styled close/delete button for dismissing modals, notifications, tags, messages, and more.
+ *
+ * It renders `type="button"`, so a delete button inside a form does not submit it.
  *
  * @function
- * @param {ImageProps} props - Props for the Image component.
- * @returns {JSX.Element} The rendered image element.
- * @see {@link https://bulma.io/documentation/elements/image/ | Bulma Image documentation}
+ * @param {DeleteProps} props - Props for the Delete component.
+ * @returns {JSX.Element} The rendered delete button.
+ * @see {@link https://bulma.io/documentation/elements/delete/ | Bulma Delete documentation}
  */
-const Image = ({ as, className, textColor, color, bgColor, size, isRounded, isRetina, src, alt, children, ...props }) => {
+const Delete = ({ className, textColor, color, bgColor, onClick, size, ariaLabel, disabled = false, ...props }) => {
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
@@ -9416,310 +9654,209 @@ const Image = ({ as, className, textColor, color, bgColor, size, isRounded, isRe
         backgroundColor: bgColor,
         ...props,
     });
-    const bulmaClasses = usePrefixedClassNames('image', {
+    const bulmaClasses = usePrefixedClassNames('delete', {
         [`is-${size}`]: size,
-        'has-ratio': size && typeof size === 'string' && size.includes('by'),
+        'is-disabled': disabled,
     });
-    const imageClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    // Default tag logic: if "as" is provided, use it.
-    // If not, use <figure> for aspect ratios or children, <div> otherwise.
-    let Tag;
-    if (as) {
-        Tag = as;
-    }
-    else if (size && typeof size === 'string' && size.includes('by')) {
-        Tag = 'figure';
-    }
-    else {
-        Tag = 'div';
-    }
-    const roundedClass = usePrefixedClassNames('is-rounded');
-    const content = children ? (children) : (jsxRuntime.jsx("img", { className: classNames({ [roundedClass]: isRounded }) || undefined, src: src, alt: alt, ...(isRetina && src ? { srcSet: `${src} 2x` } : {}) }));
-    return (jsxRuntime.jsx(Tag, { className: imageClasses, ...rest, children: content }));
+    const classes = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("button", { className: classes, onClick: onClick, disabled: disabled, ...rest, "aria-label": rest['aria-label'] || ariaLabel || 'Close', type: buttonType(rest.type) }));
 };
 
 /**
- * How long after an item appears its announcement is written, in ms. The wait
- * lets a screen reader register a region the container has only just mounted,
- * and items shown in quick succession are written, and read out, together.
+ * The `Divider` component renders a styled horizontal rule (`<hr>`) element with Bulma helper class integration.
+ *
+ * @function
+ * @param {DividerProps} props - Props for the Divider component.
+ * @returns {JSX.Element} The rendered hr element.
  */
-const announceDelay = 100;
+const Divider = ({ className, bgColor, ...props }) => {
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames();
+    const dividerClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return jsxRuntime.jsx("hr", { className: dividerClasses || undefined, ...rest });
+};
+
 /**
- * How long an announcement stays in the region once written, in ms. That's
- * long enough for a screen reader to pick it up. Clearing it after keeps a
- * second copy of the item's text from sitting in the page, where someone
- * reading through the page, or a test looking the text up, would find it
- * again.
+ * The `Emphasis` component renders a styled `<em>` element with Bulma helper class integration.
+ *
+ * @function
+ * @param {EmphasisProps} props - Props for the Emphasis component.
+ * @returns {JSX.Element} The rendered em element.
  */
-const announcementLifetime = 1000;
-const noAnnouncements = [];
-const nothingWritten = [];
-const noAnnouncementsYet = {
-    key: 0,
-    waiting: noAnnouncements,
-    written: nothingWritten,
-};
-// Hides the region with inline styles rather than a class, so it needs no
-// stylesheet, including the helper classes a modular Bulma build can leave
-// out. Clipping it, rather than using `display` or `visibility`, keeps it in
-// the accessibility tree. The declarations match the `extras-sr-only` mixin,
-// plus `clip-path`, which replaces the deprecated `clip`. The negative margin
-// pulls the 1px box back inside the page, so it doesn't add scrollable
-// overflow. Exported for other live regions that must work without a
-// stylesheet, such as a range calendar's.
-const visuallyHidden = {
-    position: 'absolute',
-    width: '1px',
-    height: '1px',
-    padding: 0,
-    margin: '-1px',
-    overflow: 'hidden',
-    clip: 'rect(0, 0, 0, 0)',
-    clipPath: 'inset(50%)',
-    whiteSpace: 'nowrap',
-    border: 0,
+const Emphasis = ({ className, textColor, bgColor, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames();
+    const emphasisClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("em", { className: emphasisClasses || undefined, ...rest, children: children }));
 };
+
 /**
- * Works out what a status region says. Each item is announced once each time
- * it appears, so one that goes and comes back is announced again. Its
- * announcement is written `announceDelay` after it appears, or after the last
- * item to join it when several appear in quick succession, alongside whatever
- * the region still says. Once written, it stays for `announcementLifetime`,
- * whatever is written after it and whether or not its item goes in the
- * meantime. An item that goes before its announcement is written isn't
- * announced.
+ * FigureCaption component for rendering a styled figcaption element.
  *
- * Nothing is written in the commit that mounts the region or the item. A
- * screen reader reliably announces a polite live region whose content changes
- * after the region is already in the page, and not always one that arrives
- * with its content. By the time `describe` runs, an item's rendered text can
- * be read.
+ * A FigureCaption wraps the HTML `<figcaption>` element with Bulma helper class integration.
+ * Use it inside Figure components to provide captions for images or other media.
  *
- * @function useAnnouncements
- * @param items - The items to announce, in the order they were shown.
- * @param describe - The text to announce for an item, or nothing to skip it.
- *   It runs once the item is on screen, and it must keep its identity between
- *   renders (a module-level function or a `useCallback`), or every render
- *   re-checks the items.
- * @returns The announcements to render, in the order they were written.
+ * @function
+ * @param {FigureCaptionProps} props - Props for the FigureCaption component.
+ * @returns {JSX.Element} The rendered figcaption element.
  */
-function useAnnouncements(items, describe) {
-    // The ids of the items on screen as of the last change, every one of which
-    // has been looked at for an announcement already.
-    const onScreenIdsRef = React.useRef(new Set());
-    // Clears that haven't run yet. They outlive the batch that started them, so
-    // they're only stopped when the region unmounts.
-    const clearTimersRef = React.useRef(new Set());
-    const [announcements, setAnnouncements] = React.useState(noAnnouncementsYet);
-    // Runs after the commit that puts an item on screen, which is the first
-    // point its rendered text can be read.
-    React.useEffect(() => {
-        const announced = onScreenIdsRef.current;
-        const appeared = items.filter(item => !announced.has(item.id));
-        // Items that have gone drop out here too, so one that comes back has
-        // appeared again.
-        onScreenIdsRef.current = new Set(items.map(item => item.id));
-        const next = [];
-        for (const item of appeared) {
-            const text = describe(item);
-            if (text)
-                next.push({ id: item.id, text });
-        }
-        if (next.length > 0) {
-            // eslint-disable-next-line react-hooks/set-state-in-effect -- an item's rendered text can only be read once it's on screen
-            setAnnouncements(current => ({
-                ...current,
-                key: current.key + 1,
-                // Announcements still waiting go out with the new ones, apart from
-                // one whose item came back before it was written, which the new one
-                // replaces. What's already written stays put.
-                waiting: [
-                    ...current.waiting.filter(waiting => !next.some(({ id }) => id === waiting.id)),
-                    ...next,
-                ],
-            }));
-        }
-    }, [items, describe]);
-    // The write only touches the batch it was started for: a newer batch can
-    // be set before the render that cancels this timer. Its clear is started
-    // by the write itself, so it's timed from the write without waiting on a
-    // render, and a newer batch arriving doesn't cut short what's written.
-    const { key } = announcements;
-    React.useEffect(() => {
-        if (key === noAnnouncementsYet.key)
-            return undefined;
-        const clearTimers = clearTimersRef.current;
-        const write = setTimeout(() => {
-            // Whether an item is on screen is decided here, once. An item that
-            // went before its announcement was due isn't announced, and one that
-            // goes after keeps its announcement for the rest of its lifetime, when
-            // the region holds the only copy of its text rather than a second one.
-            const onScreen = onScreenIdsRef.current;
-            setAnnouncements(current => current.key === key
-                ? {
-                    ...current,
-                    waiting: noAnnouncements,
-                    written: [
-                        ...current.written,
-                        ...current.waiting
-                            .filter(announcement => onScreen.has(announcement.id))
-                            .map(announcement => ({ ...announcement, batch: key })),
-                    ],
-                }
-                : current);
-            // eslint-disable-next-line @eslint-react/web-api-no-leaked-timeout -- it has to outlive this effect when a newer batch arrives, so the unmount effect below clears it
-            const clear = setTimeout(() => {
-                clearTimers.delete(clear);
-                setAnnouncements(current => {
-                    const written = current.written.filter(announcement => announcement.batch !== key);
-                    return written.length === current.written.length
-                        ? current
-                        : { ...current, written };
-                });
-            }, announcementLifetime);
-            clearTimers.add(clear);
-        }, announceDelay);
-        return () => clearTimeout(write);
-    }, [key]);
-    React.useEffect(() => {
-        const clearTimers = clearTimersRef.current;
-        return () => {
-            clearTimers.forEach(clearTimeout);
-            clearTimers.clear();
-        };
-    }, []);
-    return announcements.written;
-}
+const FigureCaption = ({ className, textColor, bgColor, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames();
+    const captionClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("figcaption", { className: captionClasses || undefined, ...rest, children: children }));
+};
 /**
- * Reads an element out roughly the way a screen reader would: its text, with
- * an element's `aria-label`, or an image's `alt`, standing in for what's
- * inside it, a break between block-level elements, and parts that are
- * `aria-hidden`, `hidden` or inline-styled `display: none` left out. It isn't
- * the full accessible name computation, so `aria-labelledby`, CSS-generated
- * content, content hidden by a stylesheet and other ways of naming or hiding
- * content aren't followed.
+ * The `Figure` component renders a styled `<figure>` element with Bulma helper class integration.
  *
- * @function spokenText
- * @param element - The element to read.
- * @returns Its text, with runs of whitespace collapsed and the ends trimmed.
+ * @function
+ * @param {FigureProps} props - Props for the Figure component.
+ * @returns {JSX.Element} The rendered figure element.
  */
-function spokenText(element) {
-    return readAloud(element).replace(/\s+/g, ' ').trim();
-}
-// Elements a browser displays as blocks by default, and `br`. A screen reader
-// pauses between them, so their text shouldn't run into the text beside them.
-// They're known by tag rather than by computed `display`, which would depend
-// on a stylesheet and on layout.
-const blockLevelTags = new Set([
-    'ADDRESS',
-    'ARTICLE',
-    'ASIDE',
-    'BLOCKQUOTE',
-    'BR',
-    'CAPTION',
-    'DD',
-    'DETAILS',
-    'DIALOG',
-    'DIV',
-    'DL',
-    'DT',
-    'FIELDSET',
-    'FIGCAPTION',
-    'FIGURE',
-    'FOOTER',
-    'FORM',
-    'H1',
-    'H2',
-    'H3',
-    'H4',
-    'H5',
-    'H6',
-    'HEADER',
-    'HGROUP',
-    'HR',
-    'LEGEND',
-    'LI',
-    'MAIN',
-    'MENU',
-    'NAV',
-    'OL',
-    'P',
-    'PRE',
-    'SEARCH',
-    'SECTION',
-    'SUMMARY',
-    'TABLE',
-    'TBODY',
-    'TD',
-    'TFOOT',
-    'TH',
-    'THEAD',
-    'TR',
-    'UL',
-]);
+const FigureComponent = ({ className, textColor, bgColor, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames();
+    const figureClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("figure", { className: figureClasses || undefined, ...rest, children: children }));
+};
 /**
- * Whether an element is left out of what a screen reader reads.
+ * Figure component with Caption subcomponent.
  *
- * @function isHidden
- * @param element - The element to check.
- * @returns True for `aria-hidden="true"`, the `hidden` attribute, and an
- *   inline `display: none`, on an HTML, SVG or any other element with an
- *   inline style.
+ * @example
+ * <Figure>
+ *   <img src="image.jpg" alt="Description" />
+ *   <Figure.Caption>Image caption text</Figure.Caption>
+ * </Figure>
  */
-const isHidden = (element) => element.getAttribute('aria-hidden') === 'true' ||
-    element.hasAttribute('hidden') ||
-    element.style?.display === 'none';
+const Figure = withSubComponents(FigureComponent, {
+    Caption: FigureCaption,
+}, 'Figure');
+
 /**
- * The text `spokenText` reads for an element, before its whitespace is
- * tidied.
+ * Distinguishes an `IconProps` object from a plain custom node (an inline SVG, a
+ * `react-icons` component, …) in a slot that accepts either — `Control`'s
+ * `iconLeft`/`iconRight`, `IconText`'s `iconProps`.
  *
- * @function readAloud
- * @param element - The element to read.
- * @returns Its text.
+ * One copy, imported by both consumers: two hand-maintained copies, one per
+ * consumer, is how the deprecated `icon` path came to crash both (#663).
+ *
+ * Its own module rather than `Icon.tsx` because `src/index.ts` wildcard-exports
+ * that file, and everything published there is public forever. `polymorphic.ts`
+ * makes the same call for `isCustomElement`: an internal discriminator is not
+ * something to support for the life of the package.
+ *
+ * It tests each member's VALUE, not merely its key, and only after everything
+ * React owns is out of the way. `'icon' in value` was enough
+ * to claim a Font Awesome `IconDefinition` — `{ prefix, iconName, icon: [w, h, …,
+ * path] }` — whose `icon` is a path array rather than a class string. That object
+ * is not a renderable node either, so the honest outcome is the one this slot has
+ * always had for it: the node branch, and React's own "Objects are not valid as a
+ * React child". Claiming it here instead rendered a blank container that still
+ * reserved layout.
+ *
+ * A member added to `IconProps` needs a line here, and a missed one is a crash
+ * rather than a fallthrough. That is the cost of a slot taking either a props
+ * object or a node; keeping the guard in one place is what keeps the cost to a
+ * single line.
  */
-function readAloud(element) {
-    if (isHidden(element))
-        return '';
-    const name = element.getAttribute('aria-label') ||
-        (element.tagName === 'IMG' ? element.getAttribute('alt') : null);
-    const text = name ||
-        Array.from(element.childNodes, child => {
-            if (child instanceof Element)
-                return readAloud(child);
-            return child.nodeType === Node.TEXT_NODE ? child.textContent : '';
-        }).join('');
-    // A name stands in for the element's content, and a block's content stands
-    // apart from what's around it, so both are padded to keep them from running
-    // into the neighboring text. An inline run, like `<span>Up</span>` then
-    // `<span>loaded</span>`, still reads as one word.
-    return name || blockLevelTags.has(element.tagName) ? ` ${text} ` : text;
+function isIconProps(value) {
+    if (typeof value !== 'object' || value === null)
+        return false;
+    // Anything React owns. `isValidElement` covers elements only; a PORTAL is a
+    // valid `ReactNode` that fails it and carries a `children` key, so the member
+    // test below claimed it and `Control` spread it into `<Icon>` as props —
+    // rendering the portal's child locally instead of in its container. Every
+    // React internal carries `$$typeof`, so testing for it covers lazy, context
+    // and whatever React adds next, rather than portals alone.
+    if (React.isValidElement(value) || '$$typeof' in value)
+        return false;
+    const candidate = value;
+    return (typeof candidate.name === 'string' ||
+        typeof candidate.icon === 'string' ||
+        'children' in candidate);
 }
+
 /**
- * A visually hidden, polite `status` live region that a container announces
- * its items through. The container renders it from the moment it mounts,
- * whether or not it has anything to show, so the region is already in the
- * page when an announcement is written into it.
+ * The `IconText` component provides a Bulma-styled horizontal arrangement of one or more `Icon` components and optional text.
  *
- * The announcements are this component's own state, so writing and clearing
- * them re-renders the region and leaves the container's items alone. Each one
- * is its own keyed node, so a re-render that leaves the announcements alone
- * leaves the region's content alone too, and nothing is read out twice.
+ * @function
+ * @param {IconTextProps} props - Props for the IconText component.
+ * @returns {JSX.Element} The rendered icon text element.
+ * @see {@link https://bulma.io/documentation/elements/icon/#icon-text | Bulma IconText documentation}
+ */
+const IconTextComponent = ({ className, textColor, color, bgColor, iconProps, children, items, ...props }) => {
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames('icon-text');
+    const iconTextClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("span", { className: iconTextClasses, ...rest, children: items ? (items.map((item, index) => (jsxRuntime.jsxs(React.Fragment, { children: [item.iconProps &&
+                    (isIconProps(item.iconProps) ? (jsxRuntime.jsx(Icon, { ...item.iconProps })) : (jsxRuntime.jsx(Icon, { children: item.iconProps }))), item.text && jsxRuntime.jsx("span", { children: item.text })] }, index)))) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconProps &&
+                    (isIconProps(iconProps) ? (jsxRuntime.jsx(Icon, { ...iconProps })) : (jsxRuntime.jsx(Icon, { children: iconProps }))), children && jsxRuntime.jsx("span", { children: children })] })) }));
+};
+const IconText = withSubComponents(IconTextComponent, { Icon }, 'IconText');
+
+/**
+ * The `Image` component wraps images, iframes, or custom content in a Bulma-styled container, supporting fixed sizes, aspect ratios, rounded corners, retina images, and all Bulma helper props for color and spacing.
  *
- * @function StatusRegion
- * @param props - The items to announce, and the text to announce for each.
- * @returns The region.
+ * @function
+ * @param {ImageProps} props - Props for the Image component.
+ * @returns {JSX.Element} The rendered image element.
+ * @see {@link https://bulma.io/documentation/elements/image/ | Bulma Image documentation}
  */
-function StatusRegion({ items, describe, }) {
-    const announcements = useAnnouncements(items, describe);
-    // `role="status"` makes a region atomic unless it says otherwise, which
-    // reads the whole region on every change. Each announcement is its own
-    // node, and only additions are relevant by default, so with atomic off a
-    // screen reader reads just what was written, and removing one announcement
-    // doesn't read out the ones still there. A node is keyed by its batch as
-    // well as its item, since an item that comes back can be written again
-    // while what it said before is still there.
-    return (jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "false", style: visuallyHidden, children: announcements.map(announcement => (jsxRuntime.jsx("div", { children: announcement.text }, `${announcement.batch}:${announcement.id}`))) }));
-}
+const Image = ({ as, className, textColor, color, bgColor, size, isRounded, isRetina, src, alt, children, ...props }) => {
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames('image', {
+        [`is-${size}`]: size,
+        'has-ratio': size && typeof size === 'string' && size.includes('by'),
+    });
+    const imageClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    // Default tag logic: if "as" is provided, use it.
+    // If not, use <figure> for aspect ratios or children, <div> otherwise.
+    let Tag;
+    if (as) {
+        Tag = as;
+    }
+    else if (size && typeof size === 'string' && size.includes('by')) {
+        Tag = 'figure';
+    }
+    else {
+        Tag = 'div';
+    }
+    const roundedClass = usePrefixedClassNames('is-rounded');
+    const content = children ? (children) : (jsxRuntime.jsx("img", { className: classNames({ [roundedClass]: isRounded }) || undefined, src: src, alt: alt, ...(isRetina && src ? { srcSet: `${src} 2x` } : {}) }));
+    return (jsxRuntime.jsx(Tag, { className: imageClasses, ...rest, children: content }));
+};
 
 /**
  * Keys pressed together or one after another, in the outer `<kbd>` HTML gives a combination, with the separator between each pair as text.
@@ -11333,9 +11470,9 @@ function useAutoLabelId({ label, id, labelProps, rendersLabel, hasInput = true,
         ? (labelProps?.id ?? `${generatedId}-label`)
         : undefined;
     // Inactive with a label still means an own Field may render it (pickers'
-    // inline mode, Taginput at maxTags) — the explicit `htmlFor: undefined`
-    // tells Field the association is owned here, so it must not generate one
-    // that would dangle (#495 presence semantics).
+    // inline mode). The explicit `htmlFor: undefined` tells Field the
+    // association is owned here, so it must not generate one that would
+    // dangle (#495 presence semantics).
     const fieldLabelProps = active
         ? ownLabelId
             ? { ...ownLabelProps, id: ownLabelId }
@@ -12782,7 +12919,7 @@ const keepFocus = (e) => e.preventDefault();
 // An IME that's composing owns every key: Enter confirms what it composed,
 // and the arrows move through its candidates. Safari can say so with
 // `keyCode` 229 rather than `isComposing`.
-const isComposing = (e) => e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229;
+const isComposing$1 = (e) => e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229;
 // Whether an option can be picked. The arrows still reach a disabled one, so
 // a screen reader user finds it.
 const isEnabled = (item) => typeof item === 'string' || !item.disabled;
@@ -12945,7 +13082,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     }, [keepFirst, isActive, filteredData.length, inputValue]);
     // Handle keyboard navigation
     const handleKeyDown = React.useCallback((e) => {
-        if (disabled || isComposing(e))
+        if (disabled || isComposing$1(e))
             return;
         switch (e.key) {
             case 'ArrowDown':
@@ -13130,6 +13267,10 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
 });
 Autocomplete.displayName = 'Autocomplete';
 
+// An IME that's composing owns every key: Enter confirms what it composed,
+// the arrows move through its candidates, and Escape cancels it. Safari can
+// say so with `keyCode` 229 rather than `isComposing` (#1102).
+const isComposing = (e) => e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229;
 /**
  * The `Taginput` component provides a tag/chip input field for managing multiple tags.
  *
@@ -13178,7 +13319,9 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     const [inputValue, setInputValue] = React.useState('');
     const [isActive, setIsActive] = React.useState(false);
     const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
-    const listboxId = `${React.useId()}-listbox`;
+    const baseId = React.useId();
+    const listboxId = `${baseId}-listbox`;
+    const counterId = `${baseId}-counter`;
     // With `data` the input offers suggestions, so it's a combobox, even
     // while none match. Without it there's never a list, so it stays a plain
     // text field.
@@ -13187,16 +13330,13 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     // Use controlled or internal tags
     const tags = controlledValue !== undefined ? controlledValue : internalTags;
     const isMaxReached = maxTags !== undefined && tags.length >= maxTags;
-    // At the tag limit the text input is not rendered, so there is nothing to
-    // wire a label to, its own or a surrounding Field's. The suggestion list
-    // points `aria-labelledby` at the label that names the input, so with
-    // suggestions it needs that label's id.
+    // The suggestion list points `aria-labelledby` at the label that names
+    // the input, so with suggestions it needs that label's id.
     const { controlId, fieldLabelProps, labelled, labelId: listLabelId, } = useAutoLabelId({
         label,
         id,
         labelProps,
-        rendersLabel: ownField && !isMaxReached,
-        hasInput: !isMaxReached,
+        rendersLabel: ownField,
         needsLabelId: hasSuggestions,
     });
     // Get display value from tag
@@ -13217,9 +13357,8 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         const hasInput = inputValue || (openOnFocus && isActive);
         return matchesInput && notAlreadyAdded && hasInput;
     });
-    // At the tag limit the input isn't rendered, so the list isn't either.
-    // Left open it would be a listbox with no combobox, offering tags past
-    // the limit (#1087).
+    // At the tag limit the list stays closed, since it could only offer tags
+    // past the limit (#1087).
     const listOpen = isActive && !isMaxReached && filteredData.length > 0;
     // keepFirst: auto-highlight first item when dropdown opens
     React.useEffect(() => {
@@ -13234,36 +13373,42 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         }
         onChange?.(newTags);
     }, [controlledValue, onChange]);
-    // Add a tag from text typed, pasted or picked from the list. Only
-    // `createTag` turns it into an object.
-    const addTag = React.useCallback((value) => {
+    // Add tags from text typed, pasted or picked from the list. Each one is
+    // checked against the tags before it, this batch's included, so a paste
+    // of several adds them all in one change (#1101). Only `createTag` turns
+    // text into an object.
+    const addTags = React.useCallback((values) => {
         if (disabled || readonly)
             return;
-        const displayValue = value.trim();
-        if (!displayValue)
-            return;
-        // No maxTags check: only the input and the list call this, neither
-        // renders at the limit, and each call adds at most one tag.
-        // Check duplicates
-        if (!allowDuplicates) {
-            const exists = tags.some(tag => getDisplayValue(tag).toLowerCase() === displayValue.toLowerCase());
-            if (exists)
-                return;
+        let next = tags;
+        const added = [];
+        for (const value of values) {
+            // A paste can bring more tags than there's room for, and at the
+            // limit the read-only input still takes Enter.
+            if (maxTags !== undefined && next.length >= maxTags)
+                break;
+            const displayValue = value.trim();
+            if (!displayValue)
+                continue;
+            const lower = displayValue.toLowerCase();
+            // Duplicates, data and the dropdown filter all compare
+            // case-insensitively.
+            if (!allowDuplicates &&
+                next.some(tag => getDisplayValue(tag).toLowerCase() === lower))
+                continue;
+            // Without allowNew, only a suggestion can become a tag.
+            if (!allowNew && !data.some(d => d.toLowerCase() === lower))
+                continue;
+            if (beforeAdding && !beforeAdding(displayValue))
+                continue;
+            const tag = createTag ? createTag(displayValue) : displayValue;
+            next = [...next, tag];
+            added.push(tag);
         }
-        // Check if allowed (must be in data if allowNew is false). Compare
-        // case-insensitively, consistent with the dropdown filter and the
-        // duplicate check above.
-        if (!allowNew &&
-            !data.some(d => d.toLowerCase() === displayValue.toLowerCase()))
-            return;
-        // beforeAdding validation
-        if (beforeAdding && !beforeAdding(displayValue))
+        if (added.length === 0)
             return;
-        // createTag transformation
-        const finalTag = createTag ? createTag(displayValue) : displayValue;
-        const newTags = [...tags, finalTag];
-        updateTags(newTags);
-        onAdd?.(finalTag);
+        updateTags(next);
+        added.forEach(tag => onAdd?.(tag));
         setInputValue('');
         if (!keepOpen) {
             setIsActive(false);
@@ -13273,6 +13418,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         disabled,
         readonly,
         tags,
+        maxTags,
         allowDuplicates,
         allowNew,
         data,
@@ -13301,7 +13447,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         if (confirmKeys.includes(lastChar) && lastChar !== 'Enter') {
             const valueWithoutKey = newValue.slice(0, -1).trim();
             if (valueWithoutKey) {
-                addTag(valueWithoutKey);
+                addTags([valueWithoutKey]);
             }
             return;
         }
@@ -13310,7 +13456,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         if (newValue && data.length > 0) {
             setIsActive(true);
         }
-    }, [confirmKeys, addTag, onTyping, data.length]);
+    }, [confirmKeys, addTags, onTyping, data.length]);
     // Handle paste
     const handlePaste = React.useCallback((e) => {
         if (onPasteSeparators.length === 0)
@@ -13321,17 +13467,12 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         if (!hasSeparator)
             return;
         e.preventDefault();
-        // Build a regex from all separators
-        const escapedSeparators = onPasteSeparators.map(s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+        // Build a character class from all separators. A `-` is escaped
+        // too, since between two others it would make a range.
+        const escapedSeparators = onPasteSeparators.map(s => s.replace(/[-.*+?^${}()|[\]\\]/g, '\\$&'));
         const regex = new RegExp(`[${escapedSeparators.join('')}]`);
-        const parts = pastedText
-            .split(regex)
-            .map(s => s.trim())
-            .filter(Boolean);
-        for (const part of parts) {
-            addTag(part);
-        }
-    }, [onPasteSeparators, addTag]);
+        addTags(pastedText.split(regex));
+    }, [onPasteSeparators, addTags]);
     // Handle focus
     const handleFocus = React.useCallback(() => {
         if (openOnFocus && data.length > 0 && !disabled) {
@@ -13364,16 +13505,16 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     }, [isActive]);
     // Handle keyboard
     const handleKeyDown = React.useCallback((e) => {
-        if (disabled || readonly)
+        if (disabled || readonly || isComposing(e))
             return;
         // Handle confirm keys
         if (confirmKeys.includes(e.key)) {
             e.preventDefault();
             if (highlightedIndex >= 0 && filteredData[highlightedIndex]) {
-                addTag(filteredData[highlightedIndex]);
+                addTags([filteredData[highlightedIndex]]);
             }
             else if (inputValue.trim()) {
-                addTag(inputValue);
+                addTags([inputValue]);
             }
             return;
         }
@@ -13400,7 +13541,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
             case 'Escape':
                 // Closing the suggestions claims the key, so a Modal around the
                 // field stays open. With none showing, the key goes on to it.
-                if (isActive && filteredData.length > 0)
+                if (listOpen)
                     e.preventDefault();
                 setIsActive(false);
                 setHighlightedIndex(-1);
@@ -13412,9 +13553,10 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         confirmKeys,
         highlightedIndex,
         filteredData,
-        addTag,
+        addTags,
         inputValue,
         isActive,
+        listOpen,
         data.length,
         removeOnKeys,
         tags.length,
@@ -13500,9 +13642,13 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
                                                 e.stopPropagation();
                                                 removeTag(index);
                                             }, "aria-label": ariaCloseLabel || `Remove ${displayVal}` }))] }, index));
-                            }), !isMaxReached && (jsxRuntime.jsx("input", { ref: combinedRef, type: "text", className: inputClasses, id: controlId, value: inputValue, placeholder: tags.length === 0 ? placeholder : undefined, disabled: disabled, readOnly: readonly, maxLength: maxlength, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, onPaste: handlePaste, ...(hasSuggestions && comboboxProps), "aria-label": labelled ? undefined : 'Add tag' }))] }), loading && (jsxRuntime.jsx("span", { className: iconRightClass, children: jsxRuntime.jsx("span", { className: loaderClass }) }))] }), listOpen && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsx("div", { ref: dropdownRef, id: listboxId, className: dropdownContentClasses, role: "listbox", "aria-labelledby": listLabelId, "aria-label": listLabelId ? undefined : 'Suggestions', children: filteredData.map((item, index) => (jsxRuntime.jsx("a", { id: optionId(index), className: pcn('dropdown-item', {
+                            }), jsxRuntime.jsx("input", { ref: combinedRef, type: "text", className: inputClasses, id: controlId, value: inputValue, placeholder: tags.length === 0 ? placeholder : undefined, disabled: disabled, 
+                                // Read-only at the tag limit rather than gone, so focus stays
+                                // put and a label keeps naming it, and Backspace still makes
+                                // room (#1103).
+                                readOnly: readonly || isMaxReached, maxLength: maxlength, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, onPaste: handlePaste, ...(hasSuggestions && comboboxProps), "aria-label": labelled ? undefined : 'Add tag', "aria-describedby": showCounter ? counterId : undefined })] }), loading && (jsxRuntime.jsx("span", { className: iconRightClass, children: jsxRuntime.jsx("span", { className: loaderClass }) }))] }), listOpen && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsx("div", { ref: dropdownRef, id: listboxId, className: dropdownContentClasses, role: "listbox", "aria-labelledby": listLabelId, "aria-label": listLabelId ? undefined : 'Suggestions', children: filteredData.map((item, index) => (jsxRuntime.jsx("a", { id: optionId(index), className: pcn('dropdown-item', {
                             'is-active': index === highlightedIndex,
-                        }), onClick: () => addTag(item), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": optionId(index) === activeOptionId, children: item }, index))) }) })), showCounter && jsxRuntime.jsx("small", { className: counterClasses, children: counterText }), name &&
+                        }), onClick: () => addTags([item]), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": optionId(index) === activeOptionId, children: item }, index))) }) })), showCounter && (jsxRuntime.jsx("small", { id: counterId, className: counterClasses, children: counterText })), name &&
                 tags.map((tag, i) => (jsxRuntime.jsx("input", { type: "hidden", name: name, value: getDisplayValue(tag), form: form }, `tag-input-${i}`)))] }));
     if (ownField) {
         return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [taginputElement, messageEl] }));
@@ -19965,6 +20111,8 @@ exports.Thead = Thead;
 exports.Theme = Theme;
 exports.TimeInput = TimeInput;
 exports.TimeInputBase = TimeInputBase;
+exports.Timeline = Timeline;
+exports.TimelineItem = TimelineItem;
 exports.Title = Title;
 exports.Toast = Toast;
 exports.ToastContainer = ToastContainer;