ooxml-ui 0.16.1 → 0.16.3

package/dist/{chunk-A46H2JBV.js → chunk-HSM56NH6.js}

@@ -1,4 +1,4 @@
-import { definer, attachStyles, controlCss, emit } from './chunk-NDEB6EBU.js';
+import { definer, attachStyles, controlCss, emit } from './chunk-XPYONXNE.js';
 import { tok } from './chunk-4MT4OIAJ.js';
 import { normalizeHexColor } from 'ooxml-core/color';
 

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

@@ -1,6 +1,6 @@
-import { createIconSvg, paintIcon, defineIcon } from './chunk-VUXNXH4Q.js';
-import { initialsOf } from './chunk-VYF7LGXZ.js';
-import { definer, attachStyles, controlCss, emit } from './chunk-NDEB6EBU.js';
+import { createIconSvg, paintIcon, defineIcon } from './chunk-YFT6FYOP.js';
+import { initialsOf } from './chunk-YM2DT6QD.js';
+import { definer, attachStyles, controlCss, present, emit } from './chunk-XPYONXNE.js';
 import { tok, FOCUS_RING, OFFICE_TOKENS } from './chunk-4MT4OIAJ.js';
 
 // src/chrome-controls.ts
@@ -613,13 +613,13 @@ var defineRadio = definer("office-ui-radio", () => {
       return this.hasAttribute("checked");
     }
     set checked(next) {
-      this.toggleAttribute("checked", Boolean(next));
+      this.toggleAttribute("checked", present(next));
     }
     get disabled() {
       return this.hasAttribute("disabled");
     }
     set disabled(next) {
-      this.toggleAttribute("disabled", Boolean(next));
+      this.toggleAttribute("disabled", present(next));
     }
     get value() {
       return this.getAttribute("value") ?? "on";
@@ -752,7 +752,7 @@ var defineRibbonToggle = definer("office-ui-ribbon-toggle", () => {
       return this.hasAttribute("checked");
     }
     set checked(value) {
-      this.toggleAttribute("checked", Boolean(value));
+      this.toggleAttribute("checked", present(value));
     }
     sync() {
       const label = this.getAttribute("label") ?? "";
@@ -777,7 +777,10 @@ var CSS3 = `
 :host(:focus-within) { border-color: ${tok("--office-field-border-focus")}; }
 :host([variant="titlebar"]) { height: ${tok("--office-field-height")}; gap: ${tok("--office-space-1-5")}; padding-inline: ${tok("--office-space-3-5")};
 	border-color: ${tok("--office-border")}; border-radius: ${tok("--office-radius-md")}; background: ${tok("--office-background")}; }
-:host([variant="titlebar"]:focus-within) { color: ${tok("--office-foreground")}; }
+:host([variant="titlebar"]:focus-within) {
+	border-color: ${tok("--office-field-border-focus")};
+	color: ${tok("--office-foreground")};
+}
 :host([disabled]) { opacity: .5; cursor: not-allowed; }
 svg { width: ${tok("--office-icon-size-md")}; height: ${tok("--office-icon-size-md")}; flex: none; }
 :host([variant="titlebar"]) svg { width: ${tok("--office-icon-size")}; height: ${tok("--office-icon-size")}; }
@@ -856,7 +859,7 @@ var defineSearchField = definer("office-ui-search", () => {
       return this.hasAttribute("disabled");
     }
     set disabled(next) {
-      this.toggleAttribute("disabled", Boolean(next));
+      this.toggleAttribute("disabled", present(next));
     }
     focus(options) {
       this.input.focus(options);
@@ -971,7 +974,7 @@ var defineBackstage = definer("office-ui-backstage", () => {
       return this.hasAttribute("open");
     }
     set open(value) {
-      this.toggleAttribute("open", Boolean(value));
+      this.toggleAttribute("open", present(value));
     }
     get selected() {
       return this.getAttribute("selected") ?? "";
@@ -1139,7 +1142,7 @@ var defineFindBar = definer("office-ui-find-bar", () => {
       return this.hasAttribute("open");
     }
     set open(value) {
-      this.toggleAttribute("open", Boolean(value));
+      this.toggleAttribute("open", present(value));
     }
     get value() {
       return this.#input.value;
@@ -1894,7 +1897,7 @@ var defineButton = definer("office-ui-button", () => {
       return this.hasAttribute("disabled");
     }
     set disabled(value) {
-      this.toggleAttribute("disabled", Boolean(value));
+      this.toggleAttribute("disabled", present(value));
     }
     get pressed() {
       const value = this.getAttribute("pressed");
@@ -1975,12 +1978,12 @@ var SWITCH_CSS = `
 	flex: none; border: var(--_b) solid ${tok("--office-switch-border")}; border-radius: ${tok("--office-radius-full")};
 	background: ${tok("--office-switch-track")}; cursor: pointer; vertical-align: middle;
 	touch-action: manipulation; transition: background-color ${tok("--office-duration")}; }
-:host::after { content: ""; position: absolute; top: calc((var(--_h) - 2 * var(--_b) - var(--_k)) / 2); left: var(--_o);
+.knob { display: block; position: absolute; top: calc((var(--_h) - 2 * var(--_b) - var(--_k)) / 2); left: var(--_o);
 	width: var(--_k); height: var(--_k); border-radius: 50%; background: ${tok("--office-switch-thumb")};
 	box-shadow: ${tok("--office-shadow-sm")}; transition: transform ${tok("--office-duration")}; }
 :host([checked]) { border-color: ${tok("--office-switch-track-on")};
 	background: ${tok("--office-switch-track-on")}; }
-:host([checked])::after { transform: translateX(var(--office-switch-knob-travel, calc(var(--_w) - var(--_k) - 2 * var(--_o) - 2 * var(--_b))));
+:host([checked]) .knob { transform: translateX(var(--office-switch-knob-travel, calc(var(--_w) - var(--_k) - 2 * var(--_o) - 2 * var(--_b))));
 	background: ${tok("--office-switch-thumb-on")}; }
 :host(:focus-visible) { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: ${tok("--office-focus-offset")}; }
 :host([disabled]) { opacity: .5; cursor: not-allowed; }
@@ -1988,9 +1991,9 @@ svg { display: none; }
 @media (pointer: coarse), (max-width: 767px) { :host { --_w: ${tok("--office-switch-width-touch")}; --_h: ${tok("--office-switch-height-touch")}; --_k: ${tok("--office-switch-knob-size-touch")}; } }
 @media (forced-colors: active) {
 	:host { border-color: CanvasText; background: Canvas; forced-color-adjust: none; }
-	:host::after { background: CanvasText; }
+	.knob { background: CanvasText; }
 	:host([checked]) { border-color: Highlight; background: Highlight; }
-	:host([checked])::after { background: HighlightText; }
+	:host([checked]) .knob { background: HighlightText; }
 }
 `;
 function makeCheckable(role, css) {
@@ -2011,6 +2014,12 @@ function makeCheckable(role, css) {
       const template = this.ownerDocument.createElement("template");
       template.innerHTML = CHECK_SVG;
       root.append(template.content.cloneNode(true));
+      if (role === "switch") {
+        const knob = this.ownerDocument.createElement("span");
+        knob.className = "knob";
+        knob.setAttribute("part", "knob");
+        root.append(knob);
+      }
       this.addEventListener("click", (event) => {
         if (this.disabled) event.preventDefault();
         else this.toggle();
@@ -2033,13 +2042,13 @@ function makeCheckable(role, css) {
       return this.hasAttribute("checked");
     }
     set checked(value) {
-      this.toggleAttribute("checked", Boolean(value));
+      this.toggleAttribute("checked", present(value));
     }
     get disabled() {
       return this.hasAttribute("disabled");
     }
     set disabled(value) {
-      this.toggleAttribute("disabled", Boolean(value));
+      this.toggleAttribute("disabled", present(value));
     }
     get value() {
       return this.getAttribute("value") ?? "on";
@@ -2155,7 +2164,7 @@ var defineDialog = definer("office-ui-dialog", () => {
       return this.hasAttribute("open");
     }
     set open(value) {
-      this.toggleAttribute("open", Boolean(value));
+      this.toggleAttribute("open", present(value));
     }
     show() {
       this.open = true;
@@ -2940,7 +2949,7 @@ var defineMenuItem = definer("office-ui-menu-item", () => {
       return this.hasAttribute("disabled");
     }
     set disabled(value) {
-      this.toggleAttribute("disabled", Boolean(value));
+      this.toggleAttribute("disabled", present(value));
     }
     /** Focus the menuitem itself, so arrow navigation never depends on delegatesFocus. */
     focus(options) {
@@ -3048,7 +3057,7 @@ var defineMenuButton = definer("office-ui-menu-button", () => {
       return this.hasAttribute("disabled");
     }
     set disabled(value) {
-      this.toggleAttribute("disabled", Boolean(value));
+      this.toggleAttribute("disabled", present(value));
     }
     get open() {
       return this.caret.getAttribute("aria-expanded") === "true";
@@ -3280,7 +3289,7 @@ var defineOptionsDialog = definer("office-ui-options-dialog", () => {
       return this.hasAttribute("open");
     }
     set open(value) {
-      this.toggleAttribute("open", Boolean(value));
+      this.toggleAttribute("open", present(value));
     }
     show() {
       this.open = true;
@@ -4005,7 +4014,7 @@ var defineSelect = definer("office-ui-select", () => {
       return this.hasAttribute("disabled");
     }
     set disabled(next) {
-      this.toggleAttribute("disabled", Boolean(next));
+      this.toggleAttribute("disabled", present(next));
     }
     focus(options) {
       this.trigger.focus(options);
@@ -4546,7 +4555,7 @@ var defineZoomSlider = definer("office-ui-zoom-slider", () => {
       return this.hasAttribute("disabled");
     }
     set disabled(value) {
-      this.toggleAttribute("disabled", Boolean(value));
+      this.toggleAttribute("disabled", present(value));
     }
     /** Office buttons snap to the next multiple of `step`, so 67% steps to 70%, not 77%. */
     stepBy(direction) {

package/dist/{chunk-NDEB6EBU.js → chunk-XPYONXNE.js}

@@ -32,6 +32,9 @@ function emit(host, type, detail, cancelable = false) {
     new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable })
   );
 }
+function present(value) {
+  return value === "" || Boolean(value);
+}
 
 // src/styles.ts
 var sheetsByDocument = /* @__PURE__ */ new WeakMap();
@@ -72,4 +75,4 @@ var COMMON_CONTROL_CSS = `
 var controlCss = (css) => `${COMMON_CONTROL_CSS}
 ${css}`;
 
-export { CONTRACT_REVISION, attachStyles, controlCss, definer, emit };
+export { CONTRACT_REVISION, attachStyles, controlCss, definer, emit, present };

package/dist/{chunk-VUXNXH4Q.js → chunk-YFT6FYOP.js}

@@ -1,4 +1,4 @@
-import { definer, attachStyles, controlCss } from './chunk-NDEB6EBU.js';
+import { definer, attachStyles, controlCss } from './chunk-XPYONXNE.js';
 
 // src/icons.ts
 var registry = /* @__PURE__ */ new Map();

package/dist/{chunk-VYF7LGXZ.js → chunk-YM2DT6QD.js}

@@ -1,4 +1,4 @@
-import { definer, attachStyles, controlCss, emit } from './chunk-NDEB6EBU.js';
+import { definer, attachStyles, controlCss, emit } from './chunk-XPYONXNE.js';
 import { tok } from './chunk-4MT4OIAJ.js';
 
 // src/presence.ts

package/dist/controls.js

@@ -1,5 +1,5 @@
-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';
+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-IKE3XWDZ.js';
+export { defineIcon } from './chunk-YFT6FYOP.js';
+import './chunk-YM2DT6QD.js';
+import './chunk-XPYONXNE.js';
 import './chunk-4MT4OIAJ.js';

package/dist/icons.js

@@ -1,3 +1,3 @@
-export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-VUXNXH4Q.js';
-import './chunk-NDEB6EBU.js';
+export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-YFT6FYOP.js';
+import './chunk-XPYONXNE.js';
 import './chunk-4MT4OIAJ.js';

package/dist/index.js

@@ -1,13 +1,13 @@
 import { installOfficeUiTheme } from './chunk-F4TM7U4P.js';
 export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-F4TM7U4P.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';
-import { defineSmartArt } from './chunk-A46H2JBV.js';
-export { defineSmartArt, renderDiagramDrawing } from './chunk-A46H2JBV.js';
-export { CONTRACT_REVISION } from './chunk-NDEB6EBU.js';
+import { registerControls } from './chunk-IKE3XWDZ.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-IKE3XWDZ.js';
+export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-YFT6FYOP.js';
+import { definePresence } from './chunk-YM2DT6QD.js';
+export { definePresence, initialsOf, participantsFromAwareness } from './chunk-YM2DT6QD.js';
+import { defineSmartArt } from './chunk-HSM56NH6.js';
+export { defineSmartArt, renderDiagramDrawing } from './chunk-HSM56NH6.js';
+export { CONTRACT_REVISION } from './chunk-XPYONXNE.js';
 export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-4MT4OIAJ.js';
 
 // src/index.ts

package/dist/presence.js

@@ -1,3 +1,3 @@
-export { definePresence, initialsOf, participantsFromAwareness } from './chunk-VYF7LGXZ.js';
-import './chunk-NDEB6EBU.js';
+export { definePresence, initialsOf, participantsFromAwareness } from './chunk-YM2DT6QD.js';
+import './chunk-XPYONXNE.js';
 import './chunk-4MT4OIAJ.js';

package/dist/registry.d.ts

@@ -16,3 +16,9 @@ export declare function browserRegistry(): CustomElementRegistry | undefined;
 export declare function definer(tag: string, make: () => CustomElementConstructor): Definer;
 /** Bubbling, composed event: crosses shadow boundaries like the native ones do. */
 export declare function emit<T>(host: HTMLElement, type: string, detail: T, cancelable?: boolean): boolean;
+/**
+ * A boolean property value as its attribute would read it: `''` means present, as in
+ * `checked=""`. Frameworks that pass attribute idioms through properties (Svelte's
+ * `checked={on ? '' : undefined}`) therefore keep working.
+ */
+export declare function present(value: unknown): boolean;

package/dist/smartart.js

@@ -1,3 +1,3 @@
-export { defineSmartArt, renderDiagramDrawing } from './chunk-A46H2JBV.js';
-import './chunk-NDEB6EBU.js';
+export { defineSmartArt, renderDiagramDrawing } from './chunk-HSM56NH6.js';
+import './chunk-XPYONXNE.js';
 import './chunk-4MT4OIAJ.js';

package/package.json

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