ooxml-ui 0.20.0 → 0.22.0

package/dist/chunk-LKLZOPTO.js

@@ -0,0 +1,4536 @@
+import { createIconSvg, paintIcon, getIcon } from './chunk-HZ422LTR.js';
+import { initialsOf } from './chunk-E47762NY.js';
+import { OfficeElement, controlStyles, definer, valueOn, flag, present, withTokens, triState } from './chunk-5A4REH6T.js';
+import { tok, OFFICE_TOKENS } from './chunk-HSJH6SUW.js';
+import { html, LitElement, render, nothing, svg } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { unsafeStatic, html as html$1 } from 'lit/static-html.js';
+import { live } from 'lit/directives/live.js';
+import { keyed } from 'lit/directives/keyed.js';
+
+function glyph(name, className = "glyph", hidden = false) {
+  const found = getIcon(name);
+  return html`<svg
+		class=${className}
+		viewBox=${found?.viewBox ?? "0 0 20 20"}
+		aria-hidden="true"
+		?data-painted=${Boolean(found)}
+		?hidden=${hidden}
+	>${found ? svg`<path d=${found.d}></path>` : ""}</svg>`;
+}
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/dialog/dialog-footer.css?raw
+var dialog_footer_default = ":host {\n	display: block;\n	flex: 1 1 auto;\n	min-width: 0;\n}\n:host([hidden]) {\n	display: none !important;\n}\nsvg {\n	flex: none;\n	width: var(--office-icon-size);\n	height: var(--office-icon-size);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n.footer {\n	box-sizing: border-box;\n	display: flex;\n	flex-wrap: wrap;\n	justify-content: flex-end;\n	gap: var(--office-space-2);\n}\nbutton {\n	box-sizing: border-box;\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-1-5);\n	min-width: var(--office-control-height);\n	min-height: var(--office-control-height-lg);\n	padding: var(--office-space-1-5) var(--office-space-3-5);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-md);\n	background: var(--office-surface);\n	color: var(--office-foreground);\n	font: 500 var(--office-font-size)/1.2 var(--office-font);\n	cursor: pointer;\n	touch-action: manipulation;\n}\nbutton:hover:not(:disabled) {\n	background: var(--office-selected);\n}\nbutton.primary {\n	border-color: var(--office-accent);\n	background: var(--office-accent);\n	color: var(--office-accent-foreground);\n}\nbutton.primary:hover:not(:disabled) {\n	opacity: 0.9;\n	background: var(--office-accent);\n}\nbutton.warning {\n	border-color: var(--office-warning);\n	background: var(--office-warning);\n	color: var(--office-warning-foreground);\n}\nbutton.warning:hover:not(:disabled) {\n	opacity: 0.9;\n	background: var(--office-warning);\n}\nbutton.danger {\n	border-color: var(--office-danger);\n	background: var(--office-danger);\n	color: var(--office-danger-foreground);\n}\nbutton.danger:hover:not(:disabled) {\n	opacity: 0.9;\n	background: var(--office-danger);\n}\nbutton.start {\n	margin-right: auto;\n}\nbutton.busy::before {\n	content: '';\n	width: var(--office-icon-size-sm);\n	height: var(--office-icon-size-sm);\n	border: var(--office-border-width-thick) solid currentColor;\n	border-right-color: transparent;\n	border-radius: 50%;\n	animation: office-footer-spin var(--office-duration-spin) linear infinite;\n}\n@keyframes office-footer-spin {\n	to {\n		transform: rotate(360deg);\n	}\n}\n@media (prefers-reduced-motion: reduce) {\n	button.busy::before {\n		animation: none;\n	}\n}\nbutton:disabled {\n	cursor: not-allowed;\n	opacity: 0.55;\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n@media (pointer: coarse), (max-width: 767px) {\n	button {\n		min-width: var(--office-target-size-touch);\n		min-height: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	button,\n	button.primary,\n	button.warning,\n	button.danger {\n		border-color: ButtonText;\n		background: ButtonFace;\n		color: ButtonText;\n	}\n	button:hover:not(:disabled) {\n		background: Highlight;\n		color: HighlightText;\n	}\n	button.primary {\n		border-width: var(--office-border-width-thick);\n	}\n	button:focus-visible {\n		outline-color: Highlight;\n	}\n}\n";
+
+// src/dialog/dialog-footer.ts
+var OfficeUiDialogFooter = class extends OfficeElement {
+  static requestEvent = "office-dialog-footer-request";
+  static testIdPrefix = "office-dialog-footer";
+  static styles = controlStyles(dialog_footer_default);
+  // A product subclass overrides `state` with its own accessor, so Lit is not told about it: its
+  // first update would read the property before the subclass's fields exist.
+  model = { actions: [] };
+  get state() {
+    return this.model;
+  }
+  set state(value) {
+    this.model = value;
+    this.requestUpdate("state");
+  }
+  /** Move keyboard focus to an action, for example the primary one when a dialog opens. */
+  focusAction(id) {
+    this.renderRoot.querySelector(`button[data-action="${id}"]`)?.focus();
+  }
+  classes(action) {
+    return [
+      action.variant === "secondary" ? "" : action.variant ?? "",
+      action.align === "start" ? "start" : "",
+      action.busy ? "busy" : ""
+    ].filter(Boolean).join(" ");
+  }
+  render() {
+    const { requestEvent } = this.constructor;
+    return html`
+			<div class="footer" part="footer">
+				${repeat(
+      this.model.actions,
+      (action) => action.id,
+      (action) => html`<button
+						type="button"
+						class=${this.classes(action)}
+						data-action=${action.id}
+						data-testid=${ifDefined(action.testId)}
+						title=${ifDefined(action.title)}
+						aria-busy=${ifDefined(action.busy ? "true" : void 0)}
+						?disabled=${action.disabled === true || action.busy === true}
+						@click=${() => this.fire(requestEvent, { id: action.id })}
+						>${action.icon ? glyph(action.icon, "icon") : ""}${action.label}</button
+					>`
+    )}
+			</div>
+		`;
+  }
+};
+var defineDialogFooter = definer("office-ui-dialog-footer", () => OfficeUiDialogFooter);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/notices/toasts.css?raw
+var toasts_default = ":host {\n	box-sizing: border-box;\n	display: flex;\n	flex-direction: column;\n	overflow-y: auto;\n	max-height: 70%;\n	pointer-events: none;\n}\n:host([hidden]) {\n	display: none !important;\n}\n[hidden] {\n	display: none !important;\n}\nsvg {\n	flex: none;\n	width: var(--office-icon-size);\n	height: var(--office-icon-size);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n.header,\n.toast,\n.overflow {\n	pointer-events: auto;\n}\n.header {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: 0 var(--office-space-1);\n	color: var(--office-muted-foreground);\n	font: 600 var(--office-font-size-xs)/1.4 var(--office-font);\n}\n.toast {\n	box-sizing: border-box;\n	display: flex;\n	align-items: flex-start;\n	gap: var(--office-space-2);\n	padding: var(--office-space-2) var(--office-space-2-5);\n	margin-top: var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	color: var(--office-foreground);\n	box-shadow: var(--office-shadow-lg);\n	font: var(--office-font-size-sm)/1.4 var(--office-font);\n}\n.toast svg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	margin-top: var(--office-space-px);\n}\n.toast[data-severity='warning'] svg {\n	color: var(--office-warning);\n}\n.toast[data-severity='info'] svg {\n	color: var(--office-info);\n}\n.message {\n	flex: 1;\n	min-width: 0;\n	margin: 0;\n	overflow-wrap: anywhere;\n}\n.overflow {\n	margin: var(--office-space-2) 0 0;\n	text-align: center;\n	color: var(--office-muted-foreground);\n	font: var(--office-font-size-xs) var(--office-font);\n}\nbutton {\n	box-sizing: border-box;\n	flex: none;\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	min-width: var(--office-control-height);\n	min-height: var(--office-control-height);\n	padding: var(--office-space-0) var(--office-space-1);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-muted-foreground);\n	font: inherit;\n	cursor: pointer;\n	touch-action: manipulation;\n}\nbutton:hover {\n	background: var(--office-surface);\n	color: var(--office-foreground);\n}\n.dismiss-all {\n	font-weight: 500;\n	text-decoration: underline;\n	text-underline-offset: var(--office-space-0);\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\n@media (pointer: coarse) {\n	button {\n		min-width: var(--office-target-size-touch);\n		min-height: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	.toast {\n		border-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n	}\n	.toast svg,\n	button {\n		color: ButtonText;\n	}\n	button:hover {\n		background: Highlight;\n		color: HighlightText;\n	}\n	button:focus-visible {\n		outline-color: Highlight;\n	}\n}\n";
+
+// src/notices/toasts.ts
+var OFFICE_TOAST_VISIBLE_LIMIT = 5;
+var OfficeUiToasts = class extends OfficeElement {
+  static requestEvent = "office-toasts-request";
+  static testIdPrefix = "office-toast";
+  static styles = controlStyles(toasts_default);
+  // A product subclass overrides `state` with its own accessor, so Lit is not told about it: its
+  // first update would read the property before the subclass's fields exist.
+  model = { toasts: [] };
+  get state() {
+    return this.model;
+  }
+  set state(value) {
+    this.model = value;
+    this.requestUpdate("state");
+  }
+  willUpdate(_changed) {
+    const { testIdPrefix } = this.constructor;
+    this.setAttribute("data-testid", `${testIdPrefix}s`);
+    this.toggleAttribute("hidden", this.model.toasts.length === 0);
+  }
+  render() {
+    const { requestEvent, testIdPrefix: p } = this.constructor;
+    const s = this.model;
+    const visible2 = s.toasts.slice(0, OFFICE_TOAST_VISIBLE_LIMIT);
+    const hiddenCount = (s.overflowCount ?? 0) + s.toasts.length - visible2.length;
+    const labels = s.labels ?? {};
+    return html`
+			<div>
+				<div class="header">
+					<span>${labels.title ?? "Compatibility"}</span>
+					<button
+						type="button"
+						class="dismiss-all"
+						data-testid="${p}s-dismiss-all"
+						@click=${() => this.fire(requestEvent, { id: "dismissAll" })}
+						>${labels.dismissAll ?? "Dismiss all"}</button
+					>
+				</div>
+				${visible2.map(
+      (toast) => html`<div
+						class="toast"
+						role="status"
+						data-testid=${p}
+						data-code=${ifDefined(toast.code)}
+						data-severity=${toast.severity}
+					>
+						${glyph(toast.severity === "warning" ? "warning" : "info", "icon")}
+						<p class="message">${toast.message}</p>
+						<button
+							type="button"
+							data-testid="${p}-dismiss"
+							aria-label=${labels.dismiss ?? "Dismiss"}
+							@click=${() => this.fire(requestEvent, { id: "dismiss", toastId: toast.id })}
+							>${glyph("close", "icon")}</button
+						>
+					</div>`
+    )}
+				${hiddenCount > 0 ? html`<p class="overflow">+${hiddenCount}</p>` : ""}
+			</div>
+		`;
+  }
+};
+var defineToasts = definer("office-ui-toasts", () => OfficeUiToasts);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/notices/paste-options.css?raw
+var paste_options_default = ":host {\n	position: fixed;\n	z-index: 1100;\n	display: block;\n}\n:host([hidden]) {\n	display: none !important;\n}\n.toolbar {\n	box-sizing: border-box;\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-0);\n	padding: var(--office-space-1);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius);\n	background: var(--office-popover);\n	box-shadow: var(--office-shadow-lg);\n	font: var(--office-font-size-xs)/1.2 var(--office-font);\n}\nbutton {\n	box-sizing: border-box;\n	min-height: var(--office-control-height);\n	padding: var(--office-space-1) var(--office-space-2);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-foreground);\n	font: inherit;\n	white-space: nowrap;\n	cursor: pointer;\n	touch-action: manipulation;\n}\nbutton:hover {\n	background: var(--office-surface);\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\n@media (pointer: coarse) {\n	button {\n		min-height: var(--office-target-size-touch);\n		min-width: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	.toolbar {\n		border-color: CanvasText;\n		background: Canvas;\n	}\n	button {\n		color: ButtonText;\n	}\n	button:hover {\n		background: Highlight;\n		color: HighlightText;\n	}\n	button:focus-visible {\n		outline-color: Highlight;\n	}\n}\n";
+
+// src/notices/paste-options.ts
+var OfficeUiPasteOptions = class extends OfficeElement {
+  static requestEvent = "office-paste-options-request";
+  static dismissEvent = "office-paste-options-dismiss";
+  static testIdPrefix = "office-paste-options";
+  static styles = controlStyles(paste_options_default);
+  // A product subclass overrides `state` with its own accessor, so Lit is not told about it: its
+  // first update would read the property before the subclass's fields exist.
+  model = { left: 0, top: 0, options: [] };
+  get state() {
+    return this.model;
+  }
+  set state(value) {
+    this.model = value;
+    this.requestUpdate("state");
+  }
+  disarm;
+  dismiss() {
+    this.fire(this.constructor.dismissEvent, void 0);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const view = this.ownerDocument.defaultView;
+    if (!view) return;
+    const dismiss = (event) => {
+      const toolbar = this.renderRoot.querySelector(".toolbar");
+      if (toolbar && event.composedPath().includes(toolbar) && (!(event instanceof KeyboardEvent) || event.key !== "Escape"))
+        return;
+      this.dismiss();
+    };
+    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() {
+    super.disconnectedCallback();
+    this.disarm?.();
+    this.disarm = void 0;
+  }
+  choose(option) {
+    this.fire(this.constructor.requestEvent, {
+      format: option.id
+    });
+    this.dismiss();
+  }
+  willUpdate() {
+    const { left, top } = this.model;
+    this.hostWrite(() => {
+      this.style.left = `calc(${left}px + ${tok("--office-space-1")})`;
+      this.style.top = `calc(${top}px + ${tok("--office-space-1")})`;
+    });
+  }
+  render() {
+    return html`
+			<div
+				class="toolbar"
+				role="toolbar"
+				tabindex="-1"
+				aria-label=${this.model.label ?? "Paste Options"}
+				@mousedown=${(event) => event.stopPropagation()}
+			>
+				${repeat(
+      this.model.options,
+      (option) => option.id,
+      (option) => html`<button
+						type="button"
+						data-format=${option.id}
+						title=${option.label}
+						@click=${() => this.choose(option)}
+						>${option.label}</button
+					>`
+    )}
+			</div>
+		`;
+  }
+};
+var definePasteOptions = definer("office-ui-paste-options", () => OfficeUiPasteOptions);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/notices/read-only-banner.css?raw
+var read_only_banner_default = ":host {\n	display: block;\n	flex: none;\n}\n:host([hidden]) {\n	display: none !important;\n}\n[hidden] {\n	display: none !important;\n}\nsvg {\n	flex: none;\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n	color: var(--office-notice-accent);\n}\n.banner {\n	box-sizing: border-box;\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	padding: var(--office-space-1-5) var(--office-space-4);\n	border-bottom: var(--office-border-width) solid var(--office-notice-border);\n	background: var(--office-notice-background);\n	color: var(--office-notice-foreground);\n	font: var(--office-font-size-sm)/1.4 var(--office-font);\n}\n.text {\n	flex: 1 1 auto;\n	min-width: 0;\n	margin: 0;\n}\n.form {\n	display: flex;\n	flex: none;\n	align-items: center;\n	gap: var(--office-space-2);\n}\n.sr-only {\n	position: absolute;\n	width: var(--office-space-px);\n	height: var(--office-space-px);\n	margin: calc(-1 * var(--office-space-px));\n	padding: 0;\n	overflow: hidden;\n	clip: rect(0, 0, 0, 0);\n	white-space: nowrap;\n	border: 0;\n}\nbutton,\ninput {\n	font: inherit;\n}\nbutton {\n	box-sizing: border-box;\n	flex: none;\n	min-height: var(--office-control-height);\n	padding: var(--office-space-1) var(--office-space-3);\n	border: var(--office-border-width) solid transparent;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: inherit;\n	font-weight: 500;\n	cursor: pointer;\n	touch-action: manipulation;\n}\nbutton.primary {\n	border-color: color-mix(in srgb, var(--office-notice-accent) 50%, transparent);\n}\nbutton:hover {\n	background: color-mix(in srgb, var(--office-notice-accent) 15%, transparent);\n}\nbutton:disabled {\n	opacity: 0.6;\n	cursor: not-allowed;\n}\nbutton:focus-visible,\ninput:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\ninput {\n	box-sizing: border-box;\n	min-height: var(--office-control-height);\n	padding: var(--office-space-1) var(--office-space-2);\n	border: var(--office-border-width) solid\n		color-mix(in srgb, var(--office-notice-accent) 40%, transparent);\n	border-radius: var(--office-radius);\n	background: var(--office-background);\n	color: var(--office-foreground);\n}\n.error {\n	flex: none;\n	color: var(--office-danger);\n}\n@media (pointer: coarse) {\n	button,\n	input {\n		min-height: var(--office-target-size-touch);\n		min-width: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	.banner {\n		border-bottom-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n	}\n	svg,\n	.error {\n		color: CanvasText;\n	}\n	button,\n	input {\n		border-color: ButtonText;\n		color: ButtonText;\n		background: ButtonFace;\n	}\n	button:focus-visible,\n	input:focus-visible {\n		outline-color: Highlight;\n	}\n}\n";
+
+// src/notices/read-only-banner.ts
+var OfficeUiReadOnlyBanner = class extends OfficeElement {
+  static requestEvent = "office-read-only-request";
+  static testIdPrefix = "office-readonly";
+  static styles = controlStyles(read_only_banner_default);
+  // A product subclass overrides `state` with its own accessor, so Lit is not told about it: its
+  // first update would read the property before the subclass's fields exist.
+  model = { kind: null, message: "" };
+  get state() {
+    return this.model;
+  }
+  set state(value) {
+    this.model = value;
+    this.requestUpdate("state");
+  }
+  promptWasOpen = false;
+  send(intent) {
+    this.fire(this.constructor.requestEvent, intent);
+  }
+  get input() {
+    return this.renderRoot.querySelector("input");
+  }
+  onSubmit(event) {
+    event.preventDefault();
+    this.send({ id: "submitPassword", password: this.input?.value ?? "" });
+  }
+  willUpdate() {
+    const { testIdPrefix } = this.constructor;
+    this.setAttribute("data-testid", `${testIdPrefix}-banner`);
+    if (this.model.kind) this.setAttribute("data-kind", this.model.kind);
+    else this.removeAttribute("data-kind");
+  }
+  /** The password field takes focus when the prompt opens and is cleared when it closes. */
+  updated(_changed) {
+    const open = this.model.passwordPromptOpen === true;
+    if (open && !this.promptWasOpen) this.input?.focus();
+    else if (!open && this.promptWasOpen && this.input) this.input.value = "";
+    this.promptWasOpen = open;
+  }
+  render() {
+    const { testIdPrefix: p } = this.constructor;
+    const s = this.model;
+    const l = s.labels ?? {};
+    const open = s.passwordPromptOpen === true;
+    const failed = s.passwordError ?? null;
+    return html`
+			<div class="banner" role="status" part="banner">
+				${glyph("lock", "icon")}
+				<p class="text"
+					><strong>${l.title ?? "Read-only recommended"}</strong>: <span>${s.message}</span></p
+				>
+				<button
+					type="button"
+					class="primary"
+					data-testid="${p}-edit-anyway"
+					?hidden=${open}
+					@click=${() => this.send({ id: "editAnyway" })}
+					>${l.editAnyway ?? "Edit anyway"}</button
+				>
+				<button
+					type="button"
+					data-testid="${p}-dismiss"
+					?hidden=${open}
+					@click=${() => this.send({ id: "dismiss" })}
+					>${l.dismiss ?? "Dismiss"}</button
+				>
+				<form
+					class="form"
+					data-testid="${p}-password-form"
+					?hidden=${!open}
+					@submit=${this.onSubmit}
+				>
+					<label class="sr-only" for="password">${l.passwordLabel ?? "Password"}</label>
+					<input
+						id="password"
+						type="password"
+						data-testid="${p}-password-input"
+						placeholder=${l.passwordPlaceholder ?? "Password"}
+						aria-invalid=${String(failed !== null)}
+						aria-describedby=${ifDefined(failed ? "error" : void 0)}
+						?disabled=${s.checkingPassword === true}
+					/>
+					<button
+						type="submit"
+						class="primary"
+						data-testid="${p}-unlock"
+						?disabled=${s.checkingPassword === true}
+						>${l.unlock ?? "Unlock"}</button
+					>
+					<button
+						type="button"
+						data-testid="${p}-password-cancel"
+						@click=${() => this.send({ id: "cancelPassword" })}
+						>${l.cancel ?? "Cancel"}</button
+					>
+					<span
+						class="error"
+						id="error"
+						role="alert"
+						data-testid="${p}-password-error"
+						?hidden=${failed === null}
+						>${failed ?? ""}</span
+					>
+				</form>
+			</div>
+		`;
+  }
+};
+var defineReadOnlyBanner = definer(
+  "office-ui-read-only-banner",
+  () => OfficeUiReadOnlyBanner
+);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/form/radio.css?raw
+var radio_default = "/* Tokens: --office-checkbox-size, --office-radio-dot-size and their -touch variants. */\n:host {\n	display: inline-grid;\n	box-sizing: border-box;\n	width: var(--office-checkbox-size);\n	height: var(--office-checkbox-size);\n	flex: none;\n	place-items: center;\n	border: var(--office-border-width) solid var(--office-checkbox-border);\n	border-radius: 50%;\n	background: var(--office-checkbox-background);\n	cursor: pointer;\n	vertical-align: middle;\n}\n:host([checked]) {\n	border-color: var(--office-checkbox-accent);\n}\n:host(:focus-visible) {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n:host([disabled]) {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\n.dot {\n	display: none;\n	width: var(--office-radio-dot-size);\n	height: var(--office-radio-dot-size);\n	border-radius: 50%;\n	background: var(--office-checkbox-accent);\n}\n:host([checked]) .dot {\n	display: block;\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n	:host {\n		width: var(--office-checkbox-size-touch);\n		height: var(--office-checkbox-size-touch);\n	}\n	.dot {\n		width: var(--office-radio-dot-size-touch);\n		height: var(--office-radio-dot-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	:host {\n		border-color: CanvasText;\n		background: Canvas;\n		forced-color-adjust: auto;\n	}\n	:host([checked]) {\n		border-color: Highlight;\n	}\n	.dot {\n		background: Highlight;\n	}\n	:host([disabled]) {\n		border-color: GrayText;\n	}\n	:host([disabled]) .dot {\n		background: GrayText;\n	}\n	:host(:focus-visible) {\n		outline-color: Highlight;\n	}\n}\n";
+
+// src/form/radio.ts
+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 text = "";
+  for (const node of label.childNodes) {
+    if (node === self) continue;
+    if (node.nodeType === 3) text += node.textContent ?? "";
+    else if (node instanceof Element && !node.localName.includes("-") && !/^(select|input|textarea)$/u.test(node.localName))
+      text += labelText(node, self);
+  }
+  return text;
+}
+function refreshTabStops(group) {
+  const enabled = group.filter((item) => !present(item.disabled));
+  const stop = enabled.find((item) => present(item.checked)) ?? enabled[0];
+  for (const item of group) item.tabIndex = item === stop ? 0 : -1;
+}
+var OfficeUiRadio = class extends OfficeElement {
+  static formAssociated = true;
+  static styles = controlStyles(radio_default);
+  static properties = {
+    checked: flag,
+    disabled: flag,
+    value: valueOn,
+    name: { type: String, reflect: true }
+  };
+  internals;
+  defaultChecked = false;
+  scope = null;
+  autoNamed = false;
+  constructor() {
+    super();
+    this.checked = false;
+    this.disabled = false;
+    this.value = "on";
+    this.name = "";
+    try {
+      this.internals = this.attachInternals();
+    } catch {
+      this.internals = void 0;
+    }
+    this.addEventListener("click", (event) => {
+      if (present(this.disabled)) event.preventDefault();
+      else this.select(true);
+    });
+    this.addEventListener("keydown", (event) => this.onKey(event));
+    this.addEventListener("focus", () => this.syncName());
+  }
+  get form() {
+    return this.internals?.form ?? null;
+  }
+  connectedCallback() {
+    this.defaultChecked = present(this.checked);
+    const root = this.getRootNode();
+    this.scope = root instanceof Document || root instanceof ShadowRoot ? root : null;
+    super.connectedCallback();
+    this.syncName();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.scope)
+      refreshTabStops(groupOf(this, this.scope).filter((item) => item !== this));
+  }
+  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(emit) {
+    if (present(this.checked)) return;
+    this.checked = true;
+    if (emit) {
+      this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    }
+  }
+  /**
+   * 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 text = label ? labelText(label, this).replace(/\s+/gu, " ").trim() : "";
+    if (text) {
+      this.autoNamed = true;
+      this.setAttribute("aria-label", text);
+    }
+  }
+  peers() {
+    return groupOf(this, this.scope ?? this.getRootNode());
+  }
+  onKey(event) {
+    if (present(this.disabled) || event.ctrlKey || event.metaKey || event.altKey) return;
+    if (event.key === " ") {
+      event.preventDefault();
+      this.select(true);
+      return;
+    }
+    const list = this.peers().filter((item) => !present(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();
+  }
+  /** The host carries the semantics: role, state, form value and the group's tab stop. */
+  willUpdate() {
+    const checked = present(this.checked);
+    const disabled = present(this.disabled);
+    this.setAttribute("role", "radio");
+    this.setAttribute("aria-checked", String(checked));
+    this.setAttribute("aria-disabled", String(disabled));
+    this.internals?.setFormValue?.(checked && !disabled ? this.value : null);
+    if (this.isConnected) {
+      this.scope = this.getRootNode();
+      if (checked) {
+        for (const peer of this.peers())
+          if (peer !== this && present(peer.checked)) peer.checked = false;
+      }
+      refreshTabStops(this.peers());
+    } else this.setAttribute("tabindex", disabled ? "-1" : "0");
+  }
+  render() {
+    return html`<span class="dot"></span>`;
+  }
+};
+var defineRadio = definer("office-ui-radio", () => OfficeUiRadio);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/ribbon/ribbon-toggle.css?raw
+var ribbon_toggle_default = ":host {\n	display: block;\n}\nlabel {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1);\n	min-height: var(--office-ribbon-row-height);\n	padding: 0 var(--office-space-1);\n	color: var(--office-foreground);\n	font: inherit;\n	font-size: var(--office-font-size-sm);\n	white-space: nowrap;\n	cursor: pointer;\n}\n:host([disabled]) label {\n	color: var(--office-muted-foreground);\n	cursor: not-allowed;\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n	label {\n		min-height: var(--office-target-size-touch);\n		font-size: var(--office-font-size-sm);\n	}\n}\n";
+
+// src/ribbon/ribbon-toggle.ts
+var OfficeUiRibbonToggle = class extends OfficeElement {
+  static requestEvent = "office-toggle";
+  static idAttribute = "command";
+  static detailKey = "command";
+  /** The checkbox drawn inside; a product subclass may use its own aliased tag. */
+  static checkboxTag = "office-ui-checkbox";
+  static styles = controlStyles(ribbon_toggle_default);
+  static properties = {
+    label: { type: String },
+    checked: flag,
+    disabled: flag
+  };
+  /** `title` is a native attribute, so it is watched rather than declared as a property. */
+  static get observedAttributes() {
+    return [...super.observedAttributes, "title"];
+  }
+  constructor() {
+    super();
+    this.label = "";
+    this.checked = false;
+    this.disabled = false;
+  }
+  attributeChangedCallback(name, old, value) {
+    super.attributeChangedCallback(name, old, value);
+    if (name === "title") this.requestUpdate();
+  }
+  /** Clicking the label text presses the checkbox, which is the only control that toggles. */
+  onLabelClick(event) {
+    event.preventDefault();
+    const checkbox = this.renderRoot.querySelector('[part="checkbox"]');
+    if (event.target !== checkbox) checkbox?.click();
+  }
+  onChange(event) {
+    event.stopPropagation();
+    const checkbox = event.target;
+    const checked = checkbox.checked;
+    checkbox.checked = present(this.checked);
+    const { requestEvent, idAttribute, detailKey } = this.constructor;
+    const id = this.getAttribute(idAttribute);
+    if (!present(this.disabled) && id) this.fire(requestEvent, { [detailKey]: id, checked });
+  }
+  render() {
+    const checkboxTag = this.constructor.checkboxTag;
+    const tag = unsafeStatic(checkboxTag);
+    return html$1`
+			<label @click=${this.onLabelClick}>
+				<${tag}
+					part="checkbox"
+					aria-label=${this.label}
+					title=${this.getAttribute("title") ?? this.label}
+					?checked=${present(this.checked)}
+					?disabled=${present(this.disabled)}
+					@input=${(event) => event.stopPropagation()}
+					@change=${this.onChange}
+				></${tag}>${this.label}</label>
+		`;
+  }
+};
+var defineRibbonToggle = definer("office-ui-ribbon-toggle", () => OfficeUiRibbonToggle);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/form/search-field.css?raw
+var search_field_default = "/* Tokens: --office-field-*. */\n:host {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	box-sizing: border-box;\n	width: 100%;\n	height: var(--office-field-height-lg);\n	padding: 0 var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-field-radius);\n	background: var(--office-field-background);\n	color: var(--office-field-placeholder);\n	font: inherit;\n}\n:host(:focus-within) {\n	border-color: var(--office-field-border-focus);\n}\n:host([variant='titlebar']) {\n	height: var(--office-field-height);\n	gap: var(--office-space-1-5);\n	padding-inline: var(--office-space-3-5);\n	border-color: var(--office-border);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n}\n:host([variant='titlebar']:focus-within) {\n	border-color: var(--office-field-border-focus);\n	color: var(--office-foreground);\n}\n:host([disabled]) {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\nsvg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	flex: none;\n}\n:host([variant='titlebar']) svg {\n	width: var(--office-icon-size);\n	height: var(--office-icon-size);\n}\ninput {\n	min-width: 0;\n	width: 100%;\n	height: 100%;\n	flex: 1;\n	padding: 0;\n	border: 0;\n	outline: 0;\n	background: transparent;\n	color: var(--office-field-foreground);\n	font: inherit;\n	font-size: var(--office-font-size);\n}\n:host([variant='titlebar']) input {\n	font-size: var(--office-font-size-xs);\n	color: var(--office-foreground);\n}\ninput::placeholder {\n	color: var(--office-field-placeholder);\n	opacity: 0.8;\n}\ninput::-webkit-search-cancel-button {\n	display: none;\n}\n\n@media (forced-colors: active) {\n	:host {\n		border-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n	}\n	:host(:focus-within) {\n		outline: var(--office-focus-width) solid Highlight;\n		outline-offset: var(--office-focus-offset);\n	}\n	input {\n		color: CanvasText;\n	}\n}\n";
+
+// src/form/search-field.ts
+var OfficeUiSearch = class extends OfficeElement {
+  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+  static styles = controlStyles(search_field_default);
+  static properties = {
+    value: { type: String },
+    placeholder: { type: String, reflect: true },
+    disabled: flag,
+    variant: { type: String, reflect: true }
+  };
+  /** `aria-label` names the inner input, so it is watched rather than declared as a property. */
+  static get observedAttributes() {
+    return [...super.observedAttributes, "aria-label"];
+  }
+  constructor() {
+    super();
+    this.value = "";
+    this.placeholder = null;
+    this.disabled = false;
+    this.variant = "";
+  }
+  attributeChangedCallback(name, old, value) {
+    super.attributeChangedCallback(name, old, value);
+    if (name === "aria-label") this.requestUpdate();
+  }
+  get input() {
+    return this.renderRoot.querySelector("input");
+  }
+  focus(options) {
+    this.input?.focus(options);
+  }
+  select() {
+    this.input?.select();
+  }
+  onInput(event) {
+    event.stopPropagation();
+    this.value = event.target.value;
+    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+  }
+  onChange(event) {
+    event.stopPropagation();
+    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  }
+  render() {
+    return html`
+			<svg
+				part="icon"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				aria-hidden="true"
+			>
+				<circle cx="11" cy="11" r="8"></circle>
+				<path d="m21 21-4.35-4.35"></path>
+			</svg>
+			<input
+				part="input"
+				type="search"
+				placeholder=${this.placeholder ?? ""}
+				aria-label=${this.getAttribute("aria-label") ?? this.placeholder ?? ""}
+				.value=${this.value}
+				?disabled=${present(this.disabled)}
+				@input=${this.onInput}
+				@change=${this.onChange}
+			/>
+		`;
+  }
+};
+var defineSearchField = definer("office-ui-search", () => OfficeUiSearch);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/chrome/backstage.css?raw
+var backstage_default = ":host {\n	position: absolute;\n	inset: 0;\n	z-index: 30;\n	display: none;\n	min-width: 0;\n	background: var(--office-background);\n	color: var(--office-foreground);\n	font-family: var(--office-font);\n}\n:host([open]) {\n	display: block;\n}\n.frame {\n	display: flex;\n	height: 100%;\n	min-width: 0;\n}\nnav {\n	display: flex;\n	flex: 0 0 var(--office-backstage-nav-width);\n	flex-direction: column;\n	padding: var(--office-space-3) 0;\n	overflow: auto;\n	background: var(--office-backstage-nav-background);\n	color: var(--office-backstage-nav-foreground);\n}\nnav button {\n	border: 0;\n	border-radius: 0;\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	text-align: start;\n	cursor: pointer;\n}\n.back {\n	width: var(--office-backstage-back-size);\n	min-height: var(--office-backstage-back-size);\n	margin: 0 0 var(--office-space-3) var(--office-space-4);\n	padding: 0;\n	border: calc(var(--office-border-width-thick) * 0.75) solid currentColor;\n	border-radius: 50%;\n	font-size: var(--office-font-size-xl);\n	text-align: center;\n}\n.item {\n	min-height: var(--office-backstage-item-height);\n	padding: var(--office-space-1-5) var(--office-space-6);\n	font-size: var(--office-font-size-md);\n}\n.item:hover:enabled,\n.item[aria-current='page'] {\n	background: var(--office-backstage-item-hover);\n}\n.item:disabled {\n	opacity: 0.55;\n	cursor: default;\n}\nnav button:focus-visible {\n	outline: var(--office-focus-width) solid currentColor;\n	outline-offset: calc(-1 * var(--office-focus-width));\n}\n.items {\n	display: flex;\n	flex-direction: column;\n}\n.footer {\n	display: flex;\n	flex-direction: column;\n	margin-top: auto;\n	padding-top: var(--office-space-4);\n}\n.body {\n	flex: 1;\n	min-width: 0;\n	overflow: auto;\n	padding: var(--office-backstage-padding);\n}\n@media (max-width: 760px) {\n	.frame {\n		flex-direction: column;\n	}\n	nav {\n		flex: none;\n		flex-direction: row;\n		flex-wrap: wrap;\n		padding: var(--office-space-1-5);\n	}\n	.back {\n		margin: var(--office-space-1);\n	}\n	.item {\n		min-height: var(--office-target-size-touch);\n		padding: var(--office-space-1-5) var(--office-space-3);\n	}\n	.items,\n	.footer {\n		flex-direction: row;\n		flex-wrap: wrap;\n		margin-top: 0;\n		padding-top: 0;\n	}\n	.body {\n		padding: var(--office-space-4);\n	}\n}\n@media (forced-colors: active) {\n	nav {\n		border-inline-end: var(--office-border-width) solid CanvasText;\n	}\n	.item[aria-current='page'] {\n		outline: var(--office-focus-width) solid Highlight;\n	}\n}\n";
+
+// src/chrome/backstage.ts
+var OfficeUiBackstage = class extends OfficeElement {
+  static styles = controlStyles(backstage_default);
+  static properties = {
+    open: flag,
+    items: { attribute: false },
+    label: { type: String },
+    backLabel: { attribute: "back-label", type: String },
+    // The pages hide against `selected`, which reads as '' when unset, so it has an accessor.
+    selected: { type: String, noAccessor: true }
+  };
+  picked = null;
+  constructor() {
+    super();
+    this.open = false;
+    this.items = [];
+    this.label = null;
+    this.backLabel = null;
+    this.addEventListener("keydown", (event) => {
+      if (event.key !== "Escape" || !present(this.open)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      this.requestClose("escape");
+    });
+  }
+  get selected() {
+    return this.picked ?? "";
+  }
+  set selected(id) {
+    this.picked = id;
+    this.reflectAttribute("selected", id, {});
+    this.requestUpdate("selected");
+  }
+  /** 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 (!present(this.open)) return;
+    this.open = false;
+    this.fire("office-backstage-close", { reason: "api" });
+  }
+  page(id) {
+    return [...this.children].find(
+      (child) => child instanceof HTMLElement && child.dataset.backstagePage === id
+    );
+  }
+  button(id) {
+    return [...this.renderRoot.querySelectorAll("[data-backstage-item]")].find(
+      (button) => button.dataset.backstageItem === id
+    ) ?? null;
+  }
+  choose(id) {
+    if (this.fire("office-backstage-select", { id }, true) && this.page(id)) this.selected = id;
+  }
+  requestClose(reason) {
+    if (this.fire("office-backstage-close", { reason }, true)) this.open = false;
+  }
+  onNavClick(event) {
+    const item = event.target.closest?.("[data-backstage-item]");
+    if (item && !item.disabled) this.choose(item.dataset.backstageItem);
+  }
+  /** Exactly the selected page of the light DOM shows. */
+  syncPages() {
+    for (const child of this.children)
+      if (child instanceof HTMLElement && child.dataset.backstagePage !== void 0)
+        child.hidden = child.dataset.backstagePage !== this.selected;
+  }
+  updated() {
+    this.syncPages();
+  }
+  item(item) {
+    return html`<button
+			type="button"
+			class="item"
+			data-backstage-item=${item.id}
+			title=${ifDefined(item.title || void 0)}
+			aria-current=${ifDefined(item.id === this.selected ? "page" : void 0)}
+			?disabled=${Boolean(item.disabled)}
+			>${item.label}</button
+		>`;
+  }
+  render() {
+    const label = this.label ?? "File";
+    const back = this.backLabel ?? "Back";
+    return html`
+			<div class="frame" role="dialog" aria-modal="true" aria-label=${label}>
+				<nav part="nav" aria-label=${label} @click=${this.onNavClick}>
+					<button
+						type="button"
+						class="back"
+						data-backstage="back"
+						aria-label=${back}
+						title="${back} (Esc)"
+						@click=${() => this.requestClose("back")}
+						>←</button
+					>
+					<div class="items"
+						>${this.items.filter((item) => item.group !== "footer").map((item) => this.item(item))}</div
+					>
+					<div class="footer"
+						>${this.items.filter((item) => item.group === "footer").map((item) => this.item(item))}</div
+					>
+				</nav>
+				<div class="body" part="body"><slot @slotchange=${this.syncPages}></slot></div>
+			</div>
+		`;
+  }
+};
+var defineBackstage = definer("office-ui-backstage", () => OfficeUiBackstage);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/chrome/find-bar.css?raw
+var find_bar_default = ":host {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	min-height: var(--office-find-bar-height);\n	padding: var(--office-space-1) var(--office-space-2) var(--office-space-1) var(--office-space-3);\n	border-bottom: var(--office-border-width) solid var(--office-border);\n	background: var(--office-surface);\n	color: var(--office-foreground);\n	font: var(--office-font-size-sm) var(--office-font);\n}\n:host(:not([open])) {\n	display: none;\n}\n[role='search'] {\n	display: flex;\n	flex: 1;\n	align-items: center;\n	gap: var(--office-space-1);\n	min-width: 0;\n	max-width: var(--office-find-max-width);\n}\nlabel {\n	display: flex;\n	flex: 1;\n	align-items: center;\n	gap: var(--office-space-1-5);\n	min-width: 0;\n}\ninput {\n	flex: 1;\n	min-width: 0;\n	min-height: var(--office-input-height);\n	padding: var(--office-space-0) var(--office-space-1-5);\n	font: inherit;\n	color: inherit;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-sm);\n	background: var(--office-background);\n}\nbutton {\n	min-height: var(--office-input-height);\n	padding: var(--office-space-0) var(--office-space-2);\n	font: inherit;\n	color: inherit;\n	cursor: pointer;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-sm);\n	background: var(--office-background);\n}\nbutton:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\n.status {\n	flex: 1;\n	min-width: 0;\n	overflow: hidden;\n	white-space: nowrap;\n	text-overflow: ellipsis;\n	color: var(--office-muted-foreground);\n}\n.close {\n	margin-inline-start: auto;\n	width: var(--office-target-size);\n	padding: 0;\n	border-color: transparent;\n	background: transparent;\n	font-size: var(--office-font-size-xl);\n	line-height: 1;\n}\ninput:focus-visible,\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\n@media (max-width: 760px) {\n	:host {\n		flex-wrap: wrap;\n	}\n	[role='search'] {\n		flex-wrap: wrap;\n	}\n}\n";
+
+// src/chrome/find-bar.ts
+var OfficeUiFindBar = class extends OfficeElement {
+  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+  static styles = controlStyles(find_bar_default);
+  static properties = {
+    open: flag,
+    disabled: flag,
+    navigationDisabled: { attribute: "navigation-disabled", ...flag },
+    label: { type: String },
+    inputLabel: { attribute: "input-label", type: String },
+    placeholder: { type: String },
+    maxlength: { type: String },
+    previousLabel: { attribute: "previous-label", type: String },
+    nextLabel: { attribute: "next-label", type: String },
+    closeLabel: { attribute: "close-label", type: String },
+    value: { attribute: false },
+    status: { attribute: false },
+    statusTitle: { attribute: false }
+  };
+  constructor() {
+    super();
+    this.open = false;
+    this.disabled = false;
+    this.navigationDisabled = false;
+    this.label = null;
+    this.inputLabel = null;
+    this.placeholder = null;
+    this.maxlength = null;
+    this.previousLabel = null;
+    this.nextLabel = null;
+    this.closeLabel = null;
+    this.value = "";
+    this.status = "";
+    this.statusTitle = "";
+  }
+  get input() {
+    return this.renderRoot.querySelector("input");
+  }
+  /** 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 (!present(this.open)) return;
+    this.open = false;
+    this.fire("office-find-close", {});
+  }
+  step(direction) {
+    if (!present(this.navigationDisabled)) this.fire("office-find-step", { direction });
+  }
+  onInput(event) {
+    this.value = event.target.value;
+    this.fire("office-find-input", { query: this.value });
+  }
+  onKey(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.value) {
+        this.value = "";
+        this.fire("office-find-input", { query: "" });
+      } else this.close();
+    }
+  }
+  render() {
+    const max = Number(this.maxlength);
+    const disabled = present(this.disabled);
+    const stuck = present(this.navigationDisabled) || disabled;
+    const close = this.closeLabel ?? "Close Find";
+    return html`
+			<div role="search" aria-label=${this.label ?? "Find"}>
+				<label>
+					Find
+					<input
+						type="search"
+						autocomplete="off"
+						spellcheck="false"
+						aria-describedby="status"
+						aria-label=${this.inputLabel ?? "Find"}
+						placeholder=${this.placeholder ?? ""}
+						maxlength=${ifDefined(Number.isInteger(max) && max > 0 ? String(max) : void 0)}
+						.value=${live(this.value)}
+						?disabled=${disabled}
+						@input=${this.onInput}
+						@keydown=${this.onKey}
+					/>
+				</label>
+				<button
+					type="button"
+					data-action="previous"
+					aria-label=${this.previousLabel ?? "Previous result"}
+					?disabled=${stuck}
+					@click=${() => this.step("previous")}
+					>Previous</button
+				>
+				<button
+					type="button"
+					data-action="next"
+					aria-label=${this.nextLabel ?? "Next result"}
+					?disabled=${stuck}
+					@click=${() => this.step("next")}
+					>Next</button
+				>
+				<span
+					id="status"
+					class="status"
+					role="status"
+					aria-live="polite"
+					aria-atomic="true"
+					title=${this.statusTitle}
+					>${this.status}</span
+				>
+			</div>
+			<button
+				type="button"
+				class="close"
+				data-action="close"
+				aria-label=${close}
+				title="${close} (Esc)"
+				@click=${this.close}
+				>×</button
+			>
+		`;
+  }
+};
+var defineFindBar = definer("office-ui-find-bar", () => OfficeUiFindBar);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/chrome/print-preview.css?raw
+var print_preview_default = ":host {\n	display: block;\n	max-width: var(--office-print-preview-width);\n	font: var(--office-font-size-sm) var(--office-font);\n	color: var(--office-foreground);\n}\n.sheet {\n	padding: var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-border);\n	background: var(--office-paper);\n	box-shadow: var(--office-shadow-sm);\n}\n.sheet > * {\n	display: block;\n	width: 100%;\n	height: auto;\n}\n.empty {\n	color: var(--office-muted-foreground);\n}\n.nav {\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-2);\n	margin-top: var(--office-space-2);\n}\n.nav[hidden] {\n	display: none;\n}\nbutton {\n	min-width: var(--office-target-size);\n	min-height: var(--office-target-size);\n	font: inherit;\n	color: inherit;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-sm);\n	background: var(--office-background);\n	cursor: pointer;\n}\nbutton:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\n";
+
+// src/chrome/print-preview.ts
+var OfficeUiPrintPreview = class extends OfficeElement {
+  static styles = controlStyles(print_preview_default);
+  static properties = {
+    // `pages` clamps the index and `index` clamps itself to the pages, so both have accessors.
+    label: { type: String },
+    emptyLabel: { attribute: "empty-label", type: String }
+  };
+  list = [];
+  current = 0;
+  clone;
+  constructor() {
+    super();
+    this.label = null;
+    this.emptyLabel = null;
+  }
+  get pages() {
+    return this.list;
+  }
+  set pages(value) {
+    this.list = value;
+    this.current = Math.min(this.current, Math.max(0, value.length - 1));
+    this.requestUpdate("pages");
+  }
+  get index() {
+    return this.current;
+  }
+  set index(value) {
+    const next = Math.max(0, Math.min(this.list.length - 1, Math.trunc(value) || 0));
+    if (next === this.current) return;
+    this.current = next;
+    this.requestUpdate("index");
+  }
+  go(index) {
+    const before = this.current;
+    this.index = index;
+    if (this.current !== before) this.fire("office-print-preview-page", { index: this.current });
+  }
+  /** The shown page is an inert copy: no tabindex, no inline style. */
+  willUpdate(changed) {
+    if (!changed.has("pages") && !changed.has("index") && this.clone !== void 0)
+      return;
+    const page = this.list[this.current];
+    if (!page) {
+      this.clone = void 0;
+      return;
+    }
+    const clone = this.ownerDocument.importNode(page, true);
+    if (clone instanceof Element) {
+      clone.removeAttribute("style");
+      clone.removeAttribute("tabindex");
+      clone.querySelectorAll("[tabindex]").forEach((node) => node.removeAttribute("tabindex"));
+    }
+    this.clone = clone;
+  }
+  render() {
+    const total = this.list.length;
+    const label = this.label ?? "Print preview";
+    return html`
+			<div
+				class="sheet"
+				role="img"
+				aria-label=${total > 1 ? `${label}, page ${this.current + 1} of ${total}` : label}
+				>${this.clone ?? html`<p class="empty">${this.emptyLabel ?? "Nothing to print."}</p>`}</div
+			>
+			<div class="nav" ?hidden=${total < 2}>
+				<button
+					type="button"
+					aria-label="Previous page"
+					?disabled=${this.current === 0}
+					@click=${() => this.go(this.current - 1)}
+					>‹</button
+				>
+				<span>${this.current + 1} of ${total}</span>
+				<button
+					type="button"
+					aria-label="Next page"
+					?disabled=${this.current >= total - 1}
+					@click=${() => this.go(this.current + 1)}
+					>›</button
+				>
+			</div>
+		`;
+  }
+};
+var definePrintPreview = definer("office-ui-print-preview", () => OfficeUiPrintPreview);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/ribbon/ribbon-tabs.css?raw
+var ribbon_tabs_default = ":host {\n	display: block;\n	min-width: 0;\n}\n.head {\n	display: flex;\n	align-items: stretch;\n	min-width: 0;\n	border-bottom: var(--office-border-width) solid var(--office-border);\n}\n.file {\n	flex: none;\n	min-height: var(--office-ribbon-tab-height);\n	margin: 0 var(--office-space-1) 0 0;\n	padding: var(--office-space-1-5) var(--office-space-4);\n	border: 0;\n	border-radius: 0;\n	background: var(--office-accent);\n	color: var(--office-accent-foreground);\n	font: inherit;\n	font-size: var(--office-font-size);\n	cursor: pointer;\n}\n.file:hover {\n	background: var(--office-accent-hover);\n}\n.file[hidden] {\n	display: none;\n}\n[role='tablist'] {\n	display: flex;\n	flex: 0 1 auto;\n	align-items: stretch;\n	min-width: 0;\n	overflow-x: auto;\n	scrollbar-width: none;\n}\n[role='tab'] {\n	position: relative;\n	flex: none;\n	min-height: var(--office-ribbon-tab-height);\n	padding: var(--office-space-1-5) var(--office-space-3);\n	border: 0;\n	border-radius: 0;\n	background: transparent;\n	color: var(--office-muted-foreground);\n	font: inherit;\n	font-size: var(--office-font-size);\n	cursor: pointer;\n}\n[role='tab']:hover {\n	color: var(--office-foreground);\n	background: var(--office-surface);\n}\n[role='tab'][aria-selected='true'] {\n	color: var(--office-accent);\n}\n[role='tab'][aria-selected='true']::after {\n	content: '';\n	position: absolute;\n	inset: auto 0 0;\n	height: var(--office-tab-indicator-width);\n	background: var(--office-accent);\n}\n.file:focus-visible,\n[role='tab']:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(-1 * var(--office-focus-width));\n}\n::slotted([slot='search']) {\n	align-self: center;\n}\n\n@media (max-width: 760px), (pointer: coarse) {\n	.file,\n	[role='tab'] {\n		min-height: var(--office-target-size-touch);\n	}\n	.file {\n		min-width: var(--office-ribbon-file-min-width);\n	}\n}\n@media (forced-colors: active) {\n	.file {\n		border: var(--office-border-width) solid ButtonText;\n	}\n	[role='tab'][aria-selected='true']::after {\n		background: Highlight;\n	}\n}\n";
+
+// src/ribbon/ribbon-tabs.ts
+var OfficeUiRibbon = class extends OfficeElement {
+  static styles = controlStyles(ribbon_tabs_default);
+  static properties = {
+    // The default selection is the first panel, so `selected` has an accessor below.
+    selected: { type: String, noAccessor: true },
+    label: { type: String },
+    fileLabel: { attribute: "file-label", type: String },
+    noFile: { attribute: "no-file", ...flag },
+    fileExpanded: { attribute: "file-expanded", type: String },
+    fileKeytip: { attribute: "file-keytip", type: String },
+    tabs: { state: true }
+  };
+  chosen = null;
+  constructor() {
+    super();
+    this.label = null;
+    this.fileLabel = null;
+    this.noFile = false;
+    this.fileExpanded = null;
+    this.fileKeytip = null;
+    this.tabs = [];
+  }
+  get selected() {
+    return this.chosen ?? this.panels()[0]?.dataset.ribbonTab ?? "";
+  }
+  set selected(tab) {
+    this.chosen = tab;
+    this.reflectAttribute("selected", tab, {});
+    this.requestUpdate("selected");
+  }
+  /** Focus the File button (for example when the backstage it opened closes). */
+  focusFile() {
+    this.renderRoot.querySelector(".file")?.focus();
+  }
+  /** Focus the selected tab. */
+  focusTab() {
+    this.renderRoot.querySelector('[role="tab"][aria-selected="true"]')?.focus();
+  }
+  panels() {
+    return [...this.children].filter(
+      (child) => child instanceof HTMLElement && !!child.dataset.ribbonTab
+    );
+  }
+  /** Read the tabs off the panels (on connection and whenever the slotted panels change). */
+  build() {
+    this.tabs = this.panels().map((panel) => {
+      const id = panel.dataset.ribbonTab;
+      panel.setAttribute("role", "tabpanel");
+      panel.setAttribute("aria-label", panel.dataset.label ?? id);
+      return {
+        id,
+        label: panel.dataset.label ?? id,
+        ...panel.dataset.tabKeytip ? {
+          keytip: panel.dataset.tabKeytip,
+          ...panel.id ? { keytipPanel: panel.id } : {}
+        } : {}
+      };
+    });
+  }
+  choose(tab) {
+    if (tab === this.selected) return;
+    if (this.fire("office-ribbon-select", { tab }, true)) this.selected = tab;
+  }
+  onTabClick(event) {
+    const tab = event.target.closest?.('[role="tab"]');
+    if (tab) this.choose(tab.dataset.tab);
+  }
+  onKey(event) {
+    const tabs = [...this.renderRoot.querySelectorAll('[role="tab"]')];
+    const focused = event.target.closest?.('[role="tab"]');
+    const at = focused ? tabs.indexOf(focused) : 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();
+  }
+  connectedCallback() {
+    this.build();
+    super.connectedCallback();
+  }
+  /** Exactly one panel shows. */
+  updated() {
+    const selected = this.selected;
+    for (const panel of this.panels()) panel.hidden = panel.dataset.ribbonTab !== selected;
+  }
+  render() {
+    const selected = this.selected;
+    return html`
+			<div class="head" part="head">
+				<slot name="quick-access"></slot>
+				<button
+					class="file"
+					part="file"
+					type="button"
+					aria-haspopup="dialog"
+					aria-expanded=${String(this.fileExpanded === "true")}
+					data-keytip=${ifDefined(this.fileKeytip ?? void 0)}
+					?hidden=${present(this.noFile)}
+					@click=${() => this.fire("office-ribbon-file", {})}
+					>${this.fileLabel ?? "File"}</button
+				>
+				<div
+					role="tablist"
+					part="tabs"
+					aria-label=${this.label ?? "Ribbon"}
+					@click=${this.onTabClick}
+					@keydown=${this.onKey}
+				>
+					${this.tabs.map(
+      (tab) => html`<button
+							type="button"
+							role="tab"
+							id="tab-${tab.id}"
+							data-tab=${tab.id}
+							data-keytip=${ifDefined(tab.keytip)}
+							data-keytip-panel=${ifDefined(tab.keytipPanel)}
+							aria-selected=${String(tab.id === selected)}
+							tabindex=${tab.id === selected ? 0 : -1}
+							>${tab.label}</button
+						>`
+    )}
+				</div>
+				<slot name="search"></slot>
+				<slot name="end"></slot>
+			</div>
+			<slot @slotchange=${this.build}></slot>
+		`;
+  }
+};
+var defineRibbon = definer("office-ui-ribbon", () => OfficeUiRibbon);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/ribbon/ribbon-section.css?raw
+var ribbon_section_default = ":host {\n	display: inline-flex;\n	align-items: stretch;\n}\n::slotted(*) {\n	flex: none;\n}\n";
+
+// src/ribbon/ribbon-section.ts
+var COLUMN_STYLE = { display: "flex", flexDirection: "column", gap: tok("--office-space-0") };
+function setOptional(el, name, value) {
+  if (value === void 0) el.removeAttribute(name);
+  else el.setAttribute(name, String(value));
+}
+function syncCommand(el, command, idAttribute) {
+  el.setAttribute(idAttribute, command.id);
+  el.setAttribute("label", command.label);
+  el.setAttribute("title", command.title ?? command.label);
+  el.setAttribute("icon", command.icon);
+  if (command.badge) el.setAttribute("badge", String(command.badge));
+  else el.removeAttribute("badge");
+  if (command.size) el.setAttribute("size", command.size);
+  for (const name of ["disabled", "active", "compact", "hidden", "caret"])
+    el.toggleAttribute(name, command[name] === true);
+  setOptional(el, "pressed", command.pressed);
+  setOptional(el, "expanded", command.expanded);
+}
+var OfficeUiRibbonSection = class extends OfficeElement {
+  static styles = controlStyles(ribbon_section_default);
+  static groupTag = "office-ui-ribbon-group";
+  static commandTag = "office-ui-button";
+  static groupIdAttribute = "data-ribbon-group";
+  static commandIdAttribute = "command";
+  #groups = [];
+  #groupNodes = /* @__PURE__ */ new Map();
+  #commandNodes = /* @__PURE__ */ new Map();
+  render() {
+    return html`<slot></slot>`;
+  }
+  get groups() {
+    return this.#groups;
+  }
+  set groups(value) {
+    this.#groups = value ?? [];
+    this.#render();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#render();
+  }
+  /**
+   * The groups and commands are light-DOM children keyed by id and patched in place (so focus
+   * and a product's tags and id attributes survive), which a shadow template cannot express.
+   */
+  #render() {
+    const statics = this.constructor;
+    const doc = this.ownerDocument;
+    const model = this.#groups;
+    const wantedGroups = new Set(model.map((group) => group.id));
+    const wantedCommands = new Set(model.flatMap((g) => g.commands.map((c) => c.id)));
+    for (const [id, el] of this.#commandNodes)
+      if (!wantedCommands.has(id)) {
+        el.remove();
+        this.#commandNodes.delete(id);
+      }
+    for (const [id, group] of this.#groupNodes)
+      if (!wantedGroups.has(id)) {
+        group.el.remove();
+        this.#groupNodes.delete(id);
+      }
+    for (const [index, group] of model.entries()) {
+      let node = this.#groupNodes.get(group.id);
+      if (!node) {
+        node = { el: doc.createElement(statics.groupTag), columns: /* @__PURE__ */ new Map() };
+        this.#groupNodes.set(group.id, node);
+      }
+      node.el.setAttribute(statics.groupIdAttribute, group.id);
+      node.el.setAttribute("label", group.label);
+      if (this.children[index] !== node.el)
+        this.insertBefore(node.el, this.children[index] ?? null);
+      const offsets = /* @__PURE__ */ new Map();
+      for (const command of group.commands) {
+        let parent = node.el;
+        if (command.column !== void 0) {
+          let column = node.columns.get(command.column);
+          if (!column) {
+            column = doc.createElement("div");
+            Object.assign(column.style, COLUMN_STYLE);
+            node.columns.set(command.column, column);
+            node.el.append(column);
+          }
+          parent = column;
+        }
+        let el = this.#commandNodes.get(command.id);
+        if (!el) {
+          el = doc.createElement(statics.commandTag);
+          this.#commandNodes.set(command.id, el);
+        }
+        syncCommand(el, command, statics.commandIdAttribute);
+        const offset = offsets.get(parent) ?? 0;
+        if (parent.children[offset] !== el)
+          parent.insertBefore(el, parent.children[offset] ?? null);
+        offsets.set(parent, offset + 1);
+      }
+    }
+  }
+};
+var defineRibbonSection = definer("office-ui-ribbon-section", () => OfficeUiRibbonSection);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/ribbon/gallery.css?raw
+var gallery_default = "[data-office-gallery] {\n	display: inline-flex;\n	position: relative;\n	flex: none;\n	color: var(--office-foreground);\n}\n[data-office-gallery] .gallery-view {\n	display: contents;\n}\n[data-office-gallery] button {\n	box-sizing: border-box;\n	font: inherit;\n	color: inherit;\n	cursor: pointer;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius);\n	background: var(--office-background);\n}\n[data-office-gallery] button:hover:not(:disabled) {\n	background: var(--office-selected);\n}\n[data-office-gallery] button:disabled {\n	opacity: 0.4;\n	cursor: not-allowed;\n}\n[data-office-gallery] button:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n[data-office-gallery] .trigger {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-1-5);\n	min-height: var(--office-gallery-trigger-height);\n	padding: 0 var(--office-space-1-5);\n	font-size: var(--office-font-size-sm);\n	white-space: nowrap;\n}\n[data-office-gallery]:not([mode='inline']) .trigger {\n	border-color: transparent;\n	background: transparent;\n}\n[data-office-gallery] .trigger svg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n[data-office-gallery][mode='inline'] .trigger,\n[data-office-gallery][chevron-only] .trigger {\n	align-self: stretch;\n	padding: 0 var(--office-space-1);\n}\n[data-office-gallery] .strip {\n	display: flex;\n	gap: var(--office-space-0);\n	padding: var(--office-space-0);\n	align-items: center;\n}\n[data-office-gallery] .tile {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	flex: none;\n	padding: var(--office-space-0);\n}\n[data-office-gallery] .tile[aria-pressed='true'] {\n	border: var(--office-border-width-thick) solid var(--office-accent);\n	background: color-mix(in srgb, var(--office-accent) 15%, var(--office-background));\n}\n[data-office-gallery] .tile svg {\n	max-width: 100%;\n	max-height: 100%;\n}\n[data-office-gallery][mode='inline'] .strip {\n	gap: 0;\n	border: var(--office-border-width) solid var(--office-border);\n	border-inline-end: 0;\n	border-radius: var(--office-radius-sm) 0 0 var(--office-radius-sm);\n	background: var(--office-gallery-strip-background);\n}\n[data-office-gallery][mode='inline'] .trigger {\n	border-radius: 0 var(--office-radius-sm) var(--office-radius-sm) 0;\n	background: var(--office-gallery-strip-background);\n}\n[data-office-gallery] .trigger.command {\n	border-color: transparent;\n	background: transparent;\n	justify-content: flex-start;\n}\n[data-office-gallery] .trigger.command:hover:not(:disabled) {\n	border-color: var(--office-border);\n	background: var(--office-selected);\n}\n[data-office-gallery] .trigger.command svg {\n	color: var(--office-command-icon-color);\n}\n[data-office-gallery] .trigger.command-large {\n	flex-direction: column;\n	align-items: center;\n	justify-content: flex-start;\n	gap: var(--office-space-0);\n	min-width: var(--office-gallery-command-min-width);\n	max-width: var(--office-gallery-command-max-width);\n	height: var(--office-gallery-command-height);\n	padding: var(--office-space-1);\n	font-size: var(--office-font-size-2xs);\n	line-height: var(--office-line-height-tight);\n	white-space: normal;\n	text-align: center;\n}\n[data-office-gallery] .trigger.command-large svg {\n	width: var(--office-gallery-command-icon);\n	height: var(--office-gallery-command-icon);\n}\n[data-office-gallery] .popup {\n	box-sizing: border-box;\n	position: fixed;\n	z-index: var(--office-z-popover);\n	max-width: calc(100vw - var(--office-space-4));\n	max-height: var(--office-gallery-popup-max-height);\n	overflow: auto;\n	padding: var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	color: var(--office-popover-foreground);\n	box-shadow: var(--office-shadow-lg);\n}\n[data-office-gallery] .popup[hidden] {\n	display: none;\n}\n[data-office-gallery] .grid {\n	display: grid;\n	gap: var(--office-space-1);\n	width: max-content;\n	max-width: 100%;\n}\n[data-office-gallery] .heading {\n	margin: var(--office-space-1) 0 var(--office-space-1-5);\n	font-size: var(--office-font-size-xs);\n	font-weight: var(--office-font-weight-bold);\n}\n[data-office-gallery] .section + .section {\n	margin-top: var(--office-space-2-5);\n}\n@media (pointer: coarse), (max-width: 1023px) {\n	[data-office-gallery] .trigger,\n	[data-office-gallery] .tile {\n		min-height: var(--office-target-size-touch);\n		min-width: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	[data-office-gallery] button,\n	[data-office-gallery] .popup {\n		color: ButtonText;\n		background: Canvas;\n		border-color: ButtonText;\n	}\n	[data-office-gallery] button:disabled {\n		color: GrayText;\n		opacity: 1;\n	}\n	[data-office-gallery] button:focus-visible,\n	[data-office-gallery] .tile[aria-pressed='true'] {\n		outline: var(--office-focus-width) solid Highlight;\n		border-color: Highlight;\n	}\n}\n";
+
+// src/ribbon/gallery-styles.ts
+var GALLERY_LIGHT_CSS = withTokens(gallery_default);
+var injected = /* @__PURE__ */ new WeakSet();
+function attachGalleryStyles(host) {
+  const root = host.getRootNode();
+  if (injected.has(root)) return;
+  const doc = host.ownerDocument;
+  const Sheet = doc.defaultView?.CSSStyleSheet;
+  if (Sheet && "adoptedStyleSheets" in root && "replaceSync" in Sheet.prototype) {
+    try {
+      const sheet = new Sheet();
+      sheet.replaceSync(GALLERY_LIGHT_CSS);
+      root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+      injected.add(root);
+      return;
+    } catch {
+    }
+  }
+  const style = doc.createElement("style");
+  style.dataset.officeGalleryStyles = "";
+  style.textContent = GALLERY_LIGHT_CSS;
+  (root.nodeType === 9 ? doc.head : root).append(style);
+  injected.add(root);
+}
+
+// src/ribbon/safe-svg.ts
+var BLOCKED_ELEMENTS = /* @__PURE__ */ new Set(["script", "foreignobject", "iframe", "object", "embed"]);
+function parseSvgPreview(doc, svg2) {
+  const Parser = doc.defaultView?.DOMParser ?? globalThis.DOMParser;
+  if (typeof Parser !== "function") return null;
+  const parsed = new Parser().parseFromString(svg2, "image/svg+xml");
+  const root = parsed.documentElement;
+  if (root.localName !== "svg" || parsed.getElementsByTagName("parsererror").length > 0)
+    return null;
+  for (const node of Array.from(root.querySelectorAll("*"))) {
+    if (BLOCKED_ELEMENTS.has(node.localName.toLowerCase())) {
+      node.remove();
+      continue;
+    }
+    for (const attribute of Array.from(node.attributes))
+      if (/^on/iu.test(attribute.name) || /^\s*javascript:/iu.test(attribute.value))
+        node.removeAttribute(attribute.name);
+  }
+  for (const attribute of Array.from(root.attributes))
+    if (/^on/iu.test(attribute.name) || /^\s*javascript:/iu.test(attribute.value))
+      root.removeAttribute(attribute.name);
+  return doc.importNode(root, true);
+}
+
+// src/ribbon/gallery.ts
+var HOST_CSS = ":host { display: inline-flex; position: relative; flex: none; }";
+var OfficeUiGallery = class extends OfficeElement {
+  static pickEvent = "office-gallery-pick";
+  static triggerAttribute = "data-gallery";
+  static popupAttribute = "data-gallery-popup";
+  static itemAttribute = "data-gallery-item";
+  static compactAttribute = null;
+  static styles = controlStyles(HOST_CSS);
+  /** `mode`, `chevron-only` and `icon` are read from the attributes, as before. */
+  static get observedAttributes() {
+    return [...super.observedAttributes, "mode", "chevron-only", "icon"];
+  }
+  model;
+  locked = false;
+  opened = false;
+  attributeChangedCallback(name, old, value) {
+    super.attributeChangedCallback(name, old, value);
+    this.requestUpdate();
+  }
+  get state() {
+    return this.model;
+  }
+  set state(value) {
+    this.model = value ?? void 0;
+    this.requestUpdate("state");
+  }
+  get disabled() {
+    return this.locked;
+  }
+  set disabled(value) {
+    this.locked = present(value);
+    this.requestUpdate("disabled");
+  }
+  get open() {
+    return this.opened;
+  }
+  set open(value) {
+    const next = present(value) && !this.unavailable();
+    if (next === this.opened) return;
+    this.opened = next;
+    this.cleanup();
+    this.requestUpdate("open");
+    if (next && this.isConnected) {
+      const doc = this.ownerDocument;
+      doc.addEventListener("pointerdown", this.onOutside, true);
+      doc.addEventListener("keydown", this.onEscape);
+      doc.defaultView?.addEventListener("resize", this.position);
+      doc.addEventListener("scroll", this.position, true);
+      this.position();
+    }
+  }
+  close() {
+    this.open = false;
+  }
+  get trigger() {
+    this.ensureRendered();
+    return this.querySelector(".trigger");
+  }
+  /** The open popup; while closed it is not in the DOM, so this is a detached hidden placeholder. */
+  get popup() {
+    this.ensureRendered();
+    return this.querySelector(".popup") ?? this.closedPopup;
+  }
+  closedPopup = Object.assign(this.ownerDocument.createElement("div"), {
+    className: "popup",
+    hidden: true
+  });
+  /** The trigger glyph: `command.icon` for a command, else the `icon` attribute. */
+  triggerIcon() {
+    const name = this.model?.command?.icon ?? this.getAttribute("icon");
+    if (!name) return null;
+    const svg2 = createIconSvg(this.ownerDocument);
+    return paintIcon(svg2, name) ? svg2 : null;
+  }
+  connectedCallback() {
+    this.setAttribute("data-office-gallery", "");
+    attachGalleryStyles(this);
+    super.connectedCallback();
+    this.markHost();
+  }
+  /** Host attributes (never written before the element is connected). */
+  markHost() {
+    if (!this.isConnected) return;
+    this.toggleAttribute("data-command", Boolean(this.model?.command));
+    this.toggleAttribute("data-command-large", Boolean(this.model?.command?.large));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.close();
+    this.cleanup();
+  }
+  unavailable() {
+    const state = this.model;
+    return this.locked || !state || state.disabled === true || !state.sections.some((section) => section.items.length > 0);
+  }
+  pick(itemId) {
+    const state = this.model;
+    if (this.unavailable() || !state?.sections.some((section) => section.items.some((item) => item.id === itemId)))
+      return;
+    this.close();
+    this.trigger.focus();
+    this.fire(this.constructor.pickEvent, { gallery: state.id, itemId });
+  }
+  onTrigger() {
+    if (this.model?.command) {
+      this.pick(this.model.sections[0]?.items[0]?.id ?? "");
+      return;
+    }
+    this.open = !this.open;
+  }
+  onKey(event) {
+    const trigger = this.trigger;
+    if (event.key === "Escape" && this.open) {
+      event.stopPropagation();
+      event.preventDefault();
+      this.close();
+      trigger.focus();
+    }
+    if (event.key === "ArrowDown" && event.target === trigger) {
+      event.stopPropagation();
+      event.preventDefault();
+      this.open = true;
+      this.popup.querySelector("button:not(:disabled)")?.focus();
+    }
+    if (event.key === "Enter" || event.key === " ") event.stopPropagation();
+  }
+  onOutside = (event) => {
+    if (!event.composedPath().includes(this)) this.close();
+  };
+  onEscape = (event) => {
+    if (event.key !== "Escape") return;
+    event.stopPropagation();
+    this.close();
+    this.trigger.focus();
+  };
+  position = () => {
+    const window = this.ownerDocument.defaultView;
+    const popup = this.querySelector(".popup");
+    if (!window || !popup) return;
+    const anchor = this.trigger.getBoundingClientRect();
+    const box = popup.getBoundingClientRect();
+    const margin = 8;
+    popup.style.left = `${Math.max(margin, Math.min(anchor.left, window.innerWidth - box.width - margin))}px`;
+    popup.style.top = `${Math.max(margin, Math.min(anchor.bottom + 4, window.innerHeight - box.height - margin))}px`;
+  };
+  cleanup() {
+    const doc = this.ownerDocument;
+    doc.removeEventListener("pointerdown", this.onOutside, true);
+    doc.removeEventListener("keydown", this.onEscape);
+    doc.defaultView?.removeEventListener("resize", this.position);
+    doc.removeEventListener("scroll", this.position, true);
+  }
+  // ---- Light-DOM template ---------------------------------------------------------------
+  tile(item, width, height, disabled) {
+    const { itemAttribute, compactAttribute } = this.constructor;
+    const preview = item.preview ? parseSvgPreview(this.ownerDocument, item.preview) : null;
+    return html$1`<button
+			type="button"
+			class="tile"
+			${unsafeStatic(compactAttribute ?? "")}
+			${unsafeStatic(itemAttribute)}=${item.id}
+			?disabled=${disabled}
+			aria-pressed=${String(item.applied === true)}
+			aria-label=${item.label}
+			title=${item.label}
+			style="width:${width + 6}px;height:${height + 6}px"
+			@click=${() => this.pick(item.id)}
+		>${preview}</button>`;
+  }
+  lightTemplate() {
+    const statics = this.constructor;
+    const state = this.model;
+    const disabled = this.unavailable();
+    const inline = this.getAttribute("mode") === "inline" && !this.hasAttribute("chevron-only");
+    const chevronOnly = this.hasAttribute("chevron-only");
+    const command = state?.command;
+    const title = state?.label ?? "";
+    const first = state?.sections[0];
+    const inlineItems = state?.inline ?? first?.items ?? [];
+    const triggerTitle = command ? command.hint ?? title : inline ? state?.moreLabel ?? `More ${title}` : title;
+    const icon = this.triggerIcon() ?? createIconSvg(this.ownerDocument);
+    const trigger = html$1`<button
+			type="button"
+			class="trigger${command ? " command" : ""}${command?.large ? " command-large" : ""}"
+			${unsafeStatic(statics.compactAttribute ?? "")}
+			${unsafeStatic(statics.triggerAttribute)}=${ifDefined(state?.id)}
+			title=${triggerTitle}
+			aria-label=${command ? title : triggerTitle}
+			aria-haspopup=${ifDefined(command ? void 0 : "dialog")}
+			aria-expanded=${ifDefined(command || !state ? void 0 : String(this.opened))}
+			?disabled=${!state || disabled}
+			@click=${this.onTrigger}
+		>${command || !inline && !chevronOnly ? html`${icon}<span>${title}</span>` : ""}${command ? "" : html`<span aria-hidden="true">⌄</span>`}</button>`;
+    const popup = html$1`<div
+			class="popup"
+			role="dialog"
+			aria-label=${title}
+			${unsafeStatic(statics.popupAttribute)}=${ifDefined(state?.id)}
+		>${(state?.sections ?? []).map((section) => this.section(section, disabled))}</div>`;
+    return html`<span class="gallery-view" @keydown=${this.onKey}>
+			<div class="strip" ?hidden=${!inline} style=${inline ? "" : "display:none"}>
+				${inline ? repeat(
+      inlineItems,
+      (item) => item.id,
+      (item) => this.tile(item, first?.tileWidth ?? 40, first?.tileHeight ?? 30, disabled)
+    ) : ""}
+			</div>
+			${trigger}${this.opened ? popup : ""}
+		</span>`;
+  }
+  section(section, disabled) {
+    return html`<section class="section">
+			${section.title ? html`<div class="heading">${section.title}</div>` : ""}
+			<div class="grid" style="grid-template-columns:repeat(${section.columns}, minmax(0, 1fr))">
+				${repeat(
+      section.items,
+      (item) => item.id,
+      (item) => this.tile(item, section.tileWidth, section.tileHeight, disabled)
+    )}
+			</div>
+		</section>`;
+  }
+  /** The tiles are light-DOM children of the host, shown through this slot. */
+  render() {
+    return html`<slot></slot>`;
+  }
+  updated() {
+    const state = this.model;
+    if (state && this.unavailable() && this.opened) this.close();
+    if (this.detachedFirstRender) return;
+    render(this.lightTemplate(), this, { host: this });
+    this.markHost();
+    if (this.opened) this.position();
+  }
+};
+var defineGallery = definer("office-ui-gallery", () => OfficeUiGallery);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/chrome/ruler.css?raw
+var ruler_default = ":host {\n	display: block;\n	box-sizing: border-box;\n	background: var(--office-background);\n	color: var(--office-muted-foreground);\n	overflow: hidden;\n	font-size: var(--office-font-size-3xs);\n	font-family: var(--office-font);\n}\n:host(:not([orientation='vertical'])) {\n	height: var(--office-ruler-size);\n	border-bottom: var(--office-border-width) solid var(--office-border);\n}\n:host([orientation='vertical']) {\n	width: var(--office-ruler-size);\n	border-inline-end: var(--office-border-width) solid var(--office-border);\n}\ncanvas {\n	display: block;\n	width: 100%;\n	height: 100%;\n}\n";
+
+// src/chrome/ruler.ts
+function rulerDivisions(unitPixels) {
+  return unitPixels >= 192 ? 16 : unitPixels >= 96 ? 8 : unitPixels >= 48 ? 4 : 2;
+}
+var OfficeUiRuler = class extends OfficeElement {
+  static styles = controlStyles(ruler_default);
+  static properties = {
+    orientation: { type: String, reflect: true },
+    origin: { type: Number },
+    scale: { type: Number },
+    direction: { type: String }
+  };
+  frame = 0;
+  observer;
+  constructor() {
+    super();
+    this.orientation = "";
+    this.origin = 0;
+    this.scale = 96;
+    this.direction = "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const Observer = this.ownerDocument.defaultView?.ResizeObserver;
+    this.observer = Observer ? new Observer(() => this.schedule()) : void 0;
+    this.observer?.observe(this);
+    this.schedule();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.observer?.disconnect();
+    if (this.frame) this.ownerDocument.defaultView?.cancelAnimationFrame?.(this.frame);
+    this.frame = 0;
+  }
+  schedule() {
+    if (this.frame || !this.isConnected) return;
+    const view = this.ownerDocument.defaultView;
+    this.frame = view?.requestAnimationFrame?.(() => this.draw()) ?? 0;
+    if (!this.frame) this.draw();
+  }
+  willUpdate() {
+    this.setAttribute("aria-hidden", "true");
+  }
+  updated() {
+    this.schedule();
+  }
+  draw() {
+    this.frame = 0;
+    const canvas = this.renderRoot.querySelector("canvas");
+    if (!canvas) return;
+    const view = this.ownerDocument.defaultView;
+    const vertical = this.orientation === "vertical";
+    const reverse = this.direction === "reverse";
+    const box = this.getBoundingClientRect();
+    const length = vertical ? box.height : box.width;
+    const thickness = (vertical ? box.width : box.height) || parseFloat(OFFICE_TOKENS["--office-ruler-size"]);
+    const ratio = view?.devicePixelRatio ?? 1;
+    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 style = view?.getComputedStyle(this);
+    const ink = style?.color || OFFICE_TOKENS["--office-muted-foreground"];
+    context.strokeStyle = ink;
+    context.fillStyle = ink;
+    context.lineWidth = 1;
+    context.font = `${style?.fontSize || OFFICE_TOKENS["--office-font-size-3xs"]} ${style?.fontFamily || OFFICE_TOKENS["--office-font"]}`;
+    const origin = Number.isFinite(this.origin) ? this.origin : 0;
+    const unit = Math.max(1, Number.isFinite(this.scale) ? this.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();
+  }
+  render() {
+    return html`<canvas></canvas>`;
+  }
+};
+var defineRuler = definer("office-ui-ruler", () => OfficeUiRuler);
+
+// src/chrome/account-profile.ts
+var DEFAULT_OFFICE_PROFILE = { displayName: "", avatarColor: "#6366f1" };
+var OFFICE_AVATAR_SWATCHES = [
+  "#6366f1",
+  "#c2431f",
+  "#0891b2",
+  "#16a34a",
+  "#ca8a04",
+  "#db2777",
+  "#64748b"
+];
+var OFFICE_PROFILE_STORAGE_KEY = "ooxml-office-profile";
+var COLOR = /^#[0-9a-f]{6}$/i;
+function sanitizeOfficeProfile(raw) {
+  const value = raw && typeof raw === "object" ? raw : {};
+  const displayName = typeof value.displayName === "string" ? value.displayName.trim().slice(0, 64) : "";
+  const avatarColor = typeof value.avatarColor === "string" && COLOR.test(value.avatarColor) ? value.avatarColor : DEFAULT_OFFICE_PROFILE.avatarColor;
+  const initial = typeof value.initial === "string" && value.initial.trim() ? value.initial.trim().slice(0, 2) : void 0;
+  return { displayName, avatarColor, ...initial ? { initial } : {} };
+}
+function profileInitials(profile) {
+  return (profile.initial ?? initialsOf(profile.displayName)).toUpperCase();
+}
+var defaultStorage = () => {
+  try {
+    return typeof localStorage === "undefined" ? void 0 : localStorage;
+  } catch {
+    return void 0;
+  }
+};
+function readOfficeProfile(storage = defaultStorage(), key = OFFICE_PROFILE_STORAGE_KEY) {
+  try {
+    const raw = storage?.getItem(key);
+    return raw ? sanitizeOfficeProfile(JSON.parse(raw)) : { ...DEFAULT_OFFICE_PROFILE };
+  } catch {
+    return { ...DEFAULT_OFFICE_PROFILE };
+  }
+}
+function writeOfficeProfile(profile, storage = defaultStorage(), key = OFFICE_PROFILE_STORAGE_KEY) {
+  try {
+    storage?.setItem(key, JSON.stringify(sanitizeOfficeProfile(profile)));
+  } catch {
+  }
+}
+function clearOfficeProfile(storage = defaultStorage(), key = OFFICE_PROFILE_STORAGE_KEY) {
+  try {
+    storage?.removeItem(key);
+  } catch {
+  }
+}
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/chrome/account.css?raw
+var account_default = ":host {\n	display: block;\n	font-family: var(--office-font);\n	font-size: var(--office-font-size);\n}\nh2 {\n	margin: 0 0 var(--office-space-3);\n	font-size: var(--office-font-size-lg);\n	font-weight: 600;\n}\n.who {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	margin-bottom: var(--office-space-3);\n}\n.avatar {\n	display: grid;\n	place-items: center;\n	width: var(--office-avatar-size);\n	height: var(--office-avatar-size);\n	border-radius: 50%;\n	color: var(--office-accent-foreground);\n	font-weight: var(--office-font-weight-bold);\n	font-size: var(--office-font-size-xl);\n	flex: none;\n}\n.name {\n	font-size: var(--office-font-size-md);\n	font-weight: 600;\n}\n.note {\n	margin: var(--office-space-0) 0 0;\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-sm);\n}\nlabel {\n	display: grid;\n	gap: var(--office-space-1);\n	max-width: var(--office-account-field-width);\n	margin-bottom: var(--office-space-3);\n}\ninput {\n	min-height: var(--office-field-height);\n	box-sizing: border-box;\n	padding: var(--office-space-0) var(--office-space-1-5);\n	font: inherit;\n	color: inherit;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-sm);\n	background: var(--office-background);\n}\n.swatches {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-1-5);\n	margin: var(--office-space-1) 0 var(--office-space-3);\n}\n.swatches button {\n	width: var(--office-target-size);\n	height: var(--office-target-size);\n	padding: 0;\n	border: var(--office-border-width-thick) solid transparent;\n	border-radius: 50%;\n	cursor: pointer;\n}\n.swatches button[aria-checked='true'] {\n	border-color: var(--office-foreground);\n	box-shadow: inset 0 0 0 var(--office-border-width-thick) var(--office-background);\n}\n.swatches button:focus-visible,\ninput:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\n@media (forced-colors: active) {\n	.swatches button {\n		forced-color-adjust: none;\n	}\n}\n";
+
+// src/chrome/account.ts
+var OfficeUiAccount = class extends OfficeElement {
+  static styles = controlStyles(account_default);
+  current = { ...DEFAULT_OFFICE_PROFILE };
+  get profile() {
+    return { ...this.current };
+  }
+  set profile(value) {
+    this.current = sanitizeOfficeProfile(value);
+    this.requestUpdate("profile");
+  }
+  change(next) {
+    this.profile = next;
+    this.fire("office-profile-change", { profile: this.profile });
+  }
+  onSwatchKey(event) {
+    const step = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[event.key];
+    if (!step) return;
+    event.preventDefault();
+    const colors = OFFICE_AVATAR_SWATCHES;
+    const at = Math.max(0, colors.indexOf(this.current.avatarColor));
+    const color = colors[(at + step + colors.length) % colors.length];
+    this.change({ ...this.current, avatarColor: color });
+    this.renderRoot.querySelector(`[data-color="${color}"]`)?.focus();
+  }
+  render() {
+    const { displayName, avatarColor } = this.current;
+    const known = OFFICE_AVATAR_SWATCHES.includes(avatarColor);
+    return html`
+			<h2>User Information</h2>
+			<div class="who">
+				<div class="avatar" aria-hidden="true" style="background:${avatarColor}"
+					>${profileInitials(this.current)}</div
+				>
+				<div>
+					<div class="name">${displayName || "No display name"}</div>
+					<p class="note">Stored on this device only. Never sent anywhere.</p>
+				</div>
+			</div>
+			<label>
+				Display name
+				<input
+					type="text"
+					maxlength="64"
+					autocomplete="name"
+					.value=${displayName}
+					@change=${(event) => this.change({
+      ...this.current,
+      displayName: event.target.value.trim()
+    })}
+				/>
+			</label>
+			<div id="color-label">Avatar colour</div>
+			<div
+				class="swatches"
+				role="radiogroup"
+				aria-labelledby="color-label"
+				@keydown=${this.onSwatchKey}
+			>
+				${OFFICE_AVATAR_SWATCHES.map((color, index) => {
+      const checked = color === avatarColor;
+      return html`<button
+						type="button"
+						role="radio"
+						aria-label=${color}
+						aria-checked=${String(checked)}
+						tabindex=${checked || !known && index === 0 ? 0 : -1}
+						data-color=${color}
+						style="background:${color}"
+						@click=${() => this.change({ ...this.current, avatarColor: color })}
+					></button>`;
+    })}
+			</div>
+			<slot name="sign-in"></slot>
+			<slot></slot>
+		`;
+  }
+};
+var defineAccount = definer("office-ui-account", () => OfficeUiAccount);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/ribbon/button.css?raw
+var button_default = ":host {\n	display: inline-flex;\n	vertical-align: middle;\n}\nbutton {\n	box-sizing: border-box;\n	position: relative;\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-1-5);\n	min-width: var(--office-target-size);\n	min-height: var(--office-target-size);\n	padding: 0 var(--office-space-2);\n	border: var(--office-border-width) solid transparent;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-foreground);\n	font: inherit;\n	font-size: var(--office-font-size-sm);\n	cursor: pointer;\n	white-space: nowrap;\n}\n:host([variant='stacked']) button {\n	flex-direction: column;\n	padding: var(--office-space-1) var(--office-space-2);\n}\nbutton:hover:not(:disabled) {\n	background: var(--office-surface);\n}\nbutton:active:not(:disabled) {\n	background: var(--office-selected);\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\nbutton[aria-pressed='true'],\nbutton[aria-expanded='true'] {\n	border-color: var(--office-accent);\n	background: var(--office-surface);\n}\n:host([active]) button {\n	background: var(--office-command-active);\n	color: var(--office-accent);\n}\nbutton:disabled {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\nsvg {\n	width: var(--office-icon-size-ml);\n	height: var(--office-icon-size-ml);\n	flex: none;\n	color: var(--office-command-icon-color);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\nsvg.glyph:not([data-painted]) {\n	display: none;\n}\n.label[hidden],\n.caret[hidden],\n.badge[hidden] {\n	display: none;\n}\n/* Office trails a menu chevron after the last line of the label. */\n.caret {\n	display: inline-block;\n	width: var(--office-icon-size-xs);\n	height: var(--office-icon-size-xs);\n	margin-inline-start: var(--office-space-0);\n	vertical-align: middle;\n	color: var(--office-muted-foreground);\n}\n.badge {\n	position: absolute;\n	top: 0;\n	inset-inline-end: 0;\n	padding: 0 var(--office-space-0);\n	border-radius: var(--office-radius-full);\n	background: var(--office-accent);\n	color: var(--office-accent-foreground);\n	font-size: var(--office-font-size-3xs);\n}\n\n/* Large ribbon command: a big glyph above a two-line label. */\n:host([size='large']) button {\n	flex-direction: column;\n	justify-content: flex-start;\n	gap: var(--office-space-0);\n	min-width: var(--office-command-large-min-width);\n	max-width: var(--office-command-large-max-width);\n	height: var(--office-command-large-height);\n	padding: var(--office-space-0) var(--office-space-1);\n	border: 0;\n	white-space: normal;\n	text-align: center;\n	line-height: var(--office-line-height-tight);\n}\n:host([size='large']) svg.glyph {\n	width: var(--office-command-large-icon);\n	height: var(--office-command-large-icon);\n}\n\n/* Small ribbon command: icon and label in one row. */\n:host([size='small']) button {\n	justify-content: flex-start;\n	min-width: 0;\n	height: var(--office-control-height);\n	min-height: var(--office-control-height);\n	padding: 0 var(--office-space-1-5);\n	border: 0;\n	text-align: start;\n}\n:host([size='small']) svg.glyph {\n	width: var(--office-command-small-icon);\n	height: var(--office-command-small-icon);\n}\n\n/* Tall, label-less tool tiles (pens, erasers). */\n:host([icon-only][tall]) button {\n	min-width: var(--office-command-tall-min-width);\n	height: var(--office-command-tall-height);\n	padding: var(--office-space-1);\n}\n:host([icon-only][tall]) svg.glyph {\n	width: var(--office-command-tall-icon);\n	height: var(--office-command-tall-icon);\n}\n:host([icon-only][tall][active]) button {\n	box-shadow: inset 0 0 0 var(--office-border-width) var(--office-accent);\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n	:host([size='small']) button {\n		min-height: var(--office-target-size-touch);\n	}\n	:host([icon-only]) button {\n		min-width: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	button {\n		border-color: ButtonText;\n		color: ButtonText;\n		background: ButtonFace;\n	}\n	svg {\n		color: ButtonText;\n	}\n	button:disabled {\n		color: GrayText;\n		border-color: GrayText;\n	}\n	button[aria-pressed='true'],\n	button[aria-expanded='true'],\n	:host([active]) button {\n		background: Highlight;\n		color: HighlightText;\n	}\n}\n";
+
+// src/ribbon/button.ts
+var asAttribute = (value) => value === void 0 ? void 0 : String(value);
+var OfficeUiButton = class extends OfficeElement {
+  static requestEvent = "office-command";
+  static idAttribute = "command";
+  static detailKey = "command";
+  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+  static styles = controlStyles(button_default);
+  static properties = { disabled: flag, pressed: triState };
+  /** Everything else is an attribute, as it always was (see `OfficeElement.watched`). */
+  static watched = [
+    "label",
+    "icon",
+    "command",
+    "badge",
+    "caret",
+    "keyshortcuts",
+    "size",
+    "variant",
+    "active",
+    "tall",
+    "icon-only",
+    "expanded",
+    "title"
+  ];
+  constructor() {
+    super();
+    this.disabled = false;
+  }
+  /** The registered icon to draw; a product subclass may map names onto its glyph set. */
+  iconName() {
+    return this.getAttribute("icon");
+  }
+  /** The tooltip: `title`, else the label of an icon-only button; a product may always show it. */
+  tooltip(label, iconOnly) {
+    return this.getAttribute("title") ?? (iconOnly ? label : "");
+  }
+  /** Whether the trailing menu chevron shows. */
+  showsCaret() {
+    const caret = this.getAttribute("caret");
+    return caret !== null && caret !== "false";
+  }
+  onKeydown(event) {
+    if ((event.key === " " || event.key === "Enter") && !event.ctrlKey && !event.metaKey && !event.altKey)
+      event.stopPropagation();
+  }
+  onClick() {
+    const { requestEvent, idAttribute, detailKey } = this.constructor;
+    const id = this.getAttribute(idAttribute);
+    if (!present(this.disabled) && id) this.fire(requestEvent, { [detailKey]: id });
+  }
+  render() {
+    const label = this.getAttribute("label") ?? "";
+    const iconOnly = this.hasAttribute("icon-only");
+    const badge = this.getAttribute("badge") ?? "";
+    const expanded = this.getAttribute("expanded");
+    const tooltip = this.tooltip(label, iconOnly);
+    return html`<button
+			part="button"
+			type="button"
+			?disabled=${present(this.disabled)}
+			title=${tooltip || nothing}
+			aria-label=${ifDefined(iconOnly && label ? label : void 0)}
+			aria-keyshortcuts=${ifDefined(this.getAttribute("keyshortcuts") || void 0)}
+			aria-pressed=${ifDefined(asAttribute(this.pressed))}
+			aria-expanded=${ifDefined(expanded === null ? void 0 : String(expanded !== "false"))}
+			@click=${this.onClick}
+			@keydown=${this.onKeydown}
+			>${glyph(this.iconName())}<span class="label" ?hidden=${iconOnly}
+				>${label}${glyph("chevronDown", "caret", !this.showsCaret())}</span
+			><span class="badge" aria-hidden="true" ?hidden=${!badge}>${badge}</span></button
+		>`;
+  }
+};
+var defineButton = definer("office-ui-button", () => OfficeUiButton);
+var OfficeUiCheckable = class extends OfficeElement {
+  static formAssociated = true;
+  static properties = {
+    checked: flag,
+    disabled: flag,
+    value: valueOn
+  };
+  internals;
+  defaultChecked = false;
+  constructor() {
+    super();
+    this.checked = false;
+    this.disabled = false;
+    this.value = "on";
+    try {
+      this.internals = this.attachInternals();
+    } catch {
+      this.internals = void 0;
+    }
+    this.addEventListener("click", (event) => {
+      if (present(this.disabled)) event.preventDefault();
+      else this.toggle();
+    });
+    this.addEventListener("keydown", (event) => {
+      const toggles = event.key === " " || this.semantics === "switch" && event.key === "Enter";
+      if (!toggles || present(this.disabled)) return;
+      event.preventDefault();
+      this.toggle();
+    });
+  }
+  connectedCallback() {
+    this.defaultChecked = present(this.checked);
+    super.connectedCallback();
+  }
+  formResetCallback() {
+    this.checked = this.defaultChecked;
+  }
+  formDisabledCallback(disabled) {
+    this.disabled = disabled;
+  }
+  toggle() {
+    this.checked = !present(this.checked);
+    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  }
+  /** The host carries the semantics: role, state, tab stop and form value. */
+  willUpdate() {
+    const checked = present(this.checked);
+    const disabled = present(this.disabled);
+    this.setAttribute("role", this.semantics);
+    this.setAttribute("aria-checked", String(checked));
+    this.setAttribute("aria-disabled", String(disabled));
+    this.setAttribute("tabindex", disabled ? "-1" : "0");
+    this.internals?.setFormValue?.(checked && !disabled ? this.value : null);
+  }
+  /** The tick, shown through CSS when `checked`. */
+  renderCheck() {
+    return html`<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"></path>
+		</svg>`;
+  }
+};
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/form/checkbox.css?raw
+var checkbox_default = ":host {\n	display: inline-grid;\n	box-sizing: border-box;\n	width: var(--office-checkbox-size);\n	height: var(--office-checkbox-size);\n	flex: none;\n	place-items: center;\n	border: var(--office-border-width) solid var(--office-checkbox-border);\n	border-radius: var(--office-checkbox-radius);\n	background: var(--office-checkbox-background);\n	color: var(--office-checkbox-accent-foreground);\n	cursor: pointer;\n	vertical-align: middle;\n}\n:host([checked]) {\n	border-color: var(--office-checkbox-accent);\n	background: var(--office-checkbox-accent);\n}\n:host(:focus-visible) {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n:host([disabled]) {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\nsvg {\n	display: none;\n	width: var(--office-icon-size-sm);\n	height: var(--office-icon-size-sm);\n}\n:host([checked]) svg {\n	display: block;\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n	:host {\n		width: var(--office-checkbox-size-touch);\n		height: var(--office-checkbox-size-touch);\n	}\n	svg {\n		width: var(--office-icon-size-md);\n		height: var(--office-icon-size-md);\n	}\n}\n@media (forced-colors: active) {\n	:host {\n		border-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n		forced-color-adjust: auto;\n	}\n	:host([checked]) {\n		border-color: Highlight;\n		background: Highlight;\n		color: HighlightText;\n	}\n}\n";
+
+// src/form/checkbox.ts
+var OfficeUiCheckbox = class extends OfficeUiCheckable {
+  static styles = controlStyles(checkbox_default);
+  semantics = "checkbox";
+  render() {
+    return this.renderCheck();
+  }
+};
+var defineCheckbox = definer("office-ui-checkbox", () => OfficeUiCheckbox);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/form/switch.css?raw
+var switch_default = "/* Switch metrics are tokens so a host (a title bar) can size it: --office-switch-width, -height,\n * -border-width, -knob-size, -knob-offset, -knob-travel, -track, -track-on, -thumb, -thumb-on. */\n:host {\n	--_w: var(--office-switch-width);\n	--_h: var(--office-switch-height);\n	--_b: var(--office-switch-border-width);\n	--_k: var(--office-switch-knob-size);\n	--_o: var(--office-switch-knob-offset);\n	display: inline-block;\n	box-sizing: border-box;\n	position: relative;\n	width: var(--_w);\n	height: var(--_h);\n	flex: none;\n	border: var(--_b) solid var(--office-switch-border);\n	border-radius: var(--office-radius-full);\n	background: var(--office-switch-track);\n	cursor: pointer;\n	vertical-align: middle;\n	touch-action: manipulation;\n	transition: background-color var(--office-duration);\n}\n.knob {\n	display: block;\n	position: absolute;\n	top: calc((var(--_h) - 2 * var(--_b) - var(--_k)) / 2);\n	left: var(--_o);\n	width: var(--_k);\n	height: var(--_k);\n	border-radius: 50%;\n	background: var(--office-switch-thumb);\n	box-shadow: var(--office-shadow-sm);\n	transition: transform var(--office-duration);\n}\n:host([checked]) {\n	border-color: var(--office-switch-track-on);\n	background: var(--office-switch-track-on);\n}\n:host([checked]) .knob {\n	transform: translateX(\n		var(--office-switch-knob-travel, calc(var(--_w) - var(--_k) - 2 * var(--_o) - 2 * var(--_b)))\n	);\n	background: var(--office-switch-thumb-on);\n}\n:host(:focus-visible) {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n:host([disabled]) {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\nsvg {\n	display: none;\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n	:host {\n		--_w: var(--office-switch-width-touch);\n		--_h: var(--office-switch-height-touch);\n		--_k: var(--office-switch-knob-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	:host {\n		border-color: CanvasText;\n		background: Canvas;\n		forced-color-adjust: none;\n	}\n	.knob {\n		background: CanvasText;\n	}\n	:host([checked]) {\n		border-color: Highlight;\n		background: Highlight;\n	}\n	:host([checked]) .knob {\n		background: HighlightText;\n	}\n}\n";
+
+// src/form/switch.ts
+var OfficeUiSwitch = class extends OfficeUiCheckable {
+  static styles = controlStyles(switch_default);
+  semantics = "switch";
+  render() {
+    return html`${this.renderCheck()}<span class="knob" part="knob"></span>`;
+  }
+};
+var defineSwitch = definer("office-ui-switch", () => OfficeUiSwitch);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/dialog/dialog.css?raw
+var dialog_default = ":host {\n	display: none;\n	position: fixed;\n	inset: 0;\n	z-index: 1000;\n	align-items: center;\n	justify-content: center;\n}\n:host([open]) {\n	display: flex;\n}\n.backdrop {\n	position: absolute;\n	inset: 0;\n	background: var(--office-overlay);\n}\n.box {\n	position: relative;\n	box-sizing: border-box;\n	display: flex;\n	flex-direction: column;\n	width: var(--office-dialog-width);\n	min-width: var(--office-dialog-min-width);\n	max-width: var(--office-dialog-max-width);\n	max-height: var(--office-dialog-max-height);\n	background: var(--office-background);\n	color: var(--office-foreground);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-lg);\n	font-family: var(--office-font);\n}\nheader {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-2);\n	padding: var(--office-space-3) var(--office-space-4);\n	border-bottom: var(--office-border-width) solid var(--office-border);\n}\nh2 {\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n	font-weight: 600;\n}\n.body {\n	padding: var(--office-space-4);\n	overflow: auto;\n	font-size: var(--office-font-size);\n}\nfooter {\n	display: flex;\n	justify-content: flex-end;\n	gap: var(--office-space-2);\n	padding: var(--office-space-3) var(--office-space-4);\n	border-top: var(--office-border-width) solid var(--office-border);\n}\nfooter[hidden] {\n	display: none;\n}\n.close {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	min-width: var(--office-target-size);\n	min-height: var(--office-target-size);\n	border: 0;\n	background: transparent;\n	color: inherit;\n	cursor: pointer;\n	border-radius: var(--office-radius);\n}\n.close svg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n}\n.close:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n}\n\n@media (forced-colors: active) {\n	.box {\n		border-color: CanvasText;\n		background: Canvas;\n	}\n	.backdrop {\n		background: transparent;\n	}\n}\n";
+
+// src/dialog/dialog.ts
+var FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), office-ui-button:not([disabled]), office-ui-select:not([disabled]), office-ui-checkbox:not([disabled]), office-ui-switch:not([disabled])';
+var OfficeUiDialog = class extends OfficeElement {
+  static styles = controlStyles(dialog_default);
+  static properties = {
+    open: flag,
+    heading: { type: String },
+    dismissible: { type: String }
+  };
+  returnFocus = null;
+  constructor() {
+    super();
+    this.open = false;
+    this.heading = "";
+    this.dismissible = null;
+    this.addEventListener("keydown", (event) => this.onKey(event));
+  }
+  show() {
+    this.open = true;
+  }
+  /** Programmatic close; still emits `office-dialog-close` (reason `api`). */
+  close() {
+    this.requestClose("api");
+  }
+  requestClose(reason) {
+    const dismissible = this.dismissible !== "false";
+    if ((reason === "escape" || reason === "backdrop") && !dismissible) return;
+    if (this.fire("office-dialog-close", { reason }, true)) this.open = false;
+  }
+  get box() {
+    return this.renderRoot.querySelector(".box");
+  }
+  get closeButton() {
+    return this.renderRoot.querySelector(".close");
+  }
+  focusables() {
+    return [...this.querySelectorAll(FOCUSABLE)];
+  }
+  onOpen() {
+    const active = this.ownerDocument.activeElement;
+    this.returnFocus = active && active !== this.ownerDocument.body ? active : null;
+    (this.focusables()[0] ?? this.box)?.focus();
+  }
+  onClose() {
+    const target = this.returnFocus;
+    this.returnFocus = null;
+    target?.focus?.();
+  }
+  onKey(event) {
+    if (!this.open) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      this.requestClose("escape");
+    } else if (event.key === "Tab") {
+      const closeButton = this.closeButton;
+      const items = [...this.focusables(), ...closeButton ? [closeButton] : []];
+      const current = this.ownerDocument.activeElement;
+      const inside = (el) => el === current || el.contains(current);
+      const index = items.findIndex(inside);
+      const shadowFocus = this.shadowRoot?.activeElement === closeButton;
+      const at = shadowFocus ? items.length - 1 : index;
+      const last = items.length - 1;
+      if (at < 0 || !event.shiftKey && at === last || event.shiftKey && at === 0) {
+        event.preventDefault();
+        items[at < 0 || !event.shiftKey ? 0 : last]?.focus();
+      }
+    }
+  }
+  /** Focus moves in when the dialog opens (also when it connects open) and back when it closes. */
+  updated(changed) {
+    if (!changed.has("open")) return;
+    if (this.open) this.onOpen();
+    else if (changed.get("open") !== void 0) this.onClose();
+  }
+  render() {
+    return html`
+			<div class="backdrop" @click=${() => this.requestClose("backdrop")}></div>
+			<div class="box" role="dialog" aria-modal="true" aria-labelledby="title" tabindex="-1">
+				<header>
+					<h2 id="title">${this.heading}</h2>
+					<button
+						class="close"
+						type="button"
+						aria-label="Close"
+						@click=${() => this.requestClose("close-button")}
+						>${glyph("close", "icon")}</button
+					>
+				</header>
+				<div class="body"><slot></slot></div>
+				<footer ?hidden=${this.querySelector('[slot="footer"]') === null}>
+					<slot name="footer" @slotchange=${() => this.requestUpdate()}></slot>
+				</footer>
+			</div>
+		`;
+  }
+};
+var defineDialog = definer("office-ui-dialog", () => OfficeUiDialog);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/icon.css?raw
+var icon_default = ":host {\n	display: inline-flex;\n	width: 1em;\n	height: 1em;\n}\nsvg {\n	width: 1em;\n	height: 1em;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: 1.5;\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n";
+
+// src/icon.ts
+var OfficeUiIcon = class extends OfficeElement {
+  static styles = controlStyles(icon_default);
+  static properties = {
+    name: { type: String },
+    label: { type: String }
+  };
+  constructor() {
+    super();
+    this.name = "";
+    this.label = "";
+  }
+  willUpdate() {
+    if (this.label) {
+      this.setAttribute("role", "img");
+      this.setAttribute("aria-label", this.label);
+      this.removeAttribute("aria-hidden");
+    } else {
+      this.removeAttribute("role");
+      this.removeAttribute("aria-label");
+      this.setAttribute("aria-hidden", "true");
+    }
+  }
+  render() {
+    return glyph(this.name, "icon");
+  }
+};
+var defineIcon = definer("office-ui-icon", () => OfficeUiIcon);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/menu/command-search.css?raw
+var command_search_default = ":host {\n	display: inline-flex;\n	align-items: center;\n	min-width: 0;\n	font-family: var(--office-font);\n}\n.field {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1-5);\n	width: 100%;\n	min-width: 0;\n	height: var(--office-target-size);\n	padding: 0 var(--office-space-2);\n	box-sizing: border-box;\n	border: var(--office-border-width) solid transparent;\n	border-radius: var(--office-radius);\n	color: var(--office-muted-foreground);\n}\n.field:hover,\n.field:focus-within {\n	border-color: var(--office-border);\n	background: var(--office-background);\n}\ninput {\n	flex: 1;\n	min-width: 0;\n	border: 0;\n	outline: 0;\n	background: transparent;\n	color: var(--office-foreground);\n	font: inherit;\n	font-size: var(--office-font-size);\n}\nsvg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	flex: none;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\nul {\n	position: fixed;\n	inset: auto;\n	margin: 0;\n	padding: var(--office-space-1);\n	min-width: var(--office-search-popup-min-width);\n	max-height: var(--office-search-popup-max-height);\n	overflow: auto;\n	box-sizing: border-box;\n	list-style: none;\n	background: var(--office-background);\n	color: var(--office-foreground);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius);\n	box-shadow: var(--office-shadow);\n	font-size: var(--office-font-size-sm);\n}\nul[hidden] {\n	display: none;\n}\nli {\n	display: flex;\n	flex-direction: column;\n	justify-content: center;\n	min-height: var(--office-target-size);\n	padding: var(--office-space-0) var(--office-space-2-5);\n	border-radius: var(--office-radius-sm);\n	cursor: pointer;\n}\nli[data-active] {\n	background: var(--office-surface);\n}\nli[aria-disabled='true'] {\n	cursor: not-allowed;\n	color: var(--office-muted-foreground);\n}\nli small {\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-xs);\n}\nli.empty {\n	cursor: default;\n	color: var(--office-muted-foreground);\n}\n\n@media (forced-colors: active) {\n	.field,\n	ul {\n		border-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n	}\n	li[data-active] {\n		background: Highlight;\n		color: HighlightText;\n	}\n}\n";
+
+// src/menu/command-search.ts
+var uid = 0;
+var OfficeUiCommandSearch = class extends OfficeElement {
+  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+  static styles = controlStyles(command_search_default);
+  static properties = {
+    placeholder: { type: String },
+    label: { type: String },
+    limit: { type: String },
+    found: { state: true },
+    active: { state: true },
+    isOpen: { state: true }
+  };
+  items = [];
+  uid = `office-command-search-${++uid}`;
+  constructor() {
+    super();
+    this.placeholder = null;
+    this.label = null;
+    this.limit = null;
+    this.found = [];
+    this.active = -1;
+    this.isOpen = false;
+  }
+  get commands() {
+    return this.items.map((item) => ({ ...item }));
+  }
+  set commands(value) {
+    this.items = (Array.isArray(value) ? value : []).filter((item) => item && typeof item.id === "string").map((item) => ({ ...item, label: String(item.label ?? "") }));
+    if (this.isOpen) this.search();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.hide();
+  }
+  get input() {
+    return this.renderRoot.querySelector("input");
+  }
+  get list() {
+    return this.renderRoot.querySelector("ul");
+  }
+  search() {
+    const query = (this.input?.value ?? "").trim().toLowerCase();
+    if (!query) return this.hide();
+    const limit = Math.max(1, Number(this.limit) || 8);
+    const rank = (item) => (item.disabled ? 2 : 0) + (item.label.toLowerCase().startsWith(query) ? 0 : 1);
+    this.found = this.items.map((item, order) => ({ item, order })).filter(
+      ({ item }) => `${item.label} ${item.keywords ?? ""} ${item.description ?? ""}`.toLowerCase().includes(query)
+    ).sort((a, b) => rank(a.item) - rank(b.item) || a.order - b.order).map(({ item }) => item).slice(0, limit);
+    this.active = this.found.findIndex((item) => !item.disabled);
+    this.isOpen = true;
+  }
+  hide() {
+    this.isOpen = false;
+  }
+  move(step) {
+    const enabled = this.found.map((item, index) => item.disabled ? -1 : index).filter((i) => i >= 0);
+    if (!enabled.length) return;
+    const at = enabled.indexOf(this.active);
+    this.active = enabled[(at + step + enabled.length) % enabled.length];
+  }
+  choose(index) {
+    const item = this.found[index];
+    if (!item || item.disabled) return;
+    if (this.input) this.input.value = "";
+    this.hide();
+    this.fire("office-command", { command: item.id });
+  }
+  onKey(event) {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!this.isOpen) this.search();
+      else this.move(event.key === "ArrowDown" ? 1 : -1);
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      this.choose(this.active);
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.isOpen) this.hide();
+      else if (this.input) this.input.value = "";
+    }
+  }
+  /** The listbox is a top-layer popover below the field: show or hide it as `isOpen` changes. */
+  updated(changed) {
+    const list = this.list;
+    if (!list || !changed.has("isOpen")) return;
+    if (this.isOpen) {
+      const box = this.input?.getBoundingClientRect();
+      if (box) {
+        list.style.left = `${Math.round(box.left)}px`;
+        list.style.top = `${Math.round(box.bottom + 4)}px`;
+      }
+      if (list.hasAttribute("popover") && !list.matches(":popover-open")) list.showPopover?.();
+    } else if (list.hasAttribute("popover")) {
+      try {
+        list.hidePopover?.();
+      } catch {
+      }
+    }
+  }
+  optionTemplates() {
+    if (!this.found.length)
+      return html`<li class="empty" role="option" aria-disabled="true">No matching commands</li>`;
+    return this.found.map((item, index) => {
+      const detail = item.disabled ? item.title ?? "Not available" : item.description;
+      return html`<li
+				id="${this.uid}-${index}"
+				data-index=${index}
+				role="option"
+				aria-selected=${String(index === this.active)}
+				aria-disabled=${ifDefined(item.disabled ? "true" : void 0)}
+				?data-active=${index === this.active}
+				><span>${item.label}</span>${detail ? html`<small>${detail}</small>` : ""}</li
+			>`;
+    });
+  }
+  render() {
+    const placeholder = this.placeholder ?? "Tell me what you want to do";
+    const popover = typeof HTMLElement.prototype.showPopover === "function";
+    const activeId = this.isOpen && this.found.length && this.active >= 0 ? `${this.uid}-${this.active}` : void 0;
+    return html`
+			<div class="field">
+				${glyph("search", "icon")}
+				<input
+					type="search"
+					autocomplete="off"
+					spellcheck="false"
+					role="combobox"
+					aria-autocomplete="list"
+					aria-expanded=${String(this.isOpen)}
+					aria-controls="${this.uid}-list"
+					aria-label=${this.label ?? placeholder}
+					aria-activedescendant=${ifDefined(activeId)}
+					placeholder=${placeholder}
+					@input=${this.search}
+					@keydown=${this.onKey}
+					@blur=${this.hide}
+				/>
+			</div>
+			<ul
+				id="${this.uid}-list"
+				role="listbox"
+				popover=${ifDefined(popover ? "manual" : void 0)}
+				?hidden=${!popover && !this.isOpen}
+				@pointerdown=${(event) => event.preventDefault()}
+				@click=${(event) => {
+      const item = event.target.closest("li[data-index]");
+      if (item) this.choose(Number(item.dataset.index));
+    }}
+				>${this.isOpen ? this.optionTemplates() : ""}</ul
+			>
+		`;
+  }
+};
+var defineCommandSearch = definer("office-ui-command-search", () => OfficeUiCommandSearch);
+
+// src/menu/menu-model.ts
+var EMPTY_MENU_STATE = { x: 0, y: 0, label: "", items: [] };
+function nextEnabledIndex(items, from, step) {
+  const count = items.length;
+  for (let offset = 1; offset <= count; offset += 1) {
+    const index = ((from + step * offset) % count + count) % count;
+    if (!items[index]?.disabled) return index;
+  }
+  return -1;
+}
+function typeAheadIndex(items, from, query) {
+  const needle = query.toLowerCase();
+  const cycling = [...needle].every((char) => char === needle[0]);
+  const prefix = cycling ? needle[0] : needle;
+  for (let offset = cycling ? 1 : 0; offset <= items.length; offset += 1) {
+    const index = (from + offset + items.length) % items.length;
+    const item = items[index];
+    if (item && !item.disabled && item.label.trim().toLowerCase().startsWith(prefix ?? ""))
+      return index;
+  }
+  return -1;
+}
+function clampFlyoutPosition(input) {
+  const margin = input.margin ?? 8;
+  const maxLeft = input.viewportWidth - input.width - margin;
+  const maxTop = input.viewportHeight - input.height - margin;
+  return {
+    left: Math.max(margin, input.width > 0 ? Math.min(input.x, maxLeft) : input.x),
+    top: Math.max(margin, input.height > 0 ? Math.min(input.y, maxTop) : input.y)
+  };
+}
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/menu/context-menu.css?raw
+var context_menu_default = ":host {\n	display: contents;\n}\n:host([data-controlled]) {\n	display: block;\n	position: fixed;\n	z-index: var(--office-z-popover);\n	color: var(--office-popover-foreground);\n	font: var(--office-font-size-sm) / var(--office-line-height) var(--office-font);\n}\n:host([data-controlled][hidden]) {\n	display: none;\n}\n\n/* Children mode: a popover panel around the slotted menu items. */\n.panel {\n	position: fixed;\n	inset: auto;\n	margin: 0;\n	min-width: var(--office-context-menu-min-width);\n	padding: var(--office-space-1);\n	box-sizing: border-box;\n	background: var(--office-background);\n	color: var(--office-foreground);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius);\n	box-shadow: var(--office-shadow);\n	font-family: var(--office-font);\n}\n.panel[hidden] {\n	display: none;\n}\n\n/* Controlled mode: the host is the fixed box; rows are drawn here from `state`. */\n.menu {\n	box-sizing: border-box;\n	display: flex;\n	flex-direction: column;\n	min-width: var(--office-menu-min-width);\n	max-height: calc(100vh - 2 * var(--office-space-2));\n	overflow-y: auto;\n	padding: var(--office-space-1-5) 0;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	color: inherit;\n	box-shadow: var(--office-shadow-lg);\n	user-select: none;\n}\n.menu:focus {\n	outline: none;\n}\n.item {\n	box-sizing: border-box;\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1-5);\n	width: 100%;\n	min-height: var(--office-field-height);\n	padding: var(--office-space-1-5) var(--office-space-3);\n	border: 0;\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	text-align: start;\n	white-space: nowrap;\n	cursor: pointer;\n}\n.item:hover:not(:disabled),\n.item:focus:not(:disabled) {\n	background: var(--office-selected);\n	outline: none;\n}\n.item:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(-1 * var(--office-focus-width));\n}\n.item:disabled {\n	opacity: 0.45;\n	cursor: default;\n}\n.item.danger {\n	color: var(--office-danger);\n}\n.item svg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	flex: none;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n.check {\n	flex: none;\n	width: var(--office-icon-size);\n	text-align: center;\n}\n.separator {\n	height: var(--office-border-width);\n	margin: var(--office-space-1) 0;\n	background: var(--office-border);\n}\n.heading {\n	padding: var(--office-space-1-5) var(--office-space-3) var(--office-space-0);\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-2xs);\n	font-weight: var(--office-font-weight-bold);\n	letter-spacing: 0.06em;\n	text-transform: uppercase;\n}\n\n@media (pointer: coarse) {\n	.item {\n		min-height: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	.panel,\n	.menu {\n		border-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n		box-shadow: none;\n	}\n	.item,\n	.item.danger {\n		color: CanvasText;\n	}\n	.item:disabled {\n		color: GrayText;\n		opacity: 1;\n	}\n	.item:hover:not(:disabled),\n	.item:focus:not(:disabled) {\n		background: Highlight;\n		color: HighlightText;\n	}\n	.separator {\n		background: CanvasText;\n	}\n	.heading {\n		color: CanvasText;\n	}\n}\n";
+
+// src/menu/context-menu.ts
+var ITEMS = "office-ui-menu-item:not([disabled]):not([hidden])";
+var TYPE_AHEAD_MS = 700;
+var openMenus = /* @__PURE__ */ new WeakMap();
+var stateChanged = (next, old) => JSON.stringify(next) !== JSON.stringify(old);
+var OfficeUiContextMenu = class extends OfficeElement {
+  static requestEvent = "office-menu-request";
+  static closeEvent = "office-menu-close";
+  static markerPattern = /^data-[a-z0-9-]+$/;
+  static styles = controlStyles(context_menu_default);
+  static properties = {
+    label: { type: String },
+    open: { attribute: "data-open", ...flag }
+  };
+  model = EMPTY_MENU_STATE;
+  controlled = false;
+  returnFocus = null;
+  outside;
+  active = -1;
+  focused = false;
+  query = "";
+  queryTimer;
+  markers = [];
+  listening = false;
+  opener = null;
+  constructor() {
+    super();
+    this.label = null;
+    this.open = false;
+    this.addEventListener("office-command", () => this.close());
+  }
+  // ---- Shared -------------------------------------------------------------------------
+  get panel() {
+    return this.renderRoot.querySelector(".panel");
+  }
+  get rows() {
+    return [...this.renderRoot.querySelectorAll(".item")];
+  }
+  config() {
+    return this.constructor;
+  }
+  connectedCallback() {
+    const reconnect = this.hasUpdated;
+    if (this.controlled) this.opener = this.deepActive();
+    super.connectedCallback();
+    if (this.controlled && reconnect) this.settle();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.close();
+    if (!this.controlled) return;
+    this.stopListening();
+    clearTimeout(this.queryTimer);
+    this.focused = false;
+    const opener = this.opener;
+    this.opener = null;
+    const active = this.ownerDocument.activeElement;
+    if (opener?.isConnected && (!active || active === this.ownerDocument.body))
+      opener.focus({ preventScroll: true });
+  }
+  typeAhead(items, from, key) {
+    this.query += key;
+    clearTimeout(this.queryTimer);
+    this.queryTimer = setTimeout(() => this.query = "", TYPE_AHEAD_MS);
+    return typeAheadIndex(items, from, this.query);
+  }
+  isTypeAhead(event) {
+    return event.key.length === 1 && event.key !== " " && !event.ctrlKey && !event.metaKey && !event.altKey;
+  }
+  // ---- Children mode ------------------------------------------------------------------
+  items() {
+    return [...this.querySelectorAll(ITEMS)];
+  }
+  /** Show at client coordinates; focus the first enabled item. */
+  openAt(x, y) {
+    const doc = this.ownerDocument;
+    const panel = this.panel;
+    if (!panel) return;
+    const active = doc.activeElement;
+    this.returnFocus = active instanceof HTMLElement ? active : null;
+    if (panel.hasAttribute("popover")) {
+      if (!this.open) panel.showPopover?.();
+    } else {
+      this.outside ??= (event) => {
+        if (!event.composedPath().includes(this)) this.close();
+      };
+      doc.addEventListener("pointerdown", this.outside, true);
+    }
+    this.open = true;
+    const view = doc.defaultView;
+    const { left, top } = clampFlyoutPosition({
+      x,
+      y,
+      width: panel.offsetWidth,
+      height: panel.offsetHeight,
+      viewportWidth: view?.innerWidth ?? x,
+      viewportHeight: view?.innerHeight ?? y,
+      margin: 4
+    });
+    panel.style.left = `${Math.round(left)}px`;
+    panel.style.top = `${Math.round(top)}px`;
+    this.items()[0]?.focus();
+  }
+  close() {
+    if (!this.open) return;
+    const panel = this.panel;
+    if (panel?.hasAttribute("popover")) {
+      try {
+        panel.hidePopover?.();
+      } catch {
+      }
+    }
+    this.closed(true);
+  }
+  closed(restoreFocus) {
+    if (!this.open) return;
+    this.open = false;
+    if (this.outside) this.ownerDocument.removeEventListener("pointerdown", this.outside, true);
+    if (restoreFocus) this.returnFocus?.focus?.();
+    this.returnFocus = null;
+  }
+  onChildKey(event) {
+    const items = this.items();
+    const from = items.findIndex(
+      (item) => item === event.target || item.contains(event.target)
+    );
+    const move = (index) => {
+      event.preventDefault();
+      items[(index + items.length) % items.length]?.focus();
+    };
+    if (event.key === "ArrowDown") move(from + 1);
+    else if (event.key === "ArrowUp") move(from - 1);
+    else if (event.key === "Home") move(0);
+    else if (event.key === "End") move(items.length - 1);
+    else if (event.key === "Escape" || event.key === "Tab") {
+      if (event.key === "Escape") event.preventDefault();
+      this.close();
+    } else if (this.isTypeAhead(event)) {
+      const labels = items.map((item) => ({
+        label: item.getAttribute("label") ?? item.textContent ?? ""
+      }));
+      const target = this.typeAhead(labels, from, event.key);
+      if (target >= 0) move(target);
+    }
+  }
+  // ---- Controlled mode ----------------------------------------------------------------
+  get state() {
+    return this.model;
+  }
+  set state(value) {
+    const old = this.model;
+    this.model = value;
+    if (!this.controlled) {
+      this.controlled = true;
+      this.toggleAttribute("data-controlled", true);
+      if (this.isConnected) this.opener = this.deepActive();
+    }
+    if (stateChanged(value, old)) this.requestUpdate("state", old);
+  }
+  deepActive() {
+    let node = this.ownerDocument.activeElement;
+    while (node?.shadowRoot?.activeElement) node = node.shadowRoot.activeElement;
+    return node instanceof HTMLElement && node !== this.ownerDocument.body ? node : null;
+  }
+  willUpdate(changed) {
+    if (!this.controlled) return;
+    if (changed.has("state")) {
+      const { items, markers, zIndex } = this.model;
+      this.toggleAttribute("hidden", items.length === 0);
+      this.applyMarkers(markers ?? []);
+      this.hostWrite(() => {
+        if (zIndex !== void 0) this.style.zIndex = String(zIndex);
+        else this.style.removeProperty("z-index");
+      });
+      const same = items[this.active];
+      this.active = same && !same.disabled ? this.active : nextEnabledIndex(items, -1, 1);
+    }
+  }
+  updated(changed) {
+    if (this.controlled && changed.has("state")) this.settle();
+  }
+  /** Position the open menu, listen for dismissal and keep focus on the active row. */
+  settle() {
+    const { items, autoFocus } = this.model;
+    if (items.length === 0) {
+      this.stopListening();
+      this.focused = false;
+      return;
+    }
+    if (!this.isConnected) return;
+    this.place();
+    this.listen();
+    if (!this.focused && autoFocus !== false) {
+      this.focused = true;
+      this.focusRow(nextEnabledIndex(items, -1, 1));
+    } else if (this.focused && this.active >= 0)
+      this.rows[this.active]?.focus({ preventScroll: true });
+  }
+  applyMarkers(next) {
+    for (const name of this.markers) this.removeAttribute(name);
+    const pattern = this.config().markerPattern;
+    this.markers = next.filter((name) => pattern.test(name));
+    for (const name of this.markers) this.setAttribute(name, "true");
+  }
+  place() {
+    const view = this.ownerDocument.defaultView;
+    this.style.left = `${this.model.x}px`;
+    this.style.top = `${this.model.y}px`;
+    const box = this.getBoundingClientRect();
+    const { left, top } = clampFlyoutPosition({
+      x: this.model.x,
+      y: this.model.y,
+      width: box.width,
+      height: box.height,
+      viewportWidth: view?.innerWidth ?? box.right,
+      viewportHeight: view?.innerHeight ?? box.bottom
+    });
+    this.style.left = `${left}px`;
+    this.style.top = `${top}px`;
+  }
+  focusRow(index) {
+    if (index < 0) return;
+    this.active = index;
+    const rows = this.rows;
+    rows.forEach((row, at) => row.tabIndex = at === index ? 0 : -1);
+    rows[index]?.focus({ preventScroll: true });
+  }
+  onRowKey(event) {
+    const items = this.model.items;
+    let target = -2;
+    if (event.key === "ArrowDown") target = nextEnabledIndex(items, this.active, 1);
+    else if (event.key === "ArrowUp") target = nextEnabledIndex(items, this.active, -1);
+    else if (event.key === "Home") target = nextEnabledIndex(items, -1, 1);
+    else if (event.key === "End") target = nextEnabledIndex(items, items.length, -1);
+    else if (this.isTypeAhead(event)) target = this.typeAhead(items, this.active, event.key);
+    if (target === -2) return;
+    event.preventDefault();
+    this.focusRow(target);
+  }
+  onRowOver(event) {
+    const row = event.target?.closest("button");
+    const index = row ? this.rows.indexOf(row) : -1;
+    if (index >= 0 && !row?.disabled && index !== this.active) this.focusRow(index);
+  }
+  dismiss(reason) {
+    this.fire(this.config().closeEvent, { reason });
+  }
+  onDocumentKey = (event) => {
+    if (openMenus.get(this.ownerDocument)?.at(-1) !== this) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      this.dismiss("escape");
+    } else if (event.key === "Tab") this.dismiss("tab");
+  };
+  onDocumentPointer = (event) => {
+    if (!event.composedPath().includes(this)) this.dismiss("outside");
+  };
+  listen() {
+    if (this.listening) return;
+    this.listening = true;
+    const doc = this.ownerDocument;
+    openMenus.set(doc, [...openMenus.get(doc) ?? [], this]);
+    doc.addEventListener("keydown", this.onDocumentKey, true);
+    doc.addEventListener("pointerdown", this.onDocumentPointer, true);
+  }
+  stopListening() {
+    if (!this.listening) return;
+    this.listening = false;
+    const doc = this.ownerDocument;
+    openMenus.set(
+      doc,
+      (openMenus.get(doc) ?? []).filter((menu) => menu !== this)
+    );
+    doc.removeEventListener("keydown", this.onDocumentKey, true);
+    doc.removeEventListener("pointerdown", this.onDocumentPointer, true);
+  }
+  // ---- Templates ----------------------------------------------------------------------
+  row(item, index) {
+    const checkable = item.checked !== void 0;
+    return html`<button
+			type="button"
+			class=${item.danger ? "item danger" : "item"}
+			data-item-id=${item.id}
+			title=${ifDefined(item.title)}
+			role=${checkable ? "menuitemcheckbox" : "menuitem"}
+			aria-checked=${ifDefined(checkable ? String(item.checked) : void 0)}
+			aria-disabled=${ifDefined(item.disabled ? "true" : void 0)}
+			tabindex=${index === this.active ? 0 : -1}
+			?disabled=${Boolean(item.disabled)}
+			@click=${() => this.fire(this.config().requestEvent, { id: item.id })}
+			>${checkable ? html`<span class="check" aria-hidden="true">${item.checked ? "\u2713" : ""}</span>` : ""}${item.icon ? glyph(item.icon, "icon") : ""}${item.label}</button
+		>`;
+  }
+  /** Rows with their rules and headings; a heading opens a labelled group for the rows after it. */
+  rowTemplates() {
+    const out = [];
+    let group;
+    const closeGroup = () => {
+      if (!group) return;
+      out.push(html`<div role="group" aria-label=${group.heading}>
+				<div class="heading" aria-hidden="true">${group.heading}</div>${group.rows}</div
+			>`);
+      group = void 0;
+    };
+    this.model.items.forEach((item, index) => {
+      if (item.separatorBefore || item.heading) closeGroup();
+      if (item.separatorBefore) out.push(html`<div class="separator" role="separator"></div>`);
+      if (item.heading) group = { heading: item.heading, rows: [] };
+      (group ? group.rows : out).push(this.row(item, index));
+    });
+    closeGroup();
+    return out;
+  }
+  render() {
+    if (this.controlled)
+      return html`
+				<div
+					class="menu"
+					role="menu"
+					aria-orientation="vertical"
+					aria-label=${this.model.label}
+					tabindex="-1"
+					?hidden=${this.model.items.length === 0}
+					@keydown=${this.onRowKey}
+					@pointerover=${this.onRowOver}
+					@contextmenu=${(event) => event.preventDefault()}
+					>${this.rowTemplates()}</div
+				>
+			`;
+    const popover = typeof HTMLElement.prototype.showPopover === "function";
+    return html`
+			<div
+				class="panel"
+				role="menu"
+				aria-label=${this.label ?? "Context menu"}
+				popover=${ifDefined(popover ? "auto" : void 0)}
+				?hidden=${!popover && !present(this.open)}
+				@toggle=${(event) => event.newState === "closed" && this.closed(false)}
+				@keydown=${this.onChildKey}
+			>
+				<slot></slot>
+			</div>
+		`;
+  }
+};
+var defineContextMenu = definer("office-ui-context-menu", () => OfficeUiContextMenu);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/menu/menu-separator.css?raw
+var menu_separator_default = ":host {\n	display: block;\n	height: var(--office-border-width);\n	margin: var(--office-space-1) var(--office-space-1-5);\n	background: var(--office-border);\n}\n\n@media (forced-colors: active) {\n	:host {\n		background: CanvasText;\n	}\n}\n";
+
+// src/menu/menu-separator.ts
+var OfficeUiMenuSeparator = class extends OfficeElement {
+  static styles = controlStyles(menu_separator_default);
+  willUpdate() {
+    this.setAttribute("role", "separator");
+  }
+};
+var defineMenuSeparator = definer("office-ui-menu-separator", () => OfficeUiMenuSeparator);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/menu/menu-button.css?raw
+var menu_button_default = ":host {\n	display: inline-flex;\n	vertical-align: middle;\n}\n.wrap {\n	display: inline-flex;\n	align-items: stretch;\n	border: var(--office-border-width) solid transparent;\n	border-radius: var(--office-radius);\n}\n:host([variant='stacked']) .wrap {\n	flex-direction: column;\n}\nbutton {\n	box-sizing: border-box;\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-1);\n	min-width: var(--office-target-size);\n	min-height: var(--office-target-size);\n	padding: 0 var(--office-space-1-5);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-foreground);\n	font: inherit;\n	font-size: var(--office-font-size-sm);\n	cursor: pointer;\n	white-space: nowrap;\n}\n:host([variant='stacked']) .main {\n	flex-direction: column;\n	padding: var(--office-space-1) var(--office-space-1-5) 0;\n}\n:host([variant='stacked']) .caret {\n	min-height: var(--office-icon-size-md);\n	padding: 0 var(--office-space-1-5) var(--office-space-0);\n}\n:host([variant='stacked']:not([command])) .main {\n	padding-bottom: 0;\n}\n.wrap:hover:not(.disabled) {\n	border-color: var(--office-border);\n}\nbutton:hover:not(:disabled) {\n	background: var(--office-surface);\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(-1 * var(--office-focus-width));\n}\nbutton:disabled {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\nbutton[aria-expanded='true'] {\n	background: var(--office-surface);\n}\n.caret svg {\n	width: var(--office-icon-size-sm);\n	height: var(--office-icon-size-sm);\n}\nsvg {\n	width: var(--office-icon-size-ml);\n	height: var(--office-icon-size-ml);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\nsvg:not([data-painted]) {\n	display: none;\n}\n.panel {\n	position: fixed;\n	inset: auto;\n	margin: 0;\n	min-width: var(--office-menu-min-width);\n	padding: var(--office-space-1);\n	box-sizing: border-box;\n	background: var(--office-background);\n	color: var(--office-foreground);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius);\n	box-shadow: var(--office-shadow);\n}\n.panel[hidden] {\n	display: none;\n}\n\n@media (forced-colors: active) {\n	button {\n		color: ButtonText;\n	}\n	button:disabled {\n		color: GrayText;\n	}\n	.panel {\n		border-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n	}\n}\n";
+
+// src/menu/menu-button.ts
+var ENABLED_ITEMS = "office-ui-menu-item:not([disabled]):not([hidden])";
+var OfficeUiMenuButton = class extends OfficeElement {
+  static styles = controlStyles(menu_button_default);
+  static properties = {
+    label: { type: String },
+    icon: { type: String },
+    command: { type: String, reflect: true },
+    keyshortcuts: { type: String },
+    disabled: flag,
+    iconOnly: { attribute: "icon-only", ...flag },
+    open: { state: true }
+  };
+  outside;
+  /** `title` is a native attribute, so it is watched rather than declared as a property. */
+  static get observedAttributes() {
+    return [...super.observedAttributes, "title"];
+  }
+  constructor() {
+    super();
+    this.label = "";
+    this.icon = null;
+    this.command = null;
+    this.keyshortcuts = null;
+    this.disabled = false;
+    this.iconOnly = false;
+    this.open = false;
+    this.addEventListener("office-command", (event) => {
+      if (event.target !== this) this.hide(true);
+    });
+  }
+  attributeChangedCallback(name, old, value) {
+    super.attributeChangedCallback(name, old, value);
+    if (name === "title") this.requestUpdate();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.hide(false);
+  }
+  get panel() {
+    return this.renderRoot.querySelector(".panel");
+  }
+  get split() {
+    return this.command !== null;
+  }
+  get nativePopover() {
+    return typeof (this.panel ?? HTMLElement.prototype).showPopover === "function";
+  }
+  items() {
+    return [...this.querySelectorAll(ENABLED_ITEMS)];
+  }
+  toggle() {
+    if (this.open) this.hide(true);
+    else this.show(0);
+  }
+  show(focusIndex) {
+    const panel = this.panel;
+    const wrap = this.renderRoot.querySelector(".wrap");
+    if (!panel || !wrap) return;
+    const anchor = wrap.getBoundingClientRect();
+    panel.style.left = `${Math.round(anchor.left)}px`;
+    panel.style.top = `${Math.round(anchor.bottom + 2)}px`;
+    if (panel.hasAttribute("popover")) panel.showPopover?.();
+    else {
+      this.outside = (event) => {
+        if (!event.composedPath().includes(this)) this.hide(false);
+      };
+      this.ownerDocument.addEventListener("pointerdown", this.outside, true);
+    }
+    this.open = true;
+    this.place(panel, anchor);
+    this.items()[focusIndex]?.focus();
+  }
+  /** Keep the open menu inside the viewport: flip left of the trigger's right edge if needed. */
+  place(panel, anchor) {
+    const view = this.ownerDocument.defaultView;
+    const width = panel.offsetWidth;
+    const height = panel.offsetHeight;
+    if (!view || !width) return;
+    const maxLeft = view.innerWidth - width - 4;
+    const left = anchor.left > maxLeft ? Math.max(4, anchor.right - width) : anchor.left;
+    const top = anchor.bottom + 2 + height > view.innerHeight && anchor.top - height - 2 > 0 ? anchor.top - height - 2 : anchor.bottom + 2;
+    panel.style.left = `${Math.round(Math.min(left, Math.max(4, maxLeft)))}px`;
+    panel.style.top = `${Math.round(top)}px`;
+  }
+  hide(restoreFocus) {
+    if (!this.open) return;
+    const panel = this.panel;
+    if (panel?.hasAttribute("popover")) {
+      try {
+        panel.hidePopover?.();
+      } catch {
+      }
+    }
+    this.closed();
+    if (restoreFocus)
+      this.renderRoot.querySelector(this.split ? ".caret" : ".main")?.focus();
+  }
+  closed() {
+    if (this.outside) this.ownerDocument.removeEventListener("pointerdown", this.outside, true);
+    this.outside = void 0;
+    this.open = false;
+  }
+  onMain() {
+    if (present(this.disabled)) return;
+    if (this.command) this.fire("office-command", { command: this.command });
+    else this.toggle();
+  }
+  onTriggerKey(event) {
+    if (event.key === "ArrowDown" && !present(this.disabled)) {
+      event.preventDefault();
+      this.show(0);
+    }
+  }
+  onMenuKey(event) {
+    const items = this.items();
+    const from = items.findIndex(
+      (item) => item === event.target || item.contains(event.target)
+    );
+    const move = (index) => {
+      event.preventDefault();
+      items[(index + items.length) % items.length]?.focus();
+    };
+    if (event.key === "ArrowDown") move(from + 1);
+    else if (event.key === "ArrowUp") move(from - 1);
+    else if (event.key === "Home") move(0);
+    else if (event.key === "End") move(items.length - 1);
+    else if (event.key === "Escape") {
+      event.preventDefault();
+      this.hide(true);
+    } else if (event.key === "Tab") this.hide(false);
+  }
+  willUpdate() {
+    if (present(this.disabled)) this.hide(false);
+  }
+  render() {
+    const { label, split, open } = this;
+    const iconOnly = present(this.iconOnly);
+    const disabled = present(this.disabled);
+    const title = this.getAttribute("title") ?? label;
+    const popover = this.nativePopover;
+    return html`
+			<div class="wrap ${disabled ? "disabled" : ""}">
+				<button
+					class="main"
+					part="button"
+					type="button"
+					title=${title}
+					aria-label=${ifDefined(iconOnly ? label : void 0)}
+					aria-keyshortcuts=${ifDefined(this.keyshortcuts || void 0)}
+					aria-haspopup=${ifDefined(split ? void 0 : "menu")}
+					aria-expanded=${ifDefined(split ? void 0 : String(open))}
+					?disabled=${disabled}
+					@click=${this.onMain}
+					@keydown=${this.onTriggerKey}
+					>${glyph(this.icon)}<span class="text" ?hidden=${iconOnly}>${label}</span></button
+				>
+				<!-- Without a split command the caret is decoration on one control, not a second button. -->
+				<button
+					class="caret"
+					type="button"
+					title=${split ? `${label} options` : title}
+					aria-label=${ifDefined(split ? `${label} options` : void 0)}
+					aria-hidden=${ifDefined(split ? void 0 : "true")}
+					aria-haspopup="menu"
+					aria-expanded=${String(open)}
+					tabindex=${split ? 0 : -1}
+					?disabled=${disabled}
+					@click=${() => !disabled && this.toggle()}
+					@keydown=${this.onTriggerKey}
+					>${glyph("chevronDown", "chevron")}</button
+				>
+			</div>
+			<div
+				class="panel"
+				role="menu"
+				popover=${ifDefined(popover ? "auto" : void 0)}
+				?hidden=${!popover && !open}
+				@toggle=${(event) => event.newState === "closed" && this.closed()}
+				@keydown=${this.onMenuKey}
+			>
+				<slot></slot>
+			</div>
+		`;
+  }
+};
+var defineMenuButton = definer("office-ui-menu-button", () => OfficeUiMenuButton);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/menu/menu-item.css?raw
+var menu_item_default = ":host {\n	display: block;\n}\n:host([hidden]) {\n	display: none;\n}\nbutton {\n	box-sizing: border-box;\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	width: 100%;\n	min-height: var(--office-target-size);\n	padding: 0 var(--office-space-2-5) 0 var(--office-space-2);\n	border: 0;\n	border-radius: var(--office-radius-sm);\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	font-size: var(--office-font-size-sm);\n	text-align: start;\n	cursor: pointer;\n}\nbutton:hover:not(:disabled),\nbutton:focus-visible {\n	background: var(--office-surface);\n	outline: none;\n}\nbutton:disabled {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\n.check {\n	width: var(--office-icon-size);\n	text-align: center;\n}\nsvg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	flex: none;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\nsvg:not([data-painted]) {\n	visibility: hidden;\n}\n\n@media (forced-colors: active) {\n	button:focus-visible {\n		background: Highlight;\n		color: HighlightText;\n	}\n}\n";
+
+// src/menu/menu-item.ts
+var OfficeUiMenuItem = class extends OfficeElement {
+  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+  static styles = controlStyles(menu_item_default);
+  static properties = {
+    label: { type: String },
+    icon: { type: String },
+    command: { type: String },
+    checked: { type: String },
+    disabled: flag
+  };
+  /** `title` is a native attribute, so it is watched rather than declared as a property. */
+  static get observedAttributes() {
+    return [...super.observedAttributes, "title"];
+  }
+  constructor() {
+    super();
+    this.label = "";
+    this.icon = null;
+    this.command = null;
+    this.checked = null;
+    this.disabled = false;
+  }
+  attributeChangedCallback(name, old, value) {
+    super.attributeChangedCallback(name, old, value);
+    if (name === "title") this.requestUpdate();
+  }
+  /** Focus the menuitem itself, so arrow navigation never depends on delegatesFocus. */
+  focus(options) {
+    this.renderRoot.querySelector("button")?.focus(options);
+  }
+  onClick() {
+    if (!present(this.disabled) && this.command)
+      this.fire("office-command", { command: this.command });
+  }
+  render() {
+    const checkable = this.checked !== null;
+    const on = checkable && this.checked !== "false";
+    return html`
+			<button
+				type="button"
+				tabindex="-1"
+				role=${checkable ? "menuitemcheckbox" : "menuitem"}
+				aria-checked=${ifDefined(checkable ? String(on) : void 0)}
+				title=${this.getAttribute("title") ?? ""}
+				?disabled=${present(this.disabled)}
+				@click=${this.onClick}
+			>
+				<span class="check" aria-hidden="true">${on ? "\u2713" : ""}</span>${glyph(this.icon)}<span
+					>${this.label}</span
+				>
+			</button>
+		`;
+  }
+};
+var defineMenuItem = definer("office-ui-menu-item", () => OfficeUiMenuItem);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/dialog/options-dialog.css?raw
+var options_dialog_default = ":host {\n	display: contents;\n}\noffice-ui-dialog {\n	--office-dialog-width: var(--office-options-width);\n	--office-dialog-max-width: var(--office-options-width);\n}\n.layout {\n	display: grid;\n	grid-template-columns: var(--office-options-nav-width) minmax(0, 1fr);\n	gap: 0;\n	min-height: var(--office-options-min-height);\n	margin: calc(-1 * var(--office-space-4));\n}\nnav {\n	display: flex;\n	flex-direction: column;\n	padding: var(--office-space-2) 0;\n	border-inline-end: var(--office-border-width) solid var(--office-border);\n	background: var(--office-surface);\n	overflow: auto;\n}\nnav button {\n	min-height: var(--office-options-row-height);\n	padding: var(--office-space-1) var(--office-space-3-5);\n	border: 0;\n	border-radius: 0;\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	text-align: start;\n	cursor: pointer;\n}\nnav button[aria-selected='true'] {\n	background: var(--office-selected);\n	font-weight: 600;\n	box-shadow: inset var(--office-selection-bar-width) 0 0 var(--office-accent);\n}\nnav button:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(-1 * var(--office-focus-width));\n}\n[role='tabpanel'] {\n	padding: var(--office-space-4) var(--office-space-5);\n	overflow: auto;\n}\n.lead {\n	margin: 0 0 var(--office-space-3);\n	font-size: var(--office-font-size-md);\n}\n.unavailable {\n	margin: 0 0 var(--office-space-3);\n	color: var(--office-muted-foreground);\n}\nsection + section {\n	margin-top: var(--office-space-4);\n}\nh3 {\n	margin: 0 0 var(--office-space-2);\n	padding-bottom: var(--office-space-1);\n	border-bottom: var(--office-border-width) solid var(--office-border);\n	font-size: var(--office-font-size);\n	font-weight: 600;\n}\n.desc {\n	margin: 0 0 var(--office-space-2);\n	color: var(--office-muted-foreground);\n}\n.row {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	min-height: var(--office-options-row-height);\n}\n.row.indent {\n	padding-inline-start: var(--office-space-6);\n}\n.row.field > span:first-child {\n	min-width: var(--office-options-label-width);\n}\n.row[data-disabled] {\n	color: var(--office-muted-foreground);\n}\ninput[type='text'],\ninput[type='number'],\nselect {\n	min-height: var(--office-input-height);\n	box-sizing: border-box;\n	font: inherit;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-sm);\n	background: var(--office-background);\n	color: inherit;\n}\ninput[type='number'] {\n	width: var(--office-options-number-width);\n}\n.info {\n	display: inline-grid;\n	place-items: center;\n	width: var(--office-info-size);\n	height: var(--office-info-size);\n	border: var(--office-border-width) solid currentColor;\n	border-radius: 50%;\n	font-size: var(--office-font-size-2xs);\n	color: var(--office-muted-foreground);\n	cursor: help;\n}\n.actions {\n	display: flex;\n	gap: var(--office-space-2);\n}\n.actions button {\n	min-width: var(--office-dialog-button-min-width);\n	min-height: var(--office-control-height-md);\n	font: inherit;\n	cursor: pointer;\n}\n@media (max-width: 600px) {\n	.layout {\n		grid-template-columns: 1fr;\n	}\n	nav {\n		flex-direction: row;\n		border-inline-end: 0;\n		border-bottom: var(--office-border-width) solid var(--office-border);\n	}\n	nav button {\n		white-space: nowrap;\n	}\n	.row.field {\n		flex-wrap: wrap;\n	}\n}\n";
+
+// src/dialog/options-dialog.ts
+function clampOptionNumber(raw, min, max) {
+  const parsed = Number(raw);
+  return Number.isFinite(parsed) && raw.trim() !== "" ? Math.min(max, Math.max(min, parsed)) : void 0;
+}
+var OfficeUiOptionsDialog = class extends OfficeElement {
+  static styles = controlStyles(options_dialog_default);
+  static properties = {
+    open: flag,
+    heading: { type: String },
+    categories: { attribute: false },
+    // `values` keeps a private copy and `category` validates its id, so both have accessors.
+    active: { state: true }
+  };
+  committed = {};
+  draft = {};
+  constructor() {
+    super();
+    this.open = false;
+    this.heading = null;
+    this.categories = [];
+    this.active = "";
+  }
+  get values() {
+    return { ...this.committed };
+  }
+  set values(value) {
+    this.committed = { ...value };
+    if (!present(this.open)) this.draft = { ...value };
+    this.requestUpdate("values");
+  }
+  /** The selected category id. */
+  get category() {
+    return this.active;
+  }
+  set category(id) {
+    if (this.categories.some((category) => category.id === id)) this.active = id;
+  }
+  show() {
+    this.open = true;
+  }
+  close() {
+    this.open = false;
+  }
+  commit() {
+    const changed = Object.keys(this.draft).filter(
+      (key) => this.draft[key] !== this.committed[key]
+    );
+    this.committed = { ...this.draft };
+    this.fire("office-options-change", { values: { ...this.committed }, changed });
+    this.close();
+  }
+  onNavKey(event) {
+    const tabs = [...this.renderRoot.querySelectorAll('nav [role="tab"]')];
+    const at = tabs.findIndex((tab) => tab.getAttribute("aria-selected") === "true");
+    const step = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 }[event.key];
+    const target = event.key === "Home" ? tabs[0] : event.key === "End" ? tabs.at(-1) : step ? tabs[(at + step + tabs.length) % tabs.length] : void 0;
+    if (!target) return;
+    event.preventDefault();
+    this.category = target.dataset.category;
+    this.renderRoot.querySelector('nav [aria-selected="true"]')?.focus();
+  }
+  willUpdate(changed) {
+    if (!this.categories.some((category) => category.id === this.active))
+      this.active = this.categories[0]?.id ?? "";
+    if (changed.has("open") && present(this.open)) this.draft = { ...this.committed };
+  }
+  set(key, next) {
+    this.draft[key] = next;
+  }
+  control(control) {
+    const value = this.draft[control.key];
+    const disabled = Boolean(control.disabled);
+    const info = control.info ? html`<span class="info" title=${control.info} role="img" aria-label=${control.info}
+					>i</span
+				>` : "";
+    let body;
+    if (control.kind === "toggle")
+      body = html`<input
+					type="checkbox"
+					.checked=${value === true}
+					?disabled=${disabled}
+					@change=${(event) => this.set(control.key, event.target.checked)}
+				/><span>${control.label}</span>`;
+    else if (control.kind === "select") {
+      const current = String(value ?? control.choices[0]?.value ?? "");
+      body = html`<span>${control.label}</span
+				><select
+					?disabled=${disabled}
+					@change=${(event) => this.set(control.key, event.target.value)}
+				>
+					${control.choices.map(
+        (choice) => html`<option value=${choice.value} ?selected=${choice.value === current}
+								>${choice.label}</option
+							>`
+      )}
+				</select>`;
+    } else if (control.kind === "number")
+      body = html`<span>${control.label}</span
+				><input
+					type="number"
+					min=${control.min}
+					max=${control.max}
+					step=${ifDefined(control.step ? String(control.step) : void 0)}
+					.value=${value === void 0 ? "" : String(value)}
+					?disabled=${disabled}
+					@change=${(event) => {
+        const field = event.target;
+        const next = clampOptionNumber(field.value, control.min, control.max);
+        if (next === void 0) field.value = String(this.draft[control.key] ?? "");
+        else {
+          field.value = String(next);
+          this.set(control.key, next);
+        }
+      }}
+				/>${control.unit ? html`<span>${control.unit}</span>` : ""}`;
+    else
+      body = html`<span>${control.label}</span
+				><input
+					type="text"
+					maxlength=${ifDefined(control.maxLength ? String(control.maxLength) : void 0)}
+					.value=${value === void 0 ? "" : String(value)}
+					?disabled=${disabled}
+					@input=${(event) => this.set(control.key, event.target.value)}
+				/>`;
+    return html`<label
+			class="row${control.indent ? " indent" : ""}${control.kind === "toggle" ? "" : " field"}"
+			data-key=${control.key}
+			?data-disabled=${disabled}
+			title=${ifDefined(control.disabled)}
+			>${body}${info}</label
+		>`;
+  }
+  pane(category) {
+    if (!category) return "";
+    return html`
+			${category.description ? html`<p class="lead">${category.description}</p>` : ""}
+			${category.disabled ? html`<p class="unavailable">${category.disabled}</p>` : ""}
+			${category.sections.map(
+      (section) => html`<section>
+					<h3>${section.title}</h3>
+					${section.description ? html`<p class="desc">${section.description}</p>` : ""}
+					${section.controls.map((control) => this.control(control))}
+				</section>`
+    )}
+		`;
+  }
+  render() {
+    const category = this.categories.find((entry) => entry.id === this.active);
+    return html`
+			<office-ui-dialog
+				heading=${this.heading ?? "Options"}
+				?open=${present(this.open)}
+				@office-dialog-close=${(event) => {
+      if (!event.defaultPrevented) this.close();
+    }}
+			>
+				<div class="layout">
+					<nav
+						role="tablist"
+						aria-orientation="vertical"
+						aria-label="Categories"
+						@keydown=${this.onNavKey}
+					>
+						${this.categories.map(
+      (entry) => html`<button
+								type="button"
+								role="tab"
+								id="tab-${entry.id}"
+								data-category=${entry.id}
+								aria-controls="pane"
+								aria-selected=${String(entry.id === this.active)}
+								tabindex=${entry.id === this.active ? 0 : -1}
+								@click=${() => this.category = entry.id}
+								>${entry.label}</button
+							>`
+    )}
+					</nav>
+					<div
+						role="tabpanel"
+						id="pane"
+						aria-labelledby=${ifDefined(category ? `tab-${category.id}` : void 0)}
+						>${this.pane(category)}</div
+					>
+				</div>
+				<div slot="footer" class="actions">
+					<button type="button" data-action="ok" @click=${this.commit}>OK</button>
+					<button type="button" data-action="cancel" @click=${this.close}>Cancel</button>
+				</div>
+			</office-ui-dialog>
+		`;
+  }
+};
+var defineOptionsDialog = definer("office-ui-options-dialog", () => OfficeUiOptionsDialog);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/ribbon/ribbon-group.css?raw
+var ribbon_group_default = ":host {\n	display: inline-flex;\n	flex: none;\n	align-self: stretch;\n}\n.group {\n	position: relative;\n	box-sizing: border-box;\n	display: flex;\n	flex-direction: column;\n	justify-content: space-between;\n	min-height: var(--office-ribbon-group-height);\n	padding: var(--office-ribbon-group-padding);\n}\n/* Office draws a hairline between groups; a product may stop it short of the top and bottom. */\n.group::after {\n	content: '';\n	position: absolute;\n	top: var(--office-ribbon-separator-inset);\n	bottom: var(--office-ribbon-separator-inset);\n	inset-inline-end: 0;\n	width: var(--office-border-width);\n	background: var(--office-ribbon-separator);\n}\n:host(:last-child) .group::after {\n	content: none;\n}\n.row {\n	display: flex;\n	align-items: flex-start;\n	gap: var(--office-space-1);\n	flex: 1;\n}\n/* One-line groups centre their commands on the whole group box. */\n:host([data-compact-row]) .row {\n	align-items: center;\n}\n/* Several small drop-down galleries stack in columns of three. */\n:host([data-stack]) .row {\n	flex-direction: column;\n	align-items: stretch;\n	align-content: flex-start;\n	flex-wrap: wrap;\n	max-height: var(--office-ribbon-stack-max-height);\n	gap: var(--office-space-0);\n}\n::slotted(*) {\n	flex-shrink: 0;\n}\n.foot {\n	position: relative;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	padding: var(--office-ribbon-caption-padding);\n}\n.caption {\n	color: var(--office-muted-foreground);\n	font-size: var(--office-ribbon-caption-size);\n	line-height: var(--office-ribbon-caption-line-height);\n	text-align: center;\n	white-space: nowrap;\n}\n.launcher {\n	position: absolute;\n	inset-inline-end: var(--office-launcher-inset-end);\n	bottom: var(--office-launcher-inset-bottom);\n	display: inline-grid;\n	place-items: center;\n	width: var(--office-launcher-width);\n	height: var(--office-launcher-height);\n	padding: 0;\n	border: 0;\n	border-radius: var(--office-radius-xs);\n	background: transparent;\n	color: var(--office-muted-foreground);\n	cursor: pointer;\n}\n.launcher:hover:not(:disabled) {\n	background: var(--office-surface);\n	color: var(--office-foreground);\n}\n.launcher:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n}\n.launcher:disabled {\n	opacity: 0.45;\n	cursor: not-allowed;\n}\n.launcher[hidden] {\n	display: none;\n}\n.launcher svg {\n	width: var(--office-icon-size-xs);\n	height: var(--office-icon-size-xs);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n\n/* Collapsed (narrow window): the group is one button; its commands open in a popup. */\n.face {\n	display: none;\n}\n:host([data-collapsed]) .face {\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	justify-content: flex-start;\n	gap: var(--office-space-0);\n	min-width: var(--office-collapsed-group-min-width);\n	height: var(--office-command-large-height);\n	padding: var(--office-space-0) var(--office-space-1-5);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-foreground);\n	font: inherit;\n	font-size: var(--office-font-size-sm);\n	cursor: pointer;\n}\n:host([data-collapsed]) .face:hover,\n:host([data-open]) .face {\n	background: var(--office-selected);\n}\n.face:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n.face svg {\n	width: var(--office-command-large-icon);\n	height: var(--office-command-large-icon);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n	color: var(--office-command-icon-color);\n}\n.face svg.chev {\n	width: var(--office-icon-size-xs);\n	height: var(--office-icon-size-xs);\n	color: currentColor;\n}\n:host([data-collapsed]) .foot,\n:host([data-collapsed]) .row {\n	display: none;\n}\n:host([data-collapsed][data-open]) .row {\n	display: flex;\n	flex-wrap: wrap;\n	position: fixed;\n	top: var(--office-ribbon-collapse-y);\n	left: var(--office-ribbon-collapse-x);\n	z-index: var(--office-z-popover);\n	box-sizing: border-box;\n	max-width: calc(100vw - 2 * var(--office-space-2));\n	padding: var(--office-space-2);\n	background: var(--office-popover);\n	color: var(--office-popover-foreground);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-md);\n	box-shadow: var(--office-shadow);\n}\n\n@media (forced-colors: active) {\n	.group::after {\n		background: CanvasText;\n	}\n	.caption,\n	.launcher {\n		color: CanvasText;\n	}\n	:host([data-collapsed][data-open]) .row {\n		border-color: CanvasText;\n	}\n}\n";
+
+// src/ribbon/ribbon-group.ts
+function tokenPx(el, name, fallback) {
+  const value = el.ownerDocument.defaultView?.getComputedStyle(el).getPropertyValue(name).trim();
+  const px = value?.endsWith("px") ? parseFloat(value) : NaN;
+  return Number.isFinite(px) ? px : fallback;
+}
+var OfficeUiRibbonGroup = class extends OfficeElement {
+  static launcherEvent = "office-command";
+  static collapseEvent = "office-ribbon-collapse-toggle";
+  static styles = controlStyles(ribbon_group_default);
+  /** The group is configured by attributes, as it always was (see `OfficeElement.watched`). */
+  static watched = [
+    "label",
+    "launcher",
+    "launcher-label",
+    "launcher-disabled",
+    "icon",
+    "data-open"
+  ];
+  observer;
+  /** The launcher's event detail; null emits nothing. */
+  launcherDetail() {
+    const command = this.getAttribute("launcher");
+    return command ? { command } : null;
+  }
+  /** The registered icon on the collapsed face; a product subclass may map names. */
+  iconName() {
+    return this.getAttribute("icon") ?? "grid";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.observe();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.observer?.disconnect();
+  }
+  observe() {
+    this.observer?.disconnect();
+    if (!this.isConnected) return;
+    const Observer = this.ownerDocument.defaultView?.ResizeObserver;
+    if (Observer) this.observer ??= new Observer(() => this.measure());
+    const slot = this.renderRoot.querySelector("slot");
+    for (const el of slot?.assignedElements() ?? []) this.observer?.observe(el);
+    this.measure();
+  }
+  measure() {
+    const children = [...this.children];
+    const stackable = children.filter((el) => {
+      const gallery = el.matches('[mode="dropdown"]') ? el : el.querySelector('[mode="dropdown"]');
+      return gallery !== null && !gallery.hasAttribute("data-command-large");
+    });
+    this.toggleAttribute(
+      "data-stack",
+      stackable.length > 1 && stackable.length === children.length
+    );
+    const tallest = Math.max(0, ...children.map((el) => el.getBoundingClientRect().height));
+    if (tallest > 0)
+      this.toggleAttribute(
+        "data-compact-row",
+        tallest <= tokenPx(this, "--office-ribbon-compact-row-max", 36)
+      );
+  }
+  onLauncher() {
+    if (this.hasAttribute("launcher-disabled")) return;
+    const detail = this.launcherDetail();
+    if (detail) this.fire(this.constructor.launcherEvent, detail);
+  }
+  /** The overflow controller listens for this and owns which popup is open. */
+  onFace() {
+    this.fire(this.constructor.collapseEvent, void 0);
+  }
+  willUpdate() {
+    this.setAttribute("role", "group");
+    this.setAttribute("aria-label", this.getAttribute("label") ?? "");
+  }
+  render() {
+    const label = this.getAttribute("label") ?? "";
+    const launcherLabel = this.getAttribute("launcher-label") ?? `${label} options`;
+    return html`
+			<div class="group">
+				<button
+					class="face"
+					type="button"
+					aria-haspopup="true"
+					aria-label=${label}
+					aria-expanded=${String(this.hasAttribute("data-open"))}
+					title=${label}
+					@click=${this.onFace}
+					>${glyph(this.iconName(), "face-icon")}<span>${label}</span>${glyph("chevronDown", "chev")}</button
+				>
+				<div class="row">
+					<slot @slotchange=${this.observe}></slot>
+				</div>
+				<div class="foot">
+					<span class="caption">${label}</span>
+					<button
+						class="launcher"
+						type="button"
+						aria-label=${launcherLabel}
+						title=${launcherLabel}
+						?hidden=${!this.hasAttribute("launcher")}
+						?disabled=${this.hasAttribute("launcher-disabled")}
+						@click=${this.onLauncher}
+						>${glyph("launcher", "launcher-icon")}</button
+					>
+				</div>
+			</div>
+		`;
+  }
+};
+var defineRibbonGroup = definer("office-ui-ribbon-group", () => OfficeUiRibbonGroup);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/ribbon/ribbon-stack.css?raw
+var ribbon_stack_default = ":host {\n	display: inline-flex;\n	flex-direction: column;\n	align-items: flex-start;\n	justify-content: flex-start;\n	gap: var(--office-space-px);\n	align-self: stretch;\n}\n:host([orientation='horizontal']) {\n	flex-direction: row;\n	align-items: center;\n	gap: var(--office-space-0);\n	align-self: auto;\n}\n::slotted(*) {\n	flex-shrink: 0;\n}\n";
+
+// src/ribbon/ribbon-stack.ts
+var OfficeUiRibbonStack = class extends OfficeElement {
+  static styles = controlStyles(ribbon_stack_default);
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+var defineRibbonStack = definer("office-ui-ribbon-stack", () => OfficeUiRibbonStack);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/ribbon/ribbon-toolbar.css?raw
+var ribbon_toolbar_default = ":host {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: stretch;\n	gap: var(--office-space-0);\n	padding: var(--office-space-0) var(--office-space-1);\n	background: var(--office-surface);\n	border-bottom: var(--office-border-width) solid var(--office-border);\n}\n\n@media (forced-colors: active) {\n	:host {\n		border-bottom-color: CanvasText;\n		background: Canvas;\n	}\n}\n";
+
+// src/ribbon/ribbon-toolbar.ts
+var ITEM = "office-ui-button, office-ui-menu-button, office-ui-select, office-ui-checkbox, office-ui-switch";
+var OfficeUiToolbar = class extends OfficeElement {
+  static styles = controlStyles(ribbon_toolbar_default);
+  constructor() {
+    super();
+    this.addEventListener("keydown", (event) => this.onKey(event));
+  }
+  items() {
+    return [...this.querySelectorAll(ITEM)].filter(
+      (el) => !el.hasAttribute("disabled")
+    );
+  }
+  onKey(event) {
+    const vertical = this.getAttribute("aria-orientation") === "vertical";
+    const next = vertical ? "ArrowDown" : "ArrowRight";
+    const prev = vertical ? "ArrowUp" : "ArrowLeft";
+    if (![next, prev, "Home", "End"].includes(event.key)) return;
+    const items = this.items();
+    const from = items.findIndex((el) => el === event.target || el.contains(event.target));
+    if (from < 0 || items.length === 0) return;
+    event.preventDefault();
+    const index = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : (from + (event.key === next ? 1 : -1) + items.length) % items.length;
+    items[index]?.focus();
+  }
+  willUpdate() {
+    this.setAttribute("role", "toolbar");
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+var defineToolbar = definer("office-ui-toolbar", () => OfficeUiToolbar);
+
+// src/form/select-menu.ts
+var SELECT_OPTION_ATTRIBUTES = [
+  "value",
+  "disabled",
+  "label",
+  "selected",
+  "hidden",
+  "data-display-label",
+  "data-description",
+  "style"
+];
+function collectSelectChoices(options) {
+  return options.map((option) => {
+    const parent = option.parentElement;
+    const group = parent?.localName === "optgroup" ? parent : null;
+    return {
+      value: option.value,
+      label: option.label || option.textContent?.trim() || "",
+      disabled: option.disabled || Boolean(group?.disabled),
+      hidden: Boolean(option.hidden) || Boolean(group?.hidden),
+      group: group?.label ?? "",
+      ...option.dataset.displayLabel ? { displayLabel: option.dataset.displayLabel } : {},
+      ...option.dataset.description ? { description: option.dataset.description } : {},
+      ...option.style.fontFamily ? { fontFamily: option.style.fontFamily } : {}
+    };
+  });
+}
+function tokenPx2(el, name, fallback) {
+  const value = el.ownerDocument.defaultView?.getComputedStyle(el).getPropertyValue(name).trim();
+  const px = value?.endsWith("px") ? parseFloat(value) : NaN;
+  return Number.isFinite(px) ? px : fallback;
+}
+function positionSelectMenu(menu, trigger, host) {
+  const view = menu.ownerDocument.defaultView;
+  const rect = trigger.getBoundingClientRect();
+  const margin = tokenPx2(host, "--office-space-2", 8);
+  const gap = tokenPx2(host, "--office-space-1", 4);
+  const width = Math.max(0, view.innerWidth - margin * 2);
+  const below = Math.max(0, view.innerHeight - rect.bottom - gap - margin);
+  const above = Math.max(0, rect.top - gap - margin);
+  menu.style.minWidth = `${Math.min(rect.width, width)}px`;
+  menu.style.maxWidth = `${width}px`;
+  const cap = host.getAttribute("data-font-picker") === "family" ? tokenPx2(host, "--office-font-picker-max-height", 320) : tokenPx2(host, "--office-select-max-height", 240);
+  menu.style.maxHeight = `${cap}px`;
+  const preferred = menu.getBoundingClientRect().height;
+  const flip = below < preferred && above > below;
+  menu.style.maxHeight = `${Math.min(cap, flip ? above : below)}px`;
+  const { height, width: menuWidth } = menu.getBoundingClientRect();
+  menu.style.top = `${Math.max(margin, flip ? rect.top - gap - height : rect.bottom + gap)}px`;
+  menu.style.left = `${Math.max(margin, Math.min(rect.left, view.innerWidth - menuWidth - margin))}px`;
+}
+function nextSelectActive(choices, active, step) {
+  for (let i = 0; i < choices.length; i++) {
+    active = (active + step + choices.length) % choices.length;
+    if (!choices[active].disabled && !choices[active].hidden) return active;
+  }
+  return active;
+}
+var SELECT_PAGE_SIZE = 8;
+function pageSelectActive(choices, active, direction) {
+  const usable = (index) => !choices[index]?.disabled && !choices[index]?.hidden;
+  const last = choices.length - 1;
+  const target = Math.max(0, Math.min(last, Math.max(active, 0) + direction * SELECT_PAGE_SIZE));
+  for (let index = target; index >= 0 && index <= last; index -= direction)
+    if (usable(index)) return index;
+  return active;
+}
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/form/select.css?raw
+var select_default = "/*\n * `variant=\"ribbon-font\"` and `variant=\"ribbon-icon\"` are the compact ribbon combo and icon\n * picker; `data-font-picker=\"family\"` widens and lengthens the popup. Moved from pptx-viewer\n * (`select-styles.ts`, `select-ribbon-styles.ts`) and expressed in tokens.\n */\n:host {\n	display: inline-block;\n	box-sizing: border-box;\n	min-width: 0;\n	max-width: 100%;\n	color: var(--office-foreground);\n	font: inherit;\n	font-size: var(--office-font-size-sm);\n	vertical-align: middle;\n}\n:host([disabled]) {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\nbutton {\n	box-sizing: border-box;\n	width: 100%;\n	min-height: var(--office-field-height);\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-2-5);\n	padding: var(--office-space-1) var(--office-space-1-5);\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-field-radius);\n	background: var(--office-select-background);\n	color: inherit;\n	font: inherit;\n	font-size: inherit;\n	text-align: start;\n	cursor: pointer;\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\nbutton:disabled {\n	cursor: not-allowed;\n}\n.value {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.chevron svg {\n	display: none;\n}\n.chevron {\n	flex: none;\n	width: var(--office-chevron-size);\n	height: var(--office-chevron-size);\n	margin: 0 var(--office-space-0) var(--office-space-0) 0;\n	border-right: calc(var(--office-border-width) * 1.5) solid currentColor;\n	border-bottom: calc(var(--office-border-width) * 1.5) solid currentColor;\n	transform: rotate(45deg);\n}\n:host([open]) .chevron {\n	margin: var(--office-space-0) var(--office-space-0) 0 0;\n	transform: rotate(225deg);\n}\n\n.menu {\n	box-sizing: border-box;\n	position: fixed;\n	margin: 0;\n	padding: var(--office-space-1);\n	min-width: var(--office-select-menu-min-width);\n	max-height: min(var(--office-select-max-height), 50vh);\n	overflow: auto;\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-field-radius);\n	background: var(--office-popover);\n	color: var(--office-popover-foreground);\n	box-shadow: var(--office-shadow);\n	font: inherit;\n	font-size: inherit;\n}\n.menu:not(:popover-open):not([data-fallback-open]) {\n	display: none;\n}\n.option {\n	display: block;\n	box-sizing: border-box;\n	width: 100%;\n	padding: var(--office-space-1-5) var(--office-space-2);\n	border-radius: var(--office-radius-sm);\n	cursor: pointer;\n	white-space: nowrap;\n}\n.group {\n	padding: var(--office-space-1-5) var(--office-space-2) var(--office-space-0);\n	color: var(--office-muted-foreground);\n	font-size: 0.9em;\n	font-weight: var(--office-font-weight-bold);\n}\n.option:not([aria-disabled='true']):hover,\n.option[data-active]:not([aria-selected='true']) {\n	background: var(--office-select-option-active);\n}\n.option[aria-selected='true'] {\n	background: var(--office-accent);\n	color: var(--office-accent-foreground);\n}\n.option[aria-selected='true']:hover {\n	filter: brightness(1.08);\n}\n.option[aria-disabled='true'] {\n	opacity: 0.45;\n	cursor: not-allowed;\n}\n.description {\n	flex: none;\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-2xs);\n}\n\n/* Ribbon variants */\n:host([variant^='ribbon-'][disabled]) {\n	opacity: 0.4;\n}\n:host([variant^='ribbon-']) button {\n	height: var(--office-ribbon-combo-height);\n	min-height: var(--office-ribbon-combo-height);\n	padding: var(--office-space-1) var(--office-space-2);\n	gap: var(--office-space-1);\n	border: var(--office-border-width) solid\n		color-mix(in oklab, var(--office-border) 60%, transparent);\n	border-radius: var(--office-radius-sm);\n	font-size: var(--office-font-size-sm);\n	background: color-mix(in oklab, var(--office-background) 60%, transparent);\n	color: var(--office-foreground);\n}\n:host([variant^='ribbon-']) .value {\n	flex: 1;\n	min-width: 0;\n}\n:host([variant^='ribbon-']) .chevron {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	margin: 0;\n	border: 0;\n	transform: none;\n}\n:host([variant^='ribbon-']) .chevron svg {\n	display: block;\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n}\n:host([variant='ribbon-font']) .chevron {\n	color: var(--office-muted-foreground);\n}\n:host([variant='ribbon-font'][data-font-picker='size']) button {\n	padding-inline: var(--office-space-1-5);\n}\n:host([variant='ribbon-icon']) button {\n	width: var(--office-ribbon-icon-select-width);\n	gap: var(--office-space-1-5);\n	padding: var(--office-space-1-5) var(--office-space-2-5);\n	border: 0;\n	background: var(--office-surface);\n	justify-content: center;\n}\n:host([variant='ribbon-icon']) :is(.value, .chevron) {\n	display: none;\n}\n::slotted(svg[slot='icon']) {\n	display: block;\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	flex: none;\n}\n:host([variant^='ribbon-']) button:hover:not(:disabled) {\n	background: var(--office-selected);\n}\n:host([variant^='ribbon-']) .menu {\n	width: var(--office-select-ribbon-menu-width);\n	padding: var(--office-space-1) 0;\n	border-radius: var(--office-radius-lg);\n	font-size: var(--office-font-size-sm);\n}\n:host([data-font-picker='family']) .menu {\n	width: var(--office-font-picker-width);\n}\n:host([variant^='ribbon-']) .option {\n	display: flex;\n	justify-content: space-between;\n	gap: var(--office-space-3);\n	padding: var(--office-space-1-5) var(--office-space-3);\n	border-radius: 0;\n}\n:host([variant^='ribbon-']) .option[aria-selected='true'] {\n	background: transparent;\n	color: var(--office-foreground);\n}\n:host([variant^='ribbon-']) .option:hover,\n:host([variant^='ribbon-']) .option[data-active] {\n	background: var(--office-surface);\n	filter: none;\n}\n:host([variant^='ribbon-']) .group {\n	padding: var(--office-space-2) var(--office-space-3) var(--office-space-1);\n	text-transform: uppercase;\n	letter-spacing: 0.02em;\n	font-size: var(--office-font-size-2xs);\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n	button,\n	:host([variant^='ribbon-']) button {\n		min-height: var(--office-target-size-touch);\n	}\n	:host([variant^='ribbon-']) button {\n		height: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	button,\n	.menu {\n		border-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n	}\n	.option[aria-selected='true'],\n	.option[data-active],\n	.option:not([aria-disabled='true']):hover {\n		background: Highlight;\n		color: HighlightText;\n	}\n}\n";
+
+// src/form/select.ts
+var uid2 = 0;
+var OfficeUiSelect = class extends OfficeElement {
+  static formAssociated = true;
+  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+  static styles = controlStyles(select_default);
+  static properties = {
+    // `value` and `options` are derived from the `<option>` children, so they have accessors.
+    value: { type: String, reflect: true, noAccessor: true },
+    disabled: flag,
+    open: flag,
+    active: { state: true },
+    choices: { state: true },
+    opened: { state: true }
+  };
+  static get observedAttributes() {
+    return [...super.observedAttributes, "aria-label", "variant", "data-font-picker"];
+  }
+  internals;
+  observer;
+  menuId = `office-ui-select-options-${++uid2}`;
+  requested = null;
+  data = [];
+  refreshFrame = 0;
+  search = "";
+  searchTimer = 0;
+  defaultValue = "";
+  constructor() {
+    super();
+    this.disabled = false;
+    this.open = false;
+    this.active = -1;
+    this.choices = [];
+    this.opened = false;
+    try {
+      this.internals = this.attachInternals();
+    } catch {
+      this.internals = void 0;
+    }
+    const Observer = this.ownerDocument.defaultView?.MutationObserver;
+    this.observer = Observer ? new Observer(() => {
+      const view = this.ownerDocument.defaultView;
+      if (this.refreshFrame || !view) return;
+      this.refreshFrame = view.requestAnimationFrame(() => {
+        this.refreshFrame = 0;
+        this.refresh();
+      });
+    }) : void 0;
+  }
+  /** The `<option>` children, or the programmatic options when there are none. */
+  get options() {
+    const children = [...this.querySelectorAll("option")];
+    return children.length ? children : this.data;
+  }
+  set options(next) {
+    this.data = [...next];
+    this.refresh();
+  }
+  get value() {
+    const requested = this.requested;
+    const choices = this.choices.length ? this.choices : this.collect();
+    if (requested !== null && this.getAttribute("variant") === "ribbon-font") return requested;
+    if (requested !== null && (!choices.length || choices.some((c) => c.value === requested)))
+      return requested;
+    return [...this.querySelectorAll("option")].find((option) => option.selected)?.value ?? choices.find((choice) => !choice.disabled && !choice.hidden)?.value ?? choices[0]?.value ?? requested ?? "";
+  }
+  set value(next) {
+    this.requested = String(next ?? "");
+    this.requestUpdate("value", void 0);
+  }
+  get selectedIndex() {
+    return this.options.findIndex((option) => option.value === this.value);
+  }
+  set selectedIndex(index) {
+    this.value = this.options[index]?.value ?? "";
+  }
+  get menu() {
+    return this.renderRoot.querySelector(".menu");
+  }
+  get trigger() {
+    return this.renderRoot.querySelector("button");
+  }
+  focus(options) {
+    this.trigger?.focus(options);
+  }
+  formResetCallback() {
+    this.value = this.defaultValue;
+  }
+  formDisabledCallback(disabled) {
+    this.disabled = disabled;
+  }
+  connectedCallback() {
+    this.defaultValue = this.getAttribute("value") ?? "";
+    this.observer?.observe(this, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      characterData: true,
+      attributeFilter: SELECT_OPTION_ATTRIBUTES
+    });
+    this.choices = this.collect();
+    super.connectedCallback();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.open = false;
+    this.closePopup();
+    const view = this.ownerDocument.defaultView;
+    view?.clearTimeout(this.searchTimer);
+    this.searchTimer = 0;
+    this.search = "";
+    this.observer?.disconnect();
+    if (this.refreshFrame) view?.cancelAnimationFrame(this.refreshFrame);
+    this.refreshFrame = 0;
+  }
+  collect() {
+    const children = [...this.querySelectorAll("option")];
+    if (children.length) return collectSelectChoices(children);
+    return this.data.map((option) => ({
+      value: option.value,
+      label: option.label,
+      disabled: option.disabled === true,
+      hidden: false,
+      group: ""
+    }));
+  }
+  /** Re-read the choices after the `<option>` children or the `options` data changed. */
+  refresh() {
+    this.choices = this.collect();
+    this.requestUpdate();
+  }
+  isUsable(choice) {
+    return Boolean(choice) && !choice.disabled && !choice.hidden;
+  }
+  show() {
+    this.choices = this.collect();
+    if (present(this.disabled) || this.open || !this.choices.some((c) => this.isUsable(c))) return;
+    const selected = this.choices.findIndex((c) => c.value === this.value && this.isUsable(c));
+    this.active = selected >= 0 ? selected : this.choices.findIndex((c) => this.isUsable(c));
+    this.opened = true;
+    this.open = true;
+  }
+  close() {
+    this.open = false;
+  }
+  /** The popup is a top-layer popover: show or hide it as `open` changes. */
+  openPopup() {
+    const menu = this.menu;
+    if (!menu) return;
+    if (typeof menu.showPopover === "function") menu.showPopover();
+    this.position();
+    const view = this.ownerDocument.defaultView;
+    this.ownerDocument.addEventListener("pointerdown", this.onOutside, true);
+    view?.addEventListener("resize", this.position);
+    view?.addEventListener("scroll", this.position, true);
+  }
+  closePopup() {
+    const view = this.ownerDocument.defaultView;
+    view?.clearTimeout(this.searchTimer);
+    this.search = "";
+    try {
+      if (this.menu?.matches(":popover-open")) this.menu.hidePopover();
+    } catch {
+    }
+    this.ownerDocument.removeEventListener("pointerdown", this.onOutside, true);
+    view?.removeEventListener("resize", this.position);
+    view?.removeEventListener("scroll", this.position, true);
+  }
+  onOutside = (event) => {
+    if (!event.composedPath().includes(this)) this.close();
+  };
+  position = () => {
+    const { menu, trigger } = this;
+    if (this.open && menu && trigger) positionSelectMenu(menu, trigger, this);
+  };
+  move(step) {
+    if (!this.open) this.show();
+    if (this.open) this.active = nextSelectActive(this.choices, this.active, step);
+  }
+  commit(index) {
+    const choice = this.choices[index];
+    if (!choice || !this.isUsable(choice)) return;
+    const changed = this.value !== choice.value;
+    this.value = choice.value;
+    this.close();
+    this.trigger?.focus();
+    if (changed) {
+      this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    }
+  }
+  onKeyDown(event) {
+    if (present(this.disabled)) return;
+    const stop = () => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      stop();
+      this.move(event.key === "ArrowDown" ? 1 : -1);
+    } else if (event.key === "Home" || event.key === "End") {
+      stop();
+      this.show();
+      this.active = event.key === "Home" ? nextSelectActive(this.choices, -1, 1) : nextSelectActive(this.choices, 0, -1);
+    } else if (event.key === "PageUp" || event.key === "PageDown") {
+      stop();
+      this.show();
+      this.active = pageSelectActive(this.choices, this.active, event.key === "PageDown" ? 1 : -1);
+    } else if (event.key === "Enter" || event.key === " ") {
+      stop();
+      if (this.open) this.commit(this.active);
+      else this.show();
+    } else if (event.key === "Escape" && this.open) {
+      stop();
+      this.close();
+      this.trigger?.focus();
+    } else if (event.key === "Tab") this.close();
+    else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      event.stopPropagation();
+      this.typeAhead(event.key);
+    }
+  }
+  typeAhead(key) {
+    const view = this.ownerDocument.defaultView;
+    this.search += key.toLocaleLowerCase();
+    view?.clearTimeout(this.searchTimer);
+    this.searchTimer = view?.setTimeout(() => {
+      this.search = "";
+    }, 700) ?? 0;
+    this.show();
+    const index = this.choices.findIndex(
+      (choice) => this.isUsable(choice) && choice.label.toLocaleLowerCase().startsWith(this.search)
+    );
+    if (index >= 0) this.active = index;
+  }
+  willUpdate() {
+    this.choices = this.collect();
+    if (this.requested === null && this.choices.length) {
+      this.requested = this.value;
+      this.requestUpdate("value", void 0);
+    }
+    this.internals?.setFormValue?.(present(this.disabled) ? null : this.value);
+    if (present(this.disabled) && this.open) this.open = false;
+  }
+  updated(changed) {
+    if (changed.has("open")) {
+      if (this.open) this.openPopup();
+      else if (changed.get("open") !== void 0) this.closePopup();
+    }
+    if (this.open) {
+      this.position();
+      this.menu?.querySelector("[data-active]")?.scrollIntoView?.({ block: "nearest" });
+    }
+  }
+  optionTemplates() {
+    let previousGroup = "";
+    return this.choices.map((choice, index) => {
+      if (choice.hidden) return "";
+      const heading = choice.group && choice.group !== previousGroup ? html`<div class="group" role="presentation">${choice.group}</div>` : "";
+      previousGroup = choice.group;
+      const text = choice.displayLabel ?? choice.label;
+      const note = choice.description ? html`<span class="description">${choice.description}</span>` : "";
+      return html`${heading}<div
+					class="option"
+					role="option"
+					id="${this.menuId}-${index}"
+					data-index=${index}
+					?data-active=${this.open && index === this.active}
+					aria-selected=${String(choice.value === this.value)}
+					aria-disabled=${String(choice.disabled)}
+					style=${ifDefined(choice.fontFamily ? `font-family:${choice.fontFamily}` : void 0)}
+					>${text}${note}</div
+				>`;
+    });
+  }
+  render() {
+    const value = this.value;
+    const shown = this.choices.find((choice) => choice.value === value);
+    const name = this.getAttribute("aria-label");
+    const open = present(this.open);
+    const native = typeof HTMLElement.prototype.showPopover === "function";
+    return html`
+			<button
+				part="trigger"
+				type="button"
+				role="combobox"
+				aria-haspopup="listbox"
+				aria-expanded=${String(open)}
+				aria-controls=${this.menuId}
+				aria-label=${ifDefined(name ?? void 0)}
+				aria-activedescendant=${ifDefined(
+      open && this.active >= 0 ? `${this.menuId}-${this.active}` : void 0
+    )}
+				?disabled=${present(this.disabled)}
+				@click=${() => this.open ? this.close() : this.show()}
+				@keydown=${this.onKeyDown}
+			>
+				<slot name="icon"></slot>
+				<span class="value" part="value">${shown?.displayLabel ?? shown?.label ?? value}</span>
+				<span class="chevron" part="indicator" aria-hidden="true">
+					<svg
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<path d="m6 9 6 6 6-6"></path>
+					</svg>
+				</span>
+			</button>
+			<div
+				class="menu"
+				id=${this.menuId}
+				role="listbox"
+				popover="manual"
+				part="popup"
+				?data-fallback-open=${open && !native}
+				@pointerdown=${(event) => {
+      if (event.target.closest("[data-index]")) event.preventDefault();
+    }}
+				@click=${(event) => {
+      const target = event.target.closest("[data-index]");
+      if (target) this.commit(Number(target.dataset.index));
+    }}
+			>
+				${this.querySelector('[slot="custom"]') ? html`<slot name="custom"></slot>` : ""}
+				${this.opened ? keyed(value, this.optionTemplates()) : ""}
+			</div>
+		`;
+  }
+};
+var defineSelect = definer("office-ui-select", () => OfficeUiSelect);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/chrome/status-bar.css?raw
+var status_bar_default = ":host {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	min-height: var(--office-status-bar-height);\n	padding: 0 var(--office-space-2);\n	font-size: var(--office-font-size-xs);\n	background: var(--office-surface);\n	color: var(--office-foreground);\n	border-top: var(--office-border-width) solid var(--office-border);\n	font-family: var(--office-font);\n}\n::slotted([slot='end']) {\n	margin-inline-start: auto;\n}\n.bar {\n	display: contents;\n}\n[hidden] {\n	display: none !important;\n}\n:host([data-controlled]) {\n	display: block;\n	flex: none;\n	padding: 0;\n	gap: 0;\n}\n:host([data-controlled]) .bar {\n	box-sizing: border-box;\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1);\n	width: 100%;\n	min-height: var(--office-status-bar-height);\n	padding: var(--office-space-0) var(--office-space-2);\n	color: var(--office-muted-foreground);\n}\n:host([data-controlled]) ::slotted([slot='end']) {\n	margin-inline-start: 0;\n}\n.items {\n	display: flex;\n	align-items: center;\n	min-width: 0;\n}\n.item {\n	flex: none;\n	white-space: nowrap;\n}\n.item + .item::before {\n	content: '';\n	display: inline-block;\n	width: var(--office-border-width);\n	height: var(--office-space-3);\n	margin: 0 var(--office-space-2);\n	vertical-align: middle;\n	background: var(--office-border);\n}\n.item.saving {\n	color: var(--office-warning);\n}\n.item.error {\n	color: var(--office-danger);\n}\n.spacer {\n	flex: 1;\n}\n.toggles,\n.group {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-0);\n}\n.sep {\n	flex: none;\n	width: var(--office-border-width);\n	height: var(--office-space-3);\n	margin: 0 var(--office-space-0);\n	background: var(--office-border);\n}\n.bar button {\n	box-sizing: border-box;\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-1);\n	min-width: var(--office-control-height-xs);\n	min-height: var(--office-control-height-xs);\n	padding: var(--office-space-1);\n	border: 0;\n	border-radius: var(--office-radius-sm);\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n	touch-action: manipulation;\n}\n.bar button:hover {\n	background: var(--office-selected);\n	color: var(--office-foreground);\n}\n.bar button[aria-pressed='true'] {\n	color: var(--office-accent);\n}\n.bar button:active {\n	opacity: 0.8;\n}\n.bar button:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n.bar svg {\n	flex: none;\n	width: var(--office-icon-size);\n	height: var(--office-icon-size);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n.toggle svg,\n.zoom-step svg {\n	width: var(--office-icon-size-sm);\n	height: var(--office-icon-size-sm);\n}\n.zoom-fit {\n	min-width: var(--office-zoom-value-width);\n	font-variant-numeric: tabular-nums;\n}\n@media (max-width: 767px) {\n	.narrow-hide,\n	.toggle .label {\n		display: none !important;\n	}\n}\n@media (pointer: coarse) {\n	.bar button {\n		min-width: var(--office-target-size-touch);\n		min-height: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	:host {\n		background: Canvas;\n		color: CanvasText;\n		border-top-color: CanvasText;\n	}\n	.bar button {\n		color: ButtonText;\n	}\n	.bar button:hover {\n		background: Highlight;\n		color: HighlightText;\n	}\n	.bar button[aria-pressed='true'] {\n		border: var(--office-border-width) solid Highlight;\n	}\n	.bar button:focus-visible {\n		outline-color: Highlight;\n	}\n	.sep,\n	.item + .item::before {\n		background: CanvasText;\n	}\n}\n";
+
+// src/chrome/status-bar.ts
+var OfficeUiStatusBar = class extends OfficeElement {
+  static activateEvent = "office-status-activate";
+  static styles = controlStyles(status_bar_default);
+  static properties = {
+    // Setting `state` marks the bar controlled, so it has an accessor below.
+    label: { type: String },
+    hasCollaboration: { state: true }
+  };
+  model;
+  constructor() {
+    super();
+    this.label = null;
+    this.hasCollaboration = false;
+  }
+  get state() {
+    return this.model;
+  }
+  set state(value) {
+    this.model = value ?? void 0;
+    this.toggleAttribute("data-controlled", this.model !== void 0);
+    this.requestUpdate("state");
+  }
+  activate(id) {
+    this.fire(this.constructor.activateEvent, { id });
+  }
+  /** Keep native activation out of the host document's navigation shortcuts. */
+  onKeydown(event) {
+    const { key, ctrlKey, metaKey, altKey } = event;
+    if ((key === " " || key === "Enter") && !ctrlKey && !metaKey && !altKey)
+      event.stopPropagation();
+  }
+  willUpdate() {
+    this.setAttribute("role", "group");
+    if (!this.hasAttribute("aria-label")) this.setAttribute("aria-label", this.label ?? "Status");
+  }
+  button(className, spec) {
+    return html`<button
+			type="button"
+			class=${className}
+			data-id=${spec.id}
+			title=${spec.label}
+			aria-label=${spec.label}
+			aria-pressed=${ifDefined(spec.pressed === void 0 ? void 0 : String(spec.pressed))}
+			?hidden=${spec.hidden === true}
+			@click=${() => this.activate(spec.id)}
+			@keydown=${this.onKeydown}
+			>${glyph(spec.icon, "icon")}${spec.text ? html`<span class="label">${spec.text}</span>` : ""}</button
+		>`;
+  }
+  zoomStep(id, label, icon) {
+    return html`<button
+			type="button"
+			class="zoom-step"
+			data-id=${id}
+			title=${label}
+			aria-label=${label}
+			@click=${() => this.activate(id)}
+			@keydown=${this.onKeydown}
+			>${glyph(icon, "icon")}</button
+		>`;
+  }
+  render() {
+    const state = this.model;
+    const items = state?.items ?? [];
+    const toggles = state?.toggles ?? [];
+    const views = state?.views || [];
+    const zoom = state?.zoom;
+    const viewsHidden = views.every((spec) => spec.hidden === true);
+    const togglesHidden = toggles.every((spec) => spec.hidden === true);
+    const zoomHidden = !zoom || zoom.hidden === true;
+    return html`
+			<div class="bar" part="bar">
+				<span class="items" ?hidden=${items.length === 0}>
+					${repeat(
+      items,
+      (spec) => spec.id,
+      (spec) => html`<span
+							class="item${spec.tone === "saving" ? " saving" : ""}${spec.tone === "error" ? " error" : ""}${spec.narrowHide ? " narrow-hide" : ""}"
+							data-item=${spec.id}
+							title=${ifDefined(spec.title)}
+							aria-live=${ifDefined(spec.live ? "polite" : void 0)}
+							>${spec.text}</span
+						>`
+    )}
+				</span>
+				<slot></slot>
+				<span class="spacer" ?hidden=${!state}></span>
+				<span class="toggles" ?hidden=${togglesHidden}>
+					${repeat(
+      toggles,
+      (spec) => spec.id,
+      (spec) => this.button("toggle", spec)
+    )}
+				</span>
+				<i class="sep tight" aria-hidden="true" ?hidden=${viewsHidden || togglesHidden}></i>
+				<div class="group views" ?hidden=${viewsHidden}>
+					${repeat(
+      views,
+      (spec) => spec.id,
+      (spec) => this.button("view", spec)
+    )}
+				</div>
+				<i class="sep tight" aria-hidden="true" ?hidden=${!this.hasCollaboration}></i>
+				<slot
+					name="collaboration"
+					@slotchange=${(event) => this.hasCollaboration = event.target.assignedNodes().length > 0}
+				></slot>
+				<slot name="end"></slot>
+				<i class="sep tight" aria-hidden="true" ?hidden=${zoomHidden}></i>
+				<div class="group zoom" ?hidden=${zoomHidden}>
+					${this.zoomStep("zoomOut", zoom?.outLabel ?? "", zoom?.outIcon ?? "minus")}
+					<button
+						type="button"
+						class="zoom-fit"
+						data-id="zoomFit"
+						title=${zoom?.fitLabel ?? ""}
+						aria-label=${zoom?.fitLabel ?? ""}
+						@click=${() => this.activate("zoomFit")}
+						@keydown=${this.onKeydown}
+						>${zoom ? `${Math.round(zoom.percent)}%` : ""}</button
+					>${this.zoomStep("zoomIn", zoom?.inLabel ?? "", zoom?.inIcon ?? "plus")}</div
+				>
+			</div>
+		`;
+  }
+};
+var defineStatusBar = definer("office-ui-status-bar", () => OfficeUiStatusBar);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/chrome/status-item.css?raw
+var status_item_default = ":host {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-1);\n	white-space: nowrap;\n}\n.label {\n	color: var(--office-muted-foreground);\n}\nbutton {\n	all: unset;\n	display: inline-flex;\n	gap: var(--office-space-1);\n	align-items: center;\n	cursor: pointer;\n	padding: 0 var(--office-space-1);\n	min-height: var(--office-target-size);\n	border-radius: var(--office-radius-sm);\n}\nbutton:hover {\n	background: var(--office-background);\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n}\n@media (forced-colors: active) {\n	.label {\n		color: GrayText;\n	}\n	button:focus-visible {\n		outline-color: Highlight;\n	}\n}\nspan.wrap {\n	display: inline-flex;\n	gap: var(--office-space-1);\n}\n";
+
+// src/chrome/status-item.ts
+var OfficeUiStatusItem = class extends OfficeElement {
+  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+  static styles = controlStyles(status_item_default);
+  static properties = {
+    label: { type: String },
+    value: { type: String, reflect: true },
+    interactive: flag
+  };
+  constructor() {
+    super();
+    this.label = "";
+    this.value = "";
+    this.interactive = false;
+  }
+  render() {
+    const content = html`${this.label ? html`<span class="label">${this.label}</span>` : ""}<span
+				class="value"
+				>${this.value}</span
+			>`;
+    return this.interactive ? html`<button
+					type="button"
+					class="wrap"
+					@click=${() => this.fire("office-status-activate", { id: this.getAttribute("id") ?? "" })}
+					>${content}</button
+				>` : html`<span class="wrap">${content}</span>`;
+  }
+};
+var defineStatusItem = definer("office-ui-status-item", () => OfficeUiStatusItem);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/chrome/tab-strip.css?raw
+var tab_strip_default = ":host {\n	display: flex;\n	align-items: stretch;\n	min-width: 0;\n	min-height: var(--office-tab-height);\n	gap: var(--office-space-0);\n	padding: 0 var(--office-space-1-5);\n	background: var(--office-surface);\n	color: var(--office-muted-foreground);\n	border-top: var(--office-border-width) solid var(--office-border);\n	font-size: var(--office-font-size-sm);\n	font-family: var(--office-font);\n}\n.step {\n	flex: none;\n	display: inline-grid;\n	place-items: center;\n	width: var(--office-target-size);\n	min-height: var(--office-target-size);\n	padding: 0;\n	border: 0;\n	background: transparent;\n	color: inherit;\n	cursor: pointer;\n}\n.step:disabled {\n	opacity: 0.4;\n	cursor: default;\n}\n.add {\n	font-size: var(--office-font-size-xl);\n	line-height: 1;\n}\n.add[hidden] {\n	display: none;\n}\n.list {\n	display: flex;\n	align-items: stretch;\n	min-width: 0;\n	overflow-x: auto;\n	scrollbar-width: thin;\n}\n.tab {\n	flex: none;\n	max-width: var(--office-tab-max-width);\n	min-height: var(--office-target-size);\n	margin-top: calc(-1 * var(--office-space-px));\n	padding: var(--office-space-0) var(--office-space-3-5);\n	overflow: hidden;\n	white-space: nowrap;\n	text-overflow: ellipsis;\n	border: var(--office-border-width) solid transparent;\n	border-top: 0;\n	border-radius: 0 0 var(--office-radius) var(--office-radius);\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\n.tab:hover {\n	color: var(--office-foreground);\n}\n.tab[aria-selected='true'] {\n	border-color: var(--office-border);\n	background: var(--office-background);\n	color: var(--office-accent);\n	font-weight: 600;\n	box-shadow: inset 0 var(--office-border-width-thick) 0 var(--office-accent);\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(-1 * var(--office-focus-width));\n}\nsvg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n@media (forced-colors: active) {\n	:host {\n		border-top-color: CanvasText;\n	}\n	.tab[aria-selected='true'] {\n		background: Highlight;\n		color: HighlightText;\n		forced-color-adjust: none;\n	}\n}\n";
+
+// src/chrome/tab-strip.ts
+var KEY_STEPS = {
+  ArrowLeft: -1,
+  ArrowRight: 1,
+  ArrowUp: -1,
+  ArrowDown: 1
+};
+var OfficeUiTabStrip = class extends OfficeElement {
+  static styles = controlStyles(tab_strip_default);
+  static properties = {
+    // `tabs` is sanitised and copied, `selected` reads as '' when unset: both have accessors.
+    selected: { type: String, noAccessor: true },
+    label: { type: String },
+    previousLabel: { attribute: "previous-label", type: String },
+    nextLabel: { attribute: "next-label", type: String },
+    addLabel: { attribute: "add-label", type: String },
+    addTitle: { attribute: "add-title", type: String },
+    addDisabled: { attribute: "add-disabled", ...flag },
+    disabled: flag
+  };
+  items = [];
+  picked = null;
+  constructor() {
+    super();
+    this.label = null;
+    this.previousLabel = null;
+    this.nextLabel = null;
+    this.addLabel = null;
+    this.addTitle = null;
+    this.addDisabled = false;
+    this.disabled = false;
+  }
+  get tabs() {
+    return this.items.map((tab) => ({ ...tab }));
+  }
+  set tabs(value) {
+    this.items = (Array.isArray(value) ? value : []).filter((tab) => tab && typeof tab.id === "string").map((tab) => ({
+      id: tab.id,
+      label: String(tab.label ?? ""),
+      ...tab.title === void 0 ? {} : { title: String(tab.title) }
+    }));
+    this.requestUpdate("tabs");
+  }
+  get selected() {
+    return this.picked ?? "";
+  }
+  set selected(id) {
+    this.picked = id === null ? null : String(id);
+    this.reflectAttribute("selected", this.picked, {});
+    this.requestUpdate("selected");
+  }
+  index() {
+    return this.items.findIndex((tab) => tab.id === this.selected);
+  }
+  move(delta, focus) {
+    const target = this.items[Math.max(0, Math.min(this.items.length - 1, this.index() + delta))];
+    if (target) this.choose(target.id, focus);
+  }
+  choose(id, focus) {
+    if (present(this.disabled)) return;
+    if (id !== this.selected && this.fire("office-tab-select", { id }, true)) this.selected = id;
+    if (focus)
+      [...this.renderRoot.querySelectorAll(".tab")].find((tab) => tab.dataset.id === this.selected)?.focus();
+  }
+  onListClick(event) {
+    const tab = event.target.closest(".tab");
+    if (tab?.dataset.id !== void 0) this.choose(tab.dataset.id, false);
+  }
+  onKey(event) {
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      const target = event.key === "Home" ? this.items[0] : this.items[this.items.length - 1];
+      if (target) this.choose(target.id, true);
+    } else if (KEY_STEPS[event.key] !== void 0) {
+      event.preventDefault();
+      this.move(KEY_STEPS[event.key], true);
+    }
+  }
+  updated(_changed) {
+    this.renderRoot.querySelector('.tab[aria-selected="true"]')?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+  }
+  render() {
+    const disabled = present(this.disabled);
+    const index = this.index();
+    const previous = this.previousLabel || "Previous";
+    const next = this.nextLabel || "Next";
+    return html`
+			<button
+				type="button"
+				class="step"
+				aria-label=${previous}
+				title=${previous}
+				?disabled=${disabled || index <= 0}
+				@click=${() => this.move(-1, false)}
+				>${glyph("chevronLeft", "icon")}</button
+			>
+			<button
+				type="button"
+				class="step"
+				aria-label=${next}
+				title=${next}
+				?disabled=${disabled || index < 0 || index >= this.items.length - 1}
+				@click=${() => this.move(1, false)}
+				>${glyph("chevronRight", "icon")}</button
+			>
+			<div
+				class="list"
+				role="tablist"
+				aria-label=${this.label ?? "Tabs"}
+				@click=${this.onListClick}
+				@keydown=${this.onKey}
+			>
+				${this.items.map((item, at) => {
+      const selected = item.id === this.selected;
+      return html`<button
+						type="button"
+						class="tab"
+						role="tab"
+						data-id=${item.id}
+						title=${item.title ?? item.label}
+						aria-selected=${String(selected)}
+						tabindex=${selected || index < 0 && at === 0 ? 0 : -1}
+						?disabled=${disabled}
+						>${item.label}</button
+					>`;
+    })}
+			</div>
+			<button
+				type="button"
+				class="step add"
+				aria-label=${this.addLabel ?? "Add"}
+				title=${this.addTitle ?? this.addLabel ?? ""}
+				?hidden=${!this.addLabel}
+				?disabled=${disabled || present(this.addDisabled)}
+				@click=${() => !present(this.addDisabled) && this.fire("office-command", { command: "tab-add" })}
+				>+</button
+			>
+		`;
+  }
+};
+var defineTabStrip = definer("office-ui-tab-strip", () => OfficeUiTabStrip);
+
+// src/chrome/title-bar-types.ts
+var OFFICE_TITLE_BAR_SEARCH_LIMIT = 8;
+function matchTitleBarCommands(search, query) {
+  if (search.match) return search.match(query);
+  const needle = query.trim().toLowerCase();
+  return (search.commands ?? []).filter((entry) => entry.label.toLowerCase().includes(needle));
+}
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/chrome/title-bar.css?raw
+var title_bar_default = ":host {\n	display: block;\n	flex: none;\n}\n:host([data-empty]) {\n	display: none !important;\n}\n[hidden] {\n	display: none !important;\n}\n.bar {\n	box-sizing: border-box;\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1);\n	width: 100%;\n	height: var(--office-title-bar-height);\n	padding: 0 var(--office-space-2);\n	border-bottom: var(--office-border-width) solid var(--office-title-bar-border);\n	background: var(--office-title-bar-background);\n	color: var(--office-title-bar-foreground);\n	font: var(--office-font-size-xs)/var(--office-line-height-tight) var(--office-font);\n	user-select: none;\n}\n:host([placement='belowRibbon']) .bar {\n	height: auto;\n	min-height: var(--office-title-bar-below-height);\n	padding-block: var(--office-space-0);\n}\n.mark {\n	flex: none;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	width: var(--office-title-bar-mark-size);\n	height: var(--office-title-bar-mark-size);\n	border-radius: var(--office-radius-sm);\n	background: var(--office-title-bar-mark-background);\n	color: var(--office-title-bar-mark-foreground);\n	font-size: var(--office-font-size-2xs);\n	font-weight: var(--office-font-weight-bold);\n}\n.autosave {\n	flex: none;\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1-5);\n	padding: 0 var(--office-space-0) 0 var(--office-space-1-5);\n	white-space: nowrap;\n}\n.label,\n.dot,\n.status {\n	color: var(--office-muted-foreground);\n	white-space: nowrap;\n}\n.sep {\n	flex: none;\n	width: var(--office-border-width);\n	height: var(--office-space-4);\n	margin: 0 var(--office-space-1);\n	background: var(--office-title-bar-border);\n}\n.qat {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-0);\n	min-width: 0;\n}\n.qat button,\n.results button {\n	box-sizing: border-box;\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-1);\n	min-width: var(--office-control-height-md);\n	min-height: var(--office-control-height-md);\n	padding: var(--office-space-1);\n	border: 0;\n	border-radius: var(--office-radius-sm);\n	background: transparent;\n	color: var(--office-muted-foreground);\n	font: inherit;\n	cursor: pointer;\n	touch-action: manipulation;\n}\n.qat button:hover:not(:disabled) {\n	background: var(--office-selected);\n}\n.qat button:active:not(:disabled) {\n	opacity: 0.7;\n}\n.qat button:disabled {\n	opacity: 0.4;\n	cursor: not-allowed;\n}\n.qat small {\n	font-size: var(--office-font-size-xs);\n	white-space: nowrap;\n}\nsvg {\n	flex: none;\n	width: var(--office-icon-size);\n	height: var(--office-icon-size);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n.file {\n	display: flex;\n	align-items: baseline;\n	gap: var(--office-space-1-5);\n	min-width: 0;\n	padding: 0 var(--office-space-1);\n	flex: 0 1 auto;\n}\n.name {\n	max-width: var(--office-title-bar-name-max-width);\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n	color: var(--office-title-bar-foreground);\n	font-size: var(--office-font-size-sm);\n	font-weight: var(--office-font-weight-medium);\n}\n.status.saving {\n	color: var(--office-warning);\n}\n.status.error {\n	color: var(--office-danger);\n}\n.search {\n	position: relative;\n	flex: 1;\n	display: flex;\n	justify-content: center;\n	min-width: 0;\n	padding: 0 var(--office-space-2);\n}\n.box {\n	position: relative;\n	width: 100%;\n	max-width: var(--office-title-bar-search-max-width);\n	min-width: 0;\n}\n.box > [part='search'] {\n	width: 100%;\n}\n.results {\n	position: absolute;\n	z-index: var(--office-z-popover);\n	top: calc(100% + var(--office-space-1));\n	right: 0;\n	left: 0;\n	max-height: var(--office-title-bar-results-max-height);\n	overflow-y: auto;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-lg);\n	background: var(--office-popover);\n	color: var(--office-popover-foreground);\n	box-shadow: var(--office-shadow-lg);\n}\n.heading {\n	padding: var(--office-space-1-5) var(--office-space-3);\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-2xs);\n	font-weight: var(--office-font-weight-bold);\n	letter-spacing: 0.05em;\n	text-transform: uppercase;\n}\n.empty {\n	padding: var(--office-space-2) var(--office-space-3);\n	color: var(--office-muted-foreground);\n}\n.results button {\n	display: flex;\n	width: 100%;\n	justify-content: flex-start;\n	gap: var(--office-space-2);\n	padding: var(--office-space-1-5) var(--office-space-3);\n	border-radius: 0;\n	color: inherit;\n	text-align: start;\n}\n.results button:hover,\n.results button[aria-selected='true'] {\n	background: var(--office-selected);\n}\n.results .cat {\n	margin-inline-start: auto;\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-2xs);\n	text-transform: capitalize;\n}\n.results .content {\n	border-top: var(--office-border-width) solid var(--office-border);\n}\n.end {\n	flex: none;\n	display: flex;\n	align-items: center;\n	justify-content: flex-end;\n	gap: var(--office-space-1);\n}\n.sr {\n	position: absolute;\n	width: var(--office-space-px);\n	height: var(--office-space-px);\n	overflow: hidden;\n	clip-path: inset(50%);\n	white-space: nowrap;\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n@media (max-width: 767px), (max-width: 1023px) and (max-height: 520px) {\n	:host(:not([placement='belowRibbon'])) {\n		display: none !important;\n	}\n}\n@media (max-width: 1100px) {\n	.qat small {\n		display: none;\n	}\n	.name {\n		max-width: var(--office-title-bar-name-max-width-narrow);\n	}\n}\n@media (pointer: coarse) {\n	.qat button,\n	.results button {\n		min-width: var(--office-target-size-touch);\n		min-height: var(--office-target-size-touch);\n	}\n	.bar {\n		height: auto;\n		min-height: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	.bar {\n		border-bottom-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n	}\n	.mark {\n		border: var(--office-border-width) solid CanvasText;\n		background: Canvas;\n		color: CanvasText;\n	}\n	.label,\n	.dot,\n	.status,\n	.name,\n	.qat button,\n	.results button {\n		color: CanvasText;\n	}\n	.sep {\n		background: CanvasText;\n	}\n	.qat button:hover:not(:disabled),\n	.results button:hover,\n	.results button[aria-selected='true'] {\n		background: Highlight;\n		color: HighlightText;\n	}\n	.qat button:disabled {\n		color: GrayText;\n		opacity: 1;\n	}\n	.results {\n		border-color: CanvasText;\n		background: Canvas;\n	}\n	button:focus-visible {\n		outline-color: Highlight;\n	}\n}\n";
+
+// src/chrome/title-bar.ts
+var EMPTY = { fileName: "" };
+var OfficeUiTitleBar = class extends OfficeElement {
+  static autosaveEvent = "office-autosave-toggle";
+  static commandEvent = "office-command";
+  static searchEvent = "office-command-search";
+  /** Inner controls; a product subclass may use its own aliased tags. */
+  static switchTag = "office-ui-switch";
+  static searchTag = "office-ui-search";
+  static styles = controlStyles(title_bar_default);
+  static properties = {
+    placement: { type: String, noAccessor: true },
+    stop: { state: true },
+    found: { state: true },
+    active: { state: true },
+    resultsOpen: { state: true },
+    live: { state: true }
+  };
+  model = EMPTY;
+  constructor() {
+    super();
+    this.stop = "";
+    this.found = [];
+    this.active = 0;
+    this.resultsOpen = false;
+    this.live = "";
+  }
+  get state() {
+    return this.model;
+  }
+  set state(value) {
+    this.model = value ?? EMPTY;
+    this.requestUpdate("state");
+  }
+  /** Read from the attribute, so a subclass that intercepts attribute changes still sees it. */
+  get placement() {
+    return this.getAttribute("placement") === "belowRibbon" ? "belowRibbon" : "titleBar";
+  }
+  set placement(value) {
+    if (this.getAttribute("placement") !== value) this.setAttribute("placement", value);
+    this.requestUpdate("placement");
+  }
+  /** The search field inside the bar, for hosts that move focus to it (Alt+Q). */
+  get searchField() {
+    this.ensureRendered();
+    return this.renderRoot.querySelector('[part="search"]');
+  }
+  /** A Quick Access button was pressed; subclasses may route by id. */
+  activate(id) {
+    this.fire(this.constructor.commandEvent, { command: id });
+  }
+  /** Called after every render; subclasses mirror state onto the host here. */
+  rendered() {
+  }
+  // ---- Quick Access Toolbar -------------------------------------------------------------
+  enabledButtons() {
+    return [...this.renderRoot.querySelectorAll(".qat button:not(:disabled)")];
+  }
+  onQatFocus(event) {
+    const target = event.target.closest("button");
+    if (target?.dataset.command) this.stop = target.dataset.command;
+  }
+  onQatKey(event) {
+    if (event.ctrlKey || event.metaKey || event.altKey) return;
+    const list = this.enabledButtons();
+    const index = list.findIndex((b) => b === event.target.closest("button"));
+    const last = list.length - 1;
+    const moves = {
+      ArrowRight: (index + 1) % list.length,
+      ArrowLeft: (index + last) % list.length,
+      Home: 0,
+      End: last
+    };
+    const next = moves[event.key] ?? -1;
+    if (next >= 0 && index >= 0) {
+      event.preventDefault();
+      list[next]?.focus();
+    }
+    if (next >= 0 || event.key === " " || event.key === "Enter") event.stopPropagation();
+  }
+  quickAccess() {
+    const qa = this.model.quickAccess;
+    const items = qa?.items ?? [];
+    const enabled = items.filter((item) => item.disabled !== true);
+    const current = enabled.find((item) => item.id === this.stop) ?? enabled[0];
+    return html`<div
+			class="qat"
+			role="toolbar"
+			part="quick-access"
+			aria-label=${qa?.label ?? ""}
+			?hidden=${items.length === 0}
+			@focusin=${this.onQatFocus}
+			@keydown=${this.onQatKey}
+		>
+			${repeat(
+      items,
+      (item) => item.id,
+      (item) => html`<button
+					type="button"
+					data-command=${item.id}
+					aria-label=${item.label}
+					title=${ifDefined(item.title)}
+					tabindex=${item === current ? 0 : -1}
+					?disabled=${item.disabled === true}
+					@click=${() => this.activate(item.id)}
+					>${glyph(item.icon, "icon")}${qa?.showLabels === true ? html`<small>${item.label}</small>` : ""}</button
+				>`
+    )}
+		</div>`;
+  }
+  // ---- Command search -------------------------------------------------------------------
+  get query() {
+    return this.searchField?.value ?? "";
+  }
+  openResults() {
+    const search = this.model.search;
+    const query = this.query;
+    if (!search || !query.trim()) return this.closeResults();
+    this.found = [...matchTitleBarCommands(search, query)].slice(0, OFFICE_TITLE_BAR_SEARCH_LIMIT);
+    this.active = Math.min(this.active, Math.max(this.found.length - 1, 0));
+    this.resultsOpen = true;
+    this.live = this.found.length > 0 ? search.heading : search.empty;
+  }
+  closeResults() {
+    this.resultsOpen = false;
+    this.live = "";
+    this.found = [];
+  }
+  commit(entry) {
+    const query = this.query;
+    this.searchField.value = "";
+    this.closeResults();
+    this.fire(
+      this.constructor.searchEvent,
+      entry ? { query, command: entry.id } : { query }
+    );
+  }
+  onSearchKey(event) {
+    const { key, ctrlKey, metaKey } = event;
+    const field = this.searchField;
+    if (key === "Enter" && field.value.trim()) this.commit(this.found[this.active]);
+    else if (key === "Escape" && field.value) {
+      field.value = "";
+      this.closeResults();
+    } else if ((key === "ArrowDown" || key === "ArrowUp") && this.found.length > 0) {
+      event.preventDefault();
+      this.active = (this.active + (key === "ArrowDown" ? 1 : this.found.length - 1)) % this.found.length;
+    }
+    if (!ctrlKey && !metaKey) event.stopPropagation();
+  }
+  onSearchBlur(event) {
+    const next = event.relatedTarget;
+    const box = this.renderRoot.querySelector(".box");
+    if (!next || !box?.contains(next)) this.closeResults();
+  }
+  results(search) {
+    if (!search || !this.resultsOpen)
+      return html`<div class="results" role="listbox" hidden></div>
+				<div class="sr" role="status"></div>`;
+    const query = this.query;
+    const pick = (event, run) => {
+      event.preventDefault();
+      run();
+    };
+    return html`
+			<div class="results" role="listbox" ?hidden=${!this.resultsOpen}>
+				${this.found.length > 0 ? html`<div class="heading">${search.heading}</div> ${this.found.map(
+      (entry, index) => html`<button
+										type="button"
+										role="option"
+										tabindex="-1"
+										aria-selected=${String(index === this.active)}
+										@mousedown=${(event) => pick(event, () => this.commit(entry))}
+										@mouseenter=${() => this.active = index}
+										><span>${entry.label}</span
+										><span class="cat">${entry.category ?? ""}</span></button
+									>`
+    )}` : html`<div class="empty">${search.empty}</div>`}
+				${search.content ? html`<button
+								type="button"
+								class="content"
+								tabindex="-1"
+								@mousedown=${(event) => pick(event, () => this.commit())}
+								>${glyph(search.contentIcon ?? "search", "icon")}<span
+									>${search.content(query)}</span
+								></button
+							>` : ""}
+			</div>
+			<div class="sr" role="status">${this.live}</div>
+		`;
+  }
+  searchBox() {
+    const search = this.model.search;
+    const tag = unsafeStatic(this.constructor.searchTag);
+    return html`<span class="search" ?hidden=${!search}>
+			<div class="box" ?hidden=${!search} @focusout=${this.onSearchBlur}>
+				${html$1`<${tag}
+					variant="titlebar"
+					part="search"
+					placeholder=${ifDefined(search?.placeholder)}
+					aria-label=${ifDefined(search?.label)}
+					@input=${() => {
+      this.active = 0;
+      this.openResults();
+    }}
+					@focusin=${this.openResults}
+					@keydown=${this.onSearchKey}
+				></${tag}>`}
+				${this.results(search)}
+			</div>
+		</span>`;
+  }
+  // ---- AutoSave, mark and file name -----------------------------------------------------
+  autosave() {
+    const autosave = this.model.autosave;
+    const tag = unsafeStatic(this.constructor.switchTag);
+    return html`<span class="autosave" ?hidden=${!autosave}>
+				<span class="label">${autosave?.label ?? ""}</span>
+				${html$1`<${tag}
+					class="switch"
+					part="autosave-switch"
+					aria-label=${autosave?.toggleLabel ?? ""}
+					title=${autosave ? autosave.title ?? autosave.toggleLabel : ""}
+					.checked=${autosave?.enabled === true}
+					?disabled=${autosave?.available === false}
+					@change=${(event) => {
+      this.fire(this.constructor.autosaveEvent, null);
+      event.target.checked = this.model.autosave?.enabled === true;
+    }}
+				></${tag}>`}
+				<span class="label">${autosave?.stateLabel ?? ""}</span>
+			</span>
+			<i class="sep" aria-hidden="true" ?hidden=${!autosave}></i>`;
+  }
+  willUpdate(changed) {
+    const items = this.model.quickAccess?.items ?? [];
+    this.toggleAttribute("data-empty", this.placement === "belowRibbon" && items.length === 0);
+    if (changed.has("state") && this.resultsOpen) this.openResults();
+  }
+  updated() {
+    this.rendered();
+  }
+  render() {
+    const state = this.model;
+    const below = this.placement === "belowRibbon";
+    const items = state.quickAccess?.items ?? [];
+    if (below) return html`<div class="bar" part="bar">${this.quickAccess()}</div>`;
+    return html`
+			<div class="bar" part="bar">
+				<span class="mark" aria-hidden="true" ?hidden=${!state.appMark}
+					>${state.appMark ?? ""}</span
+				>
+				${this.autosave()} ${this.quickAccess()}
+				<i class="sep" aria-hidden="true" ?hidden=${items.length === 0}></i>
+				<span class="file">
+					<span class="name" part="file-name">${state.fileName}</span>
+					<span class="dot" aria-hidden="true" ?hidden=${!state.status}>•</span>
+					<span
+						class="status${state.tone === "saving" ? " saving" : ""}${state.tone === "error" ? " error" : ""}"
+						?hidden=${!state.status}
+						>${state.status ?? ""}</span
+					>
+				</span>
+				${this.searchBox()}
+				<div class="end">
+					<slot name="collaboration"></slot>
+					<slot name="account"></slot>
+				</div>
+			</div>
+		`;
+  }
+};
+var defineTitleBar = definer("office-ui-title-bar", () => OfficeUiTitleBar);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/form/zoom-slider.css?raw
+var zoom_slider_default = ":host {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-0);\n	font-size: var(--office-font-size-xs);\n	color: var(--office-foreground);\n	font-family: var(--office-font);\n}\nbutton {\n	box-sizing: border-box;\n	display: inline-grid;\n	place-items: center;\n	min-width: var(--office-target-size);\n	min-height: var(--office-target-size);\n	padding: 0;\n	border: var(--office-border-width) solid transparent;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	font-size: var(--office-font-size-lg);\n	line-height: 1;\n	cursor: pointer;\n}\nbutton:hover:not(:disabled) {\n	background: var(--office-background);\n}\nbutton:focus-visible,\ninput:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\nbutton:disabled,\ninput:disabled {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\ninput {\n	width: var(--office-zoom-slider-width);\n	min-width: var(--office-zoom-slider-min-width);\n	margin: 0 var(--office-space-0);\n	accent-color: var(--office-accent);\n}\noutput {\n	min-width: var(--office-zoom-value-width);\n	text-align: center;\n	font-variant-numeric: tabular-nums;\n}\nsvg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n:host(:not([fit])) .fit {\n	display: none;\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n	input {\n		flex: 1;\n	}\n}\n@media (forced-colors: active) {\n	button {\n		color: ButtonText;\n	}\n	button:disabled {\n		color: GrayText;\n	}\n}\n";
+
+// src/form/zoom-slider.ts
+var clampTo = (value, min, max) => Math.min(max, Math.max(min, Math.round(value)));
+var finite = (value, fallback) => Number.isFinite(value) ? value : fallback;
+var OfficeUiZoomSlider = class extends OfficeElement {
+  static styles = controlStyles(zoom_slider_default);
+  static properties = {
+    // `value` clamps to the range, so it has a hand-written accessor below.
+    value: { type: Number, reflect: true, noAccessor: true },
+    min: { type: Number },
+    max: { type: Number },
+    step: { type: Number },
+    disabled: flag,
+    fit: { type: String, reflect: true },
+    label: { type: String },
+    outLabel: { type: String, attribute: "out-label" },
+    inLabel: { type: String, attribute: "in-label" },
+    sliderLabel: { type: String, attribute: "slider-label" }
+  };
+  requested = 100;
+  constructor() {
+    super();
+    this.min = 10;
+    this.max = 400;
+    this.step = 10;
+    this.disabled = false;
+    this.fit = null;
+    this.label = null;
+    this.outLabel = null;
+    this.inLabel = null;
+    this.sliderLabel = null;
+  }
+  get value() {
+    return clampTo(this.requested, this.low, this.high);
+  }
+  set value(next) {
+    const old = this.value;
+    this.requested = finite(Number(next), 100);
+    this.requestUpdate("value", old);
+  }
+  get low() {
+    return finite(this.min, 10);
+  }
+  get high() {
+    return Math.max(this.low, finite(this.max, 400));
+  }
+  /** Office buttons snap to the next multiple of `step`, so 67% steps to 70%, not 77%. */
+  stepBy(direction) {
+    const step = Math.max(1, finite(this.step, 10));
+    const current = this.value;
+    const next = direction > 0 ? Math.floor(current / step) * step + step : Math.ceil(current / step) * step - step;
+    this.commit(next, "change");
+  }
+  commit(next, type) {
+    if (present(this.disabled)) return;
+    const value = clampTo(next, this.low, this.high);
+    if (value === this.value && type === "change") return;
+    this.value = value;
+    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    if (type === "change")
+      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  }
+  willUpdate() {
+    this.setAttribute("role", "group");
+    this.setAttribute("aria-label", this.label ?? "Zoom");
+  }
+  render() {
+    const { value } = this;
+    const disabled = present(this.disabled);
+    const fit = this.fit || "Fit";
+    const out = this.outLabel || "Zoom out";
+    const inn = this.inLabel || "Zoom in";
+    return html`
+			<button
+				type="button"
+				aria-label=${out}
+				title=${out}
+				?disabled=${disabled || value <= this.low}
+				@click=${() => this.stepBy(-1)}
+				>−</button
+			>
+			<input
+				type="range"
+				aria-label=${this.sliderLabel || "Zoom"}
+				aria-valuetext="${value}%"
+				min=${this.low}
+				max=${this.high}
+				.value=${String(value)}
+				?disabled=${disabled}
+				@input=${(event) => this.commit(event.target.valueAsNumber, "input")}
+				@change=${() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true }))}
+			/>
+			<button
+				type="button"
+				aria-label=${inn}
+				title=${inn}
+				?disabled=${disabled || value >= this.high}
+				@click=${() => this.stepBy(1)}
+				>+</button
+			>
+			<output>${value}%</output>
+			<button
+				class="fit"
+				type="button"
+				aria-label=${fit}
+				title=${fit}
+				?disabled=${disabled}
+				@click=${() => this.fire("office-command", { command: "zoom-fit" })}
+				>${glyph("fitPage", "fit-icon")}</button
+			>
+		`;
+  }
+};
+var defineZoomSlider = definer("office-ui-zoom-slider", () => OfficeUiZoomSlider);
+
+// src/keytips.ts
+var BADGE_CSS = "position:fixed;inset:auto;margin:0;padding:0;border:0;background:transparent;overflow:visible;pointer-events:none";
+var TIP_CSS = `position:fixed;transform:translate(-50%,-30%);min-width:${tok("--office-icon-size")};padding:${tok("--office-space-px")} ${tok("--office-space-1")};border:${tok("--office-border-width")} solid ${tok("--office-keytip-border")};border-radius:${tok("--office-radius-xs")};background:${tok("--office-keytip-background")};color:${tok("--office-keytip-foreground")};font:${tok("--office-font-weight-bold")} ${tok("--office-font-size-xs")}/${tok("--office-icon-size")} ${tok("--office-font")};text-align:center;box-shadow:${tok("--office-shadow-sm")}`;
+var isDisabled = (el) => el.hasAttribute("disabled") || el.getAttribute("aria-disabled") === "true";
+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();
+}
+function attachKeyTips(scope) {
+  const doc = (scope instanceof ShadowRoot ? scope.host : scope).ownerDocument;
+  const view = doc.defaultView;
+  const layer = doc.createElement("div");
+  layer.setAttribute("aria-hidden", "true");
+  layer.style.cssText = BADGE_CSS;
+  const topLayer = typeof layer.showPopover === "function";
+  if (topLayer) layer.setAttribute("popover", "manual");
+  else layer.hidden = true;
+  scope.append(layer);
+  let levels = [];
+  let typed = "";
+  let altAlone = false;
+  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);
+  const render2 = () => {
+    if (!handle.active) return;
+    layer.replaceChildren(
+      ...current().map((el) => {
+        const box = el.getBoundingClientRect();
+        const tip = doc.createElement("span");
+        tip.textContent = el.dataset.keytip;
+        tip.style.cssText = `${TIP_CSS};left:${Math.round(box.left + box.width / 2)}px;top:${Math.round(box.bottom - 4)}px;opacity:${isDisabled(el) || typed && !el.dataset.keytip.startsWith(typed) ? "0.45" : "1"}`;
+        return tip;
+      })
+    );
+  };
+  const show = () => {
+    if (topLayer && !layer.matches(":popover-open")) layer.showPopover?.();
+    else layer.hidden = false;
+    render2();
+  };
+  const stop = () => {
+    levels = [];
+    typed = "";
+    if (topLayer) {
+      try {
+        layer.hidePopover?.();
+      } catch {
+      }
+    } else layer.hidden = true;
+    layer.replaceChildren();
+    handle.active = false;
+  };
+  const start = () => {
+    levels = [];
+    typed = "";
+    handle.active = true;
+    show();
+  };
+  const choose = (el) => {
+    typed = "";
+    if (isDisabled(el)) return render2();
+    const panel = el.dataset.keytipPanel;
+    activate(el);
+    const next = panel ? [...scope.querySelectorAll("[data-keytip-level]")].find((el2) => el2.id === panel) ?? null : null;
+    if (next) {
+      levels.push(next);
+      view?.requestAnimationFrame ? view.requestAnimationFrame(render2) : render2();
+    } else stop();
+  };
+  const onKeyDown = (event) => {
+    const key = event;
+    if (key.key === "Alt") {
+      altAlone = !key.ctrlKey && !key.metaKey && !key.shiftKey;
+      return;
+    }
+    altAlone = false;
+    if (!handle.active) return;
+    if (key.key === "Escape") {
+      key.preventDefault();
+      key.stopPropagation();
+      typed = "";
+      if (levels.length) {
+        levels.pop();
+        render2();
+      } else stop();
+      return;
+    }
+    if (key.key.length !== 1 || key.ctrlKey || key.metaKey) return stop();
+    key.preventDefault();
+    key.stopPropagation();
+    typed += key.key.toUpperCase();
+    const candidates = current().filter((el) => el.dataset.keytip.toUpperCase().startsWith(typed));
+    const exact = candidates.find((el) => el.dataset.keytip.toUpperCase() === typed);
+    if (exact) choose(exact);
+    else if (!candidates.length) typed = "";
+    render2();
+  };
+  const onKeyUp = (event) => {
+    const key = event;
+    if (key.key !== "Alt" || !altAlone) return;
+    altAlone = false;
+    key.preventDefault();
+    if (handle.active) stop();
+    else start();
+  };
+  const onPointer = () => {
+    if (handle.active) stop();
+  };
+  const target = scope;
+  target.addEventListener("keydown", onKeyDown, true);
+  target.addEventListener("keyup", onKeyUp, true);
+  target.addEventListener("pointerdown", onPointer, true);
+  view?.addEventListener("blur", onPointer);
+  const handle = {
+    active: false,
+    dispose() {
+      stop();
+      target.removeEventListener("keydown", onKeyDown, true);
+      target.removeEventListener("keyup", onKeyUp, true);
+      target.removeEventListener("pointerdown", onPointer, true);
+      view?.removeEventListener("blur", onPointer);
+      layer.remove();
+    }
+  };
+  return handle;
+}
+
+// src/controls.ts
+var CONTROL_DEFINERS = [
+  defineIcon,
+  defineButton,
+  defineCheckbox,
+  defineSwitch,
+  defineSelect,
+  defineRibbonGroup,
+  defineRibbonStack,
+  defineMenuItem,
+  defineMenuSeparator,
+  defineMenuButton,
+  defineContextMenu,
+  defineCommandSearch,
+  defineToolbar,
+  defineDialog,
+  defineStatusBar,
+  defineStatusItem,
+  defineZoomSlider,
+  defineTabStrip,
+  defineOptionsDialog,
+  defineAccount,
+  defineRibbon,
+  defineFindBar,
+  defineRuler,
+  defineBackstage,
+  definePrintPreview,
+  defineRadio,
+  defineSearchField,
+  defineRibbonToggle,
+  defineDialogFooter,
+  defineToasts,
+  defineReadOnlyBanner,
+  definePasteOptions,
+  defineTitleBar,
+  defineRibbonSection,
+  defineGallery
+];
+function registerControls(registry) {
+  for (const define of CONTROL_DEFINERS) define(registry);
+}
+
+export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineGallery, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonSection, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, glyph, nextEnabledIndex, parseSvgPreview, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile };