refactor(expander): summary typography via ::part(summary), not tokens

Drop the --expander-summary-font-size/-line-height/-font-weight component
tokens: `level` covers the supported variation, the weight never varies,
and ::part(summary) is the documented escape hatch for bespoke header
restyling. Component tokens stay reserved for values external CSS must
re-point (tone, surface, dark mode).

The per-level rules move back into the shadow sheet, generated from a
single SUMMARY_TYPE_SCALE const — still one place to keep in sync with
a-title.css.

https://claude.ai/code/session_01A9PoyMtVzmBJshb5gneqVQ

Author: claude

CHANGELOG.md

@@ -9,7 +9,7 @@ Versions ending in `-dev.N` are pre-release builds published under the npm `dev`
 ## Unreleased
 
 ### Added
-- **New `Expander` component** (`<Expander>` / `<a-expander>`). A collapsible disclosure — a header that toggles a content region open/closed. Built from its own shadow DOM — a `<button>` summary + a grid content region (no native `<details>`) — so focus, keyboard activation (<kbd>Enter</kbd>/<kbd>Space</kbd>), and the WAI-ARIA disclosure pattern (`aria-expanded`, which also drives the CSS state) come from the platform button; the expand/collapse animation mirrors the docs-site disclosure (grid `0fr↔1fr`, clipped while animating, 200ms). `title` takes a string or a node (compose a `<Title>` for real heading semantics); `level` (1–6) applies the `<Title>` heading type scale to a string title. `priority` sets the surface — `secondary` (default) a subtle fill (`--bg-2` + `--border-5`), `primary` a more pronounced card (`--bg-4` + `--border-4`), `tertiary` transparent; `tone` (neutral default + brand/info/success/warning/critical, **or any literal CSS color** for a one-off custom tone — hue kept, lightness/chroma pinned via `oklch(from …)`, like `Button` / `Tag`) tints the text and filled surface from the theme palette (light/dark track automatically). Strictly controlled (`open` + `onToggle` — the component only follows the prop; a click *requests* a change through `onToggle(open)`, so a toggle can be rejected by not updating) or uncontrolled (`defaultOpen` — on the element, the presence-based `defaultopen` attribute, so the DOM carries no stale state attribute). Content is composed from two light-DOM children — `<a-expander-summary>` (the header, slotted into the shadow `<button>`) and `<a-expander-details>` (the collapsible body) — mirroring `<a-tag>`'s `label`/`value` sub-elements; collapsed content is `inert` so it leaves the tab order and a11y tree. `marker="outside"` (with `tertiary`) hangs the chevron in the left gutter so the title sits flush with surrounding content (the docs-header layout). Exposes `--expander-text`, the per-priority surface tokens (`--expander-bg`/`-secondary`/`-primary`, `--expander-border`/`-secondary`/`-primary`), and the summary typography (`--expander-summary-font-size`/`-line-height`/`-font-weight`, re-pointed per `level`); shadow internals are exposed as `::part(summary)` / `::part(content)` for styling beyond the variables (e.g. header `:hover`/`:focus-visible`, the chevron). Registered via the `@antadesign/anta/elements` barrel.
+- **New `Expander` component** (`<Expander>` / `<a-expander>`). A collapsible disclosure — a header that toggles a content region open/closed. Built from its own shadow DOM — a `<button>` summary + a grid content region (no native `<details>`) — so focus, keyboard activation (<kbd>Enter</kbd>/<kbd>Space</kbd>), and the WAI-ARIA disclosure pattern (`aria-expanded`, which also drives the CSS state) come from the platform button; the expand/collapse animation mirrors the docs-site disclosure (grid `0fr↔1fr`, clipped while animating, 200ms). `title` takes a string or a node (compose a `<Title>` for real heading semantics); `level` (1–6) applies the `<Title>` heading type scale to a string title. `priority` sets the surface — `secondary` (default) a subtle fill (`--bg-2` + `--border-5`), `primary` a more pronounced card (`--bg-4` + `--border-4`), `tertiary` transparent; `tone` (neutral default + brand/info/success/warning/critical, **or any literal CSS color** for a one-off custom tone — hue kept, lightness/chroma pinned via `oklch(from …)`, like `Button` / `Tag`) tints the text and filled surface from the theme palette (light/dark track automatically). Strictly controlled (`open` + `onToggle` — the component only follows the prop; a click *requests* a change through `onToggle(open)`, so a toggle can be rejected by not updating) or uncontrolled (`defaultOpen` — on the element, the presence-based `defaultopen` attribute, so the DOM carries no stale state attribute). Content is composed from two light-DOM children — `<a-expander-summary>` (the header, slotted into the shadow `<button>`) and `<a-expander-details>` (the collapsible body) — mirroring `<a-tag>`'s `label`/`value` sub-elements; collapsed content is `inert` so it leaves the tab order and a11y tree. `marker="outside"` (with `tertiary`) hangs the chevron in the left gutter so the title sits flush with surrounding content (the docs-header layout). Exposes `--expander-text` and the per-priority surface tokens (`--expander-bg`/`-secondary`/`-primary`, `--expander-border`/`-secondary`/`-primary`); shadow internals are exposed as `::part(summary)` / `::part(content)` for styling beyond the variables (header `:hover`/`:focus-visible`, the chevron, bespoke summary typography beyond `level`). Registered via the `@antadesign/anta/elements` barrel.
 
 ## 0.2.0 — June 9, 2026
 

site/src/pages/components/expander.mdx

