ooxml-ui 0.14.0 → 0.16.0

package/dist/{chunk-EWNLGZPX.js → chunk-G2ZIAXOV.js}

@@ -1,7 +1,7 @@
-import { createIconSvg, paintIcon, defineIcon } from './chunk-WNSUNQIY.js';
-import { initialsOf } from './chunk-WKLVWPI7.js';
-import { definer, attachStyles, controlCss, emit } from './chunk-3BHP4IFP.js';
-import { tok, FOCUS_RING, OFFICE_TOKENS } from './chunk-BDJW2KDI.js';
+import { createIconSvg, paintIcon, defineIcon } from './chunk-VUXNXH4Q.js';
+import { initialsOf } from './chunk-VYF7LGXZ.js';
+import { definer, attachStyles, controlCss, emit } from './chunk-NDEB6EBU.js';
+import { tok, FOCUS_RING, OFFICE_TOKENS } from './chunk-4MT4OIAJ.js';
 
 // src/chrome-controls.ts
 var ICON = `svg { flex: none; width: ${tok("--office-icon-size")}; height: ${tok("--office-icon-size")}; fill: none; stroke: currentColor; stroke-width: ${tok("--office-icon-stroke")};
@@ -702,6 +702,8 @@ var defineRibbonToggle = definer("office-ui-ribbon-toggle", () => {
     static requestEvent = "office-toggle";
     static idAttribute = "command";
     static detailKey = "command";
+    /** The checkbox drawn inside; a product subclass may use its own aliased tag. */
+    static checkboxTag = "office-ui-checkbox";
     static get observedAttributes() {
       return ["label", "checked", "disabled", "title"];
     }
@@ -713,7 +715,9 @@ var defineRibbonToggle = definer("office-ui-ribbon-toggle", () => {
       const root = this.attachShadow({ mode: "open" });
       attachStyles(root, controlCss(CSS2));
       const label = doc.createElement("label");
-      this.checkbox = doc.createElement("office-ui-checkbox");
+      this.checkbox = doc.createElement(
+        this.constructor.checkboxTag
+      );
       this.text = doc.createTextNode("");
       label.append(this.checkbox, this.text);
       label.addEventListener("click", (event) => {
@@ -1770,56 +1774,114 @@ var defineAccount = definer("office-ui-account", () => {
 // src/button.ts
 var CSS10 = `
 :host { display: inline-flex; vertical-align: middle; }
-button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
+button { box-sizing: border-box; position: relative; display: inline-flex; align-items: center; justify-content: center;
 	gap: ${tok("--office-space-1-5")}; min-width: ${tok("--office-target-size")}; min-height: ${tok("--office-target-size")};
 	padding: 0 ${tok("--office-space-2")}; border: ${tok("--office-border-width")} solid transparent; border-radius: ${tok("--office-radius")};
 	background: transparent; color: ${tok("--office-foreground")}; font: inherit; font-size: ${tok("--office-font-size-sm")};
 	cursor: pointer; white-space: nowrap; }
 :host([variant="stacked"]) button { flex-direction: column; padding: ${tok("--office-space-1")} ${tok("--office-space-2")}; }
 button:hover:not(:disabled) { background: ${tok("--office-surface")}; }
+button:active:not(:disabled) { background: ${tok("--office-selected")}; }
 button:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: calc(${tok("--office-focus-offset")} / 2); }
 button[aria-pressed="true"], button[aria-expanded="true"] { border-color: ${tok("--office-accent")};
 	background: ${tok("--office-surface")}; }
+:host([active]) button { background: ${tok("--office-command-active")}; color: ${tok("--office-accent")}; }
 button:disabled { opacity: .5; cursor: not-allowed; }
-svg { width: ${tok("--office-icon-size-ml")}; height: ${tok("--office-icon-size-ml")}; fill: none; stroke: currentColor; stroke-width: ${tok("--office-icon-stroke")};
-	stroke-linecap: round; stroke-linejoin: round; }
-svg:not([data-painted]) { display: none; }
+svg { width: ${tok("--office-icon-size-ml")}; height: ${tok("--office-icon-size-ml")}; flex: none; color: ${tok("--office-command-icon-color")};
+	fill: none; stroke: currentColor; stroke-width: ${tok("--office-icon-stroke")}; stroke-linecap: round; stroke-linejoin: round; }
+svg.glyph:not([data-painted]) { display: none; }
+.label[hidden], .caret[hidden], .badge[hidden] { display: none; }
+/* Office trails a menu chevron after the last line of the label. */
+.caret { display: inline-block; width: ${tok("--office-icon-size-xs")}; height: ${tok("--office-icon-size-xs")};
+	margin-inline-start: ${tok("--office-space-0")}; vertical-align: middle; color: ${tok("--office-muted-foreground")}; }
+.badge { position: absolute; top: 0; inset-inline-end: 0; padding: 0 ${tok("--office-space-0")}; border-radius: ${tok("--office-radius-full")};
+	background: ${tok("--office-accent")}; color: ${tok("--office-accent-foreground")}; font-size: ${tok("--office-font-size-3xs")}; }
+/* Large ribbon command: a big glyph above a two-line label. */
+:host([size="large"]) button { flex-direction: column; justify-content: flex-start; gap: ${tok("--office-space-0")};
+	min-width: ${tok("--office-command-large-min-width")}; max-width: ${tok("--office-command-large-max-width")};
+	height: ${tok("--office-command-large-height")}; padding: ${tok("--office-space-0")} ${tok("--office-space-1")};
+	border: 0; white-space: normal; text-align: center; line-height: ${tok("--office-line-height-tight")}; }
+:host([size="large"]) svg.glyph { width: ${tok("--office-command-large-icon")}; height: ${tok("--office-command-large-icon")}; }
+/* Small ribbon command: icon and label in one row. */
+:host([size="small"]) button { justify-content: flex-start; min-width: 0; height: ${tok("--office-control-height")};
+	min-height: ${tok("--office-control-height")}; padding: 0 ${tok("--office-space-1-5")}; border: 0; text-align: start; }
+:host([size="small"]) svg.glyph { width: ${tok("--office-command-small-icon")}; height: ${tok("--office-command-small-icon")}; }
+/* Tall, label-less tool tiles (pens, erasers). */
+:host([icon-only][tall]) button { min-width: ${tok("--office-command-tall-min-width")}; height: ${tok("--office-command-tall-height")}; padding: ${tok("--office-space-1")}; }
+:host([icon-only][tall]) svg.glyph { width: ${tok("--office-command-tall-icon")}; height: ${tok("--office-command-tall-icon")}; }
+:host([icon-only][tall][active]) button { box-shadow: inset 0 0 0 ${tok("--office-border-width")} ${tok("--office-accent")}; }
+@media (pointer: coarse), (max-width: 767px) {
+	:host([size="small"]) button { min-height: ${tok("--office-target-size-touch")}; }
+	:host([icon-only]) button { min-width: ${tok("--office-target-size-touch")}; }
+}
 @media (forced-colors: active) {
 	button { border-color: ButtonText; color: ButtonText; background: ButtonFace; }
+	svg { color: ButtonText; }
 	button:disabled { color: GrayText; border-color: GrayText; }
-	button[aria-pressed="true"], button[aria-expanded="true"] { background: Highlight; color: HighlightText; }
+	button[aria-pressed="true"], button[aria-expanded="true"], :host([active]) button { background: Highlight; color: HighlightText; }
 }
 `;
 var defineButton = definer("office-ui-button", () => {
   class OfficeUiButton extends HTMLElement {
-    static observedAttributes = [
-      "label",
-      "icon",
-      "command",
-      "disabled",
-      "pressed",
-      "expanded",
-      "icon-only",
-      "title",
-      "keyshortcuts"
-    ];
+    static requestEvent = "office-command";
+    static idAttribute = "command";
+    static detailKey = "command";
+    static get observedAttributes() {
+      return [
+        "label",
+        "icon",
+        "command",
+        "disabled",
+        "pressed",
+        "expanded",
+        "icon-only",
+        "title",
+        "keyshortcuts",
+        "badge",
+        "caret",
+        this.idAttribute
+      ];
+    }
     button;
     svg;
     text;
+    caret;
+    badge;
     constructor() {
       super();
+      const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open", delegatesFocus: true });
       attachStyles(root, controlCss(CSS10));
-      this.button = this.ownerDocument.createElement("button");
+      this.button = doc.createElement("button");
       this.button.type = "button";
       this.button.setAttribute("part", "button");
-      this.svg = createIconSvg(this.ownerDocument);
-      this.text = this.ownerDocument.createElement("span");
-      this.button.append(this.svg, this.text);
+      this.svg = createIconSvg(doc);
+      this.svg.classList.add("glyph");
+      this.text = doc.createElement("span");
+      this.text.className = "label";
+      this.caret = createIconSvg(doc);
+      this.caret.classList.add("caret");
+      paintIcon(this.caret, "chevronDown");
+      this.badge = doc.createElement("span");
+      this.badge.className = "badge";
+      this.badge.setAttribute("aria-hidden", "true");
+      this.button.append(this.svg, this.text, this.badge);
       root.append(this.button);
+      this.button.addEventListener("keydown", (event) => {
+        if ((event.key === " " || event.key === "Enter") && !event.ctrlKey && !event.metaKey && !event.altKey)
+          event.stopPropagation();
+      });
       this.button.addEventListener("click", () => {
-        const command = this.getAttribute("command");
-        if (!this.button.disabled && command) emit(this, "office-command", { command });
+        const { requestEvent, idAttribute, detailKey } = this.constructor;
+        const id = this.getAttribute(idAttribute);
+        if (!this.button.disabled && id)
+          this.dispatchEvent(
+            new CustomEvent(requestEvent, {
+              detail: { [detailKey]: id },
+              bubbles: true,
+              composed: true
+            })
+          );
       });
     }
     connectedCallback() {
@@ -1842,10 +1904,21 @@ var defineButton = definer("office-ui-button", () => {
       if (value === void 0) this.removeAttribute("pressed");
       else this.setAttribute("pressed", String(value));
     }
+    /** The registered icon to draw; a product subclass may map names onto its glyph set. */
+    iconName() {
+      return this.getAttribute("icon");
+    }
+    /** Whether the trailing menu chevron shows. */
+    showsCaret() {
+      const caret = this.getAttribute("caret");
+      return caret !== null && caret !== "false";
+    }
     sync() {
       const label = this.getAttribute("label") ?? "";
       const iconOnly = this.hasAttribute("icon-only");
       this.text.textContent = label;
+      this.text.append(this.caret);
+      this.caret.toggleAttribute("hidden", !this.showsCaret());
       this.text.hidden = iconOnly;
       if (iconOnly && label) this.button.setAttribute("aria-label", label);
       else this.button.removeAttribute("aria-label");
@@ -1854,8 +1927,10 @@ var defineButton = definer("office-ui-button", () => {
       const shortcuts = this.getAttribute("keyshortcuts");
       if (shortcuts) this.button.setAttribute("aria-keyshortcuts", shortcuts);
       else this.button.removeAttribute("aria-keyshortcuts");
-      if (paintIcon(this.svg, this.getAttribute("icon"))) this.svg.setAttribute("data-painted", "");
+      if (paintIcon(this.svg, this.iconName())) this.svg.setAttribute("data-painted", "");
       else this.svg.removeAttribute("data-painted");
+      this.badge.textContent = this.getAttribute("badge") ?? "";
+      this.badge.hidden = !this.badge.textContent;
       for (const attr of ["pressed", "expanded"]) {
         const value = this.getAttribute(attr);
         if (value === null) this.button.removeAttribute(`aria-${attr}`);
@@ -2327,21 +2402,85 @@ var defineCommandSearch = definer("office-ui-command-search", () => {
   return OfficeUiCommandSearch;
 });
 
+// src/menu-model.ts
+var EMPTY_MENU_STATE = { x: 0, y: 0, label: "", items: [] };
+function nextEnabledIndex(items, from, step) {
+  const count = items.length;
+  for (let offset = 1; offset <= count; offset += 1) {
+    const index = ((from + step * offset) % count + count) % count;
+    if (!items[index]?.disabled) return index;
+  }
+  return -1;
+}
+function typeAheadIndex(items, from, query) {
+  const needle = query.toLowerCase();
+  const cycling = [...needle].every((char) => char === needle[0]);
+  const prefix = cycling ? needle[0] : needle;
+  for (let offset = cycling ? 1 : 0; offset <= items.length; offset += 1) {
+    const index = (from + offset + items.length) % items.length;
+    const item = items[index];
+    if (item && !item.disabled && item.label.trim().toLowerCase().startsWith(prefix ?? ""))
+      return index;
+  }
+  return -1;
+}
+function clampFlyoutPosition(input) {
+  const margin = input.margin ?? 8;
+  const maxLeft = input.viewportWidth - input.width - margin;
+  const maxTop = input.viewportHeight - input.height - margin;
+  return {
+    left: Math.max(margin, input.width > 0 ? Math.min(input.x, maxLeft) : input.x),
+    top: Math.max(margin, input.height > 0 ? Math.min(input.y, maxTop) : input.y)
+  };
+}
+
 // src/context-menu.ts
 var CSS13 = `
 :host { display: contents; }
