@well-insight/ui 0.1.9 → 0.1.11

package/dist/tag/index.js

@@ -1,11 +1,11 @@
 import { t as e } from "../types-tV3SEv3Q.js";
-import { t } from "../Icon-B6gOD07E.js";
-import { o as n } from "../config-DWwce9jA.js";
-import { n as r } from "../locale-CYkJyRd1.js";
+import { t } from "../Icon-DHGs8l-M.js";
+import { o as n } from "../config-CTLkobga.js";
+import { n as r } from "../locale-DxAvgqgB.js";
 import "./style.js";
-import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createTextVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, openBlock as f, renderSlot as p, toDisplayString as m, unref as h } from "vue";
+import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createTextVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, openBlock as p, renderSlot as m, toDisplayString as h, unref as g } from "vue";
 //#region src/components/Tag/Tag.vue?vue&type=script&setup=true&lang.ts
-var g = ["disabled", "aria-label"], _ = /* @__PURE__ */ l({
+var _ = ["disabled", "aria-label"], v = /* @__PURE__ */ u({
 	__name: "Tag",
 	props: {
 		value: {},
@@ -31,43 +31,46 @@ var g = ["disabled", "aria-label"], _ = /* @__PURE__ */ l({
 		}
 	},
 	emits: ["close"],
-	setup(l, { emit: _ }) {
-		let v = l, y = _, b = r(), x = n("Tag", () => v.size), S = i(() => e(v.severity) ?? "primary"), C = i(() => [
+	setup(u, { emit: v }) {
+		let y = u, b = v, x = r(), S = n("Tag", () => y.size), C = i(() => e(y.severity) ?? "primary"), w = i(() => [
 			"wi-tag",
+			`wi-tag--${C.value}`,
 			`wi-tag--${S.value}`,
-			`wi-tag--${x.value}`,
 			{
-				"wi-tag--rounded": v.rounded,
-				"wi-tag--bordered": v.bordered,
-				"wi-tag--closable": v.closable,
-				"wi-tag--disabled": v.disabled,
-				"wi-tag--custom": !!v.color
+				"wi-tag--rounded": y.rounded,
+				"wi-tag--bordered": y.bordered,
+				"wi-tag--closable": y.closable,
+				"wi-tag--disabled": y.disabled,
+				"wi-tag--custom": !!y.color
 			}
-		]), w = i(() => v.color ? { "--wi-tag-color": v.color } : void 0);
-		function T(e) {
-			v.disabled || (e.stopPropagation(), y("close", e));
+		]), T = i(() => y.color ? { "--wi-tag-color": y.color } : void 0);
+		function E(e) {
+			y.disabled || (e.stopPropagation(), b("close", e));
 		}
-		return (e, n) => (f(), s("span", {
-			class: u(C.value),
-			style: d(w.value)
+		return (e, n) => (p(), s("span", {
+			class: d(w.value),
+			style: f(T.value)
 		}, [
-			l.icon ? (f(), a(t, {
+			u.icon ? (p(), a(t, {
 				key: 0,
 				class: "wi-tag__icon",
-				name: l.icon,
+				name: u.icon,
 				size: "sm"
 			}, null, 8, ["name"])) : o("", !0),
-			p(e.$slots, "default", {}, () => [c(m(l.value), 1)]),
-			l.closable ? (f(), s("button", {
+			m(e.$slots, "default", {}, () => [c(h(u.value), 1)]),
+			u.closable ? (p(), s("button", {
 				key: 1,
 				type: "button",
 				class: "wi-tag__close",
-				disabled: l.disabled,
-				"aria-label": h(b).close,
-				onClick: T
-			}, " × ", 8, g)) : o("", !0)
+				disabled: u.disabled,
+				"aria-label": g(x).close,
+				onClick: E
+			}, [l(t, {
+				name: "close",
+				size: "sm"
+			})], 8, _)) : o("", !0)
 		], 6));
 	}
 });
 //#endregion
-export { _ as WiTag };
+export { v as WiTag };

package/dist/tag/style.css

@@ -16,12 +16,13 @@
     --wi-control-padding-x-small: 10px;
     --wi-control-padding-x-medium: 12px;
     --wi-control-padding-x-large: 14px;
-    --wi-button-padding-x-small: 10px;
-    --wi-button-padding-x-medium: 14px;
-    --wi-button-padding-x-large: 18px;
+
     --wi-radius-control: 3px;
-    --wi-focus-shadow: 0 0 0 2px color-mix(in srgb, var(--wi-color-primary) 20%, transparent);
-    --wi-focus-shadow-danger: 0 0 0 2px color-mix(in srgb, var(--wi-color-danger) 20%, transparent);
+    --wi-border-width: 1px;
+    --wi-focus-shadow: 0 0 0 2px
+        color-mix(in srgb, var(--wi-color-primary) 20%, transparent);
+    --wi-focus-shadow-danger: 0 0 0 2px
+        color-mix(in srgb, var(--wi-color-danger) 20%, transparent);
     --wi-color-success: #159570;
     --wi-color-info: #2563eb;
     --wi-color-warning: #d97706;
@@ -39,10 +40,7 @@
     --wi-shadow-lg: 0 1rem 3rem rgb(15 23 42 / 0.25);
     --wi-shadow-sticky: 4px 0 8px color-mix(in srgb, #000 6%, transparent);
     --wi-shadow-sticky-end: -4px 0 8px color-mix(in srgb, #000 6%, transparent);
-    --wi-terminal-bg: #111827;
-    --wi-terminal-fg: #e5e7eb;
-    --wi-terminal-prompt: #34d399;
-    --wi-terminal-border: color-mix(in srgb, #fff 12%, transparent);
+
     /* Typography scale (component text, not control-height fonts) */
     --wi-font-size-xs: 0.75rem;
     --wi-font-size-sm: 0.8125rem;
@@ -56,8 +54,7 @@
     --wi-z-dropdown: calc(var(--wi-z-base) + 50);
     --wi-z-toast: calc(var(--wi-z-base) + 100);
     --wi-z-popper: 40;
-    --wi-menu-min-width: 10rem;
-    --wi-menu-min-width-lg: 12rem;
+
     --wi-control-affix-size: 2rem;
     --wi-control-affix-gap: 2.35rem;
     --wi-control-affix-padding: 2.5rem;
@@ -118,9 +115,6 @@
     --wi-control-padding-x-small: 8px;
     --wi-control-padding-x-medium: 10px;
     --wi-control-padding-x-large: 12px;
-    --wi-button-padding-x-small: 8px;
-    --wi-button-padding-x-medium: 12px;
-    --wi-button-padding-x-large: 16px;
 }
 
 [data-wi-density="spacious"] {
@@ -139,9 +133,32 @@
     --wi-control-padding-x-small: 12px;
     --wi-control-padding-x-medium: 14px;
     --wi-control-padding-x-large: 16px;
-    --wi-button-padding-x-small: 12px;
-    --wi-button-padding-x-medium: 16px;
-    --wi-button-padding-x-large: 20px;
+}
+
+[data-wi-density="compact"] .wi-layout-header {
+    --wi-layout-header-height: 48px;
+}
+
+[data-wi-density="compact"] .wi-layout-footer {
+    --wi-layout-footer-height: 40px;
+}
+
+[data-wi-density="compact"] .wi-layout-sider {
+    --wi-layout-sider-width: 240px;
+    --wi-layout-sider-collapsed-width: 44px;
+}
+
+[data-wi-density="spacious"] .wi-layout-header {
+    --wi-layout-header-height: 64px;
+}
+
+[data-wi-density="spacious"] .wi-layout-footer {
+    --wi-layout-footer-height: 56px;
+}
+
+[data-wi-density="spacious"] .wi-layout-sider {
+    --wi-layout-sider-width: 288px;
+    --wi-layout-sider-collapsed-width: 52px;
 }
 
 [data-theme="dark"] {
@@ -152,8 +169,10 @@
     --wi-color-text-muted: #94a3b8;
     --wi-color-border: #334155;
     --wi-color-focus-ring: #93c5fd;
-    --wi-focus-shadow: 0 0 0 2px color-mix(in srgb, var(--wi-color-primary) 28%, transparent);
-    --wi-focus-shadow-danger: 0 0 0 2px color-mix(in srgb, var(--wi-color-danger) 28%, transparent);
+    --wi-focus-shadow: 0 0 0 2px
+        color-mix(in srgb, var(--wi-color-primary) 28%, transparent);
+    --wi-focus-shadow-danger: 0 0 0 2px
+        color-mix(in srgb, var(--wi-color-danger) 28%, transparent);
     --wi-color-success: #5eead4;
     --wi-color-info: #93c5fd;
     --wi-color-warning: #fbbf24;
@@ -170,10 +189,6 @@
     --wi-shadow-lg: 0 1rem 3rem rgb(0 0 0 / 0.55);
     --wi-shadow-sticky: 4px 0 8px color-mix(in srgb, #000 35%, transparent);
     --wi-shadow-sticky-end: -4px 0 8px color-mix(in srgb, #000 35%, transparent);
-    --wi-terminal-bg: #020617;
-    --wi-terminal-fg: #e2e8f0;
-    --wi-terminal-prompt: #5eead4;
-    --wi-terminal-border: color-mix(in srgb, #fff 14%, transparent);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -465,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);
 }
 
@@ -485,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/terminal/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 { Fragment as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, nextTick as o, openBlock as s, ref as c, renderList as l, toDisplayString as u, unref as d, vModelText as f, withDirectives as p, withModifiers as m } from "vue";
 //#region src/components/Terminal/Terminal.vue?vue&type=script&setup=true&lang.ts

package/dist/terminal/style.css

@@ -16,12 +16,13 @@
     --wi-control-padding-x-small: 10px;
     --wi-control-padding-x-medium: 12px;
     --wi-control-padding-x-large: 14px;
-    --wi-button-padding-x-small: 10px;
-    --wi-button-padding-x-medium: 14px;
-    --wi-button-padding-x-large: 18px;
+
     --wi-radius-control: 3px;
-    --wi-focus-shadow: 0 0 0 2px color-mix(in srgb, var(--wi-color-primary) 20%, transparent);
-    --wi-focus-shadow-danger: 0 0 0 2px color-mix(in srgb, var(--wi-color-danger) 20%, transparent);
+    --wi-border-width: 1px;
+    --wi-focus-shadow: 0 0 0 2px
+        color-mix(in srgb, var(--wi-color-primary) 20%, transparent);
+    --wi-focus-shadow-danger: 0 0 0 2px
+        color-mix(in srgb, var(--wi-color-danger) 20%, transparent);
     --wi-color-success: #159570;
     --wi-color-info: #2563eb;
     --wi-color-warning: #d97706;
@@ -39,10 +40,7 @@
     --wi-shadow-lg: 0 1rem 3rem rgb(15 23 42 / 0.25);
     --wi-shadow-sticky: 4px 0 8px color-mix(in srgb, #000 6%, transparent);
     --wi-shadow-sticky-end: -4px 0 8px color-mix(in srgb, #000 6%, transparent);
-    --wi-terminal-bg: #111827;
-    --wi-terminal-fg: #e5e7eb;
-    --wi-terminal-prompt: #34d399;
-    --wi-terminal-border: color-mix(in srgb, #fff 12%, transparent);
+
     /* Typography scale (component text, not control-height fonts) */
     --wi-font-size-xs: 0.75rem;
     --wi-font-size-sm: 0.8125rem;
@@ -56,8 +54,7 @@
     --wi-z-dropdown: calc(var(--wi-z-base) + 50);
     --wi-z-toast: calc(var(--wi-z-base) + 100);
     --wi-z-popper: 40;
-    --wi-menu-min-width: 10rem;
-    --wi-menu-min-width-lg: 12rem;
+
     --wi-control-affix-size: 2rem;
     --wi-control-affix-gap: 2.35rem;
     --wi-control-affix-padding: 2.5rem;
@@ -118,9 +115,6 @@
     --wi-control-padding-x-small: 8px;
     --wi-control-padding-x-medium: 10px;
     --wi-control-padding-x-large: 12px;
-    --wi-button-padding-x-small: 8px;
-    --wi-button-padding-x-medium: 12px;
-    --wi-button-padding-x-large: 16px;
 }
 
 [data-wi-density="spacious"] {
@@ -139,9 +133,32 @@
     --wi-control-padding-x-small: 12px;
     --wi-control-padding-x-medium: 14px;
     --wi-control-padding-x-large: 16px;
-    --wi-button-padding-x-small: 12px;
-    --wi-button-padding-x-medium: 16px;
-    --wi-button-padding-x-large: 20px;
+}
+
+[data-wi-density="compact"] .wi-layout-header {
+    --wi-layout-header-height: 48px;
+}
+
+[data-wi-density="compact"] .wi-layout-footer {
+    --wi-layout-footer-height: 40px;
+}
+
+[data-wi-density="compact"] .wi-layout-sider {
+    --wi-layout-sider-width: 240px;
+    --wi-layout-sider-collapsed-width: 44px;
+}
+
+[data-wi-density="spacious"] .wi-layout-header {
+    --wi-layout-header-height: 64px;
+}
+
+[data-wi-density="spacious"] .wi-layout-footer {
+    --wi-layout-footer-height: 56px;
+}
+
+[data-wi-density="spacious"] .wi-layout-sider {
+    --wi-layout-sider-width: 288px;
+    --wi-layout-sider-collapsed-width: 52px;
 }
 
 [data-theme="dark"] {
@@ -152,8 +169,10 @@
     --wi-color-text-muted: #94a3b8;
     --wi-color-border: #334155;
     --wi-color-focus-ring: #93c5fd;
-    --wi-focus-shadow: 0 0 0 2px color-mix(in srgb, var(--wi-color-primary) 28%, transparent);
-    --wi-focus-shadow-danger: 0 0 0 2px color-mix(in srgb, var(--wi-color-danger) 28%, transparent);
+    --wi-focus-shadow: 0 0 0 2px
+        color-mix(in srgb, var(--wi-color-primary) 28%, transparent);
+    --wi-focus-shadow-danger: 0 0 0 2px
+        color-mix(in srgb, var(--wi-color-danger) 28%, transparent);
     --wi-color-success: #5eead4;
     --wi-color-info: #93c5fd;
     --wi-color-warning: #fbbf24;
@@ -170,10 +189,6 @@
     --wi-shadow-lg: 0 1rem 3rem rgb(0 0 0 / 0.55);
     --wi-shadow-sticky: 4px 0 8px color-mix(in srgb, #000 35%, transparent);
     --wi-shadow-sticky-end: -4px 0 8px color-mix(in srgb, #000 35%, transparent);
-    --wi-terminal-bg: #020617;
-    --wi-terminal-fg: #e2e8f0;
-    --wi-terminal-prompt: #5eead4;
-    --wi-terminal-border: color-mix(in srgb, #fff 14%, transparent);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -465,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);
 }
 
@@ -485,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);
 }
@@ -735,48 +749,60 @@
     line-height: 1;
 }
 
-/* —— Misc: Terminal —— */
-.wi-terminal {
-    background: var(--wi-terminal-bg);
-    border: 1px solid var(--wi-color-border);
-    border-radius: var(--wi-radius-md);
-    color: var(--wi-terminal-fg);
-    display: flex;
-    flex-direction: column;
-    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    min-height: 12rem;
-    overflow: hidden;
+/* —— Misc: Terminal —— */
+.wi-terminal {
+    --wi-terminal-bg: var(--wi-color-contrast);
+    --wi-terminal-fg: var(--wi-color-contrast-fg);
+    --wi-terminal-prompt: var(--wi-color-success);
+    --wi-terminal-border: color-mix(in srgb, var(--wi-color-on-emphasis) 12%, transparent);
+    --wi-terminal-min-height: 12rem;
+    background: var(--wi-terminal-bg);
+    border: 1px solid var(--wi-color-border);
+    border-radius: var(--wi-radius-md);
+    color: var(--wi-terminal-fg);
+    display: flex;
+    flex-direction: column;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    min-height: var(--wi-terminal-min-height);
+    overflow: hidden;
 }
 
-.wi-terminal__body {
-    flex: 1;
-    overflow: auto;
-    padding: var(--wi-space-3);
+.wi-terminal__body {
+    flex: 1;
+    overflow: auto;
+    padding: var(--wi-space-3);
 }
 
-.wi-terminal__welcome,
-.wi-terminal__line {
-    line-height: 1.5;
-    margin-bottom: var(--wi-space-1);
+.wi-terminal__welcome,
+.wi-terminal__line {
+    line-height: 1.5;
+    margin-bottom: var(--wi-space-1);
 }
 
-.wi-terminal__form {
-    align-items: center;
-    border-top: 1px solid var(--wi-terminal-border);
-    display: flex;
-    gap: var(--wi-space-2);
-    padding: var(--wi-space-2) var(--wi-space-3);
+.wi-terminal__form {
+    align-items: center;
+    border-top: 1px solid var(--wi-terminal-border);
+    display: flex;
+    gap: var(--wi-space-2);
+    padding: var(--wi-space-2) var(--wi-space-3);
 }
 
-.wi-terminal__prompt {
-    color: var(--wi-terminal-prompt);
+.wi-terminal__prompt {
+    color: var(--wi-terminal-prompt);
 }
 
-.wi-terminal__input {
-    background: transparent;
-    border: 0;
-    color: inherit;
-    flex: 1;
-    font: inherit;
-    outline: none;
+[data-theme="dark"] .wi-terminal {
+    --wi-terminal-bg: color-mix(in srgb, var(--wi-color-text) 6%, var(--wi-color-surface));
+    --wi-terminal-fg: var(--wi-color-text);
+    --wi-terminal-prompt: var(--wi-color-success);
+    --wi-terminal-border: color-mix(in srgb, var(--wi-color-on-emphasis) 14%, transparent);
+}
+
+.wi-terminal__input {
+    background: transparent;
+    border: 0;
+    color: inherit;
+    flex: 1;
+    font: inherit;
+    outline: none;
 }

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 = _(), O = c, k = E, A = e("Textarea"), j = r(), M = m(null), N = i(() => O.id ?? `wi-textarea-${Math.random().toString(36).slice(2, 8)}`), P = i(() => O.invalid || O.error || !!O.errorMessage), F = t("Textarea", () => O.size), I = n("Textarea", () => O.variant), L = i(() => O.fluid ?? A.value.fluid ?? !1), R = i(() => O.clearable ?? A.value.clearable ?? !1), z = i(() => O.showCount ?? A.value.showCount ?? !1), B = i(() => {
-			if (O.autosize !== void 0 && O.autosize !== !1) return O.autosize;
-			if (O.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 : O.rows ?? A.value.rows ?? 4;
-		}), H = i(() => !!B.value), U = i(() => H.value ? "none" : O.resize), W = i(() => O.errorMessage || O.helpText), G = i(() => !!O.errorMessage || P.value && !!O.helpText), K = i(() => (O.modelValue ?? "").length), q = i(() => O.maxlength == null ? String(K.value) : `${K.value} / ${O.maxlength}`), J = i(() => R.value && !!O.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,61 +94,63 @@ var y = ["for"], b = [
 			}
 			e.style.height = `${n}px`;
 		}
-		function Q(e) {
-			k("update:modelValue", e.target.value), H.value && Z();
+		function ee(e) {
+			A("update:modelValue", e.target.value), W.value && $();
 		}
-		function $() {
-			O.disabled || O.readonly || (k("update:modelValue", ""), k("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(() => [O.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({
+				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
-			}, g(D), {
-				id: N.value,
-				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 };