@nldd/design-system 0.8.94 → 0.8.96

package/dist/components/inputs/toggle-button/toggle-button.styles.js

@@ -9,32 +9,32 @@ export const toggleButtonStyles = css `
 	/* # Host */
 
 	:host {
-		--_corner-radius: var(--semantics-controls-md-corner-radius);
-		--_min-size: var(--semantics-controls-md-min-size);
-		--_block-padding: var(--semantics-controls-md-block-padding);
-		--_inline-padding: var(--semantics-buttons-md-inline-padding);
-		--_gap: var(--semantics-buttons-md-gap);
-		--_font: var(--semantics-buttons-md-primary-text-font);
-		--_icon-size: var(--semantics-buttons-md-icon-size);
-		--_icon-only-icon-size: var(--semantics-buttons-md-is-icon-only-icon-size);
-		--_background-color: var(--semantics-buttons-neutral-tinted-background-color);
-		--_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-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-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);
-		--_is-selected-background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
-		--_is-selected-content-color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
-		--_is-selected-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-highlight-border-color);
-		--_is-selected-is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-background-color);
-		--_is-selected-is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-color);
-		--_is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-highlight-border-color);
-		--_is-selected-is-active-background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-background-color);
-		--_is-selected-is-active-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-content-color);
-		--_is-selected-is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-highlight-border-color);
+		--_toggle-button-corner-radius: var(--semantics-controls-md-corner-radius);
+		--_toggle-button-min-size: var(--semantics-controls-md-min-size);
+		--_toggle-button-block-padding: var(--semantics-controls-md-block-padding);
+		--_toggle-button-inline-padding: var(--semantics-buttons-md-inline-padding);
+		--_toggle-button-gap: var(--semantics-buttons-md-gap);
+		--_toggle-button-font: var(--semantics-buttons-md-primary-text-font);
+		--_toggle-button-icon-size: var(--semantics-buttons-md-icon-size);
+		--_toggle-button-icon-only-icon-size: var(--semantics-buttons-md-is-icon-only-icon-size);
+		--_toggle-button-background-color: var(--semantics-buttons-neutral-tinted-background-color);
+		--_toggle-button-content-color: var(--semantics-buttons-neutral-tinted-content-color);
+		--_toggle-button-highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
+		--_toggle-button-is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
+		--_toggle-button-is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
+		--_toggle-button-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-hovered-highlight-border-color);
+		--_toggle-button-is-active-background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
+		--_toggle-button-is-active-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
+		--_toggle-button-is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-active-highlight-border-color);
+		--_toggle-button-is-selected-background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
+		--_toggle-button-is-selected-content-color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
+		--_toggle-button-is-selected-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-highlight-border-color);
+		--_toggle-button-is-selected-is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-background-color);
+		--_toggle-button-is-selected-is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-color);
+		--_toggle-button-is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-highlight-border-color);
+		--_toggle-button-is-selected-is-active-background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-background-color);
+		--_toggle-button-is-selected-is-active-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-content-color);
+		--_toggle-button-is-selected-is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-highlight-border-color);
 
 		${inheritedTextReset}
 		display: inline-block;
@@ -53,112 +53,112 @@ export const toggleButtonStyles = css `
 	}
 
 	:host([size="xs"]) {
-		--_corner-radius: var(--semantics-controls-xs-corner-radius);
-		--_min-size: var(--semantics-controls-xs-min-size);
-		--_block-padding: var(--semantics-controls-xs-block-padding);
-		--_inline-padding: var(--semantics-buttons-xs-inline-padding);
-		--_gap: var(--semantics-buttons-xs-gap);
-		--_font: var(--semantics-buttons-xs-primary-text-font);
-		--_icon-size: var(--semantics-buttons-xs-icon-size);
-		--_icon-only-icon-size: var(--semantics-buttons-xs-is-icon-only-icon-size);
+		--_toggle-button-corner-radius: var(--semantics-controls-xs-corner-radius);
+		--_toggle-button-min-size: var(--semantics-controls-xs-min-size);
+		--_toggle-button-block-padding: var(--semantics-controls-xs-block-padding);
+		--_toggle-button-inline-padding: var(--semantics-buttons-xs-inline-padding);
+		--_toggle-button-gap: var(--semantics-buttons-xs-gap);
+		--_toggle-button-font: var(--semantics-buttons-xs-primary-text-font);
+		--_toggle-button-icon-size: var(--semantics-buttons-xs-icon-size);
+		--_toggle-button-icon-only-icon-size: var(--semantics-buttons-xs-is-icon-only-icon-size);
 	}
 
 	:host([size="sm"]) {
-		--_corner-radius: var(--semantics-controls-sm-corner-radius);
-		--_min-size: var(--semantics-controls-sm-min-size);
-		--_block-padding: var(--semantics-controls-sm-block-padding);
-		--_inline-padding: var(--semantics-buttons-sm-inline-padding);
-		--_gap: var(--semantics-buttons-sm-gap);
-		--_font: var(--semantics-buttons-sm-primary-text-font);
-		--_icon-size: var(--semantics-buttons-sm-icon-size);
-		--_icon-only-icon-size: var(--semantics-buttons-sm-is-icon-only-icon-size);
+		--_toggle-button-corner-radius: var(--semantics-controls-sm-corner-radius);
+		--_toggle-button-min-size: var(--semantics-controls-sm-min-size);
+		--_toggle-button-block-padding: var(--semantics-controls-sm-block-padding);
+		--_toggle-button-inline-padding: var(--semantics-buttons-sm-inline-padding);
+		--_toggle-button-gap: var(--semantics-buttons-sm-gap);
+		--_toggle-button-font: var(--semantics-buttons-sm-primary-text-font);
+		--_toggle-button-icon-size: var(--semantics-buttons-sm-icon-size);
+		--_toggle-button-icon-only-icon-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(--semantics-controls-lg-block-padding);
-		--_inline-padding: var(--semantics-buttons-lg-inline-padding);
-		--_gap: var(--semantics-buttons-lg-gap);
-		--_font: var(--semantics-buttons-lg-primary-text-font);
-		--_icon-size: var(--semantics-buttons-lg-icon-size);
-		--_icon-only-icon-size: var(--primitives-space-28);
-		--_stacked-text-font: var(--primitives-font-body-xxs-medium-flat);
+		--_toggle-button-corner-radius: var(--semantics-controls-lg-corner-radius);
+		--_toggle-button-min-size: var(--semantics-controls-lg-min-size);
+		--_toggle-button-block-padding: var(--semantics-controls-lg-block-padding);
+		--_toggle-button-inline-padding: var(--semantics-buttons-lg-inline-padding);
+		--_toggle-button-gap: var(--semantics-buttons-lg-gap);
+		--_toggle-button-font: var(--semantics-buttons-lg-primary-text-font);
+		--_toggle-button-icon-size: var(--semantics-buttons-lg-icon-size);
+		--_toggle-button-icon-only-icon-size: var(--primitives-space-28);
+		--_toggle-button-stacked-text-font: var(--primitives-font-body-xxs-medium-flat);
 	}
 
 	:host([appearance="neutral-base"]) {
-		--_background-color: var(--semantics-buttons-neutral-base-background-color);
-		--_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-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-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);
-		--_is-selected-background-color: var(--semantics-buttons-neutral-base-is-selected-background-color);
-		--_is-selected-content-color: var(--semantics-buttons-neutral-base-is-selected-content-color);
-		--_is-selected-highlight-border-color: var(--semantics-buttons-neutral-base-is-selected-highlight-border-color);
-		--_is-selected-is-hovered-background-color: var(--semantics-buttons-neutral-base-is-selected-is-hovered-background-color);
-		--_is-selected-is-hovered-content-color: var(--semantics-buttons-neutral-base-is-selected-is-hovered-content-color);
-		--_is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-selected-is-hovered-highlight-border-color);
-		--_is-selected-is-active-background-color: var(--semantics-buttons-neutral-base-is-selected-is-active-background-color);
-		--_is-selected-is-active-content-color: var(--semantics-buttons-neutral-base-is-selected-is-active-content-color);
-		--_is-selected-is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-selected-is-active-highlight-border-color);
+		--_toggle-button-background-color: var(--semantics-buttons-neutral-base-background-color);
+		--_toggle-button-content-color: var(--semantics-buttons-neutral-base-content-color);
+		--_toggle-button-highlight-border-color: var(--semantics-buttons-neutral-base-highlight-border-color);
+		--_toggle-button-is-hovered-background-color: var(--semantics-buttons-neutral-base-is-hovered-background-color);
+		--_toggle-button-is-hovered-content-color: var(--semantics-buttons-neutral-base-is-hovered-content-color);
+		--_toggle-button-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-hovered-highlight-border-color);
+		--_toggle-button-is-active-background-color: var(--semantics-buttons-neutral-base-is-active-background-color);
+		--_toggle-button-is-active-content-color: var(--semantics-buttons-neutral-base-is-active-content-color);
+		--_toggle-button-is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-active-highlight-border-color);
+		--_toggle-button-is-selected-background-color: var(--semantics-buttons-neutral-base-is-selected-background-color);
+		--_toggle-button-is-selected-content-color: var(--semantics-buttons-neutral-base-is-selected-content-color);
+		--_toggle-button-is-selected-highlight-border-color: var(--semantics-buttons-neutral-base-is-selected-highlight-border-color);
+		--_toggle-button-is-selected-is-hovered-background-color: var(--semantics-buttons-neutral-base-is-selected-is-hovered-background-color);
+		--_toggle-button-is-selected-is-hovered-content-color: var(--semantics-buttons-neutral-base-is-selected-is-hovered-content-color);
+		--_toggle-button-is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-selected-is-hovered-highlight-border-color);
+		--_toggle-button-is-selected-is-active-background-color: var(--semantics-buttons-neutral-base-is-selected-is-active-background-color);
+		--_toggle-button-is-selected-is-active-content-color: var(--semantics-buttons-neutral-base-is-selected-is-active-content-color);
+		--_toggle-button-is-selected-is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-selected-is-active-highlight-border-color);
 	}
 
 	:host([appearance="neutral-transparent"]) {
-		--_background-color: transparent;
-		--_content-color: var(--semantics-buttons-neutral-transparent-content-color);
-		--_highlight-border-color: transparent;
-		--_is-hovered-background-color: transparent;
-		--_is-hovered-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
-		--_is-hovered-highlight-border-color: transparent;
-		--_is-active-background-color: transparent;
-		--_is-active-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
-		--_is-active-highlight-border-color: transparent;
-		--_is-selected-background-color: var(--semantics-buttons-neutral-transparent-is-selected-background-color);
-		--_is-selected-content-color: var(--semantics-buttons-neutral-transparent-is-selected-content-color);
-		--_is-selected-highlight-border-color: var(--semantics-buttons-neutral-transparent-is-selected-highlight-border-color);
-		--_is-selected-is-hovered-background-color: var(--semantics-buttons-neutral-transparent-is-selected-is-hovered-background-color);
-		--_is-selected-is-hovered-content-color: var(--semantics-buttons-neutral-transparent-is-selected-is-hovered-content-color);
-		--_is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-transparent-is-selected-is-hovered-highlight-border-color);
-		--_is-selected-is-active-background-color: var(--semantics-buttons-neutral-transparent-is-selected-is-active-background-color);
-		--_is-selected-is-active-content-color: var(--semantics-buttons-neutral-transparent-is-selected-is-active-content-color);
-		--_is-selected-is-active-highlight-border-color: var(--semantics-buttons-neutral-transparent-is-selected-is-active-highlight-border-color);
+		--_toggle-button-background-color: transparent;
+		--_toggle-button-content-color: var(--semantics-buttons-neutral-transparent-content-color);
+		--_toggle-button-highlight-border-color: transparent;
+		--_toggle-button-is-hovered-background-color: transparent;
+		--_toggle-button-is-hovered-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
+		--_toggle-button-is-hovered-highlight-border-color: transparent;
+		--_toggle-button-is-active-background-color: transparent;
+		--_toggle-button-is-active-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
+		--_toggle-button-is-active-highlight-border-color: transparent;
+		--_toggle-button-is-selected-background-color: var(--semantics-buttons-neutral-transparent-is-selected-background-color);
+		--_toggle-button-is-selected-content-color: var(--semantics-buttons-neutral-transparent-is-selected-content-color);
+		--_toggle-button-is-selected-highlight-border-color: var(--semantics-buttons-neutral-transparent-is-selected-highlight-border-color);
+		--_toggle-button-is-selected-is-hovered-background-color: var(--semantics-buttons-neutral-transparent-is-selected-is-hovered-background-color);
+		--_toggle-button-is-selected-is-hovered-content-color: var(--semantics-buttons-neutral-transparent-is-selected-is-hovered-content-color);
+		--_toggle-button-is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-transparent-is-selected-is-hovered-highlight-border-color);
+		--_toggle-button-is-selected-is-active-background-color: var(--semantics-buttons-neutral-transparent-is-selected-is-active-background-color);
+		--_toggle-button-is-selected-is-active-content-color: var(--semantics-buttons-neutral-transparent-is-selected-is-active-content-color);
+		--_toggle-button-is-selected-is-active-highlight-border-color: var(--semantics-buttons-neutral-transparent-is-selected-is-active-highlight-border-color);
 	}
 
 	:host([appearance="accent-transparent"]) {
-		--_background-color: transparent;
-		--_content-color: var(--semantics-buttons-accent-transparent-content-color);
-		--_highlight-border-color: transparent;
-		--_is-hovered-background-color: transparent;
-		--_is-hovered-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
-		--_is-hovered-highlight-border-color: transparent;
-		--_is-active-background-color: transparent;
-		--_is-active-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
-		--_is-active-highlight-border-color: transparent;
-		--_is-selected-background-color: var(--semantics-buttons-accent-transparent-is-selected-background-color);
-		--_is-selected-content-color: var(--semantics-buttons-accent-transparent-is-selected-content-color);
-		--_is-selected-highlight-border-color: var(--semantics-buttons-accent-transparent-is-selected-highlight-border-color);
-		--_is-selected-is-hovered-background-color: var(--semantics-buttons-accent-transparent-is-selected-is-hovered-background-color);
-		--_is-selected-is-hovered-content-color: var(--semantics-buttons-accent-transparent-is-selected-is-hovered-content-color);
-		--_is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-accent-transparent-is-selected-is-hovered-highlight-border-color);
-		--_is-selected-is-active-background-color: var(--semantics-buttons-accent-transparent-is-selected-is-active-background-color);
-		--_is-selected-is-active-content-color: var(--semantics-buttons-accent-transparent-is-selected-is-active-content-color);
-		--_is-selected-is-active-highlight-border-color: var(--semantics-buttons-accent-transparent-is-selected-is-active-highlight-border-color);
+		--_toggle-button-background-color: transparent;
+		--_toggle-button-content-color: var(--semantics-buttons-accent-transparent-content-color);
+		--_toggle-button-highlight-border-color: transparent;
+		--_toggle-button-is-hovered-background-color: transparent;
+		--_toggle-button-is-hovered-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
+		--_toggle-button-is-hovered-highlight-border-color: transparent;
+		--_toggle-button-is-active-background-color: transparent;
+		--_toggle-button-is-active-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
+		--_toggle-button-is-active-highlight-border-color: transparent;
+		--_toggle-button-is-selected-background-color: var(--semantics-buttons-accent-transparent-is-selected-background-color);
+		--_toggle-button-is-selected-content-color: var(--semantics-buttons-accent-transparent-is-selected-content-color);
+		--_toggle-button-is-selected-highlight-border-color: var(--semantics-buttons-accent-transparent-is-selected-highlight-border-color);
+		--_toggle-button-is-selected-is-hovered-background-color: var(--semantics-buttons-accent-transparent-is-selected-is-hovered-background-color);
+		--_toggle-button-is-selected-is-hovered-content-color: var(--semantics-buttons-accent-transparent-is-selected-is-hovered-content-color);
+		--_toggle-button-is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-accent-transparent-is-selected-is-hovered-highlight-border-color);
+		--_toggle-button-is-selected-is-active-background-color: var(--semantics-buttons-accent-transparent-is-selected-is-active-background-color);
+		--_toggle-button-is-selected-is-active-content-color: var(--semantics-buttons-accent-transparent-is-selected-is-active-content-color);
+		--_toggle-button-is-selected-is-active-highlight-border-color: var(--semantics-buttons-accent-transparent-is-selected-is-active-highlight-border-color);
 	}
 
