@nldd/design-system 0.8.42 → 0.8.44

package/README.md

@@ -51,7 +51,7 @@ npm run storybook
 | Attribuut          | Type    | Default          | Beschrijving                                                                                                                                             |
 | ------------------ | ------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `text`             | string  | `''`             | Tekst van de button                                                                                                                                      |
-| `variant`          | string  | `neutral-tinted` | `primary`, `secondary`, `destructive`, `accent-filled`, `accent-outlined`, `accent-transparent`, `neutral-tinted`, `neutral-transparent`, `critical-tinted` |
+| `variant`          | string  | `neutral-tinted` | `primary`, `secondary`, `destructive`, `accent-filled`, `accent-transparent`, `neutral-tinted`, `neutral-transparent`, `critical-tinted`, `critical-transparent` |
 | `size`             | string  | `md`             | `xs`, `sm`, `md`                                                                                                                                         |
 | `disabled`         | boolean | `false`          | Uitgeschakelde staat                                                                                                                                     |
 | `type`             | string  | `button`         | `button`, `submit`, `reset`                                                                                                                              |

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

@@ -2,13 +2,16 @@
  * Nederlandse Digitale Dienst Button Component (Lit + TypeScript)
  *
  * @element nldd-button
- * @attr {string} variant - Button variant: 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-outlined' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted'
+ * @attr {string} variant - Button variant: 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent'
  * @attr {string} size - Button size: 'xs' | 'sm' | 'md' (default: 'md')
  * @attr {boolean} disabled - Disabled state
  * @attr {string} type - Button type for form submission: 'button' | 'submit' | 'reset' (ignored when href is set)
  * @attr {boolean} expandable - Whether the button has a icon to indicate it opens a menu or popover
- * @attr {boolean} full-width - Whether the button stretches to fill its container width
+ * @attr {boolean} expanded - Whether the popover/menu controlled by this button is currently open. Forwarded as aria-expanded on the inner button; toggles the is-expanded visual state.
+ * @attr {string}  popup-type - Type of popup container this button opens: 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid'. Sets aria-haspopup on the inner button and forces aria-expanded to always be present (true/false) so screen readers know the popup state.
+ * @attr {string} width - Width mode: 'full' (stretches to container) or any CSS length (e.g. '240px')
  * @attr {string} text - Button text
+ * @attr {boolean} single-line - When true, truncates overflowing text with an ellipsis instead of letting it wrap. Requires the button (or an ancestor) to constrain the width.
  * @attr {string} start-icon - Icon name for the start icon (before text)
  * @attr {string} end-icon - Icon name for the end icon (after text)
  * @attr {string} accessible-label - Accessible label for the button, overrides text for screen readers
@@ -23,20 +26,48 @@
  */
 import { LitElement } from 'lit';
 import './../../content/icon/icon.js';
-type Variant = 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-outlined' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted';
+type Variant = 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent';
 type Size = 'xs' | 'sm' | 'md';
 type ButtonType = 'button' | 'submit' | 'reset';
