ooxml-ui 1.18.3 → 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                                                                                                     |
 | ------------------- | ------------------------------------------------------------------------------------------------------------ |
@@ -122,10 +125,64 @@ PowerPoint continues to use the same component for ribbon galleries.
 
 Every entry declares an `import` and a `default` export condition, so CommonJS consumers on Node 20.19+ or 22.12+ load it through `require(esm)`.
 
+`installOfficeUiTheme()` installs one theme stylesheet in the document by default. Pass a
+`ShadowRoot` to install scoped mode and control rules inside an embedding app's shadow tree.
+`installOfficeUiThemeFor(element)` installs document defaults plus rules in every enclosing shadow
+root. Product canvases and `prepareOfficeUiBlock()` use this host-aware installation automatically;
+the latter checks again after native framework insertion. Theme attributes inside Angular shadow
+views and other shadow containers therefore work alongside inherited custom properties.
+
+Use semantic `--office-*` palette tokens on a shared ancestor to theme all controls. When overriding
+a specific derived control token, such as `--office-select-background`, apply it to the actual
+control. Product compatibility bridges recompute dependent defaults on their inner chrome so those
+controls follow the product palette.
+
 Importing an entry never touches the DOM (SSR-safe). Elements are defined by the `define*` /
 `register*` functions, which are idempotent, no-ops without a `window`, and refuse to coexist
 with an incompatible build of this package.
 
+## One theme for composed editors
+
+Use the shared `--office-*` CSS tokens on a common ancestor of the canvas and its standalone
+controls. `data-office-theme="light"`, `"dark"`, or `"auto"` works on the document root or a
+scoped container, so two editors on the same page can use different modes. `auto` follows the
+system colour scheme. Nested mode scopes retain inherited typography, spacing and radii.
+
+```html
+<section class="office-scope" data-office-theme="dark">
+	<!-- Mount the framework's standalone toolbar, canvas and other controls here. -->
+</section>
+```
+
+```css
+.office-scope {
+	--office-accent: #0d9488;
+	--office-accent-foreground: #ffffff;
+	--office-ring: #0f766e;
+	--office-font: 'Inter', system-ui, sans-serif;
+	--office-radius: 6px;
+}
+```
+
+Change the attribute or CSS tokens through your framework's normal bindings. Theme changes do
+not require remounting the editor. The semantic palette includes `--office-background` (fields
+and application background), `--office-surface` (toolbar and panel surfaces), `--office-foreground`,
+`--office-muted-foreground`, `--office-border`, `--office-selected`, and the accent and focus tokens
+above. Document paper, cell fills and slide artwork remain document content.
+
+Library-supplied native building blocks opt into `BUILDING_BLOCKS_CSS` through
+`prepareOfficeUiBlock(element, kind, product)`, exported by `ooxml-ui/theme`. It installs the shared
+theme in the element's owner document and marks only that control root with `data-office-block`
+and `data-office-product`. Hosts' own unmarked controls are unaffected. Shadow-root controls
+inherit the same tokens. The installed stylesheet is idempotent and supports forced colours and
+touch targets.
+
+Existing product overrides (`--dve-*`, `--xve-*`, `--vv-*`, `--pptx-*`, and legacy theme options)
+remain compatibility inputs. An explicit product override wins for that product. For a uniform
+composition, put the shared tokens and mode on the common ancestor instead of configuring only
+the canvas: a canvas's local theme cannot change the CSS inherited by a sibling toolbar. This UI
+theme contract is separate from an Office document's embedded theme.
+
 ## Features: elements
 
 `office-ui-menu-button` accepts `submenu` when nested inside another menu.
@@ -134,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/building-block-styles.d.ts

@@ -0,0 +1,5 @@
+export type OfficeUiBlockKind = 'toolbar' | 'formula-bar' | 'tabs' | 'inspector';
+export type OfficeUiProduct = 'docx' | 'xlsx' | 'visio' | 'pptx';
+/** Opt-in styles for native framework controls. They never target host-owned controls implicitly. */
+export declare const BUILDING_BLOCKS_CSS: string;
+//# sourceMappingURL=building-block-styles.d.ts.map

package/dist/building-block-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"building-block-styles.d.ts","sourceRoot":"","sources":["../src/building-block-styles.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,aAAa,GAAG,MAAM,GAAG,WAAW,CAAC;AACjF,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAiDjE,qGAAqG;AACrG,eAAO,MAAM,mBAAmB,QAsD/B,CAAC"}

package/dist/{chunk-MSXUCINT.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-7E3HU7RL.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