@allxsmith/bestax-bulma 5.18.0 → 5.18.2

package/dist/types/components/Avatar.d.ts

@@ -39,11 +39,22 @@ export interface AvatarOwnProps extends Omit<BulmaClassesProps, 'color'> {
     shape?: AvatarShape;
     /** Background color for initials/icon avatars (else auto-derived from `name`). */
     color?: AvatarColor;
-    /** When set, renders the avatar as a link: an `<a>` unless `as` names the element itself. An `as` target declaring its own `href` supersedes this one, and its type and its requiredness are what apply. */
+    /**
+     * When set, renders the avatar as a link: an `<a>` unless `as` names the element itself. An
+     * `as` target declaring its own `href` supersedes this one, and its type and its requiredness
+     * are what apply.
+     *
+     * It is passed on only to a target that can be a link: an `a`, a custom element, or a
+     * component. Any other `as` you pass, such as `'figure'` or `'div'`, still accepts it but
+     * renders without it, because an `href` is not valid HTML on those elements, and a
+     * development build logs a console warning naming what was dropped. To make such an avatar a
+     * link, render it `as="a"` or pass a link component to `as`. An empty `href` asks for no link:
+     * with no `as` it renders a `<figure>`, and it draws no warning.
+     */
     href?: string;
-    /** Anchor target — forwarded only when rendering a link (an `a` or a custom `as` component), and superseded by the target's own declaration the way `href` is. */
+    /** Anchor target, passed on only where `href` is (an `a`, a custom element, or a component) and superseded by the target's own declaration the way `href` is. Any other `as` you pass renders without it, with the same development warning as `href`, except `'form'`: it declares its own `target`, so there the attribute is still withheld but draws no warning. */
     target?: string;
-    /** Anchor rel — forwarded only when rendering a link (an `a` or a custom `as` component), and superseded by the target's own declaration the way `href` is. */
+    /** Anchor rel, passed on only where `href` is (an `a`, a custom element, or a component) and superseded by the target's own declaration the way `href` is. */
     rel?: string;
     /** Extra props forwarded to the underlying `<img>` (e.g. `loading`, `crossOrigin`); its `onError` is chained before the fallback fires. */
     imageProps?: React.ImgHTMLAttributes<HTMLImageElement>;
@@ -103,6 +114,9 @@ export type AvatarProps<T extends React.ElementType = 'figure'> = Omit<AvatarOwn
      * `role="img"`. A role claiming the opposite, such as `"button"`, says nothing here, and
      * neither does an `href`: that settles it on its own. A genuine `'a'`/`'button'`/`href`
      * avatar keeps its accessible name either way.
+     *
+     * `'button'` renders `type="button"` unless you pass `type="submit"` or `type="reset"`, so
+     * an avatar inside a form does not submit it.
      */
     as?: T;
 };

package/dist/types/components/Dropdown.d.ts

@@ -36,7 +36,7 @@ export interface DropdownProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     disabled?: boolean;
     /** Callback when dropdown active state changes. */
     onActiveChange?: (active: boolean) => void;
-    /** Close dropdown when a menu item is clicked. */
+    /** Close dropdown when a menu item is clicked, or activated with Enter or Space. */
     closeOnClick?: boolean;
     /** Root element ID (for aria-controls, etc). */
     id?: string;
