@usableapp/cardds 0.2.2 → 0.3.0

package/dist/actions/Dropdown.d.ts

@@ -1,38 +1,55 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { type IconName } from '../type/Icon.js';
-export interface DropdownProps extends ComponentPropsWithoutRef<'div'> {
+export interface DropdownProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue'> {
     /** unique id — the popover menu's id the trigger targets */
     id: string;
-    /** the current value's label shown in the pill */
-    label: ReactNode;
+    /** CONTROLLED: the chosen MenuItem's `value`. The app owns it — pair it with `onChange`. */
+    value?: string;
+    /** UNCONTROLLED: the value it starts with; the dropdown then keeps its own */
+    defaultValue?: string;
+    /** a MenuItem was picked */
+    onChange?: (value: string) => void;
+    /** what the pill says; default = the chosen MenuItem's own label */
+    label?: ReactNode;
     /** right-aligned trigger: the panel grows leftwards (in TopBar actions) */
     end?: boolean;
-    /** MenuItems */
+    /** MenuItems, each with a `value` */
     children?: ReactNode;
 }
 /**
- * Dropdown — THE select: a pill trigger + a Menu popover anchored under it (native popover: light dismiss, Esc).
- * Never a native `<select>`. Children are MenuItems; cardds.js copies the picked item's label into the pill
- * and fires "change" on the Dropdown. In a FilterRow dropdowns share the width.
+ * Dropdown — THE select: a pill trigger + its Menu popover anchored under it (native popover: light dismiss, Esc). Never a native
+ * `<select>`. ONE component, like `<select>` is — the pill and the panel are its own anatomy. It holds a VALUE, controlled like an
+ * input: `value` + `onChange`, or `defaultValue`. Children are MenuItems with a `value`; the chosen one is marked and names the pill.
+ * In a FilterRow dropdowns share the width.
  */
-export declare function Dropdown({ id, label, end, className, children, ...rest }: DropdownProps): import("react").JSX.Element;
-export interface MenuProps extends Omit<ComponentPropsWithoutRef<'div'>, 'popover'> {
-    /** render as a popover panel (needs an id and an invoker with popoverTarget); omit for an inline menu card */
+export declare function Dropdown({ id, value, defaultValue, onChange, label, end, className, children, ...rest }: DropdownProps): import("react").JSX.Element;
+export interface MenuProps extends Omit<ComponentPropsWithoutRef<'div'>, 'popover' | 'onChange' | 'defaultValue'> {
+    /** render as a popover panel: give it an `id`, and ANY button opens it with the platform's own `popoverTarget={id}` — the Menu does
+     *  not know which. Omit for an inline menu card */
     popover?: boolean;
-    /** an ACTIONS menu — things to do, not a value to hold: no item stays current */
+    /** an ACTIONS menu — things to do, not a value to hold: no item stays current; each MenuItem has the app's `onClick` */
     actions?: boolean;
+    /** a VALUE menu, controlled: the chosen MenuItem's `value` (+ `onChange`) */
+    value?: string;
+    /** …or the value it starts with */
+    defaultValue?: string;
+    onChange?: (value: string) => void;
     /** the trigger sits at the far right: the panel grows leftwards */
     end?: boolean;
 }
-/** Menu — a card of MenuItems: a popover anchored to its button, or inline rows of icon + label. `actions` for a to-do list (IconBtn's), plain for a value (Dropdown's). */
-export declare function Menu({ popover, actions, end, className, ...rest }: MenuProps): import("react").JSX.Element;
+/**
+ * Menu — a card of MenuItems: a popover, or inline rows of icon + label. A COMPONENT on its own — what opens a popover Menu is any
+ * button carrying `popoverTarget={its id}` (HTML's own link; the panel anchors to that button). `actions` = a to-do list (plain
+ * `onClick`s); otherwise it holds a value (`value` + `onChange`, or `defaultValue`). Its one behaviour: picking an item closes it.
+ */
+export declare function Menu({ popover, actions, value, defaultValue, onChange, end, className, onClick, ...rest }: MenuProps): import("react").JSX.Element;
 export interface MenuItemProps extends ComponentPropsWithoutRef<'button'> {
-    /** the value cardds.js reports on change */
+    /** in a value Menu / Dropdown: what picking this row reports */
     value?: string;
-    /** the current choice */
+    /** mark it current yourself (default: it is, when its `value` is the menu's) */
     current?: boolean;
     /** a leading icon */
     icon?: IconName;
 }
-/** MenuItem — one row in a Menu (48px tall): optional icon, label; the current one is filled. */
-export declare function MenuItem({ value, current, icon, className, children, ...rest }: MenuItemProps): import("react").JSX.Element;
+/** MenuItem — one row in a Menu (48px tall): optional icon, label; the current one is filled. In an `actions` Menu give it an `onClick`. */
+export declare function MenuItem({ value, current, icon, className, children, onClick, ...rest }: MenuItemProps): import("react").JSX.Element;

package/dist/actions/Dropdown.js

@@ -1,19 +1,49 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, createContext, isValidElement, useContext, useRef, useState } from 'react';
 import { cx } from '../cx.js';
 import { Icon } from '../type/Icon.js';
