@allxsmith/bestax-bulma 5.60.0 → 5.61.0

package/dist/index.esm.js

@@ -129,6 +129,7 @@ export { Portal } from './esm/helpers/portal.js';
 export { LocaleProvider, useLocale } from './esm/helpers/LocaleProvider.js';
 export { useNumberFormat } from './esm/helpers/localeFormat.js';
 export { useFocusTrap } from './esm/helpers/useFocusTrap.js';
+export { AppFrame, AppFrameAside, AppFrameBurger, AppFrameFooter, AppFrameHeader, AppFrameMain, AppFrameNav, useAppFrame } from './esm/layout/AppFrame.js';
 export { Center } from './esm/layout/Center.js';
 export { Container } from './esm/layout/Container.js';
 export { Flex } from './esm/layout/Flex.js';

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -126,7 +126,7 @@ export declare const NavbarItem: PolymorphicComponent<NavbarItemOwnProps, "a">;
  * @extraProp {React.Ref<HTMLButtonElement>} [ref] - Ref forwarded to the burger button element.
  * @extraProp {'button' | 'submit' | 'reset'} [type='button'] - Button type. Defaults to `'button'`, so a burger 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'`.
  */
-export interface NavbarBurgerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+export interface NavbarBurgerProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'aria-expanded'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
     /** Additional CSS classes. */
     className?: string;
     /** Text color for the burger. */
@@ -155,11 +155,12 @@ export interface NavbarBurgerProps extends React.ButtonHTMLAttributes<HTMLButton
     'aria-label'?: string;
     /**
      * Expanded state for assistive technology. It follows `active` unless you
-     * pass `true` or `false`; a spread carrying `'aria-expanded': undefined`
+     * pass `true` or `false`, and `null` leaves it off, for a burger whose
+     * state isn't known yet; a spread carrying `'aria-expanded': undefined`
      * still follows `active`.
      * @defaultValue active
      */
-    'aria-expanded'?: boolean;
+    'aria-expanded'?: boolean | null;
     /** Click handler. */
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }

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

@@ -28,3 +28,20 @@ export declare const isModalOverlayOpen: () => boolean;
  * above this overlay.
  */
 export declare function useOverlayStack(inStack: boolean, modal?: boolean): (among?: 'modal') => boolean;
+/**
+ * Calls `onEscape` for an Escape while `active` and the overlay is the
+ * topmost one, as `isTopmost` (from `useOverlayStack`) says, and marks the key
+ * used with `preventDefault()`, so nothing under it acts on it too.
+ *
+ * It listens on `window`, so everything inside the overlay has had the key
+ * first, and an Escape something there used, such as a popup closing, is
+ * left to it. The listener stays put while `onEscape` changes identity, as an
+ * inline one does on every render of the parent: it reads the latest one as
+ * the key arrives.
+ *
+ * @function useOverlayEscape
+ * @param active - Whether the overlay is open and closes on Escape.
+ * @param isTopmost - The overlay's check from `useOverlayStack`.
+ * @param onEscape - What closing it does.
+ */
+export declare function useOverlayEscape(active: boolean, isTopmost: () => boolean, onEscape: () => void): void;

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

