ooxml-ui 1.14.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",
@@ -3075,7 +3212,7 @@
 					"name": "OfficeUiRibbonGroup",
 					"tagName": "office-ui-ribbon-group",
 					"customElement": true,
-					"description": "Labelled group of ribbon commands: `role=\"group\"`, `label` is the caption and name. `launcher` adds Office's corner dialog launcher (`launcher=\"<command>\"` emits `office-command` `{ command }`; `launcher-label` names it; `launcher-disabled` disables it). For narrow windows an overflow controller sets `data-collapsed` (the group becomes one button showing `icon` and the label; activating it emits `office-ribbon-collapse-toggle`) and `data-open` (its commands open in a popup at `--office-ribbon-collapse-x/-y`). The group marks itself `data-compact-row` when every command is one line tall (they centre vertically) and `data-stack` when it holds only small drop-down galleries (`[mode=\"dropdown\"]` without `data-command-large`), which stack in columns. Static `launcherEvent`/`collapseEvent` and `launcherDetail()` let a product subclass keep its published events.",
+					"description": "Labelled group of ribbon commands: `role=\"group\"`, `label` is the caption and name. `launcher` adds Office's corner dialog launcher (`launcher=\"<command>\"` emits `office-command` `{ command }`; `launcher-label` names it; `launcher-disabled` disables it). For narrow windows an overflow controller sets `data-collapsed` (the group becomes one button showing `icon` and the label; activating it emits `office-ribbon-collapse-toggle`) and `data-open` (its commands open in a popup at `--office-ribbon-collapse-x/-y`). The group marks itself `data-compact-row` when every command is one line tall (they centre vertically) and `data-stack` when it holds only small drop-down galleries (`[mode=\"dropdown\"]` without `data-command-large`), which stack in columns (`data-stack-beside` when an inline gallery sits next to them). Static `launcherEvent`/`collapseEvent` and `launcherDetail()` let a product subclass keep its published events.",
 					"attributes": [
 						{
 							"name": "data-open"

package/dist/{chunk-LAVVSCRJ.js → chunk-CHFMXUPK.js}

@@ -1916,7 +1916,7 @@ var OfficeUiButton = class extends OfficeElement {
 var defineButton = definer("office-ui-button", () => OfficeUiButton);
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/ribbon/ribbon-group.css?raw
-var ribbon_group_default = ":host {\n	display: inline-flex;\n	flex: none;\n	align-self: stretch;\n}\n.group {\n	position: relative;\n	box-sizing: border-box;\n	display: flex;\n	flex-direction: column;\n	justify-content: space-between;\n	min-height: var(--office-ribbon-group-height);\n	padding: var(--office-ribbon-group-padding);\n}\n/* Office draws a hairline between groups; a product may stop it short of the top and bottom. */\n.group::after {\n	content: '';\n	position: absolute;\n	top: var(--office-ribbon-separator-inset);\n	bottom: var(--office-ribbon-separator-inset);\n	inset-inline-end: 0;\n	width: var(--office-border-width);\n	background: var(--office-ribbon-separator);\n}\n:host(:last-child) .group::after {\n	content: none;\n}\n.row {\n	display: flex;\n	align-items: flex-start;\n	gap: var(--office-space-1);\n	flex: 1;\n}\n/* One-line groups centre their commands on the whole group box. */\n:host([data-compact-row]) .row {\n	align-items: center;\n}\n/* Several small drop-down galleries stack in columns of three. */\n:host([data-stack]) .row {\n	flex-direction: column;\n	align-items: stretch;\n	align-content: flex-start;\n	flex-wrap: wrap;\n	max-height: var(--office-ribbon-stack-max-height);\n	gap: var(--office-space-0);\n}\n::slotted(*) {\n	flex-shrink: 0;\n}\n.foot {\n	position: relative;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	padding: var(--office-ribbon-caption-padding);\n}\n.caption {\n	color: var(--office-muted-foreground);\n	font-size: var(--office-ribbon-caption-size);\n	line-height: var(--office-ribbon-caption-line-height);\n	text-align: center;\n	white-space: nowrap;\n}\n.launcher {\n	position: absolute;\n	inset-inline-end: var(--office-launcher-inset-end);\n	bottom: var(--office-launcher-inset-bottom);\n	display: inline-grid;\n	place-items: center;\n	width: var(--office-launcher-width);\n	height: var(--office-launcher-height);\n	padding: 0;\n	border: 0;\n	border-radius: var(--office-radius-xs);\n	background: transparent;\n	color: var(--office-muted-foreground);\n	cursor: pointer;\n}\n.launcher:hover:not(:disabled) {\n	background: var(--office-surface);\n	color: var(--office-foreground);\n}\n.launcher:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n}\n.launcher:disabled {\n	opacity: 0.45;\n	cursor: not-allowed;\n}\n.launcher[hidden] {\n	display: none;\n}\n.launcher svg {\n	width: var(--office-icon-size-xs);\n	height: var(--office-icon-size-xs);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n\n/* Collapsed (narrow window): the group is one button; its commands open in a popup. */\n.face {\n	display: none;\n}\n:host([data-collapsed]) .face {\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	justify-content: flex-start;\n	gap: var(--office-space-0);\n	min-width: var(--office-collapsed-group-min-width);\n	height: var(--office-command-large-height);\n	padding: var(--office-space-0) var(--office-space-1-5);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-foreground);\n	font: inherit;\n	font-size: var(--office-font-size-sm);\n	cursor: pointer;\n}\n:host([data-collapsed]) .face:hover,\n:host([data-open]) .face {\n	background: var(--office-selected);\n}\n.face:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n.face svg {\n	width: var(--office-command-large-icon);\n	height: var(--office-command-large-icon);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n	color: var(--office-command-icon-color);\n}\n.face svg.chev {\n	width: var(--office-icon-size-xs);\n	height: var(--office-icon-size-xs);\n	color: currentColor;\n}\n:host([data-collapsed]) .foot,\n:host([data-collapsed]) .row {\n	display: none;\n}\n:host([data-collapsed][data-open]) .row {\n	display: flex;\n	flex-wrap: wrap;\n	position: fixed;\n	top: var(--office-ribbon-collapse-y);\n	left: var(--office-ribbon-collapse-x);\n	z-index: var(--office-z-popover);\n	box-sizing: border-box;\n	max-width: calc(100vw - 2 * var(--office-space-2));\n	padding: var(--office-space-2);\n	background: var(--office-popover);\n	color: var(--office-popover-foreground);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-md);\n	box-shadow: var(--office-shadow);\n}\n\n@media (forced-colors: active) {\n	.group::after {\n		background: CanvasText;\n	}\n	.caption,\n	.launcher {\n		color: CanvasText;\n	}\n	:host([data-collapsed][data-open]) .row {\n		border-color: CanvasText;\n	}\n}\n";
+var ribbon_group_default = ":host {\n	display: inline-flex;\n	flex: none;\n	align-self: stretch;\n}\n.group {\n	position: relative;\n	box-sizing: border-box;\n	display: flex;\n	flex-direction: column;\n	justify-content: space-between;\n	min-height: var(--office-ribbon-group-height);\n	padding: var(--office-ribbon-group-padding);\n}\n/* Office draws a hairline between groups; a product may stop it short of the top and bottom. */\n.group::after {\n	content: '';\n	position: absolute;\n	top: var(--office-ribbon-separator-inset);\n	bottom: var(--office-ribbon-separator-inset);\n	inset-inline-end: 0;\n	width: var(--office-border-width);\n	background: var(--office-ribbon-separator);\n}\n:host(:last-child) .group::after {\n	content: none;\n}\n.row {\n	display: flex;\n	align-items: flex-start;\n	gap: var(--office-space-1);\n	flex: 1;\n}\n/* One-line groups centre their commands on the whole group box. */\n:host([data-compact-row]) .row {\n	align-items: center;\n}\n/* Several small drop-down galleries stack in columns of three. */\n:host([data-stack]) .row {\n	flex-direction: column;\n	align-items: stretch;\n	align-content: flex-start;\n	flex-wrap: wrap;\n	max-height: var(--office-ribbon-stack-max-height);\n	gap: var(--office-space-0);\n}\n/* An inline gallery with several small drop-downs beside it: three rows, the gallery spans them. */\n:host([data-stack-beside]) .row {\n	display: grid;\n	grid-auto-flow: column;\n	grid-template-rows: repeat(3, auto);\n	align-items: center;\n	gap: var(--office-space-0) var(--office-space-1);\n}\n:host([data-stack-beside]) ::slotted([data-stack-span]) {\n	grid-row: 1 / span 3;\n}\n::slotted(*) {\n	flex-shrink: 0;\n}\n.foot {\n	position: relative;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	padding: var(--office-ribbon-caption-padding);\n}\n.caption {\n	color: var(--office-muted-foreground);\n	font-size: var(--office-ribbon-caption-size);\n	line-height: var(--office-ribbon-caption-line-height);\n	text-align: center;\n	white-space: nowrap;\n}\n.launcher {\n	position: absolute;\n	inset-inline-end: var(--office-launcher-inset-end);\n	bottom: var(--office-launcher-inset-bottom);\n	display: inline-grid;\n	place-items: center;\n	width: var(--office-launcher-width);\n	height: var(--office-launcher-height);\n	padding: 0;\n	border: 0;\n	border-radius: var(--office-radius-xs);\n	background: transparent;\n	color: var(--office-muted-foreground);\n	cursor: pointer;\n}\n.launcher:hover:not(:disabled) {\n	background: var(--office-surface);\n	color: var(--office-foreground);\n}\n.launcher:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n}\n.launcher:disabled {\n	opacity: 0.45;\n	cursor: not-allowed;\n}\n.launcher[hidden] {\n	display: none;\n}\n.launcher svg {\n	width: var(--office-icon-size-xs);\n	height: var(--office-icon-size-xs);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n\n/* Collapsed (narrow window): the group is one button; its commands open in a popup. */\n.face {\n	display: none;\n}\n:host([data-collapsed]) .face {\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	justify-content: flex-start;\n	gap: var(--office-space-0);\n	min-width: var(--office-collapsed-group-min-width);\n	height: var(--office-command-large-height);\n	padding: var(--office-space-0) var(--office-space-1-5);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-foreground);\n	font: inherit;\n	font-size: var(--office-font-size-sm);\n	cursor: pointer;\n}\n:host([data-collapsed]) .face:hover,\n:host([data-open]) .face {\n	background: var(--office-selected);\n}\n.face:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n.face svg {\n	width: var(--office-command-large-icon);\n	height: var(--office-command-large-icon);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n	color: var(--office-command-icon-color);\n}\n.face svg.chev {\n	width: var(--office-icon-size-xs);\n	height: var(--office-icon-size-xs);\n	color: currentColor;\n}\n:host([data-collapsed]) .foot,\n:host([data-collapsed]) .row {\n	display: none;\n}\n:host([data-collapsed][data-open]) .row {\n	display: flex;\n	flex-wrap: wrap;\n	position: fixed;\n	top: var(--office-ribbon-collapse-y);\n	left: var(--office-ribbon-collapse-x);\n	z-index: var(--office-z-popover);\n	box-sizing: border-box;\n	max-width: calc(100vw - 2 * var(--office-space-2));\n	padding: var(--office-space-2);\n	background: var(--office-popover);\n	color: var(--office-popover-foreground);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-md);\n	box-shadow: var(--office-shadow);\n}\n\n@media (forced-colors: active) {\n	.group::after {\n		background: CanvasText;\n	}\n	.caption,\n	.launcher {\n		color: CanvasText;\n	}\n	:host([data-collapsed][data-open]) .row {\n		border-color: CanvasText;\n	}\n}\n";
 
 // src/ribbon/ribbon-group.ts
 function tokenPx(el, name, fallback) {
@@ -1974,6 +1974,12 @@ var OfficeUiRibbonGroup = class extends OfficeElement {
       "data-stack",
       stackable.length > 1 && stackable.length === children.length
     );
+    const inline = children.filter(
+      (el) => el.matches('[mode="inline"]') || el.querySelector('[mode="inline"]') !== null
+    );
+    const beside = inline.length > 0 && stackable.length > 1 && stackable.length + inline.length === children.length;
+    this.toggleAttribute("data-stack-beside", beside);
+    for (const el of children) el.toggleAttribute("data-stack-span", beside && inline.includes(el));
     const tallest = Math.max(0, ...children.map((el) => el.getBoundingClientRect().height));
     if (tallest > 0)
       this.toggleAttribute(
@@ -2140,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);
@@ -2195,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";
@@ -2207,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();
@@ -2245,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");
@@ -2289,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) {
@@ -2350,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();
   };
@@ -2401,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() {
@@ -2440,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(
@@ -2449,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>` : ""}
@@ -2475,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);
@@ -6069,7 +6252,7 @@ function runKeyTips(root, targets, onDone, className) {
 }
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/ribbon/scroll-more.css?raw
-var scroll_more_default = ".ribbon-scroll-more {\n	position: sticky;\n	right: 0;\n	z-index: 2;\n	flex: none;\n	align-self: center;\n	margin-left: auto;\n	width: 28px;\n	height: 40px;\n	padding: 0;\n	border: 1px solid var(--office-border, #c8c6c4);\n	border-radius: 4px;\n	background: var(--office-background, #fff);\n	color: var(--office-foreground, #201f1e);\n	font-size: 20px;\n	line-height: 1;\n	box-shadow: -6px 0 6px -2px rgb(0 0 0 / 12%);\n	cursor: pointer;\n}\n\n@media (pointer: coarse) {\n	.ribbon-scroll-more {\n		width: var(--office-target-size-touch, 44px);\n		height: var(--office-target-size-touch, 44px);\n	}\n	/* The ribbon grows to fit 44px targets instead of clipping them. */\n	.ribbon-panel {\n		height: auto !important;\n		min-height: 104px;\n		-webkit-overflow-scrolling: touch;\n	}\n	.ribbon-panel .ribbon-group button,\n	.ribbon-panel .ribbon-group select,\n	.ribbon-panel .ribbon-group input,\n	.ribbon-panel .ribbon-group .ribbon-overflow-button {\n		min-width: var(--office-target-size-touch, 44px);\n		min-height: var(--office-target-size-touch, 44px);\n	}\n}\n";
+var scroll_more_default = ".ribbon-scroll-more {\n	position: sticky;\n	right: 0;\n	z-index: 2;\n	flex: none;\n	align-self: center;\n	margin-left: auto;\n	width: 28px;\n	height: 40px;\n	padding: 0;\n	border: 1px solid var(--office-border, #c8c6c4);\n	border-radius: 4px;\n	background: var(--office-background, #fff);\n	color: var(--office-foreground, #201f1e);\n	font-size: 20px;\n	line-height: 1;\n	cursor: pointer;\n}\n/* A fade into the chevron: content scrolling under it dims out instead of being cut off by the box. */\n.ribbon-scroll-more::before {\n	content: '';\n	position: absolute;\n	top: -1px;\n	right: calc(100% + 1px);\n	bottom: -1px;\n	width: 32px;\n	background: linear-gradient(to right, transparent, var(--office-background, #fff));\n	pointer-events: none;\n}\n\n@media (pointer: coarse) {\n	.ribbon-scroll-more {\n		width: var(--office-target-size-touch, 44px);\n		height: var(--office-target-size-touch, 44px);\n	}\n	/* The ribbon grows to fit 44px targets instead of clipping them. */\n	.ribbon-panel {\n		height: auto !important;\n		min-height: 104px;\n		-webkit-overflow-scrolling: touch;\n	}\n	.ribbon-panel .ribbon-group button,\n	.ribbon-panel .ribbon-group select,\n	.ribbon-panel .ribbon-group input,\n	.ribbon-panel .ribbon-group .ribbon-overflow-button {\n		min-width: var(--office-target-size-touch, 44px);\n		min-height: var(--office-target-size-touch, 44px);\n	}\n}\n";
 
 // src/ribbon/scroll-more.ts
 var STYLE_ID = "office-ui-ribbon-touch-style";