@nldd/design-system 0.8.37

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

@@ -0,0 +1,9 @@
+import { html } from 'lit';
+export function template() {
+    return html `
+	<div class="button-group">
+		<slot @slotchange=${this.handleSlotChange}></slot>
+	</div>
+	`;
+}
+//# sourceMappingURL=button-group.template.js.map

package/dist/components/actions/button-group/button-group.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.template.js","sourceRoot":"","sources":["../../../../src/components/actions/button-group/button-group.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,MAAM,UAAU,QAAQ;IACvB,OAAO,IAAI,CAAA;;sBAEU,IAAI,CAAC,gBAAgB;;EAEzC,CAAC;AACH,CAAC"}

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

@@ -0,0 +1,75 @@
+/**
+ * Nederlandse Digitale Dienst Icon Button Component (Lit + TypeScript)
+ *
+ * @element nldd-icon-button
+ * @attr {string}  variant           - Button variant: 'accent-filled' | 'accent-outlined' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'primary' | 'secondary' | 'destructive'
+ * @attr {string}  size              - Button size: 'xs' | 'sm' | 'md' | 'lg' (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 opens a menu or popover and shows chevron next to the icon
+ * @attr {boolean} full-width        - Whether the button stretches to fill its container width
+ * @attr {string}  text              - Button text, used as aria-label and shown below the icon in lg size
+ * @attr {string}  icon              - Icon name for the nldd-icon element
+ * @attr {string}  accessible-label  - Accessible label for screen readers. Overrides text as aria-label
+ *                                     and title tooltip. Use when the visible text alone lacks context for screen
+ *                                     readers (e.g. text "Toon", accessible-label "Toon wachtwoord").
+ *                                     The text is still shown visually in lg size regardless.
+ * @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'
+ * @attr {string}  popovertarget     - ID of a popover element to toggle; forwarded to the inner <button>
+ *
+ * @slot icon - Slot for a custom icon (e.g. custom SVG). Only used when icon attribute is not set.
+ *
+ * @example
+ * ```html
+ * <nldd-icon-button text="Download" icon="download"></nldd-icon-button>
+ * ```
+ *
+ * @fires click - When button is clicked (not fired when disabled)
+ */
+import { LitElement } from 'lit';
+import './../../content/icon/icon.js';
+export type Size = 'xs' | 'sm' | 'md' | 'lg';
+export type Variant = 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-outlined' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted';
+export type ButtonType = 'button' | 'submit' | 'reset';
+export declare class NLDDIconButton extends LitElement {
+    static styles: import("lit").CSSResult;
+    variant: Variant;
+    size: Size;
+    disabled: boolean;
+    type: ButtonType;
+    expandable: boolean;
+    fullWidth: boolean;
+    popovertarget: string | undefined;
+    /** Button text, used as aria-label and shown below the icon in lg size. */
+    text: string;
+    /** Icon name for the nldd-icon element. When not set, the icon slot is used. */
+    icon: string;
+    /** Accessible label for screen readers. Overrides text as aria-label and title tooltip.
+     *  The text is still shown visually in lg size regardless. */
+    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;
+    /** Whether an icon is present via attribute or slot. */
+    private get _hasIcon();
+    private _warnedA11y;
+    updated(): void;
+    /** Resolves the effective rel value for link rendering. */
+    _resolvedRel(): string;
+    protected _handleClick(e: MouseEvent): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-icon-button': NLDDIconButton;
+    }
+}
+//# sourceMappingURL=icon-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/icon-button/icon-button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,8BAA8B,CAAC;AAEtC,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC7C,MAAM,MAAM,OAAO,GAChB,SAAS,GACT,WAAW,GACX,aAAa,GACb,eAAe,GACf,iBAAiB,GACjB,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,iBAAiB,CAAC;AACrB,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEvD,qBACa,cAAe,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAAoB;IAG1C,OAAO,EAAE,OAAO,CAAoB;IAGpC,IAAI,EAAE,IAAI,CAAQ;IAGlB,QAAQ,UAAS;IAGjB,IAAI,EAAE,UAAU,CAAY;IAG5B,UAAU,UAAS;IAGnB,SAAS,UAAS;IAGlB,aAAa,EAAE,MAAM,GAAG,SAAS,CAAa;IAE9C,2EAA2E;IAE3E,IAAI,SAAM;IAEV,gFAAgF;IAEhF,IAAI,SAAM;IAEV;kEAC8D;IAE9D,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,wDAAwD;IACxD,OAAO,KAAK,QAAQ,GAInB;IAED,OAAO,CAAC,WAAW,CAAS;IAEnB,OAAO,IAAI,IAAI;IAUxB,2DAA2D;IAC3D,YAAY,IAAI,MAAM;IAMtB,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAQlC,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,cAAc,CAAC;KACnC;CACD"}

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

