@allxsmith/bestax-bulma 5.54.0 → 5.55.0

package/dist/index.cjs

@@ -4530,7 +4530,7 @@ function flatChildren(el) {
     }
     return Array.from(el.children);
 }
-const isShown$1 = (el) => !el.hasAttribute('inert') && getComputedStyle(el).display !== 'none';
+const isShown$2 = (el) => !el.hasAttribute('inert') && getComputedStyle(el).display !== 'none';
 const isVisible = (el) => {
     const { visibility } = getComputedStyle(el);
     return visibility !== 'hidden' && visibility !== 'collapse';
@@ -4544,7 +4544,7 @@ const isVisible = (el) => {
 function isShownUpTo(el, top) {
     let below = null;
     for (let node = el; node && node !== top; node = flatParent(node)) {
-        if (!isShown$1(node))
+        if (!isShown$2(node))
             return false;
         if (below &&
             node.localName === 'details' &&
@@ -8578,11 +8578,11 @@ const announceDelay = 100;
  * again.
  */
 const announcementLifetime = 1000;
-const noAnnouncements = [];
+const noAnnouncements$1 = [];
 const nothingWritten = [];
 const noAnnouncementsYet = {
     key: 0,
-    waiting: noAnnouncements,
+    waiting: noAnnouncements$1,
     written: nothingWritten,
 };
 // Hides the region with inline styles rather than a class, so it needs no
@@ -8684,7 +8684,7 @@ function useAnnouncements(items, describe) {
             setAnnouncements(current => current.key === key
                 ? {
                     ...current,
-                    waiting: noAnnouncements,
+                    waiting: noAnnouncements$1,
                     written: [
                         ...current.written,
                         ...current.waiting
@@ -12697,12 +12697,12 @@ const defaultEmpty = 'No results';
 const typedNoMatches$2 = [{ id: 'empty' }];
 const nothingToAnnounce$2 = [];
 /** Whether a slot was given something to show. */
-const isShown = (node) => node !== undefined && node !== null && node !== false && node !== '';
-const noop$1 = () => { };
-const registerNothing$1 = () => noop$1;
+const isShown$1 = (node) => node !== undefined && node !== null && node !== false && node !== '';
+const noop$2 = () => { };
+const registerNothing$1 = () => noop$2;
 // What a part rendered outside a Command reads: nothing to report to, so it
 // renders its markup and does nothing.
-const standalone$1 = {
+const standalone$2 = {
     engine: {
         open: false,
         expanded: false,
@@ -12715,26 +12715,26 @@ const standalone$1 = {
         listboxRef: { current: null },
         registerPopup: registerNothing$1,
         registerItem: registerNothing$1,
-        onKeyDown: noop$1,
-        onChange: noop$1,
-        onClick: noop$1,
-        onBlur: noop$1,
-        hover: noop$1,
-        pick: noop$1,
-        keepFocus: noop$1,
-        markInside: noop$1,
+        onKeyDown: noop$2,
+        onChange: noop$2,
+        onClick: noop$2,
+        onBlur: noop$2,
+        hover: noop$2,
+        pick: noop$2,
+        keepFocus: noop$2,
+        markInside: noop$2,
     },
     label: defaultLabel,
     query: '',
-    onFieldChange: noop$1,
-    reportLoading: noop$1,
+    onFieldChange: noop$2,
+    reportLoading: noop$2,
     reportEmpty: registerNothing$1,
     registerHandler: registerNothing$1,
 };
 const CommandContext = React.createContext(null);
-const useCommand = () => React.useContext(CommandContext) ?? standalone$1;
+const useCommand = () => React.useContext(CommandContext) ?? standalone$2;
 /** Hands a node to a forwarded ref and to one of the component's own. */
-function setRefs$1(node, own, forwarded) {
+function setRefs$2(node, own, forwarded) {
     own.current = node;
     if (typeof forwarded === 'function')
         forwarded(node);
@@ -12851,7 +12851,7 @@ const CommandParts = React.forwardRef(({ children, label, query: controlledQuery
         registerHandler,
     };
     const { rootRef } = engine;
-    const rootRefs = React.useCallback((node) => setRefs$1(node, rootRef, ref), [rootRef, ref]);
+    const rootRefs = React.useCallback((node) => setRefs$2(node, rootRef, ref), [rootRef, ref]);
     return (jsxRuntime.jsxs("div", { className: classNames(rootClass, bulmaHelperClasses, className), ...rest, ref: rootRefs, children: [jsxRuntime.jsx(CommandContext.Provider, { value: context, children: children }), jsxRuntime.jsx(StatusRegion, { items: announced, describe: describeEmpty })] }));
 });
 CommandParts.displayName = 'CommandParts';
@@ -12871,7 +12871,7 @@ const CommandInput = React.forwardRef(({ isLoading, iconLeft, iconLeftName, onKe
         return () => reportLoading(false);
     }, [reportLoading, isLoading]);
     const { inputRef } = engine;
-    const inputRefs = React.useCallback((node) => setRefs$1(node, inputRef, ref), [inputRef, ref]);
+    const inputRefs = React.useCallback((node) => setRefs$2(node, inputRef, ref), [inputRef, ref]);
     const { expanded, highlighted } = engine;
     // A name the caller gave the field wins over the Command's `label`.
     const callerNamed = !!props['aria-label'] || 'aria-labelledby' in props;
@@ -12960,10 +12960,10 @@ const CommandItem = ({ value, disabled = false, onSelect, icon, description, hin
     // the rest, and described by the description and the hint.
     const baseId = React.useId();
     const labelId = `${baseId}label`;
-    const descriptionId = isShown(description)
+    const descriptionId = isShown$1(description)
         ? `${baseId}description`
         : undefined;
-    const hintId = isShown(hint) ? `${baseId}hint` : undefined;
+    const hintId = isShown$1(hint) ? `${baseId}hint` : undefined;
     const describedBy = [descriptionId, hintId].filter(Boolean).join(' ') || undefined;
     const callerNamed = !!props['aria-label'] || 'aria-labelledby' in props;
     return (jsxRuntime.jsxs("div", { className: classNames(itemClass, className), "aria-describedby": describedBy, ...props, ref: itemRef, id: engine.itemId(value) || undefined, role: "option", "aria-selected": disabled ? undefined : highlighted || undefined, "aria-disabled": disabled || undefined, "aria-labelledby": callerNamed ? props['aria-labelledby'] : labelId, onClick: event => {
@@ -12974,7 +12974,7 @@ const CommandItem = ({ value, disabled = false, onSelect, icon, description, hin
             onPointerMove?.(event);
             if (!disabled && !highlighted)
                 engine.hover(value);
-        }, children: [isShown(icon) && (jsxRuntime.jsx("span", { className: iconClass, "aria-hidden": "true", children: icon })), jsxRuntime.jsxs("span", { className: bodyClass, children: [jsxRuntime.jsx("span", { className: labelClass, id: labelId, children: children }), descriptionId && (jsxRuntime.jsx("span", { className: descriptionClass, id: descriptionId, children: description }))] }), hintId && (jsxRuntime.jsx("span", { className: hintClass, id: hintId, children: hint }))] }));
+        }, children: [isShown$1(icon) && (jsxRuntime.jsx("span", { className: iconClass, "aria-hidden": "true", children: icon })), jsxRuntime.jsxs("span", { className: bodyClass, children: [jsxRuntime.jsx("span", { className: labelClass, id: labelId, children: children }), descriptionId && (jsxRuntime.jsx("span", { className: descriptionClass, id: descriptionId, children: description }))] }), hintId && (jsxRuntime.jsx("span", { className: hintClass, id: hintId, children: hint }))] }));
 };
 CommandItem.displayName = 'CommandItem';
 /**
@@ -13013,7 +13013,7 @@ const CommandActionsContent = ({ actions, filter, placeholder, empty, }) => {
         sections.set(group, [...(sections.get(group) ?? []), action]);
     }
     const renderItem = (action) => (jsxRuntime.jsx(CommandItem, { value: action.id, disabled: action.disabled, icon: action.icon, description: action.description, hint: action.hint, onSelect: action.onSelect, children: action.label }, action.id));
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CommandInput, { placeholder: placeholder }), shown.length > 0 ? (jsxRuntime.jsx(CommandList, { children: Array.from(sections, ([group, members]) => group ? (jsxRuntime.jsx(CommandGroup, { label: group, children: members.map(renderItem) }, group)) : (members.map(renderItem))) })) : isShown(empty) ? (jsxRuntime.jsx(CommandEmpty, { children: empty })) : null] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CommandInput, { placeholder: placeholder }), shown.length > 0 ? (jsxRuntime.jsx(CommandList, { children: Array.from(sections, ([group, members]) => group ? (jsxRuntime.jsx(CommandGroup, { label: group, children: members.map(renderItem) }, group)) : (members.map(renderItem))) })) : isShown$1(empty) ? (jsxRuntime.jsx(CommandEmpty, { children: empty })) : null] }));
 };
 /**
  * The Command given `actions`. It renders the parts itself and filters the
@@ -13316,343 +13316,1026 @@ const Command = withSubComponents(CommandRoot, {
 }, 'Command');
 
 /**
- * The `Block` component renders a simple container with Bulma's `.block` class, adding vertical margin between sections of content.
+ * Thead component for rendering a styled Bulma table header.
+ *
+ * Supports Bulma helper classes for additional styling.
  *
  * @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}
+ * @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 Block = ({ className, textColor, color, bgColor, children, ...props }) => {
+const Thead = ({ className, 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 { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const theadClasses = classNames(className, bulmaHelperClasses);
+    return (jsxRuntime.jsx("thead", { className: theadClasses || undefined, ...rest, children: children }));
 };
 
 /**
- * The `Box` component renders a bordered, padded container with an optional shadow using Bulma's `.box` class.
+ * Tbody component for rendering a styled Bulma table body.
+ *
+ * Supports Bulma helper classes for additional styling.
  *
  * @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}
+ * @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 Box = ({ className, textColor, color, bgColor, hasShadow = true, children, style, ...props }) => {
+const Tbody = ({ className, children, ...props }) => {
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
-    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 }));
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const tbodyClasses = classNames(className, bulmaHelperClasses);
+    return (jsxRuntime.jsx("tbody", { className: tbodyClasses || undefined, ...rest, children: children }));
 };
 
 /**
- * The `Code` component renders a styled `<code>` element with Bulma helper class integration.
+ * Tfoot component for rendering a styled Bulma table footer.
+ *
+ * Supports Bulma helper classes for additional styling.
  *
  * @function
- * @param {CodeProps} props - Props for the Code component.
- * @returns {JSX.Element} The rendered code element.
+ * @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 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 }));
+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 }));
 };
 
-// Valid size modifiers for the content class
-const validSizes = ['small', 'medium', 'large'];
 /**
- * The `Content` component applies Bulma’s typographic styles to its children, enhancing the appearance of HTML elements like paragraphs, headings, lists, and tables.
+ * The `isAligned` values `Th` and `Td` accept. Each one writes
+ * `has-text-<value>` on the cell, and a value outside the tuple adds no class.
+ *
+ * One copy, imported by both cells, so a header and its body cells always
+ * take the same values.
+ *
+ * Its own module rather than `Th.tsx` or `Td.tsx` because `src/index.ts`
+ * wildcard-exports those files, and everything published there is public
+ * forever. `iconProps.ts` makes the same call.
+ */
+const validTableAlignments = ['left', 'right', 'centered'];
+
+/**
+ * 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 validTableColors = [
+    'primary',
+    'link',
+    'info',
+    'success',
+    'warning',
+    'danger',
+    'black',
+    'dark',
+    'light',
+    'white',
+];
+/**
+ * Td component for rendering a styled Bulma table cell.
+ *
+ * Supports alignment, narrow and vertically centered cells, Bulma color modifiers, and helper classes for additional styling.
  *
  * @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}
+ * @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 Content = ({ className, textColor, color, bgColor, size, children, ...props }) => {
+const Td = ({ className, isAligned, isNarrow, isVcentered, color, children, ...props }) => {
+    const bulmaClasses = usePrefixedClassNames('', {
+        [`has-text-${isAligned}`]: isAligned && validTableAlignments.includes(isAligned),
+        [`is-${color}`]: color && validTableColors.includes(color),
+        'is-narrow': isNarrow,
+        'is-vcentered': isVcentered,
+    });
     /**
      * 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 { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const tdClasses = classNames(bulmaClasses, className, bulmaHelperClasses);
+    return (jsxRuntime.jsx("td", { className: tdClasses || undefined, ...rest, children: children }));
 };
 
 /**
- * The `Delete` component provides a Bulma-styled close/delete button for dismissing modals, notifications, tags, messages, and more.
+ * Tr component for rendering a styled Bulma table row.
  *
- * It renders `type="button"`, so a delete button inside a form does not submit it.
+ * Supports the is-selected modifier and color modifiers.
  *
  * @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}
+ * @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 Delete = ({ className, textColor, color, bgColor, onClick, size, ariaLabel, disabled = false, ...props }) => {
+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({
-        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 { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const trClasses = classNames(bulmaClasses, className, bulmaHelperClasses);
+    return (jsxRuntime.jsx("tr", { className: trClasses || undefined, ...rest, children: children }));
 };
 
-const validDescriptionListOrientations = ['vertical', 'horizontal'];
-const isOrientation = (orientation) => !!orientation &&
-    validDescriptionListOrientations.includes(orientation);
-/** Whether a prop was given something to render. */
-const isGiven = (node) => node !== undefined &&
-    node !== null &&
-    typeof node !== 'boolean' &&
-    node !== '';
 /**
- * A label, the name of a fact: a `<dt>`, in the weaker text color.
+ * Th component for rendering a styled Bulma table header cell.
  *
- * @function
- * @param {DescriptionListLabelProps} props - Props for DescriptionList.Label.
- * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<dt>`.
- * @returns {JSX.Element} The rendered label.
+ * Supports alignment, width, narrow and vertically centered cells, and color modifiers.
  *
- * @example
- * <DescriptionList.Label>Placed on</DescriptionList.Label>
+ * @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 DescriptionListLabel = React.forwardRef(({ className, textColor, bgColor, children, ...props }, ref) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...props,
+const Th = ({ className, isAligned, isNarrow, isVcentered, width, color, style, children, ...props }) => {
+    const bulmaClasses = usePrefixedClassNames('', {
+        [`has-text-${isAligned}`]: isAligned && validTableAlignments.includes(isAligned),
+        [`is-${color}`]: color && validTableColors.includes(color),
+        'is-narrow': isNarrow,
+        'is-vcentered': isVcentered,
     });
-    const labelClass = usePrefixedClassNames('description-list-label');
-    return (jsxRuntime.jsx("dt", { ref: ref, className: classNames(labelClass, bulmaHelperClasses, className), ...rest, children: children }));
-});
-DescriptionListLabel.displayName = 'DescriptionList.Label';
+    /**
+     * 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: 
+        // A `width` key the style leaves undefined isn't a width, so the
+        // prop's stays.
+        width && style?.width === undefined
+            ? {
+                ...style,
+                width: typeof width === 'number' ? `${width}px` : width,
+            }
+            : style, ...rest, children: children }));
+};
+
 /**
- * A value, what the label says about the thing: a `<dd>`. An item may have several.
+ * The `Table` component and its subcomponents provide a highly composable, Bulma-styled table system for React.
  *
  * @function
- * @param {DescriptionListValueProps} props - Props for DescriptionList.Value.
- * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<dd>`.
- * @returns {JSX.Element} The rendered value.
- *
- * @example
- * <DescriptionList.Value>14 October 2026</DescriptionList.Value>
+ * @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 DescriptionListValue = React.forwardRef(({ className, textColor, bgColor, children, ...props }, ref) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    const valueClass = usePrefixedClassNames('description-list-value');
-    return (jsxRuntime.jsx("dd", { ref: ref, className: classNames(valueClass, bulmaHelperClasses, className), ...rest, children: children }));
-});
-DescriptionListValue.displayName = 'DescriptionList.Value';
+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');
+
 /**
- * One fact: its label and its value, in a `<div>`, from the `label` and `value` props or from `Label` and `Value` children.
+ * The `Skeleton` component provides a Bulma-styled skeleton loader for React applications, useful for indicating that content is loading.
  *
  * @function
- * @param {DescriptionListItemProps} props - Props for DescriptionList.Item.
- * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the `<div>`.
- * @returns {JSX.Element} The rendered item.
+ * @param {SkeletonProps} props - Props for the Skeleton component.
+ * @returns {JSX.Element} The rendered skeleton element.
  *
  * @example
- * <DescriptionList.Item label="Order" value="#1234" />
+ * // Block skeleton
+ * <Skeleton />
  *
  * @example
- * <DescriptionList.Item label="Tags">
- *   <DescriptionList.Value>Gift</DescriptionList.Value>
- *   <DescriptionList.Value>Priority</DescriptionList.Value>
- * </DescriptionList.Item>
+ * // Multi-line skeleton
+ * <Skeleton variant="lines" lines={5} />
  */
-const DescriptionListItem = React.forwardRef(({ className, label, value, textColor, bgColor, children, ...props }, ref) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...props,
+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 }));
+};
+
+/** A column's raw value for a row. */
+function readValue(column, row) {
+    const { accessor } = column;
+    if (typeof accessor === 'function')
+        return accessor(row);
+    if (row === null || typeof row !== 'object')
+        return undefined;
+    return row[(accessor ?? column.id)];
+}
+/** A column's text for a row. */
+function readText(column, row) {
+    const value = readValue(column, row);
+    if (column.format)
+        return column.format(value, row);
+    return value === null || value === undefined ? '' : String(value);
+}
+/** Whether a value sorts as empty: nothing, no text, or no number or date. */
+function isEmptyValue(value) {
+    return (value === null ||
+        value === undefined ||
+        value === '' ||
+        (typeof value === 'number' && Number.isNaN(value)) ||
+        (value instanceof Date && Number.isNaN(value.getTime())));
+}
+/** Compares two values that aren't empty, for an ascending sort. */
+function compareValues(a, b, collator) {
+    if (typeof a === 'number' && typeof b === 'number')
+        return a - b;
+    if (a instanceof Date && b instanceof Date)
+        return a.getTime() - b.getTime();
+    if (typeof a === 'boolean' && typeof b === 'boolean') {
+        return Number(a) - Number(b);
+    }
+    return collator.compare(String(a), String(b));
+}
+/** Whether a filter value filters anything. */
+function isActiveFilter(value) {
+    return (value !== undefined &&
+        value !== null &&
+        value !== '' &&
+        !(Array.isArray(value) && value.length === 0));
+}
+/**
+ * Whether a search or a filter value is narrowing the rows. Used by
+ * DataTable to tell an empty table from one with no matches.
+ */
+function isFiltering(search, filters) {
+    return search.trim() !== '' || Object.values(filters).some(isActiveFilter);
+}
+/** A row's id from its `id` property, or nothing when it has none. */
+function idOf(row) {
+    if (row === null || typeof row !== 'object')
+        return undefined;
+    const id = row.id;
+    return id === undefined || id === null || id === '' ? undefined : String(id);
+}
+/**
+ * A piece of state that's the caller's when they pass its value, and the
+ * table's own otherwise. Setting it calls the change handler either way.
+ *
+ * It also returns `latest`, what a change should build on. While the table
+ * holds the state, that's the value last set, even before React renders it,
+ * so two changes in one handler build on each other. While the caller holds
+ * it, it's the value as rendered, since only the caller knows what it made
+ * of a change.
+ */
+function useTableState(value, initial, onChange) {
+    const [own, setOwn] = React.useState(initial);
+    const held = value !== undefined;
+    const current = held ? value : own;
+    const rendered = useLatestRef(current);
+    // A value set since the last commit, cleared once a commit shows it.
+    const pendingRef = React.useRef(null);
+    useClientLayoutEffect(() => {
+        pendingRef.current = null;
     });
-    const itemClass = usePrefixedClassNames('description-list-item');
-    return (jsxRuntime.jsxs("div", { ref: ref, className: classNames(itemClass, bulmaHelperClasses, className), ...rest, children: [isGiven(label) && jsxRuntime.jsx(DescriptionListLabel, { children: label }), children, isGiven(value) && jsxRuntime.jsx(DescriptionListValue, { children: value })] }));
-});
-DescriptionListItem.displayName = 'DescriptionList.Item';
+    const set = React.useCallback((next) => {
+        if (!held) {
+            pendingRef.current = { value: next };
+            setOwn(next);
+        }
+        onChange?.(next);
+    }, [held, onChange]);
+    const latest = React.useCallback(() => (pendingRef.current ? pendingRef.current.value : rendered.current), [rendered]);
+    return [current, set, latest];
+}
+const noSort = [];
+const noIds = [];
+const noFilters = {};
 /**
- * The `DescriptionList` component lists facts about one thing, each a label and its value, such as an order's details or a profile.
+ * `useDataTable` holds a table's sort, selection, page, search and filters,
+ * works out its rows, and hands out props for bestax's own table parts, so
+ * custom markup behaves as `DataTable` does. Pass its result to
+ * `<DataTable table={table} />` to render it with DataTable's own markup,
+ * with a toolbar or an export button elsewhere on the page.
  *
- * It's a `<dl>`, with a `<div>` for each item, a `<dt>` for each label and
- * a `<dd>` for each value, so assistive tech gets HTML's own list of terms
- * and definitions and no roles are added. Labels sit above their values on
- * a phone and beside them from Bulma's tablet breakpoint up, where every
- * label shares one column so the values line up. For data with two
- * dimensions, such as several records with the same fields, use a `Table`.
+ * @example
+ * const table = useDataTable({ columns, data: users, pageSize: 10 });
+ *
+ * <DataTable table={table} caption="Users" hasSearch />
+ */
+function useDataTable(options) {
+    const { columns, data, getRowId: rowIdOf, sort: sortProp, defaultSort = noSort, onSortChange, selectionMode = 'none', selected: selectedProp, defaultSelected = noIds, onSelectedChange, pageSize: pageSizeProp, page: pageProp, defaultPage = 1, onPageChange, search: searchProp, defaultSearch = '', onSearchChange, filters: filtersProp, defaultFilters = noFilters, onFiltersChange, manual = false, rowCount: rowCountProp, labels, } = options;
+    const [sort, setSort] = useTableState(sortProp, defaultSort, onSortChange);
+    const [selected, setSelected, latestSelected] = useTableState(selectedProp, defaultSelected, onSelectedChange);
+    const [pageState, setPageState, latestPage] = useTableState(pageProp, defaultPage, onPageChange);
+    const [search, setSearchState] = useTableState(searchProp, defaultSearch, onSearchChange);
+    const [filters, setFiltersState, latestFilters] = useTableState(filtersProp, defaultFilters, onFiltersChange);
+    const prefix = useClassPrefix();
+    const { locale } = useLocale();
+    const matchText = useLocaleMatcher();
+    const formatNumber = useNumberFormat();
+    const collator = React.useMemo(() => new Intl.Collator(locale, { numeric: true }), [locale]);
+    const pageSize = pageSizeProp !== undefined &&
+        Number.isFinite(pageSizeProp) &&
+        pageSizeProp >= 1
+        ? Math.floor(pageSizeProp)
+        : undefined;
+    const columnsById = React.useMemo(() => {
+        const byId = new Map();
+        for (const column of columns) {
+            if (byId.has(column.id)) {
+                warnOnce('DataTable:duplicate-column', `[bestax-bulma] DataTable has two columns with the id "${column.id}". ` +
+                    'Give each column its own id: the sort, the filters and an export ' +
+                    'find a column by it.');
+            }
+            else {
+                byId.set(column.id, column);
+            }
+        }
+        return byId;
+    }, [columns]);
+    // Each row's id, by its index in `data`.
+    const ids = React.useMemo(() => {
+        const out = data.map((row, index) => {
+            const id = rowIdOf ? rowIdOf(row, index) : idOf(row);
+            if (id === undefined || id === '') {
+                warnOnce('DataTable:missing-row-id', '[bestax-bulma] A DataTable row has no id, so it falls back to its ' +
+                    "index, which doesn't survive the data changing. Give each row " +
+                    'an `id`, or pass `getRowId`.');
+                return String(index);
+            }
+            return id;
+        });
+        if (isDev() && new Set(out).size < out.length) {
+            warnOnce('DataTable:duplicate-row-id', '[bestax-bulma] Two DataTable rows have the same id, so selecting ' +
+                'one selects both. Make the ids unique, or pass a `getRowId` ' +
+                'that does.');
+        }
+        return out;
+    }, [data, rowIdOf]);
+    const indexOf = React.useMemo(() => {
+        const map = new Map();
+        data.forEach((row, index) => {
+            if (!map.has(row))
+                map.set(row, index);
+        });
+        return map;
+    }, [data]);
+    /** A row's id, from its index when the row is one of `data`. */
+    const getRowId = React.useCallback((row) => {
+        const index = indexOf.get(row);
+        if (index !== undefined)
+            return ids[index];
+        const id = rowIdOf ? rowIdOf(row, -1) : idOf(row);
+        return id ?? '';
+    }, [indexOf, ids, rowIdOf]);
+    // Every column's text for every row, worked out once per data and
+    // columns, since the search reads them on every keystroke.
+    const texts = React.useMemo(() => data.map(row => columns.map(column => readText(column, row))), [data, columns]);
+    const sortedIndexes = React.useMemo(() => {
+        const all = data.map((_, index) => index);
+        if (manual)
+            return all;
+        const keys = sort
+            .map(entry => ({
+            column: columnsById.get(entry.id),
+            descending: entry.direction === 'descending',
+        }))
+            .filter((key) => key.column !== undefined);
+        if (keys.length === 0)
+            return all;
+        const values = keys.map(({ column }) => column.sortFn ? null : data.map(row => readValue(column, row)));
+        return all.sort((x, y) => {
+            for (let k = 0; k < keys.length; k++) {
+                const { column, descending } = keys[k];
+                let result;
+                if (column.sortFn) {
+                    result = column.sortFn(data[x], data[y]);
+                    if (descending)
+                        result = -result;
+                }
+                else {
+                    const a = values[k][x];
+                    const b = values[k][y];
+                    const aEmpty = isEmptyValue(a);
+                    const bEmpty = isEmptyValue(b);
+                    if (aEmpty || bEmpty) {
+                        // Empty values go last whichever way the column sorts.
+                        result = Number(aEmpty) - Number(bEmpty);
+                    }
+                    else {
+                        result = compareValues(a, b, collator);
+                        if (descending)
+                            result = -result;
+                    }
+                }
+                if (result)
+                    return result;
+            }
+            // Ties keep the order of `data`.
+            return x - y;
+        });
+    }, [data, sort, columnsById, collator, manual]);
+    const filteredIndexes = React.useMemo(() => {
+        if (manual)
+            return sortedIndexes;
+        const query = search.trim();
+        const holds = matchText
+            ? (text, needle) => matchText(text, needle)
+            : (text, needle) => text.toLowerCase().includes(needle.toLowerCase());
+        const searched = columns
+            .map((column, index) => ({ column, index }))
+            .filter(({ column }) => column.filterable !== false);
+        const filtered = Object.entries(filters)
+            .filter(([, value]) => isActiveFilter(value))
+            .map(([id, value]) => ({
+            column: columnsById.get(id),
+            index: columns.findIndex(column => column.id === id),
+            value,
+        }))
+            .filter(({ column }) => column !== undefined && column.filterable !== false);
+        if (query === '' && filtered.length === 0)
+            return sortedIndexes;
+        return sortedIndexes.filter(rowIndex => {
+            const row = data[rowIndex];
+            const rowTexts = texts[rowIndex];
+            for (const { column, index, value } of filtered) {
+                // An array is any of its entries, as a multiple-choice filter gives.
+                const passes = column.filterFn
+                    ? column.filterFn(row, value)
+                    : Array.isArray(value)
+                        ? value.some(entry => holds(rowTexts[index], String(entry)))
+                        : holds(rowTexts[index], String(value));
+                if (!passes)
+                    return false;
+            }
+            return (query === '' ||
+                searched.some(({ index }) => holds(rowTexts[index], query)));
+        });
+    }, [
+        manual,
+        sortedIndexes,
+        search,
+        filters,
+        matchText,
+        columns,
+        columnsById,
+        data,
+        texts,
+    ]);
+    const knowsCount = rowCountProp !== undefined && Number.isFinite(rowCountProp);
+    if (manual && pageSize !== undefined && !knowsCount) {
+        warnOnce('DataTable:manual-row-count', '[bestax-bulma] A DataTable with `manual` and a `pageSize` has no ' +
+            '`rowCount`, so it counts only the rows in `data`, makes one page ' +
+            'of them and shows no pager. Pass `rowCount`, how many rows match ' +
+            'on the server.');
+    }
+    const rowCount = manual
+        ? Math.max(Math.floor(knowsCount ? rowCountProp : data.length), 0)
+        : filteredIndexes.length;
+    const pageCount = pageSize ? Math.max(Math.ceil(rowCount / pageSize), 1) : 1;
+    const page = Math.min(Math.max(Number.isFinite(pageState) ? Math.floor(pageState) : 1, 1), pageCount);
+    const pageIndexes = React.useMemo(() => {
+        if (manual || !pageSize)
+            return filteredIndexes;
+        return filteredIndexes.slice((page - 1) * pageSize, page * pageSize);
+    }, [manual, pageSize, filteredIndexes, page]);
+    const selectedSet = React.useMemo(() => new Set(selected), [selected]);
+    const selectable = selectionMode === 'multiple';
+    const rowsOf = React.useCallback((indexes) => indexes.map(index => data[index]), [data]);
+    const getRows = React.useCallback((scope = 'filtered') => {
+        switch (scope) {
+            case 'all':
+                return rowsOf(sortedIndexes);
+            case 'page':
+                return rowsOf(pageIndexes);
+            case 'selected':
+                return rowsOf(filteredIndexes.filter(index => selectedSet.has(ids[index])));
+            default:
+                return rowsOf(filteredIndexes);
+        }
+    }, [rowsOf, sortedIndexes, pageIndexes, filteredIndexes, selectedSet, ids]);
+    const getValue = React.useCallback((row, columnId) => {
+        const column = columnsById.get(columnId);
+        return column ? readValue(column, row) : undefined;
+    }, [columnsById]);
+    const getText = React.useCallback((row, columnId) => {
+        const column = columnsById.get(columnId);
+        if (!column)
+            return '';
+        const index = indexOf.get(row);
+        return index !== undefined
+            ? texts[index][columns.indexOf(column)]
+            : readText(column, row);
+    }, [columnsById, indexOf, columns, texts]);
+    const labelColumn = columns.find(column => column.isRowHeader) ?? columns[0];
+    const getRowLabel = React.useCallback((row) => (labelColumn && getText(row, labelColumn.id)) || getRowId(row), [labelColumn, getText, getRowId]);
+    const isSelected = React.useCallback((row) => selectable && selectedSet.has(getRowId(row)), [selectable, selectedSet, getRowId]);
+    const setPage = React.useCallback((next) => {
+        if (next !== page)
+            setPageState(next);
+    }, [page, setPageState]);
+    // A new search or filter starts from the first page. It's measured against
+    // the page as stored, not as shown: a page past the end shows the last,
+    // and left stored it would come back once the rows grew again.
+    const resetPage = React.useCallback(() => {
+        if (latestPage() !== 1)
+            setPageState(1);
+    }, [latestPage, setPageState]);
+    const setSearch = React.useCallback((next) => {
+        setSearchState(next);
+        resetPage();
+    }, [setSearchState, resetPage]);
+    const setFilters = React.useCallback((next) => {
+        setFiltersState(next);
+        resetPage();
+    }, [setFiltersState, resetPage]);
+    const setFilter = React.useCallback((columnId, value) => {
+        const next = { ...latestFilters() };
+        if (isActiveFilter(value))
+            next[columnId] = value;
+        else
+            delete next[columnId];
+        setFilters(next);
+    }, [latestFilters, setFilters]);
+    const toggleSort = React.useCallback((columnId) => {
+        const column = columnsById.get(columnId);
+        if (!column)
+            return;
+        const first = column.sortDescFirst
+            ? 'descending'
+            : 'ascending';
+        const current = sort[0]?.id === columnId ? sort[0].direction : undefined;
+        if (current === undefined) {
+            setSort([{ id: columnId, direction: first }]);
+        }
+        else if (current === first) {
+            setSort([
+                {
+                    id: columnId,
+                    direction: first === 'ascending' ? 'descending' : 'ascending',
+                },
+            ]);
+        }
+        else {
+            setSort([]);
+        }
+    }, [columnsById, sort, setSort]);
+    const toggleRowSelected = React.useCallback((row, value) => {
+        const id = getRowId(row);
+        const current = latestSelected();
+        const has = current.includes(id);
+        const on = value ?? !has;
+        if (on === has)
+            return;
+        setSelected(on ? [...current, id] : current.filter(s => s !== id));
+    }, [getRowId, latestSelected, setSelected]);
+    const pageIds = React.useMemo(() => pageIndexes.map(index => ids[index]), [pageIndexes, ids]);
+    const pageSelectedCount = pageIds.filter(id => selectedSet.has(id)).length;
+    const allPageSelected = pageIds.length > 0 && pageSelectedCount === pageIds.length;
+    const togglePageSelected = React.useCallback((value) => {
+        const current = latestSelected();
+        const has = new Set(current);
+        const on = value ?? !(pageIds.length > 0 && pageIds.every(id => has.has(id)));
+        if (on) {
+            const adding = pageIds.filter(id => !has.has(id));
+            if (adding.length > 0)
+                setSelected([...current, ...adding]);
+        }
+        else {
+            const onPage = new Set(pageIds);
+            const kept = current.filter(id => !onPage.has(id));
+            if (kept.length !== current.length)
+                setSelected(kept);
+        }
+    }, [latestSelected, pageIds, setSelected]);
+    const count = React.useCallback((value) => (formatNumber ? formatNumber(value) : String(value)), [formatNumber]);
+    const resolvedLabels = {
+        selectAll: labels?.selectAll ||
+            (pageCount > 1 ? 'Select all rows on this page' : 'Select all rows'),
+        selectRow: labels?.selectRow ?? (label => `Select ${label}`),
+        sortHint: labels?.sortHint || 'column headers with buttons are sortable',
+        search: labels?.search || 'Search',
+        results: labels?.results ??
+            (total => total === 0
+                ? 'No rows match'
+                : `${count(total)} ${total === 1 ? 'row matches' : 'rows match'}`),
+        pageRange: labels?.pageRange ??
+            ((first, last, total) => `Showing ${count(first)} to ${count(last)} of ${count(total)}`),
+        loading: labels?.loading || 'Loading',
+        pagination: labels?.pagination || undefined,
+        empty: labels?.empty || 'No rows to show.',
+        noResults: labels?.noResults || 'No rows match.',
+    };
+    const sortButtonClass = prefixedClassNames(prefix, 'data-table-sort');
+    return {
+        columns,
+        state: { sort, selected, page, pageSize, search, filters },
+        selectionMode,
+        manual,
+        rowCount,
+        pageCount,
+        labels: resolvedLabels,
+        getRows,
+        getRowId,
+        getValue,
+        getText,
+        getRowLabel,
+        isSelected,
+        setSort,
+        toggleSort,
+        setSelected,
+        toggleRowSelected,
+        togglePageSelected,
+        setPage,
+        setSearch,
+        setFilter,
+        setFilters,
+        getHeaderCellProps: column => ({
+            scope: 'col',
+            'aria-sort': sort[0]?.id === column.id ? sort[0].direction : undefined,
+            isAligned: column.align,
+            width: column.width,
+        }),
+        getSortButtonProps: column => ({
+            type: 'button',
+            className: sortButtonClass,
+            onClick: () => toggleSort(column.id),
+        }),
+        getRowProps: row => ({ isSelected: isSelected(row) }),
+        getCellProps: (_row, column) => ({
+            scope: column.isRowHeader ? 'row' : undefined,
+            isAligned: column.align,
+        }),
+        getSelectAllProps: () => ({
+            'aria-label': resolvedLabels.selectAll,
+            checked: allPageSelected,
+            indeterminate: pageSelectedCount > 0 && !allPageSelected,
+            disabled: pageIds.length === 0,
+            onChange: () => togglePageSelected(),
+        }),
+        getSelectRowProps: row => ({
+            'aria-label': resolvedLabels.selectRow(getRowLabel(row)),
+            checked: selectedSet.has(getRowId(row)),
+            onChange: () => toggleRowSelected(row),
+        }),
+        getPaginationProps: () => ({
+            total: pageCount,
+            current: page,
+            onPageChange: setPage,
+        }),
+        getSearchProps: () => ({
+            type: 'search',
+            value: search,
+            onChange: event => setSearch(event.target.value),
+        }),
+    };
+}
+
+/** How long the status region waits after a change before it speaks, in ms. */
+const statusDelay = 500;
+const noColumns = [];
+const noRows = [];
+/** A text signature of the search and the filters, to tell when they change. */
+function filterSignature(search, filters) {
+    try {
+        return JSON.stringify([search, Object.entries(filters).sort()]);
+    }
+    catch {
+        return search;
+    }
+}
+/** Whether a node renders something. */
+const isShown = (node) => node !== undefined && node !== null && node !== false && node !== '';
+/**
+ * The `DataTable` component is a table of records that people can sort,
+ * search, page through and select rows from, rendered with bestax's own
+ * `Table` parts, `Checkbox` and `Pagination`.
  *
- * @function
- * @param {DescriptionListProps} props - Props for the DescriptionList component.
- * @param {React.Ref<HTMLDListElement>} ref - Forwarded ref to the `<dl>`.
- * @returns {JSX.Element} The rendered list.
+ * It's a native table, as in the WAI-ARIA Authoring Practices' sortable
+ * table: a sortable header holds a button, the sorted one carries
+ * `aria-sort`, and each row's checkbox is named for the row. It runs on
+ * `useDataTable`, which custom markup can use too.
  *
  * @example
- * <DescriptionList aria-labelledby="order-heading">
- *   <DescriptionList.Item label="Order" value="#1234" />
- *   <DescriptionList.Item label="Placed on" value="14 October 2026" />
- * </DescriptionList>
+ * <DataTable
+ *   caption="Users"
+ *   columns={[
+ *     { id: 'name', header: 'Name', sortable: true, isRowHeader: true },
+ *     { id: 'role', header: 'Role', sortable: true },
+ *   ]}
+ *   data={users}
+ *   selectionMode="multiple"
+ *   pageSize={10}
+ *   hasSearch
+ * />
  */
-const DescriptionListRoot = React.forwardRef(({ className, orientation, orientationMobile, orientationTablet, orientationDesktop, orientationWidescreen, orientationFullhd, hasDividers, textColor, bgColor, children, ...props }, ref) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    // A class for each orientation given, which the stylesheet applies from
-    // that viewport's breakpoint, so the layout is right on the first paint
-    // and on the server. With none, the stylesheet's default is responsive.
-    const rootClass = usePrefixedClassNames('description-list', {
-        [`is-${orientation}`]: isOrientation(orientation),
-        [`is-${orientationMobile}-mobile`]: isOrientation(orientationMobile),
-        [`is-${orientationTablet}-tablet`]: isOrientation(orientationTablet),
-        [`is-${orientationDesktop}-desktop`]: isOrientation(orientationDesktop),
-        [`is-${orientationWidescreen}-widescreen`]: isOrientation(orientationWidescreen),
-        [`is-${orientationFullhd}-fullhd`]: isOrientation(orientationFullhd),
-        'has-dividers': !!hasDividers,
-    });
-    return (jsxRuntime.jsx("dl", { ref: ref, className: classNames(rootClass, bulmaHelperClasses, className), ...rest, children: children }));
+const DataTable = React.forwardRef(function DataTableRender({ columns, data, table: given, getRowId, sort, defaultSort, onSortChange, selectionMode, selected, defaultSelected, onSelectedChange, pageSize, page, defaultPage, onPageChange, search, defaultSearch, onSearchChange, filters, defaultFilters, onFiltersChange, manual, rowCount, labels, caption, isBordered, isStriped, isNarrow, isHoverable, isFullwidth, isResponsive, hasSearch, toolbar, loading, empty, noResults, rowProps, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...props }, ref) {
+    const own = useDataTable({
+        columns: columns ?? noColumns,
+        data: data ?? noRows,
+        getRowId,
+        sort,
+        defaultSort,
+        onSortChange,
+        selectionMode,
+        selected,
+        defaultSelected,
+        onSelectedChange,
+        pageSize,
+        page,
+        defaultPage,
+        onPageChange,
+        search,
+        defaultSearch,
+        onSearchChange,
+        filters,
+        defaultFilters,
+        onFiltersChange,
+        manual,
+        rowCount,
+        labels,
+    });
+    const table = given ?? own;
+    const { state } = table;
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const rootClass = classNames(usePrefixedClassNames('data-table'), bulmaHelperClasses, className);
+    const toolbarClass = usePrefixedClassNames('data-table-toolbar');
+    const actionsClass = usePrefixedClassNames('data-table-actions');
+    const emptyClass = usePrefixedClassNames('data-table-empty');
+    const nameId = React.useId();
+    const hasCaption = isShown(caption);
+    const named = hasCaption || Boolean(ariaLabel || ariaLabelledby);
+    React.useEffect(() => {
+        if (!named) {
+            warnOnce('DataTable:unnamed', '[bestax-bulma] <DataTable> has no accessible name. Pass a caption, ' +
+                'aria-label or aria-labelledby, so a screen reader can say which ' +
+                'table it is in.');
+        }
+    }, [named]);
+    const mixed = Boolean(given) && Boolean(columns || data);
+    const bare = !given && (!columns || !data);
+    React.useEffect(() => {
+        if (mixed) {
+            warnOnce('DataTable:table-and-columns', '[bestax-bulma] <DataTable> was given a `table` and `columns` or ' +
+                '`data` too. It renders the `table` and leaves the rest unread, so ' +
+                'pass those to useDataTable instead.');
+        }
+        if (bare) {
+            warnOnce('DataTable:no-data', '[bestax-bulma] <DataTable> needs `columns` and `data`, or a `table` ' +
+                'from useDataTable.');
+        }
+    }, [mixed, bare]);
+    // The status region speaks only after the search, a filter or the page
+    // changes, so nothing is read out as the page loads. `kind` is what last
+    // changed, kept beside the values it changed from.
+    const signature = filterSignature(state.search, state.filters);
+    const [last, setLast] = React.useState({
+        signature,
+        page: state.page,
+        kind: null,
+    });
+    if (last.signature !== signature) {
+        setLast({ signature, page: state.page, kind: 'results' });
+    }
+    else if (last.page !== state.page) {
+        setLast({ signature, page: state.page, kind: 'page' });
+    }
+    const { labels: words, rowCount: total, pageCount } = table;
+    const size = state.pageSize;
+    let message = '';
+    if (last.kind && loading) {
+        message = words.loading;
+    }
+    else if (last.kind === 'results' || (last.kind === 'page' && !total)) {
+        message = words.results(total);
+    }
+    else if (last.kind === 'page') {
+        // Without a page size, as when it's just been taken away, there's one
+        // page, holding every row.
+        const per = size ?? total;
+        message = words.pageRange((state.page - 1) * per + 1, Math.min(state.page * per, total), total);
+    }
+    // Written a moment after it changes, so typing in the search is read out
+    // once it pauses rather than at every keystroke.
+    const [said, setSaid] = React.useState('');
+    React.useEffect(() => {
+        const timer = setTimeout(() => setSaid(message), statusDelay);
+        return () => clearTimeout(timer);
+    }, [message]);
+    const selectable = table.selectionMode === 'multiple';
+    const sortable = table.columns.some(column => column.sortable);
+    const columnCount = table.columns.length + (selectable ? 1 : 0);
+    const pageRows = table.getRows('page');
+    const selectAll = table.getSelectAllProps();
+    const captionNode = hasCaption ? (jsxRuntime.jsxs("caption", { children: [jsxRuntime.jsx("span", { id: nameId, children: caption }), sortable && jsxRuntime.jsx("span", { style: visuallyHidden, children: `, ${words.sortHint}.` })] })) : sortable ? (jsxRuntime.jsx("caption", { children: jsxRuntime.jsx("span", { style: visuallyHidden, children: words.sortHint }) })) : null;
+    const header = (jsxRuntime.jsx(Thead, { children: jsxRuntime.jsxs(Tr, { children: [selectable && (jsxRuntime.jsx(Th, { scope: "col", isNarrow: true, children: jsxRuntime.jsx(Checkbox, { ...selectAll, 
+                        // While loading, the rows it would select aren't on screen.
+                        disabled: selectAll.disabled || Boolean(loading) }) })), table.columns.map(column => (jsxRuntime.jsx(Th, { ...table.getHeaderCellProps(column), children: column.sortable ? (jsxRuntime.jsx("button", { ...table.getSortButtonProps(column), children: column.header })) : (column.header) }, column.id)))] }) }));
+    let body;
+    if (loading) {
+        body = Array.from({ length: size ?? 5 }, (_, index) => (jsxRuntime.jsx(Tr, { "aria-hidden": "true", children: Array.from({ length: columnCount }, (__, cell) => (jsxRuntime.jsx(Td, { children: jsxRuntime.jsx(Skeleton, { variant: "lines", lines: 1 }) }, cell))) }, index)));
+    }
+    else if (pageRows.length === 0) {
+        // With `manual`, no rows under a search or a filter is no match: only
+        // the server knows whether there's anything else.
+        const nothing = table.getRows('all').length === 0 &&
+            !(table.manual && isFiltering(state.search, state.filters));
+        const content = nothing
+            ? isShown(empty)
+                ? empty
+                : empty === undefined && (jsxRuntime.jsx(EmptyState, { size: "small", description: words.empty }))
+            : isShown(noResults)
+                ? noResults
+                : noResults === undefined && (jsxRuntime.jsx(EmptyState, { size: "small", description: words.noResults }));
+        body = (jsxRuntime.jsx(Tr, { children: jsxRuntime.jsx(Td, { colSpan: columnCount, className: emptyClass, children: content }) }));
+    }
+    else {
+        body = pageRows.map(row => {
+            const rowId = table.getRowId(row);
+            return (jsxRuntime.jsxs(Tr, { ...rowProps?.(row), ...table.getRowProps(row), children: [selectable && (jsxRuntime.jsx(Td, { isNarrow: true, children: jsxRuntime.jsx(Checkbox, { ...table.getSelectRowProps(row) }) })), table.columns.map(column => {
+                        const text = table.getText(row, column.id);
+                        const content = column.cell
+                            ? column.cell(row, {
+                                value: table.getValue(row, column.id),
+                                text,
+                                rowId,
+                            })
+                            : text;
+                        const cellProps = table.getCellProps(row, column);
+                        return column.isRowHeader ? (jsxRuntime.jsx(Th, { ...cellProps, children: content }, column.id)) : (jsxRuntime.jsx(Td, { ...cellProps, children: content }, column.id));
+                    })] }, rowId));
+        });
+    }
+    const tableElement = (jsxRuntime.jsxs(Table, { isBordered: isBordered, isStriped: isStriped, isNarrow: isNarrow, isHoverable: isHoverable, isFullwidth: isFullwidth, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-busy": loading || undefined, children: [captionNode, header, jsxRuntime.jsx(Tbody, { children: body })] }));
+    // The name the scroll area and the pager take from the table.
+    const textName = ariaLabel || (typeof caption === 'string' ? caption : undefined);
+    const scrollName = ariaLabel
+        ? { 'aria-label': ariaLabel }
+        : {
+            'aria-labelledby': ariaLabelledby || (hasCaption ? nameId : undefined),
+        };
+    // Pagination names itself "pagination" unless given another name.
+    const pagerLabel = words.pagination || (textName ? `${textName} pages` : undefined);
+    const pagerName = pagerLabel ? { 'aria-label': pagerLabel } : {};
+    const toolbarContent = toolbar?.(table);
+    const hasToolbar = hasSearch || isShown(toolbarContent);
+    return (jsxRuntime.jsxs("div", { ref: ref, className: rootClass, ...rest, children: [hasToolbar && (jsxRuntime.jsxs("div", { className: toolbarClass, children: [hasSearch && (jsxRuntime.jsx(Input, { label: words.search, ...table.getSearchProps() })), isShown(toolbarContent) && (jsxRuntime.jsx("div", { className: actionsClass, children: toolbarContent }))] })), isResponsive ? (jsxRuntime.jsx(ScrollArea, { orientation: "horizontal", ...scrollName, children: tableElement })) : (tableElement), jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", style: visuallyHidden, children: said }), pageCount > 1 && (jsxRuntime.jsx(Pagination, { ...table.getPaginationProps(), ...pagerName }))] }));
 });
-const DescriptionList = withSubComponents(DescriptionListRoot, {
-    Item: DescriptionListItem,
-    Label: DescriptionListLabel,
-    Value: DescriptionListValue,
-}, 'DescriptionList');
+DataTable.displayName = 'DataTable';
 
 /**
- * The `Divider` component renders a styled horizontal rule (`<hr>`) element with Bulma helper class integration.
+ * The `Block` component renders a simple container with Bulma's `.block` class, adding vertical margin between sections of content.
  *
  * @function
- * @param {DividerProps} props - Props for the Divider component.
- * @returns {JSX.Element} The rendered hr element.
+ * @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 Divider = ({ className, bgColor, ...props }) => {
+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();
-    const dividerClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return jsxRuntime.jsx("hr", { className: dividerClasses || undefined, ...rest });
+    const bulmaClasses = usePrefixedClassNames('block');
+    const blockClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("div", { className: blockClasses, ...rest, children: children }));
 };
 
 /**
- * The `Emphasis` component renders a styled `<em>` element with Bulma helper class integration.
+ * The `Box` component renders a bordered, padded container with an optional shadow using Bulma's `.box` class.
  *
  * @function
- * @param {EmphasisProps} props - Props for the Emphasis component.
- * @returns {JSX.Element} The rendered em element.
+ * @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 Emphasis = ({ className, textColor, bgColor, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
+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,
     });
-    const bulmaClasses = usePrefixedClassNames();
-    const emphasisClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("em", { className: emphasisClasses || undefined, ...rest, children: children }));
+    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 }));
 };
 
 /**
- * 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.
+ * The `Code` component renders a styled `<code>` element with Bulma helper class integration.
  *
  * @function
- * @param {FigureCaptionProps} props - Props for the FigureCaption component.
- * @returns {JSX.Element} The rendered figcaption element.
+ * @param {CodeProps} props - Props for the Code component.
+ * @returns {JSX.Element} The rendered code element.
  */
-const FigureCaption = ({ className, textColor, bgColor, children, ...props }) => {
+const Code = ({ 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 codeClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("code", { className: codeClasses || undefined, ...rest, children: children }));
 };
+
+const validColorSwatchSizes = ['small', 'medium', 'large'];
 /**
- * The `Figure` component renders a styled `<figure>` element with Bulma helper class integration.
+ * The `ColorSwatch` component shows a color as a small chip, named by its label or by the color itself.
+ *
+ * It's an image to assistive tech, so the color is always there in words.
+ * In forced colors it keeps its color, edged in the system's text color.
  *
  * @function
- * @param {FigureProps} props - Props for the Figure component.
- * @returns {JSX.Element} The rendered figure element.
+ * @param {ColorSwatchProps} props - Props for the ColorSwatch component.
+ * @param {React.Ref<HTMLSpanElement>} ref - Forwarded ref to the `<span>`.
+ * @returns {JSX.Element} The rendered swatch.
+ *
+ * @example
+ * <ColorSwatch color="#1e6b99" label="Brand blue" />
  */
-const FigureComponent = ({ className, textColor, bgColor, children, ...props }) => {
+const ColorSwatch = React.forwardRef(({ className, textColor, color, label, size, isRounded, children, style, ...props }, ref) => {
     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');
+    const unnamed = /^\s*var\(/i.test(color) &&
+        !label &&
+        !rest['aria-label'] &&
+        !rest['aria-labelledby'] &&
+        !rest['aria-hidden'];
+    React.useEffect(() => {
+        if (unnamed) {
+            warnOnce('ColorSwatch:unnamed-var', '[bestax-bulma] <ColorSwatch> shows a CSS variable with no label, ' +
+                'so a screen reader reads the var() as its name. Pass label, ' +
+                'such as "Primary".');
+        }
+    }, [unnamed]);
+    const swatchClass = usePrefixedClassNames('color-swatch', {
+        [`is-${size}`]: !!size && validColorSwatchSizes.includes(size),
+        'is-rounded': !!isRounded,
+    });
+    return (jsxRuntime.jsx("span", { ref: ref, className: classNames(swatchClass, bulmaHelperClasses, className), style: { ...style, ['--color-swatch-color']: color }, ...rest, role: "img", "aria-label": rest['aria-label'] || label || color, children: children !== undefined && children !== null && (jsxRuntime.jsx("span", { "aria-hidden": "true", children: children })) }));
+});
+ColorSwatch.displayName = 'ColorSwatch';
 
+// Valid size modifiers for the content class
+const validSizes = ['small', 'medium', 'large'];
 /**
- * The `IconText` component provides a Bulma-styled horizontal arrangement of one or more `Icon` components and optional text.
+ * The `Content` component applies Bulma’s typographic styles to its children, enhancing the appearance of HTML elements like paragraphs, headings, lists, and tables.
  *
  * @function
- * @param {IconTextProps} props - Props for the IconText component.
- * @returns {JSX.Element} The rendered icon text element.
- * @see {@link https://bulma.io/documentation/elements/icon/#icon-text | Bulma IconText documentation}
+ * @param {ContentProps} props - Props for the Content component.
+ * @returns {JSX.Element} The rendered content block.
+ * @see {@link https://bulma.io/documentation/elements/content/ | Bulma Content documentation}
  */
-const IconTextComponent = ({ className, textColor, color, bgColor, iconProps, children, items, ...props }) => {
+const Content = ({ className, textColor, color, bgColor, size, children, ...props }) => {
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
@@ -13661,23 +14344,24 @@ const IconTextComponent = ({ className, textColor, color, bgColor, iconProps, ch
         backgroundColor: bgColor,
         ...props,
     });
-    const bulmaClasses = usePrefixedClassNames('icon-text');
-    const iconTextClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("span", { className: iconTextClasses, ...rest, children: items ? (items.map((item, index) => (jsxRuntime.jsxs(React.Fragment, { children: [item.iconProps &&
-                    (isIconProps(item.iconProps) ? (jsxRuntime.jsx(Icon, { ...item.iconProps })) : (jsxRuntime.jsx(Icon, { children: item.iconProps }))), item.text && jsxRuntime.jsx("span", { children: item.text })] }, index)))) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconProps &&
-                    (isIconProps(iconProps) ? (jsxRuntime.jsx(Icon, { ...iconProps })) : (jsxRuntime.jsx(Icon, { children: iconProps }))), children && jsxRuntime.jsx("span", { children: children })] })) }));
+    const bulmaClasses = usePrefixedClassNames('content', {
+        [`is-${size}`]: size && size !== 'normal' && validSizes.includes(size),
+    });
+    const contentClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("div", { className: contentClasses, ...rest, children: children }));
 };
-const IconText = withSubComponents(IconTextComponent, { Icon }, 'IconText');
 
 /**
- * The `Image` component wraps images, iframes, or custom content in a Bulma-styled container, supporting fixed sizes, aspect ratios, rounded corners, retina images, and all Bulma helper props for color and spacing.
+ * The `Delete` component provides a Bulma-styled close/delete button for dismissing modals, notifications, tags, messages, and more.
+ *
+ * It renders `type="button"`, so a delete button inside a form does not submit it.
  *
  * @function
- * @param {ImageProps} props - Props for the Image component.
- * @returns {JSX.Element} The rendered image element.
- * @see {@link https://bulma.io/documentation/elements/image/ | Bulma Image documentation}
+ * @param {DeleteProps} props - Props for the Delete component.
+ * @returns {JSX.Element} The rendered delete button.
+ * @see {@link https://bulma.io/documentation/elements/delete/ | Bulma Delete documentation}
  */
-const Image = ({ as, className, textColor, color, bgColor, size, isRounded, isRetina, src, alt, children, ...props }) => {
+const Delete = ({ className, textColor, color, bgColor, onClick, size, ariaLabel, disabled = false, ...props }) => {
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
@@ -13686,150 +14370,412 @@ const Image = ({ as, className, textColor, color, bgColor, size, isRounded, isRe
         backgroundColor: bgColor,
         ...props,
     });
-    // Bulma reads `.has-ratio` only on a child of the ratio container, so the
-    // container carries just its `is-<ratio>` class.
-    const bulmaClasses = usePrefixedClassNames('image', {
+    const bulmaClasses = usePrefixedClassNames('delete', {
         [`is-${size}`]: size,
+        'is-disabled': disabled,
     });
-    const imageClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    // Default tag logic: if "as" is provided, use it.
-    // If not, use <figure> for aspect ratios, <div> otherwise.
-    const Tag = as ?? (size?.includes('by') ? 'figure' : 'div');
-    const roundedClass = usePrefixedClassNames('is-rounded');
-    const content = children ? (children) : (jsxRuntime.jsx("img", { className: classNames({ [roundedClass]: isRounded }) || undefined, src: src, alt: alt, ...(isRetina && src ? { srcSet: `${src} 2x` } : {}) }));
-    return (jsxRuntime.jsx(Tag, { className: imageClasses, ...rest, children: content }));
+    const classes = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("button", { className: classes, onClick: onClick, disabled: disabled, ...rest, "aria-label": rest['aria-label'] || ariaLabel || 'Close', type: buttonType(rest.type) }));
 };
 
+const validDescriptionListOrientations = ['vertical', 'horizontal'];
+const isOrientation = (orientation) => !!orientation &&
+    validDescriptionListOrientations.includes(orientation);
+/** Whether a prop was given something to render. */
+const isGiven = (node) => node !== undefined &&
+    node !== null &&
+    typeof node !== 'boolean' &&
+    node !== '';
 /**
- * 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.
+ * A label, the name of a fact: a `<dt>`, in the weaker text color.
  *
  * @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.
+ * @param {DescriptionListLabelProps} props - Props for DescriptionList.Label.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<dt>`.
+ * @returns {JSX.Element} The rendered label.
  *
  * @example
- * <Kbd.Group>
- *   <Kbd>Ctrl</Kbd>
- *   <Kbd>Shift</Kbd>
- *   <Kbd>P</Kbd>
- * </Kbd.Group>
+ * <DescriptionList.Label>Placed on</DescriptionList.Label>
+ */
+const DescriptionListLabel = React.forwardRef(({ className, textColor, bgColor, children, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const labelClass = usePrefixedClassNames('description-list-label');
+    return (jsxRuntime.jsx("dt", { ref: ref, className: classNames(labelClass, bulmaHelperClasses, className), ...rest, children: children }));
+});
+DescriptionListLabel.displayName = 'DescriptionList.Label';
+/**
+ * A value, what the label says about the thing: a `<dd>`. An item may have several.
+ *
+ * @function
+ * @param {DescriptionListValueProps} props - Props for DescriptionList.Value.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<dd>`.
+ * @returns {JSX.Element} The rendered value.
  *
  * @example
- * <Kbd.Group separator="then">
- *   <Kbd>G</Kbd>
- *   <Kbd>I</Kbd>
- * </Kbd.Group>
+ * <DescriptionList.Value>14 October 2026</DescriptionList.Value>
  */
-const KbdGroup = React.forwardRef(({ className, textColor, separator = '+', children, ...props }, ref) => {
+const DescriptionListValue = React.forwardRef(({ className, textColor, bgColor, children, ...props }, ref) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
+        backgroundColor: bgColor,
         ...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))) }));
+    const valueClass = usePrefixedClassNames('description-list-value');
+    return (jsxRuntime.jsx("dd", { ref: ref, className: classNames(valueClass, bulmaHelperClasses, className), ...rest, children: children }));
 });
-KbdGroup.displayName = 'Kbd.Group';
+DescriptionListValue.displayName = 'DescriptionList.Value';
 /**
- * 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.
+ * One fact: its label and its value, in a `<div>`, from the `label` and `value` props or from `Label` and `Value` children.
  *
  * @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 {DescriptionListItemProps} props - Props for DescriptionList.Item.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the `<div>`.
+ * @returns {JSX.Element} The rendered item.
  *
  * @example
- * <Kbd>Esc</Kbd>
+ * <DescriptionList.Item label="Order" value="#1234" />
  *
  * @example
- * <Kbd label="Command">⌘</Kbd>
+ * <DescriptionList.Item label="Tags">
+ *   <DescriptionList.Value>Gift</DescriptionList.Value>
+ *   <DescriptionList.Value>Priority</DescriptionList.Value>
+ * </DescriptionList.Item>
  */
-const KbdRoot = React.forwardRef(({ className, textColor, bgColor, label, children, ...props }, ref) => {
+const DescriptionListItem = React.forwardRef(({ className, label, value, textColor, bgColor, children, ...props }, ref) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const kbdClass = usePrefixedClassNames('kbd');
-    // The name is text rather than an aria-label, which ARIA in HTML
-    // prohibits on kbd. Its styles are inline, so it stays hidden in a
-    // modular build that leaves out Bulma's helper classes.
-    return (jsxRuntime.jsx("kbd", { ref: ref, className: classNames(kbdClass, bulmaHelperClasses, className), ...rest, children: label ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { "aria-hidden": "true", children: children }), jsxRuntime.jsx("span", { style: visuallyHidden, children: label })] })) : (children) }));
+    const itemClass = usePrefixedClassNames('description-list-item');
+    return (jsxRuntime.jsxs("div", { ref: ref, className: classNames(itemClass, bulmaHelperClasses, className), ...rest, children: [isGiven(label) && jsxRuntime.jsx(DescriptionListLabel, { children: label }), children, isGiven(value) && jsxRuntime.jsx(DescriptionListValue, { children: value })] }));
 });
-const Kbd = withSubComponents(KbdRoot, { Group: KbdGroup }, 'Kbd');
-
+DescriptionListItem.displayName = 'DescriptionList.Item';
 /**
- * The `Link` component renders a styled anchor (`<a>`) element with Bulma helper class integration.
+ * The `DescriptionList` component lists facts about one thing, each a label and its value, such as an order's details or a profile.
+ *
+ * It's a `<dl>`, with a `<div>` for each item, a `<dt>` for each label and
+ * a `<dd>` for each value, so assistive tech gets HTML's own list of terms
+ * and definitions and no roles are added. Labels sit above their values on
+ * a phone and beside them from Bulma's tablet breakpoint up, where every
+ * label shares one column so the values line up. For data with two
+ * dimensions, such as several records with the same fields, use a `Table`.
  *
  * @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}
+ * @param {DescriptionListProps} props - Props for the DescriptionList component.
+ * @param {React.Ref<HTMLDListElement>} ref - Forwarded ref to the `<dl>`.
+ * @returns {JSX.Element} The rendered list.
+ *
+ * @example
+ * <DescriptionList aria-labelledby="order-heading">
+ *   <DescriptionList.Item label="Order" value="#1234" />
+ *   <DescriptionList.Item label="Placed on" value="14 October 2026" />
+ * </DescriptionList>
  */
-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 DescriptionListRoot = React.forwardRef(({ className, orientation, orientationMobile, orientationTablet, orientationDesktop, orientationWidescreen, orientationFullhd, hasDividers, textColor, bgColor, children, ...props }, ref) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const bulmaClasses = usePrefixedClassNames({
-        'is-active': isActive,
+    // A class for each orientation given, which the stylesheet applies from
+    // that viewport's breakpoint, so the layout is right on the first paint
+    // and on the server. With none, the stylesheet's default is responsive.
+    const rootClass = usePrefixedClassNames('description-list', {
+        [`is-${orientation}`]: isOrientation(orientation),
+        [`is-${orientationMobile}-mobile`]: isOrientation(orientationMobile),
+        [`is-${orientationTablet}-tablet`]: isOrientation(orientationTablet),
+        [`is-${orientationDesktop}-desktop`]: isOrientation(orientationDesktop),
+        [`is-${orientationWidescreen}-widescreen`]: isOrientation(orientationWidescreen),
+        [`is-${orientationFullhd}-fullhd`]: isOrientation(orientationFullhd),
+        'has-dividers': !!hasDividers,
     });
-    const linkClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx(Component, { ref: ref, className: linkClasses || undefined, ...rest, ...(Component === 'button' ? { type: buttonType(rest.type) } : {}), children: children }));
+    return (jsxRuntime.jsx("dl", { ref: ref, className: classNames(rootClass, bulmaHelperClasses, className), ...rest, children: children }));
 });
-Link.displayName = 'Link';
+const DescriptionList = withSubComponents(DescriptionListRoot, {
+    Item: DescriptionListItem,
+    Label: DescriptionListLabel,
+    Value: DescriptionListValue,
+}, 'DescriptionList');
 
 /**
- * The `ListItem` component renders a styled list item (`<li>`) element with Bulma helper class integration.
+ * The `Divider` component renders a styled horizontal rule (`<hr>`) element with Bulma helper class integration.
  *
  * @function
- * @param {ListItemProps} props - Props for the ListItem component.
- * @returns {JSX.Element} The rendered li element.
+ * @param {DividerProps} props - Props for the Divider component.
+ * @returns {JSX.Element} The rendered hr element.
  */
-const ListItem = ({ className, textColor, bgColor, children, ...props }) => {
+const Divider = ({ className, bgColor, ...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 }));
+    const dividerClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return jsxRuntime.jsx("hr", { className: dividerClasses || undefined, ...rest });
 };
 
 /**
- * The `Loader` component renders Bulma's `.loader`, a small spinning ring for inline loading states.
+ * The `Emphasis` component renders a styled `<em>` element with Bulma helper class integration.
  *
- * 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 {EmphasisProps} props - Props for the Emphasis component.
+ * @returns {JSX.Element} The rendered em element.
+ */
+const Emphasis = ({ className, textColor, bgColor, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames();
+    const emphasisClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("em", { className: emphasisClasses || undefined, ...rest, children: children }));
+};
+
+/**
+ * FigureCaption component for rendering a styled figcaption element.
+ *
+ * A FigureCaption wraps the HTML `<figcaption>` element with Bulma helper class integration.
+ * Use it inside Figure components to provide captions for images or other media.
+ *
+ * @function
+ * @param {FigureCaptionProps} props - Props for the FigureCaption component.
+ * @returns {JSX.Element} The rendered figcaption element.
+ */
+const FigureCaption = ({ className, textColor, bgColor, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames();
+    const captionClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("figcaption", { className: captionClasses || undefined, ...rest, children: children }));
+};
+/**
+ * The `Figure` component renders a styled `<figure>` element with Bulma helper class integration.
+ *
+ * @function
+ * @param {FigureProps} props - Props for the Figure component.
+ * @returns {JSX.Element} The rendered figure element.
+ */
+const FigureComponent = ({ className, textColor, bgColor, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames();
+    const figureClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("figure", { className: figureClasses || undefined, ...rest, children: children }));
+};
+/**
+ * Figure component with Caption subcomponent.
+ *
+ * @example
+ * <Figure>
+ *   <img src="image.jpg" alt="Description" />
+ *   <Figure.Caption>Image caption text</Figure.Caption>
+ * </Figure>
+ */
+const Figure = withSubComponents(FigureComponent, {
+    Caption: FigureCaption,
+}, 'Figure');
+
+/**
+ * The `IconText` component provides a Bulma-styled horizontal arrangement of one or more `Icon` components and optional text.
+ *
+ * @function
+ * @param {IconTextProps} props - Props for the IconText component.
+ * @returns {JSX.Element} The rendered icon text element.
+ * @see {@link https://bulma.io/documentation/elements/icon/#icon-text | Bulma IconText documentation}
+ */
+const IconTextComponent = ({ className, textColor, color, bgColor, iconProps, children, items, ...props }) => {
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames('icon-text');
+    const iconTextClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("span", { className: iconTextClasses, ...rest, children: items ? (items.map((item, index) => (jsxRuntime.jsxs(React.Fragment, { children: [item.iconProps &&
+                    (isIconProps(item.iconProps) ? (jsxRuntime.jsx(Icon, { ...item.iconProps })) : (jsxRuntime.jsx(Icon, { children: item.iconProps }))), item.text && jsxRuntime.jsx("span", { children: item.text })] }, index)))) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconProps &&
+                    (isIconProps(iconProps) ? (jsxRuntime.jsx(Icon, { ...iconProps })) : (jsxRuntime.jsx(Icon, { children: iconProps }))), children && jsxRuntime.jsx("span", { children: children })] })) }));
+};
+const IconText = withSubComponents(IconTextComponent, { Icon }, 'IconText');
+
+/**
+ * The `Image` component wraps images, iframes, or custom content in a Bulma-styled container, supporting fixed sizes, aspect ratios, rounded corners, retina images, and all Bulma helper props for color and spacing.
+ *
+ * @function
+ * @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,
+    });
+    // Bulma reads `.has-ratio` only on a child of the ratio container, so the
+    // container carries just its `is-<ratio>` class.
+    const bulmaClasses = usePrefixedClassNames('image', {
+        [`is-${size}`]: size,
+    });
+    const imageClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    // Default tag logic: if "as" is provided, use it.
+    // If not, use <figure> for aspect ratios, <div> otherwise.
+    const Tag = as ?? (size?.includes('by') ? 'figure' : 'div');
+    const roundedClass = usePrefixedClassNames('is-rounded');
+    const content = children ? (children) : (jsxRuntime.jsx("img", { className: classNames({ [roundedClass]: isRounded }) || undefined, src: src, alt: alt, ...(isRetina && src ? { srcSet: `${src} 2x` } : {}) }));
+    return (jsxRuntime.jsx(Tag, { className: imageClasses, ...rest, children: content }));
+};
+
+/**
+ * Keys pressed together or one after another, in the outer `<kbd>` HTML gives a combination, with the separator between each pair as text.
+ *
+ * It doesn't wrap in the middle and isn't drawn as a key itself. It sets no
+ * font size, so the keys in it are the size of a key on its own.
+ *
+ * @function
+ * @param {KbdGroupProps} props - Props for Kbd.Group.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the outer `<kbd>`.
+ * @returns {JSX.Element} The rendered combination.
+ *
+ * @example
+ * <Kbd.Group>
+ *   <Kbd>Ctrl</Kbd>
+ *   <Kbd>Shift</Kbd>
+ *   <Kbd>P</Kbd>
+ * </Kbd.Group>
+ *
+ * @example
+ * <Kbd.Group separator="then">
+ *   <Kbd>G</Kbd>
+ *   <Kbd>I</Kbd>
+ * </Kbd.Group>
+ */
+const KbdGroup = React.forwardRef(({ className, textColor, separator = '+', children, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        ...props,
+    });
+    const groupClass = usePrefixedClassNames('kbd-group');
+    const separatorClass = usePrefixedClassNames('kbd-separator');
+    // Null, undefined and booleans drop out, and Fragments are opened up, so
+    // an empty Fragment leaves no separator behind and the keys in one are
+    // separated like the rest. The spaces are part of the text, so a screen
+    // reader reads "Ctrl plus S" rather than one run-together word, whatever
+    // the CSS does.
+    const keys = flattenChildren(children);
+    return (jsxRuntime.jsx("kbd", { ref: ref, className: classNames(groupClass, bulmaHelperClasses, className), ...rest, children: keys.map((key, index) => (jsxRuntime.jsxs(React.Fragment, { children: [index > 0 && (jsxRuntime.jsx("span", { className: separatorClass, children: ` ${separator} ` })), key] }, React.isValidElement(key) && key.key != null ? key.key : index))) }));
+});
+KbdGroup.displayName = 'Kbd.Group';
+/**
+ * The `Kbd` component renders a `<kbd>` drawn as a keycap, for a key the reader presses.
+ *
+ * It only shows the key: it doesn't listen for it. The key takes its colors
+ * from the text it sits in, and its size in `em`, so it fits a paragraph, a
+ * title or a filled button as it is, and `textSize` sizes it outright. For a
+ * combination or a sequence, put the keys in a `Kbd.Group`. What tells
+ * assistive tech a control has a shortcut is `aria-keyshortcuts` on that
+ * control, with `Kbd` as the hint people see next to it.
+ *
+ * @function
+ * @param {KbdProps} props - Props for the Kbd component.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<kbd>`.
+ * @returns {JSX.Element} The rendered key.
+ *
+ * @example
+ * <Kbd>Esc</Kbd>
+ *
+ * @example
+ * <Kbd label="Command">⌘</Kbd>
+ */
+const KbdRoot = React.forwardRef(({ className, textColor, bgColor, label, children, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const kbdClass = usePrefixedClassNames('kbd');
+    // The name is text rather than an aria-label, which ARIA in HTML
+    // prohibits on kbd. Its styles are inline, so it stays hidden in a
+    // modular build that leaves out Bulma's helper classes.
+    return (jsxRuntime.jsx("kbd", { ref: ref, className: classNames(kbdClass, bulmaHelperClasses, className), ...rest, children: label ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { "aria-hidden": "true", children: children }), jsxRuntime.jsx("span", { style: visuallyHidden, children: label })] })) : (children) }));
+});
+const Kbd = withSubComponents(KbdRoot, { Group: KbdGroup }, 'Kbd');
+
+/**
+ * The `Link` component renders a styled anchor (`<a>`) element with Bulma helper class integration.
+ *
+ * @function
+ * @param {LinkProps} props - Props for the Link component.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered anchor, or whatever `as` names.
+ * @see {@link https://bulma.io/documentation/elements/content/ | Bulma Content documentation}
+ */
+const Link = React.forwardRef(function Link(linkProps, ref) {
+    const { className, textColor, bgColor, isActive, as: Component = 'a', children, ...props } = linkProps;
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames({
+        'is-active': isActive,
+    });
+    const linkClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx(Component, { ref: ref, className: linkClasses || undefined, ...rest, ...(Component === 'button' ? { type: buttonType(rest.type) } : {}), children: children }));
+});
+Link.displayName = 'Link';
+
+/**
+ * The `ListItem` component renders a styled list item (`<li>`) element with Bulma helper class integration.
+ *
+ * @function
+ * @param {ListItemProps} props - Props for the ListItem component.
+ * @returns {JSX.Element} The rendered li element.
+ */
+const ListItem = ({ className, textColor, bgColor, children, ...props }) => {
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames();
+    const itemClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("li", { className: itemClasses || undefined, ...rest, children: children }));
+};
+
+/**
+ * The `Loader` component renders Bulma's `.loader`, a small spinning ring for inline loading states.
+ *
+ * The ring is `1em` square, so `textSize` scales it. It is exposed as an
+ * indeterminate `progressbar` named by `ariaLabel`, and it stops spinning
+ * under `prefers-reduced-motion: reduce` while staying drawn. In forced
+ * colors its two open sides take the page's color, so it stays open.
  *
  * @function
  * @param {LoaderProps} props - Props for the Loader component.
@@ -14235,7 +15181,7 @@ const validRingProgressColors = [
     'white',
 ];
 const validRingProgressSizes = ['small', 'medium', 'large'];
-const clamp$2 = (value, low, high) => Math.min(Math.max(value, low), high);
+const clamp$4 = (value, low, high) => Math.min(Math.max(value, low), high);
 /**
  * The `RingProgress` component draws a value as a ring that fills as it grows, with anything you pass shown in the middle.
  *
@@ -14273,7 +15219,7 @@ const RingProgress = React.forwardRef(({ className, textColor, bgColor, value, m
         }
     }, [named, mixed]);
     const total = max > 0 ? max : 100;
-    const share = (part) => (clamp$2(part, 0, total) / total) * 100;
+    const share = (part) => (clamp$4(part, 0, total) / total) * 100;
     // Each arc starts where the one before ended, and the last stops at the
     // top, so a total over max fills the ring and no more.
     const arcs = [];
@@ -14319,7 +15265,7 @@ const RingProgress = React.forwardRef(({ className, textColor, bgColor, value, m
         }
         : {
             role: isMeter ? 'meter' : 'progressbar',
-            'aria-valuenow': clamp$2(value ?? 0, 0, total),
+            'aria-valuenow': clamp$4(value ?? 0, 0, total),
             'aria-valuemin': 0,
             'aria-valuemax': total,
             'aria-label': label || rest['aria-label'],
@@ -14334,31 +15280,7 @@ const RingProgress = React.forwardRef(({ className, textColor, bgColor, value, m
 RingProgress.displayName = 'RingProgress';
 
 /**
- * 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 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 }));
-};
-
-/**
- * The `Span` component renders a styled inline `<span>` element with Bulma helper class integration.
+ * The `Span` component renders a styled inline `<span>` element with Bulma helper class integration.
  *
  * @function
  * @param {SpanProps} props - Props for the Span component.
@@ -14440,216 +15362,6 @@ const SubTitle = ({ className, size, as = 'h1', hasSkeleton, textColor, bgColor,
     return (jsxRuntime.jsx(Tag, { className: subTitleClasses, ...rest, children: children }));
 };
 
-/**
- * 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 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 }));
-};
-
-/**
- * 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 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 }));
-};
-
-/**
- * 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 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 }));
-};
-
-/**
- * The `isAligned` values `Th` and `Td` accept. Each one writes
- * `has-text-<value>` on the cell, and a value outside the tuple adds no class.
- *
- * One copy, imported by both cells, so a header and its body cells always
- * take the same values.
- *
- * Its own module rather than `Th.tsx` or `Td.tsx` because `src/index.ts`
- * wildcard-exports those files, and everything published there is public
- * forever. `iconProps.ts` makes the same call.
- */
-const validTableAlignments = ['left', 'right', 'centered'];
-
-/**
- * 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 validTableColors = [
-    'primary',
-    'link',
-    'info',
-    'success',
-    'warning',
-    'danger',
-    'black',
-    'dark',
-    'light',
-    'white',
-];
-/**
- * Td component for rendering a styled Bulma table cell.
- *
- * Supports alignment, 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, isAligned, color, children, ...props }) => {
-    const bulmaClasses = usePrefixedClassNames('', {
-        [`has-text-${isAligned}`]: isAligned && validTableAlignments.includes(isAligned),
-        [`is-${color}`]: color && validTableColors.includes(color),
-    });
-    /**
-     * Generates Bulma helper classes and separates out remaining props.
-     */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const tdClasses = classNames(bulmaClasses, 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 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 }));
-};
-
-/**
- * Th component for rendering a styled Bulma table header cell.
- *
- * Supports alignment, width, and color modifiers.
- *
- * @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 && validTableAlignments.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.
- *
- * @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 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',
@@ -14964,20 +15676,528 @@ const CheckboxesComponent = ({ label, labelSize, labelProps, horizontal, message
 };
 const Checkboxes = withSubComponents(CheckboxesComponent, { Checkbox }, 'Checkboxes');
 
-// What an unlabeled Field passes on: no label names anything inside.
-const NO_LABEL = {};
+const noFiles = [];
+const noRefusals = [];
+const noAnnouncements = [];
+const describeAnnouncement = (announcement) => announcement.text;
+/**
+ * The tokens of an `accept` attribute that HTML recognizes, lowercased: an
+ * extension (`.pdf`), a wildcard (`image/*`) or a MIME type. Others are
+ * ignored, as browsers ignore them.
+ */
+const acceptTokens = (accept) => (accept ?? '')
+    .split(',')
+    .map(token => token.trim().toLowerCase())
+    .filter(token => token.length > 1 && (token[0] === '.' || token.includes('/')));
+/** Whether `accept`'s tokens take a file with this name and type. */
+const accepts = (tokens, name, type) => {
+    if (tokens.length === 0)
+        return true;
+    const lowerName = name.toLowerCase();
+    const lowerType = type.toLowerCase();
+    return tokens.some(token => token[0] === '.'
+        ? lowerName.endsWith(token)
+        : token.endsWith('/*')
+            ? lowerType.startsWith(token.slice(0, -1))
+            : lowerType === token);
+};
+/** Whether a drag or a clipboard carries files. */
+const carriesFiles = (data) => !!data && Array.from(data.types ?? []).includes('Files');
+/** The files a drop or a paste brings, with folders marked. */
+const incomingFrom = (data) => {
+    if (!data)
+        return [];
+    const items = Array.from(data.items ?? []).filter(item => item.kind === 'file');
+    if (items.length === 0) {
+        return Array.from(data.files ?? [], file => ({ file, folder: false }));
+    }
+    const incoming = [];
+    for (const item of items) {
+        const file = item.getAsFile();
+        if (!file)
+            continue;
+        const entry = item.webkitGetAsEntry?.();
+        incoming.push({ file, folder: !!entry?.isDirectory });
+    }
+    return incoming;
+};
+/** The same file: one object, or one picked again with the same details. */
+const sameFile = (a, b) => a === b ||
+    (a.name === b.name && a.size === b.size && a.lastModified === b.lastModified);
+/** Whether two lists hold the same files in the same order. */
+const sameFiles = (a, b) => !!a && a.length === b.length && b.every((file, i) => sameFile(a[i], file));
+/**
+ * Writes files to a file input, through a `DataTransfer`, the one way script
+ * can build a `FileList`. Where there's no `DataTransfer` the input is left as
+ * it is.
+ */
+const writeFiles = (input, files) => {
+    if (typeof DataTransfer !== 'function')
+        return;
+    const transfer = new DataTransfer();
+    for (const file of files)
+        transfer.items.add(file);
+    input.files = transfer.files;
+};
+/** The units a file size is written in, largest first. */
+const sizeUnits = [
+    ['gigabyte', 1e9, 'GB'],
+    ['megabyte', 1e6, 'MB'],
+    ['kilobyte', 1e3, 'kB'],
+];
 /**
- * The `Fieldset` component groups a section of a form in a native
- * `<fieldset>`, named by its `legend`, which a `disabled` switches off as a
- * whole.
- *
- * It starts its own Field scope: inside it, nothing reads as inside a
- * `Field` or `Control`, so the convenience inputs render their own `Field`,
- * and a labeled `Field` around the Fieldset names nothing in it.
+ * A file size for display, in decimal units ("1.2 MB"), in the locale of a
+ * `LocaleProvider` around it, or as English writes it outside one.
+ */
+const formatFileSize = (bytes, formatNumber) => {
+    for (const [unit, factor, symbol] of sizeUnits) {
+        if (bytes >= factor) {
+            const value = bytes / factor;
+            return formatNumber
+                ? formatNumber(value, {
+                    style: 'unit',
+                    unit,
+                    unitDisplay: 'short',
+                    maximumFractionDigits: 1,
+                })
+                : `${Math.round(value * 10) / 10} ${symbol}`;
+        }
+    }
+    return formatNumber
+        ? formatNumber(bytes, { style: 'unit', unit: 'byte', unitDisplay: 'long' })
+        : `${bytes} ${bytes === 1 ? 'byte' : 'bytes'}`;
+};
+/** A word for each kind of file `accept` names: "PDF", "image". */
+const typeNames = (tokens) => {
+    const names = [];
+    for (const token of tokens) {
+        let name = token;
+        if (token[0] === '.') {
+            name = token.slice(1).toUpperCase();
+        }
+        else {
+            const [type, subtype] = token.split('/');
+            const core = subtype.split('+')[0];
+            if (subtype === '*')
+                name = type;
+            else if (core === 'plain')
+                name = 'text';
+            else if (/^[a-z0-9]+$/.test(core))
+                name = core.toUpperCase();
+        }
+        if (!names.includes(name))
+            names.push(name);
+    }
+    return names;
+};
+/** "A", "A or B", "A, B, or C". */
+const orList = (items) => items.length <= 2
+    ? items.join(' or ')
+    : `${items.slice(0, -1).join(', ')}, or ${items[items.length - 1]}`;
+/**
+ * The `Dropzone` component is an area to drop files on or click to pick
+ * them, which checks each file and lists the chosen ones with a way to remove
+ * each.
+ *
+ * It's Bulma's boxed, full-width file widget with the real
+ * `<input type="file">` lying over it, so the input is the one tab stop, the
+ * click target and the drop target, and Enter and Space open the picker. The
+ * input holds the chosen files: a pick, drop or paste that passes the checks
+ * is written to it, so a form submits the files under `name`. It doesn't
+ * upload anything.
  *
  * @function
- * @param {FieldsetProps} props - Props for the Fieldset component.
- * @returns {JSX.Element} The rendered fieldset.
+ * @param {DropzoneProps} props - Props for the Dropzone component.
+ * @returns {JSX.Element} The rendered dropzone.
+ *
+ * @example
+ * <Dropzone
+ *   label="CV"
+ *   name="cv"
+ *   accept=".pdf,application/pdf"
+ *   maxSize={5_000_000}
+ *   hint="PDF up to 5 MB"
+ * />
+ */
+const Dropzone = React.forwardRef(({ 
+// Field props
+label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, color, size, buttonLabel, icon, hint, maxSize, maxFiles, files: filesProp, onFilesChange, onReject, showFileList = true, allowPaste = true, preventDocumentDrop = true, removeLabel, rejectionMessage, addedMessage, removedMessage, className, accept, multiple, disabled: disabledProp, onChange, onClick, onDragEnter, onDragOver, onDragLeave, onDrop, onPaste, 'aria-describedby': ariaDescribedBy, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
+    const controlled = filesProp !== undefined;
+    const [ownFiles, setOwnFiles] = React.useState(noFiles);
+    const files = filesProp ?? ownFiles;
+    // A render the controlled list needs after a change, so that one the app
+    // didn't take is undone.
+    const [, rerender] = React.useReducer((n) => n + 1, 0);
+    const [refusals, setRefusals] = React.useState(noRefusals);
+    const [drag, setDrag] = React.useState(null);
+    const [announcements, setAnnouncements] = React.useState(noAnnouncements);
+    const inputRef = React.useRef(null);
+    const listRef = React.useRef(null);
+    // Set while Dropzone dispatches the input's own events, so its change
+    // handler hands them on rather than reading them as a pick.
+    const dispatchingRef = React.useRef(false);
+    // The row a removal emptied, whose neighbour takes focus.
+    const removedRowRef = React.useRef(null);
+    const announcedRef = React.useRef(0);
+    // What the input held when it was last clicked (Enter and Space click it
+    // too), which a pick adds to: by the time the pick's change arrives, the
+    // browser has replaced the input's files with the picked ones.
+    const pickBaseRef = React.useRef(null);
+    const setInputRef = React.useCallback((node) => {
+        inputRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref) {
+            ref.current =
+                node;
+        }
+    }, [ref]);
+    const formatNumber = useNumberFormat();
+    const tokens = acceptTokens(accept);
+    const sizeText = (bytes) => formatFileSize(bytes, formatNumber);
+    const countText = (count) => formatNumber ? formatNumber(count) : String(count);
+    // The files a pick, drop or paste builds on, and a removal takes one from.
+    // Controlled, that's `files`. Uncontrolled, it's the input itself rather
+    // than the list: a script can rewrite the input through the ref, emptying
+    // it with `value = ''` or setting its `files`, and no event reports that,
+    // so the list catches up only at the next change. Where there's no
+    // DataTransfer to write the input with, the list is all there is.
+    const current = () => controlled || typeof DataTransfer !== 'function'
+        ? files
+        : Array.from(inputRef.current.files);
+    const messageFor = (refusal) => {
+        const { file, code } = refusal;
+        if (rejectionMessage)
+            return rejectionMessage({ file, code });
+        if (code === 'file-too-large') {
+            return `${file.name}: larger than ${sizeText(maxSize)}`;
+        }
+        if (code === 'too-many-files') {
+            const most = multiple ? maxFiles : 1;
+            return `${file.name}: only ${most === 1 ? 'one file' : `${countText(most)} files`}`;
+        }
+        return refusal.folder
+            ? `${file.name}: folders can't be added`
+            : `${file.name}: only ${orList(typeNames(tokens))} files`;
+    };
+    const announce = (texts) => {
+        if (texts.length === 0)
+            return;
+        const batch = ++announcedRef.current;
+        setAnnouncements(texts.map((text, i) => ({ id: `${batch}-${i}`, text })));
+    };
+    /**
+     * Makes `next` the chosen files: writes them to the input, and when they
+     * differ from the list, dispatches the input's `input` and `change` and
+     * reports the new list.
+     */
+    const commit = (next) => {
+        pickBaseRef.current = null;
+        const input = inputRef.current;
+        if (!sameFiles(input.files, next))
+            writeFiles(input, next);
+        if (sameFiles(files, next))
+            return;
+        if (controlled)
+            rerender();
+        else
+            setOwnFiles(next);
+        onFilesChange?.(next);
+        dispatchingRef.current = true;
+        try {
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+            input.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+        finally {
+            dispatchingRef.current = false;
+        }
+    };
+    /** Checks the files a pick, drop or paste brings, and takes those that pass. */
+    const take = (incoming, base = current()) => {
+        const kept = multiple ? base : noFiles;
+        const room = multiple ? (maxFiles ?? Infinity) - kept.length : 1;
+        const added = [];
+        const refused = [];
+        for (const { file, folder } of incoming) {
+            const code = folder || !accepts(tokens, file.name, file.type)
+                ? 'file-invalid-type'
+                : maxSize !== undefined && file.size > maxSize
+                    ? 'file-too-large'
+                    : null;
+            if (code) {
+                refused.push({ file, code, folder });
+            }
+            else if (multiple &&
+                [...kept, ...added].some(f => sameFile(f, file))) ;
+            else if (added.length >= room) {
+                refused.push({ file, code: 'too-many-files', folder });
+            }
+            else {
+                added.push(file);
+            }
+        }
+        setRefusals(refused.length > 0 ? refused : noRefusals);
+        if (refused.length > 0) {
+            onReject?.(refused.map(({ file, code }) => ({ file, code })));
+        }
+        commit(added.length > 0 ? [...kept, ...added] : base);
+        const addedText = added.length === 0
+            ? []
+            : [
+                addedMessage
+                    ? addedMessage(added)
+                    : added.length === 1
+                        ? `${added[0].name} added`
+                        : `${countText(added.length)} files added`,
+            ];
+        announce([...addedText, ...refused.map(messageFor)]);
+    };
+    const remove = (index) => {
+        const file = files[index];
+        removedRowRef.current = index;
+        commit(current().filter(held => !sameFile(held, file)));
+        announce([
+            removedMessage ? removedMessage(file) : `${file.name} removed`,
+        ]);
+    };
+    const handleChange = (event) => {
+        if (dispatchingRef.current) {
+            onChange?.(event);
+            return;
+        }
+        // A pick: the browser has put the picked files in the input. They're
+        // added to what it held when it was clicked, or, for a picker opened
+        // with showPicker(), which clicks nothing, to the list. With none (a
+        // cancelled pick, in a browser that clears it), that stays.
+        const base = pickBaseRef.current ?? files;
+        const picked = Array.from(event.target.files ?? []);
+        if (picked.length === 0)
+            commit(base);
+        else
+            take(picked.map(file => ({ file, folder: false })), base);
+    };
+    const handleClick = (event) => {
+        onClick?.(event);
+        pickBaseRef.current = current();
+    };
+    // While files are dragged over the input it's cancelled, which makes the
+    // input the drop target and keeps the browser's own drop from running.
+    // Disabled, it refuses the drop, so the browser doesn't open the file.
+    const handleDragOver = (event) => {
+        (event.type === 'dragenter' ? onDragEnter : onDragOver)?.(event);
+        if (!carriesFiles(event.dataTransfer))
+            return;
+        event.preventDefault();
+        if (disabled) {
+            event.dataTransfer.dropEffect = 'none';
+            return;
+        }
+        event.dataTransfer.dropEffect = 'copy';
+        // Only the dragged files' types can be read, so a file is known to be
+        // refused only when `accept` names no extension and its type is known.
+        const room = multiple ? (maxFiles ?? Infinity) - current().length : 1;
+        const types = Array.from(event.dataTransfer.items ?? [])
+            .filter(item => item.kind === 'file')
+            .map(item => item.type);
+        const refused = room <= 0 ||
+            (types.length > 0 &&
+                tokens.length > 0 &&
+                !tokens.some(token => token[0] === '.') &&
+                types.every(type => type !== '' && !accepts(tokens, '', type)));
+        setDrag(refused ? 'reject' : 'over');
+    };
+    const handleDragLeave = (event) => {
+        onDragLeave?.(event);
+        setDrag(null);
+    };
+    const handleDrop = (event) => {
+        onDrop?.(event);
+        setDrag(null);
+        if (!carriesFiles(event.dataTransfer))
+            return;
+        event.preventDefault();
+        if (!disabled)
+            take(incomingFrom(event.dataTransfer));
+    };
+    const handlePaste = (event) => {
+        onPaste?.(event);
+        if (!allowPaste || disabled)
+            return;
+        const incoming = incomingFrom(event.clipboardData);
+        if (incoming.length === 0)
+            return;
+        event.preventDefault();
+        take(incoming);
+    };
+    // A controlled list: the input follows `files`, and a change the app
+    // didn't take is undone.
+    React.useEffect(() => {
+        const input = inputRef.current;
+        if (controlled && input && !sameFiles(input.files, files)) {
+            writeFiles(input, files);
+        }
+    });
+    // After a removal, focus goes to the remove button that took the removed
+    // one's place, else the one before, else the input.
+    React.useEffect(() => {
+        const row = removedRowRef.current;
+        if (row === null)
+            return;
+        removedRowRef.current = null;
+        const buttons = listRef.current?.querySelectorAll('button') ?? [];
+        const next = buttons[Math.min(row, buttons.length - 1)];
+        (next ?? inputRef.current)?.focus();
+    });
+    // A reset of the input's form empties the input, so the list and the
+    // refusals go too. The reset event fires before the form resets, and a
+    // listener after this one can still cancel it, so the list is cleared a
+    // task later, and only if the reset went ahead.
+    const latestRef = React.useRef({ files, controlled, onFilesChange });
+    React.useEffect(() => {
+        latestRef.current = { files, controlled, onFilesChange };
+    });
+    const formAttribute = props.form;
+    React.useEffect(() => {
+        const form = inputRef.current?.form;
+        if (!form)
+            return undefined;
+        let timer;
+        const onReset = (event) => {
+            timer = setTimeout(() => {
+                if (event.defaultPrevented)
+                    return;
+                const latest = latestRef.current;
+                pickBaseRef.current = null;
+                setRefusals(noRefusals);
+                if (latest.files.length === 0)
+                    return;
+                if (latest.controlled)
+                    rerender();
+                else
+                    setOwnFiles(noFiles);
+                latest.onFilesChange?.(noFiles);
+            });
+        };
+        form.addEventListener('reset', onReset);
+        return () => {
+            form.removeEventListener('reset', onReset);
+            clearTimeout(timer);
+        };
+    }, [formAttribute]);
+    // A file dropped just outside the zone would open in the tab. The guard
+    // cancels a file drag anywhere nothing else takes it, leaving alone
+    // enabled file inputs and editable fields, which take drops of their own,
+    // and drops something else already handled. It reads the event's real
+    // target, so a file input inside a shadow root is left alone too.
+    React.useEffect(() => {
+        if (!preventDocumentDrop)
+            return undefined;
+        const guard = (event) => {
+            if (event.defaultPrevented || !carriesFiles(event.dataTransfer)) {
+                return;
+            }
+            const target = event.composedPath()[0];
+            if (target instanceof Element &&
+                target.closest('input[type="file"]:not(:disabled), textarea, [contenteditable]:not([contenteditable="false"])')) {
+                return;
+            }
+            event.preventDefault();
+            if (event.type === 'dragover')
+                event.dataTransfer.dropEffect = 'none';
+        };
+        document.addEventListener('dragover', guard);
+        document.addEventListener('drop', guard);
+        return () => {
+            document.removeEventListener('dragover', guard);
+            document.removeEventListener('drop', guard);
+        };
+    }, [preventDocumentDrop]);
+    const warnsMaxFiles = maxFiles !== undefined && !multiple;
+    React.useEffect(() => {
+        if (warnsMaxFiles) {
+            warnOnce('Dropzone:maxFiles-without-multiple', '[bestax-bulma] <Dropzone maxFiles> takes effect only with ' +
+                'multiple. Without it, each new file replaces the one chosen.');
+        }
+    }, [warnsMaxFiles]);
+    const insideField = useInsideField();
+    const insideControl = useInsideControl();
+    const ownField = rendersOwnField('Dropzone', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+        label,
+        id: props.id,
+        labelProps,
+        rendersLabel: ownField,
+    });
+    const { classPrefix } = useConfig();
+    const pcn = (...args) => prefixedClassNames(classPrefix, ...args);
+    // The input takes `controlId`, so `id` stays out of the spread, where an
+    // undefined `id` key would wipe the id the label points at.
+    const { id: _id, ...inputProps } = props;
+    const { bulmaHelperClasses, rest } = useBulmaClasses(inputProps);
+    const baseId = React.useId();
+    const hintId = `${baseId}-hint`;
+    const refusalsId = `${baseId}-refusals`;
+    const messageId = `${baseId}-message`;
+    const describedBy = [
+        ariaDescribedBy,
+        hint ? hintId : undefined,
+        refusals.length > 0 ? refusalsId : undefined,
+        message ? messageId : undefined,
+    ]
+        .filter(Boolean)
+        .join(' ') || undefined;
+    const rootClass = usePrefixedClassNames('dropzone', {
+        'is-dragover': drag === 'over',
+        'is-drag-reject': drag === 'reject',
+        'is-disabled': disabled,
+    });
+    const zoneClass = usePrefixedClassNames('file', 'is-boxed', 'is-fullwidth', {
+        [`is-${color}`]: !!color,
+        [`is-${size}`]: !!size,
+    });
+    const helpClass = usePrefixedClassNames('help', {
+        [`is-${messageColor}`]: !!messageColor,
+    });
+    // Each row's key, from the file's details, which the list keeps unique.
+    const seen = new Map();
+    const keyOf = (file) => {
+        const key = `${file.name}:${file.size}:${file.lastModified}`;
+        const count = seen.get(key) ?? 0;
+        seen.set(key, count + 1);
+        return count === 0 ? key : `${key}:${count}`;
+    };
+    const dropzoneElement = (jsxRuntime.jsxs("div", { className: classNames(rootClass, bulmaHelperClasses, className), children: [jsxRuntime.jsx("div", { className: zoneClass, children: jsxRuntime.jsxs("label", { className: pcn('file-label'), children: [jsxRuntime.jsx("input", { ...rest, ref: setInputRef, className: pcn('file-input'), type: "file", id: controlId, accept: accept, multiple: multiple, disabled: disabled, "aria-describedby": describedBy, onChange: handleChange, onClick: handleClick, onDragEnter: handleDragOver, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onPaste: handlePaste }), jsxRuntime.jsxs("span", { className: pcn('file-cta'), children: [icon && jsxRuntime.jsx("span", { className: pcn('file-icon'), children: icon }), jsxRuntime.jsx("span", { className: pcn('file-label'), children: buttonLabel ||
+                                        (multiple ? 'Choose or drop files' : 'Choose or drop a file') })] })] }) }), hint && (jsxRuntime.jsx("p", { id: hintId, className: pcn('help', 'dropzone-hint'), children: hint })), showFileList && files.length > 0 && (jsxRuntime.jsx("ul", { ref: listRef, className: pcn('dropzone-list'), children: files.map((file, index) => (jsxRuntime.jsxs("li", { className: pcn('dropzone-item'), children: [jsxRuntime.jsx("span", { className: pcn('dropzone-name'), children: file.name }), jsxRuntime.jsx("span", { className: pcn('dropzone-size'), children: sizeText(file.size) }), !disabled && (jsxRuntime.jsx(Delete, { size: "small", ariaLabel: removeLabel ? removeLabel(file) : `Remove ${file.name}`, onClick: () => remove(index) }))] }, keyOf(file)))) })), refusals.length > 0 && (jsxRuntime.jsx("div", { id: refusalsId, className: pcn('dropzone-rejections'), children: refusals.map((refusal, index) => (jsxRuntime.jsx("p", { className: pcn('help', 'is-danger'), children: messageFor(refusal) }, index))) })), jsxRuntime.jsx(StatusRegion, { items: announcements, describe: describeAnnouncement })] }));
+    const messageEl = message ? (jsxRuntime.jsx("p", { id: messageId, className: helpClass, children: message })) : null;
+    if (ownField) {
+        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [dropzoneElement, messageEl] }));
+    }
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [dropzoneElement, messageEl] }));
+});
+Dropzone.displayName = 'Dropzone';
+
+// What an unlabeled Field passes on: no label names anything inside.
+const NO_LABEL = {};
+/**
+ * The `Fieldset` component groups a section of a form in a native
+ * `<fieldset>`, named by its `legend`, which a `disabled` switches off as a
+ * whole.
+ *
+ * It starts its own Field scope: inside it, nothing reads as inside a
+ * `Field` or `Control`, so the convenience inputs render their own `Field`,
+ * and a labeled `Field` around the Fieldset names nothing in it.
+ *
+ * @function
+ * @param {FieldsetProps} props - Props for the Fieldset component.
+ * @returns {JSX.Element} The rendered fieldset.
  *
  * @example
  * <Fieldset legend="Shipping address" message="We only ship within the EU.">
@@ -16993,11 +18213,11 @@ const validComboboxSizes = ['small', 'medium', 'large'];
 // typing.
 const typedNoMatches = [{ id: 'empty' }];
 const nothingToAnnounce = [];
-const noop = () => { };
-const registerNothing = () => noop;
+const noop$1 = () => { };
+const registerNothing = () => noop$1;
 // What a part rendered outside a Combobox reads: closed, with nothing to
 // report to, so it renders its markup and does nothing.
-const standalone = {
+const standalone$1 = {
     engine: {
         open: false,
         expanded: false,
@@ -17010,22 +18230,22 @@ const standalone = {
         listboxRef: { current: null },
         registerPopup: registerNothing,
         registerItem: registerNothing,
-        onKeyDown: noop,
-        onChange: noop,
-        onClick: noop,
-        onBlur: noop,
-        hover: noop,
-        pick: noop,
-        keepFocus: noop,
-        markInside: noop,
+        onKeyDown: noop$1,
+        onChange: noop$1,
+        onClick: noop$1,
+        onBlur: noop$1,
+        hover: noop$1,
+        pick: noop$1,
+        keepFocus: noop$1,
+        markInside: noop$1,
     },
     inputId: undefined,
-    reportInputId: noop,
+    reportInputId: noop$1,
     labelId: undefined,
     ownLabelId: undefined,
-    reportLoading: noop,
+    reportLoading: noop$1,
     reportEmpty: registerNothing,
-    onFieldChange: noop,
+    onFieldChange: noop$1,
     reportPanel: registerNothing,
     placement: { position: 'bottom-left' },
     multiple: false,
@@ -17033,9 +18253,9 @@ const standalone = {
     appendToBody: false,
 };
 const ComboboxContext = React.createContext(null);
-const useCombobox = () => React.useContext(ComboboxContext) ?? standalone;
+const useCombobox = () => React.useContext(ComboboxContext) ?? standalone$1;
 /** Hands a node to a forwarded ref and to one of the component's own. */
-function setRefs(node, own, forwarded) {
+function setRefs$1(node, own, forwarded) {
     own.current = node;
     if (typeof forwarded === 'function')
         forwarded(node);
@@ -17167,7 +18387,7 @@ const ComboboxParts = React.forwardRef(({ children, below, onSettle, open, defau
         appendToBody,
     };
     const { rootRef } = engine;
-    const rootRefs = React.useCallback((node) => setRefs(node, rootRef, ref), [rootRef, ref]);
+    const rootRefs = React.useCallback((node) => setRefs$1(node, rootRef, ref), [rootRef, ref]);
     const comboboxElement = (jsxRuntime.jsxs("div", { className: classNames(rootClass, bulmaHelperClasses, className), ...rest, ref: rootRefs, children: [jsxRuntime.jsx(ComboboxContext.Provider, { value: context, children: children }), jsxRuntime.jsx(StatusRegion, { items: announced, describe: describeEmpty })] }));
     const fieldElement = below === undefined ? (comboboxElement) : (jsxRuntime.jsxs("div", { children: [comboboxElement, jsxRuntime.jsx("div", { onPointerDownCapture: engine.markInside, onMouseDown: engine.keepFocus, children: below })] }));
     const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
@@ -17200,7 +18420,7 @@ const ComboboxInput = React.forwardRef(({ id, isLoading, controlSize, onKeyDown,
         return () => reportLoading(false);
     }, [reportLoading, isLoading]);
     const { inputRef } = engine;
-    const inputRefs = React.useCallback((node) => setRefs(node, inputRef, ref), [inputRef, ref]);
+    const inputRefs = React.useCallback((node) => setRefs$1(node, inputRef, ref), [inputRef, ref]);
     const { expanded, highlighted } = engine;
     // An `id` of the field's own reaches the label from a layout effect, so
     // in server markup, and the first render, the label's `for` still names
@@ -17804,158 +19024,1162 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     const handleKeyDown = React.useCallback((e) => {
         if (disabled || readonly || isComposing(e))
             return;
-        // Handle confirm keys
-        if (confirmKeys.includes(e.key)) {
-            e.preventDefault();
-            if (highlightedIndex >= 0 && filteredData[highlightedIndex]) {
-                addTags([filteredData[highlightedIndex]]);
-            }
-            else if (inputValue.trim()) {
-                addTags([inputValue]);
-            }
+        // Handle confirm keys
+        if (confirmKeys.includes(e.key)) {
+            e.preventDefault();
+            if (highlightedIndex >= 0 && filteredData[highlightedIndex]) {
+                addTags([filteredData[highlightedIndex]]);
+            }
+            else if (inputValue.trim()) {
+                addTags([inputValue]);
+            }
+            return;
+        }
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                if (!isActive && data.length > 0) {
+                    setIsActive(true);
+                }
+                else {
+                    setHighlightedIndex(prev => prev < filteredData.length - 1 ? prev + 1 : prev);
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                setHighlightedIndex(prev => (prev > 0 ? prev - 1 : prev));
+                break;
+            case 'Backspace':
+                if (removeOnKeys && !inputValue && tags.length > 0) {
+                    e.preventDefault();
+                    removeTag(tags.length - 1);
+                }
+                break;
+            case 'Escape':
+                // Closing the suggestions claims the key, so a Modal around the
+                // field stays open. With none showing, the key goes on to it.
+                if (listOpen)
+                    e.preventDefault();
+                setIsActive(false);
+                setHighlightedIndex(-1);
+                break;
+        }
+    }, [
+        disabled,
+        readonly,
+        confirmKeys,
+        highlightedIndex,
+        filteredData,
+        addTags,
+        inputValue,
+        isActive,
+        listOpen,
+        data.length,
+        removeOnKeys,
+        tags.length,
+        removeTag,
+    ]);
+    // Combined ref
+    const combinedRef = React.useCallback((node) => {
+        inputRef.current =
+            node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current =
+                node;
+        }
+    }, [ref]);
+    // Focus input when container is clicked
+    const handleContainerClick = React.useCallback(() => {
+        inputRef.current?.focus();
+    }, []);
+    // Generate classes
+    const taginputClasses = pcn('taginput', {
+        'is-active': isActive,
+        [`is-${size}`]: !!size,
+        [`is-${color}`]: !!color,
+        'is-disabled': disabled,
+        'is-rounded': rounded,
+        'is-ellipsis': ellipsis,
+    });
+    const containerClasses = pcn('taginput-container', {
+        'is-attached': attached,
+        'has-icons-left': !!icon,
+    });
+    const inputClasses = pcn('input', {
+        [`is-${size}`]: !!size,
+    });
+    const tagClasses = pcn('tag', {
+        [`is-${tagColor}`]: !!tagColor,
+        [`is-${size}`]: !!size,
+    });
+    const combinedClasses = classNames(taginputClasses, bulmaHelperClasses, className);
+    // Counter text
+    const showCounter = hasCounter && (maxTags !== undefined || maxlength !== undefined);
+    const write = formatNumber ?? String;
+    const counterText = maxTags !== undefined
+        ? `${write(tags.length)} / ${write(maxTags)}`
+        : maxlength !== undefined
+            ? `${write(inputValue.length)} / ${write(maxlength)}`
+            : '';
+    const counterClasses = pcn('help', 'counter');
+    const tagsClasses = pcn('tags');
+    const dropdownMenuClasses = pcn('dropdown-menu', 'is-active');
+    const dropdownContentClasses = pcn('dropdown-content');
+    const iconRightClass = pcn('icon', 'is-right');
+    const loaderClass = pcn('loader', 'is-loading');
+    const helpClass = usePrefixedClassNames('help', {
+        [`is-${messageColor}`]: !!messageColor,
+    });
+    const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
+    // The combobox controls its listbox and points at the highlighted option,
+    // the way Autocomplete's does. The listbox takes its name from the label
+    // that names the combobox, the one this renders or a surrounding Field's,
+    // and keeps a fallback name when no label names it or the one that does
+    // has no id to point at. While no suggestion matches there's no listbox,
+    // so the combobox is collapsed and points at nothing. It skips a
+    // highlighted suggestion that's blank once trimmed, since that one can't
+    // become a tag, and the option it points at is the one marked selected.
+    const optionId = (index) => `${listboxId}-${index}`;
+    const activeOptionId = listOpen && filteredData[highlightedIndex]?.trim()
+        ? optionId(highlightedIndex)
+        : undefined;
+    const comboboxProps = {
+        role: 'combobox',
+        'aria-expanded': listOpen,
+        'aria-controls': listOpen ? listboxId : undefined,
+        'aria-activedescendant': activeOptionId,
+        'aria-haspopup': 'listbox',
+        'aria-autocomplete': 'list',
+    };
+    const taginputElement = (jsxRuntime.jsxs("div", { ref: containerRef, className: combinedClasses, onClick: handleContainerClick, ...rest, children: [jsxRuntime.jsxs("div", { className: containerClasses, children: [icon && (jsxRuntime.jsx(Icon, { name: icon, library: resolvedLibrary, variant: iconVariant, features: iconFeatures, containerClassName: pcn('icon', 'is-left') })), jsxRuntime.jsxs("div", { className: tagsClasses, children: [tags.map((tag, index) => {
+                                const displayVal = getDisplayValue(tag);
+                                return (jsxRuntime.jsxs("span", { className: tagClasses, children: [tagTemplate ? (tagTemplate(tag)) : ellipsis ? (jsxRuntime.jsx("span", { title: displayVal, children: displayVal })) : (displayVal), closable && !disabled && !readonly && (jsxRuntime.jsx("button", { type: "button", className: pcn('delete', 'is-small'), onClick: e => {
+                                                e.stopPropagation();
+                                                removeTag(index);
+                                            }, "aria-label": ariaCloseLabel || `Remove ${displayVal}` }))] }, index));
+                            }), jsxRuntime.jsx("input", { ref: combinedRef, type: "text", className: inputClasses, id: controlId, value: inputValue, placeholder: tags.length === 0 ? placeholder : undefined, disabled: disabled, 
+                                // Read-only at the tag limit rather than gone, so focus stays
+                                // put and a label keeps naming it, and Backspace still makes
+                                // room (#1103).
+                                readOnly: readonly || isMaxReached, maxLength: maxlength, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, onPaste: handlePaste, ...(hasSuggestions && comboboxProps), "aria-label": labelled ? undefined : 'Add tag', "aria-describedby": showCounter ? counterId : undefined })] }), loading && (jsxRuntime.jsx("span", { className: iconRightClass, children: jsxRuntime.jsx("span", { className: loaderClass }) }))] }), listOpen && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsx("div", { ref: dropdownRef, id: listboxId, className: dropdownContentClasses, role: "listbox", "aria-labelledby": listLabelId, "aria-label": listLabelId ? undefined : 'Suggestions', children: filteredData.map((item, index) => (jsxRuntime.jsx("a", { id: optionId(index), className: pcn('dropdown-item', {
+                            'is-active': index === highlightedIndex,
+                        }), onClick: () => addTags([item]), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": optionId(index) === activeOptionId, children: item }, index))) }) })), showCounter && (jsxRuntime.jsx("small", { id: counterId, className: counterClasses, children: counterText })), name &&
+                tags.map((tag, i) => (jsxRuntime.jsx("input", { type: "hidden", name: name, value: getDisplayValue(tag), form: form }, `tag-input-${i}`)))] }));
+    if (ownField) {
+        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [taginputElement, messageEl] }));
+    }
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [taginputElement, messageEl] }));
+});
+Taginput.displayName = 'Taginput';
+/** @deprecated Use `Taginput` — same component. */
+const TagInput = Taginput;
+
+// INTERNAL: deliberately not exported from src/index.ts. Reading, converting
+// and writing the CSS colors the color picker takes and gives.
+//
+// The picker works in HSV (hue, saturation and value, which the square
+// calls brightness), since its square is saturation by brightness. Every
+// color it reads becomes HSV, and every value it writes comes out of HSV in
+// the format asked for.
+const clamp$3 = (value, low, high) => Math.min(Math.max(value, low), high);
+/** Rounds to a number of decimal places, so `0.1 + 0.2` writes as `0.3`. */
+const round = (value, places) => {
+    const factor = 10 ** places;
+    return Math.round(value * factor) / factor;
+};
+// ---------------------------------------------------------------------------
+// Conversions
+// ---------------------------------------------------------------------------
+/** HSV to RGB, each channel unrounded. */
+function hsvaToRgba({ h, s, v, a }) {
+    const sat = s / 100;
+    const val = v / 100;
+    const at = (n) => {
+        const k = (n + h / 60) % 6;
+        return val - val * sat * Math.max(0, Math.min(k, 4 - k, 1));
+    };
+    return { r: at(5) * 255, g: at(3) * 255, b: at(1) * 255, a };
+}
+/** RGB to HSV. A gray has no hue, so it gets 0. */
+function rgbaToHsva({ r, g, b, a }) {
+    const red = r / 255;
+    const green = g / 255;
+    const blue = b / 255;
+    const max = Math.max(red, green, blue);
+    const delta = max - Math.min(red, green, blue);
+    let h = 0;
+    if (delta > 0) {
+        if (max === red)
+            h = ((green - blue) / delta) % 6;
+        else if (max === green)
+            h = (blue - red) / delta + 2;
+        else
+            h = (red - green) / delta + 4;
+    }
+    return {
+        h: (h * 60 + 360) % 360,
+        s: max === 0 ? 0 : (delta / max) * 100,
+        v: max * 100,
+        a,
+    };
+}
+/** HSL (saturation and lightness from 0 to 100) to HSV, keeping the hue. */
+function hslaToHsva(h, s, l, a) {
+    const sat = s / 100;
+    const light = l / 100;
+    const v = light + sat * Math.min(light, 1 - light);
+    return { h, s: v === 0 ? 0 : 2 * (1 - light / v) * 100, v: v * 100, a };
+}
+/** HSV to HSL, saturation and lightness from 0 to 100, keeping the hue. */
+function hsvaToHsla({ h, s, v, a }) {
+    const sat = s / 100;
+    const val = v / 100;
+    const light = val * (1 - sat / 2);
+    const lowest = Math.min(light, 1 - light);
+    return {
+        h,
+        s: lowest === 0 ? 0 : ((val - light) / lowest) * 100,
+        l: light * 100,
+        a,
+    };
+}
+// ---------------------------------------------------------------------------
+// Writing
+// ---------------------------------------------------------------------------
+const hexByte = (value) => Math.round(clamp$3(value, 0, 255))
+    .toString(16)
+    .padStart(2, '0');
+/** Alpha as CSS writes it, to two decimal places: `0.5`, `1`. */
+const writeAlpha = (a) => String(round(clamp$3(a, 0, 1), 2));
+/**
+ * Writes a color in a format: `hsl(171, 100%, 41%)`, `#00d1b2` or
+ * `rgb(0, 209, 178)`, with alpha as `hsla(…)`, `#00d1b2ff` and `rgba(…)`.
+ * Channels are whole numbers, and the legacy comma form is used, which every
+ * CSS parser and color library reads.
+ */
+function formatColor(color, format, alpha) {
+    if (format === 'hsl') {
+        const { h, s, l, a } = hsvaToHsla(color);
+        const channels = `${Math.round(h) % 360}, ${Math.round(s)}%, ${Math.round(l)}%`;
+        return alpha ? `hsla(${channels}, ${writeAlpha(a)})` : `hsl(${channels})`;
+    }
+    const { r, g, b, a } = hsvaToRgba(color);
+    if (format === 'hex') {
+        const hex = `#${hexByte(r)}${hexByte(g)}${hexByte(b)}`;
+        return alpha ? `${hex}${hexByte(a * 255)}` : hex;
+    }
+    const channels = `${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}`;
+    return alpha ? `rgba(${channels}, ${writeAlpha(a)})` : `rgb(${channels})`;
+}
+/** The color as 8-bit RGB and alpha to two places, for telling colors apart. */
+const key = (color) => {
+    const { r, g, b, a } = hsvaToRgba(color);
+    return [r, g, b].map(c => Math.round(c)).join(',') + `,${writeAlpha(a)}`;
+};
+/** Whether two colors are the same once written as 8-bit RGB with alpha. */
+const sameColor = (one, other) => key(one) === key(other);
+/**
+ * The relative luminance of a color, from 0 for black to 1 for white, as
+ * WCAG defines it.
+ */
+function luminance(color) {
+    const { r, g, b } = hsvaToRgba(color);
+    const linear = (channel) => {
+        const c = channel / 255;
+        return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+    };
+    return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);
+}
+/**
+ * Whether black reads better than white on a color, by WCAG contrast
+ * ratio. Used for the check on a chosen swatch.
+ */
+function prefersDarkInk(color) {
+    const l = luminance(color);
+    return (l + 0.05) / 0.05 >= 1.05 / (l + 0.05);
+}
+// ---------------------------------------------------------------------------
+// Reading
+// ---------------------------------------------------------------------------
+// The CSS named colors, each name followed by its six hex digits.
+const NAMED = 'aliceblue:f0f8ff,antiquewhite:faebd7,aqua:00ffff,aquamarine:7fffd4,' +
+    'azure:f0ffff,beige:f5f5dc,bisque:ffe4c4,black:000000,' +
+    'blanchedalmond:ffebcd,blue:0000ff,blueviolet:8a2be2,brown:a52a2a,' +
+    'burlywood:deb887,cadetblue:5f9ea0,chartreuse:7fff00,chocolate:d2691e,' +
+    'coral:ff7f50,cornflowerblue:6495ed,cornsilk:fff8dc,crimson:dc143c,' +
+    'cyan:00ffff,darkblue:00008b,darkcyan:008b8b,darkgoldenrod:b8860b,' +
+    'darkgray:a9a9a9,darkgreen:006400,darkgrey:a9a9a9,darkkhaki:bdb76b,' +
+    'darkmagenta:8b008b,darkolivegreen:556b2f,darkorange:ff8c00,' +
+    'darkorchid:9932cc,darkred:8b0000,darksalmon:e9967a,' +
+    'darkseagreen:8fbc8f,darkslateblue:483d8b,darkslategray:2f4f4f,' +
+    'darkslategrey:2f4f4f,darkturquoise:00ced1,darkviolet:9400d3,' +
+    'deeppink:ff1493,deepskyblue:00bfff,dimgray:696969,dimgrey:696969,' +
+    'dodgerblue:1e90ff,firebrick:b22222,floralwhite:fffaf0,' +
+    'forestgreen:228b22,fuchsia:ff00ff,gainsboro:dcdcdc,' +
+    'ghostwhite:f8f8ff,gold:ffd700,goldenrod:daa520,gray:808080,' +
+    'green:008000,greenyellow:adff2f,grey:808080,honeydew:f0fff0,' +
+    'hotpink:ff69b4,indianred:cd5c5c,indigo:4b0082,ivory:fffff0,' +
+    'khaki:f0e68c,lavender:e6e6fa,lavenderblush:fff0f5,' +
+    'lawngreen:7cfc00,lemonchiffon:fffacd,lightblue:add8e6,' +
+    'lightcoral:f08080,lightcyan:e0ffff,lightgoldenrodyellow:fafad2,' +
+    'lightgray:d3d3d3,lightgreen:90ee90,lightgrey:d3d3d3,' +
+    'lightpink:ffb6c1,lightsalmon:ffa07a,lightseagreen:20b2aa,' +
+    'lightskyblue:87cefa,lightslategray:778899,lightslategrey:778899,' +
+    'lightsteelblue:b0c4de,lightyellow:ffffe0,lime:00ff00,' +
+    'limegreen:32cd32,linen:faf0e6,magenta:ff00ff,maroon:800000,' +
+    'mediumaquamarine:66cdaa,mediumblue:0000cd,mediumorchid:ba55d3,' +
+    'mediumpurple:9370db,mediumseagreen:3cb371,mediumslateblue:7b68ee,' +
+    'mediumspringgreen:00fa9a,mediumturquoise:48d1cc,' +
+    'mediumvioletred:c71585,midnightblue:191970,mintcream:f5fffa,' +
+    'mistyrose:ffe4e1,moccasin:ffe4b5,navajowhite:ffdead,navy:000080,' +
+    'oldlace:fdf5e6,olive:808000,olivedrab:6b8e23,orange:ffa500,' +
+    'orangered:ff4500,orchid:da70d6,palegoldenrod:eee8aa,' +
+    'palegreen:98fb98,paleturquoise:afeeee,palevioletred:db7093,' +
+    'papayawhip:ffefd5,peachpuff:ffdab9,peru:cd853f,pink:ffc0cb,' +
+    'plum:dda0dd,powderblue:b0e0e6,purple:800080,' +
+    'rebeccapurple:663399,red:ff0000,rosybrown:bc8f8f,' +
+    'royalblue:4169e1,saddlebrown:8b4513,salmon:fa8072,' +
+    'sandybrown:f4a460,seagreen:2e8b57,seashell:fff5ee,sienna:a0522d,' +
+    'silver:c0c0c0,skyblue:87ceeb,slateblue:6a5acd,slategray:708090,' +
+    'slategrey:708090,snow:fffafa,springgreen:00ff7f,steelblue:4682b4,' +
+    'tan:d2b48c,teal:008080,thistle:d8bfd8,tomato:ff6347,' +
+    'turquoise:40e0d0,violet:ee82ee,wheat:f5deb3,white:ffffff,' +
+    'whitesmoke:f5f5f5,yellow:ffff00,yellowgreen:9acd32';
+let namedColors;
+/** The hex digits of a CSS color name, or undefined for any other word. */
+const namedHex = (name) => {
+    if (!namedColors) {
+        namedColors = new Map(NAMED.split(',').map(entry => entry.split(':')));
+    }
+    return namedColors.get(name);
+};
+/** Reads `#rgb`, `#rgba`, `#rrggbb` and `#rrggbbaa`, the `#` optional. */
+function parseHex(text) {
+    const digits = text.startsWith('#') ? text.slice(1) : text;
+    if (!/^[0-9a-f]+$/.test(digits) || ![3, 4, 6, 8].includes(digits.length)) {
+        return null;
+    }
+    const full = digits.length < 6
+        ? digits
+            .split('')
+            .map(d => d + d)
+            .join('')
+        : digits;
+    const byte = (i) => parseInt(full.slice(i, i + 2), 16);
+    return rgbaToHsva({
+        r: byte(0),
+        g: byte(2),
+        b: byte(4),
+        a: full.length === 8 ? byte(6) / 255 : 1,
+    });
+}
+/**
+ * The arguments of a CSS color function, in either syntax: commas
+ * (`rgb(0, 209, 178)`) or spaces with the alpha after a slash
+ * (`rgb(0 209 178 / 50%)`). Null when they're neither.
+ */
+function splitArguments(body) {
+    if (body.includes(',')) {
+        const parts = body.split(',').map(part => part.trim());
+        return parts.includes('') ? null : parts;
+    }
+    const [channels, alpha, ...more] = body.split('/');
+    const parts = channels.trim().split(/\s+/).filter(Boolean);
+    if (more.length > 0 || parts.length !== 3)
+        return null;
+    if (alpha === undefined)
+        return parts;
+    const a = alpha.trim();
+    return a && !/\s/.test(a) ? [...parts, a] : null;
+}
+/** A plain number or a percentage of `whole`, or NaN. */
+const numberOf = (part, whole) => {
+    if (!/^[+-]?(\d+\.?\d*|\.\d+)(e[+-]?\d+)?%?$/.test(part))
+        return NaN;
+    const value = parseFloat(part);
+    return part.endsWith('%') ? (value / 100) * whole : value;
+};
+/** An alpha, `0.5` or `50%`, clamped to 0 to 1, or NaN. */
+const alphaOf = (part) => part === undefined ? 1 : clamp$3(numberOf(part, 1), 0, 1);
+const ANGLE_UNITS = {
+    deg: 1,
+    grad: 360 / 400,
+    rad: 180 / Math.PI,
+    turn: 360,
+};
+/** A hue in degrees from 0 to 360, from a number or an angle, or NaN. */
+const hueOf = (part) => {
+    const match = /^([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)(deg|grad|rad|turn)?$/.exec(part);
+    if (!match)
+        return NaN;
+    const degrees = parseFloat(match[1]) * ANGLE_UNITS[match[2] ?? 'deg'];
+    return ((degrees % 360) + 360) % 360;
+};
+/** Reads `rgb()`, `rgba()`, `hsl()` and `hsla()` in either syntax. */
+function parseFunction(text) {
+    const match = /^(rgba?|hsla?)\((.*)\)$/.exec(text);
+    if (!match)
+        return null;
+    const parts = splitArguments(match[2]);
+    if (!parts || parts.length < 3 || parts.length > 4)
+        return null;
+    const [first, second, third, fourth] = parts;
+    const a = alphaOf(fourth);
+    if (match[1].startsWith('rgb')) {
+        const [r, g, b] = [first, second, third].map(part => clamp$3(numberOf(part, 255), 0, 255));
+        if ([r, g, b, a].some(Number.isNaN))
+            return null;
+        return rgbaToHsva({ r, g, b, a });
+    }
+    const h = hueOf(first);
+    // Modern syntax lets saturation and lightness drop the percent sign.
+    const [s, l] = [second, third].map(part => clamp$3(numberOf(part.replace(/%$/, ''), 100), 0, 100));
+    if ([h, s, l, a].some(Number.isNaN))
+        return null;
+    return hslaToHsva(h, s, l, a);
+}
+/**
+ * Whether a color's text names its own hue, as `hsl()` and `hsla()` do even
+ * for a gray, where hex, `rgb()` and the color names leave it out.
+ */
+const namesHue = (text) => /^\s*hsla?\(/i.test(text);
+/**
+ * Reads a CSS color: hex (with or without `#`), `rgb()`, `rgba()`, `hsl()`
+ * and `hsla()` in either syntax, the named colors, and `transparent`. Null
+ * for anything else, such as `oklch()` or `var(--x)`, which only the
+ * browser can resolve.
+ */
+function parseColor(input) {
+    if (!input)
+        return null;
+    const text = input.trim().toLowerCase();
+    if (text === 'transparent')
+        return { h: 0, s: 0, v: 0, a: 0 };
+    const named = namedHex(text);
+    if (named)
+        return parseHex(named);
+    if (text.includes('('))
+        return parseFunction(text);
+    return parseHex(text);
+}
+
+function useNativeMobilePicker(options = {}) {
+    const { smallViewportMaxPx = 768, force } = options;
+    const [state, setState] = React.useState({
+        isCoarsePointer: false,
+        isSmallViewport: false,
+        shouldUseNative: force === true,
+    });
+    React.useEffect(() => {
+        const isBrowser = typeof window !== 'undefined' && typeof window.matchMedia === 'function';
+        if (!isBrowser)
+            return undefined;
+        const coarse = window.matchMedia('(pointer: coarse)');
+        const small = window.matchMedia(`(max-width: ${smallViewportMaxPx}px)`);
+        const update = () => {
+            const isCoarsePointer = coarse.matches;
+            const isSmallViewport = small.matches;
+            const shouldUseNative = force === true
+                ? true
+                : force === false
+                    ? false
+                    : isCoarsePointer && isSmallViewport;
+            setState({ isCoarsePointer, isSmallViewport, shouldUseNative });
+        };
+        update();
+        const subscribe = (mql, fn) => {
+            if (mql.addEventListener) {
+                // eslint-disable-next-line @eslint-react/web-api-no-leaked-event-listener -- cleanup returned below and run in the effect teardown
+                mql.addEventListener('change', fn);
+                return () => mql.removeEventListener('change', fn);
+            }
+            // Older Safari fallback
+            mql.addListener(fn);
+            return () => mql.removeListener(fn);
+        };
+        const unsubCoarse = subscribe(coarse, update);
+        const unsubSmall = subscribe(small, update);
+        return () => {
+            unsubCoarse();
+            unsubSmall();
+        };
+    }, [smallViewportMaxPx, force]);
+    return state;
+}
+
+// INTERNAL: deliberately not exported from src/index.ts. The color a picker
+// holds and the context its parts read, shared by ColorPicker and the panel
+// ColorInput opens, so the panel needs no Field or Control of its own.
+const DEFAULT_LABELS = {
+    area: 'Saturation and brightness',
+    areaRoleDescription: '2D slider',
+    saturation: 'Saturation',
+    brightness: 'Brightness',
+    hue: 'Hue',
+    alpha: 'Alpha',
+    degrees: 'degrees',
+    value: 'Color value',
+    swatches: 'Swatches',
+    eyeDropper: 'Pick a color from the screen',
+};
+/** The labels with each one left out, or empty, at its default. */
+const mergeColorLabels = (labels) => {
+    const merged = { ...DEFAULT_LABELS };
+    for (const [key, value] of Object.entries(labels ?? {})) {
+        if (value)
+            merged[key] = value;
+    }
+    return merged;
+};
+const BLACK = { h: 0, s: 0, v: 0, a: 1 };
+/**
+ * A color read from outside the picker, written as `source`, with the hue
+ * and saturation the picker had where the new color has none, so the thumbs
+ * don't jump to 0. A gray written as hex, `rgb()` or a name has no hue, so
+ * it keeps the picker's; one written as `hsl()` names its hue, which wins.
+ * Black has no saturation in the square either way, and keeps the picker's,
+ * which writes no differently.
+ */
+const keepingChannels = (next, previous, source) => ({
+    ...next,
+    h: (next.s === 0 || next.v === 0) && !namesHue(source) ? previous.h : next.h,
+    s: next.v === 0 ? previous.s : next.s,
+});
+const ColorPickerContext = React.createContext(null);
+/** Does nothing, for a part outside a picker and a cancelled eye dropper. */
+const noop = () => { };
+// What a part outside a ColorPicker reads, so its hooks run the same; it
+// then renders nothing.
+const standalone = {
+    color: BLACK,
+    text: '',
+    format: 'hsl',
+    alpha: false,
+    disabled: true,
+    labels: DEFAULT_LABELS,
+    swatches: undefined,
+    eyeDropper: false,
+    touch: false,
+    percent: String,
+    degrees: String,
+    change: noop,
+    end: noop,
+};
+/** The picker around a part, or null with a development warning. */
+function usePicker(part) {
+    const picker = React.useContext(ColorPickerContext);
+    const outside = !picker;
+    React.useEffect(() => {
+        if (outside) {
+            warnOnce(`ColorPicker:${part}:outside`, `[bestax-bulma] <ColorPicker.${part}> needs a <ColorPicker> around ` +
+                'it, which holds the color, and renders nothing without one.');
+        }
+    }, [outside, part]);
+    return picker;
+}
+/** A percentage, in the provider's locale when there is one. */
+const writePercent = (formatNumber) => (value) => formatNumber
+    ? formatNumber(value / 100, { style: 'percent' })
+    : `${value}%`;
+/** Degrees, in the provider's locale when there is one, else with `unit`. */
+const writeDegrees = (formatNumber, unit) => (value) => formatNumber
+    ? formatNumber(value, {
+        style: 'unit',
+        unit: 'degree',
+        unitDisplay: 'long',
+    })
+    : `${value} ${unit}`;
+/**
+ * Holds a picker's color and builds what its parts read. Controlled, the
+ * color shown follows `value`; a value the picker handed out comes back as
+ * the exact color it was, thumbs and all.
+ */
+function useColorPicker({ value, defaultValue, onChange, onChangeEnd, format, alpha, disabled, swatches, eyeDropper, labels, }) {
+    const isControlled = value !== undefined;
+    // The color the picker last set or started with, and its text. While
+    // `value` is that text, this is the color shown.
+    const [own, setOwn] = React.useState(() => {
+        const start = isControlled ? value : defaultValue;
+        return { text: start ?? '', color: parseColor(start) ?? BLACK };
+    });
+    // A controlled value from outside becomes the color held, during this
+    // render, keeping the hue and saturation a gray or black has none of.
+    // One the picker can't read changes nothing, so the last good color
+    // stays on screen.
+    if (isControlled && value !== own.text) {
+        const parsed = parseColor(value);
+        if (parsed) {
+            setOwn({
+                text: value,
+                color: keepingChannels(parsed, own.color, value),
+            });
+        }
+    }
+    const color = alpha ? own.color : { ...own.color, a: 1 };
+    const text = formatColor(color, format, alpha);
+    // The latest text handed out, so a step that writes the same text
+    // doesn't call onChange again, and a drag's end reports the last one.
+    const lastTextRef = React.useRef(text);
+    useClientLayoutEffect(() => {
+        lastTextRef.current = text;
+    });
+    const change = React.useCallback((next, finished = false) => {
+        if (disabled)
+            return;
+        const solid = alpha ? next : { ...next, a: 1 };
+        const nextText = formatColor(solid, format, alpha);
+        setOwn({ text: nextText, color: solid });
+        if (nextText !== lastTextRef.current) {
+            lastTextRef.current = nextText;
+            onChange?.(nextText);
+        }
+        if (finished)
+            onChangeEnd?.(nextText);
+    }, [disabled, alpha, format, onChange, onChangeEnd]);
+    const end = React.useCallback(() => onChangeEnd?.(lastTextRef.current), [onChangeEnd]);
+    const formatNumber = useNumberFormat();
+    const { isCoarsePointer } = useNativeMobilePicker();
+    const merged = mergeColorLabels(labels);
+    return {
+        color,
+        text,
+        format,
+        alpha,
+        disabled,
+        labels: merged,
+        swatches,
+        eyeDropper,
+        touch: isCoarsePointer,
+        percent: writePercent(formatNumber),
+        degrees: writeDegrees(formatNumber, merged.degrees),
+        change,
+        end,
+    };
+}
+
+// The theme colors `swatches="bulma"` shows, read off the page.
+const BULMA_SWATCHES = [
+    { color: 'var(--bulma-primary)', label: 'Primary' },
+    { color: 'var(--bulma-link)', label: 'Link' },
+    { color: 'var(--bulma-info)', label: 'Info' },
+    { color: 'var(--bulma-success)', label: 'Success' },
+    { color: 'var(--bulma-warning)', label: 'Warning' },
+    { color: 'var(--bulma-danger)', label: 'Danger' },
+];
+const clamp$2 = (value, low, high) => Math.min(Math.max(value, low), high);
+/** Whether the element is laid out right to left. */
+const isRtl = (element) => !!element && getComputedStyle(element).direction === 'rtl';
+/** Where a pointer is across an element, from 0 to 1 each way. */
+const pointIn = (element, event) => {
+    const rect = element.getBoundingClientRect();
+    const across = rect.width > 0 ? clamp$2((event.clientX - rect.left) / rect.width, 0, 1) : 0;
+    const down = rect.height > 0 ? clamp$2((event.clientY - rect.top) / rect.height, 0, 1) : 0;
+    return { x: isRtl(element) ? 1 - across : across, y: down };
+};
+/** The color's red, green and blue, rounded, as a CSS `rgb()` takes them. */
+const rgbChannels = (color) => {
+    const { r, g, b } = hsvaToRgba(color);
+    return `${Math.round(r)} ${Math.round(g)} ${Math.round(b)}`;
+};
+/** Whether a press should start a drag: any touch or pen, a mouse's main button. */
+const startsDrag = (event) => event.pointerType !== 'mouse' || event.button === 0;
+/** Hands a node to a forwarded ref and to one of the part's own. */
+function setRefs(node, own, forwarded) {
+    own.current = node;
+    if (typeof forwarded === 'function')
+        forwarded(node);
+    else if (forwarded)
+        forwarded.current = node;
+}
+/**
+ * The saturation and brightness square, operated by pointer or by keyboard as one 2D slider.
+ *
+ * @function
+ * @param {ColorPickerAreaProps} props - Props for ColorPicker.Area.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the square's `<div>`.
+ * @returns {JSX.Element | null} The square, or nothing outside a ColorPicker.
+ */
+const ColorPickerArea = React.forwardRef(({ className, style, ...props }, ref) => {
+    const picker = usePicker('Area');
+    const live = picker ?? standalone;
+    const { color, change, end, disabled, labels, touch, percent } = live;
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const rootRef = React.useRef(null);
+    const xRef = React.useRef(null);
+    const yRef = React.useRef(null);
+    // The axis whose input holds the tab stop: the one focused or moved last.
+    const [axis, setAxis] = React.useState('x');
+    // Once a key has moved the square, both inputs are exposed until focus
+    // leaves it, so the one that moved can be read.
+    const [keyed, setKeyed] = React.useState(false);
+    const draggingRef = React.useRef(false);
+    const areaClass = usePrefixedClassNames('color-area', {
+        'is-disabled': disabled,
+    });
+    const thumbClass = usePrefixedClassNames('color-area-thumb');
+    const inputClass = usePrefixedClassNames('color-area-input');
+    const s = Math.round(color.s);
+    const v = Math.round(color.v);
+    const saturationText = `${labels.saturation} ${percent(s)}`;
+    const brightnessText = `${labels.brightness} ${percent(v)}`;
+    const focusAxis = (which) => (which === 'x' ? xRef : yRef).current?.focus({ preventScroll: true });
+    // The axis a key moved to, focused once the render that shows its input
+    // is on the page, so it's no longer aria-hidden as it takes focus.
+    const focusNextRef = React.useRef(null);
+    useClientLayoutEffect(() => {
+        if (!focusNextRef.current)
+            return;
+        focusAxis(focusNextRef.current);
+        focusNextRef.current = null;
+    });
+    const moveTo = (event) => {
+        const { x, y } = pointIn(event.currentTarget, event);
+        change({ ...color, s: x * 100, v: (1 - y) * 100 });
+    };
+    const onPointerDown = (event) => {
+        if (disabled || !startsDrag(event))
+            return;
+        // No text selection, and focus goes where the square puts it.
+        event.preventDefault();
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        draggingRef.current = true;
+        moveTo(event);
+        focusAxis(axis);
+    };
+    const onPointerMove = (event) => {
+        if (draggingRef.current)
+            moveTo(event);
+    };
+    const endDrag = (event) => {
+        if (!draggingRef.current)
+            return;
+        draggingRef.current = false;
+        event.currentTarget.releasePointerCapture?.(event.pointerId);
+        end();
+    };
+    const onKeyDown = (event) => {
+        const by = event.shiftKey ? 10 : 1;
+        // The horizontal arrows follow the screen: right to left, saturation
+        // grows to the left.
+        const right = isRtl(rootRef.current) ? -by : by;
+        const moves = {
+            ArrowRight: [right, 0],
+            ArrowLeft: [-right, 0],
+            ArrowUp: [0, by],
+            ArrowDown: [0, -by],
+            PageUp: [0, 10],
+            PageDown: [0, -10],
+            Home: [-10, 0],
+            End: [10, 0],
+        };
+        const move = moves[event.key];
+        if (!move)
+            return;
+        event.preventDefault();
+        const [dx, dy] = move;
+        change({
+            ...color,
+            s: clamp$2(s + dx, 0, 100),
+            v: clamp$2(v + dy, 0, 100),
+        }, true);
+        const moved = dx !== 0 ? 'x' : 'y';
+        setAxis(moved);
+        setKeyed(true);
+        if (moved !== axis)
+            focusNextRef.current = moved;
+    };
+    // A touch screen reader, or a browser's own stepping, sets an input's
+    // value without a key the square handled.
+    const onInput = (which) => (event) => {
+        const value = Number(event.target.value);
+        change(which === 'x' ? { ...color, s: value } : { ...color, v: value }, true);
+    };
+    const onBlur = (event) => {
+        const next = event.relatedTarget;
+        if (next !== xRef.current && next !== yRef.current)
+            setKeyed(false);
+    };
+    // What both inputs share; each adds its axis, and the handlers.
+    const shared = {
+        type: 'range',
+        className: inputClass,
+        min: 0,
+        max: 100,
+        step: 1,
+        disabled,
+        'aria-label': labels.area,
+        'aria-roledescription': labels.areaRoleDescription,
+    };
+    // The one not holding the tab stop is hidden until a key moves the
+    // square, so a screen reader lists one control; both show on touch.
+    const tabIndexOf = (which) => (touch || axis === which ? 0 : -1);
+    const hiddenOf = (which) => touch || keyed || axis === which ? undefined : true;
+    if (!picker)
+        return null;
+    return (jsxRuntime.jsx("div", { ref: node => setRefs(node, rootRef, ref), className: classNames(areaClass, bulmaHelperClasses, className), style: {
+            ...style,
+            '--color-picker-hue': Math.round(color.h),
+            '--color-picker-rgb': rgbChannels(color),
+            '--color-area-x': `${color.s}%`,
+            '--color-area-y': `${100 - color.v}%`,
+        }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, ...rest, children: jsxRuntime.jsxs("div", { className: thumbClass, role: "presentation", children: [jsxRuntime.jsx("input", { ref: xRef, ...shared, value: s, "aria-valuetext": `${saturationText}, ${brightnessText}`, "aria-orientation": "horizontal", tabIndex: tabIndexOf('x'), "aria-hidden": hiddenOf('x'), onChange: onInput('x'), onKeyDown: onKeyDown, onFocus: () => setAxis('x'), onBlur: onBlur }), jsxRuntime.jsx("input", { ref: yRef, ...shared, value: v, "aria-valuetext": `${brightnessText}, ${saturationText}`, "aria-orientation": "vertical", tabIndex: tabIndexOf('y'), "aria-hidden": hiddenOf('y'), onChange: onInput('y'), onKeyDown: onKeyDown, onFocus: () => setAxis('y'), onBlur: onBlur })] }) }));
+});
+ColorPickerArea.displayName = 'ColorPicker.Area';
+/** The hue or the alpha slider: a hidden native range under a drawn track. */
+const ChannelSlider = React.forwardRef(({ channel, className, style, ...props }, ref) => {
+    const picker = usePicker(channel === 'hue' ? 'HueSlider' : 'AlphaSlider');
+    const live = picker ?? standalone;
+    const { color, change, end, disabled, labels, percent, degrees } = live;
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const rootRef = React.useRef(null);
+    const draggingRef = React.useRef(false);
+    const isHue = channel === 'hue';
+    const max = isHue ? 360 : 100;
+    const value = Math.round(isHue ? color.h : color.a * 100);
+    const withValue = (next) => isHue ? { ...color, h: next } : { ...color, a: next / 100 };
+    const sliderClass = usePrefixedClassNames('color-slider', {
+        'is-hue': isHue,
+        'is-alpha': !isHue,
+        'is-disabled': disabled,
+    });
+    const trackClass = usePrefixedClassNames('color-slider-track');
+    const thumbClass = usePrefixedClassNames('color-slider-thumb');
+    const inputClass = usePrefixedClassNames('color-slider-input');
+    const moveTo = (event) => {
+        const { x } = pointIn(event.currentTarget, event);
+        change(withValue(x * max));
+    };
+    const onPointerDown = (event) => {
+        if (disabled || !startsDrag(event))
+            return;
+        event.preventDefault();
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        draggingRef.current = true;
+        moveTo(event);
+        rootRef.current?.querySelector('input')?.focus({ preventScroll: true });
+    };
+    const onPointerMove = (event) => {
+        if (draggingRef.current)
+            moveTo(event);
+    };
+    const endDrag = (event) => {
+        if (!draggingRef.current)
+            return;
+        draggingRef.current = false;
+        event.currentTarget.releasePointerCapture?.(event.pointerId);
+        end();
+    };
+    const onKeyDown = (event) => {
+        const by = event.shiftKey ? 10 : 1;
+        const right = isRtl(rootRef.current) ? -by : by;
+        const steps = {
+            ArrowRight: right,
+            ArrowLeft: -right,
+            ArrowUp: by,
+            ArrowDown: -by,
+            PageUp: 10,
+            PageDown: -10,
+            Home: -max,
+            End: max,
+        };
+        const step = steps[event.key];
+        if (step === undefined)
+            return;
+        event.preventDefault();
+        change(withValue(clamp$2(value + step, 0, max)), true);
+    };
+    if (!picker)
+        return null;
+    return (jsxRuntime.jsxs("div", { ref: node => setRefs(node, rootRef, ref), className: classNames(sliderClass, bulmaHelperClasses, className), style: {
+            ...style,
+            '--color-picker-hue': Math.round(color.h),
+            '--color-picker-rgb': rgbChannels(color),
+            '--color-slider-position': `${(value / max) * 100}%`,
+        }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, ...rest, children: [jsxRuntime.jsx("div", { className: trackClass }), jsxRuntime.jsx("div", { className: thumbClass, role: "presentation", children: jsxRuntime.jsx("input", { type: "range", className: inputClass, min: 0, max: max, step: 1, value: value, disabled: disabled, 
+                    // Spelled out, as the square's is, so Safari's Tab reaches it
+                    // with its default settings, which skip a range input without
+                    // one.
+                    tabIndex: 0, "aria-label": isHue ? labels.hue : labels.alpha, "aria-valuetext": isHue ? degrees(value) : percent(value), onChange: event => change(withValue(Number(event.target.value)), true), onKeyDown: onKeyDown }) })] }));
+});
+ChannelSlider.displayName = 'ChannelSlider';
+/**
+ * The hue slider, from red round the spectrum and back to red.
+ *
+ * @function
+ * @param {ColorPickerSliderProps} props - Props for ColorPicker.HueSlider.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the slider's `<div>`.
+ * @returns {JSX.Element | null} The slider, or nothing outside a ColorPicker.
+ */
+const ColorPickerHueSlider = React.forwardRef((props, ref) => jsxRuntime.jsx(ChannelSlider, { ref: ref, ...props, channel: "hue" }));
+ColorPickerHueSlider.displayName = 'ColorPicker.HueSlider';
+/**
+ * The alpha slider, from see-through to solid.
+ *
+ * @function
+ * @param {ColorPickerSliderProps} props - Props for ColorPicker.AlphaSlider.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the slider's `<div>`.
+ * @returns {JSX.Element | null} The slider, or nothing outside a ColorPicker.
+ */
+const ColorPickerAlphaSlider = React.forwardRef((props, ref) => jsxRuntime.jsx(ChannelSlider, { ref: ref, ...props, channel: "alpha" }));
+ColorPickerAlphaSlider.displayName = 'ColorPicker.AlphaSlider';
+/** Arrow keys and how far they move along the swatches. */
+const SWATCH_STEPS = {
+    ArrowRight: 1,
+    ArrowDown: 1,
+    ArrowLeft: -1,
+    ArrowUp: -1,
+};
+/**
+ * The swatches, a radio group of preset colors that sets the picker's color.
+ *
+ * @function
+ * @param {ColorPickerSwatchesProps} props - Props for ColorPicker.Swatches.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the group's `<div>`.
+ * @returns {JSX.Element | null} The swatches, or nothing outside a ColorPicker or with none to show.
+ */
+const ColorPickerSwatches = React.forwardRef(({ className, swatches: ownSwatches, ...props }, ref) => {
+    const picker = usePicker('Swatches');
+    const live = picker ?? standalone;
+    const { color, change, disabled, labels, format, alpha } = live;
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const classPrefix = useClassPrefix();
+    const groupClass = usePrefixedClassNames('color-picker-swatches');
+    const rootRef = React.useRef(null);
+    const given = ownSwatches ?? live.swatches;
+    const list = React.useMemo(() => (given === 'bulma' ? BULMA_SWATCHES : (given ?? [])).map(entry => typeof entry === 'string' ? { color: entry } : entry), [given]);
+    // A color the picker can't read as written, such as a var(), is read off
+    // the page, as the text the swatch's own custom property resolves to.
+    const chipsRef = React.useRef([]);
+    const textOf = React.useCallback((i) => {
+        const chip = chipsRef.current[i];
+        if (parseColor(list[i].color) || !chip)
+            return list[i].color;
+        return getComputedStyle(chip)
+            .getPropertyValue('--color-swatch-color')
+            .trim();
+    }, [list]);
+    // Those texts, read after every render rather than once: a Theme can
+    // change the variables behind them while the picker is open, and the
+    // chosen swatch has to follow. A read that changes nothing renders
+    // nothing more.
+    const [resolved, setResolved] = React.useState([]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- after every render on purpose; the updater keeps the state when nothing changed, so it settles
+    React.useEffect(() => {
+        const next = list.map((_, i) => textOf(i));
+        // eslint-disable-next-line react-hooks/set-state-in-effect -- a var() color can only be read off the page once its swatch is on it
+        setResolved(previous => previous.length === next.length &&
+            previous.every((text, i) => text === next[i])
+            ? previous
+            : next);
+    });
+    const colorOf = (i) => parseColor(list[i].color) ?? parseColor(resolved[i]);
+    // The same color, as far as the picker's value can tell: the same 8-bit
+    // color, or the same text, since an HSL value is rounded.
+    const shownText = formatColor(color, format, alpha);
+    const checked = list.findIndex((_, i) => {
+        const swatch = colorOf(i);
+        if (!swatch)
+            return false;
+        const solid = alpha ? swatch : { ...swatch, a: 1 };
+        return (sameColor(solid, color) || formatColor(solid, format, alpha) === shownText);
+    });
+    const [focused, setFocused] = React.useState(null);
+    const tabStop = focused ?? (checked >= 0 ? checked : 0);
+    // Read afresh, so a theme that changed since the last render counts.
+    const pick = (i) => {
+        const text = textOf(i);
+        const swatch = parseColor(text);
+        if (swatch)
+            change(keepingChannels(swatch, color, text), true);
+    };
+    const onKeyDown = (i) => (event) => {
+        const buttons = Array.from(rootRef.current.querySelectorAll('[role="radio"]'));
+        let next;
+        if (event.key === 'Home')
+            next = 0;
+        else if (event.key === 'End')
+            next = buttons.length - 1;
+        else if (SWATCH_STEPS[event.key]) {
+            // Left and Right follow the screen, so right to left they swap.
+            const sideways = event.key === 'ArrowLeft' || event.key === 'ArrowRight';
+            const flip = sideways && isRtl(rootRef.current) ? -1 : 1;
+            next =
+                (i + SWATCH_STEPS[event.key] * flip + buttons.length) % buttons.length;
+        }
+        if (next === undefined)
+            return;
+        event.preventDefault();
+        buttons[next]?.focus();
+        pick(next);
+    };
+    if (!picker || list.length === 0)
+        return null;
+    return (jsxRuntime.jsx("div", { ref: node => setRefs(node, rootRef, ref), className: classNames(groupClass, bulmaHelperClasses, className), role: "radiogroup", "aria-label": labels.swatches, "aria-disabled": disabled || undefined, ...rest, children: list.map((entry, i) => {
+            const swatch = colorOf(i);
+            const isChecked = i === checked;
+            // The check is drawn in black or white with a ring of the other, so
+            // it shows on any color. On a see-through swatch the page shows
+            // through, so it takes the scheme's text color and background,
+            // which follow dark mode, in place of the swatch's own.
+            const seeThrough = !!swatch && swatch.a < 1;
+            return (jsxRuntime.jsx("button", { type: "button", role: "radio", "aria-checked": isChecked, "aria-label": entry.label || entry.color, title: entry.label, tabIndex: i === tabStop ? 0 : -1, disabled: disabled, className: prefixedClassNames(classPrefix, 'color-picker-swatch', {
+                    'is-checked': isChecked,
+                    'is-see-through': seeThrough,
+                    'is-dark-ink': !!swatch && !seeThrough && prefersDarkInk(swatch),
+                }), onClick: () => pick(i), onKeyDown: onKeyDown(i), onFocus: () => setFocused(i), onBlur: () => setFocused(null), children: jsxRuntime.jsx(ColorSwatch, { ref: node => {
+                        chipsRef.current[i] = node;
+                    }, color: entry.color, "aria-hidden": "true", children: isChecked && (jsxRuntime.jsx(CheckIcon, { haloClass: prefixedClassNames(classPrefix, 'color-picker-check-halo') })) }) }, `${entry.color}-${i}`));
+        }) }));
+});
+ColorPickerSwatches.displayName = 'ColorPicker.Swatches';
+/**
+ * The check on the chosen swatch: a ring in `haloClass`, and the check over
+ * it in the current color.
+ */
+const CheckIcon = ({ haloClass }) => (jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", children: ['halo', 'ink'].map(part => (jsxRuntime.jsx("path", { className: part === 'halo' ? haloClass : undefined, d: "M3.5 8.5l3 3 6-7", fill: "none", stroke: "currentColor", strokeWidth: part === 'halo' ? 4.5 : 2, strokeLinecap: "round", strokeLinejoin: "round" }, part))) }));
+/**
+ * The value as text you can type in, beside a preview swatch, with the eye dropper when the picker has `eyeDropper`.
+ *
+ * @function
+ * @param {ColorPickerInputProps} props - Props for ColorPicker.Input.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the row's `<div>`.
+ * @returns {JSX.Element | null} The row, or nothing outside a ColorPicker.
+ */
+const ColorPickerInput = React.forwardRef(({ className, ...props }, ref) => {
+    const picker = usePicker('Input');
+    const live = picker ?? standalone;
+    const { color, text, change, disabled, labels, eyeDropper } = live;
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const rowClass = usePrefixedClassNames('color-picker-value');
+    const previewClass = usePrefixedClassNames('color-picker-preview');
+    // What's been typed and not yet committed, or null while the field
+    // shows the value.
+    const [draft, setDraft] = React.useState(null);
+    const invalid = draft !== null && !parseColor(draft);
+    const inputClass = usePrefixedClassNames('input', {
+        'is-small': true,
+        'is-danger': invalid,
+    });
+    const buttonClass = usePrefixedClassNames('button', { 'is-small': true });
+    const hydrated = useIsHydrated();
+    const EyeDropper = hydrated
+        ? window.EyeDropper
+        : undefined;
+    const commit = () => {
+        if (draft === null)
             return;
+        const parsed = parseColor(draft);
+        setDraft(null);
+        if (parsed)
+            change(keepingChannels(parsed, color, draft), true);
+    };
+    const onKeyDown = (event) => {
+        if (draft === null)
+            return;
+        if (event.key === 'Enter') {
+            // Commits rather than submitting a form; an unreadable value stays
+            // to be fixed.
+            event.preventDefault();
+            if (!invalid)
+                commit();
         }
-        switch (e.key) {
-            case 'ArrowDown':
-                e.preventDefault();
-                if (!isActive && data.length > 0) {
-                    setIsActive(true);
-                }
-                else {
-                    setHighlightedIndex(prev => prev < filteredData.length - 1 ? prev + 1 : prev);
-                }
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                setHighlightedIndex(prev => (prev > 0 ? prev - 1 : prev));
-                break;
-            case 'Backspace':
-                if (removeOnKeys && !inputValue && tags.length > 0) {
-                    e.preventDefault();
-                    removeTag(tags.length - 1);
-                }
-                break;
-            case 'Escape':
-                // Closing the suggestions claims the key, so a Modal around the
-                // field stays open. With none showing, the key goes on to it.
-                if (listOpen)
-                    e.preventDefault();
-                setIsActive(false);
-                setHighlightedIndex(-1);
-                break;
-        }
-    }, [
-        disabled,
-        readonly,
-        confirmKeys,
-        highlightedIndex,
-        filteredData,
-        addTags,
-        inputValue,
-        isActive,
-        listOpen,
-        data.length,
-        removeOnKeys,
-        tags.length,
-        removeTag,
-    ]);
-    // Combined ref
-    const combinedRef = React.useCallback((node) => {
-        inputRef.current =
-            node;
-        if (typeof ref === 'function') {
-            ref(node);
-        }
-        else if (ref) {
-            ref.current =
-                node;
+        else if (event.key === 'Escape') {
+            // Puts the value back, and keeps the key from closing a popover too.
+            event.preventDefault();
+            event.stopPropagation();
+            setDraft(null);
         }
-    }, [ref]);
-    // Focus input when container is clicked
-    const handleContainerClick = React.useCallback(() => {
-        inputRef.current?.focus();
-    }, []);
-    // Generate classes
-    const taginputClasses = pcn('taginput', {
-        'is-active': isActive,
-        [`is-${size}`]: !!size,
-        [`is-${color}`]: !!color,
-        'is-disabled': disabled,
-        'is-rounded': rounded,
-        'is-ellipsis': ellipsis,
-    });
-    const containerClasses = pcn('taginput-container', {
-        'is-attached': attached,
-        'has-icons-left': !!icon,
+    };
+    // Escape, or a click away, cancels it, which rejects.
+    const pickFromScreen = (Dropper) => new Dropper().open().then(({ sRGBHex }) => {
+        const parsed = parseColor(sRGBHex);
+        // The screen gives a solid color as hex; the alpha stays as it was,
+        // and a gray keeps the hue the picker had.
+        if (parsed) {
+            change(keepingChannels({ ...parsed, a: color.a }, color, sRGBHex), true);
+        }
+    }, noop);
+    if (!picker)
+        return null;
+    return (jsxRuntime.jsxs("div", { ref: ref, className: classNames(rowClass, bulmaHelperClasses, className), ...rest, children: [jsxRuntime.jsx(ColorSwatch, { color: text, className: previewClass, "aria-hidden": "true" }), jsxRuntime.jsx("input", { type: "text", className: inputClass, value: draft ?? text, disabled: disabled, "aria-label": labels.value, "aria-invalid": invalid || undefined, spellCheck: false, autoComplete: "off", autoCapitalize: "off", onChange: event => setDraft(event.target.value), onKeyDown: onKeyDown, onBlur: commit }), eyeDropper && EyeDropper && (jsxRuntime.jsx("button", { type: "button", className: buttonClass, "aria-label": labels.eyeDropper, title: labels.eyeDropper, disabled: disabled, onClick: () => pickFromScreen(EyeDropper), children: jsxRuntime.jsx(EyeDropperIcon, {}) }))] }));
+});
+ColorPickerInput.displayName = 'ColorPicker.Input';
+/** A pipette. */
+const EyeDropperIcon = () => (jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: "M10.5 2.5l3 3M9 4l3 3-6.5 6.5H3v-3z", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }) }));
+/**
+ * The `ColorPicker` component is a panel for choosing a color: a saturation and brightness square, a hue slider, and the value as text, with alpha and swatches when asked for.
+ *
+ * Every part is operable by keyboard, and the square is two native range
+ * inputs, one per axis, with one tab stop. The value is a CSS color string
+ * in `format`, HSL by default.
+ *
+ * @function
+ * @param {ColorPickerProps} props - Props for the ColorPicker component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the picker's `<div>`.
+ * @returns {JSX.Element} The rendered picker.
+ *
+ * @example
+ * <ColorPicker label="Brand color" defaultValue="#1e6b99" swatches="bulma" />
+ */
+const ColorPickerRoot = React.forwardRef(({ className, label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value, defaultValue, onChange, onChangeEnd, format = 'hsl', alpha = false, swatches, eyeDropper = false, disabled: disabledProp, name, form, labels, children, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
+    const insideField = useInsideField();
+    const insideControl = useInsideControl();
+    const ownField = rendersOwnField('ColorPicker', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
     });
-    const inputClasses = pcn('input', {
-        [`is-${size}`]: !!size,
+    const { ariaLabelledBy, fieldLabelProps } = useAutoLabelledBy({
+        label,
+        labelProps,
+        rendersLabel: ownField,
+        callerProps: props,
     });
-    const tagClasses = pcn('tag', {
-        [`is-${tagColor}`]: !!tagColor,
-        [`is-${size}`]: !!size,
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const pickerClass = usePrefixedClassNames('color-picker', {
+        'is-disabled': disabled,
     });
-    const combinedClasses = classNames(taginputClasses, bulmaHelperClasses, className);
-    // Counter text
-    const showCounter = hasCounter && (maxTags !== undefined || maxlength !== undefined);
-    const write = formatNumber ?? String;
-    const counterText = maxTags !== undefined
-        ? `${write(tags.length)} / ${write(maxTags)}`
-        : maxlength !== undefined
-            ? `${write(inputValue.length)} / ${write(maxlength)}`
-            : '';
-    const counterClasses = pcn('help', 'counter');
-    const tagsClasses = pcn('tags');
-    const dropdownMenuClasses = pcn('dropdown-menu', 'is-active');
-    const dropdownContentClasses = pcn('dropdown-content');
-    const iconRightClass = pcn('icon', 'is-right');
-    const loaderClass = pcn('loader', 'is-loading');
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
+    const context = useColorPicker({
+        value,
+        defaultValue,
+        onChange,
+        onChangeEnd,
+        format,
+        alpha,
+        disabled,
+        swatches,
+        eyeDropper,
+        labels,
+    });
+    const picker = (jsxRuntime.jsxs("div", { ref: ref, className: classNames(pickerClass, bulmaHelperClasses, className), role: "group", "aria-labelledby": ariaLabelledBy, ...rest, children: [jsxRuntime.jsx(ColorPickerContext.Provider, { value: context, children: children ?? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ColorPickerArea, {}), jsxRuntime.jsx(ColorPickerHueSlider, {}), alpha && jsxRuntime.jsx(ColorPickerAlphaSlider, {}), jsxRuntime.jsx(ColorPickerInput, {}), swatches && jsxRuntime.jsx(ColorPickerSwatches, {})] })) }), name && (jsxRuntime.jsx("input", { type: "hidden", name: name, form: form, value: context.text, disabled: disabled }))] }));
+    let content = picker;
+    if (rendersOwnControl('ColorPicker', { insideControl })) {
+        content = jsxRuntime.jsx(Control, { children: content });
+    }
     const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
-    // The combobox controls its listbox and points at the highlighted option,
-    // the way Autocomplete's does. The listbox takes its name from the label
-    // that names the combobox, the one this renders or a surrounding Field's,
-    // and keeps a fallback name when no label names it or the one that does
-    // has no id to point at. While no suggestion matches there's no listbox,
-    // so the combobox is collapsed and points at nothing. It skips a
-    // highlighted suggestion that's blank once trimmed, since that one can't
-    // become a tag, and the option it points at is the one marked selected.
-    const optionId = (index) => `${listboxId}-${index}`;
-    const activeOptionId = listOpen && filteredData[highlightedIndex]?.trim()
-        ? optionId(highlightedIndex)
-        : undefined;
-    const comboboxProps = {
-        role: 'combobox',
-        'aria-expanded': listOpen,
-        'aria-controls': listOpen ? listboxId : undefined,
-        'aria-activedescendant': activeOptionId,
-        'aria-haspopup': 'listbox',
-        'aria-autocomplete': 'list',
-    };
-    const taginputElement = (jsxRuntime.jsxs("div", { ref: containerRef, className: combinedClasses, onClick: handleContainerClick, ...rest, children: [jsxRuntime.jsxs("div", { className: containerClasses, children: [icon && (jsxRuntime.jsx(Icon, { name: icon, library: resolvedLibrary, variant: iconVariant, features: iconFeatures, containerClassName: pcn('icon', 'is-left') })), jsxRuntime.jsxs("div", { className: tagsClasses, children: [tags.map((tag, index) => {
-                                const displayVal = getDisplayValue(tag);
-                                return (jsxRuntime.jsxs("span", { className: tagClasses, children: [tagTemplate ? (tagTemplate(tag)) : ellipsis ? (jsxRuntime.jsx("span", { title: displayVal, children: displayVal })) : (displayVal), closable && !disabled && !readonly && (jsxRuntime.jsx("button", { type: "button", className: pcn('delete', 'is-small'), onClick: e => {
-                                                e.stopPropagation();
-                                                removeTag(index);
-                                            }, "aria-label": ariaCloseLabel || `Remove ${displayVal}` }))] }, index));
-                            }), jsxRuntime.jsx("input", { ref: combinedRef, type: "text", className: inputClasses, id: controlId, value: inputValue, placeholder: tags.length === 0 ? placeholder : undefined, disabled: disabled, 
-                                // Read-only at the tag limit rather than gone, so focus stays
-                                // put and a label keeps naming it, and Backspace still makes
-                                // room (#1103).
-                                readOnly: readonly || isMaxReached, maxLength: maxlength, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, onPaste: handlePaste, ...(hasSuggestions && comboboxProps), "aria-label": labelled ? undefined : 'Add tag', "aria-describedby": showCounter ? counterId : undefined })] }), loading && (jsxRuntime.jsx("span", { className: iconRightClass, children: jsxRuntime.jsx("span", { className: loaderClass }) }))] }), listOpen && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsx("div", { ref: dropdownRef, id: listboxId, className: dropdownContentClasses, role: "listbox", "aria-labelledby": listLabelId, "aria-label": listLabelId ? undefined : 'Suggestions', children: filteredData.map((item, index) => (jsxRuntime.jsx("a", { id: optionId(index), className: pcn('dropdown-item', {
-                            'is-active': index === highlightedIndex,
-                        }), onClick: () => addTags([item]), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": optionId(index) === activeOptionId, children: item }, index))) }) })), showCounter && (jsxRuntime.jsx("small", { id: counterId, className: counterClasses, children: counterText })), name &&
-                tags.map((tag, i) => (jsxRuntime.jsx("input", { type: "hidden", name: name, value: getDisplayValue(tag), form: form }, `tag-input-${i}`)))] }));
     if (ownField) {
-        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [taginputElement, messageEl] }));
+        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [taginputElement, messageEl] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
+});
+ColorPickerRoot.displayName = 'ColorPicker';
+const ColorPicker = withSubComponents(ColorPickerRoot, {
+    Area: ColorPickerArea,
+    HueSlider: ColorPickerHueSlider,
+    AlphaSlider: ColorPickerAlphaSlider,
+    Swatches: ColorPickerSwatches,
+    Input: ColorPickerInput,
 });
-Taginput.displayName = 'Taginput';
-/** @deprecated Use `Taginput` — same component. */
-const TagInput = Taginput;
 
 /**
  * Bulma Select component with full Bulma helper class support.
@@ -19666,50 +21890,6 @@ const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'botto
 };
 PickerPopover.displayName = 'PickerPopover';
 
-function useNativeMobilePicker(options = {}) {
-    const { smallViewportMaxPx = 768, force } = options;
-    const [state, setState] = React.useState({
-        isCoarsePointer: false,
-        isSmallViewport: false,
-        shouldUseNative: force === true,
-    });
-    React.useEffect(() => {
-        const isBrowser = typeof window !== 'undefined' && typeof window.matchMedia === 'function';
-        if (!isBrowser)
-            return undefined;
-        const coarse = window.matchMedia('(pointer: coarse)');
-        const small = window.matchMedia(`(max-width: ${smallViewportMaxPx}px)`);
-        const update = () => {
-            const isCoarsePointer = coarse.matches;
-            const isSmallViewport = small.matches;
-            const shouldUseNative = force === true
-                ? true
-                : force === false
-                    ? false
-                    : isCoarsePointer && isSmallViewport;
-            setState({ isCoarsePointer, isSmallViewport, shouldUseNative });
-        };
-        update();
-        const subscribe = (mql, fn) => {
-            if (mql.addEventListener) {
-                // eslint-disable-next-line @eslint-react/web-api-no-leaked-event-listener -- cleanup returned below and run in the effect teardown
-                mql.addEventListener('change', fn);
-                return () => mql.removeEventListener('change', fn);
-            }
-            // Older Safari fallback
-            mql.addListener(fn);
-            return () => mql.removeListener(fn);
-        };
-        const unsubCoarse = subscribe(coarse, update);
-        const unsubSmall = subscribe(small, update);
-        return () => {
-            unsubCoarse();
-            unsubSmall();
-        };
-    }, [smallViewportMaxPx, force]);
-    return state;
-}
-
 /**
  * Segment-map utility for manual keyboard entry on a date / time picker input.
  * Given a token-format string like `'YYYY-MM-DD'`, `'HH:mm:ss'`, `'hh:mm A'`,
@@ -24936,6 +27116,13 @@ exports.ClientOnly = ClientOnly;
 exports.Code = Code;
 exports.Collapse = Collapse;
 exports.Collapses = Collapses;
+exports.ColorPicker = ColorPicker;
+exports.ColorPickerAlphaSlider = ColorPickerAlphaSlider;
+exports.ColorPickerArea = ColorPickerArea;
+exports.ColorPickerHueSlider = ColorPickerHueSlider;
+exports.ColorPickerInput = ColorPickerInput;
+exports.ColorPickerSwatches = ColorPickerSwatches;
+exports.ColorSwatch = ColorSwatch;
 exports.Column = Column;
 exports.Columns = Columns;
 exports.Combobox = Combobox;
@@ -24957,6 +27144,7 @@ exports.Container = Container;
 exports.Content = Content;
 exports.ContextMenu = ContextMenu;
 exports.Control = Control;
+exports.DataTable = DataTable;
 exports.DateInput = DateInput;
 exports.DateInputBase = DateInputBase;
 exports.DateRangeInput = DateRangeInput;
@@ -24974,6 +27162,7 @@ exports.Divider = Divider;
 exports.Dropdown = Dropdown;
 exports.DropdownDivider = DropdownDivider;
 exports.DropdownItem = DropdownItem;
+exports.Dropzone = Dropzone;
 exports.Emphasis = Emphasis;
 exports.EmptyState = EmptyState;
 exports.EmptyStateActions = EmptyStateActions;
@@ -25134,6 +27323,7 @@ exports.useClassPrefix = useClassPrefix;
 exports.useColorClasses = useColorClasses;
 exports.useColorStyles = useColorStyles;
 exports.useConfig = useConfig;
+exports.useDataTable = useDataTable;
 exports.useFlexboxClasses = useFlexboxClasses;
 exports.useFocusTrap = useFocusTrap;
 exports.useIconLibrary = useIconLibrary;