@allxsmith/bestax-bulma 5.44.0 → 5.45.1

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

@@ -134,9 +134,31 @@ export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      * a carousel inside a form is not submitted by picking a slide.
      */
     indicator?: boolean;
-    /** Position indicators inside carousel. */
+    /**
+     * Puts the indicators over the slides instead of below them, at the edge
+     * `indicatorPosition` names. It also turns on the overlay look unless
+     * `overlayControls` says otherwise, so on its own it gives the look made
+     * for photos: light arrows, and light indicators on a dark gradient band.
+     */
     indicatorInside?: boolean;
-    /** Indicator position. Default: 'bottom'. */
+    /**
+     * The overlay look, made for photos. The arrows take the
+     * `--bulma-carousel-overlay-arrow-*` colors, and indicators over the
+     * slides take the `--bulma-carousel-overlay-indicator-*` colors on a dark
+     * gradient band. Indicators below the slides keep their plain colors,
+     * since they sit on the page. It follows `indicatorInside` unless you set
+     * it, so `overlayControls={false}` puts the indicators over the slides
+     * with the plain look, and `overlayControls` alone gives the arrows the
+     * overlay look with the indicators below. While it's on, `arrowColor`
+     * doesn't apply.
+     * @defaultValue indicatorInside
+     */
+    overlayControls?: boolean;
+    /**
+     * The edge of the slides `indicatorInside` puts the indicators on.
+     * Default: 'bottom'. Without `indicatorInside` they sit below the slides
+     * whatever this says, so leave it unset there.
+     */
     indicatorPosition?: 'bottom' | 'top';
     /** Indicator style. Default: 'dots'. */
     indicatorStyle?: 'circles' | 'dots' | 'lines' | 'bars';
@@ -154,7 +176,11 @@ export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     iconFeatures?: string | string[];
     /** Show semi-transparent background on arrow buttons. Set to `false` for icon-only arrows. */
     arrowBackground?: boolean;
-    /** Color theme for navigation arrows. */
+    /**
+     * Color theme for navigation arrows. Not applied while the overlay look is
+     * on (see `overlayControls`, which `indicatorInside` turns on), whose
+     * arrows take `--bulma-carousel-overlay-arrow-color`.
+     */
     arrowColor?: 'light' | 'dark';
     /** Accessible label for the carousel region. Default: 'Image carousel'. */
     ariaLabel?: string;

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

@@ -9,7 +9,14 @@ export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     active?: boolean;
     /** Alias for `active`. Whether the modal is open/visible. */
     isActive?: boolean;
-    /** Callback invoked to request modal close (background or close button). */
+    /**
+     * Called to ask for the modal to close. The props form calls it from the
+     * background and the close button it renders. In the compound form,
+     * `Modal.Close` calls it unless you give it an `onClick` of your own, and
+     * `Modal.Background` doesn't call it on its own: pass it
+     * `onClick={onClose}` for a click on the background to close the modal.
+     * Escape calls it in both forms unless `closeOnEscape` is `false`.
+     */
     onClose?: () => void;
     /** Additional CSS classes for the modal. */
     className?: string;
@@ -61,6 +68,7 @@ export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
 }
 /**
  * Props for Modal.Background component.
+ * @extraProp {React.MouseEventHandler<HTMLDivElement>} [onClick] - Called when the background is clicked. The background doesn't call the modal's `onClose` on its own, so pass `onClick={onClose}` for a click on it to close the modal.
  */
 export interface ModalBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Additional CSS classes. */
