@conduction/nextcloud-vue 2.109.0 → 2.111.0

package/dist/esm/nextcloud-vue.css

@@ -91,14 +91,19 @@
 	/* Buttons and inputs. */
 	--cn-board-control-height: 40px;
 	--cn-board-control-radius: 8px;
+	/* A control's edge: 3:1 against every ground a control sits on (WCAG
+	   1.4.11). Nextcloud's border-dark is a hairline (#dbdbdb, 1.4:1); its
+	   max-contrast border is the control step, and a theme sets both. */
+	--cn-board-control-border: var(--color-border-maxcontrast);
 	/* Cards. */
 	--cn-board-card-radius: 12px;
 	--cn-board-card-padding: 20px 22px;
 	/* The side inset of a dashboard card: its title and its rows. */
 	--cn-board-dashboard-card-inset: 24px;
-	/* Hairline inside a card, and the soft secondary text. */
+	/* Hairline inside a card, and the soft secondary text: the boards' #3d4047,
+	   between the main text and the muted text, so it follows a theme's pair. */
 	--cn-board-hairline: var(--color-border);
-	--cn-board-text-soft: var(--color-main-text);
+	--cn-board-text-soft: color-mix(in srgb, var(--color-main-text) 45%, var(--color-text-maxcontrast));
 }
 
 /*
@@ -250,6 +255,37 @@
 	--font-weight-element: 600;
 }
 
+/* ---- A button with an icon and a label --------------------------------- */
+/* The boards draw it 14px in at both sides with 14px text and a 16px icon
+   8px from its label (DqZaakEmail "Notitie toevoegen", DqVthInstellingen
+   "Regel toevoegen"). NcButton pads its start 4px and its end 12px, and puts
+   a 20px icon in a 30px slot. The rules hold the condition in `:where()`, so
+   they weigh (0,3,0): enough to outrank NcButton's own (0,2,0), and less than
+   any surface rule (header, toolbar, follow pill, Meer chevron, tab strip),
+   which keeps its own value. The padding goes through NcButton's
+   `--button-padding`, so a surface that sets `padding` is never contested.
+   @spec openspec/changes/board-icon-label-button/specs/board-icon-label-button/spec.md#requirement-a-board-button-with-an-icon-and-a-label-is-padded-as-the-boards-draw-it */
+.cn-look-board .button-vue.button-vue:where(:has(> .button-vue__wrapper > .button-vue__icon:not(:empty)):has(> .button-vue__wrapper > .button-vue__text:not(:empty)):not(.cn-look-nextcloud *):not(.vue-crumb *)) {
+	--button-padding: 14px;
+	font-size: 14px;
+}
+
+.cn-look-board :where(.button-vue:has(> .button-vue__wrapper > .button-vue__icon:not(:empty)):has(> .button-vue__wrapper > .button-vue__text:not(:empty)):not(.cn-look-nextcloud *):not(.vue-crumb *)) .button-vue__wrapper.button-vue__wrapper {
+	gap: 8px;
+}
+
+.cn-look-board :where(.button-vue:has(> .button-vue__wrapper > .button-vue__icon:not(:empty)):has(> .button-vue__wrapper > .button-vue__text:not(:empty)):not(.cn-look-nextcloud *):not(.vue-crumb *)) .button-vue__icon.button-vue__icon {
+	width: 16px;
+	min-width: 16px;
+	height: 16px;
+	min-height: 16px;
+}
+
+.cn-look-board :where(.button-vue:has(> .button-vue__wrapper > .button-vue__icon:not(:empty)):has(> .button-vue__wrapper > .button-vue__text:not(:empty)):not(.cn-look-nextcloud *):not(.vue-crumb *)) .button-vue__icon svg {
+	width: 16px;
+	height: 16px;
+}
+
 /* ---- The header button ------------------------------------------------- */
 .cn-look-board .cn-index-page__header-buttons:not(.cn-look-nextcloud *),
 .cn-look-board .cn-detail-page__header-actions:not(.cn-look-nextcloud *),
@@ -279,7 +315,7 @@
 	--nldesign-component-button-primary-action-font-weight: 600;
 	--nldesign-component-button-secondary-action-color: var(--color-main-text);
 	--nldesign-component-button-secondary-action-background-color: var(--color-main-background);