@@ -0,0 +1,34 @@
+/** `useBulmaViewport`'s answer below the tablet breakpoint. */
+export declare const MOBILE: number;
+/** Where Bulma's `widescreen`, `desktop` and `tablet` sit in `VIEWPORT_QUERIES`. */
+declare const VIEWPORT_INDEX: {
+    readonly widescreen: 1;
+    readonly desktop: 2;
+    readonly tablet: 3;
+};
+/**
+ * Which of Bulma's viewports the window is in: the index of the widest
+ * `VIEWPORT_QUERIES` entry that matches, `MOBILE` below them all, or `-1`
+ * when that isn't known (on the server, before the first layout effect, and
+ * whenever `enabled` is off, so a caller that needs no answer subscribes to
+ * nothing). It's read in a layout effect, so the first paint after hydration
+ * already has it.
+ *
+ * @function useBulmaViewport
+ * @param enabled - Whether the caller needs the viewport at all.
+ * @returns The viewport, as described above.
+ */
+export declare function useBulmaViewport(enabled: boolean): number;
+/**
+ * Whether the window is at or past one of Bulma's breakpoints, at its default
+ * width, through the one media query Bulma's mixin for it opens with, so a
+ * caller re-renders only when the window crosses that breakpoint. `null`
+ * until it's known: on the server, and before the first layout effect. Where
+ * `matchMedia` isn't there, it's `true`, the wide layout a server renders.
+ *
+ * @function useBulmaBreakpoint
+ * @param breakpoint - The breakpoint: `tablet`, `desktop` or `widescreen`.
+ * @returns Whether the window is at or past it, or `null`.
+ */
+export declare function useBulmaBreakpoint(breakpoint: keyof typeof VIEWPORT_INDEX): boolean | null;
+export {};

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

@@ -26,5 +26,8 @@ import type { RefObject } from 'react';
  * @param active - Whether what's beside it is inert.
  * @param wholePage - Whether that goes for the whole page rather than only
  * the element's siblings.
+ * @param except - Ref to an element beside it to leave reachable too, such
+ * as the overlay's own backdrop, which has to take the presses that close
+ * it rather than let them through to what's under it.
  */
-export declare function useInertSiblings(ref: RefObject<Element | null>, active: boolean, wholePage: boolean): void;
+export declare function useInertSiblings(ref: RefObject<Element | null>, active: boolean, wholePage: boolean, except?: RefObject<Element | null>): void;

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

@@ -0,0 +1,24 @@
+import type React from 'react';
+import type { RefObject } from 'react';
+/**
+ * Calls `onOutsidePress` for a `pointerdown` outside `ref`'s element while
+ * `active`, as a Popover closes on one.
+ *
+ * A press counts as inside in two ways: on the element's own path in the DOM,
+ * and anywhere in a React tree the returned handler is put on, as
+ * `onPointerDownCapture`. React's tree includes content portaled out of it,
+ * which the DOM path doesn't, and React has seen a press there by the time
+ * the document hears it.
+ *
+ * The listener is on the element's own document, an iframe's when the tree
+ * renders into one, and reads the latest `onOutsidePress` as a press
+ * arrives, so it stays put while the callback changes identity.
+ *
+ * @function useOutsidePress
+ * @param ref - Ref to the element a press inside of doesn't count.
+ * @param active - Whether to listen.
+ * @param onOutsidePress - Called with each press outside.
+ * @returns The `onPointerDownCapture` handler that marks a press in its tree
+ * as inside.
+ */
+export declare function useOutsidePress(ref: RefObject<Element | null>, active: boolean, onOutsidePress: (event: PointerEvent) => void): (event: React.PointerEvent) => void;

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

