ooxml-ui 0.4.1 → 0.5.0

package/README.md

@@ -58,22 +58,23 @@ with an incompatible build of this package.
 
 ## Features: elements
 
-| Tag                                      | Attributes / properties                                                                                                                           | Events (all bubble, composed)                                      |
-| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
-| `office-ui-button`                       | `label`, `icon`, `command`, `disabled`, `pressed`, `expanded`, `icon-only`, `variant="stacked"`, `keyshortcuts`                                   | `office-command` `{ command }`                                     |
-| `office-ui-checkbox`, `office-ui-switch` | `checked`, `disabled`, `value`, `aria-label`; form-associated                                                                                     | `input`, `change`                                                  |
-| `office-ui-select`                       | `options` `[{ value, label, disabled? }]`, `value`, `selectedIndex`, `disabled`                                                                   | `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`                                                                                                             | `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                                                               |
+| 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`, `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`                                                                                                             | `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` | `label`; `openAt(x, y)`, `close()`, `open`; `office-ui-menu-item` and separator children                                                          | item choice: `office-command` `{ command }`                                               |
+| `office-ui-presence`                                  | `participants`, `max`, `label`                                                                                                                    | `office-presence-select` `{ id }`                                                         |
+| `office-ui-smartart`                                  | `drawing` (core `DiagramDrawing`), `schemeColors`, `label`                                                                                        | `office-smartart-render` (render report)                                                  |
+| `office-ui-icon`                                      | `name`, `label`                                                                                                                                   | none                                                                                      |
 
 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/{chunk-RYUUWQ7F.js → chunk-7NLQECYW.js}

@@ -353,6 +353,137 @@ var defineDialog = definer("office-ui-dialog", () => {
   return OfficeUiDialog;
 });
 
