@well-insight/ui 0.1.10 → 0.1.11

package/dist/textarea/index.js

@@ -1,9 +1,10 @@
-import { i as e, o as t, s as n } from "../config-DWwce9jA.js";
-import { n as r } from "../locale-CYkJyRd1.js";
+import { t as e } from "../Icon-DHGs8l-M.js";
+import { i as t, o as n, s as r } from "../config-CTLkobga.js";
+import { n as i } from "../locale-DxAvgqgB.js";
 import "./style.js";
-import { computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, mergeProps as l, nextTick as u, normalizeClass as d, onMounted as f, openBlock as p, ref as m, toDisplayString as h, unref as g, useAttrs as _, watch as v } from "vue";
+import { computed as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, mergeProps as d, nextTick as f, normalizeClass as p, onMounted as m, openBlock as h, ref as g, toDisplayString as _, unref as v, useAttrs as y, watch as b } from "vue";
 //#region src/components/Textarea/Textarea.vue?vue&type=script&setup=true&lang.ts
-var y = ["for"], b = [
+var x = ["for"], S = [
 	"id",
 	"value",
 	"rows",
@@ -12,10 +13,10 @@ var y = ["for"], b = [
 	"maxlength",
 	"aria-invalid",
 	"aria-describedby"
-], x = ["aria-label", "disabled"], S = {
+], C = ["aria-label", "disabled"], w = {
 	key: 1,
 	class: "wi-textarea-field__meta"
-}, C = ["id", "role"], w = ["id"], T = /* @__PURE__ */ c({
+}, T = ["id", "role"], E = ["id"], D = /* @__PURE__ */ u({
 	inheritAttrs: !1,
 	__name: "Textarea",
 	props: {
@@ -26,10 +27,6 @@ var y = ["for"], b = [
 			type: Boolean,
 			default: !1
 		},
-		error: {
-			type: Boolean,
-			default: !1
-		},
 		errorMessage: {},
 		id: {},
 		rows: {},
@@ -38,10 +35,6 @@ var y = ["for"], b = [
 			type: [Boolean, Object],
 			default: void 0
 		},
-		autoResize: {
-			type: Boolean,
-			default: void 0
-		},
 		size: {},
 		variant: {},
 		fluid: {
@@ -67,32 +60,30 @@ var y = ["for"], b = [
 		}
 	},
 	emits: ["update:modelValue", "clear"],
-	setup(c, { expose: T, emit: E }) {
-		let D = c, O = E, k = _(), A = e("Textarea"), j = r(), M = m(null), N = i(() => D.id ?? `wi-textarea-${Math.random().toString(36).slice(2, 8)}`), P = i(() => D.invalid || D.error || !!D.errorMessage), F = t("Textarea", () => D.size), I = n("Textarea", () => D.variant), L = i(() => D.fluid ?? A.value.fluid ?? !1), R = i(() => D.clearable ?? A.value.clearable ?? !1), z = i(() => D.showCount ?? A.value.showCount ?? !1), B = i(() => {
-			if (D.autosize !== void 0 && D.autosize !== !1) return D.autosize;
-			if (D.autoResize) return !0;
-			let e = A.value.autosize;
-			return e !== void 0 && e !== !1 ? e : !!A.value.autoResize;
-		}), V = i(() => {
-			let e = B.value;
-			return typeof e == "object" && e.minRows != null ? e.minRows : D.rows ?? A.value.rows ?? 4;
-		}), H = i(() => !!B.value), U = i(() => H.value ? "none" : D.resize), W = i(() => D.errorMessage || D.helpText), G = i(() => !!D.errorMessage || P.value && !!D.helpText), K = i(() => (D.modelValue ?? "").length), q = i(() => D.maxlength == null ? String(K.value) : `${K.value} / ${D.maxlength}`), J = i(() => R.value && !!D.modelValue), Y = i(() => {
+	setup(u, { expose: D, emit: O }) {
+		let k = u, A = O, j = y(), M = t("Textarea"), N = i(), P = g(null), F = a(() => k.id ?? `wi-textarea-${Math.random().toString(36).slice(2, 8)}`), I = a(() => k.invalid || !!k.errorMessage), L = n("Textarea", () => k.size), R = r("Textarea", () => k.variant), z = a(() => k.fluid ?? M.value.fluid ?? !1), B = a(() => k.clearable ?? M.value.clearable ?? !1), V = a(() => k.showCount ?? M.value.showCount ?? !1), H = a(() => {
+			if (k.autosize !== void 0 && k.autosize !== !1) return k.autosize;
+			let e = M.value.autosize;
+			return e !== void 0 && e !== !1 && e;
+		}), U = a(() => {
+			let e = H.value;
+			return typeof e == "object" && e.minRows != null ? e.minRows : k.rows ?? M.value.rows ?? 4;
+		}), W = a(() => !!H.value), G = a(() => W.value ? "none" : k.resize), K = a(() => k.errorMessage || k.helpText), q = a(() => !!k.errorMessage || I.value && !!k.helpText), J = a(() => (k.modelValue ?? "").length), Y = a(() => k.maxlength == null ? String(J.value) : `${J.value} / ${k.maxlength}`), X = a(() => B.value && !!k.modelValue), Z = a(() => {
 			let e = [];
-			return W.value && e.push(`${N.value}-help`), z.value && e.push(`${N.value}-count`), e.length ? e.join(" ") : void 0;
-		}), X = i(() => [
+			return K.value && e.push(`${F.value}-help`), V.value && e.push(`${F.value}-count`), e.length ? e.join(" ") : void 0;
+		}), Q = a(() => [
 			"wi-textarea",
-			`wi-textarea--${F.value}`,
+			`wi-textarea--${L.value}`,
 			{
-				"wi-textarea--filled": I.value === "filled",
-				"wi-textarea--fluid": L.value,
-				"wi-textarea--invalid": P.value,
-				"wi-textarea--error": P.value,
-				"wi-textarea--auto-resize": H.value,
-				"wi-textarea--clearable": J.value
+				"wi-textarea--filled": R.value === "filled",
+				"wi-textarea--fluid": z.value,
+				"wi-textarea--invalid": I.value,
+				"wi-textarea--auto-resize": W.value,
+				"wi-textarea--clearable": X.value
 			}
 		]);
-		function Z() {
-			let e = M.value, t = B.value;
+		function $() {
+			let e = P.value, t = H.value;
 			if (!e || !t) return;
 			e.style.height = "auto";
 			let n = e.scrollHeight;
@@ -103,60 +94,63 @@ var y = ["for"], b = [
 			}
 			e.style.height = `${n}px`;
 		}
-		function Q(e) {
-			O("update:modelValue", e.target.value), H.value && Z();
+		function ee(e) {
+			A("update:modelValue", e.target.value), W.value && $();
 		}
-		function $() {
-			D.disabled || D.readonly || (O("update:modelValue", ""), O("clear"), M.value?.focus(), H.value && u(Z));
+		function te() {
+			k.disabled || k.readonly || (A("update:modelValue", ""), A("clear"), P.value?.focus(), W.value && f($));
 		}
-		function ee() {
-			M.value?.focus();
+		function ne() {
+			P.value?.focus();
 		}
-		return T({ focus: ee }), v(() => [D.modelValue, B.value], async () => {
-			H.value && (await u(), Z());
-		}), f(() => {
-			H.value && Z();
-		}), (e, t) => (p(), o("div", { class: d(["wi-textarea-field", { "wi-textarea-field--fluid": L.value }]) }, [
-			c.label ? (p(), o("label", {
+		return D({ focus: ne }), b(() => [k.modelValue, H.value], async () => {
+			W.value && (await f(), $());
+		}), m(() => {
+			W.value && $();
+		}), (t, n) => (h(), s("div", { class: p(["wi-textarea-field", { "wi-textarea-field--fluid": z.value }]) }, [
+			u.label ? (h(), s("label", {
 				key: 0,
 				class: "wi-textarea-field__label",
-				for: N.value
-			}, h(c.label), 9, y)) : a("", !0),
-			s("div", { class: d(["wi-textarea-field__control", { "wi-textarea-field__control--clearable": J.value }]) }, [s("textarea", l(g(k), {
-				id: N.value,
+				for: F.value
+			}, _(u.label), 9, x)) : o("", !0),
+			c("div", { class: p(["wi-textarea-field__control", { "wi-textarea-field__control--clearable": X.value }]) }, [c("textarea", d(v(j), {
+				id: F.value,
 				ref_key: "textareaElement",
-				ref: M,
-				class: X.value,
-				value: c.modelValue,
-				rows: V.value,
-				disabled: c.disabled,
-				readonly: c.readonly,
-				maxlength: c.maxlength,
-				"aria-invalid": P.value || void 0,
-				"aria-describedby": Y.value,
-				style: { resize: U.value },
-				onInput: Q
-			}), null, 16, b), J.value ? (p(), o("button", {
+				ref: P,
+				class: Q.value,
+				value: u.modelValue,
+				rows: U.value,
+				disabled: u.disabled,
+				readonly: u.readonly,
+				maxlength: u.maxlength,
+				"aria-invalid": I.value || void 0,
+				"aria-describedby": Z.value,
+				style: { resize: G.value },
+				onInput: ee
+			}), null, 16, S), X.value ? (h(), s("button", {
 				key: 0,
 				class: "wi-textarea__clear",
 				type: "button",
-				"aria-label": g(j).clearInput,
-				disabled: c.disabled || c.readonly,
-				onClick: $
-			}, " × ", 8, x)) : a("", !0)], 2),
-			W.value || z.value ? (p(), o("div", S, [W.value ? (p(), o("span", {
+				"aria-label": v(N).clearInput,
+				disabled: u.disabled || u.readonly,
+				onClick: te
+			}, [l(e, {
+				name: "close",
+				size: "sm"
+			})], 8, C)) : o("", !0)], 2),
+			K.value || V.value ? (h(), s("div", w, [K.value ? (h(), s("span", {
 				key: 0,
-				id: `${N.value}-help`,
-				class: d(["wi-textarea-field__help", { "wi-textarea-field__help--error": G.value }]),
-				role: G.value ? "alert" : void 0
-			}, h(W.value), 11, C)) : a("", !0), z.value ? (p(), o("span", {
+				id: `${F.value}-help`,
+				class: p(["wi-textarea-field__help", { "wi-textarea-field__help--invalid": q.value }]),
+				role: q.value ? "alert" : void 0
+			}, _(K.value), 11, T)) : o("", !0), V.value ? (h(), s("span", {
 				key: 1,
-				id: `${N.value}-count`,
+				id: `${F.value}-count`,
 				class: "wi-textarea-field__count",
 				"aria-live": "polite"
-			}, h(q.value), 9, w)) : a("", !0)])) : a("", !0)
+			}, _(Y.value), 9, E)) : o("", !0)])) : o("", !0)
 		], 2));
 	}
 });
 //#endregion
-export { T as WiTextarea };
+export { D as WiTextarea };

package/dist/textarea/style.css

@@ -480,8 +480,8 @@
     font-size: var(--wi-font-size-xs);
 }
 
-.wi-textarea-field__help--error,
-.wi-select-field__help--error {
+.wi-textarea-field__help--invalid,
+.wi-select-field__help--invalid {
     color: var(--wi-color-danger);
 }
 
@@ -500,9 +500,8 @@
 }
 
 .wi-textarea--invalid:focus-visible,
-.wi-textarea--error:focus-visible,
-.wi-select--error.wi-select--open,
-.wi-select--error:focus-visible {
+.wi-select--invalid.wi-select--open,
+.wi-select--invalid:focus-visible {
     border-color: var(--wi-color-danger);
     box-shadow: var(--wi-focus-shadow-danger);
 }
@@ -750,6 +749,45 @@
     line-height: 1;
 }
 
+.wi-icon {
+    display: inline-flex;
+    height: 1rem;
+    width: 1rem;
+}
+
+.wi-icon svg {
+    height: 100%;
+    width: 100%;
+}
+
+.wi-icon--sm,
+.wi-icon--small {
+    height: 0.875rem;
+    width: 0.875rem;
+}
+
+.wi-icon--md,
+.wi-icon--normal {
+    height: 1rem;
+    width: 1rem;
+}
+
+.wi-icon--lg,
+.wi-icon--large {
+    height: 1.25rem;
+    width: 1.25rem;
+}
+
+.wi-icon--spin svg {
+    animation: wi-icon-spin 0.8s linear infinite;
+}
+
+@keyframes wi-icon-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 .wi-textarea {
     --wi-textarea-min-height: 6rem;
     --wi-textarea-min-height-small: 4.5rem;
@@ -832,8 +870,7 @@
     opacity: var(--wi-opacity-disabled);
 }
 
-.wi-textarea--invalid,
-.wi-textarea--error {
+.wi-textarea--invalid {
     border-color: var(--wi-color-danger);
 }
 

package/dist/textarea/style.js

@@ -1,3 +1,4 @@
 import '../theme/styles.css'
 import '../styles/base.css'
+import '../components/Icon/styles.css'
 import '../components/Textarea/styles.css'

package/dist/tiered-menu/index.js

@@ -1,51 +1,52 @@
-import { n as e, t } from "../overlay-oR-5MDuE.js";
-import { c as n } from "../config-DWwce9jA.js";
+import { t as e } from "../Icon-DHGs8l-M.js";
+import { n as t, t as n } from "../overlay-oR-5MDuE.js";
+import { c as r } from "../config-CTLkobga.js";
 import "./style.js";
-import { Fragment as r, Teleport as i, Transition as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, normalizeClass as p, onBeforeUnmount as m, openBlock as h, ref as g, renderList as _, toDisplayString as v, watch as y, withCtx as b } from "vue";
+import { Fragment as i, Teleport as a, Transition as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, normalizeClass as m, onBeforeUnmount as h, openBlock as g, ref as _, renderList as v, toDisplayString as y, watch as b, withCtx as x } from "vue";
 //#region src/components/TieredMenu/TieredMenu.vue?vue&type=script&setup=true&lang.ts
-var x = ["onMouseenter"], S = {
+var S = ["onMouseenter"], C = {
 	key: 0,
 	class: "wi-tieredmenu__separator",
 	role: "separator"
-}, C = [
+}, w = [
 	"disabled",
 	"aria-haspopup",
 	"aria-expanded",
 	"onClick"
-], w = {
+], T = {
 	key: 0,
 	class: "wi-tieredmenu__caret",
 	"aria-hidden": "true"
-}, T = {
+}, E = {
 	key: 2,
 	class: "wi-tieredmenu__submenu",
 	role: "menu"
-}, E = {
+}, D = {
 	key: 0,
 	class: "wi-tieredmenu__separator",
 	role: "separator"
-}, D = ["disabled", "onClick"], O = ["onMouseenter"], k = {
+}, O = ["disabled", "onClick"], k = ["onMouseenter"], A = {
 	key: 0,
 	class: "wi-tieredmenu__separator",
 	role: "separator"
-}, A = [
+}, j = [
 	"disabled",
 	"aria-haspopup",
 	"aria-expanded",
 	"onClick"
-], j = {
+], M = {
 	key: 0,
 	class: "wi-tieredmenu__caret",
 	"aria-hidden": "true"
-}, M = {
+}, N = {
 	key: 2,
 	class: "wi-tieredmenu__submenu",
 	role: "menu"
-}, N = {
+}, P = {
 	key: 0,
 	class: "wi-tieredmenu__separator",
 	role: "separator"
-}, P = ["disabled", "onClick"], F = /* @__PURE__ */ f({
+}, F = ["disabled", "onClick"], I = /* @__PURE__ */ p({
 	__name: "TieredMenu",
 	props: {
 		model: {},
@@ -64,87 +65,93 @@ var x = ["onMouseenter"], S = {
 		appendTo: {}
 	},
 	emits: ["update:modelValue"],
-	setup(f, { emit: F }) {
-		let I = f, L = F, R = n(), z = g(null), B = g(null), V = o(() => e(I.popup ? I : { teleport: !1 }, R.value.appendTo)), H = o(() => I.popup && t(I, R.value.appendTo));
-		function U(e) {
-			e.disabled || e.separator || e.items?.length || (e.command?.(), B.value = null, I.popup && L("update:modelValue", !1));
-		}
+	setup(p, { emit: I }) {
+		let L = p, R = I, z = r(), B = _(null), V = _(null), H = s(() => t(L.popup ? L : { teleport: !1 }, z.value.appendTo)), U = s(() => L.popup && n(L, z.value.appendTo));
 		function W(e) {
-			e.disabled || e.separator || (e.command?.(), B.value = null, I.popup && L("update:modelValue", !1));
+			e.disabled || e.separator || e.items?.length || (e.command?.(), V.value = null, L.popup && R("update:modelValue", !1));
+		}
+		function G(e) {
+			e.disabled || e.separator || (e.command?.(), V.value = null, L.popup && R("update:modelValue", !1));
 		}
-		function G(e, t) {
+		function K(e, t) {
 			if (t.disabled || !t.items?.length) {
-				B.value = null;
+				V.value = null;
 				return;
 			}
-			B.value = e;
+			V.value = e;
 		}
-		function K(e) {
-			z.value && !z.value.contains(e.target) && (B.value = null, I.popup && I.modelValue && L("update:modelValue", !1));
+		function q(e) {
+			B.value && !B.value.contains(e.target) && (V.value = null, L.popup && L.modelValue && R("update:modelValue", !1));
 		}
-		return y(() => !!(!I.popup || I.modelValue), (e) => {
-			e ? document.addEventListener("click", K) : document.removeEventListener("click", K);
-		}, { immediate: !0 }), m(() => document.removeEventListener("click", K)), (e, t) => f.popup ? (h(), s(i, {
+		return b(() => !!(!L.popup || L.modelValue), (e) => {
+			e ? document.addEventListener("click", q) : document.removeEventListener("click", q);
+		}, { immediate: !0 }), h(() => document.removeEventListener("click", q)), (t, n) => p.popup ? (g(), c(a, {
 			key: 1,
-			to: V.value.to,
-			disabled: V.value.disabled
-		}, [d(a, { name: "wi-scale-fade" }, {
-			default: b(() => [f.modelValue ? (h(), l("div", {
+			to: H.value.to,
+			disabled: H.value.disabled
+		}, [f(o, { name: "wi-scale-fade" }, {
+			default: x(() => [p.modelValue ? (g(), u("div", {
 				key: 0,
 				ref_key: "root",
-				ref: z,
-				class: p(["wi-tieredmenu wi-tieredmenu--popup", { "wi-tieredmenu--teleported": H.value }]),
+				ref: B,
+				class: m(["wi-tieredmenu wi-tieredmenu--popup", { "wi-tieredmenu--teleported": U.value }]),
 				role: "menu"
-			}, [(h(!0), l(r, null, _(f.model, (e, t) => (h(), l("div", {
-				key: `${e.label ?? "sep"}-${t}`,
+			}, [(g(!0), u(i, null, v(p.model, (t, n) => (g(), u("div", {
+				key: `${t.label ?? "sep"}-${n}`,
 				class: "wi-tieredmenu__row",
-				onMouseenter: (n) => G(t, e)
-			}, [e.separator ? (h(), l("div", k)) : (h(), l("button", {
+				onMouseenter: (e) => K(n, t)
+			}, [t.separator ? (g(), u("div", A)) : (g(), u("button", {
 				key: 1,
 				type: "button",
 				class: "wi-tieredmenu__item",
 				role: "menuitem",
-				disabled: e.disabled,
-				"aria-haspopup": e.items?.length ? "menu" : void 0,
-				"aria-expanded": e.items?.length ? B.value === t : void 0,
-				onClick: (n) => e.items?.length ? G(t, e) : U(e)
-			}, [u("span", null, v(e.label), 1), e.items?.length ? (h(), l("span", j, "▸")) : c("", !0)], 8, A)), e.items?.length && B.value === t ? (h(), l("div", M, [(h(!0), l(r, null, _(e.items, (e, t) => (h(), l(r, { key: `${e.label ?? "sep"}-${t}` }, [e.separator ? (h(), l("div", N)) : (h(), l("button", {
+				disabled: t.disabled,
+				"aria-haspopup": t.items?.length ? "menu" : void 0,
+				"aria-expanded": t.items?.length ? V.value === n : void 0,
+				onClick: (e) => t.items?.length ? K(n, t) : W(t)
+			}, [d("span", null, y(t.label), 1), t.items?.length ? (g(), u("span", M, [f(e, {
+				name: "chevron-right",
+				size: "sm"
+			})])) : l("", !0)], 8, j)), t.items?.length && V.value === n ? (g(), u("div", N, [(g(!0), u(i, null, v(t.items, (e, t) => (g(), u(i, { key: `${e.label ?? "sep"}-${t}` }, [e.separator ? (g(), u("div", P)) : (g(), u("button", {
 				key: 1,
 				type: "button",
 				class: "wi-tieredmenu__item",
 				role: "menuitem",
 				disabled: e.disabled,
-				onClick: (t) => W(e)
-			}, v(e.label), 9, P))], 64))), 128))])) : c("", !0)], 40, O))), 128))], 2)) : c("", !0)]),
+				onClick: (t) => G(e)
+			}, y(e.label), 9, F))], 64))), 128))])) : l("", !0)], 40, k))), 128))], 2)) : l("", !0)]),
 			_: 1
-		})], 8, ["to", "disabled"])) : (h(), l("div", {
+		})], 8, ["to", "disabled"])) : (g(), u("div", {
 			key: 0,
 			ref_key: "root",
-			ref: z,
+			ref: B,
 			class: "wi-tieredmenu",
 			role: "menu"
-		}, [(h(!0), l(r, null, _(f.model, (e, t) => (h(), l("div", {
-			key: `${e.label ?? "sep"}-${t}`,
+		}, [(g(!0), u(i, null, v(p.model, (t, n) => (g(), u("div", {
+			key: `${t.label ?? "sep"}-${n}`,
 			class: "wi-tieredmenu__row",
-			onMouseenter: (n) => G(t, e)
-		}, [e.separator ? (h(), l("div", S)) : (h(), l("button", {
+			onMouseenter: (e) => K(n, t)
+		}, [t.separator ? (g(), u("div", C)) : (g(), u("button", {
 			key: 1,
 			type: "button",
 			class: "wi-tieredmenu__item",
 			role: "menuitem",
-			disabled: e.disabled,
-			"aria-haspopup": e.items?.length ? "menu" : void 0,
-			"aria-expanded": e.items?.length ? B.value === t : void 0,
-			onClick: (n) => e.items?.length ? G(t, e) : U(e)
-		}, [u("span", null, v(e.label), 1), e.items?.length ? (h(), l("span", w, "▸")) : c("", !0)], 8, C)), e.items?.length && B.value === t ? (h(), l("div", T, [(h(!0), l(r, null, _(e.items, (e, t) => (h(), l(r, { key: `${e.label ?? "sep"}-${t}` }, [e.separator ? (h(), l("div", E)) : (h(), l("button", {
+			disabled: t.disabled,
+			"aria-haspopup": t.items?.length ? "menu" : void 0,
+			"aria-expanded": t.items?.length ? V.value === n : void 0,
+			onClick: (e) => t.items?.length ? K(n, t) : W(t)
+		}, [d("span", null, y(t.label), 1), t.items?.length ? (g(), u("span", T, [f(e, {
+			name: "chevron-right",
+			size: "sm"
+		})])) : l("", !0)], 8, w)), t.items?.length && V.value === n ? (g(), u("div", E, [(g(!0), u(i, null, v(t.items, (e, t) => (g(), u(i, { key: `${e.label ?? "sep"}-${t}` }, [e.separator ? (g(), u("div", D)) : (g(), u("button", {
 			key: 1,
 			type: "button",
 			class: "wi-tieredmenu__item",
 			role: "menuitem",
 			disabled: e.disabled,
-			onClick: (t) => W(e)
-		}, v(e.label), 9, D))], 64))), 128))])) : c("", !0)], 40, x))), 128))], 512));
+			onClick: (t) => G(e)
+		}, y(e.label), 9, O))], 64))), 128))])) : l("", !0)], 40, S))), 128))], 512));
 	}
 });
 //#endregion
-export { F as WiTieredMenu };
+export { I as WiTieredMenu };

package/dist/tiered-menu/style.css

@@ -480,8 +480,8 @@
     font-size: var(--wi-font-size-xs);
 }
 
-.wi-textarea-field__help--error,
-.wi-select-field__help--error {
+.wi-textarea-field__help--invalid,
+.wi-select-field__help--invalid {
     color: var(--wi-color-danger);
 }
 
@@ -500,9 +500,8 @@
 }
 
 .wi-textarea--invalid:focus-visible,
-.wi-textarea--error:focus-visible,
-.wi-select--error.wi-select--open,
-.wi-select--error:focus-visible {
+.wi-select--invalid.wi-select--open,
+.wi-select--invalid:focus-visible {
     border-color: var(--wi-color-danger);
     box-shadow: var(--wi-focus-shadow-danger);
 }
@@ -750,6 +749,45 @@
     line-height: 1;
 }
 
+.wi-icon {
+    display: inline-flex;
+    height: 1rem;
+    width: 1rem;
+}
+
+.wi-icon svg {
+    height: 100%;
+    width: 100%;
+}
+
+.wi-icon--sm,
+.wi-icon--small {
+    height: 0.875rem;
+    width: 0.875rem;
+}
+
+.wi-icon--md,
+.wi-icon--normal {
+    height: 1rem;
+    width: 1rem;
+}
+
+.wi-icon--lg,
+.wi-icon--large {
+    height: 1.25rem;
+    width: 1.25rem;
+}
+
+.wi-icon--spin svg {
+    animation: wi-icon-spin 0.8s linear infinite;
+}
+
+@keyframes wi-icon-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 /* —— Menu: TieredMenu —— */
 .wi-tieredmenu {
     --wi-tieredmenu-submenu-min-width: 10rem;

package/dist/tiered-menu/style.js

@@ -1,3 +1,4 @@
 import '../theme/styles.css'
 import '../styles/base.css'
+import '../components/Icon/styles.css'
 import '../components/TieredMenu/styles.css'

package/dist/timeline/index.js

@@ -1,5 +1,5 @@
 import { t as e } from "../types-tV3SEv3Q.js";
-import { a as t, t as n } from "../Icon-B6gOD07E.js";
+import { a as t, t as n } from "../Icon-DHGs8l-M.js";
 import "./style.js";
 import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, openBlock as p, renderList as m, renderSlot as h, toDisplayString as g } from "vue";
 //#region src/components/Timeline/Timeline.vue?vue&type=script&setup=true&lang.ts

package/dist/timeline/style.css

@@ -480,8 +480,8 @@
     font-size: var(--wi-font-size-xs);
 }
 
-.wi-textarea-field__help--error,
-.wi-select-field__help--error {
+.wi-textarea-field__help--invalid,
+.wi-select-field__help--invalid {
     color: var(--wi-color-danger);
 }
 
@@ -500,9 +500,8 @@
 }
 
 .wi-textarea--invalid:focus-visible,
-.wi-textarea--error:focus-visible,
-.wi-select--error.wi-select--open,
-.wi-select--error:focus-visible {
+.wi-select--invalid.wi-select--open,
+.wi-select--invalid:focus-visible {
     border-color: var(--wi-color-danger);
     box-shadow: var(--wi-focus-shadow-danger);
 }