@nldd/design-system 0.8.95 → 0.8.96

package/dist/components/{icon-button-9mo3oIyL.js → icon-button-mevRsl4C.js}

@@ -1,8 +1,8 @@
-import { t as inheritedTextReset } from "./shadow-resets-aG-rgyNQ.js";
+import { t as inheritedTextReset } from "./shadow-resets-CPa58rmc.js";
 import { i as linkRel, r as translate, t as withTranslations } from "./with-translations-C8_0-9y8.js";
 import { t as __decorate } from "./decorate-CO88j7Lc.js";
 import { t as reflectNonDefault } from "./reflect-non-default-OLaK60rT.js";
-import "./icon-Typdp4av.js";
+import "./icon-DQHT2C7z.js";
 import { r as isTouchMode } from "./input-modality-DhTeUxKi.js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
@@ -67,21 +67,21 @@ var activityIndicatorStyles = css`
 	/* # Host */
 
 	:host {
-		--_circle-size: var(--primitives-space-32);
-		--_color: var(--context-content-color, currentColor);
-		--_track-opacity: 0.25;
-		--_stroke-width: 2;
-		--_rotation-duration: 0.8s;
-		--_fade-duration: var(--primitives-transition-duration-slow);
-		--_fade-easing: ease-out;
-		--_pulse-duration: 2s;
-		--_pulse-easing: ease-in-out;
-		--_max-width: var(--primitives-area-240);
-		--_gap: var(--primitives-space-4);
-		--_text-font: var(--primitives-font-body-sm-regular-flat);
-		--_backdrop-blur: 3px;
-		--_overlay-panel-padding: var(--primitives-space-12);
-		--_overlay-panel-corner-radius: var(--primitives-corner-radius-md);
+		--_activity-indicator-circle-size: var(--primitives-space-32);
+		--_activity-indicator-color: var(--context-content-color, currentColor);
+		--_activity-indicator-track-opacity: 0.25;
+		--_activity-indicator-stroke-width: 2;
+		--_activity-indicator-rotation-duration: 0.8s;
+		--_activity-indicator-fade-duration: var(--primitives-transition-duration-slow);
+		--_activity-indicator-fade-easing: ease-out;
+		--_activity-indicator-pulse-duration: 2s;
+		--_activity-indicator-pulse-easing: ease-in-out;
+		--_activity-indicator-max-width: var(--primitives-area-240);
+		--_activity-indicator-gap: var(--primitives-space-4);
+		--_activity-indicator-text-font: var(--primitives-font-body-sm-regular-flat);
+		--_activity-indicator-backdrop-blur: 3px;
+		--_activity-indicator-overlay-panel-padding: var(--primitives-space-12);
+		--_activity-indicator-overlay-panel-corner-radius: var(--primitives-corner-radius-md);
 
 		${inheritedTextReset}
 		box-sizing: border-box;
@@ -111,17 +111,17 @@ var activityIndicatorStyles = css`
 
 	/* ## Sizes (icon scale) */
 
-	:host([size="16"]) { --_circle-size: var(--primitives-space-16); }
-	:host([size="20"]) { --_circle-size: var(--primitives-space-20); }
-	:host([size="24"]) { --_circle-size: var(--primitives-space-24); }
-	:host([size="28"]) { --_circle-size: var(--primitives-space-28); }
-	:host([size="40"]) { --_circle-size: var(--primitives-space-40); }
-	:host([size="44"]) { --_circle-size: var(--primitives-space-44); }
-	:host([size="48"]) { --_circle-size: var(--primitives-space-48); }
-	:host([size="56"]) { --_circle-size: var(--primitives-space-56); }
-	:host([size="64"]) { --_circle-size: var(--primitives-space-64); }
-	:host([size="80"]) { --_circle-size: var(--primitives-space-80); }
-	:host([size="96"]) { --_circle-size: var(--primitives-space-96); }
+	:host([size="16"]) { --_activity-indicator-circle-size: var(--primitives-space-16); }
+	:host([size="20"]) { --_activity-indicator-circle-size: var(--primitives-space-20); }
+	:host([size="24"]) { --_activity-indicator-circle-size: var(--primitives-space-24); }
+	:host([size="28"]) { --_activity-indicator-circle-size: var(--primitives-space-28); }
+	:host([size="40"]) { --_activity-indicator-circle-size: var(--primitives-space-40); }
+	:host([size="44"]) { --_activity-indicator-circle-size: var(--primitives-space-44); }
+	:host([size="48"]) { --_activity-indicator-circle-size: var(--primitives-space-48); }
+	:host([size="56"]) { --_activity-indicator-circle-size: var(--primitives-space-56); }
+	:host([size="64"]) { --_activity-indicator-circle-size: var(--primitives-space-64); }
+	:host([size="80"]) { --_activity-indicator-circle-size: var(--primitives-space-80); }
+	:host([size="96"]) { --_activity-indicator-circle-size: var(--primitives-space-96); }
 
 
 	/* # Block
@@ -140,13 +140,13 @@ var activityIndicatorStyles = css`
 		opacity: 0;
 		pointer-events: none;
 		width: 100%;
-		max-width: var(--_max-width);
+		max-width: var(--_activity-indicator-max-width);
 		flex-direction: column;
 		align-items: center;
-		gap: var(--_gap);
+		gap: var(--_activity-indicator-gap);
 		transition-property: opacity, display;
-		transition-duration: var(--_fade-duration);
-		transition-timing-function: var(--_fade-easing);
+		transition-duration: var(--_activity-indicator-fade-duration);
+		transition-timing-function: var(--_activity-indicator-fade-easing);
 		transition-behavior: allow-discrete;
 	}
 
@@ -176,11 +176,11 @@ var activityIndicatorStyles = css`
 		position: absolute;
 		top: 50%;
 		left: 50%;
-		border-radius: var(--_overlay-panel-corner-radius);
+		border-radius: var(--_activity-indicator-overlay-panel-corner-radius);
 		background-color: var(--semantics-surfaces-base-background-color);
 		width: max-content;
 		max-width: calc(100% - var(--primitives-space-32));
-		padding: var(--_overlay-panel-padding);
+		padding: var(--_activity-indicator-overlay-panel-padding);
 		color: var(--semantics-content-color);
 		transform: translate(-50%, -50%);
 	}
@@ -200,12 +200,12 @@ var activityIndicatorStyles = css`
 		   the content behind reads as inactive. backdrop-filter degrades
 		   gracefully where unsupported, leaving just the translucent fill. */
 		background-color: color-mix(in oklab, var(--context-parent-background-color, var(--semantics-surfaces-base-background-color)) calc((1 - var(--primitives-opacity-disabled)) * 100%), transparent);
-		-webkit-backdrop-filter: blur(var(--_backdrop-blur));
-		backdrop-filter: blur(var(--_backdrop-blur));
+		-webkit-backdrop-filter: blur(var(--_activity-indicator-backdrop-blur));
+		backdrop-filter: blur(var(--_activity-indicator-backdrop-blur));
 		pointer-events: none;
 		transition-property: opacity, display;
-		transition-duration: var(--_fade-duration);
-		transition-timing-function: var(--_fade-easing);
+		transition-duration: var(--_activity-indicator-fade-duration);
+		transition-timing-function: var(--_activity-indicator-fade-easing);
 		transition-behavior: allow-discrete;
 	}
 
@@ -232,14 +232,14 @@ var activityIndicatorStyles = css`
 	/* The whole SVG (stroke included) scales with the size, like an icon. */
 	.activity-indicator__circle {
 		display: block;
-		width: var(--_circle-size);
-		height: var(--_circle-size);
+		width: var(--_activity-indicator-circle-size);
+		height: var(--_activity-indicator-circle-size);
 	}
 
 	.activity-indicator__track {
-		opacity: var(--_track-opacity);
-		stroke: var(--_color);
-		stroke-width: var(--_stroke-width);
+		opacity: var(--_activity-indicator-track-opacity);
+		stroke: var(--_activity-indicator-color);
+		stroke-width: var(--_activity-indicator-stroke-width);
 	}
 
 	/* Rotate only the arc inside the SVG (around the view-box center via
@@ -247,12 +247,12 @@ var activityIndicatorStyles = css`
 	   element visibly wobbles when it sits at a sub-pixel position (next to a
 	   label, or overlaid on a button). Mirrors nldd-progress-circle. */
 	.activity-indicator__indicator {
-		stroke: var(--_color);
-		stroke-width: var(--_stroke-width);
+		stroke: var(--_activity-indicator-color);
+		stroke-width: var(--_activity-indicator-stroke-width);
 		stroke-linecap: round;
 		stroke-dasharray: 25 100;
 		transform-origin: 50% 50%;
-		animation: activity-indicator-rotate var(--_rotation-duration) linear infinite;
+		animation: activity-indicator-rotate var(--_activity-indicator-rotation-duration) linear infinite;
 	}
 
 	@keyframes activity-indicator-rotate {
@@ -261,7 +261,7 @@ var activityIndicatorStyles = css`
 
 	.activity-indicator__text {
 		color: currentColor;
-		font: var(--_text-font);
+		font: var(--_activity-indicator-text-font);
 		text-align: center;
 	}
 
@@ -289,7 +289,7 @@ var activityIndicatorStyles = css`
 		.activity-indicator__indicator {
 			/* Drop the rotation (vestibular safety); keep the 25 / 100 arc and
 			   pulse its opacity instead, mirroring nldd-progress-circle. */
-			animation: activity-indicator-pulse var(--_pulse-duration) var(--_pulse-easing) infinite;
+			animation: activity-indicator-pulse var(--_activity-indicator-pulse-duration) var(--_activity-indicator-pulse-easing) infinite;
 		}
 
 		@keyframes activity-indicator-pulse {
@@ -525,25 +525,25 @@ var iconButtonStyles = css`
 	/* # Host */
 
 	:host {
-		--_corner-radius: var(--semantics-controls-md-corner-radius);
-		--_width: auto;
-		--_min-size: var(--semantics-controls-md-min-size);
-		--_block-padding: var(--semantics-buttons-md-is-icon-only-inline-padding);
-		--_inline-padding: var(--semantics-buttons-md-is-icon-only-inline-padding);
-		--_icon-size: var(--semantics-buttons-md-is-icon-only-icon-size);
-		--_disclosure-icon-margin-right: calc(var(--primitives-space-2) * -1);
-		--_disclosure-icon-size: var(--primitives-space-20);
-		--_text-display: none;
-		--_text-font: var(--primitives-font-body-xxs-medium-flat);
-		--_background-color: var(--semantics-buttons-neutral-tinted-background-color);
-		--_primary-content-color: var(--semantics-buttons-neutral-tinted-content-color);
-		--_highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
-		--_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
-		--_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-hovered-highlight-border-color);
-		--_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
-		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-active-highlight-border-color);
+		--_icon-button-corner-radius: var(--semantics-controls-md-corner-radius);
+		--_icon-button-width: auto;
+		--_icon-button-min-size: var(--semantics-controls-md-min-size);
+		--_icon-button-block-padding: var(--semantics-buttons-md-is-icon-only-inline-padding);
+		--_icon-button-inline-padding: var(--semantics-buttons-md-is-icon-only-inline-padding);
+		--_icon-button-size: var(--semantics-buttons-md-is-icon-only-icon-size);
+		--_icon-button-disclosure-icon-margin-right: calc(var(--primitives-space-2) * -1);
+		--_icon-button-disclosure-icon-size: var(--primitives-space-20);
+		--_icon-button-text-display: none;
+		--_icon-button-text-font: var(--primitives-font-body-xxs-medium-flat);
+		--_icon-button-background-color: var(--semantics-buttons-neutral-tinted-background-color);
+		--_icon-button-primary-content-color: var(--semantics-buttons-neutral-tinted-content-color);
+		--_icon-button-highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
+		--_icon-button-is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
+		--_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
+		--_icon-button-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-hovered-highlight-border-color);
+		--_icon-button-is-active-background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
+		--_icon-button-is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
+		--_icon-button-is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-active-highlight-border-color);
 
 		${inheritedTextReset}
 		/* inline-flex, not inline-block: a block container puts the control on a
@@ -558,110 +558,110 @@ var iconButtonStyles = css`
 	}
 
 	:host([size="xs"]) {
-		--_corner-radius: var(--semantics-controls-xs-corner-radius);
-		--_min-size: var(--semantics-controls-xs-min-size);
-		--_block-padding: var(--semantics-buttons-xs-is-icon-only-inline-padding);
-		--_inline-padding: var(--semantics-buttons-xs-is-icon-only-inline-padding);
-		--_icon-size: var(--semantics-buttons-xs-is-icon-only-icon-size);
-		--_disclosure-icon-margin-right: 0;
-		--_disclosure-icon-size: var(--primitives-space-16);
+		--_icon-button-corner-radius: var(--semantics-controls-xs-corner-radius);
+		--_icon-button-min-size: var(--semantics-controls-xs-min-size);
+		--_icon-button-block-padding: var(--semantics-buttons-xs-is-icon-only-inline-padding);
+		--_icon-button-inline-padding: var(--semantics-buttons-xs-is-icon-only-inline-padding);
+		--_icon-button-size: var(--semantics-buttons-xs-is-icon-only-icon-size);
+		--_icon-button-disclosure-icon-margin-right: 0;
+		--_icon-button-disclosure-icon-size: var(--primitives-space-16);
 	}
 
 	:host([size="sm"]) {
-		--_corner-radius: var(--semantics-controls-sm-corner-radius);
-		--_min-size: var(--semantics-controls-sm-min-size);
-		--_block-padding: var(--semantics-buttons-sm-is-icon-only-inline-padding);
-		--_inline-padding: var(--semantics-buttons-sm-is-icon-only-inline-padding);
-		--_icon-size: var(--semantics-buttons-sm-is-icon-only-icon-size);
+		--_icon-button-corner-radius: var(--semantics-controls-sm-corner-radius);
+		--_icon-button-min-size: var(--semantics-controls-sm-min-size);
+		--_icon-button-block-padding: var(--semantics-buttons-sm-is-icon-only-inline-padding);
+		--_icon-button-inline-padding: var(--semantics-buttons-sm-is-icon-only-inline-padding);
+		--_icon-button-size: var(--semantics-buttons-sm-is-icon-only-icon-size);
 	}
 
 	:host([size="lg"]) {
-		--_corner-radius: var(--semantics-controls-lg-corner-radius);
-		--_min-size: var(--semantics-controls-lg-min-size);
-		--_block-padding: var(--primitives-space-8);
-		--_inline-padding: var(--primitives-space-8);
-		--_text-display: block;
+		--_icon-button-corner-radius: var(--semantics-controls-lg-corner-radius);
+		--_icon-button-min-size: var(--semantics-controls-lg-min-size);
+		--_icon-button-block-padding: var(--primitives-space-8);
+		--_icon-button-inline-padding: var(--primitives-space-8);
+		--_icon-button-text-display: block;
 	}
 
 	:host([size="lg"][hide-lg-text]) {
-		--_block-padding: var(--semantics-buttons-lg-is-icon-only-inline-padding);
-		--_inline-padding: var(--semantics-buttons-lg-is-icon-only-inline-padding);
-		--_icon-size: var(--semantics-buttons-lg-is-icon-only-icon-size);
-		--_text-display: none;
+		--_icon-button-block-padding: var(--semantics-buttons-lg-is-icon-only-inline-padding);
+		--_icon-button-inline-padding: var(--semantics-buttons-lg-is-icon-only-inline-padding);
+		--_icon-button-size: var(--semantics-buttons-lg-is-icon-only-icon-size);
+		--_icon-button-text-display: none;
 	}
 
 	:host([appearance="neutral-base"]) {
-		--_background-color: var(--semantics-buttons-neutral-base-background-color);
-		--_primary-content-color: var(--semantics-buttons-neutral-base-content-color);
-		--_highlight-border-color: var(--semantics-buttons-neutral-base-highlight-border-color);
-		--_is-hovered-background-color: var(--semantics-buttons-neutral-base-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-hovered-content-color);
-		--_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-hovered-highlight-border-color);
-		--_is-active-background-color: var(--semantics-buttons-neutral-base-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-active-content-color);
-		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-active-highlight-border-color);
+		--_icon-button-background-color: var(--semantics-buttons-neutral-base-background-color);
+		--_icon-button-primary-content-color: var(--semantics-buttons-neutral-base-content-color);
+		--_icon-button-highlight-border-color: var(--semantics-buttons-neutral-base-highlight-border-color);
+		--_icon-button-is-hovered-background-color: var(--semantics-buttons-neutral-base-is-hovered-background-color);
+		--_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-hovered-content-color);
+		--_icon-button-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-hovered-highlight-border-color);
+		--_icon-button-is-active-background-color: var(--semantics-buttons-neutral-base-is-active-background-color);
+		--_icon-button-is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-active-content-color);
+		--_icon-button-is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-active-highlight-border-color);
 	}
 
 	:host([appearance="neutral-transparent"]) {
-		--_background-color: transparent;
-		--_primary-content-color: var(--semantics-buttons-neutral-transparent-content-color);
-		--_highlight-border-color: transparent;
-		--_is-hovered-background-color: transparent;
-		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
-		--_is-hovered-highlight-border-color: transparent;
-		--_is-active-background-color: transparent;
-		--_is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
-		--_is-active-highlight-border-color: transparent;
+		--_icon-button-background-color: transparent;
+		--_icon-button-primary-content-color: var(--semantics-buttons-neutral-transparent-content-color);
+		--_icon-button-highlight-border-color: transparent;
+		--_icon-button-is-hovered-background-color: transparent;
+		--_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
+		--_icon-button-is-hovered-highlight-border-color: transparent;
+		--_icon-button-is-active-background-color: transparent;
+		--_icon-button-is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
+		--_icon-button-is-active-highlight-border-color: transparent;
 	}
 
 	:host([appearance="accent-filled"]),
 	:host([appearance="primary"]) {
-		--_background-color: var(--semantics-buttons-accent-filled-background-color);
-		--_primary-content-color: var(--semantics-buttons-accent-filled-content-color);
-		--_highlight-border-color: var(--semantics-buttons-accent-filled-highlight-border-color);
-		--_is-hovered-background-color: var(--semantics-buttons-accent-filled-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-hovered-content-color);
-		--_is-hovered-highlight-border-color: var(--semantics-buttons-accent-filled-is-hovered-highlight-border-color);
-		--_is-active-background-color: var(--semantics-buttons-accent-filled-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-active-content-color);
-		--_is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-active-highlight-border-color);
+		--_icon-button-background-color: var(--semantics-buttons-accent-filled-background-color);
+		--_icon-button-primary-content-color: var(--semantics-buttons-accent-filled-content-color);
+		--_icon-button-highlight-border-color: var(--semantics-buttons-accent-filled-highlight-border-color);
+		--_icon-button-is-hovered-background-color: var(--semantics-buttons-accent-filled-is-hovered-background-color);
+		--_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-hovered-content-color);
+		--_icon-button-is-hovered-highlight-border-color: var(--semantics-buttons-accent-filled-is-hovered-highlight-border-color);
+		--_icon-button-is-active-background-color: var(--semantics-buttons-accent-filled-is-active-background-color);
+		--_icon-button-is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-active-content-color);
+		--_icon-button-is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-active-highlight-border-color);
 	}
 
 	:host([appearance="accent-transparent"]) {
-		--_background-color: transparent;
-		--_primary-content-color: var(--semantics-buttons-accent-transparent-content-color);
-		--_highlight-border-color: transparent;
-		--_is-hovered-background-color: transparent;
-		--_is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
-		--_is-hovered-highlight-border-color: transparent;
-		--_is-active-background-color: transparent;
-		--_is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
-		--_is-active-highlight-border-color: transparent;
+		--_icon-button-background-color: transparent;
+		--_icon-button-primary-content-color: var(--semantics-buttons-accent-transparent-content-color);
+		--_icon-button-highlight-border-color: transparent;
+		--_icon-button-is-hovered-background-color: transparent;
+		--_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
+		--_icon-button-is-hovered-highlight-border-color: transparent;
+		--_icon-button-is-active-background-color: transparent;
+		--_icon-button-is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
+		--_icon-button-is-active-highlight-border-color: transparent;
 	}
 
 	:host([appearance="critical-tinted"]),
 	:host([appearance="destructive"]) {
-		--_background-color: var(--semantics-buttons-critical-tinted-background-color);
-		--_primary-content-color: var(--semantics-buttons-critical-tinted-content-color);
-		--_highlight-border-color: var(--semantics-buttons-critical-tinted-highlight-border-color);
-		--_is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-hovered-content-color);
-		--_is-hovered-highlight-border-color: var(--semantics-buttons-critical-tinted-is-hovered-highlight-border-color);
-		--_is-active-background-color: var(--semantics-buttons-critical-tinted-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-active-content-color);
-		--_is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-active-highlight-border-color);
+		--_icon-button-background-color: var(--semantics-buttons-critical-tinted-background-color);
+		--_icon-button-primary-content-color: var(--semantics-buttons-critical-tinted-content-color);
+		--_icon-button-highlight-border-color: var(--semantics-buttons-critical-tinted-highlight-border-color);
+		--_icon-button-is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-hovered-background-color);
+		--_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-hovered-content-color);
+		--_icon-button-is-hovered-highlight-border-color: var(--semantics-buttons-critical-tinted-is-hovered-highlight-border-color);
+		--_icon-button-is-active-background-color: var(--semantics-buttons-critical-tinted-is-active-background-color);
+		--_icon-button-is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-active-content-color);
+		--_icon-button-is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-active-highlight-border-color);
 	}
 
 	:host([appearance="critical-transparent"]) {
-		--_background-color: transparent;
-		--_primary-content-color: var(--semantics-buttons-critical-transparent-content-color);
-		--_highlight-border-color: transparent;
-		--_is-hovered-background-color: transparent;
-		--_is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
-		--_is-hovered-highlight-border-color: transparent;
-		--_is-active-background-color: transparent;
-		--_is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
-		--_is-active-highlight-border-color: transparent;
+		--_icon-button-background-color: transparent;
+		--_icon-button-primary-content-color: var(--semantics-buttons-critical-transparent-content-color);
+		--_icon-button-highlight-border-color: transparent;
+		--_icon-button-is-hovered-background-color: transparent;
+		--_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
+		--_icon-button-is-hovered-highlight-border-color: transparent;
+		--_icon-button-is-active-background-color: transparent;
+		--_icon-button-is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
+		--_icon-button-is-active-highlight-border-color: transparent;
 	}
 
 	/* The on-color variants derive from currentColor; see nldd-button for
@@ -670,28 +670,28 @@ var iconButtonStyles = css`
 
 	:host([appearance="inherit-tinted"]),
 	:host([expanded][appearance="inherit-tinted"]) {
-		--_background-color: var(--context-button-background-color, var(--semantics-buttons-inherit-tinted-background-color));
-		--_primary-content-color: var(--semantics-buttons-inherit-tinted-content-color);
-		--_highlight-border-color: var(--semantics-buttons-inherit-tinted-highlight-border-color);
-		--_is-hovered-background-color: var(--_background-color);
-		--_is-hovered-primary-content-color: var(--_primary-content-color);
-		--_is-hovered-highlight-border-color: var(--_highlight-border-color);
-		--_is-active-background-color: var(--_background-color);
-		--_is-active-primary-content-color: var(--_primary-content-color);
-		--_is-active-highlight-border-color: var(--_highlight-border-color);
+		--_icon-button-background-color: var(--context-button-background-color, var(--semantics-buttons-inherit-tinted-background-color));
+		--_icon-button-primary-content-color: var(--semantics-buttons-inherit-tinted-content-color);
+		--_icon-button-highlight-border-color: var(--semantics-buttons-inherit-tinted-highlight-border-color);
+		--_icon-button-is-hovered-background-color: var(--_icon-button-background-color);
+		--_icon-button-is-hovered-primary-content-color: var(--_icon-button-primary-content-color);
+		--_icon-button-is-hovered-highlight-border-color: var(--_icon-button-highlight-border-color);
+		--_icon-button-is-active-background-color: var(--_icon-button-background-color);
+		--_icon-button-is-active-primary-content-color: var(--_icon-button-primary-content-color);
+		--_icon-button-is-active-highlight-border-color: var(--_icon-button-highlight-border-color);
 	}
 
 	:host([appearance="inherit-filled"]),
 	:host([expanded][appearance="inherit-filled"]) {
-		--_background-color: var(--semantics-buttons-inherit-filled-background-color);
-		--_primary-content-color: var(--context-parent-background-color, var(--semantics-buttons-inherit-filled-content-color));
-		--_highlight-border-color: var(--semantics-buttons-inherit-filled-highlight-border-color);
-		--_is-hovered-background-color: var(--_background-color);
-		--_is-hovered-primary-content-color: var(--_primary-content-color);
-		--_is-hovered-highlight-border-color: var(--_highlight-border-color);
-		--_is-active-background-color: var(--_background-color);
-		--_is-active-primary-content-color: var(--_primary-content-color);
-		--_is-active-highlight-border-color: var(--_highlight-border-color);
+		--_icon-button-background-color: var(--semantics-buttons-inherit-filled-background-color);
+		--_icon-button-primary-content-color: var(--context-parent-background-color, var(--semantics-buttons-inherit-filled-content-color));
+		--_icon-button-highlight-border-color: var(--semantics-buttons-inherit-filled-highlight-border-color);
+		--_icon-button-is-hovered-background-color: var(--_icon-button-background-color);
+		--_icon-button-is-hovered-primary-content-color: var(--_icon-button-primary-content-color);
+		--_icon-button-is-hovered-highlight-border-color: var(--_icon-button-highlight-border-color);
+		--_icon-button-is-active-background-color: var(--_icon-button-background-color);
+		--_icon-button-is-active-primary-content-color: var(--_icon-button-primary-content-color);
+		--_icon-button-is-active-highlight-border-color: var(--_icon-button-highlight-border-color);
 	}
 
 	/* For inherit-filled the inner button keeps the inherited on-color:
@@ -703,95 +703,95 @@ var iconButtonStyles = css`
 	}
 
 	:host([appearance="inherit-filled"]) .icon-button > * {
-		color: var(--_primary-content-color);
+		color: var(--_icon-button-primary-content-color);
 	}
 
 	/* ## Expanded — default (incl. unknown variant) */
 
 	:host([expanded]) {
-		--_background-color: var(--semantics-buttons-neutral-tinted-is-expanded-background-color);
-		--_primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-content-color);
-		--_highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-highlight-border-color);
-		--_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-color);
-		--_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-highlight-border-color);
-		--_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-content-color);
-		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-highlight-border-color);
+		--_icon-button-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-background-color);
+		--_icon-button-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-content-color);
+		--_icon-button-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-highlight-border-color);
+		--_icon-button-is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-background-color);
+		--_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-color);
+		--_icon-button-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-highlight-border-color);
+		--_icon-button-is-active-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-background-color);
+		--_icon-button-is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-content-color);
+		--_icon-button-is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-highlight-border-color);
 	}
 
 	:host([expanded][appearance="neutral-base"]) {
-		--_background-color: var(--semantics-buttons-neutral-base-is-expanded-background-color);
-		--_primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-content-color);
-		--_highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-highlight-border-color);
-		--_is-hovered-background-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-content-color);
-		--_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-highlight-border-color);
-		--_is-active-background-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-content-color);
-		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-highlight-border-color);
+		--_icon-button-background-color: var(--semantics-buttons-neutral-base-is-expanded-background-color);
+		--_icon-button-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-content-color);
+		--_icon-button-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-highlight-border-color);
+		--_icon-button-is-hovered-background-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-background-color);
+		--_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-content-color);
+		--_icon-button-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-highlight-border-color);
+		--_icon-button-is-active-background-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-background-color);
+		--_icon-button-is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-content-color);
+		--_icon-button-is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-highlight-border-color);
 	}
 
 	:host([expanded][appearance="neutral-transparent"]) {
-		--_background-color: transparent;
-		--_primary-content-color: var(--semantics-buttons-neutral-transparent-content-color);
-		--_highlight-border-color: transparent;
-		--_is-hovered-background-color: transparent;
-		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
-		--_is-hovered-highlight-border-color: transparent;
-		--_is-active-background-color: transparent;
-		--_is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
-		--_is-active-highlight-border-color: transparent;
+		--_icon-button-background-color: transparent;
+		--_icon-button-primary-content-color: var(--semantics-buttons-neutral-transparent-content-color);
+		--_icon-button-highlight-border-color: transparent;
+		--_icon-button-is-hovered-background-color: transparent;
+		--_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
+		--_icon-button-is-hovered-highlight-border-color: transparent;
+		--_icon-button-is-active-background-color: transparent;
+		--_icon-button-is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
+		--_icon-button-is-active-highlight-border-color: transparent;
 	}
 
 	:host([expanded][appearance="accent-filled"]),
 	:host([expanded][appearance="primary"]) {
-		--_background-color: var(--semantics-buttons-accent-filled-is-expanded-background-color);
-		--_primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-content-color);
-		--_highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-highlight-border-color);
-		--_is-hovered-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-content-color);
-		--_is-hovered-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-highlight-border-color);
-		--_is-active-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-content-color);
-		--_is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-highlight-border-color);
+		--_icon-button-background-color: var(--semantics-buttons-accent-filled-is-expanded-background-color);
+		--_icon-button-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-content-color);
+		--_icon-button-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-highlight-border-color);
+		--_icon-button-is-hovered-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-background-color);
+		--_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-content-color);
+		--_icon-button-is-hovered-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-highlight-border-color);
+		--_icon-button-is-active-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-background-color);
+		--_icon-button-is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-content-color);
+		--_icon-button-is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-highlight-border-color);
 	}
 
 	:host([expanded][appearance="accent-transparent"]) {
-		--_background-color: transparent;
-		--_primary-content-color: var(--semantics-buttons-accent-transparent-content-color);
-		--_highlight-border-color: transparent;
-		--_is-hovered-background-color: transparent;
-		--_is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
-		--_is-hovered-highlight-border-color: transparent;
-		--_is-active-background-color: transparent;
-		--_is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
-		--_is-active-highlight-border-color: transparent;
+		--_icon-button-background-color: transparent;
+		--_icon-button-primary-content-color: var(--semantics-buttons-accent-transparent-content-color);
+		--_icon-button-highlight-border-color: transparent;
+		--_icon-button-is-hovered-background-color: transparent;
+		--_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
+		--_icon-button-is-hovered-highlight-border-color: transparent;
+		--_icon-button-is-active-background-color: transparent;
+		--_icon-button-is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
+		--_icon-button-is-active-highlight-border-color: transparent;
 	}
 
 	:host([expanded][appearance="critical-tinted"]),
 	:host([expanded][appearance="destructive"]) {
-		--_background-color: var(--semantics-buttons-critical-tinted-is-expanded-background-color);
-		--_primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-content-color);
-		--_highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-highlight-border-color);
-		--_is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-content-color);
-		--_is-hovered-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-highlight-border-color);
-		--_is-active-background-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-content-color);
-		--_is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-highlight-border-color);
+		--_icon-button-background-color: var(--semantics-buttons-critical-tinted-is-expanded-background-color);
+		--_icon-button-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-content-color);
+		--_icon-button-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-highlight-border-color);
+		--_icon-button-is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-background-color);
+		--_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-content-color);
+		--_icon-button-is-hovered-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-highlight-border-color);
+		--_icon-button-is-active-background-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-background-color);
+		--_icon-button-is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-content-color);
+		--_icon-button-is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-highlight-border-color);
 	}
 
 	:host([expanded][appearance="critical-transparent"]) {
-		--_background-color: transparent;
-		--_primary-content-color: var(--semantics-buttons-critical-transparent-content-color);
-		--_highlight-border-color: transparent;
-		--_is-hovered-background-color: transparent;
-		--_is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
-		--_is-hovered-highlight-border-color: transparent;
-		--_is-active-background-color: transparent;
-		--_is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
-		--_is-active-highlight-border-color: transparent;
+		--_icon-button-background-color: transparent;
+		--_icon-button-primary-content-color: var(--semantics-buttons-critical-transparent-content-color);
+		--_icon-button-highlight-border-color: transparent;
+		--_icon-button-is-hovered-background-color: transparent;
+		--_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
+		--_icon-button-is-hovered-highlight-border-color: transparent;
+		--_icon-button-is-active-background-color: transparent;
+		--_icon-button-is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
+		--_icon-button-is-active-highlight-border-color: transparent;
 	}
 
 	:host([width="full"]) {
@@ -811,9 +811,9 @@ var iconButtonStyles = css`
 
 	:host([no-highlight-border]),
 	:host([no-highlight-border][expanded]) {
-		--_highlight-border-color: transparent;
-		--_is-hovered-highlight-border-color: transparent;
-		--_is-active-highlight-border-color: transparent;
+		--_icon-button-highlight-border-color: transparent;
+		--_icon-button-is-hovered-highlight-border-color: transparent;
+		--_icon-button-is-active-highlight-border-color: transparent;
 	}
 
 
@@ -824,19 +824,19 @@ var iconButtonStyles = css`
 		display: inline-flex;
 		margin: 0;
 		border: none;
-		border-radius: var(--_corner-radius);
+		border-radius: var(--_icon-button-corner-radius);
 		background: none;
-		background-color: var(--_background-color);
-		box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
-		width: var(--_width);
-		min-width: var(--_min-size);
-		height: var(--_min-size);
-		min-height: var(--_min-size);
-		padding: var(--_block-padding) var(--_inline-padding);
+		background-color: var(--_icon-button-background-color);
+		box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_icon-button-highlight-border-color);
+		width: var(--_icon-button-width);
+		min-width: var(--_icon-button-min-size);
+		height: var(--_icon-button-min-size);
+		min-height: var(--_icon-button-min-size);
+		padding: var(--_icon-button-block-padding) var(--_icon-button-inline-padding);
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		color: var(--_primary-content-color);
+		color: var(--_icon-button-primary-content-color);
 		font: inherit;
 		text-decoration: none;
 		transition:
