@nldd/design-system 0.8.69 → 0.8.71

package/dist/components/status-and-feedback/step-indicator/step-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-indicator.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/step-indicator/step-indicator.ts"],"names":[],"mappings":"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"}

package/dist/components/status-and-feedback/step-indicator/step-indicator.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const stepIndicatorStyles: import("lit").CSSResult;
+export declare const stepIndicatorItemStyles: import("lit").CSSResult;
+//# sourceMappingURL=step-indicator.styles.d.ts.map

package/dist/components/status-and-feedback/step-indicator/step-indicator.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-indicator.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/step-indicator/step-indicator.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,mBAAmB,yBAqG/B,CAAC;AAEF,eAAO,MAAM,uBAAuB,yBA0LnC,CAAC"}

package/dist/components/status-and-feedback/step-indicator/step-indicator.styles.js

@@ -0,0 +1,294 @@
+import { css, unsafeCSS } from 'lit';
+import { breakpoints } from '../../../assets/styles/breakpoints.js';
+import { inheritedTextReset } from '../../../assets/styles/style-resets.js';
+const smMax = unsafeCSS(breakpoints.smMax);
+export const stepIndicatorStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
+
+	:host {
+		--_compact-text-gap: var(--primitives-space-8);
+		--_compact-text-color: var(--semantics-content-color);
+		--_compact-count-color: var(--semantics-content-secondary-color);
+		--_compact-bar-gap: var(--primitives-space-4);
+		--_compact-bar-segment-gap: var(--primitives-space-2);
+		--_compact-bar-corner-radius: var(--primitives-corner-radius-full);
+		--_track-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-200));
+		--_compact-bar-height: var(--primitives-space-6);
+		--_progress-color: var(--semantics-content-accent-color);
+		--_item-gap: var(--primitives-space-4);
+		--_marker-size: var(--primitives-space-24);
+		--_track-thickness: var(--primitives-space-2);
+		--_marker-z-index: 1;
+		--_marker-corner-radius: var(--primitives-corner-radius-full);
+		--_ring-thickness: var(--primitives-space-2);
+		--_ring-color: var(--context-parent-background-color, var(--semantics-surfaces-base-background-color));
+		--_marker-content-color: var(--semantics-content-secondary-color);
+		--_progress-content-color: var(--semantics-content-contrast-color);
+		--_current-fill-color: light-dark(var(--primitives-color-accent-100), var(--primitives-color-accent-150));
+		--_icon-size: var(--primitives-space-16);
+		--_title-color: var(--semantics-content-secondary-color);
+		--_current-title-color: var(--semantics-content-color);
+		--_control-corner-radius: var(--semantics-controls-md-corner-radius);
+		--_control-bleed-block: var(--primitives-space-4);
+		--_control-bleed-inline: var(--primitives-space-8);
+		--_control-fill-z-index: -1;
+		--_control-ring-z-index: 1;
+		--_control-hover-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
+
+		${inheritedTextReset}
+		isolation: isolate;
+		display: block;
+		container-type: inline-size;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	.step-indicator__items {
+		display: flex;
+		align-items: start;
+
+		/* Stays in the DOM for assistive tech when the compact view takes over.
+		   Standard visually-hidden recipe. */
+		@container (max-width: ${smMax}) {
+			position: absolute;
+			width: 1px;
+			height: 1px;
+			overflow: hidden;
+			clip-path: inset(50%);
+			white-space: nowrap;
+		}
+	}
+
+	.step-indicator__compact-text {
+		display: none;
+		margin: 0;
+		gap: var(--_compact-text-gap);
+		justify-content: space-between;
+		align-items: baseline;
+		color: var(--_compact-text-color);
+		font: var(--primitives-font-body-md-regular-flat);
+
+		@container (max-width: ${smMax}) {
+			display: flex;
+		}
+	}
+
+	.step-indicator__compact-count {
+		color: var(--_compact-count-color);
+		font-variant-numeric: tabular-nums;
+		white-space: nowrap;
+	}
+
+	.step-indicator__compact-bar {
+		display: none;
+		margin-top: var(--_compact-bar-gap);
+		gap: var(--_compact-bar-segment-gap);
+
+		@container (max-width: ${smMax}) {
+			display: flex;
+		}
+	}
+
+	.step-indicator__compact-bar-segment {
+		flex: 1;
+		border-radius: var(--_compact-bar-corner-radius);
+		background-color: var(--_track-color);
+		height: var(--_compact-bar-height);
+	}
+
+	.step-indicator__compact-bar-segment[data-filled] {
+		background-color: var(--_progress-color);
+	}
+`;
+export const stepIndicatorItemStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
+
+	:host {
+		${inheritedTextReset}
+		display: block;
+		flex: 1;
+		min-width: 0;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	.step-indicator__item {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--_item-gap);
+		text-align: center;
+	}
+
+	.step-indicator__item::before,
+	.step-indicator__item::after {
+		position: absolute;
+		top: calc(var(--_marker-size) / 2 - var(--_track-thickness) / 2);
+		height: var(--_track-thickness);
+		content: "";
+		background-color: var(--_track-color);
+	}
+
+	.step-indicator__item::before {
+		left: 0;
+		right: 50%;
+	}
+
+	.step-indicator__item::after {
+		left: 50%;
+		right: 0;
+	}
+
+	:host(:first-of-type) .step-indicator__item::before {
+		content: none;
+	}
+
+	:host(:last-of-type) .step-indicator__item::after {
+		content: none;
+	}
+
+	.step-indicator__item.is-past::before {
+		background-color: var(--_progress-color);
+	}
+
+	.step-indicator__item.is-past::after {
+		background-color: var(--_progress-color);
+	}
+
+	.step-indicator__item.is-current::before {
+		background-color: var(--_progress-color);
+	}
+
+	.step-indicator__item-marker {
+		box-sizing: border-box;
+		position: relative;
+		z-index: var(--_marker-z-index);
+		display: flex;
+		width: var(--_marker-size);
+		height: var(--_marker-size);
+		align-items: center;
+		justify-content: center;
+		border-radius: var(--_marker-corner-radius);
+		/* Ring in the background color: masks the track running underneath, so
+		   the marker gets breathing room without shortening the track. */
+		box-shadow: 0 0 0 var(--_ring-thickness) var(--_ring-color);
+		background-color: var(--_track-color);
+		color: var(--_marker-content-color);
+		font: var(--primitives-font-body-sm-regular-flat);
+
+		@media (forced-colors: active) {
+			border: var(--primitives-border-width-regular) solid CanvasText;
+		}
+	}
+
+	.step-indicator__item.is-past .step-indicator__item-marker {
+		background-color: var(--_progress-color);
+		color: var(--_progress-content-color);
+	}
+
+	.step-indicator__item.is-current .step-indicator__item-marker {
+		border: var(--_track-thickness) solid var(--_progress-color);
+		background-color: var(--_current-fill-color);
+		color: var(--_progress-color);
+	}
+
+	.step-indicator__item-icon {
+		width: var(--_icon-size);
+		height: var(--_icon-size);
+	}
+
+	.step-indicator__item-title {
+		color: var(--_title-color);
+		font: var(--primitives-font-body-sm-regular-flat);
+		overflow-wrap: anywhere;
+	}
+
+	.step-indicator__item.is-current .step-indicator__item-title {
+		color: var(--_current-title-color);
+	}
+
+	/* Standard visually-hidden recipe. */
+	.step-indicator__item-status {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
+
+	.step-indicator__item-control {
+		position: relative;
+		display: flex;
+		width: fit-content;
+		max-width: 100%;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--_item-gap);
+		padding: 0;
+		border: none;
+		border-radius: var(--_control-corner-radius);
+		background: none;
+		color: inherit;
+		cursor: var(--semantics-controls-link-cursor);
+		font: inherit;
+		text-decoration: none;
+	}
+
+	/* Two layers on the same box, bleeding past the control rather than padding
+	   it: padding would move the marker down while the track sits at a fixed
+	   offset, and the two would no longer line up. ::before carries the fill and
+	   stays under the track; ::after carries the focus ring and goes over it. */
+	.step-indicator__item-control::before,
+	.step-indicator__item-control::after {
+		position: absolute;
+		inset: calc(var(--_control-bleed-block) * -1) calc(var(--_control-bleed-inline) * -1);
+		border-radius: var(--_control-corner-radius);
+		content: "";
+		pointer-events: none;
+	}
+
+	.step-indicator__item-control::before {
+		z-index: var(--_control-fill-z-index);
+	}
+
+	.step-indicator__item-control::after {
+		z-index: var(--_control-ring-z-index);
+	}
+
+	.step-indicator__item-control:focus-visible {
+		/* The ring lives on ::after, so the control's own must go — two rings on
+		   one control is what the browser default would add here. */
+		outline: none;
+	}
+
+	.step-indicator__item-control:focus-visible::after {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
+
+	/* Hover only on hover-capable devices: keeps a touch-scroll from lighting up
+	   the step under the finger. */
+	@media (hover: hover) {
+		.step-indicator__item-control:hover {
+			/* The marker's ring masks the track in the surrounding color, so it
+			   has to follow the hover fill or it paints a halo on top of it. */
+			--_ring-color: var(--_control-hover-background-color);
+		}
+
+		.step-indicator__item-control:hover::before {
+			background-color: var(--_control-hover-background-color);
+		}
+	}
+`;
+//# sourceMappingURL=step-indicator.styles.js.map

