ooxml-ui 0.1.1

package/dist/chunk-5UKGBJXE.js

@@ -0,0 +1,745 @@
+import { createIconSvg, paintIcon, defineIcon } from './chunk-7MCSBDSU.js';
+import { definer, attachStyles, controlCss, emit } from './chunk-EY266IK3.js';
+
+// src/button.ts
+var CSS = `
+:host { display: inline-flex; vertical-align: middle; }
+button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
+	gap: 6px; min-width: var(--office-target-size, 28px); min-height: var(--office-target-size, 28px);
+	padding: 0 8px; border: 1px solid transparent; border-radius: var(--office-radius, 4px);
+	background: transparent; color: var(--office-foreground, #1f2937); font: inherit; font-size: 12px;
+	cursor: pointer; white-space: nowrap; }
+:host([variant="stacked"]) button { flex-direction: column; padding: 4px 8px; }
+button:hover:not(:disabled) { background: var(--office-surface, #f3f4f6); }
+button:focus-visible { outline: 2px solid var(--office-ring, #2563eb); outline-offset: 1px; }
+button[aria-pressed="true"], button[aria-expanded="true"] { border-color: var(--office-accent, #2563eb);
+	background: var(--office-surface, #f3f4f6); }
+button:disabled { opacity: .5; cursor: not-allowed; }
+svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5;
+	stroke-linecap: round; stroke-linejoin: round; }
+svg:not([data-painted]) { display: none; }
+@media (forced-colors: active) {
+	button { border-color: ButtonText; color: ButtonText; background: ButtonFace; }
+	button:disabled { color: GrayText; border-color: GrayText; }
+	button[aria-pressed="true"], button[aria-expanded="true"] { background: Highlight; color: HighlightText; }
+}
+`;
+var defineButton = definer("office-ui-button", () => {
+  class OfficeUiButton extends HTMLElement {
+    static observedAttributes = [
+      "label",
+      "icon",
+      "command",
+      "disabled",
+      "pressed",
+      "expanded",
+      "icon-only",
+      "title"
+    ];
+    button;
+    svg;
+    text;
+    constructor() {
+      super();
+      const root = this.attachShadow({ mode: "open", delegatesFocus: true });
+      attachStyles(root, controlCss(CSS));
+      this.button = this.ownerDocument.createElement("button");
+      this.button.type = "button";
+      this.button.setAttribute("part", "button");
+      this.svg = createIconSvg(this.ownerDocument);
+      this.text = this.ownerDocument.createElement("span");
+      this.button.append(this.svg, this.text);
+      root.append(this.button);
+      this.button.addEventListener("click", () => {
+        const command = this.getAttribute("command");
+        if (!this.button.disabled && command) emit(this, "office-command", { command });
+      });
+    }
+    connectedCallback() {
+      this.sync();
+    }
+    attributeChangedCallback() {
+      this.sync();
+    }
+    get disabled() {
+      return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+      this.toggleAttribute("disabled", Boolean(value));
+    }
+    get pressed() {
+      const value = this.getAttribute("pressed");
+      return value === null ? void 0 : value !== "false";
+    }
+    set pressed(value) {
+      if (value === void 0) this.removeAttribute("pressed");
+      else this.setAttribute("pressed", String(value));
+    }
+    sync() {
+      const label = this.getAttribute("label") ?? "";
+      const iconOnly = this.hasAttribute("icon-only");
+      this.text.textContent = label;
+      this.text.hidden = iconOnly;
+      if (iconOnly && label) this.button.setAttribute("aria-label", label);
+      else this.button.removeAttribute("aria-label");
+      this.button.title = this.getAttribute("title") ?? (iconOnly ? label : "");
+      this.button.disabled = this.disabled;
+      if (paintIcon(this.svg, this.getAttribute("icon"))) this.svg.setAttribute("data-painted", "");
+      else this.svg.removeAttribute("data-painted");
+      for (const attr of ["pressed", "expanded"]) {
+        const value = this.getAttribute(attr);
+        if (value === null) this.button.removeAttribute(`aria-${attr}`);
+        else this.button.setAttribute(`aria-${attr}`, value === "false" ? "false" : "true");
+      }
+    }
+  }
+  return OfficeUiButton;
+});
+
+// src/checkable.ts
+var CHECK_SVG = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 8 3.2 3.2L13 4.5"/></svg>';
+var CHECKBOX_CSS = `
+:host { display: inline-grid; box-sizing: border-box; width: 16px; height: 16px; flex: none;
+	place-items: center; border: 1px solid var(--office-border, #d1d5db); border-radius: 3px;
+	background: var(--office-background, #fff); color: var(--office-accent-foreground, #fff);
+	cursor: pointer; vertical-align: middle; }
+:host([checked]) { border-color: var(--office-accent, #2563eb); background: var(--office-accent, #2563eb); }
+:host(:focus-visible) { outline: 2px solid var(--office-ring, #2563eb); outline-offset: 2px; }
+:host([disabled]) { opacity: .5; cursor: not-allowed; }
+svg { display: none; width: 12px; height: 12px; }
+:host([checked]) svg { display: block; }
+@media (pointer: coarse), (max-width: 767px) { :host { width: 22px; height: 22px; } svg { width: 16px; height: 16px; } }
+@media (forced-colors: active) {
+	:host { border-color: CanvasText; background: Canvas; color: CanvasText; forced-color-adjust: auto; }
+	:host([checked]) { border-color: Highlight; background: Highlight; color: HighlightText; }
+}
+`;
+var SWITCH_CSS = `
+:host { display: inline-block; box-sizing: border-box; position: relative; width: 32px; height: 18px;
+	flex: none; border: 1px solid var(--office-border, #d1d5db); border-radius: 9px;
+	background: var(--office-surface, #f3f4f6); cursor: pointer; vertical-align: middle; }
+:host::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
+	border-radius: 50%; background: var(--office-foreground, #1f2937); transition: transform .12s; }
+:host([checked]) { border-color: var(--office-accent, #2563eb); background: var(--office-accent, #2563eb); }
+:host([checked])::after { transform: translateX(14px); background: var(--office-accent-foreground, #fff); }
+:host(:focus-visible) { outline: 2px solid var(--office-ring, #2563eb); outline-offset: 2px; }
+:host([disabled]) { opacity: .5; cursor: not-allowed; }
+svg { display: none; }
+@media (pointer: coarse), (max-width: 767px) { :host { min-height: 24px; width: 44px; height: 24px; border-radius: 12px; } }
+@media (forced-colors: active) {
+	:host { border-color: CanvasText; background: Canvas; forced-color-adjust: none; }
+	:host::after { background: CanvasText; }
+	:host([checked]) { border-color: Highlight; background: Highlight; }
+	:host([checked])::after { background: HighlightText; }
+}
+`;
+function makeCheckable(role, css) {
+  return () => class OfficeUiCheckable extends HTMLElement {
+    static formAssociated = true;
+    static observedAttributes = ["checked", "disabled", "value"];
+    internals;
+    defaultChecked = false;
+    constructor() {
+      super();
+      try {
+        this.internals = this.attachInternals();
+      } catch {
+        this.internals = void 0;
+      }
+      const root = this.attachShadow({ mode: "open" });
+      attachStyles(root, controlCss(css));
+      const template = this.ownerDocument.createElement("template");
+      template.innerHTML = CHECK_SVG;
+      root.append(template.content.cloneNode(true));
+      this.addEventListener("click", (event) => {
+        if (this.disabled) event.preventDefault();
+        else this.toggle();
+      });
+      this.addEventListener("keydown", (event) => {
+        const key = event.key;
+        if (key !== " " && !(role === "switch" && key === "Enter") || this.disabled) return;
+        event.preventDefault();
+        this.toggle();
+      });
+    }
+    connectedCallback() {
+      this.defaultChecked = this.checked;
+      this.sync();
+    }
+    attributeChangedCallback() {
+      this.sync();
+    }
+    get checked() {
+      return this.hasAttribute("checked");
+    }
+    set checked(value) {
+      this.toggleAttribute("checked", Boolean(value));
+    }
+    get disabled() {
+      return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+      this.toggleAttribute("disabled", Boolean(value));
+    }
+    get value() {
+      return this.getAttribute("value") ?? "on";
+    }
+    set value(value) {
+      this.setAttribute("value", String(value));
+    }
+    formResetCallback() {
+      this.checked = this.defaultChecked;
+    }
+    formDisabledCallback(disabled) {
+      this.disabled = disabled;
+    }
+    toggle() {
+      this.checked = !this.checked;
+      this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    }
+    sync() {
+      this.setAttribute("role", role);
+      this.setAttribute("aria-checked", String(this.checked));
+      this.setAttribute("aria-disabled", String(this.disabled));
+      this.tabIndex = this.disabled ? -1 : 0;
+      this.internals?.setFormValue?.(this.checked && !this.disabled ? this.value : null);
+    }
+  };
+}
+var defineCheckbox = definer(
+  "office-ui-checkbox",
+  makeCheckable("checkbox", CHECKBOX_CSS)
+);
+var defineSwitch = definer("office-ui-switch", makeCheckable("switch", SWITCH_CSS));
+
+// src/dialog.ts
+var CSS2 = `
+:host { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; }
+:host([open]) { display: flex; }
+.backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .4); }
+.box { position: relative; box-sizing: border-box; display: flex; flex-direction: column;
+	min-width: min(320px, 100vw); max-width: min(640px, 100vw); max-height: 90vh;
+	background: var(--office-background, #fff); color: var(--office-foreground, #1f2937);
+	border: 1px solid var(--office-border, #d1d5db); border-radius: 8px; font-family: var(--office-font, system-ui, sans-serif); }
+header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px;
+	border-bottom: 1px solid var(--office-border, #d1d5db); }
+h2 { margin: 0; font-size: 15px; font-weight: 600; }
+.body { padding: 16px; overflow: auto; font-size: 13px; }
+footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--office-border, #d1d5db); }
+footer[hidden] { display: none; }
+.close { display: inline-flex; align-items: center; justify-content: center; min-width: var(--office-target-size, 28px);
+	min-height: var(--office-target-size, 28px); border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: 4px; }
+.close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
+.close:focus-visible { outline: 2px solid var(--office-ring, #2563eb); }
+@media (forced-colors: active) { .box { border-color: CanvasText; background: Canvas; } .backdrop { background: transparent; } }
+`;
+var FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), office-ui-button:not([disabled]), office-ui-select:not([disabled]), office-ui-checkbox:not([disabled]), office-ui-switch:not([disabled])';
+var defineDialog = definer("office-ui-dialog", () => {
+  class OfficeUiDialog extends HTMLElement {
+    static observedAttributes = ["open", "heading"];
+    box;
+    heading;
+    closeButton;
+    footer;
+    returnFocus = null;
+    constructor() {
+      super();
+      const doc = this.ownerDocument;
+      const root = this.attachShadow({ mode: "open" });
+      attachStyles(root, controlCss(CSS2));
+      const backdrop = doc.createElement("div");
+      backdrop.className = "backdrop";
+      this.box = doc.createElement("div");
+      this.box.className = "box";
+      this.box.setAttribute("role", "dialog");
+      this.box.setAttribute("aria-modal", "true");
+      this.box.tabIndex = -1;
+      const header = doc.createElement("header");
+      this.heading = doc.createElement("h2");
+      this.heading.id = "title";
+      this.box.setAttribute("aria-labelledby", "title");
+      this.closeButton = doc.createElement("button");
+      this.closeButton.type = "button";
+      this.closeButton.className = "close";
+      this.closeButton.setAttribute("aria-label", "Close");
+      const icon = createIconSvg(doc);
+      paintIcon(icon, "close");
+      this.closeButton.append(icon);
+      header.append(this.heading, this.closeButton);
+      const body = doc.createElement("div");
+      body.className = "body";
+      body.append(doc.createElement("slot"));
+      this.footer = doc.createElement("footer");
+      const footerSlot = doc.createElement("slot");
+      footerSlot.name = "footer";
+      this.footer.append(footerSlot);
+      this.box.append(header, body, this.footer);
+      root.append(backdrop, this.box);
+      backdrop.addEventListener("click", () => this.requestClose("backdrop"));
+      this.closeButton.addEventListener("click", () => this.requestClose("close-button"));
+      this.addEventListener("keydown", (event) => this.onKey(event));
+    }
+    attributeChangedCallback(name, old, value) {
+      if (name === "heading") this.heading.textContent = value ?? "";
+      if (name === "open" && old === null !== (value === null)) {
+        if (value !== null) this.onOpen();
+        else this.onClose();
+      }
+    }
+    connectedCallback() {
+      this.heading.textContent = this.getAttribute("heading") ?? "";
+      if (this.open) this.onOpen();
+    }
+    get open() {
+      return this.hasAttribute("open");
+    }
+    set open(value) {
+      this.toggleAttribute("open", Boolean(value));
+    }
+    show() {
+      this.open = true;
+    }
+    /** Programmatic close; still emits `office-dialog-close` (reason `api`). */
+    close() {
+      this.requestClose("api");
+    }
+    get dismissible() {
+      return this.getAttribute("dismissible") !== "false";
+    }
+    requestClose(reason) {
+      if ((reason === "escape" || reason === "backdrop") && !this.dismissible) return;
+      if (emit(this, "office-dialog-close", { reason }, true)) this.open = false;
+    }
+    onOpen() {
+      const active = this.ownerDocument.activeElement;
+      this.returnFocus = active && active !== this.ownerDocument.body ? active : null;
+      this.footer.hidden = this.querySelector('[slot="footer"]') === null;
+      (this.focusables()[0] ?? this.box).focus();
+    }
+    onClose() {
+      const target = this.returnFocus;
+      this.returnFocus = null;
+      target?.focus?.();
+    }
+    focusables() {
+      return [...this.querySelectorAll(FOCUSABLE)];
+    }
+    onKey(event) {
+      if (!this.open) return;
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        this.requestClose("escape");
+      } else if (event.key === "Tab") {
+        const items = [...this.focusables(), this.closeButton];
+        const current = this.ownerDocument.activeElement;
+        const inside = (el) => el === current || el.contains(current);
+        const index = items.findIndex(inside);
+        const shadowFocus = this.shadowRoot?.activeElement === this.closeButton;
+        const at = shadowFocus ? items.length - 1 : index;
+        const last = items.length - 1;
+        if (at < 0 || !event.shiftKey && at === last || event.shiftKey && at === 0) {
+          event.preventDefault();
+          items[at < 0 || !event.shiftKey ? 0 : last]?.focus();
+        }
+      }
+    }
+  }
+  return OfficeUiDialog;
+});
+
+// src/ribbon.ts
+var GROUP_CSS = `
+:host { display: inline-flex; flex: none; align-self: stretch; }
+.group { box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between;
+	min-height: 78px; padding: 4px 8px 2px;
+	border-inline-end: 1px solid color-mix(in srgb, var(--office-border, #d1d5db) 60%, transparent); }
+:host(:last-child) .group { border-inline-end: 0; }
+.row { display: flex; align-items: flex-start; gap: 4px; }
+::slotted(*) { flex-shrink: 0; }
+.caption { padding-top: 2px; color: var(--office-muted-foreground, #6b7280); font-size: 10px;
+	line-height: 12px; text-align: center; white-space: nowrap; }
+@media (forced-colors: active) { .group { border-inline-end-color: CanvasText; } .caption { color: CanvasText; } }
+`;
+var defineRibbonGroup = definer("office-ui-ribbon-group", () => {
+  class OfficeUiRibbonGroup extends HTMLElement {
+    static observedAttributes = ["label"];
+    caption;
+    constructor() {
+      super();
+      const doc = this.ownerDocument;
+      const root = this.attachShadow({ mode: "open" });
+      attachStyles(root, controlCss(GROUP_CSS));
+      const group = doc.createElement("div");
+      group.className = "group";
+      const row = doc.createElement("div");
+      row.className = "row";
+      row.append(doc.createElement("slot"));
+      this.caption = doc.createElement("span");
+      this.caption.className = "caption";
+      group.append(row, this.caption);
+      root.append(group);
+    }
+    connectedCallback() {
+      this.setAttribute("role", "group");
+      this.sync();
+    }
+    attributeChangedCallback() {
+      this.sync();
+    }
+    sync() {
+      const label = this.getAttribute("label") ?? "";
+      this.caption.textContent = label;
+      this.setAttribute("aria-label", label);
+    }
+  }
+  return OfficeUiRibbonGroup;
+});
+var TOOLBAR_CSS = `
+:host { display: flex; flex-wrap: wrap; align-items: stretch; gap: 2px; padding: 2px 4px;
+	background: var(--office-surface, #f3f4f6); border-bottom: 1px solid var(--office-border, #d1d5db); }
+@media (forced-colors: active) { :host { border-bottom-color: CanvasText; background: Canvas; } }
+`;
+var ITEM = "office-ui-button, office-ui-select, office-ui-checkbox, office-ui-switch";
+var defineToolbar = definer("office-ui-toolbar", () => {
+  class OfficeUiToolbar extends HTMLElement {
+    constructor() {
+      super();
+      const root = this.attachShadow({ mode: "open" });
+      attachStyles(root, controlCss(TOOLBAR_CSS));
+      root.append(this.ownerDocument.createElement("slot"));
+      this.addEventListener("keydown", (event) => this.onKey(event));
+    }
+    connectedCallback() {
+      this.setAttribute("role", "toolbar");
+    }
+    items() {
+      return [...this.querySelectorAll(ITEM)].filter(
+        (el) => !el.hasAttribute("disabled")
+      );
+    }
+    onKey(event) {
+      const vertical = this.getAttribute("aria-orientation") === "vertical";
+      const next = vertical ? "ArrowDown" : "ArrowRight";
+      const prev = vertical ? "ArrowUp" : "ArrowLeft";
+      if (![next, prev, "Home", "End"].includes(event.key)) return;
+      const items = this.items();
+      const from = items.findIndex(
+        (el) => el === event.target || el.contains(event.target)
+      );
+      if (from < 0 || items.length === 0) return;
+      event.preventDefault();
+      const index = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : (from + (event.key === next ? 1 : -1) + items.length) % items.length;
+      items[index]?.focus();
+    }
+  }
+  return OfficeUiToolbar;
+});
+
+// src/select.ts
+var CSS3 = `
+: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;
+	color: var(--office-foreground, #1f2937); background: var(--office-background, #fff);
+	border: 1px solid var(--office-border, #d1d5db); border-radius: var(--office-radius, 4px); cursor: pointer; }
+button:focus-visible { outline: 2px solid var(--office-ring, #2563eb); outline-offset: 1px; }
+:host([disabled]) button { opacity: .5; cursor: not-allowed; }
+ul { position: absolute; z-index: 10; inset-inline: 0; top: 100%; margin: 2px 0 0; padding: 2px; list-style: none;
+	max-height: 240px; overflow: auto; background: var(--office-background, #fff);
+	border: 1px solid var(--office-border, #d1d5db); border-radius: var(--office-radius, 4px); }
+ul[hidden] { display: none; }
+li { display: flex; align-items: center; min-height: var(--office-target-size, 28px); padding: 0 8px;
+	font-size: 12px; color: var(--office-foreground, #1f2937); cursor: pointer; border-radius: 3px; }
+li[aria-selected="true"] { font-weight: 600; }
+li[data-active] { background: var(--office-surface, #f3f4f6); }
+li[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
+@media (forced-colors: active) {
+	button, ul { border-color: CanvasText; background: Canvas; color: CanvasText; }
+	li[data-active] { background: Highlight; color: HighlightText; }
+}
+`;
+var uid = 0;
+var defineSelect = definer("office-ui-select", () => {
+  class OfficeUiSelect extends HTMLElement {
+    static observedAttributes = ["value", "disabled", "aria-label"];
+    opts = [];
+    current = "";
+    active = -1;
+    typed = "";
+    typedAt = 0;
+    trigger;
+    list;
+    label;
+    domId = `office-ui-select-${++uid}`;
+    constructor() {
+      super();
+      const doc = this.ownerDocument;
+      const root = this.attachShadow({ mode: "open", delegatesFocus: true });
+      attachStyles(root, controlCss(CSS3));
+      this.trigger = doc.createElement("button");
+      this.trigger.type = "button";
+      this.trigger.setAttribute("role", "combobox");
+      this.trigger.setAttribute("aria-haspopup", "listbox");
+      this.trigger.setAttribute("aria-expanded", "false");
+      this.trigger.setAttribute("aria-controls", this.domId);
+      this.label = doc.createElement("span");
+      const caret = doc.createElement("span");
+      caret.setAttribute("aria-hidden", "true");
+      caret.textContent = "\u25BE";
+      this.trigger.append(this.label, caret);
+      this.list = doc.createElement("ul");
+      this.list.id = this.domId;
+      this.list.setAttribute("role", "listbox");
+      this.list.hidden = true;
+      root.append(this.trigger, this.list);
+      this.trigger.addEventListener("click", () => this.isOpen ? this.close() : this.open());
+      this.trigger.addEventListener("keydown", (event) => this.onKey(event));
+      this.trigger.addEventListener("blur", () => this.close());
+      this.list.addEventListener("mousedown", (event) => event.preventDefault());
+      this.list.addEventListener("click", (event) => {
+        const item = event.target.closest("li");
+        if (item) this.choose(Number(item.dataset.index));
+      });
+    }
+    connectedCallback() {
+      this.sync();
+    }
+    attributeChangedCallback(name, _old, value) {
+      if (name === "value") this.current = value ?? "";
+      this.sync();
+    }
+    get options() {
+      return this.opts;
+    }
+    set options(next) {
+      this.opts = next.map((option) => ({ ...option }));
+      this.sync();
+    }
+    get value() {
+      return this.current;
+    }
+    set value(next) {
+      this.current = String(next);
+      this.sync();
+    }
+    get selectedIndex() {
+      return this.opts.findIndex((option) => option.value === this.current);
+    }
+    set selectedIndex(index) {
+      const option = this.opts[index];
+      if (option) this.value = option.value;
+    }
+    get disabled() {
+      return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+      this.toggleAttribute("disabled", Boolean(value));
+    }
+    get isOpen() {
+      return !this.list.hidden;
+    }
+    open() {
+      if (this.disabled || this.isOpen) return;
+      this.list.hidden = false;
+      this.trigger.setAttribute("aria-expanded", "true");
+      this.setActive(this.selectedIndex >= 0 ? this.selectedIndex : this.step(-1, 1));
+    }
+    close() {
+      this.list.hidden = true;
+      this.trigger.setAttribute("aria-expanded", "false");
+      this.trigger.removeAttribute("aria-activedescendant");
+      this.active = -1;
+    }
+    step(from, dir) {
+      for (let i = from + dir; i >= 0 && i < this.opts.length; i += dir) {
+        if (!this.opts[i]?.disabled) return i;
+      }
+      return from;
+    }
+    setActive(index) {
+      this.active = index;
+      this.list.querySelectorAll("li").forEach((item, i) => item.toggleAttribute("data-active", i === index));
+      if (index >= 0) this.trigger.setAttribute("aria-activedescendant", `${this.domId}-${index}`);
+    }
+    choose(index) {
+      const option = this.opts[index];
+      if (!option || option.disabled) return;
+      const changed = option.value !== this.current;
+      this.value = option.value;
+      this.close();
+      if (changed) {
+        this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+      }
+    }
+    onKey(event) {
+      if (this.disabled) return;
+      const key = event.key;
+      if (key === "ArrowDown" || key === "ArrowUp") {
+        event.preventDefault();
+        if (!this.isOpen) return this.open();
+        this.setActive(this.step(this.active, key === "ArrowDown" ? 1 : -1));
+      } else if (key === "Home" || key === "End") {
+        event.preventDefault();
+        if (!this.isOpen) this.open();
+        this.setActive(key === "Home" ? this.step(-1, 1) : this.step(this.opts.length, -1));
+      } else if (key === "Enter" || key === " ") {
+        event.preventDefault();
+        if (this.isOpen) this.choose(this.active);
+        else this.open();
+      } else if (key === "Escape") {
+        if (this.isOpen) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.close();
+        }
+      } else if (key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+        const now = Date.now();
+        this.typed = now - this.typedAt > 700 ? key : this.typed + key;
+        this.typedAt = now;
+        const needle = this.typed.toLowerCase();
+        const index = this.opts.findIndex(
+          (option) => !option.disabled && option.label.toLowerCase().startsWith(needle)
+        );
+        if (index >= 0) {
+          if (this.isOpen) this.setActive(index);
+          else this.choose(index);
+        }
+      }
+    }
+    sync() {
+      this.trigger.disabled = this.disabled;
+      this.setAttribute("aria-disabled", String(this.disabled));
+      const name = this.getAttribute("aria-label");
+      if (name) this.trigger.setAttribute("aria-label", name);
+      else this.trigger.removeAttribute("aria-label");
+      this.label.textContent = this.opts[this.selectedIndex]?.label ?? "";
+      this.list.replaceChildren(
+        ...this.opts.map((option, index) => {
+          const item = this.ownerDocument.createElement("li");
+          item.id = `${this.domId}-${index}`;
+          item.dataset.index = String(index);
+          item.setAttribute("role", "option");
+          item.setAttribute("aria-selected", String(option.value === this.current));
+          if (option.disabled) item.setAttribute("aria-disabled", "true");
+          item.textContent = option.label;
+          return item;
+        })
+      );
+      if (this.isOpen) this.setActive(Math.min(this.active, this.opts.length - 1));
+    }
+  }
+  return OfficeUiSelect;
+});
+
+// src/status-bar.ts
+var BAR_CSS = `
+:host { display: flex; align-items: center; gap: 12px; min-height: 24px; padding: 0 8px; font-size: 11px;
+	background: var(--office-surface, #f3f4f6); color: var(--office-foreground, #1f2937);
+	border-top: 1px solid var(--office-border, #d1d5db); font-family: var(--office-font, system-ui, sans-serif); }
+::slotted([slot="end"]) { margin-inline-start: auto; }
+@media (forced-colors: active) { :host { background: Canvas; color: CanvasText; border-top-color: CanvasText; } }
+`;
+var defineStatusBar = definer("office-ui-status-bar", () => {
+  class OfficeUiStatusBar extends HTMLElement {
+    constructor() {
+      super();
+      const root = this.attachShadow({ mode: "open" });
+      attachStyles(root, controlCss(BAR_CSS));
+      root.append(this.ownerDocument.createElement("slot"));
+    }
+    connectedCallback() {
+      this.setAttribute("role", "group");
+      if (!this.hasAttribute("aria-label"))
+        this.setAttribute("aria-label", this.getAttribute("label") ?? "Status");
+    }
+  }
+  return OfficeUiStatusBar;
+});
+var ITEM_CSS = `
+:host { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
+.label { color: var(--office-muted-foreground, #6b7280); }
+button { all: unset; display: inline-flex; gap: 4px; align-items: center; cursor: pointer; padding: 0 4px;
+	min-height: var(--office-target-size, 24px); border-radius: 3px; }
+button:hover { background: var(--office-background, #fff); }
+button:focus-visible { outline: 2px solid var(--office-ring, #2563eb); }
+@media (forced-colors: active) { .label { color: GrayText; } button:focus-visible { outline-color: Highlight; } }
+`;
+var defineStatusItem = definer("office-ui-status-item", () => {
+  class OfficeUiStatusItem extends HTMLElement {
+    static observedAttributes = ["label", "value", "interactive"];
+    root;
+    constructor() {
+      super();
+      this.root = this.attachShadow({ mode: "open", delegatesFocus: true });
+      attachStyles(this.root, controlCss(ITEM_CSS));
+    }
+    connectedCallback() {
+      this.render();
+    }
+    attributeChangedCallback() {
+      this.render();
+    }
+    get value() {
+      return this.getAttribute("value") ?? "";
+    }
+    set value(next) {
+      this.setAttribute("value", String(next));
+    }
+    render() {
+      const doc = this.ownerDocument;
+      const label = this.getAttribute("label") ?? "";
+      const content = doc.createDocumentFragment();
+      if (label) {
+        const l = doc.createElement("span");
+        l.className = "label";
+        l.textContent = label;
+        content.append(l);
+      }
+      const v = doc.createElement("span");
+      v.className = "value";
+      v.textContent = this.value;
+      content.append(v);
+      this.root.querySelectorAll(".wrap").forEach((el) => el.remove());
+      let wrap;
+      if (this.hasAttribute("interactive")) {
+        const button = doc.createElement("button");
+        button.type = "button";
+        button.addEventListener(
+          "click",
+          () => emit(this, "office-status-activate", { id: this.getAttribute("id") ?? "" })
+        );
+        wrap = button;
+      } else {
+        wrap = doc.createElement("span");
+        wrap.style.display = "inline-flex";
+        wrap.style.gap = "4px";
+      }
+      wrap.className = "wrap";
+      wrap.append(content);
+      this.root.append(wrap);
+    }
+  }
+  return OfficeUiStatusItem;
+});
+
+// src/controls.ts
+var CONTROL_DEFINERS = [
+  defineIcon,
+  defineButton,
+  defineCheckbox,
+  defineSwitch,
+  defineSelect,
+  defineRibbonGroup,
+  defineToolbar,
+  defineDialog,
+  defineStatusBar,
+  defineStatusItem
+];
+function registerControls(registry) {
+  for (const define of CONTROL_DEFINERS) define(registry);
+}
+
+export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineDialog, defineRibbonGroup, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineToolbar, registerControls };