ooxml-ui 1.7.0 → 1.8.0

package/dist/{chunk-SCWCZSTE.js → chunk-O7APCA5N.js}

@@ -8,6 +8,7 @@ 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';
+import { OFFICE_STANDARD_COLORS, normalizePaletteHex, buildThemePalette, hslToRgb, toHex, hexToRgbChannels, rgbToHsl } from 'ooxml-core/color';
 
 function glyph(name, className = "glyph", hidden = false) {
   const found = getIcon(name);
@@ -57,16 +58,16 @@ var OfficeUiDialogFooter = class extends OfficeElement {
       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
-					>`
+							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>
 		`;
@@ -118,22 +119,22 @@ var OfficeUiToasts = class extends OfficeElement {
 				</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
+							class="toast"
+							role="status"
+							data-testid=${p}
+							data-code=${ifDefined(toast.code)}
+							data-severity=${toast.severity}
 						>
-					</div>`
+							${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>
@@ -216,12 +217,12 @@ var OfficeUiPasteOptions = class extends OfficeElement {
       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
-					>`
+							type="button"
+							data-format=${option.id}
+							title=${option.label}
+							@click=${() => this.choose(option)}
+							>${option.label}</button
+						>`
     )}
 			</div>
 		`;
@@ -1704,17 +1705,17 @@ var OfficeUiRibbon = class extends OfficeElement {
 				>
 					${this.tabs.map(
       (tab) => html`<button
-							type="button"
-							role="tab"
-							id="tab-${tab.id}"
-							data-tab=${tab.id}
-							data-contextual=${ifDefined(tab.contextual ? "" : void 0)}
-							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
-						>`
+								type="button"
+								role="tab"
+								id="tab-${tab.id}"
+								data-tab=${tab.id}
+								data-contextual=${ifDefined(tab.contextual ? "" : void 0)}
+								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>
@@ -2462,6 +2463,7 @@ var OfficeUiRuler = class extends OfficeElement {
     origin: { type: Number },
     scale: { type: Number },
     direction: { type: String },
+    density: { type: Number },
     extent: { type: Number },
     marginStart: { type: Number },
     marginEnd: { type: Number },
@@ -2479,6 +2481,7 @@ var OfficeUiRuler = class extends OfficeElement {
     this.origin = 0;
     this.scale = 96;
     this.direction = "";
+    this.density = 1;
     this.extent = 0;
     this.marginStart = 0;
     this.marginEnd = 0;
@@ -2586,7 +2589,8 @@ var OfficeUiRuler = class extends OfficeElement {
     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 density = this.density > 0 && this.density <= 1 ? this.density : 1;
+    const divisions = Math.max(1, Math.round(rulerDivisions(unit) * density));
     const step = unit / divisions;
     const sign = reverse ? -1 : 1;
     const a = (0 - origin) / (sign * step);
@@ -3419,9 +3423,11 @@ var OfficeUiContextMenu = class extends OfficeElement {
     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
-			>`);
+      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) => {
@@ -3600,7 +3606,7 @@ var OfficeUiMenuButton = class _OfficeUiMenuButton extends OfficeElement {
   }
   items() {
     return [...this.querySelectorAll("*")].filter(
-      (item) => (item instanceof OfficeUiMenuItem || item instanceof _OfficeUiMenuButton && present(item.submenu)) && !present(item.disabled) && !item.hidden && menuOwner(item) === this
+      (item) => (item instanceof OfficeUiMenuItem || item instanceof _OfficeUiMenuButton && present(item.submenu) || item.hasAttribute("data-menu-item")) && !present(item.disabled) && !item.hidden && menuOwner(item) === this
     );
   }
   focus(options) {
@@ -3911,10 +3917,10 @@ var OfficeUiOptionsDialog = class extends OfficeElement {
 			${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>`
+						<h3>${section.title}</h3>
+						${section.description ? html`<p class="desc">${section.description}</p>` : ""}
+						${section.controls.map((control) => this.control(control))}
+					</section>`
     )}
 		`;
   }
@@ -3937,16 +3943,16 @@ var OfficeUiOptionsDialog = class extends OfficeElement {
 					>
 						${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
@@ -4759,7 +4765,7 @@ var OfficeUiTaskPane = class extends OfficeElement {
   }
   render() {
     const close = this.closeLabel || `Close ${this.label}`;
-    return html`<div class="header"
+    return html`<div class="header" part="header"
 				><h2 class="title">${this.label}</h2
 				><button
 					type="button"
@@ -4769,7 +4775,7 @@ var OfficeUiTaskPane = class extends OfficeElement {
 					@click=${() => this.fire(this.constructor.closeEvent, {})}
 					>${glyph("close", "icon")}</button
 				></div
-			><div class="body"><slot></slot></div>`;
+			><div class="body" part="body"><slot></slot></div>`;
   }
 };
 var defineTaskPane = definer("office-ui-task-pane", () => OfficeUiTaskPane);
@@ -4783,7 +4789,7 @@ function matchTitleBarCommands(search, query) {
 }
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/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-name-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-title-bar-result-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";
+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/* `centered`: the file name sits in the middle of the bar, as in Visio's window title. */\n@media (min-width: 761px) {\n	:host([centered]) .bar {\n		position: relative;\n	}\n	:host([centered]) .file {\n		position: absolute;\n		inset-inline-start: 50%;\n		transform: translateX(-50%);\n	}\n	:host([centered][dir='rtl']) .file {\n		transform: translateX(50%);\n	}\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-name-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-title-bar-result-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	/* Without a search box nothing else pushes the account to the far edge. */\n	margin-inline-start: auto;\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: "" };
@@ -5338,6 +5344,405 @@ var OfficeUiSymbolPicker = class extends OfficeElement {
 };
 var defineSymbolPicker = definer("office-ui-symbol-picker", () => OfficeUiSymbolPicker);
 
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/form/color-grid.css?raw
+var color_grid_default = "/* Tokens: --office-space-*, --office-border, --office-selected, --office-field-border-focus. */\n:host {\n	display: block;\n	color: var(--office-foreground);\n	font: var(--office-font-size-sm) / var(--office-line-height-tight) var(--office-font);\n}\n:host([hidden]) {\n	display: none;\n}\n.grid {\n	display: grid;\n	gap: var(--office-space-1);\n	padding: var(--office-space-1);\n	width: max-content;\n}\n.heading {\n	padding: var(--office-space-0) var(--office-space-1);\n	background: var(--office-selected);\n	color: var(--office-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.cells {\n	display: grid;\n	grid-template-columns: repeat(10, var(--office-space-4));\n	gap: var(--office-space-1);\n}\n/* The five variant rows sit flush under one another, as in Office. */\n.variants {\n	display: grid;\n	gap: 0;\n}\n.swatch {\n	box-sizing: border-box;\n	width: var(--office-space-4);\n	height: var(--office-space-4);\n	padding: 0;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: 0;\n	background: var(--swatch);\n	cursor: pointer;\n}\n.swatch:hover:not(:disabled),\n.swatch:focus-visible,\n.swatch[aria-checked='true'] {\n	outline: var(--office-space-0) solid var(--office-field-border-focus);\n	outline-offset: var(--office-space-px);\n	position: relative;\n	z-index: 1;\n}\n.command {\n	box-sizing: border-box;\n	display: flex;\n	align-items: center;\n	width: 100%;\n	min-height: var(--office-control-height-md);\n	padding: 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	text-align: start;\n	cursor: pointer;\n}\n.command:hover:not(:disabled),\n.command:focus-visible,\n.command[aria-checked='true'] {\n	background: var(--office-selected);\n	outline: none;\n}\nbutton:disabled {\n	opacity: 0.4;\n	cursor: not-allowed;\n}\n@media (forced-colors: active) {\n	.swatch {\n		forced-color-adjust: none;\n		border-color: CanvasText;\n	}\n	.swatch:focus-visible,\n	.swatch[aria-checked='true'] {\n		outline-color: Highlight;\n	}\n}\n";
+
+// src/form/color-grid.ts
+var COLUMNS = 10;
+var OfficeUiColorGrid = class extends OfficeElement {
+  static styles = controlStyles(color_grid_default);
+  static properties = {
+    themeColors: { attribute: false },
+    themeNames: { attribute: false },
+    variantLabel: { attribute: false },
+    extraColors: { attribute: false },
+    standardColors: { attribute: false },
+    recentColors: { attribute: false },
+    value: { type: String },
+    label: { type: String },
+    noneLabel: { attribute: "none-label", type: String },
+    automaticLabel: { attribute: "automatic-label", type: String },
+    moreLabel: { attribute: "more-label", type: String },
+    themeHeading: { attribute: "theme-heading", type: String },
+    standardHeading: { attribute: "standard-heading", type: String },
+    recentHeading: { attribute: "recent-heading", type: String },
+    disabled: flag
+  };
+  constructor() {
+    super();
+    this.themeColors = null;
+    this.themeNames = null;
+    this.variantLabel = null;
+    this.extraColors = [];
+    this.standardColors = OFFICE_STANDARD_COLORS;
+    this.recentColors = [];
+    this.value = null;
+    this.label = null;
+    this.noneLabel = null;
+    this.automaticLabel = null;
+    this.moreLabel = null;
+    this.themeHeading = "Theme Colors";
+    this.standardHeading = "Standard Colors";
+    this.recentHeading = "Recent Colors";
+    this.disabled = false;
+  }
+  /** Focus the current choice, or the first item. */
+  focus(options) {
+    const items = this.items();
+    (items.find((item) => item.getAttribute("aria-checked") === "true") ?? items[0])?.focus(
+      options
+    );
+  }
+  items() {
+    return [...this.renderRoot.querySelectorAll("button:not(:disabled)")];
+  }
+  pick(color, source, label, more = {}) {
+    if (present(this.disabled)) return;
+    emit(this, "office-color-pick", { color, source, label, ...more });
+  }
+  more() {
+    if (!present(this.disabled)) emit(this, "office-color-more", {});
+  }
+  onKey(event) {
+    const items = this.items();
+    const current = items.indexOf(event.target);
+    if (current < 0) return;
+    const at = (item) => ({
+      row: Number(item.dataset.row),
+      column: Number(item.dataset.column)
+    });
+    const from = at(items[current]);
+    const inRow = (row) => items.filter((item) => at(item).row === row);
+    const rows = [...new Set(items.map((item) => at(item).row))];
+    const vertical = (step) => {
+      const target = rows[rows.indexOf(from.row) + step];
+      if (target === void 0) return void 0;
+      return inRow(target).reduce(
+        (best, item) => Math.abs(at(item).column - from.column) < Math.abs(at(best).column - from.column) ? item : best
+      );
+    };
+    const next = event.key === "ArrowRight" ? items[current + 1] : event.key === "ArrowLeft" ? items[current - 1] : event.key === "ArrowDown" ? vertical(1) : event.key === "ArrowUp" ? vertical(-1) : event.key === "Home" ? items[0] : event.key === "End" ? items.at(-1) : void 0;
+    if (!["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp", "Home", "End"].includes(event.key))
+      return;
+    if (!next && (event.key === "ArrowDown" || event.key === "ArrowUp")) return;
+    event.preventDefault();
+    event.stopPropagation();
+    next?.focus();
+  }
+  willUpdate() {
+    this.setAttribute("role", "group");
+    this.setAttribute("aria-label", this.label ?? "Colors");
+  }
+  render() {
+    const disabled = present(this.disabled);
+    const value = this.value ? normalizePaletteHex(this.value) ?? this.value : null;
+    let row = 0;
+    const command = (text, name2, checked, run) => html`<button
+				type="button"
+				class="command"
+				data-command=${name2}
+				data-row=${row++}
+				data-column="0"
+				role=${checked === void 0 ? "button" : "menuitemradio"}
+				aria-checked=${checked === void 0 ? nothing : String(checked)}
+				?disabled=${disabled}
+				@click=${run}
+				>${text}</button
+			>`;
+    const swatch = (item, source, column) => html`<button
+				type="button"
+				class="swatch"
+				role="menuitemradio"
+				data-color=${item.hex}
+				data-source=${source}
+				data-row=${row}
+				data-column=${column}
+				title=${item.label}
+				aria-label=${item.label}
+				aria-checked=${String(value === item.hex)}
+				style=${`--swatch:${item.hex}`}
+				?disabled=${disabled}
+				@click=${() => this.pick(
+      item.hex,
+      source,
+      item.label,
+      source === "theme" ? { theme: { column, ...item.variant ? { variant: item.variant } : {} } } : source === "extra" ? { index: column } : {}
+    )}
+			></button>`;
+    const cells = (items, source) => {
+      const result = html`<div class="cells" data-cells=${source}
+				>${items.map((item, index) => swatch(item, source, index))}</div
+			>`;
+      row++;
+      return result;
+    };
+    const palette = buildThemePalette(this.themeColors ?? void 0, this.themeNames ?? void 0);
+    const extra = (this.extraColors ?? []).slice(0, COLUMNS);
+    const name = this.variantLabel;
+    const variants = (index) => palette.map((column) => {
+      const item = column.variants[index];
+      return name ? { ...item, label: name(column.name, item.variant) } : item;
+    });
+    const recent = (this.recentColors ?? []).map((hex) => normalizePaletteHex(hex)).filter((hex) => !!hex).slice(0, COLUMNS).map((hex) => ({ hex, label: hex.toUpperCase() }));
+    const automatic = this.automaticLabel;
+    const none = this.noneLabel;
+    const more = this.moreLabel;
+    return html`<div class="grid" part="grid" @keydown=${this.onKey}
+			>${automatic ? command(
+      automatic,
+      "automatic",
+      value === "automatic",
+      () => this.pick("automatic", "automatic", automatic)
+    ) : nothing}${none ? command(none, "none", value === "none", () => this.pick("none", "none", none)) : nothing}
+			<div class="heading">${this.themeHeading}</div>
+			${cells(
+      palette.map((column) => column.base),
+      "theme"
+    )}
+			<div class="variants">${[0, 1, 2, 3, 4].map((index) => cells(variants(index), "theme"))}</div>
+			${extra.length ? cells(extra, "extra") : nothing}
+			<div class="heading">${this.standardHeading}</div>
+			${cells(this.standardColors ?? OFFICE_STANDARD_COLORS, "standard")}
+			${recent.length ? html`<div class="heading">${this.recentHeading}</div> ${cells(recent, "recent")}` : nothing}
+			${more ? command(more, "more", void 0, () => this.more()) : nothing}</div
+		>`;
+  }
+};
+var defineColorGrid = definer("office-ui-color-grid", () => OfficeUiColorGrid);
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/form/color-custom.css?raw
+var color_custom_default = "/* Tokens: --office-space-*, --office-border, --office-field-*, --office-foreground. */\n:host {\n	display: block;\n	color: var(--office-foreground);\n	font: var(--office-font-size-sm) / var(--office-line-height-tight) var(--office-font);\n}\n:host([hidden]) {\n	display: none;\n}\n.custom {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-4);\n	align-items: flex-start;\n}\n.picker {\n	display: flex;\n	gap: var(--office-space-3);\n}\n/* Hue runs across; saturation falls to grey at the bottom, as in Office. */\n.square {\n	position: relative;\n	width: calc(var(--office-space-4) * 13);\n	height: calc(var(--office-space-4) * 10);\n	border: var(--office-border-width) solid var(--office-border);\n	background:\n		linear-gradient(to top, hsl(0 0% 50%), hsl(0 0% 50% / 0)),\n		linear-gradient(\n			to right,\n			hsl(0 100% 50%),\n			hsl(60 100% 50%),\n			hsl(120 100% 50%),\n			hsl(180 100% 50%),\n			hsl(240 100% 50%),\n			hsl(300 100% 50%),\n			hsl(360 100% 50%)\n		);\n	cursor: crosshair;\n	touch-action: none;\n}\n:host(:dir(rtl)) .square {\n	background:\n		linear-gradient(to top, hsl(0 0% 50%), hsl(0 0% 50% / 0)),\n		linear-gradient(\n			to left,\n			hsl(0 100% 50%),\n			hsl(60 100% 50%),\n			hsl(120 100% 50%),\n			hsl(180 100% 50%),\n			hsl(240 100% 50%),\n			hsl(300 100% 50%),\n			hsl(360 100% 50%)\n		);\n}\n.cross {\n	position: absolute;\n	box-sizing: border-box;\n	width: var(--office-space-3);\n	height: var(--office-space-3);\n	margin: calc(var(--office-space-3) / -2);\n	border: var(--office-space-0) solid var(--office-foreground);\n	border-radius: 50%;\n	box-shadow: 0 0 0 var(--office-space-px) var(--office-surface);\n	pointer-events: none;\n}\n.slider {\n	position: relative;\n	width: var(--office-space-4);\n	height: calc(var(--office-space-4) * 10);\n	border: var(--office-border-width) solid var(--office-border);\n	background: linear-gradient(to top, hsl(0 0% 0%), var(--_pure), hsl(0 0% 100%));\n	cursor: ns-resize;\n	touch-action: none;\n}\n.thumb {\n	position: absolute;\n	inset-inline: calc(var(--office-space-1) * -1);\n	height: var(--office-space-1);\n	margin-top: calc(var(--office-space-1) / -2);\n	border: var(--office-border-width) solid var(--office-foreground);\n	background: var(--office-surface);\n	pointer-events: none;\n}\n.square:focus-visible,\n.slider:focus-visible {\n	outline: var(--office-space-0) solid var(--office-field-border-focus);\n	outline-offset: var(--office-space-0);\n}\n.fields {\n	display: grid;\n	grid-template-columns: auto auto;\n	gap: var(--office-space-1) var(--office-space-3);\n	align-content: start;\n}\nlabel {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-2);\n}\n.hex,\n.preview {\n	grid-column: 1 / -1;\n}\ninput {\n	box-sizing: border-box;\n	width: calc(var(--office-space-4) * 4);\n	min-height: var(--office-control-height-md);\n	padding: 0 var(--office-space-1);\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-radius-sm);\n	background: var(--office-field-background);\n	color: inherit;\n	font: inherit;\n}\n.hex input {\n	width: calc(var(--office-space-4) * 6);\n}\ninput:focus-visible {\n	outline: none;\n	border-color: var(--office-field-border-focus);\n}\ninput[aria-invalid='true'] {\n	border-color: var(--office-danger);\n}\n.preview {\n	display: grid;\n	grid-template-columns: auto 1fr;\n	align-items: center;\n	gap: 0 var(--office-space-2);\n	margin-top: var(--office-space-2);\n}\n.swatch {\n	grid-column: 2;\n	height: var(--office-space-5);\n	border: var(--office-border-width) solid var(--office-border);\n	background: var(--_swatch);\n}\n.swatch[data-preview='current'] {\n	border-top: 0;\n}\n.preview span:first-child {\n	grid-row: 1;\n}\n.preview span:last-child {\n	grid-row: 2;\n	grid-column: 1;\n}\n[aria-disabled='true'],\ninput:disabled {\n	opacity: 0.4;\n	cursor: not-allowed;\n}\n@media (forced-colors: active) {\n	.square,\n	.slider,\n	.swatch {\n		forced-color-adjust: none;\n		border-color: CanvasText;\n	}\n}\n";
+
+// src/form/color-custom.ts
+var SCALE = 255;
+var CHANNELS = [
+  ["red", "Red"],
+  ["green", "Green"],
+  ["blue", "Blue"],
+  ["hue", "Hue"],
+  ["sat", "Sat"],
+  ["lum", "Lum"]
+];
+var clamp = (value, max = 1) => Math.min(max, Math.max(0, value));
+var OfficeUiColorCustom = class extends OfficeElement {
+  static styles = controlStyles(color_custom_default);
+  static properties = {
+    value: { type: String, noAccessor: true },
+    current: { type: String },
+    label: { type: String },
+    disabled: flag,
+    hsl: { state: true },
+    typed: { state: true },
+    bad: { state: true }
+  };
+  constructor() {
+    super();
+    this.current = null;
+    this.label = null;
+    this.disabled = false;
+    this.hsl = { h: 0, s: 0, l: 0 };
+    this.typed = null;
+    this.bad = null;
+  }
+  get value() {
+    const { r, g, b } = hslToRgb(this.hsl.h, this.hsl.s, this.hsl.l);
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toLowerCase();
+  }
+  set value(next) {
+    const color = normalizePaletteHex(next ?? "");
+    if (!color || color === this.value) return;
+    const rgb = hexToRgbChannels(color);
+    this.hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+    this.typed = null;
+    this.bad = null;
+  }
+  set(next) {
+    if (present(this.disabled)) return;
+    this.hsl = { ...this.hsl, ...next };
+    this.typed = null;
+    this.bad = null;
+    emit(this, "office-color-change", { color: this.value });
+  }
+  fromSquare(event) {
+    const box = event.currentTarget.getBoundingClientRect();
+    if (!box.width || !box.height) return;
+    this.set({
+      h: clamp((event.clientX - box.left) / box.width) * 359.999,
+      s: 1 - clamp((event.clientY - box.top) / box.height)
+    });
+  }
+  fromSlider(event) {
+    const box = event.currentTarget.getBoundingClientRect();
+    if (box.height) this.set({ l: 1 - clamp((event.clientY - box.top) / box.height) });
+  }
+  drag(move) {
+    return (event) => {
+      if (present(this.disabled) || event.button > 0) return;
+      const target = event.currentTarget;
+      target.setPointerCapture?.(event.pointerId);
+      target.focus();
+      move.call(this, event);
+      const onMove = (next) => move.call(this, next);
+      const stop = () => {
+        target.removeEventListener("pointermove", onMove);
+        target.removeEventListener("pointerup", stop);
+        target.removeEventListener("pointercancel", stop);
+      };
+      target.addEventListener("pointermove", onMove);
+      target.addEventListener("pointerup", stop);
+      target.addEventListener("pointercancel", stop);
+    };
+  }
+  squareKey(event) {
+    const step = event.shiftKey ? 10 : 1;
+    const { h, s } = this.hsl;
+    const next = event.key === "ArrowRight" ? { h: clamp(h + step * (360 / SCALE), 359.999) } : event.key === "ArrowLeft" ? { h: clamp(h - step * (360 / SCALE), 359.999) } : event.key === "ArrowUp" ? { s: clamp(s + step / SCALE) } : event.key === "ArrowDown" ? { s: clamp(s - step / SCALE) } : event.key === "Home" ? { h: 0 } : event.key === "End" ? { h: 359.999 } : void 0;
+    if (!next) return;
+    event.preventDefault();
+    event.stopPropagation();
+    this.set(next);
+  }
+  sliderKey(event) {
+    const step = (event.shiftKey ? 10 : 1) / SCALE;
+    const { l } = this.hsl;
+    const next = event.key === "ArrowUp" || event.key === "ArrowRight" ? clamp(l + step) : event.key === "ArrowDown" || event.key === "ArrowLeft" ? clamp(l - step) : event.key === "Home" ? 0 : event.key === "End" ? 1 : void 0;
+    if (next === void 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    this.set({ l: next });
+  }
+  channels() {
+    const { r, g, b } = hslToRgb(this.hsl.h, this.hsl.s, this.hsl.l);
+    return {
+      red: r,
+      green: g,
+      blue: b,
+      hue: Math.round(this.hsl.h / 360 * SCALE),
+      sat: Math.round(this.hsl.s * SCALE),
+      lum: Math.round(this.hsl.l * SCALE)
+    };
+  }
+  onChannel(name, event) {
+    const input = event.target;
+    const value = Number(input.value);
+    if (present(this.disabled)) return;
+    if (input.value.trim() === "" || !Number.isInteger(value) || value < 0 || value > SCALE) {
+      this.bad = name;
+      return;
+    }
+    if (name === "hue") return this.set({ h: Math.min(359.999, value / SCALE * 360) });
+    if (name === "sat") return this.set({ s: value / SCALE });
+    if (name === "lum") return this.set({ l: value / SCALE });
+    const now = this.channels();
+    const rgb = { ...now, [name]: value };
+    const next = rgbToHsl(rgb.red, rgb.green, rgb.blue);
+    this.set(next.s === 0 ? { ...next, h: this.hsl.h } : next);
+  }
+  onHex(event) {
+    if (present(this.disabled)) return;
+    const text = event.target.value;
+    const color = /^#?[0-9a-f]{6}$/i.test(text.trim()) ? normalizePaletteHex(text) : void 0;
+    if (!color) {
+      this.typed = text;
+      return;
+    }
+    const rgb = hexToRgbChannels(color);
+    this.set(rgbToHsl(rgb.r, rgb.g, rgb.b));
+  }
+  /** Whether the fields hold a colour (a half-typed hex or an out-of-range channel does not). */
+  get valid() {
+    return this.typed === null && this.bad === null;
+  }
+  willUpdate() {
+    this.setAttribute("role", "group");
+    this.setAttribute("aria-label", this.label ?? "Custom color");
+  }
+  render() {
+    const disabled = present(this.disabled);
+    const { h, s, l } = this.hsl;
+    const values = this.channels();
+    const color = this.value;
+    const current = normalizePaletteHex(this.current ?? "");
+    return html`<div class="custom" part="custom">
+			<div class="picker">
+				<div
+					class="square"
+					role="slider"
+					tabindex=${disabled ? -1 : 0}
+					aria-label="Hue and saturation"
+					aria-valuemin="0"
+					aria-valuemax=${SCALE}
+					aria-valuenow=${values.hue}
+					aria-valuetext=${`Hue ${values.hue}, saturation ${values.sat}`}
+					aria-disabled=${String(disabled)}
+					@pointerdown=${this.drag(this.fromSquare)}
+					@keydown=${this.squareKey}
+					><span
+						class="cross"
+						style=${`inset-inline-start:${h / 360 * 100}%;top:${(1 - s) * 100}%`}
+					></span
+				></div>
+				<div
+					class="slider"
+					role="slider"
+					tabindex=${disabled ? -1 : 0}
+					aria-label="Luminance"
+					aria-orientation="vertical"
+					aria-valuemin="0"
+					aria-valuemax=${SCALE}
+					aria-valuenow=${values.lum}
+					aria-disabled=${String(disabled)}
+					style=${`--_pure:hsl(${h} ${s * 100}% 50%)`}
+					@pointerdown=${this.drag(this.fromSlider)}
+					@keydown=${this.sliderKey}
+					><span class="thumb" style=${`top:${(1 - l) * 100}%`}></span
+				></div>
+			</div>
+			<div class="fields">
+				<label class="hex"
+					><span>Hex</span
+					><input
+						type="text"
+						maxlength="7"
+						spellcheck="false"
+						data-color-field="hex"
+						placeholder="#RRGGBB"
+						aria-invalid=${String(this.typed !== null)}
+						.value=${this.typed ?? color.toUpperCase()}
+						?disabled=${disabled}
+						@input=${this.onHex}
+				/></label>
+				${CHANNELS.map(
+      ([name, text]) => html`<label
+							><span>${text}</span
+							><input
+								type="number"
+								min="0"
+								max=${SCALE}
+								step="1"
+								data-color-field=${name}
+								aria-invalid=${String(this.bad === name)}
+								.value=${String(values[name])}
+								?disabled=${disabled}
+								@input=${(event) => this.onChannel(name, event)}
+						/></label>`
+    )}
+				<div class="preview" aria-hidden="true">
+					<span>New</span>
+					<span class="swatch" data-preview="new" style=${`--_swatch:${color}`}></span>
+					<span
+						class="swatch"
+						data-preview="current"
+						style=${`--_swatch:${current ?? "transparent"}`}
+					></span>
+					<span>Current</span>
+				</div>
+			</div>
+		</div>`;
+  }
+};
+var defineColorCustom = definer("office-ui-color-custom", () => OfficeUiColorCustom);
+
 // 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")}`;
@@ -5666,7 +6071,7 @@ function createRibbonOverflow(options) {
       group.setAttribute("data-collapsed", "");
     }
   }
-  const panelsOf = (root) => root.querySelectorAll(".ribbon-panel");
+  const panelsOf2 = (root) => root.querySelectorAll(".ribbon-panel");
   return {
     fitPanel,
     attach(root) {
@@ -5675,16 +6080,152 @@ function createRibbonOverflow(options) {
       const observer = new ResizeObserver((entries) => {
         for (const entry of entries) fitPanel(entry.target);
       });
-      for (const panel of panelsOf(root)) observer.observe(panel);
+      for (const panel of panelsOf2(root)) observer.observe(panel);
       return () => observer.disconnect();
     },
     refit(root) {
-      for (const panel of panelsOf(root)) fitPanel(panel);
+      for (const panel of panelsOf2(root)) fitPanel(panel);
     },
     close: () => closeOpen?.()
   };
 }
 
+// src/ribbon/group-overflow.ts
+var GROUP = "office-ui-ribbon-group";
+var TOGGLE = "office-ribbon-collapse-toggle";
+var panelsOf = (ribbon) => [...ribbon.children].filter(
+  (child) => child instanceof HTMLElement && !!child.dataset.ribbonTab
+);
+var groupsOf = (panel) => [...panel.querySelectorAll(GROUP)].filter(
+  (group) => group.parentElement?.closest(GROUP) === null && group.getBoundingClientRect().width > 0
+);
+var faceOf = (group) => group.shadowRoot?.querySelector(".face") ?? null;
+function fitRibbonGroups(panel, options = {}) {
+  for (const group of panel.querySelectorAll(`${GROUP}[data-collapsed]`)) {
+    group.removeAttribute("data-open");
+    group.removeAttribute("data-collapsed");
+  }
+  const width = panel.ownerDocument.defaultView?.innerWidth ?? Number.POSITIVE_INFINITY;
+  if (panel.hidden || width < (options.minWidth ?? 0)) return [];
+  const overflows = () => panel.scrollWidth - panel.clientWidth > 1;
+  const collapsed = [];
+  if (!overflows()) return collapsed;
+  for (const group of groupsOf(panel).reverse()) {
+    const icon = group.getAttribute("icon") ?? options.icon?.(group);
+    if (icon) group.setAttribute("icon", icon);
+    group.setAttribute("data-collapsed", "");
+    collapsed.push(group.getAttribute("label") ?? "");
+    if (!overflows()) break;
+  }
+  return collapsed;
+}
+function place(group) {
+  const face = faceOf(group);
+  if (!face) return;
+  const rect = face.getBoundingClientRect();
+  const view = group.ownerDocument.defaultView;
+  const width = view?.innerWidth ?? 1024;
+  group.style.setProperty("--office-ribbon-collapse-y", `${Math.round(rect.bottom + 2)}px`);
+  group.style.setProperty("--office-ribbon-collapse-x", `${Math.round(rect.left)}px`);
+  const popup = group.shadowRoot?.querySelector(".row")?.getBoundingClientRect();
+  const left = Math.max(4, Math.min(rect.left, width - (popup?.width ?? 0) - 8));
+  group.style.setProperty("--office-ribbon-collapse-x", `${Math.round(left)}px`);
+}
+function attachRibbonGroupOverflow(ribbon, options = {}) {
+  const doc = ribbon.ownerDocument;
+  const view = doc.defaultView;
+  let frame = 0;
+  let fitted = -1;
+  const openGroup = () => ribbon.querySelector(`${GROUP}[data-open]`);
+  const close = () => {
+    for (const group of ribbon.querySelectorAll(`${GROUP}[data-open]`))
+      group.removeAttribute("data-open");
+  };
+  const visible2 = () => panelsOf(ribbon).find((panel) => !panel.hidden);
+  const refit = () => {
+    const panel = visible2();
+    for (const other of panelsOf(ribbon)) if (other !== panel) fitRibbonGroups(other, options);
+    fitted = panel?.clientWidth ?? -1;
+    if (panel) fitRibbonGroups(panel, options);
+  };
+  const schedule = (force) => {
+    if (!force && openGroup() && fitted === visible2()?.clientWidth) return;
+    if (frame || !view) return;
+    frame = view.requestAnimationFrame(() => {
+      frame = 0;
+      refit();
+      watch();
+    });
+  };
+  let watch = () => {
+  };
+  const toggle = (event) => {
+    const group = event.composedPath().find((node) => node instanceof HTMLElement && node.localName === GROUP);
+    if (!group?.hasAttribute("data-collapsed")) return;
+    const wasOpen = group.hasAttribute("data-open");
+    close();
+    if (wasOpen) return;
+    group.setAttribute("data-open", "");
+    place(group);
+  };
+  const nested = (group) => [...group.querySelectorAll("*")].some(
+    (el) => el.localName.startsWith("office-ui-") && el.open === true
+  );
+  const outside = (event) => {
+    const open = openGroup();
+    if (open && !event.composedPath().includes(open) && !nested(open)) close();
+  };
+  const escape = (event) => {
+    const open = openGroup();
+    if (event.key !== "Escape" || !open || nested(open)) return;
+    event.stopPropagation();
+    close();
+    faceOf(open)?.focus();
+  };
+  const command = (event) => {
+    const open = openGroup();
+    if (open && event.composedPath().includes(open)) queueMicrotask(close);
+  };
+  const onSelect = () => schedule(true);
+  const resize = view && "ResizeObserver" in view ? new view.ResizeObserver(() => schedule(false)) : void 0;
+  const mutation = view && "MutationObserver" in view ? new view.MutationObserver(() => schedule(true)) : void 0;
+  resize?.observe(ribbon);
+  watch = () => {
+    mutation?.disconnect();
+    mutation?.observe(ribbon, { childList: true });
+    for (const panel of panelsOf(ribbon))
+      mutation?.observe(panel, { attributes: true, attributeFilter: ["hidden"] });
+  };
+  watch();
+  ribbon.addEventListener(TOGGLE, toggle);
+  ribbon.addEventListener("office-command", command, true);
+  ribbon.addEventListener("office-ribbon-select", onSelect);
+  doc.addEventListener("pointerdown", outside, true);
+  doc.addEventListener("keydown", escape, true);
+  schedule(true);
+  return {
+    refit,
+    close,
+    destroy() {
+      if (frame) view?.cancelAnimationFrame(frame);
+      frame = 0;
+      resize?.disconnect();
+      mutation?.disconnect();
+      ribbon.removeEventListener(TOGGLE, toggle);
+      ribbon.removeEventListener("office-command", command, true);
+      ribbon.removeEventListener("office-ribbon-select", onSelect);
+      doc.removeEventListener("pointerdown", outside, true);
+      doc.removeEventListener("keydown", escape, true);
+      for (const panel of panelsOf(ribbon)) {
+        for (const group of panel.querySelectorAll(`${GROUP}[data-collapsed]`)) {
+          group.removeAttribute("data-open");
+          group.removeAttribute("data-collapsed");
+        }
+      }
+    }
+  };
+}
+
 // src/controls.ts
 var CONTROL_DEFINERS = [
   defineIcon,
@@ -5725,10 +6266,12 @@ var CONTROL_DEFINERS = [
   defineRibbonSection,
   defineGallery,
   defineCommentsPane,
-  defineSymbolPicker
+  defineSymbolPicker,
+  defineColorGrid,
+  defineColorCustom
 ];
 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, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, commentInitials, createRibbonOverflow, defineAccount, defineBackstage, defineButton, defineCheckbox, 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, 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, parseOfficeSymbolCode, parseSvgPreview, profileInitials, rangeControl, range_control_default, readOfficeProfile, registerControls, rulerDivisions, runKeyTips, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile };