ooxml-ui 0.8.0 → 0.9.0

package/README.md

@@ -58,24 +58,30 @@ with an incompatible build of this package.
 
 ## Features: elements
 
-| Tag                                                   | Attributes / properties                                                                                                                            | Events (all bubble, composed)                                                             |
-| ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
-| `office-ui-button`                                    | `label`, `icon`, `command`, `disabled`, `pressed`, `expanded`, `icon-only`, `variant="stacked"`, `keyshortcuts`                                    | `office-command` `{ command }`                                                            |
-| `office-ui-checkbox`, `office-ui-switch`              | `checked`, `disabled`, `value`, `aria-label`; form-associated                                                                                      | `input`, `change`                                                                         |
-| `office-ui-select`                                    | `options` `[{ value, label, disabled? }]`, `value`, `selectedIndex`, `disabled`                                                                    | `input`, `change`                                                                         |
-| `office-ui-ribbon-group`                              | `label`, `launcher` (dialog launcher command), `launcher-disabled`; default slot                                                                   | launcher: `office-command` `{ command }`                                                  |
-| `office-ui-ribbon-stack`                              | `orientation="horizontal"`; default slot (three-row column of small commands by default)                                                           | none                                                                                      |
-| `office-ui-menu-button` / `-menu-item`                | button: `label`, `icon`, `command` (split button), `variant`, `disabled`, `keyshortcuts`; item: `command`, `label`, `icon`, `disabled`, `checked`  | item choice: `office-command` `{ command }`                                               |
-| `office-ui-toolbar`                                   | `aria-label`, `aria-orientation`; arrow-key focus movement                                                                                         | none                                                                                      |
-| `office-ui-dialog`                                    | `open`, `heading`, `dismissible="false"`, `show()`, `close()`; slots default, `footer`                                                             | `office-dialog-close` `{ reason }` (cancelable)                                           |
-| `office-ui-status-bar` / `-status-item`               | `label`, `value`, `interactive`, `id`                                                                                                              | `office-status-activate` `{ id }`                                                         |
-| `office-ui-zoom-slider`                               | `value` (percent), `min`, `max`, `step`, `disabled`, `fit` (fit button name), `label`                                                              | `input`, `change`; fit: `office-command` `{ command: 'zoom-fit' }`                        |
-| `office-ui-tab-strip`                                 | `tabs` `[{ id, label, title? }]`, `selected`, `label`, `previous-label`, `next-label`, `add-label`, `add-disabled`, `add-title`, `disabled`        | `office-tab-select` `{ id }` (cancelable); add: `office-command` `{ command: 'tab-add' }` |
-| `office-ui-context-menu` / `office-ui-menu-separator` | `label`; `openAt(x, y)`, `close()`, `open`; `office-ui-menu-item` and separator children                                                           | item choice: `office-command` `{ command }`                                               |
-| `office-ui-command-search`                            | `commands` `[{ id, label, keywords?, description?, disabled?, title? }]`, `placeholder`, `label`, `limit` (Office's "Tell me what you want to do") | choice: `office-command` `{ command }`                                                    |
-| `office-ui-presence`                                  | `participants`, `max`, `label`                                                                                                                     | `office-presence-select` `{ id }`                                                         |
-| `office-ui-smartart`                                  | `drawing` (core `DiagramDrawing`), `schemeColors`, `label`                                                                                         | `office-smartart-render` (render report)                                                  |
-| `office-ui-icon`                                      | `name`, `label`                                                                                                                                    | none                                                                                      |
+| Tag                                                   | Attributes / properties                                                                                                                                                                                                                               | Events (all bubble, composed)                                                             |
+| ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
+| `office-ui-button`                                    | `label`, `icon`, `command`, `disabled`, `pressed`, `expanded`, `icon-only`, `variant="stacked"`, `keyshortcuts`                                                                                                                                       | `office-command` `{ command }`                                                            |
+| `office-ui-checkbox`, `office-ui-switch`              | `checked`, `disabled`, `value`, `aria-label`; form-associated                                                                                                                                                                                         | `input`, `change`                                                                         |
+| `office-ui-select`                                    | `options` `[{ value, label, disabled? }]`, `value`, `selectedIndex`, `disabled`                                                                                                                                                                       | `input`, `change`                                                                         |
+| `office-ui-ribbon-group`                              | `label`, `launcher` (dialog launcher command), `launcher-disabled`; default slot                                                                                                                                                                      | launcher: `office-command` `{ command }`                                                  |
+| `office-ui-ribbon-stack`                              | `orientation="horizontal"`; default slot (three-row column of small commands by default)                                                                                                                                                              | none                                                                                      |
+| `office-ui-menu-button` / `-menu-item`                | button: `label`, `icon`, `command` (split button), `variant`, `disabled`, `keyshortcuts`; item: `command`, `label`, `icon`, `disabled`, `checked`                                                                                                     | item choice: `office-command` `{ command }`                                               |
+| `office-ui-toolbar`                                   | `aria-label`, `aria-orientation`; arrow-key focus movement                                                                                                                                                                                            | none                                                                                      |
+| `office-ui-dialog`                                    | `open`, `heading`, `dismissible="false"`, `show()`, `close()`; slots default, `footer`                                                                                                                                                                | `office-dialog-close` `{ reason }` (cancelable)                                           |
+| `office-ui-status-bar` / `-status-item`               | `label`, `value`, `interactive`, `id`                                                                                                                                                                                                                 | `office-status-activate` `{ id }`                                                         |
+| `office-ui-zoom-slider`                               | `value` (percent), `min`, `max`, `step`, `disabled`, `fit` (fit button name), `label`                                                                                                                                                                 | `input`, `change`; fit: `office-command` `{ command: 'zoom-fit' }`                        |
+| `office-ui-tab-strip`                                 | `tabs` `[{ id, label, title? }]`, `selected`, `label`, `previous-label`, `next-label`, `add-label`, `add-disabled`, `add-title`, `disabled`                                                                                                           | `office-tab-select` `{ id }` (cancelable); add: `office-command` `{ command: 'tab-add' }` |
+| `office-ui-context-menu` / `office-ui-menu-separator` | `label`; `openAt(x, y)`, `close()`, `open`; `office-ui-menu-item` and separator children                                                                                                                                                              | item choice: `office-command` `{ command }`                                               |
+| `office-ui-command-search`                            | `commands` `[{ id, label, keywords?, description?, disabled?, title? }]`, `placeholder`, `label`, `limit` (Office's "Tell me what you want to do")                                                                                                    | choice: `office-command` `{ command }`                                                    |
+| `office-ui-options-dialog`                            | `categories` `[{ id, label, description?, disabled?, sections: [{ id, title, controls }] }]` (controls: `toggle`, `select`, `number`, `text`, each optionally `disabled` with a reason), `values`, `category`, `open`, `heading`, `show()`, `close()` | OK: `office-options-change` `{ values, changed }`                                         |
+| `office-ui-account`                                   | `profile` `{ displayName, avatarColor, initial? }`; slots `sign-in` and default (product sections)                                                                                                                                                    | `office-profile-change` `{ profile }`                                                     |
+| `office-ui-presence`                                  | `participants`, `max`, `label`                                                                                                                                                                                                                        | `office-presence-select` `{ id }`                                                         |
+| `office-ui-smartart`                                  | `drawing` (core `DiagramDrawing`), `schemeColors`, `label`                                                                                                                                                                                            | `office-smartart-render` (render report)                                                  |
+| `office-ui-icon`                                      | `name`, `label`                                                                                                                                                                                                                                       | none                                                                                      |
+
+The local profile behind `office-ui-account` is stored on the device only, under one suite-wide
+key (`readOfficeProfile`, `writeOfficeProfile`, `clearOfficeProfile`), so every Office viewer on
+an origin shows the same name and avatar colour.
 
 `attachKeyTips(scope)` (from `ooxml-ui/controls`) adds Office KeyTips to any element or shadow
 root: press and release Alt to show badges on controls marked `data-keytip="H"`, type a badge to

package/dist/account.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Office File > Account: the local display profile (name and avatar colour) shared by the suite.
+ * Moved from pptx-viewer `render/account.ts`. The profile is cosmetic and local: it is stored on
+ * this device only and never sent anywhere, except as the collaborator identity a product passes
+ * to a live session the user starts.
+ */
+export interface OfficeProfile {
+    displayName: string;
+    /** CSS colour of the avatar bubble, e.g. `'#c2431f'`. */
+    avatarColor: string;
+    /** Character(s) in the avatar bubble; derived from `displayName` when omitted. */
+    initial?: string;
+}
+export declare const DEFAULT_OFFICE_PROFILE: OfficeProfile;
+/** Suggested avatar colours (indigo, vermilion, cyan, green, amber, pink, slate). */
+export declare const OFFICE_AVATAR_SWATCHES: readonly string[];
+/** One key for the whole suite, so Word, PowerPoint, Excel and Visio on one origin share it. */
+export declare const OFFICE_PROFILE_STORAGE_KEY = "ooxml-office-profile";
+export type OfficeProfileChangeEvent = CustomEvent<{
+    profile: OfficeProfile;
+}>;
+/** Validate untrusted stored data into a profile. */
+export declare function sanitizeOfficeProfile(raw: unknown): OfficeProfile;
+/** The avatar bubble text: explicit initial, else initials of the name, else `?`. */
+export declare function profileInitials(profile: OfficeProfile): string;
+type StorageLike = Pick<Storage, 'getItem' | 'setItem' | 'removeItem'>;
+/** Read the stored profile; the default when storage is unavailable, empty or corrupt. */
+export declare function readOfficeProfile(storage?: StorageLike | undefined, key?: string): OfficeProfile;
+/** Persist the profile on this device. Silently does nothing when storage is unavailable. */
+export declare function writeOfficeProfile(profile: OfficeProfile, storage?: StorageLike | undefined, key?: string): void;
+/** Forget the stored profile. */
+export declare function clearOfficeProfile(storage?: StorageLike | undefined, key?: string): void;
+/**
+ * `<office-ui-account>`: User Information with avatar, display name and avatar colour. Set or read
+ * `profile`; edits emit `office-profile-change`. `slot="sign-in"` hosts a product sign-in flow;
+ * the default slot holds product sections (theme, product information).
+ */
+export declare const defineAccount: import("./registry.js").Definer;
+export {};

package/dist/{chunk-L5FYB6M7.js → chunk-TMSFX6TC.js}

@@ -1,8 +1,189 @@
 import { createIconSvg, paintIcon, defineIcon } from './chunk-PCSUQPMC.js';
+import { initialsOf } from './chunk-RLPL7Q6J.js';
 import { definer, attachStyles, controlCss, emit } from './chunk-EY266IK3.js';
 
-// src/button.ts
+// src/account.ts
+var DEFAULT_OFFICE_PROFILE = { displayName: "", avatarColor: "#6366f1" };
+var OFFICE_AVATAR_SWATCHES = [
+  "#6366f1",
+  "#c2431f",
+  "#0891b2",
+  "#16a34a",
+  "#ca8a04",
+  "#db2777",
+  "#64748b"
+];
+var OFFICE_PROFILE_STORAGE_KEY = "ooxml-office-profile";
+var COLOR = /^#[0-9a-f]{6}$/i;
+function sanitizeOfficeProfile(raw) {
+  const value = raw && typeof raw === "object" ? raw : {};
+  const displayName = typeof value.displayName === "string" ? value.displayName.trim().slice(0, 64) : "";
+  const avatarColor = typeof value.avatarColor === "string" && COLOR.test(value.avatarColor) ? value.avatarColor : DEFAULT_OFFICE_PROFILE.avatarColor;
+  const initial = typeof value.initial === "string" && value.initial.trim() ? value.initial.trim().slice(0, 2) : void 0;
+  return { displayName, avatarColor, ...initial ? { initial } : {} };
+}
+function profileInitials(profile) {
+  return (profile.initial ?? initialsOf(profile.displayName)).toUpperCase();
+}
+var defaultStorage = () => {
+  try {
+    return typeof localStorage === "undefined" ? void 0 : localStorage;
+  } catch {
+    return void 0;
+  }
+};
+function readOfficeProfile(storage = defaultStorage(), key = OFFICE_PROFILE_STORAGE_KEY) {
+  try {
+    const raw = storage?.getItem(key);
+    return raw ? sanitizeOfficeProfile(JSON.parse(raw)) : { ...DEFAULT_OFFICE_PROFILE };
+  } catch {
+    return { ...DEFAULT_OFFICE_PROFILE };
+  }
+}
+function writeOfficeProfile(profile, storage = defaultStorage(), key = OFFICE_PROFILE_STORAGE_KEY) {
+  try {
+    storage?.setItem(key, JSON.stringify(sanitizeOfficeProfile(profile)));
+  } catch {
+  }
+}
+function clearOfficeProfile(storage = defaultStorage(), key = OFFICE_PROFILE_STORAGE_KEY) {
+  try {
+    storage?.removeItem(key);
+  } catch {
+  }
+}
 var CSS = `
+:host { display: block; font-family: var(--office-font, system-ui, sans-serif); font-size: 13px; }
+h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
+.who { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
+.avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
+	color: #fff; font-weight: 600; font-size: 18px; flex: none; }
+.name { font-size: 14px; font-weight: 600; }
+.note { margin: 2px 0 0; color: var(--office-muted, #6b7280); font-size: 12px; }
+label { display: grid; gap: 4px; max-width: 320px; margin-bottom: 12px; }
+input { min-height: 28px; box-sizing: border-box; padding: 2px 6px; font: inherit; color: inherit;
+	border: 1px solid var(--office-border, #d1d5db); border-radius: 3px; background: var(--office-background, #fff); }
+.swatches { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
+.swatches button { width: var(--office-target-size, 28px); height: var(--office-target-size, 28px); padding: 0;
+	border: 2px solid transparent; border-radius: 50%; cursor: pointer; }
+.swatches button[aria-checked="true"] { border-color: var(--office-foreground, #1f2937);
+	box-shadow: inset 0 0 0 2px var(--office-background, #fff); }
+.swatches button:focus-visible, input:focus-visible { outline: 2px solid var(--office-ring, #2563eb); outline-offset: 1px; }
+@media (forced-colors: active) { .swatches button { forced-color-adjust: none; } }
+`;
+var defineAccount = definer("office-ui-account", () => {
+  class OfficeUiAccount extends HTMLElement {
+    #profile = { ...DEFAULT_OFFICE_PROFILE };
+    #avatar;
+    #name;
+    #input;
+    #swatches;
+    constructor() {
+      super();
+      const doc = this.ownerDocument;
+      const root = this.attachShadow({ mode: "open" });
+      attachStyles(root, controlCss(CSS));
+      const heading = doc.createElement("h2");
+      heading.textContent = "User Information";
+      const who = doc.createElement("div");
+      who.className = "who";
+      this.#avatar = doc.createElement("div");
+      this.#avatar.className = "avatar";
+      this.#avatar.setAttribute("aria-hidden", "true");
+      const details = doc.createElement("div");
+      this.#name = doc.createElement("div");
+      this.#name.className = "name";
+      const note = doc.createElement("p");
+      note.className = "note";
+      note.textContent = "Stored on this device only. Never sent anywhere.";
+      details.append(this.#name, note);
+      who.append(this.#avatar, details);
+      const field = doc.createElement("label");
+      field.append("Display name");
+      this.#input = doc.createElement("input");
+      this.#input.type = "text";
+      this.#input.maxLength = 64;
+      this.#input.autocomplete = "name";
+      this.#input.addEventListener(
+        "change",
+        () => this.#update({ ...this.#profile, displayName: this.#input.value.trim() })
+      );
+      field.append(this.#input);
+      const colorLabel = doc.createElement("div");
+      colorLabel.id = "color-label";
+      colorLabel.textContent = "Avatar colour";
+      this.#swatches = doc.createElement("div");
+      this.#swatches.className = "swatches";
+      this.#swatches.setAttribute("role", "radiogroup");
+      this.#swatches.setAttribute("aria-labelledby", "color-label");
+      for (const color of OFFICE_AVATAR_SWATCHES) {
+        const swatch = doc.createElement("button");
+        swatch.type = "button";
+        swatch.setAttribute("role", "radio");
+        swatch.setAttribute("aria-label", color);
+        swatch.dataset.color = color;
+        swatch.style.background = color;
+        swatch.addEventListener(
+          "click",
+          () => this.#update({ ...this.#profile, avatarColor: color })
+        );
+        this.#swatches.append(swatch);
+      }
+      this.#swatches.addEventListener("keydown", (event) => this.#swatchKey(event));
+      const signIn = doc.createElement("slot");
+      signIn.name = "sign-in";
+      root.append(
+        heading,
+        who,
+        field,
+        colorLabel,
+        this.#swatches,
+        signIn,
+        doc.createElement("slot")
+      );
+      this.#sync();
+    }
+    get profile() {
+      return { ...this.#profile };
+    }
+    set profile(value) {
+      this.#profile = sanitizeOfficeProfile(value);
+      this.#sync();
+    }
+    #update(next) {
+      this.#profile = sanitizeOfficeProfile(next);
+      this.#sync();
+      emit(this, "office-profile-change", { profile: this.profile });
+    }
+    #swatchKey(event) {
+      const step = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[event.key];
+      if (!step) return;
+      event.preventDefault();
+      const colors = OFFICE_AVATAR_SWATCHES;
+      const at = Math.max(0, colors.indexOf(this.#profile.avatarColor));
+      const color = colors[(at + step + colors.length) % colors.length];
+      this.#update({ ...this.#profile, avatarColor: color });
+      this.#swatches.querySelector(`[data-color="${color}"]`)?.focus();
+    }
+    #sync() {
+      const { displayName, avatarColor } = this.#profile;
+      this.#avatar.textContent = profileInitials(this.#profile);
+      this.#avatar.style.background = avatarColor;
+      this.#name.textContent = displayName || "No display name";
+      if (this.#input.value.trim() !== displayName) this.#input.value = displayName;
+      const known = OFFICE_AVATAR_SWATCHES.includes(avatarColor);
+      this.#swatches.querySelectorAll('[role="radio"]').forEach((swatch, index) => {
+        const checked = swatch.dataset.color === avatarColor;
+        swatch.setAttribute("aria-checked", String(checked));
+        swatch.tabIndex = checked || !known && index === 0 ? 0 : -1;
+      });
+    }
+  }
+  return OfficeUiAccount;
+});
+
+// src/button.ts
+var CSS2 = `
 :host { display: inline-flex; vertical-align: middle; }
 button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
 	gap: 6px; min-width: var(--office-target-size, 28px); min-height: var(--office-target-size, 28px);
@@ -43,7 +224,7 @@ var defineButton = definer("office-ui-button", () => {
     constructor() {
       super();
       const root = this.attachShadow({ mode: "open", delegatesFocus: true });
-      attachStyles(root, controlCss(CSS));
+      attachStyles(root, controlCss(CSS2));
       this.button = this.ownerDocument.createElement("button");
       this.button.type = "button";
       this.button.setAttribute("part", "button");
@@ -218,12 +399,12 @@ var defineCheckbox = definer(
 var defineSwitch = definer("office-ui-switch", makeCheckable("switch", SWITCH_CSS));
 
 // src/dialog.ts
-var CSS2 = `
+var CSS3 = `
 :host { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; }
 :host([open]) { display: flex; }
 .backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .4); }
 .box { position: relative; box-sizing: border-box; display: flex; flex-direction: column;
-	min-width: min(320px, 100vw); max-width: min(640px, 100vw); max-height: 90vh;
+	width: var(--office-dialog-width, auto); min-width: min(320px, 100vw); max-width: var(--office-dialog-max-width, min(640px, 100vw)); max-height: 90vh;
 	background: var(--office-background, #fff); color: var(--office-foreground, #1f2937);
 	border: 1px solid var(--office-border, #d1d5db); border-radius: 8px; font-family: var(--office-font, system-ui, sans-serif); }
 header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px;
@@ -251,7 +432,7 @@ var defineDialog = definer("office-ui-dialog", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS2));
+      attachStyles(root, controlCss(CSS3));
       const backdrop = doc.createElement("div");
       backdrop.className = "backdrop";
       this.box = doc.createElement("div");
@@ -354,7 +535,7 @@ var defineDialog = definer("office-ui-dialog", () => {
 });
 
 // src/command-search.ts
-var CSS3 = `
+var CSS4 = `
 :host { display: inline-flex; align-items: center; min-width: 0; font-family: var(--office-font, system-ui, sans-serif); }
 .field { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; height: var(--office-target-size, 28px);
 	padding: 0 8px; box-sizing: border-box; border: 1px solid transparent; border-radius: var(--office-radius, 4px);
@@ -394,7 +575,7 @@ var defineCommandSearch = definer("office-ui-command-search", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open", delegatesFocus: true });
-      attachStyles(root, controlCss(CSS3));
+      attachStyles(root, controlCss(CSS4));
       const field = doc.createElement("div");
       field.className = "field";
       const glass = createIconSvg(doc);
@@ -551,7 +732,7 @@ var defineCommandSearch = definer("office-ui-command-search", () => {
 });
 
 // src/context-menu.ts
-var CSS4 = `
+var CSS5 = `
 :host { display: contents; }
 .panel { position: fixed; inset: auto; margin: 0; min-width: 200px; padding: 4px; box-sizing: border-box;
 	background: var(--office-background, #fff); color: var(--office-foreground, #1f2937);
@@ -587,7 +768,7 @@ var defineContextMenu = definer("office-ui-context-menu", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS4));
+      attachStyles(root, controlCss(CSS5));
       this.panel = doc.createElement("div");
       this.panel.className = "panel";
       this.panel.setAttribute("role", "menu");
@@ -992,6 +1173,271 @@ var defineMenuButton = definer("office-ui-menu-button", () => {
   return OfficeUiMenuButton;
 });
 
+// src/options.ts
+function clampOptionNumber(raw, min, max) {
+  const parsed = Number(raw);
+  return Number.isFinite(parsed) && raw.trim() !== "" ? Math.min(max, Math.max(min, parsed)) : void 0;
+}
+var CSS6 = `
+:host { display: contents; }
+office-ui-dialog { --office-dialog-width: min(820px, 100vw); --office-dialog-max-width: min(820px, 100vw); }
+.layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 0; min-height: min(440px, 70vh); margin: -16px; }
+nav { display: flex; flex-direction: column; padding: 8px 0; border-inline-end: 1px solid var(--office-border, #d1d5db);
+	background: var(--office-surface, #f3f4f6); overflow: auto; }
+nav button { min-height: 30px; padding: 4px 14px; border: 0; border-radius: 0; background: transparent; color: inherit;
+	font: inherit; text-align: start; cursor: pointer; }
+nav button[aria-selected="true"] { background: var(--office-selected, #e5e7eb); font-weight: 600;
+	box-shadow: inset 3px 0 0 var(--office-accent, #2563eb); }
+nav button:focus-visible { outline: 2px solid var(--office-ring, #2563eb); outline-offset: -2px; }
+[role="tabpanel"] { padding: 16px 20px; overflow: auto; }
+.lead { margin: 0 0 12px; font-size: 14px; }
+.unavailable { margin: 0 0 12px; color: var(--office-muted, #6b7280); }
+section + section { margin-top: 16px; }
+h3 { margin: 0 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--office-border, #d1d5db); font-size: 13px; font-weight: 600; }
+.desc { margin: 0 0 8px; color: var(--office-muted, #6b7280); }
+.row { display: flex; align-items: center; gap: 8px; min-height: 30px; }
+.row.indent { padding-inline-start: 24px; }
+.row.field > span:first-child { min-width: 180px; }
+.row[data-disabled] { color: var(--office-muted, #6b7280); }
+input[type="text"], input[type="number"], select { min-height: 26px; box-sizing: border-box; font: inherit;
+	border: 1px solid var(--office-border, #d1d5db); border-radius: 3px; background: var(--office-background, #fff); color: inherit; }
+input[type="number"] { width: 80px; }
+.info { display: inline-grid; place-items: center; width: 15px; height: 15px; border: 1px solid currentColor;
+	border-radius: 50%; font-size: 10px; color: var(--office-muted, #6b7280); cursor: help; }
+.actions { display: flex; gap: 8px; }
+.actions button { min-width: 76px; min-height: 28px; font: inherit; cursor: pointer; }
+@media (max-width: 600px) {
+	.layout { grid-template-columns: 1fr; }
+	nav { flex-direction: row; border-inline-end: 0; border-bottom: 1px solid var(--office-border, #d1d5db); }
+	nav button { white-space: nowrap; }
+	.row.field { flex-wrap: wrap; }
+}
+`;
+var defineOptionsDialog = definer("office-ui-options-dialog", () => {
+  class OfficeUiOptionsDialog extends HTMLElement {
+    static observedAttributes = ["open", "heading"];
+    #categories = [];
+    #values = {};
+    #draft = {};
+    #active = "";
+    #dialog;
+    #nav;
+    #pane;
+    constructor() {
+      super();
+      const doc = this.ownerDocument;
+      const root = this.attachShadow({ mode: "open" });
+      attachStyles(root, controlCss(CSS6));
+      this.#dialog = doc.createElement("office-ui-dialog");
+      const layout = doc.createElement("div");
+      layout.className = "layout";
+      this.#nav = doc.createElement("nav");
+      this.#nav.setAttribute("role", "tablist");
+      this.#nav.setAttribute("aria-orientation", "vertical");
+      this.#nav.setAttribute("aria-label", "Categories");
+      this.#pane = doc.createElement("div");
+      this.#pane.setAttribute("role", "tabpanel");
+      this.#pane.id = "pane";
+      layout.append(this.#nav, this.#pane);
+      const actions = doc.createElement("div");
+      actions.slot = "footer";
+      actions.className = "actions";
+      const ok = this.#button("OK", () => this.#commit());
+      ok.dataset.action = "ok";
+      const cancel = this.#button("Cancel", () => this.#closeDialog());
+      cancel.dataset.action = "cancel";
+      actions.append(ok, cancel);
+      this.#dialog.append(layout, actions);
+      root.append(this.#dialog);
+      this.#dialog.addEventListener("office-dialog-close", (event) => {
+        if (!event.defaultPrevented) this.removeAttribute("open");
+      });
+      this.#nav.addEventListener("keydown", (event) => this.#navKey(event));
+    }
+    get categories() {
+      return this.#categories;
+    }
+    set categories(value) {
+      this.#categories = value;
+      if (!value.some((category) => category.id === this.#active))
+        this.#active = value[0]?.id ?? "";
+      this.#render();
+    }
+    get values() {
+      return { ...this.#values };
+    }
+    set values(value) {
+      this.#values = { ...value };
+      if (!this.open) this.#draft = { ...value };
+      this.#render();
+    }
+    /** The selected category id. */
+    get category() {
+      return this.#active;
+    }
+    set category(id) {
+      if (this.#categories.some((category) => category.id === id)) {
+        this.#active = id;
+        this.#render();
+      }
+    }
+    get open() {
+      return this.hasAttribute("open");
+    }
+    set open(value) {
+      this.toggleAttribute("open", Boolean(value));
+    }
+    show() {
+      this.open = true;
+    }
+    close() {
+      this.#closeDialog();
+    }
+    attributeChangedCallback(name, old, value) {
+      if (name === "heading") this.#dialog.setAttribute("heading", value ?? "Options");
+      if (name === "open" && old === null !== (value === null)) {
+        if (value !== null) {
+          this.#draft = { ...this.#values };
+          this.#render();
+        }
+        this.#dialog.open = value !== null;
+      }
+    }
+    connectedCallback() {
+      if (!this.hasAttribute("heading")) this.#dialog.setAttribute("heading", "Options");
+    }
+    #button(label, run) {
+      const button = this.ownerDocument.createElement("button");
+      button.type = "button";
+      button.textContent = label;
+      button.addEventListener("click", run);
+      return button;
+    }
+    #closeDialog() {
+      this.removeAttribute("open");
+    }
+    #commit() {
+      const changed = Object.keys(this.#draft).filter(
+        (key) => this.#draft[key] !== this.#values[key]
+      );
+      this.#values = { ...this.#draft };
+      emit(this, "office-options-change", { values: { ...this.#values }, changed });
+      this.#closeDialog();
+    }
+    #navKey(event) {
+      const tabs = [...this.#nav.querySelectorAll('[role="tab"]')];
+      const at = tabs.findIndex((tab) => tab.getAttribute("aria-selected") === "true");
+      const step = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 }[event.key];
+      const target = event.key === "Home" ? tabs[0] : event.key === "End" ? tabs.at(-1) : step ? tabs[(at + step + tabs.length) % tabs.length] : void 0;
+      if (!target) return;
+      event.preventDefault();
+      this.category = target.dataset.category;
+      this.#nav.querySelector('[aria-selected="true"]')?.focus();
+    }
+    #render() {
+      const doc = this.ownerDocument;
+      this.#nav.replaceChildren(
+        ...this.#categories.map((category2) => {
+          const tab = this.#button(category2.label, () => this.category = category2.id);
+          tab.setAttribute("role", "tab");
+          tab.dataset.category = category2.id;
+          tab.id = `tab-${category2.id}`;
+          tab.setAttribute("aria-controls", "pane");
+          const selected = category2.id === this.#active;
+          tab.setAttribute("aria-selected", String(selected));
+          tab.tabIndex = selected ? 0 : -1;
+          return tab;
+        })
+      );
+      const category = this.#categories.find((entry) => entry.id === this.#active);
+      this.#pane.replaceChildren();
+      if (!category) return;
+      this.#pane.setAttribute("aria-labelledby", `tab-${category.id}`);
+      if (category.description) this.#pane.append(text(doc, "p", category.description, "lead"));
+      if (category.disabled) this.#pane.append(text(doc, "p", category.disabled, "unavailable"));
+      for (const section of category.sections) {
+        const block = doc.createElement("section");
+        block.append(text(doc, "h3", section.title));
+        if (section.description) block.append(text(doc, "p", section.description, "desc"));
+        for (const control of section.controls) block.append(this.#control(control));
+        this.#pane.append(block);
+      }
+    }
+    #control(control) {
+      const doc = this.ownerDocument;
+      const row = doc.createElement("label");
+      row.className = `row${control.indent ? " indent" : ""}${control.kind === "toggle" ? "" : " field"}`;
+      row.dataset.key = control.key;
+      const value = this.#draft[control.key];
+      const set = (next) => this.#draft[control.key] = next;
+      let input;
+      if (control.kind === "toggle") {
+        const box = doc.createElement("input");
+        box.type = "checkbox";
+        box.checked = value === true;
+        box.addEventListener("change", () => set(box.checked));
+        input = box;
+        row.append(box, text(doc, "span", control.label));
+      } else if (control.kind === "select") {
+        const select = doc.createElement("select");
+        for (const choice of control.choices) {
+          const option = doc.createElement("option");
+          option.value = choice.value;
+          option.textContent = choice.label;
+          select.append(option);
+        }
+        select.value = String(value ?? control.choices[0]?.value ?? "");
+        select.addEventListener("change", () => set(select.value));
+        input = select;
+        row.append(text(doc, "span", control.label), select);
+      } else {
+        const field = doc.createElement("input");
+        field.type = control.kind === "number" ? "number" : "text";
+        field.value = value === void 0 ? "" : String(value);
+        if (control.kind === "number") {
+          field.min = String(control.min);
+          field.max = String(control.max);
+          if (control.step) field.step = String(control.step);
+          field.addEventListener("change", () => {
+            const next = clampOptionNumber(field.value, control.min, control.max);
+            if (next === void 0) field.value = String(this.#draft[control.key] ?? "");
+            else {
+              field.value = String(next);
+              set(next);
+            }
+          });
+        } else {
+          if (control.maxLength) field.maxLength = control.maxLength;
+          field.addEventListener("input", () => set(field.value));
+        }
+        input = field;
+        row.append(text(doc, "span", control.label), field);
+        if (control.kind === "number" && control.unit) row.append(text(doc, "span", control.unit));
+      }
+      if (control.disabled) {
+        input.disabled = true;
+        row.dataset.disabled = "";
+        row.title = control.disabled;
+      }
+      if (control.info) {
+        const info = text(doc, "span", "i", "info");
+        info.title = control.info;
+        info.setAttribute("role", "img");
+        info.setAttribute("aria-label", control.info);
+        row.append(info);
+      }
+      return row;
+    }
+  }
+  return OfficeUiOptionsDialog;
+});
+function text(doc, tag, content, className) {
+  const el = doc.createElement(tag);
+  el.textContent = content;
+  if (className) el.className = className;
+  return el;
+}
+
 // src/ribbon.ts
 var GROUP_CSS = `
 :host { display: inline-flex; flex: none; align-self: stretch; }
@@ -1126,7 +1572,7 @@ var defineToolbar = definer("office-ui-toolbar", () => {
 });
 
 // src/select.ts
-var CSS5 = `
+var CSS7 = `
 :host { display: inline-block; position: relative; vertical-align: middle; }
 button { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px;
 	width: 100%; min-height: var(--office-target-size, 28px); padding: 0 8px; font: inherit; font-size: 12px;
@@ -1165,7 +1611,7 @@ var defineSelect = definer("office-ui-select", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open", delegatesFocus: true });
-      attachStyles(root, controlCss(CSS5));
+      attachStyles(root, controlCss(CSS7));
       this.trigger = doc.createElement("button");
       this.trigger.type = "button";
       this.trigger.setAttribute("role", "combobox");
@@ -1416,7 +1862,7 @@ var defineStatusItem = definer("office-ui-status-item", () => {
 });
 
 // src/tab-strip.ts
-var CSS6 = `
+var CSS8 = `
 :host { display: flex; align-items: stretch; min-width: 0; min-height: 28px; gap: 2px; padding: 0 6px;
 	background: var(--office-surface, #f3f4f6); color: var(--office-muted-foreground, #6b7280);
 	border-top: 1px solid var(--office-border, #d1d5db); font-size: 12px;
@@ -1463,7 +1909,7 @@ var defineTabStrip = definer("office-ui-tab-strip", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS6));
+      attachStyles(root, controlCss(CSS8));
       const step = (name, icon) => {
         const button = doc.createElement("button");
         button.type = "button";
@@ -1602,7 +2048,7 @@ var defineTabStrip = definer("office-ui-tab-strip", () => {
 });
 
 // src/zoom-slider.ts
-var CSS7 = `
+var CSS9 = `
 :host { display: inline-flex; align-items: center; gap: 2px; font-size: 11px;
 	color: var(--office-foreground, #1f2937); font-family: var(--office-font, system-ui, sans-serif); }
 button { box-sizing: border-box; display: inline-grid; place-items: center; min-width: var(--office-target-size, 24px);
@@ -1638,13 +2084,13 @@ var defineZoomSlider = definer("office-ui-zoom-slider", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS7));
-      const button = (name, text) => {
+      attachStyles(root, controlCss(CSS9));
+      const button = (name, text2) => {
         const element = doc.createElement("button");
         element.type = "button";
         element.setAttribute("aria-label", name);
         element.title = name;
-        element.textContent = text;
+        element.textContent = text2;
         return element;
       };
       this.out = button("Zoom out", "\u2212");
@@ -1885,10 +2331,12 @@ var CONTROL_DEFINERS = [
   defineStatusBar,
   defineStatusItem,
   defineZoomSlider,
-  defineTabStrip
+  defineTabStrip,
+  defineOptionsDialog,
+  defineAccount
 ];
 function registerControls(registry) {
   for (const define of CONTROL_DEFINERS) define(registry);
 }
 
-export { CONTROL_DEFINERS, attachKeyTips, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineMenuButton, defineMenuItem, defineMenuSeparator, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls };
+export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, attachKeyTips, clampOptionNumber, clearOfficeProfile, defineAccount, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, profileInitials, readOfficeProfile, registerControls, sanitizeOfficeProfile, writeOfficeProfile };

package/dist/controls.d.ts

@@ -1,3 +1,4 @@
+import { defineAccount } from './account.js';
 import { defineButton } from './button.js';
 import { defineCheckbox, defineSwitch } from './checkable.js';
 import { defineDialog } from './dialog.js';
@@ -5,12 +6,13 @@ import { defineIcon } from './icons.js';
 import { defineCommandSearch } from './command-search.js';
 import { defineContextMenu, defineMenuSeparator } from './context-menu.js';
 import { defineMenuButton, defineMenuItem } from './menu.js';
+import { defineOptionsDialog } from './options.js';
 import { defineRibbonGroup, defineRibbonStack, defineToolbar } from './ribbon.js';
 import { defineSelect } from './select.js';
 import { defineStatusBar, defineStatusItem } from './status-bar.js';
 import { defineTabStrip } from './tab-strip.js';
 import { defineZoomSlider } from './zoom-slider.js';
-export { defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, };
+export { defineAccount, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, };
 export type { OfficeCommandEvent } from './button.js';
 export type { OfficeDialogCloseEvent, OfficeDialogCloseReason } from './dialog.js';
 export type { OfficeSelectOption } from './select.js';
@@ -18,7 +20,9 @@ export type { OfficeStatusActivateEvent } from './status-bar.js';
 export type { OfficeTab, OfficeTabSelectEvent } from './tab-strip.js';
 export type { OfficeSearchCommand } from './command-search.js';
 export { attachKeyTips, type KeyTipsHandle } from './keytips.js';
+export { clearOfficeProfile, DEFAULT_OFFICE_PROFILE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, profileInitials, readOfficeProfile, sanitizeOfficeProfile, writeOfficeProfile, type OfficeProfile, type OfficeProfileChangeEvent, } from './account.js';
+export { clampOptionNumber, type OfficeOptionCategory, type OfficeOptionChoice, type OfficeOptionControl, type OfficeOptionSection, type OfficeOptionsChangeEvent, type OfficeOptionValue, type OfficeOptionValues, } from './options.js';
 /** Every control of this entry. */
-export declare const CONTROL_DEFINERS: readonly [import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer];
+export declare const CONTROL_DEFINERS: readonly [import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer];
 /** Idempotent, SSR-safe (no-op without a DOM). */
 export declare function registerControls(registry?: CustomElementRegistry): void;

package/dist/controls.js

@@ -1,3 +1,4 @@
-export { CONTROL_DEFINERS, attachKeyTips, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineMenuButton, defineMenuItem, defineMenuSeparator, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls } from './chunk-L5FYB6M7.js';
+export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, attachKeyTips, clampOptionNumber, clearOfficeProfile, defineAccount, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, profileInitials, readOfficeProfile, registerControls, sanitizeOfficeProfile, writeOfficeProfile } from './chunk-TMSFX6TC.js';
 export { defineIcon } from './chunk-PCSUQPMC.js';
+import './chunk-RLPL7Q6J.js';
 import './chunk-EY266IK3.js';

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export * from './smartart.js';
 export * from './theme.js';
 export { CONTRACT_REVISION, type Definer } from './registry.js';
 /** Every ooxml-ui tag this package defines, in registration order. */
-export declare const OFFICE_UI_TAGS: readonly ["office-ui-icon", "office-ui-button", "office-ui-checkbox", "office-ui-switch", "office-ui-select", "office-ui-ribbon-group", "office-ui-ribbon-stack", "office-ui-menu-item", "office-ui-menu-button", "office-ui-menu-separator", "office-ui-context-menu", "office-ui-command-search", "office-ui-toolbar", "office-ui-dialog", "office-ui-status-bar", "office-ui-status-item", "office-ui-zoom-slider", "office-ui-tab-strip", "office-ui-presence", "office-ui-smartart"];
+export declare const OFFICE_UI_TAGS: readonly ["office-ui-icon", "office-ui-button", "office-ui-checkbox", "office-ui-switch", "office-ui-select", "office-ui-ribbon-group", "office-ui-ribbon-stack", "office-ui-menu-item", "office-ui-menu-button", "office-ui-menu-separator", "office-ui-context-menu", "office-ui-command-search", "office-ui-toolbar", "office-ui-dialog", "office-ui-status-bar", "office-ui-status-item", "office-ui-zoom-slider", "office-ui-tab-strip", "office-ui-options-dialog", "office-ui-account", "office-ui-presence", "office-ui-smartart"];
 /**
  * Install the theme tokens and define every element. Idempotent and safe to call from every
  * viewer binding; a no-op where there is no DOM (SSR).

package/dist/index.js

@@ -1,7 +1,7 @@
 import { installOfficeUiTheme } from './chunk-H4KFVIGT.js';
 export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-H4KFVIGT.js';
-import { registerControls } from './chunk-L5FYB6M7.js';
-export { CONTROL_DEFINERS, attachKeyTips, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineMenuButton, defineMenuItem, defineMenuSeparator, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls } from './chunk-L5FYB6M7.js';
+import { registerControls } from './chunk-TMSFX6TC.js';
+export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, attachKeyTips, clampOptionNumber, clearOfficeProfile, defineAccount, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, profileInitials, readOfficeProfile, registerControls, sanitizeOfficeProfile, writeOfficeProfile } from './chunk-TMSFX6TC.js';
 export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-PCSUQPMC.js';
 import { definePresence } from './chunk-RLPL7Q6J.js';
 export { definePresence, initialsOf, participantsFromAwareness } from './chunk-RLPL7Q6J.js';
@@ -29,6 +29,8 @@ var OFFICE_UI_TAGS = [
   "office-ui-status-item",
   "office-ui-zoom-slider",
   "office-ui-tab-strip",
+  "office-ui-options-dialog",
+  "office-ui-account",
   "office-ui-presence",
   "office-ui-smartart"
 ];

package/dist/options.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Office File > Options dialog. Products describe their categories as data; the element renders
+ * the category list, the pane and OK/Cancel, and reports the edited values. Generalised from
+ * pptx-viewer's `VIEWER_OPTIONS_SCHEMA` dialog (render/options) so every viewer shares one.
+ */
+export type OfficeOptionValue = boolean | number | string;
+export type OfficeOptionValues = Record<string, OfficeOptionValue>;
+export interface OfficeOptionChoice {
+    value: string;
+    label: string;
+}
+interface OptionBase {
+    /** Key into the values record. */
+    key: string;
+    label: string;
+    /** Optional "(i)" tooltip, as Office's info bubbles. */
+    info?: string;
+    /** Renders indented under the preceding control. */
+    indent?: boolean;
+    /** Shown disabled with this reason, for settings the product cannot honour yet. */
+    disabled?: string;
+}
+export type OfficeOptionControl = (OptionBase & {
+    kind: 'toggle';
+}) | (OptionBase & {
+    kind: 'select';
+    choices: readonly OfficeOptionChoice[];
+}) | (OptionBase & {
+    kind: 'number';
+    min: number;
+    max: number;
+    step?: number;
+    unit?: string;
+}) | (OptionBase & {
+    kind: 'text';
+    maxLength?: number;
+});
+export interface OfficeOptionSection {
+    id: string;
+    title: string;
+    description?: string;
+    controls: readonly OfficeOptionControl[];
+}
+export interface OfficeOptionCategory {
+    id: string;
+    label: string;
+    /** Headline at the top of the pane. */
+    description?: string;
+    sections: readonly OfficeOptionSection[];
+    /** The whole category is not available yet; the pane explains why. */
+    disabled?: string;
+}
+/** Emitted on OK with every value and the keys that changed. */
+export type OfficeOptionsChangeEvent = CustomEvent<{
+    values: OfficeOptionValues;
+    changed: string[];
+}>;
+/** Clamp a number edit into range; `undefined` when it is not a finite number. */
+export declare function clampOptionNumber(raw: string, min: number, max: number): number | undefined;
+/**
+ * `<office-ui-options-dialog>`: set `categories` and `values`, then `show()` (or the `open`
+ * attribute). Edits stay in a draft until OK, which emits `office-options-change` and closes;
+ * Cancel, Escape and the close button discard them. `heading` defaults to "Options".
+ */
+export declare const defineOptionsDialog: import("./registry.js").Definer;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ooxml-ui",
-	"version": "0.8.0",
+	"version": "0.9.0",
 	"description": "Shared, format-neutral web components and styles for the Office viewers (Word, PowerPoint, Excel)",
 	"keywords": [
 		"custom-elements",