@nldd/design-system 0.8.44 → 0.8.46

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

@@ -19,6 +19,7 @@
  * @attr {string} target - Link target (e.g. '_blank'); only used when href is set
  * @attr {string} rel - Link rel attribute; defaults to 'noopener noreferrer' when target is '_blank'
  *
+ * @slot text - Slot for custom button content (e.g. text with inline markup). Used when the text attribute is empty or not set (an empty string counts as "not set", since the attribute and the unset property are indistinguishable). Provide accessible-label when the slotted content isn't plain text.
  * @slot start-icon - Slot for a custom start icon (e.g. custom SVG). Only used when start-icon attribute is not set.
  * @slot end-icon - Slot for a custom end icon (e.g. custom SVG). Only used when end-icon attribute is not set.
  *
@@ -32,6 +33,8 @@ type ButtonType = 'button' | 'submit' | 'reset';
 type PopupType = 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid';
 export declare class NLDDButton extends LitElement {
     static styles: import("lit").CSSResult;
+    static formAssociated: boolean;
+    private _internals;
     variant: Variant;
     size: Size;
     /** Width mode: 'full' (stretch to container) or any CSS length. */

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button/button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,8BAA8B,CAAC;AAEtC,KAAK,OAAO,GACT,SAAS,GACT,WAAW,GACX,aAAa,GACb,eAAe,GACf,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,iBAAiB,GACjB,sBAAsB,CAAC;AAC1B,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC/B,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChD,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjE,qBACa,UAAW,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAgB;IAGtC,OAAO,EAAE,OAAO,CAAoB;IAGpC,IAAI,EAAE,IAAI,CAAQ;IAElB,mEAAmE;IAEnE,KAAK,SAAM;IAGX,UAAU,UAAS;IAGnB,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,SAAS,CAAC,EAAE,SAAS,CAAC;IAGtB,IAAI,EAAE,UAAU,CAAY;IAG5B,aAAa,EAAE,MAAM,GAAG,SAAS,CAAa;IAE9C;;;;;;;;OAQG;IAEH,oBAAoB,EAAE,OAAO,GAAG,IAAI,CAAQ;IAE5C;;;;;;OAMG;IAEH,mBAAmB,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAY;IAG3D,QAAQ,UAAS;IAEjB,mBAAmB;IAEnB,IAAI,SAAM;IAGV,UAAU,UAAS;IAEnB,6FAA6F;IAE7F,SAAS,SAAM;IAEf,wFAAwF;IAExF,OAAO,SAAM;IAEb,0GAA0G;IAE1G,eAAe,SAAM;IAErB,4DAA4D;IAE5D,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAErC,+DAA+D;IAE/D,MAAM,EAAE,MAAM,GAAG,SAAS,CAAa;IAEvC;;;OAGG;IAEH,GAAG,EAAE,MAAM,GAAG,SAAS,CAAa;IAEpC,OAAO,CAAC,WAAW,CAAS;IAEnB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IA0B/D,OAAO,CAAC,YAAY;IAQpB,2DAA2D;IAC3D,YAAY,IAAI,MAAM;IAMtB;;;OAGG;IACM,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInC,MAAM;CAKf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button/button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,8BAA8B,CAAC;AAEtC,KAAK,OAAO,GACT,SAAS,GACT,WAAW,GACX,aAAa,GACb,eAAe,GACf,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,iBAAiB,GACjB,sBAAsB,CAAC;AAC1B,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC/B,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChD,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjE,qBACa,UAAW,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAgB;IAKtC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAA0B;IAG5C,OAAO,EAAE,OAAO,CAAoB;IAGpC,IAAI,EAAE,IAAI,CAAQ;IAElB,mEAAmE;IAEnE,KAAK,SAAM;IAGX,UAAU,UAAS;IAGnB,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,SAAS,CAAC,EAAE,SAAS,CAAC;IAGtB,IAAI,EAAE,UAAU,CAAY;IAG5B,aAAa,EAAE,MAAM,GAAG,SAAS,CAAa;IAE9C;;;;;;;;OAQG;IAEH,oBAAoB,EAAE,OAAO,GAAG,IAAI,CAAQ;IAE5C;;;;;;OAMG;IAEH,mBAAmB,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAY;IAG3D,QAAQ,UAAS;IAEjB,mBAAmB;IAEnB,IAAI,SAAM;IAGV,UAAU,UAAS;IAEnB,6FAA6F;IAE7F,SAAS,SAAM;IAEf,wFAAwF;IAExF,OAAO,SAAM;IAEb,0GAA0G;IAE1G,eAAe,SAAM;IAErB,4DAA4D;IAE5D,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAErC,+DAA+D;IAE/D,MAAM,EAAE,MAAM,GAAG,SAAS,CAAa;IAEvC;;;OAGG;IAEH,GAAG,EAAE,MAAM,GAAG,SAAS,CAAa;IAEpC,OAAO,CAAC,WAAW,CAAS;IAEnB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IA0B/D,OAAO,CAAC,YAAY;IAyBpB,2DAA2D;IAC3D,YAAY,IAAI,MAAM;IAMtB;;;OAGG;IACM,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInC,MAAM;CAKf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}

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

