Interfaces with soul: Theme Studio, a UI index and a faster gate

Theme Studio

The theme editor at /theme/ is now a studio built on the real engine. Every control maps one to one onto a ThemeOptions key; the studio invents nothing of its own, so what you see is what your app gets.

You start from one of 12 curated looks (or “Surprise me”, which is seeded and always compiles), then shape it: the brand colour with an inline contrast report, 18 colour roles per scheme, nine surface materials, radius, density, fonts, the type scale by role and motion. The preview shows eight screens (dashboard, settings, list, sign in, landing, pricing, form and overlays) at 390, 768 and 1280 with light and dark side by side. It starts from designDefaults(), so it shows what a fresh app gets, not this site’s sketchbook theme.

The colour controls are in the library now. ColorField takes a hex, rgb() or oklch() value and shows the WCAG contrast of the pair as you type; SliderField pairs a slider with an editable number and a unit. Both are real components, so this is the same code the studio runs:

<script lang="ts">
  import { Button, ColorField, SliderField } from '@codeatlasdev/ui';

  let brand = $state('#1d4ed8');
  let radius = $state(10);
  // Buttons use --ca-radius-md, which is 10px times --ca-radius-scale: 10px of "Radius" is a scale of 1.
  const scale = $derived(radius / 10);
</script>

<div class="col">
  <ColorField label="Brand colour" bind:value={brand} against="#ffffff" role="fill" minRatio={3} />
  <SliderField label="Radius" unit="px" min={0} max={20} bind:value={radius} />
  <div class="preview" style="--ca-radius-scale:{scale}">
    <Button>Start free trial</Button>
    <Button variant="outlined">Learn more</Button>
    <span class="swatch" style="background:{brand}" role="img" aria-label="Brand colour {brand}"></span>
  </div>
  <p class="hint">Brand {brand}, radius {radius}px.</p>
</div>

<style>
  .col { display: grid; gap: var(--ca-space-4); max-inline-size: 24rem; }
  .preview { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ca-space-3); }
  .swatch { inline-size: var(--ca-space-8); block-size: var(--ca-space-8); border-radius: var(--ca-radius-md); }
  .hint { margin: 0; color: var(--ca-text-secondary); font-size: var(--ca-font-size-caption); font-family: var(--ca-font-mono); }
</style>

The same stage that frames the studio’s previews is exported as PreviewStage: a resizable device frame with a width control and a keyboard-operable splitter. Drag the splitter, or press an arrow key on it, and the components inside reflow at that width:

<script lang="ts">
  import { Button, Card, PreviewStage, Switch, TextField } from '@codeatlasdev/ui';

  // 'fill' is the component's default: the frame is as wide as the stage, so on a phone it is never scaled down
  // (a scaled frame draws every control smaller than it is). Pick 390, 768 or 1280 to see the other widths.
  let width = $state<number | 'fill'>('fill');
  let name = $state('Acme Inc.');
  let updates = $state(true);
</script>

<PreviewStage label="Workspace settings form" bind:width scheme="light" preset="ocean" height={380}>
  <Card title="Workspace" headingLevel={3} gap="md">
    <TextField label="Workspace name" bind:value={name} />
    <Switch bind:checked={updates} label="Email me about releases" />
    <Button>Save changes</Button>
  </Card>
</PreviewStage>

