@godxjp/ui 20.0.0 → 20.2.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,24 +29,26 @@ 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 }),
+            /* @__PURE__ */ jsxs("div", { "data-slot": "service-launcher-identity", 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 })
+            ] }),
             statusLabel != null ? /* @__PURE__ */ jsx(Badge, { tone: statusTone, "data-slot": "service-launcher-status", children: statusLabel }) : null
           ] }),
           description != null ? /* @__PURE__ */ jsx("div", { "data-slot": "service-launcher-description", children: description }) : null,
           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 +56,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 +70,7 @@ function ServiceLauncherCardSkeleton({
   label,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Card,
     {
       density: "tight",
@@ -76,7 +78,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 +88,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
@@ -18,6 +18,36 @@ export type TableProps = React.HTMLAttributes<HTMLTableElement> & {
      * table exactly as it is.
      */
     preset?: TablePresetProp;
+    /**
+     * PER-INSTANCE column measures for `preset="action-collection"`, in place of re-pointing its
+     * `--table-action-collection-*` knobs from a consumer stylesheet.
+     *
+     * Those knobs are global by design, and that is exactly the problem: two collections on the same
+     * screen do not share a column budget. A console that widened `actions` globally so a Japanese
+     * status badge would stop breaking to one character per line — an SC 1.4.10 reflow failure —
+     * collapsed a sibling table's name column to ~15px in the same change. The only way out was a
+     * scoped class in consumer CSS, and the comment that shipped with it said so: "until the package
+     * can express a per-table measure, the retune stays on the collection needing it".
+     *
+     * Emitted as inline custom properties, the same contract `Flex width` uses for a call-site
+     * measurement: the value is a raw length the design system cannot know, so it rides in `style`
+     * and leaves `data-column-widths` on the DOM so each one stays countable.
+     */
+    columnWidths?: {
+        /** `--table-action-collection-actions-width` — the row-action column above the collapse step. */
+        actions?: string;
+        /** `--table-action-collection-actions-width-compact` — the same column below it. */
+        actionsCompact?: string;
+        /** `--table-action-collection-meta-width-compact` — a `meta`-priority column below the step. */
+        metaCompact?: string;
+        /**
+         * `--table-action-collection-min-inline-size-compact` — the legibility FLOOR the compact tier
+         * keeps before the wrapper scrolls. The preset sizes its compact tier for one column per
+         * priority; a collection carrying several of the same priority needs a wider floor or its
+         * free-text column is squeezed toward zero.
+         */
+        minInlineSizeCompact?: string;
+    };
     /** Defaults to `"sm"` (40rem). Ignored while `preset` is `"default"`. */
     collapseBelow?: BreakpointProp;
 };
@@ -39,6 +69,36 @@ export declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes
      * table exactly as it is.
      */
     preset?: TablePresetProp;
+    /**
+     * PER-INSTANCE column measures for `preset="action-collection"`, in place of re-pointing its
+     * `--table-action-collection-*` knobs from a consumer stylesheet.
+     *
+     * Those knobs are global by design, and that is exactly the problem: two collections on the same
+     * screen do not share a column budget. A console that widened `actions` globally so a Japanese
+     * status badge would stop breaking to one character per line — an SC 1.4.10 reflow failure —
+     * collapsed a sibling table's name column to ~15px in the same change. The only way out was a
+     * scoped class in consumer CSS, and the comment that shipped with it said so: "until the package
+     * can express a per-table measure, the retune stays on the collection needing it".
+     *
+     * Emitted as inline custom properties, the same contract `Flex width` uses for a call-site
+     * measurement: the value is a raw length the design system cannot know, so it rides in `style`
+     * and leaves `data-column-widths` on the DOM so each one stays countable.
+     */
+    columnWidths?: {
+        /** `--table-action-collection-actions-width` — the row-action column above the collapse step. */
+        actions?: string;
+        /** `--table-action-collection-actions-width-compact` — the same column below it. */
+        actionsCompact?: string;
+        /** `--table-action-collection-meta-width-compact` — a `meta`-priority column below the step. */
+        metaCompact?: string;
+        /**
+         * `--table-action-collection-min-inline-size-compact` — the legibility FLOOR the compact tier
+         * keeps before the wrapper scrolls. The preset sizes its compact tier for one column per
+         * priority; a collection carrying several of the same priority needs a wider floor or its
+         * free-text column is squeezed toward zero.
+         */
+        minInlineSizeCompact?: string;
+    };
     /** Defaults to `"sm"` (40rem). Ignored while `preset` is `"default"`. */
     collapseBelow?: BreakpointProp;
 } & React.RefAttributes<HTMLTableElement>>;
@@ -53,6 +113,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 +129,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 +147,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

@@ -9,6 +9,7 @@ const Table = React.forwardRef(
     bordered = false,
     preset = "default",
     collapseBelow = "sm",
+    columnWidths,
     ...props
   }, ref) => (
     // A table wider than its container scrolls horizontally in this wrapper; keep it
@@ -27,6 +28,13 @@ const Table = React.forwardRef(
         ),
         "data-preset": preset === "default" ? void 0 : preset,
         "data-collapse-below": preset === "default" ? void 0 : collapseBelow,
+        "data-column-widths": columnWidths ? "" : void 0,
+        style: columnWidths ? {
+          "--table-action-collection-actions-width": columnWidths.actions,
+          "--table-action-collection-actions-width-compact": columnWidths.actionsCompact,
+          "--table-action-collection-meta-width-compact": columnWidths.metaCompact,
+          "--table-action-collection-min-inline-size-compact": columnWidths.minInlineSizeCompact
+        } : void 0,
         ...scrollable ? { tabIndex: 0 } : {},
         children: /* @__PURE__ */ jsx(
           "table",
@@ -65,34 +73,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, locale: localeProp, ...props }: CalendarProp): React.JSX.Element;

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

@@ -2,8 +2,8 @@
 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 { useTranslation } from "../../i18n/use-translation.js";
+import { DayButton, DayPicker, dateMatchModifiers } from "react-day-picker";
+import { usePickerLocales, useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { controlIconSmClass } from "../../lib/control-styles.js";
 import { Button, buttonVariants } from "../general/button.js";
@@ -23,11 +23,14 @@ function Calendar({
   footer,
   width = "auto",
   bordered = false,
+  cellRender,
   month: monthProp,
   onMonthChange,
+  locale: localeProp,
   ...props
 }) {
   const { t } = useTranslation();
+  const { dayPickerLocale } = usePickerLocales(localeProp);
   const [month, setMonth] = React.useState(monthProp ?? props.defaultMonth);
   const today = startOfDay(props.today ?? /* @__PURE__ */ new Date());
   const todayDisabled = props.startMonth != null && today < startOfMonth(props.startMonth) || props.endMonth != null && today > endOfMonth(props.endMonth) || props.disabled != null && dateMatchModifiers(today, props.disabled);
@@ -67,6 +70,7 @@ function Calendar({
   return /* @__PURE__ */ jsx(
     DayPicker,
     {
+      locale: dayPickerLocale,
       showOutsideDays,
       "aria-label": ariaLabel,
       month: showToday ? monthProp ?? month : monthProp,
@@ -77,7 +81,13 @@ function Calendar({
       footer: footer ?? actions,
       labels: {
         ...labels,
-        labelNav: labels?.labelNav ?? (() => `${ariaLabel ?? "Calendar"} navigation`)
+        /*
+         * LOCALIZED, like every other string this component renders. It was an English literal
+         * built by template — so a Japanese calendar announced its own month controls as "Calendar
+         * navigation" while the two buttons INSIDE that container said 前の月へ and 次の月へ. Nothing
+         * failed and nothing warned; the only reader affected was the one using a screen reader.
+         */
+        labelNav: labels?.labelNav ?? (() => t("dataEntry.calendar.nav", { label: ariaLabel ?? t("dataEntry.calendar.name") }))
       },
       className: cn("ui-calendar", className),
       "data-width": width === "full" ? "full" : void 0,
@@ -169,6 +179,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;