ooxml-ui 1.18.2 → 1.19.0

package/README.md

@@ -122,10 +122,64 @@ PowerPoint continues to use the same component for ribbon galleries.
 
 Every entry declares an `import` and a `default` export condition, so CommonJS consumers on Node 20.19+ or 22.12+ load it through `require(esm)`.
 
+`installOfficeUiTheme()` installs one theme stylesheet in the document by default. Pass a
+`ShadowRoot` to install scoped mode and control rules inside an embedding app's shadow tree.
+`installOfficeUiThemeFor(element)` installs document defaults plus rules in every enclosing shadow
+root. Product canvases and `prepareOfficeUiBlock()` use this host-aware installation automatically;
+the latter checks again after native framework insertion. Theme attributes inside Angular shadow
+views and other shadow containers therefore work alongside inherited custom properties.
+
+Use semantic `--office-*` palette tokens on a shared ancestor to theme all controls. When overriding
+a specific derived control token, such as `--office-select-background`, apply it to the actual
+control. Product compatibility bridges recompute dependent defaults on their inner chrome so those
+controls follow the product palette.
+
 Importing an entry never touches the DOM (SSR-safe). Elements are defined by the `define*` /
 `register*` functions, which are idempotent, no-ops without a `window`, and refuse to coexist
 with an incompatible build of this package.
 
+## One theme for composed editors
+
+Use the shared `--office-*` CSS tokens on a common ancestor of the canvas and its standalone
+controls. `data-office-theme="light"`, `"dark"`, or `"auto"` works on the document root or a
+scoped container, so two editors on the same page can use different modes. `auto` follows the
+system colour scheme. Nested mode scopes retain inherited typography, spacing and radii.
+
+```html
+<section class="office-scope" data-office-theme="dark">
+	<!-- Mount the framework's standalone toolbar, canvas and other controls here. -->
+</section>
+```
+
+```css
+.office-scope {
+	--office-accent: #0d9488;
+	--office-accent-foreground: #ffffff;
+	--office-ring: #0f766e;
+	--office-font: 'Inter', system-ui, sans-serif;
+	--office-radius: 6px;
+}
+```
+
+Change the attribute or CSS tokens through your framework's normal bindings. Theme changes do
+not require remounting the editor. The semantic palette includes `--office-background` (fields
+and application background), `--office-surface` (toolbar and panel surfaces), `--office-foreground`,
+`--office-muted-foreground`, `--office-border`, `--office-selected`, and the accent and focus tokens
+above. Document paper, cell fills and slide artwork remain document content.
+
+Library-supplied native building blocks opt into `BUILDING_BLOCKS_CSS` through
+`prepareOfficeUiBlock(element, kind, product)`, exported by `ooxml-ui/theme`. It installs the shared
+theme in the element's owner document and marks only that control root with `data-office-block`
+and `data-office-product`. Hosts' own unmarked controls are unaffected. Shadow-root controls
+inherit the same tokens. The installed stylesheet is idempotent and supports forced colours and
+touch targets.
+
+Existing product overrides (`--dve-*`, `--xve-*`, `--vv-*`, `--pptx-*`, and legacy theme options)
+remain compatibility inputs. An explicit product override wins for that product. For a uniform
+composition, put the shared tokens and mode on the common ancestor instead of configuring only
+the canvas: a canvas's local theme cannot change the CSS inherited by a sibling toolbar. This UI
+theme contract is separate from an Office document's embedded theme.
+
 ## Features: elements
 
 `office-ui-menu-button` accepts `submenu` when nested inside another menu.

package/dist/building-block-styles.d.ts

@@ -0,0 +1,5 @@
+export type OfficeUiBlockKind = 'toolbar' | 'formula-bar' | 'tabs' | 'inspector';
+export type OfficeUiProduct = 'docx' | 'xlsx' | 'visio' | 'pptx';
+/** Opt-in styles for native framework controls. They never target host-owned controls implicitly. */
+export declare const BUILDING_BLOCKS_CSS: string;
+//# sourceMappingURL=building-block-styles.d.ts.map

