@ultimat3/ui 23.0.0 → 24.0.0

package/CATALOG.md

@@ -659,13 +659,13 @@ Cursor-first pagination — the only shape a Postgres-backed list should use. Nu
 
 ### Popover
 
-Non-modal anchored panel. Positioning is CSS-only (a relatively positioned anchor plus logical insets), so there is no measure/reflow loop and the panel flips sides automatically under `dir="rtl"`.
+Non-modal anchored panel. Positioning is CSS-only (a relatively positioned anchor plus logical insets and auto-margin centring), so there is no measure/reflow loop and the panel mirrors under `dir="rtl"` — `rtl-sheets.test.ts` holds that.
 
 | Prop | Type | Required | Notes |
 |---|---|---|---|
 | `open` | `boolean` | yes |  |
 | `onOpenChange` | `(open: boolean) => void` | yes |  |
-| `trigger` | `(control: { id: string; 'aria-expanded': boolean; 'aria-controls': string; }) => JSX.Element` | yes | The anchor. Wire its onClick to `onOpenChange` in the caller. |
+| `trigger` | `(control: { id: string; 'aria-expanded': boolean; 'aria-controls': string \| undefined; }) => JSX.Element` | yes | The anchor. Wire its onClick to `onOpenChange` in the caller. `aria-controls` is present only while the panel is mounted: an IDREF to an element not in the document names nothing. |
 | `children` | `JSX.Element` | yes |  |
 | `label` | `string` | yes | Already-translated accessible name for the panel. |
 | `placement` | `Placement` | — |  |

package/CLAUDE.md

@@ -31,7 +31,7 @@ Tier 4. Imports `@ultimat3/core`, `i18n`, `money`, `time` — **not `schema`**,
 - **`@include t.tone-classes`** emits the `.tone-*` custom-property blocks. Never hand-write a seventh copy; `$tones` in `_colors.scss` mirrors `TONES` and `variants.test.ts` gates it.
 - **Icons are generated, never authored.** `src/icons/glyphs/*.ts` is one module per Lucide icon, written by `bun run icons` from `lucide-static@LUCIDE_VERSION`. Never hand-edit a glyph, never add a hand-drawn one, never introduce a second icon source. An upstream fix is a version bump plus a re-run. `lucide` itself is NOT a dependency — the data is committed, so the package still installs, typechecks and renders offline with zero runtime deps.
 - **One icon, one module.** The `Icon` component takes a `glyph`, not a name: a `name → glyph` map would be one module holding 1767 icons, and no bundler can split that. Per-icon imports are the whole point (1 icon = 104 B minified, 50 = 8.9 kB).
-- **No client runtime exists yet.** A new interactive component must be correct server-rendered and usable with scripting off — `<details>` for disclosure, `<input list>`+`<datalist>` for suggestions, a real `rel="next"` link for paging — with listeners and observers as additive extras. A component that renders nothing until JS runs does not ship.
+- **Server-rendered first, an island second.** Components run in islands (`examples/dummy`'s settings and feed islands render them), but every one must still be correct server-rendered and usable with scripting off — `<details>` for disclosure, `<input list>`+`<datalist>` for suggestions, a real `rel="next"` link for paging — with listeners and observers as additive extras. A component that renders nothing until JS runs does not ship. In an island the body runs ONCE: a branch decided there (an early `return <ErrorState>`) is decided for the island's life, so branches live inside the returned JSX (`AsyncRegion`, `DataTable`). A server-only spelling is gated on `typeof document` (`Textarea`'s parser newline). Ids minted in an island carry a per-copy scope (`a11y.ts`), because each island bundles its own counter.
 - **`inert-render.test.ts` must not assume which factory its `.tsx` compiled to.** `@ultimat3/render` installs a process-global `.tsx` `onLoad` plugin at import, so in one `bun test` process a component may compile to render's `h`. The walker recognises both (`Symbol.for('ultimate.render.jsx')`), and the first test asserts a recognised node — otherwise the file renders `"[object Object]"` and passes by shard packing.
 - **Components are not unit-tested through a renderer.** `.tsx` compiles to `@ultimat3/render`'s `h`, which this package may not import, so every rule lives in a pure module beside the component (`icon-glyph.ts`, `accordion-view.ts`, `combobox-filter.ts`, `infinite-scroll-view.ts`) and *that* is what the tests assert.
 - Formatting logic lives in a pure `*-view.ts` next to the component (`money-view.ts`, `date-time-view.ts`) so it is testable with no renderer. Every other renderer-free core follows the same rule under its own name (`sort-state.ts`, `image-source.ts`) — the `.tsx` holds markup, never a rule.
@@ -64,11 +64,10 @@ Tier 4. Imports `@ultimat3/core`, `i18n`, `money`, `time` — **not `schema`**,
 | `src/theme/runtime-slot.ts` | the module-scope slot holding the app's Solid runtime — and nothing else, so registering one costs an island 72 B |
 | `src/theme/solid-adapter.ts` | the runtime's SHAPE, and the one rule that decides which runtime a render gets |
 | `src/theme/inert-runtime.ts` | `INERT_SOLID_RUNTIME` — what a server render IS, not a stub of what it lacks |
-| `src/theme/theme.ts` | resolution: stored choice → OS; all side effects via injected `ThemeEnv` |
+| `src/theme/theme.ts` | resolution: stored choice → the theme the boot stamped on `<html>` (`ThemeEnv.current()`) → the app default (`data-theme-default`, `ThemeEnv.appDefault()`) → OS; clearing and the OS listener answer the app default too; all side effects via injected `ThemeEnv` |
 | `src/theme/ambient-slot.ts` | the module-scope slot holding the reader `useUi()` falls back to on the server — imports nothing, so a browser chunk pays nothing for it |
 | `src/theme/ambient.ts` | the server's reader (`ambientUiContext`: request locale, zone, direction, translator), registered at import; `index.ts` imports it bare, and the `browser` field maps it to `ambient.browser.ts`, which answers the defaults and registers nothing |
 | `src/error-registry.ts` | the `registerErrorCodes()` call, alone, so `errors.ts` is pure and the barrel's re-export of it costs a chunk nothing |
-| `src/theme/inline-script.ts` | anti-flash `<head>` snippet + its CSP sha256 |
 | `src/components/` | 62 components, `PascalCase.tsx` (component convention overrides the repo's kebab-case) |
 | `src/icons/glyphs/` | GENERATED: 1767 per-icon modules, `@ultimat3/ui/icons/<name>` → `icon<Name>` |
 | `src/icons/build-icons.ts` | the generator + the pinned `LUCIDE_VERSION`; `LICENSE.lucide` is upstream's ISC text |
@@ -107,6 +106,7 @@ bun test                                  # from the repo root
 bun run --filter @ultimat3/ui typecheck
 bun run --filter @ultimat3/ui catalog     # after any prop change — CATALOG.md is gated
 bun run --filter @ultimat3/ui icons       # regenerate the glyph set (network; dev-only)
+bun run --filter @ultimat3/ui icons --bump  # move LUCIDE_VERSION to the latest lucide-static, then regenerate
 ```
 
 ## Deep import

package/README.md

@@ -44,7 +44,7 @@ A rung is `sm md lg xl 2xl`, quoted or bare. Prefer a container query (`t.contai
 | No raw colours | a hex or `rgb()` literal in a component stylesheet fails review; `tokens.test.ts` asserts the shared SCSS is hex-free |
 | No Tailwind | not a dependency, not a config, not an escape hatch |
 | No CSS-in-JS | styles are `Foo.module.scss` next to `Foo.tsx`, compiled at build |
-| No physical directions | `margin-inline`, `inset-inline-start`, `text-align: start` — RTL needs no second stylesheet |
+| No physical directions | `margin-inline`, `inset-inline-start`, `text-align: start` — RTL needs no second stylesheet. Centring is `inset-inline` + `margin-inline: auto`, never a 50% logical inset beside a physical −50% translate, and an edge shadow's physical x offset gets a `[dir='rtl']` mirror (`components/rtl-sheets.test.ts`) |
 | No hardcoded strings | labels are props, or `t()` through `UI_KEYS` |
 | One token source | `src/tokens/*.scss` is canonical; `tokens.ts` mirrors it and `x verify` fails on drift |
 | AA contrast, both themes | `contrast.test.ts` measures every pairing a component renders — text, status fills, soft tints, focus rings, borders |
@@ -496,14 +496,15 @@ one politeness — `politeness="assertive"` for a region that carries errors alo
 
 ## Theme resolution
 
-`explicit choice in localStorage` → `OS preference`. `setTheme()` persists,
-`clearTheme()` forgets and follows the OS again, and the OS listener only applies
-while nothing is stored. `themeInlineScriptTag()` goes in `<head>` and applies the
-result before first paint, so there is no flash and screenshots are deterministic:
-
-```
-Content-Security-Policy: script-src 'self' 'sha256-…'   # themeInlineScriptCspSource()
-```
+`explicit choice in localStorage` → `the theme already on <html>` → `defaultTheme(env)`: the
+app's `theme.defaultMode` (`data-theme-default`), and the OS only when that is `'system'` or
+absent. The framework's boot inlines `themeScript({ fallback })` from
+`@ultimat3/render` and stamps `data-theme` before first paint, and `resolveTheme()` reads it back
+through `ThemeEnv.current()` — so with `defaultMode: 'dark'` on a light-OS machine the first toggle
+flips to light rather than writing the dark already on screen. `setTheme()` persists,
+`clearTheme()` forgets and returns to the app default (`data-theme-default`, which the boot stamps
+from `theme.defaultMode`; the OS for `'system'`), and the OS listener applies only while nothing is
+stored and that default is `'system'`.
 
 ## Forms bound to an action's input schema
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultimat3/ui",
-  "version": "23.0.0",
+  "version": "24.0.0",
   "description": "SolidJS design system: semantic design tokens, dark/RTL-ready SCSS modules, a11y primitives",
   "license": "MIT",
   "type": "module",
@@ -49,10 +49,10 @@
     "icons": "bun run src/icons/build-icons.ts"
   },
   "dependencies": {
-    "@ultimat3/core": "23.0.0",
-    "@ultimat3/i18n": "23.0.0",
-    "@ultimat3/money": "23.0.0",
-    "@ultimat3/time": "23.0.0"
+    "@ultimat3/core": "24.0.0",
+    "@ultimat3/i18n": "24.0.0",
+    "@ultimat3/money": "24.0.0",
+    "@ultimat3/time": "24.0.0"
   },
   "peerDependencies": {
     "solid-js": "^1.9.0"

package/src/a11y.ts

@@ -20,27 +20,41 @@ export const FOCUSABLE_SELECTOR = [
 ].join(',');
 
 let idCounter = 0;
+let islandScope: string | undefined;
 
 /**
- * Unique id for label/description wiring, from a PROCESS-wide counter. Prefixed so a mismatch is
- * obvious in the DOM rather than silent.
+ * The part of an id that tells two copies of this module apart. Each island is its own bundle by
+ * default (`islands.sharedChunks` off — measured: every island chunk inlines this counter; with it
+ * on, one shared chunk holds it), so each island counts from zero and two of them both minted
+ * `field-1`. In a browser every copy draws its own scope once; a server render has one copy and no
+ * scope, so a document's ids carry no random part.
+ */
+function scope(): string {
+  if (typeof document === 'undefined') return '';
+  if (islandScope === undefined) {
+    const [draw = 0] = crypto.getRandomValues(new Uint32Array(1));
+    islandScope = draw.toString(36);
+  }
+  return `${islandScope}-`;
+}
+
+/**
+ * Unique id for label/description wiring. Prefixed so a mismatch is obvious in the DOM.
  *
- * Correct for the only render path that exists: a server render walks a tree once, so every id in
- * one document is distinct, which is all `for`/`aria-describedby` need. It is NOT stable across two
- * renders of the same tree — a second process, or a client re-render, starts its own count — so it
- * cannot survive hydration. That is latent rather than broken: this package has no client runtime
- * (see CLAUDE.md), so nothing re-renders a server tree yet. Making it survive needs a
- * RENDER-SCOPED counter, which means a seam in `@ultimat3/render` (or a `SolidRuntime` member);
- * resetting this one per request would only move the collision. Do not paper over it here.
+ * On the server it comes from a PROCESS-wide counter: every id in one document is distinct, which
+ * is all `for`/`aria-describedby` need, but two renders of one page mint different numbers — a
+ * render-scoped counter needs a seam in `@ultimat3/render`. An island never reuses a server id: it
+ * replaces its shell rather than hydrating it, and its own ids carry its scope (above).
  */
 export function useId(prefix = 'u'): string {
   idCounter += 1;
-  return `${prefix}-${idCounter.toString(36)}`;
+  return `${prefix}-${scope()}${idCounter.toString(36)}`;
 }
 
 /** Test-only: make id assertions deterministic. */
 export function resetIdCounter(): void {
   idCounter = 0;
+  islandScope = undefined;
 }
 
 /**

package/src/components/CommandPalette.module.scss

@@ -3,10 +3,14 @@
 .palette {
   position: fixed;
   inset-block-start: 12vh;
-  inset-inline-start: 50%;
+  // Centred by auto margins between two zero insets, never by a 50% inset and a -50% translate:
+  // the inset is logical and the translate physical, so under `dir="rtl"` that pair puts the
+  // palette a whole width off-centre (`rtl-sheets.test.ts`).
+  inset-inline: 0;
   inline-size: min(32rem, calc(100vw - #{t.space(8)}));
   max-block-size: 60vh;
-  margin: 0;
+  margin-block: 0;
+  margin-inline: auto;
   padding: 0;
   border: 1px solid t.role('line');
   border-radius: t.radius(lg);
@@ -20,8 +24,7 @@
   overflow: hidden;
   z-index: t.z(dialog);
 
-  // Transform-only translate keeps the 50% inline offset from fighting `margin-inline`.
-  transform: translateX(-50%) translateY(calc(-1 * #{t.space(1)})) scale(0.98);
+  transform: translateY(calc(-1 * #{t.space(1)})) scale(0.98);
   opacity: 0;
   visibility: hidden;
   transition:
@@ -30,7 +33,7 @@
     visibility t.duration(fast) t.easing(out);
 
   &[open] {
-    transform: translateX(-50%) translateY(0) scale(1);
+    transform: translateY(0) scale(1);
     opacity: 1;
     visibility: visible;
     transition-duration: t.duration(base);

package/src/components/DataTable.tsx

@@ -137,23 +137,6 @@ export function DataTable<Row>(props: DataTableProps<Row>): JSX.Element {
     ));
   };
 
-  const decided = branch();
-  if (decided.kind === 'failed') {
-    return <ErrorState error={decided.error} onRetry={props.onRetry} class={props.class} />;
-  }
-
-  // Unreachable while pending, by the shape of `AsyncBranch` rather than by the order of two ifs:
-  // "No results" under a first page in flight is the bug that ordering used to be all that stopped.
-  if (decided.kind === 'empty') {
-    return (
-      <EmptyState
-        title={props.emptyTitle}
-        description={props.emptyDescription}
-        class={props.class}
-      />
-    );
-  }
-
   /** One mode per use, exactly as `Pagination` declares it — the table only hands it through. */
   const pager = (): JSX.Element =>
     props.hrefFor === undefined ? (
@@ -216,35 +199,55 @@ export function DataTable<Row>(props: DataTableProps<Row>): JSX.Element {
     );
   };
 
-  return (
-    <div class={cx(styles['wrap'], props.class)}>
-      <Table
-        caption={props.caption}
-        stickyHeader={props.stickyHeader !== false}
-        density={props.density ?? 'comfortable'}
+  // An array, not a fragment: this package's `.tsx` compiles to two factories (Solid's and render's
+  // `h`), and only an array means the same sibling list to both.
+  const table = (decided: AsyncBranch<readonly Row[]>): JSX.Element => [
+    <Table
+      caption={props.caption}
+      stickyHeader={props.stickyHeader !== false}
+      density={props.density ?? 'comfortable'}
+    >
+      <thead>
+        <tr>
+          {props.columns.map((column) => (
+            <th
+              scope="col"
+              style={column.width === undefined ? undefined : { 'inline-size': column.width }}
+              aria-sort={ariaSortFor(props.sort, column.key)}
+              class={column.numeric === true ? styles['numeric'] : undefined}
+            >
+              {sortControl(column)}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody
+        class={decided.kind === 'ready' && decided.busy ? styles['stale'] : undefined}
+        aria-busy={ariaBool(isBusyBranch(decided))}
       >
-        <thead>
-          <tr>
-            {props.columns.map((column) => (
-              <th
-                scope="col"
-                style={column.width === undefined ? undefined : { 'inline-size': column.width }}
-                aria-sort={ariaSortFor(props.sort, column.key)}
-                class={column.numeric === true ? styles['numeric'] : undefined}
-              >
-                {sortControl(column)}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody
-          class={decided.kind === 'ready' && decided.busy ? styles['stale'] : undefined}
-          aria-busy={ariaBool(isBusyBranch(decided))}
-        >
-          {body()}
-        </tbody>
-      </Table>
-      {props.nextCursor === undefined && props.prevCursor === undefined ? null : pager()}
-    </div>
-  );
+        {body()}
+      </tbody>
+    </Table>,
+    props.nextCursor === undefined && props.prevCursor === undefined ? null : pager(),
+  ];
+
+  /**
+   * The branch is decided INSIDE the returned JSX, as `AsyncRegion` does: a component body runs
+   * once, so a decision taken there is the decision for the island's whole life — a table that
+   * first rendered its error state kept it after the query recovered.
+   */
+  const content = (): JSX.Element => {
+    const decided = branch();
+    if (decided.kind === 'failed') {
+      return <ErrorState error={decided.error} onRetry={props.onRetry} />;
+    }
+    // Unreachable while pending, by the shape of `AsyncBranch` rather than by the order of two
+    // ifs: "No results" under a first page in flight is the bug that ordering used to stop.
+    if (decided.kind === 'empty') {
+      return <EmptyState title={props.emptyTitle} description={props.emptyDescription} />;
+    }
+    return table(decided);
+  };
+
+  return <div class={cx(styles['wrap'], props.class)}>{content()}</div>;
 }

package/src/components/Dropzone.module.scss

@@ -25,8 +25,10 @@
     background: t.role('bg-soft');
   }
 
+  // Dimmed directly: `@include t.disabled` appends `:disabled`, which a `<label>` carrying a data
+  // flag can never be, so the rule it compiled to matched nothing (`disabled-dim.test.ts`).
   &[data-disabled='true'] {
-    @include t.disabled;
+    opacity: 0.55;
     background: t.role('bg-soft');
     cursor: not-allowed;
   }

package/src/components/Dropzone.tsx

@@ -12,7 +12,7 @@ import { useUi } from '../theme/context';
 import { solid } from '../theme/solid-adapter';
 import styles from './Dropzone.module.scss';
 import type { FileSelection } from './file-input-view';
-import { adoptDroppedFiles, progressPercent, selectFiles } from './file-input-view';
+import { adoptAcceptedFiles, progressPercent, selectFiles } from './file-input-view';
 
 export interface DropzoneProps {
   /** Already-translated instruction. Required — it is the control's accessible name. */
@@ -49,8 +49,12 @@ export function Dropzone(props: DropzoneProps): JSX.Element {
   const inputId = (): string => props.id ?? fallbackId;
   const percent = (): number => progressPercent(props.progress ?? 0);
 
-  const offer = (files: FileList | null | undefined): void => {
-    props.onSelect(selectFiles([...(files ?? [])], props));
+  // The input first, then the callback: a drop that only reaches `onSelect` leaves the real
+  // control empty, and a refused file left in it is posted by the form anyway.
+  const offer = (files: FileList | null | undefined, origin: 'drop' | 'pick'): void => {
+    const selection = selectFiles([...(files ?? [])], props);
+    adoptAcceptedFiles(input, files, selection, origin);
+    props.onSelect(selection);
   };
 
   // `dragover` must be cancelled on every tick or the browser refuses the drop and navigates to
@@ -74,10 +78,7 @@ export function Dropzone(props: DropzoneProps): JSX.Element {
         event.preventDefault();
         setOver(false);
         if (props.disabled === true) return;
-        // The input first, then the callback: a drop that only reaches `onSelect` leaves the real
-        // control empty, and the form the label sits in submits nothing.
-        adoptDroppedFiles(input, event.dataTransfer?.files);
-        offer(event.dataTransfer?.files);
+        offer(event.dataTransfer?.files, 'drop');
       }}
     >
       <span class={styles['label']}>{props.label}</span>
@@ -96,7 +97,7 @@ export function Dropzone(props: DropzoneProps): JSX.Element {
         disabled={props.disabled === true}
         aria-describedby={props['aria-describedby']}
         aria-invalid={ariaBool(props['aria-invalid'])}
-        onChange={(event) => offer(event.currentTarget.files)}
+        onChange={(event) => offer(event.currentTarget.files, 'pick')}
       />
       {props.progress === undefined ? null : (
         <span

package/src/components/FileInput.module.scss

@@ -51,8 +51,10 @@
     border-color: t.role('accent');
   }
 
+  // Dimmed directly: a pseudo-element is never itself `:disabled`, so `@include t.disabled` here
+  // compiled to a selector nothing matches (`disabled-dim.test.ts`).
   &:disabled::file-selector-button {
-    @include t.disabled;
+    opacity: 0.55;
     cursor: not-allowed;
   }
 }

package/src/components/FileInput.tsx

@@ -10,7 +10,7 @@ import { UI_KEYS } from '../i18n-keys';
 import { useUi } from '../theme/context';
 import styles from './FileInput.module.scss';
 import type { FileSelection } from './file-input-view';
-import { progressPercent, selectFiles } from './file-input-view';
+import { adoptAcceptedFiles, progressPercent, selectFiles } from './file-input-view';
 import type { Size } from './variants';
 
 export interface FileInputProps {
@@ -61,7 +61,11 @@ export function FileInput(props: FileInputProps): JSX.Element {
         aria-invalid={ariaBool(props['aria-invalid'])}
         onBlur={props.onBlur}
         onChange={(event) => {
-          props.onSelect?.(selectFiles([...(event.currentTarget.files ?? [])], props));
+          const selection = selectFiles([...(event.currentTarget.files ?? [])], props);
+          // `accept` only steers the picker; "All files" gets past it, and the form would post
+          // what this control just refused.
+          adoptAcceptedFiles(event.currentTarget, event.currentTarget.files, selection, 'pick');
+          props.onSelect?.(selection);
         }}
       />
       {props.progress === undefined ? null : (

package/src/components/Meter.tsx

@@ -9,7 +9,7 @@
 import type { JSX } from 'solid-js';
 import { cx } from '../cx';
 import styles from './Meter.module.scss';
-import { meterShare, meterWidth } from './meter-view';
+import { meterAria, meterShare, meterWidth } from './meter-view';
 import type { Tone } from './variants';
 
 export interface MeterProps {
@@ -49,8 +49,8 @@ export function Meter(props: MeterProps): JSX.Element {
       role="meter"
       aria-label={props.label}
       aria-valuemin={0}
-      aria-valuemax={props.max}
-      aria-valuenow={props.value}
+      aria-valuemax={meterAria(props.value, props.max).max}
+      aria-valuenow={meterAria(props.value, props.max).now}
     >
       {bars()}
     </svg>

package/src/components/Popover.module.scss

@@ -33,27 +33,24 @@
   inset-block-start: 0;
 }
 
-.align-start {
-  inset-inline-start: 0;
-}
-
-.align-end {
-  inset-inline-end: 0;
-}
-
-.align-center {
-  inset-inline-start: 50%;
-  translate: -50% 0;
-}
+// Alignment is along the anchor's inline edge, so it exists only for the block placements. An
+// inline placement owns both inline insets itself; an align rule that reached it (and the reset
+// that used to undo one) wiped the placement's own inset and dropped the panel over the anchor.
+.placement-block-end,
+.placement-block-start {
+  &.align-start {
+    inset-inline-start: 0;
+  }
 
-// Inline placements own their own inline axis; alignment must not fight them.
-.placement-inline-end,
-.placement-inline-start {
-  &.align-start,
-  &.align-center,
   &.align-end {
-    inset-inline-start: auto;
-    inset-inline-end: auto;
-    translate: none;
+    inset-inline-end: 0;
+  }
+
+  // Auto margins inside an inset band far wider than any panel: centred in either direction. A 50%
+  // logical inset with a -50% physical translate is a whole width off under `dir="rtl"`.
+  &.align-center {
+    inset-inline: -100vw;
+    margin-inline: auto;
+    inline-size: fit-content;
   }
 }

package/src/components/Popover.tsx

@@ -1,6 +1,6 @@
 // Non-modal anchored panel. Positioning is CSS-only (a relatively positioned
-// anchor plus logical insets), so there is no measure/reflow loop and the panel
-// flips sides automatically under `dir="rtl"`.
+// anchor plus logical insets and auto-margin centring), so there is no measure/reflow
+// loop and the panel mirrors under `dir="rtl"` — `rtl-sheets.test.ts` holds that.
 
 import type { JSX } from 'solid-js';
 import { createFocusTrap, useId } from '../a11y';
@@ -13,11 +13,14 @@ export type Placement = 'block-end' | 'block-start' | 'inline-end' | 'inline-sta
 export interface PopoverProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  /** The anchor. Wire its onClick to `onOpenChange` in the caller. */
+  /**
+   * The anchor. Wire its onClick to `onOpenChange` in the caller. `aria-controls` is present only
+   * while the panel is mounted: an IDREF to an element not in the document names nothing.
+   */
   trigger: (control: {
     id: string;
     'aria-expanded': boolean;
-    'aria-controls': string;
+    'aria-controls': string | undefined;
   }) => JSX.Element;
   children: JSX.Element;
   /** Already-translated accessible name for the panel. */
@@ -63,7 +66,11 @@ export function Popover(props: PopoverProps): JSX.Element {
         root = el;
       }}
     >
-      {props.trigger({ id: triggerId, 'aria-expanded': props.open, 'aria-controls': panelId })}
+      {props.trigger({
+        id: triggerId,
+        'aria-expanded': props.open,
+        'aria-controls': props.open ? panelId : undefined,
+      })}
       {props.open ? (
         <div
           ref={(el: HTMLDivElement) => {

package/src/components/Tabs.module.scss

@@ -18,11 +18,17 @@
     border-inline-end: 1px solid t.role('line');
   }
 
+  // On the list's inline-END edge, beside its border. A shadow's x offset is physical, so RTL —
+  // where that edge is the left one — gets the mirrored sign, as `Switch.module.scss` does.
   .tab[aria-selected='true'] {
     box-shadow: inset calc(-1 * #{t.stroke(thick)}) 0 0 0 t.role('accent');
   }
 }
 
+[dir='rtl'] .orientation-vertical .tab[aria-selected='true'] {
+  box-shadow: inset t.stroke(thick) 0 0 0 t.role('accent');
+}
+
 .list {
   @include t.custom-scrollbar;
   display: flex;

package/src/components/Textarea.tsx

@@ -28,11 +28,13 @@ export interface TextareaProps {
 /**
  * `<textarea>` has NO `value` attribute — its value is its text content, and the parser drops the
  * attribute silently, so `value={…}` rendered every admin edit box empty whatever the row held.
- * The leading newline is the serializer's, not the value's: the HTML parser strips exactly one
- * newline after `<textarea>`, so emitting it unconditionally is what makes a value that itself
- * starts with a newline survive the round trip.
+ * On the SERVER the leading newline is the serializer's, not the value's: the HTML parser strips
+ * exactly one newline after `<textarea>`, so emitting it unconditionally is what makes a value that
+ * itself starts with a newline survive the round trip. In a BROWSER no parser runs — an island
+ * builds the element — so the value is the `.value` property, and the newline would be data.
  */
 export function Textarea(props: TextareaProps): JSX.Element {
+  const onServer = typeof document === 'undefined';
   return (
     <textarea
       class={cx(styles['textarea'], props.autoGrow === true && styles['autoGrow'], props.class)}
@@ -49,8 +51,9 @@ export function Textarea(props: TextareaProps): JSX.Element {
       aria-invalid={ariaBool(props['aria-invalid'])}
       onInput={props.onInput}
       onBlur={props.onBlur}
+      value={onServer ? undefined : (props.value ?? '')}
     >
-      {`\n${props.value ?? ''}`}
+      {onServer ? `\n${props.value ?? ''}` : undefined}
     </textarea>
   );
 }

package/src/components/Tooltip.module.scss

@@ -9,8 +9,13 @@
   @include t.transition(opacity, translate);
   position: absolute;
   z-index: t.z(tooltip);
-  inset-inline-start: 50%;
-  translate: -50% t.space(1);
+  // Centred over the trigger in either direction: auto margins inside an inset band far wider than
+  // any bubble. A 50% logical inset with a -50% physical translate lands a whole width off-centre
+  // under `dir="rtl"` (`rtl-sheets.test.ts`).
+  inset-inline: -100vw;
+  margin-inline: auto;
+  inline-size: max-content;
+  translate: 0 t.space(1);
   max-inline-size: 18rem;
   padding-block: t.space(1);
   padding-inline: t.space(2);
@@ -36,6 +41,6 @@
 // Hover and keyboard focus both reveal it — a hover-only tooltip is inaccessible.
 .wrap:hover .bubble,
 .wrap:focus-within .bubble {
-  translate: -50% 0;
+  translate: 0 0;
   opacity: 1;
 }

package/src/components/bar-chart-view.ts

@@ -50,13 +50,17 @@ export function gridY(step: number): number {
 /** One rect per point, oldest first. At least 2px tall so a zero still draws a visible bar. */
 export function barRects(points: readonly ChartPoint[]): readonly BarRect[] {
   const count = Math.max(points.length, 1);
-  const width = (BAR_CHART.width - BAR_CHART.gap * (count - 1)) / count;
+  // The gap gives way before the bars do: at most half of each bar's slot, so past the 201 points
+  // where 3px gaps alone fill the width, every bar is still a positive rect and the row still ends
+  // at the right edge.
+  const gap = Math.min(BAR_CHART.gap, BAR_CHART.width / count / 2);
+  const width = (BAR_CHART.width - gap * (count - 1)) / count;
   const max = maxOf(points);
   return points.map((point, index) => {
     const value = Number.isFinite(point.value) ? Math.max(0, point.value) : 0;
     const height = Math.max(2, (value / max) * BAR_CHART.plot);
     return {
-      x: index * (width + BAR_CHART.gap),
+      x: index * (width + gap),
       y: BAR_CHART.top + BAR_CHART.plot - height,
       width,
       height,