+:host([data-controlled]) { display: block; position: fixed; z-index: ${tok("--office-z-popover")};
+	color: ${tok("--office-popover-foreground")}; font: ${tok("--office-font-size-sm")}/${tok("--office-line-height")} ${tok("--office-font")}; }
+:host([data-controlled][hidden]) { display: none; }
 .panel { position: fixed; inset: auto; margin: 0; min-width: ${tok("--office-context-menu-min-width")}; padding: ${tok("--office-space-1")}; box-sizing: border-box;
 	background: ${tok("--office-background")}; color: ${tok("--office-foreground")};
 	border: ${tok("--office-border-width")} solid ${tok("--office-border")}; border-radius: ${tok("--office-radius")};
 	box-shadow: ${tok("--office-shadow")}; font-family: ${tok("--office-font")}; }
 .panel[hidden] { display: none; }
-@media (forced-colors: active) { .panel { border-color: CanvasText; background: Canvas; color: CanvasText; } }
+/* Controlled mode: the host is the fixed box; rows are drawn here from \`state\`. */
+.menu { box-sizing: border-box; display: flex; flex-direction: column; min-width: ${tok("--office-menu-min-width")};
+	max-height: calc(100vh - 2 * ${tok("--office-space-2")}); overflow-y: auto; padding: ${tok("--office-space-1-5")} 0;
+	border: ${tok("--office-border-width")} solid ${tok("--office-border")}; border-radius: ${tok("--office-radius-md")};
+	background: ${tok("--office-popover")}; color: inherit; box-shadow: ${tok("--office-shadow-lg")}; user-select: none; }
+.menu:focus { outline: none; }
+.item { box-sizing: border-box; display: flex; align-items: center; gap: ${tok("--office-space-1-5")}; width: 100%;
+	min-height: ${tok("--office-field-height")}; padding: ${tok("--office-space-1-5")} ${tok("--office-space-3")}; border: 0;
+	background: transparent; color: inherit; font: inherit; text-align: start; white-space: nowrap; cursor: pointer; }
+.item:hover:not(:disabled), .item:focus:not(:disabled) { background: ${tok("--office-selected")}; outline: none; }
+.item:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: calc(-1 * ${tok("--office-focus-width")}); }
+.item:disabled { opacity: .45; cursor: default; }
+.item.danger { color: ${tok("--office-danger")}; }
+.item svg { width: ${tok("--office-icon-size-md")}; height: ${tok("--office-icon-size-md")}; flex: none; fill: none; stroke: currentColor;
+	stroke-width: ${tok("--office-icon-stroke")}; stroke-linecap: round; stroke-linejoin: round; }
+.check { flex: none; width: ${tok("--office-icon-size")}; text-align: center; }
+.separator { height: ${tok("--office-border-width")}; margin: ${tok("--office-space-1")} 0; background: ${tok("--office-border")}; }
+.heading { padding: ${tok("--office-space-1-5")} ${tok("--office-space-3")} ${tok("--office-space-0")}; color: ${tok("--office-muted-foreground")};
+	font-size: ${tok("--office-font-size-2xs")}; font-weight: ${tok("--office-font-weight-bold")}; letter-spacing: .06em; text-transform: uppercase; }
+@media (pointer: coarse) { .item { min-height: ${tok("--office-target-size-touch")}; } }
+@media (forced-colors: active) {
+	.panel, .menu { border-color: CanvasText; background: Canvas; color: CanvasText; box-shadow: none; }
+	.item, .item.danger { color: CanvasText; }
+	.item:disabled { color: GrayText; opacity: 1; }
+	.item:hover:not(:disabled), .item:focus:not(:disabled) { background: Highlight; color: HighlightText; }
+	.separator { background: CanvasText; }
+	.heading { color: CanvasText; }
+}
 `;
 var SEPARATOR_CSS = `
 :host { display: block; height: ${tok("--office-border-width")}; margin: ${tok("--office-space-1")} ${tok("--office-space-1-5")}; background: ${tok("--office-border")}; }
 @media (forced-colors: active) { :host { background: CanvasText; } }
 `;
 var ITEMS = "office-ui-menu-item:not([disabled]):not([hidden])";
+var TYPE_AHEAD_MS = 700;
+var openMenus = /* @__PURE__ */ new WeakMap();
 var defineMenuSeparator = definer("office-ui-menu-separator", () => {
   class OfficeUiMenuSeparator extends HTMLElement {
     constructor() {
@@ -2356,10 +2495,25 @@ var defineMenuSeparator = definer("office-ui-menu-separator", () => {
 });
 var defineContextMenu = definer("office-ui-context-menu", () => {
   class OfficeUiContextMenu extends HTMLElement {
+    static requestEvent = "office-menu-request";
+    static closeEvent = "office-menu-close";
+    static markerPattern = /^data-[a-z0-9-]+$/;
     static observedAttributes = ["label"];
     panel;
+    menu;
     returnFocus = null;
     outside;
+    model = EMPTY_MENU_STATE;
+    controlled = false;
+    rows = [];
+    active = -1;
+    focused = false;
+    query = "";
+    queryTimer;
+    markers = [];
+    listening = false;
+    signature = "";
+    opener = null;
     constructor() {
       super();
       const doc = this.ownerDocument;
@@ -2372,22 +2526,49 @@ var defineContextMenu = definer("office-ui-context-menu", () => {
         this.panel.setAttribute("popover", "auto");
       else this.panel.hidden = true;
       this.panel.append(doc.createElement("slot"));
-      root.append(this.panel);
+      this.menu = doc.createElement("div");
+      this.menu.className = "menu";
+      this.menu.setAttribute("role", "menu");
+      this.menu.setAttribute("aria-orientation", "vertical");
+      this.menu.tabIndex = -1;
+      this.menu.hidden = true;
+      root.append(this.panel, this.menu);
       this.panel.addEventListener("toggle", (event) => {
         if (event.newState === "closed") this.closed(false);
       });
-      this.panel.addEventListener("keydown", (event) => this.onKey(event));
+      this.panel.addEventListener("keydown", (event) => this.onChildKey(event));
+      this.menu.addEventListener("keydown", (event) => this.onRowKey(event));
+      this.menu.addEventListener("pointerover", (event) => {
+        const row = event.target?.closest("button");
+        const index = row ? this.rows.indexOf(row) : -1;
+        if (index >= 0 && !row?.disabled && index !== this.active) this.focusRow(index);
+      });
+      this.menu.addEventListener("contextmenu", (event) => event.preventDefault());
       this.addEventListener("office-command", () => this.close());
     }
     connectedCallback() {
       this.panel.setAttribute("aria-label", this.getAttribute("label") ?? "Context menu");
+      if (this.controlled) {
+        this.opener = this.deepActive();
+        this.render();
+      }
     }
     attributeChangedCallback() {
       this.panel.setAttribute("aria-label", this.getAttribute("label") ?? "Context menu");
     }
     disconnectedCallback() {
       this.close();
+      if (!this.controlled) return;
+      this.stopListening();
+      clearTimeout(this.queryTimer);
+      this.focused = false;
+      const opener = this.opener;
+      this.opener = null;
+      const active = this.ownerDocument.activeElement;
+      if (opener?.isConnected && (!active || active === this.ownerDocument.body))
+        opener.focus({ preventScroll: true });
     }
+    // ---- Children mode ------------------------------------------------------------------
     get open() {
       return this.hasAttribute("data-open");
     }
@@ -2410,12 +2591,17 @@ var defineContextMenu = definer("office-ui-context-menu", () => {
       }
       this.setAttribute("data-open", "");
       const view = doc.defaultView;
-      const width = this.panel.offsetWidth;
-      const height = this.panel.offsetHeight;
-      const left = view && width ? Math.min(x, view.innerWidth - width - 4) : x;
-      const top = view && height ? Math.min(y, view.innerHeight - height - 4) : y;
-      this.panel.style.left = `${Math.max(4, Math.round(left))}px`;
-      this.panel.style.top = `${Math.max(4, Math.round(top))}px`;
+      const { left, top } = clampFlyoutPosition({
+        x,
+        y,
+        width: this.panel.offsetWidth,
+        height: this.panel.offsetHeight,
+        viewportWidth: view?.innerWidth ?? x,
+        viewportHeight: view?.innerHeight ?? y,
+        margin: 4
+      });
+      this.panel.style.left = `${Math.round(left)}px`;
+      this.panel.style.top = `${Math.round(top)}px`;
       this.items()[0]?.focus();
     }
     close() {
@@ -2436,7 +2622,7 @@ var defineContextMenu = definer("office-ui-context-menu", () => {
       if (restoreFocus) this.returnFocus?.focus?.();
       this.returnFocus = null;
     }
-    onKey(event) {
+    onChildKey(event) {
       const items = this.items();
       const from = items.findIndex(
         (item) => item === event.target || item.contains(event.target)
@@ -2452,8 +2638,217 @@ var defineContextMenu = definer("office-ui-context-menu", () => {
       else if (event.key === "Escape" || event.key === "Tab") {
         if (event.key === "Escape") event.preventDefault();
         this.close();
+      } else if (event.key.length === 1 && event.key !== " " && !event.ctrlKey && !event.metaKey && !event.altKey) {
+        const labels = items.map((item) => ({
+          label: item.getAttribute("label") ?? item.textContent ?? ""
+        }));
+        const target = this.typeAhead(labels, from, event.key);
+        if (target >= 0) move(target);
+      }
+    }
+    // ---- Controlled mode ----------------------------------------------------------------
+    get state() {
+      return this.model;
+    }
+    set state(value) {
+      const signature = JSON.stringify(value);
+      this.model = value;
+      if (!this.controlled) {
+        this.controlled = true;
+        this.toggleAttribute("data-controlled", true);
+        this.panel.remove();
+        if (this.isConnected) this.opener = this.deepActive();
+      }
+      if (signature !== this.signature) {
+        this.signature = signature;
+        this.render();
       }
     }
+    config() {
+      return this.constructor;
+    }
+    deepActive() {
+      let node = this.ownerDocument.activeElement;
+      while (node?.shadowRoot?.activeElement) node = node.shadowRoot.activeElement;
+      return node instanceof HTMLElement && node !== this.ownerDocument.body ? node : null;
+    }
+    render() {
+      const state = this.model;
+      const items = state.items;
+      this.hidden = items.length === 0;
+      this.menu.hidden = items.length === 0;
+      this.applyMarkers(state.markers ?? []);
+      if (state.zIndex !== void 0) this.style.zIndex = String(state.zIndex);
+      else this.style.removeProperty("z-index");
+      const same = items[this.active];
+      this.active = same && !same.disabled ? this.active : nextEnabledIndex(items, -1, 1);
+      this.renderRows();
+      if (items.length === 0) {
+        this.stopListening();
+        this.focused = false;
+      }
+      if (!this.isConnected || items.length === 0) return;
+      this.place();
+      this.listen();
+      if (!this.focused && state.autoFocus !== false) {
+        this.focused = true;
+        this.focusRow(nextEnabledIndex(items, -1, 1));
+      } else if (this.focused && this.active >= 0)
+        this.rows[this.active]?.focus({ preventScroll: true });
+    }
+    renderRows() {
+      const doc = this.ownerDocument;
+      const state = this.model;
+      this.menu.setAttribute("aria-label", state.label);
+      this.rows = [];
+      let container = this.menu;
+      const nodes = [];
+      const place = (node) => container === this.menu ? nodes.push(node) : container.append(node);
+      state.items.forEach((item, index) => {
+        if (item.separatorBefore || item.heading) container = this.menu;
+        if (item.separatorBefore) {
+          const rule = doc.createElement("div");
+          rule.className = "separator";
+          rule.setAttribute("role", "separator");
+          place(rule);
+        }
+        if (item.heading) {
+          const group = doc.createElement("div");
+          group.setAttribute("role", "group");
+          group.setAttribute("aria-label", item.heading);
+          const title = doc.createElement("div");
+          title.className = "heading";
+          title.setAttribute("aria-hidden", "true");
+          title.textContent = item.heading;
+          group.append(title);
+          place(group);
+          container = group;
+        }
+        const row = doc.createElement("button");
+        row.type = "button";
+        row.className = item.danger ? "item danger" : "item";
+        row.dataset.itemId = item.id;
+        row.setAttribute("role", item.checked === void 0 ? "menuitem" : "menuitemcheckbox");
+        if (item.checked !== void 0) {
+          row.setAttribute("aria-checked", String(item.checked));
+          const check = doc.createElement("span");
+          check.className = "check";
+          check.setAttribute("aria-hidden", "true");
+          check.textContent = item.checked ? "\u2713" : "";
+          row.append(check);
+        }
+        if (item.icon) {
+          const glyph = createIconSvg(doc);
+          paintIcon(glyph, item.icon);
+          row.append(glyph);
+        }
+        row.append(doc.createTextNode(item.label));
+        row.tabIndex = index === this.active ? 0 : -1;
+        if (item.disabled) {
+          row.disabled = true;
+          row.setAttribute("aria-disabled", "true");
+        }
+        row.addEventListener(
+          "click",
+          () => this.dispatchEvent(
+            new CustomEvent(this.config().requestEvent, {
+              detail: { id: item.id },
+              bubbles: true,
+              composed: true
+            })
+          )
+        );
+        this.rows.push(row);
+        place(row);
+      });
+      this.menu.replaceChildren(...nodes);
+    }
+    applyMarkers(next) {
+      for (const name of this.markers) this.removeAttribute(name);
+      const pattern = this.config().markerPattern;
+      this.markers = next.filter((name) => pattern.test(name));
+      for (const name of this.markers) this.setAttribute(name, "true");
+    }
+    place() {
+      const view = this.ownerDocument.defaultView;
+      this.style.left = `${this.model.x}px`;
+      this.style.top = `${this.model.y}px`;
+      const box = this.getBoundingClientRect();
+      const { left, top } = clampFlyoutPosition({
+        x: this.model.x,
+        y: this.model.y,
+        width: box.width,
+        height: box.height,
+        viewportWidth: view?.innerWidth ?? box.right,
+        viewportHeight: view?.innerHeight ?? box.bottom
+      });
+      this.style.left = `${left}px`;
+      this.style.top = `${top}px`;
+    }
+    focusRow(index) {
+      if (index < 0) return;
+      this.active = index;
+      this.rows.forEach((row, at) => row.tabIndex = at === index ? 0 : -1);
+      this.rows[index]?.focus({ preventScroll: true });
+    }
+    typeAhead(items, from, key) {
+      this.query += key;
+      clearTimeout(this.queryTimer);
+      this.queryTimer = setTimeout(() => this.query = "", TYPE_AHEAD_MS);
+      return typeAheadIndex(items, from, this.query);
+    }
+    onRowKey(event) {
+      const items = this.model.items;
+      let target = -2;
+      if (event.key === "ArrowDown") target = nextEnabledIndex(items, this.active, 1);
+      else if (event.key === "ArrowUp") target = nextEnabledIndex(items, this.active, -1);
+      else if (event.key === "Home") target = nextEnabledIndex(items, -1, 1);
+      else if (event.key === "End") target = nextEnabledIndex(items, items.length, -1);
+      else if (event.key.length === 1 && event.key !== " " && !event.ctrlKey && !event.metaKey && !event.altKey)
+        target = this.typeAhead(items, this.active, event.key);
+      if (target === -2) return;
+      event.preventDefault();
+      this.focusRow(target);
+    }
+    dismiss(reason) {
+      this.dispatchEvent(
+        new CustomEvent(this.config().closeEvent, {
+          detail: { reason },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+    onDocumentKey = (event) => {
+      if (openMenus.get(this.ownerDocument)?.at(-1) !== this) return;
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dismiss("escape");
+      } else if (event.key === "Tab") this.dismiss("tab");
+    };
+    onDocumentPointer = (event) => {
+      if (!event.composedPath().includes(this)) this.dismiss("outside");
+    };
+    listen() {
+      if (this.listening) return;
+      this.listening = true;
+      const doc = this.ownerDocument;
+      openMenus.set(doc, [...openMenus.get(doc) ?? [], this]);
+      doc.addEventListener("keydown", this.onDocumentKey, true);
+      doc.addEventListener("pointerdown", this.onDocumentPointer, true);
+    }
+    stopListening() {
+      if (!this.listening) return;
+      this.listening = false;
+      const doc = this.ownerDocument;
+      openMenus.set(
+        doc,
+        (openMenus.get(doc) ?? []).filter((menu) => menu !== this)
+      );
+      doc.removeEventListener("keydown", this.onDocumentKey, true);
+      doc.removeEventListener("pointerdown", this.onDocumentPointer, true);
+    }
   }
   return OfficeUiContextMenu;
 });
@@ -3037,41 +3432,90 @@ function text(doc, tag, content, className) {
 // src/ribbon.ts
 var GROUP_CSS = `
 :host { display: inline-flex; flex: none; align-self: stretch; }
