@allxsmith/bestax-bulma 5.36.0 → 5.37.0

package/dist/index.cjs

@@ -2365,41 +2365,13 @@ function getDeepestActiveElement(doc = document) {
 }
 
 // INTERNAL: deliberately not exported from src/index.ts.
-/**
- * Every menu-item role, so an item a caller gives `menuitemcheckbox` or
- * `menuitemradio` (a filter or sort menu) stays reachable.
- */
-const MENU_ITEM_SELECTOR = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]';
-/**
- * Whether a menu item can be reached and activated: it isn't disabled, as a
- * native control or through `aria-disabled="true"`.
- */
-function isEnabledMenuItem(item) {
-    return (!item.hasAttribute('disabled') &&
-        item.getAttribute('aria-disabled') !== 'true');
-}
-/** Whether `node` is one of `menu`'s items, enabled or not. */
-const isItemOf = (menu, node) => Boolean(node && menu.contains(node) && node.matches(MENU_ITEM_SELECTOR));
-/** The items in `menu` the keys reach, in document order. */
-function enabledMenuItems(menu) {
-    return Array.from(menu.querySelectorAll(MENU_ITEM_SELECTOR)).filter(isEnabledMenuItem);
-}
 /** How long typed characters keep adding up to one search, in milliseconds. */
 const TYPEAHEAD_TIMEOUT = 500;
 /**
- * Whether the browser activates `item` on this key by itself: a `<button>`
- * answers Enter and Space, and a link with an `href` answers Enter.
- */
-function activatesItself(item, key) {
-    if (item.tagName === 'BUTTON')
-        return true;
-    return key === 'Enter' && item.tagName === 'A' && item.hasAttribute('href');
-}
-/**
- * The text typing finds an item by: what it says, without what's hidden from
- * assistive technology, such as an icon whose glyph is a ligature's name.
+ * The text typing finds an element by: what it says, without what's hidden
+ * from assistive technology, such as an icon whose glyph is a ligature's name.
  */
-function label(item) {
+function typeaheadText(element) {
     let text = '';
     const read = (node) => {
         node.childNodes.forEach(child => {
@@ -2411,7 +2383,7 @@ function label(item) {
             }
         });
     };
-    read(item);
+    read(element);
     return text.trim().toLowerCase();
 }
 /**
@@ -2420,18 +2392,84 @@ function label(item) {
  * through the items that start with it, and so does a run of one letter
  * ("dd"). A longer search looks from the focused item, so typing more of
  * its own text keeps it.
+ *
+ * @param items - The items typing can reach, in the order they're shown.
+ * @param search - What's been typed, lowercased.
+ * @param current - The focused item's index in `items`, or -1 for none.
+ * @param textOf - The text an item is found by. By default it's the item's
+ * own, read by `typeaheadText`.
  */
-function typeaheadMatch(items, search, current) {
+function typeaheadMatch(items, search, current, textOf = typeaheadText) {
     const repeated = Array.from(search).every(char => char === search[0]);
     const wanted = repeated ? search[0] : search;
     const start = current < 0 ? 0 : current + (wanted.length === 1 ? 1 : 0);
     for (let i = 0; i < items.length; i += 1) {
         const item = items[(start + i) % items.length];
-        if (label(item).startsWith(wanted))
+        if (textOf(item).startsWith(wanted))
             return item;
     }
     return undefined;
 }
+/**
+ * Keeps what has been typed for a type-ahead search, and forgets it once
+ * `TYPEAHEAD_TIMEOUT` passes with nothing typed. Pair it with
+ * `typeaheadMatch` to find the item the search names.
+ *
+ * @function useTypeahead
+ * @returns A way to add a character to the search, and a way to forget it.
+ */
+function useTypeahead() {
+    const typedRef = React.useRef({ text: '' });
+    React.useEffect(() => {
+        const typed = typedRef.current;
+        return () => clearTimeout(typed.timer);
+    }, []);
+    return React.useMemo(() => {
+        const reset = () => {
+            const typed = typedRef.current;
+            clearTimeout(typed.timer);
+            typed.text = '';
+        };
+        const type = (char) => {
+            const typed = typedRef.current;
+            typed.text += char.toLowerCase();
+            clearTimeout(typed.timer);
+            typed.timer = setTimeout(reset, TYPEAHEAD_TIMEOUT);
+            return typed.text;
+        };
+        return { type, reset };
+    }, []);
+}
+
+// INTERNAL: deliberately not exported from src/index.ts.
+/**
+ * Every menu-item role, so an item a caller gives `menuitemcheckbox` or
+ * `menuitemradio` (a filter or sort menu) stays reachable.
+ */
+const MENU_ITEM_SELECTOR = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]';
+/**
+ * Whether a menu item can be reached and activated: it isn't disabled, as a
+ * native control or through `aria-disabled="true"`.
+ */
+function isEnabledMenuItem(item) {
+    return (!item.hasAttribute('disabled') &&
+        item.getAttribute('aria-disabled') !== 'true');
+}
+/** Whether `node` is one of `menu`'s items, enabled or not. */
+const isItemOf = (menu, node) => Boolean(node && menu.contains(node) && node.matches(MENU_ITEM_SELECTOR));
+/** The items in `menu` the keys reach, in document order. */
+function enabledMenuItems(menu) {
+    return Array.from(menu.querySelectorAll(MENU_ITEM_SELECTOR)).filter(isEnabledMenuItem);
+}
+/**
+ * Whether the browser activates `item` on this key by itself: a `<button>`
+ * answers Enter and Space, and a link with an `href` answers Enter.
+ */
+function activatesItself(item, key) {
+    if (item.tagName === 'BUTTON')
+        return true;
+    return key === 'Enter' && item.tagName === 'A' && item.hasAttribute('href');
+}
 /**
  * Moves through and activates the items of a `role="menu"` element from the
  * keyboard. Put the `onKeyDown` it returns on that element. It reads the
@@ -2463,17 +2501,8 @@ function typeaheadMatch(items, search, current) {
  * what has been typed.
  */
 function useMenuKeys() {
-    const typedRef = React.useRef({ text: '' });
-    React.useEffect(() => {
-        const typed = typedRef.current;
-        return () => clearTimeout(typed.timer);
-    }, []);
+    const typeahead = useTypeahead();
     return React.useMemo(() => {
-        const reset = () => {
-            const typed = typedRef.current;
-            clearTimeout(typed.timer);
-            typed.text = '';
-        };
         const onKeyDown = (event) => {
             const menu = event.currentTarget;
             const focused = getActiveElementInTree(menu);
@@ -2530,14 +2559,10 @@ function useMenuKeys() {
                 return;
             }
             event.preventDefault();
-            const typed = typedRef.current;
-            typed.text += event.key.toLowerCase();
-            clearTimeout(typed.timer);
-            typed.timer = setTimeout(reset, TYPEAHEAD_TIMEOUT);
-            typeaheadMatch(items, typed.text, current)?.focus();
+            typeaheadMatch(items, typeahead.type(event.key), current)?.focus();
         };
-        return { onKeyDown, reset };
-    }, []);
+        return { onKeyDown, reset: typeahead.reset };
+    }, [typeahead]);
 }
 
 /**
@@ -3473,7 +3498,7 @@ const EmptyStateActions = ({ className, ...props }) => {
 };
 EmptyStateActions.displayName = 'EmptyState.Actions';
 /** Whether a shorthand prop was given something to render. */
-const isGiven$1 = (node) => node !== undefined &&
+const isGiven$2 = (node) => node !== undefined &&
     node !== null &&
     typeof node !== 'boolean' &&
     node !== '';
@@ -3520,7 +3545,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$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] }));
+    return (jsxRuntime.jsxs("div", { ref: ref, className: classNames(rootClass, bulmaHelperClasses, className), ...rest, children: [isGiven$2(icon) && (jsxRuntime.jsx(EmptyStateIndicator, { children: typeof icon === 'string' ? jsxRuntime.jsx(Icon, { name: icon }) : icon })), isGiven$2(title) && (jsxRuntime.jsx(EmptyStateTitle, { as: titleAs, children: title })), isGiven$2(description) && (jsxRuntime.jsx(EmptyStateDescription, { children: description })), children] }));
 });
 const EmptyState = withSubComponents(EmptyStateRoot, {
     Indicator: EmptyStateIndicator,
@@ -3559,6 +3584,10 @@ const MenuLabel = ({ className, children, ...props }) => {
 /**
  * MenuList applies `menu-list` class only at the top level (not for nested lists).
  *
+ * Every level renders `role="list"`, which Safari needs: WebKit stops
+ * exposing a `<ul>` as a list once its markers are hidden, and Bulma's reset
+ * hides them.
+ *
  * @function
  * @param {MenuListProps} props - Props for the MenuList component.
  * @returns {JSX.Element} The rendered menu list.
@@ -3569,8 +3598,11 @@ const MenuList = ({ className, children, ...props }) => {
     const ulClass = classNames(className, bulmaHelperClasses, {
         [usePrefixedClassNames('menu-list')]: level === 0,
     });
-    // Increment level for nested MenuLists
-    return (jsxRuntime.jsx(MenuListLevelContext.Provider, { value: level + 1, children: jsxRuntime.jsx("ul", { className: ulClass || undefined, ...rest, children: children }) }));
+    // Increment level for nested MenuLists. role="list" restates the <ul>'s
+    // own role, for Safari: WebKit stops exposing a list as one once its
+    // markers are hidden, as Bulma's reset hides them, unless the role is set
+    // explicitly. After the spread, so a caller's role can't take it away.
+    return (jsxRuntime.jsx(MenuListLevelContext.Provider, { value: level + 1, children: jsxRuntime.jsx("ul", { className: ulClass || undefined, ...rest, role: "list", children: children }) }));
 };
 /**
  * `href` alone — annotated so a typo is a compile error rather than a silent
@@ -8130,7 +8162,7 @@ const TimelineItemContext = React.createContext({
     titleAs: 'h2',
 });
 /** Whether a prop was given something to render. */
-const isGiven = (node) => node !== undefined &&
+const isGiven$1 = (node) => node !== undefined &&
     node !== null &&
     typeof node !== 'boolean' &&
     node !== '';
@@ -8163,7 +8195,7 @@ const TimelineItem = React.forwardRef(({ className, title, time, dateTime, icon,
         [`is-${color}`]: isTimelineColor(color),
     });
     const markerClass = usePrefixedClassNames('timeline-marker', {
-        'is-icon': isGiven(icon),
+        'is-icon': isGiven$1(icon),
     });
     const contentClass = usePrefixedClassNames('timeline-content');
     const titleClass = usePrefixedClassNames('timeline-title');
@@ -8175,8 +8207,8 @@ const TimelineItem = React.forwardRef(({ className, title, time, dateTime, icon,
     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) &&
+        }), children: [jsxRuntime.jsx("div", { className: markerClass, "aria-hidden": "true", children: isGiven$1(icon) &&
+                    (typeof icon === 'string' ? jsxRuntime.jsx(Icon, { name: icon }) : icon) }), jsxRuntime.jsxs("div", { className: contentClass, children: [isGiven$1(title) ? (jsxRuntime.jsxs(TitleTag, { className: titleClass, children: [title, words] })) : (words), isGiven$1(time) &&
                         (dateTime ? (jsxRuntime.jsx("time", { className: timeClass, dateTime: dateTime, children: time })) : (jsxRuntime.jsx("span", { className: timeClass, children: time }))), children] })] }));
 });
 TimelineItem.displayName = 'Timeline.Item';
@@ -8250,7 +8282,7 @@ const TimelineRoot = React.forwardRef(({ className, children, active, pending, a
     // 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 }) }))] }));
+    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$1(pending) && (jsxRuntime.jsx(TimelineItemContext.Provider, { value: contextFor('pending'), children: jsxRuntime.jsx(TimelineItem, { title: pending }) }))] }));
 });
 const Timeline = withSubComponents(TimelineRoot, { Item: TimelineItem }, 'Timeline');
 