@@ -0,0 +1,44 @@
+import type { RefObject } from 'react';
+/** Options for `useOverlayFocus`. */
+export interface OverlayFocusOptions {
+    /**
+     * Whether the overlay is modal. One that isn't, opened while a modal
+     * overlay is open under it, leaves focus where it is: that overlay keeps
+     * Tab, so a Tab from this one's controls would only go back to it. It's
+     * read as the overlay opens, so a change while it's open moves nothing.
+     */
+    modal: boolean;
+    /**
+     * A value that remounts the overlay's nodes while it's open when it
+     * changes, such as a new portal target. Focus is handed back from the old
+     * nodes and moved into the new ones.
+     */
+    remountKey?: unknown;
+    /**
+     * Asked as the overlay closes, while it still holds focus: `false` leaves
+     * focus where it is, for a close that shouldn't send it back, such as one
+     * whose overlay stays on the page as something else.
+     */
+    restore?: () => boolean;
+}
+/**
+ * Moves focus into an overlay as it opens, to the first stop Tab wraps to
+ * inside `ref`'s element or the element itself, and hands it back to
+ * whatever had it as it closes, as `Modal` does. Focus goes back only while
+ * the overlay still holds it, or it's been dropped to `<body>`: closing one
+ * under another overlay mustn't pull focus out of the one on top, and focus
+ * moved out to the page stays there. The opener is found wherever it sits,
+ * inside a shadow root too, in the overlay's own document, an iframe's when
+ * it renders into one. It's read in a layout effect as the overlay opens, so
+ * before the commit's passive effects, such as one that makes the page
+ * inert. Content inside the overlay with a layout effect of its own, or an
+ * `autoFocus`, can still move focus first, and then there's no opener to go
+ * back to: focus is never handed back into the overlay that's closing.
+ *
+ * @function useOverlayFocus
+ * @param ref - Ref to the overlay's element.
+ * @param open - Whether the overlay is open.
+ * @param options - Whether it's modal, what remounts it, and whether a
+ * close hands focus back.
+ */
+export declare function useOverlayFocus(ref: RefObject<HTMLElement | null>, open: boolean, { modal, remountKey, restore }: OverlayFocusOptions): void;

package/dist/types/index.d.ts

@@ -151,6 +151,7 @@ export { useNumberFormat } from './helpers/localeFormat.js';
 export type { NumberFormatFunction } from './helpers/localeFormat.js';
 export { useFocusTrap } from './helpers/useFocusTrap.js';
 export type { UseFocusTrapOptions } from './helpers/useFocusTrap.js';
+export * from './layout/AppFrame.js';
 export * from './layout/Center.js';
 export * from './layout/Container.js';
 export * from './layout/Flex.js';

package/dist/types/layout/AppFrame.d.ts