@@ -81,7 +81,12 @@ export interface DropdownItemOwnProps extends BulmaClassesProps {
  * `__typetests__/polymorphic.tsx`; the component itself is unaffected.
  */
 export type DropdownItemProps<T extends DropdownItemElement = DropdownItemElement> = DropdownItemOwnProps & Omit<React.ComponentPropsWithoutRef<T>, keyof DropdownItemOwnProps | 'as'> & {
-    /** The element type to render. */
+    /**
+     * The element type to render.
+     *
+     * `'button'` renders `type="button"` unless you pass `type="submit"` or `type="reset"`, so
+     * an item inside a form does not submit it.
+     */
     as?: T;
 };
 /**

package/dist/types/components/Menu.d.ts

@@ -80,7 +80,12 @@ export interface MenuItemOwnProps extends BulmaClassesProps {
  * @extraProp {PolymorphicRef<React.ElementType>} [ref] - Ref forwarded to the inner element `as` renders, not the wrapping `<li>`, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.
  */
 export type MenuItemProps<T extends React.ElementType = 'a'> = MenuItemOwnProps & Omit<React.ComponentPropsWithoutRef<T>, keyof MenuItemOwnProps | 'as'> & {
-    /** Custom link component (e.g. `Link` from router). */
+    /**
+     * Custom link component (e.g. `Link` from router).
+     *
+     * `'button'` renders `type="button"` unless you pass `type="submit"` or `type="reset"`, so
+     * an item inside a form does not submit it.
+     */
     as?: T;
 };
 /**

package/dist/types/components/Toast.d.ts

@@ -18,8 +18,8 @@ export interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     actionType?: ToastType;
     /**
      * Position on the screen. Default: 'top-right'. On a standalone `<Toast>`
-     * this places it; through `toast.show()` it is currently ignored, because
-     * `ToastContainer`'s own `position` places every toast it shows.
+     * this places it. Through `toast.show()` it places that toast, and a toast
+     * shown without one goes to `ToastContainer`'s `position` instead.
      */
     position?: ToastPosition;
     /** Duration in ms before auto-close. `0` disables auto-close. */
@@ -72,7 +72,10 @@ export declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.R
 export interface ToastOptions extends Omit<ToastProps, 'message'> {
     /** The message to display. */
     message: string;
-    /** When true, toasts enter a FIFO queue and display one at a time. Default false. */
+    /**
+     * When true, toasts enter a FIFO queue and display one at a time, one queue
+     * across every `position`. Default false.
+     */
     queue?: boolean;
 }
 /**
@@ -142,13 +145,21 @@ export declare const toast: {
 };
 /**
  * Container component for rendering programmatic toasts.
- * Place once at your app root to enable the toast API.
+ * Place once at your app root to enable the toast API. A toast shown with a
+ * `position` appears there, and one shown without goes to the container's
+ * `position`.
  *
  * @function
  * @param {{ position?: ToastPosition }} props - Container props.
  * @returns {JSX.Element | null} The rendered toast container, or null if empty.
  */
 export declare const ToastContainer: React.FC<{
+    /**
+     * Where a toast shown without a `position` of its own appears. Default:
+     * 'top-right'. When it changes, those toasts move without remounting, but
+     * one shown with its own `position` equal to the old or new value
+     * remounts and starts over as if it had just been shown.
+     */
     position?: ToastPosition;
 }>;
 export default Toast;

package/dist/types/elements/Notification.d.ts

@@ -59,11 +59,14 @@ export interface NotificationOptions {
     /** Duration in ms before auto-close. Default 3000. */
     duration?: number;
     /**
-     * Position on the screen. Currently ignored: `NotificationContainer`'s own
-     * `position` places every notification it shows, so set it there.
+     * Position on the screen. A notification shown without one goes to
+     * `NotificationContainer`'s `position`.
      */
     position?: NotificationPosition;
-    /** When true, notifications enter a FIFO queue and display one at a time. Default false. */
+    /**
+     * When true, notifications enter a FIFO queue and display one at a time,
+     * one queue across every `position`. Default false.
+     */
     queue?: boolean;
     /** Show a delete (close) button. Default true. */
     hasDelete?: boolean;
@@ -139,15 +142,22 @@ export declare const notification: {
 };
 /**
  * Container component for rendering programmatic notifications.
- * Place once at your app root to enable the notification API. Mount it
- * before calling `notification`: a notification shown while no container is
- * mounted doesn't appear when one mounts, only alongside the next call.
+ * Place once at your app root to enable the notification API. A notification
+ * shown with a `position` appears there, and one shown without goes to the
+ * container's `position`, so the container renders a stack for each position
+ * in use.
  *
  * @function
  * @param {{ position?: NotificationPosition }} props - Container props.
  * @returns {JSX.Element | null} The rendered notification container, or null if empty.
  */
 export declare const NotificationContainer: React.FC<{
+    /**
+     * Where a notification shown without a `position` of its own appears.
+     * Default: 'top-right'. When it changes, those notifications move without
+     * remounting, but one shown with its own `position` equal to the old or new
+     * value remounts and starts over as if it had just been shown.
+     */
     position?: NotificationPosition;
 }>;
 export {};

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

@@ -1,11 +1,35 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
 /**
- * Valid colors for the Checkbox component.
+ * The values the Checkbox `color` prop accepts, as a readonly tuple.
+ *
+ * `CheckboxProps['color']` is typed from it, so the two list the same values.
+ * Map over it to build a color picker, or check a value that arrives at
+ * runtime before passing it in: the component adds no color class for a value
+ * outside the tuple.
+ *
+ * @example
+ * import { Checkbox, checkboxColors } from '@allxsmith/bestax-bulma';
+ *
+ * checkboxColors.map(color => (
+ *   <Checkbox key={color} color={color}>
+ *     {color}
+ *   </Checkbox>
+ * ));
  */
 export declare const checkboxColors: readonly ["primary", "link", "info", "success", "warning", "danger"];
 /**
- * Valid sizes for the Checkbox component.
+ * The values the Checkbox `size` prop accepts, as a readonly tuple.
+ *
+ * `CheckboxProps['size']` is typed from it, so the two list the same values.
+ * Use it to offer a size choice or to check a value that arrives at runtime:
+ * the component adds no size class for a value outside the tuple. These are
+ * element sizes, not the spacing scale in `validSizes`.
+ *
+ * @example
+ * import { checkboxSizes } from '@allxsmith/bestax-bulma';
+ *
+ * type CheckboxSize = (typeof checkboxSizes)[number];
  */
 export declare const checkboxSizes: readonly ["small", "normal", "medium", "large"];
 /**

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

@@ -53,7 +53,12 @@ export interface DateTimeInputBaseProps extends Omit<React.InputHTMLAttributes<H
     position?: PickerPosition;
     /** Render the popover into `document.body` via portal. */
     appendToBody?: boolean;
-    /** Bulma color modifier. */
+    /**
+     * Bulma color modifier for the input, also carried by the time wheels, where
+     * it colors the selection band and the keyboard focus ring. Unset, the
+     * wheels use `--bulma-timeinput-wheel-selected-bg`, which defaults to
+     * `primary`. The calendar does not take it.
+     */
     color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
     /** Size variant. */
     size?: 'small' | 'medium' | 'large';

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

@@ -1,11 +1,37 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
 /**
- * Valid colors for the Radio component.
+ * The values the Radio `color` prop accepts, as a readonly tuple.
+ *
+ * `RadioProps['color']` is typed from it, so the two list the same values.
+ * Map over it to build a color picker, or check a value that arrives at
+ * runtime before passing it in: the component adds no color class for a value
+ * outside the tuple.
+ *
+ * @example
+ * import { Radio, Radios, radioColors } from '@allxsmith/bestax-bulma';
+ *
+ * <Radios name="accent" defaultValue="primary">
+ *   {radioColors.map(color => (
+ *     <Radio key={color} value={color} color={color}>
+ *       {color}
+ *     </Radio>
+ *   ))}
+ * </Radios>;
  */
 export declare const radioColors: readonly ["primary", "link", "info", "success", "warning", "danger"];
 /**
- * Valid sizes for the Radio component.
+ * The values the Radio `size` prop accepts, as a readonly tuple.
+ *
+ * `RadioProps['size']` is typed from it, so the two list the same values. Use
+ * it to offer a size choice or to check a value that arrives at runtime: the
+ * component adds no size class for a value outside the tuple. These are
+ * element sizes, not the spacing scale in `validSizes`.
+ *
+ * @example
+ * import { radioSizes } from '@allxsmith/bestax-bulma';
+ *
+ * type RadioSize = (typeof radioSizes)[number];
  */
 export declare const radioSizes: readonly ["small", "normal", "medium", "large"];
 /**

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

@@ -1,11 +1,35 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
 /**
- * Valid colors for the Switch component.
+ * The values the Switch `color` and `passiveType` props accept, as a readonly
+ * tuple.
+ *
+ * Both props are typed from it, so they list the same values. Map over it to
+ * build a color picker, or check a value that arrives at runtime before
+ * passing it in: the component adds no class for a value outside the tuple.
+ *
+ * @example
+ * import { Switch, switchColors } from '@allxsmith/bestax-bulma';
+ *
+ * switchColors.map(color => (
+ *   <Switch key={color} color={color} defaultChecked>
+ *     {color}
+ *   </Switch>
+ * ));
  */
 export declare const switchColors: readonly ["primary", "link", "info", "success", "warning", "danger"];
 /**
- * Valid sizes for the Switch component.
+ * The values the Switch `size` prop accepts, as a readonly tuple.
+ *
+ * `SwitchProps['size']` is typed from it, so the two list the same values. Use
+ * it to offer a size choice or to check a value that arrives at runtime: the
+ * component adds no size class for a value outside the tuple. These are
+ * element sizes, not the spacing scale in `validSizes`.
+ *
+ * @example
+ * import { switchSizes } from '@allxsmith/bestax-bulma';
+ *
+ * type SwitchSize = (typeof switchSizes)[number];
  */
 export declare const switchSizes: readonly ["small", "normal", "medium", "large"];
 /**

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

@@ -52,7 +52,11 @@ export interface TimeInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
     position?: PickerPosition;
     /** Render the popover into `document.body` via portal. */
     appendToBody?: boolean;
-    /** Bulma color modifier. */
+    /**
+     * Bulma color modifier for the input, also carried by the wheels, where it
+     * colors the selection band and the keyboard focus ring. Unset, the wheels
+     * use `--bulma-timeinput-wheel-selected-bg`, which defaults to `primary`.
+     */
     color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
     /** Size variant. */
     size?: 'small' | 'medium' | 'large';

package/dist/types/helpers/Theme.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { BulmaClassesProps } from './useBulmaClasses.js';
+import { validRadii } from './bulmaClassHelpers.js';
 declare const bulmaCssVars: readonly ["--bulma-scheme-h", "--bulma-scheme-s", "--bulma-scheme-main", "--bulma-scheme-main-bis", "--bulma-scheme-main-ter", "--bulma-scheme-invert", "--bulma-scheme-invert-bis", "--bulma-scheme-invert-ter", "--bulma-light-l", "--bulma-light-invert-l", "--bulma-dark-l", "--bulma-dark-invert-l", "--bulma-soft-l", "--bulma-bold-l", "--bulma-soft-invert-l", "--bulma-bold-invert-l", "--bulma-hover-background-l-delta", "--bulma-active-background-l-delta", "--bulma-hover-border-l-delta", "--bulma-active-border-l-delta", "--bulma-hover-color-l-delta", "--bulma-active-color-l-delta", "--bulma-hover-shadow-a-delta", "--bulma-active-shadow-a-delta", "--bulma-primary-h", "--bulma-primary-s", "--bulma-primary-l", "--bulma-link-h", "--bulma-link-s", "--bulma-link-l", "--bulma-info-h", "--bulma-info-s", "--bulma-info-l", "--bulma-success-h", "--bulma-success-s", "--bulma-success-l", "--bulma-warning-h", "--bulma-warning-s", "--bulma-warning-l", "--bulma-danger-h", "--bulma-danger-s", "--bulma-danger-l", "--bulma-shadow-h", "--bulma-shadow-s", "--bulma-shadow-l", "--bulma-shadow", "--bulma-family-primary", "--bulma-family-secondary", "--bulma-family-code", "--bulma-size-small", "--bulma-size-normal", "--bulma-size-medium", "--bulma-size-large", "--bulma-weight-light", "--bulma-weight-normal", "--bulma-weight-medium", "--bulma-weight-semibold", "--bulma-weight-bold", "--bulma-weight-extrabold", "--bulma-block-spacing", "--bulma-duration", "--bulma-easing", "--bulma-radius-small", "--bulma-radius", "--bulma-radius-medium", "--bulma-radius-large", "--bulma-radius-rounded", "--bulma-speed", "--bulma-arrow-color", "--bulma-loading-color", "--bulma-burger-h", "--bulma-burger-s", "--bulma-burger-l", "--bulma-burger-border-radius", "--bulma-burger-gap", "--bulma-burger-item-height", "--bulma-burger-item-width", "--bulma-body-background-color", "--bulma-body-size", "--bulma-body-min-width", "--bulma-body-rendering", "--bulma-body-family", "--bulma-body-overflow-x", "--bulma-body-overflow-y", "--bulma-body-color", "--bulma-body-font-size", "--bulma-body-weight", "--bulma-body-line-height", "--bulma-code-family", "--bulma-code-padding", "--bulma-code-weight", "--bulma-code-size", "--bulma-small-font-size", "--bulma-hr-background-color", "--bulma-hr-height", "--bulma-hr-margin", "--bulma-strong-color", "--bulma-strong-weight", "--bulma-pre-font-size", "--bulma-pre-padding", "--bulma-pre-code-font-size", "--bulma-skeleton-background", "--bulma-skeleton-radius", "--bulma-skeleton-block-min-height", "--bulma-skeleton-lines-gap", "--bulma-skeleton-line-height", "--bulma-breadcrumb-item-color", "--bulma-breadcrumb-item-hover-color", "--bulma-breadcrumb-item-active-color", "--bulma-breadcrumb-item-padding-vertical", "--bulma-breadcrumb-item-padding-horizontal", "--bulma-breadcrumb-item-separator-color", "--bulma-card-color", "--bulma-card-background-color", "--bulma-card-shadow", "--bulma-card-radius", "--bulma-card-header-background-color", "--bulma-card-header-color", "--bulma-card-header-padding", "--bulma-card-header-shadow", "--bulma-card-header-weight", "--bulma-card-content-background-color", "--bulma-card-content-padding", "--bulma-card-footer-background-color", "--bulma-card-footer-border-top", "--bulma-card-footer-padding", "--bulma-card-media-margin", "--bulma-dropdown-menu-min-width", "--bulma-dropdown-content-background-color", "--bulma-dropdown-content-offset", "--bulma-dropdown-content-padding-bottom", "--bulma-dropdown-content-padding-top", "--bulma-dropdown-content-radius", "--bulma-dropdown-content-shadow", "--bulma-dropdown-content-z", "--bulma-dropdown-item-h", "--bulma-dropdown-item-s", "--bulma-dropdown-item-l", "--bulma-dropdown-item-background-l", "--bulma-dropdown-item-background-l-delta", "--bulma-dropdown-item-hover-background-l-delta", "--bulma-dropdown-item-active-background-l-delta", "--bulma-dropdown-item-color-l", "--bulma-dropdown-item-selected-h", "--bulma-dropdown-item-selected-s", "--bulma-dropdown-item-selected-l", "--bulma-dropdown-item-selected-background-l", "--bulma-dropdown-item-selected-color-l", "--bulma-dropdown-divider-background-color", "--bulma-menu-item-h", "--bulma-menu-item-s", "--bulma-menu-item-l", "--bulma-menu-item-background-l", "--bulma-menu-item-background-l-delta", "--bulma-menu-item-hover-background-l-delta", "--bulma-menu-item-active-background-l-delta", "--bulma-menu-item-color-l", "--bulma-menu-item-radius", "--bulma-menu-item-selected-h", "--bulma-menu-item-selected-s", "--bulma-menu-item-selected-l", "--bulma-menu-item-selected-background-l", "--bulma-menu-item-selected-color-l", "--bulma-menu-list-border-left", "--bulma-menu-list-line-height", "--bulma-menu-list-link-padding", "--bulma-menu-nested-list-margin", "--bulma-menu-nested-list-padding-left", "--bulma-menu-label-color", "--bulma-menu-label-font-size", "--bulma-menu-label-letter-spacing", "--bulma-menu-label-spacing", "--bulma-message-h", "--bulma-message-s", "--bulma-message-background-l", "--bulma-message-border-l", "--bulma-message-border-l-delta", "--bulma-message-border-style", "--bulma-message-border-width", "--bulma-message-color-l", "--bulma-message-radius", "--bulma-message-header-weight", "--bulma-message-header-padding", "--bulma-message-header-radius", "--bulma-message-header-body-border-width", "--bulma-message-header-background-l", "--bulma-message-header-color-l", "--bulma-message-body-border-width", "--bulma-message-body-color", "--bulma-message-body-padding", "--bulma-message-body-radius", "--bulma-message-body-pre-code-background-color", "--bulma-modal-z", "--bulma-modal-background-background-color", "--bulma-modal-content-width", "--bulma-modal-content-margin-mobile", "--bulma-modal-content-spacing-mobile", "--bulma-modal-content-spacing-tablet", "--bulma-modal-close-dimensions", "--bulma-modal-close-right", "--bulma-modal-close-top", "--bulma-modal-card-spacing", "--bulma-modal-card-head-background-color", "--bulma-modal-card-head-padding", "--bulma-modal-card-head-radius", "--bulma-modal-card-title-color", "--bulma-modal-card-title-line-height", "--bulma-modal-card-title-size", "--bulma-modal-card-foot-background-color", "--bulma-modal-card-foot-radius", "--bulma-modal-card-body-background-color", "--bulma-modal-card-body-padding", "--bulma-navbar-h", "--bulma-navbar-s", "--bulma-navbar-l", "--bulma-navbar-background-color", "--bulma-navbar-box-shadow-size", "--bulma-navbar-box-shadow-color", "--bulma-navbar-padding-vertical", "--bulma-navbar-padding-horizontal", "--bulma-navbar-z", "--bulma-navbar-fixed-z", "--bulma-navbar-item-background-a", "--bulma-navbar-item-background-l", "--bulma-navbar-item-background-l-delta", "--bulma-navbar-item-hover-background-l-delta", "--bulma-navbar-item-active-background-l-delta", "--bulma-navbar-item-color-l", "--bulma-navbar-item-selected-h", "--bulma-navbar-item-selected-s", "--bulma-navbar-item-selected-l", "--bulma-navbar-item-selected-background-l", "--bulma-navbar-item-selected-color-l", "--bulma-navbar-item-img-max-height", "--bulma-navbar-burger-color", "--bulma-navbar-tab-hover-background-color", "--bulma-navbar-tab-hover-border-bottom-color", "--bulma-navbar-tab-active-color", "--bulma-navbar-tab-active-background-color", "--bulma-navbar-tab-active-border-bottom-color", "--bulma-navbar-tab-active-border-bottom-style", "--bulma-navbar-tab-active-border-bottom-width", "--bulma-navbar-dropdown-background-color", "--bulma-navbar-dropdown-border-l", "--bulma-navbar-dropdown-border-color", "--bulma-navbar-dropdown-border-style", "--bulma-navbar-dropdown-border-width", "--bulma-navbar-dropdown-offset", "--bulma-navbar-dropdown-arrow", "--bulma-navbar-dropdown-radius", "--bulma-navbar-dropdown-z", "--bulma-navbar-dropdown-boxed-radius", "--bulma-navbar-dropdown-boxed-shadow", "--bulma-navbar-dropdown-item-h", "--bulma-navbar-dropdown-item-s", "--bulma-navbar-dropdown-item-l", "--bulma-navbar-dropdown-item-background-l", "--bulma-navbar-dropdown-item-color-l", "--bulma-navbar-divider-background-l", "--bulma-navbar-divider-height", "--bulma-navbar-bottom-box-shadow-size", "--bulma-pagination-margin", "--bulma-pagination-min-width", "--bulma-pagination-item-h", "--bulma-pagination-item-s", "--bulma-pagination-item-l", "--bulma-pagination-item-background-l-delta", "--bulma-pagination-item-hover-background-l-delta", "--bulma-pagination-item-active-background-l-delta", "--bulma-pagination-item-border-style", "--bulma-pagination-item-border-width", "--bulma-pagination-item-border-l", "--bulma-pagination-item-border-l-delta", "--bulma-pagination-item-hover-border-l-delta", "--bulma-pagination-item-active-border-l-delta", "--bulma-pagination-item-focus-border-l-delta", "--bulma-pagination-item-color-l", "--bulma-pagination-item-font-size", "--bulma-pagination-item-margin", "--bulma-pagination-item-padding-left", "--bulma-pagination-item-padding-right", "--bulma-pagination-item-outer-shadow-h", "--bulma-pagination-item-outer-shadow-s", "--bulma-pagination-item-outer-shadow-l", "--bulma-pagination-item-outer-shadow-a", "--bulma-pagination-nav-padding-left", "--bulma-pagination-nav-padding-right", "--bulma-pagination-disabled-color", "--bulma-pagination-disabled-background-color", "--bulma-pagination-disabled-border-color", "--bulma-pagination-current-color", "--bulma-pagination-current-background-color", "--bulma-pagination-current-border-color", "--bulma-pagination-ellipsis-color", "--bulma-pagination-shadow-inset", "--bulma-pagination-selected-item-h", "--bulma-pagination-selected-item-s", "--bulma-pagination-selected-item-l", "--bulma-pagination-selected-item-background-l", "--bulma-pagination-selected-item-border-l", "--bulma-pagination-selected-item-color-l", "--bulma-panel-margin", "--bulma-panel-item-border", "--bulma-panel-radius", "--bulma-panel-shadow", "--bulma-panel-heading-line-height", "--bulma-panel-heading-padding", "--bulma-panel-heading-radius", "--bulma-panel-heading-size", "--bulma-panel-heading-weight", "--bulma-panel-tabs-font-size", "--bulma-panel-tab-border-bottom-color", "--bulma-panel-tab-border-bottom-style", "--bulma-panel-tab-border-bottom-width", "--bulma-panel-tab-active-color", "--bulma-panel-list-item-color", "--bulma-panel-list-item-hover-color", "--bulma-panel-block-color", "--bulma-panel-block-hover-background-color", "--bulma-panel-block-active-border-left-color", "--bulma-panel-block-active-color", "--bulma-panel-block-active-icon-color", "--bulma-panel-icon-color", "--bulma-tabs-border-bottom-color", "--bulma-tabs-border-bottom-style", "--bulma-tabs-border-bottom-width", "--bulma-tabs-link-color", "--bulma-tabs-link-hover-border-bottom-color", "--bulma-tabs-link-hover-color", "--bulma-tabs-link-active-border-bottom-color", "--bulma-tabs-link-active-color", "--bulma-tabs-link-padding", "--bulma-tabs-boxed-link-radius", "--bulma-tabs-boxed-link-hover-background-color", "--bulma-tabs-boxed-link-hover-border-bottom-color", "--bulma-tabs-boxed-link-active-background-color", "--bulma-tabs-boxed-link-active-border-color", "--bulma-tabs-boxed-link-active-border-bottom-color", "--bulma-tabs-toggle-link-border-color", "--bulma-tabs-toggle-link-border-style", "--bulma-tabs-toggle-link-border-width", "--bulma-tabs-toggle-link-hover-background-color", "--bulma-tabs-toggle-link-hover-border-color", "--bulma-tabs-toggle-link-radius", "--bulma-tabs-toggle-link-active-background-color", "--bulma-tabs-toggle-link-active-border-color", "--bulma-tabs-toggle-link-active-color", "--bulma-box-background-color", "--bulma-box-color", "--bulma-box-radius", "--bulma-box-shadow", "--bulma-box-padding", "--bulma-box-link-hover-shadow", "--bulma-box-link-active-shadow", "--bulma-content-heading-color", "--bulma-content-heading-weight", "--bulma-content-heading-line-height", "--bulma-content-block-margin-bottom", "--bulma-content-blockquote-background-color", "--bulma-content-blockquote-border-left", "--bulma-content-blockquote-padding", "--bulma-content-pre-padding", "--bulma-content-table-cell-border", "--bulma-content-table-cell-border-width", "--bulma-content-table-cell-padding", "--bulma-content-table-cell-heading-color", "--bulma-content-table-head-cell-border-width", "--bulma-content-table-head-cell-color", "--bulma-content-table-body-last-row-cell-border-bottom-width", "--bulma-content-table-foot-cell-border-width", "--bulma-content-table-foot-cell-color", "--bulma-delete-dimensions", "--bulma-delete-background-l", "--bulma-delete-background-alpha", "--bulma-delete-color", "--bulma-icon-dimensions", "--bulma-icon-dimensions-small", "--bulma-icon-dimensions-medium", "--bulma-icon-dimensions-large", "--bulma-icon-text-spacing", "--bulma-notification-h", "--bulma-notification-s", "--bulma-notification-background-l", "--bulma-notification-color-l", "--bulma-notification-code-background-color", "--bulma-notification-radius", "--bulma-notification-padding", "--bulma-progress-border-radius", "--bulma-progress-bar-background-color", "--bulma-progress-value-background-color", "--bulma-progress-indeterminate-duration", "--bulma-table-color", "--bulma-table-background-color", "--bulma-table-cell-border-color", "--bulma-table-cell-border-style", "--bulma-table-cell-border-width", "--bulma-table-cell-padding", "--bulma-table-cell-heading-color", "--bulma-table-cell-text-align", "--bulma-table-head-cell-border-width", "--bulma-table-head-cell-color", "--bulma-table-foot-cell-border-width", "--bulma-table-foot-cell-color", "--bulma-table-head-background-color", "--bulma-table-body-background-color", "--bulma-table-foot-background-color", "--bulma-table-row-hover-background-color", "--bulma-table-row-active-background-color", "--bulma-table-row-active-color", "--bulma-table-striped-row-even-background-color", "--bulma-table-striped-row-even-hover-background-color", "--bulma-tag-h", "--bulma-tag-s", "--bulma-tag-background-l", "--bulma-tag-background-l-delta", "--bulma-tag-hover-background-l-delta", "--bulma-tag-active-background-l-delta", "--bulma-tag-color-l", "--bulma-tag-radius", "--bulma-tag-delete-margin", "--bulma-title-color", "--bulma-title-family", "--bulma-title-size", "--bulma-title-weight", "--bulma-title-line-height", "--bulma-title-strong-color", "--bulma-title-strong-weight", "--bulma-title-sub-size", "--bulma-title-sup-size", "--bulma-subtitle-color", "--bulma-subtitle-family", "--bulma-subtitle-size", "--bulma-subtitle-weight", "--bulma-subtitle-line-height", "--bulma-subtitle-strong-color", "--bulma-subtitle-strong-weight", "--bulma-control-radius", "--bulma-control-radius-small", "--bulma-control-border-width", "--bulma-control-height", "--bulma-control-line-height", "--bulma-control-padding-vertical", "--bulma-control-padding-horizontal", "--bulma-control-size", "--bulma-control-focus-shadow-l", "--bulma-file-radius", "--bulma-file-name-border-color", "--bulma-file-name-border-style", "--bulma-file-name-border-width", "--bulma-file-name-max-width", "--bulma-file-h", "--bulma-file-s", "--bulma-file-background-l", "--bulma-file-background-l-delta", "--bulma-file-hover-background-l-delta", "--bulma-file-active-background-l-delta", "--bulma-file-border-l", "--bulma-file-border-l-delta", "--bulma-file-hover-border-l-delta", "--bulma-file-active-border-l-delta", "--bulma-file-cta-color-l", "--bulma-file-name-color-l", "--bulma-file-color-l-delta", "--bulma-file-hover-color-l-delta", "--bulma-file-active-color-l-delta", "--bulma-input-h", "--bulma-input-s", "--bulma-input-l", "--bulma-input-border-style", "--bulma-input-border-l", "--bulma-input-border-l-delta", "--bulma-input-hover-border-l-delta", "--bulma-input-active-border-l-delta", "--bulma-input-focus-h", "--bulma-input-focus-s", "--bulma-input-focus-l", "--bulma-input-focus-shadow-size", "--bulma-input-focus-shadow-alpha", "--bulma-input-color-l", "--bulma-input-background-l", "--bulma-input-background-l-delta", "--bulma-input-height", "--bulma-input-shadow", "--bulma-input-placeholder-color", "--bulma-input-disabled-color", "--bulma-input-disabled-background-color", "--bulma-input-disabled-border-color", "--bulma-input-disabled-placeholder-color", "--bulma-input-arrow", "--bulma-input-icon-color", "--bulma-input-icon-hover-color", "--bulma-input-icon-focus-color", "--bulma-input-radius", "--bulma-column-gap", "--bulma-grid-gap", "--bulma-grid-column-count", "--bulma-grid-column-min", "--bulma-grid-cell-column-span", "--bulma-grid-cell-column-start", "--bulma-footer-background-color", "--bulma-footer-color", "--bulma-footer-padding", "--bulma-hero-body-padding", "--bulma-hero-body-padding-tablet", "--bulma-hero-body-padding-small", "--bulma-hero-body-padding-medium", "--bulma-hero-body-padding-large", "--bulma-media-border-color", "--bulma-media-border-size", "--bulma-media-spacing", "--bulma-media-spacing-large", "--bulma-media-content-spacing", "--bulma-media-level-1-spacing", "--bulma-media-level-1-content-spacing", "--bulma-media-level-2-spacing", "--bulma-section-padding", "--bulma-section-padding-desktop", "--bulma-section-padding-medium", "--bulma-section-padding-large"];
 /** A single Bulma CSS variable key from the `bulmaCssVars` tuple. */
 type BulmaVarKey = (typeof bulmaCssVars)[number];
@@ -10,7 +11,6 @@ type BulmaVars = Partial<Record<BulmaVarKey, string>>;
  *
  * @property {React.ReactNode} children - Content to render inside the theme scope.
  * @property {string} [className] - Additional CSS classes (only when isRoot is false).
- * @property {boolean} [isRoot] - Inject CSS variables globally at :root level. Default: false.
  * @property {'light' | 'dark' | 'system'} [colorMode] - Set Bulma's light/dark scheme by writing
  *   the `data-theme` attribute on the document root (`<html>`). This is always global, even on a
  *   scoped Theme. `'system'` removes the attribute so Bulma follows the OS `prefers-color-scheme`.
@@ -56,9 +56,35 @@ type BulmaVars = Partial<Record<BulmaVarKey, string>>;
 export interface ThemeProps extends Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
     children: ReactNode;
     className?: string;
+    /**
+     * Inject the variables globally at `:root` instead of scoping them to a
+     * wrapper div. Default: false.
+     *
+     * Several root Themes can be mounted at once, and each contributes its own
+     * variables. Where two set the same one, the inner or later-mounted Theme
+     * wins, as with nested scoped Themes, and unmounting a Theme removes only
+     * what it contributed. The variables are written from an effect, so a
+     * server render does not include them.
+     */
     isRoot?: boolean;
     colorMode?: 'light' | 'dark' | 'system';
     bulmaVars?: BulmaVars;
+    /**
+     * Border radius helper, as on every other component: `radiusless` adds
+     * `is-radiusless` to the wrapper div. On a Theme it also sets
+     * `--bulma-radius` to 0, so what is inside the Theme loses its radius too.
+     * Under `isRoot` there is no wrapper for the class, and the variable is
+     * written at `:root`, which squares everything on the page that takes its
+     * radius from it.
+     *
+     * For any other radius, set the variable through `bulmaVars`
+     * (`bulmaVars={{ '--bulma-radius': '6px' }}`). This prop used to write the
+     * variable for every value, so any other non-empty string still does, but
+     * that route is deprecated and logs a warning in development. A number or
+     * a boolean never produced a usable radius that way, and is now ignored as
+     * it is on every other component.
+     */
+    radius?: (typeof validRadii)[number];
     schemeH?: string;
     schemeS?: string;
     lightL?: string;

package/dist/types/helpers/buttonType.d.ts

@@ -0,0 +1,19 @@
+import type React from 'react';
+/** The values HTML defines for a `<button>`'s `type`. */
+export type ButtonType = NonNullable<React.ButtonHTMLAttributes<HTMLButtonElement>['type']>;
+/**
+ * The `type` to render on a `<button>` a component defaults to `button`: the
+ * caller's own value when it is `button`, `submit` or `reset`, and `button`
+ * otherwise.
+ *
+ * A missing `type` is not the only way a button ends up submitting the form
+ * around it. HTML reads an invalid value, such as the anchor's MIME-type
+ * `type="text/html"`, as submit too, and a props spread carrying
+ * `type: undefined` removes the attribute outright. Both can arrive through a
+ * spread or an untyped caller the component's own types never see, so this
+ * checks the value rather than trusting where it came from.
+ *
+ * Call it AFTER the forwarded props are spread and pass it the forwarded
+ * `type`, so its result is the attribute that renders.
+ */
+export declare function buttonType(given: unknown): ButtonType;

package/dist/types/helpers/colorDeprecations.d.ts

@@ -5,7 +5,10 @@
  * component-modifier form is dead.
  */
 export declare const UNSTYLED_MODIFIER_COLORS: readonly ["black-bis", "black-ter", "white-bis", "white-ter", "grey-darker", "grey-dark", "grey", "grey-light", "grey-lighter"];
-/** Test-only: re-arm the warn-once registry. */
+/**
+ * Test-only: re-arm the warn-once registry. The registry lives in
+ * `devWarnings`, shared with the other dev warnings, so this re-arms those too.
+ */
 export declare const resetColorDeprecationWarnings: () => void;
 /**
  * Dev warning for a `color` value whose `is-<color>` modifier has no shipped

package/dist/types/helpers/devWarnings.d.ts

@@ -0,0 +1,8 @@
+/** Test-only: re-arm the warn-once registry. */
+export declare const resetDevWarnings: () => void;
+/**
+ * Logs a console warning in development, once per `key` for the life of the
+ * page. Safe to call during render: a re-render, or a second instance hitting
+ * the same case, finds the key already recorded and stays quiet.
+ */
+export declare const warnOnce: (key: string, message: string) => void;

package/dist/types/helpers/positionStacks.d.ts

@@ -0,0 +1,33 @@
+/**
+ * The items a programmatic container shows at one place on the screen.
+ */
+export interface PositionStack<Item, Position extends string> {
+    /**
+     * A React key for the stack. The stack at the container's own position
+     * keeps the same key whatever that position is, so changing the container's
+     * `position` moves the items in it instead of remounting them.
+     */
+    key: string;
+    /** Where on the screen the stack sits. */
+    position: Position;
+    /** The items at that position, in the order they were shown. */
+    items: Item[];
+}
+/**
+ * Splits the items a container shows into one stack per position in use. An
+ * item goes to its own position when it has one and to the container's
+ * otherwise. A position with no items gets no stack.
+ *
+ * Stacks come back in `order`, so their order in the page follows the screen
+ * rather than which position happened to be used first, and a stack keeps its
+ * place while the others come and go. A position missing from `order` sorts
+ * after the known ones.
+ *
+ * @function groupIntoPositionStacks
+ * @param items - The items the container shows, in the order they were shown.
+ * @param positionOf - Reads an item's own position, if it has one.
+ * @param containerPosition - Where an item without a position of its own goes.
+ * @param order - Every known position, in the order stacks should render.
+ * @returns One stack per position in use.
+ */
+export declare function groupIntoPositionStacks<Item, Position extends string>(items: readonly Item[], positionOf: (item: Item) => Position | undefined, containerPosition: Position, order: readonly Position[]): PositionStack<Item, Position>[];

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

@@ -39,11 +39,22 @@ export interface AvatarOwnProps extends Omit<BulmaClassesProps, 'color'> {
     shape?: AvatarShape;
     /** Background color for initials/icon avatars (else auto-derived from `name`). */
     color?: AvatarColor;
-    /** When set, renders the avatar as a link: an `<a>` unless `as` names the element itself. An `as` target declaring its own `href` supersedes this one, and its type and its requiredness are what apply. */
+    /**
+     * When set, renders the avatar as a link: an `<a>` unless `as` names the element itself. An
+     * `as` target declaring its own `href` supersedes this one, and its type and its requiredness
+     * are what apply.
+     *
+     * It is passed on only to a target that can be a link: an `a`, a custom element, or a
+     * component. Any other `as` you pass, such as `'figure'` or `'div'`, still accepts it but
+     * renders without it, because an `href` is not valid HTML on those elements, and a
+     * development build logs a console warning naming what was dropped. To make such an avatar a
+     * link, render it `as="a"` or pass a link component to `as`. An empty `href` asks for no link:
+     * with no `as` it renders a `<figure>`, and it draws no warning.
+     */
     href?: string;
-    /** Anchor target — forwarded only when rendering a link (an `a` or a custom `as` component), and superseded by the target's own declaration the way `href` is. */
+    /** Anchor target, passed on only where `href` is (an `a`, a custom element, or a component) and superseded by the target's own declaration the way `href` is. Any other `as` you pass renders without it, with the same development warning as `href`, except `'form'`: it declares its own `target`, so there the attribute is still withheld but draws no warning. */
     target?: string;
-    /** Anchor rel — forwarded only when rendering a link (an `a` or a custom `as` component), and superseded by the target's own declaration the way `href` is. */
+    /** Anchor rel, passed on only where `href` is (an `a`, a custom element, or a component) and superseded by the target's own declaration the way `href` is. */
     rel?: string;
     /** Extra props forwarded to the underlying `<img>` (e.g. `loading`, `crossOrigin`); its `onError` is chained before the fallback fires. */
     imageProps?: React.ImgHTMLAttributes<HTMLImageElement>;
@@ -103,6 +114,9 @@ export type AvatarProps<T extends React.ElementType = 'figure'> = Omit<AvatarOwn
      * `role="img"`. A role claiming the opposite, such as `"button"`, says nothing here, and
      * neither does an `href`: that settles it on its own. A genuine `'a'`/`'button'`/`href`
      * avatar keeps its accessible name either way.
+     *
+     * `'button'` renders `type="button"` unless you pass `type="submit"` or `type="reset"`, so
+     * an avatar inside a form does not submit it.
      */
     as?: T;
 };

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

@@ -36,7 +36,7 @@ export interface DropdownProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     disabled?: boolean;
     /** Callback when dropdown active state changes. */
     onActiveChange?: (active: boolean) => void;
-    /** Close dropdown when a menu item is clicked. */
+    /** Close dropdown when a menu item is clicked, or activated with Enter or Space. */
     closeOnClick?: boolean;
     /** Root element ID (for aria-controls, etc). */
     id?: string;
@@ -81,7 +81,12 @@ export interface DropdownItemOwnProps extends BulmaClassesProps {
  * `__typetests__/polymorphic.tsx`; the component itself is unaffected.
  */
 export type DropdownItemProps<T extends DropdownItemElement = DropdownItemElement> = DropdownItemOwnProps & Omit<React.ComponentPropsWithoutRef<T>, keyof DropdownItemOwnProps | 'as'> & {
-    /** The element type to render. */
+    /**
+     * The element type to render.
+     *
+     * `'button'` renders `type="button"` unless you pass `type="submit"` or `type="reset"`, so
+     * an item inside a form does not submit it.
+     */
     as?: T;
 };
 /**

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

@@ -80,7 +80,12 @@ export interface MenuItemOwnProps extends BulmaClassesProps {
  * @extraProp {PolymorphicRef<React.ElementType>} [ref] - Ref forwarded to the inner element `as` renders, not the wrapping `<li>`, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.
  */
 export type MenuItemProps<T extends React.ElementType = 'a'> = MenuItemOwnProps & Omit<React.ComponentPropsWithoutRef<T>, keyof MenuItemOwnProps | 'as'> & {
-    /** Custom link component (e.g. `Link` from router). */
+    /**
+     * Custom link component (e.g. `Link` from router).
+     *
+     * `'button'` renders `type="button"` unless you pass `type="submit"` or `type="reset"`, so
+     * an item inside a form does not submit it.
+     */
     as?: T;
 };
 /**

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

@@ -18,8 +18,8 @@ export interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     actionType?: ToastType;
     /**
      * Position on the screen. Default: 'top-right'. On a standalone `<Toast>`
-     * this places it; through `toast.show()` it is currently ignored, because
-     * `ToastContainer`'s own `position` places every toast it shows.
+     * this places it. Through `toast.show()` it places that toast, and a toast
+     * shown without one goes to `ToastContainer`'s `position` instead.
      */
     position?: ToastPosition;
     /** Duration in ms before auto-close. `0` disables auto-close. */
@@ -72,7 +72,10 @@ export declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.R
 export interface ToastOptions extends Omit<ToastProps, 'message'> {
     /** The message to display. */
     message: string;
-    /** When true, toasts enter a FIFO queue and display one at a time. Default false. */
+    /**
+     * When true, toasts enter a FIFO queue and display one at a time, one queue
+     * across every `position`. Default false.
+     */
     queue?: boolean;
 }
 /**
@@ -142,13 +145,21 @@ export declare const toast: {
 };
 /**
  * Container component for rendering programmatic toasts.
- * Place once at your app root to enable the toast API.
+ * Place once at your app root to enable the toast API. A toast shown with a
+ * `position` appears there, and one shown without goes to the container's
+ * `position`.
  *
  * @function
  * @param {{ position?: ToastPosition }} props - Container props.
  * @returns {JSX.Element | null} The rendered toast container, or null if empty.
  */
 export declare const ToastContainer: React.FC<{
+    /**
+     * Where a toast shown without a `position` of its own appears. Default:
+     * 'top-right'. When it changes, those toasts move without remounting, but
+     * one shown with its own `position` equal to the old or new value
+     * remounts and starts over as if it had just been shown.
+     */
     position?: ToastPosition;
 }>;
 export default Toast;