When you are done, the Code tab gives you theme.ts, the compiled CSS, the SvelteKit and Astro wiring and a share URL that round-trips (#t=v1...). “Apply to site” writes the compiled CSS under a key of its own in your browser only, replayed by an inline script before first paint; “Reset” removes it. There is no account and no server.

import { defineTheme } from "@codeatlasdev/ui";

export const theme = defineTheme({
  preset: "ocean",
  defaultStyle: "solid",
  radius: 12,
  type: { label: { size: "13px", leading: 1.25, tracking: "0", weight: 500 } },
});

The UI index and gallery viewer

The gallery used to be a long list. It is now an index: every numbered demo and every page template carries a block of facets (what it is, how it moves, which style, which technique, what it costs) and the gallery filters on them.

Chips for kind, subtype, style, motion, interaction, layout, colour mode, density, tech and cost narrow the cards as you click, show how many entries each value would match, and drop combinations that match nothing. Words match titles, aliases, tags and components. Facets, words and the group live in the URL, so ?kind=motion&style=aurora&q=fade is a link you can share.

An item opens on four tabs. Preview is a large resizable stage; Code is the source; Prompt is the text to hand an AI (the get_demo call, the library parts, the behaviour to keep, the exact motion timings and the reduced-motion and keyboard promises read from the index); Anatomy lists the components with their package and docs link, how the demo is built and its related items.

The index is the same data for agents. ca-ui-mcp gains search_ui, list_facets and get_related, and the build writes api/v1/index.json plus one markdown twin per item.

There is a rule about what the index is allowed to say. A facet that a person read by hand reaches search only when the one-sided 95% upper bound of its error rate, on a seeded and folder-stratified audit, is at most 5%. 0 wrong of 73 reads is “at most about 4% wrong”, never “0%”. Today industry is withheld: 5 wrong of 73, an upper bound of about 14%. Only 203 of 385 entries were ever re-read by a person; the other 182 hold the first pass’s value as corrected by rules, and we say so.

claude mcp add codeatlas-ui -- npx -y -p @codeatlasdev/ui ca-ui-mcp
# then ask: search_ui { "q": "fade", "motion": "subtle", "style": "aurora" }

Design style pages

/styles/ has six pages: Swiss, Editorial, Brutalism, Sketchbook, Glassmorphism and Terminal. Each page is rendered in the style it describes, so the type, corners, depth and motion you see are designStyle("...") applied to that page.

Each page has the origin, the traits (type, colour, shape, depth, motion), do and don’t, the accessibility pitfalls with their sources, the same components before and after, the recipe to copy and a prompt for your coding agent. A recipe is a proposal built from the library’s design knobs, not a measurement of any named visual language, and no claim says one style performs better than another.

“Apply to site” works here too: it wears the recipe in your browser only. designDefaults() is now exported, so a scoped preview can reset whatever an outer theme set. And the docs no longer present glass as the identity of the library: the default style is solid, and glass is one style among many.

import { defineTheme, designStyle } from "@codeatlasdev/ui";

export const theme = defineTheme(designStyle("editorial"));

Evidence, atlas and concepts

If a page says “people read faster with X”, where does that come from? 4.6.0 adds a contract for exactly that, and the machinery to keep it.

The design atlas lists 269 terms (DS001 to DS269) with category, definition, traits, sectors, UX risk and mitigation, three heuristic scales from 1 to 5, the status in 2026, a 2027 to 2030 trend (an editorial projection, not a forecast), how standard the term is and its references. You can browse it with facets at /atlas/, and agents get search_terms, get_term and get_reference.

The evidence layer holds 45 sources. Every one was opened on a recorded date, with the wording relied on kept as an excerpt and the route used to read it. A claim carries one of five labels (established, supported, preliminary, practice, heuristic), a scope (who or what was studied, which task, which context) and its sources. A standard counts as practice, a vendor study as preliminary. A reference also records what it does not support. Tests fail on a banned phrase, on a claim with no scope and on a citation to a source that was not read.

The four Concepts pages (viewport-complete UX, motion that respects people, targets and focus, appeal is not usability) are written to that template, each with a dated Limits box.

Opt-in sound

@codeatlasdev/ui/sound is a new optional entry: interface sound with no audio files. Every cue is a short oscillator and noise recipe, so the whole engine is small.

Sound is off by default. One shared AudioContext is created only inside the first pointer or key event after the visitor turns sound on with SoundToggle (aria-pressed, an accessible name, an optional volume slider); the choice persists in localStorage under ca-sound. Four profiles (system, glass, brutal, terminal) follow the design style through --ca-sound-profile, and --ca-sound-gain, --ca-sound-pitch and --ca-sound-brightness tune them. Hover and slider tick cues are off under prefers-reduced-motion, sound is suspended while the tab is hidden or media plays, and sound is never the only signal.

<script lang="ts">
  import { Button, Switch } from '@codeatlasdev/ui';
  import { SoundToggle } from '@codeatlasdev/ui/sound';

  let notify = $state(false);
</script>

<div class="col">
  <p class="label">Turn sound on, then press the buttons.</p>
  <div class="row">
    <SoundToggle volume />
    <Button sound>Save</Button>
    <Button variant="outlined" sound="success">Approve</Button>
    <Switch sound bind:checked={notify} label="Email me about releases" />
  </div>
  <p class="hint">Sound is off until you turn it on. Nothing plays before your first click or key press.</p>
</div>

<style>
  .col { display: grid; gap: var(--ca-space-3); }
  .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ca-space-3); }
  .label { margin: 0; color: var(--ca-text-primary); font-size: var(--ca-font-size-body1); }
  .hint { margin: 0; color: var(--ca-text-secondary); font-size: var(--ca-font-size-caption); }
