ooxml-ui 0.10.2 → 0.12.0

package/dist/{chunk-X5C3BTJS.js → chunk-BN3UBHTC.js}

@@ -1,9 +1,878 @@
-import { createIconSvg, paintIcon, defineIcon } from './chunk-PCSUQPMC.js';
+import { createIconSvg, paintIcon, defineIcon } from './chunk-YZ2JQNHX.js';
 import { initialsOf } from './chunk-RLPL7Q6J.js';
 import { definer, attachStyles, controlCss, emit } from './chunk-EY266IK3.js';
 
-// src/backstage.ts
+// src/chrome-controls.ts
+var ICON = `svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.45;
+	stroke-linecap: round; stroke-linejoin: round; }`;
+function icon(doc, name) {
+  const svg = createIconSvg(doc);
+  paintIcon(svg, name);
+  return svg;
+}
+function emit2(host, type, detail) {
+  host.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));
+}
+var config = (el) => el.constructor;
+var FOOTER_CSS = `
+:host { display: block; flex: 1 1 auto; min-width: 0; }
+:host([hidden]) { display: none !important; }
+${ICON}
+.footer { box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
+button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+	min-width: 24px; min-height: 32px; padding: 6px 14px; border: 1px solid var(--office-border, #d1d5db);
+	border-radius: 6px; background: var(--office-surface, #f3f4f6); color: var(--office-foreground, #1f2937);
+	font: 500 13px/1.2 var(--office-font, system-ui, sans-serif); cursor: pointer; touch-action: manipulation; }
+button:hover:not(:disabled) { background: var(--office-selected, #e5e7eb); }
+button.primary { border-color: var(--office-accent, #2563eb); background: var(--office-accent, #2563eb);
+	color: var(--office-accent-foreground, #fff); }
+button.primary:hover:not(:disabled) { opacity: .9; background: var(--office-accent, #2563eb); }
+button.warning { border-color: #d97706; background: #d97706; color: #fff; }
+button.warning:hover:not(:disabled) { opacity: .9; background: #d97706; }
+button.danger { border-color: var(--office-danger, #b91c1c); background: var(--office-danger, #b91c1c); color: #fff; }
+button.danger:hover:not(:disabled) { opacity: .9; background: var(--office-danger, #b91c1c); }
+button.start { margin-right: auto; }
+button.busy::before { content: ''; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent;
+	border-radius: 50%; animation: office-footer-spin .8s linear infinite; }
+@keyframes office-footer-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { button.busy::before { animation: none; } }
+button:disabled { cursor: not-allowed; opacity: .55; }
+button:focus-visible { outline: 2px solid var(--office-ring, #2563eb); outline-offset: 2px; }
+@media (pointer: coarse), (max-width: 767px) { button { min-width: 44px; min-height: 44px; } }
+@media (forced-colors: active) {
+	button, button.primary, button.warning, button.danger { border-color: ButtonText; background: ButtonFace; color: ButtonText; }
+	button:hover:not(:disabled) { background: Highlight; color: HighlightText; }
+	button.primary { border-width: 2px; }
+	button:focus-visible { outline-color: Highlight; }
+}
+`;
+var defineDialogFooter = definer("office-ui-dialog-footer", () => {
+  class OfficeUiDialogFooter extends HTMLElement {
+    static requestEvent = "office-dialog-footer-request";
+    static testIdPrefix = "office-dialog-footer";
+    model = { actions: [] };
+    row = this.ownerDocument.createElement("div");
+    buttons = /* @__PURE__ */ new Map();
+    constructor() {
+      super();
+      const root = this.attachShadow({ mode: "open" });
+      attachStyles(root, controlCss(FOOTER_CSS));
+      this.row.className = "footer";
+      this.row.setAttribute("part", "footer");
+      root.append(this.row);
+    }
+    get state() {
+      return this.model;
+    }
+    set state(value) {
+      this.model = value;
+      this.render();
+    }
+    connectedCallback() {
+      this.render();
+    }
+    /** Move keyboard focus to an action, for example the primary one when a dialog opens. */
+    focusAction(id) {
+      this.render();
+      this.buttons.get(id)?.focus();
+    }
+    button(id) {
+      let button = this.buttons.get(id);
+      if (!button) {
+        button = this.ownerDocument.createElement("button");
+        button.type = "button";
+        button.dataset.action = id;
+        button.addEventListener("click", () => emit2(this, config(this).requestEvent, { id }));
+        this.buttons.set(id, button);
+      }
+      return button;
+    }
+    patch(button, action) {
+      button.className = action.variant === "secondary" ? "" : action.variant ?? "";
+      button.disabled = action.disabled === true || action.busy === true;
+      if (action.title) button.title = action.title;
+      else button.removeAttribute("title");
+      button.classList.toggle("start", action.align === "start");
+      button.classList.toggle("busy", action.busy === true);
+      if (action.busy) button.setAttribute("aria-busy", "true");
+      else button.removeAttribute("aria-busy");
+      if (action.testId) button.dataset.testid = action.testId;
+      else delete button.dataset.testid;
+      const glyph = action.icon ?? "";
+      if (button.dataset.icon !== glyph || button.dataset.label !== action.label) {
+        button.dataset.icon = glyph;
+        button.dataset.label = action.label;
+        button.replaceChildren(
+          ...glyph ? [icon(this.ownerDocument, glyph)] : [],
+          this.ownerDocument.createTextNode(action.label)
+        );
+      }
+    }
+    render() {
+      const wanted = this.model.actions.map((action) => {
+        const button = this.button(action.id);
+        this.patch(button, action);
+        return button;
+      });
+      for (const [id, button] of this.buttons)
+        if (!wanted.includes(button)) {
+          button.remove();
+          this.buttons.delete(id);
+        }
+      wanted.forEach((button, index) => {
+        const at = this.row.children[index];
+        if (at !== button) this.row.insertBefore(button, at ?? null);
+      });
+    }
+  }
+  return OfficeUiDialogFooter;
+});
+var OFFICE_TOAST_VISIBLE_LIMIT = 5;
+var TOASTS_CSS = `
+:host { box-sizing: border-box; display: flex; flex-direction: column; overflow-y: auto; max-height: 70%; pointer-events: none; }
+:host([hidden]) { display: none !important; }
+[hidden] { display: none !important; }
+${ICON}
+.header, .toast, .overflow { pointer-events: auto; }
+.header { display: flex; align-items: center; justify-content: space-between; padding: 0 4px;
+	color: var(--office-muted-foreground, #6b7280); font: 600 11px/1.4 var(--office-font, system-ui, sans-serif); }
+.toast { box-sizing: border-box; display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; margin-top: 8px;
+	border: 1px solid var(--office-border, #d1d5db); border-radius: 6px; background: var(--office-popover, var(--office-background, #fff));
+	color: var(--office-foreground, #1f2937); box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
+	font: 12px/1.4 var(--office-font, system-ui, sans-serif); }
+.toast svg { width: 16px; height: 16px; margin-top: 1px; }
+.toast[data-severity="warning"] svg { color: #f59e0b; }
+.toast[data-severity="info"] svg { color: #3b82f6; }
+.message { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; }
+.overflow { margin: 8px 0 0; text-align: center; color: var(--office-muted-foreground, #6b7280); font: 11px var(--office-font, system-ui, sans-serif); }
+button { box-sizing: border-box; flex: none; display: inline-flex; align-items: center; justify-content: center;
+	min-width: 24px; min-height: 24px; padding: 2px 4px; border: 0; border-radius: 4px; background: transparent;
+	color: var(--office-muted-foreground, #6b7280); font: inherit; cursor: pointer; touch-action: manipulation; }
+button:hover { background: var(--office-surface, #f3f4f6); color: var(--office-foreground, #1f2937); }
+.dismiss-all { font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
+button:focus-visible { outline: 2px solid var(--office-ring, #2563eb); outline-offset: 1px; }
+@media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
+@media (forced-colors: active) {
+	.toast { border-color: CanvasText; background: Canvas; color: CanvasText; }
+	.toast svg, button { color: ButtonText; } button:hover { background: Highlight; color: HighlightText; }
+	button:focus-visible { outline-color: Highlight; }
+}
+`;
+var defineToasts = definer("office-ui-toasts", () => {
+  class OfficeUiToasts extends HTMLElement {
+    static requestEvent = "office-toasts-request";
+    static testIdPrefix = "office-toast";
+    model = { toasts: [] };
+    signature = "";
+    stack = this.ownerDocument.createElement("div");
+    constructor() {
+      super();
+      const root = this.attachShadow({ mode: "open" });
+      attachStyles(root, controlCss(TOASTS_CSS));
+      root.append(this.stack);
+    }
+    get state() {
+      return this.model;
+    }
+    set state(value) {
+      this.model = value;
+      this.render();
+    }
+    connectedCallback() {
+      this.render();
+    }
+    render() {
+      const s = this.model;
+      const { requestEvent, testIdPrefix: p } = config(this);
+      this.dataset.testid = `${p}s`;
+      this.hidden = s.toasts.length === 0;
+      const visible2 = s.toasts.slice(0, OFFICE_TOAST_VISIBLE_LIMIT);
+      const hiddenCount = (s.overflowCount ?? 0) + s.toasts.length - visible2.length;
+      const labels = [
+        s.labels?.title ?? "Compatibility",
+        s.labels?.dismissAll ?? "Dismiss all",
+        s.labels?.dismiss ?? "Dismiss"
+      ];
+      const signature = JSON.stringify([
+        labels,
+        hiddenCount,
+        visible2.map((toast) => [toast.id, toast.code, toast.severity, toast.message])
+      ]);
+      if (signature === this.signature) return;
+      this.signature = signature;
+      const doc = this.ownerDocument;
+      const header = doc.createElement("div");
+      header.className = "header";
+      const heading = doc.createElement("span");
+      heading.textContent = labels[0];
+      const dismissAll = doc.createElement("button");
+      dismissAll.type = "button";
+      dismissAll.className = "dismiss-all";
+      dismissAll.dataset.testid = `${p}s-dismiss-all`;
+      dismissAll.textContent = labels[1];
+      dismissAll.addEventListener("click", () => emit2(this, requestEvent, { id: "dismissAll" }));
+      header.append(heading, dismissAll);
+      const rows = [header];
+      for (const toast of visible2) {
+        const item = doc.createElement("div");
+        item.className = "toast";
+        item.dataset.testid = p;
+        if (toast.code) item.dataset.code = toast.code;
+        item.dataset.severity = toast.severity;
+        item.setAttribute("role", "status");
+        const message = doc.createElement("p");
+        message.className = "message";
+        message.textContent = toast.message;
+        const dismiss = doc.createElement("button");
+        dismiss.type = "button";
+        dismiss.dataset.testid = `${p}-dismiss`;
+        dismiss.setAttribute("aria-label", labels[2]);
+        dismiss.append(icon(doc, "close"));
+        dismiss.addEventListener(
+          "click",
+          () => emit2(this, requestEvent, { id: "dismiss", toastId: toast.id })
+        );
+        item.append(icon(doc, toast.severity === "warning" ? "warning" : "info"), message, dismiss);
+        rows.push(item);
+      }
+      if (hiddenCount > 0) {
+        const overflow = doc.createElement("p");
+        overflow.className = "overflow";
+        overflow.textContent = `+${hiddenCount}`;
+        rows.push(overflow);
+      }
+      this.stack.replaceChildren(...rows);
+    }
+  }
+  return OfficeUiToasts;
+});
+
+// src/document-notices.ts
+var config2 = (el) => el.constructor;
+var emit3 = (host, type, detail) => host.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));
+var BANNER_CSS = `
+:host { display: block; flex: none; }
+:host([hidden]) { display: none !important; }
+[hidden] { display: none !important; }
+svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.45;
+	stroke-linecap: round; stroke-linejoin: round; color: #d97706; }
+.banner { box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 6px 16px;
+	border-bottom: 1px solid rgba(180, 83, 9, .3); background: var(--office-notice-background, #fef3c7);
+	color: var(--office-notice-foreground, #78350f); font: 12px/1.4 var(--office-font, system-ui, sans-serif); }
+.text { flex: 1 1 auto; min-width: 0; margin: 0; }
+.form { display: flex; flex: none; align-items: center; gap: 8px; }
+.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
+	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+button, input { font: inherit; }
+button { box-sizing: border-box; flex: none; min-height: 24px; padding: 4px 12px; border: 1px solid transparent;
+	border-radius: 4px; background: transparent; color: inherit; font-weight: 500; cursor: pointer; touch-action: manipulation; }
+button.primary { border-color: rgba(217, 119, 6, .5); }
+button:hover { background: rgba(180, 83, 9, .15); }
+button:disabled { opacity: .6; cursor: not-allowed; }
+button:focus-visible, input:focus-visible { outline: 2px solid var(--office-ring, #2563eb); outline-offset: 1px; }
+input { box-sizing: border-box; min-height: 24px; padding: 4px 8px; border: 1px solid rgba(217, 119, 6, .4);
+	border-radius: 4px; background: var(--office-background, #fff); color: var(--office-foreground, #1f2937); }
+.error { flex: none; color: var(--office-danger, #b91c1c); }
+@media (pointer: coarse) { button, input { min-height: 44px; min-width: 44px; } }
+@media (forced-colors: active) {
+	.banner { border-bottom-color: CanvasText; background: Canvas; color: CanvasText; }
+	svg, .error { color: CanvasText; }
+	button, input { border-color: ButtonText; color: ButtonText; background: ButtonFace; }
+	button:focus-visible, input:focus-visible { outline-color: Highlight; }
+}
+`;
+var defineReadOnlyBanner = definer("office-ui-read-only-banner", () => {
+  class OfficeUiReadOnlyBanner extends HTMLElement {
+    static requestEvent = "office-read-only-request";
+    static testIdPrefix = "office-readonly";
+    model = { kind: null, message: "" };
+    promptWasOpen = false;
+    pendingFocus = false;
+    parts = this.build();
+    constructor() {
+      super();
+      const root = this.attachShadow({ mode: "open" });
+      attachStyles(root, controlCss(BANNER_CSS));
+      root.append(this.parts.banner);
+    }
+    get state() {
+      return this.model;
+    }
+    set state(value) {
+      this.model = value;
+      this.render();
+    }
+    connectedCallback() {
+      this.render();
+      if (this.pendingFocus) {
+        this.pendingFocus = false;
+        this.parts.input.focus();
+      }
+    }
+    build() {
+      const doc = this.ownerDocument;
+      const p = config2(this).testIdPrefix;
+      const el = (tag, className = "") => {
+        const node = doc.createElement(tag);
+        node.className = className;
+        return node;
+      };
+      const send = (intent) => emit3(this, config2(this).requestEvent, intent);
+      const button = (testId, className, intent) => {
+        const node = el("button", className);
+        node.type = "button";
+        node.dataset.testid = `${p}-${testId}`;
+        node.addEventListener("click", () => send(intent));
+        return node;
+      };
+      const banner = el("div", "banner");
+      banner.setAttribute("role", "status");
+      banner.setAttribute("part", "banner");
+      const title = el("strong");
+      const message = el("span");
+      const text2 = el("p", "text");
+      text2.append(title, ": ", message);
+      const editAnyway = button("edit-anyway", "primary", { id: "editAnyway" });
+      const dismiss = button("dismiss", "", { id: "dismiss" });
+      const form = el("form", "form");
+      form.dataset.testid = `${p}-password-form`;
+      const label = el("label", "sr-only");
+      const input = el("input");
+      input.id = "password";
+      input.type = "password";
+      input.dataset.testid = `${p}-password-input`;
+      label.htmlFor = input.id;
+      const unlock = el("button", "primary");
+      unlock.type = "submit";
+      unlock.dataset.testid = `${p}-unlock`;
+      const cancel = button("password-cancel", "", { id: "cancelPassword" });
+      const error = el("span", "error");
+      error.id = "error";
+      error.setAttribute("role", "alert");
+      error.dataset.testid = `${p}-password-error`;
+      form.addEventListener("submit", (event) => {
+        event.preventDefault();
+        send({ id: "submitPassword", password: input.value });
+      });
+      form.append(label, input, unlock, cancel, error);
+      const lock = createIconSvg(doc);
+      paintIcon(lock, "lock");
+      banner.append(lock, text2, editAnyway, dismiss, form);
+      return {
+        banner,
+        title,
+        message,
+        editAnyway,
+        dismiss,
+        form,
+        label,
+        input,
+        unlock,
+        cancel,
+        error
+      };
+    }
+    render() {
+      const s = this.model;
+      const l = s.labels ?? {};
+      const p = this.parts;
+      this.dataset.testid = `${config2(this).testIdPrefix}-banner`;
+      if (s.kind) this.dataset.kind = s.kind;
+      else delete this.dataset.kind;
+      p.title.textContent = l.title ?? "Read-only recommended";
+      p.message.textContent = s.message;
+      p.editAnyway.textContent = l.editAnyway ?? "Edit anyway";
+      p.dismiss.textContent = l.dismiss ?? "Dismiss";
+      const open = s.passwordPromptOpen === true;
+      p.editAnyway.hidden = p.dismiss.hidden = open;
+      p.form.hidden = !open;
+      p.label.textContent = l.passwordLabel ?? "Password";
+      p.input.placeholder = l.passwordPlaceholder ?? "Password";
+      p.unlock.textContent = l.unlock ?? "Unlock";
+      p.cancel.textContent = l.cancel ?? "Cancel";
+      p.input.disabled = p.unlock.disabled = s.checkingPassword === true;
+      const failed = s.passwordError ?? null;
+      p.input.setAttribute("aria-invalid", String(failed !== null));
+      if (failed) p.input.setAttribute("aria-describedby", p.error.id);
+      else p.input.removeAttribute("aria-describedby");
+      p.error.hidden = failed === null;
+      p.error.textContent = failed ?? "";
+      if (open && !this.promptWasOpen) {
+        if (this.isConnected) p.input.focus();
+        else this.pendingFocus = true;
+      } else if (!open && this.promptWasOpen) p.input.value = "";
+      this.promptWasOpen = open;
+    }
+  }
+  return OfficeUiReadOnlyBanner;
+});
+var PASTE_CSS = `
+:host { position: fixed; z-index: 1100; display: block; }
+:host([hidden]) { display: none !important; }
+.toolbar { box-sizing: border-box; display: flex; align-items: center; gap: 2px; padding: 4px;
+	border: 1px solid var(--office-border, #d1d5db); border-radius: 4px; background: var(--office-popover, var(--office-background, #fff));
+	box-shadow: 0 10px 25px rgba(0, 0, 0, .2); font: 11px/1.2 var(--office-font, system-ui, sans-serif); }
+button { box-sizing: border-box; min-height: 24px; padding: 4px 8px; border: 0; border-radius: 4px; background: transparent;
+	color: var(--office-foreground, #1f2937); font: inherit; white-space: nowrap; cursor: pointer; touch-action: manipulation; }
+button:hover { background: var(--office-surface, #f3f4f6); }
+button:focus-visible { outline: 2px solid var(--office-ring, #2563eb); outline-offset: 1px; }
+@media (pointer: coarse) { button { min-height: 44px; min-width: 44px; } }
+@media (forced-colors: active) {
+	.toolbar { border-color: CanvasText; background: Canvas; }
+	button { color: ButtonText; } button:hover { background: Highlight; color: HighlightText; }
+	button:focus-visible { outline-color: Highlight; }
+}
+`;
+var definePasteOptions = definer("office-ui-paste-options", () => {
+  class OfficeUiPasteOptions extends HTMLElement {
+    static requestEvent = "office-paste-options-request";
+    static dismissEvent = "office-paste-options-dismiss";
+    static testIdPrefix = "office-paste-options";
+    model = { left: 0, top: 0, options: [] };
+    toolbar = this.ownerDocument.createElement("div");
+    disarm;
+    constructor() {
+      super();
+      const root = this.attachShadow({ mode: "open" });
+      attachStyles(root, controlCss(PASTE_CSS));
+      this.toolbar.className = "toolbar";
+      this.toolbar.setAttribute("role", "toolbar");
+      this.toolbar.tabIndex = -1;
+      this.toolbar.addEventListener("mousedown", (event) => event.stopPropagation());
+      root.append(this.toolbar);
+    }
+    get state() {
+      return this.model;
+    }
+    set state(value) {
+      this.model = value;
+      this.render();
+    }
+    connectedCallback() {
+      this.render();
+      const view = this.ownerDocument.defaultView;
+      if (!view) return;
+      const dismiss = (event) => {
+        if (event.composedPath().includes(this.toolbar) && (!(event instanceof KeyboardEvent) || event.key !== "Escape"))
+          return;
+        emit3(this, config2(this).dismissEvent);
+      };
+      const timer = view.setTimeout(() => {
+        view.addEventListener("pointerdown", dismiss, true);
+        view.addEventListener("keydown", dismiss, true);
+      }, 0);
+      this.disarm = () => {
+        view.clearTimeout(timer);
+        view.removeEventListener("pointerdown", dismiss, true);
+        view.removeEventListener("keydown", dismiss, true);
+      };
+    }
+    disconnectedCallback() {
+      this.disarm?.();
+      this.disarm = void 0;
+    }
+    render() {
+      const s = this.model;
+      this.toolbar.setAttribute("aria-label", s.label ?? "Paste Options");
+      this.style.left = `${s.left + 4}px`;
+      this.style.top = `${s.top + 4}px`;
+      const doc = this.ownerDocument;
+      const existing = [...this.toolbar.querySelectorAll("button")];
+      const same = existing.length === s.options.length && existing.every((button, i) => button.dataset.format === s.options[i].id);
+      if (!same)
+        this.toolbar.replaceChildren(
+          ...s.options.map((option) => {
+            const button = doc.createElement("button");
+            button.type = "button";
+            button.dataset.format = option.id;
+            button.addEventListener("click", () => {
+              emit3(this, config2(this).requestEvent, { format: option.id });
+              emit3(this, config2(this).dismissEvent);
+            });
+            return button;
+          })
+        );
+      this.toolbar.querySelectorAll("button").forEach((button, i) => {
+        const label = s.options[i].label;
+        button.textContent = label;
+        button.title = label;
+      });
+    }
+  }
+  return OfficeUiPasteOptions;
+});
+
+// src/radio.ts
 var CSS = `
+:host { display: inline-grid; box-sizing: border-box; width: var(--office-checkbox-size, 16px);
+	height: var(--office-checkbox-size, 16px); flex: none; place-items: center;
+	border: 1px solid var(--office-checkbox-border, var(--office-border, #d1d5db)); border-radius: 50%;
+	background: var(--office-checkbox-background, var(--office-background, #fff)); cursor: pointer; vertical-align: middle; }
+:host([checked]) { border-color: var(--office-checkbox-accent, var(--office-accent, #2563eb)); }
+:host(:focus-visible) { outline: 2px solid var(--office-ring, #2563eb); outline-offset: 2px; }
+:host([disabled]) { opacity: .5; cursor: not-allowed; }
+.dot { display: none; width: var(--office-radio-dot-size, 8px); height: var(--office-radio-dot-size, 8px);
+	border-radius: 50%; background: var(--office-checkbox-accent, var(--office-accent, #2563eb)); }
+:host([checked]) .dot { display: block; }
+@media (pointer: coarse), (max-width: 767px) {
+	:host { width: var(--office-checkbox-size-touch, 22px); height: var(--office-checkbox-size-touch, 22px); }
+	.dot { width: var(--office-radio-dot-size-touch, 12px); height: var(--office-radio-dot-size-touch, 12px); }
+}
+@media (forced-colors: active) {
+	:host { border-color: CanvasText; background: Canvas; forced-color-adjust: auto; }
+	:host([checked]) { border-color: Highlight; }
+	.dot { background: Highlight; }
+	:host([disabled]) { border-color: GrayText; }
+	:host([disabled]) .dot { background: GrayText; }
+	:host(:focus-visible) { outline-color: Highlight; }
+}
+`;
+function groupOf(radio, scope) {
+  const name = radio.name;
+  if (!name || !scope) return [radio];
+  return [...scope.querySelectorAll(radio.localName)].filter(
+    (other) => other.name === name && other.form === radio.form
+  );
+}
+function labelText(label, self) {
+  let text2 = "";
+  for (const node of label.childNodes) {
+    if (node === self) continue;
+    if (node.nodeType === 3) text2 += node.textContent ?? "";
+    else if (node instanceof Element && !node.localName.includes("-") && !/^(select|input|textarea)$/u.test(node.localName))
+      text2 += labelText(node, self);
+  }
+  return text2;
+}
+function refreshTabStops(group) {
+  const enabled = group.filter((item) => !item.disabled);
+  const stop = enabled.find((item) => item.checked) ?? enabled[0];
+  for (const item of group) item.tabIndex = item === stop ? 0 : -1;
+}
+var defineRadio = definer("office-ui-radio", () => {
+  class OfficeUiRadio extends HTMLElement {
+    static formAssociated = true;
+    static observedAttributes = ["checked", "disabled", "value", "name"];
+    internals;
+    defaultChecked = false;
+    scope = null;
+    autoNamed = false;
+    constructor() {
+      super();
+      try {
+        this.internals = this.attachInternals();
+      } catch {
+        this.internals = void 0;
+      }
+      const root = this.attachShadow({ mode: "open" });
+      attachStyles(root, controlCss(CSS));
+      const dot = this.ownerDocument.createElement("span");
+      dot.className = "dot";
+      root.append(dot);
+      this.addEventListener("click", (event) => {
+        if (this.disabled) {
+          event.preventDefault();
+          return;
+        }
+        this.select(true);
+      });
+      this.addEventListener("keydown", (event) => this.onKey(event));
+      this.addEventListener("focus", () => this.syncName());
+    }
+    connectedCallback() {
+      this.defaultChecked = this.checked;
+      const root = this.getRootNode();
+      this.scope = root instanceof Document || root instanceof ShadowRoot ? root : null;
+      this.sync();
+      this.syncName();
+    }
+    disconnectedCallback() {
+      if (this.scope)
+        refreshTabStops(groupOf(this, this.scope).filter((item) => item !== this));
+    }
+    /**
+     * A custom element is not named by a wrapping `<label>` in every browser's accessibility
+     * tree, so mirror the label text into `aria-label` unless the host named it.
+     */
+    syncName() {
+      if (this.hasAttribute("aria-labelledby")) return;
+      if (this.hasAttribute("aria-label") && !this.autoNamed) return;
+      const label = this.closest("label") ?? this.internals?.labels?.[0];
+      const text2 = label ? labelText(label, this).replace(/\s+/gu, " ").trim() : "";
+      if (text2) {
+        this.autoNamed = true;
+        this.setAttribute("aria-label", text2);
+      }
+    }
+    attributeChangedCallback(name) {
+      if (name === "checked" && this.checked) this.uncheckPeers();
+      this.sync();
+    }
+    get checked() {
+      return this.hasAttribute("checked");
+    }
+    set checked(next) {
+      this.toggleAttribute("checked", Boolean(next));
+    }
+    get disabled() {
+      return this.hasAttribute("disabled");
+    }
+    set disabled(next) {
+      this.toggleAttribute("disabled", Boolean(next));
+    }
+    get value() {
+      return this.getAttribute("value") ?? "on";
+    }
+    set value(next) {
+      this.setAttribute("value", String(next));
+    }
+    get name() {
+      return this.getAttribute("name") ?? "";
+    }
+    set name(next) {
+      this.setAttribute("name", String(next));
+    }
+    get form() {
+      return this.internals?.form ?? null;
+    }
+    formResetCallback() {
+      this.checked = this.defaultChecked;
+    }
+    formDisabledCallback(disabled) {
+      this.disabled = disabled;
+    }
+    /** Check this radio and, for user intent, announce it. No-op when already checked. */
+    select(emit4) {
+      if (this.checked) return;
+      this.checked = true;
+      if (emit4) {
+        this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+      }
+    }
+    peers() {
+      return groupOf(this, this.scope ?? this.getRootNode());
+    }
+    uncheckPeers() {
+      for (const peer of this.peers()) if (peer !== this && peer.checked) peer.checked = false;
+    }
+    onKey(event) {
+      if (this.disabled || event.ctrlKey || event.metaKey || event.altKey) return;
+      if (event.key === " ") {
+        event.preventDefault();
+        this.select(true);
+        return;
+      }
+      const list = this.peers().filter((item) => !item.disabled);
+      const index = list.indexOf(this);
+      const last = list.length - 1;
+      const next = event.key === "ArrowRight" || event.key === "ArrowDown" ? (index + 1) % list.length : event.key === "ArrowLeft" || event.key === "ArrowUp" ? (index + last) % list.length : event.key === "Home" ? 0 : event.key === "End" ? last : -1;
+      if (next < 0 || index < 0) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const target = list[next];
+      target.select(true);
+      target.focus();
+    }
+    sync() {
+      this.setAttribute("role", "radio");
+      this.setAttribute("aria-checked", String(this.checked));
+      this.setAttribute("aria-disabled", String(this.disabled));
+      this.internals?.setFormValue?.(this.checked && !this.disabled ? this.value : null);
+      if (this.isConnected) {
+        this.scope = this.getRootNode();
+        refreshTabStops(this.peers());
+      } else this.tabIndex = this.disabled ? -1 : 0;
+    }
+  }
+  return OfficeUiRadio;
+});
+
+// src/ribbon-toggle.ts
+var CSS2 = `
+:host { display: block; }
+label { display: flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 4px;
+	color: var(--office-foreground, #1f2937); font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; }
+:host([disabled]) label { color: var(--office-muted-foreground, #6b7280); cursor: not-allowed; }
+@media (pointer: coarse), (max-width: 767px) { label { min-height: 44px; font-size: 12px; } }
+`;
+var defineRibbonToggle = definer("office-ui-ribbon-toggle", () => {
+  class OfficeUiRibbonToggle extends HTMLElement {
+    static requestEvent = "office-toggle";
+    static idAttribute = "command";
+    static detailKey = "command";
+    static get observedAttributes() {
+      return ["label", "checked", "disabled", "title"];
+    }
+    checkbox;
+    text;
+    constructor() {
+      super();
+      const doc = this.ownerDocument;
+      const root = this.attachShadow({ mode: "open" });
+      attachStyles(root, controlCss(CSS2));
+      const label = doc.createElement("label");
+      this.checkbox = doc.createElement("office-ui-checkbox");
+      this.text = doc.createTextNode("");
+      label.append(this.checkbox, this.text);
+      label.addEventListener("click", (event) => {
+        event.preventDefault();
+        if (event.target !== this.checkbox) this.checkbox.click();
+      });
+      this.checkbox.addEventListener("input", (event) => event.stopPropagation());
+      this.checkbox.addEventListener("change", (event) => {
+        event.stopPropagation();
+        const checked = this.checkbox.checked;
+        this.sync();
+        const { requestEvent, idAttribute, detailKey } = this.constructor;
+        const id = this.getAttribute(idAttribute);
+        if (!this.hasAttribute("disabled") && id)
+          this.dispatchEvent(
+            new CustomEvent(requestEvent, {
+              detail: { [detailKey]: id, checked },
+              bubbles: true,
+              composed: true
+            })
+          );
+      });
+      root.append(label);
+    }
+    connectedCallback() {
+      this.sync();
+    }
+    attributeChangedCallback() {
+      this.sync();
+    }
+    get checked() {
+      return this.hasAttribute("checked");
+    }
+    set checked(value) {
+      this.toggleAttribute("checked", Boolean(value));
+    }
+    sync() {
+      const label = this.getAttribute("label") ?? "";
+      this.text.textContent = label;
+      this.checkbox.setAttribute("aria-label", label);
+      this.checkbox.title = this.getAttribute("title") ?? label;
+      this.checkbox.checked = this.hasAttribute("checked");
+      this.checkbox.disabled = this.hasAttribute("disabled");
+    }
+  }
+  return OfficeUiRibbonToggle;
+});
+
+// src/search-field.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var CSS3 = `
+:host { display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: 100%;
+	height: var(--office-field-height-lg, 40px); padding: 0 12px;
+	border: 1px solid var(--office-field-border, var(--office-border, #d1d5db));
+	border-radius: var(--office-field-radius, 5px); background: var(--office-field-background, var(--office-background, #fff));
+	color: var(--office-field-placeholder, var(--office-muted-foreground, #6b7280)); font: inherit; }
+:host(:focus-within) { border-color: var(--office-field-border-focus, var(--office-ring, #2563eb)); }
+:host([variant="titlebar"]) { height: var(--office-field-height, 28px); gap: 7px; padding-inline: 14px;
+	border-color: var(--office-border, #d1d5db); border-radius: 6px; background: var(--office-background, #fff); }
+:host([variant="titlebar"]:focus-within) { color: var(--office-foreground, #1f2937); }
+:host([disabled]) { opacity: .5; cursor: not-allowed; }
+svg { width: 16px; height: 16px; flex: none; }
+:host([variant="titlebar"]) svg { width: 14px; height: 14px; }
+input { min-width: 0; width: 100%; height: 100%; flex: 1; padding: 0; border: 0; outline: 0; background: transparent;
+	color: var(--office-field-foreground, var(--office-foreground, #1f2937)); font: inherit; font-size: 13px; }
+:host([variant="titlebar"]) input { font-size: 11px; color: var(--office-foreground, #1f2937); }
+input::placeholder { color: var(--office-field-placeholder, var(--office-muted-foreground, #6b7280)); opacity: .8; }
+input::-webkit-search-cancel-button { display: none; }
+@media (forced-colors: active) {
+	:host { border-color: CanvasText; background: Canvas; color: CanvasText; }
+	:host(:focus-within) { outline: 2px solid Highlight; outline-offset: 2px; }
+	input { color: CanvasText; }
+}
+`;
+var defineSearchField = definer("office-ui-search", () => {
+  class OfficeUiSearch extends HTMLElement {
+    static observedAttributes = ["placeholder", "aria-label", "disabled", "value"];
+    input;
+    currentValue = "";
+    constructor() {
+      super();
+      const doc = this.ownerDocument;
+      const root = this.attachShadow({ mode: "open", delegatesFocus: true });
+      attachStyles(root, controlCss(CSS3));
+      const icon2 = doc.createElementNS(SVG_NS, "svg");
+      icon2.setAttribute("part", "icon");
+      icon2.setAttribute("viewBox", "0 0 24 24");
+      icon2.setAttribute("fill", "none");
+      icon2.setAttribute("stroke", "currentColor");
+      icon2.setAttribute("stroke-width", "2");
+      icon2.setAttribute("stroke-linecap", "round");
+      icon2.setAttribute("aria-hidden", "true");
+      const circle = doc.createElementNS(SVG_NS, "circle");
+      circle.setAttribute("cx", "11");
+      circle.setAttribute("cy", "11");
+      circle.setAttribute("r", "8");
+      const handle = doc.createElementNS(SVG_NS, "path");
+      handle.setAttribute("d", "m21 21-4.35-4.35");
+      icon2.append(circle, handle);
+      this.input = doc.createElement("input");
+      this.input.type = "search";
+      this.input.setAttribute("part", "input");
+      this.input.addEventListener("input", (event) => {
+        event.stopPropagation();
+        this.currentValue = this.input.value;
+        this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+      });
+      this.input.addEventListener("change", (event) => {
+        event.stopPropagation();
+        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+      });
+      root.append(icon2, this.input);
+    }
+    connectedCallback() {
+      this.sync();
+      if (this.hasAttribute("value")) this.value = this.getAttribute("value") ?? "";
+    }
+    attributeChangedCallback(name) {
+      if (name === "value") this.value = this.getAttribute("value") ?? "";
+      else this.sync();
+    }
+    get value() {
+      return this.currentValue;
+    }
+    set value(next) {
+      this.currentValue = String(next ?? "");
+      if (this.input.value !== this.currentValue) this.input.value = this.currentValue;
+    }
+    get placeholder() {
+      return this.getAttribute("placeholder") ?? "";
+    }
+    set placeholder(next) {
+      this.setAttribute("placeholder", String(next ?? ""));
+    }
+    get disabled() {
+      return this.hasAttribute("disabled");
+    }
+    set disabled(next) {
+      this.toggleAttribute("disabled", Boolean(next));
+    }
+    focus(options) {
+      this.input.focus(options);
+    }
+    select() {
+      this.input.select();
+    }
+    sync() {
+      this.input.placeholder = this.getAttribute("placeholder") ?? "";
+      this.input.setAttribute(
+        "aria-label",
+        this.getAttribute("aria-label") ?? this.input.placeholder
+      );
+      this.input.disabled = this.hasAttribute("disabled");
+    }
+  }
+  return OfficeUiSearch;
+});
+
+// src/backstage.ts
+var CSS4 = `
 :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); }
@@ -44,7 +913,7 @@ var defineBackstage = definer("office-ui-backstage", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS));
+      attachStyles(root, controlCss(CSS4));
       this.#frame = doc.createElement("div");
       this.#frame.className = "frame";
       this.#frame.setAttribute("role", "dialog");
@@ -176,7 +1045,7 @@ var defineBackstage = definer("office-ui-backstage", () => {
 });
 
 // src/find-bar.ts
-var CSS2 = `
+var CSS5 = `
 :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); }
@@ -218,7 +1087,7 @@ var defineFindBar = definer("office-ui-find-bar", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open", delegatesFocus: true });
-      attachStyles(root, controlCss(CSS2));
+      attachStyles(root, controlCss(CSS5));
       this.#region = doc.createElement("div");
       this.#region.setAttribute("role", "search");
       const field = doc.createElement("label");
@@ -336,7 +1205,7 @@ var defineFindBar = definer("office-ui-find-bar", () => {
 });
 
 // src/print-preview.ts
-var CSS3 = `
+var CSS6 = `
 :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;
@@ -365,7 +1234,7 @@ var definePrintPreview = definer("office-ui-print-preview", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS3));
+      attachStyles(root, controlCss(CSS6));
       this.#sheet = doc.createElement("div");
       this.#sheet.className = "sheet";
       this.#sheet.setAttribute("role", "img");
@@ -444,7 +1313,7 @@ var definePrintPreview = definer("office-ui-print-preview", () => {
 });
 
 // src/ribbon-tabs.ts
-var CSS4 = `
+var CSS7 = `
 :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;
@@ -488,7 +1357,7 @@ var defineRibbon = definer("office-ui-ribbon", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS4));
+      attachStyles(root, controlCss(CSS7));
       const head = doc.createElement("div");
       head.className = "head";
       head.setAttribute("part", "head");
@@ -610,7 +1479,7 @@ var defineRibbon = definer("office-ui-ribbon", () => {
 });
 
 // src/ruler.ts
-var CSS5 = `
+var CSS8 = `
 :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); }
@@ -629,7 +1498,7 @@ var defineRuler = definer("office-ui-ruler", () => {
     constructor() {
       super();
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS5));
+      attachStyles(root, controlCss(CSS8));
       this.#canvas = this.ownerDocument.createElement("canvas");
       root.append(this.#canvas);
     }
@@ -765,7 +1634,7 @@ function clearOfficeProfile(storage = defaultStorage(), key = OFFICE_PROFILE_STO
   } catch {
   }
 }
-var CSS6 = `
+var CSS9 = `
 :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; }
@@ -795,7 +1664,7 @@ var defineAccount = definer("office-ui-account", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS6));
+      attachStyles(root, controlCss(CSS9));
       const heading = doc.createElement("h2");
       heading.textContent = "User Information";
       const who = doc.createElement("div");
@@ -896,7 +1765,7 @@ var defineAccount = definer("office-ui-account", () => {
 });
 
 // src/button.ts
-var CSS7 = `
+var CSS10 = `
 :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);
@@ -937,7 +1806,7 @@ var defineButton = definer("office-ui-button", () => {
     constructor() {
       super();
       const root = this.attachShadow({ mode: "open", delegatesFocus: true });
-      attachStyles(root, controlCss(CSS7));
+      attachStyles(root, controlCss(CSS10));
       this.button = this.ownerDocument.createElement("button");
       this.button.type = "button";
       this.button.setAttribute("part", "button");
@@ -997,33 +1866,44 @@ var defineButton = definer("office-ui-button", () => {
 // src/checkable.ts
 var CHECK_SVG = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 8 3.2 3.2L13 4.5"/></svg>';
 var CHECKBOX_CSS = `
-:host { display: inline-grid; box-sizing: border-box; width: 16px; height: 16px; flex: none;
-	place-items: center; border: 1px solid var(--office-border, #d1d5db); border-radius: 3px;
-	background: var(--office-background, #fff); color: var(--office-accent-foreground, #fff);
-	cursor: pointer; vertical-align: middle; }
-:host([checked]) { border-color: var(--office-accent, #2563eb); background: var(--office-accent, #2563eb); }
+:host { display: inline-grid; box-sizing: border-box; width: var(--office-checkbox-size, 16px); height: var(--office-checkbox-size, 16px);
+	flex: none; place-items: center; border: 1px solid var(--office-checkbox-border, var(--office-border, #d1d5db));
+	border-radius: var(--office-checkbox-radius, 3px); background: var(--office-checkbox-background, var(--office-background, #fff));
+	color: var(--office-checkbox-accent-foreground, var(--office-accent-foreground, #fff)); cursor: pointer; vertical-align: middle; }
+:host([checked]) { border-color: var(--office-checkbox-accent, var(--office-accent, #2563eb));
+	background: var(--office-checkbox-accent, var(--office-accent, #2563eb)); }
 :host(:focus-visible) { outline: 2px solid var(--office-ring, #2563eb); outline-offset: 2px; }
 :host([disabled]) { opacity: .5; cursor: not-allowed; }
 svg { display: none; width: 12px; height: 12px; }
 :host([checked]) svg { display: block; }
-@media (pointer: coarse), (max-width: 767px) { :host { width: 22px; height: 22px; } svg { width: 16px; height: 16px; } }
+@media (pointer: coarse), (max-width: 767px) {
+	:host { width: var(--office-checkbox-size-touch, 22px); height: var(--office-checkbox-size-touch, 22px); }
+	svg { width: 16px; height: 16px; }
+}
 @media (forced-colors: active) {
 	:host { border-color: CanvasText; background: Canvas; color: CanvasText; forced-color-adjust: auto; }
 	:host([checked]) { border-color: Highlight; background: Highlight; color: HighlightText; }
 }
 `;
 var SWITCH_CSS = `
-:host { display: inline-block; box-sizing: border-box; position: relative; width: 32px; height: 18px;
-	flex: none; border: 1px solid var(--office-border, #d1d5db); border-radius: 9px;
-	background: var(--office-surface, #f3f4f6); cursor: pointer; vertical-align: middle; }
-:host::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
-	border-radius: 50%; background: var(--office-foreground, #1f2937); transition: transform .12s; }
-:host([checked]) { border-color: var(--office-accent, #2563eb); background: var(--office-accent, #2563eb); }
-:host([checked])::after { transform: translateX(14px); background: var(--office-accent-foreground, #fff); }
+:host { --_w: var(--office-switch-width, 32px); --_h: var(--office-switch-height, 18px);
+	--_b: var(--office-switch-border-width, 1px); --_k: var(--office-switch-knob-size, 12px);
+	--_o: var(--office-switch-knob-offset, 2px);
+	display: inline-block; box-sizing: border-box; position: relative; width: var(--_w); height: var(--_h);
+	flex: none; border: var(--_b) solid var(--office-switch-border, var(--office-border, #d1d5db)); border-radius: 999px;
+	background: var(--office-switch-track, var(--office-surface, #f3f4f6)); cursor: pointer; vertical-align: middle;
+	touch-action: manipulation; transition: background-color .15s; }
+:host::after { content: ""; position: absolute; top: calc((var(--_h) - 2 * var(--_b) - var(--_k)) / 2); left: var(--_o);
+	width: var(--_k); height: var(--_k); border-radius: 50%; background: var(--office-switch-thumb, var(--office-foreground, #1f2937));
+	box-shadow: 0 1px 2px rgb(0 0 0 / .3); transition: transform .15s; }
+:host([checked]) { border-color: var(--office-switch-track-on, var(--office-accent, #2563eb));
+	background: var(--office-switch-track-on, var(--office-accent, #2563eb)); }
+:host([checked])::after { transform: translateX(var(--office-switch-knob-travel, calc(var(--_w) - var(--_k) - 2 * var(--_o) - 2 * var(--_b))));
+	background: var(--office-switch-thumb-on, var(--office-accent-foreground, #fff)); }
 :host(:focus-visible) { outline: 2px solid var(--office-ring, #2563eb); outline-offset: 2px; }
 :host([disabled]) { opacity: .5; cursor: not-allowed; }
 svg { display: none; }
-@media (pointer: coarse), (max-width: 767px) { :host { min-height: 24px; width: 44px; height: 24px; border-radius: 12px; } }
+@media (pointer: coarse), (max-width: 767px) { :host { --_w: var(--office-switch-width-touch, 44px); --_h: var(--office-switch-height-touch, 24px); --_k: var(--office-switch-knob-size-touch, 18px); } }
 @media (forced-colors: active) {
 	:host { border-color: CanvasText; background: Canvas; forced-color-adjust: none; }
 	:host::after { background: CanvasText; }
@@ -1112,7 +1992,7 @@ var defineCheckbox = definer(
 var defineSwitch = definer("office-ui-switch", makeCheckable("switch", SWITCH_CSS));
 
 // src/dialog.ts
-var CSS8 = `
+var CSS11 = `
 :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); }
@@ -1145,7 +2025,7 @@ var defineDialog = definer("office-ui-dialog", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS8));
+      attachStyles(root, controlCss(CSS11));
       const backdrop = doc.createElement("div");
       backdrop.className = "backdrop";
       this.box = doc.createElement("div");
@@ -1161,9 +2041,9 @@ var defineDialog = definer("office-ui-dialog", () => {
       this.closeButton.type = "button";
       this.closeButton.className = "close";
       this.closeButton.setAttribute("aria-label", "Close");
-      const icon = createIconSvg(doc);
-      paintIcon(icon, "close");
-      this.closeButton.append(icon);
+      const icon2 = createIconSvg(doc);
+      paintIcon(icon2, "close");
+      this.closeButton.append(icon2);
       header.append(this.heading, this.closeButton);
       const body = doc.createElement("div");
       body.className = "body";
@@ -1248,7 +2128,7 @@ var defineDialog = definer("office-ui-dialog", () => {
 });
 
 // src/command-search.ts
-var CSS9 = `
+var CSS12 = `
 :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);
@@ -1288,7 +2168,7 @@ var defineCommandSearch = definer("office-ui-command-search", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open", delegatesFocus: true });
-      attachStyles(root, controlCss(CSS9));
+      attachStyles(root, controlCss(CSS12));
       const field = doc.createElement("div");
       field.className = "field";
       const glass = createIconSvg(doc);
@@ -1445,7 +2325,7 @@ var defineCommandSearch = definer("office-ui-command-search", () => {
 });
 
 // src/context-menu.ts
-var CSS10 = `
+var CSS13 = `
 :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);
@@ -1481,7 +2361,7 @@ var defineContextMenu = definer("office-ui-context-menu", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS10));
+      attachStyles(root, controlCss(CSS13));
       this.panel = doc.createElement("div");
       this.panel.className = "panel";
       this.panel.setAttribute("role", "menu");
@@ -1891,7 +2771,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 CSS11 = `
+var CSS14 = `
 :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; }
@@ -1940,7 +2820,7 @@ var defineOptionsDialog = definer("office-ui-options-dialog", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS11));
+      attachStyles(root, controlCss(CSS14));
       this.#dialog = doc.createElement("office-ui-dialog");
       const layout = doc.createElement("div");
       layout.className = "layout";
@@ -2285,7 +3165,7 @@ var defineToolbar = definer("office-ui-toolbar", () => {
 });
 
 // src/select.ts
-var CSS12 = `
+var CSS15 = `
 :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;
@@ -2324,7 +3204,7 @@ var defineSelect = definer("office-ui-select", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open", delegatesFocus: true });
-      attachStyles(root, controlCss(CSS12));
+      attachStyles(root, controlCss(CSS15));
       this.trigger = doc.createElement("button");
       this.trigger.type = "button";
       this.trigger.setAttribute("role", "combobox");
@@ -2575,7 +3455,7 @@ var defineStatusItem = definer("office-ui-status-item", () => {
 });
 
 // src/tab-strip.ts
-var CSS13 = `
+var CSS16 = `
 :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;
@@ -2622,15 +3502,15 @@ var defineTabStrip = definer("office-ui-tab-strip", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS13));
-      const step = (name, icon) => {
+      attachStyles(root, controlCss(CSS16));
+      const step = (name, icon2) => {
         const button = doc.createElement("button");
         button.type = "button";
         button.className = "step";
         button.setAttribute("aria-label", name);
         button.title = name;
         const svg = createIconSvg(doc);
-        paintIcon(svg, icon);
+        paintIcon(svg, icon2);
         button.append(svg);
         return button;
       };
@@ -2761,7 +3641,7 @@ var defineTabStrip = definer("office-ui-tab-strip", () => {
 });
 
 // src/zoom-slider.ts
-var CSS14 = `
+var CSS17 = `
 :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);
@@ -2797,7 +3677,7 @@ var defineZoomSlider = definer("office-ui-zoom-slider", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS14));
+      attachStyles(root, controlCss(CSS17));
       const button = (name, text2) => {
         const element = doc.createElement("button");
         element.type = "button";
@@ -3064,10 +3944,17 @@ var CONTROL_DEFINERS = [
   defineFindBar,
   defineRuler,
   defineBackstage,
-  definePrintPreview
+  definePrintPreview,
+  defineRadio,
+  defineSearchField,
+  defineRibbonToggle,
+  defineDialogFooter,
+  defineToasts,
+  defineReadOnlyBanner,
+  definePasteOptions
 ];
 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, 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 };
+export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, 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, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, writeOfficeProfile };