@@ -9545,922 +9577,1353 @@ function RevealImpl(revealProps) {
 const Reveal = RevealImpl;
 Reveal.displayName = 'Reveal';
 
+// INTERNAL: deliberately not exported from src/index.ts.
 /**
- * The `Block` component renders a simple container with Bulma's `.block` class, adding vertical margin between sections of content.
- *
- * @function
- * @param {BlockProps} props - Props for the Block component.
- * @returns {JSX.Element} The rendered block element.
- * @see {@link https://bulma.io/documentation/elements/block/ | Bulma Block documentation}
+ * What Enter, Space and a click on the row do in each mode, from the tables
+ * in #1096. `open` opens or closes a parent and does nothing on a leaf. A
+ * click on the chevron only ever opens or closes.
  */
-const Block = ({ className, textColor, color, bgColor, children, ...props }) => {
-    /**
-     * Generates Bulma helper classes and separates out remaining props.
-     */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor ?? color,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    const bulmaClasses = usePrefixedClassNames('block');
-    const blockClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("div", { className: blockClasses, ...rest, children: children }));
+const MODES = {
+    none: { enter: ['open'], space: ['open'], click: ['open'] },
+    single: { enter: ['select'], space: ['select'], click: ['select', 'open'] },
+    checkbox: { enter: ['open'], space: ['check'], click: ['check'] },
 };
-
+/** Left and Right, swapped for a right-to-left page. */
+const MIRRORED = {
+    ArrowLeft: 'ArrowRight',
+    ArrowRight: 'ArrowLeft',
+};
+/** An IME is composing, so the key belongs to it (`keyCode` 229 is Safari's word for it). */
+const isComposing$2 = (event) => event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229;
+/** The registry's items on the page, in document order. */
+const shownIn = (tree, { values }) => Array.from(tree.querySelectorAll('[role="treeitem"]')).filter(element => values.has(element));
+/** The item an item on the page sits in: its group's `<li>`, or none at the top. */
+function parentItemOf(element) {
+    const group = element.parentElement;
+    return group.getAttribute('role') === 'group' ? group.parentElement : null;
+}
+/** The values of the items an item on the page is in, from the top. */
+function pathOf(element, { values }) {
+    const path = [];
+    for (let at = parentItemOf(element); at; at = parentItemOf(at)) {
+        path.unshift(values.get(at));
+    }
+    return path;
+}
 /**
- * The `Box` component renders a bordered, padded container with an optional shadow using Bulma's `.box` class.
- *
- * @function
- * @param {BoxProps} props - Props for the Box component.
- * @returns {JSX.Element} The rendered box element.
- * @see {@link https://bulma.io/documentation/elements/box/ | Bulma Box documentation}
- */
-const Box = ({ className, textColor, color, bgColor, hasShadow = true, children, style, ...props }) => {
-    /**
-     * Generates Bulma helper classes and separates out remaining props.
-     */
-    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
-        color: textColor ?? color,
-        backgroundColor: bgColor,
-        ...props,
+ * Every known item's check state, by the rules in #1096:
+ *
+ * - a disabled item is checked only when its own value is listed;
+ * - an enabled item with no enabled items anywhere under it is checked when
+ *   it, or any item above it, is listed;
+ * - any other enabled item follows the items of that second kind in its
+ *   branch: checked when they all are, unchecked when none is, mixed between.
+ *
+ * Also returns the items of the second kind, which are what a toggle sets.
+ */
+function readChecks(records, listed) {
+    const kids = new Map();
+    records.forEach(({ parent }, value) => {
+        kids.set(parent, [...(kids.get(parent) ?? []), value]);
+    });
+    const states = new Map();
+    const ends = [];
+    // How many enabled ends the branch holds, and how many are checked.
+    const visit = (value, above) => {
+        const marked = above || listed.has(value);
+        let total = 0;
+        let on = 0;
+        for (const kid of kids.get(value) ?? []) {
+            const [t, o] = visit(kid, marked);
+            total += t;
+            on += o;
+        }
+        if (records.get(value).disabled) {
+            states.set(value, listed.has(value));
+            return [total, on];
+        }
+        if (total === 0) {
+            states.set(value, marked);
+            ends.push(value);
+            return [1, marked ? 1 : 0];
+        }
+        states.set(value, on === total ? true : on > 0 && 'mixed');
+        return [total, on];
+    };
+    for (const top of kids.get(null) ?? [])
+        visit(top, false);
+    return { states, ends };
+}
+/**
+ * The list a toggle of `value` leaves: it and every enabled item under it
+ * take the opposite of its state (a mixed one checks), and the rest is read
+ * back by the rules. That's every item that shows checked, parents
+ * included, plus any listed value no item has.
+ */
+function toggledList(records, list, value) {
+    const { states, ends } = readChecks(records, new Set(list));
+    const to = states.get(value) !== true;
+    // An end was reached from the top, so everything above it is known.
+    const under = (end) => {
+        for (let at = end; at !== null;) {
+            if (at === value)
+                return true;
+            at = records.get(at).parent;
+        }
+        return false;
+    };
+    const seed = new Set(ends.filter(end => (under(end) ? to : states.get(end) === true)));
+    records.forEach(({ disabled }, item) => {
+        if (disabled && states.get(item) === true)
+            seed.add(item);
     });
-    const bulmaClasses = usePrefixedClassNames('box', {
-        'is-shadowless': !hasShadow,
+    const after = readChecks(records, seed).states;
+    return [
+        ...Array.from(after)
+            .filter(([, state]) => state === true)
+            .map(([item]) => item),
+        ...list.filter(item => !records.has(item)),
+    ];
+}
+/** A value the caller holds, or one this hook holds when the caller doesn't. */
+function useControlled(controlled, initial) {
+    const [own, setOwn] = React.useState(initial);
+    const isControlled = controlled !== undefined;
+    const set = (next) => {
+        if (!isControlled)
+            setOwn(next);
+    };
+    return [isControlled ? controlled : own, set];
+}
+/**
+ * The open state, the selection, the keys, the tab stop and the registry of
+ * a TreeView (#1096). Focus moves for real, with a roving tabindex, rather
+ * than through `aria-activedescendant`.
+ *
+ * Every item registers its value, its parent and whether it's disabled from
+ * a layout effect. In a checkbox tree a closed item's children still render
+ * and register while drawing nothing, so the registry knows every item and a
+ * check reaches all of them. The keys read the items on the page, in
+ * document order, each time they need them.
+ *
+ * @function useTreeView
+ * @param options - The TreeView's props.
+ * @returns The state and handlers the root and its items wire up.
+ */
+function useTreeView(options) {
+    // An own key only, so a name every object inherits, like `toString`, is a
+    // mode the tree doesn't know too.
+    const mode = Object.prototype.hasOwnProperty.call(MODES, options.mode)
+        ? options.mode
+        : 'none';
+    const actions = MODES[mode];
+    const [expanded, setExpanded] = useControlled(options.expanded, options.defaultExpanded);
+    const [selection, setSelection] = useControlled(options.selected, options.defaultSelected);
+    const [checkedList, setChecked] = useControlled(options.checked, options.defaultChecked);
+    // Each is read in its own mode only.
+    const selected = mode === 'single' ? selection : null;
+    const listed = new Set(mode === 'checkbox' ? checkedList : []);
+    const treeRef = React.useRef(null);
+    const registryRef = React.useRef({
+        records: new Map(),
+        elements: new Map(),
+        values: new WeakMap(),
+    });
+    // Items register from their own effects, so they ask for a render to be read.
+    const [, refresh] = React.useReducer((n) => n + 1, 0);
+    const typeahead = useTypeahead();
+    // The item with focus, and where the stop rests while focus is elsewhere:
+    // `undefined` until the tree has mounted. With the values above it, for
+    // when it goes away.
+    const [focused, setFocused] = React.useState(null);
+    const [resting, setResting] = React.useState();
+    const restingPathRef = React.useRef([]);
+    // The values above an item that left the page with focus in it.
+    const lostRef = React.useRef(null);
+    const { records } = registryRef.current;
+    const checks = mode === 'checkbox'
+        ? // eslint-disable-next-line react-hooks/refs -- read in render on purpose: items write the registry from their layout effects and then ask for this render with `refresh`
+            readChecks(records, listed).states
+        : undefined;
+    const tabStop = focused ?? (resting === undefined ? selected : resting);
+    const isOpen = (value) => expanded.includes(value);
+    const stateOf = (value, path, disabled) => {
+        if (mode === 'single') {
+            return disabled ? {} : { selected: value === selected };
+        }
+        if (checks) {
+            // Until the items register, a value stands for its branch, and a
+            // parent can't know it's mixed.
+            const fromList = listed.has(value) || (!disabled && path.some(v => listed.has(v)));
+            return { checked: checks.get(value) ?? fromList };
+        }
+        return {};
+    };
+    const changeOpen = (next) => {
+        setExpanded(next);
+        options.onExpandedChange?.(next);
+    };
+    const run = {
+        open: ({ value, isParent, open }) => {
+            if (isParent) {
+                changeOpen(open ? expanded.filter(v => v !== value) : [...expanded, value]);
+            }
+        },
+        select: ({ value }) => {
+            if (value === selected)
+                return;
+            setSelection(value);
+            options.onSelectedChange?.(value);
+        },
+        check: ({ value }) => {
+            const next = toggledList(records, checkedList, value);
+            setChecked(next);
+            options.onCheckedChange?.(next);
+        },
+    };
+    /** Disabled items are never selected, checked, opened or closed. */
+    const act = (item, list) => {
+        if (!item.disabled)
+            list.forEach(action => run[action](item));
+    };
+    // After every render, put the stop where it belongs. While focus is in
+    // the tree it's the focused item. Otherwise it's the selected item, or the
+    // first checked one on the page, and failing that it stays where it was.
+    // An item that goes away hands it to its nearest ancestor on the page, or
+    // to the first item, and focus goes with it if it had focus.
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- after every render on purpose: it reads the page, and sets state only when what it reads has changed
+    useClientLayoutEffect(() => {
+        const tree = treeRef.current;
+        const registry = registryRef.current;
+        // Each item's element is read off the page with its value, rather than
+        // out of `elements`, which holds one element per value: two items
+        // sharing a value, which they shouldn't, can leave it without one the
+        // page still has.
+        const shown = shownIn(tree, registry);
+        const onPage = shown.map(element => registry.values.get(element));
+        const elementOf = (value) => shown[onPage.indexOf(value)];
+        const isShown = (value) => value != null && onPage.includes(value);
+        const heir = (path) => [...path].reverse().find(isShown) ?? onPage[0] ?? null;
+        const lost = lostRef.current;
+        lostRef.current = null;
+        if (lost && !tree.contains(getActiveElementInTree(tree))) {
+            const to = heir(lost);
+            if (to)
+                elementOf(to).focus();
+            return;
+        }
+        if (focused !== null && !isShown(focused))
+            setFocused(null);
+        const preferred = onPage.find(value => value === selected || checks?.get(value) === true);
+        const next = preferred ?? (isShown(resting) ? resting : heir(restingPathRef.current));
+        if (next !== resting) {
+            setResting(next);
+            restingPathRef.current = next ? pathOf(elementOf(next), registry) : [];
+        }
     });
-    const boxClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("div", { className: boxClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
-};
+    const register = React.useCallback((value, record) => {
+        const { records: known } = registryRef.current;
+        known.set(value, record);
+        refresh();
+        return () => {
+            if (known.get(value) !== record)
+                return;
+            known.delete(value);
+            refresh();
+        };
+    }, []);
+    const setElement = React.useCallback((value, element) => {
+        const registry = registryRef.current;
+        if (element) {
+            registry.elements.set(value, element);
+            registry.values.set(element, value);
+            return;
+        }
+        const gone = registry.elements.get(value);
+        if (!gone)
+            return;
+        // The ref lets go before the element leaves the page, so it can still
+        // say whether focus was in it, and where it sat.
+        if (!lostRef.current && gone.contains(getActiveElementInTree(gone))) {
+            lostRef.current = [...pathOf(gone, registry), value];
+        }
+        registry.elements.delete(value);
+    }, []);
+    const onFocus = (value, element) => {
+        setFocused(value);
+        setResting(value);
+        restingPathRef.current = pathOf(element, registryRef.current);
+    };
+    const onBlur = () => setFocused(null);
+    const onKeyDown = (event, item) => {
+        const element = event.currentTarget;
+        // A key on an item inside this one bubbles here too, and is its own.
+        if (event.target !== element ||
+            event.defaultPrevented ||
+            event.altKey ||
+            event.ctrlKey ||
+            event.metaKey ||
+            isComposing$2(event)) {
+            return;
+        }
+        const registry = registryRef.current;
+        const items = shownIn(treeRef.current, registry);
+        const at = items.indexOf(element);
+        const rtl = getComputedStyle(element).direction === 'rtl';
+        const key = (rtl && MIRRORED[event.key]) || event.key;
+        switch (key) {
+            case 'ArrowDown':
+                items[at + 1]?.focus();
+                break;
+            case 'ArrowUp':
+                items[at - 1]?.focus();
+                break;
+            case 'Home':
+                items[0].focus();
+                break;
+            case 'End':
+                items[items.length - 1].focus();
+                break;
+            case 'ArrowRight': {
+                const next = items[at + 1];
+                if (!item.open)
+                    act(item, ['open']);
+                else if (next && parentItemOf(next) === element)
+                    next.focus();
+                break;
+            }
+            case 'ArrowLeft':
+                if (item.open && !item.disabled)
+                    act(item, ['open']);
+                else
+                    parentItemOf(element)?.focus();
+                break;
+            // A held key acts once.
+            case 'Enter':
+                if (!event.repeat)
+                    act(item, actions.enter);
+                break;
+            case ' ':
+                if (!event.repeat)
+                    act(item, actions.space);
+                break;
+            case '*': {
+                const closed = [];
+                registry.records.forEach((record, value) => {
+                    if (record.parent === item.parent &&
+                        record.isParent &&
+                        !record.disabled &&
+                        !expanded.includes(value)) {
+                        closed.push(value);
+                    }
+                });
+                if (closed.length)
+                    changeOpen([...expanded, ...closed]);
+                break;
+            }
+            default:
+                // Type-ahead takes a printable character. Anything else, Escape and
+                // Tab included, is left to whatever is around the tree.
+                if (event.key.length !== 1)
+                    return;
+                typeaheadMatch(items, typeahead.type(event.key), at, el => typeaheadText(el.firstElementChild))?.focus();
+        }
+        event.preventDefault();
+    };
+    const onClick = (element, item, onToggle) => {
+        element.focus();
+        act(item, onToggle ? ['open'] : actions.click);
+    };
+    return {
+        treeRef,
+        rendersClosed: mode === 'checkbox',
+        tabStop,
+        isOpen,
+        stateOf,
+        register,
+        setElement,
+        onFocus,
+        onBlur,
+        onKeyDown,
+        onClick,
+    };
+}
 
+const FieldContext = React.createContext(false);
+const ControlContext = React.createContext(false);
 /**
- * The `Code` component renders a styled `<code>` element with Bulma helper class integration.
- *
- * @function
- * @param {CodeProps} props - Props for the Code component.
- * @returns {JSX.Element} The rendered code element.
+ * Hook to detect if the component is inside a Field wrapper.
+ * Form components use this to skip rendering their own Field.
  */
-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'];
+const useInsideField = () => React.useContext(FieldContext);
 /**
- * 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}
+ * Hook to detect if the component is inside a Control wrapper.
+ * Form components use this to skip rendering their own Control.
  */
-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 }));
-};
-
+const useInsideControl = () => React.useContext(ControlContext);
+/** Provider for Field context — used internally by Field component. */
+const FieldProvider = FieldContext.Provider;
+/** Provider for Control context — used internally by Control component. */
+const ControlProvider = ControlContext.Provider;
+// Each Field-shaping prop, with what takes its place on a `Field` the caller
+// wraps around the `Control`. `message` needs nothing there, because the
+// wrapper still renders it inside `Field > Control`. The other Field-level
+// props (`labelSize`, `labelProps`, `messageColor`) change nothing unless a
+// `label` or `message` renders, so on their own they keep no `Field`.
+// `bare-control.test.tsx` holds this list to what each wrapper hands its
+// `Field` and to which props change its markup, so a new Field-level prop
+// fails there until it is sorted into one group or the other.
+const FIELD_SHAPING = [
+    ['label', 'label'],
+    ['message', undefined],
+    ['horizontal', 'horizontal'],
+    ['fieldClassName', 'className (for fieldClassName)'],
+];
+/** `a`, `a and b`, `a, b and c`. */
+const listOf = (items) => items.length > 1
+    ? `${items.slice(0, -1).join(', ')} and ${items[items.length - 1]}`
+    : items[0];
 /**
- * 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}
+ * Whether a convenience form wrapper renders a `Field` of its own (#905).
+ * Never inside an outer `Field`. Inside a `Control` with no `Field` around
+ * it, a `Field` of its own would put a `.field` inside the `.control`, where
+ * Bulma's control styles break (its icon rules are sibling selectors on the
+ * input). So it renders one there only when a prop that shapes the `Field`'s
+ * markup is set (`label`, `message`, `horizontal`, `fieldClassName`), keeping
+ * the markup it always had, and warns in development that the fix is a
+ * `Field` around that `Control`. A prop counts when it is truthy, the same
+ * test that decides whether it changes the `Field`'s output.
+ * Internal; not part of the public API.
  */
-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) }));
+const rendersOwnField = (component, options) => {
+    if (options.insideField)
+        return false;
+    if (!options.insideControl)
+        return true;
+    const held = FIELD_SHAPING.filter(([prop]) => options[prop]);
+    if (held.length === 0)
+        return false;
+    const names = held.map(([prop]) => prop);
+    const moved = held
+        .map(([, onField]) => onField)
+        .filter((onField) => onField !== undefined);
+    warnOnce(`${component}:Field-in-bare-Control:${names.join('+')}`, `[bestax-bulma] <${component} ${names.join(' ')}> inside a <Control> ` +
+        `with no <Field> around it renders its own <Field> for ` +
+        `${names.length > 1 ? 'those props' : 'that prop'}, which puts a ` +
+        `.field inside the .control, a nesting Bulma's styles are not ` +
+        `written for. Wrap the <Control> in a <Field> instead` +
+        (moved.length > 0 ? `, and set ${listOf(moved)} on that <Field>.` : '.'));
+    return true;
+};
+// Each Control-level prop, with what takes its place on the `Control` the
+// caller wrapped around the wrapper. `bare-control.test.tsx` holds this to
+// what each wrapper hands its own `Control`, so a new Control-level prop
+// fails there until it is added here and passed to `rendersOwnControl`.
+const ON_CONTROL = {
+    isLoading: 'isLoading',
+    iconLeft: 'iconLeft',
+    iconLeftName: 'iconLeftName',
+    iconLeftSize: 'iconLeftSize',
+    iconRight: 'iconRight',
+    iconRightName: 'iconRightName',
+    iconRightSize: 'iconRightSize',
+    hasIconsLeft: 'hasIconsLeft',
+    hasIconsRight: 'hasIconsRight',
+    isExpanded: 'isExpanded',
+    controlSize: 'size (for controlSize)',
+    controlClassName: 'className (for controlClassName)',
 };
-
 /**
- * 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.
+ * Whether a convenience form wrapper renders a `Control` of its own (#921):
+ * only outside one. Inside a `Control` it renders none, so the props it
+ * would have handed its own do nothing there, and it warns in development,
+ * naming them and saying to set them on that `Control`. An `inline` picker
+ * renders none in either place, so it drops them inside a `Control` or not,
+ * and its warning says so without pointing at a `Control`. A wrapper passes
+ * only the props it hands its own `Control`, as the caller gave them, so a
+ * default the wrapper fills in itself never warns. A prop counts when it is
+ * truthy, since a falsy one would change nothing on a `Control` either.
+ * `iconLeftSize` and `hasIconsLeft` show nothing on a `Control` without a
+ * glyph, so when they move and the caller chose no left icon, the advice
+ * names the wrapper's default glyph too, and following it draws what the
+ * wrapper's own `Control` did.
+ * Internal; not part of the public API.
  */
-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 });
+const rendersOwnControl = (component, options) => {
+    if (!options.inline && !options.insideControl)
+        return true;
+    const held = Object.keys(ON_CONTROL).filter(prop => options[prop]);
+    if (held.length === 0)
+        return false;
+    const names = held.join(' ');
+    const doNothing = held.length > 1 ? 'those props do' : 'that prop does';
+    let message;
+    if (options.inline) {
+        message =
+            `[bestax-bulma] <${component} inline ${names}> renders no <Control> ` +
+                `in inline mode, inside a <Control> or not, so ${doNothing} ` +
+                `nothing. Leave ${held.length > 1 ? 'them' : 'it'} out of an ` +
+                `inline picker.`;
+    }
+    else {
+        const toSet = held.map(prop => ON_CONTROL[prop]);
+        const needsGlyph = (options.iconLeftSize || options.hasIconsLeft) &&
+            !options.iconLeft &&
+            options.iconLeftName === undefined &&
+            options.defaultIconLeftName;
+        if (needsGlyph) {
+            toSet.push(`iconLeftName="${options.defaultIconLeftName}" (its default icon)`);
+        }
+        message =
+            `[bestax-bulma] <${component} ${names}> inside a <Control> renders ` +
+                `no <Control> of its own, so ${doNothing} nothing there. Set ` +
+                `${listOf(toSet)} on that <Control> instead.`;
+    }
+    // Keyed by the message itself: the props named do not settle the advice
+    // (an empty `iconLeftName` and an unset one name the same props), so two
+    // calls that would advise differently must not share a key.
+    warnOnce(message, message);
+    return false;
 };
