wimui 0.53.0 → 0.54.0

package/dist/components/data-display/Kanban/Kanban.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("../../layout/VisuallyHidden/VisuallyHidden.cjs"),a=require("../../../icon/more-horizontal.cjs"),o=require("../../media/Icon/Icon.cjs"),s=require("./kanban.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=(0,c.forwardRef)(({columns:e,onMove:i,onCardMove:a,className:o,forceMobileUI:d=!1,children:p,asChild:m=!1,...g},v)=>{let{t:y}=n.useWimTranslation(r.commonNs),[b,x]=(0,c.useState)(null),[S,C]=(0,c.useState)(null),[w,T]=(0,c.useState)(null),E=i||a,D=(e,t,n)=>{x({itemId:t,columnId:n}),e.dataTransfer.setData(`text/plain`,`${n}:${t}`),e.dataTransfer.effectAllowed=`move`},O=(e,t)=>{e.preventDefault(),C(t)},k=(e,t)=>{e.preventDefault(),C(null);let[n,r]=e.dataTransfer.getData(`text/plain`).split(`:`);E?.(r,n,t),x(null)},A=(e,t,n)=>{E?.(e,t,n),T(null)},j=c.default.useMemo(()=>{if(e)return e;let t=[];return c.default.Children.forEach(p,e=>{if(c.default.isValidElement(e)){let n=e.props;typeof n.id==`string`&&typeof n.title==`string`&&t.push({id:n.id,title:n.title,items:[]})}}),t},[p,e]),M=()=>p||(e?e.map(e=>(0,u.jsx)(_,{id:e.id,title:e.title,cardCount:e.items.length,children:e.items.map(e=>(0,u.jsx)(h,{id:e.id,children:e.content},e.id))},e.id)):null),N=m?t.Root:`div`;return(0,u.jsx)(f.Provider,{value:{draggedItem:b,dragOverColumn:S,setDragOverColumn:C,handleDragStart:D,handleDragOver:O,handleDrop:k,handleMobileMove:A,activeMobileMenu:w,setActiveMobileMenu:T,columns:j},children:(0,u.jsx)(N,{...g,ref:v,className:(0,l.default)(`wim-kanban`,s.default.root,d&&s.default.touch,o),role:`region`,"aria-label":y(`a11y.kanban_board`),tabIndex:0,children:(0,u.jsx)(t.Slottable,{children:M()})})})}),f=c.default.createContext(null),p=()=>{let e=c.default.useContext(f);if(!e)throw Error(`Kanban compound components must be used within Kanban`);return e},m=({id:e,title:t,cardCount:a,children:o,className:d})=>{let{dragOverColumn:f,handleDragOver:m,handleDrop:h,setDragOverColumn:g}=p(),{t:_}=n.useWimTranslation(r.commonNs),v=c.default.useId();return(0,u.jsxs)(`div`,{className:(0,l.default)(s.default.column,{[s.default.dragOver]:f===e},d),role:`group`,"aria-labelledby":t?v:void 0,onDragOver:t=>m(t,e),onDrop:t=>h(t,e),onDragLeave:()=>g(null),children:[(0,u.jsxs)(`div`,{className:s.default.columnHeader,children:[(0,u.jsx)(`div`,{id:v,className:s.default.columnTitle,"aria-hidden":`true`,children:t}),a!==void 0&&(0,u.jsxs)(`div`,{className:s.default.columnCount,children:[(0,u.jsx)(`span`,{"aria-hidden":`true`,children:a}),(0,u.jsx)(i.VisuallyHidden,{children:_(`a11y.kanban_column_count`,{count:a})})]})]}),(0,u.jsx)(`div`,{className:s.default.columnBody,children:o})]})},h=({id:e,children:t,disabled:i,className:d})=>{let{t:f}=n.useWimTranslation(r.commonNs),{draggedItem:m,handleDragStart:h,handleMobileMove:_,activeMobileMenu:v,setActiveMobileMenu:y,columns:b}=p(),x=c.default.useContext(g);return(0,u.jsxs)(`div`,{className:(0,l.default)(s.default.card,{[s.default.dragging]:m?.itemId===e,[s.default.disabled]:i},d),draggable:!i,onDragStart:t=>x&&h(t,e,x),children:[(0,u.jsx)(`div`,{className:s.default.cardContent,children:t}),(0,u.jsxs)(`div`,{className:s.default.cardMove,children:[(0,u.jsx)(`button`,{type:`button`,className:s.default.cardMoveBtn,onClick:()=>y(v===e?null:e),"aria-label":f(`a11y.move_card`),disabled:i,children:(0,u.jsx)(o.Icon,{component:a.default,size:`sm`})}),v===e&&(0,u.jsx)(`div`,{className:s.default.cardMoveMenu,role:`listbox`,"aria-label":f(`a11y.move_to_column`),children:b.filter(e=>e.id!==x).map(t=>(0,u.jsx)(`button`,{type:`button`,className:s.default.cardMoveOption,onClick:()=>x&&_(e,x,t.id),role:`option`,"aria-selected":!1,children:t.title},t.id))})]})]})},g=c.default.createContext(null),_=e=>(0,u.jsx)(g.Provider,{value:e.id,children:(0,u.jsx)(m,{...e})}),v=d;v.Column=_,v.Card=h,d.displayName=`Kanban`,v.displayName=`KanbanBoard`,m.displayName=`KanbanColumn`,h.displayName=`KanbanCard`,_.displayName=`KanbanColumnWrapper`,exports.Kanban=d,exports.KanbanBoard=v,exports.default=v,exports.KanbanCard=h,exports.KanbanColumn=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("../../layout/VisuallyHidden/VisuallyHidden.cjs"),a=require("../../../icon/more-horizontal.cjs"),o=require("../../media/Icon/Icon.cjs"),s=require("./kanban.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=(0,c.forwardRef)(({columns:e,onMove:i,onCardMove:a,className:o,forceMobileUI:d=!1,children:p,asChild:m=!1,...g},_)=>{let{t:y}=n.useWimTranslation(r.commonNs),[b,x]=(0,c.useState)(null),[S,C]=(0,c.useState)(null),[w,T]=(0,c.useState)(null),E=i||a,D=(e,t,n)=>{x({itemId:t,columnId:n}),e.dataTransfer.setData(`text/plain`,`${n}:${t}`),e.dataTransfer.effectAllowed=`move`},O=(e,t)=>{e.preventDefault(),C(t)},k=(e,t)=>{e.preventDefault(),C(null);let[n,r]=e.dataTransfer.getData(`text/plain`).split(`:`);E?.(r,n,t),x(null)},A=(e,t,n)=>{E?.(e,t,n),T(null)},j=c.default.useMemo(()=>{if(e)return e;let t=[];return c.default.Children.forEach(p,e=>{if(c.default.isValidElement(e)){let n=e.props;typeof n.id==`string`&&typeof n.title==`string`&&t.push({id:n.id,title:n.title,items:[]})}}),t},[p,e]),M=()=>p||(e?e.map(e=>(0,u.jsx)(v,{id:e.id,title:e.title,cardCount:e.items.length,children:e.items.map(e=>(0,u.jsx)(h,{id:e.id,children:e.content},e.id))},e.id)):null),N=m?t.Root:`div`;return(0,u.jsx)(f.Provider,{value:{draggedItem:b,dragOverColumn:S,setDragOverColumn:C,handleDragStart:D,handleDragOver:O,handleDrop:k,handleMobileMove:A,activeMobileMenu:w,setActiveMobileMenu:T,columns:j},children:(0,u.jsx)(N,{...g,ref:_,className:(0,l.default)(`wim-kanban`,s.default.root,d&&s.default.touch,o),role:`region`,"aria-label":y(`a11y.kanban_board`),tabIndex:0,children:(0,u.jsx)(t.Slottable,{children:M()})})})}),f=c.default.createContext(null),p=()=>{let e=c.default.useContext(f);if(!e)throw Error(`Kanban compound components must be used within Kanban`);return e},m=({id:e,title:t,cardCount:a,children:o,className:d})=>{let{dragOverColumn:f,handleDragOver:m,handleDrop:g,setDragOverColumn:v}=p(),{t:y}=n.useWimTranslation(r.commonNs),b=c.default.useId(),x=c.default.Children.toArray(o),S=x.length>0&&x.every(e=>c.default.isValidElement(e)&&e.type===h);return(0,u.jsxs)(`div`,{className:(0,l.default)(s.default.column,{[s.default.dragOver]:f===e},d),role:`group`,"aria-labelledby":t?b:void 0,onDragOver:t=>m(t,e),onDrop:t=>g(t,e),onDragLeave:()=>v(null),children:[(0,u.jsxs)(`div`,{className:s.default.columnHeader,children:[(0,u.jsx)(`div`,{id:b,className:s.default.columnTitle,"aria-hidden":`true`,children:t}),a!==void 0&&(0,u.jsxs)(`div`,{className:s.default.columnCount,children:[(0,u.jsx)(`span`,{"aria-hidden":`true`,children:a}),(0,u.jsx)(i.VisuallyHidden,{children:y(`a11y.kanban_column_count`,{count:a})})]})]}),(0,u.jsx)(`div`,{className:s.default.columnBody,role:S?`list`:void 0,children:(0,u.jsx)(_.Provider,{value:S,children:o})})]})},h=({id:e,children:t,disabled:i,className:d})=>{let{t:f}=n.useWimTranslation(r.commonNs),{draggedItem:m,handleDragStart:h,handleMobileMove:v,activeMobileMenu:y,setActiveMobileMenu:b,columns:x}=p(),S=c.default.useContext(g),C=c.default.useContext(_);return(0,u.jsxs)(`div`,{role:C?`listitem`:void 0,className:(0,l.default)(s.default.card,{[s.default.dragging]:m?.itemId===e,[s.default.disabled]:i},d),draggable:!i,onDragStart:t=>S&&h(t,e,S),children:[(0,u.jsx)(`div`,{className:s.default.cardContent,children:t}),(0,u.jsxs)(`div`,{className:s.default.cardMove,children:[(0,u.jsx)(`button`,{type:`button`,className:s.default.cardMoveBtn,onClick:()=>b(y===e?null:e),"aria-label":f(`a11y.move_card`),disabled:i,children:(0,u.jsx)(o.Icon,{component:a.default,size:`sm`})}),y===e&&(0,u.jsx)(`div`,{className:s.default.cardMoveMenu,role:`listbox`,"aria-label":f(`a11y.move_to_column`),children:x.filter(e=>e.id!==S).map(t=>(0,u.jsx)(`button`,{type:`button`,className:s.default.cardMoveOption,onClick:()=>S&&v(e,S,t.id),role:`option`,"aria-selected":!1,children:t.title},t.id))})]})]})},g=c.default.createContext(null),_=c.default.createContext(!1),v=e=>(0,u.jsx)(g.Provider,{value:e.id,children:(0,u.jsx)(m,{...e})}),y=d;y.Column=v,y.Card=h,d.displayName=`Kanban`,y.displayName=`KanbanBoard`,m.displayName=`KanbanColumn`,h.displayName=`KanbanCard`,v.displayName=`KanbanColumnWrapper`,exports.Kanban=d,exports.KanbanBoard=y,exports.default=y,exports.KanbanCard=h,exports.KanbanColumn=m;

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

@@ -11,7 +11,7 @@ import d from "classnames";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/data-display/Kanban/Kanban.tsx
 var m = l(({ columns: i, onMove: a, onCardMove: o, className: l, forceMobileUI: p = !1, children: m, asChild: g = !1, ..._ }, y) => {
-	let { t: x } = n(r), [S, C] = u(null), [w, T] = u(null), [E, D] = u(null), O = a || o, k = (e, t, n) => {
+	let { t: b } = n(r), [S, C] = u(null), [w, T] = u(null), [E, D] = u(null), O = a || o, k = (e, t, n) => {
 		C({
 			itemId: t,
 			columnId: n
@@ -37,7 +37,7 @@ var m = l(({ columns: i, onMove: a, onCardMove: o, className: l, forceMobileUI:
 				});
 			}
 		}), e;
-	}, [m, i]), P = () => m || (i ? i.map((e) => /* @__PURE__ */ f(b, {
+	}, [m, i]), P = () => m || (i ? i.map((e) => /* @__PURE__ */ f(x, {
 		id: e.id,
 		title: e.title,
 		cardCount: e.items.length,
@@ -64,7 +64,7 @@ var m = l(({ columns: i, onMove: a, onCardMove: o, className: l, forceMobileUI:
 			ref: y,
 			className: d("wim-kanban", s.root, p && s.touch, l),
 			role: "region",
-			"aria-label": x("a11y.kanban_board"),
+			"aria-label": b("a11y.kanban_board"),
 			tabIndex: 0,
 			children: /* @__PURE__ */ f(t, { children: P() })
 		})
@@ -74,18 +74,18 @@ var m = l(({ columns: i, onMove: a, onCardMove: o, className: l, forceMobileUI:
 	if (!e) throw Error("Kanban compound components must be used within Kanban");
 	return e;
 }, _ = ({ id: e, title: t, cardCount: a, children: o, className: l }) => {
-	let { dragOverColumn: u, handleDragOver: m, handleDrop: h, setDragOverColumn: _ } = g(), { t: v } = n(r), y = c.useId();
+	let { dragOverColumn: u, handleDragOver: m, handleDrop: h, setDragOverColumn: _ } = g(), { t: y } = n(r), x = c.useId(), S = c.Children.toArray(o), C = S.length > 0 && S.every((e) => c.isValidElement(e) && e.type === v);
 	return /* @__PURE__ */ p("div", {
 		className: d(s.column, { [s.dragOver]: u === e }, l),
 		role: "group",
-		"aria-labelledby": t ? y : void 0,
+		"aria-labelledby": t ? x : void 0,
 		onDragOver: (t) => m(t, e),
 		onDrop: (t) => h(t, e),
 		onDragLeave: () => _(null),
 		children: [/* @__PURE__ */ p("div", {
 			className: s.columnHeader,
 			children: [/* @__PURE__ */ f("div", {
-				id: y,
+				id: x,
 				className: s.columnTitle,
 				"aria-hidden": "true",
 				children: t
@@ -94,22 +94,27 @@ var m = l(({ columns: i, onMove: a, onCardMove: o, className: l, forceMobileUI:
 				children: [/* @__PURE__ */ f("span", {
 					"aria-hidden": "true",
 					children: a
-				}), /* @__PURE__ */ f(i, { children: v("a11y.kanban_column_count", { count: a }) })]
+				}), /* @__PURE__ */ f(i, { children: y("a11y.kanban_column_count", { count: a }) })]
 			})]
 		}), /* @__PURE__ */ f("div", {
 			className: s.columnBody,
-			children: o
+			role: C ? "list" : void 0,
+			children: /* @__PURE__ */ f(b.Provider, {
+				value: C,
+				children: o
+			})
 		})]
 	});
 }, v = ({ id: e, children: t, disabled: i, className: l }) => {
-	let { t: u } = n(r), { draggedItem: m, handleDragStart: h, handleMobileMove: _, activeMobileMenu: v, setActiveMobileMenu: b, columns: x } = g(), S = c.useContext(y);
+	let { t: u } = n(r), { draggedItem: m, handleDragStart: h, handleMobileMove: _, activeMobileMenu: v, setActiveMobileMenu: x, columns: S } = g(), C = c.useContext(y), w = c.useContext(b);
 	return /* @__PURE__ */ p("div", {
+		role: w ? "listitem" : void 0,
 		className: d(s.card, {
 			[s.dragging]: m?.itemId === e,
 			[s.disabled]: i
 		}, l),
 		draggable: !i,
-		onDragStart: (t) => S && h(t, e, S),
+		onDragStart: (t) => C && h(t, e, C),
 		children: [/* @__PURE__ */ f("div", {
 			className: s.cardContent,
 			children: t
@@ -118,7 +123,7 @@ var m = l(({ columns: i, onMove: a, onCardMove: o, className: l, forceMobileUI:
 			children: [/* @__PURE__ */ f("button", {
 				type: "button",
 				className: s.cardMoveBtn,
-				onClick: () => b(v === e ? null : e),
+				onClick: () => x(v === e ? null : e),
 				"aria-label": u("a11y.move_card"),
 				disabled: i,
 				children: /* @__PURE__ */ f(o, {
@@ -129,10 +134,10 @@ var m = l(({ columns: i, onMove: a, onCardMove: o, className: l, forceMobileUI:
 				className: s.cardMoveMenu,
 				role: "listbox",
 				"aria-label": u("a11y.move_to_column"),
-				children: x.filter((e) => e.id !== S).map((t) => /* @__PURE__ */ f("button", {
+				children: S.filter((e) => e.id !== C).map((t) => /* @__PURE__ */ f("button", {
 					type: "button",
 					className: s.cardMoveOption,
-					onClick: () => S && _(e, S, t.id),
+					onClick: () => C && _(e, C, t.id),
 					role: "option",
 					"aria-selected": !1,
 					children: t.title
@@ -140,10 +145,10 @@ var m = l(({ columns: i, onMove: a, onCardMove: o, className: l, forceMobileUI:
 			})]
 		})]
 	});
-}, y = c.createContext(null), b = (e) => /* @__PURE__ */ f(y.Provider, {
+}, y = c.createContext(null), b = c.createContext(!1), x = (e) => /* @__PURE__ */ f(y.Provider, {
 	value: e.id,
 	children: /* @__PURE__ */ f(_, { ...e })
-}), x = m;
-x.Column = b, x.Card = v, m.displayName = "Kanban", x.displayName = "KanbanBoard", _.displayName = "KanbanColumn", v.displayName = "KanbanCard", b.displayName = "KanbanColumnWrapper";
+}), S = m;
+S.Column = x, S.Card = v, m.displayName = "Kanban", S.displayName = "KanbanBoard", _.displayName = "KanbanColumn", v.displayName = "KanbanCard", x.displayName = "KanbanColumnWrapper";
 //#endregion
-export { m as Kanban, x as KanbanBoard, x as default, v as KanbanCard, _ as KanbanColumn };
+export { m as Kanban, S as KanbanBoard, S as default, v as KanbanCard, _ as KanbanColumn };

package/dist/components/navigation/Anchor/Anchor.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("./anchor.module.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("classnames");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=({items:e=[],bounds:a=5,offset:o=0,direction:s=`vertical`,className:c,style:l})=>{let[u,d]=(0,n.useState)(``),[f,p]=(0,n.useState)({}),m=(0,n.useRef)(null),h=(e,t)=>{e.preventDefault();let n=t.replace(`#`,``),r=document.getElementById(n);r&&(window.scrollTo({top:r.offsetTop-o,behavior:`smooth`}),d(t))};(0,n.useLayoutEffect)(()=>{let t=()=>{let t=(e,n)=>{let r=[];return e.forEach(e=>{r.push({href:e.href,parentHref:n}),e.children&&(r=r.concat(t(e.children,n||e.href)))}),r},n=t(e),r=``,i=window.scrollY||document.documentElement.scrollTop,c=document.documentElement.scrollHeight,l=document.documentElement.clientHeight;if(i>0&&Math.ceil(i+l)>=c&&n.length>0){let e=n[n.length-1];r=s===`horizontal`&&e.parentHref?e.parentHref:e.href}else for(let e of n){let t=e.href.replace(`#`,``),n=document.getElementById(t);if(n){if(n.getBoundingClientRect().top<=o+a)r=s===`horizontal`&&e.parentHref?e.parentHref:e.href;else break}}r&&r!==u&&d(r)};return window.addEventListener(`scroll`,t),t(),()=>window.removeEventListener(`scroll`,t)},[e,o,a,u,s]),(0,n.useLayoutEffect)(()=>{if(!u||!m.current)return;let e=m.current.querySelector(`a[href="${u}"]`);if(e){let n=m.current.getBoundingClientRect();if(s===`vertical`){let t=e.getBoundingClientRect();p({top:t.top-n.top,height:t.height,opacity:1})}else{let r=m.current.querySelector(`.${t.default.list}`);if(r){let t=e.getBoundingClientRect(),i=r.getBoundingClientRect(),a=t.left-i.left+r.scrollLeft,o=a-i.width/2+t.width/2,s=r.scrollWidth-i.width,c=Math.max(0,Math.min(o,s)),l=a-c+(i.left-n.left);p({left:l,width:t.width,opacity:1}),r.scrollTo({left:c,behavior:`smooth`})}else{let t=e.getBoundingClientRect();p({left:t.left-m.current.getBoundingClientRect().left,width:t.width,opacity:1})}}}else p({opacity:0})},[u,s]);let g=e=>(0,i.jsx)(`ul`,{className:(0,r.default)(t.default.list,t.default[s]),children:e.map(e=>(0,i.jsxs)(`li`,{className:(0,r.default)(t.default.item,u===e.href&&t.default.active),children:[(0,i.jsx)(`a`,{href:e.href,className:t.default.link,onClick:t=>h(t,e.href),title:typeof e.title==`string`?e.title:void 0,children:e.title}),e.children&&s===`vertical`&&g(e.children)]},e.key))});return(0,i.jsxs)(`div`,{className:(0,r.default)(`wim-anchor`,t.default.root,t.default[s],c),style:l,ref:m,children:[(0,i.jsx)(`div`,{className:t.default.ink,children:(0,i.jsx)(`span`,{className:t.default.inkBall,style:f})}),g(e)]})};exports.Anchor=a,exports.default=a;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("./anchor.module.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("classnames");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=({items:e=[],bounds:a=5,offset:o=0,direction:s=`vertical`,className:c,style:l})=>{let[u,d]=(0,n.useState)(``),[f,p]=(0,n.useState)({}),m=(0,n.useRef)(null),h=(e,t)=>{e.preventDefault();let n=t.replace(`#`,``),r=document.getElementById(n);r&&(window.scrollTo({top:r.offsetTop-o,behavior:`smooth`}),d(t))};(0,n.useLayoutEffect)(()=>{let t=()=>{let t=(e,n)=>{let r=[];return e.forEach(e=>{r.push({href:e.href,parentHref:n}),e.children&&(r=r.concat(t(e.children,n||e.href)))}),r},n=t(e),r=``,i=window.scrollY||document.documentElement.scrollTop,c=document.documentElement.scrollHeight,l=document.documentElement.clientHeight;if(i>0&&Math.ceil(i+l)>=c&&n.length>0){let e=n[n.length-1];r=s===`horizontal`&&e.parentHref?e.parentHref:e.href}else for(let e of n){let t=e.href.replace(`#`,``),n=document.getElementById(t);if(n){if(n.getBoundingClientRect().top<=o+a)r=s===`horizontal`&&e.parentHref?e.parentHref:e.href;else break}}r&&r!==u&&d(r)};return window.addEventListener(`scroll`,t),t(),()=>window.removeEventListener(`scroll`,t)},[e,o,a,u,s]),(0,n.useLayoutEffect)(()=>{if(!u||!m.current)return;let e=m.current.querySelector(`a[href="${u}"]`);if(e){let n=m.current.getBoundingClientRect();if(s===`vertical`){let t=e.getBoundingClientRect();p({top:t.top-n.top,height:t.height,opacity:1})}else{let r=m.current.querySelector(`.${t.default.list}`);if(r){let t=e.getBoundingClientRect(),i=r.getBoundingClientRect(),a=t.left-i.left+r.scrollLeft,o=a-i.width/2+t.width/2,s=r.scrollWidth-i.width,c=Math.max(0,Math.min(o,s)),l=a-c+(i.left-n.left);p({left:l,width:t.width,opacity:1}),r.scrollTo({left:c,behavior:`smooth`})}else{let t=e.getBoundingClientRect();p({left:t.left-m.current.getBoundingClientRect().left,width:t.width,opacity:1})}}}else p({opacity:0})},[u,s]);let g=e=>(0,i.jsx)(`ul`,{className:(0,r.default)(t.default.list,t.default[s]),children:e.map(e=>(0,i.jsxs)(`li`,{className:(0,r.default)(t.default.item,u===e.href&&t.default.active),children:[(0,i.jsx)(`a`,{href:e.href,className:t.default.link,"aria-current":u===e.href?`location`:void 0,onClick:t=>h(t,e.href),title:typeof e.title==`string`?e.title:void 0,children:e.title}),e.children&&s===`vertical`&&g(e.children)]},e.key))});return(0,i.jsxs)(`div`,{className:(0,r.default)(`wim-anchor`,t.default.root,t.default[s],c),style:l,ref:m,children:[(0,i.jsx)(`div`,{className:t.default.ink,children:(0,i.jsx)(`span`,{className:t.default.inkBall,style:f})}),g(e)]})};exports.Anchor=a,exports.default=a;

package/dist/components/navigation/Anchor/Anchor.js

@@ -85,6 +85,7 @@ var s = ({ items: s = [], bounds: c = 5, offset: l = 0, direction: u = "vertical
 			children: [/* @__PURE__ */ a("a", {
 				href: t.href,
 				className: e.link,
+				"aria-current": p === t.href ? "location" : void 0,
 				onClick: (e) => v(e, t.href),
 				title: typeof t.title == "string" ? t.title : void 0,
 				children: t.title

package/dist/components/overlay/Dialog/Dialog.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("../../_internal/OverlayBase.cjs"),r=require("./dialog.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("classnames");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=(0,i.createContext)(void 0),c=()=>{let e=(0,i.useContext)(s);if(!e)throw Error(`Dialog sub-components must be used within Dialog`);return e},l=({children:e,open:t,onOpenChange:n,defaultOpen:r=!1,closeOnOverlayClick:a=!0})=>{let[c,l]=(0,i.useState)(r),u=t!==void 0,d=u?t:c,f=e=>{u||l(e),n?.(e)},p=`wim-dialog-${(0,i.useId)()}`,m=`${p}-title`,h=`${p}-description`;return(0,o.jsx)(s.Provider,{value:{titleId:m,descriptionId:h,open:d,onOpenChange:f,closeOnOverlayClick:a},children:e})};l.displayName=`Dialog`;var u=({children:e,className:n,onClick:r,asChild:i=!1,...a})=>{let{onOpenChange:s}=c();return(0,o.jsx)(i?t.Root:`button`,{type:`button`,className:n,onClick:e=>{r?.(e),s(!0)},...a,children:(0,o.jsx)(t.Slottable,{children:e})})};u.displayName=`Dialog.Trigger`;var d=({children:e,className:n,onClick:r,asChild:i=!1,...a})=>{let{onOpenChange:s}=c();return(0,o.jsx)(i?t.Root:`button`,{type:`button`,className:n,onClick:e=>{r?.(e),s(!1)},...a,children:(0,o.jsx)(t.Slottable,{children:e})})};d.displayName=`Dialog.Close`;var f=({children:e,className:i,asChild:s=!1,open:l,onOpenChange:u,...d})=>{let{open:f,onOpenChange:p,titleId:m,descriptionId:h,closeOnOverlayClick:g}=c(),_=l===void 0?f:l,v=u===void 0?p:u,y=s?t.Root:`div`;return(0,o.jsx)(n.OverlayBase,{...d,open:_,onOpenChange:v,closeOnOverlayClick:g,overlayClassName:r.default.overlay,role:`dialog`,"aria-labelledby":m,"aria-describedby":h,children:(0,o.jsx)(y,{className:(0,a.default)(`wim-dialog`,r.default.content,i),children:(0,o.jsx)(t.Slottable,{children:e})})})};f.displayName=`Dialog.Content`;var p=({children:e,className:t,...n})=>(0,o.jsx)(`div`,{className:(0,a.default)(r.default.header,t),"data-testid":`dialog-header`,...n,children:e});p.displayName=`Dialog.Header`;var m=({children:e,className:t,layout:n,...i})=>(0,o.jsx)(`div`,{className:(0,a.default)(r.default.footer,t),"data-layout":n,"data-testid":`dialog-footer`,...i,children:e});m.displayName=`Dialog.Footer`;var h=({children:e,className:t,...n})=>{let{titleId:i}=c();return(0,o.jsx)(`h2`,{id:i,className:(0,a.default)(r.default.title,t),"data-testid":`dialog-title`,...n,children:e})};h.displayName=`Dialog.Title`;var g=({children:e,className:t,...n})=>{let{descriptionId:i}=c();return(0,o.jsx)(`p`,{id:i,className:(0,a.default)(r.default.description,t),"data-testid":`dialog-description`,...n,children:e})};g.displayName=`Dialog.Description`;var _=e=>(0,o.jsx)(l,{...e});_.displayName=`Dialog`,_.Trigger=u,_.Content=f,_.Close=d,_.Header=p,_.Footer=m,_.Title=h,_.Description=g,exports.Dialog=_,exports.default=_,exports.DialogClose=d,exports.DialogContent=f,exports.DialogDescription=g,exports.DialogFooter=m,exports.DialogHeader=p,exports.DialogTitle=h,exports.DialogTrigger=u,exports.useDialog=c;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../_internal/OverlayBase.cjs"),r=require("./dialog.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("classnames");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=(0,i.createContext)(void 0),c=()=>{let e=(0,i.useContext)(s);if(!e)throw Error(`Dialog sub-components must be used within Dialog`);return e},l=({children:e,open:t,onOpenChange:n,defaultOpen:r=!1,role:a=`dialog`,closeOnOverlayClick:c=a!==`alertdialog`})=>{let[l,u]=(0,i.useState)(r),d=t!==void 0,f=d?t:l,p=e=>{d||u(e),n?.(e)},m=`wim-dialog-${(0,i.useId)()}`,h=`${m}-title`,g=`${m}-description`;return(0,o.jsx)(s.Provider,{value:{titleId:h,descriptionId:g,open:f,onOpenChange:p,closeOnOverlayClick:c,role:a},children:e})};l.displayName=`Dialog`;var u=({children:e,className:n,onClick:r,asChild:i=!1,...a})=>{let{onOpenChange:s}=c();return(0,o.jsx)(i?t.Root:`button`,{type:`button`,className:n,onClick:e=>{r?.(e),s(!0)},...a,children:(0,o.jsx)(t.Slottable,{children:e})})};u.displayName=`Dialog.Trigger`;var d=({children:e,className:n,onClick:r,asChild:i=!1,...a})=>{let{onOpenChange:s}=c();return(0,o.jsx)(i?t.Root:`button`,{type:`button`,className:n,onClick:e=>{r?.(e),s(!1)},...a,children:(0,o.jsx)(t.Slottable,{children:e})})};d.displayName=`Dialog.Close`;var f=({children:e,className:i,asChild:s=!1,open:l,onOpenChange:u,role:d,...f})=>{let{open:p,onOpenChange:m,titleId:h,descriptionId:g,closeOnOverlayClick:_,role:v}=c(),y=l===void 0?p:l,b=u===void 0?m:u,x=s?t.Root:`div`;return(0,o.jsx)(n.OverlayBase,{...f,open:y,onOpenChange:b,closeOnOverlayClick:_,overlayClassName:r.default.overlay,role:d??v,"aria-labelledby":h,"aria-describedby":g,children:(0,o.jsx)(x,{className:(0,a.default)(`wim-dialog`,r.default.content,i),children:(0,o.jsx)(t.Slottable,{children:e})})})};f.displayName=`Dialog.Content`;var p=({children:e,className:t,...n})=>(0,o.jsx)(`div`,{className:(0,a.default)(r.default.header,t),"data-testid":`dialog-header`,...n,children:e});p.displayName=`Dialog.Header`;var m=({children:e,className:t,layout:n,...i})=>(0,o.jsx)(`div`,{className:(0,a.default)(r.default.footer,t),"data-layout":n,"data-testid":`dialog-footer`,...i,children:e});m.displayName=`Dialog.Footer`;var h=({children:e,className:t,...n})=>{let{titleId:i}=c();return(0,o.jsx)(`h2`,{id:i,className:(0,a.default)(r.default.title,t),"data-testid":`dialog-title`,...n,children:e})};h.displayName=`Dialog.Title`;var g=({children:e,className:t,...n})=>{let{descriptionId:i}=c();return(0,o.jsx)(`p`,{id:i,className:(0,a.default)(r.default.description,t),"data-testid":`dialog-description`,...n,children:e})};g.displayName=`Dialog.Description`;var _=e=>(0,o.jsx)(l,{...e});_.displayName=`Dialog`,_.Trigger=u,_.Content=f,_.Close=d,_.Header=p,_.Footer=m,_.Title=h,_.Description=g,exports.Dialog=_,exports.default=_,exports.DialogClose=d,exports.DialogContent=f,exports.DialogDescription=g,exports.DialogFooter=m,exports.DialogHeader=p,exports.DialogTitle=h,exports.DialogTrigger=u,exports.useDialog=c;

package/dist/components/overlay/Dialog/Dialog.d.ts

@@ -1,11 +1,14 @@
 import { default as React } from 'react';
 import { OverlayBase } from '../../_internal/OverlayBase';
+/** The ARIA role the dialog content announces itself with. */
+export type DialogRole = "dialog" | "alertdialog";
 type DialogContextType = {
     titleId: string;
     descriptionId: string;
     open: boolean;
     onOpenChange: (open: boolean) => void;
     closeOnOverlayClick: boolean;
+    role: DialogRole;
 };
 export declare const useDialog: () => DialogContextType;
 export interface DialogProps {
@@ -31,10 +34,18 @@ export interface DialogProps {
      */
     className?: string;
     /**
-     * Whether clicking the overlay closes the dialog.
-     * @default true
+     * Whether clicking the overlay closes the dialog. Defaults to true, except
+     * when role is "alertdialog", where it defaults to false.
      */
     closeOnOverlayClick?: boolean;
+    /**
+     * ARIA role of the dialog content. Use "alertdialog" for a dialog that
+     * interrupts the user and needs a response before they can continue, such as
+     * confirming a destructive action. An alert dialog does not close when the
+     * overlay is clicked unless closeOnOverlayClick is set; Escape still closes it.
+     * @default "dialog"
+     */
+    role?: DialogRole;
 }
 export interface DialogTriggerProps extends React.ComponentPropsWithoutRef<"button"> {
     asChild?: boolean;
@@ -54,7 +65,7 @@ export interface DialogContentProps extends Partial<React.ComponentPropsWithoutR
     asChild?: boolean;
 }
 export declare const DialogContent: {
-    ({ children, className, asChild, open: propsOpen, onOpenChange: propsOnOpenChange, ...props }: DialogContentProps): React.JSX.Element;
+    ({ children, className, asChild, open: propsOpen, onOpenChange: propsOnOpenChange, role: propsRole, ...props }: DialogContentProps): React.JSX.Element;
     displayName: string;
 };
 export declare const DialogHeader: {

package/dist/components/overlay/Dialog/Dialog.js

@@ -10,17 +10,18 @@ var u = i(void 0), d = () => {
 	let e = a(u);
 	if (!e) throw Error("Dialog sub-components must be used within Dialog");
 	return e;
-}, f = ({ children: e, open: t, onOpenChange: n, defaultOpen: r = !1, closeOnOverlayClick: i = !0 }) => {
-	let [a, c] = s(r), d = t !== void 0, f = d ? t : a, p = (e) => {
-		d || c(e), n?.(e);
-	}, m = `wim-dialog-${o()}`, h = `${m}-title`, g = `${m}-description`;
+}, f = ({ children: e, open: t, onOpenChange: n, defaultOpen: r = !1, role: i = "dialog", closeOnOverlayClick: a = i !== "alertdialog" }) => {
+	let [c, d] = s(r), f = t !== void 0, p = f ? t : c, m = (e) => {
+		f || d(e), n?.(e);
+	}, h = `wim-dialog-${o()}`, g = `${h}-title`, _ = `${h}-description`;
 	return /* @__PURE__ */ l(u.Provider, {
 		value: {
-			titleId: h,
-			descriptionId: g,
-			open: f,
-			onOpenChange: p,
-			closeOnOverlayClick: i
+			titleId: g,
+			descriptionId: _,
+			open: p,
+			onOpenChange: m,
+			closeOnOverlayClick: a,
+			role: i
 		},
 		children: e
 	});
@@ -52,18 +53,18 @@ var m = ({ children: n, className: r, onClick: i, asChild: a = !1, ...o }) => {
 	});
 };
 m.displayName = "Dialog.Close";
-var h = ({ children: i, className: a, asChild: o = !1, open: s, onOpenChange: u, ...f }) => {
-	let { open: p, onOpenChange: m, titleId: h, descriptionId: g, closeOnOverlayClick: _ } = d(), v = s === void 0 ? p : s, y = u === void 0 ? m : u, b = o ? e : "div";
+var h = ({ children: i, className: a, asChild: o = !1, open: s, onOpenChange: u, role: f, ...p }) => {
+	let { open: m, onOpenChange: h, titleId: g, descriptionId: _, closeOnOverlayClick: v, role: y } = d(), b = s === void 0 ? m : s, x = u === void 0 ? h : u, S = o ? e : "div";
 	return /* @__PURE__ */ l(n, {
-		...f,
-		open: v,
-		onOpenChange: y,
-		closeOnOverlayClick: _,
+		...p,
+		open: b,
+		onOpenChange: x,
+		closeOnOverlayClick: v,
 		overlayClassName: r.overlay,
-		role: "dialog",
-		"aria-labelledby": h,
-		"aria-describedby": g,
-		children: /* @__PURE__ */ l(b, {
+		role: f ?? y,
+		"aria-labelledby": g,
+		"aria-describedby": _,
+		children: /* @__PURE__ */ l(S, {
 			className: c("wim-dialog", r.content, a),
 			children: /* @__PURE__ */ l(t, { children: i })
 		})

package/dist/llms-full.txt

@@ -4,7 +4,7 @@
 
 ## What this is
 
-**wimui** v0.53.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.54.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
 
@@ -854,7 +854,7 @@ number of pixels. Prefer the token so the gap follows the theme.
 @default "2xl"
     - `verticalSpacing: number | string` — Vertical spacing between rows (defaults to `spacing`)
     - `minChildWidth: number | string` — Minimum width of each child; columns wrap automatically to fit
-- **Splitter** — Split and resize panels
+- **Splitter** — Split and resize panels (aka Resizable, Resizable Panels, Split Pane)
     - `orientation: "horizontal" | "vertical"` = "horizontal" — The orientation of the splitter.
     - `children: React.ReactNode` (required) — The components to render within the splitter. Usually a combination of `Splitter.Panel` and `Splitter.Handle`.
 - **Stack** — Vertical/Horizontal alignment
@@ -1051,7 +1051,7 @@ Use it when the field already does the same thing from the keyboard.
 so the unit does not have to be repeated in the label.
     - `styles: { root?: string; inner?: string; icon?: string; icons?: string; iconItem?: string; iconButton?: string; }` — Custom styles for internal parts
     - `asChild: boolean` = false — Whether to render as a child element.
-- **Combobox** — Select with search
+- **Combobox** — Select with search (aka Autocomplete, Auto Complete)
     - `options: ComboboxOption[]` = [] — List of suggestion options
     - `onChange: (option: ComboboxOption) => void` — Callback when an option is selected
     - `placeholder: string` — Placeholder for the input
@@ -1198,7 +1198,7 @@ still do their job for assistive technology.
     - `htmlFor: string` — ID of the element the label points to
     - `errorId: string` — ID of the error message element
     - `styles: { root?: string; labelWrapper?: string; label?: string; content?: string; error?: string; }` — Custom styles for internal parts
-- **FileUpload** — File selection
+- **FileUpload** — File selection (aka Upload, File Input)
     - `label: React.ReactNode` — Field label
     - `buttonLabel: React.ReactNode` — Label of the file selection button
     - `noFileLabel: React.ReactNode` — Text shown when no file is selected
@@ -1407,7 +1407,7 @@ so the unit does not have to be repeated in the label.
     - `allowDecimal: boolean` = false — Whether to allow decimal points (effective only when mode="number")
     - `allowNegative: boolean` = false — Whether to allow negative numbers (effective only when mode="number")
     - `asChild: boolean` = false — Whether to render as a child element.
-- **OtpInput** — One-time password fields
+- **OtpInput** — One-time password fields (aka Pin Input, Input OTP, PIN Code Input)
     - `length: number` = 6 — Number of digits
     - `value: string` = "" — Current value (controlled)
     - `onChange: (value: string) => void` — Callback when the value changes
@@ -2061,7 +2061,7 @@ follows the theme and never needs a hand-mixed colour.
     - `label: string` — Text label displayed next to the spinner.
     - `labelPosition: "right" | "bottom"` = "right" — Position of the label relative to the spinner.
 @default "right"
-- **Toast** — Non-intrusive floating messages that provide feedback on system operations
+- **Toast** — Non-intrusive floating messages that provide feedback on system operations (aka Message, Sonner)
     - `id: string` — Identifier of the toast, passed to onClose. Used by ToastProvider to manage a stack.
     - `title: string` — Title of the toast.
     - `description: string` — Description text displayed below the title.
@@ -2208,7 +2208,7 @@ Defaults to a translated "Open menu" / "Close menu" (en / ja / pt), following th
     - `ariaLabel: string` — Accessibility label for the navigation
     - `onChange: (current: number) => void` — Callback function when a step is clicked (if applicable)
     - `asChild: boolean` — Whether to use the Radix Slot pattern
-- **TabBar** — Mobile bottom navigation
+- **TabBar** — Mobile bottom navigation (aka Bottom Navigation, Bottom Tab Bar)
     - `fixed: boolean` = true — Pins the bar to the bottom of the **viewport**. Defaults to `true`.
 
 The pin is `position: fixed`, so the bar leaves whatever container you put
@@ -2642,7 +2642,7 @@ renders inline, next to whatever follows it.
     - `asChild: boolean` = false — If true, the component will be rendered as its child.
     - `onSortEnd: (oldIndex: number, newIndex: number) => void` — Callback called when reordering is completed.
     - `disabled: boolean` = false — Whether the entire list is disabled.
-- **Stats** — A component to highlight key performance indicators and metrics
+- **Stats** — A component to highlight key performance indicators and metrics (aka Statistic, Stat)
     - `variant: React.ComponentProps<typeof Card>["variant"]` = "outline" — Visual style variant of the card
     - `asChild: boolean` = false — If true, the card will be rendered as its child, merging its props onto that child.
     - `interactive: boolean` = false — Whether the card is clickable: shows hover and press feedback and a pointer cursor
@@ -2773,8 +2773,13 @@ anything is measured; long text is truncated and read in full by assistive techn
     - `defaultOpen: boolean` = false — Initial open state for uncontrolled usage.
 @default false
     - `className: string` — Additional CSS class name.
-    - `closeOnOverlayClick: boolean` = true — Whether clicking the overlay closes the dialog.
-@default true
+    - `closeOnOverlayClick: boolean` = role !== "alertdialog" — Whether clicking the overlay closes the dialog. Defaults to true, except
+when role is "alertdialog", where it defaults to false.
+    - `role: "dialog" | "alertdialog"` = "dialog" — ARIA role of the dialog content. Use "alertdialog" for a dialog that
+interrupts the user and needs a response before they can continue, such as
+confirming a destructive action. An alert dialog does not close when the
+overlay is clicked unless closeOnOverlayClick is set; Escape still closes it.
+@default "dialog"
 - **Drawer** — Slide-out detail panels (aka Navigation Drawer)
     - `children: React.ReactNode` (required) — Drawer parts (DrawerTrigger, DrawerContent, etc.).
     - `open: boolean` — Controlled open state. Use together with onOpenChange.

package/dist/llms.txt

@@ -4,7 +4,7 @@
 
 ## What this is
 
-**wimui** v0.53.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.54.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
 
@@ -221,7 +221,7 @@ export function BillingOverview() {
 - **ScrollArea** — A custom scrollbar component that provides high-performance, cross-browser consistent themes while maintaining a native-like feel.
 - **Sidebar** — A collapsible navigation or informational panel on the side of the screen (aka Source List, Inspector)
 - **SimpleGrid** — Responsive fixed grid
-- **Splitter** — Split and resize panels
+- **Splitter** — Split and resize panels (aka Resizable, Resizable Panels, Split Pane)
 - **Stack** — Vertical/Horizontal alignment
 - **Toolbar** — Action strip for IconButton, ToggleGroup, and related controls with toolbar keyboard navigation. (aka Action Bar)
 - **Transition** — Utilities for managing smooth enter and leave animations with CSS classes
@@ -237,7 +237,7 @@ export function BillingOverview() {
 - **CheckboxGroup** — Shared state checkboxes
 - **ColorInput** — Input with color preview (aka Color Well, Color Field)
 - **ColorPicker** — Color selection picker
-- **Combobox** — Select with search
+- **Combobox** — Select with search (aka Autocomplete, Auto Complete)
 - **CopyButton** — Copy to clipboard
 - **CounterTextarea** — Textarea with character count display
 - **CreditCardInput** — Payment card input with brand detection
@@ -247,7 +247,7 @@ export function BillingOverview() {
 - **FieldError** — Validation messages
 - **Fieldset** — Form grouping
 - **FieldTemplate** — Standardizes label placement, required markings, and error message display for all form-related components.
-- **FileUpload** — File selection
+- **FileUpload** — File selection (aka Upload, File Input)
 - **FloatButton** — Floating action buttons
 - **IconButton** — A square button containing only an icon without a text label.
 - **ImageCropper** — Front-end image cropping and rotation tool.
@@ -260,7 +260,7 @@ export function BillingOverview() {
 - **Mentions** — @ / # suggestions
 - **MultiSelect** — Multiple selection
 - **NumberInput** — Input with step adjustments (aka Spin Button, Numeric Stepper)
-- **OtpInput** — One-time password fields
+- **OtpInput** — One-time password fields (aka Pin Input, Input OTP, PIN Code Input)
 - **PasswordInput** — Password with toggle
 - **PasswordStrength** — Visual meter to indicate password security level. (aka Strength Meter)
 - **PhoneInput** — International phone number input
@@ -305,7 +305,7 @@ export function BillingOverview() {
 - **Skeleton** — Placeholder for content loading states. (aka Shimmer)
 - **Snackbar** — Bottom notifications
 - **Spinner** — A rotating icon indicating background activity or data fetching (aka Activity Indicator)
-- **Toast** — Non-intrusive floating messages that provide feedback on system operations
+- **Toast** — Non-intrusive floating messages that provide feedback on system operations (aka Message, Sonner)
 - **Tour** — Sequential guided walkthroughs to onboard users or highlight features
 
 ### navigation — `import { … } from "wimui/navigation"`
@@ -323,7 +323,7 @@ export function BillingOverview() {
 - **SpeedDial** — Floating action button that expands sub-actions on hover or click.
 - **Stepper** — Visual sequence steps
   - ⚠️ Not the same as elsewhere: In Apple HIG and macOS, a "Stepper" is the control that increments a number — that is `NumberInput` here. WIM's `Stepper` shows progress through a sequence of steps, which is what Material calls a Stepper.
-- **TabBar** — Mobile bottom navigation
+- **TabBar** — Mobile bottom navigation (aka Bottom Navigation, Bottom Tab Bar)
 - **TabNavigation** — Tab-based navigation
 - **Tabs** — A container to organize related content into switchable view panels
 
@@ -363,7 +363,7 @@ export function BillingOverview() {
 - **RelativeTime** — Display a timestamp as a localized relative phrase ("3 minutes ago", "yesterday") that updates automatically as time passes.
 - **ScheduleView** — Displays tasks or events on a chronological timeline or calendar view.
 - **SortableList** — Item rearrangement and reordering
-- **Stats** — A component to highlight key performance indicators and metrics
+- **Stats** — A component to highlight key performance indicators and metrics (aka Statistic, Stat)
 - **SwipeableList** — Container for SwipeAction rows that keeps at most one row open at a time. (aka Swipeable List)
 - **SwipeAction** — Mobile-friendly swipe actions (delete, archive) for list items.
 - **Table** — Rows and columns for displaying structured data efficiently