@nldd/design-system 0.8.44 → 0.8.45

package/dist/components/actions/button/button.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button/button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAmZxB,CAAC"}
+{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button/button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAyRxB,CAAC"}

package/dist/components/actions/button/button.styles.js

@@ -5,7 +5,21 @@ export const buttonStyles = css `
 	/* # Host */
 
 	:host {
+		--_corner-radius: var(--semantics-controls-md-corner-radius);
+		--_background-color: var(--semantics-buttons-neutral-tinted-background-color);
 		--_width: auto;
+		--_min-size: var(--semantics-controls-md-min-size);
+		--_block-padding: var(--semantics-controls-md-block-padding);
+		--_inline-padding: var(--semantics-controls-md-inline-padding);
+		--_gap: var(--semantics-buttons-md-gap);
+		--_content-color: var(--semantics-buttons-neutral-tinted-content-color);
+		--_font: var(--semantics-buttons-md-font);
+		--_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-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);
+		--_icon-size: var(--semantics-buttons-md-icon-size);
+		--_disclosure-icon-margin-left: -2px;
 		--_disclosure-icon-size: var(--primitives-space-20);
 
 		display: inline-block;
@@ -14,13 +28,144 @@ export const buttonStyles = css `
 	}
 
 	: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-controls-sm-inline-padding);
+		--_gap: var(--semantics-buttons-sm-gap);
+		--_font: var(--semantics-buttons-sm-font);
+		--_icon-size: var(--semantics-buttons-sm-icon-size);
+		--_disclosure-icon-margin-left: -1px;
 		--_disclosure-icon-size: var(--primitives-space-18);
 	}
 
 	: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-controls-xs-inline-padding);
+		--_gap: var(--semantics-buttons-xs-gap);
+		--_font: var(--semantics-buttons-xs-font);
+		--_icon-size: var(--semantics-buttons-xs-icon-size);
+		--_disclosure-icon-margin-left: -1px;
 		--_disclosure-icon-size: var(--primitives-space-16);
 	}
 
+	/* ## Neutral Transparent */
+
+	:host([variant="neutral-transparent"]) {
+		--_background-color: transparent;
+		--_content-color: var(--semantics-buttons-neutral-transparent-content-color);
+		--_is-hovered-background-color: transparent;
+		--_is-hovered-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
+		--_is-active-background-color: transparent;
+		--_is-active-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
+	}
+
+	/* ## Accent Filled (Primary) */
+
+	:host([variant="accent-filled"]),
+	:host([variant="primary"]) {
+		--_background-color: var(--semantics-buttons-accent-filled-background-color);
+		--_content-color: var(--semantics-buttons-accent-filled-content-color);
+		--_is-hovered-background-color: var(--semantics-buttons-accent-filled-is-hovered-background-color);
+		--_is-hovered-content-color: var(--semantics-buttons-accent-filled-is-hovered-content-color);
+		--_is-active-background-color: var(--semantics-buttons-accent-filled-is-active-background-color);
+		--_is-active-content-color: var(--semantics-buttons-accent-filled-is-active-content-color);
+	}
+
+	/* ## Accent Transparent */
+
+	:host([variant="accent-transparent"]) {
+		--_background-color: transparent;
+		--_content-color: var(--semantics-buttons-accent-transparent-content-color);
+		--_is-hovered-background-color: transparent;
+		--_is-hovered-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
+		--_is-active-background-color: transparent;
+		--_is-active-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
+	}
+
+	/* ## Critical Tinted */
+
+	:host([variant="critical-tinted"]),
+	:host([variant="destructive"]) {
+		--_background-color: var(--semantics-buttons-critical-tinted-background-color);
+		--_content-color: var(--semantics-buttons-critical-tinted-content-color);
+		--_is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-hovered-background-color);
+		--_is-hovered-content-color: var(--semantics-buttons-critical-tinted-is-hovered-content-color);
+		--_is-active-background-color: var(--semantics-buttons-critical-tinted-is-active-background-color);
+		--_is-active-content-color: var(--semantics-buttons-critical-tinted-is-active-content-color);
+	}
+
+	/* ## Critical Transparent */
+
+	:host([variant="critical-transparent"]) {
+		--_background-color: transparent;
+		--_content-color: var(--semantics-buttons-critical-transparent-content-color);
+		--_is-hovered-background-color: transparent;
+		--_is-hovered-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
+		--_is-active-background-color: transparent;
+		--_is-active-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
+	}
+
+	/* ## Expanded — default (incl. unknown variant) */
+
+	:host([expanded]) {
+		--_background-color: var(--semantics-buttons-neutral-tinted-is-expanded-background-color);
+		--_content-color: var(--semantics-buttons-neutral-tinted-is-expanded-content-color);
+		--_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-background-color);
+		--_is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-color);
+		--_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-background-color);
+		--_is-active-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-content-color);
+	}
+
+	:host([expanded][variant="accent-filled"]),
+	:host([expanded][variant="primary"]) {
+		--_background-color: var(--semantics-buttons-accent-filled-is-expanded-background-color);
+		--_content-color: var(--semantics-buttons-accent-filled-is-expanded-content-color);
+		--_is-hovered-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-background-color);
+		--_is-hovered-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-content-color);
+		--_is-active-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-background-color);
+		--_is-active-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-content-color);
+	}
+
+	:host([expanded][variant="neutral-transparent"]) {
+		--_background-color: transparent;
+		--_content-color: var(--semantics-buttons-neutral-transparent-content-color);
+		--_is-hovered-background-color: transparent;
+		--_is-hovered-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
+		--_is-active-background-color: transparent;
+		--_is-active-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
+	}
+
+	:host([expanded][variant="accent-transparent"]) {
+		--_background-color: transparent;
+		--_content-color: var(--semantics-buttons-accent-transparent-content-color);
+		--_is-hovered-background-color: transparent;
+		--_is-hovered-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
+		--_is-active-background-color: transparent;
+		--_is-active-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
+	}
+
+	:host([expanded][variant="critical-tinted"]),
+	:host([expanded][variant="destructive"]) {
+		--_background-color: var(--semantics-buttons-critical-tinted-background-color);
+		--_content-color: var(--semantics-buttons-critical-tinted-content-color);
+		--_is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-hovered-background-color);
+		--_is-hovered-content-color: var(--semantics-buttons-critical-tinted-is-hovered-content-color);
+		--_is-active-background-color: var(--semantics-buttons-critical-tinted-is-active-background-color);
+		--_is-active-content-color: var(--semantics-buttons-critical-tinted-is-active-content-color);
+	}
+
+	:host([expanded][variant="critical-transparent"]) {
+		--_background-color: transparent;
+		--_content-color: var(--semantics-buttons-critical-transparent-content-color);
+		--_is-hovered-background-color: transparent;
+		--_is-hovered-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
+		--_is-active-background-color: transparent;
+		--_is-active-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
+	}
+
 	:host([width="full"]) {
 		display: block;
 		width: 100%;
@@ -44,34 +189,43 @@ export const buttonStyles = css `
 		display: inline-flex;
 		margin: 0;
 		border: none;
+		border-radius: var(--_corner-radius);
 		background: none;
+		background-color: var(--_background-color);
 		width: var(--_width);
+		min-width: var(--_min-size);
 		max-width: 100%;
-		padding: 0;
+		min-height: var(--_min-size);
+		padding: var(--_block-padding) var(--_inline-padding);
+		gap: var(--_gap);
 		align-items: center;
 		justify-content: center;
-		font: inherit;
+		color: var(--_content-color);
+		font: var(--_font);
 		text-decoration: none;
 		text-wrap: pretty;
-		appearance: none;
 		transition:
 			background-color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default),
 			color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default)
 		;
+		appearance: none;
 	}
 
 	a.button {
 		cursor: var(--semantics-controls-link-cursor);
 	}
 
-	@media (prefers-reduced-motion: reduce) {
-		.button {
-			transition: none;
+	.button:hover {
+		@media (hover: hover) {
+			background-color: var(--_is-hovered-background-color);
+			color: var(--_is-hovered-content-color);
 		}
 	}
 
-
-	/* # Focus */
+	.button:active {
+		background-color: var(--_is-active-background-color);
+		color: var(--_is-active-content-color);
+	}
 
 	.button:focus-visible {
 		outline: var(--semantics-focus-ring-outline);
@@ -83,258 +237,14 @@ export const buttonStyles = css `
 		outline: none;
 	}
 
