@tapestry-ui/accordion 0.0.0-stage → 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Brandon Minton
+
+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,112 @@
-# Temporary Holding Version
+# @tapestry-ui/accordion
 
-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 nestable, accessible accordion for **Preact** — one disclosure, or a
+set of them. Headless
+behavior, skin via CSS. Forged inside a woven-tapestry video game,
+where it learned its most important lesson the hard way (see **The
+container contract**).
+
+```sh
+npm i @tapestry-ui/accordion
+```
+
+```tsx
+import { Disclosure, Accordion } from '@tapestry-ui/accordion';
+import '@tapestry-ui/accordion/styles.css';   // structural only — optional
+
+<Disclosure summary="SOUND">
+  <VolumeSliders />
+</Disclosure>
+
+// nesting is just children
+<Disclosure summary="settings" defaultOpen>
+  <Disclosure summary="advanced">…</Disclosure>
+</Disclosure>
+
+// the data-source layer; `exclusive` makes it an accordion
+<Accordion
+  exclusive
+  items={[
+    { summary: 'one', content: <A /> },
+    { summary: 'two', content: <B /> },
+  ]}
+/>
+```
+
+## Accessibility (WCAG 2.1 AA by design, not by audit)
+- The summary is a **real `<button>`** — Enter/Space, focus, and every
+  assistive tech behavior come free and honest.
+- `aria-expanded` + `aria-controls` wire the WAI-ARIA disclosure
+  pattern; ids are auto-generated and collision-free under nesting.
+- `headingLevel={2..6}` wraps the button in a real heading, so an accordion
+  that titles a section never lies to the document outline.
+- The closed body is **removed from the DOM**, not visually hidden —
+  screen readers never wade through collapsed forests.
+- `:focus-visible` outline ships in the structural CSS and is yours to
+  restyle, never to remove.
+
+## Sliding open (`keepMounted`)
+By default a closed body is **removed**, which is honest but cannot be
+animated — there is nothing to animate from. Pass `keepMounted` and the
+body stays in the DOM, carrying **`inert`** whenever it is closed:
+
+```tsx
+<Disclosure summary="SOUND" keepMounted>…</Disclosure>
+```
+
+`inert` takes the closed content out of the focus order **and** out of the
+accessibility tree — the same promise removal makes — so the accordion can
+slide without lying to anyone. The shipped CSS animates it with the
+`0fr → 1fr` grid trick (and hides it outright once shut, so browsers
+without `inert` keep the same guarantee). `prefers-reduced-motion:
+reduce` turns the transition off.
+
+| custom property | default | what it tunes |
+| --- | --- | --- |
+| `--tui-disclosure-slide` | `280ms` | how long the body takes to open and shut |
+
+The children are wrapped in `[data-part="body-inner"]` in this mode, since
+the clip has to happen on an element that is not the grid row itself.
+
+## ⭐ The container contract
+**An accordion is only half a component. The other half is the scroll
+contract of whatever contains it.** A Accordion never owns scrolling and
+never constrains its container; when open accordions can exceed the
+available space, some ancestor **you choose** must be the scroll
+region:
+
+```css
+.my-modal-content {           /* ONE scrollable middle… */
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;           /* …owns ALL the growth */
+}
+```
+
+Skip this and an open accordion will push its tail past your modal's
+bounds — this exact bug is the reason this package exists. Put the
+accordion INSIDE the region that scrolls, never as a sibling below it.
+
+## Skin
+Structural CSS only — nothing in `styles.css` picks a color. Hooks:
+
+| hook | what |
+|---|---|
+| `[data-part="root"]` `[data-state="open"\|"closed"]` | the accordion + its state |
+| `[data-part="summary"]` / `"caret"` / `"body"` / `"heading"` | the parts |
+| `class` / `summaryClass` / `bodyClass` props | merge your own classes |
+| `--tui-disclosure-gap` · `--tui-disclosure-indent` · `--tui-disclosure-summary-pad` | spacing |
+| `--tui-disclosure-caret-closed` / `-open` (content strings) · `--tui-disclosure-caret-size` | the caret |
+| `--tui-disclosure-focus` | the focus ring |
+
+## API
+`<Disclosure summary children defaultOpen? open? onOpenChange? disabled?
+headingLevel? class? summaryClass? bodyClass? id?>` — controlled when
+`open` is passed (the component then only reports intent through
+`onOpenChange`), uncontrolled otherwise.
+
+`<Accordion items exclusive? keepMounted? headingLevel? label? onOpenChange?
+…classes>` — the molecule: disclosures from data, `exclusive` for
+one-at-a-time, and Up/Down/Home/End across its own headers. Exported as
+`Squeezebox` too. Everything it does, composition can; it just owns the
+set's state and keyboard.

