@nldd/design-system 0.8.94 → 0.8.95

package/dist/types/vue.d.ts

@@ -2724,22 +2724,21 @@ declare module 'vue' {
 	};
 
 	type NLDDStepIndicatorProps = {
+		'current'?: NLDDStepIndicator['current'];
 		/** Name of the nav; defaults to the i18n value ("Voortgang") */
 		'accessible-label'?: NLDDStepIndicator['accessibleLabel'];
 		/** Name of the nav; defaults to the i18n value ("Voortgang") */
 		'accessibleLabel'?: NLDDStepIndicator['accessibleLabel'];
-		/** 1-based number of the current step (default 1) */
-		'current'?: NLDDStepIndicator['current'];
 		/** Override translation keys; unset keys fall back to Dutch */
 		'translations'?: NLDDStepIndicator['translations'];
 		'total'?: NLDDStepIndicator['total'];
-		/** The current step, clamped to the number of steps: an out-of-range `current` would otherwise mark every step past (or none at all). */
+		/** 1-based position of the last item with `status="current"`, or 1 when none has it. */
 		'resolvedCurrent'?: NLDDStepIndicator['resolvedCurrent'];
 		'currentItem'?: NLDDStepIndicator['currentItem'];
 	};
 
 	type NLDDStepIndicatorItemProps = {
-		/** `past` | `current` | `future`; overrides what the parent derives */
+		/** How far along this step is. `current` marks the step you are on (`aria-current="step"`) and the parent derives the others from it: with none marked step 1 is current, with more than one the last wins. `past` and `future` override what is derived for this step only */
 		'status'?: NLDDStepIndicatorItem['status'];
 		/** Label under the disc */
 		'text'?: NLDDStepIndicatorItem['text'];
@@ -2749,7 +2748,7 @@ declare module 'vue' {
 		'href'?: NLDDStepIndicatorItem['href'];
 		/** For flows without a URL per step (a wizard inside one window). Ignored once `href` is set: one step is one action, and a link outranks a button -- the same rule as nldd-card and nldd-avatar. */
 		'button'?: NLDDStepIndicatorItem['button'];
-		/** The status that counts: the item's own wins over the derived one. */
+		/** The status that counts. An own `past` or `future` wins over the derived one. An own `current` is what the parent derives from, so the derived status already says it, and on a step that lost to a later one it does not hold. */
 		'resolvedStatus'?: NLDDStepIndicatorItem['resolvedStatus'];
 	};
 
@@ -3197,7 +3196,7 @@ declare module 'vue' {
 		'size'?: NLDDTimelineTrackCell['size'];
 		/** The direction the timeline moves forward in: `down` (default) puts the past above, `up` below. Only the current step has half a track, so this only has an effect there */
 		'direction'?: NLDDTimelineTrackCell['direction'];
-		/** Place in the series (default 'between'): decides whether the line continues above the dot, below it, or on both sides. `only` is the single row in the series and gets a line on neither side: a track of one dot leads nowhere. On a `level="none"` row, which is nothing but line, `only` leaves it out altogether: the track ends above it */
+		/** Place of the row in the list as it stands on screen (default 'between'): decides whether the line continues above the dot, below it, or on both sides. `first` is the top row and only has a line below, `last` the bottom row and only has a line above, also with `direction="up"`: position is about where the row stands, `direction` about which way time runs. `only` is the single row in the series and gets a line on neither side: a track of one dot leads nowhere. On a `level="none"` row, which is nothing but line, `only` leaves it out altogether: the track ends above it */
 		'position'?: NLDDTimelineTrackCell['position'];
 		/** Which halves of the track you have covered, when `status` and `direction` get it wrong (default 'auto', which is what those two say). The halves you name are drawn as covered and the other one as still ahead, so `none` covers neither. Which halves are drawn at all stays with `position`, except that naming a half draws it: `line="both"` on a `first` row draws one above too. A row that opens a group of its own is the case for `both`, since the going carries on below it. A `level="none"` row has one line rather than two halves, and no point where a fill could change over, so there the status colors the whole of it and `line` overrules the whole of it. On a `current` row that leans the way the timeline runs: what belongs to a point usually comes after it, so going `down` the stretch reads as still ahead and going `up` as behind you */
 		'line'?: NLDDTimelineTrackCell['line'];
@@ -3466,9 +3465,9 @@ declare module 'vue' {
 	type NLDDToolbarTitleProps = {
 		/** Preferred (fluid) width as a CSS length or percentage; the title grows toward it and shrinks to min-width. */
 		'width'?: NLDDToolbarTitle['width'];
-		/** Minimum width as a CSS length (default: '0', so the title shrink-wraps its content and the next element sits against it). */
+		/** Minimum width as a CSS length (default: the width of its own text, up to `max-width`). Items move into the overflow menu before the title gets narrower than this; only when no item is left to move does the title truncate below it. Set `0` to let the title shrink first. */
 		'min-width'?: NLDDToolbarTitle['minWidth'];
-		/** Minimum width as a CSS length (default: '0', so the title shrink-wraps its content and the next element sits against it). */
+		/** Minimum width as a CSS length (default: the width of its own text, up to `max-width`). Items move into the overflow menu before the title gets narrower than this; only when no item is left to move does the title truncate below it. Set `0` to let the title shrink first. */
 		'minWidth'?: NLDDToolbarTitle['minWidth'];
 		/** Maximum width as a CSS length (default: '240px'); the title text truncates with an ellipsis beyond it. The cap is lifted while the title is the sole toolbar element (it then stretches to fill the row). */
 		'max-width'?: NLDDToolbarTitle['maxWidth'];
@@ -3871,9 +3870,9 @@ declare module 'vue' {
 		'nldd-stacked-split-view': DefineComponent<NLDDStackedSplitViewProps>;
 		/** A narrow, page-wide status bar (24px) with a deep background color per variant. Use it for persistent system state: an outage, planned maintenance, a draft view or a recording in progress. The bar deliberately shows no icon and supports text only. The text itself has to name the status ("Storing: …", "Gepland onderhoud …"), so the meaning does not follow from color alone (WCAG 1.4.1). Keep the text short: the bar shows one line and truncates with an ellipsis, certainly on narrower screens. For a long message with a lot of information only the essence belongs in the bar. Point to a separate page or sheet for the rest (through `href` or `button`, for instance), where the user can read on. The whole bar can be clickable: set `href` (renders an `<a>`) or `button` (renders a `<button>`; listen for the native `click` event). Without either the bar is static. On interaction a chevron appears as an affordance. One action per bar at most; several actions, or links in running text, belong in nldd-banner. role and aria-live are set automatically from the variant: - critical → role="alert" (implies aria-live="assertive"; interrupts the screen reader) - others → role="status" aria-live="polite" Not overridable. If you need a quieter component, pick a different one. Use `critical` only for a real emergency: role="alert" interrupts the screen reader on every change of the content, so do not put text in it that changes regularly (a counting-down timer, for example). */
 		'nldd-status-bar': DefineComponent<NLDDStatusBarProps>;
-		/** Shows where you are in a process of several steps: a row of discs with a number (or a check mark on what is done), a label under each and a line connecting them. The parent holds the truth: `current` (1-based) derives the status of every child — `past` before it, `future` after. A child can override that with a `status` of its own, for flows that jump back or skip a step. Horizontal only. For steps under each other, build an `nldd-list` with an `nldd-timeline-track-cell` and an `nldd-title-cell` per row: vertical steps usually carry more than a title, and a list row already does that. Below the sm breakpoint (a container query, so measured on the component itself rather than on the viewport) it folds into one line of text plus a segmented bar. The full list of steps stays in the DOM, only visually hidden, so assistive software hears no less than a wide screen shows. Accessibility: a `nav` with a label, holding a `role="list"` with a `role="listitem"` per step. The current step gets `aria-current="step"`, the only notion WAI-ARIA has for this. "Done" and "still to do" do not exist as ARIA tokens and travel along as visually hidden text instead. */
+		/** Shows where you are in a process of several steps: a row of discs with a number (or a check mark on what is done), a label under each and a line connecting them. Mark the step you are on with `status="current"`. The parent derives the rest from its position: `past` before it, `future` after. With none marked, step 1 is current. With more than one, the last one wins and a warning goes to the console in a dev build: a flow that forgets to clear the previous step still points at the furthest one. A `status="past"` or `status="future"` on another step overrides what is derived for that step, for flows that jump back or skip a step. One attribute, the same three values as `nldd-timeline-track-cell`, so a flow reads in one vocabulary whether it runs across or down. Horizontal only. For steps under each other, build an `nldd-list` with an `nldd-timeline-track-cell` and an `nldd-title-cell` per row: vertical steps usually carry more than a title, and a list row already does that. Below the sm breakpoint (a container query, so measured on the component itself rather than on the viewport) it folds into one line of text plus a segmented bar. The full list of steps stays in the DOM, only visually hidden, so assistive software hears no less than a wide screen shows. Accessibility: a `nav` with a label, holding a `role="list"` with a `role="listitem"` per step. The current step gets `aria-current="step"`, the only notion WAI-ARIA has for this. "Done" and "still to do" do not exist as ARIA tokens and travel along as visually hidden text instead. */
 		'nldd-step-indicator': DefineComponent<NLDDStepIndicatorProps>;
-		/** One step in an `nldd-step-indicator`. The parent decides the status and the number; those live here as internal state rather than as public API, except for `status`, which overrides what `current` derives. */
+		/** One step in an `nldd-step-indicator`. `status="current"` marks the step you are on; the parent derives the status of the others and the number of each, which live here as internal state rather than as public API. `past` and `future` override what is derived for this step. */
 		'nldd-step-indicator-item': DefineComponent<NLDDStepIndicatorItemProps>;
 		/** A numeric control with increment and decrement buttons. */
 		'nldd-stepper': DefineComponent<NLDDStepperProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nldd/design-system",
-  "version": "0.8.94",
+  "version": "0.8.95",
   "description": "Designsysteem voor de Nederlandse Digitale Dienst",
   "type": "module",
   "main": "dist/components/components.js",
@@ -565,8 +565,8 @@
     "@storybook/addon-docs": "^10.6.0",
     "@storybook/addon-themes": "^10.6.0",
     "@storybook/web-components-vite": "^10.6.0",
-    "@vitest/browser-playwright": "5.0.0",
-    "@vitest/coverage-v8": "5.0.0",
+    "@vitest/browser-playwright": "5.0.3",
+    "@vitest/coverage-v8": "5.0.3",
     "axe-core": "^4.13.0",
     "conventional-changelog": "^8.1.0",
     "conventional-changelog-conventionalcommits": "10.2.1",
@@ -579,8 +579,8 @@
     "storybook": "^10.6.0",
     "typescript": "^5.3.0",
     "typescript-eslint": "^8.58.0",
-    "vite": "8.3.0",
-    "vitest": "5.0.0",
+    "vite": "8.3.1",
+    "vitest": "5.0.3",
     "vue": "^3.5.40",
     "vue-tsc": "^3.3.7"
   },