@allxsmith/bestax-bulma 5.40.0 → 5.42.0

package/dist/index.esm.js

@@ -8,7 +8,7 @@ export { Breadcrumb } from './esm/components/Breadcrumb.js';
 export { Card } from './esm/components/Card.js';
 export { Dropdown, DropdownDivider, DropdownItem, isBrowser } from './esm/components/Dropdown.js';
 export { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIndicator, EmptyStateTitle } from './esm/components/EmptyState.js';
-export { Menu, MenuItem, MenuLabel, MenuList } from './esm/components/Menu.js';
+export { Menu, MenuItem, MenuLabel, MenuList, MenuSection } from './esm/components/Menu.js';
 export { Message } from './esm/components/Message.js';
 export { Modal } from './esm/components/Modal.js';
 export { Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarLink, NavbarMenu, NavbarStart } from './esm/components/Navbar.js';

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

@@ -4,7 +4,10 @@ import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
  * Props for the CarouselItem component.
  */
 export interface CarouselItemProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Whether this item is active (set automatically). */
+    /**
+     * Whether this item is in view. `Carousel` sets it on every item in view,
+     * so with several in view several are active.
+     */
     active?: boolean;
 }
 /**
@@ -24,20 +27,93 @@ type IconLibrary = 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';
  */
 export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'>, BulmaClassesProps {
     /**
-     * Current active slide index (controlled).
+     * Index of the first item in view (controlled); with one item in view, the
+     * slide shown. A value between two of the positions a step lands on (see
+     * `itemsToScroll`) is shown as given, and the next step goes on from it.
+     * With `repeat`, a value past either end wraps around; without it, one
+     * that would leave empty space after the last item shows the last full
+     * view. Neither correction calls `onChange`. A value that takes the item
+     * holding focus out of view moves focus to the first item in view, as a
+     * swipe or a change of width does.
      * @defaultValue 0
      */
     value?: number;
-    /** Enable auto-play. */
+    /**
+     * Enable auto-play: one step (`itemsToScroll` items) per `interval`.
+     * Without `repeat` it stops at the last position. It waits while the
+     * pointer is over the carousel (see `pauseOnHover`) and while focus is
+     * inside one of its items, so an item being read or used never moves out
+     * of view.
+     */
     autoplay?: boolean;
     /** Auto-play interval in milliseconds. Default: 5000. */
     interval?: number;
     /** Pause auto-play on hover. Default: true. */
     pauseOnHover?: boolean;
-    /** Loop back to first slide after last. Default: true. */
+    /**
+     * Loop back to the first position after the last. Default: true. With
+     * several items in view, the view runs on past the last item into the
+     * first ones, so it can show the end and the start side by side. Only
+     * loops when some item is out of view.
+     */
     repeat?: boolean;
-    /** Enable drag/swipe navigation. Default: true. */
+    /**
+     * Enable drag/swipe navigation. Default: true. A swipe moves one step,
+     * however far it travels.
+     */
     hasDrag?: boolean;
