@krelborn/stylesui 0.0.0-stage → 0.9.0

package/LICENSE

@@ -0,0 +1,74 @@
+MIT License
+
+Copyright (c) 2026 Matt Styles
+
+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.
+
+---
+
+Third-party notices
+
+The icon artwork in src/components/Icon/ is copied from Lucide (https://lucide.dev),
+published as the lucide-static package. Lucide's licence follows, unchanged. It
+also covers the icons Lucide took from Feather, such as x, under Feather's MIT
+licence.
+
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+The following Lucide icons are derived from the Feather project:
+
+airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out
+
+The MIT License (MIT) (for the icons listed above)
+
+Copyright (c) 2013-present Cole Bemis
+
+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,130 @@
-# Temporary Holding Version
+# StylesUI
 
-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.
+A React component library styled with CSS modules and CSS custom properties.
+
+> [!WARNING]
+> StylesUI is in beta and, for now, a personal project. It works, but expect rough edges, and expect components, props and tokens to change between releases until 1.0.
+
+## Installation
+
+```sh
+pnpm add @krelborn/stylesui
+```
+
+## Usage
+
+```tsx
+import { Button, Card, Checkbox, Field, Heading, Stack, TextInput } from "@krelborn/stylesui";
+
+export function SignIn({ error, saving }: { error?: string; saving: boolean }) {
+  return (
+    <Card padding="lg">
+      <Stack as="form" gap={4}>
+        <Heading level={1}>Sign in</Heading>
+        <Field description="We'll never share it." error={error} label="Email" required>
+          <TextInput autoComplete="email" type="email" />
+        </Field>
+        <Field label="Password" required>
+          <TextInput autoComplete="current-password" type="password" />
+        </Field>
+        <Checkbox>Remember me</Checkbox>
+        <Button busy={saving} type="submit">
+          Sign in
+        </Button>
+      </Stack>
+    </Card>
+  );
+}
+```
+
+Components accept every prop of the element they render, including `ref`. Layout components such as `Stack` render the element given in `as`. `Field` labels the control inside it and links its description and error to it, and marks it required, invalid or disabled. A `busy` `Button` shows a spinner and ignores clicks while keeping focus.
+
+### CSS and themes
+
+Import the global stylesheet once at your app root. It provides the reset, colour ramps, design tokens, themes and palettes:
+
+```tsx
+import "@krelborn/stylesui/styles.css";
+```
+
+Each component's compiled JS imports its own CSS file, so only styles for components you use end up in your bundle. Your bundler must handle CSS imports from `node_modules` (Vite, Next.js and webpack do by default).
+
+The `default` theme and its `bright` palette apply to the whole page, and colour mode follows the OS. Use `Theme` to switch the theme, palette or mode for any subtree; they nest:
+
+```tsx
+import { Button, Card, Heading, Theme } from "@krelborn/stylesui";
+
+<Theme mode="dark" theme="playful">
+  <Card>
+    <Heading level={2}>Hello</Heading>
+    <Button>Get started</Button>
+  </Card>
+</Theme>;
+```
+
+A theme sets shape (radius, borders, shadows, spacing, motion and fonts) and a palette sets colour. Each theme brings a companion palette, `bright` for `default` and `pop` for `playful`, and `palette` swaps it for any of the five: `bright` (a white page), `mist` (a cool grey page with white cards), `paper` (a warm off-white page), `dusk` (the dimmest light mode and a softer dark mode) and `pop`. For example, `<Theme palette="mist">` keeps default's shapes on a less bright page. Set `palette` beside `theme`, because a palette on an outer element doesn't reach through an inner `Theme` that sets a theme.
+
+`Theme` sets `data-sui-theme`, `data-sui-palette` and `data-sui-mode` attributes; `styles.css` paints the background, text colour and font of any element carrying them, so you can also put them on any element yourself, e.g. `<html data-sui-theme="playful" data-sui-mode="dark">`, and it behaves the same way. To customise, override `--sui-*` custom properties. Semantic tokens such as `--sui-color-primary` can be overridden on any element, since components read them directly. Form controls, popovers and code chips read their own layer tokens (`--sui-color-field`, `--sui-color-overlay` and `--sui-color-sunken`), so `--sui-color-background` recolours only the page and `--sui-color-surface` only panels such as `Card`. Base tokens others are built from — `--sui-space-unit`, ramp steps like `--sui-blue-600`, the palette's `--sui-color-ink`, `--sui-color-shadow-soft` and `--sui-color-shadow-hard`, and the theme's `--sui-control-outline`, `--sui-shadow-hardness` and `--sui-shadow-sm-offset` — only take effect when overridden on `:root` or an element with `data-sui-theme` or `data-sui-palette`, since that's where the derived tokens (`--sui-space-*`, `--sui-color-control-border`, `--sui-color-shadow`, `--sui-shadow-sm`, the semantic colours) resolve their `var()`s.
+
+The `playful` theme uses Fredoka for headings and Nunito for body text. They're self-hosted and kept out of `styles.css`, so import them alongside it if you use playful; without them it falls back to the system's rounded font:
+
+```tsx
+import "@krelborn/stylesui/styles.css";
+import "@krelborn/stylesui/fonts/playful.css";
+```
+
+Fredoka and Nunito are licensed under the SIL Open Font License 1.1 and come from the [Fontsource](https://fontsource.org) packages `@fontsource-variable/fredoka` and `@fontsource-variable/nunito`.
+
+Playful's buttons lift on hover and press down when clicked. When the OS asks for reduced motion, only their colours transition.
+
+Themes and palettes use CSS `light-dark()`, which needs Chrome 123, Safari 17.5 or Firefox 120.
+
+`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
+
+Set your bundler's CSS target to at least Chrome/Edge 123, Firefox 120, Safari 17.5, or colour modes stop nesting: a lower target makes lightningcss rewrite `light-dark()` into fallback variables resolved once at `:root`. With Vite:
+
+```ts
+export default defineConfig({
+  build: { cssTarget: ["chrome123", "edge123", "firefox120", "safari17.5"] },
+});
+```
+
+Other lightningcss-based tools need the equivalent `targets`.
+
+## Requirements
+
+- React 19.2 or later
+
+## Development
+
+| Script                 | Description                                            |
+| ---------------------- | ------------------------------------------------------ |
+| `pnpm storybook`       | Run Storybook and its component docs on port 6006      |
+| `pnpm build-storybook` | Build a static Storybook to `storybook-static/`        |
+| `pnpm build`           | Build the library to `dist/` (ESM + type declarations) |
+| `pnpm test`            | Run tests once (`pnpm test:watch` to watch)            |
+| `pnpm typecheck`       | Type-check the project                                 |
+| `pnpm lint`            | Lint with oxlint                                       |
+| `pnpm format`          | Format with oxfmt (`pnpm format:check` to check only)  |
+
+A Husky pre-commit hook runs lint-staged, which lints (`oxlint --fix`) and formats (`oxfmt`) staged files and blocks the commit on lint errors.
+
+### Adding a component
+
+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`, `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.
+
+## Feedback
+
+Bug reports, questions and ideas are very welcome: please [open an issue](https://github.com/Krelborn/StylesUI/issues).
+
+I'm not accepting pull requests. StylesUI is a personal project I maintain in my spare time, and for now I want to keep its design in one place. If you have a fix in mind, describe it in an issue and I'll take it from there.
+
+## Licence
+
+MIT. The icons are [Lucide](https://lucide.dev)'s, under the ISC licence, and some of those are Feather's, under the MIT licence. `LICENSE` holds all three.

package/dist/accessibility/RequiredAccessibleName.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Requires an accessible name for a landmark or widget, given as `aria-label` or `aria-labelledby`
+ *
+ * Compose it into a props type as
+ * `OwnProps & RequiredAccessibleName & Omit<BoxProps<E>, "aria-label" | "aria-labelledby" | …>`. `Omit` over a props
+ * type that already contains it makes the name optional, because `Omit` flattens the union into one object type.
+ */
+export type RequiredAccessibleName = {
+    /**
+     * The name, when no visible text names the element
+     */
+    "aria-label": string;
+    /**
+     * Ids of the visible elements that name the element
+     */
+    "aria-labelledby"?: string;
+} | {
+    /**
+     * The name, when no visible text names the element
+     */
+    "aria-label"?: string;
+    /**
+     * Ids of the visible elements that name the element
+     */
+    "aria-labelledby": string;
+};

package/dist/accessibility/idSegment.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Turns any string into text that can sit inside an element id
+ *
+ * @param value the string, which may hold any characters, unpaired surrogates included
+ * @returns letters, digits, hyphens and underscores, different for every different value
+ */
+export declare function idSegment(value: string): string;

package/dist/accessibility/idSegment.js

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

package/dist/accessibility/index.d.ts

@@ -0,0 +1,2 @@
+export { idSegment } from "./idSegment";
+export type { RequiredAccessibleName } from "./RequiredAccessibleName";

package/dist/collections/index.d.ts

@@ -0,0 +1,7 @@
+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";
+export type { TypeAheadQuery } from "./typeAhead";

package/dist/collections/optionId.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Builds the id of the option for a value
+ *
+ * @param baseId the `Listbox`'s generated id
+ * @param value the option's value
+ * @returns an id unique to the value within its `Listbox`, whatever characters the value holds
+ */
+export declare function optionId(baseId: string, value: string): string;

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/collections/renderedOptions.d.ts

@@ -0,0 +1,37 @@
+/**
+ * An option as a listbox renders it
+ */
+export interface RenderedOption {
+    /**
+     * Whether the option can be reached but not selected
+     */
+    disabled: boolean;
+    /**
+     * The option element
+     */
+    element: HTMLElement;
+    /**
+     * The text type-ahead matches: the option's `textValue`, else the text of the elements its `aria-labelledby` names,
+     * else its own text
+     */
+    textValue: string;
+    /**
+     * The option's value
+     */
+    value: string;
+}
+/**
+ * Reads the options a listbox renders
+ *
+ * @param listbox the listbox element
+ * @returns each option that is not hidden or inert, in document order, with its value, its type-ahead text and
+ *   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/collections/renderedOptions.js

@@ -0,0 +1,17 @@
+// 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: 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(" ");
+}
+export { t as optionTextValue, e as renderedOptions };

package/dist/collections/targetIndexForKey.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Direction a collection's items run in
+ */
+export type CollectionOrientation = "horizontal" | "vertical";
+/**
+ * Writing direction around a collection, which decides whether Left or Right moves forward in a horizontal one
+ */
+export type WritingDirection = "ltr" | "rtl";
+interface TargetIndexOptions {
+    /**
+     * How many items the collection has
+     */
+    count: number;
+    /**
+     * Index of the focused item, or -1 when none is
+     */
+    currentIndex: number;
+    /**
+     * Writing direction around the collection. It only matters for a horizontal collection. Defaults to `ltr`.
+     */
+    direction?: WritingDirection;
+    /**
+     * The pressed key, as `KeyboardEvent.key` gives it
+     */
+    key: string;
+    /**
+     * Direction the items run in
+     */
+    orientation: CollectionOrientation;
+    /**
+     * Whether moving past either end goes round to the other end
+     */
+    wraps: boolean;
+}
+/**
+ * Finds the item an arrow key, Home or End moves focus to in a collection such as a tab list or a listbox
+ *
+ * @param options the key, the focused item, the size, orientation and wrapping of the collection, and its writing
+ *   direction if it is horizontal and may run right to left
+ * @returns the index to move to, which is the current index at an end that does not wrap; null for a key the
+ *   collection does not handle, or when it is empty. With nothing focused, forward goes to the first item and back goes
+ *   to the last when wrapping, or to the first when not.
+ */
+export declare function targetIndexForKey({ count, currentIndex, direction, key, orientation, wraps, }: TargetIndexOptions): number | null;
+export {};

package/dist/collections/targetIndexForKey.js

@@ -0,0 +1,16 @@
+// 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;
+	if (i === "Home") return 0;
+	if (i === "End") return s;
+	let c = t(i, a, r);
+	if (c === 0) return null;
+	if (n < 0) return c > 0 || !o ? 0 : s;
+	let l = n + c;
+	return l < 0 ? o ? s : 0 : l > s ? o ? 0 : s : l;
+}
+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;
+}
+export { e as targetIndexForKey };

package/dist/collections/typeAhead.d.ts

@@ -0,0 +1,43 @@
+/**
+ * The text typed so far for type-ahead, and when its last character was typed
+ */
+export interface TypeAheadQuery {
+    /**
+     * The characters typed so far
+     */
+    text: string;
+    /**
+     * When the last character was typed, in milliseconds
+     */
+    time: number;
+}
+/**
+ * Adds a typed character to a type-ahead query
+ *
+ * @param query the query so far, or null when there is none
+ * @param character the character typed
+ * @param time when it was typed, in milliseconds
+ * @returns the query with the character added, or a new query of that character when the last one came more than
+ *   500ms before
+ */
+export declare function extendTypeAheadQuery(query: TypeAheadQuery | null, character: string, time: number): TypeAheadQuery;
+/**
+ * Says whether a type-ahead query is still being typed
+ *
+ * @param query the query so far, or null when there is none
+ * @param time the time now, in milliseconds
+ * @returns true when the query's last character came within 500ms, so a character typed now joins it
+ */
+export declare function isTypeAheadQueryLive(query: TypeAheadQuery | null, time: number): boolean;
+/**
+ * Finds the item type-ahead moves to
+ *
+ * @param labels each item's text, in order
+ * @param currentIndex the active item, or -1 for none
+ * @param text the typed text
+ * @returns the index of the first label from the current item on that starts with the text, ignoring case and a
+ *   label's leading whitespace, and wrapping round. A single character starts after the current item, so typing it
+ *   again moves on; longer text starts at the current item, so it keeps matching while it can. Null when no label
+ *   matches.
+ */
+export declare function typeAheadTarget(labels: readonly string[], currentIndex: number, text: string): number | null;

package/dist/collections/typeAhead.js

@@ -0,0 +1,18 @@
+function e(e, n, r) {
+	return {
+		text: e !== null && t(e, r) ? e.text + n : n,
+		time: r
+	};
+}
+function t(e, t) {
+	return e !== null && t - e.time <= 500;
+}
+function n(e, t, n) {
+	let r = n.toLocaleLowerCase(), i = Array.from(n).length === 1 ? t + 1 : Math.max(t, 0);
+	for (let t = 0; t < e.length; t += 1) {
+		let n = (i + t) % e.length;
+		if (e[n].trim().toLocaleLowerCase().startsWith(r)) return n;
+	}
+	return null;
+}
+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 };