-	--nldesign-component-button-secondary-action-border-color: var(--color-border-dark);
+	--nldesign-component-button-secondary-action-border-color: var(--cn-board-control-border);
 	--nldesign-component-button-secondary-action-hover-background-color: var(--color-background-hover);
 }
 
@@ -293,7 +329,7 @@
 	min-height: var(--cn-board-control-height);
 	padding: 0 14px;
 	gap: 8px;
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--cn-board-control-border);
 	border-radius: var(--cn-board-control-radius);
 	background: var(--color-main-background);
 	color: var(--color-main-text);
@@ -325,7 +361,7 @@
 	height: var(--cn-board-control-height);
 	min-height: var(--cn-board-control-height);
 	padding: 0 14px;
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--cn-board-control-border);
 	border-radius: var(--cn-board-control-radius);
 	background: var(--color-main-background);
 	color: var(--color-main-text);
@@ -333,8 +369,9 @@
 	font-weight: 600;
 }
 
-/* Buttons 10px apart, each icon 16px with 8px to its label (DqZaak's header,
-   DqZaken's "Downloaden"); NcButton draws a 20px icon in a 30px slot. */
+/* Buttons 10px apart, each icon 16px (DqZaak's header, DqZaken's
+   "Downloaden"); NcButton draws a 20px icon in a 30px slot. The 8px to the
+   label is the board's icon-and-label gap above. */
 .cn-look-board .cn-action-buttons:not(.cn-look-nextcloud *) {
 	gap: 10px;
 }
@@ -344,7 +381,6 @@
 	min-width: 16px;
 	height: 16px;
 	min-height: 16px;
-	margin-inline-end: 8px;
 }
 
 .cn-look-board .cn-action-buttons .button-vue .button-vue__icon:not(.cn-look-nextcloud *) svg {
@@ -379,7 +415,7 @@
    body ink onto every span (thematiq). */
 .cn-look-board .action-item.action-item--secondary .action-item__menutoggle.button-vue--secondary:not(.cn-look-nextcloud *) {
 	--nldesign-color-on-surface: var(--color-main-text);
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--cn-board-control-border);
 	border-radius: var(--cn-board-control-radius);
 	background: var(--color-main-background);
 	color: var(--color-main-text);
@@ -1176,6 +1212,15 @@
 	line-height: normal;
 }
 
+/* A neutral board tag ("Normaal", "Uit") is the soft text on the chip ground,
+   not the main text on the darker background a Nextcloud tag takes.
+   @spec openspec/changes/board-pill-tones/specs/board-pill-tones/spec.md#requirement-a-neutral-board-tag-is-soft-text-on-the-chip-ground */
+.cn-look-board .cn-status-badge--default:not(.cn-status-badge--solid):not(.cn-look-nextcloud *) {
+	--cn-status-badge-ink: var(--cn-board-text-soft);
+	background-color: var(--color-background-hover);
+	color: var(--cn-status-badge-ink);
+}
+
 /* A pill paints its own pairing of ink and fill. A theme that forces the body
    ink onto every span (thematiq's text rule, `!important` at id level) reads
    that ink from --nldesign-color-on-surface when the surface sets it, so the
@@ -2099,10 +2144,13 @@
 	margin-inline-start: auto;
 	padding: 1px 8px;
 	border-radius: 10px;
+	--nldesign-color-on-surface: var(--cn-board-text-soft, var(--color-main-text));
 	background-color: var(--color-main-background);
-	color: var(--color-main-text);
+	color: var(--cn-board-text-soft, var(--color-main-text));
 	font-size: 12px;
-	font-weight: 400;
+	font-weight: 700;
+	/* 16px tall on its 1px pad (DqWerkbord's column counts). */
+	line-height: 14px;
 }
 
 /* A column at its limit: the count in the error colour; "full" is said in words too. */
@@ -2474,7 +2522,7 @@
 	height: var(--cn-board-control-height) !important;
 	min-height: var(--cn-board-control-height) !important;
 	padding: 0 14px !important;
-	border: 1px solid var(--color-border-dark) !important;
+	border: 1px solid var(--cn-board-control-border) !important;
 	border-radius: var(--cn-board-control-radius) !important;
 	background: var(--color-main-background) !important;
 	color: var(--color-main-text) !important;
