ooxml-ui 0.17.0 → 0.18.0

package/README.md

@@ -70,7 +70,7 @@ with an incompatible build of this package.
 | `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`                                                                                                                                                                                                                                                                                     | `office-status-activate` `{ id }`                                                                                                                 |
+| `office-ui-status-bar` / `-status-item`               | `label`, `value`, `interactive`, `id`; controlled bar: `state` `{ items?, toggles?, views?, zoom? }` with `collaboration` and `end` slots                                                                                                                                                                                 | `office-status-activate` `{ id }`                                                                                                                 |
 | `office-ui-zoom-slider`                               | `value` (percent), `min`, `max`, `step`, `disabled`, `fit` (fit button name), `label`                                                                                                                                                                                                                                     | `input`, `change`; fit: `office-command` `{ command: 'zoom-fit' }`                                                                                |
 | `office-ui-tab-strip`                                 | `tabs` `[{ id, label, title? }]`, `selected`, `label`, `previous-label`, `next-label`, `add-label`, `add-disabled`, `add-title`, `disabled`                                                                                                                                                                               | `office-tab-select` `{ id }` (cancelable); add: `office-command` `{ command: 'tab-add' }`                                                         |
 | `office-ui-context-menu` / `office-ui-menu-separator` | Children mode: `label`, `openAt(x, y)`, `close()`, `open` over `office-ui-menu-item` and separator children. Controlled mode: `state` `{ x, y, label, items: [{ id, label, separatorBefore?, heading?, danger?, disabled?, checked?, icon? }], markers?, zIndex?, autoFocus? }`; arrows, Home, End and type-ahead in both | children: item `office-command` `{ command }`; controlled: `office-menu-request` `{ id }`, `office-menu-close` `{ reason }` (never closes itself) |

package/dist/{chunk-EIZJR3CC.js → chunk-BN5K27RN.js}

@@ -1,4 +1,4 @@
-import { createIconSvg, paintIcon, defineIcon } from './chunk-LI7NB7HR.js';
+import { createIconSvg, paintIcon, defineIcon } from './chunk-HRWP3FWD.js';
 import { initialsOf } from './chunk-DECL6RNI.js';
 import { definer, attachStyles, controlCss, present, emit } from './chunk-UYPH4ESZ.js';
 import { tok, FOCUS_RING, COMPACT, OFFICE_TOKENS } from './chunk-A3QNC6VS.js';
@@ -4183,23 +4183,234 @@ var defineSelect = definer("office-ui-select", () => {
   return OfficeUiSelect;
 });
 
