@bgub/fig-headless 0.0.0-stage → 0.1.0-alpha.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+## @bgub/fig-headless@0.1.0-alpha.0 (alpha)
+
+### Introduce Fig Headless as an npm alpha
+
+Publish accessible, unstyled widget hooks and render-callback components through
+individual package entries, including optional popup positioning and tabs
+indicator helpers. Include production builds, development diagnostics, and
+TypeScript declarations.
+
+The first public release is `0.1.0-alpha.0` under the `alpha` tag and requires
+Fig and Fig DOM 2.x. Alpha releases may change APIs and behavior. Automated
+interaction and hydration tests cover the widgets; full cross-browser widget
+coverage and manual screen-reader verification remain gates for stable releases.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Ben Gubler
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,596 @@
-# Temporary Holding Version
+# Fig Headless
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Accessible, unstyled widgets built around Fig host mixins. Widget roots own
+state and coordination; applications keep ownership of the rendered host tree.
+
+Status: alpha. APIs and behavior may change between alpha releases. The first
+public release is `0.1.0-alpha.0`, independently versioned from Fig and published
+to npm under the `alpha` tag. Fig Headless is not published to JSR.
+
+## Installation
+
+```sh
+pnpm add @bgub/fig@^2.0.0 @bgub/fig-dom@^2.0.0 @bgub/fig-headless@alpha
+```
+
+Import individual widget entries, for example `@bgub/fig-headless/tabs`.
+There is no root entry. Fig 2.0 is required: the widgets use its committed host
+binding APIs. Use Fig's Vite integration to select development diagnostics;
+other bundlers should enable the `fig-development` export condition during
+development and omit it for production.
+
+Pin an exact alpha version when reproducible upgrades matter. This release is
+for early integration feedback, not a stable accessibility or API guarantee.
+Automated tests cover semantics, keyboard interaction, focus, forms, and
+hydration. Selected popup and focus scenarios run in Chromium, Firefox, and
+WebKit; the complete widget suite is not yet covered in all three engines.
+Manual screen-reader verification has not yet been recorded. See the
+[accessibility verification matrix](https://github.com/bgub/fig/blob/main/docs/concepts/widgets.md#accessibility-verification-matrix)
+for coverage and the gates for a stable release.
+
+## Adapting The Source
+
+Applications that need to change behavior can still copy
+`packages/fig-headless/src` from a pinned Fig commit. Preserve its directory
+structure and shared `internal` modules, retain the relevant tests, and replace
+the package imports below with application-local imports. Copied code and its
+accessibility behavior become the application's responsibility.
+
+## Tabs
+
+`useTabs` returns host-part mixins for the caller's own elements:
+
+```tsx
+import { useTabs } from "@bgub/fig-headless/tabs";
+
+export function SettingsTabs() {
+  const tabs = useTabs({ defaultValue: "account" });
+
+  return (
+    <div>
+      <div aria-label="Settings" mix={tabs.list({ activateOnFocus: true })}>
+        <button mix={tabs.tab("account")}>Account</button>
+        <button mix={tabs.tab("security")}>Security</button>
+      </div>
+      <section class="panel" mix={tabs.panel("account")}>
+        Account settings
+      </section>
+      <section class="panel" mix={tabs.panel("security")}>
+        Security settings
+      </section>
+    </div>
+  );
+}
+```
+
+`Tabs` is the same widget as a component, for markup that is not already a
+component of its own. Selection re-renders the callback's output rather than
+the caller:
+
+```tsx
+import { Tabs } from "@bgub/fig-headless/tabs";
+
+export function SettingsTabs() {
+  return (
+    <Tabs defaultValue="account">
+      {(tabs) => (
+        <div>
+          <div aria-label="Settings" mix={tabs.list({ activateOnFocus: true })}>
+            <button mix={tabs.tab("account")}>Account</button>
+            <button mix={tabs.tab("security")}>Security</button>
+          </div>
+          <div class="panels">
+            <section class="panel" mix={tabs.panel("account")}>
+              Account settings
+            </section>
+            <section class="panel" mix={tabs.panel("security")}>
+              Security settings
+            </section>
+          </div>
+        </div>
+      )}
+    </Tabs>
+  );
+}
+```
+
+Each widget has its own package entry. There is no root barrel, namespace
+object, or module side effect, so applications bundle only the entries they use.
+
+The root can be controlled with a defined `value`, or uncontrolled with
+`defaultValue`. `undefined` means the prop is absent and `null` means no active
+tab. With neither prop the root selects the first enabled tab before paint.
+Uncontrolled roots automatically recover when the selected tab becomes disabled
+or unmounts, and report the value they settled on with a `null` event.
+`onValueChange(value, details, signal)` reports user and automatic changes;
+`details.cancel()` cancels user selection. Activation events retain their
+native propagation; a handler on the target may use `stopPropagation()` to
+suppress both the widget and its ancestors.
+
+Manual activation is the default: arrow keys move the roving tab stop and
+`Enter` or `Space` selects. Use `tabs.list({ activateOnFocus: true })` when
+panels appear without latency.
+Lists loop by default, support Home/End, vertical orientation, RTL, and leave
+modified key chords alone. Leaving a manually activated list resets its roving
+tab stop to the selected tab.
+
+Disabled tabs remain keyboard-focusable so their labels and unavailable state
+can be discovered, but they cannot activate. `tabs.panel()` keeps caller-owned
+hosts mounted and hides inactive ones. For presence, branch directly on
+`tabs.value`; rendering policy stays ordinary Fig state.
+
+Control selection and wrap the state update with Fig's `useTransition` when the
+application wants to animate it:
+
+```tsx
+import { useState, useTransition, ViewTransition } from "@bgub/fig";
+
+const [value, setValue] = useState<string | null>("account");
+const [, startTransition] = useTransition();
+const tabs = useTabs({
+  value,
+  onValueChange: (next) =>
+    startTransition(() => setValue(next), {
+      types: ["settings-tabs"],
+      viewTransition: "interrupt",
+    }),
+});
+
+<ViewTransition name="settings-panel">
+  <div class="frame">
+    {tabs.value === "account" ? (
+      <section mix={tabs.panel("account")}>Account settings</section>
+    ) : null}
+    {tabs.value === "security" ? (
+      <section mix={tabs.panel("security")}>Security settings</section>
+    ) : null}
+  </div>
+</ViewTransition>;
+```
+
+One boundary animates both sides: its old and new images carry the outgoing and
+incoming panel, and its group interpolates the frame's height.
+
+The images are flat snapshots that move with their animation, so a border or
+background left on the frame slides away with the outgoing panel. Paint that
+chrome on the group instead, and let the live frame drop it while a
+`settings-tabs` transition is active:
+
+```css
+::view-transition-group(settings-panel) {
+  background: var(--card);
+  border: 1px solid var(--border);
+  box-sizing: border-box;
+  overflow: clip;
+}
+
+:root:active-view-transition-type(settings-tabs) .frame {
+  background: transparent;
+  border-color: transparent;
+}
+```
+
+The application owns the transition type and animation policy. It can use one
+type as above or derive directional types from `details.trigger` and the
+currently selected tab. Captured descendants cannot receive pointer input
+during an animation, so keep the tab list outside the boundary.
+
+The indicator remains optional, so applications that do not render one bundle
+no measurement code:
+
+```tsx
+import { useTabsIndicator } from "@bgub/fig-headless/tabs/indicator";
+
+const indicator = useTabsIndicator();
+
+<div mix={[tabs.list(), indicator.list()]}>
+  <button mix={tabs.tab("account")}>Account</button>
+  <button mix={tabs.tab("security")}>Security</button>
+  <span
+    mix={indicator.indicator()}
+    style={{
+      left: "var(--active-tab-left)",
+      width: "var(--active-tab-width)",
+    }}
+  />
+</div>;
+```
+
+It publishes `--active-tab-left`, `--active-tab-width`, and the other box
+edges, and stays hidden until it has measured the active tab before paint.
+
+## Radio group
+
+```tsx
+import { useRadioGroup } from "@bgub/fig-headless/radio-group";
+
+export function SizeChoice() {
+  const group = useRadioGroup({ defaultValue: "medium", name: "size" });
+
+  return (
+    <div aria-label="Size" mix={group.root()}>
+      {["small", "medium", "large"].map((value) => (
+        <label>
+          <input mix={group.radio(value)} /> {value}
+        </label>
+      ))}
+    </div>
+  );
+}
+```
+
+`radio()` applies to a real `<input type="radio">`. Radios sharing a name are
+already a group to the browser, so it owns the single tab stop, arrow movement
+on either axis, wrapping, skipping disabled radios, Space, form submission, and
+validity — the widget adds no keyboard handling at all. It names the group,
+drives `checked`, and reports what the platform decided. Style the input with
+`appearance: none`, or hide it and style its label.
+
+`required` marks the group for validation, the generated `name` is on the parts
+object, and your own `name` or `value` prop wins over the generated one.
+`readOnly` prevents changes without disabling focus or form submission. Native
+form reset restores `defaultValue` for an uncontrolled group and reasserts
+`value` for a controlled group.
+
+## Accordion
+
+```tsx
+import { useAccordion } from "@bgub/fig-headless/accordion";
+
+export function Help() {
+  const accordion = useAccordion({ defaultValue: ["shipping"] });
+
+  return (
+    <div mix={accordion.root()}>
+      <h3>
+        <button mix={accordion.trigger("shipping")}>Shipping</button>
+      </h3>
+      {accordion.isOpen("shipping") ? (
+        <section mix={accordion.panel("shipping")}>Ships in two days.</section>
+      ) : null}
+    </div>
+  );
+}
+```
+
+`value` and `defaultValue` are arrays in every mode. One panel opens at a time
+by default; `collapsible: false` keeps the last one open and `multiple` holds
+several. Headers stay in the tab order, with optional arrow, Home, and End
+movement between them. Animate the panel frame by controlling the open values:
+
+```tsx
+const [values, setValues] = useState<readonly string[]>(["shipping"]);
+const [, startTransition] = useTransition();
+
+const accordion = useAccordion({
+  value: values,
+  onValueChange: (next) =>
+    startTransition(() => setValues(next), {
+      types: ["help-accordion"],
+      viewTransition: "interrupt",
+    }),
+});
+```
+
+The application may use separate expansion and collapse types when its visual
+design needs that distinction.
+
+## Dialog
+
+```tsx
+import { useDialog } from "@bgub/fig-headless/dialog";
+
+export function DeleteFile() {
+  const dialog = useDialog();
+
+  return (
+    <>
+      <button mix={dialog.trigger()}>Delete</button>
+      <dialog mix={dialog.dialog()}>
+        <h2 mix={dialog.title()}>Delete this file?</h2>
+        <p mix={dialog.description()}>This cannot be undone.</p>
+        <button mix={dialog.dismiss()}>Cancel</button>
+      </dialog>
+    </>
+  );
+}
+```
+
+You render a real `<dialog>`, so the platform provides the top layer, focus
+containment, focus restoration, the inert background, `::backdrop`, and Escape.
+The widget adds open state, labelling, and dismissal policy: `closeOnEscape`
+and `closeOnBackdrop` default to `true`, and a backdrop click is told apart
+from a click on the dialog's own padding.
+
+The user agent centres a modal dialog with `margin: auto`, so a reset that
+zeroes margins leaves it in the corner; restore `margin: auto` on the element.
+
+Animate it with `@starting-style` and `transition-behavior: allow-discrete`
+rather than a view transition, and lock scrolling with
+`html:has(dialog[open]) { overflow: clip }`, paired with `scrollbar-gutter:
+stable` so hiding the scrollbar does not shift the page. All of it is CSS, so
+none of it is an option on the root.
+
+## Popover
+
+```tsx
+import { usePopover } from "@bgub/fig-headless/popover";
+
+export function Filters() {
+  const popover = usePopover({ id: "filters-popover" });
+
+  return (
+    <>
+      <button mix={popover.trigger()}>Filters</button>
+      <div class="panel" mix={popover.popover()}>
+        ...
+      </div>
+    </>
+  );
+}
+```
+
+```css
+.panel {
+  position-area: block-end span-inline-end;
+}
+```
+
+The popover attribute provides the top layer, light dismiss, and Escape; CSS
+anchor positioning provides placement. The widget measures nothing and adds no
+outside-click, scroll, or resize listener — it generates one anchor name, puts
+it on the trigger as `anchor-name` and on the popover as `position-anchor`, and
+leaves placement to your CSS. The trigger also carries `popovertarget`, so it
+works before hydration. Pass a custom popover id to the root; the root owns the
+host `id` so the server-rendered trigger and popover cannot diverge.
+
+Anchor positioning has not shipped in every browser yet, so pair your placement
+with a `@supports not (anchor-name: --a)` fallback. Where the popover API
+itself is missing, the widget falls back to toggling `hidden`.
+
+## Tooltip
+
+```tsx
+import { useTooltip } from "@bgub/fig-headless/tooltip";
+
+const tooltip = useTooltip({ id: "save-help" });
+
+<>
+  <button mix={tooltip.trigger()}>Save</button>
+  <div mix={tooltip.tooltip()}>Save this document</div>
+</>;
+```
+
+Keyboard focus opens immediately, mouse hover uses a configurable delay, and
+Escape closes. Existing `aria-describedby` references are preserved. Tooltip
+content is descriptive and non-interactive; use a popover for controls.
+
+## Listbox
+
+```tsx
+import { useListbox } from "@bgub/fig-headless/listbox";
+
+const listbox = useListbox({ defaultValue: ["apple"], multiple: true });
+
+<div aria-label="Fruit" mix={listbox.root()}>
+  <div mix={listbox.option("apple")}>Apple</div>
+  <div mix={listbox.option("banana")}>Banana</div>
+</div>;
+```
+
+Selection is array-shaped in single and multiple modes. DOM focus stays on the
+root while arrows, Home/End, and typeahead move an active descendant. Movement
+selects in single mode; Enter and Space toggle in multiple mode. The
+application owns scrolling, virtualization, and form serialization, so an
+unmounted option does not implicitly erase its selected value.
+
+## Select
+
+Prefer native `<select>` when its rendering works. The Fig Headless select covers
+the custom-popup case while leaving every host and label to the application:
+
+```tsx
+import { useSelect } from "@bgub/fig-headless/select";
+
+const select = useSelect({ defaultValue: "apple", name: "fruit" });
+
+<>
+  <button mix={select.trigger()}>{select.value}</button>
+  <div mix={select.popup()}>
+    <div mix={select.option("apple")}>Apple</div>
+    <div mix={select.option("banana")}>Banana</div>
+  </div>
+  <input mix={select.hiddenInput()} />
+</>;
+```
+
+It provides active-descendant navigation, disabled-option skipping, typeahead,
+controlled or uncontrolled selection, read-only inspection, form submission,
+and reset. Native constraint validation remains a reason to use `<select>`.
+
+## Combobox
+
+```tsx
+import { useCombobox } from "@bgub/fig-headless/combobox";
+
+const combobox = useCombobox({ name: "fruit" });
+const matches = fruits.filter((fruit) =>
+  fruit.startsWith(combobox.inputValue.toLowerCase()),
+);
+
+<>
+  <input mix={combobox.input()} />
+  <div mix={combobox.popup()}>
+    {matches.map((fruit) => (
+      <div mix={combobox.option(fruit)}>{fruit}</div>
+    ))}
+  </div>
+  <input mix={combobox.hiddenInput()} />
+</>;
+```
+
+Fig Headless owns input/listbox relationships, active-descendant movement,
+selection, controlled state, and form reset. The application owns filtering,
+async loading, option rendering, empty states, and placement CSS.
+
+## Menu
+
+```tsx
+import { useMenu } from "@bgub/fig-headless/menu";
+
+export function Actions() {
+  const menu = useMenu({ onSelect: (value) => run(value) });
+
+  return (
+    <>
+      <button mix={menu.trigger()}>Actions</button>
+      <div class="menu" mix={menu.menu()}>
+        <button mix={menu.item("rename")}>Rename</button>
+        <button mix={menu.item("remove")}>Remove</button>
+      </div>
+    </>
+  );
+}
+```
+
+The menu is built on the popover, so it inherits the top layer, light dismiss,
+Escape, and anchor positioning, and adds what a menu needs: roles, arrow and
+Home/End movement, typeahead, and focus. `showPopover()` leaves focus alone, so
+the menu moves it to the first item on open — the last with ArrowUp — and
+returns it to the trigger on close. Tab closes rather than walking the items.
+From a submenu, Tab closes the whole menu tree.
+
+`onSelect` runs before the menu closes, and `details.cancel()` keeps it open.
+Action items close by default and can set `closeOnSelect: false`.
+`checkboxItem(value, { checked })` and `radioItem(value, { checked })` expose
+controlled checked menu items and stay open by default.
+
+Submenus are optional:
+
+```tsx
+import { useMenuSubmenu } from "@bgub/fig-headless/menu/submenu";
+
+const share = useMenuSubmenu(menu, "share");
+
+<div mix={menu.menu()}>
+  <button mix={share.trigger()}>Share</button>
+  <div mix={share.menu()}>
+    <button mix={share.item("email")}>Email</button>
+  </div>
+</div>;
+```
+
+Inline-end opens, inline-start closes, RTL reverses both, and hover uses a
+configurable delay. Focus enters the child on keyboard open and returns to the
+parent trigger on close. An accepted child action closes the whole menu tree.
+
+## Toolbar
+
+```tsx
+import { useToolbar } from "@bgub/fig-headless/toolbar";
+
+const toolbar = useToolbar();
+
+<div aria-label="Formatting" mix={toolbar.root()}>
+  <button mix={toolbar.item("bold")}>Bold</button>
+  <button mix={toolbar.item("italic")}>Italic</button>
+</div>;
+```
+
+Toolbar provides one roving tab stop, orientation-aware and RTL-aware arrow
+movement, Home/End, disabled-item skipping, and optional focus looping. It owns
+no command or selection state; every item remains the application's control.
+
+## Toast region
+
+```tsx
+import { useToastRegion } from "@bgub/fig-headless/toast";
+
+const region = useToastRegion({
+  onDismiss: (id) =>
+    setToasts((items) => items.filter((item) => item.id !== id)),
+});
+
+<div mix={region.region()}>
+  {toasts.map((toast) => (
+    <div mix={region.toast(toast.id)}>
+      {toast.message}
+      <button mix={region.dismiss(toast.id)}>Dismiss</button>
+    </div>
+  ))}
+</div>;
+```
+
+The application owns the toast array, markup, placement, and stacking. Keep the
+region mounted before adding notifications; it supplies polite or assertive
+live semantics, dismiss requests, and lifetimes that pause for focus, hover,
+and a hidden document. Urgency is region-scoped, so use separately labelled
+regions when an application genuinely needs both. There is no provider, global
+queue, portal, or gesture policy.
+
+## Checkbox, switch, and field
+
+```tsx
+import { useCheckbox } from "@bgub/fig-headless/checkbox";
+import { useField } from "@bgub/fig-headless/field";
+
+export function Terms({ invalid }: { invalid: boolean }) {
+  const field = useField({ invalid, required: true });
+  const checkbox = useCheckbox({ name: "terms", value: "accepted" });
+
+  return (
+    <div>
+      <label mix={field.label()}>Accept the terms</label>
+      <input mix={[field.control(), checkbox.control()]} />
+      {invalid ? <p mix={field.error()}>This is required.</p> : null}
+    </div>
+  );
+}
+```
+
+Both the checkbox and the switch apply to a native `<input type="checkbox">`,
+so the browser owns toggling, focus, Space, submission, and validity. The
+switch is the same control with `role="switch"`. The one thing the widget must
+write itself is `indeterminate`, which the platform exposes only as a property.
+Both controls accept `readOnly`, which blocks toggling without removing focus
+or form submission. Form reset restores their initial `defaultChecked` state.
+
+`useField` preserves authored `aria-describedby` references and then wires all
+mounted descriptions followed by active errors. Pass stable keys to
+`description(key)` and `error(key)` when rendering repeated messages; errors
+are referenced only while `invalid` is true.
+
+## Inline lists, commands, context menus, and sliders
+
+- `useCombobox({ inline: true })` renders a list in document flow; `open: true`
+  keeps it visible. Escape remains available to an enclosing dialog.
+- `useCommand({ items, onAction })` in `command/command.tsx` provides a searchable
+  action list with explicit `{ value, label, keywords?, group?, disabled? }`
+  items. Render its filtered `items` through `input()`, `list()`, and `item(item)`;
+  `group(label)` and `emptyMessage()` add grouping and empty-result semantics.
+- `useContextMenu()` in `menu/context-menu.tsx` provides Menu parts whose
+  `trigger()` opens on right-click, ContextMenu, or Shift+F10. The optional module
+  handles pointer placement, keyboard placement, viewport constraints, and RTL.
+- `useSlider({ defaultValue: 0.5, min: 0, max: 1, step: 0.1 })` in
+  `slider/slider.tsx` exposes a native range `control()`. Values are single
+  numbers; `onValueChange` requests updates and `onValueCommit` reports native
+  commit events. Label the input with a native label or ARIA.
+- A Dialog can render its content conditionally on `dialog.open`; its title must
+  be present when it opens. Closed shells can defer mounting their contents.
+
+Each hook also has the corresponding render-callback component. See the
+[widget contracts](../../docs/concepts/widgets.md) for complete behavior,
+composition examples, and reference comparisons.
+
+## Development diagnostics
+
+Development builds reject markup that would silently discard a widget's
+accessibility contract. Checkbox, switch, and radio parts require native
+`<input>` elements; accordion, dialog, popover, and menu triggers require
+native `<button>` elements, as does a toast dismiss control; `dialog()` requires
+`<dialog>`; and `field.label()` requires `<label>`. Tab lists, radio groups,
+listboxes, and toast regions require an accessible name, dialogs and field
+controls require their naming parts or an explicit ARIA name, singleton parts,
+item, panel, and toast values, and field message ids must be unique, and every
+mounted panel must have a matching control. These checks are removed from
+production bundles.

package/dist/accordion.d.ts

@@ -0,0 +1,46 @@
+import { t as ChangeDetails } from "./changes--uvVfvy8.js";
+import { t as Orientation } from "./composite-CG4JghHi.js";
+import { FigNode, MixinDescriptor } from "@bgub/fig";
+//#region src/accordion/accordion.d.ts
+type AccordionOrientation = Orientation;
+type AccordionValueChangeDetails = ChangeDetails;
+type AccordionValueChangeHandler<Value = unknown> = (values: readonly Value[], details: AccordionValueChangeDetails, signal: AbortSignal) => void;
+interface AccordionTriggerOptions {
+  disabled?: boolean;
+}
+interface AccordionOptions<Value = unknown> {
+  /** Allows closing the last open panel in single mode. Defaults to `true`. */
+  collapsible?: boolean;
+  defaultValue?: readonly Value[];
+  /** Disables every trigger. */
+  disabled?: boolean;
+  /** Keeps more than one panel open at a time. */
+  multiple?: boolean;
+  onValueChange?: AccordionValueChangeHandler<Value>;
+  orientation?: AccordionOrientation;
+  value?: readonly Value[];
+}
+interface AccordionParts<Value = unknown> {
+  readonly values: readonly Value[];
+  isOpen(value: Value): boolean;
+  /** Marks a panel the caller keeps mounted; closed panels hide. */
+  panel(value: Value): MixinDescriptor;
+  root(): MixinDescriptor;
+  trigger(value: Value, options?: AccordionTriggerOptions): MixinDescriptor;
+}
+interface AccordionProps<Value = unknown> extends AccordionOptions<Value> {
+  children: (accordion: AccordionParts<Value>) => FigNode;
+}
+/**
+ * Coordinates one accordion: which panels are open, the relationships between
+ * headers and regions, and optional arrow movement between headers. Call it in
+ * the component that renders the accordion; every element stays the caller's.
+ */
+declare function useAccordion<Value = unknown>(options?: AccordionOptions<Value>): AccordionParts<Value>;
+/**
+ * {@link useAccordion} as a component, for an accordion that is not already a
+ * component of its own. Toggling re-renders this root rather than the caller.
+ */
+declare function Accordion<Value = unknown>(props: AccordionProps<Value>): FigNode;
+//#endregion
+export { Accordion, AccordionOptions, AccordionOrientation, AccordionParts, AccordionProps, AccordionTriggerOptions, AccordionValueChangeDetails, AccordionValueChangeHandler, useAccordion };

package/dist/accordion.js

@@ -0,0 +1,2 @@
+import{t as e}from"./changes-DglRuvQa.js";import{a as t,i as n,n as r,t as i}from"./parts-I0jdefyp.js";import"./diagnostics-CoURcwqb.js";import{i as a,t as o}from"./composite-CiKLX-Ti.js";import{n as s}from"./controllable-value-CDbRzlId.js";import{t as c}from"./ids-Cvu36mFL.js";import{t as l}from"./relations-uMHtgW03.js";import{createMixin as u,useBeforePaint as d,useMemo as f,useStableEvent as p}from"@bgub/fig";import{on as m}from"@bgub/fig-dom";const h=u((e,t)=>({bind:r(e,t.registry,(e,n)=>t.registry.bindContainer(e,n)),"data-disabled":t.disabled?``:void 0,"data-fig-accordion":``,"data-orientation":t.orientation,mix:[m(`click`,i(t.registry,(e,n)=>t.toggle(e.value,n,e.node))),m(`keydown`,e=>{t.registry.itemAt(e.target)!==void 0&&t.registry.moveFocus(e,{loop:!1,orientation:t.orientation})})]})),g=u((e,t,i)=>{let a=i.disabled||e.props.disabled===!0;return{...n(e,{disabled:a,id:i.triggerId}),"aria-controls":i.panelId,"aria-expanded":i.open?`true`:`false`,bind:r(e,t.registry,(e,n)=>t.registry.bindItem(e,n,i.value,a)),"data-fig-accordion-trigger":``,"data-open":i.open?``:void 0}}),_=u((e,t,n)=>({"aria-labelledby":n.triggerId,bind:r(e,t.registry,(e,r)=>t.relations.bindPanel(e,r,n.value)),"data-open":n.open?``:void 0,hidden:!n.open||void 0,id:e.props.id??n.panelId,role:`region`}));function v(n={}){let{collapsible:r=!0,disabled:i=!1,multiple:u=!1,orientation:m=`vertical`}=n,v=t(),y=s({value:n.value,defaultValue:n.defaultValue??[],onChange:n.onValueChange,reconcile:v}),b=y.value,x=f(()=>o({container:`[data-fig-accordion]`,item:`[data-fig-accordion-trigger]`,name:`accordion`,registrationChanged:v}),[]),S=f(()=>l(x,v),[]);d(()=>{S.sync()});let C=p((t,n,i)=>{y.request(e=>{let n=e.some(e=>a(e,t));return n&&!r&&!u?e:n?e.filter(e=>!a(e,t)):u?[...e,t]:[t]},e(n,i))}),w=c(),T={disabled:i,orientation:m,registry:x,relations:S,toggle:C};function E(e){return b.some(t=>a(t,e))}function D(e){return _(T,{open:E(e),panelId:w(e,`panel`),triggerId:w(e,`trigger`),value:e})}return{isOpen:E,panel:D,root:()=>h(T),trigger:(e,t={})=>g(T,{disabled:i||t.disabled===!0,open:E(e),panelId:w(e,`panel`),triggerId:w(e,`trigger`),value:e}),values:b}}function y(e){return e.children(v(e))}export{y as Accordion,v as useAccordion};
+//# sourceMappingURL=accordion.js.map