ooxml-ui 0.5.0 → 0.6.0

package/README.md

@@ -72,6 +72,7 @@ with an incompatible build of this package.
 | `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-command-search`                            | `commands` `[{ id, label, keywords?, disabled?, title? }]`, `placeholder`, `label`, `limit` (Office's "Tell me what you want to do")              | 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                                                                                      |

package/dist/{chunk-7NLQECYW.js → chunk-RT6XKAM4.js}

@@ -353,8 +353,201 @@ var defineDialog = definer("office-ui-dialog", () => {
   return OfficeUiDialog;
 });
 
-// src/context-menu.ts
+// src/command-search.ts
 var CSS3 = `
+:host { display: inline-flex; align-items: center; min-width: 0; font-family: var(--office-font, system-ui, sans-serif); }
+.field { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; height: var(--office-target-size, 28px);
+	padding: 0 8px; box-sizing: border-box; border: 1px solid transparent; border-radius: var(--office-radius, 4px);
+	color: var(--office-muted-foreground, #6b7280); }
+.field:hover, .field:focus-within { border-color: var(--office-border, #d1d5db); background: var(--office-background, #fff); }
+input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--office-foreground, #1f2937);
+	font: inherit; font-size: 13px; }
+svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5;
+	stroke-linecap: round; stroke-linejoin: round; }
+ul { position: fixed; inset: auto; margin: 0; padding: 4px; min-width: 240px; max-height: 320px; overflow: auto;
+	box-sizing: border-box; list-style: none; 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-size: 12px; }
+ul[hidden] { display: none; }
+li { display: flex; flex-direction: column; justify-content: center; min-height: var(--office-target-size, 28px);
+	padding: 2px 10px; border-radius: 3px; cursor: pointer; }
+li[data-active] { background: var(--office-surface, #f3f4f6); }
+li[aria-disabled="true"] { cursor: not-allowed; color: var(--office-muted-foreground, #6b7280); }
+li small { color: var(--office-muted-foreground, #6b7280); font-size: 11px; }
+li.empty { cursor: default; color: var(--office-muted-foreground, #6b7280); }
+@media (forced-colors: active) {
+	.field, ul { border-color: CanvasText; background: Canvas; color: CanvasText; }
+	li[data-active] { background: Highlight; color: HighlightText; }
+}
+`;
+var uid = 0;
+var defineCommandSearch = definer("office-ui-command-search", () => {
+  class OfficeUiCommandSearch extends HTMLElement {
+    static observedAttributes = ["placeholder", "label"];
+    items = [];
+    found = [];
+    active = -1;
+    input;
+    list;
+    uid = `office-command-search-${++uid}`;
+    constructor() {
+      super();
+      const doc = this.ownerDocument;
+      const root = this.attachShadow({ mode: "open", delegatesFocus: true });
+      attachStyles(root, controlCss(CSS3));
+      const field = doc.createElement("div");
+      field.className = "field";
+      const glass = createIconSvg(doc);
+      paintIcon(glass, "search");
+      glass.setAttribute("data-painted", "");
+      this.input = doc.createElement("input");
+      this.input.type = "search";
+      this.input.autocomplete = "off";
+      this.input.spellcheck = false;
+      this.input.setAttribute("role", "combobox");
+      this.input.setAttribute("aria-autocomplete", "list");
+      this.input.setAttribute("aria-expanded", "false");
+      this.input.setAttribute("aria-controls", `${this.uid}-list`);
+      this.list = doc.createElement("ul");
+      this.list.id = `${this.uid}-list`;
+      this.list.setAttribute("role", "listbox");
+      if (typeof this.list.showPopover === "function")
+        this.list.setAttribute("popover", "manual");
+      else this.list.hidden = true;
+      field.append(glass, this.input);
+      root.append(field, this.list);
+      this.input.addEventListener("input", () => this.update());
+      this.input.addEventListener("keydown", (event) => this.onKey(event));
+      this.input.addEventListener("blur", () => this.hide());
+      this.list.addEventListener("pointerdown", (event) => event.preventDefault());
+      this.list.addEventListener("click", (event) => {
+        const item = event.target.closest("li[data-index]");
+        if (item) this.choose(Number(item.dataset.index));
+      });
+    }
+    connectedCallback() {
+      this.sync();
+    }
+    disconnectedCallback() {
+      this.hide();
+    }
+    attributeChangedCallback() {
+      this.sync();
+    }
+    get commands() {
+      return this.items.map((item) => ({ ...item }));
+    }
+    set commands(value) {
+      this.items = (Array.isArray(value) ? value : []).filter((item) => item && typeof item.id === "string").map((item) => ({ ...item, label: String(item.label ?? "") }));
+      if (this.isOpen) this.update();
+    }
+    get isOpen() {
+      return this.input.getAttribute("aria-expanded") === "true";
+    }
+    sync() {
+      this.input.placeholder = this.getAttribute("placeholder") ?? "Tell me what you want to do";
+      this.input.setAttribute("aria-label", this.getAttribute("label") ?? this.input.placeholder);
+    }
+    update() {
+      const query = this.input.value.trim().toLowerCase();
+      if (!query) return this.hide();
+      const limit = Math.max(1, Number(this.getAttribute("limit")) || 8);
+      this.found = this.items.filter((item) => `${item.label} ${item.keywords ?? ""}`.toLowerCase().includes(query)).slice(0, limit);
+      this.active = this.found.findIndex((item) => !item.disabled);
+      this.render();
+      this.show();
+    }
+    render() {
+      const doc = this.ownerDocument;
+      if (!this.found.length) {
+        const empty = doc.createElement("li");
+        empty.className = "empty";
+        empty.setAttribute("role", "option");
+        empty.setAttribute("aria-disabled", "true");
+        empty.textContent = "No matching commands";
+        this.list.replaceChildren(empty);
+        this.input.removeAttribute("aria-activedescendant");
+        return;
+      }
+      this.list.replaceChildren(
+        ...this.found.map((item, index) => {
+          const option = doc.createElement("li");
+          option.id = `${this.uid}-${index}`;
+          option.dataset.index = String(index);
+          option.setAttribute("role", "option");
+          option.setAttribute("aria-selected", String(index === this.active));
+          if (index === this.active) option.setAttribute("data-active", "");
+          const label = doc.createElement("span");
+          label.textContent = item.label;
+          option.append(label);
+          if (item.disabled) {
+            option.setAttribute("aria-disabled", "true");
+            const reason = doc.createElement("small");
+            reason.textContent = item.title ?? "Not available";
+            option.append(reason);
+          }
+          return option;
+        })
+      );
+      if (this.active >= 0)
+        this.input.setAttribute("aria-activedescendant", `${this.uid}-${this.active}`);
+      else this.input.removeAttribute("aria-activedescendant");
+    }
+    show() {
+      const box = this.input.getBoundingClientRect();
+      this.list.style.left = `${Math.round(box.left)}px`;
+      this.list.style.top = `${Math.round(box.bottom + 4)}px`;
+      if (this.list.hasAttribute("popover")) {
+        if (!this.isOpen) this.list.showPopover?.();
+      } else this.list.hidden = false;
+      this.input.setAttribute("aria-expanded", "true");
+    }
+    hide() {
+      if (!this.isOpen) return;
+      if (this.list.hasAttribute("popover")) {
+        try {
+          this.list.hidePopover?.();
+        } catch {
+        }
+      } else this.list.hidden = true;
+      this.input.setAttribute("aria-expanded", "false");
+      this.input.removeAttribute("aria-activedescendant");
+    }
+    move(step) {
+      const enabled = this.found.map((item, index) => item.disabled ? -1 : index).filter((i) => i >= 0);
+      if (!enabled.length) return;
+      const at = enabled.indexOf(this.active);
+      this.active = enabled[(at + step + enabled.length) % enabled.length];
+      this.render();
+    }
+    choose(index) {
+      const item = this.found[index];
+      if (!item || item.disabled) return;
+      this.input.value = "";
+      this.hide();
+      emit(this, "office-command", { command: item.id });
+    }
+    onKey(event) {
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        if (!this.isOpen) this.update();
+        else this.move(event.key === "ArrowDown" ? 1 : -1);
+      } else if (event.key === "Enter") {
+        event.preventDefault();
+        this.choose(this.active);
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.isOpen) this.hide();
+        else this.input.value = "";
+      }
+    }
+  }
+  return OfficeUiCommandSearch;
+});
+
+// src/context-menu.ts
+var CSS4 = `
 :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);
@@ -390,7 +583,7 @@ var defineContextMenu = definer("office-ui-context-menu", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS3));
+      attachStyles(root, controlCss(CSS4));
       this.panel = doc.createElement("div");
       this.panel.className = "panel";
       this.panel.setAttribute("role", "menu");
@@ -929,7 +1122,7 @@ var defineToolbar = definer("office-ui-toolbar", () => {
 });
 
 // src/select.ts
-var CSS4 = `
+var CSS5 = `
 :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;
@@ -951,7 +1144,7 @@ li[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
 	li[data-active] { background: Highlight; color: HighlightText; }
 }
 `;
