ooxml-ui 0.25.0 → 0.26.0

package/dist/{chunk-SXCANAX7.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,6 +1086,10 @@ 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() {
@@ -1102,6 +1110,28 @@ 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
@@ -1120,6 +1150,7 @@ var OfficeUiRibbon = class extends OfficeElement {
       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 } : {}
@@ -1127,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;
   }
@@ -1135,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"]');
@@ -1151,6 +1217,7 @@ var OfficeUiRibbon = class extends OfficeElement {
   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, {
@@ -1161,13 +1228,17 @@ var OfficeUiRibbon = class extends OfficeElement {
   }
   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;
@@ -1191,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
@@ -1198,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)}
@@ -1208,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>
 		`;
   }
 };
@@ -4517,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);
@@ -4529,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,
@@ -4571,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-PAPKST6W.js → chunk-7QLJS57B.js}

@@ -1,4 +1,4 @@
-import { OFFICE_TOKENS, TOUCH } from './chunk-HSJH6SUW.js';
+import { OFFICE_TOKENS, TOUCH } from './chunk-7Q7ZS2CC.js';
 
 // src/theme-bridge.ts
 var SHADCN_NAMES = [

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-SXCANAX7.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-PAPKST6W.js';
-export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme, shadcnBridge, themeBridge } from './chunk-PAPKST6W.js';
-import { registerControls } from './chunk-SXCANAX7.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-SXCANAX7.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;

package/dist/ribbon/ribbon-tabs.d.ts

@@ -6,6 +6,7 @@ export type OfficeRibbonSelectEvent = CustomEvent<{
 interface RibbonTab {
     id: string;
     label: string;
+    contextual: boolean;
     keytip?: string;
     keytipPanel?: string;
 }
@@ -17,8 +18,14 @@ interface RibbonTab {
  * `search`, `end`. Attributes: `selected`, `label` (tab list name), `file-label` (default "File"),
  * `no-file`, `file-expanded`, `file-keytip`. A panel with `data-tab-hidden` keeps its content but has
  * no tab (a contextual tab, or one a customisation removed); if it was selected, the first
- * remaining tab takes over. Events: `office-ribbon-select` `{ tab }`
+ * remaining tab takes over. `data-contextual` on a panel tints its tab (`--office-ribbon-contextual`),
+ * for tools that apply to the selection, such as a table's. Events: `office-ribbon-select` `{ tab }`
  * (cancelable) and `office-ribbon-file` when File is activated.
+ *
+ * `collapsible` adds Office's collapse button: `collapsed` hides the panels, a click on a tab then
+ * shows its panel over the content (`peek`) until Escape, a command or a click elsewhere. Ctrl+F1 and
+ * a double click on a tab toggle it. `collapse-label` names the button. Event:
+ * `office-ribbon-collapse` `{ collapsed }`.
  */
 export declare class OfficeUiRibbon extends OfficeElement {
     static styles: import("lit").CSSResult[];
@@ -51,6 +58,34 @@ export declare class OfficeUiRibbon extends OfficeElement {
             attribute: string;
             type: StringConstructor;
         };
+        collapsible: {
+            type: BooleanConstructor;
+            reflect: true;
+            converter: {
+                fromAttribute: (value: string | null) => boolean;
+                toAttribute: (value: unknown) => string | null;
+            };
+        };
+        collapsed: {
+            type: BooleanConstructor;
+            reflect: true;
+            converter: {
+                fromAttribute: (value: string | null) => boolean;
+                toAttribute: (value: unknown) => string | null;
+            };
+        };
+        peek: {
+            type: BooleanConstructor;
+            reflect: true;
+            converter: {
+                fromAttribute: (value: string | null) => boolean;
+                toAttribute: (value: unknown) => string | null;
+            };
+        };
+        collapseLabel: {
+            attribute: string;
+            type: StringConstructor;
+        };
         tabs: {
             state: boolean;
         };
@@ -60,6 +95,10 @@ export declare class OfficeUiRibbon extends OfficeElement {
     noFile: boolean;
     fileExpanded: string | null;
     fileKeytip: string | null;
+    collapsible: boolean;
+    collapsed: boolean;
+    peek: boolean;
+    collapseLabel: string | null;
     tabs: RibbonTab[];
     private chosen;
     constructor();
@@ -69,13 +108,30 @@ export declare class OfficeUiRibbon extends OfficeElement {
     focusFile(): void;
     /** Focus the selected tab. */
     focusTab(): void;
+    /** The rendered tab button of `tab`, or null before the first render. */
+    tabButton(tab: string): HTMLButtonElement | null;
+    /** The rendered File button, or null before the first render. */
+    fileButton(): HTMLButtonElement | null;
+    /**
+     * 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: string, reason: string, hidden: boolean): void;
     private panels;
     /** The panels that have a tab: those not marked `data-tab-hidden`. */
     private shown;
     /** Read the tabs off the panels (on connection and whenever the slotted panels change). */
     private build;
+    private setCollapsed;
+    private onOutside;
+    private onTabDoubleClick;
+    /** A command run from an overlaid panel closes it; a menu opener keeps it open. */
+    private onPanelClick;
+    protected willUpdate(changed: Map<PropertyKey, unknown>): void;
     private choose;
     private onTabClick;
+    /** Ctrl+F1 and Escape work from anywhere in the ribbon, panels included. */
+    private onHostKey;
     private onKey;
     /** Rebuild the tab row when a panel's label or visibility flag changes. */
     private watcher;

package/dist/smartart.js

@@ -1,3 +1,3 @@
-export { OfficeUiSmartArt, defineSmartArt, renderDiagramDrawing } from './chunk-RVZAYXTI.js';
-import './chunk-PCZJV6HQ.js';
-import './chunk-HSJH6SUW.js';
+export { OfficeUiSmartArt, defineSmartArt, renderDiagramDrawing } from './chunk-4VQ6S7QJ.js';
+import './chunk-ZWBP2WTC.js';
+import './chunk-7Q7ZS2CC.js';

package/dist/teams.js

@@ -1,5 +1,5 @@
-export { EMOJI, OfficeUiAppRail, OfficeUiAvatar, OfficeUiCallControls, OfficeUiCallGrid, OfficeUiChannelList, OfficeUiChatComposer, OfficeUiChatList, OfficeUiPrejoin, QUICK_REACTIONS, TEAMS_TAGS, TeamsElement, colorFor, dayLabel, defineAppRail, defineAvatar, defineCallControls, defineCallGrid, defineChannelList, defineChatComposer, defineChatList, definePrejoin, formatElapsed, formatSize, formatTime, icon, registerTeams, withStyles } from './chunk-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-LE4FTRWB.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/theme.js

@@ -1,2 +1,2 @@
-export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme, shadcnBridge, themeBridge } from './chunk-PAPKST6W.js';
-export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-HSJH6SUW.js';
+export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme, shadcnBridge, themeBridge } from './chunk-7QLJS57B.js';
+export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-7Q7ZS2CC.js';