@nldd/design-system 0.8.56 → 0.8.58

package/dist/components/content/image/image.styles.js

@@ -16,10 +16,7 @@ export const imageStyles = css `
 		--_error-text-color: var(--components-image-error-text-color);
 		--_error-font: var(--components-image-error-font);
 		--_error-padding: var(--primitives-space-8);
-		--_error-card-padding-block: var(--primitives-space-12);
-		--_error-card-padding-inline: var(--primitives-space-16);
-		--_error-card-gap: var(--primitives-space-2);
-		--_error-card-corner-radius: var(--primitives-corner-radius-md);
+		--_error-gap: var(--primitives-space-2);
 		--_caption-row-gap: var(--primitives-space-8);
 		--_object-fit: cover;
 		--_object-position: center;
@@ -55,11 +52,12 @@ export const imageStyles = css `
 
 
 	/* ## Shape variants
-	   Rounded is the default (already set via the --_corner-radius in :host
-	   pointing at the design-system token). Square overrides to 0, circle to
-	   50% for avatar-style use (combine with aspect-ratio 1/1 for a true circle). */
+	   The :host base --_corner-radius is the design-system rounded token, used by
+	   shape="rounded". The default shape is "square" (set on the property), which
+	   overrides to 0; circle overrides to 50% for avatar-style use (combine with
+	   aspect-ratio 1/1 for a true circle). */
 
-	:host([shape="square"]) { --_corner-radius: 0; }
+	:host([shape="square"]) { --_corner-radius: var(--primitives-corner-radius-none); }
 	:host([shape="circle"]) { --_corner-radius: 50%; }
 
 
@@ -78,14 +76,14 @@ export const imageStyles = css `
 
 	/* # Media wrapper
 	   The box that constrains the image. aspect-ratio is set as an inline style
-	   from the component when provided, so we don't need a CSS var. The
-	   background acts as a placeholder while the image loads. */
+	   from the component when provided, so we don't need a CSS var. The media is
+	   transparent by default; an LQIP paints it while loading, and the error
+	   state paints it grey (see "Error state" below). */
 
 	.image__media {
 		display: block;
 		position: relative;
 		overflow: hidden;
-		background-color: var(--_background-color);
 		max-width: 100%;
 		border-radius: var(--_corner-radius);
 	}
@@ -304,7 +302,7 @@ export const imageStyles = css `
 		transition: opacity 300ms ease-out;
 	}
 
-	.image__media--lqip .image__img--loaded {
+	:host([loaded]) .image__media--lqip .image__img {
 		opacity: 1;
 	}
 
@@ -321,7 +319,7 @@ export const imageStyles = css `
 	   Listeners stay attached — only DOM removal detaches them — so the next
 	   src change still triggers load/error. */
 
-	.image__img--errored {
+	:host([errored]) .image__img {
 		display: none;
 	}
 
@@ -345,31 +343,23 @@ export const imageStyles = css `
 
 
 	/* # Error state
-	   Centred card with icon + alt-text shown when the image fails to load.
-	   Sits over whatever background --_background-color provides (the LQIP
-	   gradient when present, otherwise the neutral fallback color). The
-	   card has its own neutral background so the icon + label stay legible
-	   against the LQIP behind it. */
+	   Centred icon + alt-text shown when the image fails to load. The media is
+	   painted grey (--_background-color) via :host([errored]) so the icon and
+	   label stay legible — no separate card needed. */
+
+	:host([errored]) .image__media {
+		background-color: var(--_background-color);
+	}
 
 	.image__error {
 		position: absolute;
 		inset: 0;
 		display: flex;
+		flex-direction: column;
 		align-items: center;
 		justify-content: center;
+		gap: var(--_error-gap);
 		padding: var(--_error-padding);
-	}
-
-	.image__error-card {
-		box-sizing: border-box;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		max-width: 100%;
-		padding: var(--_error-card-padding-block) var(--_error-card-padding-inline);
-		gap: var(--_error-card-gap);
-		background-color: var(--_background-color);
-		border-radius: var(--_error-card-corner-radius);
 		color: var(--_error-text-color);
 		font: var(--_error-font);
 		text-align: center;
@@ -389,6 +379,7 @@ export const imageStyles = css `
 		gap: var(--_caption-row-gap);
 		color: var(--_caption-color);
 		font: var(--_caption-font);
+		text-wrap: pretty;
 	}
 
 	.image__credit {

package/dist/components/content/image/image.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.styles.js","sourceRoot":"","sources":["../../../../src/components/content/image/image.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE3F,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;IAyB1B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAoFlB,YAAY;;;;;;;;;;;;;;IAcZ,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Rf,CAAC"}
+{"version":3,"file":"image.styles.js","sourceRoot":"","sources":["../../../../src/components/content/image/image.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE3F,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;IAsB1B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqFlB,YAAY;;;;;;;;;;;;;;IAcZ,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwRf,CAAC"}

package/dist/components/content/image/image.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/image/image.template.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C,wBAAgB,aAAa,CAAC,SAAS,EAAE,SAAS,wCA8GjD"}
+{"version":3,"file":"image.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/image/image.template.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C,wBAAgB,aAAa,CAAC,SAAS,EAAE,SAAS,wCAwGjD"}

package/dist/components/content/image/image.template.js

@@ -29,13 +29,8 @@ export function imageTemplate(component) {
         // calm surface instead of a distracting gradient.
         'image__media--lqip': hasLqip && !component._imageErrored,
     });
-    const imgClasses = classMap({
-        'image__img': true,
-        'image__img--loaded': component._imageLoaded,
-        'image__img--errored': component._imageErrored,
-    });
     const fallbackImg = html `
-		<img class=${imgClasses}
+		<img class="image__img"
 			src=${component.src || nothing}
 			alt=${component.decorative ? '' : component.alt}
 			aria-hidden=${component.decorative ? 'true' : nothing}
@@ -63,10 +58,8 @@ export function imageTemplate(component) {
 		<div class="image__error"
 			aria-hidden=${component.decorative ? 'true' : nothing}
 		>
-			<div class="image__error-card">
-				<nldd-icon name="broken-image" size="32" color="secondary-content"></nldd-icon>
-				${component.decorative ? nothing : html `<span class="image__error-text">${component.alt}</span>`}
-			</div>
+			<nldd-icon name="broken-image" size="32" color="secondary-content"></nldd-icon>
+			${component.decorative ? nothing : html `<span class="image__error-text">${component.alt}</span>`}
 		</div>
 	` : nothing;
     // Visually-hidden live region announces "image failed to load" once the
@@ -78,11 +71,13 @@ export function imageTemplate(component) {
     // Append the alt only — never the raw src. A CDN URL with a long path
     // and query string is noise to AT users; when alt is empty (valid in
     // production, DEV-warned) we announce the plain translated message.
-    const errorBase = component._t('components.image.error-status-message');
+    const errorBase = component._t('components.image.error-text');
     const errorStatusMessage = component._imageErrored && !component.decorative
         ? (component.alt ? `${errorBase}: ${component.alt}` : errorBase)
         : '';
-    const liveRegion = html `<span class="image__status" aria-live="polite">${errorStatusMessage}</span>`;
+    const liveRegion = html `<span class="image__status"
+		aria-live="polite"
+	>${errorStatusMessage}</span>`;
     const media = html `
 		<div class=${mediaClasses}
 			style=${styleMap(mediaStyles)}

package/dist/components/content/image/image.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.template.js","sourceRoot":"","sources":["../../../../src/components/content/image/image.template.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"image.template.js","sourceRoot":"","sources":["../../../../src/components/content/image/image.template.ts"],"names":[],"mappings":"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"}

package/dist/components/content/image/lqip-encoder-element.js

@@ -144,7 +144,7 @@ NLDDLqipEncoder.styles = css `
 			padding: var(--primitives-space-8) var(--primitives-space-16);
 			border-radius: var(--primitives-corner-radius-md);
 			background-color: var(--semantics-buttons-accent-filled-background-color);
-			color: var(--semantics-buttons-accent-filled-content-color);
+			color: var(--semantics-buttons-accent-filled-primary-content-color);
 			cursor: pointer;
 			font: var(--primitives-font-body-md-regular-snug);
 		}
@@ -210,7 +210,7 @@ NLDDLqipEncoder.styles = css `
 
 		.encoder__error {
 			color: var(--semantics-content-color);
-			background-color: var(--components-banner-critical-background-color);
+			background-color: var(--semantics-categories-critical-tinted-background-color);
 			padding: var(--primitives-space-8) var(--primitives-space-12);
 			border-radius: var(--primitives-corner-radius-sm);
 		}

package/dist/components/content/keyboard-shortcut/keyboard-shortcut.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-shortcut.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/keyboard-shortcut/keyboard-shortcut.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAEnE,wBAAgB,QAAQ,CAAC,SAAS,EAAE,oBAAoB,wCAmBvD"}
+{"version":3,"file":"keyboard-shortcut.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/keyboard-shortcut/keyboard-shortcut.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAEnE,wBAAgB,QAAQ,CAAC,SAAS,EAAE,oBAAoB,wCAqBvD"}

package/dist/components/content/keyboard-shortcut/keyboard-shortcut.template.js

@@ -11,7 +11,9 @@ export function template(component) {
     return html `
 		<kbd class="keyboard-shortcut">
 			${keys.map((key, index) => html `
-				${index > 0 ? html `<span class="keyboard-shortcut__separator" aria-hidden="true">+</span>` : ''}
+				${index > 0 ? html `<span class="keyboard-shortcut__separator"
+					aria-hidden="true"
+				>+</span>` : ''}
 				<kbd class="keyboard-shortcut__key">${key}</kbd>
 			`)}
 		</kbd>

package/dist/components/content/keyboard-shortcut/keyboard-shortcut.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-shortcut.template.js","sourceRoot":"","sources":["../../../../src/components/content/keyboard-shortcut/keyboard-shortcut.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,MAAM,UAAU,QAAQ,CAAC,SAA+B;IACvD,MAAM,IAAI,GAAG,SAAS,CAAC,WAAW,CAAC;IAEnC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,IAAI,CAAA;;;;GAIV,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAA;;KAEP,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;MAC5B,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,wEAAwE,CAAC,CAAC,CAAC,EAAE;0CACzD,GAAG;IACzC,CAAC;;EAEH,CAAC;AACH,CAAC"}
+{"version":3,"file":"keyboard-shortcut.template.js","sourceRoot":"","sources":["../../../../src/components/content/keyboard-shortcut/keyboard-shortcut.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,MAAM,UAAU,QAAQ,CAAC,SAA+B;IACvD,MAAM,IAAI,GAAG,SAAS,CAAC,WAAW,CAAC;IAEnC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,IAAI,CAAA;;;;GAIV,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAA;;KAEP,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;MAC5B,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;;cAER,CAAC,CAAC,CAAC,EAAE;0CACuB,GAAG;IACzC,CAAC;;EAEH,CAAC;AACH,CAAC"}

package/dist/components/content/rich-text/rich-text.d.ts

@@ -5,10 +5,25 @@
  * typography. Uses no shadow DOM so styles apply to all nested elements.
  * Import nldd-rich-text.css globally in your application.
  *
+ * ## Breedtezones
+ * Kinderen worden in drie zones geplaatst: tekst (headings, paragrafen,
+ * lijsten, blockquote, div/section) leest op de `main`-maat; media en
+ * tabellen (img, figure, video, iframe, table) krijgen het `wide`-accent;
+ * al het overige — codeblokken en élke component — krijgt de volledige
+ * `full`-span met `justify-self: start`, zodat de ruimte beschikbaar is
+ * maar niet geforceerd wordt. Per kind te overschrijven met
+ * `data-width="main" | "wide" | "full"`. In de linkse layout lezen wide en
+ * full als bleed naar rechts; met `centered` zijn ze symmetrisch.
+ *
  * @element nldd-rich-text
  *
  * @attr {string}  spacing  - Spacing between elements: 'flat' | 'tight' | 'snug' (default) | 'loose'
  * @attr {boolean} centered - Centers the main column inside the container; without it, content is left-aligned
+ * @attr {string}  color    - 'inherit' laat alle tekst de kleur van de ondergrond
+ *   volgen (voor gekleurde vlakken zoals de filled-categories). Links blijven
+ *   onderstreept als affordance; secundaire tekst (figcaption) krijgt dezelfde
+ *   kleur op verlaagde dekking. Bekende v1-gaten: inline code, mark, tabellen
+ *   en hr behouden hun eigen surfaces. Leeg = standaard contentkleuren.
  * @attr {object}  translations - Override translation keys; unset keys fall back to Dutch
  */
 import { LitElement } from 'lit';
@@ -17,6 +32,7 @@ type Spacing = 'flat' | 'tight' | 'snug' | 'loose';
 export declare class NLDDRichText extends LitElement {
     spacing: Spacing;
     centered: boolean;
+    color: '' | 'inherit';
     translations: Partial<NLDDRichTextTranslations>;
     _t(key: keyof NLDDRichTextTranslations): string;
     private _mutationObserver?;

package/dist/components/content/rich-text/rich-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rich-text.d.ts","sourceRoot":"","sources":["../../../../src/components/content/rich-text/rich-text.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGjC,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAEpE,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AAInD,qBACa,YAAa,SAAQ,UAAU;IAE3C,OAAO,EAAE,OAAO,CAAU;IAG1B,QAAQ,UAAS;IAGjB,YAAY,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAM;IAE9C,EAAE,CAAC,GAAG,EAAE,MAAM,wBAAwB,GAAG,MAAM;IAItD,OAAO,CAAC,iBAAiB,CAAC,CAAmB;IAC7C,OAAO,CAAC,eAAe,CAAC,CAAiB;IAEhC,gBAAgB;IAIhB,iBAAiB,IAAI,IAAI;IAezB,oBAAoB,IAAI,IAAI;IAQrC,OAAO,CAAC,WAAW;CA+BnB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,YAAY,CAAC;KAC/B;CACD"}
+{"version":3,"file":"rich-text.d.ts","sourceRoot":"","sources":["../../../../src/components/content/rich-text/rich-text.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGjC,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAEpE,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AAInD,qBACa,YAAa,SAAQ,UAAU;IAE3C,OAAO,EAAE,OAAO,CAAU;IAG1B,QAAQ,UAAS;IAGjB,KAAK,EAAE,EAAE,GAAG,SAAS,CAAM;IAG3B,YAAY,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAM;IAE9C,EAAE,CAAC,GAAG,EAAE,MAAM,wBAAwB,GAAG,MAAM;IAItD,OAAO,CAAC,iBAAiB,CAAC,CAAmB;IAC7C,OAAO,CAAC,eAAe,CAAC,CAAiB;IAEhC,gBAAgB;IAIhB,iBAAiB,IAAI,IAAI;IAezB,oBAAoB,IAAI,IAAI;IAQrC,OAAO,CAAC,WAAW;CA+BnB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,YAAY,CAAC;KAC/B;CACD"}

package/dist/components/content/rich-text/rich-text.js

@@ -11,10 +11,25 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * typography. Uses no shadow DOM so styles apply to all nested elements.
  * Import nldd-rich-text.css globally in your application.
  *
+ * ## Breedtezones
+ * Kinderen worden in drie zones geplaatst: tekst (headings, paragrafen,
+ * lijsten, blockquote, div/section) leest op de `main`-maat; media en
+ * tabellen (img, figure, video, iframe, table) krijgen het `wide`-accent;
+ * al het overige — codeblokken en élke component — krijgt de volledige
+ * `full`-span met `justify-self: start`, zodat de ruimte beschikbaar is
+ * maar niet geforceerd wordt. Per kind te overschrijven met
+ * `data-width="main" | "wide" | "full"`. In de linkse layout lezen wide en
+ * full als bleed naar rechts; met `centered` zijn ze symmetrisch.
+ *
  * @element nldd-rich-text
  *
  * @attr {string}  spacing  - Spacing between elements: 'flat' | 'tight' | 'snug' (default) | 'loose'
  * @attr {boolean} centered - Centers the main column inside the container; without it, content is left-aligned
+ * @attr {string}  color    - 'inherit' laat alle tekst de kleur van de ondergrond
+ *   volgen (voor gekleurde vlakken zoals de filled-categories). Links blijven
+ *   onderstreept als affordance; secundaire tekst (figcaption) krijgt dezelfde
+ *   kleur op verlaagde dekking. Bekende v1-gaten: inline code, mark, tabellen
+ *   en hr behouden hun eigen surfaces. Leeg = standaard contentkleuren.
  * @attr {object}  translations - Override translation keys; unset keys fall back to Dutch
  */
 import { LitElement } from 'lit';
@@ -26,6 +41,7 @@ let NLDDRichText = class NLDDRichText extends LitElement {
         super(...arguments);
         this.spacing = 'snug';
         this.centered = false;
+        this.color = '';
         this.translations = {};
     }
     _t(key) {
@@ -92,6 +108,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NLDDRichText.prototype, "centered", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDRichText.prototype, "color", void 0);
 __decorate([
     property({ type: Object })
 ], NLDDRichText.prototype, "translations", void 0);

package/dist/components/content/rich-text/rich-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"rich-text.js","sourceRoot":"","sources":["../../../../src/components/content/rich-text/rich-text.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"rich-text.js","sourceRoot":"","sources":["../../../../src/components/content/rich-text/rich-text.ts"],"names":[],"mappings":"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"}

package/dist/components/content/tag/tag.d.ts

@@ -5,7 +5,7 @@
  * Voor interactieve chips (filter, dismiss) gebruik je <nldd-token>.
  *
  * @element nldd-tag
- * @attr {string} color - Kleurvariant. Semantisch: 'neutral' | 'accent' | 'success' | 'warning' | 'critical'. Rijkskleuren: 'coolgray' | 'lintblauw' | 'donkerblauw' | 'hemelblauw' | 'lichtblauw' | 'paars' | 'violet' | 'robijnrood' | 'roze' | 'rood' | 'oranje' | 'donkergeel' | 'geel' | 'donkerbruin' | 'bruin' | 'donkergroen' | 'groen' | 'mosgroen' | 'mintgroen'. (default: 'neutral')
+ * @attr {string} color - Kleurvariant. Semantisch: 'neutral' | 'accent' | 'success' | 'warning' | 'critical'. Rijkskleuren: 'lintblauw' | 'donkerblauw' | 'hemelblauw' | 'lichtblauw' | 'paars' | 'violet' | 'robijnrood' | 'roze' | 'rood' | 'oranje' | 'donkergeel' | 'geel' | 'donkerbruin' | 'bruin' | 'donkergroen' | 'groen' | 'mosgroen' | 'mintgroen'. (default: 'neutral')
  * @attr {string} size - Tag grootte: 'sm' | 'md' (default: 'md')
  * @attr {string} text - Tag tekst (alternatief voor default slot)
  * @attr {string} icon - Icoon voor de tekst
@@ -17,7 +17,7 @@
  */
 import { LitElement } from 'lit';
 import './../icon/icon.js';
-type Color = 'neutral' | 'accent' | 'success' | 'warning' | 'critical' | 'coolgray' | 'lintblauw' | 'donkerblauw' | 'hemelblauw' | 'lichtblauw' | 'paars' | 'violet' | 'robijnrood' | 'roze' | 'rood' | 'oranje' | 'donkergeel' | 'geel' | 'donkerbruin' | 'bruin' | 'donkergroen' | 'groen' | 'mosgroen' | 'mintgroen';
+type Color = 'neutral' | 'accent' | 'success' | 'warning' | 'critical' | 'lintblauw' | 'donkerblauw' | 'hemelblauw' | 'lichtblauw' | 'paars' | 'violet' | 'robijnrood' | 'roze' | 'rood' | 'oranje' | 'donkergeel' | 'geel' | 'donkerbruin' | 'bruin' | 'donkergroen' | 'groen' | 'mosgroen' | 'mintgroen';
 type Size = 'sm' | 'md';
 type Variant = 'text' | 'icon' | 'icon-and-text';
 export declare class NLDDTag extends LitElement {

package/dist/components/content/tag/tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../src/components/content/tag/tag.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,mBAAmB,CAAC;AAE3B,KAAK,KAAK,GAEP,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,GACT,UAAU,GAEV,UAAU,GACV,WAAW,GACX,aAAa,GACb,YAAY,GACZ,YAAY,GACZ,OAAO,GACP,QAAQ,GACR,YAAY,GACZ,MAAM,GACN,MAAM,GACN,QAAQ,GACR,YAAY,GACZ,MAAM,GACN,aAAa,GACb,OAAO,GACP,aAAa,GACb,OAAO,GACP,UAAU,GACV,WAAW,CAAC;AACf,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACxB,KAAK,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,eAAe,CAAC;AAEjD,qBACa,OAAQ,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BAAa;IAGnC,KAAK,EAAE,KAAK,CAAa;IAGzB,IAAI,EAAE,IAAI,CAAQ;IAGlB,IAAI,SAAM;IAGV,IAAI,SAAM;IAGV,OAAO,EAAE,OAAO,GAAG,EAAE,CAAM;IAG3B,eAAe,SAAM;IAGrB,YAAY,UAAS;IAGrB,YAAY,UAAS;IAErB,OAAO,CAAC,cAAc,CAAC,CAAmB;IAE1C,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,iBAAiB,IAAI,OAAO,CAK/B;IAEQ,iBAAiB;IAajB,oBAAoB;IAM7B,OAAO,CAAC,gBAAgB;IAgBf,OAAO;IASP,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../src/components/content/tag/tag.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,mBAAmB,CAAC;AAE3B,KAAK,KAAK,GAEP,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,GACT,UAAU,GAEV,WAAW,GACX,aAAa,GACb,YAAY,GACZ,YAAY,GACZ,OAAO,GACP,QAAQ,GACR,YAAY,GACZ,MAAM,GACN,MAAM,GACN,QAAQ,GACR,YAAY,GACZ,MAAM,GACN,aAAa,GACb,OAAO,GACP,aAAa,GACb,OAAO,GACP,UAAU,GACV,WAAW,CAAC;AACf,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACxB,KAAK,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,eAAe,CAAC;AAEjD,qBACa,OAAQ,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BAAa;IAGnC,KAAK,EAAE,KAAK,CAAa;IAGzB,IAAI,EAAE,IAAI,CAAQ;IAGlB,IAAI,SAAM;IAGV,IAAI,SAAM;IAGV,OAAO,EAAE,OAAO,GAAG,EAAE,CAAM;IAG3B,eAAe,SAAM;IAGrB,YAAY,UAAS;IAGrB,YAAY,UAAS;IAErB,OAAO,CAAC,cAAc,CAAC,CAAmB;IAE1C,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,iBAAiB,IAAI,OAAO,CAK/B;IAEQ,iBAAiB;IAajB,oBAAoB;IAM7B,OAAO,CAAC,gBAAgB;IAgBf,OAAO;IASP,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}

package/dist/components/content/tag/tag.js

@@ -5,7 +5,7 @@
  * Voor interactieve chips (filter, dismiss) gebruik je <nldd-token>.
  *
  * @element nldd-tag
- * @attr {string} color - Kleurvariant. Semantisch: 'neutral' | 'accent' | 'success' | 'warning' | 'critical'. Rijkskleuren: 'coolgray' | 'lintblauw' | 'donkerblauw' | 'hemelblauw' | 'lichtblauw' | 'paars' | 'violet' | 'robijnrood' | 'roze' | 'rood' | 'oranje' | 'donkergeel' | 'geel' | 'donkerbruin' | 'bruin' | 'donkergroen' | 'groen' | 'mosgroen' | 'mintgroen'. (default: 'neutral')
+ * @attr {string} color - Kleurvariant. Semantisch: 'neutral' | 'accent' | 'success' | 'warning' | 'critical'. Rijkskleuren: 'lintblauw' | 'donkerblauw' | 'hemelblauw' | 'lichtblauw' | 'paars' | 'violet' | 'robijnrood' | 'roze' | 'rood' | 'oranje' | 'donkergeel' | 'geel' | 'donkerbruin' | 'bruin' | 'donkergroen' | 'groen' | 'mosgroen' | 'mintgroen'. (default: 'neutral')
  * @attr {string} size - Tag grootte: 'sm' | 'md' (default: 'md')
  * @attr {string} text - Tag tekst (alternatief voor default slot)
  * @attr {string} icon - Icoon voor de tekst

package/dist/components/content/tag/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../../src/components/content/tag/tag.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../../src/components/content/tag/tag.ts"],"names":[],"mappings":"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"}

package/dist/components/content/tag/tag.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/tag/tag.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,yBA8LrB,CAAC"}
+{"version":3,"file":"tag.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/tag/tag.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,yBA4NrB,CAAC"}

package/dist/components/content/tag/tag.styles.js

@@ -7,11 +7,13 @@ export const tagStyles = css `
 
 	:host {
 		--_corner-radius: var(--components-tag-md-corner-radius);
-		--_background-color: var(--components-tag-neutral-background-color);
+		--_background-color: var(--semantics-categories-neutral-tinted-background-color);
 		--_min-height: var(--primitives-space-24);
 		--_inline-padding: var(--primitives-space-6);
 		--_gap: var(--primitives-space-3);
-		--_content-color: var(--components-tag-neutral-content-color);
+		--_content-color: var(--semantics-categories-neutral-tinted-primary-content-color);
+		--_border-color: var(--semantics-categories-neutral-tinted-highlight-border-color);
+		--_border-width: var(--primitives-border-width-thin);
 		--_font: var(--primitives-font-body-sm-medium-flat);
 		--_icon-size: var(--primitives-space-16);
 		--_icon-offset-correction: var(--primitives-space-1);
@@ -33,120 +35,137 @@ export const tagStyles = css `
 	/* ## Color */
 
 	:host([color="accent"]) {
-		--_background-color: var(--components-tag-accent-background-color);
-		--_content-color: var(--components-tag-accent-content-color);
+		--_background-color: var(--semantics-categories-accent-tinted-background-color);
+		--_content-color: var(--semantics-categories-accent-tinted-primary-content-color);
+		--_border-color: var(--semantics-categories-accent-tinted-highlight-border-color);
 	}
 
 	:host([color="success"]) {
-		--_background-color: var(--components-tag-success-background-color);
-		--_content-color: var(--components-tag-success-content-color);
+		--_background-color: var(--semantics-categories-success-tinted-background-color);
+		--_content-color: var(--semantics-categories-success-tinted-primary-content-color);
+		--_border-color: var(--semantics-categories-success-tinted-highlight-border-color);
 	}
 
 	:host([color="warning"]) {
-		--_background-color: var(--components-tag-warning-background-color);
-		--_content-color: var(--components-tag-warning-content-color);
+		--_background-color: var(--semantics-categories-warning-tinted-background-color);
+		--_content-color: var(--semantics-categories-warning-tinted-primary-content-color);
+		--_border-color: var(--semantics-categories-warning-tinted-highlight-border-color);
 	}
 
 	:host([color="critical"]) {
-		--_background-color: var(--components-tag-critical-background-color);
-		--_content-color: var(--components-tag-critical-content-color);
+		--_background-color: var(--semantics-categories-critical-tinted-background-color);
+		--_content-color: var(--semantics-categories-critical-tinted-primary-content-color);
+		--_border-color: var(--semantics-categories-critical-tinted-highlight-border-color);
 	}
 
 	/* ### Rijkskleuren */
 
-	:host([color="coolgray"]) {
-		--_background-color: var(--components-tag-coolgray-background-color);
-		--_content-color: var(--components-tag-coolgray-content-color);
-	}
-
 	:host([color="lintblauw"]) {
-		--_background-color: var(--components-tag-lintblauw-background-color);
-		--_content-color: var(--components-tag-lintblauw-content-color);
+		--_background-color: var(--semantics-categories-lintblauw-tinted-background-color);
+		--_content-color: var(--semantics-categories-lintblauw-tinted-primary-content-color);
+		--_border-color: var(--semantics-categories-lintblauw-tinted-highlight-border-color);
 	}
 
 	:host([color="donkerblauw"]) {
-		--_background-color: var(--components-tag-donkerblauw-background-color);
-		--_content-color: var(--components-tag-donkerblauw-content-color);
+		--_background-color: var(--semantics-categories-donkerblauw-tinted-background-color);
+		--_content-color: var(--semantics-categories-donkerblauw-tinted-primary-content-color);
+		--_border-color: var(--semantics-categories-donkerblauw-tinted-highlight-border-color);
 	}
 
 	:host([color="hemelblauw"]) {
-		--_background-color: var(--components-tag-hemelblauw-background-color);
-		--_content-color: var(--components-tag-hemelblauw-content-color);
+		--_background-color: var(--semantics-categories-hemelblauw-tinted-background-color);
+		--_content-color: var(--semantics-categories-hemelblauw-tinted-primary-content-color);
+		--_border-color: var(--semantics-categories-hemelblauw-tinted-highlight-border-color);
 	}
 
 	:host([color="lichtblauw"]) {
-		--_background-color: var(--components-tag-lichtblauw-background-color);
-		--_content-color: var(--components-tag-lichtblauw-content-color);
+		--_background-color: var(--semantics-categories-lichtblauw-tinted-background-color);
+		--_content-color: var(--semantics-categories-lichtblauw-tinted-primary-content-color);
+		--_border-color: var(--semantics-categories-lichtblauw-tinted-highlight-border-color);
 	}
 
 	:host([color="paars"]) {
-		--_background-color: var(--components-tag-paars-background-color);
-		--_content-color: var(--components-tag-paars-content-color);
+		--_background-color: var(--semantics-categories-paars-tinted-background-color);
+		--_content-color: var(--semantics-categories-paars-tinted-primary-content-color);
+		--_border-color: var(--semantics-categories-paars-tinted-highlight-border-color);
 	}
 
 	:host([color="violet"]) {
-		--_background-color: var(--components-tag-violet-background-color);
-		--_content-color: var(--components-tag-violet-content-color);
+		--_background-color: var(--semantics-categories-violet-tinted-background-color);
+		--_content-color: var(--semantics-categories-violet-tinted-primary-content-color);
+		--_border-color: var(--semantics-categories-violet-tinted-highlight-border-color);
 	}
 
 	:host([color="robijnrood"]) {
-		--_background-color: var(--components-tag-robijnrood-background-color);
-		--_content-color: var(--components-tag-robijnrood-content-color);
+		--_background-color: var(--semantics-categories-robijnrood-tinted-background-color);
+		--_content-color: var(--semantics-categories-robijnrood-tinted-primary-content-color);
+		--_border-color: var(--semantics-categories-robijnrood-tinted-highlight-border-color);
 	}
 
 	:host([color="roze"]) {
-		--_background-color: var(--components-tag-roze-background-color);
-		--_content-color: var(--components-tag-roze-content-color);
+		--_background-color: var(--semantics-categories-roze-tinted-background-color);
+		--_content-color: var(--semantics-categories-roze-tinted-primary-content-color);
+		--_border-color: var(--semantics-categories-roze-tinted-highlight-border-color);
 	}
 
 	:host([color="rood"]) {
-		--_background-color: var(--components-tag-rood-background-color);
-		--_content-color: var(--components-tag-rood-content-color);
+		--_background-color: var(--semantics-categories-rood-tinted-background-color);
+		--_content-color: var(--semantics-categories-rood-tinted-primary-content-color);
+		--_border-color: var(--semantics-categories-rood-tinted-highlight-border-color);
 	}
 
 	:host([color="oranje"]) {
-		--_background-color: var(--components-tag-oranje-background-color);
-		--_content-color: var(--components-tag-oranje-content-color);
+		--_background-color: var(--semantics-categories-oranje-tinted-background-color);
+		--_content-color: var(--semantics-categories-oranje-tinted-primary-content-color);
+		--_border-color: var(--semantics-categories-oranje-tinted-highlight-border-color);
 	}
 
 	:host([color="donkergeel"]) {
-		--_background-color: var(--components-tag-donkergeel-background-color);
-		--_content-color: var(--components-tag-donkergeel-content-color);
+		--_background-color: var(--semantics-categories-donkergeel-tinted-background-color);
+		--_content-color: var(--semantics-categories-donkergeel-tinted-primary-content-color);
+		--_border-color: var(--semantics-categories-donkergeel-tinted-highlight-border-color);
 	}
 
 	:host([color="geel"]) {
-		--_background-color: var(--components-tag-geel-background-color);
-		--_content-color: var(--components-tag-geel-content-color);
+		--_background-color: var(--semantics-categories-geel-tinted-background-color);
+		--_content-color: var(--semantics-categories-geel-tinted-primary-content-color);
+		--_border-color: var(--semantics-categories-geel-tinted-highlight-border-color);
 	}
 
 	:host([color="donkerbruin"]) {
-		--_background-color: var(--components-tag-donkerbruin-background-color);
-		--_content-color: var(--components-tag-donkerbruin-content-color);
+		--_background-color: var(--semantics-categories-donkerbruin-tinted-background-color);
+		--_content-color: var(--semantics-categories-donkerbruin-tinted-primary-content-color);
+		--_border-color: var(--semantics-categories-donkerbruin-tinted-highlight-border-color);
 	}
 
 	:host([color="bruin"]) {
-		--_background-color: var(--components-tag-bruin-background-color);
-		--_content-color: var(--components-tag-bruin-content-color);
+		--_background-color: var(--semantics-categories-bruin-tinted-background-color);
+		--_content-color: var(--semantics-categories-bruin-tinted-primary-content-color);
+		--_border-color: var(--semantics-categories-bruin-tinted-highlight-border-color);
 	}
 
 	:host([color="donkergroen"]) {
-		--_background-color: var(--components-tag-donkergroen-background-color);
-		--_content-color: var(--components-tag-donkergroen-content-color);
+		--_background-color: var(--semantics-categories-donkergroen-tinted-background-color);
+		--_content-color: var(--semantics-categories-donkergroen-tinted-primary-content-color);
+		--_border-color: var(--semantics-categories-donkergroen-tinted-highlight-border-color);
 	}
 
 	:host([color="groen"]) {
-		--_background-color: var(--components-tag-groen-background-color);
-		--_content-color: var(--components-tag-groen-content-color);
+		--_background-color: var(--semantics-categories-groen-tinted-background-color);
+		--_content-color: var(--semantics-categories-groen-tinted-primary-content-color);
+		--_border-color: var(--semantics-categories-groen-tinted-highlight-border-color);
 	}
 
 	:host([color="mosgroen"]) {
-		--_background-color: var(--components-tag-mosgroen-background-color);
-		--_content-color: var(--components-tag-mosgroen-content-color);
+		--_background-color: var(--semantics-categories-mosgroen-tinted-background-color);
+		--_content-color: var(--semantics-categories-mosgroen-tinted-primary-content-color);
+		--_border-color: var(--semantics-categories-mosgroen-tinted-highlight-border-color);
 	}
 
 	:host([color="mintgroen"]) {
-		--_background-color: var(--components-tag-mintgroen-background-color);
-		--_content-color: var(--components-tag-mintgroen-content-color);
+		--_background-color: var(--semantics-categories-mintgroen-tinted-background-color);
+		--_content-color: var(--semantics-categories-mintgroen-tinted-primary-content-color);
+		--_border-color: var(--semantics-categories-mintgroen-tinted-highlight-border-color);
 	}
 
 	:host([hidden]) {
@@ -160,6 +179,9 @@ export const tagStyles = css `
 		box-sizing: border-box;
 		display: inline-flex;
 		border-radius: var(--_corner-radius);
+		/* Inset box-shadow rather than a border so the outline never adds to
+		   the tag's size or shifts the text. */
+		box-shadow: inset 0 0 0 var(--_border-width) var(--_border-color);
 		background-color: var(--_background-color);
 		min-height: var(--_min-height);
 		padding: 0 var(--_inline-padding);
@@ -170,6 +192,14 @@ export const tagStyles = css `
 		white-space: nowrap;
 	}
 
+	@media (forced-colors: active) {
+		.tag {
+			border: var(--primitives-border-width-thin) solid CanvasText;
+			background-color: Canvas;
+			color: CanvasText;
+		}
+	}
+
 
 	/* # Elements */