-
+const FieldLabelIdContext = React.createContext(undefined);
 /**
- * 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.
+ * The id a labeled Field wants its single composed control to adopt (#495).
+ * `undefined` outside a Field, in unlabeled/grouped/addons Fields, or when the
+ * user took over the association with an explicit `labelProps.htmlFor`.
+ * Consumed through `useFieldLabelTarget` by the single-control bases
+ * (InputBase, SelectBase, TextAreaBase, and the date and time picker bases
+ * unless inline, #968) and, through `useAutoLabelId`, by the convenience
+ * inputs that render an input of their own (#939). Read it only through
+ * those, which report what they take: a control that read it directly would
+ * report nothing and lose its label (#1004), and
+ * `__tests__/field-label-readers.test.ts` fails on one. Internal; not part of
+ * the public API.
  */
-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 }));
-};
-
+const useFieldLabelId = () => React.useContext(FieldLabelIdContext);
+/** Provider for the Field label-target id — used internally by Field. */
+const FieldLabelIdProvider = FieldLabelIdContext.Provider;
+const FieldLabelElementIdContext = React.createContext(undefined);
 /**
- * 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.
+ * The id of a labeled Field's own `<label>`, for a group control (Radios,
+ * Checkboxes, Rate, DateRangeInput and DateRangeInputBase) to point
+ * `aria-labelledby` at, since a group cannot take the label's `htmlFor`
+ * (#939, #1005). Set under the same conditions as
+ * {@link useFieldLabelId}. Consumed through `useAutoLabelledBy`.
+ * Internal; not part of the public API.
  */
-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 }));
+const useFieldLabelElementId = () => React.useContext(FieldLabelElementIdContext);
+/** Provider for the Field label's own id, used internally by Field. */
+const FieldLabelElementIdProvider = FieldLabelElementIdContext.Provider;
+const FieldLabelForContext = React.createContext({});
+/**
+ * The nearest labeled Field's `<label>`: what it points `htmlFor` at, the id
+ * it generated or the caller's own `labelProps.htmlFor`, and the id the label
+ * renders with, if it has one. An unlabeled Field passes both through
+ * together, so a control in the inner Field of a horizontal layout can tell
+ * the outer label names it, and point at that label by its id, as a range
+ * Slider's thumbs (#981) and Autocomplete's and Taginput's suggestion lists
+ * (#998, #1082) do. The
+ * `htmlFor` is only ever compared with a control's own id, never adopted, so
+ * it hands out no id for a control. It keeps the generated id after the
+ * label drops a `for` nothing took (#1004), which no control's id matches
+ * then, so the value does not change under the content that reported it.
+ * The `id` is set only while that label renders with it. Unlike
+ * {@link useFieldLabelId}, it is set in a `grouped` or `hasAddons` Field
+ * too, so a label wired by hand names the control its `for` picks in those
+ * rows as well. Consumed through `useAutoLabelId`.
+ * Internal; not part of the public API.
+ */
+const useFieldLabelFor = () => React.useContext(FieldLabelForContext);
+/** Provider for the Field label's `htmlFor` target and id, used internally by Field. */
+const FieldLabelForProvider = FieldLabelForContext.Provider;
+const FieldLabelForReportContext = React.createContext(undefined);
+/**
+ * Tells the nearest labeled Field that this content took its generated id
+ * while `takesFor` is true (#1004). Once the Field's content has mounted, its
+ * label keeps the generated `for` only while something has said so, so the
+ * label renders none over a group, a `Checkbox`, `Radio` or `Switch`, an
+ * inner `Field`, an input with an `id` of its own, markup of your own, or
+ * nothing at all. Anything that puts the id from {@link useFieldLabelId} on
+ * an element has to say so, or the label drops the `for` that names it, and
+ * content that takes no id has nothing to do. Set under the same conditions
+ * as {@link useFieldLabelId}, so a label wired by hand and a `grouped` or
+ * `hasAddons` Field hear nothing. It reports from a layout effect, which a
+ * server never runs and a hydrating client runs only after its first render,
+ * so that render writes the `for` the way the server did.
+ * Internal; not part of the public API.
+ */
+const useReportFieldLabelFor = (takesFor) => {
+    const report = React.useContext(FieldLabelForReportContext);
+    useClientLayoutEffect(() => (takesFor ? report?.() : undefined), [report, takesFor]);
 };
+/** Provider for the labeled Field's report function, used internally by Field. */
+const FieldLabelForReportProvider = FieldLabelForReportContext.Provider;
 /**
- * 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.
+ * The id a control with one input of its own renders with: the caller's
+ * `id` when one arrived, otherwise the one a labeled Field offers (#495),
+ * unless it has no input to put it on (`hasInput: false`, as in an `inline`
+ * picker). It also tells that Field when it took the Field's id, through
+ * {@link useReportFieldLabelFor}, so the label keeps its `for` (#1004). Used
+ * by the single-control bases. Internal; not part of the public API.
  */
-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 }));
+const useFieldLabelTarget = (id, hasInput = true) => {
+    const fieldLabelId = useFieldLabelId();
+    const target = id ?? (hasInput ? fieldLabelId : undefined);
+    useReportFieldLabelFor(fieldLabelId !== undefined && target === fieldLabelId);
+    return target;
 };
+const RadiosContext = React.createContext(undefined);
+const CheckboxesContext = React.createContext(undefined);
 /**
- * Figure component with Caption subcomponent.
- *
- * @example
- * <Figure>
- *   <img src="image.jpg" alt="Description" />
- *   <Figure.Caption>Image caption text</Figure.Caption>
- * </Figure>
+ * Hook to read the full surrounding `<Radios>` group context (name + selection).
+ * Returns `undefined` when not inside a `<Radios>` group.
  */
-const Figure = withSubComponents(FigureComponent, {
-    Caption: FigureCaption,
-}, 'Figure');
-
+const useRadiosGroup = () => React.useContext(RadiosContext);
 /**
- * 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.
+ * Hook to read the full surrounding `<Checkboxes>` group context.
+ * Returns `undefined` when not inside a `<Checkboxes>` group.
  */
-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);
-}
+const useCheckboxesGroup = () => React.useContext(CheckboxesContext);
+/** Provider for the Radios group context — used internally by Radios. */
+const RadiosProvider = RadiosContext.Provider;
+/** Provider for the Checkboxes group context — used internally by Checkboxes. */
+const CheckboxesProvider = CheckboxesContext.Provider;
 
 /**
- * The `IconText` component provides a Bulma-styled horizontal arrangement of one or more `Icon` components and optional text.
+ * The values the Checkbox `color` prop accepts, as a readonly tuple.
  *
- * @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.
+ * `CheckboxProps['color']` is typed from it, so the two list the same values.
+ * Map over it to build a color picker, or check a value that arrives at
+ * runtime before passing it in: the component adds no color class for a value
+ * outside the tuple.
  *
- * @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}
+ * @example
+ * import { Checkbox, checkboxColors } from '@allxsmith/bestax-bulma';
+ *
+ * checkboxColors.map(color => (
+ *   <Checkbox key={color} color={color}>
+ *     {color}
+ *   </Checkbox>
+ * ));
  */
-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 }));
-};
-
+const checkboxColors = [
+    'primary',
+    'link',
+    'info',
+    'success',
+    'warning',
+    'danger',
+];
 /**
- * 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.
+ * The values the Checkbox `size` prop accepts, as a readonly tuple.
  *
- * @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.
+ * `CheckboxProps['size']` is typed from it, so the two list the same values.
+ * Use it to offer a size choice or to check a value that arrives at runtime:
+ * the component adds no size class for a value outside the tuple. These are
+ * element sizes, not the spacing scale in `validSizes`.
  *
  * @example
- * <Kbd.Group>
- *   <Kbd>Ctrl</Kbd>
- *   <Kbd>Shift</Kbd>
- *   <Kbd>P</Kbd>
- * </Kbd.Group>
+ * import { checkboxSizes } from '@allxsmith/bestax-bulma';
  *
- * @example
- * <Kbd.Group separator="then">
- *   <Kbd>G</Kbd>
- *   <Kbd>I</Kbd>
- * </Kbd.Group>
+ * type CheckboxSize = (typeof checkboxSizes)[number];
  */
-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';
+const checkboxSizes = ['small', 'normal', 'medium', 'large'];
 /**
- * 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.
+ * The `Checkbox` component provides a Bulma-styled checkbox input.
  *
  * @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.
+ * @param {CheckboxProps} props - Props for the Checkbox component.
+ * @returns {JSX.Element} The rendered checkbox element.
  *
  * @example
- * <Kbd>Esc</Kbd>
+ * // Basic checkbox
+ * <Checkbox>Accept terms</Checkbox>
  *
  * @example
- * <Kbd label="Command">⌘</Kbd>
+ * // Inside a group
+ * <Checkboxes name="tags" defaultValue={['react']}>
+ *   <Checkbox value="react">React</Checkbox>
+ *   <Checkbox value="vue">Vue</Checkbox>
+ * </Checkboxes>
  */
-const KbdRoot = React.forwardRef(({ className, textColor, bgColor, label, children, ...props }, ref) => {
+const Checkbox = React.forwardRef(({ color, size, className, children, textColor, disabled, name, value, checked, defaultChecked, indeterminate, onChange, ...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,
+    // The input's own ref, merged with the forwarded one. A callback ref's
+    // return value is handed back, so React 19 still runs a cleanup it
+    // returns, as it did when the ref went straight to the input.
+    const inputRef = React.useRef(null);
+    const setRefs = React.useCallback((node) => {
+        inputRef.current = node;
+        if (typeof ref === 'function')
+            return ref(node);
+        if (ref)
+            ref.current = node;
+    }, [ref]);
+    // `indeterminate` is a DOM property with no attribute, so it's set on the
+    // input rather than rendered. A click clears it, so this runs after every
+    // render, not only when the prop changes. Unset, it's left alone, so a
+    // ref that sets the property itself still works. `ownsIndeterminateRef`
+    // remembers that this component set it, so a prop that goes back to unset
+    // clears the dash once instead of leaving it on.
+    const ownsIndeterminateRef = React.useRef(false);
+    useClientLayoutEffect(() => {
+        if (indeterminate !== undefined) {
+            ownsIndeterminateRef.current = true;
+            inputRef.current.indeterminate = indeterminate;
+        }
+        else if (ownsIndeterminateRef.current) {
+            ownsIndeterminateRef.current = false;
+            inputRef.current.indeterminate = false;
+        }
     });
-    const bulmaClasses = usePrefixedClassNames({
-        'is-active': isActive,
+    // Inherit name + selection state from a surrounding <Checkboxes> group.
+    // Local props always win over the group (explicit > implicit).
+    const group = useCheckboxesGroup();
+    const effectiveName = name ?? group?.name;
+    // Group-managed checked state — only when the group is in
+    // controlled/uncontrolled mode (group.value is defined) AND this Checkbox
+    // has a value to compare against. Local `checked` always wins.
+    const groupManaged = group?.value !== undefined && value !== undefined;
+    const groupHas = groupManaged && group.value.includes(String(value));
+    const effectiveChecked = checked !== undefined ? checked : groupManaged ? groupHas : undefined;
+    // When the group manages checked, suppress local defaultChecked to avoid
+    // the controlled/uncontrolled React warning.
+    const effectiveDefaultChecked = groupManaged ? undefined : defaultChecked;
+    const handleChange = React.useCallback((e) => {
+        // The click that got here cleared the mixed state. Put it back now,
+        // since a click that changes no state renders nothing to do it.
+        if (indeterminate !== undefined)
+            e.target.indeterminate = indeterminate;
+        // Local onChange always fires.
+        onChange?.(e);
+        // Dispatch to the group additionally — toggle this value's
+        // membership in the group's array.
+        if (group?.onChange && value !== undefined) {
+            const valStr = String(value);
+            const currentArr = group.value ?? [];
+            const next = e.target.checked
+                ? currentArr.includes(valStr)
+                    ? currentArr
+                    : [...currentArr, valStr]
+                : currentArr.filter(v => v !== valStr);
+            group.onChange(next);
+        }
+    }, [onChange, group, value, indeterminate]);
+    const mainClass = usePrefixedClassNames('styled-checkbox', 'checkbox', {
+        [`is-${color}`]: color && checkboxColors.includes(color),
+        [`is-${size}`]: size && checkboxSizes.includes(size),
     });
-    const linkClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx(Component, { ref: ref, className: linkClasses || undefined, ...rest, ...(Component === 'button' ? { type: buttonType(rest.type) } : {}), children: children }));
+    const checkboxClass = classNames(mainClass, bulmaHelperClasses, className);
+    const checkClass = usePrefixedClassNames('check');
+    const controlLabelClass = usePrefixedClassNames('control-label');
+    return (jsxRuntime.jsxs("label", { className: checkboxClass, children: [jsxRuntime.jsx("input", { ref: setRefs, type: "checkbox", disabled: disabled, name: effectiveName, value: value, checked: effectiveChecked, defaultChecked: effectiveDefaultChecked, onChange: handleChange, ...rest }), jsxRuntime.jsx("span", { className: checkClass }), children && jsxRuntime.jsx("span", { className: controlLabelClass, children: children })] }));
 });
-Link.displayName = 'Link';
+Checkbox.displayName = 'Checkbox';
 
+const validTreeViewSizes = ['small', 'medium', 'large'];
+// Not exported, so they stay out of the public API that `index.ts` re-exports.
+const TreeViewContext = React.createContext(null);
+const TOP = { path: [], hidden: false };
+const BranchContext = React.createContext(TOP);
+/** The box's input lets the row's click toggle it, so a change on its own does nothing. */
+const ignoreChange = () => { };
+/** Whether an `icon` was given something to render. */
+const isGiven = (node) => node !== undefined &&
+    node !== null &&
+    typeof node !== 'boolean' &&
+    node !== '';
 /**
- * The `ListItem` component renders a styled list item (`<li>`) element with Bulma helper class integration.
+ * The `TreeView` component renders a tree of items you browse and pick from, the way a file explorer works: one tab stop, the arrow keys to move, and Right and Left to open and close.
  *
- * @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.
+ * It's the APG Tree View pattern, drawn to look like Bulma's menu. It isn't
+ * for site navigation: items aren't links, and a sidebar whose sections open
+ * and close is `Menu`'s job. The root owns which items are open, through
+ * `expanded`, `defaultExpanded` and `onExpandedChange`.
  *
- * 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. In forced
- * colors its two open sides take the page's color, so it stays open.
+ * `selectionMode` picks one of three trees. With `none`, nothing is picked.
+ * With `single`, one item is, and `selected` says which. With `checkbox`,
+ * each item has a box, a check reaches every enabled item under it, closed
+ * branches included, and a parent with some of its items checked is mixed.
+ * `selected` is read in a `single` tree only, and `checked` in a `checkbox`
+ * tree only. Selection never follows focus.
  *
- * @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.
+ * Disabled items stay reachable from the keys, so a screen reader finds
+ * them. The tree needs a name, from `aria-label` or `aria-labelledby`, and a
+ * development build warns when it has neither.
  *
- * @example
- * <Loader />
+ * @function
+ * @param {TreeViewProps} props - Props for the TreeView component.
+ * @param {React.Ref<HTMLUListElement>} ref - Forwarded ref to the `<ul>`.
+ * @returns {JSX.Element} The rendered tree.
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/treeview/ | APG Tree View Pattern}
  *
  * @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 }));
+ * <TreeView aria-label="Files" selectionMode="single" defaultExpanded={['src']}>
+ *   <TreeView.Item value="src" label="src" icon="folder">
+ *     <TreeView.Item value="src/index.ts" label="index.ts" icon="file" />
+ *   </TreeView.Item>
+ *   <TreeView.Item value="package.json" label="package.json" icon="file" />
+ * </TreeView>
+ */
+const TreeViewRoot = React.forwardRef(function TreeView({ children, selectionMode = 'none', selected, defaultSelected = null, onSelectedChange, checked, defaultChecked = [], onCheckedChange, expanded, defaultExpanded = [], onExpandedChange, size, className, ...props }, ref) {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const engine = useTreeView({
+        mode: selectionMode,
+        selected,
+        defaultSelected,
+        onSelectedChange,
+        checked,
+        defaultChecked,
+        onCheckedChange,
+        expanded,
+        defaultExpanded,
+        onExpandedChange,
+    });
+    const { treeRef } = engine;
+    const setRefs = React.useCallback((node) => {
+        treeRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref, treeRef]);
+    const named = Boolean(rest['aria-label'] || rest['aria-labelledby']);
+    React.useEffect(() => {
+        if (!named) {
+            warnOnce('TreeView:unnamed', '[bestax-bulma] <TreeView> has no accessible name. Pass ' +
+                'aria-label or aria-labelledby, so a screen reader can say what ' +
+                'the tree holds.');
+        }
+    }, [named]);
+    const rootClass = usePrefixedClassNames('tree-view', {
+        [`is-${size}`]: !!size && validTreeViewSizes.includes(size),
+    });
+    // The props are spread first, so the role and the attributes the tree
+    // owns win over anything a caller passes along.
+    return (jsxRuntime.jsx(TreeViewContext.Provider, { value: engine, children: jsxRuntime.jsx(BranchContext.Provider, { value: TOP, children: jsxRuntime.jsx("ul", { ...rest, ref: setRefs, className: classNames(rootClass, bulmaHelperClasses, className), role: "tree", "aria-multiselectable": engine.rendersClosed || undefined, children: children }) }) }));
 });
-Loader.displayName = 'Loader';
-
 /**
- * The `Notification` component is a Bulma-styled alert/message area for providing feedback, warnings, or information to users.
+ * One item in the tree: a row with its chevron, its box, its icon and its label, and, while it's open, a group of the items under it.
  *
  * @function
- * @param {NotificationProps} props - Props for the Notification component.
- * @returns {JSX.Element} The rendered notification element.
- * @see {@link https://bulma.io/documentation/elements/notification/ | Bulma Notification documentation}
- */
-const Notification = ({ className, color, textColor, isLight, hasDelete, onDelete, children, ...props }) => {
-    warnUnstyledColor('Notification', color);
-    /**
-     * Generates Bulma helper classes and separates out remaining props.
-     */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        ...props,
-    });
-    const bulmaClasses = usePrefixedClassNames('notification', {
-        [`is-${color}`]: color && validColors.includes(color),
-        'is-light': isLight,
-        'has-delete': hasDelete,
+ * @param {TreeViewItemProps} props - Props for TreeView.Item.
+ * @param {React.Ref<HTMLLIElement>} ref - Forwarded ref to the `<li>`.
+ * @returns {JSX.Element | null} The rendered item, or nothing under a closed one.
+ */
+const TreeViewItem = React.forwardRef(function TreeViewItem({ value, label, icon, children, hasChildren = false, disabled = false, className, onClick, onKeyDown, onFocus, onBlur, ...props }, ref) {
+    const tree = React.useContext(TreeViewContext);
+    const branch = React.useContext(BranchContext);
+    const labelId = React.useId();
+    const hasItems = React.Children.toArray(children).length > 0;
+    const isParent = hasItems || hasChildren;
+    const open = isParent && !!tree?.isOpen(value);
+    const parent = branch.path[branch.path.length - 1] ?? null;
+    const itemClass = usePrefixedClassNames('tree-view-item');
+    const groupClass = usePrefixedClassNames('tree-view-group');
+    const toggleClass = usePrefixedClassNames('tree-view-toggle');
+    const checkClass = usePrefixedClassNames('tree-view-check');
+    const iconClass = usePrefixedClassNames('tree-view-icon');
+    const labelClass = usePrefixedClassNames('tree-view-label');
+    const register = tree?.register;
+    useClientLayoutEffect(() => {
+        if (!register) {
+            warnOnce('TreeView.Item:outside', '[bestax-bulma] <TreeView.Item> is outside a <TreeView>, so it ' +
+                'renders nothing. Put it inside one.');
+            return undefined;
+        }
+        return register(value, { parent, disabled, isParent });
+    }, [register, value, parent, disabled, isParent]);
+    const setElement = tree?.setElement;
+    const setRefs = React.useCallback((node) => {
+        // Only an item inside a tree renders an element to hand over.
+        setElement(value, node);
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [setElement, value, ref]);
+    const rowRef = React.useRef(null);
+    const toggleRef = React.useRef(null);
+    const childBranch = React.useMemo(() => ({
+        path: [...branch.path, value],
+        hidden: branch.hidden || !open,
+    }), [branch, value, open]);
+    const { selected, checked } = tree?.stateOf(value, branch.path, disabled) ?? {};
+    const rowClass = usePrefixedClassNames('tree-view-row', {
+        'is-selected': selected,
+        'is-disabled': disabled,
     });
-    const deleteClasses = usePrefixedClassNames('delete');
-    const notificationClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsxs("div", { className: notificationClasses, ...rest, children: [hasDelete && (jsxRuntime.jsx("button", { type: "button", className: deleteClasses, onClick: onDelete, "aria-label": "Close notification" })), children] }));
-};
-let notificationId = 0;
-const notificationListeners = new Set();
-let notifications = [];
-// Queue support
-let queuedNotifications = [];
-let currentQueuedNotification = null;
-// The server has nowhere to portal a notification to, and its copy of this
-// module is shared by every request, so server rendering reads an empty list.
-// Hydration reads it too, which keeps the first client render matching the
-// server's.
-const noNotifications = [];
-const getServerNotifications = () => noNotifications;
-// What a container shows right now: the stacked notifications, then the queued
-// one on screen. NotificationContainer renders from this rather than from
-// updates alone, so notifications raised before it mounted still appear. It is
-// replaced rather than mutated, and only when listeners are notified, because
-// useSyncExternalStore needs the same array back between changes. An empty
-// list is `noNotifications` itself, so an empty store reads the same snapshot
-// on the client as on the server, and a notify that leaves nothing showing
-// when nothing was showing doesn't render the container again.
-let visibleNotifications = noNotifications;
-const getVisibleNotifications = () => visibleNotifications;
-const notifyNotificationListeners = () => {
-    const allVisible = [...notifications];
-    if (currentQueuedNotification) {
-        allVisible.push(currentQueuedNotification);
-    }
-    visibleNotifications = allVisible.length > 0 ? allVisible : noNotifications;
-    notificationListeners.forEach(listener => listener([...allVisible]));
-};
-const processQueuedNotification = () => {
-    if (currentQueuedNotification || queuedNotifications.length === 0)
-        return;
-    currentQueuedNotification = queuedNotifications.shift();
-    notifyNotificationListeners();
-};
+    if (!tree)
+        return null;
+    // While it's open the children render in its group. In a checkbox tree
+    // they render while it's closed too, drawing nothing, so a check knows
+    // what's under it.
+    const items = (open || tree.rendersClosed) && (jsxRuntime.jsx(BranchContext.Provider, { value: childBranch, children: children }));
+    if (branch.hidden)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: items });
+    const info = { value, parent, disabled, isParent, open };
+    return (jsxRuntime.jsxs("li", { ...props, ref: setRefs, className: classNames(itemClass, className), role: "treeitem", "aria-labelledby": labelId, "aria-level": branch.path.length + 1, "aria-expanded": isParent ? open : undefined, "aria-disabled": disabled || undefined, "aria-selected": selected, "aria-checked": checked, tabIndex: tree.tabStop === value ? 0 : -1, onKeyDown: event => {
+            onKeyDown?.(event);
+            tree.onKeyDown(event, info);
+        }, onFocus: event => {
+            onFocus?.(event);
+            if (event.target === event.currentTarget) {
+                tree.onFocus(value, event.currentTarget);
+            }
+        }, onBlur: event => {
+            onBlur?.(event);
+            if (event.target === event.currentTarget)
+                tree.onBlur();
+        }, onClick: event => {
+            onClick?.(event);
+            // A click in its row is its own, and so is one on the item itself,
+            // as a test's click on the treeitem is. One in its group belongs
+            // to the item inside it, or to nothing. The chevron's box is on
+            // every row, but it's a chevron only on a parent: on a leaf it's
+            // more of the row.
+            const target = event.target;
+            if (target === event.currentTarget ||
+                rowRef.current.contains(target)) {
+                tree.onClick(event.currentTarget, info, isParent && toggleRef.current.contains(target));
+            }
+        }, children: [jsxRuntime.jsxs("div", { className: rowClass, ref: rowRef, children: [jsxRuntime.jsx("span", { className: toggleClass, "aria-hidden": "true", ref: toggleRef }), checked !== undefined && (jsxRuntime.jsx("span", { className: checkClass, "aria-hidden": "true", onClick: event => {
+                            // A click on the box's label is followed by one on its
+                            // input, and both reach the item. The label's is cancelled,
+                            // so the item toggles once.
+                            if (!(event.target instanceof HTMLInputElement)) {
+                                event.preventDefault();
+                            }
+                        }, children: jsxRuntime.jsx(Checkbox, { tabIndex: -1, checked: checked === true, indeterminate: checked === 'mixed', disabled: disabled, onChange: ignoreChange }) })), isGiven(icon) && (jsxRuntime.jsx("span", { className: iconClass, "aria-hidden": "true", children: typeof icon === 'string' ? jsxRuntime.jsx(Icon, { name: icon }) : icon })), jsxRuntime.jsx("span", { className: labelClass, id: labelId, children: label })] }), open && hasItems ? (jsxRuntime.jsx("ul", { className: groupClass, role: "group", children: items })) : (items)] }));
+});
+TreeViewItem.displayName = 'TreeView.Item';
+const TreeView = withSubComponents(TreeViewRoot, { Item: TreeViewItem }, 'TreeView');
+
 /**
- * Programmatic notification API for showing, closing, and managing notifications.
+ * The `Block` component renders a simple container with Bulma's `.block` class, adding vertical margin between sections of content.
  *
- * @example
- * notification.success('File saved successfully');
- * notification.danger('Something went wrong', { duration: 5000 });
- */
-const notification = {
-    /**
-     * Show a notification with the given options.
-     * @param {NotificationOptions} options - Notification configuration.
-     * @returns {string} The unique ID of the created notification.
-     */
-    show: (options) => {
-        const id = `notification-${++notificationId}`;
-        const instance = { id, options };
-        if (options.queue) {
-            queuedNotifications.push(instance);
-            processQueuedNotification();
-        }
-        else {
-            notifications.push(instance);
-            notifyNotificationListeners();
-        }
-        return id;
-    },
-    /**
-     * Show a success notification.
-     * @param {string|React.ReactNode} message - The message to display.
-     * @param {Partial<NotificationOptions>} [options] - Additional options.
-     * @returns {string} The notification ID.
-     */
-    success: (message, options) => {
-        return notification.show({ message, color: 'success', ...options });
-    },
-    /**
-     * Show a danger notification.
-     * @param {string|React.ReactNode} message - The message to display.
-     * @param {Partial<NotificationOptions>} [options] - Additional options.
-     * @returns {string} The notification ID.
-     */
-    danger: (message, options) => {
-        return notification.show({ message, color: 'danger', ...options });
-    },
-    /**
-     * Show a warning notification.
-     * @param {string|React.ReactNode} message - The message to display.
-     * @param {Partial<NotificationOptions>} [options] - Additional options.
-     * @returns {string} The notification ID.
-     */
-    warning: (message, options) => {
-        return notification.show({ message, color: 'warning', ...options });
-    },
-    /**
-     * Show an info notification.
-     * @param {string|React.ReactNode} message - The message to display.
-     * @param {Partial<NotificationOptions>} [options] - Additional options.
-     * @returns {string} The notification ID.
-     */
-    info: (message, options) => {
-        return notification.show({ message, color: 'info', ...options });
-    },
+ * @function
+ * @param {BlockProps} props - Props for the Block component.
+ * @returns {JSX.Element} The rendered block element.
+ * @see {@link https://bulma.io/documentation/elements/block/ | Bulma Block documentation}
+ */
+const Block = ({ className, textColor, color, bgColor, children, ...props }) => {
     /**
-     * Close a specific notification by ID.
-     * @param {string} id - The notification ID to close.
+     * Generates Bulma helper classes and separates out remaining props.
      */
-    close: (id) => {
-        if (currentQueuedNotification && currentQueuedNotification.id === id) {
-            currentQueuedNotification = null;
-            processQueuedNotification();
-        }
-        else {
-            queuedNotifications = queuedNotifications.filter(n => n.id !== id);
-            notifications = notifications.filter(n => n.id !== id);
-        }
-        notifyNotificationListeners();
-    },
-    /** Close all notifications and clear the queue. */
-    closeAll: () => {
-        notifications = [];
-        queuedNotifications = [];
-        currentQueuedNotification = null;
-        notifyNotificationListeners();
-    },
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames('block');
+    const blockClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("div", { className: blockClasses, ...rest, children: children }));
+};
+
+/**
+ * The `Box` component renders a bordered, padded container with an optional shadow using Bulma's `.box` class.
+ *
+ * @function
+ * @param {BoxProps} props - Props for the Box component.
+ * @returns {JSX.Element} The rendered box element.
+ * @see {@link https://bulma.io/documentation/elements/box/ | Bulma Box documentation}
+ */
+const Box = ({ className, textColor, color, bgColor, hasShadow = true, children, style, ...props }) => {
     /**
-     * Subscribe to notification state changes.
-     * @param {(items: NotificationInstance[]) => void} listener - Callback invoked on changes.
-     * @returns {() => void} Unsubscribe function.
+     * Generates Bulma helper classes and separates out remaining props.
      */
-    subscribe: (listener) => {
-        notificationListeners.add(listener);
-        return () => notificationListeners.delete(listener);
-    },
+    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames('box', {
+        'is-shadowless': !hasShadow,
+    });
+    const boxClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("div", { className: boxClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
+
 /**
- * Whether a notification of this color announces itself as an alert, rather
- * than politely through NotificationContainer's status region.
+ * The `Code` component renders a styled `<code>` element with Bulma helper class integration.
  *
- * @function isUrgentColor
- * @param {NotificationOptions['color']} color - The notification's color.
- * @returns {boolean} True for `danger` and `warning`.
+ * @function
+ * @param {CodeProps} props - Props for the Code component.
+ * @returns {JSX.Element} The rendered code element.
  */
-const isUrgentColor = (color) => color === 'danger' || color === 'warning';
+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'];
 /**
- * Single auto-dismissing notification item used by NotificationContainer.
+ * 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 {{ instance: NotificationInstance; onClose: (id: string) => void; registerMessage: (id: string, node: HTMLElement | null) => void }} props - Component props.
- * @returns {JSX.Element} The rendered notification item.
+ * @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 NotificationItem = ({ instance, onClose, registerMessage }) => {
-    const { message, color, isLight, duration = 3000, hasDelete = true, indefinite = false, pauseOnHover = true, } = instance.options;
-    const [isPaused, setIsPaused] = React.useState(false);
-    const urgent = isUrgentColor(color);
-    const handleClose = React.useCallback(() => {
-        onClose(instance.id);
-    }, [onClose, instance.id]);
-    const messageRef = React.useCallback((node) => {
-        registerMessage(instance.id, node);
-    }, [registerMessage, instance.id]);
-    // Auto-close timer
-    React.useEffect(() => {
-        if (indefinite || duration === 0 || isPaused)
-            return undefined;
-        const timer = setTimeout(handleClose, duration);
-        return () => clearTimeout(timer);
-    }, [duration, indefinite, isPaused, handleClose]);
-    const handleMouseEnter = React.useCallback(() => {
-        if (pauseOnHover)
-            setIsPaused(true);
-    }, [pauseOnHover]);
-    const handleMouseLeave = React.useCallback(() => {
-        if (pauseOnHover)
-            setIsPaused(false);
-    }, [pauseOnHover]);
-    return (jsxRuntime.jsx(Notification, { color: color, isLight: isLight, hasDelete: hasDelete, onDelete: handleClose, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { pointerEvents: 'auto' }, children: urgent ? (jsxRuntime.jsx("span", { role: "alert", "aria-live": "assertive", children: message })) : (jsxRuntime.jsx("span", { ref: messageRef, children: message })) }));
+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 order NotificationContainer renders its stacks in: across the top of the
-// screen, then across the bottom.
-const notificationStackOrder = [
-    'top-left',
-    'top',
-    'top-right',
-    'bottom-left',
-    'bottom',
-    'bottom-right',
-];
+
 /**
- * Inline style that fixes a stack of notifications to its place on the screen.
+ * 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 {NotificationPosition} position - Where the stack sits.
- * @returns {React.CSSProperties} The stack's style.
+ * @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 notificationStackStyle = (position) => {
-    const isBottom = position.startsWith('bottom');
-    const isCenter = position === 'top' || position === 'bottom';
-    const isRight = position.endsWith('right');
-    return {
-        position: 'fixed',
-        zIndex: 100,
-        display: 'flex',
-        flexDirection: isBottom ? 'column-reverse' : 'column',
-        gap: '0.75rem',
-        padding: '1rem',
-        pointerEvents: 'none',
-        maxWidth: '100%',
-        ...(isBottom ? { bottom: 0 } : { top: 0 }),
-        ...(isCenter
-            ? { left: '50%', transform: 'translateX(-50%)', alignItems: 'center' }
-            : isRight
-                ? { right: 0, alignItems: 'flex-end' }
-                : { left: 0, alignItems: 'flex-start' }),
-    };
+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) }));
 };
+
 /**
- * Container component for rendering programmatic notifications.
- * Place once at your app root to enable the notification API. A notification
- * shown with a `position` appears there, and one shown without goes to the
- * container's `position`, so the container renders a stack for each position
- * in use.
- *
- * It keeps a visually hidden `role="status"` live region in the page from the
- * moment it mounts, even while nothing is showing, and announces every
- * notification other than `danger` and `warning` through it, a moment after
- * the notification appears. Those notifications carry no `role="status"` of
- * their own, so `getByRole('status')` finds the region, not the notification.
- * The text stays in the region briefly, even if the notification closes in
- * the meantime, and while both are up the page holds two copies of it. A
- * polite notification that closes before its announcement is written, a
- * moment after it appears, isn't announced at all. `danger` and `warning`
- * notifications announce themselves as assertive alerts. The region is hidden
- * with inline styles, so it needs no stylesheet.
+ * The `Divider` component renders a styled horizontal rule (`<hr>`) element with Bulma helper class integration.
  *
  * @function
- * @param {{ position?: NotificationPosition }} props - Container props.
- * @returns {JSX.Element | null} The rendered notification container, or null on the server and while hydrating.
+ * @param {DividerProps} props - Props for the Divider component.
+ * @returns {JSX.Element} The rendered hr element.
  */
-const NotificationContainer = ({ position = 'top-right' }) => {
-    // Starts from the notifications already showing instead of an empty list,
-    // then follows changes.
-    const items = React.useSyncExternalStore(notification.subscribe, getVisibleNotifications, getServerNotifications);
-    // A portal needs a document, and it has no server-rendered counterpart, so
-    // the server render and the hydrating one render nothing, and the container
-    // portals in from the render after hydration.
-    const isHydrated = useIsHydrated();
-    const resolveContainer = usePortalContainer();
-    // The notifications the status region announces. Danger and warning
-    // announce themselves.
-    const politeItems = React.useMemo(() => items.filter(item => !isUrgentColor(item.options.color)), [items]);
-    // Each polite notification's message element, so the text the region
-    // announces is the text on screen, whatever the message renders.
-    const messageNodesRef = React.useRef(new Map());
-    const registerMessage = React.useCallback((id, node) => {
-        if (node) {
-            messageNodesRef.current.set(id, node);
-        }
-        else {
-            messageNodesRef.current.delete(id);
-        }
-    }, []);
-    // StatusRegion only describes polite notifications that are on screen, and
-    // each of those registered its message element when it mounted. The
-    // fallback is for a notification announced without being rendered, should
-    // the container ever render fewer than it announces: a plain-text message
-    // still says itself, and anything else is skipped.
-    const describe = React.useCallback((item) => {
-        const node = messageNodesRef.current.get(item.id);
-        /* istanbul ignore if: every polite notification on screen registers its message element when it mounts */
-        if (!node) {
-            const { message } = item.options;
-            return typeof message === 'string' ? message : null;
-        }
-        return spokenText(node);
-    }, []);
-    if (typeof document === 'undefined' || !isHydrated) {
-        return null;
-    }
-    const stacks = groupIntoPositionStacks(items, item => item.options.position, position, notificationStackOrder);
-    return reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [stacks.map(stack => (jsxRuntime.jsx("div", { style: notificationStackStyle(stack.position), children: stack.items.map(item => (jsxRuntime.jsx(NotificationItem, { instance: item, onClose: notification.close, registerMessage: registerMessage }, item.id))) }, stack.key))), jsxRuntime.jsx(StatusRegion, { items: politeItems, describe: describe })] }), resolveContainer());
+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 `OrderedList` component renders a styled ordered list (`<ol>`) element with Bulma helper class integration.
+ * The `Emphasis` component renders a styled `<em>` element with Bulma helper class integration.
  *
  * @function
- * @param {OrderedListProps} props - Props for the OrderedList component.
- * @returns {JSX.Element} The rendered ol element.
+ * @param {EmphasisProps} props - Props for the Emphasis component.
+ * @returns {JSX.Element} The rendered em element.
  */
-const OrderedListComponent = ({ className, textColor, bgColor, children, ...props }) => {
-    /**
-     * Generates Bulma helper classes and separates out remaining props.
-     */
+const Emphasis = ({ className, textColor, bgColor, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
     const bulmaClasses = usePrefixedClassNames();
-    const listClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("ol", { className: listClasses || undefined, ...rest, children: children }));
+    const emphasisClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("em", { className: emphasisClasses || undefined, ...rest, children: children }));
 };
-const OrderedList = withSubComponents(OrderedListComponent, { Item: ListItem }, 'OrderedList');
 
 /**
- * The `Pre` component renders a styled `<pre>` element with Bulma helper class integration.
+ * 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 {PreProps} props - Props for the Pre component.
- * @returns {JSX.Element} The rendered pre element.
+ * @param {FigureCaptionProps} props - Props for the FigureCaption component.
+ * @returns {JSX.Element} The rendered figcaption element.
  */
-const Pre = ({ className, textColor, bgColor, children, ...props }) => {
+const FigureCaption = ({ className, textColor, bgColor, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
     const bulmaClasses = usePrefixedClassNames();
-    const preClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("pre", { className: preClasses || undefined, ...rest, children: children }));
+    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');
 
 /**
- * The `Progress` component displays a Bulma-styled progress bar.
+ * 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);
+}
+
+/**
+ * The `IconText` component provides a Bulma-styled horizontal arrangement of one or more `Icon` components and optional text.
  *
  * @function
- * @param {ProgressProps} props - Props for the Progress component.
- * @returns {JSX.Element} The rendered progress bar element.
- * @see {@link https://bulma.io/documentation/elements/progress/ | Bulma Progress documentation}
+ * @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 Progress = ({ className, color, size, value, max, children, ...props }) => {
-    warnUnstyledColor('Progress', color);
+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('progress', {
-        [`is-${color}`]: color && validColors.includes(color),
+    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
+ * @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}
+ */
+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 progressClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("progress", { className: progressClasses, value: value, max: max, ...rest, children: children }));
+    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 }));
 };
 
 /**
- * The `Skeleton` component provides a Bulma-styled skeleton loader for React applications, useful for indicating that content is loading.
+ * 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 {SkeletonProps} props - Props for the Skeleton component.
- * @returns {JSX.Element} The rendered skeleton element.
+ * @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
- * // Block skeleton
- * <Skeleton />
+ * <Kbd.Group>
+ *   <Kbd>Ctrl</Kbd>
+ *   <Kbd>Shift</Kbd>
+ *   <Kbd>P</Kbd>
+ * </Kbd.Group>
  *
  * @example
- * // Multi-line skeleton
- * <Skeleton variant="lines" lines={5} />
+ * <Kbd.Group separator="then">
+ *   <Kbd>G</Kbd>
+ *   <Kbd>I</Kbd>
+ * </Kbd.Group>
  */
-const Skeleton = ({ className, variant = 'block', lines = 3, children, ...props }) => {
-    const linesClass = usePrefixedClassNames('skeleton-lines');
-    const blockClass = usePrefixedClassNames('skeleton-block');
-    if (variant === 'lines') {
-        return (jsxRuntime.jsx("div", { className: classNames(linesClass, className), ...props, children: Array.from({ length: lines }).map((_, i) => (jsxRuntime.jsx("div", {}, i))) }));
-    }
-    return (jsxRuntime.jsx("div", { className: classNames(blockClass, className), ...props, children: children }));
-};
-
+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 `Span` component renders a styled inline `<span>` element with Bulma helper class integration.
+ * 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 {SpanProps} props - Props for the Span component.
- * @returns {JSX.Element} The rendered span element.
+ * @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 Span = ({ className, textColor, bgColor, children, ...props }) => {
-    /**
-     * Generates Bulma helper classes and separates out remaining props.
-     */
+const KbdRoot = React.forwardRef(({ className, textColor, bgColor, label, children, ...props }, ref) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const bulmaClasses = usePrefixedClassNames();
-    const spanClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("span", { className: spanClasses || undefined, ...rest, children: children }));
-};
+    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 `Strong` component renders a styled `<strong>` element with Bulma helper class integration.
+ * The `Link` component renders a styled anchor (`<a>`) element with Bulma helper class integration.
  *
  * @function
- * @param {StrongProps} props - Props for the Strong component.
- * @returns {JSX.Element} The rendered strong element.
+ * @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 Strong = ({ className, textColor, bgColor, children, ...props }) => {
+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();
-    const strongClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("strong", { className: strongClasses || undefined, ...rest, children: children }));
-};
+    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';
 