+    /**
+     * How many items are in view at once, at every width no
+     * `itemsToShow<Viewport>` prop covers. Those props read the way a
+     * `Column`'s `size<Viewport>` props do: `itemsToShowMobile` applies below
+     * Bulma's tablet breakpoint, each of the others from its own breakpoint
+     * up, and where several apply the widest one wins. A whole number, rounded
+     * down and at least 1. The widths come from the stylesheet, so they are
+     * right on the first paint; the arrows, indicators and steps use the
+     * count for the window's width once the page has hydrated, and this one
+     * until then. With this many children or fewer, every item keeps its
+     * share of the width, nothing moves, and no arrows or indicators render.
+     * @defaultValue 1
+     */
+    itemsToShow?: number;
+    /**
+     * Items in view at any width below Bulma's tablet breakpoint (769px),
+     * fractional ones included. Falls back to `itemsToShow`.
+     */
+    itemsToShowMobile?: number;
+    /**
+     * Items in view from Bulma's tablet breakpoint (769px) up, until a wider
+     * viewport's prop takes over. Falls back to `itemsToShow`.
+     */
+    itemsToShowTablet?: number;
+    /**
+     * Items in view from Bulma's desktop breakpoint (1024px) up, until a wider
+     * viewport's prop takes over. Falls back to `itemsToShowTablet`, then
+     * `itemsToShow`.
+     */
+    itemsToShowDesktop?: number;
+    /**
+     * Items in view from Bulma's widescreen breakpoint (1216px) up, until
+     * `itemsToShowFullhd` takes over. Falls back to `itemsToShowDesktop`, and
+     * on down to `itemsToShow`.
+     */
+    itemsToShowWidescreen?: number;
+    /**
+     * Items in view from Bulma's fullhd breakpoint (1408px) up. Falls back to
+     * `itemsToShowWidescreen`, and on down to `itemsToShow`.
+     */
+    itemsToShowFullhd?: number;
+    /**
+     * How many items one step moves, for an arrow, an arrow key, a swipe or an
+     * autoplay tick. A whole number, capped at the count in view so a step
+     * never skips an item. Without `repeat`, the last step stops at the last
+     * full view, so it can be shorter; with `repeat`, the step after the last
+     * position goes on to the first one. The indicators mark these positions,
+     * one per step rather than one per item. When the count in view changes
+     * with the window's width, the first item in view stays in view.
+     * @defaultValue 1
+     */
+    itemsToScroll?: number;
     /**
      * Show navigation arrows. Default: true. They render `type="button"`, so a
      * carousel inside a form is not submitted by moving between slides.
@@ -46,8 +122,9 @@ export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     /** Only show arrows on hover. */
     arrowHover?: boolean;
     /**
-     * Show slide indicators. Default: true. They render `type="button"`, so a
-     * carousel inside a form is not submitted by picking a slide.
+     * Show slide indicators. Default: true. There is one for each position a
+     * step can land on (see `itemsToScroll`). They render `type="button"`, so
+     * a carousel inside a form is not submitted by picking a slide.
      */
     indicator?: boolean;
     /** Position indicators inside carousel. */
@@ -74,7 +151,10 @@ export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     arrowColor?: 'light' | 'dark';
     /** Accessible label for the carousel region. Default: 'Image carousel'. */
     ariaLabel?: string;
-    /** Callback when slide changes. */
+    /**
+     * Called with the index of the first item in view when an arrow, an arrow
+     * key, an indicator, a swipe or autoplay moves the carousel.
+     */
     onChange?: (value: number) => void;
     /** CarouselItem children. */
     children?: React.ReactNode;
@@ -105,6 +185,14 @@ export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>
  *     <img src="image2.jpg" alt="Slide 2" />
  *   </CarouselItem>
  * </Carousel>
+ *
+ * @example
+ * // Three cards in view on desktop, two on tablet, one on mobile
+ * <Carousel itemsToShow={1} itemsToShowTablet={2} itemsToShowDesktop={3}>
+ *   {cards.map(card => (
+ *     <CarouselItem key={card.id}>{card.body}</CarouselItem>
+ *   ))}
+ * </Carousel>
  */
 export declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLDivElement>>;
 export default Carousel;

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

@@ -115,9 +115,58 @@ export type MenuItemProps<T extends React.ElementType = 'a'> = MenuItemOwnProps
  * @returns {JSX.Element} The rendered menu item.
  */
 export declare const MenuItem: PolymorphicComponent<MenuItemOwnProps, "a">;
