@parallelworks/ui 0.50.0 → 0.52.0

package/dist/components/Select.js

@@ -1,15 +1,18 @@
 import { cx } from "../cx.js";
 import { CheckIcon, ChevronDownIcon } from "../icons.js";
-import { panelClassName, panelItemClassName, positionerClassName } from "./floating.js";
+import { panelClassName, positionerClassName } from "./floating.js";
 import { Tooltip } from "./Tooltip.js";
 import { fieldBox } from "./fieldBox.js";
+import { pickerItemClassName } from "./comboboxItems.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { Select } from "@base-ui/react/select";
 //#region src/components/Select.tsx
 var triggerClassName = "flex cursor-pointer items-center justify-between gap-2 pr-1.5 text-left";
 /** Picks one value, or several with `multiple`, from a short list. Use
 *  Combobox when the list is long enough to need filtering. */
 function Select$1({ items, placeholder, className, "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-required": required, trigger, triggerTooltip, size = "md", onItemHighlighted, ...rootProps }) {
+	const uid = useId();
 	const labelOf = (value) => items.find((item) => Object.is(item.value, value))?.label;
 	const triggerProps = {
 		"aria-label": ariaLabel,
@@ -50,26 +53,36 @@ function Select$1({ items, placeholder, className, "aria-label": ariaLabel, "ari
 				className: cx("min-w-(--anchor-width) max-w-[min(20rem,var(--available-width))]", panelClassName),
 				children: /* @__PURE__ */ jsx(Select.List, {
 					className: "max-h-[min(15rem,var(--available-height))] overflow-y-auto py-1",
-					children: items.map((item) => /* @__PURE__ */ jsxs(Select.Item, {
+					children: items.map((item, index) => /* @__PURE__ */ jsxs(Select.Item, {
 						value: item.value,
 						disabled: item.disabled,
+						"aria-labelledby": `${uid}${index}label`,
+						"aria-describedby": item.description && `${uid}${index}description`,
 						onFocus: onItemHighlighted && (() => onItemHighlighted(item.value)),
-						className: cx("grid grid-cols-[1rem_1fr]", panelItemClassName),
+						className: pickerItemClassName,
 						children: [
-							/* @__PURE__ */ jsx(Select.ItemIndicator, {
-								className: "col-start-1",
-								children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" })
+							item.icon && /* @__PURE__ */ jsx("span", {
+								className: "flex shrink-0 items-center",
+								children: item.icon
 							}),
 							/* @__PURE__ */ jsxs("span", {
-								className: "col-start-2 flex min-w-0 items-center gap-2",
-								children: [item.icon, /* @__PURE__ */ jsx(Select.ItemText, {
+								className: "flex min-w-0 flex-col",
+								children: [/* @__PURE__ */ jsx(Select.ItemText, {
+									id: `${uid}${index}label`,
 									className: "truncate",
 									children: item.label
+								}), item.description && /* @__PURE__ */ jsx("span", {
+									id: `${uid}${index}description`,
+									className: "text-xs leading-snug text-(--theme-muted-text-color)",
+									children: item.description
 								})]
 							}),
-							item.description && /* @__PURE__ */ jsx("span", {
-								className: "col-start-2 text-xs text-(--theme-muted-text-color)",
-								children: item.description
+							/* @__PURE__ */ jsx(Select.ItemIndicator, {
+								className: "ml-auto flex shrink-0 items-center",
+								children: /* @__PURE__ */ jsx(CheckIcon, {
+									"aria-hidden": "true",
+									className: "size-3.5"
+								})
 							})
 						]
 					}, String(item.value)))

package/dist/components/SettingModeOption.d.ts

@@ -4,5 +4,5 @@ export declare function SettingModeOption({ value, label, description, disabled,
     value: string;
     label: string;
     description: string;
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }): import("react").JSX.Element;

package/dist/components/SettingModeOption.js

@@ -1,22 +1,28 @@
 import { cx } from "../cx.js";
 import { Radio } from "./Radio.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 //#region src/components/SettingModeOption.tsx
 /** A named and described choice in a SettingsCard, picking between modes such
 *  as default or custom. Stack them in a `RadioGroup`, which holds the value. */
 function SettingModeOption({ value, label, description, disabled }) {
+	const id = useId();
 	return /* @__PURE__ */ jsxs("label", {
-		className: cx("flex items-start gap-3 px-5 py-4", disabled ? "cursor-default opacity-60" : "cursor-pointer", "border-t border-(--theme-border) first:border-t-0"),
+		className: cx("flex items-start gap-3 px-5 py-4", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", "border-t border-(--theme-border) first:border-t-0"),
 		children: [/* @__PURE__ */ jsx(Radio, {
 			value,
 			disabled,
+			"aria-labelledby": `${id}label`,
+			"aria-describedby": `${id}description`,
 			className: "mt-0.5"
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "min-w-0",
 			children: [/* @__PURE__ */ jsx("div", {
+				id: `${id}label`,
 				className: "font-semibold theme-text leading-tight",
 				children: label
 			}), /* @__PURE__ */ jsx("div", {
+				id: `${id}description`,
 				className: "theme-muted-text text-xs leading-snug mt-0.5",
 				children: description
 			})]

package/dist/components/SettingsCard.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export interface SettingsCardProps {
     /** Names the card above it. Leave it out on a page's first card, where the
      *  page title already names it. */
@@ -8,6 +8,8 @@ export interface SettingsCardProps {
      *  header's far edge, such as Save. */
     action?: ReactNode;
     actionAlign?: 'beside' | 'end' | undefined;
+    /** The title's level in the page's outline; its SettingsHeadings sit one below. */
+    headingLevel?: 2 | 3 | undefined;
     /** Lets content such as an inline menu reach past the card's rounded edge. */
     overflowVisible?: boolean | undefined;
     className?: string | undefined;
@@ -16,8 +18,8 @@ export interface SettingsCardProps {
 }
 /** A page's settings, grouped: a titled panel of SettingRows, each ruled off from
  *  the next. Cards stack with room between them. */
-export declare function SettingsCard({ title, description, action, actionAlign, overflowVisible, className, children, }: SettingsCardProps): import("react").JSX.Element;
-/** A heading between groups of rows inside a SettingsCard. */
+export declare function SettingsCard({ title, description, action, actionAlign, headingLevel, overflowVisible, className, children, }: SettingsCardProps): import("react").JSX.Element;
+/** A heading between groups of rows inside a SettingsCard, a level below the card's title. */
 export declare function SettingsHeading({ children }: {
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/components/SettingsCard.js

@@ -1,32 +1,39 @@
 import { cx } from "../cx.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
 //#region src/components/SettingsCard.tsx
+var HeadingLevel = createContext(3);
 /** A page's settings, grouped: a titled panel of SettingRows, each ruled off from
 *  the next. Cards stack with room between them. */
-function SettingsCard({ title, description, action, actionAlign = "beside", overflowVisible = false, className, children }) {
-	return /* @__PURE__ */ jsxs("section", {
-		className: cx("mt-10 first:mt-0", className),
-		children: [(title || action) && /* @__PURE__ */ jsxs("div", {
-			className: "mb-3 px-0.5",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: cx("flex items-center gap-1.5", actionAlign === "end" && "justify-between"),
-				children: [title && /* @__PURE__ */ jsx("h2", {
-					className: "text-[15px] leading-none font-semibold theme-text",
-					children: title
-				}), action]
-			}), description && /* @__PURE__ */ jsx("p", {
-				className: "mt-1.5 text-xs leading-snug theme-muted-text",
-				children: description
+function SettingsCard({ title, description, action, actionAlign = "beside", headingLevel = 2, overflowVisible = false, className, children }) {
+	const Heading = `h${headingLevel}`;
+	return /* @__PURE__ */ jsx(HeadingLevel, {
+		value: headingLevel + 1,
+		children: /* @__PURE__ */ jsxs("section", {
+			className: cx("mt-10 first:mt-0", className),
+			children: [(title || action) && /* @__PURE__ */ jsxs("div", {
+				className: "mb-3 px-0.5",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: cx("flex items-center gap-1.5", actionAlign === "end" && "justify-between"),
+					children: [title && /* @__PURE__ */ jsx(Heading, {
+						className: "text-[15px] leading-none font-semibold theme-text",
+						children: title
+					}), action]
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: "mt-1.5 text-xs leading-snug theme-muted-text",
+					children: description
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: cx("panel divide-y divide-(--theme-border)", overflowVisible ? "overflow-visible" : "overflow-hidden"),
+				children
 			})]
-		}), /* @__PURE__ */ jsx("div", {
-			className: cx("panel divide-y divide-(--theme-border)", overflowVisible ? "overflow-visible" : "overflow-hidden"),
-			children
-		})]
+		})
 	});
 }
-/** A heading between groups of rows inside a SettingsCard. */
+/** A heading between groups of rows inside a SettingsCard, a level below the card's title. */
 function SettingsHeading({ children }) {
-	return /* @__PURE__ */ jsx("h3", {
+	const Heading = `h${useContext(HeadingLevel)}`;
+	return /* @__PURE__ */ jsx(Heading, {
 		className: "px-5 py-3 text-sm font-semibold tracking-wider uppercase theme-muted-panel theme-muted-text",
 		children
 	});

package/dist/components/Slider.js

@@ -20,7 +20,7 @@ function Slider$1({ value, onValueChange, min, max, step = 1, disabled = false,
 				className: "h-1 w-full rounded-full bg-(--theme-border)",
 				children: [/* @__PURE__ */ jsx(Slider.Indicator, { className: "rounded-full bg-(--theme-accent)" }), /* @__PURE__ */ jsx(Slider.Thumb, {
 					"aria-label": ariaLabel,
-					className: "size-4 rounded-full border-2 border-(--theme-accent) bg-(--theme-panel-bg) shadow-sm outline-none has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-(--theme-focus-ring)"
+					className: "size-4 rounded-full border-2 border-(--theme-accent) bg-(--theme-panel-bg) shadow-sm has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-(--theme-focus)"
 				})]
 			})
 		})

package/dist/components/StatusBadge.js

@@ -13,7 +13,7 @@ function StatusBadge({ children, variant = "default", pulse = false, dot = false
 		children: [
 			pulse && /* @__PURE__ */ jsxs("span", {
 				className: "relative flex h-2 w-2",
-				children: [/* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", toneFill[variant]) }), /* @__PURE__ */ jsx("span", { className: cx("relative inline-flex h-2 w-2 rounded-full", toneFill[variant]) })]
+				children: [/* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 motion-reduce:hidden", toneFill[variant]) }), /* @__PURE__ */ jsx("span", { className: cx("relative inline-flex h-2 w-2 rounded-full", toneFill[variant]) })]
 			}),
 			dot && !pulse && /* @__PURE__ */ jsx("span", { className: cx("inline-flex h-1.5 w-1.5 rounded-full", toneFill[variant]) }),
 			children
@@ -27,7 +27,7 @@ function StatusDot({ variant = "default", pulse = false, size = 8, className })
 			width: size,
 			height: size
 		},
-		children: [pulse && /* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", toneFill[variant]) }), /* @__PURE__ */ jsx("span", {
+		children: [pulse && /* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 motion-reduce:hidden", toneFill[variant]) }), /* @__PURE__ */ jsx("span", {
 			className: cx("relative inline-flex rounded-full", toneFill[variant]),
 			style: {
 				width: size,

package/dist/components/StatusIcons.js

@@ -3,10 +3,10 @@ import { ErrorIcon, SuccessIcon } from "../icons.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/StatusIcons.tsx
 function SuccessCheckmark({ className, colored = true }) {
-	return /* @__PURE__ */ jsx(SuccessIcon, { className: cx(colored && "text-green-500", className) });
+	return /* @__PURE__ */ jsx(SuccessIcon, { className: cx(colored && "text-(--theme-success)", className) });
 }
 function ErrorCheckmark({ className, colored = true }) {
-	return /* @__PURE__ */ jsx(ErrorIcon, { className: cx(colored && "text-red-400", className) });
+	return /* @__PURE__ */ jsx(ErrorIcon, { className: cx(colored && "text-(--theme-error)", className) });
 }
 //#endregion
 export { ErrorCheckmark, SuccessCheckmark };

package/dist/components/Switch.js

@@ -1,15 +1,16 @@
 import { cx } from "../cx.js";
+import { focusOutline } from "./fieldBox.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Switch } from "@base-ui/react/switch";
 //#region src/components/Switch.tsx
 var sizes = {
 	sm: {
 		root: "h-5 w-9",
-		thumb: "size-4 data-checked:translate-x-4"
+		thumb: "size-4 data-checked:translate-x-4 rtl:data-checked:-translate-x-4"
 	},
 	md: {
 		root: "h-6 w-11",
-		thumb: "size-5 data-checked:translate-x-5"
+		thumb: "size-5 data-checked:translate-x-5 rtl:data-checked:-translate-x-5"
 	}
 };
 /**
@@ -20,8 +21,8 @@ var sizes = {
 function Switch$1({ size = "md", className, onLabel, offLabel, ...props }) {
 	const control = /* @__PURE__ */ jsx(Switch.Root, {
 		...props,
-		className: cx("peer inline-flex shrink-0 items-center rounded-full p-0.5 bg-(--theme-border) transition-colors duration-200 cursor-pointer outline-none", "data-checked:bg-(--theme-accent)", "focus-visible:ring-2 focus-visible:ring-(--theme-focus-ring) aria-invalid:ring-2 aria-invalid:ring-(--theme-error)", "data-disabled:cursor-not-allowed data-disabled:opacity-50", sizes[size].root, className),
-		children: /* @__PURE__ */ jsx(Switch.Thumb, { className: cx("rounded-full bg-white shadow-sm transition-transform duration-200", sizes[size].thumb) })
+		className: cx("peer inline-flex shrink-0 items-center rounded-full p-0.5 bg-(--theme-border-strong) transition-colors duration-200 cursor-pointer motion-reduce:transition-none", "data-checked:bg-(--theme-accent)", focusOutline, "aria-invalid:ring-2 aria-invalid:ring-(--theme-error)", "data-disabled:cursor-not-allowed data-disabled:opacity-50", sizes[size].root, className),
+		children: /* @__PURE__ */ jsx(Switch.Thumb, { className: cx("rounded-full bg-white shadow-sm transition-transform duration-200 motion-reduce:transition-none", sizes[size].thumb) })
 	});
 	if (onLabel === void 0 && offLabel === void 0) return control;
 	return /* @__PURE__ */ jsxs("span", {

package/dist/components/Table.d.ts

@@ -1,24 +1,30 @@
 import React from 'react';
-import type { TDirection } from './Sort.js';
-interface IItemProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+/** Which way a column sorts, as `aria-sort` names it. */
+export type SortDirection = 'ascending' | 'descending' | 'none';
+/** `comfortable` gives each row room; `compact` fits a short key and value list. */
+export type TableDensity = 'comfortable' | 'compact';
+interface ItemProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    /** Lets the text wrap; by default a cell keeps to one line. */
     wrap?: boolean;
-    colspan?: number;
 }
-declare function Item({ wrap, children, className, colspan, ...tdProps }: IItemProps): React.JSX.Element;
-declare function CompactItem({ wrap, children, className, colspan, ...tdProps }: IItemProps): React.JSX.Element;
-interface ITableHeaderProps {
+declare function Item({ wrap, children, className, ...tdProps }: ItemProps): React.JSX.Element;
+interface HeaderProps {
     children?: React.ReactNode;
-    className?: string;
+    className?: string | undefined;
     style?: React.CSSProperties | undefined;
-    colspan?: number;
-    onClick?: (() => void) | undefined;
-    sort?: TDirection | 'none';
-    /** When false, drops uppercase + tracking-wider for a sentence-case header. */
-    caps?: boolean;
+    colSpan?: number | undefined;
+    /** Which way the column sorts now. With `onSort`, the header is a button
+     *  that shows it; `none` for a sortable column that isn't the sorted one. */
+    sort?: SortDirection | undefined;
+    /** Sorts by this column, or flips its direction. */
+    onSort?: (() => void) | undefined;
+    /** False sets the title in sentence case instead of small capitals. */
+    caps?: boolean | undefined;
 }
-declare function Header({ children, className, style, colspan, onClick, sort, caps, }: ITableHeaderProps): React.JSX.Element;
-interface ITableProps {
+declare function Header({ children, className, style, colSpan, sort, onSort, caps }: HeaderProps): React.JSX.Element;
+interface TableProps {
     children?: React.ReactNode;
+    density?: TableDensity | undefined;
     borderless?: boolean;
     /** When false, drops the theme-panel background. */
     panel?: boolean;
@@ -30,6 +36,13 @@ interface ITableProps {
     rounded?: boolean;
     roundedBottom?: boolean;
     isLoading?: boolean;
+    /** The header row stays in view while the rows scroll under it. It sticks
+     *  to the nearest scrolling ancestor, `--table-header-top` below its top
+     *  edge (0 unless an ancestor sets it), so the table no longer scrolls or
+     *  clips on its own: a box that scrolls itself is all a sticky header can
+     *  stick to. Its ancestor scrolls it sideways as well as down. Rows pass
+     *  under the header, so a `theadClassName` of your own needs a background. */
+    stickyHeader?: boolean | undefined;
     /** Forwarded to the `<table>`, for attributes that must sit on the element owning
      *  the rows — `role='grid'`, aria-activedescendant, aria-rowcount. `className` is
      *  excluded because it is spread after the table's own classes; use the
@@ -39,14 +52,11 @@ interface ITableProps {
         'aria-rowcount'?: number;
     };
 }
-export declare function Table({ borderless, panel, className, wrapperClassName, tbodyClassName, theadClassName, children, roundedTop, rounded, roundedBottom, isLoading, tableProps, }: ITableProps): React.JSX.Element;
+/** Rows of values under a row of column titles. Put `Table.Header`s first among
+ *  the children, then `<tr>`s of `Table.Item`s. */
+export declare function Table({ density, borderless, panel, className, wrapperClassName, tbodyClassName, theadClassName, children, roundedTop, rounded, roundedBottom, isLoading, stickyHeader, tableProps, }: TableProps): React.JSX.Element;
 export declare namespace Table {
     export { Header };
     export { Item };
 }
-export declare function CompactTable({ wrapperClassName, className, tbodyClassName, children, roundedTop, rounded, roundedBottom, }: Pick<ITableProps, 'wrapperClassName' | 'className' | 'tbodyClassName' | 'children' | 'roundedTop' | 'rounded' | 'roundedBottom'>): React.JSX.Element;
-export declare namespace CompactTable {
-    export { Header };
-    export { CompactItem as Item };
-}
 export {};

package/dist/components/Table.js

@@ -1,41 +1,41 @@
 import { cx } from "../cx.js";
+import { SortDownIcon, SortUnsortedIcon, SortUpIcon } from "../icons.js";
 import { Loader } from "./Loader.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import React from "react";
+import React, { createContext, useContext } from "react";
 //#region src/components/Table.tsx
-function Item({ wrap = false, children, className, colspan = 1, ...tdProps }) {
-	const yPadding = className?.includes("py-") ? "" : "py-4";
-	const xPadding = className?.includes("px-") ? "" : "px-2";
+var DensityContext = createContext("comfortable");
+var cellX = "px-3";
+function Item({ wrap = false, children, className, ...tdProps }) {
+	const density = useContext(DensityContext);
 	return /* @__PURE__ */ jsx("td", {
 		...tdProps,
-		colSpan: colspan,
-		className: cx(yPadding, xPadding, wrap ? "" : "whitespace-nowrap", className),
+		className: cx(cellX, density === "compact" ? "py-1.5 text-sm" : "py-4", !wrap && "whitespace-nowrap", className),
 		children
 	});
 }
-function CompactItem({ wrap = false, children, className, colspan = 1, ...tdProps }) {
-	return /* @__PURE__ */ jsx("td", {
-		...tdProps,
-		colSpan: colspan,
-		className: cx("px-2 text-sm font-medium", !wrap && "whitespace-nowrap", className),
-		children
-	});
-}
-function Header({ children, className, style, colspan = 1, onClick, sort, caps = true }) {
-	const yPadding = className?.includes("py-") ? "" : "py-3";
-	const xPadding = className?.includes("px-") ? "" : "px-3";
-	const textAlign = className?.includes("text-") ? "" : "text-left";
+var sortIcons = {
+	ascending: SortUpIcon,
+	descending: SortDownIcon,
+	none: SortUnsortedIcon
+};
+function Header({ children, className, style, colSpan, sort, onSort, caps = true }) {
+	const density = useContext(DensityContext);
+	const Icon = sortIcons[sort ?? "none"];
 	return /* @__PURE__ */ jsx("th", {
 		scope: "col",
-		colSpan: colspan,
+		colSpan,
 		style,
-		"aria-sort": sort === "unsorted" ? "none" : sort,
-		className: cx(className, yPadding, xPadding, textAlign, "text-xs font-medium", caps ? "uppercase tracking-wider" : ""),
-		children: onClick ? /* @__PURE__ */ jsx("button", {
+		"aria-sort": onSort ? sort ?? "none" : void 0,
+		className: cx(cellX, density === "compact" ? "py-2" : "py-3", "text-left text-xs font-medium", caps && "uppercase tracking-wider", className),
+		children: onSort ? /* @__PURE__ */ jsxs("button", {
 			type: "button",
-			onClick,
-			className: "w-full cursor-pointer text-inherit [text-align:inherit] hover:opacity-80 transition-opacity",
-			children
+			onClick: onSort,
+			className: "group/sort -mx-1 -my-1 inline-flex cursor-pointer py-1 align-middle items-center gap-1 rounded px-1 text-inherit [text-transform:inherit] hover:text-(--theme-app) focus-visible:outline-2 focus-visible:outline-(--theme-link) in-[.text-right]:flex-row-reverse",
+			children: [children, /* @__PURE__ */ jsx(Icon, {
+				"aria-hidden": "true",
+				className: cx("size-3.5 shrink-0", (sort ?? "none") === "none" && "opacity-0 group-hover/sort:opacity-40 group-focus-visible/sort:opacity-40 pointer-coarse:opacity-40")
+			})]
 		}) : children
 	});
 }
@@ -43,60 +43,37 @@ var isHeaderChild = (child) => {
 	if (!React.isValidElement(child)) return false;
 	return child.type === Header || typeof child.type === "function" && child.type.isTableHeader === true;
 };
-var getHeaders = (children) => children.filter(isHeaderChild);
-function Table({ borderless = false, panel = true, className = "", wrapperClassName = "", tbodyClassName = "divide-y", theadClassName = "theme-muted-panel", children, roundedTop = false, rounded = false, roundedBottom = false, isLoading = false, tableProps }) {
-	const ChildrenArr = React.Children.toArray(children);
-	const Headers = getHeaders(ChildrenArr);
-	const hasOverflow = wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-"));
-	return /* @__PURE__ */ jsx("div", {
-		"aria-busy": isLoading,
-		className: cx("flex flex-col w-full", !hasOverflow && "overflow-hidden", wrapperClassName),
-		children: isLoading ? /* @__PURE__ */ jsx("div", {
-			className: "flex justify-center items-center h-32",
-			children: /* @__PURE__ */ jsx(Loader, {})
-		}) : /* @__PURE__ */ jsx("div", {
-			className: cx("align-middle inline-block min-w-full overflow-x-auto", panel && "theme-panel", !borderless && "border theme-border", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl", roundedTop && "rounded-t-2xl"),
-			children: /* @__PURE__ */ jsxs("table", {
-				className: cx(className, "min-w-full divide-y theme-border"),
-				...tableProps,
-				children: [/* @__PURE__ */ jsx("thead", {
-					className: theadClassName,
-					children: /* @__PURE__ */ jsx("tr", { children: Headers })
-				}), /* @__PURE__ */ jsx("tbody", {
-					className: tbodyClassName,
-					children: ChildrenArr.filter((c) => !isHeaderChild(c))
-				})]
-			})
-		})
-	});
-}
-function CompactTable({ wrapperClassName = "", className = "", tbodyClassName = "divide-y", children, roundedTop = false, rounded = false, roundedBottom = false }) {
-	const ChildrenArr = React.Children.toArray(children);
-	const Headers = getHeaders(ChildrenArr);
+/** Rows of values under a row of column titles. Put `Table.Header`s first among
+*  the children, then `<tr>`s of `Table.Item`s. */
+function Table({ density = "comfortable", borderless = false, panel = true, className, wrapperClassName = "", tbodyClassName = "divide-y", theadClassName = "theme-muted-panel", children, roundedTop = false, rounded = false, roundedBottom = false, isLoading = false, stickyHeader = false, tableProps }) {
+	const childList = React.Children.toArray(children);
 	const hasOverflow = wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-"));
-	return /* @__PURE__ */ jsx("div", {
-		className: cx("flex flex-col w-full", !hasOverflow && "overflow-hidden", wrapperClassName),
+	return /* @__PURE__ */ jsx(DensityContext, {
+		value: density,
 		children: /* @__PURE__ */ jsx("div", {
-			className: cx("theme-panel inline-block min-w-full align-middle overflow-x-auto", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl pb-1", roundedTop && "rounded-t-2xl"),
-			children: /* @__PURE__ */ jsxs("table", {
-				className: cx("min-w-full divide-y theme-border", className),
-				children: [/* @__PURE__ */ jsx("thead", {
-					className: "theme-muted-panel",
-					children: /* @__PURE__ */ jsx("tr", {
-						className: "divide-x",
-						children: Headers
-					})
-				}), /* @__PURE__ */ jsx("tbody", {
-					className: tbodyClassName,
-					children: ChildrenArr.filter((c) => !isHeaderChild(c))
-				})]
+			"aria-busy": isLoading,
+			className: cx("flex w-full flex-col", !hasOverflow && !stickyHeader && "overflow-hidden", wrapperClassName),
+			children: isLoading ? /* @__PURE__ */ jsx("div", {
+				className: "flex h-32 items-center justify-center",
+				children: /* @__PURE__ */ jsx(Loader, {})
+			}) : /* @__PURE__ */ jsx("div", {
+				className: cx("inline-block min-w-full align-middle", !stickyHeader && "overflow-x-auto", panel && "theme-panel", !borderless && "border theme-border", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl", roundedTop && "rounded-t-2xl"),
+				children: /* @__PURE__ */ jsxs("table", {
+					className: cx("min-w-full divide-y theme-border", className),
+					...tableProps,
+					children: [/* @__PURE__ */ jsx("thead", {
+						className: cx(stickyHeader && "sticky top-(--table-header-top,0px) z-(--layer-sticky) border-b-0 shadow-[inset_0_-1px_0_var(--theme-border)]", theadClassName),
+						children: /* @__PURE__ */ jsx("tr", { children: childList.filter(isHeaderChild) })
+					}), /* @__PURE__ */ jsx("tbody", {
+						className: tbodyClassName,
+						children: childList.filter((c) => !isHeaderChild(c))
+					})]
+				})
 			})
 		})
 	});
 }
 Table.Header = Header;
 Table.Item = Item;
-CompactTable.Header = Header;
-CompactTable.Item = CompactItem;
 //#endregion
-export { CompactTable, Table };
+export { Table };

package/dist/components/Tabs.d.ts

@@ -11,10 +11,6 @@ export interface TabItem<Value extends string = string> {
     disabled?: boolean;
     testId?: string;
 }
-declare const stickyClasses: {
-    underHeader: string;
-    underToolbar: string;
-};
 export interface TabsProps<Value extends string> extends SegmentLayout {
     /** Names the set of tabs for assistive technology. */
     label: string;
@@ -29,8 +25,9 @@ export interface TabsProps<Value extends string> extends SegmentLayout {
     variant?: 'line' | 'segmented' | undefined;
     /** At the tab row's far end, such as a picker for what the tabs show. */
     end?: ReactNode;
-    /** Pins the tab row as the page scrolls. */
-    sticky?: keyof typeof stickyClasses | undefined;
+    /** Pins the tab row to the top of the page's scroller as it scrolls; give it a
+     *  `top-*` in `className` to pin it under something else pinned there. */
+    sticky?: boolean | undefined;
     /** On the tab row. */
     className?: string | undefined;
     testId?: string | undefined;
@@ -49,4 +46,3 @@ export declare function TabPanel({ value, keepMounted, className, children, }: {
     className?: string | undefined;
     children: ReactNode;
 }): import("react").JSX.Element;
-export {};

package/dist/components/Tabs.js

@@ -1,20 +1,16 @@
 import { cx } from "../cx.js";
 import { Tooltip } from "./Tooltip.js";
-import { useLink } from "./Provider.js";
+import { AppLink } from "./AppLink.js";
 import { SegmentContent, segmentClassName, segmentGroupClassName } from "./segmented.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Tabs } from "@base-ui/react/tabs";
 //#region src/components/Tabs.tsx
-var stickyClasses = {
-	underHeader: "sticky top-10 z-(--layer-sticky) bg-(--theme-app-bg)",
-	underToolbar: "sticky top-22 z-(--layer-sticky) bg-(--theme-app-bg)"
-};
+var stickyClassName = "sticky top-0 z-(--layer-sticky) bg-(--theme-app-bg)";
 /** Views of one thing, one shown at a time: panels below the tabs, or pages
 *  the tabs link to. A lone tab would only repeat the page's title, so the row
 *  hides unless there are two or more, or something at its end. */
 function Tabs$1({ label, items, value, defaultValue, onValueChange, variant = "line", fill = false, iconOnly = false, end, sticky, className, testId, children }) {
-	const Link = useLink();
 	const segmented = variant === "segmented";
 	const layout = {
 		fill,
@@ -30,9 +26,9 @@ function Tabs$1({ label, items, value, defaultValue, onValueChange, variant = "l
 			"data-testid": item.testId,
 			...item.href ? {
 				nativeButton: false,
-				render: /* @__PURE__ */ jsx(Link, { href: item.href })
+				render: /* @__PURE__ */ jsx(AppLink, { href: item.href })
 			} : {},
-			className: segmented ? segmentClassName(item.value === current, layout) : "flex cursor-pointer select-none items-center gap-1.5 whitespace-nowrap px-2 py-2 text-sm font-semibold theme-muted-text outline-none transition-colors hover:theme-text focus-visible:rounded-sm focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--theme-link) data-active:text-(--theme-link) data-disabled:cursor-not-allowed data-disabled:opacity-50",
+			className: segmented ? segmentClassName(item.value === current, layout) : "flex cursor-pointer select-none items-center gap-1.5 whitespace-nowrap px-2 py-2 text-sm font-semibold theme-muted-text transition-colors hover:theme-text focus-visible:rounded-sm focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--theme-focus) data-active:text-(--theme-link) data-disabled:cursor-not-allowed data-disabled:opacity-50",
 			children: /* @__PURE__ */ jsx(SegmentContent, {
 				...item,
 				iconOnly: layout.iconOnly
@@ -54,7 +50,7 @@ function Tabs$1({ label, items, value, defaultValue, onValueChange, variant = "l
 		"data-testid": testId,
 		className: children ? void 0 : "contents",
 		children: [showRow && /* @__PURE__ */ jsxs("div", {
-			className: cx("flex items-center justify-between gap-2", !segmented && "border-b border-(--theme-border)", sticky && stickyClasses[sticky], className),
+			className: cx("flex items-center justify-between gap-2", !segmented && "border-b border-(--theme-border)", sticky && stickyClassName, className),
 			children: [/* @__PURE__ */ jsxs(Tabs.List, {
 				"aria-label": label,
 				className: cx(segmented ? segmentGroupClassName(layout) : "relative flex min-w-0 overflow-x-auto"),
@@ -68,7 +64,7 @@ function TabPanel({ value, keepMounted, className, children }) {
 	return /* @__PURE__ */ jsx(Tabs.Panel, {
 		value,
 		keepMounted,
-		className: cx("outline-none", className),
+		className: cx("rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-focus)", className),
 		children
 	});
 }