@@ -112,6 +120,7 @@ export interface ModalCardFootProps extends React.HTMLAttributes<HTMLElement> {
  * Props for Modal.Close component.
  * @extraProp {'button' | 'submit' | 'reset'} [type='button'] - Button type. Defaults to `'button'`, so a close button inside a form does not submit it. Pass `'submit'` or `'reset'` and yours is used; any other value, or a spread carrying `type: undefined`, renders `'button'`.
  * @extraProp {string} [aria-label='close'] - Accessible name. Pass your own to replace it. An empty one, or a spread carrying `'aria-label': undefined`, keeps the default rather than leaving the button unnamed.
+ * @extraProp {React.MouseEventHandler<HTMLButtonElement>} [onClick] - Called when the button is clicked. Without one, the button calls the `onClose` of the `Modal` around it. Yours replaces that rather than running before it, so call `onClose` from it if the button should still close the modal.
  */
 export interface ModalCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /** Additional CSS classes. */

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

@@ -47,12 +47,14 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     /**
      * Shows the mixed state, as in a "Select all" box when some of what it
      * covers is checked. It's a look and an announcement only: `checked` is
-     * still the value, and a click still toggles `checked`. A browser clears
-     * the mixed state on a click, so the component sets it again from this
-     * prop after every click and every render. Left unset, the component
-     * doesn't touch it, and once it has set it, going back to unset clears it
-     * once and hands it back. It has no HTML attribute, so server-rendered
-     * markup can't carry it, and a mixed box renders unmixed until hydration.
+     * still the value, and a click still toggles `checked`. Set to `true` or
+     * `false`, it's controlled: a browser clears the mixed state on a click,
+     * so the component sets it again from this prop after every click and
+     * every render. Unset isn't `false`. The component leaves the input's own
+     * `indeterminate` property alone, so a ref can set it, and going from set
+     * to unset clears it once and hands it back. It has no HTML attribute, so
+     * server-rendered markup can't carry it, and a mixed box renders unmixed
+     * until hydration.
      */
     indeterminate?: boolean;
     /**

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

@@ -134,9 +134,31 @@ export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      * a carousel inside a form is not submitted by picking a slide.
      */
     indicator?: boolean;
-    /** Position indicators inside carousel. */
+    /**
+     * Puts the indicators over the slides instead of below them, at the edge
+     * `indicatorPosition` names. It also turns on the overlay look unless
+     * `overlayControls` says otherwise, so on its own it gives the look made
+     * for photos: light arrows, and light indicators on a dark gradient band.
+     */
     indicatorInside?: boolean;
-    /** Indicator position. Default: 'bottom'. */
+    /**
+     * The overlay look, made for photos. The arrows take the
+     * `--bulma-carousel-overlay-arrow-*` colors, and indicators over the
+     * slides take the `--bulma-carousel-overlay-indicator-*` colors on a dark
+     * gradient band. Indicators below the slides keep their plain colors,
+     * since they sit on the page. It follows `indicatorInside` unless you set
+     * it, so `overlayControls={false}` puts the indicators over the slides
+     * with the plain look, and `overlayControls` alone gives the arrows the
+     * overlay look with the indicators below. While it's on, `arrowColor`
+     * doesn't apply.
+     * @defaultValue indicatorInside
+     */
+    overlayControls?: boolean;
+    /**
+     * The edge of the slides `indicatorInside` puts the indicators on.
+     * Default: 'bottom'. Without `indicatorInside` they sit below the slides
+     * whatever this says, so leave it unset there.
+     */
     indicatorPosition?: 'bottom' | 'top';
     /** Indicator style. Default: 'dots'. */
     indicatorStyle?: 'circles' | 'dots' | 'lines' | 'bars';
@@ -154,7 +176,11 @@ export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     iconFeatures?: string | string[];
     /** Show semi-transparent background on arrow buttons. Set to `false` for icon-only arrows. */
     arrowBackground?: boolean;
-    /** Color theme for navigation arrows. */
+    /**
+     * Color theme for navigation arrows. Not applied while the overlay look is
+     * on (see `overlayControls`, which `indicatorInside` turns on), whose
+     * arrows take `--bulma-carousel-overlay-arrow-color`.
+     */
     arrowColor?: 'light' | 'dark';
     /** Accessible label for the carousel region. Default: 'Image carousel'. */
     ariaLabel?: string;

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

@@ -9,7 +9,14 @@ export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     active?: boolean;
     /** Alias for `active`. Whether the modal is open/visible. */
     isActive?: boolean;
-    /** Callback invoked to request modal close (background or close button). */
+    /**
+     * Called to ask for the modal to close. The props form calls it from the
+     * background and the close button it renders. In the compound form,
+     * `Modal.Close` calls it unless you give it an `onClick` of your own, and
+     * `Modal.Background` doesn't call it on its own: pass it
+     * `onClick={onClose}` for a click on the background to close the modal.
+     * Escape calls it in both forms unless `closeOnEscape` is `false`.
+     */
     onClose?: () => void;
     /** Additional CSS classes for the modal. */
     className?: string;
@@ -61,6 +68,7 @@ export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
 }
 /**
  * Props for Modal.Background component.
+ * @extraProp {React.MouseEventHandler<HTMLDivElement>} [onClick] - Called when the background is clicked. The background doesn't call the modal's `onClose` on its own, so pass `onClick={onClose}` for a click on it to close the modal.
  */
 export interface ModalBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Additional CSS classes. */
@@ -112,6 +120,7 @@ export interface ModalCardFootProps extends React.HTMLAttributes<HTMLElement> {
  * Props for Modal.Close component.
  * @extraProp {'button' | 'submit' | 'reset'} [type='button'] - Button type. Defaults to `'button'`, so a close button inside a form does not submit it. Pass `'submit'` or `'reset'` and yours is used; any other value, or a spread carrying `type: undefined`, renders `'button'`.
  * @extraProp {string} [aria-label='close'] - Accessible name. Pass your own to replace it. An empty one, or a spread carrying `'aria-label': undefined`, keeps the default rather than leaving the button unnamed.
+ * @extraProp {React.MouseEventHandler<HTMLButtonElement>} [onClick] - Called when the button is clicked. Without one, the button calls the `onClose` of the `Modal` around it. Yours replaces that rather than running before it, so call `onClose` from it if the button should still close the modal.
  */
 export interface ModalCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /** Additional CSS classes. */

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

@@ -47,12 +47,14 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     /**
      * Shows the mixed state, as in a "Select all" box when some of what it
      * covers is checked. It's a look and an announcement only: `checked` is
-     * still the value, and a click still toggles `checked`. A browser clears
-     * the mixed state on a click, so the component sets it again from this
-     * prop after every click and every render. Left unset, the component
-     * doesn't touch it, and once it has set it, going back to unset clears it
-     * once and hands it back. It has no HTML attribute, so server-rendered
-     * markup can't carry it, and a mixed box renders unmixed until hydration.
+     * still the value, and a click still toggles `checked`. Set to `true` or
+     * `false`, it's controlled: a browser clears the mixed state on a click,
+     * so the component sets it again from this prop after every click and
+     * every render. Unset isn't `false`. The component leaves the input's own
+     * `indeterminate` property alone, so a ref can set it, and going from set
+     * to unset clears it once and hands it back. It has no HTML attribute, so
+     * server-rendered markup can't carry it, and a mixed box renders unmixed
+     * until hydration.
      */
     indeterminate?: boolean;
     /**