+/**
+ * Props for the MenuSection component. The helper props and the other
+ * attributes land on the wrapping `<div>`.
+ */
+export interface MenuSectionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof BulmaClassesProps>, BulmaClassesProps {
+    /** Additional CSS classes for the wrapping `<div>`. */
+    className?: string;
+    /** **Required.** The section's heading, drawn like `Menu.Label` inside the button that opens and closes it. Keep links and buttons out of it, since it's inside one. */
+    label: React.ReactNode;
+    /**
+     * The `Menu.List` of links the section shows while it's open. The section
+     * itself goes directly in `Menu`, beside its labels and lists: inside a
+     * `Menu.Item` it would render inside the item's link, and inside a
+     * `Menu.List` it wouldn't be a list item.
+     */
+    children: React.ReactNode;
+    /** Controlled open state. If provided, the section is controlled, and its button only reports through `onOpenChange`. */
+    open?: boolean;
+    /** Initial open state for uncontrolled usage. Open the section that holds the current page, so the reader sees where they are. */
+    defaultOpen?: boolean;
+    /** Called with the state the button asks for (`true` to open) each time it is clicked or activated with Enter or Space, in every mode. Pair it with `open` to let the button drive a controlled section. */
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * A section of the menu that opens and closes: its heading is a button drawn like `Menu.Label`, and its `Menu.List` of links shows while it's open.
+ *
+ * It's APG's disclosure navigation, for a sidebar of link groups: the links
+ * stay ordinary links, each its own tab stop, and a closed section's list is
+ * `hidden` and `inert`, so Tab and assistive tech skip it. It goes directly in
+ * `Menu`, holding a `Menu.List`. Closing it while focus is on one of its links
+ * moves focus to its heading.
+ *
+ * @function
+ * @param {MenuSectionProps} props - Props for the MenuSection component.
+ * @returns {JSX.Element} The rendered menu section.
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/ | APG Disclosure Navigation Menu example}
+ *
+ * @example
+ * <Menu>
+ *   <Menu.Section label="Components" defaultOpen>
+ *     <Menu.List>
+ *       <Menu.Item href="/button" active>Button</Menu.Item>
+ *       <Menu.Item href="/card">Card</Menu.Item>
+ *     </Menu.List>
+ *   </Menu.Section>
+ * </Menu>
+ */
+export declare const MenuSection: React.FC<MenuSectionProps>;
 export declare const Menu: React.FC<MenuProps> & {
     Label: React.FC<MenuLabelProps>;
     List: React.FC<MenuListProps>;
     Item: PolymorphicComponent<MenuItemOwnProps, "a", never>;
+    Section: React.FC<MenuSectionProps>;
 };
 export default Menu;

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

@@ -17,7 +17,12 @@ export interface ImageProps extends React.HTMLAttributes<HTMLElement>, Omit<Bulm
     color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
     /** Background color helper for the container. */
     bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
-    /** Fixed size or aspect ratio modifier for the image container. */
+    /**
+     * Fixed size or aspect ratio modifier for the image container. A ratio
+     * (`16by9` and the rest) renders only its `is-<ratio>` class there. Bulma
+     * stretches an `<img>` inside to fill the ratio, but any other child, such
+     * as an `iframe`, fills it only with `className="has-ratio"` of its own.
+     */
     size?: '16x16' | '24x24' | '32x32' | '48x48' | '64x64' | '96x96' | '128x128' | 'square' | '1by1' | '5by4' | '4by3' | '3by2' | '5by3' | '16by9' | '2by1' | '3by1' | '4by5' | '3by4' | '2by3' | '3by5' | '9by16' | '1by2' | '1by3';
     /** Renders the image with rounded corners. */
     isRounded?: boolean;

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

@@ -5,16 +5,24 @@ import type { RefObject } from 'react';
  * can read `-1` for an editable region or an `<embed>` that Tab still visits,
  * and `0` for a `<video>` without controls that it doesn't. So a valid
  * `tabindex` attribute decides, and otherwise the element's kind does.
- * Internal like `firstTabStop`: `src/index.ts` names what it takes from here.
+ * Internal like `focusTabStop`: `src/index.ts` names what it takes from here.
  */
 export declare function isTabbableKind(el: Element): boolean;
 /**
- * The first tab stop inside `container`, found the way the trap finds it, or
- * `null` when there is none. For a component that moves focus into a panel
- * itself rather than through the hook. `src/index.ts` names its exports from
+ * Moves focus to the first tab stop inside `container`, or the last when
+ * `fromLast`, and to the container when there is none. Every move a trap
+ * makes goes through here: into the container as it opens, to the other end
+ * on a wrap, and back in after a Tab the browser carried out.
+ *
+ * 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.
  */
-export declare function firstTabStop(container: HTMLElement): HTMLElement | null;
+export declare function focusTabStop(container: HTMLElement, fromLast?: boolean): void;
 /**
  * Holds Tab inside the element `container` returns until the returned
  * function is called. Tab and Shift+Tab heard on `keyTarget` wrap at the
@@ -25,7 +33,7 @@ export declare function firstTabStop(container: HTMLElement): HTMLElement | null
  * overlay whose nodes are remounted while it's open, as moving to another
  * portal target does, stays trapped without attaching again. `holds` is asked
  * on every Tab, and the trap leaves the key alone while it says no. Internal
- * like `firstTabStop`. It's for an overlay that holds Tab from a listener of
+ * like `focusTabStop`. It's for an overlay that holds Tab from a listener of
  * its own on `window` and asks the overlay stack first, so it stands aside
  * while another overlay is open over it, which a trap listening on the
  * container can't do.
@@ -46,8 +54,8 @@ export interface UseFocusTrapOptions {
      * to be one that can take focus, so a heading needs `tabIndex={-1}`. When
      * focusing it doesn't put focus inside the container (the ref is empty, or
      * its element is outside, disabled, hidden or can't take focus), focus goes
-     * to the first tab stop inside the container, and to the container itself
-     * when there is none.
+     * to the first tab stop inside the container that takes focus, and to the
+     * container itself when none does.
      */
     initialFocusRef?: RefObject<HTMLElement | null>;
     /**

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

@@ -4,7 +4,10 @@ import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
  * Props for the CarouselItem component.
  */
 export interface CarouselItemProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Whether this item is active (set automatically). */
