@nldd/design-system 0.8.43 → 0.8.45

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

@@ -5,18 +5,164 @@ export const iconButtonStyles = 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);
+		--_padding: calc((var(--semantics-controls-md-min-size) - var(--semantics-buttons-md-icon-only-icon-size)) / 2);
+		--_content-color: var(--semantics-buttons-neutral-tinted-content-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-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-only-icon-size);
+		--_disclosure-icon-margin-right: calc(var(--primitives-space-2) * -1);
 		--_disclosure-icon-size: var(--primitives-space-20);
+		--_text-display: none;
 
 		display: inline-block;
 		max-width: 100%;
 		-webkit-tap-highlight-color: transparent;
 	}
 
-	:host([size='xs']) {
+	:host([size="xs"]) {
+		--_corner-radius: var(--semantics-controls-xs-corner-radius);
+		--_min-size: var(--semantics-controls-xs-min-size);
+		--_padding: calc((var(--semantics-controls-xs-min-size) - var(--semantics-buttons-xs-icon-only-icon-size)) / 2);
+		--_icon-size: var(--semantics-buttons-xs-icon-only-icon-size);
+		--_disclosure-icon-margin-right: 0;
 		--_disclosure-icon-size: var(--primitives-space-16);
 	}
 
+	:host([size="sm"]) {
+		--_corner-radius: var(--semantics-controls-sm-corner-radius);
+		--_min-size: var(--semantics-controls-sm-min-size);
+		--_padding: calc((var(--semantics-controls-sm-min-size) - var(--semantics-buttons-sm-icon-only-icon-size)) / 2);
+		--_icon-size: var(--semantics-buttons-sm-icon-only-icon-size);
+	}
+
+	:host([size="lg"]) {
+		--_corner-radius: var(--semantics-controls-lg-corner-radius);
+		--_min-size: var(--semantics-controls-lg-min-size);
+		--_padding: var(--primitives-space-8);
+		--_text-display: block;
+	}
+
+	/* ## 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 (Destructive) */
+
+	: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%;
@@ -36,23 +182,29 @@ export const iconButtonStyles = css `
 	/* # Block */
 
 	.icon-button {
-		appearance: none;
-		border: none;
-		margin: 0;
-		padding: 0;
-		background: none;
-		font: inherit;
 		box-sizing: border-box;
-		text-decoration: none;
 		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);
+		height: var(--_min-size);
+		min-height: var(--_min-size);
+		padding: var(--_padding);
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		width: var(--_width);
+		color: var(--_content-color);
+		font: inherit;
+		text-decoration: 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.icon-button {
@@ -65,9 +217,6 @@ export const iconButtonStyles = css `
 		}
 	}
 
