ooxml-ui 0.16.3 → 0.17.0

package/README.md

@@ -89,6 +89,7 @@ with an incompatible build of this package.
 | `office-ui-toasts`                                    | `state` `{ toasts: [{ id, code?, severity, message }], overflowCount?, labels? }`; hidden when empty, host positions it                                                                                                                                                                                                   | `office-toasts-request` `{ id: 'dismiss', toastId }` or `{ id: 'dismissAll' }`                                                                    |
 | `office-ui-read-only-banner`                          | `state` `{ kind, message, passwordPromptOpen?, passwordError?, checkingPassword?, labels? }`                                                                                                                                                                                                                              | `office-read-only-request` (Edit anyway, Dismiss, password submit or cancel)                                                                      |
 | `office-ui-paste-options`                             | `state` `{ left, top, options: [{ id, label }], label? }`; fixed 4px past the pasted object                                                                                                                                                                                                                               | `office-paste-options-request` `{ format }`, `office-paste-options-dismiss`                                                                       |
+| `office-ui-title-bar`                                 | `state` `{ appMark?, fileName, status?, tone?, autosave?, quickAccess?: { label, items, showLabels? }, search? }`, `placement` (`titleBar`, `belowRibbon`); slots `collaboration`, `account`; tokens `--office-title-bar-*`                                                                                               | `office-autosave-toggle`, `office-command` `{ command }`, `office-command-search` `{ query, 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                                                                                                                                              |

package/dist/{chunk-F4TM7U4P.js → chunk-5L3NYLAW.js}

@@ -1,4 +1,4 @@
-import { OFFICE_TOKENS, TOUCH } from './chunk-4MT4OIAJ.js';
+import { OFFICE_TOKENS, TOUCH } from './chunk-A3QNC6VS.js';
 
 // src/theme.ts
 var THEME_STYLE_ID = "office-ui-theme";

package/dist/{chunk-4MT4OIAJ.js → chunk-A3QNC6VS.js}

@@ -206,7 +206,20 @@ var OFFICE_TOKENS = {
   "--office-avatar-size": "48px",
   "--office-avatar-color": "var(--office-muted-foreground, #6b7280)",
   "--office-toast-width": "360px",
-  "--office-account-field-width": "320px"
+  "--office-account-field-width": "320px",
+  // 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-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"
 };
 function tok(name) {
   return `var(${name}, ${OFFICE_TOKENS[name]})`;

package/dist/{chunk-YM2DT6QD.js → chunk-DECL6RNI.js}

@@ -1,5 +1,5 @@
-import { definer, attachStyles, controlCss, emit } from './chunk-XPYONXNE.js';
-import { tok } from './chunk-4MT4OIAJ.js';
+import { definer, attachStyles, controlCss, emit } from './chunk-UYPH4ESZ.js';
+import { tok } from './chunk-A3QNC6VS.js';
 
 // src/presence.ts
 function participantsFromAwareness(states, selfId) {

package/dist/{chunk-IKE3XWDZ.js → chunk-EIZJR3CC.js}

@@ -1,7 +1,7 @@
-import { createIconSvg, paintIcon, defineIcon } from './chunk-YFT6FYOP.js';
-import { initialsOf } from './chunk-YM2DT6QD.js';
-import { definer, attachStyles, controlCss, present, emit } from './chunk-XPYONXNE.js';
-import { tok, FOCUS_RING, OFFICE_TOKENS } from './chunk-4MT4OIAJ.js';
+import { createIconSvg, paintIcon, defineIcon } from './chunk-LI7NB7HR.js';
+import { initialsOf } from './chunk-DECL6RNI.js';
+import { definer, attachStyles, controlCss, present, emit } from './chunk-UYPH4ESZ.js';
+import { tok, FOCUS_RING, COMPACT, OFFICE_TOKENS } from './chunk-A3QNC6VS.js';
 
 // src/chrome-controls.ts
 var ICON = `svg { flex: none; width: ${tok("--office-icon-size")}; height: ${tok("--office-icon-size")}; fill: none; stroke: currentColor; stroke-width: ${tok("--office-icon-stroke")};
@@ -4462,8 +4462,471 @@ var defineTabStrip = definer("office-ui-tab-strip", () => {
   return OfficeUiTabStrip;
 });
 
-// src/zoom-slider.ts
+// src/title-bar-strip.ts
+function createQuickAccessStrip(doc, activate2) {
+  const toolbar = doc.createElement("div");
+  toolbar.className = "qat";
+  toolbar.setAttribute("role", "toolbar");
+  toolbar.setAttribute("part", "quick-access");
+  const buttons = /* @__PURE__ */ new Map();
+  let stop = "";
+  const enabled = () => [...toolbar.querySelectorAll("button:not(:disabled)")];
+  const syncRoving = () => {
+    const list = enabled();
+    const current = list.find((b) => b.dataset.command === stop) ?? list[0];
+    for (const button of buttons.values()) button.tabIndex = button === current ? 0 : -1;
+  };
+  toolbar.addEventListener("focusin", (event) => {
+    const target = event.target.closest("button");
+    if (target?.dataset.command) {
+      stop = target.dataset.command;
+      syncRoving();
+    }
+  });
+  toolbar.addEventListener("keydown", (event) => {
+    if (event.ctrlKey || event.metaKey || event.altKey) return;
+    const list = enabled();
+    const index = list.findIndex((b) => b === event.target.closest("button"));
+    const last = list.length - 1;
+    const moves = {
+      ArrowRight: (index + 1) % list.length,
+      ArrowLeft: (index + last) % list.length,
+      Home: 0,
+      End: last
+    };
+    const next = moves[event.key] ?? -1;
+    if (next >= 0 && index >= 0) {
+      event.preventDefault();
+      list[next]?.focus();
+    }
+    if (next >= 0 || event.key === " " || event.key === "Enter") event.stopPropagation();
+  });
+  const create = (id) => {
+    const button = doc.createElement("button");
+    button.type = "button";
+    button.dataset.command = id;
+    button.append(createIconSvg(doc));
+    button.addEventListener("click", () => activate2(id));
+    return button;
+  };
+  return {
+    toolbar,
+    render(items, label, showLabels) {
+      toolbar.hidden = items.length === 0;
+      toolbar.setAttribute("aria-label", label);
+      for (const id of [...buttons.keys()]) {
+        if (!items.some((item) => item.id === id)) {
+          buttons.get(id)?.remove();
+          buttons.delete(id);
+        }
+      }
+      for (const item of items) {
+        let button = buttons.get(item.id);
+        if (!button) {
+          button = create(item.id);
+          buttons.set(item.id, button);
+        }
+        paintIcon(button.querySelector("svg"), item.icon);
+        button.setAttribute("aria-label", item.label);
+        if (item.title === void 0) button.removeAttribute("title");
+        else button.title = item.title;
+        button.disabled = item.disabled === true;
+        let text2 = button.querySelector("small");
+        if (showLabels) {
+          text2 ??= button.appendChild(doc.createElement("small"));
+          text2.textContent = item.label;
+        } else {
+          text2?.remove();
+        }
+      }
+      const current = [...toolbar.children];
+      if (items.some((item, index) => current[index] !== buttons.get(item.id)))
+        toolbar.append(...items.map((item) => buttons.get(item.id)));
+      syncRoving();
+    }
+  };
+}
+
+// src/title-bar-search.ts
+var OFFICE_TITLE_BAR_SEARCH_LIMIT = 8;
+function labelMatches(search, query) {
+  const needle = query.trim().toLowerCase();
+  return (search.commands ?? []).filter((entry) => entry.label.toLowerCase().includes(needle));
+}
+function createTitleBarSearch(doc, fieldTag, request) {
+  let model;
+  const box = doc.createElement("div");
+  box.className = "box";
+  const input = doc.createElement(fieldTag);
+  input.setAttribute("variant", "titlebar");
+  input.setAttribute("part", "search");
+  const results = doc.createElement("div");
+  results.className = "results";
+  results.setAttribute("role", "listbox");
+  results.hidden = true;
+  const live = doc.createElement("div");
+  live.className = "sr";
+  live.setAttribute("role", "status");
+  box.append(input, results, live);
+  let matches = [];
+  let active = 0;
+  const close = () => {
+    results.hidden = true;
+    results.replaceChildren();
+    live.textContent = "";
+    matches = [];
+  };
+  const commit = (entry) => {
+    const query = input.value;
+    input.value = "";
+    close();
+    request(entry ? { query, command: entry.id } : { query });
+  };
+  const row = (className, text2) => {
+    const node = doc.createElement("div");
+    node.className = className;
+    node.textContent = text2;
+    return node;
+  };
+  const option = (className, onPick) => {
+    const button = doc.createElement("button");
+    button.type = "button";
+    button.tabIndex = -1;
+    button.className = className;
+    button.addEventListener("mousedown", (event) => {
+      event.preventDefault();
+      onPick();
+    });
+    return button;
+  };
+  const paint = () => {
+    [...results.querySelectorAll('[role="option"]')].forEach(
+      (node, index) => node.setAttribute("aria-selected", String(index === active))
+    );
+  };
+  const open = () => {
+    const query = input.value;
+    if (!model || !query.trim()) {
+      close();
+      return;
+    }
+    const found = model.match ? [...model.match(query)] : labelMatches(model, query);
+    matches = found.slice(0, OFFICE_TITLE_BAR_SEARCH_LIMIT);
+    active = Math.min(active, Math.max(matches.length - 1, 0));
+    results.replaceChildren();
+    if (matches.length > 0) {
+      results.append(row("heading", model.heading));
+      matches.forEach((entry, index) => {
+        const button = option("", () => commit(entry));
+        button.setAttribute("role", "option");
+        const label = doc.createElement("span");
+        label.textContent = entry.label;
+        const category = doc.createElement("span");
+        category.className = "cat";
+        category.textContent = entry.category ?? "";
+        button.append(label, category);
+        button.addEventListener("mouseenter", () => {
+          active = index;
+          paint();
+        });
+        results.append(button);
+      });
+    } else {
+      results.append(row("empty", model.empty));
+    }
+    if (model.content) {
+      const content = option("content", () => commit());
+      const svg = createIconSvg(doc);
+      paintIcon(svg, model.contentIcon ?? "search");
+      const text2 = doc.createElement("span");
+      text2.textContent = model.content(query);
+      content.append(svg, text2);
+      results.append(content);
+    }
+    results.hidden = false;
+    live.textContent = matches.length > 0 ? model.heading : model.empty;
+    paint();
+  };
+  input.addEventListener("input", () => {
+    active = 0;
+    open();
+  });
+  input.addEventListener("focusin", open);
+  box.addEventListener("focusout", (event) => {
+    const next = event.relatedTarget;
+    if (!next || !box.contains(next)) close();
+  });
+  input.addEventListener("keydown", (event) => {
+    const { key, ctrlKey, metaKey } = event;
+    if (key === "Enter" && input.value.trim()) {
+      commit(matches[active]);
+    } else if (key === "Escape" && input.value) {
+      input.value = "";
+      close();
+    } else if ((key === "ArrowDown" || key === "ArrowUp") && matches.length > 0) {
+      event.preventDefault();
+      active = (active + (key === "ArrowDown" ? 1 : matches.length - 1)) % matches.length;
+      paint();
+    }
+    if (!ctrlKey && !metaKey) event.stopPropagation();
+  });
+  return {
+    box,
+    input,
+    render(search) {
+      model = search;
+      box.hidden = !search;
+      if (!search) {
+        close();
+        return;
+      }
+      input.setAttribute("placeholder", search.placeholder);
+      input.setAttribute("aria-label", search.label);
+      if (!results.hidden) open();
+    },
+    close
+  };
+}
+
+// src/title-bar.ts
 var CSS16 = `
+:host { display: block; flex: none; }
+:host([data-empty]) { display: none !important; }
+[hidden] { display: none !important; }
+.bar { box-sizing: border-box; display: flex; align-items: center; gap: ${tok("--office-space-1")}; width: 100%;
+	height: ${tok("--office-title-bar-height")}; padding: 0 ${tok("--office-space-2")};
+	border-bottom: ${tok("--office-border-width")} solid ${tok("--office-title-bar-border")};
+	background: ${tok("--office-title-bar-background")}; color: ${tok("--office-title-bar-foreground")};
+	font: ${tok("--office-font-size-xs")}/${tok("--office-line-height-tight")} ${tok("--office-font")}; user-select: none; }
+:host([placement="belowRibbon"]) .bar { height: auto; min-height: ${tok("--office-title-bar-below-height")}; padding-block: ${tok("--office-space-0")}; }
+.mark { flex: none; display: flex; align-items: center; justify-content: center;
+	width: ${tok("--office-title-bar-mark-size")}; height: ${tok("--office-title-bar-mark-size")}; border-radius: ${tok("--office-radius-sm")};
+	background: ${tok("--office-title-bar-mark-background")}; color: ${tok("--office-title-bar-mark-foreground")};
+	font-size: ${tok("--office-font-size-2xs")}; font-weight: ${tok("--office-font-weight-bold")}; }
+.autosave { flex: none; display: flex; align-items: center; gap: ${tok("--office-space-1-5")};
+	padding: 0 ${tok("--office-space-0")} 0 ${tok("--office-space-1-5")}; white-space: nowrap; }
+.label, .dot, .status { color: ${tok("--office-muted-foreground")}; white-space: nowrap; }
+.sep { flex: none; width: ${tok("--office-border-width")}; height: ${tok("--office-space-4")}; margin: 0 ${tok("--office-space-1")};
+	background: ${tok("--office-title-bar-border")}; }
+.qat { display: flex; align-items: center; gap: ${tok("--office-space-0")}; min-width: 0; }
+.qat button, .results button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
+	gap: ${tok("--office-space-1")}; min-width: ${tok("--office-control-height-md")}; min-height: ${tok("--office-control-height-md")};
+	padding: ${tok("--office-space-1")}; border: 0; border-radius: ${tok("--office-radius-sm")}; background: transparent;
+	color: ${tok("--office-muted-foreground")}; font: inherit; cursor: pointer; touch-action: manipulation; }
+.qat button:hover:not(:disabled) { background: ${tok("--office-selected")}; }
+.qat button:active:not(:disabled) { opacity: .7; }
+.qat button:disabled { opacity: .4; cursor: not-allowed; }
+.qat small { font-size: ${tok("--office-font-size-xs")}; white-space: nowrap; }
+svg { flex: none; width: ${tok("--office-icon-size")}; height: ${tok("--office-icon-size")}; fill: none; stroke: currentColor;
+	stroke-width: ${tok("--office-icon-stroke")}; stroke-linecap: round; stroke-linejoin: round; }
+.file { display: flex; align-items: baseline; gap: ${tok("--office-space-1-5")}; min-width: 0; padding: 0 ${tok("--office-space-1")}; flex: 0 1 auto; }
+.name { max-width: ${tok("--office-title-bar-name-max-width")}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+	color: ${tok("--office-title-bar-foreground")}; font-size: ${tok("--office-font-size-sm")}; font-weight: ${tok("--office-font-weight-medium")}; }
+.status.saving { color: ${tok("--office-warning")}; }
+.status.error { color: ${tok("--office-danger")}; }
+.search { position: relative; flex: 1; display: flex; justify-content: center; min-width: 0; padding: 0 ${tok("--office-space-2")}; }
+.box { position: relative; width: 100%; max-width: ${tok("--office-title-bar-search-max-width")}; min-width: 0; }
+.box > [part="search"] { width: 100%; }
+.results { position: absolute; z-index: ${tok("--office-z-popover")}; top: calc(100% + ${tok("--office-space-1")}); right: 0; left: 0;
+	max-height: ${tok("--office-title-bar-results-max-height")}; overflow-y: auto;
+	border: ${tok("--office-border-width")} solid ${tok("--office-border")}; border-radius: ${tok("--office-radius-lg")};
+	background: ${tok("--office-popover")}; color: ${tok("--office-popover-foreground")}; box-shadow: ${tok("--office-shadow-lg")}; }
+.heading { padding: ${tok("--office-space-1-5")} ${tok("--office-space-3")}; color: ${tok("--office-muted-foreground")};
+	font-size: ${tok("--office-font-size-2xs")}; font-weight: ${tok("--office-font-weight-bold")}; letter-spacing: .05em; text-transform: uppercase; }
+.empty { padding: ${tok("--office-space-2")} ${tok("--office-space-3")}; color: ${tok("--office-muted-foreground")}; }
+.results button { display: flex; width: 100%; justify-content: flex-start; gap: ${tok("--office-space-2")};
+	padding: ${tok("--office-space-1-5")} ${tok("--office-space-3")}; border-radius: 0; color: inherit; text-align: start; }
+.results button:hover, .results button[aria-selected="true"] { background: ${tok("--office-selected")}; }
+.results .cat { margin-inline-start: auto; color: ${tok("--office-muted-foreground")}; font-size: ${tok("--office-font-size-2xs")}; text-transform: capitalize; }
+.results .content { border-top: ${tok("--office-border-width")} solid ${tok("--office-border")}; }
+.end { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: ${tok("--office-space-1")}; }
+.sr { position: absolute; width: ${tok("--office-space-px")}; height: ${tok("--office-space-px")}; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+button:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: ${tok("--office-focus-offset")}; }
+@media ${COMPACT}, (max-width: 1023px) and (max-height: 520px) { :host(:not([placement="belowRibbon"])) { display: none !important; } }
+@media (max-width: 1100px) { .qat small { display: none; } .name { max-width: ${tok("--office-title-bar-name-max-width-narrow")}; } }
+@media (pointer: coarse) {
+	.qat button, .results button { min-width: ${tok("--office-target-size-touch")}; min-height: ${tok("--office-target-size-touch")}; }
+	.bar { height: auto; min-height: ${tok("--office-target-size-touch")}; }
+}
+@media (forced-colors: active) {
+	.bar { border-bottom-color: CanvasText; background: Canvas; color: CanvasText; }
+	.mark { border: ${tok("--office-border-width")} solid CanvasText; background: Canvas; color: CanvasText; }
+	.label, .dot, .status, .name, .qat button, .results button { color: CanvasText; }
+	.sep { background: CanvasText; }
+	.qat button:hover:not(:disabled), .results button:hover, .results button[aria-selected="true"] { background: Highlight; color: HighlightText; }
+	.qat button:disabled { color: GrayText; opacity: 1; }
+	.results { border-color: CanvasText; background: Canvas; }
+	button:focus-visible { outline-color: Highlight; }
+}
+`;
+var EMPTY = { fileName: "" };
+var defineTitleBar = definer("office-ui-title-bar", () => {
+  class OfficeUiTitleBar extends HTMLElement {
+    static autosaveEvent = "office-autosave-toggle";
+    static commandEvent = "office-command";
+    static searchEvent = "office-command-search";
+    /** Inner controls; a product subclass may use its own aliased tags. */
+    static switchTag = "office-ui-switch";
+    static searchTag = "office-ui-search";
+    static observedAttributes = ["placement"];
+    #state = EMPTY;
+    #bar;
+    #full;
+    #mark;
+    #autosave;
+    #autosaveLabel;
+    #autosaveState;
+    #switch;
+    #sepAutosave;
+    #sepStrip;
+    #name;
+    #dot;
+    #status;
+    #searchWrap;
+    #strip;
+    #search;
+    #laidOut = "titleBar";
+    constructor() {
+      super();
+      const doc = this.ownerDocument;
+      const statics = this.constructor;
+      const root = this.attachShadow({ mode: "open" });
+      attachStyles(root, controlCss(CSS16));
+      const el = (tag, className) => {
+        const node = doc.createElement(tag);
+        node.className = className;
+        return node;
+      };
+      const sep = () => {
+        const node = el("i", "sep");
+        node.setAttribute("aria-hidden", "true");
+        return node;
+      };
+      this.#mark = el("span", "mark");
+      this.#mark.setAttribute("aria-hidden", "true");
+      this.#autosaveLabel = el("span", "label");
+      this.#switch = el(statics.switchTag, "switch");
+      this.#switch.setAttribute("part", "autosave-switch");
+      this.#switch.addEventListener("change", () => {
+        emit(this, statics.autosaveEvent, null);
+        this.#switch.checked = this.#state.autosave?.enabled === true;
+      });
+      this.#autosaveState = el("span", "label");
+      this.#autosave = el("span", "autosave");
+      this.#autosave.append(this.#autosaveLabel, this.#switch, this.#autosaveState);
+      this.#sepAutosave = sep();
+      this.#strip = createQuickAccessStrip(doc, (id) => this.activate(id));
+      this.#sepStrip = sep();
+      this.#name = el("span", "name");
+      this.#name.setAttribute("part", "file-name");
+      this.#dot = el("span", "dot");
+      this.#dot.textContent = "\u2022";
+      this.#dot.setAttribute("aria-hidden", "true");
+      this.#status = el("span", "status");
+      const file = el("span", "file");
+      file.append(this.#name, this.#dot, this.#status);
+      this.#search = createTitleBarSearch(
+        doc,
+        statics.searchTag,
+        (detail) => emit(this, statics.searchEvent, detail)
+      );
+      this.#searchWrap = el("span", "search");
+      this.#searchWrap.append(this.#search.box);
+      const end = el("div", "end");
+      for (const name of ["collaboration", "account"]) {
+        const slot = doc.createElement("slot");
+        slot.name = name;
+        end.append(slot);
+      }
+      this.#bar = el("div", "bar");
+      this.#bar.setAttribute("part", "bar");
+      this.#full = [
+        this.#mark,
+        this.#autosave,
+        this.#sepAutosave,
+        this.#strip.toolbar,
+        this.#sepStrip,
+        file,
+        this.#searchWrap,
+        end
+      ];
+      this.#bar.append(...this.#full);
+      root.append(this.#bar);
+    }
+    get state() {
+      return this.#state;
+    }
+    set state(value) {
+      this.#state = value ?? EMPTY;
+      this.#paint();
+    }
+    get placement() {
+      return this.getAttribute("placement") === "belowRibbon" ? "belowRibbon" : "titleBar";
+    }
+    set placement(value) {
+      this.setAttribute("placement", value);
+    }
+    /** The search field inside the bar, for hosts that move focus to it (Alt+Q). */
+    get searchField() {
+      return this.#search.input;
+    }
+    connectedCallback() {
+      this.#paint();
+    }
+    attributeChangedCallback() {
+      this.#paint();
+    }
+    /** A Quick Access button was pressed; subclasses may route by id. */
+    activate(id) {
+      emit(this, this.constructor.commandEvent, { command: id });
+    }
+    /** Called after every render; subclasses mirror state onto the host here. */
+    rendered() {
+    }
+    #paint() {
+      const state = this.#state;
+      const below = this.placement === "belowRibbon";
+      if (this.#laidOut !== this.placement) {
+        this.#bar.replaceChildren(...below ? [this.#strip.toolbar] : this.#full);
+        this.#laidOut = this.placement;
+      }
+      const items = state.quickAccess?.items ?? [];
+      this.toggleAttribute("data-empty", below && items.length === 0);
+      this.#strip.render(
+        items,
+        state.quickAccess?.label ?? "",
+        state.quickAccess?.showLabels === true
+      );
+      this.#sepStrip.hidden = below || items.length === 0;
+      this.#mark.hidden = !state.appMark;
+      this.#mark.textContent = state.appMark ?? "";
+      const autosave = state.autosave;
+      this.#autosave.hidden = this.#sepAutosave.hidden = !autosave;
+      if (autosave) {
+        const available = autosave.available !== false;
+        this.#autosaveLabel.textContent = autosave.label;
+        this.#autosaveState.textContent = autosave.stateLabel;
+        this.#switch.disabled = !available;
+        this.#switch.checked = autosave.enabled;
+        this.#switch.setAttribute("aria-label", autosave.toggleLabel);
+        this.#switch.title = autosave.title ?? autosave.toggleLabel;
+      }
+      this.#name.textContent = state.fileName;
+      this.#dot.hidden = this.#status.hidden = !state.status;
+      this.#status.textContent = state.status ?? "";
+      const tone = state.tone ?? "idle";
+      this.#status.classList.toggle("saving", tone === "saving");
+      this.#status.classList.toggle("error", tone === "error");
+      this.#searchWrap.hidden = !state.search;
+      this.#search.render(state.search);
+      this.rendered();
+    }
+  }
+  return OfficeUiTitleBar;
+});
+
+// src/zoom-slider.ts
+var CSS17 = `
 :host { display: inline-flex; align-items: center; gap: ${tok("--office-space-0")}; font-size: ${tok("--office-font-size-xs")};
 	color: ${tok("--office-foreground")}; font-family: ${tok("--office-font")}; }
 button { box-sizing: border-box; display: inline-grid; place-items: center; min-width: ${tok("--office-target-size")};
@@ -4499,7 +4962,7 @@ var defineZoomSlider = definer("office-ui-zoom-slider", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS16));
+      attachStyles(root, controlCss(CSS17));
       const button = (name, text2) => {
         const element = doc.createElement("button");
         element.type = "button";
@@ -4773,10 +5236,11 @@ var CONTROL_DEFINERS = [
   defineDialogFooter,
   defineToasts,
   defineReadOnlyBanner,
-  definePasteOptions
+  definePasteOptions,
+  defineTitleBar
 ];
 function registerControls(registry) {
   for (const define of CONTROL_DEFINERS) define(registry);
 }
 
-export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile };
+export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile };

package/dist/{chunk-YFT6FYOP.js → chunk-LI7NB7HR.js}

@@ -1,4 +1,4 @@
-import { definer, attachStyles, controlCss } from './chunk-XPYONXNE.js';
+import { definer, attachStyles, controlCss } from './chunk-UYPH4ESZ.js';
 
 // src/icons.ts
 var registry = /* @__PURE__ */ new Map();
@@ -20,6 +20,7 @@ var BUILT_IN = {
   reset: "M4 10a6 6 0 1 1 1.8 4.2M4 6v4h4",
   search: "M3 8.5a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0M13 13l4 4",
   undo: "M7.5 11.5 3.5 7.5l4-4M3.5 7.5h9a4 4 0 0 1 0 8H10",
+  save: "M3.5 3h10.5l2.5 2.5V17h-13ZM6 3v5h7V3M6 17v-5.5h8V17",
   redo: "m12.5 11.5 4-4-4-4M16.5 7.5h-9a4 4 0 0 0 0 8H10",
   pointer: "m5 2.5v13.5l3.6-3.6 2.4 5.1 2.1-1-2.4-5H15.5Z",
   rectangle: "M3 5.5h14v9H3Z",

package/dist/{chunk-HSM56NH6.js → chunk-OAGGHX23.js}

@@ -1,5 +1,5 @@
-import { definer, attachStyles, controlCss, emit } from './chunk-XPYONXNE.js';
-import { tok } from './chunk-4MT4OIAJ.js';
+import { definer, attachStyles, controlCss, emit } from './chunk-UYPH4ESZ.js';
+import { tok } from './chunk-A3QNC6VS.js';
 import { normalizeHexColor } from 'ooxml-core/color';
 
 var SVG_NS = "http://www.w3.org/2000/svg";

package/dist/{chunk-XPYONXNE.js → chunk-UYPH4ESZ.js}

@@ -1,4 +1,4 @@
-import { TOUCH, tok } from './chunk-4MT4OIAJ.js';
+import { TOUCH, tok } from './chunk-A3QNC6VS.js';
 
 // src/registry.ts
 var CONTRACT_REVISION = 1;

package/dist/controls.d.ts

@@ -21,14 +21,16 @@ 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 { defineTitleBar } from './title-bar.js';
 import { defineZoomSlider } from './zoom-slider.js';
-export { defineAccount, defineDialogFooter, definePasteOptions, defineRadio, defineReadOnlyBanner, defineRibbonToggle, defineSearchField, defineToasts, defineBackstage, defineFindBar, definePrintPreview, defineRibbon, defineRuler, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, };
+export { defineAccount, defineDialogFooter, definePasteOptions, defineRadio, defineReadOnlyBanner, defineRibbonToggle, defineSearchField, defineToasts, defineBackstage, defineFindBar, definePrintPreview, defineRibbon, defineRuler, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToolbar, defineZoomSlider, };
 export type { OfficeCommandEvent } from './button.js';
 export type { OfficeDialogCloseEvent, OfficeDialogCloseReason } from './dialog.js';
 export type { OfficeSelectOption } from './select.js';
 export type { OfficeStatusActivateEvent } from './status-bar.js';
 export type { OfficeTab, OfficeTabSelectEvent } from './tab-strip.js';
 export type { OfficeSearchCommand } from './command-search.js';
+export { OFFICE_TITLE_BAR_SEARCH_LIMIT, type OfficeQuickAccessItem, type OfficeTitleBarAutosave, type OfficeTitleBarCommand, type OfficeTitleBarPlacement, type OfficeTitleBarSearch, type OfficeTitleBarSearchDetail, type OfficeTitleBarState, type OfficeTitleBarTone, } from './title-bar.js';
 export { attachKeyTips, type KeyTipsHandle } from './keytips.js';
 export type { OfficeBackstageCloseEvent, OfficeBackstageItem, OfficeBackstageSelectEvent, } from './backstage.js';
 export type { OfficeFindInputEvent, OfficeFindStepEvent } from './find-bar.js';
@@ -41,6 +43,6 @@ export type { OfficePasteOption, OfficePasteOptionsState, OfficeReadOnlyBannerIn
 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, 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, 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,5 +1,5 @@
-export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-IKE3XWDZ.js';
-export { defineIcon } from './chunk-YFT6FYOP.js';
-import './chunk-YM2DT6QD.js';
-import './chunk-XPYONXNE.js';
-import './chunk-4MT4OIAJ.js';
+export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-EIZJR3CC.js';
+export { defineIcon } from './chunk-LI7NB7HR.js';
+import './chunk-DECL6RNI.js';
+import './chunk-UYPH4ESZ.js';
+import './chunk-A3QNC6VS.js';

package/dist/icons.js

@@ -1,3 +1,3 @@
-export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-YFT6FYOP.js';
-import './chunk-XPYONXNE.js';
-import './chunk-4MT4OIAJ.js';
+export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-LI7NB7HR.js';
+import './chunk-UYPH4ESZ.js';
+import './chunk-A3QNC6VS.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-options-dialog", "office-ui-account", "office-ui-ribbon", "office-ui-find-bar", "office-ui-ruler", "office-ui-backstage", "office-ui-print-preview", "office-ui-radio", "office-ui-search", "office-ui-ribbon-toggle", "office-ui-dialog-footer", "office-ui-toasts", "office-ui-read-only-banner", "office-ui-paste-options", "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-ribbon", "office-ui-find-bar", "office-ui-ruler", "office-ui-backstage", "office-ui-print-preview", "office-ui-radio", "office-ui-search", "office-ui-ribbon-toggle", "office-ui-dialog-footer", "office-ui-toasts", "office-ui-read-only-banner", "office-ui-paste-options", "office-ui-title-bar", "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,14 +1,14 @@
-import { installOfficeUiTheme } from './chunk-F4TM7U4P.js';
-export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-F4TM7U4P.js';
-import { registerControls } from './chunk-IKE3XWDZ.js';
-export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-IKE3XWDZ.js';
-export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-YFT6FYOP.js';
-import { definePresence } from './chunk-YM2DT6QD.js';
-export { definePresence, initialsOf, participantsFromAwareness } from './chunk-YM2DT6QD.js';
-import { defineSmartArt } from './chunk-HSM56NH6.js';
-export { defineSmartArt, renderDiagramDrawing } from './chunk-HSM56NH6.js';
-export { CONTRACT_REVISION } from './chunk-XPYONXNE.js';
-export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-4MT4OIAJ.js';
+import { installOfficeUiTheme } from './chunk-5L3NYLAW.js';
+export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-5L3NYLAW.js';
+import { registerControls } from './chunk-EIZJR3CC.js';
+export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-EIZJR3CC.js';
+export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-LI7NB7HR.js';
+import { definePresence } from './chunk-DECL6RNI.js';
+export { definePresence, initialsOf, participantsFromAwareness } from './chunk-DECL6RNI.js';
+import { defineSmartArt } from './chunk-OAGGHX23.js';
+export { defineSmartArt, renderDiagramDrawing } from './chunk-OAGGHX23.js';
+export { CONTRACT_REVISION } from './chunk-UYPH4ESZ.js';
+export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-A3QNC6VS.js';
 
 // src/index.ts
 var OFFICE_UI_TAGS = [
@@ -44,6 +44,7 @@ var OFFICE_UI_TAGS = [
   "office-ui-toasts",
   "office-ui-read-only-banner",
   "office-ui-paste-options",
+  "office-ui-title-bar",
   "office-ui-presence",
   "office-ui-smartart"
 ];

package/dist/presence.js

@@ -1,3 +1,3 @@
-export { definePresence, initialsOf, participantsFromAwareness } from './chunk-YM2DT6QD.js';
-import './chunk-XPYONXNE.js';
-import './chunk-4MT4OIAJ.js';
+export { definePresence, initialsOf, participantsFromAwareness } from './chunk-DECL6RNI.js';
+import './chunk-UYPH4ESZ.js';
+import './chunk-A3QNC6VS.js';

package/dist/smartart.js

@@ -1,3 +1,3 @@
-export { defineSmartArt, renderDiagramDrawing } from './chunk-HSM56NH6.js';
-import './chunk-XPYONXNE.js';
-import './chunk-4MT4OIAJ.js';
+export { defineSmartArt, renderDiagramDrawing } from './chunk-OAGGHX23.js';
+import './chunk-UYPH4ESZ.js';
+import './chunk-A3QNC6VS.js';

package/dist/theme.js

@@ -1,2 +1,2 @@
-export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-F4TM7U4P.js';
-export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-4MT4OIAJ.js';
+export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-5L3NYLAW.js';
+export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-A3QNC6VS.js';

package/dist/title-bar-search.d.ts

@@ -0,0 +1,43 @@
+/** One command the title-bar search can run. `category` shows on the right of its row. */
+export interface OfficeTitleBarCommand {
+    id: string;
+    label: string;
+    category?: string | undefined;
+}
+/** The centred command search. Every string arrives translated from the host. */
+export interface OfficeTitleBarSearch {
+    placeholder: string;
+    label: string;
+    /** Heading over the matches and the live-region text when there are some. */
+    heading: string;
+    /** Row and live-region text when nothing matches. */
+    empty: string;
+    /** Searched by label when `match` is absent. */
+    commands?: readonly OfficeTitleBarCommand[] | undefined;
+    /** Host ranking (synonyms, keywords); replaces the default label search. */
+    match?: ((query: string) => readonly OfficeTitleBarCommand[]) | undefined;
+    /** Text of the trailing "search the document" row; absent drops that row. */
+    content?: ((query: string) => string) | undefined;
+    /** Glyph of the content row; defaults to `search`. */
+    contentIcon?: string | undefined;
+}
+/** Detail of the search request: a chosen command, or a document search when `command` is absent. */
+export interface OfficeTitleBarSearchDetail {
+    query: string;
+    command?: string;
+}
+/** The dropdown shows at most this many commands so it never outgrows its box. */
+export declare const OFFICE_TITLE_BAR_SEARCH_LIMIT = 8;
+export interface TitleBarSearchView {
+    box: HTMLElement;
+    input: HTMLElement & {
+        value: string;
+    };
+    render(search: OfficeTitleBarSearch | undefined): void;
+    close(): void;
+}
+/**
+ * A search field plus its result list. The query stays local to the view, so hosts never
+ * round-trip keystrokes; they receive one request per commit.
+ */
+export declare function createTitleBarSearch(doc: Document, fieldTag: string, request: (detail: OfficeTitleBarSearchDetail) => void): TitleBarSearchView;

package/dist/title-bar-strip.d.ts

@@ -0,0 +1,20 @@
+/** One Quick Access Toolbar button; every string arrives translated from the host. */
+export interface OfficeQuickAccessItem {
+    id: string;
+    /** Registered glyph name (see `registerIcon`). */
+    icon: string;
+    /** Accessible name, and the visible text when labels show. */
+    label: string;
+    /** ScreenTip; absent leaves the button without a `title`. */
+    title?: string | undefined;
+    disabled?: boolean | undefined;
+}
+export interface QuickAccessStrip {
+    toolbar: HTMLElement;
+    render(items: readonly OfficeQuickAccessItem[], label: string, showLabels: boolean): void;
+}
+/**
+ * The Quick Access Toolbar: one roving tab stop, arrows/Home/End between enabled buttons.
+ * Buttons are keyed by id and patched in place, so a focused button survives every update.
+ */
+export declare function createQuickAccessStrip(doc: Document, activate: (id: string) => void): QuickAccessStrip;

package/dist/title-bar.d.ts

@@ -0,0 +1,49 @@
+import { type OfficeQuickAccessItem } from './title-bar-strip.js';
+import { type OfficeTitleBarSearch } from './title-bar-search.js';
+export type OfficeTitleBarPlacement = 'titleBar' | 'belowRibbon';
+export type OfficeTitleBarTone = 'idle' | 'saving' | 'error';
+/** The AutoSave switch. The host owns the state; a change is only a request. */
+export interface OfficeTitleBarAutosave {
+    enabled: boolean;
+    /** Default true. False renders the switch inert. */
+    available?: boolean | undefined;
+    /** "AutoSave". */
+    label: string;
+    /** "On" / "Off", shown after the switch. */
+    stateLabel: string;
+    /** Accessible name of the switch. */
+    toggleLabel: string;
+    /** ScreenTip of the switch; defaults to `toggleLabel`. */
+    title?: string | undefined;
+}
+/** Everything the bar shows, already translated. Absent parts are not rendered. */
+export interface OfficeTitleBarState {
+    /** One or two letters in the product-coloured app mark; absent hides the mark. */
+    appMark?: string | undefined;
+    fileName: string;
+    /** Save-location or save-progress text after the name. */
+    status?: string | undefined;
+    tone?: OfficeTitleBarTone | undefined;
+    autosave?: OfficeTitleBarAutosave | undefined;
+    quickAccess?: {
+        label: string;
+        items: readonly OfficeQuickAccessItem[];
+        showLabels?: boolean | undefined;
+    } | undefined;
+    search?: OfficeTitleBarSearch | undefined;
+}
+/**
+ * `<office-ui-title-bar>`: Office's title bar above the ribbon (app mark, AutoSave, Quick
+ * Access Toolbar, file name and status, centred command search, `collaboration` and `account`
+ * slots). Controlled: set `state` (`OfficeTitleBarState`, every string translated); the bar
+ * owns no effects. `placement="belowRibbon"` renders only the Quick Access row and hides
+ * itself (`data-empty`) while that row is empty. Events (bubbling, composed; static names let a
+ * product subclass keep its published ones): `office-autosave-toggle`, `office-command`
+ * `{ command }` from a Quick Access button and `office-command-search` `{ query, command? }`.
+ * Override `activate(id)` to route Quick Access buttons differently and `rendered()` to mirror
+ * state onto the host. Tokens: `--office-title-bar-*`.
+ */
+export declare const defineTitleBar: import("./registry.js").Definer;
+export type { OfficeQuickAccessItem } from './title-bar-strip.js';
+export type { OfficeTitleBarCommand, OfficeTitleBarSearch, OfficeTitleBarSearchDetail, } from './title-bar-search.js';
+export { OFFICE_TITLE_BAR_SEARCH_LIMIT } from './title-bar-search.js';

package/dist/tokens.d.ts

@@ -202,6 +202,18 @@ export declare const OFFICE_TOKENS: {
     readonly '--office-avatar-color': "var(--office-muted-foreground, #6b7280)";
     readonly '--office-toast-width': "360px";
     readonly '--office-account-field-width': "320px";
+    readonly '--office-title-bar-height': "36px";
+    readonly '--office-title-bar-below-height': "28px";
+    readonly '--office-title-bar-background': "var(--office-surface, #f3f4f6)";
+    readonly '--office-title-bar-foreground': "var(--office-foreground, #1f2937)";
+    readonly '--office-title-bar-border': "var(--office-border, #d1d5db)";
+    readonly '--office-title-bar-mark-size': "20px";
+    readonly '--office-title-bar-mark-background': "var(--office-accent, #2563eb)";
+    readonly '--office-title-bar-mark-foreground': "var(--office-accent-foreground, #ffffff)";
+    readonly '--office-title-bar-name-max-width': "240px";
+    readonly '--office-title-bar-name-max-width-narrow': "140px";
+    readonly '--office-title-bar-search-max-width': "448px";
+    readonly '--office-title-bar-results-max-height': "256px";
 };
 export type OfficeToken = keyof typeof OFFICE_TOKENS;
 /** `var(--office-…, <default>)` for a declared token. The default comes from the table. */

package/package.json

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