@@ -0,0 +1,306 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+import type { NavbarBurgerProps } from '../components/Navbar.js';
+import type { ContainerBreakpoint } from './Container.js';
+/**
+ * The strings AppFrame renders, each with an English default. A key left
+ * out, or set to an empty string, keeps its default.
+ */
+export interface AppFrameLabels {
+    /**
+     * The skip link's text.
+     * @defaultValue 'Skip to main content'
+     */
+    skipLink?: string;
+    /**
+     * The nav's accessible name, when `AppFrame.Nav` has no `aria-label` or
+     * `aria-labelledby`. Leave the word "navigation" out: the role says it.
+     * @defaultValue 'Sections'
+     */
+    nav?: string;
+    /**
+     * The name of the close button at the top of the drawer.
+     * @defaultValue 'Close navigation'
+     */
+    closeNav?: string;
+    /**
+     * The burger's name, when `AppFrame.Burger` has no `aria-label`.
+     * @defaultValue 'menu', Navbar.Burger's
+     */
+    burger?: string;
+}
+/**
+ * Props for the AppFrame component. The helper props, the other attributes
+ * and the `ref` land on the root `<div>`.
+ *
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the root `<div>`.
+ */
+export interface AppFrameProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /**
+     * The parts, each a direct child: `Header`, `Nav`, `Main`, `Aside` and
+     * `Footer`, in that order, since it's the Tab order. The frame reads the
+     * `id` of `Main` and `Nav` off its children for the skip link and the
+     * burger, so a part wrapped in a component of your own takes no `id` of
+     * its own. Put the frame at the top of the page, outside any `main` or
+     * sectioning element.
+     */
+    children?: React.ReactNode;
+    /**
+     * The width from which the nav is a column beside the page. Below it, the
+     * nav is a drawer the burger opens. The stylesheet switches the layout at
+     * Bulma's breakpoint, and the script reads the width at Bulma's default
+     * breakpoints, so a theme that moves Bulma's breakpoints moves the layout
+     * but not which state the burger toggles.
+     * @defaultValue 'desktop'
+     */
+    breakpoint?: ContainerBreakpoint;
+    /**
+     * Whether the drawer is open, below the breakpoint. With it, the state is
+     * yours: update it from `onNavOpenChange`. It has no effect from the
+     * breakpoint up, where the frame asks to close it.
+     */
+    navOpen?: boolean;
+    /** Whether the drawer starts open. */
+    defaultNavOpen?: boolean;
+    /**
+     * Called with the state asked for: by the burger, `useAppFrame()`, Escape,
+     * a press outside, the close button, a followed link (see
+     * `AppFrame.Nav`'s `closeOnNavigate`), or the window being at or past the
+     * breakpoint while it's open, which closes it.
+     */
+    onNavOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the column is collapsed out of view, from the breakpoint up.
+     * With it, the state is yours: update it from `onNavCollapsedChange`. It
+     * has no effect below the breakpoint, where the drawer always shows the
+     * whole nav.
+     */
+    navCollapsed?: boolean;
+    /** Whether the column starts collapsed. */
+    defaultNavCollapsed?: boolean;
+    /** Called with the state asked for, by the burger or `useAppFrame()`. */
+    onNavCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * Renders a skip link first, visible when it has focus, that moves focus
+     * to `AppFrame.Main`. Turn it off only for a page that has its own.
+     */
+    skipLink?: boolean;
+    /** The strings the frame renders. Each one left out keeps its English default. */
+    labels?: AppFrameLabels;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * Props for AppFrame.Header, on its `<header>`, which sticks to the top.
+ *
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the `<header>`.
+ */
+export interface AppFrameHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /**
+     * Usually a `Navbar`, not `fixed`, with `AppFrame.Burger` in its
+     * `Navbar.Brand`. A header taller than Bulma's navbar sets
+     * `--bulma-app-frame-header-height` on `:root`, so the nav column, an
+     * in-page link and focus clear it.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Props for AppFrame.Nav, on its `<nav>`.
+ *
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the `<nav>`.
+ * @extraProp {string} [id] - The nav's id, which the burger's `aria-controls` points at. The frame makes one when there's none.
+ * @extraProp {string} [aria-label] - The nav's name. Without it or `aria-labelledby`, it's the frame's `labels.nav`, "Sections".
+ */
+export interface AppFrameNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /**
+     * Usually a `Menu`. A nav taller than the window scrolls on its own. With
+     * `overlay`, the rest of the frame is inert while the drawer is open, so an
+     * overlay opened from the drawer, such as a `Modal`, goes inside the nav or
+     * renders outside the frame (Modal's `portal`).
+     */
+    children?: React.ReactNode;
+    /**
+     * The column's width, and the drawer's up to the window's width less a
+     * strip of backdrop. A number is pixels, and a string any CSS length. It
+     * writes `--bulma-app-frame-nav-width`, 16rem by default.
+     */
+    width?: number | string;
+    /**
+     * Shows a backdrop behind the drawer and makes it modal: Tab stays inside,
+     * the page scroll locks, and the rest of the frame is inert, while what
+     * renders outside it, such as a Modal opened from the drawer or a toast,
+     * stays live. Without it the drawer covers the page without holding Tab,
+     * and focus can move to the page beside it. Either way focus moves in as
+     * it opens. Sidebar's `overlay`.
+     */
+    overlay?: boolean;
+    /**
+     * Closes the drawer on Escape, while it's the topmost overlay, so Escape
+     * closes one layer at a time.
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Closes the drawer on a press outside it while it's the topmost overlay:
+     * a click on the backdrop, or without `overlay` a press anywhere outside
+     * it. Focus goes back to the burger as it closes. Without `overlay`, the
+     * press's own mousedown then moves it, as on any page: to what was pressed
+     * if that takes focus, and otherwise off the burger to the page. A touch
+     * that scrolls leaves it on the burger. A press on a control whose
+     * `aria-controls` names the nav, such as the burger, is left to that
+     * control. Popover's `closeOnClickOutside`.
+     */
+    closeOnClickOutside?: boolean;
+    /**
+     * Closes the drawer when a link inside it is followed with a plain click:
+     * not with a modifier key held, and not on a link with a `target` other
+     * than `_self` or a `download`. Only a link the nav holds in the page
+     * counts, not one in a Modal or a popup it portals elsewhere. Focus goes
+     * back to the burger, and the navigation takes it from there: a router
+     * that moves focus on navigation moves it, and an in-page `#` link leaves
+     * it at its target, as it does anywhere on the page. Turn it off for a
+     * drawer of filters rather than links.
+     */
+    closeOnNavigate?: boolean;
+}
+/**
+ * Props for AppFrame.Main, on the page's one `<main>`. Don't put another
+ * `<main>` inside it. It takes your `id`, or a generated one, for the skip
+ * link, and `tabIndex={-1}` so the link can move focus to it.
+ *
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the `<main>`.
+ * @extraProp {string} [id] - Its id, which the skip link points at. The frame makes one when there's none.
+ */
+export interface AppFrameMainProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** The page. A `Container` or a `Section` inside it gives Bulma's widths and padding. */
+    children?: React.ReactNode;
+}
+/**
+ * Props for AppFrame.Aside, on its `<aside>`, a complementary landmark.
+ * Give it an `aria-label` when the page has more than one.
+ *
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the `<aside>`.
+ */
+export interface AppFrameAsideProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** What sits beside the page: an outline, details, filters. */
+    children?: React.ReactNode;
+    /**
+     * Its width from the breakpoint up; below it, the aside moves under the
+     * page. A number is pixels, and a string any CSS length. It writes
+     * `--bulma-app-frame-aside-width`, 20rem by default.
+     */
+    width?: number | string;
+}
+/**
+ * Props for AppFrame.Footer, on its `<footer>`.
+ *
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the `<footer>`.
+ */
+export interface AppFrameFooterProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Plain content, or bestax's `Footer` with `as="div"` for Bulma's footer look. */
+    children?: React.ReactNode;
+}
+/**
+ * Props for AppFrame.Burger: Navbar.Burger's, less the state the frame
+ * fills in. Its `<button>` opens and closes the drawer below the breakpoint
+ * and collapses and expands the column from it up, with `aria-expanded` and
+ * `aria-controls` following the nav. It shows at every width. Hide it from
+ * the breakpoint up with the visibility helpers when the column never
+ * collapses. Outside an AppFrame it controls nothing.
+ */
+export type AppFrameBurgerProps = Omit<NavbarBurgerProps, 'active' | 'aria-expanded' | 'aria-controls'>;
+/** What `useAppFrame()` returns. */
+export interface AppFrameState {
+    /** Whether the drawer is open. */
+    navOpen: boolean;
+    /** Asks to open or close the drawer, through `onNavOpenChange`. */
+    setNavOpen: (open: boolean) => void;
+    /** Whether the column is collapsed. */
+    navCollapsed: boolean;
+    /** Asks to collapse or expand the column, through `onNavCollapsedChange`. */
+    setNavCollapsed: (collapsed: boolean) => void;
+    /**
+     * Whether the nav is a drawer at the current width. `false` on the server
+     * and until the first layout effect has read the width.
+     */
+    isDrawer: boolean;
+    /** Toggles whichever state applies at the current width, as the burger does. */
+    toggleNav: () => void;
+    /** The nav's `id`, for a custom toggle's `aria-controls`. */
+    navId: string;
+}
+/**
+ * The top bar of an AppFrame, which sticks while the page scrolls.
+ *
+ * @function
+ * @param {AppFrameHeaderProps} props - Props for AppFrame.Header.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<header>`.
+ * @returns {JSX.Element} The rendered header.
+ */
+export declare const AppFrameHeader: React.ForwardRefExoticComponent<AppFrameHeaderProps & React.RefAttributes<HTMLElement>>;
+/**
+ * The navigation of an AppFrame: a column beside the page from the breakpoint up, and a drawer below it.
+ *
+ * @function
+ * @param {AppFrameNavProps} props - Props for AppFrame.Nav.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<nav>`.
+ * @returns {JSX.Element} The rendered nav, and the drawer's backdrop.
+ */
+export declare const AppFrameNav: React.ForwardRefExoticComponent<AppFrameNavProps & React.RefAttributes<HTMLElement>>;
+/**
+ * The page's main content in an AppFrame, which the skip link moves focus to.
+ *
+ * @function
+ * @param {AppFrameMainProps} props - Props for AppFrame.Main.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<main>`.
+ * @returns {JSX.Element} The rendered main.
+ */
+export declare const AppFrameMain: React.ForwardRefExoticComponent<AppFrameMainProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Content beside the page in an AppFrame, which moves under it below the breakpoint.
+ *
+ * @function
+ * @param {AppFrameAsideProps} props - Props for AppFrame.Aside.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<aside>`.
+ * @returns {JSX.Element} The rendered aside.
+ */
+export declare const AppFrameAside: React.ForwardRefExoticComponent<AppFrameAsideProps & React.RefAttributes<HTMLElement>>;
+/**
+ * The bottom of an AppFrame, under the page.
+ *
+ * @function
+ * @param {AppFrameFooterProps} props - Props for AppFrame.Footer.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<footer>`.
+ * @returns {JSX.Element} The rendered footer.
+ */
+export declare const AppFrameFooter: React.ForwardRefExoticComponent<AppFrameFooterProps & React.RefAttributes<HTMLElement>>;
+/**
+ * The button that opens the drawer, or collapses the column from the breakpoint up: Navbar.Burger, wired to the frame.
+ *
+ * @function
+ * @param {AppFrameBurgerProps} props - Props for AppFrame.Burger.
+ * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the `<button>`.
+ * @returns {JSX.Element} The rendered burger.
+ */
+export declare const AppFrameBurger: React.ForwardRefExoticComponent<AppFrameBurgerProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * The frame's state, for a control of your own inside it: whether the
+ * drawer is open and the column collapsed, setters that go through the
+ * frame's callbacks, and `toggleNav()`, which does what the burger does.
+ * Outside an AppFrame it's `null`, as the library's other context hooks
+ * are, so a control that can sit outside one renders a fallback or nothing.
+ *
+ * @function useAppFrame
+ * @returns The frame's state, or `null` outside an AppFrame.
+ */
+export declare function useAppFrame(): AppFrameState | null;
+export declare const AppFrame: React.ForwardRefExoticComponent<AppFrameProps & React.RefAttributes<HTMLDivElement>> & {
+    Header: React.ForwardRefExoticComponent<AppFrameHeaderProps & React.RefAttributes<HTMLElement>>;
+    Nav: React.ForwardRefExoticComponent<AppFrameNavProps & React.RefAttributes<HTMLElement>>;
+    Main: React.ForwardRefExoticComponent<AppFrameMainProps & React.RefAttributes<HTMLElement>>;
+    Aside: React.ForwardRefExoticComponent<AppFrameAsideProps & React.RefAttributes<HTMLElement>>;
+    Footer: React.ForwardRefExoticComponent<AppFrameFooterProps & React.RefAttributes<HTMLElement>>;
+    Burger: React.ForwardRefExoticComponent<AppFrameBurgerProps & React.RefAttributes<HTMLButtonElement>>;
+};
+export default AppFrame;

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

