@nldd/design-system 0.8.55 → 0.8.57

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

@@ -7,21 +7,27 @@ export const buttonStyles = css `
 
 	: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);
+		--_inline-padding: calc((var(--_min-size) - var(--_icon-size)) / 2);
 		--_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);
+		--_font: var(--semantics-buttons-md-primary-text-font);
 		--_icon-size: var(--semantics-buttons-md-icon-size);
-		--_disclosure-icon-margin-left: -2px;
 		--_disclosure-icon-size: var(--primitives-space-20);
+		--_supporting-font: var(--semantics-buttons-md-supporting-text-font);
+		--_background-color: var(--semantics-buttons-neutral-tinted-background-color);
+		--_primary-content-color: var(--semantics-buttons-neutral-tinted-primary-content-color);
+		--_secondary-content-color: var(--semantics-buttons-neutral-tinted-secondary-content-color);
+		--_highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
+		--_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-primary-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-secondary-content-color);
+		--_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-hovered-highlight-border-color);
+		--_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-active-primary-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-active-secondary-content-color);
+		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-active-highlight-border-color);
 
 		${inheritedTextReset}
 		display: inline-block;
@@ -31,143 +37,238 @@ export const buttonStyles = css `
 		-webkit-tap-highlight-color: transparent;
 	}
 
-	: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);
+		--_font: var(--semantics-buttons-xs-primary-text-font);
 		--_icon-size: var(--semantics-buttons-xs-icon-size);
-		--_disclosure-icon-margin-left: -1px;
 		--_disclosure-icon-size: var(--primitives-space-16);
+		--_supporting-font: var(--semantics-buttons-xs-supporting-text-font);
 	}
 
-	/* ## Neutral Transparent */
+	: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);
+		--_gap: var(--semantics-buttons-sm-gap);
+		--_font: var(--semantics-buttons-sm-primary-text-font);
+		--_icon-size: var(--semantics-buttons-sm-icon-size);
+		--_disclosure-icon-size: var(--primitives-space-18);
+		--_supporting-font: var(--semantics-buttons-sm-supporting-text-font);
+	}
+
+	: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);
+		--_gap: var(--semantics-buttons-lg-gap);
+		--_font: var(--semantics-buttons-lg-primary-text-font);
+		--_icon-size: var(--semantics-buttons-lg-icon-size);
+		--_disclosure-icon-size: var(--primitives-space-24);
+		--_supporting-font: var(--semantics-buttons-lg-supporting-text-font);
+	}
+
+	:host([variant="neutral-base"]) {
+		--_background-color: var(--semantics-buttons-neutral-base-background-color);
+		--_primary-content-color: var(--semantics-buttons-neutral-base-primary-content-color);
+		--_secondary-content-color: var(--semantics-buttons-neutral-base-secondary-content-color);
+		--_highlight-border-color: var(--semantics-buttons-neutral-base-highlight-border-color);
+		--_is-hovered-background-color: var(--semantics-buttons-neutral-base-is-hovered-background-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-hovered-primary-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-base-is-hovered-secondary-content-color);
+		--_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-hovered-highlight-border-color);
+		--_is-active-background-color: var(--semantics-buttons-neutral-base-is-active-background-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-active-primary-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-neutral-base-is-active-secondary-content-color);
+		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-active-highlight-border-color);
+	}
 
 	:host([variant="neutral-transparent"]) {
 		--_background-color: transparent;
-		--_content-color: var(--semantics-buttons-neutral-transparent-content-color);
+		--_primary-content-color: var(--semantics-buttons-neutral-transparent-primary-content-color);
+		--_secondary-content-color: var(--semantics-buttons-neutral-transparent-secondary-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-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-primary-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-secondary-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-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-primary-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-active-secondary-content-color);
+		--_is-active-highlight-border-color: transparent;
 	}
 
