@well-insight/ui 0.1.9 → 0.1.11

package/dist/pick-list/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/popover/index.js

@@ -1,10 +1,10 @@
 import { n as e, t } from "../overlay-oR-5MDuE.js";
-import { c as n } from "../config-DWwce9jA.js";
+import { t as n } from "../overlayPlacement-CN1tuC95.js";
+import { c as r } from "../config-CTLkobga.js";
 import "./style.js";
-import { Teleport as r, Transition as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, nextTick as f, normalizeClass as p, normalizeStyle as m, onBeforeUnmount as h, openBlock as g, ref as _, renderSlot as v, watch as y, withCtx as b } from "vue";
-//#endregion
-//#region src/components/Popover/Popover.vue
-var x = /* @__PURE__ */ d({
+import { 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, nextTick as p, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as g, openBlock as _, ref as v, renderSlot as y, unref as b, useId as x, watch as S, withCtx as C } from "vue";
+//#region src/components/Popover/Popover.vue?vue&type=script&setup=true&lang.ts
+var w = ["aria-expanded", "aria-controls"], T = ["id"], E = /* @__PURE__ */ f({
 	__name: "Popover",
 	props: {
 		modelValue: {
@@ -26,140 +26,119 @@ var x = /* @__PURE__ */ d({
 		"show",
 		"hide"
 	],
-	setup(d, { emit: x }) {
-		let S = d, C = x, w = n(), T = _(null), E = _(null), D = _(null), O = _({}), k = a(() => e(S, w.value.appendTo)), A = a(() => t(S, w.value.appendTo)), j, M;
-		function N(e) {
-			C("update:modelValue", e);
+	setup(f, { emit: E }) {
+		let D = f, O = E, k = r(), A = x(), j = v(null), M = v(null), N = v(null), P = v({}), F = o(() => e(D, k.value.appendTo)), I = o(() => t(D, k.value.appendTo)), L, R;
+		function z(e) {
+			O("update:modelValue", e);
 		}
-		function P() {
-			N(!1);
+		function B() {
+			z(!1);
 		}
-		function F() {
-			j && clearTimeout(j), M && clearTimeout(M), j = void 0, M = void 0;
+		function V() {
+			L && clearTimeout(L), R && clearTimeout(R), L = void 0, R = void 0;
 		}
-		function I() {
-			S.trigger === "click" && N(!S.modelValue);
+		function H() {
+			D.trigger === "click" && z(!D.modelValue);
 		}
-		function L() {
-			if (S.trigger === "hover") {
-				if (F(), S.showDelay > 0) {
-					j = setTimeout(() => N(!0), S.showDelay);
+		function U() {
+			if (D.trigger === "hover") {
+				if (V(), D.showDelay > 0) {
+					L = setTimeout(z, D.showDelay, !0);
 					return;
 				}
-				N(!0);
+				z(!0);
 			}
 		}
-		function R() {
-			if (S.trigger === "hover") {
-				if (F(), S.hideDelay > 0) {
-					M = setTimeout(() => N(!1), S.hideDelay);
+		function W() {
+			if (D.trigger === "hover") {
+				if (V(), D.hideDelay > 0) {
+					R = setTimeout(z, D.hideDelay, !1);
 					return;
 				}
-				N(!1);
+				z(!1);
 			}
 		}
-		function z() {
-			S.trigger === "hover" && F();
+		function G() {
+			D.trigger === "hover" && V();
 		}
-		function B() {
-			if (S.trigger === "hover") {
-				if (F(), S.hideDelay > 0) {
-					M = setTimeout(() => N(!1), S.hideDelay);
+		function K() {
+			if (D.trigger === "hover") {
+				if (V(), D.hideDelay > 0) {
+					R = setTimeout(z, D.hideDelay, !1);
 					return;
 				}
-				N(!1);
+				z(!1);
 			}
 		}
-		function V() {
-			if (S.trigger === "focus") {
-				if (F(), S.showDelay > 0) {
-					j = setTimeout(() => N(!0), S.showDelay);
+		function q() {
+			if (D.trigger === "focus") {
+				if (V(), D.showDelay > 0) {
+					L = setTimeout(z, D.showDelay, !0);
 					return;
 				}
-				N(!0);
+				z(!0);
 			}
 		}
-		function H() {
-			if (S.trigger === "focus") {
-				if (F(), S.hideDelay > 0) {
-					M = setTimeout(() => N(!1), S.hideDelay);
+		function J() {
+			if (D.trigger === "focus") {
+				if (V(), D.hideDelay > 0) {
+					R = setTimeout(z, D.hideDelay, !1);
 					return;
 				}
-				N(!1);
+				z(!1);
 			}
 		}
-		function U() {
-			if (!A.value || !E.value) return;
-			let e = E.value.getBoundingClientRect(), t = e.left + e.width / 2, n = e.top + e.height / 2;
-			S.placement === "top" ? O.value = {
-				left: `${t}px`,
-				top: `${e.top - 8}px`,
-				transform: "translate(-50%, -100%)"
-			} : S.placement === "bottom" ? O.value = {
-				left: `${t}px`,
-				top: `${e.bottom + 8}px`,
-				transform: "translateX(-50%)"
-			} : S.placement === "left" ? O.value = {
-				left: `${e.left - 8}px`,
-				top: `${n}px`,
-				transform: "translate(-100%, -50%)"
-			} : S.placement === "right" ? O.value = {
-				left: `${e.right + 8}px`,
-				top: `${n}px`,
-				transform: "translateY(-50%)"
-			} : S.placement === "bottom-end" ? O.value = {
-				left: `${e.right}px`,
-				top: `${e.bottom + 8}px`,
-				transform: "translateX(-100%)"
-			} : O.value = {
-				left: `${e.left}px`,
-				top: `${e.bottom + 8}px`
-			};
+		function Y() {
+			!I.value || !M.value || (P.value = n(M.value.getBoundingClientRect(), D.placement));
 		}
-		function W(e) {
+		function X(e) {
 			let t = e.target;
-			T.value?.contains(t) || D.value?.contains(t) || P();
+			j.value?.contains(t) || N.value?.contains(t) || B();
 		}
-		function G(e) {
-			e.key === "Escape" && P();
+		function Z(e) {
+			e.key === "Escape" && B();
 		}
-		function K() {
-			S.modelValue && U();
+		function Q() {
+			D.modelValue && Y();
 		}
-		return y(() => S.modelValue, async (e, t) => {
-			e ? (document.addEventListener("click", W), document.addEventListener("keydown", G), A.value && (window.addEventListener("resize", K), window.addEventListener("scroll", K, !0)), C("show"), await f(), U()) : (document.removeEventListener("click", W), document.removeEventListener("keydown", G), window.removeEventListener("resize", K), window.removeEventListener("scroll", K, !0), t && C("hide"));
-		}, { immediate: !0 }), h(() => {
-			F(), document.removeEventListener("click", W), document.removeEventListener("keydown", G), window.removeEventListener("resize", K), window.removeEventListener("scroll", K, !0);
-		}), (e, t) => (g(), c("span", {
+		return S(() => D.modelValue, async (e, t) => {
+			e ? (document.addEventListener("click", X), document.addEventListener("keydown", Z), I.value && (window.addEventListener("resize", Q), window.addEventListener("scroll", Q, !0)), O("show"), await p(), Y()) : (document.removeEventListener("click", X), document.removeEventListener("keydown", Z), window.removeEventListener("resize", Q), window.removeEventListener("scroll", Q, !0), t && O("hide"));
+		}, { immediate: !0 }), g(() => {
+			V(), document.removeEventListener("click", X), document.removeEventListener("keydown", Z), window.removeEventListener("resize", Q), window.removeEventListener("scroll", Q, !0);
+		}), (e, t) => (_(), l("span", {
 			ref_key: "root",
-			ref: T,
+			ref: j,
 			class: "wi-popover",
-			onMouseenter: L,
-			onMouseleave: R
-		}, [l("span", {
+			onMouseenter: U,
+			onMouseleave: W
+		}, [u("span", {
 			ref_key: "trigger",
-			ref: E,
+			ref: M,
 			class: "wi-popover__trigger",
-			onClick: I,
-			onFocusin: V,
-			onFocusout: H
-		}, [v(e.$slots, "default")], 544), (g(), o(r, {
-			to: k.value.to,
-			disabled: k.value.disabled
-		}, [u(i, { name: "wi-fade" }, {
-			default: b(() => [d.modelValue ? (g(), c("div", {
+			"aria-haspopup": "dialog",
+			"aria-expanded": f.modelValue,
+			"aria-controls": b(A),
+			onClick: H,
+			onFocusin: q,
+			onFocusout: J
+		}, [y(e.$slots, "default")], 40, w), (_(), s(i, {
+			to: F.value.to,
+			disabled: F.value.disabled
+		}, [d(a, { name: "wi-popover" }, {
+			default: C(() => [f.modelValue ? (_(), l("div", {
 				key: 0,
 				ref_key: "panel",
-				ref: D,
-				class: p(["wi-popover__content", [`wi-popover__content--${d.placement}`, { "wi-popover__content--teleported": A.value }]]),
-				style: m(A.value ? O.value : void 0),
+				ref: N,
+				id: b(A),
+				class: m(["wi-popover__content", [`wi-popover__content--${f.placement}`, { "wi-popover__content--teleported": I.value }]]),
+				style: h(I.value ? P.value : void 0),
 				role: "dialog",
-				onMouseenter: z,
-				onMouseleave: B
-			}, [v(e.$slots, "content")], 38)) : s("", !0)]),
+				onMouseenter: G,
+				onMouseleave: K
+			}, [y(e.$slots, "content")], 46, T)) : c("", !0)]),
 			_: 3
 		})], 8, ["to", "disabled"]))], 544));
 	}
 });
 //#endregion
-export { x as WiPopover };
+export { E as WiPopover };

package/dist/popover/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,67 +749,109 @@
     line-height: 1;
 }
 
-.wi-popover {
-    display: inline-flex;
-    position: relative;
+.wi-popover {
+    --wi-popover-min-width: 12rem;
+    display: inline-flex;
+    position: relative;
 }
 
-.wi-popover__trigger {
-    display: inline-flex;
+.wi-popover__trigger {
+    display: inline-flex;
 }
 
-.wi-popover__content {
-    background: var(--wi-color-surface);
-    border: 1px solid var(--wi-color-border);
-    border-radius: var(--wi-radius-md);
-    box-shadow: var(--wi-shadow-md);
-    color: var(--wi-color-text);
-    min-width: var(--wi-menu-min-width-lg);
-    padding: var(--wi-space-3);
-    position: absolute;
-    z-index: var(--wi-z-popper);
+.wi-popover__content {
+    background: var(--wi-color-surface);
+    border: 1px solid var(--wi-color-border);
+    border-radius: var(--wi-radius-md);
+    box-shadow: var(--wi-shadow-md);
+    color: var(--wi-color-text);
+    min-width: var(--wi-popover-min-width);
+    padding: var(--wi-space-3);
+    position: absolute;
+    z-index: var(--wi-z-popper);
+}
+
+.wi-popover__content--top {
+    bottom: calc(100% + var(--wi-space-2));
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.wi-popover__content--bottom {
+    left: 50%;
+    top: calc(100% + var(--wi-space-2));
+    transform: translateX(-50%);
+}
+
+.wi-popover__content--left {
+    right: calc(100% + var(--wi-space-2));
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.wi-popover__content--right {
+    left: calc(100% + var(--wi-space-2));
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.wi-popover__content--bottom-start {
+    left: 0;
+    top: calc(100% + var(--wi-space-2));
+}
+
+.wi-popover__content--bottom-end {
+    right: 0;
+    top: calc(100% + var(--wi-space-2));
+}
+
+.wi-popover__content--teleported {
+    bottom: auto;
+    left: auto;
+    position: fixed;
+    right: auto;
+    top: auto;
+    transform: none;
+    z-index: var(--wi-z-toast);
 }
 
-.wi-popover__content--top {
-    bottom: calc(100% + var(--wi-space-2));
-    left: 50%;
-    transform: translateX(-50%);
+.wi-popover-enter-active,
+.wi-popover-leave-active {
+    transition:
+        opacity var(--wi-motion-normal) var(--wi-motion-ease),
+        transform var(--wi-motion-normal) var(--wi-motion-ease);
 }
 
-.wi-popover__content--bottom {
-    left: 50%;
-    top: calc(100% + var(--wi-space-2));
-    transform: translateX(-50%);
+.wi-popover-enter-from,
+.wi-popover-leave-to {
+    opacity: 0;
 }
 
-.wi-popover__content--left {
-    right: calc(100% + var(--wi-space-2));
-    top: 50%;
-    transform: translateY(-50%);
+.wi-popover-enter-from:not(.wi-popover__content--teleported),
+.wi-popover-leave-to:not(.wi-popover__content--teleported) {
+    transform: translateY(calc(var(--wi-motion-distance) * -1));
 }
 
-.wi-popover__content--right {
-    left: calc(100% + var(--wi-space-2));
-    top: 50%;
-    transform: translateY(-50%);
+.wi-popover__content--top.wi-popover-enter-from,
+.wi-popover__content--top.wi-popover-leave-to {
+    transform: translate(-50%, calc(-100% - var(--wi-motion-distance)));
 }
 
-.wi-popover__content--bottom-start {
-    left: 0;
-    top: calc(100% + var(--wi-space-2));
+.wi-popover__content--bottom.wi-popover-enter-from,
+.wi-popover__content--bottom.wi-popover-leave-to,
+.wi-popover__content--bottom-start.wi-popover-enter-from,
+.wi-popover__content--bottom-start.wi-popover-leave-to,
+.wi-popover__content--bottom-end.wi-popover-enter-from,
+.wi-popover__content--bottom-end.wi-popover-leave-to {
+    transform: translateY(var(--wi-motion-distance));
 }
 
-.wi-popover__content--bottom-end {
-    right: 0;
-    top: calc(100% + var(--wi-space-2));
+.wi-popover__content--left.wi-popover-enter-from,
+.wi-popover__content--left.wi-popover-leave-to {
+    transform: translate(calc(-100% - var(--wi-motion-distance)), -50%);
 }
 
-.wi-popover__content--teleported {
-    bottom: auto;
-    left: auto;
-    position: fixed;
-    right: auto;
-    top: auto;
-    transform: none;
-    z-index: var(--wi-z-toast);
+.wi-popover__content--right.wi-popover-enter-from,
+.wi-popover__content--right.wi-popover-leave-to {
+    transform: translate(var(--wi-motion-distance), -50%);
 }