@nldd/design-system 0.8.53 → 0.8.55

package/dist/components/status-and-feedback/activity-indicator/activity-indicator.js

@@ -0,0 +1,163 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Nederlandse Digitale Dienst Activity Indicator Component (Lit + TypeScript)
+ *
+ * Layout placeholder that fills its parent and centres an indeterminate
+ * activity indicator. By default the indicator is held back for 1000ms so
+ * brief loading states don't flash; once the delay passes it fades in. Set
+ * `timing="instant"` to skip the delay (the fade-in still plays) — this is
+ * what embedding components such as `nldd-button` use for their loading state.
+ *
+ * The default indicator is a simple icon-sized circle drawn in `currentColor`,
+ * with an optional label below (hidden unless `show-text` is set). Drop a
+ * `<nldd-progress-circle>`, `<nldd-progress-bar>` or any element in the slot
+ * to override it.
+ *
+ * Reconnect behaviour: every `connectedCallback` resets the timer and hides
+ * the indicator again. If a consumer toggles the element via a conditional
+ * render (remove + re-insert) the indicator disappears and re-fades after
+ * another delay. Keep the element mounted and toggle visibility / `hidden`
+ * instead if you want the timer to run only once.
+ *
+ * Accessibility: while connected and not `complete` the host is a polite live
+ * region (`role="status"`). The label (`text`, or the translated "Laden"
+ * fallback) always renders as the region's content — visually hidden when
+ * `show-text` is off (the default) — so assistive tech announces the loading
+ * state when the indicator appears. Set `complete` (or unmount) to clear it.
+ *
+ * @element nldd-activity-indicator
+ *
+ * @attr {string} size - Circle diameter on the icon scale: 16,20,24,28,32,40,44,48,56,64,80,96 (default '32')
+ * @attr {boolean} show-text - Show the label under the indicator (default false; the label still feeds the accessible name)
+ * @attr {string} text - Label text. Falls back to the translated "Laden" when unset.
+ * @attr {'default'|'instant'} timing - 'default' waits 1000ms before showing (anti-flash); 'instant' shows immediately (the fade-in still plays). Default 'default'.
+ * @attr {boolean} complete - Mark the loader as finished while keeping the element mounted; clears aria-busy and hides the indicator.
+ * @attr {object} translations - Override translation keys; unset keys fall back to Dutch
+ *
+ * @slot - Optional custom indicator; overrides the default circle (and its
+ *   visually-hidden label). Consumers replacing the slot supply their own
+ *   indicator semantics; the host's role="status" still marks the loading region.
+ */
+import { LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { activityIndicatorStyles } from './activity-indicator.styles.js';
+import { activityIndicatorTemplate } from './activity-indicator.template.js';
+import { nlddActivityIndicatorTranslations } from './activity-indicator.i18n.js';
+/** Delay before the indicator fades in. Brief loading states finish within
+ *  this window and the indicator is never shown — avoids a jarring flash. */
+const DELAY_MS = 1000;
+let NLDDActivityIndicator = class NLDDActivityIndicator extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.size = '32';
+        /** Show the label under the indicator. The label always feeds the
+         *  accessible name (aria-label); this only controls visibility. */
+        this.showText = false;
+        this.text = '';
+        /** 'default' waits {@link DELAY_MS} before showing; 'instant' shows
+         *  immediately. The fade-in plays either way. */
+        this.timing = 'default';
+        /** Mark the loader as finished while keeping the element mounted.
+         *  Clears aria-busy and hides the indicator. Default false. */
+        this.complete = false;
+        this.translations = {};
+        this._visible = false;
+    }
+    _t(key) {
+        return this.translations[key] ?? nlddActivityIndicatorTranslations[key];
+    }
+    /** Accessible name announced while loading. */
+    get _accessibleName() {
+        return this.text || this._t('components.activity-indicator.loading-text');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._syncAria();
+        // timing="instant" skips the anti-flash delay. The fade-in still plays:
+        // it lives on the indicator wrapper, not on this timer.
+        this._visible = this.timing === 'instant';
+        if (!this._visible && !this.complete)
+            this._scheduleDelay();
+    }
+    willUpdate(changed) {
+        // role="status" presence tracks `complete` (the label itself is
+        // reactive in the template, so it needs no manual sync).
+        if (changed.has('complete')) {
+            this._syncAria();
+        }
+        // `timing` can flip after connection (e.g. an embedding control switches
+        // to "instant"); re-evaluate the anti-flash delay so it isn't left stuck.
+        if (changed.has('timing')) {
+            this._clearDelay();
+            if (this.timing === 'instant') {
+                this._visible = true;
+            }
+            else if (!this._visible && !this.complete) {
+                this._scheduleDelay();
+            }
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._clearDelay();
+    }
+    _clearDelay() {
+        if (this._delayTimeout) {
+            clearTimeout(this._delayTimeout);
+            this._delayTimeout = undefined;
+        }
+    }
+    _scheduleDelay() {
+        this._delayTimeout = setTimeout(() => {
+            this._visible = true;
+            this._delayTimeout = undefined;
+        }, DELAY_MS);
+    }
+    /** A polite live region (role="status") while loading; cleared when
+     *  complete. The announced text is the visually-hidden label rendered by
+     *  the template — not an aria-label, and without aria-busy, since a busy
+     *  live region would defer the very announcement we want. */
+    _syncAria() {
+        if (this.complete) {
+            this.removeAttribute('role');
+        }
+        else {
+            this.setAttribute('role', 'status');
+        }
+    }
+    render() {
+        return activityIndicatorTemplate(this);
+    }
+};
+NLDDActivityIndicator.styles = activityIndicatorStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDActivityIndicator.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'show-text' })
+], NLDDActivityIndicator.prototype, "showText", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDActivityIndicator.prototype, "text", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDActivityIndicator.prototype, "timing", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDActivityIndicator.prototype, "complete", void 0);
+__decorate([
+    property({ type: Object })
+], NLDDActivityIndicator.prototype, "translations", void 0);
+__decorate([
+    state()
+], NLDDActivityIndicator.prototype, "_visible", void 0);
+NLDDActivityIndicator = __decorate([
+    customElement('nldd-activity-indicator')
+], NLDDActivityIndicator);
+export { NLDDActivityIndicator };
+//# sourceMappingURL=activity-indicator.js.map

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

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

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

@@ -0,0 +1,2 @@
+export declare const activityIndicatorStyles: import("lit").CSSResult;
+//# sourceMappingURL=activity-indicator.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"activity-indicator.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/activity-indicator/activity-indicator.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,uBAAuB,yBAmJnC,CAAC"}

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

@@ -0,0 +1,151 @@
+import { css } from 'lit';
+import { inheritedTextReset } from '../../../assets/styles/slotted-reset.js';
+export const activityIndicatorStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		--_circle-size: var(--primitives-space-32);
+		--_track-opacity: 0.25;
+		--_stroke-width: 2;
+		--_rotation-duration: 0.8s;
+		--_fade-duration: var(--primitives-transition-duration-slow);
+		--_fade-easing: ease-out;
+		--_pulse-duration: 2s;
+		--_pulse-easing: ease-in-out;
+		--_max-width: var(--primitives-area-240);
+		--_gap: var(--primitives-space-4);
+		--_text-font: var(--primitives-font-body-sm-regular-flat);
+
+		${inheritedTextReset}
+		box-sizing: border-box;
+		display: flex;
+		flex-grow: 1;
+		flex-shrink: 1;
+		flex-basis: auto;
+		width: 100%;
+		height: 100%;
+		align-items: center;
+		justify-content: center;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* ## Sizes (icon scale) */
+
+	:host([size="16"]) { --_circle-size: var(--primitives-space-16); }
+	:host([size="20"]) { --_circle-size: var(--primitives-space-20); }
+	:host([size="24"]) { --_circle-size: var(--primitives-space-24); }
+	:host([size="28"]) { --_circle-size: var(--primitives-space-28); }
+	:host([size="32"]) { --_circle-size: var(--primitives-space-32); }
+	:host([size="40"]) { --_circle-size: var(--primitives-space-40); }
+	:host([size="44"]) { --_circle-size: var(--primitives-space-44); }
+	:host([size="48"]) { --_circle-size: var(--primitives-space-48); }
+	:host([size="56"]) { --_circle-size: var(--primitives-space-56); }
+	:host([size="64"]) { --_circle-size: var(--primitives-space-64); }
+	:host([size="80"]) { --_circle-size: var(--primitives-space-80); }
+	:host([size="96"]) { --_circle-size: var(--primitives-space-96); }
+
+
+	/* # Block
+	   Fades the indicator in once it becomes visible (both timing modes), and
+	   stacks the default circle + label as a centred column. width:100% +
+	   max-width gives a slotted progress-bar a width to fill; the fixed-size
+	   circle and the label stay centred via align-items. */
+
+	.activity-indicator {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		max-width: var(--_max-width);
+		align-items: center;
+		gap: var(--_gap);
+		animation: activity-indicator-fade-in var(--_fade-duration) var(--_fade-easing);
+	}
+
+	@keyframes activity-indicator-fade-in {
+		from { opacity: 0; }
+	}
+
+	/* display:contents so the default circle + label (or a slotted override)
+	   are direct flex items of the block. */
+	slot {
+		display: contents;
+	}
+
+
+	/* # Elements */
+
+	/* The whole SVG (stroke included) scales with the size, like an icon. */
+	.activity-indicator__circle {
+		display: block;
+		width: var(--_circle-size);
+		height: var(--_circle-size);
+	}
+
+	.activity-indicator__track {
+		opacity: var(--_track-opacity);
+		stroke: currentColor;
+		stroke-width: var(--_stroke-width);
+	}
+
+	/* Rotate only the arc inside the SVG (around the view-box centre via
+	   transform-origin) rather than the whole <svg> element — rotating the
+	   element visibly wobbles when it sits at a sub-pixel position (next to a
+	   label, or overlaid on a button). Mirrors nldd-progress-circle. */
+	.activity-indicator__indicator {
+		stroke: currentColor;
+		stroke-width: var(--_stroke-width);
+		stroke-linecap: round;
+		stroke-dasharray: 25 100;
+		transform-origin: 50% 50%;
+		animation: activity-indicator-rotate var(--_rotation-duration) linear infinite;
+	}
+
+	@keyframes activity-indicator-rotate {
+		to { transform: rotate(360deg); }
+	}
+
+	.activity-indicator__text {
+		color: currentColor;
+		font: var(--_text-font);
+		text-align: center;
+	}
+
+	/* show-text off (default): the label still renders as the announced
+	   content of the role="status" host, but is visually hidden.
+	   Standard visually-hidden recipe. */
+	.activity-indicator__text--visually-hidden {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
+
+
+	/* # Accessibility */
+
+	@media (prefers-reduced-motion: reduce) {
+		.activity-indicator {
+			animation: none;
+		}
+
+		.activity-indicator__indicator {
+			/* Drop the rotation (vestibular safety); keep the 25 / 100 arc and
+			   pulse its opacity instead, mirroring nldd-progress-circle. */
+			animation: activity-indicator-pulse var(--_pulse-duration) var(--_pulse-easing) infinite;
+		}
+
+		@keyframes activity-indicator-pulse {
+			0%, 100% { opacity: 0.3; }
+			50% { opacity: 0.7; }
+		}
+	}
+`;
+//# sourceMappingURL=activity-indicator.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"activity-indicator.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/activity-indicator/activity-indicator.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;IAkBtC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiIrB,CAAC"}

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

@@ -0,0 +1,4 @@
+import { nothing } from 'lit';
+import type { NLDDActivityIndicator } from './activity-indicator.js';
+export declare function activityIndicatorTemplate(component: NLDDActivityIndicator): import("lit-html").TemplateResult<1> | typeof nothing;
+//# sourceMappingURL=activity-indicator.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"activity-indicator.template.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/activity-indicator/activity-indicator.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAC;AAEpC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAErE,wBAAgB,yBAAyB,CAAC,SAAS,EAAE,qBAAqB,yDAoCzE"}

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

@@ -0,0 +1,41 @@
+import { html, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+export function activityIndicatorTemplate(component) {
+    // Render nothing while the delay window is open so the indicator doesn't
+    // even flash for sub-second loads, or once `complete` is set so the
+    // element stays mounted but ARIA / visuals reflect the finished state.
+    if (!component._visible || component.complete)
+        return nothing;
+    // The label always renders so it is the announced content of the
+    // role="status" host; show-text only controls whether it is visible.
+    const text = component._accessibleName;
+    return html `
+		<div class="activity-indicator">
+			<slot>
+				<svg class="activity-indicator__circle"
+					viewBox="0 0 24 24"
+					fill="none"
+					aria-hidden="true"
+					focusable="false"
+				>
+					<circle class="activity-indicator__track"
+						cx="12"
+						cy="12"
+						r="9"
+					></circle>
+					<circle class="activity-indicator__indicator"
+						cx="12"
+						cy="12"
+						r="9"
+						pathLength="100"
+					></circle>
+				</svg>
+				<span class=${classMap({
+        'activity-indicator__text': true,
+        'activity-indicator__text--visually-hidden': !component.showText,
+    })}>${text}</span>
+			</slot>
+		</div>
+	`;
+}
+//# sourceMappingURL=activity-indicator.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"activity-indicator.template.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/activity-indicator/activity-indicator.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGvD,MAAM,UAAU,yBAAyB,CAAC,SAAgC;IACzE,yEAAyE;IACzE,oEAAoE;IACpE,uEAAuE;IACvE,IAAI,CAAC,SAAS,CAAC,QAAQ,IAAI,SAAS,CAAC,QAAQ;QAAE,OAAO,OAAO,CAAC;IAC9D,iEAAiE;IACjE,qEAAqE;IACrE,MAAM,IAAI,GAAG,SAAS,CAAC,eAAe,CAAC;IACvC,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;kBAqBM,QAAQ,CAAC;QACvB,0BAA0B,EAAE,IAAI;QAChC,2CAA2C,EAAE,CAAC,SAAS,CAAC,QAAQ;KAChE,CAAC,IAAI,IAAI;;;EAGX,CAAC;AACH,CAAC"}

package/dist/components/status-and-feedback/badge/badge.styles.js

@@ -187,7 +187,7 @@ export const badgeStyles = css `
 		display: inline-flex;
 		border-radius: var(--components-badge-corner-radius);
 		box-shadow:
-			0 0 0 1px var(--context-parent-background-color, var(--semantics-surfaces-background-color)),
+			0 0 0 1px var(--context-parent-background-color, var(--semantics-surfaces-base-background-color)),
 			inset 0 0 0 var(--_border-width) var(--_border-color);
 		background-color: var(--_background-color);
 		min-width: var(--_height);

package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js

@@ -29,7 +29,7 @@ export const modalDialogStyles = css `
 		border: none;
 		border-radius: var(--semantics-overlays-corner-radius);
 		box-shadow: var(--semantics-overlays-box-shadow);
-		background-color: var(--semantics-surfaces-background-color);
+		background-color: var(--semantics-surfaces-base-background-color);
 		width: calc(100% - var(--primitives-space-16) * 2);
 		max-width: var(--primitives-area-480);
 		max-height: var(--_max-height);

package/dist/components/status-and-feedback/progress-bar/progress-bar.d.ts

@@ -1,7 +1,7 @@
 /**
  * Nederlandse Digitale Dienst Progress Bar Component (Lit + TypeScript)
  *
- * Exports both NLDDProgressBar and NLDDProgressBarSegment.
+ * Exports both NLDDProgressBar and NLDDProgressBarSegmentIndicator.
  *
  * A progress bar that supports a single value (loading-style) or
  * multiple segments (multi-stage progress, or distribution like
@@ -31,9 +31,9 @@
  * @attr {boolean} indeterminate     - Shows a sliding indicator animation (only without segments)
  * @attr {object}  translations      - Override translation keys; unset keys fall back to Dutch
  *
- * @slot - Place for nldd-progress-bar-segment elements
+ * @slot - Place for nldd-progress-bar-segment-indicator elements
  *
- * @element nldd-progress-bar-segment
+ * @element nldd-progress-bar-segment-indicator
  *
  * @attr {number}  value         - Share of the parent's total (default 0; <=0 hides segment)
  * @attr {string}  color         - Color. Semantic (neutral, accent, success, warning, critical) or a Rijkskleur. Default 'accent'.
@@ -53,7 +53,7 @@ export type ProgressBarSize = 'sm' | 'md' | 'lg';
 export type ProgressBarValueFormat = 'percentage' | 'absolute' | 'fraction';
 export type ProgressBarValueDisplay = 'inline' | 'tooltip' | 'none';
 export type ProgressBarColor = 'neutral' | 'accent' | 'success' | 'warning' | 'critical' | 'coolgray' | 'lintblauw' | 'donkerblauw' | 'hemelblauw' | 'lichtblauw' | 'paars' | 'violet' | 'robijnrood' | 'roze' | 'rood' | 'oranje' | 'donkergeel' | 'geel' | 'donkerbruin' | 'bruin' | 'donkergroen' | 'groen' | 'mosgroen' | 'mintgroen';
-export declare class NLDDProgressBarSegment extends LitElement {
+export declare class NLDDProgressBarSegmentIndicator extends LitElement {
     static styles: import("lit").CSSResult;
     value: number;
     color: ProgressBarColor;
@@ -83,18 +83,18 @@ export declare class NLDDProgressBar extends LitElement {
     indeterminate: boolean;
     /** Override one or more translation keys. Unspecified keys fall back to Dutch. */
     translations: Partial<NLDDProgressBarTranslations>;
-    private _segments;
-    /** True for 300ms after indeterminate=true→false: indicator fades out while
-     *  the segment grows from 0 to its target value. */
+    private _segmentIndicators;
+    /** True for 300ms after indeterminate=true→false: the indeterminate indicator
+     *  fades out while the segment-indicator grows from 0 to its target value. */
     _indeterminateExiting: boolean;
-    /** True for 300ms after indeterminate=false→true: indicator fades in while
-     *  the segment shrinks from its current width to 0. */
+    /** True for 300ms after indeterminate=false→true: the indeterminate indicator
+     *  fades in while the segment-indicator shrinks from its current width to 0. */
     _indeterminateEntering: boolean;
     private _exitTimeout?;
     private _enterTimeout?;
     _t(key: keyof NLDDProgressBarTranslations): string;
     /** Returns true when the user has provided segment children. */
-    get _hasSegments(): boolean;
+    get _hasSegmentIndicators(): boolean;
     /** Sum of all segment values, or the parent's own value, or 0. */
     get _totalValue(): number;
     /** Percentage filled (0–100). */
@@ -110,25 +110,27 @@ export declare class NLDDProgressBar extends LitElement {
     firstUpdated(): void;
     willUpdate(changed: Map<string, unknown>): void;
     updated(): void;
-    /** Indicator fades out, segment grows from 0 to its target — both 300ms
+    /** Indeterminate indicator fades out, segment-indicator grows from 0 to its target — both 300ms
      *  (matches --primitives-transition-duration-slow and nldd-progress-circle). */
     private _beginIndeterminateExit;
-    /** Indicator fades in, segment shrinks from current width to 0 — both 300ms. */
+    /** Indeterminate indicator fades in, segment-indicator shrinks from current width to 0 — both 300ms. */
     private _beginIndeterminateEnter;
     private _cancelIndeterminateExit;
     private _cancelIndeterminateEnter;
-    /** Auto-tooltip based on parent's value-format. Override via segment.tooltip. */
-    private _formatSegmentTooltip;
+    /** Computes a segment-indicator's auto-tooltip from the parent's value-format
+     *  and the segment name. Consumers override it per segment with the
+     *  tooltip-text attribute, which wins over this auto-text. */
+    private _formatSegmentIndicatorTooltip;
     disconnectedCallback(): void;
     private _onSlotChange;
-    private _syncSegments;
+    private _syncSegmentIndicators;
     private _onSlotChangeBound;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'nldd-progress-bar': NLDDProgressBar;
-        'nldd-progress-bar-segment': NLDDProgressBarSegment;
+        'nldd-progress-bar-segment-indicator': NLDDProgressBarSegmentIndicator;
     }
 }
 //# sourceMappingURL=progress-bar.d.ts.map

package/dist/components/status-and-feedback/progress-bar/progress-bar.d.ts.map

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