ooxml-ui 0.3.0 → 0.4.0

package/dist/{chunk-TVZ4V4CX.js → chunk-RYUUWQ7F.js}

@@ -459,7 +459,15 @@ var defineMenuItem = definer("office-ui-menu-item", () => {
 });
 var defineMenuButton = definer("office-ui-menu-button", () => {
   class OfficeUiMenuButton extends HTMLElement {
-    static observedAttributes = ["label", "icon", "command", "disabled", "title", "keyshortcuts"];
+    static observedAttributes = [
+      "label",
+      "icon",
+      "command",
+      "disabled",
+      "title",
+      "keyshortcuts",
+      "icon-only"
+    ];
     wrap;
     main;
     caret;
@@ -561,8 +569,21 @@ var defineMenuButton = definer("office-ui-menu-button", () => {
         this.ownerDocument.addEventListener("pointerdown", this.outside, true);
       }
       this.setExpanded(true);
+      this.place(anchor);
       this.items()[focusIndex]?.focus();
     }
+    /** Keep the open menu inside the viewport: flip left of the trigger's right edge if needed. */
+    place(anchor) {
+      const view = this.ownerDocument.defaultView;
+      const width = this.panel.offsetWidth;
+      const height = this.panel.offsetHeight;
+      if (!view || !width) return;
+      const maxLeft = view.innerWidth - width - 4;
+      const left = anchor.left > maxLeft ? Math.max(4, anchor.right - width) : anchor.left;
+      const top = anchor.bottom + 2 + height > view.innerHeight && anchor.top - height - 2 > 0 ? anchor.top - height - 2 : anchor.bottom + 2;
+      this.panel.style.left = `${Math.round(Math.min(left, Math.max(4, maxLeft)))}px`;
+      this.panel.style.top = `${Math.round(top)}px`;
+    }
     hide(restoreFocus) {
       if (!this.open) return;
       if (this.panel.hasAttribute("popover")) {
@@ -606,11 +627,21 @@ var defineMenuButton = definer("office-ui-menu-button", () => {
     sync() {
       const label = this.getAttribute("label") ?? "";
       const split = this.hasAttribute("command");
+      const iconOnly = this.hasAttribute("icon-only");
       this.text.textContent = label;
+      this.text.hidden = iconOnly;
+      if (iconOnly) this.main.setAttribute("aria-label", label);
+      else this.main.removeAttribute("aria-label");
       const title = this.getAttribute("title") ?? label;
       this.main.title = title;
       this.caret.title = split ? `${label} options` : title;
-      this.caret.setAttribute("aria-label", split ? `${label} options` : label);
+      if (split) {
+        this.caret.setAttribute("aria-label", `${label} options`);
+        this.caret.removeAttribute("aria-hidden");
+      } else {
+        this.caret.removeAttribute("aria-label");
+        this.caret.setAttribute("aria-hidden", "true");
+      }
       if (split) {
         this.main.removeAttribute("aria-haspopup");
         this.main.removeAttribute("aria-expanded");

package/dist/controls.js

@@ -1,3 +1,3 @@
-export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineDialog, defineMenuButton, defineMenuItem, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls } from './chunk-TVZ4V4CX.js';
+export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineDialog, defineMenuButton, defineMenuItem, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls } from './chunk-RYUUWQ7F.js';
 export { defineIcon } from './chunk-PCSUQPMC.js';
 import './chunk-EY266IK3.js';

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-TVZ4V4CX.js';
-export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineDialog, defineMenuButton, defineMenuItem, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls } from './chunk-TVZ4V4CX.js';
+import { registerControls } from './chunk-RYUUWQ7F.js';
+export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineDialog, defineMenuButton, defineMenuItem, defineRibbonGroup, defineRibbonStack, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToolbar, defineZoomSlider, registerControls } from './chunk-RYUUWQ7F.js';
 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';

package/dist/menu.d.ts

@@ -6,7 +6,7 @@ export declare const defineMenuItem: import("./registry.js").Definer;
 /**
  * Dropdown command with a menu of `office-ui-menu-item` children (Office's Find, Layers,
  * Align). With a `command` attribute it is a split button: the main part emits that command
- * and the caret opens the menu. Attributes: `label`, `icon`, `command`, `variant="stacked"`,
+ * and the caret opens the menu. Attributes: `label`, `icon`, `command`, `variant="stacked"`, `icon-only`,
  * `disabled`, `title`, `keyshortcuts`. The menu uses the top layer (`popover`) so ribbon
  * overflow never clips it. Keyboard: Enter, Space or ArrowDown open; arrows, Home and End move;
  * Escape and Tab close; focus returns to the trigger. Choosing an item closes the menu; its

package/package.json

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