package/dist/accordion.d.ts

@@ -0,0 +1,54 @@
+import { type ComponentChildren, type JSX } from 'preact';
+export interface DisclosureProps {
+    /** what the closed disclosure shows — text or any inline nodes */
+    summary: ComponentChildren;
+    children?: ComponentChildren;
+    /** uncontrolled initial state (default closed) */
+    defaultOpen?: boolean;
+    /** controlled state — when provided, the component follows it and only
+     *  reports intent through onOpenChange */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** keep the closed body in the DOM so CSS can transition it open and shut.
+     *  Closed, it is `inert`: out of the focus order and out of the a11y tree —
+     *  the same promise removal makes, which is what lets it slide without
+     *  lying to anyone. Default false (the body is removed). */
+    keepMounted?: boolean;
+    disabled?: boolean;
+    /** wrap the summary button in a heading of this level (2–6) so the
+     *  disclosure can title a section without lying to the document outline */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    /** skin hooks — tapestry-ui components style through CSS, never props */
+    class?: string;
+    summaryClass?: string;
+    bodyClass?: string;
+    id?: string;
+}
+export declare function Disclosure(props: DisclosureProps): JSX.Element;
+export interface AccordionItem {
+    id?: string;
+    summary: ComponentChildren;
+    content: ComponentChildren;
+    defaultOpen?: boolean;
+    disabled?: boolean;
+}
+export interface AccordionProps {
+    items: AccordionItem[];
+    /** at most one open at a time — the classic accordion behavior */
+    exclusive?: boolean;
+    /** see Disclosure.keepMounted — the whole set slides or none of it does */
+    keepMounted?: boolean;
+    headingLevel?: DisclosureProps['headingLevel'];
+    /** accessible name for the set, when it needs one of its own */
+    label?: string;
+    class?: string;
+    summaryClass?: string;
+    bodyClass?: string;
+    onOpenChange?: (openIds: string[]) => void;
+}
+/** Disclosures from data, with one-open-at-a-time as an option and Up/Down
+ *  between the headers. Purely a layer over <Disclosure/>: everything it can
+ *  do, composition can — this just owns the set's state and its keyboard. */
+export declare function Accordion(props: AccordionProps): JSX.Element;
+/** Brandon's name for the molecule, kept because it is the better word. */
+export { Accordion as Squeezebox };

