@selectwin/kit 0.1.207 → 0.1.209

package/dist/SelectCombobox.d.ts

@@ -35,6 +35,11 @@ type SelectComboboxOwnProps = {
     allowCustom?: boolean;
     /** Rótulo da linha do valor livre. Padrão: `Usar "…"`. */
     customLabel?: (query: string) => ReactNode;
+    /**
+     * 0.1.208: a largura mínima do campo. O combobox mede pelo valor escolhido; numa barra de filtros ele pularia a cada
+     * troca e empurraria o resto da barra. Um comprimento CSS (`'16rem'`).
+     */
+    minWidth?: string;
 };
 export type SelectComboboxProps = SelectComboboxOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectComboboxOwnProps>;
 export declare const SelectCombobox: import('react').ForwardRefExoticComponent<SelectComboboxOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectComboboxOwnProps> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/SelectCombobox.js

@@ -19,26 +19,30 @@ function f({ count: e, children: t }) {
 		children: t
 	});
 }
-var p = o(function({ label: i, value: o, onChange: p, options: m, placeholder: h, searchPlaceholder: g, labelAction: _, help: v, hint: y, error: b, emptyText: x, disabled: S, required: C, size: w = "md", searchable: T = !0, allowCustom: E = !1, customLabel: D, className: O, ...k }, A) {
-	let j = n(), M = h ?? j.common.selectPlaceholder, N = g ?? j.common.searchPlaceholder, P = x ?? j.common.noResults, F = s(), [I, L] = l(!1), [R, z] = l(""), B = m.find((e) => e.value === o), V = B ? B.label : E && o ? o : null, H = c(() => {
-		let e = R.trim().toLowerCase();
+var p = o(function({ label: i, value: o, onChange: p, options: m, placeholder: h, searchPlaceholder: g, labelAction: _, help: v, hint: y, error: b, emptyText: x, disabled: S, required: C, size: w = "md", searchable: T = !0, allowCustom: E = !1, customLabel: D, minWidth: O, className: k, style: A, ...j }, M) {
+	let N = n(), P = h ?? N.common.selectPlaceholder, F = g ?? N.common.searchPlaceholder, I = x ?? N.common.noResults, L = s(), [R, z] = l(!1), [B, V] = l(""), H = m.find((e) => e.value === o), U = H ? H.label : E && o ? o : null, W = c(() => {
+		let e = B.trim().toLowerCase();
 		return !T || !e ? m : m.filter((t) => {
 			var n;
 			return t.label.toLowerCase().includes(e) || ((n = t.secondary) == null ? void 0 : n.toLowerCase().includes(e));
 		});
 	}, [
 		m,
-		R,
+		B,
 		T
-	]), U = R.trim(), W = U ? m.find((e) => e.label.toLowerCase() === U.toLowerCase()) : void 0, G = E && T && U !== "" && !W, K = () => {
-		L(!1), z("");
-	}, q = (e) => {
-		p(e), K();
-	}, J = b ? `${F}-err` : y ? `${F}-hint` : void 0;
+	]), G = B.trim(), K = G ? m.find((e) => e.label.toLowerCase() === G.toLowerCase()) : void 0, q = E && T && G !== "" && !K, J = () => {
+		z(!1), V("");
+	}, Y = (e) => {
+		p(e), J();
+	}, X = b ? `${L}-err` : y ? `${L}-hint` : void 0;
 	return /* @__PURE__ */ d("div", {
-		ref: A,
-		...k,
-		className: `select-field${w === "sm" ? " select-field--sm" : ""}${O ? " " + O : ""}`,
+		ref: M,
+		...j,
+		style: O ? {
+			minWidth: O,
+			...A
+		} : A,
+		className: `select-field${w === "sm" ? " select-field--sm" : ""}${k ? " " + k : ""}`,
 		children: [
 			(i || v || _) && /* @__PURE__ */ d("div", {
 				className: "select-field__labelrow",
@@ -46,7 +50,7 @@ var p = o(function({ label: i, value: o, onChange: p, options: m, placeholder: h
 					className: "select-field__labelwrap",
 					children: [i && /* @__PURE__ */ u("label", {
 						className: "select-field__label",
-						htmlFor: F,
+						htmlFor: L,
 						children: i
 					}), v != null && v !== "" && /* @__PURE__ */ u(r, { content: v })]
 				}), _]
@@ -54,24 +58,24 @@ var p = o(function({ label: i, value: o, onChange: p, options: m, placeholder: h
 			/* @__PURE__ */ u("div", {
 				className: "select-combobox",
 				children: /* @__PURE__ */ u(a, {
-					active: I,
-					onClose: K,
+					active: R,
+					onClose: J,
 					placement: "bottom-start",
 					role: "listbox",
 					matchWidth: !0,
 					activator: /* @__PURE__ */ d("button", {
-						id: F,
+						id: L,
 						type: "button",
-						className: `select-combobox__trigger${b ? " select-input--error" : ""}${I ? " is-open" : ""}`,
-						onClick: () => I ? K() : L(!0),
+						className: `select-combobox__trigger${b ? " select-input--error" : ""}${R ? " is-open" : ""}`,
+						onClick: () => R ? J() : z(!0),
 						disabled: S,
 						"aria-haspopup": "listbox",
-						"aria-expanded": I,
+						"aria-expanded": R,
 						"aria-required": C || void 0,
-						"aria-describedby": J,
+						"aria-describedby": X,
 						children: [/* @__PURE__ */ u("span", {
-							className: `select-combobox__value${V == null ? " is-placeholder" : ""}`,
-							children: V ?? M
+							className: `select-combobox__value${U == null ? " is-placeholder" : ""}`,
+							children: U ?? P
 						}), /* @__PURE__ */ u("span", {
 							className: "select-combobox__caret",
 							"aria-hidden": "true",
@@ -85,33 +89,33 @@ var p = o(function({ label: i, value: o, onChange: p, options: m, placeholder: h
 							children: /* @__PURE__ */ u("input", {
 								className: "select-combobox__searchinput",
 								type: "text",
-								value: R,
-								onChange: (e) => z(e.target.value),
+								value: B,
+								onChange: (e) => V(e.target.value),
 								onKeyDown: (e) => {
-									e.key === "Enter" && E && U !== "" && (e.preventDefault(), q(W ? W.value : U));
+									e.key === "Enter" && E && G !== "" && (e.preventDefault(), Y(K ? K.value : G));
 								},
-								placeholder: N,
+								placeholder: F,
 								autoFocus: !0
 							})
 						}), /* @__PURE__ */ d(f, {
-							count: H.length + +!!G,
-							children: [G && /* @__PURE__ */ u("button", {
+							count: W.length + +!!q,
+							children: [q && /* @__PURE__ */ u("button", {
 								type: "button",
 								role: "option",
 								"aria-selected": !1,
 								className: "select-combobox__option select-combobox__option--custom",
-								onClick: () => q(U),
+								onClick: () => Y(G),
 								children: /* @__PURE__ */ u("span", {
 									className: "select-combobox__optiontext",
 									children: /* @__PURE__ */ u("span", {
 										className: "select-combobox__optionlabel",
-										children: D ? D(U) : `Usar “${U}”`
+										children: D ? D(G) : `Usar “${G}”`
 									})
 								})
-							}), H.length === 0 ? G ? null : /* @__PURE__ */ u("div", {
+							}), W.length === 0 ? q ? null : /* @__PURE__ */ u("div", {
 								className: "select-combobox__empty",
-								children: P
-							}) : H.map((t) => {
+								children: I
+							}) : W.map((t) => {
 								let n = t.value === o;
 								return /* @__PURE__ */ d("button", {
 									type: "button",
@@ -119,7 +123,7 @@ var p = o(function({ label: i, value: o, onChange: p, options: m, placeholder: h
 									"aria-selected": n,
 									disabled: t.disabled,
 									className: `select-combobox__option${n ? " is-selected" : ""}`,
-									onClick: () => q(t.value),
+									onClick: () => Y(t.value),
 									children: [/* @__PURE__ */ d("span", {
 										className: "select-combobox__optiontext",
 										children: [/* @__PURE__ */ u("span", {
@@ -141,11 +145,11 @@ var p = o(function({ label: i, value: o, onChange: p, options: m, placeholder: h
 				})
 			}),
 			b ? /* @__PURE__ */ u("p", {
-				id: `${F}-err`,
+				id: `${L}-err`,
 				className: "select-field__error",
 				children: b
 			}) : y ? /* @__PURE__ */ u("p", {
-				id: `${F}-hint`,
+				id: `${L}-hint`,
 				className: "select-field__hint",
 				children: y
 			}) : null

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/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/SelectTable.d.ts

@@ -121,6 +121,11 @@ type SelectTableEmptyOwnProps = {
     action?: ReactNode;
     /** 0.1.207: o vazio que é um ERRO (a lista não carregou): o ícone no tom crítico. O `role="alert"` é de quem usa. */
     tone?: 'critical';
+    /**
+     * 0.1.208: a altura mínima, com o texto centrado nela — o vazio que fica no LUGAR de um gráfico ocupa a altura do
+     * gráfico, e o cartão não encolhe quando o período não tem dado. Um comprimento CSS (`'11.25rem'`).
+     */
+    minHeight?: string;
 };
 export type SelectTableEmptyProps = SelectTableEmptyOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectTableEmptyOwnProps>;
 export declare const SelectTableEmpty: import('react').ForwardRefExoticComponent<SelectTableEmptyOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectTableEmptyOwnProps> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/SelectTable.js

@@ -212,11 +212,15 @@ var O = l(function({ children: e, align: n = "start", disclosure: r, className:
 			children: r !== "none" && /* @__PURE__ */ g(t, {})
 		}) : null, e]
 	});
-}), k = l(function({ icon: e, title: t, subtitle: n, action: r, tone: i, className: a, ...o }, s) {
+}), k = l(function({ icon: e, title: t, subtitle: n, action: r, tone: i, minHeight: a, className: o, style: s, ...c }, l) {
 	return /* @__PURE__ */ _("div", {
-		ref: s,
-		...o,
-		className: `select-table-empty${i === "critical" ? " select-table-empty--critical" : ""}${a ? " " + a : ""}`,
+		ref: l,
+		...c,
+		style: a ? {
+			minHeight: a,
+			...s
+		} : s,
+		className: `select-table-empty${i === "critical" ? " select-table-empty--critical" : ""}${a ? " select-table-empty--fill" : ""}${o ? " " + o : ""}`,
 		children: [
 			e && /* @__PURE__ */ g("span", {
 				className: "select-table-empty__icon",

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 {};

package/dist/SelectTabs.js

@@ -1,63 +1,88 @@
-import { useLayoutEffect as e, useRef as t, useState as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { formatSelectNumber as e, useSelectLocale as t } from "./SelectLocale.js";
+import { useLayoutEffect as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/SelectTabs.tsx
-function a({ tabs: a, value: o, onChange: s, end: c, className: l, ...u }) {
-	let d = t(null), [f, p] = n({
+function s({ tabs: s, value: c, onChange: l, end: u, panelId: d, className: f, onKeyDown: p, ...m }) {
+	let h = t(), g = r(null), _ = r([]), [v, y] = i({
 		left: 0,
 		width: 0
-	});
-	e(() => {
-		let e = d.current;
+	}), b = s.findIndex((e) => e.id === c), x = s.map((e) => e.id).join("\0");
+	n(() => {
+		let e = g.current;
 		if (!e) return;
 		let t = () => {
 			let t = e.querySelector(".select-tab--active");
 			if (!t) {
-				p((e) => e.width === 0 ? e : {
+				y((e) => e.width === 0 ? e : {
 					left: e.left,
 					width: 0
 				});
 				return;
 			}
 			let n = t.offsetLeft, r = t.offsetWidth;
-			p((e) => e.left === n && e.width === r ? e : {
+			y((e) => e.left === n && e.width === r ? e : {
 				left: n,
 				width: r
 			});
 		};
 		t();
 		let n = typeof ResizeObserver < "u" ? new ResizeObserver(t) : null;
-		return n == null || n.observe(e), () => n == null ? void 0 : n.disconnect();
-	}, [o, a.length]);
-	let m = {
-		"--tab-ind-left": `${f.left}px`,
-		"--tab-ind-width": `${f.width}px`
+		return n == null || n.observe(e), _.current.forEach((e) => e && (n == null ? void 0 : n.observe(e))), () => n == null ? void 0 : n.disconnect();
+	}, [
+		c,
+		s.length,
+		x
+	]);
+	let S = (e) => {
+		var t;
+		if (p == null || p(e), e.defaultPrevented || !s.length) return;
+		let n = _.current.findIndex((t) => t === e.target);
+		if (n < 0) return;
+		let r = s.length - 1, i = e.key === "ArrowRight" ? (n + 1) % s.length : e.key === "ArrowLeft" ? (n - 1 + s.length) % s.length : e.key === "Home" ? 0 : e.key === "End" ? r : -1;
+		i < 0 || (e.preventDefault(), (t = _.current[i]) == null || t.focus(), s[i].id !== c && l(s[i].id));
+	}, C = {
+		"--tab-ind-left": `${v.left}px`,
+		"--tab-ind-width": `${v.width}px`
 	};
-	return /* @__PURE__ */ i("div", {
-		...u,
-		className: `select-tabs${l ? " " + l : ""}`,
+	return /* @__PURE__ */ o("div", {
+		...m,
+		className: `select-tabs${f ? " " + f : ""}`,
 		role: "tablist",
-		ref: d,
-		style: m,
-		children: [a.map((e) => {
-			let t = e.id === o;
-			return /* @__PURE__ */ i("button", {
+		ref: g,
+		style: C,
+		onKeyDown: S,
+		children: [s.map((t, n) => {
+			let r = t.id === c;
+			return /* @__PURE__ */ o("button", {
+				ref: (e) => {
+					_.current[n] = e;
+				},
 				type: "button",
 				role: "tab",
-				"aria-selected": t,
-				className: `select-tab${t ? " select-tab--active" : ""}`,
-				onClick: () => s(e.id),
-				children: [e.dot && /* @__PURE__ */ r("span", {
-					className: `select-tab__dot select-tab__dot--${e.dot}`,
-					"aria-hidden": "true"
-				}), e.label]
-			}, e.id);
-		}), c != null && /* @__PURE__ */ r("div", {
+				"aria-selected": r,
+				"aria-controls": d,
+				tabIndex: r || b < 0 && n === 0 ? 0 : -1,
+				className: `select-tab${r ? " select-tab--active" : ""}`,
+				onClick: () => l(t.id),
+				children: [
+					t.dot && /* @__PURE__ */ a("span", {
+						className: `select-tab__dot select-tab__dot--${t.dot}`,
+						"aria-hidden": "true"
+					}),
+					t.label,
+					t.count !== void 0 && /* @__PURE__ */ a("span", {
+						className: "select-tab__count",
+						children: e(t.count, h)
+					})
+				]
+			}, t.id);
+		}), u != null && /* @__PURE__ */ a("div", {
 			className: "select-tabs__end",
-			children: c
+			children: u
 		})]
 	});
 }
 //#endregion
-export { a as SelectTabs };
+export { s as SelectTabs };
 
 //# sourceMappingURL=SelectTabs.js.map