@f-ewald/components 1.0.2 → 1.1.0

package/dist/weight-bar-chart.js

@@ -55,7 +55,7 @@ let WeightBarChart = class WeightBarChart extends LitElement {
         flex: 1 1 auto;
         height: 0.75rem;
         background: var(--ui-surface-muted, #f8fafc);
-        border-radius: var(--ui-radius-sm, 0.25rem);
+        border-radius: 9999px;
         overflow: hidden;
       }
       .bar {
@@ -66,7 +66,7 @@ let WeightBarChart = class WeightBarChart extends LitElement {
           color-mix(in srgb, var(--ui-primary, #4f46e5) 70%, #ffffff) 0%,
           color-mix(in srgb, var(--ui-primary, #4f46e5) 70%, #000000) 100%
         );
-        border-radius: 0 var(--ui-radius-sm, 0.25rem) var(--ui-radius-sm, 0.25rem) 0;
+        border-radius: 0 9999px 9999px 0;
         transition: width 150ms ease-out;
       }
       .pct {

package/dist/weight-bar-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"weight-bar-chart.js","sourceRoot":"","sources":["../src/weight-bar-chart.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AASrC;;;;;;;;;GASG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QACL,oEAAoE;QACpC,UAAK,GAAoB,EAAE,CAAC;IAsF9D,CAAC;aApFiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuDF;KACF,AA1DqB,CA0DpB;IAEO,MAAM;QACb,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC;QACzC,+EAA+E;QAC/E,MAAM,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;QACjE,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QAChE,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClG,OAAO,IAAI,CAAA;6CAC8B,OAAO;UAC1C,MAAM,CACN,MAAM,EACN,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,EACjB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;oCAEY,IAAI,CAAC,KAAK;;iDAEG,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG;;kCAEvC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;;WAEnD,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AAtFiC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6CAA6B;AAFjD,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAwF1B","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { repeat } from \"lit/directives/repeat.js\";\nimport { tokens } from \"./tokens.js\";\n\nexport interface WeightBarItem {\n  id: string;\n  label: string;\n  /** Normalized fraction (fractions across all items sum to ~1). */\n  value: number;\n}\n\n/**\n * Sorted horizontal bar chart of labeled weights (normalized fractions\n * summing to ~1). Bars sort descending — the order IS the priority ranking.\n * Widths scale relative to the largest weight (which fills its track); the\n * percent labels carry the absolute values. Rows are keyed by item id\n * (repeat directive) so a re-render with new weights moves the existing\n * rows; bar widths animate via CSS, re-sorting is instant.\n *\n * @element weight-bar-chart\n */\n@customElement(\"weight-bar-chart\")\nexport class WeightBarChart extends LitElement {\n  /** Items to render as weighted rows, sorted descending by value. */\n  @property({ attribute: false }) items: WeightBarItem[] = [];\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n      }\n      .row {\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        margin: 0.5rem 0;\n      }\n      .label {\n        flex: 0 0 5.5rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\n        color: var(--ui-text, #0f172a);\n      }\n      .track {\n        flex: 1 1 auto;\n        height: 0.75rem;\n        background: var(--ui-surface-muted, #f8fafc);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        overflow: hidden;\n      }\n      .bar {\n        height: 100%;\n        /* Match map-circle's 30% white/black vertical depth while preserving token overrides. */\n        background: linear-gradient(\n          to bottom,\n          color-mix(in srgb, var(--ui-primary, #4f46e5) 70%, #ffffff) 0%,\n          color-mix(in srgb, var(--ui-primary, #4f46e5) 70%, #000000) 100%\n        );\n        border-radius: 0 var(--ui-radius-sm, 0.25rem) var(--ui-radius-sm, 0.25rem) 0;\n        transition: width 150ms ease-out;\n      }\n      .pct {\n        flex: 0 0 2.5rem;\n        text-align: right;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-variant-numeric: tabular-nums;\n        color: var(--ui-text-muted, #64748b);\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .bar {\n          transition: none;\n        }\n      }\n    `,\n  ];\n\n  override render() {\n    if (this.items.length === 0) return null;\n    // Stable sort: ties keep the incoming item order, so the chart never flickers.\n    const sorted = [...this.items].sort((a, b) => b.value - a.value);\n    const max = Math.max(0.01, ...sorted.map((item) => item.value));\n    const summary = sorted.map((item) => `${item.label} ${Math.round(item.value * 100)}%`).join(\", \");\n    return html`\n      <div role=\"img\" aria-label=\"Weights: ${summary}\">\n        ${repeat(\n          sorted,\n          (item) => item.id,\n          (item) => html`\n            <div class=\"row\">\n              <span class=\"label\">${item.label}</span>\n              <div class=\"track\">\n                <div class=\"bar\" style=\"width: ${(item.value / max) * 100}%\"></div>\n              </div>\n              <span class=\"pct\">${Math.round(item.value * 100)}%</span>\n            </div>\n          `,\n        )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"weight-bar-chart\": WeightBarChart;\n  }\n}\n"]}
+{"version":3,"file":"weight-bar-chart.js","sourceRoot":"","sources":["../src/weight-bar-chart.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AASrC;;;;;;;;;GASG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QACL,oEAAoE;QACpC,UAAK,GAAoB,EAAE,CAAC;IAsF9D,CAAC;aApFiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuDF;KACF,AA1DqB,CA0DpB;IAEO,MAAM;QACb,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC;QACzC,+EAA+E;QAC/E,MAAM,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;QACjE,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QAChE,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClG,OAAO,IAAI,CAAA;6CAC8B,OAAO;UAC1C,MAAM,CACN,MAAM,EACN,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,EACjB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;oCAEY,IAAI,CAAC,KAAK;;iDAEG,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG;;kCAEvC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;;WAEnD,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AAtFiC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6CAA6B;AAFjD,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAwF1B","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { repeat } from \"lit/directives/repeat.js\";\nimport { tokens } from \"./tokens.js\";\n\nexport interface WeightBarItem {\n  id: string;\n  label: string;\n  /** Normalized fraction (fractions across all items sum to ~1). */\n  value: number;\n}\n\n/**\n * Sorted horizontal bar chart of labeled weights (normalized fractions\n * summing to ~1). Bars sort descending — the order IS the priority ranking.\n * Widths scale relative to the largest weight (which fills its track); the\n * percent labels carry the absolute values. Rows are keyed by item id\n * (repeat directive) so a re-render with new weights moves the existing\n * rows; bar widths animate via CSS, re-sorting is instant.\n *\n * @element weight-bar-chart\n */\n@customElement(\"weight-bar-chart\")\nexport class WeightBarChart extends LitElement {\n  /** Items to render as weighted rows, sorted descending by value. */\n  @property({ attribute: false }) items: WeightBarItem[] = [];\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n      }\n      .row {\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        margin: 0.5rem 0;\n      }\n      .label {\n        flex: 0 0 5.5rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\n        color: var(--ui-text, #0f172a);\n      }\n      .track {\n        flex: 1 1 auto;\n        height: 0.75rem;\n        background: var(--ui-surface-muted, #f8fafc);\n        border-radius: 9999px;\n        overflow: hidden;\n      }\n      .bar {\n        height: 100%;\n        /* Match map-circle's 30% white/black vertical depth while preserving token overrides. */\n        background: linear-gradient(\n          to bottom,\n          color-mix(in srgb, var(--ui-primary, #4f46e5) 70%, #ffffff) 0%,\n          color-mix(in srgb, var(--ui-primary, #4f46e5) 70%, #000000) 100%\n        );\n        border-radius: 0 9999px 9999px 0;\n        transition: width 150ms ease-out;\n      }\n      .pct {\n        flex: 0 0 2.5rem;\n        text-align: right;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-variant-numeric: tabular-nums;\n        color: var(--ui-text-muted, #64748b);\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .bar {\n          transition: none;\n        }\n      }\n    `,\n  ];\n\n  override render() {\n    if (this.items.length === 0) return null;\n    // Stable sort: ties keep the incoming item order, so the chart never flickers.\n    const sorted = [...this.items].sort((a, b) => b.value - a.value);\n    const max = Math.max(0.01, ...sorted.map((item) => item.value));\n    const summary = sorted.map((item) => `${item.label} ${Math.round(item.value * 100)}%`).join(\", \");\n    return html`\n      <div role=\"img\" aria-label=\"Weights: ${summary}\">\n        ${repeat(\n          sorted,\n          (item) => item.id,\n          (item) => html`\n            <div class=\"row\">\n              <span class=\"label\">${item.label}</span>\n              <div class=\"track\">\n                <div class=\"bar\" style=\"width: ${(item.value / max) * 100}%\"></div>\n              </div>\n              <span class=\"pct\">${Math.round(item.value * 100)}%</span>\n            </div>\n          `,\n        )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"weight-bar-chart\": WeightBarChart;\n  }\n}\n"]}

package/docs/address-autocomplete.md

@@ -64,6 +64,7 @@ _None._
 | `--ui-focus-ring` |
 | `--ui-font` |
 | `--ui-font-size-sm` |
+| `--ui-line-height-tight` |
 | `--ui-primary` |
 | `--ui-radius-sm` |
 | `--ui-shadow` |

package/docs/autocomplete-input.md

@@ -75,6 +75,7 @@ _None._
 | `--ui-focus-ring` |
 | `--ui-font` |
 | `--ui-font-size-sm` |
+| `--ui-line-height-tight` |
 | `--ui-primary` |
 | `--ui-radius-sm` |
 | `--ui-shadow` |

package/docs/calendar-month.md

@@ -64,11 +64,16 @@ _None._
 | `--ui-danger` |
 | `--ui-focus-ring` |
 | `--ui-font` |
-| `--ui-font-size` |
+| `--ui-font-size-lg` |
 | `--ui-font-size-sm` |
 | `--ui-font-size-xs` |
+| `--ui-font-weight-bold` |
+| `--ui-font-weight-medium` |
+| `--ui-font-weight-regular` |
+| `--ui-font-weight-semibold` |
 | `--ui-hover-overlay` |
 | `--ui-info` |
+| `--ui-line-height-tight` |
 | `--ui-primary` |
 | `--ui-radius-sm` |
 | `--ui-success` |

package/docs/chat-message.md

@@ -55,6 +55,8 @@ _None._
 | `--ui-font-mono` |
 | `--ui-font-size` |
 | `--ui-font-size-sm` |
+| `--ui-font-weight-semibold` |
+| `--ui-line-height-normal` |
 | `--ui-primary` |
 | `--ui-radius` |
 | `--ui-radius-sm` |

package/docs/confirm-dialog.md

@@ -55,6 +55,9 @@ import "@f-ewald/components/confirm-dialog.js";
 | `--ui-font` |
 | `--ui-font-size` |
 | `--ui-font-size-sm` |
+| `--ui-font-weight-medium` |
+| `--ui-line-height-normal` |
+| `--ui-line-height-tight` |
 | `--ui-on-accent` |
 | `--ui-overlay` |
 | `--ui-primary` |

package/docs/data-table.md

@@ -60,6 +60,7 @@ _None._
 | `--ui-focus-ring` |
 | `--ui-font` |
 | `--ui-font-size-sm` |
+| `--ui-font-weight-semibold` |
 | `--ui-surface-muted` |
 | `--ui-text` |
 | `--ui-text-muted` |

package/docs/design-language.md

@@ -17,8 +17,10 @@ defines the details used when creating or reviewing components.
 
 ## Tokens and colors
 
-- Use `var(--ui-*, exact-fallback)` for reusable colors, fonts, radii, shadows,
-  and focus rings.
+- Use `var(--ui-*, exact-fallback)` for reusable colors, fonts, type metrics,
+  radii, shadows, and focus rings. `tokens.ts` (`tokenValues`) is the single
+  source of truth; every `var(--ui-*, …)` usage must repeat that token's exact
+  fallback, and any newly introduced `--ui-*` usage must add/carry one too.
 - Semantic states use `primary`, `info`, `success`, `warning`, and `danger`.
 - Foregrounds on solid semantic fills use `--ui-on-accent`.
 - Elevated dark tooltips use `--ui-tooltip`; modal backdrops use
@@ -34,24 +36,59 @@ defines the details used when creating or reviewing components.
 
 ## Typography
 
-- Body/component text: `--ui-font-size` at regular weight.
-- Compact controls/labels: `--ui-font-size-sm`, usually weight 500.
-- Secondary details/keycaps: `--ui-font-size-xs`.
-- Code/keycaps: `--ui-font-mono`.
-- Section/title emphasis should normally use weight 600; reserve 700 for badges
-  or data emphasis.
+Type is fully tokenized; every axis has an exact-fallback `--ui-*` token and
+literal values are migrated onto them.
+
+- **Family:** `--ui-font` (system sans stack) for UI text; `--ui-font-mono`
+  for code and keycaps. `font-family: inherit` is reserved for components that
+  intentionally adopt the host's type — `editable-text` and the inline
+  formatters — so an inline edit or formatted value matches surrounding copy.
+- **Size:** `--ui-font-size` (`0.875rem`) for body/component text,
+  `--ui-font-size-sm` (`0.75rem`) for compact controls/labels,
+  `--ui-font-size-xs` (`0.6875rem`) for secondary details/keycaps, and
+  `--ui-font-size-lg` (`1rem`) for the largest titles/emphasis.
+- **Weight:** only four weights exist —
+  `--ui-font-weight-regular` (400), `--ui-font-weight-medium` (500),
+  `--ui-font-weight-semibold` (600), and `--ui-font-weight-bold` (700). Body is
+  regular, compact controls/labels are medium, section/title emphasis is
+  semibold, and bold is reserved for badges or data emphasis.
+- **Line height:** `--ui-line-height-glyph` (1) for single-glyph icon/marker
+  boxes, `--ui-line-height-tight` (1.25) for headings and compact multi-line
+  labels, and `--ui-line-height-normal` (1.5) for running body text.
+- **Tracking:** `--ui-tracking-normal` (0) is the default; `--ui-tracking-wide`
+  (0.04em) is the single widened step for uppercase micro-labels.
+- **Exemptions:** SVG presentation attributes (`font-size="…"`,
+  `font-weight="…"`) can't take `var()` and stay literal at the token's
+  fallback value; `line-height: 0` used purely to collapse an inline
+  icon/SVG box is domain geometry, not a type choice.
 
 ## Spacing and geometry
 
-- Layout spacing uses literal multiples of `0.25rem`; spacing is not tokenized.
-- Convert CSS layout pixels to rems.
-- Exceptions: 1px borders, SVG/canvas geometry, percentages, aspect ratios,
-  animation timing, and proportional calculations derived from a public size.
-- Use `--ui-radius-sm` for controls, `--ui-radius` for cards/dialogs, and an
-  intentional full pill/circle radius only for pill/avatar/marker shapes.
+- `padding`, `margin`, and `gap` use literal multiples of `0.25rem`; spacing is
+  not tokenized. Convert CSS layout pixels to rems.
+- Documented spacing exceptions: 1px borders, SVG/canvas geometry, percentages,
+  aspect ratios, animation timing, proportional calculations derived from a
+  public size, `0.125rem` optical alignment nudges, and domain geometry.
+- Use `--ui-radius-sm` (`0.25rem` ≈ 4px) for controls, `--ui-radius`
+  (`0.5rem` ≈ 8px) for cards/dialogs/surfaces, and an intentional full
+  pill/circle radius only for pill/avatar/marker shapes.
 - Compact controls must retain a clear hit target and must not reserve layout
   space for optional content that is absent.
 
+### Control metrics
+
+- Standard interactive controls share a single `2rem` height; padding is
+  applied by role (inline text, icon-only, standalone) rather than ad hoc.
+- Icons are `14px` inline (next to text) and `18px` standalone; icon-only tap
+  targets are `32px`.
+- Control corners use `--ui-radius-sm` (4px); enclosing surfaces use
+  `--ui-radius` (8px).
+- Side panels use a `20rem` compact / `25rem` comfortable width; the shared
+  responsive breakpoint is `48rem`.
+- Radio inputs render at `1rem`.
+- Charts and metadata-only components keep their own domain geometry and are
+  exempt from the control-metric grid.
+
 ## Interaction states
 
 - Interactive surfaces provide hover, active/selected, disabled, and
@@ -87,8 +124,8 @@ defines the details used when creating or reviewing components.
 
 ## Component exceptions
 
-- Metadata-only tags may omit standalone playground sections and screenshots
-  when their full behavior is demonstrated through a parent:
+- Metadata-only tags may omit standalone playground sections when their full
+  behavior is demonstrated through a parent:
   `calendar-entry`, `gallery-item`, and `gallery-item-variant`.
 - Styleless inline formatters may omit empty `static styles`/token imports:
   `distance-value`, `live-timer`, `relative-time`, and `roman-numeral`.
@@ -107,38 +144,29 @@ defines the details used when creating or reviewing components.
 - Public API changes update JSDoc, generated docs, `llms.txt`, README when
   relevant, and the changelog.
 
+## Measurement contracts
+
+- `design-tests/design-language.spec.ts` enforces the token, import, catalog,
+  and measurement rules deterministically. The measurement contracts cover
+  tokenized font family/size/weight/leading/tracking, the `0.25rem` spacing
+  grid, 14px/18px icon calls, 2rem interactive targets, surface padding,
+  panel widths, and the shared 48rem breakpoint.
+- Narrow file-scoped allowlists are permitted only for documented domain
+  geometry that cannot use a semantic token. They must equal the live literal
+  inventory exactly, so stale entries and new unapproved literals both fail.
+- Never add an allowlist entry merely to unblock new work, and never weaken the
+  token-fallback, `.js`-import, catalog, or measurement checks.
+
 ## Validation tiers
 
 1. Inner loop: `npm run typecheck` and all touched component specs in one
    Playwright invocation.
 2. Run docs once after APIs/JSDoc stabilize.
 3. Run `npm run test:design` after token/catalog/state changes.
-4. Run screenshots once after the full design batch.
-5. Run the complete package/demo/Pages gate once at task completion.
-6. Reviewer fixes rerun only affected specs/contracts, followed by one final
+4. Run the complete package/demo/Pages gate once at task completion.
+5. Reviewer fixes rerun only affected specs/contracts, followed by one final
    full gate.
 
-Canonical screenshot baselines are generated by the **Generate visual
-baselines** GitHub Actions workflow on the same amd64 runner image used by CI.
-Run it manually, download the `visual-baselines-linux-amd64` artifact, review
-the images, and replace `visual-tests/__screenshots__/`.
-
-For local iteration, the pinned Playwright image provides a close
-architecture-matched preview:
-
-```bash
-docker run --platform linux/amd64 --rm --ipc=host \
-  -v "$PWD":/work -v /work/node_modules -w /work \
-  mcr.microsoft.com/playwright:v1.61.1-noble \
-  bash -lc "npm ci && npm run test:visual:update"
-```
-
-The architecture pin is required on Apple-silicon hosts, but installed fonts
-still differ slightly from GitHub-hosted runners. Local Docker repeatability
-does not replace the GitHub-generated baseline check. Run
-`npm run test:visual` natively only when using a matching checked-in platform
-baseline.
-
 ## Review checklist
 
 - Shared tokens use exact fallbacks; data-color exceptions are intentional.

package/docs/distribution-chart.md

@@ -5,7 +5,7 @@ markers. The SVG viewBox is kept in sync with the element's pixel width via
 ResizeObserver so that font sizes and stroke widths are always in real pixels
 regardless of container width.
 
-Pass `fontSize` to control all text size (default 11). Pass a single
+Pass `fontSize` to control all text size (default 10). Pass a single
 `{label:'', value}` for a single-value display or multiple
 `{label:'A'|'B'|...}` entries to compare several values.
 
@@ -31,7 +31,7 @@ import "@f-ewald/components/distribution-chart.js";
 | `metric` | `metric` | `string` | `""` | Metric name, fetched from `/api/distribution/<metric>` on change. |
 | `values` | _(JS property only)_ | `DistributionValue[]` | `[]` | One or more values to mark on the distribution curve. |
 | `markerColors` | _(JS property only)_ | `string[]` | `["#4f46e5", "#d97706", "#0d9488", "#e11d48"]` | Colors assigned to markers in order. Defaults to indigo/amber/teal/rose 600s. |
-| `fontSize` | `font-size` | `number` | `11` | Target font size in CSS pixels (default 11). Always renders at this size regardless of container width. |
+| `fontSize` | `font-size` | `number` | `10` | Target font size in CSS pixels (default 10). Always renders at this size regardless of container width. |
 
 ## Events
 
@@ -49,6 +49,7 @@ _None._
 | `--ui-danger` |
 | `--ui-font` |
 | `--ui-font-size-sm` |
+| `--ui-font-size-xs` |
 | `--ui-primary` |
 | `--ui-radius-sm` |
 | `--ui-surface-muted` |

package/docs/dropdown-button.md

@@ -52,6 +52,8 @@ _None._
 | `--ui-focus-ring` |
 | `--ui-font` |
 | `--ui-font-size-sm` |
+| `--ui-font-weight-medium` |
+| `--ui-line-height-tight` |
 | `--ui-on-accent` |
 | `--ui-primary` |
 | `--ui-primary-hover` |

package/docs/form-select.md

@@ -73,6 +73,8 @@ _None._
 | `--ui-focus-ring` |
 | `--ui-font` |
 | `--ui-font-size-sm` |
+| `--ui-font-weight-semibold` |
+| `--ui-line-height-tight` |
 | `--ui-primary` |
 | `--ui-radius-sm` |
 | `--ui-shadow` |

package/docs/frame-box.md

@@ -40,6 +40,8 @@ _None._
 | `--ui-border` |
 | `--ui-font` |
 | `--ui-font-size-xs` |
-| `--ui-radius-sm` |
+| `--ui-font-weight-semibold` |
+| `--ui-radius` |
 | `--ui-surface` |
 | `--ui-text-muted` |
+| `--ui-tracking-wide` |

package/docs/icon-button.md

@@ -27,7 +27,7 @@ import "@f-ewald/components/icon-button.js";
 
 | Property | Attribute | Type | Default | Description |
 | --- | --- | --- | --- | --- |
-| `icon` | _(JS property only)_ | `TemplateResult | null` | `null` | Pre-rendered icon template, e.g. `iconPencil(16)` from this package's icon set. |
+| `icon` | _(JS property only)_ | `TemplateResult | null` | `null` | Pre-rendered icon template, e.g. `iconPencil(18)` from this package's icon set. |
 | `label` | `label` | `string` | `""` | Required accessible label, applied as `aria-label`/`title`. |
 | `disabled` | `disabled` | `boolean` | `false` | Disables the button and dims it. |
 

package/docs/kbd-hint.md

@@ -39,4 +39,5 @@ _None._
 | --- |
 | `--ui-font-mono` |
 | `--ui-font-size-xs` |
+| `--ui-line-height-glyph` |
 | `--ui-radius-sm` |

package/docs/map-circle.md

@@ -47,3 +47,5 @@ _None._
 | Custom property |
 | --- |
 | `--ui-font` |
+| `--ui-font-weight-bold` |
+| `--ui-line-height-glyph` |

package/docs/map-pin.md

@@ -41,3 +41,5 @@ _None._
 | Custom property |
 | --- |
 | `--ui-font` |
+| `--ui-font-weight-bold` |
+| `--ui-line-height-glyph` |

package/docs/photo-gallery.md

@@ -67,6 +67,7 @@ import "@f-ewald/components/photo-gallery.js";
 | `--ui-font` |
 | `--ui-font-size` |
 | `--ui-font-size-sm` |
+| `--ui-line-height-tight` |
 | `--ui-on-accent` |
 | `--ui-overlay` |
 | `--ui-primary` |

package/docs/popover-panel.md

@@ -61,7 +61,9 @@ import "@f-ewald/components/popover-panel.js";
 | `--ui-border` |
 | `--ui-focus-ring` |
 | `--ui-font` |
-| `--ui-font-size` |
+| `--ui-font-size-lg` |
+| `--ui-font-weight-semibold` |
+| `--ui-line-height-tight` |
 | `--ui-overlay` |
 | `--ui-radius` |
 | `--ui-radius-sm` |

package/docs/radio-cards.md

@@ -53,6 +53,8 @@ _None._
 | `--ui-focus-ring` |
 | `--ui-font` |
 | `--ui-font-size-sm` |
+| `--ui-font-weight-regular` |
+| `--ui-font-weight-semibold` |
 | `--ui-primary` |
 | `--ui-radius-sm` |
 | `--ui-surface-muted` |

package/docs/radio-pills.md

@@ -53,6 +53,7 @@ _None._
 | `--ui-focus-ring` |
 | `--ui-font` |
 | `--ui-font-size-sm` |
+| `--ui-line-height-tight` |
 | `--ui-primary` |
 | `--ui-surface-muted` |
 | `--ui-text` |

package/docs/reveal-button.md

@@ -39,7 +39,9 @@ _None._
 | --- |
 | `--ui-focus-ring` |
 | `--ui-font` |
-| `--ui-font-size` |
+| `--ui-font-size-sm` |
+| `--ui-font-weight-medium` |
+| `--ui-line-height-tight` |
 | `--ui-on-accent` |
 | `--ui-primary` |
 | `--ui-primary-hover` |

package/docs/slide-panel.md

@@ -48,7 +48,9 @@ import "@f-ewald/components/slide-panel.js";
 | `--ui-border` |
 | `--ui-focus-ring` |
 | `--ui-font` |
-| `--ui-font-size` |
+| `--ui-font-size-lg` |
+| `--ui-font-weight-semibold` |
+| `--ui-line-height-tight` |
 | `--ui-radius` |
 | `--ui-radius-sm` |
 | `--ui-shadow-lg` |

package/docs/stat-meter.md

@@ -42,7 +42,10 @@ _None._
 | --- |
 | `--ui-font` |
 | `--ui-font-size-sm` |
+| `--ui-font-weight-medium` |
+| `--ui-font-weight-semibold` |
 | `--ui-success` |
 | `--ui-surface-muted` |
 | `--ui-text` |
 | `--ui-text-muted` |
+| `--ui-tracking-wide` |

package/docs/status-pill.md

@@ -39,6 +39,7 @@ _None._
 | `--ui-danger` |
 | `--ui-font` |
 | `--ui-font-size-sm` |
+| `--ui-font-weight-medium` |
 | `--ui-info` |
 | `--ui-primary` |
 | `--ui-success` |

package/docs/toast-notification.md

@@ -47,6 +47,8 @@ _None._
 | `--ui-font-size` |
 | `--ui-hover-overlay` |
 | `--ui-info` |
+| `--ui-line-height-glyph` |
+| `--ui-line-height-normal` |
 | `--ui-on-accent` |
 | `--ui-radius` |
 | `--ui-radius-sm` |

package/docs/ui-button.md

@@ -61,6 +61,8 @@ _None._
 | `--ui-focus-ring` |
 | `--ui-font` |
 | `--ui-font-size-sm` |
+| `--ui-font-weight-medium` |
+| `--ui-line-height-tight` |
 | `--ui-on-accent` |
 | `--ui-primary` |
 | `--ui-primary-hover` |

package/docs/user-avatar.md

@@ -39,5 +39,6 @@ _None._
 | Custom property |
 | --- |
 | `--ui-font` |
+| `--ui-font-weight-semibold` |
 | `--ui-on-accent` |
 | `--ui-primary` |

package/docs/weight-bar-chart.md

@@ -47,7 +47,6 @@ _None._
 | `--ui-font` |
 | `--ui-font-size-sm` |
 | `--ui-primary` |
-| `--ui-radius-sm` |
 | `--ui-surface-muted` |
 | `--ui-text` |
 | `--ui-text-muted` |