@atelier-ui/vue 0.2.21 → 0.2.23

package/index.mjs

@@ -92,6 +92,14 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 		kind: "stroke",
 		paths: ["M9 6L15 12L9 18"]
 	},
+	"chevron-double-left": {
+		kind: "stroke",
+		paths: ["M18 6L12 12L18 18", "M11 6L5 12L11 18"]
+	},
+	"chevron-double-right": {
+		kind: "stroke",
+		paths: ["M6 6L12 12L6 18", "M13 6L19 12L13 18"]
+	},
 	"arrow-left": {
 		kind: "stroke",
 		paths: ["M19 12H5", "M11 6L5 12L11 18"]
@@ -165,7 +173,7 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 	"stroke-width",
 	"stroke-linecap",
 	"stroke-linejoin"
-], ee = ["d"], L = /* @__PURE__ */ c({
+], L = ["d"], R = /* @__PURE__ */ c({
 	name: "AtlIcon",
 	__name: "atl-icon",
 	props: {
@@ -192,9 +200,9 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 		}, [(g(!0), i(e, null, y(o.value.paths, (e) => (g(), i("path", {
 			key: e,
 			d: e
-		}, null, 8, ee))), 128))], 8, I))], 10, F));
+		}, null, 8, L))), 128))], 8, I))], 10, F));
 	}
-}), te = ["aria-expanded", "disabled"], ne = /* @__PURE__ */ c({
+}), z = ["aria-expanded", "disabled"], ee = /* @__PURE__ */ c({
 	name: "AtlAccordionItem",
 	__name: "atl-accordion-item",
 	props: {
@@ -245,11 +253,11 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 				disabled: e.disabled,
 				onClick: w,
 				onKeydown: E
-			}, [b(t.$slots, "header"), s(L, {
+			}, [b(t.$slots, "header"), s(R, {
 				name: "chevron-down",
 				size: "sm",
 				class: d(A.value)
-			}, null, 8, ["class"])], 40, te)]),
+			}, null, 8, ["class"])], 40, z)]),
 			_: 3
 		})), a("div", { class: d(["accordion-panel-wrapper", C.value && "is-expanded"]) }, [a("div", {
 			id: _,
@@ -258,13 +266,13 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 			class: "accordion-panel"
 		}, [b(t.$slots, "default")])], 2)], 2));
 	}
-}), re = { class: "accordion-header-content" }, ie = /* @__PURE__ */ c({
+}), te = { class: "accordion-header-content" }, ne = /* @__PURE__ */ c({
 	name: "AtlAccordionHeader",
 	__name: "atl-accordion-header",
 	setup(e) {
-		return (e, t) => (g(), i("span", re, [b(e.$slots, "default")]));
+		return (e, t) => (g(), i("span", te, [b(e.$slots, "default")]));
 	}
-}), ae = ["aria-live"], oe = { class: "content" }, se = /* @__PURE__ */ c({
+}), re = ["aria-live"], ie = { class: "content" }, ae = /* @__PURE__ */ c({
 	name: "AtlAlert",
 	__name: "atl-alert",
 	props: {
@@ -286,7 +294,7 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 			class: d(f.value),
 			role: "alert",
 			"aria-live": p.value
-		}, [a("span", oe, [m.value ? (g(), n(L, {
+		}, [a("span", ie, [m.value ? (g(), n(R, {
 			key: 0,
 			class: "variant-icon",
 			name: m.value,
@@ -297,15 +305,15 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 			type: "button",
 			"aria-label": "Dismiss",
 			onClick: o[0] ||= (e) => u("dismissed")
-		}, [s(L, {
+		}, [s(R, {
 			name: "close",
 			size: "sm"
-		})])) : r("", !0)], 10, ae));
+		})])) : r("", !0)], 10, re));
 	}
-}), ce = ["aria-label"], le = ["src", "alt"], ue = {
+}), oe = ["aria-label"], se = ["src", "alt"], ce = {
 	key: 1,
 	class: "initials"
-}, de = /* @__PURE__ */ c({
+}, le = /* @__PURE__ */ c({
 	name: "AtlAvatar",
 	__name: "atl-avatar",
 	props: {
@@ -339,8 +347,8 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 				src: e.src,
 				alt: e.alt || e.name,
 				onError: n[0] ||= (e) => a.value = !0
-			}, null, 40, le)) : c.value ? (g(), i("span", ue, S(c.value), 1)) : r("", !0),
-			s(L, {
+			}, null, 40, se)) : c.value ? (g(), i("span", ce, S(c.value), 1)) : r("", !0),
+			s(R, {
 				name: "person",
 				size: "sm",
 				class: "icon"
@@ -350,9 +358,9 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 				class: d(`status-dot status-${e.status}`),
 				"aria-hidden": "true"
 			}, null, 2)) : r("", !0)
-		], 10, ce));
+		], 10, oe));
 	}