-.group { box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between;
-	min-height: ${tok("--office-ribbon-group-height")}; padding: ${tok("--office-space-1")} ${tok("--office-space-2")} ${tok("--office-space-0")};
-	border-inline-end: ${tok("--office-border-width")} solid color-mix(in srgb, ${tok("--office-border")} 60%, transparent); }
-:host(:last-child) .group { border-inline-end: 0; }
-.row { display: flex; align-items: flex-start; gap: ${tok("--office-space-1")}; }
+.group { position: relative; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between;
+	min-height: ${tok("--office-ribbon-group-height")}; padding: ${tok("--office-ribbon-group-padding")}; }
+/* Office draws a hairline between groups; a product may stop it short of the top and bottom. */
+.group::after { content: ''; position: absolute; top: ${tok("--office-ribbon-separator-inset")}; bottom: ${tok("--office-ribbon-separator-inset")};
+	inset-inline-end: 0; width: ${tok("--office-border-width")}; background: ${tok("--office-ribbon-separator")}; }
+:host(:last-child) .group::after { content: none; }
+.row { display: flex; align-items: flex-start; gap: ${tok("--office-space-1")}; flex: 1; }
+/* One-line groups centre their commands on the whole group box. */
+:host([data-compact-row]) .row { align-items: center; }
+/* Several small drop-down galleries stack in columns of three. */
+:host([data-stack]) .row { flex-direction: column; align-items: stretch; align-content: flex-start; flex-wrap: wrap;
+	max-height: ${tok("--office-ribbon-stack-max-height")}; gap: ${tok("--office-space-0")}; }
 ::slotted(*) { flex-shrink: 0; }