package/dist/building-block-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"building-block-styles.d.ts","sourceRoot":"","sources":["../src/building-block-styles.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,aAAa,GAAG,MAAM,GAAG,WAAW,CAAC;AACjF,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAiDjE,qGAAqG;AACrG,eAAO,MAAM,mBAAmB,QAsD/B,CAAC"}

package/dist/chunk-6Y7KR2I3.js

@@ -0,0 +1,299 @@
+import { OFFICE_TOKENS, TOUCH } from './chunk-LD3K2RDN.js';
+
+// src/theme-bridge.ts
+var LEGACY_OFFICE_THEME_TOKENS = {
+  background: "--office-background",
+  foreground: "--office-foreground",
+  card: "--office-surface",
+  "card-foreground": "--office-foreground",
+  popover: "--office-popover",
+  "popover-foreground": "--office-popover-foreground",
+  primary: "--office-accent",
+  "primary-foreground": "--office-accent-foreground",
+  secondary: "--office-surface",
+  "secondary-foreground": "--office-foreground",
+  muted: "--office-surface",
+  "muted-foreground": "--office-muted-foreground",
+  accent: "--office-selected",
+  "accent-foreground": "--office-foreground",
+  destructive: "--office-danger",
+  "destructive-foreground": "--office-danger-foreground",
+  border: "--office-border",
+  input: "--office-border",
+  ring: "--office-ring",
+  radius: "--office-radius",
+  font: "--office-font"
+};
+function legacyThemeAliases(selector, prefix, privatePrefix) {
+  return `${selector} {
+${Object.entries(LEGACY_OFFICE_THEME_TOKENS).map(
+    ([name, canonical]) => `${privatePrefix}${name}: var(${prefix}${name}, var(${canonical}, ${OFFICE_TOKENS[canonical]}));`
+  ).join("\n")}
+}`;
+}
+function legacyThemeBridge(selector, privatePrefix) {
+  return shadcnBridge(selector, privatePrefix, {
+    extra: {
+      "--office-font": `var(${privatePrefix}font)`,
+      "--office-radius": `var(${privatePrefix}radius)`
+    }
+  });
+}
+var SHADCN_NAMES = [
+  "foreground",
+  "muted-foreground",
+  "background",
+  "card",
+  "accent",
+  "border",
+  "primary",
+  "primary-foreground",
+  "ring",
+  "popover",
+  "popover-foreground",
+  "destructive",
+  "destructive-foreground"
+].map((name) => {
+  const token = LEGACY_OFFICE_THEME_TOKENS[name];
+  return name === "popover-foreground" ? [token, name, "foreground"] : [token, name];
+});
+var reads = (value2) => [...value2.matchAll(/var\((--office-[\w-]+)/g)].map((m) => m[1]);
+function derivedTokens(bridged) {
+  const derived = /* @__PURE__ */ new Map();
+  let grew = true;
+  while (grew) {
+    grew = false;
+    for (const [name, value2] of Object.entries(OFFICE_TOKENS)) {
+      if (bridged.has(name) || derived.has(name)) continue;
+      if (reads(value2).some((token) => bridged.has(token) || derived.has(token))) {
+        derived.set(name, value2);
+        grew = true;
+      }
+    }
+  }
+  return [...derived];
+}
+function themeBridge(selector, map) {
+  const mapped = Object.entries(map).filter((entry) => !!entry[1]);
+  const lines = [...mapped, ...derivedTokens(new Set(mapped.map(([name]) => name)))].map(
+    ([name, value2]) => `	${name}: ${value2};`
+  );
+  return `${selector} {
+${lines.join("\n")}
+}
+`;
+}
+function shadcnBridge(selector, prefix, options = {}) {
+  const map = {};
+  for (const [token, name, fallbackName] of SHADCN_NAMES) {
+    const fallback = options.fallbacks?.[name];
+    const inner = fallbackName ? `var(${prefix}${fallbackName})` : fallback;
+    map[token] = `var(${prefix}${name}${inner ? `, ${inner}` : ""})`;
+  }
+  return themeBridge(selector, { ...map, ...options.extra });
+}
+
+// src/building-block-styles.ts
+var value = (name) => `var(${name}, ${OFFICE_TOKENS[name]})`;
+var palette = {
+  foreground: "--office-foreground",
+  background: "--office-background",
+  surface: "--office-surface",
+  border: "--office-border",
+  accent: "--office-accent",
+  selected: "--office-selected",
+  ring: "--office-ring",
+  font: "--office-font",
+  radius: "--office-radius"
+};
+function productAliases(product) {
+  const names = product === "visio" ? {
+    foreground: "ink",
+    background: "surface",
+    surface: "surface",
+    border: "border",
+    accent: "accent",
+    selected: "accent-soft",
+    ring: "focus",
+    font: "font",
+    radius: "radius"
+  } : {
+    foreground: "foreground",
+    background: "background",
+    surface: "card",
+    border: "border",
+    accent: "primary",
+    selected: "accent",
+    ring: "ring",
+    font: "font",
+    radius: "radius"
+  };
+  const prefix = { docx: "--dve-", xlsx: "--xve-", visio: "--vv-", pptx: "--pptx-" }[product];
+  return `:where([data-office-block][data-office-product="${product}"]) {
+${Object.entries(palette).map(
+    ([key, token]) => `--_office-block-${key}: var(${prefix}${names[key]}, ${value(token)});`
+  ).join("\n")}
+}`;
+}
+var BUILDING_BLOCKS_CSS = `
+:where([data-office-block]) {
+${Object.entries(palette).map(([key, token]) => `--_office-block-${key}: ${value(token)};`).join("\n")}
+  box-sizing: border-box;
+  color: var(--_office-block-foreground);
+  background: var(--_office-block-surface);
+  font-family: var(--_office-block-font);
+  font-size: ${value("--office-font-size")};
+  line-height: ${value("--office-line-height")};
+}
+${["docx", "xlsx", "visio", "pptx"].map(productAliases).join("\n")}
+:where([data-office-block="toolbar"], [data-office-block="formula-bar"], [data-office-block="tabs"]:not(select)) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: ${value("--office-space-1")};
+  padding: ${value("--office-space-1")};
+  border: ${value("--office-border-width")} solid var(--_office-block-border);
+  border-radius: var(--_office-block-radius);
+}
+:where([data-office-block] button, [data-office-block] input, [data-office-block] select,
+  button[data-office-block], input[data-office-block], select[data-office-block]) {
+  box-sizing: border-box;
+  font-family: var(--_office-block-font);
+  font-size: ${value("--office-font-size")};
+  line-height: ${value("--office-line-height")};
+  color: var(--_office-block-foreground);
+  background: var(--_office-block-background);
+  border: ${value("--office-border-width")} solid var(--_office-block-border);
+  border-radius: var(--_office-block-radius);
+  min-height: ${value("--office-target-size")};
+  padding: ${value("--office-space-1")} ${value("--office-space-2")};
+}
+:where([data-office-block] button, button[data-office-block]) { cursor: pointer; }
+:where([data-office-block] button:hover:not(:disabled)) { background: var(--_office-block-selected); }
+:where([data-office-block] [aria-pressed="true"], [data-office-block] [aria-pressed="mixed"],
+  [data-office-block] [aria-selected="true"]) {
+  background: var(--_office-block-selected);
+  border-color: var(--_office-block-accent);
+}
+:where([data-office-block] :focus-visible, [data-office-block]:focus-visible) {
+  outline: ${value("--office-focus-width")} solid var(--_office-block-ring);
+  outline-offset: ${value("--office-focus-offset")};
+}
+:where([data-office-block] :disabled, [data-office-block]:disabled) { opacity: .55; cursor: default; }
+:where([data-office-block] [aria-invalid="true"]) { border-color: ${value("--office-danger")}; }
+:where([data-office-block="formula-bar"] input:last-child) { flex: 1; min-width: 8em; }
+:where([data-office-block="inspector"]) { padding: ${value("--office-space-2")}; }
+:where([data-office-block="inspector"] dl) { display: grid; grid-template-columns: auto 1fr; gap: ${value("--office-space-1")}; }
+:where([data-office-block="inspector"] dt) { font-weight: ${value("--office-font-weight-bold")}; }
+:where([data-office-block="inspector"] dd) { margin: 0; overflow-wrap: anywhere; }
+:where([data-office-block="inspector"] a) { color: var(--_office-block-accent); }
+`;
+
+// src/theme.ts
+var THEME_STYLE_ID = "office-ui-theme";
+var DARK = `
+	--office-foreground: #f9fafb;
+	--office-muted-foreground: #9ca3af;
+	--office-background: #111827;
+	--office-surface: #1f2937;
+	--office-border: #374151;
+	--office-accent: #6366f1;
+	--office-ring: #818cf8;
+	--office-danger: #f87171;
+	--office-selected: #374151;
+	--office-notice-background: rgb(120 53 15 / 20%);
+	--office-notice-foreground: #fde68a;
+	--office-notice-accent: #fbbf24;
+	--office-info: #60a5fa;
+	--office-warning: #f59e0b;
+	--office-teams-brand: #7f85f5;
+	--office-teams-brand-hover: #96a0ff;
+	--office-teams-brand-subtle: #2f2f4a;
+	--office-teams-rail: #141414;
+	--office-teams-panel: #1f1f1f;
+	--office-teams-bubble: #2d2d2d;
+	--office-teams-bubble-own: #2f2f4a;
+	--office-teams-divider: #3d3d3d;
+	--office-teams-text-subtle: #adadad;
+	--office-shadow: 0 6px 20px rgb(0 0 0 / 45%);
+	--office-shadow-lg: 0 10px 25px rgb(0 0 0 / 45%);`;
+var LIGHT = Object.entries(OFFICE_TOKENS).map(([name, value2]) => `	${name}: ${value2};`).join("\n");
+var darkEntries = [...DARK.matchAll(/(--office-[\w-]+): ([^;]+);/g)].map(
+  (match) => [match[1], match[2]]
+);
+var lightPalette = Object.fromEntries(
+  darkEntries.map(([name]) => [name, OFFICE_TOKENS[name]])
+);
+var darkPalette = Object.fromEntries(darkEntries);
+var modeCss = (selector, dark) => themeBridge(selector, {
+  ...lightPalette,
+  ...dark ? darkPalette : {},
+  "--office-accent-foreground": OFFICE_TOKENS["--office-accent-foreground"]
+}) + `${selector} { color-scheme: ${dark ? "dark" : "light"}; }`;
+var THEME_CSS = `
+:where(:root) {
+${LIGHT}
+color-scheme: light;
+}
+${modeCss(':where([data-office-theme="light"], [data-office-theme="auto"])', false)}
+${modeCss(':where([data-office-theme="dark"])', true)}
+@media (prefers-color-scheme: dark) {
+	${modeCss(':where(:root:not([data-office-theme="light"]), [data-office-theme="auto"])', true)}
+}
+@media ${TOUCH} {
+	:where(:root) { --office-target-size: var(--office-target-size-touch); }
+}
+@media (forced-colors: active) {
+	:where(:root, [data-office-theme]) {
+		--office-foreground: CanvasText;
+		--office-muted-foreground: GrayText;
+		--office-background: Canvas;
+		--office-surface: Canvas;
+		--office-border: CanvasText;
+		--office-accent: Highlight;
+		--office-accent-foreground: HighlightText;
+		--office-ring: Highlight;
+		--office-danger: CanvasText;
+	}
+}
+${BUILDING_BLOCKS_CSS}
+`;
+function installOfficeUiTheme(root = globalThis.document) {
+  if (!root) return false;
+  const documentRoot = root.nodeType === 9;
+  if (!documentRoot && !("host" in root)) return false;
+  const doc = documentRoot ? root : root.ownerDocument;
+  const container = documentRoot ? root.head : root;
+  if (!doc || !container) return false;
+  if (!root.getElementById(THEME_STYLE_ID)) {
+    const style = doc.createElement("style");
+    style.id = THEME_STYLE_ID;
+    style.textContent = THEME_CSS;
+    container.append(style);
+  }
+  return true;
+}
+function installOfficeUiThemeRoots(host) {
+  let installed = installOfficeUiTheme(host.ownerDocument);
+  let root = host.getRootNode();
+  while (root.nodeType === 11 && "host" in root) {
+    const shadow = root;
+    installed = installOfficeUiTheme(shadow) && installed;
+    root = shadow.host.getRootNode();
+  }
+  return installed;
+}
+function installOfficeUiThemeFor(host) {
+  const installed = installOfficeUiThemeRoots(host);
+  queueMicrotask(() => {
+    installOfficeUiThemeRoots(host);
+  });
+  return installed;
+}
+function prepareOfficeUiBlock(host, kind, product) {
+  host.setAttribute("data-office-block", kind);
+  if (product) host.setAttribute("data-office-product", product);
+  installOfficeUiThemeFor(host);
+}
+
+export { BUILDING_BLOCKS_CSS, LEGACY_OFFICE_THEME_TOKENS, THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme, installOfficeUiThemeFor, legacyThemeAliases, legacyThemeBridge, prepareOfficeUiBlock, shadcnBridge, themeBridge };

package/dist/{chunk-EVL7GFC7.js → chunk-KH2ZG3N6.js}

@@ -1,6 +1,6 @@
 import { defineSmartArt } from './chunk-ANPFMQ6E.js';
-import { TEAMS_TAGS, registerTeams } from './chunk-MSXUCINT.js';
-import { installOfficeUiTheme } from './chunk-7E3HU7RL.js';
+import { TEAMS_TAGS, registerTeams } from './chunk-QEIGB73C.js';
+import { installOfficeUiTheme } from './chunk-6Y7KR2I3.js';
 import { registerControls } from './chunk-SPRZIHUH.js';
 import { definePresence } from './chunk-KNC2UEUR.js';
 

package/dist/{chunk-MSXUCINT.js → chunk-QEIGB73C.js}

@@ -1,5 +1,5 @@
 import { TeamsLitElement, LOCALE_HOST, teamsI18n, inheritLocale, pushLocale } from './chunk-FHO7TEWA.js';
-import { THEME_CSS, installOfficeUiTheme } from './chunk-7E3HU7RL.js';
+import { THEME_CSS, installOfficeUiTheme } from './chunk-6Y7KR2I3.js';
 import { defineMenuButton, defineMenuItem, registerControls, defineSwitch } from './chunk-SPRZIHUH.js';
 import { registerIcon, getIcon } from './chunk-M6GF5ED2.js';
 import { initialsOf, definePresence } from './chunk-KNC2UEUR.js';

package/dist/docx/building-blocks.d.ts

@@ -0,0 +1,31 @@
+import type { EditorCore } from './editor-core.js';
+/** A snapshot of the current editor selection, with commands bound to the same editor. */
+export declare function wordToolbarProps(core: EditorCore): {
+    labels: {
+        [k: string]: string;
+    };
+    canEdit: boolean;
+    list: 'bullet' | 'decimal' | 'other' | null;
+    selection: {
+        from: number;
+        to: number;
+    } | null;
+    bold: boolean | null;
+    italic: boolean | null;
+    underline: boolean | null;
+    fontFamily: string | null;
+    fontSize: number | null;
+    alignment: string | null;
+    canUndo: boolean;
+    canRedo: boolean;
+    onBold: () => boolean;
+    onItalic: () => boolean;
+    onUnderline: () => boolean;
+    onFontFamilyChange: (family: string) => boolean;
+    onFontSizeChange: (size: number) => boolean;
+    onAlignmentChange: (alignment: 'left' | 'center' | 'right' | 'justify') => boolean;
+    onListChange: (kind: 'bullet' | 'number' | 'remove') => boolean;
+    onUndo: () => boolean;
+    onRedo: () => boolean;
+};
+export type WordToolbarProps = ReturnType<typeof wordToolbarProps>;

package/dist/docx/component.d.ts

@@ -30,7 +30,7 @@ export declare class DocxEditorElement extends DocxEditorApi {
     /** File name shown in the title bar and used for downloads from the built-in File commands. */
     get fileName(): string;
     set fileName(value: string);
-    /** `light`, `dark`, or `auto` (default, follows the OS). Reflected to the `theme` attribute. */
+    /** `light`, `dark`, or `auto` (default, inherits the Office theme, then follows the OS). Reflected to the `theme` attribute. */
     get theme(): EditorThemeMode;
     set theme(value: EditorThemeMode);
     /** Token overrides applied as inline `--dve-*` custom properties on the host. */

package/dist/docx/editor-core.d.ts

@@ -57,7 +57,10 @@ export declare class EditorCore {
     view?: EditorView | undefined;
     loaded?: LoadedDocument | undefined;
     loadGeneration: number;
+    loading: boolean;
     readOnly: boolean;
+    /** Set before mounting to render only the document surface. */
+    surfaceOnly: boolean;
     locale: EditorLocale;
     reviewAuthor: string;
     theme: EditorThemeMode;

package/dist/docx/element-api.d.ts

@@ -3,12 +3,20 @@ import type { CollabSession } from 'ooxml-core/collab';
 import type { WordYjsOptions } from 'ooxml-core/docx/ui';
 import type { EditorCore } from './editor-core.js';
 import { type RibbonActionId, type RibbonActionInput } from 'ooxml-core/docx/ui';
+import { type WordToolbarProps } from './building-blocks.js';
 declare const HTMLElementBase: typeof HTMLElement;
 /**
  * Save, collaboration, dirty-tracking and UI-customisation surface of `<docx-editor>`.
  * the shared `EditorCore`, so the element class stays a thin lifecycle facade.
  */
 export declare abstract class DocxEditorApi extends HTMLElementBase {
+    /** Choose before connecting. This mode mounts only the document and its editing surface. */
+    get surfaceOnly(): boolean;
+    set surfaceOnly(value: boolean);
+    getToolbarProps(): WordToolbarProps;
+    get loading(): boolean;
+    /** Selection and formatting updates, including changes which do not dirty the document. */
+    subscribeEditorState(listener: () => void): () => void;
     protected abstract readonly core: EditorCore;
     abstract fileName: string;
     abstract reviewAuthor: string;

package/dist/docx/index.d.ts

@@ -1,4 +1,5 @@
 export { DocxEditorElement, registerDocxEditor } from './component.js';
+export type { WordToolbarProps } from './building-blocks.js';
 export { DOCX_EDITOR_EVENTS } from './events.js';
 export type { RibbonAction } from './ribbon.js';
 export { RIBBON_ACTION_IDS, RIBBON_ACTION_LABELS, normalizeRibbonActions, isRibbonActionId, } from 'ooxml-core/docx/ui';

package/dist/docx/styles/index.d.ts

@@ -1,6 +1,2 @@
-/**
- * Token presets are generated from theme/defaults.ts so the TypeScript presets and the shadow-root
- * CSS cannot drift. `theme="auto"` (the default) follows the OS; explicit values always win.
- */
 export declare const themeTokenText: string;
 export declare const editorStyleText: string;