@esportsplus/ui 0.56.4 → 0.57.0

package/README.md

@@ -52,106 +52,68 @@ html`
 ### Form Controls
 | Component | Description | Variants |
 |-----------|-------------|----------|
-| `input` | Text input with validation state | - |
-| `textarea` | Multi-line text input | - |
-| `checkbox` | Checkbox with label | - |
-| `composer` | Chat input with toolbar actions, send button and footer | - |
+| `input` | Text input with validation state; `input.scrub` is a numeric `input` whose label scrubs the value on drag (Shift ×10, Alt ×0.1, optional pointer lock) over a tape measure; arrows step, Escape restores; `input.tag` is a chip field turning typed or pasted text into tags that form in place, nudge on duplicates, and go on a double Backspace; `name` submits `name[]` | `input.scrub`, `input.scrub.field`, `input.scrub.label`, `input.tag`, `input.tag.field` |
+| `textarea` | Multi-line text input; `autoresize` animates height between its minimum and maximum, respecting reduced motion | - |
+| `checkbox` | Checkbox with label; `checkbox.group` builds a checklist with a select-all header (mixed state), optional counter, and Shift-click ranges | `checkbox.group` |
 | `radio` | Radio button group | - |
-| `range` | Range slider | - |
+| `range` | Range slider; add `class: 'range--slider'` to `range` or `range.filter` for the compact slider appearance (replaces the standalone `slider` component); `orientation: 'vertical'` supports vertical single and dual thumbs, with height set by `--vertical-size` (default `176px`); `range.filter` is a range filter with rolling-digit values, a Clear button, a ghost preview of where a click would stretch the selection, and scale ticks; a number `value` gives one thumb, a pair gives two that stop at each other; `fields` adds editable min/max `input` fields, `disabled`; `state.low`/`state.high`, `format`, `prefix`, `step`, `ticks` | `range.filter` |
 | `datalist` | Inertial wheel picker (scroll-snapped listbox) | - |
-| `select` | Dropdown with custom options | - |
-| `switch` | Toggle switch | - |
-| `tasklist` | Checklist that strikes through checked tasks and moves them below the open ones | `tasklist.checkbox` |
+| `select` | Dropdown with custom options; `select.menu` is a tooltip-powered macOS-style listbox opening with the selected option over the trigger, with typeahead and hover scrolling. Its surface, checks, and animations are reusable on tooltips with `--select-menu` | `select.menu` |
+| `switch` | Toggle switch; `switch.group` builds the same group as `checkbox.group` with switches, the select-all knob resting midway when mixed | `switch.group` |
+| `tasklist` | Checklist that strikes through checked tasks and moves them below the open ones; `ordered` keeps both groups in task order, `sortable` lets rows be dragged within their group | `tasklist.checkbox`, `tasklist.content`, `tasklist.description`, `tasklist.item`, `tasklist.label`, `tasklist.row` |
 | `form` | Form wrapper | `form.action`, `form.input` |
-| `cardInput` | Payment card form (`input` fields) with a live card preview that flips for the CVC, brand detection, caret-safe formatting and Luhn/expiry validation; `onvalid` receives brand, last 4, expiry and name | `cardInput.field`, `cardInput.submit` |
-| `checkboxGroup` | Checklist built on `checkbox` with a select-all parent (mixed state), drawn marks, and Shift-click ranges | - |
-| `colorPicker` | Saturation pad, hue/opacity sliders (`range`), hex field (`input`), and an animated recent-colors row | - |
-| `dateRangePicker` | Two-month calendar (one below 540px) with presets, a hover-preview band, sliding month changes, full grid keyboard navigation and an Apply confirmation; `state.start`/`state.end` are ISO dates, `onapply` receives the range, `dateRangePicker.describe` formats it | `dateRangePicker.day` |
-| `emailTypoFix` | Email field (`input`) that suggests a fix for common domain typos after a pause, applying it with a letter-morph; `state.sent` swaps the hint for a sent note | `emailTypoFix.field`, `emailTypoFix.suggest` |
-| `inlineEdit` | Click-to-edit text that swaps in an `input` (or `textarea` with `multiline`) without moving a glyph; Enter/blur saves, Escape cancels, `onsave` fires | `inlineEdit.display`, `inlineEdit.field` |
-| `multiStepForm` | Stepped `form.action` card (`input`, `radio`) with a progress bar, directional step transitions, focus moved into each step and a height that springs to fit; `state.panel`, `oncreate`, custom `plans` | `multiStepForm.input` |
-| `radioCards` | Native radio group (`radio`) laid out as cards with a selection ring that glides between them | - |
-| `rangeSlider` | Dual-thumb slider whose thumbs stop at each other, glide on track clicks and keys, show a value tooltip while dragged or focused, and pair with editable min/max `input` fields; `state.low`/`state.high`, `format`, `prefix` | `rangeSlider.input`, `rangeSlider.thumb` |
-| `scrubInput` | Numeric `input` whose label scrubs the value on drag (Shift ×10, Alt ×0.1, optional pointer lock) over a tape measure; arrows step, Escape restores | `scrubInput.field`, `scrubInput.label` |
-| `selectMenu` | macOS-style listbox opening with the selected option over the trigger, with typeahead and hover scrolling | - |
-| `tagInput` | Chip field (`input`) turning typed or pasted text into tags that form in place, nudge on duplicates, and go on a double Backspace; `name` submits `name[]` | `tagInput.field` |
-| `waitlistJoin` | Waitlist signup (`form.action`, `input`) with friendly email validation, a queue strip you drop into and hop along (FLIP), a rolling `counter` position and a referral link copied via `clipboard.write`; `onjoin` | `waitlistJoin.input` |
+| `cc` | Payment card form (`input` fields) with a live card preview that flips for the CVC, brand detection, caret-safe formatting and Luhn/expiry validation; `onvalid` receives brand, last 4, expiry and name | `cc.field`, `cc.submit` |
+| `colorPicker` | Saturation pad, hue/opacity sliders (`range`), hex field (`input`) with a `copy` button, and an animated recent-colors row (hidden while empty; `recent: false` leaves it out entirely); `value` is required, no surface of its own, so place it in a `card` | `colorPicker.swatch` |
+| `inlineEdit` | Click-to-edit text that swaps in an `input` (or `textarea` with `multiline`) without moving a glyph; Enter/blur saves, Escape cancels, `onsave` fires. `inlineEdit.rich` edits markdown in place as a controlled editor: the text is a document of blocks and marks rendered by the template, every input (typing, deleting, Enter, formatting, paste, drop, an input method's composition) changes that document rather than the DOM, and it keeps its own undo/redo (Mod+Z, Mod+Shift+Z/Mod+Y). `features` whitelists what each field allows (bold, italic, strike, code, highlight, link, heading, quote, codeblock, bullet, ordered, task, clear, copy), and only those appear in its selection toolbar, shortcuts, pastes and saved markdown. `status: true` (or a `{ phase, savedAt }` object to read or drive it) shows the save status under either field: unsaved while the edit differs, saving while a promise returned by `onsave` is pending, then saved, rolling to "Saved 3 min ago" | `inlineEdit.display`, `inlineEdit.field`, `inlineEdit.status`, `inlineEdit.rich.editor`, `inlineEdit.rich.status`, `inlineEdit.rich.toolbar`, `inline-edit--seamless` |
 
 ### Interactive
 | Component | Description | Variants |
 |-----------|-------------|----------|
-| `button` | Standard button | `button.fan`, `button.hold` |
-| `tooltip` | Popup content | `tooltip.context`, `tooltip.menu`, `tooltip.onclick`, `tooltip.onhover` |
+| `button` | Standard button; `button.hold` confirms on a press-and-hold, inverting the whole button as it fills, or only the label with `button--hold-text` (`--fill-color`); `button.morph` is an async save (`onsave`) that morphs into a spinner circle, confirms with a check and shakes on failure, with `--morph-background` for its colour | `button.fan`, `button.hold`, `button.morph`, `button--hold-text` |
+| `tooltip` | Popup content; `tooltip.onhover` also opens on keyboard focus and closes on Escape, and `tooltip.onhover.trigger({ delay, state })` is the same behaviour to spread on your own `.tooltip` element; `delay: { open?, close? }` (ms, on `tooltip.onhover` and `tooltip.shared`; each left out is instant) holds the pointer before opening and after leaving, and for 500ms after a delayed tooltip closes the next opens at once, without its entrance; `tooltip.menu` is a keyboard menu (arrows, Home/End, Escape returns focus, Tab closes) that closes once an option is chosen; `tooltip.nestedMenu({ animate, items, onnavigate, state })` is a drill-down menu whose `items` nest to any depth: a branch's panel grows out of its row over the dimmed parent, and its header or the parent's scrim goes back; arrows/Home/End move, Right/Left drill and return, Escape goes back a level then closes (`animate: false` skips the motion, `tooltip.nestedMenu.trigger` styles the button); `tooltip.shared({ delay, direction, dismiss, interactive, keep, state })` is one tooltip for any number of triggers: spread `tip.bind(content)` on a trigger (a string, or a function returning a template, rendered on every open unless `keep`), or `tip.delegate({ content, edge, selector })` on a container to make every matching descendant a trigger (default `[data-tooltip]`, its value the content; `edge` lines the tooltip up past the container's edge), and place `tip.render(attributes)` once; it opens in the top layer beside the trigger, flips when out of room, and glides between triggers while its content slides in the direction of travel; `interactive` makes it a card the pointer can enter, toggled by taps and keys, with Tab carried into it; `keep` mounts each bound trigger's content on its first open and keeps it for reopening until that trigger unmounts; `dismiss` is a selector whose clicks inside close it (`'a[href]'` for navigation); `state.active` is whether it is open and `state.index` which bound trigger, numbered in `bind()` order (-1 for none), and setting it opens that trigger | `tooltip.context`, `tooltip.menu`, `tooltip.nestedMenu`, `tooltip.onclick`, `tooltip.onhover`, `tooltip.onhover.trigger`, `tooltip.shared` |
 | `accordion` | Collapsible sections | - |
 | `clipboard` | Copy to clipboard | `clipboard.copy`, `clipboard.write` |
-| `command` | Command palette: modal + input, grouped live filtering, keyboard navigation | `command.input`, `command.item` |
+| `copy` | Icon button copying `value` (a string or a function read on click); the copy icon turns into a check that draws in, then back after `timeout` ms (default `3000`); `label`, `success` and `error` set its accessible name per state | - |
+| `command` | ⌘K/Ctrl+K command palette on `overlay` + `input`: substring-then-subsequence matching with highlighted runs, grouped results, arrow/Enter keys, `onrun`; `tabs` adds a row of tabs under the search, marked by `highlight`, whose views are `frame--swap`s, drifting in from their side, and cycle with Tab/Shift+Tab (All leads with recent commands, persisted through any `store` implementing `get`/`set`, then lists every command; each command group gets its own tab; a Shortcuts tab lists `shortcuts`); setting `state.tab` (`'all'`, `'shortcuts'` or a group name) switches views and clears the search. `render(groups)` supplies custom result markup: each item exposes its `label`, highlighted `content`, command `id`, and `attributes` to spread onto the option element so selection and keyboard navigation keep working. Icons are sprite ids; `.command-trigger` also styles standalone search buttons | `command.dialog` (e.g. `overlay--blur`), `command.input`, `command.option`, `command.trigger`, `command--centered` |
+| `editor` | Editor family under one namespace. `editor.code` is a source editor on a persistent native textarea editing an `EditorDocument` that keeps its own undo history: syntax colors (TypeScript/TSX, JavaScript, CSS/SCSS, HTML, JSON, Python, Markdown), line numbers, multiple and rectangular selections, find/replace, go to line, folding, wrap, visible whitespace and a minimap; `options.services` adds completion, hover and diagnostics from a language-server `transport` (or completes from the document's own words); `editor.markdown` renders Markdown in place and edits one block at a time; `editor.code` adds sticky scroll, color swatches, links, unicode warnings, rulers, a git gutter (`baseline`), keybinding overrides (`keybindings`, exported `commands`) and merge-conflict lenses; `editor.tree` is the file tree, with drops from the desktop (`operations.import`), dragging files out (`export`) and next/previous change or problem; `editor.diffs` is a split or unified diff viewer and `editor.diffs.merge` a three-way merge editor; `editor.workspace` combines them with an explorer, tabs, quick open and file operations over a host you supply | `editor.code`, `editor.diffs`, `editor.diffs.merge`, `editor.markdown`, `editor.tree`, `editor.workspace` |
 | `alert` | Notifications | error, info, success types |
-| `backToTop` | Floating back-to-top button with a scroll-progress ring and an arrow that lifts off; follows the window or any scroller | `back-to-top--dark`, `back-to-top--fixed` |
-| `bookmarkButton` | Save toggle whose ribbon fills from the bottom and lands with a squash, with an optional rolling count | `bookmark-button--white` |
-| `carousel3d` | Draggable 3D card ring that spins on a spring, throws with momentum, and flattens under reduced motion; `state.active` is two-way | `carousel3d.button`, `carousel3d.card` |
-| `commandPalette` | ⌘K/Ctrl+K launcher on `modal` + `input`: substring-then-subsequence matching with highlighted runs, grouped results, arrow/Enter keys, `onrun` | `commandPalette.dialog`, `commandPalette.input`, `commandPalette.option`, `commandPalette.trigger`, `command-palette--blur`, `command-palette--centered` |
-| `dock` | macOS-style dock whose icons swell toward the cursor on a spring, with delayed `tooltip` labels and a hop-and-squash launch that lights a running dot (per-item `state.running`, `onlaunch`) | `dock.button`, `dock--square`, `dock--subtle` |
-| `expandingCard` | Card list whose cards morph (FLIP) into a `modal` detail dialog and fly back into their slot; `state.open` is two-way | `expandingCard.card` |
-| `hoverCard` | Inline trigger with a delayed preview card (open 500ms, close grace 150ms); triggers sharing `hoverCard.group()` hand the card over instantly, travelling between them; tap, focus and Escape supported | `hoverCard.content`, `hoverCard.group`, `hoverCard.trigger`, `hover-card--fade` |
-| `kanbanBoard` | Columns of cards dragged within and between lists (built on `sortable` groups), with keyboard moves | - |
-| `morphingButton` | Async save button that morphs into a spinner circle, confirms with a check, and shakes on failure | `morphing-button--blue` |
-| `pageDots` | Page indicator driven by a continuous `state.progress`; the pill stretches between dots like a worm, with an optional autoplay countdown | `page-dots--large` |
+| `chatMinimap` | Rail of lines mapping a conversation, one per turn: the hovered line swells its two neighbours either side, one gliding `tooltip.shared` card previews each turn's `title` and `description`, previous/next buttons step through the thread, and `state` (`start`/`end`) lights the turns in view. `turns` may be a `ReactiveArray` so the rail grows with the chat; `chatMinimap.spy({ state, turns })` drives `state` from an `IntersectionObserver` on the thread and its `scrollTo` is the `onnavigate` | `chatMinimap.item`, `side: 'left'` |
+| `dock` | macOS-style `card` shelf whose icons swell toward the cursor on a spring, with delayed `tooltip` labels (`group` shares one gliding `tooltip.shared` label) and a hop-and-squash launch that lights a running dot (per-item `state.running`, `onlaunch`) | `dock.button`, `dock--square` |
+| `card.expand` | List of `card--expand` cards that each morph into their own `card` `overlay` and fly back into their slot through a view transition (a plain `overlay` fade where unsupported, a cross-fade under reduced motion); `state.open` is two-way | `card.expand.trigger` |
+| `pagination.dots` | Page indicator driven by a continuous `state.progress`; the pill stretches between dots like a worm, with an optional autoplay countdown | `pagination.dots.dot`, `pagination--dots-large` |
 | `pullToRefresh` | Rubber-band pull gesture (touch and mouse) with a stepped tick spinner; new items above the old first one slide in | - |
-| `selectionToolbar` | Contenteditable text with a floating bold/italic/link/highlight/copy toolbar that follows the selection | `selection-toolbar--white` |
-| `shareButton` | Share pill that reshapes into copy-link (via `clipboard.write`), X, email and native share targets | `share-button--surface` |
-| `shortcutSheet` | Searchable keyboard-shortcut reference on `modal` + `input`, opened with `?`; pressing a listed shortcut lights its row and keycaps (`Mod` = ⌘/Ctrl) | `shortcutSheet.dialog`, `shortcutSheet.input`, `shortcutSheet.row`, `shortcutSheet.trigger`, `shortcut-sheet--blur` |
-| `snapCarousel` | Native scroll-snap card carousel with mouse flick, scroll-driven focus scaling, and edge-aware arrows | `snapCarousel.arrow`, `snapCarousel.card` |
-| `sortable` | Drag-and-drop reordering of an element's children, across containers with `group` | `sortable--{effect}` modifiers |
-| `statusPicker` | Avatar presence menu (`menuitemradio`) whose shaped badge spins into the next status | - |
-| `storyProgress` | Auto-advancing stories with segmented progress bars, tap halves to navigate, press-and-hold or Space to pause | `storyProgress.toggle` |
-| `swipeDeck` | Card stack decided by swipe, arrow keys, or buttons, with undo | - |
+| `sortable` | Drag-and-drop reordering of a reactive list's items, across lists with `group` | `sortable--{effect}` modifiers |
+| `story` | Auto-advancing stories, each any `Renderable`, on a `frame--slide` track with segmented progress bars whose CSS fill is the timer (`--duration`, or `duration` in ms); tap the left third to go back (replaying the first story) and the rest to advance, drag or flick between stories (rubber-banding at the ends), press-and-hold or Space to pause; links and controls inside a story keep their own clicks | `story.toggle` |
 
 ### Display
 | Component | Description |
 |-----------|-------------|
-| `autosave` | Save status driven by `state.status` (`unsaved`, `saving`, `saved`) and `state.savedAt` |
-| `counter` | Animated number with currency formatting |
+| `counter` | Rolling-digit number with locale-aware currency formatting, sized by the surrounding `font-size`; `--color` sets the digits (`counter--inherit` takes the text color) and a `--fill` gradient replaces it (`counter--shade`); screen readers get the formatted value |
 | `loader` | Loading spinner |
 | `loading` | Border loading indicator |
-| `typewriter` | Animated typing effect |
-| `typewriterRetype` | Headline word that is selected and typed over with a jittered, human rhythm; shares the `typewriter` caret variables and `--block`/`--glow`/`--hard`/`--underscore` modifiers, crossfades under reduced motion |
-| `highlight` | Viewport intersection highlight |
+| `typewriter` | Animated typing effect; `typewriter.retype` is a headline word that is selected and typed over with a jittered, human rhythm, landing whole words under reduced motion. Both share the caret variables and `--block`/`--hard`/`--underscore` modifiers. `typewriter.rotate` is a rotating word (`state.index`, `state.paused`) whose shared letters glide into place while the others blur out and in; `typewriter-rotate--accent` |
+| `highlight` | Layer that glides behind its parent's children on hover and focus and rests on the `--active` one (`target` for nested items, `hover: false` for the active layer only); `line: 'bottom' \| 'left' \| 'right' \| 'top'` adds an edge line to the active layer with both fills kept `--line-inset` clear of it, `fill: false` drops the active background, `--glide-tail-duration-active` longer than `--glide-duration-active` stretches it toward the next item, `--inset-block` / `--inset-inline` pull the fill in from the item |
 | `ellipsis` | Animated dots |
 | `icon` | SVG sprite wrapper |
 | `number` | Number formatting |
 | `truncate` | Text truncation |
 | `json` | JSON display |
-| `taskList` | Streaming log of an agent's tasks and steps |
-| `webSearch` | Streaming trail of an agent's searches and the sources it opened |
-| `announcementBanner` | Dismissible top-of-page announcement that slides in and collapses the space it held |
-| `dynamicIsland` | Morphing pill that springs between idle, timer, music and ringer states (`state.mode`) with announced changes |
-| `featureSpotlight` | Scroll-driven product tour: a pinned screenshot whose spring camera pans and zooms to the `data-spot` (or `region`) of the feature being read, with a dimming spotlight |
-| `onboardingChecklist` | Setup checklist (`checkbox` rows, `accordion` details) with a spring progress ring, strike-through on done, and a celebration once every task is complete; `done`, `open`, `ondismiss`, `state.count` |
-| `undoToast` | List whose deletes wait behind an Undo toast (`toast.*` with a countdown ring) before committing |
-| `textProgress` | `progressbar` whose label fills with ink on a spring (`state.value`), with rolling digits and a drawn check on done |
-| `wordRotator` | Rotating word (`state.index`, `state.paused`) whose shared letters glide into place while the others blur out and in |
-| `codeMorph` | Stepped code tabs (`state.step`) diffed at token level: shared tokens glide to their new line and column, new ones fade in, removed ones flash red; copy via `clipboard.write` |
-| `contributionHeatmap` | Year of activity squares that sweep in by column, with a hover label (reuses `tooltip` styles), roving-tabindex grid keys and `contributionHeatmap.legend`; `contribution-heatmap--blue` |
+| `announcement` | Animated top-of-page container (`state.active`) built on a non-modal `overlay` in the page flow; slides its content in and collapses the space it held, with overlay's drag dismissal and background fill when pulled away from its top edge; the content and close control are the consumer's |
+| `toaster` | `toaster(attributes)` returns `{ content, toast }`: place `content` on the page, and `toast(attributes, (state) => content)` queues into that toaster alone, so separate toasters can differ in placement and style. Placed with overlay's own placement modifiers and variables (`toaster--{n,ne,e,se,s,sw,w,nw}`, `--margin-*`, `--translate`, `--stack-peek`, `--stack-scale`); side stacks recede sideways like overlay's; collapsed it shows `limit` toasts (default 3) and an overflow card counting the rest (`overflow: (count) => content`, `toaster.overflow` attributes), and hovering fans all of them out. Content renders lazily with the toast's `state`: `state.active = false` dismisses it and changing `state.duration` keeps the time already spent; pass `state` to hold it from outside, `toast.dismiss()` clears the toaster. The timer is a CSS animation, exposed as `--toast-progress` (0 to 1) and `--toast-seconds`, that runs only on the front toast and stops while the stack is hovered. The toast is only the stacking container, so its surface is the consumer's class; it keeps a close button (`toast.close` attributes) around its content (`toast.content` attributes) |
+| `progress` | Progress bar (`state.value`) with an optional label, percentage and a `status` line derived from the value; `progress.text` is a `progressbar` whose label fills with ink on a spring (`state.value`), with rolling digits and a drawn check on done |
+| `heatmap` | Calendar of daily values that sweeps in by column; one `tooltip.shared` delegated across the cells renders each day through your `tooltip(day, index)` template (`describe(day)` names the cell), drag-to-scroll via `scrollbar.drag`, roving-tabindex grid keys and `heatmap.legend`; `heatmap--blue` |
 | `relativeTime` | Self-updating `<time>` ("4 min ago") that wakes once per visible change and rolls its digits; full date in a `tooltip` on hover/focus; `state.now` pins the clock |
-| `sparkline` | Inline SVG line chart that draws itself in, with a scrub readout for pointer, touch and arrow keys (`state.active`, `state.index`); `sparkline--accent` |
-| `statCounter` | Metric cards whose numbers roll via `counter--ticker`, with trend chips and scrubbable mini sparklines; update through `state.stats` |
+| `metric` | Card with a title, value, delta and an SVG line chart that draws itself in, with a scrub readout for pointer, touch and arrow keys (`state.active`, `state.index`). Fills its container (`--width: 100%`) and redraws at its measured size on every resize, so the stroke, dot and tip keep their size; the plot height tracks the card width between `--plot-height` bounds, and the delta wraps under the value in narrow cards. A `ReactiveArray` as `data` is live: every mutation (`push`/`shift` for a sliding window, `splice` to replace) redraws the card, which rests on the newest point unless it is being read. Lay cards out with `grid`; `metric--accent`. `metric.flash` is a live value (`state.value`) that marks each change with a directional roll, tint and arrow, announcing the settled value politely |
+| `surfaceField` | Canvas field of dots and lines lit by the pointer that clears and bends around surfaces (rounded, circular or turned, read from their styles), carries a pannable `camera` as a parallax floor, draws `links` between surfaces as lit channels, and sleeps when idle; `worker` takes the URL of `@esportsplus/ui/surface-field/worker` (Vite: `?worker&url`) to draw in an OffscreenCanvas worker. `surfaceField.surface` is a draggable, resizable card with an optional `title`/`body`, inline-edited (`inlineEdit`) with `editable` | `surfaceField.surface` |
 
 ### Layout
 | Component | Description |
 |-----------|-------------|
-| `breadcrumb` | Navigation trail: `breadcrumb.list`, `.item`, `.link`, `.menu`, `.page`, `.separator`, `.ellipsis` |
-| `scrollbar` | Native scrollbar styling |
-| `tabs.scss` | Tab panels: instant by default, `tabs--slide` for horizontal motion, `tabs--scroll` for vertical motion |
-| `sidebar` | Side navigation |
-| `modal` | Native `<dialog>` modal driven by `state.active` (Esc and backdrop click close it) |
-| `overlay` | Full-viewport overlay container |
-| `breadcrumbs` | Path trail that folds middle segments into a `tooltip.onclick` menu as space runs out, sliding the rest over (FLIP); `onnavigate` intercepts links |
-| `collapsibleSidebar` | Navigation rail that springs between labelled and icon-only widths, with a sliding highlight and `tooltip-message` tips while collapsed (`state.expanded`, `state.selected`) |
-| `morphingNav` | Navigation bar whose dropdown panel morphs size, position and caret between sections on hover intent, with full keyboard support (`state.active`) |
-| `scrollSpine` | Scale-drawing table of contents: bands sized to each section fill as you read, and a spring marker stretches between them |
-| `sheet` | Bottom sheet on `modal` (`modal--sheet`) that drags to dismiss past 25% or on a flick, rubber-bands upward, and fades its backdrop with the drag (`sheet.handle`, `sheet--full`) |
-| `slidingTabs` | Tab list whose underline stretches toward the new tab and gathers under it, with a hover pill and cross-sliding `tabs.scss` panels (`state.selected`) |
-| `stickyStack` | Sticky cards that scale and dim as the next one slides over (scroll-driven animations, with a scroll-listener fallback) |
+| `scrollbar` | `--scrollbar-scope` on a site or subtree root styles that root and its descendants, with smooth scrolling (instant under reduced motion); overscroll containment applies to the scope root and explicit `--scrollbar` containers, allowing clipped descendants to pass wheel input to their scroller. Containers keep their own overflow and gutters, while children can override inherited variables or add scrollbar modifiers without the base class. `--scrollbar-behavior` and `--scrollbar-overscroll` customize scrolling. All visible variants use arrowless custom bars in Chromium/WebKit: `--scrollbar-size` sets the thumb's resting width (default `6px`; `--scrollbar-auto` uses the platform width), widening to `--scrollbar-size-hover` (default `--scrollbar-size` + `2px`, which is also the gutter width) while hovered or dragged; `--scrollbar-align` places that growth (default `0` hugs the window edge and grows toward the content, `0.5` grows both ways), and `--scrollbar-rail-color` paints the track (default `transparent`, also used natively elsewhere); and `--scrollbar-border-radius` rounds it (defaults to a third of `--scrollbar-size`, `3px` under `--scrollbar-auto`; use `0px` for square corners). The thumb follows the token state system: `--scrollbar-color-default`, `--scrollbar-color-hover` and `--scrollbar-color-pressed` (default black `400`/`300`/`500`), or a color modifier such as `--scrollbar-blue`. `--scrollbar-hidden` hides the bar. Other browsers retain native rendering, with `--scrollbar-width` (default `thin`) accepting `auto`, `thin`, or `none`, the default color, and native thumb corners. `--scrollbar-horizontal` scrolls x only; edge effects driven by scroll timelines, each edge reaching full strength once the content has scrolled the effect's size (`--scroll-fade-size`, `--scroll-blur-size`) past it, and running along x when combined with `--scrollbar-horizontal` (`import { scrollbar } from '@esportsplus/ui/css-utilities'`): the `--scrollbar-fade` class works alone and leaves custom bars unfaded, with `scrollbar.fade()` adding a JS fallback only where timelines are unsupported, while blur needs `scrollbar.blur()`, which inserts the sticky blur edges (the `--scrollbar-blur` class alone renders nothing) and adds the same fallback; a horizontal blur lays the scroller out as a flex row so the edges sit beside its content; `scrollbar.drag('horizontal' \| 'vertical' \| 'both')` adds mouse drag-to-scroll (`--scrollbar-drag`) |
+| `card.scss` | Surface (background, radius, shadow and padding variables); `card--morph` makes it a shell that morphs between stacked `card-morph-layer`s inside a clipping `card-morph-viewport`: size it through `--morph-width`/`--morph-height`, each layer is a `frame frame--swap` (mark the shown one `--active`, set `--i` on the viewport and `--n` on each layer), `card--instant` snaps; `--morph-*` variables tune the motion |
+| `frame.scss` | Sibling frames sharing one spot, the `--active` one shown: instant by default, `frame--slide` / `frame--scroll` move them like a horizontal / vertical track, `frame--swap` crossfades in place with a directional drift and blur (the `tooltip.shared` swap); shared by `command`, `tooltip.shared` and `card--morph` |
+| `overlay` | Native `<dialog>` driven by `state.active` (Esc and backdrop click close it), placed by `overlay--c` (default), an edge (`overlay--n`, `overlay--s`, `overlay--w`, `overlay--e`) or a corner (`overlay--ne`, `overlay--se`, `overlay--sw`, `overlay--nw`, which enter and drag off by their top or bottom edge); placements slide in from their side on the iOS drawer curve and square the corners they touch unless `overlay--floating`. Every overlay but a rail drags to dismiss (toward its edge, or downward when centered) past 25% or on a flick, rubber-bands inward and fades the backdrop with the drag; when its own content scrolls, touch drags only from `overlay.handle`. Overlays opened over one another stack: each covered layer shrinks, dims and peeks out from under the one above (`--stack-scale`, `--stack-dim`, `--stack-peek`) and follows the top layer back as it is dragged away; an `overlay-page` direct child of `<body>` (or of a non-modal overlay's container) recedes the same way; `modal: false` opens without a backdrop, leaves the page interactive and sits in its positioned container; `flow: true` keeps it non-modal in the page layout, preserves focus, skips layer stacking, and collapses its parent row during vertical drag dismissal (used by `announcement`); `rail: true` keeps it open non-modal and widens it while a mouse hovers or keyboard focus is inside (or `state.active` is set) from `--width-closed` to `--max-width`, clipping rows rather than reflowing them. Motion: `overlay--fade`, `overlay--scale`, `overlay--spring`, `overlay--alert`, `overlay--blur` |
+| `breadcrumb` | Path trail that folds middle segments into a `tooltip.menu` as space runs out, the rest sliding over as each one closes; `onnavigate` intercepts links; `separator: 'chevron' \| 'slash'` (default `'slash'`) |
 
 ### Utility
 | Component | Description |
@@ -162,51 +124,103 @@ html`
 
 ## Component Patterns
 
