@allxsmith/bestax-bulma 5.32.0 → 5.33.1

package/dist/index.cjs

@@ -1762,26 +1762,36 @@ const Avatar = React.forwardRef(function Avatar(avatarProps, ref) {
 });
 Avatar.displayName = 'Avatar';
 
+// INTERNAL: deliberately not exported from src/index.ts.
 /**
- * Flattens Fragment children (recursively) into a flat element array so they
- * participate in max clamping and size/shape injection. Children.toArray keys
- * restart at ".0" inside each fragment, so fragment children are re-keyed by
- * prefixing the fragment's own key — otherwise a fragment sibling of a direct
- * child would collide (both ".0") and trigger duplicate-key warnings.
+ * A component's children as a flat list, with each Fragment opened up
+ * (recursively) so the items inside one count one by one rather than as the
+ * Fragment. `Children.toArray` already drops `null`, `undefined` and
+ * booleans and flattens arrays, but it keeps a Fragment whole, so an empty
+ * one would still count as an item and two items in one would count as one.
+ *
+ * `Children.toArray` keys restart at ".0" inside each Fragment, so the items
+ * in one are re-keyed with the Fragment's own key as a prefix. Otherwise an
+ * item in a Fragment and a sibling outside it could share a key.
+ *
+ * Text and numbers pass through as they are, so a caller that wants only
+ * elements filters with `React.isValidElement`.
  */
