lintje 0.1.1

package/dist-elements/tag/combobox.js

@@ -0,0 +1,214 @@
+import { $ as e, Bt as t, Gt as n, Ht as r, Kt as i, Z as a, et as o, f as s } from "../chunks/base-rBLTcEIv.js";
+import { r as c, t as l } from "../chunks/input-jQVTln7H.js";
+import { t as u } from "../chunks/debounce-JXnLMCcF.js";
+//#region src/components/inputs/combobox/combobox.css?inline
+var d = "/* The combobox: the text field with the chevron, and the list slotted into a `lintje-popover`. */\n:host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n/* Below 768 px: the touch height and the full width, as `stacked`. */\n@media (max-width: 767px) {\n  :host {\n    width: 100%;\n    --h-control: var(--h-touch);\n  }\n}\n\n/* --- */\n\n.lintje-combobox { position: relative; display: flex; align-items: center; }\n.lintje-combobox__control {\n  width: 100%; height: var(--h-control);\n  padding: 0 var(--space-10) 0 14px;\n  border: 1px solid var(--color-border-field);\n  border-radius: var(--radius);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  font-size: 1rem;\n}\n.lintje-combobox__control::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n.lintje-combobox__control.is-error { border: 2px solid var(--color-error); }\n/* Disabled wins over error: after it, the whole border back to 1 px strong. */\n.lintje-combobox__control:disabled {\n  border: 1px solid var(--color-border-strong);\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n/* The chevron is drawing, not a control: a press on it lands in the field. */\n.lintje-combobox__chevron {\n  position: absolute; right: var(--space-3);\n  color: var(--color-text-muted);\n  pointer-events: none;\n}\n\n/* A dense list (`--h-option`): at most seven rows in view, then it scrolls. */\n.lintje-combobox__list {\n  max-height: calc(7 * var(--h-option) + var(--space-2));\n  overflow-y: auto;\n  padding: var(--space-1) 0;\n  font: var(--text-ui);\n}\n.lintje-combobox__option {\n  display: flex; align-items: center;\n  min-height: var(--h-option);\n  padding: 0 14px;\n  color: var(--color-text-primary);\n  cursor: pointer;\n}\n.lintje-combobox__option:hover,\n.lintje-combobox__option.is-active { background: var(--color-bg-subtle); }\n/* The option the keys stand on: the fill alone is about 1.1:1, so the focus ring inside the row. */\n.lintje-combobox__option.is-active {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: calc(var(--focus-width) * -1);\n}\n.lintje-combobox__option.is-selected { background: var(--color-bg-selected); font-weight: 700; }\n.lintje-combobox__match { font-weight: 700; }\n\n.lintje-combobox__status,\n.lintje-combobox__empty {\n  padding: 10px 14px;\n  font: var(--text-ui);\n  color: var(--color-text-muted);\n}\n\n/* Forced colours drop fills: both rows take an edge inside the row, so none changes size. */\n@media (forced-colors: active) {\n  .lintje-combobox__option.is-active { outline: 1px solid CanvasText; outline-offset: -1px; }\n  .lintje-combobox__option.is-selected { outline: 2px solid Highlight; outline-offset: -2px; }\n}\n";
+//#endregion
+//#region src/components/inputs/combobox/combobox.ts
+function f(e, t) {
+	let n = t.trim().toLowerCase();
+	return n ? e.filter((e) => e.label.toLowerCase().includes(n)) : e;
+}
+function p(e, t) {
+	let n = t.trim().toLowerCase(), r = n ? e.toLowerCase().indexOf(n) : -1;
+	return r < 0 ? [
+		e,
+		"",
+		""
+	] : [
+		e.slice(0, r),
+		e.slice(r, r + n.length),
+		e.slice(r + n.length)
+	];
+}
+function m(e) {
+	return e === 1 ? "1 resultaat" : `${e} resultaten`;
+}
+var h = "lintje-combobox-list", g = (e) => `lintje-combobox-option-${e}`, _ = class extends c {
+	constructor(...e) {
+		super(...e), this.value = null, this.placeholder = "", this.remote = !1, this.loadingLabel = "Opties ophalen", this.emptyLabel = "Niets gevonden voor", this.stacked = !1, this.open = !1, this.text = null, this.active = -1, this.loading = !1, this.chosenLabel = "", this.typing = new u(this);
+	}
+	static {
+		this.styles = [
+			e,
+			r(l),
+			r(d)
+		];
+	}
+	static {
+		this.properties = {
+			value: { type: String },
+			options: { attribute: !1 },
+			placeholder: { type: String },
+			remote: { type: Boolean },
+			loadingLabel: {
+				type: String,
+				attribute: "loading-label"
+			},
+			emptyLabel: {
+				type: String,
+				attribute: "empty-label"
+			},
+			stacked: {
+				type: Boolean,
+				reflect: !0
+			},
+			open: {
+				type: Boolean,
+				reflect: !0
+			},
+			text: { state: !0 },
+			active: { state: !0 },
+			loading: { state: !0 }
+		};
+	}
+	get visible() {
+		let e = this.options ?? [];
+		return this.remote ? e : f(e, this.text ?? "");
+	}
+	get chosenText() {
+		return this.value === null || this.value === void 0 ? "" : (this.options ?? []).find((e) => e.value === this.value)?.label ?? (this.chosenLabel || this.value);
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("options") && this.remote && (this.loading = !1), this.disabled && (this.open = !1);
+		let t = this.visible.length;
+		this.active >= t && (this.active = t - 1);
+	}
+	updated(e) {
+		super.updated(e), !(!e.has("active") || this.active < 0) && this.renderRoot.querySelector(`#${g(this.active)}`)?.scrollIntoView?.({ block: "nearest" });
+	}
+	choose(e) {
+		this.typing.cancel(), this.value = e.value, this.chosenLabel = e.label, this.text = null, this.open = !1, this.active = -1, this.loading = !1, this.commit(e.value);
+	}
+	restore() {
+		this.typing.cancel(), this.text = null, this.open = !1, this.active = -1, this.loading = !1;
+	}
+	onInput(e) {
+		if (this.text = e.target.value, this.open = !0, this.remote) {
+			let e = this.text;
+			this.loading = !0, this.typing.schedule(() => this.emit("lintje-search", { query: e }));
+		}
+		this.active = this.visible.length ? 0 : -1;
+	}
+	onKeydown(e) {
+		let t = this.visible.length;
+		switch (e.key) {
+			case "ArrowDown":
+				if (e.preventDefault(), this.open) this.active = Math.min(this.active + 1, t - 1);
+				else {
+					this.open = !0;
+					let e = this.visible.findIndex((e) => e.value === this.value);
+					this.active = e >= 0 ? e : t ? 0 : -1;
+				}
+				return;
+			case "ArrowUp":
+				if (!this.open) return;
+				e.preventDefault(), this.active = Math.max(this.active - 1, 0);
+				return;
+			case "Home":
+			case "End":
+				if (!this.open || !t) return;
+				e.preventDefault(), this.active = e.key === "Home" ? 0 : t - 1;
+				return;
+			case "Enter":
+			case "Tab":
+				if (!this.open || this.loading || this.active < 0) return;
+				e.key === "Enter" && e.preventDefault(), this.choose(this.visible[this.active]);
+				return;
+			case "Escape":
+				this.text !== null && this.restore();
+				return;
+		}
+	}
+	onBlur() {
+		this.text !== null && this.text.trim() === "" && this.value !== null && (this.typing.cancel(), this.value = null, this.chosenLabel = "", this.commit(null)), this.restore();
+	}
+	onPopoverClose(e) {
+		e.stopPropagation(), this.restore();
+	}
+	renderOption(e, t) {
+		let [r, o, s] = p(e.label, this.text ?? ""), c = e.value === this.value;
+		return i`<li
+      id=${g(t)}
+      class=${a({
+			"lintje-combobox__option": !0,
+			"is-active": t === this.active,
+			"is-selected": c
+		})}
+      role="option"
+      aria-selected=${c ? "true" : "false"}
+      @click=${() => this.choose(e)}
+    >
+      ${r}${o ? i`<strong class="lintje-combobox__match">${o}</strong>` : n}${s}
+    </li>`;
+	}
+	renderList() {
+		if (!this.open) return n;
+		if (this.loading) return i`<div class="lintje-combobox__status">
+        <lintje-spinner label=${this.loadingLabel}></lintje-spinner>
+      </div>`;
+		let e = this.visible;
+		return e.length ? i`<ul
+      id=${h}
+      class="lintje-combobox__list"
+      role="listbox"
+      tabindex="-1"
+      aria-labelledby=${this.labelId}
+    >
+      ${e.map((e, t) => this.renderOption(e, t))}
+    </ul>` : i`<p class="lintje-combobox__empty">${this.emptyLabel} “${this.text ?? ""}”</p>`;
+	}
+	render() {
+		let e = this.open && !this.disabled, t = e && !this.loading && this.visible.length > 0, r = e && !this.loading ? m(this.visible.length) : "";
+		return i`<div class="lintje-field">
+      ${this.renderLabel(this.controlId)}
+      <div class="lintje-combobox">
+        <input
+          type="text"
+          id=${this.controlId}
+          class=${a({
+			"lintje-combobox__control": !0,
+			"is-error": !!this.error
+		})}
+          .value=${s(this.text ?? this.chosenText)}
+          placeholder=${this.placeholder || n}
+          autocomplete="off"
+          role="combobox"
+          aria-expanded=${e ? "true" : "false"}
+          aria-controls=${t ? h : n}
+          aria-autocomplete="list"
+          aria-activedescendant=${t && this.active >= 0 ? g(this.active) : n}
+          aria-labelledby=${this.labelId}
+          aria-describedby=${this.describedBy}
+          aria-invalid=${this.error ? "true" : n}
+          aria-required=${this.required ? "true" : n}
+          ?disabled=${this.disabled}
+          @input=${this.onInput}
+          @keydown=${this.onKeydown}
+          @blur=${this.onBlur}
+          @click=${() => {
+			this.disabled || (this.open = !0);
+		}}
+        />
+        ${o("functioneel-delta-omlaag", {
+			size: 16,
+			className: "lintje-combobox__chevron"
+		})}
+      </div>
+      <!-- A press in the list, on an option or beside one, keeps the focus in the field. -->
+      <lintje-popover
+        match-width
+        ?open=${e}
+        @lintje-close=${this.onPopoverClose}
+        @mousedown=${(e) => e.preventDefault()}
+      >
+        ${this.renderList()}
+      </lintje-popover>
+      <span class="visually-hidden" role="status">${r}</span>
+      ${this.renderFoot()}
+    </div>`;
+	}
+};
+t("lintje-combobox", _);
+//#endregion
+export { _ as LintjeCombobox, f as filterOptions, m as resultsText, p as splitMatch };

package/dist-elements/tag/confirm-dialog.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/overlays/confirm-dialog/confirm-dialog.js'

package/dist-elements/tag/confirm-dialog.js

@@ -0,0 +1,118 @@
+import { Bt as e, Gt as t, Ht as n, It as r, Kt as i, Lt as a, Nt as o, zt as s } from "../chunks/base-rBLTcEIv.js";
+import { n as c, t as l } from "../chunks/focus-trap-w3vCamJ6.js";
+import { t as u } from "../chunks/confirm-dialog-D5EVGuil.js";
+//#region src/components/overlays/confirm-dialog/confirm-dialog.ts
+var d = class extends s {
+	constructor(...e) {
+		super(...e), this.open = !1, this.heading = "", this.confirmLabel = "Bevestigen", this.cancelLabel = "Annuleren", this.tone = "danger", this.busy = !1, this.#e = new a(this, r), this.#t = null, this.#n = new l(), this.#r = (e) => {
+			e.key === "Escape" && this.#n.isTopmost() && this.cancel("escape");
+		};
+	}
+	static {
+		this.styles = n(u);
+	}
+	static {
+		this.properties = {
+			open: {
+				type: Boolean,
+				reflect: !0
+			},
+			heading: { type: String },
+			confirmLabel: {
+				type: String,
+				attribute: "confirm-label"
+			},
+			cancelLabel: {
+				type: String,
+				attribute: "cancel-label"
+			},
+			actionLabel: {
+				type: String,
+				attribute: "action-label"
+			},
+			tone: {
+				type: String,
+				reflect: !0
+			},
+			busy: {
+				type: Boolean,
+				reflect: !0
+			}
+		};
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	cancel(e) {
+		this.busy || this.emit("lintje-close", { reason: e });
+	}
+	disconnectedCallback() {
+		this.#a(), super.disconnectedCallback();
+	}
+	updated(e) {
+		super.updated(e), this.open && !this.#t ? this.#i() : !this.open && this.#t && this.#a();
+	}
+	async #i() {
+		this.#t = o(), document.addEventListener("keydown", this.#r);
+		let e = this.renderRoot.querySelector(".lintje-confirm-dialog");
+		if (!e) return;
+		this.#n.activate(e, { focus: !1 });
+		let t = this.renderRoot.querySelector(".lintje-confirm-dialog__cancel");
+		t && (await t.updateComplete, this.open && this.#n.isTopmost() && c(t).focus());
+	}
+	#a() {
+		this.#t && (document.removeEventListener("keydown", this.#r), this.#t(), this.#t = null, this.#n.deactivate());
+	}
+	render() {
+		if (!this.open) return t;
+		let e = this.#e.matches;
+		return i`<div class="lintje-confirm-dialog__scrim" @click=${() => this.cancel("scrim")}>
+      <div
+        class="lintje-confirm-dialog"
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="lintje-confirm-dialog-heading"
+        aria-describedby="lintje-confirm-dialog-text"
+        tabindex="-1"
+        @click=${(e) => e.stopPropagation()}
+      >
+        <h2 id="lintje-confirm-dialog-heading" class="lintje-confirm-dialog__heading">
+          ${this.heading}
+        </h2>
+        <div id="lintje-confirm-dialog-text" class="lintje-confirm-dialog__text">
+          <slot></slot>
+        </div>
+        <div class="lintje-confirm-dialog__actions">
+          ${this.actionLabel ? i`<lintje-button
+                class="lintje-confirm-dialog__action"
+                variant="tertiary"
+                ?block=${e}
+                ?disabled=${this.busy}
+                @click=${() => this.emit("lintje-action")}
+                >${this.actionLabel}</lintje-button
+              >` : t}
+          <lintje-button
+            class="lintje-confirm-dialog__cancel"
+            variant="secondary"
+            ?block=${e}
+            ?disabled=${this.busy}
+            @click=${() => this.cancel("cancel")}
+            >${this.cancelLabel}</lintje-button
+          >
+          <lintje-button
+            class="lintje-confirm-dialog__confirm"
+            variant=${this.tone === "primary" ? "primary" : "danger"}
+            ?block=${e}
+            ?busy=${this.busy}
+            @click=${() => this.emit("lintje-confirm")}
+            >${this.confirmLabel}</lintje-button
+          >
+        </div>
+      </div>
+    </div>`;
+	}
+};
+e("lintje-confirm-dialog", d);
+//#endregion
+export { d as LintjeConfirmDialog };

