@nldd/design-system 0.8.58 → 0.8.60

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

@@ -1 +1 @@
-{"version":3,"file":"activity-indicator.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/activity-indicator/activity-indicator.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,8BAA8B,CAAC;AAMtF,MAAM,MAAM,qBAAqB,GAChC,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnF,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,SAAS,CAAC;AAE5D,qBACa,qBAAsB,SAAQ,UAAU;IACpD,OAAgB,MAAM,0BAA2B;IAGjD,IAAI,EAAE,qBAAqB,CAAQ;IAEnC;uEACmE;IAEnE,QAAQ,UAAS;IAGjB,IAAI,SAAM;IAEV;qDACiD;IAEjD,MAAM,EAAE,uBAAuB,CAAa;IAE5C;mEAC+D;IAE/D,QAAQ,UAAS;IAGjB,YAAY,EAAE,OAAO,CAAC,iCAAiC,CAAC,CAAM;IAG9D,QAAQ,UAAS;IAEjB,OAAO,CAAC,aAAa,CAAC,CAAgC;IAE/C,EAAE,CAAC,GAAG,EAAE,MAAM,iCAAiC,GAAG,MAAM;IAI/D,+CAA+C;IAC/C,IAAW,eAAe,IAAI,MAAM,CAEnC;IAEQ,iBAAiB,IAAI,IAAI;IASzB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAkB/C,oBAAoB,IAAI,IAAI;IAKrC,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,cAAc;IAOtB;;;iEAG6D;IAC7D,OAAO,CAAC,SAAS;IAQR,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,yBAAyB,EAAE,qBAAqB,CAAC;KACjD;CACD"}
+{"version":3,"file":"activity-indicator.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/activity-indicator/activity-indicator.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,8BAA8B,CAAC;AAMtF,MAAM,MAAM,qBAAqB,GAChC,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnF,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,SAAS,CAAC;AAE5D,qBACa,qBAAsB,SAAQ,UAAU;IACpD,OAAgB,MAAM,0BAA2B;IAGjD,IAAI,EAAE,qBAAqB,CAAQ;IAEnC;uEACmE;IAEnE,QAAQ,UAAS;IAGjB,IAAI,SAAM;IAEV;qDACiD;IAEjD,MAAM,EAAE,uBAAuB,CAAa;IAE5C;mEAC+D;IAE/D,QAAQ,UAAS;IAEjB;;;iCAG6B;IAE7B,QAAQ,UAAS;IAGjB,YAAY,EAAE,OAAO,CAAC,iCAAiC,CAAC,CAAM;IAG9D,QAAQ,UAAS;IAEjB,OAAO,CAAC,aAAa,CAAC,CAAgC;IAE/C,EAAE,CAAC,GAAG,EAAE,MAAM,iCAAiC,GAAG,MAAM;IAI/D,+CAA+C;IAC/C,IAAW,eAAe,IAAI,MAAM,CAEnC;IAEQ,iBAAiB,IAAI,IAAI;IASzB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAkB/C,oBAAoB,IAAI,IAAI;IAKrC,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,cAAc;IAOtB;;;iEAG6D;IAC7D,OAAO,CAAC,SAAS;IAQR,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,yBAAyB,EAAE,qBAAqB,CAAC;KACjD;CACD"}

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

@@ -37,6 +37,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @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 {boolean} backdrop - Dim and blur the content underneath with a frosted backdrop while loading (opt-in, default false). Uses the context parent background colour (fallback: base surface) at one minus the disabled opacity, plus a backdrop blur.
  * @attr {object} translations - Override translation keys; unset keys fall back to Dutch
  *
  * @slot - Optional custom indicator; overrides the default circle (and its
@@ -65,6 +66,11 @@ let NLDDActivityIndicator = class NLDDActivityIndicator extends LitElement {
         /** Mark the loader as finished while keeping the element mounted.
          *  Clears aria-busy and hides the indicator. Default false. */
         this.complete = false;
+        /** Dim and blur the content underneath with a frosted backdrop while
+         *  loading. The layer takes the context parent background colour (fallback:
+         *  base surface) at one minus the disabled opacity, plus a backdrop blur.
+         *  Opt-in; default false. */
+        this.backdrop = false;
         this.translations = {};
         this._visible = false;
     }
@@ -150,6 +156,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NLDDActivityIndicator.prototype, "complete", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDActivityIndicator.prototype, "backdrop", void 0);
 __decorate([
     property({ type: Object })
 ], NLDDActivityIndicator.prototype, "translations", void 0);

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

@@ -1 +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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"}
+{"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.map

@@ -1 +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"}
+{"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,yBAgLnC,CAAC"}

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

@@ -17,6 +17,7 @@ export const activityIndicatorStyles = css `
 		--_max-width: var(--primitives-area-240);
 		--_gap: var(--primitives-space-4);
 		--_text-font: var(--primitives-font-body-sm-regular-flat);
+		--_backdrop-blur: 3px;
 
 		${inheritedTextReset}
 		box-sizing: border-box;
@@ -34,6 +35,12 @@ export const activityIndicatorStyles = css `
 		display: none;
 	}
 
+	/* The opt-in backdrop is an absolutely-positioned layer that fills the host,
+	   so the host has to be its containing block. */
+	:host([backdrop]) {
+		position: relative;
+	}
+
 
 	/* ## Sizes (icon scale) */
 
@@ -58,6 +65,9 @@ export const activityIndicatorStyles = css `
 	   circle and the label stay centred via align-items. */
 
 	.activity-indicator {
+		/* position:relative so it paints above the absolutely-positioned backdrop
+		   (both are z-index:auto; the backdrop comes first in the DOM). */
+		position: relative;
 		display: flex;
 		flex-direction: column;
 		width: 100%;
@@ -71,6 +81,24 @@ export const activityIndicatorStyles = css `
 		from { opacity: 0; }
 	}
 
+	/* Opt-in dimming layer (the backdrop attribute): the context parent
+	   background colour — fallback the base surface — at one minus the disabled
+	   opacity, so the content underneath reads as inactive while loading. Fades
+	   in with the indicator. */
+	.activity-indicator__backdrop {
+		position: absolute;
+		inset: 0;
+		/* Frosted dim: the parent surface — fallback base surface — as a
+		   translucent fill at one minus the disabled opacity (a translucent
+		   colour, not element opacity, which would hide the blur), plus a blur so
+		   the content behind reads as inactive. backdrop-filter degrades
+		   gracefully where unsupported, leaving just the translucent fill. */
+		background-color: color-mix(in oklab, var(--context-parent-background-color, var(--semantics-surfaces-base-background-color)) calc((1 - var(--primitives-opacity-disabled)) * 100%), transparent);
+		-webkit-backdrop-filter: blur(var(--_backdrop-blur));
+		backdrop-filter: blur(var(--_backdrop-blur));
+		animation: activity-indicator-fade-in var(--_fade-duration) var(--_fade-easing);
+	}
+
 	/* display:contents so the default circle + label (or a slotted override)
 	   are direct flex items of the block. */
 	slot {
@@ -132,7 +160,8 @@ export const activityIndicatorStyles = css `
 	/* # Accessibility */
 
 	@media (prefers-reduced-motion: reduce) {
-		.activity-indicator {
+		.activity-indicator,
+		.activity-indicator__backdrop {
 			animation: none;
 		}
 

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

@@ -1 +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"}
+{"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;;;;;;;;;;;;;;;;;;;IAmBtC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6JrB,CAAC"}

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

@@ -1 +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"}
+{"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,yDAqCzE"}

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

@@ -10,6 +10,7 @@ export function activityIndicatorTemplate(component) {
     // role="status" host; show-text only controls whether it is visible.
     const text = component._accessibleName;
     return html `
+		${component.backdrop ? html `<div class="activity-indicator__backdrop" aria-hidden="true"></div>` : nothing}
 		<div class="activity-indicator">
 			<slot>
 				<svg class="activity-indicator__circle"

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

@@ -1 +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"}
+{"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;IACR,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,qEAAqE,CAAC,CAAC,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;kBAqB1F,QAAQ,CAAC;QACvB,0BAA0B,EAAE,IAAI;QAChC,2CAA2C,EAAE,CAAC,SAAS,CAAC,QAAQ;KAChE,CAAC,IAAI,IAAI;;;EAGX,CAAC;AACH,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nldd/design-system",
-  "version": "0.8.58",
+  "version": "0.8.60",
   "description": "Design System voor Nederlandse Digitale Dienst",
   "type": "module",
   "main": "dist/components/components.js",
@@ -403,7 +403,9 @@
     "generate:palettes": "node scripts/generate-palettes.js",
     "generate:component-reference": "node scripts/generate-component-reference.js",
     "generate:skill-changelog": "node scripts/generate-skill-changelog.js",
-    "generate:skill-docs": "npm run generate:component-reference && npm run generate:skill-changelog",
+    "generate:skill-principles": "node scripts/generate-skill-principles.js",
+    "generate:plugin-version": "node scripts/sync-plugin-version.js",
+    "generate:skill-docs": "npm run generate:component-reference && npm run generate:skill-changelog && npm run generate:skill-principles && npm run generate:plugin-version",
     "validate:styles": "node scripts/validate-css-variables.js",
     "build:components": "npm run clean:components && npm run build:icons && npm run build:components:modules && npm run build:components:bundle && npm run build:exports",
     "build:icons": "node scripts/generate-icon-registry.js && node scripts/generate-logo.js",