package/dist/components/status-and-feedback/step-indicator/step-indicator.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-indicator.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/step-indicator/step-indicator.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAE5E,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmClC,kBAAkB;;;;;;;;;;;;;;;;2BAgBK,KAAK;;;;;;;;;;;;;;;;;;;2BAmBL,KAAK;;;;;;;;;;;;;;;;2BAgBL,KAAK;;;;;;;;;;;;;;;CAe/B,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;IAMtC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoLrB,CAAC"}

package/dist/components/status-and-feedback/step-indicator/step-indicator.template.d.ts

@@ -0,0 +1,5 @@
+import { type TemplateResult } from 'lit';
+import type { NLDDStepIndicator, NLDDStepIndicatorItem } from './step-indicator.js';
+export declare function stepIndicatorTemplate(component: NLDDStepIndicator): TemplateResult;
+export declare function stepIndicatorItemTemplate(component: NLDDStepIndicatorItem): TemplateResult;
+//# sourceMappingURL=step-indicator.template.d.ts.map

package/dist/components/status-and-feedback/step-indicator/step-indicator.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-indicator.template.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/step-indicator/step-indicator.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAEpF,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,iBAAiB,GAAG,cAAc,CAmClF;AAED,wBAAgB,yBAAyB,CAAC,SAAS,EAAE,qBAAqB,GAAG,cAAc,CAiC1F"}

package/dist/components/status-and-feedback/step-indicator/step-indicator.template.js

@@ -0,0 +1,69 @@
+import { html, nothing } from 'lit';
+export function stepIndicatorTemplate(component) {
+    const label = component.accessibleLabel || component._t('components.step-indicator.accessible-label');
+    const current = component.resolvedCurrent;
+    const total = component.total;
+    const currentTitle = component.currentItem?.text ?? '';
+    const compactText = component._t('components.step-indicator.compact-text', { current, total });
+    return html `
+		<nav class="step-indicator"
+			aria-label=${label || nothing}
+		>
+			<div class="step-indicator__items"
+				role="list"
+			>
+				<slot @slotchange=${component._onSlotChange}></slot>
+			</div>
+			${total > 0 ? html `
+				<p class="step-indicator__compact-text"
+					aria-hidden="true"
+				>
+					${currentTitle ? html `<span class="step-indicator__compact-title">${currentTitle}</span>` : nothing}
+					<span class="step-indicator__compact-count">${compactText}</span>
+				</p>
+				<div class="step-indicator__compact-bar"
+					aria-hidden="true"
+				>
+					${Array.from({ length: total }, (_, index) => html `
+						<span class="step-indicator__compact-bar-segment"
+							?data-filled=${index + 1 <= current}
+						></span>
+					`)}
+				</div>
+			` : nothing}
+		</nav>
+	`;
+}
+export function stepIndicatorItemTemplate(component) {
+    const status = component.resolvedStatus;
+    // A past step shows a check mark instead of its number; the number stays in
+    // the status text for anyone who can't see it.
+    const marker = component.icon
+        ? html `<nldd-icon class="step-indicator__item-icon" name=${component.icon}></nldd-icon>`
+        : status === 'past'
+            ? html `<nldd-icon class="step-indicator__item-icon" name="check-mark"></nldd-icon>`
+            : html `<span class="step-indicator__item-number">${component._index}</span>`;
+    const content = html `
+		<span class="step-indicator__item-marker"
+			aria-hidden="true"
+		>${marker}</span>
+		<span class="step-indicator__item-title">
+			${component.text || html `<slot></slot>`}
+			<span class="step-indicator__item-status">, ${component._statusText}</span>
+		</span>
+	`;
+    return html `
+		<div class="step-indicator__item is-${status}">
+			${component.href ? html `
+				<a class="step-indicator__item-control"
+					href=${component.href}
+				>${content}</a>
+			` : component.button ? html `
+				<button class="step-indicator__item-control"
+					type="button"
+				>${content}</button>
+			` : content}
+		</div>
+	`;
+}
+//# sourceMappingURL=step-indicator.template.js.map

package/dist/components/status-and-feedback/step-indicator/step-indicator.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-indicator.template.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/step-indicator/step-indicator.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AAGzD,MAAM,UAAU,qBAAqB,CAAC,SAA4B;IACjE,MAAM,KAAK,GAAG,SAAS,CAAC,eAAe,IAAI,SAAS,CAAC,EAAE,CAAC,4CAA4C,CAAC,CAAC;IACtG,MAAM,OAAO,GAAG,SAAS,CAAC,eAAe,CAAC;IAC1C,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC;IAC9B,MAAM,YAAY,GAAG,SAAS,CAAC,WAAW,EAAE,IAAI,IAAI,EAAE,CAAC;IACvD,MAAM,WAAW,GAAG,SAAS,CAAC,EAAE,CAAC,wCAAwC,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;IAE/F,OAAO,IAAI,CAAA;;gBAEI,KAAK,IAAI,OAAO;;;;;wBAKR,SAAS,CAAC,aAAa;;KAE1C,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;;;;OAId,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA,+CAA+C,YAAY,SAAS,CAAC,CAAC,CAAC,OAAO;mDACrD,WAAW;;;;;OAKvD,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;sBAEjC,KAAK,GAAG,CAAC,IAAI,OAAO;;MAEpC,CAAC;;IAEH,CAAC,CAAC,CAAC,OAAO;;EAEZ,CAAC;AACH,CAAC;AAED,MAAM,UAAU,yBAAyB,CAAC,SAAgC;IACzE,MAAM,MAAM,GAAG,SAAS,CAAC,cAAc,CAAC;IACxC,4EAA4E;IAC5E,+CAA+C;IAC/C,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI;QAC5B,CAAC,CAAC,IAAI,CAAA,qDAAqD,SAAS,CAAC,IAAI,eAAe;QACxF,CAAC,CAAC,MAAM,KAAK,MAAM;YAClB,CAAC,CAAC,IAAI,CAAA,6EAA6E;YACnF,CAAC,CAAC,IAAI,CAAA,6CAA6C,SAAS,CAAC,MAAM,SAAS,CAAC;IAE/E,MAAM,OAAO,GAAG,IAAI,CAAA;;;KAGhB,MAAM;;KAEN,SAAS,CAAC,IAAI,IAAI,IAAI,CAAA,eAAe;iDACO,SAAS,CAAC,WAAW;;EAEpE,CAAC;IAEF,OAAO,IAAI,CAAA;wCAC4B,MAAM;KACzC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;YAEd,SAAS,CAAC,IAAI;OACnB,OAAO;IACV,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;;;OAGvB,OAAO;IACV,CAAC,CAAC,CAAC,OAAO;;EAEZ,CAAC;AACH,CAAC"}

package/dist/css/form.css

@@ -9,21 +9,30 @@ nldd-form > form {
 	display: block;
 }
 
-nldd-form > form > * + * {
-	margin-top: var(--semantics-forms-gap);
+/* # Vertical rhythm
+
+   The gap hangs on the BOTTOM of the preceding child, not on the top of the
+   following one. Hidden children (formset management inputs, framework
+   bookkeeping) generate no box, so a top margin would let them push the first
+   visible field down; a bottom margin on them renders nothing. The :has()
+   guard keeps the rhythm from adding a trailing gap when the remaining
+   children are all hidden. */
+
+nldd-form > form > *:has(~ *:not([hidden]):not([type='hidden'])) {
+	margin-bottom: var(--semantics-forms-gap);
 }
 
-nldd-form nldd-form-field + nldd-form-field {
+nldd-form nldd-form-field:has(+ nldd-form-field):has(~ *:not([hidden]):not([type='hidden'])) {
 	@container (max-width: 640px) {
-		margin-top: var(--semantics-forms-gap-tight);
+		margin-bottom: var(--semantics-forms-gap-tight);
 	}
 	@container (min-width: 641px) {
-		margin-top: var(--semantics-forms-gap);
+		margin-bottom: var(--semantics-forms-gap);
 	}
 }
 
-nldd-form nldd-form-field[form-label-alignment='top']:not([label-alignment='left']):not([label-alignment='right']) + nldd-form-field[form-label-alignment='top']:not([label-alignment='left']):not([label-alignment='right']) {
+nldd-form nldd-form-field[form-label-alignment='top']:not([label-alignment='left']):not([label-alignment='right']):has(+ nldd-form-field[form-label-alignment='top']:not([label-alignment='left']):not([label-alignment='right'])):has(~ *:not([hidden]):not([type='hidden'])) {
 	@container (min-width: 641px) {
-		margin-top: var(--semantics-forms-gap-tight);
+		margin-bottom: var(--semantics-forms-gap-tight);
 	}
 }