@runtypelabs/persona 2.3.0 → 3.0.0

package/src/utils/dropdown.ts

@@ -0,0 +1,178 @@
+import { createElement } from "./dom";
+import { renderLucideIcon } from "./icons";
+
+export interface DropdownMenuItem {
+  id: string;
+  label: string;
+  /** Lucide icon name to show before the label. */
+  icon?: string;
+  /** When true, item text is styled in a destructive/danger color. */
+  destructive?: boolean;
+  /** When true, a visual divider is inserted before this item. */
+  dividerBefore?: boolean;
+}
+
+export interface CreateDropdownOptions {
+  /** Menu items to render. */
+  items: DropdownMenuItem[];
+  /** Called when a menu item is selected. */
+  onSelect: (id: string) => void;
+  /** Anchor element used for positioning. When `portal` is not set the menu is appended inside this element (which must have position: relative). */
+  anchor: HTMLElement;
+  /** Alignment of the menu relative to the anchor. Default: 'bottom-left'. */
+  position?: 'bottom-left' | 'bottom-right';
+  /**
+   * Portal target element. When set, the menu is appended to this element
+   * and uses fixed positioning calculated from the anchor's bounding rect.
+   * Use this to escape `overflow: hidden` containers.
+   */
+  portal?: HTMLElement;
+}
+
+export interface DropdownMenuHandle {
+  /** The menu DOM element. */
+  element: HTMLElement;
+  /** Show the menu. */
+  show: () => void;
+  /** Hide the menu. */
+  hide: () => void;
+  /** Toggle visibility. */
+  toggle: () => void;
+  /** Remove the menu and clean up all listeners. */
+  destroy: () => void;
+}
+
+/**
+ * Create a dropdown menu attached to an anchor element.
+ *
+ * The menu is styled via `.persona-dropdown-menu` CSS rules and themed
+ * through `--persona-dropdown-*` CSS variables with semantic fallbacks.
+ *
+ * ```ts
+ * import { createDropdownMenu } from "@runtypelabs/persona";
+ *
+ * const dropdown = createDropdownMenu({
+ *   items: [
+ *     { id: "edit", label: "Edit", icon: "pencil" },
+ *     { id: "delete", label: "Delete", icon: "trash-2", destructive: true, dividerBefore: true },
+ *   ],
+ *   onSelect: (id) => console.log("selected", id),
+ *   anchor: buttonElement,
+ * });
+ * anchor.appendChild(dropdown.element);
+ * button.addEventListener("click", () => dropdown.toggle());
+ * ```
+ */
+export function createDropdownMenu(options: CreateDropdownOptions): DropdownMenuHandle {
+  const { items, onSelect, anchor, position = 'bottom-left', portal } = options;
+
+  const menu = createElement("div", "persona-dropdown-menu persona-hidden");
+  menu.setAttribute("role", "menu");
+  menu.setAttribute("data-persona-theme-zone", "dropdown");
+
+  if (portal) {
+    // Fixed positioning — menu is portaled outside the anchor's overflow context
+    menu.style.position = "fixed";
+    menu.style.zIndex = "10000";
+  } else {
+    // Absolute positioning — menu lives inside the anchor
+    menu.style.position = "absolute";
+    menu.style.top = "100%";
+    menu.style.marginTop = "4px";
+    if (position === 'bottom-right') {
+      menu.style.right = "0";
+    } else {
+      menu.style.left = "0";
+    }
+  }
+
+  // Build menu items
+  for (const item of items) {
+    if (item.dividerBefore) {
+      const hr = document.createElement("hr");
+      menu.appendChild(hr);
+    }
+
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.setAttribute("role", "menuitem");
+    btn.setAttribute("data-dropdown-item-id", item.id);
+    if (item.destructive) {
+      btn.setAttribute("data-destructive", "");
+    }
+
+    if (item.icon) {
+      const icon = renderLucideIcon(item.icon, 16, "currentColor", 1.5);
+      if (icon) btn.appendChild(icon);
+    }
+
+    const labelSpan = document.createElement("span");
+    labelSpan.textContent = item.label;
+    btn.appendChild(labelSpan);
+
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      hide();
+      onSelect(item.id);
+    });
+
+    menu.appendChild(btn);
+  }
+
+  let cleanupClickOutside: (() => void) | null = null;
+
+  /** Reposition a portaled menu based on the anchor's current bounding rect. */
+  function reposition() {
+    if (!portal) return;
+    const rect = anchor.getBoundingClientRect();
+    menu.style.top = `${rect.bottom + 4}px`;
+    if (position === 'bottom-right') {
+      menu.style.right = `${window.innerWidth - rect.right}px`;
+      menu.style.left = "auto";
+    } else {
+      menu.style.left = `${rect.left}px`;
+      menu.style.right = "auto";
+    }
+  }
+
+  function show() {
+    reposition();
+    menu.classList.remove("persona-hidden");
+    // Defer click-outside listener to avoid catching the triggering click
+    requestAnimationFrame(() => {
+      const handler = (e: MouseEvent) => {
+        if (!menu.contains(e.target as Node) && !anchor.contains(e.target as Node)) {
+          hide();
+        }
+      };
+      document.addEventListener("click", handler, true);
+      cleanupClickOutside = () => document.removeEventListener("click", handler, true);
+    });
+  }
+
+  function hide() {
+    menu.classList.add("persona-hidden");
+    cleanupClickOutside?.();
+    cleanupClickOutside = null;
+  }
+
+  function toggle() {
+    if (menu.classList.contains("persona-hidden")) {
+      show();
+    } else {
+      hide();
+    }
+  }
+
+  function destroy() {
+    hide();
+    menu.remove();
+  }
+
+  // Append to portal target or let the caller append manually
+  if (portal) {
+    portal.appendChild(menu);
+  }
+
+  return { element: menu, show, hide, toggle, destroy };
+}

package/src/utils/sanitize.ts

@@ -59,7 +59,7 @@ export const createDefaultSanitizer = (): SanitizeFunction => {
       const val = data.attrValue;
       if (val.toLowerCase().startsWith("data:") && !SAFE_DATA_URI.test(val)) {
         data.attrValue = "";
-        data.forceKeepAttr = false;
+        data.keepAttr = false;
       }
     }
   });

package/src/utils/theme.test.ts

@@ -12,14 +12,22 @@ describe('theme utils', () => {
     const lightAndDarkThemeConfig = {
       colorScheme: 'dark' as const,
       theme: {
-        primary: '#111111',
+        palette: {
+          colors: {
+            primary: { 500: '#111111' },
+          },
+        },
       },
       darkTheme: {
-        primary: '#22c55e',
+        palette: {
+          colors: {
+            primary: { 500: '#22c55e' },
+          },
+        },
       },
     };
 
-    const activeTheme = getActiveTheme(lightAndDarkThemeConfig as any);
+    const activeTheme = getActiveTheme(lightAndDarkThemeConfig);
     const cssVars = themeToCssVariables(activeTheme);
 
     expect(cssVars['--persona-palette-colors-primary-500']).toBe('#22c55e');
@@ -31,14 +39,22 @@ describe('theme utils', () => {
     const lightAndDarkThemeConfig = {
       colorScheme: 'auto' as const,
       theme: {
-        primary: '#111111',
+        palette: {
+          colors: {
+            primary: { 500: '#111111' },
+          },
+        },
       },
       darkTheme: {
-        primary: '#22c55e',
+        palette: {
+          colors: {
+            primary: { 500: '#22c55e' },
+          },
+        },
       },
     };
 
-    const activeTheme = getActiveTheme(lightAndDarkThemeConfig as any);
+    const activeTheme = getActiveTheme(lightAndDarkThemeConfig);
     const cssVars = themeToCssVariables(activeTheme);
 
     expect(cssVars['--persona-palette-colors-primary-500']).toBe('#22c55e');
@@ -123,19 +139,74 @@ describe('theme utils', () => {
     expect(cssVars['--persona-md-prose-font-family']).toBe('Georgia, serif');
   });
 
-  it('maps flat AgentWidgetTheme bubble shadow keys to consumer CSS variables', () => {
+  it('maps header chrome tokens to dedicated CSS variables with semantic fallbacks', () => {
+    const theme = createTheme();
+    const cssVars = themeToCssVariables(theme);
+
+    expect(cssVars['--persona-header-icon-bg']).toBe(cssVars['--persona-primary']);
+    expect(cssVars['--persona-header-icon-fg']).toBe(cssVars['--persona-text-inverse']);
+    expect(cssVars['--persona-header-title-fg']).toBe(cssVars['--persona-primary']);
+    expect(cssVars['--persona-header-subtitle-fg']).toBe(cssVars['--persona-text-muted']);
+    expect(cssVars['--persona-header-action-icon-fg']).toBe(cssVars['--persona-muted']);
+
+    const custom = createTheme({
+      components: {
+        header: {
+          iconBackground: 'palette.colors.accent.500',
+          iconForeground: 'palette.colors.gray.900',
+          titleForeground: 'palette.colors.secondary.500',
+          subtitleForeground: 'palette.colors.gray.500',
+          actionIconForeground: 'palette.colors.gray.400',
+        },
+      },
+    } as any);
+    const customVars = themeToCssVariables(custom);
+    expect(customVars['--persona-header-icon-bg']).toBe('#06b6d4');
+    expect(customVars['--persona-header-icon-fg']).toBe('#111827');
+    expect(customVars['--persona-header-title-fg']).toBe('#8b5cf6');
+    expect(customVars['--persona-header-subtitle-fg']).toBe('#6b7280');
+    expect(customVars['--persona-header-action-icon-fg']).toBe('#9ca3af');
+  });
+
+  it('defaults artifact pane fill from semantic container and resolves toolbar background token refs', () => {
+    const theme = createTheme();
+    const cssVars = themeToCssVariables(theme);
+
+    expect(cssVars['--persona-components-artifact-pane-background']).toBe('#f3f4f6');
+    expect(cssVars['--persona-artifact-toolbar-bg']).toBe('#f3f4f6');
+
+    const surfacePane = createTheme({
+      components: {
+        artifact: {
+          pane: {
+            background: 'semantic.colors.surface',
+            toolbarBackground: 'semantic.colors.surface',
+          },
+        },
+      },
+    } as any);
+    const surfaceVars = themeToCssVariables(surfacePane);
+    expect(surfaceVars['--persona-components-artifact-pane-background']).toBe('#f9fafb');
+    expect(surfaceVars['--persona-artifact-toolbar-bg']).toBe('#f9fafb');
+  });
+
+  it('maps component bubble shadow tokens to consumer CSS variables', () => {
     const cfg = {
       colorScheme: 'light' as const,
       theme: {
-        toolBubbleShadow: 'none',
-        reasoningBubbleShadow: 'none',
-        messageUserShadow: 'none',
-        messageAssistantShadow: 'none',
-        composerShadow: 'none',
+        components: {
+          toolBubble: { shadow: 'none' },
+          reasoningBubble: { shadow: 'none' },
+          composer: { shadow: 'none' },
+          message: {
+            user: { shadow: 'none' },
+            assistant: { shadow: 'none' },
+          },
+        },
       },
     };
 
-    const active = getActiveTheme(cfg as any);
+    const active = getActiveTheme(cfg);
     const cssVars = themeToCssVariables(active);
 
     expect(cssVars['--persona-tool-bubble-shadow']).toBe('none');
@@ -149,9 +220,13 @@ describe('theme utils', () => {
     const el = document.createElement('div');
     applyThemeVariables(el, {
       colorScheme: 'light',
-      theme: { toolBubbleShadow: '0 1px 2px rgba(255,0,0,0.5)' },
+      theme: {
+        components: {
+          toolBubble: { shadow: '0 1px 2px rgba(255,0,0,0.5)' },
+        },
+      },
       toolCall: { shadow: 'none' },
-    } as any);
+    });
     expect(el.style.getPropertyValue('--persona-tool-bubble-shadow').trim()).toBe('none');
   });
 });

package/src/utils/theme.ts

@@ -1,13 +1,13 @@
-import type { PersonaTheme } from '../types/theme';
-import type { AgentWidgetConfig, AgentWidgetTheme } from '../types';
+import type { DeepPartial, PersonaTheme } from '../types/theme';
+import type { AgentWidgetConfig } from '../types';
 import { createTheme, resolveTokens, themeToCssVariables } from './tokens';
-import { migrateV1Theme } from './migration';
+import { deepMerge } from './deep-merge';
 
 export type ColorScheme = 'light' | 'dark' | 'auto';
 
 export interface PersonaWidgetConfig {
-  theme?: Partial<PersonaTheme>;
-  darkTheme?: Partial<PersonaTheme>;
+  theme?: DeepPartial<PersonaTheme>;
+  darkTheme?: DeepPartial<PersonaTheme>;
   colorScheme?: ColorScheme;
 }
 
@@ -106,43 +106,14 @@ const DARK_PALETTE = {
   },
 };
 
-const isObject = (value: unknown): value is Record<string, unknown> =>
-  typeof value === 'object' && value !== null && !Array.isArray(value);
-
-const deepMerge = <T extends Record<string, unknown>>(
-  base: T | undefined,
-  override: Record<string, unknown> | undefined
-): T | Record<string, unknown> | undefined => {
-  if (!base) return override;
-  if (!override) return base;
-
-  const merged: Record<string, unknown> = { ...base };
-
-  for (const [key, value] of Object.entries(override)) {
-    const existing = merged[key];
-    if (isObject(existing) && isObject(value)) {
-      merged[key] = deepMerge(existing, value);
-    } else {
-      merged[key] = value;
-    }
-  }
-
-  return merged;
-};
-
-const isTokenTheme = (theme: unknown): theme is Partial<PersonaTheme> => {
-  return isObject(theme) && ('palette' in theme || 'semantic' in theme || 'components' in theme);
-};
-
+/**
+ * Normalize theme config for merging; rejects non-objects.
+ */
 const normalizeThemeConfig = (
-  theme: Partial<PersonaTheme> | AgentWidgetTheme | undefined
-): Partial<PersonaTheme> | undefined => {
-  if (!theme) return undefined;
-  const migratedTheme = migrateV1Theme(theme as AgentWidgetTheme, { warn: false });
-  if (isTokenTheme(theme)) {
-    return deepMerge(migratedTheme, theme) as Partial<PersonaTheme>;
-  }
-  return migratedTheme;
+  theme: DeepPartial<PersonaTheme> | Record<string, unknown> | undefined
+): DeepPartial<PersonaTheme> | undefined => {
+  if (!theme || typeof theme !== 'object' || Array.isArray(theme)) return undefined;
+  return theme as DeepPartial<PersonaTheme>;
 };
 
 export const detectColorScheme = (): 'light' | 'dark' => {
@@ -170,11 +141,11 @@ export const getColorScheme = (config?: WidgetConfig): 'light' | 'dark' => {
   return getColorSchemeFromConfig(config);
 };
 
-export const createLightTheme = (userConfig?: Partial<PersonaTheme>): PersonaTheme => {
+export const createLightTheme = (userConfig?: DeepPartial<PersonaTheme>): PersonaTheme => {
   return createTheme(userConfig);
 };
 
-export const createDarkTheme = (userConfig?: Partial<PersonaTheme>): PersonaTheme => {
+export const createDarkTheme = (userConfig?: DeepPartial<PersonaTheme>): PersonaTheme => {
   const baseTheme = createTheme(undefined, { validate: false });
   
   return createTheme(
@@ -194,12 +165,15 @@ export const createDarkTheme = (userConfig?: Partial<PersonaTheme>): PersonaThem
 
 export const getActiveTheme = (config?: WidgetConfig): PersonaTheme => {
   const scheme = getColorScheme(config);
-  const lightThemeConfig = normalizeThemeConfig(config?.theme as Partial<PersonaTheme> | AgentWidgetTheme | undefined);
-  const darkThemeConfig = normalizeThemeConfig(config?.darkTheme as Partial<PersonaTheme> | AgentWidgetTheme | undefined);
+  const lightThemeConfig = normalizeThemeConfig(config?.theme);
+  const darkThemeConfig = normalizeThemeConfig(config?.darkTheme);
 
   if (scheme === 'dark') {
     return createDarkTheme(
-      deepMerge(lightThemeConfig, darkThemeConfig) as Partial<PersonaTheme> | undefined
+      deepMerge(
+        (lightThemeConfig ?? {}) as Record<string, unknown>,
+        (darkThemeConfig ?? {}) as Record<string, unknown>
+      ) as DeepPartial<PersonaTheme>
     );
   }
 

package/src/utils/tokens.ts

@@ -1,4 +1,5 @@
 import type {
+  DeepPartial,
   PersonaTheme,
   ResolvedToken,
   ThemeValidationResult,
@@ -265,6 +266,11 @@ export const DEFAULT_COMPONENTS: ComponentTokens = {
     border: 'semantic.colors.border',
     borderRadius: 'palette.radius.xl palette.radius.xl 0 0',
     padding: 'semantic.spacing.md',
+    iconBackground: 'semantic.colors.primary',
+    iconForeground: 'semantic.colors.textInverse',
+    titleForeground: 'semantic.colors.primary',
+    subtitleForeground: 'semantic.colors.textMuted',
+    actionIconForeground: 'semantic.colors.textMuted',
   },
   message: {
     user: {
@@ -341,9 +347,15 @@ export const DEFAULT_COMPONENTS: ComponentTokens = {
       border: 'palette.colors.gray.200',
     },
   },
+  artifact: {
+    pane: {
+      background: 'semantic.colors.container',
+      toolbarBackground: 'semantic.colors.container',
+    },
+  },
 };
 
-function resolveTokenValue(theme: PersonaTheme, path: string): string | undefined {
+export function resolveTokenValue(theme: PersonaTheme, path: string): string | undefined {
   if (
     !path.startsWith('palette.') &&
     !path.startsWith('semantic.') &&
@@ -481,7 +493,7 @@ function deepMergeComponents(
 }
 
 export function createTheme(
-  userConfig?: Partial<PersonaTheme>,
+  userConfig?: DeepPartial<PersonaTheme>,
   options: CreateThemeOptions = {}
 ): PersonaTheme {
   const baseTheme: PersonaTheme = {
@@ -543,8 +555,11 @@ export function createTheme(
         ...userConfig?.semantic?.typography,
       },
     },
-    components: deepMergeComponents(baseTheme.components, userConfig?.components),
-  };
+    components: deepMergeComponents(
+      baseTheme.components,
+      userConfig?.components as Partial<ComponentTokens> | undefined
+    ),
+  } as PersonaTheme;
 
   if (options.validate !== false) {
     const validation = validateTheme(theme);
@@ -606,6 +621,9 @@ export function themeToCssVariables(theme: PersonaTheme): Record<string, string>
   cssVars['--persona-font-weight'] = cssVars['--persona-semantic-typography-fontWeight'] ?? cssVars['--persona-palette-typography-fontWeight-normal'];
   cssVars['--persona-line-height'] = cssVars['--persona-semantic-typography-lineHeight'] ?? cssVars['--persona-palette-typography-lineHeight-normal'];
 
+  cssVars['--persona-input-font-family'] = cssVars['--persona-font-family'];
+  cssVars['--persona-input-font-weight'] = cssVars['--persona-font-weight'];
+
   // Radius aliases used throughout the existing widget CSS.
   cssVars['--persona-radius-sm'] = cssVars['--persona-palette-radius-sm'] ?? '0.125rem';
   cssVars['--persona-radius-md'] = cssVars['--persona-palette-radius-md'] ?? '0.375rem';
@@ -623,6 +641,12 @@ export function themeToCssVariables(theme: PersonaTheme): Record<string, string>
     cssVars['--persona-components-panel-borderRadius'] ??
     cssVars['--persona-radius-xl'] ??
     '0.75rem';
+  cssVars['--persona-panel-border'] =
+    cssVars['--persona-components-panel-border'] ?? `1px solid ${cssVars['--persona-border']}`;
+  cssVars['--persona-panel-shadow'] =
+    cssVars['--persona-components-panel-shadow'] ??
+    cssVars['--persona-palette-shadows-xl'] ??
+    '0 25px 50px -12px rgba(0, 0, 0, 0.25)';
   cssVars['--persona-input-radius'] =
     cssVars['--persona-components-input-borderRadius'] ??
     cssVars['--persona-radius-lg'] ??
@@ -642,6 +666,20 @@ export function themeToCssVariables(theme: PersonaTheme): Record<string, string>
     cssVars['--persona-components-header-background'] ?? cssVars['--persona-surface'];
   cssVars['--persona-header-border'] =
     cssVars['--persona-components-header-border'] ?? cssVars['--persona-divider'];
+  cssVars['--persona-header-icon-bg'] =
+    cssVars['--persona-components-header-iconBackground'] ?? cssVars['--persona-primary'];
+  cssVars['--persona-header-icon-fg'] =
+    cssVars['--persona-components-header-iconForeground'] ?? cssVars['--persona-text-inverse'];
+  cssVars['--persona-header-title-fg'] =
+    cssVars['--persona-components-header-titleForeground'] ?? cssVars['--persona-primary'];
+  cssVars['--persona-header-subtitle-fg'] =
+    cssVars['--persona-components-header-subtitleForeground'] ?? cssVars['--persona-text-muted'];
+  cssVars['--persona-header-action-icon-fg'] =
+    cssVars['--persona-components-header-actionIconForeground'] ?? cssVars['--persona-muted'];
+
+  const headerTokens = theme.components?.header;
+  if (headerTokens?.shadow) cssVars['--persona-header-shadow'] = headerTokens.shadow;
+  if (headerTokens?.borderBottom) cssVars['--persona-header-border-bottom'] = headerTokens.borderBottom;
 
   cssVars['--persona-message-user-bg'] =
     cssVars['--persona-components-message-user-background'] ?? cssVars['--persona-accent'];
@@ -689,8 +727,42 @@ export function themeToCssVariables(theme: PersonaTheme): Record<string, string>
     cssVars['--persona-md-prose-font-family'] = mdProseFont;
   }
 
-  // Artifact tokens
+  // Icon button tokens
   const components = theme.components;
+  const iconBtn = components?.iconButton;
+  if (iconBtn) {
+    if (iconBtn.background) cssVars['--persona-icon-btn-bg'] = iconBtn.background;
+    if (iconBtn.border) cssVars['--persona-icon-btn-border'] = iconBtn.border;
+    if (iconBtn.color) cssVars['--persona-icon-btn-color'] = iconBtn.color;
+    if (iconBtn.padding) cssVars['--persona-icon-btn-padding'] = iconBtn.padding;
+    if (iconBtn.borderRadius) cssVars['--persona-icon-btn-radius'] = iconBtn.borderRadius;
+    if (iconBtn.hoverBackground) cssVars['--persona-icon-btn-hover-bg'] = iconBtn.hoverBackground;
+    if (iconBtn.hoverColor) cssVars['--persona-icon-btn-hover-color'] = iconBtn.hoverColor;
+    if (iconBtn.activeBackground) cssVars['--persona-icon-btn-active-bg'] = iconBtn.activeBackground;
+    if (iconBtn.activeBorder) cssVars['--persona-icon-btn-active-border'] = iconBtn.activeBorder;
+  }
+
+  // Label button tokens
+  const labelBtn = components?.labelButton;
+  if (labelBtn) {
+    if (labelBtn.background) cssVars['--persona-label-btn-bg'] = labelBtn.background;
+    if (labelBtn.border) cssVars['--persona-label-btn-border'] = labelBtn.border;
+    if (labelBtn.color) cssVars['--persona-label-btn-color'] = labelBtn.color;
+    if (labelBtn.padding) cssVars['--persona-label-btn-padding'] = labelBtn.padding;
+    if (labelBtn.borderRadius) cssVars['--persona-label-btn-radius'] = labelBtn.borderRadius;
+    if (labelBtn.hoverBackground) cssVars['--persona-label-btn-hover-bg'] = labelBtn.hoverBackground;
+    if (labelBtn.fontSize) cssVars['--persona-label-btn-font-size'] = labelBtn.fontSize;
+    if (labelBtn.gap) cssVars['--persona-label-btn-gap'] = labelBtn.gap;
+  }
+
+  // Toggle group tokens
+  const toggleGrp = components?.toggleGroup;
+  if (toggleGrp) {
+    if (toggleGrp.gap) cssVars['--persona-toggle-group-gap'] = toggleGrp.gap;
+    if (toggleGrp.borderRadius) cssVars['--persona-toggle-group-radius'] = toggleGrp.borderRadius;
+  }
+
+  // Artifact tokens
   const artifact = components?.artifact;
   if (artifact?.toolbar) {
     const t = artifact.toolbar;
@@ -706,11 +778,28 @@ export function themeToCssVariables(theme: PersonaTheme): Record<string, string>
     if (t.copyColor) cssVars['--persona-artifact-toolbar-copy-color'] = t.copyColor;
     if (t.copyBorderRadius) cssVars['--persona-artifact-toolbar-copy-radius'] = t.copyBorderRadius;
     if (t.copyPadding) cssVars['--persona-artifact-toolbar-copy-padding'] = t.copyPadding;
-    if (t.copyMenuBackground) cssVars['--persona-artifact-toolbar-copy-menu-bg'] = t.copyMenuBackground;
-    if (t.copyMenuBorder) cssVars['--persona-artifact-toolbar-copy-menu-border'] = t.copyMenuBorder;
-    if (t.copyMenuShadow) cssVars['--persona-artifact-toolbar-copy-menu-shadow'] = t.copyMenuShadow;
-    if (t.copyMenuBorderRadius) cssVars['--persona-artifact-toolbar-copy-menu-radius'] = t.copyMenuBorderRadius;
-    if (t.copyMenuItemHoverBackground) cssVars['--persona-artifact-toolbar-copy-menu-item-hover-bg'] = t.copyMenuItemHoverBackground;
+    if (t.copyMenuBackground) {
+      cssVars['--persona-artifact-toolbar-copy-menu-bg'] = t.copyMenuBackground;
+      cssVars['--persona-dropdown-bg'] = cssVars['--persona-dropdown-bg'] ?? t.copyMenuBackground;
+    }
+    if (t.copyMenuBorder) {
+      cssVars['--persona-artifact-toolbar-copy-menu-border'] = t.copyMenuBorder;
+      cssVars['--persona-dropdown-border'] = cssVars['--persona-dropdown-border'] ?? t.copyMenuBorder;
+    }
+    if (t.copyMenuShadow) {
+      cssVars['--persona-artifact-toolbar-copy-menu-shadow'] = t.copyMenuShadow;
+      cssVars['--persona-dropdown-shadow'] = cssVars['--persona-dropdown-shadow'] ?? t.copyMenuShadow;
+    }
+    if (t.copyMenuBorderRadius) {
+      cssVars['--persona-artifact-toolbar-copy-menu-radius'] = t.copyMenuBorderRadius;
+      cssVars['--persona-dropdown-radius'] = cssVars['--persona-dropdown-radius'] ?? t.copyMenuBorderRadius;
+    }
+    if (t.copyMenuItemHoverBackground) {
+      cssVars['--persona-artifact-toolbar-copy-menu-item-hover-bg'] = t.copyMenuItemHoverBackground;
+      cssVars['--persona-dropdown-item-hover-bg'] = cssVars['--persona-dropdown-item-hover-bg'] ?? t.copyMenuItemHoverBackground;
+    }
+    if (t.iconBackground) cssVars['--persona-artifact-toolbar-icon-bg'] = t.iconBackground;
+    if (t.toolbarBorder) cssVars['--persona-artifact-toolbar-border'] = t.toolbarBorder;
   }
   if (artifact?.tab) {
     const t = artifact.tab;
@@ -719,10 +808,18 @@ export function themeToCssVariables(theme: PersonaTheme): Record<string, string>
     if (t.activeBorder) cssVars['--persona-artifact-tab-active-border'] = t.activeBorder;
     if (t.borderRadius) cssVars['--persona-artifact-tab-radius'] = t.borderRadius;
     if (t.textColor) cssVars['--persona-artifact-tab-color'] = t.textColor;
+    if (t.hoverBackground) cssVars['--persona-artifact-tab-hover-bg'] = t.hoverBackground;
+    if (t.listBackground) cssVars['--persona-artifact-tab-list-bg'] = t.listBackground;
+    if (t.listBorderColor) cssVars['--persona-artifact-tab-list-border-color'] = t.listBorderColor;
+    if (t.listPadding) cssVars['--persona-artifact-tab-list-padding'] = t.listPadding;
   }
   if (artifact?.pane) {
     const t = artifact.pane;
-    if (t.toolbarBackground) cssVars['--persona-artifact-toolbar-bg'] = t.toolbarBackground;
+    if (t.toolbarBackground) {
+      const toolbarBg =
+        resolveTokenValue(theme, t.toolbarBackground) ?? t.toolbarBackground;
+      cssVars['--persona-artifact-toolbar-bg'] = toolbarBg;
+    }
   }
 
   return cssVars;