@krelborn/stylesui 0.8.1 → 0.9.0

package/README.md

@@ -79,7 +79,7 @@ Playful's buttons lift on hover and press down when clicked. When the OS asks fo
 
 Themes and palettes use CSS `light-dark()`, which needs Chrome 123, Safari 17.5 or Firefox 120.
 
-`Tooltip` and `Popover` use the Popover API and CSS anchor positioning, which need Chrome/Edge 129, Firefox 147 or Safari 26. With Vite, the CSS target below leaves their anchor positioning styles unchanged.
+`Tooltip`, `Popover`, the menus (`useMenu`, `useContextMenu` and `Menubar`), `Combobox` and `Autocomplete` use the Popover API and CSS anchor positioning, which need Chrome/Edge 129, Firefox 147 or Safari 26. `NavBar` anchors its wide layout's panels too, and collapses with a container style query, which needs Firefox 151; Firefox 147 to 150 show its wide layout at every width. With Vite, the CSS target below leaves their anchor positioning styles unchanged.
 
 ### Bundler CSS target
 
@@ -115,7 +115,7 @@ A Husky pre-commit hook runs lint-staged, which lints (`oxlint --fix`) and forma
 
 Create `src/components/<Name>/` with `<Name>.tsx`, `<Name>.module.css`, `<Name>.test.tsx`, `<Name>.stories.tsx` and an `index.ts`, then export it from `src/index.ts`. Build on `Box` where possible. JSDoc on the component, its props and each story becomes the component's Docs page in Storybook.
 
-Form components share code in `src/forms/`: the `ControlSize` type, the `FieldContext` and `RadioGroupContext` contexts (each in its own module), the `useFieldControl` hook that merges a `Field`'s state into a control's props, the `useRadioGroupItem` hook that gives `Radio` and `Segment` their `RadioGroup`'s name and selection, and `hasContent`. Only `ControlSize` is exported from the package. `TextControl` (behind `TextInput`, `Textarea` and `Select`), `ChoiceControl` (behind `Checkbox`, `Switch` and `Radio`) and `RequiredIndicator` are internal components: they are not exported from `src/index.ts` and have no stories or tests of their own, since the public components built on them cover them. `TextControl` and `ChoiceControl` own the one CSS module their wrappers share, so those wrappers have none.
+Form components share code in `src/forms/`: the `ControlSize` type, the `FieldContext` and `RadioGroupContext` contexts (each in its own module), the `useFieldControl` hook that merges a `Field`'s state into a control's props, the `useRadioGroupItem` hook that gives `Radio` and `Segment` their `RadioGroup`'s name and selection, and `hasContent`. Only `ControlSize` is exported from the package. `TextControl` (behind `TextInput`, `Textarea`, `Select`, `Combobox` and `Autocomplete`), `ChoiceControl` (behind `Checkbox`, `Switch` and `Radio`) and `RequiredIndicator` are internal components: they are not exported from `src/index.ts` and have no stories or tests of their own, since the public components built on them cover them. `TextControl` and `ChoiceControl` own the one CSS module their wrappers share, so those wrappers have none.
 
 Tree-shaking relies on the build preserving one output module per source module and on `"sideEffects": ["**/*.css"]` in `package.json`. Avoid top-level side effects in component modules.
 

package/dist/accessibility/idSegment.js

@@ -1,6 +1,5 @@
-//#region src/accessibility/idSegment.ts
+// src/accessibility/idSegment.ts
 function e(e) {
 	return e.replace(/[^A-Za-z0-9-]/g, (e) => `_${e.charCodeAt(0).toString(16).padStart(4, "0")}`);
 }
-//#endregion
 export { e as idSegment };

package/dist/collections/index.d.ts

@@ -1,3 +1,6 @@
+export { optionId } from "./optionId";
+export { optionTextValue, renderedOptions } from "./renderedOptions";
+export type { RenderedOption } from "./renderedOptions";
 export { targetIndexForKey } from "./targetIndexForKey";
 export type { WritingDirection } from "./targetIndexForKey";
 export { extendTypeAheadQuery, isTypeAheadQueryLive, typeAheadTarget } from "./typeAhead";

package/dist/collections/optionId.js

@@ -0,0 +1,6 @@
+import { idSegment as e } from "../accessibility/idSegment.js";
+// src/collections/optionId.ts
+function t(t, n) {
+	return `${t}-option-${e(n)}`;
+}
+export { t as optionId };

package/dist/{components/Listbox → collections}/renderedOptions.d.ts

