ooxml-ui 0.13.0 → 0.15.0

package/dist/{chunk-JROJGF7A.js → chunk-ZBFAPBNU.js}

@@ -1,7 +1,7 @@
-import { createIconSvg, paintIcon, defineIcon } from './chunk-4NUKVNSJ.js';
-import { initialsOf } from './chunk-NOQAM6ZS.js';
-import { definer, attachStyles, controlCss, emit } from './chunk-D6EREKYF.js';
-import { tok, OFFICE_TOKENS } from './chunk-MDW2Y5UN.js';
+import { createIconSvg, paintIcon, defineIcon } from './chunk-VUXNXH4Q.js';
+import { initialsOf } from './chunk-VYF7LGXZ.js';
+import { definer, attachStyles, controlCss, emit } from './chunk-NDEB6EBU.js';
+import { tok, FOCUS_RING, OFFICE_TOKENS } from './chunk-4MT4OIAJ.js';
 
 // src/chrome-controls.ts
 var ICON = `svg { flex: none; width: ${tok("--office-icon-size")}; height: ${tok("--office-icon-size")}; fill: none; stroke: currentColor; stroke-width: ${tok("--office-icon-stroke")};
@@ -1770,56 +1770,114 @@ var defineAccount = definer("office-ui-account", () => {
 // src/button.ts
 var CSS10 = `
 :host { display: inline-flex; vertical-align: middle; }
-button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
+button { box-sizing: border-box; position: relative; display: inline-flex; align-items: center; justify-content: center;
 	gap: ${tok("--office-space-1-5")}; min-width: ${tok("--office-target-size")}; min-height: ${tok("--office-target-size")};
 	padding: 0 ${tok("--office-space-2")}; border: ${tok("--office-border-width")} solid transparent; border-radius: ${tok("--office-radius")};
 	background: transparent; color: ${tok("--office-foreground")}; font: inherit; font-size: ${tok("--office-font-size-sm")};
 	cursor: pointer; white-space: nowrap; }
 :host([variant="stacked"]) button { flex-direction: column; padding: ${tok("--office-space-1")} ${tok("--office-space-2")}; }
 button:hover:not(:disabled) { background: ${tok("--office-surface")}; }
+button:active:not(:disabled) { background: ${tok("--office-selected")}; }
 button:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: calc(${tok("--office-focus-offset")} / 2); }
 button[aria-pressed="true"], button[aria-expanded="true"] { border-color: ${tok("--office-accent")};
 	background: ${tok("--office-surface")}; }
+:host([active]) button { background: ${tok("--office-command-active")}; color: ${tok("--office-accent")}; }
 button:disabled { opacity: .5; cursor: not-allowed; }