+// src/context-menu.ts
+var CSS3 = `
+:host { display: contents; }
+.panel { position: fixed; inset: auto; margin: 0; min-width: 200px; padding: 4px; box-sizing: border-box;
+	background: var(--office-background, #fff); color: var(--office-foreground, #1f2937);
+	border: 1px solid var(--office-border, #d1d5db); border-radius: var(--office-radius, 4px);
+	box-shadow: 0 8px 24px rgb(0 0 0 / 18%); font-family: var(--office-font, system-ui, sans-serif); }
+.panel[hidden] { display: none; }
+@media (forced-colors: active) { .panel { border-color: CanvasText; background: Canvas; color: CanvasText; } }
+`;
+var SEPARATOR_CSS = `
+:host { display: block; height: 1px; margin: 4px 6px; background: var(--office-border, #d1d5db); }
+@media (forced-colors: active) { :host { background: CanvasText; } }
+`;
+var ITEMS = "office-ui-menu-item:not([disabled]):not([hidden])";
+var defineMenuSeparator = definer("office-ui-menu-separator", () => {
+  class OfficeUiMenuSeparator extends HTMLElement {
+    constructor() {
+      super();
+      attachStyles(this.attachShadow({ mode: "open" }), controlCss(SEPARATOR_CSS));
+    }
+    connectedCallback() {
+      this.setAttribute("role", "separator");
+    }
+  }
+  return OfficeUiMenuSeparator;
+});
+var defineContextMenu = definer("office-ui-context-menu", () => {
+  class OfficeUiContextMenu extends HTMLElement {
+    static observedAttributes = ["label"];
+    panel;
+    returnFocus = null;
+    outside;
+    constructor() {
+      super();
+      const doc = this.ownerDocument;
+      const root = this.attachShadow({ mode: "open" });
+      attachStyles(root, controlCss(CSS3));
+      this.panel = doc.createElement("div");
+      this.panel.className = "panel";
+      this.panel.setAttribute("role", "menu");
+      if (typeof this.panel.showPopover === "function")
+        this.panel.setAttribute("popover", "auto");
+      else this.panel.hidden = true;
+      this.panel.append(doc.createElement("slot"));
+      root.append(this.panel);
+      this.panel.addEventListener("toggle", (event) => {
+        if (event.newState === "closed") this.closed(false);
+      });
+      this.panel.addEventListener("keydown", (event) => this.onKey(event));
+      this.addEventListener("office-command", () => this.close());
+    }
+    connectedCallback() {
+      this.panel.setAttribute("aria-label", this.getAttribute("label") ?? "Context menu");
+    }
+    attributeChangedCallback() {
+      this.panel.setAttribute("aria-label", this.getAttribute("label") ?? "Context menu");
+    }
+    disconnectedCallback() {
+      this.close();
+    }
+    get open() {
+      return this.hasAttribute("data-open");
+    }
+    items() {
+      return [...this.querySelectorAll(ITEMS)];
+    }
+    /** Show at client coordinates; focus the first enabled item. */
+    openAt(x, y) {
+      const doc = this.ownerDocument;
+      const active = doc.activeElement;
+      this.returnFocus = active instanceof HTMLElement ? active : null;
+      if (this.panel.hasAttribute("popover")) {
+        if (!this.open) this.panel.showPopover?.();
+      } else {
+        this.panel.hidden = false;
+        this.outside ??= (event) => {
+          if (!event.composedPath().includes(this)) this.close();
+        };
+        doc.addEventListener("pointerdown", this.outside, true);
+      }
+      this.setAttribute("data-open", "");
+      const view = doc.defaultView;
+      const width = this.panel.offsetWidth;
+      const height = this.panel.offsetHeight;
+      const left = view && width ? Math.min(x, view.innerWidth - width - 4) : x;
+      const top = view && height ? Math.min(y, view.innerHeight - height - 4) : y;
+      this.panel.style.left = `${Math.max(4, Math.round(left))}px`;
+      this.panel.style.top = `${Math.max(4, Math.round(top))}px`;
+      this.items()[0]?.focus();
+    }
+    close() {
+      if (!this.open) return;
+      if (this.panel.hasAttribute("popover")) {
+        try {
+          this.panel.hidePopover?.();
+        } catch {
+        }
+      }
+      this.closed(true);
+    }
+    closed(restoreFocus) {
+      if (!this.open) return;
+      this.removeAttribute("data-open");
+      if (!this.panel.hasAttribute("popover")) this.panel.hidden = true;
+      if (this.outside) this.ownerDocument.removeEventListener("pointerdown", this.outside, true);
+      if (restoreFocus) this.returnFocus?.focus?.();
+      this.returnFocus = null;
+    }
+    onKey(event) {
+      const items = this.items();
+      const from = items.findIndex(
+        (item) => item === event.target || item.contains(event.target)
+      );
+      const move = (index) => {
+        event.preventDefault();
+        items[(index + items.length) % items.length]?.focus();
+      };
+      if (event.key === "ArrowDown") move(from + 1);
+      else if (event.key === "ArrowUp") move(from - 1);
+      else if (event.key === "Home") move(0);
+      else if (event.key === "End") move(items.length - 1);
+      else if (event.key === "Escape" || event.key === "Tab") {
+        if (event.key === "Escape") event.preventDefault();
+        this.close();
+      }
+    }
+  }
+  return OfficeUiContextMenu;
+});
+
 // src/menu.ts
 var BUTTON_CSS = `
 :host { display: inline-flex; vertical-align: middle; }
@@ -798,7 +929,7 @@ var defineToolbar = definer("office-ui-toolbar", () => {
 });
 
 // src/select.ts
-var CSS3 = `
+var CSS4 = `
 :host { display: inline-block; position: relative; vertical-align: middle; }
 button { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px;
 	width: 100%; min-height: var(--office-target-size, 28px); padding: 0 8px; font: inherit; font-size: 12px;
@@ -837,7 +968,7 @@ var defineSelect = definer("office-ui-select", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open", delegatesFocus: true });
-      attachStyles(root, controlCss(CSS3));
+      attachStyles(root, controlCss(CSS4));
       this.trigger = doc.createElement("button");
       this.trigger.type = "button";
       this.trigger.setAttribute("role", "combobox");
@@ -1088,7 +1219,7 @@ var defineStatusItem = definer("office-ui-status-item", () => {
 });
 
 // src/tab-strip.ts
-var CSS4 = `
+var CSS5 = `
 :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;
@@ -1097,6 +1228,8 @@ var CSS4 = `
 	min-height: var(--office-target-size, 26px);
 	padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
 .step:disabled { opacity: .4; cursor: default; }
