@rebasepro/ui 0.16.0 → 0.16.1-canary.g0d7af95

package/dist/components/BooleanSwitchWithLabel.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { BooleanSwitchProps } from "./BooleanSwitch";
+import { BooleanSwitchProps } from "./BooleanSwitch.js";
 export type BooleanSwitchWithLabelProps = BooleanSwitchProps & {
     position?: "start" | "end";
     invisible?: boolean;

package/dist/components/Button.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { type ButtonSize } from "../styles";
+import { type ButtonSize } from "../styles.js";
 export type ButtonProps<C extends React.ElementType = "button"> = {
     children?: React.ReactNode;
     variant?: "filled" | "outlined" | "text";

package/dist/components/Chip.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ChipColorKey, ChipColorScheme } from "../util/chip_colors";
+import type { ChipColorKey, ChipColorScheme } from "../util/chip_colors.js";
 export type { ChipColorKey, ChipColorScheme };
 export interface ChipProps {
     className?: string;

package/dist/components/CircularProgressCenter.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { CircularProgressProps } from "./CircularProgress";
+import { CircularProgressProps } from "./CircularProgress.js";
 /**
  *
  * @param text

package/dist/components/ColorPicker.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { ChipColorKey } from "./Chip";
+import { ChipColorKey } from "./Chip.js";
 export interface ColorPickerProps {
     /**
      * Currently selected color key

package/dist/components/DebouncedTextField.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import { TextFieldProps } from "./TextField";
+import { TextFieldProps } from "./TextField.js";
 export declare function DebouncedTextField<T extends string | number>(props: TextFieldProps<T>): React.JSX.Element;

package/dist/components/DialogTitle.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { TypographyProps, TypographyVariant } from "./Typography";
+import { TypographyProps, TypographyVariant } from "./Typography.js";
 export type DialogContentProps = TypographyProps & {
     children: React.ReactNode;
     hidden?: boolean;

package/dist/components/LoadingButton.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { ButtonProps } from "./Button";
+import { ButtonProps } from "./Button.js";
 export type LoadingButtonProps<P extends React.ElementType> = ButtonProps<P> & {
     startIcon?: React.ReactNode;
     loading?: boolean;

package/dist/components/VirtualTable/VirtualTable.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { VirtualTableProps } from "./VirtualTableProps";
+import { VirtualTableProps } from "./VirtualTableProps.js";
 /**
  * `React.memo` is not generic-preserving: it takes the props type as its own
  * type argument, so annotating the call with

package/dist/components/VirtualTable/VirtualTableCell.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { CellRendererParams, VirtualTableColumn } from "./VirtualTableProps";
+import { CellRendererParams, VirtualTableColumn } from "./VirtualTableProps.js";
 type VirtualTableCellProps<T> = {
     dataKey: string;
     column: VirtualTableColumn;

package/dist/components/VirtualTable/VirtualTableHeader.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { VirtualTableColumn, VirtualTableSort, VirtualTableWhereFilterOp } from "./VirtualTableProps";
+import { VirtualTableColumn, VirtualTableSort, VirtualTableWhereFilterOp } from "./VirtualTableProps.js";
 export type FilterFormFieldProps<CustomProps> = {
     id: React.Key;
     filterValue: [VirtualTableWhereFilterOp, unknown] | undefined;

package/dist/components/VirtualTable/VirtualTableHeaderRow.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import { VirtualTableContextProps } from "./types";
+import { VirtualTableContextProps } from "./types.js";
 export declare const VirtualTableHeaderRow: ({ columns, sortIndex, onColumnSort, onFilterUpdate, filter, onColumnResize, onColumnResizeEnd, createFilterField, AddColumnComponent, onColumnsOrderChange, data, cellRenderer: CellRenderer, rowHeight, draggingColumnId, headerHeight }: VirtualTableContextProps<Record<string, unknown>>) => React.JSX.Element;

package/dist/components/VirtualTable/VirtualTableProps.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { FilterFormFieldProps } from "./VirtualTableHeader";
+import type { FilterFormFieldProps } from "./VirtualTableHeader.js";
 /** One sort key: the column, and which way it runs. */
 export type VirtualTableSortKey = [string, "asc" | "desc"];
 export type OnRowClickParams<T extends Record<string, unknown>> = {

package/dist/components/VirtualTable/VirtualTableRow.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import { VirtualTableRowProps } from "./types";
+import { VirtualTableRowProps } from "./types.js";
 export declare const VirtualTableRow: React.NamedExoticComponent<VirtualTableRowProps<Record<string, unknown>>>;

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

@@ -1,10 +1,10 @@
-export { VirtualTable } from "./VirtualTable";
-export * from "./VirtualTableProps";
-export type { FilterFormFieldProps } from "./VirtualTableHeader";
-export * from "./selection/SelectionStore";
-export * from "./selection/SelectionContext";
-export * from "./fields/VirtualTableInput";
-export * from "./fields/VirtualTableNumberInput";
-export * from "./fields/VirtualTableSwitch";
-export * from "./fields/VirtualTableDateField";
-export * from "./fields/VirtualTableSelect";
+export { VirtualTable } from "./VirtualTable.js";
+export * from "./VirtualTableProps.js";
+export type { FilterFormFieldProps } from "./VirtualTableHeader.js";
+export * from "./selection/SelectionStore.js";
+export * from "./selection/SelectionContext.js";
+export * from "./fields/VirtualTableInput.js";
+export * from "./fields/VirtualTableNumberInput.js";
+export * from "./fields/VirtualTableSwitch.js";
+export * from "./fields/VirtualTableDateField.js";
+export * from "./fields/VirtualTableSelect.js";

package/dist/components/VirtualTable/selection/SelectionContext.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { VirtualTableSelectionStore, SelectedCell } from "./SelectionStore";
+import { VirtualTableSelectionStore, SelectedCell } from "./SelectionStore.js";
 export interface VirtualTableSelectionContextProps<T extends SelectedCell = SelectedCell> {
     selectionStore: VirtualTableSelectionStore<T>;
     select: (cell: T | undefined) => void;

package/dist/components/VirtualTable/types.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { CellRendererParams, OnRowClickParams, OnVirtualTableColumnResizeParams, VirtualTableColumn, VirtualTableFilterValues, VirtualTableWhereFilterOp } from "./VirtualTableProps";
-import { FilterFormFieldProps } from "./VirtualTableHeader";
+import { CellRendererParams, OnRowClickParams, OnVirtualTableColumnResizeParams, VirtualTableColumn, VirtualTableFilterValues, VirtualTableWhereFilterOp } from "./VirtualTableProps.js";
+import { FilterFormFieldProps } from "./VirtualTableHeader.js";
 export type VirtualTableRowProps<T extends Record<string, unknown>> = {
     style: React.CSSProperties;
     rowHeight: number;

package/dist/components/common/SelectInputLabel.d.ts

@@ -1,4 +1,18 @@
 import React from "react";
+/**
+ * The label above a Select or MultiSelect.
+ *
+ * It used `text-surface-accent-500` — a SURFACE scale, borrowed for type. The
+ * label above a TextField has always used `text-text-secondary`, and the two are
+ * the same role, so a form mixing the components showed two different label
+ * colours: `#64748b` blue-grey over a Select, `#757575` neutral over a TextField.
+ * Measured side by side on /debug/ui, which is where it is most obvious, because
+ * the reference puts them in adjacent columns.
+ *
+ * The text tokens are also the tuned ones: `--color-surface-500` was moved to
+ * #797979 precisely so muted type clears AA on both grounds. The slate scale
+ * carries no such guarantee — it is for surfaces.
+ */
 export declare function SelectInputLabel({ children, error }: {
     children: React.ReactNode;
     error?: boolean;

package/dist/components/index.d.ts

@@ -1,56 +1,56 @@
-export * from "./Autocomplete";
-export * from "./Alert";
-export * from "./Avatar";
-export * from "./BooleanSwitch";
-export * from "./BooleanSwitchWithLabel";
-export * from "./Button";
-export * from "./Card";
-export * from "./CenteredView";
-export * from "./Container";
-export * from "./Collapse";
-export * from "./CircularProgress";
-export * from "./CircularProgressCenter";
-export * from "./ErrorBoundary";
-export * from "./Checkbox";
-export * from "./Chip";
-export * from "./ColorPicker";
-export * from "./DateTimeField";
-export * from "./Dialog";
-export * from "./DialogActions";
-export * from "./DialogContent";
-export * from "./DialogTitle";
-export * from "./ExpandablePanel";
-export * from "./FileUpload";
-export * from "./FilterChip";
-export * from "./IconButton";
-export * from "./InputLabel";
-export * from "./InfoLabel";
-export * from "./Label";
-export * from "./LoadingButton";
-export * from "./Markdown";
-export * from "./Menu";
-export * from "./Menubar";
-export * from "./MultiSelect";
-export * from "./Paper";
-export * from "./RadioGroup";
-export * from "./ResizablePanels";
-export * from "./SearchBar";
-export * from "./Select";
-export * from "./Separator";
-export * from "./Slider";
-export * from "./Sheet";
-export * from "./TextareaAutosize";
-export * from "./TextField";
-export * from "./Tooltip";
-export * from "./Typography";
-export * from "./Tabs";
-export * from "./Table";
-export * from "./Popover";
-export * from "./Badge";
-export * from "./DebouncedTextField";
-export * from "./Skeleton";
-export * from "./ToggleButtonGroup";
-export * from "./VirtualTable";
+export * from "./Autocomplete.js";
+export * from "./Alert.js";
+export * from "./Avatar.js";
+export * from "./BooleanSwitch.js";
+export * from "./BooleanSwitchWithLabel.js";
+export * from "./Button.js";
+export * from "./Card.js";
+export * from "./CenteredView.js";
+export * from "./Container.js";
+export * from "./Collapse.js";
+export * from "./CircularProgress.js";
+export * from "./CircularProgressCenter.js";
+export * from "./ErrorBoundary.js";
+export * from "./Checkbox.js";
+export * from "./Chip.js";
+export * from "./ColorPicker.js";
+export * from "./DateTimeField.js";
+export * from "./Dialog.js";
+export * from "./DialogActions.js";
+export * from "./DialogContent.js";
+export * from "./DialogTitle.js";
+export * from "./ExpandablePanel.js";
+export * from "./FileUpload.js";
+export * from "./FilterChip.js";
+export * from "./IconButton.js";
+export * from "./InputLabel.js";
+export * from "./InfoLabel.js";
+export * from "./Label.js";
+export * from "./LoadingButton.js";
+export * from "./Markdown.js";
+export * from "./Menu.js";
+export * from "./Menubar.js";
+export * from "./MultiSelect.js";
+export * from "./Paper.js";
+export * from "./RadioGroup.js";
+export * from "./ResizablePanels.js";
+export * from "./SearchBar.js";
+export * from "./Select.js";
+export * from "./Separator.js";
+export * from "./Slider.js";
+export * from "./Sheet.js";
+export * from "./TextareaAutosize.js";
+export * from "./TextField.js";
+export * from "./Tooltip.js";
+export * from "./Typography.js";
+export * from "./Tabs.js";
+export * from "./Table.js";
+export * from "./Popover.js";
+export * from "./Badge.js";
+export * from "./DebouncedTextField.js";
+export * from "./Skeleton.js";
+export * from "./ToggleButtonGroup.js";
+export * from "./VirtualTable/index.js";
 import * as Portal from "@radix-ui/react-portal";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 export { Portal, PopoverPrimitive };

package/dist/hooks/index.d.ts

@@ -1,6 +1,6 @@
-export * from "./useInjectStyles";
-export * from "./useOutsideAlerter";
-export * from "./useDebouncedCallback";
-export * from "./useDebounceCallback";
-export * from "./useDebounceValue";
-export * from "./PortalContainerContext";
+export * from "./useInjectStyles.js";
+export * from "./useOutsideAlerter.js";
+export * from "./useDebouncedCallback.js";
+export * from "./useDebounceCallback.js";
+export * from "./useDebounceValue.js";
+export * from "./PortalContainerContext.js";

package/dist/icons/GitHubIcon.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import { IconProps } from "./Icon";
+import { IconProps } from "./Icon.js";
 export declare function GitHubIcon({ size, color, className, onClick, style }: IconProps): React.JSX.Element;

package/dist/icons/HandleIcon.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import { IconProps } from "./Icon";
+import { IconProps } from "./Icon.js";
 export declare function HandleIcon({ size, color, className, onClick, style }: IconProps): React.JSX.Element;

package/dist/icons/index.d.ts

@@ -1,10 +1,10 @@
-export * from "./icon_keys";
-export * from "./cool_icon_keys";
-export * from "./Icon";
-export * from "./GitHubIcon";
-export * from "./HandleIcon";
+export * from "./icon_keys.js";
+export * from "./cool_icon_keys.js";
+export * from "./Icon.js";
+export * from "./GitHubIcon.js";
+export * from "./HandleIcon.js";
 export type { LucideProps, LucideIcon } from "lucide-react";
-export * from "./LucideIconByName";
+export * from "./LucideIconByName.js";
 /**
  * lucide's full `icons` map, keyed by PascalCase name.
  *

package/dist/index.css

@@ -48,17 +48,29 @@ html.dark {
 
    With a single face carrying both headings and body, weight and tracking are
    the only things separating a heading from the copy around it — so the tiers
-   have to actually differ, rather than all sitting at 600. */
-
-/* 500, not 700. This reverses the 2026-08 "700 for display" decision on
-   purpose: the marketing site and the panel were running different display
-   weights, which is the single most visible incoherence between them. */
+   have to actually differ, rather than all sitting at 600.
+
+   REVISED 2026-08-24. The ladder above described weight falling with size, but
+   the code ran 500/500/600/600/500/500 — a hump, where the LARGEST headings
+   were the LIGHTEST and h3 outweighed h1. Two rules were in play and neither
+   won cleanly. It is now monotonic: 600 for headings of consequence (h1-h4),
+   500 for small labels (h5/h6), 400 body. The display end still separates
+   itself by SIZE and tracking, which is what the paragraph above asks of it;
+   what it no longer does is separate itself by being *lighter* than the
+   smaller headings beneath it. 600 remains the ceiling. */
+
+/* 600. This reverses the earlier "500, not 700" setting — not back toward 700,
+   which stays banned, but up to the ceiling the ladder already used for h3/h4.
+   The 500 was only ever visible in production: the dev-only TypeDevPanel has
+   shipped a `wd: 600` default that overrode this with !important, so every
+   local preview of this site has been 600 while rebase.pro rendered 500. The
+   panel's constant is now telling the truth. */
 .typography-h1 {
-    @apply text-4xl font-headers font-medium tracking-display;
+    @apply text-4xl font-headers font-semibold tracking-display;
 }
 
 .typography-h2 {
-    @apply text-3xl font-headers font-medium tracking-display;
+    @apply text-3xl font-headers font-semibold tracking-display;
 }
 
 .typography-h3 {

package/dist/index.d.ts

@@ -1,17 +1,17 @@
-export * from "./components";
-export * from "./views";
-export * from "./icons";
-export * from "./styles";
-export { cls } from "./util/cls";
-export { lazyChunk, loadChunk, isChunkLoadError } from "./util/lazy_chunk";
-export { CHIP_COLORS, CHIP_HUES, CHIP_SEED_KEYS, getColorSchemeForKey, getColorSchemeForSeed } from "./util/chip_colors";
-export type { ChipHue, ChipTone } from "./util/chip_colors";
-export { useOutsideAlerter } from "./hooks/useOutsideAlerter";
-export { useDebouncedCallback } from "./hooks/useDebouncedCallback";
-export { useDebounceCallback } from "./hooks/useDebounceCallback";
-export { useDebounceValue } from "./hooks/useDebounceValue";
-export { useInjectStyles } from "./hooks/useInjectStyles";
-export { PortalContainerProvider, usePortalContainer } from "./hooks/PortalContainerContext";
-export type { PortalContainerContextType, PortalContainerProviderProps } from "./hooks/PortalContainerContext";
-export { debounce } from "./util/debounce";
-export type { Cancelable } from "./util/debounce";
+export * from "./components/index.js";
+export * from "./views/index.js";
+export * from "./icons/index.js";
+export * from "./styles.js";
+export { cls } from "./util/cls.js";
+export { lazyChunk, loadChunk, isChunkLoadError } from "./util/lazy_chunk.js";
+export { CHIP_COLORS, CHIP_HUES, CHIP_SEED_KEYS, getColorSchemeForKey, getColorSchemeForSeed } from "./util/chip_colors.js";
+export type { ChipHue, ChipTone } from "./util/chip_colors.js";
+export { useOutsideAlerter } from "./hooks/useOutsideAlerter.js";
+export { useDebouncedCallback } from "./hooks/useDebouncedCallback.js";
+export { useDebounceCallback } from "./hooks/useDebounceCallback.js";
+export { useDebounceValue } from "./hooks/useDebounceValue.js";
+export { useInjectStyles } from "./hooks/useInjectStyles.js";
+export { PortalContainerProvider, usePortalContainer } from "./hooks/PortalContainerContext.js";
+export type { PortalContainerContextType, PortalContainerProviderProps } from "./hooks/PortalContainerContext.js";
+export { debounce } from "./util/debounce.js";
+export type { Cancelable } from "./util/debounce.js";

package/dist/index.es.js

@@ -61,12 +61,44 @@ var controlPaddingMixin = {
 };
 var focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
 var focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-white/[0.07] focus:bg-surface-accent-100/70";
-var focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-50 ring-primary/50 ring-offset-0 ring-offset-transparent ";
-var fieldBackgroundMixin = "bg-surface-accent-200/50 dark:bg-white/[0.055]";
+/**
+* The focus ring — the single most-seen interaction state in the product, and
+* until now the least tended.
+*
+* Three dead declarations were removed rather than reshuffled:
+*   `outline-hidden` + `outline-none`  — the same instruction twice.
+*   `ring-primary` + `ring-primary/50` — the first could never win.
+*   `ring-opacity-50`                  — Tailwind v3 syntax. v4 expresses
+*                                        opacity with the `/50` slash form, so
+*                                        this generated nothing at all.
+*
+* What is left is the ring that was actually rendering, at 60% rather than 50%:
+* on `surface-900` the old value sat close enough to the field's own border to
+* be missed at a glance, which is the one thing a focus ring may not be.
+* `ring-offset-0` + a transparent offset stay — without them the ring draws a
+* white halo on dark surfaces.
+*/
+var focusedClasses = "z-30 outline-none ring-2 ring-primary/60 ring-offset-0 ring-offset-transparent";
+/**
+* Field surfaces.
+*
+* The inset top hairline is the whole difference between a field that reads as
+* a filled rectangle and one that reads as recessed into the surface. It is a
+* 1px inset highlight, not a gradient — the same device `.frame` already uses
+* on the marketing site, and the flat-surface rule stands.
+*
+* Light mode gets none: on a white page the highlight has nothing to catch.
+*/
+var fieldBackgroundMixin = "bg-surface-accent-200/50 dark:bg-white/[0.055] dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.045)]";
 var fieldBackgroundInvisibleMixin = "bg-surface-accent-200/0 dark:bg-white/0";
 var fieldBackgroundDisabledMixin = "bg-surface-accent-200/50 dark:bg-white/[0.03]";
-var fieldBackgroundHoverMixin = "hover:bg-surface-accent-200/70 hover:dark:bg-white/[0.09]";
-var defaultBorderMixin = "border-surface-200 dark:border-surface-700/60 ";
+/**
+* `transition-colors` here, because every other interactive surface in the kit
+* has it and fields did not — `cardClickableMixin` eases, a TextField snapped.
+* On a form of eight fields that difference is the whole feel of the screen.
+*/
+var fieldBackgroundHoverMixin = "transition-colors duration-150 hover:bg-surface-accent-200/70 hover:dark:bg-white/[0.09]";
+var defaultBorderMixin = "border-surface-200 dark:border-surface-700/60";
 var paperMixin = "bg-white rounded-lg dark:bg-surface-900 border border-surface-200 dark:border-surface-700";
 var cardMixin = "bg-white dark:bg-surface-900 rounded-xl border border-surface-200 dark:border-surface-700/60";
 /**
@@ -2966,7 +2998,7 @@ var BooleanSwitchWithLabel = function BooleanSwitchWithLabel({ value, position =
 		"aria-disabled": disabled || void 0,
 		"aria-labelledby": label ? switchLabelId : void 0,
 		tabIndex: -1,
-		className: cls(!invisible && "bg-surface-accent-200/50 dark:bg-white/[0.055]", !invisible && (disabled ? "bg-surface-accent-200/50 dark:bg-white/[0.03]" : "hover:bg-surface-accent-200/70 hover:dark:bg-white/[0.09]"), disabled ? "cursor-default" : "cursor-pointer", "rounded-lg max-w-full justify-between box-border relative inline-flex items-center", !invisible && focus && !disabled ? focusedClasses : "", error ? "text-red-500 dark:text-red-600" : focus && !disabled ? "text-primary" : !disabled ? "text-text-primary dark:text-text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark", controlHeightMixin[size], size === "small" || size === "smallest" ? "pl-2" : "pl-4", size === "small" || size === "smallest" ? "pr-4" : "pr-6", position === "end" ? "flex-row-reverse" : "flex-row", fullWidth ? "w-full" : "", className),
+		className: cls(!invisible && "bg-surface-accent-200/50 dark:bg-white/[0.055] dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.045)]", !invisible && (disabled ? "bg-surface-accent-200/50 dark:bg-white/[0.03]" : "transition-colors duration-150 hover:bg-surface-accent-200/70 hover:dark:bg-white/[0.09]"), disabled ? "cursor-default" : "cursor-pointer", "rounded-lg max-w-full justify-between box-border relative inline-flex items-center", !invisible && focus && !disabled ? focusedClasses : "", error ? "text-red-500 dark:text-red-600" : focus && !disabled ? "text-primary" : !disabled ? "text-text-primary dark:text-text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark", controlHeightMixin[size], size === "small" || size === "smallest" ? "pl-2" : "pl-4", size === "small" || size === "smallest" ? "pr-4" : "pr-6", position === "end" ? "flex-row-reverse" : "flex-row", fullWidth ? "w-full" : "", className),
 		onClick: disabled ? void 0 : (e) => {
 			if (props.allowIndeterminate) {
 				const onChange = onValueChange;
@@ -3928,7 +3960,7 @@ var DateTimeField = ({ value, label, onChange, disabled, clearable, mode = "date
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("style", { children: inputStyles }),
 		/* @__PURE__ */ jsxs("div", {
-			className: cls("rounded-lg relative max-w-full", !invisible && "bg-surface-accent-200/50 dark:bg-white/[0.055]", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, {
+			className: cls("rounded-lg relative max-w-full", !invisible && "bg-surface-accent-200/50 dark:bg-white/[0.055] dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.045)]", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, {
 				"min-h-[28px]": size === "smallest",
 				"min-h-[32px]": size === "small",
 				"min-h-[40px]": size === "medium",
@@ -4164,7 +4196,7 @@ function ExpandablePanel({ title, children, invisible = false, expanded, onExpan
 		if (expanded !== void 0) setOpen(expanded);
 	}, [expanded]);
 	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Collapsible.Root, {
-		className: cls(!invisible && "border-surface-200 dark:border-surface-700/60  border", "rounded-lg", "w-full", className),
+		className: cls(!invisible && "border-surface-200 dark:border-surface-700/60 border", "rounded-lg", "w-full", className),
 		open,
 		onOpenChange: (updatedOpen) => {
 			onExpandedChange?.(updatedOpen);
@@ -4173,7 +4205,7 @@ function ExpandablePanel({ title, children, invisible = false, expanded, onExpan
 		children: [/* @__PURE__ */ jsx(Collapsible.Trigger, {
 			asChild: true,
 			children: /* @__PURE__ */ jsxs("div", {
-				className: cls("rounded-t-lg flex items-center justify-between w-full min-h-[52px]", "hover:bg-surface-accent-200 hover:bg-opacity-40 hover:bg-surface-accent-200/40 dark:hover:bg-surface-800 dark:hover:bg-opacity-40 dark:hover:bg-surface-800/40 active:bg-surface-accent-300/50 dark:active:bg-surface-700/50", invisible ? "border-b px-2" : "p-4", open ? "py-6" : "py-4", "transition-all duration-200", invisible && "border-surface-200 dark:border-surface-700/60 ", asField && "bg-surface-accent-200/50 dark:bg-white/[0.055]", titleClassName, "cursor-pointer"),
+				className: cls("rounded-t-lg flex items-center justify-between w-full min-h-[52px]", "hover:bg-surface-accent-200 hover:bg-opacity-40 hover:bg-surface-accent-200/40 dark:hover:bg-surface-800 dark:hover:bg-opacity-40 dark:hover:bg-surface-800/40 active:bg-surface-accent-300/50 dark:active:bg-surface-700/50", invisible ? "border-b px-2" : "p-4", open ? "py-6" : "py-4", "transition-all duration-200", invisible && "border-surface-200 dark:border-surface-700/60", asField && "bg-surface-accent-200/50 dark:bg-white/[0.055] dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.045)]", titleClassName, "cursor-pointer"),
 				role: "button",
 				tabIndex: 0,
 				"aria-expanded": open,
@@ -4519,9 +4551,23 @@ function Separator({ orientation, decorative, className }) {
 }
 //#endregion
 //#region src/components/common/SelectInputLabel.tsx
+/**
+* The label above a Select or MultiSelect.
+*
+* It used `text-surface-accent-500` — a SURFACE scale, borrowed for type. The
+* label above a TextField has always used `text-text-secondary`, and the two are
+* the same role, so a form mixing the components showed two different label
+* colours: `#64748b` blue-grey over a Select, `#757575` neutral over a TextField.
+* Measured side by side on /debug/ui, which is where it is most obvious, because
+* the reference puts them in adjacent columns.
+*
+* The text tokens are also the tuned ones: `--color-surface-500` was moved to
+* #797979 precisely so muted type clears AA on both grounds. The slate scale
+* carries no such guarantee — it is for surfaces.
+*/
 function SelectInputLabel({ children, error }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cls("text-sm font-medium ml-3.5 mb-1", error ? "text-red-600 dark:text-red-500" : "text-surface-accent-500 dark:text-surface-accent-300"),
+		className: cls("text-sm font-medium ml-3.5 mb-1", error ? "text-red-600 dark:text-red-500" : "text-text-secondary dark:text-text-secondary-dark"),
 		children
 	});
 }
@@ -4863,7 +4909,7 @@ function ResizablePanels({ firstPanel, secondPanel, showFirstPanel = true, showS
 				children: firstPanel
 			}),
 			!stacked && showFirstPanel && showSecondPanel && /* @__PURE__ */ jsx("div", {
-				className: cls("relative z-10 flex flex-shrink-0 items-center justify-center", "border-surface-200 dark:border-surface-700/60 ", isHorizontal ? "border-l w-px h-full cursor-col-resize" : "border-t h-px w-full cursor-row-resize"),
+				className: cls("relative z-10 flex flex-shrink-0 items-center justify-center", "border-surface-200 dark:border-surface-700/60", isHorizontal ? "border-l w-px h-full cursor-col-resize" : "border-t h-px w-full cursor-row-resize"),
 				onMouseDown: handleResizeStart,
 				children: /* @__PURE__ */ jsx("div", {
 					className: cls("absolute flex items-center justify-center group", isHorizontal ? "w-4 h-full cursor-col-resize top-0" : "h-4 w-full cursor-row-resize left-0"),
@@ -5449,7 +5495,7 @@ var TextField = forwardRef(({ value, onChange, label, type = "text", multiline =
 			label && /* @__PURE__ */ jsx(InputLabel, {
 				id: labelId,
 				htmlFor: inputId,
-				className: cls("pointer-events-none absolute", size === "large" ? "top-1" : "top-[-1px]", !error ? focused ? "text-primary dark:text-primary" : "text-text-secondary dark:text-text-secondary-dark" : "text-red-500 dark:text-red-600", disabled ? "opacity-50" : ""),
+				className: cls("pointer-events-none absolute", size === "large" ? "top-1" : "top-[-1px]", !error ? focused ? "text-primary dark:text-primary" : "text-text-secondary dark:text-text-secondary-dark" : "text-red-500 dark:text-red-600", disabled ? "text-text-disabled dark:text-text-disabled-dark" : ""),
 				shrink: hasValue || focused,
 				children: label
 			}),
@@ -5520,7 +5566,7 @@ function Tabs({ value, onValueChange, className, innerClassName, variant = "stan
 					disabled: !showLeftScroll,
 					"aria-label": "Scroll tabs left",
 					onClick: () => scroll("left"),
-					className: cls("absolute left-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-md transition-all h-8 w-6", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400", !showLeftScroll ? "pointer-events-none opacity-0" : "text-surface-600 dark:text-surface-400 hover:bg-surface-accent-200 dark:hover:bg-surface-accent-800", "bg-surface-50 dark:bg-surface-900 border shadow-sm", "border-surface-200 dark:border-surface-700/60 "),
+					className: cls("absolute left-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-md transition-all h-8 w-6", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400", !showLeftScroll ? "pointer-events-none opacity-0" : "text-surface-600 dark:text-surface-400 hover:bg-surface-accent-200 dark:hover:bg-surface-accent-800", "bg-surface-50 dark:bg-surface-900 border shadow-sm", "border-surface-200 dark:border-surface-700/60"),
 					children: /* @__PURE__ */ jsx(ChevronLeftIcon$1, { size: iconSize.smallest })
 				}),
 				/* @__PURE__ */ jsx("div", {
@@ -5532,7 +5578,7 @@ function Tabs({ value, onValueChange, className, innerClassName, variant = "stan
 						msOverflowStyle: "none"
 					},
 					children: /* @__PURE__ */ jsx(TabsPrimitive.List, {
-						className: cls(variant === "standard" && "inline-flex h-9 items-center justify-start rounded-md bg-surface-50 p-1 text-surface-600 dark:bg-surface-900 dark:text-surface-400 gap-2 border", variant === "standard" && "border-surface-200 dark:border-surface-700/60 ", variant === "boxy" && "flex items-center h-full", variant === "pill" && "flex items-center gap-0.5", innerClassName),
+						className: cls(variant === "standard" && "inline-flex h-9 items-center justify-start rounded-md bg-surface-50 p-1 text-surface-600 dark:bg-surface-900 dark:text-surface-400 gap-2 border", variant === "standard" && "border-surface-200 dark:border-surface-700/60", variant === "boxy" && "flex items-center h-full", variant === "pill" && "flex items-center gap-0.5", innerClassName),
 						children
 					})
 				}),
@@ -5541,7 +5587,7 @@ function Tabs({ value, onValueChange, className, innerClassName, variant = "stan
 					disabled: !showRightScroll,
 					"aria-label": "Scroll tabs right",
 					onClick: () => scroll("right"),
-					className: cls("absolute right-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-md transition-all h-8 w-6", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400", !showRightScroll ? "pointer-events-none opacity-0" : "text-surface-600 dark:text-surface-400 hover:bg-surface-accent-200 dark:hover:bg-surface-accent-800", "bg-surface-50 dark:bg-surface-900 border shadow-sm", "border-surface-200 dark:border-surface-700/60 "),
+					className: cls("absolute right-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-md transition-all h-8 w-6", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400", !showRightScroll ? "pointer-events-none opacity-0" : "text-surface-600 dark:text-surface-400 hover:bg-surface-accent-200 dark:hover:bg-surface-accent-800", "bg-surface-50 dark:bg-surface-900 border shadow-sm", "border-surface-200 dark:border-surface-700/60"),
 					children: /* @__PURE__ */ jsx(ChevronRightIcon$1, { size: iconSize.smallest })
 				})
 			]
@@ -8465,7 +8511,7 @@ function CollectionCardView({ dataController, properties, propertiesOrder, idPro
 					src: imageValue,
 					alt: "",
 					className: "w-full h-32 object-cover rounded-t-lg"
-				}) : /* @__PURE__ */ jsx("div", { className: cls("h-24 rounded-t-lg", "bg-surface-accent-200/50 dark:bg-white/[0.055]") })),
+				}) : /* @__PURE__ */ jsx("div", { className: cls("h-24 rounded-t-lg", "bg-surface-accent-200/50 dark:bg-white/[0.055] dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.045)]") })),
 				selectionEnabled && /* @__PURE__ */ jsx("div", {
 					className: "absolute top-2 right-2",
 					onClick: (e) => e.stopPropagation(),