-	/* ## 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);
+		--_primary-content-color: var(--semantics-buttons-accent-filled-primary-content-color);
+		--_secondary-content-color: var(--semantics-buttons-accent-filled-secondary-content-color);
+		--_highlight-border-color: var(--semantics-buttons-accent-filled-highlight-border-color);
 		--_is-hovered-background-color: var(--semantics-buttons-accent-filled-is-hovered-background-color);
-		--_is-hovered-content-color: var(--semantics-buttons-accent-filled-is-hovered-content-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-hovered-primary-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-accent-filled-is-hovered-secondary-content-color);
+		--_is-hovered-highlight-border-color: var(--semantics-buttons-accent-filled-is-hovered-highlight-border-color);
 		--_is-active-background-color: var(--semantics-buttons-accent-filled-is-active-background-color);
-		--_is-active-content-color: var(--semantics-buttons-accent-filled-is-active-content-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-active-primary-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-accent-filled-is-active-secondary-content-color);
+		--_is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-active-highlight-border-color);
 	}
 
-	/* ## Accent Transparent */
-
 	:host([variant="accent-transparent"]) {
 		--_background-color: transparent;
-		--_content-color: var(--semantics-buttons-accent-transparent-content-color);
+		--_primary-content-color: var(--semantics-buttons-accent-transparent-primary-content-color);
+		--_secondary-content-color: var(--semantics-buttons-accent-transparent-secondary-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-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-primary-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-secondary-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-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-primary-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-accent-transparent-is-active-secondary-content-color);
+		--_is-active-highlight-border-color: transparent;
 	}
 
-	/* ## 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);
+		--_primary-content-color: var(--semantics-buttons-critical-tinted-primary-content-color);
+		--_secondary-content-color: var(--semantics-buttons-critical-tinted-secondary-content-color);
+		--_highlight-border-color: var(--semantics-buttons-critical-tinted-highlight-border-color);
 		--_is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-hovered-background-color);
-		--_is-hovered-content-color: var(--semantics-buttons-critical-tinted-is-hovered-content-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-hovered-primary-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-critical-tinted-is-hovered-secondary-content-color);
+		--_is-hovered-highlight-border-color: var(--semantics-buttons-critical-tinted-is-hovered-highlight-border-color);
 		--_is-active-background-color: var(--semantics-buttons-critical-tinted-is-active-background-color);
-		--_is-active-content-color: var(--semantics-buttons-critical-tinted-is-active-content-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-active-primary-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-critical-tinted-is-active-secondary-content-color);
+		--_is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-active-highlight-border-color);
 	}
 
-	/* ## Critical Transparent */
-
 	:host([variant="critical-transparent"]) {
 		--_background-color: transparent;
-		--_content-color: var(--semantics-buttons-critical-transparent-content-color);
+		--_primary-content-color: var(--semantics-buttons-critical-transparent-primary-content-color);
+		--_secondary-content-color: var(--semantics-buttons-critical-transparent-secondary-content-color);
+		--_highlight-border-color: transparent;
 		--_is-hovered-background-color: transparent;
-		--_is-hovered-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-primary-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-secondary-content-color);
+		--_is-hovered-highlight-border-color: transparent;
 		--_is-active-background-color: transparent;