+type PopupType = 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid';
 export declare class NLDDButton extends LitElement {
     static styles: import("lit").CSSResult;
     variant: Variant;
     size: Size;
-    fullWidth: boolean;
+    /** Width mode: 'full' (stretch to container) or any CSS length. */
+    width: string;
     expandable: boolean;
+    expanded: boolean;
+    /**
+     * Type of popup container this button opens. Sets `aria-haspopup` on the
+     * inner button and forces `aria-expanded` to always be present (true/false)
+     * so screen readers can announce both the popup type and its current state.
+     */
+    popupType?: PopupType;
     type: ButtonType;
     popovertarget: string | undefined;
+    /**
+     * Direct element reference to the popover this button invokes — IDL-only
+     * counterpart to `popovertarget` that works across shadow boundaries.
+     * Use this when the popover lives in a different tree (e.g. an
+     * `nldd-menu` reparented to `<body>`) so the browser still recognises
+     * this button as the popover's invoker and excludes it from the popover
+     * light-dismiss algorithm. Set programmatically; not reflected to an
+     * HTML attribute (the attribute form is `popovertarget`, ID-based).
+     */
+    popoverTargetElement: Element | null;
+    /**
+     * Action the browser performs when the button is clicked, mirroring the
+     * standard `popovertargetaction` attribute. Defaults to `'toggle'`. Use
+     * `'show'` when a separate handler owns the close path (e.g. the
+     * consumer toggles the popover programmatically) so the browser's
+     * default action doesn't double-fire.
+     */
+    popoverTargetAction: 'toggle' | 'show' | 'hide';
     disabled: boolean;
     /** Button text. */
     text: string;
+    singleLine: boolean;
     /** Icon name for the start icon (before text). When not set, the start-icon slot is used. */
     startIcon: string;
     /** Icon name for the end icon (after text). When not set, the end-icon slot is used. */
@@ -53,7 +84,7 @@ export declare class NLDDButton extends LitElement {
      */
     rel: string | undefined;
     private _warnedA11y;
-    updated(): void;
+    updated(changedProperties: Map<string, unknown>): void;
     private _handleClick;
     /** Resolves the effective rel value for link rendering. */
     _resolvedRel(): string;

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;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,8BAA8B,CAAC;AAEtC,KAAK,OAAO,GACT,SAAS,GACT,WAAW,GACX,aAAa,GACb,eAAe,GACf,iBAAiB,GACjB,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,iBAAiB,CAAC;AACrB,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC/B,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhD,qBACa,UAAW,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAgB;IAGtC,OAAO,EAAE,OAAO,CAAoB;IAGpC,IAAI,EAAE,IAAI,CAAQ;IAGlB,SAAS,UAAS;IAGlB,UAAU,UAAS;IAGnB,IAAI,EAAE,UAAU,CAAY;IAG5B,aAAa,EAAE,MAAM,GAAG,SAAS,CAAa;IAG9C,QAAQ,UAAS;IAEjB,mBAAmB;IAEnB,IAAI,SAAM;IAEV,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,IAAI,IAAI;IAUxB,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;;;;;;;;;;;;;;;;;;;;;;;;;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"}

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

@@ -2,13 +2,16 @@
  * Nederlandse Digitale Dienst Button Component (Lit + TypeScript)
  *
  * @element nldd-button
- * @attr {string} variant - Button variant: 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-outlined' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted'
+ * @attr {string} variant - Button variant: 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent'
  * @attr {string} size - Button size: 'xs' | 'sm' | 'md' (default: 'md')
  * @attr {boolean} disabled - Disabled state
  * @attr {string} type - Button type for form submission: 'button' | 'submit' | 'reset' (ignored when href is set)
  * @attr {boolean} expandable - Whether the button has a icon to indicate it opens a menu or popover
- * @attr {boolean} full-width - Whether the button stretches to fill its container width
+ * @attr {boolean} expanded - Whether the popover/menu controlled by this button is currently open. Forwarded as aria-expanded on the inner button; toggles the is-expanded visual state.
+ * @attr {string}  popup-type - Type of popup container this button opens: 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid'. Sets aria-haspopup on the inner button and forces aria-expanded to always be present (true/false) so screen readers know the popup state.
+ * @attr {string} width - Width mode: 'full' (stretches to container) or any CSS length (e.g. '240px')
  * @attr {string} text - Button text
+ * @attr {boolean} single-line - When true, truncates overflowing text with an ellipsis instead of letting it wrap. Requires the button (or an ancestor) to constrain the width.
  * @attr {string} start-icon - Icon name for the start icon (before text)
  * @attr {string} end-icon - Icon name for the end icon (after text)
  * @attr {string} accessible-label - Accessible label for the button, overrides text for screen readers
@@ -37,13 +40,34 @@ let NLDDButton = class NLDDButton extends LitElement {
         super(...arguments);
         this.variant = 'neutral-tinted';
         this.size = 'md';
-        this.fullWidth = false;
+        /** Width mode: 'full' (stretch to container) or any CSS length. */
+        this.width = '';
         this.expandable = false;
+        this.expanded = false;
         this.type = 'button';
         this.popovertarget = undefined;
+        /**
+         * Direct element reference to the popover this button invokes — IDL-only
+         * counterpart to `popovertarget` that works across shadow boundaries.
+         * Use this when the popover lives in a different tree (e.g. an
+         * `nldd-menu` reparented to `<body>`) so the browser still recognises
+         * this button as the popover's invoker and excludes it from the popover
+         * light-dismiss algorithm. Set programmatically; not reflected to an
+         * HTML attribute (the attribute form is `popovertarget`, ID-based).
+         */
+        this.popoverTargetElement = null;
+        /**
+         * Action the browser performs when the button is clicked, mirroring the
+         * standard `popovertargetaction` attribute. Defaults to `'toggle'`. Use
+         * `'show'` when a separate handler owns the close path (e.g. the
+         * consumer toggles the popover programmatically) so the browser's
+         * default action doesn't double-fire.
+         */
+        this.popoverTargetAction = 'toggle';
         this.disabled = false;
         /** Button text. */
         this.text = '';
+        this.singleLine = false;
         /** Icon name for the start icon (before text). When not set, the start-icon slot is used. */
         this.startIcon = '';
         /** Icon name for the end icon (after text). When not set, the end-icon slot is used. */
@@ -61,7 +85,24 @@ let NLDDButton = class NLDDButton extends LitElement {
         this.rel = undefined;
         this._warnedA11y = false;
     }
-    updated() {
+    updated(changedProperties) {
+        if (changedProperties.has('width')) {
+            const w = this.width;
+            // 'full' switches host to block + 100% via CSS attribute selector.
+            // A valid CSS length is applied as inline style.width on the host.
+            // In either case the inner button stretches via --_width, so
+            // a custom width on the host translates to a wide button instead of
+            // leaving the inner shrink-to-fit. Invalid values do nothing.
+            const isFull = w === 'full';
+            const isValidLength = !!w && !isFull && CSS.supports('width', w);
+            this.style.width = isValidLength ? w : '';
+            if (isFull || isValidLength) {
+                this.style.setProperty('--_width', '100%');
+            }
+            else {
+                this.style.removeProperty('--_width');
+            }
+        }
         const isEmpty = !this.text && !this.accessibleLabel;
         if (import.meta.env?.DEV && isEmpty && !this._warnedA11y) {
             this._warnedA11y = true;
@@ -107,23 +148,38 @@ __decorate([
     property({ type: String, reflect: true })
 ], NLDDButton.prototype, "size", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true, attribute: 'full-width' })
-], NLDDButton.prototype, "fullWidth", void 0);
+    property({ type: String, reflect: true })
+], NLDDButton.prototype, "width", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'expandable' })
 ], NLDDButton.prototype, "expandable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDButton.prototype, "expanded", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'popup-type' })