+.add { font-size: 18px; line-height: 1; }
+.add[hidden] { display: none; }
 .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;
@@ -1115,16 +1248,25 @@ svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width:
 `;
 var defineTabStrip = definer("office-ui-tab-strip", () => {
   class OfficeUiTabStrip extends HTMLElement {
-    static observedAttributes = ["label", "disabled", "selected", "previous-label", "next-label"];
+    static observedAttributes = [
+      "label",
+      "disabled",
+      "selected",
+      "previous-label",
+      "next-label",
+      "add-label",
+      "add-disabled"
+    ];
     items = [];
     list;
     previous;
     next;
+    add;
     constructor() {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS4));
+      attachStyles(root, controlCss(CSS5));
       const step = (name, icon) => {
         const button = doc.createElement("button");
         button.type = "button";
@@ -1141,7 +1283,14 @@ var defineTabStrip = definer("office-ui-tab-strip", () => {
       this.list = doc.createElement("div");
       this.list.className = "list";
       this.list.setAttribute("role", "tablist");
-      root.append(this.previous, this.next, this.list);
+      this.add = doc.createElement("button");
+      this.add.type = "button";
+      this.add.className = "step add";
+      this.add.textContent = "+";
+      this.add.addEventListener("click", () => {
+        if (!this.add.disabled) emit(this, "office-command", { command: "tab-add" });
+      });
+      root.append(this.previous, this.next, this.list, this.add);
       this.previous.addEventListener("click", () => this.move(-1, false));
       this.next.addEventListener("click", () => this.move(1, false));
       this.list.addEventListener("click", (event) => {
@@ -1244,6 +1393,11 @@ var defineTabStrip = definer("office-ui-tab-strip", () => {
         if (selected) tab.scrollIntoView?.({ block: "nearest", inline: "nearest" });
       }
       this.previous.disabled = disabled || index <= 0;
+      const addLabel = this.getAttribute("add-label");
+      this.add.hidden = !addLabel;
+      this.add.disabled = disabled || this.hasAttribute("add-disabled");
+      this.add.setAttribute("aria-label", addLabel ?? "Add");
+      this.add.title = this.getAttribute("add-title") ?? addLabel ?? "";
       this.next.disabled = disabled || index < 0 || index >= this.items.length - 1;
     }
   }
@@ -1251,7 +1405,7 @@ var defineTabStrip = definer("office-ui-tab-strip", () => {
 });
 
 // src/zoom-slider.ts
-var CSS5 = `
+var CSS6 = `
 :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);
@@ -1287,7 +1441,7 @@ var defineZoomSlider = definer("office-ui-zoom-slider", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS5));
+      attachStyles(root, controlCss(CSS6));
       const button = (name, text) => {
         const element = doc.createElement("button");
         element.type = "button";
@@ -1391,7 +1545,9 @@ var CONTROL_DEFINERS = [
   defineRibbonGroup,
   defineRibbonStack,
   defineMenuItem,
+  defineMenuSeparator,
   defineMenuButton,
+  defineContextMenu,
   defineToolbar,
   defineDialog,
   defineStatusBar,
@@ -1403,4 +1559,4 @@ function registerControls(registry) {
   for (const define of CONTROL_DEFINERS) define(registry);
 }
 
-export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineDialog, defineMenuButton, defineMenuItem, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls };
+export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineContextMenu, defineDialog, defineMenuButton, defineMenuItem, defineMenuSeparator, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls };

package/dist/context-menu.d.ts

@@ -0,0 +1,10 @@
+/** A `role="separator"` rule between groups of menu items. */
+export declare const defineMenuSeparator: import("./registry.js").Definer;
+/**
+ * Right-click menu of `office-ui-menu-item` and `office-ui-menu-separator` children (Office's
+ * shape and text context menus). `openAt(x, y)` shows it at client coordinates in the popover
+ * top layer, kept inside the viewport; `close()` hides it. Arrow keys, Home and End move between
+ * enabled items; Escape and Tab close and return focus to the element that was focused. Choosing
+ * an item closes the menu and its `office-command` bubbles to the host. `label` names the menu.
+ */
+export declare const defineContextMenu: import("./registry.js").Definer;

package/dist/controls.d.ts

@@ -2,19 +2,20 @@ import { defineButton } from './button.js';
 import { defineCheckbox, defineSwitch } from './checkable.js';
 import { defineDialog } from './dialog.js';
 import { defineIcon } from './icons.js';
+import { defineContextMenu, defineMenuSeparator } from './context-menu.js';
 import { defineMenuButton, defineMenuItem } from './menu.js';
 import { defineRibbonGroup, defineRibbonStack, defineToolbar } from './ribbon.js';
 import { defineSelect } from './select.js';
 import { defineStatusBar, defineStatusItem } from './status-bar.js';
 import { defineTabStrip } from './tab-strip.js';
 import { defineZoomSlider } from './zoom-slider.js';
-export { defineButton, defineCheckbox, defineDialog, defineIcon, defineMenuButton, defineMenuItem, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, };
+export { defineButton, defineCheckbox, defineContextMenu, defineDialog, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineRibbonGroup, defineRibbonStack, 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, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer];
+export declare const CONTROL_DEFINERS: readonly [import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer, import("./registry.js").Definer];
 /** 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, defineMenuButton, defineMenuItem, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls } from './chunk-RYUUWQ7F.js';
+export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineContextMenu, defineDialog, defineMenuButton, defineMenuItem, defineMenuSeparator, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls } from './chunk-7NLQECYW.js';
 export { defineIcon } from './chunk-PCSUQPMC.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-ribbon-stack", "office-ui-menu-item", "office-ui-menu-button", "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"];
+export declare const OFFICE_UI_TAGS: readonly ["office-ui-icon", "office-ui-button", "office-ui-checkbox", "office-ui-switch", "office-ui-select", "office-ui-ribbon-group", "office-ui-ribbon-stack", "office-ui-menu-item", "office-ui-menu-button", "office-ui-menu-separator", "office-ui-context-menu", "office-ui-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,7 +1,7 @@
 import { installOfficeUiTheme } from './chunk-H4KFVIGT.js';
 export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-H4KFVIGT.js';
-import { registerControls } from './chunk-RYUUWQ7F.js';
-export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineDialog, defineMenuButton, defineMenuItem, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls } from './chunk-RYUUWQ7F.js';
+import { registerControls } from './chunk-7NLQECYW.js';
+export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineContextMenu, defineDialog, defineMenuButton, defineMenuItem, defineMenuSeparator, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls } from './chunk-7NLQECYW.js';
 export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-PCSUQPMC.js';
 import { definePresence } from './chunk-RLPL7Q6J.js';
 export { definePresence, initialsOf, participantsFromAwareness } from './chunk-RLPL7Q6J.js';
@@ -20,6 +20,8 @@ var OFFICE_UI_TAGS = [
   "office-ui-ribbon-stack",
   "office-ui-menu-item",
   "office-ui-menu-button",
+  "office-ui-menu-separator",
+  "office-ui-context-menu",
   "office-ui-toolbar",
   "office-ui-dialog",
   "office-ui-status-bar",

package/dist/tab-strip.d.ts

@@ -13,6 +13,8 @@ export type OfficeTabSelectEvent = CustomEvent<{
  * 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`.
+ * (step button names, default "Previous" and "Next"), `disabled`, and `add-label` to show an
+ * add button after the tabs (Insert Page, New Sheet) that emits `office-command`
+ * `{ command: 'tab-add' }`; `add-disabled` and `add-title` disable and explain it.
  */
 export declare const defineTabStrip: import("./registry.js").Definer;

package/package.json

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