@adia-ai/web-modules 0.8.12 → 0.8.14

package/theme/theme-panel/theme-panel.css

@@ -11,7 +11,6 @@ theme-panel {
   --theme-panel-gap:       var(--a-space-3);
   --theme-panel-pad:       var(--a-space-3);
   --theme-panel-min-width: 260px;
-  --theme-panel-row-gap:   var(--a-space-1);
   --theme-panel-preset-gap: var(--a-space-2);
 }
 
@@ -26,6 +25,20 @@ theme-panel {
     min-width: var(--theme-panel-min-width);
   }
 
+  /* The panel's own chrome is pinned to a fixed density register
+     ("compact" — 0.85/0.75) on the <theme-provider scale="ui-md"> wrapper
+     — the single place that locks the panel's own size/scale, independent
+     of whatever --a-density/[scale] the Density slider / Scale select is
+     driving on the TARGET. Both share :root as a DOM ancestor by default,
+     so without this the panel's own controls balloon in lockstep with the
+     page it's controlling (verified live: dragging Density to 1.5, or
+     Scale to content-lg, also enlarged the popover's own buttons/select).
+     theme-provider is display:contents, so this adds no box of its own. */
+  theme-provider {
+    --a-density: 0.85;
+    --a-radius-k: 0.75;
+  }
+
   [part="scheme"] {
     display: flex;
   }
@@ -34,14 +47,9 @@ theme-panel {
     flex: 1;
   }
 
-  [part="themes"] {
-    display: flex;
-    gap: var(--theme-panel-row-gap);
-    flex-wrap: wrap;
-  }
-
-  /* Labelled control row — "Density" / "Scale Context" label on the left,
-     the preset buttons / register segmented pushed to the right. */
+  /* Labelled control row — "Theme" / "Preset" / "Scale" label on the left,
+     the select-ui / preset buttons pushed to the right. */
+  [part="theme-row"],
   [part="preset-row"] {
     display: flex;
     align-items: center;
@@ -55,5 +63,10 @@ theme-panel {
     flex-wrap: wrap;
   }
 
-  /* field-ui already provides its own label + layout; nothing extra here */
+  /* Reset — its own row at the very bottom (separated by a divider in
+     markup order), distinct from the Preset row's "Default" button. */
+  [part="reset-row"] {
+    display: flex;
+  }
+
 }

package/theme/theme-panel/theme-panel.d.ts

@@ -6,9 +6,12 @@ light/dark switching, plus optional localStorage persistence behind a
 small attribute API.
 
 Drops into any consumer's <popover-ui slot="content"> (the canonical
-composition) or directly into a sidebar section. Eight named themes
-ship by default; section visibility flips on/off via boolean attributes
-([parametric], [presets], [scheme-toggle]).
+composition) or directly into a sidebar section. The 12 named identities
+in styles/themes.css ship by default (a <select-ui> Theme row); pass
+[themes="slug1 slug2"] to restrict, or "" to suppress the row entirely.
+Section visibility flips on/off via boolean attributes ([parametric],
+[presets], [register], [scheme-toggle]); a Reset row (own button, bottom
+of the panel) always renders and clears everything via .reset().
 
 Promoted from the duplicated <div id="theme-panel"> block in site/ and
 playgrounds/admin-shell/ — see .claude/docs/specs/theme-panel-module.md.
@@ -29,6 +32,7 @@ export interface ThemePanelThemeChangeEventDetail {
   theme: string;
   density: string;
   radius: string;
+  scale: string;
   scheme: string;
   source: string;
 }
@@ -45,15 +49,20 @@ playgrounds and embedded demos do not silently mutate a user's
 docs-shell preferences.
  */
   persist: boolean;
-  /** Renders the compact / reset / spacious preset row. Each preset
-applies a (density, radius) pair; "default" also clears the
-[theme] attribute.
+  /** Renders the compact / default / spacious preset row. Each preset
+applies a (density, radius) pair only — it does not touch [theme],
+[scheme], or [scale]. Full state clearing lives in the panel's
+always-rendered Reset row (bottom, own button, calls .reset()).
  */
   presets: boolean;