package/dist-elements/tag/conflict-alert.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/feedback/conflict-alert/conflict-alert.js'

package/dist-elements/tag/conflict-alert.js

@@ -0,0 +1,101 @@
+import { Bt as e, Gt as t, Ht as n, It as r, Kt as i, Lt as a, zt as o } from "../chunks/base-rBLTcEIv.js";
+import "./announcement.js";
+import "./highlight.js";
+//#region src/components/feedback/conflict-alert/conflict-alert.css?inline
+var s = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-conflict-alert { display: flex; flex-direction: column; gap: var(--space-2); }\n\n/* The gap keeps the buttons' hit areas apart. */\n.lintje-conflict-alert__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }\n\n.lintje-conflict-alert__changes {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  padding: var(--space-3) var(--space-4);\n  border: 1px solid var(--color-border-default);\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n}\n.lintje-conflict-alert__label { margin-bottom: var(--space-1); font-size: 0.875rem; font-weight: 700; }\n.lintje-conflict-alert__versions { overflow-wrap: anywhere; }\n.lintje-conflict-alert__legend { font: var(--text-meta); color: var(--color-text-muted); }\n\n@media (max-width: 767px) {\n  .lintje-conflict-alert__actions { flex-direction: column; align-self: stretch; }\n}\n";
+//#endregion
+//#region src/components/feedback/conflict-alert/conflict-alert.ts
+function c(e, t, n = "dit item") {
+	let r = e || "Iemand anders";
+	return {
+		kind: "warning",
+		title: t ? `${r} heeft ${n} om ${t} gewijzigd.` : `${r} heeft ${n} gewijzigd.`,
+		text: "Jouw wijzigingen zijn nog niet opgeslagen.",
+		live: !0
+	};
+}
+var l = class extends o {
+	constructor(...e) {
+		super(...e), this.item = "dit item", this.changes = [], this.comparing = !1, this.#e = new a(this, r);
+	}
+	static {
+		this.styles = n(s);
+	}
+	static {
+		this.properties = {
+			who: { type: String },
+			when: { type: String },
+			item: { type: String },
+			busy: {
+				type: String,
+				reflect: !0
+			},
+			changes: { attribute: !1 },
+			comparing: { state: !0 }
+		};
+	}
+	#e;
+	firstUpdated() {
+		this.renderRoot.querySelector(".lintje-conflict-alert")?.focus();
+	}
+	compare() {
+		this.comparing = !this.comparing, this.emit("lintje-conflict-compare", { open: this.comparing });
+	}
+	renderChanges() {
+		if (!this.comparing || !this.changes?.length) return t;
+		let e = this.who ? `de versie van ${this.who}` : "de andere versie";
+		return i`<div class="lintje-conflict-alert__changes">
+      ${this.changes.map((t) => i`<div class="lintje-conflict-alert__change">
+          <p class="lintje-conflict-alert__label">${t.label}</p>
+          <p class="lintje-conflict-alert__versions">
+            <lintje-highlight kind="removed" label="jouw versie">${t.mine}</lintje-highlight>
+            <lintje-highlight kind="added" label=${e}>${t.theirs}</lintje-highlight>
+          </p>
+        </div>`)}
+      <p class="lintje-conflict-alert__legend">Doorgehaald: jouw versie · onderstreept: ${e}</p>
+    </div>`;
+	}
+	render() {
+		let e = this.who || "de ander", t = this.busy || "", n = this.#e.matches;
+		return i`<div class="lintje-conflict-alert" tabindex="-1">
+      <lintje-announcement compact .data=${c(this.who, this.when, this.item)}>
+        <div slot="action" class="lintje-conflict-alert__actions">
+          <lintje-button
+            variant="secondary"
+            size="compact"
+            ?block=${n}
+            ?disabled=${!!t}
+            .expanded=${this.comparing}
+            @click=${this.compare}
+            >${this.comparing ? "Verschillen verbergen" : "Verschillen bekijken"}</lintje-button
+          >
+          <lintje-button
+            variant="tertiary"
+            size="compact"
+            ?block=${n}
+            ?busy=${t === "mine"}
+            ?disabled=${t === "theirs"}
+            @click=${() => this.emit("lintje-conflict-keep-mine")}
+            >Mijn versie opslaan<span class="visually-hidden">
+              en die van ${e} overschrijven</span
+            ></lintje-button
+          >
+          <lintje-button
+            variant="tertiary"
+            size="compact"
+            ?block=${n}
+            ?busy=${t === "theirs"}
+            ?disabled=${t === "mine"}
+            @click=${() => this.emit("lintje-conflict-take-theirs")}
+            >Hun versie laden<span class="visually-hidden"> en mijn wijzigingen weggooien</span
+            ></lintje-button
+          >
+        </div>
+      </lintje-announcement>
+      ${this.renderChanges()}
+    </div>`;
+	}
+};
+e("lintje-conflict-alert", l);
+//#endregion
+export { l as LintjeConflictAlert, c as conflictText };