+// src/status-bar-view.ts
+function createStatusBarView(doc, activate2) {
+  const el = (tag, className) => {
+    const node = doc.createElement(tag);
+    node.className = className;
+    return node;
+  };
+  const sep = (className) => {
+    const node = el("i", className);
+    node.setAttribute("aria-hidden", "true");
+    return node;
+  };
+  const slot = (name2) => {
+    const node = doc.createElement("slot");
+    if (name2) node.name = name2;
+    return node;
+  };
+  const button = (id, className) => {
+    const node = el("button", className);
+    node.type = "button";
+    node.dataset.id = id;
+    node.addEventListener("click", () => activate2(id));
+    node.addEventListener("keydown", (event) => {
+      const { key, ctrlKey, metaKey, altKey } = event;
+      if ((key === " " || key === "Enter") && !ctrlKey && !metaKey && !altKey)
+        event.stopPropagation();
+    });
+    return node;
+  };
+  const paint = (node, spec) => {
+    let svg = node.querySelector("svg");
+    if (!svg) svg = node.insertBefore(createIconSvg(doc), node.firstChild);
+    paintIcon(svg, spec.icon);
+    node.title = spec.label;
+    node.setAttribute("aria-label", spec.label);
+    if (spec.pressed !== void 0) node.setAttribute("aria-pressed", String(spec.pressed));
+    else node.removeAttribute("aria-pressed");
+    node.hidden = spec.hidden === true;
+    let text2 = node.querySelector(".label");
+    if (spec.text) {
+      text2 ??= node.appendChild(el("span", "label"));
+      text2.textContent = spec.text;
+    } else {
+      text2?.remove();
+    }
+  };
+  const keyed = (parent, make, patch) => {
+    const nodes = /* @__PURE__ */ new Map();
+    return (specs) => {
+      for (const [id, node] of nodes)
+        if (!specs.some((spec) => spec.id === id)) {
+          node.remove();
+          nodes.delete(id);
+        }
+      for (const spec of specs) {
+        let node = nodes.get(spec.id);
+        if (!node) {
+          node = make(spec);
+          nodes.set(spec.id, node);
+        }
+        patch(node, spec);
+      }
+      const current = [...parent.children];
+      if (specs.some((spec, index) => current[index] !== nodes.get(spec.id)))
+        parent.append(...specs.map((spec) => nodes.get(spec.id)));
+    };
+  };
+  const items = el("span", "items");
+  const renderItems = keyed(
+    items,
+    (spec) => {
+      const node = el("span", "item");
+      node.dataset.item = spec.id;
+      return node;
+    },
+    (node, spec) => {
+      node.textContent = spec.text;
+      if (spec.title) node.title = spec.title;
+      else node.removeAttribute("title");
+      node.classList.toggle("saving", spec.tone === "saving");
+      node.classList.toggle("error", spec.tone === "error");
+      node.classList.toggle("narrow-hide", spec.narrowHide === true);
+      if (spec.live) node.setAttribute("aria-live", "polite");
+      else node.removeAttribute("aria-live");
+    }
+  );
+  const spacer = el("span", "spacer");
+  const toggles = el("span", "toggles");
+  const renderToggles = keyed(
+    toggles,
+    (spec) => button(spec.id, "toggle"),
+    (node, spec) => paint(node, spec)
+  );
+  const viewSep = sep("sep tight");
+  const views = el("div", "group views");
+  const renderViews = keyed(
+    views,
+    (spec) => button(spec.id, "view"),
+    (node, spec) => paint(node, spec)
+  );
+  const collaboration = slot("collaboration");
+  const collabSep = sep("sep tight");
+  collabSep.hidden = true;
+  collaboration.addEventListener("slotchange", () => {
+    collabSep.hidden = collaboration.assignedNodes().length === 0;
+  });
+  const zoomSep = sep("sep tight");
+  const zoom = el("div", "group zoom");
+  const zoomOut = button("zoomOut", "zoom-step");
+  zoomOut.append(createIconSvg(doc));
+  const zoomFit = button("zoomFit", "zoom-fit");
+  const zoomIn = button("zoomIn", "zoom-step");
+  zoomIn.append(createIconSvg(doc));
+  zoom.append(zoomOut, zoomFit, zoomIn);
+  const bar = el("div", "bar");
+  bar.setAttribute("part", "bar");
+  bar.append(
+    items,
+    slot(""),
+    spacer,
+    toggles,
+    viewSep,
+    views,
+    collabSep,
+    collaboration,
+    slot("end"),
+    zoomSep,
+    zoom
+  );
+  const name = (node, label) => {
+    node.title = label;
+    node.setAttribute("aria-label", label);
+  };
+  return {
+    bar,
+    render(state) {
+      const itemSpecs = state?.items ?? [];
+      renderItems(itemSpecs);
+      items.hidden = itemSpecs.length === 0;
+      const toggleSpecs = state?.toggles ?? [];
+      renderToggles(toggleSpecs);
+      toggles.hidden = toggleSpecs.length === 0;
+      const viewSpecs = state?.views || [];
+      renderViews(viewSpecs);
+      views.hidden = viewSpecs.length === 0;
+      viewSep.hidden = views.hidden || toggles.hidden;
+      spacer.hidden = !state;
+      const z = state?.zoom;
+      zoomSep.hidden = zoom.hidden = !z;
+      if (z) {
+        name(zoomOut, z.outLabel);
+        name(zoomFit, z.fitLabel);
+        name(zoomIn, z.inLabel);
+        paintIcon(zoomOut.querySelector("svg"), z.outIcon ?? "minus");
+        paintIcon(zoomIn.querySelector("svg"), z.inIcon ?? "plus");
+        zoomFit.textContent = `${Math.round(z.percent)}%`;
+      }
+    }
+  };
+}
+
 // src/status-bar.ts
 var BAR_CSS = `
 :host { display: flex; align-items: center; gap: ${tok("--office-space-3")}; min-height: ${tok("--office-status-bar-height")}; padding: 0 ${tok("--office-space-2")}; font-size: ${tok("--office-font-size-xs")};
 	background: ${tok("--office-surface")}; color: ${tok("--office-foreground")};
 	border-top: ${tok("--office-border-width")} solid ${tok("--office-border")}; font-family: ${tok("--office-font")}; }
 ::slotted([slot="end"]) { margin-inline-start: auto; }
-@media (forced-colors: active) { :host { background: Canvas; color: CanvasText; border-top-color: CanvasText; } }
+.bar { display: contents; }
+[hidden] { display: none !important; }
+:host([data-controlled]) { display: block; flex: none; padding: 0; gap: 0; }
+:host([data-controlled]) .bar { box-sizing: border-box; display: flex; align-items: center; gap: ${tok("--office-space-1")}; width: 100%;
+	min-height: ${tok("--office-status-bar-height")}; padding: ${tok("--office-space-0")} ${tok("--office-space-2")}; color: ${tok("--office-muted-foreground")}; }
+:host([data-controlled]) ::slotted([slot="end"]) { margin-inline-start: 0; }
+.items { display: flex; align-items: center; min-width: 0; }
+.item { flex: none; white-space: nowrap; }
+.item + .item::before { content: ""; display: inline-block; width: ${tok("--office-border-width")}; height: ${tok("--office-space-3")};
+	margin: 0 ${tok("--office-space-2")}; vertical-align: middle; background: ${tok("--office-border")}; }
+.item.saving { color: ${tok("--office-warning")}; }
+.item.error { color: ${tok("--office-danger")}; }
+.spacer { flex: 1; }
+.toggles, .group { display: flex; align-items: center; gap: ${tok("--office-space-0")}; }
+.sep { flex: none; width: ${tok("--office-border-width")}; height: ${tok("--office-space-3")}; margin: 0 ${tok("--office-space-0")}; background: ${tok("--office-border")}; }
+.bar button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: ${tok("--office-space-1")};
+	min-width: ${tok("--office-control-height-xs")}; min-height: ${tok("--office-control-height-xs")}; padding: ${tok("--office-space-1")}; border: 0; border-radius: ${tok("--office-radius-sm")};
+	background: transparent; color: inherit; font: inherit; cursor: pointer; touch-action: manipulation; }
+.bar button:hover { background: ${tok("--office-selected")}; color: ${tok("--office-foreground")}; }
+.bar button[aria-pressed="true"] { color: ${tok("--office-accent")}; }
+.bar button:active { opacity: .8; }
+.bar button:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: ${tok("--office-focus-offset")}; }
+.bar svg { flex: none; width: ${tok("--office-icon-size")}; height: ${tok("--office-icon-size")}; fill: none; stroke: currentColor;
+	stroke-width: ${tok("--office-icon-stroke")}; stroke-linecap: round; stroke-linejoin: round; }
+.toggle svg, .zoom-step svg { width: ${tok("--office-icon-size-sm")}; height: ${tok("--office-icon-size-sm")}; }
+.zoom-fit { min-width: ${tok("--office-zoom-value-width")}; font-variant-numeric: tabular-nums; }
+@media ${COMPACT} { .narrow-hide, .toggle .label { display: none !important; } }
+@media (pointer: coarse) { .bar button { min-width: ${tok("--office-target-size-touch")}; min-height: ${tok("--office-target-size-touch")}; } }
+@media (forced-colors: active) {
+	:host { background: Canvas; color: CanvasText; border-top-color: CanvasText; }
+	.bar button { color: ButtonText; } .bar button:hover { background: Highlight; color: HighlightText; }
+	.bar button[aria-pressed="true"] { border: ${tok("--office-border-width")} solid Highlight; }
+	.bar button:focus-visible { outline-color: Highlight; }
+	.sep, .item + .item::before { background: CanvasText; }
+}
 `;
 var defineStatusBar = definer("office-ui-status-bar", () => {
   class OfficeUiStatusBar extends HTMLElement {
+    static activateEvent = "office-status-activate";
+    #state;
+    #view;
     constructor() {
       super();
       const root = this.attachShadow({ mode: "open" });
       attachStyles(root, controlCss(BAR_CSS));
-      const end = this.ownerDocument.createElement("slot");
-      end.name = "end";
-      root.append(this.ownerDocument.createElement("slot"), end);
+      this.#view = createStatusBarView(
+        this.ownerDocument,
+        (id) => emit(this, this.constructor.activateEvent, {
+          id
+        })
+      );
+      root.append(this.#view.bar);
+      this.#view.render(void 0);
+    }
+    get state() {
+      return this.#state;
+    }
+    set state(value) {
+      this.#state = value ?? void 0;
+      this.toggleAttribute("data-controlled", this.#state !== void 0);
+      this.#view.render(this.#state);
     }
     connectedCallback() {
       this.setAttribute("role", "group");

package/dist/{chunk-LI7NB7HR.js → chunk-HRWP3FWD.js}

@@ -18,6 +18,8 @@ var BUILT_IN = {
   settings: "M3 5h14M6 10h8M8 15h4M6 3v4M12 8v4M10 13v4",
   clock: "M3 10a7 7 0 1 0 14 0 7 7 0 1 0-14 0M10 6v4l3 2",
   reset: "M4 10a6 6 0 1 1 1.8 4.2M4 6v4h4",
+  plus: "M10 4v12M4 10h12",
+  minus: "M4 10h12",
   search: "M3 8.5a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0M13 13l4 4",
   undo: "M7.5 11.5 3.5 7.5l4-4M3.5 7.5h9a4 4 0 0 1 0 8H10",
   save: "M3.5 3h10.5l2.5 2.5V17h-13ZM6 3v5h7V3M6 17v-5.5h8V17",

package/dist/controls.d.ts

@@ -27,7 +27,7 @@ export { defineAccount, defineDialogFooter, definePasteOptions, defineRadio, def
 export type { OfficeCommandEvent } from './button.js';
 export type { OfficeDialogCloseEvent, OfficeDialogCloseReason } from './dialog.js';
 export type { OfficeSelectOption } from './select.js';
-export type { OfficeStatusActivateEvent } from './status-bar.js';
+export type { OfficeStatusActivateEvent, OfficeStatusBarState, OfficeStatusButton, OfficeStatusText, } from './status-bar.js';
 export type { OfficeTab, OfficeTabSelectEvent } from './tab-strip.js';
 export type { OfficeSearchCommand } from './command-search.js';
 export { OFFICE_TITLE_BAR_SEARCH_LIMIT, type OfficeQuickAccessItem, type OfficeTitleBarAutosave, type OfficeTitleBarCommand, type OfficeTitleBarPlacement, type OfficeTitleBarSearch, type OfficeTitleBarSearchDetail, type OfficeTitleBarState, type OfficeTitleBarTone, } from './title-bar.js';

package/dist/controls.js

@@ -1,5 +1,5 @@
-export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-EIZJR3CC.js';
-export { defineIcon } from './chunk-LI7NB7HR.js';
+export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-BN5K27RN.js';
+export { defineIcon } from './chunk-HRWP3FWD.js';
 import './chunk-DECL6RNI.js';
 import './chunk-UYPH4ESZ.js';
 import './chunk-A3QNC6VS.js';

package/dist/icons.js

@@ -1,3 +1,3 @@
-export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-LI7NB7HR.js';
+export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-HRWP3FWD.js';
 import './chunk-UYPH4ESZ.js';
 import './chunk-A3QNC6VS.js';

package/dist/index.js

@@ -1,8 +1,8 @@
 import { installOfficeUiTheme } from './chunk-5L3NYLAW.js';
 export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-5L3NYLAW.js';
-import { registerControls } from './chunk-EIZJR3CC.js';
-export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-EIZJR3CC.js';
-export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-LI7NB7HR.js';
+import { registerControls } from './chunk-BN5K27RN.js';
+export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-BN5K27RN.js';
+export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-HRWP3FWD.js';
 import { definePresence } from './chunk-DECL6RNI.js';
 export { definePresence, initialsOf, participantsFromAwareness } from './chunk-DECL6RNI.js';
 import { defineSmartArt } from './chunk-OAGGHX23.js';

package/dist/status-bar-view.d.ts

@@ -0,0 +1,48 @@
+/** A text segment at the start of the bar (page count, words, language, save state). */
+export interface OfficeStatusText {
+    id: string;
+    text: string;
+    title?: string | undefined;
+    tone?: 'idle' | 'saving' | 'error' | undefined;
+    /** Announce changes politely (a page counter). */
+    live?: boolean | undefined;
+    /** Hide on phone widths. */
+    narrowHide?: boolean | undefined;
+}
+/** A status-bar button (Notes, Comments, a view switch). `label` is its name and ScreenTip. */
+export interface OfficeStatusButton {
+    id: string;
+    icon: string;
+    label: string;
+    /** Visible text after the glyph; hidden on phone widths. */
+    text?: string | undefined;
+    pressed?: boolean | undefined;
+    hidden?: boolean | undefined;
+}
+/** Everything the controlled bar shows, already translated. Absent parts are not rendered. */
+export interface OfficeStatusBarState {
+    items?: readonly OfficeStatusText[] | undefined;
+    toggles?: readonly OfficeStatusButton[] | undefined;
+    /** The view switches (Normal, Sorter, Reading); hidden while empty or `false`. */
+    views?: readonly OfficeStatusButton[] | false | undefined;
+    /** Zoom out, percentage (zoom to fit) and zoom in; emits `zoomOut`, `zoomFit`, `zoomIn`. */
+    zoom?: {
+        percent: number;
+        outLabel: string;
+        fitLabel: string;
+        inLabel: string;
+        /** Glyphs; default `minus` and `plus`. */
+        outIcon?: string | undefined;
+        inIcon?: string | undefined;
+    } | undefined;
+}
+export interface StatusBarView {
+    bar: HTMLElement;
+    render(state: OfficeStatusBarState | undefined): void;
+}
+/**
+ * The controlled status bar: built once, then patched in place so a focused button survives
+ * updates. Slots stay in the row: the default slot after the texts, `collaboration` between the
+ * views and the zoom, and `end` before the zoom.
+ */
+export declare function createStatusBarView(doc: Document, activate: (id: string) => void): StatusBarView;

package/dist/status-bar.d.ts

@@ -2,8 +2,12 @@ export type OfficeStatusActivateEvent = CustomEvent<{
     id: string;
 }>;
 /**
- * Status bar container: `role="group"` named by its `label` attribute (default "Status").
- * Children with `slot="end"` are pushed to the trailing edge (zoom, view switches).
+ * Status bar: `role="group"` named by its `label` attribute (default "Status"). Two ways to fill
+ * it. Composed: children, with `slot="end"` pushed to the trailing edge (zoom, view switches).
+ * Controlled: set `state` (`OfficeStatusBarState`: start texts, toggles, view switches and a zoom
+ * cluster, all translated); every button emits `office-status-activate` `{ id }` (static
+ * `activateEvent` lets a product subclass keep its published name). Slots stay available in
+ * controlled mode: the default after the texts, `collaboration` and `end` before the zoom.
  */
 export declare const defineStatusBar: import("./registry.js").Definer;
 /**
@@ -12,3 +16,4 @@ export declare const defineStatusBar: import("./registry.js").Definer;
  * `{ id }` (`id` attribute) on click, Enter or Space; zoom or language pickers are examples.
  */
 export declare const defineStatusItem: import("./registry.js").Definer;
+export type { OfficeStatusBarState, OfficeStatusButton, OfficeStatusText, } from './status-bar-view.js';

package/package.json

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