ooxml-ui 0.29.0 → 0.29.2

package/README.md

@@ -46,7 +46,7 @@ strip, backstage, account, find bar, print preview, ruler), `presence/`, `smarta
   private field behind a hand-written accessor.
 - **Text is exact.** Text-bearing elements are written without whitespace between nodes, because
   consumers compare `textContent`. `oxfmt` is set to `htmlWhitespaceSensitivity: "strict"` for
-  `packages/ui/src` (not `teams/`) so it never adds whitespace to a template; `glyph.ts` opts out of
+  `src/ui/src` (not `teams/`) so it never adds whitespace to a template; `glyph.ts` opts out of
   the formatter with `// prettier-ignore` because it reflows `<svg>` regardless.
 - **`ribbon-section` and `keytips`** keep imperative DOM on purpose: the section patches light-DOM
   children keyed by id (so focus and a product's tags survive), and keytips attaches a badge layer to
@@ -194,7 +194,7 @@ a dark scheme keeps working.
 for framework bindings and editor tooling. Properties and attributes are read from the live classes;
 events are the names each element fires, taken from its source, so an event dispatched under a name
 built at run time would be missing. A test fails while the file is out of date: run
-`bun run --cwd packages/ui gen:manifest` after changing an element.
+`bun run --cwd src/ui gen:manifest` after changing an element.
 
 `office-ui-smartart` shows the drawing the producing application cached; it never lays out a
 diagram itself. Preset outlines it cannot draw are rendered as rectangles, gradient and pattern
@@ -212,10 +212,10 @@ become aliases of `office-ui-*`.
 
 ```
 bun install
-bun run --cwd packages/ui typecheck
-bun run --cwd packages/ui test
-bun run build && bun run --cwd packages/ui build   # core first: the declarations read ../../dist
-bun run --cwd packages/ui test:package
+bun run --cwd src/ui typecheck
+bun run --cwd src/ui test
+bun run build && bun run --cwd src/ui build   # core first: the declarations read ../../dist
+bun run --cwd src/ui test:package
 ```
 
 ## Documentation

package/dist/chrome/backstage.d.ts

@@ -58,6 +58,10 @@ export declare class OfficeUiBackstage extends OfficeElement {
     backLabel: string | null;
     private picked;
     constructor();
+    /** The controls Tab visits while open, in order: back, the navigation, then the shown page. */
+    private tabStops;
+    /** Keeps Tab inside the open File view: past the last control it returns to the first. */
+    private trapTab;
     get selected(): string;
     set selected(id: string | null);
     /** Open on a page (default: the selected one) and focus its item. */

package/dist/{chunk-V6W5DKJ6.js → chunk-4TSBX6J3.js}

@@ -1,7 +1,7 @@
 import { OfficeElement, controlStyles, definer } from './chunk-ZWBP2WTC.js';
 import { html } from 'lit';
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/presence/presence.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/presence/presence.css?raw
 var presence_default = ":host {\n	display: inline-flex;\n	align-items: center;\n}\nul {\n	display: flex;\n	margin: 0;\n	padding: 0;\n	list-style: none;\n}\nli {\n	margin-inline-start: calc(-1 * var(--office-space-1-5));\n}\nli:first-child {\n	margin-inline-start: 0;\n}\nbutton,\n.more {\n	box-sizing: border-box;\n	display: inline-grid;\n	place-items: center;\n	width: var(--office-target-size);\n	height: var(--office-target-size);\n	padding: 0;\n	border-radius: 50%;\n	border: var(--office-border-width-thick) solid var(--office-avatar-color);\n	background: var(--office-surface);\n	color: var(--office-foreground);\n	font: 600 var(--office-font-size-xs) var(--office-font);\n	cursor: pointer;\n}\n.more {\n	cursor: default;\n	border-color: var(--office-border);\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n	z-index: 1;\n}\nbutton[data-status='idle'] {\n	opacity: 0.7;\n}\nbutton[data-status='away'] {\n	opacity: 0.45;\n	border-style: dashed;\n}\n@media (forced-colors: active) {\n	button,\n	.more {\n		border-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n	}\n	button:focus-visible {\n		outline-color: Highlight;\n	}\n}\n";
 
 // src/presence/presence.ts

package/dist/{chunk-G4ZGQYBH.js → chunk-4VKD3COE.js}

@@ -1,5 +1,5 @@
 import { createIconSvg, paintIcon, getIcon } from './chunk-HZ422LTR.js';
-import { initialsOf } from './chunk-V6W5DKJ6.js';
+import { initialsOf } from './chunk-4TSBX6J3.js';
 import { OfficeElement, controlStyles, definer, valueOn, flag, present, triState, withTokens } from './chunk-ZWBP2WTC.js';
 import { tok, OFFICE_TOKENS } from './chunk-7Q7ZS2CC.js';
 import { html, LitElement, nothing, render, svg } from 'lit';
@@ -20,7 +20,7 @@ function glyph(name, className = "glyph", hidden = false) {
 	>${found ? svg`<path d=${found.d}></path>` : ""}</svg>`;
 }
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/dialog/dialog-footer.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/dialog/dialog-footer.css?raw
 var dialog_footer_default = ":host {\n	display: block;\n	flex: 1 1 auto;\n	min-width: 0;\n}\n:host([hidden]) {\n	display: none !important;\n}\nsvg {\n	flex: none;\n	width: var(--office-icon-size);\n	height: var(--office-icon-size);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n.footer {\n	box-sizing: border-box;\n	display: flex;\n	flex-wrap: wrap;\n	justify-content: flex-end;\n	gap: var(--office-space-2);\n}\nbutton {\n	box-sizing: border-box;\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-1-5);\n	min-width: var(--office-control-height);\n	min-height: var(--office-control-height-lg);\n	padding: var(--office-space-1-5) var(--office-space-3-5);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-md);\n	background: var(--office-surface);\n	color: var(--office-foreground);\n	font: 500 var(--office-font-size)/1.2 var(--office-font);\n	cursor: pointer;\n	touch-action: manipulation;\n}\nbutton:hover:not(:disabled) {\n	background: var(--office-selected);\n}\nbutton.primary {\n	border-color: var(--office-accent);\n	background: var(--office-accent);\n	color: var(--office-accent-foreground);\n}\nbutton.primary:hover:not(:disabled) {\n	opacity: 0.9;\n	background: var(--office-accent);\n}\nbutton.warning {\n	border-color: var(--office-warning);\n	background: var(--office-warning);\n	color: var(--office-warning-foreground);\n}\nbutton.warning:hover:not(:disabled) {\n	opacity: 0.9;\n	background: var(--office-warning);\n}\nbutton.danger {\n	border-color: var(--office-danger);\n	background: var(--office-danger);\n	color: var(--office-danger-foreground);\n}\nbutton.danger:hover:not(:disabled) {\n	opacity: 0.9;\n	background: var(--office-danger);\n}\nbutton.start {\n	margin-right: auto;\n}\nbutton.busy::before {\n	content: '';\n	width: var(--office-icon-size-sm);\n	height: var(--office-icon-size-sm);\n	border: var(--office-border-width-thick) solid currentColor;\n	border-right-color: transparent;\n	border-radius: 50%;\n	animation: office-footer-spin var(--office-duration-spin) linear infinite;\n}\n@keyframes office-footer-spin {\n	to {\n		transform: rotate(360deg);\n	}\n}\n@media (prefers-reduced-motion: reduce) {\n	button.busy::before {\n		animation: none;\n	}\n}\nbutton:disabled {\n	cursor: not-allowed;\n	opacity: 0.55;\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n@media (pointer: coarse), (max-width: 767px) {\n	button {\n		min-width: var(--office-target-size-touch);\n		min-height: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	button,\n	button.primary,\n	button.warning,\n	button.danger {\n		border-color: ButtonText;\n		background: ButtonFace;\n		color: ButtonText;\n	}\n	button:hover:not(:disabled) {\n		background: Highlight;\n		color: HighlightText;\n	}\n	button.primary {\n		border-width: var(--office-border-width-thick);\n	}\n	button:focus-visible {\n		outline-color: Highlight;\n	}\n}\n";
 
 // src/dialog/dialog-footer.ts
@@ -74,7 +74,7 @@ var OfficeUiDialogFooter = class extends OfficeElement {
 };
 var defineDialogFooter = definer("office-ui-dialog-footer", () => OfficeUiDialogFooter);
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/notices/toasts.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/notices/toasts.css?raw
 var toasts_default = ":host {\n	box-sizing: border-box;\n	display: flex;\n	flex-direction: column;\n	overflow-y: auto;\n	max-height: 70%;\n	pointer-events: none;\n}\n:host([hidden]) {\n	display: none !important;\n}\n[hidden] {\n	display: none !important;\n}\nsvg {\n	flex: none;\n	width: var(--office-icon-size);\n	height: var(--office-icon-size);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n.header,\n.toast,\n.overflow {\n	pointer-events: auto;\n}\n.header {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: 0 var(--office-space-1);\n	color: var(--office-muted-foreground);\n	font: 600 var(--office-font-size-xs)/1.4 var(--office-font);\n}\n.toast {\n	box-sizing: border-box;\n	display: flex;\n	align-items: flex-start;\n	gap: var(--office-space-2);\n	padding: var(--office-space-2) var(--office-space-2-5);\n	margin-top: var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	color: var(--office-foreground);\n	box-shadow: var(--office-shadow-lg);\n	font: var(--office-font-size-sm)/1.4 var(--office-font);\n}\n.toast svg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	margin-top: var(--office-space-px);\n}\n.toast[data-severity='warning'] svg {\n	color: var(--office-warning);\n}\n.toast[data-severity='info'] svg {\n	color: var(--office-info);\n}\n.message {\n	flex: 1;\n	min-width: 0;\n	margin: 0;\n	overflow-wrap: anywhere;\n}\n.overflow {\n	margin: var(--office-space-2) 0 0;\n	text-align: center;\n	color: var(--office-muted-foreground);\n	font: var(--office-font-size-xs) var(--office-font);\n}\nbutton {\n	box-sizing: border-box;\n	flex: none;\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	min-width: var(--office-control-height);\n	min-height: var(--office-control-height);\n	padding: var(--office-space-0) var(--office-space-1);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-muted-foreground);\n	font: inherit;\n	cursor: pointer;\n	touch-action: manipulation;\n}\nbutton:hover {\n	background: var(--office-surface);\n	color: var(--office-foreground);\n}\n.dismiss-all {\n	font-weight: 500;\n	text-decoration: underline;\n	text-underline-offset: var(--office-space-0);\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\n@media (pointer: coarse) {\n	button {\n		min-width: var(--office-target-size-touch);\n		min-height: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	.toast {\n		border-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n	}\n	.toast svg,\n	button {\n		color: ButtonText;\n	}\n	button:hover {\n		background: Highlight;\n		color: HighlightText;\n	}\n	button:focus-visible {\n		outline-color: Highlight;\n	}\n}\n";
 
 // src/notices/toasts.ts
@@ -142,7 +142,7 @@ var OfficeUiToasts = class extends OfficeElement {
 };
 var defineToasts = definer("office-ui-toasts", () => OfficeUiToasts);
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/notices/paste-options.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/notices/paste-options.css?raw
 var paste_options_default = ":host {\n	position: fixed;\n	z-index: 1100;\n	display: block;\n}\n:host([hidden]) {\n	display: none !important;\n}\n.toolbar {\n	box-sizing: border-box;\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-0);\n	padding: var(--office-space-1);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius);\n	background: var(--office-popover);\n	box-shadow: var(--office-shadow-lg);\n	font: var(--office-font-size-xs)/1.2 var(--office-font);\n}\nbutton {\n	box-sizing: border-box;\n	min-height: var(--office-control-height);\n	padding: var(--office-space-1) var(--office-space-2);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-foreground);\n	font: inherit;\n	white-space: nowrap;\n	cursor: pointer;\n	touch-action: manipulation;\n}\nbutton:hover {\n	background: var(--office-surface);\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\n@media (pointer: coarse) {\n	button {\n		min-height: var(--office-target-size-touch);\n		min-width: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	.toolbar {\n		border-color: CanvasText;\n		background: Canvas;\n	}\n	button {\n		color: ButtonText;\n	}\n	button:hover {\n		background: Highlight;\n		color: HighlightText;\n	}\n	button:focus-visible {\n		outline-color: Highlight;\n	}\n}\n";
 
 // src/notices/paste-options.ts
@@ -229,7 +229,7 @@ var OfficeUiPasteOptions = class extends OfficeElement {
 };
 var definePasteOptions = definer("office-ui-paste-options", () => OfficeUiPasteOptions);
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/notices/read-only-banner.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/notices/read-only-banner.css?raw
 var read_only_banner_default = ":host {\n	display: block;\n	flex: none;\n}\n:host([hidden]) {\n	display: none !important;\n}\n[hidden] {\n	display: none !important;\n}\nsvg {\n	flex: none;\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n	color: var(--office-notice-accent);\n}\n.banner {\n	box-sizing: border-box;\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	padding: var(--office-space-1-5) var(--office-space-4);\n	border-bottom: var(--office-border-width) solid var(--office-notice-border);\n	background: var(--office-notice-background);\n	color: var(--office-notice-foreground);\n	font: var(--office-font-size-sm)/1.4 var(--office-font);\n}\n.text {\n	flex: 1 1 auto;\n	min-width: 0;\n	margin: 0;\n}\n.form {\n	display: flex;\n	flex: none;\n	align-items: center;\n	gap: var(--office-space-2);\n}\n.sr-only {\n	position: absolute;\n	width: var(--office-space-px);\n	height: var(--office-space-px);\n	margin: calc(-1 * var(--office-space-px));\n	padding: 0;\n	overflow: hidden;\n	clip: rect(0, 0, 0, 0);\n	white-space: nowrap;\n	border: 0;\n}\nbutton,\ninput {\n	font: inherit;\n}\nbutton {\n	box-sizing: border-box;\n	flex: none;\n	min-height: var(--office-control-height);\n	padding: var(--office-space-1) var(--office-space-3);\n	border: var(--office-border-width) solid transparent;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: inherit;\n	font-weight: 500;\n	cursor: pointer;\n	touch-action: manipulation;\n}\nbutton.primary {\n	border-color: color-mix(in srgb, var(--office-notice-accent) 50%, transparent);\n}\nbutton:hover {\n	background: color-mix(in srgb, var(--office-notice-accent) 15%, transparent);\n}\nbutton:disabled {\n	opacity: 0.6;\n	cursor: not-allowed;\n}\nbutton:focus-visible,\ninput:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\ninput {\n	box-sizing: border-box;\n	min-height: var(--office-control-height);\n	padding: var(--office-space-1) var(--office-space-2);\n	border: var(--office-border-width) solid\n		color-mix(in srgb, var(--office-notice-accent) 40%, transparent);\n	border-radius: var(--office-radius);\n	background: var(--office-background);\n	color: var(--office-foreground);\n}\n.error {\n	flex: none;\n	color: var(--office-danger);\n}\n@media (pointer: coarse) {\n	button,\n	input {\n		min-height: var(--office-target-size-touch);\n		min-width: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	.banner {\n		border-bottom-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n	}\n	svg,\n	.error {\n		color: CanvasText;\n	}\n	button,\n	input {\n		border-color: ButtonText;\n		color: ButtonText;\n		background: ButtonFace;\n	}\n	button:focus-visible,\n	input:focus-visible {\n		outline-color: Highlight;\n	}\n}\n";
 
 // src/notices/read-only-banner.ts
@@ -345,7 +345,7 @@ var defineReadOnlyBanner = definer(
   () => OfficeUiReadOnlyBanner
 );
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/form/radio.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/form/radio.css?raw
 var radio_default = "/* Tokens: --office-checkbox-size, --office-radio-dot-size and their -touch variants. */\n:host {\n	display: inline-grid;\n	box-sizing: border-box;\n	width: var(--office-checkbox-size);\n	height: var(--office-checkbox-size);\n	flex: none;\n	place-items: center;\n	border: var(--office-border-width) solid var(--office-checkbox-border);\n	border-radius: 50%;\n	background: var(--office-checkbox-background);\n	cursor: pointer;\n	vertical-align: middle;\n}\n:host([checked]) {\n	border-color: var(--office-checkbox-accent);\n}\n:host(:focus-visible) {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n:host([disabled]) {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\n.dot {\n	display: none;\n	width: var(--office-radio-dot-size);\n	height: var(--office-radio-dot-size);\n	border-radius: 50%;\n	background: var(--office-checkbox-accent);\n}\n:host([checked]) .dot {\n	display: block;\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n	:host {\n		width: var(--office-checkbox-size-touch);\n		height: var(--office-checkbox-size-touch);\n	}\n	.dot {\n		width: var(--office-radio-dot-size-touch);\n		height: var(--office-radio-dot-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	:host {\n		border-color: CanvasText;\n		background: Canvas;\n		forced-color-adjust: auto;\n	}\n	:host([checked]) {\n		border-color: Highlight;\n	}\n	.dot {\n		background: Highlight;\n	}\n	:host([disabled]) {\n		border-color: GrayText;\n	}\n	:host([disabled]) .dot {\n		background: GrayText;\n	}\n	:host(:focus-visible) {\n		outline-color: Highlight;\n	}\n}\n";
 
 // src/form/radio.ts
@@ -560,7 +560,7 @@ var OfficeUiCheckable = class extends OfficeElement {
   }
 };
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/form/checkbox.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/form/checkbox.css?raw
 var checkbox_default = ":host {\n	display: inline-grid;\n	box-sizing: border-box;\n	width: var(--office-checkbox-size);\n	height: var(--office-checkbox-size);\n	flex: none;\n	place-items: center;\n	border: var(--office-border-width) solid var(--office-checkbox-border);\n	border-radius: var(--office-checkbox-radius);\n	background: var(--office-checkbox-background);\n	color: var(--office-checkbox-accent-foreground);\n	cursor: pointer;\n	vertical-align: middle;\n}\n:host([checked]) {\n	border-color: var(--office-checkbox-accent);\n	background: var(--office-checkbox-accent);\n}\n:host(:focus-visible) {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n:host([disabled]) {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\nsvg {\n	display: none;\n	width: var(--office-icon-size-sm);\n	height: var(--office-icon-size-sm);\n}\n:host([checked]) svg {\n	display: block;\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n	:host {\n		width: var(--office-checkbox-size-touch);\n		height: var(--office-checkbox-size-touch);\n	}\n	svg {\n		width: var(--office-icon-size-md);\n		height: var(--office-icon-size-md);\n	}\n}\n@media (forced-colors: active) {\n	:host {\n		border-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n		forced-color-adjust: auto;\n	}\n	:host([checked]) {\n		border-color: Highlight;\n		background: Highlight;\n		color: HighlightText;\n	}\n}\n";
 
 // src/form/checkbox.ts
@@ -573,7 +573,7 @@ var OfficeUiCheckbox = class extends OfficeUiCheckable {
 };
 var defineCheckbox = definer("office-ui-checkbox", () => OfficeUiCheckbox);
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/ribbon/ribbon-toggle.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/ribbon/ribbon-toggle.css?raw
 var ribbon_toggle_default = ":host {\n	display: block;\n}\nlabel {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1);\n	min-height: var(--office-ribbon-row-height);\n	padding: 0 var(--office-space-1);\n	color: var(--office-foreground);\n	font: inherit;\n	font-size: var(--office-font-size-sm);\n	white-space: nowrap;\n	cursor: pointer;\n}\n:host([disabled]) label {\n	color: var(--office-muted-foreground);\n	cursor: not-allowed;\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n	label {\n		min-height: var(--office-target-size-touch);\n		font-size: var(--office-font-size-sm);\n	}\n}\n";
 
 // src/ribbon/ribbon-toggle.ts
@@ -639,7 +639,7 @@ var defineRibbonToggle = definer("office-ui-ribbon-toggle", () => OfficeUiRibbon
   defineCheckbox
 ]);
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/form/search-field.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/form/search-field.css?raw
 var search_field_default = "/* Tokens: --office-field-*. */\n:host {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	box-sizing: border-box;\n	width: 100%;\n	height: var(--office-field-height-lg);\n	padding: 0 var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-field-radius);\n	background: var(--office-field-background);\n	color: var(--office-field-placeholder);\n	font: inherit;\n}\n:host(:focus-within) {\n	border-color: var(--office-field-border-focus);\n}\n:host([variant='titlebar']) {\n	height: var(--office-field-height);\n	gap: var(--office-space-1-5);\n	padding-inline: var(--office-space-3-5);\n	border-color: var(--office-border);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n}\n:host([variant='titlebar']:focus-within) {\n	border-color: var(--office-field-border-focus);\n	color: var(--office-foreground);\n}\n:host([disabled]) {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\nsvg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	flex: none;\n}\n:host([variant='titlebar']) svg {\n	width: var(--office-icon-size);\n	height: var(--office-icon-size);\n}\ninput {\n	min-width: 0;\n	width: 100%;\n	height: 100%;\n	flex: 1;\n	padding: 0;\n	border: 0;\n	outline: 0;\n	background: transparent;\n	color: var(--office-field-foreground);\n	font: inherit;\n	font-size: var(--office-font-size);\n}\n:host([variant='titlebar']) input {\n	font-size: var(--office-font-size-xs);\n	color: var(--office-foreground);\n}\ninput::placeholder {\n	color: var(--office-field-placeholder);\n	opacity: 0.8;\n}\ninput::-webkit-search-cancel-button {\n	display: none;\n}\n\n@media (forced-colors: active) {\n	:host {\n		border-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n	}\n	:host(:focus-within) {\n		outline: var(--office-focus-width) solid Highlight;\n		outline-offset: var(--office-focus-offset);\n	}\n	input {\n		color: CanvasText;\n	}\n}\n";
 
 // src/form/search-field.ts
@@ -714,7 +714,7 @@ var OfficeUiSearch = class extends OfficeElement {
 };
 var defineSearchField = definer("office-ui-search", () => OfficeUiSearch);
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/chrome/backstage.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/chrome/backstage.css?raw
 var backstage_default = ":host {\n	position: absolute;\n	inset: 0;\n	z-index: 30;\n	display: none;\n	min-width: 0;\n	background: var(--office-background);\n	color: var(--office-foreground);\n	font-family: var(--office-font);\n}\n:host([open]) {\n	display: block;\n}\n.frame {\n	display: flex;\n	height: 100%;\n	min-width: 0;\n}\nnav {\n	display: flex;\n	flex: 0 0 var(--office-backstage-nav-width);\n	flex-direction: column;\n	padding: var(--office-space-3) 0;\n	overflow: auto;\n	background: var(--office-backstage-nav-background);\n	color: var(--office-backstage-nav-foreground);\n}\nnav button {\n	border: 0;\n	border-radius: 0;\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	text-align: start;\n	cursor: pointer;\n}\n.back {\n	width: var(--office-backstage-back-size);\n	min-height: var(--office-backstage-back-size);\n	margin: 0 0 var(--office-space-3) var(--office-space-4);\n	padding: 0;\n	border: calc(var(--office-border-width-thick) * 0.75) solid currentColor;\n	border-radius: 50%;\n	font-size: var(--office-font-size-xl);\n	text-align: center;\n}\n.item {\n	min-height: var(--office-backstage-item-height);\n	padding: var(--office-space-1-5) var(--office-space-6);\n	font-size: var(--office-font-size-md);\n}\n.item:hover:enabled,\n.item[aria-current='page'] {\n	background: var(--office-backstage-item-hover);\n}\n.item:disabled {\n	opacity: 0.55;\n	cursor: default;\n}\nnav button:focus-visible {\n	outline: var(--office-focus-width) solid currentColor;\n	outline-offset: calc(-1 * var(--office-focus-width));\n}\n.items {\n	display: flex;\n	flex-direction: column;\n}\n.footer {\n	display: flex;\n	flex-direction: column;\n	margin-top: auto;\n	padding-top: var(--office-space-4);\n}\n.body {\n	flex: 1;\n	min-width: 0;\n	overflow: auto;\n	padding: var(--office-backstage-padding);\n}\n@media (max-width: 760px) {\n	.frame {\n		flex-direction: column;\n	}\n	nav {\n		flex: none;\n		flex-direction: row;\n		flex-wrap: wrap;\n		padding: var(--office-space-1-5);\n	}\n	.back {\n		margin: var(--office-space-1);\n	}\n	.item {\n		min-height: var(--office-target-size-touch);\n		padding: var(--office-space-1-5) var(--office-space-3);\n	}\n	.items,\n	.footer {\n		flex-direction: row;\n		flex-wrap: wrap;\n		margin-top: 0;\n		padding-top: 0;\n	}\n	.body {\n		padding: var(--office-space-4);\n	}\n}\n@media (forced-colors: active) {\n	nav {\n		border-inline-end: var(--office-border-width) solid CanvasText;\n	}\n	.item[aria-current='page'] {\n		outline: var(--office-focus-width) solid Highlight;\n	}\n}\n";
 
 // src/chrome/backstage.ts
@@ -736,12 +736,36 @@ var OfficeUiBackstage = class extends OfficeElement {
     this.label = null;
     this.backLabel = null;
     this.addEventListener("keydown", (event) => {
-      if (event.key !== "Escape" || !present(this.open)) return;
+      if (!present(this.open)) return;
+      if (event.key === "Tab") return this.trapTab(event);
+      if (event.key !== "Escape") return;
       event.preventDefault();
       event.stopPropagation();
       this.requestClose("escape");
     });
   }
+  /** The controls Tab visits while open, in order: back, the navigation, then the shown page. */
+  tabStops() {
+    const chrome = [...this.renderRoot.querySelectorAll("button:not([disabled])")];
+    const page = [...this.children].filter((child) => child instanceof HTMLElement && !child.hidden).flatMap((child) => [
+      ...child.querySelectorAll(
+        'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      )
+    ]).filter((control) => !control.disabled);
+    return [...chrome, ...page].filter((control) => control.getClientRects().length > 0);
+  }
+  /** Keeps Tab inside the open File view: past the last control it returns to the first. */
+  trapTab(event) {
+    const stops = this.tabStops();
+    if (stops.length === 0) return;
+    const root = this.getRootNode();
+    const current = this.shadowRoot?.activeElement ?? root.activeElement;
+    const index = stops.findIndex((control) => control === current || control.contains(current));
+    const last = stops.length - 1;
+    if (event.shiftKey ? index > 0 : index < last) return;
+    event.preventDefault();
+    stops[event.shiftKey ? last : 0]?.focus();
+  }
   get selected() {
     return this.picked ?? "";
   }
@@ -831,7 +855,7 @@ var OfficeUiBackstage = class extends OfficeElement {
 };
 var defineBackstage = definer("office-ui-backstage", () => OfficeUiBackstage);
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/chrome/find-bar.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/chrome/find-bar.css?raw
 var find_bar_default = ":host {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	min-height: var(--office-find-bar-height);\n	padding: var(--office-space-1) var(--office-space-2) var(--office-space-1) var(--office-space-3);\n	border-bottom: var(--office-border-width) solid var(--office-border);\n	background: var(--office-surface);\n	color: var(--office-foreground);\n	font: var(--office-font-size-sm) var(--office-font);\n}\n:host(:not([open])) {\n	display: none;\n}\n[role='search'] {\n	display: flex;\n	flex: 1;\n	align-items: center;\n	gap: var(--office-space-1);\n	min-width: 0;\n	max-width: var(--office-find-max-width);\n}\nlabel {\n	display: flex;\n	flex: 1;\n	align-items: center;\n	gap: var(--office-space-1-5);\n	min-width: 0;\n}\ninput {\n	flex: 1;\n	min-width: 0;\n	min-height: var(--office-input-height);\n	padding: var(--office-space-0) var(--office-space-1-5);\n	font: inherit;\n	color: inherit;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-sm);\n	background: var(--office-background);\n}\nbutton {\n	min-height: var(--office-input-height);\n	padding: var(--office-space-0) var(--office-space-2);\n	font: inherit;\n	color: inherit;\n	cursor: pointer;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-sm);\n	background: var(--office-background);\n}\nbutton:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\n.status {\n	flex: 1;\n	min-width: 0;\n	overflow: hidden;\n	white-space: nowrap;\n	text-overflow: ellipsis;\n	color: var(--office-muted-foreground);\n}\n.close {\n	margin-inline-start: auto;\n	width: var(--office-target-size);\n	padding: 0;\n	border-color: transparent;\n	background: transparent;\n	font-size: var(--office-font-size-xl);\n	line-height: 1;\n}\ninput:focus-visible,\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\n@media (max-width: 760px) {\n	:host {\n		flex-wrap: wrap;\n	}\n	[role='search'] {\n		flex-wrap: wrap;\n	}\n}\n";
 
 // src/chrome/find-bar.ts
@@ -968,7 +992,7 @@ var OfficeUiFindBar = class extends OfficeElement {
 };
 var defineFindBar = definer("office-ui-find-bar", () => OfficeUiFindBar);
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/chrome/print-preview.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/chrome/print-preview.css?raw
 var print_preview_default = ":host {\n	display: block;\n	max-width: var(--office-print-preview-width);\n	font: var(--office-font-size-sm) var(--office-font);\n	color: var(--office-foreground);\n}\n.sheet {\n	padding: var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-border);\n	background: var(--office-paper);\n	box-shadow: var(--office-shadow-sm);\n}\n.sheet > * {\n	display: block;\n	width: 100%;\n	height: auto;\n}\n.empty {\n	color: var(--office-muted-foreground);\n}\n.nav {\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-2);\n	margin-top: var(--office-space-2);\n}\n.nav[hidden] {\n	display: none;\n}\nbutton {\n	min-width: var(--office-target-size);\n	min-height: var(--office-target-size);\n	font: inherit;\n	color: inherit;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-sm);\n	background: var(--office-background);\n	cursor: pointer;\n}\nbutton:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\n";
 
 // src/chrome/print-preview.ts
@@ -1058,7 +1082,7 @@ var OfficeUiPrintPreview = class extends OfficeElement {
 };
 var definePrintPreview = definer("office-ui-print-preview", () => OfficeUiPrintPreview);
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/ribbon/ribbon-tabs.css?raw
+// 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\n.collapse {\n	flex: none;\n	align-self: center;\n	width: var(--office-target-size);\n	height: var(--office-target-size);\n	margin-inline: auto 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";
 
 // src/ribbon/ribbon-tabs.ts
@@ -1300,7 +1324,7 @@ var OfficeUiRibbon = class extends OfficeElement {
 };
 var defineRibbon = definer("office-ui-ribbon", () => OfficeUiRibbon);
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/ribbon/button.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/ribbon/button.css?raw
 var button_default = ":host {\n	display: inline-flex;\n	vertical-align: middle;\n}\nbutton {\n	box-sizing: border-box;\n	position: relative;\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-1-5);\n	min-width: var(--office-target-size);\n	min-height: var(--office-target-size);\n	padding: 0 var(--office-space-2);\n	border: var(--office-border-width) solid transparent;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-foreground);\n	font: inherit;\n	font-size: var(--office-font-size-sm);\n	cursor: pointer;\n	white-space: nowrap;\n}\n:host([variant='stacked']) button {\n	flex-direction: column;\n	padding: var(--office-space-1) var(--office-space-2);\n}\nbutton:hover:not(:disabled) {\n	background: var(--office-surface);\n}\nbutton:active:not(:disabled) {\n	background: var(--office-selected);\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\nbutton[aria-pressed='true'],\nbutton[aria-expanded='true'] {\n	border-color: var(--office-accent);\n	background: var(--office-surface);\n}\n:host([active]) button {\n	background: var(--office-command-active);\n	color: var(--office-accent);\n}\nbutton:disabled {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\nsvg {\n	width: var(--office-icon-size-ml);\n	height: var(--office-icon-size-ml);\n	flex: none;\n	color: var(--office-command-icon-color);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\nsvg.glyph:not([data-painted]) {\n	display: none;\n}\n.label[hidden],\n.caret[hidden],\n.badge[hidden] {\n	display: none;\n}\n/* Office trails a menu chevron after the last line of the label. */\n.caret {\n	display: inline-block;\n	width: var(--office-icon-size-xs);\n	height: var(--office-icon-size-xs);\n	margin-inline-start: var(--office-space-0);\n	vertical-align: middle;\n	color: var(--office-muted-foreground);\n}\n.badge {\n	position: absolute;\n	top: 0;\n	inset-inline-end: 0;\n	padding: 0 var(--office-space-0);\n	border-radius: var(--office-radius-full);\n	background: var(--office-accent);\n	color: var(--office-accent-foreground);\n	font-size: var(--office-font-size-3xs);\n}\n\n/* Large ribbon command: a big glyph above a two-line label. */\n:host([size='large']) button {\n	flex-direction: column;\n	justify-content: flex-start;\n	gap: var(--office-space-0);\n	min-width: var(--office-command-large-min-width);\n	max-width: var(--office-command-large-max-width);\n	height: var(--office-command-large-height);\n	padding: var(--office-space-0) var(--office-space-1);\n	border: 0;\n	white-space: normal;\n	text-align: center;\n	line-height: var(--office-line-height-tight);\n}\n:host([size='large']) svg.glyph {\n	width: var(--office-command-large-icon);\n	height: var(--office-command-large-icon);\n}\n\n/* Small ribbon command: icon and label in one row. */\n:host([size='small']) button {\n	justify-content: flex-start;\n	min-width: 0;\n	height: var(--office-control-height);\n	min-height: var(--office-control-height);\n	padding: 0 var(--office-space-1-5);\n	border: 0;\n	text-align: start;\n}\n:host([size='small']) svg.glyph {\n	width: var(--office-command-small-icon);\n	height: var(--office-command-small-icon);\n}\n\n/* Tall, label-less tool tiles (pens, erasers). */\n:host([icon-only][tall]) button {\n	min-width: var(--office-command-tall-min-width);\n	height: var(--office-command-tall-height);\n	padding: var(--office-space-1);\n}\n:host([icon-only][tall]) svg.glyph {\n	width: var(--office-command-tall-icon);\n	height: var(--office-command-tall-icon);\n}\n:host([icon-only][tall][active]) button {\n	box-shadow: inset 0 0 0 var(--office-border-width) var(--office-accent);\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n	:host([size='small']) button {\n		min-height: var(--office-target-size-touch);\n	}\n	:host([icon-only]) button {\n		min-width: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	button {\n		border-color: ButtonText;\n		color: ButtonText;\n		background: ButtonFace;\n	}\n	svg {\n		color: ButtonText;\n	}\n	button:disabled {\n		color: GrayText;\n		border-color: GrayText;\n	}\n	button[aria-pressed='true'],\n	button[aria-expanded='true'],\n	:host([active]) button {\n		background: Highlight;\n		color: HighlightText;\n	}\n}\n";
 
 // src/ribbon/button.ts
@@ -1379,7 +1403,7 @@ var OfficeUiButton = class extends OfficeElement {
 };
 var defineButton = definer("office-ui-button", () => OfficeUiButton);
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/ribbon/ribbon-group.css?raw
+// 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";
 
 // src/ribbon/ribbon-group.ts
@@ -1495,7 +1519,7 @@ var OfficeUiRibbonGroup = class extends OfficeElement {
 };
 var defineRibbonGroup = definer("office-ui-ribbon-group", () => OfficeUiRibbonGroup);
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/ribbon/ribbon-section.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/ribbon/ribbon-section.css?raw
 var ribbon_section_default = ":host {\n	display: inline-flex;\n	align-items: stretch;\n}\n::slotted(*) {\n	flex: none;\n}\n";
 
 // src/ribbon/ribbon-section.ts
@@ -1603,7 +1627,7 @@ var defineRibbonSection = definer(
   [defineRibbonGroup, defineButton]
 );
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/ribbon/gallery.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/ribbon/gallery.css?raw
 var gallery_default = "[data-office-gallery] {\n	display: inline-flex;\n	position: relative;\n	flex: none;\n	color: var(--office-foreground);\n}\n[data-office-gallery] .gallery-view {\n	display: contents;\n}\n[data-office-gallery] button {\n	box-sizing: border-box;\n	font: inherit;\n	color: inherit;\n	cursor: pointer;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius);\n	background: var(--office-background);\n}\n[data-office-gallery] button:hover:not(:disabled) {\n	background: var(--office-selected);\n}\n[data-office-gallery] button:disabled {\n	opacity: 0.4;\n	cursor: not-allowed;\n}\n[data-office-gallery] button:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n[data-office-gallery] .trigger {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-1-5);\n	min-height: var(--office-gallery-trigger-height);\n	padding: 0 var(--office-space-1-5);\n	font-size: var(--office-font-size-sm);\n	white-space: nowrap;\n}\n[data-office-gallery]:not([mode='inline']) .trigger {\n	border-color: transparent;\n	background: transparent;\n}\n[data-office-gallery] .trigger svg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n[data-office-gallery][mode='inline'] .trigger,\n[data-office-gallery][chevron-only] .trigger {\n	align-self: stretch;\n	padding: 0 var(--office-space-1);\n}\n[data-office-gallery] .strip {\n	display: flex;\n	gap: var(--office-space-0);\n	padding: var(--office-space-0);\n	align-items: center;\n}\n[data-office-gallery] .tile {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	flex: none;\n	padding: var(--office-space-0);\n}\n[data-office-gallery] .tile[aria-pressed='true'] {\n	border: var(--office-border-width-thick) solid var(--office-accent);\n	background: color-mix(in srgb, var(--office-accent) 15%, var(--office-background));\n}\n[data-office-gallery] .tile svg {\n	max-width: 100%;\n	max-height: 100%;\n}\n[data-office-gallery][mode='inline'] .strip {\n	gap: 0;\n	border: var(--office-border-width) solid var(--office-border);\n	border-inline-end: 0;\n	border-radius: var(--office-radius-sm) 0 0 var(--office-radius-sm);\n	background: var(--office-gallery-strip-background);\n}\n[data-office-gallery][mode='inline'] .trigger {\n	border-radius: 0 var(--office-radius-sm) var(--office-radius-sm) 0;\n	background: var(--office-gallery-strip-background);\n}\n[data-office-gallery] .trigger.command {\n	border-color: transparent;\n	background: transparent;\n	justify-content: flex-start;\n}\n[data-office-gallery] .trigger.command:hover:not(:disabled) {\n	border-color: var(--office-border);\n	background: var(--office-selected);\n}\n[data-office-gallery] .trigger.command svg {\n	color: var(--office-command-icon-color);\n}\n[data-office-gallery] .trigger.command-large {\n	flex-direction: column;\n	align-items: center;\n	justify-content: flex-start;\n	gap: var(--office-space-0);\n	min-width: var(--office-gallery-command-min-width);\n	max-width: var(--office-gallery-command-max-width);\n	height: var(--office-gallery-command-height);\n	padding: var(--office-space-1);\n	font-size: var(--office-font-size-2xs);\n	line-height: var(--office-line-height-tight);\n	white-space: normal;\n	text-align: center;\n}\n[data-office-gallery] .trigger.command-large svg {\n	width: var(--office-gallery-command-icon);\n	height: var(--office-gallery-command-icon);\n}\n[data-office-gallery] .popup {\n	box-sizing: border-box;\n	position: fixed;\n	z-index: var(--office-z-popover);\n	max-width: calc(100vw - var(--office-space-4));\n	max-height: var(--office-gallery-popup-max-height);\n	overflow: auto;\n	padding: var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	color: var(--office-popover-foreground);\n	box-shadow: var(--office-shadow-lg);\n}\n[data-office-gallery] .popup[hidden] {\n	display: none;\n}\n[data-office-gallery] .grid {\n	display: grid;\n	gap: var(--office-space-1);\n	width: max-content;\n	max-width: 100%;\n}\n[data-office-gallery] .heading {\n	margin: var(--office-space-1) 0 var(--office-space-1-5);\n	font-size: var(--office-font-size-xs);\n	font-weight: var(--office-font-weight-bold);\n}\n[data-office-gallery] .section + .section {\n	margin-top: var(--office-space-2-5);\n}\n@media (pointer: coarse), (max-width: 1023px) {\n	[data-office-gallery] .trigger,\n	[data-office-gallery] .tile {\n		min-height: var(--office-target-size-touch);\n		min-width: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	[data-office-gallery] button,\n	[data-office-gallery] .popup {\n		color: ButtonText;\n		background: Canvas;\n		border-color: ButtonText;\n	}\n	[data-office-gallery] button:disabled {\n		color: GrayText;\n		opacity: 1;\n	}\n	[data-office-gallery] button:focus-visible,\n	[data-office-gallery] .tile[aria-pressed='true'] {\n		outline: var(--office-focus-width) solid Highlight;\n		border-color: Highlight;\n	}\n}\n";
 
 // src/ribbon/gallery-styles.ts
@@ -1717,7 +1741,13 @@ var OfficeUiGallery = class extends OfficeElement {
   /** The open popup; while closed it is not in the DOM, so this is a detached hidden placeholder. */
   get popup() {
     this.ensureRendered();
-    return this.querySelector(".popup") ?? this.closedPopup;
+    const open = this.querySelector(".popup");
+    if (open) return open;
+    const attribute = this.constructor.popupAttribute;
+    const id = this.state?.id;
+    if (id === void 0) this.closedPopup.removeAttribute(attribute);
+    else this.closedPopup.setAttribute(attribute, id);
+    return this.closedPopup;
   }
   closedPopup = Object.assign(this.ownerDocument.createElement("div"), {
     className: "popup",
@@ -1893,7 +1923,7 @@ var OfficeUiGallery = class extends OfficeElement {
 };
 var defineGallery = definer("office-ui-gallery", () => OfficeUiGallery);
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/chrome/ruler.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/chrome/ruler.css?raw
 var ruler_default = ":host {\n	display: block;\n	box-sizing: border-box;\n	background: var(--office-background);\n	color: var(--office-muted-foreground);\n	overflow: hidden;\n	font-size: var(--office-font-size-3xs);\n	font-family: var(--office-font);\n}\n:host(:not([orientation='vertical'])) {\n	height: var(--office-ruler-size);\n	border-bottom: var(--office-border-width) solid var(--office-border);\n}\n:host([orientation='vertical']) {\n	width: var(--office-ruler-size);\n	border-inline-end: var(--office-border-width) solid var(--office-border);\n}\ncanvas {\n	display: block;\n	width: 100%;\n	height: 100%;\n}\n";
 
 // src/chrome/ruler.ts
@@ -2054,7 +2084,7 @@ function clearOfficeProfile(storage = defaultStorage(), key = OFFICE_PROFILE_STO
   }
 }
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/chrome/account.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/chrome/account.css?raw
 var account_default = ":host {\n	display: block;\n	font-family: var(--office-font);\n	font-size: var(--office-font-size);\n}\nh2 {\n	margin: 0 0 var(--office-space-3);\n	font-size: var(--office-font-size-lg);\n	font-weight: 600;\n}\n.who {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	margin-bottom: var(--office-space-3);\n}\n.avatar {\n	display: grid;\n	place-items: center;\n	width: var(--office-avatar-size);\n	height: var(--office-avatar-size);\n	border-radius: 50%;\n	color: var(--office-accent-foreground);\n	font-weight: var(--office-font-weight-bold);\n	font-size: var(--office-font-size-xl);\n	flex: none;\n}\n.name {\n	font-size: var(--office-font-size-md);\n	font-weight: 600;\n}\n.note {\n	margin: var(--office-space-0) 0 0;\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-sm);\n}\nlabel {\n	display: grid;\n	gap: var(--office-space-1);\n	max-width: var(--office-account-field-width);\n	margin-bottom: var(--office-space-3);\n}\ninput {\n	min-height: var(--office-field-height);\n	box-sizing: border-box;\n	padding: var(--office-space-0) var(--office-space-1-5);\n	font: inherit;\n	color: inherit;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-sm);\n	background: var(--office-background);\n}\n.swatches {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-1-5);\n	margin: var(--office-space-1) 0 var(--office-space-3);\n}\n.swatches button {\n	width: var(--office-target-size);\n	height: var(--office-target-size);\n	padding: 0;\n	border: var(--office-border-width-thick) solid transparent;\n	border-radius: 50%;\n	cursor: pointer;\n}\n.swatches button[aria-checked='true'] {\n	border-color: var(--office-foreground);\n	box-shadow: inset 0 0 0 var(--office-border-width-thick) var(--office-background);\n}\n.swatches button:focus-visible,\ninput:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\n@media (forced-colors: active) {\n	.swatches button {\n		forced-color-adjust: none;\n	}\n}\n";
 
 // src/chrome/account.ts
@@ -2137,7 +2167,7 @@ var OfficeUiAccount = class extends OfficeElement {
 };
 var defineAccount = definer("office-ui-account", () => OfficeUiAccount);
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/form/switch.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/form/switch.css?raw
 var switch_default = "/* Switch metrics are tokens so a host (a title bar) can size it: --office-switch-width, -height,\n * -border-width, -knob-size, -knob-offset, -knob-travel, -track, -track-on, -thumb, -thumb-on. */\n:host {\n	--_w: var(--office-switch-width);\n	--_h: var(--office-switch-height);\n	--_b: var(--office-switch-border-width);\n	--_k: var(--office-switch-knob-size);\n	--_o: var(--office-switch-knob-offset);\n	display: inline-block;\n	box-sizing: border-box;\n	position: relative;\n	width: var(--_w);\n	height: var(--_h);\n	flex: none;\n	border: var(--_b) solid var(--office-switch-border);\n	border-radius: var(--office-radius-full);\n	background: var(--office-switch-track);\n	cursor: pointer;\n	vertical-align: middle;\n	touch-action: manipulation;\n	transition: background-color var(--office-duration);\n}\n.knob {\n	display: block;\n	position: absolute;\n	top: calc((var(--_h) - 2 * var(--_b) - var(--_k)) / 2);\n	left: var(--_o);\n	width: var(--_k);\n	height: var(--_k);\n	border-radius: 50%;\n	background: var(--office-switch-thumb);\n	box-shadow: var(--office-shadow-sm);\n	transition: transform var(--office-duration);\n}\n:host([checked]) {\n	border-color: var(--office-switch-track-on);\n	background: var(--office-switch-track-on);\n}\n:host([checked]) .knob {\n	transform: translateX(\n		var(--office-switch-knob-travel, calc(var(--_w) - var(--_k) - 2 * var(--_o) - 2 * var(--_b)))\n	);\n	background: var(--office-switch-thumb-on);\n}\n:host(:focus-visible) {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n:host([disabled]) {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\nsvg {\n	display: none;\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n	:host {\n		--_w: var(--office-switch-width-touch);\n		--_h: var(--office-switch-height-touch);\n		--_k: var(--office-switch-knob-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	:host {\n		border-color: CanvasText;\n		background: Canvas;\n		forced-color-adjust: none;\n	}\n	.knob {\n		background: CanvasText;\n	}\n	:host([checked]) {\n		border-color: Highlight;\n		background: Highlight;\n	}\n	:host([checked]) .knob {\n		background: HighlightText;\n	}\n}\n";
 
 // src/form/switch.ts
@@ -2150,7 +2180,7 @@ var OfficeUiSwitch = class extends OfficeUiCheckable {
 };
 var defineSwitch = definer("office-ui-switch", () => OfficeUiSwitch);
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/dialog/dialog.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/dialog/dialog.css?raw
 var dialog_default = ":host {\n	display: none;\n	position: fixed;\n	inset: 0;\n	z-index: 1000;\n	align-items: center;\n	justify-content: center;\n}\n:host([open]) {\n	display: flex;\n}\n.backdrop {\n	position: absolute;\n	inset: 0;\n	background: var(--office-overlay);\n}\n.box {\n	position: relative;\n	box-sizing: border-box;\n	display: flex;\n	flex-direction: column;\n	width: var(--office-dialog-width);\n	min-width: var(--office-dialog-min-width);\n	max-width: var(--office-dialog-max-width);\n	max-height: var(--office-dialog-max-height);\n	background: var(--office-background);\n	color: var(--office-foreground);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-lg);\n	font-family: var(--office-font);\n}\nheader {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-2);\n	padding: var(--office-space-3) var(--office-space-4);\n	border-bottom: var(--office-border-width) solid var(--office-border);\n}\nh2 {\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n	font-weight: 600;\n}\n.body {\n	padding: var(--office-space-4);\n	overflow: auto;\n	font-size: var(--office-font-size);\n}\nfooter {\n	display: flex;\n	justify-content: flex-end;\n	gap: var(--office-space-2);\n	padding: var(--office-space-3) var(--office-space-4);\n	border-top: var(--office-border-width) solid var(--office-border);\n}\nfooter[hidden] {\n	display: none;\n}\n.close {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	min-width: var(--office-target-size);\n	min-height: var(--office-target-size);\n	border: 0;\n	background: transparent;\n	color: inherit;\n	cursor: pointer;\n	border-radius: var(--office-radius);\n}\n.close svg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n}\n.close:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n}\n\n@media (forced-colors: active) {\n	.box {\n		border-color: CanvasText;\n		background: Canvas;\n	}\n	.backdrop {\n		background: transparent;\n	}\n}\n";
 
 // src/dialog/dialog.ts
@@ -2254,7 +2284,7 @@ var OfficeUiDialog = class extends OfficeElement {
 };
 var defineDialog = definer("office-ui-dialog", () => OfficeUiDialog);
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/icon.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/icon.css?raw
 var icon_default = ":host {\n	display: inline-flex;\n	width: 1em;\n	height: 1em;\n}\nsvg {\n	width: 1em;\n	height: 1em;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: 1.5;\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n";
 
 // src/icon.ts
@@ -2286,7 +2316,7 @@ var OfficeUiIcon = class extends OfficeElement {
 };
 var defineIcon = definer("office-ui-icon", () => OfficeUiIcon);
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/menu/command-search.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/menu/command-search.css?raw
 var command_search_default = ":host {\n	display: inline-flex;\n	align-items: center;\n	min-width: 0;\n	font-family: var(--office-font);\n}\n.field {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1-5);\n	width: 100%;\n	min-width: 0;\n	height: var(--office-target-size);\n	padding: 0 var(--office-space-2);\n	box-sizing: border-box;\n	border: var(--office-border-width) solid transparent;\n	border-radius: var(--office-radius);\n	color: var(--office-muted-foreground);\n}\n.field:hover,\n.field:focus-within {\n	border-color: var(--office-border);\n	background: var(--office-background);\n}\ninput {\n	flex: 1;\n	min-width: 0;\n	border: 0;\n	outline: 0;\n	background: transparent;\n	color: var(--office-foreground);\n	font: inherit;\n	font-size: var(--office-font-size);\n}\nsvg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	flex: none;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\nul {\n	position: fixed;\n	inset: auto;\n	margin: 0;\n	padding: var(--office-space-1);\n	min-width: var(--office-search-popup-min-width);\n	max-height: var(--office-search-popup-max-height);\n	overflow: auto;\n	box-sizing: border-box;\n	list-style: none;\n	background: var(--office-background);\n	color: var(--office-foreground);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius);\n	box-shadow: var(--office-shadow);\n	font-size: var(--office-font-size-sm);\n}\nul[hidden] {\n	display: none;\n}\nli {\n	display: flex;\n	flex-direction: column;\n	justify-content: center;\n	min-height: var(--office-target-size);\n	padding: var(--office-space-0) var(--office-space-2-5);\n	border-radius: var(--office-radius-sm);\n	cursor: pointer;\n}\nli[data-active] {\n	background: var(--office-surface);\n}\nli[aria-disabled='true'] {\n	cursor: not-allowed;\n	color: var(--office-muted-foreground);\n}\nli small {\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-xs);\n}\nli.empty {\n	cursor: default;\n	color: var(--office-muted-foreground);\n}\n\n@media (forced-colors: active) {\n	.field,\n	ul {\n		border-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n	}\n	li[data-active] {\n		background: Highlight;\n		color: HighlightText;\n	}\n}\n";
 
 // src/menu/command-search.ts
@@ -2478,7 +2508,7 @@ function clampFlyoutPosition(input) {
   };
 }
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/menu/context-menu.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/menu/context-menu.css?raw
 var context_menu_default = ":host {\n	display: contents;\n}\n:host([data-controlled]) {\n	display: block;\n	position: fixed;\n	z-index: var(--office-z-popover);\n	color: var(--office-popover-foreground);\n	font: var(--office-font-size-sm) / var(--office-line-height) var(--office-font);\n}\n:host([data-controlled][hidden]) {\n	display: none;\n}\n\n/* Children mode: a popover panel around the slotted menu items. */\n.panel {\n	position: fixed;\n	inset: auto;\n	margin: 0;\n	min-width: var(--office-context-menu-min-width);\n	padding: var(--office-space-1);\n	box-sizing: border-box;\n	background: var(--office-background);\n	color: var(--office-foreground);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius);\n	box-shadow: var(--office-shadow);\n	font-family: var(--office-font);\n}\n.panel[hidden] {\n	display: none;\n}\n\n/* Controlled mode: the host is the fixed box; rows are drawn here from `state`. */\n.menu {\n	box-sizing: border-box;\n	display: flex;\n	flex-direction: column;\n	min-width: var(--office-menu-min-width);\n	max-height: calc(100vh - 2 * var(--office-space-2));\n	overflow-y: auto;\n	padding: var(--office-space-1-5) 0;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	color: inherit;\n	box-shadow: var(--office-shadow-lg);\n	user-select: none;\n}\n.menu:focus {\n	outline: none;\n}\n.item {\n	box-sizing: border-box;\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1-5);\n	width: 100%;\n	min-height: var(--office-field-height);\n	padding: var(--office-space-1-5) var(--office-space-3);\n	border: 0;\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	text-align: start;\n	white-space: nowrap;\n	cursor: pointer;\n}\n.item:hover:not(:disabled),\n.item:focus:not(:disabled) {\n	background: var(--office-selected);\n	outline: none;\n}\n.item:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(-1 * var(--office-focus-width));\n}\n.item:disabled {\n	opacity: 0.45;\n	cursor: default;\n}\n.item.danger {\n	color: var(--office-danger);\n}\n.item svg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	flex: none;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n.check {\n	flex: none;\n	width: var(--office-icon-size);\n	text-align: center;\n}\n.shortcut {\n	margin-inline-start: auto;\n	padding-inline-start: var(--office-space-4);\n	color: var(--office-muted-foreground);\n}\n.separator {\n	height: var(--office-border-width);\n	margin: var(--office-space-1) 0;\n	background: var(--office-border);\n}\n.heading {\n	padding: var(--office-space-1-5) var(--office-space-3) var(--office-space-0);\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-2xs);\n	font-weight: var(--office-font-weight-bold);\n	letter-spacing: 0.06em;\n	text-transform: uppercase;\n}\n\n@media (pointer: coarse) {\n	.item {\n		min-height: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	.panel,\n	.menu {\n		border-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n		box-shadow: none;\n	}\n	.item,\n	.item.danger {\n		color: CanvasText;\n	}\n	.item:disabled {\n		color: GrayText;\n		opacity: 1;\n	}\n	.item:hover:not(:disabled),\n	.item:focus:not(:disabled) {\n		background: Highlight;\n		color: HighlightText;\n	}\n	.separator {\n		background: CanvasText;\n	}\n	.heading {\n		color: CanvasText;\n	}\n}\n";
 
 // src/menu/context-menu.ts
@@ -2830,7 +2860,7 @@ var OfficeUiContextMenu = class extends OfficeElement {
 };
 var defineContextMenu = definer("office-ui-context-menu", () => OfficeUiContextMenu);
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/menu/menu-separator.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/menu/menu-separator.css?raw
 var menu_separator_default = ":host {\n	display: block;\n	height: var(--office-border-width);\n	margin: var(--office-space-1) var(--office-space-1-5);\n	background: var(--office-border);\n}\n\n@media (forced-colors: active) {\n	:host {\n		background: CanvasText;\n	}\n}\n";
 
 // src/menu/menu-separator.ts
@@ -2842,7 +2872,7 @@ var OfficeUiMenuSeparator = class extends OfficeElement {
 };
 var defineMenuSeparator = definer("office-ui-menu-separator", () => OfficeUiMenuSeparator);
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/menu/menu-button.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/menu/menu-button.css?raw
 var menu_button_default = ":host {\n	display: inline-flex;\n	vertical-align: middle;\n}\n.wrap {\n	display: inline-flex;\n	align-items: stretch;\n	border: var(--office-border-width) solid transparent;\n	border-radius: var(--office-radius);\n}\n:host([variant='stacked']) .wrap {\n	flex-direction: column;\n}\nbutton {\n	box-sizing: border-box;\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-1);\n	min-width: var(--office-target-size);\n	min-height: var(--office-target-size);\n	padding: 0 var(--office-space-1-5);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-foreground);\n	font: inherit;\n	font-size: var(--office-font-size-sm);\n	cursor: pointer;\n	white-space: nowrap;\n}\n:host([variant='stacked']) .main {\n	flex-direction: column;\n	padding: var(--office-space-1) var(--office-space-1-5) 0;\n}\n:host([variant='stacked']) .caret {\n	min-height: var(--office-icon-size-md);\n	padding: 0 var(--office-space-1-5) var(--office-space-0);\n}\n:host([variant='stacked']:not([command])) .main {\n	padding-bottom: 0;\n}\n.wrap:hover:not(.disabled) {\n	border-color: var(--office-border);\n}\nbutton:hover:not(:disabled) {\n	background: var(--office-surface);\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(-1 * var(--office-focus-width));\n}\nbutton:disabled {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\nbutton[aria-expanded='true'] {\n	background: var(--office-surface);\n}\n.caret svg {\n	width: var(--office-icon-size-sm);\n	height: var(--office-icon-size-sm);\n}\nsvg {\n	width: var(--office-icon-size-ml);\n	height: var(--office-icon-size-ml);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\nsvg:not([data-painted]) {\n	display: none;\n}\n.panel {\n	position: fixed;\n	inset: auto;\n	margin: 0;\n	min-width: var(--office-menu-min-width);\n	padding: var(--office-space-1);\n	box-sizing: border-box;\n	background: var(--office-background);\n	color: var(--office-foreground);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius);\n	box-shadow: var(--office-shadow);\n}\n.panel[hidden] {\n	display: none;\n}\n\n@media (forced-colors: active) {\n	button {\n		color: ButtonText;\n	}\n	button:disabled {\n		color: GrayText;\n	}\n	.panel {\n		border-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n	}\n}\n";
 
 // src/menu/menu-button.ts
@@ -3033,7 +3063,7 @@ var OfficeUiMenuButton = class extends OfficeElement {
 };
 var defineMenuButton = definer("office-ui-menu-button", () => OfficeUiMenuButton);
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/menu/menu-item.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/menu/menu-item.css?raw
 var menu_item_default = ":host {\n	display: block;\n}\n:host([hidden]) {\n	display: none;\n}\nbutton {\n	box-sizing: border-box;\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	width: 100%;\n	min-height: var(--office-target-size);\n	padding: 0 var(--office-space-2-5) 0 var(--office-space-2);\n	border: 0;\n	border-radius: var(--office-radius-sm);\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	font-size: var(--office-font-size-sm);\n	text-align: start;\n	cursor: pointer;\n}\nbutton:hover:not(:disabled),\nbutton:focus-visible {\n	background: var(--office-surface);\n	outline: none;\n}\nbutton:disabled {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\n.check {\n	width: var(--office-icon-size);\n	text-align: center;\n}\nsvg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	flex: none;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\nsvg:not([data-painted]) {\n	visibility: hidden;\n}\n\n@media (forced-colors: active) {\n	button:focus-visible {\n		background: Highlight;\n		color: HighlightText;\n	}\n}\n";
 
 // src/menu/menu-item.ts
@@ -3093,7 +3123,7 @@ var OfficeUiMenuItem = class extends OfficeElement {
 };
 var defineMenuItem = definer("office-ui-menu-item", () => OfficeUiMenuItem);
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/dialog/options-dialog.css?raw
+// 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
@@ -3295,7 +3325,7 @@ var defineOptionsDialog = definer(
   [defineDialog]
 );
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/ribbon/ribbon-stack.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/ribbon/ribbon-stack.css?raw
 var ribbon_stack_default = ":host {\n	display: inline-flex;\n	flex-direction: column;\n	align-items: flex-start;\n	justify-content: flex-start;\n	gap: var(--office-space-px);\n	align-self: stretch;\n}\n:host([orientation='horizontal']) {\n	flex-direction: row;\n	align-items: center;\n	gap: var(--office-space-0);\n	align-self: auto;\n}\n::slotted(*) {\n	flex-shrink: 0;\n}\n";
 
 // src/ribbon/ribbon-stack.ts
@@ -3307,7 +3337,7 @@ var OfficeUiRibbonStack = class extends OfficeElement {
 };
 var defineRibbonStack = definer("office-ui-ribbon-stack", () => OfficeUiRibbonStack);
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/ribbon/ribbon-toolbar.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/ribbon/ribbon-toolbar.css?raw
 var ribbon_toolbar_default = ":host {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: stretch;\n	gap: var(--office-space-0);\n	padding: var(--office-space-0) var(--office-space-1);\n	background: var(--office-surface);\n	border-bottom: var(--office-border-width) solid var(--office-border);\n}\n\n@media (forced-colors: active) {\n	:host {\n		border-bottom-color: CanvasText;\n		background: Canvas;\n	}\n}\n";
 
 // src/ribbon/ribbon-toolbar.ts
@@ -3412,7 +3442,7 @@ function pageSelectActive(choices, active, direction) {
   return active;
 }
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/form/select.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/form/select.css?raw
 var select_default = "/*\n * `variant=\"ribbon-font\"` and `variant=\"ribbon-icon\"` are the compact ribbon combo and icon\n * picker; `data-font-picker=\"family\"` widens and lengthens the popup. Moved from pptx-viewer\n * (`select-styles.ts`, `select-ribbon-styles.ts`) and expressed in tokens.\n */\n:host {\n	display: inline-block;\n	box-sizing: border-box;\n	min-width: 0;\n	max-width: 100%;\n	color: var(--office-foreground);\n	font: inherit;\n	font-size: var(--office-font-size-sm);\n	vertical-align: middle;\n}\n:host([disabled]) {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\nbutton {\n	box-sizing: border-box;\n	width: 100%;\n	min-height: var(--office-field-height);\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-2-5);\n	padding: var(--office-space-1) var(--office-space-1-5);\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-field-radius);\n	background: var(--office-select-background);\n	color: inherit;\n	font: inherit;\n	font-size: inherit;\n	text-align: start;\n	cursor: pointer;\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\nbutton:disabled {\n	cursor: not-allowed;\n}\n.value {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.chevron svg {\n	display: none;\n}\n.chevron {\n	flex: none;\n	width: var(--office-chevron-size);\n	height: var(--office-chevron-size);\n	margin: 0 var(--office-space-0) var(--office-space-0) 0;\n	border-right: calc(var(--office-border-width) * 1.5) solid currentColor;\n	border-bottom: calc(var(--office-border-width) * 1.5) solid currentColor;\n	transform: rotate(45deg);\n}\n:host([open]) .chevron {\n	margin: var(--office-space-0) var(--office-space-0) 0 0;\n	transform: rotate(225deg);\n}\n\n.menu {\n	box-sizing: border-box;\n	position: fixed;\n	margin: 0;\n	padding: var(--office-space-1);\n	min-width: var(--office-select-menu-min-width);\n	max-height: min(var(--office-select-max-height), 50vh);\n	overflow: auto;\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-field-radius);\n	background: var(--office-popover);\n	color: var(--office-popover-foreground);\n	box-shadow: var(--office-shadow);\n	font: inherit;\n	font-size: inherit;\n}\n.menu:not(:popover-open):not([data-fallback-open]) {\n	display: none;\n}\n.option {\n	display: block;\n	box-sizing: border-box;\n	width: 100%;\n	padding: var(--office-space-1-5) var(--office-space-2);\n	border-radius: var(--office-radius-sm);\n	cursor: pointer;\n	white-space: nowrap;\n}\n.group {\n	padding: var(--office-space-1-5) var(--office-space-2) var(--office-space-0);\n	color: var(--office-muted-foreground);\n	font-size: 0.9em;\n	font-weight: var(--office-font-weight-bold);\n}\n.option:not([aria-disabled='true']):hover,\n.option[data-active]:not([aria-selected='true']) {\n	background: var(--office-select-option-active);\n}\n.option[aria-selected='true'] {\n	background: var(--office-accent);\n	color: var(--office-accent-foreground);\n}\n.option[aria-selected='true']:hover {\n	filter: brightness(1.08);\n}\n.option[aria-disabled='true'] {\n	opacity: 0.45;\n	cursor: not-allowed;\n}\n.description {\n	flex: none;\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-2xs);\n}\n\n/* Ribbon variants */\n:host([variant^='ribbon-'][disabled]) {\n	opacity: 0.4;\n}\n:host([variant^='ribbon-']) button {\n	height: var(--office-ribbon-combo-height);\n	min-height: var(--office-ribbon-combo-height);\n	padding: var(--office-space-1) var(--office-space-2);\n	gap: var(--office-space-1);\n	border: var(--office-border-width) solid\n		color-mix(in oklab, var(--office-border) 60%, transparent);\n	border-radius: var(--office-radius-sm);\n	font-size: var(--office-font-size-sm);\n	background: color-mix(in oklab, var(--office-background) 60%, transparent);\n	color: var(--office-foreground);\n}\n:host([variant^='ribbon-']) .value {\n	flex: 1;\n	min-width: 0;\n}\n:host([variant^='ribbon-']) .chevron {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	margin: 0;\n	border: 0;\n	transform: none;\n}\n:host([variant^='ribbon-']) .chevron svg {\n	display: block;\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n}\n:host([variant='ribbon-font']) .chevron {\n	color: var(--office-muted-foreground);\n}\n:host([variant='ribbon-font'][data-font-picker='size']) button {\n	padding-inline: var(--office-space-1-5);\n}\n:host([variant='ribbon-icon']) button {\n	width: var(--office-ribbon-icon-select-width);\n	gap: var(--office-space-1-5);\n	padding: var(--office-space-1-5) var(--office-space-2-5);\n	border: 0;\n	background: var(--office-surface);\n	justify-content: center;\n}\n:host([variant='ribbon-icon']) :is(.value, .chevron) {\n	display: none;\n}\n::slotted(svg[slot='icon']) {\n	display: block;\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	flex: none;\n}\n:host([variant^='ribbon-']) button:hover:not(:disabled) {\n	background: var(--office-selected);\n}\n:host([variant^='ribbon-']) .menu {\n	width: var(--office-select-ribbon-menu-width);\n	padding: var(--office-space-1) 0;\n	border-radius: var(--office-radius-lg);\n	font-size: var(--office-font-size-sm);\n}\n:host([data-font-picker='family']) .menu {\n	width: var(--office-font-picker-width);\n}\n:host([variant^='ribbon-']) .option {\n	display: flex;\n	justify-content: space-between;\n	gap: var(--office-space-3);\n	padding: var(--office-space-1-5) var(--office-space-3);\n	border-radius: 0;\n}\n:host([variant^='ribbon-']) .option[aria-selected='true'] {\n	background: transparent;\n	color: var(--office-foreground);\n}\n:host([variant^='ribbon-']) .option:hover,\n:host([variant^='ribbon-']) .option[data-active] {\n	background: var(--office-surface);\n	filter: none;\n}\n:host([variant^='ribbon-']) .group {\n	padding: var(--office-space-2) var(--office-space-3) var(--office-space-1);\n	text-transform: uppercase;\n	letter-spacing: 0.02em;\n	font-size: var(--office-font-size-2xs);\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n	button,\n	:host([variant^='ribbon-']) button {\n		min-height: var(--office-target-size-touch);\n	}\n	:host([variant^='ribbon-']) button {\n		height: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	button,\n	.menu {\n		border-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n	}\n	.option[aria-selected='true'],\n	.option[data-active],\n	.option:not([aria-disabled='true']):hover {\n		background: Highlight;\n		color: HighlightText;\n	}\n}\n";
 
 // src/form/select.ts
@@ -3430,9 +3460,8 @@ var OfficeUiSelect = class extends OfficeElement {
     choices: { state: true },
     opened: { state: true }
   };
-  static get observedAttributes() {
-    return [...super.observedAttributes, "aria-label", "variant", "data-font-picker"];
-  }
+  /** Attributes the trigger renders from: a change repaints it (a relabel on a language switch). */
+  static watched = ["aria-label", "variant", "data-font-picker"];
   internals;
   observer;
   menuId = `office-ui-select-options-${++uid2}`;
@@ -3750,7 +3779,7 @@ var OfficeUiSelect = class extends OfficeElement {
 };
 var defineSelect = definer("office-ui-select", () => OfficeUiSelect);
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/chrome/status-bar.css?raw
+// 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}\n.item.saving {\n	color: var(--office-warning);\n}\n.item.error {\n	color: var(--office-danger);\n}\n.spacer {\n	flex: 1;\n}\n.toggles,\n.group {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-0);\n}\n.sep {\n	flex: none;\n	width: var(--office-border-width);\n	height: var(--office-space-3);\n	margin: 0 var(--office-space-0);\n	background: var(--office-border);\n}\n.bar button {\n	box-sizing: border-box;\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-1);\n	min-width: var(--office-control-height-xs);\n	min-height: var(--office-control-height-xs);\n	padding: var(--office-space-1);\n	border: 0;\n	border-radius: var(--office-radius-sm);\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n	touch-action: manipulation;\n}\n.bar button:hover {\n	background: var(--office-selected);\n	color: var(--office-foreground);\n}\n.bar button[aria-pressed='true'] {\n	color: var(--office-accent);\n}\n.bar button:active {\n	opacity: 0.8;\n}\n.bar button:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n.bar svg {\n	flex: none;\n	width: var(--office-icon-size);\n	height: var(--office-icon-size);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n.toggle svg,\n.zoom-step svg {\n	width: var(--office-icon-size-sm);\n	height: var(--office-icon-size-sm);\n}\n.zoom-fit {\n	min-width: var(--office-zoom-value-width);\n	font-variant-numeric: tabular-nums;\n}\n@media (max-width: 767px) {\n	.narrow-hide,\n	.toggle .label {\n		display: none !important;\n	}\n}\n@media (pointer: coarse) {\n	.bar button {\n		min-width: var(--office-target-size-touch);\n		min-height: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	:host {\n		background: Canvas;\n		color: CanvasText;\n		border-top-color: CanvasText;\n	}\n	.bar button {\n		color: ButtonText;\n	}\n	.bar button:hover {\n		background: Highlight;\n		color: HighlightText;\n	}\n	.bar button[aria-pressed='true'] {\n		border: var(--office-border-width) solid Highlight;\n	}\n	.bar button:focus-visible {\n		outline-color: Highlight;\n	}\n	.sep,\n	.item + .item::before {\n		background: CanvasText;\n	}\n}\n";
 
 // src/chrome/status-bar.ts
@@ -3883,7 +3912,7 @@ var OfficeUiStatusBar = class extends OfficeElement {
 };
 var defineStatusBar = definer("office-ui-status-bar", () => OfficeUiStatusBar);
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/chrome/status-item.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/chrome/status-item.css?raw
 var status_item_default = ":host {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-1);\n	white-space: nowrap;\n}\n.label {\n	color: var(--office-muted-foreground);\n}\nbutton {\n	all: unset;\n	display: inline-flex;\n	gap: var(--office-space-1);\n	align-items: center;\n	cursor: pointer;\n	padding: 0 var(--office-space-1);\n	min-height: var(--office-target-size);\n	border-radius: var(--office-radius-sm);\n}\nbutton:hover {\n	background: var(--office-background);\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n}\n@media (forced-colors: active) {\n	.label {\n		color: GrayText;\n	}\n	button:focus-visible {\n		outline-color: Highlight;\n	}\n}\nspan.wrap {\n	display: inline-flex;\n	gap: var(--office-space-1);\n}\n";
 
 // src/chrome/status-item.ts
@@ -3916,7 +3945,7 @@ var OfficeUiStatusItem = class extends OfficeElement {
 };
 var defineStatusItem = definer("office-ui-status-item", () => OfficeUiStatusItem);
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/chrome/tab-strip.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/chrome/tab-strip.css?raw
 var tab_strip_default = ":host {\n	display: flex;\n	align-items: stretch;\n	min-width: 0;\n	min-height: var(--office-tab-height);\n	gap: var(--office-space-0);\n	padding: 0 var(--office-space-1-5);\n	background: var(--office-surface);\n	color: var(--office-muted-foreground);\n	border-top: var(--office-border-width) solid var(--office-border);\n	font-size: var(--office-font-size-sm);\n	font-family: var(--office-font);\n}\n.step {\n	flex: none;\n	display: inline-grid;\n	place-items: center;\n	width: var(--office-target-size);\n	min-height: var(--office-target-size);\n	padding: 0;\n	border: 0;\n	background: transparent;\n	color: inherit;\n	cursor: pointer;\n}\n.step:disabled {\n	opacity: 0.4;\n	cursor: default;\n}\n.add {\n	font-size: var(--office-font-size-xl);\n	line-height: 1;\n}\n.add[hidden] {\n	display: none;\n}\n.list {\n	display: flex;\n	align-items: stretch;\n	min-width: 0;\n	overflow-x: auto;\n	scrollbar-width: thin;\n}\n.tab {\n	flex: none;\n	max-width: var(--office-tab-max-width);\n	min-height: var(--office-target-size);\n	margin-top: calc(-1 * var(--office-space-px));\n	padding: var(--office-space-0) var(--office-space-3-5);\n	overflow: hidden;\n	white-space: nowrap;\n	text-overflow: ellipsis;\n	border: var(--office-border-width) solid transparent;\n	border-top: 0;\n	border-radius: 0 0 var(--office-radius) var(--office-radius);\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\n.tab:hover {\n	color: var(--office-foreground);\n}\n.tab[aria-selected='true'] {\n	border-color: var(--office-border);\n	background: var(--office-background);\n	color: var(--office-accent);\n	font-weight: 600;\n	box-shadow: inset 0 var(--office-border-width-thick) 0 var(--office-accent);\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(-1 * var(--office-focus-width));\n}\nsvg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n@media (forced-colors: active) {\n	:host {\n		border-top-color: CanvasText;\n	}\n	.tab[aria-selected='true'] {\n		background: Highlight;\n		color: HighlightText;\n		forced-color-adjust: none;\n	}\n}\n";
 
 // src/chrome/tab-strip.ts
@@ -4069,7 +4098,7 @@ function matchTitleBarCommands(search, query) {
   return (search.commands ?? []).filter((entry) => entry.label.toLowerCase().includes(needle));
 }
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/chrome/title-bar.css?raw
+// 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-foreground);\n	font-size: var(--office-font-size-sm);\n	font-weight: var(--office-font-weight-medium);\n}\n.status.saving {\n	color: var(--office-warning);\n}\n.status.error {\n	color: var(--office-danger);\n}\n.search {\n	position: relative;\n	flex: 1;\n	display: flex;\n	justify-content: center;\n	min-width: 0;\n	padding: 0 var(--office-space-2);\n}\n.box {\n	position: relative;\n	width: 100%;\n	max-width: var(--office-title-bar-search-max-width);\n	min-width: 0;\n}\n.box > [part='search'] {\n	width: 100%;\n}\n.results {\n	position: absolute;\n	z-index: var(--office-z-popover);\n	top: calc(100% + var(--office-space-1));\n	right: 0;\n	left: 0;\n	max-height: var(--office-title-bar-results-max-height);\n	overflow-y: auto;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-lg);\n	background: var(--office-popover);\n	color: var(--office-popover-foreground);\n	box-shadow: var(--office-shadow-lg);\n}\n.heading {\n	padding: var(--office-space-1-5) var(--office-space-3);\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-2xs);\n	font-weight: var(--office-font-weight-bold);\n	letter-spacing: 0.05em;\n	text-transform: uppercase;\n}\n.empty {\n	padding: var(--office-space-2) var(--office-space-3);\n	color: var(--office-muted-foreground);\n}\n.results button {\n	display: flex;\n	width: 100%;\n	justify-content: flex-start;\n	gap: var(--office-space-2);\n	padding: var(--office-space-1-5) var(--office-space-3);\n	border-radius: 0;\n	color: inherit;\n	text-align: start;\n}\n.results button:hover,\n.results button[aria-selected='true'] {\n	background: var(--office-selected);\n}\n.results .cat {\n	margin-inline-start: auto;\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-2xs);\n	text-transform: capitalize;\n}\n.results .content {\n	border-top: var(--office-border-width) solid var(--office-border);\n}\n.end {\n	flex: none;\n	display: flex;\n	align-items: center;\n	justify-content: flex-end;\n	gap: var(--office-space-1);\n}\n.sr {\n	position: absolute;\n	width: var(--office-space-px);\n	height: var(--office-space-px);\n	overflow: hidden;\n	clip-path: inset(50%);\n	white-space: nowrap;\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n@media (max-width: 767px), (max-width: 1023px) and (max-height: 520px) {\n	:host(:not([placement='belowRibbon'])) {\n		display: none !important;\n	}\n}\n@media (max-width: 1100px) {\n	.qat small {\n		display: none;\n	}\n	.name {\n		max-width: var(--office-title-bar-name-max-width-narrow);\n	}\n}\n@media (pointer: coarse) {\n	.qat button,\n	.results button {\n		min-width: var(--office-target-size-touch);\n		min-height: var(--office-target-size-touch);\n	}\n	.bar {\n		height: auto;\n		min-height: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	.bar {\n		border-bottom-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n	}\n	.mark {\n		border: var(--office-border-width) solid CanvasText;\n		background: Canvas;\n		color: CanvasText;\n	}\n	.label,\n	.dot,\n	.status,\n	.name,\n	.qat button,\n	.results button {\n		color: CanvasText;\n	}\n	.sep {\n		background: CanvasText;\n	}\n	.qat button:hover:not(:disabled),\n	.results button:hover,\n	.results button[aria-selected='true'] {\n		background: Highlight;\n		color: HighlightText;\n	}\n	.qat button:disabled {\n		color: GrayText;\n		opacity: 1;\n	}\n	.results {\n		border-color: CanvasText;\n		background: Canvas;\n	}\n	button:focus-visible {\n		outline-color: Highlight;\n	}\n}\n";
 
 // src/chrome/title-bar.ts
@@ -4350,7 +4379,7 @@ var defineTitleBar = definer("office-ui-title-bar", () => OfficeUiTitleBar, [
   defineSwitch
 ]);
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/form/zoom-slider.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/form/zoom-slider.css?raw
 var zoom_slider_default = ":host {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-0);\n	font-size: var(--office-font-size-xs);\n	color: var(--office-foreground);\n	font-family: var(--office-font);\n}\nbutton {\n	box-sizing: border-box;\n	display: inline-grid;\n	place-items: center;\n	min-width: var(--office-target-size);\n	min-height: var(--office-target-size);\n	padding: 0;\n	border: var(--office-border-width) solid transparent;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	font-size: var(--office-font-size-lg);\n	line-height: 1;\n	cursor: pointer;\n}\nbutton:hover:not(:disabled) {\n	background: var(--office-background);\n}\nbutton:focus-visible,\ninput:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\nbutton:disabled,\ninput:disabled {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\ninput {\n	width: var(--office-zoom-slider-width);\n	min-width: var(--office-zoom-slider-min-width);\n	margin: 0 var(--office-space-0);\n	accent-color: var(--office-accent);\n}\noutput {\n	min-width: var(--office-zoom-value-width);\n	text-align: center;\n	font-variant-numeric: tabular-nums;\n}\nsvg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n:host(:not([fit])) .fit {\n	display: none;\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n	input {\n		flex: 1;\n	}\n}\n@media (forced-colors: active) {\n	button {\n		color: ButtonText;\n	}\n	button:disabled {\n		color: GrayText;\n	}\n}\n";
 
 // src/form/zoom-slider.ts

package/dist/{chunk-4VQ6S7QJ.js → chunk-C66U34OA.js}

@@ -152,7 +152,7 @@ function textElement(doc, shape, scheme) {
   return text;
 }
 
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/smartart/smartart.css?raw
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/smartart/smartart.css?raw
 var smartart_default = ":host {\n	display: block;\n}\nsvg {\n	display: block;\n	width: 100%;\n	height: auto;\n	max-height: 100%;\n}\ntext {\n	font-family: var(--office-font);\n	pointer-events: none;\n}\n.empty {\n	padding: var(--office-space-2);\n	font-size: var(--office-font-size-sm);\n	color: var(--office-muted-foreground);\n}\n@media (forced-colors: active) {\n	text {\n		fill: CanvasText;\n	}\n}\n";
 
 // src/smartart/smartart.ts