@allxsmith/bestax-bulma 5.67.4 → 5.67.5

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

@@ -75,7 +75,11 @@ export interface HoverCardProps extends Omit<React.HTMLAttributes<HTMLSpanElemen
      */
     closeDelay?: number;
     /**
-     * Where the card opens against the trigger.
+     * Where the card opens against the trigger. Left out, it opens below and
+     * lines up with the trigger's start edge, which is its right edge on a
+     * right-to-left page, so a trigger at the start of the line doesn't push
+     * the card off the screen. A corner you pass stays physical, so
+     * `bottom-left` lines up the left edges on either page.
      * @defaultValue 'bottom-left'
      */
     position?: HoverCardPosition;

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

@@ -48,7 +48,11 @@ export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'o
      * horizontally on mobile).
      */
     vertical?: boolean;
-    /** Side placement when `vertical` is true. */
+    /**
+     * Side placement when `vertical` is true. The row follows the page's
+     * direction, so on a right-to-left page `left` puts the tabs at the right,
+     * where the line starts, and `right` puts them at the left.
+     */
     side?: 'left' | 'right';
     /** Makes tabs take up the full width equally. */
     expanded?: boolean;

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

@@ -14,11 +14,19 @@ export interface NotificationProps extends React.HTMLAttributes<HTMLDivElement>,
      * other value the union accepts emits a class no CSS rule matches, so the
      * notification renders unstyled; those log a console warning in development
      * and will be removed from this union in the next major version.
+     *
+     * `dark` takes the dark color's own text and background from bestax's
+     * stylesheets, as a dark `Button` has. With Bulma's CSS alone, a dark
+     * notification's text inherits the color around it, which on a light page
+     * is one shade off its background.
      */
     color?: (typeof validColors)[number];
     /** Text color helper. */
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
-    /** Use the light color variant. */
+    /**
+     * Use the light color variant. The dark color has none, so `color="dark"`
+     * with `isLight` looks the same as without it, as a dark `Button` does.
+     */
     isLight?: boolean;
     /**
      * Shows a close (delete) button in the notification. It renders
@@ -71,9 +79,17 @@ export interface NotificationOptions {
      * other value the union accepts emits a class no CSS rule matches, so the
      * notification renders unstyled; those log a console warning in development
      * and will be removed from this union in the next major version.
+     *
+     * `dark` takes the dark color's own text and background from bestax's
+     * stylesheets, as a dark `Button` has. With Bulma's CSS alone, a dark
+     * notification's text inherits the color around it, which on a light page
+     * is one shade off its background.
      */
     color?: (typeof validColors)[number];
-    /** Use the light color variant. */
+    /**
+     * Use the light color variant. The dark color has none, so `color="dark"`
+     * with `isLight` looks the same as without it, as a dark `Button` does.
+     */
     isLight?: boolean;
     /** Duration in ms before auto-close. Default 3000. */
     duration?: number;

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

@@ -88,7 +88,10 @@ interface ComboboxBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
      * Where the menu opens against the field: below (`bottom-*`) or above
      * (`top-*`), lined up with its left or right edge. `auto` picks the one
      * that keeps the list in the viewport, preferring below. The same union
-     * Popover takes.
+     * Popover takes. Left out, it opens below and lines up with the field's
+     * start edge, which is its right edge on a right-to-left page, so a menu
+     * wider than the field doesn't hang off the screen. A corner you pass
+     * stays physical, so `bottom-left` lines up the left edges on either page.
      * @defaultValue 'bottom-left'
      */
     position?: PopoverPosition;

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

@@ -5,9 +5,15 @@ import { IconProps } from '../elements/Icon.js';
  * Props for the Control component.
  */
 export interface ControlBaseProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
-    /** Adds left icon container. */
+    /**
+     * Adds left icon container.
+     * Over a `TextArea` the icon covers the text.
+     */
     hasIconsLeft?: boolean;
-    /** Adds right icon container. */
+    /**
+     * Adds right icon container.
+     * Over a `TextArea` the icon covers the text.
+     */
     hasIconsRight?: boolean;
     /**
      * Shows a loading spinner inside the control.
@@ -29,6 +35,7 @@ export interface ControlBaseProps extends React.HTMLAttributes<HTMLDivElement>,
     bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
     /**
      * Icon props for left icon, or a custom node (an inline SVG, a `react-icons` component, …) rendered in place of a class-based glyph.
+     * Over a `TextArea` the icon covers the text.
      * Bulma gives control icons `pointer-events: none`, so a click lands on
      * the input and a clickable node placed here never receives one. Put a button beside the input
      * in its own addon `Control` instead.
@@ -36,16 +43,23 @@ export interface ControlBaseProps extends React.HTMLAttributes<HTMLDivElement>,
     iconLeft?: IconProps | React.ReactNode;
     /**
      * Icon props for right icon, or a custom node (an inline SVG, a `react-icons` component, …) rendered in place of a class-based glyph.
+     * Over a `TextArea` the icon covers the text.
      * Bulma gives control icons `pointer-events: none`, so a click lands on
      * the input and a clickable node placed here never receives one. Put a button beside the input
      * in its own addon `Control` instead.
      */
     iconRight?: IconProps | React.ReactNode;
-    /** Shortcut for left icon name. */
+    /**
+     * Shortcut for left icon name.
+     * Over a `TextArea` the icon covers the text.
+     */
     iconLeftName?: string;
     /** Shortcut for left icon size. */
     iconLeftSize?: 'small' | 'medium' | 'large';
-    /** Shortcut for right icon name. */
+    /**
+     * Shortcut for right icon name.
+     * Over a `TextArea` the icon covers the text.
+     */
     iconRightName?: string;
     /** Shortcut for right icon size. */
     iconRightSize?: 'small' | 'medium' | 'large';

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

@@ -74,6 +74,9 @@ export interface DateTimeInputBaseProps extends Omit<React.InputHTMLAttributes<H
      * `defaultValue` it opens on the month the clock reads, and around the end
      * of a month the server's clock and the browser's can read different
      * months, so give it a date both render the same.
+     * Reset in its footer goes back to the value it mounted with, or, when
+     * controlled, to the latest `value` the parent set other than an echo of
+     * `onChange`. The ✓ beside it has no popover to close.
      */
     inline?: boolean;
     /** Use `<input type="datetime-local">` on coarse-pointer devices. */

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

@@ -27,7 +27,11 @@ export interface TimeInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
     max?: Date;
     /** Disable the input. */
     disabled?: boolean;
-    /** Make the input read-only. */
+    /**
+     * Make the input read-only. An `inline` picker's wheels keep their tab
+     * stops and carry `aria-readonly`, but no key, scroll, drag or click turns
+     * them, so the time can't change.
+     */
     readOnly?: boolean;
     /** Placeholder text for the input. */
     placeholder?: string;

package/dist/types/form/_pickerInternals/TimeWheels.d.ts

