ooxml-ui 1.18.2 → 1.19.0

package/dist/pptx/{chunk-AUCJIB3M.mjs → chunk-NLUVYOKN.mjs}

@@ -28,7 +28,7 @@ import { safeDataImageSrc, escapeHtml } from './chunk-IEAO7N4E.mjs';
 import { stopCaptureStream, segmentFrameCount, planVideoSegments, pickSupportedMimeType, fpsToFrameIntervalMs, WEBM_MIME_CANDIDATES } from './chunk-XAOEDYA5.mjs';
 import { upsert, triggerChangePatch, showDirectionPicker, setTriggerShapeId, setTrigger, setTimingCurve, setSequence, setRepeatMode, setRepeatCount, setDuration, setDirection, setDelay, setAnimationExit, setAnimationEntrance, setAnimationEmphasis, reorderAnimationUp, reorderAnimationTo, reorderAnimationDown, removeElementAnimation, removeAnimation, hasAnimation, effectiveDirection, directionValuesForPreset, directionValuesFor, buildAnimationTimelineBars, applyAnimationPreset, animationFor, TRIGGER_VALUES, TRIGGER_OPTIONS, TIMING_CURVE_VALUES, SEQUENCE_VALUES, REPEAT_MODE_VALUES, EXIT_PRESET_VALUES, ENTRANCE_PRESET_VALUES, EMPHASIS_PRESET_VALUES, DIRECTION_VALUES, DIRECTIONAL_PRESETS, ANIMATION_DIRECTION_LABEL_KEYS } from './chunk-PMURSMHH.mjs';
 import { isAnimationCatalogPresetId, animationPresetLabelKey, animationEffectLabelKey, animationEffectLabel, animationCatalogPresetSlug, animationCatalogPresetLabelKey, ANIMATION_PRESET_VALUES } from './chunk-T7FRLIDM.mjs';
-import { vermilionRadius, vermilionLightTheme, vermilionLightColors, vermilionDarkTheme, vermilionDarkColors, themeToCssVars, resolveThemeCatalogEntry, lightThemeColors, lightTheme, defaultThemeColors, defaultRadius, defaultCssVars, activeGalleryThemePreset, THEME_CATALOG, GALLERY_THEME_PRESETS } from './chunk-ZAOD6O2D.mjs';
+import { withOfficeThemeCss, vermilionRadius, vermilionLightTheme, vermilionLightColors, vermilionDarkTheme, vermilionDarkColors, themeToCssVars, resolveThemeCatalogEntry, pptxThemeValue, lightThemeColors, lightTheme, defaultThemeColors, defaultRadius, defaultCssVars, activeGalleryThemePreset, THEME_CATALOG, GALLERY_THEME_PRESETS, TOUCH, tok, installOfficeUiTheme, OFFICE_TOKENS, installOfficeUiThemeFor, LEGACY_OFFICE_THEME_TOKENS, legacyThemeBridge } from './chunk-UTFFX4M7.mjs';
 import { walkAndPatchElements, resolveTextFillBlipUrls, resolveTableStyleImageUrls, resolveTableCellImageUrls, resolveMediaElementSource, createPresentationLoadResources, collectTextFillBlipPaths, collectTableStyleImagePaths, collectTableCellImagePaths, collectMediaElements, collectImagePaths, collectAnimationSoundPaths, buildInitialGuides, applyTextFillBlipPatches, applyTableStyleImagePatches, applyTableCellImagePatches, applyImagePathPatches } from './chunk-AEQGGKRZ.mjs';
 import { translationsEn } from './chunk-ZNXKAINY.mjs';
 import { updateTextSegmentStyle } from './chunk-PEDGPFLR.mjs';
