ooxml-ui 1.12.3 → 1.14.0

package/dist/{chunk-735S7V4M.js → chunk-LAVVSCRJ.js}

@@ -1,7 +1,7 @@
 import { createIconSvg, paintIcon, getIcon } from './chunk-M6GF5ED2.js';
-import { initialsOf } from './chunk-L7JV5FVE.js';
-import { OfficeElement, controlStyles, definer, valueOn, flag, present, triState, withTokens, emit } from './chunk-OGNNNTKI.js';
-import { tok, OFFICE_TOKENS } from './chunk-SPNWHKSR.js';
+import { initialsOf } from './chunk-KNC2UEUR.js';
+import { OfficeElement, controlStyles, definer, valueOn, flag, present, triState, withTokens, emit } from './chunk-CWBSXK7P.js';
+import { tok, OFFICE_TOKENS } from './chunk-LD3K2RDN.js';
 import { html, LitElement, nothing, render, svg } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -1496,8 +1496,14 @@ var OfficeUiPrintPreview = class extends OfficeElement {
 };
 var definePrintPreview = definer("office-ui-print-preview", () => OfficeUiPrintPreview);
 
+// src/ribbon/auto-collapse.ts
+var SHORT_VIEWPORT_MEDIA = "(max-height: 500px)";
+function resolveCollapsed(shortViewport, userChoice) {
+  return userChoice ?? shortViewport;
+}
+
 // raw-css:/home/runner/work/ooxml/ooxml/src/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[role='tab'][data-contextual],\n[role='tab'][data-contextual][aria-selected='true'] {\n	color: var(--office-ribbon-contextual);\n}\n[role='tab'][data-contextual][aria-selected='true']::after {\n	background: var(--office-ribbon-contextual);\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/* The auto start margin keeps the actions, and the collapse button after them, at the right end of\n   the tab row even while the slot is empty. */\nslot[name='actions'] {\n	display: flex;\n	flex: none;\n	align-items: center;\n	gap: var(--office-space-1);\n	margin-inline: auto var(--office-space-1);\n}\n\n.collapse {\n	flex: none;\n	align-self: center;\n	width: var(--office-target-size);\n	height: var(--office-target-size);\n	margin-inline: 0 var(--office-space-1);\n	padding: 0;\n	border: 0;\n	border-radius: var(--office-radius-sm);\n	background: none;\n	color: var(--office-muted-foreground);\n	cursor: pointer;\n}\n.collapse[hidden] {\n	display: none;\n}\n.collapse:hover {\n	background: var(--office-surface);\n}\n.collapse:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n}\n.collapse .glyph {\n	width: var(--office-icon-size);\n	height: var(--office-icon-size);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: 1.5;\n	transform: rotate(90deg);\n}\n.collapse[aria-pressed='true'] .glyph {\n	transform: rotate(-90deg);\n}\n:host([collapsed][peek]) {\n	position: relative;\n}\n:host([collapsed][peek]) ::slotted([data-ribbon-tab]:not([hidden])) {\n	position: absolute;\n	inset: 100% 0 auto;\n	z-index: 60;\n	border-bottom: var(--office-border-width) solid var(--office-border);\n	background: var(--office-background);\n	box-shadow: var(--office-shadow);\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";
