@godxjp/ui 20.0.0 → 20.1.0

package/dist/components/data-display/service-launcher-card.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { Plus } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { Badge } from "./badge.js";
-import { Card } from "./card.js";
+import { Card, CardContent } from "./card.js";
 const ServiceLauncherCard = React.forwardRef(
   ({
     className,
@@ -20,7 +20,7 @@ const ServiceLauncherCard = React.forwardRef(
     ...props
   }, ref) => {
     const Heading = `h${titleLevel}`;
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       Card,
       {
         ref,
@@ -29,7 +29,7 @@ const ServiceLauncherCard = React.forwardRef(
         "data-service-launcher": "",
         "data-unavailable": disabledReason != null ? "" : void 0,
         ...props,
-        children: [
+        children: /* @__PURE__ */ jsxs(CardContent, { solo: true, children: [
           /* @__PURE__ */ jsxs("div", { "data-slot": "service-launcher-heading", children: [
             /* @__PURE__ */ jsx("span", { "data-slot": "service-launcher-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, {}) }),
             /* @__PURE__ */ jsx(Heading, { "data-slot": "service-launcher-title", children: title }),
@@ -39,14 +39,14 @@ const ServiceLauncherCard = React.forwardRef(
           metadata != null ? /* @__PURE__ */ jsx("div", { "data-slot": "service-launcher-metadata", children: metadata }) : null,
           disabledReason != null ? /* @__PURE__ */ jsx("div", { "data-slot": "service-launcher-disabled-reason", children: disabledReason }) : null,
           /* @__PURE__ */ jsx("div", { "data-slot": "service-launcher-action", children: action })
-        ]
+        ] })
       }
     );
   }
 );
 ServiceLauncherCard.displayName = "ServiceLauncherCard";
 const ServiceCatalogCta = React.forwardRef(
-  ({ className, icon: Icon = Plus, title, action, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ({ className, icon: Icon = Plus, title, action, ...props }, ref) => /* @__PURE__ */ jsx(
     Card,
     {
       ref,
@@ -54,11 +54,11 @@ const ServiceCatalogCta = React.forwardRef(
       className: cn("ui-service-catalog-cta", className),
       "data-service-catalog-cta": "",
       ...props,
-      children: [
+      children: /* @__PURE__ */ jsxs(CardContent, { solo: true, children: [
         /* @__PURE__ */ jsx(Icon, { "data-slot": "service-catalog-icon", "aria-hidden": "true" }),
         /* @__PURE__ */ jsx("div", { "data-slot": "service-catalog-title", children: title }),
         /* @__PURE__ */ jsx("div", { "data-slot": "service-catalog-action", children: action })
-      ]
+      ] })
     }
   )
 );
@@ -68,7 +68,7 @@ function ServiceLauncherCardSkeleton({
   label,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Card,
     {
       density: "tight",
@@ -76,7 +76,7 @@ function ServiceLauncherCardSkeleton({
       "data-service-launcher": "",
       "aria-busy": "true",
       ...props,
-      children: [
+      children: /* @__PURE__ */ jsxs(CardContent, { solo: true, children: [
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
         /* @__PURE__ */ jsxs("div", { "data-slot": "service-launcher-skeleton-heading", children: [
           /* @__PURE__ */ jsx("span", { className: "ui-skeleton-block", "data-slot": "service-launcher-skeleton-icon" }),
@@ -86,7 +86,7 @@ function ServiceLauncherCardSkeleton({
         /* @__PURE__ */ jsx("span", { className: "ui-skeleton-block", "data-slot": "service-launcher-skeleton-description" }),
         /* @__PURE__ */ jsx("span", { className: "ui-skeleton-block", "data-slot": "service-launcher-skeleton-metadata" }),
         /* @__PURE__ */ jsx("span", { className: "ui-skeleton-block", "data-slot": "service-launcher-skeleton-action" })
-      ]
+      ] })
     }
   );
 }

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { BreakpointProp, FlushProp, TableCellIndentProp, TableColumnPriorityProp, TablePresetProp } from "../../props/vocabulary/index.js";
+import type { BreakpointProp, FlushProp, TableCellIndentProp, TableColumnPriorityProp, TablePresetProp, WidthProp } 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
@@ -53,6 +53,14 @@ export declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttribu
 type TableCellPriority = {
     priority?: TableColumnPriorityProp;
 };
+/** Logical column alignment, wrapping and measure, shared by header and body cells.
+ * Numeric cells use tabular figures and end alignment unless align is explicit. */
+type TableCellAxes = {
+    align?: "start" | "center" | "end";
+    numeric?: boolean;
+    wrap?: boolean;
+    width?: WidthProp;
+};
 /**
  * Rendered into the DOM unconditionally (so it exists for the preset's CSS to reveal) but visually
  * hidden above the collapse step, where the real `<th>` already carries the label — an ordinary
@@ -61,7 +69,7 @@ type TableCellPriority = {
 type TableCellLabel = {
     label?: React.ReactNode;
 };
-export declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & TableCellPriority & React.RefAttributes<HTMLTableCellElement>>;
+export declare const TableHead: React.ForwardRefExoticComponent<Omit<React.ThHTMLAttributes<HTMLTableCellElement>, "align"> & TableCellPriority & TableCellAxes & 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
@@ -79,5 +87,5 @@ type TableCellFlush = {
 type TableCellIndent = {
     indent?: TableCellIndentProp;
 };
-export declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & TableCellPriority & TableCellLabel & TableCellFlush & TableCellIndent & React.RefAttributes<HTMLTableCellElement>>;
+export declare const TableCell: React.ForwardRefExoticComponent<Omit<React.TdHTMLAttributes<HTMLTableCellElement>, "align"> & TableCellPriority & TableCellLabel & TableCellFlush & TableCellIndent & TableCellAxes & React.RefAttributes<HTMLTableCellElement>>;
 export {};

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

@@ -65,34 +65,64 @@ const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-const TableHead = React.forwardRef(({ className, priority, ...props }, ref) => /* @__PURE__ */ jsx(
+function cellWidth(width) {
+  if (width === void 0) return void 0;
+  return typeof width === "number" ? `${width}px` : width;
+}
+const TableHead = React.forwardRef(({ className, priority, align, numeric, wrap, width, style, ...props }, ref) => /* @__PURE__ */ jsx(
   "th",
   {
     ref,
     "data-slot": "table-head",
     "data-priority": priority,
+    "data-align": align,
+    "data-numeric": numeric ? "" : void 0,
+    "data-wrap": wrap ? "" : void 0,
     className: cn(tableHeadHeightClass, className),
+    style: width === void 0 ? style : { ...style, inlineSize: cellWidth(width) },
     ...props
   }
 ));
 TableHead.displayName = "TableHead";
-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,
-      children
-    ]
-  }
-));
+const TableCell = React.forwardRef(
+  ({
+    className,
+    priority,
+    label,
+    flush,
+    indent,
+    align,
+    numeric,
+    wrap,
+    width,
+    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,
+      "data-align": align,
+      "data-numeric": numeric ? "" : void 0,
+      "data-wrap": wrap ? "" : void 0,
+      className: cn(className),
+      style: indent === void 0 && width === void 0 ? style : {
+        ...style,
+        ...indent === void 0 ? null : { "--table-cell-indent-level": indent },
+        ...width === void 0 ? null : { inlineSize: cellWidth(width) }
+      },
+      ...props,
+      children: [
+        label !== void 0 ? /* @__PURE__ */ jsx("span", { className: "ui-table-stacked-collection-label", "aria-hidden": "true", children: label }) : null,
+        children
+      ]
+    }
+  )
+);
 TableCell.displayName = "TableCell";
 export {
   Table,

package/dist/components/data-display/tree-list.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronRight, Package } from "lucide-react";
 import { Badge } from "./badge.js";
 function TreeList({ items }) {
   return /* @__PURE__ */ jsx("ul", { className: "ui-tree-list", children: items.map((item) => /* @__PURE__ */ jsxs(
@@ -8,19 +7,15 @@ function TreeList({ items }) {
     {
       className: "ui-tree-item",
       "data-active": item.active ? "true" : void 0,
-      "data-depth": item.depth ?? 0,
+      "data-depth": Math.max(0, item.depth ?? 0),
+      style: { "--tree-item-depth": Math.max(0, item.depth ?? 0) },
       "aria-current": item.active ? "true" : void 0,
       children: [
-        /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx(Package, { "aria-hidden": "true" }),
         /* @__PURE__ */ jsxs("div", { className: "ui-tree-item-body", children: [
-          /* @__PURE__ */ jsxs("div", { className: "ui-tree-item-title", children: [
-            item.active ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Current: " }) : null,
-            item.title
-          ] }),
+          /* @__PURE__ */ jsx("div", { className: "ui-tree-item-title", children: item.title }),
           item.description ? /* @__PURE__ */ jsx("div", { className: "ui-tree-item-description", children: item.description }) : null
         ] }),
-        item.badge ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: item.badge }) : null
+        item.badge != null ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: item.badge }) : null
       ]
     },
     item.id

package/dist/components/data-entry/calendar.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { CalendarProp } from "../../props/components/data-entry.prop.js";
-export type { CalendarProp, CalendarProp as CalendarProps, CalendarFooterProp, } from "../../props/components/data-entry.prop.js";
-export declare function Calendar({ className, classNames, showOutsideDays, "aria-label": ariaLabel, labels, showToday, showClose, onClose, footer, width, bordered, month: monthProp, onMonthChange, ...props }: CalendarProp): React.JSX.Element;
+export type { CalendarProp, CalendarProp as CalendarProps, CalendarCellRenderProp, CalendarFooterProp, } from "../../props/components/data-entry.prop.js";
+export declare function Calendar({ className, classNames, showOutsideDays, "aria-label": ariaLabel, labels, showToday, showClose, onClose, footer, width, bordered, cellRender, month: monthProp, onMonthChange, ...props }: CalendarProp): React.JSX.Element;

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

@@ -2,7 +2,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
-import { DayPicker, dateMatchModifiers } from "react-day-picker";
+import { DayButton, DayPicker, dateMatchModifiers } from "react-day-picker";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { controlIconSmClass } from "../../lib/control-styles.js";
@@ -23,6 +23,7 @@ function Calendar({
   footer,
   width = "auto",
   bordered = false,
+  cellRender,
   month: monthProp,
   onMonthChange,
   ...props
@@ -169,6 +170,16 @@ function Calendar({
           const Icon = orientation === "left" ? ChevronLeft : orientation === "up" ? ChevronUp : orientation === "down" ? ChevronDown : ChevronRight;
           return /* @__PURE__ */ jsx(Icon, { className: cn("ui-calendar-chevron", chevronClassName), "aria-hidden": "true" });
         },
+        /**
+         * `cellRender` WRAPS the library's own day button rather than replacing it (gh#390). The
+         * button carries the selection state, `aria-selected`, the disabled handling and its place
+         * in the grid's roving tabindex; handing a consumer a blank cell to rebuild would mean
+         * every 祝日 marker in every app re-derives all of that, and most would get it wrong.
+         * So the original node is passed in and the consumer decorates around it.
+         */
+        ...cellRender ? {
+          DayButton: (dayButtonProps) => /* @__PURE__ */ jsx(Fragment, { children: cellRender(dayButtonProps.day.date, { originNode: /* @__PURE__ */ jsx(DayButton, { ...dayButtonProps }) }) })
+        } : {},
         /*
          * A consumer's `components` MERGE with ours; they must not replace the object.
          *

package/dist/components/data-entry/cascader.d.ts

@@ -2,4 +2,4 @@ import * as React from "react";
 import type { CascaderProp } from "../../props/components/data-entry.prop.js";
 export type { CascaderProp, CascaderProp as CascaderProps, } from "../../props/components/data-entry.prop.js";
 export type { TreeOption, TreeFieldNames } from "./tree-utils.js";
-export declare function Cascader({ options: optionsProp, value, defaultValue, onValueChange, multiple, changeOnSelect, showSearch, placeholder, disabled, className, id, expandTrigger, fieldNames, allowClear, ...ariaProps }: CascaderProp): React.JSX.Element;
+export declare function Cascader({ options: optionsProp, value, defaultValue, onValueChange, multiple, changeOnSelect, showSearch, placeholder, disabled, readOnly, name, className, id, expandTrigger, fieldNames, allowClear, size, status, variant, loading, open: openProp, defaultOpen, onOpenChange, showCheckedStrategy, loadData, displayRender, optionRender, maxTagCount, maxTagPlaceholder, notFoundContent, autoClearSearchValue, search: searchProp, onSearchChange, ...ariaProps }: CascaderProp): React.JSX.Element;

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

@@ -1,11 +1,17 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Check, ChevronRight, ChevronsUpDown, Minus, X } from "lucide-react";
+import { Check, ChevronRight, ChevronsUpDown, Loader2, 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 { controlTriggerClass } from "../../lib/control-styles.js";
+import { controlSurfaceTriggerClass } from "../../lib/control-styles.js";
+import {
+  applyMaxTagCount,
+  controlSurfaceAttrs,
+  resolveAllowClear,
+  resolveAriaInvalid
+} from "./control-surface.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";
@@ -15,7 +21,8 @@ import {
   getNodeByPath,
   normalizeTreeOptions,
   pathKey,
-  pathsEqual
+  pathsEqual,
+  reactNodeText
 } from "./tree-utils.js";
 function pathInValues(path, values) {
   return values.some((v) => pathsEqual(v, path));
@@ -66,6 +73,41 @@ function aggregateCheckState(node, path, values) {
   if (total === 0 || selected === 0) return "none";
   return selected === total ? "checked" : "indeterminate";
 }
+function leafPathsUnder(node, path) {
+  const out = [];
+  const walk = (current, prefix) => {
+    const isLeaf = (current.children?.length ?? 0) === 0 || current.isLeaf === true;
+    if (isLeaf) {
+      out.push(prefix);
+      return;
+    }
+    for (const child of current.children) walk(child, [...prefix, child.value]);
+  };
+  walk(node, path);
+  return out;
+}
+function collapseToParents(values, options) {
+  const representative = /* @__PURE__ */ new Map();
+  const walk = (nodes, prefix) => {
+    for (const node of nodes) {
+      const path = [...prefix, node.value];
+      const hasChildren = (node.children?.length ?? 0) > 0 && node.isLeaf !== true;
+      if (!hasChildren) continue;
+      if (aggregateCheckState(node, path, values) === "checked") {
+        for (const leaf of leafPathsUnder(node, path)) representative.set(pathKey(leaf), path);
+        continue;
+      }
+      walk(node.children, path);
+    }
+  };
+  walk(options, []);
+  const out = [];
+  for (const value of values) {
+    const shown = representative.get(pathKey(value)) ?? value;
+    if (!out.some((existing) => pathsEqual(existing, shown))) out.push(shown);
+  }
+  return out;
+}
 function Cascader({
   options: optionsProp,
   value,
@@ -76,25 +118,76 @@ function Cascader({
   showSearch,
   placeholder,
   disabled,
+  readOnly,
+  name,
   className,
   id,
   expandTrigger = "click",
   fieldNames,
-  allowClear = true,
+  allowClear,
+  size,
+  status,
+  variant,
+  loading = false,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  showCheckedStrategy = "SHOW_CHILD",
+  loadData,
+  displayRender,
+  optionRender,
+  maxTagCount,
+  maxTagPlaceholder,
+  notFoundContent,
+  autoClearSearchValue = true,
+  search: searchProp,
+  onSearchChange,
   ...ariaProps
 }) {
   const { t } = useTranslation();
   const fieldA11y = pickFieldA11y(ariaProps);
-  const identity = useFieldIdentity({ id, "data-field": fieldA11y["data-field"] });
+  const identity = useFieldIdentity({ id, name, "data-field": fieldA11y["data-field"] });
+  const resolvedName = name ?? identity.name;
   const reactId = React.useId();
   const panelId = `${id ?? reactId}-panel`;
   const options = React.useMemo(
     () => normalizeTreeOptions(optionsProp, fieldNames),
     [optionsProp, fieldNames]
   );
-  const [open, setOpen] = React.useState(false);
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const isOpenControlled = openProp !== void 0;
+  const open = isOpenControlled ? openProp : internalOpen;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (!isOpenControlled) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [isOpenControlled, onOpenChange]
+  );
   const [activePath, setActivePath] = React.useState([]);
-  const [search, setSearch] = React.useState("");
+  const [internalSearch, setInternalSearch] = React.useState("");
+  const isSearchControlled = searchProp !== void 0;
+  const search = isSearchControlled ? searchProp : internalSearch;
+  const setSearch = React.useCallback(
+    (next) => {
+      if (!isSearchControlled) setInternalSearch(next);
+      onSearchChange?.(next);
+    },
+    [isSearchControlled, onSearchChange]
+  );
+  const requestedLoads = React.useRef(/* @__PURE__ */ new Set());
+  const requestLoad = React.useCallback(
+    (path, chain) => {
+      if (!loadData) return;
+      const node = chain.at(-1);
+      if (!node || node.isLeaf === true || (node.children?.length ?? 0) > 0) return;
+      const key = pathKey(path);
+      if (requestedLoads.current.has(key)) return;
+      requestedLoads.current.add(key);
+      void loadData(chain);
+    },
+    [loadData]
+  );
   const isControlledSingle = !multiple && value !== void 0;
   const isControlledMulti = multiple && value !== void 0;
   const [internalSingle, setInternalSingle] = React.useState(
@@ -106,14 +199,52 @@ function Cascader({
   const singleValue = isControlledSingle ? value : internalSingle;
   const multiValue = isControlledMulti ? value : internalMulti;
   const resolvedPlaceholder = placeholder ?? t("dataEntry.cascader.placeholder");
+  const hasValue = multiple ? multiValue.length > 0 : singleValue.length > 0;
   const displayLabel = React.useMemo(() => {
     if (multiple) {
       if (!multiValue.length) return null;
-      return multiValue.map((path) => formatPathLabels(getNodeByPath(options, path))).join(", ");
+      const shown = showCheckedStrategy === "SHOW_PARENT" ? collapseToParents(multiValue, options) : multiValue;
+      const items = shown.map((path) => {
+        const chain2 = getNodeByPath(options, path);
+        const labels = chain2.map((node) => reactNodeText(node.label));
+        return {
+          value: pathKey(path),
+          label: displayRender ? displayRender(labels, chain2) : formatPathLabels(chain2)
+        };
+      });
+      const { visible, omitted, overflow } = applyMaxTagCount(
+        items,
+        maxTagCount,
+        maxTagPlaceholder
+      );
+      const body = visible.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        index > 0 ? ", " : null,
+        item.label
+      ] }, item.value));
+      if (omitted.length === 0) return body;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        body,
+        ", ",
+        /* @__PURE__ */ jsx("span", { "data-slot": "cascader-overflow", children: overflow ?? t("dataEntry.selection.overflow", { count: omitted.length }) })
+      ] });
     }
     if (!singleValue.length) return null;
-    return formatPathLabels(getNodeByPath(options, singleValue));
-  }, [multiple, multiValue, singleValue, options]);
+    const chain = getNodeByPath(options, singleValue);
+    return displayRender ? displayRender(
+      chain.map((node) => reactNodeText(node.label)),
+      chain
+    ) : formatPathLabels(chain);
+  }, [
+    multiple,
+    multiValue,
+    singleValue,
+    options,
+    showCheckedStrategy,
+    displayRender,
+    maxTagCount,
+    maxTagPlaceholder,
+    t
+  ]);
   const setSingleValue = (path) => {
     if (!isControlledSingle) setInternalSingle(path);
     onValueChange?.(path, getNodeByPath(options, path));
@@ -122,7 +253,7 @@ function Cascader({
     setSingleValue(path);
     setOpen(false);
     setActivePath([]);
-    setSearch("");
+    if (autoClearSearchValue) setSearch("");
   };
   const commitMulti = (paths) => {
     if (!isControlledMulti) setInternalMulti(paths);
@@ -143,6 +274,11 @@ function Cascader({
   }, [options, activePath]);
   const handleSelectNode = (node, path) => {
     const hasChildren = (node.children?.length ?? 0) > 0 && node.isLeaf !== true;
+    requestLoad(path, getNodeByPath(options, path));
+    if (loadData && node.isLeaf === false && !(node.children?.length ?? 0)) {
+      setActivePath(path);
+      return;
+    }
     if (multiple) {
       if (hasChildren && !changeOnSelect) setActivePath(path);
       else if (!node.disableCheckbox) commitMulti(togglePath(multiValue, path));
@@ -161,11 +297,12 @@ function Cascader({
     [options, search, isSearching]
   );
   const handleOpenChange = (next) => {
+    if (readOnly && next) return;
     setOpen(next);
     if (next) {
       setActivePath(multiple ? [] : singleValue);
     } else {
-      setSearch("");
+      if (autoClearSearchValue) setSearch("");
       setActivePath([]);
     }
   };
@@ -208,7 +345,11 @@ function Cascader({
                 // deeper column but keeps its own. Never collapse on the column's mouseleave
                 // — moving the pointer toward the next column would strand the deeper levels
                 // and make a depth-3 leaf unreachable.
-                expandTrigger === "hover" && !node.disabled ? () => setActivePath(hasChildren ? path : path.slice(0, -1)) : void 0
+                expandTrigger === "hover" && !node.disabled ? () => {
+                  const loadable = node.isLeaf === false && !(node.children?.length ?? 0);
+                  requestLoad(path, getNodeByPath(options, path));
+                  setActivePath(hasChildren || loadable ? path : path.slice(0, -1));
+                } : void 0
               ),
               onClick: () => !node.disabled && handleSelectNode(node, path),
               children: [
@@ -222,8 +363,8 @@ function Cascader({
                   }
                 ),
                 !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: "ui-cascader-option-chevron", "aria-hidden": "true" })
+                /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-start", children: optionRender ? optionRender(node) : node.label }),
+                (hasChildren || loadData && node.isLeaf === false) && /* @__PURE__ */ jsx(ChevronRight, { className: "ui-cascader-option-chevron", "aria-hidden": "true" })
               ]
             }
           ) }, node.value);
@@ -233,7 +374,9 @@ function Cascader({
     )) }),
     /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" })
   ] });
-  const showClear = allowClear && displayLabel && !disabled;
+  const clearControl = resolveAllowClear(allowClear, true, t("dataEntry.cascader.clear"));
+  const showClear = clearControl.enabled && hasValue && !disabled && !readOnly && !loading;
+  const surface = controlSurfaceAttrs({ variant, status, size });
   return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
     /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
       /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -247,17 +390,31 @@ function Cascader({
           "aria-haspopup": "listbox",
           "aria-controls": open ? panelId : void 0,
           ...fieldA11y,
+          ...surface,
+          "aria-invalid": resolveAriaInvalid(fieldA11y["aria-invalid"], status),
+          "aria-busy": loading || void 0,
+          "aria-readonly": readOnly || void 0,
           disabled,
           className: cn(
-            controlTriggerClass,
+            controlSurfaceTriggerClass,
             "w-full justify-start",
             // Reserve trailing room for the single clear-or-chevron overlay rendered below.
             "ui-control-trigger-affixed",
-            !displayLabel && "text-muted-foreground"
+            !hasValue && "text-muted-foreground"
           ),
-          children: /* @__PURE__ */ jsx("span", { className: "truncate", children: displayLabel ?? resolvedPlaceholder })
+          children: /* @__PURE__ */ jsx("span", { className: "truncate", children: hasValue ? displayLabel : resolvedPlaceholder })
         }
       ) }),
+      resolvedName ? (multiple ? multiValue : singleValue.length ? [singleValue] : []).map((path, index) => /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "hidden",
+          name: resolvedName,
+          value: path.join("/"),
+          readOnly: true
+        },
+        `${pathKey(path)}-${index}`
+      )) : null,
       /* @__PURE__ */ jsxs(PopoverContent, { id: panelId, className: "ui-cascader-popover", align: "start", children: [
         showSearch && /* @__PURE__ */ jsx(Command, { shouldFilter: false, children: /* @__PURE__ */ jsx(
           CommandInput,
@@ -273,7 +430,7 @@ function Cascader({
             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 }) => {
+            children: searchResults.length === 0 ? /* @__PURE__ */ jsx("p", { className: "ui-cascader-empty", children: notFoundContent ?? t("dataEntry.cascader.empty") }) : searchResults.map(({ path, labels }) => {
               const label = labels.join(" / ");
               const selected = multiple ? pathInValues(path, multiValue) : pathsEqual(path, singleValue);
               return /* @__PURE__ */ jsxs(
@@ -307,14 +464,21 @@ function Cascader({
         ) }) : renderCascadeColumns()
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "ui-control-affix ui-cascader-affix", children: showClear ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "ui-control-affix ui-cascader-affix", children: loading ? /* @__PURE__ */ jsx(
+      Loader2,
+      {
+        "data-slot": "cascader-loading",
+        className: "ui-control-affix-icon ui-control-affix-indicator animate-spin",
+        "aria-hidden": "true"
+      }
+    ) : showClear ? /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        "aria-label": t("dataEntry.cascader.clear"),
+        "aria-label": clearControl.label,
         className: "ui-control-affix-action",
         onClick: clearValue,
-        children: /* @__PURE__ */ jsx(X, { className: "ui-control-affix-icon", "aria-hidden": "true" })
+        children: clearControl.clearIcon ?? /* @__PURE__ */ jsx(X, { className: "ui-control-affix-icon", "aria-hidden": "true" })
       }
     ) : /* @__PURE__ */ jsx(
       ChevronsUpDown,

package/dist/components/data-entry/color-picker.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { ColorPickerProp } from "../../props/components/data-entry.prop.js";
 export type { ColorPickerProp, ColorPickerProp as ColorPickerProps, } from "../../props/components/data-entry.prop.js";
-export declare function ColorPicker({ value, onValueChange, disabled, className, id, showHexInput, ...ariaProps }: ColorPickerProp): React.JSX.Element;
+export declare function ColorPicker({ value: valueProp, defaultValue, onValueChange, disabled, name, className, id, showHexInput, ...ariaProps }: ColorPickerProp): React.JSX.Element;