wimui 0.58.0 → 0.59.0

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/llms-full.txt

@@ -4,7 +4,7 @@
 
 ## What this is
 
-**wimui** v0.58.0 — a React 19 component library: 228 documented components across 10 categories, with design tokens, dark mode, i18n (en/ja/pt-BR) and WAI-ARIA compliant a11y. Peer deps: react ^19, react-dom ^19 (plus optional peers for specific components — see package.json).
+**wimui** v0.59.0 — a React 19 component library: 228 documented components across 10 categories, with design tokens, dark mode, i18n (en/ja/pt-BR) and WAI-ARIA compliant a11y. Peer deps: react ^19, react-dom ^19 (plus optional peers for specific components — see package.json).
 
 ## Install & required setup
 
@@ -1075,6 +1075,8 @@ so the unit does not have to be repeated in the label.
     - `size: Extract<ComponentSize, "sm" | "md" | "lg">` = "md" — Size of the button
     - `className: string` — Additional class names
     - `aria-label: string` — Accessible label for the button
+    - `aria-labelledby: string` — ID of the element that labels the button. Takes precedence over `aria-label`.
+    - `aria-describedby: string` — ID of the element that describes the button.
     - `copyLabel: string` — Tooltip label before copying
     - `copiedLabel: string` — Tooltip label after copying
     - `asChild: boolean` = false — Whether to render as a child element.
@@ -1178,6 +1180,9 @@ them. Leave it undefined to let the area track its own selection.
     - `required: boolean` — Whether to show the required indicator
     - `layout: "vertical" | "horizontal"` = "vertical" — Layout direction of label and field
     - `size: InteractiveAreaProps["size"]` = "md" — Size of the drop area
+    - `aria-label: string` — Accessible name for the drop area when no visible `label` is provided.
+    - `aria-labelledby: string` — ID of the element that labels the drop area when no visible `label` is provided.
+    - `aria-describedby: string` — ID of the element that describes the drop area. Announced together with the error message.
 - **FieldError** — Validation messages
     - `content: string` (required) — Error message text
     - `className: string` — Additional class names
@@ -1225,6 +1230,9 @@ it undefined to let the field track its own selection.
     - `error: string` — Error message
     - `required: boolean` — Whether to show the required indicator
     - `layout: "vertical" | "horizontal"` = "vertical" — Layout direction of label and field
+    - `aria-label: string` — Accessible name for the choose-file button when no visible `label` is provided.
+    - `aria-labelledby: string` — ID of the element that labels the choose-file button when no visible `label` is provided.
+    - `aria-describedby: string` — ID of the element that describes the choose-file button. Announced together with the error message.
 - **FloatButton** — Floating action buttons
     - `asChild: boolean` = false — If true, the button will be rendered as its child, merging its props onto that child.
     - `iconName: "CircleIcon" | "SquareIcon" | "LoadingIcon" | "ExternalLinkIcon" | "ArrowUpIcon" | string` = "CircleIcon" — Icon name from the library
@@ -1507,6 +1515,9 @@ so the unit does not have to be repeated in the label.
     - `className: string` — Additional class name
     - `id: string` — Unique ID for the component
     - `labels: QueryBuilderLabels` = {} — Labels for internationalization
+    - `aria-label: string` — Accessible name for the query builder region. Takes precedence over `labels.regionAriaLabel`.
+    - `aria-labelledby: string` — ID of the element that labels the query builder region. Takes precedence over `aria-label`.
+    - `aria-describedby: string` — ID of the element that describes the query builder region.
 - **Radio** — Single choice
     - `asChild: boolean` = false — Whether to render as a child element.
     - `children: React.ReactNode` — Label content rendered next to the radio
@@ -2134,6 +2145,8 @@ follows the theme and never needs a hand-mixed colour.
     - `className: string` — Additional class names
     - `style: React.CSSProperties` — Style attribute
     - `aria-label: string` — Accessible label for the button
+    - `aria-labelledby: string` — ID of the element that labels the button. Takes precedence over `aria-label`.
+    - `aria-describedby: string` — ID of the element that describes the button.
     - `asChild: boolean` = false — Whether to render as a child element.
 - **Breadcrumb** — Location trace (aka Path Bar, Path Control)
     - `items: BreadcrumbItem[]` (required) — Items to display, from the root to the current page.
@@ -2785,6 +2798,7 @@ anything is measured; long text is truncated and read in full by assistive techn
     - `role: string` = "list" — Role of the whole list (for accessibility)
     - `aria-label: string` — Accessible label
     - `aria-labelledby: string` — ID of the element that labels the list
+    - `aria-describedby: string` — ID of the element that describes the list
 
 ### overlay — `import { … } from "wimui/overlay"`
 

package/dist/llms.txt

@@ -4,7 +4,7 @@
 
 ## What this is
 
-**wimui** v0.58.0 — a React 19 component library: 228 documented components across 10 categories, with design tokens, dark mode, i18n (en/ja/pt-BR) and WAI-ARIA compliant a11y. Peer deps: react ^19, react-dom ^19 (plus optional peers for specific components — see package.json).
+**wimui** v0.59.0 — a React 19 component library: 228 documented components across 10 categories, with design tokens, dark mode, i18n (en/ja/pt-BR) and WAI-ARIA compliant a11y. Peer deps: react ^19, react-dom ^19 (plus optional peers for specific components — see package.json).
 
 ## Install & required setup