-### Tabs
-
-Import `@esportsplus/ui/tabs.scss`. Put `.tabs-content` panels inside `.tabs`
-and apply `.--active` to the selected panel. The default switch is instant.
-For motion, add `.tabs--slide` (horizontal) or `.tabs--scroll` (vertical),
-and set `--i` to the negative selected index: `0`, `-1`, `-2`, etc.
+### Overlay popups
+
+`overlay.popup({ state, target, popover })` returns attributes to spread on a
+popup host. Dialog overlays and these popup attributes share the open/close
+lifecycle, including waiting for finite exit animations and cancelling an old
+close when reopened. Popup attributes handle outside pointer dismissal, Escape,
+inert content, and template-managed event cleanup. `target` finds the animated
+surface inside the host; `popover: true` opens it in the native top layer.
+`dismissOn` closes on matching content clicks after their handlers run.
+
+Tooltip variants and select menus use this lifecycle while retaining their
+placement, hover delays, menu keys, and existing styles. Add `--select-menu` to
+a tooltip host to use the select-menu surface, options, checkmarks, and trigger
+styles. On `tooltip.menu`, it also aligns the checked or selected option over
+the trigger and grows from the field, recalculating when the selection changes.
+Use `tooltip-select-menu-trigger`, `tooltip-select-menu-value`, and
+`tooltip-select-menu-option-label` for the measured parts; the tooltip examples
+include a font picker using this modifier.
+
+### Frame
+
+Import `@esportsplus/ui/frame.scss`. Give sibling elements the `.frame` class
+and mark the shown one `.--active`; without a modifier the switch is instant.
+Set `--n`, its own index, on each frame and `--i`, the active index (`0`, `1`,
+`2`, …), once on the parent. The modifiers animate the switch, stacking the
+frames in one grid cell so the tallest sets the height:
+
+- `.frame--slide` / `.frame--scroll` move the frames together like a
+  horizontal / vertical track.
+- `.frame--swap` crossfades in place, like `tooltip.shared` content: a waiting
+  frame sits one `--swap-shift` off to its side, faded and blurred, so the
+  incoming frame drifts in while the outgoing one carries on out the other way.
+  Frames without an index set the direction themselves through `--travel-x` /
+  `--travel-y` and mark the outgoing frame `frame--leaving`. `--swap-*` variables
+  tune it, with `--swap-exit-*` for the outgoing frame.
 
 ```html
-<div style="overflow: hidden; height: 300px;">
-    <div class="tabs tabs--scroll" style="--i: -1;">
-        <div class="tabs-content" inert aria-hidden="true">First panel</div>
-        <div class="tabs-content --active">Second panel</div>
-    </div>
+<div style="overflow: hidden; --i: 1;">
+    <div class="frame frame--swap" style="--n: 0;" inert>First frame</div>
+    <div class="frame frame--swap --active" style="--n: 1;">Second frame</div>
 </div>
 ```
 