@@ -18,6 +18,12 @@ export interface TimeWheelsProps {
     size?: 'small' | 'medium' | 'large';
     color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
     disabled?: boolean;
+    /**
+     * Show the value and take no input that changes it. Each wheel keeps its
+     * tab stop and carries `aria-readonly`, and the arrow keys between columns
+     * still move focus, but no key, scroll, drag or click turns a wheel.
+     */
+    readOnly?: boolean;
     className?: string;
     id?: string;
     labels?: PickerLabels;

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

@@ -17,12 +17,22 @@ export declare function isTabbableKind(el: Element): boolean;
  * A stop that doesn't take focus is passed over for the next one in. An
  * `<object>` or `<embed>` with nothing to show is one: it counts as a stop by
  * its kind, but browsers refuse to focus it, and which ones they refuse
- * depends on the browser and on what has loaded, so only trying tells. A
- * stop took focus when focus moved, wherever it went (a stop can hand focus
- * on), or when focus was on it already. `src/index.ts` names its exports from
- * this module, so this one stays internal.
+ * depends on the browser and on what has loaded, so only trying tells.
+ * `src/index.ts` names its exports from this module, so this one stays
+ * internal.
  */
 export declare function focusTabStop(container: HTMLElement, fromLast?: boolean): void;
+/**
+ * Moves focus where Tab goes from `element` when nothing inside it can take
+ * focus: to the first tab stop after it and outside it. Inside a trap that
+ * holds Tab, or a modal dialog, it looks no further than that container, and
+ * with nothing after `element` there, focus wraps to the container's first
+ * stop, as the trap's own Tab does. Returns whether it moved focus, which it
+ * doesn't at the end of the page, where the browser takes the key. It's for
+ * a popup that hides as a Tab inside it arrives, before the browser moves
+ * focus. Internal like `focusTabStop`.
+ */
+export declare function focusTabStopAfter(element: HTMLElement): boolean;
 /**
  * Holds Tab inside the element `container` returns until the returned
  * function is called. Tab and Shift+Tab heard on `keyTarget` wrap at the

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

@@ -37,7 +37,12 @@ export interface BulmaOtherProps {
      * container.
      */
     overlay?: boolean;
-    /** Interaction behavior (e.g., 'unselectable', 'clickable'). */
+    /**
+     * Interaction behavior: `unselectable` stops text selection
+     * (`is-unselectable`), and `clickable` shows the pointer cursor
+     * (`is-clickable`). It adds no role, no tab stop and no keyboard handling,
+     * so an element people click should be a `<button>` or a link.
+     */
     interaction?: (typeof validInteractions)[number];
     /** Cursor style (e.g., 'pointer', 'help'). */
     cursor?: (typeof validCursors)[number];

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

@@ -75,7 +75,11 @@ export interface HoverCardProps extends Omit<React.HTMLAttributes<HTMLSpanElemen
      */
     closeDelay?: number;
     /**
-     * Where the card opens against the trigger.
+     * Where the card opens against the trigger. Left out, it opens below and
+     * lines up with the trigger's start edge, which is its right edge on a
+     * right-to-left page, so a trigger at the start of the line doesn't push
+     * the card off the screen. A corner you pass stays physical, so
+     * `bottom-left` lines up the left edges on either page.
      * @defaultValue 'bottom-left'
      */
     position?: HoverCardPosition;

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

@@ -48,7 +48,11 @@ export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'o
      * horizontally on mobile).
      */
     vertical?: boolean;
-    /** Side placement when `vertical` is true. */
+    /**
+     * Side placement when `vertical` is true. The row follows the page's
+     * direction, so on a right-to-left page `left` puts the tabs at the right,
+     * where the line starts, and `right` puts them at the left.
+     */
     side?: 'left' | 'right';
     /** Makes tabs take up the full width equally. */
     expanded?: boolean;

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

@@ -14,11 +14,19 @@ export interface NotificationProps extends React.HTMLAttributes<HTMLDivElement>,
      * other value the union accepts emits a class no CSS rule matches, so the
      * notification renders unstyled; those log a console warning in development
      * and will be removed from this union in the next major version.
+     *
+     * `dark` takes the dark color's own text and background from bestax's
+     * stylesheets, as a dark `Button` has. With Bulma's CSS alone, a dark
+     * notification's text inherits the color around it, which on a light page
+     * is one shade off its background.
      */
     color?: (typeof validColors)[number];
     /** Text color helper. */
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
-    /** Use the light color variant. */
+    /**
+     * Use the light color variant. The dark color has none, so `color="dark"`
+     * with `isLight` looks the same as without it, as a dark `Button` does.
+     */
     isLight?: boolean;
     /**
      * Shows a close (delete) button in the notification. It renders
@@ -71,9 +79,17 @@ export interface NotificationOptions {
      * other value the union accepts emits a class no CSS rule matches, so the
      * notification renders unstyled; those log a console warning in development
      * and will be removed from this union in the next major version.
+     *
+     * `dark` takes the dark color's own text and background from bestax's
+     * stylesheets, as a dark `Button` has. With Bulma's CSS alone, a dark
+     * notification's text inherits the color around it, which on a light page
+     * is one shade off its background.
      */
     color?: (typeof validColors)[number];