-
-	/* # Focus */
-
 	.icon-button:focus-visible {
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
@@ -78,262 +227,16 @@ export const iconButtonStyles = css `
 		outline: none;
 	}
 
-
-	/* # Sizes */
-
-	/* ## Size: XS */
-
-	:host([size='xs']) .icon-button {
-		height: var(--semantics-controls-xs-min-size);
-		min-width: var(--semantics-controls-xs-min-size);
-		min-height: var(--semantics-controls-xs-min-size);
-		padding: calc((var(--semantics-controls-xs-min-size) - var(--semantics-buttons-xs-icon-only-icon-size)) / 2);
-		border-radius: var(--semantics-controls-xs-corner-radius);
-	}
-
-	/* ## Size: SM */
-
-	:host([size='sm']) .icon-button {
-		height: var(--semantics-controls-sm-min-size);
-		min-width: var(--semantics-controls-sm-min-size);
-		min-height: var(--semantics-controls-sm-min-size);
-		padding: calc((var(--semantics-controls-sm-min-size) - var(--semantics-buttons-sm-icon-only-icon-size)) / 2);
-		border-radius: var(--semantics-controls-sm-corner-radius);
-	}
-
-	/* ## Size: MD (Default) */
-
-	:host([size='md']) .icon-button,
-	:host(:not([size])) .icon-button {
-		height: var(--semantics-controls-md-min-size);
-		min-width: var(--semantics-controls-md-min-size);
-		min-height: var(--semantics-controls-md-min-size);
-		padding: calc((var(--semantics-controls-md-min-size) - var(--semantics-buttons-md-icon-only-icon-size)) / 2);
-		border-radius: var(--semantics-controls-md-corner-radius);
-	}
-
-	/* ## Size: LG */
-
-	:host([size='lg']) .icon-button {
-		height: var(--semantics-controls-lg-min-size);
-		min-width: var(--semantics-controls-lg-min-size);
-		min-height: var(--semantics-controls-lg-min-size);
-		padding: var(--primitives-space-8);
-		border-radius: var(--semantics-controls-lg-corner-radius);
-	}
-
-	/* # Variants */
-
-	/* ## Neutral Tinted (Secondary, Default) */
-
-	/* ### Default neutral tinted icon button */
-
-	:host([variant='neutral-tinted']) .icon-button,
-	:host([variant='secondary']) .icon-button,
-	:host(:not([variant])) .icon-button {
-		background-color: var(--semantics-buttons-neutral-tinted-background-color);
-		color: var(--semantics-buttons-neutral-tinted-content-color);
-	}
-
-	/* ### Hovered neutral tinted icon button */
-
-	@media (hover: hover) {
-		:host([variant='neutral-tinted']) .icon-button:hover,
-		:host([variant='secondary']) .icon-button:hover,
-		:host(:not([variant])) .icon-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 icon button */
-
-	:host([variant='neutral-tinted']) .icon-button:active,
-	:host([variant='secondary']) .icon-button:active,
-	:host(:not([variant])) .icon-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 icon button */
-
-	:host([expanded][variant='neutral-tinted']) .icon-button,
-	:host([expanded][variant='secondary']) .icon-button,
-	:host([expanded]:not([variant])) .icon-button {
-		background-color: var(--semantics-buttons-neutral-tinted-is-open-background-color);
-		color: var(--semantics-buttons-neutral-tinted-is-open-content-color);
-	}
-
-	/* ### Open hovered neutral tinted icon button */
-
-	@media (hover: hover) {
-		:host([expanded][variant='neutral-tinted']) .icon-button:hover,
-		:host([expanded][variant='secondary']) .icon-button:hover,
-		:host([expanded]:not([variant])) .icon-button:hover {
-			background-color: var(--semantics-buttons-neutral-tinted-is-open-is-hovered-background-color);
-			color: var(--semantics-buttons-neutral-tinted-is-open-is-hovered-content-color);
-		}
-	}
-
-	/* ### Open active neutral tinted icon button */
-
-	:host([expanded][variant='neutral-tinted']) .icon-button:active,
-	:host([expanded][variant='secondary']) .icon-button:active,
-	:host([expanded]:not([variant])) .icon-button:active {
-		background-color: var(--semantics-buttons-neutral-tinted-is-open-is-active-background-color);
-		color: var(--semantics-buttons-neutral-tinted-is-open-is-active-content-color);
-	}
-
-	/* ## Neutral Transparent */
-
-	/* ### Default neutral transparent icon button */
-
-	:host([variant='neutral-transparent']) .icon-button {
-		background-color: transparent;
-		color: var(--semantics-buttons-neutral-transparent-content-color);
-	}
-
-	/* ### Hovered neutral transparent icon button */
-
-	@media (hover: hover) {
-		:host([variant='neutral-transparent']) .icon-button:hover {
-			background-color: transparent;
-			color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
-		}
-	}
-
-	/* ### Active neutral transparent icon button */
-
-	:host([variant='neutral-transparent']) .icon-button:active {
-		color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
-	}
-
-	/* ## Accent Filled (Primary) */
-
-	/* ### Default accent filled icon button */
-
-	:host([variant='accent-filled']) .icon-button,
-	:host([variant='primary']) .icon-button {
-		background-color: var(--semantics-buttons-accent-filled-background-color);
-		color: var(--semantics-buttons-accent-filled-content-color);
-	}
-
-	/* ### Hovered accent filled icon button */
-
-	@media (hover: hover) {
-		:host([variant='accent-filled']) .icon-button:hover,
-		:host([variant='primary']) .icon-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 icon button */
-
-	:host([variant='accent-filled']) .icon-button:active,
-	:host([variant='primary']) .icon-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 icon button */
-
-	:host([expanded][variant='accent-filled']) .icon-button,
-	:host([expanded][variant='primary']) .icon-button {
-		background-color: var(--semantics-buttons-accent-filled-is-open-background-color);
-		color: var(--semantics-buttons-accent-filled-is-open-content-color);
-	}
-
-	/* ### Open hovered accent filled icon button */
-
 	@media (hover: hover) {
-		:host([expanded][variant='accent-filled']) .icon-button:hover,
-		:host([expanded][variant='primary']) .icon-button:hover {
-			background-color: var(--semantics-buttons-accent-filled-is-open-is-hovered-background-color);
-			color: var(--semantics-buttons-accent-filled-is-open-is-hovered-content-color);
+		.icon-button:hover {
+			background-color: var(--_is-hovered-background-color);
+			color: var(--_is-hovered-content-color);
 		}
 	}
 
-	/* ### Open active accent filled icon button */
-
-	:host([expanded][variant='accent-filled']) .icon-button:active,
-	:host([expanded][variant='primary']) .icon-button:active {
-		background-color: var(--semantics-buttons-accent-filled-is-open-is-active-background-color);
-		color: var(--semantics-buttons-accent-filled-is-open-is-active-content-color);
-	}
-
-	/* ## Accent Transparent */
-
-	/* ### Default accent transparent icon button */
-
-	:host([variant='accent-transparent']) .icon-button {
-		background-color: transparent;
-		color: var(--semantics-buttons-accent-transparent-content-color);
-	}
-
-	/* ### Hovered accent transparent icon button */
-
-	@media (hover: hover) {
-		:host([variant='accent-transparent']) .icon-button:hover {
-			color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
-		}
-	}
-
-	/* ### Active accent transparent icon button */
-
-	:host([variant='accent-transparent']) .icon-button:active {
-		color: var(--semantics-buttons-accent-transparent-is-active-content-color);
-	}
-
-	/* ## Critical Tinted (Destructive) */
-
-	/* ### Default critical tinted icon button */
-
-	:host([variant='critical-tinted']) .icon-button,
-	:host([variant='destructive']) .icon-button {
-		background-color: var(--semantics-buttons-critical-tinted-background-color);
-		color: var(--semantics-buttons-critical-tinted-content-color);
-	}
-
-	/* ### Hovered critical tinted icon button */
-
-	@media (hover: hover) {
-		:host([variant='critical-tinted']) .icon-button:hover,
-		:host([variant='destructive']) .icon-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 icon button */
-
-	:host([variant='critical-tinted']) .icon-button:active,
-	:host([variant='destructive']) .icon-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 icon button */
-
-	:host([variant='critical-transparent']) .icon-button {
-		background-color: transparent;
-		color: var(--semantics-buttons-critical-transparent-content-color);
-	}
-
-	/* ### Hovered critical transparent icon button */
-
-	@media (hover: hover) {
-		:host([variant='critical-transparent']) .icon-button:hover {
-			color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
-		}
-	}
-
-	/* ### Active critical transparent icon button */
-
-	:host([variant='critical-transparent']) .icon-button:active {
-		color: var(--semantics-buttons-critical-transparent-is-active-content-color);
+	.icon-button:active {
+		background-color: var(--_is-active-background-color);
+		color: var(--_is-active-content-color);
 	}
 
 
@@ -348,56 +251,27 @@ export const iconButtonStyles = css `
 
 	.icon-button__icon {
 		display: flex;
+		width: var(--_icon-size);
+		height: var(--_icon-size);
 		flex-shrink: 0;
 		align-items: center;
 		justify-content: center;
 	}
 
-	:host([size='xs']) .icon-button__icon {
-		width: var(--semantics-buttons-xs-icon-only-icon-size);
-		height: var(--semantics-buttons-xs-icon-only-icon-size);
-	}
-
-	:host([size='sm']) .icon-button__icon {
-		width: var(--semantics-buttons-sm-icon-only-icon-size);
-		height: var(--semantics-buttons-sm-icon-only-icon-size);
-	}
-
-	:host([size='md']) .icon-button__icon,
-	:host(:not([size])) .icon-button__icon {
-		width: var(--semantics-buttons-md-icon-only-icon-size);
-		height: var(--semantics-buttons-md-icon-only-icon-size);
-	}
-
-	:host([size='lg']) .icon-button__icon {
-		width: var(--semantics-buttons-md-icon-only-icon-size);
-		height: var(--semantics-buttons-md-icon-only-icon-size);
-	}
-
 	.icon-button__disclosure-icon {
 		display: flex;
-		flex-shrink: 0;
+		margin-right: var(--_disclosure-icon-margin-right);
 		width: var(--_disclosure-icon-size);
 		height: var(--_disclosure-icon-size);
-	}
-
-	:host([size='sm']) .icon-button__disclosure-icon,
-	:host([size='md']) .icon-button__disclosure-icon,
-	:host(:not([size])) .icon-button__disclosure-icon,
-	:host([size='lg']) .icon-button__disclosure-icon {
-		margin-right: calc(var(--primitives-space-2) * -1);
+		flex-shrink: 0;
 	}
 
 	.icon-button__text {
-		display: none;
+		display: var(--_text-display);
 		text-align: center;
-		white-space: nowrap;
 		color: inherit;
 		font: var(--primitives-font-body-xxs-bold-flat);
-	}
-
-	:host([size='lg']) .icon-button__text {
-		display: block;
+		white-space: nowrap;
 	}
 `;
 //# sourceMappingURL=icon-button.styles.js.map

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

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

package/dist/components/actions/icon-button/icon-button.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.template.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/icon-button/icon-button.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,kCAAkC,CAAC;AAsB1C,wBAAgB,QAAQ,CAAC,IAAI,EAAE,cAAc,wCA4D5C"}
+{"version":3,"file":"icon-button.template.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/icon-button/icon-button.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,kCAAkC,CAAC;AAsB1C,wBAAgB,QAAQ,CAAC,IAAI,EAAE,cAAc,wCAmE5C"}

package/dist/components/actions/icon-button/icon-button.template.js

@@ -50,6 +50,11 @@ export function template() {
 				</a>
 			`;
         }
