@cardstack/boxel-cli 0.10.0 → 0.10.1-unstable.0

package/bundled-realms/pretui/components/accordion.gts

@@ -0,0 +1,58 @@
+// Pretui — Accordion: disclosure panels with animated expand and collapse, a thin wrap of boxel-ui Accordion.
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { Accordion as BoxelAccordion } from '@cardstack/boxel-ui/components';
+
+// ── Accordion — WRAPS boxel-ui ───────────────────────────────────────────
+// boxel-ui's disclosure engine is the value: the grid-template-rows
+// 0fr→1fr height transition, ARIA region wiring, inert-when-closed
+// content. The wrapper feeds Pretui cloth through the --boxel-accordion-*
+// knob channel plus the semantic tokens the engine already reads
+// (--border, --radius, --ring). State stays with the consumer — boxel's
+// controlled @isOpen/@onClick per item — so single- or multi-open policy
+// is yours; the yielded contextual A.Item is boxel-ui's AccordionItem
+// passed straight through (blocks <:title>/<:content>).
+
+export interface AccordionSignature {
+  Args: {
+    /** draw the rounded container border around the group */
+    displayContainer?: boolean;
+  };
+  Blocks: {
+    /* eslint-disable @typescript-eslint/no-explicit-any -- the yielded
+       contextual hash carries boxel-ui's AccordionItem; its signature
+       type is not exported from the components barrel */
+    default: [{ Item: any }];
+    /* eslint-enable @typescript-eslint/no-explicit-any */
+  };
+  Element: HTMLDivElement;
+}
+
+export const Accordion: TemplateOnlyComponent<AccordionSignature> = <template>
+  <div class='pretui-accordion' data-test-pretui-accordion ...attributes>
+    <BoxelAccordion @displayContainer={{@displayContainer}} as |A|>
+      {{yield A}}
+    </BoxelAccordion>
+  </div>
+  <style scoped>
+    @layer PretComponent {
+      /* Pretui dress via the token channel. The engine reads --ring for the
+         trigger focus outline and var(--radius) for the container corner;
+         both are mapped to the Pretui equivalents here. Title voice: body
+         size, 600 weight — the Panel header voice, not boxel's 700. */
+      .pretui-accordion {
+        font-size: var(--text-ui-md, 12.5px);
+        letter-spacing: var(--track-ui, 0.01em);
+        color: var(--foreground);
+        --ring: var(--primary);
+        --radius: var(--radius-surface, 10px);
+        --boxel-accordion-border: 1px solid var(--border);
+        --boxel-accordion-item-border: 1px solid var(--border);
+        --boxel-accordion-item-min-height: var(--control-h, 28px);
+        --boxel-accordion-title-font-weight: 600;
+        --boxel-accordion-trigger-padding-block: var(--space-3, 8px);
+        --boxel-accordion-transition: var(--pretui-dur-snap, 180ms)
+          var(--pretui-ease-snap, ease);
+      }
+    }
+  </style>
+</template>;

package/bundled-realms/pretui/components/accordion.md

@@ -0,0 +1,60 @@
+## What it is
+
+A stack of disclosure panels: headers you click to reveal content. Use it when several sections belong together and the user needs only one or two at a time — FAQs, a settings page with grouped options, a long record split into topics. If the sections are peers and only one should ever be visible, use **Tabs**. If the sections are part of a form and their contents can be invalid, use **FormSection**, which knows about issue counts and can open itself when a submit is refused. If it is a single collapse, `<details>` is enough.
+
+## The contract
+
+```
+@displayContainer?   — draw the rounded border around the group
+<:default as |A|>    — yields { Item }
+```
+
+The yielded `A.Item` takes its own open state and click handler, with `<:title>` and `<:content>` blocks.
+
+**State stays with the consumer.** There is no `type='single' | 'multiple'`, no `value`, no `collapsible` policy — each item is individually controlled, so single-open, multi-open and accordion-with-one-always-open are all things you implement in three lines at the call site. That is more work than Radix's `type` prop and it is the honest consequence of the wrap (below).
+
+## Prior art
+
+This is a **thin runtime wrap of boxel-ui's `Accordion` + `AccordionItem`**, and that is the design: foundation rule 1 says the machinery is boxel-ui's and only the cloth changes. What the engine supplies is worth naming — the `grid-template-rows: 0fr → 1fr` height transition (the modern way to animate to auto height without measuring), ARIA region wiring, and content that goes inert when closed.
+
+The wrapper feeds Pretui cloth through the `--boxel-accordion-*` knob channel plus the semantic tokens the engine already reads (`--border`, `--radius`, `--ring`). **No Pretui CSS reaches into boxel-ui markup**, so a boxel-ui upgrade cannot break the dress.
+
+Against the field: **Radix `Accordion`** has `type` (`single`/`multiple`, required), `value`/`defaultValue`/`onValueChange`, `collapsible`, `orientation`, and animates via `--radix-accordion-content-height`. **Web Awesome `wa-accordion`** (experimental) has `mode` (`single | single-collapsible | multiple`), `heading-level` (`1`–`6` or `none`), `icon-placement`, `appearance`, cancelable `wa-expand`/`wa-collapse`, and `expandAll()`/`collapseAll()`. Both own the open-state policy that Pretui delegates.
+
+Where Pretui's approach wins: **there is exactly one disclosure engine in the realm.** Accordion, and anything else that adopts boxel-ui's, share one implementation of the height transition and the inert-when-closed behaviour, rather than each kit component reimplementing it. The `0fr → 1fr` grid trick is also better than Radix's measured-height custom property — no measurement, no reflow, and it interpolates correctly when content changes size mid-transition.
+
+Where it is behind, plainly: **no `mode` policy** (you write it), **no `heading-level`** (Web Awesome's is the right shape and this has no equivalent), no `expandAll`/`collapseAll`, and the whole component is only as good as boxel-ui's ARIA — which the Pretui layer neither adds to nor can fix.
+
+The title voice is deliberately re-cut: body size at weight 600, the **Panel** header voice, not boxel-ui's 700.
+
+## Accessibility
+
+Governing pattern: APG **Accordion**, and it is worth stating the pattern precisely because most people over-implement it.
+
+APG requires: the header title in a `button`, **wrapped in an element with `role="heading"` and an appropriate `aria-level`** (or a native `<h2>`–`<h6>`), with **the button as the only element inside the heading**; `aria-expanded` on the button (required); `aria-controls` pointing at the panel; `aria-disabled` when an open panel cannot be collapsed. `role="region"` on the panel is **optional** and should be avoided past roughly six panels, to prevent landmark proliferation.
+
+The keyboard contract is the entire list: **Enter/Space toggle; Tab and Shift+Tab move through the page tab sequence.** Down/Up/Home/End are **not** in the pattern at any optionality level — they come from APG's _example_, not the spec — and an accordion is explicitly **not a single tab stop**.
+
+What that means here:
+
+- **The ARIA is boxel-ui's, not Pretui's.** `aria-expanded`, `aria-controls` and the region wiring come from the engine. Verify them against your boxel-ui version rather than trusting this page — the Pretui layer adds no ARIA and can fix none.
+- **Heading level is the gap to check first.** The pattern requires a real heading wrapping the button, at the right level. Pretui exposes no `@headingLevel`, so whatever boxel-ui emits is what you get, at every depth. This is the same problem **Panel**, **Toolbar** and **EmptyState** have in this territory, and Web Awesome's `heading-level` prop is the fix all four want.
+- **Content is inert when closed**, which is right — a collapsed panel's controls must not be reachable by Tab. Note this differs from **FormSection**, which keeps its fields registered so their issues still route.
+- **Focus is not managed by the component**, correctly: no roving tabindex, no arrow keys, nothing to get wrong.
+
+## Theming
+
+Consumed directly: `--foreground`, `--text-ui-md`, `--track-ui`.
+
+Remapped into the boxel-ui channel: `--ring` ← `--primary` (the trigger's focus outline — note the engine _does_ paint a focus ring, unlike several hand-rolled Pretui controls), `--radius` ← `--radius-surface`, `--boxel-accordion-border` and `--boxel-accordion-item-border` ← `--border`, `--boxel-accordion-item-min-height` ← `--control-h`, `--boxel-accordion-title-font-weight` (600), `--boxel-accordion-trigger-padding-block` ← `--space-3`, `--boxel-accordion-transition` ← `--pretui-dur-snap` / `--pretui-ease-snap`.
+
+A theme retunes the accordion entirely through those tokens. The one thing to verify per theme is `--ring` against the header background, since the focus indicator here is the engine's and is not the same treatment as the rest of the kit's controls.
+
+The styles sit in `@layer PretComponent`, so a caller's unlayered CSS overrides them without a more specific selector.
+
+## React ecosystem
+
+A stack of **Collapsible**s. Single-panel disclosure is **Collapsible**
+itself (Aria `Disclosure`), which animates its own height and keeps its
+region mounted. Agent `type=single|multiple` maps to "one open" vs "many
+open".

package/bundled-realms/pretui/components/accordion.usage.gts

@@ -0,0 +1,129 @@
+// Pretui — Accordion usage page.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { FreestyleUsage } from './freestyle-usage';
+import { Accordion } from './accordion';
+
+// ── Accordion ← accordion/usage.gts ──────────────────────────────────────
+// Dropped knobs: the --boxel-accordion-* cssVars rows (the CSS knob layer
+// is not ported; the wrapper pins that channel to Pretui tokens). Item
+// @className/@contentClass pass through untyped (the contextual Item is
+// boxel's own). The demo keeps upstream's single-open policy: clicking an
+// open item closes it, clicking another moves the open state.
+class AccordionUsage extends Component {
+  @tracked displayContainer = true;
+  @tracked openId: string | null = 'schema';
+  setDisplayContainer = (v: boolean) => (this.displayContainer = v);
+  toggle = (id: string) => {
+    this.openId = this.openId === id ? null : id;
+  };
+  toggleSchema = (_e: Event) => this.toggle('schema');
+  togglePlayground = (_e: Event) => this.toggle('playground');
+  toggleDisabled = (_e: Event) => this.toggle('disabled');
+  get schemaOpen() {
+    return this.openId === 'schema';
+  }
+  get playgroundOpen() {
+    return this.openId === 'playground';
+  }
+  get disabledOpen() {
+    return this.openId === 'disabled';
+  }
+  get usage() {
+    let bit = this.displayContainer ? ' @displayContainer={{true}}' : '';
+    return `<Accordion${bit} as |A|>\n  <A.Item @id='schema' @isOpen={{this.schemaOpen}} @onClick={{this.toggleSchema}}>\n    <:title>Schema editor</:title>\n    <:content>…</:content>\n  </A.Item>\n</Accordion>`;
+  }
+  <template>
+    <FreestyleUsage
+      @name='Accordion'
+      @description="Collapsible disclosure panels with a clickable header and animated expand/collapse — group several to build FAQ entries, settings groups, or any progressive-disclosure UI. Wraps boxel-ui's Accordion engine (grid-rows height transition, ARIA region wiring) in the Pretui cloth; open state is controlled per item, so single- or multi-open policy is yours."
+      @source={{this.usage}}
+    >
+      <:example>
+        <Accordion @displayContainer={{this.displayContainer}} as |A|>
+          <A.Item
+            @id='schema'
+            @isOpen={{this.schemaOpen}}
+            @onClick={{this.toggleSchema}}
+          >
+            <:title>Schema editor</:title>
+            <:content>
+              <p class='accordion-copy'>Fields, computeds, and relationships —
+                the card's typed shape. The content region is inert while
+                closed and transitions its height open.</p>
+            </:content>
+          </A.Item>
+          <A.Item
+            @id='playground'
+            @isOpen={{this.playgroundOpen}}
+            @onClick={{this.togglePlayground}}
+          >
+            <:title>Playground</:title>
+            <:content>
+              <p class='accordion-copy'>Try instances against the schema in
+                every format.</p>
+              <p class='accordion-copy'>A second paragraph, to show the region
+                grows to fit whatever the content block renders.</p>
+            </:content>
+          </A.Item>
+          <A.Item
+            @id='disabled'
+            @isOpen={{this.disabledOpen}}
+            @onClick={{this.toggleDisabled}}
+            @disabled={{true}}
+          >
+            <:title>Disabled item</:title>
+            <:content>
+              <p class='accordion-copy'>Never opens.</p>
+            </:content>
+          </A.Item>
+        </Accordion>
+      </:example>
+      <:api as |Args|>
+        <Args.Bool
+          @name='displayContainer'
+          @defaultValue={{false}}
+          @value={{this.displayContainer}}
+          @description='Draws the rounded container border around the group.'
+          @onInput={{this.setDisplayContainer}}
+        />
+        <Args.Yield
+          @description='Yields { Item } — boxel-ui AccordionItem passed through. Item args: @id (string, wires ARIA), @isOpen (controlled), @onClick, @disabled; blocks <:title> and <:content>.'
+          @hideControls={{true}}
+        />
+        <Args.String
+          @name='Item @id'
+          @description='Unique id per item — becomes the trigger id and the aria-controls target.'
+          @hideControls={{true}}
+        />
+        <Args.Bool
+          @name='Item @isOpen'
+          @description='Controlled open state for the item; the height transition and inert content follow it.'
+          @hideControls={{true}}
+        />
+        <Args.Action
+          @name='Item @onClick'
+          @description='Trigger click handler — implement toggle/exclusive policy here.'
+          @hideControls={{true}}
+        />
+        <Args.Bool
+          @name='Item @disabled'
+          @description='Disables the trigger button.'
+          @hideControls={{true}}
+        />
+      </:api>
+    </FreestyleUsage>
+    <style scoped>
+      .accordion-copy {
+        margin: 0 0 6px;
+        font-size: var(--text-ui-md, 12.5px);
+        color: var(--muted-foreground);
+        max-width: 52ch;
+      }
+    </style>
+  </template>
+}
+
+export const DEMOS_ACCORDION: Record<string, unknown> = {
+  Accordion: AccordionUsage,
+};

package/bundled-realms/pretui/components/action-bar.gts

@@ -0,0 +1,407 @@
+// Pretui — ActionBar: the bar that appears when a selection exists, carrying the actions that apply to it.
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { modifier } from 'ember-modifier';
+import { Button } from './button';
+import { IconButton } from './icon-button';
+import type { PretuiTone } from '../pretui-primitives';
+import { Menu } from './menu';
+import type { MenuEntry } from '../internal/menu';
+import { destructiveLast } from '../internal/menu';
+import { listen } from '../focus';
+import { iconFor } from '../icon-registry';
+
+// ── ActionBar: composed, not rebuilt (react-spectrum ActionBar) ─────────
+//
+// Every control in the bar is an existing kit component — `Button`,
+// `IconButton`, `Menu`. What the bar adds is the three things upstream
+// leaves to the caller: the selection count as a sentence, an overflow
+// threshold so a bar with nine actions does not become a scrollbar, and the
+// APG toolbar keyboard contract (one tab stop, arrows within, Home/End).
+//
+// It deliberately does NOT compose `structure.gts`'s `Toolbar`: that is a
+// page-header band whose title slot renders an `<h2>`, and "3 records
+// selected" is not a heading. Sharing the element would mean lying in the
+// document outline to save a flexbox rule.
+//
+// Realm-law notes: no timers, no `Date.now`, no `Math.random`. All listeners
+// live in `ember-modifier`s that remove them on teardown. The bar's entrance
+// is CSS (`@starting-style`), and under `prefers-reduced-motion` it lands on
+// the END state — the bar is simply there.
+
+// ═══════════════════════════════════════════════════════════════════════
+// ActionBar
+// ═══════════════════════════════════════════════════════════════════════
+
+/** One action offered against the current selection. */
+export interface ActionBarAction {
+  /** stable id, handed back to `onAction` */
+  id: string;
+  label: string;
+  /** icon-registry name; drawn only in the overflow menu, where there is
+   * room for a leading column */
+  icon?: string;
+  /** treatment axis for the inline button */
+  tone?: PretuiTone;
+  /** dimmed but still focusable and announced — an action that disappears
+   * when unavailable changes the bar's shape between selections, so the bar
+   * can never be learned */
+  disabled?: boolean;
+  /** tinted destructive, and sorted to the end of the overflow menu */
+  destructive?: boolean;
+  onAction?: (id: string) => void;
+}
+
+/**
+ * The bar's sentence. Pure, so the pluralisation is checkable without a
+ * browser — and so a caller who wants the same words somewhere else has
+ * them.
+ */
+export function selectionSummary(
+  count: number,
+  noun = 'item',
+  total?: number,
+): string {
+  let safe = Number.isFinite(count) && count > 0 ? Math.trunc(count) : 0;
+  let word = safe === 1 ? noun : noun + 's';
+  let head = safe + ' ' + word + ' selected';
+  if (total !== undefined && Number.isFinite(total) && total > 0) {
+    return head + ' of ' + Math.trunc(total);
+  }
+  return head;
+}
+
+/**
+ * The APG toolbar keyboard contract, applied to whatever is inside.
+ *
+ * One tab stop for the whole bar, arrows between the controls, Home/End to
+ * the ends. Written as a modifier over `[data-actionbar-item]` rather than
+ * as per-button tracked state because the bar's contents are data-driven and
+ * partly rendered by `Menu`: the DOM is the only place that knows the final
+ * order of the controls.
+ *
+ * The tab stop is re-seated whenever the bar's controls change — a new
+ * action, a removed one, a yielded control — by a MutationObserver, so the
+ * bar never ends up with two tab stops or none.
+ */
+const rovingToolbar = modifier((el: HTMLElement) => {
+  let members = () =>
+    Array.from(el.querySelectorAll<HTMLElement>('[data-actionbar-item]'));
+
+  let seat = (active: number) => {
+    let list = members();
+    for (let index = 0; index < list.length; index++) {
+      (list[index] as HTMLElement).tabIndex = index === active ? 0 : -1;
+    }
+  };
+  seat(0);
+
+  let onKeydown = (event: Event) => {
+    let key = (event as KeyboardEvent).key;
+    let list = members();
+    if (list.length === 0) {
+      return;
+    }
+    let current = list.indexOf(document.activeElement as HTMLElement);
+    if (current === -1) {
+      return;
+    }
+    let next = current;
+    if (key === 'ArrowRight' || key === 'ArrowDown') {
+      next = (current + 1) % list.length;
+    } else if (key === 'ArrowLeft' || key === 'ArrowUp') {
+      next = (current - 1 + list.length) % list.length;
+    } else if (key === 'Home') {
+      next = 0;
+    } else if (key === 'End') {
+      next = list.length - 1;
+    } else {
+      return;
+    }
+    event.preventDefault();
+    seat(next);
+    (list[next] as HTMLElement).focus();
+  };
+
+  // Clicking a control makes it the tab stop, so Tab-out-and-back returns to
+  // the control the reader last used rather than to the first one.
+  let onFocusin = (event: Event) => {
+    let list = members();
+    let index = list.indexOf(event.target as HTMLElement);
+    if (index !== -1) {
+      seat(index);
+    }
+  };
+
+  // keep the reader's stop if it survived the change, otherwise the first
+  let reseat = () => {
+    let list = members();
+    let kept = list.findIndex((member) => member.tabIndex === 0);
+    seat(kept === -1 ? 0 : kept);
+  };
+  let observer = new MutationObserver(reseat);
+  observer.observe(el, { childList: true, subtree: true });
+
+  el.addEventListener('keydown', onKeydown);
+  el.addEventListener('focusin', onFocusin);
+  return () => {
+    observer.disconnect();
+    el.removeEventListener('keydown', onKeydown);
+    el.removeEventListener('focusin', onFocusin);
+  };
+});
+
+export interface ActionBarSignature {
+  Args: {
+    /** how many things are selected. Zero hides the bar entirely. */
+    count: number;
+    /** the collection's size, for "3 of 40 selected" */
+    total?: number;
+    /** singular noun; pluralised by adding an s (default 'item') */
+    noun?: string;
+    /** the actions offered against the selection */
+    actions?: readonly ActionBarAction[];
+    /** how many actions get their own button before the rest collapse into
+     * an overflow Menu (default 3) */
+    maxVisible?: number;
+    /** the overflow trigger's accessible name (default 'More actions') */
+    overflowLabel?: string;
+    /** the bar's accessible name (default 'Selection actions') */
+    label?: string;
+    /** the clear button's accessible name (default 'Clear selection') */
+    clearLabel?: string;
+    /** called by the clear button and by Escape inside the bar. Omit it and
+     * no clear button is drawn. */
+    onClear?: () => void;
+    /** pin the bar to the bottom of its containing block (default) or let
+     * it sit in normal flow */
+    position?: 'floating' | 'inline';
+    onAction?: (id: string) => void;
+  };
+  Blocks: {
+    /** extra controls, appended after the actions and before clear. Add
+     * `data-actionbar-item` to anything focusable so it joins the arrow-key
+     * rotation. */
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+export class ActionBar extends Component<ActionBarSignature> {
+  get visible(): boolean {
+    let count = this.args.count;
+    return Number.isFinite(count) && count > 0;
+  }
+  get summary(): string {
+    return selectionSummary(
+      this.args.count,
+      this.args.noun ?? 'item',
+      this.args.total,
+    );
+  }
+  get barLabel(): string {
+    return this.args.label ?? 'Selection actions';
+  }
+  get clearLabel(): string {
+    return this.args.clearLabel ?? 'Clear selection';
+  }
+  get overflowLabel(): string {
+    return this.args.overflowLabel ?? 'More actions';
+  }
+  get allActions(): readonly ActionBarAction[] {
+    return this.args.actions ?? [];
+  }
+  get limit(): number {
+    let asked = this.args.maxVisible;
+    if (asked === undefined || !Number.isFinite(asked) || asked < 0) {
+      return 3;
+    }
+    return Math.trunc(asked);
+  }
+  /** With exactly one action over the limit, promoting it costs nothing and
+   * saves the reader a menu — an overflow menu holding a single item is a
+   * worse outcome than one more button. */
+  private get split(): number {
+    let all = this.allActions.length;
+    return all === this.limit + 1 ? all : this.limit;
+  }
+  get inlineActions(): ActionBarAction[] {
+    return this.allActions.slice(0, this.split);
+  }
+  get overflowActions(): ActionBarAction[] {
+    return this.allActions.slice(this.split);
+  }
+  get hasOverflow(): boolean {
+    return this.overflowActions.length > 0;
+  }
+  get overflowItems(): MenuEntry[] {
+    return destructiveLast(
+      this.overflowActions.map((action) => ({
+        label: action.label,
+        icon: action.icon,
+        disabled: action.disabled,
+        destructive: action.destructive,
+        onSelect: () => this.run(action),
+      })),
+    );
+  }
+
+  private run(action: ActionBarAction) {
+    if (action.disabled) {
+      return;
+    }
+    action.onAction?.(action.id);
+    this.args.onAction?.(action.id);
+  }
+
+  onActionClick = (event: Event) => {
+    let el = event.currentTarget as HTMLElement | null;
+    let id = el?.getAttribute('data-action-id');
+    let action = this.allActions.find((candidate) => candidate.id === id);
+    if (action) {
+      this.run(action);
+    }
+  };
+
+  clear = () => {
+    this.args.onClear?.();
+  };
+
+  /** Escape clears, but only while focus is inside the bar. A document-level
+   * Escape would fight every other surface on the page for the key — and the
+   * collection the bar describes is outside this component, so it cannot
+   * honestly claim the key on the collection's behalf. */
+  onKeydown = (event: Event) => {
+    if ((event as KeyboardEvent).key === 'Escape' && this.args.onClear) {
+      event.preventDefault();
+      this.clear();
+    }
+  };
+
+  <template>
+    {{#if this.visible}}
+      <div
+        class='pretui-actionbar'
+        role='toolbar'
+        aria-label={{this.barLabel}}
+        data-position={{if @position @position 'floating'}}
+        data-test-pretui-action-bar
+        {{rovingToolbar}}
+        {{listen 'keydown' this.onKeydown}}
+        ...attributes
+      >
+        <span class='pretui-actionbar-count' data-test-pretui-action-bar-count>
+          {{this.summary}}
+        </span>
+        <span class='pretui-actionbar-actions'>
+          {{#each this.inlineActions key='id' as |deed|}}
+            <Button
+              @tone={{if deed.destructive 'danger' deed.tone}}
+              @appearance='outlined'
+              @size='s'
+              data-actionbar-item
+              data-action-id={{deed.id}}
+              data-test-pretui-action-bar-action
+              aria-disabled={{if deed.disabled 'true'}}
+              {{on 'click' this.onActionClick}}
+            >{{deed.label}}</Button>
+          {{/each}}
+          {{yield}}
+          {{#if this.hasOverflow}}
+            <Menu @items={{this.overflowItems}} @label={{this.overflowLabel}} @align='end'>
+              <:trigger as |isOpen toggle|>
+                <IconButton
+                  @label={{this.overflowLabel}}
+                  data-actionbar-item
+                  data-open={{if isOpen 'true'}}
+                  {{on 'click' toggle}}
+                >
+                  {{#let (iconFor 'ellipsis') as |More|}}
+                    {{#if More}}<More />{{/if}}
+                  {{/let}}
+                </IconButton>
+              </:trigger>
+            </Menu>
+          {{/if}}
+        </span>
+        {{#if @onClear}}
+          <IconButton
+            @label={{this.clearLabel}}
+            data-actionbar-item
+            data-test-pretui-action-bar-clear
+            {{on 'click' this.clear}}
+          >
+            {{#let (iconFor 'circle-minus') as |ClearIcon|}}
+              {{#if ClearIcon}}<ClearIcon />{{/if}}
+            {{/let}}
+          </IconButton>
+        {{/if}}
+      </div>
+    {{/if}}
+    <style scoped>
+      @layer PretComponent {
+        .pretui-actionbar {
+          display: flex;
+          align-items: center;
+          gap: var(--space-4, 11px);
+          padding: var(--space-2, 6px) var(--space-3, 8px);
+          border-radius: var(--radius-surface, 12px);
+          background: var(--popover);
+          box-shadow: var(
+            --pretui-shadow-overlay,
+            0 0 0 1px var(--border),
+            0 8px 28px rgb(0 0 0 / 0.34)
+          );
+          /* Law 5: the bar arriving IS the state transition — the selection
+             just became actionable. The slide is short and it travels from the
+             edge it is pinned to, so it also says WHERE the bar lives. */
+          transition:
+            opacity var(--pretui-actionbar-enter, 140ms) ease,
+            translate var(--pretui-actionbar-enter, 140ms) ease;
+        }
+        @starting-style {
+          .pretui-actionbar {
+            opacity: 0;
+            translate: 0 8px;
+          }
+        }
+        .pretui-actionbar[data-position='floating'] {
+          position: sticky;
+          bottom: var(--space-4, 11px);
+          z-index: var(--pretui-z-sticky, 10);
+        }
+        .pretui-actionbar-count {
+          flex: none;
+          font-size: var(--text-ui-sm, 11.5px);
+          font-weight: var(--weight-medium, 500);
+          font-variant-numeric: tabular-nums;
+          color: var(--muted-foreground);
+          white-space: nowrap;
+        }
+        .pretui-actionbar-actions {
+          display: flex;
+          align-items: center;
+          gap: var(--space-2, 6px);
+          flex: 1;
+          min-width: 0;
+          flex-wrap: wrap;
+        }
+        /* Reduced motion lands on the END state — the bar is simply there,
+           at full opacity and in place. Never a frozen midpoint. */
+        @media (prefers-reduced-motion: reduce) {
+          .pretui-actionbar {
+            transition: none;
+          }
+        }
+        /* A card does not know the viewport; it knows its pane. Below the
+           count and the actions stop competing for one line. */
+        @container (max-width: 380px) {
+          .pretui-actionbar {
+            flex-wrap: wrap;
+            gap: var(--space-2, 6px);
+          }
+        }
+      }
+    </style>
+  </template>
+}