@well-insight/ui 0.1.9 → 0.1.11

package/dist/scrollbar/index.js

@@ -1,3 +1,383 @@
-import { t as e } from "../Scrollbar-D-bR2noX.js";
 import "./style.js";
-export { e as WiScrollbar };
+import { Fragment as e, Transition as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, inject as ee, nextTick as l, normalizeClass as u, normalizeStyle as d, onActivated as f, onBeforeUnmount as te, onMounted as ne, onUpdated as p, openBlock as m, provide as h, reactive as g, ref as _, renderSlot as v, resolveDynamicComponent as y, unref as b, vShow as x, watch as S, withCtx as C, withDirectives as w } from "vue";
+//#region src/components/Scrollbar/constants.ts
+var T = Symbol("wiScrollbar"), E = {
+	vertical: {
+		offset: "offsetHeight",
+		scroll: "scrollTop",
+		scrollSize: "scrollHeight",
+		size: "height",
+		key: "vertical",
+		axis: "Y",
+		client: "clientY",
+		direction: "top"
+	},
+	horizontal: {
+		offset: "offsetWidth",
+		scroll: "scrollLeft",
+		scrollSize: "scrollWidth",
+		size: "width",
+		key: "horizontal",
+		axis: "X",
+		client: "clientX",
+		direction: "left"
+	}
+};
+function D(e) {
+	if (e == null || e === "") return;
+	if (typeof e == "number") return `${e}px`;
+	let t = String(e).trim();
+	return /^\d+(\.\d+)?$/.test(t) ? `${t}px` : t;
+}
+function O({ move: e, size: t, bar: n }) {
+	return {
+		[n.size]: t,
+		transform: `translate${n.axis}(${e}%)`
+	};
+}
+function k(e) {
+	return typeof e == "number" && !Number.isNaN(e);
+}
+function A(e) {
+	return Object.prototype.toString.call(e) === "[object Object]";
+}
+//#endregion
+//#region src/components/Scrollbar/Thumb.vue?vue&type=script&setup=true&lang.ts
+var j = ["aria-orientation", "aria-controls"], M = /* @__PURE__ */ c({
+	__name: "Thumb",
+	props: {
+		vertical: { type: Boolean },
+		size: {},
+		move: {},
+		ratio: {},
+		always: { type: Boolean }
+	},
+	setup(e) {
+		let i = e, a = ee(T);
+		if (!a) throw Error("[WiScrollbar] Thumb must be used inside WiScrollbar");
+		let s = a, c = _(), l = _(), f = _(!1), p = _({}), h = !1, g = !0, v = 0, y = 0, D = null, k, A, M = n(() => i.vertical ? "vertical" : "horizontal"), N = n(() => E[M.value]), P = n(() => O({
+			size: i.size,
+			move: i.move,
+			bar: N.value
+		})), F = n(() => i.always || f.value), I = n(() => {
+			let e = c.value, t = l.value, n = s.wrapElement;
+			return !e || !t || !n ? 1 : e[N.value.offset] ** 2 / n[N.value.scrollSize] / i.ratio / t[N.value.offset];
+		});
+		function L() {
+			typeof document > "u" || document.onselectstart !== D && (document.onselectstart = D);
+		}
+		function R(e) {
+			let t = c.value, n = l.value, r = s.wrapElement;
+			if (!h || !t || !n || !r) return;
+			let i = p.value[N.value.axis];
+			if (!i) return;
+			let a = ((t.getBoundingClientRect()[N.value.direction] - e[N.value.client]) * -1 - (n[N.value.offset] - i)) * 100 * I.value / t[N.value.offset];
+			N.value.scroll === "scrollLeft" ? r.scrollLeft = a * y / 100 : r.scrollTop = a * v / 100;
+		}
+		function z() {
+			h = !1, p.value[N.value.axis] = 0, document.removeEventListener("mousemove", R), document.removeEventListener("mouseup", z), L(), g && (f.value = !1);
+		}
+		function B(e) {
+			let t = s.wrapElement;
+			t && (e.stopImmediatePropagation(), h = !0, v = t.scrollHeight, y = t.scrollWidth, document.addEventListener("mousemove", R), document.addEventListener("mouseup", z), D = document.onselectstart, document.onselectstart = () => !1);
+		}
+		function V(e) {
+			if (e.stopPropagation(), e.ctrlKey || [1, 2].includes(e.button)) return;
+			window.getSelection()?.removeAllRanges(), B(e);
+			let t = e.currentTarget;
+			t && (p.value[N.value.axis] = t[N.value.offset] - (e[N.value.client] - t.getBoundingClientRect()[N.value.direction]));
+		}
+		function H(e) {
+			let t = c.value, n = l.value, r = s.wrapElement;
+			if (!t || !n || !r) return;
+			let i = (Math.abs(e.target.getBoundingClientRect()[N.value.direction] - e[N.value.client]) - n[N.value.offset] / 2) * 100 * I.value / t[N.value.offset];
+			r[N.value.scroll] = i * r[N.value.scrollSize] / 100;
+		}
+		function U(e) {
+			let t = s.wrapElement;
+			if (!t || !i.size) return;
+			let n = (i.vertical ? {
+				ArrowDown: () => {
+					t.scrollTop += 40;
+				},
+				ArrowUp: () => {
+					t.scrollTop -= 40;
+				},
+				PageDown: () => {
+					t.scrollTop += t.clientHeight;
+				},
+				PageUp: () => {
+					t.scrollTop -= t.clientHeight;
+				},
+				Home: () => {
+					t.scrollTop = 0;
+				},
+				End: () => {
+					t.scrollTop = t.scrollHeight;
+				}
+			} : {
+				ArrowRight: () => {
+					t.scrollLeft += 40;
+				},
+				ArrowLeft: () => {
+					t.scrollLeft -= 40;
+				},
+				Home: () => {
+					t.scrollLeft = 0;
+				},
+				End: () => {
+					t.scrollLeft = t.scrollWidth;
+				}
+			})[e.key];
+			n && (e.preventDefault(), n());
+		}
+		function W() {
+			g = !1, f.value = !!i.size;
+		}
+		function G() {
+			g = !0, f.value = h;
+		}
+		function K() {
+			k?.(), A?.();
+			let e = s.scrollbarElement;
+			e && (e.addEventListener("mousemove", W), e.addEventListener("mouseleave", G), k = () => e.removeEventListener("mousemove", W), A = () => e.removeEventListener("mouseleave", G));
+		}
+		return ne(() => {
+			K();
+		}), S(() => s.scrollbarElement, () => {
+			K();
+		}), te(() => {
+			L(), document.removeEventListener("mousemove", R), document.removeEventListener("mouseup", z), k?.(), A?.();
+		}), (n, i) => (m(), r(t, { name: "wi-scrollbar-fade" }, {
+			default: C(() => [w(o("div", {
+				ref_key: "trackRef",
+				ref: c,
+				class: u(["wi-scrollbar__bar", e.vertical ? "wi-scrollbar__bar--vertical" : "wi-scrollbar__bar--horizontal"]),
+				role: "scrollbar",
+				"aria-orientation": e.vertical ? "vertical" : "horizontal",
+				"aria-controls": b(s).contentId,
+				tabindex: "0",
+				onMousedown: H,
+				onKeydown: U
+			}, [o("div", {
+				ref_key: "thumbRef",
+				ref: l,
+				class: "wi-scrollbar__thumb",
+				style: d(P.value),
+				onMousedown: V
+			}, null, 36)], 42, j), [[x, e.size && F.value]])]),
+			_: 1
+		}));
+	}
+}), N = ["tabindex"], P = /* @__PURE__ */ c({
+	name: "WiScrollbar",
+	__name: "Scrollbar",
+	props: {
+		height: { default: "" },
+		maxHeight: { default: "" },
+		native: { type: Boolean },
+		wrapStyle: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: ""
+		},
+		wrapClass: { default: "" },
+		viewStyle: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: ""
+		},
+		viewClass: { default: "" },
+		noresize: { type: Boolean },
+		tag: { default: "div" },
+		always: { type: Boolean },
+		trigger: { default: "hover" },
+		minSize: { default: 20 },
+		tabindex: { default: void 0 },
+		id: {},
+		role: {},
+		ariaLabel: {},
+		ariaOrientation: {},
+		distance: { default: 0 }
+	},
+	emits: ["scroll", "end-reached"],
+	setup(t, { expose: c, emit: ee }) {
+		let b = t, x = ee, w = _(), E = _(), O = _(), j = _(0), P = _(0), F = _(""), I = _(""), L = _(1), R = _(1), z = `wi-scrollbar-view-${Math.random().toString(36).slice(2, 9)}`, B = n(() => b.id ?? z), V = 0, H = 0, U = "", W = 0, G, K = {
+			bottom: !1,
+			top: !1,
+			right: !1,
+			left: !1
+		}, re = {
+			top: "bottom",
+			bottom: "top",
+			left: "right",
+			right: "left"
+		}, ie = n(() => {
+			let e = {}, t = D(b.height), n = D(b.maxHeight);
+			return t && (e.height = t), n && (e.maxHeight = n), [b.wrapStyle, e];
+		}), ae = n(() => [
+			"wi-scrollbar__wrap",
+			b.wrapClass,
+			{ "wi-scrollbar__wrap--hidden-default": !b.native }
+		]), oe = n(() => ["wi-scrollbar__view", b.viewClass]), q = n(() => !!(b.always || b.trigger === "none"));
+		h(T, g({
+			scrollbarElement: w,
+			wrapElement: E,
+			contentId: B
+		}));
+		function J(e) {
+			let t = e.offsetHeight - 4, n = e.offsetWidth - 4;
+			P.value = e.scrollTop * 100 / t * R.value, j.value = e.scrollLeft * 100 / n * L.value;
+		}
+		function se() {
+			let e = E.value;
+			if (!e) return;
+			let t = e.offsetHeight - 4, n = e.offsetWidth - 4, r = t ** 2 / e.scrollHeight, i = n ** 2 / e.scrollWidth, a = Math.max(r, b.minSize), o = Math.max(i, b.minSize);
+			R.value = r / (t - r) / (a / (t - a)) || 1, L.value = i / (n - i) / (o / (n - o)) || 1, I.value = a + 4 < t ? `${a}px` : "", F.value = o + 4 < n ? `${o}px` : "";
+		}
+		function Y(e, t) {
+			return e > t + 2 ** -52;
+		}
+		function ce(e) {
+			return K[e] ?? !1;
+		}
+		function le(e) {
+			let t = re[U];
+			t && (e[U] && !K[U] && (K[U] = !0), !e[t] && K[t] && (K[t] = !1));
+		}
+		function X() {
+			let e = E.value;
+			if (!e) return;
+			b.native || J(e);
+			let t = V, n = H;
+			V = e.scrollTop, H = e.scrollLeft;
+			let r = {
+				bottom: !Y(e.scrollHeight - b.distance, e.clientHeight + V),
+				top: V <= b.distance && t !== 0,
+				right: !Y(e.scrollWidth - b.distance, e.clientWidth + H) && n !== H,
+				left: H <= b.distance && n !== 0
+			};
+			if (x("scroll", {
+				scrollTop: V,
+				scrollLeft: H
+			}), t !== V && (U = V > t ? "bottom" : "top"), n !== H && (U = H > n ? "right" : "left"), b.distance > 0) {
+				if (ce(U)) return;
+				le(r);
+			}
+			r[U] && x("end-reached", U);
+		}
+		function Z() {
+			b.native || (se(), K[U] = !1, E.value && J(E.value));
+		}
+		function ue(e, t) {
+			let n = E.value;
+			n && (A(e) ? n.scrollTo(e) : k(e) && k(t) && n.scrollTo(e, t));
+		}
+		function de(e) {
+			!k(e) || !E.value || (E.value.scrollTop = e);
+		}
+		function fe(e) {
+			!k(e) || !E.value || (E.value.scrollLeft = e);
+		}
+		function Q() {
+			W ||= requestAnimationFrame(() => {
+				W = 0, Z();
+			});
+		}
+		function $() {
+			G?.disconnect(), G = void 0, window.removeEventListener("resize", Q);
+		}
+		function pe() {
+			$(), !(b.noresize || b.native || typeof ResizeObserver > "u") && (G = new ResizeObserver(() => Q()), O.value && G.observe(O.value), E.value && G.observe(E.value), window.addEventListener("resize", Q));
+		}
+		return S(() => b.noresize, () => {
+			b.noresize ? $() : pe();
+		}), S(() => [
+			b.maxHeight,
+			b.height,
+			b.native
+		], () => {
+			b.native || l(() => Z());
+		}), ne(() => {
+			l(() => {
+				Z(), pe();
+			});
+		}), p(() => {
+			b.native || Q();
+		}), f(() => {
+			E.value && (E.value.scrollTop = V, E.value.scrollLeft = H);
+		}), te(() => {
+			$(), W && cancelAnimationFrame(W);
+		}), c({
+			wrapRef: E,
+			update: Z,
+			scrollTo: ue,
+			setScrollTop: de,
+			setScrollLeft: fe,
+			handleScroll: X
+		}), (n, c) => (m(), a("div", {
+			ref_key: "scrollbarRef",
+			ref: w,
+			class: "wi-scrollbar"
+		}, [o("div", {
+			ref_key: "wrapRef",
+			ref: E,
+			class: u(ae.value),
+			style: d(ie.value),
+			tabindex: t.tabindex,
+			onScroll: X
+		}, [(m(), r(y(t.tag), {
+			id: B.value,
+			ref_key: "viewRef",
+			ref: O,
+			class: u(oe.value),
+			style: d(t.viewStyle),
+			role: t.role,
+			"aria-label": t.ariaLabel,
+			"aria-orientation": t.ariaOrientation
+		}, {
+			default: C(() => [v(n.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"id",
+			"class",
+			"style",
+			"role",
+			"aria-label",
+			"aria-orientation"
+		]))], 46, N), t.native ? i("", !0) : (m(), a(e, { key: 0 }, [s(M, {
+			move: j.value,
+			ratio: L.value,
+			size: F.value,
+			always: q.value
+		}, null, 8, [
+			"move",
+			"ratio",
+			"size",
+			"always"
+		]), s(M, {
+			vertical: "",
+			move: P.value,
+			ratio: R.value,
+			size: I.value,
+			always: q.value
+		}, null, 8, [
+			"move",
+			"ratio",
+			"size",
+			"always"
+		])], 64))], 512));
+	}
+});
+//#endregion
+export { P as WiScrollbar };

package/dist/scrollbar/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,93 +749,102 @@
     line-height: 1;
 }
 