@@ -0,0 +1,150 @@
+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;
+};
+/**
+ * Nederlandse Digitale Dienst Icon Button Component (Lit + TypeScript)
+ *
+ * @element nldd-icon-button
+ * @attr {string}  variant           - Button variant: 'accent-filled' | 'accent-outlined' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'primary' | 'secondary' | 'destructive'
+ * @attr {string}  size              - Button size: 'xs' | 'sm' | 'md' | 'lg' (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 opens a menu or popover and shows chevron next to the icon
+ * @attr {boolean} full-width        - Whether the button stretches to fill its container width
+ * @attr {string}  text              - Button text, used as aria-label and shown below the icon in lg size
+ * @attr {string}  icon              - Icon name for the nldd-icon element
+ * @attr {string}  accessible-label  - Accessible label for screen readers. Overrides text as aria-label
+ *                                     and title tooltip. Use when the visible text alone lacks context for screen
+ *                                     readers (e.g. text "Toon", accessible-label "Toon wachtwoord").
+ *                                     The text is still shown visually in lg size regardless.
+ * @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'
+ * @attr {string}  popovertarget     - ID of a popover element to toggle; forwarded to the inner <button>
+ *
+ * @slot icon - Slot for a custom icon (e.g. custom SVG). Only used when icon attribute is not set.
+ *
+ * @example
+ * ```html
+ * <nldd-icon-button text="Download" icon="download"></nldd-icon-button>
+ * ```
+ *
+ * @fires click - When button is clicked (not fired when disabled)
+ */
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { iconButtonStyles } from './icon-button.styles.js';
+import { template } from './icon-button.template.js';
+import './../../content/icon/icon.js';
+let NLDDIconButton = class NLDDIconButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = 'neutral-tinted';
+        this.size = 'md';
+        this.disabled = false;
+        this.type = 'button';
+        this.expandable = false;
+        this.fullWidth = false;
+        this.popovertarget = undefined;
+        /** Button text, used as aria-label and shown below the icon in lg size. */
+        this.text = '';
+        /** Icon name for the nldd-icon element. When not set, the icon slot is used. */
+        this.icon = '';
+        /** Accessible label for screen readers. Overrides text as aria-label and title tooltip.
+         *  The text is still shown visually in lg size regardless. */
+        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;
+    }
+    /** Whether an icon is present via attribute or slot. */
+    get _hasIcon() {
+        if (this.icon)
+            return true;
+        const slot = this.shadowRoot?.querySelector('slot[name="icon"]');
+        return (slot?.assignedElements().length ?? 0) > 0;
+    }
+    updated() {
+        const inaccessible = this._hasIcon && !this.text && !this.accessibleLabel;
+        if (import.meta.env?.DEV && inaccessible && !this._warnedA11y) {
+            this._warnedA11y = true;
+            console.warn('<nldd-icon-button>: icon is set without text or accessible-label. This produces an inaccessible button (WCAG SC 4.1.2). Add a text or accessible-label attribute.');
+        }
+        else if (!inaccessible) {
+            this._warnedA11y = false;
+        }
+    }
+    /** Resolves the effective rel value for link rendering. */
+    _resolvedRel() {
+        if (this.rel)
+            return this.rel;
+        if (this.target === '_blank')
+            return 'noopener noreferrer';
+        return '';
+    }
+    _handleClick(e) {
+        if (this.disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+    }
+    render() {
+        return template.call(this);
+    }
+};
+NLDDIconButton.styles = iconButtonStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDIconButton.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDIconButton.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDIconButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDIconButton.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'expandable' })
+], NLDDIconButton.prototype, "expandable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'full-width' })
+], NLDDIconButton.prototype, "fullWidth", void 0);
+__decorate([
+    property({ type: String })
+], NLDDIconButton.prototype, "popovertarget", void 0);
+__decorate([
+    property({ type: String })
+], NLDDIconButton.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], NLDDIconButton.prototype, "icon", void 0);
+__decorate([
+    property({ type: String, attribute: 'accessible-label' })
+], NLDDIconButton.prototype, "accessibleLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDIconButton.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], NLDDIconButton.prototype, "target", void 0);
+__decorate([
+    property({ type: String })
+], NLDDIconButton.prototype, "rel", void 0);
+NLDDIconButton = __decorate([
+    customElement('nldd-icon-button')
+], NLDDIconButton);
+export { NLDDIconButton };
+//# sourceMappingURL=icon-button.js.map

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

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

package/dist/components/actions/icon-button/icon-button.styles.d.ts

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

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

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

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

@@ -0,0 +1,334 @@
+import { css } from 'lit';
+export const iconButtonStyles = 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 */
+
+	.icon-button {
+		appearance: none;
+		border: none;
+		margin: 0;
+		padding: 0;
+		background: none;
+		font: inherit;
+		box-sizing: border-box;
+		display: inline-flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		transition:
+			background-color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default),
+			color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.icon-button {
+			transition: none;
+		}
+	}
+
+	a.icon-button {
+		cursor: var(--semantics-controls-link-cursor);
+	}
+
+
+	/* # Focus */
+
+	.icon-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);
+	}
+
+	.icon-button:focus:not(:focus-visible) {
+		outline: none;
+	}
+
+
+	/* # Sizes */
+
+	/* ## Size: XS */
+
+	:host([size='xs']) .icon-button {
+		width: auto;
+		height: var(--semantics-controls-xs-min-size);
+		min-width: var(--semantics-controls-xs-min-size);
+		min-height: var(--semantics-controls-xs-min-size);
+		padding: var(--primitives-space-4);
+		border-radius: var(--semantics-controls-xs-corner-radius);
+	}
+
+	:host([size='xs']) .icon-button__icon {
+		width: var(--primitives-space-16);
+		height: var(--primitives-space-16);
+	}
+
+	:host([size='xs']) .icon-button__disclosure-icon {
+		width: var(--primitives-space-16);
+		height: var(--primitives-space-16);
+	}
+
+	/* ## Size: SM */
+
+	:host([size='sm']) .icon-button {
+		width: auto;
+		height: var(--semantics-controls-sm-min-size);
+		min-width: var(--semantics-controls-sm-min-size);
+		min-height: var(--semantics-controls-sm-min-size);
+		padding: var(--primitives-space-6);
+		border-radius: var(--semantics-controls-sm-corner-radius);
+	}
+
+	:host([size='sm']) .icon-button__icon {
+		width: var(--primitives-space-20);
+		height: var(--primitives-space-20);
+	}
+
+	:host([size='sm']) .icon-button__disclosure-icon {
+		width: var(--primitives-space-20);
+		height: var(--primitives-space-20);
+		margin-right: calc(var(--primitives-space-2) * -1);
+	}
+
+	/* ## Size: MD (Default) */
+
+	:host([size='md']) .icon-button,
+	:host(:not([size])) .icon-button {
+		width: auto;
+		height: var(--semantics-controls-md-min-size);
+		min-width: var(--semantics-controls-md-min-size);
+		min-height: var(--semantics-controls-md-min-size);
+		padding: var(--primitives-space-8);
+		border-radius: var(--semantics-controls-md-corner-radius);
+	}
+
+	:host([size='md']) .icon-button__icon,
+	:host(:not([size])) .icon-button__icon {
+		width: var(--primitives-space-24);
+		height: var(--primitives-space-24);
+	}
+
+	:host([size='md']) .icon-button__disclosure-icon,
+	:host(:not([size])) .icon-button__disclosure-icon {
+		width: var(--primitives-space-20);
+		height: var(--primitives-space-20);
+		margin-right: calc(var(--primitives-space-2) * -1);
+	}
+
+	/* ## Size: LG */
+
+	:host([size='lg']) .icon-button {
+		width: auto;
+		height: var(--semantics-controls-lg-min-size);
+		min-width: var(--semantics-controls-lg-min-size);
+		min-height: var(--semantics-controls-lg-min-size);
+		padding: var(--primitives-space-8);
+		border-radius: var(--semantics-controls-lg-corner-radius);
+	}
+
+	:host([size='lg']) .icon-button__icon {
+		width: var(--primitives-space-24);
+		height: var(--primitives-space-24);
+	}
+
+	:host([size='lg']) .icon-button__disclosure-icon {
+		width: var(--primitives-space-20);
+		height: var(--primitives-space-20);
+		margin-right: calc(var(--primitives-space-2) * -1);
+	}
+
+	:host([full-width]) .icon-button {
+		width: 100%;
+	}
+
+
+	/* # Variants */
+
+	/* ## Variant: neutral-tinted (secondary, default) */
+
+	:host([variant='neutral-tinted']) .icon-button,
+	:host([variant='secondary']) .icon-button,
+	:host(:not([variant])) .icon-button {
+		background-color: var(--semantics-buttons-neutral-tinted-background-color);
+		color: var(--semantics-buttons-neutral-tinted-content-color);
+	}
+
+	:host([variant='neutral-tinted']) .icon-button:hover,
+	:host([variant='secondary']) .icon-button:hover,
+	:host(:not([variant])) .icon-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']) .icon-button:active,
+	:host([variant='secondary']) .icon-button:active,
+	:host(:not([variant])) .icon-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']) .icon-button {
+		background-color: transparent;
+		color: var(--semantics-buttons-neutral-transparent-content-color);
+	}
+
+	:host([variant='neutral-transparent']) .icon-button:hover {
+		background-color: transparent;
+		color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
+	}
+
+	:host([variant='neutral-transparent']) .icon-button:active {
+		color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
+	}
+
+	/* ## Variant: accent-filled (primary) */
+
+	:host([variant='accent-filled']) .icon-button,
+	:host([variant='primary']) .icon-button {
+		background-color: var(--semantics-buttons-accent-filled-background-color);
+		color: var(--semantics-buttons-accent-filled-content-color);
+	}
+
+	:host([variant='accent-filled']) .icon-button:hover,
+	:host([variant='primary']) .icon-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']) .icon-button:active,
+	:host([variant='primary']) .icon-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']) .icon-button {
+		background-color: transparent;
+		border-width: var(--semantics-buttons-accent-outlined-border-thickness);
+		border-style: solid;
+		border-color: var(--semantics-buttons-accent-outlined-border-color);
+		color: var(--semantics-buttons-accent-outlined-content-color);
+	}
+
+	:host([variant='accent-outlined'][size='lg']) .icon-button {
+		padding: calc(var(--primitives-space-8) - var(--semantics-buttons-accent-outlined-border-thickness));
+	}
+
+	:host([variant='accent-outlined'][size='md']) .icon-button {
+		padding: calc(var(--primitives-space-8) - var(--semantics-buttons-accent-outlined-border-thickness));
+	}
+
+	:host([variant='accent-outlined'][size='sm']) .icon-button {
+		padding: calc(var(--primitives-space-6) - var(--semantics-buttons-accent-outlined-border-thickness));
+	}
+
+	:host([variant='accent-outlined'][size='xs']) .icon-button {
+		padding: calc(var(--primitives-space-4) - var(--semantics-buttons-accent-outlined-border-thickness));
+	}
+
+	:host([variant='accent-outlined']) .icon-button:hover {
+		border-color: var(--semantics-buttons-accent-outlined-is-hovered-border-color);
+		color: var(--semantics-buttons-accent-outlined-is-hovered-content-color);
+	}
+
+	:host([variant='accent-outlined']) .icon-button:active {
+		border-color: var(--semantics-buttons-accent-outlined-is-active-border-color);
+		color: var(--semantics-buttons-accent-outlined-is-active-content-color);
+	}
+
+	/* ## Variant: accent-transparent */
+
+	:host([variant='accent-transparent']) .icon-button {
+		background-color: transparent;
+		color: var(--semantics-buttons-accent-transparent-content-color);
+	}
+
+	:host([variant='accent-transparent']) .icon-button:hover {
+		color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
+	}
+
+	:host([variant='accent-transparent']) .icon-button:active {
+		color: var(--semantics-buttons-accent-transparent-is-active-content-color);
+	}
+
+	/* ## Variant: critical-tinted (destructive) */
+
+	:host([variant='critical-tinted']) .icon-button,
+	:host([variant='destructive']) .icon-button {
+		background-color: var(--semantics-buttons-critical-tinted-background-color);
+		color: var(--semantics-buttons-critical-tinted-content-color);
+	}
+
+	:host([variant='critical-tinted']) .icon-button:hover,
+	:host([variant='destructive']) .icon-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']) .icon-button:active,
+	:host([variant='destructive']) .icon-button:active {
+		background-color: var(--semantics-buttons-critical-tinted-is-active-background-color);
+		color: var(--semantics-buttons-critical-tinted-is-active-content-color);
+	}
+
+
+	/* # Elements */
+
+	.icon-button__icon-area {
+		display: inline-flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.icon-button__icon {
+		display: flex;
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.icon-button__disclosure-icon {
+		display: flex;
+		flex-shrink: 0;
+	}
+
+	.icon-button__text {
+		display: none;
+		text-align: center;
+		white-space: nowrap;
+		color: inherit;
+		font: var(--primitives-font-body-xxs-bold-flat);
+	}
+
+	:host([size='lg']) .icon-button__text {
+		display: block;
+	}
+`;
+//# sourceMappingURL=icon-button.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.styles.js","sourceRoot":"","sources":["../../../../src/components/actions/icon-button/icon-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2UlC,CAAC"}

package/dist/components/actions/icon-button/icon-button.template.d.ts

@@ -0,0 +1,4 @@
+import type { NLDDIconButton } from './icon-button.js';
+import '../../content/tooltip/tooltip.js';
+export declare function template(this: NLDDIconButton): import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=icon-button.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.template.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/icon-button/icon-button.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,kCAAkC,CAAC;AAsB1C,wBAAgB,QAAQ,CAAC,IAAI,EAAE,cAAc,wCAgD5C"}

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

@@ -0,0 +1,66 @@
+import { html, nothing } from 'lit';
+import '../../content/tooltip/tooltip.js';
+function renderContent(component) {
+    return html `
+		<span class="icon-button__icon-area">
+			<span class="icon-button__icon">
+				${component.icon
+        ? html `<nldd-icon name=${component.icon}></nldd-icon>`
+        : html `<slot name="icon" @slotchange=${component.requestUpdate}></slot>`}
+			</span>
+			${component.expandable ? html `
+				<span class="icon-button__disclosure-icon">
+					<nldd-icon name="chevron-down-small"></nldd-icon>
+				</span>
+			` : nothing}
+		</span>
+		${component.text ? html `
+			<span class="icon-button__text">${component.text}</span>
+		` : ''}
+	`;
+}
+export function template() {
+    const label = this.accessibleLabel || this.text || nothing;
+    const content = renderContent(this);
+    // Tooltip text: accessible-label always, or text when not visible (non-lg)
+    const tooltipText = this.accessibleLabel
+        || (this.size !== 'lg' ? this.text : '');
+    const renderButton = () => {
+        if (this.href) {
+            const resolvedRel = this._resolvedRel();
+            return html `
+				<a class="icon-button"
+					href=${this.href}
+					target=${this.target || nothing}
+					rel=${resolvedRel || nothing}
+					aria-disabled=${this.disabled ? 'true' : nothing}
+					aria-label=${label}
+					@click=${this._handleClick}
+				>
+					${content}
+				</a>
+			`;
+        }
+        return html `
+			<button class="icon-button"
+				type=${this.type}
+				?disabled=${this.disabled}
+				aria-disabled=${this.disabled ? 'true' : nothing}
+				aria-label=${label}
+				popovertarget=${this.popovertarget || nothing}
+				@click=${this._handleClick}
+			>
+				${content}
+			</button>
+		`;
+    };
+    if (tooltipText) {
+        return html `
+			<nldd-tooltip text=${tooltipText}>
+				${renderButton()}
+			</nldd-tooltip>
+		`;
+    }
+    return renderButton();
+}
+//# sourceMappingURL=icon-button.template.js.map

package/dist/components/actions/icon-button/icon-button.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.template.js","sourceRoot":"","sources":["../../../../src/components/actions/icon-button/icon-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAEpC,OAAO,kCAAkC,CAAC;AAE1C,SAAS,aAAa,CAAC,SAAyB;IAC/C,OAAO,IAAI,CAAA;;;MAGN,SAAS,CAAC,IAAI;QACf,CAAC,CAAC,IAAI,CAAA,mBAAmB,SAAS,CAAC,IAAI,eAAe;QACtD,CAAC,CAAC,IAAI,CAAA,iCAAiC,SAAS,CAAC,aAAa,UAAU;;KAExE,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;;;;IAI5B,CAAC,CAAC,CAAC,OAAO;;IAEV,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;qCACY,SAAS,CAAC,IAAI;GAChD,CAAC,CAAC,CAAC,EAAE;EACN,CAAC;AACH,CAAC;AAED,MAAM,UAAU,QAAQ;IACvB,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,IAAI,IAAI,OAAO,CAAC;IAC3D,MAAM,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAEpC,2EAA2E;IAC3E,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe;WACpC,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAE1C,MAAM,YAAY,GAAG,GAAG,EAAE;QACzB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;YACxC,OAAO,IAAI,CAAA;;YAEF,IAAI,CAAC,IAAI;cACP,IAAI,CAAC,MAAM,IAAI,OAAO;WACzB,WAAW,IAAI,OAAO;qBACZ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;kBACnC,KAAK;cACT,IAAI,CAAC,YAAY;;OAExB,OAAO;;IAEV,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAA;;WAEF,IAAI,CAAC,IAAI;gBACJ,IAAI,CAAC,QAAQ;oBACT,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;iBACnC,KAAK;oBACF,IAAI,CAAC,aAAa,IAAI,OAAO;aACpC,IAAI,CAAC,YAAY;;MAExB,OAAO;;GAEV,CAAC;IACH,CAAC,CAAC;IAEF,IAAI,WAAW,EAAE,CAAC;QACjB,OAAO,IAAI,CAAA;wBACW,WAAW;MAC7B,YAAY,EAAE;;GAEjB,CAAC;IACH,CAAC;IAED,OAAO,YAAY,EAAE,CAAC;AACvB,CAAC"}