ooxml-ui 0.2.0 → 0.4.0

package/README.md

@@ -58,20 +58,22 @@ with an incompatible build of this package.
 
 ## Features: elements
 
-| Tag                                      | Attributes / properties                                                                                         | Events (all bubble, composed)                                      |
-| ---------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
-| `office-ui-button`                       | `label`, `icon`, `command`, `disabled`, `pressed`, `expanded`, `icon-only`, `variant="stacked"`, `keyshortcuts` | `office-command` `{ command }`                                     |
-| `office-ui-checkbox`, `office-ui-switch` | `checked`, `disabled`, `value`, `aria-label`; form-associated                                                   | `input`, `change`                                                  |
-| `office-ui-select`                       | `options` `[{ value, label, disabled? }]`, `value`, `selectedIndex`, `disabled`                                 | `input`, `change`                                                  |
-| `office-ui-ribbon-group`                 | `label`; default slot                                                                                           | none                                                               |
-| `office-ui-toolbar`                      | `aria-label`, `aria-orientation`; arrow-key focus movement                                                      | none                                                               |
-| `office-ui-dialog`                       | `open`, `heading`, `dismissible="false"`, `show()`, `close()`; slots default, `footer`                          | `office-dialog-close` `{ reason }` (cancelable)                    |
-| `office-ui-status-bar` / `-status-item`  | `label`, `value`, `interactive`, `id`                                                                           | `office-status-activate` `{ id }`                                  |
-| `office-ui-zoom-slider`                  | `value` (percent), `min`, `max`, `step`, `disabled`, `fit` (fit button name), `label`                           | `input`, `change`; fit: `office-command` `{ command: 'zoom-fit' }` |
-| `office-ui-tab-strip`                    | `tabs` `[{ id, label, title? }]`, `selected`, `label`, `disabled`                                               | `office-tab-select` `{ id }` (cancelable)                          |
-| `office-ui-presence`                     | `participants`, `max`, `label`                                                                                  | `office-presence-select` `{ id }`                                  |
-| `office-ui-smartart`                     | `drawing` (core `DiagramDrawing`), `schemeColors`, `label`                                                      | `office-smartart-render` (render report)                           |
-| `office-ui-icon`                         | `name`, `label`                                                                                                 | none                                                               |
+| Tag                                      | Attributes / properties                                                                                                                           | Events (all bubble, composed)                                      |
+| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
+| `office-ui-button`                       | `label`, `icon`, `command`, `disabled`, `pressed`, `expanded`, `icon-only`, `variant="stacked"`, `keyshortcuts`                                   | `office-command` `{ command }`                                     |
+| `office-ui-checkbox`, `office-ui-switch` | `checked`, `disabled`, `value`, `aria-label`; form-associated                                                                                     | `input`, `change`                                                  |
+| `office-ui-select`                       | `options` `[{ value, label, disabled? }]`, `value`, `selectedIndex`, `disabled`                                                                   | `input`, `change`                                                  |
+| `office-ui-ribbon-group`                 | `label`, `launcher` (dialog launcher command), `launcher-disabled`; default slot                                                                  | launcher: `office-command` `{ command }`                           |
+| `office-ui-ribbon-stack`                 | `orientation="horizontal"`; default slot (three-row column of small commands by default)                                                          | none                                                               |
+| `office-ui-menu-button` / `-menu-item`   | button: `label`, `icon`, `command` (split button), `variant`, `disabled`, `keyshortcuts`; item: `command`, `label`, `icon`, `disabled`, `checked` | item choice: `office-command` `{ command }`                        |
+| `office-ui-toolbar`                      | `aria-label`, `aria-orientation`; arrow-key focus movement                                                                                        | none                                                               |
+| `office-ui-dialog`                       | `open`, `heading`, `dismissible="false"`, `show()`, `close()`; slots default, `footer`                                                            | `office-dialog-close` `{ reason }` (cancelable)                    |
+| `office-ui-status-bar` / `-status-item`  | `label`, `value`, `interactive`, `id`                                                                                                             | `office-status-activate` `{ id }`                                  |
+| `office-ui-zoom-slider`                  | `value` (percent), `min`, `max`, `step`, `disabled`, `fit` (fit button name), `label`                                                             | `input`, `change`; fit: `office-command` `{ command: 'zoom-fit' }` |
+| `office-ui-tab-strip`                    | `tabs` `[{ id, label, title? }]`, `selected`, `label`, `disabled`                                                                                 | `office-tab-select` `{ id }` (cancelable)                          |
+| `office-ui-presence`                     | `participants`, `max`, `label`                                                                                                                    | `office-presence-select` `{ id }`                                  |
+| `office-ui-smartart`                     | `drawing` (core `DiagramDrawing`), `schemeColors`, `label`                                                                                        | `office-smartart-render` (render report)                           |
+| `office-ui-icon`                         | `name`, `label`                                                                                                                                   | none                                                               |
 
 Setting a property never emits an event; only user activation does. Controls honour
 `prefers-color-scheme`, `forced-colors: active` (system colours and a visible focus ring) and

