@mcp-b/react-components 0.51.2 → 0.52.0

package/dist/styles/brand.test.ts

@@ -0,0 +1,158 @@
+import { afterEach, expect, test } from "vite-plus/test";
+import "./index.css";
+
+const root = document.documentElement;
+const initialTheme = root.getAttribute("data-theme");
+const initialPreset = root.getAttribute("data-preset");
+const initialStyle = root.getAttribute("data-style");
+
+afterEach(() => {
+  document.body.replaceChildren();
+  for (const [name, value] of [
+    ["data-theme", initialTheme],
+    ["data-preset", initialPreset],
+    ["data-style", initialStyle],
+  ] as const) {
+    if (value === null) root.removeAttribute(name);
+    else root.setAttribute(name, value);
+  }
+});
+
+function color(token: string) {
+  const probe = document.createElement("span");
+  probe.style.color = `var(${token})`;
+  document.body.append(probe);
+  const value = getComputedStyle(probe).color;
+  probe.remove();
+  return value;
+}
+
+function luminance(value: string) {
+  const channels = value
+    .match(/[\d.]+/g)!
+    .slice(0, 3)
+    .map(Number)
+    .map((channel) => {
+      const normalized = channel / 255;
+      return normalized <= 0.04045 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+    });
+  return channels[0]! * 0.2126 + channels[1]! * 0.7152 + channels[2]! * 0.0722;
+}
+
+function contrast(foreground: string, background: string) {
+  const a = luminance(color(foreground));
+  const b = luminance(color(background));
+  return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+}
+
+for (const theme of ["light", "dark"] as const) {
+  test(`Sigvelo ${theme} defaults keep readable content and branded actions`, () => {
+    root.dataset.theme = theme;
+    root.removeAttribute("data-preset");
+    root.removeAttribute("data-style");
+    expect(color("--sigvelo-color-surface")).toBe(
+      theme === "light" ? "rgb(247, 247, 244)" : "rgb(23, 23, 22)",
+    );
+    expect(color("--sigvelo-color-primary-bg")).toBe(
+      theme === "light" ? "rgb(0, 109, 159)" : "rgb(139, 217, 240)",
+    );
+    for (const surface of ["surface", "surface-under", "surface-raised"]) {
+      for (const foreground of [
+        "text",
+        "text-muted",
+        "text-subtle",
+        "primary-text",
+        "warning-text",
+      ]) {
+        expect(
+          contrast(`--sigvelo-color-${foreground}`, `--sigvelo-color-${surface}`),
+        ).toBeGreaterThanOrEqual(4.5);
+      }
+    }
+    expect(
+      contrast("--sigvelo-color-primary-text-on-bg", "--sigvelo-color-primary-bg"),
+    ).toBeGreaterThanOrEqual(4.5);
+    expect(
+      contrast("--sigvelo-color-primary-text-on-subtle", "--sigvelo-color-primary-bg-subtle"),
+    ).toBeGreaterThanOrEqual(4.5);
+    for (const width of [320, 834, 1280]) {
+      const app = document.createElement("div");
+      app.className = "think-full-app";
+      app.style.width = `${width}px`;
+      const panel = document.createElement("aside");
+      panel.className = "think-full-app__aside";
+      app.append(panel);
+      document.body.append(app);
+      expect(getComputedStyle(panel).backgroundColor).toBe(color("--sigvelo-color-canvas"));
+      app.remove();
+    }
+    expect(color("--sigvelo-color-surface-raised")).toBe(
+      theme === "light" ? "rgb(243, 246, 246)" : "rgb(18, 35, 45)",
+    );
+    const avatar = document.createElement("span");
+    avatar.className = "avatar";
+    const initials = document.createElement("span");
+    initials.className = "avatar__fallback";
+    initials.textContent = "VI";
+    avatar.append(initials);
+    document.body.append(avatar);
+    const paint = document.createElement("canvas").getContext("2d")!;
+    // Avatar and fallback both have translucent fills; measure their actual
+    // composite over a raised card instead of checking isolated token pairs.
+    for (const background of [
+      color("--sigvelo-color-surface-raised"),
+      getComputedStyle(avatar).backgroundColor,
+      getComputedStyle(initials).backgroundColor,
+    ]) {
+      paint.fillStyle = background;
+      paint.fillRect(0, 0, 1, 1);
+    }
+    const pixel = paint.getImageData(0, 0, 1, 1).data;
+    const backgroundLuminance = luminance(`rgb(${pixel[0]}, ${pixel[1]}, ${pixel[2]})`);
+    const textLuminance = luminance(getComputedStyle(initials).color);
+    expect(
+      (Math.max(backgroundLuminance, textLuminance) + 0.05) /
+        (Math.min(backgroundLuminance, textLuminance) + 0.05),
+    ).toBeGreaterThanOrEqual(4.5);
+    const searchHeader = document.createElement("header");
+    searchHeader.className = "mcp-plugin-catalog__header";
+    document.body.append(searchHeader);
+    expect(getComputedStyle(searchHeader).backgroundColor).toBe(color("--sigvelo-color-canvas"));
+    const composer = document.createElement("form");
+    composer.className = "prompt-input";
+    document.body.append(composer);
+    expect(getComputedStyle(composer).borderTopLeftRadius).toBe(
+      CSS.supports("corner-shape", "superellipse(1.5)") ? "28px" : "24px",
+    );
+    expect(getComputedStyle(composer).borderTopWidth).toBe("0px");
+    expect(getComputedStyle(composer).boxShadow).not.toBe("none");
+    expect(getComputedStyle(composer).backgroundColor).toBe(
+      color("--sigvelo-color-surface-raised"),
+    );
+    expect(getComputedStyle(composer, "::after").content).toBe("none");
+    const submit = document.createElement("button");
+    submit.className = "button button--xs prompt-input__submit";
+    submit.dataset.iconOnly = "";
+    composer.append(submit);
+    expect(getComputedStyle(submit).borderTopLeftRadius).toBe("9999px");
+    if (CSS.supports("corner-shape", "superellipse(1.5)")) {
+      expect(getComputedStyle(submit).getPropertyValue("corner-shape")).toBe("round");
+    }
+    const transcript = document.createElement("div");
+    transcript.className = "message-scroller__viewport";
+    document.body.append(transcript);
+    expect(getComputedStyle(transcript).borderTopLeftRadius).toBe("0px");
+    if (CSS.supports("corner-shape", "superellipse(1.5)")) {
+      expect(getComputedStyle(composer).getPropertyValue("corner-shape")).toBe("superellipse(1.5)");
+    }
+  });
+}
+
+test("OS-following mode uses the same Sigvelo palette", () => {
+  root.removeAttribute("data-theme");
+  root.removeAttribute("data-preset");
+  root.removeAttribute("data-style");
+  expect(color("--sigvelo-color-surface")).toBe(
+    matchMedia("(prefers-color-scheme: dark)").matches ? "rgb(23, 23, 22)" : "rgb(247, 247, 244)",
+  );
+});

