@runtypelabs/persona 3.34.1 → 3.36.0

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

@@ -70,6 +70,60 @@ describe("createSendButton", () => {
     expect(send.button.textContent).toBe("Send");
   });
 
+  it("applies configured icon-button styles and skips the primary-bg fallback class", () => {
+    const send = createSendButton({
+      ...baseConfig,
+      sendButton: {
+        useIcon: true,
+        iconName: "send",
+        size: "48px",
+        backgroundColor: "rgb(1, 2, 3)",
+        textColor: "rgb(4, 5, 6)",
+        borderWidth: "2px",
+        borderColor: "rgb(7, 8, 9)",
+        paddingX: "6px",
+        paddingY: "4px",
+      },
+    });
+    const s = send.button.style;
+    expect(s.width).toBe("48px");
+    expect(s.height).toBe("48px");
+    expect(s.minWidth).toBe("48px");
+    expect(s.minHeight).toBe("48px");
+    expect(s.color).toBe("rgb(4, 5, 6)");
+    expect(s.backgroundColor).toBe("rgb(1, 2, 3)");
+    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");
+    // An explicit backgroundColor means the fallback class is not added.
+    expect(send.button.classList.contains("persona-bg-persona-primary")).toBe(false);
+  });
+
+  it("toggles the white-text fallback class based on textColor (text mode)", () => {
+    const plain = createSendButton(baseConfig);
+    expect(plain.button.classList.contains("persona-text-white")).toBe(true);
+    expect(plain.button.style.color).toBe("");
+
+    const colored = createSendButton({
+      ...baseConfig,
+      sendButton: { textColor: "rgb(4, 5, 6)" },
+    });
+    expect(colored.button.classList.contains("persona-text-white")).toBe(false);
+    expect(colored.button.style.color).toBe("rgb(4, 5, 6)");
+  });
+
+  it("adds the primary-bg fallback class in icon mode without an explicit background", () => {
+    const send = createSendButton({
+      ...baseConfig,
+      sendButton: { useIcon: true, iconName: "send" },
+    });
+    expect(send.button.classList.contains("persona-bg-persona-primary")).toBe(true);
+  });
+
   describe("icon mode", () => {
     const iconConfig: AgentWidgetConfig = {
       ...baseConfig,

package/src/components/composer-parts.ts

@@ -1,4 +1,4 @@
-import { createElement } from "../utils/dom";
+import { createElement, createNode, cx } from "../utils/dom";
 import { renderLucideIcon } from "../utils/icons";
 import { AgentWidgetConfig } from "../types";
 import { ALL_SUPPORTED_MIME_TYPES } from "../utils/content";
@@ -6,7 +6,7 @@ import { ALL_SUPPORTED_MIME_TYPES } from "../utils/content";
 /**
  * Low-level composer control factories. Both `buildComposer` (full,
  * column-stacked card) and `buildPillComposer` (single-row pill) consume
- * these — the only meaningful difference between the two composers is the
+ * these: the only meaningful difference between the two composers is the
  * layout shell + className. No DOM assembly here; each factory returns the
  * element plus any handles the caller needs.
  *
@@ -61,7 +61,7 @@ export const createComposerTextarea = (config?: AgentWidgetConfig): ComposerText
     });
   };
 
-  // Strip browser default focus rings — the composer wraps the textarea in
+  // Strip browser default focus rings: the composer wraps the textarea in
   // its own surface, so the textarea itself must be visually transparent.
   textarea.style.border = "none";
   textarea.style.outline = "none";
@@ -112,36 +112,47 @@ export const createSendButton = (config?: AgentWidgetConfig): SendButtonParts =>
 
   const wrapper = createElement("div", "persona-send-button-wrapper");
 
-  const button = createElement(
-    "button",
-    useIcon
-      ? "persona-rounded-button persona-flex persona-items-center persona-justify-center disabled:persona-opacity-50 persona-cursor-pointer"
-      : "persona-rounded-button persona-bg-persona-accent persona-px-4 persona-py-2 persona-text-sm persona-font-semibold disabled:persona-opacity-50 persona-cursor-pointer"
-  ) as HTMLButtonElement;
-
-  button.type = "submit";
-  button.setAttribute("data-persona-composer-submit", "");
+  const button = createNode("button", {
+    className: cx(
+      "persona-rounded-button disabled:persona-opacity-50 persona-cursor-pointer",
+      useIcon
+        ? "persona-flex persona-items-center persona-justify-center"
+        : "persona-bg-persona-accent persona-px-4 persona-py-2 persona-text-sm persona-font-semibold",
+      // Icon mode without an explicit background falls back to the primary bg
+      // class; text mode without an explicit color falls back to white text.
+      useIcon && !backgroundColor && "persona-bg-persona-primary",
+      !useIcon && !textColor && "persona-text-white"
+    ),
+    attrs: { type: "submit", "data-persona-composer-submit": "" },
+    style: {
+      // Sizing is icon-mode-only (text mode is sized by its padding classes).
+      width: useIcon ? buttonSize : undefined,
+      height: useIcon ? buttonSize : undefined,
+      minWidth: useIcon ? buttonSize : undefined,
+      minHeight: useIcon ? buttonSize : undefined,
+      fontSize: useIcon ? "18px" : undefined,
+      lineHeight: useIcon ? "1" : undefined,
+      // Icon mode always sets a color; text mode only when textColor is given.
+      color: useIcon
+        ? textColor || "var(--persona-button-primary-fg, #ffffff)"
+        : textColor || undefined,
+      // backgroundColor is honored in icon mode only.
+      backgroundColor: useIcon ? backgroundColor || undefined : undefined,
+      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,
+    },
+  });
 
   // Both icons are pre-rendered so setMode can swap cheaply.
   let sendIcon: SVGElement | null = null;
   let stopIcon: SVGElement | null = null;
 
   if (useIcon) {
-    button.style.width = buttonSize;
-    button.style.height = buttonSize;
-    button.style.minWidth = buttonSize;
-    button.style.minHeight = buttonSize;
-    button.style.fontSize = "18px";
-    button.style.lineHeight = "1";
-
-    button.innerHTML = "";
-
-    if (textColor) {
-      button.style.color = textColor;
-    } else {
-      button.style.color = "var(--persona-button-primary-fg, #ffffff)";
-    }
-
     const iconSize = parseFloat(buttonSize) || 24;
     const iconColor = textColor?.trim() || "currentColor";
 
@@ -157,42 +168,8 @@ export const createSendButton = (config?: AgentWidgetConfig): SendButtonParts =>
     }
 
     stopIcon = renderLucideIcon(stopIconName, iconSize, iconColor, 2);
-
-    if (backgroundColor) {
-      button.style.backgroundColor = backgroundColor;
-    } else {
-      button.classList.add("persona-bg-persona-primary");
-    }
   } else {
     button.textContent = sendLabel;
-    if (textColor) {
-      button.style.color = textColor;
-    } else {
-      button.classList.add("persona-text-white");
-    }
-  }
-
-  if (sendButtonConfig.borderWidth) {
-    button.style.borderWidth = sendButtonConfig.borderWidth;
-    button.style.borderStyle = "solid";
-  }
-  if (sendButtonConfig.borderColor) {
-    button.style.borderColor = sendButtonConfig.borderColor;
-  }
-
-  if (sendButtonConfig.paddingX) {
-    button.style.paddingLeft = sendButtonConfig.paddingX;
-    button.style.paddingRight = sendButtonConfig.paddingX;
-  } else {
-    button.style.paddingLeft = "";
-    button.style.paddingRight = "";
-  }
-  if (sendButtonConfig.paddingY) {
-    button.style.paddingTop = sendButtonConfig.paddingY;
-    button.style.paddingBottom = sendButtonConfig.paddingY;
-  } else {
-    button.style.paddingTop = "";
-    button.style.paddingBottom = "";
   }
 
   let tooltip: HTMLElement | null = null;
@@ -218,7 +195,7 @@ export const createSendButton = (config?: AgentWidgetConfig): SendButtonParts =>
     if (useIcon) {
       if (sendIcon && stopIcon) {
         const next = mode === "stop" ? stopIcon : sendIcon;
-        // Replace whatever icon is currently mounted — the button only ever
+        // Replace whatever icon is currently mounted: the button only ever
         // holds the single active icon. We use replaceChildren(next) rather
         // than replaceChild(next, prev) against a captured `prev` reference:
         // an external re-render/morph can swap the live icon child out from
@@ -259,36 +236,40 @@ export const createMicButton = (config?: AgentWidgetConfig): MicButtonParts | nu
   if (!hasVoiceInput) return null;
 
   const buttonSize = config?.sendButton?.size ?? "40px";
-  const wrapper = createElement("div", "persona-send-button-wrapper");
-  const button = createElement(
-    "button",
-    "persona-rounded-button persona-flex persona-items-center persona-justify-center disabled:persona-opacity-50 persona-cursor-pointer"
-  ) as HTMLButtonElement;
-
-  button.type = "button";
-  button.setAttribute("data-persona-composer-mic", "");
-  button.setAttribute("aria-label", "Start voice recognition");
-
   const micIconName = voiceRecognitionConfig.iconName ?? "mic";
   const micIconSize = voiceRecognitionConfig.iconSize ?? buttonSize;
   const micIconSizeNum = parseFloat(micIconSize) || 24;
-
   const micBackgroundColor =
     voiceRecognitionConfig.backgroundColor ?? config?.sendButton?.backgroundColor;
   const micIconColor = voiceRecognitionConfig.iconColor ?? config?.sendButton?.textColor;
 
-  button.style.width = micIconSize;
-  button.style.height = micIconSize;
-  button.style.minWidth = micIconSize;
-  button.style.minHeight = micIconSize;
-  button.style.fontSize = "18px";
-  button.style.lineHeight = "1";
-
-  if (micIconColor) {
-    button.style.color = micIconColor;
-  } else {
-    button.style.color = "var(--persona-text, #111827)";
-  }
+  const wrapper = createElement("div", "persona-send-button-wrapper");
+  const button = createNode("button", {
+    className:
+      "persona-rounded-button persona-flex persona-items-center persona-justify-center disabled:persona-opacity-50 persona-cursor-pointer",
+    attrs: {
+      type: "button",
+      "data-persona-composer-mic": "",
+      "aria-label": "Start voice recognition",
+    },
+    style: {
+      width: micIconSize,
+      height: micIconSize,
+      minWidth: micIconSize,
+      minHeight: micIconSize,
+      fontSize: "18px",
+      lineHeight: "1",
+      color: micIconColor || "var(--persona-text, #111827)",
+      backgroundColor: micBackgroundColor || undefined,
+      borderWidth: voiceRecognitionConfig.borderWidth || undefined,
+      borderStyle: voiceRecognitionConfig.borderWidth ? "solid" : undefined,
+      borderColor: voiceRecognitionConfig.borderColor || undefined,
+      paddingLeft: voiceRecognitionConfig.paddingX || undefined,
+      paddingRight: voiceRecognitionConfig.paddingX || undefined,
+      paddingTop: voiceRecognitionConfig.paddingY || undefined,
+      paddingBottom: voiceRecognitionConfig.paddingY || undefined,
+    },
+  });
 
   const iconColorValue = micIconColor || "currentColor";
   const micIconSvg = renderLucideIcon(micIconName, micIconSizeNum, iconColorValue, 1.5);
@@ -298,27 +279,6 @@ export const createMicButton = (config?: AgentWidgetConfig): MicButtonParts | nu
     button.textContent = "🎤";
   }
 
-  if (micBackgroundColor) {
-    button.style.backgroundColor = micBackgroundColor;
-  }
-
-  if (voiceRecognitionConfig.borderWidth) {
-    button.style.borderWidth = voiceRecognitionConfig.borderWidth;
-    button.style.borderStyle = "solid";
-  }
-  if (voiceRecognitionConfig.borderColor) {
-    button.style.borderColor = voiceRecognitionConfig.borderColor;
-  }
-
-  if (voiceRecognitionConfig.paddingX) {
-    button.style.paddingLeft = voiceRecognitionConfig.paddingX;
-    button.style.paddingRight = voiceRecognitionConfig.paddingX;
-  }
-  if (voiceRecognitionConfig.paddingY) {
-    button.style.paddingTop = voiceRecognitionConfig.paddingY;
-    button.style.paddingBottom = voiceRecognitionConfig.paddingY;
-  }
-
   wrapper.appendChild(button);
 
   const micTooltipText = voiceRecognitionConfig.tooltipText ?? "Start voice recognition";
@@ -355,39 +315,45 @@ export const createAttachmentControls = (config?: AgentWidgetConfig): Attachment
     "div",
     "persona-attachment-previews persona-flex persona-flex-wrap persona-gap-2 persona-mb-2"
   );
+  previewsContainer.setAttribute("data-persona-composer-attachment-previews", "");
   previewsContainer.style.display = "none";
 
   const input = createElement("input") as HTMLInputElement;
   input.type = "file";
+  input.setAttribute("data-persona-composer-attachment-input", "");
   input.accept = (attachmentsConfig.allowedTypes ?? ALL_SUPPORTED_MIME_TYPES).join(",");
   input.multiple = (attachmentsConfig.maxFiles ?? 4) > 1;
   input.style.display = "none";
   input.setAttribute("aria-label", "Attach files");
 
-  const wrapper = createElement("div", "persona-send-button-wrapper");
-  const button = createElement(
-    "button",
-    "persona-rounded-button persona-flex persona-items-center persona-justify-center disabled:persona-opacity-50 persona-cursor-pointer persona-attachment-button"
-  ) as HTMLButtonElement;
-  button.type = "button";
-  button.setAttribute("aria-label", attachmentsConfig.buttonTooltipText ?? "Attach file");
-
   const attachIconName = attachmentsConfig.buttonIconName ?? "paperclip";
   const attachIconSize = buttonSize;
   const buttonSizeNum = parseFloat(attachIconSize) || 40;
   const attachIconSizeNum = Math.round(buttonSizeNum * 0.6);
 
-  button.style.width = attachIconSize;
-  button.style.height = attachIconSize;
-  button.style.minWidth = attachIconSize;
-  button.style.minHeight = attachIconSize;
-  button.style.fontSize = "18px";
-  button.style.lineHeight = "1";
-  button.style.backgroundColor = "transparent";
-  button.style.color = "var(--persona-primary, #111827)";
-  button.style.border = "none";
-  button.style.borderRadius = "6px";
-  button.style.transition = "background-color 0.15s ease";
+  const wrapper = createElement("div", "persona-send-button-wrapper");
+  const button = createNode("button", {
+    className:
+      "persona-rounded-button persona-flex persona-items-center persona-justify-center disabled:persona-opacity-50 persona-cursor-pointer persona-attachment-button",
+    attrs: {
+      type: "button",
+      "data-persona-composer-attachment-button": "",
+      "aria-label": attachmentsConfig.buttonTooltipText ?? "Attach file",
+    },
+    style: {
+      width: attachIconSize,
+      height: attachIconSize,
+      minWidth: attachIconSize,
+      minHeight: attachIconSize,
+      fontSize: "18px",
+      lineHeight: "1",
+      backgroundColor: "transparent",
+      color: "var(--persona-primary, #111827)",
+      border: "none",
+      borderRadius: "6px",
+      transition: "background-color 0.15s ease",
+    },
+  });
 
   button.addEventListener("mouseenter", () => {
     button.style.backgroundColor = "var(--persona-palette-colors-black-alpha-50, rgba(0, 0, 0, 0.05))";
@@ -452,4 +418,7 @@ export const createStatusText = (config?: AgentWidgetConfig): HTMLElement => {
 };
 
 export const createSuggestionsRow = (): HTMLElement =>
-  createElement("div", "persona-mb-3 persona-flex persona-flex-wrap persona-gap-2");
+  createNode("div", {
+    className: "persona-mb-3 persona-flex persona-flex-wrap persona-gap-2",
+    attrs: { "data-persona-composer-suggestions": "" },
+  });

package/src/components/demo-carousel.ts

@@ -612,7 +612,7 @@ export function createDemoCarousel(
         body.classList.remove("theme-dark");
       }
     } catch {
-      // Cross-origin iframe — silently ignore
+      // Cross-origin iframe: silently ignore
     }
   }
 

package/src/components/event-stream-view.test.ts

@@ -815,7 +815,7 @@ describe("createEventStreamView", () => {
       const buffer = createMockBuffer(events);
       const { element, update } = createEventStreamView({ buffer: buffer as any });
 
-      // Initial render (Path A — first render)
+      // Initial render (Path A: first render)
       update();
 
       const eventsList = getEventsList(element);
@@ -825,7 +825,7 @@ describe("createEventStreamView", () => {
       const row1Ref = eventsList.children[0];
       const row2Ref = eventsList.children[1];
 
-      // Add a new event and update (Path C — incremental append)
+      // Add a new event and update (Path C: incremental append)
       vi.advanceTimersByTime(150);
       buffer.push(makeEvent("step_chunk", 3));
       update();
@@ -1173,7 +1173,7 @@ describe("createEventStreamView", () => {
       // Wait past the throttle interval
       vi.advanceTimersByTime(150);
 
-      // Add event and update — should render immediately since 150ms > 100ms
+      // Add event and update: should render immediately since 150ms > 100ms
       buffer.push(makeEvent("flow_complete", 2));
       update();
 
@@ -1223,7 +1223,7 @@ describe("createEventStreamView", () => {
       const filterSelect = getFilterSelect(element);
       const copyAllBtn = getCopyAllBtn(element);
 
-      // Immediately change filter — this should bypass throttle (uses updateNow internally)
+      // Immediately change filter: this should bypass throttle (uses updateNow internally)
       filterSelect.value = "step_chunk";
       filterSelect.__fireEvent("change");
 
@@ -1237,17 +1237,17 @@ describe("createEventStreamView", () => {
       const buffer = createMockBuffer([makeEvent("step_chunk", 1)]);
       const { update, destroy } = createEventStreamView({ buffer: buffer as any });
 
-      // First update — immediate
+      // First update: immediate
       update();
 
       // Schedule a throttled update
       buffer.push(makeEvent("step_chunk", 2));
       update();
 
-      // Destroy before rAF fires — should not throw
+      // Destroy before rAF fires: should not throw
       expect(() => destroy()).not.toThrow();
 
-      // Advancing timers to flush rAF — should not throw even though view is destroyed
+      // Advancing timers to flush rAF: should not throw even though view is destroyed
       vi.advanceTimersByTime(20);
       vi.useRealTimers();
     });

package/src/components/event-stream-view.ts

@@ -568,7 +568,7 @@ export function createEventStreamView(
         );
         throughputValueEl.textContent = "-- tok/s";
 
-        // Custom hover tooltip — appears instantly (no native title delay).
+        // Custom hover tooltip: appears instantly (no native title delay).
         // Appended to the (non-clipping) toolbar wrapper rather than the header
         // bar, which has overflow-hidden and would clip a dropdown. Position is
         // measured on hover so it sits just under the throughput group.
@@ -899,7 +899,7 @@ export function createEventStreamView(
         expandedSet.add(eventId);
       }
       dirtyExpandId = eventId;
-      // Save scroll position — user-initiated expand/collapse should not auto-scroll
+      // Save scroll position: user-initiated expand/collapse should not auto-scroll
       const savedScrollTop = eventsList.scrollTop;
       const wasAutoFollowing = autoFollow.isFollowing();
       suppressScrollHandler = true;
@@ -993,7 +993,7 @@ export function createEventStreamView(
       const isFirstRender = rowElements.size === 0 && filteredEvents.length > 0;
 
       if (filterChanged || isFirstRender || filteredEvents.length === 0) {
-        // Path A — Full rebuild (filter/search changed, first render, or empty list)
+        // Path A: Full rebuild (filter/search changed, first render, or empty list)
         eventsList.innerHTML = "";
         rowElements.clear();
         const fragment = document.createDocumentFragment();
@@ -1016,7 +1016,7 @@ export function createEventStreamView(
         lastRenderedSearch = searchTerm;
         dirtyExpandId = null;
       } else {
-        // Path B — Single row replace (expand/collapse)
+        // Path B: Single row replace (expand/collapse)
         if (dirtyExpandId !== null) {
           const oldRow = rowElements.get(dirtyExpandId);
           if (oldRow && oldRow.parentNode === eventsList) {
@@ -1043,7 +1043,7 @@ export function createEventStreamView(
           dirtyExpandId = null;
         }
 
-        // Path C — Incremental append (default streaming path)
+        // Path C: Incremental append (default streaming path)
         // Remove evicted rows
         const activeIds = new Set(filteredEvents.map((e) => e.id));
         for (const [id, el] of rowElements) {

package/src/components/header-builder.ts

@@ -1,4 +1,4 @@
-import { createElement } from "../utils/dom";
+import { createElement, createNode } from "../utils/dom";
 import { renderLucideIcon } from "../utils/icons";
 import { AgentWidgetConfig } from "../types";
 import { createCloseButton, createClearChatButton } from "./header-parts";
@@ -38,15 +38,18 @@ export interface HeaderBuildContext {
 export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
   const { config, showClose = true } = context;
 
-  const header = createElement(
-    "div",
-    "persona-widget-header persona-flex persona-items-center persona-gap-3 persona-px-6 persona-py-5"
-  );
-  header.setAttribute("data-persona-theme-zone", "header");
-  header.style.backgroundColor = 'var(--persona-header-bg, var(--persona-surface, #ffffff))';
-  header.style.borderBottomColor = 'var(--persona-header-border, var(--persona-divider, #f1f5f9))';
-  header.style.boxShadow = 'var(--persona-header-shadow, none)';
-  header.style.borderBottom = 'var(--persona-header-border-bottom, 1px solid var(--persona-header-border, var(--persona-divider, #f1f5f9)))';
+  const header = createNode("div", {
+    className:
+      "persona-widget-header persona-flex persona-items-center persona-gap-3 persona-px-6 persona-py-5",
+    attrs: { "data-persona-theme-zone": "header" },
+    style: {
+      backgroundColor: "var(--persona-header-bg, var(--persona-surface, #ffffff))",
+      borderBottomColor: "var(--persona-header-border, var(--persona-divider, #f1f5f9))",
+      boxShadow: "var(--persona-header-shadow, none)",
+      borderBottom:
+        "var(--persona-header-border-bottom, 1px solid var(--persona-header-border, var(--persona-divider, #f1f5f9)))",
+    },
+  });
 
   const launcher = config?.launcher ?? {};
   const headerIconSize = launcher.headerIconSize ?? "48px";
@@ -54,16 +57,16 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
   const headerIconHidden = launcher.headerIconHidden ?? false;
   const headerIconName = launcher.headerIconName;
 
-  const iconHolder = createElement(
-    "div",
-    "persona-flex persona-items-center persona-justify-center persona-rounded-xl persona-text-xl"
-  );
-  iconHolder.style.height = headerIconSize;
-  iconHolder.style.width = headerIconSize;
-  iconHolder.style.backgroundColor =
-    "var(--persona-header-icon-bg, var(--persona-primary, #0f0f0f))";
-  iconHolder.style.color =
-    "var(--persona-header-icon-fg, var(--persona-text-inverse, #ffffff))";
+  const iconHolder = createNode("div", {
+    className:
+      "persona-flex persona-items-center persona-justify-center persona-rounded-xl persona-text-xl",
+    style: {
+      height: headerIconSize,
+      width: headerIconSize,
+      backgroundColor: "var(--persona-header-icon-bg, var(--persona-primary, #0f0f0f))",
+      color: "var(--persona-header-icon-fg, var(--persona-text-inverse, #ffffff))",
+    },
+  });
 
   // Render icon based on priority: Lucide icon > iconUrl > agentIconText
   if (!headerIconHidden) {
@@ -93,13 +96,16 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
   }
 
   const headerCopy = createElement("div", "persona-flex persona-flex-col persona-flex-1 persona-min-w-0");
-  const title = createElement("span", "persona-text-base persona-font-semibold");
-  title.style.color = HEADER_THEME_CSS.titleColor;
-  title.textContent = config?.launcher?.title ?? "Chat Assistant";
-  const subtitle = createElement("span", "persona-text-xs");
-  subtitle.style.color = HEADER_THEME_CSS.subtitleColor;
-  subtitle.textContent =
-    config?.launcher?.subtitle ?? "Here to help you get answers fast";
+  const title = createNode("span", {
+    className: "persona-text-base persona-font-semibold",
+    text: config?.launcher?.title ?? "Chat Assistant",
+    style: { color: HEADER_THEME_CSS.titleColor },
+  });
+  const subtitle = createNode("span", {
+    className: "persona-text-xs",
+    text: config?.launcher?.subtitle ?? "Here to help you get answers fast",
+    style: { color: HEADER_THEME_CSS.subtitleColor },
+  });
 
   headerCopy.append(title, subtitle);
 

package/src/components/header-layouts.ts

@@ -121,7 +121,7 @@ export const buildMinimalHeader: HeaderLayoutRenderer = (context) => {
   header.style.borderBottom =
     'var(--persona-header-border-bottom, 1px solid var(--persona-header-border, var(--persona-divider, #f1f5f9)))';
 
-  // Build the title area — either a combo button (titleMenu) or standard title row
+  // Build the title area: either a combo button (titleMenu) or standard title row
   const titleMenuConfig = layoutHeaderConfig?.titleMenu;
   let titleRow: HTMLElement;
   let headerTitle: HTMLElement;