ooxml-ui 0.21.0 → 0.23.0

package/dist/{chunk-UTLCJKYC.js → chunk-7ZE4WHUW.js}

@@ -2250,7 +2250,7 @@ function clampFlyoutPosition(input) {
 }
 
 // raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/menu/context-menu.css?raw
-var context_menu_default = ":host {\n	display: contents;\n}\n:host([data-controlled]) {\n	display: block;\n	position: fixed;\n	z-index: var(--office-z-popover);\n	color: var(--office-popover-foreground);\n	font: var(--office-font-size-sm) / var(--office-line-height) var(--office-font);\n}\n:host([data-controlled][hidden]) {\n	display: none;\n}\n\n/* Children mode: a popover panel around the slotted menu items. */\n.panel {\n	position: fixed;\n	inset: auto;\n	margin: 0;\n	min-width: var(--office-context-menu-min-width);\n	padding: var(--office-space-1);\n	box-sizing: border-box;\n	background: var(--office-background);\n	color: var(--office-foreground);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius);\n	box-shadow: var(--office-shadow);\n	font-family: var(--office-font);\n}\n.panel[hidden] {\n	display: none;\n}\n\n/* Controlled mode: the host is the fixed box; rows are drawn here from `state`. */\n.menu {\n	box-sizing: border-box;\n	display: flex;\n	flex-direction: column;\n	min-width: var(--office-menu-min-width);\n	max-height: calc(100vh - 2 * var(--office-space-2));\n	overflow-y: auto;\n	padding: var(--office-space-1-5) 0;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	color: inherit;\n	box-shadow: var(--office-shadow-lg);\n	user-select: none;\n}\n.menu:focus {\n	outline: none;\n}\n.item {\n	box-sizing: border-box;\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1-5);\n	width: 100%;\n	min-height: var(--office-field-height);\n	padding: var(--office-space-1-5) var(--office-space-3);\n	border: 0;\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	text-align: start;\n	white-space: nowrap;\n	cursor: pointer;\n}\n.item:hover:not(:disabled),\n.item:focus:not(:disabled) {\n	background: var(--office-selected);\n	outline: none;\n}\n.item:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(-1 * var(--office-focus-width));\n}\n.item:disabled {\n	opacity: 0.45;\n	cursor: default;\n}\n.item.danger {\n	color: var(--office-danger);\n}\n.item svg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	flex: none;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n.check {\n	flex: none;\n	width: var(--office-icon-size);\n	text-align: center;\n}\n.separator {\n	height: var(--office-border-width);\n	margin: var(--office-space-1) 0;\n	background: var(--office-border);\n}\n.heading {\n	padding: var(--office-space-1-5) var(--office-space-3) var(--office-space-0);\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-2xs);\n	font-weight: var(--office-font-weight-bold);\n	letter-spacing: 0.06em;\n	text-transform: uppercase;\n}\n\n@media (pointer: coarse) {\n	.item {\n		min-height: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	.panel,\n	.menu {\n		border-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n		box-shadow: none;\n	}\n	.item,\n	.item.danger {\n		color: CanvasText;\n	}\n	.item:disabled {\n		color: GrayText;\n		opacity: 1;\n	}\n	.item:hover:not(:disabled),\n	.item:focus:not(:disabled) {\n		background: Highlight;\n		color: HighlightText;\n	}\n	.separator {\n		background: CanvasText;\n	}\n	.heading {\n		color: CanvasText;\n	}\n}\n";
+var context_menu_default = ":host {\n	display: contents;\n}\n:host([data-controlled]) {\n	display: block;\n	position: fixed;\n	z-index: var(--office-z-popover);\n	color: var(--office-popover-foreground);\n	font: var(--office-font-size-sm) / var(--office-line-height) var(--office-font);\n}\n:host([data-controlled][hidden]) {\n	display: none;\n}\n\n/* Children mode: a popover panel around the slotted menu items. */\n.panel {\n	position: fixed;\n	inset: auto;\n	margin: 0;\n	min-width: var(--office-context-menu-min-width);\n	padding: var(--office-space-1);\n	box-sizing: border-box;\n	background: var(--office-background);\n	color: var(--office-foreground);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius);\n	box-shadow: var(--office-shadow);\n	font-family: var(--office-font);\n}\n.panel[hidden] {\n	display: none;\n}\n\n/* Controlled mode: the host is the fixed box; rows are drawn here from `state`. */\n.menu {\n	box-sizing: border-box;\n	display: flex;\n	flex-direction: column;\n	min-width: var(--office-menu-min-width);\n	max-height: calc(100vh - 2 * var(--office-space-2));\n	overflow-y: auto;\n	padding: var(--office-space-1-5) 0;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	color: inherit;\n	box-shadow: var(--office-shadow-lg);\n	user-select: none;\n}\n.menu:focus {\n	outline: none;\n}\n.item {\n	box-sizing: border-box;\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1-5);\n	width: 100%;\n	min-height: var(--office-field-height);\n	padding: var(--office-space-1-5) var(--office-space-3);\n	border: 0;\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	text-align: start;\n	white-space: nowrap;\n	cursor: pointer;\n}\n.item:hover:not(:disabled),\n.item:focus:not(:disabled) {\n	background: var(--office-selected);\n	outline: none;\n}\n.item:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(-1 * var(--office-focus-width));\n}\n.item:disabled {\n	opacity: 0.45;\n	cursor: default;\n}\n.item.danger {\n	color: var(--office-danger);\n}\n.item svg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	flex: none;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n.check {\n	flex: none;\n	width: var(--office-icon-size);\n	text-align: center;\n}\n.shortcut {\n	margin-inline-start: auto;\n	padding-inline-start: var(--office-space-4);\n	color: var(--office-muted-foreground);\n}\n.separator {\n	height: var(--office-border-width);\n	margin: var(--office-space-1) 0;\n	background: var(--office-border);\n}\n.heading {\n	padding: var(--office-space-1-5) var(--office-space-3) var(--office-space-0);\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-2xs);\n	font-weight: var(--office-font-weight-bold);\n	letter-spacing: 0.06em;\n	text-transform: uppercase;\n}\n\n@media (pointer: coarse) {\n	.item {\n		min-height: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	.panel,\n	.menu {\n		border-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n		box-shadow: none;\n	}\n	.item,\n	.item.danger {\n		color: CanvasText;\n	}\n	.item:disabled {\n		color: GrayText;\n		opacity: 1;\n	}\n	.item:hover:not(:disabled),\n	.item:focus:not(:disabled) {\n		background: Highlight;\n		color: HighlightText;\n	}\n	.separator {\n		background: CanvasText;\n	}\n	.heading {\n		color: CanvasText;\n	}\n}\n";
 
 // src/menu/context-menu.ts
 var ITEMS = "office-ui-menu-item:not([disabled]):not([hidden])";