package/dist/accordion.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// @tapestry-ui/accordion — the Disclosure (atom) and the Accordion, née
+// Squeezebox (molecule). Tapestry UI citizen #1.
+//
+// DESIGN RULINGS (Brandon, 2026-09-25; split on Brad Frost's atomic lines and
+// renamed 2026-10-06): WCAG 2.1 AA from the ground up · nestable · skin via CSS ·
+// as little coupling as we can get away with · the molecule is sugar over the
+// atom and never a different animal.
+//
+// THE NAMES: a DISCLOSURE is one summary button and the region it controls —
+// the atom. An ACCORDION is a set of them with one-open-at-a-time behavior and
+// its own keyboard — the molecule. (A drawer, which this is not, slides in
+// horizontally from an edge.)
+//
+// THE CONTAINER CONTRACT (the lesson this component was born from): a
+// disclosure is only half a component — the other half is the scroll contract
+// of whatever contains it. It NEVER owns scrolling and never grows its
+// container; the CONSUMER decides which ancestor scrolls when open bodies
+// exceed the space. See README "The container contract" — a modal that skips
+// that section will push this body's tail out of its own bounds, exactly once,
+// and then read the section.
+//
+// A11y shape: the WAI-ARIA disclosure pattern. The summary is a real <button>
+// (Enter/Space free, focusable, honest in every AT) carrying aria-expanded +
+// aria-controls; the body is a region the button controls. `headingLevel` wraps
+// the button in <h2>..<h6> so document outlines stay truthful. The accordion
+// adds the APG keyboard: Up/Down between headers, Home/End to the ends.
+import { h } from 'preact';
+import { useId, useRef, useState } from 'preact/hooks';
+export function Disclosure(props) {
+    const autoId = useId();
+    const id = props.id ?? `tui-disclosure-${autoId}`;
+    const bodyId = `${id}-body`;
+    const controlled = props.open !== undefined;
+    const [ownOpen, setOwnOpen] = useState(props.defaultOpen ?? false);
+    const open = controlled ? props.open : ownOpen;
+    const toggle = () => {
+        if (props.disabled)
+            return;
+        const next = !open;
+        if (!controlled)
+            setOwnOpen(next);
+        props.onOpenChange?.(next);
+    };
+    const button = (_jsxs("button", { type: "button", class: cx('tui-disclosure__summary', props.summaryClass), "data-part": "summary", "aria-expanded": open, "aria-controls": bodyId, disabled: props.disabled, onClick: toggle, children: [_jsx("span", { class: "tui-disclosure__caret", "data-part": "caret", "aria-hidden": "true" }), props.summary] }));
+    const H = props.headingLevel ? `h${props.headingLevel}` : null;
+    return (_jsxs("div", { id: id, class: cx('tui-disclosure', props.class), "data-part": "root", "data-state": open ? 'open' : 'closed', "data-disabled": props.disabled ? '' : undefined, children: [H ? h(H, { class: 'tui-disclosure__heading', 'data-part': 'heading' }, button) : button, (open || props.keepMounted) && (_jsx("div", { id: bodyId, class: cx('tui-disclosure__body', props.bodyClass), "data-part": "body", role: "group", "data-animated": props.keepMounted ? '' : undefined, inert: !open || undefined, children: props.keepMounted
+                    ? _jsx("div", { class: "tui-disclosure__body-inner", "data-part": "body-inner", children: props.children })
+                    : props.children }))] }));
+}
+/** Disclosures from data, with one-open-at-a-time as an option and Up/Down
+ *  between the headers. Purely a layer over <Disclosure/>: everything it can
+ *  do, composition can — this just owns the set's state and its keyboard. */
+export function Accordion(props) {
+    const autoId = useId();
+    const ids = props.items.map((it, i) => it.id ?? `tui-accordion-${autoId}-${i}`);
+    const setRef = useRef(null);
+    const [openIds, setOpenIds] = useState(props.items.flatMap((it, i) => (it.defaultOpen ? [ids[i]] : []))
+        .slice(0, props.exclusive ? 1 : undefined));
+    const setOpen = (itemId, open) => {
+        const next = open
+            ? props.exclusive ? [itemId] : [...openIds, itemId]
+            : openIds.filter((x) => x !== itemId);
+        setOpenIds(next);
+        props.onOpenChange?.(next);
+    };
+    /** only this set's own headers — a disclosure nested in a body is not ours */
+    const headers = () => [
+        ...(setRef.current?.querySelectorAll(':scope > [data-part="root"] > [data-part="summary"]:not(:disabled),' +
+            ':scope > [data-part="root"] > [data-part="heading"] > [data-part="summary"]:not(:disabled)') ?? []),
+    ];
+    const onKeyDown = (event) => {
+        const buttons = headers();
+        const from = buttons.indexOf(document.activeElement);
+        if (from === -1 || buttons.length === 0)
+            return; // focus is inside a body, not on a header
+        const step = event.key === 'ArrowDown' ? 1 : event.key === 'ArrowUp' ? -1 : 0;
+        if (step !== 0) {
+            event.preventDefault();
+            buttons[(from + step + buttons.length) % buttons.length].focus();
+            return;
+        }
+        if (event.key === 'Home' || event.key === 'End') {
+            event.preventDefault();
+            buttons[event.key === 'Home' ? 0 : buttons.length - 1].focus();
+        }
+    };
+    return (_jsx("div", { ref: setRef, class: cx('tui-accordion', props.class), "data-part": "accordion", "aria-label": props.label, onKeyDown: onKeyDown, children: props.items.map((it, i) => (_jsx(Disclosure, { id: ids[i], summary: it.summary, open: openIds.includes(ids[i]), onOpenChange: (o) => setOpen(ids[i], o), disabled: it.disabled, keepMounted: props.keepMounted, headingLevel: props.headingLevel, summaryClass: props.summaryClass, bodyClass: props.bodyClass, children: it.content }, ids[i]))) }));
+}
+/** Brandon's name for the molecule, kept because it is the better word. */
+export { Accordion as Squeezebox };
+function cx(...parts) {
+    return parts.filter(Boolean).join(' ');
+}

