@nldd/design-system 0.8.94 → 0.8.96

package/dist/components/status-and-feedback/badge/badge.styles.js

@@ -9,22 +9,23 @@ export const badgeStyles = css `
 	/* # Host */
 
 	:host {
-		--_custom-color: transparent;
-		--_background-color: var(--semantics-categories-critical-filled-background-color);
-		--_border-color: var(--semantics-categories-critical-filled-highlight-border-color);
-		--_border-width: var(--components-badge-border-width);
-		--_height: var(--primitives-space-20);
-		--_inline-padding: var(--primitives-space-6);
-		--_gap: var(--primitives-space-3);
-		--_content-color: var(--semantics-categories-critical-filled-content-color);
-		--_font: var(--primitives-font-body-xs-medium-flat);
-		--_dot-size: var(--primitives-space-12);
-		--_icon-size: var(--primitives-space-14);
-		--_icon-offset-correction: var(--primitives-space-1);
-		--_ring-thickness: var(--semantics-surfaces-ring-thickness);
-		--_ring-color: var(--context-parent-background-color, var(--semantics-surfaces-base-background-color));
-		--_pulse-spread: var(--primitives-space-8);
-		--_pulse-duration: 1.5s;
+		--_badge-custom-color: transparent;
+		--_badge-background-color: var(--semantics-categories-critical-filled-background-color);
+		--_badge-border-color: var(--semantics-categories-critical-filled-highlight-border-color);
+		--_badge-border-width: var(--primitives-border-width-thin);
+		--_badge-height: var(--primitives-space-20);
+		--_badge-inline-padding: var(--primitives-space-6);
+		--_badge-gap: var(--primitives-space-3);
+		--_badge-content-color: var(--semantics-categories-critical-filled-content-color);
+		--_badge-font: var(--primitives-font-body-xs-medium-flat);
+		--_badge-dot-size: var(--primitives-space-12);
+		--_badge-icon-size: var(--primitives-space-14);
+		--_badge-icon-offset-correction: var(--primitives-space-1);
+		--_badge-ring-thickness: var(--semantics-surfaces-ring-thickness);
+		--_badge-ring-color: var(--context-parent-background-color, var(--semantics-surfaces-base-background-color));
+		--_badge-pulse-spread: var(--primitives-space-8);
+		--_badge-pulse-duration: 1.5s;
+		--_badge-corner-radius: var(--primitives-corner-radius-full);
 
 		${inheritedTextReset}
 		display: inline-flex;
@@ -32,13 +33,13 @@ export const badgeStyles = css `
 	}
 
 	:host([size="sm"]) {
-		--_pulse-spread: var(--primitives-space-6);
-		--_height: var(--primitives-space-16);
-		--_inline-padding: var(--primitives-space-4);
-		--_gap: var(--primitives-space-2);
-		--_font: var(--primitives-font-body-xxs-medium-flat);
-		--_dot-size: var(--primitives-space-8);
-		--_icon-size: var(--primitives-space-12);
+		--_badge-pulse-spread: var(--primitives-space-6);
+		--_badge-height: var(--primitives-space-16);
+		--_badge-inline-padding: var(--primitives-space-4);
+		--_badge-gap: var(--primitives-space-2);
+		--_badge-font: var(--primitives-font-body-xxs-medium-flat);
+		--_badge-dot-size: var(--primitives-space-8);
+		--_badge-icon-size: var(--primitives-space-12);
 	}
 
 	/* ## Color */
