Stop ember-freestyle's global CSS from styling Pret UI Specs, and bring the Spec and the kit components it shows onto the theme contract

[burieberry]

Note

Merge before #6503, which rebases over this.

Background and Goal

The host loads ember-freestyle's global stylesheet, and Pret UI's usage page reused its class names, so ember-freestyle's unscoped rules styled every Pret UI Spec. .FreestyleUsage { --radius: 4px } reset the radius for everything on the page (2px Button corners, 4px panels), and .FreestyleUsage-description { font-size: 1.1rem } enlarged the description. This PR gives the usage page its own class names, then brings it, the PretUISpec template, ThemeFrame, the example gallery, the sticky-note card and the kit components those pages show (Autocomplete, Chip, StatusChip, Token, Toast, Table, Viewport, SegmentedControl, SlidingHighlight) in line with the theme contract and the UI review procedure. Ticket: CS-13504.

Where to start

• components/freestyle-usage.gts, internal/freestyle.gts, components/usage-*.gts: the pretui-usage* classes, none of them in a cascade layer. Spacing, type and radius come from the --boxel-* scales instead of hardcoded px and Pret UI season variables. The Properties panel is at least 26rem (or the full row, on a narrow screen): the row stacks it under the preview before it gets narrower. Section titles are h2s in the theme's eyebrow style that name the Properties panel and the two API tables, which sit in their panel without a second frame (Table's new @framed={{false}}). Each knob's visible name is its control's <label for>, a required argument carries a visually hidden "(required)", and each API row is headed by its argument name. The source scrolls in its own keyboard-reachable region beside a fixed Copy button.
• pretui-component.gts: the PretUISpec template, cleaned up the same way. The facts rail that repeated Provenance is gone; Provenance carries Demand as dots. The write-up opens at 14rem, with a Show more toggle only when it is longer, and sits beside Provenance when both fit; both panels are headed by h2s. Stage and flags render as StatusChip and Chip; the featured star is filled, has a tooltip saying what it means, and is labeled for screen readers, as is the topbar. Long names wrap instead of widening the page, breaking between camel-case words, and write-up code blocks scroll sideways. Sticky notes sit beside the title, each showing its title and a two-line excerpt; the first three show and the rest sit behind a Show N more disclosure, and the note composer's caption is its field's label. Key-value values are set in mono. The page scrolls in code mode's preview, and the card no longer scrolls past its theme frame onto a light background. In the edit view, the yes/no flags are Switches, captions are in sentence case, and Tags and Linked file are named groups. Category, tier, ownership, adoption, source and demand are enum fields over their closed vocabularies.
• pretui-note.gts: the sticky-note card. Its title is cardTitle (cardInfo.name, else the note's first line), status is an Open / Addressed enum shown as a Chip (kept visible at every fitted size), noted is a DateField, the fitted view is FittedCard, and every view reads the theme contract. The body renders only when it adds to the title, and the embedded view shows the title and the first four lines.
• components/theme-frame.gts: the mode control is the dark mode switch from Boxel's ThemeDashboard, and the island paints its own --background and --foreground and fills the frame, so dark mode shows.
• components/chip.gts, status-chip.gts, token.gts: Chip and StatusChip take @tone. A toned chip is outlined on --card in its tone's -ink, which draws the text and the ring; the neutral chip is --muted with --foreground. Chip and Token are the same height.
• components/viewport.gts, segmented-control.gts, sliding-highlight.gts: every caption names its mode (Fill · 100%, Tablet · 600px, Fill · 412px for a dragged width), so @label is gone; Phone is 320px and Tablet 600px, the surface picker adds Sidebar, the stage gets a veil so the artboard reads against it, and Inline renders inside a line of text. A dragged width belongs to Fill, the slider announces pixels, Surface and Padding apply to Grid's cells, and the canvas is a keyboard-reachable region. The toolbar fits a narrow panel, with the mode picker scrolling on its own; a selected segment no longer changes width when its label turns bold, segments take Button's corner, and a segment's focus ring is drawn on its label.
• components/autocomplete.gts: contract tokens throughout, ladder sizes, edges and matched text in the tone's -ink so a tone shows in both schemes, Clear as a Button, and disabled as aria-disabled plus readonly so the field can't be typed into.
• components/toast.gts, components/table.gts, components/step-list.gts, example-gallery.gts: Toast reads the contract, stays in flow with no z-index of its own, its message holds contrast on --popover in dark, and it narrows with its container without squeezing the icon. StepList's stacked track column is wider. Table has no divider under its last row. Example demos get room for their shadows, each card's meta rows line up by subgrid, the grid fits a 320px width, and the examples are a list headed by h3s.
• Tests: the usage-page, Spec and Viewport tests query data-test-* hooks instead of classes, and every usage page's smoke test checks that its example renders. New tests cover Table's @framed, Chip and StatusChip's @tone, and ThemeFrame's data-theme in each mode.

Key decisions and non-obvious mechanics

• The usage page styles are not in a cascade layer. Inside @layer PretComponent they lost to any unlayered rule, which is how ember-freestyle's description size won.
• No container query on the usage page: a named @container would make the realm's scoped-CSS transpiler drop every rule after it, and container-type would make the page the containing block for the examples' position: fixed popups.
• ThemeFrame drops its light/dark/auto control and collapsed popover. Like ThemeDashboard, it always sets a concrete data-theme, starting light: Boxel's chrome has fixed colors, so the switch previews dark mode rather than following the reader's system setting. Its switch handler toggles rather than reading the value it is passed, because the Switch in the pinned boxel-cli test harness passes its click event. PretUISpec is its only caller.
• Chip still reads the legacy knobs catalog chips set: --pretui-chip-mix and --pretui-ink-mix tint or fill a neutral chip toward --pretui-chip-hue, any mix above 0% also draws the hue hairline those chips were designed with, and --text-ui-xs sets the text size when the new --pretui-chip-font-size is unset. Unset, they resolve to plain --muted / --foreground at --boxel-font-size-2xs.
• Viewport's Phone and Tablet presets change width (320px and 600px), Viewport drops @label, and @framed is a new Table argument that defaults to true.
• The enum fields keep their stored string (and, for demand, number) values, so existing Specs load unchanged; stage and implementation status get their vocabularies under CS-13593.
• On each element, ...attributes comes last, after modifiers and data-test-*, so a caller can override any attribute. Linked labels use per-instance ids (guidFor on the component, or uniqueId), so two copies of a card on one page never share an id.
• The sticky-note tint is mixed in oklab, which keeps it warm over the cool dark --card; oklch turned it violet.
• Radii read --boxel-border-radius-*, and each px value moves to the nearest step on the Boxel scale, so some gaps and sizes shift by a pixel or two.
• The usage page's CopyButton keeps @variant='ghost' here; Pret UI IconButton and CopyButton: Button's arguments, em-sized icons, pressed state, and tone and appearance over variant #6503 changes it to @appearance='plain'.
• Follow-ups: the Spec's Add note button never renders because it reads createCard from context.actions (CS-13601); the rest of Pret UI's components move onto the contract under CS-13596. Catalog chips that still set Chip's legacy knobs move onto @tone and --pretui-chip-font-size, two catalog tables stop drawing a divider under their last row, and Chip then drops the knobs, under CS-13682. The breadcrumbs stay plain text until a Pret UI overview card exists for them to link to (CS-13701).

🤖 Generated with Claude Code

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-07T02:56:01.749804Z	2ea64f1	Draft marked ready

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 2ea64f15d5

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[richardhjtan]

[Claude Code 🤖]

[richardhjtan]

[Claude Code 🤖] Nothing reads --text-ui-xs here, so catalog chips that set it still lose their size. The comment above and chip.md both say it is the fallback, and before this PR Chip sized from var(--text-ui-xs, 11px). In boxel-catalog, fulfilment-status-chip.gts (--text-ui-xs: 0.75rem at size='base'), parcel-dimensions.gts (0.75rem) and hr/duration-field.gts (var(--boxel-font-size-sm)) set it, and they all drop to --boxel-font-size-2xs.

Suggested change

	font-size: var(--pretui-chip-font-size, var(--boxel-font-size-2xs));
	font-size: var(
	--pretui-chip-font-size,
	var(--text-ui-xs, var(--boxel-font-size-2xs))
	);