@godxjp/ui 18.15.4 → 19.1.0

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

@@ -20,7 +20,7 @@ const PopoverContent = React.forwardRef(({ className, align = "center", sideOffs
     align,
     sideOffset,
     className: cn(
-      "bg-popover text-popover-foreground z-50 w-72 origin-[var(--radix-popover-content-transform-origin)] rounded-md border p-4 shadow-md outline-none",
+      "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",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
       "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
@@ -31,14 +31,7 @@ const PopoverContent = React.forwardRef(({ className, align = "center", sideOffs
   }
 ) }));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-const PopoverHeader = ({ className, ...props }) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    "data-slot": "popover-header",
-    className: cn("flex flex-col gap-1 text-sm", className),
-    ...props
-  }
-);
+const PopoverHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { "data-slot": "popover-header", className: cn("ui-popover-header", className), ...props });
 const PopoverTitle = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { "data-slot": "popover-title", className: cn("font-medium", className), ...props });
 const PopoverDescription = ({
   className,

package/dist/components/data-display/qr-code.d.ts

@@ -5,4 +5,4 @@ export type QrCodeProps = QrCodeProp & Omit<React.ComponentPropsWithoutRef<"svg"
  * Renders a QR code entirely in-process. The encoded value is never sent to a network service,
  * written to an element attribute, or included in accessible text.
  */
-export declare const QrCode: React.ForwardRefExoticComponent<QrCodeProp & Omit<Omit<React.SVGProps<SVGSVGElement>, "ref">, "style" | "role" | "children" | "type" | keyof QrCodeProp> & React.RefAttributes<SVGSVGElement>>;
+export declare const QrCode: React.ForwardRefExoticComponent<QrCodeProp & Omit<Omit<React.SVGProps<SVGSVGElement>, "ref">, "children" | "role" | "style" | "type" | keyof QrCodeProp> & React.RefAttributes<SVGSVGElement>>;

package/dist/components/data-display/scroll-area.d.ts

@@ -1,4 +1,6 @@
 import * as React from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-export declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+import type { ScrollAreaProp } from "../../props/components/data-display.prop.js";
+export type ScrollAreaProps = ScrollAreaProp & Omit<React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>, keyof ScrollAreaProp>;
+export declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProp & Omit<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref">, keyof ScrollAreaProp> & React.RefAttributes<HTMLDivElement>>;
 export declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/data-display/scroll-area.js

@@ -3,19 +3,153 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cn } from "../../lib/utils.js";
-const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  ScrollAreaPrimitive.Root,
-  {
-    ref,
-    className: cn("relative overflow-hidden", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { tabIndex: 0, className: "size-full rounded-[inherit]", children }),
-      /* @__PURE__ */ jsx(ScrollBar, {}),
-      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
-    ]
+const ANCHOR_OFFSET_TOKEN = "--scroll-area-anchor-offset";
+const ANCHOR_OFFSET_FALLBACK_PX = 48;
+const ROOT_FONT_SIZE_FALLBACK_PX = 16;
+function cssLengthToPx(value, rootFontSize) {
+  const match = /^(-?\d*\.?\d+)(px|rem|em)?$/.exec(value.trim());
+  if (match == null) return void 0;
+  const amount = Number(match[1]);
+  if (!Number.isFinite(amount)) return void 0;
+  return match[2] === "rem" || match[2] === "em" ? amount * rootFontSize : amount;
+}
+function readAnchorOffset(element) {
+  if (typeof window === "undefined" || typeof window.getComputedStyle !== "function") {
+    return ANCHOR_OFFSET_FALLBACK_PX;
   }
-));
+  const rootFontSize = cssLengthToPx(
+    window.getComputedStyle(element.ownerDocument.documentElement).fontSize || "",
+    ROOT_FONT_SIZE_FALLBACK_PX
+  ) ?? ROOT_FONT_SIZE_FALLBACK_PX;
+  const declared = window.getComputedStyle(element).getPropertyValue(ANCHOR_OFFSET_TOKEN);
+  return cssLengthToPx(declared, rootFontSize) ?? ANCHOR_OFFSET_FALLBACK_PX;
+}
+function resolveRowContainer(root) {
+  let container = root;
+  while (container.children.length === 1 && container.firstElementChild) {
+    container = container.firstElementChild;
+  }
+  return container;
+}
+function findAnchorChild(root, scrollTop) {
+  const children = resolveRowContainer(root).children;
+  let low = 0;
+  let high = children.length - 1;
+  let found = null;
+  while (low <= high) {
+    const mid = Math.floor((low + high) / 2);
+    const child = children[mid];
+    if (!(child instanceof HTMLElement)) break;
+    if (child.offsetTop + child.offsetHeight > scrollTop) {
+      found = child;
+      high = mid - 1;
+    } else {
+      low = mid + 1;
+    }
+  }
+  return found;
+}
+function setScrollOffset(element, top) {
+  if (typeof element.scrollTo === "function") element.scrollTo({ top, behavior: "instant" });
+  else element.scrollTop = top;
+}
+function useBottomAnchor(viewport, enabled, offset, onAnchoredChange) {
+  const onAnchoredChangeRef = React.useRef(onAnchoredChange);
+  React.useEffect(() => {
+    onAnchoredChangeRef.current = onAnchoredChange;
+  }, [onAnchoredChange]);
+  React.useEffect(() => {
+    if (!viewport || !enabled) return;
+    const content = viewport.firstElementChild ?? viewport;
+    const band = offset ?? readAnchorOffset(viewport);
+    let anchored = true;
+    let record = null;
+    const distanceFromBottom = () => viewport.scrollHeight - viewport.clientHeight - viewport.scrollTop;
+    const setAnchored = (next) => {
+      if (anchored === next) return;
+      anchored = next;
+      onAnchoredChangeRef.current?.(next);
+    };
+    const remember = () => {
+      const node = findAnchorChild(content, viewport.scrollTop);
+      record = node ? { node, top: node.offsetTop - viewport.scrollTop } : null;
+    };
+    const pinToBottom = () => {
+      setScrollOffset(viewport, Math.max(0, viewport.scrollHeight - viewport.clientHeight));
+    };
+    const handleScroll = () => {
+      setAnchored(distanceFromBottom() <= band);
+      remember();
+    };
+    const handleContentChange = () => {
+      if (anchored) {
+        pinToBottom();
+      } else if (record && viewport.contains(record.node)) {
+        const target = Math.max(0, record.node.offsetTop - record.top);
+        if (target !== viewport.scrollTop) setScrollOffset(viewport, target);
+        setAnchored(distanceFromBottom() <= band);
+      }
+      remember();
+    };
+    pinToBottom();
+    remember();
+    viewport.addEventListener("scroll", handleScroll, { passive: true });
+    const observers = [];
+    if (typeof MutationObserver !== "undefined") {
+      const mutationObserver = new MutationObserver(handleContentChange);
+      mutationObserver.observe(content, { childList: true, subtree: true, characterData: true });
+      observers.push(mutationObserver);
+    }
+    if (typeof ResizeObserver !== "undefined") {
+      const resizeObserver = new ResizeObserver(handleContentChange);
+      resizeObserver.observe(viewport);
+      resizeObserver.observe(content);
+      observers.push(resizeObserver);
+    }
+    return () => {
+      viewport.removeEventListener("scroll", handleScroll);
+      for (const observer of observers) observer.disconnect();
+    };
+  }, [viewport, enabled, offset]);
+}
+const ScrollArea = React.forwardRef(
+  ({ className, children, viewportRef, anchor = "none", anchorOffset, onAnchoredChange, ...props }, ref) => {
+    const [viewport, setViewport] = React.useState(null);
+    const attachViewport = React.useCallback(
+      (node) => {
+        setViewport(node);
+        if (typeof viewportRef === "function") viewportRef(node);
+        else if (viewportRef)
+          viewportRef.current = node;
+      },
+      [viewportRef]
+    );
+    useBottomAnchor(viewport, anchor === "bottom", anchorOffset, onAnchoredChange);
+    return /* @__PURE__ */ jsxs(
+      ScrollAreaPrimitive.Root,
+      {
+        ref,
+        className: cn("relative overflow-hidden", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            ScrollAreaPrimitive.Viewport,
+            {
+              ref: attachViewport,
+              tabIndex: 0,
+              "data-slot": "scroll-area-viewport",
+              "data-anchor": anchor,
+              className: "size-full rounded-[inherit]",
+              children
+            }
+          ),
+          /* @__PURE__ */ jsx(ScrollBar, {}),
+          /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+        ]
+      }
+    );
+  }
+);
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
@@ -23,13 +157,13 @@ const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...pr
     ref,
     orientation,
     className: cn(
-      "flex touch-none transition-colors select-none",
-      orientation === "vertical" && "h-full w-2.5 border-s border-s-transparent p-px",
-      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-px",
+      "ui-scroll-area-bar flex touch-none transition-colors select-none",
+      orientation === "vertical" && "ui-scroll-area-bar--vertical h-full border-s border-s-transparent",
+      orientation === "horizontal" && "ui-scroll-area-bar--horizontal flex-col border-t border-t-transparent",
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "bg-border relative flex-1 rounded-full" })
+    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "ui-scroll-area-thumb bg-border relative flex-1" })
   }
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;

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