@@ -2536,13 +2536,15 @@ var OfficeUiContextMenu = class extends OfficeElement {
 			type="button"
 			class=${item.danger ? "item danger" : "item"}
 			data-item-id=${item.id}
+			title=${ifDefined(item.title)}
+			aria-keyshortcuts=${ifDefined(item.shortcut)}
 			role=${checkable ? "menuitemcheckbox" : "menuitem"}
 			aria-checked=${ifDefined(checkable ? String(item.checked) : void 0)}
 			aria-disabled=${ifDefined(item.disabled ? "true" : void 0)}
 			tabindex=${index === this.active ? 0 : -1}
 			?disabled=${Boolean(item.disabled)}
 			@click=${() => this.fire(this.config().requestEvent, { id: item.id })}
-			>${checkable ? html`<span class="check" aria-hidden="true">${item.checked ? "\u2713" : ""}</span>` : ""}${item.icon ? glyph(item.icon, "icon") : ""}${item.label}</button
+			>${checkable ? html`<span class="check" aria-hidden="true">${item.checked ? "\u2713" : ""}</span>` : ""}${item.icon ? glyph(item.icon, "icon") : ""}${item.label}${item.shortcut ? html`<span class="shortcut" aria-hidden="true">${item.shortcut}</span>` : ""}</button
 		>`;
   }
   /** Rows with their rules and headings; a heading opens a labelled group for the rows after it. */
@@ -4242,7 +4244,10 @@ var OfficeUiZoomSlider = class extends OfficeElement {
     step: { type: Number },
     disabled: flag,
     fit: { type: String, reflect: true },
-    label: { type: String }
+    label: { type: String },
+    outLabel: { type: String, attribute: "out-label" },
+    inLabel: { type: String, attribute: "in-label" },
+    sliderLabel: { type: String, attribute: "slider-label" }
   };
   requested = 100;
   constructor() {
@@ -4253,6 +4258,9 @@ var OfficeUiZoomSlider = class extends OfficeElement {
     this.disabled = false;
     this.fit = null;
     this.label = null;
+    this.outLabel = null;
+    this.inLabel = null;
+    this.sliderLabel = null;
   }
   get value() {
     return clampTo(this.requested, this.low, this.high);
@@ -4292,18 +4300,20 @@ var OfficeUiZoomSlider = class extends OfficeElement {
     const { value } = this;
     const disabled = present(this.disabled);
     const fit = this.fit || "Fit";
+    const out = this.outLabel || "Zoom out";
+    const inn = this.inLabel || "Zoom in";
     return html`
 			<button
 				type="button"
-				aria-label="Zoom out"
-				title="Zoom out"
+				aria-label=${out}
+				title=${out}
 				?disabled=${disabled || value <= this.low}
 				@click=${() => this.stepBy(-1)}
 				>−</button
 			>
 			<input
 				type="range"
-				aria-label="Zoom"
+				aria-label=${this.sliderLabel || "Zoom"}
 				aria-valuetext="${value}%"
 				min=${this.low}
 				max=${this.high}
@@ -4314,8 +4324,8 @@ var OfficeUiZoomSlider = class extends OfficeElement {
 			/>
 			<button
 				type="button"
-				aria-label="Zoom in"
-				title="Zoom in"
+				aria-label=${inn}
+				title=${inn}
 				?disabled=${disabled || value >= this.high}
 				@click=${() => this.stepBy(1)}
 				>+</button

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_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineGallery, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonSection, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, parseSvgPreview, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-UTLCJKYC.js';
+export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineGallery, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonSection, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, parseSvgPreview, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-7ZE4WHUW.js';
 import './chunk-HZ422LTR.js';
 import './chunk-E47762NY.js';
 import './chunk-5A4REH6T.js';

package/dist/form/zoom-slider.d.ts

@@ -3,7 +3,9 @@ import { OfficeElement } from '../base.js';
  * Office status-bar zoom: zoom out, slider, zoom in, percentage and an optional fit button.
  * Attributes: `value` (percent, default 100), `min` (10), `max` (400), `step` (10, for the
  * buttons), `disabled`, `fit` (shows the fit button; its value is the button's name, e.g.
- * "Fit page to current window"), `label` (group name, default "Zoom").
+ * "Fit page to current window"), `label` (group name, default "Zoom"). `out-label`, `in-label` and
+ * `slider-label` name the zoom-out button, zoom-in button and slider (English by default), so a
+ * product can translate them.
  * User changes emit native `input` (slider drag) and `change` events with `value` updated;
  * the fit button emits `office-command` `{ command: 'zoom-fit' }`. Setting `value` never emits.
  */
@@ -39,6 +41,18 @@ export declare class OfficeUiZoomSlider extends OfficeElement {
         label: {
             type: StringConstructor;
         };
+        outLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        inLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        sliderLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
     };
     min: number;
     max: number;
@@ -46,6 +60,9 @@ export declare class OfficeUiZoomSlider extends OfficeElement {
     disabled: boolean;
     fit: string | null;
     label: string | null;
+    outLabel: string | null;
+    inLabel: string | null;
+    sliderLabel: string | null;
     private requested;
     constructor();
     get value(): number;

package/dist/index.js

@@ -1,7 +1,7 @@
 import { installOfficeUiTheme } from './chunk-2X6QYQ3Q.js';
 export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-2X6QYQ3Q.js';
-import { registerControls } from './chunk-UTLCJKYC.js';
-export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineGallery, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonSection, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, glyph, nextEnabledIndex, parseSvgPreview, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-UTLCJKYC.js';
+import { registerControls } from './chunk-7ZE4WHUW.js';
+export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineGallery, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonSection, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, glyph, nextEnabledIndex, parseSvgPreview, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-7ZE4WHUW.js';
 import { defineSmartArt } from './chunk-3MDKXKKQ.js';
 export { OfficeUiSmartArt, defineSmartArt, renderDiagramDrawing } from './chunk-3MDKXKKQ.js';
 import { TEAMS_TAGS, registerTeams } from './chunk-HNGJI5EZ.js';

package/dist/menu/menu-model.d.ts

@@ -20,6 +20,10 @@ export interface OfficeMenuItem {
     checked?: boolean;
     /** A registered icon drawn before the label. */
     icon?: string;
+    /** Tooltip, for example why a disabled row is unavailable. */
+    title?: string;
+    /** Shortcut hint shown at the trailing edge (Ctrl+C); also its `aria-keyshortcuts`. */
+    shortcut?: string;
 }
 /** Everything a controlled menu needs to draw. */
 export interface OfficeMenuState {

package/package.json

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