+    /**
+     * Whether this item is in view. `Carousel` sets it on every item in view,
+     * so with several in view several are active.
+     */
     active?: boolean;
 }
 /**
@@ -24,20 +27,93 @@ type IconLibrary = 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';
  */
 export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'>, BulmaClassesProps {
     /**
-     * Current active slide index (controlled).
+     * Index of the first item in view (controlled); with one item in view, the
+     * slide shown. A value between two of the positions a step lands on (see
+     * `itemsToScroll`) is shown as given, and the next step goes on from it.
+     * With `repeat`, a value past either end wraps around; without it, one
+     * that would leave empty space after the last item shows the last full
+     * view. Neither correction calls `onChange`. A value that takes the item
+     * holding focus out of view moves focus to the first item in view, as a
+     * swipe or a change of width does.
      * @defaultValue 0
      */
     value?: number;
-    /** Enable auto-play. */
+    /**
+     * Enable auto-play: one step (`itemsToScroll` items) per `interval`.
+     * Without `repeat` it stops at the last position. It waits while the
+     * pointer is over the carousel (see `pauseOnHover`) and while focus is
+     * inside one of its items, so an item being read or used never moves out
+     * of view.
+     */
     autoplay?: boolean;
     /** Auto-play interval in milliseconds. Default: 5000. */
     interval?: number;
     /** Pause auto-play on hover. Default: true. */
     pauseOnHover?: boolean;
-    /** Loop back to first slide after last. Default: true. */
+    /**
+     * Loop back to the first position after the last. Default: true. With
+     * several items in view, the view runs on past the last item into the
+     * first ones, so it can show the end and the start side by side. Only
+     * loops when some item is out of view.
+     */
     repeat?: boolean;
-    /** Enable drag/swipe navigation. Default: true. */
+    /**
+     * Enable drag/swipe navigation. Default: true. A swipe moves one step,
+     * however far it travels.
+     */
     hasDrag?: boolean;
+    /**
+     * How many items are in view at once, at every width no
+     * `itemsToShow<Viewport>` prop covers. Those props read the way a
+     * `Column`'s `size<Viewport>` props do: `itemsToShowMobile` applies below
+     * Bulma's tablet breakpoint, each of the others from its own breakpoint
+     * up, and where several apply the widest one wins. A whole number, rounded
+     * down and at least 1. The widths come from the stylesheet, so they are
+     * right on the first paint; the arrows, indicators and steps use the
+     * count for the window's width once the page has hydrated, and this one
+     * until then. With this many children or fewer, every item keeps its
+     * share of the width, nothing moves, and no arrows or indicators render.
+     * @defaultValue 1
+     */
+    itemsToShow?: number;
+    /**
+     * Items in view at any width below Bulma's tablet breakpoint (769px),
+     * fractional ones included. Falls back to `itemsToShow`.
+     */
+    itemsToShowMobile?: number;
+    /**
+     * Items in view from Bulma's tablet breakpoint (769px) up, until a wider
+     * viewport's prop takes over. Falls back to `itemsToShow`.
+     */
+    itemsToShowTablet?: number;
+    /**
+     * Items in view from Bulma's desktop breakpoint (1024px) up, until a wider
+     * viewport's prop takes over. Falls back to `itemsToShowTablet`, then
+     * `itemsToShow`.
+     */
+    itemsToShowDesktop?: number;
+    /**
+     * Items in view from Bulma's widescreen breakpoint (1216px) up, until
+     * `itemsToShowFullhd` takes over. Falls back to `itemsToShowDesktop`, and
+     * on down to `itemsToShow`.
+     */
+    itemsToShowWidescreen?: number;
+    /**
+     * Items in view from Bulma's fullhd breakpoint (1408px) up. Falls back to
+     * `itemsToShowWidescreen`, and on down to `itemsToShow`.
+     */
+    itemsToShowFullhd?: number;
+    /**
+     * How many items one step moves, for an arrow, an arrow key, a swipe or an
+     * autoplay tick. A whole number, capped at the count in view so a step
+     * never skips an item. Without `repeat`, the last step stops at the last
+     * full view, so it can be shorter; with `repeat`, the step after the last
+     * position goes on to the first one. The indicators mark these positions,
+     * one per step rather than one per item. When the count in view changes
+     * with the window's width, the first item in view stays in view.
+     * @defaultValue 1
+     */
+    itemsToScroll?: number;
     /**
      * Show navigation arrows. Default: true. They render `type="button"`, so a
      * carousel inside a form is not submitted by moving between slides.
@@ -46,8 +122,9 @@ export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     /** Only show arrows on hover. */
     arrowHover?: boolean;
     /**
-     * Show slide indicators. Default: true. They render `type="button"`, so a
-     * carousel inside a form is not submitted by picking a slide.
+     * Show slide indicators. Default: true. There is one for each position a
+     * step can land on (see `itemsToScroll`). They render `type="button"`, so
+     * a carousel inside a form is not submitted by picking a slide.
      */
     indicator?: boolean;
     /** Position indicators inside carousel. */
