ooxml-ui 0.23.0 → 0.24.0

package/dist/chrome/status-bar.d.ts

@@ -23,6 +23,8 @@ export interface OfficeStatusButton {
     text?: string | undefined;
     pressed?: boolean | undefined;
     hidden?: boolean | undefined;
+    /** Offered but unavailable (a view the product does not provide yet). */
+    disabled?: boolean | undefined;
 }
 /** Everything the controlled bar shows, already translated. Absent parts are not rendered. */
 export interface OfficeStatusBarState {

package/dist/{chunk-7ZE4WHUW.js → chunk-FWZIVXAV.js}

@@ -1,8 +1,8 @@
 import { createIconSvg, paintIcon, getIcon } from './chunk-HZ422LTR.js';
-import { initialsOf } from './chunk-E47762NY.js';
-import { OfficeElement, controlStyles, definer, valueOn, flag, present, withTokens, triState } from './chunk-5A4REH6T.js';
+import { initialsOf } from './chunk-XQWRKHC2.js';
+import { OfficeElement, controlStyles, definer, valueOn, flag, present, triState, withTokens } from './chunk-PCZJV6HQ.js';
 import { tok, OFFICE_TOKENS } from './chunk-HSJH6SUW.js';
-import { html, LitElement, render, nothing, svg } from 'lit';
+import { html, LitElement, nothing, render, svg } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { unsafeStatic, html as html$1 } from 'lit/static-html.js';
@@ -489,6 +489,89 @@ var OfficeUiRadio = class extends OfficeElement {
   }
 };
 var defineRadio = definer("office-ui-radio", () => OfficeUiRadio);
+var OfficeUiCheckable = class extends OfficeElement {
+  static formAssociated = true;
+  static properties = {
+    checked: flag,
+    disabled: flag,
+    value: valueOn
+  };
+  internals;
+  defaultChecked = false;
+  constructor() {
+    super();
+    this.checked = false;
+    this.disabled = false;
+    this.value = "on";
+    try {
+      this.internals = this.attachInternals();
+    } catch {
+      this.internals = void 0;
+    }
+    this.addEventListener("click", (event) => {
+      if (present(this.disabled)) event.preventDefault();
+      else this.toggle();
+    });
+    this.addEventListener("keydown", (event) => {
+      const toggles = event.key === " " || this.semantics === "switch" && event.key === "Enter";
+      if (!toggles || present(this.disabled)) return;
+      event.preventDefault();
+      this.toggle();
+    });
+  }
+  connectedCallback() {
+    this.defaultChecked = present(this.checked);
+    super.connectedCallback();
+  }
+  formResetCallback() {
+    this.checked = this.defaultChecked;
+  }
+  formDisabledCallback(disabled) {
+    this.disabled = disabled;
+  }
+  toggle() {
+    this.checked = !present(this.checked);
+    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  }
+  /** The host carries the semantics: role, state, tab stop and form value. */
+  willUpdate() {
+    const checked = present(this.checked);
+    const disabled = present(this.disabled);
+    this.setAttribute("role", this.semantics);
+    this.setAttribute("aria-checked", String(checked));
+    this.setAttribute("aria-disabled", String(disabled));
+    this.setAttribute("tabindex", disabled ? "-1" : "0");
+    this.internals?.setFormValue?.(checked && !disabled ? this.value : null);
+  }
+  /** The tick, shown through CSS when `checked`. */
+  renderCheck() {
+    return html`<svg
+			viewBox="0 0 16 16"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			aria-hidden="true"
+		>
+			<path d="m3 8 3.2 3.2L13 4.5"></path>
+		</svg>`;
+  }
+};
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/form/checkbox.css?raw
+var checkbox_default = ":host {\n	display: inline-grid;\n	box-sizing: border-box;\n	width: var(--office-checkbox-size);\n	height: var(--office-checkbox-size);\n	flex: none;\n	place-items: center;\n	border: var(--office-border-width) solid var(--office-checkbox-border);\n	border-radius: var(--office-checkbox-radius);\n	background: var(--office-checkbox-background);\n	color: var(--office-checkbox-accent-foreground);\n	cursor: pointer;\n	vertical-align: middle;\n}\n:host([checked]) {\n	border-color: var(--office-checkbox-accent);\n	background: var(--office-checkbox-accent);\n}\n:host(:focus-visible) {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n:host([disabled]) {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\nsvg {\n	display: none;\n	width: var(--office-icon-size-sm);\n	height: var(--office-icon-size-sm);\n}\n:host([checked]) svg {\n	display: block;\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n	:host {\n		width: var(--office-checkbox-size-touch);\n		height: var(--office-checkbox-size-touch);\n	}\n	svg {\n		width: var(--office-icon-size-md);\n		height: var(--office-icon-size-md);\n	}\n}\n@media (forced-colors: active) {\n	:host {\n		border-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n		forced-color-adjust: auto;\n	}\n	:host([checked]) {\n		border-color: Highlight;\n		background: Highlight;\n		color: HighlightText;\n	}\n}\n";
+
+// src/form/checkbox.ts
+var OfficeUiCheckbox = class extends OfficeUiCheckable {
+  static styles = controlStyles(checkbox_default);
+  semantics = "checkbox";
+  render() {
+    return this.renderCheck();
+  }
+};
+var defineCheckbox = definer("office-ui-checkbox", () => OfficeUiCheckbox);
 
 // raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/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";
