@allxsmith/bestax-bulma 5.50.0 → 5.52.0

package/dist/types/form/RadioCard.d.ts

@@ -0,0 +1,81 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+declare const radioCardColors: readonly ["primary", "link", "info", "success", "warning", "danger"];
+/**
+ * Props for the RadioCard component.
+ *
+ * @helperProps Helper props go on the outer `<label>`, the `.card`, with
+ * `className`. The other attributes go on the `<input>`.
+ * @extraProp {string} [name] - The form field name, which the cards of one choice share, so the arrow keys move between them. Inside `Radios`, the group's `name` when this is unset.
+ * @extraProp {string} [value] - What a form sends when this card is the one picked. Inside a `Radios` group that takes `value`, `defaultValue` or `onChange`, the card is checked while the group's value is this.
+ */
+export interface RadioCardProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'color' | 'title'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {
+    /**
+     * What the option is, such as "Express". It names the radio, so a screen
+     * reader says it with the state and its place in the group. Without it,
+     * the card's whole text names the radio, as a label's text does.
+     */
+    title?: React.ReactNode;
+    /**
+     * A line or two about the option, read after the name and the state. It's
+     * the radio's description when `title`, `aria-label` or `aria-labelledby`
+     * names it. Without one of those it's part of the name already, so it
+     * isn't read twice.
+     */
+    description?: React.ReactNode;
+    /**
+     * Anything else in the card, after the description, such as a price. A
+     * label holds phrasing content only, so spans, images and links: a link
+     * works and doesn't pick the card, but a button or another input can't go
+     * inside a label at all. It isn't read when the radio takes focus, so put
+     * what a screen reader should hear in `title` and `description`.
+     */
+    children?: React.ReactNode;
+    /**
+     * Shows the radio at the start of the card. Without it, the card's edge
+     * alone shows the selection, and it's thicker when picked, so the
+     * selection never rests on color.
+     */
+    hasIndicator?: boolean;
+    /** The color of the radio and of a picked card's edge. */
+    color?: (typeof radioCardColors)[number];
+    /**
+     * Text color helper, on the card. The title and the children take it, and
+     * the description keeps its own color.
+     */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Whether the card is disabled. A disabled card dims, takes no clicks, and the arrow keys skip it. */
+    disabled?: boolean;
+    /**
+     * Additional CSS classes, on the outer `<label>`, the card. That's the
+     * element that declares the `--bulma-radio-card-*` variables, and Bulma's
+     * `--bulma-card-*` ones, so a class is how to set one: `style` and the
+     * other input attributes go to the `<input>`. Name `.radio-card` beside
+     * your class in the selector, so it beats the card's own declaration
+     * whatever order the stylesheets load in. A `color` prop declares the
+     * active color again on `.radio-card.is-<color>`, which ties that
+     * selector, so leave `color` unset when a class sets it.
+     */
+    className?: string;
+}
+/**
+ * The `RadioCard` component is a radio button drawn as a card, with a title and a description, picked wherever you click it.
+ *
+ * It's a `<label>` around a real radio, so it sends its `value` with a form,
+ * and the cards that share a `name` are one choice the arrow keys move
+ * through. The title names the radio and the description describes it.
+ * Inside `Radios` it takes the group's name and selection, as `Radio` does.
+ *
+ * @function
+ * @param {RadioCardProps} props - Props for the RadioCard component.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the `<input>`.
+ * @returns {JSX.Element} The rendered card.
+ *
+ * @example
+ * <Radios label="Shipping" name="shipping" defaultValue="standard">
+ *   <RadioCard value="standard" title="Standard" description="Arrives in 4 to 6 days." />
+ *   <RadioCard value="express" title="Express" description="Arrives tomorrow." />
+ * </Radios>
+ */
+export declare const RadioCard: React.ForwardRefExoticComponent<RadioCardProps & React.RefAttributes<HTMLInputElement>>;
+export default RadioCard;

package/dist/types/form/Radios.d.ts

