ooxml-ui 0.16.0 → 0.16.1

package/dist/{chunk-G2ZIAXOV.js → chunk-2XJDHLPW.js}

@@ -1845,8 +1845,8 @@ var defineButton = definer("office-ui-button", () => {
     button;
     svg;
     text;
-    caret;
-    badge;
+    #caret;
+    #badge;
     constructor() {
       super();
       const doc = this.ownerDocument;
@@ -1859,13 +1859,13 @@ var defineButton = definer("office-ui-button", () => {
       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);
+      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)
@@ -1908,6 +1908,10 @@ var defineButton = definer("office-ui-button", () => {
     iconName() {
       return this.getAttribute("icon");
     }
+    /** The tooltip: `title`, else the label of an icon-only button; a product may always show it. */
+    tooltip(label, iconOnly) {
+      return this.getAttribute("title") ?? (iconOnly ? label : "");
+    }
     /** Whether the trailing menu chevron shows. */
     showsCaret() {
       const caret = this.getAttribute("caret");
@@ -1917,20 +1921,20 @@ var defineButton = definer("office-ui-button", () => {
       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.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");
-      this.button.title = this.getAttribute("title") ?? (iconOnly ? label : "");
+      this.button.title = this.tooltip(label, iconOnly);
       this.button.disabled = this.disabled;
       const shortcuts = this.getAttribute("keyshortcuts");
       if (shortcuts) this.button.setAttribute("aria-keyshortcuts", shortcuts);
       else this.button.removeAttribute("aria-keyshortcuts");
       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;
+      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}`);
@@ -2095,7 +2099,7 @@ var defineDialog = definer("office-ui-dialog", () => {
   class OfficeUiDialog extends HTMLElement {
     static observedAttributes = ["open", "heading"];
     box;
-    heading;
+    #heading;
     closeButton;
     footer;
     returnFocus = null;
@@ -2112,8 +2116,8 @@ var defineDialog = definer("office-ui-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.#heading = doc.createElement("h2");
+      this.#heading.id = "title";
       this.box.setAttribute("aria-labelledby", "title");
       this.closeButton = doc.createElement("button");
       this.closeButton.type = "button";
@@ -2122,7 +2126,7 @@ var defineDialog = definer("office-ui-dialog", () => {
       const icon2 = createIconSvg(doc);
       paintIcon(icon2, "close");
       this.closeButton.append(icon2);
-      header.append(this.heading, this.closeButton);
+      header.append(this.#heading, this.closeButton);
       const body = doc.createElement("div");
       body.className = "body";
       body.append(doc.createElement("slot"));
@@ -2137,14 +2141,14 @@ var defineDialog = definer("office-ui-dialog", () => {
       this.addEventListener("keydown", (event) => this.onKey(event));
     }
     attributeChangedCallback(name, old, value) {
-      if (name === "heading") this.heading.textContent = 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") ?? "";
+      this.#heading.textContent = this.getAttribute("heading") ?? "";
       if (this.open) this.onOpen();
     }
     get open() {
@@ -3496,13 +3500,13 @@ var defineRibbonGroup = definer("office-ui-ribbon-group", () => {
       "icon",
       "data-open"
     ];
-    caption;
-    launcher;
-    face;
-    faceIcon;
-    faceLabel;
-    slotEl;
-    observer;
+    #caption;
+    #launcher;
+    #face;
+    #faceIcon;
+    #faceLabel;
+    #slotEl;
+    #observer;
     constructor() {
       super();
       const doc = this.ownerDocument;
@@ -3513,19 +3517,19 @@ var defineRibbonGroup = definer("office-ui-ribbon-group", () => {
       group.className = "group";
       const row = doc.createElement("div");
       row.className = "row";
-      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");
-      this.launcher.type = "button";
-      this.launcher.className = "launcher";
+      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");
+      this.#launcher.type = "button";
+      this.#launcher.className = "launcher";
       const glyph = createIconSvg(doc);
       paintIcon(glyph, "launcher");
-      this.launcher.append(glyph);
-      this.launcher.addEventListener("click", () => {
-        if (this.launcher.disabled) return;
+      this.#launcher.append(glyph);
+      this.#launcher.addEventListener("click", () => {
+        if (this.#launcher.disabled) return;
         const detail = this.launcherDetail();
         if (detail)
           this.dispatchEvent(
@@ -3534,36 +3538,36 @@ var defineRibbonGroup = definer("office-ui-ribbon-group", () => {
       });
       const foot = doc.createElement("div");
       foot.className = "foot";
-      foot.append(this.caption, this.launcher);
-      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");
+      foot.append(this.#caption, this.#launcher);
+      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(
+      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);
+      group.append(this.#face, row, foot);
       root.append(group);
     }
     connectedCallback() {
       this.setAttribute("role", "group");
-      this.sync();
-      this.observe();
+      this.#sync();
+      this.#observe();
     }
     disconnectedCallback() {
-      this.observer?.disconnect();
+      this.#observer?.disconnect();
     }
     attributeChangedCallback() {
-      this.sync();
+      this.#sync();
     }
     /** The launcher's event detail; null emits nothing. */
     launcherDetail() {
@@ -3574,15 +3578,15 @@ var defineRibbonGroup = definer("office-ui-ribbon-group", () => {
     iconName() {
       return this.getAttribute("icon") ?? "grid";
     }
-    observe() {
-      this.observer?.disconnect();
+    #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();
+      if (Observer) this.#observer ??= new Observer(() => this.#measure());
+      for (const el of this.#slotEl.assignedElements()) this.#observer?.observe(el);
+      this.#measure();
     }
-    measure() {
+    #measure() {
       const children = [...this.children];
       const stackable = children.filter((el) => {
         const gallery = el.matches('[mode="dropdown"]') ? el : el.querySelector('[mode="dropdown"]');
@@ -3599,20 +3603,20 @@ var defineRibbonGroup = definer("office-ui-ribbon-group", () => {
           tallest <= tokenPx(this, "--office-ribbon-compact-row-max", 36)
         );
     }
-    sync() {
+    #sync() {
       const label = this.getAttribute("label") ?? "";
-      this.caption.textContent = label;
+      this.#caption.textContent = label;
       this.setAttribute("aria-label", label);
       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", 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());
+      this.#launcher.hidden = !this.hasAttribute("launcher");
+      this.#launcher.disabled = this.hasAttribute("launcher-disabled");
+      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;
@@ -4481,7 +4485,7 @@ var defineZoomSlider = definer("office-ui-zoom-slider", () => {
     in;
     range;
     output;
-    fit;
+    #fit;
     constructor() {
       super();
       const doc = this.ownerDocument;
@@ -4501,12 +4505,12 @@ var defineZoomSlider = definer("office-ui-zoom-slider", () => {
       this.range.type = "range";
       this.range.setAttribute("aria-label", "Zoom");
       this.output = doc.createElement("output");
-      this.fit = button("Fit", "");
-      this.fit.className = "fit";
+      this.#fit = button("Fit", "");
+      this.#fit.className = "fit";
       const svg = createIconSvg(doc);
       paintIcon(svg, "fitPage");
-      this.fit.append(svg);
-      root.append(this.out, this.range, this.in, this.output, this.fit);
+      this.#fit.append(svg);
+      root.append(this.out, this.range, this.in, this.output, this.#fit);
       this.out.addEventListener("click", () => this.stepBy(-1));
       this.in.addEventListener("click", () => this.stepBy(1));
       this.range.addEventListener("input", () => this.commit(this.range.valueAsNumber, "input"));
@@ -4514,7 +4518,7 @@ var defineZoomSlider = definer("office-ui-zoom-slider", () => {
         "change",
         () => this.dispatchEvent(new Event("change", { bubbles: true, composed: true }))
       );
-      this.fit.addEventListener(
+      this.#fit.addEventListener(
         "click",
         () => emit(this, "office-command", { command: "zoom-fit" })
       );
@@ -4572,9 +4576,9 @@ var defineZoomSlider = definer("office-ui-zoom-slider", () => {
       this.in.disabled = disabled || value >= max;
       this.range.disabled = disabled;
       const fit = this.getAttribute("fit");
-      this.fit.disabled = disabled;
-      this.fit.setAttribute("aria-label", fit || "Fit");
-      this.fit.title = fit || "Fit";
+      this.#fit.disabled = disabled;
+      this.#fit.setAttribute("aria-label", fit || "Fit");
+      this.#fit.title = fit || "Fit";
     }
   }
   return OfficeUiZoomSlider;

package/dist/controls.js

@@ -1,4 +1,4 @@
-export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-G2ZIAXOV.js';
+export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-2XJDHLPW.js';
 export { defineIcon } from './chunk-VUXNXH4Q.js';
 import './chunk-VYF7LGXZ.js';
 import './chunk-NDEB6EBU.js';

package/dist/index.js

@@ -1,7 +1,7 @@
 import { installOfficeUiTheme } from './chunk-F4TM7U4P.js';
 export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-F4TM7U4P.js';
-import { registerControls } from './chunk-G2ZIAXOV.js';
-export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-G2ZIAXOV.js';
+import { registerControls } from './chunk-2XJDHLPW.js';
+export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-2XJDHLPW.js';
 export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-VUXNXH4Q.js';
 import { definePresence } from './chunk-VYF7LGXZ.js';
 export { definePresence, initialsOf, participantsFromAwareness } from './chunk-VYF7LGXZ.js';

package/package.json

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