@nldd/design-system 0.8.41 → 0.8.43

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`                                                                                                                              |
@@ -101,6 +101,23 @@ CSS variabelen zijn georganiseerd in vijf lagen:
 
 Mis je een component of wil je een wijziging voorstellen? [Maak een issue aan](https://github.com/MinBZK/storybook/issues).
 
+## Fonts
+
+Het design system gebruikt twee fonts, met verschillende licenties:
+
+- **JetBrains Mono** (monospace) — vrij te gebruiken onder de
+  [SIL Open Font License 1.1](https://openfontlicense.org).
+- **Rijksoverheid Sans** (`RijksSansWeb`) — auteursrechtelijk beschermd
+  door de Staat der Nederlanden. **Uitsluitend bedoeld voor publicaties
+  van de Rijksoverheid** of partijen die in opdracht van de Rijksoverheid
+  werken. Voor ander gebruik is voorafgaande schriftelijke toestemming
+  vereist; neem contact op met de Rijksvoorlichtingsdienst.
+
+Volledige licentie-informatie staat in [`NOTICES.md`](./NOTICES.md). Door
+de fonts mee te leveren in deze repository wordt geen licentie verleend
+buiten het hierboven beschreven kader.
+
 ## Licentie (License)
 
-EUPL-1.2
+De broncode van dit design system valt onder **EUPL-1.2**. De fontbestanden
+in `src/assets/fonts/` hebben hun eigen licenties — zie [`NOTICES.md`](./NOTICES.md).

package/dist/assets/styles/tokens.d.ts

@@ -0,0 +1,25 @@
+/**
+ * JavaScript-accessible design tokens for `@nldd/design-system`.
+ *
+ * Most tokens live in `settings.css` as CSS custom properties — that's the
+ * right home for anything CSS consumes directly. This module re-exports the
+ * subset of tokens that consumers also need from JavaScript: matchMedia
+ * thresholds, IntersectionObserver root margins, container-query breakpoints
+ * computed in JS, etc.
+ *
+ * Imported via the package's `./tokens` export:
+ *
+ * ```ts
+ * import { breakpoints } from '@nldd/design-system/tokens';
+ *
+ * const isDesktop = matchMedia(`(min-width: ${breakpoints.lgMin})`).matches;
+ * ```
+ *
+ * Add re-exports here as new JS-side tokens land. Keep CSS-only tokens out —
+ * duplicating them here would invite drift. If something is needed in JS,
+ * make the canonical source a `.ts` constants file (like `breakpoints.ts`)
+ * and let `settings.css` derive from it via build-time generation, rather
+ * than the other way around.
+ */
+export { breakpoints } from './breakpoints.js';
+//# sourceMappingURL=tokens.d.ts.map

package/dist/assets/styles/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../src/assets/styles/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/assets/styles/tokens.js

@@ -0,0 +1,25 @@
+/**
+ * JavaScript-accessible design tokens for `@nldd/design-system`.
+ *
+ * Most tokens live in `settings.css` as CSS custom properties — that's the
+ * right home for anything CSS consumes directly. This module re-exports the
+ * subset of tokens that consumers also need from JavaScript: matchMedia
+ * thresholds, IntersectionObserver root margins, container-query breakpoints
+ * computed in JS, etc.
+ *
+ * Imported via the package's `./tokens` export:
+ *
+ * ```ts
+ * import { breakpoints } from '@nldd/design-system/tokens';
+ *
+ * const isDesktop = matchMedia(`(min-width: ${breakpoints.lgMin})`).matches;
+ * ```
+ *
+ * Add re-exports here as new JS-side tokens land. Keep CSS-only tokens out —
+ * duplicating them here would invite drift. If something is needed in JS,
+ * make the canonical source a `.ts` constants file (like `breakpoints.ts`)
+ * and let `settings.css` derive from it via build-time generation, rather
+ * than the other way around.
+ */
+export { breakpoints } from './breakpoints.js';
+//# sourceMappingURL=tokens.js.map

package/dist/assets/styles/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../../src/assets/styles/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC"}

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-open 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,30 @@
  */
 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;
     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,10 +66,15 @@ 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;
+    /**
+     * Delegates focus to the inner `<button>` (or `<a>` when `href` is set), so
+     * consumers can call `buttonEl.focus()` without reaching into shadow DOM.
+     */
+    focus(options?: FocusOptions): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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;IAMb,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;IAG9C,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-open 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,16 @@ 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;
         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 +67,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;
@@ -86,6 +109,13 @@ let NLDDButton = class NLDDButton extends LitElement {
             return 'noopener noreferrer';
         return '';
     }
+    /**
+     * Delegates focus to the inner `<button>` (or `<a>` when `href` is set), so
+     * consumers can call `buttonEl.focus()` without reaching into shadow DOM.
+     */
+    focus(options) {
+        this.shadowRoot?.querySelector('.button')?.focus(options);
+    }
     render() {
         return template.call(this, {
             handleClick: this._handleClick.bind(this),
@@ -100,11 +130,17 @@ __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);
@@ -117,6 +153,9 @@ __decorate([
 __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;
@@ -39,7 +51,8 @@ export const buttonStyles = css `
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		width: 100%;
+		width: var(--_width);
+		max-width: 100%;
 		text-wrap: pretty;
 		transition:
 			background-color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default),
@@ -110,7 +123,9 @@ export const buttonStyles = css `
 
 	/* # 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-open-background-color);
+		color: var(--semantics-buttons-neutral-tinted-is-open-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-open-is-hovered-background-color);
+			color: var(--semantics-buttons-neutral-tinted-is-open-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-open-is-active-background-color);
+		color: var(--semantics-buttons-neutral-tinted-is-open-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 */
-
-	: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([variant="accent-outlined"][size="md"]) .button {
-		padding: calc(var(--primitives-space-12) - var(--semantics-buttons-accent-outlined-border-thickness));
-	}
+	/* ### Open accent filled button */
 
-	: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([expanded][variant="accent-filled"]) .button,
+	:host([expanded][variant="primary"]) .button {
+		background-color: var(--semantics-buttons-accent-filled-is-open-background-color);
+		color: var(--semantics-buttons-accent-filled-is-open-content-color);
 	}
 
-	: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-open-is-hovered-background-color);
+			color: var(--semantics-buttons-accent-filled-is-open-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-open-is-active-background-color);
+		color: var(--semantics-buttons-accent-filled-is-open-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;
 		flex-shrink: 0;
+		width: var(--_disclosure-icon-size);
+		height: var(--_disclosure-icon-size);
 	}
 
 	: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;
 	}