-const validSubTitleSizes = ['1', '2', '3', '4', '5', '6'];
-const validSubTitleElements = [
-    'h1',
-    'h2',
-    'h3',
-    'h4',
-    'h5',
-    'h6',
-    'p',
-];
 /**
- * The `SubTitle` component renders a Bulma-styled subtitle (secondary heading), supporting sizes `1-6` and rendering as any heading or paragraph element (`h1-h6`, `p`).
+ * The `ListItem` component renders a styled list item (`<li>`) element with Bulma helper class integration.
  *
  * @function
- * @param {SubTitleProps} props - Props for the SubTitle component.
- * @returns {JSX.Element} The rendered subtitle element.
- * @see {@link https://bulma.io/documentation/elements/title/#subtitle | Bulma Subtitle documentation}
+ * @param {ListItemProps} props - Props for the ListItem component.
+ * @returns {JSX.Element} The rendered li element.
  */
-const SubTitle = ({ className, size, as = 'h1', hasSkeleton, textColor, bgColor, children, ...props }) => {
+const ListItem = ({ className, textColor, bgColor, children, ...props }) => {
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
@@ -10469,681 +10932,800 @@ const SubTitle = ({ className, size, as = 'h1', hasSkeleton, textColor, bgColor,
         backgroundColor: bgColor,
         ...props,
     });
-    // Validate 'as' prop at runtime
-    const element = validSubTitleElements.includes(as) ? as : 'h1';
-    // Validate 'size' prop at runtime (numeric sizes normalize to strings)
-    const normalized = size == null ? undefined : String(size);
-    const validSize = normalized && validSubTitleSizes.includes(normalized)
-        ? normalized
-        : undefined;
-    const bulmaClasses = usePrefixedClassNames('subtitle', {
-        [`is-${validSize}`]: validSize,
-        'has-skeleton': hasSkeleton,
-    });
-    const subTitleClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    // Determine the tag based on 'element' and 'validSize'
-    const Tag = element === 'p' ? 'p' : validSize ? `h${validSize}` : element;
-    return (jsxRuntime.jsx(Tag, { className: subTitleClasses, ...rest, children: children }));
+    const bulmaClasses = usePrefixedClassNames();
+    const itemClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("li", { className: itemClasses || undefined, ...rest, children: children }));
 };
 
 /**
- * Thead component for rendering a styled Bulma table header.
+ * The `Loader` component renders Bulma's `.loader`, a small spinning ring for inline loading states.
  *
- * Supports Bulma helper classes for additional styling.
+ * 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. In forced
+ * colors its two open sides take the page's color, so it stays open.
  *
  * @function
- * @param {TheadProps} props - Props for the Thead component.
- * @returns {JSX.Element} The rendered table header element.
- * @see {@link https://bulma.io/documentation/elements/table/#table-head | Bulma Table documentation}
+ * @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 Thead = ({ className, children, ...props }) => {
-    /**
-     * Generates Bulma helper classes and separates out remaining props.
-     */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const theadClasses = classNames(className, bulmaHelperClasses);
-    return (jsxRuntime.jsx("thead", { className: theadClasses || undefined, ...rest, children: children }));
-};
+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';
 
 /**
- * Tbody component for rendering a styled Bulma table body.
- *
- * Supports Bulma helper classes for additional styling.
+ * The `Notification` component is a Bulma-styled alert/message area for providing feedback, warnings, or information to users.
  *
  * @function
- * @param {TbodyProps} props - Props for the Tbody component.
- * @returns {JSX.Element} The rendered table body element.
- * @see {@link https://bulma.io/documentation/elements/table/#table-body | Bulma Table documentation}
+ * @param {NotificationProps} props - Props for the Notification component.
+ * @returns {JSX.Element} The rendered notification element.
+ * @see {@link https://bulma.io/documentation/elements/notification/ | Bulma Notification documentation}
  */
-const Tbody = ({ className, children, ...props }) => {
+const Notification = ({ className, color, textColor, isLight, hasDelete, onDelete, children, ...props }) => {
+    warnUnstyledColor('Notification', color);
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const tbodyClasses = classNames(className, bulmaHelperClasses);
-    return (jsxRuntime.jsx("tbody", { className: tbodyClasses || undefined, ...rest, children: children }));
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames('notification', {
+        [`is-${color}`]: color && validColors.includes(color),
+        'is-light': isLight,
+        'has-delete': hasDelete,
+    });
+    const deleteClasses = usePrefixedClassNames('delete');
+    const notificationClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsxs("div", { className: notificationClasses, ...rest, children: [hasDelete && (jsxRuntime.jsx("button", { type: "button", className: deleteClasses, onClick: onDelete, "aria-label": "Close notification" })), children] }));
+};
+let notificationId = 0;
+const notificationListeners = new Set();
+let notifications = [];
+// Queue support
+let queuedNotifications = [];
+let currentQueuedNotification = null;
+// The server has nowhere to portal a notification to, and its copy of this
+// module is shared by every request, so server rendering reads an empty list.
+// Hydration reads it too, which keeps the first client render matching the
+// server's.
+const noNotifications = [];
+const getServerNotifications = () => noNotifications;
+// What a container shows right now: the stacked notifications, then the queued
+// one on screen. NotificationContainer renders from this rather than from
+// updates alone, so notifications raised before it mounted still appear. It is
+// replaced rather than mutated, and only when listeners are notified, because
+// useSyncExternalStore needs the same array back between changes. An empty
+// list is `noNotifications` itself, so an empty store reads the same snapshot
+// on the client as on the server, and a notify that leaves nothing showing
+// when nothing was showing doesn't render the container again.
+let visibleNotifications = noNotifications;
+const getVisibleNotifications = () => visibleNotifications;
+const notifyNotificationListeners = () => {
+    const allVisible = [...notifications];
+    if (currentQueuedNotification) {
+        allVisible.push(currentQueuedNotification);
+    }
+    visibleNotifications = allVisible.length > 0 ? allVisible : noNotifications;
+    notificationListeners.forEach(listener => listener([...allVisible]));
+};
+const processQueuedNotification = () => {
+    if (currentQueuedNotification || queuedNotifications.length === 0)
+        return;
+    currentQueuedNotification = queuedNotifications.shift();
+    notifyNotificationListeners();
 };
-
 /**
- * Tfoot component for rendering a styled Bulma table footer.
- *
- * Supports Bulma helper classes for additional styling.
+ * Programmatic notification API for showing, closing, and managing notifications.
  *
- * @function
- * @param {TfootProps} props - Props for the Tfoot component.
- * @returns {JSX.Element} The rendered table footer element.
- * @see {@link https://bulma.io/documentation/elements/table/#table-footer | Bulma Table documentation}
+ * @example
+ * notification.success('File saved successfully');
+ * notification.danger('Something went wrong', { duration: 5000 });
  */