-.foot { position: relative; display: flex; justify-content: center; padding-top: ${tok("--office-space-0")}; }
-.caption { color: ${tok("--office-muted-foreground")}; font-size: ${tok("--office-font-size-2xs")};
+.foot { position: relative; display: flex; align-items: center; justify-content: center; padding: ${tok("--office-ribbon-caption-padding")}; }
+.caption { color: ${tok("--office-muted-foreground")}; font-size: ${tok("--office-ribbon-caption-size")};
 	line-height: ${tok("--office-ribbon-caption-line-height")}; text-align: center; white-space: nowrap; }
-.launcher { position: absolute; inset-inline-end: -6px; bottom: calc(-1 * ${tok("--office-space-px")}); display: inline-grid; place-items: center;
-	width: ${tok("--office-launcher-width")}; height: ${tok("--office-launcher-height")}; padding: 0; border: 0; border-radius: ${tok("--office-radius-xs")}; background: transparent;
-	color: ${tok("--office-muted-foreground")}; cursor: pointer; }
-.launcher:hover:not(:disabled) { background: ${tok("--office-surface")}; }
+.launcher { position: absolute; inset-inline-end: ${tok("--office-launcher-inset-end")}; bottom: ${tok("--office-launcher-inset-bottom")}; display: inline-grid; place-items: center;
+	width: ${tok("--office-launcher-width")}; height: ${tok("--office-launcher-height")}; padding: 0; border: 0; border-radius: ${tok("--office-radius-xs")};
+	background: transparent; color: ${tok("--office-muted-foreground")}; cursor: pointer; }
+.launcher:hover:not(:disabled) { background: ${tok("--office-surface")}; color: ${tok("--office-foreground")}; }
 .launcher:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; }
 .launcher:disabled { opacity: .45; cursor: not-allowed; }
 .launcher[hidden] { display: none; }