-Animated tracks need a clipping parent; vertical tracks also need a definite
-parent height. Keep inactive panels `inert` and update tab/panel ARIA attributes
-alongside the active class. The docs include reactive switching examples.
+Moving frames need a clipping parent. Keep inactive frames `inert` and update
+tab/panel ARIA attributes alongside the active class. `--scrollbar` thumbs clear
+on inactive frames, and on the incoming frame while it carries `.frame--moving` (set
+it on the frame's `translate` transitionrun, clear it on its
+transitionend/transitioncancel). The docs include reactive switching examples.
 
 ### Sortable
 
-Spread `sortable()` onto any element to make its immediate children draggable.
-A dashed `.sortable-placeholder` holds the slot while siblings shift around it,
-and the held item swings with the drag's momentum, pivoting on the grab point.
-Anything with `.sortable-overlay` inside an item only shows while it is held.
+`sortable(items, template, options)` renders a `ReactiveArray` and lets its
+items be dragged: spread `attributes` on the container and render the items
+inside it with `render()`. Each item renders one element and spreads the
+attributes its template is handed on it; they own its `onpointerdown`. A control
+inside an item with an `onpointerdown` of its own keeps its presses, and an item
+of a list nested in another's drags in its own list alone.
+
+A dragged item stays in its list as its own placeholder (`.sortable-item--held`:
+its contents fade out behind a dashed outline) and moves through the list as the
+pointer does, sorting `items` live so it keeps its node; the siblings slide
+around it. A copy follows the pointer from the top layer, swinging with the
+drag's momentum and pivoting on the grab point, then lands on the item. The copy
+renders the `drag` template when given one, the item's own template otherwise;
+anything with `.sortable-overlay` inside it shows only in the copy. `onsort`
+receives the move once the item has landed.
 
 ```typescript
+let tools = new ReactiveArray([{ label: 'Reload' }, { label: 'Share' }]),
+    list = sortable(tools, (tool, attributes) => html`<button ${attributes}>…<span class='sortable-overlay'>${tool.label}</span></button>`, {
+        // Optional: a different look while it is carried.
+        drag: (tool) => html`<div class='toolbar-chip'>${tool.label}</div>`,
+        handle: '.grip',
+        onsort: (tool, from, to) => {}
+    });
+
 html`