-var uid = 0;
+var uid2 = 0;
 var defineSelect = definer("office-ui-select", () => {
   class OfficeUiSelect extends HTMLElement {
     static observedAttributes = ["value", "disabled", "aria-label"];
@@ -963,12 +1156,12 @@ var defineSelect = definer("office-ui-select", () => {
     trigger;
     list;
     label;
-    domId = `office-ui-select-${++uid}`;
+    domId = `office-ui-select-${++uid2}`;
     constructor() {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open", delegatesFocus: true });
-      attachStyles(root, controlCss(CSS4));
+      attachStyles(root, controlCss(CSS5));
       this.trigger = doc.createElement("button");
       this.trigger.type = "button";
       this.trigger.setAttribute("role", "combobox");
@@ -1219,7 +1412,7 @@ var defineStatusItem = definer("office-ui-status-item", () => {
 });
 
 // src/tab-strip.ts
-var CSS5 = `
+var CSS6 = `
 :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;
@@ -1266,7 +1459,7 @@ var defineTabStrip = definer("office-ui-tab-strip", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS5));
+      attachStyles(root, controlCss(CSS6));
       const step = (name, icon) => {
         const button = doc.createElement("button");
         button.type = "button";
@@ -1405,7 +1598,7 @@ var defineTabStrip = definer("office-ui-tab-strip", () => {
 });
 
 // src/zoom-slider.ts
-var CSS6 = `
+var CSS7 = `
 :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);
@@ -1441,7 +1634,7 @@ var defineZoomSlider = definer("office-ui-zoom-slider", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS6));
+      attachStyles(root, controlCss(CSS7));
       const button = (name, text) => {
         const element = doc.createElement("button");
         element.type = "button";
@@ -1548,6 +1741,7 @@ var CONTROL_DEFINERS = [
   defineMenuSeparator,
   defineMenuButton,
   defineContextMenu,
+  defineCommandSearch,
   defineToolbar,
   defineDialog,
   defineStatusBar,
@@ -1559,4 +1753,4 @@ function registerControls(registry) {
   for (const define of CONTROL_DEFINERS) define(registry);
 }
 
-export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineContextMenu, defineDialog, defineMenuButton, defineMenuItem, defineMenuSeparator, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls };
+export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineMenuButton, defineMenuItem, defineMenuSeparator, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls };

package/dist/command-search.d.ts

@@ -0,0 +1,16 @@
+/** One searchable command: label and optional keywords; disabled commands show their reason. */
+export interface OfficeSearchCommand {
+    id: string;
+    label: string;
+    keywords?: string;
+    disabled?: boolean;
+    title?: string;
+}
+/**
+ * Office's "Tell me what you want to do" box. Set `commands` (`OfficeSearchCommand[]`); typing
+ * lists up to `limit` (default 8) matches by label or keywords in a top-layer listbox.
+ * ArrowUp/Down move, Enter or click run an enabled match (`office-command` `{ command }`),
+ * Escape closes then clears. Disabled matches stay visible with their reason. Attributes:
+ * `placeholder`, `label` (accessible name), `limit`. Setting `commands` never emits.
+ */
+export declare const defineCommandSearch: import("./registry.js").Definer;

package/dist/controls.d.ts

@@ -2,6 +2,7 @@ import { defineButton } from './button.js';
 import { defineCheckbox, defineSwitch } from './checkable.js';
 import { defineDialog } from './dialog.js';
 import { defineIcon } from './icons.js';
+import { defineCommandSearch } from './command-search.js';
 import { defineContextMenu, defineMenuSeparator } from './context-menu.js';
 import { defineMenuButton, defineMenuItem } from './menu.js';
 import { defineRibbonGroup, defineRibbonStack, defineToolbar } from './ribbon.js';
@@ -9,13 +10,14 @@ 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, defineContextMenu, defineDialog, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, };
+export { defineButton, defineCheckbox, defineCommandSearch, 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';
+export type { OfficeSearchCommand } from './command-search.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, 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, 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, defineContextMenu, defineDialog, defineMenuButton, defineMenuItem, defineMenuSeparator, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls } from './chunk-7NLQECYW.js';
+export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineMenuButton, defineMenuItem, defineMenuSeparator, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls } from './chunk-RT6XKAM4.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-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"];
+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-command-search", "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-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';
+import { registerControls } from './chunk-RT6XKAM4.js';
+export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineMenuButton, defineMenuItem, defineMenuSeparator, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls } from './chunk-RT6XKAM4.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';
@@ -22,6 +22,7 @@ var OFFICE_UI_TAGS = [
   "office-ui-menu-button",
   "office-ui-menu-separator",
   "office-ui-context-menu",
+  "office-ui-command-search",
   "office-ui-toolbar",
   "office-ui-dialog",
   "office-ui-status-bar",

package/package.json

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