+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	scroll-snap-type: x proximity;\n	scroll-padding-inline: var(--office-space-4);\n	overscroll-behavior-x: contain;\n	-webkit-overflow-scrolling: touch;\n}\n[role='tablist']::-webkit-scrollbar {\n	display: none;\n}\n[role='tab'] {\n	scroll-snap-align: start;\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[role='tab'][data-contextual],\n[role='tab'][data-contextual][aria-selected='true'] {\n	color: var(--office-ribbon-contextual);\n}\n[role='tab'][data-contextual][aria-selected='true']::after {\n	background: var(--office-ribbon-contextual);\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/* The auto start margin keeps the actions, and the collapse button after them, at the right end of\n   the tab row even while the slot is empty. */\nslot[name='actions'] {\n	display: flex;\n	flex: none;\n	align-items: center;\n	gap: var(--office-space-1);\n	margin-inline: auto var(--office-space-1);\n}\n\n.collapse {\n	flex: none;\n	align-self: center;\n	width: var(--office-target-size);\n	height: var(--office-target-size);\n	margin-inline: 0 var(--office-space-1);\n	padding: 0;\n	border: 0;\n	border-radius: var(--office-radius-sm);\n	background: none;\n	color: var(--office-muted-foreground);\n	cursor: pointer;\n}\n.collapse[hidden] {\n	display: none;\n}\n.collapse:hover {\n	background: var(--office-surface);\n}\n.collapse:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n}\n.collapse .glyph {\n	width: var(--office-icon-size);\n	height: var(--office-icon-size);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: 1.5;\n	transform: rotate(90deg);\n}\n.collapse[aria-pressed='true'] .glyph {\n	transform: rotate(-90deg);\n}\n:host([collapsed][peek]) {\n	position: relative;\n}\n:host([collapsed][peek]) ::slotted([data-ribbon-tab]:not([hidden])) {\n	position: absolute;\n	inset: 100% 0 auto;\n	z-index: 60;\n	border-bottom: var(--office-border-width) solid var(--office-border);\n	background: var(--office-background);\n	box-shadow: var(--office-shadow);\n}\n\n@media (max-width: 760px), (pointer: coarse) {\n	.file,\n	[role='tab'] {\n		min-height: var(--office-target-size-touch);\n	}\n	[role='tab'] {\n		min-width: var(--office-target-size-touch);\n	}\n}\n@media (pointer: coarse) {\n	.collapse {\n		width: var(--office-target-size-touch);\n		height: var(--office-target-size-touch);\n	}\n}\n@media (max-width: 760px), (pointer: coarse) {\n	.file {\n		min-width: var(--office-ribbon-file-min-width);\n	}\n}\n/* A phone portrait row cannot hold the tabs and the actions: the tabs keep the first row (File and a\n   scrolling tab strip) and the actions wrap under them. */\n@media (max-width: 520px) {\n	.head {\n		flex-wrap: wrap;\n	}\n	[role='tablist'] {\n		flex: 1 1 12rem;\n	}\n	slot[name='actions'] {\n		order: 2;\n	}\n	.collapse {\n		order: 3;\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 {
@@ -1596,7 +1602,19 @@ var OfficeUiRibbon = class extends OfficeElement {
       };
     });
   }
+  /** The user's own collapse choice; it wins over the automatic one on short viewports. */
+  userCollapsed;
+  shortQuery;
+  /** Collapses to the tab row on a short viewport (phone landscape) unless the user chose. */
+  applyAuto = () => {
+    if (!this.collapsible) return;
+    const next = resolveCollapsed(this.shortQuery?.matches ?? false, this.userCollapsed);
+    if (next === this.collapsed) return;
+    this.collapsed = next;
+    this.peek = false;
+  };
   setCollapsed(value) {
+    this.userCollapsed = value;
     if (value === this.collapsed) return;
     this.collapsed = value;
     this.peek = false;
@@ -1617,6 +1635,7 @@ var OfficeUiRibbon = class extends OfficeElement {
       this.peek = false;
   }
   willUpdate(changed) {
+    if (changed.has("collapsible")) this.applyAuto();
     if (changed.has("peek")) {
       const doc = this.ownerDocument;
       if (this.peek) doc.addEventListener("pointerdown", this.onOutside, true);
@@ -1656,6 +1675,9 @@ var OfficeUiRibbon = class extends OfficeElement {
     this.build();
     super.connectedCallback();
     this.addEventListener("keydown", this.onHostKey);
+    this.shortQuery = this.ownerDocument.defaultView?.matchMedia?.(SHORT_VIEWPORT_MEDIA);
+    this.shortQuery?.addEventListener("change", this.applyAuto);
+    this.applyAuto();
     const Observer = this.ownerDocument.defaultView?.MutationObserver;
     this.watcher = Observer ? new Observer(() => this.build()) : void 0;
     this.watcher?.observe(this, {
@@ -1668,6 +1690,7 @@ var OfficeUiRibbon = class extends OfficeElement {
     super.disconnectedCallback();
     this.removeEventListener("keydown", this.onHostKey);
     this.watcher?.disconnect();
+    this.shortQuery?.removeEventListener("change", this.applyAuto);
     this.ownerDocument.removeEventListener("pointerdown", this.onOutside, true);
     this.watcher = void 0;
   }
@@ -1677,6 +1700,14 @@ var OfficeUiRibbon = class extends OfficeElement {
     const hideAll = this.collapsed && !this.peek;
     for (const panel of this.panels())
       panel.hidden = hideAll || panel.dataset.ribbonTab !== selected;
+    const active = this.tabButton(selected);
+    const list = active?.parentElement;
+    if (active && list && list.scrollWidth > list.clientWidth) {
+      const tab = active.getBoundingClientRect();
+      const view = list.getBoundingClientRect();
+      if (tab.left < view.left) list.scrollLeft -= view.left - tab.left;
+      else if (tab.right > view.right) list.scrollLeft += tab.right - view.right;
+    }
   }
   render() {
     const selected = this.selected;
@@ -3772,39 +3803,123 @@ var OfficeUiMenuButton = class _OfficeUiMenuButton extends OfficeElement {
   }
 };
 var defineMenuButton = definer("office-ui-menu-button", () => OfficeUiMenuButton);
-
-// raw-css:/home/runner/work/ooxml/ooxml/src/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;
 }
+function optionRow(host, control) {
+  const { draft } = host;
+  const value = draft[control.key];
+  const locked = Boolean(control.disabled) || control.enabledBy && draft[control.enabledBy] !== true;
+  const disabled = Boolean(locked);
+  const info = control.info ? html`<span class="info" title=${control.info} role="img" aria-label=${control.info}>i</span>` : "";
+  const label = html`<span class="label">${control.label}${info}</span>`;
+  let body;
+  if (control.kind === "toggle")
+    body = html`${label}<input
+				type="checkbox"
+				.checked=${value === true}
+				?disabled=${disabled}
+				@change=${(event) => host.set(control.key, event.target.checked)}
+			/>`;
+  else if (control.kind === "select") {
+    const current = String(value ?? control.choices[0]?.value ?? "");
+    body = html`${label}<select
+				aria-label=${control.label}
+				?disabled=${disabled}
+				@change=${(event) => host.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`${label}<span class="number"
+				><input
+					type="number"
+					min=${control.min}
+					max=${control.max}
+					step=${ifDefined(control.step ? String(control.step) : void 0)}
+					aria-label=${control.label}
+					.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(draft[control.key] ?? "");
+      else {
+        field.value = String(next);
+        host.set(control.key, next);
+      }
+    }}
+				/>${control.unit ? html`<span class="unit">${control.unit}</span>` : ""}</span
+			>`;
+  else
+    body = html`${label}<input
+				type="text"
+				maxlength=${ifDefined(control.maxLength ? String(control.maxLength) : void 0)}
+				aria-label=${control.label}
+				.value=${value === void 0 ? "" : String(value)}
+				?disabled=${disabled}
+				@input=${(event) => host.set(control.key, event.target.value)}
+			/>`;
+  return html`<label
+		class="row${control.indent ? " indent" : ""}"
+		data-key=${control.key}
+		?data-disabled=${disabled}
+		title=${ifDefined(control.disabled)}
+		>${body}</label
+	>`;
+}
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/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	--office-dialog-max-height: 88vh;\n}\n.custom {\n	max-height: calc(88vh - var(--office-options-chrome-height));\n	overflow: auto;\n	font-size: var(--office-font-size-sm);\n}\n.layout {\n	display: grid;\n	grid-template-columns: var(--office-options-nav-width) minmax(0, 1fr);\n	height: var(--office-options-height);\n	max-height: calc(88vh - var(--office-options-chrome-height));\n	margin: calc(-1 * var(--office-space-4));\n	font-size: var(--office-font-size-sm);\n}\nnav {\n	display: flex;\n	flex-direction: column;\n	gap: var(--office-space-0);\n	padding: var(--office-space-2);\n	border-inline-end: var(--office-border-width) solid var(--office-border);\n	overflow: auto;\n}\nnav button {\n	padding: var(--office-space-2) var(--office-space-2-5);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	text-align: start;\n	white-space: nowrap;\n	cursor: pointer;\n}\nnav button:hover {\n	background: var(--office-selected);\n}\nnav button[aria-selected='true'] {\n	background: color-mix(in srgb, var(--office-accent) 14%, transparent);\n	color: var(--office-accent);\n	font-weight: 600;\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	min-width: 0;\n	padding: var(--office-space-3-5) var(--office-space-5);\n	overflow: auto;\n}\n.lead {\n	margin: 0 0 var(--office-space-3);\n	font-weight: 600;\n}\n.unavailable {\n	margin: 0 0 var(--office-space-3);\n	color: var(--office-muted-foreground);\n}\nsection {\n	margin: 0 0 var(--office-space-4);\n}\nh3 {\n	margin: 0 0 var(--office-space-1);\n	padding-bottom: var(--office-space-0);\n	border-bottom: var(--office-border-width) solid var(--office-border);\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-2xs);\n	font-weight: 700;\n	letter-spacing: 0.04em;\n	text-transform: uppercase;\n}\n.desc {\n	margin: 0 0 var(--office-space-2);\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-xs);\n}\n.row {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-3);\n	min-height: var(--office-options-row-height);\n	padding: var(--office-space-0) 0;\n	cursor: pointer;\n}\n.row.indent {\n	padding-inline-start: var(--office-space-6);\n}\n.row[data-disabled] {\n	color: var(--office-muted-foreground);\n	cursor: default;\n}\n.label {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-1);\n	min-width: 0;\n}\ninput[type='text'],\ninput[type='number'],\nselect {\n	box-sizing: border-box;\n	max-width: 55%;\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-field-background);\n	color: var(--office-field-foreground);\n	font: inherit;\n}\ninput[type='text']:focus-visible,\ninput[type='number']:focus-visible,\nselect:focus-visible {\n	border-color: var(--office-field-border-focus);\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(-1 * var(--office-focus-width));\n}\ninput[type='text'] {\n	width: var(--office-options-text-width);\n}\ninput[type='number'] {\n	width: var(--office-options-number-width);\n	text-align: end;\n}\ninput:disabled,\nselect:disabled {\n	opacity: 0.55;\n}\ninput[type='checkbox'] {\n	flex: none;\n	width: var(--office-options-check-size);\n	height: var(--office-options-check-size);\n	margin: 0;\n	appearance: none;\n	display: inline-grid;\n	place-content: center;\n	box-sizing: border-box;\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	cursor: inherit;\n}\ninput[type='checkbox']:checked {\n	border-color: var(--office-checkbox-accent);\n	background: var(--office-checkbox-accent);\n}\ninput[type='checkbox']:checked::after {\n	content: '';\n	width: calc(var(--office-options-check-size) * 0.7);\n	height: calc(var(--office-options-check-size) * 0.7);\n	background: var(--office-checkbox-accent-foreground);\n	clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%);\n}\ninput[type='checkbox']:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n@media (forced-colors: active) {\n	input[type='checkbox']:checked {\n		background: Highlight;\n	}\n	input[type='checkbox']:checked::after {\n		background: HighlightText;\n	}\n}\n.number {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-1-5);\n}\n.unit {\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-xs);\n}\n.info {\n	display: inline-grid;\n	place-items: center;\n	flex: none;\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-3xs);\n	font-style: normal;\n	color: var(--office-accent);\n	opacity: 0.75;\n	cursor: help;\n}\n.actions {\n	display: flex;\n	flex: 1;\n	justify-content: flex-end;\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	padding: 0 var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius);\n	background: var(--office-surface);\n	color: inherit;\n	font: inherit;\n	font-size: var(--office-font-size-sm);\n	cursor: pointer;\n}\n.actions button:hover {\n	background: var(--office-selected);\n}\n.actions .primary {\n	border-color: var(--office-accent);\n	background: var(--office-accent);\n	color: var(--office-accent-foreground);\n}\n.actions .primary:hover {\n	background: var(--office-accent);\n	filter: brightness(1.08);\n}\n@media (max-width: 767px) {\n	.layout {\n		grid-template-columns: minmax(0, 1fr);\n		grid-template-rows: auto minmax(0, 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	.actions button {\n		min-height: var(--office-target-size-touch);\n	}\n	.row {\n		min-height: var(--office-target-size-touch);\n	}\n	input[type='text'],\n	input[type='number'],\n	select {\n		min-height: var(--office-target-size-touch);\n	}\n	.actions {\n		flex-wrap: wrap;\n	}\n}\n@media (forced-colors: active) {\n	nav button[aria-selected='true'] {\n		outline: var(--office-border-width) solid Highlight;\n	}\n}\n";
+
+// src/dialog/options-dialog.ts
+var DEFAULT_LABELS = {
+  ok: "OK",
+  cancel: "Cancel",
+  reset: "Reset all options",
+  categories: "Categories",
+  close: "Close"
+};
 var OfficeUiOptionsDialog = class extends OfficeElement {
   static styles = controlStyles(options_dialog_default);
   static properties = {
     open: flag,
+    live: flag,
+    customBody: { ...flag, attribute: "custom-body" },
     heading: { type: String },
     categories: { attribute: false },
+    defaults: { attribute: false },
+    labels: { attribute: false },
     // `values` keeps a private copy and `category` validates its id, so both have accessors.
     active: { state: true }
   };
   committed = {};
-  draft = {};
+  draftValues = {};
   constructor() {
     super();
     this.open = false;
+    this.live = false;
+    this.customBody = false;
     this.heading = null;
     this.categories = [];
+    this.defaults = null;
+    this.labels = {};
     this.active = "";
   }
+  get draft() {
+    return this.draftValues;
+  }
   get values() {
     return { ...this.committed };
   }
   set values(value) {
     this.committed = { ...value };
-    if (!present(this.open)) this.draft = { ...value };
+    if (!present(this.open) || present(this.live)) this.draftValues = { ...value };
     this.requestUpdate("values");
   }
   /** The selected category id. */
@@ -3817,16 +3932,33 @@ var OfficeUiOptionsDialog = class extends OfficeElement {
   show() {
     this.open = true;
   }
+  /** Closes without applying: the draft is dropped and `office-options-cancel` is emitted. */
   close() {
+    const wasOpen = present(this.open);
     this.open = false;
+    if (wasOpen) this.fire("office-options-cancel", {});
   }
   commit() {
-    const changed = Object.keys(this.draft).filter(
-      (key) => this.draft[key] !== this.committed[key]
+    const changed = Object.keys(this.draftValues).filter(
+      (key) => this.draftValues[key] !== this.committed[key]
     );
-    this.committed = { ...this.draft };
+    this.committed = { ...this.draftValues };
     this.fire("office-options-change", { values: { ...this.committed }, changed });
-    this.close();
+    this.open = false;
+  }
+  resetAll() {
+    if (present(this.live)) {
+      this.fire("office-options-reset", {});
+      return;
+    }
+    this.draftValues = { ...this.draftValues, ...this.defaults };
+    this.requestUpdate();
+  }
+  /** Panes the product slots in sit outside the dialog's own focus trap: let Tab walk through them. */
+  onPaneKey(event) {
+    if (event.key !== "Tab") return;
+    const origin = event.composedPath()[0];
+    if (origin instanceof Node && !this.renderRoot.contains(origin)) event.stopPropagation();
   }
   onNavKey(event) {
     const tabs = [...this.renderRoot.querySelectorAll('nav [role="tab"]')];
@@ -3838,76 +3970,37 @@ var OfficeUiOptionsDialog = class extends OfficeElement {
     this.category = target.dataset.category;
     this.renderRoot.querySelector('nav [aria-selected="true"]')?.focus();
   }
+  /** Native controls and popups follow the theme: dark when `--office-background` is dark. */
+  syncColorScheme() {
+    const probe = this.ownerDocument.createElement("span");
+    probe.style.cssText = "display:none;background-color:var(--office-background)";
+    this.renderRoot.append(probe);
+    const match = /\d+(\.\d+)?/g;
+    let background = "";
+    try {
+      background = getComputedStyle(probe).backgroundColor;
+    } catch {
+    }
+    probe.remove();
+    if (!background) return;
+    const [r = 255, g = 255, b = 255] = (background.match(match) ?? []).slice(0, 3).map(Number);
+    this.style.colorScheme = 0.2126 * r + 0.7152 * g + 0.0722 * b < 128 ? "dark" : "light";
+  }
+  updated(changed) {
+    if (changed.has("open") && present(this.open)) this.syncColorScheme();
+    if (changed.has("active") && this.active)
+      this.fire("office-options-category", { id: this.active });
+  }
   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 };
+    if (changed.has("open") && present(this.open)) this.draftValues = { ...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
-		>`;
+    this.draftValues[key] = next;
+    if (present(this.live)) this.committed[key] = next;
+    this.fire("office-option-input", { key, value: next });
+    this.requestUpdate();
   }
   pane(category) {
     if (!category) return "";
@@ -3918,54 +4011,71 @@ var OfficeUiOptionsDialog = class extends OfficeElement {
       (section) => html`<section>
 						<h3>${section.title}</h3>
 						${section.description ? html`<p class="desc">${section.description}</p>` : ""}
-						${section.controls.map((control) => this.control(control))}
+						${section.controls.map((control) => optionRow(this, control))}
+						${section.slot ? html`<slot name=${section.slot}></slot>` : ""}
 					</section>`
     )}
+			${category.custom ? html`<slot name="pane-${category.id}"></slot>` : ""}
 		`;
   }
   render() {
     const category = this.categories.find((entry) => entry.id === this.active);
+    const text = { ...DEFAULT_LABELS, ...this.labels };
     return html`
 			<office-ui-dialog
 				heading=${this.heading ?? "Options"}
+				close-label=${text.close}
 				?open=${present(this.open)}
 				@office-dialog-close=${(event) => {
-      if (!event.defaultPrevented) this.close();
+      if (event.defaultPrevented) return;
+      if (present(this.live)) this.commit();
+      else this.close();
     }}
 			>
-				<div class="layout">
-					<nav
-						role="tablist"
-						aria-orientation="vertical"
-						aria-label="Categories"
-						@keydown=${this.onNavKey}
-					>
-						${this.categories.map(
+				${present(this.customBody) ? html`<div class="custom" @keydown=${this.onPaneKey}><slot name="body"></slot></div>` : this.layout(category, text)}
+			</office-ui-dialog>
+		`;
+  }
+  layout(category, text) {
+    return html`
+			<div class="layout">
+				<nav
+					role="tablist"
+					aria-orientation="vertical"
+					aria-label=${text.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
-								>`
+								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>
+				</nav>
+				<div
+					role="tabpanel"
+					id="pane"
+					@keydown=${this.onPaneKey}
+					aria-labelledby=${ifDefined(category ? `tab-${category.id}` : void 0)}
+					>${this.pane(category)}</div
+				>
+			</div>
+			<div slot="footer" class="actions">
+				${this.defaults ? html`<button type="button" class="reset" data-action="reset" @click=${this.resetAll}>
+								${text.reset}
+							</button>` : ""}
+				<button type="button" data-action="cancel" @click=${this.close}>${text.cancel}</button>
+				<button type="button" class="primary" data-action="ok" @click=${this.commit}>
+					${text.ok}
+				</button>
+			</div>
 		`;
   }
 };
@@ -4430,7 +4540,7 @@ var OfficeUiSelect = class extends OfficeElement {
 var defineSelect = definer("office-ui-select", () => OfficeUiSelect);
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/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	opacity: var(--office-status-bar-separator-opacity);\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	opacity: var(--office-status-bar-separator-opacity);\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";
+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	flex: 0 1 auto;\n	align-items: center;\n	min-width: 0;\n	overflow: hidden;\n}\n.item {\n	flex: 0 1 auto;\n	min-width: 0;\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n/* The page counter is the one text that stays whole. */\n.item[aria-live] {\n	flex: none;\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	opacity: var(--office-status-bar-separator-opacity);\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	opacity: var(--office-status-bar-separator-opacity);\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-touch-target, 44px);\n		min-height: var(--office-touch-target, 44px);\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 {
@@ -5958,6 +6068,43 @@ function runKeyTips(root, targets, onDone, className) {
   return stop;
 }
 
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/ribbon/scroll-more.css?raw
+var scroll_more_default = ".ribbon-scroll-more {\n	position: sticky;\n	right: 0;\n	z-index: 2;\n	flex: none;\n	align-self: center;\n	margin-left: auto;\n	width: 28px;\n	height: 40px;\n	padding: 0;\n	border: 1px solid var(--office-border, #c8c6c4);\n	border-radius: 4px;\n	background: var(--office-background, #fff);\n	color: var(--office-foreground, #201f1e);\n	font-size: 20px;\n	line-height: 1;\n	box-shadow: -6px 0 6px -2px rgb(0 0 0 / 12%);\n	cursor: pointer;\n}\n\n@media (pointer: coarse) {\n	.ribbon-scroll-more {\n		width: var(--office-target-size-touch, 44px);\n		height: var(--office-target-size-touch, 44px);\n	}\n	/* The ribbon grows to fit 44px targets instead of clipping them. */\n	.ribbon-panel {\n		height: auto !important;\n		min-height: 104px;\n		-webkit-overflow-scrolling: touch;\n	}\n	.ribbon-panel .ribbon-group button,\n	.ribbon-panel .ribbon-group select,\n	.ribbon-panel .ribbon-group input,\n	.ribbon-panel .ribbon-group .ribbon-overflow-button {\n		min-width: var(--office-target-size-touch, 44px);\n		min-height: var(--office-target-size-touch, 44px);\n	}\n}\n";
+
+// src/ribbon/scroll-more.ts
+var STYLE_ID = "office-ui-ribbon-touch-style";
+var CLASS = "ribbon-scroll-more";
+function ensureRibbonTouchStyle(node) {
+  const root = node.getRootNode();
+  const doc = node.ownerDocument ?? node;
+  const host = root instanceof ShadowRoot ? root : doc.head;
+  if (!host || host.querySelector(`#${STYLE_ID}`)) return;
+  const style = doc.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = scroll_more_default;
+  host.append(style);
+}
+function syncScrollMore(panel, label = "More") {
+  panel.querySelector(`:scope > .${CLASS}`)?.remove();
+  if (panel.hidden || panel.scrollWidth <= panel.clientWidth + 1) return;
+  ensureRibbonTouchStyle(panel);
+  const doc = panel.ownerDocument;
+  const text = typeof label === "function" ? label(panel) : label;
+  const button = doc.createElement("button");
+  button.type = "button";
+  button.className = CLASS;
+  button.setAttribute("aria-label", text);
+  button.title = text;
+  button.textContent = "\u203A";
+  button.addEventListener("mousedown", (event) => event.preventDefault());
+  button.addEventListener("click", () => {
+    const end = panel.scrollWidth - panel.clientWidth - 2;
+    const left = panel.scrollLeft >= end ? 0 : panel.scrollLeft + panel.clientWidth * 0.8;
+    panel.scrollTo({ left, behavior: "smooth" });
+  });
+  panel.append(button);
+}
+
 // src/ribbon/overflow.ts
 function createRibbonOverflow(options) {
   let closeOpen;
@@ -6043,6 +6190,8 @@ function createRibbonOverflow(options) {
   }
   function fitPanel(panel) {
     if (panel.hidden || !panel.clientWidth) return;
+    ensureRibbonTouchStyle(panel);
+    panel.querySelector(":scope > .ribbon-scroll-more")?.remove();
     if (closeOpen && panel.dataset.fittedWidth === String(panel.clientWidth)) return;
     panel.dataset.fittedWidth = String(panel.clientWidth);
     closeOpen?.();
@@ -6069,6 +6218,7 @@ function createRibbonOverflow(options) {
       button.title = label;
       group.setAttribute("data-collapsed", "");
     }
+    syncScrollMore(panel, options.moreLabel);
   }
   const panelsOf2 = (root) => root.querySelectorAll(".ribbon-panel");
   return {
@@ -6080,7 +6230,32 @@ function createRibbonOverflow(options) {
         for (const entry of entries) fitPanel(entry.target);
       });
       for (const panel of panelsOf2(root)) observer.observe(panel);
-      return () => observer.disconnect();
+      let frame = 0;
+      const mutations = new MutationObserver(() => {
+        if (frame) return;
+        frame = requestAnimationFrame(() => {
+          frame = 0;
+          refitVisible();
+          mutations.takeRecords();
+        });
+      });
+      const refitVisible = () => {
+        for (const panel of panelsOf2(root)) {
+          if (panel.hidden || panel.querySelector('[aria-expanded="true"].ribbon-overflow-button'))
+            continue;
+          const more = panel.querySelector(":scope > .ribbon-scroll-more");
+          const clipped = panel.scrollWidth - (more?.offsetWidth ?? 0) > panel.clientWidth + 1;
+          const unfolded = panel.querySelector(":scope > .ribbon-group:not([data-collapsed])");
+          if (clipped && unfolded) fitPanel(panel);
+        }
+      };
+      for (const panel of panelsOf2(root))
+        mutations.observe(panel, { childList: true, subtree: true });
+      return () => {
+        observer.disconnect();
+        mutations.disconnect();
+        if (frame) cancelAnimationFrame(frame);
+      };
     },
     refit(root) {
       for (const panel of panelsOf2(root)) fitPanel(panel);
@@ -6104,6 +6279,7 @@ function fitRibbonGroups(panel, options = {}) {
     group.removeAttribute("data-open");
     group.removeAttribute("data-collapsed");
   }
+  panel.querySelector(":scope > .ribbon-scroll-more")?.remove();
   const width = panel.ownerDocument.defaultView?.innerWidth ?? Number.POSITIVE_INFINITY;
   if (panel.hidden || width < (options.minWidth ?? 0)) return [];
   const overflows = () => panel.scrollWidth - panel.clientWidth > 1;
@@ -6116,6 +6292,7 @@ function fitRibbonGroups(panel, options = {}) {
     collapsed.push(group.getAttribute("label") ?? "");
     if (!overflows()) break;
   }
+  syncScrollMore(panel, options.moreLabel);
   return collapsed;
 }
 function place(group) {
@@ -6225,6 +6402,128 @@ function attachRibbonGroupOverflow(ribbon, options = {}) {
   };
 }
 
+// src/dialog/options-categories.ts
+var UNAVAILABLE = {
+  proofing: {
+    id: "proofing",
+    label: "Proofing",
+    description: "Change how {product} corrects and formats your text.",
+    reason: "Not available yet. Needs rich text formatting."
+  },
+  save: {
+    id: "save",
+    label: "Save",
+    description: "Customize how documents are saved.",
+    reason: "Not available yet. Documents are saved to this device; AutoRecover is not kept."
+  },
+  language: {
+    id: "language",
+    label: "Language",
+    description: "Set the Office Language Preferences.",
+    reason: "Not available yet. The display language is fixed."
+  },
+  accessibility: {
+    id: "accessibility",
+    label: "Accessibility",
+    description: "Make {product} easier to work with.",
+    reason: "Not available yet. There are no accessibility settings to change."
+  },
+  advanced: {
+    id: "advanced",
+    label: "Advanced",
+    description: "Advanced options for working with {product}.",
+    reason: "Not available yet. The editing behaviour is fixed."
+  },
+  ribbon: {
+    id: "ribbon",
+    label: "Customize Ribbon",
+    description: "Customize the Ribbon and keyboard shortcuts.",
+    reason: "Not available yet. The ribbon layout is fixed."
+  },
+  qat: {
+    id: "qat",
+    label: "Quick Access Toolbar",
+    description: "Customize the Quick Access Toolbar.",
+    reason: "Not available yet. The Quick Access Toolbar is fixed."
+  },
+  addins: {
+    id: "add-ins",
+    label: "Add-ins",
+    description: "View and manage Microsoft Office Add-ins.",
+    reason: "Not available. Add-ins and macros are never run."
+  },
+  trust: {
+    id: "trust",
+    label: "Trust Center",
+    description: "Help keep your documents safe and your computer secure and healthy.",
+    reason: "Not available. Documents stay local and active content is never run."
+  }
+};
+function optionText(context, text) {
+  return context.t(text).replace("{product}", context.product);
+}
+function unavailableCategory(context, kind, text = {}) {
+  const entry = UNAVAILABLE[kind];
+  return {
+    id: entry.id,
+    label: context.t(entry.label),
+    description: optionText(context, text.description ?? entry.description),
+    sections: [],
+    disabled: optionText(context, text.reason ?? entry.reason)
+  };
+}
+function unavailableControl(context, control, reason) {
+  return { ...control, disabled: context.t(reason) };
+}
+function userInterfaceSection(context) {
+  const { t } = context;
+  return {
+    id: "ui",
+    title: t("User Interface options"),
+    controls: [
+      {
+        kind: "toggle",
+        key: "miniToolbar",
+        label: t("Show Mini Toolbar on selection"),
+        disabled: t("Not available yet. Needs rich text formatting.")
+      },
+      {
+        kind: "toggle",
+        key: "livePreview",
+        label: t("Enable Live Preview"),
+        disabled: t(
+          "Not available yet. Styles are applied on click; hover previews are not drawn yet."
+        )
+      },
+      {
+        kind: "select",
+        key: "screenTips",
+        label: t("ScreenTip style"),
+        choices: [{ value: "descriptions", label: t("Show feature descriptions in ScreenTips") }],
+        disabled: t("Not available yet. ScreenTips always describe the command.")
+      }
+    ]
+  };
+}
+function personalizeSection(context, controls, description) {
+  return {
+    id: "personalize",
+    title: context.t("Personalize your copy of Microsoft Office"),
+    ...description ? { description } : {},
+    controls
+  };
+}
+function optionsLabels(context) {
+  const { t } = context;
+  return {
+    ok: t("OK"),
+    cancel: t("Cancel"),
+    reset: t("Reset all options"),
+    categories: t("Categories"),
+    close: t("Close")
+  };
+}
+
 // src/controls.ts
 var CONTROL_DEFINERS = [
   defineIcon,
@@ -6273,4 +6572,4 @@ function registerControls(registry) {
   for (const define of CONTROL_DEFINERS) define(registry);
 }
 
-export { CONTROL_DEFINERS, DEFAULT_COMMENTS_LABELS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_COLOR_SWATCHES, OFFICE_COLOR_SWATCH_HEXES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_SYMBOLS, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, assignKeyTips, attachKeyTips, attachRibbonGroupOverflow, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, commentInitials, createRibbonOverflow, defineAccount, defineBackstage, defineButton, defineCheckbox, defineColorCustom, defineColorGrid, defineCommandSearch, defineCommentsPane, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineGallery, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonActions, defineRibbonGroup, defineRibbonSection, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineSymbolPicker, defineTabStrip, defineTaskPane, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, fitRibbonGroups, formatCommentTime, glyph, nextEnabledIndex, parseOfficeSymbolCode, parseSvgPreview, profileInitials, rangeControl, range_control_default, readOfficeProfile, registerControls, rulerDivisions, runKeyTips, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile };
+export { CONTROL_DEFINERS, DEFAULT_COMMENTS_LABELS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_COLOR_SWATCHES, OFFICE_COLOR_SWATCH_HEXES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_SYMBOLS, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, assignKeyTips, attachKeyTips, attachRibbonGroupOverflow, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, commentInitials, createRibbonOverflow, defineAccount, defineBackstage, defineButton, defineCheckbox, defineColorCustom, defineColorGrid, defineCommandSearch, defineCommentsPane, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineGallery, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonActions, defineRibbonGroup, defineRibbonSection, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineSymbolPicker, defineTabStrip, defineTaskPane, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, fitRibbonGroups, formatCommentTime, glyph, nextEnabledIndex, optionText, optionsLabels, parseOfficeSymbolCode, parseSvgPreview, personalizeSection, profileInitials, rangeControl, range_control_default, readOfficeProfile, registerControls, rulerDivisions, runKeyTips, sanitizeOfficeProfile, typeAheadIndex, unavailableCategory, unavailableControl, userInterfaceSection, writeOfficeProfile };