+        // .popoverTargetElement / .popoverTargetAction are bound unguarded: in
+        // browsers without Popover-invoker IDL support Lit sets a harmless
+        // expando and the cross-shadow association just doesn't take effect —
+        // but those browsers don't support the Popover API at all, so the menu
+        // this button drives is non-functional regardless. No capability check.
         return html `
 			<button class="icon-button"
 				type=${this.type}
@@ -59,15 +64,17 @@ export function template() {
 				aria-haspopup=${this.popupType || nothing}
 				aria-expanded=${ariaExpanded}
 				popovertarget=${this.popovertarget || nothing}
+				.popoverTargetElement=${this.popoverTargetElement}
+				.popoverTargetAction=${this.popoverTargetAction}
 				@click=${this._handleClick}
 			>
 				${content}
 			</button>
 		`;
     };
-    if (tooltipText && !this.hideTooltip) {
+    if (tooltipText && this.tooltipTiming !== 'never') {
         return html `
-			<nldd-tooltip text=${tooltipText}>
+			<nldd-tooltip text=${tooltipText} timing=${this.tooltipTiming}>
 				${renderButton()}
 			</nldd-tooltip>
 		`;

package/dist/components/actions/icon-button/icon-button.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.template.js","sourceRoot":"","sources":["../../../../src/components/actions/icon-button/icon-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAEpC,OAAO,kCAAkC,CAAC;AAE1C,SAAS,aAAa,CAAC,SAAyB;IAC/C,OAAO,IAAI,CAAA;;;MAGN,SAAS,CAAC,IAAI;QACf,CAAC,CAAC,IAAI,CAAA,mBAAmB,SAAS,CAAC,IAAI,eAAe;QACtD,CAAC,CAAC,IAAI,CAAA,iCAAiC,SAAS,CAAC,aAAa,UAAU;;KAExE,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;;;;IAI5B,CAAC,CAAC,CAAC,OAAO;;IAEV,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;qCACY,SAAS,CAAC,IAAI;GAChD,CAAC,CAAC,CAAC,EAAE;EACN,CAAC;AACH,CAAC;AAED,MAAM,UAAU,QAAQ;IACvB,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,IAAI,IAAI,OAAO,CAAC;IAC3D,MAAM,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAEpC,2EAA2E;IAC3E,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe;WACpC,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAE1C,2EAA2E;IAC3E,oEAAoE;IACpE,yEAAyE;IACzE,iEAAiE;IACjE,8BAA8B;IAC9B,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;IACzD,MAAM,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAE/F,MAAM,YAAY,GAAG,GAAG,EAAE;QACzB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;YACxC,OAAO,IAAI,CAAA;;YAEF,IAAI,CAAC,IAAI;cACP,IAAI,CAAC,MAAM,IAAI,OAAO;WACzB,WAAW,IAAI,OAAO;qBACZ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;kBACnC,KAAK;qBACF,IAAI,CAAC,SAAS,IAAI,OAAO;qBACzB,YAAY;cACnB,IAAI,CAAC,YAAY;;OAExB,OAAO;;IAEV,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAA;;WAEF,IAAI,CAAC,IAAI;gBACJ,IAAI,CAAC,QAAQ;oBACT,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;iBACnC,KAAK;oBACF,IAAI,CAAC,SAAS,IAAI,OAAO;oBACzB,YAAY;oBACZ,IAAI,CAAC,aAAa,IAAI,OAAO;aACpC,IAAI,CAAC,YAAY;;MAExB,OAAO;;GAEV,CAAC;IACH,CAAC,CAAC;IAEF,IAAI,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;QACtC,OAAO,IAAI,CAAA;wBACW,WAAW;MAC7B,YAAY,EAAE;;GAEjB,CAAC;IACH,CAAC;IAED,OAAO,YAAY,EAAE,CAAC;AACvB,CAAC"}
+{"version":3,"file":"icon-button.template.js","sourceRoot":"","sources":["../../../../src/components/actions/icon-button/icon-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAEpC,OAAO,kCAAkC,CAAC;AAE1C,SAAS,aAAa,CAAC,SAAyB;IAC/C,OAAO,IAAI,CAAA;;;MAGN,SAAS,CAAC,IAAI;QACf,CAAC,CAAC,IAAI,CAAA,mBAAmB,SAAS,CAAC,IAAI,eAAe;QACtD,CAAC,CAAC,IAAI,CAAA,iCAAiC,SAAS,CAAC,aAAa,UAAU;;KAExE,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;;;;IAI5B,CAAC,CAAC,CAAC,OAAO;;IAEV,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;qCACY,SAAS,CAAC,IAAI;GAChD,CAAC,CAAC,CAAC,EAAE;EACN,CAAC;AACH,CAAC;AAED,MAAM,UAAU,QAAQ;IACvB,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,IAAI,IAAI,OAAO,CAAC;IAC3D,MAAM,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAEpC,2EAA2E;IAC3E,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe;WACpC,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAE1C,2EAA2E;IAC3E,oEAAoE;IACpE,yEAAyE;IACzE,iEAAiE;IACjE,8BAA8B;IAC9B,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;IACzD,MAAM,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAE/F,MAAM,YAAY,GAAG,GAAG,EAAE;QACzB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;YACxC,OAAO,IAAI,CAAA;;YAEF,IAAI,CAAC,IAAI;cACP,IAAI,CAAC,MAAM,IAAI,OAAO;WACzB,WAAW,IAAI,OAAO;qBACZ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;kBACnC,KAAK;qBACF,IAAI,CAAC,SAAS,IAAI,OAAO;qBACzB,YAAY;cACnB,IAAI,CAAC,YAAY;;OAExB,OAAO;;IAEV,CAAC;QACH,CAAC;QAED,uEAAuE;QACvE,mEAAmE;QACnE,sEAAsE;QACtE,uEAAuE;QACvE,wEAAwE;QACxE,OAAO,IAAI,CAAA;;WAEF,IAAI,CAAC,IAAI;gBACJ,IAAI,CAAC,QAAQ;oBACT,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;iBACnC,KAAK;oBACF,IAAI,CAAC,SAAS,IAAI,OAAO;oBACzB,YAAY;oBACZ,IAAI,CAAC,aAAa,IAAI,OAAO;4BACrB,IAAI,CAAC,oBAAoB;2BAC1B,IAAI,CAAC,mBAAmB;aACtC,IAAI,CAAC,YAAY;;MAExB,OAAO;;GAEV,CAAC;IACH,CAAC,CAAC;IAEF,IAAI,WAAW,IAAI,IAAI,CAAC,aAAa,KAAK,OAAO,EAAE,CAAC;QACnD,OAAO,IAAI,CAAA;wBACW,WAAW,WAAW,IAAI,CAAC,aAAa;MAC1D,YAAY,EAAE;;GAEjB,CAAC;IACH,CAAC;IAED,OAAO,YAAY,EAAE,CAAC;AACvB,CAAC"}

package/dist/components/actions/split-button/split-button.d.ts

@@ -18,7 +18,7 @@
  * @attr {string} variant - Button variant (default: 'neutral-tinted')
  * @attr {boolean} disabled - Disabled state
  * @attr {string} text - Button text for the primary action
- * @attr {string} start-icon - Icon name for the start icon (before text)
+ * @attr {string} icon - Icon name shown before the text on the primary action button
  * @attr {object} translations - Translations; unset keys fall back to Dutch
  *
  * @fires action-click - Fired when the main button is clicked
@@ -38,14 +38,14 @@ export declare class NLDDSplitButton extends LitElement {
     disabled: boolean;
     /** Button text for the primary action. */
     text: string;
-    /** Icon name for the start icon (before text) on the primary action button. */
-    startIcon: string;
+    /** Icon name shown before the text on the primary action button. */
+    icon: string;
     translations: Partial<NLDDSplitButtonTranslations>;
-    private _trigger?;
+    private _popupButtonWrapper?;
     private _menu?;
     _menuIsOpen: boolean;
     _hasMenuItems: boolean;
-    private _menuWasOpenOnMousedown;
+    private _menuWasOpenOnPointerdown;
     private _childObserver?;
     _t(key: keyof NLDDSplitButtonTranslations): string;
     firstUpdated(): void;

package/dist/components/actions/split-button/split-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"split-button.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/split-button/split-button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,wBAAwB,CAAC;AAC1E,OAAO,uBAAuB,CAAC;AAC/B,OAAO,iCAAiC,CAAC;AACzC,OAAO,oCAAoC,CAAC;AAG5C,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,qBACa,eAAgB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAqB;IAG3C,IAAI,EAAE,IAAI,CAAQ;IAGlB,OAAO,EAAE,MAAM,CAAoB;IAGnC,QAAQ,UAAS;IAEjB,0CAA0C;IAE1C,IAAI,SAAM;IAEV,+EAA+E;IAE/E,SAAS,SAAM;IAGf,YAAY,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAM;IAGxD,OAAO,CAAC,QAAQ,CAAC,CAAc;IAG/B,OAAO,CAAC,KAAK,CAAC,CAAW;IAGzB,WAAW,UAAS;IAGpB,aAAa,UAAS;IACtB,OAAO,CAAC,uBAAuB,CAAS;IACxC,OAAO,CAAC,cAAc,CAAC,CAAmB;IAInC,EAAE,CAAC,GAAG,EAAE,MAAM,2BAA2B,GAAG,MAAM;IAMhD,YAAY,IAAI,IAAI;IAiBpB,oBAAoB,IAAI,IAAI;IAOrC;;;;;;OAMG;IACH,OAAO,CAAC,cAAc;IAetB,OAAO,CAAC,iBAAiB,CAEvB;IAEF,kBAAkB,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAMvC,gBAAgB,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAa5B,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}
+{"version":3,"file":"split-button.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/split-button/split-button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,wBAAwB,CAAC;AAC1E,OAAO,uBAAuB,CAAC;AAC/B,OAAO,iCAAiC,CAAC;AACzC,OAAO,oCAAoC,CAAC;AAG5C,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,qBACa,eAAgB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAqB;IAG3C,IAAI,EAAE,IAAI,CAAQ;IAGlB,OAAO,EAAE,MAAM,CAAoB;IAGnC,QAAQ,UAAS;IAEjB,0CAA0C;IAE1C,IAAI,SAAM;IAEV,oEAAoE;IAEpE,IAAI,SAAM;IAGV,YAAY,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAM;IAMxD,OAAO,CAAC,mBAAmB,CAAC,CAAiB;IAG7C,OAAO,CAAC,KAAK,CAAC,CAAW;IAGzB,WAAW,UAAS;IAGpB,aAAa,UAAS;IACtB,OAAO,CAAC,yBAAyB,CAAS;IAC1C,OAAO,CAAC,cAAc,CAAC,CAAmB;IAInC,EAAE,CAAC,GAAG,EAAE,MAAM,2BAA2B,GAAG,MAAM;IAMhD,YAAY,IAAI,IAAI;IAqBpB,oBAAoB,IAAI,IAAI;IAOrC;;;;;;OAMG;IACH,OAAO,CAAC,cAAc;IAetB,OAAO,CAAC,iBAAiB,CAEvB;IAEF,kBAAkB,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAMvC,gBAAgB,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAa5B,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}