-const Tfoot = ({ className, children, ...props }) => {
+const notification = {
     /**
-     * Generates Bulma helper classes and separates out remaining props.
+     * Show a notification with the given options.
+     * @param {NotificationOptions} options - Notification configuration.
+     * @returns {string} The unique ID of the created notification.
+     */
+    show: (options) => {
+        const id = `notification-${++notificationId}`;
+        const instance = { id, options };
+        if (options.queue) {
+            queuedNotifications.push(instance);
+            processQueuedNotification();
+        }
+        else {
+            notifications.push(instance);
+            notifyNotificationListeners();
+        }
+        return id;
+    },
+    /**
+     * Show a success notification.
+     * @param {string|React.ReactNode} message - The message to display.
+     * @param {Partial<NotificationOptions>} [options] - Additional options.
+     * @returns {string} The notification ID.
+     */
+    success: (message, options) => {
+        return notification.show({ message, color: 'success', ...options });
+    },
+    /**
+     * Show a danger notification.
+     * @param {string|React.ReactNode} message - The message to display.
+     * @param {Partial<NotificationOptions>} [options] - Additional options.
+     * @returns {string} The notification ID.
+     */
+    danger: (message, options) => {
+        return notification.show({ message, color: 'danger', ...options });
+    },
+    /**
+     * Show a warning notification.
+     * @param {string|React.ReactNode} message - The message to display.
+     * @param {Partial<NotificationOptions>} [options] - Additional options.
+     * @returns {string} The notification ID.
+     */
+    warning: (message, options) => {
+        return notification.show({ message, color: 'warning', ...options });
+    },
+    /**
+     * Show an info notification.
+     * @param {string|React.ReactNode} message - The message to display.
+     * @param {Partial<NotificationOptions>} [options] - Additional options.
+     * @returns {string} The notification ID.
+     */
+    info: (message, options) => {
+        return notification.show({ message, color: 'info', ...options });
+    },
+    /**
+     * Close a specific notification by ID.
+     * @param {string} id - The notification ID to close.
+     */
+    close: (id) => {
+        if (currentQueuedNotification && currentQueuedNotification.id === id) {
+            currentQueuedNotification = null;
+            processQueuedNotification();
+        }
+        else {
+            queuedNotifications = queuedNotifications.filter(n => n.id !== id);
+            notifications = notifications.filter(n => n.id !== id);
+        }
+        notifyNotificationListeners();
+    },
+    /** Close all notifications and clear the queue. */
+    closeAll: () => {
+        notifications = [];
+        queuedNotifications = [];
+        currentQueuedNotification = null;
+        notifyNotificationListeners();
+    },
+    /**
+     * Subscribe to notification state changes.
+     * @param {(items: NotificationInstance[]) => void} listener - Callback invoked on changes.
+     * @returns {() => void} Unsubscribe function.
      */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const tfootClasses = classNames(className, bulmaHelperClasses);
-    return (jsxRuntime.jsx("tfoot", { className: tfootClasses || undefined, ...rest, children: children }));
+    subscribe: (listener) => {
+        notificationListeners.add(listener);
+        return () => notificationListeners.delete(listener);
+    },
 };
-
 /**
- * The values the table `color` prop accepts, as a readonly tuple.
- *
- * `TableColor` is typed from it, and `Tr`, `Th` and `Td` all take a
- * `TableColor`, so the tuple and those props list the same values. Map over
- * it to build a color picker, or check a value that arrives at runtime before
- * passing it in: the components add no color class for a value outside the
- * tuple.
- *
- * @example
- * import { Tr, Td, validTableColors } from '@allxsmith/bestax-bulma';
+ * Whether a notification of this color announces itself as an alert, rather
+ * than politely through NotificationContainer's status region.
  *
- * <Tr>
- *   {validTableColors.map(color => (
- *     <Td key={color} color={color}>
- *       {color}
- *     </Td>
- *   ))}
- * </Tr>;
+ * @function isUrgentColor
+ * @param {NotificationOptions['color']} color - The notification's color.
+ * @returns {boolean} True for `danger` and `warning`.
  */
-const validTableColors = [
-    'primary',
-    'link',
-    'info',
-    'success',
-    'warning',
-    'danger',
-    'black',
-    'dark',
-    'light',
-    'white',
-];
+const isUrgentColor = (color) => color === 'danger' || color === 'warning';
 /**
- * Td component for rendering a styled Bulma table cell.
- *
- * Supports Bulma color modifiers and helper classes for additional styling.
+ * Single auto-dismissing notification item used by NotificationContainer.
  *
  * @function
- * @param {TdProps} props - Props for the Td component.
- * @returns {JSX.Element} The rendered table cell element.
- * @see {@link https://bulma.io/documentation/elements/table/#table-body | Bulma Table documentation}
+ * @param {{ instance: NotificationInstance; onClose: (id: string) => void; registerMessage: (id: string, node: HTMLElement | null) => void }} props - Component props.
+ * @returns {JSX.Element} The rendered notification item.
  */
-const Td = ({ className, color, children, ...props }) => {
-    const colorClass = usePrefixedClassNames('', {
-        [`is-${color}`]: color && validTableColors.includes(color),
-    });
-    /**
-     * Generates Bulma helper classes and separates out remaining props.
-     */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const tdClasses = classNames(colorClass, className, bulmaHelperClasses);
-    return (jsxRuntime.jsx("td", { className: tdClasses || undefined, ...rest, children: children }));
+const NotificationItem = ({ instance, onClose, registerMessage }) => {
+    const { message, color, isLight, duration = 3000, hasDelete = true, indefinite = false, pauseOnHover = true, } = instance.options;
+    const [isPaused, setIsPaused] = React.useState(false);
+    const urgent = isUrgentColor(color);
+    const handleClose = React.useCallback(() => {
+        onClose(instance.id);
+    }, [onClose, instance.id]);
+    const messageRef = React.useCallback((node) => {
+        registerMessage(instance.id, node);
+    }, [registerMessage, instance.id]);
+    // Auto-close timer
+    React.useEffect(() => {
+        if (indefinite || duration === 0 || isPaused)
+            return undefined;
+        const timer = setTimeout(handleClose, duration);
+        return () => clearTimeout(timer);
+    }, [duration, indefinite, isPaused, handleClose]);
+    const handleMouseEnter = React.useCallback(() => {
+        if (pauseOnHover)
+            setIsPaused(true);
+    }, [pauseOnHover]);
+    const handleMouseLeave = React.useCallback(() => {
+        if (pauseOnHover)
+            setIsPaused(false);
+    }, [pauseOnHover]);
+    return (jsxRuntime.jsx(Notification, { color: color, isLight: isLight, hasDelete: hasDelete, onDelete: handleClose, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { pointerEvents: 'auto' }, children: urgent ? (jsxRuntime.jsx("span", { role: "alert", "aria-live": "assertive", children: message })) : (jsxRuntime.jsx("span", { ref: messageRef, children: message })) }));
 };
-
+// The order NotificationContainer renders its stacks in: across the top of the
+// screen, then across the bottom.
+const notificationStackOrder = [
+    'top-left',
+    'top',
+    'top-right',
+    'bottom-left',
+    'bottom',
+    'bottom-right',
+];
 /**
- * Tr component for rendering a styled Bulma table row.
- *
- * Supports the is-selected modifier and color modifiers.
+ * Inline style that fixes a stack of notifications to its place on the screen.
  *
  * @function
- * @param {TrProps} props - Props for the Tr component.
- * @returns {JSX.Element} The rendered table row element.
- * @see {@link https://bulma.io/documentation/elements/table/#table-row | Bulma Table documentation}
+ * @param {NotificationPosition} position - Where the stack sits.
+ * @returns {React.CSSProperties} The stack's style.
  */
-const Tr = ({ className, isSelected, color, children, ...props }) => {
-    const bulmaClasses = usePrefixedClassNames('', {
-        'is-selected': isSelected,
-        [`is-${color}`]: color && validTableColors.includes(color),
-    });
-    /**
-     * Generates Bulma helper classes and separates out remaining props.
-     */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const trClasses = classNames(bulmaClasses, className, bulmaHelperClasses);
-    return (jsxRuntime.jsx("tr", { className: trClasses || undefined, ...rest, children: children }));
+const notificationStackStyle = (position) => {
+    const isBottom = position.startsWith('bottom');
+    const isCenter = position === 'top' || position === 'bottom';
+    const isRight = position.endsWith('right');
+    return {
+        position: 'fixed',
+        zIndex: 100,
+        display: 'flex',
+        flexDirection: isBottom ? 'column-reverse' : 'column',
+        gap: '0.75rem',
+        padding: '1rem',
+        pointerEvents: 'none',
+        maxWidth: '100%',
+        ...(isBottom ? { bottom: 0 } : { top: 0 }),
+        ...(isCenter
+            ? { left: '50%', transform: 'translateX(-50%)', alignItems: 'center' }
+            : isRight
+                ? { right: 0, alignItems: 'flex-end' }
+                : { left: 0, alignItems: 'flex-start' }),
+    };
 };
-
-const validAlignments = ['left', 'right', 'centered'];
 /**
- * Th component for rendering a styled Bulma table header cell.
- *
- * Supports alignment, width, and color modifiers.
+ * Container component for rendering programmatic notifications.
+ * Place once at your app root to enable the notification API. A notification
+ * shown with a `position` appears there, and one shown without goes to the
+ * container's `position`, so the container renders a stack for each position
+ * in use.
  *
- * @function
- * @param {ThProps} props - Props for the Th component.
- * @returns {JSX.Element} The rendered table header cell element.
- * @see {@link https://bulma.io/documentation/elements/table/#table-head | Bulma Table documentation}
- */
-const Th = ({ className, isAligned, width, color, children, ...props }) => {
-    const bulmaClasses = usePrefixedClassNames('', {
-        [`has-text-${isAligned}`]: isAligned && validAlignments.includes(isAligned),
-        [`is-${color}`]: color && validTableColors.includes(color),
-    });
-    /**
-     * Generates Bulma helper classes and separates out remaining props.
-     */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const thClasses = classNames(bulmaClasses, className, bulmaHelperClasses);
-    return (jsxRuntime.jsx("th", { className: thClasses || undefined, style: width
-            ? { width: typeof width === 'number' ? `${width}px` : width }
-            : undefined, ...rest, children: children }));
-};
-
-/**
- * The `Table` component and its subcomponents provide a highly composable, Bulma-styled table system for React.
+ * It keeps a visually hidden `role="status"` live region in the page from the
+ * moment it mounts, even while nothing is showing, and announces every
+ * notification other than `danger` and `warning` through it, a moment after
+ * the notification appears. Those notifications carry no `role="status"` of
+ * their own, so `getByRole('status')` finds the region, not the notification.
+ * The text stays in the region briefly, even if the notification closes in
+ * the meantime, and while both are up the page holds two copies of it. A
+ * polite notification that closes before its announcement is written, a
+ * moment after it appears, isn't announced at all. `danger` and `warning`
+ * notifications announce themselves as assertive alerts. The region is hidden
+ * with inline styles, so it needs no stylesheet.
  *
  * @function
- * @param {TableProps} props - Props for the Table component.
- * @returns {JSX.Element} The rendered table element.
- * @see {@link https://bulma.io/documentation/elements/table/ | Bulma Table documentation}
+ * @param {{ position?: NotificationPosition }} props - Container props.
+ * @returns {JSX.Element | null} The rendered notification container, or null on the server and while hydrating.
  */
-const TableComponent = ({ className, isBordered, isStriped, isNarrow, isHoverable, isFullwidth, isFullWidth, isResponsive, children, ...props }) => {
-    /**
-     * Generates Bulma helper classes and separates out remaining props.
-     */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const bulmaClasses = usePrefixedClassNames('table', {
-        'is-bordered': isBordered,
-        'is-striped': isStriped,
-        'is-narrow': isNarrow,
-        'is-hoverable': isHoverable,
-        'is-fullwidth': isFullwidth ?? isFullWidth,
-    });
-    const containerClass = usePrefixedClassNames('table-container');
-    const tableClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    const tableElement = (jsxRuntime.jsx("table", { className: tableClasses, ...rest, children: children }));
-    if (isResponsive) {
-        return jsxRuntime.jsx("div", { className: containerClass, children: tableElement });
-    }
-    return tableElement;
-};
-const Table = withSubComponents(TableComponent, {
-    Thead,
-    Tbody,
-    Tfoot,
-    Tr,
-    Th,
-    Td,
-}, 'Table');
+const NotificationContainer = ({ position = 'top-right' }) => {
+    // Starts from the notifications already showing instead of an empty list,
+    // then follows changes.
+    const items = React.useSyncExternalStore(notification.subscribe, getVisibleNotifications, getServerNotifications);
+    // A portal needs a document, and it has no server-rendered counterpart, so
+    // the server render and the hydrating one render nothing, and the container
+    // portals in from the render after hydration.
+    const isHydrated = useIsHydrated();
+    const resolveContainer = usePortalContainer();
+    // The notifications the status region announces. Danger and warning
+    // announce themselves.
+    const politeItems = React.useMemo(() => items.filter(item => !isUrgentColor(item.options.color)), [items]);
+    // Each polite notification's message element, so the text the region
+    // announces is the text on screen, whatever the message renders.
+    const messageNodesRef = React.useRef(new Map());
+    const registerMessage = React.useCallback((id, node) => {
+        if (node) {
+            messageNodesRef.current.set(id, node);
+        }
+        else {
+            messageNodesRef.current.delete(id);
+        }
+    }, []);
+    // StatusRegion only describes polite notifications that are on screen, and
+    // each of those registered its message element when it mounted. The
+    // fallback is for a notification announced without being rendered, should
+    // the container ever render fewer than it announces: a plain-text message
+    // still says itself, and anything else is skipped.
+    const describe = React.useCallback((item) => {
+        const node = messageNodesRef.current.get(item.id);
+        /* istanbul ignore if: every polite notification on screen registers its message element when it mounts */
+        if (!node) {
+            const { message } = item.options;
+            return typeof message === 'string' ? message : null;
+        }
+        return spokenText(node);
+    }, []);
+    if (typeof document === 'undefined' || !isHydrated) {
+        return null;
+    }
+    const stacks = groupIntoPositionStacks(items, item => item.options.position, position, notificationStackOrder);
+    return reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [stacks.map(stack => (jsxRuntime.jsx("div", { style: notificationStackStyle(stack.position), children: stack.items.map(item => (jsxRuntime.jsx(NotificationItem, { instance: item, onClose: notification.close, registerMessage: registerMessage }, item.id))) }, stack.key))), jsxRuntime.jsx(StatusRegion, { items: politeItems, describe: describe })] }), resolveContainer());
+};
 
-const validTagColors = [
-    'primary',
-    'link',
-    'info',
-    'success',
-    'warning',
-    'danger',
-    'black',
-    'dark',
-    'light',
-    'white',
-];
-const validTagSizes = ['normal', 'medium', 'large'];
 /**
- * The `Tag` component renders a Bulma-styled label or badge.
+ * The `OrderedList` component renders a styled ordered list (`<ol>`) element with Bulma helper class integration.
  *
  * @function
- * @param {TagProps} props - Props for the Tag component.
- * @returns {JSX.Element} The rendered tag element.
- * @see {@link https://bulma.io/documentation/elements/tag/ | Bulma Tag documentation}
+ * @param {OrderedListProps} props - Props for the OrderedList component.
+ * @returns {JSX.Element} The rendered ol element.
  */
-const Tag = ({ className, color, size, isLight, isRounded, isDelete, isHoverable, onDelete, children, ...props }) => {
+const OrderedListComponent = ({ className, textColor, bgColor, children, ...props }) => {
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const bulmaClasses = usePrefixedClassNames('tag', {
-        [`is-${color}`]: color && validTagColors.includes(color),
-        [`is-${size}`]: size && size !== 'normal' && validTagSizes.includes(size),
-        'is-light': isLight,
-        'is-rounded': isRounded,
-        'is-delete': isDelete,
-        'is-hoverable': isHoverable,
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
     });
-    const tagClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    if (isDelete) {
-        return (jsxRuntime.jsx("button", { className: tagClasses, onClick: onDelete, ...rest, "aria-label": rest['aria-label'] || 'Delete tag', type: buttonType(rest.type) }));
-    }
-    return (jsxRuntime.jsx("span", { className: tagClasses, ...rest, children: children }));
+    const bulmaClasses = usePrefixedClassNames();
+    const listClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("ol", { className: listClasses || undefined, ...rest, children: children }));
 };
+const OrderedList = withSubComponents(OrderedListComponent, { Item: ListItem }, 'OrderedList');
 
-const validTagsSizes = ['medium', 'large'];
 /**
- * The `Tags` component groups multiple `Tag` components together in a Bulma-styled container that wraps onto multiple lines by default.
+ * The `Pre` component renders a styled `<pre>` element with Bulma helper class integration.
  *
  * @function
- * @param {TagsProps} props - Props for the Tags component.
- * @returns {JSX.Element} The rendered tags container.
- * @see {@link https://bulma.io/documentation/elements/tag/#list-of-tags | Bulma Tags documentation}
+ * @param {PreProps} props - Props for the Pre component.
+ * @returns {JSX.Element} The rendered pre element.
  */