-
-	/* # Sizes */
-
-	/* ## Size: XS */
-
-	:host([size="xs"]) .button {
-		border-radius: var(--semantics-controls-xs-corner-radius);
-		min-height: var(--semantics-controls-xs-min-size);
-		min-width: var(--semantics-controls-xs-min-size);
-		padding: var(--semantics-controls-xs-block-padding) var(--semantics-controls-xs-inline-padding);
-		gap: var(--semantics-buttons-xs-gap);
-		font: var(--semantics-buttons-xs-font);
-	}
-
-	/* ## Size: SM */
-
-	:host([size="sm"]) .button {
-		border-radius: var(--semantics-controls-sm-corner-radius);
-		min-height: var(--semantics-controls-sm-min-size);
-		min-width: var(--semantics-controls-sm-min-size);
-		padding: var(--semantics-controls-sm-block-padding) var(--semantics-controls-sm-inline-padding);
-		gap: var(--semantics-buttons-sm-gap);
-		font: var(--semantics-buttons-sm-font);
-	}
-
-	/* ## Size: MD (Default) */
-
-	:host([size="md"]) .button,
-	:host(:not([size])) .button {
-		border-radius: var(--semantics-controls-md-corner-radius);
-		min-height: var(--semantics-controls-md-min-size);
-		min-width: var(--semantics-controls-md-min-size);
-		padding: var(--semantics-controls-md-block-padding) var(--semantics-controls-md-inline-padding);
-		gap: var(--semantics-buttons-md-gap);
-		font: var(--semantics-buttons-md-font);
-	}
-
-
-	/* # Variants */
-
-	/* ## Neutral Tintend (Secondary, Default) */
-
-	/* ### Default neutral tinted button */
-
-	:host([variant="neutral-tinted"]) .button,
-	:host([variant="secondary"]) .button,
-	:host(:not([variant])) .button {
-		background-color: var(--semantics-buttons-neutral-tinted-background-color);
-		color: var(--semantics-buttons-neutral-tinted-content-color);
-	}
-
-	/* ### Hovered neutral tinted button */
-
-	@media (hover: hover) {
-		:host([variant="neutral-tinted"]) .button:hover,
-		:host([variant="secondary"]) .button:hover,
-		:host(:not([variant])) .button:hover {
-			background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
-			color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
-		}
-	}
-
-	/* ### Active neutral tinted button */
-
-	:host([variant="neutral-tinted"]) .button:active,
-	:host([variant="secondary"]) .button:active,
-	:host(:not([variant])) .button:active {
-		background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
-		color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
-	}
-
-	/* ### Open neutral tinted button */
-
-	:host([expanded][variant="neutral-tinted"]) .button,
-	:host([expanded][variant="secondary"]) .button,
-	:host([expanded]:not([variant])) .button {
-		background-color: var(--semantics-buttons-neutral-tinted-is-expanded-background-color);
-		color: var(--semantics-buttons-neutral-tinted-is-expanded-content-color);
-	}
-
-	/* ### Open hovered neutral tinted button */
-
-	@media (hover: hover) {
-		:host([expanded][variant="neutral-tinted"]) .button:hover,
-		:host([expanded][variant="secondary"]) .button:hover,
-		:host([expanded]:not([variant])) .button:hover {
-			background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-background-color);
-			color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-color);
-		}
-	}
-
-	/* ### Open active neutral tinted button */
-
-	:host([expanded][variant="neutral-tinted"]) .button:active,
-	:host([expanded][variant="secondary"]) .button:active,
-	:host([expanded]:not([variant])) .button:active {
-		background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-background-color);
-		color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-content-color);
-	}
-
-	/* ## Neutral Transparent */
-
-	/* ### Default neutral transparent button */
-
-	:host([variant="neutral-transparent"]) .button {
-		background-color: transparent;
-		color: var(--semantics-buttons-neutral-transparent-content-color);
-	}
-
-	/* ### Hovered neutral transparent button */
-
-	@media (hover: hover) {
-		:host([variant="neutral-transparent"]) .button:hover {
-			color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
-		}
-	}
-
-	/* ### Active neutral transparent button */
-
-	:host([variant="neutral-transparent"]) .button:active {
-		color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
-	}
-
-	/* ## Accent Filled (Primary) */
-
-	/* ### Default accent filled button */
-
-	:host([variant="accent-filled"]) .button,
-	:host([variant="primary"]) .button {
-		background-color: var(--semantics-buttons-accent-filled-background-color);
-		color: var(--semantics-buttons-accent-filled-content-color);
-	}
-
-	/* ### Hovered accent filled button */
-
-	@media (hover: hover) {
-		:host([variant="accent-filled"]) .button:hover,
-		:host([variant="primary"]) .button:hover {
-			background-color: var(--semantics-buttons-accent-filled-is-hovered-background-color);
-			color: var(--semantics-buttons-accent-filled-is-hovered-content-color);
-		}
-	}
-
-	/* ### Active accent filled button */
-
-	:host([variant="accent-filled"]) .button:active,
-	:host([variant="primary"]) .button:active {
-		background-color: var(--semantics-buttons-accent-filled-is-active-background-color);
-		color: var(--semantics-buttons-accent-filled-is-active-content-color);
-	}
-
-	/* ### Open accent filled button */
-
-	:host([expanded][variant="accent-filled"]) .button,
-	:host([expanded][variant="primary"]) .button {
-		background-color: var(--semantics-buttons-accent-filled-is-expanded-background-color);
-		color: var(--semantics-buttons-accent-filled-is-expanded-content-color);
-	}
-
-	/* ### Open hovered accent filled button */
-
-	@media (hover: hover) {
-		:host([expanded][variant="accent-filled"]) .button:hover,
-		:host([expanded][variant="primary"]) .button:hover {
-			background-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-background-color);
-			color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-content-color);
-		}
-	}
-
-	/* ### Open active accent filled button */
-
-	:host([expanded][variant="accent-filled"]) .button:active,
-	:host([expanded][variant="primary"]) .button:active {
-		background-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-background-color);
-		color: var(--semantics-buttons-accent-filled-is-expanded-is-active-content-color);
-	}
-
-	/* ## Accent Transparent */
-
-	/* ### Default accent transparent button */
-
-	:host([variant="accent-transparent"]) .button {
-		background-color: transparent;
-		color: var(--semantics-buttons-accent-transparent-content-color);
-	}
-
-	/* ### Hovered accent transparent button */
-
-	@media (hover: hover) {
-		:host([variant="accent-transparent"]) .button:hover {
-			color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
-		}
-	}
-
-	/* ### Active accent transparent button */
-
-	:host([variant="accent-transparent"]) .button:active {
-		color: var(--semantics-buttons-accent-transparent-is-active-content-color);
-	}
-
-	/* ## Critical Tinted */
-
-	/* ### Default critical tinted button */
-
-	:host([variant="critical-tinted"]) .button,
-	:host([variant="destructive"]) .button {
-		background-color: var(--semantics-buttons-critical-tinted-background-color);
-		color: var(--semantics-buttons-critical-tinted-content-color);
-	}
-
-	/* ### Hovered critical tinted button */
-
-	@media (hover: hover) {
-		:host([variant="critical-tinted"]) .button:hover,
-		:host([variant="destructive"]) .button:hover {
-			background-color: var(--semantics-buttons-critical-tinted-is-hovered-background-color);
-			color: var(--semantics-buttons-critical-tinted-is-hovered-content-color);
-		}
-	}
-
-	/* ### Active critical tinted button */
-
-	:host([variant="critical-tinted"]) .button:active,
-	:host([variant="destructive"]) .button:active {
-		background-color: var(--semantics-buttons-critical-tinted-is-active-background-color);
-		color: var(--semantics-buttons-critical-tinted-is-active-content-color);
-	}
-
-	/* ## Critical Transparent */
-
-	/* ### Default critical transparent button */
-
-	:host([variant="critical-transparent"]) .button {
-		background-color: transparent;
-		color: var(--semantics-buttons-critical-transparent-content-color);
-	}
-
-	/* ### Hovered critical transparent button */
-
-	@media (hover: hover) {
-		:host([variant="critical-transparent"]) .button:hover {
-			color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
+	@media (prefers-reduced-motion: reduce) {
+		.button {
+			transition: none;
 		}
 	}
 
-	/* ### Active critical transparent button */
 
-	:host([variant="critical-transparent"]) .button:active {
-		color: var(--semantics-buttons-critical-transparent-is-active-content-color);
-	}
-
-	/* ## Elements */
+	/* # Elements */
 
 	.button__content {
 		display: contents;
@@ -357,50 +267,18 @@ export const buttonStyles = css `
 	.button__start-icon,
 	.button__end-icon {
 		display: block;
+		width: var(--_icon-size);
+		height: var(--_icon-size);
 		flex-shrink: 0;
 	}
 
-	:host([size="md"]) .button__start-icon,
-	:host(:not([size])) .button__start-icon,
-	:host([size="md"]) .button__end-icon,
-	:host(:not([size])) .button__end-icon {
-		width: var(--semantics-buttons-md-icon-size);
-		height: var(--semantics-buttons-md-icon-size);
-	}
-
-	:host([size="sm"]) .button__start-icon,
-	:host([size="sm"]) .button__end-icon {
-		width: var(--semantics-buttons-sm-icon-size);
-		height: var(--semantics-buttons-sm-icon-size);
-	}
-
-	:host([size="xs"]) .button__start-icon,
-	:host([size="xs"]) .button__end-icon {
-		width: var(--semantics-buttons-xs-icon-size);
-		height: var(--semantics-buttons-xs-icon-size);
-	}
-
 	.button__disclosure-icon {
 		display: block;
+		margin-left: var(--_disclosure-icon-margin-left);
+		margin-right: -2px;
 		width: var(--_disclosure-icon-size);
 		height: var(--_disclosure-icon-size);
 		flex-shrink: 0;
 	}
-
-	:host([size="md"]) .button__disclosure-icon,
-	:host(:not([size])) .button__disclosure-icon {
-		margin-left: -2px;
-		margin-right: -2px;
-	}
-
-	:host([size="sm"]) .button__disclosure-icon {
-		margin-left: -1px;
-		margin-right: -2px;
-	}
-
-	:host([size="xs"]) .button__disclosure-icon {
-		margin-left: -1px;
-		margin-right: -2px;
-	}
 `;
 //# sourceMappingURL=button.styles.js.map

package/dist/components/actions/button/button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../../src/components/actions/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmZ9B,CAAC"}
+{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../../src/components/actions/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyR9B,CAAC"}

package/dist/components/actions/button-bar/button-bar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button-bar/button-bar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,yBAkI3B,CAAC"}
+{"version":3,"file":"button-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button-bar/button-bar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,yBAoF3B,CAAC"}

package/dist/components/actions/button-bar/button-bar.styles.js

@@ -5,10 +5,36 @@ export const buttonBarStyles = css `
 	/* # Host */
 
 	:host {
+		--_corner-radius: var(--semantics-controls-md-corner-radius);
+		--_background-color: var(--semantics-buttons-neutral-tinted-background-color);
+		--_size: var(--semantics-controls-md-min-size);
+		--_divider-color: var(--semantics-buttons-neutral-tinted-divider-color);
+		--_divider-length: var(--semantics-buttons-md-divider-length);
+
 		display: inline-flex;
 		isolation: isolate;
 	}
 
+	:host([size="sm"]) {
+		--_corner-radius: var(--semantics-controls-sm-corner-radius);
+		--_size: var(--semantics-controls-sm-min-size);
+		--_divider-length: var(--semantics-buttons-sm-divider-length);
+	}
+
+	:host([size="xs"]) {
+		--_corner-radius: var(--semantics-controls-xs-corner-radius);
+		--_size: var(--semantics-controls-xs-min-size);
+		--_divider-length: var(--semantics-buttons-xs-divider-length);
+	}
+
+	/* ## Accent Filled (Primary) */
+
+	:host([variant="accent-filled"]),
+	:host([variant="primary"]) {
+		--_background-color: var(--semantics-buttons-accent-filled-background-color);
+		--_divider-color: var(--semantics-buttons-accent-filled-divider-color);
+	}
+
 	:host([hidden]) {
 		display: none;
 	}
@@ -28,103 +54,31 @@ export const buttonBarStyles = css `
 
 	.button-bar {
 		display: flex;
+		border-radius: var(--_corner-radius);
+		background-color: var(--_background-color);
+		height: var(--_size);
 		flex-direction: row;
 		justify-content: center;
 		align-items: center;
 	}
 
 
-	/* # Variants */
-
-	/* ## Variant: Neutral Tinted (Default) / Secondary */
-
-	:host([variant="neutral-tinted"]) .button-bar,
-	:host([variant="secondary"]) .button-bar,
-	:host(:not([variant])) .button-bar {
-		background-color: var(--semantics-buttons-neutral-tinted-background-color);
-	}
-
-	/* ## Variant: Accent Filled / Primary */
-
-	:host([variant="accent-filled"]) .button-bar,
-	:host([variant="primary"]) .button-bar {
-		background-color: var(--semantics-buttons-accent-filled-background-color);
-	}
-
-
-	/* # Size: XS */
-
-	:host([size="xs"]) .button-bar {
-		border-radius: var(--semantics-controls-xs-corner-radius);
-		height: var(--semantics-controls-xs-min-size);
-	}
-
-
-	/* # Size: SM */
-
-	:host([size="sm"]) .button-bar {
-		border-radius: var(--semantics-controls-sm-corner-radius);
-		height: var(--semantics-controls-sm-min-size);
-	}
-
-
-	/* # Size: MD */
-
-	:host([size="md"]) .button-bar,
-	:host(:not([size])) .button-bar {
-		border-radius: var(--semantics-controls-md-corner-radius);
-		height: var(--semantics-controls-md-min-size);
-	}
-
-
-	/* # Divider */
+	/* # Elements */
 
 	.button-bar__divider {
 		display: flex;
+		height: var(--_size);
 		align-items: center;
 		justify-content: center;
 		flex-shrink: 0;
 	}
 
-	:host([size="xs"]) .button-bar__divider {
-		height: var(--semantics-controls-xs-min-size);
-	}
-
-	:host([size="sm"]) .button-bar__divider {
-		height: var(--semantics-controls-sm-min-size);
-	}
-
-	:host([size="md"]) .button-bar__divider,
-	:host(:not([size])) .button-bar__divider {
-		height: var(--semantics-controls-md-min-size);
-	}
-
 	.button-bar__divider-line {
-		background-color: var(--semantics-buttons-neutral-tinted-divider-color);
+		background-color: var(--_divider-color);
 		width: var(--semantics-dividers-thickness);
+		height: var(--_divider-length);
 	}
 
-	:host([variant="accent-filled"]) .button-bar__divider-line,
-	:host([variant="primary"]) .button-bar__divider-line {
-		background-color: var(--semantics-buttons-accent-filled-divider-color);
-	}
-
-	:host([size="xs"]) .button-bar__divider-line {
-		height: var(--semantics-buttons-xs-divider-length);
-	}
-
-	:host([size="sm"]) .button-bar__divider-line {
-		height: var(--semantics-buttons-sm-divider-length);
-	}
-
-	:host([size="md"]) .button-bar__divider-line,
-	:host(:not([size])) .button-bar__divider-line {
-		height: var(--semantics-buttons-md-divider-length);
-	}
-
-
-	/* # Focus */
-
 	::slotted([data-focused]) {
 		position: relative;
 		z-index: 1;