@conduction/nextcloud-vue 2.69.0 → 2.70.0

package/dist/esm/components/CnNextStepCard/CnNextStepCard.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"CnNextStepCard.vue2.js","sources":["../../../../src/components/CnNextStepCard/CnNextStepCard.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<section\n\t\tv-if=\"normalisedItems.length > 0\"\n\t\tclass=\"cn-next-step-card\"\n\t\tdata-testid=\"cn-next-step-card\"\n\t\t:aria-labelledby=\"title ? titleId : null\"\n\t\t:aria-label=\"title ? null : fallbackLabel\">\n\t\t<div class=\"cn-next-step-card__main\">\n\t\t\t<component\n\t\t\t\t:is=\"titleTag\"\n\t\t\t\tv-if=\"title\"\n\t\t\t\t:id=\"titleId\"\n\t\t\t\tclass=\"cn-next-step-card__title\">\n\t\t\t\t{{ title }}\n\t\t\t</component>\n\t\t\t<ul class=\"cn-next-step-card__list\">\n\t\t\t\t<li\n\t\t\t\t\tv-for=\"(item, index) in normalisedItems\"\n\t\t\t\t\t:key=\"`${index}-${item.label}`\"\n\t\t\t\t\tclass=\"cn-next-step-card__item\"\n\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t'cn-next-step-card__item--done': item.done,\n\t\t\t\t\t\t'cn-next-step-card__item--current': index === currentIndex,\n\t\t\t\t\t}\"\n\t\t\t\t\tdata-testid=\"cn-next-step-item\">\n\t\t\t\t\t<span class=\"cn-next-step-card__marker\" aria-hidden=\"true\">\n\t\t\t\t\t\t<Check v-if=\"item.done\" :size=\"14\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t<span class=\"cn-next-step-card__label\">{{ item.label }}</span>\n\t\t\t\t\t<span v-if=\"item.hint\" class=\"cn-next-step-card__hint\">{{ item.hint }}</span>\n\t\t\t\t\t<!-- The state in words. The marker is a shape and a colour, and\n\t\t\t\t\t     neither reaches a screen reader or a reader who cannot tell\n\t\t\t\t\t     the two colours apart. -->\n\t\t\t\t\t<span class=\"cn-next-step-card__state\">{{ item.done ? doneLabel : todoLabel }}</span>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</div>\n\t\t<div v-if=\"actionLabel || $slots.action || after\" class=\"cn-next-step-card__side\">\n\t\t\t<!-- @slot action Replace the primary button, for a host that renders its own control. -->\n\t\t\t<slot name=\"action\">\n\t\t\t\t<NcButton\n\t\t\t\t\tv-if=\"actionLabel\"\n\t\t\t\t\t:id=\"actionId || null\"\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t:disabled=\"actionDisabled\"\n\t\t\t\t\tdata-testid=\"cn-next-step-action\"\n\t\t\t\t\t@click=\"$emit('action')\">\n\t\t\t\t\t{{ actionLabel }}\n\t\t\t\t</NcButton>\n\t\t\t</slot>\n\t\t\t<span v-if=\"after\" class=\"cn-next-step-card__after\">{{ after }}</span>\n\t\t</div>\n\t</section>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcButton } from '@nextcloud/vue'\nimport Check from 'vue-material-design-icons/Check.vue'\n\nlet nextStepCardUid = 0\n\n/**\n * CnNextStepCard: what this record needs now, next to the button that does it.\n *\n * A short checklist for the current step and one primary action. It answers\n * \"what do I do next?\" on a record whose menu would otherwise make the handler\n * guess. Renders nothing when there is no checklist, so a step that needs no\n * explaining shows no empty card.\n *\n * ```vue\n * <CnNextStepCard\n *   title=\"What now? Step 2: handling\"\n *   :items=\"[\n *     { label: 'Receipt confirmed', done: true },\n *     { label: 'Review the open documents', hint: '2 of 5 done' },\n *     { label: 'Draft the decision' },\n *   ]\"\n *   action-label=\"Continue reviewing\"\n *   after=\"Then: step 3, decision\"\n *   @action=\"onContinue\" />\n * ```\n *\n * CnDetailPage renders this card from its `nextStep` config, and the\n * `next-step` detail widget type renders it inside a grid.\n */\nexport default {\n\tname: 'CnNextStepCard',\n\n\tcomponents: {\n\t\tCheck,\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/** Heading of the card, for example \"What now? Step 2: handling\". */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Element the heading renders as. Pick the level that fits the page outline. */\n\t\ttitleTag: {\n\t\t\ttype: String,\n\t\t\tdefault: 'h3',\n\t\t},\n\n\t\t/**\n\t\t * The checklist: `{ label, done?, hint? }` per item. The first item\n\t\t * that is not done is emphasised as the one to pick up now.\n\t\t */\n\t\titems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/** Label of the primary button. Empty renders no button. */\n\t\tactionLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** DOM id for the primary button, so a skip link can land on it. */\n\t\tactionId: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Disable the primary button, for example while its request is in flight. */\n\t\tactionDisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** One line under the button saying what follows, for example \"Then: step 3, decision\". */\n\t\tafter: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Text state of a done item, read by screen readers. */\n\t\tdoneLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Done'),\n\t\t},\n\n\t\t/** Text state of an open item, read by screen readers. */\n\t\ttodoLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'To do'),\n\t\t},\n\t},\n\n\temits: [\n\t\t/** The primary button was pressed. */\n\t\t'action',\n\t],\n\n\tdata() {\n\t\tnextStepCardUid += 1\n\t\treturn {\n\t\t\ttitleId: `cn-next-step-title-${nextStepCardUid}`,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * The items that can render: an object with a label.\n\t\t *\n\t\t * @return {Array<{label: string, done: boolean, hint: string}>} The checklist.\n\t\t * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card\n\t\t */\n\t\tnormalisedItems() {\n\t\t\treturn (Array.isArray(this.items) ? this.items : [])\n\t\t\t\t.filter((item) => item && typeof item.label === 'string' && item.label !== '')\n\t\t\t\t.map((item) => ({\n\t\t\t\t\tlabel: item.label,\n\t\t\t\t\tdone: item.done === true,\n\t\t\t\t\thint: typeof item.hint === 'string' ? item.hint : '',\n\t\t\t\t}))\n\t\t},\n\n\t\t/**\n\t\t * Index of the first open item, the one to pick up now.\n\t\t *\n\t\t * @return {number} The index, or -1 when everything is done.\n\t\t * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card\n\t\t */\n\t\tcurrentIndex() {\n\t\t\treturn this.normalisedItems.findIndex((item) => !item.done)\n\t\t},\n\n\t\t/**\n\t\t * Accessible name for a card without a title.\n\t\t *\n\t\t * @return {string} The label.\n\t\t * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card\n\t\t */\n\t\tfallbackLabel() {\n\t\t\treturn t('nextcloud-vue', 'Next step')\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-next-step-card {\n\talign-items: center;\n\tbackground: var(--color-main-background);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--border-radius-large);\n\t/* The edge says \"this is the thing to act on\". An inset shadow, so it\n\t   follows the card's rounded corners instead of squaring them off. */\n\tbox-shadow: inset 4px 0 0 var(--color-primary-element);\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: calc(4 * var(--default-grid-baseline)) calc(8 * var(--default-grid-baseline));\n\tpadding: calc(5 * var(--default-grid-baseline)) calc(6 * var(--default-grid-baseline));\n\tpadding-inline-start: calc(7 * var(--default-grid-baseline));\n}\n\n.cn-next-step-card__main {\n\tdisplay: flex;\n\tflex: 1 1 420px;\n\tflex-direction: column;\n\tgap: calc(2.5 * var(--default-grid-baseline));\n\tmin-width: 0;\n}\n\n.cn-next-step-card__title {\n\tcolor: var(--color-main-text);\n\tfont-size: 0.85em;\n\tfont-weight: 700;\n\tletter-spacing: 0.06em;\n\tmargin: 0;\n\ttext-transform: uppercase;\n}\n\n.cn-next-step-card__list {\n\tdisplay: grid;\n\tgap: calc(2 * var(--default-grid-baseline));\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n\n.cn-next-step-card__item {\n\talign-items: center;\n\tcolor: var(--color-text-maxcontrast);\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: calc(2.5 * var(--default-grid-baseline));\n}\n\n.cn-next-step-card__item--current {\n\tcolor: var(--color-main-text);\n}\n\n.cn-next-step-card__item--current .cn-next-step-card__label {\n\tfont-weight: 700;\n}\n\n.cn-next-step-card__marker {\n\talign-items: center;\n\tborder: 2px solid var(--color-border-maxcontrast);\n\tborder-radius: 50%;\n\tbox-sizing: border-box;\n\tdisplay: inline-flex;\n\tflex: none;\n\theight: 20px;\n\tjustify-content: center;\n\twidth: 20px;\n}\n\n.cn-next-step-card__item--current .cn-next-step-card__marker {\n\tborder-color: var(--color-primary-element);\n}\n\n.cn-next-step-card__item--done .cn-next-step-card__marker {\n\tbackground: var(--color-primary-element);\n\tborder-color: var(--color-primary-element);\n\tcolor: var(--color-primary-element-text);\n}\n\n.cn-next-step-card__hint {\n\tcolor: var(--color-text-maxcontrast);\n\tfont-weight: 400;\n}\n\n/* Read, not seen. */\n.cn-next-step-card__state {\n\tborder: 0;\n\tclip-path: inset(50%);\n\theight: 1px;\n\tmargin: -1px;\n\toverflow: hidden;\n\tpadding: 0;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n.cn-next-step-card__side {\n\talign-items: flex-start;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(2 * var(--default-grid-baseline));\n}\n\n.cn-next-step-card__after {\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 0.9em;\n}\n</style>\n"],"names":["t"],"mappings":";;;;AAiEA,IAAI,kBAAkB,EAAA;;AAEtB;AACC;AACA;;AAEA;;;AAGA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;;;AAGA;AACA;;;;AAID,aAAe;AACd,CAAA,IAAI,EAAE,gBAAgB;;CAEtB,UAAU,EAAE;EACX,KAAK;AACL,EAAA,QAAQ;EACR;;AAED,CAAA,KAAK,EAAE;;AAEN,EAAA,KAAK,EAAE;GACN,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,EAAE;GACX;;AAED;AACA,EAAA,QAAQ,EAAE;GACT,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,IAAI;GACb;;AAED;;AAEC;;AAED,EAAA,KAAK,EAAE;GACN,IAAI,EAAE,KAAK;AACX,GAAA,OAAO,EAAE,MAAM,EAAE;GACjB;;;EAGD,WAAW,EAAE;GACZ,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,EAAE;GACX;;;AAGD,EAAA,QAAQ,EAAE;GACT,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,EAAE;GACX;;AAED;AACA,EAAA,cAAc,EAAE;GACf,IAAI,EAAE,OAAO;GACb,OAAO,EAAE,KAAK;GACd;;AAED;AACA,EAAA,KAAK,EAAE;GACN,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,EAAE;GACX;;AAED;EACA,SAAS,EAAE;GACV,IAAI,EAAE,MAAM;AACZ,GAAA,OAAO,EAAE,MAAMA,SAAC,CAAC,eAAe,EAAE,MAAM,CAAC;GACzC;;;EAGD,SAAS,EAAE;GACV,IAAI,EAAE,MAAM;AACZ,GAAA,OAAO,EAAE,MAAMA,SAAC,CAAC,eAAe,EAAE,OAAO,CAAC;GAC1C;EACD;;AAED,CAAA,KAAK,EAAE;AACN;AACA,EAAA,QAAQ;EACR;;AAED,CAAA,IAAI,GAAG;AACN,EAAA,eAAc,IAAK,EAAA;AACnB,EAAA,OAAO;GACN,OAAO,EAAE,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;AACjD,GAAA;EACA;;AAED,CAAA,QAAQ,EAAE;AACT;AACC;AACA;AACA;;;AAGD,EAAA,eAAe,GAAG;GACjB,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,GAAI,IAAI,CAAC,KAAM,GAAE,EAAE;AAClD,KAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAG,IAAK,OAAO,IAAI,CAAC,KAAM,KAAI,QAAS,IAAG,IAAI,CAAC,KAAM,KAAI,EAAE,CAAA;AAC7E,KAAC,GAAG,CAAC,CAAC,IAAI,MAAM;AACf,KAAA,KAAK,EAAE,IAAI,CAAC,KAAK;AACjB,KAAA,IAAI,EAAE,IAAI,CAAC,SAAS,IAAI;AACxB,KAAA,IAAI,EAAE,OAAO,IAAI,CAAC,SAAS,WAAW,IAAI,CAAC,IAAK,GAAE,EAAE;AACrD,KAAC,CAAC,CAAA;GACH;;AAED;AACC;AACA;;;;AAID,EAAA,YAAY,GAAG;GACd,OAAO,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAA;GAC1D;;AAED;AACC;AACA;;;;AAID,EAAA,aAAa,GAAG;AACf,GAAA,OAAOA,SAAC,CAAC,eAAe,EAAE,WAAW,CAAA;GACrC;EACD;AACF;;;;"}
+{"version":3,"file":"CnNextStepCard.vue2.js","sources":["../../../../src/components/CnNextStepCard/CnNextStepCard.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<section\n\t\tv-if=\"normalisedItems.length > 0\"\n\t\tclass=\"cn-next-step-card\"\n\t\tdata-testid=\"cn-next-step-card\"\n\t\t:aria-labelledby=\"title ? titleId : null\"\n\t\t:aria-label=\"title ? null : fallbackLabel\">\n\t\t<div class=\"cn-next-step-card__main\">\n\t\t\t<component\n\t\t\t\t:is=\"titleTag\"\n\t\t\t\tv-if=\"title\"\n\t\t\t\t:id=\"titleId\"\n\t\t\t\tclass=\"cn-next-step-card__title\">\n\t\t\t\t{{ title }}\n\t\t\t</component>\n\t\t\t<ul class=\"cn-next-step-card__list\">\n\t\t\t\t<li\n\t\t\t\t\tv-for=\"(item, index) in normalisedItems\"\n\t\t\t\t\t:key=\"`${index}-${item.label}`\"\n\t\t\t\t\tclass=\"cn-next-step-card__item\"\n\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t'cn-next-step-card__item--done': item.done,\n\t\t\t\t\t\t'cn-next-step-card__item--current': index === currentIndex,\n\t\t\t\t\t}\"\n\t\t\t\t\tdata-testid=\"cn-next-step-item\">\n\t\t\t\t\t<span class=\"cn-next-step-card__marker\" aria-hidden=\"true\">\n\t\t\t\t\t\t<Check v-if=\"item.done\" :size=\"14\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t<span class=\"cn-next-step-card__label\">{{ item.label }}</span>\n\t\t\t\t\t<span v-if=\"item.hint\" class=\"cn-next-step-card__hint\">{{ item.hint }}</span>\n\t\t\t\t\t<!-- The state in words. The marker is a shape and a colour, and\n\t\t\t\t\t     neither reaches a screen reader or a reader who cannot tell\n\t\t\t\t\t     the two colours apart. -->\n\t\t\t\t\t<span class=\"cn-next-step-card__state\">{{ item.done ? doneLabel : todoLabel }}</span>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</div>\n\t\t<div v-if=\"actionLabel || $slots.action || after\" class=\"cn-next-step-card__side\">\n\t\t\t<!-- @slot action Replace the primary button, for a host that renders its own control. -->\n\t\t\t<slot name=\"action\">\n\t\t\t\t<NcButton\n\t\t\t\t\tv-if=\"actionLabel\"\n\t\t\t\t\t:id=\"actionId || null\"\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t:disabled=\"actionDisabled\"\n\t\t\t\t\tdata-testid=\"cn-next-step-action\"\n\t\t\t\t\t@click=\"$emit('action')\">\n\t\t\t\t\t{{ actionLabel }}\n\t\t\t\t</NcButton>\n\t\t\t</slot>\n\t\t\t<span v-if=\"after\" class=\"cn-next-step-card__after\">{{ after }}</span>\n\t\t</div>\n\t</section>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcButton } from '@nextcloud/vue'\nimport Check from 'vue-material-design-icons/Check.vue'\n\nlet nextStepCardUid = 0\n\n/**\n * CnNextStepCard: what this record needs now, next to the button that does it.\n *\n * A short checklist for the current step and one primary action. It answers\n * \"what do I do next?\" on a record whose menu would otherwise make the handler\n * guess. Renders nothing when there is no checklist, so a step that needs no\n * explaining shows no empty card.\n *\n * ```vue\n * <CnNextStepCard\n *   title=\"What now? Step 2: handling\"\n *   :items=\"[\n *     { label: 'Receipt confirmed', done: true },\n *     { label: 'Review the open documents', hint: '2 of 5 done' },\n *     { label: 'Draft the decision' },\n *   ]\"\n *   action-label=\"Continue reviewing\"\n *   after=\"Then: step 3, decision\"\n *   @action=\"onContinue\" />\n * ```\n *\n * CnDetailPage renders this card from its `nextStep` config, and the\n * `next-step` detail widget type renders it inside a grid.\n */\nexport default {\n\tname: 'CnNextStepCard',\n\n\tcomponents: {\n\t\tCheck,\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/** Heading of the card, for example \"What now? Step 2: handling\". */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Element the heading renders as. Pick the level that fits the page outline. */\n\t\ttitleTag: {\n\t\t\ttype: String,\n\t\t\tdefault: 'h3',\n\t\t},\n\n\t\t/**\n\t\t * The checklist: `{ label, done?, hint? }` per item. The first item\n\t\t * that is not done is emphasised as the one to pick up now.\n\t\t */\n\t\titems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/** Label of the primary button. Empty renders no button. */\n\t\tactionLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** DOM id for the primary button, so a skip link can land on it. */\n\t\tactionId: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Disable the primary button, for example while its request is in flight. */\n\t\tactionDisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** One line under the button saying what follows, for example \"Then: step 3, decision\". */\n\t\tafter: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Text state of a done item, read by screen readers. */\n\t\tdoneLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Done'),\n\t\t},\n\n\t\t/** Text state of an open item, read by screen readers. */\n\t\ttodoLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'To do'),\n\t\t},\n\t},\n\n\temits: [\n\t\t/** The primary button was pressed. */\n\t\t'action',\n\t],\n\n\tdata() {\n\t\tnextStepCardUid += 1\n\t\treturn {\n\t\t\ttitleId: `cn-next-step-title-${nextStepCardUid}`,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * The items that can render: an object with a label.\n\t\t *\n\t\t * @return {Array<{label: string, done: boolean, hint: string}>} The checklist.\n\t\t * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card\n\t\t */\n\t\tnormalisedItems() {\n\t\t\treturn (Array.isArray(this.items) ? this.items : [])\n\t\t\t\t.filter((item) => item && typeof item.label === 'string' && item.label !== '')\n\t\t\t\t.map((item) => ({\n\t\t\t\t\tlabel: item.label,\n\t\t\t\t\tdone: item.done === true,\n\t\t\t\t\thint: typeof item.hint === 'string' ? item.hint : '',\n\t\t\t\t}))\n\t\t},\n\n\t\t/**\n\t\t * Index of the first open item, the one to pick up now.\n\t\t *\n\t\t * @return {number} The index, or -1 when everything is done.\n\t\t * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card\n\t\t */\n\t\tcurrentIndex() {\n\t\t\treturn this.normalisedItems.findIndex((item) => !item.done)\n\t\t},\n\n\t\t/**\n\t\t * Accessible name for a card without a title.\n\t\t *\n\t\t * @return {string} The label.\n\t\t * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card\n\t\t */\n\t\tfallbackLabel() {\n\t\t\treturn t('nextcloud-vue', 'Next step')\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-next-step-card {\n\talign-items: center;\n\tbackground: var(--color-main-background);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--border-radius-large);\n\t/* The edge says \"this is the thing to act on\". An inset shadow, so it\n\t   follows the card's rounded corners instead of squaring them off. */\n\tbox-shadow: inset 4px 0 0 var(--color-primary-element);\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: calc(4 * var(--default-grid-baseline)) calc(8 * var(--default-grid-baseline));\n\tpadding: calc(5 * var(--default-grid-baseline)) calc(6 * var(--default-grid-baseline));\n\tpadding-inline-start: calc(7 * var(--default-grid-baseline));\n}\n\n.cn-next-step-card__main {\n\tdisplay: flex;\n\tflex: 1 1 420px;\n\tflex-direction: column;\n\tgap: calc(2.5 * var(--default-grid-baseline));\n\tmin-width: 0;\n}\n\n.cn-next-step-card__title {\n\tcolor: var(--color-main-text);\n\tfont-size: 0.85em;\n\tfont-weight: 700;\n\tletter-spacing: 0.06em;\n\tmargin: 0;\n\ttext-transform: uppercase;\n}\n\n/* The title is a small kicker, not a section heading, but it is an <h3> (or\n   whatever `titleTag` says) for the outline, and a theme that sizes every\n   heading with !important (thematiq's nldesign sheet: `h3 { font-size:\n   var(--nldesign-component-heading-3-font-size) !important }`) blew it up to\n   an 18px uppercase heading. Only !important beats !important; the doubled\n   class makes this the more specific rule. Without such a theme the size is\n   the 0.85em above, unchanged. */\n.cn-next-step-card__title.cn-next-step-card__title {\n\tfont-size: 0.85em !important;\n}\n\n.cn-next-step-card__list {\n\tdisplay: grid;\n\tgap: calc(2 * var(--default-grid-baseline));\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n\n.cn-next-step-card__item {\n\talign-items: center;\n\tcolor: var(--color-text-maxcontrast);\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: calc(2.5 * var(--default-grid-baseline));\n}\n\n.cn-next-step-card__item--current {\n\tcolor: var(--color-main-text);\n}\n\n.cn-next-step-card__item--current .cn-next-step-card__label {\n\tfont-weight: 700;\n}\n\n.cn-next-step-card__marker {\n\talign-items: center;\n\tborder: 2px solid var(--color-border-maxcontrast);\n\tborder-radius: 50%;\n\tbox-sizing: border-box;\n\tdisplay: inline-flex;\n\tflex: none;\n\theight: 20px;\n\tjustify-content: center;\n\twidth: 20px;\n}\n\n.cn-next-step-card__item--current .cn-next-step-card__marker {\n\tborder-color: var(--color-primary-element);\n}\n\n.cn-next-step-card__item--done .cn-next-step-card__marker {\n\tbackground: var(--color-primary-element);\n\tborder-color: var(--color-primary-element);\n\tcolor: var(--color-primary-element-text);\n}\n\n.cn-next-step-card__hint {\n\tcolor: var(--color-text-maxcontrast);\n\tfont-weight: 400;\n}\n\n/* Read, not seen. */\n.cn-next-step-card__state {\n\tborder: 0;\n\tclip-path: inset(50%);\n\theight: 1px;\n\tmargin: -1px;\n\toverflow: hidden;\n\tpadding: 0;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n.cn-next-step-card__side {\n\talign-items: flex-start;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(2 * var(--default-grid-baseline));\n}\n\n.cn-next-step-card__after {\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 0.9em;\n}\n</style>\n"],"names":["t"],"mappings":";;;;AAiEA,IAAI,kBAAkB,EAAA;;AAEtB;AACC;AACA;;AAEA;;;AAGA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;;;AAGA;AACA;;;;AAID,aAAe;AACd,CAAA,IAAI,EAAE,gBAAgB;;CAEtB,UAAU,EAAE;EACX,KAAK;AACL,EAAA,QAAQ;EACR;;AAED,CAAA,KAAK,EAAE;;AAEN,EAAA,KAAK,EAAE;GACN,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,EAAE;GACX;;AAED;AACA,EAAA,QAAQ,EAAE;GACT,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,IAAI;GACb;;AAED;;AAEC;;AAED,EAAA,KAAK,EAAE;GACN,IAAI,EAAE,KAAK;AACX,GAAA,OAAO,EAAE,MAAM,EAAE;GACjB;;;EAGD,WAAW,EAAE;GACZ,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,EAAE;GACX;;;AAGD,EAAA,QAAQ,EAAE;GACT,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,EAAE;GACX;;AAED;AACA,EAAA,cAAc,EAAE;GACf,IAAI,EAAE,OAAO;GACb,OAAO,EAAE,KAAK;GACd;;AAED;AACA,EAAA,KAAK,EAAE;GACN,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,EAAE;GACX;;AAED;EACA,SAAS,EAAE;GACV,IAAI,EAAE,MAAM;AACZ,GAAA,OAAO,EAAE,MAAMA,SAAC,CAAC,eAAe,EAAE,MAAM,CAAC;GACzC;;;EAGD,SAAS,EAAE;GACV,IAAI,EAAE,MAAM;AACZ,GAAA,OAAO,EAAE,MAAMA,SAAC,CAAC,eAAe,EAAE,OAAO,CAAC;GAC1C;EACD;;AAED,CAAA,KAAK,EAAE;AACN;AACA,EAAA,QAAQ;EACR;;AAED,CAAA,IAAI,GAAG;AACN,EAAA,eAAc,IAAK,EAAA;AACnB,EAAA,OAAO;GACN,OAAO,EAAE,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;AACjD,GAAA;EACA;;AAED,CAAA,QAAQ,EAAE;AACT;AACC;AACA;AACA;;;AAGD,EAAA,eAAe,GAAG;GACjB,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,GAAI,IAAI,CAAC,KAAM,GAAE,EAAE;AAClD,KAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAG,IAAK,OAAO,IAAI,CAAC,KAAM,KAAI,QAAS,IAAG,IAAI,CAAC,KAAM,KAAI,EAAE,CAAA;AAC7E,KAAC,GAAG,CAAC,CAAC,IAAI,MAAM;AACf,KAAA,KAAK,EAAE,IAAI,CAAC,KAAK;AACjB,KAAA,IAAI,EAAE,IAAI,CAAC,SAAS,IAAI;AACxB,KAAA,IAAI,EAAE,OAAO,IAAI,CAAC,SAAS,WAAW,IAAI,CAAC,IAAK,GAAE,EAAE;AACrD,KAAC,CAAC,CAAA;GACH;;AAED;AACC;AACA;;;;AAID,EAAA,YAAY,GAAG;GACd,OAAO,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAA;GAC1D;;AAED;AACC;AACA;;;;AAID,EAAA,aAAa,GAAG;AACf,GAAA,OAAOA,SAAC,CAAC,eAAe,EAAE,WAAW,CAAA;GACrC;EACD;AACF;;;;"}

package/dist/esm/components/CnNextStepCard/CnNextStepCard.vue3.js.map

@@ -1 +1 @@
-{"version":3,"file":"CnNextStepCard.vue3.js","sources":["../../../../src/components/CnNextStepCard/CnNextStepCard.vue?vue&type=template&id=3a9ce962&lang.js"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<section\n\t\tv-if=\"normalisedItems.length > 0\"\n\t\tclass=\"cn-next-step-card\"\n\t\tdata-testid=\"cn-next-step-card\"\n\t\t:aria-labelledby=\"title ? titleId : null\"\n\t\t:aria-label=\"title ? null : fallbackLabel\">\n\t\t<div class=\"cn-next-step-card__main\">\n\t\t\t<component\n\t\t\t\t:is=\"titleTag\"\n\t\t\t\tv-if=\"title\"\n\t\t\t\t:id=\"titleId\"\n\t\t\t\tclass=\"cn-next-step-card__title\">\n\t\t\t\t{{ title }}\n\t\t\t</component>\n\t\t\t<ul class=\"cn-next-step-card__list\">\n\t\t\t\t<li\n\t\t\t\t\tv-for=\"(item, index) in normalisedItems\"\n\t\t\t\t\t:key=\"`${index}-${item.label}`\"\n\t\t\t\t\tclass=\"cn-next-step-card__item\"\n\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t'cn-next-step-card__item--done': item.done,\n\t\t\t\t\t\t'cn-next-step-card__item--current': index === currentIndex,\n\t\t\t\t\t}\"\n\t\t\t\t\tdata-testid=\"cn-next-step-item\">\n\t\t\t\t\t<span class=\"cn-next-step-card__marker\" aria-hidden=\"true\">\n\t\t\t\t\t\t<Check v-if=\"item.done\" :size=\"14\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t<span class=\"cn-next-step-card__label\">{{ item.label }}</span>\n\t\t\t\t\t<span v-if=\"item.hint\" class=\"cn-next-step-card__hint\">{{ item.hint }}</span>\n\t\t\t\t\t<!-- The state in words. The marker is a shape and a colour, and\n\t\t\t\t\t     neither reaches a screen reader or a reader who cannot tell\n\t\t\t\t\t     the two colours apart. -->\n\t\t\t\t\t<span class=\"cn-next-step-card__state\">{{ item.done ? doneLabel : todoLabel }}</span>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</div>\n\t\t<div v-if=\"actionLabel || $slots.action || after\" class=\"cn-next-step-card__side\">\n\t\t\t<!-- @slot action Replace the primary button, for a host that renders its own control. -->\n\t\t\t<slot name=\"action\">\n\t\t\t\t<NcButton\n\t\t\t\t\tv-if=\"actionLabel\"\n\t\t\t\t\t:id=\"actionId || null\"\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t:disabled=\"actionDisabled\"\n\t\t\t\t\tdata-testid=\"cn-next-step-action\"\n\t\t\t\t\t@click=\"$emit('action')\">\n\t\t\t\t\t{{ actionLabel }}\n\t\t\t\t</NcButton>\n\t\t\t</slot>\n\t\t\t<span v-if=\"after\" class=\"cn-next-step-card__after\">{{ after }}</span>\n\t\t</div>\n\t</section>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcButton } from '@nextcloud/vue'\nimport Check from 'vue-material-design-icons/Check.vue'\n\nlet nextStepCardUid = 0\n\n/**\n * CnNextStepCard: what this record needs now, next to the button that does it.\n *\n * A short checklist for the current step and one primary action. It answers\n * \"what do I do next?\" on a record whose menu would otherwise make the handler\n * guess. Renders nothing when there is no checklist, so a step that needs no\n * explaining shows no empty card.\n *\n * ```vue\n * <CnNextStepCard\n *   title=\"What now? Step 2: handling\"\n *   :items=\"[\n *     { label: 'Receipt confirmed', done: true },\n *     { label: 'Review the open documents', hint: '2 of 5 done' },\n *     { label: 'Draft the decision' },\n *   ]\"\n *   action-label=\"Continue reviewing\"\n *   after=\"Then: step 3, decision\"\n *   @action=\"onContinue\" />\n * ```\n *\n * CnDetailPage renders this card from its `nextStep` config, and the\n * `next-step` detail widget type renders it inside a grid.\n */\nexport default {\n\tname: 'CnNextStepCard',\n\n\tcomponents: {\n\t\tCheck,\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/** Heading of the card, for example \"What now? Step 2: handling\". */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Element the heading renders as. Pick the level that fits the page outline. */\n\t\ttitleTag: {\n\t\t\ttype: String,\n\t\t\tdefault: 'h3',\n\t\t},\n\n\t\t/**\n\t\t * The checklist: `{ label, done?, hint? }` per item. The first item\n\t\t * that is not done is emphasised as the one to pick up now.\n\t\t */\n\t\titems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/** Label of the primary button. Empty renders no button. */\n\t\tactionLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** DOM id for the primary button, so a skip link can land on it. */\n\t\tactionId: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Disable the primary button, for example while its request is in flight. */\n\t\tactionDisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** One line under the button saying what follows, for example \"Then: step 3, decision\". */\n\t\tafter: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Text state of a done item, read by screen readers. */\n\t\tdoneLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Done'),\n\t\t},\n\n\t\t/** Text state of an open item, read by screen readers. */\n\t\ttodoLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'To do'),\n\t\t},\n\t},\n\n\temits: [\n\t\t/** The primary button was pressed. */\n\t\t'action',\n\t],\n\n\tdata() {\n\t\tnextStepCardUid += 1\n\t\treturn {\n\t\t\ttitleId: `cn-next-step-title-${nextStepCardUid}`,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * The items that can render: an object with a label.\n\t\t *\n\t\t * @return {Array<{label: string, done: boolean, hint: string}>} The checklist.\n\t\t * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card\n\t\t */\n\t\tnormalisedItems() {\n\t\t\treturn (Array.isArray(this.items) ? this.items : [])\n\t\t\t\t.filter((item) => item && typeof item.label === 'string' && item.label !== '')\n\t\t\t\t.map((item) => ({\n\t\t\t\t\tlabel: item.label,\n\t\t\t\t\tdone: item.done === true,\n\t\t\t\t\thint: typeof item.hint === 'string' ? item.hint : '',\n\t\t\t\t}))\n\t\t},\n\n\t\t/**\n\t\t * Index of the first open item, the one to pick up now.\n\t\t *\n\t\t * @return {number} The index, or -1 when everything is done.\n\t\t * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card\n\t\t */\n\t\tcurrentIndex() {\n\t\t\treturn this.normalisedItems.findIndex((item) => !item.done)\n\t\t},\n\n\t\t/**\n\t\t * Accessible name for a card without a title.\n\t\t *\n\t\t * @return {string} The label.\n\t\t * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card\n\t\t */\n\t\tfallbackLabel() {\n\t\t\treturn t('nextcloud-vue', 'Next step')\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-next-step-card {\n\talign-items: center;\n\tbackground: var(--color-main-background);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--border-radius-large);\n\t/* The edge says \"this is the thing to act on\". An inset shadow, so it\n\t   follows the card's rounded corners instead of squaring them off. */\n\tbox-shadow: inset 4px 0 0 var(--color-primary-element);\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: calc(4 * var(--default-grid-baseline)) calc(8 * var(--default-grid-baseline));\n\tpadding: calc(5 * var(--default-grid-baseline)) calc(6 * var(--default-grid-baseline));\n\tpadding-inline-start: calc(7 * var(--default-grid-baseline));\n}\n\n.cn-next-step-card__main {\n\tdisplay: flex;\n\tflex: 1 1 420px;\n\tflex-direction: column;\n\tgap: calc(2.5 * var(--default-grid-baseline));\n\tmin-width: 0;\n}\n\n.cn-next-step-card__title {\n\tcolor: var(--color-main-text);\n\tfont-size: 0.85em;\n\tfont-weight: 700;\n\tletter-spacing: 0.06em;\n\tmargin: 0;\n\ttext-transform: uppercase;\n}\n\n.cn-next-step-card__list {\n\tdisplay: grid;\n\tgap: calc(2 * var(--default-grid-baseline));\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n\n.cn-next-step-card__item {\n\talign-items: center;\n\tcolor: var(--color-text-maxcontrast);\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: calc(2.5 * var(--default-grid-baseline));\n}\n\n.cn-next-step-card__item--current {\n\tcolor: var(--color-main-text);\n}\n\n.cn-next-step-card__item--current .cn-next-step-card__label {\n\tfont-weight: 700;\n}\n\n.cn-next-step-card__marker {\n\talign-items: center;\n\tborder: 2px solid var(--color-border-maxcontrast);\n\tborder-radius: 50%;\n\tbox-sizing: border-box;\n\tdisplay: inline-flex;\n\tflex: none;\n\theight: 20px;\n\tjustify-content: center;\n\twidth: 20px;\n}\n\n.cn-next-step-card__item--current .cn-next-step-card__marker {\n\tborder-color: var(--color-primary-element);\n}\n\n.cn-next-step-card__item--done .cn-next-step-card__marker {\n\tbackground: var(--color-primary-element);\n\tborder-color: var(--color-primary-element);\n\tcolor: var(--color-primary-element-text);\n}\n\n.cn-next-step-card__hint {\n\tcolor: var(--color-text-maxcontrast);\n\tfont-weight: 400;\n}\n\n/* Read, not seen. */\n.cn-next-step-card__state {\n\tborder: 0;\n\tclip-path: inset(50%);\n\theight: 1px;\n\tmargin: -1px;\n\toverflow: hidden;\n\tpadding: 0;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n.cn-next-step-card__side {\n\talign-items: flex-start;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(2 * var(--default-grid-baseline));\n}\n\n.cn-next-step-card__after {\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 0.9em;\n}\n</style>\n"],"names":["_createElementBlock","_createElementVNode","_openBlock","_createBlock","_resolveDynamicComponent","_Fragment","_renderList","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"CnNextStepCard.vue3.js","sources":["../../../../src/components/CnNextStepCard/CnNextStepCard.vue?vue&type=template&id=3a9ce962&lang.js"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<section\n\t\tv-if=\"normalisedItems.length > 0\"\n\t\tclass=\"cn-next-step-card\"\n\t\tdata-testid=\"cn-next-step-card\"\n\t\t:aria-labelledby=\"title ? titleId : null\"\n\t\t:aria-label=\"title ? null : fallbackLabel\">\n\t\t<div class=\"cn-next-step-card__main\">\n\t\t\t<component\n\t\t\t\t:is=\"titleTag\"\n\t\t\t\tv-if=\"title\"\n\t\t\t\t:id=\"titleId\"\n\t\t\t\tclass=\"cn-next-step-card__title\">\n\t\t\t\t{{ title }}\n\t\t\t</component>\n\t\t\t<ul class=\"cn-next-step-card__list\">\n\t\t\t\t<li\n\t\t\t\t\tv-for=\"(item, index) in normalisedItems\"\n\t\t\t\t\t:key=\"`${index}-${item.label}`\"\n\t\t\t\t\tclass=\"cn-next-step-card__item\"\n\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t'cn-next-step-card__item--done': item.done,\n\t\t\t\t\t\t'cn-next-step-card__item--current': index === currentIndex,\n\t\t\t\t\t}\"\n\t\t\t\t\tdata-testid=\"cn-next-step-item\">\n\t\t\t\t\t<span class=\"cn-next-step-card__marker\" aria-hidden=\"true\">\n\t\t\t\t\t\t<Check v-if=\"item.done\" :size=\"14\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t<span class=\"cn-next-step-card__label\">{{ item.label }}</span>\n\t\t\t\t\t<span v-if=\"item.hint\" class=\"cn-next-step-card__hint\">{{ item.hint }}</span>\n\t\t\t\t\t<!-- The state in words. The marker is a shape and a colour, and\n\t\t\t\t\t     neither reaches a screen reader or a reader who cannot tell\n\t\t\t\t\t     the two colours apart. -->\n\t\t\t\t\t<span class=\"cn-next-step-card__state\">{{ item.done ? doneLabel : todoLabel }}</span>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</div>\n\t\t<div v-if=\"actionLabel || $slots.action || after\" class=\"cn-next-step-card__side\">\n\t\t\t<!-- @slot action Replace the primary button, for a host that renders its own control. -->\n\t\t\t<slot name=\"action\">\n\t\t\t\t<NcButton\n\t\t\t\t\tv-if=\"actionLabel\"\n\t\t\t\t\t:id=\"actionId || null\"\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t:disabled=\"actionDisabled\"\n\t\t\t\t\tdata-testid=\"cn-next-step-action\"\n\t\t\t\t\t@click=\"$emit('action')\">\n\t\t\t\t\t{{ actionLabel }}\n\t\t\t\t</NcButton>\n\t\t\t</slot>\n\t\t\t<span v-if=\"after\" class=\"cn-next-step-card__after\">{{ after }}</span>\n\t\t</div>\n\t</section>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcButton } from '@nextcloud/vue'\nimport Check from 'vue-material-design-icons/Check.vue'\n\nlet nextStepCardUid = 0\n\n/**\n * CnNextStepCard: what this record needs now, next to the button that does it.\n *\n * A short checklist for the current step and one primary action. It answers\n * \"what do I do next?\" on a record whose menu would otherwise make the handler\n * guess. Renders nothing when there is no checklist, so a step that needs no\n * explaining shows no empty card.\n *\n * ```vue\n * <CnNextStepCard\n *   title=\"What now? Step 2: handling\"\n *   :items=\"[\n *     { label: 'Receipt confirmed', done: true },\n *     { label: 'Review the open documents', hint: '2 of 5 done' },\n *     { label: 'Draft the decision' },\n *   ]\"\n *   action-label=\"Continue reviewing\"\n *   after=\"Then: step 3, decision\"\n *   @action=\"onContinue\" />\n * ```\n *\n * CnDetailPage renders this card from its `nextStep` config, and the\n * `next-step` detail widget type renders it inside a grid.\n */\nexport default {\n\tname: 'CnNextStepCard',\n\n\tcomponents: {\n\t\tCheck,\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/** Heading of the card, for example \"What now? Step 2: handling\". */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Element the heading renders as. Pick the level that fits the page outline. */\n\t\ttitleTag: {\n\t\t\ttype: String,\n\t\t\tdefault: 'h3',\n\t\t},\n\n\t\t/**\n\t\t * The checklist: `{ label, done?, hint? }` per item. The first item\n\t\t * that is not done is emphasised as the one to pick up now.\n\t\t */\n\t\titems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/** Label of the primary button. Empty renders no button. */\n\t\tactionLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** DOM id for the primary button, so a skip link can land on it. */\n\t\tactionId: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Disable the primary button, for example while its request is in flight. */\n\t\tactionDisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** One line under the button saying what follows, for example \"Then: step 3, decision\". */\n\t\tafter: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Text state of a done item, read by screen readers. */\n\t\tdoneLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Done'),\n\t\t},\n\n\t\t/** Text state of an open item, read by screen readers. */\n\t\ttodoLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'To do'),\n\t\t},\n\t},\n\n\temits: [\n\t\t/** The primary button was pressed. */\n\t\t'action',\n\t],\n\n\tdata() {\n\t\tnextStepCardUid += 1\n\t\treturn {\n\t\t\ttitleId: `cn-next-step-title-${nextStepCardUid}`,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * The items that can render: an object with a label.\n\t\t *\n\t\t * @return {Array<{label: string, done: boolean, hint: string}>} The checklist.\n\t\t * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card\n\t\t */\n\t\tnormalisedItems() {\n\t\t\treturn (Array.isArray(this.items) ? this.items : [])\n\t\t\t\t.filter((item) => item && typeof item.label === 'string' && item.label !== '')\n\t\t\t\t.map((item) => ({\n\t\t\t\t\tlabel: item.label,\n\t\t\t\t\tdone: item.done === true,\n\t\t\t\t\thint: typeof item.hint === 'string' ? item.hint : '',\n\t\t\t\t}))\n\t\t},\n\n\t\t/**\n\t\t * Index of the first open item, the one to pick up now.\n\t\t *\n\t\t * @return {number} The index, or -1 when everything is done.\n\t\t * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card\n\t\t */\n\t\tcurrentIndex() {\n\t\t\treturn this.normalisedItems.findIndex((item) => !item.done)\n\t\t},\n\n\t\t/**\n\t\t * Accessible name for a card without a title.\n\t\t *\n\t\t * @return {string} The label.\n\t\t * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card\n\t\t */\n\t\tfallbackLabel() {\n\t\t\treturn t('nextcloud-vue', 'Next step')\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-next-step-card {\n\talign-items: center;\n\tbackground: var(--color-main-background);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--border-radius-large);\n\t/* The edge says \"this is the thing to act on\". An inset shadow, so it\n\t   follows the card's rounded corners instead of squaring them off. */\n\tbox-shadow: inset 4px 0 0 var(--color-primary-element);\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: calc(4 * var(--default-grid-baseline)) calc(8 * var(--default-grid-baseline));\n\tpadding: calc(5 * var(--default-grid-baseline)) calc(6 * var(--default-grid-baseline));\n\tpadding-inline-start: calc(7 * var(--default-grid-baseline));\n}\n\n.cn-next-step-card__main {\n\tdisplay: flex;\n\tflex: 1 1 420px;\n\tflex-direction: column;\n\tgap: calc(2.5 * var(--default-grid-baseline));\n\tmin-width: 0;\n}\n\n.cn-next-step-card__title {\n\tcolor: var(--color-main-text);\n\tfont-size: 0.85em;\n\tfont-weight: 700;\n\tletter-spacing: 0.06em;\n\tmargin: 0;\n\ttext-transform: uppercase;\n}\n\n/* The title is a small kicker, not a section heading, but it is an <h3> (or\n   whatever `titleTag` says) for the outline, and a theme that sizes every\n   heading with !important (thematiq's nldesign sheet: `h3 { font-size:\n   var(--nldesign-component-heading-3-font-size) !important }`) blew it up to\n   an 18px uppercase heading. Only !important beats !important; the doubled\n   class makes this the more specific rule. Without such a theme the size is\n   the 0.85em above, unchanged. */\n.cn-next-step-card__title.cn-next-step-card__title {\n\tfont-size: 0.85em !important;\n}\n\n.cn-next-step-card__list {\n\tdisplay: grid;\n\tgap: calc(2 * var(--default-grid-baseline));\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n\n.cn-next-step-card__item {\n\talign-items: center;\n\tcolor: var(--color-text-maxcontrast);\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: calc(2.5 * var(--default-grid-baseline));\n}\n\n.cn-next-step-card__item--current {\n\tcolor: var(--color-main-text);\n}\n\n.cn-next-step-card__item--current .cn-next-step-card__label {\n\tfont-weight: 700;\n}\n\n.cn-next-step-card__marker {\n\talign-items: center;\n\tborder: 2px solid var(--color-border-maxcontrast);\n\tborder-radius: 50%;\n\tbox-sizing: border-box;\n\tdisplay: inline-flex;\n\tflex: none;\n\theight: 20px;\n\tjustify-content: center;\n\twidth: 20px;\n}\n\n.cn-next-step-card__item--current .cn-next-step-card__marker {\n\tborder-color: var(--color-primary-element);\n}\n\n.cn-next-step-card__item--done .cn-next-step-card__marker {\n\tbackground: var(--color-primary-element);\n\tborder-color: var(--color-primary-element);\n\tcolor: var(--color-primary-element-text);\n}\n\n.cn-next-step-card__hint {\n\tcolor: var(--color-text-maxcontrast);\n\tfont-weight: 400;\n}\n\n/* Read, not seen. */\n.cn-next-step-card__state {\n\tborder: 0;\n\tclip-path: inset(50%);\n\theight: 1px;\n\tmargin: -1px;\n\toverflow: hidden;\n\tpadding: 0;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n.cn-next-step-card__side {\n\talign-items: flex-start;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(2 * var(--default-grid-baseline));\n}\n\n.cn-next-step-card__after {\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 0.9em;\n}\n</style>\n"],"names":["_createElementBlock","_createElementVNode","_openBlock","_createBlock","_resolveDynamicComponent","_Fragment","_renderList","_toDisplayString"],"mappings":"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"}

package/dist/esm/components/CnObjectListWidget/CnObjectListWidget.vue2.js

@@ -328,7 +328,10 @@ var script = {
 					return { key: c, label: headingFor(c) }
 				}
 				const out = { key: c.key, label: c.label || headingFor(c.key) };
-				for (const k of ['format', 'widget', 'widgetProps', 'formatter', 'align', 'width', 'type', 'enum', 'enumLabels', 'sortable']) {
+				// `secondary` (a second, muted line under the cell) rides
+				// along too: the table draws it, and dropping it here took the
+				// list rows' second line away (zuiddrecht-pixel-gaps-3).
+				for (const k of ['format', 'widget', 'widgetProps', 'formatter', 'align', 'width', 'type', 'enum', 'enumLabels', 'sortable', 'secondary']) {
 					if (c[k] !== undefined) {
 						out[k] = c[k];
 					}