-}), R = ["aria-label"], z = /* @__PURE__ */ c({
+}), ue = ["aria-label"], de = /* @__PURE__ */ c({
 	name: "AtlAvatarGroup",
 	__name: "atl-avatar-group",
 	props: {
@@ -365,7 +373,7 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 			key: 0,
 			class: d(`overflow-badge size-${a.size}`),
 			"aria-label": `+${u.value} more`
-		}, " +" + S(u.value), 11, R)) : r("", !0)], 2));
+		}, " +" + S(u.value), 11, ue)) : r("", !0)], 2));
 	}
 }), B = /* @__PURE__ */ c({
 	name: "AtlBadge",
@@ -388,7 +396,7 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 		return (e, t) => (g(), i("span", {
 			class: d(s.value),
 			role: "status"
-		}, [c.value ? (g(), n(L, {
+		}, [c.value ? (g(), n(R, {
 			key: 0,
 			class: "variant-icon",
 			name: c.value,
@@ -651,7 +659,7 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 			type: "button",
 			"aria-label": "Close dialog",
 			onClick: n[0] ||= (e) => w(t).close()
-		}, [s(L, {
+		}, [s(R, {
 			name: "close",
 			size: "sm"
 		})])], 8, je));
@@ -743,7 +751,7 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 			type: "button",
 			"aria-label": "Close drawer",
 			onClick: n[0] ||= (e) => w(t).close()
-		}, [s(L, {
+		}, [s(R, {
 			name: "close",
 			size: "sm"
 		})])], 8, Be));
@@ -770,12 +778,9 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 	"required",
 	"name",
 	"aria-invalid",
+	"aria-describedby",
 	"aria-required"
-], Xe = {
-	key: 1,
-	class: "errors",
-	"aria-live": "polite"
-}, Ze = /* @__PURE__ */ c({
+], Xe = ["id"], Ze = /* @__PURE__ */ c({
 	name: "AtlInput",
 	__name: "atl-input",
 	props: {
@@ -805,9 +810,9 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 	},
 	emits: ["update:value"],
 	setup(o, { emit: s }) {
-		let c = o, l = s, u = t(() => c.id || (c.label ? `input-${Math.random().toString(36).slice(2)}` : void 0));
-		function f(e) {
-			l("update:value", e.target.value);
+		let c = o, l = T(), u = s, f = t(() => c.id || (c.label ? `input-${Math.random().toString(36).slice(2)}` : void 0));
+		function p(e) {
+			u("update:value", e.target.value);
 		}
 		return (t, s) => (g(), i("div", { class: d(["atl-input", {
 			"is-invalid": o.invalid,
@@ -815,11 +820,11 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 		}]) }, [
 			o.label ? (g(), i("label", {
 				key: 0,
-				for: u.value,
+				for: f.value,
 				class: "input-label"
 			}, S(o.label), 9, qe)) : r("", !0),
 			a("div", Je, [a("input", {
-				id: u.value,
+				id: f.value,
 				type: o.type,
 				value: o.value,
 				placeholder: o.placeholder,
@@ -828,18 +833,24 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 				required: o.required,
 				name: o.name,
 				"aria-invalid": o.invalid || void 0,
+				"aria-describedby": o.errors.length > 0 ? w(l) : void 0,
 				"aria-required": o.required || void 0,
-				onInput: f
-			}, null, 40, Ye), o.invalid ? (g(), n(L, {
+				onInput: p
+			}, null, 40, Ye), o.invalid ? (g(), n(R, {
 				key: 0,
 				name: "danger",
 				size: "sm",
 				class: "invalid-icon"
 			})) : r("", !0)]),
-			o.errors.length ? (g(), i("ul", Xe, [(g(!0), i(e, null, y(o.errors, (e, t) => (g(), i("li", {
+			o.errors.length ? (g(), i("ul", {
+				key: 1,
+				id: w(l),
+				class: "errors",
+				"aria-live": "polite"
+			}, [(g(!0), i(e, null, y(o.errors, (e, t) => (g(), i("li", {
 				key: t,
 				class: "error"
-			}, S(e), 1))), 128))])) : r("", !0)
+			}, S(e), 1))), 128))], 8, Xe)) : r("", !0)
 		], 2));
 	}
 }), Qe = { class: "atl-menu-trigger-wrapper" }, K = Symbol("AtlMenuTrigger"), $e = /* @__PURE__ */ c({
@@ -947,8 +958,8 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 	},
 	emits: ["pageChange"],
 	setup(n, { emit: o }) {
-		let s = n, c = o;
-		function l(e, t, n) {
+		let c = n, l = o;
+		function u(e, t, n) {
 			if (t <= 1) return [{
 				type: "page",
 				page: 1
@@ -975,45 +986,57 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 				page: t
 			}), r;
 		}
-		let u = t(() => l(s.page, s.pageCount, s.siblingCount));
-		function f(e) {
-			let t = Math.min(Math.max(e, 1), s.pageCount);
-			t !== s.page && c("pageChange", t);
+		let f = t(() => u(c.page, c.pageCount, c.siblingCount));
+		function p(e) {
+			let t = Math.min(Math.max(e, 1), c.pageCount);
+			t !== c.page && l("pageChange", t);
 		}
 		return (t, o) => (g(), i("nav", at, [a("ul", ot, [
 			n.showFirstLast ? (g(), i("li", st, [a("button", {
 				class: "page-btn nav-btn",
 				disabled: n.page <= 1,
 				"aria-label": "First page",
-				onClick: o[0] ||= (e) => f(1)
-			}, " « ", 8, ct)])) : r("", !0),
+				onClick: o[0] ||= (e) => p(1)
+			}, [s(R, {
+				name: "chevron-double-left",
+				size: "sm"
+			})], 8, ct)])) : r("", !0),
 			a("li", null, [a("button", {
 				class: "page-btn nav-btn",
 				disabled: n.page <= 1,
 				"aria-label": "Previous page",
-				onClick: o[1] ||= (e) => f(n.page - 1)
-			}, " ‹ ", 8, lt)]),
-			(g(!0), i(e, null, y(u.value, (t) => (g(), i(e, { key: t.type === "page" ? t.page : t.key }, [t.type === "ellipsis" ? (g(), i("li", ut, [...o[4] ||= [a("span", {
+				onClick: o[1] ||= (e) => p(n.page - 1)
+			}, [s(R, {
+				name: "chevron-left",
+				size: "sm"
+			})], 8, lt)]),
+			(g(!0), i(e, null, y(f.value, (t) => (g(), i(e, { key: t.type === "page" ? t.page : t.key }, [t.type === "ellipsis" ? (g(), i("li", ut, [...o[4] ||= [a("span", {
 				class: "ellipsis",
 				"aria-hidden": "true"
 			}, "…", -1)]])) : (g(), i("li", dt, [a("button", {
 				class: d(["page-btn", { active: t.page === n.page }]),
 				"aria-label": `Page ${t.page}`,
 				"aria-current": t.page === n.page ? "page" : void 0,
-				onClick: (e) => f(t.page)
+				onClick: (e) => p(t.page)
 			}, S(t.page), 11, ft)]))], 64))), 128)),
 			a("li", null, [a("button", {
 				class: "page-btn nav-btn",
 				disabled: n.page >= n.pageCount,
 				"aria-label": "Next page",
-				onClick: o[2] ||= (e) => f(n.page + 1)
-			}, " › ", 8, pt)]),
+				onClick: o[2] ||= (e) => p(n.page + 1)
+			}, [s(R, {
+				name: "chevron-right",
+				size: "sm"
+			})], 8, pt)]),
 			n.showFirstLast ? (g(), i("li", mt, [a("button", {
 				class: "page-btn nav-btn",
 				disabled: n.page >= n.pageCount,
 				"aria-label": "Last page",
-				onClick: o[3] ||= (e) => f(n.pageCount)
-			}, " » ", 8, ht)])) : r("", !0)
+				onClick: o[3] ||= (e) => p(n.pageCount)
+			}, [s(R, {
+				name: "chevron-double-right",
+				size: "sm"
+			})], 8, ht)])) : r("", !0)
 		])]));
 	}
 }), _t = [
@@ -1057,6 +1080,7 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 	"aria-expanded",
 	"aria-activedescendant",
 	"aria-invalid",
+	"aria-describedby",
 	"disabled",
 	"readonly",
 	"required",
@@ -1077,12 +1101,7 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 	class: "atl-combobox-no-results",
 	role: "option",
 	"aria-disabled": "true"
-}, Tt = {
-	key: 1,
-	class: "atl-combobox-errors",
-	role: "alert",
-	"aria-live": "polite"
-}, Et = /* @__PURE__ */ c({
+}, Tt = /* @__PURE__ */ c({
 	name: "AtlCombobox",
 	__name: "atl-combobox",
 	props: {
@@ -1109,148 +1128,163 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 		errors: { default: () => [] }
 	},
 	emits: ["update:value"],
-	setup(n, { emit: o }) {
-		let c = n, l = o, u = v(null), f = v(null), p = v(""), m = v(!1), _ = v(-1), b = Math.random().toString(36).slice(2), x = `atl-combobox-input-${b}`, C = `atl-combobox-panel-${b}`, w = t(() => c.options.find((e) => e.value === c.value)?.label ?? ""), T = t(() => {
-			let e = p.value.toLowerCase();
-			return e ? c.options.filter((t) => t.label.toLowerCase().includes(e)) : c.options;
-		}), E = t(() => _.value >= 0 ? `${C}-option-${_.value}` : void 0), D = t(() => [
+	setup(o, { emit: c }) {
+		let l = o, u = c, f = v(null), p = v(null), m = v(""), _ = v(!1), b = v(-1), x = Math.random().toString(36).slice(2), C = `atl-combobox-input-${x}`, w = `atl-combobox-panel-${x}`, T = `atl-combobox-errors-${x}`, E = t(() => l.options.find((e) => e.value === l.value)?.label ?? ""), D = t(() => {
+			let e = m.value.toLowerCase();
+			return e ? l.options.filter((t) => t.label.toLowerCase().includes(e)) : l.options;
+		}), k = t(() => b.value >= 0 ? `${w}-option-${b.value}` : void 0), A = t(() => [
 			"atl-combobox",
-			m.value && "is-open",
-			c.disabled && "is-disabled",
-			c.readonly && "is-readonly",
-			c.invalid && "is-invalid"
+			_.value && "is-open",
+			l.disabled && "is-disabled",
+			l.readonly && "is-readonly",
+			l.invalid && "is-invalid"
 		]);
-		O(() => c.value, () => {
-			m.value || (p.value = w.value);
+		O(() => l.value, () => {
+			_.value || (m.value = E.value);
 		}, { immediate: !0 });
-		function k() {
-			c.disabled || c.readonly || m.value || (m.value = !0, _.value = -1, document.addEventListener("click", j));
+		function j() {
+			l.disabled || l.readonly || _.value || (_.value = !0, b.value = -1, document.addEventListener("click", N));
 		}
-		function A() {
-			m.value && (m.value = !1, _.value = -1, document.removeEventListener("click", j));
+		function M() {
+			_.value && (_.value = !1, b.value = -1, document.removeEventListener("click", N));
 		}
-		function j(e) {
-			f.value?.contains(e.target) || (p.value = w.value, A());
+		function N(e) {
+			p.value?.contains(e.target) || (m.value = E.value, M());
 		}
 		h(() => {
-			document.removeEventListener("click", j);
+			document.removeEventListener("click", N);
 		});
-		function M(e) {
-			e.disabled || c.disabled || c.readonly || (l("update:value", e.value), p.value = e.label, A(), u.value?.focus());
+		function P(e) {
+			e.disabled || l.disabled || l.readonly || (u("update:value", e.value), m.value = e.label, M(), f.value?.focus());
 		}
-		function N(e) {
+		function F(e) {
 			let t = e.target.value;
-			p.value = t, _.value = -1, t === "" && l("update:value", ""), m.value || k();
+			m.value = t, b.value = -1, t === "" && u("update:value", ""), _.value || j();
 		}
-		function P() {
-			k();
+		function I() {
+			j();
 		}
-		function F() {
-			p.value = w.value;
+		function L() {
+			m.value = E.value;
 		}
-		function I(e) {
-			let t = T.value;
+		function z(e) {
+			let t = D.value;
 			switch (e.key) {
 				case "ArrowDown": {
-					if (e.preventDefault(), !m.value) {
-						k();
+					if (e.preventDefault(), !_.value) {
+						j();
 						return;
 					}
-					let n = _.value + 1;
-					_.value = n >= t.length ? 0 : n;
+					let n = b.value + 1;
+					b.value = n >= t.length ? 0 : n;
 					break;
 				}
 				case "ArrowUp": {
-					if (e.preventDefault(), !m.value) {
-						k();
+					if (e.preventDefault(), !_.value) {
+						j();
 						return;
 					}
-					let n = _.value - 1;
-					_.value = n < 0 ? t.length - 1 : n;
+					let n = b.value - 1;
+					b.value = n < 0 ? t.length - 1 : n;
 					break;
 				}
 				case "Enter": {
 					e.preventDefault();
-					let n = _.value;
-					m.value && n >= 0 && n < t.length && M(t[n]);
+					let n = b.value;
+					_.value && n >= 0 && n < t.length && P(t[n]);
 					break;
 				}
 				case "Escape":
-					e.preventDefault(), p.value = w.value, A();
+					e.preventDefault(), m.value = E.value, M();
 					break;
 				case "Tab":
-					A();
+					M();
 					break;
 			}
 		}
-		return (t, o) => (g(), i("div", {
+		return (t, c) => (g(), i("div", {
 			ref_key: "containerRef",
-			ref: f,
-			class: d(D.value)
+			ref: p,
+			class: d(A.value)
 		}, [
-			a("div", bt, [a("input", {
-				ref_key: "inputRef",
-				ref: u,
-				class: "atl-combobox-input",
-				type: "text",
-				autocomplete: "off",
-				role: "combobox",
-				id: x,
-				"aria-expanded": m.value,
-				"aria-controls": C,
-				"aria-autocomplete": "list",
-				"aria-activedescendant": E.value,
-				"aria-invalid": n.invalid || void 0,
-				disabled: n.disabled,
-				readonly: n.readonly,
-				required: n.required,
-				name: n.name || void 0,
-				placeholder: n.placeholder,
-				value: p.value,
-				onInput: N,
-				onFocus: P,
-				onBlur: F,
-				onKeydown: I
-			}, null, 40, xt), a("span", St, [s(L, {
-				name: "chevron-down",
-				size: "sm"
-			})])]),
-			m.value ? (g(), i("ul", {
+			a("div", bt, [
+				a("input", {
+					ref_key: "inputRef",
+					ref: f,
+					class: "atl-combobox-input",
+					type: "text",
+					autocomplete: "off",
+					role: "combobox",
+					id: C,
+					"aria-expanded": _.value,
+					"aria-controls": w,
+					"aria-autocomplete": "list",
+					"aria-activedescendant": k.value,
+					"aria-invalid": o.invalid || void 0,
+					"aria-describedby": o.errors.length > 0 ? T : void 0,
+					disabled: o.disabled,
+					readonly: o.readonly,
+					required: o.required,
+					name: o.name || void 0,
+					placeholder: o.placeholder,
+					value: m.value,
+					onInput: F,
+					onFocus: I,
+					onBlur: L,
+					onKeydown: z
+				}, null, 40, xt),
+				o.invalid ? (g(), n(R, {
+					key: 0,
+					name: "danger",
+					size: "sm",
+					class: "invalid-icon"
+				})) : r("", !0),
+				a("span", St, [s(R, {
+					name: "chevron-down",
+					size: "sm"
+				})])
+			]),
+			_.value ? (g(), i("ul", {
 				key: 0,
-				id: C,
+				id: w,
 				class: "atl-combobox-panel",
 				role: "listbox",
-				"aria-labelledby": x
-			}, [T.value.length > 0 ? (g(!0), i(e, { key: 0 }, y(T.value, (e, t) => (g(), i("li", {
+				"aria-labelledby": C
+			}, [D.value.length > 0 ? (g(!0), i(e, { key: 0 }, y(D.value, (e, t) => (g(), i("li", {
 				key: e.value,
-				id: `${C}-option-${t}`,
+				id: `${w}-option-${t}`,
 				role: "option",
 				class: d([
 					"atl-combobox-option",
-					_.value === t && "is-active",
-					e.value === n.value && "is-selected",
+					b.value === t && "is-active",
+					e.value === o.value && "is-selected",
 					e.disabled && "is-disabled"
 				]),
-				"aria-selected": e.value === n.value,
+				"aria-selected": e.value === o.value,
 				"aria-disabled": e.disabled || void 0,
-				onMousedown: (t) => M(e),
-				onMouseenter: (e) => _.value = t
-			}, [a("span", null, S(e.label), 1), s(L, {
+				onMousedown: (t) => P(e),
+				onMouseenter: (e) => b.value = t
+			}, [a("span", null, S(e.label), 1), s(R, {
 				name: "check",
 				size: "sm",
 				class: "atl-combobox-check"
 			})], 42, Ct))), 128)) : (g(), i("li", wt, " No results found. "))])) : r("", !0),
-			n.invalid && n.errors.length > 0 ? (g(), i("div", Tt, [(g(!0), i(e, null, y(n.errors, (e, t) => (g(), i("p", {
+			o.errors.length > 0 ? (g(), i("div", {
+				key: 1,
+				id: T,
+				class: "atl-combobox-errors",
+				"aria-live": "polite"
+			}, [(g(!0), i(e, null, y(o.errors, (e, t) => (g(), i("p", {
 				key: t,
 				class: "atl-combobox-error-message"
 			}, S(e), 1))), 128))])) : r("", !0)
 		], 2));
 	}
-}), Dt = ["aria-invalid", "aria-required"], Ot = {
+}), Et = ["aria-invalid", "aria-required"], Dt = {
 	key: 0,
 	class: "errors",
 	role: "alert"
-}, q = Symbol("AtlRadioGroup"), kt = /* @__PURE__ */ c({
+}, q = Symbol("AtlRadioGroup"), Ot = /* @__PURE__ */ c({
 	name: "AtlRadioGroup",
 	__name: "atl-radio-group",
 	props: {
@@ -1321,20 +1355,20 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 			"aria-invalid": n.invalid || void 0,
 			"aria-required": n.required || void 0,
 			onKeydown: u
-		}, [b(t.$slots, "default"), n.errors.length > 0 ? (g(), i("div", Ot, [(g(!0), i(e, null, y(n.errors, (e, t) => (g(), i("p", {
+		}, [b(t.$slots, "default"), n.errors.length > 0 ? (g(), i("div", Dt, [(g(!0), i(e, null, y(n.errors, (e, t) => (g(), i("p", {
 			key: t,
 			class: "error-message"
-		}, S(e), 1))), 128))])) : r("", !0)], 42, Dt));
+		}, S(e), 1))), 128))])) : r("", !0)], 42, Et));
 	}
-}), At = [
+}), kt = [
 	"name",
 	"value",
 	"checked",
 	"disabled"
-], jt = {
+], At = {
 	key: 0,
 	class: "radio-text"
-}, Mt = /* @__PURE__ */ c({
+}, jt = /* @__PURE__ */ c({
 	name: "AtlRadio",
 	__name: "atl-radio",
 	props: {
@@ -1374,15 +1408,15 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 				onClick: p,
 				class: "radio-input",
 				onChange: f
-			}, null, 40, At),
+			}, null, 40, kt),
 			n[0] ||= a("span", {
 				class: "radio-indicator",
 				"aria-hidden": "true"
 			}, null, -1),
-			t.$slots.default ? (g(), i("span", jt, [b(t.$slots, "default")])) : r("", !0)
+			t.$slots.default ? (g(), i("span", At, [b(t.$slots, "default")])) : r("", !0)
 		], 2));
 	}
-}), Nt = ["for"], Pt = { class: "select-wrapper" }, Ft = [
+}), Mt = ["for"], Nt = { class: "select-wrapper" }, Pt = [
 	"id",
 	"name",
 	"value",
@@ -1390,11 +1424,14 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 	"required",
 	"aria-invalid",
 	"aria-describedby"
-], It = {
+], Ft = {
 	key: 0,
 	value: "",
 	disabled: "",
 	hidden: ""
+}, It = {
+	class: "select-arrow",
+	"aria-hidden": "true"
 }, Lt = ["id"], Rt = /* @__PURE__ */ c({
 	name: "AtlSelect",
 	__name: "atl-select",
@@ -1418,41 +1455,50 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 		name: { default: void 0 }
 	},
 	emits: ["update:value"],
-	setup(n, { emit: o }) {
-		let s = n, c = o, l = T(), u = T(), f = t(() => [
+	setup(o, { emit: c }) {
+		let l = o, u = c, f = T(), p = T(), m = t(() => [
 			"atl-select",
-			s.invalid && "is-invalid",
-			s.disabled && "is-disabled"
+			l.invalid && "is-invalid",
+			l.disabled && "is-disabled"
 		]);
-		function p(e) {
-			s.disabled || c("update:value", e.target.value);
+		function h(e) {
+			l.disabled || u("update:value", e.target.value);
 		}
-		return (t, o) => (g(), i("div", { class: d(f.value) }, [
-			n.label ? (g(), i("label", {
+		return (t, c) => (g(), i("div", { class: d(m.value) }, [
+			o.label ? (g(), i("label", {
 				key: 0,
-				for: w(l),
+				for: w(f),
 				class: "select-label"
-			}, S(n.label), 9, Nt)) : r("", !0),
-			a("div", Pt, [a("select", {
-				id: w(l),
-				name: n.name,
-				value: n.value,
-				disabled: n.disabled,
-				required: n.required,
-				"aria-invalid": n.invalid || void 0,
-				"aria-describedby": n.errors.length > 0 ? w(u) : void 0,
-				class: "select-native",
-				onChange: p
-			}, [n.placeholder ? (g(), i("option", It, S(n.placeholder), 1)) : r("", !0), b(t.$slots, "default")], 40, Ft), o[0] ||= a("span", {
-				class: "select-arrow",
-				"aria-hidden": "true"
-			}, "▾", -1)]),
-			n.errors.length > 0 ? (g(), i("div", {
+			}, S(o.label), 9, Mt)) : r("", !0),
+			a("div", Nt, [
+				a("select", {
+					id: w(f),
+					name: o.name,
+					value: o.value,
+					disabled: o.disabled,
+					required: o.required,
+					"aria-invalid": o.invalid || void 0,
+					"aria-describedby": o.errors.length > 0 ? w(p) : void 0,
+					class: "select-native",
+					onChange: h
+				}, [o.placeholder ? (g(), i("option", Ft, S(o.placeholder), 1)) : r("", !0), b(t.$slots, "default")], 40, Pt),
+				o.invalid ? (g(), n(R, {
+					key: 0,
+					name: "danger",
+					size: "sm",
+					class: "invalid-icon"
+				})) : r("", !0),
+				a("span", It, [s(R, {
+					name: "chevron-down",
+					size: "sm"
+				})])
+			]),
+			o.errors.length > 0 ? (g(), i("div", {
 				key: 1,
-				id: w(u),
+				id: w(p),
 				class: "errors",
-				role: "alert"
-			}, [(g(!0), i(e, null, y(n.errors, (e, t) => (g(), i("p", {
+				"aria-live": "polite"
+			}, [(g(!0), i(e, null, y(o.errors, (e, t) => (g(), i("p", {
 				key: t,
 				class: "error-message"
 			}, S(e), 1))), 128))], 8, Lt)) : r("", !0)
@@ -1601,11 +1647,11 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 			tabindex: f.value === s ? 0 : -1,
 			disabled: t.disabled || void 0,
 			onClick: (e) => w(s)
-		}, [t.completed && !t.error ? (g(), n(L, {
+		}, [t.completed && !t.error ? (g(), n(R, {
 			key: 0,
 			name: "check",
 			size: "sm"
-		})) : t.error ? (g(), n(L, {
+		})) : t.error ? (g(), n(R, {
 			key: 1,
 			name: "close",
 			size: "sm"
@@ -1792,11 +1838,11 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 			type: "button",
 			class: "atl-th-sort-btn",
 			onClick: u
-		}, [b(t.$slots, "default"), a("span", ln, [s(L, {
+		}, [b(t.$slots, "default"), a("span", ln, [s(R, {
 			name: "sort-asc",
 			size: "sm",
 			class: "atl-th-sort-asc-arrow"
-		}), s(L, {
+		}), s(R, {
 			name: "sort-desc",
 			size: "sm",
 			class: "atl-th-sort-desc-arrow"
@@ -1935,12 +1981,9 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 	"readonly",
 	"required",
 	"name",
-	"aria-invalid"
-], bn = {
-	key: 1,
-	class: "errors",
-	"aria-live": "polite"
-}, xn = /* @__PURE__ */ c({
+	"aria-invalid",
+	"aria-describedby"
+], bn = ["id"], xn = /* @__PURE__ */ c({
 	name: "AtlTextarea",
 	__name: "atl-textarea",
 	props: {
@@ -1974,15 +2017,15 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 	},
 	emits: ["update:value"],
 	setup(o, { emit: s }) {
-		let c = o, l = s, f = v(null), p = t(() => c.id || (c.label ? `textarea-${Math.random().toString(36).slice(2)}` : void 0));
-		function h() {
-			c.autoResize && f.value && (f.value.style.height = "auto", f.value.style.height = `${f.value.scrollHeight}px`);
+		let c = o, l = T(), f = s, p = v(null), h = t(() => c.id || (c.label ? `textarea-${Math.random().toString(36).slice(2)}` : void 0));
+		function _() {
+			c.autoResize && p.value && (p.value.style.height = "auto", p.value.style.height = `${p.value.scrollHeight}px`);
 		}
 		O(() => c.value, async () => {
-			await u(), h();
-		}), m(() => h());
-		function _(e) {
-			l("update:value", e.target.value), h();
+			await u(), _();
+		}), m(() => _());
+		function b(e) {
+			f("update:value", e.target.value), _();
 		}
 		return (t, s) => (g(), i("div", { class: d(["atl-textarea", {
 			"is-invalid": o.invalid,
@@ -1990,13 +2033,13 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 		}]) }, [
 			o.label ? (g(), i("label", {
 				key: 0,
-				for: p.value,
+				for: h.value,
 				class: "textarea-label"
 			}, S(o.label), 9, _n)) : r("", !0),
 			a("div", vn, [a("textarea", {
-				id: p.value,
+				id: h.value,
 				ref_key: "textareaRef",
-				ref: f,
+				ref: p,
 				value: o.value,
 				rows: o.rows,
 				placeholder: o.placeholder,
@@ -2005,17 +2048,23 @@ var j = Symbol("AtlAccordionGroup"), M = /* @__PURE__ */ c({
 				required: o.required,
 				name: o.name,
 				"aria-invalid": o.invalid || void 0,
-				onInput: _
-			}, null, 40, yn), o.invalid ? (g(), n(L, {
+				"aria-describedby": o.errors.length > 0 ? w(l) : void 0,
+				onInput: b
+			}, null, 40, yn), o.invalid ? (g(), n(R, {
 				key: 0,
 				name: "danger",
 				size: "sm",
 				class: "invalid-icon"
 			})) : r("", !0)]),
-			o.errors.length ? (g(), i("ul", bn, [(g(!0), i(e, null, y(o.errors, (e, t) => (g(), i("li", {
+			o.errors.length ? (g(), i("ul", {
+				key: 1,
+				id: w(l),
+				class: "errors",
+				"aria-live": "polite"
+			}, [(g(!0), i(e, null, y(o.errors, (e, t) => (g(), i("li", {
 				key: t,
 				class: "error"
-			}, S(e), 1))), 128))])) : r("", !0)
+			}, S(e), 1))), 128))], 8, bn)) : r("", !0)
 		], 2));
 	}
 }), X = Symbol("AtlToast");
@@ -2083,7 +2132,7 @@ var Cn = /* @__PURE__ */ c({
 			type: "button",
 			"aria-label": "Dismiss",
 			onClick: n[0] ||= (t) => c("dismiss", e.data.id)
-		}, [s(L, {
+		}, [s(R, {
 			name: "close",
 			size: "sm"
 		})])) : r("", !0)], 2));
@@ -2251,10 +2300,10 @@ var Cn = /* @__PURE__ */ c({
 			type: "button",
 			"aria-label": l.value ? "Copied" : "Copy code",
 			onClick: f
-		}, [l.value ? (g(), i(e, { key: 0 }, [s(L, {
+		}, [l.value ? (g(), i(e, { key: 0 }, [s(R, {
 			name: "check",
 			size: "sm"
-		}), c[0] ||= o(" Copied ", -1)], 64)) : (g(), i(e, { key: 1 }, [s(L, {
+		}), c[0] ||= o(" Copied ", -1)], 64)) : (g(), i(e, { key: 1 }, [s(R, {
 			name: "copy",
 			size: "sm"
 		}), c[1] ||= o(" Copy ", -1)], 64))], 8, Pn)) : r("", !0)]), a("div", Fn, [a("pre", In, [a("code", null, [n.showLineNumbers ? (g(!0), i(e, { key: 0 }, y(d.value, (e, t) => (g(), i("span", {
@@ -2365,7 +2414,7 @@ var Cn = /* @__PURE__ */ c({
 			class: "close-btn",
 			"aria-label": "Close chat",
 			onClick: n[0] ||= (e) => w(t).close()
-		}, [s(L, {
+		}, [s(R, {
 			name: "close",
 			size: "sm"
 		})])], 8, Wn));
@@ -2526,4 +2575,4 @@ var Cn = /* @__PURE__ */ c({
 	}
 });
 //#endregion
-export { M as AtlAccordionGroup, ie as AtlAccordionHeader, ne as AtlAccordionItem, se as AtlAlert, de as AtlAvatar, z as AtlAvatarGroup, B as AtlBadge, me as AtlBreadcrumbItem, H as AtlBreadcrumbs, _e as AtlButton, ye as AtlCard, Ce as AtlCardContent, Te as AtlCardFooter, xe as AtlCardHeader, Un as AtlChat, Kn as AtlChatHeader, rr as AtlChatInput, $ as AtlChatKey, Jn as AtlChatMessage, qn as AtlChatMessages, $n as AtlChatSuggestion, Yn as AtlChatTyping, U as AtlCheckbox, zn as AtlCodeBlock, Et as AtlCombobox, Ae as AtlDialog, Fe as AtlDialogContent, Le as AtlDialogFooter, Ne as AtlDialogHeader, ze as AtlDrawer, We as AtlDrawerContent, Ke as AtlDrawerFooter, He as AtlDrawerHeader, L as AtlIcon, Ze as AtlInput, et as AtlMenu, nt as AtlMenuItem, it as AtlMenuSeparator, $e as AtlMenuTrigger, Bt as AtlOption, gt as AtlPagination, yt as AtlProgress, Mt as AtlRadio, kt as AtlRadioGroup, Rt as AtlSelect, Vt as AtlSkeleton, Zt as AtlStep, Yt as AtlStepper, gn as AtlTab, mn as AtlTabGroup, $t as AtlTable, rn as AtlTbody, dn as AtlTd, xn as AtlTextarea, un as AtlTh, en as AtlThead, Tn as AtlToastContainer, Z as AtlToastItem, Cn as AtlToastProvider, kn as AtlToggle, An as AtlTooltip, sn as AtlTr, Sn as useAtlToast };
+export { M as AtlAccordionGroup, ne as AtlAccordionHeader, ee as AtlAccordionItem, ae as AtlAlert, le as AtlAvatar, de as AtlAvatarGroup, B as AtlBadge, me as AtlBreadcrumbItem, H as AtlBreadcrumbs, _e as AtlButton, ye as AtlCard, Ce as AtlCardContent, Te as AtlCardFooter, xe as AtlCardHeader, Un as AtlChat, Kn as AtlChatHeader, rr as AtlChatInput, $ as AtlChatKey, Jn as AtlChatMessage, qn as AtlChatMessages, $n as AtlChatSuggestion, Yn as AtlChatTyping, U as AtlCheckbox, zn as AtlCodeBlock, Tt as AtlCombobox, Ae as AtlDialog, Fe as AtlDialogContent, Le as AtlDialogFooter, Ne as AtlDialogHeader, ze as AtlDrawer, We as AtlDrawerContent, Ke as AtlDrawerFooter, He as AtlDrawerHeader, R as AtlIcon, Ze as AtlInput, et as AtlMenu, nt as AtlMenuItem, it as AtlMenuSeparator, $e as AtlMenuTrigger, Bt as AtlOption, gt as AtlPagination, yt as AtlProgress, jt as AtlRadio, Ot as AtlRadioGroup, Rt as AtlSelect, Vt as AtlSkeleton, Zt as AtlStep, Yt as AtlStepper, gn as AtlTab, mn as AtlTabGroup, $t as AtlTable, rn as AtlTbody, dn as AtlTd, xn as AtlTextarea, un as AtlTh, en as AtlThead, Tn as AtlToastContainer, Z as AtlToastItem, Cn as AtlToastProvider, kn as AtlToggle, An as AtlTooltip, sn as AtlTr, Sn as useAtlToast };