@well-insight/ui 0.1.9 → 0.1.11

package/dist/tiered-menu/index.js

@@ -1,51 +1,52 @@
-import { n as e, t } from "../overlay-oR-5MDuE.js";
-import { c as n } 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 { c as r } from "../config-CTLkobga.js";
 import "./style.js";
-import { Fragment as r, Teleport as i, Transition as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, normalizeClass as p, onBeforeUnmount as m, openBlock as h, ref as g, renderList as _, toDisplayString as v, watch as y, withCtx as b } from "vue";
+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, createVNode as f, defineComponent as p, normalizeClass as m, onBeforeUnmount as h, openBlock as g, ref as _, renderList as v, toDisplayString as y, watch as b, withCtx as x } from "vue";
 //#region src/components/TieredMenu/TieredMenu.vue?vue&type=script&setup=true&lang.ts
-var x = ["onMouseenter"], S = {
+var S = ["onMouseenter"], C = {
 	key: 0,
 	class: "wi-tieredmenu__separator",
 	role: "separator"
-}, C = [
+}, w = [
 	"disabled",
 	"aria-haspopup",
 	"aria-expanded",
 	"onClick"
-], w = {
+], T = {
 	key: 0,
 	class: "wi-tieredmenu__caret",
 	"aria-hidden": "true"
-}, T = {
+}, E = {
 	key: 2,
 	class: "wi-tieredmenu__submenu",
 	role: "menu"
-}, E = {
+}, D = {
 	key: 0,
 	class: "wi-tieredmenu__separator",
 	role: "separator"
-}, D = ["disabled", "onClick"], O = ["onMouseenter"], k = {
+}, O = ["disabled", "onClick"], k = ["onMouseenter"], A = {
 	key: 0,
 	class: "wi-tieredmenu__separator",
 	role: "separator"
-}, A = [
+}, j = [
 	"disabled",
 	"aria-haspopup",
 	"aria-expanded",
 	"onClick"
-], j = {
+], M = {
 	key: 0,
 	class: "wi-tieredmenu__caret",
 	"aria-hidden": "true"
-}, M = {
+}, N = {
 	key: 2,
 	class: "wi-tieredmenu__submenu",
 	role: "menu"
-}, N = {
+}, P = {
 	key: 0,
 	class: "wi-tieredmenu__separator",
 	role: "separator"
-}, P = ["disabled", "onClick"], F = /* @__PURE__ */ f({
+}, F = ["disabled", "onClick"], I = /* @__PURE__ */ p({
 	__name: "TieredMenu",
 	props: {
 		model: {},
@@ -64,87 +65,93 @@ var x = ["onMouseenter"], S = {
 		appendTo: {}
 	},
 	emits: ["update:modelValue"],
-	setup(f, { emit: F }) {
-		let I = f, L = F, R = n(), z = g(null), B = g(null), V = o(() => e(I.popup ? I : { teleport: !1 }, R.value.appendTo)), H = o(() => I.popup && t(I, R.value.appendTo));
-		function U(e) {
-			e.disabled || e.separator || e.items?.length || (e.command?.(), B.value = null, I.popup && L("update:modelValue", !1));
-		}
+	setup(p, { emit: I }) {
+		let L = p, R = I, z = r(), B = _(null), V = _(null), H = s(() => t(L.popup ? L : { teleport: !1 }, z.value.appendTo)), U = s(() => L.popup && n(L, z.value.appendTo));
 		function W(e) {
-			e.disabled || e.separator || (e.command?.(), B.value = null, I.popup && L("update:modelValue", !1));
+			e.disabled || e.separator || e.items?.length || (e.command?.(), V.value = null, L.popup && R("update:modelValue", !1));
+		}
+		function G(e) {
+			e.disabled || e.separator || (e.command?.(), V.value = null, L.popup && R("update:modelValue", !1));
 		}
-		function G(e, t) {
+		function K(e, t) {
 			if (t.disabled || !t.items?.length) {
-				B.value = null;
+				V.value = null;
 				return;
 			}
-			B.value = e;
+			V.value = e;
 		}
-		function K(e) {
-			z.value && !z.value.contains(e.target) && (B.value = null, I.popup && I.modelValue && L("update:modelValue", !1));
+		function q(e) {
+			B.value && !B.value.contains(e.target) && (V.value = null, L.popup && L.modelValue && R("update:modelValue", !1));
 		}
-		return y(() => !!(!I.popup || I.modelValue), (e) => {
-			e ? document.addEventListener("click", K) : document.removeEventListener("click", K);
-		}, { immediate: !0 }), m(() => document.removeEventListener("click", K)), (e, t) => f.popup ? (h(), s(i, {
+		return b(() => !!(!L.popup || L.modelValue), (e) => {
+			e ? document.addEventListener("click", q) : document.removeEventListener("click", q);
+		}, { immediate: !0 }), h(() => document.removeEventListener("click", q)), (t, n) => p.popup ? (g(), c(a, {
 			key: 1,
-			to: V.value.to,
-			disabled: V.value.disabled
-		}, [d(a, { name: "wi-scale-fade" }, {
-			default: b(() => [f.modelValue ? (h(), l("div", {
+			to: H.value.to,
+			disabled: H.value.disabled
+		}, [f(o, { name: "wi-scale-fade" }, {
+			default: x(() => [p.modelValue ? (g(), u("div", {
 				key: 0,
 				ref_key: "root",
-				ref: z,
-				class: p(["wi-tieredmenu wi-tieredmenu--popup", { "wi-tieredmenu--teleported": H.value }]),
+				ref: B,
+				class: m(["wi-tieredmenu wi-tieredmenu--popup", { "wi-tieredmenu--teleported": U.value }]),
 				role: "menu"
-			}, [(h(!0), l(r, null, _(f.model, (e, t) => (h(), l("div", {
-				key: `${e.label ?? "sep"}-${t}`,
+			}, [(g(!0), u(i, null, v(p.model, (t, n) => (g(), u("div", {
+				key: `${t.label ?? "sep"}-${n}`,
 				class: "wi-tieredmenu__row",
-				onMouseenter: (n) => G(t, e)
-			}, [e.separator ? (h(), l("div", k)) : (h(), l("button", {
+				onMouseenter: (e) => K(n, t)
+			}, [t.separator ? (g(), u("div", A)) : (g(), u("button", {
 				key: 1,
 				type: "button",
 				class: "wi-tieredmenu__item",
 				role: "menuitem",
-				disabled: e.disabled,
-				"aria-haspopup": e.items?.length ? "menu" : void 0,
-				"aria-expanded": e.items?.length ? B.value === t : void 0,
-				onClick: (n) => e.items?.length ? G(t, e) : U(e)
-			}, [u("span", null, v(e.label), 1), e.items?.length ? (h(), l("span", j, "▸")) : c("", !0)], 8, A)), e.items?.length && B.value === t ? (h(), l("div", M, [(h(!0), l(r, null, _(e.items, (e, t) => (h(), l(r, { key: `${e.label ?? "sep"}-${t}` }, [e.separator ? (h(), l("div", N)) : (h(), l("button", {
+				disabled: t.disabled,
+				"aria-haspopup": t.items?.length ? "menu" : void 0,
+				"aria-expanded": t.items?.length ? V.value === n : void 0,
+				onClick: (e) => t.items?.length ? K(n, t) : W(t)
+			}, [d("span", null, y(t.label), 1), t.items?.length ? (g(), u("span", M, [f(e, {
+				name: "chevron-right",
+				size: "sm"
+			})])) : l("", !0)], 8, j)), t.items?.length && V.value === n ? (g(), u("div", N, [(g(!0), u(i, null, v(t.items, (e, t) => (g(), u(i, { key: `${e.label ?? "sep"}-${t}` }, [e.separator ? (g(), u("div", P)) : (g(), u("button", {
 				key: 1,
 				type: "button",
 				class: "wi-tieredmenu__item",
 				role: "menuitem",
 				disabled: e.disabled,
-				onClick: (t) => W(e)
-			}, v(e.label), 9, P))], 64))), 128))])) : c("", !0)], 40, O))), 128))], 2)) : c("", !0)]),
+				onClick: (t) => G(e)
+			}, y(e.label), 9, F))], 64))), 128))])) : l("", !0)], 40, k))), 128))], 2)) : l("", !0)]),
 			_: 1
-		})], 8, ["to", "disabled"])) : (h(), l("div", {
+		})], 8, ["to", "disabled"])) : (g(), u("div", {
 			key: 0,
 			ref_key: "root",
-			ref: z,
+			ref: B,
 			class: "wi-tieredmenu",
 			role: "menu"
-		}, [(h(!0), l(r, null, _(f.model, (e, t) => (h(), l("div", {
-			key: `${e.label ?? "sep"}-${t}`,
+		}, [(g(!0), u(i, null, v(p.model, (t, n) => (g(), u("div", {
+			key: `${t.label ?? "sep"}-${n}`,
 			class: "wi-tieredmenu__row",
-			onMouseenter: (n) => G(t, e)
-		}, [e.separator ? (h(), l("div", S)) : (h(), l("button", {
+			onMouseenter: (e) => K(n, t)
+		}, [t.separator ? (g(), u("div", C)) : (g(), u("button", {
 			key: 1,
 			type: "button",
 			class: "wi-tieredmenu__item",
 			role: "menuitem",
-			disabled: e.disabled,
-			"aria-haspopup": e.items?.length ? "menu" : void 0,
-			"aria-expanded": e.items?.length ? B.value === t : void 0,
-			onClick: (n) => e.items?.length ? G(t, e) : U(e)
-		}, [u("span", null, v(e.label), 1), e.items?.length ? (h(), l("span", w, "▸")) : c("", !0)], 8, C)), e.items?.length && B.value === t ? (h(), l("div", T, [(h(!0), l(r, null, _(e.items, (e, t) => (h(), l(r, { key: `${e.label ?? "sep"}-${t}` }, [e.separator ? (h(), l("div", E)) : (h(), l("button", {
+			disabled: t.disabled,
+			"aria-haspopup": t.items?.length ? "menu" : void 0,
+			"aria-expanded": t.items?.length ? V.value === n : void 0,
+			onClick: (e) => t.items?.length ? K(n, t) : W(t)
+		}, [d("span", null, y(t.label), 1), t.items?.length ? (g(), u("span", T, [f(e, {
+			name: "chevron-right",
+			size: "sm"
+		})])) : l("", !0)], 8, w)), t.items?.length && V.value === n ? (g(), u("div", E, [(g(!0), u(i, null, v(t.items, (e, t) => (g(), u(i, { key: `${e.label ?? "sep"}-${t}` }, [e.separator ? (g(), u("div", D)) : (g(), u("button", {
 			key: 1,
 			type: "button",
 			class: "wi-tieredmenu__item",
 			role: "menuitem",
 			disabled: e.disabled,
-			onClick: (t) => W(e)
-		}, v(e.label), 9, D))], 64))), 128))])) : c("", !0)], 40, x))), 128))], 512));
+			onClick: (t) => G(e)
+		}, y(e.label), 9, O))], 64))), 128))])) : l("", !0)], 40, S))), 128))], 512));
 	}
 });
 //#endregion
-export { F as WiTieredMenu };
+export { I as WiTieredMenu };

package/dist/tiered-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,86 +749,132 @@
     line-height: 1;
 }
 
-/* —— Menu: TieredMenu —— */
-.wi-tieredmenu {
-    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-lg);
-    padding: var(--wi-space-1);
-    position: relative;
+.wi-icon {
+    display: inline-flex;
+    height: 1rem;
+    width: 1rem;
 }
 
-.wi-tieredmenu--popup {
-    box-shadow: var(--wi-shadow-md);
-    position: absolute;
-    z-index: var(--wi-z-popper);
+.wi-icon svg {
+    height: 100%;
+    width: 100%;
 }
 
-.wi-tieredmenu--teleported {
-    position: fixed;
-    z-index: var(--wi-z-dropdown);
+.wi-icon--sm,
+.wi-icon--small {
+    height: 0.875rem;
+    width: 0.875rem;
 }
 
-.wi-tieredmenu__row {
-    position: relative;
+.wi-icon--md,
+.wi-icon--normal {
+    height: 1rem;
+    width: 1rem;
 }
 
-.wi-tieredmenu__item {
-    align-items: center;
-    background: transparent;
-    border: 0;
-    border-radius: var(--wi-radius-sm);
-    color: var(--wi-color-text);
-    cursor: pointer;
-    display: flex;
-    font: inherit;
-    justify-content: space-between;
-    padding: var(--wi-space-2) var(--wi-space-3);
-    text-align: start;
-    width: 100%;
+.wi-icon--lg,
+.wi-icon--large {
+    height: 1.25rem;
+    width: 1.25rem;
 }
 
-.wi-tieredmenu__item:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--wi-color-primary) 10%, var(--wi-color-surface));
+.wi-icon--spin svg {
+    animation: wi-icon-spin 0.8s linear infinite;
 }
 
-.wi-tieredmenu__item:disabled {
-    cursor: not-allowed;
-    opacity: var(--wi-opacity-disabled);
+@keyframes wi-icon-spin {
+    to {
+        transform: rotate(360deg);
+    }
 }
 
-.wi-tieredmenu__item:focus-visible {
-    box-shadow: var(--wi-focus-shadow);
-    outline: none;
+/* —— Menu: TieredMenu —— */
+.wi-tieredmenu {
+    --wi-tieredmenu-submenu-min-width: 10rem;
+    --wi-tieredmenu-min-width: 12rem;
+    --wi-tieredmenu-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-tieredmenu-item-gap);
+    min-width: var(--wi-tieredmenu-min-width);
+    padding: var(--wi-space-1);
+    position: relative;
 }
 
-.wi-tieredmenu__caret {
-    color: var(--wi-color-text-muted);
-    font-size: var(--wi-font-size-xs);
+.wi-tieredmenu--popup {
+    box-shadow: var(--wi-shadow-md);
+    position: absolute;
+    z-index: var(--wi-z-popper);
 }
 
-.wi-tieredmenu__submenu {
-    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;
-    flex-direction: column;
-    gap: 0.125rem;
-    left: calc(100% + 0.25rem);
-    min-width: var(--wi-menu-min-width);
-    padding: var(--wi-space-1);
-    position: absolute;
-    top: 0;
-    z-index: var(--wi-z-popper);
+.wi-tieredmenu--teleported {
+    position: fixed;
+    z-index: var(--wi-z-dropdown);
 }
 
-.wi-tieredmenu__separator {
-    background: var(--wi-color-border);
-    height: 1px;
-    margin: var(--wi-space-1) 0;
+.wi-tieredmenu__row {
+    position: relative;
+}
+
+.wi-tieredmenu__item {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--wi-radius-sm);
+    color: var(--wi-color-text);
+    cursor: pointer;
+    display: flex;
+    font: inherit;
+    justify-content: space-between;
+    padding: var(--wi-space-2) var(--wi-space-3);
+    text-align: start;
+    width: 100%;
+}
+
+.wi-tieredmenu__item:hover:not(:disabled) {
+    background: color-mix(
+        in srgb,
+        var(--wi-color-primary) 10%,
+        var(--wi-color-surface)
+    );
+}
+
+.wi-tieredmenu__item:disabled {
+    cursor: not-allowed;
+    opacity: var(--wi-opacity-disabled);
+}
+
+.wi-tieredmenu__item:focus-visible {
+    box-shadow: var(--wi-focus-shadow);
+    outline: none;
+}
+
+.wi-tieredmenu__caret {
+    color: var(--wi-color-text-muted);
+    font-size: var(--wi-font-size-xs);
+}
+
+.wi-tieredmenu__submenu {
+    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;
+    flex-direction: column;
+    gap: var(--wi-tieredmenu-item-gap);
+    left: calc(100% + 0.25rem);
+    min-width: var(--wi-tieredmenu-submenu-min-width);
+    padding: var(--wi-space-1);
+    position: absolute;
+    top: 0;
+    z-index: var(--wi-z-popper);
+}
+
+.wi-tieredmenu__separator {
+    background: var(--wi-color-border);
+    height: 1px;
+    margin: var(--wi-space-1) 0;
 }

package/dist/tiered-menu/style.js

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

package/dist/timeline/index.js

@@ -1,5 +1,5 @@
 import { t as e } from "../types-tV3SEv3Q.js";
-import { a as t, t as n } from "../Icon-B6gOD07E.js";
+import { a as t, t as n } from "../Icon-DHGs8l-M.js";
 import "./style.js";
 import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, openBlock as p, renderList as m, renderSlot as h, toDisplayString as g } from "vue";
 //#region src/components/Timeline/Timeline.vue?vue&type=script&setup=true&lang.ts