@@ -2712,6 +2712,7 @@ __export(pptx_exports, {
   polygonRegionBounds: () => polygonRegionBounds,
   powerPointAccelDecelProgress: () => powerPointAccelDecelProgress,
   pptxOptionsLabels: () => pptxOptionsLabels,
+  pptxThemeValue: () => pptxThemeValue,
   prefersReducedMotion: () => prefersReducedMotion,
   prepareElementForInsertion: () => prepareElementForInsertion,
   prepareElementUpdateBatch: () => prepareElementUpdateBatch,
@@ -3562,6 +3563,7 @@ __export(pptx_exports, {
   withInlineListDecorationDefaults: () => withInlineListDecorationDefaults,
   withManualLayouts: () => withManualLayouts,
   withNodeAtPath: () => withNodeAtPath,
+  withOfficeThemeCss: () => withOfficeThemeCss,
   withRecordEntry: () => withRecordEntry,
   withSlideSizeOrientation: () => withSlideSizeOrientation,
   withSlidesPerPage: () => withSlidesPerPage,
@@ -3586,6 +3588,8 @@ __export(pptx_exports, {
 var sheetsByDocument = /* @__PURE__ */ new WeakMap();
 function attachControlStyles(root, css) {
   const doc = root.host.ownerDocument;
+  installOfficeUiThemeFor(root.host);
+  css = withOfficeThemeCss(css, ":host");
   const Sheet = doc.defaultView?.CSSStyleSheet;
   if (Sheet && "adoptedStyleSheets" in root && "replaceSync" in Sheet.prototype) {
     try {
@@ -3745,49 +3749,49 @@ var CONTROL_TOKENS = {
   // Distance the knob travels when on; defaults to the free space in the track.
   "--pptx-switch-knob-travel": "calc(var(--pptx-switch-width, 32px) - var(--pptx-switch-knob-size, 12px) - 2 * var(--pptx-switch-knob-offset, 2px))"
 };
-function tok(name) {
+function tok2(name) {
   return `var(${name}, ${CONTROL_TOKENS[name]})`;
 }
-var FOCUS_RING = `outline: ${tok("--pptx-focus-ring-width")} solid ${tok("--pptx-focus-ring-color")};
-	outline-offset: ${tok("--pptx-focus-ring-offset")};`;
+var FOCUS_RING = `outline: ${tok2("--pptx-focus-ring-width")} solid ${tok2("--pptx-focus-ring-color")};
+	outline-offset: ${tok2("--pptx-focus-ring-offset")};`;
 
 // src/pptx/web-components/host-styles.ts
 var HOST_STYLES = `
 pptx-ui-search {
-	border: 1px solid ${tok("--pptx-field-border")};
-	border-radius: ${tok("--pptx-field-radius")};
-	padding-inline: ${tok("--pptx-space-3")};
+	border: 1px solid ${tok2("--pptx-field-border")};
+	border-radius: ${tok2("--pptx-field-radius")};
+	padding-inline: ${tok2("--pptx-space-3")};
 }
 pptx-ui-search[variant="titlebar"] {
 	border-color: var(--pptx-border, #374151);
 	border-radius: 6px;
 	padding-inline: 14px;
 }
-pptx-ui-search:focus-within { border-color: ${tok("--pptx-field-border-focus")}; }
+pptx-ui-search:focus-within { border-color: ${tok2("--pptx-field-border-focus")}; }
 pptx-ui-checkbox {
-	border: 1px solid ${tok("--pptx-checkbox-border")};
-	border-radius: ${tok("--pptx-checkbox-radius")};
+	border: 1px solid ${tok2("--pptx-checkbox-border")};
+	border-radius: ${tok2("--pptx-checkbox-radius")};
 }
-pptx-ui-checkbox[checked] { border-color: ${tok("--pptx-checkbox-accent")}; }
+pptx-ui-checkbox[checked] { border-color: ${tok2("--pptx-checkbox-accent")}; }
 :where([data-pptx-editor-chrome], [data-pptx-dialog], [role="dialog"]) :is(input[type="checkbox"], input[type="radio"]) {
-	accent-color: ${tok("--pptx-checkbox-accent")};
+	accent-color: ${tok2("--pptx-checkbox-accent")};
 }
 :where([data-pptx-editor-chrome], [data-pptx-dialog], [role="dialog"]) input[type="checkbox"] {
-	width: ${tok("--pptx-checkbox-size")};
-	height: ${tok("--pptx-checkbox-size")};
+	width: ${tok2("--pptx-checkbox-size")};
+	height: ${tok2("--pptx-checkbox-size")};
 }
 @media (pointer: coarse), (max-width: 767px) {
 	:where([data-pptx-editor-chrome], [data-pptx-dialog], [role="dialog"]) input[type="checkbox"] {
-		width: ${tok("--pptx-checkbox-size-touch")};
-		height: ${tok("--pptx-checkbox-size-touch")};
+		width: ${tok2("--pptx-checkbox-size-touch")};
+		height: ${tok2("--pptx-checkbox-size-touch")};
 	}
 }
 :where([data-pptx-editor-chrome], [data-pptx-dialog], [role="dialog"]) :is(input[type="checkbox"], input[type="radio"], select):focus-visible {
 	${FOCUS_RING}
 }
 :where([data-pptx-editor-chrome], [data-pptx-dialog], [role="dialog"]) select {
-	border-radius: ${tok("--pptx-field-radius")};
-	border-color: ${tok("--pptx-field-border")};
+	border-radius: ${tok2("--pptx-field-radius")};
+	border-color: ${tok2("--pptx-field-border")};
 }
 pptx-ui-context-menu { position: fixed; display: block; z-index: 9000; }
 pptx-ui-context-menu[hidden] { display: none; }
@@ -37497,7 +37501,7 @@ function conflictingMorphNames(a, b) {
 }
 function mediaIdentity(el) {
   const props = el;
-  return props.imagePath ?? props.imageData ?? void 0;
+  return props.imagePath ?? props.imageData ?? props.svgPath ?? props.svgData ?? void 0;
 }
 function centreDistance(a, b) {
   const dx = a.x - b.x;
@@ -37549,6 +37553,11 @@ function proximityAccepts(a, b) {
   if (a.type !== b.type || differentText(a, b) || conflictingMorphNames(a, b)) {
     return false;
   }
+  if (a.type === "picture" || a.type === "image") {
+    const fromMedia = mediaIdentity(a);
+    const toMedia = mediaIdentity(b);
+    if (fromMedia && toMedia && fromMedia !== toMedia) return false;
+  }
   const ratio = (p, q) => Math.max(p, q, 1) / Math.max(Math.min(p, q), 1);
   if (ratio(a.width, b.width) > PROXIMITY_SIZE_RATIO_LIMIT || ratio(a.height, b.height) > PROXIMITY_SIZE_RATIO_LIMIT) {
     return false;
@@ -76728,7 +76737,7 @@ nav {
 	box-sizing: border-box; display: flex; align-items: stretch; justify-content: space-around; width: 100%;
 	padding-bottom: max(env(safe-area-inset-bottom), 0px); border-top: 1px solid var(--pptx-border, #33334d);
 	background: color-mix(in srgb, var(--pptx-secondary, #1e1e2e) 70%, transparent);
-	color: var(--pptx-muted-foreground, #a5a5b5); font: 500 10px/1.2 system-ui, sans-serif;
+	color: var(--pptx-muted-foreground, #a5a5b5); font: 500 10px/1.2 var(--pptx-font,var(--office-font,system-ui,sans-serif));
 }
 button {
 	position: relative; box-sizing: border-box; display: flex; flex: 1; flex-direction: column;
@@ -76764,7 +76773,7 @@ var MOBILE_TOOLBAR_STYLES = `
 	position: relative; z-index: 20; box-sizing: border-box; display: flex; align-items: center; gap: 4px;
 	min-height: 52px; padding: max(env(safe-area-inset-top), 0px) 8px 4px; border-bottom: 1px solid var(--pptx-border, #33334d);
 	background: color-mix(in srgb, var(--pptx-secondary, #1e1e2e) 50%, transparent);
-	color: var(--pptx-card-foreground, #e2e8f0); font: 12px/1.2 system-ui, sans-serif;
+	color: var(--pptx-card-foreground, #e2e8f0); font: 12px/1.2 var(--pptx-font,var(--office-font,system-ui,sans-serif));
 }
 .spacer { flex: 1; }
 button {
@@ -77230,7 +77239,7 @@ function createTablePicker(doc, pick) {
 
 // src/pptx/web-components/mobile-insert-styles.ts
 var MOBILE_INSERT_STYLES = `
-:host { display: block; min-width: 0; color: var(--pptx-foreground, #e2e8f0); font: 13px/1.3 system-ui, sans-serif; }
+:host { display: block; min-width: 0; color: var(--pptx-foreground, #e2e8f0); font: 13px/1.3 var(--pptx-font,var(--office-font,system-ui,sans-serif)); }
 :host([hidden]), [hidden] { display: none !important; }
 * { box-sizing: border-box; }
 svg { flex: none; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@@ -77872,7 +77881,7 @@ var NOTES_TOOLBAR_STYLES = `
 [hidden] { display: none !important; }
 .bar {
 	display: flex; align-items: center; justify-content: space-between; gap: 8px;
-	font: 12px/1.2 system-ui, sans-serif; color: var(--pptx-foreground, inherit);
+	font: 12px/1.2 var(--pptx-font,var(--office-font,system-ui,sans-serif)); color: var(--pptx-foreground, inherit);
 }
 .group {
 	display: inline-flex; align-items: center; flex-wrap: wrap;
@@ -77901,7 +77910,7 @@ svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; s
 .popover label { display: grid; gap: 2px; font-size: 10px; color: var(--pptx-muted-foreground, #a5a5b5); }
 .popover input {
 	box-sizing: border-box; width: 100%; min-height: 28px; padding: 4px 8px; border: 1px solid var(--pptx-border, #33334d);
-	border-radius: 4px; background: var(--pptx-background, #11111b); color: var(--pptx-foreground, #e2e8f0); font: 12px system-ui, sans-serif;
+	border-radius: 4px; background: var(--pptx-background, #11111b); color: var(--pptx-foreground, #e2e8f0); font: 12px var(--pptx-font,var(--office-font,system-ui,sans-serif));
 }
 .popover input:focus-visible { outline: 2px solid var(--pptx-ring, #6366f1); outline-offset: -1px; }
 .actions { display: flex; justify-content: flex-end; gap: 8px; }
@@ -78327,300 +78336,14 @@ function present(value) {
   return value === "" || Boolean(value);
 }
 
-// src/tokens.ts
-var OFFICE_TOKENS = {
-  // Colour: semantic
-  "--office-foreground": "#1f2937",
-  "--office-muted-foreground": "#6b7280",
-  "--office-background": "#ffffff",
-  "--office-surface": "#f3f4f6",
-  "--office-selected": "#e5e7eb",
-  "--office-border": "#d1d5db",
-  "--office-accent": "#2563eb",
-  "--office-accent-foreground": "#ffffff",
-  "--office-ring": "#2563eb",
-  "--office-danger": "#b91c1c",
-  "--office-danger-foreground": "#ffffff",
-  "--office-warning": "#d97706",
-  "--office-warning-foreground": "#ffffff",
-  "--office-info": "#3b82f6",
-  "--office-popover": "var(--office-background, #ffffff)",
-  "--office-popover-foreground": "var(--office-foreground, #1f2937)",
-  "--office-overlay": "rgb(0 0 0 / 40%)",
-  "--office-notice-background": "#fef3c7",
-  "--office-notice-foreground": "#78350f",
-  "--office-notice-border": "rgb(180 83 9 / 30%)",
-  "--office-notice-accent": "#d97706",
-  "--office-keytip-background": "#ffffff",
-  "--office-keytip-foreground": "#1f1f1f",
-  "--office-keytip-border": "#8a8886",
-  "--office-highlight": "#dc2626",
-  "--office-paper": "#ffffff",
-  "--office-accent-hover": "color-mix(in srgb, var(--office-accent, #2563eb) 85%, #000)",
-  // Typography
-  "--office-font": 'system-ui, -apple-system, "Segoe UI", sans-serif',
-  "--office-font-size-3xs": "9px",
-  "--office-font-size-2xs": "10px",
-  "--office-font-size-xs": "11px",
-  "--office-font-size-sm": "12px",
-  "--office-font-size": "13px",
-  "--office-font-size-md": "14px",
-  "--office-font-size-lg": "15px",
-  "--office-font-size-xl": "18px",
-  /** Smallest text size that keeps mobile browsers from zooming a focused field. */
-  "--office-font-size-touch": "16px",
-  "--office-font-weight-medium": "500",
-  "--office-font-weight-bold": "600",
-  "--office-line-height": "1.4",
-  "--office-line-height-tight": "1.2",
-  "--office-icon-stroke": "1.5",
-  // Space
-  "--office-space-px": "1px",
-  "--office-space-0": "2px",
-  "--office-space-1": "4px",
-  "--office-space-1-5": "6px",
-  "--office-space-2": "8px",
-  "--office-space-2-5": "10px",
-  "--office-space-3": "12px",
-  "--office-space-3-5": "14px",
-  "--office-space-4": "16px",
-  "--office-space-5": "20px",
-  "--office-space-6": "24px",
-  // Shape
-  "--office-border-width": "1px",
-  "--office-border-width-thick": "2px",
-  "--office-radius-xs": "2px",
-  "--office-radius-sm": "3px",
-  "--office-radius": "4px",
-  "--office-radius-md": "6px",
-  "--office-radius-lg": "8px",
-  "--office-radius-full": "999px",
-  // Focus
-  "--office-focus-width": "2px",
-  "--office-focus-offset": "2px",
-  // Sizes
-  "--office-target-size": "28px",
-  "--office-target-size-touch": "44px",
-  /** Minimum pointer target on touch layouts. */
-  "--office-touch-target": "36px",
-  "--office-control-height": "24px",
-  "--office-control-height-md": "28px",
-  "--office-control-height-lg": "32px",
-  "--office-input-height": "26px",
-  "--office-control-height-xs": "22px",
-  "--office-icon-size-xs": "10px",
-  "--office-icon-size-sm": "12px",
-  "--office-icon-size": "14px",
-  "--office-icon-size-md": "16px",
-  "--office-icon-size-ml": "18px",
-  "--office-icon-size-lg": "20px",
-  // Elevation and layering
-  "--office-shadow-sm": "0 1px 3px rgb(0 0 0 / 20%)",
-  "--office-shadow": "0 6px 20px rgb(0 0 0 / 18%)",
-  "--office-shadow-lg": "0 10px 25px rgb(0 0 0 / 20%)",
-  "--office-z-popover": "1100",
-  "--office-z-dialog": "1000",
-  "--office-z-backstage": "30",
-  // Motion
-  "--office-duration-fast": ".12s",
-  "--office-duration": ".15s",
-  "--office-duration-spin": ".8s",
-  // Component: fields
-  "--office-field-height": "28px",
-  "--office-field-height-lg": "40px",
-  "--office-field-radius": "5px",
-  "--office-field-border": "var(--office-border, #d1d5db)",
-  "--office-field-border-focus": "var(--office-ring, #2563eb)",
-  "--office-field-background": "var(--office-background, #ffffff)",
-  "--office-field-foreground": "var(--office-foreground, #1f2937)",
-  "--office-field-placeholder": "var(--office-muted-foreground, #6b7280)",
-  // Component: checkbox, radio, switch
-  "--office-checkbox-size": "16px",
-  "--office-checkbox-size-touch": "22px",
-  "--office-checkbox-radius": "3px",
-  "--office-checkbox-border": "var(--office-border, #d1d5db)",
-  "--office-checkbox-background": "var(--office-background, #ffffff)",
-  "--office-checkbox-accent": "var(--office-accent, #2563eb)",
-  "--office-checkbox-accent-foreground": "var(--office-accent-foreground, #ffffff)",
-  "--office-radio-dot-size": "8px",
-  "--office-radio-dot-size-touch": "12px",
-  "--office-switch-width": "32px",
-  "--office-switch-height": "18px",
-  "--office-switch-width-touch": "44px",
-  "--office-switch-height-touch": "24px",
-  "--office-switch-border-width": "1px",
-  "--office-switch-knob-size": "12px",
-  "--office-switch-knob-size-touch": "18px",
-  "--office-switch-knob-offset": "2px",
-  "--office-switch-border": "var(--office-border, #d1d5db)",
-  "--office-switch-track": "var(--office-surface, #f3f4f6)",
-  "--office-switch-track-on": "var(--office-accent, #2563eb)",
-  "--office-switch-thumb": "var(--office-foreground, #1f2937)",
-  "--office-switch-thumb-on": "var(--office-accent-foreground, #ffffff)",
-  // Component: ribbon, status bar, tabs
-  "--office-ribbon-tab-height": "35px",
-  "--office-ribbon-contextual": "var(--office-accent, #2563eb)",
-  "--office-ribbon-group-gap": "2px",
-  "--office-ribbon-group-height": "78px",
-  "--office-ribbon-group-padding": "4px 8px 2px",
-  "--office-ribbon-separator-inset": "0px",
-  "--office-ribbon-separator": "color-mix(in srgb, var(--office-border, #d1d5db) 60%, transparent)",
-  "--office-ribbon-caption-size": "10px",
-  "--office-ribbon-caption-padding": "2px 0 0",
-  "--office-launcher-inset-end": "-6px",
-  "--office-launcher-inset-bottom": "-1px",
-  "--office-ribbon-compact-row-max": "36px",
-  "--office-ribbon-stack-max-height": "80px",
-  "--office-ribbon-collapse-x": "8px",
-  "--office-ribbon-collapse-y": "120px",
-  "--office-command-icon-color": "currentColor",
-  "--office-command-large-height": "66px",
-  "--office-command-large-min-width": "48px",
-  "--office-command-large-max-width": "80px",
-  "--office-command-large-icon": "32px",
-  "--office-command-small-icon": "16px",
-  "--office-command-tall-height": "62px",
-  "--office-command-tall-min-width": "40px",
-  "--office-command-tall-icon": "30px",
-  "--office-command-active": "color-mix(in srgb, var(--office-accent, #2563eb) 15%, transparent)",
-  "--office-collapsed-group-min-width": "56px",
-  "--office-ribbon-caption-line-height": "12px",
-  "--office-ribbon-row-height": "22px",
-  "--office-ribbon-file-min-width": "52px",
-  "--office-launcher-width": "16px",
-  "--office-launcher-height": "14px",
-  "--office-tab-indicator-width": "2.5px",
-  "--office-status-bar-height": "24px",
-  "--office-status-bar-separator-opacity": "1",
-  "--office-tab-height": "28px",
-  "--office-tab-max-width": "220px",
-  "--office-zoom-slider-width": "120px",
-  "--office-zoom-slider-min-width": "48px",
-  "--office-zoom-value-width": "40px",
-  // Component: panels and dialogs
-  "--office-dialog-width": "auto",
-  "--office-dialog-max-width": "min(640px, 100vw)",
-  "--office-dialog-max-height": "90vh",
-  "--office-dialog-min-width": "min(320px, 100vw)",
-  "--office-dialog-button-min-width": "76px",
-  "--office-options-width": "min(728px, 92vw)",
-  "--office-options-nav-width": "172px",
-  "--office-options-height": "510px",
-  "--office-options-chrome-height": "130px",
-  "--office-options-text-width": "180px",
-  "--office-options-row-height": "30px",
-  "--office-options-number-width": "112px",
-  "--office-options-check-size": "16px",
-  "--office-info-size": "15px",
-  "--office-selection-bar-width": "3px",
-  "--office-backstage-nav-width": "200px",
-  "--office-backstage-nav-background": "var(--office-accent, #2563eb)",
-  "--office-backstage-nav-foreground": "var(--office-accent-foreground, #ffffff)",
-  "--office-backstage-item-hover": "rgb(0 0 0 / 22%)",
-  "--office-backstage-padding": "28px 40px",
-  "--office-backstage-back-size": "36px",
-  "--office-backstage-item-height": "38px",
-  "--office-menu-min-width": "180px",
-  "--office-menu-max-height": "60vh",
-  "--office-context-menu-min-width": "200px",
-  "--office-search-popup-min-width": "240px",
-  "--office-search-popup-max-height": "320px",
-  "--office-select-max-height": "240px",
-  "--office-select-background": "var(--office-background, #ffffff)",
-  "--office-select-menu-min-width": "90px",
-  "--office-select-option-active": "color-mix(in srgb, var(--office-accent, #2563eb) 20%, var(--office-popover, #ffffff))",
-  "--office-select-ribbon-menu-width": "192px",
-  "--office-font-picker-max-height": "320px",
-  "--office-font-picker-width": "256px",
-  "--office-chevron-size": "6px",
-  "--office-ribbon-combo-height": "28px",
-  "--office-ribbon-icon-select-width": "36px",
-  "--office-search-width": "320px",
-  "--office-print-preview-width": "420px",
-  "--office-find-max-width": "640px",
-  "--office-find-bar-height": "40px",
-  "--office-find-replace-field-min-width": "120px",
-  "--office-find-replace-select-min-width": "150px",
-  "--office-ruler-size": "18px",
-  "--office-avatar-size": "48px",
-  "--office-avatar-color": "var(--office-muted-foreground, #6b7280)",
-  "--office-toast-width": "360px",
-  "--office-comments-pane-width": "300px",
-  "--office-comment-avatar-size": "24px",
-  "--office-account-field-width": "320px",
-  // Component: galleries
-  "--office-gallery-trigger-height": "24px",
-  "--office-gallery-strip-background": "color-mix(in srgb, var(--office-surface, #f3f4f6) 30%, transparent)",
-  "--office-gallery-command-min-width": "54px",
-  "--office-gallery-command-max-width": "78px",
-  "--office-gallery-command-height": "58px",
-  "--office-gallery-command-icon": "24px",
-  "--office-gallery-popup-max-height": "65vh",
-  // Component: title bar
-  "--office-title-bar-height": "36px",
-  "--office-title-bar-below-height": "28px",
-  "--office-title-bar-background": "var(--office-surface, #f3f4f6)",
-  "--office-title-bar-foreground": "var(--office-foreground, #1f2937)",
-  "--office-title-bar-border": "var(--office-border, #d1d5db)",
-  "--office-title-bar-mark-size": "20px",
-  "--office-title-bar-mark-background": "var(--office-accent, #2563eb)",
-  "--office-title-bar-mark-foreground": "var(--office-accent-foreground, #ffffff)",
-  "--office-title-bar-name-foreground": "var(--office-title-bar-foreground, var(--office-foreground, #1f2937))",
-  "--office-title-bar-result-selected": "var(--office-selected, #e5e7eb)",
-  "--office-title-bar-name-max-width": "240px",
-  "--office-title-bar-name-max-width-narrow": "140px",
-  "--office-title-bar-search-max-width": "448px",
-  "--office-title-bar-results-max-height": "256px",
-  // Component: team workspace (a Teams-like surface)
-  "--office-teams-brand": "#5b5fc7",
-  "--office-teams-brand-hover": "#4f52b2",
-  "--office-teams-brand-pressed": "#3f4296",
-  "--office-teams-brand-subtle": "#e8ebfa",
-  "--office-teams-brand-foreground": "#ffffff",
-  "--office-teams-rail": "#ebebeb",
-  "--office-teams-panel": "#f5f5f5",
-  "--office-teams-bubble": "#f5f5f5",
-  "--office-teams-bubble-own": "#e8ebfa",
-  "--office-teams-divider": "#e0e0e0",
-  "--office-teams-text-subtle": "#616161",
-  "--office-teams-message-gap": "var(--office-space-3)",
-  "--office-teams-message-padding": "var(--office-space-2) var(--office-space-3)",
-  "--office-presence-available": "#6bb700",
-  "--office-presence-busy": "#c50f1f",
-  "--office-presence-away": "#eaa300",
-  "--office-presence-offline": "#8a8886",
-  "--office-file-docx": "#2b579a",
-  "--office-file-xlsx": "#217346",
-  "--office-file-pptx": "#c43e1c",
-  "--office-file-vsdx": "#3955a3",
-  "--office-file-other": "#6b7280",
-  "--office-call-background": "#292929",
-  "--office-call-tile": "#3d3d3d",
-  "--office-call-foreground": "#ffffff",
-  "--office-call-muted-foreground": "#c8c8c8",
-  "--office-call-control": "#3d3d3d",
-  "--office-call-control-hover": "#525252",
-  "--office-call-danger": "#c4314b",
-  "--office-call-danger-hover": "#a72a40",
-  "--office-call-live": "#6bb700",
-  "--office-call-scrim": "rgb(0 0 0 / 60%)",
-  "--office-shadow-teams": "0 2px 4px rgb(0 0 0 / 14%), 0 0 2px rgb(0 0 0 / 12%)"
-};
-function tok2(name) {
-  return `var(${name}, ${OFFICE_TOKENS[name]})`;
-}
-`outline: ${tok2("--office-focus-width")} solid ${tok2("--office-ring")}; outline-offset: ${tok2("--office-focus-offset")};`;
-var COMPACT = "(max-width: 767px)";
-var TOUCH = `(pointer: coarse), ${COMPACT}`;
-
 // src/styles.ts
 var COMMON_CONTROL_CSS = `
 :host([hidden]) { display: none !important; }
 @media ${TOUCH} {
-	:host { --office-target-size: ${tok2("--office-target-size-touch")}; }
+	:host { --office-target-size: ${tok("--office-target-size-touch")}; }
 }
 @media (forced-colors: active) {
-	:host(:focus-visible), :focus-visible { outline: ${tok2("--office-focus-width")} solid Highlight; outline-offset: ${tok2("--office-focus-offset")}; }
+	:host(:focus-visible), :focus-visible { outline: ${tok("--office-focus-width")} solid Highlight; outline-offset: ${tok("--office-focus-offset")}; }
 }
 `;
 
@@ -79122,8 +78845,8 @@ var OfficeUiPasteOptions = class extends OfficeElement {
   willUpdate() {
     const { left, top } = this.model;
     this.hostWrite(() => {
-      this.style.left = `calc(${left}px + ${tok2("--office-space-1")})`;
-      this.style.top = `calc(${top}px + ${tok2("--office-space-1")})`;
+      this.style.left = `calc(${left}px + ${tok("--office-space-1")})`;
+      this.style.top = `calc(${top}px + ${tok("--office-space-1")})`;
     });
   }
   render() {
@@ -79908,7 +79631,7 @@ var defineRibbonGroup = definer("office-ui-ribbon-group", () => OfficeUiRibbonGr
 var ribbon_section_default = ":host {\n	display: inline-flex;\n	align-items: stretch;\n}\n::slotted(*) {\n	flex: none;\n}\n";
 
 // src/ribbon/ribbon-section.ts
-var COLUMN_STYLE = { display: "flex", flexDirection: "column", gap: tok2("--office-space-0") };
+var COLUMN_STYLE = { display: "flex", flexDirection: "column", gap: tok("--office-space-0") };
 function setOptional(el, name, value) {
   if (value === void 0) el.removeAttribute(name);
   else el.setAttribute(name, String(value));
@@ -82176,60 +81899,40 @@ var defineTitleBar = definer("office-ui-title-bar", () => OfficeUiTitleBar, [
 
 // src/pptx/web-components/office-token-bridge.ts
 var BASE = `
-	--office-font: system-ui, sans-serif;
-	--office-foreground: var(--pptx-foreground, #f3f4f6);
-	--office-muted-foreground: var(--pptx-muted-foreground, #9ca3af);
-	--office-background: var(--pptx-background, #030712);
-	--office-surface: var(--pptx-muted, #2a2a3d);
-	--office-selected: var(--pptx-accent, #33334d);
-	--office-border: var(--pptx-border, #374151);
-	--office-accent: var(--pptx-primary, #6366f1);
-	--office-accent-foreground: var(--pptx-primary-foreground, #fff);
-	--office-ring: ${tok("--pptx-focus-ring-color")};
-	--office-popover: var(--pptx-popover, #111827);
-	--office-popover-foreground: var(--pptx-popover-foreground, var(--pptx-foreground, #e2e8f0));
-	--office-danger: #b91c1c;
-	--office-warning: #d97706;
-	--office-info: #60a5fa;
-	--office-notice-background: rgb(120 53 15 / 20%);
-	--office-notice-foreground: #fde68a;
-	--office-notice-border: rgb(180 83 9 / 30%);
-	--office-notice-accent: #fbbf24;
-	--office-shadow: 0 8px 20px rgb(0 0 0 / 35%);
-	--office-shadow-lg: 0 10px 25px rgb(0 0 0 / 35%);
-	--office-focus-width: ${tok("--pptx-focus-ring-width")};
-	--office-focus-offset: ${tok("--pptx-focus-ring-offset")};
-	--office-target-size-touch: ${tok("--pptx-touch-target")};
-	--office-field-height: ${tok("--pptx-field-height")};
-	--office-field-height-lg: ${tok("--pptx-field-height-lg")};
-	--office-field-radius: ${tok("--pptx-field-radius")};
-	--office-field-border: ${tok("--pptx-field-border")};
-	--office-field-border-focus: ${tok("--pptx-field-border-focus")};
-	--office-field-background: ${tok("--pptx-field-bg")};
-	--office-field-foreground: ${tok("--pptx-field-fg")};
-	--office-field-placeholder: ${tok("--pptx-field-placeholder")};
-	--office-checkbox-size: ${tok("--pptx-checkbox-size")};
-	--office-checkbox-size-touch: ${tok("--pptx-checkbox-size-touch")};
-	--office-checkbox-radius: ${tok("--pptx-checkbox-radius")};
-	--office-checkbox-border: ${tok("--pptx-checkbox-border")};
-	--office-checkbox-background: ${tok("--pptx-checkbox-bg")};
-	--office-checkbox-accent: ${tok("--pptx-checkbox-accent")};
-	--office-checkbox-accent-foreground: ${tok("--pptx-checkbox-accent-fg")};
-	--office-radio-dot-size: ${tok("--pptx-radio-dot-size")};
-	--office-radio-dot-size-touch: ${tok("--pptx-radio-dot-size-touch")};
-	--office-switch-width: ${tok("--pptx-switch-width")};
-	--office-switch-height: ${tok("--pptx-switch-height")};
-	--office-switch-width-touch: ${tok("--pptx-switch-width")};
-	--office-switch-height-touch: ${tok("--pptx-switch-height")};
+	--office-ring: var(--pptx-focus-ring-color, var(--_pptx-ring));
+	--office-focus-width: ${tok2("--pptx-focus-ring-width")};
+	--office-focus-offset: ${tok2("--pptx-focus-ring-offset")};
+	--office-target-size-touch: ${tok2("--pptx-touch-target")};
+	--office-field-height: ${tok2("--pptx-field-height")};
+	--office-field-height-lg: ${tok2("--pptx-field-height-lg")};
+	--office-field-radius: ${tok2("--pptx-field-radius")};
+	--office-field-border: ${tok2("--pptx-field-border")};
+	--office-field-border-focus: ${tok2("--pptx-field-border-focus")};
+	--office-field-background: ${tok2("--pptx-field-bg")};
+	--office-field-foreground: ${tok2("--pptx-field-fg")};
+	--office-field-placeholder: ${tok2("--pptx-field-placeholder")};
+	--office-checkbox-size: ${tok2("--pptx-checkbox-size")};
+	--office-checkbox-size-touch: ${tok2("--pptx-checkbox-size-touch")};
+	--office-checkbox-radius: ${tok2("--pptx-checkbox-radius")};
+	--office-checkbox-border: ${tok2("--pptx-checkbox-border")};
+	--office-checkbox-background: ${tok2("--pptx-checkbox-bg")};
+	--office-checkbox-accent: ${tok2("--pptx-checkbox-accent")};
+	--office-checkbox-accent-foreground: ${tok2("--pptx-checkbox-accent-fg")};
+	--office-radio-dot-size: ${tok2("--pptx-radio-dot-size")};
+	--office-radio-dot-size-touch: ${tok2("--pptx-radio-dot-size-touch")};
+	--office-switch-width: ${tok2("--pptx-switch-width")};
+	--office-switch-height: ${tok2("--pptx-switch-height")};
+	--office-switch-width-touch: ${tok2("--pptx-switch-width")};
+	--office-switch-height-touch: ${tok2("--pptx-switch-height")};
 	--office-switch-border-width: 0px;
-	--office-switch-knob-size: ${tok("--pptx-switch-knob-size")};
-	--office-switch-knob-size-touch: ${tok("--pptx-switch-knob-size")};
-	--office-switch-knob-offset: ${tok("--pptx-switch-knob-offset")};
-	--office-switch-knob-travel: ${tok("--pptx-switch-knob-travel")};
-	--office-switch-track: ${tok("--pptx-switch-track")};
-	--office-switch-track-on: ${tok("--pptx-switch-track-on")};
-	--office-switch-thumb: ${tok("--pptx-switch-thumb")};
-	--office-switch-thumb-on: ${tok("--pptx-switch-thumb")};
+	--office-switch-knob-size: ${tok2("--pptx-switch-knob-size")};
+	--office-switch-knob-size-touch: ${tok2("--pptx-switch-knob-size")};
+	--office-switch-knob-offset: ${tok2("--pptx-switch-knob-offset")};
+	--office-switch-knob-travel: ${tok2("--pptx-switch-knob-travel")};
+	--office-switch-track: ${tok2("--pptx-switch-track")};
+	--office-switch-track-on: ${tok2("--pptx-switch-track-on")};
+	--office-switch-thumb: ${tok2("--pptx-switch-thumb")};
+	--office-switch-thumb-on: ${tok2("--pptx-switch-thumb")};
 `;
 var TITLE_BAR = `:host {
 	--office-title-bar-height: ${TITLE_BAR_METRICS.height}px;
@@ -82249,10 +81952,7 @@ var TITLE_BAR = `:host {
 	--office-icon-stroke: 1.4;
 	--office-control-height-md: 24px;
 	--office-selected: color-mix(in srgb, var(--pptx-accent, #33334d) 60%, transparent);
-	--office-warning: #eab308;
-	--office-danger: #f87171;
 	--office-popover: var(--pptx-popover, var(--pptx-card, #1e1e2e));
-	--office-shadow-lg: 0 14px 28px rgb(0 0 0 / 40%);
 	--pptx-switch-width: ${TITLE_BAR_METRICS.switchTrackWidth}px;
 	--pptx-switch-height: ${TITLE_BAR_METRICS.switchTrackHeight}px;
 	--pptx-switch-knob-size: ${TITLE_BAR_METRICS.switchKnobSize}px;
@@ -82271,8 +81971,6 @@ var STATUS_BAR = `:host {
 	--office-font-size-xs: 10px;
 	--office-control-height-xs: 24px;
 	--office-icon-stroke: 1.45;
-	--office-warning: #facc15;
-	--office-danger: #f87171;
 	line-height: 1.2;
 }`;
 var EXTRAS = {
@@ -82281,7 +81979,7 @@ var EXTRAS = {
   "pptx-ui-ribbon-gallery": `:host { --office-foreground: var(--pptx-foreground, #f9fafb); --office-background: var(--pptx-background, #111827);
 	--office-gallery-strip-background: color-mix(in srgb, var(--pptx-muted, #2a2a3d) 30%, transparent);
 	--office-command-icon-color: var(--pptx-primary, #6366f1); --office-z-popover: 1200;
-	--office-popover-foreground: var(--pptx-popover-foreground, #f9fafb); --office-shadow-lg: 0 8px 24px #0006;
+	--office-popover-foreground: var(--pptx-popover-foreground, #f9fafb);
 	--office-icon-stroke: 1.6; --office-line-height-tight: 11px; }`,
   "pptx-ui-select": `:host { --office-select-background: var(--pptx-select-control-bg, var(--pptx-background, #11111b)); }
 :host(.bg-muted) { --office-select-background: var(--pptx-muted, #1f2937); }
@@ -82305,8 +82003,38 @@ var EXTRAS = {
 	--office-selected: var(--pptx-accent, #33334d); --office-radius-md: var(--pptx-radius, 6px); }`
 };
 function bridgeCss(tag) {
-  return `:host {${BASE}}
-${EXTRAS[tag] ?? ""}`;
+  const extras = EXTRAS[tag] ?? "";
+  const palette = new Set(Object.values(LEGACY_OFFICE_THEME_TOKENS));
+  const inner2 = extras.replace(
+    /(:host(?:\([^)]*\))?)\s*\{([^{}]*)\}/g,
+    (_rule, selector, body) => {
+      const host2 = [];
+      const children = [];
+      for (const declaration of body.split(";").map((value) => value.trim()).filter(Boolean)) {
+        const property = declaration.slice(0, declaration.indexOf(":")).trim();
+        if (palette.has(property)) children.push(declaration);
+        else {
+          host2.push(declaration);
+          if (property.startsWith("--office-")) {
+            const input = `--_pptx-control-${property.slice("--office-".length)}`;
+            host2.push(`${input}: var(${property})`);
+            children.push(`${property}: var(${input})`);
+          }
+        }
+      }
+      return `${selector} { ${host2.join(";")}; } ${selector} > * { ${children.join(";")}; }`;
+    }
+  );
+  const hostTokens = BASE.replace(/--office-ring:[^;]+;/, "");
+  const hostColor = ["pptx-ui-checkbox", "pptx-ui-radio", "pptx-ui-switch"].includes(tag) ? "" : "color:var(--_pptx-foreground);";
+  return withOfficeThemeCss(
+    `:host { ${hostTokens} ${hostColor} font-family:var(--_pptx-font); }
+${legacyThemeBridge(":host > *", "--_pptx-")}
+:host > * {${BASE}}
+${inner2}
+:host(:focus-visible) { outline-color:var(--pptx-focus-ring-color,var(--_pptx-ring)); }`,
+    ":host"
+  );
 }
 var OFFICE_TOKEN_BRIDGE = `
 /* Bindings put utility classes on the host; only the shadow trigger draws a box. */
@@ -82998,7 +82726,7 @@ var PRESENTER_CONSOLE_STYLES = `
 .strip {
 	box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: ${PRESENTER_LAYOUT_METRICS.stripGap}px;
 	padding: ${PRESENTER_LAYOUT_METRICS.stripPaddingY}px ${PRESENTER_LAYOUT_METRICS.stripPaddingX}px; border-bottom: 1px solid var(--pptx-border, #33334d);
-	background: var(--pptx-card, #1e1e2e); color: var(--pptx-foreground, #e2e8f0); font: 12px/16px system-ui, sans-serif;
+	background: var(--pptx-card, #1e1e2e); color: var(--pptx-foreground, #e2e8f0); font: 12px/16px var(--pptx-font,var(--office-font,system-ui,sans-serif));
 }
 svg { flex: none; width: ${PRESENTER_LAYOUT_METRICS.controlIconSize}px; height: ${PRESENTER_LAYOUT_METRICS.controlIconSize}px; }
 button {
@@ -86738,7 +86466,7 @@ var SUBTITLE_SETTINGS_STYLES = `
 :host { display: inline-flex; }
 dialog { box-sizing: border-box; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  margin: auto; padding: 24px; border: 1px solid var(--pptx-border, #374151); border-radius: 10px;
- background: var(--pptx-background, #181b20); color: var(--pptx-foreground, #f9fafb); font: 14px/1.5 system-ui; }
+ background: var(--pptx-background, #181b20); color: var(--pptx-foreground, #f9fafb); font: 14px/1.5 var(--pptx-font,var(--office-font,system-ui,sans-serif)); }
 dialog::backdrop { background: #0008; }
 h2 { margin: 0 0 12px; font-size: 18px; } p { margin: 0 0 20px; }
 label { display: block; margin-bottom: 8px; }
@@ -86956,7 +86684,7 @@ var THEME_EDITOR_STYLES = `
 :host { display: block; position: fixed; z-index: 1090; box-sizing: border-box; width: 288px;
  color: var(--pptx-foreground, #e2e8f0); background: var(--pptx-card, #181c20);
  border-left: 1px solid var(--pptx-border, #33334d); box-shadow: -8px 0 24px #0002;
- font: 12px/1.4 var(--pptx-ui-font-family, system-ui, sans-serif); }
+ font: 12px/1.4 var(--pptx-ui-font-family, var(--office-font, system-ui, sans-serif)); }
 :host([inline]) { position: static; width: 100%; border: 0; box-shadow: none; }
 :host([inline]) .close { display: none; }
 * { box-sizing: border-box; }
@@ -87478,7 +87206,7 @@ var CHART_FORMAT_PANE_STYLES = `
 :host { display: block; position: fixed; z-index: 1090; box-sizing: border-box; width: 288px;
  color: var(--pptx-foreground, #e2e8f0); background: var(--pptx-card, #181c20);
  border-left: 1px solid var(--pptx-border, #33334d); box-shadow: -8px 0 24px #0002;
- font: 12px/1.4 var(--pptx-ui-font-family, system-ui, sans-serif); }
+ font: 12px/1.4 var(--pptx-ui-font-family, var(--office-font, system-ui, sans-serif)); }
 :host([inline]) { position: static; width: 100%; border: 0; box-shadow: none; }
 * { box-sizing: border-box; }
 .panel { display: flex; flex-direction: column; height: 100%; min-height: 0; }
@@ -88426,6 +88154,7 @@ function registerPptxWebControls() {
   if (typeof window === "undefined" || !window.customElements) {
     return;
   }
+  installOfficeUiTheme(document);
   const registry2 = window.customElements;
   assertWebControlContract(
     registry2,
@@ -88434,7 +88163,10 @@ function registerPptxWebControls() {
   if (!document.getElementById("pptx-ui-control-hosts")) {
     const style = document.createElement("style");
     style.id = "pptx-ui-control-hosts";
-    style.textContent = HOST_STYLES + OFFICE_TOKEN_BRIDGE;
+    style.textContent = withOfficeThemeCss(
+      HOST_STYLES + OFFICE_TOKEN_BRIDGE,
+      controls.map(([name]) => name).join(",")
+    );
     document.head.append(style);
   }
   for (const [name, define] of controls) {