@@ -126,7 +126,7 @@ export declare const NavbarItem: PolymorphicComponent<NavbarItemOwnProps, "a">;
  * @extraProp {React.Ref<HTMLButtonElement>} [ref] - Ref forwarded to the burger button element.
  * @extraProp {'button' | 'submit' | 'reset'} [type='button'] - Button type. Defaults to `'button'`, so a burger 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'`.
  */
-export interface NavbarBurgerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+export interface NavbarBurgerProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'aria-expanded'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
     /** Additional CSS classes. */
     className?: string;
     /** Text color for the burger. */
@@ -155,11 +155,12 @@ export interface NavbarBurgerProps extends React.ButtonHTMLAttributes<HTMLButton
     'aria-label'?: string;
     /**
      * Expanded state for assistive technology. It follows `active` unless you
-     * pass `true` or `false`; a spread carrying `'aria-expanded': undefined`
+     * pass `true` or `false`, and `null` leaves it off, for a burger whose
+     * state isn't known yet; a spread carrying `'aria-expanded': undefined`
      * still follows `active`.
      * @defaultValue active
      */
-    'aria-expanded'?: boolean;
+    'aria-expanded'?: boolean | null;
     /** Click handler. */
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }

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

@@ -28,3 +28,20 @@ export declare const isModalOverlayOpen: () => boolean;
  * above this overlay.
  */
 export declare function useOverlayStack(inStack: boolean, modal?: boolean): (among?: 'modal') => boolean;
