ooxml-ui 0.16.3 → 0.18.0

package/README.md

@@ -70,7 +70,7 @@ with an incompatible build of this package.
 | `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-status-bar` / `-status-item`               | `label`, `value`, `interactive`, `id`; controlled bar: `state` `{ items?, toggles?, views?, zoom? }` with `collaboration` and `end` slots                                                                                                                                                                                 | `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` | Children mode: `label`, `openAt(x, y)`, `close()`, `open` over `office-ui-menu-item` and separator children. Controlled mode: `state` `{ x, y, label, items: [{ id, label, separatorBefore?, heading?, danger?, disabled?, checked?, icon? }], markers?, zIndex?, autoFocus? }`; arrows, Home, End and type-ahead in both | children: item `office-command` `{ command }`; controlled: `office-menu-request` `{ id }`, `office-menu-close` `{ reason }` (never closes itself) |
@@ -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-IKE3XWDZ.js → chunk-BN5K27RN.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-HRWP3FWD.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")};
@@ -4183,23 +4183,234 @@ var defineSelect = definer("office-ui-select", () => {
   return OfficeUiSelect;
 });
 
+// src/status-bar-view.ts
+function createStatusBarView(doc, activate2) {
+  const el = (tag, className) => {
+    const node = doc.createElement(tag);
+    node.className = className;
+    return node;
+  };
+  const sep = (className) => {
+    const node = el("i", className);
+    node.setAttribute("aria-hidden", "true");
+    return node;
+  };
+  const slot = (name2) => {
+    const node = doc.createElement("slot");
+    if (name2) node.name = name2;
+    return node;
+  };
+  const button = (id, className) => {
+    const node = el("button", className);
+    node.type = "button";
+    node.dataset.id = id;
+    node.addEventListener("click", () => activate2(id));
+    node.addEventListener("keydown", (event) => {
+      const { key, ctrlKey, metaKey, altKey } = event;
+      if ((key === " " || key === "Enter") && !ctrlKey && !metaKey && !altKey)
+        event.stopPropagation();
+    });
+    return node;
+  };
+  const paint = (node, spec) => {
+    let svg = node.querySelector("svg");
+    if (!svg) svg = node.insertBefore(createIconSvg(doc), node.firstChild);
+    paintIcon(svg, spec.icon);
+    node.title = spec.label;
+    node.setAttribute("aria-label", spec.label);
+    if (spec.pressed !== void 0) node.setAttribute("aria-pressed", String(spec.pressed));
+    else node.removeAttribute("aria-pressed");
+    node.hidden = spec.hidden === true;
+    let text2 = node.querySelector(".label");
+    if (spec.text) {
+      text2 ??= node.appendChild(el("span", "label"));
+      text2.textContent = spec.text;
+    } else {
+      text2?.remove();
+    }
+  };
+  const keyed = (parent, make, patch) => {
+    const nodes = /* @__PURE__ */ new Map();
+    return (specs) => {
+      for (const [id, node] of nodes)
+        if (!specs.some((spec) => spec.id === id)) {
+          node.remove();
+          nodes.delete(id);
+        }
+      for (const spec of specs) {
+        let node = nodes.get(spec.id);
+        if (!node) {
+          node = make(spec);
+          nodes.set(spec.id, node);
+        }
+        patch(node, spec);
+      }
+      const current = [...parent.children];
+      if (specs.some((spec, index) => current[index] !== nodes.get(spec.id)))
+        parent.append(...specs.map((spec) => nodes.get(spec.id)));
+    };
+  };
+  const items = el("span", "items");
+  const renderItems = keyed(
+    items,
+    (spec) => {
+      const node = el("span", "item");
+      node.dataset.item = spec.id;
+      return node;
+    },
+    (node, spec) => {
+      node.textContent = spec.text;
+      if (spec.title) node.title = spec.title;
+      else node.removeAttribute("title");
+      node.classList.toggle("saving", spec.tone === "saving");
+      node.classList.toggle("error", spec.tone === "error");
+      node.classList.toggle("narrow-hide", spec.narrowHide === true);
+      if (spec.live) node.setAttribute("aria-live", "polite");
+      else node.removeAttribute("aria-live");
+    }
+  );
+  const spacer = el("span", "spacer");
+  const toggles = el("span", "toggles");
+  const renderToggles = keyed(
+    toggles,
+    (spec) => button(spec.id, "toggle"),
+    (node, spec) => paint(node, spec)
+  );
+  const viewSep = sep("sep tight");
+  const views = el("div", "group views");
+  const renderViews = keyed(
+    views,
+    (spec) => button(spec.id, "view"),
+    (node, spec) => paint(node, spec)
+  );
+  const collaboration = slot("collaboration");
+  const collabSep = sep("sep tight");
+  collabSep.hidden = true;
+  collaboration.addEventListener("slotchange", () => {
+    collabSep.hidden = collaboration.assignedNodes().length === 0;
+  });
+  const zoomSep = sep("sep tight");
+  const zoom = el("div", "group zoom");
+  const zoomOut = button("zoomOut", "zoom-step");
+  zoomOut.append(createIconSvg(doc));
+  const zoomFit = button("zoomFit", "zoom-fit");
+  const zoomIn = button("zoomIn", "zoom-step");
+  zoomIn.append(createIconSvg(doc));
+  zoom.append(zoomOut, zoomFit, zoomIn);
+  const bar = el("div", "bar");
+  bar.setAttribute("part", "bar");
+  bar.append(
+    items,
+    slot(""),
+    spacer,
+    toggles,
+    viewSep,
+    views,
+    collabSep,
+    collaboration,
+    slot("end"),
+    zoomSep,
+    zoom
+  );
+  const name = (node, label) => {
+    node.title = label;
+    node.setAttribute("aria-label", label);
+  };
+  return {
+    bar,
+    render(state) {
+      const itemSpecs = state?.items ?? [];
+      renderItems(itemSpecs);
+      items.hidden = itemSpecs.length === 0;
+      const toggleSpecs = state?.toggles ?? [];
+      renderToggles(toggleSpecs);
+      toggles.hidden = toggleSpecs.length === 0;
+      const viewSpecs = state?.views || [];
+      renderViews(viewSpecs);
+      views.hidden = viewSpecs.length === 0;
+      viewSep.hidden = views.hidden || toggles.hidden;
+      spacer.hidden = !state;
+      const z = state?.zoom;
+      zoomSep.hidden = zoom.hidden = !z;
+      if (z) {
+        name(zoomOut, z.outLabel);
+        name(zoomFit, z.fitLabel);
+        name(zoomIn, z.inLabel);
+        paintIcon(zoomOut.querySelector("svg"), z.outIcon ?? "minus");
+        paintIcon(zoomIn.querySelector("svg"), z.inIcon ?? "plus");
+        zoomFit.textContent = `${Math.round(z.percent)}%`;
+      }
+    }
+  };
+}
+
 // src/status-bar.ts
 var BAR_CSS = `
 :host { display: flex; align-items: center; gap: ${tok("--office-space-3")}; min-height: ${tok("--office-status-bar-height")}; padding: 0 ${tok("--office-space-2")}; font-size: ${tok("--office-font-size-xs")};
 	background: ${tok("--office-surface")}; color: ${tok("--office-foreground")};
 	border-top: ${tok("--office-border-width")} solid ${tok("--office-border")}; font-family: ${tok("--office-font")}; }
 ::slotted([slot="end"]) { margin-inline-start: auto; }
-@media (forced-colors: active) { :host { background: Canvas; color: CanvasText; border-top-color: CanvasText; } }
+.bar { display: contents; }
+[hidden] { display: none !important; }
+:host([data-controlled]) { display: block; flex: none; padding: 0; gap: 0; }
+:host([data-controlled]) .bar { box-sizing: border-box; display: flex; align-items: center; gap: ${tok("--office-space-1")}; width: 100%;
+	min-height: ${tok("--office-status-bar-height")}; padding: ${tok("--office-space-0")} ${tok("--office-space-2")}; color: ${tok("--office-muted-foreground")}; }
+:host([data-controlled]) ::slotted([slot="end"]) { margin-inline-start: 0; }
+.items { display: flex; align-items: center; min-width: 0; }
+.item { flex: none; white-space: nowrap; }
+.item + .item::before { content: ""; display: inline-block; width: ${tok("--office-border-width")}; height: ${tok("--office-space-3")};
+	margin: 0 ${tok("--office-space-2")}; vertical-align: middle; background: ${tok("--office-border")}; }
+.item.saving { color: ${tok("--office-warning")}; }
+.item.error { color: ${tok("--office-danger")}; }
+.spacer { flex: 1; }
+.toggles, .group { display: flex; align-items: center; gap: ${tok("--office-space-0")}; }
+.sep { flex: none; width: ${tok("--office-border-width")}; height: ${tok("--office-space-3")}; margin: 0 ${tok("--office-space-0")}; background: ${tok("--office-border")}; }
+.bar 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-xs")}; min-height: ${tok("--office-control-height-xs")}; padding: ${tok("--office-space-1")}; border: 0; border-radius: ${tok("--office-radius-sm")};
+	background: transparent; color: inherit; font: inherit; cursor: pointer; touch-action: manipulation; }
+.bar button:hover { background: ${tok("--office-selected")}; color: ${tok("--office-foreground")}; }
+.bar button[aria-pressed="true"] { color: ${tok("--office-accent")}; }
+.bar button:active { opacity: .8; }
+.bar button:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: ${tok("--office-focus-offset")}; }
+.bar 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; }
+.toggle svg, .zoom-step svg { width: ${tok("--office-icon-size-sm")}; height: ${tok("--office-icon-size-sm")}; }
+.zoom-fit { min-width: ${tok("--office-zoom-value-width")}; font-variant-numeric: tabular-nums; }
+@media ${COMPACT} { .narrow-hide, .toggle .label { display: none !important; } }
+@media (pointer: coarse) { .bar button { min-width: ${tok("--office-target-size-touch")}; min-height: ${tok("--office-target-size-touch")}; } }
+@media (forced-colors: active) {
+	:host { background: Canvas; color: CanvasText; border-top-color: CanvasText; }
+	.bar button { color: ButtonText; } .bar button:hover { background: Highlight; color: HighlightText; }
+	.bar button[aria-pressed="true"] { border: ${tok("--office-border-width")} solid Highlight; }
+	.bar button:focus-visible { outline-color: Highlight; }
+	.sep, .item + .item::before { background: CanvasText; }
+}
 `;
 var defineStatusBar = definer("office-ui-status-bar", () => {
   class OfficeUiStatusBar extends HTMLElement {
+    static activateEvent = "office-status-activate";
+    #state;
+    #view;
     constructor() {
       super();
       const root = this.attachShadow({ mode: "open" });
       attachStyles(root, controlCss(BAR_CSS));
-      const end = this.ownerDocument.createElement("slot");
-      end.name = "end";
-      root.append(this.ownerDocument.createElement("slot"), end);
+      this.#view = createStatusBarView(
+        this.ownerDocument,
+        (id) => emit(this, this.constructor.activateEvent, {
+          id
+        })
+      );
+      root.append(this.#view.bar);
+      this.#view.render(void 0);
+    }
+    get state() {
+      return this.#state;
+    }
+    set state(value) {
+      this.#state = value ?? void 0;
+      this.toggleAttribute("data-controlled", this.#state !== void 0);
+      this.#view.render(this.#state);
     }
     connectedCallback() {
       this.setAttribute("role", "group");
@@ -4462,8 +4673,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 +5173,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 +5447,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-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-YFT6FYOP.js → chunk-HRWP3FWD.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();
@@ -18,8 +18,11 @@ var BUILT_IN = {
   settings: "M3 5h14M6 10h8M8 15h4M6 3v4M12 8v4M10 13v4",
   clock: "M3 10a7 7 0 1 0 14 0 7 7 0 1 0-14 0M10 6v4l3 2",
   reset: "M4 10a6 6 0 1 1 1.8 4.2M4 6v4h4",
+  plus: "M10 4v12M4 10h12",
+  minus: "M4 10h12",
   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 { OfficeStatusActivateEvent, OfficeStatusBarState, OfficeStatusButton, OfficeStatusText, } 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-BN5K27RN.js';
+export { defineIcon } from './chunk-HRWP3FWD.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-HRWP3FWD.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-BN5K27RN.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-BN5K27RN.js';
+export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-HRWP3FWD.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/status-bar-view.d.ts

@@ -0,0 +1,48 @@
+/** A text segment at the start of the bar (page count, words, language, save state). */
+export interface OfficeStatusText {
+    id: string;
+    text: string;
+    title?: string | undefined;
+    tone?: 'idle' | 'saving' | 'error' | undefined;
+    /** Announce changes politely (a page counter). */
+    live?: boolean | undefined;
+    /** Hide on phone widths. */
+    narrowHide?: boolean | undefined;
+}
+/** A status-bar button (Notes, Comments, a view switch). `label` is its name and ScreenTip. */
+export interface OfficeStatusButton {
+    id: string;
+    icon: string;
+    label: string;
+    /** Visible text after the glyph; hidden on phone widths. */
+    text?: string | undefined;
+    pressed?: boolean | undefined;
+    hidden?: boolean | undefined;
+}
+/** Everything the controlled bar shows, already translated. Absent parts are not rendered. */
+export interface OfficeStatusBarState {
+    items?: readonly OfficeStatusText[] | undefined;
+    toggles?: readonly OfficeStatusButton[] | undefined;
+    /** The view switches (Normal, Sorter, Reading); hidden while empty or `false`. */
+    views?: readonly OfficeStatusButton[] | false | undefined;
+    /** Zoom out, percentage (zoom to fit) and zoom in; emits `zoomOut`, `zoomFit`, `zoomIn`. */
+    zoom?: {
+        percent: number;
+        outLabel: string;
+        fitLabel: string;
+        inLabel: string;
+        /** Glyphs; default `minus` and `plus`. */
+        outIcon?: string | undefined;
+        inIcon?: string | undefined;
+    } | undefined;
+}
+export interface StatusBarView {
+    bar: HTMLElement;
+    render(state: OfficeStatusBarState | undefined): void;
+}
+/**
+ * The controlled status bar: built once, then patched in place so a focused button survives
+ * updates. Slots stay in the row: the default slot after the texts, `collaboration` between the
+ * views and the zoom, and `end` before the zoom.
+ */
+export declare function createStatusBarView(doc: Document, activate: (id: string) => void): StatusBarView;

package/dist/status-bar.d.ts

@@ -2,8 +2,12 @@ export type OfficeStatusActivateEvent = CustomEvent<{
     id: string;
 }>;
 /**
- * Status bar container: `role="group"` named by its `label` attribute (default "Status").
- * Children with `slot="end"` are pushed to the trailing edge (zoom, view switches).
+ * Status bar: `role="group"` named by its `label` attribute (default "Status"). Two ways to fill
+ * it. Composed: children, with `slot="end"` pushed to the trailing edge (zoom, view switches).
+ * Controlled: set `state` (`OfficeStatusBarState`: start texts, toggles, view switches and a zoom
+ * cluster, all translated); every button emits `office-status-activate` `{ id }` (static
+ * `activateEvent` lets a product subclass keep its published name). Slots stay available in
+ * controlled mode: the default after the texts, `collaboration` and `end` before the zoom.
  */
 export declare const defineStatusBar: import("./registry.js").Definer;
 /**
@@ -12,3 +16,4 @@ export declare const defineStatusBar: import("./registry.js").Definer;
  * `{ id }` (`id` attribute) on click, Enter or Space; zoom or language pickers are examples.
  */
 export declare const defineStatusItem: import("./registry.js").Definer;
+export type { OfficeStatusBarState, OfficeStatusButton, OfficeStatusText, } from './status-bar-view.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.18.0",
 	"description": "Shared, format-neutral web components and styles for the Office viewers (Word, PowerPoint, Excel)",
 	"keywords": [
 		"custom-elements",