-function flattenChildren$1(children, keyPrefix = '') {
+function flattenChildren(children, keyPrefix = '') {
     return React.Children.toArray(children).flatMap(child => {
         if (!React.isValidElement(child))
-            return [];
+            return [child];
         if (child.type === React.Fragment) {
-            return flattenChildren$1(child.props.children, keyPrefix + child.key);
+            return flattenChildren(child.props.children, keyPrefix + child.key);
         }
-        const el = child;
         return [
-            keyPrefix ? React.cloneElement(el, { key: keyPrefix + el.key }) : el,
+            keyPrefix
+                ? React.cloneElement(child, { key: keyPrefix + child.key })
+                : child,
         ];
     });
 }
+
 /**
  * The `Avatars` component renders an overlapping/stacked group of `Avatar`s, the "members" list pattern.
  *
@@ -1808,7 +1818,9 @@ const AvatarsComponent = ({ className, max, size, shape, spacing = 'md', spaced
         : undefined;
     const surplusClass = usePrefixedClassNames('is-surplus');
     const combinedClasses = classNames(avatarsClasses, bulmaHelperClasses, className);
-    const childArray = flattenChildren$1(children);
+    // Fragments are opened up, so the avatars inside one count toward `max` and
+    // take the group's size and shape one by one. Text between them is dropped.
+    const childArray = flattenChildren(children).filter((child) => React.isValidElement(child));
     const maxCount = typeof max === 'number' && Number.isInteger(max) && max >= 0
         ? max
         : undefined;
@@ -5295,26 +5307,6 @@ function toIndexes(value) {
         return value;
     return typeof value === 'number' ? [value] : [];
 }
-/**
- * Flattens Fragment children (recursively) so each item inside one gets its
- * own index rather than sharing the fragment's. Children.toArray keys restart
- * at ".0" inside each fragment, so those children are re-keyed with the
- * fragment's own key as a prefix, the way Avatars does it.
- */
-function flattenChildren(children, keyPrefix = '') {
-    return React.Children.toArray(children).flatMap(child => {
-        if (!React.isValidElement(child))
-            return [child];
-        if (child.type === React.Fragment) {
-            return flattenChildren(child.props.children, keyPrefix + child.key);
-        }
-        return [
-            keyPrefix
-                ? React.cloneElement(child, { key: keyPrefix + child.key })
-                : child,
-        ];
-    });
-}
 /**
  * The `Collapses` component groups `Collapse` items into an accordion that keeps one item open at a time, or any number with `multiple`.
  *
@@ -9151,83 +9143,6 @@ const Image = ({ as, className, textColor, color, bgColor, size, isRounded, isRe
     return (jsxRuntime.jsx(Tag, { className: imageClasses, ...rest, children: content }));
 };
 
-/**
- * The `Link` component renders a styled anchor (`<a>`) element with Bulma helper class integration.
- *
- * @function
- * @param {LinkProps} props - Props for the Link component.
- * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
- * @returns {JSX.Element} The rendered anchor, or whatever `as` names.
- * @see {@link https://bulma.io/documentation/elements/content/ | Bulma Content documentation}
- */
-const Link = React.forwardRef(function Link(linkProps, ref) {
-    const { className, textColor, bgColor, isActive, as: Component = 'a', children, ...props } = linkProps;
-    /**
-     * Generates Bulma helper classes and separates out remaining props.
-     */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    const bulmaClasses = usePrefixedClassNames({
-        'is-active': isActive,
-    });
-    const linkClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx(Component, { ref: ref, className: linkClasses || undefined, ...rest, ...(Component === 'button' ? { type: buttonType(rest.type) } : {}), children: children }));
-});
-Link.displayName = 'Link';
-
-/**
- * The `ListItem` component renders a styled list item (`<li>`) element with Bulma helper class integration.
- *
- * @function
- * @param {ListItemProps} props - Props for the ListItem component.
- * @returns {JSX.Element} The rendered li element.
- */
-const ListItem = ({ className, textColor, bgColor, children, ...props }) => {
-    /**
-     * Generates Bulma helper classes and separates out remaining props.
-     */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    const bulmaClasses = usePrefixedClassNames();
-    const itemClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("li", { className: itemClasses || undefined, ...rest, children: children }));
-};
-
-/**
- * The `Loader` component renders Bulma's `.loader`, a small spinning ring for inline loading states.
- *
- * The ring is `1em` square, so `textSize` scales it. It is exposed as an
- * indeterminate `progressbar` named by `ariaLabel`, and it stops spinning
- * under `prefers-reduced-motion: reduce` while staying drawn.
- *
- * @function
- * @param {LoaderProps} props - Props for the Loader component.
- * @param {React.Ref<HTMLSpanElement>} ref - Forwarded ref to the loader element.
- * @returns {JSX.Element} The rendered loader element.
- *
- * @example
- * <Loader />
- *
- * @example
- * <Loader textSize="3" ariaLabel="Saving" />
- */
-const Loader = React.forwardRef(({ className, ariaLabel = 'Loading', ...props }, ref) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const loaderClass = usePrefixedClassNames('loader');
-    // role="progressbar", not role="status": a status region mounted together
-    // with its text is not reliably announced, so the loader claims only what
-    // it can deliver, a named indicator found by reading the page. No
-    // aria-valuenow, because the progress is indeterminate.
-    return (jsxRuntime.jsx("span", { ref: ref, className: classNames(loaderClass, bulmaHelperClasses, className), role: "progressbar", "aria-label": ariaLabel, ...rest }));
-});
-Loader.displayName = 'Loader';
-
 /**
  * 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,
@@ -9270,7 +9185,8 @@ const visuallyHidden = {
     border: 0,
 };
 /**
- * Works out what a status region says. Each item is announced once. Its
+ * 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`,
@@ -9305,8 +9221,8 @@ function useAnnouncements(items, describe) {
     React.useEffect(() => {
         const announced = onScreenIdsRef.current;
         const appeared = items.filter(item => !announced.has(item.id));
-        // Items that have gone drop out here too. Ids are never reused, so
-        // forgetting them can't bring an old item back.
+        // 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) {
@@ -9319,9 +9235,13 @@ function useAnnouncements(items, describe) {
             setAnnouncements(current => ({
                 ...current,
                 key: current.key + 1,
-                // Announcements still waiting go out with the new ones. What's
-                // already written stays put.
-                waiting: [...current.waiting, ...next],
+                // 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]);
@@ -9480,10 +9400,10 @@ function readAloud(element) {
     return name || blockLevelTags.has(element.tagName) ? ` ${text} ` : text;
 }
 /**
- * A visually hidden, polite `status` live region that a programmatic
- * 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.
+ * 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
@@ -9500,10 +9420,164 @@ function StatusRegion({ items, describe, }) {
     // 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.
-    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.id))) }));
+    // 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}`))) }));
 }
 
+/**
+ * Keys pressed together or one after another, in the outer `<kbd>` HTML gives a combination, with the separator between each pair as text.
+ *
+ * It doesn't wrap in the middle and isn't drawn as a key itself. It sets no
+ * font size, so the keys in it are the size of a key on its own.
+ *
+ * @function
+ * @param {KbdGroupProps} props - Props for Kbd.Group.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the outer `<kbd>`.
+ * @returns {JSX.Element} The rendered combination.
+ *
+ * @example
+ * <Kbd.Group>
+ *   <Kbd>Ctrl</Kbd>
+ *   <Kbd>Shift</Kbd>
+ *   <Kbd>P</Kbd>
+ * </Kbd.Group>
+ *
+ * @example
+ * <Kbd.Group separator="then">
+ *   <Kbd>G</Kbd>
+ *   <Kbd>I</Kbd>
+ * </Kbd.Group>
+ */
+const KbdGroup = React.forwardRef(({ className, textColor, separator = '+', children, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        ...props,
+    });
+    const groupClass = usePrefixedClassNames('kbd-group');
+    const separatorClass = usePrefixedClassNames('kbd-separator');
+    // Null, undefined and booleans drop out, and Fragments are opened up, so
+    // an empty Fragment leaves no separator behind and the keys in one are
+    // separated like the rest. The spaces are part of the text, so a screen
+    // reader reads "Ctrl plus S" rather than one run-together word, whatever
+    // the CSS does.
+    const keys = flattenChildren(children);
+    return (jsxRuntime.jsx("kbd", { ref: ref, className: classNames(groupClass, bulmaHelperClasses, className), ...rest, children: keys.map((key, index) => (jsxRuntime.jsxs(React.Fragment, { children: [index > 0 && (jsxRuntime.jsx("span", { className: separatorClass, children: ` ${separator} ` })), key] }, React.isValidElement(key) && key.key != null ? key.key : index))) }));
+});
+KbdGroup.displayName = 'Kbd.Group';
+/**
+ * The `Kbd` component renders a `<kbd>` drawn as a keycap, for a key the reader presses.
+ *
+ * It only shows the key: it doesn't listen for it. The key takes its colors
+ * from the text it sits in, and its size in `em`, so it fits a paragraph, a
+ * title or a filled button as it is, and `textSize` sizes it outright. For a
+ * combination or a sequence, put the keys in a `Kbd.Group`. What tells
+ * assistive tech a control has a shortcut is `aria-keyshortcuts` on that
+ * control, with `Kbd` as the hint people see next to it.
+ *
+ * @function
+ * @param {KbdProps} props - Props for the Kbd component.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<kbd>`.
+ * @returns {JSX.Element} The rendered key.
+ *
+ * @example
+ * <Kbd>Esc</Kbd>
+ *
+ * @example
+ * <Kbd label="Command">⌘</Kbd>
+ */
+const KbdRoot = React.forwardRef(({ className, textColor, bgColor, label, children, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const kbdClass = usePrefixedClassNames('kbd');
+    // The name is text rather than an aria-label, which ARIA in HTML
+    // prohibits on kbd. Its styles are inline, so it stays hidden in a
+    // modular build that leaves out Bulma's helper classes.
+    return (jsxRuntime.jsx("kbd", { ref: ref, className: classNames(kbdClass, bulmaHelperClasses, className), ...rest, children: label ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { "aria-hidden": "true", children: children }), jsxRuntime.jsx("span", { style: visuallyHidden, children: label })] })) : (children) }));
+});
+const Kbd = withSubComponents(KbdRoot, { Group: KbdGroup }, 'Kbd');
+
+/**
+ * The `Link` component renders a styled anchor (`<a>`) element with Bulma helper class integration.
+ *
+ * @function
+ * @param {LinkProps} props - Props for the Link component.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered anchor, or whatever `as` names.
+ * @see {@link https://bulma.io/documentation/elements/content/ | Bulma Content documentation}
+ */
+const Link = React.forwardRef(function Link(linkProps, ref) {
+    const { className, textColor, bgColor, isActive, as: Component = 'a', children, ...props } = linkProps;
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames({
+        'is-active': isActive,
+    });
+    const linkClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx(Component, { ref: ref, className: linkClasses || undefined, ...rest, ...(Component === 'button' ? { type: buttonType(rest.type) } : {}), children: children }));
+});
+Link.displayName = 'Link';
+
+/**
+ * The `ListItem` component renders a styled list item (`<li>`) element with Bulma helper class integration.
+ *
+ * @function
+ * @param {ListItemProps} props - Props for the ListItem component.
+ * @returns {JSX.Element} The rendered li element.
+ */
+const ListItem = ({ className, textColor, bgColor, children, ...props }) => {
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames();
+    const itemClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("li", { className: itemClasses || undefined, ...rest, children: children }));
+};
+
+/**
+ * The `Loader` component renders Bulma's `.loader`, a small spinning ring for inline loading states.
+ *
+ * The ring is `1em` square, so `textSize` scales it. It is exposed as an
+ * indeterminate `progressbar` named by `ariaLabel`, and it stops spinning
+ * under `prefers-reduced-motion: reduce` while staying drawn.
+ *
+ * @function
+ * @param {LoaderProps} props - Props for the Loader component.
+ * @param {React.Ref<HTMLSpanElement>} ref - Forwarded ref to the loader element.
+ * @returns {JSX.Element} The rendered loader element.
+ *
+ * @example
+ * <Loader />
+ *
+ * @example
+ * <Loader textSize="3" ariaLabel="Saving" />
+ */
+const Loader = React.forwardRef(({ className, ariaLabel = 'Loading', ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const loaderClass = usePrefixedClassNames('loader');
+    // role="progressbar", not role="status": a status region mounted together
+    // with its text is not reliably announced, so the loader claims only what
+    // it can deliver, a named indicator found by reading the page. No
+    // aria-valuenow, because the progress is indeterminate.
+    return (jsxRuntime.jsx("span", { ref: ref, className: classNames(loaderClass, bulmaHelperClasses, className), role: "progressbar", "aria-label": ariaLabel, ...rest }));
+});
+Loader.displayName = 'Loader';
+
 /**
  * The `Notification` component is a Bulma-styled alert/message area for providing feedback, warnings, or information to users.
  *
@@ -12425,6 +12499,10 @@ const Rate = React.forwardRef(({ label, labelSize, labelProps, horizontal, messa
 });
 Rate.displayName = 'Rate';
 
+// What the status region announces: the `empty` content, as the one item
+// it's handed while that content is on screen because of the user's typing.
+const typedNoMatches = [{ id: 'empty' }];
+const nothingToAnnounce = [];
 /**
  * The `Autocomplete` component provides an input field with dropdown suggestions that filter based on user input.
  *
@@ -12469,6 +12547,13 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     const dropdownRef = React.useRef(null);
     const [internalValue, setInternalValue] = React.useState('');
     const [isActive, setIsActive] = React.useState(false);
+    // Whether the user has typed since the list opened, since only typing
+    // gets the `empty` content announced. Closing the list resets it (during
+    // render, React's pattern for adjusting state when other state changes),
+    // so opening the list again without typing stays quiet.
+    const [typed, setTyped] = React.useState(false);
+    if (typed && !isActive)
+        setTyped(false);
     const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
     const listboxId = `${React.useId()}-listbox`;
     // Use controlled or internal value
@@ -12487,6 +12572,11 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         const displayValue = getDisplayValue(item);
         return displayValue.toLowerCase().includes(inputValue.toLowerCase());
     });
+    // The dropdown shows the options or, when nothing matches, the `empty`
+    // content. The listbox holds only options, so it's on screen only while
+    // there are some.
+    const menuOpen = isActive && (filteredData.length > 0 || !!empty);
+    const listOpen = isActive && filteredData.length > 0;
     // Handle input change
     const handleInputChange = React.useCallback((e) => {
         const newValue = e.target.value;
@@ -12494,6 +12584,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
             setInternalValue(newValue);
         }
         onInput?.(newValue);
+        setTyped(true);
         if (!isActive && newValue) {
             setIsActive(true);
         }
@@ -12644,7 +12735,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     });
     const controlClasses = usePrefixedClassNames('control', 'is-expanded', 'has-icons-right');
     const dropdownMenuClasses = usePrefixedClassNames('dropdown-menu', {
-        'is-active': isActive && (filteredData.length > 0 || !!empty),
+        'is-active': menuOpen,
     });
     const dropdownContentClass = usePrefixedClassNames('dropdown-content');
     const dropdownHeaderClass = usePrefixedClassNames('dropdown-header');
@@ -12666,24 +12757,51 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     // The listbox takes its name from the label that names the combobox, the
     // one this renders or a surrounding Field's, so the two say the same
     // thing. When no label names the combobox, or the one that does has no
-    // id to point at, the list keeps a fallback name.
-    const listOpen = isActive && (filteredData.length > 0 || !!empty);
+    // id to point at, the list keeps a fallback name. While the dropdown
+    // shows only the `empty` content there's no listbox, so the combobox is
+    // collapsed and points at nothing.
     const activeOptionId = listOpen &&
         highlightedIndex >= 0 &&
         highlightedIndex < filteredData.length
         ? `${listboxId}-${highlightedIndex}`
         : undefined;
-    const autocompleteElement = (jsxRuntime.jsxs("div", { ref: containerRef, className: combinedClasses, ...rest, children: [jsxRuntime.jsxs("div", { className: controlClasses, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "text", className: inputClasses, id: controlId, value: inputValue, placeholder: placeholder, disabled: disabled, name: name, form: form, required: required, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, role: "combobox", "aria-expanded": listOpen, "aria-controls": listOpen ? listboxId : undefined, "aria-activedescendant": activeOptionId, "aria-haspopup": "listbox", "aria-autocomplete": "list", autoComplete: "off" }), showClear && (jsxRuntime.jsx("button", { type: "button", className: iconRightClickableClass, onClick: handleClear, "aria-label": "Clear", children: jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "16", height: "16", "aria-hidden": "true", children: [jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })), loading && (jsxRuntime.jsx("span", { className: iconRightClass, children: jsxRuntime.jsx("span", { className: loaderClass }) }))] }), listOpen && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsxs("div", { ref: dropdownRef, className: dropdownContentClass, style: { maxHeight: `${maxHeight}px`, overflowY: 'auto' }, id: listboxId, role: "listbox", "aria-labelledby": listLabelId, "aria-label": listLabelId ? undefined : 'Suggestions', onScroll: handleDropdownScroll, children: [header && jsxRuntime.jsx("div", { className: dropdownHeaderClass, children: header }), filteredData.length > 0 ? (filteredData.map((item, index) => {
-                            const isDisabled = typeof item !== 'string' && item.disabled;
-                            const isHighlighted = index === highlightedIndex;
-                            const itemClasses = prefixedClassNames(classPrefix, 'dropdown-item', {
-                                'is-active': isHighlighted,
-                                'is-disabled': isDisabled,
-                            });
-                            return (jsxRuntime.jsx("a", { id: `${listboxId}-${index}`, "data-index": index, className: itemClasses, onClick: () => !isDisabled && handleSelect(item), onMouseEnter: () => !isDisabled && setHighlightedIndex(index), role: "option", "aria-selected": isHighlighted, "aria-disabled": isDisabled, children: itemTemplate
-                                    ? itemTemplate(item)
-                                    : getDisplayValue(item) }, index));
-                        })) : (jsxRuntime.jsx("div", { className: emptyItemClasses, children: empty })), footer && jsxRuntime.jsx("div", { className: dropdownFooterClass, children: footer })] }) }))] }));
+    // A polite status region, in the page from the start so it's there
+    // before anything is written into it, announces the `empty` content
+    // when the user's typing leaves nothing that matches what's in the
+    // field. It follows what's on screen, so results that come in after the
+    // typing count too. It's said once each time that happens, not again on
+    // each keystroke while nothing matches. An empty field isn't a search,
+    // so it stays quiet then, even with no data. While `loading`, or a
+    // loading Control around it, says results are on their way, it waits,
+    // and it's said once loading ends with nothing matching.
+    const emptyItems = typed &&
+        menuOpen &&
+        !listOpen &&
+        !!inputValue &&
+        !loading &&
+        !controlLoading
+        ? typedNoMatches
+        : nothingToAnnounce;
+    // The region reads the text on screen, whatever `empty` renders.
+    const emptyRef = React.useRef(null);
+    const describeEmpty = React.useCallback(() => {
+        const node = emptyRef.current;
+        /* istanbul ignore if: it's only announced while it's on screen */
+        if (!node)
+            return null;
+        return spokenText(node);
+    }, []);
+    const autocompleteElement = (jsxRuntime.jsxs("div", { ref: containerRef, className: combinedClasses, ...rest, children: [jsxRuntime.jsxs("div", { className: controlClasses, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "text", className: inputClasses, id: controlId, value: inputValue, placeholder: placeholder, disabled: disabled, name: name, form: form, required: required, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, role: "combobox", "aria-expanded": listOpen, "aria-controls": listOpen ? listboxId : undefined, "aria-activedescendant": activeOptionId, "aria-haspopup": "listbox", "aria-autocomplete": "list", autoComplete: "off" }), showClear && (jsxRuntime.jsx("button", { type: "button", className: iconRightClickableClass, onClick: handleClear, "aria-label": "Clear", children: jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "16", height: "16", "aria-hidden": "true", children: [jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })), loading && (jsxRuntime.jsx("span", { className: iconRightClass, children: jsxRuntime.jsx("span", { className: loaderClass }) }))] }), menuOpen && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsxs("div", { ref: dropdownRef, className: dropdownContentClass, style: { maxHeight: `${maxHeight}px`, overflowY: 'auto' }, onScroll: handleDropdownScroll, children: [header && jsxRuntime.jsx("div", { className: dropdownHeaderClass, children: header }), listOpen ? (jsxRuntime.jsx("div", { id: listboxId, role: "listbox", "aria-labelledby": listLabelId, "aria-label": listLabelId ? undefined : 'Suggestions', children: filteredData.map((item, index) => {
+                                const isDisabled = typeof item !== 'string' && item.disabled;
+                                const isHighlighted = index === highlightedIndex;
+                                const itemClasses = prefixedClassNames(classPrefix, 'dropdown-item', {
+                                    'is-active': isHighlighted,
+                                    'is-disabled': isDisabled,
+                                });
+                                return (jsxRuntime.jsx("a", { id: `${listboxId}-${index}`, "data-index": index, className: itemClasses, onClick: () => !isDisabled && handleSelect(item), onMouseEnter: () => !isDisabled && setHighlightedIndex(index), role: "option", "aria-selected": isHighlighted, "aria-disabled": isDisabled, children: itemTemplate
+                                        ? itemTemplate(item)
+                                        : getDisplayValue(item) }, index));
+                            }) })) : (jsxRuntime.jsx("div", { ref: emptyRef, className: emptyItemClasses, children: empty })), footer && jsxRuntime.jsx("div", { className: dropdownFooterClass, children: footer })] }) })), jsxRuntime.jsx(StatusRegion, { items: emptyItems, describe: describeEmpty })] }));
     if (!insideField) {
         return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [autocompleteElement, messageEl] }));
     }
@@ -19362,6 +19480,8 @@ exports.IconText = IconText;
 exports.Image = Image;
 exports.Input = Input;
 exports.InputBase = InputBase;
+exports.Kbd = Kbd;
+exports.KbdGroup = KbdGroup;
 exports.Level = Level;
 exports.LevelItem = LevelItem;
 exports.LevelLeft = LevelLeft;