ooxml-ui 0.1.11 → 0.2.0

package/README.md

@@ -43,14 +43,14 @@ document.body.append(button);
 
 ## API: entries (ESM only)
 
-| Entry               | Contents                                                                                |
-| ------------------- | --------------------------------------------------------------------------------------- |
-| `ooxml-ui`          | everything below plus `registerOfficeUi()` and `OFFICE_UI_TAGS`                         |
-| `ooxml-ui/theme`    | `THEME_CSS`, `installOfficeUiTheme()` (tokens, dark mode, forced-colors, touch targets) |
-| `ooxml-ui/icons`    | icon registry (`registerIcon`, `getIcon`, `listIcons`) and `<office-ui-icon>`           |
-| `ooxml-ui/controls` | button, checkbox, switch, select, ribbon group, toolbar, dialog, status bar and item    |
-| `ooxml-ui/presence` | `<office-ui-presence>` avatar stack for collaboration awareness                         |
-| `ooxml-ui/smartart` | `<office-ui-smartart>`: draws a core `DiagramDrawing` as SVG                            |
+| Entry               | Contents                                                                                                     |
+| ------------------- | ------------------------------------------------------------------------------------------------------------ |
+| `ooxml-ui`          | everything below plus `registerOfficeUi()` and `OFFICE_UI_TAGS`                                              |
+| `ooxml-ui/theme`    | `THEME_CSS`, `installOfficeUiTheme()` (tokens, dark mode, forced-colors, touch targets)                      |
+| `ooxml-ui/icons`    | icon registry (`registerIcon`, `getIcon`, `listIcons`) and `<office-ui-icon>`                                |
+| `ooxml-ui/controls` | button, checkbox, switch, select, ribbon group, toolbar, dialog, status bar and item, zoom slider, tab strip |
+| `ooxml-ui/presence` | `<office-ui-presence>` avatar stack for collaboration awareness                                              |
+| `ooxml-ui/smartart` | `<office-ui-smartart>`: draws a core `DiagramDrawing` as SVG                                                 |
 
 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
@@ -58,18 +58,20 @@ with an incompatible build of this package.
 
 ## Features: elements
 
