@godxjp/ui 18.15.4 → 19.1.0

package/dist/app/app-provider.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type AppDateFormat, type AppLocale, type AppTimeFormat, type AppTimezone } from "./types.js";
 import type { AppContextValue, AppProviderProp } from "../props/components/app.prop.js";
 export type { AppProviderProp, AppContextValue } from "../props/components/app.prop.js";
-export declare function AppProvider({ children, defaultLocale, fallbackLocale, defaultTimezone, systemTimezone, defaultTimeFormat, defaultDateFormat, timezoneOptions, storageKey, persist, theme: initialTheme, brand: initialBrand, density: initialDensity, fontSize: initialFontSize, scaling: initialScaling, onLocaleChange, onTimezoneChange, onTimeFormatChange, onDateFormatChange, onThemeChange, onBrandChange, onDensityChange, onFontSizeChange, onScalingChange, }: AppProviderProp): React.JSX.Element;
+export declare function AppProvider({ children, defaultLocale, fallbackLocale, defaultTimezone, systemTimezone, defaultTimeFormat, defaultDateFormat, timezoneOptions, storageKey, persist, theme: initialTheme, brand: initialBrand, density: initialDensity, fontSize: initialFontSize, scaling: initialScaling, emitFieldNames, onLocaleChange, onTimezoneChange, onTimeFormatChange, onDateFormatChange, onThemeChange, onBrandChange, onDensityChange, onFontSizeChange, onScalingChange, }: AppProviderProp): React.JSX.Element;
 export declare function useAppContext(): AppContextValue;
 /** Returns null outside AppProvider — used by pickers for optional context. */
 export declare function useOptionalAppContext(): AppContextValue | null;

package/dist/app/app-provider.js