@@ -50,155 +51,155 @@ export const badgeStyles = css `
 	:host([color="inherit"]) {
 		color: var(--context-content-color, currentColor);
 
-		--_background-color: currentColor;
-		--_border-color: transparent;
-		--_content-color: var(--semantics-content-contrast-color);
+		--_badge-background-color: currentColor;
+		--_badge-border-color: transparent;
+		--_badge-content-color: var(--semantics-content-contrast-color);
 	}
 
 	:host([color="accent"]) {
-		--_background-color: var(--semantics-categories-accent-filled-background-color);
-		--_border-color: var(--semantics-categories-accent-filled-highlight-border-color);
-		--_content-color: var(--semantics-categories-accent-filled-content-color);
+		--_badge-background-color: var(--semantics-categories-accent-filled-background-color);
+		--_badge-border-color: var(--semantics-categories-accent-filled-highlight-border-color);
+		--_badge-content-color: var(--semantics-categories-accent-filled-content-color);
 	}
 
 	:host([color="neutral"]) {
-		--_background-color: var(--semantics-categories-neutral-filled-background-color);
-		--_border-color: var(--semantics-categories-neutral-filled-highlight-border-color);
-		--_content-color: var(--semantics-categories-neutral-filled-content-color);
+		--_badge-background-color: var(--semantics-categories-neutral-filled-background-color);
+		--_badge-border-color: var(--semantics-categories-neutral-filled-highlight-border-color);
+		--_badge-content-color: var(--semantics-categories-neutral-filled-content-color);
 	}
 
 	:host([color="warning"]) {
-		--_background-color: var(--semantics-categories-warning-filled-background-color);
-		--_border-color: var(--semantics-categories-warning-filled-highlight-border-color);
-		--_content-color: var(--semantics-categories-warning-filled-content-color);
+		--_badge-background-color: var(--semantics-categories-warning-filled-background-color);
+		--_badge-border-color: var(--semantics-categories-warning-filled-highlight-border-color);
+		--_badge-content-color: var(--semantics-categories-warning-filled-content-color);
 	}
 
 	:host([color="success"]) {
-		--_background-color: var(--semantics-categories-success-filled-background-color);
-		--_border-color: var(--semantics-categories-success-filled-highlight-border-color);
-		--_content-color: var(--semantics-categories-success-filled-content-color);
+		--_badge-background-color: var(--semantics-categories-success-filled-background-color);
+		--_badge-border-color: var(--semantics-categories-success-filled-highlight-border-color);
+		--_badge-content-color: var(--semantics-categories-success-filled-content-color);
 	}
 
 
 	/* ## Color — rijkskleuren */
 
 	:host([color="lintblauw"]) {
-		--_background-color: var(--semantics-categories-lintblauw-filled-background-color);
-		--_border-color: var(--semantics-categories-lintblauw-filled-highlight-border-color);
-		--_content-color: var(--semantics-categories-lintblauw-filled-content-color);
+		--_badge-background-color: var(--semantics-categories-lintblauw-filled-background-color);
+		--_badge-border-color: var(--semantics-categories-lintblauw-filled-highlight-border-color);
+		--_badge-content-color: var(--semantics-categories-lintblauw-filled-content-color);
 	}
 
 	:host([color="donkerblauw"]) {
-		--_background-color: var(--semantics-categories-donkerblauw-filled-background-color);
-		--_border-color: var(--semantics-categories-donkerblauw-filled-highlight-border-color);
-		--_content-color: var(--semantics-categories-donkerblauw-filled-content-color);
+		--_badge-background-color: var(--semantics-categories-donkerblauw-filled-background-color);
+		--_badge-border-color: var(--semantics-categories-donkerblauw-filled-highlight-border-color);
+		--_badge-content-color: var(--semantics-categories-donkerblauw-filled-content-color);
 	}
 
 	:host([color="hemelblauw"]) {
-		--_background-color: var(--semantics-categories-hemelblauw-filled-background-color);
-		--_border-color: var(--semantics-categories-hemelblauw-filled-highlight-border-color);
-		--_content-color: var(--semantics-categories-hemelblauw-filled-content-color);
+		--_badge-background-color: var(--semantics-categories-hemelblauw-filled-background-color);
+		--_badge-border-color: var(--semantics-categories-hemelblauw-filled-highlight-border-color);
+		--_badge-content-color: var(--semantics-categories-hemelblauw-filled-content-color);
 	}
 
 	:host([color="lichtblauw"]) {
-		--_background-color: var(--semantics-categories-lichtblauw-filled-background-color);
-		--_border-color: var(--semantics-categories-lichtblauw-filled-highlight-border-color);
-		--_content-color: var(--semantics-categories-lichtblauw-filled-content-color);
+		--_badge-background-color: var(--semantics-categories-lichtblauw-filled-background-color);
+		--_badge-border-color: var(--semantics-categories-lichtblauw-filled-highlight-border-color);
+		--_badge-content-color: var(--semantics-categories-lichtblauw-filled-content-color);
 	}
 
 	:host([color="paars"]) {
-		--_background-color: var(--semantics-categories-paars-filled-background-color);
-		--_border-color: var(--semantics-categories-paars-filled-highlight-border-color);
-		--_content-color: var(--semantics-categories-paars-filled-content-color);
+		--_badge-background-color: var(--semantics-categories-paars-filled-background-color);
+		--_badge-border-color: var(--semantics-categories-paars-filled-highlight-border-color);
+		--_badge-content-color: var(--semantics-categories-paars-filled-content-color);
 	}
 
 	:host([color="violet"]) {
-		--_background-color: var(--semantics-categories-violet-filled-background-color);
-		--_border-color: var(--semantics-categories-violet-filled-highlight-border-color);
-		--_content-color: var(--semantics-categories-violet-filled-content-color);
+		--_badge-background-color: var(--semantics-categories-violet-filled-background-color);
+		--_badge-border-color: var(--semantics-categories-violet-filled-highlight-border-color);
+		--_badge-content-color: var(--semantics-categories-violet-filled-content-color);
 	}
 
 	:host([color="robijnrood"]) {
-		--_background-color: var(--semantics-categories-robijnrood-filled-background-color);
-		--_border-color: var(--semantics-categories-robijnrood-filled-highlight-border-color);
-		--_content-color: var(--semantics-categories-robijnrood-filled-content-color);
+		--_badge-background-color: var(--semantics-categories-robijnrood-filled-background-color);
+		--_badge-border-color: var(--semantics-categories-robijnrood-filled-highlight-border-color);
+		--_badge-content-color: var(--semantics-categories-robijnrood-filled-content-color);
 	}
 
 	:host([color="roze"]) {
-		--_background-color: var(--semantics-categories-roze-filled-background-color);
-		--_border-color: var(--semantics-categories-roze-filled-highlight-border-color);
-		--_content-color: var(--semantics-categories-roze-filled-content-color);
+		--_badge-background-color: var(--semantics-categories-roze-filled-background-color);
+		--_badge-border-color: var(--semantics-categories-roze-filled-highlight-border-color);
+		--_badge-content-color: var(--semantics-categories-roze-filled-content-color);
 	}
 
 	:host([color="rood"]) {
-		--_background-color: var(--semantics-categories-rood-filled-background-color);
-		--_border-color: var(--semantics-categories-rood-filled-highlight-border-color);
-		--_content-color: var(--semantics-categories-rood-filled-content-color);
+		--_badge-background-color: var(--semantics-categories-rood-filled-background-color);
+		--_badge-border-color: var(--semantics-categories-rood-filled-highlight-border-color);
+		--_badge-content-color: var(--semantics-categories-rood-filled-content-color);
 	}
 
 	:host([color="oranje"]) {
-		--_background-color: var(--semantics-categories-oranje-filled-background-color);
-		--_border-color: var(--semantics-categories-oranje-filled-highlight-border-color);
-		--_content-color: var(--semantics-categories-oranje-filled-content-color);
+		--_badge-background-color: var(--semantics-categories-oranje-filled-background-color);
+		--_badge-border-color: var(--semantics-categories-oranje-filled-highlight-border-color);
+		--_badge-content-color: var(--semantics-categories-oranje-filled-content-color);
 	}
 
 	:host([color="donkergeel"]) {
-		--_background-color: var(--semantics-categories-donkergeel-filled-background-color);
-		--_border-color: var(--semantics-categories-donkergeel-filled-highlight-border-color);
-		--_content-color: var(--semantics-categories-donkergeel-filled-content-color);
+		--_badge-background-color: var(--semantics-categories-donkergeel-filled-background-color);
+		--_badge-border-color: var(--semantics-categories-donkergeel-filled-highlight-border-color);
+		--_badge-content-color: var(--semantics-categories-donkergeel-filled-content-color);
 	}
 
 	:host([color="geel"]) {
-		--_background-color: var(--semantics-categories-geel-filled-background-color);
-		--_border-color: var(--semantics-categories-geel-filled-highlight-border-color);
-		--_content-color: var(--semantics-categories-geel-filled-content-color);
+		--_badge-background-color: var(--semantics-categories-geel-filled-background-color);
+		--_badge-border-color: var(--semantics-categories-geel-filled-highlight-border-color);
+		--_badge-content-color: var(--semantics-categories-geel-filled-content-color);
 	}
 
 	:host([color="donkerbruin"]) {
-		--_background-color: var(--semantics-categories-donkerbruin-filled-background-color);
-		--_border-color: var(--semantics-categories-donkerbruin-filled-highlight-border-color);
-		--_content-color: var(--semantics-categories-donkerbruin-filled-content-color);
+		--_badge-background-color: var(--semantics-categories-donkerbruin-filled-background-color);
+		--_badge-border-color: var(--semantics-categories-donkerbruin-filled-highlight-border-color);
+		--_badge-content-color: var(--semantics-categories-donkerbruin-filled-content-color);
 	}
 
 	:host([color="bruin"]) {
-		--_background-color: var(--semantics-categories-bruin-filled-background-color);
-		--_border-color: var(--semantics-categories-bruin-filled-highlight-border-color);
-		--_content-color: var(--semantics-categories-bruin-filled-content-color);
+		--_badge-background-color: var(--semantics-categories-bruin-filled-background-color);
+		--_badge-border-color: var(--semantics-categories-bruin-filled-highlight-border-color);
+		--_badge-content-color: var(--semantics-categories-bruin-filled-content-color);
 	}
 
 	:host([color="donkergroen"]) {
-		--_background-color: var(--semantics-categories-donkergroen-filled-background-color);
-		--_border-color: var(--semantics-categories-donkergroen-filled-highlight-border-color);
-		--_content-color: var(--semantics-categories-donkergroen-filled-content-color);
+		--_badge-background-color: var(--semantics-categories-donkergroen-filled-background-color);
+		--_badge-border-color: var(--semantics-categories-donkergroen-filled-highlight-border-color);
+		--_badge-content-color: var(--semantics-categories-donkergroen-filled-content-color);
 	}
 
 	:host([color="groen"]) {
-		--_background-color: var(--semantics-categories-groen-filled-background-color);
-		--_border-color: var(--semantics-categories-groen-filled-highlight-border-color);
-		--_content-color: var(--semantics-categories-groen-filled-content-color);
+		--_badge-background-color: var(--semantics-categories-groen-filled-background-color);
+		--_badge-border-color: var(--semantics-categories-groen-filled-highlight-border-color);
+		--_badge-content-color: var(--semantics-categories-groen-filled-content-color);
 	}
 
 	:host([color="mosgroen"]) {
-		--_background-color: var(--semantics-categories-mosgroen-filled-background-color);
-		--_border-color: var(--semantics-categories-mosgroen-filled-highlight-border-color);
-		--_content-color: var(--semantics-categories-mosgroen-filled-content-color);
+		--_badge-background-color: var(--semantics-categories-mosgroen-filled-background-color);
+		--_badge-border-color: var(--semantics-categories-mosgroen-filled-highlight-border-color);
+		--_badge-content-color: var(--semantics-categories-mosgroen-filled-content-color);
 	}
 
 	:host([color="mintgroen"]) {
-		--_background-color: var(--semantics-categories-mintgroen-filled-background-color);
-		--_border-color: var(--semantics-categories-mintgroen-filled-highlight-border-color);
-		--_content-color: var(--semantics-categories-mintgroen-filled-content-color);
+		--_badge-background-color: var(--semantics-categories-mintgroen-filled-background-color);
+		--_badge-border-color: var(--semantics-categories-mintgroen-filled-highlight-border-color);
+		--_badge-content-color: var(--semantics-categories-mintgroen-filled-content-color);
 	}
 
 	/* color on the host rather than on the fill: the contrast token reads
 	   currentColor, so the text lands on black or white without a second formula
 	   to keep in step. After every [color] rule, so it wins over one. */
 	:host([custom-color]) {
-		color: var(--_custom-color);
+		color: var(--_badge-custom-color);
 
-		--_background-color: var(--_custom-color);
-		--_border-color: transparent;
-		--_content-color: var(--semantics-content-contrast-color);
+		--_badge-background-color: var(--_badge-custom-color);
+		--_badge-border-color: transparent;
+		--_badge-content-color: var(--semantics-content-contrast-color);
 	}
 
 	:host([hidden]) {
@@ -212,18 +213,18 @@ export const badgeStyles = css `
 		box-sizing: border-box;
 		display: inline-flex;
 		position: relative;