-		--_is-active-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-primary-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-critical-transparent-is-active-secondary-content-color);
+		--_is-active-highlight-border-color: transparent;
 	}
 
 	/* ## 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);
+		--_primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-primary-content-color);
+		--_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-secondary-content-color);
+		--_highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-highlight-border-color);
 		--_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-background-color);
-		--_is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-primary-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-secondary-content-color);
+		--_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-highlight-border-color);
 		--_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-background-color);
-		--_is-active-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-content-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-primary-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-secondary-content-color);
+		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-highlight-border-color);
+	}
+
+	:host([expanded][variant="neutral-base"]) {
+		--_background-color: var(--semantics-buttons-neutral-base-is-expanded-background-color);
+		--_primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-primary-content-color);
+		--_secondary-content-color: var(--semantics-buttons-neutral-base-is-expanded-secondary-content-color);
+		--_highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-highlight-border-color);
+		--_is-hovered-background-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-background-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-primary-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-secondary-content-color);
+		--_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-highlight-border-color);
+		--_is-active-background-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-background-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-primary-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-secondary-content-color);
+		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-highlight-border-color);
+	}
+
+	:host([expanded][variant="neutral-transparent"]) {
+		--_background-color: transparent;
+		--_primary-content-color: var(--semantics-buttons-neutral-transparent-primary-content-color);
+		--_secondary-content-color: var(--semantics-buttons-neutral-transparent-secondary-content-color);
+		--_highlight-border-color: transparent;
+		--_is-hovered-background-color: transparent;
+		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-primary-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-secondary-content-color);
+		--_is-hovered-highlight-border-color: transparent;
+		--_is-active-background-color: transparent;
+		--_is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-primary-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-active-secondary-content-color);
+		--_is-active-highlight-border-color: transparent;
 	}
 
 	: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);
+		--_primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-primary-content-color);
+		--_secondary-content-color: var(--semantics-buttons-accent-filled-is-expanded-secondary-content-color);
+		--_highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-highlight-border-color);
 		--_is-hovered-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-background-color);
-		--_is-hovered-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-content-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-primary-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-secondary-content-color);
+		--_is-hovered-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-highlight-border-color);
 		--_is-active-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-background-color);
-		--_is-active-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);
+		--_is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-primary-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-secondary-content-color);
+		--_is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-highlight-border-color);
 	}
 
 	:host([expanded][variant="accent-transparent"]) {
 		--_background-color: transparent;
-		--_content-color: var(--semantics-buttons-accent-transparent-content-color);
+		--_primary-content-color: var(--semantics-buttons-accent-transparent-primary-content-color);
+		--_secondary-content-color: var(--semantics-buttons-accent-transparent-secondary-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-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-primary-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-secondary-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-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-primary-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-accent-transparent-is-active-secondary-content-color);
+		--_is-active-highlight-border-color: transparent;
 	}
 
 	: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);
+		--_background-color: var(--semantics-buttons-critical-tinted-is-expanded-background-color);
+		--_primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-primary-content-color);
+		--_secondary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-secondary-content-color);
+		--_highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-highlight-border-color);
+		--_is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-background-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-primary-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-secondary-content-color);
+		--_is-hovered-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-highlight-border-color);
+		--_is-active-background-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-background-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-primary-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-secondary-content-color);
+		--_is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-highlight-border-color);
 	}
 
 	:host([expanded][variant="critical-transparent"]) {
 		--_background-color: transparent;
-		--_content-color: var(--semantics-buttons-critical-transparent-content-color);
+		--_primary-content-color: var(--semantics-buttons-critical-transparent-primary-content-color);
+		--_secondary-content-color: var(--semantics-buttons-critical-transparent-secondary-content-color);
+		--_highlight-border-color: transparent;
 		--_is-hovered-background-color: transparent;
-		--_is-hovered-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-primary-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-secondary-content-color);
+		--_is-hovered-highlight-border-color: transparent;
 		--_is-active-background-color: transparent;
-		--_is-active-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-primary-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-critical-transparent-is-active-secondary-content-color);
+		--_is-active-highlight-border-color: transparent;
 	}
 
 	:host([width="full"]) {
@@ -176,6 +277,16 @@ export const buttonStyles = css `
 		flex-grow: 1;
 	}
 
+	:host([horizontal-alignment="left"]) .button {
+		justify-content: flex-start;
+		text-align: left;
+	}
+
+	:host([horizontal-alignment="right"]) .button {
+		justify-content: flex-end;
+		text-align: right;
+	}
+
 	:host([hidden]) {
 		display: none;
 	}
@@ -185,17 +296,26 @@ export const buttonStyles = css `
 		pointer-events: none;
 	}
 
+	:host([no-highlight-border]),
+	:host([no-highlight-border][expanded]) {
+		--_highlight-border-color: transparent;
+		--_is-hovered-highlight-border-color: transparent;
+		--_is-active-highlight-border-color: transparent;
+	}
+
 
 	/* # Block */
 
 	.button {
 		box-sizing: border-box;
 		display: inline-flex;
+		position: relative;
 		margin: 0;
 		border: none;
 		border-radius: var(--_corner-radius);
 		background: none;
 		background-color: var(--_background-color);
+		box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
 		width: var(--_width);
 		min-width: var(--_min-size);
 		max-width: 100%;
@@ -204,8 +324,9 @@ export const buttonStyles = css `
 		gap: var(--_gap);
 		align-items: center;
 		justify-content: center;
-		color: var(--_content-color);
+		color: var(--_primary-content-color);
 		font: var(--_font);
+		text-align: center;
 		text-decoration: none;
 		text-wrap: pretty;
 		transition:
@@ -222,13 +343,15 @@ export const buttonStyles = css `
 	.button:hover {
 		@media (hover: hover) {
 			background-color: var(--_is-hovered-background-color);
-			color: var(--_is-hovered-content-color);
+			color: var(--_is-hovered-primary-content-color);
+			--_highlight-border-color: var(--_is-hovered-highlight-border-color);
 		}
 	}
 
 	.button:active {
 		background-color: var(--_is-active-background-color);
-		color: var(--_is-active-content-color);
+		color: var(--_is-active-primary-content-color);
+		--_highlight-border-color: var(--_is-active-highlight-border-color);
 	}
 
 	/* Loading keeps the control focusable (not disabled); activation is blocked in JS. */
@@ -239,7 +362,7 @@ export const buttonStyles = css `
 	.button:focus-visible {
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
-		box-shadow: var(--semantics-focus-ring-box-shadow);
+		box-shadow: var(--semantics-focus-ring-box-shadow), inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
 	}
 
 	.button:focus:not(:focus-visible) {
@@ -261,7 +384,7 @@ export const buttonStyles = css `
 		max-width: 100%;
 		min-width: 0;
 		align-items: center;
-		gap: var(--_gap);
+		gap: 0;
 		transition: opacity var(--primitives-transition-duration-slow) var(--primitives-transition-easing-default);
 	}
 
