ooxml-ui 0.22.0 → 0.23.0

package/dist/{chunk-LKLZOPTO.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])";
@@ -2537,13 +2537,14 @@ var OfficeUiContextMenu = class extends OfficeElement {
 			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. */

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-LKLZOPTO.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/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-LKLZOPTO.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-LKLZOPTO.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

@@ -22,6 +22,8 @@ export interface OfficeMenuItem {
     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.22.0",
+	"version": "0.23.0",
 	"description": "Shared, format-neutral web components and styles for the Office viewers (Word, PowerPoint, Excel)",
 	"keywords": [
 		"custom-elements",