ooxml-ui 0.14.0 → 0.15.0

package/dist/button.d.ts

@@ -3,9 +3,12 @@ export type OfficeCommandEvent = CustomEvent<{
 }>;
 /**
  * Command button. Attributes: `label`, `icon`, `command`, `disabled`, `pressed` (aria-pressed),
- * `expanded` (aria-expanded), `icon-only`, `variant="stacked"`, `title`, `keyshortcuts`
- * (forwarded as aria-keyshortcuts, e.g. `Control+Z`).
- * Activation (pointer, Enter, Space) emits one bubbling, composed `office-command`
- * event with `{ command }`; the host decides what it does. Nothing happens when disabled.
+ * `expanded` (aria-expanded), `icon-only`, `variant="stacked"`, `size="large|small"` (ribbon
+ * large and small commands), `tall` (with `icon-only`: a tool tile), `active`, `badge`, `caret`
+ * (a trailing menu chevron), `title`, `keyshortcuts` (forwarded as aria-keyshortcuts).
+ * Activation (pointer, Enter, Space) emits one bubbling, composed `office-command` `{ command }`;
+ * Enter and Space never reach the host's own key handlers. Nothing happens when disabled.
+ * Static `requestEvent`, `idAttribute` and `detailKey`, and the `iconName()` and `showsCaret()`
+ * methods, let a product subclass keep its published contract and glyph set.
  */
 export declare const defineButton: import("./registry.js").Definer;

package/dist/{chunk-BDJW2KDI.js → chunk-4MT4OIAJ.js}

@@ -128,6 +128,28 @@ var OFFICE_TOKENS = {
   "--office-ribbon-tab-height": "35px",
   "--office-ribbon-group-gap": "2px",
   "--office-ribbon-group-height": "78px",
+  "--office-ribbon-group-padding": "4px 8px 2px",
+  "--office-ribbon-separator-inset": "0px",
+  "--office-ribbon-separator": "color-mix(in srgb, var(--office-border, #d1d5db) 60%, transparent)",
+  "--office-ribbon-caption-size": "10px",
+  "--office-ribbon-caption-padding": "2px 0 0",
+  "--office-launcher-inset-end": "-6px",
+  "--office-launcher-inset-bottom": "-1px",
+  "--office-ribbon-compact-row-max": "36px",
+  "--office-ribbon-stack-max-height": "80px",
+  "--office-ribbon-collapse-x": "8px",
+  "--office-ribbon-collapse-y": "120px",
+  "--office-command-icon-color": "currentColor",
+  "--office-command-large-height": "66px",
+  "--office-command-large-min-width": "48px",
+  "--office-command-large-max-width": "80px",
+  "--office-command-large-icon": "32px",
+  "--office-command-small-icon": "16px",
+  "--office-command-tall-height": "62px",
+  "--office-command-tall-min-width": "40px",
+  "--office-command-tall-icon": "30px",
+  "--office-command-active": "color-mix(in srgb, var(--office-accent, #2563eb) 15%, transparent)",
+  "--office-collapsed-group-min-width": "56px",
   "--office-ribbon-caption-line-height": "12px",
   "--office-ribbon-row-height": "22px",
   "--office-ribbon-file-min-width": "52px",

package/dist/{chunk-4WUYOQRL.js → chunk-A46H2JBV.js}

@@ -1,5 +1,5 @@
-import { definer, attachStyles, controlCss, emit } from './chunk-3BHP4IFP.js';
-import { tok } from './chunk-BDJW2KDI.js';
+import { definer, attachStyles, controlCss, emit } from './chunk-NDEB6EBU.js';
+import { tok } from './chunk-4MT4OIAJ.js';
 import { normalizeHexColor } from 'ooxml-core/color';
 
 var SVG_NS = "http://www.w3.org/2000/svg";

package/dist/{chunk-7CCQN3VM.js → chunk-F4TM7U4P.js}

@@ -1,4 +1,4 @@
-import { OFFICE_TOKENS, TOUCH } from './chunk-BDJW2KDI.js';
+import { OFFICE_TOKENS, TOUCH } from './chunk-4MT4OIAJ.js';
 
 // src/theme.ts
 var THEME_STYLE_ID = "office-ui-theme";

package/dist/{chunk-3BHP4IFP.js → chunk-NDEB6EBU.js}

@@ -1,4 +1,4 @@
-import { TOUCH, tok } from './chunk-BDJW2KDI.js';
+import { TOUCH, tok } from './chunk-4MT4OIAJ.js';
 
 // src/registry.ts
 var CONTRACT_REVISION = 1;

package/dist/{chunk-WNSUNQIY.js → chunk-VUXNXH4Q.js}

@@ -1,4 +1,4 @@
-import { definer, attachStyles, controlCss } from './chunk-3BHP4IFP.js';
+import { definer, attachStyles, controlCss } from './chunk-NDEB6EBU.js';
 
 // src/icons.ts
 var registry = /* @__PURE__ */ new Map();

package/dist/{chunk-WKLVWPI7.js → chunk-VYF7LGXZ.js}

@@ -1,5 +1,5 @@
-import { definer, attachStyles, controlCss, emit } from './chunk-3BHP4IFP.js';
-import { tok } from './chunk-BDJW2KDI.js';
+import { definer, attachStyles, controlCss, emit } from './chunk-NDEB6EBU.js';
+import { tok } from './chunk-4MT4OIAJ.js';
 
 // src/presence.ts
 function participantsFromAwareness(states, selfId) {

package/dist/{chunk-EWNLGZPX.js → chunk-ZBFAPBNU.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")};
@@ -1770,56 +1770,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 +1900,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 +1923,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}`);
@@ -3037,41 +3108,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 +3201,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 +3411,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 +3419,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;

package/dist/controls.js

@@ -1,5 +1,5 @@
-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 } from './chunk-EWNLGZPX.js';
-export { defineIcon } from './chunk-WNSUNQIY.js';
-import './chunk-WKLVWPI7.js';
-import './chunk-3BHP4IFP.js';
-import './chunk-BDJW2KDI.js';
+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 } from './chunk-ZBFAPBNU.js';
+export { defineIcon } from './chunk-VUXNXH4Q.js';
+import './chunk-VYF7LGXZ.js';
+import './chunk-NDEB6EBU.js';
+import './chunk-4MT4OIAJ.js';

package/dist/icons.js

@@ -1,3 +1,3 @@
-export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-WNSUNQIY.js';
-import './chunk-3BHP4IFP.js';
-import './chunk-BDJW2KDI.js';
+export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-VUXNXH4Q.js';
+import './chunk-NDEB6EBU.js';
+import './chunk-4MT4OIAJ.js';

package/dist/index.js

@@ -1,14 +1,14 @@
-import { installOfficeUiTheme } from './chunk-7CCQN3VM.js';
-export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-7CCQN3VM.js';
-import { registerControls } from './chunk-EWNLGZPX.js';
-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 } from './chunk-EWNLGZPX.js';
-export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-WNSUNQIY.js';
-import { definePresence } from './chunk-WKLVWPI7.js';
-export { definePresence, initialsOf, participantsFromAwareness } from './chunk-WKLVWPI7.js';
-import { defineSmartArt } from './chunk-4WUYOQRL.js';
-export { defineSmartArt, renderDiagramDrawing } from './chunk-4WUYOQRL.js';
-export { CONTRACT_REVISION } from './chunk-3BHP4IFP.js';
-export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-BDJW2KDI.js';
+import { installOfficeUiTheme } from './chunk-F4TM7U4P.js';
+export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-F4TM7U4P.js';
+import { registerControls } from './chunk-ZBFAPBNU.js';
+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 } from './chunk-ZBFAPBNU.js';
+export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-VUXNXH4Q.js';
+import { definePresence } from './chunk-VYF7LGXZ.js';
+export { definePresence, initialsOf, participantsFromAwareness } from './chunk-VYF7LGXZ.js';
+import { defineSmartArt } from './chunk-A46H2JBV.js';
+export { defineSmartArt, renderDiagramDrawing } from './chunk-A46H2JBV.js';
+export { CONTRACT_REVISION } from './chunk-NDEB6EBU.js';
+export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-4MT4OIAJ.js';
 
 // src/index.ts
 var OFFICE_UI_TAGS = [

package/dist/presence.js

@@ -1,3 +1,3 @@
-export { definePresence, initialsOf, participantsFromAwareness } from './chunk-WKLVWPI7.js';
-import './chunk-3BHP4IFP.js';
-import './chunk-BDJW2KDI.js';
+export { definePresence, initialsOf, participantsFromAwareness } from './chunk-VYF7LGXZ.js';
+import './chunk-NDEB6EBU.js';
+import './chunk-4MT4OIAJ.js';

package/dist/ribbon.d.ts

@@ -1,7 +1,14 @@
 /**
- * Labelled group of ribbon commands: `role="group"`, `label` attribute is caption and name.
- * `launcher="<command>"` adds Office's corner dialog launcher, which emits `office-command`
- * `{ command }`; `launcher-disabled` disables it.
+ * Labelled group of ribbon commands: `role="group"`, `label` is the caption and name. `launcher`
+ * adds Office's corner dialog launcher (`launcher="<command>"` emits `office-command`
+ * `{ command }`; `launcher-label` names it; `launcher-disabled` disables it). For narrow windows
+ * an overflow controller sets `data-collapsed` (the group becomes one button showing `icon` and
+ * the label; activating it emits `office-ribbon-collapse-toggle`) and `data-open` (its commands
+ * open in a popup at `--office-ribbon-collapse-x/-y`). The group marks itself `data-compact-row`
+ * when every command is one line tall (they centre vertically) and `data-stack` when it holds only
+ * small drop-down galleries (`[mode="dropdown"]` without `data-command-large`), which stack in
+ * columns. Static `launcherEvent`/`collapseEvent` and `launcherDetail()` let a product subclass
+ * keep its published events.
  */
 export declare const defineRibbonGroup: import("./registry.js").Definer;
 /**

package/dist/smartart.js

@@ -1,3 +1,3 @@
-export { defineSmartArt, renderDiagramDrawing } from './chunk-4WUYOQRL.js';
-import './chunk-3BHP4IFP.js';
-import './chunk-BDJW2KDI.js';
+export { defineSmartArt, renderDiagramDrawing } from './chunk-A46H2JBV.js';
+import './chunk-NDEB6EBU.js';
+import './chunk-4MT4OIAJ.js';

package/dist/theme.js

@@ -1,2 +1,2 @@
-export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-7CCQN3VM.js';
-export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-BDJW2KDI.js';
+export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-F4TM7U4P.js';
+export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-4MT4OIAJ.js';

package/dist/tokens.d.ts

@@ -124,6 +124,28 @@ export declare const OFFICE_TOKENS: {
     readonly '--office-ribbon-tab-height': "35px";
     readonly '--office-ribbon-group-gap': "2px";
     readonly '--office-ribbon-group-height': "78px";
+    readonly '--office-ribbon-group-padding': "4px 8px 2px";
+    readonly '--office-ribbon-separator-inset': "0px";
+    readonly '--office-ribbon-separator': "color-mix(in srgb, var(--office-border, #d1d5db) 60%, transparent)";
+    readonly '--office-ribbon-caption-size': "10px";
+    readonly '--office-ribbon-caption-padding': "2px 0 0";
+    readonly '--office-launcher-inset-end': "-6px";
+    readonly '--office-launcher-inset-bottom': "-1px";
+    readonly '--office-ribbon-compact-row-max': "36px";
+    readonly '--office-ribbon-stack-max-height': "80px";
+    readonly '--office-ribbon-collapse-x': "8px";
+    readonly '--office-ribbon-collapse-y': "120px";
+    readonly '--office-command-icon-color': "currentColor";
+    readonly '--office-command-large-height': "66px";
+    readonly '--office-command-large-min-width': "48px";
+    readonly '--office-command-large-max-width': "80px";
+    readonly '--office-command-large-icon': "32px";
+    readonly '--office-command-small-icon': "16px";
+    readonly '--office-command-tall-height': "62px";
+    readonly '--office-command-tall-min-width': "40px";
+    readonly '--office-command-tall-icon': "30px";
+    readonly '--office-command-active': "color-mix(in srgb, var(--office-accent, #2563eb) 15%, transparent)";
+    readonly '--office-collapsed-group-min-width': "56px";
     readonly '--office-ribbon-caption-line-height': "12px";
     readonly '--office-ribbon-row-height': "22px";
     readonly '--office-ribbon-file-min-width': "52px";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ooxml-ui",
-	"version": "0.14.0",
+	"version": "0.15.0",
 	"description": "Shared, format-neutral web components and styles for the Office viewers (Word, PowerPoint, Excel)",
 	"keywords": [
 		"custom-elements",