wimui 0.62.2 → 0.63.1

package/dist/components/data-display/SwipeAction/SwipeAction.js

@@ -1,112 +1,113 @@
 "use client";
 import { Root as e } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
-import { Icon as t } from "../../media/Icon/Icon.js";
-import n from "./swipe-action.module.js";
-import { useSwipeableList as r } from "./SwipeableList.js";
-import i, { useEffect as a, useId as o, useImperativeHandle as s, useRef as c, useState as l } from "react";
-import u from "classnames";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { composeEventHandlers as t } from "../../_internal/composeEventHandlers.js";
+import { Icon as n } from "../../media/Icon/Icon.js";
+import r from "./swipe-action.module.js";
+import { useSwipeableList as i } from "./SwipeableList.js";
+import a, { useEffect as o, useId as s, useImperativeHandle as c, useRef as l, useState as u } from "react";
+import d from "classnames";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/data-display/SwipeAction/SwipeAction.tsx
-var p = i.forwardRef(({ as: i = "div", leftActions: p = [], rightActions: m = [], children: h, asChild: g = !1, id: _, closeOnAction: v = !0, fullSwipe: y, className: b, ...x }, S) => {
-	let C = o(), w = _ || C, T = r(), [E, D] = l(0), [O, k] = l(!1), A = c(0), j = c(0), M = c(null);
-	s(S, () => ({ close: () => {
-		D(0), T?.reportClose(w);
+var m = a.forwardRef(({ as: a = "div", leftActions: m = [], rightActions: h = [], children: g, asChild: _ = !1, id: v, closeOnAction: y = !0, fullSwipe: b, className: x, ...S }, C) => {
+	let w = s(), T = v || w, E = i(), [D, O] = u(0), [k, A] = u(!1), j = l(0), M = l(0), N = l(null);
+	c(C, () => ({ close: () => {
+		O(0), E?.reportClose(T);
 	} }));
-	let N = c(!1);
-	a(() => {
-		if (O) {
-			N.current = !0;
+	let P = l(!1);
+	o(() => {
+		if (k) {
+			P.current = !0;
 			return;
 		}
-		if (N.current) {
+		if (P.current) {
 			let e = setTimeout(() => {
-				N.current = !1;
+				P.current = !1;
 			}, 100);
 			return () => clearTimeout(e);
 		}
-		T?.openedId && T.openedId !== w && D(0);
+		E?.openedId && E.openedId !== T && O(0);
 	}, [
-		T?.openedId,
-		w,
-		O
+		E?.openedId,
+		T,
+		k
 	]);
-	let P = p.length * 80, F = m.length * 80, I = P > 0 && (y === "left" || y === "both"), L = F > 0 && (y === "right" || y === "both"), R = M.current?.offsetWidth ?? 0, z = (e) => Math.max(e + 40, R / 2), B = O && I && E >= z(P) ? "left" : O && L && -E >= z(F) ? "right" : null, V = (e) => {
-		A.current = "touches" in e ? e.touches[0].clientX : e.clientX, j.current = E, k(!0);
-	}, H = (e) => {
-		if (!O) return;
-		let t = ("touches" in e ? e.touches[0].clientX : e.clientX) - A.current, n = j.current + t;
-		Math.abs(t) > 5 && T?.openedId !== w && T?.reportOpen(w), n > P && !I && (n = P + (n - P) * .3), n < -F && !L && (n = -F + (n + F) * .3), D(n);
-	}, U = (e = !0) => {
-		if (O) {
-			if (k(!1), B) {
-				let t = B === "left" ? p[0] : m[m.length - 1];
+	let F = m.length * 80, I = h.length * 80, L = F > 0 && (b === "left" || b === "both"), R = I > 0 && (b === "right" || b === "both"), z = N.current?.offsetWidth ?? 0, B = (e) => Math.max(e + 40, z / 2), V = k && L && D >= B(F) ? "left" : k && R && -D >= B(I) ? "right" : null, H = (e) => {
+		j.current = "touches" in e ? e.touches[0].clientX : e.clientX, M.current = D, A(!0);
+	}, U = (e) => {
+		if (!k) return;
+		let t = ("touches" in e ? e.touches[0].clientX : e.clientX) - j.current, n = M.current + t;
+		Math.abs(t) > 5 && E?.openedId !== T && E?.reportOpen(T), n > F && !L && (n = F + (n - F) * .3), n < -I && !R && (n = -I + (n + I) * .3), O(n);
+	}, W = (e = !0) => {
+		if (k) {
+			if (A(!1), V) {
+				let t = V === "left" ? m[0] : h[h.length - 1];
 				if (e) {
-					Y(t), v || (D(B === "left" ? P : -F), T?.reportOpen(w));
+					X(t), y || (O(V === "left" ? F : -I), E?.reportOpen(T));
 					return;
 				}
 			}
-			E > P / 2 ? (D(P), T?.reportOpen(w)) : E < -F / 2 ? (D(-F), T?.reportOpen(w)) : (D(0), T?.reportClose(w));
+			D > F / 2 ? (O(F), E?.reportOpen(T)) : D < -I / 2 ? (O(-I), E?.reportOpen(T)) : (O(0), E?.reportClose(T));
 		}
-	}, W = g ? e : "div", G = c(null), K = P > 0 || F > 0, q = (e) => {
-		let t = e === "left" ? P : -F;
-		E !== t && D(t), T?.reportOpen(w);
-	}, J = (e) => {
+	}, G = _ ? e : "div", K = l(null), q = F > 0 || I > 0, J = (e) => {
+		let t = e === "left" ? F : -I;
+		D !== t && O(t), E?.reportOpen(T);
+	}, Y = (e) => {
 		let t = e.relatedTarget;
-		t && M.current?.contains(t) || E !== 0 && !O && (D(0), T?.reportClose(w));
-	}, Y = (e, t) => {
-		e.onClick(), v && (D(0), T?.reportClose(w), t && document.activeElement === t && G.current?.focus());
-	}, X = (e, r, i) => {
-		let a = e === "left" ? I : L, o = e === "left" ? Math.max(0, E) : Math.max(0, -E), s = e === "left" ? 0 : r.length - 1;
-		return /* @__PURE__ */ d("div", {
-			className: u(n.actions, n[e], a && o > i && n.stretched, B === e && n.armed),
+		t && N.current?.contains(t) || D !== 0 && !k && (O(0), E?.reportClose(T));
+	}, X = (e, t) => {
+		e.onClick(), y && (O(0), E?.reportClose(T), t && document.activeElement === t && K.current?.focus());
+	}, Z = (e, t, i) => {
+		let a = e === "left" ? L : R, o = e === "left" ? Math.max(0, D) : Math.max(0, -D), s = e === "left" ? 0 : t.length - 1;
+		return /* @__PURE__ */ f("div", {
+			className: d(r.actions, r[e], a && o > i && r.stretched, V === e && r.armed),
 			style: {
 				width: a ? Math.max(i, o) : i,
 				"--_action-w": "80px"
 			},
-			children: r.map((r, i) => /* @__PURE__ */ f("button", {
-				className: u(n.action, r.intent && n[r.intent], a && i === s && n.outer),
-				style: { backgroundColor: r.color },
-				onFocus: () => q(e),
-				onClick: (e) => Y(r, e.currentTarget),
+			children: t.map((t, i) => /* @__PURE__ */ p("button", {
+				className: d(r.action, t.intent && r[t.intent], a && i === s && r.outer),
+				style: { backgroundColor: t.color },
+				onFocus: () => J(e),
+				onClick: (e) => X(t, e.currentTarget),
 				type: "button",
-				children: [/* @__PURE__ */ d(t, {
-					name: r.icon,
+				children: [/* @__PURE__ */ f(n, {
+					name: t.icon,
 					size: "md"
-				}), /* @__PURE__ */ d("span", {
-					className: n.label,
-					children: r.label
+				}), /* @__PURE__ */ f("span", {
+					className: r.label,
+					children: t.label
 				})]
 			}, i))
 		});
 	};
-	return /* @__PURE__ */ f(i, {
-		ref: M,
-		className: u("wim-swipe-action", n.container, b),
-		onMouseLeave: () => U(!1),
-		onBlur: J,
-		...x,
+	return /* @__PURE__ */ p(a, {
+		ref: N,
+		className: d("wim-swipe-action", r.container, x),
+		...S,
+		onMouseLeave: t(S.onMouseLeave, () => W(!1)),
+		onBlur: t(S.onBlur, Y),
 		children: [
-			/* @__PURE__ */ d(W, {
-				ref: G,
-				className: n.content,
-				tabIndex: K ? -1 : void 0,
+			/* @__PURE__ */ f(G, {
+				ref: K,
+				className: r.content,
+				tabIndex: q ? -1 : void 0,
 				style: {
-					transform: `translateX(${E}px)`,
-					transition: O ? "none" : "transform 0.4s cubic-bezier(0.16, 1, 0.3, 1)"
+					transform: `translateX(${D}px)`,
+					transition: k ? "none" : "transform 0.4s cubic-bezier(0.16, 1, 0.3, 1)"
 				},
-				onTouchStart: V,
-				onTouchMove: H,
-				onTouchEnd: () => U(),
-				onMouseDown: V,
-				onMouseMove: H,
-				onMouseUp: () => U(),
-				children: h
+				onTouchStart: H,
+				onTouchMove: U,
+				onTouchEnd: () => W(),
+				onMouseDown: H,
+				onMouseMove: U,
+				onMouseUp: () => W(),
+				children: g
 			}),
-			P > 0 && X("left", p, P),
-			F > 0 && X("right", m, F)
+			F > 0 && Z("left", m, F),
+			I > 0 && Z("right", h, I)
 		]
 	});
 });
-p.displayName = "SwipeAction";
+m.displayName = "SwipeAction";
 //#endregion
-export { p as SwipeAction };
+export { m as SwipeAction };

package/dist/components/feedback/Tour/Tour.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../../overlay/Portal/Portal.cjs"),i=require("../../overlay/FocusTrap/FocusTrap.cjs"),a=require("../../form/Button/Button.cjs"),o=require("./tour.module.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("classnames");c=e.__toESM(c,1);let l=require("react/jsx-runtime");var u=16;function d(e){let t=getComputedStyle(e);return`${t.fontWeight} ${t.fontSize} ${t.fontFamily}`}async function f(e){let t=document.fonts;if(t&&typeof t.load==`function`){try{await t.load(d(e))}catch{}for(;t.status===`loading`;)await new Promise(e=>{t.addEventListener(`loadingdone`,()=>e(),{once:!0})})}}function p(e){let t=document.fonts;return!t||typeof t.load!=`function`?!1:t.status===`loading`||typeof t.check==`function`&&!t.check(d(e))}function m(e,t){return Math.round(e.top)===Math.round(t.top)&&Math.round(e.left)===Math.round(t.left)&&Math.round(e.width)===Math.round(t.width)&&Math.round(e.height)===Math.round(t.height)}function h(e){return e.top>=u&&e.bottom<=window.innerHeight-u&&e.left>=u&&e.right<=window.innerWidth-u}var g=({steps:e,open:u,onClose:d,onFinish:g})=>{let{t:_}=t.useWimTranslation(n.commonNs),[v,y]=(0,s.useState)(0),[b,x]=(0,s.useState)(null),S=e[v],C=S?.target;(0,s.useLayoutEffect)(()=>{if(!u||!C){x(null);return}let e=!1,t=t=>{e||x(e=>t?e&&m(e,t)?e:t:null)},n=()=>{let e=document.querySelector(C);if(!e){t(null);return}h(e.getBoundingClientRect())||e.scrollIntoView({block:`center`,inline:`nearest`}),t(e.getBoundingClientRect())},r=()=>{let e=document.querySelector(C);t(e?e.getBoundingClientRect():null)},i=()=>{window.addEventListener(`resize`,r),window.addEventListener(`scroll`,r,!0)},a=async()=>{let t=document.querySelector(C);t&&await f(t),!e&&(n(),i())},o=document.querySelector(C);return o&&p(o)?a():(n(),i()),()=>{e=!0,window.removeEventListener(`resize`,r),window.removeEventListener(`scroll`,r,!0)}},[u,v,C]);let w=(0,s.useId)(),T=(0,s.useRef)(null),E=(0,s.useRef)(null),D=u&&!!S&&!!b;if((0,s.useEffect)(()=>{if(!D)return;let e=T.current;e&&!e.contains(document.activeElement)&&E.current?.focus()},[D,v]),(0,s.useEffect)(()=>{if(!u)return;let e=e=>{e.key===`Escape`&&(e.preventDefault(),d())};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[u,d]),!u||!S)return null;let O=()=>{v<e.length-1?y(v+1):(g?g():d(),y(0))},k=()=>{v>0&&y(v-1)},A={},j=S.placement||`bottom`;if(b){let e=window.innerWidth,t=Math.min(300,e-32),n=j;if(e<640&&(n===`left`||n===`right`)&&(n=`bottom`),j=n,n===`top`||n===`bottom`){let r=b.left+b.width/2,i=t/2+16,a=e-t/2-16;r=i>a?e/2:Math.max(i,Math.min(a,r)),A.left=r,n===`top`?(A.top=b.top-12,A.transform=`translate(-50%, -100%)`):(A.top=b.bottom+12,A.transform=`translateX(-50%)`)}else n===`left`?(A.left=b.left-12,A.top=b.top+b.height/2,A.transform=`translate(-100%, -50%)`):n===`right`&&(A.left=b.right+12,A.top=b.top+b.height/2,A.transform=`translateY(-50%)`)}return(0,l.jsx)(r.Portal,{children:(0,l.jsx)(i.FocusTrap,{initialFocus:!1,children:(0,l.jsxs)(`div`,{role:`dialog`,"aria-modal":`true`,"aria-label":S.title,"aria-describedby":b?w:void 0,children:[b&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(`div`,{className:o.default.highlight,style:{top:b.top-4,left:b.left-4,width:b.width+8,height:b.height+8}}),(0,l.jsx)(`div`,{ref:T,className:(0,c.default)(`wim-tour`,o.default.bubble),"data-placement":j,style:A,children:(0,l.jsxs)(`div`,{className:o.default.inner,children:[(0,l.jsx)(`h3`,{className:o.default.title,children:S.title}),(0,l.jsx)(`p`,{id:w,className:o.default.description,children:S.description}),(0,l.jsxs)(`div`,{className:o.default.footer,children:[(0,l.jsxs)(`span`,{className:o.default.progress,children:[v+1,` / `,e.length]}),(0,l.jsxs)(`div`,{className:o.default.buttons,children:[v>0&&(0,l.jsx)(a.Button,{size:`sm`,variant:`outline`,onClick:k,children:_(`action.back`)}),(0,l.jsx)(a.Button,{ref:E,size:`sm`,variant:`solid`,onClick:O,children:v===e.length-1?_(`action.finish`):_(`action.next`)})]})]})]})})]}),(0,l.jsx)(`div`,{className:o.default.mask,onClick:d,role:`button`,tabIndex:0,"aria-label":_(`a11y.close_tour`),onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&d()}})]})})})};exports.Tour=g;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../../overlay/Portal/Portal.cjs"),i=require("../../overlay/FocusTrap/FocusTrap.cjs"),a=require("../../form/Button/Button.cjs"),o=require("./tour.module.cjs"),s=require("../../_internal/observeMove.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("classnames");l=e.__toESM(l,1);let u=require("react/jsx-runtime");var d=16;function f(e){let t=getComputedStyle(e);return`${t.fontWeight} ${t.fontSize} ${t.fontFamily}`}async function p(e){let t=document.fonts;if(t&&typeof t.load==`function`){try{await t.load(f(e))}catch{}for(;t.status===`loading`;)await new Promise(e=>{t.addEventListener(`loadingdone`,()=>e(),{once:!0})})}}function m(e){let t=document.fonts;return!t||typeof t.load!=`function`?!1:t.status===`loading`||typeof t.check==`function`&&!t.check(f(e))}function h(e,t){return Math.round(e.top)===Math.round(t.top)&&Math.round(e.left)===Math.round(t.left)&&Math.round(e.width)===Math.round(t.width)&&Math.round(e.height)===Math.round(t.height)}function g(e){return e.top>=d&&e.bottom<=window.innerHeight-d&&e.left>=d&&e.right<=window.innerWidth-d}var _=({steps:e,open:d,onClose:f,onFinish:_})=>{let{t:v}=t.useWimTranslation(n.commonNs),[y,b]=(0,c.useState)(0),[x,S]=(0,c.useState)(null),C=e[y],w=C?.target;(0,c.useLayoutEffect)(()=>{if(!d||!w){S(null);return}let e=!1,t=t=>{e||S(e=>t?e&&h(e,t)?e:t:null)},n=()=>{let e=document.querySelector(w);if(!e){t(null);return}g(e.getBoundingClientRect())||e.scrollIntoView({block:`center`,inline:`nearest`}),t(e.getBoundingClientRect())},r=()=>{let e=document.querySelector(w);t(e?e.getBoundingClientRect():null)},i,a=()=>{window.addEventListener(`resize`,r),window.addEventListener(`scroll`,r,!0);let e=document.querySelector(w);e&&(i=s.observeMove(e,r))},o=async()=>{let t=document.querySelector(w);t&&await p(t),!e&&(n(),a())},c=document.querySelector(w);return c&&m(c)?o():(n(),a()),()=>{e=!0,window.removeEventListener(`resize`,r),window.removeEventListener(`scroll`,r,!0),i?.()}},[d,y,w]);let T=(0,c.useId)(),E=(0,c.useRef)(null),D=(0,c.useRef)(null),O=d&&!!C&&!!x;if((0,c.useEffect)(()=>{if(!O)return;let e=E.current;e&&!e.contains(document.activeElement)&&D.current?.focus()},[O,y]),(0,c.useEffect)(()=>{if(!d)return;let e=e=>{e.key===`Escape`&&(e.preventDefault(),f())};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[d,f]),!d||!C)return null;let k=()=>{y<e.length-1?b(y+1):(_?_():f(),b(0))},A=()=>{y>0&&b(y-1)},j={},M=C.placement||`bottom`;if(x){let e=window.innerWidth,t=Math.min(300,e-32),n=M;if(e<640&&(n===`left`||n===`right`)&&(n=`bottom`),M=n,n===`top`||n===`bottom`){let r=x.left+x.width/2,i=t/2+16,a=e-t/2-16;r=i>a?e/2:Math.max(i,Math.min(a,r)),j.left=r,n===`top`?(j.top=x.top-12,j.transform=`translate(-50%, -100%)`):(j.top=x.bottom+12,j.transform=`translateX(-50%)`)}else n===`left`?(j.left=x.left-12,j.top=x.top+x.height/2,j.transform=`translate(-100%, -50%)`):n===`right`&&(j.left=x.right+12,j.top=x.top+x.height/2,j.transform=`translateY(-50%)`)}return(0,u.jsx)(r.Portal,{children:(0,u.jsx)(i.FocusTrap,{initialFocus:!1,children:(0,u.jsxs)(`div`,{role:`dialog`,"aria-modal":`true`,"aria-label":C.title,"aria-describedby":x?T:void 0,children:[x&&(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(`div`,{className:o.default.highlight,style:{top:x.top-4,left:x.left-4,width:x.width+8,height:x.height+8}}),(0,u.jsx)(`div`,{ref:E,className:(0,l.default)(`wim-tour`,o.default.bubble),"data-placement":M,style:j,children:(0,u.jsxs)(`div`,{className:o.default.inner,children:[(0,u.jsx)(`h3`,{className:o.default.title,children:C.title}),(0,u.jsx)(`p`,{id:T,className:o.default.description,children:C.description}),(0,u.jsxs)(`div`,{className:o.default.footer,children:[(0,u.jsxs)(`span`,{className:o.default.progress,children:[y+1,` / `,e.length]}),(0,u.jsxs)(`div`,{className:o.default.buttons,children:[y>0&&(0,u.jsx)(a.Button,{size:`sm`,variant:`outline`,onClick:A,children:v(`action.back`)}),(0,u.jsx)(a.Button,{ref:D,size:`sm`,variant:`solid`,onClick:k,children:y===e.length-1?v(`action.finish`):v(`action.next`)})]})]})]})})]}),(0,u.jsx)(`div`,{className:o.default.mask,onClick:f,role:`button`,tabIndex:0,"aria-label":v(`a11y.close_tour`),onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&f()}})]})})})};exports.Tour=_;

package/dist/components/feedback/Tour/Tour.js

@@ -5,167 +5,170 @@ import { Portal as n } from "../../overlay/Portal/Portal.js";
 import { FocusTrap as r } from "../../overlay/FocusTrap/FocusTrap.js";
 import { Button as i } from "../../form/Button/Button.js";
 import a from "./tour.module.js";
-import { useEffect as o, useId as s, useLayoutEffect as c, useRef as l, useState as u } from "react";
-import d from "classnames";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { observeMove as o } from "../../_internal/observeMove.js";
+import { useEffect as s, useId as c, useLayoutEffect as l, useRef as u, useState as d } from "react";
+import f from "classnames";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/feedback/Tour/Tour.tsx
-var h = 16;
-function g(e) {
+var g = 16;
+function _(e) {
 	let t = getComputedStyle(e);
 	return `${t.fontWeight} ${t.fontSize} ${t.fontFamily}`;
 }
-async function _(e) {
+async function v(e) {
 	let t = document.fonts;
 	if (t && typeof t.load == "function") {
 		try {
-			await t.load(g(e));
+			await t.load(_(e));
 		} catch {}
 		for (; t.status === "loading";) await new Promise((e) => {
 			t.addEventListener("loadingdone", () => e(), { once: !0 });
 		});
 	}
 }
-function v(e) {
+function y(e) {
 	let t = document.fonts;
-	return !t || typeof t.load != "function" ? !1 : t.status === "loading" || typeof t.check == "function" && !t.check(g(e));
+	return !t || typeof t.load != "function" ? !1 : t.status === "loading" || typeof t.check == "function" && !t.check(_(e));
 }
-function y(e, t) {
+function b(e, t) {
 	return Math.round(e.top) === Math.round(t.top) && Math.round(e.left) === Math.round(t.left) && Math.round(e.width) === Math.round(t.width) && Math.round(e.height) === Math.round(t.height);
 }
-function b(e) {
-	return e.top >= h && e.bottom <= window.innerHeight - h && e.left >= h && e.right <= window.innerWidth - h;
+function x(e) {
+	return e.top >= g && e.bottom <= window.innerHeight - g && e.left >= g && e.right <= window.innerWidth - g;
 }
-var x = ({ steps: h, open: g, onClose: x, onFinish: S }) => {
-	let { t: C } = e(t), [w, T] = u(0), [E, D] = u(null), O = h[w], k = O?.target;
-	c(() => {
-		if (!g || !k) {
-			D(null);
+var S = ({ steps: g, open: _, onClose: S, onFinish: C }) => {
+	let { t: w } = e(t), [T, E] = d(0), [D, O] = d(null), k = g[T], A = k?.target;
+	l(() => {
+		if (!_ || !A) {
+			O(null);
 			return;
 		}
 		let e = !1, t = (t) => {
-			e || D((e) => t ? e && y(e, t) ? e : t : null);
+			e || O((e) => t ? e && b(e, t) ? e : t : null);
 		}, n = () => {
-			let e = document.querySelector(k);
+			let e = document.querySelector(A);
 			if (!e) {
 				t(null);
 				return;
 			}
-			b(e.getBoundingClientRect()) || e.scrollIntoView({
+			x(e.getBoundingClientRect()) || e.scrollIntoView({
 				block: "center",
 				inline: "nearest"
 			}), t(e.getBoundingClientRect());
 		}, r = () => {
-			let e = document.querySelector(k);
+			let e = document.querySelector(A);
 			t(e ? e.getBoundingClientRect() : null);
-		}, i = () => {
+		}, i, a = () => {
 			window.addEventListener("resize", r), window.addEventListener("scroll", r, !0);
-		}, a = async () => {
-			let t = document.querySelector(k);
-			t && await _(t), !e && (n(), i());
-		}, o = document.querySelector(k);
-		return o && v(o) ? a() : (n(), i()), () => {
-			e = !0, window.removeEventListener("resize", r), window.removeEventListener("scroll", r, !0);
+			let e = document.querySelector(A);
+			e && (i = o(e, r));
+		}, s = async () => {
+			let t = document.querySelector(A);
+			t && await v(t), !e && (n(), a());
+		}, c = document.querySelector(A);
+		return c && y(c) ? s() : (n(), a()), () => {
+			e = !0, window.removeEventListener("resize", r), window.removeEventListener("scroll", r, !0), i?.();
 		};
 	}, [
-		g,
-		w,
-		k
+		_,
+		T,
+		A
 	]);
-	let A = s(), j = l(null), M = l(null), N = g && !!O && !!E;
-	if (o(() => {
-		if (!N) return;
-		let e = j.current;
-		e && !e.contains(document.activeElement) && M.current?.focus();
-	}, [N, w]), o(() => {
-		if (!g) return;
+	let j = c(), M = u(null), N = u(null), P = _ && !!k && !!D;
+	if (s(() => {
+		if (!P) return;
+		let e = M.current;
+		e && !e.contains(document.activeElement) && N.current?.focus();
+	}, [P, T]), s(() => {
+		if (!_) return;
 		let e = (e) => {
-			e.key === "Escape" && (e.preventDefault(), x());
+			e.key === "Escape" && (e.preventDefault(), S());
 		};
 		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-	}, [g, x]), !g || !O) return null;
-	let P = () => {
-		w < h.length - 1 ? T(w + 1) : (S ? S() : x(), T(0));
-	}, F = () => {
-		w > 0 && T(w - 1);
-	}, I = {}, L = O.placement || "bottom";
-	if (E) {
-		let e = window.innerWidth, t = Math.min(300, e - 32), n = L;
-		if (e < 640 && (n === "left" || n === "right") && (n = "bottom"), L = n, n === "top" || n === "bottom") {
-			let r = E.left + E.width / 2, i = t / 2 + 16, a = e - t / 2 - 16;
-			r = i > a ? e / 2 : Math.max(i, Math.min(a, r)), I.left = r, n === "top" ? (I.top = E.top - 12, I.transform = "translate(-50%, -100%)") : (I.top = E.bottom + 12, I.transform = "translateX(-50%)");
-		} else n === "left" ? (I.left = E.left - 12, I.top = E.top + E.height / 2, I.transform = "translate(-100%, -50%)") : n === "right" && (I.left = E.right + 12, I.top = E.top + E.height / 2, I.transform = "translateY(-50%)");
+	}, [_, S]), !_ || !k) return null;
+	let F = () => {
+		T < g.length - 1 ? E(T + 1) : (C ? C() : S(), E(0));
+	}, I = () => {
+		T > 0 && E(T - 1);
+	}, L = {}, R = k.placement || "bottom";
+	if (D) {
+		let e = window.innerWidth, t = Math.min(300, e - 32), n = R;
+		if (e < 640 && (n === "left" || n === "right") && (n = "bottom"), R = n, n === "top" || n === "bottom") {
+			let r = D.left + D.width / 2, i = t / 2 + 16, a = e - t / 2 - 16;
+			r = i > a ? e / 2 : Math.max(i, Math.min(a, r)), L.left = r, n === "top" ? (L.top = D.top - 12, L.transform = "translate(-50%, -100%)") : (L.top = D.bottom + 12, L.transform = "translateX(-50%)");
+		} else n === "left" ? (L.left = D.left - 12, L.top = D.top + D.height / 2, L.transform = "translate(-100%, -50%)") : n === "right" && (L.left = D.right + 12, L.top = D.top + D.height / 2, L.transform = "translateY(-50%)");
 	}
-	return /* @__PURE__ */ p(n, { children: /* @__PURE__ */ p(r, {
+	return /* @__PURE__ */ m(n, { children: /* @__PURE__ */ m(r, {
 		initialFocus: !1,
-		children: /* @__PURE__ */ m("div", {
+		children: /* @__PURE__ */ h("div", {
 			role: "dialog",
 			"aria-modal": "true",
-			"aria-label": O.title,
-			"aria-describedby": E ? A : void 0,
-			children: [E && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("div", {
+			"aria-label": k.title,
+			"aria-describedby": D ? j : void 0,
+			children: [D && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("div", {
 				className: a.highlight,
 				style: {
-					top: E.top - 4,
-					left: E.left - 4,
-					width: E.width + 8,
-					height: E.height + 8
+					top: D.top - 4,
+					left: D.left - 4,
+					width: D.width + 8,
+					height: D.height + 8
 				}
-			}), /* @__PURE__ */ p("div", {
-				ref: j,
-				className: d("wim-tour", a.bubble),
-				"data-placement": L,
-				style: I,
-				children: /* @__PURE__ */ m("div", {
+			}), /* @__PURE__ */ m("div", {
+				ref: M,
+				className: f("wim-tour", a.bubble),
+				"data-placement": R,
+				style: L,
+				children: /* @__PURE__ */ h("div", {
 					className: a.inner,
 					children: [
-						/* @__PURE__ */ p("h3", {
+						/* @__PURE__ */ m("h3", {
 							className: a.title,
-							children: O.title
+							children: k.title
 						}),
-						/* @__PURE__ */ p("p", {
-							id: A,
+						/* @__PURE__ */ m("p", {
+							id: j,
 							className: a.description,
-							children: O.description
+							children: k.description
 						}),
-						/* @__PURE__ */ m("div", {
+						/* @__PURE__ */ h("div", {
 							className: a.footer,
-							children: [/* @__PURE__ */ m("span", {
+							children: [/* @__PURE__ */ h("span", {
 								className: a.progress,
 								children: [
-									w + 1,
+									T + 1,
 									" / ",
-									h.length
+									g.length
 								]
-							}), /* @__PURE__ */ m("div", {
+							}), /* @__PURE__ */ h("div", {
 								className: a.buttons,
-								children: [w > 0 && /* @__PURE__ */ p(i, {
+								children: [T > 0 && /* @__PURE__ */ m(i, {
 									size: "sm",
 									variant: "outline",
-									onClick: F,
-									children: C("action.back")
-								}), /* @__PURE__ */ p(i, {
-									ref: M,
+									onClick: I,
+									children: w("action.back")
+								}), /* @__PURE__ */ m(i, {
+									ref: N,
 									size: "sm",
 									variant: "solid",
-									onClick: P,
-									children: w === h.length - 1 ? C("action.finish") : C("action.next")
+									onClick: F,
+									children: T === g.length - 1 ? w("action.finish") : w("action.next")
 								})]
 							})]
 						})
 					]
 				})
-			})] }), /* @__PURE__ */ p("div", {
+			})] }), /* @__PURE__ */ m("div", {
 				className: a.mask,
-				onClick: x,
+				onClick: S,
 				role: "button",
 				tabIndex: 0,
-				"aria-label": C("a11y.close_tour"),
+				"aria-label": w("a11y.close_tour"),
 				onKeyDown: (e) => {
-					(e.key === "Enter" || e.key === " ") && x();
+					(e.key === "Enter" || e.key === " ") && S();
 				}
 			})]
 		})
 	}) });
 };
 //#endregion
-export { x as Tour };
+export { S as Tour };

package/dist/components/form/Button/Button.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../utilities/style-utils.cjs"),r=require("../../../i18n/useWimTranslation.cjs"),i=require("../../../i18n/generated/common.cjs"),a=require("../../../hooks/useMergedRef.cjs"),o=require("../../../icon/loading.cjs"),s=require("../../media/Icon/Icon.cjs"),c=require("./button.module.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("classnames");u=e.__toESM(u,1);let d=require("react/jsx-runtime");var f=l.default.forwardRef(({asChild:e=!1,size:f=`md`,variant:p=`outline`,intent:m=`default`,icon:h,iconPosition:g=`left`,loading:_=!1,backgroundColor:v,justify:y=`center`,animateWidth:b=!1,fullWidth:x=!1,styles:S,"aria-label":C,className:w,disabled:T,children:E,...D},O)=>{let k=l.default.useRef(null),A=a.useMergedRef(k,O),[j,M]=l.default.useState(`auto`),N=l.default.useRef(!0);l.default.useLayoutEffect(()=>{if(!b||!k.current)return;if(N.current){N.current=!1;return}let e=k.current,t=e.getBoundingClientRect().width;M(t);let n=e.style.width,r=e.style.minWidth;e.style.width=`auto`,e.style.minWidth=`0`;let i=Math.ceil(e.getBoundingClientRect().width)+2;e.style.width=n,e.style.minWidth=r;let a=requestAnimationFrame(()=>{M(i)});return()=>cancelAnimationFrame(a)},[E,b]);let{t:P}=r.useWimTranslation(i.commonNs),F=T,I;typeof C==`string`?I=C:C!==!1&&(!E&&typeof h==`string`?I=h:_&&(I=P(`a11y.loading`)));let L=y===`start`?`flex-start`:y===`end`?`flex-end`:y===`between`?`space-between`:y,R=_?(0,d.jsx)(`span`,{className:(0,u.default)(c.default.loader,S?.loader),children:(0,d.jsx)(s.Icon,{component:o.default,spin:!0,size:f})}):h?typeof h==`string`?(0,d.jsx)(s.Icon,{name:h,size:f,className:S?.icon}):h:null;return(0,d.jsxs)(e?t.Root:`button`,{ref:A,type:e?void 0:`button`,style:{...D.style,justifyContent:L,...v?{backgroundColor:n.getColorValue(v)}:{},...b&&j!==`auto`?{width:`${j}px`,transitionProperty:D.style?.transitionProperty||`width, background-color, border-color, box-shadow, transform`,transitionDuration:D.style?.transitionDuration||`var(--wim-duration-base)`,transitionTimingFunction:D.style?.transitionTimingFunction||`var(--wim-easing-standard)`,overflow:`hidden`,whiteSpace:`nowrap`,textOverflow:`clip`}:{}},className:(0,u.default)(`wim-button`,c.default.root,c.default[f],c.default[p],c.default[m],_&&c.default.loading,b&&c.default.animatedWidth,x&&c.default.fullWidth,!E&&!!h&&c.default.iconOnly,w,S?.root),disabled:(F||_)&&!e?!0:void 0,"aria-label":I,"aria-busy":_||void 0,...e?D:{...D},children:[e&&R&&g===`left`?R:null,e?(0,d.jsx)(t.Slottable,{children:E}):(0,d.jsxs)(`span`,{className:c.default.content,children:[R&&g===`left`&&R,E,R&&g===`right`&&R]}),e&&R&&g===`right`?R:null]})});f.displayName=`Button`,exports.Button=f;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../utilities/style-utils.cjs"),r=require("../../../i18n/useWimTranslation.cjs"),i=require("../../../i18n/generated/common.cjs"),a=require("../../../hooks/useMergedRef.cjs"),o=require("../../../icon/loading.cjs"),s=require("../../media/Icon/Icon.cjs"),c=require("./button.module.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("classnames");u=e.__toESM(u,1);let d=require("react/jsx-runtime");var f=l.default.forwardRef(({asChild:e=!1,size:f=`md`,variant:p=`outline`,intent:m=`default`,icon:h,iconPosition:g=`left`,loading:_=!1,backgroundColor:v,justify:y=`center`,animateWidth:b=!1,fullWidth:x=!1,styles:S,"aria-label":C,className:w,disabled:T,children:E,...D},O)=>{let k=l.default.useRef(null),A=a.useMergedRef(k,O),[j,M]=l.default.useState(`auto`),N=l.default.useRef(!0);l.default.useLayoutEffect(()=>{if(!b||!k.current)return;if(N.current){N.current=!1;return}let e=k.current,t=e.getBoundingClientRect().width;M(t);let n=e.style.width,r=e.style.minWidth;e.style.width=`auto`,e.style.minWidth=`0`;let i=Math.ceil(e.getBoundingClientRect().width)+2;e.style.width=n,e.style.minWidth=r;let a=requestAnimationFrame(()=>{M(i)});return()=>cancelAnimationFrame(a)},[E,b]);let{t:P}=r.useWimTranslation(i.commonNs),F=T,I;typeof C==`string`?I=C:C!==!1&&_&&(E||typeof h!=`string`)&&(I=P(`a11y.loading`));let L=!e&&!E&&!!h&&typeof C!=`string`&&!D[`aria-labelledby`]&&!D.title;l.default.useEffect(()=>{},[L]);let R=y===`start`?`flex-start`:y===`end`?`flex-end`:y===`between`?`space-between`:y,z=_?(0,d.jsx)(`span`,{className:(0,u.default)(c.default.loader,S?.loader),children:(0,d.jsx)(s.Icon,{component:o.default,spin:!0,size:f})}):h?typeof h==`string`?(0,d.jsx)(s.Icon,{name:h,size:f,className:S?.icon}):h:null;return(0,d.jsxs)(e?t.Root:`button`,{ref:A,type:e?void 0:`button`,className:(0,u.default)(`wim-button`,c.default.root,c.default[f],c.default[p],c.default[m],_&&c.default.loading,b&&c.default.animatedWidth,x&&c.default.fullWidth,!E&&!!h&&c.default.iconOnly,w,S?.root),disabled:(F||_)&&!e?!0:void 0,"aria-label":I,"aria-busy":_||void 0,...e?D:{...D},style:{...D.style,justifyContent:R,...v?{backgroundColor:n.getColorValue(v)}:{},...b&&j!==`auto`?{width:`${j}px`,transitionProperty:D.style?.transitionProperty||`width, background-color, border-color, box-shadow, transform`,transitionDuration:D.style?.transitionDuration||`var(--wim-duration-base)`,transitionTimingFunction:D.style?.transitionTimingFunction||`var(--wim-easing-standard)`,overflow:`hidden`,whiteSpace:`nowrap`,textOverflow:`clip`}:{}},children:[e&&z&&g===`left`?z:null,e?(0,d.jsx)(t.Slottable,{children:E}):(0,d.jsxs)(`span`,{className:c.default.content,children:[z&&g===`left`&&z,E,z&&g===`right`&&z]}),e&&z&&g===`right`?z:null]})});f.displayName=`Button`,exports.Button=f;

package/dist/components/form/Button/Button.d.ts

@@ -15,7 +15,7 @@ export type ButtonProps = React.ComponentPropsWithoutRef<"button"> & {
     variant?: ButtonVariant;
     /** Design intent of the button (visual / semantic state). Unrelated to the ARIA role attribute. */
     intent?: ButtonIntent;
-    /** Icon name or custom icon element */
+    /** Icon name or custom icon element. An icon-only button (no children) needs `aria-label` or `aria-labelledby`: the icon name is not used as the accessible name. */
     icon?: React.ComponentProps<typeof Icon>["name"] | React.ReactNode;
     /** Position of the icon relative to the label */
     iconPosition?: "left" | "right";
@@ -48,7 +48,7 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<React.Detailed
     variant?: ButtonVariant;
     /** Design intent of the button (visual / semantic state). Unrelated to the ARIA role attribute. */
     intent?: ButtonIntent;
-    /** Icon name or custom icon element */
+    /** Icon name or custom icon element. An icon-only button (no children) needs `aria-label` or `aria-labelledby`: the icon name is not used as the accessible name. */
     icon?: React.ComponentProps<typeof Icon>["name"] | React.ReactNode;
     /** Position of the icon relative to the label */
     iconPosition?: "left" | "right";

package/dist/components/form/Button/Button.js

@@ -31,8 +31,10 @@ var p = l.forwardRef(({ asChild: p = !1, size: m = "md", variant: h = "outline",
 		return () => cancelAnimationFrame(a);
 	}, [O, S]);
 	let { t: I } = r(i), L = D, R;
-	typeof T == "string" ? R = T : T !== !1 && (!O && typeof _ == "string" ? R = _ : y && (R = I("a11y.loading")));
-	let z = x === "start" ? "flex-start" : x === "end" ? "flex-end" : x === "between" ? "space-between" : x, B = y ? /* @__PURE__ */ d("span", {
+	typeof T == "string" ? R = T : T !== !1 && y && (O || typeof _ != "string") && (R = I("a11y.loading"));
+	let z = !p && !O && !!_ && typeof T != "string" && !k["aria-labelledby"] && !k.title;
+	l.useEffect(() => {}, [z]);
+	let B = x === "start" ? "flex-start" : x === "end" ? "flex-end" : x === "between" ? "space-between" : x, V = y ? /* @__PURE__ */ d("span", {
 		className: u(c.loader, w?.loader),
 		children: /* @__PURE__ */ d(s, {
 			component: o,
@@ -47,9 +49,14 @@ var p = l.forwardRef(({ asChild: p = !1, size: m = "md", variant: h = "outline",
 	return /* @__PURE__ */ f(p ? e : "button", {
 		ref: M,
 		type: p ? void 0 : "button",
+		className: u("wim-button", c.root, c[m], c[h], c[g], y && c.loading, S && c.animatedWidth, C && c.fullWidth, !O && !!_ && c.iconOnly, E, w?.root),
+		disabled: (L || y) && !p ? !0 : void 0,
+		"aria-label": R,
+		"aria-busy": y || void 0,
+		...p ? k : { ...k },
 		style: {
 			...k.style,
-			justifyContent: z,
+			justifyContent: B,
 			...b ? { backgroundColor: n(b) } : {},
 			...S && N !== "auto" ? {
 				width: `${N}px`,
@@ -61,22 +68,17 @@ var p = l.forwardRef(({ asChild: p = !1, size: m = "md", variant: h = "outline",
 				textOverflow: "clip"
 			} : {}
 		},
-		className: u("wim-button", c.root, c[m], c[h], c[g], y && c.loading, S && c.animatedWidth, C && c.fullWidth, !O && !!_ && c.iconOnly, E, w?.root),
-		disabled: (L || y) && !p ? !0 : void 0,
-		"aria-label": R,
-		"aria-busy": y || void 0,
-		...p ? k : { ...k },
 		children: [
-			p && B && v === "left" ? B : null,
+			p && V && v === "left" ? V : null,
 			p ? /* @__PURE__ */ d(t, { children: O }) : /* @__PURE__ */ f("span", {
 				className: c.content,
 				children: [
-					B && v === "left" && B,
+					V && v === "left" && V,
 					O,
-					B && v === "right" && B
+					V && v === "right" && V
 				]
 			}),
-			p && B && v === "right" ? B : null
+			p && V && v === "right" ? V : null
 		]
 	});
 });