@@ -235,7 +235,6 @@ filled surfaces from the theme palette, so light / dark track for free.
 | `--expander-border` | Host border color. Follows the same per-priority surface; transparent on `tertiary`. |
 | `--expander-bg-secondary`<br />`--expander-border-secondary` | Secondary (default) surface — a subtle fill (`--bg-2`) + faint edge (`--border-5`), re-pointed per tone. |
 | `--expander-bg-primary`<br />`--expander-border-primary` | Primary surface — a more pronounced card (`--bg-4` + `--border-4`), re-pointed per tone. |
-| `--expander-summary-font-size`<br />`--expander-summary-line-height`<br />`--expander-summary-font-weight` | Summary (header) typography. Mirrors the `<Title>` type scale; `level` re-points size + line-height. |
 | `--expander-tone-source` | The color a custom (non-named) `tone` derives from. Set inline by the wrapper; set it yourself to drive the derived palette from your own variable. |
 
 </Disclosure>
@@ -250,7 +249,7 @@ as [`::part`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part):
 
 | Part | What it is |
 |---|---|
-| `summary` | The header `<button>`. Reach states CSS variables can't — `::part(summary):hover`, `:focus-visible`, or the chevron via `::part(summary)::before`. |
+| `summary` | The header `<button>`. Reach what CSS variables can't — states (`::part(summary):hover`, `:focus-visible`), the chevron via `::part(summary)::before`, or bespoke header typography beyond what `level` offers. |
 | `content` | The collapsible body region. |
 
 ```css

src/elements/a-expander.css

@@ -3,10 +3,6 @@
     --expander-text: var(--text-2);
     --expander-text-hover: var(--text-1);
 
-    --expander-summary-font-size: 15px;
-    --expander-summary-line-height: 20px;
-    --expander-summary-font-weight: 584.62;
-
     --expander-bg-secondary: var(--bg-2);
     --expander-border-secondary: var(--border-5);
     --expander-bg-primary: var(--bg-4);
@@ -26,13 +22,6 @@
     background: var(--expander-bg);
   }
 
-  a-expander[level="1"] { --expander-summary-font-size: 28px; --expander-summary-line-height: 32px; }
-  a-expander[level="2"] { --expander-summary-font-size: 24px; --expander-summary-line-height: 28px; }
-  a-expander[level="3"] { --expander-summary-font-size: 20px; --expander-summary-line-height: 24px; }
-  a-expander[level="4"] { --expander-summary-font-size: 17px; --expander-summary-line-height: 20px; }
-  a-expander[level="5"] { --expander-summary-font-size: 15px; --expander-summary-line-height: 20px; }
-  a-expander[level="6"] { --expander-summary-font-size: 13px; --expander-summary-line-height: 16px; }
-
   a-expander-summary {
     display: block;
     min-width: 0;

src/elements/a-expander.ts

@@ -47,11 +47,14 @@ import './a-expander.css'
  *
  * - **Summary**: a real `<button>` (free focus + Enter/Space), reset to
  *   inherit the host's box/text so it reads as a plain header row. Its
- *   typography comes from the `--expander-summary-font-size` /
- *   `-line-height` / `-font-weight` host tokens, re-pointed per `[level]`
- *   in `a-expander.css` — that file mirrors the `a-title.css` type scale
- *   (keep them in sync; `a-title` is CSS-only so there is no shared
- *   constant to import).
+ *   typography (default + per-`[level]` rules) is generated from
+ *   `SUMMARY_TYPE_SCALE` below — the one place to keep in sync with the
+ *   `a-title.css` type scale (`a-title` is CSS-only, so there is no
+ *   shared constant to import). Deliberately NOT exposed as
+ *   `--expander-summary-*` tokens: `level` covers the supported
+ *   variation, the weight never varies, and `::part(summary)` is the
+ *   escape hatch for bespoke restyling — component tokens are reserved
+ *   for values external CSS must re-point (tone, surface, dark mode).
  * - **Chevron**: the button's `::before` — a mask painting with
  *   `currentColor` (the inherited, possibly toned `--expander-text`);
  *   dimmed at rest, full on hover/open, rotated 90° when open. Explicit
@@ -109,6 +112,25 @@ import './a-expander.css'
 
 const ANIM_MS = 200
 
+// Mirrors the h1–h6 scale in a-title.css (font-size / line-height, px).
+// Level 5 is the default summary typography; the weight matches <Title>.
+const SUMMARY_TYPE_SCALE: Record<string, [number, number]> = {
+  '1': [28, 32],
+  '2': [24, 28],
+  '3': [20, 24],
+  '4': [17, 20],
+  '5': [15, 20],
+  '6': [13, 16],
+}
+const SUMMARY_FONT_WEIGHT = 584.62
+
+const SUMMARY_LEVEL_RULES = Object.entries(SUMMARY_TYPE_SCALE)
+  .map(
+    ([level, [size, line]]) =>
+      `:host([level="${level}"]) button { font-size: ${size}px; line-height: ${line}px; }`,
+  )
+  .join('\n  ')
+
 const CHEVRON =
   "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 18 6-6-6-6'/%3e%3c/svg%3e\")"
 
@@ -134,12 +156,14 @@ const SHADOW_STYLE = `
     user-select: none;
     border-radius: 2px;
     outline-offset: 4px;
-    font-size: var(--expander-summary-font-size);
-    line-height: var(--expander-summary-line-height);
-    font-weight: var(--expander-summary-font-weight);
+    font-size: ${SUMMARY_TYPE_SCALE['5'][0]}px;
+    line-height: ${SUMMARY_TYPE_SCALE['5'][1]}px;
+    font-weight: ${SUMMARY_FONT_WEIGHT};
     letter-spacing: 0;
   }
 
+  ${SUMMARY_LEVEL_RULES}
+
   button::before {
     content: '';
     width: 16px;