-    /** Use the light color variant. */
+    /**
+     * Use the light color variant. The dark color has none, so `color="dark"`
+     * with `isLight` looks the same as without it, as a dark `Button` does.
+     */
     isLight?: boolean;
     /** Duration in ms before auto-close. Default 3000. */
     duration?: number;

package/dist/types-cjs/form/Combobox.d.ts

@@ -88,7 +88,10 @@ interface ComboboxBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
      * Where the menu opens against the field: below (`bottom-*`) or above
      * (`top-*`), lined up with its left or right edge. `auto` picks the one
      * that keeps the list in the viewport, preferring below. The same union
-     * Popover takes.
+     * Popover takes. Left out, it opens below and lines up with the field's
+     * start edge, which is its right edge on a right-to-left page, so a menu
+     * wider than the field doesn't hang off the screen. A corner you pass
+     * stays physical, so `bottom-left` lines up the left edges on either page.
      * @defaultValue 'bottom-left'
      */
     position?: PopoverPosition;

package/dist/types-cjs/form/Control.d.ts

@@ -5,9 +5,15 @@ import { IconProps } from '../elements/Icon.js';
  * Props for the Control component.
  */
 export interface ControlBaseProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
-    /** Adds left icon container. */
+    /**
+     * Adds left icon container.
+     * Over a `TextArea` the icon covers the text.
+     */
     hasIconsLeft?: boolean;
-    /** Adds right icon container. */
+    /**
+     * Adds right icon container.
+     * Over a `TextArea` the icon covers the text.
+     */
     hasIconsRight?: boolean;
     /**
      * Shows a loading spinner inside the control.
@@ -29,6 +35,7 @@ export interface ControlBaseProps extends React.HTMLAttributes<HTMLDivElement>,
     bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
     /**
      * Icon props for left icon, or a custom node (an inline SVG, a `react-icons` component, …) rendered in place of a class-based glyph.
+     * Over a `TextArea` the icon covers the text.
      * Bulma gives control icons `pointer-events: none`, so a click lands on
      * the input and a clickable node placed here never receives one. Put a button beside the input
      * in its own addon `Control` instead.
@@ -36,16 +43,23 @@ export interface ControlBaseProps extends React.HTMLAttributes<HTMLDivElement>,
     iconLeft?: IconProps | React.ReactNode;
     /**
      * Icon props for right icon, or a custom node (an inline SVG, a `react-icons` component, …) rendered in place of a class-based glyph.
+     * Over a `TextArea` the icon covers the text.
      * Bulma gives control icons `pointer-events: none`, so a click lands on
      * the input and a clickable node placed here never receives one. Put a button beside the input
      * in its own addon `Control` instead.
      */
     iconRight?: IconProps | React.ReactNode;
-    /** Shortcut for left icon name. */
+    /**
+     * Shortcut for left icon name.
+     * Over a `TextArea` the icon covers the text.
+     */
     iconLeftName?: string;
     /** Shortcut for left icon size. */
     iconLeftSize?: 'small' | 'medium' | 'large';
-    /** Shortcut for right icon name. */
+    /**
+     * Shortcut for right icon name.
+     * Over a `TextArea` the icon covers the text.
+     */
     iconRightName?: string;
     /** Shortcut for right icon size. */
     iconRightSize?: 'small' | 'medium' | 'large';

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

