wimui 0.63.5 → 0.64.0

package/dist/components/data-display/Carousel/Carousel.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/components.cjs"),i=require("../../../icon/chevron-left.cjs"),ee=require("../../../icon/chevron-right.cjs"),a=require("../../media/Icon/Icon.cjs"),o=require("./carousel.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,t)=>typeof e==`number`?e:e?t>=1280&&e.xl?e.xl:t>=1024&&e.lg?e.lg:t>=768&&e.md?e.md:t>=640&&e.sm?e.sm:e.base||1:1,d=(0,s.forwardRef)(({children:e,autoPlay:d=!1,interval:f=5e3,showIndicators:p=!0,showControls:m=!0,controlsPlacement:h=`overlay`,loop:g=!0,slidesToShow:_=1,aspectRatio:v,objectFit:y=`cover`,labels:b,className:x,asChild:S,...C},w)=>{let T=S?t.Root:`div`,{t:E}=n.useWimTranslation(r.componentsNs),D={slideLabel:e=>E(`carousel.slide`,{number:e}),prevSlide:E(`carousel.prev_slide`),nextSlide:E(`carousel.next_slide`),goToSlide:e=>E(`carousel.go_to_slide`,{number:e}),...b},O=S&&s.default.isValidElement(e)?e.props.children:e,k=(0,s.useMemo)(()=>s.default.Children.toArray(O),[O]),A=k.length,[te,j]=(0,s.useState)(typeof window<`u`?window.innerWidth:0),[M,N]=(0,s.useState)(g?A:0),[P,F]=(0,s.useState)(!1),[I,L]=(0,s.useState)(!1),R=u(_,te),z=(0,s.useRef)(null),B=(0,s.useRef)(null),V=(0,s.useRef)(null),H=(0,s.useRef)(null);(0,s.useEffect)(()=>{let e=()=>j(window.innerWidth);return window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[]);let U=(0,s.useMemo)(()=>!g||A===0?k:[...k,...k,...k],[k,g,A]),W=(0,s.useCallback)(()=>{if(!P){if(!g){N(e=>Math.min(e+1,A-R));return}F(!0),N(e=>e+1)}},[P,g,A,R]),G=(0,s.useCallback)(()=>{if(!P){if(!g){N(e=>Math.max(e-1,0));return}F(!0),N(e=>e-1)}},[P,g]),K=e=>{P||(g?(F(!0),N(e+A)):N(e))},q=()=>{g&&(F(!1),M>=A*2?N(M-A):M<A&&N(M+A))};(0,s.useEffect)(()=>(d&&!I&&A>R&&(z.current=window.setInterval(W,f)),()=>{z.current&&window.clearInterval(z.current)}),[d,f,W,A,R,I]);let J=e=>{e.key===`ArrowLeft`?G():e.key===`ArrowRight`&&W()},Y=e=>{V.current=e.targetTouches[0].clientX},X=e=>{H.current=e.targetTouches[0].clientX},Z=()=>{if(!V.current||!H.current)return;let e=V.current-H.current;e>50?W():e<-50&&G(),V.current=null,H.current=null};if(A===0)return null;let Q=100/R,ne=-M*Q,$=(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(`div`,{className:o.default.viewport,children:(0,l.jsx)(`div`,{ref:B,className:(0,c.default)(o.default.track,P&&o.default.transition),style:{transform:`translateX(${ne}%)`},onTransitionEnd:q,onTouchStart:Y,onTouchMove:X,onTouchEnd:Z,children:U.map((e,t)=>(0,l.jsx)(`div`,{className:(0,c.default)(o.default.item,v&&o.default.hasAspectRatio),style:{flex:`0 0 ${Q}%`,width:`${Q}%`,...v?{aspectRatio:v,"--wim-carousel-object-fit":y}:{}},role:`group`,"aria-roledescription":E(`carousel.slide_roledescription`),"aria-label":D.slideLabel(t%A+1),children:e},t))})}),m&&A>R&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(`button`,{className:(0,c.default)(o.default.control,o.default.prev),onClick:G,"aria-label":D.prevSlide,disabled:!g&&M===0,tabIndex:-1,children:(0,l.jsx)(a.Icon,{component:i.default,size:`md`})}),(0,l.jsx)(`button`,{className:(0,c.default)(o.default.control,o.default.next),onClick:W,"aria-label":D.nextSlide,disabled:!g&&M>=A-R,tabIndex:-1,children:(0,l.jsx)(a.Icon,{component:ee.default,size:`md`})})]}),p&&A>1&&(0,l.jsx)(`div`,{className:o.default.indicators,children:k.map((e,t)=>{let n=g?M%A===t:M===t;return(0,l.jsx)(`button`,{className:(0,c.default)(o.default.indicator,n&&o.default.active),onClick:()=>K(t),"aria-label":D.goToSlide(t+1),"aria-current":n?`true`:`false`},t)})})]});return(0,l.jsx)(T,{ref:w,className:(0,c.default)(`wim-carousel`,o.default.root,h===`outside`&&o.default.controlsOutside,x),onMouseEnter:()=>L(!0),onMouseLeave:()=>L(!1),onFocus:()=>L(!0),onBlur:()=>L(!1),onKeyDown:J,tabIndex:0,role:`region`,"aria-roledescription":E(`carousel.roledescription`),...C,children:S?(0,l.jsx)(t.Slottable,{child:e,children:()=>$}):$})});d.displayName=`Carousel`,exports.Carousel=d;
+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("../../../hooks/useMergedRef.cjs"),i=require("../../layout/VisuallyHidden/VisuallyHidden.cjs"),ee=require("../../../i18n/generated/components.cjs"),a=require("../../../icon/chevron-left.cjs"),te=require("../../../icon/chevron-right.cjs"),o=require("../../media/Icon/Icon.cjs"),s=require("./carousel.module.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=(e,t)=>typeof e==`number`?e:e?t>=1280&&e.xl?e.xl:t>=1024&&e.lg?e.lg:t>=768&&e.md?e.md:t>=640&&e.sm?e.sm:e.base||1:1,f=(0,c.forwardRef)(({children:e,autoPlay:f=!1,interval:p=5e3,showIndicators:m=!0,showControls:ne=!0,controlsPlacement:re=`overlay`,loop:h=!0,slidesToShow:g=1,aspectRatio:_,objectFit:v=`cover`,labels:y,className:b,asChild:x,...ie},ae)=>{let oe=x?t.Root:`div`,{t:S}=n.useWimTranslation(ee.componentsNs),C={slideLabel:e=>S(`carousel.slide`,{number:e}),prevSlide:S(`carousel.prev_slide`),nextSlide:S(`carousel.next_slide`),goToSlide:e=>S(`carousel.go_to_slide`,{number:e}),slideStatus:(e,t)=>S(`carousel.slide_status`,{current:e,total:t}),...y},w=x&&c.default.isValidElement(e)?e.props.children:e,T=(0,c.useMemo)(()=>c.default.Children.toArray(w),[w]),E=T.length,[D,O]=(0,c.useState)(typeof window<`u`?window.innerWidth:0),[k,A]=(0,c.useState)(h?E:0),[j,M]=(0,c.useState)(!1),[N,P]=(0,c.useState)(!1),F=d(g,D),I=(0,c.useRef)(null),L=(0,c.useRef)(null),R=(0,c.useRef)(null),z=(0,c.useRef)(null),B=(0,c.useRef)(null),V=(0,c.useRef)(null),H=(0,c.useRef)(null),U=r.useMergedRef(ae,H);(0,c.useEffect)(()=>{let e=()=>O(window.innerWidth);return window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[]);let W=(0,c.useMemo)(()=>!h||E===0?T:[...T,...T,...T],[T,h,E]),G=(0,c.useCallback)(()=>{if(!j){if(!h){A(e=>Math.min(e+1,E-F));return}M(!0),A(e=>e+1)}},[j,h,E,F]),K=(0,c.useCallback)(()=>{if(!j){if(!h){A(e=>Math.max(e-1,0));return}M(!0),A(e=>e-1)}},[j,h]),se=e=>{j||(h?(M(!0),A(e+E)):A(e))},ce=()=>{h&&(M(!1),k>=E*2?A(k-E):k<E&&A(k+E))};(0,c.useEffect)(()=>(f&&!N&&E>F&&(I.current=window.setInterval(G,p)),()=>{I.current&&window.clearInterval(I.current)}),[f,p,G,E,F,N]);let[le,ue]=(0,c.useState)(``),q=h?k%E:k,J=h?E-1:Math.max(E-F,0),Y=e=>{j||e===q||ue(C.slideStatus(e+1,E))},de=e=>{Y(e),se(e)},X=()=>{let e=h?(q-1+E)%E:Math.max(q-1,0);Y(e),!h&&e===0&&document.activeElement===B.current&&H.current?.focus(),K()},Z=()=>{let e=h?(q+1)%E:Math.min(q+1,J);Y(e),!h&&e===J&&document.activeElement===V.current&&H.current?.focus(),G()},fe=e=>{e.key===`ArrowLeft`?X():e.key===`ArrowRight`&&Z()},pe=e=>{R.current=e.targetTouches[0].clientX},me=e=>{z.current=e.targetTouches[0].clientX},he=()=>{if(!R.current||!z.current)return;let e=R.current-z.current;e>50?G():e<-50&&K(),R.current=null,z.current=null};if(E===0)return null;let Q=100/F,ge=-k*Q,$=(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(i.VisuallyHidden,{role:`status`,"aria-atomic":`true`,children:le}),(0,u.jsx)(`div`,{className:s.default.viewport,children:(0,u.jsx)(`div`,{ref:L,className:(0,l.default)(s.default.track,j&&s.default.transition),style:{transform:`translateX(${ge}%)`},onTransitionEnd:ce,onTouchStart:pe,onTouchMove:me,onTouchEnd:he,children:W.map((e,t)=>(0,u.jsx)(`div`,{className:(0,l.default)(s.default.item,_&&s.default.hasAspectRatio),style:{flex:`0 0 ${Q}%`,width:`${Q}%`,..._?{aspectRatio:_,"--wim-carousel-object-fit":v}:{}},role:`group`,"aria-roledescription":S(`carousel.slide_roledescription`),"aria-label":C.slideLabel(t%E+1),children:e},t))})}),ne&&E>F&&(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(`button`,{ref:B,className:(0,l.default)(s.default.control,s.default.prev),onClick:X,"aria-label":C.prevSlide,disabled:!h&&k===0,children:(0,u.jsx)(o.Icon,{component:a.default,size:`md`})}),(0,u.jsx)(`button`,{ref:V,className:(0,l.default)(s.default.control,s.default.next),onClick:Z,"aria-label":C.nextSlide,disabled:!h&&k>=E-F,children:(0,u.jsx)(o.Icon,{component:te.default,size:`md`})})]}),m&&E>1&&(0,u.jsx)(`div`,{className:s.default.indicators,children:T.map((e,t)=>{let n=h?k%E===t:k===t;return(0,u.jsx)(`button`,{className:(0,l.default)(s.default.indicator,n&&s.default.active),onClick:()=>de(t),"aria-label":C.goToSlide(t+1),"aria-current":n?`true`:`false`},t)})})]});return(0,u.jsx)(oe,{ref:U,className:(0,l.default)(`wim-carousel`,s.default.root,re===`outside`&&s.default.controlsOutside,b),onMouseEnter:()=>P(!0),onMouseLeave:()=>P(!1),onFocus:()=>P(!0),onBlur:()=>P(!1),onKeyDown:fe,tabIndex:0,role:`region`,"aria-roledescription":S(`carousel.roledescription`),...ie,children:x?(0,u.jsx)(t.Slottable,{child:e,children:()=>$}):$})});f.displayName=`Carousel`,exports.Carousel=f;

package/dist/components/data-display/Carousel/Carousel.d.ts

@@ -11,6 +11,8 @@ export type CarouselLabels = {
     prevSlide?: string;
     nextSlide?: string;
     goToSlide?: (number: number) => string;
+    /** Announced to screen readers when the user changes the slide. Receives the slide number and the slide count. */
+    slideStatus?: (current: number, total: number) => string;
 };
 export type CarouselProps = {
     /** Content of the carousel */

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

@@ -1,163 +1,184 @@
 "use client";
 import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
 import { useWimTranslation as n } from "../../../i18n/useWimTranslation.js";
-import { componentsNs as ee } from "../../../i18n/generated/components.js";
-import te from "../../../icon/chevron-left.js";
-import r from "../../../icon/chevron-right.js";
+import { useMergedRef as ee } from "../../../hooks/useMergedRef.js";
+import { VisuallyHidden as te } from "../../layout/VisuallyHidden/VisuallyHidden.js";
+import { componentsNs as r } from "../../../i18n/generated/components.js";
+import ne from "../../../icon/chevron-left.js";
+import re from "../../../icon/chevron-right.js";
 import { Icon as i } from "../../media/Icon/Icon.js";
 import a from "./carousel.module.js";
 import o, { forwardRef as s, useCallback as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
 import p from "classnames";
 import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/data-display/Carousel/Carousel.tsx
-var _ = (e, t) => typeof e == "number" ? e : e ? t >= 1280 && e.xl ? e.xl : t >= 1024 && e.lg ? e.lg : t >= 768 && e.md ? e.md : t >= 640 && e.sm ? e.sm : e.base || 1 : 1, v = s(({ children: s, autoPlay: v = !1, interval: y = 5e3, showIndicators: ne = !0, showControls: b = !0, controlsPlacement: x = "overlay", loop: S = !0, slidesToShow: C = 1, aspectRatio: w, objectFit: T = "cover", labels: E, className: D, asChild: O, ...k }, A) => {
-	let j = O ? e : "div", { t: M } = n(ee), N = {
-		slideLabel: (e) => M("carousel.slide", { number: e }),
-		prevSlide: M("carousel.prev_slide"),
-		nextSlide: M("carousel.next_slide"),
-		goToSlide: (e) => M("carousel.go_to_slide", { number: e }),
-		...E
-	}, P = O && o.isValidElement(s) ? s.props.children : s, F = u(() => o.Children.toArray(P), [P]), I = F.length, [re, ie] = f(typeof window < "u" ? window.innerWidth : 0), [L, R] = f(S ? I : 0), [z, B] = f(!1), [V, H] = f(!1), U = _(C, re), W = d(null), G = d(null), K = d(null), q = d(null);
+var ie = (e, t) => typeof e == "number" ? e : e ? t >= 1280 && e.xl ? e.xl : t >= 1024 && e.lg ? e.lg : t >= 768 && e.md ? e.md : t >= 640 && e.sm ? e.sm : e.base || 1 : 1, _ = s(({ children: s, autoPlay: _ = !1, interval: v = 5e3, showIndicators: ae = !0, showControls: oe = !0, controlsPlacement: se = "overlay", loop: y = !0, slidesToShow: ce = 1, aspectRatio: b, objectFit: le = "cover", labels: ue, className: x, asChild: S, ...C }, w) => {
+	let de = S ? e : "div", { t: T } = n(r), E = {
+		slideLabel: (e) => T("carousel.slide", { number: e }),
+		prevSlide: T("carousel.prev_slide"),
+		nextSlide: T("carousel.next_slide"),
+		goToSlide: (e) => T("carousel.go_to_slide", { number: e }),
+		slideStatus: (e, t) => T("carousel.slide_status", {
+			current: e,
+			total: t
+		}),
+		...ue
+	}, D = S && o.isValidElement(s) ? s.props.children : s, O = u(() => o.Children.toArray(D), [D]), k = O.length, [fe, A] = f(typeof window < "u" ? window.innerWidth : 0), [j, M] = f(y ? k : 0), [N, P] = f(!1), [F, I] = f(!1), L = ie(ce, fe), R = d(null), z = d(null), B = d(null), V = d(null), H = d(null), U = d(null), W = d(null), pe = ee(w, W);
 	l(() => {
-		let e = () => ie(window.innerWidth);
+		let e = () => A(window.innerWidth);
 		return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
 	}, []);
-	let J = u(() => !S || I === 0 ? F : [
-		...F,
-		...F,
-		...F
+	let me = u(() => !y || k === 0 ? O : [
+		...O,
+		...O,
+		...O
 	], [
-		F,
-		S,
-		I
-	]), Y = c(() => {
-		if (!z) {
-			if (!S) {
-				R((e) => Math.min(e + 1, I - U));
+		O,
+		y,
+		k
+	]), G = c(() => {
+		if (!N) {
+			if (!y) {
+				M((e) => Math.min(e + 1, k - L));
 				return;
 			}
-			B(!0), R((e) => e + 1);
+			P(!0), M((e) => e + 1);
 		}
 	}, [
-		z,
-		S,
-		I,
-		U
-	]), X = c(() => {
-		if (!z) {
-			if (!S) {
-				R((e) => Math.max(e - 1, 0));
+		N,
+		y,
+		k,
+		L
+	]), K = c(() => {
+		if (!N) {
+			if (!y) {
+				M((e) => Math.max(e - 1, 0));
 				return;
 			}
-			B(!0), R((e) => e - 1);
+			P(!0), M((e) => e - 1);
 		}
-	}, [z, S]), ae = (e) => {
-		z || (S ? (B(!0), R(e + I)) : R(e));
-	}, oe = () => {
-		S && (B(!1), L >= I * 2 ? R(L - I) : L < I && R(L + I));
+	}, [N, y]), he = (e) => {
+		N || (y ? (P(!0), M(e + k)) : M(e));
+	}, ge = () => {
+		y && (P(!1), j >= k * 2 ? M(j - k) : j < k && M(j + k));
 	};
-	l(() => (v && !V && I > U && (W.current = window.setInterval(Y, y)), () => {
-		W.current && window.clearInterval(W.current);
+	l(() => (_ && !F && k > L && (R.current = window.setInterval(G, v)), () => {
+		R.current && window.clearInterval(R.current);
 	}), [
+		_,
 		v,
-		y,
-		Y,
-		I,
-		U,
-		V
+		G,
+		k,
+		L,
+		F
 	]);
-	let Z = (e) => {
-		e.key === "ArrowLeft" ? X() : e.key === "ArrowRight" && Y();
-	}, se = (e) => {
-		K.current = e.targetTouches[0].clientX;
-	}, ce = (e) => {
-		q.current = e.targetTouches[0].clientX;
-	}, le = () => {
-		if (!K.current || !q.current) return;
-		let e = K.current - q.current;
-		e > 50 ? Y() : e < -50 && X(), K.current = null, q.current = null;
+	let [_e, ve] = f(""), q = y ? j % k : j, J = y ? k - 1 : Math.max(k - L, 0), Y = (e) => {
+		N || e === q || ve(E.slideStatus(e + 1, k));
+	}, ye = (e) => {
+		Y(e), he(e);
+	}, X = () => {
+		let e = y ? (q - 1 + k) % k : Math.max(q - 1, 0);
+		Y(e), !y && e === 0 && document.activeElement === H.current && W.current?.focus(), K();
+	}, Z = () => {
+		let e = y ? (q + 1) % k : Math.min(q + 1, J);
+		Y(e), !y && e === J && document.activeElement === U.current && W.current?.focus(), G();
+	}, be = (e) => {
+		e.key === "ArrowLeft" ? X() : e.key === "ArrowRight" && Z();
+	}, xe = (e) => {
+		B.current = e.targetTouches[0].clientX;
+	}, Se = (e) => {
+		V.current = e.targetTouches[0].clientX;
+	}, Ce = () => {
+		if (!B.current || !V.current) return;
+		let e = B.current - V.current;
+		e > 50 ? G() : e < -50 && K(), B.current = null, V.current = null;
 	};
-	if (I === 0) return null;
-	let Q = 100 / U, ue = -L * Q, $ = /* @__PURE__ */ g(m, { children: [
+	if (k === 0) return null;
+	let Q = 100 / L, we = -j * Q, $ = /* @__PURE__ */ g(m, { children: [
+		/* @__PURE__ */ h(te, {
+			role: "status",
+			"aria-atomic": "true",
+			children: _e
+		}),
 		/* @__PURE__ */ h("div", {
 			className: a.viewport,
 			children: /* @__PURE__ */ h("div", {
-				ref: G,
-				className: p(a.track, z && a.transition),
-				style: { transform: `translateX(${ue}%)` },
-				onTransitionEnd: oe,
-				onTouchStart: se,
-				onTouchMove: ce,
-				onTouchEnd: le,
-				children: J.map((e, t) => /* @__PURE__ */ h("div", {
-					className: p(a.item, w && a.hasAspectRatio),
+				ref: z,
+				className: p(a.track, N && a.transition),
+				style: { transform: `translateX(${we}%)` },
+				onTransitionEnd: ge,
+				onTouchStart: xe,
+				onTouchMove: Se,
+				onTouchEnd: Ce,
+				children: me.map((e, t) => /* @__PURE__ */ h("div", {
+					className: p(a.item, b && a.hasAspectRatio),
 					style: {
 						flex: `0 0 ${Q}%`,
 						width: `${Q}%`,
-						...w ? {
-							aspectRatio: w,
-							"--wim-carousel-object-fit": T
+						...b ? {
+							aspectRatio: b,
+							"--wim-carousel-object-fit": le
 						} : {}
 					},
 					role: "group",
-					"aria-roledescription": M("carousel.slide_roledescription"),
-					"aria-label": N.slideLabel(t % I + 1),
+					"aria-roledescription": T("carousel.slide_roledescription"),
+					"aria-label": E.slideLabel(t % k + 1),
 					children: e
 				}, t))
 			})
 		}),
-		b && I > U && /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("button", {
+		oe && k > L && /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("button", {
+			ref: H,
 			className: p(a.control, a.prev),
 			onClick: X,
-			"aria-label": N.prevSlide,
-			disabled: !S && L === 0,
-			tabIndex: -1,
+			"aria-label": E.prevSlide,
+			disabled: !y && j === 0,
 			children: /* @__PURE__ */ h(i, {
-				component: te,
+				component: ne,
 				size: "md"
 			})
 		}), /* @__PURE__ */ h("button", {
+			ref: U,
 			className: p(a.control, a.next),
-			onClick: Y,
-			"aria-label": N.nextSlide,
-			disabled: !S && L >= I - U,
-			tabIndex: -1,
+			onClick: Z,
+			"aria-label": E.nextSlide,
+			disabled: !y && j >= k - L,
 			children: /* @__PURE__ */ h(i, {
-				component: r,
+				component: re,
 				size: "md"
 			})
 		})] }),
-		ne && I > 1 && /* @__PURE__ */ h("div", {
+		ae && k > 1 && /* @__PURE__ */ h("div", {
 			className: a.indicators,
-			children: F.map((e, t) => {
-				let n = S ? L % I === t : L === t;
+			children: O.map((e, t) => {
+				let n = y ? j % k === t : j === t;
 				return /* @__PURE__ */ h("button", {
 					className: p(a.indicator, n && a.active),
-					onClick: () => ae(t),
-					"aria-label": N.goToSlide(t + 1),
+					onClick: () => ye(t),
+					"aria-label": E.goToSlide(t + 1),
 					"aria-current": n ? "true" : "false"
 				}, t);
 			})
 		})
 	] });
-	return /* @__PURE__ */ h(j, {
-		ref: A,
-		className: p("wim-carousel", a.root, x === "outside" && a.controlsOutside, D),
-		onMouseEnter: () => H(!0),
-		onMouseLeave: () => H(!1),
-		onFocus: () => H(!0),
-		onBlur: () => H(!1),
-		onKeyDown: Z,
+	return /* @__PURE__ */ h(de, {
+		ref: pe,
+		className: p("wim-carousel", a.root, se === "outside" && a.controlsOutside, x),
+		onMouseEnter: () => I(!0),
+		onMouseLeave: () => I(!1),
+		onFocus: () => I(!0),
+		onBlur: () => I(!1),
+		onKeyDown: be,
 		tabIndex: 0,
 		role: "region",
-		"aria-roledescription": M("carousel.roledescription"),
-		...k,
-		children: O ? /* @__PURE__ */ h(t, {
+		"aria-roledescription": T("carousel.roledescription"),
+		...C,
+		children: S ? /* @__PURE__ */ h(t, {
 			child: s,
 			children: () => $
 		}) : $
 	});
 });
-v.displayName = "Carousel";
+_.displayName = "Carousel";
 //#endregion
-export { v as Carousel };
+export { _ as Carousel };

package/dist/components/media/Lightbox/Lightbox.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("../../_internal/OverlayBase.cjs"),i=require("../../../i18n/generated/components.cjs"),a=require("../../../icon/chevron-left.cjs"),o=require("../../../icon/chevron-right.cjs"),s=require("../../../icon/close.cjs"),c=require("../../../icon/minus.cjs"),l=require("../../../icon/plus.cjs"),u=require("../Icon/Icon.cjs"),d=require("./lightbox.module.cjs");let f=require("react");f=e.__toESM(f,1);let p=require("classnames");p=e.__toESM(p,1);let m=require("react/jsx-runtime");var h=(0,f.createContext)(void 0),g=()=>{let e=(0,f.useContext)(h);if(!e)throw Error(`Lightbox components must be used within Lightbox`);return e},_=({children:e,open:t,onOpenChange:n,defaultOpen:r=!1,defaultIndex:i=0})=>{let[a,o]=(0,f.useState)(r),[s,c]=(0,f.useState)(i),[l,u]=(0,f.useState)([]),d=t!==void 0,p=d?t:a,g=(0,f.useCallback)(e=>{d||o(e),n?.(e)},[d,n]),_=(0,f.useCallback)(e=>{let t=-1;return u(n=>(t=n.length,[...n,e])),t},[]),v=(0,f.useCallback)(e=>{},[]);return(0,m.jsx)(h.Provider,{value:{open:p,setOpen:g,currentIndex:s,setCurrentIndex:c,items:l,setItems:u,registerItem:_,unregisterItem:v},children:e})},v=({children:e,className:r,onClick:a,asChild:o=!1,index:s,src:c,alt:l,caption:u,...f})=>{let{setOpen:h,setCurrentIndex:_,items:v,setItems:y}=g(),{t:b}=n.useWimTranslation(i.componentsNs),x=e=>{if(a?.(e),s!==void 0)_(s);else if(c){let e=v.findIndex(e=>e.src===c);if(e!==-1)_(e);else{let e=v.length;y(e=>[...e,{src:c,alt:l,caption:u}]),_(e)}}h(!0)},S=o?t.Root:`button`,C=s===void 0?void 0:v[s]?.alt,w=f[`aria-label`]!==void 0||f[`aria-labelledby`]!==void 0,T=l??C,E=w?void 0:T?b(`lightbox.open_named`,{name:T}):b(`lightbox.open`);return(0,m.jsx)(S,{type:`button`,className:(0,p.default)(d.default.trigger,r),onClick:x,"aria-label":E,...f,children:(0,m.jsx)(t.Slottable,{children:e})})},y=({className:e,showCloseButton:t=!0,showNavigation:h=!0,showCounter:_=!0,closeOnOverlayClick:v=!0,...y})=>{let{open:b,setOpen:x,currentIndex:S,setCurrentIndex:C,items:w}=g(),{t:T}=n.useWimTranslation(i.componentsNs),[E,D]=(0,f.useState)(1),O=(0,f.useCallback)(()=>{C((S-1+w.length)%w.length),D(1)},[S,w.length,C]),k=(0,f.useCallback)(()=>{C((S+1)%w.length),D(1)},[S,w.length,C]),A=()=>{D(e=>e===1?2:1)};(0,f.useEffect)(()=>{if(!b)return;let e=e=>{e.key===`ArrowLeft`&&O(),e.key===`ArrowRight`&&k(),e.key===`Escape`&&x(!1)};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[b,O,k,x]);let j=w[S];return j?(0,m.jsx)(r.OverlayBase,{...y,open:b,onOpenChange:x,closeOnOverlayClick:v,overlayClassName:d.default.overlay,className:(0,p.default)(`wim-lightbox`,d.default.contentRoot,e),"aria-label":y[`aria-labelledby`]?void 0:y[`aria-label`]??(j.title||j.alt||T(`lightbox.dialog`)),transitionProps:{preset:`fade`,enter:d.default.contentEnter,enterFrom:d.default.contentEnterFrom,enterTo:d.default.contentEnterTo},children:(0,m.jsxs)(`div`,{className:d.default.container,children:[(0,m.jsxs)(`div`,{className:d.default.header,children:[_&&w.length>1&&(0,m.jsx)(`div`,{className:d.default.counter,children:T(`lightbox.counter`,{current:S+1,total:w.length})}),(0,m.jsxs)(`div`,{className:d.default.controls,children:[(0,m.jsx)(`button`,{className:d.default.iconButton,onClick:A,"aria-label":T(E>1?`lightbox.zoom_out`:`lightbox.zoom_in`),children:E>1?(0,m.jsx)(u.Icon,{component:c.default}):(0,m.jsx)(u.Icon,{component:l.default})}),t&&(0,m.jsx)(`button`,{className:d.default.iconButton,onClick:()=>x(!1),"aria-label":T(`lightbox.close`),children:(0,m.jsx)(u.Icon,{component:s.default})})]})]}),(0,m.jsxs)(`div`,{className:d.default.viewport,children:[h&&w.length>1&&(0,m.jsx)(`button`,{className:(0,p.default)(d.default.navButton,d.default.prev),onClick:O,"aria-label":T(`lightbox.previous`),children:(0,m.jsx)(u.Icon,{component:a.default})}),(0,m.jsx)(`div`,{className:d.default.mediaWrapper,style:{transform:`scale(${E})`},children:(0,m.jsx)(`img`,{src:j.src,alt:j.alt||``,className:d.default.image})}),h&&w.length>1&&(0,m.jsx)(`button`,{className:(0,p.default)(d.default.navButton,d.default.next),onClick:k,"aria-label":T(`lightbox.next`),children:(0,m.jsx)(u.Icon,{component:o.default})})]}),(j.title||j.caption)&&(0,m.jsxs)(`div`,{className:d.default.footer,children:[j.title&&(0,m.jsx)(`h3`,{className:d.default.title,children:j.title}),j.caption&&(0,m.jsx)(`p`,{className:d.default.caption,children:j.caption})]})]})}):null},b=({items:e,children:t})=>{let{setItems:n}=g();return(0,f.useEffect)(()=>{n(e)},[e,n]),(0,m.jsx)(`div`,{className:d.default.gallery,children:t})},x=_;x.Trigger=v,x.Content=y,x.Gallery=b,x.displayName=`Lightbox`,v.displayName=`Lightbox.Trigger`,y.displayName=`Lightbox.Content`,b.displayName=`Lightbox.Gallery`,exports.Lightbox=_,exports.LightboxContent=y,exports.LightboxGallery=b,exports.LightboxRoot=x,exports.default=x,exports.LightboxTrigger=v,exports.useLightbox=g;
+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("../../_internal/OverlayBase.cjs"),i=require("../../layout/VisuallyHidden/VisuallyHidden.cjs"),a=require("../../../i18n/generated/components.cjs"),o=require("../../../icon/chevron-left.cjs"),s=require("../../../icon/chevron-right.cjs"),c=require("../../../icon/close.cjs"),l=require("../../../icon/minus.cjs"),u=require("../../../icon/plus.cjs"),d=require("../Icon/Icon.cjs"),f=require("./lightbox.module.cjs");let p=require("react");p=e.__toESM(p,1);let m=require("classnames");m=e.__toESM(m,1);let h=require("react/jsx-runtime");var g=(0,p.createContext)(void 0),_=()=>{let e=(0,p.useContext)(g);if(!e)throw Error(`Lightbox components must be used within Lightbox`);return e},v=({children:e,open:t,onOpenChange:n,defaultOpen:r=!1,defaultIndex:i=0})=>{let[a,o]=(0,p.useState)(r),[s,c]=(0,p.useState)(i),[l,u]=(0,p.useState)([]),d=t!==void 0,f=d?t:a,m=(0,p.useCallback)(e=>{d||o(e),n?.(e)},[d,n]),_=(0,p.useCallback)(e=>{let t=-1;return u(n=>(t=n.length,[...n,e])),t},[]),v=(0,p.useCallback)(e=>{},[]);return(0,h.jsx)(g.Provider,{value:{open:f,setOpen:m,currentIndex:s,setCurrentIndex:c,items:l,setItems:u,registerItem:_,unregisterItem:v},children:e})},y=({children:e,className:r,onClick:i,asChild:o=!1,index:s,src:c,alt:l,caption:u,...d})=>{let{setOpen:p,setCurrentIndex:g,items:v,setItems:y}=_(),{t:b}=n.useWimTranslation(a.componentsNs),x=e=>{if(i?.(e),s!==void 0)g(s);else if(c){let e=v.findIndex(e=>e.src===c);if(e!==-1)g(e);else{let e=v.length;y(e=>[...e,{src:c,alt:l,caption:u}]),g(e)}}p(!0)},S=o?t.Root:`button`,C=s===void 0?void 0:v[s]?.alt,w=d[`aria-label`]!==void 0||d[`aria-labelledby`]!==void 0,T=l??C,E=w?void 0:T?b(`lightbox.open_named`,{name:T}):b(`lightbox.open`);return(0,h.jsx)(S,{type:`button`,className:(0,m.default)(f.default.trigger,r),onClick:x,"aria-label":E,...d,children:(0,h.jsx)(t.Slottable,{children:e})})},b=({className:e,showCloseButton:t=!0,showNavigation:g=!0,showCounter:v=!0,closeOnOverlayClick:y=!0,...b})=>{let{open:x,setOpen:S,currentIndex:C,setCurrentIndex:w,items:T}=_(),{t:E}=n.useWimTranslation(a.componentsNs),[D,O]=(0,p.useState)(1),[k,A]=(0,p.useState)(``);!x&&k&&A(``);let j=(0,p.useCallback)(e=>{let t=T[e],n=t?.title||t?.alt,r=E(`lightbox.image_status`,{current:e+1,total:T.length});A(n?`${r}: ${n}`:r),w(e),O(1)},[T,w,E]),M=(0,p.useCallback)(()=>{j((C-1+T.length)%T.length)},[C,T.length,j]),N=(0,p.useCallback)(()=>{j((C+1)%T.length)},[C,T.length,j]),P=()=>{O(e=>e===1?2:1)};(0,p.useEffect)(()=>{if(!x)return;let e=e=>{e.key===`ArrowLeft`&&M(),e.key===`ArrowRight`&&N(),e.key===`Escape`&&S(!1)};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[x,M,N,S]);let F=T[C];return F?(0,h.jsx)(r.OverlayBase,{...b,open:x,onOpenChange:S,closeOnOverlayClick:y,overlayClassName:f.default.overlay,className:(0,m.default)(`wim-lightbox`,f.default.contentRoot,e),"aria-label":b[`aria-labelledby`]?void 0:b[`aria-label`]??(F.title||F.alt||E(`lightbox.dialog`)),transitionProps:{preset:`fade`,enter:f.default.contentEnter,enterFrom:f.default.contentEnterFrom,enterTo:f.default.contentEnterTo},children:(0,h.jsxs)(`div`,{className:f.default.container,children:[(0,h.jsx)(i.VisuallyHidden,{role:`status`,"aria-atomic":`true`,children:k}),(0,h.jsxs)(`div`,{className:f.default.header,children:[v&&T.length>1&&(0,h.jsx)(`div`,{className:f.default.counter,children:E(`lightbox.counter`,{current:C+1,total:T.length})}),(0,h.jsxs)(`div`,{className:f.default.controls,children:[(0,h.jsx)(`button`,{className:f.default.iconButton,onClick:P,"aria-label":E(D>1?`lightbox.zoom_out`:`lightbox.zoom_in`),children:D>1?(0,h.jsx)(d.Icon,{component:l.default}):(0,h.jsx)(d.Icon,{component:u.default})}),t&&(0,h.jsx)(`button`,{className:f.default.iconButton,onClick:()=>S(!1),"aria-label":E(`lightbox.close`),children:(0,h.jsx)(d.Icon,{component:c.default})})]})]}),(0,h.jsxs)(`div`,{className:f.default.viewport,children:[g&&T.length>1&&(0,h.jsx)(`button`,{className:(0,m.default)(f.default.navButton,f.default.prev),onClick:M,"aria-label":E(`lightbox.previous`),children:(0,h.jsx)(d.Icon,{component:o.default})}),(0,h.jsx)(`div`,{className:f.default.mediaWrapper,style:{transform:`scale(${D})`},children:(0,h.jsx)(`img`,{src:F.src,alt:F.alt||``,className:f.default.image})}),g&&T.length>1&&(0,h.jsx)(`button`,{className:(0,m.default)(f.default.navButton,f.default.next),onClick:N,"aria-label":E(`lightbox.next`),children:(0,h.jsx)(d.Icon,{component:s.default})})]}),(F.title||F.caption)&&(0,h.jsxs)(`div`,{className:f.default.footer,children:[F.title&&(0,h.jsx)(`h3`,{className:f.default.title,children:F.title}),F.caption&&(0,h.jsx)(`p`,{className:f.default.caption,children:F.caption})]})]})}):null},x=({items:e,children:t})=>{let{setItems:n}=_();return(0,p.useEffect)(()=>{n(e)},[e,n]),(0,h.jsx)(`div`,{className:f.default.gallery,children:t})},S=v;S.Trigger=y,S.Content=b,S.Gallery=x,S.displayName=`Lightbox`,y.displayName=`Lightbox.Trigger`,b.displayName=`Lightbox.Content`,x.displayName=`Lightbox.Gallery`,exports.Lightbox=v,exports.LightboxContent=b,exports.LightboxGallery=x,exports.LightboxRoot=S,exports.default=S,exports.LightboxTrigger=y,exports.useLightbox=_;