@@ -19,6 +19,7 @@
  * @attr {string} target - Link target (e.g. '_blank'); only used when href is set
  * @attr {string} rel - Link rel attribute; defaults to 'noopener noreferrer' when target is '_blank'
  *
+ * @slot text - Slot for custom button content (e.g. text with inline markup). Used when the text attribute is empty or not set (an empty string counts as "not set", since the attribute and the unset property are indistinguishable). Provide accessible-label when the slotted content isn't plain text.
  * @slot start-icon - Slot for a custom start icon (e.g. custom SVG). Only used when start-icon attribute is not set.
  * @slot end-icon - Slot for a custom end icon (e.g. custom SVG). Only used when end-icon attribute is not set.
  *
@@ -38,6 +39,7 @@ import './../../content/icon/icon.js';
 let NLDDButton = class NLDDButton extends LitElement {
     constructor() {
         super(...arguments);
+        this._internals = this.attachInternals();
         this.variant = 'neutral-tinted';
         this.size = 'md';
         /** Width mode: 'full' (stretch to container) or any CSS length. */
@@ -118,6 +120,26 @@ let NLDDButton = class NLDDButton extends LitElement {
             e.stopPropagation();
             return;
         }
+        // A link button has no form behaviour. Otherwise drive the associated
+        // form ourselves: the shadow <button type="submit"|"reset"> can't reach
+        // the light-DOM form across the shadow boundary. requestSubmit() runs
+        // constraint validation and fires a cancelable submit event, matching a
+        // native submit button.
+        //
+        // Limitation: we call requestSubmit() without a submitter, so
+        // SubmitEvent.submitter is null. A form handler that branches on
+        // event.submitter to tell multiple submit buttons apart won't see this
+        // element. There is no fix via requestSubmit(submitter): the inner shadow
+        // <button> is not a form descendant (throws NotFoundError) and this host
+        // is not a "submit button" per spec (throws TypeError) — both verified.
+        // Consumers that need to distinguish submitters should use a hidden field
+        // or separate forms.
+        if (this.href)
+            return;
+        if (this.type === 'submit')
+            this._internals.form?.requestSubmit();
+        else if (this.type === 'reset')
+            this._internals.form?.reset();
     }
     /** Resolves the effective rel value for link rendering. */
     _resolvedRel() {
@@ -141,6 +163,10 @@ let NLDDButton = class NLDDButton extends LitElement {
     }
 };
 NLDDButton.styles = buttonStyles;
+// Form-associated so a type="submit"/"reset" button can drive its form.
+// The inner <button> lives in the shadow root and has no form owner across
+// the shadow boundary, so the host element must carry the association.
+NLDDButton.formAssociated = true;
 __decorate([
     property({ type: String, reflect: true })
 ], NLDDButton.prototype, "variant", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/actions/button/button.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/actions/button/button.ts"],"names":[],"mappings":"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"}

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/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;AAyBD,wBAAgB,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,wCAkDlE"}
+{"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,wCAkDlE"}

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

@@ -1,5 +1,8 @@
 import { html, nothing } from 'lit';
 function renderContent(component) {
+    // `button__text` falls back to the slot on falsy `text`. The property
+    // defaults to '', so `text=""` and an absent attribute are indistinguishable
+    // — both intentionally render the slot rather than an empty label.
     return html `
 		<span class="button__content">
 			${component.startIcon ? html `
@@ -7,7 +10,7 @@ function renderContent(component) {
 					name=${component.startIcon}
 				></nldd-icon>
 			` : html `<slot name="start-icon"></slot>`}
-			<span class="button__text">${component.text}</span>
+			<span class="button__text">${component.text ? component.text : html `<slot name="text"></slot>`}</span>
 			${component.endIcon ? html `
 				<nldd-icon class="button__end-icon"
 					name=${component.endIcon}