@@ -272,6 +395,10 @@ export const buttonStyles = css `
 		opacity: 0;
 	}
 
+	:host([loading]) .button__disclosure-icon {
+		opacity: 0;
+	}
+
 	/* Wrapper overlaid on the control, positioned against the host (which is
 	   position:relative). It lives outside the <button>/<a> so the indicator's
 	   role="status" live region announces loading without joining the button's
@@ -280,9 +407,7 @@ export const buttonStyles = css `
 	.button__activity-indicator {
 		position: absolute;
 		inset: 0;
-		/* Re-establish the content color here: the indicator lives outside
-		   .button now, so its currentColor stroke can no longer inherit it. */
-		color: var(--_content-color);
+		color: var(--_primary-content-color);
 	}
 
 	::slotted(nldd-icon) {
@@ -299,21 +424,78 @@ export const buttonStyles = css `
 		white-space: nowrap;
 	}
 
+	.button__text-area {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+		padding-inline: var(--_gap);
+	}
+
+	:host([size="xs"]) .button__text-area,
+	:host([size="sm"]) .button__text-area {
+		flex-direction: row;
+		align-items: baseline;
+		gap: var(--_gap);
+	}
+
+	.button__supporting-text {
+		min-width: 0;
+		color: var(--_secondary-content-color);
+		font: var(--_supporting-font);
+	}
+
+	.button:hover .button__supporting-text {
+		@media (hover: hover) {
+			color: var(--_is-hovered-secondary-content-color);
+		}
+	}
+
+	.button:active .button__supporting-text {
+		color: var(--_is-active-secondary-content-color);
+	}
+
+	:host([single-line]) .button__supporting-text {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	:host([size="md"]) .button.has-supporting-text {
+		--_font: var(--semantics-buttons-sm-primary-text-font);
+		--_icon-size: var(--semantics-buttons-md-with-supporting-text-icon-size);
+		--_inline-padding: calc((var(--_min-size) - var(--_icon-size)) / 2);
+		--_block-padding: var(--primitives-space-4);
+	}
+
+	:host([size="lg"]) .button.has-supporting-text {
+		--_font: var(--semantics-buttons-md-primary-text-font);
+		--_icon-size: var(--semantics-buttons-lg-with-supporting-text-icon-size);
+		--_inline-padding: calc((var(--_min-size) - var(--_icon-size)) / 2);
+		--_block-padding: var(--primitives-space-4);
+	}
+
 	.button__start-icon,
 	.button__end-icon {
-		display: block;
+		display: flex;
 		width: var(--_icon-size);
 		height: var(--_icon-size);
 		flex-shrink: 0;
+		align-items: center;
+		justify-content: center;
+	}
+
+	:host([expandable]) .button {
+		padding-inline-end: calc(var(--_inline-padding) + var(--_gap) + var(--_disclosure-icon-size));
 	}
 
 	.button__disclosure-icon {
 		display: block;
-		margin-left: var(--_disclosure-icon-margin-left);
-		margin-right: -2px;
+		position: absolute;
+		top: 50%;
+		inset-inline-end: var(--_inline-padding);
 		width: var(--_disclosure-icon-size);
 		height: var(--_disclosure-icon-size);
-		flex-shrink: 0;
+		transform: translateY(-50%);
 	}
 `;
 //# 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;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;IAuB3B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoSrB,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;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6B3B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAodrB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"button.template.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button/button.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,UAAU,eAAe;IACxB,WAAW,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACrC;AA4BD,wBAAgB,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,wCAwElE"}
+{"version":3,"file":"button.template.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button/button.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,UAAU,eAAe;IACxB,WAAW,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACrC;AA+BD,wBAAgB,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,wCAuFlE"}

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

@@ -6,26 +6,32 @@ function renderContent(component) {
     return html `
 		<span class="button__content">
 			${component.startIcon ? html `
-				<nldd-icon class="button__start-icon"
-					name=${component.startIcon}
-				></nldd-icon>
+				<span class="button__start-icon">
+					<nldd-icon name=${component.startIcon}></nldd-icon>
+				</span>
 			` : html `<slot name="start-icon"></slot>`}
-			<span class="button__text">${component.text ? component.text : html `<slot name="text"></slot>`}</span>
+			<span class="button__text-area">
+				<span class="button__text">${component.text ? component.text : html `<slot name="text"></slot>`}</span>
+				${component.supportingText ? html `<span class="button__supporting-text">${component.supportingText}</span>` : nothing}
+			</span>
 			${component.endIcon ? html `
-				<nldd-icon class="button__end-icon"
-					name=${component.endIcon}
-				></nldd-icon>
+				<span class="button__end-icon">
+					<nldd-icon name=${component.endIcon}></nldd-icon>
+				</span>
 			` : html `<slot name="end-icon"></slot>`}
-			${component.expandable ? html `
-				<nldd-icon class="button__disclosure-icon"
-					name="chevron-down-small"
-				></nldd-icon>
-			` : nothing}
 		</span>
+		${component.expandable ? html `
+			<nldd-icon class="button__disclosure-icon"
+				name="chevron-down-small"
+			></nldd-icon>
+		` : nothing}
 	`;
 }
 export function template(helpers) {
     const content = renderContent(this);
+    const buttonClass = ['button',
+        this.supportingText ? 'has-supporting-text' : '',
+    ].filter(Boolean).join(' ');
     // `expandable` (disclosure widget signal) or `popup-type` (popup container
     // signal) both require aria-expanded to always be present so screen
     // readers know the current open/closed state. Without one of these, only
@@ -33,6 +39,16 @@ export function template(helpers) {
     // irrelevant ARIA attributes.
     const isDisclosure = this.expandable || !!this.popupType;
     const ariaExpanded = isDisclosure ? String(this.expanded) : (this.expanded ? 'true' : nothing);
+    // `supporting-text` renders in a sibling span next to the text; the
+    // accessible-name flat-string algorithm concatenates them without a
+    // separator ("OpslaanAlle wijzigingen"). With no explicit accessible-label,
+    // join them with a comma so screen readers announce the two apart. Filtering
+    // empties keeps a name when only supporting-text is set — otherwise an
+    // icon-less button would be nameless. (Slotted text can't be read here —
+    // those consumers should set accessible-label.) Without supporting-text,
+    // `nothing` sets no aria-label at all, so the name is the visible text content.
+    const ariaLabel = this.accessibleLabel
+        || (this.supportingText ? [this.text, this.supportingText].filter(Boolean).join(', ') : nothing);
     // Loading: an activity indicator overlays the (opacity-hidden) content. It
     // sits OUTSIDE the <button>/<a> (a sibling, overlaid via the host's
     // position:relative) so its role="status" live region can announce "Laden"
@@ -45,7 +61,7 @@ export function template(helpers) {
 			<div class="button__activity-indicator">
 				<nldd-activity-indicator
 					timing="instant"
-					size=${this.size === 'xs' ? '16' : this.size === 'sm' ? '20' : '24'}
+					size=${this.size === 'xs' ? '16' : this.size === 'sm' ? '20' : this.size === 'lg' ? '28' : '24'}
 				></nldd-activity-indicator>
 			</div>
 		`
@@ -53,12 +69,12 @@ export function template(helpers) {
     if (this.href) {
         const resolvedRel = this._resolvedRel();
         return html `
-			<a class="button"
+			<a class=${buttonClass}
 				href=${this.href}
 				target=${this.target || nothing}
 				rel=${resolvedRel || nothing}
 				aria-disabled=${this.disabled ? 'true' : nothing}
-				aria-label=${this.accessibleLabel || nothing}
+				aria-label=${ariaLabel}
 				aria-haspopup=${this.popupType || nothing}
 				aria-expanded=${ariaExpanded}
 				aria-busy=${ariaBusy}
@@ -75,11 +91,11 @@ export function template(helpers) {
     // browsers don't support the Popover API at all, so the menu this button
     // drives is non-functional regardless. No per-binding capability check.
     return html `
-		<button class="button"
+		<button class=${buttonClass}
 			type=${this.type}
 			?disabled=${this.disabled}
 			aria-disabled=${this.disabled ? 'true' : nothing}
-			aria-label=${this.accessibleLabel || nothing}
+			aria-label=${ariaLabel}
 			aria-haspopup=${this.popupType || nothing}
 			aria-expanded=${ariaExpanded}
 			aria-busy=${ariaBusy}