ooxml-ui 0.18.2 → 0.19.0

package/README.md

@@ -90,6 +90,7 @@ with an incompatible build of this package.
 | `office-ui-read-only-banner`                          | `state` `{ kind, message, passwordPromptOpen?, passwordError?, checkingPassword?, labels? }`                                                                                                                                                                                                                              | `office-read-only-request` (Edit anyway, Dismiss, password submit or cancel)                                                                      |
 | `office-ui-paste-options`                             | `state` `{ left, top, options: [{ id, label }], label? }`; fixed 4px past the pasted object                                                                                                                                                                                                                               | `office-paste-options-request` `{ format }`, `office-paste-options-dismiss`                                                                       |
 | `office-ui-title-bar`                                 | `state` `{ appMark?, fileName, status?, tone?, autosave?, quickAccess?: { label, items, showLabels? }, search? }`, `placement` (`titleBar`, `belowRibbon`); slots `collaboration`, `account`; tokens `--office-title-bar-*`                                                                                               | `office-autosave-toggle`, `office-command` `{ command }`, `office-command-search` `{ query, command? }`                                           |
+| `office-ui-ribbon-section`                            | `groups` `[{ id, label, commands: [{ id, label, icon, title?, size?, badge?, disabled?, active?, compact?, hidden?, caret?, pressed?, expanded?, column? }] }]`; keyed groups and commands in the light DOM                                                                                                               | the commands' own events (`office-command`)                                                                                                       |
 | `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                                                                                                                                              |

package/dist/{chunk-DGT2VJT5.js → chunk-6DZC4M2H.js}

@@ -1486,8 +1486,112 @@ var defineRibbon = definer("office-ui-ribbon", () => {
   return OfficeUiRibbon;
 });
 
-// src/ruler.ts
+// src/ribbon-section.ts
 var CSS8 = `
+:host { display: inline-flex; align-items: stretch; }
+::slotted(*) { flex: none; }
+`;
+var COLUMN_STYLE = { display: "flex", flexDirection: "column", gap: tok("--office-space-0") };
+function setOptional(el, name, value) {
+  if (value === void 0) el.removeAttribute(name);
+  else el.setAttribute(name, String(value));
+}
+function syncCommand(el, command, idAttribute) {
+  el.setAttribute(idAttribute, command.id);
+  el.setAttribute("label", command.label);
+  el.setAttribute("title", command.title ?? command.label);
+  el.setAttribute("icon", command.icon);
+  if (command.badge) el.setAttribute("badge", String(command.badge));
+  else el.removeAttribute("badge");
+  if (command.size) el.setAttribute("size", command.size);
+  for (const name of ["disabled", "active", "compact", "hidden", "caret"])
+    el.toggleAttribute(name, command[name] === true);
+  setOptional(el, "pressed", command.pressed);
+  setOptional(el, "expanded", command.expanded);
+}
+var defineRibbonSection = definer("office-ui-ribbon-section", () => {
+  class OfficeUiRibbonSection extends HTMLElement {
+    static groupTag = "office-ui-ribbon-group";
+    static commandTag = "office-ui-button";
+    static groupIdAttribute = "data-ribbon-group";
+    static commandIdAttribute = "command";
+    #groups = [];
+    #groupNodes = /* @__PURE__ */ new Map();
+    #commandNodes = /* @__PURE__ */ new Map();
+    constructor() {
+      super();
+      const root = this.attachShadow({ mode: "open" });
+      attachStyles(root, controlCss(CSS8));
+      root.append(this.ownerDocument.createElement("slot"));
+    }
+    get groups() {
+      return this.#groups;
+    }
+    set groups(value) {
+      this.#groups = value ?? [];
+      this.#render();
+    }
+    connectedCallback() {
+      this.#render();
+    }
+    #render() {
+      const statics = this.constructor;
+      const doc = this.ownerDocument;
+      const model = this.#groups;
+      const wantedGroups = new Set(model.map((group) => group.id));
+      const wantedCommands = new Set(model.flatMap((g) => g.commands.map((c) => c.id)));
+      for (const [id, el] of this.#commandNodes)
+        if (!wantedCommands.has(id)) {
+          el.remove();
+          this.#commandNodes.delete(id);
+        }
+      for (const [id, group] of this.#groupNodes)
+        if (!wantedGroups.has(id)) {
+          group.el.remove();
+          this.#groupNodes.delete(id);
+        }
+      for (const [index, group] of model.entries()) {
+        let node = this.#groupNodes.get(group.id);
+        if (!node) {
+          node = { el: doc.createElement(statics.groupTag), columns: /* @__PURE__ */ new Map() };
+          this.#groupNodes.set(group.id, node);
+        }
+        node.el.setAttribute(statics.groupIdAttribute, group.id);
+        node.el.setAttribute("label", group.label);
+        if (this.children[index] !== node.el)
+          this.insertBefore(node.el, this.children[index] ?? null);
+        const offsets = /* @__PURE__ */ new Map();
+        for (const command of group.commands) {
+          let parent = node.el;
+          if (command.column !== void 0) {
+            let column = node.columns.get(command.column);
+            if (!column) {
+              column = doc.createElement("div");
+              Object.assign(column.style, COLUMN_STYLE);
+              node.columns.set(command.column, column);
+              node.el.append(column);
+            }
+            parent = column;
+          }
+          let el = this.#commandNodes.get(command.id);
+          if (!el) {
+            el = doc.createElement(statics.commandTag);
+            this.#commandNodes.set(command.id, el);
+          }
+          syncCommand(el, command, statics.commandIdAttribute);
+          const offset = offsets.get(parent) ?? 0;
+          if (parent.children[offset] !== el)
+            parent.insertBefore(el, parent.children[offset] ?? null);
+          offsets.set(parent, offset + 1);
+        }
+      }
+    }
+  }
+  return OfficeUiRibbonSection;
+});
+
+// src/ruler.ts
+var CSS9 = `
 :host { display: block; box-sizing: border-box; background: ${tok("--office-background")};
 	color: ${tok("--office-muted-foreground")}; overflow: hidden;
 	font-size: ${tok("--office-font-size-3xs")}; font-family: ${tok("--office-font")}; }
