ooxml-ui 0.9.0 → 0.10.0

package/README.md

@@ -75,6 +75,11 @@ with an incompatible build of this package.
 | `office-ui-command-search`                            | `commands` `[{ id, label, keywords?, description?, disabled?, title? }]`, `placeholder`, `label`, `limit` (Office's "Tell me what you want to do")                                                                                                    | choice: `office-command` `{ command }`                                                    |
 | `office-ui-options-dialog`                            | `categories` `[{ id, label, description?, disabled?, sections: [{ id, title, controls }] }]` (controls: `toggle`, `select`, `number`, `text`, each optionally `disabled` with a reason), `values`, `category`, `open`, `heading`, `show()`, `close()` | OK: `office-options-change` `{ values, changed }`                                         |
 | `office-ui-account`                                   | `profile` `{ displayName, avatarColor, initial? }`; slots `sign-in` and default (product sections)                                                                                                                                                    | `office-profile-change` `{ profile }`                                                     |
+| `office-ui-ribbon` | Tab row over tab panels. Panels are children with `data-ribbon-tab`, `data-label`, optional `data-tab-keytip`; slots `quick-access`, `search`, `end`; `selected`, `label`, `file-label`, `no-file`, `file-expanded`, `file-keytip`; `focusFile()`, `focusTab()` | `office-ribbon-select` `{ tab }` (cancelable), `office-ribbon-file` |
+| `office-ui-backstage` | `items` `[{ id, label, group?: 'footer', disabled?, title? }]`, `open`, `selected`, `label`, `back-label`, `show(page?)`, `close()`; pages are children with `data-backstage-page` | `office-backstage-select` `{ id }` (cancelable), `office-backstage-close` `{ reason }` (cancelable) |
+| `office-ui-find-bar` | `open`, `label`, `input-label`, `placeholder`, `maxlength`, `disabled`, `navigation-disabled`, `previous-label`, `next-label`, `close-label`; `value`, `status`, `statusTitle`, `show()`, `close()` | `office-find-input` `{ query }`, `office-find-step` `{ direction }`, `office-find-close` |
+| `office-ui-ruler` | `orientation="vertical"`, `origin` (px offset of zero), `scale` (px per unit, default 96), `direction="reverse"`; decorative | none |
+| `office-ui-print-preview` | `pages` (rendered nodes; an inert clone of the current one is shown), `index`, `label`, `empty-label` | `office-print-preview-page` `{ index }` |
 | `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                                                                                      |
@@ -85,7 +90,7 @@ an origin shows the same name and avatar colour.
 
 `attachKeyTips(scope)` (from `ooxml-ui/controls`) adds Office KeyTips to any element or shadow
 root: press and release Alt to show badges on controls marked `data-keytip="H"`, type a badge to
-activate it, and use `data-keytip-panel` / `data-keytip-level` for a tab's second level. Escape
+activate it (controls inside open shadow roots of shared elements, such as ribbon tabs, are included), and use `data-keytip-panel` / `data-keytip-level` for a tab's second level. Escape
 steps back; disabled controls are dimmed and never run.
 
 Setting a property never emits an event; only user activation does. Controls honour

package/dist/backstage.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Office's File view (backstage): a navigation column and one page per item. Generalised from
+ * pptx-viewer's `BACKSTAGE_NAV` model (render/backstage.ts) and the Visio viewer's backstage.
+ */
+export interface OfficeBackstageItem {
+    id: string;
+    label: string;
+    /** Items in the footer group sit at the bottom of the column (Account, Options). */
+    group?: 'footer';
+    disabled?: boolean;
+    /** Tooltip, for example why an item is disabled. */
+    title?: string;
+}
+/** An item was chosen; cancelable (`preventDefault()` keeps the current page). */
+export type OfficeBackstageSelectEvent = CustomEvent<{
+    id: string;
+}>;
+export type OfficeBackstageCloseEvent = CustomEvent<{
+    reason: 'back' | 'escape' | 'api';
+}>;
+/**
+ * `<office-ui-backstage>`: set `items`, put one light-DOM child per page with
+ * `data-backstage-page="<id>"`, then `show(id)`. Choosing an item emits `office-backstage-select`
+ * and, unless prevented, shows its page; items without a page (Save, Close) only emit. Back and
+ * Escape emit a cancelable `office-backstage-close` and close. Attributes: `open`, `selected`,
+ * `label` (default "File"), `back-label`. Nav buttons carry `data-backstage-item`.
+ */
+export declare const defineBackstage: import("./registry.js").Definer;

package/dist/{chunk-TMSFX6TC.js → chunk-5YR7YA57.js}

@@ -2,6 +2,716 @@ import { createIconSvg, paintIcon, defineIcon } from './chunk-PCSUQPMC.js';
 import { initialsOf } from './chunk-RLPL7Q6J.js';
 import { definer, attachStyles, controlCss, emit } from './chunk-EY266IK3.js';
 
+// src/backstage.ts
+var CSS = `
+:host { position: absolute; inset: 0; z-index: 30; display: none; min-width: 0;
+	background: var(--office-background, #fff); color: var(--office-foreground, #1f2937);
+	font-family: var(--office-font, system-ui, sans-serif); }
+:host([open]) { display: block; }
+.frame { display: flex; height: 100%; min-width: 0; }
+nav { display: flex; flex: 0 0 200px; flex-direction: column; padding: 12px 0; overflow: auto;
+	background: var(--office-accent, #2563eb); color: var(--office-accent-foreground, #fff); }
+nav button { border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
+.back { width: 36px; min-height: 36px; margin: 0 0 12px 16px; padding: 0; border: 1.5px solid currentColor;
+	border-radius: 50%; font-size: 18px; text-align: center; }
+.item { min-height: 38px; padding: 6px 24px; font-size: 14px; }
+.item:hover:enabled, .item[aria-current="page"] { background: color-mix(in srgb, #000 22%, transparent); }
+.item:disabled { opacity: .55; cursor: default; }
+nav button:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }
+.footer { display: flex; flex-direction: column; margin-top: auto; padding-top: 16px; }
+.body { flex: 1; min-width: 0; overflow: auto; padding: 28px 40px; }
+@media (max-width: 760px) {
+	.frame { flex-direction: column; }
+	nav { flex: none; flex-direction: row; flex-wrap: wrap; padding: 6px; }
+	.back { margin: 4px; }
+	.item { min-height: 44px; padding: 6px 12px; }
+	.footer { flex-direction: row; margin-top: 0; padding-top: 0; }
+	.body { padding: 16px; }
+}
+@media (forced-colors: active) { nav { border-inline-end: 1px solid CanvasText; } .item[aria-current="page"] { outline: 2px solid Highlight; } }
+`;
+var defineBackstage = definer("office-ui-backstage", () => {
+  class OfficeUiBackstage extends HTMLElement {
+    static observedAttributes = ["selected", "label", "back-label"];
+    #items = [];
+    #frame;
+    #nav;
+    #main;
+    #footer;
+    #back;
+    constructor() {
+      super();
+      const doc = this.ownerDocument;
+      const root = this.attachShadow({ mode: "open" });
+      attachStyles(root, controlCss(CSS));
+      this.#frame = doc.createElement("div");
+      this.#frame.className = "frame";
+      this.#frame.setAttribute("role", "dialog");
+      this.#frame.setAttribute("aria-modal", "true");
+      this.#nav = doc.createElement("nav");
+      this.#nav.setAttribute("part", "nav");
+      this.#back = doc.createElement("button");
+      this.#back.type = "button";
+      this.#back.className = "back";
+      this.#back.textContent = "\u2190";
+      this.#back.dataset.backstage = "back";
+      this.#main = doc.createElement("div");
+      this.#footer = doc.createElement("div");
+      this.#footer.className = "footer";
+      this.#nav.append(this.#back, this.#main, this.#footer);
+      const body = doc.createElement("div");
+      body.className = "body";
+      body.setAttribute("part", "body");
+      body.append(doc.createElement("slot"));
+      this.#frame.append(this.#nav, body);
+      root.append(this.#frame);
+      this.#back.addEventListener("click", () => this.#requestClose("back"));
+      this.#nav.addEventListener("click", (event) => {
+        const item = event.target.closest?.(
+          "[data-backstage-item]"
+        );
+        if (item && !item.disabled) this.#choose(item.dataset.backstageItem);
+      });
+      this.addEventListener("keydown", (event) => {
+        if (event.key !== "Escape" || !this.open) return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.#requestClose("escape");
+      });
+      this.#labels();
+    }
+    attributeChangedCallback(name) {
+      if (name === "selected") this.#sync();
+      else this.#labels();
+    }
+    get items() {
+      return this.#items;
+    }
+    set items(value) {
+      this.#items = value;
+      this.#render();
+    }
+    get open() {
+      return this.hasAttribute("open");
+    }
+    set open(value) {
+      this.toggleAttribute("open", Boolean(value));
+    }
+    get selected() {
+      return this.getAttribute("selected") ?? "";
+    }
+    set selected(id) {
+      this.setAttribute("selected", id);
+    }
+    /** Open on a page (default: the selected one) and focus its item. */
+    show(page = this.selected || this.#items.find((item) => this.#page(item.id))?.id || "") {
+      this.open = true;
+      if (page) this.selected = page;
+      this.#button(this.selected)?.focus();
+    }
+    /** Close without asking (emits `office-backstage-close` with reason `api`). */
+    close() {
+      if (!this.open) return;
+      this.open = false;
+      emit(this, "office-backstage-close", { reason: "api" });
+    }
+    #labels() {
+      const label = this.getAttribute("label") ?? "File";
+      this.#frame.setAttribute("aria-label", label);
+      this.#nav.setAttribute("aria-label", label);
+      const back = this.getAttribute("back-label") ?? "Back";
+      this.#back.setAttribute("aria-label", back);
+      this.#back.title = `${back} (Esc)`;
+    }
+    #page(id) {
+      return [...this.children].find(
+        (child) => child instanceof HTMLElement && child.dataset.backstagePage === id
+      );
+    }
+    #button(id) {
+      return [...this.#nav.querySelectorAll("[data-backstage-item]")].find(
+        (button) => button.dataset.backstageItem === id
+      ) ?? null;
+    }
+    #render() {
+      const doc = this.ownerDocument;
+      const button = (item) => {
+        const element = doc.createElement("button");
+        element.type = "button";
+        element.className = "item";
+        element.dataset.backstageItem = item.id;
+        element.textContent = item.label;
+        element.disabled = !!item.disabled;
+        if (item.title) element.title = item.title;
+        return element;
+      };
+      this.#main.replaceChildren(
+        ...this.#items.filter((item) => item.group !== "footer").map(button)
+      );
+      this.#footer.replaceChildren(
+        ...this.#items.filter((item) => item.group === "footer").map(button)
+      );
+      this.#sync();
+    }
+    #sync() {
+      const selected = this.selected;
+      for (const item of this.#nav.querySelectorAll("[data-backstage-item]")) {
+        if (item.dataset.backstageItem === selected) item.setAttribute("aria-current", "page");
+        else item.removeAttribute("aria-current");
+      }
+      for (const child of this.children)
+        if (child instanceof HTMLElement && child.dataset.backstagePage !== void 0)
+          child.hidden = child.dataset.backstagePage !== selected;
+    }
+    #choose(id) {
+      if (emit(this, "office-backstage-select", { id }, true) && this.#page(id)) this.selected = id;
+    }
+    #requestClose(reason) {
+      if (emit(this, "office-backstage-close", { reason }, true)) this.open = false;
+    }
+  }
+  return OfficeUiBackstage;
+});
+
+// src/find-bar.ts
+var CSS2 = `
+:host { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px 4px 12px;
+	border-bottom: 1px solid var(--office-border, #d1d5db); background: var(--office-surface, #f3f4f6);
+	color: var(--office-foreground, #1f2937); font: 12px var(--office-font, system-ui, sans-serif); }
+:host(:not([open])) { display: none; }
+[role="search"] { display: flex; flex: 1; align-items: center; gap: 4px; min-width: 0; max-width: 640px; }
+label { display: flex; flex: 1; align-items: center; gap: 6px; min-width: 0; }
+input { flex: 1; min-width: 0; min-height: 26px; padding: 2px 6px; font: inherit; color: inherit;
+	border: 1px solid var(--office-border, #d1d5db); border-radius: 3px; background: var(--office-background, #fff); }
+button { min-height: 26px; padding: 2px 8px; font: inherit; color: inherit; cursor: pointer;
+	border: 1px solid var(--office-border, #d1d5db); border-radius: 3px; background: var(--office-background, #fff); }
+button:disabled { opacity: .5; cursor: default; }
+.status { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
+	color: var(--office-muted-foreground, #6b7280); }
+.close { margin-inline-start: auto; width: var(--office-target-size, 28px); padding: 0; border-color: transparent;
+	background: transparent; font-size: 18px; line-height: 1; }
+input:focus-visible, button:focus-visible { outline: 2px solid var(--office-ring, #2563eb); outline-offset: 1px; }
+@media (max-width: 760px) { :host { flex-wrap: wrap; } [role="search"] { flex-wrap: wrap; } }
+`;
+var defineFindBar = definer("office-ui-find-bar", () => {
+  class OfficeUiFindBar extends HTMLElement {
+    static observedAttributes = [
+      "label",
+      "input-label",
+      "placeholder",
+      "maxlength",
+      "disabled",
+      "navigation-disabled",
+      "previous-label",
+      "next-label",
+      "close-label"
+    ];
+    #region;
+    #input;
+    #previous;
+    #next;
+    #status;
+    #close;
+    constructor() {
+      super();
+      const doc = this.ownerDocument;
+      const root = this.attachShadow({ mode: "open", delegatesFocus: true });
+      attachStyles(root, controlCss(CSS2));
+      this.#region = doc.createElement("div");
+      this.#region.setAttribute("role", "search");
+      const field = doc.createElement("label");
+      field.append("Find ");
+      this.#input = doc.createElement("input");
+      this.#input.type = "search";
+      this.#input.autocomplete = "off";
+      this.#input.spellcheck = false;
+      this.#input.setAttribute("aria-describedby", "status");
+      field.append(this.#input);
+      const button = (action, text2) => {
+        const element = doc.createElement("button");
+        element.type = "button";
+        element.dataset.action = action;
+        element.textContent = text2;
+        return element;
+      };
+      this.#previous = button("previous", "Previous");
+      this.#next = button("next", "Next");
+      this.#status = doc.createElement("span");
+      this.#status.id = "status";
+      this.#status.className = "status";
+      this.#status.setAttribute("role", "status");
+      this.#status.setAttribute("aria-live", "polite");
+      this.#status.setAttribute("aria-atomic", "true");
+      this.#region.append(field, this.#previous, this.#next, this.#status);
+      this.#close = button("close", "\xD7");
+      this.#close.className = "close";
+      root.append(this.#region, this.#close);
+      this.#input.addEventListener(
+        "input",
+        () => emit(this, "office-find-input", { query: this.#input.value })
+      );
+      this.#input.addEventListener("keydown", (event) => this.#key(event));
+      this.#previous.addEventListener("click", () => this.#step("previous"));
+      this.#next.addEventListener("click", () => this.#step("next"));
+      this.#close.addEventListener("click", () => this.close());
+      this.#sync();
+    }
+    attributeChangedCallback() {
+      this.#sync();
+    }
+    get open() {
+      return this.hasAttribute("open");
+    }
+    set open(value) {
+      this.toggleAttribute("open", Boolean(value));
+    }
+    get value() {
+      return this.#input.value;
+    }
+    set value(query) {
+      if (this.#input.value !== query) this.#input.value = query;
+    }
+    get status() {
+      return this.#status.textContent ?? "";
+    }
+    set status(text2) {
+      this.#status.textContent = text2;
+    }
+    get statusTitle() {
+      return this.#status.title;
+    }
+    set statusTitle(text2) {
+      this.#status.title = text2;
+    }
+    /** Open, focus the field and select its query. */
+    show() {
+      this.open = true;
+      this.#input.focus();
+      this.#input.select();
+    }
+    /** Close and emit `office-find-close`. */
+    close() {
+      if (!this.open) return;
+      this.open = false;
+      emit(this, "office-find-close", {});
+    }
+    #step(direction) {
+      if (!this.hasAttribute("navigation-disabled")) emit(this, "office-find-step", { direction });
+    }
+    #key(event) {
+      if (event.isComposing) return;
+      if (event.key === "Enter") {
+        event.preventDefault();
+        this.#step(event.shiftKey ? "previous" : "next");
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.#input.value) {
+          this.#input.value = "";
+          emit(this, "office-find-input", { query: "" });
+        } else this.close();
+      }
+    }
+    #sync() {
+      const text2 = (name, fallback) => this.getAttribute(name) ?? fallback;
+      this.#region.setAttribute("aria-label", text2("label", "Find"));
+      this.#input.setAttribute("aria-label", text2("input-label", "Find"));
+      this.#input.placeholder = text2("placeholder", "");
+      const max = Number(this.getAttribute("maxlength"));
+      if (Number.isInteger(max) && max > 0) this.#input.maxLength = max;
+      else this.#input.removeAttribute("maxlength");
+      this.#input.disabled = this.hasAttribute("disabled");
+      const stuck = this.hasAttribute("navigation-disabled") || this.#input.disabled;
+      this.#previous.disabled = this.#next.disabled = stuck;
+      this.#previous.setAttribute("aria-label", text2("previous-label", "Previous result"));
+      this.#next.setAttribute("aria-label", text2("next-label", "Next result"));
+      const close = text2("close-label", "Close Find");
+      this.#close.setAttribute("aria-label", close);
+      this.#close.title = `${close} (Esc)`;
+    }
+  }
+  return OfficeUiFindBar;
+});
+
+// src/print-preview.ts
+var CSS3 = `
+:host { display: block; max-width: 420px; font: 12px var(--office-font, system-ui, sans-serif);
+	color: var(--office-foreground, #1f2937); }
+.sheet { padding: 12px; border: 1px solid var(--office-border, #d1d5db); background: #fff;
+	box-shadow: 0 1px 4px rgb(0 0 0 / 15%); }
+.sheet > * { display: block; width: 100%; height: auto; }
+.empty { color: var(--office-muted-foreground, #6b7280); }
+.nav { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }
+.nav[hidden] { display: none; }
+button { min-width: var(--office-target-size, 28px); min-height: var(--office-target-size, 28px); font: inherit;
+	color: inherit; border: 1px solid var(--office-border, #d1d5db); border-radius: 3px;
+	background: var(--office-background, #fff); cursor: pointer; }
+button:disabled { opacity: .5; cursor: default; }
+button:focus-visible { outline: 2px solid var(--office-ring, #2563eb); outline-offset: 1px; }
+`;
+var definePrintPreview = definer("office-ui-print-preview", () => {
+  class OfficeUiPrintPreview extends HTMLElement {
+    static observedAttributes = ["label", "empty-label"];
+    #pages = [];
+    #index = 0;
+    #sheet;
+    #nav;
+    #previous;
+    #next;
+    #count;
+    constructor() {
+      super();
+      const doc = this.ownerDocument;
+      const root = this.attachShadow({ mode: "open" });
+      attachStyles(root, controlCss(CSS3));
+      this.#sheet = doc.createElement("div");
+      this.#sheet.className = "sheet";
+      this.#sheet.setAttribute("role", "img");
+      this.#nav = doc.createElement("div");
+      this.#nav.className = "nav";
+      const button = (label, text2, step) => {
+        const element = doc.createElement("button");
+        element.type = "button";
+        element.setAttribute("aria-label", label);
+        element.textContent = text2;
+        element.addEventListener("click", () => this.#go(this.#index + step));
+        return element;
+      };
+      this.#previous = button("Previous page", "\u2039", -1);
+      this.#next = button("Next page", "\u203A", 1);
+      this.#count = doc.createElement("span");
+      this.#nav.append(this.#previous, this.#count, this.#next);
+      root.append(this.#sheet, this.#nav);
+      this.#render();
+    }
+    attributeChangedCallback() {
+      this.#render();
+    }
+    get pages() {
+      return this.#pages;
+    }
+    set pages(value) {
+      this.#pages = value;
+      this.#index = Math.min(this.#index, Math.max(0, value.length - 1));
+      this.#render();
+    }
+    get index() {
+      return this.#index;
+    }
+    set index(value) {
+      const next = Math.max(0, Math.min(this.#pages.length - 1, Math.trunc(value) || 0));
+      if (next === this.#index) return;
+      this.#index = next;
+      this.#render();
+    }
+    #go(index) {
+      const before = this.#index;
+      this.index = index;
+      if (this.#index !== before) emit(this, "office-print-preview-page", { index: this.#index });
+    }
+    #render() {
+      const doc = this.ownerDocument;
+      const total = this.#pages.length;
+      const page = this.#pages[this.#index];
+      const label = this.getAttribute("label") ?? "Print preview";
+      this.#sheet.setAttribute(
+        "aria-label",
+        total > 1 ? `${label}, page ${this.#index + 1} of ${total}` : label
+      );
+      if (!page) {
+        const empty = doc.createElement("p");
+        empty.className = "empty";
+        empty.textContent = this.getAttribute("empty-label") ?? "Nothing to print.";
+        this.#sheet.replaceChildren(empty);
+      } else {
+        const clone = doc.importNode(page, true);
+        if (clone instanceof Element) {
+          clone.removeAttribute("style");
+          clone.removeAttribute("tabindex");
+          clone.querySelectorAll("[tabindex]").forEach((node) => node.removeAttribute("tabindex"));
+        }
+        this.#sheet.replaceChildren(clone);
+      }
+      this.#nav.hidden = total < 2;
+      this.#count.textContent = `${this.#index + 1} of ${total}`;
+      this.#previous.disabled = this.#index === 0;
+      this.#next.disabled = this.#index >= total - 1;
+    }
+  }
+  return OfficeUiPrintPreview;
+});
+
+// src/ribbon-tabs.ts
+var CSS4 = `
+:host { display: block; min-width: 0; }
+.head { display: flex; align-items: stretch; min-width: 0; border-bottom: 1px solid var(--office-border, #d1d5db); }
+.file { flex: none; min-height: var(--office-ribbon-tab-height, 35px); margin: 0 4px 0 0; padding: 6px 16px; border: 0;
+	border-radius: 0; background: var(--office-accent, #2563eb); color: var(--office-accent-foreground, #fff);
+	font: inherit; font-size: 13px; cursor: pointer; }
+.file:hover { background: color-mix(in srgb, var(--office-accent, #2563eb) 85%, #000); }
+.file[hidden] { display: none; }
+[role="tablist"] { display: flex; flex: 0 1 auto; align-items: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; }
+[role="tab"] { position: relative; flex: none; min-height: var(--office-ribbon-tab-height, 35px); padding: 6px 12px; border: 0;
+	border-radius: 0; background: transparent; color: var(--office-muted-foreground, #6b7280); font: inherit; font-size: 13px;
+	cursor: pointer; }
+[role="tab"]:hover { color: var(--office-foreground, #1f2937); background: var(--office-surface, #f3f4f6); }
+[role="tab"][aria-selected="true"] { color: var(--office-accent, #2563eb); }
+[role="tab"][aria-selected="true"]::after { content: ""; position: absolute; inset: auto 0 0; height: 2.5px;
+	background: var(--office-accent, #2563eb); }
+.file:focus-visible, [role="tab"]:focus-visible { outline: 2px solid var(--office-ring, #2563eb); outline-offset: -2px; }
+::slotted([slot="search"]) { align-self: center; }
+@media (max-width: 760px), (pointer: coarse) {
+	.file, [role="tab"] { min-height: 44px; }
+	.file { min-width: 52px; }
+}
+@media (forced-colors: active) {
+	.file { border: 1px solid ButtonText; }
+	[role="tab"][aria-selected="true"]::after { background: Highlight; }
+}
+`;
+var defineRibbon = definer("office-ui-ribbon", () => {
+  class OfficeUiRibbon extends HTMLElement {
+    static observedAttributes = [
+      "selected",
+      "label",
+      "file-label",
+      "no-file",
+      "file-expanded",
+      "file-keytip"
+    ];
+    #file;
+    #tabs;
+    #panelSlot;
+    constructor() {
+      super();
+      const doc = this.ownerDocument;
+      const root = this.attachShadow({ mode: "open" });
+      attachStyles(root, controlCss(CSS4));
+      const head = doc.createElement("div");
+      head.className = "head";
+      head.setAttribute("part", "head");
+      const slot = (name) => {
+        const element = doc.createElement("slot");
+        element.name = name;
+        return element;
+      };
+      this.#file = doc.createElement("button");
+      this.#file.type = "button";
+      this.#file.className = "file";
+      this.#file.setAttribute("part", "file");
+      this.#file.setAttribute("aria-haspopup", "dialog");
+      this.#file.setAttribute("aria-expanded", "false");
+      this.#file.addEventListener("click", () => emit(this, "office-ribbon-file", {}));
+      this.#tabs = doc.createElement("div");
+      this.#tabs.setAttribute("role", "tablist");
+      this.#tabs.setAttribute("part", "tabs");
+      this.#tabs.addEventListener("click", (event) => {
+        const tab = event.target.closest?.('[role="tab"]');
+        if (tab) this.#choose(tab.dataset.tab);
+      });
+      this.#tabs.addEventListener("keydown", (event) => this.#key(event));
+      head.append(slot("quick-access"), this.#file, this.#tabs, slot("search"), slot("end"));
+      this.#panelSlot = doc.createElement("slot");
+      this.#panelSlot.addEventListener("slotchange", () => this.#build());
+      root.append(head, this.#panelSlot);
+      this.#syncFile();
+    }
+    connectedCallback() {
+      this.#build();
+    }
+    attributeChangedCallback(name) {
+      if (name === "selected") this.#sync();
+      else if (name === "label")
+        this.#tabs.setAttribute("aria-label", this.getAttribute("label") ?? "Ribbon");
+      else this.#syncFile();
+    }
+    get selected() {
+      return this.getAttribute("selected") ?? this.#panels()[0]?.dataset.ribbonTab ?? "";
+    }
+    set selected(tab) {
+      this.setAttribute("selected", tab);
+    }
+    /** Focus the File button (for example when the backstage it opened closes). */
+    focusFile() {
+      this.#file.focus();
+    }
+    /** Focus the selected tab. */
+    focusTab() {
+      this.#tabs.querySelector('[aria-selected="true"]')?.focus();
+    }
+    #panels() {
+      return [...this.children].filter(
+        (child) => child instanceof HTMLElement && !!child.dataset.ribbonTab
+      );
+    }
+    #build() {
+      const doc = this.ownerDocument;
+      if (!this.#tabs.hasAttribute("aria-label"))
+        this.#tabs.setAttribute("aria-label", this.getAttribute("label") ?? "Ribbon");
+      this.#tabs.replaceChildren(
+        ...this.#panels().map((panel) => {
+          const id = panel.dataset.ribbonTab;
+          const tab = doc.createElement("button");
+          tab.type = "button";
+          tab.setAttribute("role", "tab");
+          tab.id = `tab-${id}`;
+          tab.dataset.tab = id;
+          tab.textContent = panel.dataset.label ?? id;
+          if (panel.dataset.tabKeytip) {
+            tab.dataset.keytip = panel.dataset.tabKeytip;
+            if (panel.id) tab.dataset.keytipPanel = panel.id;
+          }
+          panel.setAttribute("role", "tabpanel");
+          panel.setAttribute("aria-label", panel.dataset.label ?? id);
+          return tab;
+        })
+      );
+      this.#sync();
+    }
+    #sync() {
+      const selected = this.selected;
+      for (const tab of this.#tabs.querySelectorAll('[role="tab"]')) {
+        const on = tab.dataset.tab === selected;
+        tab.setAttribute("aria-selected", String(on));
+        tab.tabIndex = on ? 0 : -1;
+      }
+      for (const panel of this.#panels()) panel.hidden = panel.dataset.ribbonTab !== selected;
+    }
+    #syncFile() {
+      this.#file.textContent = this.getAttribute("file-label") ?? "File";
+      this.#file.hidden = this.hasAttribute("no-file");
+      this.#file.setAttribute(
+        "aria-expanded",
+        String(this.getAttribute("file-expanded") === "true")
+      );
+      const keytip = this.getAttribute("file-keytip");
+      if (keytip) this.#file.dataset.keytip = keytip;
+      else delete this.#file.dataset.keytip;
+    }
+    #choose(tab) {
+      if (tab === this.selected) return;
+      if (emit(this, "office-ribbon-select", { tab }, true)) this.selected = tab;
+    }
+    #key(event) {
+      const tabs = [...this.#tabs.querySelectorAll('[role="tab"]')];
+      const at = tabs.findIndex((tab) => tab.dataset.tab === this.selected);
+      const step = { ArrowRight: 1, ArrowLeft: -1 }[event.key];
+      const next = event.key === "Home" ? tabs[0] : event.key === "End" ? tabs.at(-1) : step ? tabs[(at + step + tabs.length) % tabs.length] : void 0;
+      if (!next) return;
+      event.preventDefault();
+      this.#choose(next.dataset.tab);
+      this.focusTab();
+    }
+  }
+  return OfficeUiRibbon;
+});
+
+// src/ruler.ts
+var CSS5 = `
+:host { display: block; box-sizing: border-box; background: var(--office-background, #fff);
+	color: var(--office-muted-foreground, #605e5c); overflow: hidden; }
+:host(:not([orientation="vertical"])) { height: 18px; border-bottom: 1px solid var(--office-border, #d1d5db); }
+:host([orientation="vertical"]) { width: 18px; border-inline-end: 1px solid var(--office-border, #d1d5db); }
+canvas { display: block; width: 100%; height: 100%; }
+`;
+function rulerDivisions(unitPixels) {
+  return unitPixels >= 192 ? 16 : unitPixels >= 96 ? 8 : unitPixels >= 48 ? 4 : 2;
+}
+var defineRuler = definer("office-ui-ruler", () => {
+  class OfficeUiRuler extends HTMLElement {
+    static observedAttributes = ["orientation", "origin", "scale", "direction"];
+    #canvas;
+    #frame = 0;
+    #observer;
+    constructor() {
+      super();
+      const root = this.attachShadow({ mode: "open" });
+      attachStyles(root, controlCss(CSS5));
+      this.#canvas = this.ownerDocument.createElement("canvas");
+      root.append(this.#canvas);
+    }
+    connectedCallback() {
+      this.setAttribute("aria-hidden", "true");
+      const Observer = this.ownerDocument.defaultView?.ResizeObserver;
+      this.#observer = Observer ? new Observer(() => this.#schedule()) : void 0;
+      this.#observer?.observe(this);
+      this.#schedule();
+    }
+    disconnectedCallback() {
+      this.#observer?.disconnect();
+      if (this.#frame) this.ownerDocument.defaultView?.cancelAnimationFrame?.(this.#frame);
+      this.#frame = 0;
+    }
+    attributeChangedCallback() {
+      this.#schedule();
+    }
+    #number(name, fallback) {
+      const value = Number(this.getAttribute(name));
+      return this.hasAttribute(name) && Number.isFinite(value) ? value : fallback;
+    }
+    #schedule() {
+      if (this.#frame || !this.isConnected) return;
+      const view = this.ownerDocument.defaultView;
+      this.#frame = view?.requestAnimationFrame?.(() => this.#draw()) ?? 0;
+      if (!this.#frame) this.#draw();
+    }
+    #draw() {
+      this.#frame = 0;
+      const view = this.ownerDocument.defaultView;
+      const vertical = this.getAttribute("orientation") === "vertical";
+      const reverse = this.getAttribute("direction") === "reverse";
+      const box = this.getBoundingClientRect();
+      const length = vertical ? box.height : box.width;
+      const thickness = (vertical ? box.width : box.height) || 18;
+      const ratio = view?.devicePixelRatio ?? 1;
+      const canvas = this.#canvas;
+      canvas.width = Math.max(1, Math.round((vertical ? thickness : length) * ratio));
+      canvas.height = Math.max(1, Math.round((vertical ? length : thickness) * ratio));
+      const context = canvas.getContext?.("2d");
+      if (!context || !length) return;
+      context.scale(ratio, ratio);
+      const ink = view?.getComputedStyle(this).color || "#605e5c";
+      context.strokeStyle = ink;
+      context.fillStyle = ink;
+      context.lineWidth = 1;
+      context.font = `9px ${view?.getComputedStyle(this).fontFamily || "system-ui, sans-serif"}`;
+      const origin = this.#number("origin", 0);
+      const unit = Math.max(1, this.#number("scale", 96));
+      const divisions = rulerDivisions(unit);
+      const step = unit / divisions;
+      const sign = reverse ? -1 : 1;
+      const a = (0 - origin) / (sign * step);
+      const b = (length - origin) / (sign * step);
+      const first = Math.floor(Math.min(a, b)) - 1;
+      const last = Math.ceil(Math.max(a, b)) + 1;
+      context.beginPath();
+      for (let index = first; index <= last; index++) {
+        const at = Math.round(origin + sign * index * step) + 0.5;
+        const tick = index % divisions === 0 ? thickness : index % (divisions / 2) === 0 ? thickness * 0.5 : thickness * 0.3;
+        if (vertical) {
+          context.moveTo(thickness, at);
+          context.lineTo(thickness - tick, at);
+        } else {
+          context.moveTo(at, thickness);
+          context.lineTo(at, thickness - tick);
+        }
+        if (index % divisions !== 0) continue;
+        const label = String(index / divisions);
+        if (!vertical) context.fillText(label, at + 2, 9);
+        else {
+          context.save();
+          context.translate(9, at - 2);
+          context.rotate(-Math.PI / 2);
+          context.fillText(label, 0, 0);
+          context.restore();
+        }
+      }
+      context.stroke();
+    }
+  }
+  return OfficeUiRuler;
+});
+
 // src/account.ts
 var DEFAULT_OFFICE_PROFILE = { displayName: "", avatarColor: "#6366f1" };
 var OFFICE_AVATAR_SWATCHES = [
@@ -52,7 +762,7 @@ function clearOfficeProfile(storage = defaultStorage(), key = OFFICE_PROFILE_STO
   } catch {
   }
 }
-var CSS = `
+var CSS6 = `
 :host { display: block; font-family: var(--office-font, system-ui, sans-serif); font-size: 13px; }
 h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
 .who { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
@@ -82,7 +792,7 @@ var defineAccount = definer("office-ui-account", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS));
+      attachStyles(root, controlCss(CSS6));
       const heading = doc.createElement("h2");
       heading.textContent = "User Information";
       const who = doc.createElement("div");
@@ -183,7 +893,7 @@ var defineAccount = definer("office-ui-account", () => {
 });
 
 // src/button.ts
-var CSS2 = `
+var CSS7 = `
 :host { display: inline-flex; vertical-align: middle; }
 button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
 	gap: 6px; min-width: var(--office-target-size, 28px); min-height: var(--office-target-size, 28px);
@@ -224,7 +934,7 @@ var defineButton = definer("office-ui-button", () => {
     constructor() {
       super();
       const root = this.attachShadow({ mode: "open", delegatesFocus: true });
-      attachStyles(root, controlCss(CSS2));
+      attachStyles(root, controlCss(CSS7));
       this.button = this.ownerDocument.createElement("button");
       this.button.type = "button";
       this.button.setAttribute("part", "button");
@@ -399,7 +1109,7 @@ var defineCheckbox = definer(
 var defineSwitch = definer("office-ui-switch", makeCheckable("switch", SWITCH_CSS));
 
 // src/dialog.ts
-var CSS3 = `
+var CSS8 = `
 :host { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; }
 :host([open]) { display: flex; }
 .backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .4); }
@@ -432,7 +1142,7 @@ var defineDialog = definer("office-ui-dialog", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS3));
+      attachStyles(root, controlCss(CSS8));
       const backdrop = doc.createElement("div");
       backdrop.className = "backdrop";
       this.box = doc.createElement("div");
@@ -535,7 +1245,7 @@ var defineDialog = definer("office-ui-dialog", () => {
 });
 
 // src/command-search.ts
-var CSS4 = `
+var CSS9 = `
 :host { display: inline-flex; align-items: center; min-width: 0; font-family: var(--office-font, system-ui, sans-serif); }
 .field { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; height: var(--office-target-size, 28px);
 	padding: 0 8px; box-sizing: border-box; border: 1px solid transparent; border-radius: var(--office-radius, 4px);
@@ -575,7 +1285,7 @@ var defineCommandSearch = definer("office-ui-command-search", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open", delegatesFocus: true });
-      attachStyles(root, controlCss(CSS4));
+      attachStyles(root, controlCss(CSS9));
       const field = doc.createElement("div");
       field.className = "field";
       const glass = createIconSvg(doc);
@@ -732,7 +1442,7 @@ var defineCommandSearch = definer("office-ui-command-search", () => {
 });
 
 // src/context-menu.ts
-var CSS5 = `
+var CSS10 = `
 :host { display: contents; }
 .panel { position: fixed; inset: auto; margin: 0; min-width: 200px; padding: 4px; box-sizing: border-box;
 	background: var(--office-background, #fff); color: var(--office-foreground, #1f2937);
@@ -768,7 +1478,7 @@ var defineContextMenu = definer("office-ui-context-menu", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS5));
+      attachStyles(root, controlCss(CSS10));
       this.panel = doc.createElement("div");
       this.panel.className = "panel";
       this.panel.setAttribute("role", "menu");
@@ -1178,7 +1888,7 @@ function clampOptionNumber(raw, min, max) {
   const parsed = Number(raw);
   return Number.isFinite(parsed) && raw.trim() !== "" ? Math.min(max, Math.max(min, parsed)) : void 0;
 }
-var CSS6 = `
+var CSS11 = `
 :host { display: contents; }
 office-ui-dialog { --office-dialog-width: min(820px, 100vw); --office-dialog-max-width: min(820px, 100vw); }
 .layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 0; min-height: min(440px, 70vh); margin: -16px; }
@@ -1227,7 +1937,7 @@ var defineOptionsDialog = definer("office-ui-options-dialog", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS6));
+      attachStyles(root, controlCss(CSS11));
       this.#dialog = doc.createElement("office-ui-dialog");
       const layout = doc.createElement("div");
       layout.className = "layout";
@@ -1572,7 +2282,7 @@ var defineToolbar = definer("office-ui-toolbar", () => {
 });
 
 // src/select.ts
-var CSS7 = `
+var CSS12 = `
 :host { display: inline-block; position: relative; vertical-align: middle; }
 button { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px;
 	width: 100%; min-height: var(--office-target-size, 28px); padding: 0 8px; font: inherit; font-size: 12px;
@@ -1611,7 +2321,7 @@ var defineSelect = definer("office-ui-select", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open", delegatesFocus: true });
-      attachStyles(root, controlCss(CSS7));
+      attachStyles(root, controlCss(CSS12));
       this.trigger = doc.createElement("button");
       this.trigger.type = "button";
       this.trigger.setAttribute("role", "combobox");
@@ -1862,7 +2572,7 @@ var defineStatusItem = definer("office-ui-status-item", () => {
 });
 
 // src/tab-strip.ts
-var CSS8 = `
+var CSS13 = `
 :host { display: flex; align-items: stretch; min-width: 0; min-height: 28px; gap: 2px; padding: 0 6px;
 	background: var(--office-surface, #f3f4f6); color: var(--office-muted-foreground, #6b7280);
 	border-top: 1px solid var(--office-border, #d1d5db); font-size: 12px;
@@ -1909,7 +2619,7 @@ var defineTabStrip = definer("office-ui-tab-strip", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS8));
+      attachStyles(root, controlCss(CSS13));
       const step = (name, icon) => {
         const button = doc.createElement("button");
         button.type = "button";
@@ -2048,7 +2758,7 @@ var defineTabStrip = definer("office-ui-tab-strip", () => {
 });
 
 // src/zoom-slider.ts
-var CSS9 = `
+var CSS14 = `
 :host { display: inline-flex; align-items: center; gap: 2px; font-size: 11px;
 	color: var(--office-foreground, #1f2937); font-family: var(--office-font, system-ui, sans-serif); }
 button { box-sizing: border-box; display: inline-grid; place-items: center; min-width: var(--office-target-size, 24px);
@@ -2084,7 +2794,7 @@ var defineZoomSlider = definer("office-ui-zoom-slider", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS9));
+      attachStyles(root, controlCss(CSS14));
       const button = (name, text2) => {
         const element = doc.createElement("button");
         element.type = "button";
@@ -2186,6 +2896,19 @@ var visible = (el) => {
   const box = el.getBoundingClientRect();
   return box.width > 0 && box.height > 0;
 };
+function deepTips(root) {
+  const found = [...root.querySelectorAll("[data-keytip]")];
+  for (const host of root.querySelectorAll("*")) {
+    const shadow = host.shadowRoot;
+    if (!shadow) continue;
+    const inner = deepTips(shadow);
+    if (!inner.length) continue;
+    for (const el of inner) hostOf.set(el, host);
+    found.push(...inner);
+  }
+  return found;
+}
+var hostOf = /* @__PURE__ */ new WeakMap();
 function activate(el) {
   const inner = el.shadowRoot?.querySelector(".main, button");
   (inner ?? el).click();
@@ -2203,8 +2926,8 @@ function attachKeyTips(scope) {
   let levels = [];
   let typed = "";
   let altAlone = false;
-  const tipsAt = (container) => [...(container ?? scope).querySelectorAll("[data-keytip]")].filter((el) => {
-    const owner = el.parentElement?.closest("[data-keytip-level]") ?? null;
+  const tipsAt = (container) => deepTips(container ?? scope).filter((el) => {
+    const owner = (hostOf.get(el) ?? el.parentElement)?.closest("[data-keytip-level]") ?? null;
     return owner === container && visible(el);
   });
   const current = () => tipsAt(levels.at(-1) ?? null);
@@ -2333,10 +3056,15 @@ var CONTROL_DEFINERS = [
   defineZoomSlider,
   defineTabStrip,
   defineOptionsDialog,
-  defineAccount
+  defineAccount,
+  defineRibbon,
+  defineFindBar,
+  defineRuler,
+  defineBackstage,
+  definePrintPreview
 ];
 function registerControls(registry) {
   for (const define of CONTROL_DEFINERS) define(registry);
 }
 
-export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, attachKeyTips, clampOptionNumber, clearOfficeProfile, defineAccount, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, profileInitials, readOfficeProfile, registerControls, sanitizeOfficeProfile, writeOfficeProfile };
+export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, attachKeyTips, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePrintPreview, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRuler, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, writeOfficeProfile };

package/dist/controls.d.ts

@@ -1,3 +1,8 @@
+import { defineBackstage } from './backstage.js';
+import { defineFindBar } from './find-bar.js';
+import { definePrintPreview } from './print-preview.js';
+import { defineRibbon } from './ribbon-tabs.js';
+import { defineRuler } from './ruler.js';
 import { defineAccount } from './account.js';
 import { defineButton } from './button.js';
 import { defineCheckbox, defineSwitch } from './checkable.js';
@@ -12,7 +17,7 @@ import { defineSelect } from './select.js';
 import { defineStatusBar, defineStatusItem } from './status-bar.js';
 import { defineTabStrip } from './tab-strip.js';
 import { defineZoomSlider } from './zoom-slider.js';
-export { defineAccount, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, };
+export { defineAccount, 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 type { OfficeCommandEvent } from './button.js';
 export type { OfficeDialogCloseEvent, OfficeDialogCloseReason } from './dialog.js';
 export type { OfficeSelectOption } from './select.js';
@@ -20,9 +25,14 @@ export type { OfficeStatusActivateEvent } from './status-bar.js';
 export type { OfficeTab, OfficeTabSelectEvent } from './tab-strip.js';
 export type { OfficeSearchCommand } from './command-search.js';
 export { attachKeyTips, type KeyTipsHandle } from './keytips.js';
+export type { OfficeBackstageCloseEvent, OfficeBackstageItem, OfficeBackstageSelectEvent, } from './backstage.js';
+export type { OfficeFindInputEvent, OfficeFindStepEvent } from './find-bar.js';
+export type { OfficePrintPreviewPageEvent } from './print-preview.js';
+export type { OfficeRibbonSelectEvent } from './ribbon-tabs.js';
+export { rulerDivisions } from './ruler.js';
 export { clearOfficeProfile, DEFAULT_OFFICE_PROFILE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, profileInitials, readOfficeProfile, sanitizeOfficeProfile, writeOfficeProfile, type OfficeProfile, type OfficeProfileChangeEvent, } from './account.js';
 export { clampOptionNumber, type OfficeOptionCategory, type OfficeOptionChoice, type OfficeOptionControl, type OfficeOptionSection, type OfficeOptionsChangeEvent, type OfficeOptionValue, type OfficeOptionValues, } from './options.js';
 /** Every control of this entry. */
-export declare const CONTROL_DEFINERS: readonly [import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, 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];
 /** Idempotent, SSR-safe (no-op without a DOM). */
 export declare function registerControls(registry?: CustomElementRegistry): void;

package/dist/controls.js

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

package/dist/find-bar.d.ts

@@ -0,0 +1,15 @@
+export type OfficeFindInputEvent = CustomEvent<{
+    query: string;
+}>;
+export type OfficeFindStepEvent = CustomEvent<{
+    direction: 'next' | 'previous';
+}>;
+/**
+ * `<office-ui-find-bar>`: Office's on-demand Find bar under the ribbon. Shown while `open`;
+ * `show()` opens it and selects the query. Enter steps to the next result, Shift+Enter to the
+ * previous; Escape clears a query, or closes the bar when it is already empty. Attributes:
+ * `open`, `label`, `input-label`, `placeholder`, `maxlength`, `disabled`, `navigation-disabled`,
+ * `previous-label`, `next-label`, `close-label`. Properties: `value`, `status`, `statusTitle`.
+ * Events: `office-find-input` `{ query }`, `office-find-step` `{ direction }`, `office-find-close`.
+ */
+export declare const defineFindBar: import("./registry.js").Definer;

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-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-presence", "office-ui-smartart"];
 /**
  * Install the theme tokens and define every element. Idempotent and safe to call from every
  * viewer binding; a no-op where there is no DOM (SSR).

package/dist/index.js

@@ -1,7 +1,7 @@
 import { installOfficeUiTheme } from './chunk-H4KFVIGT.js';
 export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-H4KFVIGT.js';
-import { registerControls } from './chunk-TMSFX6TC.js';
-export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, attachKeyTips, clampOptionNumber, clearOfficeProfile, defineAccount, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, profileInitials, readOfficeProfile, registerControls, sanitizeOfficeProfile, writeOfficeProfile } from './chunk-TMSFX6TC.js';
+import { registerControls } from './chunk-5YR7YA57.js';
+export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, attachKeyTips, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePrintPreview, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRuler, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, writeOfficeProfile } from './chunk-5YR7YA57.js';
 export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-PCSUQPMC.js';
 import { definePresence } from './chunk-RLPL7Q6J.js';
 export { definePresence, initialsOf, participantsFromAwareness } from './chunk-RLPL7Q6J.js';
@@ -31,6 +31,11 @@ var OFFICE_UI_TAGS = [
   "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-presence",
   "office-ui-smartart"
 ];

package/dist/print-preview.d.ts

@@ -0,0 +1,11 @@
+export type OfficePrintPreviewPageEvent = CustomEvent<{
+    index: number;
+}>;
+/**
+ * `<office-ui-print-preview>`: the Print page's paper preview with page navigation. Set `pages`
+ * to rendered nodes (for example the SVG of each page); the element shows a deep clone of the
+ * current one with `tabindex` and inline `style` removed, so the preview is inert and never
+ * parses markup. `index` selects the page; the arrows emit `office-print-preview-page`.
+ * Attributes: `label` (default "Print preview"), `empty-label`.
+ */
+export declare const definePrintPreview: import("./registry.js").Definer;

package/dist/ribbon-tabs.d.ts

@@ -0,0 +1,14 @@
+/** Emitted when the user picks a tab; cancelable (`preventDefault()` keeps the current tab). */
+export type OfficeRibbonSelectEvent = CustomEvent<{
+    tab: string;
+}>;
+/**
+ * `<office-ui-ribbon>`: the Office tab row (Quick Access Toolbar, File, tabs, search) over the
+ * tab panels. Panels are light-DOM children carrying `data-ribbon-tab` (id), `data-label` and
+ * optionally `data-tab-keytip`; the element builds the tabs from them, keeps exactly one panel
+ * visible and moves between tabs with the arrow keys, Home and End. Slots: `quick-access`,
+ * `search`, `end`. Attributes: `selected`, `label` (tab list name), `file-label` (default "File"),
+ * `no-file`, `file-expanded`, `file-keytip`. Events: `office-ribbon-select` `{ tab }`
+ * (cancelable) and `office-ribbon-file` when File is activated.
+ */
+export declare const defineRibbon: import("./registry.js").Definer;

package/dist/ruler.d.ts

@@ -0,0 +1,10 @@
+/** Tick subdivisions per unit for a given unit length in CSS pixels, finer as it grows. */
+export declare function rulerDivisions(unitPixels: number): number;
+/**
+ * `<office-ui-ruler>`: a decorative Office ruler (inches by default). The product positions it
+ * and says where zero is: `origin` is the CSS-pixel offset of zero from the ruler's start edge,
+ * `scale` the CSS pixels per unit (96 at 100% for inches). `orientation="vertical"` draws a
+ * side ruler; `direction="reverse"` makes values grow toward the start edge, as Visio's
+ * vertical ruler grows upward from the page bottom. Hidden from assistive technology.
+ */
+export declare const defineRuler: import("./registry.js").Definer;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ooxml-ui",
-	"version": "0.9.0",
+	"version": "0.10.0",
 	"description": "Shared, format-neutral web components and styles for the Office viewers (Word, PowerPoint, Excel)",
 	"keywords": [
 		"custom-elements",
@@ -70,7 +70,7 @@
 		"test:package": "node scripts/package-smoke.mjs"
 	},
 	"dependencies": {
-		"ooxml-core": "^0.13.0"
+		"ooxml-core": "^0.14.1"
 	},
 	"devDependencies": {
 		"@types/jsdom": "^21.1.7",