lintje 0.5.1 → 0.7.0

package/dist-elements/tag/tabs.js

@@ -1,172 +1,60 @@
-import { H as e, Jt as t, Yt as n, Zt as r, en as i, lt as a, nn as o, st as s, ut as c } from "../chunks/base-Bd2pmq86.js";
-//#region src/components/layout/tabs/tabs.css?inline
-var l = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* `position: relative` makes the row the tabs' offset parent, for scrolling the chosen tab into sight. */\n.lintje-tabs__list {\n  position: relative;\n  display: flex; flex-wrap: wrap;\n  border-bottom: 1px solid var(--color-border-heavy);\n}\n\n/* A transparent bottom edge in reserve, so the chosen tab's line takes no space of its own. */\n.lintje-tabs__tab {\n  display: inline-flex; align-items: center; gap: var(--space-2);\n  height: var(--h-touch);\n  padding: 0 var(--space-4);\n  background: transparent;\n  color: var(--color-text-primary);\n  border-bottom: 3px solid transparent;\n  font: var(--text-ui);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: background var(--dur-hover) var(--ease-in-motion),\n              border-color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-tabs__tab:hover:not(.is-active):not(.is-disabled) {\n  background: var(--color-bg-subtle);\n  border-bottom-color: var(--color-border-heavy);\n}\n\n/* The chosen tab: the line is a line (3:1) and the word is text (4.5:1), hence two tokens. */\n.lintje-tabs__tab.is-active {\n  border-bottom-color: var(--color-accent-line);\n  color: var(--color-accent-text);\n  font-weight: 700;\n}\n\n.lintje-tabs__tab.is-disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n\n.lintje-tabs__panel { padding-top: var(--space-4); }\n.lintje-tabs__panel.is-pressed:focus-visible { outline: none; }\n\n@media screen and (max-width: 767px) {\n  .lintje-tabs__list {\n    flex-wrap: nowrap;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n  .lintje-tabs__list::-webkit-scrollbar { display: none; }\n  .lintje-tabs__tab { flex: 0 0 auto; }\n  .lintje-tabs__list.is-scroll-start { box-shadow: var(--shadow-scroll-start); }\n  .lintje-tabs__list.is-scroll-end { box-shadow: var(--shadow-scroll-end); }\n  .lintje-tabs__list.is-scroll-start.is-scroll-end {\n    box-shadow: var(--shadow-scroll-start), var(--shadow-scroll-end);\n  }\n}\n\n/* Forced colours: the chosen tab's line turns Highlight, a disabled tab GrayText. */\n@media (forced-colors: active) {\n  .lintje-tabs__tab.is-active { border-bottom-color: Highlight; }\n  .lintje-tabs__tab.is-disabled { color: GrayText; }\n}\n\n/* --- The panel variant --------------------------------------------------------\n   Large tabs that head a bordered panel. The chosen tab is the panel's own surface and runs into\n   it; the others stand on the subtle fill. No line: surface, accent word and weight say it. */\n.lintje-tabs--panel {\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n}\n.lintje-tabs--panel .lintje-tabs__list {\n  flex-wrap: nowrap;\n  background: var(--color-bg-subtle);\n  border-bottom-color: var(--color-border-default);\n}\n.lintje-tabs--panel .lintje-tabs__tab {\n  flex: 1 1 0;\n  min-width: 0;\n  height: auto;\n  min-height: var(--h-touch);\n  margin-bottom: -1px;\n  align-items: flex-start;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-5);\n  border-right: 1px solid var(--color-border-default);\n  border-bottom: 1px solid var(--color-border-default);\n  white-space: normal;\n  text-align: left;\n}\n.lintje-tabs--panel .lintje-tabs__tab:last-child { border-right: 0; }\n.lintje-tabs--panel .lintje-tabs__tab:hover:not(.is-active):not(.is-disabled) {\n  background: var(--color-bg-subtle);\n  border-bottom-color: var(--color-border-default);\n}\n.lintje-tabs--panel .lintje-tabs__tab:hover:not(.is-active):not(.is-disabled) .lintje-tabs__label {\n  text-decoration: underline;\n}\n/* The bottom edge takes the surface, so the tab and the panel are one shape. */\n.lintje-tabs--panel .lintje-tabs__tab.is-active {\n  background: var(--color-bg-surface);\n  border-bottom-color: var(--color-bg-surface);\n  color: var(--color-accent-text);\n}\n.lintje-tabs__icon { flex: none; }\n.lintje-tabs__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n.lintje-tabs__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }\n.lintje-tabs__hint { font: var(--text-small); color: var(--color-text-muted); }\n.lintje-tabs--panel .lintje-tabs__panel { padding: var(--space-6); }\n\n@media screen and (max-width: 767px) {\n  .lintje-tabs--panel .lintje-tabs__tab {\n    flex-direction: column;\n    align-items: center;\n    gap: var(--space-2);\n    padding: var(--space-3) var(--space-2);\n    text-align: center;\n  }\n  .lintje-tabs--panel .lintje-tabs__text { align-items: center; }\n  .lintje-tabs--panel .lintje-tabs__head { justify-content: center; }\n  .lintje-tabs--panel .lintje-tabs__hint { display: none; }\n  .lintje-tabs--panel .lintje-tabs__panel { padding: var(--space-4); }\n}\n\n/* Forced colours drop the surface: the chosen tab's label is underlined instead. */\n@media (forced-colors: active) {\n  .lintje-tabs--panel .lintje-tabs__tab.is-active .lintje-tabs__label { text-decoration: underline; }\n}\n";
-//#endregion
-//#region src/components/layout/tabs/tabs.ts
-function u(e, t, n) {
-	return {
-		start: e > 1,
-		end: e + t < n - 1
-	};
-}
-function d(e, t, n, r) {
-	return e < n ? e : e + t > n + r ? e + t - r : n;
-}
-var f = class extends t {
-	constructor(...e) {
-		super(...e), this.tabs = [], this.label = "", this.variant = "line", this.edges = {
-			start: !1,
-			end: !1
-		}, this.#e = null, this.#t = !1;
-	}
-	static {
-		this.styles = [a, r(l)];
-	}
-	static {
-		this.properties = {
-			tabs: { attribute: !1 },
-			value: { type: String },
-			label: { type: String },
-			variant: {
-				type: String,
-				reflect: !0
-			},
-			edges: { state: !0 }
-		};
-	}
-	#e;
-	#t;
-	onPanelFocus(e) {
-		e.currentTarget.classList.toggle("is-pressed", this.#t), this.#t = !1;
-	}
-	get selectedIndex() {
-		let e = this.tabs.findIndex((e) => e.value === this.value);
-		return e < 0 ? 0 : e;
-	}
-	get isNav() {
-		return this.tabs.length > 0 && this.tabs.every((e) => !!e.href);
-	}
-	get list() {
-		return this.renderRoot.querySelector(".lintje-tabs__list");
-	}
-	tabElement(e) {
-		return this.renderRoot.querySelector(`#tab-${e}`);
-	}
-	disconnectedCallback() {
-		this.#e?.disconnect(), this.#e = null, super.disconnectedCallback();
-	}
-	choose(e, t) {
-		let n = this.tabs[e];
-		n && !n.disabled && (this.emit("lintje-tab-change", n.value), n.href && this.followLink(n.href, t));
-	}
-	onClick(t, n) {
-		let r = this.tabs[n];
-		r && (!r.href || r.disabled || e(t)) && this.choose(n, t);
-	}
-	onKeydown(e) {
-		let t = this.tabs.length;
-		if (!t) return;
-		let n = this.shadowRoot?.activeElement, r = Math.max(0, this.tabs.findIndex((e, t) => this.tabElement(t) === n)), i = null;
-		e.key === "ArrowRight" ? i = (r + 1) % t : e.key === "ArrowLeft" ? i = (r - 1 + t) % t : e.key === "Home" ? i = 0 : e.key === "End" && (i = t - 1), i !== null && (e.preventDefault(), this.tabElement(i)?.focus(), this.tabs[i]?.href || this.choose(i));
-	}
-	measureEdges() {
-		let e = this.list;
-		if (!e) return;
-		let t = u(e.scrollLeft, e.clientWidth, e.scrollWidth);
-		(t.start !== this.edges.start || t.end !== this.edges.end) && (this.edges = t);
-	}
-	firstUpdated() {
-		let e = this.list;
-		e && typeof ResizeObserver < "u" && (this.#e = new ResizeObserver(() => this.measureEdges()), this.#e.observe(e));
-	}
-	updated(e) {
-		if (super.updated(e), !e.has("value") && !e.has("tabs")) return;
-		let t = this.list, n = this.tabElement(this.selectedIndex);
-		t && n && t.scrollWidth > t.clientWidth && (t.scrollLeft = d(n.offsetLeft, n.offsetWidth, t.scrollLeft, t.clientWidth)), this.measureEdges();
-	}
-	renderTab(e, t, n) {
-		let r = s({
-			"lintje-tabs__tab": !0,
-			"focus-inset": !0,
-			"is-active": n,
-			"is-disabled": !!e.disabled
-		}), a = o`<span class="lintje-tabs__label">${e.label}</span>${typeof e.count == "number" ? o`<lintje-badge variant="count">${e.count}</lintje-badge>` : i}${e.badge ? o`<lintje-badge tone="info">${e.badge}</lintje-badge>` : i}`, l = this.variant === "panel" ? o`${e.icon ? c(e.icon, {
-			size: 24,
-			className: "lintje-tabs__icon"
-		}) : i}<span
+import{U as e,cn as t,en as n,gt as r,ht as i,on as a,pt as o,rn as s,tn as c}from"../chunks/base-BsZyWDre.js";var l=`:host{min-width:0;display:block}:host([hidden]){display:none}.lintje-tabs__list{border-bottom:1px solid var(--color-border-heavy);flex-wrap:wrap;display:flex;position:relative}.lintje-tabs__tab{align-items:center;gap:var(--space-2);height:var(--h-touch);padding:0 var(--space-4);color:var(--color-text-primary);font:var(--text-ui);white-space:nowrap;transition:background var(--dur-hover) var(--ease-in-motion), border-color var(--dur-hover) var(--ease-in-motion);background:0 0;border-bottom:3px solid #0000;text-decoration:none;display:inline-flex}.lintje-tabs__tab:hover:not(.is-active):not(.is-disabled){background:var(--color-bg-subtle);border-bottom-color:var(--color-border-heavy)}.lintje-tabs__tab.is-active{border-bottom-color:var(--color-accent-line);color:var(--color-accent-text);font-weight:700}.lintje-tabs__tab.is-disabled{color:var(--color-text-disabled);cursor:not-allowed}.lintje-tabs__panel{padding-top:var(--space-4)}.lintje-tabs__panel.is-pressed:focus-visible{outline:none}@media screen and (width<=767px){.lintje-tabs__list{scrollbar-width:none;flex-wrap:nowrap;overflow-x:auto}.lintje-tabs__list::-webkit-scrollbar{display:none}.lintje-tabs__tab{flex:none}.lintje-tabs__list.is-scroll-start{box-shadow:var(--shadow-scroll-start)}.lintje-tabs__list.is-scroll-end{box-shadow:var(--shadow-scroll-end)}.lintje-tabs__list.is-scroll-start.is-scroll-end{box-shadow:var(--shadow-scroll-start), var(--shadow-scroll-end)}}@media (forced-colors:active){.lintje-tabs__tab.is-active{border-bottom-color:highlight}.lintje-tabs__tab.is-disabled{color:graytext}}.lintje-tabs--panel{background:var(--color-bg-surface);border:1px solid var(--color-border-default)}.lintje-tabs--panel .lintje-tabs__list{background:var(--color-bg-subtle);border-bottom-color:var(--color-border-default);flex-wrap:nowrap}.lintje-tabs--panel .lintje-tabs__tab{min-width:0;height:auto;min-height:var(--h-touch);align-items:flex-start;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-right:1px solid var(--color-border-default);border-bottom:1px solid var(--color-border-default);white-space:normal;text-align:left;flex:1 1 0;margin-bottom:-1px}.lintje-tabs--panel .lintje-tabs__tab:last-child{border-right:0}.lintje-tabs--panel .lintje-tabs__tab:hover:not(.is-active):not(.is-disabled){background:var(--color-bg-subtle);border-bottom-color:var(--color-border-default)}.lintje-tabs--panel .lintje-tabs__tab:hover:not(.is-active):not(.is-disabled) .lintje-tabs__label{text-decoration:underline}.lintje-tabs--panel .lintje-tabs__tab.is-active{background:var(--color-bg-surface);border-bottom-color:var(--color-bg-surface);color:var(--color-accent-text)}.lintje-tabs__icon{flex:none}.lintje-tabs__text{flex-direction:column;gap:2px;min-width:0;display:flex}.lintje-tabs__head{align-items:center;gap:var(--space-1) var(--space-2);flex-wrap:wrap;display:flex}.lintje-tabs__hint{font:var(--text-small);color:var(--color-text-muted)}.lintje-tabs--panel .lintje-tabs__panel{padding:var(--space-6)}@media screen and (width<=767px){.lintje-tabs--panel .lintje-tabs__tab{align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-2);text-align:center;flex-direction:column}.lintje-tabs--panel .lintje-tabs__text{align-items:center}.lintje-tabs--panel .lintje-tabs__head{justify-content:center}.lintje-tabs--panel .lintje-tabs__hint{display:none}.lintje-tabs--panel .lintje-tabs__panel{padding:var(--space-4)}}@media (forced-colors:active){.lintje-tabs--panel .lintje-tabs__tab.is-active .lintje-tabs__label{text-decoration:underline}}`;function u(e,t,n){return{start:e>1,end:e+t<n-1}}function d(e,t,n,r){return e<n?e:e+t>n+r?e+t-r:n}var f=class extends n{constructor(...e){super(...e),this.tabs=[],this.label=``,this.variant=`line`,this.#e=null,this.#t=!1}static{this.styles=[i,s(l)]}static{this.properties={tabs:{attribute:!1},value:{type:String},label:{type:String},variant:{type:String,reflect:!0}}}#e;#t;onPanelFocus(e){e.currentTarget.classList.toggle(`is-pressed`,this.#t),this.#t=!1}get selectedIndex(){let e=this.tabs.findIndex(e=>e.value===this.value);return e<0?0:e}get isNav(){return this.tabs.length>0&&this.tabs.every(e=>!!e.href)}get list(){return this.renderRoot.querySelector(`.lintje-tabs__list`)}tabElement(e){return this.renderRoot.querySelector(`#tab-${e}`)}disconnectedCallback(){this.#e?.disconnect(),this.#e=null,super.disconnectedCallback()}choose(e,t){let n=this.tabs[e];n&&!n.disabled&&(this.emit(`lintje-tab-change`,n.value),n.href&&this.followLink(n.href,t))}onClick(t,n){let r=this.tabs[n];r&&(!r.href||r.disabled||e(t))&&this.choose(n,t)}onKeydown(e){let t=this.tabs.length;if(!t)return;let n=this.shadowRoot?.activeElement,r=Math.max(0,this.tabs.findIndex((e,t)=>this.tabElement(t)===n)),i=null;e.key===`ArrowRight`?i=(r+1)%t:e.key===`ArrowLeft`?i=(r-1+t)%t:e.key===`Home`?i=0:e.key===`End`&&(i=t-1),i!==null&&(e.preventDefault(),this.tabElement(i)?.focus(),this.tabs[i]?.href||this.choose(i))}measureEdges(){let e=this.list;if(!e)return;let t=u(e.scrollLeft,e.clientWidth,e.scrollWidth);e.classList.toggle(`is-scroll-start`,t.start),e.classList.toggle(`is-scroll-end`,t.end)}firstUpdated(){let e=this.list;e&&typeof ResizeObserver<`u`&&(this.#e=new ResizeObserver(()=>this.measureEdges()),this.#e.observe(e))}updated(e){super.updated(e);let t=this.list,n=this.tabElement(this.selectedIndex);(e.has(`value`)||e.has(`tabs`))&&t&&n&&t.scrollWidth>t.clientWidth&&(t.scrollLeft=d(n.offsetLeft,n.offsetWidth,t.scrollLeft,t.clientWidth)),this.measureEdges()}renderTab(e,n,i){let s=o({"lintje-tabs__tab":!0,"focus-inset":!0,"is-active":i,"is-disabled":!!e.disabled}),c=t`<span class="lintje-tabs__label">${e.label}</span>${typeof e.count==`number`?t`<lintje-badge variant="count">${e.count}</lintje-badge>`:a}${e.badge?t`<lintje-badge tone="info">${e.badge}</lintje-badge>`:a}`,l=this.variant===`panel`?t`${e.icon?r(e.icon,{size:24,className:`lintje-tabs__icon`}):a}<span
               class="lintje-tabs__text"
-              ><span class="lintje-tabs__head">${a}</span>${e.hint ? o`<span class="lintje-tabs__hint">${e.hint}</span>` : i}</span
-            >` : a;
-		return this.isNav ? e.disabled ? o`<a id="tab-${t}" class=${r} role="link" aria-disabled="true">${l}</a>` : o`<a
-            id="tab-${t}"
-            class=${r}
+              ><span class="lintje-tabs__head">${c}</span>${e.hint?t`<span class="lintje-tabs__hint">${e.hint}</span>`:a}</span
+            >`:c;return this.isNav?e.disabled?t`<a id="tab-${n}" class=${s} role="link" aria-disabled="true">${l}</a>`:t`<a
+            id="tab-${n}"
+            class=${s}
             href=${e.href}
-            aria-current=${n ? "page" : i}
-            @click=${(e) => this.onClick(e, t)}
+            aria-current=${i?`page`:a}
+            @click=${e=>this.onClick(e,n)}
             >${l}</a
-          >` : e.href && !e.disabled ? o`<a
-        id="tab-${t}"
-        class=${r}
+          >`:e.href&&!e.disabled?t`<a
+        id="tab-${n}"
+        class=${s}
         role="tab"
         href=${e.href}
-        aria-selected=${String(n)}
-        aria-controls="panel-${t}"
-        tabindex=${n ? 0 : -1}
-        @click=${(e) => this.onClick(e, t)}
+        aria-selected=${String(i)}
+        aria-controls="panel-${n}"
+        tabindex=${i?0:-1}
+        @click=${e=>this.onClick(e,n)}
         >${l}</a
-      >` : o`<button
-      id="tab-${t}"
+      >`:t`<button
+      id="tab-${n}"
       type="button"
-      class=${r}
+      class=${s}
       role="tab"
-      aria-selected=${String(n)}
-      aria-controls="panel-${t}"
-      aria-disabled=${e.disabled ? "true" : i}
-      tabindex=${n ? 0 : -1}
-      @click=${(e) => this.onClick(e, t)}
+      aria-selected=${String(i)}
+      aria-controls="panel-${n}"
+      aria-disabled=${e.disabled?`true`:a}
+      tabindex=${i?0:-1}
+      @click=${e=>this.onClick(e,n)}
     >
       ${l}
-    </button>`;
-	}
-	render() {
-		let e = this.selectedIndex, t = this.isNav, n = o`<div
-      class=${s({
-			"lintje-tabs__list": !0,
-			"is-scroll-start": this.edges.start,
-			"is-scroll-end": this.edges.end
-		})}
-      role=${t ? i : "tablist"}
-      aria-label=${t ? i : this.label || i}
-      @keydown=${t ? i : this.onKeydown}
+    </button>`}render(){let e=this.selectedIndex,n=this.isNav,r=t`<div
+      class="lintje-tabs__list"
+      role=${n?a:`tablist`}
+      aria-label=${n?a:this.label||a}
+      @keydown=${n?a:this.onKeydown}
       @scroll=${this.measureEdges}
     >
-      ${this.tabs.map((t, n) => this.renderTab(t, n, n === e))}
-    </div>`, r = s({
-			"lintje-tabs": !0,
-			"lintje-tabs--panel": this.variant === "panel"
-		});
-		return t ? o`<div class=${r}>
-        <nav aria-label=${this.label || i}>${n}</nav>
+      ${this.tabs.map((t,n)=>this.renderTab(t,n,n===e))}
+    </div>`,i=o({"lintje-tabs":!0,"lintje-tabs--panel":this.variant===`panel`});return n?t`<div class=${i}>
+        <nav aria-label=${this.label||a}>${r}</nav>
         <div class="lintje-tabs__panel"><slot name=${this.tabs[e].value}></slot></div>
-      </div>` : o`<div class=${r}>
-      ${n}
-      ${this.tabs.map((t, n) => o`<div
-          id="panel-${n}"
+      </div>`:t`<div class=${i}>
+      ${r}
+      ${this.tabs.map((n,r)=>t`<div
+          id="panel-${r}"
           class="lintje-tabs__panel"
           role="tabpanel"
-          aria-labelledby="tab-${n}"
+          aria-labelledby="tab-${r}"
           tabindex="0"
-          ?hidden=${n !== e}
-          @pointerdown=${() => this.#t = !0}
-          @pointerup=${() => this.#t = !1}
+          ?hidden=${r!==e}
+          @pointerdown=${()=>this.#t=!0}
+          @pointerup=${()=>this.#t=!1}
           @focus=${this.onPanelFocus}
-          @blur=${(e) => e.currentTarget.classList.remove("is-pressed")}
+          @blur=${e=>e.currentTarget.classList.remove(`is-pressed`)}
         >
-          <slot name=${t.value}></slot>
+          <slot name=${n.value}></slot>
         </div>`)}
-    </div>`;
-	}
-};
-n("lintje-tabs", f);
-//#endregion
-export { f as LintjeTabs, u as scrollEdges, d as scrollToShow };
+    </div>`}};c(`lintje-tabs`,f);export{f as LintjeTabs,u as scrollEdges,d as scrollToShow};

package/dist-elements/tag/tag-input.js

@@ -1,239 +1,61 @@
-import { Yt as e, Zt as t, en as n, lt as r, nn as i, s as a, st as o, ut as s } from "../chunks/base-Bd2pmq86.js";
-import { n as c } from "../chunks/input-KqBT3qWD.js";
-import { t as l } from "../chunks/input-Dg1o0Sfu.js";
-import { filterOptions as u, splitMatch as d } from "./combobox.js";
-//#region src/components/inputs/tag-input/tag-input.css?inline
-var f = "/* The keyword field: chips and the typing part in one box that grows in height. */\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/* The padding centres a chip in the control height; wrapped chips grow the box. */\n.lintje-tag-input {\n  display: flex; flex-wrap: wrap; align-items: center;\n  gap: var(--space-2);\n  min-height: var(--h-control);\n  padding: calc((var(--h-control) - var(--h-chip-field)) / 2 - 1px) var(--space-2);\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}\n/* The ring is around the whole field; a chip draws it around itself when its cross has the focus. */\n.lintje-tag-input:has(.lintje-tag-input__input:focus-visible),\n.lintje-tag-input__chip:has(.lintje-tag-input__remove:focus-visible) {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: var(--focus-offset);\n}\n.lintje-tag-input__input:focus-visible,\n.lintje-tag-input__remove:focus-visible { outline: none; }\n/* The padding gives back the pixel the 2 px error border takes. */\n.lintje-tag-input.is-error {\n  border: 2px solid var(--color-error);\n  padding: calc((var(--h-control) - var(--h-chip-field)) / 2 - 2px) calc(var(--space-2) - 1px);\n}\n/* Disabled wins over error: placed after it. */\n.lintje-tag-input.is-disabled {\n  border: 1px solid var(--color-border-strong);\n  padding: calc((var(--h-control) - var(--h-chip-field)) / 2 - 1px) var(--space-2);\n  background: var(--color-bg-subtle);\n  cursor: not-allowed;\n}\n\n.lintje-tag-input__chips { display: contents; }\n.lintje-tag-input__item { display: flex; min-width: 0; }\n.lintje-tag-input__chip {\n  display: inline-flex; align-items: center;\n  min-width: 0;\n  height: var(--h-chip-field);\n  padding: 0 0 0 var(--space-2);\n  background: var(--color-bg-subtle);\n  border: 1px solid var(--color-border-default);\n  font-size: 0.875rem; white-space: nowrap;\n}\n.lintje-tag-input.is-disabled .lintje-tag-input__chip { padding-right: var(--space-2); }\n/* A word typed twice flashes its chip. */\n.lintje-tag-input__chip.is-flash { border-color: var(--color-accent-line); }\n.lintje-tag-input.is-disabled .lintje-tag-input__chip { color: var(--color-text-disabled); }\n/* A transparent hit area, above and below only, reaches the target height. */\n.lintje-tag-input__remove {\n  position: relative;\n  flex: none;\n  width: var(--space-6); align-self: stretch;\n  display: inline-flex; align-items: center; justify-content: center;\n  color: var(--color-text-muted);\n}\n.lintje-tag-input__remove:hover { color: var(--color-text-primary); }\n.lintje-tag-input__remove::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((var(--h-chip-field) - var(--h-target)) / 2)) 0;\n}\n\n.lintje-tag-input__input {\n  flex: 1 1 60px; min-width: 0;\n  height: var(--h-chip-field);\n  padding: 0 var(--space-1);\n  border: 0;\n  background: none;\n  color: inherit;\n  font-size: 1rem;\n}\n.lintje-tag-input__input::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n.lintje-tag-input__input:disabled { cursor: not-allowed; }\n\n.lintje-tag-input__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-tag-input__option {\n  display: flex; align-items: center;\n  min-height: var(--h-option);\n  padding: 0 14px;\n  cursor: pointer;\n}\n.lintje-tag-input__option:hover,\n.lintje-tag-input__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-tag-input__option.is-active {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: calc(var(--focus-width) * -1);\n}\n\n/* Forced colours drop the fill: the row takes an edge inside, keeping its size. */\n@media (forced-colors: active) {\n  .lintje-tag-input__option.is-active { outline: 1px solid CanvasText; outline-offset: -1px; }\n}\n";
-//#endregion
-//#region src/components/inputs/tag-input/tag-input.ts
-function p(e) {
-	return e.split(/[,\n]/).map((e) => e.trim()).filter(Boolean);
-}
-function m(e, t) {
-	let n = [...e], r = [], i = null;
-	for (let e of t) {
-		let t = n.find((t) => t.toLowerCase() === e.toLowerCase());
-		t === void 0 ? (n.push(e), r.push(e)) : i = t;
-	}
-	return {
-		next: n,
-		added: r,
-		duplicate: i
-	};
-}
-var h = 1e3, g = "lintje-tag-input-list", _ = "lintje-tag-input-keys", v = (e) => `lintje-tag-input-option-${e}`, y = class extends c {
-	constructor(...e) {
-		super(...e), this.value = [], this.placeholder = "", this.stacked = !1, this.text = "", this.flash = null, this.news = "", this.active = -1, this.suggesting = !1, this.#e = null;
-	}
-	static {
-		this.styles = [
-			r,
-			t(l),
-			t(f)
-		];
-	}
-	static {
-		this.properties = {
-			value: { attribute: !1 },
-			options: { attribute: !1 },
-			placeholder: { type: String },
-			stacked: {
-				type: Boolean,
-				reflect: !0
-			},
-			text: { state: !0 },
-			flash: { state: !0 },
-			news: { state: !0 },
-			active: { state: !0 },
-			suggesting: { state: !0 }
-		};
-	}
-	#e;
-	disconnectedCallback() {
-		this.#e !== null && clearTimeout(this.#e), this.#e = null, super.disconnectedCallback();
-	}
-	get input() {
-		return this.renderRoot.querySelector(".lintje-tag-input__input");
-	}
-	labelOf(e) {
-		return this.options?.find((t) => t.value === e)?.label ?? e;
-	}
-	get suggestions() {
-		return !this.options || !this.text.trim() ? [] : u(this.options, this.text).filter((e) => !this.value.includes(e.value));
-	}
-	get listOpen() {
-		return this.suggesting && !this.disabled && this.suggestions.length > 0;
-	}
-	willUpdate(e) {
-		super.willUpdate(e), this.active >= this.suggestions.length && (this.active = this.suggestions.length - 1);
-	}
-	resolve(e) {
-		return this.options?.find((t) => t.label.toLowerCase() === e.toLowerCase())?.value ?? e;
-	}
-	add(e) {
-		let { next: t, added: n, duplicate: r } = m(this.value, e.map((e) => this.resolve(e)));
-		this.text = "", this.active = -1;
-		let i = [];
-		n.length && i.push(`${n.map((e) => this.labelOf(e)).join(", ")} toegevoegd`), r !== null && (this.light(r), i.push(`${this.labelOf(r)} staat er al`)), i.length && (this.news = i.join(". ")), n.length && (this.value = t, this.announce(t));
-	}
-	light(e) {
-		this.#e !== null && clearTimeout(this.#e), this.flash = e, this.#e = setTimeout(() => {
-			this.flash = null, this.#e = null;
-		}, h);
-	}
-	async removeChip(e, t) {
-		if (this.disabled) return;
-		let n = this.value[e], r = this.value.filter((t, n) => n !== e);
-		this.value = r, this.news = `${this.labelOf(n)} verwijderd`, this.announce(r), await this.updateComplete, t === "input" || t < 0 || t >= r.length ? this.input?.focus() : this.focusChip(t);
-	}
-	focusChip(e) {
-		this.renderRoot.querySelector(`[data-index="${e}"]`)?.focus();
-	}
-	onInput(e) {
-		this.text = e.target.value, this.suggesting = !0, this.active = this.suggestions.length ? 0 : -1;
-	}
-	onPaste(e) {
-		let t = e.clipboardData?.getData("text") ?? "";
-		if (!/[,\n]/.test(t)) return;
-		e.preventDefault();
-		let n = e.target;
-		this.add(p(n.value + t));
-	}
-	onKeydown(e) {
-		let t = e.target, n = t.selectionStart === 0 && t.selectionEnd === 0, r = this.listOpen;
-		switch (e.key) {
-			case "Enter":
-			case ",": {
-				let n = r && this.active >= 0 ? this.suggestions[this.active] : null;
-				if (n && e.key === "Enter") {
-					e.preventDefault(), this.add([n.label]);
-					return;
-				}
-				(e.key === "," || t.value.trim()) && e.preventDefault(), this.add(p(t.value));
-				return;
-			}
-			case "Backspace":
-				t.value === "" && this.value.length && (e.preventDefault(), this.focusChip(this.value.length - 1));
-				return;
-			case "ArrowLeft":
-				(t.value === "" || n) && this.value.length && (e.preventDefault(), this.focusChip(this.value.length - 1));
-				return;
-			case "ArrowDown":
-				if (!r) return;
-				e.preventDefault(), this.active = Math.min(this.active + 1, this.suggestions.length - 1);
-				return;
-			case "ArrowUp":
-				if (!r) return;
-				e.preventDefault(), this.active = Math.max(this.active - 1, 0);
-				return;
-		}
-	}
-	onChipKeydown(e, t) {
-		switch (e.key) {
-			case "ArrowLeft":
-				e.preventDefault(), this.focusChip(Math.max(0, t - 1));
-				return;
-			case "ArrowRight":
-				e.preventDefault(), t + 1 < this.value.length ? this.focusChip(t + 1) : this.input?.focus();
-				return;
-			case "Backspace":
-				e.preventDefault(), this.removeChip(t, "input");
-				return;
-			case "Delete":
-				e.preventDefault(), this.removeChip(t, t);
-				return;
-		}
-	}
-	onBlur(e) {
-		this.suggesting = !1;
-		let t = e.relatedTarget;
-		if (t && this.renderRoot.contains(t)) return;
-		let n = p(e.target.value);
-		n.length && this.add(n);
-	}
-	onPopoverClose(e) {
-		e.stopPropagation(), this.suggesting = !1, this.active = -1;
-	}
-	renderChip(e, t) {
-		let r = this.labelOf(e);
-		return i`<li class="lintje-tag-input__item">
-      <span class=${o({
-			"lintje-tag-input__chip": !0,
-			"is-flash": this.flash === e
-		})}
-        >${r}${this.disabled ? n : i`<button
+import{cn as e,gt as t,ht as n,on as r,pt as i,rn as a,s as o,tn as s}from"../chunks/base-BsZyWDre.js";import{t as c}from"../chunks/live-message-CYZ-Ch7D.js";import{r as l}from"../chunks/input-C7qx0e4p.js";import{t as u}from"../chunks/input-CazTpGUd.js";import{filterOptions as d,splitMatch as f}from"./combobox.js";var p=`:host{min-width:0;display:block}:host([hidden]){display:none}@media screen and (width<=767px){:host{--h-control:var(--h-touch);width:100%}}.lintje-tag-input{align-items:center;gap:var(--space-2);min-height:var(--h-control);padding:calc((var(--h-control) - var(--h-chip-field)) / 2 - 1px) var(--space-2);border:1px solid var(--color-border-field);border-radius:var(--radius);background:var(--color-bg-surface);color:var(--color-text-primary);flex-wrap:wrap;display:flex}.lintje-tag-input:has(.lintje-tag-input__input:focus-visible),.lintje-tag-input__chip:has(.lintje-tag-input__remove:focus-visible){outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}.lintje-tag-input__input:focus-visible,.lintje-tag-input__remove:focus-visible{outline:none}.lintje-tag-input.is-error{border:2px solid var(--color-error);padding:calc((var(--h-control) - var(--h-chip-field)) / 2 - 2px) calc(var(--space-2) - 1px)}.lintje-tag-input.is-disabled{border:1px solid var(--color-border-strong);padding:calc((var(--h-control) - var(--h-chip-field)) / 2 - 1px) var(--space-2);background:var(--color-bg-subtle);cursor:not-allowed}.lintje-tag-input__chips{display:contents}.lintje-tag-input__item{min-width:0;display:flex}.lintje-tag-input__chip{min-width:0;height:var(--h-chip-field);padding:0 0 0 var(--space-2);background:var(--color-bg-subtle);border:1px solid var(--color-border-default);white-space:nowrap;align-items:center;font-size:.875rem;display:inline-flex}.lintje-tag-input.is-disabled .lintje-tag-input__chip{padding-right:var(--space-2)}.lintje-tag-input__chip.is-flash{border-color:var(--color-accent-line)}.lintje-tag-input.is-disabled .lintje-tag-input__chip{color:var(--color-text-disabled)}.lintje-tag-input__remove{width:var(--space-6);color:var(--color-text-muted);flex:none;justify-content:center;align-self:stretch;align-items:center;display:inline-flex;position:relative}.lintje-tag-input__remove:hover{color:var(--color-text-primary)}.lintje-tag-input__remove:after{content:"";inset:min(0px, calc((var(--h-chip-field) - var(--h-target)) / 2)) 0;position:absolute}.lintje-tag-input__input{min-width:0;height:var(--h-chip-field);padding:0 var(--space-1);color:inherit;background:0 0;border:0;flex:60px;font-size:1rem}.lintje-tag-input__input::placeholder{color:var(--color-text-placeholder);opacity:1}.lintje-tag-input__input:disabled::placeholder{color:var(--color-text-disabled)}.lintje-tag-input__input:disabled{cursor:not-allowed}.lintje-tag-input__list{max-height:calc(7 * var(--h-option) + var(--space-2));padding:var(--space-1) 0;font:var(--text-ui);overflow-y:auto}.lintje-tag-input__option{min-height:var(--h-option);cursor:pointer;align-items:center;padding:0 14px;display:flex}.lintje-tag-input__option:hover,.lintje-tag-input__option.is-active{background:var(--color-bg-subtle)}.lintje-tag-input__option.is-active{outline:var(--focus-width) solid var(--color-focus);outline-offset:calc(var(--focus-width) * -1)}@media (forced-colors:active){.lintje-tag-input__option.is-active{outline-offset:-1px;outline:1px solid canvastext}}`;function m(e){return e.split(/[,\n]/).map(e=>e.trim()).filter(Boolean)}function h(e,t){let n=[...e],r=[],i=null;for(let e of t){let t=n.find(t=>t.toLowerCase()===e.toLowerCase());t===void 0?(n.push(e),r.push(e)):i=t}return{next:n,added:r,duplicate:i}}var g=1e3,_=`lintje-tag-input-list`,v=`lintje-tag-input-keys`,y=e=>`lintje-tag-input-option-${e}`,b=class extends l{constructor(...e){super(...e),this.value=[],this.placeholder=``,this.stacked=!1,this.text=``,this.flash=null,this.active=-1,this.suggesting=!1,this.#e=null,this.#t=new c(this)}static{this.styles=[n,a(u),a(p)]}static{this.properties={value:{attribute:!1},options:{attribute:!1},placeholder:{type:String},stacked:{type:Boolean,reflect:!0},text:{state:!0},flash:{state:!0},active:{state:!0},suggesting:{state:!0}}}#e;#t;disconnectedCallback(){this.#e!==null&&clearTimeout(this.#e),this.#e=null,super.disconnectedCallback()}get input(){return this.renderRoot.querySelector(`.lintje-tag-input__input`)}labelOf(e){return this.options?.find(t=>t.value===e)?.label??e}get suggestions(){return!this.options||!this.text.trim()?[]:d(this.options,this.text).filter(e=>!this.value.includes(e.value))}get listOpen(){return this.suggesting&&!this.isDisabled&&this.suggestions.length>0}willUpdate(e){super.willUpdate(e),this.active>=this.suggestions.length&&(this.active=this.suggestions.length-1)}resolve(e){return this.options?.find(t=>t.label.toLowerCase()===e.toLowerCase())?.value??e}add(e){let{next:t,added:n,duplicate:r}=h(this.value,e.map(e=>this.resolve(e)));this.text=``,this.active=-1;let i=[];n.length&&i.push(`${n.map(e=>this.labelOf(e)).join(`, `)} toegevoegd`),r!==null&&(this.light(r),i.push(`${this.labelOf(r)} staat er al`)),i.length&&this.#t.say(i.join(`. `)),n.length&&(this.value=t,this.announce(t))}light(e){this.#e!==null&&clearTimeout(this.#e),this.flash=e,this.#e=setTimeout(()=>{this.flash=null,this.#e=null},g)}async removeChip(e,t){if(this.isDisabled)return;let n=this.value[e],r=this.value.filter((t,n)=>n!==e);this.value=r,this.#t.say(`${this.labelOf(n)} verwijderd`),this.announce(r),await this.updateComplete,t===`input`||t<0||t>=r.length?this.input?.focus():this.focusChip(t)}focusChip(e){this.renderRoot.querySelector(`[data-index="${e}"]`)?.focus()}onInput(e){this.text=e.target.value,this.suggesting=!0,this.active=this.suggestions.length?0:-1}onPaste(e){let t=e.clipboardData?.getData(`text`)??``;if(!/[,\n]/.test(t))return;e.preventDefault();let n=e.target;this.add(m(n.value+t))}onKeydown(e){let t=e.target,n=t.selectionStart===0&&t.selectionEnd===0,r=this.listOpen;switch(e.key){case`Enter`:case`,`:{let n=r&&this.active>=0?this.suggestions[this.active]:null;if(n&&e.key===`Enter`){e.preventDefault(),this.add([n.label]);return}(e.key===`,`||t.value.trim())&&e.preventDefault(),this.add(m(t.value));return}case`Backspace`:t.value===``&&this.value.length&&(e.preventDefault(),this.focusChip(this.value.length-1));return;case`ArrowLeft`:(t.value===``||n)&&this.value.length&&(e.preventDefault(),this.focusChip(this.value.length-1));return;case`ArrowDown`:if(!r)return;e.preventDefault(),this.active=Math.min(this.active+1,this.suggestions.length-1);return;case`ArrowUp`:if(!r)return;e.preventDefault(),this.active=Math.max(this.active-1,0);return}}onChipKeydown(e,t){switch(e.key){case`ArrowLeft`:e.preventDefault(),this.focusChip(Math.max(0,t-1));return;case`ArrowRight`:e.preventDefault(),t+1<this.value.length?this.focusChip(t+1):this.input?.focus();return;case`Backspace`:e.preventDefault(),this.removeChip(t,`input`);return;case`Delete`:e.preventDefault(),this.removeChip(t,t);return}}onBlur(e){this.suggesting=!1;let t=e.relatedTarget;if(t&&this.renderRoot.contains(t))return;let n=m(e.target.value);n.length&&this.add(n)}onPopoverClose(e){e.stopPropagation(),this.suggesting=!1,this.active=-1}renderChip(n,a){let o=this.labelOf(n);return e`<li class="lintje-tag-input__item">
+      <span class=${i({"lintje-tag-input__chip":!0,"is-flash":this.flash===n})}
+        >${o}${this.isDisabled?r:e`<button
               type="button"
               class="lintje-tag-input__remove"
               tabindex="-1"
-              data-index=${t}
-              aria-label=${`${r} verwijderen`}
-              @keydown=${(e) => this.onChipKeydown(e, t)}
-              @click=${() => this.removeChip(t, "input")}
+              data-index=${a}
+              aria-label=${`${o} verwijderen`}
+              @keydown=${e=>this.onChipKeydown(e,a)}
+              @click=${()=>this.removeChip(a,`input`)}
             >
-              ${s("functioneel-kruis", { size: 12 })}
+              ${t(`functioneel-kruis`,{size:12})}
             </button>`}</span
       >
-    </li>`;
-	}
-	renderSuggestions() {
-		return this.listOpen ? i`<ul
-      id=${g}
+    </li>`}renderSuggestions(){return this.listOpen?e`<ul
+      id=${_}
       class="lintje-tag-input__list"
       role="listbox"
       tabindex="-1"
       aria-labelledby=${this.labelId}
     >
-      ${this.suggestions.map((e, t) => {
-			let [r, a, s] = d(e.label, this.text);
-			return i`<li
-          id=${v(t)}
-          class=${o({
-				"lintje-tag-input__option": !0,
-				"is-active": t === this.active
-			})}
+      ${this.suggestions.map((t,n)=>{let[a,o,s]=f(t.label,this.text);return e`<li
+          id=${y(n)}
+          class=${i({"lintje-tag-input__option":!0,"is-active":n===this.active})}
           role="option"
           aria-selected="false"
-          @click=${() => this.add([e.label])}
+          @click=${()=>this.add([t.label])}
         >
-          ${r}${a ? i`<strong>${a}</strong>` : n}${s}
-        </li>`;
-		})}
-    </ul>` : n;
-	}
-	render() {
-		let e = this.listOpen, t = !!this.options;
-		return i`<div class="lintje-field">
+          ${a}${o?e`<strong>${o}</strong>`:r}${s}
+        </li>`})}
+    </ul>`:r}render(){let t=this.listOpen,n=!!this.options;return e`<div class="lintje-field">
       ${this.renderLabel(this.controlId)}
       <div
-        class=${o({
-			"lintje-tag-input": !0,
-			"is-error": !!this.error,
-			"is-disabled": this.disabled
-		})}
+        class=${i({"lintje-tag-input":!0,"is-error":!!this.error,"is-disabled":this.isDisabled})}
         role="group"
         aria-labelledby=${this.labelId}
       >
         <ul class="lintje-tag-input__chips">
-          ${this.value.map((e, t) => this.renderChip(e, t))}
+          ${this.value.map((e,t)=>this.renderChip(e,t))}
         </ul>
         <input
           type="text"
           id=${this.controlId}
           class="lintje-tag-input__input"
-          .value=${a(this.text)}
-          placeholder=${this.value.length ? n : this.placeholder || n}
+          .value=${o(this.text)}
+          placeholder=${this.value.length?r:this.placeholder||r}
           autocomplete="off"
           enterkeyhint="enter"
-          role=${t ? "combobox" : n}
-          aria-expanded=${t ? e ? "true" : "false" : n}
-          aria-controls=${e ? g : n}
-          aria-autocomplete=${t ? "list" : n}
-          aria-activedescendant=${e && this.active >= 0 ? v(this.active) : n}
+          role=${n?`combobox`:r}
+          aria-expanded=${n?t?`true`:`false`:r}
+          aria-controls=${t?_:r}
+          aria-autocomplete=${n?`list`:r}
+          aria-activedescendant=${t&&this.active>=0?y(this.active):r}
           aria-labelledby=${this.labelId}
-          aria-describedby=${this.describedBy === n ? _ : `${this.describedBy} ${_}`}
-          aria-invalid=${this.error ? "true" : n}
-          aria-required=${this.required ? "true" : n}
-          ?disabled=${this.disabled}
+          aria-describedby=${this.describedBy===r?v:`${this.describedBy} ${v}`}
+          aria-invalid=${this.error?`true`:r}
+          aria-required=${this.required?`true`:r}
+          ?disabled=${this.isDisabled}
           @input=${this.onInput}
           @keydown=${this.onKeydown}
           @paste=${this.onPaste}
@@ -243,21 +65,16 @@ var h = 1e3, g = "lintje-tag-input-list", _ = "lintje-tag-input-keys", v = (e) =
       <!-- A press in the list, on an option or beside one, keeps the focus in the field. -->
       <lintje-popover
         match-width
-        ?open=${e}
+        ?open=${t}
         @lintje-close=${this.onPopoverClose}
-        @mousedown=${(e) => e.preventDefault()}
+        @mousedown=${e=>e.preventDefault()}
       >
         ${this.renderSuggestions()}
       </lintje-popover>
-      <span class="visually-hidden" role="status">${this.news}</span>
-      <span id=${_} hidden
+      <span class="visually-hidden" role="status">${this.#t.text}</span>
+      <span id=${v} hidden
         >Enter of een komma voegt een woord toe. Pijl links of Backspace gaat naar de woorden;
         daar verwijdert Backspace of Delete een woord.</span
       >
       ${this.renderFoot()}
-    </div>`;
-	}
-};
-e("lintje-tag-input", y);
-//#endregion
-export { y as LintjeTagInput, m as addWords, p as splitWords };
+    </div>`}};s(`lintje-tag-input`,b);export{b as LintjeTagInput,h as addWords,m as splitWords};