@@ -2598,7 +2646,7 @@
 	min-height: 38px;
 	margin: 0;
 	padding: 0 14px;
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--cn-board-control-border);
 	border-radius: 19px;
 	background: var(--color-main-background);
 	color: var(--color-main-text);
@@ -2640,20 +2688,22 @@
 	padding: 1px 7px;
 	border: 0;
 	border-radius: 10px;
+	--nldesign-color-on-surface: var(--cn-board-text-soft);
 	background: var(--color-border);
 	color: var(--cn-board-text-soft);
 	font-size: 12px;
 	font-weight: 600;
-	line-height: 1.4;
+	/* 16px tall on its 1px pad, as the boards draw it (DqTaken, DqWerkbord).
+	   @spec openspec/changes/board-pill-tones/specs/board-pill-tones/spec.md#requirement-a-board-count-is-16px-tall */
+	line-height: 14px;
 }
 
 .cn-look-board .cn-saved-views__chip--selected .cn-saved-views__chip-count,
-/* On the selected chip the count is a lighter bubble on the dark chip
-   (DqZaken: #3d4047 on #1b1c1d); --cn-board-text-soft resolves to the main
-   text, the chip's own colour, which hid the bubble. */
+/* On the selected chip the count is the soft ink as a lighter bubble on the
+   dark chip (DqZaken: #3d4047 on #1b1c1d). */
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__tab--active .cn-quick-filter-bar__count {
 	--nldesign-color-on-surface: var(--color-primary-element-text);
-	background: color-mix(in srgb, var(--color-main-background) 15%, var(--color-main-text));
+	background: var(--cn-board-text-soft);
 	color: var(--color-primary-element-text);
 }
 
@@ -2702,7 +2752,7 @@
 	--nldesign-component-button-font-weight: 600;
 	--nldesign-component-button-secondary-action-color: var(--color-main-text);
 	--nldesign-component-button-secondary-action-background-color: var(--color-main-background);
-	--nldesign-component-button-secondary-action-border-color: var(--color-border-dark);
+	--nldesign-component-button-secondary-action-border-color: var(--cn-board-control-border);
 	--nldesign-component-button-secondary-action-hover-background-color: var(--color-background-hover);
 }
 
@@ -2729,6 +2779,8 @@
 	margin-inline-start: 6px;
 	padding: 0 6px;
 	border-radius: 10px;
+	/* A theme that forces the body ink onto every span reads it from here. */
+	--nldesign-color-on-surface: var(--color-primary-element-text);
 	background: var(--color-primary-element);
 	color: var(--color-primary-element-text);
 	font-size: 12px;
@@ -2837,7 +2889,7 @@
 	height: 40px;
 	padding-block: 0;
 	padding-inline: 38px 12px !important;
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--cn-board-control-border);
 	border-radius: 8px;
 	font-size: 14px;
 }
@@ -3214,7 +3266,7 @@
 	height: 34px !important;
 	min-height: 34px !important;
 	padding: 0 !important;
-	border: 1px solid var(--color-border-dark) !important;
+	border: 1px solid var(--cn-board-control-border) !important;
 	border-radius: 8px !important;
 	color: var(--cn-board-text-soft) !important;
 }
@@ -8000,7 +8052,7 @@ a.cn-kpi-card--board * {
 	height: var(--cn-board-control-height) !important;
 	min-height: var(--cn-board-control-height) !important;
 	padding: 0 14px !important;
-	border: 1px solid var(--color-border-dark) !important;
+	border: 1px solid var(--cn-board-control-border) !important;
 	border-radius: var(--cn-board-control-radius) !important;
 	background: var(--color-main-background) !important;
 	color: var(--color-main-text) !important;
@@ -8013,13 +8065,13 @@ a.cn-kpi-card--board * {
 	background: var(--color-background-hover) !important;
 }
 
-/* Each header icon is 16px with 8px to its label; NcButton draws 20px in a 30px slot. */
+/* Each header icon is 16px; NcButton draws 20px in a 30px slot. The 8px to
+   the label is the board's icon-and-label gap (look-board.css). */
 .cn-look-board .cn-detail-page .cn-detail-page__header-actions > .button-vue--secondary .button-vue__icon {
 	width: 16px;
 	min-width: 16px;
 	height: 16px;
 	min-height: 16px;
-	margin-inline-end: 8px;
 }
 
 .cn-look-board .cn-detail-page .cn-detail-page__header-actions > .button-vue--secondary .button-vue__icon svg {
@@ -8027,6 +8079,17 @@ a.cn-kpi-card--board * {
 	height: 16px;
 }
 
+/* Row 3: the Follow control under the breadcrumb, on the full width.
+   @spec openspec/changes/board-follow-row/specs/board-follow-row/spec.md#requirement-the-board-follow-control-sits-under-the-breadcrumb */
+.cn-look-board .cn-detail-page__header-row3 {
+	align-items: center;
+	display: flex;
+	flex: 1 0 100%;
+	flex-wrap: wrap;
+	gap: 8px;
+	min-width: 0;
+}
+
 /* Row 2: pills, breadcrumb, dot, meta, chips. */
 .cn-look-board .cn-detail-page__header-row2 {
 	align-items: center;
@@ -8184,14 +8247,14 @@ a.cn-kpi-card--board * {
 	--nldesign-component-button-border-radius: 14px;
 	--nldesign-component-button-secondary-action-color: var(--color-main-text);
 	--nldesign-component-button-secondary-action-background-color: var(--color-main-background);
-	--nldesign-component-button-secondary-action-border-color: var(--color-border-dark);
+	--nldesign-component-button-secondary-action-border-color: var(--cn-board-control-border);
 	--nldesign-component-button-secondary-action-hover-background-color: var(--color-background-hover);
 	box-sizing: border-box;
 	height: 28px;
 	min-height: 28px;
 	min-width: 0;
 	padding: 0 10px;
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--cn-board-control-border);
 	border-radius: 14px;
 	background: var(--color-main-background);
 	color: var(--color-main-text);
@@ -8329,13 +8392,14 @@ a.cn-kpi-card--board * {
 
 /* The Actions button at the end of the strip: at the top, 8px in from the
    end and 8px clear of the card, so the tabs, aligned to the bottom, sit 6px
-   lower than the button (DqZaak "Acties"). */
+   lower than the button, 12px in at both sides (DqZaak "Acties"). */
 .cn-look-board .cn-tabs--board .cn-tabs__nav-end {
 	align-self: flex-start;
 	margin: 0 8px 8px 0;
 }
 
 .cn-look-board .cn-tabs--board .cn-tabs__nav-end .button-vue {
+	--button-padding: 12px;
 	min-height: 34px;
 	block-size: 34px;
 }
@@ -8659,7 +8723,7 @@ a.cn-kpi-card--board * {
 .cn-look-board .cn-activity-tab--board .cn-activity-tab__kind {
 	align-items: center;
 	background: var(--color-main-background);
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--cn-board-control-border);
 	border-radius: 18px;
 	color: var(--color-main-text);
 	cursor: pointer;
@@ -8934,7 +8998,7 @@ a.cn-kpi-card--board * {
 	height: var(--cn-board-control-height) !important;
 	min-height: var(--cn-board-control-height) !important;
 	padding: 0 14px !important;
-	border: 1px solid var(--color-border-dark) !important;
+	border: 1px solid var(--cn-board-control-border) !important;
 	border-radius: var(--cn-board-control-radius) !important;
 	background: var(--color-main-background) !important;
 	color: var(--color-main-text) !important;
@@ -28366,35 +28430,35 @@ button.cn-stepper__step[data-v-776581d4] {
 }
 
 
-.cn-work-queue[data-v-793630f4] {
+.cn-work-queue[data-v-d5bc0a42] {
 	display: flex;
 	flex-direction: column;
 	gap: 24px;
 }
-.cn-work-queue__head[data-v-793630f4],
-.cn-work-queue__group-head[data-v-793630f4] {
+.cn-work-queue__head[data-v-d5bc0a42],
+.cn-work-queue__group-head[data-v-d5bc0a42] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	justify-content: space-between;
 	gap: 12px;
 }
-.cn-work-queue__title[data-v-793630f4] {
+.cn-work-queue__title[data-v-d5bc0a42] {
 	margin: 0;
 	font-size: 28px;
 	font-weight: 700;
 }
-.cn-work-queue__actions[data-v-793630f4] {
+.cn-work-queue__actions[data-v-d5bc0a42] {
 	display: flex;
 	gap: 8px;
 }
-.cn-work-queue__group[data-v-793630f4] {
+.cn-work-queue__group[data-v-d5bc0a42] {
 	padding: 20px 24px;
 	border: 1px solid var(--color-border);
 	border-radius: var(--border-radius-large);
 	background: var(--color-main-background);
 }
-.cn-work-queue__group-title[data-v-793630f4] {
+.cn-work-queue__group-title[data-v-d5bc0a42] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -28402,33 +28466,33 @@ button.cn-stepper__step[data-v-776581d4] {
 	font-size: 18px;
 	font-weight: 700;
 }
-.cn-work-queue__count[data-v-793630f4] {
+.cn-work-queue__count[data-v-d5bc0a42] {
 	padding: 0 8px;
 	border-radius: 10px;
 	background: var(--color-background-dark);
 	font-size: 12px;
 	font-weight: 600;
 }
-.cn-work-queue__muted[data-v-793630f4] {
+.cn-work-queue__muted[data-v-d5bc0a42] {
 	margin: 4px 0 8px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-work-queue__items[data-v-793630f4] {
+.cn-work-queue__items[data-v-d5bc0a42] {
 	margin: 0;
 	padding: 0;
 	list-style: none;
 }
-.cn-work-queue__item[data-v-793630f4] {
+.cn-work-queue__item[data-v-d5bc0a42] {
 	display: flex;
 	align-items: center;
 	gap: 16px;
 	padding: 12px 0;
 	border-block-end: 1px solid var(--color-border);
 }
-.cn-work-queue__item[data-v-793630f4]:last-child {
+.cn-work-queue__item[data-v-d5bc0a42]:last-child {
 	border-block-end: none;
 }
-.cn-work-queue__avatar[data-v-793630f4] {
+.cn-work-queue__avatar[data-v-d5bc0a42] {
 	display: inline-flex;
 	flex: none;
 	align-items: center;
@@ -28441,24 +28505,24 @@ button.cn-stepper__step[data-v-776581d4] {
 	font-size: 12px;
 	font-weight: 700;
 }
-.cn-work-queue__body[data-v-793630f4] {
+.cn-work-queue__body[data-v-d5bc0a42] {
 	display: flex;
 	flex: 1 1 auto;
 	flex-direction: column;
 	min-width: 0;
 }
-.cn-work-queue__link[data-v-793630f4] {
+.cn-work-queue__link[data-v-d5bc0a42] {
 	color: var(--color-main-text);
 	font-weight: 700;
 	text-decoration: none;
 }
-.cn-work-queue__link[data-v-793630f4]:hover {
+.cn-work-queue__link[data-v-d5bc0a42]:hover {
 	text-decoration: underline;
 }
-.cn-work-queue__item--late .cn-work-queue__link[data-v-793630f4] {
+.cn-work-queue__item--late .cn-work-queue__link[data-v-d5bc0a42] {
 	color: var(--color-error);
 }
-.cn-work-queue__sub[data-v-793630f4] {
+.cn-work-queue__sub[data-v-d5bc0a42] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 12px;
@@ -39027,10 +39091,13 @@ to {
 	margin-inline-start: auto;
 	padding: 1px 8px;
 	border-radius: 10px;
+	--nldesign-color-on-surface: var(--cn-board-text-soft, var(--color-main-text));
 	background-color: var(--color-main-background);
-	color: var(--color-main-text);
+	color: var(--cn-board-text-soft, var(--color-main-text));
 	font-size: 12px;
-	font-weight: 400;
+	font-weight: 700;
+	/* 16px tall on its 1px pad (DqWerkbord's column counts). */
+	line-height: 14px;
 }
 
 /* A column at its limit: the count in the error colour; "full" is said in words too. */
@@ -41817,12 +41884,12 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 }
 
 
-.cn-action-dialog[data-v-53fea6f0] {
+.cn-action-dialog[data-v-0bb28fd1] {
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
 }
-.cn-action-dialog__summary[data-v-53fea6f0] {
+.cn-action-dialog__summary[data-v-0bb28fd1] {
 	display: flex;
 	align-items: center;
 	gap: 10px;
@@ -41830,13 +41897,13 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	border: 1px solid var(--color-border);
 	border-radius: var(--border-radius-large, 8px);
 }
-.cn-action-dialog__summary-text[data-v-53fea6f0] {
+.cn-action-dialog__summary-text[data-v-0bb28fd1] {
 	display: flex;
 	flex: 1 1 auto;
 	flex-direction: column;
 	min-width: 0;
 }
-.cn-action-dialog__badge[data-v-53fea6f0] {
+.cn-action-dialog__badge[data-v-0bb28fd1] {
 	padding: 3px 10px;
 	border-radius: 12px;
 	background: var(--color-background-dark);
@@ -41844,25 +41911,25 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	font-weight: 600;
 	white-space: nowrap;
 }
-.cn-action-dialog__title[data-v-53fea6f0] {
+.cn-action-dialog__title[data-v-0bb28fd1] {
 	margin: 0 0 8px;
 	font-size: 15px;
 	font-weight: 700;
 }
-.cn-action-dialog__facts[data-v-53fea6f0] {
+.cn-action-dialog__facts[data-v-0bb28fd1] {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 	gap: 8px 16px;
 	margin: 0;
 }
-.cn-action-dialog__facts dt[data-v-53fea6f0] {
+.cn-action-dialog__facts dt[data-v-0bb28fd1] {
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 }
-.cn-action-dialog__facts dd[data-v-53fea6f0] {
+.cn-action-dialog__facts dd[data-v-0bb28fd1] {
 	margin: 0;
 }
-.cn-action-dialog__checks[data-v-53fea6f0] {
+.cn-action-dialog__checks[data-v-0bb28fd1] {
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
@@ -41870,28 +41937,28 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	padding: 0;
 	list-style: none;
 }
-.cn-action-dialog__check[data-v-53fea6f0] {
+.cn-action-dialog__check[data-v-0bb28fd1] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 8px;
 }
-.cn-action-dialog__check-icon[data-v-53fea6f0] {
+.cn-action-dialog__check-icon[data-v-0bb28fd1] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-action-dialog__check-icon--met[data-v-53fea6f0] {
+.cn-action-dialog__check-icon--met[data-v-0bb28fd1] {
 	color: var(--color-success-text, var(--color-success));
 }
-.cn-action-dialog__muted[data-v-53fea6f0] {
+.cn-action-dialog__muted[data-v-0bb28fd1] {
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 }
-.cn-action-dialog__field[data-v-53fea6f0] {
+.cn-action-dialog__field[data-v-0bb28fd1] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 }
-.cn-action-dialog__error[data-v-53fea6f0] {
+.cn-action-dialog__error[data-v-0bb28fd1] {
 	margin: 0;
 	color: var(--color-error-text, var(--color-error));
 }

package/dist/esm/utils/actionsDispatcher.js

@@ -4,7 +4,7 @@ import { parseDispositionFilename, triggerBlobDownload } from '../components/CnI
 import { interpolateUrlTokens } from '../composables/useEndpointSource.js';
 import { routeHref } from './actionLink.js';
 import { resolveModalEntry } from './builtInModals.js';
-import { dropOptionalUnresolvedDeep, resolveDeepTokens, dropOptionalUnresolved, resolveFilterTokens, hasUnresolvedDeepTokens, hasUnresolvedTokens } from './resolveFilterTokens.js';
+import { resolveDeepTokens, dropOptionalUnresolvedDeep, dropOptionalUnresolved, resolveFilterTokens, hasUnresolvedDeepTokens, hasUnresolvedTokens } from './resolveFilterTokens.js';
 import { schemaRefSlug } from './schemaRefSlug.js';
 
 /**
@@ -851,7 +851,10 @@ function dispatchAction(action, context = {}) {
 				return
 			}
 
-			context.openModal(target, action.props ?? {});
+			// A prop that is exactly a token (`"objectId": "@objectId"`) resolves
+			// against the page's object; one the page cannot answer stays as written.
+			const props = context.tokenCtx ? resolveDeepTokens(action.props ?? {}, context.tokenCtx) : (action.props ?? {});
+			context.openModal(target, props);
 			break
 		}