@nldd/design-system 0.8.92 → 0.8.93

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;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,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"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../src/components/content/tag/tag.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,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,OAAO,EAAE,OAAO,GAAG,EAAE,CAAM;IAG3B,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;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

@@ -10,11 +10,11 @@
  * click it, it is `nldd-token`.
  *
  * @element nldd-tag
+ * @attr {string} variant - What is visible: 'text' | 'icon' | 'icon-and-text'. Unset → detected from which of text/icon is present.
  * @attr {string} color - Color variant. Semantic: 'neutral' | 'accent' | 'success' | 'warning' | 'critical'. Rijkshuisstijl colors: 'lintblauw' | 'donkerblauw' | 'hemelblauw' | 'lichtblauw' | 'paars' | 'violet' | 'robijnrood' | 'roze' | 'rood' | 'oranje' | 'donkergeel' | 'geel' | 'donkerbruin' | 'bruin' | 'donkergroen' | 'groen' | 'mosgroen' | 'mintgroen'. (default: 'neutral')
  * @attr {string} size - Tag size: 'sm' | 'md' (default: 'md')
  * @attr {string} text - Tag text (alternative to the default slot)
  * @attr {string} icon - Icon before the text
- * @attr {string} variant - What is visible: 'text' | 'icon' | 'icon-and-text'. Unset → detected from which of text/icon is present.
  * @attr {string} accessible-label - Accessible label for screen readers. Use this on icon-only tags without visible text.
  *
  * @slot - Tag text