-    <div class='toolbar sortable--bouncy sortable--jiggle' ${sortable({ handle: '.grip', onsort: (item, from, to) => {} })}>
-        <button>…<span class='sortable-overlay'>Reload</span></button>
+    <div class='toolbar sortable--bouncy sortable--jiggle' ${list.attributes}>
+        ${list.render()}
     </div>
 `;
 ```
 
-Give several containers the same `group` to let items move between them. The
-placeholder follows the pointer into whichever group container it is over, and
-the `onsort` of the container the drag started in receives the source and target:
+Give several lists the same `group` to let items move between them. The item
+follows the pointer into whichever list it is over, and the `onsort` of the list
+the drag started in receives both arrays. A move between lists splices the item
+out of one and into the other as it happens, which renders it afresh and
+disposes a reactive object moved that way:
 
 ```typescript
-let options = { group: 'board', onsort: (item, from, to, source, target) => {} };
+let options = { group: 'board', onsort: (item, from, to, source, target) => {} },
+    todo = sortable(todoItems, card, options),
+    done = sortable(doneItems, card, options);
 
 html`
-    <ul ${sortable(options)}>…</ul>
-    <ul ${sortable(options)}>…</ul>
+    <ul ${todo.attributes}>${todo.render()}</ul>
+    <ul ${done.attributes}>${done.render()}</ul>
 `;
 ```
 
