ooxml-ui 1.15.0 → 1.16.0

package/custom-elements.json

@@ -50,6 +50,9 @@
 						{
 							"name": "filter"
 						},
+						{
+							"name": "locale"
+						},
 						{
 							"name": "selected-id"
 						}
@@ -66,6 +69,13 @@
 							"kind": "field",
 							"name": "items"
 						},
+						{
+							"kind": "field",
+							"name": "locale",
+							"type": {
+								"text": "string"
+							}
+						},
 						{
 							"kind": "field",
 							"name": "selectedId",
@@ -115,6 +125,9 @@
 						{
 							"name": "hide-labels"
 						},
+						{
+							"name": "locale"
+						},
 						{
 							"name": "selected"
 						}
@@ -132,6 +145,13 @@
 							"kind": "field",
 							"name": "items"
 						},
+						{
+							"kind": "field",
+							"name": "locale",
+							"type": {
+								"text": "string"
+							}
+						},
 						{
 							"kind": "field",
 							"name": "moreOpen"
@@ -175,6 +195,9 @@
 						{
 							"name": "color"
 						},
+						{
+							"name": "locale"
+						},
 						{
 							"name": "name"
 						},
@@ -196,6 +219,13 @@
 								"text": "string"
 							}
 						},
+						{
+							"kind": "field",
+							"name": "locale",
+							"type": {
+								"text": "string"
+							}
+						},
 						{
 							"kind": "field",
 							"name": "name",
@@ -415,6 +445,9 @@
 					"customElement": true,
 					"description": "The Calendar app's side list: meetings in the next two weeks grouped by day, each with its time and a Join button once it is near or live. Properties: `meetings`, `zone`, `now` (the clock, for tests). Emits `office-agenda-open` `{ meetingId, start }`, `office-agenda-join` `{ meetingId }` and `office-agenda-new` `{}`.",
 					"attributes": [
+						{
+							"name": "locale"
+						},
 						{
 							"name": "now"
 						},
@@ -423,6 +456,13 @@
 						}
 					],
 					"members": [
+						{
+							"kind": "field",
+							"name": "locale",
+							"type": {
+								"text": "string"
+							}
+						},
 						{
 							"kind": "field",
 							"name": "meetings"
@@ -476,6 +516,9 @@
 					"customElement": true,
 					"description": "A Teams-style calendar: a time grid for the work week, the full week or one day in the viewer's zone, with Today, previous and next, and the view switch. Overlapping meetings share a column. Properties: `meetings` (core `MeetingView[]`), `zone` (default: this device's), `now` (the clock, for tests), `mode`. Events: `office-calendar-open` `{ meetingId, start }`, `office-calendar-new` `{ start }` (a click on an empty slot, or the New meeting button), and `office-calendar-mode` `{ mode }`.",
 					"attributes": [
+						{
+							"name": "locale"
+						},
 						{
 							"name": "mode"
 						},
@@ -491,6 +534,13 @@
 							"kind": "field",
 							"name": "anchor"
 						},
+						{
+							"kind": "field",
+							"name": "locale",
+							"type": {
+								"text": "string"
+							}
+						},
 						{
 							"kind": "field",
 							"name": "meetings"
@@ -564,6 +614,9 @@
 						{
 							"name": "heading"
 						},
+						{
+							"name": "locale"
+						},
 						{
 							"name": "mic"
 						},
@@ -602,6 +655,13 @@
 								"text": "string"
 							}
 						},
+						{
+							"kind": "field",
+							"name": "locale",
+							"type": {
+								"text": "string"
+							}
+						},
 						{
 							"kind": "field",
 							"name": "mic",
@@ -671,8 +731,19 @@
 					"tagName": "office-ui-call-grid",
 					"customElement": true,
 					"description": "The meeting stage. Property `participants` (`CallTile[]`). Someone sharing their screen is spotlighted with everyone else in a side strip. Your own tile is muted (no echo) and mirrored unless it shows a screen; tiles without video show the avatar. The grid only attaches the streams it is handed; capture and connections belong to the host.",
-					"attributes": [],
+					"attributes": [
+						{
+							"name": "locale"
+						}
+					],
 					"members": [
+						{
+							"kind": "field",
+							"name": "locale",
+							"type": {
+								"text": "string"
+							}
+						},
 						{
 							"kind": "field",
 							"name": "participants"
@@ -705,6 +776,9 @@
 						{
 							"name": "heading"
 						},
+						{
+							"name": "locale"
+						},
 						{
 							"name": "selected-id"
 						}
@@ -725,6 +799,13 @@
 								"text": "string"
 							}
 						},
+						{
+							"kind": "field",
+							"name": "locale",
+							"type": {
+								"text": "string"
+							}
+						},
 						{
 							"kind": "field",
 							"name": "selectedId",
@@ -771,6 +852,9 @@
 						{
 							"name": "editing"
 						},
+						{
+							"name": "locale"
+						},
 						{
 							"name": "placeholder"
 						},
@@ -801,6 +885,13 @@
 							"kind": "field",
 							"name": "files"
 						},
+						{
+							"kind": "field",
+							"name": "locale",
+							"type": {
+								"text": "string"
+							}
+						},
 						{
 							"kind": "field",
 							"name": "mentionTargets"
@@ -880,6 +971,9 @@
 						{
 							"name": "highlight-id"
 						},
+						{
+							"name": "locale"
+						},
 						{
 							"name": "self-id"
 						}
@@ -893,6 +987,13 @@
 							},
 							"attribute": "highlight-id"
 						},
+						{
+							"kind": "field",
+							"name": "locale",
+							"type": {
+								"text": "string"
+							}
+						},
 						{
 							"kind": "field",
 							"name": "meetings"
@@ -967,6 +1068,9 @@
 					"customElement": true,
 					"description": "The Chat app's list: 1:1 and group chats, most recent first, with presence on the avatar, the last message and an unread badge. Properties: `chats` (core `ChatView[]`), `selectedId`. Emits `office-chat-select` `{ id }` and `office-chat-new` `{}` (the host asks who to chat with).",
 					"attributes": [
+						{
+							"name": "locale"
+						},
 						{
 							"name": "selected-id"
 						}
@@ -976,6 +1080,13 @@
 							"kind": "field",
 							"name": "chats"
 						},
+						{
+							"kind": "field",
+							"name": "locale",
+							"type": {
+								"text": "string"
+							}
+						},
 						{
 							"kind": "field",
 							"name": "selectedId",
@@ -1960,6 +2071,12 @@
 					"events": [
 						{
 							"name": "office-gallery-pick"
+						},
+						{
+							"name": "office-gallery-preview"
+						},
+						{
+							"name": "office-gallery-preview-end"
 						}
 					]
 				}
@@ -2408,6 +2525,9 @@
 					"attributes": [
 						{
 							"name": "label"
+						},
+						{
+							"name": "locale"
 						}
 					],
 					"members": [
@@ -2426,6 +2546,13 @@
 								"text": "string"
 							}
 						},
+						{
+							"kind": "field",
+							"name": "locale",
+							"type": {
+								"text": "string"
+							}
+						},
 						{
 							"kind": "field",
 							"name": "query"
@@ -2472,6 +2599,9 @@
 						{
 							"name": "heading"
 						},
+						{
+							"name": "locale"
+						},
 						{
 							"name": "name"
 						},
@@ -2501,6 +2631,13 @@
 								"text": "string"
 							}
 						},