-	:host([selected-icon]:is([appearance="neutral-transparent"], [appearance="accent-transparent"])) {
-		--_is-selected-background-color: var(--_background-color);
-		--_is-selected-content-color: var(--_content-color);
-		--_is-selected-highlight-border-color: var(--_highlight-border-color);
-		--_is-selected-is-hovered-background-color: var(--_is-hovered-background-color);
-		--_is-selected-is-hovered-content-color: var(--_is-hovered-content-color);
-		--_is-selected-is-hovered-highlight-border-color: var(--_is-hovered-highlight-border-color);
-		--_is-selected-is-active-background-color: var(--_is-active-background-color);
-		--_is-selected-is-active-content-color: var(--_is-active-content-color);
-		--_is-selected-is-active-highlight-border-color: var(--_is-active-highlight-border-color);
+	:host([selected-icon]:not([variant="text"]):is([appearance="neutral-transparent"], [appearance="accent-transparent"])) {
+		--_toggle-button-is-selected-background-color: var(--_toggle-button-background-color);
+		--_toggle-button-is-selected-content-color: var(--_toggle-button-content-color);
+		--_toggle-button-is-selected-highlight-border-color: var(--_toggle-button-highlight-border-color);
+		--_toggle-button-is-selected-is-hovered-background-color: var(--_toggle-button-is-hovered-background-color);
+		--_toggle-button-is-selected-is-hovered-content-color: var(--_toggle-button-is-hovered-content-color);
+		--_toggle-button-is-selected-is-hovered-highlight-border-color: var(--_toggle-button-is-hovered-highlight-border-color);
+		--_toggle-button-is-selected-is-active-background-color: var(--_toggle-button-is-active-background-color);
+		--_toggle-button-is-selected-is-active-content-color: var(--_toggle-button-is-active-content-color);
+		--_toggle-button-is-selected-is-active-highlight-border-color: var(--_toggle-button-is-active-highlight-border-color);
 	}
 
 	:host([disabled]) {
@@ -175,18 +175,18 @@ export const toggleButtonStyles = css `
 		position: relative;
 		margin: 0;
 		border: none;
-		border-radius: var(--_corner-radius);
+		border-radius: var(--_toggle-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(--_min-size);
-		min-height: var(--_min-size);
+		background-color: var(--_toggle-button-background-color);
+		box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_toggle-button-highlight-border-color);
+		width: var(--_toggle-button-min-size);
+		min-height: var(--_toggle-button-min-size);
 		padding: 0;
-		gap: var(--_gap);
+		gap: var(--_toggle-button-gap);
 		align-items: center;
 		justify-content: center;
-		color: var(--_content-color);
-		font: var(--_font);
+		color: var(--_toggle-button-content-color);
+		font: var(--_toggle-button-font);
 		white-space: nowrap;
 		text-decoration: none;
 		appearance: none;
@@ -194,45 +194,45 @@ export const toggleButtonStyles = css `
 
 	.toggle-button:has(.toggle-button__text) {
 		width: auto;
-		padding: var(--_block-padding) var(--_inline-padding);
+		padding: var(--_toggle-button-block-padding) var(--_toggle-button-inline-padding);
 	}
 
 	@media (hover: hover) {
 		.toggle-button:hover,
 		.toggle-button:has(.toggle-button__input:hover) {
-			--_highlight-border-color: var(--_is-hovered-highlight-border-color);
-			background-color: var(--_is-hovered-background-color);
-			color: var(--_is-hovered-content-color);
+			--_toggle-button-highlight-border-color: var(--_toggle-button-is-hovered-highlight-border-color);
+			background-color: var(--_toggle-button-is-hovered-background-color);
+			color: var(--_toggle-button-is-hovered-content-color);
 		}
 	}
 
 	.toggle-button:active,
 	.toggle-button:has(.toggle-button__input:active) {
-		--_highlight-border-color: var(--_is-active-highlight-border-color);
-		background-color: var(--_is-active-background-color);
-		color: var(--_is-active-content-color);
+		--_toggle-button-highlight-border-color: var(--_toggle-button-is-active-highlight-border-color);
+		background-color: var(--_toggle-button-is-active-background-color);
+		color: var(--_toggle-button-is-active-content-color);
 	}
 
 	:host([selected]) .toggle-button {
-		--_highlight-border-color: var(--_is-selected-highlight-border-color);
-		background-color: var(--_is-selected-background-color);
-		color: var(--_is-selected-content-color);
+		--_toggle-button-highlight-border-color: var(--_toggle-button-is-selected-highlight-border-color);
+		background-color: var(--_toggle-button-is-selected-background-color);
+		color: var(--_toggle-button-is-selected-content-color);
 	}
 
 	@media (hover: hover) {
 		:host([selected]) .toggle-button:hover,
 		:host([selected]) .toggle-button:has(.toggle-button__input:hover) {
-			--_highlight-border-color: var(--_is-selected-is-hovered-highlight-border-color);
-			background-color: var(--_is-selected-is-hovered-background-color);
-			color: var(--_is-selected-is-hovered-content-color);
+			--_toggle-button-highlight-border-color: var(--_toggle-button-is-selected-is-hovered-highlight-border-color);
+			background-color: var(--_toggle-button-is-selected-is-hovered-background-color);
+			color: var(--_toggle-button-is-selected-is-hovered-content-color);
 		}
 	}
 
 	:host([selected]) .toggle-button:active,
 	:host([selected]) .toggle-button:has(.toggle-button__input:active) {
-		--_highlight-border-color: var(--_is-selected-is-active-highlight-border-color);
-		background-color: var(--_is-selected-is-active-background-color);
-		color: var(--_is-selected-is-active-content-color);
+		--_toggle-button-highlight-border-color: var(--_toggle-button-is-selected-is-active-highlight-border-color);
+		background-color: var(--_toggle-button-is-selected-is-active-background-color);
+		color: var(--_toggle-button-is-selected-is-active-content-color);
 	}
 
 	.toggle-button:focus-visible,
@@ -240,7 +240,7 @@ export const toggleButtonStyles = css `
 	:host(:focus-visible) .toggle-button {
 		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(--_toggle-button-highlight-border-color);
 	}
 
 	.toggle-button:focus:not(:focus-visible) {
@@ -257,15 +257,15 @@ export const toggleButtonStyles = css `
 	.toggle-button__icon,
 	::slotted([slot="icon"]) {
 		display: block;
-		width: var(--_icon-only-icon-size);
-		height: var(--_icon-only-icon-size);
+		width: var(--_toggle-button-icon-only-icon-size);
+		height: var(--_toggle-button-icon-only-icon-size);
 		flex-shrink: 0;
 	}
 
 	.toggle-button:has(.toggle-button__text) .toggle-button__icon,
 	.toggle-button:has(.toggle-button__text) ::slotted([slot="icon"]) {
-		width: var(--_icon-size);
-		height: var(--_icon-size);
+		width: var(--_toggle-button-icon-size);
+		height: var(--_toggle-button-icon-size);
 	}
 
 	:host([size="lg"][variant="icon-and-text"]) .toggle-button,
@@ -278,7 +278,7 @@ export const toggleButtonStyles = css `
 
 	:host([size="lg"][variant="icon-and-text"]) .toggle-button__text,
 	:host([size="lg"]:not([variant])) .toggle-button:has(.toggle-button__icon) .toggle-button__text {
-		font: var(--_stacked-text-font);
+		font: var(--_toggle-button-stacked-text-font);
 	}
 
 	/* variant="text" keeps the icon slot in shadow DOM (so slotchange still

package/dist/components/inputs/toggle-button-group/toggle-button-group.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button-group.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button-group/toggle-button-group.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,yBAiCnC,CAAC"}
+{"version":3,"file":"toggle-button-group.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button-group/toggle-button-group.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,yBAqCnC,CAAC"}

package/dist/components/inputs/toggle-button-group/toggle-button-group.styles.js

@@ -8,6 +8,10 @@ export const toggleButtonGroupStyles = css `
 	/* # Host */
 
 	:host {
+		--_toggle-button-group-md-gap: var(--primitives-space-8);
+		--_toggle-button-group-sm-gap: var(--primitives-space-6);
+		--_toggle-button-group-xs-gap: var(--primitives-space-4);
+
 		display: block;
 		isolation: isolate;
 	}
@@ -22,15 +26,15 @@ export const toggleButtonGroupStyles = css `
 	.toggle-button-group {
 		display: flex;
 		flex-wrap: wrap;
-		gap: var(--components-toggle-button-group-md-gap);
+		gap: var(--_toggle-button-group-md-gap);
 	}
 
 	:host([size="sm"]) .toggle-button-group {
-		gap: var(--components-toggle-button-group-sm-gap);
+		gap: var(--_toggle-button-group-sm-gap);
 	}
 
 	:host([size="xs"]) .toggle-button-group {
-		gap: var(--components-toggle-button-group-xs-gap);
+		gap: var(--_toggle-button-group-xs-gap);
 	}
 `;
 //# sourceMappingURL=toggle-button-group.styles.js.map

package/dist/components/inputs/toggle-button-group/toggle-button-group.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button-group.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button-group/toggle-button-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCzC,CAAC"}
+{"version":3,"file":"toggle-button-group.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button-group/toggle-button-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCzC,CAAC"}

package/dist/components/inputs/token-field/token-field.styles.js

@@ -9,20 +9,20 @@ export const tokenFieldStyles = css `
 	/* # Host */
 
 	:host {
-		--_width: 100%;
-		--_background-color: var(--semantics-input-fields-background-color);
-		--_corner-radius: var(--semantics-controls-md-corner-radius);
-		--_min-size: var(--semantics-controls-md-min-size);
-		--_inline-padding: calc(var(--semantics-controls-md-inline-padding) - var(--semantics-input-fields-border-width));
-		--_text-font: var(--semantics-input-fields-md-text-font);
-		--_validation-icon-size: var(--semantics-input-fields-md-validation-icon-size);
-		--_validation-icon-area-size: calc(var(--_min-size) - var(--semantics-input-fields-border-width) * 2);
-		--_gap: calc((var(--semantics-controls-md-min-size) - var(--semantics-controls-sm-min-size) - 2 * var(--semantics-input-fields-border-width)) / 2);
-		--_input-min-width: var(--primitives-area-200);
+		--_token-field-width: 100%;
+		--_token-field-background-color: var(--semantics-input-fields-background-color);
+		--_token-field-corner-radius: var(--semantics-controls-md-corner-radius);
+		--_token-field-min-size: var(--semantics-controls-md-min-size);
+		--_token-field-inline-padding: calc(var(--semantics-controls-md-inline-padding) - var(--semantics-input-fields-border-width));
+		--_token-field-text-font: var(--semantics-input-fields-md-text-font);
+		--_token-field-validation-icon-size: var(--semantics-input-fields-md-validation-icon-size);
+		--_token-field-validation-icon-area-size: calc(var(--_token-field-min-size) - var(--semantics-input-fields-border-width) * 2);
+		--_token-field-gap: calc((var(--semantics-controls-md-min-size) - var(--semantics-controls-sm-min-size) - 2 * var(--semantics-input-fields-border-width)) / 2);
+		--_token-field-input-min-width: var(--primitives-area-200);
 
 		${inheritedTextReset}
 		display: block;
-		width: var(--_width);
+		width: var(--_token-field-width);
 		max-width: 100%;
 		-webkit-tap-highlight-color: transparent;
 	}
@@ -37,7 +37,7 @@ export const tokenFieldStyles = css `
 	}
 
 	:host([readonly]) .token-field {
-		--_background-color: var(--semantics-input-fields-is-read-only-background-color);
+		--_token-field-background-color: var(--semantics-input-fields-is-read-only-background-color);
 		border-color: var(--semantics-input-fields-is-read-only-border-color);
 		cursor: default;
 	}
@@ -52,14 +52,14 @@ export const tokenFieldStyles = css `
 		display: flex;
 		flex-wrap: wrap;
 		align-items: center;
-		gap: var(--_gap);
+		gap: var(--_token-field-gap);
 		border: var(--semantics-input-fields-border);
-		border-radius: var(--_corner-radius);
-		background-color: var(--_background-color);
+		border-radius: var(--_token-field-corner-radius);
+		background-color: var(--_token-field-background-color);
 		width: 100%;
-		min-height: var(--_min-size);
-		padding-block: var(--_gap);
-		padding-inline: var(--_gap);
+		min-height: var(--_token-field-min-size);
+		padding-block: var(--_token-field-gap);
+		padding-inline: var(--_token-field-gap);
 	}
 
 	/* The role="list" wrapper carries token grouping for assistive tech without
@@ -94,7 +94,7 @@ export const tokenFieldStyles = css `
 	/* Reserve the validation icon's area so tokens/input stay clear of it. */
 	.token-field[data-invalid],
 	.token-field[data-valid] {
-		padding-inline-end: var(--_validation-icon-area-size);
+		padding-inline-end: var(--_token-field-validation-icon-area-size);
 	}
 
 
@@ -103,11 +103,11 @@ export const tokenFieldStyles = css `
 	.token-field__input-area {
 		display: flex;
 		align-items: center;
-		gap: var(--_gap);
+		gap: var(--_token-field-gap);
 		flex-grow: 1;
 		flex-shrink: 1;
-		flex-basis: var(--_input-min-width);
-		min-width: var(--_input-min-width);
+		flex-basis: var(--_token-field-input-min-width);
+		min-width: var(--_token-field-input-min-width);
 	}
 
 
@@ -124,14 +124,14 @@ export const tokenFieldStyles = css `
 		outline: none;
 		background: transparent;
 		color: inherit;
-		font: var(--_text-font);
+		font: var(--_token-field-text-font);
 		height: var(--semantics-controls-sm-min-size);
 		/* Rounds the autofill mask (below) like a token. */
 		border-radius: var(--semantics-controls-sm-corner-radius);
 		padding: 0;
 		/* The frame already adds the leading gap, so subtract it to land on the
 		   standard inline-padding. */
-		padding-inline-start: calc(var(--_inline-padding) - var(--_gap));
+		padding-inline-start: calc(var(--_token-field-inline-padding) - var(--_token-field-gap));
 		margin: 0;
 	}
 