@@ -219,43 +233,6 @@ Combine up to one modifier of each kind:
 
 The DOM is reordered directly; reactive lists should update their data in `onsort`.
 
-### Task List and Web Search
-
-Both stream an agent's work one unit at a time. A task is one unit for its
-header plus one per step; a search step is one unit, plus one more for its
-Sources row when it has `sources`. On their own they pace themselves
-(`startDelay`, `stepInterval`, and per-step `dwell` for web search) and call
-`onComplete` once the last unit lands. Pass `state` to drive them from real
-events instead; the internal timer switches off.
-
-```typescript
-import { taskList, webSearch } from '@esportsplus/ui';
-
-taskList({
-    collapseOnComplete: 'all',
-    onComplete: () => showAnswer(),
-    tasks: [
-        { runningTitle: 'Editing files', steps: [{ chips: [{ label: 'layout.tsx' }], label: 'Wired it into' }], title: 'Registered the toggle' }
-    ]
-});
-
-let state = reactive({ revealed: 0 });
-
-webSearch({
-    state,
-    steps: [
-        { brand: 'reddit', label: 'Searched Reddit for', meta: '12 threads', query: 'design tokens' },
-        { label: 'Opened the top results', sources: [{ brand: 'github', domain: 'github.com', href: 'https://github.com', title: 'Registry model' }] }
-    ]
-});
-
-// Advance as each tool call resolves.
-state.revealed++;
-```
-
-`working` relabels the trailing indicator, or `false` drops it. `brand` accepts
-any of the 24 built-in site marks; anything else takes an `icon`.
-
 ### Factory Pattern
 
 Components use `template.factory()` supporting flexible call signatures:
@@ -335,6 +312,20 @@ Styles are organized into layers for proper cascade:
 @use '@esportsplus/ui/themes/dark/*.scss';
 ```
 
+### Icons
+
+The icons the components use are exported from `@esportsplus/ui/svg/*.svg`, so a site can match them:
+
+```typescript
+import check from '@esportsplus/ui/svg/check.svg';
+import { icon } from '@esportsplus/ui';
+
+icon({ class: 'my-check' }, check);
+```
+
+Like the components' own SVG imports, these resolve to sprite symbol ids through `@esportsplus/vite`'s svg
+plugin. `check.svg` carries no stroke styling, so set `fill: none` and a `stroke` on the rendered `svg`.
+
 ### Design Tokens
 
 Located in `tokens.scss`:
@@ -358,7 +349,7 @@ Located in `tokens.scss`:
 <p class="--text-uppercase --color-grey-400">
 
 <!-- States -->
-<div class="--skeleton --disabled --hidden">
+<div class="--skeleton">
 ```
 
 ### Component Variables
@@ -463,7 +454,7 @@ type State = {
 
 ## Credits
 
-Many interaction designs (kanban board, carousels, pickers, text effects and more) are ported from
+Many interaction designs (carousels, pickers, text effects and more) are ported from
 [ui-lab](https://github.com/xevrion/ui-lab) by Yash Bavadiya, MIT licensed, © 2026 Yash Bavadiya.
 
 ## License

package/build/components/accordion/index.d.ts

@@ -1,13 +1,12 @@
 import * as template_u1 from '@esportsplus/template';
-import more from './more.js';
 import './scss/index.scss';
-declare const base: {
+declare const _default: {
     (): template_u1.Renderable<any>;
     <T extends {
         class?: template_u1.Attribute<HTMLElement>[] | template_u1.Attribute<HTMLElement>;
         onconnect?: ((element: HTMLElement) => void) | undefined;
         ondisconnect?: ((element: HTMLElement) => void) | undefined;
-        onrender?: ((element: HTMLElement) => void) | undefined;
+        onfirstpaint?: ((element: HTMLElement) => void) | undefined;
         ontick?: ((dispose: VoidFunction, element: HTMLElement) => void) | undefined;
         style?: template_u1.Attribute<HTMLElement>[] | template_u1.Attribute<HTMLElement>;
     } & {
@@ -713,9 +712,15 @@ declare const base: {
         onwindowwebkitanimationstart?: ((this: HTMLElement, event: Event) => void) | undefined;
         onwindowwebkittransitionend?: ((this: HTMLElement, event: Event) => void) | undefined;
         onwindowwheel?: ((this: HTMLElement, event: WheelEvent) => void) | undefined;
+    } & {
+        onactivetouchmove?: ((this: HTMLElement, event: TouchEvent) => void) | undefined;
+        onactivetouchstart?: ((this: HTMLElement, event: TouchEvent) => void) | undefined;
+        onactivewheel?: ((this: HTMLElement, event: WheelEvent) => void) | undefined;
     } & Record<PropertyKey, unknown> & {
+        lines?: number;
         state?: {
             active: boolean | number;
+            expandable?: boolean;
         };
     }>(attributes: T): template_u1.Renderable<any>;
     <T extends template_u1.Renderable<any>>(content: T): template_u1.Renderable<any>;
@@ -723,7 +728,7 @@ declare const base: {
         class?: template_u1.Attribute<HTMLElement>[] | template_u1.Attribute<HTMLElement>;
         onconnect?: ((element: HTMLElement) => void) | undefined;
         ondisconnect?: ((element: HTMLElement) => void) | undefined;
-        onrender?: ((element: HTMLElement) => void) | undefined;
+        onfirstpaint?: ((element: HTMLElement) => void) | undefined;
         ontick?: ((dispose: VoidFunction, element: HTMLElement) => void) | undefined;
         style?: template_u1.Attribute<HTMLElement>[] | template_u1.Attribute<HTMLElement>;
     } & {
@@ -1429,9 +1434,15 @@ declare const base: {
         onwindowwebkitanimationstart?: ((this: HTMLElement, event: Event) => void) | undefined;
         onwindowwebkittransitionend?: ((this: HTMLElement, event: Event) => void) | undefined;
         onwindowwheel?: ((this: HTMLElement, event: WheelEvent) => void) | undefined;
+    } & {
+        onactivetouchmove?: ((this: HTMLElement, event: TouchEvent) => void) | undefined;
+        onactivetouchstart?: ((this: HTMLElement, event: TouchEvent) => void) | undefined;
+        onactivewheel?: ((this: HTMLElement, event: WheelEvent) => void) | undefined;
     } & Record<PropertyKey, unknown> & {
+        lines?: number;
         state?: {
             active: boolean | number;
+            expandable?: boolean;
         };
     }, content?: template_u1.Renderable<any>): template_u1.Renderable<any>;
     bind(context: {
@@ -1439,7 +1450,7 @@ declare const base: {
             class?: template_u1.Attribute<HTMLElement>[] | template_u1.Attribute<HTMLElement>;
             onconnect?: ((element: HTMLElement) => void) | undefined;
             ondisconnect?: ((element: HTMLElement) => void) | undefined;
-            onrender?: ((element: HTMLElement) => void) | undefined;
+            onfirstpaint?: ((element: HTMLElement) => void) | undefined;
             ontick?: ((dispose: VoidFunction, element: HTMLElement) => void) | undefined;
             style?: template_u1.Attribute<HTMLElement>[] | template_u1.Attribute<HTMLElement>;
         } & {
@@ -2145,15 +2156,18 @@ declare const base: {
             onwindowwebkitanimationstart?: ((this: HTMLElement, event: Event) => void) | undefined;
             onwindowwebkittransitionend?: ((this: HTMLElement, event: Event) => void) | undefined;
             onwindowwheel?: ((this: HTMLElement, event: WheelEvent) => void) | undefined;
+        } & {
+            onactivetouchmove?: ((this: HTMLElement, event: TouchEvent) => void) | undefined;
+            onactivetouchstart?: ((this: HTMLElement, event: TouchEvent) => void) | undefined;
+            onactivewheel?: ((this: HTMLElement, event: WheelEvent) => void) | undefined;
         } & Record<PropertyKey, unknown> & {
+            lines?: number;
             state?: {
                 active: boolean | number;
+                expandable?: boolean;
             };
         }> | undefined;
         content?: template_u1.Renderable<any>;
     }): any;
 };
-declare const accordion: typeof base & {
-    more: typeof more;
-};
-export default accordion;
+export default _default;

package/build/components/accordion/index.js

@@ -1,11 +1,14 @@
 import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect } from '@esportsplus/reactivity';
 import * as template_u1 from '@esportsplus/template';
 import { component } from '@esportsplus/template';
-import more from './more.js';
+import { observeSize } from '../../shared/resize.js';
+import { trackTransition } from '../../shared/transition.js';
 import './scss/index.scss';
-const template_04mlrpv2 = template_u1.template(`<div class='accordion'><div class='accordion-content'>`);
+const template_04mlrpv4 = template_u1.template(`<div class='accordion'><div class='accordion-content'>`);
 class ReactiveObject_04mlrpv0 extends reactivity_u0.ReactiveObject {
     #active = this[reactivity_u0.SIGNAL](false);
+    #expandable = this[reactivity_u0.SIGNAL](false);
     constructor() {
         super(null);
     }
@@ -15,16 +18,97 @@ class ReactiveObject_04mlrpv0 extends reactivity_u0.ReactiveObject {
     set active(_v0) {
         reactivity_u0.write(this.#active, _v0);
     }
+    get expandable() {
+        return reactivity_u0.read(this.#expandable);
+    }
+    set expandable(_v1) {
+        reactivity_u0.write(this.#expandable, _v1);
+    }
 }
-const base = component(function ({ state = new ReactiveObject_04mlrpv0(), ...attributes }, content) {
+class ReactiveObject_04mlrpv1 extends reactivity_u0.ReactiveObject {
+    #scrollable = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get scrollable() {
+        return reactivity_u0.read(this.#scrollable);
+    }
+    set scrollable(_v0) {
+        reactivity_u0.write(this.#scrollable, _v0);
+    }
+}
+class ReactiveObject_04mlrpv2 extends reactivity_u0.ReactiveObject {
+    #height = this[reactivity_u0.SIGNAL](0);
+    #instant = this[reactivity_u0.SIGNAL](true);
+    constructor() {
+        super(null);
+    }
+    get height() {
+        return reactivity_u0.read(this.#height);
+    }
+    set height(_v0) {
+        reactivity_u0.write(this.#height, _v0);
+    }
+    get instant() {
+        return reactivity_u0.read(this.#instant);
+    }
+    set instant(_v1) {
+        reactivity_u0.write(this.#instant, _v1);
+    }
+}
+export default component(function ({ lines, state = new ReactiveObject_04mlrpv0(), ...attributes }, content) {
+    let a, c, property = lines === undefined ? 'grid-template-rows' : 'height', ui = new ReactiveObject_04mlrpv1(), viewport;
+    let motion = trackTransition(property, (running, element) => {
+        ui.scrollable = !!state.active && !!element && !running;
+    });
+    effect(() => {
+        let active = !!state.active;
+        ui.scrollable = false;
+        if (!active) {
+            viewport?.scrollTo({ top: 0, behavior: 'instant' });
+        }
+        motion.settle();
+    });
+    if (lines !== undefined) {
+        let measured = new ReactiveObject_04mlrpv2();
+        a = {
+            class: ['accordion--more', () => measured.instant && 'accordion--instant'],
+            onfirstpaint: () => {
+                measured.instant = false;
+            },
+            style: [
+                () => measured.height && `--height: ${measured.height}px;`,
+                `--lines: ${lines};`
+            ]
+        };
+        c = observeSize(({ height }, element) => {
+            let computed = getComputedStyle(element), line = parseFloat(computed.lineHeight) || parseFloat(computed.fontSize) * 1.2;
+            state.expandable = height > Math.ceil(line * lines);
+            measured.height = height;
+        });
+    }
     return (() => {
-        let root_04mlrpv1 = template_04mlrpv2(), element_04mlrpv3 = root_04mlrpv1.firstChild, element_04mlrpv4 = element_04mlrpv3.firstElementChild;
-        template_u1.setProperties(element_04mlrpv3, attributes);
-        template_u1.setList(element_04mlrpv3, 'class', () => state.active && '--active');
-        template_u1.setProperty(element_04mlrpv3, 'inert', () => !state.active);
-        template_u1.slot(element_04mlrpv4, content, 1);
-        return root_04mlrpv1;
+        let root_04mlrpv3 = template_04mlrpv4(), element_04mlrpv5 = root_04mlrpv3.firstChild, element_04mlrpv6 = element_04mlrpv5.firstElementChild;
+        template_u1.slot(element_04mlrpv6, content, 1);
+        template_u1.setProperties(element_04mlrpv6, c);
+        template_u1.setProperties(element_04mlrpv5, attributes);
+        template_u1.setProperties(element_04mlrpv5, a);
+        template_u1.setProperties(element_04mlrpv5, {
+            ...motion.attributes,
+            class: [
+                () => state.active && '--active',
+                () => state.active && ui.scrollable && 'accordion--scrollable'
+            ],
+            inert: () => lines === undefined && !state.active,
+            onconnect: (element) => {
+                viewport = element;
+                motion.attributes.onconnect(element);
+            },
+            ondisconnect: () => {
+                motion.attributes.ondisconnect();
+                viewport = undefined;
+            }
+        });
+        return root_04mlrpv3;
     })();
 });
-const accordion = Object.assign(base, { more });
-export default accordion;