@@ -552,7 +635,9 @@ var OfficeUiRibbonToggle = class extends OfficeElement {
 		`;
   }
 };
-var defineRibbonToggle = definer("office-ui-ribbon-toggle", () => OfficeUiRibbonToggle);
+var defineRibbonToggle = definer("office-ui-ribbon-toggle", () => OfficeUiRibbonToggle, [
+  defineCheckbox
+]);
 
 // raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/form/search-field.css?raw
 var search_field_default = "/* Tokens: --office-field-*. */\n:host {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	box-sizing: border-box;\n	width: 100%;\n	height: var(--office-field-height-lg);\n	padding: 0 var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-field-radius);\n	background: var(--office-field-background);\n	color: var(--office-field-placeholder);\n	font: inherit;\n}\n:host(:focus-within) {\n	border-color: var(--office-field-border-focus);\n}\n:host([variant='titlebar']) {\n	height: var(--office-field-height);\n	gap: var(--office-space-1-5);\n	padding-inline: var(--office-space-3-5);\n	border-color: var(--office-border);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n}\n:host([variant='titlebar']:focus-within) {\n	border-color: var(--office-field-border-focus);\n	color: var(--office-foreground);\n}\n:host([disabled]) {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\nsvg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	flex: none;\n}\n:host([variant='titlebar']) svg {\n	width: var(--office-icon-size);\n	height: var(--office-icon-size);\n}\ninput {\n	min-width: 0;\n	width: 100%;\n	height: 100%;\n	flex: 1;\n	padding: 0;\n	border: 0;\n	outline: 0;\n	background: transparent;\n	color: var(--office-field-foreground);\n	font: inherit;\n	font-size: var(--office-font-size);\n}\n:host([variant='titlebar']) input {\n	font-size: var(--office-font-size-xs);\n	color: var(--office-foreground);\n}\ninput::placeholder {\n	color: var(--office-field-placeholder);\n	opacity: 0.8;\n}\ninput::-webkit-search-cancel-button {\n	display: none;\n}\n\n@media (forced-colors: active) {\n	:host {\n		border-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n	}\n	:host(:focus-within) {\n		outline: var(--office-focus-width) solid Highlight;\n		outline-offset: var(--office-focus-offset);\n	}\n	input {\n		color: CanvasText;\n	}\n}\n";
@@ -1110,6 +1195,201 @@ 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
+var button_default = ":host {\n	display: inline-flex;\n	vertical-align: middle;\n}\nbutton {\n	box-sizing: border-box;\n	position: relative;\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-1-5);\n	min-width: var(--office-target-size);\n	min-height: var(--office-target-size);\n	padding: 0 var(--office-space-2);\n	border: var(--office-border-width) solid transparent;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-foreground);\n	font: inherit;\n	font-size: var(--office-font-size-sm);\n	cursor: pointer;\n	white-space: nowrap;\n}\n:host([variant='stacked']) button {\n	flex-direction: column;\n	padding: var(--office-space-1) var(--office-space-2);\n}\nbutton:hover:not(:disabled) {\n	background: var(--office-surface);\n}\nbutton:active:not(:disabled) {\n	background: var(--office-selected);\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\nbutton[aria-pressed='true'],\nbutton[aria-expanded='true'] {\n	border-color: var(--office-accent);\n	background: var(--office-surface);\n}\n:host([active]) button {\n	background: var(--office-command-active);\n	color: var(--office-accent);\n}\nbutton:disabled {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\nsvg {\n	width: var(--office-icon-size-ml);\n	height: var(--office-icon-size-ml);\n	flex: none;\n	color: var(--office-command-icon-color);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\nsvg.glyph:not([data-painted]) {\n	display: none;\n}\n.label[hidden],\n.caret[hidden],\n.badge[hidden] {\n	display: none;\n}\n/* Office trails a menu chevron after the last line of the label. */\n.caret {\n	display: inline-block;\n	width: var(--office-icon-size-xs);\n	height: var(--office-icon-size-xs);\n	margin-inline-start: var(--office-space-0);\n	vertical-align: middle;\n	color: var(--office-muted-foreground);\n}\n.badge {\n	position: absolute;\n	top: 0;\n	inset-inline-end: 0;\n	padding: 0 var(--office-space-0);\n	border-radius: var(--office-radius-full);\n	background: var(--office-accent);\n	color: var(--office-accent-foreground);\n	font-size: var(--office-font-size-3xs);\n}\n\n/* Large ribbon command: a big glyph above a two-line label. */\n:host([size='large']) button {\n	flex-direction: column;\n	justify-content: flex-start;\n	gap: var(--office-space-0);\n	min-width: var(--office-command-large-min-width);\n	max-width: var(--office-command-large-max-width);\n	height: var(--office-command-large-height);\n	padding: var(--office-space-0) var(--office-space-1);\n	border: 0;\n	white-space: normal;\n	text-align: center;\n	line-height: var(--office-line-height-tight);\n}\n:host([size='large']) svg.glyph {\n	width: var(--office-command-large-icon);\n	height: var(--office-command-large-icon);\n}\n\n/* Small ribbon command: icon and label in one row. */\n:host([size='small']) button {\n	justify-content: flex-start;\n	min-width: 0;\n	height: var(--office-control-height);\n	min-height: var(--office-control-height);\n	padding: 0 var(--office-space-1-5);\n	border: 0;\n	text-align: start;\n}\n:host([size='small']) svg.glyph {\n	width: var(--office-command-small-icon);\n	height: var(--office-command-small-icon);\n}\n\n/* Tall, label-less tool tiles (pens, erasers). */\n:host([icon-only][tall]) button {\n	min-width: var(--office-command-tall-min-width);\n	height: var(--office-command-tall-height);\n	padding: var(--office-space-1);\n}\n:host([icon-only][tall]) svg.glyph {\n	width: var(--office-command-tall-icon);\n	height: var(--office-command-tall-icon);\n}\n:host([icon-only][tall][active]) button {\n	box-shadow: inset 0 0 0 var(--office-border-width) var(--office-accent);\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n	:host([size='small']) button {\n		min-height: var(--office-target-size-touch);\n	}\n	:host([icon-only]) button {\n		min-width: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	button {\n		border-color: ButtonText;\n		color: ButtonText;\n		background: ButtonFace;\n	}\n	svg {\n		color: ButtonText;\n	}\n	button:disabled {\n		color: GrayText;\n		border-color: GrayText;\n	}\n	button[aria-pressed='true'],\n	button[aria-expanded='true'],\n	:host([active]) button {\n		background: Highlight;\n		color: HighlightText;\n	}\n}\n";
+
+// src/ribbon/button.ts
+var asAttribute = (value) => value === void 0 ? void 0 : String(value);
+var OfficeUiButton = class extends OfficeElement {
+  static requestEvent = "office-command";
+  static idAttribute = "command";
+  static detailKey = "command";
+  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+  static styles = controlStyles(button_default);
+  static properties = { disabled: flag, pressed: triState };
+  /** Everything else is an attribute, as it always was (see `OfficeElement.watched`). */
+  static watched = [
+    "label",
+    "icon",
+    "command",
+    "badge",
+    "caret",
+    "keyshortcuts",
+    "size",
+    "variant",
+    "active",
+    "tall",
+    "icon-only",
+    "expanded",
+    "title"
+  ];
+  constructor() {
+    super();
+    this.disabled = false;
+  }
+  /** The registered icon to draw; a product subclass may map names onto its glyph set. */
+  iconName() {
+    return this.getAttribute("icon");
+  }
+  /** The tooltip: `title`, else the label of an icon-only button; a product may always show it. */
+  tooltip(label, iconOnly) {
+    return this.getAttribute("title") ?? (iconOnly ? label : "");
+  }
+  /** Whether the trailing menu chevron shows. */
+  showsCaret() {
+    const caret = this.getAttribute("caret");
+    return caret !== null && caret !== "false";
+  }
+  onKeydown(event) {
+    if ((event.key === " " || event.key === "Enter") && !event.ctrlKey && !event.metaKey && !event.altKey)
+      event.stopPropagation();
+  }
+  onClick() {
+    const { requestEvent, idAttribute, detailKey } = this.constructor;
+    const id = this.getAttribute(idAttribute);
+    if (!present(this.disabled) && id) this.fire(requestEvent, { [detailKey]: id });
+  }
+  render() {
+    const label = this.getAttribute("label") ?? "";
+    const iconOnly = this.hasAttribute("icon-only");
+    const badge = this.getAttribute("badge") ?? "";
+    const expanded = this.getAttribute("expanded");
+    const tooltip = this.tooltip(label, iconOnly);
+    return html`<button
+			part="button"
+			type="button"
+			?disabled=${present(this.disabled)}
+			title=${tooltip || nothing}
+			aria-label=${ifDefined(iconOnly && label ? label : void 0)}
+			aria-keyshortcuts=${ifDefined(this.getAttribute("keyshortcuts") || void 0)}
+			aria-pressed=${ifDefined(asAttribute(this.pressed))}
+			aria-expanded=${ifDefined(expanded === null ? void 0 : String(expanded !== "false"))}
+			@click=${this.onClick}
+			@keydown=${this.onKeydown}
+			>${glyph(this.iconName())}<span class="label" ?hidden=${iconOnly}
+				>${label}${glyph("chevronDown", "caret", !this.showsCaret())}</span
+			><span class="badge" aria-hidden="true" ?hidden=${!badge}>${badge}</span></button
+		>`;
+  }
+};
+var defineButton = definer("office-ui-button", () => OfficeUiButton);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/ribbon/ribbon-group.css?raw
+var ribbon_group_default = ":host {\n	display: inline-flex;\n	flex: none;\n	align-self: stretch;\n}\n.group {\n	position: relative;\n	box-sizing: border-box;\n	display: flex;\n	flex-direction: column;\n	justify-content: space-between;\n	min-height: var(--office-ribbon-group-height);\n	padding: var(--office-ribbon-group-padding);\n}\n/* Office draws a hairline between groups; a product may stop it short of the top and bottom. */\n.group::after {\n	content: '';\n	position: absolute;\n	top: var(--office-ribbon-separator-inset);\n	bottom: var(--office-ribbon-separator-inset);\n	inset-inline-end: 0;\n	width: var(--office-border-width);\n	background: var(--office-ribbon-separator);\n}\n:host(:last-child) .group::after {\n	content: none;\n}\n.row {\n	display: flex;\n	align-items: flex-start;\n	gap: var(--office-space-1);\n	flex: 1;\n}\n/* One-line groups centre their commands on the whole group box. */\n:host([data-compact-row]) .row {\n	align-items: center;\n}\n/* Several small drop-down galleries stack in columns of three. */\n:host([data-stack]) .row {\n	flex-direction: column;\n	align-items: stretch;\n	align-content: flex-start;\n	flex-wrap: wrap;\n	max-height: var(--office-ribbon-stack-max-height);\n	gap: var(--office-space-0);\n}\n::slotted(*) {\n	flex-shrink: 0;\n}\n.foot {\n	position: relative;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	padding: var(--office-ribbon-caption-padding);\n}\n.caption {\n	color: var(--office-muted-foreground);\n	font-size: var(--office-ribbon-caption-size);\n	line-height: var(--office-ribbon-caption-line-height);\n	text-align: center;\n	white-space: nowrap;\n}\n.launcher {\n	position: absolute;\n	inset-inline-end: var(--office-launcher-inset-end);\n	bottom: var(--office-launcher-inset-bottom);\n	display: inline-grid;\n	place-items: center;\n	width: var(--office-launcher-width);\n	height: var(--office-launcher-height);\n	padding: 0;\n	border: 0;\n	border-radius: var(--office-radius-xs);\n	background: transparent;\n	color: var(--office-muted-foreground);\n	cursor: pointer;\n}\n.launcher:hover:not(:disabled) {\n	background: var(--office-surface);\n	color: var(--office-foreground);\n}\n.launcher:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n}\n.launcher:disabled {\n	opacity: 0.45;\n	cursor: not-allowed;\n}\n.launcher[hidden] {\n	display: none;\n}\n.launcher svg {\n	width: var(--office-icon-size-xs);\n	height: var(--office-icon-size-xs);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n\n/* Collapsed (narrow window): the group is one button; its commands open in a popup. */\n.face {\n	display: none;\n}\n:host([data-collapsed]) .face {\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	justify-content: flex-start;\n	gap: var(--office-space-0);\n	min-width: var(--office-collapsed-group-min-width);\n	height: var(--office-command-large-height);\n	padding: var(--office-space-0) var(--office-space-1-5);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-foreground);\n	font: inherit;\n	font-size: var(--office-font-size-sm);\n	cursor: pointer;\n}\n:host([data-collapsed]) .face:hover,\n:host([data-open]) .face {\n	background: var(--office-selected);\n}\n.face:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n.face svg {\n	width: var(--office-command-large-icon);\n	height: var(--office-command-large-icon);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n	color: var(--office-command-icon-color);\n}\n.face svg.chev {\n	width: var(--office-icon-size-xs);\n	height: var(--office-icon-size-xs);\n	color: currentColor;\n}\n:host([data-collapsed]) .foot,\n:host([data-collapsed]) .row {\n	display: none;\n}\n:host([data-collapsed][data-open]) .row {\n	display: flex;\n	flex-wrap: wrap;\n	position: fixed;\n	top: var(--office-ribbon-collapse-y);\n	left: var(--office-ribbon-collapse-x);\n	z-index: var(--office-z-popover);\n	box-sizing: border-box;\n	max-width: calc(100vw - 2 * var(--office-space-2));\n	padding: var(--office-space-2);\n	background: var(--office-popover);\n	color: var(--office-popover-foreground);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-md);\n	box-shadow: var(--office-shadow);\n}\n\n@media (forced-colors: active) {\n	.group::after {\n		background: CanvasText;\n	}\n	.caption,\n	.launcher {\n		color: CanvasText;\n	}\n	:host([data-collapsed][data-open]) .row {\n		border-color: CanvasText;\n	}\n}\n";
+
+// src/ribbon/ribbon-group.ts
+function tokenPx(el, name, fallback) {
+  const value = el.ownerDocument.defaultView?.getComputedStyle(el).getPropertyValue(name).trim();
+  const px = value?.endsWith("px") ? parseFloat(value) : NaN;
+  return Number.isFinite(px) ? px : fallback;
+}
+var OfficeUiRibbonGroup = class extends OfficeElement {
+  static launcherEvent = "office-command";
+  static collapseEvent = "office-ribbon-collapse-toggle";
+  static styles = controlStyles(ribbon_group_default);
+  /** The group is configured by attributes, as it always was (see `OfficeElement.watched`). */
+  static watched = [
+    "label",
+    "launcher",
+    "launcher-label",
+    "launcher-disabled",
+    "icon",
+    "data-open"
+  ];
+  observer;
+  /** The launcher's event detail; null emits nothing. */
+  launcherDetail() {
+    const command = this.getAttribute("launcher");
+    return command ? { command } : null;
+  }
+  /** The registered icon on the collapsed face; a product subclass may map names. */
+  iconName() {
+    return this.getAttribute("icon") ?? "grid";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.observe();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.observer?.disconnect();
+  }
+  observe() {
+    this.observer?.disconnect();
+    if (!this.isConnected) return;
+    const Observer = this.ownerDocument.defaultView?.ResizeObserver;
+    if (Observer) this.observer ??= new Observer(() => this.measure());
+    const slot = this.renderRoot.querySelector("slot");
+    for (const el of slot?.assignedElements() ?? []) this.observer?.observe(el);
+    this.measure();
+  }
+  measure() {
+    const children = [...this.children];
+    const stackable = children.filter((el) => {
+      const gallery = el.matches('[mode="dropdown"]') ? el : el.querySelector('[mode="dropdown"]');
+      return gallery !== null && !gallery.hasAttribute("data-command-large");
+    });
+    this.toggleAttribute(
+      "data-stack",
+      stackable.length > 1 && stackable.length === children.length
+    );
+    const tallest = Math.max(0, ...children.map((el) => el.getBoundingClientRect().height));
+    if (tallest > 0)
+      this.toggleAttribute(
+        "data-compact-row",
+        tallest <= tokenPx(this, "--office-ribbon-compact-row-max", 36)
+      );
+  }
+  onLauncher() {
+    if (this.hasAttribute("launcher-disabled")) return;
+    const detail = this.launcherDetail();
+    if (detail) this.fire(this.constructor.launcherEvent, detail);
+  }
+  /** The overflow controller listens for this and owns which popup is open. */
+  onFace() {
+    this.fire(this.constructor.collapseEvent, void 0);
+  }
+  willUpdate() {
+    this.setAttribute("role", "group");
+    this.setAttribute("aria-label", this.getAttribute("label") ?? "");
+  }
+  render() {
+    const label = this.getAttribute("label") ?? "";
+    const launcherLabel = this.getAttribute("launcher-label") ?? `${label} options`;
+    return html`
+			<div class="group">
+				<button
+					class="face"
+					type="button"
+					aria-haspopup="true"
+					aria-label=${label}
+					aria-expanded=${String(this.hasAttribute("data-open"))}
+					title=${label}
+					@click=${this.onFace}
+					>${glyph(this.iconName(), "face-icon")}<span>${label}</span>${glyph("chevronDown", "chev")}</button
+				>
+				<div class="row">
+					<slot @slotchange=${this.observe}></slot>
+				</div>
+				<div class="foot">
+					<span class="caption">${label}</span>
+					<button
+						class="launcher"
+						type="button"
+						aria-label=${launcherLabel}
+						title=${launcherLabel}
+						?hidden=${!this.hasAttribute("launcher")}
+						?disabled=${this.hasAttribute("launcher-disabled")}
+						@click=${this.onLauncher}
+						>${glyph("launcher", "launcher-icon")}</button
+					>
+				</div>
+			</div>
+		`;
+  }
+};
+var defineRibbonGroup = definer("office-ui-ribbon-group", () => OfficeUiRibbonGroup);
+
 // raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/ribbon/ribbon-section.css?raw
 var ribbon_section_default = ":host {\n	display: inline-flex;\n	align-items: stretch;\n}\n::slotted(*) {\n	flex: none;\n}\n";
 
@@ -1212,7 +1492,11 @@ var OfficeUiRibbonSection = class extends OfficeElement {
     }
   }
 };
-var defineRibbonSection = definer("office-ui-ribbon-section", () => OfficeUiRibbonSection);
+var defineRibbonSection = definer(
+  "office-ui-ribbon-section",
+  () => OfficeUiRibbonSection,
+  [defineRibbonGroup, defineButton]
+);
 
 // raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/ribbon/gallery.css?raw
 var gallery_default = "[data-office-gallery] {\n	display: inline-flex;\n	position: relative;\n	flex: none;\n	color: var(--office-foreground);\n}\n[data-office-gallery] .gallery-view {\n	display: contents;\n}\n[data-office-gallery] button {\n	box-sizing: border-box;\n	font: inherit;\n	color: inherit;\n	cursor: pointer;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius);\n	background: var(--office-background);\n}\n[data-office-gallery] button:hover:not(:disabled) {\n	background: var(--office-selected);\n}\n[data-office-gallery] button:disabled {\n	opacity: 0.4;\n	cursor: not-allowed;\n}\n[data-office-gallery] button:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n[data-office-gallery] .trigger {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-1-5);\n	min-height: var(--office-gallery-trigger-height);\n	padding: 0 var(--office-space-1-5);\n	font-size: var(--office-font-size-sm);\n	white-space: nowrap;\n}\n[data-office-gallery]:not([mode='inline']) .trigger {\n	border-color: transparent;\n	background: transparent;\n}\n[data-office-gallery] .trigger svg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n[data-office-gallery][mode='inline'] .trigger,\n[data-office-gallery][chevron-only] .trigger {\n	align-self: stretch;\n	padding: 0 var(--office-space-1);\n}\n[data-office-gallery] .strip {\n	display: flex;\n	gap: var(--office-space-0);\n	padding: var(--office-space-0);\n	align-items: center;\n}\n[data-office-gallery] .tile {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	flex: none;\n	padding: var(--office-space-0);\n}\n[data-office-gallery] .tile[aria-pressed='true'] {\n	border: var(--office-border-width-thick) solid var(--office-accent);\n	background: color-mix(in srgb, var(--office-accent) 15%, var(--office-background));\n}\n[data-office-gallery] .tile svg {\n	max-width: 100%;\n	max-height: 100%;\n}\n[data-office-gallery][mode='inline'] .strip {\n	gap: 0;\n	border: var(--office-border-width) solid var(--office-border);\n	border-inline-end: 0;\n	border-radius: var(--office-radius-sm) 0 0 var(--office-radius-sm);\n	background: var(--office-gallery-strip-background);\n}\n[data-office-gallery][mode='inline'] .trigger {\n	border-radius: 0 var(--office-radius-sm) var(--office-radius-sm) 0;\n	background: var(--office-gallery-strip-background);\n}\n[data-office-gallery] .trigger.command {\n	border-color: transparent;\n	background: transparent;\n	justify-content: flex-start;\n}\n[data-office-gallery] .trigger.command:hover:not(:disabled) {\n	border-color: var(--office-border);\n	background: var(--office-selected);\n}\n[data-office-gallery] .trigger.command svg {\n	color: var(--office-command-icon-color);\n}\n[data-office-gallery] .trigger.command-large {\n	flex-direction: column;\n	align-items: center;\n	justify-content: flex-start;\n	gap: var(--office-space-0);\n	min-width: var(--office-gallery-command-min-width);\n	max-width: var(--office-gallery-command-max-width);\n	height: var(--office-gallery-command-height);\n	padding: var(--office-space-1);\n	font-size: var(--office-font-size-2xs);\n	line-height: var(--office-line-height-tight);\n	white-space: normal;\n	text-align: center;\n}\n[data-office-gallery] .trigger.command-large svg {\n	width: var(--office-gallery-command-icon);\n	height: var(--office-gallery-command-icon);\n}\n[data-office-gallery] .popup {\n	box-sizing: border-box;\n	position: fixed;\n	z-index: var(--office-z-popover);\n	max-width: calc(100vw - var(--office-space-4));\n	max-height: var(--office-gallery-popup-max-height);\n	overflow: auto;\n	padding: var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	color: var(--office-popover-foreground);\n	box-shadow: var(--office-shadow-lg);\n}\n[data-office-gallery] .popup[hidden] {\n	display: none;\n}\n[data-office-gallery] .grid {\n	display: grid;\n	gap: var(--office-space-1);\n	width: max-content;\n	max-width: 100%;\n}\n[data-office-gallery] .heading {\n	margin: var(--office-space-1) 0 var(--office-space-1-5);\n	font-size: var(--office-font-size-xs);\n	font-weight: var(--office-font-weight-bold);\n}\n[data-office-gallery] .section + .section {\n	margin-top: var(--office-space-2-5);\n}\n@media (pointer: coarse), (max-width: 1023px) {\n	[data-office-gallery] .trigger,\n	[data-office-gallery] .tile {\n		min-height: var(--office-target-size-touch);\n		min-width: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	[data-office-gallery] button,\n	[data-office-gallery] .popup {\n		color: ButtonText;\n		background: Canvas;\n		border-color: ButtonText;\n	}\n	[data-office-gallery] button:disabled {\n		color: GrayText;\n		opacity: 1;\n	}\n	[data-office-gallery] button:focus-visible,\n	[data-office-gallery] .tile[aria-pressed='true'] {\n		outline: var(--office-focus-width) solid Highlight;\n		border-color: Highlight;\n	}\n}\n";
@@ -1644,271 +1928,109 @@ var defaultStorage = () => {
     return void 0;
   }
 };
-function readOfficeProfile(storage = defaultStorage(), key = OFFICE_PROFILE_STORAGE_KEY) {
-  try {
-    const raw = storage?.getItem(key);
-    return raw ? sanitizeOfficeProfile(JSON.parse(raw)) : { ...DEFAULT_OFFICE_PROFILE };
-  } catch {
-    return { ...DEFAULT_OFFICE_PROFILE };
-  }
-}
-function writeOfficeProfile(profile, storage = defaultStorage(), key = OFFICE_PROFILE_STORAGE_KEY) {
-  try {
-    storage?.setItem(key, JSON.stringify(sanitizeOfficeProfile(profile)));
-  } catch {
-  }
-}
-function clearOfficeProfile(storage = defaultStorage(), key = OFFICE_PROFILE_STORAGE_KEY) {
-  try {
-    storage?.removeItem(key);
-  } catch {
-  }
-}
-
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/chrome/account.css?raw
-var account_default = ":host {\n	display: block;\n	font-family: var(--office-font);\n	font-size: var(--office-font-size);\n}\nh2 {\n	margin: 0 0 var(--office-space-3);\n	font-size: var(--office-font-size-lg);\n	font-weight: 600;\n}\n.who {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	margin-bottom: var(--office-space-3);\n}\n.avatar {\n	display: grid;\n	place-items: center;\n	width: var(--office-avatar-size);\n	height: var(--office-avatar-size);\n	border-radius: 50%;\n	color: var(--office-accent-foreground);\n	font-weight: var(--office-font-weight-bold);\n	font-size: var(--office-font-size-xl);\n	flex: none;\n}\n.name {\n	font-size: var(--office-font-size-md);\n	font-weight: 600;\n}\n.note {\n	margin: var(--office-space-0) 0 0;\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-sm);\n}\nlabel {\n	display: grid;\n	gap: var(--office-space-1);\n	max-width: var(--office-account-field-width);\n	margin-bottom: var(--office-space-3);\n}\ninput {\n	min-height: var(--office-field-height);\n	box-sizing: border-box;\n	padding: var(--office-space-0) var(--office-space-1-5);\n	font: inherit;\n	color: inherit;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-sm);\n	background: var(--office-background);\n}\n.swatches {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-1-5);\n	margin: var(--office-space-1) 0 var(--office-space-3);\n}\n.swatches button {\n	width: var(--office-target-size);\n	height: var(--office-target-size);\n	padding: 0;\n	border: var(--office-border-width-thick) solid transparent;\n	border-radius: 50%;\n	cursor: pointer;\n}\n.swatches button[aria-checked='true'] {\n	border-color: var(--office-foreground);\n	box-shadow: inset 0 0 0 var(--office-border-width-thick) var(--office-background);\n}\n.swatches button:focus-visible,\ninput:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\n@media (forced-colors: active) {\n	.swatches button {\n		forced-color-adjust: none;\n	}\n}\n";
-
-// src/chrome/account.ts
-var OfficeUiAccount = class extends OfficeElement {
-  static styles = controlStyles(account_default);
-  current = { ...DEFAULT_OFFICE_PROFILE };
-  get profile() {
-    return { ...this.current };
-  }
-  set profile(value) {
-    this.current = sanitizeOfficeProfile(value);
-    this.requestUpdate("profile");
-  }
-  change(next) {
-    this.profile = next;
-    this.fire("office-profile-change", { profile: this.profile });
-  }
-  onSwatchKey(event) {
-    const step = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[event.key];
-    if (!step) return;
-    event.preventDefault();
-    const colors = OFFICE_AVATAR_SWATCHES;
-    const at = Math.max(0, colors.indexOf(this.current.avatarColor));
-    const color = colors[(at + step + colors.length) % colors.length];
-    this.change({ ...this.current, avatarColor: color });
-    this.renderRoot.querySelector(`[data-color="${color}"]`)?.focus();
-  }
-  render() {
-    const { displayName, avatarColor } = this.current;
-    const known = OFFICE_AVATAR_SWATCHES.includes(avatarColor);
-    return html`
-			<h2>User Information</h2>
-			<div class="who">
-				<div class="avatar" aria-hidden="true" style="background:${avatarColor}"
-					>${profileInitials(this.current)}</div
-				>
-				<div>
-					<div class="name">${displayName || "No display name"}</div>
-					<p class="note">Stored on this device only. Never sent anywhere.</p>
-				</div>
-			</div>
-			<label>
-				Display name
-				<input
-					type="text"
-					maxlength="64"
-					autocomplete="name"
-					.value=${displayName}
-					@change=${(event) => this.change({
-      ...this.current,
-      displayName: event.target.value.trim()
-    })}
-				/>
-			</label>
-			<div id="color-label">Avatar colour</div>
-			<div
-				class="swatches"
-				role="radiogroup"
-				aria-labelledby="color-label"
-				@keydown=${this.onSwatchKey}
-			>
-				${OFFICE_AVATAR_SWATCHES.map((color, index) => {
-      const checked = color === avatarColor;
-      return html`<button
-						type="button"
-						role="radio"
-						aria-label=${color}
-						aria-checked=${String(checked)}
-						tabindex=${checked || !known && index === 0 ? 0 : -1}
-						data-color=${color}
-						style="background:${color}"
-						@click=${() => this.change({ ...this.current, avatarColor: color })}
-					></button>`;
-    })}
-			</div>
-			<slot name="sign-in"></slot>
-			<slot></slot>
-		`;
-  }
-};
-var defineAccount = definer("office-ui-account", () => OfficeUiAccount);
-
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/ribbon/button.css?raw
-var button_default = ":host {\n	display: inline-flex;\n	vertical-align: middle;\n}\nbutton {\n	box-sizing: border-box;\n	position: relative;\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-1-5);\n	min-width: var(--office-target-size);\n	min-height: var(--office-target-size);\n	padding: 0 var(--office-space-2);\n	border: var(--office-border-width) solid transparent;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-foreground);\n	font: inherit;\n	font-size: var(--office-font-size-sm);\n	cursor: pointer;\n	white-space: nowrap;\n}\n:host([variant='stacked']) button {\n	flex-direction: column;\n	padding: var(--office-space-1) var(--office-space-2);\n}\nbutton:hover:not(:disabled) {\n	background: var(--office-surface);\n}\nbutton:active:not(:disabled) {\n	background: var(--office-selected);\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\nbutton[aria-pressed='true'],\nbutton[aria-expanded='true'] {\n	border-color: var(--office-accent);\n	background: var(--office-surface);\n}\n:host([active]) button {\n	background: var(--office-command-active);\n	color: var(--office-accent);\n}\nbutton:disabled {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\nsvg {\n	width: var(--office-icon-size-ml);\n	height: var(--office-icon-size-ml);\n	flex: none;\n	color: var(--office-command-icon-color);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\nsvg.glyph:not([data-painted]) {\n	display: none;\n}\n.label[hidden],\n.caret[hidden],\n.badge[hidden] {\n	display: none;\n}\n/* Office trails a menu chevron after the last line of the label. */\n.caret {\n	display: inline-block;\n	width: var(--office-icon-size-xs);\n	height: var(--office-icon-size-xs);\n	margin-inline-start: var(--office-space-0);\n	vertical-align: middle;\n	color: var(--office-muted-foreground);\n}\n.badge {\n	position: absolute;\n	top: 0;\n	inset-inline-end: 0;\n	padding: 0 var(--office-space-0);\n	border-radius: var(--office-radius-full);\n	background: var(--office-accent);\n	color: var(--office-accent-foreground);\n	font-size: var(--office-font-size-3xs);\n}\n\n/* Large ribbon command: a big glyph above a two-line label. */\n:host([size='large']) button {\n	flex-direction: column;\n	justify-content: flex-start;\n	gap: var(--office-space-0);\n	min-width: var(--office-command-large-min-width);\n	max-width: var(--office-command-large-max-width);\n	height: var(--office-command-large-height);\n	padding: var(--office-space-0) var(--office-space-1);\n	border: 0;\n	white-space: normal;\n	text-align: center;\n	line-height: var(--office-line-height-tight);\n}\n:host([size='large']) svg.glyph {\n	width: var(--office-command-large-icon);\n	height: var(--office-command-large-icon);\n}\n\n/* Small ribbon command: icon and label in one row. */\n:host([size='small']) button {\n	justify-content: flex-start;\n	min-width: 0;\n	height: var(--office-control-height);\n	min-height: var(--office-control-height);\n	padding: 0 var(--office-space-1-5);\n	border: 0;\n	text-align: start;\n}\n:host([size='small']) svg.glyph {\n	width: var(--office-command-small-icon);\n	height: var(--office-command-small-icon);\n}\n\n/* Tall, label-less tool tiles (pens, erasers). */\n:host([icon-only][tall]) button {\n	min-width: var(--office-command-tall-min-width);\n	height: var(--office-command-tall-height);\n	padding: var(--office-space-1);\n}\n:host([icon-only][tall]) svg.glyph {\n	width: var(--office-command-tall-icon);\n	height: var(--office-command-tall-icon);\n}\n:host([icon-only][tall][active]) button {\n	box-shadow: inset 0 0 0 var(--office-border-width) var(--office-accent);\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n	:host([size='small']) button {\n		min-height: var(--office-target-size-touch);\n	}\n	:host([icon-only]) button {\n		min-width: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	button {\n		border-color: ButtonText;\n		color: ButtonText;\n		background: ButtonFace;\n	}\n	svg {\n		color: ButtonText;\n	}\n	button:disabled {\n		color: GrayText;\n		border-color: GrayText;\n	}\n	button[aria-pressed='true'],\n	button[aria-expanded='true'],\n	:host([active]) button {\n		background: Highlight;\n		color: HighlightText;\n	}\n}\n";
-
-// src/ribbon/button.ts
-var asAttribute = (value) => value === void 0 ? void 0 : String(value);
-var OfficeUiButton = class extends OfficeElement {
-  static requestEvent = "office-command";
-  static idAttribute = "command";
-  static detailKey = "command";
-  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
-  static styles = controlStyles(button_default);
-  static properties = { disabled: flag, pressed: triState };
-  /** Everything else is an attribute, as it always was (see `OfficeElement.watched`). */
-  static watched = [
-    "label",
-    "icon",
-    "command",
-    "badge",
-    "caret",
-    "keyshortcuts",
-    "size",
-    "variant",
-    "active",
-    "tall",
-    "icon-only",
-    "expanded",
-    "title"
-  ];
-  constructor() {
-    super();
-    this.disabled = false;
-  }
-  /** The registered icon to draw; a product subclass may map names onto its glyph set. */
-  iconName() {
-    return this.getAttribute("icon");
-  }
-  /** The tooltip: `title`, else the label of an icon-only button; a product may always show it. */
-  tooltip(label, iconOnly) {
-    return this.getAttribute("title") ?? (iconOnly ? label : "");
-  }
-  /** Whether the trailing menu chevron shows. */
-  showsCaret() {
-    const caret = this.getAttribute("caret");
-    return caret !== null && caret !== "false";
-  }
-  onKeydown(event) {
-    if ((event.key === " " || event.key === "Enter") && !event.ctrlKey && !event.metaKey && !event.altKey)
-      event.stopPropagation();
-  }
-  onClick() {
-    const { requestEvent, idAttribute, detailKey } = this.constructor;
-    const id = this.getAttribute(idAttribute);
-    if (!present(this.disabled) && id) this.fire(requestEvent, { [detailKey]: id });
-  }
-  render() {
-    const label = this.getAttribute("label") ?? "";
-    const iconOnly = this.hasAttribute("icon-only");
-    const badge = this.getAttribute("badge") ?? "";
-    const expanded = this.getAttribute("expanded");
-    const tooltip = this.tooltip(label, iconOnly);
-    return html`<button
-			part="button"
-			type="button"
-			?disabled=${present(this.disabled)}
-			title=${tooltip || nothing}
-			aria-label=${ifDefined(iconOnly && label ? label : void 0)}
-			aria-keyshortcuts=${ifDefined(this.getAttribute("keyshortcuts") || void 0)}
-			aria-pressed=${ifDefined(asAttribute(this.pressed))}
-			aria-expanded=${ifDefined(expanded === null ? void 0 : String(expanded !== "false"))}
-			@click=${this.onClick}
-			@keydown=${this.onKeydown}
-			>${glyph(this.iconName())}<span class="label" ?hidden=${iconOnly}
-				>${label}${glyph("chevronDown", "caret", !this.showsCaret())}</span
-			><span class="badge" aria-hidden="true" ?hidden=${!badge}>${badge}</span></button
-		>`;
-  }
-};
-var defineButton = definer("office-ui-button", () => OfficeUiButton);
-var OfficeUiCheckable = class extends OfficeElement {
-  static formAssociated = true;
-  static properties = {
-    checked: flag,
-    disabled: flag,
-    value: valueOn
-  };
-  internals;
-  defaultChecked = false;
-  constructor() {
-    super();
-    this.checked = false;
-    this.disabled = false;
-    this.value = "on";
-    try {
-      this.internals = this.attachInternals();
-    } catch {
-      this.internals = void 0;
-    }
-    this.addEventListener("click", (event) => {
-      if (present(this.disabled)) event.preventDefault();
-      else this.toggle();
-    });
-    this.addEventListener("keydown", (event) => {
-      const toggles = event.key === " " || this.semantics === "switch" && event.key === "Enter";
-      if (!toggles || present(this.disabled)) return;
-      event.preventDefault();
-      this.toggle();
-    });
+function readOfficeProfile(storage = defaultStorage(), key = OFFICE_PROFILE_STORAGE_KEY) {
+  try {
+    const raw = storage?.getItem(key);
+    return raw ? sanitizeOfficeProfile(JSON.parse(raw)) : { ...DEFAULT_OFFICE_PROFILE };
+  } catch {
+    return { ...DEFAULT_OFFICE_PROFILE };
   }
-  connectedCallback() {
-    this.defaultChecked = present(this.checked);
-    super.connectedCallback();
+}
+function writeOfficeProfile(profile, storage = defaultStorage(), key = OFFICE_PROFILE_STORAGE_KEY) {
+  try {
+    storage?.setItem(key, JSON.stringify(sanitizeOfficeProfile(profile)));
+  } catch {
   }
-  formResetCallback() {
-    this.checked = this.defaultChecked;
+}
+function clearOfficeProfile(storage = defaultStorage(), key = OFFICE_PROFILE_STORAGE_KEY) {
+  try {
+    storage?.removeItem(key);
+  } catch {
   }
-  formDisabledCallback(disabled) {
-    this.disabled = disabled;
+}
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/chrome/account.css?raw
+var account_default = ":host {\n	display: block;\n	font-family: var(--office-font);\n	font-size: var(--office-font-size);\n}\nh2 {\n	margin: 0 0 var(--office-space-3);\n	font-size: var(--office-font-size-lg);\n	font-weight: 600;\n}\n.who {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	margin-bottom: var(--office-space-3);\n}\n.avatar {\n	display: grid;\n	place-items: center;\n	width: var(--office-avatar-size);\n	height: var(--office-avatar-size);\n	border-radius: 50%;\n	color: var(--office-accent-foreground);\n	font-weight: var(--office-font-weight-bold);\n	font-size: var(--office-font-size-xl);\n	flex: none;\n}\n.name {\n	font-size: var(--office-font-size-md);\n	font-weight: 600;\n}\n.note {\n	margin: var(--office-space-0) 0 0;\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-sm);\n}\nlabel {\n	display: grid;\n	gap: var(--office-space-1);\n	max-width: var(--office-account-field-width);\n	margin-bottom: var(--office-space-3);\n}\ninput {\n	min-height: var(--office-field-height);\n	box-sizing: border-box;\n	padding: var(--office-space-0) var(--office-space-1-5);\n	font: inherit;\n	color: inherit;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-sm);\n	background: var(--office-background);\n}\n.swatches {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-1-5);\n	margin: var(--office-space-1) 0 var(--office-space-3);\n}\n.swatches button {\n	width: var(--office-target-size);\n	height: var(--office-target-size);\n	padding: 0;\n	border: var(--office-border-width-thick) solid transparent;\n	border-radius: 50%;\n	cursor: pointer;\n}\n.swatches button[aria-checked='true'] {\n	border-color: var(--office-foreground);\n	box-shadow: inset 0 0 0 var(--office-border-width-thick) var(--office-background);\n}\n.swatches button:focus-visible,\ninput:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\n@media (forced-colors: active) {\n	.swatches button {\n		forced-color-adjust: none;\n	}\n}\n";
+
+// src/chrome/account.ts
+var OfficeUiAccount = class extends OfficeElement {
+  static styles = controlStyles(account_default);
+  current = { ...DEFAULT_OFFICE_PROFILE };
+  get profile() {
+    return { ...this.current };
   }
-  toggle() {
-    this.checked = !present(this.checked);
-    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
-    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  set profile(value) {
+    this.current = sanitizeOfficeProfile(value);
+    this.requestUpdate("profile");
   }
-  /** The host carries the semantics: role, state, tab stop and form value. */
-  willUpdate() {
-    const checked = present(this.checked);
-    const disabled = present(this.disabled);
-    this.setAttribute("role", this.semantics);
-    this.setAttribute("aria-checked", String(checked));
-    this.setAttribute("aria-disabled", String(disabled));
-    this.setAttribute("tabindex", disabled ? "-1" : "0");
-    this.internals?.setFormValue?.(checked && !disabled ? this.value : null);
+  change(next) {
+    this.profile = next;
+    this.fire("office-profile-change", { profile: this.profile });
   }
-  /** The tick, shown through CSS when `checked`. */
-  renderCheck() {
-    return html`<svg
-			viewBox="0 0 16 16"
-			fill="none"
-			stroke="currentColor"
-			stroke-width="2"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-			aria-hidden="true"
-		>
-			<path d="m3 8 3.2 3.2L13 4.5"></path>
-		</svg>`;
+  onSwatchKey(event) {
+    const step = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[event.key];
+    if (!step) return;
+    event.preventDefault();
+    const colors = OFFICE_AVATAR_SWATCHES;
+    const at = Math.max(0, colors.indexOf(this.current.avatarColor));
+    const color = colors[(at + step + colors.length) % colors.length];
+    this.change({ ...this.current, avatarColor: color });
+    this.renderRoot.querySelector(`[data-color="${color}"]`)?.focus();
   }
-};
-
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/form/checkbox.css?raw
-var checkbox_default = ":host {\n	display: inline-grid;\n	box-sizing: border-box;\n	width: var(--office-checkbox-size);\n	height: var(--office-checkbox-size);\n	flex: none;\n	place-items: center;\n	border: var(--office-border-width) solid var(--office-checkbox-border);\n	border-radius: var(--office-checkbox-radius);\n	background: var(--office-checkbox-background);\n	color: var(--office-checkbox-accent-foreground);\n	cursor: pointer;\n	vertical-align: middle;\n}\n:host([checked]) {\n	border-color: var(--office-checkbox-accent);\n	background: var(--office-checkbox-accent);\n}\n:host(:focus-visible) {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n:host([disabled]) {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\nsvg {\n	display: none;\n	width: var(--office-icon-size-sm);\n	height: var(--office-icon-size-sm);\n}\n:host([checked]) svg {\n	display: block;\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n	:host {\n		width: var(--office-checkbox-size-touch);\n		height: var(--office-checkbox-size-touch);\n	}\n	svg {\n		width: var(--office-icon-size-md);\n		height: var(--office-icon-size-md);\n	}\n}\n@media (forced-colors: active) {\n	:host {\n		border-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n		forced-color-adjust: auto;\n	}\n	:host([checked]) {\n		border-color: Highlight;\n		background: Highlight;\n		color: HighlightText;\n	}\n}\n";
-
-// src/form/checkbox.ts
-var OfficeUiCheckbox = class extends OfficeUiCheckable {
-  static styles = controlStyles(checkbox_default);
-  semantics = "checkbox";
   render() {
-    return this.renderCheck();
+    const { displayName, avatarColor } = this.current;
+    const known = OFFICE_AVATAR_SWATCHES.includes(avatarColor);
+    return html`
+			<h2>User Information</h2>
+			<div class="who">
+				<div class="avatar" aria-hidden="true" style="background:${avatarColor}"
+					>${profileInitials(this.current)}</div
+				>
+				<div>
+					<div class="name">${displayName || "No display name"}</div>
+					<p class="note">Stored on this device only. Never sent anywhere.</p>
+				</div>
+			</div>
+			<label>
+				Display name
+				<input
+					type="text"
+					maxlength="64"
+					autocomplete="name"
+					.value=${displayName}
+					@change=${(event) => this.change({
+      ...this.current,
+      displayName: event.target.value.trim()
+    })}
+				/>
+			</label>
+			<div id="color-label">Avatar colour</div>
+			<div
+				class="swatches"
+				role="radiogroup"
+				aria-labelledby="color-label"
+				@keydown=${this.onSwatchKey}
+			>
+				${OFFICE_AVATAR_SWATCHES.map((color, index) => {
+      const checked = color === avatarColor;
+      return html`<button
+						type="button"
+						role="radio"
+						aria-label=${color}
+						aria-checked=${String(checked)}
+						tabindex=${checked || !known && index === 0 ? 0 : -1}
+						data-color=${color}
+						style="background:${color}"
+						@click=${() => this.change({ ...this.current, avatarColor: color })}
+					></button>`;
+    })}
+			</div>
+			<slot name="sign-in"></slot>
+			<slot></slot>
+		`;
   }
 };
-var defineCheckbox = definer("office-ui-checkbox", () => OfficeUiCheckbox);
+var defineAccount = definer("office-ui-account", () => OfficeUiAccount);
 
 // raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/form/switch.css?raw
 var switch_default = "/* Switch metrics are tokens so a host (a title bar) can size it: --office-switch-width, -height,\n * -border-width, -knob-size, -knob-offset, -knob-travel, -track, -track-on, -thumb, -thumb-on. */\n:host {\n	--_w: var(--office-switch-width);\n	--_h: var(--office-switch-height);\n	--_b: var(--office-switch-border-width);\n	--_k: var(--office-switch-knob-size);\n	--_o: var(--office-switch-knob-offset);\n	display: inline-block;\n	box-sizing: border-box;\n	position: relative;\n	width: var(--_w);\n	height: var(--_h);\n	flex: none;\n	border: var(--_b) solid var(--office-switch-border);\n	border-radius: var(--office-radius-full);\n	background: var(--office-switch-track);\n	cursor: pointer;\n	vertical-align: middle;\n	touch-action: manipulation;\n	transition: background-color var(--office-duration);\n}\n.knob {\n	display: block;\n	position: absolute;\n	top: calc((var(--_h) - 2 * var(--_b) - var(--_k)) / 2);\n	left: var(--_o);\n	width: var(--_k);\n	height: var(--_k);\n	border-radius: 50%;\n	background: var(--office-switch-thumb);\n	box-shadow: var(--office-shadow-sm);\n	transition: transform var(--office-duration);\n}\n:host([checked]) {\n	border-color: var(--office-switch-track-on);\n	background: var(--office-switch-track-on);\n}\n:host([checked]) .knob {\n	transform: translateX(\n		var(--office-switch-knob-travel, calc(var(--_w) - var(--_k) - 2 * var(--_o) - 2 * var(--_b)))\n	);\n	background: var(--office-switch-thumb-on);\n}\n:host(:focus-visible) {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n:host([disabled]) {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\nsvg {\n	display: none;\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n	:host {\n		--_w: var(--office-switch-width-touch);\n		--_h: var(--office-switch-height-touch);\n		--_k: var(--office-switch-knob-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	:host {\n		border-color: CanvasText;\n		background: Canvas;\n		forced-color-adjust: none;\n	}\n	.knob {\n		background: CanvasText;\n	}\n	:host([checked]) {\n		border-color: Highlight;\n		background: Highlight;\n	}\n	:host([checked]) .knob {\n		background: HighlightText;\n	}\n}\n";
@@ -1933,7 +2055,8 @@ var OfficeUiDialog = class extends OfficeElement {
   static properties = {
     open: flag,
     heading: { type: String },
-    dismissible: { type: String }
+    dismissible: { type: String },
+    closeLabel: { type: String, attribute: "close-label" }
   };
   returnFocus = null;
   constructor() {
@@ -1941,6 +2064,7 @@ var OfficeUiDialog = class extends OfficeElement {
     this.open = false;
     this.heading = "";
     this.dismissible = null;
+    this.closeLabel = null;
     this.addEventListener("keydown", (event) => this.onKey(event));
   }
   show() {
@@ -2010,7 +2134,7 @@ var OfficeUiDialog = class extends OfficeElement {
 					<button
 						class="close"
 						type="button"
-						aria-label="Close"
+						aria-label=${this.closeLabel || "Close"}
 						@click=${() => this.requestClose("close-button")}
 						>${glyph("close", "icon")}</button
 					>
@@ -3060,123 +3184,11 @@ var OfficeUiOptionsDialog = class extends OfficeElement {
 		`;
   }
 };