@@ -173,15 +173,15 @@ export const tokenFieldStyles = css `
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: var(--_validation-icon-area-size);
-		height: var(--_validation-icon-area-size);
+		width: var(--_token-field-validation-icon-area-size);
+		height: var(--_token-field-validation-icon-area-size);
 		pointer-events: none;
 	}
 
 	/* nldd-icon fills its parent, so pin a size. */
 	.token-field__validation-icon {
-		width: var(--_validation-icon-size);
-		height: var(--_validation-icon-size);
+		width: var(--_token-field-validation-icon-size);
+		height: var(--_token-field-validation-icon-size);
 	}
 
 	:host([valid]) .token-field__validation-icon {

package/dist/components/layout/app-view/app-view.d.ts

@@ -14,7 +14,7 @@
  *
  * ## Background color
  * Set background="tinted" to give the whole application a tinted background.
- * All descendants read --context-parent-background-color via --_background-color automatically.
+ * All descendants read --context-parent-background-color via --_app-view-background-color automatically.
  * Individual components can override locally with their own background attribute.
  *
  * The same background color is forced on `document.body` so that browser-

package/dist/components/layout/app-view/app-view.js

@@ -20,7 +20,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  *
  * ## Background color
  * Set background="tinted" to give the whole application a tinted background.
- * All descendants read --context-parent-background-color via --_background-color automatically.
+ * All descendants read --context-parent-background-color via --_app-view-background-color automatically.
  * Individual components can override locally with their own background attribute.
  *
  * The same background color is forced on `document.body` so that browser-

package/dist/components/layout/app-view/app-view.styles.js

@@ -9,10 +9,10 @@ export const appViewStyles = css `
 
 	:host {
 		--context-parent-background-color: var(--semantics-surfaces-base-background-color);
-		--_background-color: var(--context-parent-background-color);
+		--_app-view-background-color: var(--context-parent-background-color);
 
 		display: flex;
-		background-color: var(--_background-color);
+		background-color: var(--_app-view-background-color);
 		width: 100%;
 		height: 100%;
 	}
@@ -23,7 +23,7 @@ export const appViewStyles = css `
 
 	:host([background="tinted"]) {
 		--context-parent-background-color: var(--semantics-surfaces-tinted-background-color);
-		--_background-color: var(--semantics-surfaces-tinted-background-color);
+		--_app-view-background-color: var(--semantics-surfaces-tinted-background-color);
 	}
 
 	/* Root-scroll mode — the DOCUMENT scrolls (see ScrollModeController +