</style>

<script>
  import { SoundToggle } from "@codeatlasdev/ui/sound";
  import { Button } from "@codeatlasdev/ui";
</script>

<SoundToggle />
<Button sound>Save</Button>

Inline overlays

Overlays live in the browser’s top layer, which is the right place for a real dialog and the wrong place for a preview: a dialog opened inside a themed island escapes to body and loses the island’s tokens. That is why the old Theme Studio overlays screen showed static replicas.

inline on Dialog, Sheet, Drawer, Popover, DropdownMenu and Toaster renders the overlay in place: position: absolute inside its container, never moved to body, no showModal() or showPopover(), no scroll lock, no focus trap, no inert page and no global Escape or outside-press ownership (Escape closes it from inside). It resolves the tokens of its container, so it follows a data-preset or data-theme-scope island. openLayer takes the same option. The studio’s overlays screen now shows the real components.

<script lang="ts">
  import { Button, Dialog, DropdownMenu, DropdownMenuItem, DropdownMenuLabel, ThemeIsland } from '@codeatlasdev/ui';

  let open = $state(true);
  let last = $state('Nothing picked yet');
</script>

<ThemeIsland scheme="dark" preset="ocean" class="island">
  <div class="bar">
    <Button size="sm" onclick={() => (open = !open)}>{open ? 'Close' : 'Open'} dialog</Button>
    <DropdownMenu inline>
      {#snippet triggerChild(props)}
        <Button size="sm" variant="outlined" {...props}>Environment</Button>
      {/snippet}
      <DropdownMenuLabel>Deploy to</DropdownMenuLabel>
      <DropdownMenuItem onclick={() => (last = 'Staging')}>Staging</DropdownMenuItem>
      <DropdownMenuItem onclick={() => (last = 'Production')}>Production</DropdownMenuItem>
    </DropdownMenu>
    <span class="note">{last}</span>
  </div>
  <!-- The dialog is absolutely positioned inside this region: a stage of its own, below the controls, so nothing overlaps. -->
  <div class="stage">
    <Dialog
      inline
      bind:open
      size="sm"
      title="Publish release 4.6.0?"
      description="This dialog is inside the box, wearing the box's own theme."
    >
      {#snippet actions()}
        <Button size="sm" variant="outlined" onclick={() => (open = false)}>Not yet</Button>
        <Button size="sm" onclick={() => (open = false)}>Publish</Button>
      {/snippet}
    </Dialog>
  </div>
</ThemeIsland>

<style>
  :global(.island) {
    inline-size: min(100%, 28rem);
    border: var(--ca-border-width) solid var(--ca-outline-default);
    border-radius: var(--ca-radius-md);
    overflow: hidden;
  }
  .bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ca-space-3); padding: var(--ca-space-3) var(--ca-space-4); }
  .stage { position: relative; min-block-size: 15rem; }
  .note { font-size: var(--ca-font-size-caption); color: var(--ca-text-secondary); }
</style>

<ThemeIsland scheme="dark" preset="ocean">
  <div style="position: relative; min-height: 240px">
    <Dialog inline bind:open title="Invite a teammate">...</Dialog>
  </div>
</ThemeIsland>

Hover that respects modals

A hover card that opens under a dialog is a bug you only see on a trackpad: you open the dialog, move the pointer, and a panel appears behind the scrim.

A new layers store has layers.modalOpen, reactive and true while a modal layer (Dialog, AlertDialog, Drawer, Sheet) is open, and layers.blocks(trigger), which is the same but false for a trigger inside the topmost modal. Tooltip, HoverCard and NavigationMenuItem use it and no longer open on pointer movement while a modal is open. A tooltip that was open when its trigger opened a dialog also no longer leaves a stray second copy in the page after the dialog closes. Gate your own hover or edge UI with the same store.

<script lang="ts">
  import { Button, Dialog, Tooltip, layers } from '@codeatlasdev/ui';

  let open = $state(false);
</script>

<div class="col">
  <div class="row">
    <Tooltip content="Copies a link to this release" delay={150}>
      {#snippet triggerChild(props)}
        <Button variant="outlined" {...props}>Hover me</Button>
      {/snippet}
    </Tooltip>
    <Button onclick={() => (open = true)}>Open dialog</Button>
  </div>
  <p class="state" aria-live="polite">Modal open: {layers.modalOpen ? 'yes' : 'no'}</p>
  <p class="hint">
    Hover the first button: a tooltip opens. Open the dialog, then try hovering again: nothing opens under it.
    This is the real top-layer dialog.
  </p>
</div>

<Dialog bind:open size="sm" title="Rename release" description="The page behind is inert, so hover panels stay closed.">
  {#snippet actions()}
    <Button onclick={() => (open = false)}>Done</Button>
  {/snippet}
</Dialog>

<style>
  .col { display: grid; gap: var(--ca-space-3); }
  .row { display: flex; flex-wrap: wrap; gap: var(--ca-space-3); }
  .state { margin: 0; font-family: var(--ca-font-mono); font-size: var(--ca-font-size-body2); color: var(--ca-text-primary); }
  .hint { margin: 0; font-size: var(--ca-font-size-caption); color: var(--ca-text-secondary); }
</style>

<script>
  import { layers } from "@codeatlasdev/ui";
  const hint = $derived(layers.modalOpen ? "paused" : "active");
</script>

A larger kit

Many of the 57 feature pull requests are components, driven by the work of moving real apps onto the library.

<script lang="ts">
  import {
    Button,
    ButtonGroup,
    Carousel,
    CarouselItem,
    DropdownMenuItem,
    HoverCard,
    Menubar,
    MenubarMenu,
    ResizableHandle,
    ResizablePanel,
    ResizablePanels,
    Tabs,
    TabsContent,
    TabsList,
    TabsTrigger,
  } from '@codeatlasdev/ui';

  const slides = ['Plan', 'Build', 'Ship'];
  let range = $state('Week');
</script>

<Tabs value="carousel">
  <TabsList fade aria-label="New components">
    <TabsTrigger value="carousel">Carousel</TabsTrigger>
    <TabsTrigger value="panels">Panels</TabsTrigger>
    <TabsTrigger value="group">ButtonGroup</TabsTrigger>
    <TabsTrigger value="menubar">Menubar</TabsTrigger>
    <TabsTrigger value="hover">HoverCard</TabsTrigger>
  </TabsList>
  <TabsContent value="carousel">
    <div class="pane">
      <Carousel label="Release steps">
        {#each slides as s (s)}
          <CarouselItem><div class="slide">{s}</div></CarouselItem>
        {/each}
      </Carousel>
    </div>
  </TabsContent>
  <TabsContent value="panels">
    <div class="pane frame">
      <ResizablePanels label="Workspace">
        <ResizablePanel id="files" defaultSize={35} minSize={15}><p class="cell">Files</p></ResizablePanel>
        <ResizableHandle label="Resize files" />
        <ResizablePanel id="editor" defaultSize={65}><p class="cell">Editor</p></ResizablePanel>
      </ResizablePanels>
    </div>
  </TabsContent>
  <TabsContent value="group">
    <div class="pane">
      <ButtonGroup aria-label="Range">
        {#each ['Day', 'Week', 'Month'] as r (r)}
          <Button variant={range === r ? 'filled' : 'outlined'} tone="neutral" aria-pressed={range === r} onclick={() => (range = r)}>{r}</Button>
        {/each}
      </ButtonGroup>
    </div>
  </TabsContent>
  <TabsContent value="menubar">
    <div class="pane">
      <Menubar aria-label="Document">
        <MenubarMenu label="File">
          <DropdownMenuItem>New</DropdownMenuItem>
          <DropdownMenuItem>Open</DropdownMenuItem>
        </MenubarMenu>
        <MenubarMenu label="Edit">
          <DropdownMenuItem>Undo</DropdownMenuItem>
          <DropdownMenuItem>Redo</DropdownMenuItem>
        </MenubarMenu>
      </Menubar>
    </div>
  </TabsContent>
  <TabsContent value="hover">
    <div class="pane">
      <HoverCard openDelay={150}>
        {#snippet triggerChild(props)}<Button variant="outlined" {...props}>Hover or focus me</Button>{/snippet}
        <p class="cell">Team plan: 10 seats and priority support.</p>
      </HoverCard>
    </div>
  </TabsContent>
</Tabs>

<style>
  .pane { padding-block-start: var(--ca-space-4); max-width: 28rem; }
  .frame { height: 9rem; border: var(--ca-border-width) solid var(--ca-outline-default); border-radius: var(--ca-radius-md); overflow: hidden; margin-block-start: var(--ca-space-4); padding: 0; }
  .slide { display: grid; place-items: center; height: 6rem; margin-inline: var(--ca-space-1); border-radius: var(--ca-radius-md); background: var(--ca-surface-sunken); color: var(--ca-text-primary); font-size: var(--ca-font-size-h5); }
  .cell { margin: 0; padding: var(--ca-space-3); color: var(--ca-text-secondary); font-size: var(--ca-font-size-body2); }
</style>

New: Carousel (scroll-snap, WAI-ARIA carousel, autoplay opt-in and never under reduced motion), ResizablePanels (window splitters, arrow keys 1%, Shift 10%), Menubar, ContextMenu (right-click, long-press and Shift+F10), HoverCard, NavigationMenu, ButtonGroup, AspectRatio, Kanban (on the new useDnd primitive from 4.5.0, with cross-column moves and per-column infinite scroll), Stat, ChipGroup, Heading, Highlight, StrikeThrough, LocaleSwitcher, PageFrame and a map-first AppShellLayout stage, Turnstile, PasswordStrength, SplashScreen and PreviewStage. Extended: Toast gets descriptions, one inline action and dedupe, TextField gets a password reveal, a below slot and input-group addons, Button gets tone="neutral" and a trailing hint, Badge gets a subtle pill, and Tabs, Progress, Drawer, Dialog and SimpleTable gain the options real screens asked for.

Theming reaches further too. ThemeOptions.components sets --ca-btn-*, --ca-avatar-*, --ca-card-* and other component tokens on one naming convention; ThemeIsland gives a block or a whole page its own preset and scheme with SSR parity; a named type scale by role (title, heading, body, label, caption, num) overrides any part for the whole app; presets can carry alpha colours and domain tokens (--ca-token-status-new).

A small one worth seeing: a trend is not always good news when it goes up. Stat and KpiCard take trendTone, so a falling churn reads as good.

<script lang="ts">
  import { Stat } from '@codeatlasdev/ui';
</script>

<div class="grid">
  <Stat label="Revenue" value="48,200" unit="USD" trend={12.4} trendTone="positive-up" />
  <Stat label="Churn" value="2.1" unit="%" trend={-1.8} trendTone="positive-down" />
  <Stat label="Active seats" value="1,204" trend={0.4} trendTone="neutral" />
</div>

<style>
  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--ca-space-5); }
</style>

<script lang="ts">
  import { Button, Toaster, toast } from '@codeatlasdev/ui';

  function fail() {
    for (let i = 0; i < 10; i++) toast.error('Could not reach the server.');
  }

  function upload() {
    toast.info('Uploading report.pdf…', { id: 'upload', duration: 0 });
    setTimeout(() => toast.success('report.pdf uploaded.', { id: 'upload' }), 1500);
  }

  function archive() {
    toast.success('Report archived', {
      description: 'It moved to the Archive folder.',
      action: { label: 'Undo', onClick: () => toast.info('Report restored.') },
    });
  }
</script>

<Toaster />

<div class="col">
  <div class="row">
    <Button variant="outlined" onclick={fail}>Fail 10 times</Button>
    <Button variant="outlined" onclick={upload}>Upload</Button>
    <Button variant="outlined" onclick={archive}>Archive report</Button>
  </div>
  <p class="hint">
    Ten identical errors leave one toast with a ×10 badge. Upload replaces its toast in place.
    The archive toast carries a description and an Undo action.
  </p>
</div>

<style>
  .col { display: grid; gap: var(--ca-space-3); }
  .row { display: flex; flex-wrap: wrap; gap: var(--ca-space-3); }
  .hint { margin: 0; color: var(--ca-text-secondary); font-size: var(--ca-font-size-caption); }
</style>

<script lang="ts">
  import { ChipGroup, TextField } from '@codeatlasdev/ui';

  let size = $state('2-5');
  let site = $state('acme');
  let password = $state('');

  const sizes = [
    { value: '1', label: 'Just me' },
    { value: '2-5', label: '2 to 5' },
    { value: '6-20', label: '6 to 20' },
    { value: '21-50', label: '21 to 50' },
    { value: '50+', label: '50+' },
  ];
</script>

<div class="col">
  <ChipGroup label="Sales team size" items={sizes} bind:value={size} />
  <TextField label="Website" prefix="https://" suffix=".com" bind:value={site} description="Read with the label: https:// acme .com" />
  <TextField
    label="Password"
    type="password"
    revealable
    required
    requiredIndicator={false}
    autocomplete="new-password"
    bind:value={password}
  >
    {#snippet below()}
      <a class="link" href="#forgot-password">Forgot password?</a>
    {/snippet}
  </TextField>
</div>

<style>
  .col { display: grid; gap: var(--ca-space-5); width: 100%; max-width: 26rem; }
  .link { color: var(--ca-brand-text); }
</style>

A test system that runs what you changed

The suites froze a 12-core machine: 2433 Playwright tests loaded all 182 docs routes four to six times, and visual tests ran in an emulated amd64 container. 4.6.0 changes the shape of testing, not just the speed.

bun run test now runs only what the diff against origin/main affects. Component tests are chosen by a static import graph (scripts/test-graph.ts), because Vitest’s own --changed selected 198 of 198 files for a one-line Avatar edit in browser mode. Routes are chosen by scripts/route-impact.ts, which fails safe: a shared path or a file it cannot place selects everything and says why. Every route is loaded once per project by three specs (smoke and layout, axe in dark, light and forced colors, and static HTML rules read from dist with no browser). Visual baselines are native per platform, the Docker path is gone, and a machine-wide lock lets one suite run at a time.

Every command has a time budget that is enforced: a run over its budget fails and prints its 10 slowest tests. On an oversubscribed machine the verdict is printed as not enforced, because it would only measure the other processes.

Later work held the land gate under its budget: with a shared change (every component test, 210 files) it measured 224.8 s with a cold social-card cache and 193.5 s with a warm one, at load 7 on 12 cores, against a 240 s budget (pull request 599). bun run test:full has a 300 s budget and, by the record in that same pull request, was not measured on a quiet machine: one run took 1092 s at load 50 and is not a result. We state it so you do not read the budget as a promise.

Three dev-tooling targets were not met in this release. A shared-change land (every component test) took 255 s against a 120 s target. Our own tooling peaks at 8 cores in one land against a 4-core cap, and that cap is not enforced yet (issue 632). The warm bun run test still takes 11 to 13 s against a 10 s target. The enforced budgets above hold; these targets are what we are still working toward, and the numbers are wall time on the maintainer’s shared 12-core machine.

maplibre-gl 6 and the advisory

maplibre-gl 6.4.0 and earlier carry a critical XSS in the attribution sanitizer (GHSA-jrc7-96c5-q579), fixed in 6.4.1. MapStage now works on maplibre-gl 6, so the peer range is ^5.0.0 || ^6.0.0 again and you can take the fix.

With engine="maplibre" the deck.gl layers go through MapLibreOverlay from the new optional peer @deck.gl/maplibre (~9.4.0, which supports maplibre-gl 4.5.1, 5 and 6), because MapboxOverlay throws Cannot read properties of undefined (reading 'height') on every frame there. engine="mapbox" keeps @deck.gl/mapbox. Fitting clear of a wide PageFrame no longer throws Invalid LngLat object: the padding was subtracted twice.

bun add maplibre-gl@^6.4.1 @deck.gl/maplibre@~9.4.0

On maplibre-gl 6 the app must also call setWorkerUrl once; the map docs show the Vite form.

Accessibility fixes

The fixes came from running axe over every route, in dark, light and forced colors, and from using the keyboard.

• FileUpload, NotificationBell: the accessible name now contains the visible text (WCAG 2.5.3, axe label-content-name-mismatch).
• Kanban column titles are h2 by default, so a board under a page h1 passes heading-order.
• --ca-brand-text is solved per preset and scheme: a light brand (lime, yellow, light cyan) no longer gets a 1.6:1 label on outlined buttons, links and active nav; it holds 4.5:1 on every surface. tests/contrast.test.ts measures every preset.
• AuthLayout: the compact mobile mark holds 4.5:1 in dark on every preset (it failed on six of eight at 390px), and a flat panel’s secondary text uses theme text levels (it measured 2.21:1 in light).
• Carousel, PreviewStage, ResizablePanel and CodeSnippet scroll regions are keyboard-reachable while they overflow (scrollable-region-focusable); Carousel and Menubar reach the 44px touch target; SegmentedControl items are 44px wide too, and the password reveal button got its hit area back.
• NavigationMenu: Enter or Space always toggles, also within 600 ms of a hover open.
• PageFrame no longer overflows a 390px viewport by the frame gap, and SiteHeader no longer overflows at 390px.
• Switch inside a SettingItem no longer needs a redundant aria-label: the row already names it.