-		border-radius: var(--components-badge-corner-radius);
+		border-radius: var(--_badge-corner-radius);
 		box-shadow:
-			0 0 0 var(--_ring-thickness) var(--_ring-color),
-			inset 0 0 0 var(--_border-width) var(--_border-color);
-		background-color: var(--_background-color);
-		min-width: var(--_height);
-		height: var(--_height);
-		padding: 0 var(--_inline-padding);
-		gap: var(--_gap);
+			0 0 0 var(--_badge-ring-thickness) var(--_badge-ring-color),
+			inset 0 0 0 var(--_badge-border-width) var(--_badge-border-color);
+		background-color: var(--_badge-background-color);
+		min-width: var(--_badge-height);
+		height: var(--_badge-height);
+		padding: 0 var(--_badge-inline-padding);
+		gap: var(--_badge-gap);
 		align-items: center;
 		justify-content: center;
-		font: var(--_font);
+		font: var(--_badge-font);
 		white-space: nowrap;
 	}
 
@@ -251,9 +252,9 @@ export const badgeStyles = css `
 		position: absolute;
 		inset: 0;
 		border-radius: inherit;
-		box-shadow: 0 0 0 0 var(--_background-color);
+		box-shadow: 0 0 0 0 var(--_badge-background-color);
 		pointer-events: none;
-		animation: badge-pulse var(--_pulse-duration) infinite;
+		animation: badge-pulse var(--_badge-pulse-duration) infinite;
 	}
 
 	/* The ring rides on the shadow's own color rather than on the element's
@@ -262,10 +263,10 @@ export const badgeStyles = css `
 	   snaps back for the next cycle. Same shape as Shoelace's badge pulse. */
 	@keyframes badge-pulse {
 		0% {
-			box-shadow: 0 0 0 0 var(--_background-color);
+			box-shadow: 0 0 0 0 var(--_badge-background-color);
 		}
 		70% {
-			box-shadow: 0 0 0 var(--_pulse-spread) transparent;
+			box-shadow: 0 0 0 var(--_badge-pulse-spread) transparent;
 		}
 		100% {
 			box-shadow: 0 0 0 0 transparent;
@@ -289,15 +290,15 @@ export const badgeStyles = css `
 	}
 
 	.badge--dot {
-		min-width: var(--_dot-size);
-		width: var(--_dot-size);
-		height: var(--_dot-size);
+		min-width: var(--_badge-dot-size);
+		width: var(--_badge-dot-size);
+		height: var(--_badge-dot-size);
 		padding: 0;
 	}
 
 	.badge--icon-only {
-		min-width: var(--_height);
-		width: var(--_height);
+		min-width: var(--_badge-height);
+		width: var(--_badge-height);
 		padding: 0;
 	}
 
@@ -309,17 +310,17 @@ export const badgeStyles = css `
 	   on an element that also sets color would take that color instead of the
 	   one around it. Mirrors nldd-avatar. */
 	.badge__icon {
-		color: var(--_content-color);
+		color: var(--_badge-content-color);
 		display: inline-flex;
-		width: var(--_icon-size);
-		height: var(--_icon-size);
+		width: var(--_badge-icon-size);
+		height: var(--_badge-icon-size);
 		flex-shrink: 0;
 		align-items: center;
 		justify-content: center;
 	}
 
 	.badge__icon:has(+ .badge__text) {
-		margin-left: calc((var(--_height) - var(--_icon-size)) / 2 - var(--_inline-padding) + var(--_icon-offset-correction));
+		margin-left: calc((var(--_badge-height) - var(--_badge-icon-size)) / 2 - var(--_badge-inline-padding) + var(--_badge-icon-offset-correction));
 	}
 
 	.badge__icon nldd-icon {
@@ -328,7 +329,7 @@ export const badgeStyles = css `
 	}
 
 	.badge__text {
-		color: var(--_content-color);
+		color: var(--_badge-content-color);
 		display: inline-block;
 	}
 `;

package/dist/components/status-and-feedback/badge/badge.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;IA0B1B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiTrB,CAAC"}
+{"version":3,"file":"badge.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2B1B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiTrB,CAAC"}

package/dist/components/status-and-feedback/banner/banner.styles.js

@@ -13,25 +13,25 @@ export const bannerStyles = css `
 	 * Scoping. The host only keeps the external contract. */
 
 	:host {
-		--_corner-radius: var(--components-banner-corner-radius);
-		--_padding: var(--components-banner-md-padding);
-		--_background-color: var(--semantics-categories-neutral-tinted-background-color);
-		--_border-color: var(--semantics-categories-neutral-tinted-highlight-border-color);
-		--_border-width: var(--primitives-border-width-thin);
-		--_icon-color: var(--semantics-categories-neutral-tinted-content-color);
-		--_icon-size: var(--components-banner-md-icon-size);
-		--_content-color: var(--components-banner-content-color);
-		--_text-icon-offset: calc((var(--_icon-size) - var(--primitives-font-size-100) * var(--primitives-line-height-tight)) / 2);
-		--_column-gap: var(--primitives-space-8);
-		--_dismiss-inset: 0px;
-		--_dismissible-padding-right: calc(var(--_dismiss-inset) + var(--semantics-controls-md-min-size));
-		--_main-gap: var(--primitives-space-8);
-		--_actions-gap: var(--primitives-space-4);
+		--_banner-corner-radius: var(--semantics-surfaces-corner-radius);
+		--_banner-padding: var(--primitives-space-12);
+		--_banner-background-color: var(--semantics-categories-neutral-tinted-background-color);
+		--_banner-border-color: var(--semantics-categories-neutral-tinted-highlight-border-color);
+		--_banner-border-width: var(--primitives-border-width-thin);
+		--_banner-icon-color: var(--semantics-categories-neutral-tinted-content-color);
+		--_banner-icon-size: var(--primitives-space-32);
+		--_banner-content-color: var(--semantics-content-color);
+		--_banner-text-icon-offset: calc((var(--_banner-icon-size) - var(--primitives-font-size-100) * var(--primitives-line-height-tight)) / 2);
+		--_banner-column-gap: var(--primitives-space-8);
+		--_banner-dismiss-inset: 0px;
+		--_banner-dismissible-padding-right: calc(var(--_banner-dismiss-inset) + var(--semantics-controls-md-min-size));
+		--_banner-main-gap: var(--primitives-space-8);
+		--_banner-actions-gap: var(--primitives-space-4);
 
 		${inheritedTextReset}
 		display: block;
 		width: 100%;
-		color: var(--_content-color);
+		color: var(--_banner-content-color);
 	}
 
 	:host([hidden]) {
@@ -40,42 +40,42 @@ export const bannerStyles = css `
 
 	/* The dismiss slot narrows with the icon-button the template swaps in, so
 	   the reserved right padding tracks the control size rather than a fixed
-	   value. --_text-icon-offset follows --_icon-size on its own.
+	   value. --_banner-text-icon-offset follows --_banner-icon-size on its own.
 
-	   --_dismiss-inset pulls the 32px button up until its center sits on the
+	   --_banner-dismiss-inset pulls the 32px button up until its center sits on the
 	   24px icon's center (8 - (32 - 24) / 2 = 4), and the same value on the
 	   right gives the button equal air on both sides of its corner. */
 
 	:host([size="sm"]) {
-		--_padding: var(--components-banner-sm-padding);
-		--_icon-size: var(--components-banner-sm-icon-size);
-		--_column-gap: var(--primitives-space-4);
-		--_dismiss-inset: calc(var(--_padding) - (var(--semantics-controls-sm-min-size) - var(--_icon-size)) / 2);
-		--_dismissible-padding-right: calc(var(--_dismiss-inset) + var(--semantics-controls-sm-min-size));
+		--_banner-padding: var(--primitives-space-8);
+		--_banner-icon-size: var(--primitives-space-24);
+		--_banner-column-gap: var(--primitives-space-4);
+		--_banner-dismiss-inset: calc(var(--_banner-padding) - (var(--semantics-controls-sm-min-size) - var(--_banner-icon-size)) / 2);
+		--_banner-dismissible-padding-right: calc(var(--_banner-dismiss-inset) + var(--semantics-controls-sm-min-size));
 	}
 
 	:host([variant="accent"]) {
-		--_background-color: var(--semantics-categories-accent-tinted-background-color);
-		--_border-color: var(--semantics-categories-accent-tinted-highlight-border-color);
-		--_icon-color: var(--semantics-categories-accent-tinted-content-color);
+		--_banner-background-color: var(--semantics-categories-accent-tinted-background-color);
+		--_banner-border-color: var(--semantics-categories-accent-tinted-highlight-border-color);
+		--_banner-icon-color: var(--semantics-categories-accent-tinted-content-color);
 	}
 
 	:host([variant="success"]) {
-		--_background-color: var(--semantics-categories-success-tinted-background-color);
-		--_border-color: var(--semantics-categories-success-tinted-highlight-border-color);
-		--_icon-color: var(--semantics-categories-success-tinted-content-color);
+		--_banner-background-color: var(--semantics-categories-success-tinted-background-color);
+		--_banner-border-color: var(--semantics-categories-success-tinted-highlight-border-color);
+		--_banner-icon-color: var(--semantics-categories-success-tinted-content-color);
 	}
 
 	:host([variant="warning"]) {
-		--_background-color: var(--semantics-categories-warning-tinted-background-color);
-		--_border-color: var(--semantics-categories-warning-tinted-highlight-border-color);
-		--_icon-color: var(--semantics-categories-warning-tinted-content-color);
+		--_banner-background-color: var(--semantics-categories-warning-tinted-background-color);
+		--_banner-border-color: var(--semantics-categories-warning-tinted-highlight-border-color);
+		--_banner-icon-color: var(--semantics-categories-warning-tinted-content-color);
 	}
 
 	:host([variant="critical"]) {
-		--_background-color: var(--semantics-categories-critical-tinted-background-color);
-		--_border-color: var(--semantics-categories-critical-tinted-highlight-border-color);
-		--_icon-color: var(--semantics-categories-critical-tinted-content-color);
+		--_banner-background-color: var(--semantics-categories-critical-tinted-background-color);
+		--_banner-border-color: var(--semantics-categories-critical-tinted-highlight-border-color);
+		--_banner-icon-color: var(--semantics-categories-critical-tinted-content-color);
 	}
 
 	/* # Block */
@@ -84,21 +84,21 @@ export const bannerStyles = css `
 		box-sizing: border-box;
 		display: grid;
 		position: relative;
-		border-radius: var(--_corner-radius);
-		box-shadow: inset 0 0 0 var(--_border-width) var(--_border-color);
-		background-color: var(--_background-color);
-		padding: var(--_padding);
+		border-radius: var(--_banner-corner-radius);
+		box-shadow: inset 0 0 0 var(--_banner-border-width) var(--_banner-border-color);
+		background-color: var(--_banner-background-color);
+		padding: var(--_banner-padding);
 		grid-template-columns: auto 1fr;
-		gap: var(--_column-gap);
+		gap: var(--_banner-column-gap);
 	}
 
 	:host([dismissible]) .banner {
-		padding-right: var(--_dismissible-padding-right);
+		padding-right: var(--_banner-dismissible-padding-right);
 	}
 
 	@media (forced-colors: active) {
 		.banner {
-			border: var(--_border-width) solid CanvasText;
+			border: var(--_banner-border-width) solid CanvasText;
 		}
 	}
 
@@ -109,9 +109,9 @@ export const bannerStyles = css `
 		display: flex;
 		grid-column: 1;
 		grid-row: 1;
-		width: var(--_icon-size);
+		width: var(--_banner-icon-size);
 		align-items: flex-start;
-		color: var(--_icon-color);
+		color: var(--_banner-icon-color);
 	}
 
 
@@ -123,17 +123,17 @@ export const bannerStyles = css `
 		grid-row: 1;
 		min-width: 0;
 		flex-direction: column;
-		gap: var(--_main-gap);
+		gap: var(--_banner-main-gap);
 	}
 
 	.banner__heading {
 		display: flex;
-		padding-top: var(--_text-icon-offset);
+		padding-top: var(--_banner-text-icon-offset);
 		flex-direction: column;
 	}
 
 	.banner__heading:has(.banner__supporting-text) {
-		padding-top: calc(var(--_text-icon-offset) - var(--primitives-space-2));
+		padding-top: calc(var(--_banner-text-icon-offset) - var(--primitives-space-2));
 	}
 
 	/* A banner carries text it did not write: a server message, an identifier, a
@@ -164,7 +164,7 @@ export const bannerStyles = css `
 
 	.banner__actions {
 		display: flex;
-		margin-top: var(--_actions-gap);
+		margin-top: var(--_banner-actions-gap);
 	}
 
 	.banner__actions[hidden] {
@@ -177,8 +177,8 @@ export const bannerStyles = css `
 	.banner__dismiss-button {
 		display: flex;
 		position: absolute;
-		top: var(--_dismiss-inset);
-		right: var(--_dismiss-inset);
+		top: var(--_banner-dismiss-inset);
+		right: var(--_banner-dismiss-inset);
 	}
 `;
 //# sourceMappingURL=banner.styles.js.map