package/dist/drawer.d.ts

@@ -0,0 +1,49 @@
+import { type ComponentChildren, type JSX } from 'preact';
+export interface DrawerProps {
+    /** what the closed drawer shows — text or any inline nodes */
+    summary: ComponentChildren;
+    children?: ComponentChildren;
+    /** uncontrolled initial state (default closed) */
+    defaultOpen?: boolean;
+    /** controlled state — when provided, the component follows it and only
+     *  reports intent through onOpenChange */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** keep the closed body in the DOM so CSS can transition it open and shut.
+     *  Closed, it is `inert`: out of the focus order and out of the a11y tree —
+     *  the same promise removal makes, which is what lets a drawer slide
+     *  without lying to anyone. Default false (the body is removed). */
+    keepMounted?: boolean;
+    disabled?: boolean;
+    /** wrap the summary button in a heading of this level (2–6) so the
+     *  drawer can title a section without lying to the document outline */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    /** skin hooks — tapestry-ui components style through CSS, never props */
+    class?: string;
+    summaryClass?: string;
+    bodyClass?: string;
+    id?: string;
+}
+export declare function Drawer(props: DrawerProps): JSX.Element;
+export interface DrawerItem {
+    id?: string;
+    summary: ComponentChildren;
+    content: ComponentChildren;
+    defaultOpen?: boolean;
+    disabled?: boolean;
+}
+export interface DrawerListProps {
+    items: DrawerItem[];
+    /** see Drawer.keepMounted — the whole list slides or none of it does */
+    keepMounted?: boolean;
+    /** at most one open at a time — the accordion behavior */
+    exclusive?: boolean;
+    headingLevel?: DrawerProps['headingLevel'];
+    class?: string;
+    summaryClass?: string;
+    bodyClass?: string;
+    onOpenChange?: (openIds: string[]) => void;
+}
+/** A list of drawers from data — and with `exclusive`, an accordion.
+ *  Purely a layer over <Drawer/>: everything it can do, composition can. */
+export declare function DrawerList(props: DrawerListProps): JSX.Element;

