@well-insight/ui 0.1.9 → 0.1.11

package/dist/mega-menu/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,78 +749,80 @@
     line-height: 1;
 }
 
-/* —— Menu: MegaMenu —— */
-.wi-megamenu {
-    background: var(--wi-color-surface);
-    border: 1px solid var(--wi-color-border);
-    border-radius: var(--wi-radius-md);
-    display: flex;
-    gap: var(--wi-space-1);
-    padding: var(--wi-space-1);
-    position: relative;
+/* —— Menu: MegaMenu —— */
+.wi-megamenu {
+    --wi-megamenu-column-min-width: 8rem;
+    --wi-megamenu-panel-gap: var(--wi-space-4);
+    background: var(--wi-color-surface);
+    border: 1px solid var(--wi-color-border);
+    border-radius: var(--wi-radius-md);
+    display: flex;
+    gap: var(--wi-space-1);
+    padding: var(--wi-space-1);
+    position: relative;
 }
 
-.wi-megamenu__item {
-    position: relative;
+.wi-megamenu__item {
+    position: relative;
 }
 
-.wi-megamenu__trigger {
-    background: transparent;
-    border: 0;
-    border-radius: var(--wi-radius-sm);
-    color: inherit;
-    cursor: pointer;
-    display: inline-flex;
-    font: inherit;
-    gap: var(--wi-space-1);
-    padding: var(--wi-space-2) var(--wi-space-3);
+.wi-megamenu__trigger {
+    background: transparent;
+    border: 0;
+    border-radius: var(--wi-radius-sm);
+    color: inherit;
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    gap: var(--wi-space-1);
+    padding: var(--wi-space-2) var(--wi-space-3);
 }
 
-.wi-megamenu__item--open .wi-megamenu__trigger,
-.wi-megamenu__trigger:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--wi-color-primary) 10%, transparent);
+.wi-megamenu__item--open .wi-megamenu__trigger,
+.wi-megamenu__trigger:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--wi-color-primary) 10%, transparent);
 }
 
-.wi-megamenu__panel {
-    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: flex;
-    gap: var(--wi-space-4);
-    left: 0;
-    margin-top: var(--wi-space-1);
-    padding: var(--wi-space-3);
-    position: absolute;
-    top: 100%;
-    z-index: var(--wi-z-popper);
+.wi-megamenu__panel {
+    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: flex;
+    gap: var(--wi-megamenu-panel-gap);
+    left: 0;
+    margin-top: var(--wi-space-1);
+    padding: var(--wi-space-3);
+    position: absolute;
+    top: 100%;
+    z-index: var(--wi-z-popper);
 }
 
-.wi-megamenu__panel--teleported {
-    margin-top: 0;
-    position: fixed;
-    top: auto;
-    z-index: var(--wi-z-dropdown);
+.wi-megamenu__panel--teleported {
+    margin-top: 0;
+    position: fixed;
+    top: auto;
+    z-index: var(--wi-z-dropdown);
 }
 
-.wi-megamenu__column {
-    display: flex;
-    flex-direction: column;
-    gap: var(--wi-space-1);
-    min-width: 8rem;
+.wi-megamenu__column {
+    display: flex;
+    flex-direction: column;
+    gap: var(--wi-space-1);
+    min-width: var(--wi-megamenu-column-min-width);
 }
 
-.wi-megamenu__link {
-    background: transparent;
-    border: 0;
-    border-radius: var(--wi-radius-sm);
-    color: inherit;
-    cursor: pointer;
-    font: inherit;
-    padding: var(--wi-space-2);
-    text-align: left;
+.wi-megamenu__link {
+    background: transparent;
+    border: 0;
+    border-radius: var(--wi-radius-sm);
+    color: inherit;
+    cursor: pointer;
+    font: inherit;
+    padding: var(--wi-space-2);
+    text-align: left;
 }
 
-.wi-megamenu__link:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--wi-color-primary) 10%, transparent);
+.wi-megamenu__link:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--wi-color-primary) 10%, transparent);
 }

