@ponchia/ui 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -5,6 +5,43 @@
 |> `^0` / `*` wildcard does **not** protect you. See README → Versioning, and
 |> the deprecation policy in CONTRIBUTING.md.
 
+## 0.11.0 — 2026-09-09
+
+### Changed
+
+- **BREAKING: complete the supporting typography.** Figure captions, legend
+  text, generated-content labels and command groups use sentence-case sans.
+  Technical log bodies and identifiers retain mono. Caption text is 14px at
+  the default root size; inline citations no longer shrink below 12px.
+- Figure keys and decision/action rows respond to their own available width.
+  Two-up comparisons wrap intrinsically, including outside a report. Named
+  containment on figure, decision-grid and actions wrappers is disabled for
+  print to preserve document flow.
+
+### Fixed
+
+- Narrow evidence panels no longer squeeze a chart into 40px or decision text
+  into 21px on a wide page. Long action status and legend labels wrap.
+- Long mobile navigation labels wrap while keeping every destination reachable.
+- The figure specimen's authored annotation stays inside its viewBox.
+- Generated-content disclosure summaries retain the coarse-pointer target floor.
+
+### Added
+
+- Optional `discussion.css` with thread lists, quoted passages, messages and
+  composers. State and posting remain host-owned; includes a local interactive
+  specimen and a narrow-panel example.
+
+- A working service specimen with deterministic loading, empty, error and stale
+  states, environment/search filtering, retry and native-dialog sample creation.
+  Unavailable observations never retain an operational health claim. Product
+  state stays in the specimen; no framework state machine or data dependency.
+- Narrow-parent regression checks, including a comparison outside a report,
+  annotation bounds, long action status, citation text and recovery journeys.
+- A complete-screen migration recipe for explicit consumer typography overrides.
+
+See [the migration guide](docs/migrations/0.10-to-0.11.md).
+
 ## 0.10.0 — 2026-09-08
 
 ### Changed

package/MIGRATIONS.json

@@ -83,7 +83,7 @@
         {
           "old": "hero / project-* / post-card / essay-* / page-* / home-* / signal-panel / worklog-summary",
           "new": "the ui-* content layer",
-          "note": "Long-form content: .ui-prose / .ui-quote. Cards: .ui-card. Layout: .ui-grid / .ui-stack. Site chrome: the ui-site* shell. No 1:1 mapping \u2014 re-compose with the content primitives."
+          "note": "Long-form content: .ui-prose / .ui-quote. Cards: .ui-card. Layout: .ui-grid / .ui-stack. Site chrome: the ui-site* shell. No 1:1 mapping — re-compose with the content primitives."
         },
         {
           "old": "callout",
@@ -98,7 +98,7 @@
         {
           "old": "tag-list / tag",
           "new": "ui-tags / ui-tag",
-          "note": "Compact variant .tag-list--compact \u2192 .ui-tags--compact; verify accent-on-accent contrast (see CHANGELOG 0.3.0 a11y fix)."
+          "note": "Compact variant .tag-list--compact → .ui-tags--compact; verify accent-on-accent contrast (see CHANGELOG 0.3.0 a11y fix)."
         }
       ],
       "codemod": "See docs/migrations/0.2-to-0.3.md for a ready-to-run ripgrep+sed recipe covering the 'safe' rules."
@@ -111,7 +111,7 @@
       "manual": [
         {
           "old": "--orange / --orange-soft",
-          "new": "(removed \u2014 re-declare in a consumer :root override if referenced)",
+          "new": "(removed — re-declare in a consumer :root override if referenced)",
           "note": "Orphan token pair: defined in the token mirrors but referenced by no shipped component and documented nowhere, and untiered under the new colour model. Removed under the CONTRIBUTING 'provably-unreferenced surface' exception. If you used it: :root { --orange: #a85f32; --orange-soft: rgb(168 95 50 / 0.13); }"
         }
       ],
@@ -120,7 +120,7 @@
     {
       "from": "0.4",
       "to": "0.5",
-      "summary": "Adds the analytical-primitives suite (annotations, legend, marks, connectors, spotlight, crosshair, selection + the analytical.css roll-up); all additive/opt-in. Three breaking changes: the chart data key moved out of the report kit into the standalone Legends layer (`.ui-chart__legend`/`.ui-chart__swatch` removed); annotation arrowheads now render via the shared connectors geometry kernel (a small visual path change, no API change); and the marks/bracket-note rationed-accent tone was renamed `evidence`\u2192`accent` to match the annotation/connector tone vocabulary (`.ui-annotation--evidence` stays \u2014 it's a marker variant, not a tone).",
+      "summary": "Adds the analytical-primitives suite (annotations, legend, marks, connectors, spotlight, crosshair, selection + the analytical.css roll-up); all additive/opt-in. Three breaking changes: the chart data key moved out of the report kit into the standalone Legends layer (`.ui-chart__legend`/`.ui-chart__swatch` removed); annotation arrowheads now render via the shared connectors geometry kernel (a small visual path change, no API change); and the marks/bracket-note rationed-accent tone was renamed `evidence`→`accent` to match the annotation/connector tone vocabulary (`.ui-annotation--evidence` stays — it's a marker variant, not a tone).",
       "safe": [
         {
           "old": "ui-chart__swatch",
@@ -139,12 +139,12 @@
         {
           "old": "ui.mark({ tone: 'evidence' }) / ui.bracketNote({ tone: 'evidence' })",
           "new": "tone: 'accent'",
-          "note": "The rationed-accent tone option on the mark/bracket-note recipes is now 'accent' (was 'evidence'), matching ui.connector/ui.annotation. Do NOT rewrite ui.annotation({ variant: 'evidence' }) or the 'evidence' subject marker \u2014 those are a marker shape, not a tone, and are unchanged."
+          "note": "The rationed-accent tone option on the mark/bracket-note recipes is now 'accent' (was 'evidence'), matching ui.connector/ui.annotation. Do NOT rewrite ui.annotation({ variant: 'evidence' }) or the 'evidence' subject marker — those are a marker shape, not a tone, and are unchanged."
         },
         {
           "old": "ui-chart__legend",
           "new": "ui-legend",
-          "note": "Also import '@ponchia/ui/css/legend.css' beside report.css, and wrap each entry's content as <li class=\"ui-legend__item\"> \u2026 <span class=\"ui-legend__label\">\u2026</span>. The swatch's --chart-color/--chart-pattern inline contract is unchanged; the categorical --chart-N colour is also available via .ui-legend__swatch--N. See docs/legends.md."
+          "note": "Also import '@ponchia/ui/css/legend.css' beside report.css, and wrap each entry's content as <li class=\"ui-legend__item\"> … <span class=\"ui-legend__label\">…</span>. The swatch's --chart-color/--chart-pattern inline contract is unchanged; the categorical --chart-N colour is also available via .ui-legend__swatch--N. See docs/legends.md."
         },
         {
           "old": "connectorEndArrow (annotations)",
@@ -157,16 +157,16 @@
     {
       "from": "0.5",
       "to": "0.6",
-      "summary": "Charting realignment. The local static bar-chart renderer (.ui-chart*) is removed \u2014 a chart needs scales + data binding, out of scope for the analytical layer. bronto is now a themeable target for Vega-Lite (@ponchia/ui/vega), the same tokens-as-data path as Mermaid/D2. The --chart-* data-viz palette, tokens/charts.json, and the .ui-legend layer are unchanged.",
+      "summary": "Charting realignment. The local static bar-chart renderer (.ui-chart*) is removed — a chart needs scales + data binding, out of scope for the analytical layer. bronto is now a themeable target for Vega-Lite (@ponchia/ui/vega), the same tokens-as-data path as Mermaid/D2. The --chart-* data-viz palette, tokens/charts.json, and the .ui-legend layer are unchanged.",
       "safe": [],
       "manual": [
         {
           "old": "ui-chart / ui-chart__plot / ui-chart__bar / ui-chart__label / ui-chart__track / ui-chart__fill / ui-chart__fallback / ui-chart__caption",
           "new": "a Vega-Lite chart themed with @ponchia/ui/vega, or a token-themed inline <svg>",
-          "note": "No 1:1 class mapping \u2014 the renderer is removed. For a real chart: import '@ponchia/ui/vega', pass brontoVegaConfig(theme) to vega-embed, and place the result in a <figure class=\"ui-report__figure\"> with a <figcaption class=\"ui-report__caption\"> and a <ul class=\"ui-legend\"> key (see docs/vega.md). For a frozen/print chart: hand-author an inline <svg> using the --chart-N palette tokens for fills. The --chart-value inline knob is gone; --chart-color/--chart-pattern remain on .ui-legend__swatch."
+          "note": "No 1:1 class mapping — the renderer is removed. For a real chart: import '@ponchia/ui/vega', pass brontoVegaConfig(theme) to vega-embed, and place the result in a <figure class=\"ui-report__figure\"> with a <figcaption class=\"ui-report__caption\"> and a <ul class=\"ui-legend\"> key (see docs/vega.md). For a frozen/print chart: hand-author an inline <svg> using the --chart-N palette tokens for fills. The --chart-value inline knob is gone; --chart-color/--chart-pattern remain on .ui-legend__swatch."
         }
       ],
-      "codemod": "No codemod \u2014 the .ui-chart* renderer has no replacement class. rg -l 'ui-chart\\\\b|ui-chart__' to find call sites, then rebuild each as a Vega-Lite chart (@ponchia/ui/vega) or a token-themed inline <svg>. See docs/vega.md."
+      "codemod": "No codemod — the .ui-chart* renderer has no replacement class. rg -l 'ui-chart\\\\b|ui-chart__' to find call sites, then rebuild each as a Vega-Lite chart (@ponchia/ui/vega) or a token-themed inline <svg>. See docs/vega.md."
     },
     {
       "from": "0.6",
@@ -205,6 +205,25 @@
         }
       ],
       "codemod": "See docs/migrations/0.9-to-0.10.md. Changes require consumer lifecycle and visual review; no blanket replacement is safe."
+    },
+    {
+      "from": "0.10",
+      "to": "0.11",
+      "summary": "Readable supporting typography and container-aware evidence layouts.",
+      "safe": [],
+      "manual": [
+        {
+          "old": "viewport-based figure/report layouts",
+          "new": "container-aware figure, decision-grid and actions layouts; intrinsic two-up comparisons",
+          "note": "Keep the documented wrappers, verify narrow parents on wide screens and review print. New inline-size containment can change intrinsic sizing."
+        },
+        {
+          "old": "uppercase mono explanatory labels and unconstrained superscript citations",
+          "new": "sentence-case sans supporting text and a citation size floor",
+          "note": "Review explicit consumer overrides by role, preserving intentional display and technical identifiers."
+        }
+      ],
+      "codemod": "No automatic rewrite: review complete consumer tasks and docs/migrations/0.10-to-0.11.md."
     }
   ]
 }

