ooxml-ui 0.18.2 → 0.20.0

package/README.md

@@ -60,39 +60,41 @@ with an incompatible build of this package.
 
 ## Features: elements
 
-| Tag                                                   | Attributes / properties                                                                                                                                                                                                                                                                                                   | Events (all bubble, composed)                                                                                                                     |
-| ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `office-ui-button`                                    | `label`, `icon`, `command`, `disabled`, `pressed`, `expanded`, `icon-only`, `variant="stacked"`, `keyshortcuts`                                                                                                                                                                                                           | `office-command` `{ command }`                                                                                                                    |
-| `office-ui-checkbox`, `office-ui-switch`              | `checked`, `disabled`, `value`, `aria-label`; form-associated                                                                                                                                                                                                                                                             | `input`, `change`                                                                                                                                 |
-| `office-ui-select`                                    | `<option>` / `<optgroup>` children (`data-display-label`, `data-description`, font previews) or the `options` property `[{ value, label, disabled? }]`; `value`, `selectedIndex`, `disabled`, `aria-label`, `variant="ribbon-font"                                                                                        | "ribbon-icon"`, `data-font-picker`; `icon`and`custom` slots; arrows, Home, End, PageUp/PageDown, typeahead                                        | `input`, `change` |
-| `office-ui-ribbon-group`                              | `label`, `launcher` (dialog launcher command), `launcher-disabled`; default slot                                                                                                                                                                                                                                          | launcher: `office-command` `{ command }`                                                                                                          |
-| `office-ui-ribbon-stack`                              | `orientation="horizontal"`; default slot (three-row column of small commands by default)                                                                                                                                                                                                                                  | none                                                                                                                                              |
-| `office-ui-menu-button` / `-menu-item`                | button: `label`, `icon`, `command` (split button), `variant`, `disabled`, `keyshortcuts`; item: `command`, `label`, `icon`, `disabled`, `checked`                                                                                                                                                                         | item choice: `office-command` `{ command }`                                                                                                       |
-| `office-ui-toolbar`                                   | `aria-label`, `aria-orientation`; arrow-key focus movement                                                                                                                                                                                                                                                                | none                                                                                                                                              |
-| `office-ui-dialog`                                    | `open`, `heading`, `dismissible="false"`, `show()`, `close()`; slots default, `footer`                                                                                                                                                                                                                                    | `office-dialog-close` `{ reason }` (cancelable)                                                                                                   |
-| `office-ui-status-bar` / `-status-item`               | `label`, `value`, `interactive`, `id`; controlled bar: `state` `{ items?, toggles?, views?, zoom? }` with `collaboration` and `end` slots                                                                                                                                                                                 | `office-status-activate` `{ id }`                                                                                                                 |
-| `office-ui-zoom-slider`                               | `value` (percent), `min`, `max`, `step`, `disabled`, `fit` (fit button name), `label`                                                                                                                                                                                                                                     | `input`, `change`; fit: `office-command` `{ command: 'zoom-fit' }`                                                                                |
-| `office-ui-tab-strip`                                 | `tabs` `[{ id, label, title? }]`, `selected`, `label`, `previous-label`, `next-label`, `add-label`, `add-disabled`, `add-title`, `disabled`                                                                                                                                                                               | `office-tab-select` `{ id }` (cancelable); add: `office-command` `{ command: 'tab-add' }`                                                         |
-| `office-ui-context-menu` / `office-ui-menu-separator` | Children mode: `label`, `openAt(x, y)`, `close()`, `open` over `office-ui-menu-item` and separator children. Controlled mode: `state` `{ x, y, label, items: [{ id, label, separatorBefore?, heading?, danger?, disabled?, checked?, icon? }], markers?, zIndex?, autoFocus? }`; arrows, Home, End and type-ahead in both | children: item `office-command` `{ command }`; controlled: `office-menu-request` `{ id }`, `office-menu-close` `{ reason }` (never closes itself) |
-| `office-ui-command-search`                            | `commands` `[{ id, label, keywords?, description?, disabled?, title? }]`, `placeholder`, `label`, `limit` (Office's "Tell me what you want to do")                                                                                                                                                                        | choice: `office-command` `{ command }`                                                                                                            |
-| `office-ui-options-dialog`                            | `categories` `[{ id, label, description?, disabled?, sections: [{ id, title, controls }] }]` (controls: `toggle`, `select`, `number`, `text`, each optionally `disabled` with a reason), `values`, `category`, `open`, `heading`, `show()`, `close()`                                                                     | OK: `office-options-change` `{ values, changed }`                                                                                                 |
-| `office-ui-account`                                   | `profile` `{ displayName, avatarColor, initial? }`; slots `sign-in` and default (product sections)                                                                                                                                                                                                                        | `office-profile-change` `{ profile }`                                                                                                             |
-| `office-ui-ribbon`                                    | Tab row over tab panels. Panels are children with `data-ribbon-tab`, `data-label`, optional `data-tab-keytip`; slots `quick-access`, `search`, `end`; `selected`, `label`, `file-label`, `no-file`, `file-expanded`, `file-keytip`; `focusFile()`, `focusTab()`                                                           | `office-ribbon-select` `{ tab }` (cancelable), `office-ribbon-file`                                                                               |
-| `office-ui-backstage`                                 | `items` `[{ id, label, group?: 'footer', disabled?, title? }]`, `open`, `selected`, `label`, `back-label`, `show(page?)`, `close()`; pages are children with `data-backstage-page`                                                                                                                                        | `office-backstage-select` `{ id }` (cancelable), `office-backstage-close` `{ reason }` (cancelable)                                               |
-| `office-ui-find-bar`                                  | `open`, `label`, `input-label`, `placeholder`, `maxlength`, `disabled`, `navigation-disabled`, `previous-label`, `next-label`, `close-label`; `value`, `status`, `statusTitle`, `show()`, `close()`                                                                                                                       | `office-find-input` `{ query }`, `office-find-step` `{ direction }`, `office-find-close`                                                          |
-| `office-ui-ruler`                                     | `orientation="vertical"`, `origin` (px offset of zero), `scale` (px per unit, default 96), `direction="reverse"`; decorative                                                                                                                                                                                              | none                                                                                                                                              |
-| `office-ui-print-preview`                             | `pages` (rendered nodes; an inert clone of the current one is shown), `index`, `label`, `empty-label`                                                                                                                                                                                                                     | `office-print-preview-page` `{ index }`                                                                                                           |
-| `office-ui-radio`                                     | `checked`, `disabled`, `value`, `name`; radios of one tag sharing a `name` form a roving-focus group; form-associated                                                                                                                                                                                                     | `input`, `change`                                                                                                                                 |
-| `office-ui-search`                                    | `value`, `placeholder`, `disabled`, `aria-label`, `variant="titlebar"`; `focus()`, `select()`                                                                                                                                                                                                                             | `input`, `change`                                                                                                                                 |
-| `office-ui-ribbon-toggle`                             | `label`, `checked`, `disabled`, `title`, `command` (a labelled ribbon checkbox row; static `checkboxTag` picks the inner checkbox)                                                                                                                                                                                        | `office-toggle` `{ command, checked }`                                                                                                            |
-| `office-ui-dialog-footer`                             | `state` `{ actions: [{ id, label, variant?, icon?, disabled?, busy?, title?, align?, testId? }] }`, `focusAction(id)`                                                                                                                                                                                                     | `office-dialog-footer-request` `{ id }`                                                                                                           |
-| `office-ui-toasts`                                    | `state` `{ toasts: [{ id, code?, severity, message }], overflowCount?, labels? }`; hidden when empty, host positions it                                                                                                                                                                                                   | `office-toasts-request` `{ id: 'dismiss', toastId }` or `{ id: 'dismissAll' }`                                                                    |
-| `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-presence`                                  | `participants`, `max`, `label`                                                                                                                                                                                                                                                                                            | `office-presence-select` `{ id }`                                                                                                                 |
-| `office-ui-smartart`                                  | `drawing` (core `DiagramDrawing`), `schemeColors`, `label`                                                                                                                                                                                                                                                                | `office-smartart-render` (render report)                                                                                                          |
-| `office-ui-icon`                                      | `name`, `label`                                                                                                                                                                                                                                                                                                           | none                                                                                                                                              |
+| Tag                                                   | Attributes / properties                                                                                                                                                                                                                                                                                                         | Events (all bubble, composed)                                                                                                                     |
+| ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `office-ui-button`                                    | `label`, `icon`, `command`, `disabled`, `pressed`, `expanded`, `icon-only`, `variant="stacked"`, `keyshortcuts`                                                                                                                                                                                                                 | `office-command` `{ command }`                                                                                                                    |
+| `office-ui-checkbox`, `office-ui-switch`              | `checked`, `disabled`, `value`, `aria-label`; form-associated                                                                                                                                                                                                                                                                   | `input`, `change`                                                                                                                                 |
+| `office-ui-select`                                    | `<option>` / `<optgroup>` children (`data-display-label`, `data-description`, font previews) or the `options` property `[{ value, label, disabled? }]`; `value`, `selectedIndex`, `disabled`, `aria-label`, `variant="ribbon-font"                                                                                              | "ribbon-icon"`, `data-font-picker`; `icon`and`custom` slots; arrows, Home, End, PageUp/PageDown, typeahead                                        | `input`, `change` |
+| `office-ui-ribbon-group`                              | `label`, `launcher` (dialog launcher command), `launcher-disabled`; default slot                                                                                                                                                                                                                                                | launcher: `office-command` `{ command }`                                                                                                          |
+| `office-ui-ribbon-stack`                              | `orientation="horizontal"`; default slot (three-row column of small commands by default)                                                                                                                                                                                                                                        | none                                                                                                                                              |
+| `office-ui-menu-button` / `-menu-item`                | button: `label`, `icon`, `command` (split button), `variant`, `disabled`, `keyshortcuts`; item: `command`, `label`, `icon`, `disabled`, `checked`                                                                                                                                                                               | item choice: `office-command` `{ command }`                                                                                                       |
+| `office-ui-toolbar`                                   | `aria-label`, `aria-orientation`; arrow-key focus movement                                                                                                                                                                                                                                                                      | none                                                                                                                                              |
+| `office-ui-dialog`                                    | `open`, `heading`, `dismissible="false"`, `show()`, `close()`; slots default, `footer`                                                                                                                                                                                                                                          | `office-dialog-close` `{ reason }` (cancelable)                                                                                                   |
+| `office-ui-status-bar` / `-status-item`               | `label`, `value`, `interactive`, `id`; controlled bar: `state` `{ items?, toggles?, views?, zoom? }` with `collaboration` and `end` slots                                                                                                                                                                                       | `office-status-activate` `{ id }`                                                                                                                 |
+| `office-ui-zoom-slider`                               | `value` (percent), `min`, `max`, `step`, `disabled`, `fit` (fit button name), `label`                                                                                                                                                                                                                                           | `input`, `change`; fit: `office-command` `{ command: 'zoom-fit' }`                                                                                |
+| `office-ui-tab-strip`                                 | `tabs` `[{ id, label, title? }]`, `selected`, `label`, `previous-label`, `next-label`, `add-label`, `add-disabled`, `add-title`, `disabled`                                                                                                                                                                                     | `office-tab-select` `{ id }` (cancelable); add: `office-command` `{ command: 'tab-add' }`                                                         |
+| `office-ui-context-menu` / `office-ui-menu-separator` | Children mode: `label`, `openAt(x, y)`, `close()`, `open` over `office-ui-menu-item` and separator children. Controlled mode: `state` `{ x, y, label, items: [{ id, label, separatorBefore?, heading?, danger?, disabled?, checked?, icon? }], markers?, zIndex?, autoFocus? }`; arrows, Home, End and type-ahead in both       | children: item `office-command` `{ command }`; controlled: `office-menu-request` `{ id }`, `office-menu-close` `{ reason }` (never closes itself) |
+| `office-ui-command-search`                            | `commands` `[{ id, label, keywords?, description?, disabled?, title? }]`, `placeholder`, `label`, `limit` (Office's "Tell me what you want to do")                                                                                                                                                                              | choice: `office-command` `{ command }`                                                                                                            |
+| `office-ui-options-dialog`                            | `categories` `[{ id, label, description?, disabled?, sections: [{ id, title, controls }] }]` (controls: `toggle`, `select`, `number`, `text`, each optionally `disabled` with a reason), `values`, `category`, `open`, `heading`, `show()`, `close()`                                                                           | OK: `office-options-change` `{ values, changed }`                                                                                                 |
+| `office-ui-account`                                   | `profile` `{ displayName, avatarColor, initial? }`; slots `sign-in` and default (product sections)                                                                                                                                                                                                                              | `office-profile-change` `{ profile }`                                                                                                             |
+| `office-ui-ribbon`                                    | Tab row over tab panels. Panels are children with `data-ribbon-tab`, `data-label`, optional `data-tab-keytip`; slots `quick-access`, `search`, `end`; `selected`, `label`, `file-label`, `no-file`, `file-expanded`, `file-keytip`; `focusFile()`, `focusTab()`                                                                 | `office-ribbon-select` `{ tab }` (cancelable), `office-ribbon-file`                                                                               |
+| `office-ui-backstage`                                 | `items` `[{ id, label, group?: 'footer', disabled?, title? }]`, `open`, `selected`, `label`, `back-label`, `show(page?)`, `close()`; pages are children with `data-backstage-page`                                                                                                                                              | `office-backstage-select` `{ id }` (cancelable), `office-backstage-close` `{ reason }` (cancelable)                                               |
+| `office-ui-find-bar`                                  | `open`, `label`, `input-label`, `placeholder`, `maxlength`, `disabled`, `navigation-disabled`, `previous-label`, `next-label`, `close-label`; `value`, `status`, `statusTitle`, `show()`, `close()`                                                                                                                             | `office-find-input` `{ query }`, `office-find-step` `{ direction }`, `office-find-close`                                                          |
+| `office-ui-ruler`                                     | `orientation="vertical"`, `origin` (px offset of zero), `scale` (px per unit, default 96), `direction="reverse"`; decorative                                                                                                                                                                                                    | none                                                                                                                                              |
+| `office-ui-print-preview`                             | `pages` (rendered nodes; an inert clone of the current one is shown), `index`, `label`, `empty-label`                                                                                                                                                                                                                           | `office-print-preview-page` `{ index }`                                                                                                           |
+| `office-ui-radio`                                     | `checked`, `disabled`, `value`, `name`; radios of one tag sharing a `name` form a roving-focus group; form-associated                                                                                                                                                                                                           | `input`, `change`                                                                                                                                 |
+| `office-ui-search`                                    | `value`, `placeholder`, `disabled`, `aria-label`, `variant="titlebar"`; `focus()`, `select()`                                                                                                                                                                                                                                   | `input`, `change`                                                                                                                                 |
+| `office-ui-ribbon-toggle`                             | `label`, `checked`, `disabled`, `title`, `command` (a labelled ribbon checkbox row; static `checkboxTag` picks the inner checkbox)                                                                                                                                                                                              | `office-toggle` `{ command, checked }`                                                                                                            |
+| `office-ui-dialog-footer`                             | `state` `{ actions: [{ id, label, variant?, icon?, disabled?, busy?, title?, align?, testId? }] }`, `focusAction(id)`                                                                                                                                                                                                           | `office-dialog-footer-request` `{ id }`                                                                                                           |
+| `office-ui-toasts`                                    | `state` `{ toasts: [{ id, code?, severity, message }], overflowCount?, labels? }`; hidden when empty, host positions it                                                                                                                                                                                                         | `office-toasts-request` `{ id: 'dismiss', toastId }` or `{ id: 'dismissAll' }`                                                                    |
+| `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-gallery`                                   | `state` `{ id, label, moreLabel?, disabled?, command?, sections: [{ title?, columns, tileWidth, tileHeight, items: [{ id, label, applied?, preview? }] }], inline? }`, `mode` (`inline`), `chevron-only`, `icon`; `open`, `disabled`, `close()`; tiles in light DOM (`data-gallery-item`), previews parsed by `parseSvgPreview` | `office-gallery-pick` `{ gallery, itemId }`                                                                                                       |
+| `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                                                                                                                                              |
 
 The local profile behind `office-ui-account` is stored on the device only, under one suite-wide
 key (`readOfficeProfile`, `writeOfficeProfile`, `clearOfficeProfile`), so every Office viewer on

package/dist/{chunk-DECL6RNI.js → chunk-24MMSCKW.js}

@@ -1,5 +1,5 @@
-import { definer, attachStyles, controlCss, emit } from './chunk-UYPH4ESZ.js';
-import { tok } from './chunk-A3QNC6VS.js';
+import { definer, attachStyles, controlCss, emit } from './chunk-UEJ4F33J.js';
+import { tok } from './chunk-G3LAGZEW.js';
 
 // src/presence.ts
 function participantsFromAwareness(states, selfId) {

package/dist/{chunk-OAGGHX23.js → chunk-4JQLQROF.js}

@@ -1,5 +1,5 @@
-import { definer, attachStyles, controlCss, emit } from './chunk-UYPH4ESZ.js';
-import { tok } from './chunk-A3QNC6VS.js';
+import { definer, attachStyles, controlCss, emit } from './chunk-UEJ4F33J.js';
+import { tok } from './chunk-G3LAGZEW.js';
 import { normalizeHexColor } from 'ooxml-core/color';
 
 var SVG_NS = "http://www.w3.org/2000/svg";

package/dist/{chunk-5L3NYLAW.js → chunk-7XBKSYGM.js}

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

package/dist/{chunk-A3QNC6VS.js → chunk-G3LAGZEW.js}

@@ -207,6 +207,14 @@ var OFFICE_TOKENS = {
   "--office-avatar-color": "var(--office-muted-foreground, #6b7280)",
   "--office-toast-width": "360px",
   "--office-account-field-width": "320px",
+  // Component: galleries
+  "--office-gallery-trigger-height": "24px",
+  "--office-gallery-strip-background": "color-mix(in srgb, var(--office-surface, #f3f4f6) 30%, transparent)",
+  "--office-gallery-command-min-width": "54px",
+  "--office-gallery-command-max-width": "78px",
+  "--office-gallery-command-height": "58px",
+  "--office-gallery-command-icon": "24px",
+  "--office-gallery-popup-max-height": "65vh",
   // Component: title bar
   "--office-title-bar-height": "36px",
   "--office-title-bar-below-height": "28px",

package/dist/{chunk-UYPH4ESZ.js → chunk-UEJ4F33J.js}

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

package/dist/{chunk-GWAPPX66.js → chunk-W5PYFBEZ.js}

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

package/dist/{chunk-DGT2VJT5.js → chunk-W7YI5DSJ.js}

@@ -1,7 +1,7 @@
-import { createIconSvg, paintIcon, defineIcon } from './chunk-GWAPPX66.js';
-import { initialsOf } from './chunk-DECL6RNI.js';
-import { definer, attachStyles, controlCss, present, emit } from './chunk-UYPH4ESZ.js';
-import { tok, FOCUS_RING, COMPACT, OFFICE_TOKENS } from './chunk-A3QNC6VS.js';
+import { createIconSvg, paintIcon, defineIcon } from './chunk-W5PYFBEZ.js';
+import { initialsOf } from './chunk-24MMSCKW.js';
+import { definer, attachStyles, controlCss, present, emit } from './chunk-UEJ4F33J.js';
+import { tok, FOCUS_RING, COMPACT, OFFICE_TOKENS } from './chunk-G3LAGZEW.js';
 
 // src/chrome-controls.ts
 var ICON = `svg { flex: none; width: ${tok("--office-icon-size")}; height: ${tok("--office-icon-size")}; fill: none; stroke: currentColor; stroke-width: ${tok("--office-icon-stroke")};
@@ -1486,8 +1486,519 @@ 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/gallery-styles.ts
+var H = "[data-office-gallery]";
+var GALLERY_LIGHT_CSS = `
+${H} { display: inline-flex; position: relative; flex: none; color: ${tok("--office-foreground")}; }
+${H} .gallery-view { display: contents; }
+${H} button { box-sizing: border-box; font: inherit; color: inherit; cursor: pointer;
+	border: ${tok("--office-border-width")} solid ${tok("--office-border")}; border-radius: ${tok("--office-radius")}; background: ${tok("--office-background")}; }
+${H} button:hover:not(:disabled) { background: ${tok("--office-selected")}; }
+${H} button:disabled { opacity: .4; cursor: not-allowed; }
+${H} button:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: ${tok("--office-focus-offset")}; }
+${H} .trigger { display: inline-flex; align-items: center; gap: ${tok("--office-space-1-5")}; min-height: ${tok("--office-gallery-trigger-height")};
+	padding: 0 ${tok("--office-space-1-5")}; font-size: ${tok("--office-font-size-sm")}; white-space: nowrap; }
+${H}:not([mode=inline]) .trigger { border-color: transparent; background: transparent; }
+${H} .trigger svg { width: ${tok("--office-icon-size-md")}; height: ${tok("--office-icon-size-md")}; fill: none; stroke: currentColor;
+	stroke-width: ${tok("--office-icon-stroke")}; stroke-linecap: round; stroke-linejoin: round; }
+${H}[mode=inline] .trigger, ${H}[chevron-only] .trigger { align-self: stretch; padding: 0 ${tok("--office-space-1")}; }
+${H} .strip { display: flex; gap: ${tok("--office-space-0")}; padding: ${tok("--office-space-0")}; align-items: center; }
+${H} .tile { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: ${tok("--office-space-0")}; }
+${H} .tile[aria-pressed=true] { border: ${tok("--office-border-width-thick")} solid ${tok("--office-accent")};
+	background: color-mix(in srgb, ${tok("--office-accent")} 15%, ${tok("--office-background")}); }
+${H} .tile svg { max-width: 100%; max-height: 100%; }
+${H}[mode=inline] .strip { gap: 0; border: ${tok("--office-border-width")} solid ${tok("--office-border")}; border-inline-end: 0;
+	border-radius: ${tok("--office-radius-sm")} 0 0 ${tok("--office-radius-sm")}; background: ${tok("--office-gallery-strip-background")}; }
+${H}[mode=inline] .trigger { border-radius: 0 ${tok("--office-radius-sm")} ${tok("--office-radius-sm")} 0; background: ${tok("--office-gallery-strip-background")}; }
+${H} .trigger.command { border-color: transparent; background: transparent; justify-content: flex-start; }
+${H} .trigger.command:hover:not(:disabled) { border-color: ${tok("--office-border")}; background: ${tok("--office-selected")}; }
+${H} .trigger.command svg { color: ${tok("--office-command-icon-color")}; }
+${H} .trigger.command-large { flex-direction: column; align-items: center; justify-content: flex-start; gap: ${tok("--office-space-0")};
+	min-width: ${tok("--office-gallery-command-min-width")}; max-width: ${tok("--office-gallery-command-max-width")}; height: ${tok("--office-gallery-command-height")};
+	padding: ${tok("--office-space-1")}; font-size: ${tok("--office-font-size-2xs")}; line-height: ${tok("--office-line-height-tight")}; white-space: normal; text-align: center; }
+${H} .trigger.command-large svg { width: ${tok("--office-gallery-command-icon")}; height: ${tok("--office-gallery-command-icon")}; }
+${H} .popup { box-sizing: border-box; position: fixed; z-index: ${tok("--office-z-popover")}; max-width: calc(100vw - ${tok("--office-space-4")});
+	max-height: ${tok("--office-gallery-popup-max-height")}; overflow: auto; padding: ${tok("--office-space-2")};
+	border: ${tok("--office-border-width")} solid ${tok("--office-border")}; border-radius: ${tok("--office-radius-md")};
+	background: ${tok("--office-popover")}; color: ${tok("--office-popover-foreground")}; box-shadow: ${tok("--office-shadow-lg")}; }
+${H} .popup[hidden] { display: none; }
+${H} .grid { display: grid; gap: ${tok("--office-space-1")}; width: max-content; max-width: 100%; }
+${H} .heading { margin: ${tok("--office-space-1")} 0 ${tok("--office-space-1-5")}; font-size: ${tok("--office-font-size-xs")}; font-weight: ${tok("--office-font-weight-bold")}; }
+${H} .section + .section { margin-top: ${tok("--office-space-2-5")}; }
+@media (pointer: coarse), (max-width: 1023px) {
+	${H} .trigger, ${H} .tile { min-height: ${tok("--office-target-size-touch")}; min-width: ${tok("--office-target-size-touch")}; }
+}
+@media (forced-colors: active) {
+	${H} button, ${H} .popup { color: ButtonText; background: Canvas; border-color: ButtonText; }
+	${H} button:disabled { color: GrayText; opacity: 1; }
+	${H} button:focus-visible, ${H} .tile[aria-pressed=true] { outline: ${tok("--office-focus-width")} solid Highlight; border-color: Highlight; }
+}
+`;
+var injected = /* @__PURE__ */ new WeakSet();
+function attachGalleryStyles(host) {
+  const root = host.getRootNode();
+  if (injected.has(root)) return;
+  const doc = host.ownerDocument;
+  const Sheet = doc.defaultView?.CSSStyleSheet;
+  if (Sheet && "adoptedStyleSheets" in root && "replaceSync" in Sheet.prototype) {
+    try {
+      const sheet = new Sheet();
+      sheet.replaceSync(GALLERY_LIGHT_CSS);
+      root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+      injected.add(root);
+      return;
+    } catch {
+    }
+  }
+  const style = doc.createElement("style");
+  style.dataset.officeGalleryStyles = "";
+  style.textContent = GALLERY_LIGHT_CSS;
+  (root.nodeType === 9 ? doc.head : root).append(style);
+  injected.add(root);
+}
+
+// src/safe-svg.ts
+var BLOCKED_ELEMENTS = /* @__PURE__ */ new Set(["script", "foreignobject", "iframe", "object", "embed"]);
+function parseSvgPreview(doc, svg) {
+  const Parser = doc.defaultView?.DOMParser ?? globalThis.DOMParser;
+  if (typeof Parser !== "function") return null;
+  const parsed = new Parser().parseFromString(svg, "image/svg+xml");
+  const root = parsed.documentElement;
+  if (root.localName !== "svg" || parsed.getElementsByTagName("parsererror").length > 0)
+    return null;
+  for (const node of Array.from(root.querySelectorAll("*"))) {
+    if (BLOCKED_ELEMENTS.has(node.localName.toLowerCase())) {
+      node.remove();
+      continue;
+    }
+    for (const attribute of Array.from(node.attributes))
+      if (/^on/iu.test(attribute.name) || /^\s*javascript:/iu.test(attribute.value))
+        node.removeAttribute(attribute.name);
+  }
+  for (const attribute of Array.from(root.attributes))
+    if (/^on/iu.test(attribute.name) || /^\s*javascript:/iu.test(attribute.value))
+      root.removeAttribute(attribute.name);
+  return doc.importNode(root, true);
+}
+
+// src/gallery-view.ts
+function createGalleryView(doc, hooks, pick, toggle) {
+  const root = doc.createElement("span");
+  root.className = "gallery-view";
+  const strip = doc.createElement("div");
+  strip.className = "strip";
+  const trigger = doc.createElement("button");
+  trigger.type = "button";
+  trigger.className = "trigger";
+  if (hooks.compactAttribute) trigger.setAttribute(hooks.compactAttribute, "");
+  trigger.setAttribute("aria-haspopup", "dialog");
+  trigger.addEventListener("click", toggle);
+  const popup = doc.createElement("div");
+  popup.className = "popup";
+  popup.hidden = true;
+  popup.setAttribute("role", "dialog");
+  root.append(strip, trigger);
+  const tile = (item, w, h, disabled) => {
+    const button = doc.createElement("button");
+    button.type = "button";
+    button.className = "tile";
+    if (hooks.compactAttribute) button.setAttribute(hooks.compactAttribute, "");
+    button.setAttribute(hooks.itemAttribute, item.id);
+    button.disabled = disabled;
+    button.setAttribute("aria-pressed", String(item.applied === true));
+    button.setAttribute("aria-label", item.label);
+    button.title = item.label;
+    button.style.width = `${w + 6}px`;
+    button.style.height = `${h + 6}px`;
+    const preview = item.preview ? parseSvgPreview(doc, item.preview) : null;
+    if (preview) button.append(preview);
+    button.addEventListener("click", () => pick(item.id));
+    return button;
+  };
+  const label = (text2) => {
+    const span = doc.createElement("span");
+    span.textContent = text2;
+    return span;
+  };
+  return {
+    root,
+    trigger,
+    popup,
+    clear() {
+      strip.replaceChildren();
+      popup.replaceChildren();
+      trigger.removeAttribute(hooks.triggerAttribute);
+      trigger.removeAttribute("aria-label");
+      trigger.textContent = "";
+    },
+    setOpen(open) {
+      popup.hidden = !open;
+      if (open) root.append(popup);
+      else popup.remove();
+    },
+    paint({ state, disabled, inline, chevronOnly, open, icon: icon2 }) {
+      const title = state.label;
+      trigger.setAttribute(hooks.triggerAttribute, state.id);
+      popup.setAttribute(hooks.popupAttribute, state.id);
+      trigger.title = inline ? state.moreLabel ?? `More ${title}` : title;
+      trigger.setAttribute("aria-label", trigger.title);
+      trigger.disabled = disabled;
+      trigger.replaceChildren();
+      const command = state.command;
+      trigger.classList.toggle("command", Boolean(command));
+      trigger.classList.toggle("command-large", Boolean(command?.large));
+      if (command) {
+        trigger.removeAttribute("aria-haspopup");
+        trigger.removeAttribute("aria-expanded");
+        trigger.title = command.hint ?? title;
+        trigger.setAttribute("aria-label", title);
+        trigger.append(icon2 ?? createIconSvg(doc), label(title));
+      } else {
+        trigger.setAttribute("aria-haspopup", "dialog");
+        if (!inline && !chevronOnly) trigger.append(icon2 ?? createIconSvg(doc), label(title));
+        const chevron = doc.createElement("span");
+        chevron.textContent = "\u2304";
+        chevron.setAttribute("aria-hidden", "true");
+        trigger.append(chevron);
+      }
+      strip.hidden = !inline;
+      strip.style.display = inline ? "" : "none";
+      const first = state.sections[0];
+      const inlineItems = state.inline ?? first?.items ?? [];
+      strip.replaceChildren(
+        ...inline ? inlineItems.map(
+          (item) => tile(item, first?.tileWidth ?? 40, first?.tileHeight ?? 30, disabled)
+        ) : []
+      );
+      popup.setAttribute("aria-label", title);
+      popup.replaceChildren(
+        ...(open ? state.sections : []).map((section) => {
+          const container = doc.createElement("section");
+          container.className = "section";
+          if (section.title) {
+            const heading = doc.createElement("div");
+            heading.className = "heading";
+            heading.textContent = section.title;
+            container.append(heading);
+          }
+          const grid = doc.createElement("div");
+          grid.className = "grid";
+          grid.style.gridTemplateColumns = `repeat(${section.columns}, minmax(0, 1fr))`;
+          grid.append(
+            ...section.items.map(
+              (item) => tile(item, section.tileWidth, section.tileHeight, disabled)
+            )
+          );
+          container.append(grid);
+          return container;
+        })
+      );
+    }
+  };
+}
+
+// src/gallery.ts
+var HOST_CSS = `
+:host { display: inline-flex; position: relative; flex: none; }
+`;
+var defineGallery = definer("office-ui-gallery", () => {
+  class OfficeUiGallery extends HTMLElement {
+    static pickEvent = "office-gallery-pick";
+    static triggerAttribute = "data-gallery";
+    static popupAttribute = "data-gallery-popup";
+    static itemAttribute = "data-gallery-item";
+    static compactAttribute = null;
+    static observedAttributes = ["mode", "chevron-only", "icon"];
+    #state;
+    #locked = false;
+    #opened = false;
+    #view;
+    constructor() {
+      super();
+      const root = this.attachShadow({ mode: "open" });
+      attachStyles(root, controlCss(HOST_CSS));
+      root.append(this.ownerDocument.createElement("slot"));
+      const statics = this.constructor;
+      this.#view = createGalleryView(
+        this.ownerDocument,
+        statics,
+        (itemId) => this.#pick(itemId),
+        () => {
+          if (this.#state?.command) {
+            this.#pick(this.#state.sections[0]?.items[0]?.id ?? "");
+            return;
+          }
+          this.open = !this.open;
+        }
+      );
+      this.#view.root.addEventListener("keydown", (event) => {
+        if (event.key === "Escape" && this.open) {
+          event.stopPropagation();
+          event.preventDefault();
+          this.close();
+          this.#view.trigger.focus();
+        }
+        if (event.key === "ArrowDown" && event.target === this.#view.trigger) {
+          event.stopPropagation();
+          event.preventDefault();
+          this.open = true;
+          this.#view.popup.querySelector("button:not(:disabled)")?.focus();
+        }
+        if (event.key === "Enter" || event.key === " ") event.stopPropagation();
+      });
+    }
+    get state() {
+      return this.#state;
+    }
+    set state(value) {
+      this.#state = value ?? void 0;
+      this.#paint();
+    }
+    get trigger() {
+      return this.#view.trigger;
+    }
+    get popup() {
+      return this.#view.popup;
+    }
+    get disabled() {
+      return this.#locked;
+    }
+    set disabled(value) {
+      this.#locked = present(value);
+      this.#paint();
+    }
+    get open() {
+      return this.#opened;
+    }
+    set open(value) {
+      const next = present(value) && !this.#unavailable();
+      if (next === this.#opened) return;
+      this.#opened = next;
+      this.#view.setOpen(next);
+      this.#paint();
+      this.#view.trigger.setAttribute("aria-expanded", String(next));
+      this.#cleanup();
+      if (next && this.isConnected) {
+        const doc = this.ownerDocument;
+        doc.addEventListener("pointerdown", this.#outside, true);
+        doc.addEventListener("keydown", this.#escape);
+        doc.defaultView?.addEventListener("resize", this.#position);
+        doc.addEventListener("scroll", this.#position, true);
+        this.#position();
+      }
+    }
+    close() {
+      this.open = false;
+    }
+    /** The trigger glyph: `command.icon` for a command, else the `icon` attribute. */
+    triggerIcon() {
+      const name = this.#state?.command?.icon ?? this.getAttribute("icon");
+      if (!name) return null;
+      const svg = createIconSvg(this.ownerDocument);
+      return paintIcon(svg, name) ? svg : null;
+    }
+    connectedCallback() {
+      this.setAttribute("data-office-gallery", "");
+      attachGalleryStyles(this);
+      this.append(this.#view.root);
+      this.#paint();
+    }
+    disconnectedCallback() {
+      this.close();
+      this.#cleanup();
+    }
+    attributeChangedCallback() {
+      this.#paint();
+    }
+    #unavailable() {
+      const state = this.#state;
+      return this.#locked || !state || state.disabled === true || !state.sections.some((section) => section.items.length > 0);
+    }
+    #paint() {
+      const state = this.#state;
+      if (!state) {
+        this.close();
+        this.#view.clear();
+        this.#view.trigger.disabled = true;
+        return;
+      }
+      const doc = this.ownerDocument;
+      const hadFocus = this.contains(doc.activeElement);
+      if (this.isConnected && this.#view.root.parentElement !== this) this.append(this.#view.root);
+      const itemAttribute = this.constructor.itemAttribute;
+      const focusedId = doc.activeElement?.getAttribute(itemAttribute);
+      const focusInPopup = this.#view.popup.contains(doc.activeElement);
+      const chevronOnly = this.hasAttribute("chevron-only");
+      this.#view.paint({
+        state,
+        disabled: this.#unavailable(),
+        inline: this.getAttribute("mode") === "inline" && !chevronOnly,
+        chevronOnly,
+        open: this.#opened,
+        icon: this.triggerIcon()
+      });
+      if (state.command) this.#view.trigger.removeAttribute("aria-expanded");
+      else this.#view.trigger.setAttribute("aria-expanded", String(this.#opened));
+      if (this.isConnected) {
+        this.toggleAttribute("data-command", Boolean(state.command));
+        this.toggleAttribute("data-command-large", Boolean(state.command?.large));
+      }
+      if (this.#unavailable()) this.close();
+      if (this.#opened) this.#position();
+      if (focusedId && hadFocus)
+        [
+          ...(focusInPopup ? this.#view.popup : this).querySelectorAll(
+            `[${itemAttribute}]`
+          )
+        ].find((node) => node.getAttribute(itemAttribute) === focusedId)?.focus();
+    }
+    #pick(itemId) {
+      const state = this.#state;
+      if (this.#unavailable() || !state?.sections.some((section) => section.items.some((item) => item.id === itemId)))
+        return;
+      this.close();
+      this.#view.trigger.focus();
+      emit(this, this.constructor.pickEvent, {
+        gallery: state.id,
+        itemId
+      });
+    }
+    #outside = (event) => {
+      if (!event.composedPath().includes(this)) this.close();
+    };
+    #escape = (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        this.close();
+        this.#view.trigger.focus();
+      }
+    };
+    #position = () => {
+      const window = this.ownerDocument.defaultView;
+      if (!window) return;
+      const popup = this.#view.popup;
+      const anchor = this.#view.trigger.getBoundingClientRect();
+      const box = popup.getBoundingClientRect();
+      popup.style.left = `${Math.max(8, Math.min(anchor.left, window.innerWidth - box.width - 8))}px`;
+      popup.style.top = `${Math.max(8, Math.min(anchor.bottom + 4, window.innerHeight - box.height - 8))}px`;
+    };
+    #cleanup() {
+      const doc = this.ownerDocument;
+      doc.removeEventListener("pointerdown", this.#outside, true);
+      doc.removeEventListener("keydown", this.#escape);
+      doc.defaultView?.removeEventListener("resize", this.#position);
+      doc.removeEventListener("scroll", this.#position, true);
+    }
+  }
+  return OfficeUiGallery;
+});
+
+// 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 +2018,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 +2155,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 +2185,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 +2286,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 +2365,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 +2594,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 +2627,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 +2730,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 +2770,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 +2959,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 +3042,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 +3693,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 +3742,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 +4999,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 +5046,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 +5411,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 +5513,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 +5648,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 +5684,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 +5959,12 @@ var CONTROL_DEFINERS = [
   defineToasts,
   defineReadOnlyBanner,
   definePasteOptions,
-  defineTitleBar
+  defineTitleBar,
+  defineRibbonSection,
+  defineGallery
 ];
 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, defineGallery, 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 };

package/dist/controls.d.ts

@@ -7,6 +7,8 @@ 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 { defineGallery } from './gallery.js';
 import { defineRuler } from './ruler.js';
 import { defineAccount } from './account.js';
 import { defineButton } from './button.js';
@@ -23,7 +25,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, defineGallery, 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 +38,8 @@ 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 { parseSvgPreview, type OfficeGalleryItem, type OfficeGalleryPickEvent, type OfficeGallerySection, type OfficeGalleryState, } from './gallery.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 +47,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, import("./registry.js").Definer];
 /** Idempotent, SSR-safe (no-op without a DOM). */
 export declare function registerControls(registry?: CustomElementRegistry): void;

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, 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 { defineIcon } from './chunk-GWAPPX66.js';
-import './chunk-DECL6RNI.js';
-import './chunk-UYPH4ESZ.js';
-import './chunk-A3QNC6VS.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, 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-W7YI5DSJ.js';
+export { defineIcon } from './chunk-W5PYFBEZ.js';
+import './chunk-24MMSCKW.js';
+import './chunk-UEJ4F33J.js';
+import './chunk-G3LAGZEW.js';

package/dist/gallery-styles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Light-DOM styles: the gallery renders its tiles beside the host's own children so products can
+ * query them, so the rules live in the host's root (document or shadow root), once per root.
+ */
+export declare const GALLERY_LIGHT_CSS: string;
+/** Add the light-DOM rules to the root holding `host` (a document or a shadow root), once. */
+export declare function attachGalleryStyles(host: HTMLElement): void;

package/dist/gallery-view.d.ts

@@ -0,0 +1,53 @@
+/** One tile. `preview` is SVG markup, parsed as an SVG document with executable parts removed. */
+export interface OfficeGalleryItem {
+    id: string;
+    label: string;
+    applied?: boolean | undefined;
+    preview?: string | undefined;
+}
+export interface OfficeGallerySection {
+    title?: string | undefined;
+    columns: number;
+    tileWidth: number;
+    tileHeight: number;
+    items: readonly OfficeGalleryItem[];
+}
+/** A gallery, translated. With `command` it is a single button that picks the first item. */
+export interface OfficeGalleryState {
+    id: string;
+    label: string;
+    /** Trigger name in the inline strip; defaults to "More <label>". */
+    moreLabel?: string | undefined;
+    disabled?: boolean | undefined;
+    command?: {
+        icon: string;
+        large?: boolean | undefined;
+        hint?: string | undefined;
+    } | undefined;
+    sections: readonly OfficeGallerySection[];
+    /** Tiles shown inline (`mode="inline"`); defaults to the first section's items. */
+    inline?: readonly OfficeGalleryItem[] | undefined;
+}
+export interface GalleryHooks {
+    triggerAttribute: string;
+    popupAttribute: string;
+    itemAttribute: string;
+    compactAttribute: string | null;
+}
+export interface GalleryPaint {
+    state: OfficeGalleryState;
+    disabled: boolean;
+    inline: boolean;
+    chevronOnly: boolean;
+    open: boolean;
+    icon: Element | null;
+}
+/** All gallery markup: the strip, the trigger and the popup. The element owns behaviour. */
+export declare function createGalleryView(doc: Document, hooks: GalleryHooks, pick: (id: string) => void, toggle: () => void): {
+    root: HTMLSpanElement;
+    trigger: HTMLButtonElement;
+    popup: HTMLDivElement;
+    clear(): void;
+    setOpen(open: boolean): void;
+    paint({ state, disabled, inline, chevronOnly, open, icon }: GalleryPaint): void;
+};

package/dist/gallery.d.ts

@@ -0,0 +1,20 @@
+export type OfficeGalleryPickEvent = CustomEvent<{
+    gallery: string;
+    itemId: string;
+}>;
+/**
+ * `<office-ui-gallery>`: Office's ribbon gallery (Shape Styles, Themes, Table Styles). Set
+ * `state` (`OfficeGalleryState`, translated). `mode="inline"` shows a strip of tiles beside a
+ * More button; otherwise the trigger is a labelled dropdown (`chevron-only` keeps just the
+ * chevron, `icon` names its glyph). The popup opens below the trigger, keeps inside the window
+ * and closes on Escape, an outside press or a pick. ArrowDown on the trigger opens it and focuses
+ * the first tile. A pick emits `office-gallery-pick` `{ gallery, itemId }`.
+ *
+ * Tiles render in the light DOM beside the host's children so products can query them
+ * (`data-gallery-item`); the rules join the host's root once. Static `pickEvent`,
+ * `triggerAttribute`, `popupAttribute`, `itemAttribute` and `compactAttribute` keep a product's
+ * published names; override `triggerIcon()` to draw a product glyph.
+ */
+export declare const defineGallery: import("./registry.js").Definer;
+export type { OfficeGalleryItem, OfficeGallerySection, OfficeGalleryState, } from './gallery-view.js';
+export { parseSvgPreview } from './safe-svg.js';

package/dist/icons.js

@@ -1,3 +1,3 @@
-export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-GWAPPX66.js';
-import './chunk-UYPH4ESZ.js';
-import './chunk-A3QNC6VS.js';
+export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-W5PYFBEZ.js';
+import './chunk-UEJ4F33J.js';
+import './chunk-G3LAGZEW.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-gallery", "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,14 +1,14 @@
-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';
-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';
-import { defineSmartArt } from './chunk-OAGGHX23.js';
-export { defineSmartArt, renderDiagramDrawing } from './chunk-OAGGHX23.js';
-export { CONTRACT_REVISION } from './chunk-UYPH4ESZ.js';
-export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-A3QNC6VS.js';
+import { installOfficeUiTheme } from './chunk-7XBKSYGM.js';
+export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-7XBKSYGM.js';
+import { registerControls } from './chunk-W7YI5DSJ.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, 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-W7YI5DSJ.js';
+export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-W5PYFBEZ.js';
+import { definePresence } from './chunk-24MMSCKW.js';
+export { definePresence, initialsOf, participantsFromAwareness } from './chunk-24MMSCKW.js';
+import { defineSmartArt } from './chunk-4JQLQROF.js';
+export { defineSmartArt, renderDiagramDrawing } from './chunk-4JQLQROF.js';
+export { CONTRACT_REVISION } from './chunk-UEJ4F33J.js';
+export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-G3LAGZEW.js';
 
 // src/index.ts
 var OFFICE_UI_TAGS = [
@@ -45,6 +45,8 @@ var OFFICE_UI_TAGS = [
   "office-ui-read-only-banner",
   "office-ui-paste-options",
   "office-ui-title-bar",
+  "office-ui-ribbon-section",
+  "office-ui-gallery",
   "office-ui-presence",
   "office-ui-smartart"
 ];

package/dist/presence.js

@@ -1,3 +1,3 @@
-export { definePresence, initialsOf, participantsFromAwareness } from './chunk-DECL6RNI.js';
-import './chunk-UYPH4ESZ.js';
-import './chunk-A3QNC6VS.js';
+export { definePresence, initialsOf, participantsFromAwareness } from './chunk-24MMSCKW.js';
+import './chunk-UEJ4F33J.js';
+import './chunk-G3LAGZEW.js';

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/dist/safe-svg.d.ts

@@ -0,0 +1 @@
+export declare function parseSvgPreview(doc: Document, svg: string): Element | null;

package/dist/smartart.js

@@ -1,3 +1,3 @@
-export { defineSmartArt, renderDiagramDrawing } from './chunk-OAGGHX23.js';
-import './chunk-UYPH4ESZ.js';
-import './chunk-A3QNC6VS.js';
+export { defineSmartArt, renderDiagramDrawing } from './chunk-4JQLQROF.js';
+import './chunk-UEJ4F33J.js';
+import './chunk-G3LAGZEW.js';

package/dist/theme.js

@@ -1,2 +1,2 @@
-export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-5L3NYLAW.js';
-export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-A3QNC6VS.js';
+export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-7XBKSYGM.js';
+export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-G3LAGZEW.js';

package/dist/tokens.d.ts

@@ -202,6 +202,13 @@ export declare const OFFICE_TOKENS: {
     readonly '--office-avatar-color': "var(--office-muted-foreground, #6b7280)";
     readonly '--office-toast-width': "360px";
     readonly '--office-account-field-width': "320px";
+    readonly '--office-gallery-trigger-height': "24px";
+    readonly '--office-gallery-strip-background': "color-mix(in srgb, var(--office-surface, #f3f4f6) 30%, transparent)";
+    readonly '--office-gallery-command-min-width': "54px";
+    readonly '--office-gallery-command-max-width': "78px";
+    readonly '--office-gallery-command-height': "58px";
+    readonly '--office-gallery-command-icon': "24px";
+    readonly '--office-gallery-popup-max-height': "65vh";
     readonly '--office-title-bar-height': "36px";
     readonly '--office-title-bar-below-height': "28px";
     readonly '--office-title-bar-background': "var(--office-surface, #f3f4f6)";

package/package.json

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