@runtypelabs/persona 4.14.0 → 4.15.0

package/src/components/composer-parts.test.ts

@@ -44,8 +44,59 @@ describe("createComposerTextarea", () => {
     Object.defineProperty(textarea, "scrollHeight", { configurable: true, value: 10000 });
     textarea.dispatchEvent(new Event("input"));
     expect(textarea.style.height).toBe("200px");
+    // The override keeps winning on later input events (pill composer path).
+    textarea.dispatchEvent(new Event("input"));
+    expect(textarea.style.height).toBe("200px");
+    expect(textarea.style.maxHeight).toBe("200px");
+    document.body.removeChild(textarea);
+  });
+
+  it("caps at 3 lines of the rendered line height when themed", () => {
+    const { textarea, attachAutoResize } = createComposerTextarea(baseConfig);
+    textarea.style.lineHeight = "24px";
+    document.body.appendChild(textarea);
+    attachAutoResize();
+    Object.defineProperty(textarea, "scrollHeight", { configurable: true, value: 10000 });
+    textarea.dispatchEvent(new Event("input"));
+    expect(textarea.style.height).toBe("72px");
+    expect(textarea.style.maxHeight).toBe("72px");
     document.body.removeChild(textarea);
   });
+
+  it("defaults to 60px (3 × 20px) before any resize", () => {
+    const { textarea } = createComposerTextarea(baseConfig);
+    expect(textarea.style.maxHeight).toBe("60px");
+    expect(textarea.style.overflowY).toBe("auto");
+  });
+
+  it("falls back to 60px when the line height is `normal`", () => {
+    const { textarea, attachAutoResize } = createComposerTextarea(baseConfig);
+    textarea.style.lineHeight = "normal";
+    document.body.appendChild(textarea);
+    attachAutoResize();
+    Object.defineProperty(textarea, "scrollHeight", { configurable: true, value: 10000 });
+    textarea.dispatchEvent(new Event("input"));
+    expect(textarea.style.height).toBe("60px");
+    document.body.removeChild(textarea);
+  });
+
+  it("falls back to 60px for unitless line heights and detached nodes", () => {
+    const unitless = createComposerTextarea(baseConfig);
+    unitless.textarea.style.lineHeight = "1.5";
+    document.body.appendChild(unitless.textarea);
+    unitless.attachAutoResize();
+    Object.defineProperty(unitless.textarea, "scrollHeight", { configurable: true, value: 10000 });
+    unitless.textarea.dispatchEvent(new Event("input"));
+    expect(unitless.textarea.style.height).toBe("60px");
+    document.body.removeChild(unitless.textarea);
+
+    // Never appended: getComputedStyle still must not throw or produce NaN.
+    const detached = createComposerTextarea(baseConfig);
+    detached.attachAutoResize();
+    Object.defineProperty(detached.textarea, "scrollHeight", { configurable: true, value: 10000 });
+    detached.textarea.dispatchEvent(new Event("input"));
+    expect(detached.textarea.style.height).toBe("60px");
+  });
 });
 
 describe("createSendButton", () => {
@@ -97,10 +148,12 @@ describe("createSendButton", () => {
     expect(s.borderWidth).toBe("2px");
     expect(s.borderStyle).toBe("solid");
     expect(s.borderColor).toBe("rgb(7, 8, 9)");
-    expect(s.paddingLeft).toBe("6px");
-    expect(s.paddingRight).toBe("6px");
-    expect(s.paddingTop).toBe("4px");
-    expect(s.paddingBottom).toBe("4px");
+    // Icon mode zeroes padding even when configured: the glyph is drawn at
+    // the button size, so padding would crush it.
+    expect(s.paddingLeft).toBe("0px");
+    expect(s.paddingRight).toBe("0px");
+    expect(s.paddingTop).toBe("0px");
+    expect(s.paddingBottom).toBe("0px");
     // An explicit backgroundColor means the fallback class is not added.
     expect(send.button.classList.contains("persona-bg-persona-primary")).toBe(false);
   });
@@ -142,6 +195,52 @@ describe("createSendButton", () => {
       expect(iconCount(send.button)).toBe(1);
     });
 
+    it("zeroes padding so configured padding cannot crush the glyph", () => {
+      const send = createSendButton({
+        ...baseConfig,
+        sendButton: {
+          useIcon: true,
+          iconName: "send",
+          size: "40px",
+          paddingX: "12px",
+          paddingY: "10px",
+        },
+      });
+      expect(send.button.style.paddingLeft).toBe("0px");
+      expect(send.button.style.paddingTop).toBe("0px");
+    });
+
+    it("draws the glyph at half the button by default and honors iconSize", () => {
+      const send = createSendButton({
+        ...baseConfig,
+        sendButton: { useIcon: true, iconName: "send", size: "32px" },
+      });
+      expect(send.button.querySelector("svg")?.getAttribute("width")).toBe("16");
+
+      const sized = createSendButton({
+        ...baseConfig,
+        sendButton: {
+          useIcon: true,
+          iconName: "send",
+          size: "32px",
+          iconSize: "26px",
+          iconStrokeWidth: 2.5,
+        },
+      });
+      const svg = sized.button.querySelector("svg");
+      expect(svg?.getAttribute("width")).toBe("26");
+      expect(svg?.getAttribute("stroke-width")).toBe("2.5");
+    });
+
+    it("keeps configured padding in text mode", () => {
+      const send = createSendButton({
+        ...baseConfig,
+        sendButton: { useIcon: false, paddingX: "12px", paddingY: "10px" },
+      });
+      expect(send.button.style.paddingLeft).toBe("12px");
+      expect(send.button.style.paddingTop).toBe("10px");
+    });
+
     it("does not stack a stale icon when an external re-render swapped the live icon node", () => {
       const send = createSendButton(iconConfig);
       // Simulate a DOM morph/re-render (e.g. a host calling controller.update())

package/src/components/composer-parts.ts

@@ -39,19 +39,47 @@ export const createComposerTextarea = (config?: AgentWidgetConfig): ComposerText
     'var(--persona-input-font-family, var(--persona-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif))';
   textarea.style.fontWeight = "var(--persona-input-font-weight, var(--persona-font-weight, 400))";
 
-  // Auto-resize: expand up to 3 lines for the full composer (line-height ~20px
-  // for text-sm). The pill composer overrides this maxHeight after construction
-  // (allowing more growth in expanded mode), and the closure below honors
-  // whatever maxHeight is set at the time of the input event.
+  // Auto-resize: expand up to 3 lines for the full composer. The pill composer
+  // overrides this maxHeight after construction (allowing more growth in
+  // expanded mode), and the closure below honors whatever maxHeight is set at
+  // the time of the input event.
   const defaultMaxLines = 3;
-  const lineHeight = 20;
-  textarea.style.maxHeight = `${defaultMaxLines * lineHeight}px`;
+  // Used only when the rendered line height can't be resolved (detached node,
+  // jsdom, `normal`); matches the `persona-text-sm` / composer default.
+  const fallbackLineHeight = 20;
+
+  // `theme.components.composer.lineHeight` (--persona-composer-line-height) can
+  // change the rendered line height, so 3 lines is only correct when measured
+  // from the live element. Read lazily: at construction the textarea is usually
+  // still detached and getComputedStyle would report nothing useful.
+  const readLineHeight = (): number => {
+    const view = textarea.ownerDocument?.defaultView;
+    if (!view?.getComputedStyle) return fallbackLineHeight;
+    // Only px values are meaningful here: `normal` and unitless ratios aren't
+    // line box heights we can multiply.
+    const computed = view.getComputedStyle(textarea).lineHeight;
+    if (!computed || !computed.trim().endsWith("px")) return fallbackLineHeight;
+    const parsed = parseFloat(computed);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : fallbackLineHeight;
+  };
+
+  // Tracks the last maxHeight this module wrote, so a caller's post-construction
+  // override is distinguishable from our own default and always wins.
+  let managedMaxHeight = `${defaultMaxLines * fallbackLineHeight}px`;
+  textarea.style.maxHeight = managedMaxHeight;
   textarea.style.overflowY = "auto";
 
   // Read maxHeight at event time so callers can change it after construction.
   const readMaxHeight = (): number => {
-    const parsed = parseFloat(textarea.style.maxHeight);
-    return Number.isFinite(parsed) && parsed > 0 ? parsed : defaultMaxLines * lineHeight;
+    const current = textarea.style.maxHeight;
+    if (current !== managedMaxHeight) {
+      const overridden = parseFloat(current);
+      if (Number.isFinite(overridden) && overridden > 0) return overridden;
+    }
+    const derived = defaultMaxLines * readLineHeight();
+    managedMaxHeight = `${derived}px`;
+    textarea.style.maxHeight = managedMaxHeight;
+    return derived;
   };
 
   const attachAutoResize = () => {
@@ -142,10 +170,13 @@ export const createSendButton = (config?: AgentWidgetConfig): SendButtonParts =>
       borderWidth: sendButtonConfig.borderWidth || undefined,
       borderStyle: sendButtonConfig.borderWidth ? "solid" : undefined,
       borderColor: sendButtonConfig.borderColor || undefined,
-      paddingLeft: sendButtonConfig.paddingX || undefined,
-      paddingRight: sendButtonConfig.paddingX || undefined,
-      paddingTop: sendButtonConfig.paddingY || undefined,
-      paddingBottom: sendButtonConfig.paddingY || undefined,
+      // Padding is text-mode-only: icon mode is a fixed `size` box with the
+      // glyph drawn at that size, so padding just crushes the SVG (the
+      // always-present defaults squeezed a 40px glyph into 16x20).
+      paddingLeft: useIcon ? "0" : sendButtonConfig.paddingX || undefined,
+      paddingRight: useIcon ? "0" : sendButtonConfig.paddingX || undefined,
+      paddingTop: useIcon ? "0" : sendButtonConfig.paddingY || undefined,
+      paddingBottom: useIcon ? "0" : sendButtonConfig.paddingY || undefined,
     },
   });
 
@@ -154,11 +185,18 @@ export const createSendButton = (config?: AgentWidgetConfig): SendButtonParts =>
   let stopIcon: SVGElement | null = null;
 
   if (useIcon) {
-    const iconSize = parseFloat(buttonSize) || 24;
+    // Default glyph box is half the button, the closest clean ratio to the
+    // pre-fix live rendering (a 40px glyph crushed to a ~16px content box).
+    // Dense glyphs like the default "send" plane fill most of their viewBox;
+    // sparse ones (arrow-up) may want a larger explicit `iconSize`.
+    const iconSize =
+      parseFloat(sendButtonConfig.iconSize ?? "") ||
+      Math.round((parseFloat(buttonSize) || 24) * 0.5);
+    const iconStroke = sendButtonConfig.iconStrokeWidth ?? 2;
     const iconColor = textColor?.trim() || "currentColor";
 
     if (iconName) {
-      sendIcon = renderLucideIcon(iconName, iconSize, iconColor, 2);
+      sendIcon = renderLucideIcon(iconName, iconSize, iconColor, iconStroke);
       if (sendIcon) {
         button.appendChild(sendIcon);
       } else {
@@ -168,7 +206,7 @@ export const createSendButton = (config?: AgentWidgetConfig): SendButtonParts =>
       button.textContent = iconText;
     }
 
-    stopIcon = renderLucideIcon(stopIconName, iconSize, iconColor, 2);
+    stopIcon = renderLucideIcon(stopIconName, iconSize, iconColor, iconStroke);
   } else {
     button.textContent = sendLabel;
   }

package/src/components/messages.ts

@@ -9,7 +9,10 @@ import {
   isAskUserQuestionMessage,
   removeAskUserQuestionSheet,
 } from "./ask-user-question-bubble";
-import { isSuggestRepliesMessage } from "../suggest-replies-tool";
+import {
+  isSuggestRepliesMessage,
+  resolveFollowUpsFeature,
+} from "../suggest-replies-tool";
 
 export const renderMessages = (
   container: HTMLElement,
@@ -43,7 +46,7 @@ export const renderMessages = (
       return;
     } else if (
       isSuggestRepliesMessage(message) &&
-      config?.features?.suggestReplies?.enabled !== false
+      resolveFollowUpsFeature(config).enabled
     ) {
       // No transcript bubble: the chips above the composer are the only UI.
       // When the feature is disabled the message falls through to the generic

package/src/components/panel.ts

@@ -1,6 +1,7 @@
 import { createElement, createNode } from "../utils/dom";
 import { DEFAULT_FLOATING_LAUNCHER_WIDTH } from "../defaults";
-import { AgentWidgetConfig } from "../types";
+import { AgentWidgetConfig, AgentWidgetSuggestionSurface } from "../types";
+import { suggestionSurfaceAttr } from "./suggestions";
 import { positionMap } from "../utils/positioning";
 import { isComposerBarMountMode, isDockedMountMode } from "../utils/dock";
 import { DEFAULT_OVERLAY_Z_INDEX } from "../utils/constants";
@@ -132,6 +133,10 @@ export interface PanelElements {
   container: HTMLElement;
   body: HTMLElement;
   messagesWrapper: HTMLElement;
+  /** Starter prompts rendered inside the welcome card. */
+  starterSuggestions: HTMLElement;
+  /** Follow-up suggestions rendered after the transcript. */
+  transcriptSuggestions: HTMLElement;
   /**
    * Absolute-positioned slot above the composer footer. Interactive sheets
    * (e.g. the answer-pill sheet for the ask_user_question tool) mount here
@@ -178,6 +183,17 @@ export interface PanelElements {
   peekTextNode?: HTMLElement;
 }
 
+const createSuggestionHost = (
+  surface: AgentWidgetSuggestionSurface
+): HTMLElement => {
+  const host = createNode("div", {
+    className: "persona-suggestions",
+    attrs: { "data-persona-suggestions": suggestionSurfaceAttr(surface) },
+  });
+  host.hidden = true;
+  return host;
+};
+
 /**
  * Composer-bar panel: minimal close-only header (× in the top-right of the
  * chat chrome). The pill (`footer`) and `peekBanner` are NOT children of
@@ -276,6 +292,7 @@ const buildComposerBarPanel = (
       config?.copy?.welcomeSubtitle ??
       "Ask anything about your account or products.",
   });
+  const starterSuggestions = createSuggestionHost("starter");
   const introCard = createNode(
     "div",
     {
@@ -287,13 +304,15 @@ const buildComposerBarPanel = (
       },
     },
     introTitle,
-    introSubtitle
+    introSubtitle,
+    starterSuggestions
   );
 
   const messagesWrapper = createElement(
     "div",
     "persona-flex persona-flex-col persona-gap-3"
   );
+  const transcriptSuggestions = createSuggestionHost("followUp");
   const contentMaxWidth = config?.layout?.contentMaxWidth;
   if (contentMaxWidth) {
     messagesWrapper.style.maxWidth = contentMaxWidth;
@@ -308,7 +327,7 @@ const buildComposerBarPanel = (
     body.classList.remove("persona-gap-6");
     body.classList.add("persona-gap-3");
   }
-  body.append(introCard, messagesWrapper);
+  body.append(introCard, messagesWrapper, transcriptSuggestions);
 
   // Composer overlay (interactive sheets like ask_user_question slide up here).
   // Anchored to the bottom of the container (which is `position: relative`),
@@ -338,6 +357,8 @@ const buildComposerBarPanel = (
     container,
     body,
     messagesWrapper,
+    starterSuggestions,
+    transcriptSuggestions,
     composerOverlay,
     suggestions: composerElements.suggestions,
     textarea: composerElements.textarea,
@@ -413,6 +434,7 @@ export const buildPanel = (config?: AgentWidgetConfig, showClose = true): PanelE
       config?.copy?.welcomeSubtitle ??
       "Ask anything about your account or products.",
   });
+  const starterSuggestions = createSuggestionHost("starter");
   // Background and box-shadow flow through the themable `components.introCard`
   // tokens (--persona-intro-card-bg / --persona-intro-card-shadow); both
   // default to flat (transparent / none). Docked mode always stays flat,
@@ -430,13 +452,15 @@ export const buildPanel = (config?: AgentWidgetConfig, showClose = true): PanelE
       },
     },
     introTitle,
-    introSubtitle
+    introSubtitle,
+    starterSuggestions
   );
 
   const messagesWrapper = createElement(
     "div",
     "persona-flex persona-flex-col persona-gap-3"
   );
+  const transcriptSuggestions = createSuggestionHost("followUp");
 
   const contentMaxWidth = config?.layout?.contentMaxWidth;
   if (contentMaxWidth) {
@@ -452,7 +476,7 @@ export const buildPanel = (config?: AgentWidgetConfig, showClose = true): PanelE
     body.classList.remove("persona-gap-6");
     body.classList.add("persona-gap-3");
   }
-  body.append(introCard, messagesWrapper);
+  body.append(introCard, messagesWrapper, transcriptSuggestions);
 
   // composer-bar mode early-returned above with its own pill builder; this
   // path always uses the standard column-stacked composer card.
@@ -500,6 +524,8 @@ export const buildPanel = (config?: AgentWidgetConfig, showClose = true): PanelE
     container,
     body,
     messagesWrapper,
+    starterSuggestions,
+    transcriptSuggestions,
     composerOverlay,
     suggestions: composerElements.suggestions,
     textarea: composerElements.textarea,

package/src/components/pill-composer-builder.test.ts

@@ -79,6 +79,24 @@ describe("buildPillComposer (single-row pill composer)", () => {
     expect(formChildren[2]).toBe(elements.rightActions);
   });
 
+  it("keeps its 100px max-height cap, even under a themed line height", () => {
+    const elements = buildPillComposer({ config: { apiUrl: "/api" } });
+    expect(elements.textarea.style.maxHeight).toBe("100px");
+
+    // A themed line height must not re-derive the cap: the pill's explicit
+    // post-construction override wins over the 3-line default.
+    elements.textarea.style.lineHeight = "24px";
+    document.body.appendChild(elements.textarea);
+    Object.defineProperty(elements.textarea, "scrollHeight", {
+      configurable: true,
+      value: 10000,
+    });
+    elements.textarea.dispatchEvent(new Event("input"));
+    expect(elements.textarea.style.maxHeight).toBe("100px");
+    expect(elements.textarea.style.height).toBe("100px");
+    document.body.removeChild(elements.textarea);
+  });
+
   it("returns null for optional controls when disabled (matching ComposerElements contract)", () => {
     const elements = buildPillComposer({ config: { apiUrl: "/api" } });
     expect(elements.attachmentButton).toBeNull();

package/src/components/suggestions.test.ts

@@ -0,0 +1,233 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { createSuggestions } from "./suggestions";
+import type { AgentWidgetSession } from "../session";
+
+const makeSession = (): AgentWidgetSession =>
+  ({
+    isStreaming: () => false,
+    getMessages: () => [],
+    sendMessage: () => {},
+  }) as unknown as AgentWidgetSession;
+
+const setup = () => {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const textarea = document.createElement("textarea");
+  document.body.appendChild(textarea);
+  return {
+    container,
+    textarea,
+    manager: createSuggestions(container),
+    session: makeSession(),
+  };
+};
+
+const withAnimate = (): ReturnType<typeof vi.fn> => {
+  const animate = vi.fn(() => ({}));
+  Object.defineProperty(Element.prototype, "animate", {
+    value: animate,
+    configurable: true,
+    writable: true,
+  });
+  return animate;
+};
+
+afterEach(() => {
+  Reflect.deleteProperty(Element.prototype, "animate");
+  vi.unstubAllGlobals();
+  document.body.replaceChildren();
+});
+
+describe("suggestion entrance animation", () => {
+  it("animates each item once for a newly shown set", () => {
+    const animate = withAnimate();
+    const { manager, session, textarea } = setup();
+
+    manager.render(["One", "Two"], session, textarea, [], undefined, {
+      variant: "card",
+    });
+
+    expect(animate).toHaveBeenCalledTimes(2);
+    const [, secondOptions] = animate.mock.calls[1] as [
+      unknown,
+      { delay: number; duration: number; fill: string },
+    ];
+    expect(secondOptions.delay).toBe(60);
+    expect(secondOptions.duration).toBe(250);
+    expect(secondOptions.fill).toBe("backwards");
+  });
+
+  it("does not re-animate when render repeats the same items", () => {
+    const animate = withAnimate();
+    const { manager, session, textarea } = setup();
+    const items = ["One", "Two"];
+
+    manager.render(items, session, textarea, [], undefined, {
+      variant: "card",
+    });
+    manager.render(items, session, textarea, [], undefined, {
+      variant: "card",
+    });
+
+    expect(animate).toHaveBeenCalledTimes(2);
+  });
+
+  it("animates again once the item set changes", () => {
+    const animate = withAnimate();
+    const { manager, session, textarea } = setup();
+
+    manager.render(["One"], session, textarea, [], undefined, {
+      variant: "card",
+    });
+    manager.render(["Two"], session, textarea, [], undefined, {
+      variant: "card",
+    });
+
+    expect(animate).toHaveBeenCalledTimes(2);
+  });
+
+  it("skips the animation under prefers-reduced-motion", () => {
+    const animate = withAnimate();
+    vi.stubGlobal(
+      "matchMedia",
+      vi.fn(() => ({ matches: true }))
+    );
+    const { manager, session, textarea } = setup();
+
+    manager.render(["One", "Two"], session, textarea, [], undefined, {
+      variant: "card",
+    });
+
+    expect(animate).not.toHaveBeenCalled();
+  });
+
+  it("still renders when the platform has no Web Animations API", () => {
+    const { container, manager, session, textarea } = setup();
+
+    expect(typeof Element.prototype.animate).toBe("undefined");
+    expect(() =>
+      manager.render(["One", "Two"], session, textarea, [], undefined, {
+        variant: "card",
+      })
+    ).not.toThrow();
+    expect(container.querySelectorAll(".persona-suggestion")).toHaveLength(2);
+  });
+});
+
+describe("per-item icon color", () => {
+  const iconOf = (container: HTMLElement): SVGElement =>
+    container.querySelector(".persona-suggestion__icon") as SVGElement;
+
+  it("tints only the icon element", () => {
+    const { manager, session, textarea, container } = setup();
+
+    manager.render(
+      [{ label: "Compare plans", icon: "dollar-sign", iconColor: "#16a34a" }],
+      session,
+      textarea,
+      [],
+      undefined,
+      { variant: "card" }
+    );
+
+    const button = container.querySelector("button") as HTMLButtonElement;
+    expect(iconOf(container).style.color).toBe("rgb(22, 163, 74)");
+    expect(button.style.color).toBe("");
+    expect(button.style.borderColor).toBe("");
+    expect(button.style.background).toBe("");
+    expect(
+      (container.querySelector(".persona-suggestion__label") as HTMLElement)
+        .style.color
+    ).toBe("");
+  });
+
+  it("wins over the emphasis-primary icon tint without recoloring the button", () => {
+    const { manager, session, textarea, container } = setup();
+
+    manager.render(
+      [
+        {
+          label: "Compare plans",
+          icon: "dollar-sign",
+          iconColor: "#16a34a",
+          emphasis: "primary",
+        },
+      ],
+      session,
+      textarea,
+      [],
+      undefined,
+      { variant: "card" }
+    );
+
+    const button = container.querySelector("button") as HTMLButtonElement;
+    expect(button.dataset.emphasis).toBe("primary");
+    expect(iconOf(container).style.color).toBe("rgb(22, 163, 74)");
+  });
+
+  it("leaves the icon in currentColor when iconColor is absent", () => {
+    const { manager, session, textarea, container } = setup();
+
+    manager.render(
+      [{ label: "Compare plans", icon: "dollar-sign" }],
+      session,
+      textarea,
+      [],
+      undefined,
+      { variant: "card" }
+    );
+
+    const icon = iconOf(container);
+    expect(icon.style.color).toBe("");
+    expect(icon.getAttribute("stroke")).toBe("currentColor");
+  });
+
+  it("leaves string shorthand items unaffected", () => {
+    const { manager, session, textarea, container } = setup();
+
+    manager.render(["Compare plans"], session, textarea, [], undefined, {
+      variant: "card",
+    });
+
+    expect(container.querySelector(".persona-suggestion__icon")).toBeNull();
+    const button = container.querySelector("button") as HTMLButtonElement;
+    expect(button.style.color).toBe("");
+  });
+});
+
+describe("legacy suggestionChipsConfig scoping", () => {
+  const chipsConfig = {
+    fontFamily: "sans-serif" as const,
+    fontWeight: "500",
+    paddingX: "12px",
+    paddingY: "6px",
+  };
+
+  it("applies inline chip styles to the chip variant", () => {
+    const { manager, session, textarea, container } = setup();
+
+    manager.render(["One"], session, textarea, [], chipsConfig, {
+      variant: "chip",
+    });
+
+    const button = container.querySelector("button") as HTMLButtonElement;
+    expect(button.style.paddingLeft).toBe("12px");
+    expect(button.style.paddingTop).toBe("6px");
+    expect(button.style.fontWeight).toBe("500");
+  });
+
+  it("does not let chip config override card and list padding tokens", () => {
+    const { manager, session, textarea, container } = setup();
+
+    for (const variant of ["card", "list"] as const) {
+      manager.render(["One"], session, textarea, [], chipsConfig, { variant });
+      const button = container.querySelector("button") as HTMLButtonElement;
+      expect(button.style.paddingLeft).toBe("");
+      expect(button.style.paddingTop).toBe("");
+      expect(button.style.fontFamily).toBe("");
+    }
+  });
+});