-const TagsComponent = ({ className, hasAddons, 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars -- accepted for backwards compatibility, deprecated no-op (no `are-multiline` CSS ships)
-isMultiline, size, children, ...props }) => {
-    /**
-     * Generates Bulma helper classes and separates out remaining props.
-     */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const bulmaClasses = usePrefixedClassNames('tags', {
-        'has-addons': hasAddons,
-        [`are-${size}`]: size && validTagsSizes.includes(size),
+const Pre = ({ className, textColor, bgColor, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
     });
-    const tagsClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("div", { className: tagsClasses, ...rest, children: children }));
+    const bulmaClasses = usePrefixedClassNames();
+    const preClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("pre", { className: preClasses || undefined, ...rest, children: children }));
 };
-const Tags = withSubComponents(TagsComponent, { Tag }, 'Tags');
 
 /**
- * The `UnorderedList` component renders a styled unordered list (`<ul>`) element with Bulma helper class integration.
+ * The `Progress` component displays a Bulma-styled progress bar.
  *
  * @function
- * @param {UnorderedListProps} props - Props for the UnorderedList component.
- * @returns {JSX.Element} The rendered ul element.
+ * @param {ProgressProps} props - Props for the Progress component.
+ * @returns {JSX.Element} The rendered progress bar element.
+ * @see {@link https://bulma.io/documentation/elements/progress/ | Bulma Progress documentation}
  */
-const UnorderedListComponent = ({ className, textColor, bgColor, children, ...props }) => {
+const Progress = ({ className, color, size, value, max, children, ...props }) => {
+    warnUnstyledColor('Progress', color);
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
     const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
         ...props,
     });
-    const bulmaClasses = usePrefixedClassNames();
-    const listClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("ul", { className: listClasses || undefined, ...rest, children: children }));
+    const bulmaClasses = usePrefixedClassNames('progress', {
+        [`is-${color}`]: color && validColors.includes(color),
+        [`is-${size}`]: size,
+    });
+    const progressClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("progress", { className: progressClasses, value: value, max: max, ...rest, children: children }));
 };
-const UnorderedList = withSubComponents(UnorderedListComponent, { Item: ListItem }, 'UnorderedList');
 
-const FieldContext = React.createContext(false);
-const ControlContext = React.createContext(false);
-/**
- * Hook to detect if the component is inside a Field wrapper.
- * Form components use this to skip rendering their own Field.
- */
-const useInsideField = () => React.useContext(FieldContext);
-/**
- * Hook to detect if the component is inside a Control wrapper.
- * Form components use this to skip rendering their own Control.
- */
-const useInsideControl = () => React.useContext(ControlContext);
-/** Provider for Field context — used internally by Field component. */
-const FieldProvider = FieldContext.Provider;
-/** Provider for Control context — used internally by Control component. */
-const ControlProvider = ControlContext.Provider;
-// Each Field-shaping prop, with what takes its place on a `Field` the caller
-// wraps around the `Control`. `message` needs nothing there, because the
-// wrapper still renders it inside `Field > Control`. The other Field-level
-// props (`labelSize`, `labelProps`, `messageColor`) change nothing unless a
-// `label` or `message` renders, so on their own they keep no `Field`.
-// `bare-control.test.tsx` holds this list to what each wrapper hands its
-// `Field` and to which props change its markup, so a new Field-level prop
-// fails there until it is sorted into one group or the other.
-const FIELD_SHAPING = [
-    ['label', 'label'],
-    ['message', undefined],
-    ['horizontal', 'horizontal'],
-    ['fieldClassName', 'className (for fieldClassName)'],
-];
-/** `a`, `a and b`, `a, b and c`. */
-const listOf = (items) => items.length > 1
-    ? `${items.slice(0, -1).join(', ')} and ${items[items.length - 1]}`
-    : items[0];
 /**
- * Whether a convenience form wrapper renders a `Field` of its own (#905).
- * Never inside an outer `Field`. Inside a `Control` with no `Field` around
- * it, a `Field` of its own would put a `.field` inside the `.control`, where
- * Bulma's control styles break (its icon rules are sibling selectors on the
- * input). So it renders one there only when a prop that shapes the `Field`'s
- * markup is set (`label`, `message`, `horizontal`, `fieldClassName`), keeping
- * the markup it always had, and warns in development that the fix is a
- * `Field` around that `Control`. A prop counts when it is truthy, the same
- * test that decides whether it changes the `Field`'s output.
- * Internal; not part of the public API.
+ * The `Skeleton` component provides a Bulma-styled skeleton loader for React applications, useful for indicating that content is loading.
+ *
+ * @function
+ * @param {SkeletonProps} props - Props for the Skeleton component.
+ * @returns {JSX.Element} The rendered skeleton element.
+ *
+ * @example
+ * // Block skeleton
+ * <Skeleton />
+ *
+ * @example
+ * // Multi-line skeleton
+ * <Skeleton variant="lines" lines={5} />
  */