-.wi-scrollbar {
-    --wi-scrollbar-bg: color-mix(in srgb, var(--wi-color-text) 28%, transparent);
-    --wi-scrollbar-hover-bg: color-mix(in srgb, var(--wi-color-text) 45%, transparent);
-    --wi-scrollbar-opacity: 0.5;
-    --wi-scrollbar-hover-opacity: 0.8;
-    height: 100%;
-    overflow: hidden;
-    position: relative;
+.wi-scrollbar {
+    --wi-scrollbar-track-size: 6px;
+    --wi-scrollbar-bg: color-mix(
+        in srgb,
+        var(--wi-color-text) 28%,
+        transparent
+    );
+    --wi-scrollbar-hover-bg: color-mix(
+        in srgb,
+        var(--wi-color-text) 45%,
+        transparent
+    );
+    --wi-scrollbar-opacity: 0.5;
+    --wi-scrollbar-hover-opacity: 0.8;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
 }
 
-.wi-scrollbar__wrap {
-    height: 100%;
-    overflow: auto;
+.wi-scrollbar__wrap {
+    height: 100%;
+    overflow: auto;
 }
 
-.wi-scrollbar__wrap--hidden-default {
-    scrollbar-width: none;
+.wi-scrollbar__wrap--hidden-default {
+    scrollbar-width: none;
 }
 
-.wi-scrollbar__wrap--hidden-default::-webkit-scrollbar {
-    display: none;
+.wi-scrollbar__wrap--hidden-default::-webkit-scrollbar {
+    display: none;
 }
 
-.wi-scrollbar__view {
-    box-sizing: border-box;
+.wi-scrollbar__view {
+    box-sizing: border-box;
 }
 
-.wi-scrollbar__bar {
-    border-radius: var(--wi-radius-sm);
-    bottom: 2px;
-    position: absolute;
-    right: 2px;
-    z-index: 1;
+.wi-scrollbar__bar {
+    border-radius: var(--wi-radius-sm);
+    bottom: 2px;
+    position: absolute;
+    right: 2px;
+    z-index: 1;
 }
 
-.wi-scrollbar__bar--vertical {
-    top: 2px;
-    width: 6px;
+.wi-scrollbar__bar--vertical {
+    top: 2px;
+    width: var(--wi-scrollbar-track-size);
 }
 
-.wi-scrollbar__bar--vertical > .wi-scrollbar__thumb {
-    width: 100%;
+.wi-scrollbar__bar--vertical > .wi-scrollbar__thumb {
+    width: 100%;
 }
 
-.wi-scrollbar__bar--horizontal {
-    height: 6px;
-    left: 2px;
+.wi-scrollbar__bar--horizontal {
+    height: var(--wi-scrollbar-track-size);
+    left: 2px;
 }
 
-.wi-scrollbar__bar--horizontal > .wi-scrollbar__thumb {
-    height: 100%;
+.wi-scrollbar__bar--horizontal > .wi-scrollbar__thumb {
+    height: 100%;
 }
 
-.wi-scrollbar__bar:focus-visible {
-    box-shadow: var(--wi-focus-shadow);
-    outline: none;
-    outline-offset: 1px;
+.wi-scrollbar__bar:focus-visible {
+    box-shadow: var(--wi-focus-shadow);
+    outline: none;
+    outline-offset: 1px;
 }
 
-.wi-scrollbar__thumb {
-    background-color: var(--wi-scrollbar-bg);
-    border-radius: inherit;
-    cursor: pointer;
-    display: block;
-    height: 0;
-    opacity: var(--wi-scrollbar-opacity);
-    position: relative;
-    transition:
-        background-color var(--wi-motion-fast) var(--wi-motion-ease),
-        opacity var(--wi-motion-fast) var(--wi-motion-ease);
-    width: 0;
+.wi-scrollbar__thumb {
+    background-color: var(--wi-scrollbar-bg);
+    border-radius: inherit;
+    cursor: pointer;
+    display: block;
+    height: 0;
+    opacity: var(--wi-scrollbar-opacity);
+    position: relative;
+    transition:
+        background-color var(--wi-motion-fast) var(--wi-motion-ease),
+        opacity var(--wi-motion-fast) var(--wi-motion-ease);
+    width: 0;
 }
 
-.wi-scrollbar__thumb:hover {
-    background-color: var(--wi-scrollbar-hover-bg);
-    opacity: var(--wi-scrollbar-hover-opacity);
+.wi-scrollbar__thumb:hover {
+    background-color: var(--wi-scrollbar-hover-bg);
+    opacity: var(--wi-scrollbar-hover-opacity);
 }
 
-.wi-scrollbar-fade-enter-active {
-    transition: opacity 340ms var(--wi-motion-ease);
+.wi-scrollbar-fade-enter-active {
+    transition: opacity 340ms var(--wi-motion-ease);
 }
 
-.wi-scrollbar-fade-leave-active {
-    transition: opacity 120ms var(--wi-motion-ease);
+.wi-scrollbar-fade-leave-active {
+    transition: opacity 120ms var(--wi-motion-ease);
 }
 
-.wi-scrollbar-fade-enter-from,
-.wi-scrollbar-fade-leave-to {
-    opacity: 0;
+.wi-scrollbar-fade-enter-from,
+.wi-scrollbar-fade-leave-to {
+    opacity: 0;
 }