@@ -28,3 +28,10 @@ export interface RenderedOption {
  *   whether it is disabled
  */
 export declare function renderedOptions(listbox: HTMLElement): RenderedOption[];
+/**
+ * Reads the text an option is matched by, whether or not it is hidden
+ *
+ * @param option the option element
+ * @returns its `data-text-value`, else the text of the elements its `aria-labelledby` names, else its own text
+ */
+export declare function optionTextValue(option: HTMLElement): string;

package/dist/{components/Listbox → collections}/renderedOptions.js

@@ -1,15 +1,17 @@
-//#region src/components/Listbox/renderedOptions.ts
+// src/collections/renderedOptions.ts
 function e(e) {
 	return Array.from(e.querySelectorAll("[role=\"option\"]")).filter((e) => e.closest("[hidden], [inert]") === null).map((e) => ({
 		disabled: e.getAttribute("aria-disabled") === "true",
 		element: e,
-		textValue: e.dataset.textValue ?? t(e) ?? e.textContent ?? "",
+		textValue: t(e),
 		value: e.dataset.value ?? ""
 	}));
 }
 function t(e) {
+	return e.dataset.textValue ?? n(e) ?? e.textContent ?? "";
+}
+function n(e) {
 	let t = e.getRootNode(), n = t instanceof ShadowRoot ? t : e.ownerDocument, r = (e.getAttribute("aria-labelledby") ?? "").split(/\s+/).map((e) => n.getElementById(e)).filter((e) => e !== null);
 	return r.length === 0 ? void 0 : r.map((e) => e.textContent).join(" ");
 }
-//#endregion
-export { e as renderedOptions };
+export { t as optionTextValue, e as renderedOptions };

package/dist/collections/targetIndexForKey.js

@@ -1,4 +1,4 @@
-//#region src/collections/targetIndexForKey.ts
+// src/collections/targetIndexForKey.ts
 function e({ count: e, currentIndex: n, direction: r = "ltr", key: i, orientation: a, wraps: o }) {
 	let s = e - 1;
 	if (e === 0) return null;
@@ -13,5 +13,4 @@ function e({ count: e, currentIndex: n, direction: r = "ltr", key: i, orientatio
 function t(e, t, n) {
 	return e === (t === "vertical" ? "ArrowDown" : n === "rtl" ? "ArrowLeft" : "ArrowRight") ? 1 : e === (t === "vertical" ? "ArrowUp" : n === "rtl" ? "ArrowRight" : "ArrowLeft") ? -1 : 0;
 }
-//#endregion
 export { e as targetIndexForKey };

package/dist/collections/typeAhead.js

@@ -15,5 +15,4 @@ function n(e, t, n) {
 	}
 	return null;
 }
-//#endregion
 export { e as extendTypeAheadQuery, t as isTypeAheadQueryLive, n as typeAheadTarget };

package/dist/components/Accordion/Accordion.css

@@ -0,0 +1 @@
+.sui-accordion-LVhhv{--sui-accordion-padding-y:var(--sui-space-2,.5rem);--sui-accordion-padding-x:var(--sui-space-2,.5rem);--sui-accordion-inset:var(--sui-space-1,.25rem);--sui-accordion-gap:var(--sui-space-2,.5rem);--sui-accordion-font-size:var(--sui-font-size-md,1rem);--sui-accordion-description-font-size:var(--sui-font-size-sm,.875rem);--sui-accordion-divider:var(--sui-color-border,#d1d5db);--sui-accordion-indicator-color:var(--sui-color-text-muted,#4b5563);--sui-accordion-radius:var(--sui-radius-md,4px);--_sui-accordion-indicator-space:calc(var(--sui-accordion-font-size) + var(--sui-accordion-gap));--_sui-accordion-actions-end:0px;color:var(--sui-color-text,#111827)}.sui-accordion-LVhhv:not([data-variant=flush]){--sui-accordion-padding-x:var(--sui-space-4,1rem);--sui-accordion-inset:0px;--sui-accordion-radius:0px;--_sui-accordion-indicator-space:0px;--_sui-accordion-actions-end:var(--sui-accordion-padding-x)}.sui-accordion-LVhhv:not([data-variant=flush])[data-size=sm]{--sui-accordion-padding-x:var(--sui-space-3,.75rem)}.sui-accordion-LVhhv:not([data-variant=flush])[data-size=lg]{--sui-accordion-padding-x:var(--sui-space-6,1.5rem)}.sui-accordion-LVhhv[data-variant=joined]{border:var(--sui-border-width,1px) solid var(--sui-accordion-divider);border-radius:var(--sui-radius-lg,8px);overflow:clip}.sui-accordion-LVhhv[data-size=sm]{--sui-accordion-padding-y:var(--sui-space-1,.25rem);--sui-accordion-font-size:var(--sui-font-size-sm,.875rem);--sui-accordion-description-font-size:var(--sui-font-size-xs,.75rem)}.sui-accordion-LVhhv[data-size=lg]{--sui-accordion-padding-y:var(--sui-space-3,.75rem);--sui-accordion-font-size:var(--sui-font-size-lg,1.125rem);--sui-accordion-description-font-size:var(--sui-font-size-md,1rem)}.sui-accordion-LVhhv[data-variant=separated]{gap:var(--sui-space-3,.75rem);flex-direction:column;display:flex}.sui-accordion-LVhhv[data-variant=separated]>.sui-item-7ryVk{--sui-accordion-radius:calc(var(--sui-radius-lg,8px) - var(--sui-border-width,1px));border:var(--sui-border-width,1px) solid var(--sui-color-border,#d1d5db);border-radius:var(--sui-radius-lg,8px);background-color:var(--sui-color-surface,#f3f4f6);box-shadow:var(--sui-shadow-sm,0 1px 3px #0000001f);transition:box-shadow var(--sui-motion-spring,.12s ease-out), translate var(--sui-motion-spring,.12s ease-out)}@media (hover:hover){.sui-accordion-LVhhv[data-variant=separated]>.sui-item-7ryVk:has(>.sui-header-WaTdJ .sui-toggle-cSQLb:hover:not([aria-disabled=true])){box-shadow:var(--sui-shadow-sm,0 1px 3px #0000001f), 0 calc(var(--sui-control-depth,0px) / 2) 0 var(--sui-color-shadow,transparent);translate:0 calc(var(--sui-control-depth,0px) / -2)}}.sui-accordion-LVhhv:is([data-variant=flush],[data-variant=joined])>.sui-item-7ryVk+.sui-item-7ryVk{border-block-start:var(--sui-border-width,1px) solid var(--sui-accordion-divider)}.sui-header-WaTdJ{align-items:center;gap:var(--sui-accordion-inset);padding:var(--sui-accordion-inset);display:flex}.sui-heading-6PDIo{min-inline-size:0;font:inherit;flex:1;margin:0}.sui-toggle-cSQLb{align-items:center;gap:var(--sui-accordion-gap);inline-size:100%;padding:var(--sui-accordion-padding-y) var(--sui-accordion-padding-x);border-radius:var(--sui-accordion-radius);color:inherit;font-family:var(--sui-font-body,system-ui, sans-serif);font-size:var(--sui-accordion-font-size);font-weight:var(--sui-font-weight-control,500);line-height:var(--sui-line-height-tight,1.25);text-align:start;cursor:pointer;background-color:#0000;border:0;transition:background-color .12s;display:flex}@media (hover:hover){.sui-toggle-cSQLb:hover:not([aria-disabled=true]){background-color:color-mix(in srgb, currentColor 8%, transparent)}}.sui-toggle-cSQLb:active:not([aria-disabled=true]){background-color:color-mix(in srgb, currentColor 16%, transparent)}.sui-toggle-cSQLb:focus-visible{outline:var(--sui-focus-ring-width,2px) solid var(--sui-color-focus-ring,#3b82f6);outline-offset:calc(-1 * var(--sui-focus-ring-width,2px))}.sui-toggle-cSQLb[aria-disabled=true]{color:color-mix(in srgb, var(--sui-color-text,#111827) 50%, transparent);cursor:not-allowed}.sui-toggle-cSQLb:not([data-variant=flush]){font-family:var(--sui-font-heading,system-ui, sans-serif)}.sui-indicator-5mEls{color:var(--sui-accordion-indicator-color);transition:background-color .12s ease, color .12s ease, rotate var(--sui-motion-spring,.12s ease-out)}.sui-toggle-cSQLb:not([data-variant=flush]) .sui-indicator-5mEls{order:1}.sui-toggle-cSQLb:not([data-variant=flush])[aria-expanded=true] .sui-chevron-i-HVZ{rotate:180deg}.sui-toggle-cSQLb[data-variant=separated] .sui-indicator-5mEls{box-sizing:content-box;padding:calc(.375em - var(--sui-border-width,1px));border:var(--sui-border-width,1px) solid var(--sui-color-control-border,transparent);border-radius:var(--sui-radius-full,9999px);background-color:var(--sui-color-secondary,#e5e7eb);color:var(--sui-color-on-secondary,#111827)}.sui-toggle-cSQLb[data-variant=separated][aria-expanded=true] .sui-indicator-5mEls{background-color:var(--sui-color-primary,#2563eb);color:var(--sui-color-on-primary,#fff)}.sui-toggle-cSQLb[aria-disabled=true] :is(.sui-indicator-5mEls,.sui-description-kokuI,.sui-trailing--LXlM){color:inherit}.sui-toggle-cSQLb[data-variant=separated][aria-disabled=true] .sui-indicator-5mEls{background-color:color-mix(in srgb, var(--sui-color-secondary,#e5e7eb) 50%, transparent)}.sui-toggle-cSQLb[data-variant=flush][aria-expanded=false] .sui-chevron-i-HVZ{rotate:-90deg}.sui-toggle-cSQLb[data-variant=flush][aria-expanded=false] .sui-chevron-i-HVZ:dir(rtl){rotate:90deg}.sui-plusMinus-j8bGi path:nth-child(2){transform-box:fill-box;transform-origin:50%;transition:rotate var(--sui-motion-spring,.12s ease-out)}.sui-toggle-cSQLb[aria-expanded=true] .sui-plusMinus-j8bGi path:nth-child(2){rotate:90deg}.sui-label-Ss7uW{flex:1;min-inline-size:0;display:grid}.sui-title--w5py{overflow-wrap:anywhere}.sui-description-kokuI,.sui-trailing--LXlM{color:var(--sui-color-text-muted,#4b5563);font-family:var(--sui-font-body,system-ui, sans-serif);font-size:var(--sui-accordion-description-font-size);font-weight:var(--sui-font-weight-regular,400)}.sui-trailing--LXlM{flex:none}.sui-actions-1vJf9{align-items:center;gap:var(--sui-accordion-inset);flex:none;padding-inline-end:var(--_sui-accordion-actions-end);display:flex}.sui-content-PEM9t{padding-block:0 var(--sui-space-3,.75rem);padding-inline:calc(var(--sui-accordion-inset) + var(--sui-accordion-padding-x) + var(--_sui-accordion-indicator-space)) calc(var(--sui-accordion-inset) + var(--sui-accordion-padding-x))}.sui-panel-Wx50w{interpolate-size:allow-keywords;transition:block-size .2s ease-out, content-visibility .2s ease-out allow-discrete;overflow:clip}.sui-panel-Wx50w[hidden]{block-size:0}@media (prefers-reduced-motion:reduce){.sui-indicator-5mEls{transition:background-color .12s,color .12s}.sui-plusMinus-j8bGi path:nth-child(2),.sui-panel-Wx50w,.sui-accordion-LVhhv[data-variant=separated]>.sui-item-7ryVk{transition:none}}@media (forced-colors:active){.sui-toggle-cSQLb[aria-disabled=true]{color:graytext}.sui-toggle-cSQLb[data-variant=separated] .sui-indicator-5mEls,.sui-toggle-cSQLb[data-variant=separated][aria-expanded=true] .sui-indicator-5mEls{color:buttontext;background-color:buttonface;border-color:buttontext}}@media print{.sui-panel-Wx50w[hidden=until-found]{content-visibility:visible;block-size:auto;transition:none}.sui-indicator-5mEls{display:none}}

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,90 @@
+import type { JSX, ReactNode } from "react";
+import type { ControlSize } from "../../forms";
+import type { BoxProps } from "../Box";
+import type { HeadingLevel } from "../Heading";
+/**
+ * Shape of the indicator that shows whether an item is open: a `chevron` that turns, or a `plusMinus` that turns from
+ * a plus into a minus
+ */
+export type AccordionIndicator = "chevron" | "plusMinus";
+/**
+ * Accordion looks: `flush` rows split by dividers, for inspectors and sidebars; `joined` items in one bordered box;
+ * `separated` items each drawn as a card
+ */
+export type AccordionVariant = "flush" | "joined" | "separated";
+interface AccordionOwnProps {
+    /**
+     * The `AccordionItem`s
+     */
+    children?: ReactNode;
+    /**
+     * Whether opening an item closes the others, so at most one is open once the user opens one. Items that `value` or
+     * `defaultValue` opens are shown as given. Defaults to `false`.
+     */
+    exclusive?: boolean;
+    /**
+     * Level of every item's heading, which the page outline decides
+     */
+    headingLevel: HeadingLevel;
+    /**
+     * Shape of the indicator that shows whether an item is open. Defaults to `chevron`.
+     */
+    indicator?: AccordionIndicator;
+    /**
+     * Called with the values of the open items when the user opens or closes one
+     */
+    onValueChange?: (value: string[]) => void;
+    /**
+     * Whether each open panel is a landmark region named by its title. Defaults to `true` for `joined` and `separated` and
+     * `false` for `flush`, whose many open sections would crowd the page's landmarks.
+     */
+    regions?: boolean;
+    /**
+     * Header size, matching the `Button` sizes. Defaults to `md`.
+     */
+    size?: ControlSize;
+    /**
+     * Look of the accordion. Defaults to `flush`.
+     */
+    variant?: AccordionVariant;
+}
+type AccordionOpenItems = {
+    /**
+     * Values of the items open at first. It leaves `Accordion` uncontrolled. Defaults to none.
+     */
+    defaultValue?: string[];
+    /**
+     * Not accepted with `defaultValue`
+     */
+    value?: never;
+} | {
+    /**
+     * Not accepted with `value`
+     */
+    defaultValue?: never;
+    /**
+     * Values of the open items, which makes `Accordion` controlled: update it from `onValueChange`
+     */
+    value: string[];
+};
+/**
+ * Props for `Accordion`: its own props, `value` or `defaultValue`, and every other `div` prop
+ */
+export type AccordionProps = AccordionOwnProps & AccordionOpenItems & Omit<BoxProps<"div">, "as" | "defaultValue" | keyof AccordionOwnProps>;
+/**
+ * Sections of content that each open and close under a heading, following the WAI-ARIA accordion pattern. Give it an
+ * `AccordionItem` for each section. Any number of items can be open, or one with `exclusive`.
+ *
+ * @example
+ * <Accordion defaultValue={["layout"]} headingLevel={3} size="sm">
+ *   <AccordionItem title="Layout" value="layout">…</AccordionItem>
+ *   <AccordionItem title="Fill" value="fill">…</AccordionItem>
+ * </Accordion>
+ *
+ * @example
+ * <Accordion exclusive={true} headingLevel={2} indicator="plusMinus" size="lg" variant="separated">
+ *   <AccordionItem title="Can I return a kit?" value="returns">…</AccordionItem>
+ * </Accordion>
+ */
+export declare function Accordion({ className, defaultValue, exclusive, headingLevel, indicator, onKeyDown, onValueChange, regions, size, value, variant, ...rest }: AccordionProps): JSX.Element;
+export {};

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,47 @@
+import { targetIndexForKey as e } from "../../collections/targetIndexForKey.js";
+import { Box as t } from "../Box/Box.js";
+import n from "./Accordion.module.js";
+import { AccordionContext as r } from "./AccordionContext.js";
+import { clsx as i } from "clsx";
+import { useId as a, useState as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+// src/components/Accordion/Accordion.tsx
+function c({ className: c, defaultValue: l = [], exclusive: u = !1, headingLevel: d, indicator: f = "chevron", onKeyDown: p, onValueChange: m, regions: h, size: g = "md", value: _, variant: v = "flush", ...y }) {
+	let b = a(), [x, S] = o(l), C = _ ?? x;
+	function w(e) {
+		let t;
+		t = C.includes(e) ? C.filter((t) => t !== e) : u ? [e] : [...C, e], _ === void 0 && S(t), m?.(t);
+	}
+	function T(t) {
+		if (p?.(t), t.defaultPrevented || t.altKey || t.ctrlKey || t.metaKey || t.shiftKey) return;
+		let r = t.currentTarget, i = Array.from(r.querySelectorAll(`.${n.toggle}`)).filter((e) => e.closest(`.${n.accordion}`) === r && e.closest("[hidden], [inert]") === null), a = i.findIndex((e) => e === t.target);
+		if (a === -1) return;
+		let o = e({
+			count: i.length,
+			currentIndex: a,
+			key: t.key,
+			orientation: "vertical",
+			wraps: !1
+		});
+		o !== null && (t.preventDefault(), i[o].focus());
+	}
+	return /* @__PURE__ */ s(r.Provider, {
+		value: {
+			baseId: b,
+			headingLevel: d,
+			indicator: f,
+			openValues: C,
+			regions: h ?? v !== "flush",
+			toggle: w,
+			variant: v
+		},
+		children: /* @__PURE__ */ s(t, {
+			...y,
+			className: i(n.accordion, c),
+			onKeyDown: T,
+			"data-size": g,
+			"data-variant": v
+		})
+	});
+}
+export { c as Accordion };

package/dist/components/Accordion/Accordion.module.js

@@ -0,0 +1,19 @@
+import './Accordion.css';// src/components/Accordion/Accordion.module.css
+var e = "sui-accordion-LVhhv", t = "sui-item-7ryVk", n = "sui-header-WaTdJ", r = "sui-toggle-cSQLb", i = "sui-heading-6PDIo", a = "sui-indicator-5mEls", o = "sui-chevron-i-HVZ", s = "sui-description-kokuI", c = "sui-trailing--LXlM", l = "sui-plusMinus-j8bGi", u = "sui-label-Ss7uW", d = "sui-title--w5py", f = "sui-actions-1vJf9", p = "sui-content-PEM9t", m = "sui-panel-Wx50w", h = {
+	accordion: e,
+	item: t,
+	header: n,
+	toggle: r,
+	heading: i,
+	indicator: a,
+	chevron: o,
+	description: s,
+	trailing: c,
+	plusMinus: l,
+	label: u,
+	title: d,
+	actions: f,
+	content: p,
+	panel: m
+};
+export { e as accordion, f as actions, o as chevron, p as content, h as default, s as description, n as header, i as heading, a as indicator, t as item, u as label, m as panel, l as plusMinus, d as title, r as toggle, c as trailing };

package/dist/components/Accordion/AccordionContext.d.ts

@@ -0,0 +1,40 @@
+import type { HeadingLevel } from "../Heading";
+import type { AccordionIndicator, AccordionVariant } from "./Accordion";
+/**
+ * State an `Accordion` shares with its items
+ */
+export interface AccordionContextValue {
+    /**
+     * The generated id every toggle and panel id starts with
+     */
+    baseId: string;
+    /**
+     * Level of every item's heading
+     */
+    headingLevel: HeadingLevel;
+    /**
+     * Shape of every item's indicator
+     */
+    indicator: AccordionIndicator;
+    /**
+     * Values of the open items
+     */
+    openValues: readonly string[];
+    /**
+     * Whether each open panel is a region named by its title
+     */
+    regions: boolean;
+    /**
+     * Opens the item with the given value if it is closed, or closes it if it is open, reporting the open items to
+     * `onValueChange`
+     */
+    toggle: (value: string) => void;
+    /**
+     * Look of the accordion and its items
+     */
+    variant: AccordionVariant;
+}
+/**
+ * Carries an `Accordion`'s state to its items; null outside an `Accordion`
+ */
+export declare const AccordionContext: import("react").Context<AccordionContextValue | null>;

package/dist/components/Accordion/AccordionContext.js

@@ -0,0 +1,4 @@
+import { createContext as e } from "react";
+// src/components/Accordion/AccordionContext.ts
+var t = e(null);
+export { t as AccordionContext };

package/dist/components/Accordion/AccordionItem.d.ts

@@ -0,0 +1,51 @@
+import type { JSX, ReactNode } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `AccordionItem`: its own props plus every `div` prop except `dangerouslySetInnerHTML` and `title`
+ */
+export interface AccordionItemProps extends Omit<BoxProps<"div">, "as" | "dangerouslySetInnerHTML" | "title"> {
+    /**
+     * Controls beside the toggle, such as an `IconButton` that adds an entry to the section. They sit outside the
+     * heading, so they are not part of its text or the toggle's name.
+     */
+    actions?: ReactNode;
+    /**
+     * The panel's content
+     */
+    children?: ReactNode;
+    /**
+     * Muted text under the title, inside the toggle, so it is read as part of the toggle's name
+     */
+    description?: ReactNode;
+    /**
+     * Whether the item cannot be opened or closed. A disabled item stays reachable with the keyboard, so its title is
+     * read, and its closed panel is skipped by find-in-page. Defaults to `false`.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the panel's content renders only once the item first opens, for content that is costly to render. It stays
+     * rendered after the item closes. Find-in-page and links cannot reach content that has never rendered. Defaults to
+     * `false`.
+     */
+    lazy?: boolean;
+    /**
+     * The header's text, which names the toggle and, when the accordion has regions, the panel
+     */
+    title: ReactNode;
+    /**
+     * Shown at the end of the toggle, such as a value or a `Counter`. A space separates it from the title, so it is read
+     * after it. Not for interactive content, which cannot sit inside the toggle: put controls in `actions`.
+     */
+    trailing?: ReactNode;
+    /**
+     * Identifies the item in the `Accordion`'s `value`, `defaultValue` and `onValueChange`
+     */
+    value: string;
+}
+/**
+ * One section of an `Accordion`: a heading holding the toggle that opens and closes it, and the panel it shows
+ *
+ * @example
+ * <AccordionItem title="Effects" trailing={<Counter count={2} />} value="effects">…</AccordionItem>
+ */
+export declare function AccordionItem({ actions, children, className, description, disabled, lazy, title, trailing, value, ...rest }: AccordionItemProps): JSX.Element;

package/dist/components/Accordion/AccordionItem.js

@@ -0,0 +1,69 @@
+import { hasContent as e } from "../../forms/hasContent.js";
+import { Box as t } from "../Box/Box.js";
+import n from "./Accordion.module.js";
+import { panelId as r, titleId as i, toggleId as a } from "./accordionIds.js";
+import { AccordionToggleContent as o } from "./AccordionToggleContent.js";
+import { useAccordionContext as s } from "./useAccordionContext.js";
+import { useFindablePanel as c } from "./useFindablePanel.js";
+import { useHasOpened as l } from "./useHasOpened.js";
+import { clsx as u } from "clsx";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+// src/components/Accordion/AccordionItem.tsx
+function p({ actions: p, children: m, className: h, description: g, disabled: _ = !1, lazy: v = !1, title: y, trailing: b, value: x, ...S }) {
+	let C = s("AccordionItem"), w = C.openValues.includes(x), T = a(C.baseId, x), E = r(C.baseId, x), D = i(C.baseId, x), O = l(w), k = c({
+		disabled: _,
+		onMatch: () => C.toggle(x),
+		open: w
+	}), A = C.regions && w ? {
+		role: "region",
+		"aria-labelledby": D
+	} : {};
+	function j() {
+		_ || C.toggle(x);
+	}
+	return /* @__PURE__ */ f(t, {
+		...S,
+		className: u(n.item, h),
+		"data-disabled": _,
+		"data-open": w,
+		children: [/* @__PURE__ */ f(t, {
+			className: n.header,
+			children: [/* @__PURE__ */ d(t, {
+				as: `h${C.headingLevel}`,
+				className: n.heading,
+				children: /* @__PURE__ */ d(t, {
+					as: "button",
+					className: n.toggle,
+					id: T,
+					onClick: j,
+					type: "button",
+					"aria-controls": E,
+					"aria-disabled": _ ? !0 : void 0,
+					"aria-expanded": w,
+					"data-variant": C.variant,
+					children: /* @__PURE__ */ d(o, {
+						description: g,
+						indicator: C.indicator,
+						title: y,
+						titleId: D,
+						trailing: b
+					})
+				})
+			}), e(p) && /* @__PURE__ */ d(t, {
+				className: n.actions,
+				children: p
+			})]
+		}), /* @__PURE__ */ d(t, {
+			className: n.panel,
+			hidden: !w,
+			id: E,
+			ref: k,
+			...A,
+			children: /* @__PURE__ */ d(t, {
+				className: n.content,
+				children: !v || O ? m : null
+			})
+		})]
+	});
+}
+export { p as AccordionItem };

package/dist/components/Accordion/AccordionToggleContent.d.ts

@@ -0,0 +1,30 @@
+import type { JSX, ReactNode } from "react";
+import type { AccordionIndicator } from "./Accordion";
+interface AccordionToggleContentProps {
+    /**
+     * Muted text under the title
+     */
+    description: ReactNode;
+    /**
+     * Shape of the indicator
+     */
+    indicator: AccordionIndicator;
+    /**
+     * The header's text
+     */
+    title: ReactNode;
+    /**
+     * Id of the element holding the title
+     */
+    titleId: string;
+    /**
+     * Shown at the end of the toggle
+     */
+    trailing: ReactNode;
+}
+/**
+ * What an `AccordionItem`'s toggle shows: the indicator, which the stylesheet places for the look, then its title, and
+ * its description and trailing content, each after a space, so the toggle's name reads them in that order
+ */
+export declare function AccordionToggleContent({ description, indicator, title, titleId, trailing, }: AccordionToggleContentProps): JSX.Element;
+export {};

package/dist/components/Accordion/AccordionToggleContent.js

@@ -0,0 +1,44 @@
+import { hasContent as e } from "../../forms/hasContent.js";
+import { Box as t } from "../Box/Box.js";
+import { AddIcon as n } from "../Icon/AddIcon.js";
+import { ChevronDownIcon as r } from "../Icon/ChevronDownIcon.js";
+import i from "./Accordion.module.js";
+import { c as a } from "react/compiler-runtime";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+// src/components/Accordion/AccordionToggleContent.tsx
+function l(l) {
+	let u = a(16), { description: d, indicator: f, title: p, titleId: m, trailing: h } = l, g;
+	u[0] === f ? g = u[1] : (g = f === "plusMinus" ? /* @__PURE__ */ s(n, { className: `${i.indicator} ${i.plusMinus}` }) : /* @__PURE__ */ s(r, { className: `${i.indicator} ${i.chevron}` }), u[0] = f, u[1] = g);
+	let _;
+	u[2] !== p || u[3] !== m ? (_ = /* @__PURE__ */ s(t, {
+		as: "span",
+		className: i.title,
+		id: m,
+		children: p
+	}), u[2] = p, u[3] = m, u[4] = _) : _ = u[4];
+	let v;
+	u[5] === d ? v = u[6] : (v = e(d) && /* @__PURE__ */ c(o, { children: [" ", /* @__PURE__ */ s(t, {
+		as: "span",
+		className: i.description,
+		children: d
+	})] }), u[5] = d, u[6] = v);
+	let y;
+	u[7] !== _ || u[8] !== v ? (y = /* @__PURE__ */ c(t, {
+		as: "span",
+		className: i.label,
+		children: [_, v]
+	}), u[7] = _, u[8] = v, u[9] = y) : y = u[9];
+	let b;
+	u[10] === h ? b = u[11] : (b = e(h) && /* @__PURE__ */ c(o, { children: [" ", /* @__PURE__ */ s(t, {
+		as: "span",
+		className: i.trailing,
+		children: h
+	})] }), u[10] = h, u[11] = b);
+	let x;
+	return u[12] !== g || u[13] !== y || u[14] !== b ? (x = /* @__PURE__ */ c(o, { children: [
+		g,
+		y,
+		b
+	] }), u[12] = g, u[13] = y, u[14] = b, u[15] = x) : x = u[15], x;
+}
+export { l as AccordionToggleContent };

package/dist/components/Accordion/accordionIds.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Builds the id of an item's toggle
+ *
+ * @param baseId the `Accordion`'s generated id
+ * @param value the item's value
+ * @returns an id unique to the value within its `Accordion`, whatever characters the value holds
+ */
+export declare function toggleId(baseId: string, value: string): string;
+/**
+ * Builds the id of an item's panel
+ *
+ * @param baseId the `Accordion`'s generated id
+ * @param value the item's value
+ * @returns an id unique to the value within its `Accordion`, whatever characters the value holds
+ */
+export declare function panelId(baseId: string, value: string): string;
+/**
+ * Builds the id of an item's title, which names its panel when the panel is a region
+ *
+ * @param baseId the `Accordion`'s generated id
+ * @param value the item's value
+ * @returns an id unique to the value within its `Accordion`, whatever characters the value holds
+ */
+export declare function titleId(baseId: string, value: string): string;

package/dist/components/Accordion/accordionIds.js

@@ -0,0 +1,12 @@
+import { idSegment as e } from "../../accessibility/idSegment.js";
+// src/components/Accordion/accordionIds.ts
+function t(t, n) {
+	return `${t}-toggle-${e(n)}`;
+}
+function n(t, n) {
+	return `${t}-panel-${e(n)}`;
+}
+function r(t, n) {
+	return `${t}-title-${e(n)}`;
+}
+export { n as panelId, r as titleId, t as toggleId };

package/dist/components/Accordion/index.d.ts

@@ -0,0 +1,4 @@
+export { Accordion } from "./Accordion";
+export type { AccordionIndicator, AccordionProps, AccordionVariant } from "./Accordion";
+export { AccordionItem } from "./AccordionItem";
+export type { AccordionItemProps } from "./AccordionItem";

package/dist/components/Accordion/useAccordionContext.d.ts

@@ -0,0 +1,9 @@
+import type { AccordionContextValue } from "./AccordionContext";
+/**
+ * Reads the state of the surrounding `Accordion`
+ *
+ * @param part the name of the part reading it, for the error message
+ * @returns the surrounding `Accordion`'s state
+ * @throws MissingContextError when the part is not inside an `Accordion`
+ */
+export declare function useAccordionContext(part: string): AccordionContextValue;

package/dist/components/Accordion/useAccordionContext.js

@@ -0,0 +1,10 @@
+import { MissingContextError as e } from "../../errors/MissingContextError.js";
+import { AccordionContext as t } from "./AccordionContext.js";
+import { useContext as n } from "react";
+// src/components/Accordion/useAccordionContext.ts
+function r(r) {
+	let i = n(t);
+	if (i === null) throw new e(r, "Accordion");
+	return i;
+}
+export { r as useAccordionContext };

package/dist/components/Accordion/useFindablePanel.d.ts

@@ -0,0 +1,25 @@
+import type { RefObject } from "react";
+interface FindablePanelOptions {
+    /**
+     * Whether the item is disabled, so its closed panel is skipped by find-in-page
+     */
+    disabled: boolean;
+    /**
+     * Called when find-in-page, a fragment link or the page's URL fragment as the panel mounts matches inside the closed
+     * panel
+     */
+    onMatch: () => void;
+    /**
+     * Whether the item is open
+     */
+    open: boolean;
+}
+/**
+ * Keeps a closed panel hidden until find-in-page or a fragment link matches inside it. Render the panel with `hidden`
+ * set to whether it is closed, and give it the returned ref.
+ *
+ * @param options the item's state and what to do on a match
+ * @returns the ref for the panel element
+ */
+export declare function useFindablePanel({ disabled, onMatch, open }: FindablePanelOptions): RefObject<HTMLDivElement | null>;
+export {};

package/dist/components/Accordion/useFindablePanel.js

@@ -0,0 +1,36 @@
+import { useFragmentTargetReveal as e } from "./useFragmentTargetReveal.js";
+import { useLayoutEffect as t, useRef as n, useState as r } from "react";
+import { c as i } from "react/compiler-runtime";
+// src/components/Accordion/useFindablePanel.ts
+function a(a) {
+	let s = i(15), { disabled: c, onMatch: l, open: u } = a, d = n(null), [f, p] = r(0), m = !u && !c, h;
+	s[0] !== c || s[1] !== u ? (h = () => {
+		u || d.current?.setAttribute("hidden", c ? "" : "until-found");
+	}, s[0] = c, s[1] = u, s[2] = h) : h = s[2];
+	let g;
+	s[3] !== c || s[4] !== u || s[5] !== f ? (g = [
+		c,
+		u,
+		f
+	], s[3] = c, s[4] = u, s[5] = f, s[6] = g) : g = s[6], t(h, g);
+	let _, v;
+	s[7] !== m || s[8] !== l ? (_ = () => {
+		let e = d.current;
+		if (e === null || !m) return;
+		let t = function(t) {
+			t.target === e && (p(o), l());
+		};
+		return e.addEventListener("beforematch", t), () => e.removeEventListener("beforematch", t);
+	}, v = [m, l], s[7] = m, s[8] = l, s[9] = _, s[10] = v) : (_ = s[9], v = s[10]), t(_, v);
+	let y;
+	return s[11] !== m || s[12] !== l || s[13] !== u ? (y = {
+		findable: m,
+		onMatch: l,
+		open: u,
+		panelRef: d
+	}, s[11] = m, s[12] = l, s[13] = u, s[14] = y) : y = s[14], e(y), d;
+}
+function o(e) {
+	return e + 1;
+}
+export { a as useFindablePanel };