@@ -65,6 +65,7 @@ function AppProvider({
   density: initialDensity = "default",
   fontSize: initialFontSize = "default",
   scaling: initialScaling = null,
+  emitFieldNames = false,
   onLocaleChange,
   onTimezoneChange,
   onTimeFormatChange,
@@ -299,6 +300,7 @@ function AppProvider({
       density,
       fontSize,
       scaling,
+      emitFieldNames,
       setLocale,
       setTimezone,
       setTimeFormat,
@@ -323,6 +325,7 @@ function AppProvider({
       density,
       fontSize,
       scaling,
+      emitFieldNames,
       setLocale,
       setTimezone,
       setTimeFormat,

package/dist/app/date-format-labels.d.ts

@@ -1,7 +1,7 @@
 import type { AppLocale } from "./types.js";
 import type { AppDateFormat } from "./date-formats.js";
 export declare const APP_DATE_FORMAT_OPTIONS: {
-    value: "iso" | "dmy" | "mdy";
+    value: "dmy" | "iso" | "mdy";
 }[];
 export declare function getDateFormatLabel(dateFormat: AppDateFormat, locale: AppLocale, fallbackLocale?: AppLocale): string;
 /** Suggested default per locale — vi → dmy, ja → iso, en → mdy. */

package/dist/app/time-format-labels.d.ts

@@ -1,7 +1,7 @@
 import type { AppLocale } from "./types.js";
 import type { AppTimeFormat } from "./time-formats.js";
 export declare const APP_TIME_FORMAT_OPTIONS: {
-    value: "24h" | "12h";
+    value: "12h" | "24h";
 }[];
 export declare function getTimeFormatLabel(timeFormat: AppTimeFormat, locale: AppLocale, fallbackLocale?: AppLocale): string;
 /** Suggested default per locale — vi/ja → 24h, en → 12h. */

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

@@ -16,7 +16,7 @@ export type BadgeTone = ToneProp | "primary";
  * old `text-xs` rendering exactly.
  */
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "outline" | "dashed" | "secondary" | null | undefined;
+    variant?: "dashed" | "default" | "outline" | "secondary" | null | undefined;
     shape?: "default" | "pill" | "sharp" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, Omit<VariantProps<typeof badgeVariants>, "variant" | "shape"> {

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

@@ -1,8 +1,6 @@
 import * as React from "react";
-import { type VariantProps } from "class-variance-authority";
 import type { LucideIcon } from "lucide-react";
 import type { HeadingLevelProp } from "../../props/vocabulary/index.js";
-type CardSize = "md" | "compact";
 /** Semantic accent tone. `accentPlacement` decides WHERE it is drawn — a leading-edge
  *  stripe (default) or the full perimeter. */
 type CardAccent = "primary" | "success" | "warning" | "info" | "attention" | "destructive";
@@ -22,11 +20,7 @@ type CardAccentPlacement = "edge" | "perimeter";
 type CardVariant = "default" | "muted" | "outline" | "featured";
 /** Padding density — base 16px · tight 12px · cozy 20px. */
 type CardDensity = "tight" | "cozy";
-declare const cardVariants: (props?: ({
-    size?: "compact" | "md" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export type CardProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants> & {
-    size?: CardSize;
+export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
     accent?: CardAccent;
     /**
      * Where `accent` is drawn — `"edge"` (default, the leading-edge stripe) or `"perimeter"`
@@ -36,10 +30,7 @@ export type CardProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<type
     variant?: CardVariant;
     density?: CardDensity;
 };
-export declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    size?: "compact" | "md" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
-    size?: CardSize;
+export declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     accent?: CardAccent;
     /**
      * Where `accent` is drawn — `"edge"` (default, the leading-edge stripe) or `"perimeter"`
@@ -141,7 +132,7 @@ export declare const CardBar: React.ForwardRefExoticComponent<React.HTMLAttribut
     /** Right-aligned actions slot (settings/save), Ant `tabBarExtraContent`-style. */
     extra?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
-export type StatCardProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants> & {
+export type StatCardProps = React.HTMLAttributes<HTMLDivElement> & {
     label: React.ReactNode;
     value: React.ReactNode;
     hint?: React.ReactNode;
@@ -162,7 +153,7 @@ export type StatCardProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<
     accentPlacement?: CardAccentPlacement;
 };
 /** KPI / stat tile — token-driven layout aligned to dashboard KPI cards. */
-export declare function StatCard({ label, value, hint, icon: Icon, delta, layout, align, inverse, accent, accentPlacement, className, size, ...props }: StatCardProps): React.JSX.Element;
+export declare function StatCard({ label, value, hint, icon: Icon, delta, layout, align, inverse, accent, accentPlacement, className, ...props }: StatCardProps): React.JSX.Element;
 /** Header actions slot — pair with `CardHeader className="flex flex-row …"`. */
 export declare const CardAction: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -1,24 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils.js";
-const cardVariants = cva("group/card", {
-  variants: {
-    size: {
-      md: "",
-      compact: ""
-    }
-  },
-  defaultVariants: { size: "md" }
-});
 const Card = React.forwardRef(
-  ({ className, size = "md", accent, accentPlacement, variant, density, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ className, accent, accentPlacement, variant, density, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
       ref,
-      className: cn(cardVariants({ size }), className),
+      className: cn("group/card", className),
       "data-slot": "card",
-      "data-size": size === "compact" ? "compact" : void 0,
       "data-accent": accent,
       "data-accent-placement": accentPlacement === "perimeter" ? "perimeter" : void 0,
       "data-variant": variant && variant !== "default" ? variant : void 0,
@@ -111,14 +100,12 @@ function StatCard({
   accent,
   accentPlacement,
   className,
-  size = "compact",
   ...props
 }) {
   const deltaTone = getDeltaTone(delta, inverse);
   return /* @__PURE__ */ jsxs(
     Card,
     {
-      size: size ?? "compact",
       accent,
       accentPlacement,
       className: cn("ui-stat-card", className),

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { flexRender, type OnChangeFn, type PaginationState, type RowData, type VisibilityState } from "@tanstack/react-table";
+import { flexRender, type ColumnVisibilityState, type OnChangeFn, type PaginationState } from "@tanstack/react-table";
 import type { BreakpointProp, ColumnDefProp, DensityProp, SortStateProp, TablePresetProp } from "../../props/vocabulary/index.js";
 export type Density = DensityProp;
 /**
@@ -9,11 +9,6 @@ export type Density = DensityProp;
  * lists the column in DataTable.ViewOptions. Adapted to a TanStack column internally.
  */
 export type ColumnDef<T> = ColumnDefProp<T>;
-declare module "@tanstack/react-table" {
-    interface ColumnMeta<TData extends RowData, TValue> {
-        lean?: ColumnDef<TData>;
-    }
-}
 interface DataTableProps<T> {
     data: T[];
     columns: ColumnDef<T>[];
@@ -37,8 +32,8 @@ interface DataTableProps<T> {
     /** Total server row count (manual pagination) — drives the page count. */
     rowCount?: number;
     /** Column show/hide state, surfaced by DataTable.ViewOptions. */
-    columnVisibility?: VisibilityState;
-    onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
+    columnVisibility?: ColumnVisibilityState;
+    onColumnVisibilityChange?: OnChangeFn<ColumnVisibilityState>;
     /**
      * Manual (server) flags. Default `false` so the simple `data`+`columns` case
      * sorts / filters in-browser with no extra wiring. Client pagination slices

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

@@ -2,12 +2,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import {
+  columnFilteringFeature,
+  columnVisibilityFeature,
+  createCoreRowModel,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable
+  globalFilteringFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  tableFeatures,
+  useTable
 } from "@tanstack/react-table";
 import {
   AlertCircle,
@@ -59,6 +66,21 @@ import {
   tableCellPaddingClass,
   tableRowHeightClass
 } from "../../lib/control-styles.js";
+function dataTableFeatures() {
+  return tableFeatures({
+    rowSortingFeature,
+    columnFilteringFeature,
+    globalFilteringFeature,
+    rowPaginationFeature,
+    rowSelectionFeature,
+    columnVisibilityFeature,
+    coreRowModel: createCoreRowModel(),
+    filteredRowModel: createFilteredRowModel(),
+    sortedRowModel: createSortedRowModel(),
+    paginatedRowModel: createPaginatedRowModel(),
+    columnMeta: {}
+  });
+}
 function toTanstackColumns(columns) {
   return columns.map((col) => ({
     id: col.key,
@@ -182,17 +204,18 @@ function DataTable({
     (c) => React.isValidElement(c) && c.type.displayName === "DataTable.Pagination" && typeof c.props.onChange !== "function"
   );
   const paginationEngaged = manualPagination || controlledPagination !== void 0 || onPaginationChange !== void 0 || hasNumberedPager;
-  const table = useReactTable({
+  const features = React.useMemo(() => dataTableFeatures(), []);
+  const table = useTable({
+    features,
     data,
     columns: tanstackColumns,
     getRowId,
-    getCoreRowModel: getCoreRowModel(),
-    ...manualSorting ? {} : { getSortedRowModel: getSortedRowModel() },
-    ...manualFiltering ? {} : { getFilteredRowModel: getFilteredRowModel() },
-    ...manualPagination || !paginationEngaged ? {} : { getPaginationRowModel: getPaginationRowModel() },
     manualSorting,
     manualFiltering,
-    manualPagination,
+    // v8 disengaged pagination by withholding the row model; v9 has one static feature set, so
+    // "no pager on this table" is expressed the same way as "the server paginates" — leave the
+    // rows unsliced. Page count still derives from `rowCount`/the pre-paginated model either way.
+    manualPagination: manualPagination || !paginationEngaged,
     rowCount,
     enableRowSelection: selectable,
     state: {
@@ -261,7 +284,7 @@ DataTable.Search = function DataTableSearch({
 }) {
   const { table } = useDataTableContext();
   const { t } = useTranslation();
-  const value = table.getState().globalFilter ?? "";
+  const value = table.state.globalFilter ?? "";
   return /* @__PURE__ */ jsx(
     SearchInput,
     {
@@ -285,7 +308,7 @@ DataTable.ViewOptions = function DataTableViewOptions({
   if (hideable.length === 0) return null;
   return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className, children: [
-      /* @__PURE__ */ jsx(SlidersHorizontal, { className: "size-4 shrink-0", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx(SlidersHorizontal, { className: "ui-data-table-toolbar-icon", "aria-hidden": "true" }),
       label ?? t("dataGrid.view")
     ] }) }),
     /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
@@ -389,7 +412,7 @@ DataTable.DensityToggle = function DataTableDensityToggle() {
       },
       "aria-label": t("dataTable.densitySwitch", { density: nextLabel }),
       children: /* @__PURE__ */ jsxs(Flex, { direction: "row", wrap: true, align: "center", gap: "xs", children: [
-        /* @__PURE__ */ jsx(Icon, { className: "size-4", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(Icon, { className: "ui-data-table-toolbar-icon", "aria-hidden": "true" }),
         density === "compact" ? t("dataTable.densityCompact") : t("dataTable.densityComfortable")
       ] })
     }
@@ -453,7 +476,7 @@ DataTable.Content = function DataTableContent() {
       observer.disconnect();
     };
   }, []);
-  const activeSort = sort ?? sortingStateToSort(table.getState().sorting);
+  const activeSort = sort ?? sortingStateToSort(table.state.sorting);
   const isControlledSort = sort !== void 0 || !!onSortChange;
   const onHeaderClick = (col) => {
     if (!col.sortable) return;
@@ -490,64 +513,78 @@ DataTable.Content = function DataTableContent() {
           "data-striped": striped ? "" : void 0,
           "data-hoverable": hoverable ? "" : void 0,
           children: /* @__PURE__ */ jsxs(Table, { scrollable: preset !== "default", preset, collapseBelow, children: [
-            /* @__PURE__ */ jsx(TableHeader, { className: cn("bg-secondary", stickyHeader && "sticky top-0 z-10"), children: /* @__PURE__ */ jsxs(TableRow, { children: [
-              selectable && /* @__PURE__ */ jsx(TableHead, { className: "w-10", children: /* @__PURE__ */ jsx(DataTable.SelectAll, {}) }),
-              visibleColumns.map((col) => {
-                const isSortable = !!col.sortable;
-                const isActiveSort = isSortable && activeSort?.key === col.key;
-                const sortIndicator = isSortable ? isActiveSort ? activeSort?.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "text-muted-foreground size-3", "aria-hidden": "true" }) : null;
-                const headerEmpty = isEmptyHeader(col.header);
-                const headerContent = headerEmpty && col.ariaLabel ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: col.ariaLabel }) : col.header;
-                const label = /* @__PURE__ */ jsxs("span", { className: "ui-data-table-sort-label", children: [
-                  headerContent,
-                  sortIndicator
-                ] });
-                return /* @__PURE__ */ jsx(
-                  TableHead,
-                  {
-                    priority: col.priority,
-                    "data-empty": headerEmpty || void 0,
-                    "aria-sort": isSortable ? isActiveSort ? activeSort?.direction === "asc" ? "ascending" : "descending" : "none" : void 0,
-                    style: columnWidth(col.width).style,
-                    className: cn(
-                      columnWidth(col.width).className,
-                      // `headerAlign` when the heading differs from the rows,
-                      // `align` otherwise. A table wanting centred headings
-                      // over start-aligned text could not say so before, and
-                      // consumers reached for `[&_th_button]:justify-center`.
-                      (col.headerAlign ?? col.align) === "right" && "text-end",
-                      (col.headerAlign ?? col.align) === "center" && "text-center",
-                      col.hiddenOnMobile && "hidden md:table-cell",
-                      isSortable && "select-none",
-                      col.pin === "end" && "ui-data-table-pin-end"
-                    ),
-                    children: isSortable ? /* @__PURE__ */ jsx(
-                      "button",
+            /* @__PURE__ */ jsx(
+              TableHeader,
+              {
+                className: cn("bg-secondary", stickyHeader && "ui-data-table-sticky-header"),
+                children: /* @__PURE__ */ jsxs(TableRow, { children: [
+                  selectable && /* @__PURE__ */ jsx(TableHead, { className: "ui-data-table-select-column", children: /* @__PURE__ */ jsx(DataTable.SelectAll, {}) }),
+                  visibleColumns.map((col) => {
+                    const isSortable = !!col.sortable;
+                    const isActiveSort = isSortable && activeSort?.key === col.key;
+                    const sortIndicator = isSortable ? isActiveSort ? activeSort?.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "ui-data-table-sort-icon", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "ui-data-table-sort-icon", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(
+                      ChevronsUpDown,
                       {
-                        type: "button",
-                        className: "ui-data-table-sort-button focus-visible:ring-ring rounded-sm focus-visible:ring-2",
-                        onClick: () => {
-                          onHeaderClick(col);
-                        },
-                        children: label
+                        className: "ui-data-table-sort-icon text-muted-foreground",
+                        "aria-hidden": "true"
                       }
-                    ) : label
-                  },
-                  col.key
-                );
-              })
-            ] }) }),
+                    ) : null;
+                    const headerEmpty = isEmptyHeader(col.header);
+                    const headerContent = headerEmpty && col.ariaLabel ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: col.ariaLabel }) : col.header;
+                    const label = /* @__PURE__ */ jsxs("span", { className: "ui-data-table-sort-label", children: [
+                      headerContent,
+                      sortIndicator
+                    ] });
+                    return /* @__PURE__ */ jsx(
+                      TableHead,
+                      {
+                        priority: col.priority,
+                        "data-empty": headerEmpty || void 0,
+                        "data-align": col.headerAlign ?? col.align,
+                        "aria-sort": isSortable ? isActiveSort ? activeSort?.direction === "asc" ? "ascending" : "descending" : "none" : void 0,
+                        style: columnWidth(col.width).style,
+                        className: cn(
+                          columnWidth(col.width).className,
+                          // `headerAlign` when the heading differs from the rows,
+                          // `align` otherwise. A table wanting centred headings
+                          // over start-aligned text could not say so before, and
+                          // consumers reached for `[&_th_button]:justify-center`.
+                          (col.headerAlign ?? col.align) === "right" && "text-end",
+                          (col.headerAlign ?? col.align) === "center" && "text-center",
+                          col.hiddenOnMobile && "hidden md:table-cell",
+                          isSortable && "select-none",
+                          col.pin === "end" && "ui-data-table-pin-end"
+                        ),
+                        children: isSortable ? /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: "ui-data-table-sort-button ui-focus-ring",
+                            onClick: () => {
+                              onHeaderClick(col);
+                            },
+                            children: label
+                          }
+                        ) : label
+                      },
+                      col.key
+                    );
+                  })
+                ] })
+              }
+            ),
             /* @__PURE__ */ jsx(TableBody, { children: loading ? (
               // Shaped skeleton rows rendered INSIDE the real table grid so they
               // share its borders + column widths — no second framed container
               // (which double-borders when the table sits in a Card). Count is
               // bounded to the previous page so the height barely shifts.
               Array.from({ length: Math.min(Math.max(rowCount, 6), 10) }).map((_, i) => /* @__PURE__ */ jsxs(TableRow, { className: cn(rowPadding, "hover:bg-transparent"), children: [
-                selectable && /* @__PURE__ */ jsx(TableCell, { className: cellPadding, children: /* @__PURE__ */ jsx("div", { className: "ui-skeleton-block size-4 rounded-sm" }) }),
+                selectable && /* @__PURE__ */ jsx(TableCell, { className: cellPadding, children: /* @__PURE__ */ jsx("div", { className: "ui-skeleton-block ui-data-table-skeleton-check" }) }),
                 visibleColumns.map((col, j) => /* @__PURE__ */ jsx(
                   TableCell,
                   {
                     priority: col.priority,
+                    "data-align": col.align,
                     style: columnWidth(col.width).style,
                     className: cn(
                       cellPadding,
@@ -561,7 +598,7 @@ DataTable.Content = function DataTableContent() {
                       "div",
                       {
                         className: cn(
-                          "ui-skeleton-block h-4",
+                          "ui-skeleton-block ui-data-table-skeleton-line",
                           j === 0 ? "w-1/2" : "w-3/4",
                           col.align === "right" && "ms-auto",
                           col.align === "center" && "mx-auto"
@@ -671,6 +708,7 @@ DataTable.Content = function DataTableContent() {
                       TableCell,
                       {
                         priority: col.priority,
+                        "data-align": col.align,
                         style: columnWidth(col.width).style,
                         className: cn(
                           cellPadding,
@@ -742,7 +780,7 @@ function NumberedPagination({
 }) {
   const { table } = useDataTableContext();
   const { t } = useTranslation();
-  const { pageIndex, pageSize } = table.getState().pagination;
+  const { pageIndex, pageSize } = table.state.pagination;
   const pageCount = table.getPageCount();
   return /* @__PURE__ */ jsxs(
     Flex,
@@ -755,7 +793,7 @@ function NumberedPagination({
       className: cn("ui-data-table-pagination ui-data-table-pagination--numbered", className),
       children: [
         /* @__PURE__ */ jsxs(Flex, { direction: "row", align: "center", gap: "sm", className: "ui-data-table-page-size", children: [
-          /* @__PURE__ */ jsx("span", { className: "ui-data-table-page-size-label text-muted-foreground text-sm", children: t("dataGrid.rowsPerPage") }),
+          /* @__PURE__ */ jsx("span", { className: "ui-data-table-page-size-label ui-data-table-pagination-text", children: t("dataGrid.rowsPerPage") }),
           /* @__PURE__ */ jsxs(
             Select,
             {
@@ -777,7 +815,7 @@ function NumberedPagination({
           )
         ] }),
         /* @__PURE__ */ jsxs(Flex, { direction: "row", align: "center", gap: "sm", className: "ui-data-table-page-nav", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm tabular-nums", children: t("dataGrid.pageOf", { page: pageIndex + 1, total: Math.max(1, pageCount) }) }),
+          /* @__PURE__ */ jsx("span", { className: "ui-data-table-pagination-text tabular-nums", children: t("dataGrid.pageOf", { page: pageIndex + 1, total: Math.max(1, pageCount) }) }),
           /* @__PURE__ */ jsx(
             Button,
             {
@@ -786,7 +824,7 @@ function NumberedPagination({
               disabled: !table.getCanPreviousPage(),
               onClick: () => table.previousPage(),
               "aria-label": t("common.previous") ?? "Previous",
-              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": "true" })
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "ui-data-table-pagination-icon", "aria-hidden": "true" })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -797,7 +835,7 @@ function NumberedPagination({
               disabled: !table.getCanNextPage(),
               onClick: () => table.nextPage(),
               "aria-label": t("common.next") ?? "Next",
-              children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" })
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "ui-data-table-pagination-icon", "aria-hidden": "true" })
             }
           )
         ] })
@@ -815,7 +853,7 @@ DataTable.RowActions = function DataTableRowActions({ ariaLabel, children }) {
       "aria-label": ariaLabel ?? t("dataTable.rowActions"),
       className: controlIconSmClass,
       children: [
-        /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(MoreHorizontal, { className: "ui-data-table-toolbar-icon", "aria-hidden": "true" }),
         children
       ]
     }

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

@@ -15,7 +15,19 @@ function Descriptions({
 }) {
   const colsClass = columns === 1 ? "grid-cols-1" : columns === 3 ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3" : "grid-cols-1 sm:grid-cols-2";
   const context = React.useMemo(() => ({ layout, labelAlign }), [layout, labelAlign]);
-  return /* @__PURE__ */ jsx(DescriptionsLayoutContext.Provider, { value: context, children: /* @__PURE__ */ jsx("dl", { className: cn("grid gap-x-6 gap-y-[var(--descriptions-row-gap)]", colsClass, className), children }) });
+  return /* @__PURE__ */ jsx(DescriptionsLayoutContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    "dl",
+    {
+      "data-slot": "descriptions",
+      "data-columns": columns,
+      className: cn(
+        "grid gap-x-[var(--descriptions-column-gap)] gap-y-[var(--descriptions-row-gap)]",
+        colsClass,
+        className
+      ),
+      children
+    }
+  ) });
 }
 Descriptions.Item = function DescriptionsItem({
   label,
@@ -26,14 +38,18 @@ Descriptions.Item = function DescriptionsItem({
 }) {
   const { layout, labelAlign } = React.useContext(DescriptionsLayoutContext);
   const spanClass = span === 2 ? "sm:col-span-2" : span === 3 ? "sm:col-span-2 lg:col-span-3" : "";
+  const endAlignedLabel = layout === "horizontal" && labelAlign === "end";
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      "data-slot": "descriptions-item",
       className: cn(
         layout === "horizontal" ? (
           // Label beside value — a token-aligned label column so the values line up. The
-          // `--descriptions-label-width` knob aligns labels (rule #44/#45).
-          "grid grid-cols-[var(--descriptions-label-width)_minmax(0,1fr)] items-baseline gap-x-3"
+          // `--descriptions-label-width` / `--descriptions-label-gap` knobs align labels and set
+          // the label→value gap (rule #44/#45); a service that narrows the column usually wants
+          // to close the gap in the same step.
+          "grid grid-cols-[var(--descriptions-label-width)_minmax(0,1fr)] items-baseline gap-x-[var(--descriptions-label-gap)]"
         ) : (
           // Vertical (default): label over value. The shared --field-label-gap matches
           // FormField / Form so the label→value gap is consistent everywhere.
@@ -46,16 +62,29 @@ Descriptions.Item = function DescriptionsItem({
         /* @__PURE__ */ jsx(
           "dt",
           {
+            "data-slot": "descriptions-label",
+            "data-label-align": endAlignedLabel ? "end" : void 0,
             className: cn(
               "text-muted-foreground text-xs",
               // `end`-align only ever applies in horizontal layout — same guard `Form` uses, so a
               // vertical label (already above its value) never mistakenly end-aligns (gh#294).
-              layout === "horizontal" && labelAlign === "end" && "text-end"
+              endAlignedLabel && "text-end"
             ),
             children: label
           }
         ),
-        /* @__PURE__ */ jsx("dd", { className: cn("text-sm break-all", mono && "font-mono"), children })
+        /* @__PURE__ */ jsx(
+          "dd",
+          {
+            "data-slot": "descriptions-value",
+            "data-mono": mono ? "" : void 0,
+            className: cn(
+              "text-[length:var(--descriptions-value-font-size)] leading-[var(--descriptions-value-line-height)] break-all",
+              mono && "font-mono"
+            ),
+            children
+          }
+        )
       ]
     }
   );

package/dist/components/data-display/empty-state.js

@@ -22,7 +22,7 @@ function EmptyState({
       role: "status",
       className: cn("ui-empty-state", className),
       children: [
-        Icon && variant !== "compact" && /* @__PURE__ */ jsx("div", { className: "ui-empty-state-icon", children: /* @__PURE__ */ jsx(Icon, { className: "size-6", "aria-hidden": "true" }) }),
+        Icon && variant !== "compact" && /* @__PURE__ */ jsx("div", { className: "ui-empty-state-icon", children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }) }),
         createElement(TitleTag, { className: "ui-empty-state-title" }, title),
         description && /* @__PURE__ */ jsx("p", { className: "ui-empty-state-description", children: description }),
         action && /* @__PURE__ */ jsx("div", { children: action })

package/dist/components/data-display/permission-matrix.js

@@ -25,7 +25,7 @@ function toGrantSet(grants) {
     )
   );
 }
-const PIN_START = "sticky start-0 z-20 bg-inherit border-e border-border";
+const PIN_START = "ui-permission-matrix-pin";
 const PermissionMatrix = React.forwardRef(
   function PermissionMatrix2({
     roles,
@@ -133,9 +133,9 @@ const PermissionMatrix = React.forwardRef(
         "data-slot": "permission-matrix",
         "data-editable": editable || void 0,
         className: cn("ui-permission-matrix overflow-x-auto", className),
-        children: /* @__PURE__ */ jsxs(Table, { className: "min-w-[48rem]", "aria-label": accessibleName, children: [
+        children: /* @__PURE__ */ jsxs(Table, { className: "ui-permission-matrix-table", "aria-label": accessibleName, children: [
           /* @__PURE__ */ jsx(TableHeader, { className: "bg-secondary [&_tr]:bg-secondary", children: /* @__PURE__ */ jsxs(TableRow, { className: "bg-secondary hover:bg-secondary", children: [
-            /* @__PURE__ */ jsx(TableHead, { className: cn(PIN_START, "w-64 min-w-64"), children: t("dataDisplay.permissionMatrix.permissionColumn") }),
+            /* @__PURE__ */ jsx(TableHead, { className: PIN_START, children: t("dataDisplay.permissionMatrix.permissionColumn") }),
             roles.map((role) => {
               const isCompared = compared.has(role.id);
               return /* @__PURE__ */ jsx(
@@ -143,7 +143,7 @@ const PermissionMatrix = React.forwardRef(
                 {
                   className: cn("text-center", isCompared && "bg-primary/[0.06]"),
                   children: /* @__PURE__ */ jsxs("span", { className: "inline-flex flex-col items-center leading-tight", children: [
-                    /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "ui-permission-matrix-role", children: [
                       /* @__PURE__ */ jsx(Text, { weight: "medium", children: role.name }),
                       role.locked && /* @__PURE__ */ jsxs(Badge, { tone: "default", variant: "outline", children: [
                         /* @__PURE__ */ jsx(Lock, { "aria-hidden": "true" }),
@@ -164,8 +164,8 @@ const PermissionMatrix = React.forwardRef(
               {
                 className: cn(isDiffRow && "bg-warning/[0.07] hover:bg-warning/10"),
                 children: [
-                  /* @__PURE__ */ jsx(TableCell, { className: cn(PIN_START, "w-64 min-w-64 align-middle"), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col leading-tight", children: [
-                    /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsx(TableCell, { className: cn(PIN_START, "align-middle"), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col leading-tight", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "ui-permission-matrix-name", children: [
                       /* @__PURE__ */ jsx(Text, { weight: "medium", children: permission.name }),
                       isDiffRow && /* @__PURE__ */ jsx(Badge, { tone: "warning", variant: "outline", children: t("dataDisplay.permissionMatrix.difference") })
                     ] }),
@@ -196,7 +196,7 @@ const PermissionMatrix = React.forwardRef(
                           /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }),
                           /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("dataDisplay.permissionMatrix.granted") })
                         ] }) : /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground inline-flex items-center justify-center", children: [
-                          /* @__PURE__ */ jsx(Minus, { "aria-hidden": "true", className: "size-4" }),
+                          /* @__PURE__ */ jsx(Minus, { "aria-hidden": "true", className: "ui-permission-matrix-cell-icon" }),
                           /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("dataDisplay.permissionMatrix.notGranted") })
                         ] })
                       },