-var defineOptionsDialog = definer("office-ui-options-dialog", () => OfficeUiOptionsDialog);
-
-// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/ribbon/ribbon-group.css?raw
-var ribbon_group_default = ":host {\n	display: inline-flex;\n	flex: none;\n	align-self: stretch;\n}\n.group {\n	position: relative;\n	box-sizing: border-box;\n	display: flex;\n	flex-direction: column;\n	justify-content: space-between;\n	min-height: var(--office-ribbon-group-height);\n	padding: var(--office-ribbon-group-padding);\n}\n/* Office draws a hairline between groups; a product may stop it short of the top and bottom. */\n.group::after {\n	content: '';\n	position: absolute;\n	top: var(--office-ribbon-separator-inset);\n	bottom: var(--office-ribbon-separator-inset);\n	inset-inline-end: 0;\n	width: var(--office-border-width);\n	background: var(--office-ribbon-separator);\n}\n:host(:last-child) .group::after {\n	content: none;\n}\n.row {\n	display: flex;\n	align-items: flex-start;\n	gap: var(--office-space-1);\n	flex: 1;\n}\n/* One-line groups centre their commands on the whole group box. */\n:host([data-compact-row]) .row {\n	align-items: center;\n}\n/* Several small drop-down galleries stack in columns of three. */\n:host([data-stack]) .row {\n	flex-direction: column;\n	align-items: stretch;\n	align-content: flex-start;\n	flex-wrap: wrap;\n	max-height: var(--office-ribbon-stack-max-height);\n	gap: var(--office-space-0);\n}\n::slotted(*) {\n	flex-shrink: 0;\n}\n.foot {\n	position: relative;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	padding: var(--office-ribbon-caption-padding);\n}\n.caption {\n	color: var(--office-muted-foreground);\n	font-size: var(--office-ribbon-caption-size);\n	line-height: var(--office-ribbon-caption-line-height);\n	text-align: center;\n	white-space: nowrap;\n}\n.launcher {\n	position: absolute;\n	inset-inline-end: var(--office-launcher-inset-end);\n	bottom: var(--office-launcher-inset-bottom);\n	display: inline-grid;\n	place-items: center;\n	width: var(--office-launcher-width);\n	height: var(--office-launcher-height);\n	padding: 0;\n	border: 0;\n	border-radius: var(--office-radius-xs);\n	background: transparent;\n	color: var(--office-muted-foreground);\n	cursor: pointer;\n}\n.launcher:hover:not(:disabled) {\n	background: var(--office-surface);\n	color: var(--office-foreground);\n}\n.launcher:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n}\n.launcher:disabled {\n	opacity: 0.45;\n	cursor: not-allowed;\n}\n.launcher[hidden] {\n	display: none;\n}\n.launcher svg {\n	width: var(--office-icon-size-xs);\n	height: var(--office-icon-size-xs);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n\n/* Collapsed (narrow window): the group is one button; its commands open in a popup. */\n.face {\n	display: none;\n}\n:host([data-collapsed]) .face {\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	justify-content: flex-start;\n	gap: var(--office-space-0);\n	min-width: var(--office-collapsed-group-min-width);\n	height: var(--office-command-large-height);\n	padding: var(--office-space-0) var(--office-space-1-5);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-foreground);\n	font: inherit;\n	font-size: var(--office-font-size-sm);\n	cursor: pointer;\n}\n:host([data-collapsed]) .face:hover,\n:host([data-open]) .face {\n	background: var(--office-selected);\n}\n.face:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n.face svg {\n	width: var(--office-command-large-icon);\n	height: var(--office-command-large-icon);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n	color: var(--office-command-icon-color);\n}\n.face svg.chev {\n	width: var(--office-icon-size-xs);\n	height: var(--office-icon-size-xs);\n	color: currentColor;\n}\n:host([data-collapsed]) .foot,\n:host([data-collapsed]) .row {\n	display: none;\n}\n:host([data-collapsed][data-open]) .row {\n	display: flex;\n	flex-wrap: wrap;\n	position: fixed;\n	top: var(--office-ribbon-collapse-y);\n	left: var(--office-ribbon-collapse-x);\n	z-index: var(--office-z-popover);\n	box-sizing: border-box;\n	max-width: calc(100vw - 2 * var(--office-space-2));\n	padding: var(--office-space-2);\n	background: var(--office-popover);\n	color: var(--office-popover-foreground);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-md);\n	box-shadow: var(--office-shadow);\n}\n\n@media (forced-colors: active) {\n	.group::after {\n		background: CanvasText;\n	}\n	.caption,\n	.launcher {\n		color: CanvasText;\n	}\n	:host([data-collapsed][data-open]) .row {\n		border-color: CanvasText;\n	}\n}\n";
-
-// src/ribbon/ribbon-group.ts
-function tokenPx(el, name, fallback) {
-  const value = el.ownerDocument.defaultView?.getComputedStyle(el).getPropertyValue(name).trim();
-  const px = value?.endsWith("px") ? parseFloat(value) : NaN;
-  return Number.isFinite(px) ? px : fallback;
-}
-var OfficeUiRibbonGroup = class extends OfficeElement {
-  static launcherEvent = "office-command";
-  static collapseEvent = "office-ribbon-collapse-toggle";
-  static styles = controlStyles(ribbon_group_default);
-  /** The group is configured by attributes, as it always was (see `OfficeElement.watched`). */
-  static watched = [
-    "label",
-    "launcher",
-    "launcher-label",
-    "launcher-disabled",
-    "icon",
-    "data-open"
-  ];
-  observer;
-  /** The launcher's event detail; null emits nothing. */
-  launcherDetail() {
-    const command = this.getAttribute("launcher");
-    return command ? { command } : null;
-  }
-  /** The registered icon on the collapsed face; a product subclass may map names. */
-  iconName() {
-    return this.getAttribute("icon") ?? "grid";
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.observe();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.observer?.disconnect();
-  }
-  observe() {
-    this.observer?.disconnect();
-    if (!this.isConnected) return;
-    const Observer = this.ownerDocument.defaultView?.ResizeObserver;
-    if (Observer) this.observer ??= new Observer(() => this.measure());
-    const slot = this.renderRoot.querySelector("slot");
-    for (const el of slot?.assignedElements() ?? []) this.observer?.observe(el);
-    this.measure();
-  }
-  measure() {
-    const children = [...this.children];
-    const stackable = children.filter((el) => {
-      const gallery = el.matches('[mode="dropdown"]') ? el : el.querySelector('[mode="dropdown"]');
-      return gallery !== null && !gallery.hasAttribute("data-command-large");
-    });
-    this.toggleAttribute(
-      "data-stack",
-      stackable.length > 1 && stackable.length === children.length
-    );
-    const tallest = Math.max(0, ...children.map((el) => el.getBoundingClientRect().height));
-    if (tallest > 0)
-      this.toggleAttribute(
-        "data-compact-row",
-        tallest <= tokenPx(this, "--office-ribbon-compact-row-max", 36)
-      );
-  }
-  onLauncher() {
-    if (this.hasAttribute("launcher-disabled")) return;
-    const detail = this.launcherDetail();
-    if (detail) this.fire(this.constructor.launcherEvent, detail);
-  }
-  /** The overflow controller listens for this and owns which popup is open. */
-  onFace() {
-    this.fire(this.constructor.collapseEvent, void 0);
-  }
-  willUpdate() {
-    this.setAttribute("role", "group");
-    this.setAttribute("aria-label", this.getAttribute("label") ?? "");
-  }
-  render() {
-    const label = this.getAttribute("label") ?? "";
-    const launcherLabel = this.getAttribute("launcher-label") ?? `${label} options`;
-    return html`
-			<div class="group">
-				<button
-					class="face"
-					type="button"
-					aria-haspopup="true"
-					aria-label=${label}
-					aria-expanded=${String(this.hasAttribute("data-open"))}
-					title=${label}
-					@click=${this.onFace}
-					>${glyph(this.iconName(), "face-icon")}<span>${label}</span>${glyph("chevronDown", "chev")}</button
-				>
-				<div class="row">
-					<slot @slotchange=${this.observe}></slot>
-				</div>
-				<div class="foot">
-					<span class="caption">${label}</span>
-					<button
-						class="launcher"
-						type="button"
-						aria-label=${launcherLabel}
-						title=${launcherLabel}
-						?hidden=${!this.hasAttribute("launcher")}
-						?disabled=${this.hasAttribute("launcher-disabled")}
-						@click=${this.onLauncher}
-						>${glyph("launcher", "launcher-icon")}</button
-					>
-				</div>
-			</div>
-		`;
-  }
-};
-var defineRibbonGroup = definer("office-ui-ribbon-group", () => OfficeUiRibbonGroup);
+var defineOptionsDialog = definer(
+  "office-ui-options-dialog",
+  () => OfficeUiOptionsDialog,
+  [defineDialog]
+);
 
 // raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/ribbon/ribbon-stack.css?raw
 var ribbon_stack_default = ":host {\n	display: inline-flex;\n	flex-direction: column;\n	align-items: flex-start;\n	justify-content: flex-start;\n	gap: var(--office-space-px);\n	align-self: stretch;\n}\n:host([orientation='horizontal']) {\n	flex-direction: row;\n	align-items: center;\n	gap: var(--office-space-0);\n	align-self: auto;\n}\n::slotted(*) {\n	flex-shrink: 0;\n}\n";