package/dist/styles/browser-control-overlay.css

@@ -145,6 +145,28 @@
   box-shadow: none;
 }
 
+@media (width <= 576px) {
+  :host .banner {
+    box-sizing: border-box;
+    flex-wrap: wrap;
+    width: calc(100vw - 32px);
+  }
+
+  :host .banner .text {
+    display: block;
+    flex-basis: 100%;
+    overflow: visible;
+    overflow-wrap: anywhere;
+  }
+}
+
+@media (pointer: coarse) {
+  :host button {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
 @media print {
   :host {
     display: none !important;

package/dist/styles/button.css

@@ -33,7 +33,8 @@
     translate var(--sigvelo-motion-duration-presence) var(--sigvelo-ease-press);
 }
 
-.button svg {
+/* Icon defaults reach plain wrappers; compound artwork keeps its own sizing. */
+:where(.button) svg {
   inline-size: var(--sigvelo-recipe-button-icon-size);
   block-size: var(--sigvelo-recipe-button-icon-size);
   flex: none;
@@ -220,7 +221,27 @@
   flex: none;
 }
 
+/* Action labels follow the available surface, including an embedded side panel. */
+@media (width <= 36rem) {
+  .button__responsive-label {
+    display: none;
+  }
+}
+
+/* Local wrap, shared with composer controls. Not a shell navigation breakpoint. */
+@container (inline-size <= 36rem) {
+  .button__responsive-label {
+    display: none;
+  }
+}
+
 @media (forced-colors: active) {
+  .button:focus-visible {
+    outline: var(--sigvelo-focus-ring-forced);
+    outline-offset: var(--sigvelo-focus-offset);
+    box-shadow: none;
+  }
+
   .button {
     border: var(--sigvelo-border-style) var(--sigvelo-border-width) ButtonText;
   }

package/dist/styles/chatgpt-sign-in-screen.css

@@ -1,287 +1,173 @@
 .chatgpt-sign-in {
-  --chatgpt-sign-in-brand-bg: light-dark(#006d9f, #63c7e8);
-  --chatgpt-sign-in-brand-text: light-dark(#fff, #061118);
-  --chatgpt-sign-in-brand-text-muted: light-dark(#e5f6fc, #163440);
-  --sigvelo-color-text: var(--chatgpt-sign-in-brand-text);
-  --sigvelo-color-text-muted: var(--chatgpt-sign-in-brand-text-muted);
-  --sigvelo-color-neutral-text-on-subtle: var(--chatgpt-sign-in-brand-text-muted);
-  --sigvelo-color-primary-bg: var(--chatgpt-sign-in-brand-text);
-  --sigvelo-color-primary-bg-muted: var(--chatgpt-sign-in-brand-text-muted);
-  --sigvelo-color-primary-text-on-bg: var(--chatgpt-sign-in-brand-bg);
-
   position: relative;
   isolation: isolate;
-  overflow-x: hidden;
-  overflow-y: auto;
+  box-sizing: border-box;
+  overflow: auto;
   block-size: 100%;
-  min-inline-size: 17.5rem;
-  display: grid;
-  grid-template-rows: none;
-  grid-auto-rows: auto;
-  place-items: center;
-  align-content: center;
-  row-gap: var(--sigvelo-spacing-2);
-  padding: clamp(var(--sigvelo-spacing-5), 5vw, var(--sigvelo-spacing-12));
-  background: var(--chatgpt-sign-in-brand-bg);
-  color: var(--chatgpt-sign-in-brand-text);
+  min-inline-size: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sigvelo-spacing-4);
+  padding: var(--sigvelo-spacing-6);
+  background: var(--sigvelo-color-canvas);
+  color: var(--sigvelo-color-text);
   font-family: inherit;
 }
 
 .chatgpt-sign-in::before {
   content: "";
-  display: block;
   position: absolute;
-  z-index: 0;
   inset: 0;
+  z-index: -1;
+  pointer-events: none;
   background:
-    linear-gradient(
-      90deg,
-      rgb(23 38 184 / 0.2),
-      color-mix(in srgb, var(--chatgpt-sign-in-brand-bg) 42%, white 58%) 48%,
-      rgb(255 255 255 / 0.2)
+    radial-gradient(
+      ellipse at 50% 25%,
+      light-dark(
+        color-mix(in oklab, var(--sigvelo-color-primary-text) 28%, transparent),
+        color-mix(in oklab, var(--sigvelo-color-primary-text) 20%, transparent)
+      ),
+      transparent 65%
     ),
     radial-gradient(
-      circle at 26% 76%,
-      color-mix(in srgb, var(--chatgpt-sign-in-brand-bg) 76%, black 24%),
-      transparent 48%
+      ellipse at 100% 100%,
+      light-dark(
+        color-mix(in oklab, var(--sigvelo-color-primary-bg-dark) 45%, transparent),
+        color-mix(in oklab, var(--sigvelo-color-primary-bg-dark) 22%, transparent)
+      ),
+      transparent 60%
     );
-  mix-blend-mode: multiply;
-  opacity: 1;
-  pointer-events: none;
-  transition: none;
-}
-
-.chatgpt-sign-in::after {
-  content: "";
-  position: absolute;
-  z-index: 0;
-  inset: 0;
-  background: radial-gradient(circle, rgb(255 255 255 / 0.34) 0 1px, transparent 1.25px);
-  background-size: 6px 6px;
-  mask-image: radial-gradient(
-    circle at center,
-    transparent 0 8rem,
-    rgb(0 0 0 / 0.42) 16rem,
-    black 28rem
-  );
-  mix-blend-mode: screen;
-  opacity: 0.82;
-  pointer-events: none;
+  background-size:
+    140% 140%,
+    150% 150%;
+  background-position:
+    0% 0%,
+    100% 100%;
+  animation: sign-in-ambient-drift calc(var(--sigvelo-motion-duration-shimmer) * 6)
+    var(--sigvelo-ease-standard) infinite alternate;
+}
+
+/* Move only the decorative background, leaving the content and scroll bounds stable.
+   The shared reduced-motion layer disables this loop for OS and app preferences. */
+@keyframes sign-in-ambient-drift {
+  to {
+    background-position:
+      100% 65%,
+      0% 25%;
+  }
 }
 
 .chatgpt-sign-in__panel {
-  position: relative;
-  z-index: 1;
-  isolation: isolate;
+  inline-size: min(100%, 20rem);
   display: grid;
-  gap: var(--sigvelo-spacing-5);
-  justify-items: center;
+  gap: var(--sigvelo-spacing-6);
+  justify-items: stretch;
   text-align: center;
 }
 
-.chatgpt-sign-in__secondary-action {
-  z-index: 1;
+.chatgpt-sign-in__brand {
   display: grid;
-  gap: var(--sigvelo-spacing-1);
   justify-items: center;
-  margin-block-start: 0;
-}
-
-.chatgpt-sign-in__secondary-action::before {
-  content: "or";
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-base);
-  line-height: var(--sigvelo-leading-compact);
-}
-
-.chatgpt-sign-in__secondary-action :where(button) {
-  min-block-size: 2.75rem;
-  padding-inline: var(--sigvelo-spacing-3);
-  border: 0;
-  background: transparent;
-  color: var(--sigvelo-color-text);
-  font-size: var(--sigvelo-text-base);
-  font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: var(--sigvelo-leading-compact);
-  box-shadow: none;
-  text-decoration: underline;
-  text-decoration-thickness: var(--sigvelo-border-width);
-  text-underline-offset: 0.25rem;
-}
-
-.chatgpt-sign-in__secondary-action :where(button):hover:not([data-disabled]) {
-  background: color-mix(in srgb, var(--chatgpt-sign-in-brand-text) 10%, transparent);
+  gap: var(--sigvelo-spacing-2);
 }
 
-.chatgpt-sign-in__error {
-  margin: 0;
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-sm);
+.chatgpt-sign-in__brand-mark {
+  display: inline-flex;
+  margin-block-end: var(--sigvelo-spacing-4);
 }
 
-.chatgpt-sign-in__brand {
-  display: grid;
-  gap: var(--sigvelo-spacing-1-5);
-  justify-items: center;
+.chatgpt-sign-in__brand-mark :where(img, svg) {
+  inline-size: var(--sigvelo-spacing-16);
+  block-size: var(--sigvelo-spacing-16);
+  object-fit: contain;
 }
 
 .chatgpt-sign-in__brand h1 {
   margin: 0;
-  color: var(--sigvelo-color-text);
-  font-size: calc(var(--sigvelo-text-2xl) + 0.125rem);
-  font-weight: var(--sigvelo-font-weight-bold);
-  letter-spacing: 0;
+  color: var(--sigvelo-color-primary-text);
+  font-size: var(--sigvelo-text-2xl);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  letter-spacing: var(--sigvelo-tracking-tight);
   line-height: var(--sigvelo-leading-tight);
 }
 
-.chatgpt-sign-in__brand p {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--sigvelo-spacing-1-5);
+.chatgpt-sign-in__footer {
   margin: 0;
   color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-base);
-  font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: var(--sigvelo-leading-compact);
-}
-
-.chatgpt-sign-in__brand-mark {
-  display: inline-flex;
-}
-
-.chatgpt-sign-in__brand-mark :where(img, svg) {
-  inline-size: var(--sigvelo-control-icon-size-xl);
-  block-size: var(--sigvelo-control-icon-size-xl);
-  filter: drop-shadow(
-    0 0.25rem 0.5rem color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 72%)
-  );
+  font-size: var(--sigvelo-text-sm);
 }
 
 .chatgpt-sign-in__button {
-  --chatgpt-sign-in-button-x: 50%;
-  --chatgpt-sign-in-button-y: 50%;
-
-  position: relative;
-  isolation: isolate;
-  overflow: hidden;
-  min-inline-size: min(100%, 16.75rem);
-  min-block-size: 3rem;
+  inline-size: 100%;
+  min-block-size: var(--sigvelo-spacing-12);
   padding-inline: var(--sigvelo-spacing-4);
-  font-size: var(--sigvelo-text-base);
-  box-shadow: inset 0 0 0 var(--sigvelo-border-width)
-    color-mix(in srgb, var(--chatgpt-sign-in-brand-bg) 16%, transparent);
-  translate: 0;
-  scale: 1;
-  transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    filter var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    scale var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    translate var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.chatgpt-sign-in__button::before {
-  content: "";
-  position: absolute;
-  z-index: 0;
-  inset: 0;
-  background: radial-gradient(
-    circle at var(--chatgpt-sign-in-button-x) var(--chatgpt-sign-in-button-y),
-    color-mix(in oklab, var(--sigvelo-color-primary-text-on-bg), transparent 70%),
-    transparent 42%
-  );
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.chatgpt-sign-in__button::after {
-  content: "";
-  position: absolute;
-  z-index: 0;
-  inset: 1px;
-  border-radius: inherit;
-  background: radial-gradient(
-    circle at var(--chatgpt-sign-in-button-x) var(--chatgpt-sign-in-button-y),
-    color-mix(in oklab, var(--sigvelo-color-primary-text-on-bg), transparent 88%),
-    transparent 55%
-  );
-  opacity: 0.45;
-  pointer-events: none;
-}
-
-.chatgpt-sign-in__button:hover:not([data-disabled]) {
-  box-shadow:
-    inset 0 0 0 var(--sigvelo-border-width)
-      color-mix(in srgb, var(--chatgpt-sign-in-brand-bg) 24%, transparent),
-    0 0 1rem rgb(255 255 255 / 0.34);
-  translate: 0 -0.0625rem;
-}
-
-.chatgpt-sign-in__button:hover:not([data-disabled])::before {
-  opacity: 1;
-}
-
-.chatgpt-sign-in__button:active:not([data-disabled]) {
-  translate: 0 0.0625rem;
-  scale: 0.99;
-}
-
-.chatgpt-sign-in__button-icon,
-.chatgpt-sign-in__button-label {
-  position: relative;
-  z-index: 1;
+  border-radius: var(--sigvelo-radius-xl);
+  font-size: var(--sigvelo-text-sm);
 }
 
 .chatgpt-sign-in__button-icon {
   display: inline-flex;
-  rotate: 0deg;
-  scale: 1;
-  transition:
-    rotate var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    scale var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.chatgpt-sign-in__button:hover:not([data-disabled]) .chatgpt-sign-in__button-icon {
-  rotate: -4deg;
-  scale: 1.06;
 }
 
 .chatgpt-sign-in__button svg,
-.chatgpt-sign-in__button .chatgpt-sign-in__logo {
-  display: block;
+.chatgpt-sign-in__logo {
   inline-size: var(--sigvelo-text-lg);
   block-size: var(--sigvelo-text-lg);
   color: inherit;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .chatgpt-sign-in__button,
-  .chatgpt-sign-in__button::before,
-  .chatgpt-sign-in__button-icon {
-    transition: none;
-  }
+.chatgpt-sign-in__secondary-action {
+  inline-size: min(100%, 20rem);
+  display: grid;
+  justify-items: stretch;
+  gap: var(--sigvelo-spacing-2);
+  text-align: center;
 }
 
-@media (hover: none), (pointer: coarse) {
-  .chatgpt-sign-in__button::before,
-  .chatgpt-sign-in__button::after {
-    display: none;
-  }
+.chatgpt-sign-in__secondary-action::before {
+  content: "or";
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-sm);
+  line-height: var(--sigvelo-text-sm-leading);
+  padding-block: var(--sigvelo-spacing-1);
+}
+
+.chatgpt-sign-in__secondary-action .button {
+  min-block-size: var(--sigvelo-spacing-11);
+  white-space: normal;
+  font-size: var(--sigvelo-text-compact);
+  color: var(--sigvelo-color-primary-text);
+}
+
+.chatgpt-sign-in__error {
+  margin: 0;
+  color: var(--sigvelo-color-danger-text);
+  font-size: var(--sigvelo-text-sm);
 }
 
 @media (forced-colors: active) {
-  .chatgpt-sign-in::before,
-  .chatgpt-sign-in::after,
-  .chatgpt-sign-in__button::before,
-  .chatgpt-sign-in__button::after {
+  .chatgpt-sign-in::before {
     display: none;
   }
+}
 
-  .chatgpt-sign-in__button {
-    background-image: none;
-    box-shadow: none;
-    outline: 1px solid ButtonText;
-    outline-offset: 2px;
-  }
+.chatgpt-sign-in__content {
+  flex: 1 0 auto;
+  inline-size: 100%;
+  display: grid;
+  align-content: center;
+  justify-items: center;
+  gap: var(--sigvelo-spacing-4);
+  padding-block: var(--sigvelo-spacing-6);
+}
+
+.chatgpt-sign-in__footer {
+  flex: none;
+  text-align: center;
+}
+
+.chatgpt-sign-in__footer a {
+  text-decoration: none;
+  border-radius: var(--sigvelo-radius-sm);
 }

package/dist/styles/code-block.css

@@ -53,6 +53,11 @@
   overflow-y: auto;
 }
 
+.code-block__container:focus-visible {
+  outline: var(--sigvelo-focus-ring);
+  outline-offset: -2px;
+}
+
 .code-block__content {
   margin: 0;
   padding-block: var(--sigvelo-layout-gutter);

package/dist/styles/codex-model-selector.css

@@ -191,6 +191,8 @@
 /* Local wrap. Not --sigvelo-layout-break-compact. */
 @container prompt-input (inline-size <= 36rem) {
   .codex-model-selector__trigger {
+    inline-size: var(--sigvelo-control-height-xs);
+    max-inline-size: var(--sigvelo-control-height-xs);
     justify-content: center;
     border-radius: var(--sigvelo-radius-full);
   }
@@ -205,18 +207,6 @@
   }
 }
 
-/* Local wrap. Not --sigvelo-layout-break-compact. */
-@container prompt-input (inline-size <= 22rem) {
-  .codex-model-selector__trigger {
-    inline-size: var(--sigvelo-control-height-xs);
-    max-inline-size: var(--sigvelo-control-height-xs);
-  }
-
-  .codex-model-selector__compact-label {
-    display: none;
-  }
-}
-
 @media (any-pointer: coarse) {
   .codex-model-selector__trigger {
     min-inline-size: var(--sigvelo-control-height-xl);

package/dist/styles/description-list.css

@@ -22,8 +22,15 @@
   text-align: end;
 }
 
+.description-list[data-align="start"] {
+  grid-template-columns: fit-content(40%) var(--sigvelo-layout-track-fill);
+  column-gap: var(--sigvelo-spacing-3);
+}
+
 .description-list[data-align="start"] .description-list__item {
-  justify-content: start;
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
   align-items: first baseline;
 }
 
@@ -32,8 +39,8 @@
 }
 
 .description-list[data-align="start"] .description-list__term {
-  flex: none;
   min-inline-size: 9ch;
+  overflow-wrap: anywhere;
 }
 
 .description-list[data-align="start"] .description-list__term :is(label, .field__label) {