package/dist-elements/tag/copy-button.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/actions/copy-button/copy-button.js'

package/dist-elements/tag/copy-button.js

@@ -0,0 +1,115 @@
+import { Bt as e, Gt as t, Ht as n, Kt as r, Z as i, zt as a } from "../chunks/base-rBLTcEIv.js";
+import "./toast.js";
+import { t as o } from "../chunks/copied-7BXYVkXT.js";
+//#region src/components/actions/copy-button/copy-button.css?inline
+var s = ":host { display: inline-flex; vertical-align: middle; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* One cell as wide as the longer label, so the width holds when the label changes. */\n.lintje-copy-button__labels { display: inline-grid; }\n.lintje-copy-button__label { grid-area: 1 / 1; text-align: center; }\n.lintje-copy-button__label.is-hidden { visibility: hidden; }\n", c = "Kopiëren", l = "Gekopieerd", u = "Kopiëren is niet gelukt. Selecteer de tekst en kopieer hem zelf.", d = class extends a {
+	constructor(...e) {
+		super(...e), this.iconOnly = !1, this.size = "regular", this.disabled = !1, this.copied = !1, this.failed = !1, this.status = "";
+	}
+	static {
+		this.styles = n(s);
+	}
+	static {
+		this.properties = {
+			text: { type: String },
+			target: {
+				type: String,
+				attribute: "for"
+			},
+			iconOnly: {
+				type: Boolean,
+				attribute: "icon-only",
+				reflect: !0
+			},
+			variant: { type: String },
+			size: { type: String },
+			disabled: {
+				type: Boolean,
+				reflect: !0
+			},
+			copied: { state: !0 },
+			failed: { state: !0 },
+			status: { state: !0 }
+		};
+	}
+	disconnectedCallback() {
+		clearTimeout(this.timer), clearTimeout(this.gap), this.watch?.disconnect(), this.watch = void 0, super.disconnectedCallback();
+	}
+	get source() {
+		return this.target ? this.getRootNode().getElementById?.(this.target) ?? null : null;
+	}
+	updated(e) {
+		super.updated(e);
+		let t = !(this.text || !this.target || !this.isConnected || this.source);
+		t && !this.watch ? (this.watch = new MutationObserver(() => {
+			this.source && this.requestUpdate();
+		}), this.watch.observe(this.getRootNode(), {
+			childList: !0,
+			subtree: !0,
+			attributes: !0,
+			attributeFilter: ["id"]
+		})) : !t && this.watch && (this.watch.disconnect(), this.watch = void 0);
+	}
+	resolveText() {
+		return this.text ? this.text : this.source?.textContent?.trim() ?? "";
+	}
+	get unavailable() {
+		return this.disabled || !this.text && !this.source;
+	}
+	async copy() {
+		if (this.unavailable) return;
+		let e = this.resolveText();
+		try {
+			if (!e || !navigator.clipboard) throw Error("no clipboard");
+			await navigator.clipboard.writeText(e);
+		} catch {
+			this.failed = !0, this.emit("lintje-copy-error", e);
+			return;
+		}
+		this.failed = !1, this.copied = !0, clearTimeout(this.timer), clearTimeout(this.gap), this.timer = setTimeout(() => {
+			this.copied = !1, this.status = "";
+		}, o), this.status === l ? (this.status = "", this.gap = setTimeout(() => this.status = l, 100)) : this.status = l, this.emit("lintje-copy", e);
+	}
+	onToastClose(e) {
+		e.stopPropagation(), this.failed = !1;
+	}
+	renderButton() {
+		let e = this.copied ? "functioneel-vinkje" : "functioneel-kopieren";
+		return this.iconOnly ? r`<lintje-icon-button
+        variant=${this.variant === "flat" ? "flat" : "outlined"}
+        icon=${e}
+        label=${this.copied ? l : c}
+        ?disabled=${this.unavailable}
+        @click=${this.copy}
+      ></lintje-icon-button>` : r`<lintje-button
+      variant=${this.variant === "primary" ? "primary" : "secondary"}
+      size=${this.size === "compact" ? "compact" : "regular"}
+      icon=${e}
+      ?disabled=${this.unavailable}
+      @click=${this.copy}
+      ><span class="lintje-copy-button__labels"
+        ><span
+          class=${i({
+			"lintje-copy-button__label": !0,
+			"is-hidden": this.copied
+		})}
+          >${c}</span
+        ><span
+          class=${i({
+			"lintje-copy-button__label": !0,
+			"is-hidden": !this.copied
+		})}
+          >${l}</span
+        ></span
+      ></lintje-button
+    >`;
+	}
+	render() {
+		return r`${this.renderButton()}<span class="visually-hidden" role="status"
+        >${this.status || t}</span
+      >${this.failed ? r`<lintje-toast kind="error" @lintje-close=${this.onToastClose}>${u}</lintje-toast>` : t}`;
+	}
+};
+e("lintje-copy-button", d);
+//#endregion
+export { d as LintjeCopyButton };

package/dist-elements/tag/data-table.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/tables/data-table/data-table.js'