package/dist/{chunk-Y4YIYNUZ.js → chunk-PCSUQPMC.js}

@@ -28,7 +28,41 @@ var BUILT_IN = {
   fitPage: "M6.5 6.5h7v7h-7ZM2.5 6V2.5H6M14 2.5h3.5V6M17.5 14v3.5H14M6 17.5H2.5V14",
   pageWidth: "M5.5 3.5h9v13h-9ZM1.5 10h17M4 8l-2.5 2L4 12M16 8l2.5 2-2.5 2",
   zoomIn: "M3 8.5a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0M13 13l4 4M6 8.5h5M8.5 6v5",
-  zoomOut: "M3 8.5a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0M13 13l4 4M6 8.5h5"
+  zoomOut: "M3 8.5a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0M13 13l4 4M6 8.5h5",
+  cut: "M7 3l7 10M13 3 6 13M3 15.5a2 2 0 1 0 4 0 2 2 0 1 0-4 0M13 15.5a2 2 0 1 0 4 0 2 2 0 1 0-4 0",
+  paste: "M7 3.5h6v2.5H7ZM7 4.5H4.5v13h11v-13H13",
+  formatPainter: "M4 3h10v4H4ZM14 5h2.5v4.5H9.5V12M8.5 12h2v5h-2Z",
+  bold: "M6 3.5h4.5a3 3 0 0 1 0 6H6ZM6 9.5h5.5a3.5 3.5 0 0 1 0 7H6Z",
+  italic: "M9 3.5h6M5 16.5h6M12 3.5 8 16.5",
+  underline: "M6 3v6a4 4 0 0 0 8 0V3M5 17h10",
+  strikethrough: "M3.5 10h13M13.5 5.5C13 4.3 11.7 3.5 10 3.5c-2 0-3.5 1-3.5 2.6 0 1.4 1.2 2.2 3.5 2.8M6.5 13.8c.5 1.6 1.9 2.7 3.8 2.7 2 0 3.5-1.1 3.5-2.8",
+  fontColor: "M5.5 13 10 3l4.5 10M7.2 9.3h5.6M3 17h14",
+  growFont: "M2.5 16 6.5 6l4 10M4 12.3h5M13 8.5l2-3 2 3M15 5.5V12",
+  shrinkFont: "M2.5 16 6.5 6l4 10M4 12.3h5M13 9l2 3 2-3M15 12V5.5",
+  changeCase: "M2 15 5.5 5 9 15M3.2 11.7h4.6M15.5 9.5v5.5M15.5 12.2a2.3 2.3 0 1 1-4.6 0 2.3 2.3 0 1 1 4.6 0",
+  alignLeft: "M3 4.5h14M3 8.5h9M3 12.5h14M3 16.5h9",
+  alignCenter: "M3 4.5h14M5.5 8.5h9M3 12.5h14M5.5 16.5h9",
+  alignRight: "M3 4.5h14M8 8.5h9M3 12.5h14M8 16.5h9",
+  justify: "M3 4.5h14M3 8.5h14M3 12.5h14M3 16.5h14",
+  alignTop: "M3 3.5h14M6 7h8M6 10.5h8",
+  alignMiddle: "M3 10h2M15 10h2M6 6.5h8M6 13.5h8M6 10h8",
+  alignBottom: "M3 16.5h14M6 9.5h8M6 13h8",
+  bullets: "M8 5h9M8 10h9M8 15h9M3.5 5h1M3.5 10h1M3.5 15h1",
+  indentIncrease: "M3 4h14M9 8h8M9 12h8M3 16h14M3 7.5 6 10l-3 2.5",
+  indentDecrease: "M3 4h14M9 8h8M9 12h8M3 16h14M6 7.5 3 10l3 2.5",
+  fill: "M3.5 10 9 4.5l6 6L9.5 16ZM9 4.5 7 2.5M16.5 12.5s1.5 2 1.5 3a1.5 1.5 0 0 1-3 0c0-1 1.5-3 1.5-3",
+  line: "M3.5 16.5 16.5 3.5",
+  effects: "M10 2.5l1.9 4.6 4.6 1.9-4.6 1.9L10 15.5l-1.9-4.6L3.5 9l4.6-1.9Z",
+  quickStyles: "M10 3a7 7 0 1 0 0 14c1 0 1.5-.7 1.5-1.5S11 14 11 13s.8-1.5 2-1.5h2a2 2 0 0 0 2-2A7 7 0 0 0 10 3ZM6.5 9.5h.1M8.5 6.2h.1M12.5 6.5h.1",
+  bringToFront: "M7.5 7.5h9v9h-9ZM12.5 7.5v-4h-9v9h4",
+  sendToBack: "M3.5 3.5h9v9h-9ZM12.5 7.5h4v9h-9v-4",
+  group: "M3 3h5v5H3ZM12 12h5v5h-5ZM2 2h1M17 2h1M2 18h1M17 18h1",
+  alignObjects: "M3 2.5v15M6 5h8v4H6ZM6 11h11v4H6Z",
+  position: "M10 2.5v15M2.5 10h15M7.5 5 10 2.5 12.5 5M7.5 15l2.5 2.5 2.5-2.5M5 7.5 2.5 10 5 12.5M15 7.5l2.5 2.5-2.5 2.5",
+  connector: "M3.5 15.5h5v-11h8M14.5 2.5l2 2-2 2M2.5 13.5v4",
+  textBox: "M3 3h14v14H3ZM6.5 6.5h7M10 6.5v7",
+  ruler: "M2 7h16v6H2ZM5 7v3M8 7v2M11 7v3M14 7v2",
+  launcher: "M5 15 15 5M9 5h6v6"
 };
 for (const [name, d] of Object.entries(BUILT_IN)) registry.set(name, { d });
 function registerIcon(name, icon) {

package/dist/{chunk-Q2FH3CZQ.js → chunk-RYUUWQ7F.js}

@@ -1,4 +1,4 @@
-import { createIconSvg, paintIcon, defineIcon } from './chunk-Y4YIYNUZ.js';
+import { createIconSvg, paintIcon, defineIcon } from './chunk-PCSUQPMC.js';
 import { definer, attachStyles, controlCss, emit } from './chunk-EY266IK3.js';
 
 // src/button.ts
@@ -353,6 +353,317 @@ var defineDialog = definer("office-ui-dialog", () => {
   return OfficeUiDialog;
 });
 
+// src/menu.ts
+var BUTTON_CSS = `
+:host { display: inline-flex; vertical-align: middle; }
+.wrap { display: inline-flex; align-items: stretch; border: 1px solid transparent; border-radius: var(--office-radius, 4px); }
+:host([variant="stacked"]) .wrap { flex-direction: column; }
+button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
+	min-width: var(--office-target-size, 28px); min-height: var(--office-target-size, 28px); padding: 0 6px;
+	border: 0; border-radius: var(--office-radius, 4px); background: transparent; color: var(--office-foreground, #1f2937);
+	font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
+:host([variant="stacked"]) .main { flex-direction: column; padding: 4px 6px 0; }
+:host([variant="stacked"]) .caret { min-height: 16px; padding: 0 6px 2px; }
+:host([variant="stacked"]:not([command])) .main { padding-bottom: 0; }
+.wrap:hover:not(.disabled) { border-color: var(--office-border, #d1d5db); }
+button:hover:not(:disabled) { background: var(--office-surface, #f3f4f6); }
+button:focus-visible { outline: 2px solid var(--office-ring, #2563eb); outline-offset: -2px; }
+button:disabled { opacity: .5; cursor: not-allowed; }
+button[aria-expanded="true"] { background: var(--office-surface, #f3f4f6); }
+.caret svg { width: 12px; height: 12px; }
+svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5;
+	stroke-linecap: round; stroke-linejoin: round; }
+svg:not([data-painted]) { display: none; }
+.panel { position: fixed; inset: auto; margin: 0; min-width: 180px; padding: 4px; box-sizing: border-box;
+	background: var(--office-background, #fff); color: var(--office-foreground, #1f2937);
+	border: 1px solid var(--office-border, #d1d5db); border-radius: var(--office-radius, 4px);
+	box-shadow: 0 8px 24px rgb(0 0 0 / 18%); }
+.panel[hidden] { display: none; }
+@media (forced-colors: active) {
+	button { color: ButtonText; } button:disabled { color: GrayText; }
+	.panel { border-color: CanvasText; background: Canvas; color: CanvasText; }
+}
+`;
+var ITEM_CSS = `
+:host { display: block; }
+:host([hidden]) { display: none; }
+button { box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%;
+	min-height: var(--office-target-size, 28px); padding: 0 10px 0 8px; border: 0; border-radius: 3px;
+	background: transparent; color: inherit; font: inherit; font-size: 12px; text-align: start; cursor: pointer; }
+button:hover:not(:disabled), button:focus-visible { background: var(--office-surface, #f3f4f6); outline: none; }
+button:disabled { opacity: .5; cursor: not-allowed; }
+.check { width: 14px; text-align: center; }
+svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5;
+	stroke-linecap: round; stroke-linejoin: round; }
+svg:not([data-painted]) { visibility: hidden; }
+@media (forced-colors: active) { button:focus-visible { background: Highlight; color: HighlightText; } }
+`;
+var ENABLED_ITEMS = "office-ui-menu-item:not([disabled]):not([hidden])";
+var defineMenuItem = definer("office-ui-menu-item", () => {
+  class OfficeUiMenuItem extends HTMLElement {
+    static observedAttributes = ["label", "icon", "command", "disabled", "checked", "title"];
+    button;
+    svg;
+    text;
+    mark;
+    constructor() {
+      super();
+      const doc = this.ownerDocument;
+      const root = this.attachShadow({ mode: "open", delegatesFocus: true });
+      attachStyles(root, controlCss(ITEM_CSS));
+      this.button = doc.createElement("button");
+      this.button.type = "button";
+      this.button.tabIndex = -1;
+      this.mark = doc.createElement("span");
+      this.mark.className = "check";
+      this.mark.setAttribute("aria-hidden", "true");
+      this.svg = createIconSvg(doc);
+      this.text = doc.createElement("span");
+      this.button.append(this.mark, this.svg, this.text);
+      root.append(this.button);
+      this.button.addEventListener("click", () => {
+        const command = this.getAttribute("command");
+        if (!this.button.disabled && command) emit(this, "office-command", { command });
+      });
+    }
+    connectedCallback() {
+      this.sync();
+    }
+    attributeChangedCallback() {
+      this.sync();
+    }
+    get disabled() {
+      return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+      this.toggleAttribute("disabled", Boolean(value));
+    }
+    /** Focus the menuitem itself, so arrow navigation never depends on delegatesFocus. */
+    focus(options) {
+      this.button.focus(options);
+    }
+    sync() {
+      const checked = this.getAttribute("checked");
+      this.button.setAttribute("role", checked === null ? "menuitem" : "menuitemcheckbox");
+      if (checked === null) this.button.removeAttribute("aria-checked");
+      else this.button.setAttribute("aria-checked", String(checked !== "false"));
+      this.mark.textContent = checked !== null && checked !== "false" ? "\u2713" : "";
+      this.text.textContent = this.getAttribute("label") ?? "";
+      this.button.title = this.getAttribute("title") ?? "";
+      this.button.disabled = this.disabled;
+      if (paintIcon(this.svg, this.getAttribute("icon"))) this.svg.setAttribute("data-painted", "");
+      else this.svg.removeAttribute("data-painted");
+    }
+  }
+  return OfficeUiMenuItem;
+});
+var defineMenuButton = definer("office-ui-menu-button", () => {
+  class OfficeUiMenuButton extends HTMLElement {
+    static observedAttributes = [
+      "label",
+      "icon",
+      "command",
+      "disabled",
+      "title",
+      "keyshortcuts",
+      "icon-only"
+    ];
+    wrap;
+    main;
+    caret;
+    svg;
+    text;
+    panel;
+    outside;
+    constructor() {
+      super();
+      const doc = this.ownerDocument;
+      const root = this.attachShadow({ mode: "open" });
+      attachStyles(root, controlCss(BUTTON_CSS));
+      this.wrap = doc.createElement("div");
+      this.wrap.className = "wrap";
+      this.main = doc.createElement("button");
+      this.main.type = "button";
+      this.main.className = "main";
+      this.main.setAttribute("part", "button");
+      this.svg = createIconSvg(doc);
+      this.text = doc.createElement("span");
+      this.main.append(this.svg, this.text);
+      this.caret = doc.createElement("button");
+      this.caret.type = "button";
+      this.caret.className = "caret";
+      this.caret.setAttribute("aria-haspopup", "menu");
+      this.caret.setAttribute("aria-expanded", "false");
+      const chevron = createIconSvg(doc);
+      paintIcon(chevron, "chevronDown");
+      chevron.setAttribute("data-painted", "");
+      this.caret.append(chevron);
+      this.panel = doc.createElement("div");
+      this.panel.className = "panel";
+      this.panel.setAttribute("role", "menu");
+      if (typeof this.panel.showPopover === "function")
+        this.panel.setAttribute("popover", "auto");
+      else this.panel.hidden = true;
+      this.panel.append(doc.createElement("slot"));
+      this.wrap.append(this.main, this.caret);
+      root.append(this.wrap, this.panel);
+      this.main.addEventListener("click", () => {
+        const command = this.getAttribute("command");
+        if (this.disabled) return;
+        if (command) emit(this, "office-command", { command });
+        else this.toggle();
+      });
+      this.caret.addEventListener("click", () => {
+        if (!this.disabled) this.toggle();
+      });
+      for (const trigger of [this.main, this.caret])
+        trigger.addEventListener("keydown", (event) => {
+          if (event.key === "ArrowDown" && !this.disabled) {
+            event.preventDefault();
+            this.show(0);
+          }
+        });
+      this.panel.addEventListener("toggle", (event) => {
+        if (event.newState === "closed") this.closed();
+      });
+      this.panel.addEventListener("keydown", (event) => this.onMenuKey(event));
+      this.addEventListener("office-command", (event) => {
+        if (event.target !== this) this.hide(true);
+      });
+    }
+    connectedCallback() {
+      this.sync();
+    }
+    disconnectedCallback() {
+      this.hide(false);
+    }
+    attributeChangedCallback() {
+      this.sync();
+    }
+    get disabled() {
+      return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+      this.toggleAttribute("disabled", Boolean(value));
+    }
+    get open() {
+      return this.caret.getAttribute("aria-expanded") === "true";
+    }
+    items() {
+      return [...this.querySelectorAll(ENABLED_ITEMS)];
+    }
+    toggle() {
+      if (this.open) this.hide(true);
+      else this.show(0);
+    }
+    show(focusIndex) {
+      const anchor = this.wrap.getBoundingClientRect();
+      this.panel.style.left = `${Math.round(anchor.left)}px`;
+      this.panel.style.top = `${Math.round(anchor.bottom + 2)}px`;
+      if (this.panel.hasAttribute("popover")) this.panel.showPopover?.();
+      else {
+        this.panel.hidden = false;
+        this.outside = (event) => {
+          if (!event.composedPath().includes(this)) this.hide(false);
+        };
+        this.ownerDocument.addEventListener("pointerdown", this.outside, true);
+      }
+      this.setExpanded(true);
+      this.place(anchor);
+      this.items()[focusIndex]?.focus();
+    }
+    /** Keep the open menu inside the viewport: flip left of the trigger's right edge if needed. */
+    place(anchor) {
+      const view = this.ownerDocument.defaultView;
+      const width = this.panel.offsetWidth;
+      const height = this.panel.offsetHeight;
+      if (!view || !width) return;
+      const maxLeft = view.innerWidth - width - 4;
+      const left = anchor.left > maxLeft ? Math.max(4, anchor.right - width) : anchor.left;
+      const top = anchor.bottom + 2 + height > view.innerHeight && anchor.top - height - 2 > 0 ? anchor.top - height - 2 : anchor.bottom + 2;
+      this.panel.style.left = `${Math.round(Math.min(left, Math.max(4, maxLeft)))}px`;
+      this.panel.style.top = `${Math.round(top)}px`;
+    }
+    hide(restoreFocus) {
+      if (!this.open) return;
+      if (this.panel.hasAttribute("popover")) {
+        try {
+          this.panel.hidePopover?.();
+        } catch {
+        }
+      }
+      this.closed();
+      if (restoreFocus) (this.getAttribute("command") ? this.caret : this.main).focus();
+    }
+    closed() {
+      if (!this.panel.hasAttribute("popover")) this.panel.hidden = true;
+      if (this.outside) this.ownerDocument.removeEventListener("pointerdown", this.outside, true);
+      this.outside = void 0;
+      this.setExpanded(false);
+    }
+    setExpanded(open) {
+      this.caret.setAttribute("aria-expanded", String(open));
+      if (this.hasAttribute("command")) this.main.removeAttribute("aria-expanded");
+      else this.main.setAttribute("aria-expanded", String(open));
+    }
+    onMenuKey(event) {
+      const items = this.items();
+      const from = items.findIndex(
+        (item) => item === event.target || item.contains(event.target)
+      );
+      const move = (index) => {
+        event.preventDefault();
+        items[(index + items.length) % items.length]?.focus();
+      };
+      if (event.key === "ArrowDown") move(from + 1);
+      else if (event.key === "ArrowUp") move(from - 1);
+      else if (event.key === "Home") move(0);
+      else if (event.key === "End") move(items.length - 1);
+      else if (event.key === "Escape") {
+        event.preventDefault();
+        this.hide(true);
+      } else if (event.key === "Tab") this.hide(false);
+    }
+    sync() {
+      const label = this.getAttribute("label") ?? "";
+      const split = this.hasAttribute("command");
+      const iconOnly = this.hasAttribute("icon-only");
+      this.text.textContent = label;
+      this.text.hidden = iconOnly;
+      if (iconOnly) this.main.setAttribute("aria-label", label);
+      else this.main.removeAttribute("aria-label");
+      const title = this.getAttribute("title") ?? label;
+      this.main.title = title;
+      this.caret.title = split ? `${label} options` : title;
+      if (split) {
+        this.caret.setAttribute("aria-label", `${label} options`);
+        this.caret.removeAttribute("aria-hidden");
+      } else {
+        this.caret.removeAttribute("aria-label");
+        this.caret.setAttribute("aria-hidden", "true");
+      }
+      if (split) {
+        this.main.removeAttribute("aria-haspopup");
+        this.main.removeAttribute("aria-expanded");
+        this.caret.tabIndex = 0;
+      } else {
+        this.main.setAttribute("aria-haspopup", "menu");
+        this.main.setAttribute("aria-expanded", String(this.open));
+        this.caret.tabIndex = -1;
+      }
+      const shortcuts = this.getAttribute("keyshortcuts");
+      if (shortcuts) this.main.setAttribute("aria-keyshortcuts", shortcuts);
+      else this.main.removeAttribute("aria-keyshortcuts");
+      this.main.disabled = this.caret.disabled = this.disabled;
+      this.wrap.classList.toggle("disabled", this.disabled);
+      if (this.disabled) this.hide(false);
+      if (paintIcon(this.svg, this.getAttribute("icon"))) this.svg.setAttribute("data-painted", "");
+      else this.svg.removeAttribute("data-painted");
+    }
+  }
+  return OfficeUiMenuButton;
+});
+
 // src/ribbon.ts
 var GROUP_CSS = `
 :host { display: inline-flex; flex: none; align-self: stretch; }
@@ -362,14 +673,25 @@ var GROUP_CSS = `
 :host(:last-child) .group { border-inline-end: 0; }
 .row { display: flex; align-items: flex-start; gap: 4px; }
 ::slotted(*) { flex-shrink: 0; }
-.caption { padding-top: 2px; color: var(--office-muted-foreground, #6b7280); font-size: 10px;
+.foot { position: relative; display: flex; justify-content: center; padding-top: 2px; }
+.caption { color: var(--office-muted-foreground, #6b7280); font-size: 10px;
 	line-height: 12px; text-align: center; white-space: nowrap; }
+.launcher { position: absolute; inset-inline-end: -6px; bottom: -1px; display: inline-grid; place-items: center;
+	width: 16px; height: 14px; padding: 0; border: 0; border-radius: 2px; background: transparent;
+	color: var(--office-muted-foreground, #6b7280); cursor: pointer; }
+.launcher:hover:not(:disabled) { background: var(--office-surface, #f3f4f6); }
+.launcher:focus-visible { outline: 2px solid var(--office-ring, #2563eb); }
+.launcher:disabled { opacity: .45; cursor: not-allowed; }
+.launcher[hidden] { display: none; }
+.launcher svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6;
+	stroke-linecap: round; stroke-linejoin: round; }
 @media (forced-colors: active) { .group { border-inline-end-color: CanvasText; } .caption { color: CanvasText; } }
 `;
 var defineRibbonGroup = definer("office-ui-ribbon-group", () => {
   class OfficeUiRibbonGroup extends HTMLElement {
-    static observedAttributes = ["label"];
+    static observedAttributes = ["label", "launcher", "launcher-disabled"];
     caption;
+    launcher;
     constructor() {
       super();
       const doc = this.ownerDocument;
@@ -382,7 +704,20 @@ var defineRibbonGroup = definer("office-ui-ribbon-group", () => {
       row.append(doc.createElement("slot"));
       this.caption = doc.createElement("span");
       this.caption.className = "caption";
-      group.append(row, this.caption);
+      this.launcher = doc.createElement("button");
+      this.launcher.type = "button";
+      this.launcher.className = "launcher";
+      const glyph = createIconSvg(doc);
+      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 });
+      });
+      const foot = doc.createElement("div");
+      foot.className = "foot";
+      foot.append(this.caption, this.launcher);
+      group.append(row, foot);
       root.append(group);
     }
     connectedCallback() {
@@ -396,6 +731,10 @@ var defineRibbonGroup = definer("office-ui-ribbon-group", () => {
       const label = this.getAttribute("label") ?? "";
       this.caption.textContent = label;
       this.setAttribute("aria-label", label);
+      this.launcher.hidden = !this.getAttribute("launcher");
+      this.launcher.disabled = this.hasAttribute("launcher-disabled");
+      this.launcher.setAttribute("aria-label", `${label} options`);
+      this.launcher.title = `${label} options`;
     }
   }
   return OfficeUiRibbonGroup;
@@ -405,7 +744,24 @@ var TOOLBAR_CSS = `
 	background: var(--office-surface, #f3f4f6); border-bottom: 1px solid var(--office-border, #d1d5db); }
 @media (forced-colors: active) { :host { border-bottom-color: CanvasText; background: Canvas; } }
 `;
-var ITEM = "office-ui-button, office-ui-select, office-ui-checkbox, office-ui-switch";
+var STACK_CSS = `
+:host { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
+	gap: 1px; align-self: stretch; }
+:host([orientation="horizontal"]) { flex-direction: row; align-items: center; gap: 2px; align-self: auto; }
+::slotted(*) { flex-shrink: 0; }
+`;
+var defineRibbonStack = definer("office-ui-ribbon-stack", () => {
+  class OfficeUiRibbonStack extends HTMLElement {
+    constructor() {
+      super();
+      const root = this.attachShadow({ mode: "open" });
+      attachStyles(root, controlCss(STACK_CSS));
+      root.append(this.ownerDocument.createElement("slot"));
+    }
+  }
+  return OfficeUiRibbonStack;
+});
+var ITEM = "office-ui-button, office-ui-menu-button, office-ui-select, office-ui-checkbox, office-ui-switch";
 var defineToolbar = definer("office-ui-toolbar", () => {
   class OfficeUiToolbar extends HTMLElement {
     constructor() {
@@ -664,7 +1020,7 @@ var defineStatusBar = definer("office-ui-status-bar", () => {
   }
   return OfficeUiStatusBar;
 });
-var ITEM_CSS = `
+var ITEM_CSS2 = `
 :host { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
 .label { color: var(--office-muted-foreground, #6b7280); }
 button { all: unset; display: inline-flex; gap: 4px; align-items: center; cursor: pointer; padding: 0 4px;
@@ -680,7 +1036,7 @@ var defineStatusItem = definer("office-ui-status-item", () => {
     constructor() {
       super();
       this.root = this.attachShadow({ mode: "open", delegatesFocus: true });
-      attachStyles(this.root, controlCss(ITEM_CSS));
+      attachStyles(this.root, controlCss(ITEM_CSS2));
     }
     connectedCallback() {
       this.render();
@@ -1033,6 +1389,9 @@ var CONTROL_DEFINERS = [
   defineSwitch,
   defineSelect,
   defineRibbonGroup,
+  defineRibbonStack,
+  defineMenuItem,
+  defineMenuButton,
   defineToolbar,
   defineDialog,
   defineStatusBar,
@@ -1044,4 +1403,4 @@ function registerControls(registry) {
   for (const define of CONTROL_DEFINERS) define(registry);
 }
 
-export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineDialog, defineRibbonGroup, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls };
+export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineDialog, defineMenuButton, defineMenuItem, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls };

package/dist/controls.d.ts

@@ -2,18 +2,19 @@ import { defineButton } from './button.js';
 import { defineCheckbox, defineSwitch } from './checkable.js';
 import { defineDialog } from './dialog.js';
 import { defineIcon } from './icons.js';
-import { defineRibbonGroup, defineToolbar } from './ribbon.js';
+import { defineMenuButton, defineMenuItem } from './menu.js';
+import { defineRibbonGroup, defineRibbonStack, defineToolbar } from './ribbon.js';
 import { defineSelect } from './select.js';
 import { defineStatusBar, defineStatusItem } from './status-bar.js';
 import { defineTabStrip } from './tab-strip.js';
 import { defineZoomSlider } from './zoom-slider.js';
-export { defineButton, defineCheckbox, defineDialog, defineIcon, defineRibbonGroup, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, };
+export { defineButton, defineCheckbox, defineDialog, defineIcon, defineMenuButton, defineMenuItem, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, };
 export type { OfficeCommandEvent } from './button.js';
 export type { OfficeDialogCloseEvent, OfficeDialogCloseReason } from './dialog.js';
 export type { OfficeSelectOption } from './select.js';
 export type { OfficeStatusActivateEvent } from './status-bar.js';
 export type { OfficeTab, OfficeTabSelectEvent } from './tab-strip.js';
 /** Every control of this entry. */
-export declare const CONTROL_DEFINERS: readonly [import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer];
+export declare const CONTROL_DEFINERS: readonly [import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer];
 /** Idempotent, SSR-safe (no-op without a DOM). */
 export declare function registerControls(registry?: CustomElementRegistry): void;

package/dist/controls.js

@@ -1,3 +1,3 @@
-export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineDialog, defineRibbonGroup, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls } from './chunk-Q2FH3CZQ.js';
-export { defineIcon } from './chunk-Y4YIYNUZ.js';
+export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineDialog, defineMenuButton, defineMenuItem, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls } from './chunk-RYUUWQ7F.js';
+export { defineIcon } from './chunk-PCSUQPMC.js';
 import './chunk-EY266IK3.js';

package/dist/icons.js

@@ -1,2 +1,2 @@
-export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-Y4YIYNUZ.js';
+export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-PCSUQPMC.js';
 import './chunk-EY266IK3.js';

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export * from './smartart.js';
 export * from './theme.js';
 export { CONTRACT_REVISION, type Definer } from './registry.js';
 /** Every ooxml-ui tag this package defines, in registration order. */
-export declare const OFFICE_UI_TAGS: readonly ["office-ui-icon", "office-ui-button", "office-ui-checkbox", "office-ui-switch", "office-ui-select", "office-ui-ribbon-group", "office-ui-toolbar", "office-ui-dialog", "office-ui-status-bar", "office-ui-status-item", "office-ui-zoom-slider", "office-ui-tab-strip", "office-ui-presence", "office-ui-smartart"];
+export declare const OFFICE_UI_TAGS: readonly ["office-ui-icon", "office-ui-button", "office-ui-checkbox", "office-ui-switch", "office-ui-select", "office-ui-ribbon-group", "office-ui-ribbon-stack", "office-ui-menu-item", "office-ui-menu-button", "office-ui-toolbar", "office-ui-dialog", "office-ui-status-bar", "office-ui-status-item", "office-ui-zoom-slider", "office-ui-tab-strip", "office-ui-presence", "office-ui-smartart"];
 /**
  * Install the theme tokens and define every element. Idempotent and safe to call from every
  * viewer binding; a no-op where there is no DOM (SSR).

package/dist/index.js

@@ -1,8 +1,8 @@
 import { installOfficeUiTheme } from './chunk-H4KFVIGT.js';
 export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-H4KFVIGT.js';
-import { registerControls } from './chunk-Q2FH3CZQ.js';
-export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineDialog, defineRibbonGroup, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls } from './chunk-Q2FH3CZQ.js';
-export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-Y4YIYNUZ.js';
+import { registerControls } from './chunk-RYUUWQ7F.js';
+export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineDialog, defineMenuButton, defineMenuItem, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls } from './chunk-RYUUWQ7F.js';
+export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-PCSUQPMC.js';
 import { definePresence } from './chunk-RLPL7Q6J.js';
 export { definePresence, initialsOf, participantsFromAwareness } from './chunk-RLPL7Q6J.js';
 import { defineSmartArt } from './chunk-KJV76AB7.js';
@@ -17,6 +17,9 @@ var OFFICE_UI_TAGS = [
   "office-ui-switch",
   "office-ui-select",
   "office-ui-ribbon-group",
+  "office-ui-ribbon-stack",
+  "office-ui-menu-item",
+  "office-ui-menu-button",
   "office-ui-toolbar",
   "office-ui-dialog",
   "office-ui-status-bar",

package/dist/menu.d.ts

@@ -0,0 +1,15 @@
+/**
+ * One menu entry: `command`, `label`, `icon`, `disabled`, `checked` (renders a
+ * `menuitemcheckbox`), `title`. Activation emits `office-command` `{ command }`.
+ */
+export declare const defineMenuItem: import("./registry.js").Definer;
+/**
+ * Dropdown command with a menu of `office-ui-menu-item` children (Office's Find, Layers,
+ * Align). With a `command` attribute it is a split button: the main part emits that command
+ * and the caret opens the menu. Attributes: `label`, `icon`, `command`, `variant="stacked"`, `icon-only`,
+ * `disabled`, `title`, `keyshortcuts`. The menu uses the top layer (`popover`) so ribbon
+ * overflow never clips it. Keyboard: Enter, Space or ArrowDown open; arrows, Home and End move;
+ * Escape and Tab close; focus returns to the trigger. Choosing an item closes the menu; its
+ * `office-command` bubbles to the host.
+ */
+export declare const defineMenuButton: import("./registry.js").Definer;

package/dist/ribbon.d.ts

@@ -1,5 +1,14 @@
-/** Labelled group of ribbon commands: `role="group"`, `label` attribute is caption and name. */
+/**
+ * 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.
+ */
 export declare const defineRibbonGroup: import("./registry.js").Definer;
+/**
+ * Layout for small ribbon commands: a column (Office's three-row stack of Cut, Copy and Format
+ * Painter) or, with `orientation="horizontal"`, a row (Bold, Italic, Underline). Not a group.
+ */
+export declare const defineRibbonStack: import("./registry.js").Definer;
 /**
  * `role="toolbar"` container. Left/Right/Home/End move focus between enabled direct or
  * group-nested controls (Up/Down instead when `aria-orientation="vertical"`).

package/package.json

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