@well-insight/ui 0.1.10 → 0.1.12

package/dist/dropdown/index.js

@@ -1,108 +1,114 @@
-import { a as e, t } from "../Icon-B6gOD07E.js";
-import { n, t as r } from "../overlay-oR-5MDuE.js";
-import { c as i } from "../config-DWwce9jA.js";
-import { n as a } from "../locale-CYkJyRd1.js";
+import { t as e } from "../Icon-DHGs8l-M.js";
+import { n as t, t as n } from "../overlay-oR-5MDuE.js";
+import { t as r } from "../overlayPlacement-CN1tuC95.js";
+import { t as i } from "../icon-Cg5TeFqe.js";
+import { t as a } from "../key-CaQYVkjh.js";
+import { c as o } from "../config-CTLkobga.js";
+import { n as s } from "../locale-DxAvgqgB.js";
 import "./style.js";
-import { Fragment as o, Teleport as s, Transition as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as m, createTextVNode as h, createVNode as g, defineComponent as _, nextTick as v, normalizeClass as y, normalizeStyle as b, onBeforeUnmount as x, openBlock as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, unref as D, watch as O, withCtx as k } from "vue";
+import { Fragment as c, Teleport as l, Transition as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createSlots as g, createTextVNode as _, createVNode as v, defineComponent as y, nextTick as b, normalizeClass as x, normalizeStyle as S, onBeforeUnmount as C, openBlock as w, ref as T, renderList as E, renderSlot as D, toDisplayString as O, unref as ee, watch as k, withCtx as A } from "vue";
 //#region src/components/Dropdown/DropdownNodes.vue?vue&type=script&setup=true&lang.ts