@@ -3681,6 +3693,7 @@ var OfficeUiStatusBar = class extends OfficeElement {
 			aria-label=${spec.label}
 			aria-pressed=${ifDefined(spec.pressed === void 0 ? void 0 : String(spec.pressed))}
 			?hidden=${spec.hidden === true}
+			?disabled=${spec.disabled === true}
 			@click=${() => this.activate(spec.id)}
 			@keydown=${this.onKeydown}
 			>${glyph(spec.icon, "icon")}${spec.text ? html`<span class="label">${spec.text}</span>` : ""}</button
@@ -4226,7 +4239,10 @@ var OfficeUiTitleBar = class extends OfficeElement {
 		`;
   }
 };
-var defineTitleBar = definer("office-ui-title-bar", () => OfficeUiTitleBar);
+var defineTitleBar = definer("office-ui-title-bar", () => OfficeUiTitleBar, [
+  defineSearchField,
+  defineSwitch
+]);
 
 // raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/form/zoom-slider.css?raw
 var zoom_slider_default = ":host {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-0);\n	font-size: var(--office-font-size-xs);\n	color: var(--office-foreground);\n	font-family: var(--office-font);\n}\nbutton {\n	box-sizing: border-box;\n	display: inline-grid;\n	place-items: center;\n	min-width: var(--office-target-size);\n	min-height: var(--office-target-size);\n	padding: 0;\n	border: var(--office-border-width) solid transparent;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	font-size: var(--office-font-size-lg);\n	line-height: 1;\n	cursor: pointer;\n}\nbutton:hover:not(:disabled) {\n	background: var(--office-background);\n}\nbutton:focus-visible,\ninput:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\nbutton:disabled,\ninput:disabled {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\ninput {\n	width: var(--office-zoom-slider-width);\n	min-width: var(--office-zoom-slider-min-width);\n	margin: 0 var(--office-space-0);\n	accent-color: var(--office-accent);\n}\noutput {\n	min-width: var(--office-zoom-value-width);\n	text-align: center;\n	font-variant-numeric: tabular-nums;\n}\nsvg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n:host(:not([fit])) .fit {\n	display: none;\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n	input {\n		flex: 1;\n	}\n}\n@media (forced-colors: active) {\n	button {\n		color: ButtonText;\n	}\n	button:disabled {\n		color: GrayText;\n	}\n}\n";

package/dist/{chunk-5A4REH6T.js → chunk-PCZJV6HQ.js}

@@ -22,9 +22,11 @@ function defineOnce(registry, tag, make) {
 function browserRegistry() {
   return typeof window === "undefined" ? void 0 : window.customElements;
 }
-function definer(tag, make) {
+function definer(tag, make, requires = []) {
   const define = (registry = browserRegistry()) => {
-    if (registry) defineOnce(registry, tag, make);
+    if (!registry) return;
+    for (const dependency of requires) dependency(registry);
+    defineOnce(registry, tag, make);
   };
   return Object.assign(define, { tag });
 }

package/dist/{chunk-3MDKXKKQ.js → chunk-RVZAYXTI.js}

@@ -1,4 +1,4 @@
-import { OfficeElement, controlStyles, definer } from './chunk-5A4REH6T.js';
+import { OfficeElement, controlStyles, definer } from './chunk-PCZJV6HQ.js';
 import { html } from 'lit';
 import { normalizeHexColor } from 'ooxml-core/color';
 

package/dist/{chunk-HNGJI5EZ.js → chunk-TCBUC6BI.js}

@@ -1,6 +1,6 @@
 import { registerIcon, getIcon } from './chunk-HZ422LTR.js';
-import { initialsOf } from './chunk-E47762NY.js';
-import { definer, OfficeElement, controlStyles } from './chunk-5A4REH6T.js';
+import { initialsOf } from './chunk-XQWRKHC2.js';
+import { definer, OfficeElement, controlStyles } from './chunk-PCZJV6HQ.js';
 import { html, nothing, unsafeCSS, svg } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import { live } from 'lit/directives/live.js';

package/dist/{chunk-E47762NY.js → chunk-XQWRKHC2.js}

@@ -1,4 +1,4 @@
-import { OfficeElement, controlStyles, definer } from './chunk-5A4REH6T.js';
+import { OfficeElement, controlStyles, definer } from './chunk-PCZJV6HQ.js';
 import { html } from 'lit';
 
 // raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/presence/presence.css?raw

package/dist/controls.js

@@ -1,5 +1,5 @@
-export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineGallery, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonSection, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, parseSvgPreview, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-7ZE4WHUW.js';
+export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineGallery, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonSection, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, parseSvgPreview, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-FWZIVXAV.js';
 import './chunk-HZ422LTR.js';
-import './chunk-E47762NY.js';
-import './chunk-5A4REH6T.js';
+import './chunk-XQWRKHC2.js';
+import './chunk-PCZJV6HQ.js';
 import './chunk-HSJH6SUW.js';

package/dist/dialog/dialog.d.ts

@@ -29,10 +29,16 @@ export declare class OfficeUiDialog extends OfficeElement {
         dismissible: {
             type: StringConstructor;
         };
+        closeLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
     };
     open: boolean;
     heading: string;
     dismissible: string | null;
+    /** Name of the close button (English by default), so a product can translate it. */
+    closeLabel: string | null;
     private returnFocus;
     constructor();
     show(): void;

package/dist/index.js

@@ -1,15 +1,15 @@
 import { installOfficeUiTheme } from './chunk-2X6QYQ3Q.js';
 export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-2X6QYQ3Q.js';
-import { registerControls } from './chunk-7ZE4WHUW.js';
-export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineGallery, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonSection, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, glyph, nextEnabledIndex, parseSvgPreview, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-7ZE4WHUW.js';
-import { defineSmartArt } from './chunk-3MDKXKKQ.js';
-export { OfficeUiSmartArt, defineSmartArt, renderDiagramDrawing } from './chunk-3MDKXKKQ.js';
-import { TEAMS_TAGS, registerTeams } from './chunk-HNGJI5EZ.js';
-export { EMOJI, OfficeUiAppRail, OfficeUiAvatar, OfficeUiCallControls, OfficeUiCallGrid, OfficeUiChannelList, OfficeUiChatComposer, OfficeUiChatList, OfficeUiPrejoin, QUICK_REACTIONS, TEAMS_TAGS, TeamsElement, colorFor, dayLabel, defineAppRail, defineAvatar, defineCallControls, defineCallGrid, defineChannelList, defineChatComposer, defineChatList, definePrejoin, formatElapsed, formatSize, formatTime, icon, registerTeams, withStyles } from './chunk-HNGJI5EZ.js';
+import { registerControls } from './chunk-FWZIVXAV.js';
+export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineGallery, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonSection, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, glyph, nextEnabledIndex, parseSvgPreview, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-FWZIVXAV.js';
+import { defineSmartArt } from './chunk-RVZAYXTI.js';
+export { OfficeUiSmartArt, defineSmartArt, renderDiagramDrawing } from './chunk-RVZAYXTI.js';
+import { TEAMS_TAGS, registerTeams } from './chunk-TCBUC6BI.js';
+export { EMOJI, OfficeUiAppRail, OfficeUiAvatar, OfficeUiCallControls, OfficeUiCallGrid, OfficeUiChannelList, OfficeUiChatComposer, OfficeUiChatList, OfficeUiPrejoin, QUICK_REACTIONS, TEAMS_TAGS, TeamsElement, colorFor, dayLabel, defineAppRail, defineAvatar, defineCallControls, defineCallGrid, defineChannelList, defineChatComposer, defineChatList, definePrejoin, formatElapsed, formatSize, formatTime, icon, registerTeams, withStyles } from './chunk-TCBUC6BI.js';
 export { createIconSvg, getIcon, listIcons, paintIcon, registerIcon } from './chunk-HZ422LTR.js';
-import { definePresence } from './chunk-E47762NY.js';
-export { OfficeUiPresence, definePresence, initialsOf, participantsFromAwareness } from './chunk-E47762NY.js';
-export { CONTRACT_REVISION, OfficeElement, controlStyles, flag, readFlag, triState, valueOn, withTokens } from './chunk-5A4REH6T.js';
+import { definePresence } from './chunk-XQWRKHC2.js';
+export { OfficeUiPresence, definePresence, initialsOf, participantsFromAwareness } from './chunk-XQWRKHC2.js';
+export { CONTRACT_REVISION, OfficeElement, controlStyles, flag, readFlag, triState, valueOn, withTokens } from './chunk-PCZJV6HQ.js';
 export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-HSJH6SUW.js';
 
 // src/index.ts

package/dist/presence.js

@@ -1,3 +1,3 @@
-export { OfficeUiPresence, definePresence, initialsOf, participantsFromAwareness } from './chunk-E47762NY.js';
-import './chunk-5A4REH6T.js';
+export { OfficeUiPresence, definePresence, initialsOf, participantsFromAwareness } from './chunk-XQWRKHC2.js';
+import './chunk-PCZJV6HQ.js';
 import './chunk-HSJH6SUW.js';

package/dist/registry.d.ts

@@ -12,8 +12,12 @@ export type Definer = ((registry?: CustomElementRegistry) => void) & {
 };
 /** The registry of the current window, or undefined where there is no DOM (SSR). */
 export declare function browserRegistry(): CustomElementRegistry | undefined;
-/** Wrap a per-tag `make` factory into a public, SSR-safe, idempotent definer. */
-export declare function definer(tag: string, make: () => CustomElementConstructor): Definer;
+/**
+ * Wrap a per-tag `make` factory into a public, SSR-safe, idempotent definer. `requires` are the
+ * elements this one renders inside its own template; defining the composite defines them first, so
+ * a product that registers only the element it uses never gets a silently inert inner control.
+ */
+export declare function definer(tag: string, make: () => CustomElementConstructor, requires?: readonly Definer[]): Definer;
 /** Bubbling, composed event: crosses shadow boundaries like the native ones do. */
 export declare function emit<T>(host: HTMLElement, type: string, detail: T, cancelable?: boolean): boolean;
 /**

package/dist/smartart.js

@@ -1,3 +1,3 @@
-export { OfficeUiSmartArt, defineSmartArt, renderDiagramDrawing } from './chunk-3MDKXKKQ.js';
-import './chunk-5A4REH6T.js';
+export { OfficeUiSmartArt, defineSmartArt, renderDiagramDrawing } from './chunk-RVZAYXTI.js';
+import './chunk-PCZJV6HQ.js';
 import './chunk-HSJH6SUW.js';

package/dist/teams.js

@@ -1,5 +1,5 @@
-export { EMOJI, OfficeUiAppRail, OfficeUiAvatar, OfficeUiCallControls, OfficeUiCallGrid, OfficeUiChannelList, OfficeUiChatComposer, OfficeUiChatList, OfficeUiPrejoin, QUICK_REACTIONS, TEAMS_TAGS, TeamsElement, colorFor, dayLabel, defineAppRail, defineAvatar, defineCallControls, defineCallGrid, defineChannelList, defineChatComposer, defineChatList, definePrejoin, formatElapsed, formatSize, formatTime, icon, registerTeams, withStyles } from './chunk-HNGJI5EZ.js';
+export { EMOJI, OfficeUiAppRail, OfficeUiAvatar, OfficeUiCallControls, OfficeUiCallGrid, OfficeUiChannelList, OfficeUiChatComposer, OfficeUiChatList, OfficeUiPrejoin, QUICK_REACTIONS, TEAMS_TAGS, TeamsElement, colorFor, dayLabel, defineAppRail, defineAvatar, defineCallControls, defineCallGrid, defineChannelList, defineChatComposer, defineChatList, definePrejoin, formatElapsed, formatSize, formatTime, icon, registerTeams, withStyles } from './chunk-TCBUC6BI.js';
 import './chunk-HZ422LTR.js';
-import './chunk-E47762NY.js';
-import './chunk-5A4REH6T.js';
+import './chunk-XQWRKHC2.js';
+import './chunk-PCZJV6HQ.js';
 import './chunk-HSJH6SUW.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ooxml-ui",
-	"version": "0.23.0",
+	"version": "0.24.0",
 	"description": "Shared, format-neutral web components and styles for the Office viewers (Word, PowerPoint, Excel)",
 	"keywords": [
 		"custom-elements",
@@ -82,7 +82,7 @@
 	},
 	"dependencies": {
 		"lit": "^3.3.3",
-		"ooxml-core": "^0.15.0"
+		"ooxml-core": "^0.16.0"
 	},
 	"devDependencies": {
 		"@types/jsdom": "^30.0.0",