@@ -1507,7 +1611,7 @@ var defineRuler = definer("office-ui-ruler", () => {
     constructor() {
       super();
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS8));
+      attachStyles(root, controlCss(CSS9));
       this.#canvas = this.ownerDocument.createElement("canvas");
       root.append(this.#canvas);
     }
@@ -1644,7 +1748,7 @@ function clearOfficeProfile(storage = defaultStorage(), key = OFFICE_PROFILE_STO
   } catch {
   }
 }
-var CSS9 = `
+var CSS10 = `
 :host { display: block; font-family: ${tok("--office-font")}; font-size: ${tok("--office-font-size")}; }
 h2 { margin: 0 0 ${tok("--office-space-3")}; font-size: ${tok("--office-font-size-lg")}; font-weight: 600; }
 .who { display: flex; align-items: center; gap: ${tok("--office-space-3")}; margin-bottom: ${tok("--office-space-3")}; }
@@ -1674,7 +1778,7 @@ var defineAccount = definer("office-ui-account", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS9));
+      attachStyles(root, controlCss(CSS10));
       const heading = doc.createElement("h2");
       heading.textContent = "User Information";
       const who = doc.createElement("div");
@@ -1775,7 +1879,7 @@ var defineAccount = definer("office-ui-account", () => {
 });
 
 // src/button.ts