@@ -74,7 +151,10 @@ export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     arrowColor?: 'light' | 'dark';
     /** Accessible label for the carousel region. Default: 'Image carousel'. */
     ariaLabel?: string;
-    /** Callback when slide changes. */
+    /**
+     * Called with the index of the first item in view when an arrow, an arrow
+     * key, an indicator, a swipe or autoplay moves the carousel.
+     */
     onChange?: (value: number) => void;
     /** CarouselItem children. */
     children?: React.ReactNode;
@@ -105,6 +185,14 @@ export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>
  *     <img src="image2.jpg" alt="Slide 2" />
  *   </CarouselItem>
  * </Carousel>
+ *
+ * @example
+ * // Three cards in view on desktop, two on tablet, one on mobile
+ * <Carousel itemsToShow={1} itemsToShowTablet={2} itemsToShowDesktop={3}>
+ *   {cards.map(card => (
+ *     <CarouselItem key={card.id}>{card.body}</CarouselItem>
+ *   ))}
+ * </Carousel>
  */
 export declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLDivElement>>;
 export default Carousel;

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

@@ -115,9 +115,58 @@ export type MenuItemProps<T extends React.ElementType = 'a'> = MenuItemOwnProps
  * @returns {JSX.Element} The rendered menu item.
  */
 export declare const MenuItem: PolymorphicComponent<MenuItemOwnProps, "a">;
+/**
+ * Props for the MenuSection component. The helper props and the other
+ * attributes land on the wrapping `<div>`.
+ */
+export interface MenuSectionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof BulmaClassesProps>, BulmaClassesProps {
+    /** Additional CSS classes for the wrapping `<div>`. */
+    className?: string;
+    /** **Required.** The section's heading, drawn like `Menu.Label` inside the button that opens and closes it. Keep links and buttons out of it, since it's inside one. */
+    label: React.ReactNode;
+    /**
+     * The `Menu.List` of links the section shows while it's open. The section
+     * itself goes directly in `Menu`, beside its labels and lists: inside a
+     * `Menu.Item` it would render inside the item's link, and inside a
+     * `Menu.List` it wouldn't be a list item.
+     */
+    children: React.ReactNode;
+    /** Controlled open state. If provided, the section is controlled, and its button only reports through `onOpenChange`. */
+    open?: boolean;
+    /** Initial open state for uncontrolled usage. Open the section that holds the current page, so the reader sees where they are. */
+    defaultOpen?: boolean;
+    /** Called with the state the button asks for (`true` to open) each time it is clicked or activated with Enter or Space, in every mode. Pair it with `open` to let the button drive a controlled section. */
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * A section of the menu that opens and closes: its heading is a button drawn like `Menu.Label`, and its `Menu.List` of links shows while it's open.
+ *
+ * It's APG's disclosure navigation, for a sidebar of link groups: the links
+ * stay ordinary links, each its own tab stop, and a closed section's list is
+ * `hidden` and `inert`, so Tab and assistive tech skip it. It goes directly in
+ * `Menu`, holding a `Menu.List`. Closing it while focus is on one of its links
+ * moves focus to its heading.
+ *
+ * @function
+ * @param {MenuSectionProps} props - Props for the MenuSection component.
+ * @returns {JSX.Element} The rendered menu section.
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/ | APG Disclosure Navigation Menu example}
+ *
+ * @example
+ * <Menu>
+ *   <Menu.Section label="Components" defaultOpen>
+ *     <Menu.List>
+ *       <Menu.Item href="/button" active>Button</Menu.Item>
+ *       <Menu.Item href="/card">Card</Menu.Item>
+ *     </Menu.List>
+ *   </Menu.Section>
+ * </Menu>
+ */
+export declare const MenuSection: React.FC<MenuSectionProps>;
 export declare const Menu: React.FC<MenuProps> & {
     Label: React.FC<MenuLabelProps>;
     List: React.FC<MenuListProps>;
     Item: PolymorphicComponent<MenuItemOwnProps, "a", never>;
+    Section: React.FC<MenuSectionProps>;
 };
 export default Menu;

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