@@ -861,7 +861,7 @@ var iconButtonStyles = css`
 	.icon-button:focus-visible {
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
-		box-shadow: var(--semantics-focus-ring-box-shadow), inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
+		box-shadow: var(--semantics-focus-ring-box-shadow), inset 0 0 0 var(--primitives-border-width-thin) var(--_icon-button-highlight-border-color);
 	}
 
 	.icon-button:focus:not(:focus-visible) {
@@ -870,16 +870,16 @@ var iconButtonStyles = css`
 
 	@media (hover: hover) {
 		.icon-button:hover {
-			background-color: var(--_is-hovered-background-color);
-			color: var(--_is-hovered-primary-content-color);
-			--_highlight-border-color: var(--_is-hovered-highlight-border-color);
+			background-color: var(--_icon-button-is-hovered-background-color);
+			color: var(--_icon-button-is-hovered-primary-content-color);
+			--_icon-button-highlight-border-color: var(--_icon-button-is-hovered-highlight-border-color);
 		}
 	}
 
 	.icon-button:active {
-		background-color: var(--_is-active-background-color);
-		color: var(--_is-active-primary-content-color);
-		--_highlight-border-color: var(--_is-active-highlight-border-color);
+		background-color: var(--_icon-button-is-active-background-color);
+		color: var(--_icon-button-is-active-primary-content-color);
+		--_icon-button-highlight-border-color: var(--_icon-button-is-active-highlight-border-color);
 	}
 
 	/* Loading keeps the control focusable (not disabled); activation is blocked in JS. */