+/**
+ * Calls `onEscape` for an Escape while `active` and the overlay is the
+ * topmost one, as `isTopmost` (from `useOverlayStack`) says, and marks the key
+ * used with `preventDefault()`, so nothing under it acts on it too.
+ *
+ * It listens on `window`, so everything inside the overlay has had the key
+ * first, and an Escape something there used, such as a popup closing, is
+ * left to it. The listener stays put while `onEscape` changes identity, as an
+ * inline one does on every render of the parent: it reads the latest one as
+ * the key arrives.
+ *
+ * @function useOverlayEscape
+ * @param active - Whether the overlay is open and closes on Escape.
+ * @param isTopmost - The overlay's check from `useOverlayStack`.
+ * @param onEscape - What closing it does.
+ */
+export declare function useOverlayEscape(active: boolean, isTopmost: () => boolean, onEscape: () => void): void;

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

@@ -0,0 +1,34 @@
+/** `useBulmaViewport`'s answer below the tablet breakpoint. */
+export declare const MOBILE: number;
+/** Where Bulma's `widescreen`, `desktop` and `tablet` sit in `VIEWPORT_QUERIES`. */
+declare const VIEWPORT_INDEX: {
+    readonly widescreen: 1;
+    readonly desktop: 2;
+    readonly tablet: 3;
+};
+/**
+ * Which of Bulma's viewports the window is in: the index of the widest
+ * `VIEWPORT_QUERIES` entry that matches, `MOBILE` below them all, or `-1`
+ * when that isn't known (on the server, before the first layout effect, and
+ * whenever `enabled` is off, so a caller that needs no answer subscribes to
+ * nothing). It's read in a layout effect, so the first paint after hydration
+ * already has it.
+ *
+ * @function useBulmaViewport
+ * @param enabled - Whether the caller needs the viewport at all.
+ * @returns The viewport, as described above.
+ */
+export declare function useBulmaViewport(enabled: boolean): number;
+/**
+ * Whether the window is at or past one of Bulma's breakpoints, at its default
+ * width, through the one media query Bulma's mixin for it opens with, so a
+ * caller re-renders only when the window crosses that breakpoint. `null`
+ * until it's known: on the server, and before the first layout effect. Where
+ * `matchMedia` isn't there, it's `true`, the wide layout a server renders.
+ *
+ * @function useBulmaBreakpoint
+ * @param breakpoint - The breakpoint: `tablet`, `desktop` or `widescreen`.
+ * @returns Whether the window is at or past it, or `null`.
+ */
+export declare function useBulmaBreakpoint(breakpoint: keyof typeof VIEWPORT_INDEX): boolean | null;
+export {};

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

