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

package/bundled-realms/pretui/components/filter-chips.gts

@@ -0,0 +1,236 @@
+// Pretui — FilterChips: a row of filter chips, radio or multi-select.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import { htmlSafe } from '@ember/template';
+import { guidFor } from '@ember/object/internals';
+import { cssNumber, cssStyle } from '../pretui-css';
+import { emit, firstDefined } from '../pretui-primitives';
+
+export interface FilterChipOption {
+  value: string;
+  label: string;
+  count?: number;
+  hue?: string;
+}
+
+export interface FilterChipsSignature {
+  Args: {
+    options?: FilterChipOption[];
+    /** alias — the canonical flat-collection noun */
+    items?: FilterChipOption[];
+    /** single-select (default mode) */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** alias — the HTML/Mantine/Ant notify name */
+    onChange?: (value: string) => void;
+    /**
+     * Multi-select. Filter rows are multi-select far more often than not —
+     * "show me open AND blocked" is the ordinary ask. Switches the chips from
+     * radios to checkboxes, which is also the correct ARIA change: one tab
+     * stop and arrows for a single choice, one tab stop per chip when any
+     * combination is legal.
+     */
+    multiple?: boolean;
+    /** selected values in multi-select mode */
+    values?: string[];
+    defaultValues?: string[];
+    onValuesChange?: (values: string[]) => void;
+    /** alias — the multi-select notify an agent will reach for */
+    onSelectionChange?: (values: string[]) => void;
+    /** Accessible name for the row. Chip rows almost never sit under a
+     * visible heading, so this is worth passing. */
+    label?: string;
+    /**
+     * Reserve the count slot on every chip even where no count has arrived
+     * yet. Counts usually resolve one query at a time; without a reserved
+     * slot each arrival re-flows the whole row. Defaults to true as soon as
+     * any option declares a count.
+     */
+    reserveCounts?: boolean;
+    /** width of the reserved count slot, in digits (default 2) */
+    countDigits?: number;
+  };
+  Element: HTMLDivElement;
+}
+
+// Adopted from Beautiful UI: status chips that filter live data.
+//
+// **A radiogroup, not a tablist**, like SegmentedControl: `role='tablist'` over plain `<button>`s is invalid ARIA (a
+// tablist's children must be tabs) and the wrong pattern — a filter row picks
+// a value, it does not swap a panel. Single-select is native
+// `<input type='radio'>` in a `role='radiogroup'`, sharing `RadioGroup`'s
+// foundation and inheriting the whole APG contract for free; multi-select is
+// native `<input type='checkbox'>` in a `role='group'`. The chip dress is
+// unchanged — the input is visually hidden and the `<label>` wears it.
+export class FilterChips extends Component<FilterChipsSignature> {
+  @tracked internalValue =
+    this.args.defaultValue ??
+    (this.args.options ?? this.args.items ?? [])[0]?.value;
+  @tracked internalValues = this.args.defaultValues ?? [];
+  name = `${guidFor(this)}-fc`;
+  get options(): FilterChipOption[] {
+    return firstDefined(this.args.options, this.args.items) ?? [];
+  }
+  get value() {
+    return this.args.value ?? this.internalValue;
+  }
+  get values(): string[] {
+    return this.args.values ?? this.internalValues;
+  }
+  pick = (option: FilterChipOption) => {
+    if (this.args.multiple) {
+      let next = this.values.includes(option.value)
+        ? this.values.filter((v) => v !== option.value)
+        : [...this.values, option.value];
+      if (this.args.values === undefined) {
+        this.internalValues = next;
+      }
+      emit([this.args.onValuesChange, this.args.onSelectionChange], next);
+      return;
+    }
+    if (this.args.value === undefined) {
+      this.internalValue = option.value;
+    }
+    emit([this.args.onValueChange, this.args.onChange], option.value);
+  };
+  isActive = (option: FilterChipOption) =>
+    this.args.multiple
+      ? this.values.includes(option.value)
+      : this.value === option.value;
+  // `option.hue` is caller data reaching an inline style — validated against
+  // the kit allowlist so it cannot carry its own declarations.
+  dotStyle = (option: FilterChipOption) => cssStyle('background', option.hue);
+  get showCounts() {
+    return (
+      this.args.reserveCounts ??
+      this.options.some((o) => o.count !== undefined)
+    );
+  }
+  get rowStyle() {
+    return htmlSafe(
+      `--pretui-filterchip-count-ch: ${cssNumber(this.args.countDigits, 1, 12) ?? 2}`,
+    );
+  }
+  <template>
+    <div
+      class='pretui-filterchips'
+      role={{if @multiple 'group' 'radiogroup'}}
+      aria-label={{@label}}
+      style={{this.rowStyle}}
+      data-test-pretui-filter-chips
+      ...attributes
+    >
+      {{#each this.options as |option|}}
+        <label
+          class='pretui-filterchip'
+          data-state={{if (this.isActive option) 'active'}}
+        >
+          {{#if @multiple}}
+            <input
+              type='checkbox'
+              class='pretui-filterchip-input'
+              value={{option.value}}
+              checked={{this.isActive option}}
+              {{on 'change' (fn this.pick option)}}
+            />
+          {{else}}
+            <input
+              type='radio'
+              class='pretui-filterchip-input'
+              name={{this.name}}
+              value={{option.value}}
+              checked={{this.isActive option}}
+              {{on 'change' (fn this.pick option)}}
+            />
+          {{/if}}
+          {{#if option.hue}}<span class='pretui-filterdot' style={{this.dotStyle option}}></span>{{/if}}
+          {{option.label}}
+          {{#if this.showCounts}}<span class='pretui-filterchip-count'>{{option.count}}</span>{{/if}}
+        </label>
+      {{/each}}
+    </div>
+    <style scoped>
+      @layer PretComponent {
+        .pretui-filterchips {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          flex-wrap: wrap;
+        }
+        .pretui-filterchip {
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+          position: relative;
+          height: 26px;
+          border-radius: 13px;
+          padding: 0 calc(6px * var(--pretui-capsule-base, 1.35) + 13px * var(--pretui-radius-encroach, 0.35));
+          border: 0;
+          font: inherit;
+          font-size: var(--text-ui, 12px);
+          font-weight: 500;
+          letter-spacing: inherit;
+          color: var(--muted-foreground);
+          background: none;
+          cursor: pointer;
+          flex: none;
+          white-space: nowrap;
+          transition: background 200ms var(--pretui-ease-snap, ease), box-shadow 200ms var(--pretui-ease-snap, ease), color 200ms;
+        }
+        .pretui-filterchip-input {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          margin: 0;
+          opacity: 0;
+          pointer-events: none;
+        }
+        .pretui-filterchip:has(.pretui-filterchip-input:focus-visible) {
+          outline: 2px solid var(--ring);
+          outline-offset: 1px;
+        }
+        .pretui-filterchip:hover {
+          background: var(--hover, var(--boxel-100));
+        }
+        .pretui-filterchip[data-state='active'] {
+          background: var(--card);
+          color: var(--foreground);
+          /* selection is never colour alone: the raised card face + control
+             shadow survive greyscale, and no width changes, so the row never
+             re-flows on a pick */
+          box-shadow: var(--pretui-shadow-control, 0 0 0 1px var(--border));
+        }
+        .pretui-filterdot {
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+          flex: none;
+        }
+        /* The slot is rendered whether or not the number has arrived, and it is
+           at least `--pretui-filterchip-count-ch` digits wide, so a row of
+           chips does not re-flow as each count resolves. */
+        .pretui-filterchip-count {
+          border-radius: 4px;
+          padding: 0 4px;
+          min-width: calc(var(--pretui-filterchip-count-ch, 2) * 1ch);
+          text-align: center;
+          font-size: 10.5px;
+          font-variant-numeric: tabular-nums;
+          color: var(--ink-3, var(--boxel-400));
+        }
+        .pretui-filterchip[data-state='active'] .pretui-filterchip-count {
+          background: var(--inset, var(--boxel-100));
+          color: var(--muted-foreground);
+        }
+        @media (any-pointer: coarse) {
+          .pretui-filterchip {
+            min-height: 34px;
+          }
+        }
+      }
+    </style>
+  </template>
+}

package/bundled-realms/pretui/components/filter-chips.md

@@ -0,0 +1,58 @@
+## What it is
+
+A horizontal row of status chips that filter a list, each optionally carrying a count. Use it above a **DataGrid**, a **Feed** or a **Grid** where the filter is a single named bucket — All / Open / Blocked / Done. If the filters live in a sidebar, **FilterList**. If several can be on at once, this is not it (see below). If the filter is a structured predicate, **FilterSet**.
+
+## The contract
+
+```
+@options: { value, label, count?, hue? }[]
+@value?, @defaultValue?, @onValueChange?(value: string)
+```
+
+Hybrid controlled/uncontrolled, seeded from `@defaultValue ?? options[0].value` — so a FilterChips row always has exactly one selection and can never be in a "nothing selected" state.
+
+**It is single-select despite looking like a multi-select.** Filter chips in most products toggle independently; these behave like a **SegmentedControl** that happens to be chip-shaped. That is a real constraint to know before you reach for it: if a user needs "Open _and_ Blocked", this component cannot express it, and `aria-pressed` on the chips (see below) actively suggests it can.
+
+**`count` and `hue` are per-option data.** The count rides a tabular-numeral dress shared with **FilterList**; the hue feeds the same Law-2 derivation **Chip** uses, so a filter chip and a status chip for the same value can be given the same colour.
+
+Adopted from Beautiful UI: status chips that filter live data.
+
+## Prior art
+
+**React Spectrum's `TagGroup`** with `selectionMode` is the closest real component: roving tabindex, arrow navigation, Delete-key removal, and proper `role="listbox"`/`option` semantics. **Web Awesome `wa-tag`** is display-only with a `with-remove` affordance. **Radix `ToggleGroup`** with `type="single"` is the structural analogue and exposes `rovingFocus` and `loop`. **shadcn** has no filter chips.
+
+Where Pretui is ahead of the shadcn-style hand-roll: counts and hues are declared per option rather than composed, so a row of filter chips is one line derived from a model, and the hue derivation matches **Chip**'s so the whole ink territory agrees.
+
+Where it is behind Spectrum's `TagGroup`, and the gap is the same one **SegmentedControl** and **Tabs** have in this kit: **no roving tabindex, no arrow navigation**, and — the more serious problem — the wrong roles.
+
+## Accessibility
+
+This is the third component in the kit with the same defect, and it is worth stating plainly.
+
+**The container carries `role="tablist"` while its children are `<button aria-pressed>`.** That is invalid on two counts:
+
+1. **A `tablist` requires children with `role="tab"`.** These have no role at all, so assistive tech is told "tab list, 4 items" and then finds four ordinary buttons.
+2. **`role="tablist"` is the wrong pattern regardless**, because nothing here controls a tab panel. APG's guidance is direct: do not use `tablist` unless it actually swaps panels.
+
+And a third, specific to this component: **`aria-pressed` describes an independent toggle**, which contradicts the single-select behaviour. A user is told four buttons each have a pressed state, with nothing conveying that pressing one releases the others.
+
+The correct shape, since this is a single choice from a visible set:
+
+- **`role="radiogroup"`** on the container with an accessible name, **`role="radio"` + `aria-checked`** on each chip, roving tabindex so the row is one tab stop, and Left/Right/Up/Down moving _and_ selecting with wrapping. **RadioGroup** in this kit gets all of that for free by using native `<input type="radio">` with a shared `name`, and the same technique — visually hidden radios with the chips as their labels — would fix this component entirely without changing how it looks.
+
+Remaining gaps:
+
+- **No accessible name** on the group.
+- **Every chip is its own tab stop.**
+- **The count is inside the chip**, so it joins the accessible name: "Blocked 12". Acceptable, but "12" has no unit.
+- **The filter change is not announced**, and neither is the resulting row count. A `role="status"` region is the caller's job.
+- **Hue conveys nothing** to assistive tech — correct, since the label carries the meaning, but it does mean a theme must not use hue as the only distinction between two similarly-named filters.
+- Chip height is 18–28px depending on dress; check against WCAG **2.5.8**'s 24×24 minimum.
+
+## Theming
+
+Per-option `hue` feeding **Chip**'s Law-2 derivation (`--pretui-chip-mix`, `--pretui-ink-mix`, mixed against `--card`, hairline against `--border`), plus `--foreground`, `--muted-foreground`, `--hover` for resting and hover states, the count's tabular-numeral dress, and `--text-ui-xs`/`--text-ui-md`.
+
+Because the selected chip and the unselected ones differ by fill strength within the same hue, a theme that raises `--pretui-chip-mix` narrows that gap — the selected state can become hard to pick out in a row of tinted chips. Check the selected chip against its unselected neighbors, not against the page.
+
+The styles sit in `@layer PretComponent`, so a caller's unlayered CSS overrides them without a more specific selector.

package/bundled-realms/pretui/components/filter-chips.usage.gts

@@ -0,0 +1,102 @@
+// Pretui — FilterChips usage page.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { FreestyleUsage } from './freestyle-usage';
+import { FilterChips } from './filter-chips';
+
+const TAG_OPTIONS = [
+  { value: 'javascript', label: 'JavaScript', count: 12, hue: 'var(--chart-1)' },
+  { value: 'typescript', label: 'TypeScript', count: 8, hue: 'var(--chart-2)' },
+  { value: 'react', label: 'React', count: 5, hue: 'var(--chart-3)' },
+  { value: 'vue', label: 'Vue', count: 3, hue: 'var(--chart-4)' },
+  { value: 'angular', label: 'Angular', count: 2 },
+  { value: 'ember', label: 'Ember', count: 7 },
+];
+const TAG_VALUES = TAG_OPTIONS.map((o) => o.value);
+// ── FilterChips ← tag-list/usage.gts ─────────────────────────────────────
+// Dropped knobs: tag-list-* css vars (theme tokens own the palette). New
+// args shown in the data: option.count and option.hue.
+export class FilterChipsUsage extends Component {
+  tagOptions = TAG_OPTIONS;
+  tagValues = TAG_VALUES;
+  @tracked value = 'javascript';
+  @tracked multiple = false;
+  @tracked values: string[] = ['javascript'];
+  setValue = (v: string) => (this.value = v);
+  setValues = (v: string[]) => (this.values = v);
+  setMultiple = (v: boolean) => (this.multiple = v);
+  get usage() {
+    return this.multiple
+      ? `<FilterChips @options={{this.tags}} @multiple={{true}} @values={{this.values}} @onValuesChange={{this.setValues}} @label='Filter by tag' />`
+      : `<FilterChips @options={{this.tags}} @value='${this.value}' @onValueChange={{this.setValue}} @label='Filter by tag' />`;
+  }
+  <template>
+    <FreestyleUsage
+      @name='FilterChips'
+      @description='A row of selectable filter chips. Single-select is a radiogroup over native radios — one tab stop, arrows to move; multi-select is a group of native checkboxes, one tab stop each. Both are the correct ARIA for what they do, and neither is a tablist: a filter row picks a value, it does not swap a panel. The count slot is reserved whether or not the number has arrived, so a row does not re-flow as queries resolve.'
+      @source={{this.usage}}
+    >
+      <:example>
+        <FilterChips
+          @options={{this.tagOptions}}
+          @label='Filter by tag'
+          @multiple={{this.multiple}}
+          @value={{this.value}}
+          @values={{this.values}}
+          @onValueChange={{this.setValue}}
+          @onValuesChange={{this.setValues}}
+        />
+      </:example>
+      <:api as |Args|>
+        <Args.Object
+          @name='options'
+          @description='Array of {value, label} plus optional count and hue per chip.'
+          @value={{this.tagOptions}}
+        />
+        <Args.Bool
+          @name='multiple'
+          @value={{this.multiple}}
+          @description='Switch the chips from radios to checkboxes, and the row from radiogroup to group. Filter rows are multi-select far more often than not.'
+          @onInput={{this.setMultiple}}
+        />
+        <Args.String
+          @name='value'
+          @value={{this.value}}
+          @options={{this.tagValues}}
+          @description='Value of the active chip in single-select mode.'
+          @onInput={{this.setValue}}
+        />
+        <Args.Array
+          @name='values'
+          @value={{this.values}}
+          @description='Selected values in multi-select mode; pairs with onValuesChange.'
+          @onInput={{this.setValues}}
+        />
+        <Args.String
+          @name='label'
+          @description='Accessible name for the row. A chip row rarely sits under a visible heading, so this is worth passing.'
+        />
+        <Args.Bool
+          @name='reserveCounts'
+          @description='Force the count slot on every chip even before any count arrives. Defaults on as soon as one option declares a count.'
+        />
+        <Args.Number
+          @name='countDigits'
+          @description='Width of that reserved slot, in digits (default 2).'
+        />
+        <Args.Action
+          @name='onValueChange'
+          @description='Fires with the picked value string in single-select mode.'
+        />
+        <Args.Action
+          @name='onValuesChange'
+          @description='Fires with the whole next array in multi-select mode.'
+        />
+      </:api>
+    </FreestyleUsage>
+  </template>
+}
+
+export const DEMOS_FILTER_CHIPS: Record<string, unknown> = {
+  FilterChips: FilterChipsUsage,
+};

package/bundled-realms/pretui/components/filter-set.gts

@@ -0,0 +1,293 @@
+// Pretui — FilterSet: a saved set of filters over a resource.
+import Component from '@glimmer/component';
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { Button } from './button';
+import { IconButton } from './icon-button';
+import { Tooltip } from './tooltip';
+import { Token } from './token';
+import { AddIcon, FunnelIcon, PencilIcon, RemoveIcon, conditionSummary, conditionToBxl } from '../internal/forms-expression';
+import type { ExpressionCondition, ExpressionLogic, ExpressionOperator, ExpressionResource } from '../internal/forms-expression';
+
+// ── FilterSet ────────────────────────────────────────────────────────────
+
+interface FilterEntry {
+  id: string;
+  number: number;
+  summary: string;
+  joiner?: string;
+  active: boolean;
+  incomplete: boolean;
+  editLabel: string;
+  removeLabel: string;
+}
+
+export interface FilterSetSignature {
+  Args: {
+    /** Rows to summarise. Read-only here — editing happens elsewhere. */
+    conditions: ExpressionCondition[];
+    /** Joiner shown between entries. Default `all`. */
+    logic?: ExpressionLogic;
+    /** Custom-logic string, echoed verbatim when `@logic` is `custom`. */
+    customLogic?: string;
+    /** Resource catalogue, so summaries read with field LABELS not paths. */
+    resources?: ExpressionResource[];
+    /** Operator catalogue fallback. */
+    operators?: ExpressionOperator[];
+    /** Heading. Default `Conditions`. */
+    title?: string;
+    /** Highlighted row — the one open in the editor beside this list. */
+    activeId?: string;
+    /** Shows an edit control per row when supplied. */
+    onEdit?: (id: string) => void;
+    /** Shows a remove control per row when supplied. */
+    onRemove?: (id: string) => void;
+    /** Shows the add button when supplied. */
+    onAdd?: () => void;
+  };
+  Blocks: { footer: [] };
+  Element: HTMLElement;
+}
+
+/**
+ * The narrow, read-only face of the same model — SLDS's `filters/` variant
+ * (`slds-filters`, `slds-filters__item`), the sidebar you get beside a list
+ * view where each condition collapses to one line of prose.
+ *
+ * Better than the inspiration: SLDS's filter item is a `<div>` with a click
+ * handler and the joiner ("AND") is a decorative `<strong>` that assistive
+ * tech reads as a stray word between two items. Here every entry is a real
+ * list item, the joiner is `aria-hidden` chrome with the relationship carried
+ * by the list's accessible name instead, and the edit control is the button —
+ * so the summary can be truncated without stealing the click target.
+ *
+ * Dropped: the `slds-is-new` / `slds-is-locked` item states, and the nested
+ * `slds-filters__group` — this list is flat for the same reason the builder
+ * is.
+ */
+export class FilterSet extends Component<FilterSetSignature> {
+  get logic(): ExpressionLogic {
+    return this.args.logic ?? 'all';
+  }
+  get title() {
+    return this.args.title ?? 'Conditions';
+  }
+  get joinerWord() {
+    return this.logic === 'any' ? 'OR' : 'AND';
+  }
+  get isCustom() {
+    return this.logic === 'custom';
+  }
+  get isAlways() {
+    return this.logic === 'always';
+  }
+  get listLabel() {
+    let count = this.args.conditions.length;
+    if (this.isCustom) {
+      return `${this.title}, ${count} in total, combined by custom logic ${this.args.customLogic ?? ''}`;
+    }
+    if (this.isAlways) {
+      return `${this.title}, always true`;
+    }
+    return `${this.title}, ${count} in total, ${this.logic === 'any' ? 'any' : 'all'} must be met`;
+  }
+  get entries(): FilterEntry[] {
+    return this.args.conditions.map((condition, index) => {
+      let summary = conditionSummary(
+        condition,
+        this.args.resources ?? [],
+        this.args.operators,
+      );
+      return {
+        id: condition.id,
+        number: index + 1,
+        summary,
+        joiner: index === 0 ? undefined : this.joinerWord,
+        active: this.args.activeId === condition.id,
+        incomplete:
+          conditionToBxl(
+            condition,
+            this.args.resources ?? [],
+            this.args.operators,
+          ) === '',
+        editLabel: `Edit condition ${index + 1}, ${summary}`,
+        removeLabel: `Remove condition ${index + 1}, ${summary}`,
+      };
+    });
+  }
+
+  <template>
+    <section class='pretui-filterset' data-test-pretui-filter-set ...attributes>
+      <header class='fs-head'>
+        <FunnelIcon class='fs-icon' />
+        <h3 class='fs-title'>{{this.title}}</h3>
+      </header>
+
+      {{#if this.isCustom}}
+        <p class='fs-custom'>
+          <span class='pretui-sr'>Custom logic:</span>
+          <Token @value={{@customLogic}} />
+        </p>
+      {{/if}}
+
+      {{#if this.isAlways}}
+        <p class='fs-always'>No conditions — this always applies.</p>
+      {{else}}
+        {{! role restates list semantics that list-style: none strips in Safari }}
+        {{! template-lint-disable no-redundant-role }}
+        <ol class='fs-list' role='list' aria-label={{this.listLabel}}>
+          {{#each this.entries key='id' as |entry|}}
+            <li class='fs-item' data-active={{if entry.active 'true'}} data-incomplete={{if entry.incomplete 'true'}}>
+              {{#if entry.joiner}}
+                <span class='fs-joiner' aria-hidden='true'>{{entry.joiner}}</span>
+              {{/if}}
+              <span class='fs-num' aria-hidden='true'>{{entry.number}}</span>
+              <span class='fs-summary' title={{entry.summary}}>{{entry.summary}}</span>
+              <span class='fs-tools'>
+                {{#if @onEdit}}
+                  <Tooltip @content={{entry.summary}} @side='left'>
+                    <IconButton
+                      @label={{entry.editLabel}}
+                      @variant='ghost'
+                      {{on 'click' (fn @onEdit entry.id)}}
+                      data-test-pretui-filter-edit={{entry.number}}
+                    ><PencilIcon class='fs-icon' /></IconButton>
+                  </Tooltip>
+                {{/if}}
+                {{#if @onRemove}}
+                  <IconButton
+                    @label={{entry.removeLabel}}
+                    @variant='ghost'
+                    {{on 'click' (fn @onRemove entry.id)}}
+                    data-test-pretui-filter-remove={{entry.number}}
+                  ><RemoveIcon class='fs-icon' /></IconButton>
+                {{/if}}
+              </span>
+            </li>
+          {{/each}}
+        </ol>
+      {{/if}}
+
+      {{#if @onAdd}}
+        <div class='fs-foot'>
+          <Button @variant='secondary' {{on 'click' @onAdd}} data-test-pretui-filter-add>
+            <AddIcon class='fs-icon' />Add condition
+          </Button>
+          {{yield to='footer'}}
+        </div>
+      {{else if (has-block 'footer')}}
+        <div class='fs-foot'>{{yield to='footer'}}</div>
+      {{/if}}
+
+    </section>
+    <style scoped>
+      @layer PretComponent {
+        .pretui-filterset {
+          container-type: inline-size;
+          display: block;
+          color: var(--foreground);
+          font-size: var(--text-ui-md, 12.5px);
+        }
+        .pretui-sr {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          overflow: hidden;
+          clip: rect(0 0 0 0);
+          white-space: nowrap;
+        }
+        .fs-head {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          margin-bottom: var(--space-3, 8px);
+        }
+        .fs-title {
+          margin: 0;
+          font-size: var(--text-ui-lg, 13.5px);
+          font-weight: 600;
+        }
+        .fs-icon {
+          --icon-color: currentColor;
+          width: 13px;
+          height: 13px;
+          flex: none;
+        }
+        .fs-custom {
+          margin: 0 0 var(--space-3, 8px);
+        }
+        .fs-always {
+          margin: 0;
+          font-size: var(--text-ui-sm, 11.5px);
+          color: var(--muted-foreground);
+        }
+        .fs-list {
+          list-style: none;
+          margin: 0;
+          padding: 0;
+          display: grid;
+          gap: 14px;
+        }
+        .fs-item {
+          position: relative;
+          display: grid;
+          grid-template-columns: auto minmax(0, 1fr) auto;
+          align-items: center;
+          gap: 6px;
+          padding: 6px 6px 6px 8px;
+          border-radius: var(--radius);
+          background: var(--card);
+          box-shadow: var(--pretui-shadow-hairline, 0 0 0 1px var(--border));
+        }
+        .fs-item:hover {
+          background: var(--hover, var(--boxel-100));
+        }
+        .fs-item[data-active='true'] {
+          box-shadow: 0 0 0 1px var(--primary);
+        }
+        .fs-item[data-incomplete='true'] .fs-summary {
+          color: var(--muted-foreground);
+          font-style: italic;
+        }
+        .fs-joiner {
+          position: absolute;
+          top: -9px;
+          left: 8px;
+          padding: 0 4px;
+          border-radius: 4px;
+          background: var(--card);
+          font-size: var(--text-ui-xs, 11px);
+          font-weight: 700;
+          letter-spacing: var(--track-eyebrow, 0.06em);
+          color: var(--muted-foreground);
+        }
+        .fs-num {
+          font-family: var(--font-mono);
+          font-size: var(--text-ui-xs, 11px);
+          font-variant-numeric: tabular-nums;
+          color: var(--muted-foreground);
+        }
+        .fs-summary {
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .fs-tools {
+          display: flex;
+          gap: 2px;
+        }
+        .fs-foot {
+          margin-top: var(--space-3, 8px);
+          display: flex;
+          gap: 6px;
+        }
+        @container (max-width: 18rem) {
+          .fs-summary {
+            white-space: normal;
+          }
+        }
+      }
+    </style>
+  </template>
+}