-const rendersOwnField = (component, options) => {
-    if (options.insideField)
-        return false;
-    if (!options.insideControl)
-        return true;
-    const held = FIELD_SHAPING.filter(([prop]) => options[prop]);
-    if (held.length === 0)
-        return false;
-    const names = held.map(([prop]) => prop);
-    const moved = held
-        .map(([, onField]) => onField)
-        .filter((onField) => onField !== undefined);
-    warnOnce(`${component}:Field-in-bare-Control:${names.join('+')}`, `[bestax-bulma] <${component} ${names.join(' ')}> inside a <Control> ` +
-        `with no <Field> around it renders its own <Field> for ` +
-        `${names.length > 1 ? 'those props' : 'that prop'}, which puts a ` +
-        `.field inside the .control, a nesting Bulma's styles are not ` +
-        `written for. Wrap the <Control> in a <Field> instead` +
-        (moved.length > 0 ? `, and set ${listOf(moved)} on that <Field>.` : '.'));
-    return true;
-};
-// Each Control-level prop, with what takes its place on the `Control` the
-// caller wrapped around the wrapper. `bare-control.test.tsx` holds this to
-// what each wrapper hands its own `Control`, so a new Control-level prop
-// fails there until it is added here and passed to `rendersOwnControl`.
-const ON_CONTROL = {
-    isLoading: 'isLoading',
-    iconLeft: 'iconLeft',
-    iconLeftName: 'iconLeftName',
-    iconLeftSize: 'iconLeftSize',
-    iconRight: 'iconRight',
-    iconRightName: 'iconRightName',
-    iconRightSize: 'iconRightSize',
-    hasIconsLeft: 'hasIconsLeft',
-    hasIconsRight: 'hasIconsRight',
-    isExpanded: 'isExpanded',
-    controlSize: 'size (for controlSize)',
-    controlClassName: 'className (for controlClassName)',
+const Skeleton = ({ className, variant = 'block', lines = 3, children, ...props }) => {
+    const linesClass = usePrefixedClassNames('skeleton-lines');
+    const blockClass = usePrefixedClassNames('skeleton-block');
+    if (variant === 'lines') {
+        return (jsxRuntime.jsx("div", { className: classNames(linesClass, className), ...props, children: Array.from({ length: lines }).map((_, i) => (jsxRuntime.jsx("div", {}, i))) }));
+    }
+    return (jsxRuntime.jsx("div", { className: classNames(blockClass, className), ...props, children: children }));
 };
+
 /**
- * Whether a convenience form wrapper renders a `Control` of its own (#921):
- * only outside one. Inside a `Control` it renders none, so the props it
- * would have handed its own do nothing there, and it warns in development,
- * naming them and saying to set them on that `Control`. An `inline` picker
- * renders none in either place, so it drops them inside a `Control` or not,
- * and its warning says so without pointing at a `Control`. A wrapper passes
- * only the props it hands its own `Control`, as the caller gave them, so a
- * default the wrapper fills in itself never warns. A prop counts when it is
- * truthy, since a falsy one would change nothing on a `Control` either.
- * `iconLeftSize` and `hasIconsLeft` show nothing on a `Control` without a
- * glyph, so when they move and the caller chose no left icon, the advice
- * names the wrapper's default glyph too, and following it draws what the
- * wrapper's own `Control` did.
- * Internal; not part of the public API.
+ * The `Span` component renders a styled inline `<span>` element with Bulma helper class integration.
+ *
+ * @function
+ * @param {SpanProps} props - Props for the Span component.
+ * @returns {JSX.Element} The rendered span element.
  */
-const rendersOwnControl = (component, options) => {
-    if (!options.inline && !options.insideControl)
-        return true;
-    const held = Object.keys(ON_CONTROL).filter(prop => options[prop]);
-    if (held.length === 0)
-        return false;
-    const names = held.join(' ');
-    const doNothing = held.length > 1 ? 'those props do' : 'that prop does';
-    let message;
-    if (options.inline) {
-        message =
-            `[bestax-bulma] <${component} inline ${names}> renders no <Control> ` +
-                `in inline mode, inside a <Control> or not, so ${doNothing} ` +
-                `nothing. Leave ${held.length > 1 ? 'them' : 'it'} out of an ` +
-                `inline picker.`;
-    }
-    else {
-        const toSet = held.map(prop => ON_CONTROL[prop]);
-        const needsGlyph = (options.iconLeftSize || options.hasIconsLeft) &&
-            !options.iconLeft &&
-            options.iconLeftName === undefined &&
-            options.defaultIconLeftName;
-        if (needsGlyph) {
-            toSet.push(`iconLeftName="${options.defaultIconLeftName}" (its default icon)`);
-        }
-        message =
-            `[bestax-bulma] <${component} ${names}> inside a <Control> renders ` +
-                `no <Control> of its own, so ${doNothing} nothing there. Set ` +
-                `${listOf(toSet)} on that <Control> instead.`;
-    }
-    // Keyed by the message itself: the props named do not settle the advice
-    // (an empty `iconLeftName` and an unset one name the same props), so two
-    // calls that would advise differently must not share a key.
-    warnOnce(message, message);
-    return false;
+const Span = ({ 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 spanClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("span", { className: spanClasses || undefined, ...rest, children: children }));
 };
-const FieldLabelIdContext = React.createContext(undefined);
+
 /**
- * The id a labeled Field wants its single composed control to adopt (#495).
- * `undefined` outside a Field, in unlabeled/grouped/addons Fields, or when the
- * user took over the association with an explicit `labelProps.htmlFor`.
- * Consumed through `useFieldLabelTarget` by the single-control bases
- * (InputBase, SelectBase, TextAreaBase, and the date and time picker bases
- * unless inline, #968) and, through `useAutoLabelId`, by the convenience
- * inputs that render an input of their own (#939). Read it only through
- * those, which report what they take: a control that read it directly would
- * report nothing and lose its label (#1004), and
- * `__tests__/field-label-readers.test.ts` fails on one. Internal; not part of
- * the public API.
+ * The `Strong` component renders a styled `<strong>` element with Bulma helper class integration.
+ *
+ * @function
+ * @param {StrongProps} props - Props for the Strong component.
+ * @returns {JSX.Element} The rendered strong element.
  */
-const useFieldLabelId = () => React.useContext(FieldLabelIdContext);
-/** Provider for the Field label-target id — used internally by Field. */
-const FieldLabelIdProvider = FieldLabelIdContext.Provider;
-const FieldLabelElementIdContext = React.createContext(undefined);
+const Strong = ({ className, textColor, bgColor, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames();
+    const strongClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("strong", { className: strongClasses || undefined, ...rest, children: children }));
+};
+
+const validSubTitleSizes = ['1', '2', '3', '4', '5', '6'];
+const validSubTitleElements = [
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'p',
+];
 /**
- * The id of a labeled Field's own `<label>`, for a group control (Radios,
- * Checkboxes, Rate, DateRangeInput and DateRangeInputBase) to point
- * `aria-labelledby` at, since a group cannot take the label's `htmlFor`
- * (#939, #1005). Set under the same conditions as
- * {@link useFieldLabelId}. Consumed through `useAutoLabelledBy`.
- * Internal; not part of the public API.
+ * The `SubTitle` component renders a Bulma-styled subtitle (secondary heading), supporting sizes `1-6` and rendering as any heading or paragraph element (`h1-h6`, `p`).
+ *
+ * @function
+ * @param {SubTitleProps} props - Props for the SubTitle component.
+ * @returns {JSX.Element} The rendered subtitle element.
+ * @see {@link https://bulma.io/documentation/elements/title/#subtitle | Bulma Subtitle documentation}
  */
-const useFieldLabelElementId = () => React.useContext(FieldLabelElementIdContext);
-/** Provider for the Field label's own id, used internally by Field. */
-const FieldLabelElementIdProvider = FieldLabelElementIdContext.Provider;
-const FieldLabelForContext = React.createContext({});
+const SubTitle = ({ className, size, as = 'h1', hasSkeleton, textColor, bgColor, children, ...props }) => {
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    // Validate 'as' prop at runtime
+    const element = validSubTitleElements.includes(as) ? as : 'h1';
+    // Validate 'size' prop at runtime (numeric sizes normalize to strings)
+    const normalized = size == null ? undefined : String(size);
+    const validSize = normalized && validSubTitleSizes.includes(normalized)
+        ? normalized
+        : undefined;
+    const bulmaClasses = usePrefixedClassNames('subtitle', {
+        [`is-${validSize}`]: validSize,
+        'has-skeleton': hasSkeleton,
+    });
+    const subTitleClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    // Determine the tag based on 'element' and 'validSize'
+    const Tag = element === 'p' ? 'p' : validSize ? `h${validSize}` : element;
+    return (jsxRuntime.jsx(Tag, { className: subTitleClasses, ...rest, children: children }));
+};
+
 /**
- * The nearest labeled Field's `<label>`: what it points `htmlFor` at, the id
- * it generated or the caller's own `labelProps.htmlFor`, and the id the label
- * renders with, if it has one. An unlabeled Field passes both through
- * together, so a control in the inner Field of a horizontal layout can tell
- * the outer label names it, and point at that label by its id, as a range
- * Slider's thumbs (#981) and Autocomplete's and Taginput's suggestion lists
- * (#998, #1082) do. The
- * `htmlFor` is only ever compared with a control's own id, never adopted, so
- * it hands out no id for a control. It keeps the generated id after the
- * label drops a `for` nothing took (#1004), which no control's id matches
- * then, so the value does not change under the content that reported it.
- * The `id` is set only while that label renders with it. Unlike
- * {@link useFieldLabelId}, it is set in a `grouped` or `hasAddons` Field
- * too, so a label wired by hand names the control its `for` picks in those
- * rows as well. Consumed through `useAutoLabelId`.
- * Internal; not part of the public API.
+ * Thead component for rendering a styled Bulma table header.
+ *
+ * Supports Bulma helper classes for additional styling.
+ *
+ * @function
+ * @param {TheadProps} props - Props for the Thead component.
+ * @returns {JSX.Element} The rendered table header element.
+ * @see {@link https://bulma.io/documentation/elements/table/#table-head | Bulma Table documentation}
  */
-const useFieldLabelFor = () => React.useContext(FieldLabelForContext);
-/** Provider for the Field label's `htmlFor` target and id, used internally by Field. */
-const FieldLabelForProvider = FieldLabelForContext.Provider;
-const FieldLabelForReportContext = React.createContext(undefined);
+const Thead = ({ className, children, ...props }) => {
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const theadClasses = classNames(className, bulmaHelperClasses);
+    return (jsxRuntime.jsx("thead", { className: theadClasses || undefined, ...rest, children: children }));
+};
+
 /**
- * Tells the nearest labeled Field that this content took its generated id
- * while `takesFor` is true (#1004). Once the Field's content has mounted, its
- * label keeps the generated `for` only while something has said so, so the
- * label renders none over a group, a `Checkbox`, `Radio` or `Switch`, an
- * inner `Field`, an input with an `id` of its own, markup of your own, or
- * nothing at all. Anything that puts the id from {@link useFieldLabelId} on
- * an element has to say so, or the label drops the `for` that names it, and
- * content that takes no id has nothing to do. Set under the same conditions
- * as {@link useFieldLabelId}, so a label wired by hand and a `grouped` or
- * `hasAddons` Field hear nothing. It reports from a layout effect, which a
- * server never runs and a hydrating client runs only after its first render,
- * so that render writes the `for` the way the server did.
- * Internal; not part of the public API.
+ * Tbody component for rendering a styled Bulma table body.
+ *
+ * Supports Bulma helper classes for additional styling.
+ *
+ * @function
+ * @param {TbodyProps} props - Props for the Tbody component.
+ * @returns {JSX.Element} The rendered table body element.
+ * @see {@link https://bulma.io/documentation/elements/table/#table-body | Bulma Table documentation}
  */
-const useReportFieldLabelFor = (takesFor) => {
-    const report = React.useContext(FieldLabelForReportContext);
-    useClientLayoutEffect(() => (takesFor ? report?.() : undefined), [report, takesFor]);
+const Tbody = ({ className, children, ...props }) => {
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const tbodyClasses = classNames(className, bulmaHelperClasses);
+    return (jsxRuntime.jsx("tbody", { className: tbodyClasses || undefined, ...rest, children: children }));
 };
-/** Provider for the labeled Field's report function, used internally by Field. */
-const FieldLabelForReportProvider = FieldLabelForReportContext.Provider;
+
 /**
- * The id a control with one input of its own renders with: the caller's
- * `id` when one arrived, otherwise the one a labeled Field offers (#495),
- * unless it has no input to put it on (`hasInput: false`, as in an `inline`
- * picker). It also tells that Field when it took the Field's id, through
- * {@link useReportFieldLabelFor}, so the label keeps its `for` (#1004). Used
- * by the single-control bases. Internal; not part of the public API.
+ * Tfoot component for rendering a styled Bulma table footer.
+ *
+ * Supports Bulma helper classes for additional styling.
+ *
+ * @function
+ * @param {TfootProps} props - Props for the Tfoot component.
+ * @returns {JSX.Element} The rendered table footer element.
+ * @see {@link https://bulma.io/documentation/elements/table/#table-footer | Bulma Table documentation}
  */
-const useFieldLabelTarget = (id, hasInput = true) => {
-    const fieldLabelId = useFieldLabelId();
-    const target = id ?? (hasInput ? fieldLabelId : undefined);
-    useReportFieldLabelFor(fieldLabelId !== undefined && target === fieldLabelId);
-    return target;
+const Tfoot = ({ className, children, ...props }) => {
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const tfootClasses = classNames(className, bulmaHelperClasses);
+    return (jsxRuntime.jsx("tfoot", { className: tfootClasses || undefined, ...rest, children: children }));
 };
-const RadiosContext = React.createContext(undefined);
-const CheckboxesContext = React.createContext(undefined);
+
 /**
- * Hook to read the full surrounding `<Radios>` group context (name + selection).
- * Returns `undefined` when not inside a `<Radios>` group.
+ * The values the table `color` prop accepts, as a readonly tuple.
+ *
+ * `TableColor` is typed from it, and `Tr`, `Th` and `Td` all take a
+ * `TableColor`, so the tuple and those props list the same values. Map over
+ * it to build a color picker, or check a value that arrives at runtime before
+ * passing it in: the components add no color class for a value outside the
+ * tuple.
+ *
+ * @example
+ * import { Tr, Td, validTableColors } from '@allxsmith/bestax-bulma';
+ *
+ * <Tr>
+ *   {validTableColors.map(color => (
+ *     <Td key={color} color={color}>
+ *       {color}
+ *     </Td>
+ *   ))}
+ * </Tr>;
  */
-const useRadiosGroup = () => React.useContext(RadiosContext);
+const validTableColors = [
+    'primary',
+    'link',
+    'info',
+    'success',
+    'warning',
+    'danger',
+    'black',
+    'dark',
+    'light',
+    'white',
+];
 /**
- * Hook to read the full surrounding `<Checkboxes>` group context.
- * Returns `undefined` when not inside a `<Checkboxes>` group.
+ * Td component for rendering a styled Bulma table cell.
+ *
+ * Supports Bulma color modifiers and helper classes for additional styling.
+ *
+ * @function
+ * @param {TdProps} props - Props for the Td component.
+ * @returns {JSX.Element} The rendered table cell element.
+ * @see {@link https://bulma.io/documentation/elements/table/#table-body | Bulma Table documentation}
+ */
+const Td = ({ className, color, children, ...props }) => {
+    const colorClass = usePrefixedClassNames('', {
+        [`is-${color}`]: color && validTableColors.includes(color),
+    });
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const tdClasses = classNames(colorClass, className, bulmaHelperClasses);
+    return (jsxRuntime.jsx("td", { className: tdClasses || undefined, ...rest, children: children }));
+};
+
+/**
+ * Tr component for rendering a styled Bulma table row.
+ *
+ * Supports the is-selected modifier and color modifiers.
+ *
+ * @function
+ * @param {TrProps} props - Props for the Tr component.
+ * @returns {JSX.Element} The rendered table row element.
+ * @see {@link https://bulma.io/documentation/elements/table/#table-row | Bulma Table documentation}
  */
-const useCheckboxesGroup = () => React.useContext(CheckboxesContext);
-/** Provider for the Radios group context — used internally by Radios. */
-const RadiosProvider = RadiosContext.Provider;
-/** Provider for the Checkboxes group context — used internally by Checkboxes. */
-const CheckboxesProvider = CheckboxesContext.Provider;
+const Tr = ({ className, isSelected, color, children, ...props }) => {
+    const bulmaClasses = usePrefixedClassNames('', {
+        'is-selected': isSelected,
+        [`is-${color}`]: color && validTableColors.includes(color),
+    });
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const trClasses = classNames(bulmaClasses, className, bulmaHelperClasses);
+    return (jsxRuntime.jsx("tr", { className: trClasses || undefined, ...rest, children: children }));
+};
 
+const validAlignments = ['left', 'right', 'centered'];
 /**
- * The values the Checkbox `color` prop accepts, as a readonly tuple.
+ * Th component for rendering a styled Bulma table header cell.
  *
- * `CheckboxProps['color']` is typed from it, so the two list the same values.
- * Map over it to build a color picker, or check a value that arrives at
- * runtime before passing it in: the component adds no color class for a value
- * outside the tuple.
+ * Supports alignment, width, and color modifiers.
  *
- * @example
- * import { Checkbox, checkboxColors } from '@allxsmith/bestax-bulma';
+ * @function
+ * @param {ThProps} props - Props for the Th component.
+ * @returns {JSX.Element} The rendered table header cell element.
+ * @see {@link https://bulma.io/documentation/elements/table/#table-head | Bulma Table documentation}
+ */
+const Th = ({ className, isAligned, width, color, children, ...props }) => {
+    const bulmaClasses = usePrefixedClassNames('', {
+        [`has-text-${isAligned}`]: isAligned && validAlignments.includes(isAligned),
+        [`is-${color}`]: color && validTableColors.includes(color),
+    });
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const thClasses = classNames(bulmaClasses, className, bulmaHelperClasses);
+    return (jsxRuntime.jsx("th", { className: thClasses || undefined, style: width
+            ? { width: typeof width === 'number' ? `${width}px` : width }
+            : undefined, ...rest, children: children }));
+};
+
+/**
+ * The `Table` component and its subcomponents provide a highly composable, Bulma-styled table system for React.
  *
- * checkboxColors.map(color => (
- *   <Checkbox key={color} color={color}>
- *     {color}
- *   </Checkbox>
- * ));
+ * @function
+ * @param {TableProps} props - Props for the Table component.
+ * @returns {JSX.Element} The rendered table element.
+ * @see {@link https://bulma.io/documentation/elements/table/ | Bulma Table documentation}
  */
-const checkboxColors = [
+const TableComponent = ({ className, isBordered, isStriped, isNarrow, isHoverable, isFullwidth, isFullWidth, isResponsive, children, ...props }) => {
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const bulmaClasses = usePrefixedClassNames('table', {
+        'is-bordered': isBordered,
+        'is-striped': isStriped,
+        'is-narrow': isNarrow,
+        'is-hoverable': isHoverable,
+        'is-fullwidth': isFullwidth ?? isFullWidth,
+    });
+    const containerClass = usePrefixedClassNames('table-container');
+    const tableClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    const tableElement = (jsxRuntime.jsx("table", { className: tableClasses, ...rest, children: children }));
+    if (isResponsive) {
+        return jsxRuntime.jsx("div", { className: containerClass, children: tableElement });
+    }
+    return tableElement;
+};
+const Table = withSubComponents(TableComponent, {
+    Thead,
+    Tbody,
+    Tfoot,
+    Tr,
+    Th,
+    Td,
+}, 'Table');
+
+const validTagColors = [
     'primary',
     'link',
     'info',
     'success',
     'warning',
     'danger',
+    'black',
+    'dark',
+    'light',
+    'white',
 ];
+const validTagSizes = ['normal', 'medium', 'large'];
 /**
- * The values the Checkbox `size` prop accepts, as a readonly tuple.
- *
- * `CheckboxProps['size']` is typed from it, so the two list the same values.
- * Use it to offer a size choice or to check a value that arrives at runtime:
- * the component adds no size class for a value outside the tuple. These are
- * element sizes, not the spacing scale in `validSizes`.
- *
- * @example
- * import { checkboxSizes } from '@allxsmith/bestax-bulma';
+ * The `Tag` component renders a Bulma-styled label or badge.
  *
- * type CheckboxSize = (typeof checkboxSizes)[number];
+ * @function
+ * @param {TagProps} props - Props for the Tag component.
+ * @returns {JSX.Element} The rendered tag element.
+ * @see {@link https://bulma.io/documentation/elements/tag/ | Bulma Tag documentation}
  */
-const checkboxSizes = ['small', 'normal', 'medium', 'large'];
+const Tag = ({ className, color, size, isLight, isRounded, isDelete, isHoverable, onDelete, children, ...props }) => {
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const bulmaClasses = usePrefixedClassNames('tag', {
+        [`is-${color}`]: color && validTagColors.includes(color),
+        [`is-${size}`]: size && size !== 'normal' && validTagSizes.includes(size),
+        'is-light': isLight,
+        'is-rounded': isRounded,
+        'is-delete': isDelete,
+        'is-hoverable': isHoverable,
+    });
+    const tagClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    if (isDelete) {
+        return (jsxRuntime.jsx("button", { className: tagClasses, onClick: onDelete, ...rest, "aria-label": rest['aria-label'] || 'Delete tag', type: buttonType(rest.type) }));
+    }
+    return (jsxRuntime.jsx("span", { className: tagClasses, ...rest, children: children }));
+};
+
+const validTagsSizes = ['medium', 'large'];
 /**
- * The `Checkbox` component provides a Bulma-styled checkbox input.
+ * The `Tags` component groups multiple `Tag` components together in a Bulma-styled container that wraps onto multiple lines by default.
  *
  * @function
- * @param {CheckboxProps} props - Props for the Checkbox component.
- * @returns {JSX.Element} The rendered checkbox element.
- *
- * @example
- * // Basic checkbox
- * <Checkbox>Accept terms</Checkbox>
+ * @param {TagsProps} props - Props for the Tags component.
+ * @returns {JSX.Element} The rendered tags container.
+ * @see {@link https://bulma.io/documentation/elements/tag/#list-of-tags | Bulma Tags documentation}
+ */
+const TagsComponent = ({ className, hasAddons, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- accepted for backwards compatibility, deprecated no-op (no `are-multiline` CSS ships)
+isMultiline, size, children, ...props }) => {
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const bulmaClasses = usePrefixedClassNames('tags', {
+        'has-addons': hasAddons,
+        [`are-${size}`]: size && validTagsSizes.includes(size),
+    });
+    const tagsClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("div", { className: tagsClasses, ...rest, children: children }));
+};
+const Tags = withSubComponents(TagsComponent, { Tag }, 'Tags');
+
+/**
+ * The `UnorderedList` component renders a styled unordered list (`<ul>`) element with Bulma helper class integration.
  *
- * @example
- * // Inside a group
- * <Checkboxes name="tags" defaultValue={['react']}>
- *   <Checkbox value="react">React</Checkbox>
- *   <Checkbox value="vue">Vue</Checkbox>
- * </Checkboxes>
+ * @function
+ * @param {UnorderedListProps} props - Props for the UnorderedList component.
+ * @returns {JSX.Element} The rendered ul element.
  */
-const Checkbox = React.forwardRef(({ color, size, className, children, textColor, disabled, name, value, checked, defaultChecked, indeterminate, onChange, ...props }, ref) => {
+const UnorderedListComponent = ({ className, textColor, bgColor, children, ...props }) => {
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
+        backgroundColor: bgColor,
         ...props,
     });
-    // The input's own ref, merged with the forwarded one. A callback ref's
-    // return value is handed back, so React 19 still runs a cleanup it
-    // returns, as it did when the ref went straight to the input.
-    const inputRef = React.useRef(null);
-    const setRefs = React.useCallback((node) => {
-        inputRef.current = node;
-        if (typeof ref === 'function')
-            return ref(node);
-        if (ref)
-            ref.current = node;
-    }, [ref]);
-    // `indeterminate` is a DOM property with no attribute, so it's set on the
-    // input rather than rendered. A click clears it, so this runs after every
-    // render, not only when the prop changes. Unset, it's left alone, so a
-    // ref that sets the property itself still works. `ownsIndeterminateRef`
-    // remembers that this component set it, so a prop that goes back to unset
-    // clears the dash once instead of leaving it on.
-    const ownsIndeterminateRef = React.useRef(false);
-    useClientLayoutEffect(() => {
-        if (indeterminate !== undefined) {
-            ownsIndeterminateRef.current = true;
-            inputRef.current.indeterminate = indeterminate;
-        }
-        else if (ownsIndeterminateRef.current) {
-            ownsIndeterminateRef.current = false;
-            inputRef.current.indeterminate = false;
-        }
-    });
-    // Inherit name + selection state from a surrounding <Checkboxes> group.
-    // Local props always win over the group (explicit > implicit).
-    const group = useCheckboxesGroup();
-    const effectiveName = name ?? group?.name;
-    // Group-managed checked state — only when the group is in
-    // controlled/uncontrolled mode (group.value is defined) AND this Checkbox
-    // has a value to compare against. Local `checked` always wins.
-    const groupManaged = group?.value !== undefined && value !== undefined;
-    const groupHas = groupManaged && group.value.includes(String(value));
-    const effectiveChecked = checked !== undefined ? checked : groupManaged ? groupHas : undefined;
-    // When the group manages checked, suppress local defaultChecked to avoid
-    // the controlled/uncontrolled React warning.
-    const effectiveDefaultChecked = groupManaged ? undefined : defaultChecked;
-    const handleChange = React.useCallback((e) => {
-        // The click that got here cleared the mixed state. Put it back now,
-        // since a click that changes no state renders nothing to do it.
-        if (indeterminate !== undefined)
-            e.target.indeterminate = indeterminate;
-        // Local onChange always fires.
-        onChange?.(e);
-        // Dispatch to the group additionally — toggle this value's
-        // membership in the group's array.
-        if (group?.onChange && value !== undefined) {
-            const valStr = String(value);
-            const currentArr = group.value ?? [];
-            const next = e.target.checked
-                ? currentArr.includes(valStr)
-                    ? currentArr
-                    : [...currentArr, valStr]
-                : currentArr.filter(v => v !== valStr);
-            group.onChange(next);
-        }
-    }, [onChange, group, value, indeterminate]);
-    const mainClass = usePrefixedClassNames('styled-checkbox', 'checkbox', {
-        [`is-${color}`]: color && checkboxColors.includes(color),
-        [`is-${size}`]: size && checkboxSizes.includes(size),
-    });
-    const checkboxClass = classNames(mainClass, bulmaHelperClasses, className);
-    const checkClass = usePrefixedClassNames('check');
-    const controlLabelClass = usePrefixedClassNames('control-label');
-    return (jsxRuntime.jsxs("label", { className: checkboxClass, children: [jsxRuntime.jsx("input", { ref: setRefs, type: "checkbox", disabled: disabled, name: effectiveName, value: value, checked: effectiveChecked, defaultChecked: effectiveDefaultChecked, onChange: handleChange, ...rest }), jsxRuntime.jsx("span", { className: checkClass }), children && jsxRuntime.jsx("span", { className: controlLabelClass, children: children })] }));
-});
-Checkbox.displayName = 'Checkbox';
+    const bulmaClasses = usePrefixedClassNames();
+    const listClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("ul", { className: listClasses || undefined, ...rest, children: children }));
+};
+const UnorderedList = withSubComponents(UnorderedListComponent, { Item: ListItem }, 'UnorderedList');
 
 // Whether the nearest enclosing `Control` shows its `isLoading` spinner. The
 // picker bases read it so their right-side launcher gives way to that
@@ -20119,6 +20701,8 @@ exports.ToastContainer = ToastContainer;
 exports.ToggleButton = ToggleButton;
 exports.Tooltip = Tooltip;
 exports.Tr = Tr;
+exports.TreeView = TreeView;
+exports.TreeViewItem = TreeViewItem;
 exports.UnorderedList = UnorderedList;
 exports.checkboxColors = checkboxColors;
 exports.checkboxSizes = checkboxSizes;