ooxml-ui 1.19.0 → 1.20.0

package/README.md

@@ -109,7 +109,10 @@ The shared `office-ui-gallery` also supports `mode="panel"` for modal pickers.
 It displays labelled preview tiles directly, keeps focus when a pick refreshes the
 selection, and supports arrow, Home and End keys. Panel mode has no dropdown
 trigger or popup; `open` remains false. XLSX uses this mode for chart types while
-PowerPoint continues to use the same component for ribbon galleries.
+PowerPoint continues to use the same component for ribbon galleries. A `compact`
+panel keeps its tiles at their preview size without visible labels, and its arrow
+keys only move focus: PowerPoint's inspector uses it for Text Warp, whose pick
+applies at once.
 
 | Entry               | Contents                                                                                                     |
 | ------------------- | ------------------------------------------------------------------------------------------------------------ |
@@ -188,44 +191,44 @@ panel beside the parent, with viewport edge placement. ArrowLeft or Escape
 returns focus to its trigger; choosing a command closes the whole menu tree.
 Arrow navigation stays within the current menu and skips disabled entries.
 
-| 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 `summary`, `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-color-grid`                                | Office's colour picker body: `themeColors` (ten base colours; Theme Colors grid with lighter and darker variants), `themeNames` (a product's own column names), `variantLabel` (names a variant swatch, for a translated product), `extraColors` (one more theme-bound row), `standardColors`, `recentColors`, `value`, `none-label`, `automatic-label`, `more-label`, `label`, `disabled`; events `office-color-pick` `{ color, source, label, theme?, index? }` (a theme swatch reports its column and variant so a product can save a theme reference) and `office-color-more`. The palette maths is `ooxml-core/color` (`buildThemePalette`) |
-| `office-ui-color-custom`                              | The Custom tab of Office's Colors dialog: a hue and saturation square, a luminance slider, Hex, Red/Green/Blue and Hue/Sat/Lum fields (0-255) and New over Current swatches. `value` (`#rrggbb`), `current`, `label`, `disabled`, `valid`; event `office-color-change` `{ color }`                                                                                                                                                                                                                                                                                                                                                               |
-| `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`, `actions` (right end of the tab row); `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-comments-pane`                             | `threads` `[{ id, anchorLabel?, resolved, comments: [{ id, author, initials?, color?, created?, text, edited? }] }]`, `activeThreadId`, `read-only` (controls disabled), `list-only` (navigation list only), `closable`, `add-disabled`, `currentAuthor` (may edit own comments), `labels` (every string), `classNames` (`{ thread?, comment? }` product hook classes), `locale`; arrows, Home and End between threads, Enter or Space selects                                                                                                                                                                                                   | `comment-add` `{ text }`, `comment-reply` `{ threadId, text }`, `comment-edit` `{ threadId, commentId, text }`, `comment-delete` `{ threadId, commentId }`, `thread-resolve` / `thread-reopen` / `thread-select` `{ threadId }`, `comments-close` |
-| `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 `summary`, `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-color-grid`                                | Office's colour picker body: `themeColors` (ten base colours; Theme Colors grid with lighter and darker variants), `themeNames` (a product's own column names), `variantLabel` (names a variant swatch, for a translated product), `palette` (the Theme Colors grid as a product computes it, in place of `themeColors`), `selectedTheme` (`{ column, variant? }`, marks a theme swatch by position), `extraColors` (one more theme-bound row), `standardColors` (empty leaves the row out), `recentColors`, `value`, `none-label`, `automatic-label`, `more-label`, `label`, `disabled`; events `office-color-pick` `{ color, source, label, theme?, index? }` (a theme swatch reports its column and variant so a product can save a theme reference) and `office-color-more`. In a pane narrower than the grid the swatches shrink to fit; `--office-color-swatch-gap` sets the space between them. The palette maths is `ooxml-core/color` (`buildThemePalette`) |
+| `office-ui-color-custom`                              | The Custom tab of Office's Colors dialog: a hue and saturation square, a luminance slider, Hex, Red/Green/Blue and Hue/Sat/Lum fields (0-255) and New over Current swatches. `value` (`#rrggbb`), `current`, `label`, `disabled`, `valid`; event `office-color-change` `{ color }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `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`, `actions` (right end of the tab row); `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`, `panel`), `compact` (a panel of unlabelled tiles), `chevron-only`, `icon`; `open`, `disabled`, `close()`; tiles in light DOM (`data-gallery-item`), previews parsed by `parseSvgPreview`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `office-gallery-pick` `{ gallery, itemId }`                                                                                                                                                                                                       |
+| `office-ui-comments-pane`                             | `threads` `[{ id, anchorLabel?, resolved, comments: [{ id, author, initials?, color?, created?, text, edited? }] }]`, `activeThreadId`, `read-only` (controls disabled), `list-only` (navigation list only), `closable`, `add-disabled`, `currentAuthor` (may edit own comments), `labels` (every string), `classNames` (`{ thread?, comment? }` product hook classes), `locale`; arrows, Home and End between threads, Enter or Space selects                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `comment-add` `{ text }`, `comment-reply` `{ threadId, text }`, `comment-edit` `{ threadId, commentId, text }`, `comment-delete` `{ threadId, commentId }`, `thread-resolve` / `thread-reopen` / `thread-select` `{ threadId }`, `comments-close` |
+| `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/custom-elements.json

@@ -1331,7 +1331,7 @@
 					"name": "OfficeUiColorGrid",
 					"tagName": "office-ui-color-grid",
 					"customElement": true,
-					"description": "`<office-ui-color-grid>`: Office's colour picker body. From the top: an optional `automatic-label` command (Automatic) and `none-label` command (No Fill, No Line), \"Theme Colors\" (ten columns, a base colour over its five lighter and darker variants, built from `themeColors`), \"Standard Colors\" (preceded by the `extraColors` row when a product has one, such as Visio's variant colours), \"Recent Colors\" when `recentColors` has any, and an optional `more-label` command (More Colors...). `value` (`#rrggbb`, `'none'` or `'automatic'`) marks the current choice. `themeNames` renames the ten columns and `variantLabel` names their variants (for a translated product). Choosing emits `office-color-pick` `{ color, source, label, theme?, index? }` (a theme swatch reports its column and variant, so a product can save a theme reference instead of the colour); the More Colors command emits `office-color-more`. Arrow keys move through the swatches and commands, Home and End jump to the ends; ArrowUp on the first row and ArrowDown on the last are left for a host menu. The element is only the grid: a product puts it in its own menu, popup or pane.",
+					"description": "`<office-ui-color-grid>`: Office's colour picker body. From the top: an optional `automatic-label` command (Automatic) and `none-label` command (No Fill, No Line), \"Theme Colors\" (ten columns, a base colour over its five lighter and darker variants, built from `themeColors`), \"Standard Colors\" (preceded by the `extraColors` row when a product has one, such as Visio's variant colours), \"Recent Colors\" when `recentColors` has any, and an optional `more-label` command (More Colors...). `value` (`#rrggbb`, `'none'` or `'automatic'`) marks the current choice. `themeNames` renames the ten columns and `variantLabel` names their variants (for a translated product). A product that computes its own swatches sets `palette` instead (one column per colour it can resolve, each with up to five variants; a missing one leaves its cell empty), and one that stores theme references marks the current swatch with `selectedTheme`. An empty `standardColors` leaves out Standard Colors. Choosing emits `office-color-pick` `{ color, source, label, theme?, index? }` (a theme swatch reports its column and variant, so a product can save a theme reference instead of the colour); the More Colors command emits `office-color-more`. Arrow keys move through the swatches and commands, Home and End jump to the ends; ArrowUp on the first row and ArrowDown on the last are left for a host menu. The element is only the grid: a product puts it in its own menu, popup or pane.",
 					"attributes": [
 						{
 							"name": "automatic-label"
@@ -1404,6 +1404,10 @@
 							},
 							"attribute": "none-label"
 						},
+						{
+							"kind": "field",
+							"name": "palette"
+						},
 						{
 							"kind": "field",
 							"name": "recentColors"
@@ -1416,6 +1420,10 @@
 							},
 							"attribute": "recent-heading"
 						},
+						{
+							"kind": "field",
+							"name": "selectedTheme"
+						},
 						{
 							"kind": "field",
 							"name": "standardColors"
@@ -2108,11 +2116,14 @@
 					"name": "OfficeUiGallery",
 					"tagName": "office-ui-gallery",
 					"customElement": true,
-					"description": "`<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. `mode=\"panel\"` shows labelled sections directly for modal pickers, with arrow/Home/End selection and no dropdown trigger. ArrowDown on the trigger opens it and focuses the first tile. Dropdown arrows/Home/End move focus across sections without applying a choice. A pick emits `office-gallery-pick` `{ gallery, itemId }`. Tiles render in the light DOM beside the host's children (Lit renders the template into the host itself) 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.",
+					"description": "`<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. `mode=\"panel\"` shows labelled sections directly for modal pickers, with arrow/Home/End selection and no dropdown trigger; `compact` keeps its tiles at their preview size without visible labels and lets arrow keys only move focus, for a pane whose pick applies at once. ArrowDown on the trigger opens it and focuses the first tile. Dropdown arrows/Home/End move focus across sections without applying a choice. A pick emits `office-gallery-pick` `{ gallery, itemId }`. Tiles render in the light DOM beside the host's children (Lit renders the template into the host itself) 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.",
 					"attributes": [
 						{
 							"name": "chevron-only"
 						},
+						{
+							"name": "compact"
+						},
 						{
 							"name": "icon"
 						},

package/dist/{chunk-QEIGB73C.js → chunk-4XPAPETH.js}

@@ -1,9 +1,9 @@
 import { TeamsLitElement, LOCALE_HOST, teamsI18n, inheritLocale, pushLocale } from './chunk-FHO7TEWA.js';
-import { THEME_CSS, installOfficeUiTheme } from './chunk-6Y7KR2I3.js';
-import { defineMenuButton, defineMenuItem, registerControls, defineSwitch } from './chunk-SPRZIHUH.js';
+import { THEME_CSS, installOfficeUiTheme } from './chunk-T5ARELU2.js';
+import { defineMenuButton, defineMenuItem, registerControls, defineSwitch } from './chunk-TJ245GDD.js';
 import { registerIcon, getIcon } from './chunk-M6GF5ED2.js';
-import { initialsOf, definePresence } from './chunk-KNC2UEUR.js';
-import { definer, OfficeElement, controlStyles } from './chunk-CWBSXK7P.js';
+import { initialsOf, definePresence } from './chunk-YZH2QS7J.js';
+import { definer, OfficeElement, controlStyles } from './chunk-QLHCGV4C.js';
 import { nothing, html, unsafeCSS, svg } from 'lit';
 import { filterActivity, ACTIVITY_FILTERS, localZone, startOfDay, occurrencesBetween, DAY_MS as DAY_MS$1, dayKey, zonedToUtc, viewDays, zonedParts, shiftAnchor, layoutDay, mentionQueryAt, filterMentionTargets, insertMention, MAX_ATTACHMENTS, mentionsUser, mentionSegments, detectContentKind, contentUrl, readContent, sortFiles, filterFiles, parseServerConfig, STATUS_DURATIONS, MAX_STATUS_MESSAGE_CHARS, isPresenceStatus, PRESENCE_STATUSES, isStatusDuration, IDLE_MINUTE_CHOICES, sanitizeChannelName, MAX_CHANNEL_NAME_CHARS, MAX_CHANNEL_TOPIC_CHARS, MAX_CHAT_MEMBERS, occurrenceAt, MAX_RECURRENCE_COUNT, MINUTE_MS, MAX_MEETING_TITLE, MAX_MEETING_DESCRIPTION, markdownBlocks, repeatChoices, serverOrigin, probeTeamsAccounts, requestTeamsSession, signOutTeamsSession, checkTeamsSession, createTeamsClient, sanitizeAttachment, markdownInline, TeamsSignInError } from 'ooxml-core/teams';
 import { repeat } from 'lit/directives/repeat.js';

package/dist/{chunk-SVRIVUWC.js → chunk-C7B7TJ2J.js}

@@ -1,4 +1,4 @@
-import { defineRibbonGroup, defineRibbonStack, defineButton, defineMenuItem, defineMenuButton } from './chunk-SPRZIHUH.js';
+import { defineRibbonGroup, defineRibbonStack, defineButton, defineMenuItem, defineMenuButton } from './chunk-TJ245GDD.js';
 import { acceptedRibbonAddIns, findRibbonAddInCommand, RIBBON_ADD_IN_EVENT } from 'ooxml-core/ribbon';
 export { RIBBON_ADD_IN_EVENT } from 'ooxml-core/ribbon';
 

package/dist/{chunk-ANPFMQ6E.js → chunk-QBXYGKPB.js}

@@ -1,4 +1,4 @@
-import { OfficeElement, controlStyles, definer } from './chunk-CWBSXK7P.js';
+import { OfficeElement, controlStyles, definer } from './chunk-QLHCGV4C.js';
 import { html } from 'lit';
 import { hexToRgbChannels } from 'ooxml-core/color';
 import { resolveDrawingColor } from 'ooxml-core/diagram';

package/dist/{chunk-CWBSXK7P.js → chunk-QLHCGV4C.js}

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

package/dist/{chunk-6Y7KR2I3.js → chunk-T5ARELU2.js}

@@ -1,4 +1,4 @@
-import { OFFICE_TOKENS, TOUCH } from './chunk-LD3K2RDN.js';
+import { OFFICE_TOKENS, TOUCH } from './chunk-XL77FR4B.js';
 
 // src/theme-bridge.ts
 var LEGACY_OFFICE_THEME_TOKENS = {

package/dist/{chunk-SPRZIHUH.js → chunk-TJ245GDD.js}

@@ -1,7 +1,7 @@
 import { createIconSvg, paintIcon, getIcon } from './chunk-M6GF5ED2.js';
-import { initialsOf } from './chunk-KNC2UEUR.js';
-import { OfficeElement, controlStyles, definer, valueOn, flag, present, triState, withTokens, emit } from './chunk-CWBSXK7P.js';
-import { tok, OFFICE_TOKENS } from './chunk-LD3K2RDN.js';
+import { initialsOf } from './chunk-YZH2QS7J.js';
+import { OfficeElement, controlStyles, definer, valueOn, flag, present, triState, withTokens, emit } from './chunk-QLHCGV4C.js';
+import { tok, OFFICE_TOKENS } from './chunk-XL77FR4B.js';
 import { html, LitElement, nothing, render, svg } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -2038,7 +2038,7 @@ var OfficeUiRibbonGroup = class extends OfficeElement {
 var defineRibbonGroup = definer("office-ui-ribbon-group", () => OfficeUiRibbonGroup);
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/ribbon/ribbon-section.css?raw
-var ribbon_section_default = ":host {\n	display: inline-flex;\n	align-items: stretch;\n}\n::slotted(*) {\n	flex: none;\n}\n";
+var ribbon_section_default = "/* Fill the ribbon row as a group does, so a group's caption keeps its place inside a section. */\n:host {\n	display: inline-flex;\n	align-self: stretch;\n	align-items: stretch;\n}\n::slotted(*) {\n	flex: none;\n}\n";
 
 // src/ribbon/ribbon-section.ts
 var COLUMN_STYLE = { display: "flex", flexDirection: "column", gap: tok("--office-space-0") };
@@ -2146,7 +2146,7 @@ var defineRibbonSection = definer(
 );
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/ribbon/gallery.css?raw
-var gallery_default = "[data-office-gallery] {\n	display: inline-flex;\n	position: relative;\n	flex: none;\n	color: var(--office-foreground);\n}\n[data-office-gallery] .gallery-view {\n	display: contents;\n}\n[data-office-gallery] button {\n	box-sizing: border-box;\n	font: inherit;\n	color: inherit;\n	cursor: pointer;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius);\n	background: var(--office-background);\n}\n[data-office-gallery] button:hover:not(:disabled) {\n	background: var(--office-selected);\n}\n[data-office-gallery] button:disabled {\n	opacity: 0.4;\n	cursor: not-allowed;\n}\n[data-office-gallery] button:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n[data-office-gallery] .trigger {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-1-5);\n	min-height: var(--office-gallery-trigger-height);\n	padding: 0 var(--office-space-1-5);\n	font-size: var(--office-font-size-sm);\n	white-space: nowrap;\n}\n[data-office-gallery]:not([mode='inline']) .trigger {\n	border-color: transparent;\n	background: transparent;\n}\n[data-office-gallery] .trigger svg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n[data-office-gallery][mode='inline'] .trigger,\n[data-office-gallery][chevron-only] .trigger {\n	align-self: stretch;\n	padding: 0 var(--office-space-1);\n}\n[data-office-gallery] .strip {\n	display: flex;\n	gap: var(--office-space-0);\n	padding: var(--office-space-0);\n	align-items: center;\n}\n[data-office-gallery] .tile {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	flex: none;\n	padding: var(--office-space-0);\n}\n[data-office-gallery] .tile[aria-pressed='true'] {\n	border: var(--office-border-width-thick) solid var(--office-accent);\n	background: color-mix(in srgb, var(--office-accent) 15%, var(--office-background));\n}\n[data-office-gallery] .tile svg {\n	max-width: 100%;\n	max-height: 100%;\n}\n[data-office-gallery][mode='inline'] .strip {\n	gap: 0;\n	border: var(--office-border-width) solid var(--office-border);\n	border-inline-end: 0;\n	border-radius: var(--office-radius-sm) 0 0 var(--office-radius-sm);\n	background: var(--office-gallery-strip-background);\n}\n[data-office-gallery][mode='inline'] .trigger {\n	border-radius: 0 var(--office-radius-sm) var(--office-radius-sm) 0;\n	background: var(--office-gallery-strip-background);\n}\n[data-office-gallery] .trigger.command {\n	border-color: transparent;\n	background: transparent;\n	justify-content: flex-start;\n}\n[data-office-gallery] .trigger.command:hover:not(:disabled) {\n	border-color: var(--office-border);\n	background: var(--office-selected);\n}\n[data-office-gallery] .trigger.command svg {\n	color: var(--office-command-icon-color);\n}\n[data-office-gallery] .trigger.command-large {\n	flex-direction: column;\n	align-items: center;\n	justify-content: flex-start;\n	gap: var(--office-space-0);\n	min-width: var(--office-gallery-command-min-width);\n	max-width: var(--office-gallery-command-max-width);\n	height: var(--office-gallery-command-height);\n	padding: var(--office-space-1);\n	font-size: var(--office-font-size-2xs);\n	line-height: var(--office-line-height-tight);\n	white-space: normal;\n	text-align: center;\n}\n[data-office-gallery] .trigger.command-large svg {\n	width: var(--office-gallery-command-icon);\n	height: var(--office-gallery-command-icon);\n}\n[data-office-gallery] .popup {\n	box-sizing: border-box;\n	position: fixed;\n	z-index: var(--office-z-popover);\n	max-width: calc(100vw - var(--office-space-4));\n	max-height: var(--office-gallery-popup-max-height);\n	overflow: auto;\n	padding: var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	color: var(--office-popover-foreground);\n	box-shadow: var(--office-shadow-lg);\n}\n[data-office-gallery] .popup[hidden] {\n	display: none;\n}\n[data-office-gallery] .grid {\n	display: grid;\n	gap: var(--office-space-1);\n	width: max-content;\n	max-width: 100%;\n}\n[data-office-gallery] .heading {\n	margin: var(--office-space-1) 0 var(--office-space-1-5);\n	font-size: var(--office-font-size-xs);\n	font-weight: var(--office-font-weight-bold);\n}\n[data-office-gallery] .section + .section {\n	margin-top: var(--office-space-2-5);\n}\n[data-office-gallery][mode='panel'] {\n	display: block;\n}\n[data-office-gallery][mode='panel'] .grid {\n	width: 100%;\n}\n[data-office-gallery][mode='panel'] .tile {\n	flex-direction: column;\n	gap: var(--office-space-1);\n	width: 100% !important;\n	height: auto !important;\n	min-height: var(--office-target-size-touch);\n	padding: var(--office-space-1);\n}\n[data-office-gallery][mode='panel'] .tile-label {\n	font-size: var(--office-font-size-xs);\n}\n[data-office-gallery][mode='panel'] .tile svg {\n	width: var(--office-gallery-preview-width);\n	height: var(--office-gallery-preview-height);\n}\n[data-office-gallery] .footer {\n	display: flex;\n	flex-direction: column;\n	margin-top: var(--office-space-2);\n	padding-top: var(--office-space-1);\n	border-top: var(--office-border-width) solid var(--office-border);\n}\n[data-office-gallery] .footer-item,\n[data-office-gallery] .tile-menu-item {\n	display: block;\n	padding: var(--office-space-1) var(--office-space-2);\n	border-color: transparent;\n	background: transparent;\n	font-size: var(--office-font-size-sm);\n	text-align: start;\n	white-space: nowrap;\n}\n[data-office-gallery] .tile-menu {\n	box-sizing: border-box;\n	position: fixed;\n	z-index: calc(var(--office-z-popover) + 1);\n	display: flex;\n	flex-direction: column;\n	min-width: 12rem;\n	padding: var(--office-space-1);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	color: var(--office-popover-foreground);\n	box-shadow: var(--office-shadow-lg);\n}\n@media (pointer: coarse), (max-width: 1023px) {\n	[data-office-gallery] .trigger,\n	[data-office-gallery] .tile {\n		min-height: var(--office-target-size-touch);\n		min-width: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	[data-office-gallery] button,\n	[data-office-gallery] .popup {\n		color: ButtonText;\n		background: Canvas;\n		border-color: ButtonText;\n	}\n	[data-office-gallery] button:disabled {\n		color: GrayText;\n		opacity: 1;\n	}\n	[data-office-gallery] button:focus-visible,\n	[data-office-gallery] .tile[aria-pressed='true'] {\n		outline: var(--office-focus-width) solid Highlight;\n		border-color: Highlight;\n	}\n}\n";
+var gallery_default = "[data-office-gallery] {\n	display: inline-flex;\n	position: relative;\n	flex: none;\n	color: var(--office-foreground);\n}\n[data-office-gallery] .gallery-view {\n	display: contents;\n}\n[data-office-gallery] button {\n	box-sizing: border-box;\n	font: inherit;\n	color: inherit;\n	cursor: pointer;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius);\n	background: var(--office-background);\n}\n[data-office-gallery] button:hover:not(:disabled) {\n	background: var(--office-selected);\n}\n[data-office-gallery] button:disabled {\n	opacity: 0.4;\n	cursor: not-allowed;\n}\n[data-office-gallery] button:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n[data-office-gallery] .trigger {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-1-5);\n	min-height: var(--office-gallery-trigger-height);\n	padding: 0 var(--office-space-1-5);\n	font-size: var(--office-font-size-sm);\n	white-space: nowrap;\n}\n[data-office-gallery]:not([mode='inline']) .trigger {\n	border-color: transparent;\n	background: transparent;\n}\n[data-office-gallery] .trigger svg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n[data-office-gallery][mode='inline'] .trigger,\n[data-office-gallery][chevron-only] .trigger {\n	align-self: stretch;\n	padding: 0 var(--office-space-1);\n}\n[data-office-gallery] .strip {\n	display: flex;\n	gap: var(--office-space-0);\n	padding: var(--office-space-0);\n	align-items: center;\n}\n[data-office-gallery] .tile {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	flex: none;\n	padding: var(--office-space-0);\n}\n[data-office-gallery] .tile[aria-pressed='true'] {\n	border: var(--office-border-width-thick) solid var(--office-accent);\n	background: color-mix(in srgb, var(--office-accent) 15%, var(--office-background));\n}\n[data-office-gallery] .tile svg {\n	max-width: 100%;\n	max-height: 100%;\n}\n[data-office-gallery][mode='inline'] .strip {\n	gap: 0;\n	border: var(--office-border-width) solid var(--office-border);\n	border-inline-end: 0;\n	border-radius: var(--office-radius-sm) 0 0 var(--office-radius-sm);\n	background: var(--office-gallery-strip-background);\n}\n[data-office-gallery][mode='inline'] .trigger {\n	border-radius: 0 var(--office-radius-sm) var(--office-radius-sm) 0;\n	background: var(--office-gallery-strip-background);\n}\n[data-office-gallery] .trigger.command {\n	border-color: transparent;\n	background: transparent;\n	justify-content: flex-start;\n}\n[data-office-gallery] .trigger.command:hover:not(:disabled) {\n	border-color: var(--office-border);\n	background: var(--office-selected);\n}\n[data-office-gallery] .trigger.command svg {\n	color: var(--office-command-icon-color);\n}\n[data-office-gallery] .trigger.command-large {\n	flex-direction: column;\n	align-items: center;\n	justify-content: flex-start;\n	gap: var(--office-space-0);\n	min-width: var(--office-gallery-command-min-width);\n	max-width: var(--office-gallery-command-max-width);\n	height: var(--office-gallery-command-height);\n	padding: var(--office-space-1);\n	font-size: var(--office-font-size-2xs);\n	line-height: var(--office-line-height-tight);\n	white-space: normal;\n	text-align: center;\n}\n[data-office-gallery] .trigger.command-large svg {\n	width: var(--office-gallery-command-icon);\n	height: var(--office-gallery-command-icon);\n}\n[data-office-gallery] .popup {\n	box-sizing: border-box;\n	position: fixed;\n	z-index: var(--office-z-popover);\n	max-width: calc(100vw - var(--office-space-4));\n	max-height: var(--office-gallery-popup-max-height);\n	overflow: auto;\n	padding: var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	color: var(--office-popover-foreground);\n	box-shadow: var(--office-shadow-lg);\n}\n[data-office-gallery] .popup[hidden] {\n	display: none;\n}\n[data-office-gallery] .grid {\n	display: grid;\n	gap: var(--office-space-1);\n	width: max-content;\n	max-width: 100%;\n}\n[data-office-gallery] .heading {\n	margin: var(--office-space-1) 0 var(--office-space-1-5);\n	font-size: var(--office-font-size-xs);\n	font-weight: var(--office-font-weight-bold);\n}\n[data-office-gallery] .section + .section {\n	margin-top: var(--office-space-2-5);\n}\n[data-office-gallery][mode='panel'] {\n	display: block;\n}\n[data-office-gallery][mode='panel'] .grid {\n	width: 100%;\n}\n[data-office-gallery][mode='panel']:not([compact]) .tile {\n	flex-direction: column;\n	gap: var(--office-space-1);\n	width: 100% !important;\n	height: auto !important;\n	min-height: var(--office-target-size-touch);\n	padding: var(--office-space-1);\n}\n[data-office-gallery][mode='panel'] .tile-label {\n	font-size: var(--office-font-size-xs);\n}\n[data-office-gallery][mode='panel'] .tile svg {\n	width: var(--office-gallery-preview-width);\n	height: var(--office-gallery-preview-height);\n}\n[data-office-gallery] .footer {\n	display: flex;\n	flex-direction: column;\n	margin-top: var(--office-space-2);\n	padding-top: var(--office-space-1);\n	border-top: var(--office-border-width) solid var(--office-border);\n}\n[data-office-gallery] .footer-item,\n[data-office-gallery] .tile-menu-item {\n	display: block;\n	padding: var(--office-space-1) var(--office-space-2);\n	border-color: transparent;\n	background: transparent;\n	font-size: var(--office-font-size-sm);\n	text-align: start;\n	white-space: nowrap;\n}\n[data-office-gallery] .tile-menu {\n	box-sizing: border-box;\n	position: fixed;\n	z-index: calc(var(--office-z-popover) + 1);\n	display: flex;\n	flex-direction: column;\n	min-width: 12rem;\n	padding: var(--office-space-1);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	color: var(--office-popover-foreground);\n	box-shadow: var(--office-shadow-lg);\n}\n@media (pointer: coarse), (max-width: 1023px) {\n	[data-office-gallery] .trigger,\n	[data-office-gallery] .tile {\n		min-height: var(--office-target-size-touch);\n		min-width: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	[data-office-gallery] button,\n	[data-office-gallery] .popup {\n		color: ButtonText;\n		background: Canvas;\n		border-color: ButtonText;\n	}\n	[data-office-gallery] button:disabled {\n		color: GrayText;\n		opacity: 1;\n	}\n	[data-office-gallery] button:focus-visible,\n	[data-office-gallery] .tile[aria-pressed='true'] {\n		outline: var(--office-focus-width) solid Highlight;\n		border-color: Highlight;\n	}\n}\n";
 
 // src/ribbon/gallery-styles.ts
 var GALLERY_LIGHT_CSS = withTokens(gallery_default);
@@ -2212,9 +2212,9 @@ var OfficeUiGallery = class extends OfficeElement {
   static itemAttribute = "data-gallery-item";
   static compactAttribute = null;
   static styles = controlStyles(HOST_CSS);
-  /** `mode`, `chevron-only` and `icon` are read from the attributes, as before. */
+  /** `mode`, `chevron-only`, `icon` and `compact` are read from the attributes. */
   static get observedAttributes() {
-    return [...super.observedAttributes, "mode", "chevron-only", "icon"];
+    return [...super.observedAttributes, "mode", "chevron-only", "icon", "compact"];
   }
   model;
   locked = false;
@@ -2501,7 +2501,7 @@ var OfficeUiGallery = class extends OfficeElement {
         event.preventDefault();
         event.stopPropagation();
         items[next]?.focus();
-        if (panel) items[next]?.click();
+        if (panel && !this.hasAttribute("compact")) items[next]?.click();
         return;
       }
       if (panel) return;
@@ -2592,7 +2592,7 @@ var OfficeUiGallery = class extends OfficeElement {
 			@blur=${() => this.endPreview()}
 			@contextmenu=${(event) => this.onTileContextMenu(event, item.id)}
 			@keydown=${(event) => this.onTileKey(event, item.id)}
-		>${preview}${this.getAttribute("mode") === "panel" ? html`<span class="tile-label">${item.label}</span>` : ""}</button>`;
+		>${preview}${this.getAttribute("mode") === "panel" && !this.hasAttribute("compact") ? html`<span class="tile-label">${item.label}</span>` : ""}</button>`;
   }
   lightTemplate() {
     const statics = this.constructor;
@@ -5670,7 +5670,7 @@ var OfficeUiSymbolPicker = class extends OfficeElement {
 var defineSymbolPicker = definer("office-ui-symbol-picker", () => OfficeUiSymbolPicker);
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/form/color-grid.css?raw
-var color_grid_default = "/* Tokens: --office-space-*, --office-border, --office-selected, --office-field-border-focus. */\n:host {\n	display: block;\n	color: var(--office-foreground);\n	font: var(--office-font-size-sm) / var(--office-line-height-tight) var(--office-font);\n}\n:host([hidden]) {\n	display: none;\n}\n.grid {\n	display: grid;\n	gap: var(--office-space-1);\n	padding: var(--office-space-1);\n	width: max-content;\n}\n.heading {\n	padding: var(--office-space-0) var(--office-space-1);\n	background: var(--office-selected);\n	color: var(--office-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.cells {\n	display: grid;\n	grid-template-columns: repeat(10, var(--office-space-4));\n	gap: var(--office-space-1);\n}\n/* The five variant rows sit flush under one another, as in Office. */\n.variants {\n	display: grid;\n	gap: 0;\n}\n.swatch {\n	box-sizing: border-box;\n	width: var(--office-space-4);\n	height: var(--office-space-4);\n	padding: 0;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: 0;\n	background: var(--swatch);\n	cursor: pointer;\n}\n.swatch:hover:not(:disabled),\n.swatch:focus-visible,\n.swatch[aria-checked='true'] {\n	outline: var(--office-space-0) solid var(--office-field-border-focus);\n	outline-offset: var(--office-space-px);\n	position: relative;\n	z-index: 1;\n}\n.command {\n	box-sizing: border-box;\n	display: flex;\n	align-items: center;\n	width: 100%;\n	min-height: var(--office-control-height-md);\n	padding: 0 var(--office-space-2);\n	border: 0;\n	border-radius: var(--office-radius-sm);\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	text-align: start;\n	cursor: pointer;\n}\n.command:hover:not(:disabled),\n.command:focus-visible,\n.command[aria-checked='true'] {\n	background: var(--office-selected);\n	outline: none;\n}\nbutton:disabled {\n	opacity: 0.4;\n	cursor: not-allowed;\n}\n@media (forced-colors: active) {\n	.swatch {\n		forced-color-adjust: none;\n		border-color: CanvasText;\n	}\n	.swatch:focus-visible,\n	.swatch[aria-checked='true'] {\n		outline-color: Highlight;\n	}\n}\n";
+var color_grid_default = "/* Tokens: --office-space-*, --office-color-swatch-gap, --office-border, --office-selected,\n   --office-field-border-focus. */\n:host {\n	display: block;\n	color: var(--office-foreground);\n	font: var(--office-font-size-sm) / var(--office-line-height-tight) var(--office-font);\n}\n:host([hidden]) {\n	display: none;\n}\n.grid {\n	box-sizing: border-box;\n	display: grid;\n	gap: var(--office-space-1);\n	padding: var(--office-space-1);\n	width: max-content;\n	/* In a pane narrower than the grid, the swatches shrink instead of overflowing it. */\n	max-width: 100%;\n}\n.heading {\n	padding: var(--office-space-0) var(--office-space-1);\n	background: var(--office-selected);\n	color: var(--office-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.cells {\n	display: grid;\n	grid-template-columns: repeat(var(--_columns, 10), minmax(0, var(--office-space-4)));\n	gap: var(--office-color-swatch-gap);\n}\n/* The five variant rows sit flush under one another, as in Office. */\n.variants {\n	display: grid;\n	gap: 0;\n}\n.swatch {\n	box-sizing: border-box;\n	width: 100%;\n	aspect-ratio: 1;\n	padding: 0;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: 0;\n	background: var(--swatch);\n	cursor: pointer;\n}\n.swatch:hover:not(:disabled),\n.swatch:focus-visible,\n.swatch[aria-checked='true'] {\n	outline: var(--office-space-0) solid var(--office-field-border-focus);\n	outline-offset: var(--office-space-px);\n	position: relative;\n	z-index: 1;\n}\n.command {\n	box-sizing: border-box;\n	display: flex;\n	align-items: center;\n	width: 100%;\n	min-height: var(--office-control-height-md);\n	padding: 0 var(--office-space-2);\n	border: 0;\n	border-radius: var(--office-radius-sm);\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	text-align: start;\n	cursor: pointer;\n}\n.command:hover:not(:disabled),\n.command:focus-visible,\n.command[aria-checked='true'] {\n	background: var(--office-selected);\n	outline: none;\n}\nbutton:disabled {\n	opacity: 0.4;\n	cursor: not-allowed;\n}\n@media (forced-colors: active) {\n	.swatch {\n		forced-color-adjust: none;\n		border-color: CanvasText;\n	}\n	.swatch:focus-visible,\n	.swatch[aria-checked='true'] {\n		outline-color: Highlight;\n	}\n}\n";
 
 // src/form/color-grid.ts
 var COLUMNS = 10;
@@ -5679,6 +5679,8 @@ var OfficeUiColorGrid = class extends OfficeElement {
   static properties = {
     themeColors: { attribute: false },
     themeNames: { attribute: false },
+    palette: { attribute: false },
+    selectedTheme: { attribute: false },
     variantLabel: { attribute: false },
     extraColors: { attribute: false },
     standardColors: { attribute: false },
@@ -5698,6 +5700,8 @@ var OfficeUiColorGrid = class extends OfficeElement {
     this.themeColors = null;
     this.themeNames = null;
     this.variantLabel = null;
+    this.palette = null;
+    this.selectedTheme = null;
     this.extraColors = [];
     this.standardColors = OFFICE_STANDARD_COLORS;
     this.recentColors = [];
@@ -5761,15 +5765,17 @@ var OfficeUiColorGrid = class extends OfficeElement {
   render() {
     const disabled = present(this.disabled);
     const value = this.value ? normalizePaletteHex(this.value) ?? this.value : null;
+    const position = this.selectedTheme;
+    const checked = (item, source, column) => position ? source === "theme" && column === position.column && item.variant?.kind === position.variant?.kind && item.variant?.percent === position.variant?.percent : value === item.hex;
     let row = 0;
-    const command = (text, name2, checked, run) => html`<button
+    const command = (text, name2, checked2, run) => html`<button
 				type="button"
 				class="command"
 				data-command=${name2}
 				data-row=${row++}
 				data-column="0"
-				role=${checked === void 0 ? "button" : "menuitemradio"}
-				aria-checked=${checked === void 0 ? nothing : String(checked)}
+				role=${checked2 === void 0 ? "button" : "menuitemradio"}
+				aria-checked=${checked2 === void 0 ? nothing : String(checked2)}
 				?disabled=${disabled}
 				@click=${run}
 				>${text}</button
@@ -5784,7 +5790,7 @@ var OfficeUiColorGrid = class extends OfficeElement {
 				data-column=${column}
 				title=${item.label}
 				aria-label=${item.label}
-				aria-checked=${String(value === item.hex)}
+				aria-checked=${String(checked(item, source, column))}
 				style=${`--swatch:${item.hex}`}
 				?disabled=${disabled}
 				@click=${() => this.pick(
@@ -5794,19 +5800,22 @@ var OfficeUiColorGrid = class extends OfficeElement {
       source === "theme" ? { theme: { column, ...item.variant ? { variant: item.variant } : {} } } : source === "extra" ? { index: column } : {}
     )}
 			></button>`;
-    const cells = (items, source) => {
-      const result = html`<div class="cells" data-cells=${source}
-				>${items.map((item, index) => swatch(item, source, index))}</div
+    const cells = (items, source, columns = COLUMNS) => {
+      const result = html`<div class="cells" data-cells=${source} style=${`--_columns:${columns}`}
+				>${items.map(
+        (item, index) => item ? swatch(item, source, index) : html`<span></span>`
+      )}</div
 			>`;
       row++;
       return result;
     };
-    const palette = buildThemePalette(this.themeColors ?? void 0, this.themeNames ?? void 0);
+    const palette = this.palette ?? buildThemePalette(this.themeColors ?? void 0, this.themeNames ?? void 0);
     const extra = (this.extraColors ?? []).slice(0, COLUMNS);
-    const name = this.variantLabel;
+    const name = this.palette ? null : this.variantLabel;
+    const standard = this.standardColors ?? OFFICE_STANDARD_COLORS;
     const variants = (index) => palette.map((column) => {
       const item = column.variants[index];
-      return name ? { ...item, label: name(column.name, item.variant) } : item;
+      return item && name ? { ...item, label: name(column.name, item.variant) } : item;
     });
     const recent = (this.recentColors ?? []).map((hex) => normalizePaletteHex(hex)).filter((hex) => !!hex).slice(0, COLUMNS).map((hex) => ({ hex, label: hex.toUpperCase() }));
     const automatic = this.automaticLabel;
@@ -5822,12 +5831,16 @@ var OfficeUiColorGrid = class extends OfficeElement {
 			<div class="heading">${this.themeHeading}</div>
 			${cells(
       palette.map((column) => column.base),
-      "theme"
+      "theme",
+      palette.length || COLUMNS
     )}
-			<div class="variants">${[0, 1, 2, 3, 4].map((index) => cells(variants(index), "theme"))}</div>
+			<div class="variants"
+				>${[0, 1, 2, 3, 4].map(
+      (index) => cells(variants(index), "theme", palette.length || COLUMNS)
+    )}</div
+			>
 			${extra.length ? cells(extra, "extra") : nothing}
-			<div class="heading">${this.standardHeading}</div>
-			${cells(this.standardColors ?? OFFICE_STANDARD_COLORS, "standard")}
+			${standard.length ? html`<div class="heading">${this.standardHeading}</div> ${cells(standard, "standard")}` : nothing}
 			${recent.length ? html`<div class="heading">${this.recentHeading}</div> ${cells(recent, "recent")}` : nothing}
 			${more ? command(more, "more", void 0, () => this.more()) : nothing}</div
 		>`;

package/dist/{chunk-KH2ZG3N6.js → chunk-UB36NYDT.js}

@@ -1,8 +1,8 @@
-import { defineSmartArt } from './chunk-ANPFMQ6E.js';
-import { TEAMS_TAGS, registerTeams } from './chunk-QEIGB73C.js';
-import { installOfficeUiTheme } from './chunk-6Y7KR2I3.js';
-import { registerControls } from './chunk-SPRZIHUH.js';
-import { definePresence } from './chunk-KNC2UEUR.js';
+import { defineSmartArt } from './chunk-QBXYGKPB.js';
+import { TEAMS_TAGS, registerTeams } from './chunk-4XPAPETH.js';
+import { installOfficeUiTheme } from './chunk-T5ARELU2.js';
+import { registerControls } from './chunk-TJ245GDD.js';
+import { definePresence } from './chunk-YZH2QS7J.js';
 
 // src/index.ts
 var OFFICE_UI_TAGS = [

package/dist/{chunk-LD3K2RDN.js → chunk-XL77FR4B.js}

@@ -219,6 +219,8 @@ var OFFICE_TOKENS = {
   "--office-comments-pane-width": "300px",
   "--office-comment-avatar-size": "24px",
   "--office-account-field-width": "320px",
+  // Component: colour grid
+  "--office-color-swatch-gap": "var(--office-space-1, 4px)",
   // Component: galleries
   "--office-gallery-trigger-height": "24px",
   "--office-gallery-strip-background": "color-mix(in srgb, var(--office-surface, #f3f4f6) 30%, transparent)",

package/dist/{chunk-KNC2UEUR.js → chunk-YZH2QS7J.js}

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