@godxjp/ui 19.3.1 → 19.4.0

package/dist/components/data-display/badge.d.ts

@@ -14,6 +14,14 @@ declare const badgeVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, Omit<VariantProps<typeof badgeVariants>, "variant" | "shape"> {
     variant?: BadgeVariant | null;
+    /**
+     * Render element — `div` (default) or `span` when the chip sits in a PHRASING context and a
+     * `<div>` would be invalid HTML: inside a `TabsTrigger`/`PopoverTrigger`/`Button` (all render a
+     * `<button>`, whose content model is phrasing content only), inside a `<label>` or a `<p>`.
+     * It swaps the TAG only — the chip's own `inline-flex` box, icon and label are unchanged, and
+     * both the icon `<svg>` and the label `<span>` are already phrasing content (gh#354).
+     */
+    as?: "div" | "span";
     /** Corner shape — `default` (badge radius) · `pill` (fully rounded) · `sharp` (square). */
     shape?: ShapeProp | null;
     tone?: BadgeTone | null;
@@ -39,7 +47,7 @@ export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "
     status?: string;
     children?: React.ReactNode;
 }
-export declare function Badge({ className, variant, shape, tone, color, icon, status, style, children, ...props }: BadgeProps): React.JSX.Element;
+export declare function Badge({ as: Element, className, variant, shape, tone, color, icon, status, style, children, ...props }: BadgeProps): React.JSX.Element;
 /**
  * Status-aware badge with the shared domain-status-to-tone mapping. `Badge` remains the
  * general-purpose primitive.

package/dist/components/data-display/badge.js

@@ -62,7 +62,7 @@ const badgeVariants = cva(
          * `BadgeVariant` union: every fill, border and text utility has to stay
          * off the element so badge-layout.css's `[data-tinted]` rule is
          * reachable (a utility beats a components-layer rule whatever the
-         * specificity — gh#260). Selected by the `color` prop, never by hand. */
+         * specificity). Selected by the `color` prop, never by hand. */
         tinted: ""
       },
       // Corner shape — default inherits the badge radius token; pill/sharp override via the tokens.
@@ -86,6 +86,7 @@ const badgeToneClass = {
   neutral: cn("border-transparent", toneNeutralClass)
 };
 function Badge({
+  as: Element = "div",
   className,
   variant,
   shape,
@@ -104,7 +105,7 @@ function Badge({
   const resolvedChildren = children ?? (status ? status in STATUS_MAP ? t(`status.${status}`) : status : void 0);
   const tinted = color != null && color !== "";
   return /* @__PURE__ */ jsxs(
-    "div",
+    Element,
     {
       "data-slot": "badge",
       "data-tone": tinted ? void 0 : resolvedTone,

package/dist/components/data-display/index.d.ts

@@ -28,6 +28,8 @@ export { TreeList } from "./tree-list.js";
 export type { TreeListItem, TreeListProps } from "./tree-list.js";
 export { Timeline } from "./timeline.js";
 export type { TimelineItem, TimelineProps } from "./timeline.js";
+export { TimelineGrid } from "./timeline-grid.js";
+export type { TimelineGridColumnProp, TimelineGridEventProp, TimelineGridProp, TimelineGridProps, } from "./timeline-grid.js";
 export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, } from "./popover.js";
 export { ScrollArea, ScrollBar } from "./scroll-area.js";
 export { Collapsible, CollapsibleTrigger, CollapsibleContent } from "./collapsible.js";

package/dist/components/data-display/index.js

@@ -29,6 +29,7 @@ import { CodeBlock } from "./code-block.js";
 import { Prose } from "./prose.js";
 import { TreeList } from "./tree-list.js";
 import { Timeline } from "./timeline.js";
+import { TimelineGrid } from "./timeline-grid.js";
 import {
   Popover,
   PopoverAnchor,
@@ -113,6 +114,7 @@ export {
   TableHeader,
   TableRow,
   Timeline,
+  TimelineGrid,
   TreeList,
   flexRender,
   useCarousel

package/dist/components/data-display/popover.d.ts

@@ -1,9 +1,21 @@
 import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
+import type { FlushProp } from "../../props/vocabulary/index.js";
 export declare function Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
 export declare function PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
 export declare function PopoverAnchor(props: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;
-export declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The panel's CONTENT owns its inset — a Command list, a menu or a table that must run edge to
+ * edge and draw its own separators across the full width. The popover drops its own padding by
+ * zeroing `--popover-space-inset` ON THE PANEL, so the inset stays one token (a service that
+ * retunes `--popover-space-inset` still owns every padded popover) and no consumer has to reach
+ * for a zero-padding utility, which no service theme can reach (gh#354).
+ */
+type PopoverContentFlush = {
+    flush?: FlushProp;
+};
+export declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & PopoverContentFlush & React.RefAttributes<HTMLDivElement>>;
 export declare const PopoverHeader: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
 export declare const PopoverTitle: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
 export declare const PopoverDescription: ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => React.JSX.Element;
+export {};

package/dist/components/data-display/popover.js

@@ -12,13 +12,15 @@ function PopoverTrigger(props) {
 function PopoverAnchor(props) {
   return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
 }
-const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, flush, style, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   PopoverPrimitive.Content,
   {
     ref,
     "data-slot": "popover-content",
+    "data-flush": flush ? "" : void 0,
     align,
     sideOffset,
+    style: flush ? { ...style, "--popover-space-inset": "0" } : style,
     className: cn(
       "ui-popover-content origin-[var(--radix-popover-content-transform-origin)]",
       "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",

package/dist/components/data-display/table.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { BreakpointProp, TableColumnPriorityProp, TablePresetProp } from "../../props/vocabulary/index.js";
+import type { BreakpointProp, FlushProp, TableCellIndentProp, TableColumnPriorityProp, TablePresetProp } from "../../props/vocabulary/index.js";
 export type TableProps = React.HTMLAttributes<HTMLTableElement> & {
     /**
      * Whether the Table owns its own horizontal-scroll region (default `true`). When `true` a table
@@ -62,5 +62,22 @@ type TableCellLabel = {
     label?: React.ReactNode;
 };
 export declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & TableCellPriority & React.RefAttributes<HTMLTableCellElement>>;
-export declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & TableCellPriority & TableCellLabel & React.RefAttributes<HTMLTableCellElement>>;
+/**
+ * The cell's CONTENT owns its inset — an expanded detail panel, a nested table, a full-bleed media
+ * strip. The cell drops its own padding so the child reaches the cell edges; without it the only
+ * route was a zero-padding utility at the call site, which no service theme can reach (gh#354).
+ */
+type TableCellFlush = {
+    flush?: FlushProp;
+};
+/**
+ * Hierarchy depth. The indent is `--table-cell-space-x + depth × --table-cell-indent-space-step`,
+ * computed in table-layout.css off the level this prop publishes as `--table-cell-indent-level`,
+ * so a service retunes (or flattens) the step without touching JSX — the route TreeSelect's
+ * `--tree-select-depth` already takes. Logical, so an RTL tree indents from the inline start.
+ */
+type TableCellIndent = {
+    indent?: TableCellIndentProp;
+};
+export declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & TableCellPriority & TableCellLabel & TableCellFlush & TableCellIndent & React.RefAttributes<HTMLTableCellElement>>;
 export {};

package/dist/components/data-display/table.js

@@ -76,13 +76,16 @@ const TableHead = React.forwardRef(({ className, priority, ...props }, ref) => /
   }
 ));
 TableHead.displayName = "TableHead";
-const TableCell = React.forwardRef(({ className, priority, label, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+const TableCell = React.forwardRef(({ className, priority, label, flush, indent, children, style, ...props }, ref) => /* @__PURE__ */ jsxs(
   "td",
   {
     ref,
     "data-slot": "table-cell",
     "data-priority": priority,
+    "data-flush": flush ? "" : void 0,
+    "data-indent": indent === void 0 ? void 0 : indent,
     className: cn(className),
+    style: indent === void 0 ? style : { ...style, "--table-cell-indent-level": indent },
     ...props,
     children: [
       label !== void 0 ? /* @__PURE__ */ jsx("span", { className: "ui-table-stacked-collection-label", "aria-hidden": "true", children: label }) : null,

package/dist/components/data-display/timeline-grid.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import type { TimelineGridProp } from "../../props/components/data-display.prop.js";
+export type { TimelineGridColumnProp, TimelineGridEventProp, TimelineGridProp, TimelineGridProp as TimelineGridProps, } from "../../props/components/data-display.prop.js";
+/**
+ * TimelineGrid — the time-axis half of the Timeline family: a vertical hour axis, one column per
+ * day (or room, or machine) and event blocks placed by start time and duration.
+ *
+ * WHAT IT IS NOT: a calendar. There is no month view, no navigation, no drag-to-create, no
+ * recurrence and no timezone conversion. `start`/`end` are clock times in the column's own day;
+ * which day a column stands for is the consumer's business.
+ *
+ * SEMANTICS: each column is a `ul` named by its own head, and each event is an `li` that PRINTS
+ * its time range as text. A screen reader therefore reads "木 14, list, 3 items — 09:00–17:30
+ * 早番 田中 …" in time order, which is the same information the sighted reader takes from the
+ * block's position. Nothing depends on the pixel offset. The hour rail is decorative
+ * (`aria-hidden`) because it repeats what every block already says.
+ */
+export declare const TimelineGrid: React.ForwardRefExoticComponent<TimelineGridProp & React.RefAttributes<HTMLDivElement>>;

package/dist/components/data-display/timeline-grid.js

@@ -0,0 +1,222 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+const MINUTES_PER_DAY = 24 * 60;
+const CLOCK = /^(\d{1,2}):(\d{2})$/;
+function toMinutes(value) {
+  const match = CLOCK.exec(value.trim());
+  if (!match) return null;
+  const hours = Number(match[1]);
+  const minutes = Number(match[2]);
+  if (!Number.isInteger(hours) || !Number.isInteger(minutes)) return null;
+  if (hours > 24 || minutes > 59 || hours === 24 && minutes !== 0) return null;
+  return hours * 60 + minutes;
+}
+function toClock(minutes) {
+  const total = (Math.round(minutes) % MINUTES_PER_DAY + MINUTES_PER_DAY) % MINUTES_PER_DAY;
+  const hours = Math.floor(total / 60);
+  const rest = total % 60;
+  return `${String(hours).padStart(2, "0")}:${String(rest).padStart(2, "0")}`;
+}
+function resolveEvent(event) {
+  const startMin = toMinutes(event.start);
+  const endMin = toMinutes(event.end);
+  if (startMin === null || endMin === null) return null;
+  return { event, startMin, endMin: endMin > startMin ? endMin : endMin + MINUTES_PER_DAY };
+}
+function placeColumn(events) {
+  const sorted = [...events].sort((a, b) => a.startMin - b.startMin || a.endMin - b.endMin);
+  const placed = [];
+  let cluster = [];
+  let clusterEnd = Number.NEGATIVE_INFINITY;
+  let laneEnds = [];
+  const closeCluster = () => {
+    const lanes = Math.max(laneEnds.length, 1);
+    for (const entry of cluster) placed.push({ ...entry, lanes });
+    cluster = [];
+    laneEnds = [];
+    clusterEnd = Number.NEGATIVE_INFINITY;
+  };
+  for (const entry of sorted) {
+    if (entry.startMin >= clusterEnd) closeCluster();
+    let lane = laneEnds.findIndex((end) => end <= entry.startMin);
+    if (lane === -1) lane = laneEnds.length;
+    laneEnds[lane] = entry.endMin;
+    clusterEnd = Math.max(clusterEnd, entry.endMin);
+    cluster.push({ ...entry, lane, lanes: 1 });
+  }
+  closeCluster();
+  return placed;
+}
+function resolveWindow(start, end, events) {
+  const pinnedStart = start === void 0 ? null : toMinutes(start);
+  const pinnedEnd = end === void 0 ? null : toMinutes(end);
+  let windowStart = pinnedStart;
+  let windowEnd = pinnedEnd;
+  if (windowStart === null || windowEnd === null) {
+    let earliest = Number.POSITIVE_INFINITY;
+    let latest = Number.NEGATIVE_INFINITY;
+    for (const entry of events) {
+      earliest = Math.min(earliest, entry.startMin);
+      latest = Math.max(latest, Math.min(entry.endMin, MINUTES_PER_DAY));
+    }
+    if (Number.isFinite(earliest)) {
+      windowStart ??= Math.floor(earliest / 60) * 60;
+      windowEnd ??= Math.ceil(latest / 60) * 60;
+    } else {
+      windowStart ??= 0;
+      windowEnd ??= MINUTES_PER_DAY;
+    }
+  }
+  if (windowEnd <= windowStart) windowEnd = windowStart + 60;
+  return { startMin: windowStart, endMin: windowEnd };
+}
+const TimelineGrid = React.forwardRef(
+  function TimelineGrid2({ label, columns, events, start, end, interval = 1, now, onEventSelect, className, id }, ref) {
+    const uid = React.useId();
+    const columnIndex = React.useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      columns.forEach((column, index) => map.set(column.id, index));
+      return map;
+    }, [columns]);
+    const resolved = React.useMemo(() => {
+      const out = [];
+      for (const event of events) {
+        const index = columnIndex.get(event.columnId);
+        if (index === void 0) continue;
+        const parsed = resolveEvent(event);
+        if (parsed) out.push({ ...parsed, columnIndex: index });
+      }
+      return out;
+    }, [events, columnIndex]);
+    const axis = React.useMemo(() => resolveWindow(start, end, resolved), [start, end, resolved]);
+    const span = axis.endMin - axis.startMin;
+    const hours = span / 60;
+    const step = Number.isFinite(interval) && interval > 0 ? interval : 1;
+    const byColumn = React.useMemo(() => {
+      const buckets = columns.map(() => []);
+      for (const entry of resolved) {
+        if (entry.endMin <= axis.startMin || entry.startMin >= axis.endMin) continue;
+        buckets[entry.columnIndex].push(entry);
+      }
+      return buckets.map(
+        (bucket) => [...placeColumn(bucket)].sort((a, b) => a.startMin - b.startMin || a.lane - b.lane)
+      );
+    }, [columns, resolved, axis.startMin, axis.endMin]);
+    const ticks = React.useMemo(() => {
+      const out = [];
+      for (let minutes = axis.startMin; minutes <= axis.endMin; minutes += step * 60) {
+        out.push({ minutes, offset: (minutes - axis.startMin) / 60 });
+      }
+      return out;
+    }, [axis.startMin, axis.endMin, step]);
+    const nowMin = now === void 0 ? null : toMinutes(now);
+    const nowOffset = nowMin !== null && nowMin >= axis.startMin && nowMin <= axis.endMin ? (nowMin - axis.startMin) / 60 : null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        id,
+        "data-slot": "timeline-grid",
+        className: cn("ui-timeline-grid ui-focus-ring", className),
+        tabIndex: 0,
+        role: "group",
+        "aria-label": label,
+        style: {
+          "--timeline-grid-hours": hours,
+          "--timeline-grid-columns": columns.length,
+          "--timeline-grid-interval": step
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "ui-timeline-grid-frame", children: [
+          /* @__PURE__ */ jsx("div", { className: "ui-timeline-grid-corner", "aria-hidden": "true" }),
+          columns.map((column, index) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              id: `${uid}-head-${index}`,
+              className: "ui-timeline-grid-head",
+              "data-current": column.current ? "true" : void 0,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "ui-timeline-grid-head-label", children: column.label }),
+                column.description === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "ui-timeline-grid-head-description", children: column.description })
+              ]
+            },
+            column.id
+          )),
+          /* @__PURE__ */ jsx("div", { className: "ui-timeline-grid-axis", "aria-hidden": "true", children: ticks.map((tick) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "ui-timeline-grid-tick",
+              style: { "--timeline-grid-tick-offset": tick.offset },
+              children: toClock(tick.minutes)
+            },
+            tick.minutes
+          )) }),
+          columns.map((column, index) => /* @__PURE__ */ jsxs(
+            "ul",
+            {
+              className: "ui-timeline-grid-column",
+              "aria-labelledby": `${uid}-head-${index}`,
+              "data-current": column.current ? "true" : void 0,
+              children: [
+                byColumn[index].map((entry) => renderEvent(entry, axis, onEventSelect)),
+                column.current && nowOffset !== null ? /* @__PURE__ */ jsx(
+                  "li",
+                  {
+                    "aria-hidden": "true",
+                    className: "ui-timeline-grid-now",
+                    style: { "--timeline-grid-now-offset": nowOffset }
+                  }
+                ) : null
+              ]
+            },
+            column.id
+          ))
+        ] })
+      }
+    );
+  }
+);
+TimelineGrid.displayName = "TimelineGrid";
+function renderEvent(entry, axis, onEventSelect) {
+  const { event } = entry;
+  const from = Math.max(entry.startMin, axis.startMin);
+  const to = Math.min(entry.endMin, axis.endMin);
+  const clippedStart = entry.startMin < axis.startMin;
+  const clippedEnd = entry.endMin > axis.endMin;
+  const clipped = clippedStart && clippedEnd ? "both" : clippedStart ? "start" : "end";
+  const range = `${toClock(entry.startMin)}\u2013${toClock(entry.endMin)}`;
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "ui-timeline-grid-event-time", children: range }),
+    /* @__PURE__ */ jsx("span", { className: "ui-timeline-grid-event-title", children: event.title }),
+    event.description === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "ui-timeline-grid-event-description", children: event.description })
+  ] });
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-event-id": event.id,
+      "data-clipped": clippedStart || clippedEnd ? clipped : void 0,
+      className: "ui-timeline-grid-event",
+      style: {
+        "--timeline-grid-event-offset": (from - axis.startMin) / 60,
+        "--timeline-grid-event-span": (to - from) / 60,
+        "--timeline-grid-event-lane": entry.lane,
+        "--timeline-grid-event-lanes": entry.lanes,
+        ...event.color === void 0 || event.color === "" ? null : { "--timeline-grid-event-color": event.color }
+      },
+      children: onEventSelect ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ui-timeline-grid-event-body ui-focus-ring",
+          onClick: () => onEventSelect(event),
+          children: body
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "ui-timeline-grid-event-body", children: body })
+    },
+    event.id
+  );
+}
+export {
+  TimelineGrid
+};

package/dist/components/data-entry/cascader.js

@@ -5,8 +5,7 @@ import { Check, ChevronRight, ChevronsUpDown, Minus, X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { pickFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
-import { controlOpenRingClass } from "../../lib/control-styles.js";
-import { Button } from "../general/button.js";
+import { controlTriggerClass } from "../../lib/control-styles.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
 import { ScrollArea, ScrollBar } from "../data-display/scroll-area.js";
 import { Command, CommandInput } from "./command.js";
@@ -238,12 +237,11 @@ function Cascader({
   return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
     /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
       /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-        Button,
+        "button",
         {
           id,
           "data-field": fieldA11y["data-field"] ?? identity["data-field"],
           type: "button",
-          variant: "outline",
           role: "combobox",
           "aria-expanded": open,
           "aria-haspopup": "listbox",
@@ -251,8 +249,8 @@ function Cascader({
           ...fieldA11y,
           disabled,
           className: cn(
-            "w-full justify-start font-normal",
-            controlOpenRingClass,
+            controlTriggerClass,
+            "w-full justify-start",
             // Reserve trailing room for the single clear-or-chevron overlay rendered below.
             "ui-control-trigger-affixed",
             !displayLabel && "text-muted-foreground"

package/dist/components/data-entry/checkbox.js

@@ -19,7 +19,7 @@ const CheckboxRoot = React.forwardRef(({ className, ...props }, ref) => {
       "data-slot": "checkbox",
       className: cn(
         // `disabled:cursor-not-allowed disabled:opacity-50` and the checked fill are DELETED, not
-        // moved (#319): `.ui-checkbox:disabled, .ui-checkbox[data-disabled]` and
+        // moved: `.ui-checkbox:disabled, .ui-checkbox[data-disabled]` and
         // `.ui-checkbox[data-state="checked"]` in styles/control.css already declare both, reading
         // --disabled-opacity and --checkbox-checked-background. Utilities are layered AFTER
         // components in Tailwind v4, so these literals were silently OUTRANKING those knobs — a

package/dist/components/data-entry/search-select.js

@@ -5,8 +5,7 @@ import { ChevronsUpDown, Loader2, X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { useFieldIdentity, useFieldNameFallback } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
-import { controlOpenRingClass } from "../../lib/control-styles.js";
-import { Button } from "../general/button.js";
+import { controlTriggerClass } from "../../lib/control-styles.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
 import { Command, CommandGroup } from "./command.js";
 import { Input } from "./input.js";
@@ -240,13 +239,12 @@ function SearchSelect({
         },
         children: [
           /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-            Button,
+            "button",
             {
               id,
               type: "button",
-              variant: "outline",
               role: "combobox",
-              size,
+              "data-size": size === "md" ? void 0 : size,
               "aria-expanded": open,
               "aria-controls": open ? listId : void 0,
               "aria-label": triggerAriaLabel,
@@ -261,8 +259,8 @@ function SearchSelect({
               "data-field": resolvedField,
               "data-value": value || void 0,
               className: cn(
-                "w-full justify-start font-normal",
-                controlOpenRingClass,
+                controlTriggerClass,
+                "w-full justify-start",
                 // Reserve trailing room for the single clear-or-chevron overlay rendered below.
                 "ui-control-trigger-affixed"
               ),

package/dist/components/data-entry/select.js

@@ -5,6 +5,7 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 import { ChevronDown, ChevronUp, X } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { controlTriggerClass } from "../../lib/control-styles.js";
+import { useInertHiddenBackground } from "../general/inert-background.js";
 import {
   mergeAriaIds,
   useFieldIdentity,
@@ -141,35 +142,38 @@ const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
-  SelectPrimitive.Content,
-  {
-    ref,
-    "data-slot": "select-content",
-    className: cn(
-      "ui-select-content data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      position === "popper" && "translate-y-1",
-      className
-    ),
-    position,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
-      /* @__PURE__ */ jsx(
-        SelectPrimitive.Viewport,
-        {
-          "data-slot": "select-viewport",
-          className: cn(
-            "ui-select-viewport",
-            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-          ),
-          children
-        }
+const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => {
+  useInertHiddenBackground();
+  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    SelectPrimitive.Content,
+    {
+      ref,
+      "data-slot": "select-content",
+      className: cn(
+        "ui-select-content data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" && "translate-y-1",
+        className
       ),
-      /* @__PURE__ */ jsx(SelectScrollDownButton, {})
-    ]
-  }
-) }));
+      position,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx(
+          SelectPrimitive.Viewport,
+          {
+            "data-slot": "select-viewport",
+            className: cn(
+              "ui-select-viewport",
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+});
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 const SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,

package/dist/components/data-entry/tree-select.js

@@ -5,8 +5,7 @@ import { ChevronDown, ChevronRight, ChevronsUpDown, X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { pickFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
-import { controlOpenRingClass } from "../../lib/control-styles.js";
-import { Button } from "../general/button.js";
+import { controlTriggerClass } from "../../lib/control-styles.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
 import { ScrollArea } from "../data-display/scroll-area.js";
 import { Checkbox } from "./checkbox.js";
@@ -177,12 +176,11 @@ function TreeSelectRoot({
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-        Button,
+        "button",
         {
           id,
           "data-field": fieldA11y["data-field"] ?? identity["data-field"],
           type: "button",
-          variant: "outline",
           role: "combobox",
           "aria-expanded": open,
           "aria-haspopup": "tree",
@@ -190,9 +188,9 @@ function TreeSelectRoot({
           ...fieldA11y,
           disabled,
           className: cn(
-            "w-full justify-between font-normal",
+            controlTriggerClass,
+            "w-full justify-between",
             allowClear && displayKeys.length > 0 && !disabled && "ui-tree-select-trigger-affixed",
-            controlOpenRingClass,
             !displayKeys.length && "text-muted-foreground",
             className
           ),

package/dist/components/general/inert-background.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Call from an overlay's content wrapper (the always-mounted portal wrapper, not the portalled
+ * content itself). Idempotent and refcounted: one observer serves every overlay on the page.
+ */
+export declare function useInertHiddenBackground(): void;