+						{
+							"kind": "field",
+							"name": "locale",
+							"type": {
+								"text": "string"
+							}
+						},
 						{
 							"kind": "field",
 							"name": "name",

package/dist/{chunk-7QGML32D.js → chunk-CHFMXUPK.js}

@@ -2146,7 +2146,7 @@ var defineRibbonSection = definer(
 );
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/ribbon/gallery.css?raw
-var gallery_default = "[data-office-gallery] {\n	display: inline-flex;\n	position: relative;\n	flex: none;\n	color: var(--office-foreground);\n}\n[data-office-gallery] .gallery-view {\n	display: contents;\n}\n[data-office-gallery] button {\n	box-sizing: border-box;\n	font: inherit;\n	color: inherit;\n	cursor: pointer;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius);\n	background: var(--office-background);\n}\n[data-office-gallery] button:hover:not(:disabled) {\n	background: var(--office-selected);\n}\n[data-office-gallery] button:disabled {\n	opacity: 0.4;\n	cursor: not-allowed;\n}\n[data-office-gallery] button:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n[data-office-gallery] .trigger {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-1-5);\n	min-height: var(--office-gallery-trigger-height);\n	padding: 0 var(--office-space-1-5);\n	font-size: var(--office-font-size-sm);\n	white-space: nowrap;\n}\n[data-office-gallery]:not([mode='inline']) .trigger {\n	border-color: transparent;\n	background: transparent;\n}\n[data-office-gallery] .trigger svg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n[data-office-gallery][mode='inline'] .trigger,\n[data-office-gallery][chevron-only] .trigger {\n	align-self: stretch;\n	padding: 0 var(--office-space-1);\n}\n[data-office-gallery] .strip {\n	display: flex;\n	gap: var(--office-space-0);\n	padding: var(--office-space-0);\n	align-items: center;\n}\n[data-office-gallery] .tile {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	flex: none;\n	padding: var(--office-space-0);\n}\n[data-office-gallery] .tile[aria-pressed='true'] {\n	border: var(--office-border-width-thick) solid var(--office-accent);\n	background: color-mix(in srgb, var(--office-accent) 15%, var(--office-background));\n}\n[data-office-gallery] .tile svg {\n	max-width: 100%;\n	max-height: 100%;\n}\n[data-office-gallery][mode='inline'] .strip {\n	gap: 0;\n	border: var(--office-border-width) solid var(--office-border);\n	border-inline-end: 0;\n	border-radius: var(--office-radius-sm) 0 0 var(--office-radius-sm);\n	background: var(--office-gallery-strip-background);\n}\n[data-office-gallery][mode='inline'] .trigger {\n	border-radius: 0 var(--office-radius-sm) var(--office-radius-sm) 0;\n	background: var(--office-gallery-strip-background);\n}\n[data-office-gallery] .trigger.command {\n	border-color: transparent;\n	background: transparent;\n	justify-content: flex-start;\n}\n[data-office-gallery] .trigger.command:hover:not(:disabled) {\n	border-color: var(--office-border);\n	background: var(--office-selected);\n}\n[data-office-gallery] .trigger.command svg {\n	color: var(--office-command-icon-color);\n}\n[data-office-gallery] .trigger.command-large {\n	flex-direction: column;\n	align-items: center;\n	justify-content: flex-start;\n	gap: var(--office-space-0);\n	min-width: var(--office-gallery-command-min-width);\n	max-width: var(--office-gallery-command-max-width);\n	height: var(--office-gallery-command-height);\n	padding: var(--office-space-1);\n	font-size: var(--office-font-size-2xs);\n	line-height: var(--office-line-height-tight);\n	white-space: normal;\n	text-align: center;\n}\n[data-office-gallery] .trigger.command-large svg {\n	width: var(--office-gallery-command-icon);\n	height: var(--office-gallery-command-icon);\n}\n[data-office-gallery] .popup {\n	box-sizing: border-box;\n	position: fixed;\n	z-index: var(--office-z-popover);\n	max-width: calc(100vw - var(--office-space-4));\n	max-height: var(--office-gallery-popup-max-height);\n	overflow: auto;\n	padding: var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	color: var(--office-popover-foreground);\n	box-shadow: var(--office-shadow-lg);\n}\n[data-office-gallery] .popup[hidden] {\n	display: none;\n}\n[data-office-gallery] .grid {\n	display: grid;\n	gap: var(--office-space-1);\n	width: max-content;\n	max-width: 100%;\n}\n[data-office-gallery] .heading {\n	margin: var(--office-space-1) 0 var(--office-space-1-5);\n	font-size: var(--office-font-size-xs);\n	font-weight: var(--office-font-weight-bold);\n}\n[data-office-gallery] .section + .section {\n	margin-top: var(--office-space-2-5);\n}\n[data-office-gallery][mode='panel'] {\n	display: block;\n}\n[data-office-gallery][mode='panel'] .grid {\n	width: 100%;\n}\n[data-office-gallery][mode='panel'] .tile {\n	flex-direction: column;\n	gap: var(--office-space-1);\n	width: 100% !important;\n	height: auto !important;\n	min-height: var(--office-target-size-touch);\n	padding: var(--office-space-1);\n}\n[data-office-gallery][mode='panel'] .tile-label {\n	font-size: var(--office-font-size-xs);\n}\n[data-office-gallery][mode='panel'] .tile svg {\n	width: var(--office-gallery-preview-width);\n	height: var(--office-gallery-preview-height);\n}\n@media (pointer: coarse), (max-width: 1023px) {\n	[data-office-gallery] .trigger,\n	[data-office-gallery] .tile {\n		min-height: var(--office-target-size-touch);\n		min-width: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	[data-office-gallery] button,\n	[data-office-gallery] .popup {\n		color: ButtonText;\n		background: Canvas;\n		border-color: ButtonText;\n	}\n	[data-office-gallery] button:disabled {\n		color: GrayText;\n		opacity: 1;\n	}\n	[data-office-gallery] button:focus-visible,\n	[data-office-gallery] .tile[aria-pressed='true'] {\n		outline: var(--office-focus-width) solid Highlight;\n		border-color: Highlight;\n	}\n}\n";
+var gallery_default = "[data-office-gallery] {\n	display: inline-flex;\n	position: relative;\n	flex: none;\n	color: var(--office-foreground);\n}\n[data-office-gallery] .gallery-view {\n	display: contents;\n}\n[data-office-gallery] button {\n	box-sizing: border-box;\n	font: inherit;\n	color: inherit;\n	cursor: pointer;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius);\n	background: var(--office-background);\n}\n[data-office-gallery] button:hover:not(:disabled) {\n	background: var(--office-selected);\n}\n[data-office-gallery] button:disabled {\n	opacity: 0.4;\n	cursor: not-allowed;\n}\n[data-office-gallery] button:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n[data-office-gallery] .trigger {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-1-5);\n	min-height: var(--office-gallery-trigger-height);\n	padding: 0 var(--office-space-1-5);\n	font-size: var(--office-font-size-sm);\n	white-space: nowrap;\n}\n[data-office-gallery]:not([mode='inline']) .trigger {\n	border-color: transparent;\n	background: transparent;\n}\n[data-office-gallery] .trigger svg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n[data-office-gallery][mode='inline'] .trigger,\n[data-office-gallery][chevron-only] .trigger {\n	align-self: stretch;\n	padding: 0 var(--office-space-1);\n}\n[data-office-gallery] .strip {\n	display: flex;\n	gap: var(--office-space-0);\n	padding: var(--office-space-0);\n	align-items: center;\n}\n[data-office-gallery] .tile {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	flex: none;\n	padding: var(--office-space-0);\n}\n[data-office-gallery] .tile[aria-pressed='true'] {\n	border: var(--office-border-width-thick) solid var(--office-accent);\n	background: color-mix(in srgb, var(--office-accent) 15%, var(--office-background));\n}\n[data-office-gallery] .tile svg {\n	max-width: 100%;\n	max-height: 100%;\n}\n[data-office-gallery][mode='inline'] .strip {\n	gap: 0;\n	border: var(--office-border-width) solid var(--office-border);\n	border-inline-end: 0;\n	border-radius: var(--office-radius-sm) 0 0 var(--office-radius-sm);\n	background: var(--office-gallery-strip-background);\n}\n[data-office-gallery][mode='inline'] .trigger {\n	border-radius: 0 var(--office-radius-sm) var(--office-radius-sm) 0;\n	background: var(--office-gallery-strip-background);\n}\n[data-office-gallery] .trigger.command {\n	border-color: transparent;\n	background: transparent;\n	justify-content: flex-start;\n}\n[data-office-gallery] .trigger.command:hover:not(:disabled) {\n	border-color: var(--office-border);\n	background: var(--office-selected);\n}\n[data-office-gallery] .trigger.command svg {\n	color: var(--office-command-icon-color);\n}\n[data-office-gallery] .trigger.command-large {\n	flex-direction: column;\n	align-items: center;\n	justify-content: flex-start;\n	gap: var(--office-space-0);\n	min-width: var(--office-gallery-command-min-width);\n	max-width: var(--office-gallery-command-max-width);\n	height: var(--office-gallery-command-height);\n	padding: var(--office-space-1);\n	font-size: var(--office-font-size-2xs);\n	line-height: var(--office-line-height-tight);\n	white-space: normal;\n	text-align: center;\n}\n[data-office-gallery] .trigger.command-large svg {\n	width: var(--office-gallery-command-icon);\n	height: var(--office-gallery-command-icon);\n}\n[data-office-gallery] .popup {\n	box-sizing: border-box;\n	position: fixed;\n	z-index: var(--office-z-popover);\n	max-width: calc(100vw - var(--office-space-4));\n	max-height: var(--office-gallery-popup-max-height);\n	overflow: auto;\n	padding: var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	color: var(--office-popover-foreground);\n	box-shadow: var(--office-shadow-lg);\n}\n[data-office-gallery] .popup[hidden] {\n	display: none;\n}\n[data-office-gallery] .grid {\n	display: grid;\n	gap: var(--office-space-1);\n	width: max-content;\n	max-width: 100%;\n}\n[data-office-gallery] .heading {\n	margin: var(--office-space-1) 0 var(--office-space-1-5);\n	font-size: var(--office-font-size-xs);\n	font-weight: var(--office-font-weight-bold);\n}\n[data-office-gallery] .section + .section {\n	margin-top: var(--office-space-2-5);\n}\n[data-office-gallery][mode='panel'] {\n	display: block;\n}\n[data-office-gallery][mode='panel'] .grid {\n	width: 100%;\n}\n[data-office-gallery][mode='panel'] .tile {\n	flex-direction: column;\n	gap: var(--office-space-1);\n	width: 100% !important;\n	height: auto !important;\n	min-height: var(--office-target-size-touch);\n	padding: var(--office-space-1);\n}\n[data-office-gallery][mode='panel'] .tile-label {\n	font-size: var(--office-font-size-xs);\n}\n[data-office-gallery][mode='panel'] .tile svg {\n	width: var(--office-gallery-preview-width);\n	height: var(--office-gallery-preview-height);\n}\n[data-office-gallery] .footer {\n	display: flex;\n	flex-direction: column;\n	margin-top: var(--office-space-2);\n	padding-top: var(--office-space-1);\n	border-top: var(--office-border-width) solid var(--office-border);\n}\n[data-office-gallery] .footer-item,\n[data-office-gallery] .tile-menu-item {\n	display: block;\n	padding: var(--office-space-1) var(--office-space-2);\n	border-color: transparent;\n	background: transparent;\n	font-size: var(--office-font-size-sm);\n	text-align: start;\n	white-space: nowrap;\n}\n[data-office-gallery] .tile-menu {\n	box-sizing: border-box;\n	position: fixed;\n	z-index: calc(var(--office-z-popover) + 1);\n	display: flex;\n	flex-direction: column;\n	min-width: 12rem;\n	padding: var(--office-space-1);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	color: var(--office-popover-foreground);\n	box-shadow: var(--office-shadow-lg);\n}\n@media (pointer: coarse), (max-width: 1023px) {\n	[data-office-gallery] .trigger,\n	[data-office-gallery] .tile {\n		min-height: var(--office-target-size-touch);\n		min-width: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	[data-office-gallery] button,\n	[data-office-gallery] .popup {\n		color: ButtonText;\n		background: Canvas;\n		border-color: ButtonText;\n	}\n	[data-office-gallery] button:disabled {\n		color: GrayText;\n		opacity: 1;\n	}\n	[data-office-gallery] button:focus-visible,\n	[data-office-gallery] .tile[aria-pressed='true'] {\n		outline: var(--office-focus-width) solid Highlight;\n		border-color: Highlight;\n	}\n}\n";
 
 // src/ribbon/gallery-styles.ts
 var GALLERY_LIGHT_CSS = withTokens(gallery_default);
@@ -2201,6 +2201,12 @@ function parseSvgPreview(doc, svg2) {
 var HOST_CSS = ":host { display: inline-flex; position: relative; flex: none; }";
 var OfficeUiGallery = class extends OfficeElement {
   static pickEvent = "office-gallery-pick";
+  static previewEvent = "office-gallery-preview";
+  static previewEndEvent = "office-gallery-preview-end";
+  /** Hover time before the first preview shows, so sweeping across the strip does not flash. */
+  static previewDelayMs = 120;
+  /** Grace before a preview ends, so moving between tiles does not flash the original. */
+  static previewEndDelayMs = 60;
   static triggerAttribute = "data-gallery";
   static popupAttribute = "data-gallery-popup";
   static itemAttribute = "data-gallery-item";
@@ -2213,6 +2219,10 @@ var OfficeUiGallery = class extends OfficeElement {
   model;
   locked = false;
   opened = false;
+  previewing;
+  previewStartTimer;
+  previewEndTimer;
+  menu;
   attributeChangedCallback(name, old, value) {
     super.attributeChangedCallback(name, old, value);
     if (name === "mode" && value === "panel") this.close();
@@ -2251,8 +2261,132 @@ var OfficeUiGallery = class extends OfficeElement {
     }
   }
   close() {
+    this.endPreview(true);
+    this.closeMenu();
     this.open = false;
   }
+  /** Close the popup and menu but leave a running preview for the pick that follows to settle. */
+  dismiss() {
+    clearTimeout(this.previewStartTimer);
+    this.previewStartTimer = void 0;
+    this.closeMenu();
+    this.open = false;
+  }
+  // ---- Preview and context menu ---------------------------------------------------------
+  canPreview() {
+    return this.model?.preview === true && !this.model.command && !this.unavailable() && this.getAttribute("mode") !== "panel";
+  }
+  startPreview(itemId) {
+    if (!this.canPreview() || this.menu) return;
+    clearTimeout(this.previewEndTimer);
+    if (this.previewing === itemId) return;
+    clearTimeout(this.previewStartTimer);
+    const show = () => {
+      const state = this.model;
+      if (!state || !this.canPreview()) return;
+      this.previewing = itemId;
+      this.fire(this.constructor.previewEvent, {
+        gallery: state.id,
+        itemId
+      });
+    };
+    const statics = this.constructor;
+    if (this.previewing !== void 0) show();
+    else this.previewStartTimer = setTimeout(show, statics.previewDelayMs);
+  }
+  endPreview(immediate = false) {
+    clearTimeout(this.previewStartTimer);
+    this.previewStartTimer = void 0;
+    clearTimeout(this.previewEndTimer);
+    this.previewEndTimer = void 0;
+    if (this.previewing === void 0) return;
+    const end = () => {
+      this.previewEndTimer = void 0;
+      const state = this.model;
+      if (this.previewing === void 0) return;
+      this.previewing = void 0;
+      this.fire(this.constructor.previewEndEvent, {
+        gallery: state?.id ?? ""
+      });
+    };
+    const statics = this.constructor;
+    if (immediate) end();
+    else this.previewEndTimer = setTimeout(end, statics.previewEndDelayMs);
+  }
+  findItem(itemId) {
+    for (const section of this.model?.sections ?? []) {
+      const found = section.items.find((item) => item.id === itemId);
+      if (found) return found;
+    }
+    return this.model?.inline?.find((item) => item.id === itemId);
+  }
+  openMenu(itemId, x, y) {
+    if (this.unavailable() || !this.findItem(itemId)?.actions?.length) return;
+    this.endPreview(true);
+    this.menu = { itemId, x, y };
+    this.ownerDocument.addEventListener("pointerdown", this.onMenuOutside, true);
+    this.requestUpdate();
+  }
+  closeMenu() {
+    if (!this.menu) return;
+    this.menu = void 0;
+    this.ownerDocument.removeEventListener("pointerdown", this.onMenuOutside, true);
+    this.requestUpdate();
+  }
+  onMenuOutside = (event) => {
+    if (!event.composedPath().some((node) => node.classList?.contains("tile-menu")))
+      this.closeMenu();
+  };
+  onTileContextMenu(event, itemId) {
+    if (!this.findItem(itemId)?.actions?.length) return;
+    event.preventDefault();
+    event.stopPropagation();
+    this.openMenu(itemId, event.clientX, event.clientY);
+  }
+  onMenuKey(event) {
+    const items = Array.from(
+      event.currentTarget.querySelectorAll("button")
+    );
+    const index = items.indexOf(event.target);
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      const itemId = this.menu?.itemId;
+      this.closeMenu();
+      const statics = this.constructor;
+      this.querySelector(`[${statics.itemAttribute}="${itemId}"]`)?.focus();
+    } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      event.stopPropagation();
+      const step = event.key === "ArrowDown" ? 1 : -1;
+      items[(index + step + items.length) % items.length]?.focus();
+    } else if (event.key === "Tab") {
+      this.closeMenu();
+    }
+  }
+  menuTemplate() {
+    const menu = this.menu;
+    const item = menu ? this.findItem(menu.itemId) : void 0;
+    if (!menu || !item?.actions?.length) return "";
+    return html`<div
+			class="tile-menu"
+			role="menu"
+			aria-label=${item.label}
+			style="left:${menu.x}px;top:${menu.y}px"
+			@keydown=${this.onMenuKey}
+		>
+			${item.actions.map(
+      (action) => html`<button
+						type="button"
+						role="menuitem"
+						class="tile-menu-item"
+						data-gallery-action=${action.id}
+						@click=${() => this.pick(menu.itemId, action.id)}
+						>${action.label}</button
+					>`
+    )}
+		</div>`;
+  }
   get trigger() {
     this.ensureRendered();
     return this.querySelector(".trigger");
@@ -2295,20 +2429,24 @@ var OfficeUiGallery = class extends OfficeElement {
     super.disconnectedCallback();
     this.close();
     this.cleanup();
+    clearTimeout(this.previewStartTimer);
+    clearTimeout(this.previewEndTimer);
   }
   unavailable() {
     const state = this.model;
     return this.locked || !state || state.disabled === true || !state.sections.some((section) => section.items.length > 0);
   }
-  pick(itemId) {
+  pick(itemId, action) {
     const state = this.model;
-    if (this.unavailable() || !state?.sections.some((section) => section.items.some((item) => item.id === itemId)))
+    if (this.unavailable() || !state || !(state.sections.some((section) => section.items.some((item) => item.id === itemId)) || state.footer?.some((entry) => entry.id === itemId)))
       return;
-    if (this.getAttribute("mode") !== "panel") {
-      this.close();
-      this.trigger.focus();
-    }
-    this.fire(this.constructor.pickEvent, { gallery: state.id, itemId });
+    this.dismiss();
+    if (this.getAttribute("mode") !== "panel") this.trigger.focus();
+    this.fire(
+      this.constructor.pickEvent,
+      action === void 0 ? { gallery: state.id, itemId } : { gallery: state.id, itemId, action }
+    );
+    this.endPreview(true);
   }
   onTrigger() {
     if (this.model?.command) {
@@ -2356,6 +2494,15 @@ var OfficeUiGallery = class extends OfficeElement {
     }
     if (event.key === "Enter" || event.key === " ") event.stopPropagation();
   }
+  /** The Menu key and Shift+F10 open a tile's context menu where the tile is. */
+  onTileKey(event, itemId) {
+    if (event.key !== "ContextMenu" && !(event.key === "F10" && event.shiftKey)) return;
+    if (!this.findItem(itemId)?.actions?.length) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const box = event.currentTarget.getBoundingClientRect();
+    this.openMenu(itemId, box.left, box.bottom);
+  }
   onOutside = (event) => {
     if (!event.composedPath().includes(this)) this.close();
   };
@@ -2407,6 +2554,17 @@ var OfficeUiGallery = class extends OfficeElement {
 			title=${item.label}
 			style="width:${width + 6}px;height:${height + 6}px;--office-gallery-preview-width:${width}px;--office-gallery-preview-height:${height}px"
 			@click=${() => this.pick(item.id)}
+			@pointerenter=${(event) => {
+      if (event.pointerType !== "touch") this.startPreview(item.id);
+    }}
+			@pointerleave=${() => this.endPreview()}
+			@focus=${(event) => {
+      if (event.currentTarget.matches(":focus-visible"))
+        this.startPreview(item.id);
+    }}
+			@blur=${() => this.endPreview()}
+			@contextmenu=${(event) => this.onTileContextMenu(event, item.id)}
+			@keydown=${(event) => this.onTileKey(event, item.id)}
 		>${preview}${this.getAttribute("mode") === "panel" ? html`<span class="tile-label">${item.label}</span>` : ""}</button>`;
   }
   lightTemplate() {
@@ -2446,7 +2604,7 @@ var OfficeUiGallery = class extends OfficeElement {
 			role="dialog"
 			aria-label=${title}
 			${unsafeStatic(statics.popupAttribute)}=${ifDefined(state?.id)}
-		>${(state?.sections ?? []).map((section) => this.section(section, disabled))}</div>`;
+		>${(state?.sections ?? []).map((section) => this.section(section, disabled))}${this.footer(disabled)}</div>`;
     return html`<span class="gallery-view" @keydown=${this.onKey}>
 			<div class="strip" ?hidden=${!inline} style=${inline ? "" : "display:none"}>
 				${inline ? repeat(
@@ -2455,9 +2613,25 @@ var OfficeUiGallery = class extends OfficeElement {
       (item) => this.tile(item, first?.tileWidth ?? 40, first?.tileHeight ?? 30, disabled)
     ) : ""}
 			</div>
-			${trigger}${this.opened ? popup : ""}
+			${trigger}${this.opened ? popup : ""}${this.menuTemplate()}
 		</span>`;
   }
+  footer(disabled) {
+    const entries = this.model?.footer ?? [];
+    if (entries.length === 0) return "";
+    return html`<div class="footer" role="group">
+			${entries.map(
+      (entry) => html`<button
+						type="button"
+						class="footer-item"
+						data-gallery-footer=${entry.id}
+						?disabled=${disabled}
+						@click=${() => this.pick(entry.id)}
+						>${entry.label}</button
+					>`
+    )}
+		</div>`;
+  }
   section(section, disabled) {
     return html`<section class="section">
 			${section.title ? html`<div class="heading">${section.title}</div>` : ""}
@@ -2481,6 +2655,9 @@ var OfficeUiGallery = class extends OfficeElement {
     render(this.lightTemplate(), this, { host: this });
     this.markHost();
     if (this.opened) this.position();
+    const menu = this.querySelector(".tile-menu");
+    if (menu && !menu.contains(this.ownerDocument.activeElement))
+      menu.querySelector("button")?.focus();
   }
 };
 var defineGallery = definer("office-ui-gallery", () => OfficeUiGallery);