polymorph-ui-components 0.8.0 → 0.9.0

package/dist/Select/Select.svelte

@@ -11,6 +11,7 @@
     searchable = false,
     placeholder = '',
     disabled = false,
+    ariaLabel,
     testId,
     onchange,
     classes
@@ -240,6 +241,7 @@
     onclick={handleTriggerClick}
     onkeydown={handleKeydown}
     role="combobox"
+    aria-label={ariaLabel}
     aria-expanded={isOpen}
     aria-haspopup="listbox"
     aria-controls={listboxId}
@@ -265,6 +267,7 @@
           onfocus={handleSearchFocus}
           bind:this={searchInputEl}
           placeholder={value.length === 0 ? placeholder : ''}
+          aria-label={ariaLabel}
           {disabled}
           autocomplete="off"
           tabindex={disabled ? -1 : 0}
@@ -281,6 +284,7 @@
         onfocus={handleSearchFocus}
         bind:this={searchInputEl}
         placeholder={searchPlaceholder}
+        aria-label={ariaLabel}
         {disabled}
         autocomplete="off"
         tabindex={disabled ? -1 : 0}
@@ -295,7 +299,13 @@
   </div>
 
   {#if isOpen && !disabled}
-    <div class="select-dropdown" role="listbox" id={listboxId} aria-multiselectable={multiple}>
+    <div
+      class="select-dropdown"
+      role="listbox"
+      id={listboxId}
+      aria-label={ariaLabel}
+      aria-multiselectable={multiple}
+    >
       {#if filteredItems.length === 0}
         <div class="select-empty">No results</div>
       {:else}

package/dist/Select/properties.d.ts

@@ -12,6 +12,7 @@ export type OptionalSelectProperties = {
     searchable?: boolean;
     placeholder?: string;
     disabled?: boolean;
+    ariaLabel?: string;
     testId?: string;
     classes?: string;
 };

package/dist-wc/index.js

@@ -12486,87 +12486,87 @@ var gp = /* @__PURE__ */ U("<input class=\"select-search svelte-52lifo\" type=\"
 };
 function Tp(e, t) {
 	Je(t, !0), Ii(e, wp);
-	let n = Q(t, "items", 7), r = Q(t, "value", 31, () => on([])), i = Q(t, "multiple", 7, !1), a = Q(t, "searchable", 7, !1), o = Q(t, "placeholder", 7, ""), s = Q(t, "disabled", 7, !1), c = Q(t, "testId", 7), l = Q(t, "onchange", 7), u = Q(t, "classes", 7), d = /* @__PURE__ */ F(!1), f = /* @__PURE__ */ F(""), p = /* @__PURE__ */ F(-1), m = /* @__PURE__ */ F(null), h = /* @__PURE__ */ F(null), g = /* @__PURE__ */ F(null), _ = `select-listbox-${Math.random().toString(36).slice(2, 9)}`;
-	function v(e) {
+	let n = Q(t, "items", 7), r = Q(t, "value", 31, () => on([])), i = Q(t, "multiple", 7, !1), a = Q(t, "searchable", 7, !1), o = Q(t, "placeholder", 7, ""), s = Q(t, "disabled", 7, !1), c = Q(t, "ariaLabel", 7), l = Q(t, "testId", 7), u = Q(t, "onchange", 7), d = Q(t, "classes", 7), f = /* @__PURE__ */ F(!1), p = /* @__PURE__ */ F(""), m = /* @__PURE__ */ F(-1), h = /* @__PURE__ */ F(null), g = /* @__PURE__ */ F(null), _ = /* @__PURE__ */ F(null), v = `select-listbox-${Math.random().toString(36).slice(2, 9)}`;
+	function y(e) {
 		let t = n().find((t) => t.id === e);
 		return typeof t == "object" ? t.label : e;
 	}
-	let y = /* @__PURE__ */ N(() => a() && V(f).length > 0 ? n().filter((e) => e.label.toLowerCase().includes(V(f).toLowerCase())) : n()), b = /* @__PURE__ */ N(() => {
+	let b = /* @__PURE__ */ N(() => a() && V(p).length > 0 ? n().filter((e) => e.label.toLowerCase().includes(V(p).toLowerCase())) : n()), x = /* @__PURE__ */ N(() => {
 		let e = r().at(0);
-		return typeof e == "string" ? v(e) : "";
-	}), x = /* @__PURE__ */ N(() => V(p) >= 0 ? `${_}-option-${V(p)}` : null), S = /* @__PURE__ */ N(() => V(d) && V(b).length > 0 ? V(b) : o());
-	async function C() {
-		s() || V(d) || (I(d, !0), I(p, -1), I(f, ""), a() && (await Er(), V(h) !== null && V(h).focus()));
-	}
-	function w() {
-		I(d, !1), I(f, ""), I(p, -1);
+		return typeof e == "string" ? y(e) : "";
+	}), S = /* @__PURE__ */ N(() => V(m) >= 0 ? `${v}-option-${V(m)}` : null), C = /* @__PURE__ */ N(() => V(f) && V(x).length > 0 ? V(x) : o());
+	async function w() {
+		s() || V(f) || (I(f, !0), I(m, -1), I(p, ""), a() && (await Er(), V(g) !== null && V(g).focus()));
 	}
-	function T(e) {
-		s() || (i() ? r(r().includes(e) ? r().filter((t) => t !== e) : [...r(), e]) : (r([e]), w()), l()?.(r()));
+	function T() {
+		I(f, !1), I(p, ""), I(m, -1);
 	}
 	function E(e) {
-		s() || (r(r().filter((t) => t !== e)), l()?.(r()));
+		s() || (i() ? r(r().includes(e) ? r().filter((t) => t !== e) : [...r(), e]) : (r([e]), T()), u()?.(r()));
 	}
-	function D() {
-		if (V(p) < 0 || V(p) >= V(y).length) return;
-		let e = V(y).at(V(p));
-		typeof e == "object" && e && T(e.id);
-	}
-	async function O(e) {
-		let t = V(p) + e;
-		if (!(t < 0 || t >= V(y).length) && (I(p, t), await Er(), V(m) !== null)) {
-			let e = V(m).querySelector(".select-option.highlighted");
+	function D(e) {
+		s() || (r(r().filter((t) => t !== e)), u()?.(r()));
+	}
+	function O() {
+		if (V(m) < 0 || V(m) >= V(b).length) return;
+		let e = V(b).at(V(m));
+		typeof e == "object" && e && E(e.id);
+	}
+	async function k(e) {
+		let t = V(m) + e;
+		if (!(t < 0 || t >= V(b).length) && (I(m, t), await Er(), V(h) !== null)) {
+			let e = V(h).querySelector(".select-option.highlighted");
 			e instanceof HTMLElement && e.scrollIntoView({ block: "nearest" });
 		}
 	}
-	function k(e) {
+	function A(e) {
 		if (e.target instanceof HTMLInputElement) {
-			V(d) || C();
+			V(f) || w();
 			return;
 		}
-		i() && a() ? C() : V(d) ? w() : C();
+		i() && a() ? w() : V(f) ? T() : w();
 	}
-	function A(e) {
+	function j(e) {
 		if (!s()) switch (e.key) {
 			case "Enter":
-				e.preventDefault(), V(d) ? D() : C();
+				e.preventDefault(), V(f) ? O() : w();
 				break;
 			case " ":
-				e.target instanceof HTMLInputElement || (e.preventDefault(), V(d) ? D() : C());
+				e.target instanceof HTMLInputElement || (e.preventDefault(), V(f) ? O() : w());
 				break;
 			case "ArrowDown":
-				e.preventDefault(), V(d) ? O(1) : C();
+				e.preventDefault(), V(f) ? k(1) : w();
 				break;
 			case "ArrowUp":
-				e.preventDefault(), O(-1);
+				e.preventDefault(), k(-1);
 				break;
 			case "Escape":
-				V(d) && (w(), !a() && V(g) !== null && V(g).focus());
+				V(f) && (T(), !a() && V(_) !== null && V(_).focus());
 				break;
 			case "Backspace":
-				if (i() && V(f) === "" && r().length > 0) {
+				if (i() && V(p) === "" && r().length > 0) {
 					let e = r().at(-1);
-					typeof e == "string" && E(e);
+					typeof e == "string" && D(e);
 				}
 				break;
 			case "Tab":
-				V(d) && w();
+				V(f) && T();
 				break;
 		}
 	}
-	function j(e) {
-		e.target instanceof HTMLInputElement && (I(f, e.target.value, !0), V(d) || I(d, !0), I(p, -1));
+	function ee(e) {
+		e.target instanceof HTMLInputElement && (I(p, e.target.value, !0), V(f) || I(f, !0), I(m, -1));
 	}
-	function ee() {
-		V(d) || C();
+	function te() {
+		V(f) || w();
 	}
-	function te(e) {
-		e.target instanceof Node && V(m) !== null && !V(m).contains(e.target) && w();
+	function ne(e) {
+		e.target instanceof Node && V(h) !== null && !V(h).contains(e.target) && T();
 	}
-	ui(() => (document.addEventListener("click", te), () => {
-		document.removeEventListener("click", te);
+	ui(() => (document.addEventListener("click", ne), () => {
+		document.removeEventListener("click", ne);
 	}));
-	var ne = {
+	var re = {
 		get items() {
 			return n();
 		},
@@ -12603,50 +12603,57 @@ function Tp(e, t) {
 		set disabled(e = !1) {
 			s(e), P();
 		},
-		get testId() {
+		get ariaLabel() {
 			return c();
 		},
-		set testId(e) {
+		set ariaLabel(e) {
 			c(e), P();
 		},
-		get onchange() {
+		get testId() {
 			return l();
 		},
-		set onchange(e) {
+		set testId(e) {
 			l(e), P();
 		},
-		get classes() {
+		get onchange() {
 			return u();
 		},
-		set classes(e) {
+		set onchange(e) {
 			u(e), P();
+		},
+		get classes() {
+			return d();
+		},
+		set classes(e) {
+			d(e), P();
 		}
-	}, re = Cp();
-	fa(re, () => ({
-		class: `select ${u() ?? "" ?? ""}`,
-		...typeof c() == "string" ? { "data-pw": c() } : {},
+	}, ie = Cp();
+	fa(ie, () => ({
+		class: `select ${d() ?? "" ?? ""}`,
+		...typeof l() == "string" ? { "data-pw": l() } : {},
 		[Qi]: {
-			open: V(d),
+			open: V(f),
 			disabled: s()
 		}
 	}), void 0, void 0, void 0, "svelte-52lifo");
-	var ie = L(re);
-	fa(ie, () => ({
+	var ae = L(ie);
+	fa(ae, () => ({
 		class: "select-trigger",
-		onclick: k,
-		onkeydown: A,
+		onclick: A,
+		onkeydown: j,
 		role: "combobox",
-		"aria-expanded": V(d),
+		"aria-label": c(),
+		"aria-expanded": V(f),
 		"aria-haspopup": "listbox",
-		"aria-controls": _,
-		...V(x) === null ? {} : { "aria-activedescendant": V(x) },
+		"aria-controls": v,
+		...V(S) === null ? {} : { "aria-activedescendant": V(S) },
 		tabindex: s() || a() ? -1 : 0
 	}), void 0, void 0, void 0, "svelte-52lifo");
-	var ae = L(ie), oe = (e) => {
+	var oe = L(ae), se = (e) => {
 		var t = vp(), n = R(t);
 		_i(n, 16, r, (e) => e, (e, t) => {
 			{
-				let n = /* @__PURE__ */ N(() => v(t));
+				let n = /* @__PURE__ */ N(() => y(t));
 				Zc(e, Z({
 					get text() {
 						return V(n);
@@ -12655,64 +12662,64 @@ function Tp(e, t) {
 					get disabled() {
 						return s();
 					},
-					ondismiss: () => E(t)
-				}, () => typeof c() == "string" ? { testId: `${c()}-pill-${t}` } : {}));
+					ondismiss: () => D(t)
+				}, () => typeof l() == "string" ? { testId: `${l()}-pill-${t}` } : {}));
 			}
 		});
-		var i = z(n, 2), l = (e) => {
+		var i = z(n, 2), u = (e) => {
 			var t = gp();
-			sa(t), xa(t, (e) => I(h, e), () => V(h)), B(() => {
-				ca(t, V(f)), X(t, "placeholder", r().length === 0 ? o() : ""), t.disabled = s(), X(t, "tabindex", s() ? -1 : 0);
-			}), H("input", t, j), Rr("focus", t, ee), G(e, t);
-		}, u = (e) => {
+			sa(t), xa(t, (e) => I(g, e), () => V(g)), B(() => {
+				ca(t, V(p)), X(t, "placeholder", r().length === 0 ? o() : ""), X(t, "aria-label", c()), t.disabled = s(), X(t, "tabindex", s() ? -1 : 0);
+			}), H("input", t, ee), Rr("focus", t, te), G(e, t);
+		}, d = (e) => {
 			var t = _p(), n = L(t, !0);
 			M(t), B(() => K(n, o())), G(e, t);
 		};
 		J(i, (e) => {
-			a() ? e(l) : r().length === 0 && e(u, 1);
+			a() ? e(u) : r().length === 0 && e(d, 1);
 		}), G(e, t);
-	}, se = (e) => {
-		var t = gp();
-		sa(t), xa(t, (e) => I(h, e), () => V(h)), B(() => {
-			ca(t, V(d) ? V(f) : V(b)), X(t, "placeholder", V(S)), t.disabled = s(), X(t, "tabindex", s() ? -1 : 0);
-		}), H("input", t, j), Rr("focus", t, ee), G(e, t);
 	}, ce = (e) => {
+		var t = gp();
+		sa(t), xa(t, (e) => I(g, e), () => V(g)), B(() => {
+			ca(t, V(f) ? V(p) : V(x)), X(t, "placeholder", V(C)), X(t, "aria-label", c()), t.disabled = s(), X(t, "tabindex", s() ? -1 : 0);
+		}), H("input", t, ee), Rr("focus", t, te), G(e, t);
+	}, le = (e) => {
 		var t = yp(), n = L(t, !0);
 		M(t), B(() => {
-			Y(t, 1, Vi(V(b).length > 0 ? "select-value" : "select-placeholder"), "svelte-52lifo"), K(n, V(b).length > 0 ? V(b) : o());
+			Y(t, 1, Vi(V(x).length > 0 ? "select-value" : "select-placeholder"), "svelte-52lifo"), K(n, V(x).length > 0 ? V(x) : o());
 		}), G(e, t);
 	};
-	J(ae, (e) => {
-		i() ? e(oe) : a() ? e(se, 1) : e(ce, -1);
+	J(oe, (e) => {
+		i() ? e(se) : a() ? e(ce, 1) : e(le, -1);
 	});
-	var le = z(ae, 2);
-	Ci(le, () => ap, !0), M(le), M(ie), xa(ie, (e) => I(g, e), () => V(g));
-	var ue = z(ie, 2), de = (e) => {
+	var ue = z(oe, 2);
+	Ci(ue, () => ap, !0), M(ue), M(ae), xa(ae, (e) => I(_, e), () => V(_));
+	var de = z(ae, 2), fe = (e) => {
 		var t = Sp(), n = L(t), a = (e) => {
 			G(e, bp());
 		}, o = (e) => {
 			var t = W();
-			_i(R(t), 19, () => V(y), (e) => e.id, (e, t, n) => {
+			_i(R(t), 19, () => V(b), (e) => e.id, (e, t, n) => {
 				var i = xp();
 				let a;
 				var o = L(i, !0);
 				M(i), B((e, r) => {
-					a = Y(i, 1, "select-option svelte-52lifo", null, a, e), X(i, "id", `${_}-option-${V(n)}`), X(i, "aria-selected", r), K(o, V(t).label);
+					a = Y(i, 1, "select-option svelte-52lifo", null, a, e), X(i, "id", `${v}-option-${V(n)}`), X(i, "aria-selected", r), K(o, V(t).label);
 				}, [() => ({
 					selected: r().includes(V(t).id),
-					highlighted: V(n) === V(p)
-				}), () => r().includes(V(t).id)]), H("click", i, () => T(V(t).id)), Rr("mouseenter", i, () => I(p, V(n), !0)), G(e, i);
+					highlighted: V(n) === V(m)
+				}), () => r().includes(V(t).id)]), H("click", i, () => E(V(t).id)), Rr("mouseenter", i, () => I(m, V(n), !0)), G(e, i);
 			}), G(e, t);
 		};
 		J(n, (e) => {
-			V(y).length === 0 ? e(a) : e(o, -1);
+			V(b).length === 0 ? e(a) : e(o, -1);
 		}), M(t), B(() => {
-			X(t, "id", _), X(t, "aria-multiselectable", i());
+			X(t, "id", v), X(t, "aria-label", c()), X(t, "aria-multiselectable", i());
 		}), G(e, t);
 	};
-	return J(ue, (e) => {
-		V(d) && !s() && e(de);
-	}), M(re), xa(re, (e) => I(m, e), () => V(m)), G(e, re), Ye(ne);
+	return J(de, (e) => {
+		V(f) && !s() && e(fe);
+	}), M(ie), xa(ie, (e) => I(h, e), () => V(h)), G(e, ie), Ye(re);
 }
 zr(["input", "click"]), $(Tp, {
 	items: {},
@@ -12721,6 +12728,7 @@ zr(["input", "click"]), $(Tp, {
 	searchable: {},
 	placeholder: {},
 	disabled: {},
+	ariaLabel: {},
 	testId: {},
 	onchange: {},
 	classes: {}
@@ -12756,6 +12764,10 @@ customElements.define("pui-select", $(Dp, {
 		reflect: !0,
 		type: "Boolean"
 	},
+	ariaLabel: {
+		attribute: "aria-label",
+		type: "String"
+	},
 	testId: {
 		attribute: "test-id",
 		type: "String"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polymorph-ui-components",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",