@well-insight/ui 0.1.10 → 0.1.11

package/dist/speed-dial/index.js

@@ -1,22 +1,24 @@
-import { n as e, t } from "../overlay-oR-5MDuE.js";
-import { c as n } from "../config-DWwce9jA.js";
-import { n as r } 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 { c as i } from "../config-CTLkobga.js";
+import { n as a } from "../locale-DxAvgqgB.js";
 import "./style.js";
-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, createTextVNode as f, createVNode as p, defineComponent as m, nextTick as h, normalizeClass as g, normalizeStyle as _, onBeforeUnmount as v, openBlock as y, ref as b, renderList as x, renderSlot as S, toDisplayString as C, watch as w, withCtx as T } from "vue";
+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, createVNode as m, defineComponent as h, nextTick as g, normalizeClass as _, normalizeStyle as v, onBeforeUnmount as y, openBlock as b, ref as x, renderList as S, renderSlot as C, toDisplayString as w, watch as T, withCtx as E } from "vue";
 //#region src/components/SpeedDial/SpeedDial.vue?vue&type=script&setup=true&lang.ts
-var E = [
+var D = [
 	"title",
 	"aria-label",
 	"disabled",
 	"onClick"
-], D = {
+], O = {
 	key: 0,
 	"aria-hidden": "true"
-}, O = { class: "wi-speeddial__action-label" }, k = [
+}, k = { class: "wi-speeddial__action-label" }, A = [
 	"aria-label",
 	"aria-expanded",
 	"disabled"
-], A = /* @__PURE__ */ m({
+], j = /* @__PURE__ */ h({
 	__name: "SpeedDial",
 	props: {
 		model: { default: () => [] },
@@ -37,88 +39,75 @@ var E = [
 		appendTo: {}
 	},
 	emits: ["update:modelValue"],
-	setup(m, { emit: A }) {
-		let j = m, M = A, N = n(), P = r(), F = s(() => j.ariaLabel ?? P.value.speedDial), I = b(null), L = b(null), R = b(null), z = b({}), B = s(() => e(j, N.value.appendTo)), V = s(() => t(j, N.value.appendTo)), H = s(() => [
+	setup(h, { emit: j }) {
+		let M = h, N = j, P = i(), F = a(), I = l(() => M.ariaLabel ?? F.value.speedDial), L = x(null), R = x(null), z = x(null), B = x({}), V = l(() => t(M, P.value.appendTo)), H = l(() => n(M, P.value.appendTo)), U = l(() => [
 			"wi-speeddial",
-			`wi-speeddial--${j.direction}`,
+			`wi-speeddial--${M.direction}`,
 			{
-				"wi-speeddial--open": j.modelValue,
-				"wi-speeddial--disabled": j.disabled
+				"wi-speeddial--open": M.modelValue,
+				"wi-speeddial--disabled": M.disabled
 			}
 		]);
-		function U() {
-			if (!V.value || !L.value) return;
-			let e = L.value.getBoundingClientRect();
-			j.direction === "up" ? z.value = {
-				left: `${e.left + e.width / 2}px`,
-				top: `${e.top - 8}px`,
-				transform: "translate(-50%, -100%)"
-			} : j.direction === "down" ? z.value = {
-				left: `${e.left + e.width / 2}px`,
-				top: `${e.bottom + 8}px`,
-				transform: "translateX(-50%)"
-			} : j.direction === "left" ? z.value = {
-				left: `${e.left - 8}px`,
-				top: `${e.top + e.height / 2}px`,
-				transform: "translate(-100%, -50%)"
-			} : z.value = {
-				left: `${e.right + 8}px`,
-				top: `${e.top + e.height / 2}px`,
-				transform: "translateY(-50%)"
-			};
-		}
 		function W() {
-			j.disabled || M("update:modelValue", !j.modelValue);
+			if (!H.value || !R.value) return;
+			let e = R.value.getBoundingClientRect(), t = M.direction === "up" ? "top" : M.direction === "down" ? "bottom" : M.direction === "left" ? "left" : "right";
+			B.value = r(e, t);
+		}
+		function G() {
+			M.disabled || N("update:modelValue", !M.modelValue);
 		}
-		function G(e) {
-			j.disabled || e.disabled || (e.command?.(), M("update:modelValue", !1));
+		function K(e) {
+			M.disabled || e.disabled || (e.command?.(), N("update:modelValue", !1));
 		}
-		function K() {
-			j.modelValue && U();
+		function q() {
+			M.modelValue && W();
 		}
-		return w(() => j.modelValue, (e) => {
-			e ? (h(() => U()), V.value && (window.addEventListener("resize", K), window.addEventListener("scroll", K, !0))) : (window.removeEventListener("resize", K), window.removeEventListener("scroll", K, !0));
-		}), v(() => {
-			window.removeEventListener("resize", K), window.removeEventListener("scroll", K, !0);
-		}), (e, t) => (y(), u("div", {
+		return T(() => M.modelValue, (e) => {
+			e ? (g(() => W()), H.value && (window.addEventListener("resize", q), window.addEventListener("scroll", q, !0))) : (window.removeEventListener("resize", q), window.removeEventListener("scroll", q, !0));
+		}), y(() => {
+			window.removeEventListener("resize", q), window.removeEventListener("scroll", q, !0);
+		}), (t, n) => (b(), f("div", {
 			ref_key: "root",
-			ref: I,
-			class: g(H.value)
-		}, [(y(), c(a, {
-			to: B.value.to,
-			disabled: B.value.disabled
-		}, [p(o, { name: "wi-scale-fade" }, {
-			default: T(() => [m.modelValue ? (y(), u("ul", {
+			ref: L,
+			class: _(U.value)
+		}, [(b(), u(s, {
+			to: V.value.to,
+			disabled: V.value.disabled
+		}, [m(c, { name: "wi-scale-fade" }, {
+			default: E(() => [h.modelValue ? (b(), f("ul", {
 				key: 0,
 				ref_key: "list",
-				ref: R,
-				class: g(["wi-speeddial__list", { "wi-speeddial__list--teleported": V.value }]),
-				style: _(V.value ? z.value : void 0),
+				ref: z,
+				class: _(["wi-speeddial__list", { "wi-speeddial__list--teleported": H.value }]),
+				style: v(H.value ? B.value : void 0),
 				role: "menu"
-			}, [(y(!0), u(i, null, x(m.model, (e, t) => (y(), u("li", {
+			}, [(b(!0), f(o, null, S(h.model, (e, t) => (b(), f("li", {
 				key: `${e.label}-${t}`,
 				role: "none"
-			}, [d("button", {
+			}, [p("button", {
 				type: "button",
 				class: "wi-speeddial__action",
 				role: "menuitem",
 				title: e.label,
 				"aria-label": e.label,
 				disabled: e.disabled,
-				onClick: (t) => G(e)
-			}, [e.icon ? (y(), u("span", D, C(e.icon), 1)) : l("", !0), d("span", O, C(e.label), 1)], 8, E)]))), 128))], 6)) : l("", !0)]),
+				onClick: (t) => K(e)
+			}, [e.icon ? (b(), f("span", O, w(e.icon), 1)) : d("", !0), p("span", k, w(e.label), 1)], 8, D)]))), 128))], 6)) : d("", !0)]),
 			_: 1
-		})], 8, ["to", "disabled"])), d("button", {
+		})], 8, ["to", "disabled"])), p("button", {
 			ref_key: "button",
-			ref: L,
+			ref: R,
 			type: "button",
 			class: "wi-speeddial__button",
-			"aria-label": F.value,
-			"aria-expanded": m.modelValue,
-			disabled: m.disabled,
-			onClick: W
-		}, [S(e.$slots, "icon", {}, () => [t[0] ||= f(" + ", -1)])], 8, k)], 2));
+			"aria-label": I.value,
+			"aria-expanded": h.modelValue,
+			disabled: h.disabled,
+			onClick: G
+		}, [C(t.$slots, "icon", {}, () => [m(e, {
+			name: "plus",
+			size: "sm"
+		})])], 8, A)], 2));
 	}
 });
 //#endregion
-export { A as WiSpeedDial };
+export { j as WiSpeedDial };

package/dist/speed-dial/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);
+    }
+}
+
 /* —— Primitive: SpeedDial —— */
 .wi-speeddial {
     display: inline-flex;

package/dist/speed-dial/style.js

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

package/dist/split-button/index.js

@@ -1,18 +1,20 @@
-import { n as e, t } from "../overlay-oR-5MDuE.js";
-import { c as n, o as r } from "../config-DWwce9jA.js";
-import { n as i } 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 { c as i, o as a } from "../config-CTLkobga.js";
+import { n as o } from "../locale-DxAvgqgB.js";
 import "./style.js";
-import { Fragment as a, Teleport as o, Transition as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, nextTick as h, normalizeClass as g, normalizeStyle as _, onBeforeUnmount as v, openBlock as y, ref as b, renderList as x, toDisplayString as S, unref as C, watch as w, withCtx as T } from "vue";
+import { Fragment as s, Teleport as c, Transition as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createVNode as h, defineComponent as g, nextTick as _, normalizeClass as v, normalizeStyle as y, onBeforeUnmount as b, openBlock as x, ref as S, renderList as C, toDisplayString as w, unref as T, watch as E, withCtx as D } from "vue";
 //#region src/components/SplitButton/SplitButton.vue?vue&type=script&setup=true&lang.ts
-var E = ["disabled"], D = {
+var O = ["disabled"], k = {
 	key: 0,
 	class: "wi-splitbutton__icon",
 	"aria-hidden": "true"
-}, O = { key: 1 }, k = [
+}, A = { key: 1 }, j = [
 	"aria-label",
 	"aria-expanded",
 	"disabled"
-], A = ["disabled", "onClick"], j = /* @__PURE__ */ m({
+], M = ["disabled", "onClick"], N = /* @__PURE__ */ g({
 	__name: "SplitButton",
 	props: {
 		label: {},
@@ -35,92 +37,93 @@ var E = ["disabled"], D = {
 		appendTo: {}
 	},
 	emits: ["click", "command"],
-	setup(m, { emit: j }) {
-		let M = m, N = j, P = n(), F = i(), I = b(!1), L = b(null), R = b(null), z = b({}), B = r("SplitButton", () => M.size), V = c(() => e(M, P.value.appendTo)), H = c(() => t(M, P.value.appendTo)), U = c(() => [
+	setup(g, { emit: N }) {
+		let P = g, F = N, I = i(), L = o(), R = S(!1), z = S(null), B = S(null), V = S({}), H = a("SplitButton", () => P.size), U = u(() => t(P, I.value.appendTo)), W = u(() => n(P, I.value.appendTo)), G = u(() => [
 			"wi-splitbutton",
-			`wi-splitbutton--${B.value}`,
+			`wi-splitbutton--${H.value}`,
 			{
-				"wi-splitbutton--disabled": M.disabled,
-				"wi-splitbutton--outlined": M.outlined,
-				[`wi-splitbutton--${M.severity}`]: !!M.severity,
-				"wi-splitbutton--open": I.value
+				"wi-splitbutton--disabled": P.disabled,
+				"wi-splitbutton--outlined": P.outlined,
+				[`wi-splitbutton--${P.severity}`]: !!P.severity,
+				"wi-splitbutton--open": R.value
 			}
 		]);
-		function W() {
-			if (!H.value || !L.value) return;
-			let e = L.value.getBoundingClientRect();
-			z.value = {
-				left: "auto",
-				minWidth: `${e.width}px`,
-				right: `${document.documentElement.clientWidth - e.right}px`,
-				top: `${e.bottom + 4}px`
-			};
-		}
-		function G() {
-			I.value && W();
-		}
-		function K(e) {
-			M.disabled || N("click", e);
+		function K() {
+			if (!W.value || !z.value) return;
+			let e = z.value.getBoundingClientRect();
+			V.value = r(e, "bottom-end", {
+				gap: 4,
+				minWidth: `${e.width}px`
+			});
 		}
 		function q() {
-			M.disabled || (I.value = !I.value);
+			R.value && K();
 		}
 		function J(e) {
-			e.disabled || M.disabled || (e.command?.(), N("command", e), I.value = !1);
+			P.disabled || F("click", e);
+		}
+		function Y() {
+			P.disabled || (R.value = !R.value);
+		}
+		function X(e) {
+			e.disabled || P.disabled || (e.command?.(), F("command", e), R.value = !1);
 		}
-		function Y(e) {
+		function Z(e) {
 			let t = e.target;
-			L.value?.contains(t) || R.value?.contains(t) || (I.value = !1);
+			z.value?.contains(t) || B.value?.contains(t) || (R.value = !1);
 		}
-		return w(I, (e) => {
-			e ? (document.addEventListener("click", Y), h(() => W()), H.value && (window.addEventListener("resize", G), window.addEventListener("scroll", G, !0))) : (document.removeEventListener("click", Y), window.removeEventListener("resize", G), window.removeEventListener("scroll", G, !0));
-		}), v(() => {
-			document.removeEventListener("click", Y), window.removeEventListener("resize", G), window.removeEventListener("scroll", G, !0);
-		}), (e, t) => (y(), d("div", {
+		return E(R, (e) => {
+			e ? (document.addEventListener("click", Z), _(() => K()), W.value && (window.addEventListener("resize", q), window.addEventListener("scroll", q, !0))) : (document.removeEventListener("click", Z), window.removeEventListener("resize", q), window.removeEventListener("scroll", q, !0));
+		}), b(() => {
+			document.removeEventListener("click", Z), window.removeEventListener("resize", q), window.removeEventListener("scroll", q, !0);
+		}), (t, n) => (x(), p("div", {
 			ref_key: "root",
-			ref: L,
-			class: g(U.value)
+			ref: z,
+			class: v(G.value)
 		}, [
-			f("button", {
+			m("button", {
 				type: "button",
 				class: "wi-splitbutton__main",
-				disabled: m.disabled,
-				onClick: K
-			}, [m.icon ? (y(), d("span", D, S(m.icon), 1)) : u("", !0), m.label ? (y(), d("span", O, S(m.label), 1)) : u("", !0)], 8, E),
-			f("button", {
+				disabled: g.disabled,
+				onClick: J
+			}, [g.icon ? (x(), p("span", k, w(g.icon), 1)) : f("", !0), g.label ? (x(), p("span", A, w(g.label), 1)) : f("", !0)], 8, O),
+			m("button", {
 				type: "button",
 				class: "wi-splitbutton__trigger",
-				"aria-label": C(F).moreActions,
-				"aria-expanded": I.value,
+				"aria-label": T(L).moreActions,
+				"aria-expanded": R.value,
 				"aria-haspopup": "menu",
-				disabled: m.disabled,
-				onClick: q
-			}, " ▾ ", 8, k),
-			(y(), l(o, {
-				to: V.value.to,
-				disabled: V.value.disabled
-			}, [p(s, { name: "wi-scale-fade" }, {
-				default: T(() => [I.value ? (y(), d("ul", {
+				disabled: g.disabled,
+				onClick: Y
+			}, [h(e, {
+				name: "chevron-down",
+				size: "sm"
+			})], 8, j),
+			(x(), d(c, {
+				to: U.value.to,
+				disabled: U.value.disabled
+			}, [h(l, { name: "wi-scale-fade" }, {
+				default: D(() => [R.value ? (x(), p("ul", {
 					key: 0,
 					ref_key: "menu",
-					ref: R,
-					class: g(["wi-splitbutton__menu", { "wi-splitbutton__menu--teleported": H.value }]),
-					style: _(H.value ? z.value : void 0),
+					ref: B,
+					class: v(["wi-splitbutton__menu", { "wi-splitbutton__menu--teleported": W.value }]),
+					style: y(W.value ? V.value : void 0),
 					role: "menu"
-				}, [(y(!0), d(a, null, x(m.model, (e, t) => (y(), d("li", {
+				}, [(x(!0), p(s, null, C(g.model, (e, t) => (x(), p("li", {
 					key: `${e.label}-${t}`,
 					role: "presentation"
-				}, [f("button", {
+				}, [m("button", {
 					type: "button",
 					class: "wi-splitbutton__item",
 					role: "menuitem",
 					disabled: e.disabled,
-					onClick: (t) => J(e)
-				}, S(e.label), 9, A)]))), 128))], 6)) : u("", !0)]),
+					onClick: (t) => X(e)
+				}, w(e.label), 9, M)]))), 128))], 6)) : f("", !0)]),
 				_: 1
 			})], 8, ["to", "disabled"]))
 		], 2));
 	}
 });
 //#endregion
-export { j as WiSplitButton };
+export { N as WiSplitButton };

package/dist/split-button/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);
 }
@@ -1386,6 +1385,45 @@
     }
 }
 
+.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);
+    }
+}
+
 /* —— Primitive: SplitButton —— */
 .wi-splitbutton {
     --wi-button-padding-x-medium: calc(

package/dist/split-button/style.js

@@ -1,4 +1,5 @@
 import '../theme/styles.css'
 import '../styles/base.css'
 import '../components/Button/styles.css'
+import '../components/Icon/styles.css'
 import '../components/SplitButton/styles.css'

package/dist/splitter/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 { Comment as t, Fragment as n, Text as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as ee, openBlock as f, ref as p, renderSlot as m, resolveDynamicComponent as h, unref as g, useSlots as _, watch as v } from "vue";
 //#region src/components/Splitter/size.ts

package/dist/splitter/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/stepper/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/styles/base.css

@@ -277,8 +277,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);
 }
 
@@ -297,9 +297,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);
 }