-| Tag                                      | Attributes / properties                                                                         | Events (all bubble, composed)                   |
-| ---------------------------------------- | ----------------------------------------------------------------------------------------------- | ----------------------------------------------- |
-| `office-ui-button`                       | `label`, `icon`, `command`, `disabled`, `pressed`, `expanded`, `icon-only`, `variant="stacked"` | `office-command` `{ command }`                  |
-| `office-ui-checkbox`, `office-ui-switch` | `checked`, `disabled`, `value`, `aria-label`; form-associated                                   | `input`, `change`                               |
-| `office-ui-select`                       | `options` `[{ value, label, disabled? }]`, `value`, `selectedIndex`, `disabled`                 | `input`, `change`                               |
-| `office-ui-ribbon-group`                 | `label`; default slot                                                                           | none                                            |
-| `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-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`                       | `options` `[{ value, label, disabled? }]`, `value`, `selectedIndex`, `disabled`                                 | `input`, `change`                                                  |
+| `office-ui-ribbon-group`                 | `label`; default slot                                                                                           | none                                                               |
+| `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-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`, `disabled`                                               | `office-tab-select` `{ id }` (cancelable)                          |
+| `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                                                               |
 
 Setting a property never emits an event; only user activation does. Controls honour
 `prefers-color-scheme`, `forced-colors: active` (system colours and a visible focus ring) and

package/dist/button.d.ts

@@ -3,7 +3,8 @@ export type OfficeCommandEvent = CustomEvent<{
 }>;
 /**
  * Command button. Attributes: `label`, `icon`, `command`, `disabled`, `pressed` (aria-pressed),
- * `expanded` (aria-expanded), `icon-only`, `variant="stacked"`, `title`.
+ * `expanded` (aria-expanded), `icon-only`, `variant="stacked"`, `title`, `keyshortcuts`
+ * (forwarded as aria-keyshortcuts, e.g. `Control+Z`).
  * Activation (pointer, Enter, Space) emits one bubbling, composed `office-command`
  * event with `{ command }`; the host decides what it does. Nothing happens when disabled.
  */

package/dist/{chunk-5UKGBJXE.js → chunk-Q2FH3CZQ.js}

@@ -1,4 +1,4 @@
-import { createIconSvg, paintIcon, defineIcon } from './chunk-7MCSBDSU.js';
+import { createIconSvg, paintIcon, defineIcon } from './chunk-Y4YIYNUZ.js';
 import { definer, attachStyles, controlCss, emit } from './chunk-EY266IK3.js';
 
 // src/button.ts
@@ -34,7 +34,8 @@ var defineButton = definer("office-ui-button", () => {
       "pressed",
       "expanded",
       "icon-only",
-      "title"
+      "title",
+      "keyshortcuts"
     ];
     button;
     svg;
@@ -84,6 +85,9 @@ var defineButton = definer("office-ui-button", () => {
       else this.button.removeAttribute("aria-label");
       this.button.title = this.getAttribute("title") ?? (iconOnly ? label : "");
       this.button.disabled = this.disabled;
+      const shortcuts = this.getAttribute("keyshortcuts");
+      if (shortcuts) this.button.setAttribute("aria-keyshortcuts", shortcuts);
+      else this.button.removeAttribute("aria-keyshortcuts");
       if (paintIcon(this.svg, this.getAttribute("icon"))) this.svg.setAttribute("data-painted", "");
       else this.svg.removeAttribute("data-painted");
       for (const attr of ["pressed", "expanded"]) {
@@ -648,7 +652,9 @@ var defineStatusBar = definer("office-ui-status-bar", () => {
       super();
       const root = this.attachShadow({ mode: "open" });
       attachStyles(root, controlCss(BAR_CSS));
-      root.append(this.ownerDocument.createElement("slot"));
+      const end = this.ownerDocument.createElement("slot");
+      end.name = "end";
+      root.append(this.ownerDocument.createElement("slot"), end);
     }
     connectedCallback() {
       this.setAttribute("role", "group");
@@ -725,6 +731,300 @@ var defineStatusItem = definer("office-ui-status-item", () => {
   return OfficeUiStatusItem;
 });
 
+// src/tab-strip.ts
+var CSS4 = `
+:host { display: flex; align-items: stretch; min-width: 0; min-height: 28px; gap: 2px; padding: 0 6px;
+	background: var(--office-surface, #f3f4f6); color: var(--office-muted-foreground, #6b7280);
+	border-top: 1px solid var(--office-border, #d1d5db); font-size: 12px;
+	font-family: var(--office-font, system-ui, sans-serif); }
+.step { flex: none; display: inline-grid; place-items: center; width: var(--office-target-size, 26px);
+	min-height: var(--office-target-size, 26px);
+	padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
+.step:disabled { opacity: .4; cursor: default; }
+.list { display: flex; align-items: stretch; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
+.tab { flex: none; max-width: 220px; min-height: var(--office-target-size, 26px); margin-top: -1px;
+	padding: 2px 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
+	border: 1px solid transparent; border-top: 0; border-radius: 0 0 var(--office-radius, 4px) var(--office-radius, 4px);
+	background: transparent; color: inherit; font: inherit; cursor: pointer; }
+.tab:hover { color: var(--office-foreground, #1f2937); }
+.tab[aria-selected="true"] { border-color: var(--office-border, #d1d5db); background: var(--office-background, #fff);
+	color: var(--office-accent, #2563eb); font-weight: 600; box-shadow: inset 0 2px 0 var(--office-accent, #2563eb); }
+button:focus-visible { outline: 2px solid var(--office-ring, #2563eb); outline-offset: -2px; }
+svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5;
+	stroke-linecap: round; stroke-linejoin: round; }
+@media (forced-colors: active) {
+	:host { border-top-color: CanvasText; }
+	.tab[aria-selected="true"] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
+}
+`;
+var defineTabStrip = definer("office-ui-tab-strip", () => {
+  class OfficeUiTabStrip extends HTMLElement {
+    static observedAttributes = ["label", "disabled", "selected", "previous-label", "next-label"];
+    items = [];
+    list;
+    previous;
+    next;
+    constructor() {
+      super();
+      const doc = this.ownerDocument;
+      const root = this.attachShadow({ mode: "open" });
+      attachStyles(root, controlCss(CSS4));
+      const step = (name, icon) => {
+        const button = doc.createElement("button");
+        button.type = "button";
+        button.className = "step";
+        button.setAttribute("aria-label", name);
+        button.title = name;
+        const svg = createIconSvg(doc);
+        paintIcon(svg, icon);
+        button.append(svg);
+        return button;
+      };
+      this.previous = step("Previous", "chevronLeft");
+      this.next = step("Next", "chevronRight");
+      this.list = doc.createElement("div");
+      this.list.className = "list";
+      this.list.setAttribute("role", "tablist");
+      root.append(this.previous, this.next, this.list);
+      this.previous.addEventListener("click", () => this.move(-1, false));
+      this.next.addEventListener("click", () => this.move(1, false));
+      this.list.addEventListener("click", (event) => {
+        const tab = event.target.closest(".tab");
+        if (tab?.dataset.id !== void 0) this.choose(tab.dataset.id, false);
+      });
+      this.list.addEventListener("keydown", (event) => this.onKey(event));
+    }
+    connectedCallback() {
+      this.render();
+    }
+    attributeChangedCallback(name) {
+      if (name === "selected") this.sync();
+      else this.render();
+    }
+    get tabs() {
+      return this.items.map((tab) => ({ ...tab }));
+    }
+    set tabs(value) {
+      this.items = (Array.isArray(value) ? value : []).filter((tab) => tab && typeof tab.id === "string").map((tab) => ({
+        id: tab.id,
+        label: String(tab.label ?? ""),
+        ...tab.title === void 0 ? {} : { title: String(tab.title) }
+      }));
+      this.render();
+    }
+    get selected() {
+      return this.getAttribute("selected") ?? "";
+    }
+    set selected(id) {
+      this.setAttribute("selected", String(id));
+    }
+    index() {
+      return this.items.findIndex((tab) => tab.id === this.selected);
+    }
+    move(delta, focus) {
+      const index = this.index();
+      const target = this.items[Math.max(0, Math.min(this.items.length - 1, index + delta))];
+      if (target) this.choose(target.id, focus);
+    }
+    choose(id, focus) {
+      if (this.hasAttribute("disabled")) return;
+      if (id !== this.selected && emit(this, "office-tab-select", { id }, true)) this.selected = id;
+      if (focus) this.tabButton(this.selected)?.focus();
+    }
+    tabButton(id) {
+      return [...this.list.querySelectorAll(".tab")].find(
+        (tab) => tab.dataset.id === id
+      );
+    }
+    onKey(event) {
+      const keys = {
+        ArrowLeft: -1,
+        ArrowRight: 1,
+        ArrowUp: -1,
+        ArrowDown: 1
+      };
+      if (event.key === "Home" || event.key === "End") {
+        event.preventDefault();
+        const target = event.key === "Home" ? this.items[0] : this.items[this.items.length - 1];
+        if (target) this.choose(target.id, true);
+      } else if (keys[event.key] !== void 0) {
+        event.preventDefault();
+        this.move(keys[event.key], true);
+      }
+    }
+    render() {
+      const doc = this.ownerDocument;
+      this.list.setAttribute("aria-label", this.getAttribute("label") ?? "Tabs");
+      for (const [button, name, fallback] of [
+        [this.previous, "previous-label", "Previous"],
+        [this.next, "next-label", "Next"]
+      ]) {
+        const label = this.getAttribute(name) || fallback;
+        button.setAttribute("aria-label", label);
+        button.title = label;
+      }
+      this.list.replaceChildren(
+        ...this.items.map((item) => {
+          const tab = doc.createElement("button");
+          tab.type = "button";
+          tab.className = "tab";
+          tab.setAttribute("role", "tab");
+          tab.dataset.id = item.id;
+          tab.textContent = item.label;
+          tab.title = item.title ?? item.label;
+          return tab;
+        })
+      );
+      this.sync();
+    }
+    sync() {
+      const disabled = this.hasAttribute("disabled");
+      const index = this.index();
+      for (const tab of this.list.querySelectorAll(".tab")) {
+        const selected = tab.dataset.id === this.selected;
+        tab.setAttribute("aria-selected", String(selected));
+        tab.tabIndex = selected || index < 0 && tab === this.list.firstElementChild ? 0 : -1;
+        tab.disabled = disabled;
+        if (selected) tab.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+      }
+      this.previous.disabled = disabled || index <= 0;
+      this.next.disabled = disabled || index < 0 || index >= this.items.length - 1;
+    }
+  }
+  return OfficeUiTabStrip;
+});
+
+// src/zoom-slider.ts
+var CSS5 = `
+:host { display: inline-flex; align-items: center; gap: 2px; font-size: 11px;
+	color: var(--office-foreground, #1f2937); font-family: var(--office-font, system-ui, sans-serif); }
+button { box-sizing: border-box; display: inline-grid; place-items: center; min-width: var(--office-target-size, 24px);
+	min-height: var(--office-target-size, 24px); padding: 0; border: 1px solid transparent;
+	border-radius: var(--office-radius, 4px); background: transparent; color: inherit; font: inherit;
+	font-size: 15px; line-height: 1; cursor: pointer; }
+button:hover:not(:disabled) { background: var(--office-background, #fff); }
+button:focus-visible, input:focus-visible { outline: 2px solid var(--office-ring, #2563eb); outline-offset: 1px; }
+button:disabled, input:disabled { opacity: .5; cursor: not-allowed; }
+input { width: var(--office-zoom-slider-width, 110px); min-width: 48px; margin: 0 2px;
+	accent-color: var(--office-accent, #2563eb); }
+output { min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }
+svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5;
+	stroke-linecap: round; stroke-linejoin: round; }
+:host(:not([fit])) .fit { display: none; }
+@media (pointer: coarse), (max-width: 767px) { input { flex: 1; } }
+@media (forced-colors: active) { button { color: ButtonText; } button:disabled { color: GrayText; } }
+`;
+var clampTo = (value, min, max) => Math.min(max, Math.max(min, Math.round(value)));
+var number = (value, fallback) => {
+  const parsed = Number(value);
+  return value !== null && Number.isFinite(parsed) ? parsed : fallback;
+};
+var defineZoomSlider = definer("office-ui-zoom-slider", () => {
+  class OfficeUiZoomSlider extends HTMLElement {
+    static observedAttributes = ["value", "min", "max", "disabled", "fit", "label"];
+    out;
+    in;
+    range;
+    output;
+    fit;
+    constructor() {
+      super();
+      const doc = this.ownerDocument;
+      const root = this.attachShadow({ mode: "open" });
+      attachStyles(root, controlCss(CSS5));
+      const button = (name, text) => {
+        const element = doc.createElement("button");
+        element.type = "button";
+        element.setAttribute("aria-label", name);
+        element.title = name;
+        element.textContent = text;
+        return element;
+      };
+      this.out = button("Zoom out", "\u2212");
+      this.in = button("Zoom in", "+");
+      this.range = doc.createElement("input");
+      this.range.type = "range";
+      this.range.setAttribute("aria-label", "Zoom");
+      this.output = doc.createElement("output");
+      this.fit = button("Fit", "");
+      this.fit.className = "fit";
+      const svg = createIconSvg(doc);
+      paintIcon(svg, "fitPage");
+      this.fit.append(svg);
+      root.append(this.out, this.range, this.in, this.output, this.fit);
+      this.out.addEventListener("click", () => this.stepBy(-1));
+      this.in.addEventListener("click", () => this.stepBy(1));
+      this.range.addEventListener("input", () => this.commit(this.range.valueAsNumber, "input"));
+      this.range.addEventListener(
+        "change",
+        () => this.dispatchEvent(new Event("change", { bubbles: true, composed: true }))
+      );
+      this.fit.addEventListener(
+        "click",
+        () => emit(this, "office-command", { command: "zoom-fit" })
+      );
+    }
+    connectedCallback() {
+      this.setAttribute("role", "group");
+      this.sync();
+    }
+    attributeChangedCallback() {
+      this.sync();
+    }
+    get min() {
+      return number(this.getAttribute("min"), 10);
+    }
+    get max() {
+      return Math.max(this.min, number(this.getAttribute("max"), 400));
+    }
+    get value() {
+      return clampTo(number(this.getAttribute("value"), 100), this.min, this.max);
+    }
+    set value(next) {
+      this.setAttribute("value", String(clampTo(Number(next) || 0, this.min, this.max)));
+    }
+    get disabled() {
+      return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+      this.toggleAttribute("disabled", Boolean(value));
+    }
+    /** Office buttons snap to the next multiple of `step`, so 67% steps to 70%, not 77%. */
+    stepBy(direction) {
+      const step = Math.max(1, number(this.getAttribute("step"), 10));
+      const current = this.value;
+      const next = direction > 0 ? Math.floor(current / step) * step + step : Math.ceil(current / step) * step - step;
+      this.commit(next, "change");
+    }
+    commit(next, type) {
+      if (this.disabled) return;
+      const value = clampTo(next, this.min, this.max);
+      if (value === this.value && type === "change") return;
+      this.value = value;
+      this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+      if (type === "change")
+        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    }
+    sync() {
+      const { min, max, value, disabled } = this;
+      this.setAttribute("aria-label", this.getAttribute("label") ?? "Zoom");
+      this.range.min = String(min);
+      this.range.max = String(max);
+      this.range.value = String(value);
+      this.range.setAttribute("aria-valuetext", `${value}%`);
+      this.output.value = `${value}%`;
+      this.out.disabled = disabled || value <= min;
+      this.in.disabled = disabled || value >= max;
+      this.range.disabled = disabled;
+      const fit = this.getAttribute("fit");
+      this.fit.disabled = disabled;
+      this.fit.setAttribute("aria-label", fit || "Fit");
+      this.fit.title = fit || "Fit";
+    }
+  }
+  return OfficeUiZoomSlider;
+});
+
 // src/controls.ts
 var CONTROL_DEFINERS = [
   defineIcon,
@@ -736,10 +1036,12 @@ var CONTROL_DEFINERS = [
   defineToolbar,
   defineDialog,
   defineStatusBar,
-  defineStatusItem
+  defineStatusItem,
+  defineZoomSlider,
+  defineTabStrip
 ];
 function registerControls(registry) {
   for (const define of CONTROL_DEFINERS) define(registry);
 }
 
-export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineDialog, defineRibbonGroup, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineToolbar, registerControls };
+export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineDialog, defineRibbonGroup, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls };

package/dist/{chunk-7MCSBDSU.js → chunk-Y4YIYNUZ.js}

@@ -18,7 +18,17 @@ 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",
-  search: "M3 8.5a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0M13 13l4 4"
+  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",
+  redo: "m12.5 11.5 4-4-4-4M16.5 7.5h-9a4 4 0 0 0 0 8H10",
+  pointer: "m5 2.5v13.5l3.6-3.6 2.4 5.1 2.1-1-2.4-5H15.5Z",
+  rectangle: "M3 5.5h14v9H3Z",
+  fullscreen: "M3 7.5V3h4.5M12.5 3H17v4.5M17 12.5V17h-4.5M7.5 17H3v-4.5",
+  grid: "M3 3h14v14H3ZM7.7 3v14M12.3 3v14M3 7.7h14M3 12.3h14",
+  fitPage: "M6.5 6.5h7v7h-7ZM2.5 6V2.5H6M14 2.5h3.5V6M17.5 14v3.5H14M6 17.5H2.5V14",
+  pageWidth: "M5.5 3.5h9v13h-9ZM1.5 10h17M4 8l-2.5 2L4 12M16 8l2.5 2-2.5 2",
+  zoomIn: "M3 8.5a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0M13 13l4 4M6 8.5h5M8.5 6v5",
+  zoomOut: "M3 8.5a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0M13 13l4 4M6 8.5h5"
 };
 for (const [name, d] of Object.entries(BUILT_IN)) registry.set(name, { d });
 function registerIcon(name, icon) {

package/dist/controls.d.ts

@@ -5,12 +5,15 @@ import { defineIcon } from './icons.js';
 import { defineRibbonGroup, defineToolbar } from './ribbon.js';
 import { defineSelect } from './select.js';
 import { defineStatusBar, defineStatusItem } from './status-bar.js';
-export { defineButton, defineCheckbox, defineDialog, defineIcon, defineRibbonGroup, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineToolbar, };
+import { defineTabStrip } from './tab-strip.js';
+import { defineZoomSlider } from './zoom-slider.js';
+export { defineButton, defineCheckbox, defineDialog, defineIcon, defineRibbonGroup, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, };
 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 { OfficeTab, OfficeTabSelectEvent } from './tab-strip.js';
 /** Every control of this entry. */
-export declare const CONTROL_DEFINERS: readonly [import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer];
+export declare const CONTROL_DEFINERS: readonly [import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer];
 /** Idempotent, SSR-safe (no-op without a DOM). */
 export declare function registerControls(registry?: CustomElementRegistry): void;

package/dist/controls.js

@@ -1,3 +1,3 @@
-export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineDialog, defineRibbonGroup, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineToolbar, registerControls } from './chunk-5UKGBJXE.js';
-export { defineIcon } from './chunk-7MCSBDSU.js';
+export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineDialog, defineRibbonGroup, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls } from './chunk-Q2FH3CZQ.js';
+export { defineIcon } from './chunk-Y4YIYNUZ.js';
 import './chunk-EY266IK3.js';

package/dist/icons.js

@@ -1,2 +1,2 @@
-export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-7MCSBDSU.js';
+export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-Y4YIYNUZ.js';
 import './chunk-EY266IK3.js';

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export * from './smartart.js';
 export * from './theme.js';
 export { CONTRACT_REVISION, type Definer } from './registry.js';
 /** Every ooxml-ui tag this package defines, in registration order. */
-export declare const OFFICE_UI_TAGS: readonly ["office-ui-icon", "office-ui-button", "office-ui-checkbox", "office-ui-switch", "office-ui-select", "office-ui-ribbon-group", "office-ui-toolbar", "office-ui-dialog", "office-ui-status-bar", "office-ui-status-item", "office-ui-presence", "office-ui-smartart"];
+export declare const OFFICE_UI_TAGS: readonly ["office-ui-icon", "office-ui-button", "office-ui-checkbox", "office-ui-switch", "office-ui-select", "office-ui-ribbon-group", "office-ui-toolbar", "office-ui-dialog", "office-ui-status-bar", "office-ui-status-item", "office-ui-zoom-slider", "office-ui-tab-strip", "office-ui-presence", "office-ui-smartart"];
 /**
  * Install the theme tokens and define every element. Idempotent and safe to call from every
  * viewer binding; a no-op where there is no DOM (SSR).

package/dist/index.js

@@ -1,8 +1,8 @@
 import { installOfficeUiTheme } from './chunk-H4KFVIGT.js';
 export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-H4KFVIGT.js';
-import { registerControls } from './chunk-5UKGBJXE.js';
-export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineDialog, defineRibbonGroup, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineToolbar, registerControls } from './chunk-5UKGBJXE.js';
-export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-7MCSBDSU.js';
+import { registerControls } from './chunk-Q2FH3CZQ.js';
+export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineDialog, defineRibbonGroup, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls } from './chunk-Q2FH3CZQ.js';
+export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-Y4YIYNUZ.js';
 import { definePresence } from './chunk-RLPL7Q6J.js';
 export { definePresence, initialsOf, participantsFromAwareness } from './chunk-RLPL7Q6J.js';
 import { defineSmartArt } from './chunk-KJV76AB7.js';
@@ -21,6 +21,8 @@ var OFFICE_UI_TAGS = [
   "office-ui-dialog",
   "office-ui-status-bar",
   "office-ui-status-item",
+  "office-ui-zoom-slider",
+  "office-ui-tab-strip",
   "office-ui-presence",
   "office-ui-smartart"
 ];

package/dist/status-bar.d.ts

@@ -1,7 +1,10 @@
 export type OfficeStatusActivateEvent = CustomEvent<{
     id: string;
 }>;
-/** Status bar container: `role="group"` named by its `label` attribute (default "Status"). */
+/**
+ * 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).
+ */
 export declare const defineStatusBar: import("./registry.js").Definer;
 /**
  * One status entry: `label` and `value` attributes (textual, so assistive tech reads both).

package/dist/tab-strip.d.ts

@@ -0,0 +1,18 @@
+export interface OfficeTab {
+    id: string;
+    label: string;
+    /** Tooltip; defaults to the label. */
+    title?: string;
+}
+export type OfficeTabSelectEvent = CustomEvent<{
+    id: string;
+}>;
+/**
+ * Bottom document tabs (Visio pages, Excel sheets). Set `tabs` (`OfficeTab[]`) and `selected`
+ * (a tab id). Labels are inserted as text. The previous/next buttons and arrow, Home and End
+ * keys move the selection; the tab list uses a roving tabindex. User selection emits
+ * `office-tab-select` `{ id }` (cancelable); setting properties never emits.
+ * Attributes: `label` (tab list name, default "Tabs"), `previous-label` and `next-label`
+ * (step button names, default "Previous" and "Next"), `disabled`.
+ */
+export declare const defineTabStrip: import("./registry.js").Definer;

package/dist/zoom-slider.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Office status-bar zoom: zoom out, slider, zoom in, percentage and an optional fit button.
+ * Attributes: `value` (percent, default 100), `min` (10), `max` (400), `step` (10, for the
+ * buttons), `disabled`, `fit` (shows the fit button; its value is the button's name, e.g.
+ * "Fit page to current window"), `label` (group name, default "Zoom").
+ * User changes emit native `input` (slider drag) and `change` events with `value` updated;
+ * the fit button emits `office-command` `{ command: 'zoom-fit' }`. Setting `value` never emits.
+ */
+export declare const defineZoomSlider: import("./registry.js").Definer;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ooxml-ui",
-	"version": "0.1.11",
+	"version": "0.2.0",
 	"description": "Shared, format-neutral web components and styles for the Office viewers (Word, PowerPoint, Excel)",
 	"keywords": [
 		"custom-elements",
@@ -70,7 +70,7 @@
 		"test:package": "node scripts/package-smoke.mjs"
 	},
 	"dependencies": {
-		"ooxml-core": "^0.11.0"
+		"ooxml-core": "^0.12.0"
 	},
 	"devDependencies": {
 		"@types/jsdom": "^21.1.7",