-svg { width: ${tok("--office-icon-size-ml")}; height: ${tok("--office-icon-size-ml")}; fill: none; stroke: currentColor; stroke-width: ${tok("--office-icon-stroke")};
-	stroke-linecap: round; stroke-linejoin: round; }
-svg:not([data-painted]) { display: none; }
+svg { width: ${tok("--office-icon-size-ml")}; height: ${tok("--office-icon-size-ml")}; flex: none; color: ${tok("--office-command-icon-color")};
+	fill: none; stroke: currentColor; stroke-width: ${tok("--office-icon-stroke")}; stroke-linecap: round; stroke-linejoin: round; }
+svg.glyph:not([data-painted]) { display: none; }
+.label[hidden], .caret[hidden], .badge[hidden] { display: none; }
+/* Office trails a menu chevron after the last line of the label. */
+.caret { display: inline-block; width: ${tok("--office-icon-size-xs")}; height: ${tok("--office-icon-size-xs")};
+	margin-inline-start: ${tok("--office-space-0")}; vertical-align: middle; color: ${tok("--office-muted-foreground")}; }
+.badge { position: absolute; top: 0; inset-inline-end: 0; padding: 0 ${tok("--office-space-0")}; border-radius: ${tok("--office-radius-full")};
+	background: ${tok("--office-accent")}; color: ${tok("--office-accent-foreground")}; font-size: ${tok("--office-font-size-3xs")}; }
+/* Large ribbon command: a big glyph above a two-line label. */
+:host([size="large"]) button { flex-direction: column; justify-content: flex-start; gap: ${tok("--office-space-0")};
+	min-width: ${tok("--office-command-large-min-width")}; max-width: ${tok("--office-command-large-max-width")};
+	height: ${tok("--office-command-large-height")}; padding: ${tok("--office-space-0")} ${tok("--office-space-1")};
+	border: 0; white-space: normal; text-align: center; line-height: ${tok("--office-line-height-tight")}; }
+:host([size="large"]) svg.glyph { width: ${tok("--office-command-large-icon")}; height: ${tok("--office-command-large-icon")}; }
+/* Small ribbon command: icon and label in one row. */
+:host([size="small"]) button { justify-content: flex-start; min-width: 0; height: ${tok("--office-control-height")};
+	min-height: ${tok("--office-control-height")}; padding: 0 ${tok("--office-space-1-5")}; border: 0; text-align: start; }
+:host([size="small"]) svg.glyph { width: ${tok("--office-command-small-icon")}; height: ${tok("--office-command-small-icon")}; }
+/* Tall, label-less tool tiles (pens, erasers). */
+:host([icon-only][tall]) button { min-width: ${tok("--office-command-tall-min-width")}; height: ${tok("--office-command-tall-height")}; padding: ${tok("--office-space-1")}; }
+:host([icon-only][tall]) svg.glyph { width: ${tok("--office-command-tall-icon")}; height: ${tok("--office-command-tall-icon")}; }
+:host([icon-only][tall][active]) button { box-shadow: inset 0 0 0 ${tok("--office-border-width")} ${tok("--office-accent")}; }
+@media (pointer: coarse), (max-width: 767px) {
+	:host([size="small"]) button { min-height: ${tok("--office-target-size-touch")}; }
+	:host([icon-only]) button { min-width: ${tok("--office-target-size-touch")}; }
+}
 @media (forced-colors: active) {
 	button { border-color: ButtonText; color: ButtonText; background: ButtonFace; }
+	svg { color: ButtonText; }
 	button:disabled { color: GrayText; border-color: GrayText; }
-	button[aria-pressed="true"], button[aria-expanded="true"] { background: Highlight; color: HighlightText; }
+	button[aria-pressed="true"], button[aria-expanded="true"], :host([active]) button { 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",
-      "keyshortcuts"
-    ];
+    static requestEvent = "office-command";
+    static idAttribute = "command";
+    static detailKey = "command";
+    static get observedAttributes() {
+      return [
+        "label",
+        "icon",
+        "command",
+        "disabled",
+        "pressed",
+        "expanded",
+        "icon-only",
+        "title",
+        "keyshortcuts",
+        "badge",
+        "caret",
+        this.idAttribute
+      ];
+    }
     button;
     svg;
     text;
+    caret;
+    badge;
     constructor() {
       super();
+      const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open", delegatesFocus: true });
       attachStyles(root, controlCss(CSS10));
-      this.button = this.ownerDocument.createElement("button");
+      this.button = doc.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);
+      this.svg = createIconSvg(doc);
+      this.svg.classList.add("glyph");
+      this.text = doc.createElement("span");
+      this.text.className = "label";
+      this.caret = createIconSvg(doc);
+      this.caret.classList.add("caret");
+      paintIcon(this.caret, "chevronDown");
+      this.badge = doc.createElement("span");
+      this.badge.className = "badge";
+      this.badge.setAttribute("aria-hidden", "true");
+      this.button.append(this.svg, this.text, this.badge);
       root.append(this.button);
+      this.button.addEventListener("keydown", (event) => {
+        if ((event.key === " " || event.key === "Enter") && !event.ctrlKey && !event.metaKey && !event.altKey)
+          event.stopPropagation();
+      });
       this.button.addEventListener("click", () => {
-        const command = this.getAttribute("command");
-        if (!this.button.disabled && command) emit(this, "office-command", { command });
+        const { requestEvent, idAttribute, detailKey } = this.constructor;
+        const id = this.getAttribute(idAttribute);
+        if (!this.button.disabled && id)
+          this.dispatchEvent(
+            new CustomEvent(requestEvent, {
+              detail: { [detailKey]: id },
+              bubbles: true,
+              composed: true
+            })
+          );
       });
     }
     connectedCallback() {
@@ -1842,10 +1900,21 @@ var defineButton = definer("office-ui-button", () => {
       if (value === void 0) this.removeAttribute("pressed");
       else this.setAttribute("pressed", String(value));
     }
+    /** The registered icon to draw; a product subclass may map names onto its glyph set. */
+    iconName() {
+      return this.getAttribute("icon");
+    }
+    /** Whether the trailing menu chevron shows. */
+    showsCaret() {
+      const caret = this.getAttribute("caret");
+      return caret !== null && caret !== "false";
+    }
     sync() {
       const label = this.getAttribute("label") ?? "";
       const iconOnly = this.hasAttribute("icon-only");
       this.text.textContent = label;
+      this.text.append(this.caret);
+      this.caret.toggleAttribute("hidden", !this.showsCaret());
       this.text.hidden = iconOnly;
       if (iconOnly && label) this.button.setAttribute("aria-label", label);
       else this.button.removeAttribute("aria-label");
@@ -1854,8 +1923,10 @@ var defineButton = definer("office-ui-button", () => {
       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", "");
+      if (paintIcon(this.svg, this.iconName())) this.svg.setAttribute("data-painted", "");
       else this.svg.removeAttribute("data-painted");
+      this.badge.textContent = this.getAttribute("badge") ?? "";
+      this.badge.hidden = !this.badge.textContent;
       for (const attr of ["pressed", "expanded"]) {
         const value = this.getAttribute(attr);
         if (value === null) this.button.removeAttribute(`aria-${attr}`);
@@ -3037,41 +3108,90 @@ function text(doc, tag, content, className) {
 // 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: ${tok("--office-ribbon-group-height")}; padding: ${tok("--office-space-1")} ${tok("--office-space-2")} ${tok("--office-space-0")};
-	border-inline-end: ${tok("--office-border-width")} solid color-mix(in srgb, ${tok("--office-border")} 60%, transparent); }
-:host(:last-child) .group { border-inline-end: 0; }
-.row { display: flex; align-items: flex-start; gap: ${tok("--office-space-1")}; }
+.group { position: relative; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between;
+	min-height: ${tok("--office-ribbon-group-height")}; padding: ${tok("--office-ribbon-group-padding")}; }
+/* Office draws a hairline between groups; a product may stop it short of the top and bottom. */
+.group::after { content: ''; position: absolute; top: ${tok("--office-ribbon-separator-inset")}; bottom: ${tok("--office-ribbon-separator-inset")};
+	inset-inline-end: 0; width: ${tok("--office-border-width")}; background: ${tok("--office-ribbon-separator")}; }
+:host(:last-child) .group::after { content: none; }
+.row { display: flex; align-items: flex-start; gap: ${tok("--office-space-1")}; flex: 1; }
+/* One-line groups centre their commands on the whole group box. */
+:host([data-compact-row]) .row { align-items: center; }
+/* Several small drop-down galleries stack in columns of three. */
+:host([data-stack]) .row { flex-direction: column; align-items: stretch; align-content: flex-start; flex-wrap: wrap;
+	max-height: ${tok("--office-ribbon-stack-max-height")}; gap: ${tok("--office-space-0")}; }
 ::slotted(*) { flex-shrink: 0; }
-.foot { position: relative; display: flex; justify-content: center; padding-top: ${tok("--office-space-0")}; }
-.caption { color: ${tok("--office-muted-foreground")}; font-size: ${tok("--office-font-size-2xs")};
+.foot { position: relative; display: flex; align-items: center; justify-content: center; padding: ${tok("--office-ribbon-caption-padding")}; }
+.caption { color: ${tok("--office-muted-foreground")}; font-size: ${tok("--office-ribbon-caption-size")};
 	line-height: ${tok("--office-ribbon-caption-line-height")}; text-align: center; white-space: nowrap; }
-.launcher { position: absolute; inset-inline-end: -6px; bottom: calc(-1 * ${tok("--office-space-px")}); display: inline-grid; place-items: center;
-	width: ${tok("--office-launcher-width")}; height: ${tok("--office-launcher-height")}; padding: 0; border: 0; border-radius: ${tok("--office-radius-xs")}; background: transparent;
-	color: ${tok("--office-muted-foreground")}; cursor: pointer; }
-.launcher:hover:not(:disabled) { background: ${tok("--office-surface")}; }
+.launcher { position: absolute; inset-inline-end: ${tok("--office-launcher-inset-end")}; bottom: ${tok("--office-launcher-inset-bottom")}; display: inline-grid; place-items: center;
+	width: ${tok("--office-launcher-width")}; height: ${tok("--office-launcher-height")}; padding: 0; border: 0; border-radius: ${tok("--office-radius-xs")};
+	background: transparent; color: ${tok("--office-muted-foreground")}; cursor: pointer; }
+.launcher:hover:not(:disabled) { background: ${tok("--office-surface")}; color: ${tok("--office-foreground")}; }
 .launcher:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; }
 .launcher:disabled { opacity: .45; cursor: not-allowed; }
 .launcher[hidden] { display: none; }
-.launcher svg { width: ${tok("--office-icon-size-xs")}; height: ${tok("--office-icon-size-xs")}; fill: none; stroke: currentColor; stroke-width: ${tok("--office-icon-stroke")};
-	stroke-linecap: round; stroke-linejoin: round; }
-@media (forced-colors: active) { .group { border-inline-end-color: CanvasText; } .caption { color: CanvasText; } }
+.launcher svg { width: ${tok("--office-icon-size-xs")}; height: ${tok("--office-icon-size-xs")}; fill: none; stroke: currentColor;
+	stroke-width: ${tok("--office-icon-stroke")}; stroke-linecap: round; stroke-linejoin: round; }
+/* Collapsed (narrow window): the group is one button; its commands open in a popup. */
+.face { display: none; }
+:host([data-collapsed]) .face { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: ${tok("--office-space-0")};
+	min-width: ${tok("--office-collapsed-group-min-width")}; height: ${tok("--office-command-large-height")}; padding: ${tok("--office-space-0")} ${tok("--office-space-1-5")};
+	border: 0; border-radius: ${tok("--office-radius")}; background: transparent; color: ${tok("--office-foreground")}; font: inherit;
+	font-size: ${tok("--office-font-size-sm")}; cursor: pointer; }
+:host([data-collapsed]) .face:hover, :host([data-open]) .face { background: ${tok("--office-selected")}; }
+.face:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: ${tok("--office-focus-offset")}; }
+.face svg { width: ${tok("--office-command-large-icon")}; height: ${tok("--office-command-large-icon")}; fill: none; stroke: currentColor;
+	stroke-width: ${tok("--office-icon-stroke")}; stroke-linecap: round; stroke-linejoin: round; color: ${tok("--office-command-icon-color")}; }
+.face svg.chev { width: ${tok("--office-icon-size-xs")}; height: ${tok("--office-icon-size-xs")}; color: currentColor; }
+:host([data-collapsed]) .foot, :host([data-collapsed]) .row { display: none; }
+:host([data-collapsed][data-open]) .row { display: flex; flex-wrap: wrap; position: fixed; top: ${tok("--office-ribbon-collapse-y")};
+	left: ${tok("--office-ribbon-collapse-x")}; z-index: ${tok("--office-z-popover")}; box-sizing: border-box;
+	max-width: calc(100vw - 2 * ${tok("--office-space-2")}); padding: ${tok("--office-space-2")}; background: ${tok("--office-popover")};
+	color: ${tok("--office-popover-foreground")}; border: ${tok("--office-border-width")} solid ${tok("--office-border")};
+	border-radius: ${tok("--office-radius-md")}; box-shadow: ${tok("--office-shadow")}; }
+@media (forced-colors: active) {
+	.group::after { background: CanvasText; } .caption, .launcher { color: CanvasText; }
+	:host([data-collapsed][data-open]) .row { border-color: CanvasText; }
+}
 `;
+function tokenPx(el, name, fallback) {
+  const value = el.ownerDocument.defaultView?.getComputedStyle(el).getPropertyValue(name).trim();
+  const px = value?.endsWith("px") ? parseFloat(value) : NaN;
+  return Number.isFinite(px) ? px : fallback;
+}
 var defineRibbonGroup = definer("office-ui-ribbon-group", () => {
   class OfficeUiRibbonGroup extends HTMLElement {
-    static observedAttributes = ["label", "launcher", "launcher-disabled"];
+    static launcherEvent = "office-command";
+    static collapseEvent = "office-ribbon-collapse-toggle";
+    static observedAttributes = [
+      "label",
+      "launcher",
+      "launcher-label",
+      "launcher-disabled",
+      "icon",
+      "data-open"
+    ];
     caption;
     launcher;
+    face;
+    faceIcon;
+    faceLabel;
+    slotEl;
+    observer;
     constructor() {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
       attachStyles(root, controlCss(GROUP_CSS));
+      const config3 = () => this.constructor;
       const group = doc.createElement("div");
       group.className = "group";
       const row = doc.createElement("div");
       row.className = "row";
-      row.append(doc.createElement("slot"));
+      this.slotEl = doc.createElement("slot");
+      this.slotEl.addEventListener("slotchange", () => this.observe());
+      row.append(this.slotEl);
       this.caption = doc.createElement("span");
       this.caption.className = "caption";
       this.launcher = doc.createElement("button");
@@ -3081,30 +3201,94 @@ var defineRibbonGroup = definer("office-ui-ribbon-group", () => {
       paintIcon(glyph, "launcher");
       this.launcher.append(glyph);
       this.launcher.addEventListener("click", () => {
-        const command = this.getAttribute("launcher");
-        if (command && !this.launcher.disabled) emit(this, "office-command", { command });
+        if (this.launcher.disabled) return;
+        const detail = this.launcherDetail();
+        if (detail)
+          this.dispatchEvent(
+            new CustomEvent(config3().launcherEvent, { detail, bubbles: true, composed: true })
+          );
       });
       const foot = doc.createElement("div");
       foot.className = "foot";
       foot.append(this.caption, this.launcher);
-      group.append(row, foot);
+      this.face = doc.createElement("button");
+      this.face.type = "button";
+      this.face.className = "face";
+      this.face.setAttribute("aria-haspopup", "true");
+      this.faceIcon = createIconSvg(doc);
+      this.faceLabel = doc.createElement("span");
+      const chevron = createIconSvg(doc);
+      chevron.classList.add("chev");
+      paintIcon(chevron, "chevronDown");
+      this.face.append(this.faceIcon, this.faceLabel, chevron);
+      this.face.addEventListener(
+        "click",
+        () => this.dispatchEvent(
+          new CustomEvent(config3().collapseEvent, { bubbles: true, composed: true })
+        )
+      );
+      group.append(this.face, row, foot);
       root.append(group);
     }
     connectedCallback() {
       this.setAttribute("role", "group");
       this.sync();
+      this.observe();
+    }
+    disconnectedCallback() {
+      this.observer?.disconnect();
     }
     attributeChangedCallback() {
       this.sync();
     }
+    /** The launcher's event detail; null emits nothing. */
+    launcherDetail() {
+      const command = this.getAttribute("launcher");
+      return command ? { command } : null;
+    }
+    /** The registered icon on the collapsed face; a product subclass may map names. */
+    iconName() {
+      return this.getAttribute("icon") ?? "grid";
+    }
+    observe() {
+      this.observer?.disconnect();
+      if (!this.isConnected) return;
+      const Observer = this.ownerDocument.defaultView?.ResizeObserver;
+      if (Observer) this.observer ??= new Observer(() => this.measure());
+      for (const el of this.slotEl.assignedElements()) this.observer?.observe(el);
+      this.measure();
+    }
+    measure() {
+      const children = [...this.children];
+      const stackable = children.filter((el) => {
+        const gallery = el.matches('[mode="dropdown"]') ? el : el.querySelector('[mode="dropdown"]');
+        return gallery !== null && !gallery.hasAttribute("data-command-large");
+      });
+      this.toggleAttribute(
+        "data-stack",
+        stackable.length > 1 && stackable.length === children.length
+      );
+      const tallest = Math.max(0, ...children.map((el) => el.getBoundingClientRect().height));
+      if (tallest > 0)
+        this.toggleAttribute(
+          "data-compact-row",
+          tallest <= tokenPx(this, "--office-ribbon-compact-row-max", 36)
+        );
+    }
     sync() {
       const label = this.getAttribute("label") ?? "";
       this.caption.textContent = label;
       this.setAttribute("aria-label", label);
-      this.launcher.hidden = !this.getAttribute("launcher");
+      const launcherLabel = this.getAttribute("launcher-label") ?? `${label} options`;
+      this.launcher.hidden = !this.hasAttribute("launcher");
       this.launcher.disabled = this.hasAttribute("launcher-disabled");
-      this.launcher.setAttribute("aria-label", `${label} options`);
-      this.launcher.title = `${label} options`;
+      this.launcher.setAttribute("aria-label", launcherLabel);
+      this.launcher.title = launcherLabel;
+      this.faceLabel.textContent = label;
+      this.face.title = label;
+      this.face.setAttribute("aria-label", label);
+      this.face.setAttribute("aria-expanded", String(this.hasAttribute("data-open")));
+      paintIcon(this.faceIcon, this.iconName());
     }
   }
   return OfficeUiRibbonGroup;
@@ -3167,199 +3351,497 @@ var defineToolbar = definer("office-ui-toolbar", () => {
   return OfficeUiToolbar;
 });
 
-// src/select.ts
-var CSS15 = `
-:host { display: inline-block; position: relative; vertical-align: middle; }
-button { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: ${tok("--office-space-2")};
-	width: 100%; min-height: ${tok("--office-target-size")}; padding: 0 ${tok("--office-space-2")}; font: inherit; font-size: ${tok("--office-font-size-sm")};
-	color: ${tok("--office-foreground")}; background: ${tok("--office-background")};
-	border: ${tok("--office-border-width")} solid ${tok("--office-border")}; border-radius: ${tok("--office-radius")}; cursor: pointer; }
-button:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: calc(${tok("--office-focus-offset")} / 2); }
-:host([disabled]) button { opacity: .5; cursor: not-allowed; }
-ul { position: absolute; z-index: 10; inset-inline: 0; top: 100%; margin: ${tok("--office-space-0")} 0 0; padding: ${tok("--office-space-0")}; list-style: none;
-	max-height: ${tok("--office-select-max-height")}; overflow: auto; background: ${tok("--office-background")};
-	border: ${tok("--office-border-width")} solid ${tok("--office-border")}; border-radius: ${tok("--office-radius")}; }
-ul[hidden] { display: none; }
-li { display: flex; align-items: center; min-height: ${tok("--office-target-size")}; padding: 0 ${tok("--office-space-2")};
-	font-size: ${tok("--office-font-size-sm")}; color: ${tok("--office-foreground")}; cursor: pointer; border-radius: ${tok("--office-radius-sm")}; }
-li[aria-selected="true"] { font-weight: 600; }
-li[data-active] { background: ${tok("--office-surface")}; }
-li[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
+// src/select-menu.ts
+var SELECT_OPTION_ATTRIBUTES = [
+  "value",
+  "disabled",
+  "label",
+  "selected",
+  "hidden",
+  "data-display-label",
+  "data-description",
+  "style"
+];
+function collectSelectChoices(options) {
+  return options.map((option) => {
+    const parent = option.parentElement;
+    const group = parent?.localName === "optgroup" ? parent : null;
+    return {
+      value: option.value,
+      label: option.label || option.textContent?.trim() || "",
+      disabled: option.disabled || Boolean(group?.disabled),
+      hidden: Boolean(option.hidden) || Boolean(group?.hidden),
+      group: group?.label ?? "",
+      ...option.dataset.displayLabel ? { displayLabel: option.dataset.displayLabel } : {},
+      ...option.dataset.description ? { description: option.dataset.description } : {},
+      ...option.style.fontFamily ? { fontFamily: option.style.fontFamily } : {}
+    };
+  });
+}
+function renderSelectMenu(menu, choices, value) {
+  const doc = menu.ownerDocument;
+  const items = [];
+  let previousGroup = "";
+  choices.forEach((choice, index) => {
+    if (choice.hidden) return;
+    if (choice.group && choice.group !== previousGroup) {
+      const heading = doc.createElement("div");
+      heading.className = "group";
+      heading.setAttribute("role", "presentation");
+      heading.textContent = choice.group;
+      items.push(heading);
+    }
+    previousGroup = choice.group;
+    const item = doc.createElement("div");
+    item.className = "option";
+    item.setAttribute("role", "option");
+    item.setAttribute("aria-selected", String(choice.value === value));
+    item.setAttribute("aria-disabled", String(choice.disabled));
+    item.id = `${menu.id}-${index}`;
+    item.dataset.index = String(index);
+    item.textContent = choice.displayLabel ?? choice.label;
+    if (choice.fontFamily) item.style.fontFamily = choice.fontFamily;
+    if (choice.description) {
+      const description = doc.createElement("span");
+      description.className = "description";
+      description.textContent = choice.description;
+      item.append(description);
+    }
+    items.push(item);
+  });
+  menu.replaceChildren(...items);
+}
+function tokenPx2(el, name, fallback) {
+  const value = el.ownerDocument.defaultView?.getComputedStyle(el).getPropertyValue(name).trim();
+  const px = value?.endsWith("px") ? parseFloat(value) : NaN;
+  return Number.isFinite(px) ? px : fallback;
+}
+function positionSelectMenu(menu, trigger, host) {
+  const view = menu.ownerDocument.defaultView;
+  const rect = trigger.getBoundingClientRect();
+  const margin = tokenPx2(host, "--office-space-2", 8);
+  const gap = tokenPx2(host, "--office-space-1", 4);
+  const width = Math.max(0, view.innerWidth - margin * 2);
+  const below = Math.max(0, view.innerHeight - rect.bottom - gap - margin);
+  const above = Math.max(0, rect.top - gap - margin);
+  menu.style.minWidth = `${Math.min(rect.width, width)}px`;
+  menu.style.maxWidth = `${width}px`;
+  const cap = host.getAttribute("data-font-picker") === "family" ? tokenPx2(host, "--office-font-picker-max-height", 320) : tokenPx2(host, "--office-select-max-height", 240);
+  menu.style.maxHeight = `${cap}px`;
+  const preferred = menu.getBoundingClientRect().height;
+  const flip = below < preferred && above > below;
+  menu.style.maxHeight = `${Math.min(cap, flip ? above : below)}px`;
+  const { height, width: menuWidth } = menu.getBoundingClientRect();
+  menu.style.top = `${Math.max(margin, flip ? rect.top - gap - height : rect.bottom + gap)}px`;
+  menu.style.left = `${Math.max(margin, Math.min(rect.left, view.innerWidth - menuWidth - margin))}px`;
+}
+function markSelectActive(menu, trigger, active, open) {
+  for (const item of menu.querySelectorAll("[data-index]"))
+    item.toggleAttribute("data-active", Number(item.dataset.index) === active && open);
+  if (open && active >= 0) trigger.setAttribute("aria-activedescendant", `${menu.id}-${active}`);
+  menu.querySelector("[data-active]")?.scrollIntoView?.({ block: "nearest" });
+}
+function nextSelectActive(choices, active, step) {
+  for (let i = 0; i < choices.length; i++) {
+    active = (active + step + choices.length) % choices.length;
+    if (!choices[active].disabled && !choices[active].hidden) return active;
+  }
+  return active;
+}
+var SELECT_PAGE_SIZE = 8;
+function pageSelectActive(choices, active, direction) {
+  const usable = (index) => !choices[index]?.disabled && !choices[index]?.hidden;
+  const last = choices.length - 1;
+  const target = Math.max(0, Math.min(last, Math.max(active, 0) + direction * SELECT_PAGE_SIZE));
+  for (let index = target; index >= 0 && index <= last; index -= direction)
+    if (usable(index)) return index;
+  return active;
+}
+function createSelectTrigger(doc) {
+  const trigger = doc.createElement("button");
+  trigger.type = "button";
+  trigger.setAttribute("part", "trigger");
+  trigger.setAttribute("role", "combobox");
+  trigger.setAttribute("aria-haspopup", "listbox");
+  trigger.setAttribute("aria-expanded", "false");
+  const icon2 = doc.createElement("slot");
+  icon2.name = "icon";
+  const text2 = doc.createElement("span");
+  text2.className = "value";
+  text2.setAttribute("part", "value");
+  const chevron = doc.createElement("span");
+  chevron.className = "chevron";
+  chevron.setAttribute("part", "indicator");
+  chevron.setAttribute("aria-hidden", "true");
+  const svg = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "2");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  const path = doc.createElementNS(svg.namespaceURI, "path");
+  path.setAttribute("d", "m6 9 6 6 6-6");
+  svg.append(path);
+  chevron.append(svg);
+  trigger.append(icon2, text2, chevron);
+  return { trigger, text: text2 };
+}
+function prependSelectCustomSlot(host, menu) {
+  if (!host.querySelector('[slot="custom"]')) return;
+  const custom = host.ownerDocument.createElement("slot");
+  custom.name = "custom";
+  menu.prepend(custom);
+}
+
+// src/select-styles.ts
+var SELECT_CSS = `
+:host { display: inline-block; box-sizing: border-box; min-width: 0; max-width: 100%;
+	color: ${tok("--office-foreground")}; font: inherit; font-size: ${tok("--office-font-size-sm")}; vertical-align: middle; }
+:host([disabled]) { opacity: .5; cursor: not-allowed; }
+button { box-sizing: border-box; width: 100%; min-height: ${tok("--office-field-height")}; display: flex; align-items: center;
+	justify-content: space-between; gap: ${tok("--office-space-2-5")}; padding: ${tok("--office-space-1")} ${tok("--office-space-1-5")};
+	border: ${tok("--office-border-width")} solid ${tok("--office-field-border")}; border-radius: ${tok("--office-field-radius")};
+	background: ${tok("--office-select-background")}; color: inherit; font: inherit; font-size: inherit; text-align: start; cursor: pointer; }
+button:focus-visible { ${FOCUS_RING} }
+button:disabled { cursor: not-allowed; }
+.value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chevron svg { display: none; }
+.chevron { flex: none; width: ${tok("--office-chevron-size")}; height: ${tok("--office-chevron-size")};
+	margin: 0 ${tok("--office-space-0")} ${tok("--office-space-0")} 0;
+	border-right: calc(${tok("--office-border-width")} * 1.5) solid currentColor;
+	border-bottom: calc(${tok("--office-border-width")} * 1.5) solid currentColor; transform: rotate(45deg); }
+:host([open]) .chevron { margin: ${tok("--office-space-0")} ${tok("--office-space-0")} 0 0; transform: rotate(225deg); }
+.menu { box-sizing: border-box; position: fixed; margin: 0; padding: ${tok("--office-space-1")};
+	min-width: ${tok("--office-select-menu-min-width")}; max-height: min(${tok("--office-select-max-height")}, 50vh); overflow: auto;
+	border: ${tok("--office-border-width")} solid ${tok("--office-field-border")}; border-radius: ${tok("--office-field-radius")};
+	background: ${tok("--office-popover")}; color: ${tok("--office-popover-foreground")}; box-shadow: ${tok("--office-shadow")};
+	font: inherit; font-size: inherit; }
+.menu:not(:popover-open):not([data-fallback-open]) { display: none; }
+.option { display: block; box-sizing: border-box; width: 100%; padding: ${tok("--office-space-1-5")} ${tok("--office-space-2")};
+	border-radius: ${tok("--office-radius-sm")}; cursor: pointer; white-space: nowrap; }
+.group { padding: ${tok("--office-space-1-5")} ${tok("--office-space-2")} ${tok("--office-space-0")};
+	color: ${tok("--office-muted-foreground")}; font-size: .9em; font-weight: ${tok("--office-font-weight-bold")}; }
+.option:not([aria-disabled="true"]):hover, .option[data-active]:not([aria-selected="true"]) {
+	background: ${tok("--office-select-option-active")}; }
+.option[aria-selected="true"] { background: ${tok("--office-accent")}; color: ${tok("--office-accent-foreground")}; }
+.option[aria-selected="true"]:hover { filter: brightness(1.08); }
+.option[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
+.description { flex: none; color: ${tok("--office-muted-foreground")}; font-size: ${tok("--office-font-size-2xs")}; }
+
+:host([variant^="ribbon-"][disabled]) { opacity: .4; }
+:host([variant^="ribbon-"]) button { height: ${tok("--office-ribbon-combo-height")}; min-height: ${tok("--office-ribbon-combo-height")};
+	padding: ${tok("--office-space-1")} ${tok("--office-space-2")}; gap: ${tok("--office-space-1")};
+	border: ${tok("--office-border-width")} solid color-mix(in oklab, ${tok("--office-border")} 60%, transparent);
+	border-radius: ${tok("--office-radius-sm")}; font-size: ${tok("--office-font-size-sm")};
+	background: color-mix(in oklab, ${tok("--office-background")} 60%, transparent); color: ${tok("--office-foreground")}; }
+:host([variant^="ribbon-"]) .value { flex: 1; min-width: 0; }
+:host([variant^="ribbon-"]) .chevron { width: ${tok("--office-icon-size-md")}; height: ${tok("--office-icon-size-md")}; margin: 0; border: 0; transform: none; }
+:host([variant^="ribbon-"]) .chevron svg { display: block; width: ${tok("--office-icon-size-md")}; height: ${tok("--office-icon-size-md")}; }
+:host([variant="ribbon-font"]) .chevron { color: ${tok("--office-muted-foreground")}; }
+:host([variant="ribbon-font"][data-font-picker="size"]) button { padding-inline: ${tok("--office-space-1-5")}; }
+:host([variant="ribbon-icon"]) button { width: ${tok("--office-ribbon-icon-select-width")}; gap: ${tok("--office-space-1-5")};
+	padding: ${tok("--office-space-1-5")} ${tok("--office-space-2-5")}; border: 0; background: ${tok("--office-surface")}; justify-content: center; }
+:host([variant="ribbon-icon"]) :is(.value, .chevron) { display: none; }
+::slotted(svg[slot="icon"]) { display: block; width: ${tok("--office-icon-size-md")}; height: ${tok("--office-icon-size-md")}; flex: none; }
+:host([variant^="ribbon-"]) button:hover:not(:disabled) { background: ${tok("--office-selected")}; }
+:host([variant^="ribbon-"]) .menu { width: ${tok("--office-select-ribbon-menu-width")}; padding: ${tok("--office-space-1")} 0;
+	border-radius: ${tok("--office-radius-lg")}; font-size: ${tok("--office-font-size-sm")}; }
+:host([data-font-picker="family"]) .menu { width: ${tok("--office-font-picker-width")}; }
+:host([variant^="ribbon-"]) .option { display: flex; justify-content: space-between; gap: ${tok("--office-space-3")};
+	padding: ${tok("--office-space-1-5")} ${tok("--office-space-3")}; border-radius: 0; }
+:host([variant^="ribbon-"]) .option[aria-selected="true"] { background: transparent; color: ${tok("--office-foreground")}; }
+:host([variant^="ribbon-"]) .option:hover, :host([variant^="ribbon-"]) .option[data-active] { background: ${tok("--office-surface")}; filter: none; }
+:host([variant^="ribbon-"]) .group { padding: ${tok("--office-space-2")} ${tok("--office-space-3")} ${tok("--office-space-1")};
+	text-transform: uppercase; letter-spacing: .02em; font-size: ${tok("--office-font-size-2xs")}; }
+@media (pointer: coarse), (max-width: 767px) {
+	button, :host([variant^="ribbon-"]) button { min-height: ${tok("--office-target-size-touch")}; }
+	:host([variant^="ribbon-"]) button { height: ${tok("--office-target-size-touch")}; }
+}
 @media (forced-colors: active) {
-	button, ul { border-color: CanvasText; background: Canvas; color: CanvasText; }
-	li[data-active] { background: Highlight; color: HighlightText; }
+	button, .menu { border-color: CanvasText; background: Canvas; color: CanvasText; }
+	.option[aria-selected="true"], .option[data-active], .option:not([aria-disabled="true"]):hover {
+		background: Highlight; color: HighlightText; }
 }
 `;
+
+// src/select.ts
 var uid2 = 0;
 var defineSelect = definer("office-ui-select", () => {
   class OfficeUiSelect extends HTMLElement {
+    static formAssociated = true;
     static observedAttributes = ["value", "disabled", "aria-label"];
-    opts = [];
-    current = "";
-    active = -1;
-    typed = "";
-    typedAt = 0;
+    internals;
     trigger;
-    list;
-    label;
-    domId = `office-ui-select-${++uid2}`;
+    text;
+    menu;
+    observer;
+    refreshFrame = 0;
+    data = [];
+    choices = [];
+    active = -1;
+    isOpen = false;
+    search = "";
+    searchTimer = 0;
+    defaultValue = "";
+    menuKey = "";
     constructor() {
       super();
+      try {
+        this.internals = this.attachInternals();
+      } catch {
+        this.internals = void 0;
+      }
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open", delegatesFocus: true });
-      attachStyles(root, controlCss(CSS15));
-      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));
+      attachStyles(root, controlCss(SELECT_CSS));
+      ({ trigger: this.trigger, text: this.text } = createSelectTrigger(doc));
+      this.menu = doc.createElement("div");
+      this.menu.className = "menu";
+      this.menu.id = `office-ui-select-options-${++uid2}`;
+      this.menu.setAttribute("role", "listbox");
+      this.menu.setAttribute("popover", "manual");
+      this.menu.setAttribute("part", "popup");
+      this.trigger.setAttribute("aria-controls", this.menu.id);
+      root.append(this.trigger, this.menu);
+      this.trigger.addEventListener("click", () => this.isOpen ? this.close() : this.show());
+      this.trigger.addEventListener("keydown", (event) => this.onKeyDown(event));
+      this.menu.addEventListener("pointerdown", (event) => {
+        if (event.target.closest("[data-index]")) event.preventDefault();
       });
+      this.menu.addEventListener("click", (event) => {
+        const target = event.target.closest("[data-index]");
+        if (target) this.commit(Number(target.dataset.index));
+      });
+      const Observer = doc.defaultView?.MutationObserver;
+      this.observer = Observer ? new Observer(() => {
+        const view = this.ownerDocument.defaultView;
+        if (this.refreshFrame || !view) return;
+        this.refreshFrame = view.requestAnimationFrame(() => {
+          this.refreshFrame = 0;
+          this.refresh();
+        });
+      }) : void 0;
     }
     connectedCallback() {
-      this.sync();
+      this.defaultValue = this.getAttribute("value") ?? "";
+      this.observer?.observe(this, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        characterData: true,
+        attributeFilter: SELECT_OPTION_ATTRIBUTES
+      });
+      this.refresh();
     }
-    attributeChangedCallback(name, _old, value) {
-      if (name === "value") this.current = value ?? "";
-      this.sync();
+    disconnectedCallback() {
+      this.close();
+      const view = this.ownerDocument.defaultView;
+      view?.clearTimeout(this.searchTimer);
+      this.searchTimer = 0;
+      this.search = "";
+      this.observer?.disconnect();
+      if (this.refreshFrame) view?.cancelAnimationFrame(this.refreshFrame);
+      this.refreshFrame = 0;
     }
+    attributeChangedCallback() {
+      this.refresh();
+    }
+    /** The `<option>` children, or the programmatic options when there are none. */
     get options() {
-      return this.opts;
+      const children = [...this.querySelectorAll("option")];
+      return children.length ? children : this.data;
     }
     set options(next) {
-      this.opts = next.map((option) => ({ ...option }));
-      this.sync();
+      this.data = [...next];
+      this.refresh();
     }
     get value() {
-      return this.current;
+      const requested = this.getAttribute("value");
+      const choices = this.choices.length ? this.choices : this.collect();
+      if (requested !== null && this.getAttribute("variant") === "ribbon-font") return requested;
+      if (requested !== null && (!choices.length || choices.some((c) => c.value === requested)))
+        return requested;
+      return [...this.querySelectorAll("option")].find((option) => option.selected)?.value ?? choices.find((choice) => !choice.disabled && !choice.hidden)?.value ?? choices[0]?.value ?? requested ?? "";
     }
     set value(next) {
-      this.current = String(next);
-      this.sync();
+      this.setAttribute("value", String(next ?? ""));
     }
     get selectedIndex() {
-      return this.opts.findIndex((option) => option.value === this.current);
+      return this.options.findIndex((option) => option.value === this.value);
     }
     set selectedIndex(index) {
-      const option = this.opts[index];
-      if (option) this.value = option.value;
+      this.value = this.options[index]?.value ?? "";
     }
     get disabled() {
       return this.hasAttribute("disabled");
     }
-    set disabled(value) {
-      this.toggleAttribute("disabled", Boolean(value));
+    set disabled(next) {
+      this.toggleAttribute("disabled", Boolean(next));
     }
-    get isOpen() {
-      return !this.list.hidden;
+    focus(options) {
+      this.trigger.focus(options);
     }
-    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));
+    formResetCallback() {
+      this.value = this.defaultValue;
     }
-    close() {
-      this.list.hidden = true;
-      this.trigger.setAttribute("aria-expanded", "false");
-      this.trigger.removeAttribute("aria-activedescendant");
-      this.active = -1;
+    formDisabledCallback(disabled) {
+      this.disabled = disabled;
+    }
+    collect() {
+      const children = [...this.querySelectorAll("option")];
+      if (children.length) return collectSelectChoices(children);
+      return this.data.map((option) => ({
+        value: option.value,
+        label: option.label,
+        disabled: option.disabled === true,
+        hidden: false,
+        group: ""
+      }));
     }
-    step(from, dir) {
-      for (let i = from + dir; i >= 0 && i < this.opts.length; i += dir) {
-        if (!this.opts[i]?.disabled) return i;
+    refresh() {
+      if (!this.trigger) return;
+      this.choices = this.collect();
+      if (!this.hasAttribute("value") && this.choices.length) {
+        const children = [...this.querySelectorAll("option")];
+        this.setAttribute(
+          "value",
+          children.find((option) => option.selected)?.value ?? this.choices.find((choice) => !choice.disabled && !choice.hidden)?.value ?? this.choices[0].value
+        );
+        return;
       }
-      return from;
+      const shown = this.choices.find((choice) => choice.value === this.value);
+      this.text.textContent = shown?.displayLabel ?? shown?.label ?? this.value;
+      this.trigger.disabled = this.disabled;
+      if (this.disabled) this.close();
+      const name = this.getAttribute("aria-label");
+      if (name) this.trigger.setAttribute("aria-label", name);
+      else this.trigger.removeAttribute("aria-label");
+      this.internals?.setFormValue?.(this.disabled ? null : this.value);
+      if ((this.isOpen || this.menu.childElementCount) && this.menuKey !== this.currentMenuKey())
+        this.renderMenu();
     }
-    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}`);
+    currentMenuKey() {
+      return `${this.value}|${JSON.stringify(this.choices)}`;
     }
-    choose(index) {
-      const option = this.opts[index];
-      if (!option || option.disabled) return;
-      const changed = option.value !== this.current;
-      this.value = option.value;
+    renderMenu() {
+      this.menuKey = this.currentMenuKey();
+      renderSelectMenu(this.menu, this.choices, this.value);
+      prependSelectCustomSlot(this, this.menu);
+      markSelectActive(this.menu, this.trigger, this.active, this.isOpen);
+    }
+    show() {
+      if (this.disabled || this.isOpen || !this.choices.some((c) => !c.disabled && !c.hidden))
+        return;
+      this.isOpen = true;
+      this.setAttribute("open", "");
+      const selected = this.choices.findIndex(
+        (choice) => choice.value === this.value && !choice.disabled && !choice.hidden
+      );
+      this.active = selected >= 0 ? selected : this.choices.findIndex((choice) => !choice.disabled && !choice.hidden);
+      this.renderMenu();
+      if (typeof this.menu.showPopover === "function") this.menu.showPopover();
+      else this.menu.dataset.fallbackOpen = "";
+      this.trigger.setAttribute("aria-expanded", "true");
+      this.position();
+      markSelectActive(this.menu, this.trigger, this.active, this.isOpen);
+      const view = this.ownerDocument.defaultView;
+      this.ownerDocument.addEventListener("pointerdown", this.onOutside, true);
+      view?.addEventListener("resize", this.position);
+      view?.addEventListener("scroll", this.position, true);
+    }
+    close() {
+      if (!this.isOpen) return;
+      this.isOpen = false;
+      const view = this.ownerDocument.defaultView;
+      view?.clearTimeout(this.searchTimer);
+      this.search = "";
+      this.removeAttribute("open");
+      try {
+        if (this.menu.matches(":popover-open")) this.menu.hidePopover();
+      } catch {
+      }
+      delete this.menu.dataset.fallbackOpen;
+      this.trigger.setAttribute("aria-expanded", "false");
+      this.trigger.removeAttribute("aria-activedescendant");
+      this.ownerDocument.removeEventListener("pointerdown", this.onOutside, true);
+      view?.removeEventListener("resize", this.position);
+      view?.removeEventListener("scroll", this.position, true);
+    }
+    onOutside = (event) => {
+      if (!event.composedPath().includes(this)) this.close();
+    };
+    position = () => {
+      if (this.isOpen) positionSelectMenu(this.menu, this.trigger, this);
+    };
+    move(step) {
+      if (!this.isOpen) this.show();
+      if (!this.isOpen) return;
+      this.active = nextSelectActive(this.choices, this.active, step);
+      markSelectActive(this.menu, this.trigger, this.active, this.isOpen);
+    }
+    commit(index) {
+      const choice = this.choices[index];
+      if (!choice || choice.disabled || choice.hidden) return;
+      const changed = this.value !== choice.value;
+      this.value = choice.value;
       this.close();
+      this.trigger.focus();
       if (changed) {
         this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
         this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
       }
     }
-    onKey(event) {
+    onKeyDown(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 === " ") {
+      const stop = () => {
         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)
+        event.stopPropagation();
+      };
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        stop();
+        this.move(event.key === "ArrowDown" ? 1 : -1);
+      } else if (event.key === "Home" || event.key === "End") {
+        stop();
+        this.show();
+        this.active = event.key === "Home" ? nextSelectActive(this.choices, -1, 1) : nextSelectActive(this.choices, 0, -1);
+        markSelectActive(this.menu, this.trigger, this.active, this.isOpen);
+      } else if (event.key === "PageUp" || event.key === "PageDown") {
+        stop();
+        this.show();
+        this.active = pageSelectActive(
+          this.choices,
+          this.active,
+          event.key === "PageDown" ? 1 : -1
+        );
+        markSelectActive(this.menu, this.trigger, this.active, this.isOpen);
+      } else if (event.key === "Enter" || event.key === " ") {
+        stop();
+        if (this.isOpen) this.commit(this.active);
+        else this.show();
+      } else if (event.key === "Escape" && this.isOpen) {
+        stop();
+        this.close();
+        this.trigger.focus();
+      } else if (event.key === "Tab") this.close();
+      else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+        event.stopPropagation();
+        const view = this.ownerDocument.defaultView;
+        this.search += event.key.toLocaleLowerCase();
+        view?.clearTimeout(this.searchTimer);
+        this.searchTimer = view?.setTimeout(() => {
+          this.search = "";
+        }, 700) ?? 0;
+        this.show();
+        const index = this.choices.findIndex(
+          (choice) => !choice.disabled && !choice.hidden && choice.label.toLocaleLowerCase().startsWith(this.search)
         );
         if (index >= 0) {
-          if (this.isOpen) this.setActive(index);
-          else this.choose(index);
+          this.active = index;
+          markSelectActive(this.menu, this.trigger, this.active, this.isOpen);
         }
       }
     }
-    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;
 });
@@ -3458,7 +3940,7 @@ var defineStatusItem = definer("office-ui-status-item", () => {
 });
 
 // src/tab-strip.ts
-var CSS16 = `
+var CSS15 = `
 :host { display: flex; align-items: stretch; min-width: 0; min-height: ${tok("--office-tab-height")}; gap: ${tok("--office-space-0")}; padding: 0 ${tok("--office-space-1-5")};
 	background: ${tok("--office-surface")}; color: ${tok("--office-muted-foreground")};
 	border-top: ${tok("--office-border-width")} solid ${tok("--office-border")}; font-size: ${tok("--office-font-size-sm")};
@@ -3505,7 +3987,7 @@ var defineTabStrip = definer("office-ui-tab-strip", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS16));
+      attachStyles(root, controlCss(CSS15));
       const step = (name, icon2) => {
         const button = doc.createElement("button");
         button.type = "button";
@@ -3644,7 +4126,7 @@ var defineTabStrip = definer("office-ui-tab-strip", () => {
 });
 
 // src/zoom-slider.ts
-var CSS17 = `
+var CSS16 = `
 :host { display: inline-flex; align-items: center; gap: ${tok("--office-space-0")}; font-size: ${tok("--office-font-size-xs")};
 	color: ${tok("--office-foreground")}; font-family: ${tok("--office-font")}; }
 button { box-sizing: border-box; display: inline-grid; place-items: center; min-width: ${tok("--office-target-size")};
@@ -3680,7 +4162,7 @@ var defineZoomSlider = definer("office-ui-zoom-slider", () => {
       super();
       const doc = this.ownerDocument;
       const root = this.attachShadow({ mode: "open" });
-      attachStyles(root, controlCss(CSS17));
+      attachStyles(root, controlCss(CSS16));
       const button = (name, text2) => {
         const element = doc.createElement("button");
         element.type = "button";