-var A = {
+var j = {
 	key: 0,
 	class: "wi-dropdown__separator",
 	role: "separator"
-}, j = {
+}, M = {
 	key: 1,
 	class: "wi-dropdown__group"
-}, M = { class: "wi-dropdown__group-label" }, N = ["onMouseenter"], P = ["disabled"], F = {
+}, N = { class: "wi-dropdown__group-label" }, P = ["onMouseenter"], F = ["disabled"], I = {
 	key: 0,
 	class: "wi-dropdown__icon",
 	"aria-hidden": "true"
-}, I = {
+}, L = {
+	class: "wi-dropdown__caret",
+	"aria-hidden": "true"
+}, R = {
 	key: 0,
 	class: "wi-dropdown__submenu",
 	role: "menu"
-}, L = [
+}, z = [
 	"disabled",
 	"onMouseenter",
 	"onClick"
-], R = {
+], B = {
 	key: 0,
 	class: "wi-dropdown__icon",
 	"aria-hidden": "true"
-}, z = /* @__PURE__ */ _({
+}, V = /* @__PURE__ */ y({
 	__name: "DropdownNodes",
 	props: {
 		items: {},
 		highlightedValue: {}
 	},
 	emits: ["select", "highlight"],
-	setup(n, { emit: r }) {
-		let i = r, a = C(null);
+	setup(t, { emit: n }) {
+		let r = n, o = T(null);
 		function s(e) {
 			return e.separator || e.type === "divider";
 		}
-		function c(e) {
+		function l(e) {
 			return e.type === "group";
 		}
-		function l(e, t) {
-			return e.value ?? e.label ?? `dd-${t}`;
+		function u(e, t) {
+			return a(e, t, "dd");
 		}
-		function m(t) {
-			return t.icon && e(t.icon) ? t.icon : void 0;
+		function d(e) {
+			return i(e.icon);
 		}
-		function _(e, t) {
-			e.disabled || s(e) || c(e) || (i("highlight", e.value), e.items?.length && (a.value = l(e, t)));
+		function g(e, t) {
+			e.disabled || s(e) || l(e) || (r("highlight", e.value), e.items?.length && (o.value = u(e, t)));
 		}
-		function v() {
-			a.value = null;
+		function y() {
+			o.value = null;
 		}
-		return (e, r) => (S(!0), f(o, null, w(n.items, (i, b) => (S(), f(o, { key: l(i, b) }, [s(i) ? (S(), f("div", A)) : c(i) ? (S(), f("div", j, [p("div", M, E(i.label), 1), i.items?.length ? (S(), u(z, {
+		return (n, r) => (w(!0), m(c, null, E(t.items, (i, a) => (w(), m(c, { key: u(i, a) }, [s(i) ? (w(), m("div", j)) : l(i) ? (w(), m("div", M, [h("div", N, O(i.label), 1), i.items?.length ? (w(), f(V, {
 			key: 0,
 			items: i.items,
-			"highlighted-value": n.highlightedValue,
-			onSelect: r[0] ||= (t) => e.$emit("select", t),
-			onHighlight: r[1] ||= (t) => e.$emit("highlight", t)
-		}, null, 8, ["items", "highlighted-value"])) : d("", !0)])) : i.items?.length ? (S(), f("div", {
+			"highlighted-value": t.highlightedValue,
+			onSelect: r[0] ||= (e) => n.$emit("select", e),
+			onHighlight: r[1] ||= (e) => n.$emit("highlight", e)
+		}, null, 8, ["items", "highlighted-value"])) : p("", !0)])) : i.items?.length ? (w(), m("div", {
 			key: 2,
 			class: "wi-dropdown__submenu-wrap",
-			onMouseenter: (e) => _(i, b),
-			onMouseleave: v
-		}, [p("button", {
+			onMouseenter: (e) => g(i, a),
+			onMouseleave: y
+		}, [h("button", {
 			type: "button",
-			class: y(["wi-dropdown__item wi-dropdown__item--parent", { "wi-dropdown__item--highlighted": n.highlightedValue === i.value }]),
+			class: x(["wi-dropdown__item wi-dropdown__item--parent", { "wi-dropdown__item--highlighted": t.highlightedValue === i.value }]),
 			role: "menuitem",
 			disabled: i.disabled,
 			"aria-haspopup": !0
 		}, [
-			m(i) || i.icon ? (S(), f("span", F, [m(i) ? (S(), u(t, {
+			d(i) || i.icon ? (w(), m("span", I, [d(i) ? (w(), f(e, {
 				key: 0,
-				name: m(i),
+				name: d(i),
+				size: "sm"
+			}, null, 8, ["name"])) : (w(), m(c, { key: 1 }, [_(O(i.icon), 1)], 64))])) : p("", !0),
+			D(n.$slots, "item", { item: i }, () => [_(O(i.label), 1)]),
+			h("span", L, [v(e, {
+				name: "chevron-right",
 				size: "sm"
-			}, null, 8, ["name"])) : (S(), f(o, { key: 1 }, [h(E(i.icon), 1)], 64))])) : d("", !0),
-			T(e.$slots, "item", { item: i }, () => [h(E(i.label), 1)]),
-			r[4] ||= p("span", {
-				class: "wi-dropdown__caret",
-				"aria-hidden": "true"
-			}, "▸", -1)
-		], 10, P), a.value === l(i, b) ? (S(), f("div", I, [g(z, {
+			})])
+		], 10, F), o.value === u(i, a) ? (w(), m("div", R, [v(V, {
 			items: i.items,
-			"highlighted-value": n.highlightedValue,
-			onSelect: r[2] ||= (t) => e.$emit("select", t),
-			onHighlight: r[3] ||= (t) => e.$emit("highlight", t)
-		}, null, 8, ["items", "highlighted-value"])])) : d("", !0)], 40, N)) : (S(), f("button", {
+			"highlighted-value": t.highlightedValue,
+			onSelect: r[2] ||= (e) => n.$emit("select", e),
+			onHighlight: r[3] ||= (e) => n.$emit("highlight", e)
+		}, null, 8, ["items", "highlighted-value"])])) : p("", !0)], 40, P)) : (w(), m("button", {
 			key: 3,
 			type: "button",
-			class: y(["wi-dropdown__item", { "wi-dropdown__item--highlighted": n.highlightedValue === i.value }]),
+			class: x(["wi-dropdown__item", { "wi-dropdown__item--highlighted": t.highlightedValue === i.value }]),
 			role: "menuitem",
 			disabled: i.disabled,
-			onMouseenter: (t) => !i.disabled && e.$emit("highlight", i.value),
-			onClick: (t) => e.$emit("select", i)
-		}, [m(i) || i.icon ? (S(), f("span", R, [m(i) ? (S(), u(t, {
+			onMouseenter: (e) => !i.disabled && n.$emit("highlight", i.value),
+			onClick: (e) => n.$emit("select", i)
+		}, [d(i) || i.icon ? (w(), m("span", B, [d(i) ? (w(), f(e, {
 			key: 0,
-			name: m(i),
+			name: d(i),
 			size: "sm"
-		}, null, 8, ["name"])) : (S(), f(o, { key: 1 }, [h(E(i.icon), 1)], 64))])) : d("", !0), T(e.$slots, "item", { item: i }, () => [h(E(i.label), 1)])], 42, L))], 64))), 128));
+		}, null, 8, ["name"])) : (w(), m(c, { key: 1 }, [_(O(i.icon), 1)], 64))])) : p("", !0), D(n.$slots, "item", { item: i }, () => [_(O(i.label), 1)])], 42, z))], 64))), 128));
 	}
-}), B = ["aria-expanded"], V = /* @__PURE__ */ _({
+}), H = ["aria-expanded"], U = /* @__PURE__ */ y({
 	__name: "Dropdown",
 	props: {
 		modelValue: {
@@ -125,52 +131,47 @@ var A = {
 		appendTo: {}
 	},
 	emits: ["update:modelValue", "select"],
-	setup(e, { emit: t }) {
-		let o = e, _ = t, w = i(), A = a(), j = C(null), M = C(null), N = C(null), P = C({}), F = C(-1), I = l(() => o.items.filter((e) => !e.disabled && !e.separator && e.type !== "divider" && e.type !== "group" && !e.items?.length && e.value != null)), L = l(() => I.value[F.value]?.value), R, V, H = l(() => n(o, w.value.appendTo)), U = l(() => r(o, w.value.appendTo));
+	setup(e, { emit: i }) {
+		let a = e, c = i, y = o(), E = s(), j = T(null), M = T(null), N = T(null), P = T({}), F = T(-1), I = d(() => a.items.filter((e) => !e.disabled && !e.separator && e.type !== "divider" && e.type !== "group" && !e.items?.length && e.value != null)), L = d(() => I.value[F.value]?.value), R, z, B = d(() => t(a, y.value.appendTo)), U = d(() => n(a, y.value.appendTo));
 		function W() {
 			F.value = I.value.length ? 0 : -1;
 		}
 		function G() {
 			if (!U.value || !M.value) return;
 			let e = M.value.getBoundingClientRect();
-			P.value = {
-				left: o.placement === "bottom-end" ? `${e.right}px` : `${e.left}px`,
-				minWidth: `${e.width}px`,
-				top: `${e.bottom + 8}px`,
-				...o.placement === "bottom-end" ? { transform: "translateX(-100%)" } : {}
-			};
+			P.value = r(e, a.placement === "bottom-end" ? "bottom-end" : "bottom-start", { minWidth: `${e.width}px` });
 		}
 		function K(e) {
-			_("update:modelValue", e), e && (W(), v(() => {
+			c("update:modelValue", e), e && (W(), b(() => {
 				G(), N.value?.focus({ preventScroll: !0 });
 			}));
 		}
 		function q() {
-			K(!o.modelValue);
+			K(!a.modelValue);
 		}
 		function J() {
-			o.modelValue && G();
+			a.modelValue && G();
 		}
 		function Y(e) {
-			e.disabled || e.separator || e.type === "divider" || e.type === "group" || (e.command?.(), _("select", e), o.closeOnSelect && K(!1));
+			e.disabled || e.separator || e.type === "divider" || e.type === "group" || (e.command?.(), c("select", e), a.closeOnSelect && K(!1));
 		}
 		function X() {
-			R && clearTimeout(R), V && clearTimeout(V), R = void 0, V = void 0;
+			R && clearTimeout(R), z && clearTimeout(z), R = void 0, z = void 0;
 		}
 		function Z() {
-			o.trigger === "hover" && (X(), R = setTimeout(K, o.showDelay, !0));
+			a.trigger === "hover" && (X(), R = setTimeout(K, a.showDelay, !0));
 		}
 		function Q() {
-			o.trigger === "hover" && (X(), V = setTimeout(K, o.hideDelay, !1));
-		}
-		function ee() {
-			o.trigger === "hover" && X();
+			a.trigger === "hover" && (X(), z = setTimeout(K, a.hideDelay, !1));
 		}
 		function te() {
-			o.trigger === "hover" && (X(), V = setTimeout(K, o.hideDelay, !1));
+			a.trigger === "hover" && X();
 		}
-		function ne(e) {
-			if (o.modelValue) {
+		function ne() {
+			a.trigger === "hover" && (X(), z = setTimeout(K, a.hideDelay, !1));
+		}
+		function re(e) {
+			if (a.modelValue) {
 				if (e.key === "Escape") {
 					e.preventDefault(), K(!1), M.value?.focus({ preventScroll: !0 });
 					return;
@@ -186,21 +187,21 @@ var A = {
 				}
 			}
 		}
-		function re(e) {
-			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), o.modelValue || K(!0));
+		function ie(e) {
+			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), a.modelValue || K(!0));
 		}
 		function $(e) {
-			o.modelValue && j.value && !j.value.contains(e.target) && !N.value?.contains(e.target) && K(!1);
+			a.modelValue && j.value && !j.value.contains(e.target) && !N.value?.contains(e.target) && K(!1);
 		}
-		return O(() => o.modelValue, (e) => {
+		return k(() => a.modelValue, (e) => {
 			e ? (document.addEventListener("click", $), U.value && (window.addEventListener("resize", J), window.addEventListener("scroll", J, !0))) : (document.removeEventListener("click", $), window.removeEventListener("resize", J), window.removeEventListener("scroll", J, !0));
-		}, { immediate: !0 }), x(() => {
+		}, { immediate: !0 }), C(() => {
 			document.removeEventListener("click", $), window.removeEventListener("resize", J), window.removeEventListener("scroll", J, !0), X();
-		}), (t, n) => (S(), f("div", {
+		}), (t, n) => (w(), m("div", {
 			ref_key: "root",
 			ref: j,
 			class: "wi-dropdown"
-		}, [p("span", {
+		}, [h("span", {
 			ref_key: "trigger",
 			ref: M,
 			class: "wi-dropdown__trigger",
@@ -208,38 +209,38 @@ var A = {
 			tabindex: "0",
 			"aria-expanded": e.modelValue,
 			"aria-haspopup": "menu",
-			onClick: n[0] ||= (e) => o.trigger === "click" && q(),
+			onClick: n[0] ||= (e) => a.trigger === "click" && q(),
 			onMouseenter: Z,
 			onMouseleave: Q,
-			onKeydown: re
-		}, [T(t.$slots, "trigger", {}, () => [h(E(D(A).openMenu), 1)])], 40, B), (S(), u(s, {
-			to: H.value.to,
-			disabled: H.value.disabled
-		}, [g(c, { name: "wi-scale-fade" }, {
-			default: k(() => [e.modelValue ? (S(), f("div", {
+			onKeydown: ie
+		}, [D(t.$slots, "trigger", {}, () => [_(O(ee(E).openMenu), 1)])], 40, H), (w(), f(l, {
+			to: B.value.to,
+			disabled: B.value.disabled
+		}, [v(u, { name: "wi-scale-fade" }, {
+			default: A(() => [e.modelValue ? (w(), m("div", {
 				key: 0,
 				ref_key: "menu",
 				ref: N,
-				class: y(["wi-dropdown__menu", [`wi-dropdown__menu--${e.placement}`, { "wi-dropdown__menu--teleported": U.value }]]),
-				style: b(U.value ? P.value : void 0),
+				class: x(["wi-dropdown__menu", [`wi-dropdown__menu--${e.placement}`, { "wi-dropdown__menu--teleported": U.value }]]),
+				style: S(U.value ? P.value : void 0),
 				role: "menu",
 				tabindex: "-1",
-				onKeydown: ne,
-				onMouseenter: ee,
-				onMouseleave: te
-			}, [g(z, {
+				onKeydown: re,
+				onMouseenter: te,
+				onMouseleave: ne
+			}, [v(V, {
 				items: e.items,
 				"highlighted-value": L.value,
 				onSelect: Y,
 				onHighlight: n[1] ||= (e) => F.value = I.value.findIndex((t) => t.value === e)
-			}, m({ _: 2 }, [t.$slots.item ? {
+			}, g({ _: 2 }, [t.$slots.item ? {
 				name: "item",
-				fn: k(({ item: e }) => [T(t.$slots, "item", { item: e })]),
+				fn: A(({ item: e }) => [D(t.$slots, "item", { item: e })]),
 				key: "0"
-			} : void 0]), 1032, ["items", "highlighted-value"])], 38)) : d("", !0)]),
+			} : void 0]), 1032, ["items", "highlighted-value"])], 38)) : p("", !0)]),
 			_: 3
 		})], 8, ["to", "disabled"]))], 512));
 	}
 });
 //#endregion
-export { V as WiDropdown };
+export { U as WiDropdown };

package/dist/dropdown/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);
 }

package/dist/fieldset/index.js

@@ -1,10 +1,11 @@
+import { t as e } from "../Icon-DHGs8l-M.js";
 import "./style.js";
-import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, defineComponent as a, normalizeClass as o, openBlock as s, renderSlot as c, toDisplayString as l, vShow as u, withDirectives as d } from "vue";
+import { computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, openBlock as l, renderSlot as u, toDisplayString as d, vShow as f, withDirectives as p } from "vue";
 //#region src/components/Fieldset/Fieldset.vue?vue&type=script&setup=true&lang.ts
-var f = {
+var m = {
 	key: 0,
 	class: "wi-fieldset__legend"
-}, p = ["aria-expanded"], m = { "aria-hidden": "true" }, h = { class: "wi-fieldset__content" }, g = /* @__PURE__ */ a({
+}, h = ["aria-expanded"], g = { class: "wi-fieldset__content" }, _ = /* @__PURE__ */ s({
 	__name: "Fieldset",
 	props: {
 		legend: {},
@@ -18,19 +19,22 @@ var f = {
 		}
 	},
 	emits: ["update:collapsed"],
-	setup(a, { emit: g }) {
-		let _ = a, v = g, y = e(() => _.collapsed);
-		function b() {
-			_.toggleable && v("update:collapsed", !y.value);
+	setup(s, { emit: _ }) {
+		let v = s, y = _, b = t(() => v.collapsed);
+		function x() {
+			v.toggleable && y("update:collapsed", !b.value);
 		}
-		return (e, g) => (s(), n("fieldset", { class: o(["wi-fieldset", { "wi-fieldset--collapsed": y.value }]) }, [e.$slots.legend || a.legend || a.toggleable ? (s(), n("legend", f, [a.toggleable ? (s(), n("button", {
+		return (t, _) => (l(), r("fieldset", { class: c(["wi-fieldset", { "wi-fieldset--collapsed": b.value }]) }, [t.$slots.legend || s.legend || s.toggleable ? (l(), r("legend", m, [s.toggleable ? (l(), r("button", {
 			key: 0,
 			type: "button",
 			class: "wi-fieldset__toggler",
-			"aria-expanded": !y.value,
-			onClick: b
-		}, [r("span", m, l(y.value ? "▸" : "▾"), 1), c(e.$slots, "legend", {}, () => [i(l(a.legend), 1)])], 8, p)) : c(e.$slots, "legend", {}, () => [i(l(a.legend), 1)], void 0, 1)])) : t("", !0), d(r("div", h, [c(e.$slots, "default")], 512), [[u, !y.value]])], 2));
+			"aria-expanded": !b.value,
+			onClick: x
+		}, [o(e, {
+			name: b.value ? "chevron-right" : "chevron-down",
+			size: "sm"
+		}, null, 8, ["name"]), u(t.$slots, "legend", {}, () => [a(d(s.legend), 1)])], 8, h)) : u(t.$slots, "legend", {}, () => [a(d(s.legend), 1)], void 0, 1)])) : n("", !0), p(i("div", g, [u(t.$slots, "default")], 512), [[f, !b.value]])], 2));
 	}
 });
 //#endregion
-export { g as WiFieldset };
+export { _ as WiFieldset };

package/dist/fieldset/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);
+    }
+}
+
 /* —— Panel: Fieldset —— */
 .wi-fieldset {
     background: var(--wi-color-surface);

package/dist/fieldset/style.js

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

package/dist/file-upload/index.js

@@ -1,5 +1,5 @@
-import { t as e } from "../Icon-B6gOD07E.js";
-import { n as t } from "../locale-CYkJyRd1.js";
+import { t as e } from "../Icon-DHGs8l-M.js";
+import { n as t } from "../locale-DxAvgqgB.js";
 import "./style.js";
 import { Fragment as n, computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as ee, createVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, onBeforeUnmount as d, openBlock as f, ref as p, renderList as m, renderSlot as h, toDisplayString as g, unref as _, watch as v } from "vue";
 //#region src/components/FileUpload/ajax.ts

package/dist/file-upload/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);
 }
@@ -1045,7 +1044,7 @@
 }
 
 .wi-fileupload__card-mask {
-    background: color-mix(in srgb, #000 48%, transparent);
+    background: color-mix(in srgb, var(--wi-color-text) 48%, transparent);
     gap: var(--wi-space-1);
     opacity: 0;
     transition: opacity var(--wi-motion-fast) var(--wi-motion-ease);
@@ -1057,7 +1056,7 @@
 }
 
 .wi-fileupload__card-mask .wi-fileupload__action {
-    color: #fff;
+    color: var(--wi-color-on-emphasis);
 }
 
 .wi-fileupload__card-mask .wi-fileupload__action:hover {

package/dist/flex/index.js

@@ -1,6 +1,6 @@
 import { i as e, n as t, r as n, t as r } from "../gap-rHurpwNv.js";
 import { t as i } from "../vnode-PJWBO7_h.js";
-import { a } from "../config-DWwce9jA.js";
+import { a } from "../config-CTLkobga.js";
 import "./style.js";
 import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, defineComponent as d, normalizeStyle as f, openBlock as p, renderList as m, resolveDynamicComponent as h, useSlots as g } from "vue";
 //#endregion

package/dist/flex/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);
 }

package/dist/float-label/index.js

@@ -1,12 +1,23 @@
 import "./style.js";
-import { createCommentVNode as e, createElementBlock as t, createTextVNode as n, defineComponent as r, openBlock as i, renderSlot as a, toDisplayString as o } from "vue";
+import { createCommentVNode as e, createElementBlock as t, createTextVNode as n, defineComponent as r, onMounted as i, openBlock as a, ref as o, renderSlot as s, toDisplayString as c, useId as l } from "vue";
 //#region src/components/FloatLabel/FloatLabel.vue?vue&type=script&setup=true&lang.ts
-var s = { class: "wi-float-label" }, c = { key: 0 }, l = /* @__PURE__ */ r({
+var u = ["for"], d = /* @__PURE__ */ r({
 	__name: "FloatLabel",
 	props: { label: {} },
 	setup(r) {
-		return (l, u) => (i(), t("span", s, [a(l.$slots, "default"), r.label || l.$slots.label ? (i(), t("label", c, [a(l.$slots, "label", {}, () => [n(o(r.label), 1)])])) : e("", !0)]));
+		let d = r, f = o(null), p = l(), m = o(void 0);
+		return i(() => {
+			let e = f.value?.querySelector("input, textarea, select, [role=\"combobox\"], [role=\"spinbutton\"]");
+			e && (e.id ||= p, m.value = e.id);
+		}), (r, i) => (a(), t("span", {
+			ref_key: "root",
+			ref: f,
+			class: "wi-float-label"
+		}, [s(r.$slots, "default"), d.label || r.$slots.label ? (a(), t("label", {
+			key: 0,
+			for: m.value
+		}, [s(r.$slots, "label", {}, () => [n(c(d.label), 1)])], 8, u)) : e("", !0)], 512));
 	}
 });
 //#endregion
-export { l as WiFloatLabel };
+export { d as WiFloatLabel };

package/dist/float-label/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);
 }

package/dist/fluid/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);
 }

package/dist/form/index.js

@@ -1,4 +1,4 @@
-import { n as e } from "../locale-CYkJyRd1.js";
+import { n as e } from "../locale-DxAvgqgB.js";
 import "./style.js";
 import { computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, inject as s, normalizeClass as c, normalizeStyle as l, onBeforeUnmount as u, openBlock as d, provide as f, reactive as p, renderSlot as m, toDisplayString as h, useId as g, watch as _, withModifiers as v } from "vue";
 //#region src/components/Form/context.ts