package/dist/menu/index.js

@@ -1,47 +1,49 @@
-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 { 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 "../icon-Cg5TeFqe.js";
+import { t as i } from "../key-CaQYVkjh.js";
+import { c as a } from "../config-CTLkobga.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, createTextVNode as p, createVNode as m, defineComponent as h, normalizeClass as g, normalizeStyle as _, onBeforeUnmount as v, openBlock as y, ref as b, renderList as x, toDisplayString as S, watch as C, withCtx as w } 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, createTextVNode as m, createVNode as h, defineComponent as g, normalizeClass as _, normalizeStyle as v, onBeforeUnmount as y, openBlock as b, ref as x, renderList as S, toDisplayString as C, watch as w, withCtx as T } from "vue";
 //#region src/components/Menu/MenuNodes.vue?vue&type=script&setup=true&lang.ts
-var T = {
+var E = {
 	key: 0,
 	class: "wi-menu__separator",
 	role: "separator"
-}, E = {
+}, D = {
 	key: 1,
 	class: "wi-menu__group"
-}, D = [
+}, O = [
 	"disabled",
 	"aria-expanded",
 	"onClick"
-], O = {
+], k = {
 	key: 0,
 	class: "wi-menu__icon",
 	"aria-hidden": "true"
-}, k = {
+}, A = {
 	key: 1,
 	class: "wi-menu__label"
-}, A = {
+}, j = {
 	key: 2,
 	class: "wi-menu__caret",
 	"aria-hidden": "true"
-}, j = {
+}, M = {
 	key: 0,
 	class: "wi-menu__submenu",
 	role: "group"
-}, M = [
+}, N = [
 	"disabled",
 	"title",
 	"onClick"
-], N = {
+], P = {
 	key: 0,
 	class: "wi-menu__icon",
 	"aria-hidden": "true"
-}, P = {
+}, F = {
 	key: 1,
 	class: "wi-menu__label"
-}, F = /* @__PURE__ */ h({
+}, I = /* @__PURE__ */ g({
 	__name: "MenuNodes",
 	props: {
 		items: {},
@@ -51,71 +53,74 @@ var T = {
 		selectedKey: {}
 	},
 	emits: ["activate"],
-	setup(n, { emit: r }) {
-		let i = n, o = b({});
-		function s(e, t) {
-			return e.key ?? e.label ?? `item-${i.depth}-${t}`;
+	setup(t, { emit: n }) {
+		let a = t, s = x({});
+		function c(e, t) {
+			return i(e, t, `item-${a.depth}`);
 		}
-		function h(e) {
+		function g(e) {
 			let t = e.key ?? e.label;
-			return !!(t && t === i.selectedKey);
+			return !!(t && t === a.selectedKey);
 		}
-		function v(e, t) {
+		function y(e, t) {
 			if (e.disabled) return;
-			let n = s(e, t);
-			o.value = {
-				...o.value,
-				[n]: !o.value[n]
+			let n = c(e, t);
+			s.value = {
+				...s.value,
+				[n]: !s.value[n]
 			};
 		}
-		function C(t) {
-			return t.icon && e(t.icon) ? t.icon : void 0;
+		function w(e) {
+			return r(e.icon);
 		}
-		let w = c(() => i.collapsed ? 0 : i.depth * i.indent);
-		return (e, r) => (y(!0), d(a, null, x(n.items, (i, c) => (y(), d(a, { key: s(i, c) }, [i.separator ? (y(), d("div", T)) : i.items?.length ? (y(), d("div", E, [f("button", {
+		let T = l(() => a.collapsed ? 0 : a.depth * a.indent);
+		return (n, r) => (b(!0), f(o, null, S(t.items, (i, a) => (b(), f(o, { key: c(i, a) }, [i.separator ? (b(), f("div", E)) : i.items?.length ? (b(), f("div", D, [p("button", {
 			type: "button",
-			class: g(["wi-menu__item wi-menu__item--parent", { "wi-menu__item--selected": h(i) }]),
+			class: _(["wi-menu__item wi-menu__item--parent", { "wi-menu__item--selected": g(i) }]),
 			disabled: i.disabled,
-			style: _({ paddingLeft: `${12 + w.value}px` }),
-			"aria-expanded": !!o.value[s(i, c)],
-			onClick: (e) => v(i, c)
+			style: v({ paddingLeft: `${12 + T.value}px` }),
+			"aria-expanded": !!s.value[c(i, a)],
+			onClick: (e) => y(i, a)
 		}, [
-			C(i) || i.icon ? (y(), d("span", O, [C(i) ? (y(), l(t, {
+			w(i) || i.icon ? (b(), f("span", k, [w(i) ? (b(), u(e, {
 				key: 0,
-				name: C(i),
+				name: w(i),
+				size: "sm"
+			}, null, 8, ["name"])) : (b(), f(o, { key: 1 }, [m(C(i.icon), 1)], 64))])) : d("", !0),
+			t.collapsed ? d("", !0) : (b(), f("span", A, C(i.label), 1)),
+			t.collapsed ? d("", !0) : (b(), f("span", j, [h(e, {
+				name: s.value[c(i, a)] ? "chevron-down" : "chevron-right",
 				size: "sm"
-			}, null, 8, ["name"])) : (y(), d(a, { key: 1 }, [p(S(i.icon), 1)], 64))])) : u("", !0),
-			n.collapsed ? u("", !0) : (y(), d("span", k, S(i.label), 1)),
-			n.collapsed ? u("", !0) : (y(), d("span", A, S(o.value[s(i, c)] ? "▾" : "▸"), 1))
-		], 14, D), o.value[s(i, c)] ? (y(), d("div", j, [m(F, {
+			}, null, 8, ["name"])]))
+		], 14, O), s.value[c(i, a)] ? (b(), f("div", M, [h(I, {
 			items: i.items,
-			depth: n.depth + 1,
-			indent: n.indent,
-			collapsed: n.collapsed,
-			"selected-key": n.selectedKey,
-			onActivate: r[0] ||= (t) => e.$emit("activate", t)
+			depth: t.depth + 1,
+			indent: t.indent,
+			collapsed: t.collapsed,
+			"selected-key": t.selectedKey,
+			onActivate: r[0] ||= (e) => n.$emit("activate", e)
 		}, null, 8, [
 			"items",
 			"depth",
 			"indent",
 			"collapsed",
 			"selected-key"
-		])])) : u("", !0)])) : (y(), d("button", {
+		])])) : d("", !0)])) : (b(), f("button", {
 			key: 2,
 			type: "button",
-			class: g(["wi-menu__item", { "wi-menu__item--selected": h(i) }]),
+			class: _(["wi-menu__item", { "wi-menu__item--selected": g(i) }]),
 			role: "menuitem",
 			disabled: i.disabled,
-			style: _({ paddingLeft: `${12 + w.value}px` }),
-			title: n.collapsed ? i.label : void 0,
-			onClick: (t) => e.$emit("activate", i)
-		}, [C(i) || i.icon ? (y(), d("span", N, [C(i) ? (y(), l(t, {
+			style: v({ paddingLeft: `${12 + T.value}px` }),
+			title: t.collapsed ? i.label : void 0,
+			onClick: (e) => n.$emit("activate", i)
+		}, [w(i) || i.icon ? (b(), f("span", P, [w(i) ? (b(), u(e, {
 			key: 0,
-			name: C(i),
+			name: w(i),
 			size: "sm"
-		}, null, 8, ["name"])) : (y(), d(a, { key: 1 }, [p(S(i.icon), 1)], 64))])) : u("", !0), n.collapsed ? u("", !0) : (y(), d("span", P, S(i.label), 1))], 14, M))], 64))), 128));
+		}, null, 8, ["name"])) : (b(), f(o, { key: 1 }, [m(C(i.icon), 1)], 64))])) : d("", !0), t.collapsed ? d("", !0) : (b(), f("span", F, C(i.label), 1))], 14, N))], 64))), 128));
 	}
-}), I = /* @__PURE__ */ h({
+}), L = /* @__PURE__ */ g({
 	__name: "Menu",
 	props: {
 		model: {},
@@ -144,34 +149,34 @@ var T = {
 		"update:selectedKey",
 		"select"
 	],
-	setup(e, { emit: t }) {
-		let a = e, f = t, p = i(), h = b(null), _ = c(() => n(a.popup ? a : { teleport: !1 }, p.value.appendTo)), x = c(() => a.popup && r(a, p.value.appendTo));
+	setup(e, { emit: r }) {
+		let i = e, o = r, p = a(), m = x(null), g = l(() => t(i.popup ? i : { teleport: !1 }, p.value.appendTo)), v = l(() => i.popup && n(i, p.value.appendTo));
 		function S(e) {
 			if (e.disabled || e.separator) return;
 			e.command?.();
 			let t = e.key ?? e.label ?? null;
-			f("update:selectedKey", t), f("select", e), a.popup && f("update:modelValue", !1);
+			o("update:selectedKey", t), o("select", e), i.popup && o("update:modelValue", !1);
 		}
-		function T(e) {
-			!a.popup || !a.modelValue || h.value && !h.value.contains(e.target) && f("update:modelValue", !1);
+		function C(e) {
+			!i.popup || !i.modelValue || m.value && !m.value.contains(e.target) && o("update:modelValue", !1);
 		}
-		return C(() => !!(a.modelValue && a.popup), (e) => {
-			e ? document.addEventListener("click", T) : document.removeEventListener("click", T);
-		}, { immediate: !0 }), v(() => document.removeEventListener("click", T)), (t, n) => e.popup ? (y(), l(o, {
+		return w(() => !!(i.modelValue && i.popup), (e) => {
+			e ? document.addEventListener("click", C) : document.removeEventListener("click", C);
+		}, { immediate: !0 }), y(() => document.removeEventListener("click", C)), (t, n) => e.popup ? (b(), u(s, {
 			key: 1,
-			to: _.value.to,
-			disabled: _.value.disabled
-		}, [m(s, { name: "wi-scale-fade" }, {
-			default: w(() => [e.modelValue ? (y(), d("div", {
+			to: g.value.to,
+			disabled: g.value.disabled
+		}, [h(c, { name: "wi-scale-fade" }, {
+			default: T(() => [e.modelValue ? (b(), f("div", {
 				key: 0,
 				ref_key: "root",
-				ref: h,
-				class: g(["wi-menu wi-menu--popup", {
-					"wi-menu--teleported": x.value,
+				ref: m,
+				class: _(["wi-menu wi-menu--popup", {
+					"wi-menu--teleported": v.value,
 					"wi-menu--collapsed": e.collapsed
 				}]),
 				role: "menu"
-			}, [m(F, {
+			}, [h(I, {
 				items: e.model,
 				depth: 0,
 				indent: e.indent,
@@ -183,15 +188,15 @@ var T = {
 				"indent",
 				"collapsed",
 				"selected-key"
-			])], 2)) : u("", !0)]),
+			])], 2)) : d("", !0)]),
 			_: 1
-		})], 8, ["to", "disabled"])) : (y(), d("div", {
+		})], 8, ["to", "disabled"])) : (b(), f("div", {
 			key: 0,
 			ref_key: "root",
-			ref: h,
-			class: g(["wi-menu", { "wi-menu--collapsed": e.collapsed }]),
+			ref: m,
+			class: _(["wi-menu", { "wi-menu--collapsed": e.collapsed }]),
 			role: "menu"
-		}, [m(F, {
+		}, [h(I, {
 			items: e.model,
 			depth: 0,
 			indent: e.indent,
@@ -207,4 +212,4 @@ var T = {
 	}
 });
 //#endregion
-export { I as WiMenu };
+export { L as WiMenu };