@@ -74,6 +74,9 @@ export interface DateTimeInputBaseProps extends Omit<React.InputHTMLAttributes<H
      * `defaultValue` it opens on the month the clock reads, and around the end
      * of a month the server's clock and the browser's can read different
      * months, so give it a date both render the same.
+     * Reset in its footer goes back to the value it mounted with, or, when
+     * controlled, to the latest `value` the parent set other than an echo of
+     * `onChange`. The ✓ beside it has no popover to close.
      */
     inline?: boolean;
     /** Use `<input type="datetime-local">` on coarse-pointer devices. */

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

@@ -27,7 +27,11 @@ export interface TimeInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
     max?: Date;
     /** Disable the input. */
     disabled?: boolean;
-    /** Make the input read-only. */
+    /**
+     * Make the input read-only. An `inline` picker's wheels keep their tab
+     * stops and carry `aria-readonly`, but no key, scroll, drag or click turns
+     * them, so the time can't change.
+     */
     readOnly?: boolean;
     /** Placeholder text for the input. */
     placeholder?: string;

package/dist/types-cjs/form/_pickerInternals/TimeWheels.d.ts

@@ -18,6 +18,12 @@ export interface TimeWheelsProps {
     size?: 'small' | 'medium' | 'large';
     color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
     disabled?: boolean;
+    /**
+     * Show the value and take no input that changes it. Each wheel keeps its
+     * tab stop and carries `aria-readonly`, and the arrow keys between columns
+     * still move focus, but no key, scroll, drag or click turns a wheel.
+     */
+    readOnly?: boolean;
     className?: string;
     id?: string;
     labels?: PickerLabels;

package/dist/types-cjs/helpers/useFocusTrap.d.ts

@@ -17,12 +17,22 @@ export declare function isTabbableKind(el: Element): boolean;
  * A stop that doesn't take focus is passed over for the next one in. An
  * `<object>` or `<embed>` with nothing to show is one: it counts as a stop by
  * its kind, but browsers refuse to focus it, and which ones they refuse
- * depends on the browser and on what has loaded, so only trying tells. A
- * stop took focus when focus moved, wherever it went (a stop can hand focus
- * on), or when focus was on it already. `src/index.ts` names its exports from
- * this module, so this one stays internal.
+ * depends on the browser and on what has loaded, so only trying tells.
+ * `src/index.ts` names its exports from this module, so this one stays
+ * internal.
  */
 export declare function focusTabStop(container: HTMLElement, fromLast?: boolean): void;
+/**
+ * Moves focus where Tab goes from `element` when nothing inside it can take
+ * focus: to the first tab stop after it and outside it. Inside a trap that
+ * holds Tab, or a modal dialog, it looks no further than that container, and
+ * with nothing after `element` there, focus wraps to the container's first
+ * stop, as the trap's own Tab does. Returns whether it moved focus, which it
+ * doesn't at the end of the page, where the browser takes the key. It's for
+ * a popup that hides as a Tab inside it arrives, before the browser moves
+ * focus. Internal like `focusTabStop`.
+ */
+export declare function focusTabStopAfter(element: HTMLElement): boolean;
 /**
  * Holds Tab inside the element `container` returns until the returned
  * function is called. Tab and Shift+Tab heard on `keyTarget` wrap at the

package/dist/types-cjs/helpers/useOtherClasses.d.ts

@@ -37,7 +37,12 @@ export interface BulmaOtherProps {
      * container.
      */
     overlay?: boolean;
-    /** Interaction behavior (e.g., 'unselectable', 'clickable'). */
+    /**
+     * Interaction behavior: `unselectable` stops text selection
+     * (`is-unselectable`), and `clickable` shows the pointer cursor
+     * (`is-clickable`). It adds no role, no tab stop and no keyboard handling,
+     * so an element people click should be a `<button>` or a link.
+     */
     interaction?: (typeof validInteractions)[number];
     /** Cursor style (e.g., 'pointer', 'help'). */
     cursor?: (typeof validCursors)[number];