-.launcher svg { width: ${tok("--office-icon-size-xs")}; height: ${tok("--office-icon-size-xs")}; fill: none; stroke: currentColor; stroke-width: ${tok("--office-icon-stroke")};
-	stroke-linecap: round; stroke-linejoin: round; }
-@media (forced-colors: active) { .group { border-inline-end-color: CanvasText; } .caption { color: CanvasText; } }
+.launcher svg { width: ${tok("--office-icon-size-xs")}; height: ${tok("--office-icon-size-xs")}; fill: none; stroke: currentColor;
+	stroke-width: ${tok("--office-icon-stroke")}; stroke-linecap: round; stroke-linejoin: round; }
+/* Collapsed (narrow window): the group is one button; its commands open in a popup. */
+.face { display: none; }
+:host([data-collapsed]) .face { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: ${tok("--office-space-0")};
+	min-width: ${tok("--office-collapsed-group-min-width")}; height: ${tok("--office-command-large-height")}; padding: ${tok("--office-space-0")} ${tok("--office-space-1-5")};
+	border: 0; border-radius: ${tok("--office-radius")}; background: transparent; color: ${tok("--office-foreground")}; font: inherit;
+	font-size: ${tok("--office-font-size-sm")}; cursor: pointer; }
+:host([data-collapsed]) .face:hover, :host([data-open]) .face { background: ${tok("--office-selected")}; }
+.face:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: ${tok("--office-focus-offset")}; }
+.face svg { width: ${tok("--office-command-large-icon")}; height: ${tok("--office-command-large-icon")}; fill: none; stroke: currentColor;
+	stroke-width: ${tok("--office-icon-stroke")}; stroke-linecap: round; stroke-linejoin: round; color: ${tok("--office-command-icon-color")}; }
+.face svg.chev { width: ${tok("--office-icon-size-xs")}; height: ${tok("--office-icon-size-xs")}; color: currentColor; }
+:host([data-collapsed]) .foot, :host([data-collapsed]) .row { display: none; }
+:host([data-collapsed][data-open]) .row { display: flex; flex-wrap: wrap; position: fixed; top: ${tok("--office-ribbon-collapse-y")};
+	left: ${tok("--office-ribbon-collapse-x")}; z-index: ${tok("--office-z-popover")}; box-sizing: border-box;
+	max-width: calc(100vw - 2 * ${tok("--office-space-2")}); padding: ${tok("--office-space-2")}; background: ${tok("--office-popover")};
+	color: ${tok("--office-popover-foreground")}; border: ${tok("--office-border-width")} solid ${tok("--office-border")};
+	border-radius: ${tok("--office-radius-md")}; box-shadow: ${tok("--office-shadow")}; }
+@media (forced-colors: active) {
+	.group::after { background: CanvasText; } .caption, .launcher { color: CanvasText; }
+	:host([data-collapsed][data-open]) .row { border-color: CanvasText; }
+}
 `;
+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 defineRibbonGroup = definer("office-ui-ribbon-group", () => {
   class OfficeUiRibbonGroup extends HTMLElement {
-    static observedAttributes = ["label", "launcher", "launcher-disabled"];
+    static launcherEvent = "office-command";
+    static collapseEvent = "office-ribbon-collapse-toggle";
+    static observedAttributes = [
+      "label",
+      "launcher",
+      "launcher-label",
+      "launcher-disabled",
+      "icon",
+      "data-open"
+    ];
     caption;
     launcher;
+    face;
+    faceIcon;
+    faceLabel;
+    slotEl;
+    observer;
     constructor() {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
       attachStyles(root, controlCss(GROUP_CSS));
+      const config3 = () => this.constructor;
       const group = doc.createElement("div");
       group.className = "group";
       const row = doc.createElement("div");
       row.className = "row";
-      row.append(doc.createElement("slot"));
+      this.slotEl = doc.createElement("slot");
+      this.slotEl.addEventListener("slotchange", () => this.observe());
+      row.append(this.slotEl);
       this.caption = doc.createElement("span");
       this.caption.className = "caption";
       this.launcher = doc.createElement("button");
@@ -3081,30 +3525,94 @@ var defineRibbonGroup = definer("office-ui-ribbon-group", () => {
       paintIcon(glyph, "launcher");
       this.launcher.append(glyph);
       this.launcher.addEventListener("click", () => {
-        const command = this.getAttribute("launcher");
-        if (command && !this.launcher.disabled) emit(this, "office-command", { command });
+        if (this.launcher.disabled) return;
+        const detail = this.launcherDetail();
+        if (detail)
+          this.dispatchEvent(
+            new CustomEvent(config3().launcherEvent, { detail, bubbles: true, composed: true })
+          );
       });
       const foot = doc.createElement("div");
       foot.className = "foot";
       foot.append(this.caption, this.launcher);
-      group.append(row, foot);
+      this.face = doc.createElement("button");
+      this.face.type = "button";
+      this.face.className = "face";
+      this.face.setAttribute("aria-haspopup", "true");
+      this.faceIcon = createIconSvg(doc);
+      this.faceLabel = doc.createElement("span");
+      const chevron = createIconSvg(doc);
+      chevron.classList.add("chev");
+      paintIcon(chevron, "chevronDown");
+      this.face.append(this.faceIcon, this.faceLabel, chevron);
+      this.face.addEventListener(
+        "click",
+        () => this.dispatchEvent(
+          new CustomEvent(config3().collapseEvent, { bubbles: true, composed: true })
+        )
+      );
+      group.append(this.face, row, foot);
       root.append(group);
     }
     connectedCallback() {
       this.setAttribute("role", "group");
       this.sync();
+      this.observe();
+    }
+    disconnectedCallback() {
+      this.observer?.disconnect();
     }
     attributeChangedCallback() {
       this.sync();
     }
+    /** 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";
+    }
+    observe() {
+      this.observer?.disconnect();
+      if (!this.isConnected) return;
+      const Observer = this.ownerDocument.defaultView?.ResizeObserver;
+      if (Observer) this.observer ??= new Observer(() => this.measure());
+      for (const el of this.slotEl.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)
+        );
+    }
     sync() {
       const label = this.getAttribute("label") ?? "";
       this.caption.textContent = label;
       this.setAttribute("aria-label", label);
-      this.launcher.hidden = !this.getAttribute("launcher");
+      const launcherLabel = this.getAttribute("launcher-label") ?? `${label} options`;
+      this.launcher.hidden = !this.hasAttribute("launcher");
       this.launcher.disabled = this.hasAttribute("launcher-disabled");
-      this.launcher.setAttribute("aria-label", `${label} options`);
-      this.launcher.title = `${label} options`;
+      this.launcher.setAttribute("aria-label", launcherLabel);
+      this.launcher.title = launcherLabel;
+      this.faceLabel.textContent = label;
+      this.face.title = label;
+      this.face.setAttribute("aria-label", label);
+      this.face.setAttribute("aria-expanded", String(this.hasAttribute("data-open")));
+      paintIcon(this.faceIcon, this.iconName());
     }
   }
   return OfficeUiRibbonGroup;
@@ -3227,7 +3735,7 @@ function renderSelectMenu(menu, choices, value) {
   });
   menu.replaceChildren(...items);
 }
-function tokenPx(el, name, fallback) {
+function tokenPx2(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;
@@ -3235,14 +3743,14 @@ function tokenPx(el, name, fallback) {
 function positionSelectMenu(menu, trigger, host) {
   const view = menu.ownerDocument.defaultView;
   const rect = trigger.getBoundingClientRect();
-  const margin = tokenPx(host, "--office-space-2", 8);
-  const gap = tokenPx(host, "--office-space-1", 4);
+  const margin = tokenPx2(host, "--office-space-2", 8);
+  const gap = tokenPx2(host, "--office-space-1", 4);
   const width = Math.max(0, view.innerWidth - margin * 2);
   const below = Math.max(0, view.innerHeight - rect.bottom - gap - margin);
   const above = Math.max(0, rect.top - gap - margin);
   menu.style.minWidth = `${Math.min(rect.width, width)}px`;
   menu.style.maxWidth = `${width}px`;
-  const cap = host.getAttribute("data-font-picker") === "family" ? tokenPx(host, "--office-font-picker-max-height", 320) : tokenPx(host, "--office-select-max-height", 240);
+  const cap = host.getAttribute("data-font-picker") === "family" ? tokenPx2(host, "--office-font-picker-max-height", 320) : tokenPx2(host, "--office-select-max-height", 240);
   menu.style.maxHeight = `${cap}px`;
   const preferred = menu.getBoundingClientRect().height;
   const flip = below < preferred && above > below;
@@ -4258,4 +4766,4 @@ function registerControls(registry) {
   for (const define of CONTROL_DEFINERS) define(registry);
 }
 
-export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToasts, defineToolbar, defineZoomSlider, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, writeOfficeProfile };
+export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile };