@tokis/react 1.2.1 → 1.2.3

package/dist/cjs/components/avatar/index.js

@@ -49,7 +49,7 @@ function AvatarGroup({ children, max, size = 'md', className }) {
     const overflow = max && items.length > max ? items.length - max : 0;
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)('tokis-avatar-group', className), children: [visible, overflow > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)('tokis-avatar', `tokis-avatar--${size}`), "aria-label": `${overflow} more`, children: ["+", overflow] }))] }));
 }
-exports.Badge = (0, react_1.forwardRef)(({ variant = 'default', dot = false, className, children, ...props }, ref) => ((0, jsx_runtime_1.jsx)("span", { ref: ref, className: (0, cn_js_1.cn)('tokis-badge', `tokis-badge--${variant}`, dot && 'tokis-badge--dot', className), ...props, children: children })));
+exports.Badge = (0, react_1.forwardRef)(({ variant = 'default', dot = false, dotLabel, className, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)("span", { ref: ref, className: (0, cn_js_1.cn)('tokis-badge', `tokis-badge--${variant}`, dot && 'tokis-badge--dot', className), ...props, children: [dot && dotLabel && (0, jsx_runtime_1.jsx)("span", { className: "tokis-sr-only", children: dotLabel }), children] })));
 exports.Badge.displayName = 'Badge';
 exports.Chip = (0, react_1.forwardRef)(({ selected = false, onDelete, disabled = false, icon, className, children, onClick, ...props }, ref) => ((0, jsx_runtime_1.jsxs)("div", { ref: ref, role: onClick ? 'button' : undefined, tabIndex: onClick && !disabled ? 0 : undefined, "aria-pressed": onClick ? selected : undefined, "aria-disabled": disabled || undefined, className: (0, cn_js_1.cn)('tokis-chip', onClick && 'tokis-chip--clickable', selected && 'tokis-chip--selected', className), onClick: !disabled ? onClick : undefined, onKeyDown: onClick && !disabled ? (e) => { if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();

package/dist/cjs/components/card/index.js

@@ -4,7 +4,10 @@ exports.Divider = exports.CardDescription = exports.CardTitle = exports.CardFoot
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const cn_js_1 = require("../../utils/cn");
-exports.Card = (0, react_1.forwardRef)(({ variant = 'default', clickable = false, className, children, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, cn_js_1.cn)('tokis-card', variant !== 'default' && `tokis-card--${variant}`, clickable && 'tokis-card--clickable', className), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, ...props, children: children })));
+exports.Card = (0, react_1.forwardRef)(({ variant = 'default', clickable = false, as: Tag, className, children, ...props }, ref) => {
+    const Component = Tag ?? (clickable ? 'div' : 'article');
+    return ((0, jsx_runtime_1.jsx)(Component, { ref: ref, className: (0, cn_js_1.cn)('tokis-card', variant !== 'default' && `tokis-card--${variant}`, clickable && 'tokis-card--clickable', className), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, ...props, children: children }));
+});
 exports.Card.displayName = 'Card';
 exports.CardHeader = (0, react_1.forwardRef)(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, cn_js_1.cn)('tokis-card-header', className), ...props })));
 exports.CardHeader.displayName = 'CardHeader';

package/dist/cjs/components/charts/index.js

@@ -35,6 +35,9 @@ function BarChart({ data, height = 200, barColor, animated = true, horizontal =
     (0, react_1.useEffect)(() => { if (animated)
         setTimeout(() => setMounted(true), 50); }, [animated]);
     const [hoveredBar, setHoveredBar] = (0, react_1.useState)(null);
+    // Two ref arrays — one for vertical bars, one for horizontal bars (both must be called unconditionally)
+    const barRefs = (0, react_1.useRef)([]);
+    const hBarRefs = (0, react_1.useRef)([]);
     const maxVal = Math.max(...data.map((d) => d.value), 1);
     const padding = { top: 8, right: 8, bottom: 32, left: 40 };
     const w = containerWidth;
@@ -43,8 +46,27 @@ function BarChart({ data, height = 200, barColor, animated = true, horizontal =
     const chartH = h - padding.top - padding.bottom;
     const barWidth = (chartW / data.length) * 0.6;
     const barGap = (chartW / data.length) * 0.4;
+    const handleBarKeyDown = (e, i) => {
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            barRefs.current[(i + 1) % data.length]?.focus();
+        }
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            barRefs.current[(i - 1 + data.length) % data.length]?.focus();
+        }
+        else if (e.key === 'Home') {
+            e.preventDefault();
+            barRefs.current[0]?.focus();
+        }
+        else if (e.key === 'End') {
+            e.preventDefault();
+            barRefs.current[data.length - 1]?.focus();
+        }
+    };
+    const ariaLabel = `Bar chart showing: ${data.map((d) => `${d.label} ${d.value}`).join(', ')}`;
     if (!horizontal) {
-        return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, className: (0, cn_js_1.cn)('tokis-chart tokis-chart--bar', className), children: (0, jsx_runtime_1.jsx)("svg", { width: w, height: h, "aria-label": "Bar chart", onMouseMove: (e) => {
+        return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, className: (0, cn_js_1.cn)('tokis-chart tokis-chart--bar', className), children: (0, jsx_runtime_1.jsx)("svg", { width: w, height: h, "aria-label": ariaLabel, onMouseMove: (e) => {
                     const svgRect = e.currentTarget.getBoundingClientRect();
                     const mouseX = e.clientX - svgRect.left - padding.left;
                     const colW = chartW / data.length;
@@ -55,7 +77,7 @@ function BarChart({ data, height = 200, barColor, animated = true, horizontal =
                             const barH = (d.value / maxVal) * chartH;
                             const y = chartH - (mounted || !animated ? barH : 0);
                             const color = d.color ?? barColor ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length];
-                            return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("rect", { x: x, y: y, width: barWidth, height: mounted || !animated ? barH : 0, fill: color, rx: 3, opacity: hoveredBar !== null && hoveredBar !== i ? 0.5 : 1, style: { transition: animated ? 'y 0.6s ease, height 0.6s ease' : undefined } }), (0, jsx_runtime_1.jsx)("text", { x: x + barWidth / 2, y: chartH + 18, fontSize: "10", fill: "var(--tokis-text-secondary)", textAnchor: "middle", children: d.label })] }, i));
+                            return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("rect", { ref: (el) => { barRefs.current[i] = el; }, x: x, y: y, width: barWidth, height: mounted || !animated ? barH : 0, fill: color, rx: 3, opacity: hoveredBar !== null && hoveredBar !== i ? 0.5 : 1, style: { transition: animated ? 'y 0.6s ease, height 0.6s ease' : undefined, outline: 'none' }, tabIndex: i === 0 ? 0 : -1, role: "img", "aria-label": `${d.label}: ${d.value}`, onFocus: () => setHoveredBar(i), onBlur: () => setHoveredBar(null), onKeyDown: (e) => handleBarKeyDown(e, i) }), (0, jsx_runtime_1.jsx)("text", { x: x + barWidth / 2, y: chartH + 18, fontSize: "10", fill: "var(--tokis-text-secondary)", textAnchor: "middle", "aria-hidden": "true", children: d.label })] }, i));
                         }), hoveredBar !== null && (() => {
                             const d = data[hoveredBar];
                             const x = hoveredBar * (chartW / data.length) + barGap / 2 + barWidth / 2;
@@ -63,17 +85,27 @@ function BarChart({ data, height = 200, barColor, animated = true, horizontal =
                             const tipY = Math.max(4, chartH - (mounted || !animated ? barH : 0) - 28);
                             const txt = String(d.value);
                             const tw = Math.max(36, txt.length * 7 + 16);
-                            return ((0, jsx_runtime_1.jsxs)("g", { style: { pointerEvents: 'none' }, children: [(0, jsx_runtime_1.jsx)("rect", { x: x - tw / 2, y: tipY, width: tw, height: 20, rx: 4, fill: "rgba(17,24,39,0.92)" }), (0, jsx_runtime_1.jsx)("text", { x: x, y: tipY + 13, fontSize: "10", textAnchor: "middle", fill: "#fff", fontWeight: "600", children: txt })] }));
+                            return ((0, jsx_runtime_1.jsxs)("g", { style: { pointerEvents: 'none' }, "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("rect", { x: x - tw / 2, y: tipY, width: tw, height: 20, rx: 4, fill: "rgba(17,24,39,0.92)" }), (0, jsx_runtime_1.jsx)("text", { x: x, y: tipY + 13, fontSize: "10", textAnchor: "middle", fill: "#fff", fontWeight: "600", children: txt })] }));
                         })()] }) }) }));
     }
     // Horizontal
-    const barH = (chartH / data.length) * 0.6;
-    const barGapH = (chartH / data.length) * 0.4;
-    return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, className: (0, cn_js_1.cn)('tokis-chart tokis-chart--bar', className), children: (0, jsx_runtime_1.jsx)("svg", { width: w, height: h, "aria-label": "Bar chart horizontal", children: (0, jsx_runtime_1.jsx)("g", { transform: `translate(${padding.left},${padding.top})`, children: data.map((d, i) => {
-                    const y = i * (chartH / data.length) + barGapH / 2;
+    const hBarH = (chartH / data.length) * 0.6;
+    const hBarGap = (chartH / data.length) * 0.4;
+    const handleHBarKeyDown = (e, i) => {
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            hBarRefs.current[(i + 1) % data.length]?.focus();
+        }
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            hBarRefs.current[(i - 1 + data.length) % data.length]?.focus();
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, className: (0, cn_js_1.cn)('tokis-chart tokis-chart--bar', className), children: (0, jsx_runtime_1.jsx)("svg", { width: w, height: h, "aria-label": ariaLabel, children: (0, jsx_runtime_1.jsx)("g", { transform: `translate(${padding.left},${padding.top})`, children: data.map((d, i) => {
+                    const y = i * (chartH / data.length) + hBarGap / 2;
                     const barW = (d.value / maxVal) * chartW;
                     const color = d.color ?? barColor ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length];
-                    return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("text", { x: -8, y: y + barH / 2 + 4, fontSize: "10", fill: "var(--tokis-text-secondary)", textAnchor: "end", children: d.label }), (0, jsx_runtime_1.jsx)("rect", { x: 0, y: y, width: mounted || !animated ? barW : 0, height: barH, fill: color, rx: 3, style: { transition: animated ? 'width 0.6s ease' : undefined } })] }, i));
+                    return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("text", { x: -8, y: y + hBarH / 2 + 4, fontSize: "10", fill: "var(--tokis-text-secondary)", textAnchor: "end", "aria-hidden": "true", children: d.label }), (0, jsx_runtime_1.jsx)("rect", { ref: (el) => { hBarRefs.current[i] = el; }, x: 0, y: y, width: mounted || !animated ? barW : 0, height: hBarH, fill: color, rx: 3, style: { transition: animated ? 'width 0.6s ease' : undefined, outline: 'none' }, tabIndex: i === 0 ? 0 : -1, role: "img", "aria-label": `${d.label}: ${d.value}`, onFocus: () => setHoveredBar(i), onBlur: () => setHoveredBar(null), onKeyDown: (e) => handleHBarKeyDown(e, i) })] }, i));
                 }) }) }) }));
 }
 BarChart.displayName = 'BarChart';
@@ -97,6 +129,7 @@ function LineChart({ labels, datasets, height = 200, smooth = true, animated = t
     const containerWidth = useContainerWidth(containerRef);
     const [mounted, setMounted] = (0, react_1.useState)(false);
     const [hoveredCol, setHoveredCol] = (0, react_1.useState)(null);
+    const pointRefs = (0, react_1.useRef)([]);
     (0, react_1.useEffect)(() => { if (animated)
         setTimeout(() => setMounted(true), 50); }, [animated]);
     const padding = { top: 12, right: 12, bottom: 32, left: 44 };
@@ -112,17 +145,45 @@ function LineChart({ labels, datasets, height = 200, smooth = true, animated = t
         x: (idx / (labels.length - 1 || 1)) * chartW,
         y: chartH - ((val - minVal) / range) * chartH,
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: (0, cn_js_1.cn)('tokis-chart tokis-chart--line', className), children: [(0, jsx_runtime_1.jsx)("svg", { width: w, height: h, "aria-label": "Line chart", onMouseMove: (e) => {
+    const lineAriaLabel = `Line chart showing ${datasets.map((d) => d.label).join(' and ')} over ${labels.join(', ')}`;
+    const handlePointKeyDown = (e, colIdx) => {
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            const next = Math.min(colIdx + 1, labels.length - 1);
+            pointRefs.current[0]?.[next]?.focus();
+        }
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            const prev = Math.max(colIdx - 1, 0);
+            pointRefs.current[0]?.[prev]?.focus();
+        }
+        else if (e.key === 'Home') {
+            e.preventDefault();
+            pointRefs.current[0]?.[0]?.focus();
+        }
+        else if (e.key === 'End') {
+            e.preventDefault();
+            pointRefs.current[0]?.[labels.length - 1]?.focus();
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: (0, cn_js_1.cn)('tokis-chart tokis-chart--line', className), children: [(0, jsx_runtime_1.jsx)("svg", { width: w, height: h, "aria-label": lineAriaLabel, onMouseMove: (e) => {
                     const svgRect = e.currentTarget.getBoundingClientRect();
                     const mouseX = e.clientX - svgRect.left - padding.left;
                     const colW = chartW / (labels.length - 1 || 1);
                     const idx = Math.round(mouseX / colW);
                     setHoveredCol(idx >= 0 && idx < labels.length ? idx : null);
-                }, onMouseLeave: () => setHoveredCol(null), children: (0, jsx_runtime_1.jsxs)("g", { transform: `translate(${padding.left},${padding.top})`, children: [[0, 0.25, 0.5, 0.75, 1].map((t) => ((0, jsx_runtime_1.jsxs)("g", { transform: `translate(0,${chartH * (1 - t)})`, children: [(0, jsx_runtime_1.jsx)("line", { x1: 0, x2: chartW, stroke: "var(--tokis-color-border)", strokeWidth: "1" }), (0, jsx_runtime_1.jsx)("text", { x: -8, y: 4, fontSize: "10", fill: "var(--tokis-text-tertiary)", textAnchor: "end", children: Math.round(minVal + range * t) })] }, t))), labels.map((lbl, i) => ((0, jsx_runtime_1.jsx)("text", { x: toPoint(0, i).x, y: chartH + 18, fontSize: "10", fill: "var(--tokis-text-secondary)", textAnchor: "middle", children: lbl }, i))), datasets.map((dataset, di) => {
+                }, onMouseLeave: () => setHoveredCol(null), children: (0, jsx_runtime_1.jsxs)("g", { transform: `translate(${padding.left},${padding.top})`, children: [[0, 0.25, 0.5, 0.75, 1].map((t) => ((0, jsx_runtime_1.jsxs)("g", { transform: `translate(0,${chartH * (1 - t)})`, children: [(0, jsx_runtime_1.jsx)("line", { x1: 0, x2: chartW, stroke: "var(--tokis-color-border)", strokeWidth: "1" }), (0, jsx_runtime_1.jsx)("text", { x: -8, y: 4, fontSize: "10", fill: "var(--tokis-text-tertiary)", textAnchor: "end", children: Math.round(minVal + range * t) })] }, t))), labels.map((lbl, i) => ((0, jsx_runtime_1.jsx)("text", { x: toPoint(0, i).x, y: chartH + 18, fontSize: "10", fill: "var(--tokis-text-secondary)", textAnchor: "middle", "aria-hidden": "true", children: lbl }, i))), datasets.map((dataset, di) => {
                             const points = dataset.data.map((v, i) => toPoint(v, i));
                             const pathD = toPath(points, smooth);
                             const color = dataset.color ?? DEFAULT_COLORS[di % DEFAULT_COLORS.length];
-                            return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("path", { d: pathD, fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: animated ? { strokeDasharray: 2000, strokeDashoffset: mounted ? 0 : 2000, transition: 'stroke-dashoffset 1s ease' } : undefined }), points.map((p, pi) => ((0, jsx_runtime_1.jsx)("circle", { cx: p.x, cy: p.y, r: 3, fill: color, style: animated ? { opacity: mounted ? 1 : 0, transition: `opacity 0.5s ease ${pi * 0.05}s` } : undefined }, pi)))] }, di));
+                            if (!pointRefs.current[di])
+                                pointRefs.current[di] = [];
+                            return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("path", { d: pathD, fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", style: animated ? { strokeDasharray: 2000, strokeDashoffset: mounted ? 0 : 2000, transition: 'stroke-dashoffset 1s ease' } : undefined }), points.map((p, pi) => {
+                                        const isFirstDataset = di === 0;
+                                        return ((0, jsx_runtime_1.jsx)("circle", { ref: (el) => { pointRefs.current[di][pi] = el; }, cx: p.x, cy: p.y, r: isFirstDataset ? 4 : 3, fill: color, style: { outline: 'none', ...(animated ? { opacity: mounted ? 1 : 0, transition: `opacity 0.5s ease ${pi * 0.05}s` } : undefined) }, tabIndex: isFirstDataset ? (pi === 0 ? 0 : -1) : -1, role: isFirstDataset ? 'img' : undefined, "aria-label": isFirstDataset
+                                                ? `${labels[pi]}: ${datasets.map((ds) => `${ds.label} ${ds.data[pi]}`).join(', ')}`
+                                                : undefined, onFocus: isFirstDataset ? () => setHoveredCol(pi) : undefined, onBlur: isFirstDataset ? () => setHoveredCol(null) : undefined, onKeyDown: isFirstDataset ? (e) => handlePointKeyDown(e, pi) : undefined }, pi));
+                                    })] }, di));
                         }), hoveredCol !== null && (() => {
                             const x = toPoint(0, hoveredCol).x;
                             const vals = datasets.map((ds) => ({ val: ds.data[hoveredCol], color: ds.color ?? DEFAULT_COLORS[datasets.indexOf(ds) % DEFAULT_COLORS.length], label: ds.label }));
@@ -131,7 +192,7 @@ function LineChart({ labels, datasets, height = 200, smooth = true, animated = t
                                 return null;
                             const y = toPoint(firstVal.val, hoveredCol).y;
                             const isMulti = vals.length > 1;
-                            return ((0, jsx_runtime_1.jsxs)("g", { style: { pointerEvents: 'none' }, children: [(0, jsx_runtime_1.jsx)("line", { x1: x, x2: x, y1: 0, y2: chartH, stroke: "var(--tokis-color-border)", strokeWidth: "1", strokeDasharray: "3,3" }), vals.map(({ val, color }, vi) => {
+                            return ((0, jsx_runtime_1.jsxs)("g", { style: { pointerEvents: 'none' }, "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("line", { x1: x, x2: x, y1: 0, y2: chartH, stroke: "var(--tokis-color-border)", strokeWidth: "1", strokeDasharray: "3,3" }), vals.map(({ val, color }, vi) => {
                                         if (val === undefined)
                                             return null;
                                         const py = toPoint(val, hoveredCol).y;
@@ -158,6 +219,7 @@ function PieChart({ data, donut = false, size = 200, animated = true, showLegend
     (0, react_1.useEffect)(() => { if (animated)
         setTimeout(() => setMounted(true), 50); }, [animated]);
     const [hovered, setHovered] = (0, react_1.useState)(null);
+    const sliceRefs = (0, react_1.useRef)([]);
     const total = data.reduce((s, d) => s + d.value, 0) || 1;
     const cx = size / 2;
     const cy = size / 2;
@@ -187,7 +249,26 @@ function PieChart({ data, donut = false, size = 200, animated = true, showLegend
             : `M${cx + offsetX},${cy + offsetY} L${x1},${y1} A${r},${r} 0 ${largeArc},1 ${x2},${y2} Z`;
         return { ...d, pathD, color: d.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length] };
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)('tokis-chart tokis-chart--pie', className), children: [(0, jsx_runtime_1.jsx)("svg", { width: size, height: size, "aria-label": "Pie chart", children: slices.map((s, i) => ((0, jsx_runtime_1.jsx)("path", { d: s.pathD, fill: s.color, style: { opacity: mounted || !animated ? 1 : 0, transition: animated ? `opacity 0.4s ease ${i * 0.07}s` : undefined, cursor: 'pointer' }, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null), children: (0, jsx_runtime_1.jsxs)("title", { children: [s.label, ": ", s.value, " (", ((s.value / total) * 100).toFixed(1), "%)"] }) }, i))) }), showLegend && ((0, jsx_runtime_1.jsx)("div", { className: "tokis-chart__legend", children: slices.map((s, i) => ((0, jsx_runtime_1.jsxs)("span", { className: "tokis-chart__legend-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "tokis-chart__legend-dot", style: { background: s.color } }), s.label] }, i))) }))] }));
+    const pieAriaLabel = `${donut ? 'Donut' : 'Pie'} chart showing: ${data.map((d) => `${d.label} ${d.value} (${((d.value / total) * 100).toFixed(1)}%)`).join(', ')}`;
+    const handleSliceKeyDown = (e, i) => {
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            sliceRefs.current[(i + 1) % slices.length]?.focus();
+        }
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            sliceRefs.current[(i - 1 + slices.length) % slices.length]?.focus();
+        }
+        else if (e.key === 'Home') {
+            e.preventDefault();
+            sliceRefs.current[0]?.focus();
+        }
+        else if (e.key === 'End') {
+            e.preventDefault();
+            sliceRefs.current[slices.length - 1]?.focus();
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)('tokis-chart tokis-chart--pie', className), children: [(0, jsx_runtime_1.jsx)("svg", { width: size, height: size, "aria-label": pieAriaLabel, children: slices.map((s, i) => ((0, jsx_runtime_1.jsx)("path", { ref: (el) => { sliceRefs.current[i] = el; }, d: s.pathD, fill: s.color, style: { opacity: mounted || !animated ? 1 : 0, transition: animated ? `opacity 0.4s ease ${i * 0.07}s` : undefined, cursor: 'pointer', outline: 'none' }, tabIndex: i === 0 ? 0 : -1, role: "img", "aria-label": `${s.label}: ${s.value} (${((s.value / total) * 100).toFixed(1)}%)`, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null), onFocus: () => setHovered(i), onBlur: () => setHovered(null), onKeyDown: (e) => handleSliceKeyDown(e, i), children: (0, jsx_runtime_1.jsxs)("title", { children: [s.label, ": ", s.value, " (", ((s.value / total) * 100).toFixed(1), "%)"] }) }, i))) }), showLegend && ((0, jsx_runtime_1.jsx)("div", { className: "tokis-chart__legend", children: slices.map((s, i) => ((0, jsx_runtime_1.jsxs)("span", { className: "tokis-chart__legend-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "tokis-chart__legend-dot", style: { background: s.color } }), s.label] }, i))) }))] }));
 }
 PieChart.displayName = 'PieChart';
 function Sparkline({ data, type = 'line', width = 80, height = 24, color = 'var(--tokis-color-primary)', className, }) {

package/dist/cjs/components/datepicker/index.js

@@ -20,10 +20,12 @@ const cn_js_1 = require("../../utils/cn");
 const Calendar_js_1 = require("./Calendar");
 const date_utils_js_1 = require("./date-utils");
 // ─── Shared floating panel hook ───────────────────────────────────────────────
+const FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function useFloatingPanel(onClose) {
     const [open, setOpen] = (0, react_1.useState)(false);
     const triggerRef = (0, react_1.useRef)(null);
     const panelRef = (0, react_1.useRef)(null);
+    const previousFocusRef = (0, react_1.useRef)(null);
     const [pos, setPos] = (0, react_1.useState)({ top: 0, left: 0 });
     const updatePos = (0, react_1.useCallback)(() => {
         const el = triggerRef.current;
@@ -36,14 +38,27 @@ function useFloatingPanel(onClose) {
         });
     }, []);
     const openPanel = () => {
+        previousFocusRef.current = document.activeElement;
         updatePos();
         setOpen(true);
     };
     const closePanel = (0, react_1.useCallback)(() => {
         setOpen(false);
         onClose?.();
-        triggerRef.current?.focus();
+        (previousFocusRef.current ?? triggerRef.current)?.focus();
+        previousFocusRef.current = null;
     }, [onClose]);
+    // Move focus into the panel when it opens so keyboard users can interact with it
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        requestAnimationFrame(() => {
+            if (!panelRef.current)
+                return;
+            const first = panelRef.current.querySelector(FOCUSABLE);
+            (first ?? panelRef.current).focus();
+        });
+    }, [open]);
     // Close on outside click
     (0, react_1.useEffect)(() => {
         if (!open)
@@ -86,7 +101,7 @@ function DatePicker({ value: valueProp, defaultValue, onChange, label, placehold
             setInternalValue(undefined);
         onChange?.(undefined);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)('tokis-datepicker', error && 'tokis-datepicker--error', disabled && 'tokis-datepicker--disabled', className), children: [label && ((0, jsx_runtime_1.jsxs)("label", { className: "tokis-label", htmlFor: id, children: [label, required && (0, jsx_runtime_1.jsx)("span", { className: "tokis-label-required", "aria-hidden": "true", children: " *" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "tokis-datepicker-input-wrap", children: [(0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, id: id, type: "button", className: (0, cn_js_1.cn)('tokis-datepicker-trigger', open && 'tokis-datepicker-trigger--open'), disabled: disabled, "aria-haspopup": "dialog", "aria-expanded": open, "aria-label": label ? `${label}: ${parsedDate ? (0, date_utils_js_1.formatDisplayDate)(parsedDate) : 'not set'}` : undefined, onClick: () => (open ? closePanel() : openPanel()), children: [(0, jsx_runtime_1.jsx)("span", { className: (0, cn_js_1.cn)('tokis-datepicker-value', !parsedDate && 'tokis-datepicker-placeholder'), children: parsedDate ? (0, date_utils_js_1.formatDisplayDate)(parsedDate) : placeholder }), (0, jsx_runtime_1.jsx)("span", { className: "tokis-datepicker-icon", "aria-hidden": "true", children: "\uD83D\uDCC5" })] }), parsedDate && !disabled && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "tokis-datepicker-clear", "aria-label": "Clear date", onClick: handleClear, children: "\u2715" }))] }), open && ((0, jsx_runtime_1.jsx)(index_js_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { ref: panelRef, className: "tokis-datepicker-panel", role: "dialog", "aria-modal": "false", "aria-label": label ?? 'Date picker', style: { top: pos.top, left: pos.left }, children: (0, jsx_runtime_1.jsx)(Calendar_js_1.Calendar, { value: value, onChange: handleSelect, min: min, max: max }) }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)('tokis-datepicker', error && 'tokis-datepicker--error', disabled && 'tokis-datepicker--disabled', className), children: [label && ((0, jsx_runtime_1.jsxs)("label", { className: "tokis-label", htmlFor: id, children: [label, required && (0, jsx_runtime_1.jsx)("span", { className: "tokis-label-required", "aria-hidden": "true", children: " *" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "tokis-datepicker-input-wrap", children: [(0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, id: id, type: "button", className: (0, cn_js_1.cn)('tokis-datepicker-trigger', open && 'tokis-datepicker-trigger--open'), disabled: disabled, "aria-haspopup": "dialog", "aria-expanded": open, "aria-label": label ? `${label}: ${parsedDate ? (0, date_utils_js_1.formatDisplayDate)(parsedDate) : 'not set'}` : undefined, onClick: () => (open ? closePanel() : openPanel()), children: [(0, jsx_runtime_1.jsx)("span", { className: (0, cn_js_1.cn)('tokis-datepicker-value', !parsedDate && 'tokis-datepicker-placeholder'), children: parsedDate ? (0, date_utils_js_1.formatDisplayDate)(parsedDate) : placeholder }), (0, jsx_runtime_1.jsx)("span", { className: "tokis-datepicker-icon", "aria-hidden": "true", children: "\uD83D\uDCC5" })] }), parsedDate && !disabled && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "tokis-datepicker-clear", "aria-label": "Clear date", onClick: handleClear, children: "\u2715" }))] }), open && ((0, jsx_runtime_1.jsx)(index_js_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { ref: panelRef, className: "tokis-datepicker-panel", role: "dialog", "aria-modal": "false", "aria-label": label ?? 'Date picker', tabIndex: -1, style: { top: pos.top, left: pos.left }, children: (0, jsx_runtime_1.jsx)(Calendar_js_1.Calendar, { value: value, onChange: handleSelect, min: min, max: max }) }) }))] }));
 }
 function TimePicker({ value: valueProp, defaultValue, onChange, label, disabled = false, required = false, error = false, hourFormat = 24, minuteStep = 1, className, }) {
     const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue ?? '00:00');

package/dist/cjs/components/drawer/index.js

@@ -8,6 +8,9 @@ const index_js_1 = require("../portal/index");
 const core_1 = require("@tokis/core");
 function Drawer({ open, onClose, side = 'right', title, description, children, footer, closeOnBackdrop = true, closeOnEsc = true, className }) {
     const contentRef = (0, react_1.useRef)(null);
+    const drawerId = (0, react_1.useId)();
+    const titleId = title ? `${drawerId}-title` : undefined;
+    const descId = description ? `${drawerId}-desc` : undefined;
     (0, react_1.useEffect)(() => {
         if (!open)
             return;
@@ -33,5 +36,5 @@ function Drawer({ open, onClose, side = 'right', title, description, children, f
     }, [open]);
     if (!open)
         return null;
-    return ((0, jsx_runtime_1.jsxs)(index_js_1.Portal, { children: [(0, jsx_runtime_1.jsx)("div", { className: "tokis-drawer-backdrop", "aria-hidden": "true", onClick: closeOnBackdrop ? onClose : undefined }), (0, jsx_runtime_1.jsxs)("div", { ref: contentRef, role: "dialog", "aria-modal": "true", tabIndex: -1, className: (0, cn_js_1.cn)(`tokis-drawer-content tokis-drawer-content--${side}`, className), onClick: (e) => e.stopPropagation(), children: [(title || description) && ((0, jsx_runtime_1.jsxs)("div", { className: "tokis-drawer-header", children: [title && (0, jsx_runtime_1.jsx)("h2", { className: "tokis-drawer-title", children: title }), description && (0, jsx_runtime_1.jsx)("p", { className: "tokis-drawer-description", children: description }), (0, jsx_runtime_1.jsx)("button", { className: "tokis-drawer-close", onClick: onClose, "aria-label": "Close drawer", children: (0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "M3 3l10 10M13 3L3 13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })] })), (0, jsx_runtime_1.jsx)("div", { className: "tokis-drawer-body", children: children }), footer && (0, jsx_runtime_1.jsx)("div", { className: "tokis-drawer-footer", children: footer })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(index_js_1.Portal, { children: [(0, jsx_runtime_1.jsx)("div", { className: "tokis-drawer-backdrop", "aria-hidden": "true", onClick: closeOnBackdrop ? onClose : undefined }), (0, jsx_runtime_1.jsxs)("div", { ref: contentRef, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": descId, tabIndex: -1, className: (0, cn_js_1.cn)(`tokis-drawer-content tokis-drawer-content--${side}`, className), onClick: (e) => e.stopPropagation(), children: [(title || description) && ((0, jsx_runtime_1.jsxs)("div", { className: "tokis-drawer-header", children: [title && (0, jsx_runtime_1.jsx)("h2", { id: titleId, className: "tokis-drawer-title", children: title }), description && (0, jsx_runtime_1.jsx)("p", { id: descId, className: "tokis-drawer-description", children: description }), (0, jsx_runtime_1.jsx)("button", { className: "tokis-drawer-close", onClick: onClose, "aria-label": "Close drawer", children: (0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "M3 3l10 10M13 3L3 13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })] })), (0, jsx_runtime_1.jsx)("div", { className: "tokis-drawer-body", children: children }), footer && (0, jsx_runtime_1.jsx)("div", { className: "tokis-drawer-footer", children: footer })] })] }));
 }

package/dist/cjs/components/extended/index.js

@@ -104,7 +104,7 @@ function Rating({ value = 0, max = 5, readOnly = false, onChange, size = 'md', l
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_js_1.cn)('tokis-rating', readOnly && 'tokis-rating--readonly'), role: "radiogroup", "aria-label": label, "data-readonly": readOnly || undefined, children: Array.from({ length: max }).map((_, index) => {
             const current = index + 1;
             const filled = current <= display;
-            return ((0, jsx_runtime_1.jsx)("button", { type: "button", role: "radio", "aria-checked": current <= value, "aria-label": `${current} star${current !== 1 ? 's' : ''}`, disabled: readOnly, className: (0, cn_js_1.cn)('tokis-rating-star', filled && 'tokis-rating-star--active', hovered !== null && filled && 'tokis-rating-star--hover'), style: { fontSize: sizeMap[size] }, onClick: () => onChange?.(current), onMouseEnter: () => !readOnly && setHovered(current), onMouseLeave: () => !readOnly && setHovered(null), children: (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 24 24", width: sizeMap[size], height: sizeMap[size], "aria-hidden": "true", fill: filled ? 'currentColor' : 'none', stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }) }) }, current));
+            return ((0, jsx_runtime_1.jsx)("button", { type: "button", role: "radio", "aria-checked": current <= value, "aria-label": `${current} star${current !== 1 ? 's' : ''}`, disabled: readOnly, className: (0, cn_js_1.cn)('tokis-rating-star', filled && 'tokis-rating-star--active', hovered !== null && filled && 'tokis-rating-star--hover'), style: { fontSize: sizeMap[size] }, onClick: () => onChange?.(current), onMouseEnter: () => !readOnly && setHovered(current), onMouseLeave: () => !readOnly && setHovered(null), onFocus: () => !readOnly && setHovered(current), onBlur: () => !readOnly && setHovered(null), children: (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 24 24", width: sizeMap[size], height: sizeMap[size], "aria-hidden": "true", fill: filled ? 'currentColor' : 'none', stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }) }) }, current));
         }) }));
 }
 function TransferList({ left, right, onChange, leftTitle = 'Available', rightTitle = 'Selected' }) {

package/dist/cjs/components/hover-card/index.js

@@ -52,6 +52,7 @@ function HoverCard({ trigger, content, placement = 'bottom', openDelay = 300, cl
     const [positioned, setPositioned] = (0, react_1.useState)(false);
     const [pos, setPos] = (0, react_1.useState)({ top: 0, left: 0 });
     const anchorRef = (0, react_1.useRef)(null);
+    const cardId = (0, react_1.useId)();
     const openTimer = (0, react_1.useRef)();
     const closeTimer = (0, react_1.useRef)();
     const show = (0, react_1.useCallback)(() => {
@@ -79,6 +80,7 @@ function HoverCard({ trigger, content, placement = 'bottom', openDelay = 300, cl
     };
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [react_1.default.cloneElement(trigger, {
                 ref: anchorRef,
+                'aria-describedby': visible ? cardId : undefined,
                 onMouseEnter: (...args) => {
                     show();
                     trigger.props.onMouseEnter?.(...args);
@@ -95,7 +97,7 @@ function HoverCard({ trigger, content, placement = 'bottom', openDelay = 300, cl
                     hide();
                     trigger.props.onBlur?.(...args);
                 },
-            }), visible && ((0, jsx_runtime_1.jsx)(index_js_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, cn_js_1.cn)('tokis-hover-card', `tokis-hover-card--${placement}`, className), style: {
+            }), visible && ((0, jsx_runtime_1.jsx)(index_js_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { id: cardId, role: "tooltip", className: (0, cn_js_1.cn)('tokis-hover-card', `tokis-hover-card--${placement}`, className), style: {
                         position: 'fixed',
                         top: pos.top,
                         left: pos.left,

package/dist/cjs/components/pagination/index.js

@@ -41,6 +41,6 @@ function Pagination({ page, totalPages, onChange, siblingCount = 1, className, }
                     return ((0, jsx_runtime_1.jsx)("span", { className: "tokis-pagination__ellipsis", "aria-hidden": "true", children: "\u2026" }, item));
                 }
                 const isActive = item === page;
-                return ((0, jsx_runtime_1.jsx)("button", { className: (0, cn_js_1.cn)('tokis-pagination__item', isActive && 'tokis-pagination__item--active'), onClick: () => onChange(item), "aria-label": `Go to page ${item}`, "aria-current": isActive ? 'page' : undefined, disabled: isActive, children: item }, `${item}-${index}`));
+                return ((0, jsx_runtime_1.jsx)("button", { className: (0, cn_js_1.cn)('tokis-pagination__item', isActive && 'tokis-pagination__item--active'), onClick: isActive ? undefined : () => onChange(item), "aria-label": isActive ? `Page ${item}, current page` : `Go to page ${item}`, "aria-current": isActive ? 'page' : undefined, children: item }, `${item}-${index}`));
             }), (0, jsx_runtime_1.jsx)("button", { className: (0, cn_js_1.cn)('tokis-pagination__item', 'tokis-pagination__next', page === totalPages && 'tokis-pagination__item--disabled'), onClick: handleNext, disabled: page === totalPages, "aria-label": "Go to next page", "aria-disabled": page === totalPages, children: (0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "M6 4l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }));
 }

package/dist/cjs/components/popover/index.js

@@ -44,6 +44,7 @@ function Popover({ trigger, content, title, placement = 'bottom-start', open, de
     const [pos, setPos] = (0, react_1.useState)({ top: 0, left: 0 });
     const triggerRef = (0, react_1.useRef)(null);
     const contentRef = (0, react_1.useRef)(null);
+    const previousFocusRef = (0, react_1.useRef)(null);
     const popoverId = (0, react_1.useId)();
     const setOpen = (0, react_1.useCallback)((val) => {
         if (open === undefined)
@@ -103,7 +104,29 @@ function Popover({ trigger, content, title, placement = 'bottom-start', open, de
         document.addEventListener('keydown', h);
         return () => document.removeEventListener('keydown', h);
     }, [isOpen, closeOnEsc, setOpen]);
-    const handleToggle = () => { updatePosition(); setOpen(!isOpen); };
+    // Move focus into popover on open; restore it to the trigger on close
+    (0, react_1.useEffect)(() => {
+        if (isOpen) {
+            requestAnimationFrame(() => {
+                if (!contentRef.current)
+                    return;
+                const focusableSelectors = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+                const firstFocusable = contentRef.current.querySelector(focusableSelectors);
+                (firstFocusable ?? contentRef.current).focus();
+            });
+        }
+        else if (previousFocusRef.current) {
+            previousFocusRef.current.focus();
+            previousFocusRef.current = null;
+        }
+    }, [isOpen]);
+    const handleToggle = () => {
+        if (!isOpen) {
+            previousFocusRef.current = document.activeElement;
+        }
+        updatePosition();
+        setOpen(!isOpen);
+    };
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [react_1.default.cloneElement(trigger, {
                 ref: triggerRef,
                 'aria-expanded': isOpen,

package/dist/cjs/components/radio/index.js

@@ -1,60 +1,43 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const cn_js_1 = require("../../utils/cn");
-function Radio({ value, label, description, disabled = false, checked = false, name, onChange, className }) {
+const RadioGroupContext = (0, react_1.createContext)(null);
+function Radio({ value, label, description, disabled = false, checked, name, onChange, className }) {
+    const ctx = (0, react_1.useContext)(RadioGroupContext);
     const autoId = (0, react_1.useId)();
     const radioId = `radio-${autoId}`;
     const descId = description ? `${radioId}-desc` : undefined;
-    return ((0, jsx_runtime_1.jsxs)("label", { className: (0, cn_js_1.cn)('tokis-radio-root', className), "data-disabled": disabled || undefined, htmlFor: radioId, children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", id: radioId, name: name, value: value, checked: checked, disabled: disabled, onChange: (e) => e.target.checked && onChange?.(value), className: "tokis-radio-native", "aria-describedby": descId }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", className: "tokis-radio-control", "data-checked": checked ? 'true' : undefined }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", { children: [label && (0, jsx_runtime_1.jsx)("span", { className: "tokis-radio-label", children: label }), description && (0, jsx_runtime_1.jsx)("p", { id: descId, className: "tokis-radio-description", children: description })] }))] }));
+    // When inside a RadioGroup, use context values; otherwise fall back to own props.
+    const resolvedName = ctx?.name ?? name ?? '';
+    const resolvedChecked = ctx ? ctx.value === value : (checked ?? false);
+    const resolvedDisabled = ctx ? (ctx.groupDisabled || disabled) : disabled;
+    const handleChange = (e) => {
+        if (!e.target.checked)
+            return;
+        if (ctx) {
+            ctx.onChange?.(value);
+        }
+        else {
+            onChange?.(value);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("label", { className: (0, cn_js_1.cn)('tokis-radio-root', className), "data-disabled": resolvedDisabled || undefined, htmlFor: radioId, children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", id: radioId, name: resolvedName, value: value, checked: resolvedChecked, disabled: resolvedDisabled, onChange: handleChange, className: "tokis-radio-native", "aria-describedby": descId }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", className: "tokis-radio-control", "data-checked": resolvedChecked ? 'true' : undefined }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", { children: [label && (0, jsx_runtime_1.jsx)("span", { className: "tokis-radio-label", children: label }), description && (0, jsx_runtime_1.jsx)("p", { id: descId, className: "tokis-radio-description", children: description })] }))] }));
 }
-function RadioGroup({ value, onChange, name, orientation = 'vertical', disabled = false, children, className, label }) {
+function RadioGroup({ value: controlledValue, defaultValue, onChange, name, orientation = 'vertical', disabled = false, children, className, label, }) {
     const groupId = (0, react_1.useId)();
-    return ((0, jsx_runtime_1.jsxs)("div", { role: "radiogroup", "aria-labelledby": label ? groupId : undefined, "aria-disabled": disabled, className: (0, cn_js_1.cn)('tokis-radio-group', orientation === 'horizontal' && 'tokis-radio-group--horizontal', className), children: [label && (0, jsx_runtime_1.jsx)("span", { id: groupId, className: "tokis-label", style: { marginBottom: 'var(--tokis-spacing-1)' }, children: label }), react_1.default.Children.map(children, (child) => {
-                if (!react_1.default.isValidElement(child))
-                    return child;
-                const item = child;
-                return react_1.default.cloneElement(item, {
-                    name: name ?? groupId,
-                    checked: value !== undefined ? item.props.value === value : item.props.checked,
-                    disabled: disabled || item.props.disabled,
-                    onChange: (v) => onChange?.(v),
-                });
-            })] }));
+    const resolvedName = name ?? groupId;
+    // Support uncontrolled usage via defaultValue
+    const [uncontrolledValue, setUncontrolledValue] = (0, react_1.useState)(defaultValue);
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : uncontrolledValue;
+    const handleChange = (v) => {
+        if (!isControlled)
+            setUncontrolledValue(v);
+        onChange?.(v);
+    };
+    return ((0, jsx_runtime_1.jsx)(RadioGroupContext.Provider, { value: { name: resolvedName, value, groupDisabled: disabled, onChange: handleChange }, children: (0, jsx_runtime_1.jsxs)("div", { role: "radiogroup", "aria-labelledby": label ? groupId : undefined, "aria-disabled": disabled || undefined, className: (0, cn_js_1.cn)('tokis-radio-group', orientation === 'horizontal' && 'tokis-radio-group--horizontal', className), children: [label && (0, jsx_runtime_1.jsx)("span", { id: groupId, className: "tokis-label", style: { marginBottom: 'var(--tokis-spacing-1)' }, children: label }), children] }) }));
 }

package/dist/components/avatar/index.d.ts

@@ -21,6 +21,9 @@ export type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'erro
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     variant?: BadgeVariant;
     dot?: boolean;
+    /** Text alternative for screen readers when using the dot indicator.
+     *  Required for WCAG 1.1.1 compliance when `dot={true}` conveys status information. */
+    dotLabel?: string;
 }
 export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
 export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {

package/dist/components/avatar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE9C,MAAM,WAAW,WAAW;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,eAAO,MAAM,MAAM,oFASjB,CAAC;AAGH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAW,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAetF;AAGD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAExG,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,eAAO,MAAM,KAAK,oFAQhB,CAAC;AAIH,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,IAAI,kFA6Bf,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE9C,MAAM,WAAW,WAAW;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,eAAO,MAAM,MAAM,oFASjB,CAAC;AAGH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAW,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAetF;AAGD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAExG,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;2FACuF;IACvF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,KAAK,oFAShB,CAAC;AAIH,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,IAAI,kFA6Bf,CAAC"}

package/dist/components/avatar/index.js

@@ -12,7 +12,7 @@ export function AvatarGroup({ children, max, size = 'md', className }) {
     const overflow = max && items.length > max ? items.length - max : 0;
     return (_jsxs("div", { className: cn('tokis-avatar-group', className), children: [visible, overflow > 0 && (_jsxs("div", { className: cn('tokis-avatar', `tokis-avatar--${size}`), "aria-label": `${overflow} more`, children: ["+", overflow] }))] }));
 }
-export const Badge = forwardRef(({ variant = 'default', dot = false, className, children, ...props }, ref) => (_jsx("span", { ref: ref, className: cn('tokis-badge', `tokis-badge--${variant}`, dot && 'tokis-badge--dot', className), ...props, children: children })));
+export const Badge = forwardRef(({ variant = 'default', dot = false, dotLabel, className, children, ...props }, ref) => (_jsxs("span", { ref: ref, className: cn('tokis-badge', `tokis-badge--${variant}`, dot && 'tokis-badge--dot', className), ...props, children: [dot && dotLabel && _jsx("span", { className: "tokis-sr-only", children: dotLabel }), children] })));
 Badge.displayName = 'Badge';
 export const Chip = forwardRef(({ selected = false, onDelete, disabled = false, icon, className, children, onClick, ...props }, ref) => (_jsxs("div", { ref: ref, role: onClick ? 'button' : undefined, tabIndex: onClick && !disabled ? 0 : undefined, "aria-pressed": onClick ? selected : undefined, "aria-disabled": disabled || undefined, className: cn('tokis-chip', onClick && 'tokis-chip--clickable', selected && 'tokis-chip--selected', className), onClick: !disabled ? onClick : undefined, onKeyDown: onClick && !disabled ? (e) => { if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();

package/dist/components/avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/avatar/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/avatar/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/card/index.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface CardProps extends React.HTMLAttributes<HTMLElement> {
     variant?: 'default' | 'elevated' | 'ghost';
     clickable?: boolean;
+    /** Override the rendered element. Defaults to `article` for non-clickable cards
+     *  (semantic grouping for screen readers) and `div` for clickable cards. */
+    as?: React.ElementType;
 }
-export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLElement>>;
 export declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export declare const CardBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AACD,eAAO,MAAM,IAAI,kFAQf,CAAC;AAGH,eAAO,MAAM,UAAU,6GAErB,CAAC;AAGH,eAAO,MAAM,QAAQ,6GAEnB,CAAC;AAGH,eAAO,MAAM,UAAU,6GAErB,CAAC;AAGH,eAAO,MAAM,SAAS,qHAEpB,CAAC;AAGH,eAAO,MAAM,eAAe,yHAE1B,CAAC;AAIH,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACrE,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AACD,eAAO,MAAM,OAAO,oFAiBlB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAClE,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;gFAC4E;IAC5E,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CACxB;AACD,eAAO,MAAM,IAAI,+EAWf,CAAC;AAGH,eAAO,MAAM,UAAU,6GAErB,CAAC;AAGH,eAAO,MAAM,QAAQ,6GAEnB,CAAC;AAGH,eAAO,MAAM,UAAU,6GAErB,CAAC;AAGH,eAAO,MAAM,SAAS,qHAEpB,CAAC;AAGH,eAAO,MAAM,eAAe,yHAE1B,CAAC;AAIH,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACrE,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AACD,eAAO,MAAM,OAAO,oFAiBlB,CAAC"}

package/dist/components/card/index.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { cn } from '../../utils/cn.js';
-export const Card = forwardRef(({ variant = 'default', clickable = false, className, children, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('tokis-card', variant !== 'default' && `tokis-card--${variant}`, clickable && 'tokis-card--clickable', className), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, ...props, children: children })));
+export const Card = forwardRef(({ variant = 'default', clickable = false, as: Tag, className, children, ...props }, ref) => {
+    const Component = Tag ?? (clickable ? 'div' : 'article');
+    return (_jsx(Component, { ref: ref, className: cn('tokis-card', variant !== 'default' && `tokis-card--${variant}`, clickable && 'tokis-card--clickable', className), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, ...props, children: children }));
+});
 Card.displayName = 'Card';
 export const CardHeader = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('tokis-card-header', className), ...props })));
 CardHeader.displayName = 'CardHeader';