@@ -30,6 +30,19 @@ export interface RadiosProps extends Omit<BulmaClassesProps, 'color'>, FormField
     onChange?: (value: string) => void;
     /** Radio elements to render in the group. */
     children: React.ReactNode;
+    /**
+     * The element the group renders as. With `fieldset` it's a native
+     * `<fieldset>` that keeps `role="radiogroup"`. Where the group renders a
+     * `Field` of its own, that `Field` is the `<fieldset>` and the `label` is
+     * its `<legend>`, in the label column when `horizontal`, so the legend names
+     * the group with no ids to wire. Your other attributes then go on the
+     * `<fieldset>`, while `className` and the helper props stay on the box that
+     * lays out the radios. Inside an outer `Field` there's no legend: the group
+     * element itself is the `<fieldset>`, named by that `Field`'s label as
+     * before. `div`, the default, renders the group as it always has.
+     * @defaultValue 'div'
+     */
+    as?: 'div' | 'fieldset';
 }
 export declare const Radios: React.FC<RadiosProps> & {
     Radio: React.ForwardRefExoticComponent<import("./Radio.js").RadioProps & React.RefAttributes<HTMLInputElement>>;

package/dist/types/form/groupFieldset.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { FormFieldProps } from './fieldProps.js';
+interface GroupFieldsetProps {
+    /** The group's label, rendered as the `<legend>`. */
+    label: React.ReactNode;
+    /** Sizes the legend's label column when `horizontal`. */
+    labelSize?: FormFieldProps['labelSize'];
+    /** Props for the element that shows the label; any `htmlFor` is dropped. */
+    labelProps?: FormFieldProps['labelProps'];
+    /** Puts the legend in the label column and the rest in the body. */
+    horizontal?: boolean;
+    /** Set on the `<fieldset>` beside its `field` class. */
+    fieldClassName?: string;
+    /** The group's role, when it isn't the fieldset's own `group`. */
+    role?: 'radiogroup';
+    /** The group's own attributes: they describe the group, so they go on the `<fieldset>`. */
+    attributes: object;
+    /** The group's help text, after the content. */
+    message: React.ReactNode;
+    /** The group's content: its `Control` and the box of choices. */
+    children: React.ReactNode;
+}
+/**
+ * The `Field` a `Checkboxes` or `Radios` with `as="fieldset"` renders of its
+ * own, as a native `<fieldset>`: Bulma's field markup, with its label as the
+ * `<legend>` (inside the `field-label` column when horizontal), so the legend
+ * names the group and needs no id. It holds a `Field`'s place for what is
+ * inside, so the choices read as inside a `Field`. Internal; not part of the
+ * public API.
+ */
+export declare const GroupFieldset: React.FC<GroupFieldsetProps>;
+export {};

package/dist/types/index.d.ts

@@ -31,6 +31,7 @@ export * from './components/Carousel.js';
 export * from './components/Reveal.js';
 export * from './components/TreeView.js';
 export * from './components/ScrollArea.js';
+export * from './components/Command.js';
 export * from './elements/Block.js';
 export * from './elements/Box.js';
 export * from './elements/Button.js';
@@ -40,6 +41,7 @@ export * from './elements/ToggleButton.js';
 export * from './elements/Code.js';
 export * from './elements/Content.js';
 export * from './elements/Delete.js';
+export * from './elements/DescriptionList.js';
 export * from './elements/Divider.js';
 export * from './elements/Emphasis.js';
 export * from './elements/Figure.js';
@@ -72,11 +74,13 @@ export * from './elements/Title.js';
 export * from './elements/Tr.js';
 export * from './elements/UnorderedList.js';
 export * from './form/Checkbox.js';
+export * from './form/CheckboxCard.js';
 export * from './form/Checkboxes.js';
 export * from './form/Control.js';
 export * from './form/Field.js';
 export * from './form/File.js';
 export * from './form/Radio.js';
+export * from './form/RadioCard.js';
 export * from './form/Radios.js';
 export * from './form/Switch.js';
 export * from './form/Slider.js';

package/dist/types-cjs/components/Command.d.ts

@@ -0,0 +1,318 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import { InputProps } from '../form/Input.js';
+/** One action in a Command's `actions`. */
+export interface CommandAction {
+    /** Unique within the Command. It's the item's `value`, so `onSelect` hands it back. */
+    id: string;
+    /** What the item shows, and what typing matches first. */
+    label: string;
+    /**
+     * A line under the label, such as what the action does or where it goes.
+     * Typing matches it too, after the labels. A screen reader hears it after
+     * the label, as the item's description.
+     */
+    description?: string;
+    /**
+     * More words typing matches, after the labels, such as `['theme']` for
+     * "Dark mode". They aren't shown.
+     */
+    keywords?: string[];
+    /**
+     * The heading the action goes under. Groups show in the order the matches
+     * first name them, so the best match is always on top, and the actions with
+     * no group show together where the first of them is.
+     */
+    group?: string;
+    /** Shown before the label, and hidden from assistive tech. */
+    icon?: React.ReactNode;
+    /**
+     * Shown at the end of the row, such as the action's own keyboard shortcut in
+     * a `Kbd.Group`, or a `Tag`. It only shows: nothing listens for a shortcut
+     * written here. A screen reader hears it after the label, with the
+     * description.
+     */
+    hint?: React.ReactNode;
+    /** Shown, and reached with the arrows so a screen reader user finds it, but never run. */
+    disabled?: boolean;
+    /** Runs the action, when it's picked with Enter or a click, before the Command's `onSelect`. */
+    onSelect?: () => void;
+}
+/** What a Command takes whether it's given `actions` or built from parts. */
+interface CommandBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'onSelect'>, Omit<BulmaClassesProps, 'color'> {
+    /**
+     * What the Command is for, such as "Commands" or "Settings". It's never
+     * shown: it names the search field and the list for assistive tech, and in
+     * `Command.Dialog` the dialog too. An empty string counts as none.
+     * @defaultValue 'Commands'
+     */
+    label?: string;
+    /**
+     * The search, controlled: the text in the field. Pair it with
+     * `onQueryChange`.
+     */
+    query?: string;
+    /**
+     * The search to start with when uncontrolled.
+     * @defaultValue ''
+     */
+    defaultQuery?: string;
+    /**
+     * Called with the search as the user types it. Built from parts, this is
+     * where the app filters its items.
+     */
+    onQueryChange?: (query: string) => void;
+    /**
+     * Called with the picked item's `value`, an action's `id`, when it's run
+     * with Enter or a click, after the item's own `onSelect`. A disabled item
+     * is never run.
+     */
+    onSelect?: (value: string) => void;
+}
+/** Props for a Command given `actions`. */
+export interface CommandActionsProps extends CommandBaseProps {
+    /**
+     * The actions, for a Command that renders the field, the list, the groups
+     * and the empty message itself. Typing filters them by label, keywords and
+     * description, ignoring case, with label matches first. Leave it out to
+     * build the Command from parts.
+     */
+    actions: CommandAction[];
+    /**
+     * Takes over the filtering, with `actions`: it's handed the search as typed
+     * and every action, and returns the ones to show, in the order to show
+     * them, which is how to plug in fuzzy matching or cut the list short. It's
+     * called with an empty search too.
+     */
+    filter?: (query: string, actions: CommandAction[]) => CommandAction[];
+    /** The field's placeholder, with `actions`. */
+    placeholder?: string;
+    /**
+     * What shows in place of the list, with `actions`, when nothing matches.
+     * It's announced the way `Command.Empty` is. `null` shows nothing.
+     * @defaultValue 'No results'
+     */
+    empty?: React.ReactNode;
+    /** @internal With `actions`, the Command renders its own parts. */
+    children?: never;
+}
+/** Props for a Command built from parts. */
+export interface CommandPartsProps extends CommandBaseProps {
+    /**
+     * The parts, in order: `Command.Input`, then `Command.List` while there are
+     * items and `Command.Empty` while there aren't. Nothing filters them, so
+     * render the items that match the search `onQueryChange` reports. With
+     * `actions` there are none to give: children given with it are ignored,
+     * with a warning in development.
+     */
+    children?: React.ReactNode;
+    /** @internal Built from parts, the app renders the items. */
+    actions?: never;
+    /** @internal Built from parts, the app filters. */
+    filter?: never;
+    /** @internal Built from parts, `Command.Input` takes the placeholder. */
+    placeholder?: never;
+    /** @internal Built from parts, `Command.Empty` is the empty message. */
+    empty?: never;
+}
+/**
+ * Props for the Command component: given `actions`, it renders, filters and
+ * groups them itself, and without them it's built from parts. The helper
+ * props, the other attributes and the `ref` land on the `div.command` around
+ * the field and the list.
+ *
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the `div.command` around the field and the list.
+ */
+export type CommandProps = CommandActionsProps | CommandPartsProps;
+/** What Command.Dialog takes on top of a Command's props. */
+interface CommandDialogOwnProps {
+    /** Controlled open state. When set, opening and closing only report through `onOpenChange`. */
+    open?: boolean;
+    /**
+     * Initial open state when uncontrolled.
+     * @defaultValue false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Called with the open state asked for: `true` from the `shortcut`, and
+     * `false` from Escape, a click on the background, or a pick while
+     * `closeOnSelect` is on. Fires in controlled and uncontrolled use.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * A key combination that opens the dialog from anywhere on the page, such
+     * as `"mod+k"`: modifiers and a key joined by `+`, where `mod` is Ctrl or
+     * ⌘ (either one, on every platform), and the others are `ctrl`, `meta`,
+     * `alt` and `shift`. It's ignored while the user is typing in a text field,
+     * a select or editable content, while an IME is composing, while a modal
+     * overlay is open (a `Modal`, a `Dialog`, a `Sidebar` with its overlay or a
+     * full-page `Loading`), and when something else has already used the key.
+     * It only opens the dialog. Off unless given.
+     */
+    shortcut?: string;
+    /**
+     * Closes the dialog once an item has run. Turn it off for an item that
+     * opens another page of the palette, and close it yourself with `open`.
+     * @defaultValue true
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Clears the search when the dialog closes: an uncontrolled one itself,
+     * and a controlled one through `onQueryChange('')`.
+     * @defaultValue true
+     */
+    clearOnClose?: boolean;
+    /**
+     * Renders the dialog into a portal target instead of inline. Forwarded to
+     * the underlying `Modal`; see its `portal` prop for the accepted values.
+     * @defaultValue false
+     */
+    portal?: boolean | string | HTMLElement;
+}
+/** Props for a Command.Dialog given `actions`. */
+export interface CommandDialogActionsProps extends CommandActionsProps, CommandDialogOwnProps {
+}
+/** Props for a Command.Dialog built from parts. */
+export interface CommandDialogPartsProps extends CommandPartsProps, CommandDialogOwnProps {
+}
+/**
+ * Props for Command.Dialog, the Command in a modal: a Command's props, given
+ * `actions` or built from parts, and the dialog's own. The helper props, the
+ * other attributes and the `ref` land on the `div.command` that is the
+ * dialog.
+ *
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the `div.command` that is the dialog.
+ */
+export type CommandDialogProps = CommandDialogActionsProps | CommandDialogPartsProps;
+/**
+ * Props for Command.Input, the search field. It renders `Input`, so its
+ * icons, `isLoading` and `color` work as they do there. Its text is the
+ * Command's `query`, and it's `autoComplete="off"`, so the browser's own
+ * suggestions don't open over the list: neither is yours to set.
+ */
+export type CommandInputProps = Omit<InputProps, 'label' | 'labelSize' | 'labelProps' | 'horizontal' | 'message' | 'messageColor' | 'fieldClassName' | 'role' | 'autoComplete' | 'value' | 'defaultValue'>;
+/**
+ * Props for Command.List, the list. Its `id` is the one the field's
+ * `aria-controls` names, so it isn't yours to set.
+ */
+export interface CommandListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'id'> {
+    /** `Command.Item`s and `Command.Group`s, in the order they're shown. */
+    children?: React.ReactNode;
+}
+/** Props for Command.Group, items under a heading. */
+export interface CommandGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'role'> {
+    /**
+     * The heading, which also names the group for assistive tech, unless you
+     * give the group an `aria-label` or `aria-labelledby` of its own.
+     */
+    label: React.ReactNode;
+    /** The group's `Command.Item`s. */
+    children?: React.ReactNode;
+}
+/**
+ * Props for Command.Item, one thing to do in the list. Its `id` follows from
+ * its `value`, since the field's `aria-activedescendant` names it, so it
+ * isn't yours to set.
+ */
+export interface CommandItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'onSelect' | 'id'> {
+    /** What the Command's `onSelect` hands back. Unique within the Command. */
+    value: string;
+    /**
+     * Can't be run. The arrows still reach it, so a screen reader user finds
+     * it, and it's never `aria-selected`.
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /** Runs the item, when it's picked with Enter or a click, before the Command's `onSelect`. */
+    onSelect?: () => void;
+    /** Shown before the label, and hidden from assistive tech. */
+    icon?: React.ReactNode;
+    /**
+     * A line under the label. A screen reader hears it after the label, as the
+     * item's description.
+     */
+    description?: React.ReactNode;
+    /**
+     * Shown at the end of the row, such as a keyboard shortcut in a
+     * `Kbd.Group`, or a `Tag`. It only shows. A screen reader hears it after
+     * the label, with the description.
+     */
+    hint?: React.ReactNode;
+    /** The label, which names the item. */
+    children?: React.ReactNode;
+}
+/** Props for Command.Empty, the message shown in place of the list. */
+export interface CommandEmptyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The message, such as "No commands match". Its text is announced when
+     * typing brings it on screen and isn't read again while it stays, so a
+     * message that names the search is heard for the first search only.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * The search field, with the combobox role and the keys, rendered as an `Input` with a search icon.
+ *
+ * @function
+ * @param {CommandInputProps} props - Props for the Command.Input component.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the `<input>`.
+ * @returns {JSX.Element} The field in its Control.
+ */
+export declare const CommandInput: React.ForwardRefExoticComponent<CommandInputProps & React.RefAttributes<HTMLInputElement>>;
+/**
+ * The list of items, a `listbox` named by the Command's `label`.
+ *
+ * @function
+ * @param {CommandListProps} props - Props for the Command.List component.
+ * @returns {JSX.Element} The listbox.
+ */
+export declare const CommandList: React.FC<CommandListProps>;
+/**
+ * Items under a heading, a `group` named by it.
+ *
+ * @function
+ * @param {CommandGroupProps} props - Props for the Command.Group component.
+ * @returns {JSX.Element} The group and its heading.
+ */
+export declare const CommandGroup: React.FC<CommandGroupProps>;
+/**
+ * One thing to do in the list, named by its label and described by its description and hint.
+ *
+ * @function
+ * @param {CommandItemProps} props - Props for the Command.Item component.
+ * @returns {JSX.Element} The item.
+ */
+export declare const CommandItem: React.FC<CommandItemProps>;
+/**
+ * The message shown in place of the list when nothing matches, announced when typing brings it on screen.
+ *
+ * @function
+ * @param {CommandEmptyProps} props - Props for the Command.Empty component.
+ * @returns {JSX.Element} The message.
+ */
+export declare const CommandEmpty: React.FC<CommandEmptyProps>;
+/**
+ * The Command in a modal, a command palette, opened by its `shortcut` or by `open`, that closes once an item has run.
+ *
+ * It renders nothing while it's closed. Open, it's a `Modal` with a
+ * background and the Command's box as the `dialog`, named by `label`:
+ * focus goes to the search field, Tab stays inside, Escape and a click on
+ * the background close it, the page behind it doesn't scroll, and focus goes
+ * back to where it was when it closes.
+ *
+ * @function
+ * @param {CommandDialogProps} props - Props for the Command.Dialog component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the `div.command` that is the dialog.
+ * @returns {JSX.Element | null} The dialog, or nothing while it's closed.
+ */
+export declare const CommandDialog: React.ForwardRefExoticComponent<CommandDialogProps & React.RefAttributes<HTMLDivElement>>;
+/** Command with Input, List, Group, Item, Empty and Dialog sub-components. */
+export declare const Command: React.ForwardRefExoticComponent<CommandProps & React.RefAttributes<HTMLDivElement>> & {
+    Input: React.ForwardRefExoticComponent<CommandInputProps & React.RefAttributes<HTMLInputElement>>;
+    List: React.FC<CommandListProps>;
+    Group: React.FC<CommandGroupProps>;
+    Item: React.FC<CommandItemProps>;
+    Empty: React.FC<CommandEmptyProps>;
+    Dialog: React.ForwardRefExoticComponent<CommandDialogProps & React.RefAttributes<HTMLDivElement>>;
+};
+export default Command;

package/dist/types-cjs/elements/DescriptionList.d.ts

@@ -0,0 +1,185 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+declare const validDescriptionListOrientations: readonly ["vertical", "horizontal"];
+/** Whether each label sits above its value (`vertical`) or beside it (`horizontal`). */
+export type DescriptionListOrientation = (typeof validDescriptionListOrientations)[number];
+/**
+ * Props for the DescriptionList component. The helper props, the other
+ * attributes and the `ref` land on the `<dl>`.
+ *
+ * @extraProp {React.Ref<HTMLDListElement>} [ref] - Ref forwarded to the `<dl>`.
+ * @extraProp {string} [aria-labelledby] - The id of the heading above the list, which names it.
+ */
+export interface DescriptionListProps extends Omit<React.HTMLAttributes<HTMLDListElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /** `DescriptionList.Item`s, one for each fact. */
+    children?: React.ReactNode;
+    /**
+     * Whether each label sits above its value or beside it, at every width no
+     * `orientation<Viewport>` prop covers. Those props read the way a
+     * `Column`'s `size<Viewport>` props do: `orientationMobile` applies below
+     * Bulma's tablet breakpoint, each of the others from its own breakpoint
+     * up, and where several apply the widest one wins. With none of them,
+     * labels sit above their values below the tablet breakpoint and beside
+     * them from it up. Beside, the labels share one column as wide as the
+     * longest label, up to `--bulma-description-list-label-max-width`, so the
+     * values line up.
+     */
+    orientation?: DescriptionListOrientation;
+    /**
+     * The orientation below Bulma's tablet breakpoint (769px). Falls back to
+     * `orientation`, then to `vertical`.
+     */
+    orientationMobile?: DescriptionListOrientation;
+    /**
+     * The orientation from Bulma's tablet breakpoint (769px) up, until a wider
+     * viewport's prop takes over. Falls back to `orientation`, then to
+     * `horizontal`.
+     */
+    orientationTablet?: DescriptionListOrientation;
+    /**
+     * The orientation from Bulma's desktop breakpoint (1024px) up, until a
+     * wider viewport's prop takes over. Falls back to `orientationTablet`, and
+     * on down.
+     */
+    orientationDesktop?: DescriptionListOrientation;
+    /**
+     * The orientation from Bulma's widescreen breakpoint (1216px) up, until
+     * `orientationFullhd` takes over. Falls back to `orientationDesktop`, and
+     * on down.
+     */
+    orientationWidescreen?: DescriptionListOrientation;
+    /**
+     * The orientation from Bulma's fullhd breakpoint (1408px) up. Falls back to
+     * `orientationWidescreen`, and on down.
+     */
+    orientationFullhd?: DescriptionListOrientation;
+    /**
+     * Draws a line between items, which helps the eye from a label to its
+     * value across a wide list, and shows where each item ends to someone
+     * zoomed in.
+     */
+    hasDividers?: boolean;
+    /** Text color helper. It colors the values; the labels keep their own color. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * Props for DescriptionList.Item, one fact. The helper props, the other
+ * attributes and the `ref` land on its `<div>`.
+ *
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the `<div>`.
+ */
+export interface DescriptionListItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /**
+     * The label, such as "Order", as a `DescriptionList.Label` before the
+     * children.
+     */
+    label?: React.ReactNode;
+    /**
+     * The value, such as "#1234", as a `DescriptionList.Value` after the
+     * children. Text, a link, a `Tag`: anything that renders. `undefined`,
+     * `null` and `''` render nothing, so when a value is missing, say so in
+     * words, such as "Not given", rather than leave a label with nothing after
+     * it.
+     */
+    value?: React.ReactNode;
+    /**
+     * `DescriptionList.Label`s and `DescriptionList.Value`s, for what `label`
+     * and `value` don't cover, such as a label with an info tip or several
+     * values. They render between the two, so a `Label` here reads before
+     * `value`, and a `Value` here after `label`.
+     */
+    children?: React.ReactNode;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * Props for DescriptionList.Label. The helper props, the other attributes and
+ * the `ref` land on its `<dt>`.
+ *
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the `<dt>`.
+ */
+export interface DescriptionListLabelProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /**
+     * The label. A button may sit in it, such as one that opens a `Popover`
+     * about the label, but not a heading, which HTML doesn't allow here.
+     */
+    children?: React.ReactNode;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * Props for DescriptionList.Value. The helper props, the other attributes and
+ * the `ref` land on its `<dd>`.
+ *
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the `<dd>`.
+ */
+export interface DescriptionListValueProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /** The value. Anything goes, a list or a paragraph included. */
+    children?: React.ReactNode;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * A label, the name of a fact: a `<dt>`, in the weaker text color.
+ *
+ * @function
+ * @param {DescriptionListLabelProps} props - Props for DescriptionList.Label.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<dt>`.
+ * @returns {JSX.Element} The rendered label.
+ *
+ * @example
+ * <DescriptionList.Label>Placed on</DescriptionList.Label>
+ */
+export declare const DescriptionListLabel: React.ForwardRefExoticComponent<DescriptionListLabelProps & React.RefAttributes<HTMLElement>>;
+/**
+ * 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
+ * <DescriptionList.Value>14 October 2026</DescriptionList.Value>
+ */
+export declare const DescriptionListValue: React.ForwardRefExoticComponent<DescriptionListValueProps & React.RefAttributes<HTMLElement>>;
+/**
+ * One fact: its label and its value, in a `<div>`, from the `label` and `value` props or from `Label` and `Value` children.
+ *
+ * @function
+ * @param {DescriptionListItemProps} props - Props for DescriptionList.Item.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the `<div>`.
+ * @returns {JSX.Element} The rendered item.
+ *
+ * @example
+ * <DescriptionList.Item label="Order" value="#1234" />
+ *
+ * @example
+ * <DescriptionList.Item label="Tags">
+ *   <DescriptionList.Value>Gift</DescriptionList.Value>
+ *   <DescriptionList.Value>Priority</DescriptionList.Value>
+ * </DescriptionList.Item>
+ */
+export declare const DescriptionListItem: React.ForwardRefExoticComponent<DescriptionListItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DescriptionList: React.ForwardRefExoticComponent<DescriptionListProps & React.RefAttributes<HTMLDListElement>> & {
+    Item: React.ForwardRefExoticComponent<DescriptionListItemProps & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<DescriptionListLabelProps & React.RefAttributes<HTMLElement>>;
+    Value: React.ForwardRefExoticComponent<DescriptionListValueProps & React.RefAttributes<HTMLElement>>;
+};
+export default DescriptionList;