+], NLDDButton.prototype, "popupType", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], NLDDButton.prototype, "type", void 0);
 __decorate([
     property({ type: String })
 ], NLDDButton.prototype, "popovertarget", void 0);
+__decorate([
+    property({ attribute: false })
+], NLDDButton.prototype, "popoverTargetElement", void 0);
+__decorate([
+    property({ attribute: false })
+], NLDDButton.prototype, "popoverTargetAction", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NLDDButton.prototype, "disabled", void 0);
 __decorate([
     property({ type: String })
 ], NLDDButton.prototype, "text", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'single-line' })
+], NLDDButton.prototype, "singleLine", void 0);
 __decorate([
     property({ type: String, attribute: 'start-icon' })
 ], NLDDButton.prototype, "startIcon", 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,yBA6TxB,CAAC"}
+{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button/button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAmZxB,CAAC"}

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

@@ -5,11 +5,23 @@ export const buttonStyles = css `
 	/* # Host */
 
 	:host {
+		--_width: auto;
+		--_disclosure-icon-size: var(--primitives-space-20);
+
 		display: inline-block;
+		max-width: 100%;
 		-webkit-tap-highlight-color: transparent;
 	}
 
-	:host([full-width]) {
+	:host([size="sm"]) {
+		--_disclosure-icon-size: var(--primitives-space-18);
+	}
+
+	:host([size="xs"]) {
+		--_disclosure-icon-size: var(--primitives-space-16);
+	}
+
+	:host([width="full"]) {
 		display: block;
 		width: 100%;
 		flex-grow: 1;
@@ -28,19 +40,20 @@ export const buttonStyles = css `
 	/* # Block */
 
 	.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;
+		background: none;
+		width: var(--_width);
+		max-width: 100%;
+		padding: 0;
 		align-items: center;
 		justify-content: center;
-		width: 100%;
+		font: inherit;
+		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)
@@ -76,41 +89,43 @@ export const buttonStyles = css `
 	/* ## 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);
-		font: var(--semantics-buttons-xs-font);
-		border-radius: var(--semantics-controls-xs-corner-radius);
 		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);
-		font: var(--semantics-buttons-sm-font);
-		border-radius: var(--semantics-controls-sm-corner-radius);
 		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);
-		font: var(--semantics-buttons-md-font);
-		border-radius: var(--semantics-controls-md-corner-radius);
 		gap: var(--semantics-buttons-md-gap);
+		font: var(--semantics-buttons-md-font);
 	}
 
 
 	/* # Variants */
 
-	/* ## Variant: Neutral Tintend (Secondary, Default) */
+	/* ## Neutral Tintend (Secondary, Default) */
+
+	/* ### Default neutral tinted button */
 
 	:host([variant="neutral-tinted"]) .button,
 	:host([variant="secondary"]) .button,
@@ -119,6 +134,8 @@ export const buttonStyles = css `
 		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,
@@ -128,6 +145,8 @@ export const buttonStyles = css `
 		}
 	}
 
+	/* ### Active neutral tinted button */
+
 	:host([variant="neutral-tinted"]) .button:active,
 	:host([variant="secondary"]) .button:active,
 	:host(:not([variant])) .button:active {
@@ -135,24 +154,61 @@ export const buttonStyles = css `
 		color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
 	}
 
