ooxml-ui 1.13.0 → 1.15.0

package/dist/{chunk-BFPHRWEB.js → chunk-7QGML32D.js}

@@ -1916,7 +1916,7 @@ var OfficeUiButton = class extends OfficeElement {
 var defineButton = definer("office-ui-button", () => OfficeUiButton);
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/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";
+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/* An inline gallery with several small drop-downs beside it: three rows, the gallery spans them. */\n:host([data-stack-beside]) .row {\n	display: grid;\n	grid-auto-flow: column;\n	grid-template-rows: repeat(3, auto);\n	align-items: center;\n	gap: var(--office-space-0) var(--office-space-1);\n}\n:host([data-stack-beside]) ::slotted([data-stack-span]) {\n	grid-row: 1 / span 3;\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) {
@@ -1974,6 +1974,12 @@ var OfficeUiRibbonGroup = class extends OfficeElement {
       "data-stack",
       stackable.length > 1 && stackable.length === children.length
     );
+    const inline = children.filter(
+      (el) => el.matches('[mode="inline"]') || el.querySelector('[mode="inline"]') !== null
+    );
+    const beside = inline.length > 0 && stackable.length > 1 && stackable.length + inline.length === children.length;
+    this.toggleAttribute("data-stack-beside", beside);
+    for (const el of children) el.toggleAttribute("data-stack-span", beside && inline.includes(el));
     const tallest = Math.max(0, ...children.map((el) => el.getBoundingClientRect().height));
     if (tallest > 0)
       this.toggleAttribute(
@@ -3875,7 +3881,7 @@ function optionRow(host, control) {
 }
 
 // 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.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-border);\n	border-radius: var(--office-radius);\n	background: var(--office-surface);\n	color: inherit;\n	font: inherit;\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	accent-color: var(--office-accent);\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";
+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 = {
@@ -3889,6 +3895,8 @@ 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 },
@@ -3901,6 +3909,8 @@ var OfficeUiOptionsDialog = class extends OfficeElement {
   constructor() {
     super();
     this.open = false;
+    this.live = false;
+    this.customBody = false;
     this.heading = null;
     this.categories = [];
     this.defaults = null;
@@ -3915,7 +3925,7 @@ var OfficeUiOptionsDialog = class extends OfficeElement {
   }
   set values(value) {
     this.committed = { ...value };
-    if (!present(this.open)) this.draftValues = { ...value };
+    if (!present(this.open) || present(this.live)) this.draftValues = { ...value };
     this.requestUpdate("values");
   }
   /** The selected category id. */
@@ -3943,9 +3953,19 @@ var OfficeUiOptionsDialog = class extends OfficeElement {
     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"]')];
     const at = tabs.findIndex((tab) => tab.getAttribute("aria-selected") === "true");
@@ -3956,6 +3976,27 @@ 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 ?? "";
@@ -3963,6 +4004,8 @@ var OfficeUiOptionsDialog = class extends OfficeElement {
   }
   set(key, next) {
     this.draftValues[key] = next;
+    if (present(this.live)) this.committed[key] = next;
+    this.fire("office-option-input", { key, value: next });
     this.requestUpdate();
   }
   pane(category) {
@@ -3975,6 +4018,7 @@ var OfficeUiOptionsDialog = class extends OfficeElement {
 						<h3>${section.title}</h3>
 						${section.description ? html`<p class="desc">${section.description}</p>` : ""}
 						${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>` : ""}
@@ -3989,52 +4033,55 @@ var OfficeUiOptionsDialog = class extends OfficeElement {
 				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=${text.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">
-					${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>
-			</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>
 		`;
   }
 };
@@ -6028,7 +6075,7 @@ function runKeyTips(root, targets, onDone, className) {
 }
 
 // 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";
+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	cursor: pointer;\n}\n/* A fade into the chevron: content scrolling under it dims out instead of being cut off by the box. */\n.ribbon-scroll-more::before {\n	content: '';\n	position: absolute;\n	top: -1px;\n	right: calc(100% + 1px);\n	bottom: -1px;\n	width: 32px;\n	background: linear-gradient(to right, transparent, var(--office-background, #fff));\n	pointer-events: none;\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";

package/dist/{chunk-3XST4F6J.js → chunk-EOGVSVJ7.js}

@@ -1,4 +1,4 @@
-import { defineRibbonGroup, defineRibbonStack, defineButton, defineMenuItem, defineMenuButton } from './chunk-BFPHRWEB.js';
+import { defineRibbonGroup, defineRibbonStack, defineButton, defineMenuItem, defineMenuButton } from './chunk-7QGML32D.js';
 import { acceptedRibbonAddIns, findRibbonAddInCommand, RIBBON_ADD_IN_EVENT } from 'ooxml-core/ribbon';
 export { RIBBON_ADD_IN_EVENT } from 'ooxml-core/ribbon';
 

package/dist/{chunk-EL2A3BDM.js → chunk-JNZQZH3T.js}

@@ -1,7 +1,7 @@
 import { defineSmartArt } from './chunk-ANPFMQ6E.js';
-import { TEAMS_TAGS, registerTeams } from './chunk-D7JPVAYS.js';
+import { TEAMS_TAGS, registerTeams } from './chunk-YFXBKLHN.js';
 import { installOfficeUiTheme } from './chunk-7E3HU7RL.js';
-import { registerControls } from './chunk-BFPHRWEB.js';
+import { registerControls } from './chunk-7QGML32D.js';
 import { definePresence } from './chunk-KNC2UEUR.js';
 
 // src/index.ts