-  /** Renders a "Scale Context" row (verse / regular / prose) — a
-<segmented-ui> that toggles the [verse] / [prose] typographic register
-on the target element (regular clears both). Persisted like the other
-knobs when [persist] is set.
+  /** Renders a "Scale" row — a <select-ui> offering the six ancestor
+[scale] tiers (ui-sm | ui-md | ui-lg | content-sm | content-md |
+content-lg, plus a Default option that clears the attribute) —
+writing [scale="<tier>"] directly on the target element, matching
+theme-provider.class.js's own `scale` prop values exactly.
+Supersedes the old verse/regular/prose register (deprecated
+[verse]/[prose] aliases); this control never writes them.
+Persisted like the other knobs when [persist] is set.
  */
   register: boolean;
   /** Initial color-scheme. "auto" follows prefers-color-scheme via a
@@ -67,10 +76,15 @@ an explicit light or dark choice.
 demos.
  */
   target: string;
-  /** Space-separated list of theme slugs to render as buttons. Author
-may restrict ([themes="default ocean"]) or extend. Tolerant —
-unknown slugs render a button; clicking applies [theme=slug]
-regardless of whether themes.css has a matching block.
+  /** Space-separated list of theme slugs to render in the Theme
+<select-ui>. Defaults to the 12 named identities shipped in
+styles/themes.css — atlas, signal, terrarium, ledger, arcade,
+meridian, solstice, glacier, ember, botanica, vector, velour
+(each a real recolor + real Google/system font pairing, not a
+decorative hue nudge — see that file's header). Pass "" to
+suppress the Theme row entirely. Tolerant — unknown slugs still
+render as an option; selecting one applies [theme=slug] regardless
+of whether themes.css has a matching block.
  */
   themes: string;
 

package/theme/theme-panel/theme-panel.js

@@ -10,9 +10,20 @@
  * in site/ and playgrounds/admin-shell/.
  *
  * Author-supplied attributes (read once at connect):
- *   [themes="slug1 slug2 …"]      space-separated theme list; default = 8 named
- *   [parametric]                  renders density + radius sliders
- *   [presets]                     renders compact / reset / spacious preset row
+ *   [themes="slug1 slug2 …"]      space-separated theme list; default = the
+ *                                  12 named identities shipped in
+ *                                  styles/themes.css (atlas, signal,
+ *                                  terrarium, ledger, arcade, meridian,
+ *                                  solstice, glacier, ember, botanica,
+ *                                  vector, velour). Rendered as a <select-ui>
+ *                                  (Theme row); pass "" to suppress the row
+ *                                  entirely.
+ *   [parametric]                  renders the Density slider row (continuous --a-density)
+ *   [presets]                     renders the Preset row (compact / default / spacious
+ *                                  density+radius quick-picks — does not touch theme/scheme/scale)
+ *   [register]                    renders the Scale row — one of the six
+ *                                  [scale] tiers (ui-sm/ui-md/ui-lg/
+ *                                  content-sm/content-md/content-lg)
  *   [scheme-toggle]               renders an integrated light/dark segmented-ui
  *   [persist]                     writes selections to localStorage
  *   [storage-prefix="adia-theme-"] LS key namespace
@@ -24,14 +35,16 @@
  *   [active-scheme]  resolved scheme (auto collapsed to light|dark)
  *   [active-density] mirrors current --a-density on target
  *   [active-radius]  mirrors current --a-radius-k on target
+ *   [active-scale]   current [scale] tier on target; empty for none
  *
  * Events:
  *   theme-change — bubbles. detail: { theme, scheme, density, radius, source }
- *                  source is one of: 'theme'|'slider'|'preset'|'scheme'|'reset'|'programmatic'
+ *                  source is one of: 'theme'|'slider'|'preset'|'scale'|'scheme'|'reset'|'programmatic'
  *
  * Public methods:
- *   .apply({theme?, scheme?, density?, radius?}) — programmatic write
- *   .reset() — clear all state + emit reset event
+ *   .apply({theme?, scheme?, density?, radius?, scale?}) — programmatic write
+ *   .reset() — clear all state + emit reset event; also wired to the
+ *              panel's own Reset row (own button, bottom, always rendered)
  *
  * The element is light-DOM and stamps its internals imperatively in
  * connected(). External CSS / JS reacts via reflected attributes, e.g.
@@ -40,12 +53,23 @@
 
 import { UIElement } from '../../../web-components/core/element.js';
 
-const DEFAULT_THEMES = ['default', 'ocean', 'forest', 'sunset', 'lavender', 'rose', 'slate', 'midnight'];
+// The 12 named identities shipped in styles/themes.css (real recolor +
+// real typeface pairing per theme, not a decorative hue nudge) — see that
+// file's header for the color/typography mechanism. A consumer can still
+// override with [themes="slug1 slug2 …"] to offer a different set.
+const DEFAULT_THEMES = [
+  'atlas', 'signal', 'terrarium', 'ledger', 'arcade', 'meridian',
+  'solstice', 'glacier', 'ember', 'botanica', 'vector', 'velour',
+];
 const PRESETS = {
   compact:  { density: 0.85, radius: 0.75 },
-  default:  { density: 1,    radius: 1,    clearTheme: true },
+  default:  { density: 1,    radius: 1 },
   spacious: { density: 1.15, radius: 1.25 },
 };
+// The six ancestor [scale] tiers (styles/scale.css) — matches
+// theme-provider.class.js's SCALE_TIERS exactly. '' = no override (the
+// unscaled base register).
+const SCALE_TIERS = ['', 'ui-sm', 'ui-md', 'ui-lg', 'content-sm', 'content-md', 'content-lg'];
 
 const titleCase = (s) => s.length ? s[0].toUpperCase() + s.slice(1) : s;
 
@@ -64,7 +88,7 @@ class ThemePanel extends UIElement {
     activeDensity: { type: String,  default: '', reflect: true, attribute: 'active-density' },
     activeRadius:  { type: String,  default: '', reflect: true, attribute: 'active-radius' },
     register:      { type: Boolean, default: false, reflect: true },
-    activeRegister:{ type: String,  default: '', reflect: true, attribute: 'active-register' },
+    activeScale:   { type: String,  default: '', reflect: true, attribute: 'active-scale' },
   };
 
   static template = () => null;
@@ -75,7 +99,9 @@ class ThemePanel extends UIElement {
   #densityEl = null;
   #radiusEl = null;
   #schemeEl = null;
-  #registerEl = null;
+  #scaleEl = null;
+  #themeEl = null;
+  #resetEl = null;
   #stamped = false;
 
   connected() {
@@ -113,24 +139,24 @@ class ThemePanel extends UIElement {
     target.style.removeProperty('--a-density');
     target.style.removeProperty('--a-radius-k');
     target.style.removeProperty('color-scheme');
-    target.removeAttribute('verse');
-    target.removeAttribute('prose');
+    target.removeAttribute('scale');
     if (this.persist) {
-      for (const k of ['theme', 'scheme', 'density', 'radius', 'register']) {
+      for (const k of ['theme', 'scheme', 'density', 'radius', 'scale']) {
         try { localStorage.removeItem(`${this.storagePrefix}${k}`); } catch {}
       }
     }
     this.activeTheme = '';
     this.activeDensity = '';
     this.activeRadius = '';
-    this.activeRegister = '';
+    this.activeScale = '';
     // Resolved scheme falls back to prefers-color-scheme
     const resolved = this.#resolvePrefersScheme();
     this.activeScheme = resolved;
     if (this.#schemeEl) this.#schemeEl.value = resolved;
     if (this.#densityEl) this.#densityEl.value = 1;
     if (this.#radiusEl) this.#radiusEl.value = 1;
-    if (this.#registerEl) this.#registerEl.value = 'regular';
+    if (this.#scaleEl) this.#scaleEl.value = '';
+    if (this.#themeEl) this.#themeEl.value = '';
     this.#emit('reset');
   }
 
@@ -157,24 +183,40 @@ class ThemePanel extends UIElement {
       this.#schemeEl = seg;
     }
 
-    // Theme button row
-    const themeLabel = document.createElement('text-ui');
-    themeLabel.setAttribute('variant', 'label');
-    themeLabel.textContent = 'Theme';
-    frag.appendChild(themeLabel);
-
-    const themesRow = document.createElement('div');
-    themesRow.setAttribute('part', 'themes');
+    // Theme row — a <select-ui> (matches the Scale row's control pattern)
+    // offering every slug in [themes], only when that list is non-empty.
     const themeSlugs = (this.themes || '').trim().split(/\s+/).filter(Boolean);
-    for (const slug of themeSlugs) {
-      const btn = document.createElement('button-ui');
-      btn.setAttribute('data-theme-slug', slug);
-      btn.setAttribute('text', titleCase(slug));
-      btn.setAttribute('variant', 'outline');
-      btn.setAttribute('size', 'sm');
-      themesRow.appendChild(btn);
+    if (themeSlugs.length) {
+      const themeWrap = document.createElement('div');
+      themeWrap.setAttribute('part', 'theme-row');
+      const themeLabel = document.createElement('text-ui');
+      themeLabel.setAttribute('variant', 'label');
+      themeLabel.textContent = 'Theme';
+      themeWrap.appendChild(themeLabel);
+
+      const select = document.createElement('select-ui');
+      select.setAttribute('part', 'themes');
+      select.setAttribute('size', 'sm');
+      select.id = `${this.#uid}-theme`;
+      // themeSlugs is attribute/A2UI-driven and tolerant of unknown values
+      // (theme-panel.d.ts's documented contract) — build <option> elements
+      // via the DOM rather than interpolating slugs into innerHTML, so a
+      // slug containing `"` or `<` can't break out of the option markup.
+      const mkOption = (value, label) => {
+        const opt = document.createElement('option');
+        opt.value = value;
+        opt.textContent = label;
+        return opt;
+      };
+      select.append(
+        mkOption('', 'Default'),
+        ...themeSlugs.map((slug) => mkOption(slug, titleCase(slug))),
+      );
+      select.setAttribute('value', '');
+      themeWrap.appendChild(select);
+      frag.appendChild(themeWrap);
+      this.#themeEl = select;
     }
-    frag.appendChild(themesRow);
 
     // Optional parametric block
     if (this.parametric) {
@@ -185,30 +227,32 @@ class ThemePanel extends UIElement {
       paramLabel.textContent = 'Parametric';
       frag.appendChild(paramLabel);
 
-      const densityField = document.createElement('field-ui');
-      densityField.setAttribute('label', 'Density');
+      // slider-ui renders [label] ... [value][suffix] on one header row and
+      // the track below natively (its own doc comment: "Wrap in <field-ui>
+      // only when you need external label-row composition") — passing
+      // [label] directly here, not via a wrapping <field-ui>, is what
+      // produces the one-row label+value layout instead of three stacked
+      // rows.
       const density = document.createElement('slider-ui');
       density.setAttribute('part', 'density');
+      density.setAttribute('label', 'Density');
       density.setAttribute('value', '1');
       density.setAttribute('min', '0.5');
       density.setAttribute('max', '1.5');
       density.setAttribute('step', '0.05');
       density.setAttribute('suffix', '×');
-      densityField.appendChild(density);
-      frag.appendChild(densityField);
+      frag.appendChild(density);
       this.#densityEl = density;
 
-      const radiusField = document.createElement('field-ui');
-      radiusField.setAttribute('label', 'Radius');
       const radius = document.createElement('slider-ui');
       radius.setAttribute('part', 'radius');
+      radius.setAttribute('label', 'Radius');
       radius.setAttribute('value', '1');
       radius.setAttribute('min', '0');
       radius.setAttribute('max', '2');
       radius.setAttribute('step', '0.1');
       radius.setAttribute('suffix', '×');
-      radiusField.appendChild(radius);
-      frag.appendChild(radiusField);
+      frag.appendChild(radius);
       this.#radiusEl = radius;
     }
 
@@ -217,11 +261,14 @@ class ThemePanel extends UIElement {
       frag.appendChild(document.createElement('divider-ui'));
 
       if (this.presets) {
+        // Labelled "Preset" (not "Density") — it's a combined density+radius
+        // quick-pick, distinct from the Density slider above; sharing the
+        // "Density" label with the slider row read as two Density rows.
         const presetWrap = document.createElement('div');
         presetWrap.setAttribute('part', 'preset-row');
         const presetLabel = document.createElement('text-ui');
         presetLabel.setAttribute('variant', 'label');
-        presetLabel.textContent = 'Density';
+        presetLabel.textContent = 'Preset';
         presetWrap.appendChild(presetLabel);
 
         const presetsRow = document.createElement('div');
@@ -229,7 +276,7 @@ class ThemePanel extends UIElement {
         for (const name of ['compact', 'default', 'spacious']) {
           const btn = document.createElement('button-ui');
           btn.setAttribute('data-preset', name);
-          btn.setAttribute('text', name === 'default' ? 'Reset' : titleCase(name));
+          btn.setAttribute('text', titleCase(name));
           btn.setAttribute('variant', 'outline');
           btn.setAttribute('size', 'sm');
           presetsRow.appendChild(btn);
@@ -238,46 +285,89 @@ class ThemePanel extends UIElement {
         frag.appendChild(presetWrap);
       }
 
-      // Scale context — verse / regular / prose typographic register on the target
+      // Scale — the six ancestor [scale] tiers (styles/scale.css) applied
+      // directly to target, matching theme-provider.class.js's own `scale`
+      // prop values exactly. Supersedes the old verse/regular/prose row —
+      // [verse]/[prose] are deprecated aliases now, not something a NEW
+      // control should write.
       if (this.register) {
-        const regWrap = document.createElement('div');
-        regWrap.setAttribute('part', 'preset-row');
-        const regLabel = document.createElement('text-ui');
-        regLabel.setAttribute('variant', 'label');
-        regLabel.textContent = 'Scale Context';
-        regWrap.appendChild(regLabel);
-
-        const seg = document.createElement('segmented-ui');
-        seg.setAttribute('part', 'register');
-        seg.setAttribute('size', 'sm');
-        seg.id = `${this.#uid}-register`;
-        for (const name of ['verse', 'regular', 'prose']) {
-          const s = document.createElement('segment-ui');
-          s.setAttribute('value', name);
-          s.setAttribute('text', name);
-          seg.appendChild(s);
-        }
-        seg.setAttribute('value', 'regular');
-        regWrap.appendChild(seg);
-        frag.appendChild(regWrap);
-        this.#registerEl = seg;
+        const scaleWrap = document.createElement('div');
+        scaleWrap.setAttribute('part', 'preset-row');
+        const scaleLabel = document.createElement('text-ui');
+        scaleLabel.setAttribute('variant', 'label');
+        scaleLabel.textContent = 'Scale';
+        scaleWrap.appendChild(scaleLabel);
+
+        const select = document.createElement('select-ui');
+        select.setAttribute('part', 'scale');
+        select.setAttribute('size', 'sm');
+        select.id = `${this.#uid}-scale`;
+        select.innerHTML = SCALE_TIERS
+          .map((tier) => `<option value="${tier}">${tier || 'Default'}</option>`)
+          .join('');
+        select.setAttribute('value', '');
+        scaleWrap.appendChild(select);
+        frag.appendChild(scaleWrap);
+        this.#scaleEl = select;
       }
     }
 
-    this.appendChild(frag);
+    // Reset — its own row at the very bottom, separated by a divider.
+    // Distinct from the Preset row's "Default" button: Default only sets
+    // density/radius; Reset clears everything (theme, scheme, density,
+    // radius, scale) via the public .reset() method.
+    frag.appendChild(document.createElement('divider-ui'));
+    const resetRow = document.createElement('div');
+    resetRow.setAttribute('part', 'reset-row');
+    const resetBtn = document.createElement('button-ui');
+    resetBtn.setAttribute('part', 'reset');
+    resetBtn.setAttribute('text', 'Reset');
+    resetBtn.setAttribute('variant', 'ghost');
+    resetBtn.setAttribute('size', 'sm');
+    resetRow.appendChild(resetBtn);
+    frag.appendChild(resetRow);
+    this.#resetEl = resetBtn;
+
+    // Wrap the stamped content in <theme-provider scale="ui-md"> — locks
+    // the panel's own chrome to the base size/scale register, independent
+    // of whatever [scale]/--a-density the panel's own Scale select or
+    // Density slider is driving on the target. Target defaults to :root,
+    // a DOM ancestor of theme-panel, so those inherited custom properties
+    // would otherwise cascade into the panel's own controls too (verified
+    // live: switching Scale to content-lg, or Density to 1.5, enlarged the
+    // popover's own controls alongside the page). display:contents, so it
+    // adds no box of its own — theme-panel's flex column layout is
+    // unaffected. ui-md is byte-identical to the unscaled default
+    // (scale.css's own invariant), so this is a visual no-op until an
+    // ancestor sets a different tier. Deliberately does NOT set [theme] —
+    // the panel's own accent color is meant to track whatever theme is
+    // active, only size/scale are locked.
+    const provider = document.createElement('theme-provider');
+    provider.setAttribute('scale', 'ui-md');
+    provider.appendChild(frag);
+    this.appendChild(provider);
     this.#wireListeners();
   }
 
   #wireListeners() {
-    // Theme buttons — fire 'press' (button-ui), fallback to 'click' for tests
-    for (const btn of this.querySelectorAll('[part="themes"] button-ui')) {
-      const slug = btn.getAttribute('data-theme-slug');
-      const handler = () => this.#onThemeClick(slug);
-      btn.addEventListener('press', handler);
-      btn.addEventListener('click', handler);
+    // Theme select — fires 'change' (select-ui)
+    if (this.#themeEl) {
+      const handler = (e) => {
+        const v = e.detail?.value ?? this.#themeEl.value;
+        this.#onThemeClick(v);
+      };
+      this.#themeEl.addEventListener('change', handler);
+      this.#cleanups.push(() => this.#themeEl.removeEventListener('change', handler));
+    }
+
+    // Reset button
+    if (this.#resetEl) {
+      const handler = () => this.reset();
+      this.#resetEl.addEventListener('press', handler);
+      this.#resetEl.addEventListener('click', handler);
       this.#cleanups.push(() => {
-        btn.removeEventListener('press', handler);
-        btn.removeEventListener('click', handler);
+        this.#resetEl.removeEventListener('press', handler);
+        this.#resetEl.removeEventListener('click', handler);
       });
     }
 
@@ -315,14 +405,14 @@ class ThemePanel extends UIElement {
       this.#cleanups.push(() => this.#schemeEl.removeEventListener('change', handler));
     }
 
-    // Scale-context register
-    if (this.#registerEl) {
+    // Scale
+    if (this.#scaleEl) {
       const handler = (e) => {
-        const v = e.detail?.value ?? this.#registerEl.value;
-        this.#apply({ register: v }, 'register');
+        const v = e.detail?.value ?? this.#scaleEl.value;
+        this.#apply({ scale: v }, 'scale');
       };
-      this.#registerEl.addEventListener('change', handler);
-      this.#cleanups.push(() => this.#registerEl.removeEventListener('change', handler));
+      this.#scaleEl.addEventListener('change', handler);
+      this.#cleanups.push(() => this.#scaleEl.removeEventListener('change', handler));
     }
   }
 
@@ -363,15 +453,6 @@ class ThemePanel extends UIElement {
   #onPresetClick(name) {
     const preset = PRESETS[name];
     if (!preset) return;
-    if (preset.clearTheme) {
-      // "Reset" preset — clears [theme] too
-      const target = this.#resolveTarget();
-      target.removeAttribute('theme');
-      this.activeTheme = '';
-      if (this.persist) {
-        try { localStorage.removeItem(`${this.storagePrefix}theme`); } catch {}
-      }
-    }
     this.#apply({ density: preset.density, radius: preset.radius }, 'preset');
     if (this.#densityEl) this.#densityEl.value = preset.density;
     if (this.#radiusEl) this.#radiusEl.value = preset.radius;
@@ -396,6 +477,7 @@ class ThemePanel extends UIElement {
           else localStorage.removeItem(`${this.storagePrefix}theme`);
         } catch {}
       }
+      if (this.#themeEl) this.#themeEl.value = this.activeTheme;
     }
 
     if (partial.density !== undefined) {
@@ -435,18 +517,22 @@ class ThemePanel extends UIElement {
       if (this.#schemeEl) this.#schemeEl.value = this.activeScheme;
     }
 
-    if (partial.register !== undefined) {
-      const r = partial.register;
-      target.toggleAttribute('verse', r === 'verse');
-      target.toggleAttribute('prose', r === 'prose');
-      this.activeRegister = (r === 'verse' || r === 'prose') ? r : '';
+    if (partial.scale !== undefined) {
+      const s = partial.scale;
+      if (s && SCALE_TIERS.includes(s)) {
+        target.setAttribute('scale', s);
+        this.activeScale = s;
+      } else {
+        target.removeAttribute('scale');
+        this.activeScale = '';
+      }
       if (this.persist) {
         try {
-          if (this.activeRegister) localStorage.setItem(`${this.storagePrefix}register`, this.activeRegister);
-          else localStorage.removeItem(`${this.storagePrefix}register`);
+          if (this.activeScale) localStorage.setItem(`${this.storagePrefix}scale`, this.activeScale);
+          else localStorage.removeItem(`${this.storagePrefix}scale`);
         } catch {}
       }
-      if (this.#registerEl) this.#registerEl.value = r;
+      if (this.#scaleEl) this.#scaleEl.value = this.activeScale;
     }
 
     this.#emit(source);
@@ -460,6 +546,7 @@ class ThemePanel extends UIElement {
         scheme: this.activeScheme,
         density: this.activeDensity ? parseFloat(this.activeDensity) : 1,
         radius: this.activeRadius ? parseFloat(this.activeRadius) : 1,
+        scale: this.activeScale,
         source,
       },
     }));
@@ -469,7 +556,7 @@ class ThemePanel extends UIElement {
 
   #initState() {
     const target = this.#resolveTarget();
-    let theme, scheme, density, radius, register;
+    let theme, scheme, density, radius, scale;
 
     if (this.persist) {
       try {
@@ -479,7 +566,7 @@ class ThemePanel extends UIElement {
         const r = localStorage.getItem(`${this.storagePrefix}radius`);
         density = d != null ? parseFloat(d) : undefined;
         radius = r != null ? parseFloat(r) : undefined;
-        register = localStorage.getItem(`${this.storagePrefix}register`) || '';
+        scale = localStorage.getItem(`${this.storagePrefix}scale`) || '';
       } catch {}
     }
 
@@ -490,6 +577,7 @@ class ThemePanel extends UIElement {
     } else {
       this.activeTheme = target.getAttribute('theme') || '';
     }
+    if (this.#themeEl) this.#themeEl.value = this.activeTheme;
 
     // Apply scheme
     if (scheme === 'light' || scheme === 'dark') {
@@ -532,13 +620,12 @@ class ThemePanel extends UIElement {
       this.activeRadius = String(r);
     }
 
-    // Apply scale-context register
-    if (this.#registerEl) {
-      const r = (register === 'verse' || register === 'prose') ? register : 'regular';
-      target.toggleAttribute('verse', r === 'verse');
-      target.toggleAttribute('prose', r === 'prose');
-      this.#registerEl.value = r;
-      this.activeRegister = (r === 'regular') ? '' : r;
+    // Apply scale
+    if (this.#scaleEl) {
+      const s = SCALE_TIERS.includes(scale) ? scale : (target.getAttribute('scale') || '');
+      if (s) target.setAttribute('scale', s);
+      this.#scaleEl.value = s;
+      this.activeScale = s;
     }
   }