-	/* ## Variant: Neutral Transparent */
+	/* ### 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);
 	}
 
-	/* ## Variant: Accent Filled (Primary) */
+	/* ## Accent Filled (Primary) */
+
+	/* ### Default accent filled button */
 
 	:host([variant="accent-filled"]) .button,
 	:host([variant="primary"]) .button {
@@ -160,6 +216,8 @@ export const buttonStyles = css `
 		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 {
@@ -168,71 +226,66 @@ export const buttonStyles = css `
 		}
 	}
 
+	/* ### 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);
 	}
 
-	/* ## Variant: Accent Outlined */
+	/* ### Open accent filled button */
 
-	:host([variant="accent-outlined"]) .button {
-		background-color: transparent;
-		padding: calc(var(--primitives-space-12) - var(--semantics-buttons-accent-outlined-border-thickness));
-		color: var(--semantics-buttons-accent-outlined-content-color);
-		border-width: var(--semantics-buttons-accent-outlined-border-thickness);
-		border-style: solid;
-		border-color: var(--semantics-buttons-accent-outlined-border-color);
+	: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);
 	}
 
-	:host([variant="accent-outlined"][size="md"]) .button {
-		padding: calc(var(--primitives-space-12) - var(--semantics-buttons-accent-outlined-border-thickness));
-	}
-
-	:host([variant="accent-outlined"][size="sm"]) .button {
-		padding:
-			calc(var(--primitives-space-6) - var(--semantics-buttons-accent-outlined-border-thickness))
-			calc(var(--primitives-space-10) - var(--semantics-buttons-accent-outlined-border-thickness))
-		;
-	}
-
-	:host([variant="accent-outlined"][size="xs"]) .button {
-		padding:
-			calc(var(--primitives-space-4) - var(--semantics-buttons-accent-outlined-border-thickness))
-			calc(var(--primitives-space-6) - var(--semantics-buttons-accent-outlined-border-thickness))
-		;
-	}
+	/* ### Open hovered accent filled button */
 
 	@media (hover: hover) {
-		:host([variant="accent-outlined"]) .button:hover {
-			color: var(--semantics-buttons-accent-outlined-is-hovered-content-color);
-			border-color: var(--semantics-buttons-accent-outlined-is-hovered-border-color);
+		: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);
 		}
 	}
 
-	:host([variant="accent-outlined"]) .button:active {
-		color: var(--semantics-buttons-accent-outlined-is-active-content-color);
-		border-color: var(--semantics-buttons-accent-outlined-is-active-border-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);
 	}
 
-	/* ## Variant: Accent Transparent */
+	/* ## 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);
 	}
 
-	/* ## Variant: Critical Tinted */
+	/* ## Critical Tinted */
+
+	/* ### Default critical tinted button */
 
 	:host([variant="critical-tinted"]) .button,
 	:host([variant="destructive"]) .button {
@@ -240,6 +293,8 @@ export const buttonStyles = css `
 		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 {
@@ -248,12 +303,37 @@ export const buttonStyles = css `
 		}
 	}
 
+	/* ### 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);
+		}
+	}
+
+	/* ### Active critical transparent button */
+
+	:host([variant="critical-transparent"]) .button:active {
+		color: var(--semantics-buttons-critical-transparent-is-active-content-color);
+	}
+
 	/* ## Elements */
 
 	.button__content {
@@ -264,6 +344,16 @@ export const buttonStyles = css `
 		display: none;
 	}
 
+	.button__text {
+		min-width: 0;
+	}
+
+	:host([single-line]) .button__text {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
 	.button__start-icon,
 	.button__end-icon {
 		display: block;
@@ -274,45 +364,41 @@ export const buttonStyles = css `
 	:host(:not([size])) .button__start-icon,
 	:host([size="md"]) .button__end-icon,
 	:host(:not([size])) .button__end-icon {
-		width: var(--primitives-space-20);
-		height: var(--primitives-space-20);
+		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(--primitives-space-18);
-		height: var(--primitives-space-18);
+		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(--primitives-space-16);
-		height: var(--primitives-space-16);
+		width: var(--semantics-buttons-xs-icon-size);
+		height: var(--semantics-buttons-xs-icon-size);
 	}
 
 	.button__disclosure-icon {
 		display: block;
+		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 {
-		width: var(--primitives-space-20);
-		height: var(--primitives-space-20);
 		margin-left: -2px;
 		margin-right: -2px;
 	}
 
 	:host([size="sm"]) .button__disclosure-icon {
-		width: var(--primitives-space-18);
-		height: var(--primitives-space-18);
 		margin-left: -1px;
 		margin-right: -2px;
 	}
 
 	:host([size="xs"]) .button__disclosure-icon {
-		width: var(--primitives-space-16);
-		height: var(--primitives-space-16);
 		margin-left: -1px;
 		margin-right: -2px;
 	}

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6T9B,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmZ9B,CAAC"}