wimui 0.58.1 → 0.60.0

package/dist/components/form/ThemeToggle/ThemeToggle.js

@@ -8,77 +8,82 @@ import o from "../../../icon/sun.js";
 import { Icon as s } from "../../media/Icon/Icon.js";
 import { setWimTheme as c } from "../../../theme.js";
 import l from "./theme-toggle.module.js";
-import u, { useCallback as d, useEffect as f, useState as p } from "react";
-import m from "classnames";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import u, { useCallback as d, useEffect as f, useId as p, useState as m } from "react";
+import h from "classnames";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/components/form/ThemeToggle/ThemeToggle.tsx
-var _ = {
+var v = {
 	light: o,
 	dark: a,
 	system: i
-}, v = "wim-theme", y = (e) => e === "light" || e === "dark" || e === "system", b = u.forwardRef(({ value: i, defaultValue: a = "system", onChange: o, modes: u = ["light", "dark"], variant: b = "icon", size: x = "md", storageKey: S = v, applyToDocument: C = !0, labels: w, className: T, asChild: E = !1, children: D, ...O }, k) => {
-	let { t: A } = n(r), { light: j = A("common.light"), dark: M = A("common.dark"), system: N = A("theme.system"), toggle: P = A("theme.toggle") } = w ?? {}, F = {
-		light: j,
-		dark: M,
-		system: N
-	}, I = i !== void 0, [L, R] = p(() => {
-		if (typeof window < "u" && S) {
-			let e = window.localStorage.getItem(S);
-			if (y(e) && u.includes(e)) return e;
+}, y = "wim-theme", b = (e) => e === "light" || e === "dark" || e === "system", x = u.forwardRef(({ value: i, defaultValue: a = "system", onChange: o, modes: u = ["light", "dark"], variant: x = "icon", size: S = "md", storageKey: C = y, applyToDocument: w = !0, labels: T, className: E, asChild: D = !1, children: O, "aria-label": k, "aria-labelledby": A, "aria-describedby": j, ...M }, N) => {
+	let { t: P } = n(r), { light: F = P("common.light"), dark: I = P("common.dark"), system: L = P("theme.system"), toggle: R = P("theme.toggle") } = T ?? {}, z = {
+		light: F,
+		dark: I,
+		system: L
+	}, B = i !== void 0, [V, H] = m(() => {
+		if (typeof window < "u" && C) {
+			let e = window.localStorage.getItem(C);
+			if (b(e) && u.includes(e)) return e;
 		}
 		return u.includes(a) ? a : u[0];
-	}), z = I ? i : L;
+	}), U = B ? i : V;
 	f(() => {
-		C && c(z);
-	}, [z, C]);
-	let B = d((e) => {
-		I || R(e), typeof window < "u" && S && window.localStorage.setItem(S, e), o?.(e);
+		w && c(U);
+	}, [U, w]);
+	let W = d((e) => {
+		B || H(e), typeof window < "u" && C && window.localStorage.setItem(C, e), o?.(e);
 	}, [
-		I,
-		S,
+		B,
+		C,
 		o
-	]), V = () => {
-		let e = u[(u.indexOf(z) + 1) % u.length];
-		B(e);
-	}, H = E ? e : "div";
-	return b === "segmented" ? /* @__PURE__ */ g(H, {
-		ref: k,
+	]), G = () => {
+		let e = u[(u.indexOf(U) + 1) % u.length];
+		W(e);
+	}, K = p(), q = D ? e : "div", J = `wim-theme-toggle-${K}`;
+	return x === "segmented" ? /* @__PURE__ */ _(q, {
+		ref: N,
 		role: "group",
-		"aria-label": P,
-		className: m("wim-theme-toggle", l.segmented, l[x], T),
-		...O,
+		"aria-label": A ? void 0 : k ?? R,
+		"aria-labelledby": A,
+		"aria-describedby": j,
+		className: h("wim-theme-toggle", l.segmented, l[S], E),
+		...M,
 		children: [u.map((e) => {
-			let t = e === z;
-			return /* @__PURE__ */ h("button", {
+			let t = e === U;
+			return /* @__PURE__ */ g("button", {
 				type: "button",
-				className: m(l.segment, t && l.active),
+				className: h(l.segment, t && l.active),
 				"aria-pressed": t,
-				"aria-label": F[e],
-				title: F[e],
-				onClick: () => B(e),
-				children: /* @__PURE__ */ h(s, {
-					component: _[e],
-					size: x
+				"aria-label": z[e],
+				title: z[e],
+				onClick: () => W(e),
+				children: /* @__PURE__ */ g(s, {
+					component: v[e],
+					size: S
 				})
 			}, e);
-		}), /* @__PURE__ */ h(t, { children: D })]
-	}) : /* @__PURE__ */ g(H, {
-		ref: k,
-		className: m("wim-theme-toggle", l.root, T),
-		...O,
-		children: [/* @__PURE__ */ h("button", {
+		}), /* @__PURE__ */ g(t, { children: O })]
+	}) : /* @__PURE__ */ _(q, {
+		ref: N,
+		className: h("wim-theme-toggle", l.root, E),
+		...M,
+		children: [/* @__PURE__ */ g("button", {
 			type: "button",
-			className: m(l.iconButton, l[x]),
-			"aria-label": `${P} (${F[z]})`,
-			title: F[z],
-			onClick: V,
-			children: /* @__PURE__ */ h(s, {
-				component: _[z],
-				size: x
+			className: h(l.iconButton, l[S]),
+			id: J,
+			"aria-label": A ? z[U] : `${k ?? R} (${z[U]})`,
+			"aria-labelledby": A ? `${A} ${J}` : void 0,
+			"aria-describedby": j,
+			title: z[U],
+			onClick: G,
+			children: /* @__PURE__ */ g(s, {
+				component: v[U],
+				size: S
 			})
-		}), /* @__PURE__ */ h(t, { children: D })]
+		}), /* @__PURE__ */ g(t, { children: O })]
 	});
 });
-b.displayName = "ThemeToggle";
+x.displayName = "ThemeToggle";
 //#endregion
-export { b as ThemeToggle };
+export { x as ThemeToggle };

package/dist/components/media/ImageCompare/ImageCompare.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("../../../icon/chevron-left.cjs"),i=require("../../../icon/chevron-right.cjs"),a=require("../Icon/Icon.cjs"),o=require("./image-compare.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=e=>Math.max(0,Math.min(100,e)),d=s.default.forwardRef(({before:e,after:d,beforeAlt:f=``,afterAlt:p=``,beforeLabel:m,afterLabel:h,defaultPosition:g=50,position:_,onPositionChange:v,orientation:y=`horizontal`,width:b,height:x,radius:S=`md`,labels:C,className:w,...T},E)=>{let{t:D}=t.useWimTranslation(n.commonNs),{handleAriaLabel:O=D(`imageCompare.handle`)}=C??{},k=_!==void 0,[A,j]=(0,s.useState)(u(g)),M=u(k?_:A),N=y===`vertical`,P=(0,s.useRef)(null),F=(0,s.useRef)(!1),I=(0,s.useCallback)(e=>{P.current=e,typeof E==`function`?E(e):E&&(E.current=e)},[E]),L=(0,s.useCallback)(e=>{let t=u(e);k||j(t),v?.(t)},[k,v]),R=(0,s.useCallback)((e,t)=>{let n=P.current?.getBoundingClientRect();if(!n)return;let r=N?(t-n.top)/n.height*100:(e-n.left)/n.width*100;L(r)},[N,L]),z=e=>{F.current=!0,e.currentTarget.setPointerCapture(e.pointerId),R(e.clientX,e.clientY)},B=e=>{F.current&&R(e.clientX,e.clientY)},V=e=>{F.current=!1,e.currentTarget.releasePointerCapture?.(e.pointerId)},H=e=>{let t=e.shiftKey?10:2,n=N?`ArrowUp`:`ArrowLeft`,r=N?`ArrowDown`:`ArrowRight`;e.key===n?(e.preventDefault(),L(M-t)):e.key===r?(e.preventDefault(),L(M+t)):e.key===`Home`?(e.preventDefault(),L(0)):e.key===`End`&&(e.preventDefault(),L(100))},U=N?{clipPath:`inset(0 0 ${100-M}% 0)`}:{clipPath:`inset(0 ${100-M}% 0 0)`},W=N?{top:`${M}%`}:{left:`${M}%`};return(0,l.jsxs)(`div`,{ref:I,className:(0,c.default)(`wim-image-compare`,o.default.root,N&&o.default.vertical,o.default[`radius-${S}`],w),style:{width:b,height:x},onPointerDown:z,onPointerMove:B,onPointerUp:V,...T,children:[(0,l.jsx)(`img`,{className:o.default.image,src:d,alt:p,draggable:!1}),h&&(0,l.jsx)(`span`,{className:(0,c.default)(o.default.label,o.default.afterLabel),children:h}),(0,l.jsxs)(`div`,{className:o.default.beforeLayer,style:U,children:[(0,l.jsx)(`img`,{className:o.default.image,src:e,alt:f,draggable:!1}),m&&(0,l.jsx)(`span`,{className:(0,c.default)(o.default.label,o.default.beforeLabel),children:m})]}),(0,l.jsxs)(`div`,{className:o.default.divider,style:W,children:[(0,l.jsx)(`span`,{className:o.default.line,"aria-hidden":`true`}),(0,l.jsxs)(`button`,{type:`button`,className:o.default.handle,role:`slider`,"aria-label":O,"aria-orientation":y,"aria-valuenow":Math.round(M),"aria-valuemin":0,"aria-valuemax":100,onKeyDown:H,onPointerDown:z,children:[(0,l.jsx)(a.Icon,{component:r.default,size:`sm`,className:o.default.arrow}),(0,l.jsx)(a.Icon,{component:i.default,size:`sm`,className:o.default.arrow})]})]})]})});d.displayName=`ImageCompare`,exports.ImageCompare=d;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../../../icon/chevron-left.cjs"),i=require("../../../icon/chevron-right.cjs"),a=require("../Icon/Icon.cjs"),o=require("./image-compare.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=e=>Math.max(0,Math.min(100,e)),d=s.default.forwardRef(({before:e,after:d,beforeAlt:f=``,afterAlt:p=``,beforeLabel:m,afterLabel:h,defaultPosition:g=50,position:_,onPositionChange:v,orientation:y=`horizontal`,width:b,height:x,radius:S=`md`,labels:C,className:w,"aria-label":T,"aria-labelledby":E,"aria-describedby":D,...O},k)=>{let{t:A}=t.useWimTranslation(n.commonNs),{handleAriaLabel:j=A(`imageCompare.handle`)}=C??{},M=_!==void 0,[N,P]=(0,s.useState)(u(g)),F=u(M?_:N),I=y===`vertical`,L=(0,s.useRef)(null),R=(0,s.useRef)(!1),z=(0,s.useCallback)(e=>{L.current=e,typeof k==`function`?k(e):k&&(k.current=e)},[k]),B=(0,s.useCallback)(e=>{let t=u(e);M||P(t),v?.(t)},[M,v]),V=(0,s.useCallback)((e,t)=>{let n=L.current?.getBoundingClientRect();if(!n)return;let r=I?(t-n.top)/n.height*100:(e-n.left)/n.width*100;B(r)},[I,B]),H=e=>{R.current=!0,e.currentTarget.setPointerCapture(e.pointerId),V(e.clientX,e.clientY)},U=e=>{R.current&&V(e.clientX,e.clientY)},W=e=>{R.current=!1,e.currentTarget.releasePointerCapture?.(e.pointerId)},G=e=>{let t=e.shiftKey?10:2,n=I?`ArrowUp`:`ArrowLeft`,r=I?`ArrowDown`:`ArrowRight`;e.key===n?(e.preventDefault(),B(F-t)):e.key===r?(e.preventDefault(),B(F+t)):e.key===`Home`?(e.preventDefault(),B(0)):e.key===`End`&&(e.preventDefault(),B(100))},K=I?{clipPath:`inset(0 0 ${100-F}% 0)`}:{clipPath:`inset(0 ${100-F}% 0 0)`},q=I?{top:`${F}%`}:{left:`${F}%`};return(0,l.jsxs)(`div`,{ref:z,className:(0,c.default)(`wim-image-compare`,o.default.root,I&&o.default.vertical,o.default[`radius-${S}`],w),style:{width:b,height:x},onPointerDown:H,onPointerMove:U,onPointerUp:W,...O,children:[(0,l.jsx)(`img`,{className:o.default.image,src:d,alt:p,draggable:!1}),h&&(0,l.jsx)(`span`,{className:(0,c.default)(o.default.label,o.default.afterLabel),children:h}),(0,l.jsxs)(`div`,{className:o.default.beforeLayer,style:K,children:[(0,l.jsx)(`img`,{className:o.default.image,src:e,alt:f,draggable:!1}),m&&(0,l.jsx)(`span`,{className:(0,c.default)(o.default.label,o.default.beforeLabel),children:m})]}),(0,l.jsxs)(`div`,{className:o.default.divider,style:q,children:[(0,l.jsx)(`span`,{className:o.default.line,"aria-hidden":`true`}),(0,l.jsxs)(`button`,{type:`button`,className:o.default.handle,role:`slider`,"aria-label":E?void 0:T??j,"aria-labelledby":E,"aria-describedby":D,"aria-orientation":y,"aria-valuenow":Math.round(F),"aria-valuemin":0,"aria-valuemax":100,onKeyDown:G,onPointerDown:H,children:[(0,l.jsx)(a.Icon,{component:r.default,size:`sm`,className:o.default.arrow}),(0,l.jsx)(a.Icon,{component:i.default,size:`sm`,className:o.default.arrow})]})]})]})});d.displayName=`ImageCompare`,exports.ImageCompare=d;

package/dist/components/media/ImageCompare/ImageCompare.js

@@ -9,38 +9,38 @@ import o, { useCallback 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";
 //#region src/components/media/ImageCompare/ImageCompare.tsx
-var p = (e) => Math.max(0, Math.min(100, e)), m = o.forwardRef(({ before: o, after: m, beforeAlt: h = "", afterAlt: g = "", beforeLabel: _, afterLabel: v, defaultPosition: y = 50, position: b, onPositionChange: x, orientation: S = "horizontal", width: C, height: w, radius: T = "md", labels: E, className: D, ...O }, k) => {
-	let { t: A } = e(t), { handleAriaLabel: j = A("imageCompare.handle") } = E ?? {}, M = b !== void 0, [N, P] = l(p(y)), F = p(M ? b : N), I = S === "vertical", L = c(null), R = c(!1), z = s((e) => {
-		L.current = e, typeof k == "function" ? k(e) : k && (k.current = e);
-	}, [k]), B = s((e) => {
+var p = (e) => Math.max(0, Math.min(100, e)), m = o.forwardRef(({ before: o, after: m, beforeAlt: h = "", afterAlt: g = "", beforeLabel: _, afterLabel: v, defaultPosition: y = 50, position: b, onPositionChange: x, orientation: S = "horizontal", width: C, height: w, radius: T = "md", labels: E, className: D, "aria-label": O, "aria-labelledby": k, "aria-describedby": A, ...j }, M) => {
+	let { t: N } = e(t), { handleAriaLabel: P = N("imageCompare.handle") } = E ?? {}, F = b !== void 0, [I, L] = l(p(y)), R = p(F ? b : I), z = S === "vertical", B = c(null), V = c(!1), H = s((e) => {
+		B.current = e, typeof M == "function" ? M(e) : M && (M.current = e);
+	}, [M]), U = s((e) => {
 		let t = p(e);
-		M || P(t), x?.(t);
-	}, [M, x]), V = s((e, t) => {
-		let n = L.current?.getBoundingClientRect();
+		F || L(t), x?.(t);
+	}, [F, x]), W = s((e, t) => {
+		let n = B.current?.getBoundingClientRect();
 		if (!n) return;
-		let r = I ? (t - n.top) / n.height * 100 : (e - n.left) / n.width * 100;
-		B(r);
-	}, [I, B]), H = (e) => {
-		R.current = !0, e.currentTarget.setPointerCapture(e.pointerId), V(e.clientX, e.clientY);
-	}, U = (e) => {
-		R.current && V(e.clientX, e.clientY);
-	}, W = (e) => {
-		R.current = !1, e.currentTarget.releasePointerCapture?.(e.pointerId);
-	}, G = (e) => {
-		let t = e.shiftKey ? 10 : 2, n = I ? "ArrowUp" : "ArrowLeft", r = I ? "ArrowDown" : "ArrowRight";
-		e.key === n ? (e.preventDefault(), B(F - t)) : e.key === r ? (e.preventDefault(), B(F + t)) : e.key === "Home" ? (e.preventDefault(), B(0)) : e.key === "End" && (e.preventDefault(), B(100));
-	}, K = I ? { clipPath: `inset(0 0 ${100 - F}% 0)` } : { clipPath: `inset(0 ${100 - F}% 0 0)` }, q = I ? { top: `${F}%` } : { left: `${F}%` };
+		let r = z ? (t - n.top) / n.height * 100 : (e - n.left) / n.width * 100;
+		U(r);
+	}, [z, U]), G = (e) => {
+		V.current = !0, e.currentTarget.setPointerCapture(e.pointerId), W(e.clientX, e.clientY);
+	}, K = (e) => {
+		V.current && W(e.clientX, e.clientY);
+	}, q = (e) => {
+		V.current = !1, e.currentTarget.releasePointerCapture?.(e.pointerId);
+	}, J = (e) => {
+		let t = e.shiftKey ? 10 : 2, n = z ? "ArrowUp" : "ArrowLeft", r = z ? "ArrowDown" : "ArrowRight";
+		e.key === n ? (e.preventDefault(), U(R - t)) : e.key === r ? (e.preventDefault(), U(R + t)) : e.key === "Home" ? (e.preventDefault(), U(0)) : e.key === "End" && (e.preventDefault(), U(100));
+	}, Y = z ? { clipPath: `inset(0 0 ${100 - R}% 0)` } : { clipPath: `inset(0 ${100 - R}% 0 0)` }, X = z ? { top: `${R}%` } : { left: `${R}%` };
 	return /* @__PURE__ */ f("div", {
-		ref: z,
-		className: u("wim-image-compare", a.root, I && a.vertical, a[`radius-${T}`], D),
+		ref: H,
+		className: u("wim-image-compare", a.root, z && a.vertical, a[`radius-${T}`], D),
 		style: {
 			width: C,
 			height: w
 		},
-		onPointerDown: H,
-		onPointerMove: U,
-		onPointerUp: W,
-		...O,
+		onPointerDown: G,
+		onPointerMove: K,
+		onPointerUp: q,
+		...j,
 		children: [
 			/* @__PURE__ */ d("img", {
 				className: a.image,
@@ -54,7 +54,7 @@ var p = (e) => Math.max(0, Math.min(100, e)), m = o.forwardRef(({ before: o, aft
 			}),
 			/* @__PURE__ */ f("div", {
 				className: a.beforeLayer,
-				style: K,
+				style: Y,
 				children: [/* @__PURE__ */ d("img", {
 					className: a.image,
 					src: o,
@@ -67,7 +67,7 @@ var p = (e) => Math.max(0, Math.min(100, e)), m = o.forwardRef(({ before: o, aft
 			}),
 			/* @__PURE__ */ f("div", {
 				className: a.divider,
-				style: q,
+				style: X,
 				children: [/* @__PURE__ */ d("span", {
 					className: a.line,
 					"aria-hidden": "true"
@@ -75,13 +75,15 @@ var p = (e) => Math.max(0, Math.min(100, e)), m = o.forwardRef(({ before: o, aft
 					type: "button",
 					className: a.handle,
 					role: "slider",
-					"aria-label": j,
+					"aria-label": k ? void 0 : O ?? P,
+					"aria-labelledby": k,
+					"aria-describedby": A,
 					"aria-orientation": S,
-					"aria-valuenow": Math.round(F),
+					"aria-valuenow": Math.round(R),
 					"aria-valuemin": 0,
 					"aria-valuemax": 100,
-					onKeyDown: G,
-					onPointerDown: H,
+					onKeyDown: J,
+					onPointerDown: G,
 					children: [/* @__PURE__ */ d(i, {
 						component: n,
 						size: "sm",

package/dist/components/navigation/BackTop/BackTop.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("../../../i18n/useWimTranslation.cjs"),r=require("../../../i18n/generated/common.cjs"),i=require("../../../icon/chevron-up.cjs"),a=require("../../media/Icon/Icon.cjs"),o=require("./backtop.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=s.default.forwardRef(({target:e=()=>window,visibilityHeight:u=400,onClick:d,children:f,className:p,style:m,"aria-label":h,asChild:g=!1},_)=>{let{t:v}=n.useWimTranslation(r.commonNs),[y,b]=(0,s.useState)(!1),x=(0,s.useCallback)(e=>e===window||e instanceof Window?window.pageYOffset||document.documentElement.scrollTop:e instanceof Document?document.documentElement.scrollTop:e.scrollTop,[]),S=(0,s.useCallback)(()=>{let t=e();if(!t)return;let n=x(t);b(n>u)},[e,u,x]);(0,s.useEffect)(()=>{let t=e();if(t)return requestAnimationFrame(S),t.addEventListener(`scroll`,S),()=>{t.removeEventListener(`scroll`,S)}},[e,S]);let C=t=>{let n=e();n&&(n===window||n instanceof Window?window.scrollTo({top:0,behavior:`smooth`}):n instanceof Document?document.documentElement.scrollTo({top:0,behavior:`smooth`}):n.scrollTo({top:0,behavior:`smooth`}),d?.(t))},w=(0,l.jsx)(`div`,{className:o.default.content,children:(0,l.jsx)(a.Icon,{component:i.default,className:o.default.icon})});return(0,l.jsx)(g?t.Root:`div`,{ref:_,className:(0,c.default)(`wim-back-top`,o.default.root,!y&&o.default.hidden,p),style:m,onClick:C,role:`button`,tabIndex:0,"aria-label":h??v(`a11y.back_to_top`),onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&e.currentTarget.click()},children:(0,l.jsx)(t.Slottable,{children:f||w})})});u.displayName=`BackTop`,exports.BackTop=u,exports.default=u;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../i18n/useWimTranslation.cjs"),r=require("../../../i18n/generated/common.cjs"),i=require("../../../icon/chevron-up.cjs"),a=require("../../media/Icon/Icon.cjs"),o=require("./backtop.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=s.default.forwardRef(({target:e=()=>window,visibilityHeight:u=400,onClick:d,children:f,className:p,style:m,"aria-label":h,"aria-labelledby":g,"aria-describedby":_,asChild:v=!1},y)=>{let{t:b}=n.useWimTranslation(r.commonNs),[x,S]=(0,s.useState)(!1),C=(0,s.useCallback)(e=>e===window||e instanceof Window?window.pageYOffset||document.documentElement.scrollTop:e instanceof Document?document.documentElement.scrollTop:e.scrollTop,[]),w=(0,s.useCallback)(()=>{let t=e();if(!t)return;let n=C(t);S(n>u)},[e,u,C]);(0,s.useEffect)(()=>{let t=e();if(t)return requestAnimationFrame(w),t.addEventListener(`scroll`,w),()=>{t.removeEventListener(`scroll`,w)}},[e,w]);let T=t=>{let n=e();n&&(n===window||n instanceof Window?window.scrollTo({top:0,behavior:`smooth`}):n instanceof Document?document.documentElement.scrollTo({top:0,behavior:`smooth`}):n.scrollTo({top:0,behavior:`smooth`}),d?.(t))},E=(0,l.jsx)(`div`,{className:o.default.content,children:(0,l.jsx)(a.Icon,{component:i.default,className:o.default.icon})});return(0,l.jsx)(v?t.Root:`div`,{ref:y,className:(0,c.default)(`wim-back-top`,o.default.root,!x&&o.default.hidden,p),style:m,onClick:T,role:`button`,tabIndex:0,"aria-label":g?void 0:h??b(`a11y.back_to_top`),"aria-labelledby":g,"aria-describedby":_,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&e.currentTarget.click()},children:(0,l.jsx)(t.Slottable,{children:f||E})})});u.displayName=`BackTop`,exports.BackTop=u,exports.default=u;

package/dist/components/navigation/BackTop/BackTop.d.ts

@@ -14,6 +14,10 @@ export interface BackTopProps {
     style?: React.CSSProperties;
     /** Accessible label for the button */
     "aria-label"?: string;
+    /** ID of the element that labels the button. Takes precedence over `aria-label`. */
+    "aria-labelledby"?: string;
+    /** ID of the element that describes the button. */
+    "aria-describedby"?: string;
     /** Whether to render as a child element. */
     asChild?: boolean;
 }

package/dist/components/navigation/BackTop/BackTop.js

@@ -9,24 +9,24 @@ import s, { useCallback as c, useEffect as l, useState as u } from "react";
 import d from "classnames";
 import { jsx as f } from "react/jsx-runtime";
 //#region src/components/navigation/BackTop/BackTop.tsx
-var p = s.forwardRef(({ target: s = () => window, visibilityHeight: p = 400, onClick: m, children: h, className: g, style: _, "aria-label": v, asChild: y = !1 }, b) => {
-	let { t: x } = n(r), [S, C] = u(!1), w = c((e) => e === window || e instanceof Window ? window.pageYOffset || document.documentElement.scrollTop : e instanceof Document ? document.documentElement.scrollTop : e.scrollTop, []), T = c(() => {
+var p = s.forwardRef(({ target: s = () => window, visibilityHeight: p = 400, onClick: m, children: h, className: g, style: _, "aria-label": v, "aria-labelledby": y, "aria-describedby": b, asChild: x = !1 }, S) => {
+	let { t: C } = n(r), [w, T] = u(!1), E = c((e) => e === window || e instanceof Window ? window.pageYOffset || document.documentElement.scrollTop : e instanceof Document ? document.documentElement.scrollTop : e.scrollTop, []), D = c(() => {
 		let e = s();
 		if (!e) return;
-		let t = w(e);
-		C(t > p);
+		let t = E(e);
+		T(t > p);
 	}, [
 		s,
 		p,
-		w
+		E
 	]);
 	l(() => {
 		let e = s();
-		if (e) return requestAnimationFrame(T), e.addEventListener("scroll", T), () => {
-			e.removeEventListener("scroll", T);
+		if (e) return requestAnimationFrame(D), e.addEventListener("scroll", D), () => {
+			e.removeEventListener("scroll", D);
 		};
-	}, [s, T]);
-	let E = (e) => {
+	}, [s, D]);
+	let O = (e) => {
 		let t = s();
 		t && (t === window || t instanceof Window ? window.scrollTo({
 			top: 0,
@@ -38,25 +38,27 @@ var p = s.forwardRef(({ target: s = () => window, visibilityHeight: p = 400, onC
 			top: 0,
 			behavior: "smooth"
 		}), m?.(e));
-	}, D = /* @__PURE__ */ f("div", {
+	}, k = /* @__PURE__ */ f("div", {
 		className: o.content,
 		children: /* @__PURE__ */ f(a, {
 			component: i,
 			className: o.icon
 		})
 	});
-	return /* @__PURE__ */ f(y ? e : "div", {
-		ref: b,
-		className: d("wim-back-top", o.root, !S && o.hidden, g),
+	return /* @__PURE__ */ f(x ? e : "div", {
+		ref: S,
+		className: d("wim-back-top", o.root, !w && o.hidden, g),
 		style: _,
-		onClick: E,
+		onClick: O,
 		role: "button",
 		tabIndex: 0,
-		"aria-label": v ?? x("a11y.back_to_top"),
+		"aria-label": y ? void 0 : v ?? C("a11y.back_to_top"),
+		"aria-labelledby": y,
+		"aria-describedby": b,
 		onKeyDown: (e) => {
 			(e.key === "Enter" || e.key === " ") && e.currentTarget.click();
 		},
-		children: /* @__PURE__ */ f(t, { children: h || D })
+		children: /* @__PURE__ */ f(t, { children: h || k })
 	});
 });
 p.displayName = "BackTop";

package/dist/components/navigation/CommandPalette/CommandPalette.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../overlay/Portal/Portal.cjs"),r=require("../../layout/Transition/Transition.cjs"),i=require("../../overlay/FocusTrap/FocusTrap.cjs"),a=require("../../../i18n/generated/components.cjs"),o=require("../../../icon/search.cjs"),s=require("../../media/Icon/Icon.cjs"),c=require("../../_internal/BaseListItem/BaseListItem.cjs"),l=require("./command-palette.module.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("classnames");d=e.__toESM(d,1);let f=require("react/jsx-runtime");var p=(0,u.createContext)(void 0),m=()=>{let e=(0,u.useContext)(p);if(!e)throw Error(`CommandPalette sub-components must be used within a CommandPalette`);return e},h=({children:e,open:t,onOpenChange:n})=>{let[r,i]=(0,u.useState)(!1),[a,o]=(0,u.useState)(``),[s,c]=(0,u.useState)(0),[l,d]=(0,u.useState)(!1),m=(0,u.useRef)(0),h=t!==void 0,g=h?t:r,_=(0,u.useCallback)(e=>{h||i(e),n?.(e),e||(o(``),c(0))},[h,n]),v=(0,u.useCallback)(()=>{let e=m.current;return m.current+=1,e},[]),y=(0,u.useCallback)(()=>{--m.current},[]);m.current=0,(0,u.useEffect)(()=>{let e=e=>{(e.metaKey||e.ctrlKey)&&e.key===`k`&&(e.preventDefault(),d(!0),_(!g)),e.key===`Escape`&&g&&_(!1)};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[g,_]);let b=u.default.useMemo(()=>({open:g,onOpenChange:_,search:a,setSearch:o,activeIndex:s,setActiveIndex:c,registerItem:v,unregisterItem:y,isKeyboardNavigating:l,setIsKeyboardNavigating:d}),[g,_,a,s,v,y,l]);return(0,f.jsx)(p.Provider,{value:b,children:e})},g=({children:e,asChild:t,className:n})=>{let{onOpenChange:r,setIsKeyboardNavigating:i}=m(),a=e=>{i(e.detail===0),r(!0)};return t&&u.default.isValidElement(e)?u.default.cloneElement(e,{onClick:t=>{e.props.onClick?.(t),a(t)},className:(0,d.default)(n,e.props.className)}):(0,f.jsx)(`button`,{className:(0,d.default)(l.default.trigger,n),onClick:a,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&i(!0)},children:e})},_=({children:e,className:o,"aria-label":s})=>{let{t:c}=t.useWimTranslation(a.componentsNs),{open:p,onOpenChange:h,activeIndex:g,setActiveIndex:_,isKeyboardNavigating:v,setIsKeyboardNavigating:y}=m(),b=(0,u.useRef)(null);return(0,f.jsx)(n.Portal,{children:(0,f.jsx)(r.Transition,{show:p,preset:`fade`,children:(0,f.jsx)(`div`,{role:`presentation`,className:l.default.overlay,onClick:e=>{e.target===e.currentTarget&&h(!1)},children:(0,f.jsx)(r.Transition,{show:p,preset:`scale`,children:(0,f.jsx)(i.FocusTrap,{active:p,children:(0,f.jsx)(`div`,{role:`dialog`,"aria-modal":`true`,"aria-label":s??c(`command_palette.label`),className:(0,d.default)(`wim-command-palette`,l.default.content,o),onClick:e=>e.stopPropagation(),onMouseMove:e=>{if(!b.current){b.current={x:e.clientX,y:e.clientY};return}Math.sqrt((e.clientX-b.current.x)**2+(e.clientY-b.current.y)**2)>10&&y(!1),b.current={x:e.clientX,y:e.clientY}},"data-keyboard-nav":v,onKeyDown:e=>{y(!0);let t=e.currentTarget.querySelectorAll(`.${l.default.item}:not([aria-disabled="true"])`).length;t!==0&&(e.key===`ArrowDown`?(e.preventDefault(),_(e=>(e+1)%t)):e.key===`ArrowUp`?(e.preventDefault(),_(e=>(e-1+t)%t)):e.key===`Home`?(e.preventDefault(),_(0)):e.key===`End`?(e.preventDefault(),_(t-1)):e.key===`Enter`&&(e.preventDefault(),document.getElementById(`wim-command-palette-item-${g}`)?.click()))},children:e})})})})})})},v=({placeholder:e,value:t,onChange:n,rightSection:r})=>{let{search:i,setSearch:a,setActiveIndex:c,activeIndex:d}=m(),p=(0,u.useRef)(null);return(0,u.useEffect)(()=>{p.current?.focus()},[]),(0,f.jsxs)(`div`,{className:l.default.inputWrapper,children:[(0,f.jsx)(s.Icon,{component:o.default,size:`sm`}),(0,f.jsx)(`input`,{ref:p,className:l.default.input,placeholder:e,value:t??i,onChange:e=>{let t=e.target.value;a(t),c(0),n?.(t)},role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":!0,"aria-controls":`wim-command-palette-listbox`,"aria-activedescendant":`wim-command-palette-item-${d}`}),r&&(0,f.jsx)(`div`,{className:l.default.inputRight,children:r})]})},y=({children:e})=>(0,f.jsx)(`div`,{className:l.default.list,role:`listbox`,id:`wim-command-palette-listbox`,children:e}),b=({children:e,heading:t})=>{let n=u.default.useId();return(0,f.jsxs)(`div`,{className:l.default.group,role:`group`,"aria-labelledby":t?n:void 0,children:[t&&(0,f.jsx)(`div`,{id:n,className:l.default.groupHeading,"aria-hidden":`true`,children:t}),e]})},x=({children:e,onSelect:t,icon:n,shortcut:r,disabled:i})=>{let{activeIndex:a,setActiveIndex:o,registerItem:s,onOpenChange:d}=m(),[p]=(0,u.useState)(()=>s()),h=a===p;return(0,u.useEffect)(()=>{h&&!i&&document.getElementById(`wim-command-palette-item-${p}`)?.scrollIntoView({block:`nearest`})},[h,i,p]),(0,f.jsx)(c.BaseListItem,{role:`option`,id:`wim-command-palette-item-${p}`,"aria-selected":h,className:l.default.item,active:h,disabled:i,icon:n,rightSection:r&&(0,f.jsx)(`div`,{className:l.default.shortcut,children:r.map(e=>(0,f.jsx)(`kbd`,{className:l.default.kbd,children:e},e))}),onMouseEnter:()=>!i&&o(p),onClick:()=>{i||(t?.(),d(!1))},children:e})},S=({children:e})=>{let{t:n}=t.useWimTranslation(a.componentsNs),r=e??n(`command_palette.no_results`),{open:i,search:o}=m(),[s,c]=(0,u.useState)(!1);return(0,u.useEffect)(()=>{if(i){let e=setTimeout(()=>{let e=document.querySelectorAll(`.${l.default.item}`);c(e.length===0)},0);return()=>clearTimeout(e)}},[i,o]),!i||!s?null:(0,f.jsx)(`div`,{className:l.default.empty,children:r})},C=({children:e})=>(0,f.jsx)(`div`,{className:l.default.footer,children:e});exports.CommandPalette=h,exports.CommandPaletteContent=_,exports.CommandPaletteEmpty=S,exports.CommandPaletteFooter=C,exports.CommandPaletteGroup=b,exports.CommandPaletteInput=v,exports.CommandPaletteItem=x,exports.CommandPaletteList=y,exports.CommandPaletteTrigger=g;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../overlay/Portal/Portal.cjs"),r=require("../../layout/Transition/Transition.cjs"),i=require("../../overlay/FocusTrap/FocusTrap.cjs"),a=require("../../../i18n/generated/components.cjs"),o=require("../../../icon/search.cjs"),s=require("../../media/Icon/Icon.cjs"),c=require("../../_internal/BaseListItem/BaseListItem.cjs"),l=require("./command-palette.module.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("classnames");d=e.__toESM(d,1);let f=require("react/jsx-runtime");var p=(0,u.createContext)(void 0),m=()=>{let e=(0,u.useContext)(p);if(!e)throw Error(`CommandPalette sub-components must be used within a CommandPalette`);return e},h=({children:e,open:t,onOpenChange:n})=>{let[r,i]=(0,u.useState)(!1),[a,o]=(0,u.useState)(``),[s,c]=(0,u.useState)(0),[l,d]=(0,u.useState)(!1),m=(0,u.useRef)(0),h=t!==void 0,g=h?t:r,_=(0,u.useCallback)(e=>{h||i(e),n?.(e),e||(o(``),c(0))},[h,n]),v=(0,u.useCallback)(()=>{let e=m.current;return m.current+=1,e},[]),y=(0,u.useCallback)(()=>{--m.current},[]);m.current=0,(0,u.useEffect)(()=>{let e=e=>{(e.metaKey||e.ctrlKey)&&e.key===`k`&&(e.preventDefault(),d(!0),_(!g)),e.key===`Escape`&&g&&_(!1)};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[g,_]);let b=u.default.useMemo(()=>({open:g,onOpenChange:_,search:a,setSearch:o,activeIndex:s,setActiveIndex:c,registerItem:v,unregisterItem:y,isKeyboardNavigating:l,setIsKeyboardNavigating:d}),[g,_,a,s,v,y,l]);return(0,f.jsx)(p.Provider,{value:b,children:e})},g=({children:e,asChild:t,className:n})=>{let{onOpenChange:r,setIsKeyboardNavigating:i}=m(),a=e=>{i(e.detail===0),r(!0)};return t&&u.default.isValidElement(e)?u.default.cloneElement(e,{onClick:t=>{e.props.onClick?.(t),a(t)},className:(0,d.default)(n,e.props.className)}):(0,f.jsx)(`button`,{className:(0,d.default)(l.default.trigger,n),onClick:a,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&i(!0)},children:e})},_=({children:e,className:o,"aria-label":s})=>{let{t:c}=t.useWimTranslation(a.componentsNs),{open:p,onOpenChange:h,activeIndex:g,setActiveIndex:_,isKeyboardNavigating:v,setIsKeyboardNavigating:y}=m(),b=(0,u.useRef)(null);return(0,f.jsx)(n.Portal,{children:(0,f.jsx)(r.Transition,{show:p,preset:`fade`,children:(0,f.jsx)(`div`,{role:`presentation`,className:l.default.overlay,onClick:e=>{e.target===e.currentTarget&&h(!1)},children:(0,f.jsx)(r.Transition,{show:p,preset:`scale`,children:(0,f.jsx)(i.FocusTrap,{active:p,children:(0,f.jsx)(`div`,{role:`dialog`,"aria-modal":`true`,"aria-label":s??c(`command_palette.label`),className:(0,d.default)(`wim-command-palette`,l.default.content,o),onClick:e=>e.stopPropagation(),onMouseMove:e=>{if(!b.current){b.current={x:e.clientX,y:e.clientY};return}Math.sqrt((e.clientX-b.current.x)**2+(e.clientY-b.current.y)**2)>10&&y(!1),b.current={x:e.clientX,y:e.clientY}},"data-keyboard-nav":v,onKeyDown:e=>{y(!0);let t=e.currentTarget.querySelectorAll(`.${l.default.item}:not([aria-disabled="true"])`).length;t!==0&&(e.key===`ArrowDown`?(e.preventDefault(),_(e=>(e+1)%t)):e.key===`ArrowUp`?(e.preventDefault(),_(e=>(e-1+t)%t)):e.key===`Home`?(e.preventDefault(),_(0)):e.key===`End`?(e.preventDefault(),_(t-1)):e.key===`Enter`&&(e.preventDefault(),document.getElementById(`wim-command-palette-item-${g}`)?.click()))},children:e})})})})})})},v=({placeholder:e,value:t,onChange:n,rightSection:r})=>{let{search:i,setSearch:a,setActiveIndex:c,activeIndex:d}=m(),p=(0,u.useRef)(null);return(0,u.useEffect)(()=>{p.current?.focus()},[]),(0,f.jsxs)(`div`,{className:l.default.inputWrapper,children:[(0,f.jsx)(s.Icon,{component:o.default,size:`sm`}),(0,f.jsx)(`input`,{ref:p,className:l.default.input,placeholder:e,value:t??i,onChange:e=>{let t=e.target.value;a(t),c(0),n?.(t)},role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":!0,"aria-controls":`wim-command-palette-listbox`,"aria-activedescendant":`wim-command-palette-item-${d}`}),r&&(0,f.jsx)(`div`,{className:l.default.inputRight,children:r})]})},y=({children:e,"aria-label":n,"aria-labelledby":r})=>{let{t:i}=t.useWimTranslation(a.componentsNs);return(0,f.jsx)(`div`,{className:l.default.list,role:`listbox`,id:`wim-command-palette-listbox`,"aria-label":r?void 0:n??i(`command_palette.label`),"aria-labelledby":r,children:e})},b=({children:e,heading:t})=>{let n=u.default.useId();return(0,f.jsxs)(`div`,{className:l.default.group,role:`group`,"aria-labelledby":t?n:void 0,children:[t&&(0,f.jsx)(`div`,{id:n,className:l.default.groupHeading,"aria-hidden":`true`,children:t}),e]})},x=({children:e,onSelect:t,icon:n,shortcut:r,disabled:i})=>{let{activeIndex:a,setActiveIndex:o,registerItem:s,onOpenChange:d}=m(),[p]=(0,u.useState)(()=>s()),h=a===p;return(0,u.useEffect)(()=>{h&&!i&&document.getElementById(`wim-command-palette-item-${p}`)?.scrollIntoView({block:`nearest`})},[h,i,p]),(0,f.jsx)(c.BaseListItem,{role:`option`,id:`wim-command-palette-item-${p}`,"aria-selected":h,className:l.default.item,active:h,disabled:i,icon:n,rightSection:r&&(0,f.jsx)(`div`,{className:l.default.shortcut,children:r.map(e=>(0,f.jsx)(`kbd`,{className:l.default.kbd,children:e},e))}),onMouseEnter:()=>!i&&o(p),onClick:()=>{i||(t?.(),d(!1))},children:e})},S=({children:e})=>{let{t:n}=t.useWimTranslation(a.componentsNs),r=e??n(`command_palette.no_results`),{open:i,search:o}=m(),[s,c]=(0,u.useState)(!1);return(0,u.useEffect)(()=>{if(i){let e=setTimeout(()=>{let e=document.querySelectorAll(`.${l.default.item}`);c(e.length===0)},0);return()=>clearTimeout(e)}},[i,o]),!i||!s?null:(0,f.jsx)(`div`,{className:l.default.empty,children:r})},C=({children:e})=>(0,f.jsx)(`div`,{className:l.default.footer,children:e});exports.CommandPalette=h,exports.CommandPaletteContent=_,exports.CommandPaletteEmpty=S,exports.CommandPaletteFooter=C,exports.CommandPaletteGroup=b,exports.CommandPaletteInput=v,exports.CommandPaletteItem=x,exports.CommandPaletteList=y,exports.CommandPaletteTrigger=g;

package/dist/components/navigation/CommandPalette/CommandPalette.d.ts

@@ -38,8 +38,12 @@ export interface CommandPaletteInputProps {
     rightSection?: ReactNode;
 }
 export declare const CommandPaletteInput: ({ placeholder, value, onChange, rightSection, }: CommandPaletteInputProps) => React.JSX.Element;
-export declare const CommandPaletteList: ({ children }: {
+export declare const CommandPaletteList: ({ children, "aria-label": ariaLabelAttr, "aria-labelledby": ariaLabelledBy, }: {
     children: ReactNode;
+    /** Accessible name for the list of results. Defaults to the built-in command palette label. */
+    "aria-label"?: string;
+    /** ID of the element that labels the list of results. Takes precedence over `aria-label`. */
+    "aria-labelledby"?: string;
 }) => React.JSX.Element;
 export declare const CommandPaletteGroup: ({ children, heading, }: {
     children: ReactNode;

package/dist/components/navigation/CommandPalette/CommandPalette.js

@@ -151,12 +151,17 @@ var y = u(void 0), b = () => {
 			})
 		]
 	});
-}, T = ({ children: e }) => /* @__PURE__ */ _("div", {
-	className: c.list,
-	role: "listbox",
-	id: "wim-command-palette-listbox",
-	children: e
-}), E = ({ children: e, heading: t }) => {
+}, T = ({ children: t, "aria-label": n, "aria-labelledby": r }) => {
+	let { t: a } = e(i);
+	return /* @__PURE__ */ _("div", {
+		className: c.list,
+		role: "listbox",
+		id: "wim-command-palette-listbox",
+		"aria-label": r ? void 0 : n ?? a("command_palette.label"),
+		"aria-labelledby": r,
+		children: t
+	});
+}, E = ({ children: e, heading: t }) => {
 	let n = l.useId();
 	return /* @__PURE__ */ v("div", {
 		className: c.group,

package/dist/components/navigation/Pagination/Pagination.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("../../../i18n/useWimTranslation.cjs"),r=require("../../../i18n/generated/common.cjs"),i=require("../../../icon/chevron-left.cjs"),a=require("../../../icon/chevron-right.cjs"),o=require("../../media/Icon/Icon.cjs"),s=require("../../form/Button/Button.cjs"),c=require("../../form/Input/Input.cjs"),l=require("../../form/Select/Select.cjs"),u=require("./pagination.module.cjs");let d=require("react");d=e.__toESM(d,1);let f=require("classnames");f=e.__toESM(f,1);let p=require("react/jsx-runtime");var m=d.default.forwardRef(({asChild:e=!1,className:n,children:r,page:i,isActive:a,...o},s)=>(0,p.jsx)(e?t.Root:`button`,{ref:s,type:e?void 0:`button`,className:(0,f.default)(u.default.button,n),"aria-current":a?`page`:void 0,...o,children:e?(0,p.jsx)(t.Slottable,{children:r}):r}));m.displayName=`PaginationPage`;var h=`...`,g=({total:e,pageSize:g=10,current:_=1,onChange:v,onPageSizeChange:y,siblingCount:b=1,className:x,asChild:S=!1,children:C,renderPage:w,hideOnSinglePage:T=!1,simple:E=!1,showSizeChanger:ee=!1,pageSizeOptions:D=[10,20,50,100],showTotal:O,showQuickJumper:k=!1,labels:A={}})=>{let{t:j}=n.useWimTranslation(r.commonNs),{prevPage:M=j(`a11y.go_to_prev_page`),nextPage:N=j(`a11y.go_to_next_page`),pageAriaLabel:P=e=>j(`a11y.go_to_page`,{page:String(e)}),itemsPerPage:F=j(`pagination.items_per_page`),goTo:I=j(`pagination.go_to`),go:L=j(`pagination.go`),pageSizeAriaLabel:R=j(`a11y.items_per_page`),jumpToPageAriaLabel:z=j(`a11y.jump_to_page`),navAriaLabel:B=j(`a11y.pagination_nav`)}=A,[V,H]=(0,d.useState)(g),[U,W]=(0,d.useState)(``),G=V,K=Math.ceil(e/G),q=(0,d.useMemo)(()=>{if(b+5>=K)return Array.from({length:K},(e,t)=>t+1);let e=Math.max(_-b,1),t=Math.min(_+b,K),n=e>2,r=t<K-2,i=K;if(!n&&r){let e=3+2*b;return[...Array.from({length:e},(e,t)=>t+1),h,K]}if(n&&!r){let e=3+2*b;return[1,h,...Array.from({length:e},(t,n)=>K-e+n+1)]}return n&&r?[1,h,...Array.from({length:t-e+1},(t,n)=>e+n),h,i]:[]},[K,b,_]);if(T&&K<=1)return null;let J=e=>{e<1||e>K||e===_||v?.(e,G)},Y=e=>{H(e),y?.(e),v?.(1,e)},X=()=>{let e=parseInt(U);!isNaN(e)&&e>=1&&e<=K&&(J(e),W(``))},Z=e=>{e.key===`Enter`&&X()},Q=(_-1)*G+1,te=Math.min(_*G,e),$=S?t.Root:`nav`,ne=e=>{let t={page:e,isActive:e===_,onClick:()=>J(e),"aria-label":P(e)};return w?w(e,t):(0,p.jsx)(m,{...t,children:e})};return E?(0,p.jsxs)($,{className:(0,f.default)(`wim-pagination`,u.default.root,u.default.simple,x),"aria-label":B,children:[(0,p.jsx)(t.Slottable,{children:C}),(0,p.jsxs)(`ul`,{className:u.default.root,children:[(0,p.jsx)(`li`,{className:(0,f.default)(u.default.item,_===1&&u.default.disabled),children:(0,p.jsx)(`button`,{className:u.default.button,onClick:()=>J(_-1),disabled:_===1,"aria-label":M,children:(0,p.jsx)(o.Icon,{component:i.default,size:`sm`})})}),(0,p.jsx)(`li`,{className:(0,f.default)(u.default.item,u.default.simplePager),children:(0,p.jsxs)(`span`,{children:[_,` / `,K]})}),(0,p.jsx)(`li`,{className:(0,f.default)(u.default.item,_===K&&u.default.disabled),children:(0,p.jsx)(`button`,{className:u.default.button,onClick:()=>J(_+1),disabled:_===K,"aria-label":N,children:(0,p.jsx)(o.Icon,{component:a.default,size:`sm`})})})]})]}):(0,p.jsx)(`div`,{className:(0,f.default)(`wim-pagination`,u.default.container,x),children:(0,p.jsxs)(`div`,{className:u.default.wrapper,children:[O&&(0,p.jsx)(`div`,{className:u.default.total,children:O(e,[Q,te])}),(0,p.jsxs)($,{className:u.default.root,"aria-label":B,children:[(0,p.jsx)(t.Slottable,{children:C}),(0,p.jsxs)(`ul`,{className:u.default.root,children:[(0,p.jsx)(`li`,{className:(0,f.default)(u.default.item,_===1&&u.default.disabled),children:(0,p.jsx)(`button`,{className:u.default.button,onClick:()=>J(_-1),disabled:_===1,"aria-label":M,children:(0,p.jsx)(o.Icon,{component:i.default,size:`sm`})})}),(0,p.jsx)(`li`,{className:(0,f.default)(u.default.item,u.default.mobileIndicator),children:(0,p.jsxs)(`span`,{children:[_,` / `,K]})}),q.map((e,t)=>e===h?(0,p.jsx)(`li`,{className:(0,f.default)(u.default.item,u.default.ellipsis),"aria-hidden":`true`,children:h},`ellipsis-${t}`):(0,p.jsx)(`li`,{className:(0,f.default)(u.default.item,u.default.number,e===_&&u.default.active),children:ne(e)},e)),(0,p.jsx)(`li`,{className:(0,f.default)(u.default.item,_===K&&u.default.disabled),children:(0,p.jsx)(`button`,{className:u.default.button,onClick:()=>J(_+1),disabled:_===K,"aria-label":N,children:(0,p.jsx)(o.Icon,{component:a.default,size:`sm`})})})]})]}),ee&&(0,p.jsx)(`div`,{className:u.default.sizeChanger,children:(0,p.jsx)(l.Select,{value:String(G),onChange:e=>Y(Number(e)),options:D.map(e=>({label:`${e} ${F}`,value:String(e)})),width:`auto`,"aria-label":R})}),k&&(0,p.jsxs)(`div`,{className:u.default.quickJumper,children:[(0,p.jsx)(`span`,{children:I}),(0,p.jsx)(c.Input,{type:`number`,min:1,max:K,value:U,onChange:e=>W(e.target.value),onKeyDown:Z,width:`60px`,"aria-label":z}),(0,p.jsx)(s.Button,{size:`sm`,variant:`outline`,onClick:X,disabled:!U,children:L})]})]})})};exports.Pagination=g,exports.default=g,exports.PaginationPage=m;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../i18n/useWimTranslation.cjs"),r=require("../../../i18n/generated/common.cjs"),i=require("../../../icon/chevron-left.cjs"),a=require("../../../icon/chevron-right.cjs"),o=require("../../media/Icon/Icon.cjs"),s=require("../../form/Button/Button.cjs"),c=require("../../form/Input/Input.cjs"),l=require("../../form/Select/Select.cjs"),u=require("./pagination.module.cjs");let d=require("react");d=e.__toESM(d,1);let f=require("classnames");f=e.__toESM(f,1);let p=require("react/jsx-runtime");var m=d.default.forwardRef(({asChild:e=!1,className:n,children:r,page:i,isActive:a,...o},s)=>(0,p.jsx)(e?t.Root:`button`,{ref:s,type:e?void 0:`button`,className:(0,f.default)(u.default.button,n),"aria-current":a?`page`:void 0,...o,children:e?(0,p.jsx)(t.Slottable,{children:r}):r}));m.displayName=`PaginationPage`;var h=`...`,g=({total:e,pageSize:g=10,current:_=1,onChange:v,onPageSizeChange:y,siblingCount:b=1,className:x,asChild:S=!1,children:C,renderPage:w,hideOnSinglePage:T=!1,simple:E=!1,showSizeChanger:D=!1,pageSizeOptions:ee=[10,20,50,100],showTotal:O,showQuickJumper:k=!1,labels:A={},"aria-label":j,"aria-labelledby":M})=>{let{t:N}=n.useWimTranslation(r.commonNs),{prevPage:P=N(`a11y.go_to_prev_page`),nextPage:F=N(`a11y.go_to_next_page`),pageAriaLabel:I=e=>N(`a11y.go_to_page`,{page:String(e)}),itemsPerPage:L=N(`pagination.items_per_page`),goTo:R=N(`pagination.go_to`),go:z=N(`pagination.go`),pageSizeAriaLabel:B=N(`a11y.items_per_page`),jumpToPageAriaLabel:V=N(`a11y.jump_to_page`),navAriaLabel:H=N(`a11y.pagination_nav`)}=A,[U,W]=(0,d.useState)(g),[G,K]=(0,d.useState)(``),q=U,J=Math.ceil(e/q),Y=(0,d.useMemo)(()=>{if(b+5>=J)return Array.from({length:J},(e,t)=>t+1);let e=Math.max(_-b,1),t=Math.min(_+b,J),n=e>2,r=t<J-2,i=J;if(!n&&r){let e=3+2*b;return[...Array.from({length:e},(e,t)=>t+1),h,J]}if(n&&!r){let e=3+2*b;return[1,h,...Array.from({length:e},(t,n)=>J-e+n+1)]}return n&&r?[1,h,...Array.from({length:t-e+1},(t,n)=>e+n),h,i]:[]},[J,b,_]);if(T&&J<=1)return null;let X=e=>{e<1||e>J||e===_||v?.(e,q)},Z=e=>{W(e),y?.(e),v?.(1,e)},Q=()=>{let e=parseInt(G);!isNaN(e)&&e>=1&&e<=J&&(X(e),K(``))},te=e=>{e.key===`Enter`&&Q()},ne=(_-1)*q+1,re=Math.min(_*q,e),$=S?t.Root:`nav`,ie=e=>{let t={page:e,isActive:e===_,onClick:()=>X(e),"aria-label":I(e)};return w?w(e,t):(0,p.jsx)(m,{...t,children:e})};return E?(0,p.jsxs)($,{className:(0,f.default)(`wim-pagination`,u.default.root,u.default.simple,x),"aria-label":M?void 0:j??H,"aria-labelledby":M,children:[(0,p.jsx)(t.Slottable,{children:C}),(0,p.jsxs)(`ul`,{className:u.default.root,children:[(0,p.jsx)(`li`,{className:(0,f.default)(u.default.item,_===1&&u.default.disabled),children:(0,p.jsx)(`button`,{className:u.default.button,onClick:()=>X(_-1),disabled:_===1,"aria-label":P,children:(0,p.jsx)(o.Icon,{component:i.default,size:`sm`})})}),(0,p.jsx)(`li`,{className:(0,f.default)(u.default.item,u.default.simplePager),children:(0,p.jsxs)(`span`,{children:[_,` / `,J]})}),(0,p.jsx)(`li`,{className:(0,f.default)(u.default.item,_===J&&u.default.disabled),children:(0,p.jsx)(`button`,{className:u.default.button,onClick:()=>X(_+1),disabled:_===J,"aria-label":F,children:(0,p.jsx)(o.Icon,{component:a.default,size:`sm`})})})]})]}):(0,p.jsx)(`div`,{className:(0,f.default)(`wim-pagination`,u.default.container,x),children:(0,p.jsxs)(`div`,{className:u.default.wrapper,children:[O&&(0,p.jsx)(`div`,{className:u.default.total,children:O(e,[ne,re])}),(0,p.jsxs)($,{className:u.default.root,"aria-label":M?void 0:j??H,"aria-labelledby":M,children:[(0,p.jsx)(t.Slottable,{children:C}),(0,p.jsxs)(`ul`,{className:u.default.root,children:[(0,p.jsx)(`li`,{className:(0,f.default)(u.default.item,_===1&&u.default.disabled),children:(0,p.jsx)(`button`,{className:u.default.button,onClick:()=>X(_-1),disabled:_===1,"aria-label":P,children:(0,p.jsx)(o.Icon,{component:i.default,size:`sm`})})}),(0,p.jsx)(`li`,{className:(0,f.default)(u.default.item,u.default.mobileIndicator),children:(0,p.jsxs)(`span`,{children:[_,` / `,J]})}),Y.map((e,t)=>e===h?(0,p.jsx)(`li`,{className:(0,f.default)(u.default.item,u.default.ellipsis),"aria-hidden":`true`,children:h},`ellipsis-${t}`):(0,p.jsx)(`li`,{className:(0,f.default)(u.default.item,u.default.number,e===_&&u.default.active),children:ie(e)},e)),(0,p.jsx)(`li`,{className:(0,f.default)(u.default.item,_===J&&u.default.disabled),children:(0,p.jsx)(`button`,{className:u.default.button,onClick:()=>X(_+1),disabled:_===J,"aria-label":F,children:(0,p.jsx)(o.Icon,{component:a.default,size:`sm`})})})]})]}),D&&(0,p.jsx)(`div`,{className:u.default.sizeChanger,children:(0,p.jsx)(l.Select,{value:String(q),onChange:e=>Z(Number(e)),options:ee.map(e=>({label:`${e} ${L}`,value:String(e)})),width:`auto`,"aria-label":B})}),k&&(0,p.jsxs)(`div`,{className:u.default.quickJumper,children:[(0,p.jsx)(`span`,{children:R}),(0,p.jsx)(c.Input,{type:`number`,min:1,max:J,value:G,onChange:e=>K(e.target.value),onKeyDown:te,width:`60px`,"aria-label":V}),(0,p.jsx)(s.Button,{size:`sm`,variant:`outline`,onClick:Q,disabled:!G,children:z})]})]})})};exports.Pagination=g,exports.default=g,exports.PaginationPage=m;

package/dist/components/navigation/Pagination/Pagination.d.ts

@@ -77,6 +77,10 @@ export interface PaginationProps {
         navAriaLabel?: string;
         totalLabel?: string;
     };
+    /** Accessible name for the navigation landmark. Takes precedence over `labels.navAriaLabel`. */
+    "aria-label"?: string;
+    /** ID of the element that labels the navigation landmark. Takes precedence over `aria-label`. */
+    "aria-labelledby"?: string;
 }
-export declare const Pagination: ({ total, pageSize, current, onChange, onPageSizeChange, siblingCount, className, asChild, children, renderPage, hideOnSinglePage, simple, showSizeChanger, pageSizeOptions, showTotal, showQuickJumper, labels, }: PaginationProps) => React.JSX.Element | null;
+export declare const Pagination: ({ total, pageSize, current, onChange, onPageSizeChange, siblingCount, className, asChild, children, renderPage, hideOnSinglePage, simple, showSizeChanger, pageSizeOptions, showTotal, showQuickJumper, labels, "aria-label": ariaLabelAttr, "aria-labelledby": ariaLabelledBy, }: PaginationProps) => React.JSX.Element | null;
 export default Pagination;