package/dist/drawer.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// @tapestry-ui/drawer — the disclosure drawer (Tapestry UI citizen #1).
+//
+// DESIGN RULINGS (Brandon, 2026-09-25): WCAG 2.1 AA from the ground up ·
+// nestable · skin via CSS · as little coupling as we can get away with ·
+// composition-first, with a data-source layer as sugar on top.
+//
+// THE CONTAINER CONTRACT (the lesson this component was born from): a
+// drawer is only half a component — the other half is the scroll contract
+// of whatever contains it. A Drawer NEVER owns scrolling and never grows
+// its container; the CONSUMER decides which ancestor scrolls when open
+// drawers exceed the space. See README "The container contract" — a modal
+// that skips that section will push this drawer's tail out of its own
+// bounds, exactly once, and then read the section.
+//
+// A11y shape: the WAI-ARIA disclosure pattern. The summary is a real
+// <button> (Enter/Space free, focusable, honest in every AT) carrying
+// aria-expanded + aria-controls; the body is a region the button controls.
+// `headingLevel` wraps the button in <h2>..<h6> so document outlines stay
+// truthful when the drawer titles a section.
+import { h, Fragment } from 'preact';
+import { useId, useState } from 'preact/hooks';
+export function Drawer(props) {
+    const autoId = useId();
+    const id = props.id ?? `tui-drawer-${autoId}`;
+    const bodyId = `${id}-body`;
+    const controlled = props.open !== undefined;
+    const [ownOpen, setOwnOpen] = useState(props.defaultOpen ?? false);
+    const open = controlled ? props.open : ownOpen;
+    const toggle = () => {
+        if (props.disabled)
+            return;
+        const next = !open;
+        if (!controlled)
+            setOwnOpen(next);
+        props.onOpenChange?.(next);
+    };
+    const button = (_jsxs("button", { type: "button", class: cx('tui-drawer-summary', props.summaryClass), "data-part": "summary", "aria-expanded": open, "aria-controls": bodyId, disabled: props.disabled, onClick: toggle, children: [_jsx("span", { class: "tui-drawer-caret", "data-part": "caret", "aria-hidden": "true" }), props.summary] }));
+    const H = props.headingLevel ? `h${props.headingLevel}` : null;
+    return (_jsxs("div", { id: id, class: cx('tui-drawer', props.class), "data-part": "root", "data-state": open ? 'open' : 'closed', "data-disabled": props.disabled ? '' : undefined, children: [H ? h(H, { class: 'tui-drawer-heading', 'data-part': 'heading' }, button) : button, (open || props.keepMounted) && (_jsx("div", { id: bodyId, class: cx('tui-drawer-body', props.bodyClass), "data-part": "body", role: "group", "data-animated": props.keepMounted ? '' : undefined, inert: !open || undefined, children: props.keepMounted
+                    ? _jsx("div", { class: "tui-drawer-body-inner", "data-part": "body-inner", children: props.children })
+                    : props.children }))] }));
+}
+/** A list of drawers from data — and with `exclusive`, an accordion.
+ *  Purely a layer over <Drawer/>: everything it can do, composition can. */
+export function DrawerList(props) {
+    const autoId = useId();
+    const ids = props.items.map((it, i) => it.id ?? `tui-dl-${autoId}-${i}`);
+    const [openIds, setOpenIds] = useState(props.items.flatMap((it, i) => (it.defaultOpen ? [ids[i]] : []))
+        .slice(0, props.exclusive ? 1 : undefined));
+    const setOpen = (itemId, open) => {
+        const next = open
+            ? props.exclusive ? [itemId] : [...openIds, itemId]
+            : openIds.filter((x) => x !== itemId);
+        setOpenIds(next);
+        props.onOpenChange?.(next);
+    };
+    return (_jsx(Fragment, { children: props.items.map((it, i) => (_jsx(Drawer, { id: ids[i], summary: it.summary, open: openIds.includes(ids[i]), onOpenChange: (o) => setOpen(ids[i], o), disabled: it.disabled, keepMounted: props.keepMounted, headingLevel: props.headingLevel, class: props.class, summaryClass: props.summaryClass, bodyClass: props.bodyClass, children: it.content }, ids[i]))) }));
+}
+function cx(...parts) {
+    return parts.filter(Boolean).join(' ');
+}

