ooxml-ui 1.14.0 → 1.15.0

package/custom-elements.json

@@ -3075,7 +3075,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-7QGML32D.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(
@@ -6069,7 +6075,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";

package/dist/{chunk-DSQBXLMO.js → chunk-EOGVSVJ7.js}

@@ -1,4 +1,4 @@
-import { defineRibbonGroup, defineRibbonStack, defineButton, defineMenuItem, defineMenuButton } from './chunk-LAVVSCRJ.js';
+import { defineRibbonGroup, defineRibbonStack, defineButton, defineMenuItem, defineMenuButton } from './chunk-7QGML32D.js';
 import { acceptedRibbonAddIns, findRibbonAddInCommand, RIBBON_ADD_IN_EVENT } from 'ooxml-core/ribbon';
 export { RIBBON_ADD_IN_EVENT } from 'ooxml-core/ribbon';
 

package/dist/{chunk-C5F7454A.js → chunk-JNZQZH3T.js}

@@ -1,7 +1,7 @@
 import { defineSmartArt } from './chunk-ANPFMQ6E.js';
-import { TEAMS_TAGS, registerTeams } from './chunk-C3MXKNNK.js';
+import { TEAMS_TAGS, registerTeams } from './chunk-YFXBKLHN.js';
 import { installOfficeUiTheme } from './chunk-7E3HU7RL.js';
-import { registerControls } from './chunk-LAVVSCRJ.js';
+import { registerControls } from './chunk-7QGML32D.js';
 import { definePresence } from './chunk-KNC2UEUR.js';
 
 // src/index.ts