lintje 0.2.0 → 0.3.0

package/dist-elements/tag/code.js

@@ -1,6 +1,6 @@
-import { Bt as e, Gt as t, Ht as n, O as r, Z as i, qt as a } from "../chunks/base-Bg-IFOPG.js";
+import { P as e, Yt as t, Zt as n, en as r, nn as i, st as a } from "../chunks/base-CbmWxUig.js";
 //#region src/components/content/code/code.css?inline
-var o = "/* No syntax colouring: the chart grammar is the only place colour carries meaning. */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* --- */\n\n.lintje-code { position: relative; }\n.lintje-code__language {\n  /* Inside the border, on the block's surface: a long line scrolls under the label. */\n  position: absolute; top: 1px; right: 1px;\n  z-index: 1;\n  padding: calc(var(--space-2) - 1px) calc(var(--space-3) - 1px) var(--space-1) var(--space-2);\n  background: var(--color-bg-subtle);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  color: var(--color-text-muted);\n  pointer-events: none;\n}\n.lintje-code__block {\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-bg-subtle);\n  border: 1px solid var(--color-border-default);\n  border-radius: var(--radius);\n  font-family: var(--font-mono);\n  font-size: 0.875rem;\n  line-height: 1.6;\n  color: var(--color-text-primary);\n  font-variant-numeric: normal;\n  overflow-x: auto;\n  white-space: pre;\n  tab-size: 2;\n}\n.lintje-code--labelled .lintje-code__block { padding-right: var(--space-10); }\n.lintje-code__block.is-wrapped { white-space: pre-wrap; overflow-wrap: anywhere; }\n\n/* Line numbers are a CSS counter, so a copy is only the code. The line spans stay inline and\n   carry their own newline: a block-level line would break twice and blank every second line. */\n.lintje-code__line { counter-increment: lintje-code-line; }\n.lintje-code--numbered .lintje-code__block { counter-reset: lintje-code-line; }\n.lintje-code--numbered .lintje-code__line::before {\n  /* A screen reader reads the code, not a number before each line. */\n  content: counter(lintje-code-line);\n  content: counter(lintje-code-line) / '';\n  display: inline-block;\n  width: var(--space-6);\n  padding-right: var(--space-3);\n  text-align: right;\n  color: var(--color-text-disabled);\n  user-select: none;\n}\n", s = class extends r {
+var o = "/* No syntax colouring: the chart grammar is the only place colour carries meaning. */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* --- */\n\n.lintje-code { position: relative; }\n.lintje-code__language {\n  /* Inside the border, on the block's surface: a long line scrolls under the label. */\n  position: absolute; top: 1px; right: 1px;\n  z-index: 1;\n  padding: calc(var(--space-2) - 1px) calc(var(--space-3) - 1px) var(--space-1) var(--space-2);\n  background: var(--color-bg-subtle);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  color: var(--color-text-muted);\n  pointer-events: none;\n}\n.lintje-code__block {\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-bg-subtle);\n  border: 1px solid var(--color-border-default);\n  border-radius: var(--radius);\n  font-family: var(--font-mono);\n  font-size: 0.875rem;\n  line-height: 1.6;\n  color: var(--color-text-primary);\n  font-variant-numeric: normal;\n  overflow-x: auto;\n  white-space: pre;\n  tab-size: 2;\n}\n.lintje-code--labelled .lintje-code__block { padding-right: var(--space-10); }\n.lintje-code__block.is-wrapped { white-space: pre-wrap; overflow-wrap: anywhere; }\n\n/* Line numbers are a CSS counter, so a copy is only the code. The line spans stay inline and\n   carry their own newline: a block-level line would break twice and blank every second line. */\n.lintje-code__line { counter-increment: lintje-code-line; }\n.lintje-code--numbered .lintje-code__block { counter-reset: lintje-code-line; }\n.lintje-code--numbered .lintje-code__line::before {\n  /* A screen reader reads the code, not a number before each line. */\n  content: counter(lintje-code-line);\n  content: counter(lintje-code-line) / '';\n  display: inline-block;\n  width: var(--space-6);\n  padding-right: var(--space-3);\n  text-align: right;\n  color: var(--color-text-disabled);\n  user-select: none;\n}\n", s = class extends e {
 	constructor(...e) {
 		super(...e), this.numbered = !1, this.wrap = !1;
 	}
@@ -33,28 +33,28 @@ var o = "/* No syntax colouring: the chart grammar is the only place colour carr
 	}
 	render() {
 		let e = this.body.split("\n");
-		return a`<div
-      class=${i({
+		return i`<div
+      class=${a({
 			"lintje-code": !0,
 			"lintje-code--numbered": this.numbered,
 			"lintje-code--labelled": !!this.language
 		})}
     >
-      ${this.language ? a`<span class="lintje-code__language" aria-hidden="true">${this.language}</span>` : t}
+      ${this.language ? i`<span class="lintje-code__language" aria-hidden="true">${this.language}</span>` : r}
       <pre
-        class=${i({
+        class=${a({
 			"lintje-code__block": !0,
 			"is-wrapped": this.wrap
 		})}
         role="region"
         tabindex="0"
         aria-label=${this.name}
-      ><code>${this.numbered ? e.map((t, n) => a`<span class="lintje-code__line"
+      ><code>${this.numbered ? e.map((t, n) => i`<span class="lintje-code__line"
                   >${n < e.length - 1 ? `${t}\n` : t}</span
-                >`) : this.body || a`<slot></slot>`}</code></pre>
+                >`) : this.body || i`<slot></slot>`}</code></pre>
     </div>`;
 	}
 };
-e("lintje-code", s);
+t("lintje-code", s);
 //#endregion
 export { s as LintjeCode };

package/dist-elements/tag/combobox.js

@@ -1,8 +1,8 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, Z as i, et as a, f as o, qt as s } from "../chunks/base-Bg-IFOPG.js";
-import { r as c, t as l } from "../chunks/input-BtuNFSWk.js";
+import { Yt as e, Zt as t, en as n, lt as r, m as i, nn as a, st as o, ut as s } from "../chunks/base-CbmWxUig.js";
+import { r as c, t as l } from "../chunks/input-CRW_exv_.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";
+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 screen and (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) {
@@ -30,9 +30,9 @@ var h = "lintje-combobox-list", g = (e) => `lintje-combobox-option-${e}`, _ = cl
 	}
 	static {
 		this.styles = [
-			e,
-			r(l),
-			r(d)
+			r,
+			t(l),
+			t(d)
 		];
 	}
 	static {
@@ -127,10 +127,10 @@ var h = "lintje-combobox-list", g = (e) => `lintje-combobox-option-${e}`, _ = cl
 		e.stopPropagation(), this.restore();
 	}
 	renderOption(e, t) {
-		let [r, a, o] = p(e.label, this.text ?? ""), c = e.value === this.value;
-		return s`<li
+		let [r, i, s] = p(e.label, this.text ?? ""), c = e.value === this.value;
+		return a`<li
       id=${g(t)}
-      class=${i({
+      class=${o({
 			"lintje-combobox__option": !0,
 			"is-active": t === this.active,
 			"is-selected": c
@@ -139,16 +139,16 @@ var h = "lintje-combobox-list", g = (e) => `lintje-combobox-option-${e}`, _ = cl
       aria-selected=${c ? "true" : "false"}
       @click=${() => this.choose(e)}
     >
-      ${r}${a ? s`<strong class="lintje-combobox__match">${a}</strong>` : n}${o}
+      ${r}${i ? a`<strong class="lintje-combobox__match">${i}</strong>` : n}${s}
     </li>`;
 	}
 	renderList() {
 		if (!this.open) return n;
-		if (this.loading) return s`<div class="lintje-combobox__status">
+		if (this.loading) return a`<div class="lintje-combobox__status">
         <lintje-spinner label=${this.loadingLabel}></lintje-spinner>
       </div>`;
 		let e = this.visible;
-		return e.length ? s`<ul
+		return e.length ? a`<ul
       id=${h}
       class="lintje-combobox__list"
       role="listbox"
@@ -156,21 +156,21 @@ var h = "lintje-combobox-list", g = (e) => `lintje-combobox-option-${e}`, _ = cl
       aria-labelledby=${this.labelId}
     >
       ${e.map((e, t) => this.renderOption(e, t))}
-    </ul>` : s`<p class="lintje-combobox__empty">${this.emptyLabel} “${this.text ?? ""}”</p>`;
+    </ul>` : a`<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 s`<div class="lintje-field">
+		return a`<div class="lintje-field">
       ${this.renderLabel(this.controlId)}
       <div class="lintje-combobox">
         <input
           type="text"
           id=${this.controlId}
-          class=${i({
+          class=${o({
 			"lintje-combobox__control": !0,
 			"is-error": !!this.error
 		})}
-          .value=${o(this.text ?? this.chosenText)}
+          .value=${i(this.text ?? this.chosenText)}
           placeholder=${this.placeholder || n}
           autocomplete="off"
           role="combobox"
@@ -190,7 +190,7 @@ var h = "lintje-combobox-list", g = (e) => `lintje-combobox-option-${e}`, _ = cl
 			this.disabled || (this.open = !0);
 		}}
         />
-        ${a("functioneel-delta-omlaag", {
+        ${s("functioneel-delta-omlaag", {
 			size: 16,
 			className: "lintje-combobox__chevron"
 		})}
@@ -209,6 +209,6 @@ var h = "lintje-combobox-list", g = (e) => `lintje-combobox-option-${e}`, _ = cl
     </div>`;
 	}
 };
-t("lintje-combobox", _);
+e("lintje-combobox", _);
 //#endregion
 export { _ as LintjeCombobox, f as filterOptions, m as resultsText, p as splitMatch };

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

@@ -1,8 +1,8 @@
-import { Bt as e, Gt as t, Ht as n, It as r, Lt as i, qt as a, zt as o } from "../chunks/base-Bg-IFOPG.js";
+import { Gt as e, Jt as t, Kt as n, Yt as r, Zt as i, en as a, nn as o } from "../chunks/base-CbmWxUig.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";
+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 screen and (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") {
@@ -14,12 +14,12 @@ function c(e, t, n = "dit item") {
 		live: !0
 	};
 }
-var l = class extends o {
-	constructor(...e) {
-		super(...e), this.item = "dit item", this.changes = [], this.comparing = !1, this.#e = new i(this, r);
+var l = class extends t {
+	constructor(...t) {
+		super(...t), this.item = "dit item", this.changes = [], this.comparing = !1, this.#e = new n(this, e);
 	}
 	static {
-		this.styles = n(s);
+		this.styles = i(s);
 	}
 	static {
 		this.properties = {
@@ -42,10 +42,10 @@ var l = class extends o {
 		this.comparing = !this.comparing, this.emit("lintje-conflict-compare", { open: this.comparing });
 	}
 	renderChanges() {
-		if (!this.comparing || !this.changes?.length) return t;
+		if (!this.comparing || !this.changes?.length) return a;
 		let e = this.who ? `de versie van ${this.who}` : "de andere versie";
-		return a`<div class="lintje-conflict-alert__changes">
-      ${this.changes.map((t) => a`<div class="lintje-conflict-alert__change">
+		return o`<div class="lintje-conflict-alert__changes">
+      ${this.changes.map((t) => o`<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>
@@ -57,8 +57,8 @@ var l = class extends o {
 	}
 	render() {
 		let e = this.who || "de ander", t = this.busy || "", n = this.#e.matches;
-		return a`<div class="lintje-conflict-alert" tabindex="-1">
-      <lintje-announcement compact .data=${c(this.who, this.when, this.item)}>
+		return o`<div class="lintje-conflict-alert" tabindex="-1">
+      <lintje-announcement .data=${c(this.who, this.when, this.item)}>
         <div slot="action" class="lintje-conflict-alert__actions">
           <lintje-button
             variant="secondary"
@@ -96,6 +96,6 @@ var l = class extends o {
     </div>`;
 	}
 };
-e("lintje-conflict-alert", l);
+r("lintje-conflict-alert", l);
 //#endregion
 export { l as LintjeConflictAlert, c as conflictText };

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

@@ -1,13 +1,13 @@
-import { Bt as e, Gt as t, Ht as n, Z as r, qt as i, zt as a } from "../chunks/base-Bg-IFOPG.js";
+import { Jt as e, Yt as t, Zt as n, en as r, nn as i, nt as a, st as o } from "../chunks/base-CbmWxUig.js";
 import "./toast.js";
-import { t as o } from "../chunks/copied-7BXYVkXT.js";
+import { t as s } 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 {
+var c = ":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", l = "Kopiëren", u = "Gekopieerd", d = "Kopiëren is niet gelukt. Selecteer de tekst en kopieer hem zelf.", f = class extends e {
 	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);
+		this.styles = [n(c), n(a)];
 	}
 	static {
 		this.properties = {
@@ -68,7 +68,7 @@ var s = ":host { display: inline-flex; vertical-align: middle; }\n:host([hidden]
 		}
 		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);
+		}, s), this.status === u ? (this.status = "", this.gap = setTimeout(() => this.status = u, 100)) : this.status = u, this.emit("lintje-copy", e);
 	}
 	onToastClose(e) {
 		e.stopPropagation(), this.failed = !1;
@@ -78,7 +78,7 @@ var s = ":host { display: inline-flex; vertical-align: middle; }\n:host([hidden]
 		return this.iconOnly ? i`<lintje-icon-button
         variant=${this.variant === "flat" ? "flat" : "outlined"}
         icon=${e}
-        label=${this.copied ? l : c}
+        label=${this.copied ? u : l}
         ?disabled=${this.unavailable}
         @click=${this.copy}
       ></lintje-icon-button>` : i`<lintje-button
@@ -89,27 +89,27 @@ var s = ":host { display: inline-flex; vertical-align: middle; }\n:host([hidden]
       @click=${this.copy}
       ><span class="lintje-copy-button__labels"
         ><span
-          class=${r({
+          class=${o({
 			"lintje-copy-button__label": !0,
 			"is-hidden": this.copied
 		})}
-          >${c}</span
+          >${l}</span
         ><span
-          class=${r({
+          class=${o({
 			"lintje-copy-button__label": !0,
 			"is-hidden": !this.copied
 		})}
-          >${l}</span
+          >${u}</span
         ></span
       ></lintje-button
     >`;
 	}
 	render() {
 		return i`${this.renderButton()}<span class="visually-hidden" role="status"
-        >${this.status || t}</span
-      >${this.failed ? i`<lintje-toast kind="error" @lintje-close=${this.onToastClose}>${u}</lintje-toast>` : t}`;
+        >${this.status || r}</span
+      >${this.failed ? i`<lintje-toast kind="error" @lintje-close=${this.onToastClose}>${d}</lintje-toast>` : r}`;
 	}
 };
-e("lintje-copy-button", d);
+t("lintje-copy-button", f);
 //#endregion
-export { d as LintjeCopyButton };
+export { f as LintjeCopyButton };