package/package.json

@@ -1,6 +1,56 @@
 {
   "name": "@tapestry-ui/accordion",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.3.0",
+  "description": "A nestable, WCAG 2.1 AA accordion (disclosure) for Preact \u2014 headless behavior, optional slide, skin via CSS. Forged inside a woven-tapestry game; ships with its container contract, not just its markup.",
+  "license": "MIT",
+  "author": "Brandon Minton",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/accordion.d.ts",
+      "default": "./dist/accordion.js"
+    },
+    "./styles.css": "./styles.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "styles.css",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "test": "vitest run",
+    "prepublishOnly": "npm run test && npm run build"
+  },
+  "peerDependencies": {
+    "preact": ">=10.24.0"
+  },
+  "devDependencies": {
+    "jsdom": "^25.0.1",
+    "preact": "^10.29.4",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.10"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ryurage/brandonminton.git",
+    "directory": "packages/tapestry-ui/accordion"
+  },
+  "keywords": [
+    "preact",
+    "accordion",
+    "disclosure",
+    "squeezebox",
+    "collapse",
+    "a11y",
+    "wcag",
+    "headless",
+    "tapestry-ui"
+  ]
+}

package/styles.css

@@ -0,0 +1,54 @@
+/* @tapestry-ui/accordion — STRUCTURAL styles only. The skin is yours:
+   override the custom properties, or ignore this file entirely and
+   style [data-part] hooks from scratch. Nothing here picks a color. */
+.tui-disclosure__summary {
+  display: flex;
+  align-items: center;
+  gap: var(--tui-disclosure-gap, 0.4em);
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: var(--tui-disclosure-summary-pad, 0.25em 0);
+  font: inherit;
+  color: inherit;
+}
+.tui-disclosure__summary:disabled { cursor: default; opacity: 0.5; }
+.tui-disclosure__summary:focus-visible {
+  outline: var(--tui-disclosure-focus, 2px solid currentColor);
+  outline-offset: 2px;
+}
+.tui-disclosure__caret {
+  width: var(--tui-disclosure-caret-size, 0.6em);
+  flex: none;
+  opacity: 0.7;
+}
+.tui-disclosure__caret::before { content: var(--tui-disclosure-caret-closed, "▸"); }
+[data-state="open"] > * > .tui-disclosure__caret::before,
+[data-state="open"] > .tui-disclosure__summary .tui-disclosure__caret::before {
+  content: var(--tui-disclosure-caret-open, "▾");
+}
+.tui-disclosure__body { padding-inline-start: var(--tui-disclosure-indent, 1em); }
+/* keepMounted: 0fr -> 1fr animates to the content's real height, and the closed
+   body is hidden as well as inert, so browsers without `inert` still keep it
+   out of the focus order and the a11y tree. */
+.tui-disclosure__body[data-animated] {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows var(--tui-disclosure-slide, 280ms) ease, visibility 0s;
+}
+.tui-disclosure[data-state="closed"] > .tui-disclosure__body[data-animated] {
+  grid-template-rows: 0fr;
+  visibility: hidden;
+  transition: grid-template-rows var(--tui-disclosure-slide, 280ms) ease,
+              visibility 0s linear var(--tui-disclosure-slide, 280ms);
+}
+.tui-disclosure__body[data-animated] > .tui-disclosure__body-inner { overflow: hidden; min-height: 0; }
+@media (prefers-reduced-motion: reduce) {
+  .tui-disclosure__body[data-animated] { transition: none; }
+}
+.tui-disclosure__heading { margin: 0; font: inherit; }
+
+/* the molecule adds nothing structural: a set of disclosures is a stack of them */
+.tui-accordion { display: block; }