@well-insight/ui 0.1.9 → 0.1.11

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(!0), o.showDelay));
+			a.trigger === "hover" && (X(), R = setTimeout(K, a.showDelay, !0));
 		}
 		function Q() {
-			o.trigger === "hover" && (X(), V = setTimeout(() => K(!1), o.hideDelay));
-		}
-		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(!1), o.hideDelay));
+			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

@@ -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);
 }
@@ -774,81 +788,82 @@
     }
 }
 
-.wi-dropdown {
-    display: inline-block;
-    position: relative;
+.wi-dropdown {
+    --wi-dropdown-menu-min-width: 10rem;
+    display: inline-block;
+    position: relative;
 }
 
-.wi-dropdown__trigger {
-    align-items: center;
-    background: transparent;
-    border: 0;
-    color: inherit;
-    cursor: pointer;
-    display: inline-flex;
-    font: inherit;
+.wi-dropdown__trigger {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    color: inherit;
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
 }
 
-.wi-dropdown__menu {
-    background: var(--wi-color-surface);
-    border: 1px solid var(--wi-color-border);
-    border-radius: var(--wi-radius-md);
-    box-shadow: var(--wi-shadow-md);
-    display: grid;
-    gap: var(--wi-space-1);
-    min-width: var(--wi-menu-min-width);
-    padding: var(--wi-space-1);
-    position: absolute;
-    top: calc(100% + var(--wi-space-2));
-    z-index: var(--wi-z-popper);
+.wi-dropdown__menu {
+    background: var(--wi-color-surface);
+    border: 1px solid var(--wi-color-border);
+    border-radius: var(--wi-radius-md);
+    box-shadow: var(--wi-shadow-md);
+    display: grid;
+    gap: var(--wi-space-1);
+    min-width: var(--wi-dropdown-menu-min-width);
+    padding: var(--wi-space-1);
+    position: absolute;
+    top: calc(100% + var(--wi-space-2));
+    z-index: var(--wi-z-popper);
 }
 
-.wi-dropdown__menu--bottom-start {
-    left: 0;
+.wi-dropdown__menu--bottom-start {
+    left: 0;
 }
 
-.wi-dropdown__menu--bottom-end {
-    right: 0;
+.wi-dropdown__menu--bottom-end {
+    right: 0;
 }
 
-.wi-dropdown__menu--teleported {
-    position: fixed;
-    top: auto;
-    z-index: var(--wi-z-overlay);
+.wi-dropdown__menu--teleported {
+    position: fixed;
+    top: auto;
+    z-index: var(--wi-z-overlay);
 }
 
-.wi-dropdown__item {
-    background: transparent;
-    border: 0;
-    border-radius: var(--wi-radius-sm);
-    color: var(--wi-color-text);
-    cursor: pointer;
-    font-size: var(--wi-font-size-md);
-    padding: var(--wi-space-2) var(--wi-space-3);
-    text-align: left;
-    white-space: nowrap;
+.wi-dropdown__item {
+    background: transparent;
+    border: 0;
+    border-radius: var(--wi-radius-sm);
+    color: var(--wi-color-text);
+    cursor: pointer;
+    font-size: var(--wi-font-size-md);
+    padding: var(--wi-space-2) var(--wi-space-3);
+    text-align: left;
+    white-space: nowrap;
 }
 
-.wi-dropdown__item:hover:not(:disabled),
-.wi-dropdown__item--highlighted:not(:disabled) {
-    background: color-mix(in srgb, var(--wi-color-primary) 10%, transparent);
-    color: var(--wi-color-primary);
+.wi-dropdown__item:hover:not(:disabled),
+.wi-dropdown__item--highlighted:not(:disabled) {
+    background: color-mix(in srgb, var(--wi-color-primary) 10%, transparent);
+    color: var(--wi-color-primary);
 }
 
-.wi-dropdown__item:disabled {
-    color: var(--wi-color-text-muted);
-    cursor: not-allowed;
-    opacity: var(--wi-opacity-disabled);
+.wi-dropdown__item:disabled {
+    color: var(--wi-color-text-muted);
+    cursor: not-allowed;
+    opacity: var(--wi-opacity-disabled);
 }
 
-.wi-dropdown__separator {
-    background: var(--wi-color-border);
-    height: 1px;
-    margin: var(--wi-space-1) 0;
+.wi-dropdown__separator {
+    background: var(--wi-color-border);
+    height: 1px;
+    margin: var(--wi-space-1) 0;
 }
 
-.wi-dropdown__group-label {
-    color: var(--wi-color-text-muted);
-    font-size: var(--wi-font-size-xs);
-    padding: var(--wi-space-2) var(--wi-space-3) var(--wi-space-1);
+.wi-dropdown__group-label {
+    color: var(--wi-color-text-muted);
+    font-size: var(--wi-font-size-xs);
+    padding: var(--wi-space-2) var(--wi-space-3) var(--wi-space-1);
 }

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 };