+/* what a Menu tells its items: the value it holds (so the matching item marks itself current) and how to pick one */
+const MenuContext = createContext(null);
+/* a menu's value is controlled (`value` + `onChange`) or its own (`defaultValue`) — like an input */
+function useValue(value, defaultValue, onChange) {
+    const [inner, setInner] = useState(defaultValue);
+    const current = value ?? inner;
+    const pick = (next) => { if (value === undefined)
+        setInner(next); if (next !== current)
+        onChange?.(next); };
+    return [current, pick];
+}
 /**
- * Dropdown — THE select: a pill trigger + a Menu popover anchored under it (native popover: light dismiss, Esc).
- * Never a native `<select>`. Children are MenuItems; cardds.js copies the picked item's label into the pill
- * and fires "change" on the Dropdown. In a FilterRow dropdowns share the width.
+ * Dropdown — THE select: a pill trigger + its Menu popover anchored under it (native popover: light dismiss, Esc). Never a native
+ * `<select>`. ONE component, like `<select>` is — the pill and the panel are its own anatomy. It holds a VALUE, controlled like an
+ * input: `value` + `onChange`, or `defaultValue`. Children are MenuItems with a `value`; the chosen one is marked and names the pill.
+ * In a FilterRow dropdowns share the width.
  */
-export function Dropdown({ id, label, end, className, children, ...rest }) {
-    return (_jsxs("div", { className: cx('dropdown', end && 'dropdown--end', className), ...rest, children: [_jsxs("button", { type: "button", className: "dropdown__btn", popoverTarget: id, children: [_jsx("span", { className: "dropdown__label", children: label }), _jsx(Icon, { name: "chevron-down", size: "xs" })] }), _jsx("div", { className: "menu", id: id, popover: "auto", children: children })] }));
+export function Dropdown({ id, value, defaultValue, onChange, label, end, className, children, ...rest }) {
+    const [current, pick] = useValue(value, defaultValue, onChange);
+    const chosen = Children.toArray(children).find((c) => isValidElement(c) && c.props.value === current);
+    return (_jsxs("div", { className: cx('dropdown', end && 'dropdown--end', className), "data-value": current, ...rest, children: [_jsxs("button", { type: "button", className: "dropdown__btn", popoverTarget: id, children: [_jsx("span", { className: "dropdown__label", children: label ?? (isValidElement(chosen) ? chosen.props.children : null) }), _jsx(Icon, { name: "chevron-down", size: "xs" })] }), _jsx(Menu, { popover: true, id: id, value: current, onChange: pick, children: children })] }));
 }
-/** Menu — a card of MenuItems: a popover anchored to its button, or inline rows of icon + label. `actions` for a to-do list (IconBtn's), plain for a value (Dropdown's). */
-export function Menu({ popover, actions, end, className, ...rest }) {
-    return _jsx("div", { className: cx('menu', actions && 'menu--actions', end && 'menu--end', className), popover: popover ? 'auto' : undefined, ...rest });
+/**
+ * Menu — a card of MenuItems: a popover, or inline rows of icon + label. A COMPONENT on its own — what opens a popover Menu is any
+ * button carrying `popoverTarget={its id}` (HTML's own link; the panel anchors to that button). `actions` = a to-do list (plain
+ * `onClick`s); otherwise it holds a value (`value` + `onChange`, or `defaultValue`). Its one behaviour: picking an item closes it.
+ */
+export function Menu({ popover, actions, value, defaultValue, onChange, end, className, onClick, ...rest }) {
+    const ref = useRef(null);
+    const [current, pick] = useValue(value, defaultValue, onChange);
+    const click = (e) => {
+        onClick?.(e);
+        const el = ref.current;
+        if (el && e.target.closest('.menu__item') && el.matches(':popover-open'))
+            el.hidePopover();
+    };
+    return (_jsx(MenuContext.Provider, { value: actions ? null : { value: current, pick }, children: _jsx("div", { ref: ref, className: cx('menu', actions && 'menu--actions', end && 'menu--end', className), popover: popover ? 'auto' : undefined, onClick: click, ...rest }) }));
 }
-/** MenuItem — one row in a Menu (48px tall): optional icon, label; the current one is filled. */
-export function MenuItem({ value, current, icon, className, children, ...rest }) {
-    return (_jsxs("button", { type: "button", className: cx('menu__item', className), "data-value": value, "aria-current": current ? 'true' : undefined, ...rest, children: [icon && _jsx(Icon, { name: icon }), children] }));
+/** MenuItem — one row in a Menu (48px tall): optional icon, label; the current one is filled. In an `actions` Menu give it an `onClick`. */
+export function MenuItem({ value, current, icon, className, children, onClick, ...rest }) {
+    const menu = useContext(MenuContext);
+    const on = current ?? (menu?.value !== undefined && value !== undefined && menu.value === value);
+    return (_jsxs("button", { type: "button", className: cx('menu__item', className), "data-value": value, "aria-current": on ? 'true' : undefined, onClick: (e) => { onClick?.(e); if (!e.defaultPrevented && value !== undefined)
+            menu?.pick?.(value); }, ...rest, children: [icon && _jsx(Icon, { name: icon }), children] }));
 }

package/dist/actions/IconBtn.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { type ComponentPropsWithoutRef } from 'react';
 import { type IconName } from '../type/Icon.js';
 export interface IconBtnProps extends ComponentPropsWithoutRef<'button'> {
     /** the accessible name — required, the button has no text */
@@ -11,13 +11,300 @@ export interface IconBtnProps extends ComponentPropsWithoutRef<'button'> {
     invert?: boolean;
     /** a link styled as a round button */
     href?: string;
-    /** an actions menu the button opens (MenuItems) — the popover anchored under it, growing leftwards (`menuStart` for a left-side button); needs `menuId` */
-    menu?: ReactNode;
-    /** the menu popover's id (unique on the page) */
-    menuId?: string;
-    /** the button sits at the left: the panel grows rightwards */
-    menuStart?: boolean;
 }
 /** IconBtn — the round icon button: `sm` in heads and bars, full size in rows and composers, `invert` for the one filled move.
- *  With `menu` it gives the member options the way a Dropdown does — an actions Menu (edit, share, remove…) for the card or sheet it sits in. */
-export declare function IconBtn({ label, icon, sm, invert, href, menu, menuId, menuStart, className, type, children, ...rest }: IconBtnProps): import("react").JSX.Element;
+ *  It is a button and nothing more: to open a Menu, give it the platform's `popoverTarget={the Menu's id}` and render that `<Menu popover actions id>`
+ *  wherever you like — the panel anchors to the button that opened it. To open anything else, `onClick`. */
+export declare function IconBtn({ label, icon, sm, invert, href, className, type, children, ...rest }: IconBtnProps): import("react").DetailedReactHTMLElement<{
+    form?: string | undefined | undefined;
+    slot?: string | undefined | undefined;
+    style?: import("react").CSSProperties | undefined;
+    title?: string | undefined | undefined;
+    suppressHydrationWarning?: boolean | undefined | undefined;
+    color?: string | undefined | undefined;
+    id?: string | undefined | undefined;
+    lang?: string | undefined | undefined;
+    name?: string | undefined | undefined;
+    nonce?: string | undefined | undefined;
+    part?: string | undefined | undefined;
+    role?: import("react").AriaRole | undefined;
+    tabIndex?: number | undefined | undefined;
+    "aria-activedescendant"?: string | undefined | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+    "aria-braillelabel"?: string | undefined | undefined;
+    "aria-brailleroledescription"?: string | undefined | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-colcount"?: number | undefined | undefined;
+    "aria-colindex"?: number | undefined | undefined;
+    "aria-colindextext"?: string | undefined | undefined;
+    "aria-colspan"?: number | undefined | undefined;
+    "aria-controls"?: string | undefined | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+    "aria-describedby"?: string | undefined | undefined;
+    "aria-description"?: string | undefined | undefined;
+    "aria-details"?: string | undefined | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+    "aria-errormessage"?: string | undefined | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+    "aria-keyshortcuts"?: string | undefined | undefined;
+    "aria-label": string;
+    "aria-labelledby"?: string | undefined | undefined;
+    "aria-level"?: number | undefined | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+    "aria-owns"?: string | undefined | undefined;
+    "aria-placeholder"?: string | undefined | undefined;
+    "aria-posinset"?: number | undefined | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined | undefined;
+    "aria-rowcount"?: number | undefined | undefined;
+    "aria-rowindex"?: number | undefined | undefined;
+    "aria-rowindextext"?: string | undefined | undefined;
+    "aria-rowspan"?: number | undefined | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+    "aria-valuemax"?: number | undefined | undefined;
+    "aria-valuemin"?: number | undefined | undefined;
+    "aria-valuenow"?: number | undefined | undefined;
+    "aria-valuetext"?: string | undefined | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLButtonElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLButtonElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLButtonElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLButtonElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLButtonElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLButtonElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
+    onChange?: import("react").ChangeEventHandler<HTMLButtonElement, Element> | undefined;
+    onChangeCapture?: import("react").ChangeEventHandler<HTMLButtonElement, Element> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLButtonElement> | undefined;
+    onBeforeInputCapture?: import("react").InputEventHandler<HTMLButtonElement> | undefined;
+    onInput?: import("react").InputEventHandler<HTMLButtonElement> | undefined;
+    onInputCapture?: import("react").InputEventHandler<HTMLButtonElement> | undefined;
+    onReset?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onResetCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSubmit?: import("react").SubmitEventHandler<HTMLButtonElement> | undefined;
+    onSubmitCapture?: import("react").SubmitEventHandler<HTMLButtonElement> | undefined;
+    onInvalid?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onInvalidCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLButtonElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLButtonElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLButtonElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLButtonElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLButtonElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLButtonElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onDrag?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragEnd?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragStart?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLButtonElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLButtonElement> | undefined;
+    onScrollEnd?: import("react").UIEventHandler<HTMLButtonElement> | undefined;
+    onScrollEndCapture?: import("react").UIEventHandler<HTMLButtonElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLButtonElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLButtonElement> | undefined;
+    onAnimationStart?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onToggle?: import("react").ToggleEventHandler<HTMLButtonElement> | undefined;
+    onBeforeToggle?: import("react").ToggleEventHandler<HTMLButtonElement> | undefined;
+    onTransitionCancel?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionRun?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionStart?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    key?: import("react").Key | null | undefined;
+    defaultChecked?: boolean | undefined | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined | undefined;
+    accessKey?: string | undefined | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+    autoFocus?: boolean | undefined | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+    hidden?: boolean | undefined | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    radioGroup?: string | undefined | undefined;
+    about?: string | undefined | undefined;
+    content?: string | undefined | undefined;
+    datatype?: string | undefined | undefined;
+    inlist?: any;
+    prefix?: string | undefined | undefined;
+    property?: string | undefined | undefined;
+    rel?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
+    rev?: string | undefined | undefined;
+    typeof?: string | undefined | undefined;
+    vocab?: string | undefined | undefined;
+    autoCorrect?: string | undefined | undefined;
+    autoSave?: string | undefined | undefined;
+    itemProp?: string | undefined | undefined;
+    itemScope?: boolean | undefined | undefined;
+    itemType?: string | undefined | undefined;
+    itemID?: string | undefined | undefined;
+    itemRef?: string | undefined | undefined;
+    results?: number | undefined | undefined;
+    security?: string | undefined | undefined;
+    unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+    is?: string | undefined | undefined;
+    exportparts?: string | undefined | undefined;
+    disabled?: boolean | undefined | undefined;
+    formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
+    formEncType?: string | undefined | undefined;
+    formMethod?: string | undefined | undefined;
+    formNoValidate?: boolean | undefined | undefined;
+    formTarget?: string | undefined | undefined;
+    value?: string | number | readonly string[] | undefined;
+    href: string | undefined;
+    type: "button" | "reset" | "submit" | undefined;
+    className: string;
+}, HTMLElement>;

package/dist/actions/IconBtn.js

@@ -1,13 +1,11 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement } from 'react';
-import { Menu } from './Dropdown.js';
 import { cx } from '../cx.js';
 import { Icon } from '../type/Icon.js';
 /** IconBtn — the round icon button: `sm` in heads and bars, full size in rows and composers, `invert` for the one filled move.
- *  With `menu` it gives the member options the way a Dropdown does — an actions Menu (edit, share, remove…) for the card or sheet it sits in. */
-export function IconBtn({ label, icon, sm, invert, href, menu, menuId, menuStart, className, type, children, ...rest }) {
-    const btn = createElement(href ? 'a' : 'button', { href, type: href ? undefined : type ?? 'button', 'aria-label': label, popoverTarget: menu ? menuId : undefined, className: cx('icon-btn', sm && 'icon-btn--sm', invert && 'icon-btn--invert', className), ...rest }, icon ? _jsx(Icon, { name: icon, size: sm ? 'sm' : 'md' }) : children);
-    if (!menu)
-        return btn;
-    return (_jsxs(_Fragment, { children: [btn, _jsx(Menu, { popover: true, actions: true, end: !menuStart, id: menuId, children: menu })] }));
+ *  It is a button and nothing more: to open a Menu, give it the platform's `popoverTarget={the Menu's id}` and render that `<Menu popover actions id>`
+ *  wherever you like — the panel anchors to the button that opened it. To open anything else, `onClick`. */
+export function IconBtn({ label, icon, sm, invert, href, className, type, children, ...rest }) {
+    const btn = createElement(href ? 'a' : 'button', { href, type: href ? undefined : type ?? 'button', 'aria-label': label, className: cx('icon-btn', sm && 'icon-btn--sm', invert && 'icon-btn--invert', className), ...rest }, icon ? _jsx(Icon, { name: icon, size: sm ? 'sm' : 'md' }) : children);
+    return btn;
 }

package/dist/cardds.css

@@ -90,6 +90,8 @@
   --chip-h: calc(var(--tap-base) * 19 / 24);  /* 38 chip height */
   --bar-h: calc(var(--tap-base) * 4 / 3);     /* 64 float bar, day cell, deck actions */
   --header-h: calc(var(--tap-base) * 5 / 4);  /* 60 top bar — .topbar and .appbar alike */
+  --card-pad-rest: var(--sp-5);  /* 20 a card's padding before any variant — .card publishes it as --card-pad; the sheet's peek strip is built from it where no card is in scope */
+  --card-gap-rest: var(--sp-4);  /* 16 …and its gap */
   --screen-pad: var(--sp-4); /* 16 the screen's inset — .sheet-stack cancels it */
   --map-ring: calc(var(--tap-base) * 10 / 3);    /* the rough-area ring on a map (sheet.css .map__ring) — a neighbourhood, not a house */
   --fab: calc(var(--tap-base) * 3 / 2); /* 72 square floating action */
@@ -521,8 +523,8 @@ button { font: inherit; cursor: pointer; }
 .card {
   --card-bg: var(--card-1-bg);   /* the slot, readable by children (avatar rings, fold) */
   --card-ink: var(--card-1-ink);
-  --card-pad: var(--sp-5);       /* published so .bleed can cancel it exactly */
-  --card-gap: var(--sp-4);       /* published so a sheet's peek strip (sheet.css) is exact */
+  --card-pad: var(--card-pad-rest);       /* published so .bleed can cancel it exactly */
+  --card-gap: var(--card-gap-rest);       /* published so a sheet's peek strip (sheet.css) is exact */
   background: var(--card-bg);
   color: var(--card-ink);
   border: var(--border-w) solid var(--card-border);
@@ -1105,7 +1107,7 @@ button { font: inherit; cursor: pointer; }
    page. Many sheets stacked as the app's menu are the other system,
    .sheet-stack (stack.css): the same material, its own class and file.
 
-   <article class="card sheet sheet--half" data-sheet-states="peek half 3q full">
+   <article class="card sheet sheet--half">
    A tap on the handle TOGGLES the sheet between its own state and peek
    (Lh 2026-09-16) — never a step-by-step climb; a drag snaps to any of
    the listed states, and the state it lands on becomes the one a tap
@@ -1123,14 +1125,12 @@ button { font: inherit; cursor: pointer; }
    ============================================================ */
 
 .sheet {
-  --_handle: var(--sp-1);
   /* the strip a peeked sheet shows: the card's own top padding, the handle,
      the gap, one title row (--tap — the head rule below makes every head at
      least that tall) and the gap under it, so the cut lands exactly where
      the first control starts and nothing of it leaks through. Published
      (and registered in tokens.css) so a sheet whose head is taller can
      retune it: .my-sheet { --sheet-peek: … } */
-  --sheet-peek: calc(var(--card-pad) + var(--_handle) + 2 * var(--card-gap) + var(--tap));
   --sheet-half: 0.5;              /* a share of the sheet's own height */
   --sheet-3q: 0.25;               /* three quarters showing: slid by a quarter */
   /* the sheet's own height, seen from inside it: the box it slides in is the
@@ -1165,14 +1165,16 @@ button { font: inherit; cursor: pointer; }
 .sheet--half { --_y: calc(var(--sheet-half) * 100%); --_cover: calc(var(--sheet-half) * var(--_box)); }
 .sheet--3q { --_y: calc(var(--sheet-3q) * 100%); --_cover: calc(var(--sheet-3q) * var(--_box)); }
 .sheet--peek { --_y: calc(100% - var(--sheet-peek)); --_cover: calc(var(--_box) - var(--sheet-peek)); }
+/* --sheet-peek is declared on the BOX the sheet slides in, not on the sheet: the words behind a peeked sheet
+   have to read it too (step.css keeps that much room under them), and a token only flows down. The sheet
+   inherits it. A sheet whose head is taller retunes it on the box. */
+:is(.step, .sheet-stage) { --_handle: var(--sp-1); --sheet-peek: calc(var(--card-pad-rest) + var(--_handle) + 2 * var(--card-gap-rest) + var(--tap)); }
+
 /* ---- called sheets (Lh, 2026-09-20): a .step whose .base-content has buttons that each CALL a sheet ----
    .sheet--away = not on the screen: slid all the way out (translate, like every state — the material never
    changes), and hidden once it has left so its shadow does not lie on the step's bottom edge; write it
-   with `inert`. A button names its sheet — <button aria-controls="when"> … <article id="when" class="card
-   sheet sheet--away" inert data-sheet-states="peek full"> — and cardds.js does the rest: a tap slides that
-   sheet up to full and sends any other one away; the handle takes it down to peek, never further, so the
-   words and the other buttons are back in reach; the same button again raises it from peek to full.
-   Nothing waits at peek before the first call. No bar on such a screen (actions.css).
+   with `inert` (the React Sheet does). WHO brings it onto the screen is the app's business — a button, a route:
+   cardds ties no component to another. Nothing waits at peek before the first call.
    WHAT IT IS FOR: the base offers WAYS IN — sign in · new phone · join — and each button calls a sheet
    that holds that way's WHOLE form, its submit on the sheet's foot, leading to the next page. The base
    carries no control. It is NOT for a form taken apart — one sheet per field, a "send" left on the base:
@@ -1497,8 +1499,9 @@ button { font: inherit; cursor: pointer; }
 :has(> .action-bar) .step { margin-bottom: calc(var(--bar-reserve) + var(--kb, 0rem)); }
 /* LAYERS (Lh, 2026-09-20): the base, then the sheet over it, then the top bar. A bar is the BASE's — the
    move of a page of words — so a step with a sheet has NO bar: the sheet finishes on its own .card__foot
-   (sheet.css), and a form lives whole in ONE sheet, never item by item on the base. Should a bar be written
-   beside a sheet anyway it stands down (actions.css + cardds.js) — a net for a mistake, not a layout. */
+   (sheet.css), and a form lives whole in ONE sheet, never item by item on the base. That is how cardds's
+   own screens are composed (the guide); the framework does not police it — a component never changes
+   because another one is there. */
 
 /* the reading block: a .base-content (base.css) — the same words-on-the-base
    block as anywhere else (it was .step__card, and a .card before 2026-09-16;
@@ -1517,11 +1520,10 @@ button { font: inherit; cursor: pointer; }
   color: var(--on-surface);
 }
 /* the reading block is the .base-content — or the .pages that holds several of them, a walk of words
-   (card.css). --sheet-room: the strip a CALLED sheet keeps at peek (sheet.css, "called sheets"), published
-   on the step by cardds.js while one is on the screen, so the buttons under it can scroll clear of it;
-   nothing without one. */
+   (card.css). Behind a PEEKED sheet the words keep the strip's room under them, so whatever is down there
+   (the buttons that call the other sheets) scrolls clear of it — CSS alone: the box declares --sheet-peek. */
+.step:has(> .sheet--peek) > :is(.base-content, .pages) { padding-bottom: var(--sheet-peek); }
 .step > :is(.base-content, .pages) {
-  padding-bottom: var(--sheet-room, 0rem);
   flex: 0 1 auto;
 }
 .step > :is(.base-content, .pages) {
@@ -1896,14 +1898,9 @@ button { font: inherit; cursor: pointer; }
      <button class="icon-btn icon-btn--invert" aria-label="ถัดไป">…</button>
    </div>   — or the same two in an .action-bar__tier--pager under a control  */
 .action-bar--pager { align-items: center; }
-/* The bar belongs to the BASE (Lh, 2026-09-20): it is the move of a page of words — a pager turning
-   them, or one wide button. It is never in front of a sheet: a sheet that is on the screen covers it
-   (step.css, "layers"), a peeking one included, and the button that finishes a sheet is the sheet's own
-   foot (sheet.css). So a pager never works beside a sheet — that screen has work that cannot be walked
-   past — and neither does any other bar: while a sheet is on (only .sheet--away, a sheet not called yet,
-   is not), the bar takes no pointer here and cardds.js makes it inert, so the keyboard cannot reach what
-   the eye cannot see. */
-:has(.step > .sheet:not(.sheet--away)) > .action-bar { pointer-events: none; }
+/* The bar belongs to the BASE: the move of a page of words — a pager turning them, or one wide button. A screen
+   with a sheet finishes on the sheet's own foot instead (sheet.css). Guidance for composing, not a rule the
+   CSS enforces: a component never changes because another one is there. */
 /* the page dots: under the card in a .screen__centre group; tight gaps */
 .pager__at { flex: 0 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; gap: var(--sp-1); }
 .pager__at > * {