-var CSS10 = `
+var CSS11 = `
 :host { display: inline-flex; vertical-align: middle; }
 button { box-sizing: border-box; position: relative; display: inline-flex; align-items: center; justify-content: center;
 	gap: ${tok("--office-space-1-5")}; min-width: ${tok("--office-target-size")}; min-height: ${tok("--office-target-size")};
@@ -1854,7 +1958,7 @@ var defineButton = definer("office-ui-button", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open", delegatesFocus: true });
-      attachStyles(root, controlCss(CSS10));
+      attachStyles(root, controlCss(CSS11));
       this.button = doc.createElement("button");
       this.button.type = "button";
       this.button.setAttribute("part", "button");
@@ -2083,7 +2187,7 @@ var defineCheckbox = definer(
 var defineSwitch = definer("office-ui-switch", makeCheckable("switch", SWITCH_CSS));
 
 // src/dialog.ts
-var CSS11 = `
+var CSS12 = `
 :host { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; }
 :host([open]) { display: flex; }
 .backdrop { position: absolute; inset: 0; background: ${tok("--office-overlay")}; }
@@ -2116,7 +2220,7 @@ var defineDialog = definer("office-ui-dialog", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS11));
+      attachStyles(root, controlCss(CSS12));
       const backdrop = doc.createElement("div");
       backdrop.className = "backdrop";
       this.box = doc.createElement("div");
@@ -2219,7 +2323,7 @@ var defineDialog = definer("office-ui-dialog", () => {
 });
 
 // src/command-search.ts
-var CSS12 = `
+var CSS13 = `
 :host { display: inline-flex; align-items: center; min-width: 0; font-family: ${tok("--office-font")}; }
 .field { display: flex; align-items: center; gap: ${tok("--office-space-1-5")}; width: 100%; min-width: 0; height: ${tok("--office-target-size")};
 	padding: 0 ${tok("--office-space-2")}; box-sizing: border-box; border: ${tok("--office-border-width")} solid transparent; border-radius: ${tok("--office-radius")};
@@ -2259,7 +2363,7 @@ var defineCommandSearch = definer("office-ui-command-search", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open", delegatesFocus: true });
-      attachStyles(root, controlCss(CSS12));
+      attachStyles(root, controlCss(CSS13));
       const field = doc.createElement("div");
       field.className = "field";
       const glass = createIconSvg(doc);
@@ -2448,7 +2552,7 @@ function clampFlyoutPosition(input) {
 }
 
 // src/context-menu.ts
-var CSS13 = `
+var CSS14 = `
 :host { display: contents; }
 :host([data-controlled]) { display: block; position: fixed; z-index: ${tok("--office-z-popover")};
 	color: ${tok("--office-popover-foreground")}; font: ${tok("--office-font-size-sm")}/${tok("--office-line-height")} ${tok("--office-font")}; }
@@ -2531,7 +2635,7 @@ var defineContextMenu = definer("office-ui-context-menu", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS13));
+      attachStyles(root, controlCss(CSS14));
       this.panel = doc.createElement("div");
       this.panel.className = "panel";
       this.panel.setAttribute("role", "menu");
@@ -3182,7 +3286,7 @@ function clampOptionNumber(raw, min, max) {
   const parsed = Number(raw);
   return Number.isFinite(parsed) && raw.trim() !== "" ? Math.min(max, Math.max(min, parsed)) : void 0;
 }
-var CSS14 = `
+var CSS15 = `
 :host { display: contents; }
 office-ui-dialog { --office-dialog-width: ${tok("--office-options-width")}; --office-dialog-max-width: ${tok("--office-options-width")}; }
 .layout { display: grid; grid-template-columns: ${tok("--office-options-nav-width")} minmax(0, 1fr); gap: 0; min-height: ${tok("--office-options-min-height")}; margin: calc(-1 * ${tok("--office-space-4")}); }
@@ -3231,7 +3335,7 @@ var defineOptionsDialog = definer("office-ui-options-dialog", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS14));
+      attachStyles(root, controlCss(CSS15));
       this.#dialog = doc.createElement("office-ui-dialog");
       const layout = doc.createElement("div");
       layout.className = "layout";
@@ -4488,7 +4592,7 @@ var defineStatusItem = definer("office-ui-status-item", () => {
 });
 
 // src/tab-strip.ts
-var CSS15 = `
+var CSS16 = `
 :host { display: flex; align-items: stretch; min-width: 0; min-height: ${tok("--office-tab-height")}; gap: ${tok("--office-space-0")}; padding: 0 ${tok("--office-space-1-5")};
 	background: ${tok("--office-surface")}; color: ${tok("--office-muted-foreground")};
 	border-top: ${tok("--office-border-width")} solid ${tok("--office-border")}; font-size: ${tok("--office-font-size-sm")};
@@ -4535,7 +4639,7 @@ var defineTabStrip = definer("office-ui-tab-strip", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS15));
+      attachStyles(root, controlCss(CSS16));
       const step = (name, icon2) => {
         const button = doc.createElement("button");
         button.type = "button";
@@ -4900,7 +5004,7 @@ function createTitleBarSearch(doc, fieldTag, request) {
 }
 
 // src/title-bar.ts
-var CSS16 = `
+var CSS17 = `
 :host { display: block; flex: none; }
 :host([data-empty]) { display: none !important; }
 [hidden] { display: none !important; }
@@ -5002,7 +5106,7 @@ var defineTitleBar = definer("office-ui-title-bar", () => {
       const doc = this.ownerDocument;
       const statics = this.constructor;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS16));
+      attachStyles(root, controlCss(CSS17));
       const el = (tag, className) => {
         const node = doc.createElement(tag);
         node.className = className;
@@ -5137,7 +5241,7 @@ var defineTitleBar = definer("office-ui-title-bar", () => {
 });
 
 // src/zoom-slider.ts
-var CSS17 = `
+var CSS18 = `
 :host { display: inline-flex; align-items: center; gap: ${tok("--office-space-0")}; font-size: ${tok("--office-font-size-xs")};
 	color: ${tok("--office-foreground")}; font-family: ${tok("--office-font")}; }
 button { box-sizing: border-box; display: inline-grid; place-items: center; min-width: ${tok("--office-target-size")};
@@ -5173,7 +5277,7 @@ var defineZoomSlider = definer("office-ui-zoom-slider", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS17));
+      attachStyles(root, controlCss(CSS18));
       const button = (name, text2) => {
         const element = doc.createElement("button");
         element.type = "button";
@@ -5448,10 +5552,11 @@ var CONTROL_DEFINERS = [
   defineToasts,
   defineReadOnlyBanner,
   definePasteOptions,
-  defineTitleBar
+  defineTitleBar,
+  defineRibbonSection
 ];
 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, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, 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, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, 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, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile };

package/dist/controls.d.ts

@@ -7,6 +7,7 @@ import { defineBackstage } from './backstage.js';
 import { defineFindBar } from './find-bar.js';
 import { definePrintPreview } from './print-preview.js';
 import { defineRibbon } from './ribbon-tabs.js';
+import { defineRibbonSection } from './ribbon-section.js';
 import { defineRuler } from './ruler.js';
 import { defineAccount } from './account.js';
 import { defineButton } from './button.js';
@@ -23,7 +24,7 @@ import { defineStatusBar, defineStatusItem } from './status-bar.js';
 import { defineTabStrip } from './tab-strip.js';
 import { defineTitleBar } from './title-bar.js';
 import { defineZoomSlider } from './zoom-slider.js';
-export { defineAccount, defineDialogFooter, definePasteOptions, defineRadio, defineReadOnlyBanner, defineRibbonToggle, defineSearchField, defineToasts, defineBackstage, defineFindBar, definePrintPreview, defineRibbon, defineRuler, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToolbar, defineZoomSlider, };
+export { defineAccount, defineDialogFooter, definePasteOptions, defineRadio, defineReadOnlyBanner, defineRibbonToggle, defineSearchField, defineToasts, defineBackstage, defineFindBar, definePrintPreview, defineRibbon, defineRuler, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, defineRibbonGroup, defineRibbonSection, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToolbar, defineZoomSlider, };
 export type { OfficeCommandEvent } from './button.js';
 export type { OfficeDialogCloseEvent, OfficeDialogCloseReason } from './dialog.js';
 export type { OfficeSelectOption } from './select.js';
@@ -36,6 +37,7 @@ export type { OfficeBackstageCloseEvent, OfficeBackstageItem, OfficeBackstageSel
 export type { OfficeFindInputEvent, OfficeFindStepEvent } from './find-bar.js';
 export type { OfficePrintPreviewPageEvent } from './print-preview.js';
 export type { OfficeRibbonSelectEvent } from './ribbon-tabs.js';
+export type { OfficeRibbonCommandView, OfficeRibbonGroupView } from './ribbon-section.js';
 export { rulerDivisions } from './ruler.js';
 export { clampFlyoutPosition, EMPTY_MENU_STATE, nextEnabledIndex, typeAheadIndex, type FlyoutPositionInput, type OfficeMenuCloseReason, type OfficeMenuItem, type OfficeMenuState, } from './menu-model.js';
 export { OFFICE_TOAST_VISIBLE_LIMIT, type OfficeDialogFooterAction, type OfficeDialogFooterState, type OfficeDialogFooterVariant, type OfficeToast, type OfficeToastsState, } from './chrome-controls.js';
@@ -43,6 +45,6 @@ export type { OfficePasteOption, OfficePasteOptionsState, OfficeReadOnlyBannerIn
 export { clearOfficeProfile, DEFAULT_OFFICE_PROFILE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, profileInitials, readOfficeProfile, sanitizeOfficeProfile, writeOfficeProfile, type OfficeProfile, type OfficeProfileChangeEvent, } from './account.js';
 export { clampOptionNumber, type OfficeOptionCategory, type OfficeOptionChoice, type OfficeOptionControl, type OfficeOptionSection, type OfficeOptionsChangeEvent, type OfficeOptionValue, type OfficeOptionValues, } from './options.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, 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, 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, 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, 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,4 +1,4 @@
-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, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-DGT2VJT5.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, 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, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-6DZC4M2H.js';
 export { defineIcon } from './chunk-GWAPPX66.js';
 import './chunk-DECL6RNI.js';
 import './chunk-UYPH4ESZ.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-ribbon-stack", "office-ui-menu-item", "office-ui-menu-button", "office-ui-menu-separator", "office-ui-context-menu", "office-ui-command-search", "office-ui-toolbar", "office-ui-dialog", "office-ui-status-bar", "office-ui-status-item", "office-ui-zoom-slider", "office-ui-tab-strip", "office-ui-options-dialog", "office-ui-account", "office-ui-ribbon", "office-ui-find-bar", "office-ui-ruler", "office-ui-backstage", "office-ui-print-preview", "office-ui-radio", "office-ui-search", "office-ui-ribbon-toggle", "office-ui-dialog-footer", "office-ui-toasts", "office-ui-read-only-banner", "office-ui-paste-options", "office-ui-title-bar", "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-menu-separator", "office-ui-context-menu", "office-ui-command-search", "office-ui-toolbar", "office-ui-dialog", "office-ui-status-bar", "office-ui-status-item", "office-ui-zoom-slider", "office-ui-tab-strip", "office-ui-options-dialog", "office-ui-account", "office-ui-ribbon", "office-ui-find-bar", "office-ui-ruler", "office-ui-backstage", "office-ui-print-preview", "office-ui-radio", "office-ui-search", "office-ui-ribbon-toggle", "office-ui-dialog-footer", "office-ui-toasts", "office-ui-read-only-banner", "office-ui-paste-options", "office-ui-title-bar", "office-ui-ribbon-section", "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,7 +1,7 @@
 import { installOfficeUiTheme } from './chunk-5L3NYLAW.js';
 export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-5L3NYLAW.js';
-import { registerControls } from './chunk-DGT2VJT5.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, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-DGT2VJT5.js';
+import { registerControls } from './chunk-6DZC4M2H.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, 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, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-6DZC4M2H.js';
 export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-GWAPPX66.js';
 import { definePresence } from './chunk-DECL6RNI.js';
 export { definePresence, initialsOf, participantsFromAwareness } from './chunk-DECL6RNI.js';
@@ -45,6 +45,7 @@ var OFFICE_UI_TAGS = [
   "office-ui-read-only-banner",
   "office-ui-paste-options",
   "office-ui-title-bar",
+  "office-ui-ribbon-section",
   "office-ui-presence",
   "office-ui-smartart"
 ];

package/dist/ribbon-section.d.ts

@@ -0,0 +1,36 @@
+/** One ribbon command, translated. Booleans map to the command element's attributes. */
+export interface OfficeRibbonCommandView {
+    id: string;
+    label: string;
+    /** ScreenTip; defaults to `label`. */
+    title?: string | undefined;
+    icon: string;
+    badge?: string | number | undefined;
+    /** `large`, `small` or `icon`; omitted leaves the command element's default. */
+    size?: string | undefined;
+    disabled?: boolean | undefined;
+    active?: boolean | undefined;
+    compact?: boolean | undefined;
+    hidden?: boolean | undefined;
+    caret?: boolean | undefined;
+    /** Toggle state; undefined means not a toggle. */
+    pressed?: boolean | undefined;
+    /** Menu state; undefined means no menu. */
+    expanded?: boolean | undefined;
+    /** Stack commands with the same column number vertically. */
+    column?: number | undefined;
+}
+export interface OfficeRibbonGroupView {
+    id: string;
+    label: string;
+    commands: readonly OfficeRibbonCommandView[];
+}
+/**
+ * `<office-ui-ribbon-section>`: a run of ribbon groups from data. Set `groups`
+ * (`OfficeRibbonGroupView[]`); groups and commands are keyed by id and patched in place, so a
+ * focused command and every customization id survive updates. Commands with a `column` stack
+ * vertically. Children are real `office-ui-ribbon-group` and `office-ui-button` elements in the
+ * light DOM, so their events (`office-command` and so on) bubble as usual. Static `groupTag`,
+ * `commandTag`, `groupIdAttribute` and `commandIdAttribute` let a product keep its aliases.
+ */
+export declare const defineRibbonSection: import("./registry.js").Definer;

package/package.json

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