@@ -34,7 +34,7 @@ const Table = React.forwardRef(
           {
             ref,
             "data-slot": "table",
-            className: cn("w-full caption-bottom text-sm", bordered && "ui-table-bordered", className),
+            className: cn("w-full caption-bottom", bordered && "ui-table-bordered", className),
             ...props
           }
         )
@@ -45,14 +45,23 @@ const Table = React.forwardRef(
 Table.displayName = "Table";
 const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
 TableHeader.displayName = "TableHeader";
-const TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
+const TableBody = React.forwardRef(({ className, ...props }, ref) => (
+  // "The last row draws no rule" is an idiom, not a service-tunable constant, so it is a CSS
+  // rule (`[data-slot="table-body"] .ui-table-row:last-child`) rather than a utility. That only
+  // works because TableRow's own bottom rule moved to `.ui-table-row` in the same layer: while
+  // the row carried a `border-b` UTILITY, no `components` rule could ever zero it (gh#412).
+  /* @__PURE__ */ jsx("tbody", { ref, "data-slot": "table-body", className: cn(className), ...props })
+));
 TableBody.displayName = "TableBody";
 const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tr",
   {
     ref,
     className: cn(
-      "ui-table-row hover:bg-accent/70 data-[state=selected]:bg-primary/[0.06] border-b transition-colors",
+      // The row rule itself is `.ui-table-row` in table-layout.css (--table-row-border-width),
+      // NOT a `border-b` utility — a utility sits in `@layer utilities` and would outrank the
+      // `components` rule that has to zero it on the last row (gh#319).
+      "ui-table-row hover:bg-accent/70 data-[state=selected]:bg-primary/[0.06] transition-colors",
       className
     ),
     ...props

package/dist/components/data-entry/branch-scope-picker.js

@@ -66,7 +66,7 @@ const BranchScopePicker = React.forwardRef(
         id: rootId,
         "data-slot": "branch-scope-picker",
         "data-readonly": readOnly || void 0,
-        className: cn("ui-branch-scope-picker flex flex-col gap-3", className),
+        className: cn("ui-branch-scope-picker", className),
         children
       }
     );
@@ -113,7 +113,7 @@ const BranchScopePicker = React.forwardRef(
       return surface(
         /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Text, { size: "sm", weight: "medium", children: value.mode === "all" ? resolvedAllLabel : resolvedSelectedLabel }),
-          value.mode === "selected" && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: selectedBranches.map((branch) => /* @__PURE__ */ jsx(Badge, { variant: "outline", children: branch.name }, branch.id)) })
+          value.mode === "selected" && /* @__PURE__ */ jsx("div", { className: "ui-branch-scope-picker-badges", children: selectedBranches.map((branch) => /* @__PURE__ */ jsx(Badge, { variant: "outline", children: branch.name }, branch.id)) })
         ] })
       );
     }
@@ -145,7 +145,7 @@ const BranchScopePicker = React.forwardRef(
             "aria-errormessage": invalid ? mergeAriaIds(errorId, fieldA11y["aria-errormessage"]) : void 0
           }
         ),
-        value.mode === "selected" && /* @__PURE__ */ jsxs("div", { className: "border-border flex flex-col gap-2 border-s-2 ps-4", children: [
+        value.mode === "selected" && /* @__PURE__ */ jsxs("div", { className: "ui-branch-scope-picker-subset", children: [
           searchable && branches.length > 0 && /* @__PURE__ */ jsx(
             SearchInput,
             {
@@ -169,7 +169,7 @@ const BranchScopePicker = React.forwardRef(
                 role: "group",
                 "aria-label": t("dataEntry.branchScope.listLabel"),
                 tabIndex: 0,
-                className: "max-h-64 overflow-y-auto",
+                className: "ui-branch-scope-picker-list",
                 children: /* @__PURE__ */ jsx(
                   CheckboxGroup,
                   {

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

@@ -23,50 +23,41 @@ function Calendar({
         ...labels,
         labelNav: labels?.labelNav ?? (() => `${ariaLabel ?? "Calendar"} navigation`)
       },
-      className: cn("relative w-fit p-3", className),
+      className: cn("ui-calendar", className),
       classNames: {
-        months: cn("flex flex-col gap-4 sm:flex-row", classNames?.months),
-        month: cn("relative flex flex-col gap-4", classNames?.month),
-        month_caption: cn(
-          "flex h-[length:var(--control-height)] w-full items-center justify-center px-8",
-          classNames?.month_caption
-        ),
-        caption_label: cn("text-sm font-medium", classNames?.caption_label),
+        months: cn("ui-calendar-months", classNames?.months),
+        month: cn("ui-calendar-month", classNames?.month),
+        month_caption: cn("ui-calendar-caption", classNames?.month_caption),
+        caption_label: cn("ui-calendar-caption-label", classNames?.caption_label),
         // z-10 is load-bearing: `month` below is position:relative and later in the DOM, so
         // without a z-index it paints OVER these buttons — they render but never receive the
         // click (the month caption swallows it) and the calendar looks frozen.
-        nav: cn(
-          "absolute inset-x-0 top-3 z-10 flex items-center justify-between px-1",
-          classNames?.nav
-        ),
+        nav: cn("ui-calendar-nav", classNames?.nav),
         button_previous: cn(
           buttonVariants({ variant: "outline" }),
           controlIconSmClass,
-          "bg-transparent p-0 opacity-70 hover:opacity-100",
+          "ui-calendar-nav-button",
           classNames?.button_previous
         ),
         button_next: cn(
           buttonVariants({ variant: "outline" }),
           controlIconSmClass,
-          "bg-transparent p-0 opacity-70 hover:opacity-100",
+          "ui-calendar-nav-button",
           classNames?.button_next
         ),
-        month_grid: cn("mt-4 w-full border-collapse", classNames?.month_grid),
+        month_grid: cn("ui-calendar-grid", classNames?.month_grid),
         weekdays: cn("flex", classNames?.weekdays),
-        weekday: cn(
-          "w-[length:var(--control-height)] rounded-md text-xs font-normal text-muted-foreground",
-          classNames?.weekday
-        ),
-        week: cn("mt-2 flex w-full", classNames?.week),
+        weekday: cn("ui-calendar-weekday", classNames?.weekday),
+        week: cn("ui-calendar-week", classNames?.week),
         day: cn(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20",
+          "ui-calendar-day",
           "[&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50",
           "[&:has([aria-selected].day-range-end)]:rounded-e-md",
           classNames?.day
         ),
         day_button: cn(
           buttonVariants({ variant: "ghost" }),
-          "size-[length:var(--control-height)] p-0 font-normal aria-selected:opacity-100",
+          "ui-calendar-day-button",
           classNames?.day_button
         ),
         range_start: cn("day-range-start rounded-s-md", classNames?.range_start),
@@ -88,14 +79,14 @@ function Calendar({
           "day-outside text-muted-foreground aria-selected:text-muted-foreground",
           classNames?.outside
         ),
-        disabled: cn("text-muted-foreground opacity-50", classNames?.disabled),
+        disabled: cn("ui-calendar-day-disabled", classNames?.disabled),
         hidden: cn("invisible", classNames?.hidden),
         ...classNames
       },
       components: {
         Chevron: ({ orientation, className: chevronClassName }) => {
           const Icon = orientation === "left" ? ChevronLeft : ChevronRight;
-          return /* @__PURE__ */ jsx(Icon, { className: cn("size-4", chevronClassName), "aria-hidden": "true" });
+          return /* @__PURE__ */ jsx(Icon, { className: cn("ui-calendar-chevron", chevronClassName), "aria-hidden": "true" });
         }
       },
       ...props,

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

@@ -4,7 +4,7 @@ import * as React from "react";
 import { Check, ChevronRight, ChevronsUpDown, Minus, X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
-import { pickFieldA11y } from "../../lib/field-a11y.js";
+import { pickFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
 import { controlOpenRingClass } from "../../lib/control-styles.js";
 import { Button } from "../general/button.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
@@ -38,12 +38,12 @@ function CheckboxVisual({
       "aria-hidden": "true",
       "data-slot": "checkbox",
       "data-state": state,
+      "data-disabled": disabled ? "" : void 0,
       className: cn(
         "ui-checkbox inline-flex items-center justify-center",
         // The shared CSS fills the box for [data-state=checked]; mirror that fill for the
         // indeterminate ("some children selected") state so a partial parent reads as partial.
         "data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
-        disabled && "cursor-not-allowed opacity-50",
         className
       ),
       children: indeterminate ? /* @__PURE__ */ jsx(Minus, { className: "ui-checkbox-icon", "aria-hidden": "true" }) : checked ? /* @__PURE__ */ jsx(Check, { className: "ui-checkbox-icon", "aria-hidden": "true" }) : null
@@ -86,6 +86,7 @@ function Cascader({
 }) {
   const { t } = useTranslation();
   const fieldA11y = pickFieldA11y(ariaProps);
+  const identity = useFieldIdentity({ id, "data-field": fieldA11y["data-field"] });
   const reactId = React.useId();
   const panelId = `${id ?? reactId}-panel`;
   const options = React.useMemo(
@@ -175,13 +176,13 @@ function Cascader({
     else commitSingle([]);
   };
   const renderCascadeColumns = () => /* @__PURE__ */ jsxs(ScrollArea, { className: "w-full", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex max-h-[min(280px,50vh)]", children: columns.map((col, colIndex) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "ui-cascader-columns", children: columns.map((col, colIndex) => /* @__PURE__ */ jsx(
       "ul",
       {
         role: "listbox",
         "aria-orientation": "vertical",
         "aria-multiselectable": multiple ? true : void 0,
-        className: "min-w-[9rem] border-e last:border-e-0",
+        className: "ui-cascader-column",
         children: col.map((node) => {
           const path = [...activePath.slice(0, colIndex), node.value];
           const hasChildren = (node.children?.length ?? 0) > 0 && node.isLeaf !== true;
@@ -197,11 +198,11 @@ function Cascader({
               "aria-haspopup": hasChildren ? "menu" : void 0,
               "aria-expanded": hasChildren ? active : void 0,
               disabled: node.disabled,
+              "data-disabled": node.disabled ? "" : void 0,
               className: cn(
-                "flex w-full items-center gap-1 px-3 py-2 text-sm outline-none",
+                "ui-cascader-option",
                 "hover:bg-accent hover:text-accent-foreground",
-                active && "bg-accent/70 font-medium",
-                node.disabled && "pointer-events-none opacity-50"
+                active && "bg-accent/70 font-medium"
               ),
               onMouseEnter: (
                 // Hover-expand: a parent opens its children column; a leaf collapses any
@@ -221,9 +222,9 @@ function Cascader({
                     className: "me-1"
                   }
                 ),
-                !multiple && selected && /* @__PURE__ */ jsx(Check, { className: "me-1 size-4 shrink-0", "aria-hidden": "true" }),
+                !multiple && selected && /* @__PURE__ */ jsx(Check, { className: "ui-cascader-option-icon", "aria-hidden": "true" }),
                 /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-start", children: node.label }),
-                hasChildren && /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 shrink-0 opacity-50", "aria-hidden": "true" })
+                hasChildren && /* @__PURE__ */ jsx(ChevronRight, { className: "ui-cascader-option-chevron", "aria-hidden": "true" })
               ]
             }
           ) }, node.value);
@@ -240,6 +241,7 @@ function Cascader({
         Button,
         {
           id,
+          "data-field": fieldA11y["data-field"] ?? identity["data-field"],
           type: "button",
           variant: "outline",
           role: "combobox",
@@ -252,81 +254,77 @@ function Cascader({
             "w-full justify-start font-normal",
             controlOpenRingClass,
             // Reserve trailing room for the single clear-or-chevron overlay rendered below.
-            "pe-9",
+            "ui-control-trigger-affixed",
             !displayLabel && "text-muted-foreground"
           ),
           children: /* @__PURE__ */ jsx("span", { className: "truncate", children: displayLabel ?? resolvedPlaceholder })
         }
       ) }),
-      /* @__PURE__ */ jsxs(
-        PopoverContent,
-        {
-          id: panelId,
-          className: "w-auto min-w-[var(--radix-popover-trigger-width)] p-0",
-          align: "start",
-          children: [
-            showSearch && /* @__PURE__ */ jsx(Command, { shouldFilter: false, children: /* @__PURE__ */ jsx(
-              CommandInput,
-              {
-                placeholder: t("dataEntry.cascader.searchPlaceholder"),
-                value: search,
-                onValueChange: setSearch
-              }
-            ) }),
-            isSearching ? /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[min(300px,50vh)]", children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "p-1",
-                role: "listbox",
-                "aria-multiselectable": multiple ? true : void 0,
-                children: searchResults.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground py-6 text-center text-sm", children: t("dataEntry.cascader.empty") }) : searchResults.map(({ path, labels }) => {
-                  const label = labels.join(" / ");
-                  const selected = multiple ? pathInValues(path, multiValue) : pathsEqual(path, singleValue);
-                  return /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      type: "button",
-                      role: "option",
-                      "aria-selected": selected,
-                      className: cn(
-                        "flex w-full items-center rounded-sm px-2 py-1.5 text-sm outline-none",
-                        "hover:bg-accent hover:text-accent-foreground",
-                        selected && "bg-accent/60"
-                      ),
-                      onClick: () => handleSelectNode({ value: path.at(-1), label }, path),
-                      children: [
-                        multiple ? /* @__PURE__ */ jsx(CheckboxVisual, { checked: selected, className: "me-2" }) : /* @__PURE__ */ jsx(
-                          Check,
-                          {
-                            className: cn(
-                              "me-2 size-4 shrink-0",
-                              selected ? "opacity-100" : "opacity-0"
-                            ),
-                            "aria-hidden": "true"
-                          }
-                        ),
-                        /* @__PURE__ */ jsx("span", { className: "truncate text-start", children: label })
-                      ]
-                    },
-                    pathKey(path)
-                  );
-                })
-              }
-            ) }) : renderCascadeColumns()
-          ]
-        }
-      )
+      /* @__PURE__ */ jsxs(PopoverContent, { id: panelId, className: "ui-cascader-popover", align: "start", children: [
+        showSearch && /* @__PURE__ */ jsx(Command, { shouldFilter: false, children: /* @__PURE__ */ jsx(
+          CommandInput,
+          {
+            placeholder: t("dataEntry.cascader.searchPlaceholder"),
+            value: search,
+            onValueChange: setSearch
+          }
+        ) }),
+        isSearching ? /* @__PURE__ */ jsx(ScrollArea, { className: "ui-cascader-list", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "ui-cascader-panel",
+            role: "listbox",
+            "aria-multiselectable": multiple ? true : void 0,
+            children: searchResults.length === 0 ? /* @__PURE__ */ jsx("p", { className: "ui-cascader-empty", children: t("dataEntry.cascader.empty") }) : searchResults.map(({ path, labels }) => {
+              const label = labels.join(" / ");
+              const selected = multiple ? pathInValues(path, multiValue) : pathsEqual(path, singleValue);
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": selected,
+                  className: cn(
+                    "ui-cascader-result",
+                    "hover:bg-accent hover:text-accent-foreground",
+                    selected && "bg-accent/60"
+                  ),
+                  onClick: () => handleSelectNode({ value: path.at(-1), label }, path),
+                  children: [
+                    multiple ? /* @__PURE__ */ jsx(CheckboxVisual, { checked: selected, className: "me-2" }) : /* @__PURE__ */ jsx(
+                      Check,
+                      {
+                        className: "ui-cascader-result-icon",
+                        "data-selected": selected ? "true" : "false",
+                        "aria-hidden": "true"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "truncate text-start", children: label })
+                  ]
+                },
+                pathKey(path)
+              );
+            })
+          }
+        ) }) : renderCascadeColumns()
+      ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 end-3 flex items-center", children: showClear ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "ui-control-affix ui-cascader-affix", children: showClear ? /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         "aria-label": t("dataEntry.cascader.clear"),
-        className: "pointer-events-auto flex size-4 items-center justify-center rounded-sm opacity-50 hover:opacity-100 focus-visible:opacity-100",
+        className: "ui-control-affix-action",
         onClick: clearValue,
-        children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+        children: /* @__PURE__ */ jsx(X, { className: "ui-control-affix-icon", "aria-hidden": "true" })
+      }
+    ) : /* @__PURE__ */ jsx(
+      ChevronsUpDown,
+      {
+        className: "ui-control-affix-icon ui-control-affix-indicator",
+        "aria-hidden": "true"
       }
-    ) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 shrink-0 opacity-50", "aria-hidden": "true" }) })
+    ) })
   ] });
 }
 export {