@selectwin/kit 0.1.208 → 0.1.210

package/dist/SelectDetail.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode, ComponentPropsWithoutRef } from 'react';
-export declare function SelectDetailList({ children, stacked, compact, loading, }: {
+import { ReactNode, HTMLAttributes, ComponentPropsWithoutRef } from 'react';
+type SelectDetailListOwnProps = {
     children: ReactNode;
     stacked?: boolean;
     /**
@@ -10,7 +10,11 @@ export declare function SelectDetailList({ children, stacked, compact, loading,
     compact?: boolean;
     /** Shimmer every row's value. The labels stay — only the values are unknown. */
     loading?: boolean;
-}): import("react").JSX.Element;
+    /** 0.1.210: `dl` desenha a lista de definição (`<dl>`, `<dt>`, `<dd>`). Padrão `div`, como antes. */
+    as?: 'div' | 'dl';
+};
+export type SelectDetailListProps = SelectDetailListOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectDetailListOwnProps>;
+export declare function SelectDetailList({ children, stacked, compact, loading, as, className, ...rest }: SelectDetailListProps): import("react").JSX.Element;
 type SelectDetailRowOwnProps = {
     label: ReactNode;
     children: ReactNode;
@@ -21,5 +25,5 @@ type SelectDetailRowOwnProps = {
     loading?: boolean;
 };
 export type SelectDetailRowProps = SelectDetailRowOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectDetailRowOwnProps>;
-export declare const SelectDetailRow: import('react').ForwardRefExoticComponent<SelectDetailRowOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectDetailRowOwnProps> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectDetailRow: import('react').ForwardRefExoticComponent<SelectDetailRowOwnProps & Omit<Omit<import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectDetailRowOwnProps> & import('react').RefAttributes<HTMLDivElement>>;
 export {};

package/dist/SelectDetail.js

@@ -3,40 +3,44 @@ import { useSelectReveal as e } from "./internal/useSelectReveal.js";
 import { createContext as t, forwardRef as n, useContext as r } from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/SelectDetail.tsx
-var o = t(!1);
-function s({ children: t, stacked: n = !1, compact: r = !1, loading: a = !1 }) {
-	let s = e({
+var o = t(!1), s = t(!1);
+function c({ children: t, stacked: n = !1, compact: r = !1, loading: a = !1, as: c = "div", className: l, ...u }) {
+	let d = e({
 		selector: ".select-detail",
 		y: 8,
 		duration: .45,
 		stagger: .05,
 		scroll: !0
-	});
+	}), f = `select-detaillist${n ? " select-detaillist--stacked" : ""}${r ? " select-detaillist--compact" : ""}${l ? " " + l : ""}`;
 	return /* @__PURE__ */ i(o.Provider, {
 		value: a,
-		children: /* @__PURE__ */ i("div", {
-			className: `select-detaillist${n ? " select-detaillist--stacked" : ""}${r ? " select-detaillist--compact" : ""}`,
-			ref: s,
-			children: t
+		children: /* @__PURE__ */ i(s.Provider, {
+			value: c === "dl",
+			children: i(c === "dl" ? "dl" : "div", {
+				...u,
+				className: f,
+				ref: d,
+				children: t
+			})
 		})
 	});
 }
-var c = n(function({ label: e, children: t, action: n, align: s = "center", loading: c, className: l, ...u }, d) {
-	let f = r(o), p = c ?? f;
+var l = n(function({ label: e, children: t, action: n, align: c = "center", loading: l, className: u, ...d }, f) {
+	let p = r(o), m = l ?? p, h = r(s), g = h ? "dt" : "div", _ = h ? "dd" : "div";
 	return /* @__PURE__ */ a("div", {
-		ref: d,
-		...u,
-		className: `select-detail select-detail--${s}${l ? " " + l : ""}`,
+		ref: f,
+		...d,
+		className: `select-detail select-detail--${c}${u ? " " + u : ""}`,
 		children: [
-			/* @__PURE__ */ i("div", {
+			/* @__PURE__ */ i(g, {
 				className: "select-detail__label",
 				children: e
 			}),
-			/* @__PURE__ */ i("div", {
+			/* @__PURE__ */ i(_, {
 				className: "select-detail__value",
-				children: p ? /* @__PURE__ */ i("span", { className: "select-skeleton select-detail__skel" }) : t
+				children: m ? /* @__PURE__ */ i("span", { className: "select-skeleton select-detail__skel" }) : t
 			}),
-			n && /* @__PURE__ */ i("div", {
+			n && /* @__PURE__ */ i(_, {
 				className: "select-detail__action",
 				children: n
 			})
@@ -44,6 +48,6 @@ var c = n(function({ label: e, children: t, action: n, align: s = "center", load
 	});
 });
 //#endregion
-export { s as SelectDetailList, c as SelectDetailRow };
+export { c as SelectDetailList, l as SelectDetailRow };
 
 //# sourceMappingURL=SelectDetail.js.map

package/dist/SelectKpiBand.d.ts

@@ -1,7 +1,9 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode, HTMLAttributes } from 'react';
 type SelectKpiBandOwnProps = {
     children: ReactNode;
+    /** 0.1.210: `dl` para a faixa de números só de leitura (os `SelectKpiCard` viram `<dt>` e `<dd>`). Padrão `div`. */
+    as?: 'div' | 'dl';
 };
 export type SelectKpiBandProps = SelectKpiBandOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectKpiBandOwnProps>;
-export declare const SelectKpiBand: import('react').ForwardRefExoticComponent<SelectKpiBandOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectKpiBand: import('react').ForwardRefExoticComponent<SelectKpiBandOwnProps & Omit<Omit<import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectKpiBandOwnProps> & import('react').RefAttributes<HTMLDivElement>>;
 export {};

package/dist/SelectKpiBand.js

@@ -1,17 +1,28 @@
 /* empty css           */
-import { forwardRef as e } from "react";
-import { jsx as t } from "react/jsx-runtime";
+import { useInsideFrame as e } from "./internal/frame.js";
+import { KpiListContext as t } from "./internal/kpiList.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/SelectKpiBand.tsx
-var n = e(function({ children: e, className: n, ...r }, i) {
-	return /* @__PURE__ */ t("div", {
-		ref: i,
+var i = n(function({ children: n, as: i = "div", className: a, ...o }, s) {
+	let c = `select-kpiband${e() ? " select-kpiband--nested" : ""}${a ? " " + a : ""}`;
+	return i === "dl" ? /* @__PURE__ */ r(t.Provider, {
+		value: !0,
+		children: /* @__PURE__ */ r("dl", {
+			ref: s,
+			...o,
+			className: c,
+			children: n
+		})
+	}) : /* @__PURE__ */ r("div", {
+		ref: s,
 		role: "group",
-		...r,
-		className: `select-kpiband${n ? " " + n : ""}`,
-		children: e
+		...o,
+		className: c,
+		children: n
 	});
 });
 //#endregion
-export { n as SelectKpiBand };
+export { i as SelectKpiBand };
 
 //# sourceMappingURL=SelectKpiBand.js.map

package/dist/SelectKpiCard.js

@@ -1,54 +1,59 @@
 import { SelectInfoTip as e } from "./SelectInfoTip.js";
-import { forwardRef as t } from "react";
-import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useKpiList as t } from "./internal/kpiList.js";
+import { forwardRef as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/SelectKpiCard.tsx
-var a = t(function({ label: t, value: a, caption: o, chart: s, help: c, tone: l, bare: u = !1, onClick: d, selected: f = !1, loading: p = !1, className: m, ...h }, g) {
-	let _ = d != null, v = _ ? {
+var o = n(function({ label: n, value: o, caption: s, chart: c, help: l, tone: u, bare: d = !1, onClick: f, selected: p = !1, loading: m = !1, className: h, ...g }, _) {
+	let v = f != null, y = t(), b = y ? "dt" : "span", x = y ? "dd" : "span", S = y ? "dd" : "div", C = v ? {
 		role: "button",
 		tabIndex: 0,
-		"aria-pressed": f,
-		onClick: d,
+		"aria-pressed": p,
+		onClick: f,
 		onKeyDown: (e) => {
-			e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), d());
+			e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), f());
 		}
-	} : {}, y = "select-kpi" + (u ? " select-kpi--bare" : "") + (_ ? " select-kpi--interactive" : "") + (_ && f ? " select-kpi--selected" : "") + (m ? " " + m : "");
-	return /* @__PURE__ */ i("div", {
-		ref: g,
-		...h,
-		...v,
-		className: y,
-		children: [/* @__PURE__ */ i("span", {
-			className: `select-kpi__label${c == null ? "" : " select-kpi__label--help"}`,
-			children: [c == null ? t : /* @__PURE__ */ r("span", {
+	} : {}, w = "select-kpi" + (d ? " select-kpi--bare" : "") + (v ? " select-kpi--interactive" : "") + (v && p ? " select-kpi--selected" : "") + (h ? " " + h : "");
+	return /* @__PURE__ */ a("div", {
+		ref: _,
+		...g,
+		...C,
+		className: w,
+		children: [/* @__PURE__ */ a(b, {
+			className: `select-kpi__label${l == null ? "" : " select-kpi__label--help"}`,
+			children: [l == null ? n : /* @__PURE__ */ i("span", {
 				className: "select-kpi__labeltext",
-				children: t
-			}), c != null && /* @__PURE__ */ r(e, {
-				content: c,
+				children: n
+			}), l != null && /* @__PURE__ */ i(e, {
+				content: l,
 				placement: "top-end"
 			})]
-		}), p ? /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("span", {
+		}), m ? y ? /* @__PURE__ */ a("dd", {
+			className: "select-kpi__loading",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ i("span", { className: "select-skeleton select-kpi__skelvalue" }), /* @__PURE__ */ i("span", { className: "select-skeleton select-kpi__skelcaption" })]
+		}) : /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("span", {
 			className: "select-skeleton select-kpi__skelvalue",
 			"aria-hidden": "true"
-		}), /* @__PURE__ */ r("span", {
+		}), /* @__PURE__ */ i("span", {
 			className: "select-skeleton select-kpi__skelcaption",
 			"aria-hidden": "true"
-		})] }) : /* @__PURE__ */ i(n, { children: [
-			/* @__PURE__ */ r("span", {
-				className: `select-kpi__value${l ? ` select-kpi__value--${l}` : ""}`,
-				children: a
+		})] }) : /* @__PURE__ */ a(r, { children: [
+			/* @__PURE__ */ i(x, {
+				className: `select-kpi__value${u ? ` select-kpi__value--${u}` : ""}`,
+				children: o
 			}),
-			s != null && /* @__PURE__ */ r("div", {
+			c != null && /* @__PURE__ */ i(S, {
 				className: "select-kpi__chart",
-				children: s
+				children: c
 			}),
-			o != null && /* @__PURE__ */ r("span", {
+			s != null && /* @__PURE__ */ i(x, {
 				className: "select-kpi__caption",
-				children: o
+				children: s
 			})
 		] })]
 	});
 });
 //#endregion
-export { a as SelectKpiCard };
+export { o as SelectKpiCard };
 
 //# sourceMappingURL=SelectKpiCard.js.map

package/dist/SelectLocale.d.ts

@@ -25,6 +25,8 @@ export interface SelectKitMessages {
         optional: string;
         notifications: string;
         needsAttention: string;
+        /** 0.1.209: o passo feito, para o leitor de tela (o visto do número é decorativo). */
+        done: string;
     };
     pagination: {
         label: string;

package/dist/SelectLocale.js

@@ -24,7 +24,8 @@ var r = {
 			hidePassword: "Ocultar senha",
 			optional: "(opcional)",
 			notifications: "Notificações",
-			needsAttention: "precisa de atenção"
+			needsAttention: "precisa de atenção",
+			done: "feito"
 		},
 		pagination: {
 			label: "Paginação",
@@ -111,7 +112,8 @@ var r = {
 			hidePassword: "Hide password",
 			optional: "(optional)",
 			notifications: "Notifications",
-			needsAttention: "needs attention"
+			needsAttention: "needs attention",
+			done: "done"
 		},
 		pagination: {
 			label: "Pagination",

package/dist/SelectPagination.d.ts

@@ -19,5 +19,10 @@ export interface SelectPaginationProps {
     onPage?: (page: number) => void;
     /** Noun for the count label, e.g. "produtos". Defaults to "resultados" ("results" in English, `SelectLocaleProvider`). */
     noun?: string;
+    /**
+     * 0.1.210: a próxima página está chegando (a lista por cursor pede ao servidor). O "próxima" gira e fica
+     * `aria-busy`/`aria-disabled` sem perder o foco (o `disabled` o jogaria no `<body>`), e não aceita outro clique.
+     */
+    loading?: boolean;
 }
 export declare const SelectPagination: import('react').ForwardRefExoticComponent<SelectPaginationProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, keyof SelectPaginationProps> & import('react').RefAttributes<HTMLElement>>;

package/dist/SelectPagination.js

@@ -1,10 +1,11 @@
 /* empty css           */
-import { ChevronLeftIcon as e, ChevronRightIcon as t } from "./icons.js";
-import { formatSelectNumber as n, useSelectLocale as r, useSelectMessages as i } from "./SelectLocale.js";
-import { forwardRef as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { SelectSpinner as e } from "./SelectSpinner.js";
+import { ChevronLeftIcon as t, ChevronRightIcon as n } from "./icons.js";
+import { formatSelectNumber as r, useSelectLocale as i, useSelectMessages as a } from "./SelectLocale.js";
+import { forwardRef as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/SelectPagination.tsx
-function c(e, t) {
+function l(e, t) {
 	let n = [.../* @__PURE__ */ new Set([
 		1,
 		t,
@@ -15,7 +16,7 @@ function c(e, t) {
 	for (let e of n) e - i > 1 && r.push("gap"), r.push(e), i = e;
 	return r;
 }
-function l(e, t, n, r, i, a, o, s) {
+function u(e, t, n, r, i, a, o, s) {
 	let c = [];
 	if (e != null) {
 		if (e === 0) c.push(o.count(s(0), i));
@@ -26,50 +27,53 @@ function l(e, t, n, r, i, a, o, s) {
 	}
 	return a && r != null && r > 0 && c.push(o.pageOf(s(n), s(r))), c;
 }
-var u = a(function({ page: a, pageCount: u, total: d, pageSize: f, hasPrevious: p, hasNext: m, onPrevious: h, onNext: g, onPage: _, noun: v, className: y, ...b }, x) {
-	let S = i().pagination, C = r(), w = (e) => n(e, C), T = v ?? S.noun, E = p ?? a > 1, D = m ?? (u == null || a < u), O = h ?? (_ ? () => _(a - 1) : void 0), k = g ?? (_ ? () => _(a + 1) : void 0), A = u != null && u > 1 && _ != null, j = A ? c(a, u) : [], M = l(d, f, a, u, T, A, S, w);
-	return /* @__PURE__ */ s("nav", {
-		ref: x,
-		...b,
-		className: `select-pagination${y ? " " + y : ""}`,
-		"aria-label": S.label,
-		children: [/* @__PURE__ */ s("div", {
+var d = o(function({ page: o, pageCount: d, total: f, pageSize: p, hasPrevious: m, hasNext: h, onPrevious: g, onNext: _, onPage: v, noun: y, loading: b = !1, className: x, ...S }, C) {
+	let w = a().pagination, T = i(), E = (e) => r(e, T), D = y ?? w.noun, O = m ?? o > 1, k = h ?? (d == null || o < d), A = g ?? (v ? () => v(o - 1) : void 0), j = _ ?? (v ? () => v(o + 1) : void 0), M = d != null && d > 1 && v != null, N = M ? l(o, d) : [], P = u(f, p, o, d, D, M, w, E);
+	return /* @__PURE__ */ c("nav", {
+		ref: C,
+		...S,
+		className: `select-pagination${x ? " " + x : ""}`,
+		"aria-label": w.label,
+		children: [/* @__PURE__ */ c("div", {
 			className: "select-pagination__controls",
 			children: [
-				/* @__PURE__ */ o("button", {
+				/* @__PURE__ */ s("button", {
 					type: "button",
 					className: "select-pagination__nav",
-					onClick: O,
-					disabled: !E || !O,
-					"aria-label": S.previous,
-					children: /* @__PURE__ */ o(e, {})
+					onClick: A,
+					disabled: !O || !A,
+					"aria-label": w.previous,
+					children: /* @__PURE__ */ s(t, {})
 				}),
-				A ? j.map((e, t) => e === "gap" ? /* @__PURE__ */ o("span", {
+				M ? N.map((e, t) => e === "gap" ? /* @__PURE__ */ s("span", {
 					className: "select-pagination__gap",
 					"aria-hidden": "true",
 					children: "…"
-				}, `gap-${t}`) : /* @__PURE__ */ o("button", {
+				}, `gap-${t}`) : /* @__PURE__ */ s("button", {
 					type: "button",
-					className: `select-pagination__page${e === a ? " is-active" : ""}`,
-					onClick: () => _ == null ? void 0 : _(e),
-					"aria-current": e === a ? "page" : void 0,
+					className: `select-pagination__page${e === o ? " is-active" : ""}`,
+					onClick: () => v == null ? void 0 : v(e),
+					"aria-current": e === o ? "page" : void 0,
 					children: e
-				}, e)) : /* @__PURE__ */ o("span", {
+				}, e)) : /* @__PURE__ */ s("span", {
 					className: "select-pagination__current",
-					children: u == null ? S.page(w(a)) : `${w(a)} / ${w(u)}`
+					"aria-live": "polite",
+					children: d == null ? w.page(E(o)) : `${E(o)} / ${E(d)}`
 				}),
-				/* @__PURE__ */ o("button", {
+				/* @__PURE__ */ s("button", {
 					type: "button",
 					className: "select-pagination__nav",
-					onClick: k,
-					disabled: !D || !k,
-					"aria-label": S.next,
-					children: /* @__PURE__ */ o(t, {})
+					onClick: b ? void 0 : j,
+					disabled: !k || !j,
+					"aria-disabled": b || void 0,
+					"aria-busy": b || void 0,
+					"aria-label": w.next,
+					children: b ? /* @__PURE__ */ s(e, { size: "sm" }) : /* @__PURE__ */ s(n, {})
 				})
 			]
-		}), M.length > 0 && /* @__PURE__ */ o("p", {
+		}), P.length > 0 && /* @__PURE__ */ s("p", {
 			className: "select-pagination__count",
-			children: M.map((e, t) => /* @__PURE__ */ o("span", {
+			children: P.map((e, t) => /* @__PURE__ */ s("span", {
 				className: "select-pagination__part",
 				children: t > 0 ? ` · ${e}` : e
 			}, t))
@@ -77,6 +81,6 @@ var u = a(function({ page: a, pageCount: u, total: d, pageSize: f, hasPrevious:
 	});
 });
 //#endregion
-export { u as SelectPagination };
+export { d as SelectPagination };
 
 //# sourceMappingURL=SelectPagination.js.map

package/dist/SelectSegmented.d.ts

@@ -25,6 +25,10 @@ type SelectSegmentedOwnProps = {
     disabled?: boolean;
     /** A recusa da escolha (0.1.141): a trilha com o contorno de erro e a frase embaixo, no lugar do `hint`. */
     error?: ReactNode;
+    /** `tabs` (padrão): a trilha troca um painel (tablist). `radio` (0.1.209): uma escolha (radiogroup). */
+    semantics?: 'tabs' | 'radio';
+    /** `sm` (0.1.209): o tier pequeno (28px) fora de um `.select-dense` — a linha de um menu, o cabeçalho de um cartão. */
+    size?: 'md' | 'sm';
 };
 export type SelectSegmentedProps = SelectSegmentedOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectSegmentedOwnProps>;
 export declare const SelectSegmented: import('react').ForwardRefExoticComponent<SelectSegmentedOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectSegmentedOwnProps> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/SelectSegmented.js

@@ -1,51 +1,61 @@
 import { forwardRef as e, useId as t, useLayoutEffect as n, useRef as r, useState as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/SelectSegmented.tsx
-var s = e(function({ value: e, onChange: s, options: c, ariaLabel: l, fullWidth: u = !1, label: d, hint: f, disabled: p = !1, error: m, className: h, ...g }, _) {
-	let v = t(), y = Math.max(0, c.findIndex((t) => t.value === e)), b = r([]), [x, S] = i(null), C = c.map((e) => e.count ?? "").join(",");
+var s = e(function({ value: e, onChange: s, options: c, ariaLabel: l, fullWidth: u = !1, label: d, hint: f, disabled: p = !1, error: m, semantics: h = "tabs", size: g = "md", className: _, ...v }, y) {
+	let b = t(), x = Math.max(0, c.findIndex((t) => t.value === e)), S = r([]), [C, w] = i(null), T = h === "radio", E = c.map((e) => e.count ?? "").join(",");
 	n(() => {
 		let e = () => {
-			let e = b.current[y];
+			let e = S.current[x];
 			if (!e) return;
 			let t = {
 				left: e.offsetLeft,
 				width: e.offsetWidth
 			};
-			S((e) => e && e.left === t.left && e.width === t.width ? e : t);
+			w((e) => e && e.left === t.left && e.width === t.width ? e : t);
 		};
 		e();
 		let t = typeof ResizeObserver < "u" ? new ResizeObserver(e) : null;
-		return b.current.forEach((e) => e && (t == null ? void 0 : t.observe(e))), () => t == null ? void 0 : t.disconnect();
+		return S.current.forEach((e) => e && (t == null ? void 0 : t.observe(e))), () => t == null ? void 0 : t.disconnect();
 	}, [
-		y,
+		x,
 		c.length,
-		C
+		E
 	]);
-	let w = x ? {
-		left: x.left,
-		width: x.width,
+	let D = C ? {
+		left: C.left,
+		width: C.width,
 		opacity: 1
-	} : { opacity: 0 }, T = /* @__PURE__ */ o("div", {
-		ref: d == null ? _ : void 0,
-		...d == null ? g : {},
-		className: `select-segmented${u ? " select-segmented--full" : ""}${p ? " select-segmented--disabled" : ""}${m != null && m !== !1 ? " select-segmented--error" : ""}${d == null && h ? " " + h : ""}`,
-		role: "tablist",
+	} : { opacity: 0 }, O = d == null ? v : {}, k = (t) => {
+		var n, r;
+		if ((n = O.onKeyDown) == null || n.call(O, t), t.defaultPrevented || p || !c.length) return;
+		let i = S.current.findIndex((e) => e === t.target);
+		if (i < 0) return;
+		let a = t.key === "ArrowRight" || T && t.key === "ArrowDown", o = t.key === "ArrowLeft" || T && t.key === "ArrowUp", l = a ? (i + 1) % c.length : o ? (i - 1 + c.length) % c.length : t.key === "Home" ? 0 : t.key === "End" ? c.length - 1 : -1;
+		l < 0 || (t.preventDefault(), (r = S.current[l]) == null || r.focus(), c[l].value !== e && s(c[l].value));
+	}, A = /* @__PURE__ */ o("div", {
+		ref: d == null ? y : void 0,
+		...O,
+		className: `select-segmented${u ? " select-segmented--full" : ""}${g === "sm" ? " select-segmented--sm" : ""}${p ? " select-segmented--disabled" : ""}${m != null && m !== !1 ? " select-segmented--error" : ""}${d == null && _ ? " " + _ : ""}`,
+		role: T ? "radiogroup" : "tablist",
 		"aria-label": l,
-		"aria-labelledby": d != null && !l ? v : void 0,
+		"aria-labelledby": d != null && !l ? b : void 0,
 		"aria-disabled": p || void 0,
+		onKeyDown: k,
 		children: [/* @__PURE__ */ a("span", {
 			className: "select-segmented__pill",
 			"aria-hidden": "true",
-			style: w
+			style: D
 		}), c.map((t, n) => {
 			let r = t.value === e, i = !!t.count && t.count > 0, c = t.title && i ? `${t.title}, ${t.countLabel ?? t.count}` : t.title;
 			return /* @__PURE__ */ o("button", {
 				ref: (e) => {
-					b.current[n] = e;
+					S.current[n] = e;
 				},
 				type: "button",
-				role: "tab",
-				"aria-selected": r,
+				role: T ? "radio" : "tab",
+				"aria-selected": T ? void 0 : r,
+				"aria-checked": T ? r : void 0,
+				tabIndex: n === x ? 0 : -1,
 				className: `select-segmented__item${r ? " select-segmented__item--active" : ""}`,
 				title: t.title,
 				"aria-label": c,
@@ -58,28 +68,28 @@ var s = e(function({ value: e, onChange: s, options: c, ariaLabel: l, fullWidth:
 				}) : null]
 			}, t.value);
 		})]
-	}), E = m != null && m !== !1 && m !== "";
-	return d == null && !E ? T : d == null ? /* @__PURE__ */ o("div", {
+	}), j = m != null && m !== !1 && m !== "";
+	return d == null && !j ? A : d == null ? /* @__PURE__ */ o("div", {
 		className: "select-field",
-		children: [T, /* @__PURE__ */ a("p", {
+		children: [A, /* @__PURE__ */ a("p", {
 			className: "select-field__error",
 			children: m
 		})]
 	}) : /* @__PURE__ */ o("div", {
-		ref: _,
-		...g,
-		className: `select-field${h ? " " + h : ""}`,
+		ref: y,
+		...v,
+		className: `select-field${_ ? " " + _ : ""}`,
 		children: [
 			/* @__PURE__ */ a("div", {
 				className: "select-field__labelrow",
 				children: /* @__PURE__ */ a("span", {
 					className: "select-field__label",
-					id: v,
+					id: b,
 					children: d
 				})
 			}),
-			T,
-			E ? /* @__PURE__ */ a("p", {
+			A,
+			j ? /* @__PURE__ */ a("p", {
 				className: "select-field__error",
 				children: m
 			}) : f != null && /* @__PURE__ */ a("p", {

package/dist/SelectSteps.js

@@ -29,6 +29,14 @@ var o = n(function({ steps: n, current: o, onSelect: s, orientation: c = "horizo
 							")"
 						]
 					}),
+					l === "done" && /* @__PURE__ */ a("span", {
+						className: "select-steps__sr",
+						children: [
+							"(",
+							p.common.done,
+							")"
+						]
+					}),
 					m && c.description && /* @__PURE__ */ i("span", {
 						className: "select-steps__desc",
 						children: c.description

package/dist/SelectTabs.d.ts

@@ -4,6 +4,8 @@ export interface SelectTab {
     label: ReactNode;
     /** Status dot tone shown before the label. */
     dot?: 'success' | 'neutral' | 'warning';
+    /** O número do que a aba mostra (0.1.209), na língua do kit: as falhas das entregas, os itens de um estado. O 0 aparece. */
+    count?: number;
 }
 type SelectTabsOwnProps = {
     tabs: SelectTab[];
@@ -12,7 +14,9 @@ type SelectTabsOwnProps = {
     /** Right-aligned slot INSIDE the tab bar (shares the bottom border) — e.g. a board's
      *  "Personalizar" trigger. Controls inside render on the small (28px) tier. */
     end?: ReactNode;
+    /** O id do conteúdo que as abas trocam (0.1.209): vira o `aria-controls` de cada aba. */
+    panelId?: string;
 };
 export type SelectTabsProps = SelectTabsOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectTabsOwnProps>;
-export declare function SelectTabs({ tabs, value, onChange, end, className, ...rest }: SelectTabsProps): import("react").JSX.Element;
+export declare function SelectTabs({ tabs, value, onChange, end, panelId, className, onKeyDown, ...rest }: SelectTabsProps): import("react").JSX.Element;
 export {};