package/README.md

@@ -93,7 +93,7 @@ Or drop it in with no build step, straight from a CDN (replace the version only
 when deliberately upgrading across a breaking pre-1.0 minor):
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.10.0/dist/bronto.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.11.0/dist/bronto.css">
 ```
 
 ## Quick start

package/classes/classes.json

@@ -1,8 +1,8 @@
 {
   "$comment": "@ponchia/ui class vocabulary as language-neutral data — validate emitted markup without executing the ESM cls map or parsing the .d.ts. Generated from classes/index.js — do not edit by hand; run `npm run classes:json:build`. Drift-checked in CI. `groups[].base` is null for a parts-only namespace (no standalone base class — do NOT emit it). A modifier whose name contains `__` (e.g. `ui-spark__bar--pos`) attaches to THAT part, not the base host. `states` is the author-applied `is-*` hooks (runtime/behavior-managed hooks are excluded); `behaviorAttributes` are the `data-bronto-*` wiring hooks the optional behaviors delegate on; `requiredAria` is the role/aria a generator must emit per component. `states` + `customProperties` are documented in docs/reference.md and ship outside `cls` by design.",
   "counts": {
-    "classes": 683,
-    "groups": 186
+    "classes": 695,
+    "groups": 187
   },
   "groups": {
     "ui-accordion": {
@@ -465,6 +465,23 @@
         "ui-diff__row"
       ]
     },
+    "ui-discussion": {
+      "base": "ui-discussion",
+      "modifiers": [],
+      "parts": [
+        "ui-discussion__actions",
+        "ui-discussion__composer",
+        "ui-discussion__header",
+        "ui-discussion__hint",
+        "ui-discussion__item",
+        "ui-discussion__list",
+        "ui-discussion__message",
+        "ui-discussion__messages",
+        "ui-discussion__meta",
+        "ui-discussion__quote",
+        "ui-discussion__state"
+      ]
+    },
     "ui-display": {
       "base": "ui-display",
       "modifiers": [],
@@ -1799,6 +1816,18 @@
     "ui-diff__row--add",
     "ui-diff__row--context",
     "ui-diff__row--remove",
+    "ui-discussion",
+    "ui-discussion__actions",
+    "ui-discussion__composer",
+    "ui-discussion__header",
+    "ui-discussion__hint",
+    "ui-discussion__item",
+    "ui-discussion__list",
+    "ui-discussion__message",
+    "ui-discussion__messages",
+    "ui-discussion__meta",
+    "ui-discussion__quote",
+    "ui-discussion__state",
     "ui-display",
     "ui-divider",
     "ui-dot",

package/classes/index.d.ts

@@ -382,6 +382,18 @@ export declare const cls: {
   readonly legendTrack: 'ui-legend__track';
   readonly legendTicks: 'ui-legend__ticks';
   readonly legendTick: 'ui-legend__tick';
+  readonly discussion: 'ui-discussion';
+  readonly discussionHeader: 'ui-discussion__header';
+  readonly discussionActions: 'ui-discussion__actions';
+  readonly discussionQuote: 'ui-discussion__quote';
+  readonly discussionMessages: 'ui-discussion__messages';
+  readonly discussionList: 'ui-discussion__list';
+  readonly discussionMessage: 'ui-discussion__message';
+  readonly discussionMeta: 'ui-discussion__meta';
+  readonly discussionHint: 'ui-discussion__hint';
+  readonly discussionState: 'ui-discussion__state';
+  readonly discussionItem: 'ui-discussion__item';
+  readonly discussionComposer: 'ui-discussion__composer';
   readonly annotation: 'ui-annotation';
   readonly annotationSubject: 'ui-annotation__subject';
   readonly annotationConnector: 'ui-annotation__connector';

package/classes/index.js

@@ -400,6 +400,19 @@ export const cls = Object.freeze({
   legendTrack: 'ui-legend__track',
   legendTicks: 'ui-legend__ticks',
   legendTick: 'ui-legend__tick',
+  // discussions (opt-in discussion.css; host-owned state)
+  discussion: 'ui-discussion',
+  discussionHeader: 'ui-discussion__header',
+  discussionActions: 'ui-discussion__actions',
+  discussionQuote: 'ui-discussion__quote',
+  discussionMessages: 'ui-discussion__messages',
+  discussionList: 'ui-discussion__list',
+  discussionMessage: 'ui-discussion__message',
+  discussionMeta: 'ui-discussion__meta',
+  discussionHint: 'ui-discussion__hint',
+  discussionState: 'ui-discussion__state',
+  discussionItem: 'ui-discussion__item',
+  discussionComposer: 'ui-discussion__composer',
   annotation: 'ui-annotation',
   annotationSubject: 'ui-annotation__subject',
   annotationConnector: 'ui-annotation__connector',

package/css/annotations.css

@@ -14,7 +14,7 @@
   --annotation-stroke-width: 1.5;
 
   color: var(--annotation-color);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-xs);
   overflow: visible;
 }
@@ -96,7 +96,7 @@
   stroke: var(--annotation-note-bg);
   stroke-linejoin: round;
   stroke-width: 3;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-annotation__label {

package/css/app.css

@@ -73,6 +73,8 @@
 }
 
 .ui-app-nav a {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
   align-items: center;
   border-inline-start: 2px solid transparent;
   color: var(--text-soft);
@@ -354,7 +356,7 @@
     justify-content: center;
     border-inline-start: 0;
     border-block-end: 2px solid transparent;
-    white-space: nowrap;
+    white-space: normal;
   }
 
   .ui-app-nav a.is-active,

package/css/command.css

@@ -43,11 +43,11 @@
 
 .ui-command__group {
   color: var(--text-dim);
-  font-family: var(--mono);
-  font-size: var(--text-2xs);
-  letter-spacing: var(--tracking-wide);
+  font-family: var(--sans);
+  font-size: var(--text-xs);
+  letter-spacing: 0;
   padding: 0.5rem 0.6rem 0.25rem;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-command__item {

package/css/discussion.css

@@ -0,0 +1,150 @@
+/* Discussions: readable messages and composers. The host owns storage, identity,
+   focus management, anchoring, notifications, and posting state. */
+.ui-discussion {
+  color: var(--text);
+  font-family: var(--sans);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+.ui-discussion__header {
+  align-items: start;
+  display: flex;
+  gap: var(--space-md);
+  justify-content: space-between;
+}
+
+.ui-discussion__header > div {
+  min-inline-size: 0;
+}
+
+.ui-discussion__header h2 {
+  font-family: var(--sans);
+  font-size: var(--text-lg);
+  font-weight: 650;
+  letter-spacing: normal;
+  line-height: 1.25;
+  margin: 0;
+  text-transform: none;
+}
+
+.ui-discussion__header p,
+.ui-discussion__meta,
+.ui-discussion__hint,
+.ui-discussion__state {
+  color: var(--text-dim);
+  font-family: var(--sans);
+  font-size: var(--text-xs);
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.ui-discussion__actions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+}
+
+.ui-discussion__quote {
+  background: var(--panel);
+  border-inline-start: 3px solid var(--accent);
+  color: var(--text);
+  font-family: var(--sans);
+  margin: var(--space-md) 0;
+  padding: var(--space-sm) var(--space-md);
+  white-space: pre-wrap;
+}
+
+.ui-discussion__messages,
+.ui-discussion__list {
+  list-style: none;
+  margin: var(--space-md) 0;
+  padding: 0;
+}
+
+.ui-discussion__message {
+  border-block-end: 1px solid var(--line);
+  padding-block: var(--space-md);
+}
+
+.ui-discussion__message .ui-prose {
+  font-family: var(--sans);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+.ui-discussion__meta {
+  margin-block: 0 var(--space-sm);
+}
+
+.ui-discussion__item {
+  background: transparent;
+  border: 0;
+  border-block-end: 1px solid var(--line);
+  color: inherit;
+  cursor: pointer;
+  display: grid;
+  font: inherit;
+  gap: var(--space-xs);
+  inline-size: 100%;
+  min-block-size: 44px;
+  padding: var(--space-md) var(--space-sm);
+  text-align: start;
+}
+
+.ui-discussion__item > :first-child {
+  font-weight: 600;
+}
+
+.ui-discussion__item small {
+  color: var(--text-dim);
+  font-family: var(--sans);
+  font-size: var(--text-xs);
+}
+
+.ui-discussion__item:is(:hover, :focus-visible) {
+  background: var(--panel);
+}
+
+.ui-discussion__item:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+.ui-discussion__composer {
+  border-block-start: 1px solid var(--line);
+  display: grid;
+  gap: var(--space-sm);
+  padding-block: var(--space-md);
+}
+
+.ui-discussion__composer textarea {
+  font-family: var(--sans);
+  inline-size: 100%;
+  min-block-size: 7rem;
+  resize: vertical;
+}
+
+@media (forced-colors: active) {
+  .ui-discussion__quote {
+    border-color: Highlight;
+  }
+
+  .ui-discussion__item:focus-visible {
+    outline-color: Highlight;
+  }
+}
+
+@media print {
+  .ui-discussion__actions,
+  .ui-discussion__composer {
+    display: none;
+  }
+
+  .ui-discussion__message {
+    break-inside: avoid;
+  }
+}

package/css/figure.css

@@ -8,6 +8,7 @@
    ========================================================================== */
 
 .ui-figure {
+  container: bronto-figure / inline-size;
   display: grid;
   gap: var(--space-sm);
   margin: 0;
@@ -22,11 +23,11 @@
 
 .ui-figure__caption {
   color: var(--text-dim);
-  font-family: var(--mono);
-  font-size: var(--text-2xs);
+  font-family: var(--sans);
+  font-size: var(--text-sm);
   letter-spacing: 0;
   line-height: 1.5;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-figure__body {
@@ -81,7 +82,7 @@
   margin-block-start: var(--space-xs);
 }
 
-@media (max-width: 44rem) {
+@container bronto-figure (max-width: 44rem) {
   .ui-figure__body--key-right {
     grid-template-columns: 1fr;
   }
@@ -89,6 +90,7 @@
 
 @media print {
   .ui-figure {
+    container-type: normal;
     break-inside: avoid;
   }
 

package/css/generated.css

@@ -25,11 +25,11 @@
   align-items: center;
   color: var(--text-dim);
   display: inline-flex;
-  font-family: var(--mono);
-  font-size: var(--text-2xs);
+  font-family: var(--sans);
+  font-size: var(--text-xs);
   gap: 0.4rem;
-  letter-spacing: var(--tracking-wide);
-  text-transform: uppercase;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 /* --- Origin label — "AI assisted" / "model output" / "human reviewed". --- */
@@ -39,12 +39,12 @@
   border-radius: var(--radius-pill);
   color: var(--text-soft);
   display: inline-flex;
-  font-family: var(--mono);
-  font-size: var(--text-2xs);
+  font-family: var(--sans);
+  font-size: var(--text-xs);
   gap: 0.35rem;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   padding: 0.08rem 0.55rem;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-origin-label--ai {
@@ -61,10 +61,10 @@
 .ui-reasoning > summary {
   color: var(--text-soft);
   cursor: pointer;
-  font-family: var(--mono);
-  font-size: var(--text-2xs);
-  letter-spacing: var(--tracking-wide);
-  text-transform: uppercase;
+  font-family: var(--sans);
+  font-size: var(--text-xs);
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .ui-reasoning__body {
@@ -110,6 +110,13 @@
   white-space: pre-wrap;
 }
 
+@media (pointer: coarse) {
+  .ui-reasoning > summary,
+  .ui-tool-call > summary {
+    min-block-size: var(--tap-target);
+  }
+}
+
 @media (forced-colors: active) {
   .ui-generated {
     border-inline-start-color: CanvasText;

package/css/legend.css

@@ -18,7 +18,7 @@
   color: var(--text-soft);
   display: flex;
   flex-wrap: wrap;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-xs);
   gap: var(--space-2xs) var(--space-md);
   list-style: none;
@@ -37,13 +37,15 @@
 
 .ui-legend__title {
   color: var(--text-dim);
-  font-size: var(--text-2xs);
+  font-size: var(--text-xs);
   letter-spacing: 0;
   margin: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-legend__item {
+  min-inline-size: 0;
+  max-inline-size: 100%;
   align-items: center;
   color: inherit;
   display: inline-flex;
@@ -51,6 +53,8 @@
 }
 
 .ui-legend__label {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
   color: inherit;
 }
 
@@ -62,9 +66,9 @@
 
 .ui-legend__caption {
   color: var(--text-dim);
-  font-size: var(--text-2xs);
+  font-size: var(--text-xs);
   letter-spacing: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 /* Swatch — same token contract as the chart fill: set `--chart-color` (and,
@@ -202,6 +206,8 @@
 }
 
 .ui-legend--with-values .ui-legend__item {
+  min-inline-size: 0;
+  max-inline-size: 100%;
   display: grid;
   grid-column: 1 / -1;
   grid-template-columns: subgrid;
@@ -242,6 +248,8 @@
 
 .ui-legend__item.is-inactive .ui-legend__label,
 .ui-legend__item[aria-pressed='false'] .ui-legend__label {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
   text-decoration: line-through;
 }