@@ -17,7 +17,12 @@ export interface ImageProps extends React.HTMLAttributes<HTMLElement>, Omit<Bulm
     color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
     /** Background color helper for the container. */
     bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
-    /** Fixed size or aspect ratio modifier for the image container. */
+    /**
+     * Fixed size or aspect ratio modifier for the image container. A ratio
+     * (`16by9` and the rest) renders only its `is-<ratio>` class there. Bulma
+     * stretches an `<img>` inside to fill the ratio, but any other child, such
+     * as an `iframe`, fills it only with `className="has-ratio"` of its own.
+     */
     size?: '16x16' | '24x24' | '32x32' | '48x48' | '64x64' | '96x96' | '128x128' | 'square' | '1by1' | '5by4' | '4by3' | '3by2' | '5by3' | '16by9' | '2by1' | '3by1' | '4by5' | '3by4' | '2by3' | '3by5' | '9by16' | '1by2' | '1by3';
     /** Renders the image with rounded corners. */
     isRounded?: boolean;

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

@@ -5,16 +5,24 @@ import type { RefObject } from 'react';
  * can read `-1` for an editable region or an `<embed>` that Tab still visits,
  * and `0` for a `<video>` without controls that it doesn't. So a valid
  * `tabindex` attribute decides, and otherwise the element's kind does.
- * Internal like `firstTabStop`: `src/index.ts` names what it takes from here.
+ * Internal like `focusTabStop`: `src/index.ts` names what it takes from here.
  */
 export declare function isTabbableKind(el: Element): boolean;
 /**
- * The first tab stop inside `container`, found the way the trap finds it, or
- * `null` when there is none. For a component that moves focus into a panel
- * itself rather than through the hook. `src/index.ts` names its exports from
+ * Moves focus to the first tab stop inside `container`, or the last when
+ * `fromLast`, and to the container when there is none. Every move a trap
+ * makes goes through here: into the container as it opens, to the other end
+ * on a wrap, and back in after a Tab the browser carried out.
+ *
+ * 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.
  */
-export declare function firstTabStop(container: HTMLElement): HTMLElement | null;
+export declare function focusTabStop(container: HTMLElement, fromLast?: boolean): void;
 /**
  * Holds Tab inside the element `container` returns until the returned
  * function is called. Tab and Shift+Tab heard on `keyTarget` wrap at the
@@ -25,7 +33,7 @@ export declare function firstTabStop(container: HTMLElement): HTMLElement | null
  * overlay whose nodes are remounted while it's open, as moving to another
  * portal target does, stays trapped without attaching again. `holds` is asked
  * on every Tab, and the trap leaves the key alone while it says no. Internal
- * like `firstTabStop`. It's for an overlay that holds Tab from a listener of
+ * like `focusTabStop`. It's for an overlay that holds Tab from a listener of
  * its own on `window` and asks the overlay stack first, so it stands aside
  * while another overlay is open over it, which a trap listening on the
  * container can't do.
@@ -46,8 +54,8 @@ export interface UseFocusTrapOptions {
      * to be one that can take focus, so a heading needs `tabIndex={-1}`. When
      * focusing it doesn't put focus inside the container (the ref is empty, or
      * its element is outside, disabled, hidden or can't take focus), focus goes
-     * to the first tab stop inside the container, and to the container itself
-     * when there is none.
+     * to the first tab stop inside the container that takes focus, and to the
+     * container itself when none does.
      */
     initialFocusRef?: RefObject<HTMLElement | null>;
     /**