@well-insight/ui 0.1.9 → 0.1.11

package/dist/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);
 }
@@ -774,71 +788,77 @@
     }
 }
 
-/* —— Menu: Menu —— */
-.wi-menu {
-    background: var(--wi-color-surface);
-    border: 1px solid var(--wi-color-border);
-    border-radius: var(--wi-radius-md);
-    display: flex;
-    flex-direction: column;
-    gap: 0.125rem;
-    min-width: var(--wi-menu-min-width);
-    padding: var(--wi-space-1);
+/* —— Menu: Menu —— */
+.wi-menu {
+    --wi-menu-min-width: 10rem;
+    --wi-menu-item-gap: 0.125rem;
+    background: var(--wi-color-surface);
+    border: 1px solid var(--wi-color-border);
+    border-radius: var(--wi-radius-md);
+    display: flex;
+    flex-direction: column;
+    gap: var(--wi-menu-item-gap);
+    min-width: var(--wi-menu-min-width);
+    padding: var(--wi-space-1);
 }
 
-.wi-menu--popup {
-    box-shadow: var(--wi-shadow-md);
-    position: absolute;
-    z-index: var(--wi-z-popper);
+.wi-menu--popup {
+    box-shadow: var(--wi-shadow-md);
+    position: absolute;
+    z-index: var(--wi-z-popper);
 }
 
-.wi-menu--teleported {
-    position: fixed;
-    z-index: var(--wi-z-dropdown);
+.wi-menu--teleported {
+    position: fixed;
+    z-index: var(--wi-z-dropdown);
 }
 
-.wi-menu__item {
-    background: transparent;
-    border: 0;
-    border-radius: var(--wi-radius-sm);
-    color: var(--wi-color-text);
-    cursor: pointer;
-    font: inherit;
-    padding: var(--wi-space-2) var(--wi-space-3);
-    text-align: start;
-    width: 100%;
+.wi-menu__item {
+    background: transparent;
+    border: 0;
+    border-radius: var(--wi-radius-sm);
+    color: var(--wi-color-text);
+    cursor: pointer;
+    font: inherit;
+    padding: var(--wi-space-2) var(--wi-space-3);
+    text-align: start;
+    width: 100%;
 }
 
-.wi-menu__item:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--wi-color-primary) 10%, var(--wi-color-surface));
+.wi-menu__item:hover:not(:disabled) {
+    background: color-mix(
+        in srgb,
+        var(--wi-color-primary) 10%,
+        var(--wi-color-surface)
+    );
 }
 
-.wi-menu__item:disabled {
-    cursor: not-allowed;
-    opacity: var(--wi-opacity-disabled);
+.wi-menu__item:disabled {
+    cursor: not-allowed;
+    opacity: var(--wi-opacity-disabled);
 }
 
-.wi-menu__item:focus-visible {
-    box-shadow: var(--wi-focus-shadow);
-    outline: none;
+.wi-menu__item:focus-visible {
+    box-shadow: var(--wi-focus-shadow);
+    outline: none;
 }
 
-.wi-menu__separator {
-    background: var(--wi-color-border);
-    height: 1px;
-    margin: var(--wi-space-1) 0;
+.wi-menu__separator {
+    background: var(--wi-color-border);
+    height: 1px;
+    margin: var(--wi-space-1) 0;
 }
 
-.wi-menu--collapsed {
-    width: auto;
+.wi-menu--collapsed {
+    width: auto;
 }
 
-.wi-menu__item {
-    align-items: center;
-    display: flex;
-    gap: var(--wi-space-2);
+.wi-menu__item {
+    align-items: center;
+    display: flex;
+    gap: var(--wi-space-2);
 }
 
-.wi-menu__caret {
-    margin-left: auto;
+.wi-menu__caret {
+    margin-left: auto;
 }

package/dist/menubar/index.js

@@ -1,28 +1,30 @@
-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 { c as a } from "../config-CTLkobga.js";
+import { n as o } 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, createTextVNode as m, createVNode as h, defineComponent as g, nextTick as _, normalizeClass as v, normalizeStyle as ee, onBeforeUnmount as y, onMounted as b, openBlock as x, ref as S, renderList as C, toDisplayString as w, unref as T, watch as E, withCtx as D, withModifiers as O } from "vue";
+import { Fragment as s, Teleport as c, Transition as ee, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, nextTick as _, normalizeClass as v, normalizeStyle as y, onBeforeUnmount as b, onMounted as x, openBlock as S, ref as C, renderList as w, toDisplayString as T, unref as E, watch as D, withCtx as O, withModifiers as k } from "vue";
 //#region src/components/Menubar/Menubar.vue?vue&type=script&setup=true&lang.ts
-var k = ["aria-label"], A = [
+var A = ["aria-label"], j = [
 	"disabled",
 	"aria-expanded",
 	"aria-haspopup",
 	"onClick"
-], j = {
+], M = {
 	key: 0,
 	class: "wi-menubar__icon",
 	"aria-hidden": "true"
-}, te = {
+}, N = {
 	key: 1,
 	class: "wi-menubar__caret",
 	"aria-hidden": "true"
-}, M = ["disabled", "onClick"], N = {
+}, te = ["disabled", "onClick"], P = {
 	key: 0,
 	class: "wi-menubar__icon",
 	"aria-hidden": "true"
-}, P = /* @__PURE__ */ g({
+}, F = /* @__PURE__ */ g({
 	__name: "Menubar",
 	props: {
 		model: {},
@@ -34,108 +36,108 @@ var k = ["aria-label"], A = [
 		appendTo: {}
 	},
 	emits: ["update:selectedKey", "select"],
-	setup(g, { emit: P }) {
-		let F = g, I = P, L = i(), R = a(), z = S(null), B = S(null), V = S([]), H = S({}), U = l(() => n(F, L.value.appendTo)), W = l(() => r(F, L.value.appendTo));
-		function G(e, t) {
-			V.value[t] = e instanceof HTMLElement ? e : null;
+	setup(g, { emit: F }) {
+		let I = g, L = F, R = a(), z = o(), B = C(null), V = C(null), H = C([]), U = C({}), W = l(() => t(I, R.value.appendTo)), G = l(() => n(I, R.value.appendTo));
+		function K(e, t) {
+			H.value[t] = e instanceof HTMLElement ? e : null;
 		}
-		function K() {
-			if (!W.value || z.value == null) return;
-			let e = V.value[z.value];
+		function q() {
+			if (!G.value || B.value == null) return;
+			let e = H.value[B.value];
 			if (!e) return;
 			let t = e.getBoundingClientRect();
-			H.value = {
-				left: `${t.left}px`,
-				top: `${t.bottom + 4}px`
-			};
-		}
-		function q(e) {
-			return e.key ?? e.label;
+			U.value = r(t, "bottom-start", { gap: 4 });
 		}
 		function J(e) {
-			return !!(F.selectedKey && q(e) === F.selectedKey);
+			return e.key ?? e.label;
 		}
-		function Y(t) {
-			return t.icon && e(t.icon) ? t.icon : void 0;
+		function Y(e) {
+			return !!(I.selectedKey && J(e) === I.selectedKey);
 		}
 		function X(e) {
-			e.disabled || (e.command?.(), I("update:selectedKey", q(e)), I("select", e));
+			return i(e.icon);
 		}
-		function Z(e, t) {
+		function Z(e) {
+			e.disabled || (e.command?.(), L("update:selectedKey", J(e)), L("select", e));
+		}
+		function ne(e, t) {
 			if (!t.disabled) {
 				if (!t.items?.length) {
-					X(t), z.value = null;
+					Z(t), B.value = null;
 					return;
 				}
-				z.value = z.value === e ? null : e, z.value != null && _(() => K());
+				B.value = B.value === e ? null : e, B.value != null && _(() => q());
 			}
 		}
-		function ne(e) {
-			X(e), z.value = null;
+		function re(e) {
+			Z(e), B.value = null;
 		}
 		function Q(e) {
 			let t = e.target;
-			B.value?.contains(t) || document.querySelector(".wi-menubar__submenu--teleported")?.contains(t) || (z.value = null);
+			V.value?.contains(t) || document.querySelector(".wi-menubar__submenu--teleported")?.contains(t) || (B.value = null);
 		}
 		function $() {
-			z.value != null && K();
+			B.value != null && q();
 		}
-		return E(z, (e) => {
-			e != null && W.value ? (window.addEventListener("resize", $), window.addEventListener("scroll", $, !0)) : (window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
-		}), b(() => document.addEventListener("click", Q)), y(() => {
+		return D(B, (e) => {
+			e != null && G.value ? (window.addEventListener("resize", $), window.addEventListener("scroll", $, !0)) : (window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
+		}), x(() => document.addEventListener("click", Q)), b(() => {
 			document.removeEventListener("click", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0);
-		}), (e, n) => (x(), f("nav", {
+		}), (t, n) => (S(), f("nav", {
 			ref_key: "root",
-			ref: B,
+			ref: V,
 			class: "wi-menubar",
-			"aria-label": T(R).menubar
-		}, [(x(!0), f(o, null, C(g.model, (e, n) => (x(), f("div", {
-			key: `${e.label}-${n}`,
+			"aria-label": E(z).menubar
+		}, [(S(!0), f(s, null, w(g.model, (t, n) => (S(), f("div", {
+			key: `${t.label}-${n}`,
 			class: v(["wi-menubar__item", {
-				"wi-menubar__item--open": z.value === n,
-				"wi-menubar__item--selected": J(e)
+				"wi-menubar__item--open": B.value === n,
+				"wi-menubar__item--selected": Y(t)
 			}])
 		}, [p("button", {
 			ref_for: !0,
-			ref: (e) => G(e, n),
+			ref: (e) => K(e, n),
 			type: "button",
-			class: v(["wi-menubar__trigger", { "wi-menubar__trigger--selected": J(e) }]),
-			disabled: e.disabled,
-			"aria-expanded": e.items?.length ? z.value === n : void 0,
-			"aria-haspopup": e.items?.length ? "menu" : void 0,
-			onClick: O((t) => Z(n, e), ["stop"])
+			class: v(["wi-menubar__trigger", { "wi-menubar__trigger--selected": Y(t) }]),
+			disabled: t.disabled,
+			"aria-expanded": t.items?.length ? B.value === n : void 0,
+			"aria-haspopup": t.items?.length ? "menu" : void 0,
+			onClick: k((e) => ne(n, t), ["stop"])
 		}, [
-			Y(e) || e.icon ? (x(), f("span", j, [Y(e) ? (x(), u(t, {
+			X(t) || t.icon ? (S(), f("span", M, [X(t) ? (S(), u(e, {
 				key: 0,
-				name: Y(e),
+				name: X(t),
+				size: "sm"
+			}, null, 8, ["name"])) : (S(), f(s, { key: 1 }, [m(T(t.icon), 1)], 64))])) : d("", !0),
+			m(" " + T(t.label) + " ", 1),
+			t.items?.length ? (S(), f("span", N, [h(e, {
+				name: "chevron-down",
 				size: "sm"
-			}, null, 8, ["name"])) : (x(), f(o, { key: 1 }, [m(w(e.icon), 1)], 64))])) : d("", !0),
-			m(" " + w(e.label) + " ", 1),
-			e.items?.length ? (x(), f("span", te, "▾")) : d("", !0)
-		], 10, A), (x(), u(s, {
-			to: U.value.to,
-			disabled: U.value.disabled
-		}, [h(c, { name: "wi-scale-fade" }, {
-			default: D(() => [e.items?.length && z.value === n ? (x(), f("div", {
+			})])) : d("", !0)
+		], 10, j), (S(), u(c, {
+			to: W.value.to,
+			disabled: W.value.disabled
+		}, [h(ee, { name: "wi-scale-fade" }, {
+			default: O(() => [t.items?.length && B.value === n ? (S(), f("div", {
 				key: 0,
-				class: v(["wi-menubar__submenu", { "wi-menubar__submenu--teleported": W.value }]),
-				style: ee(W.value ? H.value : void 0),
+				class: v(["wi-menubar__submenu", { "wi-menubar__submenu--teleported": G.value }]),
+				style: y(G.value ? U.value : void 0),
 				role: "menu"
-			}, [(x(!0), f(o, null, C(e.items, (e, n) => (x(), f("button", {
-				key: `${e.label}-${n}`,
+			}, [(S(!0), f(s, null, w(t.items, (t, n) => (S(), f("button", {
+				key: `${t.label}-${n}`,
 				type: "button",
-				class: v(["wi-menubar__subitem", { "wi-menubar__subitem--selected": J(e) }]),
+				class: v(["wi-menubar__subitem", { "wi-menubar__subitem--selected": Y(t) }]),
 				role: "menuitem",
-				disabled: e.disabled,
-				onClick: O((t) => ne(e), ["stop"])
-			}, [Y(e) || e.icon ? (x(), f("span", N, [Y(e) ? (x(), u(t, {
+				disabled: t.disabled,
+				onClick: k((e) => re(t), ["stop"])
+			}, [X(t) || t.icon ? (S(), f("span", P, [X(t) ? (S(), u(e, {
 				key: 0,
-				name: Y(e),
+				name: X(t),
 				size: "sm"
-			}, null, 8, ["name"])) : (x(), f(o, { key: 1 }, [m(w(e.icon), 1)], 64))])) : d("", !0), m(" " + w(e.label), 1)], 10, M))), 128))], 6)) : d("", !0)]),
+			}, null, 8, ["name"])) : (S(), f(s, { key: 1 }, [m(T(t.icon), 1)], 64))])) : d("", !0), m(" " + T(t.label), 1)], 10, te))), 128))], 6)) : d("", !0)]),
 			_: 2
-		}, 1024)], 8, ["to", "disabled"]))], 2))), 128))], 8, k));
+		}, 1024)], 8, ["to", "disabled"]))], 2))), 128))], 8, A));
 	}
 });
 //#endregion
-export { P as WiMenubar };
+export { F as WiMenubar };