@@ -35,11 +35,11 @@ import './../icon/icon.js';
 let NLDDTag = class NLDDTag extends LitElement {
     constructor() {
         super(...arguments);
+        this.variant = '';
         this.color = 'neutral';
         this.size = 'md';
         this.text = '';
         this.icon = '';
-        this.variant = '';
         this.accessibleLabel = '';
         this._hasSlotText = false;
         this._hasSlotIcon = false;
@@ -108,6 +108,9 @@ let NLDDTag = class NLDDTag extends LitElement {
     }
 };
 NLDDTag.styles = tagStyles;
+__decorate([
+    property({ reflect: true, converter: reflectNonDefault('') })
+], NLDDTag.prototype, "variant", void 0);
 __decorate([
     property({ reflect: true, converter: reflectNonDefault('neutral') })
 ], NLDDTag.prototype, "color", void 0);
@@ -120,9 +123,6 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NLDDTag.prototype, "icon", void 0);
-__decorate([
-    property({ reflect: true, converter: reflectNonDefault('') })
-], 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.template.js

@@ -17,8 +17,8 @@ export function template(component) {
 			${showIcon ? html `
 				<span class="tag__icon">
 					${component.icon
-        ? html `<nldd-icon name=${component.icon}></nldd-icon>`
-        : html `<slot name="icon">${variant === 'icon' ? html `<nldd-icon name="icon-placeholder"></nldd-icon>` : nothing}</slot>`}
+        ? html `<nldd-icon icon=${component.icon}></nldd-icon>`
+        : html `<slot name="icon">${variant === 'icon' ? html `<nldd-icon icon="icon-placeholder"></nldd-icon>` : nothing}</slot>`}
 				</span>
 			` : nothing}
 			${showText ? html `

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

@@ -1,8 +1,14 @@
 /**
  * Nederlandse Digitale Dienst Title Bar Component (Lit + TypeScript)
  *
- * A title bar with an optional overline, title, and subtitle on the left, and a
- * slot at the end of the title line on the right.
+ * A title bar with an optional overline, title, and supporting text on the left,
+ * and a slot at the end of the title line on the right.
+ *
+ * The title comes from `text`, with `heading-level` for its place in the
+ * heading structure. `size` is how it looks, `heading-level` what it is, and
+ * the two are set apart. `overline` and `supporting-text` go above and below
+ * it. Each of the three has a slot in the same place for content that is more
+ * than text, and a filled slot takes the place of the attribute.
  *
  * @element nldd-title
  *
@@ -10,20 +16,38 @@
  * @attr {string} color - 'content' (the default) takes the system's own content
  *   colors. 'inherit' lets the title follow the text color of the surface
  *   instead (for colored areas such as the filled categories); overline and
- *   subtitle get the same color at a lowered opacity.
+ *   supporting-text get the same color at a lowered opacity.
+ * @attr {string} text - Title text. Content in the default slot takes its place.
+ * @attr {string} supporting-text - Text below the title. Content in the supporting-text slot takes its place.
+ * @attr {string} overline - Text above the title. Content in the overline slot takes its place.
+ * @attr {1|2|3|4|5|6} heading-level - Renders text as h1–h6; absent renders a p, for a title that is not a heading.
  *
- * @slot overline - Optional overline above the title
- * @slot - Title text (use h1–h6 for semantics)
- * @slot subtitle - Optional subtitle below the title
+ * @slot overline - Overline that is more than text. Takes the place of the overline attribute.
+ * @slot - Title that is more than text, such as a link. Takes the place of text, and brings its own h1–h6 for semantics.
+ * @slot supporting-text - Supporting text that is more than text. Takes the place of the supporting-text attribute.
  * @slot end - Whatever belongs at the end of the title line: a button, a menu, a status badge, a version. Named for the position, not for a kind of content, because anything can sit there.
  */
 import { LitElement } from 'lit';
 type Size = 1 | 2 | 3 | 4 | 5 | 6;
 type TitleColor = 'content' | 'inherit';
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export declare class NLDDTitle extends LitElement {
     static styles: import("lit").CSSResult;
     size: Size;
     color: TitleColor;
+    text: string;
+    supportingText: string;
+    overline: string;
+    headingLevel: HeadingLevel | null;
+    /** @internal */
+    _hasOverlineSlotted: boolean;
+    /** @internal */
+    _hasDefaultSlotted: boolean;
+    /** @internal */
+    _hasSupportingTextSlotted: boolean;
+    /** @internal */
+    _onSlotChange: (e: Event) => void;
+    firstUpdated(): void;
     render(): import("lit-html").TemplateResult;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../../../src/components/content/title/title.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMjC,KAAK,IAAI,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAClC,KAAK,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;AAExC,qBACa,SAAU,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAAe;IAGrC,IAAI,EAAE,IAAI,CAAK;IAGf,KAAK,EAAE,UAAU,CAAa;IAErB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}
+{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../../../src/components/content/title/title.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMjC,KAAK,IAAI,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAClC,KAAK,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;AACxC,KAAK,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAK1C,qBACa,SAAU,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAAe;IAGrC,IAAI,EAAE,IAAI,CAAK;IAGf,KAAK,EAAE,UAAU,CAAa;IAG9B,IAAI,SAAM;IAGV,cAAc,SAAM;IAGpB,QAAQ,SAAM;IAGd,YAAY,EAAE,YAAY,GAAG,IAAI,CAAQ;IAEzC,gBAAgB;IACP,mBAAmB,UAAS;IACrC,gBAAgB;IACP,kBAAkB,UAAS;IACpC,gBAAgB;IACP,yBAAyB,UAAS;IAE3C,gBAAgB;IAChB,aAAa,GAAI,GAAG,KAAK,KAAG,IAAI,CAS9B;IAEO,YAAY,IAAI,IAAI;IASpB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}

package/dist/components/content/title/title.js

@@ -7,8 +7,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 /**
  * Nederlandse Digitale Dienst Title Bar Component (Lit + TypeScript)
  *
- * A title bar with an optional overline, title, and subtitle on the left, and a
- * slot at the end of the title line on the right.
+ * A title bar with an optional overline, title, and supporting text on the left,
+ * and a slot at the end of the title line on the right.
+ *
+ * The title comes from `text`, with `heading-level` for its place in the
+ * heading structure. `size` is how it looks, `heading-level` what it is, and
+ * the two are set apart. `overline` and `supporting-text` go above and below
+ * it. Each of the three has a slot in the same place for content that is more
+ * than text, and a filled slot takes the place of the attribute.
  *
  * @element nldd-title
  *
@@ -16,26 +22,63 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @attr {string} color - 'content' (the default) takes the system's own content
  *   colors. 'inherit' lets the title follow the text color of the surface
  *   instead (for colored areas such as the filled categories); overline and
- *   subtitle get the same color at a lowered opacity.
+ *   supporting-text get the same color at a lowered opacity.
+ * @attr {string} text - Title text. Content in the default slot takes its place.
+ * @attr {string} supporting-text - Text below the title. Content in the supporting-text slot takes its place.
+ * @attr {string} overline - Text above the title. Content in the overline slot takes its place.
+ * @attr {1|2|3|4|5|6} heading-level - Renders text as h1–h6; absent renders a p, for a title that is not a heading.
  *
- * @slot overline - Optional overline above the title
- * @slot - Title text (use h1–h6 for semantics)
- * @slot subtitle - Optional subtitle below the title
+ * @slot overline - Overline that is more than text. Takes the place of the overline attribute.
+ * @slot - Title that is more than text, such as a link. Takes the place of text, and brings its own h1–h6 for semantics.
+ * @slot supporting-text - Supporting text that is more than text. Takes the place of the supporting-text attribute.
  * @slot end - Whatever belongs at the end of the title line: a button, a menu, a status badge, a version. Named for the position, not for a kind of content, because anything can sit there.
  */
 import { LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { reflectNonDefault } from '../../../utilities/reflect-non-default.js';
 import { titleStyles } from './title.styles.js';
 import { titleTemplate } from './title.template.js';
+/** One warning per page: a missed rename is one search-and-replace, not one per title. */
+let warnedAboutSubtitle = false;
 let NLDDTitle = class NLDDTitle extends LitElement {
     constructor() {
         super(...arguments);
         this.size = 3;
         this.color = 'content';
+        this.text = '';
+        this.supportingText = '';
+        this.overline = '';
+        this.headingLevel = null;
+        /** @internal */
+        this._hasOverlineSlotted = false;
+        /** @internal */
+        this._hasDefaultSlotted = false;
+        /** @internal */
+        this._hasSupportingTextSlotted = false;
+        /** @internal */
+        this._onSlotChange = (e) => {
+            const slot = e.target;
+            // Whitespace between the tags is not content: without this check the text
+            // would vanish behind a slot that only holds a newline.
+            const hasContent = slot.assignedNodes().some((node) => node.nodeType === Node.ELEMENT_NODE || (node.textContent ?? '').trim().length > 0);
+            if (slot.name === 'overline')
+                this._hasOverlineSlotted = hasContent;
+            else if (slot.name === 'supporting-text')
+                this._hasSupportingTextSlotted = hasContent;
+            else
+                this._hasDefaultSlotted = hasContent;
+        };
+    }
+    firstUpdated() {
+        // The subtitle slot was renamed to supporting-text. Content in a slot that
+        // no longer exists is not rendered and reports nothing, so say it here.
+        if (import.meta.env?.DEV && !warnedAboutSubtitle && this.querySelector(':scope > [slot="subtitle"]')) {
+            warnedAboutSubtitle = true;
+            console.warn('NLDDTitle: the subtitle slot is now supporting-text. Rename slot="subtitle" to slot="supporting-text", or use the supporting-text attribute, here and on every other nldd-title.');
+        }
     }
     render() {
-        return titleTemplate();
+        return titleTemplate(this);
     }
 };
 NLDDTitle.styles = titleStyles;
@@ -45,6 +88,27 @@ __decorate([
 __decorate([
     property({ reflect: true, converter: reflectNonDefault('content') })
 ], NLDDTitle.prototype, "color", void 0);
+__decorate([
+    property({ reflect: true, converter: reflectNonDefault('') })
+], NLDDTitle.prototype, "text", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'supporting-text', converter: reflectNonDefault('') })
+], NLDDTitle.prototype, "supportingText", void 0);
+__decorate([
+    property({ reflect: true, converter: reflectNonDefault('') })
+], NLDDTitle.prototype, "overline", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'heading-level' })
+], NLDDTitle.prototype, "headingLevel", void 0);
+__decorate([
+    state()
+], NLDDTitle.prototype, "_hasOverlineSlotted", void 0);
+__decorate([
+    state()
+], NLDDTitle.prototype, "_hasDefaultSlotted", void 0);
+__decorate([
+    state()
+], NLDDTitle.prototype, "_hasSupportingTextSlotted", void 0);
 NLDDTitle = __decorate([
     customElement('nldd-title')
 ], NLDDTitle);

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

@@ -1 +1 @@
-{"version":3,"file":"title.js","sourceRoot":"","sources":["../../../../src/components/content/title/title.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAM7C,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAIN,SAAI,GAAS,CAAC,CAAC;QAGf,UAAK,GAAe,SAAS,CAAC;IAK/B,CAAC;IAHS,MAAM;QACd,OAAO,aAAa,EAAE,CAAC;IACxB,CAAC;;AAVe,gBAAM,GAAG,WAAW,AAAd,CAAe;AAGrC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAC3B;AAGf;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,CAAa,SAAS,CAAC,EAAE,CAAC;wCACnD;AAPlB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAYrB"}
+{"version":3,"file":"title.js","sourceRoot":"","sources":["../../../../src/components/content/title/title.ts"],"names":[],"mappings":"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"}

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":"AASA,eAAO,MAAM,WAAW,yBAuPvB,CAAC"}
+{"version":3,"file":"title.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/title/title.styles.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,WAAW,yBA4RvB,CAAC"}

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

@@ -199,6 +199,13 @@ export const titleStyles = css `
 		flex-basis: 0;
 	}
 
+	.title__overline {
+		margin: 0;
+		color: var(--semantics-content-secondary-color);
+		font: var(--primitives-font-body-sm-regular-tight);
+		overflow-wrap: anywhere;
+	}
+
 	::slotted([slot="overline"]) {
 		${slottedReset}
 		${inheritedTextReset}
@@ -210,6 +217,15 @@ export const titleStyles = css `
 
 	/* The measure is in ch, so one value covers every size: ch scales with the
 	   font, and 40 characters stays 40 characters at 18px and at 52px. */
+	.title__text {
+		margin: 0;
+		max-width: 40ch;
+		color: var(--semantics-content-color);
+		font: var(--_font);
+		overflow-wrap: anywhere;
+		text-wrap: balance;
+	}
+
 	::slotted(:not([slot])) {
 		${slottedReset}
 		${inheritedTextReset}
@@ -221,7 +237,14 @@ export const titleStyles = css `
 		text-wrap: balance !important;
 	}
 
-	::slotted([slot="subtitle"]) {
+	.title__supporting-text {
+		margin: 0;
+		color: var(--semantics-content-secondary-color);
+		font: var(--primitives-font-body-md-regular-tight);
+		overflow-wrap: anywhere;
+	}
+
+	::slotted([slot="supporting-text"]) {
 		${slottedReset}
 		${inheritedTextReset}
 		margin: 0 !important;
@@ -230,11 +253,25 @@ export const titleStyles = css `
 		overflow-wrap: anywhere !important;
 	}
 
-	:host([size="5"]) ::slotted([slot="subtitle"]),
-	:host([size="6"]) ::slotted([slot="subtitle"]) {
+	:host([size="5"]) .title__supporting-text,
+	:host([size="6"]) .title__supporting-text {
+		font: var(--primitives-font-body-sm-regular-tight);
+	}
+
+	:host([size="5"]) ::slotted([slot="supporting-text"]),
+	:host([size="6"]) ::slotted([slot="supporting-text"]) {
 		font: var(--primitives-font-body-sm-regular-tight) !important;
 	}
 
+	:host([color="inherit"]) .title__text {
+		color: inherit;
+	}
+
+	:host([color="inherit"]) .title__overline,
+	:host([color="inherit"]) .title__supporting-text {
+		color: color-mix(in oklab, currentColor var(--semantics-content-secondary-opacity), transparent);
+	}
+
 	/* !important matches the hardened slotted rules above. */
 
 	:host([color="inherit"]) ::slotted(:not([slot])) {
@@ -242,7 +279,7 @@ export const titleStyles = css `
 	}
 
 	:host([color="inherit"]) ::slotted([slot="overline"]),
-	:host([color="inherit"]) ::slotted([slot="subtitle"]) {
+	:host([color="inherit"]) ::slotted([slot="supporting-text"]) {
 		color: color-mix(in oklab, currentColor var(--semantics-content-secondary-opacity), transparent) !important;
 	}
 

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

@@ -1 +1 @@
-{"version":3,"file":"title.styles.js","sourceRoot":"","sources":["../../../../src/components/content/title/title.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE3F,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;uBASP,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK,qBAAqB,KAAK;;;;4CAI/B,KAAK;;;;IAI7C,kBAAkB;;;;;uBAKC,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK,qBAAqB,KAAK;;;;4CAI/B,KAAK;;;;;;uBAM1B,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK,qBAAqB,KAAK;;;;4CAI/B,KAAK;;;;;;uBAM1B,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK,qBAAqB,KAAK;;;;4CAI/B,KAAK;;;;;;uBAM1B,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK,qBAAqB,KAAK;;;;4CAI/B,KAAK;;;;;;uBAM1B,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK,qBAAqB,KAAK;;;;4CAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiC7C,YAAY;IACZ,kBAAkB;;;;;;;;;;IAUlB,YAAY;IACZ,kBAAkB;;;;;;;;;;IAUlB,YAAY;IACZ,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BrB,CAAC"}
+{"version":3,"file":"title.styles.js","sourceRoot":"","sources":["../../../../src/components/content/title/title.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE3F,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;uBASP,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK,qBAAqB,KAAK;;;;4CAI/B,KAAK;;;;IAI7C,kBAAkB;;;;;uBAKC,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK,qBAAqB,KAAK;;;;4CAI/B,KAAK;;;;;;uBAM1B,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK,qBAAqB,KAAK;;;;4CAI/B,KAAK;;;;;;uBAM1B,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK,qBAAqB,KAAK;;;;4CAI/B,KAAK;;;;;;uBAM1B,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK,qBAAqB,KAAK;;;;4CAI/B,KAAK;;;;;;uBAM1B,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK,qBAAqB,KAAK;;;;4CAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwC7C,YAAY;IACZ,kBAAkB;;;;;;;;;;;;;;;;;;;IAmBlB,YAAY;IACZ,kBAAkB;;;;;;;;;;;;;;;;;IAiBlB,YAAY;IACZ,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CrB,CAAC"}

package/dist/components/content/title/title.template.d.ts

@@ -1,3 +1,4 @@
 import { TemplateResult } from 'lit';
-export declare function titleTemplate(): TemplateResult;
+import type { NLDDTitle } from './title.js';
+export declare function titleTemplate(component: NLDDTitle): TemplateResult;
 //# sourceMappingURL=title.template.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"title.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/title/title.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3C,wBAAgB,aAAa,IAAI,cAAc,CAa9C"}
+{"version":3,"file":"title.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/title/title.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AAEpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAqB5C,wBAAgB,aAAa,CAAC,SAAS,EAAE,SAAS,GAAG,cAAc,CAsBlE"}

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

@@ -1,11 +1,39 @@
-import { html } from 'lit';
-export function titleTemplate() {
+import { html, nothing } from 'lit';
+import { html as staticHtml, unsafeStatic } from 'lit/static-html.js';
+// SAFETY: the only tags unsafeStatic ever sees. A heading-level outside the map
+// renders a <p>, so no tag name is derived from input.
+const HEADING_TAGS = {
+    1: unsafeStatic('h1'),
+    2: unsafeStatic('h2'),
+    3: unsafeStatic('h3'),
+    4: unsafeStatic('h4'),
+    5: unsafeStatic('h5'),
+    6: unsafeStatic('h6'),
+};
+function renderText(component) {
+    if (!component.text || component._hasDefaultSlotted)
+        return nothing;
+    const tag = component.headingLevel ? HEADING_TAGS[component.headingLevel] : undefined;
+    return tag
+        ? staticHtml `<${tag} class="title__text">${component.text}</${tag}>`
+        : html `<p class="title__text">${component.text}</p>`;
+}
+export function titleTemplate(component) {
     return html `
 		<div class="title">
 			<div class="title__title-group">
-				<slot name="overline"></slot>
-				<slot></slot>
-				<slot name="subtitle"></slot>
+				${component.overline && !component._hasOverlineSlotted ? html `<p class="title__overline">${component.overline}</p>` : nothing}
+				<slot
+					name="overline"
+					@slotchange=${component._onSlotChange}
+				></slot>
+				${renderText(component)}
+				<slot @slotchange=${component._onSlotChange}></slot>
+				${component.supportingText && !component._hasSupportingTextSlotted ? html `<p class="title__supporting-text">${component.supportingText}</p>` : nothing}
+				<slot
+					name="supporting-text"
+					@slotchange=${component._onSlotChange}
+				></slot>
 			</div>
 			<div class="title__end">
 				<slot name="end"></slot>

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

@@ -1 +1 @@
-{"version":3,"file":"title.template.js","sourceRoot":"","sources":["../../../../src/components/content/title/title.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAE3C,MAAM,UAAU,aAAa;IAC5B,OAAO,IAAI,CAAA;;;;;;;;;;;EAWV,CAAC;AACH,CAAC"}
+{"version":3,"file":"title.template.js","sourceRoot":"","sources":["../../../../src/components/content/title/title.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACpD,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGtE,gFAAgF;AAChF,uDAAuD;AACvD,MAAM,YAAY,GAAoD;IACrE,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC;IACrB,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC;IACrB,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC;IACrB,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC;IACrB,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC;IACrB,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC;CACrB,CAAC;AAEF,SAAS,UAAU,CAAC,SAAoB;IACvC,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,SAAS,CAAC,kBAAkB;QAAE,OAAO,OAAO,CAAC;IACpE,MAAM,GAAG,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACtF,OAAO,GAAG;QACT,CAAC,CAAC,UAAU,CAAA,IAAI,GAAG,wBAAwB,SAAS,CAAC,IAAI,KAAK,GAAG,GAAG;QACpE,CAAC,CAAC,IAAI,CAAA,0BAA0B,SAAS,CAAC,IAAI,MAAM,CAAC;AACvD,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,SAAoB;IACjD,OAAO,IAAI,CAAA;;;MAGN,SAAS,CAAC,QAAQ,IAAI,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAAI,CAAA,8BAA8B,SAAS,CAAC,QAAQ,MAAM,CAAC,CAAC,CAAC,OAAO;;;mBAG9G,SAAS,CAAC,aAAa;;MAEpC,UAAU,CAAC,SAAS,CAAC;wBACH,SAAS,CAAC,aAAa;MACzC,SAAS,CAAC,cAAc,IAAI,CAAC,SAAS,CAAC,yBAAyB,CAAC,CAAC,CAAC,IAAI,CAAA,qCAAqC,SAAS,CAAC,cAAc,MAAM,CAAC,CAAC,CAAC,OAAO;;;mBAGvI,SAAS,CAAC,aAAa;;;;;;;EAOxC,CAAC;AACH,CAAC"}

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

@@ -12,11 +12,12 @@
  *
  * @attr {string} text - Token text; falls back to the default slot when unset.
  * @attr {'none' | 'dismiss' | 'menu'} control - Control type (default: 'none')
+ * @attr {string} dismiss-text - Accessible label for the dismiss button. Unset, it names the token: `Verwijder "{text}"`, so a row of tokens does not read as a row of identical buttons.
+ * @attr {string} menu-text - Accessible label for the menu button. Unset, it is `Toon opties voor "{text}"`.
+ * @attr {object} translations - Override translation keys; unset keys fall back to Dutch
+ * @attr {boolean} roving - Inside a roving-focus container (e.g. nldd-token-field): the host is the single tab stop, so the trailing control is not separately tabbable.
  * @attr {boolean} expanded - Reflects whether the token's menu is open (control="menu"); managed by the token.
  * @attr {boolean} disabled - Disabled state
- * @attr {string} dismiss-text - Accessible label for the dismiss button (default: 'Verwijder')
- * @attr {string} menu-text - Accessible label for the menu button (default: 'Toon opties')
- * @attr {boolean} roving - Inside a roving-focus container (e.g. nldd-token-field): the host is the single tab stop, so the trailing control is not separately tabbable.
  *
  * @slot - Token text
  * @slot menu - An nldd-menu that the token opens from its menu button (control="menu").
@@ -24,6 +25,7 @@
  * @fires dismiss - When the dismiss button is clicked
  */
 import { LitElement } from 'lit';
+import { type NLDDTokenTranslations } from './token.i18n.js';
 import './../../actions/icon-button/icon-button.js';
 export type TokenControl = 'none' | 'dismiss' | 'menu';
 export declare class NLDDToken extends LitElement {
@@ -32,15 +34,23 @@ export declare class NLDDToken extends LitElement {
      *  content keeps working. */
     text: string;
     control: TokenControl;
-    expanded: boolean;
-    disabled: boolean;
     dismissText: string;
     menuText: string;
+    translations: Partial<NLDDTokenTranslations>;
     /** Inside a roving-focus container (e.g. nldd-token-field): the host carries the
      *  single tab stop and manages focus itself, so the trailing control (dismiss or
      *  menu) is taken out of the tab order — it stays reachable by mouse and by the
      *  host's own key handlers. */
     roving: boolean;
+    expanded: boolean;
+    disabled: boolean;
+    /** Text of the default slot, kept current for the control labels. */
+    private _slotText;
+    private _textObserver;
+    private _readSlotText;
+    _t(key: keyof NLDDTokenTranslations): string;
+    get _dismissLabel(): string;
+    get _menuLabel(): string;
     _handleDismiss(e: Event): void;
     private _menuButton?;
     private _menu;

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

@@ -1 +1 @@
-{"version":3,"file":"token.d.ts","sourceRoot":"","sources":["../../../../src/components/content/token/token.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMjC,OAAO,4CAA4C,CAAC;AAEpD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAEvD,qBACa,SAAU,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAAe;IAErC;iCAC6B;IAE7B,IAAI,SAAM;IAGV,OAAO,EAAE,YAAY,CAAU;IAG/B,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,WAAW,SAAe;IAG1B,QAAQ,SAAiB;IAEzB;;;mCAG+B;IAE/B,MAAM,UAAS;IAEf,cAAc,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAU9B,OAAO,CAAC,WAAW,CAAC,CAAc;IAElC,OAAO,CAAC,KAAK,CAAyB;IACtC,OAAO,CAAC,qBAAqB,CAAS;IAEtC;wFACoF;IACpF,iBAAiB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAajC,OAAO,CAAC,iBAAiB,CAUvB;IAEF;oFACgF;IAChF,4BAA4B,IAAI,IAAI;IAIpC,gBAAgB,IAAI,IAAI;IAYf,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAKrC;;uFAEmF;IACnF,OAAO,CAAC,kBAAkB,CAOxB;IAEF;;;0FAGsF;IAC7E,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAKnC,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}
+{"version":3,"file":"token.d.ts","sourceRoot":"","sources":["../../../../src/components/content/token/token.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,EAAyB,KAAK,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAEpF,OAAO,4CAA4C,CAAC;AAEpD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAEvD,qBACa,SAAU,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAAe;IAErC;iCAC6B;IAE7B,IAAI,SAAM;IAGV,OAAO,EAAE,YAAY,CAAU;IAG/B,WAAW,SAAM;IAGjB,QAAQ,SAAM;IAGd,YAAY,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAM;IAElD;;;mCAG+B;IAE/B,MAAM,UAAS;IAGf,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB,qEAAqE;IAErE,OAAO,CAAC,SAAS,CAAM;IAEvB,OAAO,CAAC,aAAa,CAAoD;IAEzE,OAAO,CAAC,aAAa;IASd,EAAE,CAAC,GAAG,EAAE,MAAM,qBAAqB,GAAG,MAAM;IAInD,IAAI,aAAa,IAAI,MAAM,CAK1B;IAED,IAAI,UAAU,IAAI,MAAM,CAKvB;IAED,cAAc,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAU9B,OAAO,CAAC,WAAW,CAAC,CAAc;IAElC,OAAO,CAAC,KAAK,CAAyB;IACtC,OAAO,CAAC,qBAAqB,CAAS;IAEtC;wFACoF;IACpF,iBAAiB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAajC,OAAO,CAAC,iBAAiB,CAUvB;IAEF;oFACgF;IAChF,4BAA4B,IAAI,IAAI;IAIpC,gBAAgB,IAAI,IAAI;IAYf,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAMrC;;uFAEmF;IACnF,OAAO,CAAC,kBAAkB,CAOxB;IAEF;;;0FAGsF;IAC7E,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAKnC,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}

package/dist/components/content/token/token.i18n.d.ts

@@ -0,0 +1,7 @@
+export declare const nlddTokenTranslations: {
+    'components.token.dismiss-action': string;
+    'components.token.open-menu-action': string;
+    'components.token.open-token-menu-action': string;
+};
+export type NLDDTokenTranslations = typeof nlddTokenTranslations;
+//# sourceMappingURL=token.i18n.d.ts.map

package/dist/components/content/token/token.i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"token.i18n.d.ts","sourceRoot":"","sources":["../../../../src/components/content/token/token.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB;;;;CAIjC,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,OAAO,qBAAqB,CAAC"}

package/dist/components/content/token/token.i18n.js

@@ -0,0 +1,6 @@
+export const nlddTokenTranslations = {
+    'components.token.dismiss-action': 'Verwijder',
+    'components.token.open-menu-action': 'Toon opties',
+    'components.token.open-token-menu-action': 'Toon opties voor',
+};
+//# sourceMappingURL=token.i18n.js.map

package/dist/components/content/token/token.i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"token.i18n.js","sourceRoot":"","sources":["../../../../src/components/content/token/token.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACpC,iCAAiC,EAAE,WAAW;IAC9C,mCAAmC,EAAE,aAAa;IAClD,yCAAyC,EAAE,kBAAkB;CAC7D,CAAC"}