@@ -26,5 +26,8 @@ import type { RefObject } from 'react';
  * @param active - Whether what's beside it is inert.
  * @param wholePage - Whether that goes for the whole page rather than only
  * the element's siblings.
+ * @param except - Ref to an element beside it to leave reachable too, such
+ * as the overlay's own backdrop, which has to take the presses that close
+ * it rather than let them through to what's under it.
  */
-export declare function useInertSiblings(ref: RefObject<Element | null>, active: boolean, wholePage: boolean): void;
+export declare function useInertSiblings(ref: RefObject<Element | null>, active: boolean, wholePage: boolean, except?: RefObject<Element | null>): void;

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

@@ -0,0 +1,24 @@
+import type React from 'react';
+import type { RefObject } from 'react';
+/**
+ * Calls `onOutsidePress` for a `pointerdown` outside `ref`'s element while
+ * `active`, as a Popover closes on one.
+ *
+ * A press counts as inside in two ways: on the element's own path in the DOM,
+ * and anywhere in a React tree the returned handler is put on, as
+ * `onPointerDownCapture`. React's tree includes content portaled out of it,
+ * which the DOM path doesn't, and React has seen a press there by the time
+ * the document hears it.
+ *
+ * The listener is on the element's own document, an iframe's when the tree
+ * renders into one, and reads the latest `onOutsidePress` as a press
+ * arrives, so it stays put while the callback changes identity.
+ *
+ * @function useOutsidePress
+ * @param ref - Ref to the element a press inside of doesn't count.
+ * @param active - Whether to listen.
+ * @param onOutsidePress - Called with each press outside.
+ * @returns The `onPointerDownCapture` handler that marks a press in its tree
+ * as inside.
+ */
+export declare function useOutsidePress(ref: RefObject<Element | null>, active: boolean, onOutsidePress: (event: PointerEvent) => void): (event: React.PointerEvent) => void;

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

