@nldd/design-system 0.8.37

package/README.md

@@ -0,0 +1,106 @@
+# NLDD Design System
+
+Web Components voor Nederlandse Digitale Dienst (Rijksoverheid).
+
+## Installatie
+
+```bash
+npm install @nldd/design-system
+```
+
+### Gebruik
+
+```javascript
+// Importeer CSS variabelen en fonts (vereist voor styling)
+import '@nldd/design-system/styles';
+
+// Importeer alle componenten
+import '@nldd/design-system';
+
+// Of importeer specifieke componenten
+import { NLDDButton, NLDDCheckbox, NLDDSwitch } from '@nldd/design-system';
+```
+
+```html
+<!-- Gebruik in HTML -->
+<nldd-button variant="accent-filled" text="Opslaan"></nldd-button>
+<nldd-checkbox-field label="Akkoord met voorwaarden"></nldd-checkbox-field>
+<nldd-switch-field label="Meldingen inschakelen"></nldd-switch-field>
+```
+
+## Storybook
+
+Bekijk de live component documentatie: **https://minbzk.github.io/storybook/**
+
+## Development setup
+
+```bash
+# Dependencies installeren
+npm install
+
+# Storybook starten
+npm run storybook
+
+# Open http://localhost:6006 voor de component documentatie
+```
+
+## Componenten
+
+### nldd-button
+
+| 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` |
+| `size`             | string  | `md`             | `xs`, `sm`, `md`                                                                                                                                         |
+| `disabled`         | boolean | `false`          | Uitgeschakelde staat                                                                                                                                     |
+| `type`             | string  | `button`         | `button`, `submit`, `reset`                                                                                                                              |
+| `full-width`       | boolean | `false`          | Rekt de button uit over de volledige breedte van de container                                                                                             |
+| `start-icon`       | string  | `''`             | Icoon aan het begin van de button                                                                                                                        |
+| `end-icon`         | string  | `''`             | Icoon aan het einde van de button                                                                                                                        |
+| `expandable`       | boolean | `false`          | Voegt een icoon toe dat aangeeft dat de button een menu of popover opent                                                                                 |
+| `href`             | string  | `undefined`      | Rendert als link (`<a>`) in plaats van een button                                                                                                        |
+| `accessible-label` | string  | `''`             | Toegankelijk label voor schermlezers                                                                                                                     |
+| `popovertarget`    | string  | `''`             | ID van het popover-element                                                                                                                               |
+
+Zie de [Storybook-documentatie](https://minbzk.github.io/storybook/) voor alle componenten.
+
+## Styling structuur
+
+CSS variabelen zijn georganiseerd in vijf lagen:
+
+| Laag | Prefix | Beschrijving |
+| ---- | ------ | ------------ |
+| **Primitives** | `--primitives-*` | Basis waarden (kleuren, spacing, typography) |
+| **Semantics** | `--semantics-*` | Betekenisvolle variabelen (buttons, controls, surfaces) |
+| **Components** | `--components-*` | Component-specifieke variabelen |
+| **Context** | `--context-*` | Gedeelde variabelen voor communicatie tussen componenten |
+| **Local** | `--_*` | Interne variabelen binnen een component (niet bedoeld voor extern gebruik) |
+
+```css
+/* Primitives — basis waarden */
+--primitives-color-accent-100: #154273;
+--primitives-space-16: 16px;
+
+/* Semantics — verwijzen naar primitives */
+--semantics-buttons-accent-filled-background-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
+--semantics-controls-md-min-size: var(--primitives-space-44);
+
+/* Components — verwijzen naar semantics of primitives */
+--components-list-corner-radius: var(--semantics-controls-md-corner-radius);
+--components-button-group-sm-gap: var(--primitives-space-6);
+
+/* Context — communicatie tussen componenten */
+--context-parent-background-color: var(--semantics-surfaces-background-color);
+
+/* Local — intern binnen een component */
+--_background-color: var(--context-parent-background-color);
+```
+
+## Feedback en verzoeken
+
+Mis je een component of wil je een wijziging voorstellen? [Maak een issue aan](https://github.com/MinBZK/storybook/issues).
+
+## Licentie (License)
+
+EUPL-1.2

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

@@ -0,0 +1,8 @@
+export declare const breakpoints: {
+    readonly smMin: "320px";
+    readonly smMax: "640px";
+    readonly mdMin: "641px";
+    readonly mdMax: "1007px";
+    readonly lgMin: "1008px";
+};
+//# sourceMappingURL=breakpoints.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../src/assets/styles/breakpoints.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;;;;CAMd,CAAC"}

package/dist/assets/styles/breakpoints.js

@@ -0,0 +1,8 @@
+export const breakpoints = {
+    smMin: '320px',
+    smMax: '640px',
+    mdMin: '641px',
+    mdMax: '1007px',
+    lgMin: '1008px',
+};
+//# sourceMappingURL=breakpoints.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.js","sourceRoot":"","sources":["../../../src/assets/styles/breakpoints.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG;IAC1B,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,QAAQ;IACf,KAAK,EAAE,QAAQ;CACN,CAAC"}

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

@@ -0,0 +1,68 @@
+/**
+ * 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} 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 {string} text - Button text
+ * @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
+ * @attr {string} href - When set, renders an <a> element instead of <button>
+ * @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 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.
+ *
+ * @fires click - When button is clicked (not fired when disabled)
+ */
+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 Size = 'xs' | 'sm' | 'md';
+type ButtonType = 'button' | 'submit' | 'reset';
+export declare class NLDDButton extends LitElement {
+    static styles: import("lit").CSSResult;
+    variant: Variant;
+    size: Size;
+    fullWidth: boolean;
+    expandable: boolean;
+    type: ButtonType;
+    popovertarget: string | undefined;
+    disabled: boolean;
+    /** Button text. */
+    text: string;
+    /** 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. */
+    endIcon: string;
+    /** Accessible label forwarded to the inner <button> or <a>. Use when visible text alone lacks context. */
+    accessibleLabel: string;
+    /** When set, renders an <a> element instead of <button>. */
+    href: string | undefined;
+    /** Link target (e.g. '_blank'). Only used when href is set. */
+    target: string | undefined;
+    /**
+     * Link rel attribute. Only used when href is set.
+     * Defaults to 'noopener noreferrer' when target is '_blank' and rel is not explicitly set.
+     */
+    rel: string | undefined;
+    private _warnedA11y;
+    updated(): void;
+    private _handleClick;
+    /** Resolves the effective rel value for link rendering. */
+    _resolvedRel(): string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-button': NLDDButton;
+    }
+}
+export {};
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,142 @@
+/**
+ * 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} 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 {string} text - Button text
+ * @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
+ * @attr {string} href - When set, renders an <a> element instead of <button>
+ * @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 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.
+ *
+ * @fires click - When button is clicked (not fired when disabled)
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { buttonStyles } from './button.styles.js';
+import { template } from './button.template.js';
+import './../../content/icon/icon.js';
+let NLDDButton = class NLDDButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = 'neutral-tinted';
+        this.size = 'md';
+        this.fullWidth = false;
+        this.expandable = false;
+        this.type = 'button';
+        this.popovertarget = undefined;
+        this.disabled = false;
+        /** Button text. */
+        this.text = '';
+        /** 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. */
+        this.endIcon = '';
+        /** Accessible label forwarded to the inner <button> or <a>. Use when visible text alone lacks context. */
+        this.accessibleLabel = '';
+        /** When set, renders an <a> element instead of <button>. */
+        this.href = undefined;
+        /** Link target (e.g. '_blank'). Only used when href is set. */
+        this.target = undefined;
+        /**
+         * Link rel attribute. Only used when href is set.
+         * Defaults to 'noopener noreferrer' when target is '_blank' and rel is not explicitly set.
+         */
+        this.rel = undefined;
+        this._warnedA11y = false;
+    }
+    updated() {
+        const isEmpty = !this.text && !this.accessibleLabel;
+        if (import.meta.env?.DEV && isEmpty && !this._warnedA11y) {
+            this._warnedA11y = true;
+            console.warn('<nldd-button>: button has no text or accessible-label. This produces an inaccessible button (WCAG SC 4.1.2).');
+        }
+        else if (!isEmpty) {
+            this._warnedA11y = false;
+        }
+    }
+    _handleClick(e) {
+        if (this.disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+    }
+    /** Resolves the effective rel value for link rendering. */
+    _resolvedRel() {
+        if (this.rel)
+            return this.rel;
+        if (this.target === '_blank')
+            return 'noopener noreferrer';
+        return '';
+    }
+    render() {
+        return template.call(this, {
+            handleClick: this._handleClick.bind(this),
+        });
+    }
+};
+NLDDButton.styles = buttonStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDButton.prototype, "variant", void 0);
+__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);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'expandable' })
+], NLDDButton.prototype, "expandable", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDButton.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], NLDDButton.prototype, "popovertarget", 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: String, attribute: 'start-icon' })
+], NLDDButton.prototype, "startIcon", void 0);
+__decorate([
+    property({ type: String, attribute: 'end-icon' })
+], NLDDButton.prototype, "endIcon", void 0);
+__decorate([
+    property({ type: String, attribute: 'accessible-label' })
+], NLDDButton.prototype, "accessibleLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDButton.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], NLDDButton.prototype, "target", void 0);
+__decorate([
+    property({ type: String })
+], NLDDButton.prototype, "rel", void 0);
+NLDDButton = __decorate([
+    customElement('nldd-button')
+], NLDDButton);
+export { NLDDButton };
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,2 @@
+export declare const buttonStyles: import("lit").CSSResult;
+//# sourceMappingURL=button.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button/button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAgTxB,CAAC"}

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

@@ -0,0 +1,307 @@
+import { css } from 'lit';
+export const buttonStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: inline-block;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:host([full-width]) {
+		display: block;
+		width: 100%;
+		flex-grow: 1;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host([disabled]) {
+		opacity: var(--primitives-opacity-disabled);
+		pointer-events: none;
+	}
+
+
+	/* # Block */
+
+	.button {
+		appearance: none;
+		border: none;
+		margin: 0;
+		padding: 0;
+		background: none;
+		font: inherit;
+		box-sizing: border-box;
+		text-decoration: none;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		transition:
+			background-color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default),
+			color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default)
+		;
+	}
+
+	a.button {
+		cursor: var(--semantics-controls-link-cursor);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.button {
+			transition: none;
+		}
+	}
+
+
+	/* # Focus */
+
+	.button:focus-visible {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
+
+	.button:focus:not(:focus-visible) {
+		outline: none;
+	}
+
+
+	/* # Sizes */
+
+	/* ## Size: XS */
+
+	:host([size="xs"]) .button {
+		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);
+	}
+
+	/* ## Size: SM */
+
+	:host([size="sm"]) .button {
+		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);
+	}
+
+	/* ## Size: MD (Default) */
+
+	:host([size="md"]) .button,
+	:host(:not([size])) .button {
+		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);
+	}
+
+
+	/* # Variants */
+
+	/* ## Variant: Neutral Tintend (Secondary, Default) */
+
+	: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);
+	}
+
+	: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);
+	}
+
+	: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);
+	}
+
+	/* ## Variant: Neutral Transparent */
+
+	:host([variant="neutral-transparent"]) .button {
+		background-color: transparent;
+		color: var(--semantics-buttons-neutral-transparent-content-color);
+	}
+
+	:host([variant="neutral-transparent"]) .button:hover {
+		color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
+	}
+
+	:host([variant="neutral-transparent"]) .button:active {
+		color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
+	}
+
+	/* ## Variant: Accent Filled (Primary) */
+
+	: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);
+	}
+
+	: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);
+	}
+
+	: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));
+	}
+
+	: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))
+		;
+	}
+
+	: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([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);
+	}
+
+	/* ## Variant: Accent Transparent */
+
+	:host([variant="accent-transparent"]) .button {
+		background-color: transparent;
+		color: var(--semantics-buttons-accent-transparent-content-color);
+	}
+
+	:host([variant="accent-transparent"]) .button:hover {
+		color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
+	}
+
+	:host([variant="accent-transparent"]) .button:active {
+		color: var(--semantics-buttons-accent-transparent-is-active-content-color);
+	}
+
+	/* ## Variant: Critical Tinted */
+
+	: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);
+	}
+
+	: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);
+	}
+
+	: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);
+	}
+
+	/* ## Elements */
+
+	.button__content {
+		display: contents;
+	}
+
+	::slotted(nldd-icon) {
+		display: none;
+	}
+
+	.button__start-icon,
+	.button__end-icon {
+		display: block;
+		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(--primitives-space-20);
+		height: var(--primitives-space-20);
+	}
+
+	:host([size="sm"]) .button__start-icon,
+	:host([size="sm"]) .button__end-icon {
+		width: var(--primitives-space-18);
+		height: var(--primitives-space-18);
+	}
+
+	:host([size="xs"]) .button__start-icon,
+	:host([size="xs"]) .button__end-icon {
+		width: var(--primitives-space-16);
+		height: var(--primitives-space-16);
+	}
+
+	.button__disclosure-icon {
+		display: block;
+		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;
+	}
+`;
+//# sourceMappingURL=button.styles.js.map

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

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgT9B,CAAC"}