@selectwin/kit 0.1.212 → 0.1.213

package/dist/SelectSection.d.ts

@@ -31,6 +31,11 @@ type SelectSectionOwnProps = {
      * dentro de uma superfície sólida (`SelectRegions`, o drawer do Workbench); numa página, a seção segue two-tone.
      */
     flush?: boolean;
+    /**
+     * 0.1.213: a seção é a moldura de uma lista (a `SelectTable` de dentro): o corpo sem a caixa branca nem o respiro, e
+     * a tabela com o cabeçalho na moldura e as linhas na caixa branca dela. Sem tabela no corpo, a caixa branca volta.
+     */
+    list?: boolean;
     children: ReactNode;
 };
 export type SelectSectionProps = SelectSectionOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectSectionOwnProps>;

package/dist/SelectSection.js

@@ -6,20 +6,20 @@ import { inertProps as i } from "./internal/inert.js";
 import { forwardRef as a, useId as o, useState as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/SelectSection.tsx
-var u = a(function({ title: a, help: u, description: d, action: f, collapsible: p = !1, defaultOpen: m = !0, open: h, onOpenChange: g, footer: _, flush: v = !1, children: y, className: b, ...x }, S) {
-	let [C, w] = s(m), T = h ?? C, E = o(), D = () => {
-		h === void 0 && w(!T), g == null || g(!T);
-	}, O = (r() ? " select-section--nested" : "") + (v ? " select-section--flush" : "");
+var u = a(function({ title: a, help: u, description: d, action: f, collapsible: p = !1, defaultOpen: m = !0, open: h, onOpenChange: g, footer: _, flush: v = !1, list: y = !1, children: b, className: x, ...S }, C) {
+	let [w, T] = s(m), E = h ?? w, D = o(), O = () => {
+		h === void 0 && T(!E), g == null || g(!E);
+	}, k = (r() ? " select-section--nested" : "") + (v ? " select-section--flush" : "") + (y ? " select-section--list" : ""), A = y ? "list" : "body";
 	return p ? /* @__PURE__ */ l("div", {
-		ref: S,
-		...x,
-		className: `select-section select-section--collapsible${O}${T ? " is-open" : ""}${b ? " " + b : ""}`,
+		ref: C,
+		...S,
+		className: `select-section select-section--collapsible${k}${E ? " is-open" : ""}${x ? " " + x : ""}`,
 		children: [/* @__PURE__ */ l("button", {
 			type: "button",
 			className: "select-section__head select-section__head--toggle",
-			"aria-expanded": T,
-			"aria-controls": E,
-			onClick: D,
+			"aria-expanded": E,
+			"aria-controls": D,
+			onClick: O,
 			children: [/* @__PURE__ */ l("span", {
 				className: "select-section__heading",
 				children: [a && /* @__PURE__ */ c("span", {
@@ -35,15 +35,18 @@ var u = a(function({ title: a, help: u, description: d, action: f, collapsible:
 				children: /* @__PURE__ */ c(e, {})
 			})]
 		}), /* @__PURE__ */ c("div", {
-			id: E,
+			id: D,
 			className: "select-section__collapse",
-			"data-open": T,
-			...i(!T),
+			"data-open": E,
+			...i(!E),
 			children: /* @__PURE__ */ l("div", {
 				className: "select-section__collapsewrap",
 				children: [/* @__PURE__ */ c("div", {
 					className: "select-section__body",
-					children: /* @__PURE__ */ c(n, { children: y })
+					children: /* @__PURE__ */ c(n, {
+						kind: A,
+						children: b
+					})
 				}), _ != null && _ !== "" && /* @__PURE__ */ c("div", {
 					className: "select-section__foot",
 					children: _
@@ -51,9 +54,9 @@ var u = a(function({ title: a, help: u, description: d, action: f, collapsible:
 			})
 		})]
 	}) : /* @__PURE__ */ l("div", {
-		ref: S,
-		...x,
-		className: `select-section${O}${b ? " " + b : ""}`,
+		ref: C,
+		...S,
+		className: `select-section${k}${x ? " " + x : ""}`,
 		children: [
 			(a || d || f) && /* @__PURE__ */ l("div", {
 				className: "select-section__head",
@@ -73,7 +76,10 @@ var u = a(function({ title: a, help: u, description: d, action: f, collapsible:
 			}),
 			/* @__PURE__ */ c("div", {
 				className: "select-section__body",
-				children: /* @__PURE__ */ c(n, { children: y })
+				children: /* @__PURE__ */ c(n, {
+					kind: A,
+					children: b
+				})
 			}),
 			_ != null && _ !== "" && /* @__PURE__ */ c("div", {
 				className: "select-section__foot",

package/dist/SelectTable.d.ts

@@ -73,6 +73,25 @@ type SelectTableOwnProps = {
      * separados por linhas de 1px.
      */
     flush?: boolean;
+    /**
+     * 0.1.213: o nome da tabela para o leitor de tela (a grade é `role="table"`). Sem ele, o nome é o `title` quando o
+     * `title` é texto.
+     */
+    label?: string;
+    /**
+     * 0.1.213: a largura mínima das colunas juntas (um comprimento CSS, `'48rem'`): abaixo dela a tabela rola de lado em
+     * vez de apertar as colunas. Sem ela, o mínimo é a soma dos pisos das colunas.
+     */
+    minWidth?: string;
+    /**
+     * 0.1.213: como as colunas flexíveis (as sem `width`) dividem a largura.
+     *  · `even` (o padrão): cada uma leva a mesma fatia (vezes o `grow`);
+     *  · `content`: cada uma leva a fatia do que ela tem — a tabela mede a largura natural de cada coluna (o cabeçalho e
+     *    as células) e divide a largura na mesma proporção, como a tabela do HTML. O nome longo ganha espaço e o "OK" não
+     *    o desperdiça. Nenhuma coluna fica mais estreita que o que ela tem (até 20rem, `--select-table-col-cap`): sem
+     *    espaço, a tabela rola de lado. O cabeçalho continua alinhado com as linhas (a mesma grade).
+     */
+    sizing?: 'even' | 'content';
 };
 export type SelectTableProps = SelectTableOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectTableOwnProps>;
 export declare const SelectTable: import('react').ForwardRefExoticComponent<SelectTableOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectTableOwnProps> & import('react').RefAttributes<HTMLDivElement>>;
@@ -93,14 +112,26 @@ export declare const SelectUserCell: import('react').ForwardRefExoticComponent<S
  * vêm logo abaixo com `nested` — recuadas e num fundo afundado, na MESMA grade de colunas.
  * Continua uma tabela só: nada de tabela dentro de linha (card dentro de card).
  */
-export declare function SelectTableRow({ children, onClick, expanded, nested, }: {
+type SelectTableRowOwnProps = {
     children: ReactNode;
     onClick?: () => void;
     /** Linha-mãe de um grupo: aberta/fechada (vira `aria-expanded`). */
     expanded?: boolean;
     /** Linha-filha de um grupo aberto. */
     nested?: boolean;
-}): import("react").JSX.Element;
+    /**
+     * 0.1.213: a linha do que está aberto agora (o plano que a página mostra ao lado, a mensagem da gaveta): o fundo
+     * afundado e `aria-current`.
+     */
+    current?: boolean;
+    /**
+     * 0.1.213: a linha que abre um grupo de linhas ("Do workspace · as regras dele"): o título numa célula que ocupa a
+     * linha toda (`<SelectTableCell span="all">`), no fundo afundado.
+     */
+    section?: boolean;
+};
+export type SelectTableRowProps = SelectTableRowOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectTableRowOwnProps | 'role'>;
+export declare function SelectTableRow({ children, onClick, expanded, nested, current, section, className, ...rest }: SelectTableRowProps): import("react").JSX.Element;
 type SelectTableCellOwnProps = {
     children: ReactNode;
     align?: 'start' | 'end' | 'center';
@@ -110,6 +141,12 @@ type SelectTableCellOwnProps = {
     /** Chevron de grupo antes do conteúdo (primeira célula da linha-mãe). `'none'` reserva o
      *  espaço sem desenhar, para alinhar uma linha sem filhas com as vizinhas que têm. */
     disclosure?: 'open' | 'closed' | 'none';
+    /** 0.1.213: o cabeçalho da linha (`role="rowheader"`): o leitor de tela diz o nome da linha em cada célula dela. */
+    header?: boolean;
+    /** 0.1.213: quantas colunas a célula ocupa (`'all'`: a linha toda — o título do grupo, o detalhe aberto). */
+    span?: number | 'all';
+    /** 0.1.213: o texto quebra linha em vez de cortar (a descrição, o valor longo que não pode sumir). */
+    wrap?: boolean;
 };
 export type SelectTableCellProps = SelectTableCellOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectTableCellOwnProps>;
 export declare const SelectTableCell: import('react').ForwardRefExoticComponent<SelectTableCellOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectTableCellOwnProps> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/SelectTable.js

@@ -1,61 +1,83 @@
 import { ChevronDownIcon as e, ChevronRightIcon as t } from "./icons.js";
 import { useSelectReveal as n } from "./internal/useSelectReveal.js";
-import { FrameBody as r, useInsideFrame as i } from "./internal/frame.js";
+import { FrameBody as r, useFrameKind as i } from "./internal/frame.js";
 import { SelectAvatar as a } from "./SelectAvatar.js";
 import { SelectListChrome as o, listChromeShape as s } from "./internal/listChrome.js";
-import { Children as c, forwardRef as l, useCallback as u, useId as d, useLayoutEffect as f, useRef as p, useState as m } from "react";
-import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { Children as c, createContext as l, forwardRef as u, useCallback as d, useContext as f, useId as p, useLayoutEffect as ee, useRef as m, useState as h } from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/SelectTable.tsx
-var v = 40, y = 1200, b = 8;
-function x(e) {
+var y = 40, b = 1200, x = 8;
+function S(e) {
 	let t = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
 	return `${Math.round(e / t * 1e3) / 1e3}rem`;
 }
-var S = l(function({ columns: t, children: a, empty: l, footer: h, title: S, help: w, description: T, action: E, filters: D, tools: O, onColumnResize: k, onColumnResizeReset: A, collapsible: j = !1, defaultOpen: M = !0, flush: N = !1, className: P, ...F }, I) {
-	let [L, R] = m(M), z = d(), B = j && S != null ? {
-		open: L,
-		onToggle: () => R((e) => !e),
-		controls: z
-	} : void 0, V = c.count(a) === 0, H = V && !!l, { hasFilters: U, hasTitleRow: W } = s({
-		title: S,
-		description: T,
+var C = l(0), w = u(function({ columns: t, children: a, empty: l, footer: u, title: f, help: g, description: w, action: E, filters: D, tools: O, onColumnResize: k, onColumnResizeReset: A, collapsible: j = !1, defaultOpen: M = !0, flush: N = !1, label: P, minWidth: F, sizing: I = "even", className: L, ...te }, R) {
+	let ne = P ?? (typeof f == "string" ? f : void 0), [z, B] = h(M), V = p(), H = j && f != null ? {
+		open: z,
+		onToggle: () => B((e) => !e),
+		controls: V
+	} : void 0, U = c.count(a) === 0, W = U && !!l, { hasFilters: G, hasTitleRow: K } = s({
+		title: f,
+		description: w,
 		action: E,
 		filters: D,
 		tools: O
-	}), G = H && !W && !U, K = i(), q = n({
+	}), q = W && !K && !G, J = i(), Y = J === "body", X = J === "list", re = n({
 		selector: ".select-table__row",
 		y: 8,
 		duration: .45,
 		stagger: .05,
 		scroll: !0
-	}), J = t.length ? t.map((e) => e.width ?? `minmax(${e.minWidth ?? "var(--select-table-col-min, 6.5rem)"}, ${e.grow ?? 1}fr)`).join(" ") : "1fr", Y = p(null), X = u((e) => {
-		Y.current = e, typeof I == "function" ? I(e) : I && (I.current = e);
-	}, [I]);
-	f(() => {
-		var e;
-		(e = Y.current) == null || e.style.setProperty("--select-table-cols", J);
-	}, [J]);
-	let Z = (e, n) => {
-		let r = Y.current;
+	}), Z = t.length ? t.map((e) => e.width ?? `minmax(${e.minWidth ?? "var(--select-table-col-min, 6.5rem)"}, ${e.grow ?? 1}fr)`).join(" ") : "1fr", Q = m(null), ie = d((e) => {
+		Q.current = e, typeof R == "function" ? R(e) : R && (R.current = e);
+	}, [R]);
+	ee(() => {
+		let e = Q.current;
+		if (!e) return;
+		if (I !== "content" || !t.some((e) => e.width == null)) {
+			e.style.setProperty("--select-table-cols", Z);
+			return;
+		}
+		e.style.setProperty("--select-table-cols", t.map((e) => e.width ?? "max-content").join(" "));
+		let n = t.map(() => 0);
+		for (let r of e.querySelectorAll(".select-table__head, .select-table__row")) {
+			if (r.closest(".select-table") !== e) continue;
+			let i = [...r.children];
+			i.length !== t.length || i.some((e) => e.style.gridColumn) || i.forEach((e, t) => {
+				n[t] = Math.max(n[t], e.getBoundingClientRect().width);
+			});
+		}
+		if (n.every((e) => e === 0)) {
+			e.style.setProperty("--select-table-cols", Z);
+			return;
+		}
+		e.style.setProperty("--select-table-cols", t.map((e, t) => {
+			if (e.width) return e.width;
+			let r = Math.max(1, Math.ceil(n[t]));
+			return `minmax(${e.minWidth ?? `min(${r}px, var(--select-table-col-cap, 20rem))`}, ${Math.max(1, Math.round(r * (e.grow ?? 1)))}fr)`;
+		}).join(" "));
+	});
+	let $ = (e, n) => {
+		let r = Q.current;
 		if (!r) return;
 		let i = t.map((t, r) => r === e ? `${n}px` : t.width ?? `minmax(${t.minWidth ?? "var(--select-table-col-min, 6.5rem)"}, ${t.grow ?? 1}fr)`);
 		r.style.setProperty("--select-table-cols", i.join(" "));
-	}, Q = (e) => (t) => {
+	}, ae = (e) => (t) => {
 		var n;
 		if (!k || t.button !== 0) return;
 		let r = (n = t.currentTarget.parentElement) == null ? void 0 : n.getBoundingClientRect();
 		if (!r) return;
 		let i = t.clientX, a = r.width;
 		t.preventDefault(), t.stopPropagation(), t.currentTarget.setPointerCapture(t.pointerId);
-		let o = Y.current;
+		let o = Q.current;
 		o == null || o.classList.add("select-table--resizing");
 		let s = a, c = (t) => {
-			s = Math.min(y, Math.max(v, a + (t.clientX - i))), Z(e, s);
+			s = Math.min(b, Math.max(y, a + (t.clientX - i))), $(e, s);
 		}, l = () => {
-			window.removeEventListener("pointermove", c), window.removeEventListener("pointerup", l), window.removeEventListener("pointercancel", l), o == null || o.classList.remove("select-table--resizing"), k(e, x(s));
+			window.removeEventListener("pointermove", c), window.removeEventListener("pointerup", l), window.removeEventListener("pointercancel", l), o == null || o.classList.remove("select-table--resizing"), k(e, S(s));
 		};
 		window.addEventListener("pointermove", c), window.addEventListener("pointerup", l), window.addEventListener("pointercancel", l);
-	}, $ = (e) => (t) => {
+	}, oe = (e) => (t) => {
 		var n;
 		if (!k) return;
 		let r = t.key === "ArrowRight" ? 1 : t.key === "ArrowLeft" ? -1 : 0;
@@ -63,157 +85,177 @@ var S = l(function({ columns: t, children: a, empty: l, footer: h, title: S, hel
 		let i = (n = t.currentTarget.parentElement) == null ? void 0 : n.getBoundingClientRect();
 		if (!i) return;
 		t.preventDefault();
-		let a = b * (t.shiftKey ? 10 : 1), o = Math.min(y, Math.max(v, i.width + r * a));
-		Z(e, o), k(e, x(o));
+		let a = x * (t.shiftKey ? 10 : 1), o = Math.min(b, Math.max(y, i.width + r * a));
+		$(e, o), k(e, S(o));
 	};
-	return /* @__PURE__ */ _("div", {
-		ref: X,
-		...F,
-		className: `select-table${G ? " select-table--empty" : ""}${K && !N ? " select-table--nested" : ""}${N ? " select-table--flush" : ""}${B ? ` select-table--collapsible${L ? " is-open" : ""}` : ""}${P ? " " + P : ""}`,
-		style: { "--select-table-cols": J },
-		children: [/* @__PURE__ */ g(o, {
-			title: S,
-			help: B ? void 0 : w,
-			description: T,
+	return /* @__PURE__ */ v("div", {
+		ref: ie,
+		...te,
+		className: `select-table${q ? " select-table--empty" : ""}${Y && !N ? " select-table--nested" : ""}${X && !N ? " select-table--inlist" : ""}${N ? " select-table--flush" : ""}${H ? ` select-table--collapsible${z ? " is-open" : ""}` : ""}${L ? " " + L : ""}`,
+		style: {
+			"--select-table-cols": Z,
+			...F ? { "--select-table-min": F } : {}
+		},
+		children: [/* @__PURE__ */ _(o, {
+			title: f,
+			help: H ? void 0 : g,
+			description: w,
 			action: E,
-			filters: B ? void 0 : D,
-			tools: B ? void 0 : O,
-			toggle: B
-		}), /* @__PURE__ */ _(C, {
-			enabled: !!B,
-			open: L,
-			id: z,
+			filters: H ? void 0 : D,
+			tools: H ? void 0 : O,
+			toggle: H
+		}), /* @__PURE__ */ v(T, {
+			enabled: !!H,
+			open: z,
+			id: V,
 			children: [
-				B && (D != null || O != null) ? /* @__PURE__ */ g(o, {
+				H && (D != null || O != null) ? /* @__PURE__ */ _(o, {
 					filters: D,
 					tools: O
 				}) : null,
-				/* @__PURE__ */ g("div", {
-					className: `select-table__scroll${H ? " select-table__scroll--empty" : ""}`,
-					children: /* @__PURE__ */ _("div", {
+				/* @__PURE__ */ _("div", {
+					className: `select-table__scroll${W ? " select-table__scroll--empty" : ""}`,
+					children: /* @__PURE__ */ v("div", {
 						className: "select-table__scrollinner",
-						children: [!H && /* @__PURE__ */ g("div", {
+						...W ? {} : {
+							role: "table",
+							"aria-label": ne
+						},
+						children: [!W && /* @__PURE__ */ _("div", {
 							className: "select-table__head",
 							role: "row",
-							children: t.map((n, r) => /* @__PURE__ */ _("div", {
+							children: t.map((n, r) => /* @__PURE__ */ v("div", {
 								role: "columnheader",
 								"aria-sort": n.sortable ? n.sortDir === "asc" ? "ascending" : n.sortDir === "desc" ? "descending" : "none" : void 0,
 								className: `select-table__th select-table__cell--${n.align ?? "start"}${n.tone ? ` select-table__th--${n.tone}` : ""}`,
-								children: [n.sortable ? /* @__PURE__ */ _("button", {
+								children: [n.sortable ? /* @__PURE__ */ v("button", {
 									type: "button",
 									className: `select-table__sortbtn${n.sortDir === "asc" ? " select-table__sortbtn--asc" : ""}${n.sortDir == null ? "" : " select-table__sortbtn--active"}`,
 									onClick: n.onSort,
-									children: [n.label, /* @__PURE__ */ g(e, {})]
-								}) : n.label, k && n.resizable !== !1 && r < t.length - 1 && /* @__PURE__ */ g("span", {
+									children: [n.label, /* @__PURE__ */ _(e, {})]
+								}) : n.label, k && n.resizable !== !1 && r < t.length - 1 && /* @__PURE__ */ _("span", {
 									role: "separator",
 									"aria-orientation": "vertical",
 									"aria-label": "Ajustar a largura da coluna",
 									tabIndex: 0,
 									className: "select-table__resizer",
-									onPointerDown: Q(r),
-									onKeyDown: $(r),
+									onPointerDown: ae(r),
+									onKeyDown: oe(r),
 									onDoubleClick: A ? () => A(r) : void 0
 								})]
 							}, r))
-						}), /* @__PURE__ */ g("div", {
+						}), /* @__PURE__ */ _("div", {
 							className: "select-table__body",
-							children: /* @__PURE__ */ g("div", {
+							children: /* @__PURE__ */ _("div", {
 								className: "select-table__rows",
-								ref: q,
-								children: /* @__PURE__ */ g(r, { children: V && l ? /* @__PURE__ */ g("div", {
-									className: "select-table__empty",
-									children: l
-								}) : a })
+								ref: re,
+								children: /* @__PURE__ */ _(C.Provider, {
+									value: t.length,
+									children: /* @__PURE__ */ _(r, { children: U && l ? /* @__PURE__ */ _("div", {
+										className: "select-table__empty",
+										children: l
+									}) : a })
+								})
 							})
 						})]
 					})
 				}),
-				h && /* @__PURE__ */ g("div", {
+				u && /* @__PURE__ */ _("div", {
 					className: "select-table__footer",
-					children: h
+					children: u
 				})
 			]
 		})]
 	});
 });
-function C({ enabled: e, open: t, id: n, children: r }) {
-	return e ? /* @__PURE__ */ g("div", {
+function T({ enabled: e, open: t, id: n, children: r }) {
+	return e ? /* @__PURE__ */ _("div", {
 		className: "select-table__collapse",
 		id: n,
 		"data-open": t,
 		"aria-hidden": !t,
-		children: /* @__PURE__ */ g("div", {
+		children: /* @__PURE__ */ _("div", {
 			className: "select-table__collapsewrap",
 			children: r
 		})
-	}) : /* @__PURE__ */ g(h, { children: r });
+	}) : /* @__PURE__ */ _(g, { children: r });
 }
-var w = l(function({ name: e, secondary: t, src: n, badge: r, className: i, ...o }, s) {
-	return /* @__PURE__ */ _("span", {
+var E = u(function({ name: e, secondary: t, src: n, badge: r, className: i, ...o }, s) {
+	return /* @__PURE__ */ v("span", {
 		ref: s,
 		...o,
 		className: `select-usercell${i ? " " + i : ""}`,
-		children: [/* @__PURE__ */ g(a, {
+		children: [/* @__PURE__ */ _(a, {
 			name: typeof e == "string" ? e : void 0,
 			src: n
-		}), /* @__PURE__ */ _("span", {
+		}), /* @__PURE__ */ v("span", {
 			className: "select-usercell__text",
-			children: [r ? /* @__PURE__ */ _("span", {
+			children: [r ? /* @__PURE__ */ v("span", {
 				className: "select-usercell__line",
-				children: [/* @__PURE__ */ g("span", {
+				children: [/* @__PURE__ */ _("span", {
 					className: "select-usercell__name",
 					children: e
 				}), r]
-			}) : /* @__PURE__ */ g("span", {
+			}) : /* @__PURE__ */ _("span", {
 				className: "select-usercell__name",
 				children: e
-			}), t && /* @__PURE__ */ g("span", {
+			}), t && /* @__PURE__ */ _("span", {
 				className: "select-usercell__secondary",
 				children: t
 			})]
 		})]
 	});
 });
-function T({ children: e, onClick: t, expanded: n, nested: r = !1 }) {
-	let i = `select-table__row${t ? " select-table__row--clickable" : ""}${r ? " select-table__row--nested" : ""}${n ? " is-expanded" : ""}`;
-	return t ? /* @__PURE__ */ g("div", {
-		className: i,
+function D({ children: e, onClick: t, expanded: n, nested: r = !1, current: i = !1, section: a = !1, className: o, ...s }) {
+	let c = `select-table__row${t ? " select-table__row--clickable" : ""}${r ? " select-table__row--nested" : ""}${a ? " select-table__row--section" : ""}${n ? " is-expanded" : ""}${i ? " is-current" : ""}${o ? " " + o : ""}`;
+	return t ? /* @__PURE__ */ _("div", {
+		...s,
+		className: c,
 		role: "row",
 		tabIndex: 0,
 		"aria-expanded": n,
+		"aria-current": i || void 0,
 		onClick: (e) => {
-			D(e.target, e.currentTarget) || t();
+			k(e.target, e.currentTarget) || t();
 		},
 		onKeyDown: (e) => {
 			e.target !== e.currentTarget || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), t());
 		},
 		children: e
-	}) : /* @__PURE__ */ g("div", {
-		className: i,
+	}) : /* @__PURE__ */ _("div", {
+		...s,
+		className: c,
 		role: "row",
+		"aria-current": i || void 0,
 		children: e
 	});
 }
-var E = "button, a[href], input, select, textarea, label, summary, [role=\"button\"], [role=\"menuitem\"], [role=\"checkbox\"], [role=\"switch\"], [data-row-click=\"ignore\"]";
-function D(e, t) {
+var O = "button, a[href], input, select, textarea, label, summary, [role=\"button\"], [role=\"menuitem\"], [role=\"checkbox\"], [role=\"switch\"], [data-row-click=\"ignore\"]";
+function k(e, t) {
 	if (!(e instanceof Element) || !t.contains(e)) return !0;
-	let n = e.closest(E);
+	let n = e.closest(O);
 	return n !== null && n !== t && t.contains(n);
 }
-var O = l(function({ children: e, align: n = "start", disclosure: r, className: i, ...a }, o) {
-	return /* @__PURE__ */ _("div", {
-		ref: o,
-		...a,
-		role: "cell",
-		className: `select-table__td select-table__cell--${n}${i ? " " + i : ""}`,
-		children: [r ? /* @__PURE__ */ g("span", {
+var A = u(function({ children: e, align: n = "start", disclosure: r, header: i = !1, span: a, wrap: o = !1, className: s, style: c, ...l }, u) {
+	let d = f(C), p = a === "all" ? d || void 0 : a;
+	return /* @__PURE__ */ v("div", {
+		ref: u,
+		...l,
+		role: i ? "rowheader" : "cell",
+		"aria-colspan": p && p > 1 ? p : void 0,
+		style: a ? {
+			gridColumn: a === "all" ? "1 / -1" : `span ${a}`,
+			...c
+		} : c,
+		className: `select-table__td select-table__cell--${n}${o ? " select-table__td--wrap" : ""}${s ? " " + s : ""}`,
+		children: [r ? /* @__PURE__ */ _("span", {
 			className: `select-table__disclosure${r === "open" ? " is-open" : ""}`,
 			"aria-hidden": "true",
-			children: r !== "none" && /* @__PURE__ */ g(t, {})
+			children: r !== "none" && /* @__PURE__ */ _(t, {})
 		}) : null, e]
 	});
-}), k = l(function({ icon: e, title: t, subtitle: n, action: r, tone: i, minHeight: a, className: o, style: s, ...c }, l) {
-	return /* @__PURE__ */ _("div", {
+}), j = u(function({ icon: e, title: t, subtitle: n, action: r, tone: i, minHeight: a, className: o, style: s, ...c }, l) {
+	return /* @__PURE__ */ v("div", {
 		ref: l,
 		...c,
 		style: a ? {
@@ -222,19 +264,19 @@ var O = l(function({ children: e, align: n = "start", disclosure: r, className:
 		} : s,
 		className: `select-table-empty${i === "critical" ? " select-table-empty--critical" : ""}${a ? " select-table-empty--fill" : ""}${o ? " " + o : ""}`,
 		children: [
-			e && /* @__PURE__ */ g("span", {
+			e && /* @__PURE__ */ _("span", {
 				className: "select-table-empty__icon",
 				children: e
 			}),
-			/* @__PURE__ */ g("p", {
+			/* @__PURE__ */ _("p", {
 				className: "select-table-empty__title",
 				children: t
 			}),
-			n && /* @__PURE__ */ g("p", {
+			n && /* @__PURE__ */ _("p", {
 				className: "select-table-empty__subtitle",
 				children: n
 			}),
-			r && /* @__PURE__ */ g("div", {
+			r && /* @__PURE__ */ _("div", {
 				className: "select-table-empty__action",
 				children: r
 			})
@@ -242,6 +284,6 @@ var O = l(function({ children: e, align: n = "start", disclosure: r, className:
 	});
 });
 //#endregion
-export { S as SelectTable, O as SelectTableCell, k as SelectTableEmpty, T as SelectTableRow, w as SelectUserCell };
+export { w as SelectTable, A as SelectTableCell, j as SelectTableEmpty, D as SelectTableRow, E as SelectUserCell };
 
 //# sourceMappingURL=SelectTable.js.map

package/dist/internal/frame.d.ts

@@ -1,7 +1,16 @@
 import { ReactNode } from 'react';
+/**
+ * Onde a moldura está: fora de outra (`false`), no corpo branco de outra (`'body'`), ou no corpo de uma seção que é a
+ * moldura de uma lista (`'list'`, 0.1.213: `SelectSection list`) — ali o corpo não tem a caixa branca, e a tabela
+ * desenha o cabeçalho na moldura e as linhas na caixa branca dela, como a tabela sozinha.
+ */
+export type FrameKind = false | 'body' | 'list';
 /** Esta moldura está dentro do corpo de outra? Então desenha sem a casca. */
 export declare function useInsideFrame(): boolean;
-/** O corpo branco de uma moldura: o que está dentro dele sabe que está dentro. */
-export declare function FrameBody({ children }: {
+/** Que corpo é esse (0.1.213): o branco de uma moldura, ou o de uma seção que é a moldura de uma lista. */
+export declare function useFrameKind(): FrameKind;
+/** O corpo de uma moldura: o que está dentro dele sabe que está dentro (e, desde a 0.1.213, de que corpo). */
+export declare function FrameBody({ children, kind }: {
     children: ReactNode;
+    kind?: 'body' | 'list';
 }): import("react").JSX.Element;

package/dist/internal/frame.js

@@ -3,15 +3,18 @@ import { jsx as n } from "react/jsx-runtime";
 //#region src/internal/frame.tsx
 var r = e(!1);
 function i() {
+	return t(r) !== !1;
+}
+function a() {
 	return t(r);
 }
-function a({ children: e }) {
+function o({ children: e, kind: t = "body" }) {
 	return /* @__PURE__ */ n(r.Provider, {
-		value: !0,
+		value: t,
 		children: e
 	});
 }
 //#endregion
-export { a as FrameBody, i as useInsideFrame };
+export { o as FrameBody, a as useFrameKind, i as useInsideFrame };
 
 //# sourceMappingURL=frame.js.map