@@ -0,0 +1,44 @@
+import type { RefObject } from 'react';
+/** Options for `useOverlayFocus`. */
+export interface OverlayFocusOptions {
+    /**
+     * Whether the overlay is modal. One that isn't, opened while a modal
+     * overlay is open under it, leaves focus where it is: that overlay keeps
+     * Tab, so a Tab from this one's controls would only go back to it. It's
+     * read as the overlay opens, so a change while it's open moves nothing.
+     */
+    modal: boolean;
+    /**
+     * A value that remounts the overlay's nodes while it's open when it
+     * changes, such as a new portal target. Focus is handed back from the old
+     * nodes and moved into the new ones.
+     */
+    remountKey?: unknown;
+    /**
+     * Asked as the overlay closes, while it still holds focus: `false` leaves
+     * focus where it is, for a close that shouldn't send it back, such as one
+     * whose overlay stays on the page as something else.
+     */
+    restore?: () => boolean;
+}
+/**
+ * Moves focus into an overlay as it opens, to the first stop Tab wraps to
+ * inside `ref`'s element or the element itself, and hands it back to
+ * whatever had it as it closes, as `Modal` does. Focus goes back only while
+ * the overlay still holds it, or it's been dropped to `<body>`: closing one
+ * under another overlay mustn't pull focus out of the one on top, and focus
+ * moved out to the page stays there. The opener is found wherever it sits,
+ * inside a shadow root too, in the overlay's own document, an iframe's when
+ * it renders into one. It's read in a layout effect as the overlay opens, so
+ * before the commit's passive effects, such as one that makes the page
+ * inert. Content inside the overlay with a layout effect of its own, or an
+ * `autoFocus`, can still move focus first, and then there's no opener to go
+ * back to: focus is never handed back into the overlay that's closing.
+ *
+ * @function useOverlayFocus
+ * @param ref - Ref to the overlay's element.
+ * @param open - Whether the overlay is open.
+ * @param options - Whether it's modal, what remounts it, and whether a
+ * close hands focus back.
+ */
+export declare function useOverlayFocus(ref: RefObject<HTMLElement | null>, open: boolean, { modal, remountKey, restore }: OverlayFocusOptions): void;