@@ -907,8 +907,8 @@ var iconButtonStyles = css`
 
 	.icon-button__icon {
 		display: flex;
-		width: var(--_icon-size);
-		height: var(--_icon-size);
+		width: var(--_icon-button-size);
+		height: var(--_icon-button-size);
 		flex-shrink: 0;
 		align-items: center;
 		justify-content: center;
@@ -916,17 +916,17 @@ var iconButtonStyles = css`
 
 	.icon-button__disclosure-icon {
 		display: flex;
-		margin-right: var(--_disclosure-icon-margin-right);
-		width: var(--_disclosure-icon-size);
-		height: var(--_disclosure-icon-size);
+		margin-right: var(--_icon-button-disclosure-icon-margin-right);
+		width: var(--_icon-button-disclosure-icon-size);
+		height: var(--_icon-button-disclosure-icon-size);
 		flex-shrink: 0;
 	}
 
 	.icon-button__text {
-		display: var(--_text-display);
+		display: var(--_icon-button-text-display);
 		text-align: center;
 		color: inherit;
-		font: var(--_text-font);
+		font: var(--_icon-button-text-font);
 		white-space: nowrap;
 		transition: opacity var(--primitives-transition-duration-slow) var(--primitives-transition-easing-default);
 	}
@@ -943,7 +943,7 @@ var iconButtonStyles = css`
 	.icon-button__activity-indicator {
 		position: absolute;
 		inset: 0;
-		color: var(--_primary-content-color);
+		color: var(--_icon-button-primary-content-color);
 	}
 `;
 //#endregion
@@ -957,14 +957,17 @@ var tooltipStyles = css`
 	/* # Host */
 
 	:host {
-		--_hide-duration: var(--primitives-transition-duration-fast);
-		--_show-duration: var(--primitives-transition-duration-fast);
-		--_max-width: var(--primitives-area-280);
-		--_z-index: 10000;
-		--_show-delay: 700ms;
-		--_hide-delay: 50; /* unitless ms, read by JavaScript */
-		--_offset: 4; /* px, unitless — read by JS */
-		--_shift-padding: 8; /* px, unitless — read by JS */
+		--_tooltip-hide-duration: var(--primitives-transition-duration-fast);
+		--_tooltip-show-duration: var(--primitives-transition-duration-fast);
+		--_tooltip-max-width: var(--primitives-area-280);
+		--_tooltip-z-index: 10000;
+		--_tooltip-show-delay: 700ms;
+		--_tooltip-box-shadow: var(--primitives-box-shadows-level-2);
+		--_tooltip-background-color: light-dark(var(--primitives-color-neutral-600), var(--primitives-color-neutral-750));
+		--_tooltip-content-color: var(--primitives-color-neutral-0);
+		--_tooltip-hide-delay: 50; /* unitless ms, read by JavaScript */
+		--_tooltip-offset: 4; /* px, unitless — read by JS */
+		--_tooltip-shift-padding: 8; /* px, unitless — read by JS */
 
 		${inheritedTextReset}
 		display: contents;
@@ -985,17 +988,17 @@ var tooltipStyles = css`
 		background: none;
 		padding: 0;
 		transition:
-			opacity var(--_hide-duration) ease,
-			display var(--_hide-duration) allow-discrete,
-			overlay var(--_hide-duration) allow-discrete;
+			opacity var(--_tooltip-hide-duration) ease,
+			display var(--_tooltip-hide-duration) allow-discrete,
+			overlay var(--_tooltip-hide-duration) allow-discrete;
 	}
 
 	.tooltip:popover-open {
 		opacity: 1;
 		transition:
-			opacity var(--_show-duration) ease,
-			display var(--_show-duration) allow-discrete,
-			overlay var(--_show-duration) allow-discrete;
+			opacity var(--_tooltip-show-duration) ease,
+			display var(--_tooltip-show-duration) allow-discrete,
+			overlay var(--_tooltip-show-duration) allow-discrete;
 	}
 
 	/* Stay invisible (no fade) until Floating UI has placed it, so the fade-in plays at
@@ -1028,13 +1031,13 @@ var tooltipStyles = css`
 
 	.tooltip__body {
 		border-radius: var(--primitives-corner-radius-xs);
-		box-shadow: var(--components-tooltip-box-shadow);
-		background-color: var(--components-tooltip-background-color);
+		box-shadow: var(--_tooltip-box-shadow);
+		background-color: var(--_tooltip-background-color);
 		width: max-content;
-		max-width: var(--_max-width);
+		max-width: var(--_tooltip-max-width);
 		padding-block: var(--primitives-space-4);
 		padding-inline: var(--primitives-space-8);
-		color: var(--components-tooltip-content-color);
+		color: var(--_tooltip-content-color);
 		font: var(--primitives-font-body-xs-regular-tight);
 		overflow-wrap: break-word;
 	}
@@ -1235,7 +1238,7 @@ var NLDDTooltip = (_NLDDTooltip = class NLDDTooltip extends LitElement {
 			this._visible = true;
 			return;
 		}
-		const parsedShow = parseInt(getComputedStyle(this).getPropertyValue("--_show-delay"), 10);
+		const parsedShow = parseInt(getComputedStyle(this).getPropertyValue("--_tooltip-show-delay"), 10);
 		const showDelay = Number.isFinite(parsedShow) ? parsedShow : DEFAULT_SHOW_DELAY_MS;
 		this._showTimeout = setTimeout(() => {
 			this._showTimeout = null;
@@ -1263,7 +1266,7 @@ var NLDDTooltip = (_NLDDTooltip = class NLDDTooltip extends LitElement {
 		}
 		if (this.open) return;
 		if (this._hideTimeout) clearTimeout(this._hideTimeout);
-		const parsedHide = parseInt(getComputedStyle(this).getPropertyValue("--_hide-delay"), 10);
+		const parsedHide = parseInt(getComputedStyle(this).getPropertyValue("--_tooltip-hide-delay"), 10);
 		const hideDelay = Number.isFinite(parsedHide) ? parsedHide : DEFAULT_HIDE_DELAY_MS;
 		this._hideTimeout = setTimeout(() => {
 			this._visible = false;
@@ -1314,9 +1317,9 @@ var NLDDTooltip = (_NLDDTooltip = class NLDDTooltip extends LitElement {
 			placement: this._effectivePlacement,
 			strategy: "fixed",
 			middleware: [
-				offset(parseInt(styles.getPropertyValue("--_offset"), 10)),
+				offset(parseInt(styles.getPropertyValue("--_tooltip-offset"), 10)),
 				flip(),
-				shift({ padding: parseInt(styles.getPropertyValue("--_shift-padding"), 10) })
+				shift({ padding: parseInt(styles.getPropertyValue("--_tooltip-shift-padding"), 10) })
 			]
 		});
 		if (version !== this._positionVersion) return;
@@ -1538,8 +1541,8 @@ var _NLDDIconButton = class NLDDIconButton extends withTranslations(LitElement,
 			const isFull = w === "full";
 			const isValidLength = !!w && !isFull && CSS.supports("width", w);
 			this.style.width = isValidLength ? w : "";
-			if (isFull || isValidLength) this.style.setProperty("--_width", "100%");
-			else this.style.removeProperty("--_width");
+			if (isFull || isValidLength) this.style.setProperty("--_icon-button-width", "100%");
+			else this.style.removeProperty("--_icon-button-width");
 		}
 		if (!(this._hasIcon && !this.text && !this.accessibleLabel)) this._warnedA11y = false;
 	}