ooxml-ui 0.24.0 → 0.26.0

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

@@ -4,8 +4,8 @@ import { type OfficeTitleBarCommand, type OfficeTitleBarPlacement, type OfficeTi
 export * from './title-bar-types.js';
 /**
  * `<office-ui-title-bar>`: Office's title bar above the ribbon (app mark, AutoSave, Quick
- * Access Toolbar, file name and status, centred command search, `collaboration` and `account`
- * slots). Controlled: set `state` (`OfficeTitleBarState`, every string translated); the bar
+ * Access Toolbar, file name and status, centred command search, `actions`, `collaboration` and
+ * `account` slots). Controlled: set `state` (`OfficeTitleBarState`, every string translated); the bar
  * owns no effects. `placement="belowRibbon"` renders only the Quick Access row and hides
  * itself (`data-empty`) while that row is empty. Events (bubbling, composed; static names let a
  * product subclass keep its published ones): `office-autosave-toggle`, `office-command`

package/dist/{chunk-FWZIVXAV.js → chunk-4R4CHY5X.js}

@@ -1,7 +1,7 @@
 import { createIconSvg, paintIcon, getIcon } from './chunk-HZ422LTR.js';
-import { initialsOf } from './chunk-XQWRKHC2.js';
-import { OfficeElement, controlStyles, definer, valueOn, flag, present, triState, withTokens } from './chunk-PCZJV6HQ.js';
-import { tok, OFFICE_TOKENS } from './chunk-HSJH6SUW.js';
+import { initialsOf } from './chunk-V6W5DKJ6.js';
+import { OfficeElement, controlStyles, definer, valueOn, flag, present, triState, withTokens } from './chunk-ZWBP2WTC.js';
+import { tok, OFFICE_TOKENS } from './chunk-7Q7ZS2CC.js';
 import { html, LitElement, nothing, render, svg } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -1059,7 +1059,7 @@ var OfficeUiPrintPreview = class extends OfficeElement {
 var definePrintPreview = definer("office-ui-print-preview", () => OfficeUiPrintPreview);
 
 // raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/ribbon/ribbon-tabs.css?raw
-var ribbon_tabs_default = ":host {\n	display: block;\n	min-width: 0;\n}\n.head {\n	display: flex;\n	align-items: stretch;\n	min-width: 0;\n	border-bottom: var(--office-border-width) solid var(--office-border);\n}\n.file {\n	flex: none;\n	min-height: var(--office-ribbon-tab-height);\n	margin: 0 var(--office-space-1) 0 0;\n	padding: var(--office-space-1-5) var(--office-space-4);\n	border: 0;\n	border-radius: 0;\n	background: var(--office-accent);\n	color: var(--office-accent-foreground);\n	font: inherit;\n	font-size: var(--office-font-size);\n	cursor: pointer;\n}\n.file:hover {\n	background: var(--office-accent-hover);\n}\n.file[hidden] {\n	display: none;\n}\n[role='tablist'] {\n	display: flex;\n	flex: 0 1 auto;\n	align-items: stretch;\n	min-width: 0;\n	overflow-x: auto;\n	scrollbar-width: none;\n}\n[role='tab'] {\n	position: relative;\n	flex: none;\n	min-height: var(--office-ribbon-tab-height);\n	padding: var(--office-space-1-5) var(--office-space-3);\n	border: 0;\n	border-radius: 0;\n	background: transparent;\n	color: var(--office-muted-foreground);\n	font: inherit;\n	font-size: var(--office-font-size);\n	cursor: pointer;\n}\n[role='tab']:hover {\n	color: var(--office-foreground);\n	background: var(--office-surface);\n}\n[role='tab'][aria-selected='true'] {\n	color: var(--office-accent);\n}\n[role='tab'][aria-selected='true']::after {\n	content: '';\n	position: absolute;\n	inset: auto 0 0;\n	height: var(--office-tab-indicator-width);\n	background: var(--office-accent);\n}\n.file:focus-visible,\n[role='tab']:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(-1 * var(--office-focus-width));\n}\n::slotted([slot='search']) {\n	align-self: center;\n}\n\n@media (max-width: 760px), (pointer: coarse) {\n	.file,\n	[role='tab'] {\n		min-height: var(--office-target-size-touch);\n	}\n	.file {\n		min-width: var(--office-ribbon-file-min-width);\n	}\n}\n@media (forced-colors: active) {\n	.file {\n		border: var(--office-border-width) solid ButtonText;\n	}\n	[role='tab'][aria-selected='true']::after {\n		background: Highlight;\n	}\n}\n";
+var ribbon_tabs_default = ":host {\n	display: block;\n	min-width: 0;\n}\n.head {\n	display: flex;\n	align-items: stretch;\n	min-width: 0;\n	border-bottom: var(--office-border-width) solid var(--office-border);\n}\n.file {\n	flex: none;\n	min-height: var(--office-ribbon-tab-height);\n	margin: 0 var(--office-space-1) 0 0;\n	padding: var(--office-space-1-5) var(--office-space-4);\n	border: 0;\n	border-radius: 0;\n	background: var(--office-accent);\n	color: var(--office-accent-foreground);\n	font: inherit;\n	font-size: var(--office-font-size);\n	cursor: pointer;\n}\n.file:hover {\n	background: var(--office-accent-hover);\n}\n.file[hidden] {\n	display: none;\n}\n[role='tablist'] {\n	display: flex;\n	flex: 0 1 auto;\n	align-items: stretch;\n	min-width: 0;\n	overflow-x: auto;\n	scrollbar-width: none;\n}\n[role='tab'] {\n	position: relative;\n	flex: none;\n	min-height: var(--office-ribbon-tab-height);\n	padding: var(--office-space-1-5) var(--office-space-3);\n	border: 0;\n	border-radius: 0;\n	background: transparent;\n	color: var(--office-muted-foreground);\n	font: inherit;\n	font-size: var(--office-font-size);\n	cursor: pointer;\n}\n[role='tab']:hover {\n	color: var(--office-foreground);\n	background: var(--office-surface);\n}\n[role='tab'][aria-selected='true'] {\n	color: var(--office-accent);\n}\n[role='tab'][aria-selected='true']::after {\n	content: '';\n	position: absolute;\n	inset: auto 0 0;\n	height: var(--office-tab-indicator-width);\n	background: var(--office-accent);\n}\n[role='tab'][data-contextual],\n[role='tab'][data-contextual][aria-selected='true'] {\n	color: var(--office-ribbon-contextual);\n}\n[role='tab'][data-contextual][aria-selected='true']::after {\n	background: var(--office-ribbon-contextual);\n}\n.file:focus-visible,\n[role='tab']:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(-1 * var(--office-focus-width));\n}\n::slotted([slot='search']) {\n	align-self: center;\n}\n\n.collapse {\n	flex: none;\n	align-self: center;\n	width: var(--office-target-size);\n	height: var(--office-target-size);\n	margin-inline: auto var(--office-space-1);\n	padding: 0;\n	border: 0;\n	border-radius: var(--office-radius-sm);\n	background: none;\n	color: var(--office-muted-foreground);\n	cursor: pointer;\n}\n.collapse[hidden] {\n	display: none;\n}\n.collapse:hover {\n	background: var(--office-surface);\n}\n.collapse:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n}\n.collapse .glyph {\n	width: var(--office-icon-size);\n	height: var(--office-icon-size);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: 1.5;\n	transform: rotate(90deg);\n}\n.collapse[aria-pressed='true'] .glyph {\n	transform: rotate(-90deg);\n}\n:host([collapsed][peek]) {\n	position: relative;\n}\n:host([collapsed][peek]) ::slotted([data-ribbon-tab]:not([hidden])) {\n	position: absolute;\n	inset: 100% 0 auto;\n	z-index: 60;\n	border-bottom: var(--office-border-width) solid var(--office-border);\n	background: var(--office-background);\n	box-shadow: var(--office-shadow);\n}\n\n@media (max-width: 760px), (pointer: coarse) {\n	.file,\n	[role='tab'] {\n		min-height: var(--office-target-size-touch);\n	}\n	.file {\n		min-width: var(--office-ribbon-file-min-width);\n	}\n}\n@media (forced-colors: active) {\n	.file {\n		border: var(--office-border-width) solid ButtonText;\n	}\n	[role='tab'][aria-selected='true']::after {\n		background: Highlight;\n	}\n}\n";
 
 // src/ribbon/ribbon-tabs.ts
 var OfficeUiRibbon = class extends OfficeElement {
@@ -1072,6 +1072,10 @@ var OfficeUiRibbon = class extends OfficeElement {
     noFile: { attribute: "no-file", ...flag },
     fileExpanded: { attribute: "file-expanded", type: String },
     fileKeytip: { attribute: "file-keytip", type: String },
+    collapsible: flag,
+    collapsed: flag,
+    peek: flag,
+    collapseLabel: { attribute: "collapse-label", type: String },
     tabs: { state: true }
   };
   chosen = null;
@@ -1082,10 +1086,16 @@ var OfficeUiRibbon = class extends OfficeElement {
     this.noFile = false;
     this.fileExpanded = null;
     this.fileKeytip = null;
+    this.collapsible = false;
+    this.collapsed = false;
+    this.peek = false;
+    this.collapseLabel = null;
     this.tabs = [];
   }
   get selected() {
-    return this.chosen ?? this.panels()[0]?.dataset.ribbonTab ?? "";
+    const shown = this.shown();
+    const chosen = shown.find((panel) => panel.dataset.ribbonTab === this.chosen);
+    return chosen?.dataset.ribbonTab ?? shown[0]?.dataset.ribbonTab ?? "";
   }
   set selected(tab) {
     this.chosen = tab;
@@ -1100,20 +1110,47 @@ var OfficeUiRibbon = class extends OfficeElement {
   focusTab() {
     this.renderRoot.querySelector('[role="tab"][aria-selected="true"]')?.focus();
   }
+  /** The rendered tab button of `tab`, or null before the first render. */
+  tabButton(tab) {
+    return this.renderRoot.querySelector(`[role="tab"][data-tab="${tab}"]`);
+  }
+  /** The rendered File button, or null before the first render. */
+  fileButton() {
+    return this.renderRoot.querySelector(".file");
+  }
+  /**
+   * Hide or show the tab of panel `tab` for one reason (`contextual`, `custom`, ...). The tab shows
+   * only while no reason hides it, so a table's tools and a customisation do not undo each other.
+   */
+  setTabHidden(tab, reason, hidden) {
+    const panel = this.panels().find((item) => item.dataset.ribbonTab === tab);
+    if (!panel) return;
+    const reasons = new Set((panel.dataset.tabHiddenBy ?? "").split(" ").filter(Boolean));
+    if (hidden) reasons.add(reason);
+    else reasons.delete(reason);
+    if (reasons.size) panel.dataset.tabHiddenBy = [...reasons].join(" ");
+    else delete panel.dataset.tabHiddenBy;
+    panel.toggleAttribute("data-tab-hidden", reasons.size > 0);
+  }
   panels() {
     return [...this.children].filter(
       (child) => child instanceof HTMLElement && !!child.dataset.ribbonTab
     );
   }
+  /** The panels that have a tab: those not marked `data-tab-hidden`. */
+  shown() {
+    return this.panels().filter((panel) => panel.dataset.tabHidden === void 0);
+  }
   /** Read the tabs off the panels (on connection and whenever the slotted panels change). */
   build() {
-    this.tabs = this.panels().map((panel) => {
+    this.tabs = this.shown().map((panel) => {
       const id = panel.dataset.ribbonTab;
       panel.setAttribute("role", "tabpanel");
       panel.setAttribute("aria-label", panel.dataset.label ?? id);
       return {
         id,
         label: panel.dataset.label ?? id,
+        contextual: panel.dataset.contextual !== void 0,
         ...panel.dataset.tabKeytip ? {
           keytip: panel.dataset.tabKeytip,
           ...panel.id ? { keytipPanel: panel.id } : {}
@@ -1121,7 +1158,35 @@ var OfficeUiRibbon = class extends OfficeElement {
       };
     });
   }
+  setCollapsed(value) {
+    if (value === this.collapsed) return;
+    this.collapsed = value;
+    this.peek = false;
+    this.fire("office-ribbon-collapse", { collapsed: value });
+  }
+  onOutside = (event) => {
+    if (!event.composedPath().includes(this)) this.peek = false;
+  };
+  onTabDoubleClick(event) {
+    if (this.collapsible && event.target.closest?.('[role="tab"]'))
+      this.setCollapsed(!this.collapsed);
+  }
+  /** A command run from an overlaid panel closes it; a menu opener keeps it open. */
+  onPanelClick(event) {
+    if (!this.collapsed || !this.peek) return;
+    const button = event.target.closest?.("button");
+    if (button && !button.hasAttribute("aria-haspopup") && !button.closest('[role="tablist"]'))
+      this.peek = false;
+  }
+  willUpdate(changed) {
+    if (changed.has("peek")) {
+      const doc = this.ownerDocument;
+      if (this.peek) doc.addEventListener("pointerdown", this.onOutside, true);
+      else doc.removeEventListener("pointerdown", this.onOutside, true);
+    }
+  }
   choose(tab) {
+    if (this.collapsible && this.collapsed) this.peek = true;
     if (tab === this.selected) return;
     if (this.fire("office-ribbon-select", { tab }, true)) this.selected = tab;
   }
@@ -1129,6 +1194,13 @@ var OfficeUiRibbon = class extends OfficeElement {
     const tab = event.target.closest?.('[role="tab"]');
     if (tab) this.choose(tab.dataset.tab);
   }
+  /** Ctrl+F1 and Escape work from anywhere in the ribbon, panels included. */
+  onHostKey = (event) => {
+    if (this.collapsible && event.key === "F1" && event.ctrlKey) {
+      event.preventDefault();
+      this.setCollapsed(!this.collapsed);
+    } else if (event.key === "Escape" && this.peek) this.peek = false;
+  };
   onKey(event) {
     const tabs = [...this.renderRoot.querySelectorAll('[role="tab"]')];
     const focused = event.target.closest?.('[role="tab"]');
@@ -1140,14 +1212,33 @@ var OfficeUiRibbon = class extends OfficeElement {
     this.choose(next.dataset.tab);
     this.focusTab();
   }
+  /** Rebuild the tab row when a panel's label or visibility flag changes. */
+  watcher;
   connectedCallback() {
     this.build();
     super.connectedCallback();
+    this.addEventListener("keydown", this.onHostKey);
+    const Observer = this.ownerDocument.defaultView?.MutationObserver;
+    this.watcher = Observer ? new Observer(() => this.build()) : void 0;
+    this.watcher?.observe(this, {
+      attributes: true,
+      subtree: true,
+      attributeFilter: ["data-tab-hidden", "data-label"]
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this.onHostKey);
+    this.watcher?.disconnect();
+    this.ownerDocument.removeEventListener("pointerdown", this.onOutside, true);
+    this.watcher = void 0;
   }
   /** Exactly one panel shows. */
   updated() {
     const selected = this.selected;
-    for (const panel of this.panels()) panel.hidden = panel.dataset.ribbonTab !== selected;
+    const hideAll = this.collapsed && !this.peek;
+    for (const panel of this.panels())
+      panel.hidden = hideAll || panel.dataset.ribbonTab !== selected;
   }
   render() {
     const selected = this.selected;
@@ -1171,6 +1262,7 @@ var OfficeUiRibbon = class extends OfficeElement {
 					aria-label=${this.label ?? "Ribbon"}
 					@click=${this.onTabClick}
 					@keydown=${this.onKey}
+					@dblclick=${this.onTabDoubleClick}
 				>
 					${this.tabs.map(
       (tab) => html`<button
@@ -1178,6 +1270,7 @@ var OfficeUiRibbon = class extends OfficeElement {
 							role="tab"
 							id="tab-${tab.id}"
 							data-tab=${tab.id}
+							data-contextual=${ifDefined(tab.contextual ? "" : void 0)}
 							data-keytip=${ifDefined(tab.keytip)}
 							data-keytip-panel=${ifDefined(tab.keytipPanel)}
 							aria-selected=${String(tab.id === selected)}
@@ -1188,8 +1281,20 @@ var OfficeUiRibbon = class extends OfficeElement {
 				</div>
 				<slot name="search"></slot>
 				<slot name="end"></slot>
+				<button
+					class="collapse"
+					part="collapse"
+					type="button"
+					aria-pressed=${String(this.collapsed)}
+					aria-label=${this.collapseLabel ?? "Collapse the ribbon"}
+					title=${this.collapseLabel ?? "Collapse the ribbon"}
+					?hidden=${!this.collapsible}
+					@click=${() => this.setCollapsed(!this.collapsed)}
+				>
+					${glyph("chevronLeft", "glyph")}
+				</button>
 			</div>
-			<slot @slotchange=${this.build}></slot>
+			<slot @slotchange=${this.build} @click=${this.onPanelClick}></slot>
 		`;
   }
 };
@@ -4232,6 +4337,7 @@ var OfficeUiTitleBar = class extends OfficeElement {
 				</span>
 				${this.searchBox()}
 				<div class="end">
+					<slot name="actions"></slot>
 					<slot name="collaboration"></slot>
 					<slot name="account"></slot>
 				</div>
@@ -4496,6 +4602,12 @@ function attachKeyTips(scope) {
   view?.addEventListener("blur", onPointer);
   const handle = {
     active: false,
+    start() {
+      if (!handle.active) start();
+    },
+    stop() {
+      stop();
+    },
     dispose() {
       stop();
       target.removeEventListener("keydown", onKeyDown, true);
@@ -4508,6 +4620,135 @@ function attachKeyTips(scope) {
   return handle;
 }
 
+// src/ribbon/overflow.ts
+function createRibbonOverflow(options) {
+  let closeOpen;
+  function overflowButton(group) {
+    const doc = group.ownerDocument;
+    const button = doc.createElement("button");
+    button.type = "button";
+    button.className = "ribbon-overflow-button ribbon-large";
+    button.setAttribute("aria-haspopup", "true");
+    const name = options.groupIcons[group.dataset.label ?? ""] ?? options.fallbackIcon;
+    button.append(
+      options.icon(doc, name, 28),
+      doc.createElement("span"),
+      options.icon(doc, "caret", 12)
+    );
+    button.addEventListener("mousedown", (event) => event.preventDefault());
+    button.addEventListener("click", () => toggleGroup(group, button));
+    return button;
+  }
+  function toggleGroup(group, button) {
+    const wasOpen = button.getAttribute("aria-expanded") === "true";
+    closeOpen?.();
+    if (wasOpen) return;
+    const ribbon = group.closest(options.ribbon);
+    if (!ribbon) return;
+    const doc = group.ownerDocument;
+    const pop = doc.createElement("div");
+    pop.className = "ribbon-popover ribbon-overflow-panel";
+    const content = doc.createElement("div");
+    content.className = "ribbon-group ribbon-overflow-content";
+    content.dataset.label = group.dataset.label ?? "";
+    content.dataset.caption = group.dataset.caption ?? "";
+    content.setAttribute("role", "group");
+    content.setAttribute("aria-label", group.getAttribute("aria-label") ?? "");
+    if (options.naturalWidth) content.style.width = `${group.dataset.natural ?? 200}px`;
+    const moved = [...group.children].filter((child) => child !== button);
+    content.append(...moved);
+    pop.append(content);
+    ribbon.append(pop);
+    const box = button.getBoundingClientRect();
+    pop.style.top = `${box.bottom + 2}px`;
+    const width = doc.defaultView?.innerWidth ?? 1024;
+    pop.style.left = `${Math.max(4, Math.min(box.left, width - pop.offsetWidth - 8))}px`;
+    button.setAttribute("aria-expanded", "true");
+    const outside = (event) => {
+      const path = event.composedPath();
+      const inside = path.some(
+        (node) => node instanceof HTMLElement && node.classList.contains("ribbon-popover")
+      );
+      if (!inside && !path.includes(button)) closeOpen?.();
+    };
+    const escape = (event) => {
+      if (event.key !== "Escape") return;
+      closeOpen?.();
+      button.focus();
+    };
+    pop.addEventListener("click", (event) => {
+      if (event.target.closest(options.command)) setTimeout(() => closeOpen?.(), 0);
+    });
+    doc.addEventListener("pointerdown", outside, true);
+    doc.addEventListener("keydown", escape, true);
+    closeOpen = () => {
+      doc.removeEventListener("pointerdown", outside, true);
+      doc.removeEventListener("keydown", escape, true);
+      group.prepend(...moved);
+      pop.remove();
+      button.removeAttribute("aria-expanded");
+      closeOpen = void 0;
+    };
+  }
+  function reserveCaptions(panel) {
+    const sizer = panel.ownerDocument.createElement("span");
+    sizer.className = "ribbon-caption-sizer";
+    panel.append(sizer);
+    for (const group of panel.querySelectorAll(":scope > .ribbon-group")) {
+      sizer.textContent = group.dataset.caption ?? "";
+      const launcher = group.querySelector(":scope > .ribbon-launcher") ? 32 : 12;
+      group.style.minWidth = `${Math.ceil(sizer.offsetWidth) + launcher}px`;
+    }
+    sizer.remove();
+  }
+  function fitPanel(panel) {
+    if (panel.hidden || !panel.clientWidth) return;
+    if (closeOpen && panel.dataset.fittedWidth === String(panel.clientWidth)) return;
+    panel.dataset.fittedWidth = String(panel.clientWidth);
+    closeOpen?.();
+    if (options.reserveCaptions) reserveCaptions(panel);
+    for (const group of panel.querySelectorAll(".ribbon-group[data-collapsed]"))
+      group.removeAttribute("data-collapsed");
+    const groups = [...panel.querySelectorAll(":scope > .ribbon-group")].filter(
+      (group) => group.offsetWidth > 0
+    );
+    if (options.naturalWidth)
+      for (const group of groups) group.dataset.natural = String(Math.ceil(group.offsetWidth));
+    for (let at = groups.length - 1; at >= 0 && panel.scrollWidth > panel.clientWidth + 1; at--) {
+      const group = groups[at];
+      let button = group.querySelector(":scope > .ribbon-overflow-button");
+      if (!button) {
+        button = overflowButton(group);
+        group.append(button);
+      }
+      const label = group.dataset.caption ?? group.dataset.label ?? "";
+      const span = button.querySelector("span");
+      if (options.setCaption) options.setCaption(span, label);
+      else span.textContent = label;
+      button.setAttribute("aria-label", label);
+      button.title = label;
+      group.setAttribute("data-collapsed", "");
+    }
+  }
+  const panelsOf = (root) => root.querySelectorAll(".ribbon-panel");
+  return {
+    fitPanel,
+    attach(root) {
+      if (typeof ResizeObserver === "undefined") return () => {
+      };
+      const observer = new ResizeObserver((entries) => {
+        for (const entry of entries) fitPanel(entry.target);
+      });
+      for (const panel of panelsOf(root)) observer.observe(panel);
+      return () => observer.disconnect();
+    },
+    refit(root) {
+      for (const panel of panelsOf(root)) fitPanel(panel);
+    },
+    close: () => closeOpen?.()
+  };
+}
+
 // src/controls.ts
 var CONTROL_DEFINERS = [
   defineIcon,
@@ -4550,4 +4791,4 @@ function registerControls(registry) {
   for (const define of CONTROL_DEFINERS) define(registry);
 }
 
-export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineGallery, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonSection, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, glyph, nextEnabledIndex, parseSvgPreview, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile };
+export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, createRibbonOverflow, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineGallery, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonSection, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, glyph, nextEnabledIndex, parseSvgPreview, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile };

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

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

package/dist/{chunk-HSJH6SUW.js → chunk-7Q7ZS2CC.js}

@@ -126,6 +126,7 @@ var OFFICE_TOKENS = {
   "--office-switch-thumb-on": "var(--office-accent-foreground, #ffffff)",
   // Component: ribbon, status bar, tabs
   "--office-ribbon-tab-height": "35px",
+  "--office-ribbon-contextual": "var(--office-accent, #2563eb)",
   "--office-ribbon-group-gap": "2px",
   "--office-ribbon-group-height": "78px",
   "--office-ribbon-group-padding": "4px 8px 2px",

package/dist/{chunk-2X6QYQ3Q.js → chunk-7QLJS57B.js}

@@ -1,4 +1,38 @@
-import { OFFICE_TOKENS, TOUCH } from './chunk-HSJH6SUW.js';
+import { OFFICE_TOKENS, TOUCH } from './chunk-7Q7ZS2CC.js';
+
+// src/theme-bridge.ts
+var SHADCN_NAMES = [
+  ["--office-foreground", "foreground"],
+  ["--office-muted-foreground", "muted-foreground"],
+  ["--office-background", "background"],
+  ["--office-surface", "card"],
+  ["--office-selected", "accent"],
+  ["--office-border", "border"],
+  ["--office-accent", "primary"],
+  ["--office-accent-foreground", "primary-foreground"],
+  ["--office-ring", "ring"],
+  ["--office-popover", "popover"],
+  // Popover text falls back to the plain foreground, as it does in the shadcn themes.
+  ["--office-popover-foreground", "popover-foreground", "foreground"],
+  ["--office-danger", "destructive"],
+  ["--office-danger-foreground", "destructive-foreground"]
+];
+function themeBridge(selector, map) {
+  const lines = Object.entries(map).filter(([, value]) => value).map(([name, value]) => `	${name}: ${value};`);
+  return `${selector} {
+${lines.join("\n")}
+}
+`;
+}
+function shadcnBridge(selector, prefix, options = {}) {
+  const map = {};
+  for (const [token, name, fallbackName] of SHADCN_NAMES) {
+    const fallback = options.fallbacks?.[name];
+    const inner = fallbackName ? `var(${prefix}${fallbackName})` : fallback;
+    map[token] = `var(${prefix}${name}${inner ? `, ${inner}` : ""})`;
+  }
+  return themeBridge(selector, { ...map, ...options.extra });
+}
 
 // src/theme.ts
 var THEME_STYLE_ID = "office-ui-theme";
@@ -67,4 +101,4 @@ function installOfficeUiTheme(doc = globalThis.document) {
   return true;
 }
 
-export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme };
+export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme, shadcnBridge, themeBridge };

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

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

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

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

package/dist/{chunk-PCZJV6HQ.js → chunk-ZWBP2WTC.js}

@@ -1,4 +1,4 @@
-import { TOUCH, tok, OFFICE_TOKENS } from './chunk-HSJH6SUW.js';
+import { TOUCH, tok, OFFICE_TOKENS } from './chunk-7Q7ZS2CC.js';
 import { unsafeCSS, LitElement } from 'lit';
 
 // src/registry.ts

package/dist/controls.d.ts

@@ -45,6 +45,8 @@ export { attachKeyTips, type KeyTipsHandle } from './keytips.js';
 export type { OfficeBackstageCloseEvent, OfficeBackstageItem, OfficeBackstageSelectEvent, } from './chrome/backstage.js';
 export type { OfficeFindInputEvent, OfficeFindStepEvent } from './chrome/find-bar.js';
 export type { OfficePrintPreviewPageEvent } from './chrome/print-preview.js';
+export { createRibbonOverflow } from './ribbon/overflow.js';
+export type { RibbonOverflow, RibbonOverflowOptions } from './ribbon/overflow.js';
 export type { OfficeRibbonSelectEvent } from './ribbon/ribbon-tabs.js';
 export type { OfficeRibbonCommandView, OfficeRibbonGroupView } from './ribbon/ribbon-section.js';
 export { parseSvgPreview, type OfficeGalleryItem, type OfficeGalleryPickEvent, type OfficeGallerySection, type OfficeGalleryState, } from './ribbon/gallery.js';

package/dist/controls.js

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

package/dist/index.js

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

package/dist/keytips.d.ts

@@ -12,6 +12,10 @@
 export interface KeyTipsHandle {
     /** Whether badges are currently shown. */
     readonly active: boolean;
+    /** Show the first level, as Alt does; for products that also start KeyTips from F10. */
+    start(): void;
+    /** Hide the badges. */
+    stop(): void;
     dispose(): void;
 }
 type Root = ShadowRoot | HTMLElement;

package/dist/presence.js

@@ -1,3 +1,3 @@
-export { OfficeUiPresence, definePresence, initialsOf, participantsFromAwareness } from './chunk-XQWRKHC2.js';
-import './chunk-PCZJV6HQ.js';
-import './chunk-HSJH6SUW.js';
+export { OfficeUiPresence, definePresence, initialsOf, participantsFromAwareness } from './chunk-V6W5DKJ6.js';
+import './chunk-ZWBP2WTC.js';
+import './chunk-7Q7ZS2CC.js';

package/dist/ribbon/overflow.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Ribbon overflow: when a panel is narrower than its groups, collapse groups from the right, each
+ * into one dropdown button that shows the group's live controls in a panel under it. The panel
+ * scrolls only when even that is not enough, as Word and Excel do when a window narrows.
+ *
+ * A product supplies how its icons are drawn and which command buttons end the dropdown; the
+ * folding itself is the same for every product. Panels are `.ribbon-panel` elements holding
+ * `.ribbon-group` children, each with `data-label` and optionally `data-caption`.
+ */
+export interface RibbonOverflowOptions {
+    /** Draws the icon `name` at `size` pixels (the product's own glyph set). */
+    icon(doc: Document, name: string, size: number): Node;
+    /** Icon of a folded group's button, by the group's `data-label`. */
+    groupIcons: Readonly<Record<string, string>>;
+    /** Icon for a group missing from `groupIcons`. */
+    fallbackIcon: string;
+    /** Selector of the ribbon element that owns the dropdown panel. */
+    ribbon: string;
+    /** Selector of the command buttons whose click ends the dropdown (selects keep it open). */
+    command: string;
+    /** Writes the caption under a folded group's button (default: its text content). */
+    setCaption?(span: HTMLElement, label: string): void;
+    /** Give the dropdown the group's natural width (for groups whose layout depends on it). */
+    naturalWidth?: boolean;
+    /** Reserve room for painted (`::after`) group captions so they never run into the next group. */
+    reserveCaptions?: boolean;
+}
+export interface RibbonOverflow {
+    /** Folds groups of `panel` from the right until it fits its width. */
+    fitPanel(panel: HTMLElement): void;
+    /** Keeps each panel of `root` fitted as it resizes. Returns a disposer. */
+    attach(root: HTMLElement): () => void;
+    /** Re-measures every panel of `root` (after a tab switch or a locale change). */
+    refit(root: HTMLElement): void;
+    /** Closes the open dropdown, putting its controls back. */
+    close(): void;
+}
+export declare function createRibbonOverflow(options: RibbonOverflowOptions): RibbonOverflow;