@nldd/design-system 0.8.95 → 0.8.97

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

@@ -9,16 +9,18 @@ export const keyboardShortcutStyles = css `
 	/* # Host */
 
 	:host {
-		--_size: var(--components-keyboard-shortcut-md-size);
-		--_inline-padding: var(--primitives-space-4);
-		--_font-family: var(--primitives-font-family-monospace);
-		--_font-size: var(--primitives-font-size-80);
-		--_font-weight: var(--primitives-font-weight-body-regular);
-		--_line-height: var(--primitives-line-height-flat);
-		--_content-color: var(--components-keyboard-shortcut-content-color);
-		--_separator-color: var(--components-keyboard-shortcut-separator-color);
-		--_highlight-border-color: var(--components-keyboard-shortcut-border-color);
-		--_background-color: var(--components-keyboard-shortcut-background-color);
+		--_keyboard-shortcut-size: var(--primitives-space-24);
+		--_keyboard-shortcut-inline-padding: var(--primitives-space-4);
+		--_keyboard-shortcut-font-family: var(--primitives-font-family-monospace);
+		--_keyboard-shortcut-font-size: var(--primitives-font-size-80);
+		--_keyboard-shortcut-font-weight: var(--primitives-font-weight-body-regular);
+		--_keyboard-shortcut-line-height: var(--primitives-line-height-flat);
+		--_keyboard-shortcut-content-color: var(--semantics-content-color);
+		--_keyboard-shortcut-separator-color: var(--semantics-content-secondary-color);
+		--_keyboard-shortcut-highlight-border-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-250));
+		--_keyboard-shortcut-background-color: var(--semantics-surfaces-tinted-background-color);
+		--_keyboard-shortcut-border-width: var(--primitives-border-width-thin);
+		--_keyboard-shortcut-corner-radius: var(--primitives-corner-radius-xs);
 
 		${inheritedTextReset}
 		display: inline-flex;
@@ -26,34 +28,34 @@ export const keyboardShortcutStyles = css `
 	}
 
 	:host([color="inherit"]) {
-		--_content-color: currentColor;
-		--_separator-color: currentColor;
-		--_highlight-border-color: color-mix(in oklab, var(--semantics-content-contrast-color) 10%, transparent);
-		--_background-color: color-mix(in oklab, var(--semantics-content-contrast-color) 20%, transparent);
+		--_keyboard-shortcut-content-color: currentColor;
+		--_keyboard-shortcut-separator-color: currentColor;
+		--_keyboard-shortcut-highlight-border-color: color-mix(in oklab, var(--semantics-content-contrast-color) 10%, transparent);
+		--_keyboard-shortcut-background-color: color-mix(in oklab, var(--semantics-content-contrast-color) 20%, transparent);
 	}
 
 	:host([size="sm"]) {
-		--_size: var(--components-keyboard-shortcut-sm-size);
-		--_font-size: var(--primitives-font-size-70);
+		--_keyboard-shortcut-size: var(--primitives-space-20);
+		--_keyboard-shortcut-font-size: var(--primitives-font-size-70);
 	}
 
 	:host([size="inherit"]) {
-		--_size: 1.5em;
-		--_inline-padding: 0.35em;
-		--_font-size: 0.75em;
+		--_keyboard-shortcut-size: 1.5em;
+		--_keyboard-shortcut-inline-padding: 0.35em;
+		--_keyboard-shortcut-font-size: 0.75em;
 	}
 
 	:host([appearance="simple"]) {
-		--_font-family: var(--primitives-font-family-body);
-		--_font-size: var(--primitives-font-size-100);
+		--_keyboard-shortcut-font-family: var(--primitives-font-family-body);
+		--_keyboard-shortcut-font-size: var(--primitives-font-size-100);
 	}
 
 	:host([appearance="simple"][size="sm"]) {
-		--_font-size: var(--primitives-font-size-90);
+		--_keyboard-shortcut-font-size: var(--primitives-font-size-90);
 	}
 
 	:host([appearance="simple"][size="inherit"]) {
-		--_font-size: inherit;
+		--_keyboard-shortcut-font-size: inherit;
 	}
 
 	:host([hidden]) {
@@ -90,19 +92,19 @@ export const keyboardShortcutStyles = css `
 	.keyboard-shortcut__key {
 		box-sizing: border-box;
 		display: inline-flex;
-		box-shadow: inset 0 0 0 var(--components-keyboard-shortcut-border-width) var(--_highlight-border-color);
-		border-radius: var(--components-keyboard-shortcut-corner-radius);
-		background-color: var(--_background-color);
-		min-width: var(--_size);
-		height: var(--_size);
-		padding: 0 var(--_inline-padding);
+		box-shadow: inset 0 0 0 var(--_keyboard-shortcut-border-width) var(--_keyboard-shortcut-highlight-border-color);
+		border-radius: var(--_keyboard-shortcut-corner-radius);
+		background-color: var(--_keyboard-shortcut-background-color);
+		min-width: var(--_keyboard-shortcut-size);
+		height: var(--_keyboard-shortcut-size);
+		padding: 0 var(--_keyboard-shortcut-inline-padding);
 		align-items: center;
 		justify-content: center;
-		color: var(--_content-color);
-		font-family: var(--_font-family);
-		font-size: var(--_font-size);
-		font-weight: var(--_font-weight);
-		line-height: var(--_line-height);
+		color: var(--_keyboard-shortcut-content-color);
+		font-family: var(--_keyboard-shortcut-font-family);
+		font-size: var(--_keyboard-shortcut-font-size);
+		font-weight: var(--_keyboard-shortcut-font-weight);
+		line-height: var(--_keyboard-shortcut-line-height);
 		white-space: nowrap;
 	}
 
@@ -125,17 +127,17 @@ export const keyboardShortcutStyles = css `
 		}
 
 		:host(:not([appearance="simple"])) .keyboard-shortcut__key {
-			border: var(--components-keyboard-shortcut-border-width) solid CanvasText;
+			border: var(--_keyboard-shortcut-border-width) solid CanvasText;
 			background-color: Canvas;
 		}
 	}
 
 	.keyboard-shortcut__separator {
-		color: var(--_separator-color);
-		font-family: var(--_font-family);
-		font-size: var(--_font-size);
-		font-weight: var(--_font-weight);
-		line-height: var(--_line-height);
+		color: var(--_keyboard-shortcut-separator-color);
+		font-family: var(--_keyboard-shortcut-font-family);
+		font-size: var(--_keyboard-shortcut-font-size);
+		font-weight: var(--_keyboard-shortcut-font-weight);
+		line-height: var(--_keyboard-shortcut-line-height);
 	}
 `;
 //# 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;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;IAoBrC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqHrB,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;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;IAsBrC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqHrB,CAAC"}

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

@@ -9,18 +9,30 @@
  * The rich text lays out its direct children in a grid: the vertical rhythm
  * between headings, paragraphs and lists, and the width zones below, apply to
  * those children only. A single wrapper `div` without `class`, `style`, `role`
- * or `data-width`, as a markdown renderer or a component root produces it, is
+ * or `data-rich-text-width`, as a markdown renderer or a component root produces it, is
  * passed through with `display: contents`, so its children count as direct.
  * Any other wrapper becomes a single grid item, and the paragraphs inside it
  * lose their spacing.
  *
+ * ## Headings
+ * The headings keep one size on every width, the one they have on a phone. A
+ * heading in running text sits in a column as wide as a line of reading, on
+ * any screen, so its relation to the text beside it does not change and it has
+ * no reason to grow. Growing, an h2 on a wide screen was more than twice the
+ * size of the text, and an article broke into blocks at every heading. Page
+ * and section titles do grow: use nldd-title for those.
+ *
  * ## Width zones
- * Children are placed in three zones: text (headings, paragraphs, lists,
- * blockquote, div/section) reads at the `main` size; media and tables (img,
- * figure, video, iframe, table) get the `wide` accent; everything else, code
- * blocks and every component, gets the full `full` span with
- * `justify-self: start`, so the room is available without being forced.
- * Overridable per child with `data-width="main" | "wide" | "full"`. In the
+ * Children are placed in three zones. A child belongs to the text unless it is
+ * listed, so it reads at the `main` size and is never wider than a line: text
+ * (headings, paragraphs, lists, blockquote, div/section) and every component
+ * that is not named below, such as nldd-box, nldd-card, nldd-banner,
+ * nldd-list and a button, and code (pre, nldd-code-viewer), which scrolls
+ * inside its block when a line is longer. Media, tables and a step bar (img, figure, video, iframe,
+ * table, nldd-table, nldd-image, nldd-step-bar) get the `wide` accent. What
+ * needs the room gets the `full` span: hr, nldd-collection and nldd-container. A child takes the room it needs inside its zone
+ * (`justify-self: start`), so the room is available without being forced.
+ * Overridable per child with `data-rich-text-width="main" | "wide" | "full"`. In the
  * left-aligned layout, wide and full read as a bleed to the right; with
  * `centered` they are symmetrical.
  *
@@ -36,11 +48,12 @@
  * @attr {boolean} centered - Centers the main column inside the container; without it, content is left-aligned
  * @attr {object} translations - Override translation keys; unset keys fall back to Dutch
  * @attr {boolean} hyphens - Opt-in automatic hyphenation for running text (p,
- *   li, dd). Needs a correct `lang` on the page (`lang="nl"` on `<html>`, for
- *   instance): without language information the browser does not hyphenate. An
- *   `overflow-wrap: break-word` safety net on p/li is always on, independent of
- *   this attribute, so long URLs and compounds break neatly instead of
- *   overflowing even without a dictionary.
+ *   li, dd). Needs a correct
+ *   `lang` on the page (`lang="nl"` on `<html>`, for instance): without
+ *   language information the browser does not hyphenate. An
+ *   `overflow-wrap: break-word` safety net on headings, p and li is always on,
+ *   independent of this attribute, so a word wider than the column breaks
+ *   instead of overflowing, without a hyphen; headings never get one.
  */
 import { LitElement } from 'lit';
 import type { NLDDRichTextTranslations } from './rich-text.i18n.js';

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAGpE,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AAInD,qBACa,YAAa,SAAQ,UAAU;IAE3C,KAAK,EAAE,SAAS,GAAG,SAAS,CAAa;IAGzC,OAAO,EAAE,OAAO,CAAU;IAG1B,QAAQ,UAAS;IAGjB,YAAY,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAM;IAGrD,OAAO,UAAS;IAET,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,qEAAqE;IAC5D,OAAO,IAAI,IAAI;IAMxB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAGpE,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AAInD,qBACa,YAAa,SAAQ,UAAU;IAE3C,KAAK,EAAE,SAAS,GAAG,SAAS,CAAa;IAGzC,OAAO,EAAE,OAAO,CAAU;IAG1B,QAAQ,UAAS;IAGjB,YAAY,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAM;IAGrD,OAAO,UAAS;IAET,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,qEAAqE;IAC5D,OAAO,IAAI,IAAI;IAMxB,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

@@ -15,18 +15,30 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * The rich text lays out its direct children in a grid: the vertical rhythm
  * between headings, paragraphs and lists, and the width zones below, apply to
  * those children only. A single wrapper `div` without `class`, `style`, `role`
- * or `data-width`, as a markdown renderer or a component root produces it, is
+ * or `data-rich-text-width`, as a markdown renderer or a component root produces it, is
  * passed through with `display: contents`, so its children count as direct.
  * Any other wrapper becomes a single grid item, and the paragraphs inside it
  * lose their spacing.
  *
+ * ## Headings
+ * The headings keep one size on every width, the one they have on a phone. A
+ * heading in running text sits in a column as wide as a line of reading, on
+ * any screen, so its relation to the text beside it does not change and it has
+ * no reason to grow. Growing, an h2 on a wide screen was more than twice the
+ * size of the text, and an article broke into blocks at every heading. Page
+ * and section titles do grow: use nldd-title for those.
+ *
  * ## Width zones
- * Children are placed in three zones: text (headings, paragraphs, lists,
- * blockquote, div/section) reads at the `main` size; media and tables (img,
- * figure, video, iframe, table) get the `wide` accent; everything else, code
- * blocks and every component, gets the full `full` span with
- * `justify-self: start`, so the room is available without being forced.
- * Overridable per child with `data-width="main" | "wide" | "full"`. In the
+ * Children are placed in three zones. A child belongs to the text unless it is
+ * listed, so it reads at the `main` size and is never wider than a line: text
+ * (headings, paragraphs, lists, blockquote, div/section) and every component
+ * that is not named below, such as nldd-box, nldd-card, nldd-banner,
+ * nldd-list and a button, and code (pre, nldd-code-viewer), which scrolls
+ * inside its block when a line is longer. Media, tables and a step bar (img, figure, video, iframe,
+ * table, nldd-table, nldd-image, nldd-step-bar) get the `wide` accent. What
+ * needs the room gets the `full` span: hr, nldd-collection and nldd-container. A child takes the room it needs inside its zone
+ * (`justify-self: start`), so the room is available without being forced.
+ * Overridable per child with `data-rich-text-width="main" | "wide" | "full"`. In the
  * left-aligned layout, wide and full read as a bleed to the right; with
  * `centered` they are symmetrical.
  *
@@ -42,11 +54,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @attr {boolean} centered - Centers the main column inside the container; without it, content is left-aligned
  * @attr {object} translations - Override translation keys; unset keys fall back to Dutch
  * @attr {boolean} hyphens - Opt-in automatic hyphenation for running text (p,
- *   li, dd). Needs a correct `lang` on the page (`lang="nl"` on `<html>`, for
- *   instance): without language information the browser does not hyphenate. An
- *   `overflow-wrap: break-word` safety net on p/li is always on, independent of
- *   this attribute, so long URLs and compounds break neatly instead of
- *   overflowing even without a dictionary.
+ *   li, dd). Needs a correct
+ *   `lang` on the page (`lang="nl"` on `<html>`, for instance): without
+ *   language information the browser does not hyphenate. An
+ *   `overflow-wrap: break-word` safety net on headings, p and li is always on,
+ *   independent of this attribute, so a word wider than the column breaks
+ *   instead of overflowing, without a hyphen; headings never get one.
  */
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';

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.styles.js

@@ -9,17 +9,17 @@ export const tagStyles = css `
 	/* # Host */
 
 	:host {
-		--_corner-radius: var(--components-tag-md-corner-radius);
-		--_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(--semantics-categories-neutral-tinted-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);
+		--_tag-corner-radius: var(--primitives-corner-radius-xs);
+		--_tag-background-color: var(--semantics-categories-neutral-tinted-background-color);
+		--_tag-min-height: var(--primitives-space-24);
+		--_tag-inline-padding: var(--primitives-space-6);
+		--_tag-gap: var(--primitives-space-3);
+		--_tag-content-color: var(--semantics-categories-neutral-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-neutral-tinted-highlight-border-color);
+		--_tag-border-width: var(--primitives-border-width-thin);
+		--_tag-font: var(--primitives-font-body-sm-medium-flat);
+		--_tag-icon-size: var(--primitives-space-16);
+		--_tag-icon-offset-correction: var(--primitives-space-1);
 
 		${inheritedTextReset}
 		display: inline-flex;
@@ -27,148 +27,148 @@ export const tagStyles = css `
 	}
 
 	: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-medium-flat);
-		--_icon-size: var(--primitives-space-14);
+		--_tag-corner-radius: var(--primitives-corner-radius-xxs);
+		--_tag-min-height: var(--primitives-space-20);
+		--_tag-inline-padding: var(--primitives-space-4);
+		--_tag-gap: var(--primitives-space-2);
+		--_tag-font: var(--primitives-font-body-xs-medium-flat);
+		--_tag-icon-size: var(--primitives-space-14);
 	}
 
 	/* ## Color */
 
 	:host([color="accent"]) {
-		--_background-color: var(--semantics-categories-accent-tinted-background-color);
-		--_content-color: var(--semantics-categories-accent-tinted-content-color);
-		--_border-color: var(--semantics-categories-accent-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-accent-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-accent-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-accent-tinted-highlight-border-color);
 	}
 
 	:host([color="success"]) {
-		--_background-color: var(--semantics-categories-success-tinted-background-color);
-		--_content-color: var(--semantics-categories-success-tinted-content-color);
-		--_border-color: var(--semantics-categories-success-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-success-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-success-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-success-tinted-highlight-border-color);
 	}
 
 	:host([color="warning"]) {
-		--_background-color: var(--semantics-categories-warning-tinted-background-color);
-		--_content-color: var(--semantics-categories-warning-tinted-content-color);
-		--_border-color: var(--semantics-categories-warning-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-warning-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-warning-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-warning-tinted-highlight-border-color);
 	}
 
 	:host([color="critical"]) {
-		--_background-color: var(--semantics-categories-critical-tinted-background-color);
-		--_content-color: var(--semantics-categories-critical-tinted-content-color);
-		--_border-color: var(--semantics-categories-critical-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-critical-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-critical-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-critical-tinted-highlight-border-color);
 	}
 
 	/* ### Rijkskleuren */
 
 	:host([color="lintblauw"]) {
-		--_background-color: var(--semantics-categories-lintblauw-tinted-background-color);
-		--_content-color: var(--semantics-categories-lintblauw-tinted-content-color);
-		--_border-color: var(--semantics-categories-lintblauw-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-lintblauw-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-lintblauw-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-lintblauw-tinted-highlight-border-color);
 	}
 
 	:host([color="donkerblauw"]) {
-		--_background-color: var(--semantics-categories-donkerblauw-tinted-background-color);
-		--_content-color: var(--semantics-categories-donkerblauw-tinted-content-color);
-		--_border-color: var(--semantics-categories-donkerblauw-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-donkerblauw-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-donkerblauw-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-donkerblauw-tinted-highlight-border-color);
 	}
 
 	:host([color="hemelblauw"]) {
-		--_background-color: var(--semantics-categories-hemelblauw-tinted-background-color);
-		--_content-color: var(--semantics-categories-hemelblauw-tinted-content-color);
-		--_border-color: var(--semantics-categories-hemelblauw-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-hemelblauw-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-hemelblauw-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-hemelblauw-tinted-highlight-border-color);
 	}
 
 	:host([color="lichtblauw"]) {
-		--_background-color: var(--semantics-categories-lichtblauw-tinted-background-color);
-		--_content-color: var(--semantics-categories-lichtblauw-tinted-content-color);
-		--_border-color: var(--semantics-categories-lichtblauw-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-lichtblauw-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-lichtblauw-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-lichtblauw-tinted-highlight-border-color);
 	}
 
 	:host([color="paars"]) {
-		--_background-color: var(--semantics-categories-paars-tinted-background-color);
-		--_content-color: var(--semantics-categories-paars-tinted-content-color);
-		--_border-color: var(--semantics-categories-paars-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-paars-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-paars-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-paars-tinted-highlight-border-color);
 	}
 
 	:host([color="violet"]) {
-		--_background-color: var(--semantics-categories-violet-tinted-background-color);
-		--_content-color: var(--semantics-categories-violet-tinted-content-color);
-		--_border-color: var(--semantics-categories-violet-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-violet-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-violet-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-violet-tinted-highlight-border-color);
 	}
 
 	:host([color="robijnrood"]) {
-		--_background-color: var(--semantics-categories-robijnrood-tinted-background-color);
-		--_content-color: var(--semantics-categories-robijnrood-tinted-content-color);
-		--_border-color: var(--semantics-categories-robijnrood-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-robijnrood-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-robijnrood-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-robijnrood-tinted-highlight-border-color);
 	}
 
 	:host([color="roze"]) {
-		--_background-color: var(--semantics-categories-roze-tinted-background-color);
-		--_content-color: var(--semantics-categories-roze-tinted-content-color);
-		--_border-color: var(--semantics-categories-roze-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-roze-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-roze-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-roze-tinted-highlight-border-color);
 	}
 
 	:host([color="rood"]) {
-		--_background-color: var(--semantics-categories-rood-tinted-background-color);
-		--_content-color: var(--semantics-categories-rood-tinted-content-color);
-		--_border-color: var(--semantics-categories-rood-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-rood-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-rood-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-rood-tinted-highlight-border-color);
 	}
 
 	:host([color="oranje"]) {
-		--_background-color: var(--semantics-categories-oranje-tinted-background-color);
-		--_content-color: var(--semantics-categories-oranje-tinted-content-color);
-		--_border-color: var(--semantics-categories-oranje-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-oranje-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-oranje-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-oranje-tinted-highlight-border-color);
 	}
 
 	:host([color="donkergeel"]) {
-		--_background-color: var(--semantics-categories-donkergeel-tinted-background-color);
-		--_content-color: var(--semantics-categories-donkergeel-tinted-content-color);
-		--_border-color: var(--semantics-categories-donkergeel-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-donkergeel-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-donkergeel-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-donkergeel-tinted-highlight-border-color);
 	}
 
 	:host([color="geel"]) {
-		--_background-color: var(--semantics-categories-geel-tinted-background-color);
-		--_content-color: var(--semantics-categories-geel-tinted-content-color);
-		--_border-color: var(--semantics-categories-geel-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-geel-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-geel-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-geel-tinted-highlight-border-color);
 	}
 
 	:host([color="donkerbruin"]) {
-		--_background-color: var(--semantics-categories-donkerbruin-tinted-background-color);
-		--_content-color: var(--semantics-categories-donkerbruin-tinted-content-color);
-		--_border-color: var(--semantics-categories-donkerbruin-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-donkerbruin-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-donkerbruin-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-donkerbruin-tinted-highlight-border-color);
 	}
 
 	:host([color="bruin"]) {
-		--_background-color: var(--semantics-categories-bruin-tinted-background-color);
-		--_content-color: var(--semantics-categories-bruin-tinted-content-color);
-		--_border-color: var(--semantics-categories-bruin-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-bruin-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-bruin-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-bruin-tinted-highlight-border-color);
 	}
 
 	:host([color="donkergroen"]) {
-		--_background-color: var(--semantics-categories-donkergroen-tinted-background-color);
-		--_content-color: var(--semantics-categories-donkergroen-tinted-content-color);
-		--_border-color: var(--semantics-categories-donkergroen-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-donkergroen-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-donkergroen-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-donkergroen-tinted-highlight-border-color);
 	}
 
 	:host([color="groen"]) {
-		--_background-color: var(--semantics-categories-groen-tinted-background-color);
-		--_content-color: var(--semantics-categories-groen-tinted-content-color);
-		--_border-color: var(--semantics-categories-groen-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-groen-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-groen-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-groen-tinted-highlight-border-color);
 	}
 
 	:host([color="mosgroen"]) {
-		--_background-color: var(--semantics-categories-mosgroen-tinted-background-color);
-		--_content-color: var(--semantics-categories-mosgroen-tinted-content-color);
-		--_border-color: var(--semantics-categories-mosgroen-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-mosgroen-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-mosgroen-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-mosgroen-tinted-highlight-border-color);
 	}
 
 	:host([color="mintgroen"]) {
-		--_background-color: var(--semantics-categories-mintgroen-tinted-background-color);
-		--_content-color: var(--semantics-categories-mintgroen-tinted-content-color);
-		--_border-color: var(--semantics-categories-mintgroen-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-mintgroen-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-mintgroen-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-mintgroen-tinted-highlight-border-color);
 	}
 
 	:host([hidden]) {
@@ -181,17 +181,17 @@ export const tagStyles = css `
 	.tag {
 		box-sizing: border-box;
 		display: inline-flex;
-		border-radius: var(--_corner-radius);
+		border-radius: var(--_tag-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);
-		gap: var(--_gap);
+		box-shadow: inset 0 0 0 var(--_tag-border-width) var(--_tag-border-color);
+		background-color: var(--_tag-background-color);
+		min-height: var(--_tag-min-height);
+		padding: 0 var(--_tag-inline-padding);
+		gap: var(--_tag-gap);
 		align-items: center;
-		color: var(--_content-color);
-		font: var(--_font);
+		color: var(--_tag-content-color);
+		font: var(--_tag-font);
 		white-space: nowrap;
 	}
 
@@ -208,15 +208,15 @@ export const tagStyles = css `
 
 	.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);
+		margin-inline: calc((var(--_tag-min-height) - var(--_tag-icon-size)) / 2 - var(--_tag-inline-padding));
+		width: var(--_tag-icon-size);
+		height: var(--_tag-icon-size);
 		flex-shrink: 0;
 		align-items: center;
 	}
 
 	.tag__icon:has(+ .tag__text) {
-		margin-left: calc((var(--_min-height) - var(--_icon-size)) / 2 - var(--_inline-padding) + var(--_icon-offset-correction));
+		margin-left: calc((var(--_tag-min-height) - var(--_tag-icon-size)) / 2 - var(--_tag-inline-padding) + var(--_tag-icon-offset-correction));
 		margin-right: 0;
 	}