@nldd/design-system 0.8.44 → 0.8.45

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

@@ -1 +1 @@
-{"version":3,"file":"icon.styles.js","sourceRoot":"","sources":["../../../../src/components/content/icon/icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2B5B,CAAC"}
+{"version":3,"file":"icon.styles.js","sourceRoot":"","sources":["../../../../src/components/content/icon/icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8E5B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"icon.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/icon/icon.template.ts"],"names":[],"mappings":"AAGA,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,wCAU9C"}
+{"version":3,"file":"icon.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/icon/icon.template.ts"],"names":[],"mappings":"AAGA,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,wCAM9C"}

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

@@ -4,10 +4,6 @@ export function template(iconSvg) {
     if (!iconSvg) {
         return html `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>`;
     }
-    return html `
-		<div class="icon__container">
-			${unsafeHTML(iconSvg)}
-		</div>
-	`;
+    return html `${unsafeHTML(iconSvg)}`;
 }
 //# sourceMappingURL=icon.template.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"icon.template.js","sourceRoot":"","sources":["../../../../src/components/content/icon/icon.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D,MAAM,UAAU,QAAQ,CAAC,OAAsB;IAC9C,IAAI,CAAC,OAAO,EAAE,CAAC;QACd,OAAO,IAAI,CAAA,oEAAoE,CAAC;IACjF,CAAC;IAED,OAAO,IAAI,CAAA;;KAEP,UAAU,CAAC,OAAO,CAAC;;EAEtB,CAAC;AACH,CAAC"}
+{"version":3,"file":"icon.template.js","sourceRoot":"","sources":["../../../../src/components/content/icon/icon.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D,MAAM,UAAU,QAAQ,CAAC,OAAsB;IAC9C,IAAI,CAAC,OAAO,EAAE,CAAC;QACd,OAAO,IAAI,CAAA,oEAAoE,CAAC;IACjF,CAAC;IAED,OAAO,IAAI,CAAA,GAAG,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC;AACrC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"keyboard-shortcut.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/keyboard-shortcut/keyboard-shortcut.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,yBA4ElC,CAAC"}
+{"version":3,"file":"keyboard-shortcut.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/keyboard-shortcut/keyboard-shortcut.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,yBAsElC,CAAC"}

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

@@ -23,9 +23,6 @@ export const keyboardShortcutStyles = css `
 		display: none;
 	}
 
-	/* Hide on touch-only devices (no hover capability anywhere) since the
-	   shortcut cannot be invoked. Override with [always-visible] when the
-	   shortcut is shown for informational purposes. */
 	@media (any-hover: none) {
 		:host(:not([always-visible])) {
 			display: none;
@@ -37,16 +34,16 @@ export const keyboardShortcutStyles = css `
 
 	.keyboard-shortcut {
 		display: inline-flex;
-		align-items: center;
 		gap: var(--primitives-space-4);
+		align-items: center;
 	}
 
 
 	/* # Elements */
 
 	.keyboard-shortcut__key {
-		display: inline-flex;
 		box-sizing: border-box;
+		display: inline-flex;
 		border: var(--components-keyboard-shortcut-border-thickness) solid var(--components-keyboard-shortcut-border-color);
 		border-radius: var(--components-keyboard-shortcut-corner-radius);
 		background-color: var(--components-keyboard-shortcut-background-color);
@@ -60,14 +57,6 @@ export const keyboardShortcutStyles = css `
 		white-space: nowrap;
 	}
 
-	.keyboard-shortcut__separator {
-		color: var(--components-keyboard-shortcut-separator-color);
-		font: var(--_font);
-	}
-
-
-	/* # Toegankelijkheid */
-
 	@media (forced-colors: active) {
 		.keyboard-shortcut__key {
 			border-color: CanvasText;
@@ -75,5 +64,10 @@ export const keyboardShortcutStyles = css `
 			color: CanvasText;
 		}
 	}
+
+	.keyboard-shortcut__separator {
+		color: var(--components-keyboard-shortcut-separator-color);
+		font: var(--_font);
+	}
 `;
 //# sourceMappingURL=keyboard-shortcut.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"keyboard-shortcut.styles.js","sourceRoot":"","sources":["../../../../src/components/content/keyboard-shortcut/keyboard-shortcut.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4ExC,CAAC"}
+{"version":3,"file":"keyboard-shortcut.styles.js","sourceRoot":"","sources":["../../../../src/components/content/keyboard-shortcut/keyboard-shortcut.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsExC,CAAC"}

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

@@ -9,6 +9,7 @@
  * @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
+ * @attr {string} variant - Wat zichtbaar is: 'text' | 'icon' | 'icon-and-text'. Onbepaald → auto-detect op basis van welke van text/icon aanwezig is.
  * @attr {string} accessible-label - Toegankelijk label voor screenreaders. Gebruik dit bij icon-only tags zonder zichtbare tekst.
  *
  * @slot - Tag tekst
@@ -18,21 +19,25 @@ 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 Size = 'sm' | 'md';
+type Variant = 'text' | 'icon' | 'icon-and-text';
 export declare class NLDDTag extends LitElement {
     static styles: import("lit").CSSResult;
     color: Color;
     size: Size;
     text: string;
     icon: string;
+    variant: Variant | '';
     accessibleLabel: string;
     _hasSlotText: boolean;
     _hasSlotIcon: boolean;
     private _childObserver?;
     get _hasText(): boolean;
     get _hasIcon(): boolean;
+    get _effectiveVariant(): Variant;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private _updateSlotState;
+    updated(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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;;;;;;;;;;;;;;;GAeG;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;AAExB,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,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;IAEQ,iBAAiB;IAajB,oBAAoB;IAM7B,OAAO,CAAC,gBAAgB;IAgBf,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,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"}

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

@@ -9,6 +9,7 @@
  * @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
+ * @attr {string} variant - Wat zichtbaar is: 'text' | 'icon' | 'icon-and-text'. Onbepaald → auto-detect op basis van welke van text/icon aanwezig is.
  * @attr {string} accessible-label - Toegankelijk label voor screenreaders. Gebruik dit bij icon-only tags zonder zichtbare tekst.
  *
  * @slot - Tag tekst
@@ -32,6 +33,7 @@ let NLDDTag = class NLDDTag extends LitElement {
         this.size = 'md';
         this.text = '';
         this.icon = '';
+        this.variant = '';
         this.accessibleLabel = '';
         this._hasSlotText = false;
         this._hasSlotIcon = false;
@@ -42,6 +44,15 @@ let NLDDTag = class NLDDTag extends LitElement {
     get _hasIcon() {
         return !!this.icon || this._hasSlotIcon;
     }
+    get _effectiveVariant() {
+        if (this.variant)
+            return this.variant;
+        if (this._hasIcon && this._hasText)
+            return 'icon-and-text';
+        if (this._hasIcon)
+            return 'icon';
+        return 'text';
+    }
     connectedCallback() {
         super.connectedCallback();
         this._updateSlotState();
@@ -78,6 +89,14 @@ let NLDDTag = class NLDDTag extends LitElement {
         this._hasSlotText = hasText;
         this._hasSlotIcon = hasIcon;
     }
+    updated() {
+        // An icon-only tag with no accessible-label has no accessible name —
+        // the placeholder/icon is decorative (aria-hidden), so screen readers
+        // announce nothing. Warn in dev so consumers add a label.
+        if (import.meta.env?.DEV && this._effectiveVariant === 'icon' && !this.accessibleLabel) {
+            console.warn('nldd-tag: icon-only tag without an accessible-label has no accessible name. Add accessible-label so screen readers can announce it.', this);
+        }
+    }
     render() {
         return template(this);
     }
@@ -95,6 +114,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NLDDTag.prototype, "icon", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDTag.prototype, "variant", void 0);
 __decorate([
     property({ type: String, attribute: 'accessible-label' })
 ], NLDDTag.prototype, "accessibleLabel", void 0);

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":"AAEA,eAAO,MAAM,SAAS,yBAwMrB,CAAC"}
+{"version":3,"file":"tag.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/tag/tag.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,yBA6LrB,CAAC"}

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

@@ -5,42 +5,31 @@ export const tagStyles = css `
 	/* # Host */
 
 	:host {
+		--_corner-radius: var(--components-tag-md-corner-radius);
 		--_background-color: var(--components-tag-neutral-background-color);
-		--_content-color: var(--components-tag-neutral-content-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);
 		--_font: var(--primitives-font-body-sm-bold-flat);
 		--_icon-size: var(--primitives-space-16);
 		--_icon-offset-correction: var(--primitives-space-1);
-		--_corner-radius: var(--components-tag-md-corner-radius);
 
 		display: inline-flex;
 		vertical-align: middle;
 	}
 
 	:host([size="sm"]) {
+		--_corner-radius: var(--components-tag-sm-corner-radius);
 		--_min-height: var(--primitives-space-20);
 		--_inline-padding: var(--primitives-space-4);
 		--_gap: var(--primitives-space-2);
 		--_font: var(--primitives-font-body-xs-bold-flat);
 		--_icon-size: var(--primitives-space-14);
-		--_corner-radius: var(--components-tag-sm-corner-radius);
 	}
 
-	:host([hidden]) {
-		display: none;
-	}
-
-
 	/* ## Color */
 
-	:host([color="neutral"]),
-	:host(:not([color])) {
-		--_background-color: var(--components-tag-neutral-background-color);
-		--_content-color: var(--components-tag-neutral-content-color);
-	}
-
 	:host([color="accent"]) {
 		--_background-color: var(--components-tag-accent-background-color);
 		--_content-color: var(--components-tag-accent-content-color);
@@ -61,7 +50,6 @@ export const tagStyles = css `
 		--_content-color: var(--components-tag-critical-content-color);
 	}
 
-
 	/* ### Rijkskleuren */
 
 	:host([color="coolgray"]) {
@@ -159,33 +147,37 @@ export const tagStyles = css `
 		--_content-color: var(--components-tag-mintgroen-content-color);
 	}
 
+	:host([hidden]) {
+		display: none;
+	}
+
 
 	/* # Block */
 
 	.tag {
-		display: inline-flex;
 		box-sizing: border-box;
+		display: inline-flex;
 		border-radius: var(--_corner-radius);
 		background-color: var(--_background-color);
 		min-height: var(--_min-height);
 		padding: 0 var(--_inline-padding);
-		align-items: center;
 		gap: var(--_gap);
+		align-items: center;
 		color: var(--_content-color);
-		white-space: nowrap;
 		font: var(--_font);
+		white-space: nowrap;
 	}
 
 
-	/* # Icon */
+	/* # Elements */
 
 	.tag__icon {
 		display: inline-flex;
 		margin-inline: calc((var(--_min-height) - var(--_icon-size)) / 2 - var(--_inline-padding));
 		width: var(--_icon-size);
 		height: var(--_icon-size);
-		align-items: center;
 		flex-shrink: 0;
+		align-items: center;
 	}
 
 	.tag__icon:has(+ .tag__text) {
@@ -193,9 +185,6 @@ export const tagStyles = css `
 		margin-right: 0;
 	}
 
-
-	/* # Text */
-
 	.tag__text {
 		display: inline-block;
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"tag.styles.js","sourceRoot":"","sources":["../../../../src/components/content/tag/tag.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwM3B,CAAC"}
+{"version":3,"file":"tag.styles.js","sourceRoot":"","sources":["../../../../src/components/content/tag/tag.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6L3B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"tag.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/tag/tag.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAExC,wBAAgB,QAAQ,CAAC,SAAS,EAAE,OAAO,wCAyB1C"}
+{"version":3,"file":"tag.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/tag/tag.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAExC,wBAAgB,QAAQ,CAAC,SAAS,EAAE,OAAO,wCA6B1C"}

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

@@ -1,23 +1,27 @@
 import { html, nothing } from 'lit';
 export function template(component) {
-    // Use _hasIcon (covers icon prop én slot="icon") zodat slotted-icon-only
-    // tags ook role="img" + aria-label krijgen — zonder dit zou een tag met
-    // slot="icon" en accessible-label maar geen tekst geen accessible name
-    // hebben (SR kondigt niks aan).
-    const iconOnly = component._hasIcon && !component._hasText && !!component.accessibleLabel;
+    const variant = component._effectiveVariant;
+    // variant=icon always renders the icon area so the icon-placeholder
+    // fallback inside the slot can show when no icon is provided.
+    const showIcon = variant === 'icon' || (variant === 'icon-and-text' && component._hasIcon);
+    const showText = (variant === 'text' || variant === 'icon-and-text') && component._hasText;
+    // icon-only needs an explicit accessible name — the visible text is gone,
+    // so the screen reader has nothing to announce without role="img" +
+    // aria-label. Hidden slot/text isn't projected into the a11y tree.
+    const iconOnly = variant === 'icon' && component._hasIcon && !!component.accessibleLabel;
     return html `
 		<span class="tag"
 			role=${iconOnly ? 'img' : nothing}
 			aria-label=${iconOnly ? component.accessibleLabel : nothing}
 		>
-			${component._hasIcon ? html `
+			${showIcon ? html `
 				<span class="tag__icon">
 					${component.icon
         ? html `<nldd-icon name=${component.icon}></nldd-icon>`
-        : html `<slot name="icon"></slot>`}
+        : html `<slot name="icon">${variant === 'icon' ? html `<nldd-icon name="icon-placeholder"></nldd-icon>` : nothing}</slot>`}
 				</span>
 			` : nothing}
-			${component._hasText ? html `
+			${showText ? html `
 				<span class="tag__text">
 					${component.text ? component.text : html `<slot></slot>`}
 				</span>

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

@@ -1 +1 @@
-{"version":3,"file":"tag.template.js","sourceRoot":"","sources":["../../../../src/components/content/tag/tag.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpC,MAAM,UAAU,QAAQ,CAAC,SAAkB;IAC1C,yEAAyE;IACzE,wEAAwE;IACxE,uEAAuE;IACvE,gCAAgC;IAChC,MAAM,QAAQ,GAAG,SAAS,CAAC,QAAQ,IAAI,CAAC,SAAS,CAAC,QAAQ,IAAI,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC;IAC1F,OAAO,IAAI,CAAA;;UAEF,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO;gBACpB,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO;;KAEzD,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA;;OAEvB,SAAS,CAAC,IAAI;QACf,CAAC,CAAC,IAAI,CAAA,mBAAmB,SAAS,CAAC,IAAI,eAAe;QACtD,CAAC,CAAC,IAAI,CAAA,2BAA2B;;IAEnC,CAAC,CAAC,CAAC,OAAO;KACT,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA;;OAEvB,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe;;IAExD,CAAC,CAAC,CAAC,OAAO;;EAEZ,CAAC;AACH,CAAC"}
+{"version":3,"file":"tag.template.js","sourceRoot":"","sources":["../../../../src/components/content/tag/tag.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpC,MAAM,UAAU,QAAQ,CAAC,SAAkB;IAC1C,MAAM,OAAO,GAAG,SAAS,CAAC,iBAAiB,CAAC;IAC5C,oEAAoE;IACpE,8DAA8D;IAC9D,MAAM,QAAQ,GAAG,OAAO,KAAK,MAAM,IAAI,CAAC,OAAO,KAAK,eAAe,IAAI,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC3F,MAAM,QAAQ,GAAG,CAAC,OAAO,KAAK,MAAM,IAAI,OAAO,KAAK,eAAe,CAAC,IAAI,SAAS,CAAC,QAAQ,CAAC;IAC3F,0EAA0E;IAC1E,oEAAoE;IACpE,mEAAmE;IACnE,MAAM,QAAQ,GAAG,OAAO,KAAK,MAAM,IAAI,SAAS,CAAC,QAAQ,IAAI,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC;IACzF,OAAO,IAAI,CAAA;;UAEF,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO;gBACpB,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO;;KAEzD,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA;;OAEb,SAAS,CAAC,IAAI;QACf,CAAC,CAAC,IAAI,CAAA,mBAAmB,SAAS,CAAC,IAAI,eAAe;QACtD,CAAC,CAAC,IAAI,CAAA,qBAAqB,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,iDAAiD,CAAC,CAAC,CAAC,OAAO,SAAS;;IAE1H,CAAC,CAAC,CAAC,OAAO;KACT,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA;;OAEb,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe;;IAExD,CAAC,CAAC,CAAC,OAAO;;EAEZ,CAAC;AACH,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"title.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/title/title.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,WAAW,yBAuOvB,CAAC"}
+{"version":3,"file":"title.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/title/title.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,WAAW,yBA0NvB,CAAC"}