@godxjp/ui 27.1.0 → 27.4.1

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

@@ -80,14 +80,21 @@ export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "
      * `closable={false}`: no × is rendered.
      *
      * The × accessible name is built from the visible label (`children`, or the resolved `status`
-     * label) via `navigation.filterBar.removeFilter` — pass a string `children` (or plain text
-     * label) so the name quotes the chip, e.g. `getByRole('button', { name: /期限: 今週/ })`.
+     * label) via `navigation.filterBar.removeFilter`, e.g. `getByRole('button', { name: /期限: 今週/ })`.
+     * When `children` is not a string (a link, a formatted node) the name is read from the label's
+     * rendered text instead, so several removable chips never share one bare "Delete" (gh#706).
      */
     onRemove?: () => void;
+    /**
+     * The × button's full accessible name, verbatim — antd 5.15+ `closable={{ 'aria-label' }}`.
+     * Wins over the name derived from the label. Use it when the chip's text alone does not say what
+     * removing it does.
+     */
+    removeLabel?: string;
     /** Disables only the × when `onRemove` is set (FilterBar bar/chip disabled). Label stays visible. */
     removeDisabled?: boolean;
 }
-export declare function Badge({ as: Element, className, variant, shape, tone, color, icon, status, tabular, style, children, onRemove, removeDisabled, ...props }: BadgeProps): React.JSX.Element;
+export declare function Badge({ as: Element, className, variant, shape, tone, color, icon, status, tabular, style, children, onRemove, removeLabel: removeLabelProp, removeDisabled, ...props }: BadgeProps): React.JSX.Element;
 /**
  * Status-aware badge with the shared domain-status-to-tone mapping. `Badge` remains the
  * general-purpose primitive.

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

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { cva } from "class-variance-authority";
 import {
   AlertCircle,
@@ -102,6 +103,7 @@ function Badge({
   style,
   children,
   onRemove,
+  removeLabel: removeLabelProp,
   removeDisabled,
   ...props
 }) {
@@ -111,7 +113,16 @@ function Badge({
   const ResolvedIcon = icon === void 0 ? statusDef?.icon : icon;
   const resolvedChildren = children ?? (status ? status in STATUS_MAP ? t(`status.${status}`) : status : void 0);
   const tinted = color != null && color !== "";
-  const removeLabel = typeof children === "string" ? children : typeof resolvedChildren === "string" ? resolvedChildren : void 0;
+  const stringLabel = typeof children === "string" ? children : typeof resolvedChildren === "string" ? resolvedChildren : void 0;
+  const labelRef = React.useRef(null);
+  const [renderedLabel, setRenderedLabel] = React.useState(void 0);
+  const deriveFromDom = Boolean(onRemove) && removeLabelProp == null && stringLabel == null;
+  React.useEffect(() => {
+    if (!deriveFromDom) return;
+    const text = labelRef.current?.textContent?.replace(/\s+/g, " ").trim();
+    setRenderedLabel(text ? text : void 0);
+  }, [deriveFromDom, resolvedChildren]);
+  const removeLabel = stringLabel ?? (deriveFromDom ? renderedLabel : void 0);
   const named = props["aria-label"] != null || props["aria-labelledby"] != null;
   const nameRole = named && props.role === void 0 && !onRemove ? "img" : void 0;
   return /* @__PURE__ */ jsxs(
@@ -136,14 +147,14 @@ function Badge({
       ...props,
       children: [
         ResolvedIcon ? /* @__PURE__ */ jsx(ResolvedIcon, { "data-slot": "badge-icon", "aria-hidden": "true" }) : null,
-        resolvedChildren != null ? /* @__PURE__ */ jsx("span", { "data-slot": "badge-label", children: resolvedChildren }) : null,
+        resolvedChildren != null ? /* @__PURE__ */ jsx("span", { ref: labelRef, "data-slot": "badge-label", children: resolvedChildren }) : null,
         onRemove ? /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
             "data-slot": "badge-remove",
             className: "ui-control-inline-affix-action ui-badge-remove",
-            "aria-label": removeLabel != null ? t("navigation.filterBar.removeFilter", { label: removeLabel }) : t("common.delete"),
+            "aria-label": removeLabelProp ?? (removeLabel != null ? t("navigation.filterBar.removeFilter", { label: removeLabel }) : t("common.delete")),
             onClick: (event) => {
               event.stopPropagation();
               onRemove();

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

@@ -38,8 +38,11 @@ interface DataTableProps<T> {
      * Numbered-pagination state, surfaced by DataTable.Pagination. THREE shapes, all accepted:
      * the TanStack `{ pageIndex, pageSize }` this prop has always taken; antd's
      * `TablePaginationConfig` object (`{ current, pageSize, total, pageSizeOptions,
-     * showSizeChanger, onChange }`, 1-based like antd); and `false`, which hides the pager
-     * entirely (antd `pagination={false}`).
+     * showSizeChanger, showTotal, position, onChange }`, 1-based like antd); and `false`, which
+     * hides the pager entirely (antd `pagination={false}`). The config object with NO composed
+     * `<DataTable.Pagination>` renders the table's own antd footer — the real `Pagination` with
+     * total + page numbers at `position` (default `bottomEnd`), `size="sm"` on a compact table.
+     * Server paging: `pagination={{ total, current, pageSize, onChange }}` with `data` = that page.
      */
     pagination?: PaginationState | TablePaginationProp | false;
     onPaginationChange?: OnChangeFn<PaginationState>;
@@ -72,7 +75,11 @@ interface DataTableProps<T> {
     denied?: React.ReactNode;
     /** Retry handler for the built-in `error` state; omit to hide the retry action. */
     onRetry?: () => void;
-    /** Zebra-stripe the body rows (even rows get a subtle fill). */
+    /**
+     * Zebra-stripe the body rows by LOGICAL record (an expanded detail row takes its record's stripe;
+     * frozen columns wear it too). Omit to inherit the theme default `--table-row-striped-alpha`;
+     * `true` / `false` override it for this table.
+     */
     striped?: boolean;
     /** Highlight a row on hover even when it is not clickable (no `onRowClick`). */
     hoverable?: boolean;
@@ -141,15 +148,15 @@ interface DataTableProps<T> {
 }
 export declare function DataTable<T>({ data, columns, getRowId, getRowLabel, selectable, selected: controlledSelected, onSelectChange, onRowClick, density: controlledDensity, onDensityChange, sort, onSortChange, globalFilter: controlledGlobalFilter, onGlobalFilterChange, pagination: paginationProp, onPaginationChange, rowCount, columnVisibility: controlledVisibility, onColumnVisibilityChange, manualSorting, manualFiltering, manualPagination, loading, empty, error, denied, onRetry, striped, hoverable, stickyHeader, preset, collapseBelow, rowClassName, rowTone, rowSelection, expandable, summary, scroll, sticky, onRow, bordered, showSorterTooltip, sortDirections, onFilterChange, className, children, }: DataTableProps<T>): React.JSX.Element;
 export declare namespace DataTable {
-    var Toolbar: ({ children, className, }: {
+    export var Toolbar: ({ children, className, }: {
         children?: React.ReactNode;
         className?: string;
     }) => React.JSX.Element;
-    var Search: ({ placeholder, className, }: {
+    export var Search: ({ placeholder, className, }: {
         placeholder?: string;
         className?: string;
     }) => React.JSX.Element;
-    var ViewOptions: ({ className, label, }: {
+    export var ViewOptions: ({ className, label, }: {
         className?: string;
         /**
          * Overrides the button's text. The default ("View") is the shortest thing
@@ -159,12 +166,13 @@ export declare namespace DataTable {
          */
         label?: React.ReactNode;
     }) => React.JSX.Element | null;
-    var SelectAll: () => React.JSX.Element | null;
-    var BulkActions: ({ count, children, className, }: BulkActionsProps) => React.JSX.Element | null;
-    var DensityToggle: () => React.JSX.Element;
-    var Content: () => React.JSX.Element;
-    var Pagination: (props: PaginationProps) => React.JSX.Element;
-    var RowActions: ({ ariaLabel, children }: RowActionsProps) => React.JSX.Element;
+    export var SelectAll: () => React.JSX.Element | null;
+    export var BulkActions: ({ count, children, className, }: BulkActionsProps) => React.JSX.Element | null;
+    export var DensityToggle: () => React.JSX.Element;
+    export var Content: () => React.JSX.Element;
+    var _a: (props: PaginationProps) => React.JSX.Element;
+    export { _a as Pagination };
+    export var RowActions: ({ ariaLabel, children }: RowActionsProps) => React.JSX.Element;
 }
 interface BulkActionsProps {
     count?: number;

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

@@ -56,6 +56,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger
 } from "../navigation/dropdown-menu.js";
+import { Pagination } from "../navigation/pagination.js";
 import { RadioGroupRoot, RadioItem } from "../data-entry/radio.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../feedback/tooltip.js";
 import {
@@ -224,7 +225,7 @@ function DataTable({
   error,
   denied,
   onRetry,
-  striped = false,
+  striped,
   hoverable = false,
   stickyHeader = true,
   preset = "default",
@@ -389,6 +390,13 @@ function DataTable({
     (c) => React.isValidElement(c) && c.type.displayName === "DataTable.Pagination" && typeof c.props.onChange !== "function"
   );
   const paginationEngaged = !pagerHidden && (manualPagination || controlledPagination !== void 0 || paginationConfig !== void 0 || onPaginationChange !== void 0 || hasNumberedPager);
+  const serverPaged = paginationConfig?.total !== void 0 && data.length < paginationConfig.total && data.length <= pageSize;
+  const hasComposedPager = React.Children.toArray(children).some(
+    (c) => React.isValidElement(c) && c.type.displayName === "DataTable.Pagination"
+  );
+  const footerPositions = paginationConfig && !hasComposedPager && !pagerHidden ? (paginationConfig.position ?? ["bottomEnd"]).filter((p) => p !== "none") : [];
+  const topFooter = footerPositions.find((p) => p.startsWith("top"));
+  const bottomFooter = footerPositions.find((p) => p.startsWith("bottom"));
   const features = React.useMemo(() => dataTableFeatures(), []);
   const selectionEnabled = selectable || rowSelection !== void 0;
   const table = useTable({
@@ -400,7 +408,7 @@ function DataTable({
     manualFiltering,
     // "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,
+    manualPagination: manualPagination || serverPaged || !paginationEngaged,
     rowCount: paginationConfig?.total ?? rowCount,
     enableRowSelection: selectionEnabled,
     state: {
@@ -467,8 +475,10 @@ function DataTable({
     (c) => React.isValidElement(c) && c.type.displayName === "DataTable.Content"
   );
   return /* @__PURE__ */ jsx(DataTableContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs("div", { className: cn("ui-data-table-root", densityClass[density], className), children: [
+    topFooter ? /* @__PURE__ */ jsx(PaginationFooter, { position: topFooter }) : null,
     children,
-    !hasContent && /* @__PURE__ */ jsx(DataTable.Content, {})
+    !hasContent && /* @__PURE__ */ jsx(DataTable.Content, {}),
+    bottomFooter ? /* @__PURE__ */ jsx(PaginationFooter, { position: bottomFooter }) : null
   ] }) });
 }
 DataTable.Toolbar = function DataTableToolbar({
@@ -929,6 +939,7 @@ DataTable.Content = function DataTableContent() {
               preset,
               collapseBelow,
               bordered,
+              striped,
               children: [
                 /* @__PURE__ */ jsx(
                   TableHeader,
@@ -1145,8 +1156,10 @@ DataTable.Content = function DataTableContent() {
                         } : rowProps.onKeyDown,
                         className: cn(
                           rowPadding,
-                          // Hover highlight when rows are clickable OR explicitly hoverable…
-                          (onRowClick || hoverable) && "hover:bg-muted/50",
+                          // Hover highlight when rows are clickable OR explicitly hoverable… The
+                          // --accent step TableRow itself uses, not --muted/50: that sat BELOW the
+                          // zebra stripe (--muted/0.8, gh#700), so hovering a striped row lightened it.
+                          (onRowClick || hoverable) && "hover:bg-accent/70",
                           // …but the affordance (cursor + focus mark) only when clickable.
                           //
                           // `ui-focus-ring` = the single focus source (styles/focus-ring.css). It
@@ -1403,6 +1416,41 @@ function NumberedPagination({ pageSizeOptions, className }) {
     }
   );
 }
+const footerAlign = {
+  Start: "start",
+  Center: "center",
+  End: "end"
+};
+function PaginationFooter({
+  position
+}) {
+  const { table, paginationConfig, density } = useDataTableContext();
+  if (!paginationConfig) return null;
+  const { pageIndex, pageSize } = table.state.pagination;
+  const edge = position.replace(/^(top|bottom)/, "");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "ui-data-table-pagination ui-data-table-pagination--footer",
+      "data-position": position,
+      children: /* @__PURE__ */ jsx(
+        Pagination,
+        {
+          value: pageIndex + 1,
+          total: table.getRowCount(),
+          pageSize,
+          pageSizeOptions: paginationConfig.pageSizeOptions,
+          showSizeChanger: paginationConfig.showSizeChanger ?? true,
+          showTotal: paginationConfig.showTotal,
+          hideOnSinglePage: paginationConfig.hideOnSinglePage ?? false,
+          size: density === "compact" ? "sm" : "md",
+          align: footerAlign[edge],
+          onValueChange: (page, size) => table.setPagination({ pageIndex: page - 1, pageSize: size })
+        }
+      )
+    }
+  );
+}
 DataTable.RowActions = function DataTableRowActions({ ariaLabel, children }) {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxs(

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

@@ -9,9 +9,11 @@ export type RangeTimelineRow = {
 };
 export type RangeTimelineProps = React.HTMLAttributes<HTMLElement> & {
     label: string;
+    /** `muted` tints that column down the whole body — a non-working day, a closed period. */
     columns: {
         label: string;
         units: number;
+        muted?: boolean;
     }[];
     bands?: {
         label: string;
@@ -20,13 +22,21 @@ export type RangeTimelineProps = React.HTMLAttributes<HTMLElement> & {
     rows: RangeTimelineRow[];
     today?: number | null;
     onRangeChange?: (id: string, edge: "start" | "end", delta: number) => void;
+    /**
+     * Rule the body as a grid: a line between rows, a line under the header, and a vertical line for
+     * every column down the whole body. Default `true`, like `Calendar bordered`; `false` restores
+     * the header-only ruling. Colour `--range-timeline-grid-color`, weight `--range-timeline-grid-width`.
+     */
+    bordered?: boolean;
 };
 /** A horizontal range axis. Units and labels are data; the design system owns all geometry. */
 export declare const RangeTimeline: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
     label: string;
+    /** `muted` tints that column down the whole body — a non-working day, a closed period. */
     columns: {
         label: string;
         units: number;
+        muted?: boolean;
     }[];
     bands?: {
         label: string;
@@ -35,4 +45,10 @@ export declare const RangeTimeline: React.ForwardRefExoticComponent<React.HTMLAt
     rows: RangeTimelineRow[];
     today?: number | null;
     onRangeChange?: (id: string, edge: "start" | "end", delta: number) => void;
+    /**
+     * Rule the body as a grid: a line between rows, a line under the header, and a vertical line for
+     * every column down the whole body. Default `true`, like `Calendar bordered`; `false` restores
+     * the header-only ruling. Colour `--range-timeline-grid-color`, weight `--range-timeline-grid-width`.
+     */
+    bordered?: boolean;
 } & React.RefAttributes<HTMLElement>>;

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

@@ -2,12 +2,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useTranslation } from "../../i18n/use-translation.js";
-import { GripVertical } from "lucide-react";
+import { ChevronLeft, ChevronRight, GripVertical } from "lucide-react";
 import { Button } from "../general/button.js";
 import { Text } from "../general/typography.js";
 import { cn } from "../../lib/utils.js";
 const RangeTimeline = React.forwardRef(
-  function RangeTimeline2({ label, columns, bands, rows, today, onRangeChange, className, ...props }, ref) {
+  function RangeTimeline2({ label, columns, bands, rows, today, onRangeChange, bordered = true, className, ...props }, ref) {
     const { t } = useTranslation();
     const units = Math.max(
       1,
@@ -37,6 +37,7 @@ const RangeTimeline = React.forwardRef(
         ...props,
         ref,
         className: cn("ui-range-timeline", className),
+        "data-bordered": bordered ? "true" : void 0,
         "aria-label": label,
         tabIndex: 0,
         children: /* @__PURE__ */ jsxs(
@@ -69,86 +70,120 @@ const RangeTimeline = React.forwardRef(
                   index
                 )) })
               ] }),
-              rows.map((row) => {
-                const delta = preview?.id === row.id ? preview.delta : 0;
-                const start = Math.min(row.end, row.start + (preview?.edge === "start" ? delta : 0));
-                const end = Math.max(row.start, row.end + (preview?.edge === "end" ? delta : 0));
-                const left = Math.max(0, start), right = Math.min(units, end + 1);
-                return /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-row", children: [
-                  /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-label", children: row.label }),
-                  /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-track", children: [
-                    today != null && today >= 0 && today < units && /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        "aria-hidden": "true",
-                        className: "ui-range-timeline-today",
-                        style: { insetInlineStart: `${(today + 0.5) / units * 100}%` }
-                      }
-                    ),
-                    right <= left && /* @__PURE__ */ jsx(Text, { tone: "muted", children: t("rangeTimeline.outsideRange") }),
-                    right > left && /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: "ui-range-timeline-bar",
-                        style: {
-                          insetInlineStart: `${left / units * 100}%`,
-                          inlineSize: `${(right - left) / units * 100}%`
-                        },
-                        children: onRangeChange && (right - left) * Math.max(1, columns.length) >= units && ["start", "end"].filter(
-                          (edge) => edge === "start" ? start >= 0 && start < units : end >= 0 && end < units
-                        ).map((edge) => /* @__PURE__ */ jsx(
-                          Button,
+              /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-body", children: [
+                (bordered || columns.some((column) => column.muted)) && // Decorative: the same flex/units layout as the header columns, laid once behind every
+                // row so each vertical rule runs the full body height exactly under its header column.
+                /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-grid", "aria-hidden": "true", children: [
+                  /* @__PURE__ */ jsx("div", {}),
+                  /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-columns", children: columns.map((column, index) => /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "ui-range-timeline-grid-column",
+                      "data-muted": column.muted ? "true" : void 0,
+                      style: { flex: column.units }
+                    },
+                    index
+                  )) })
+                ] }),
+                rows.map((row) => {
+                  const delta = preview?.id === row.id ? preview.delta : 0;
+                  const start = Math.min(row.end, row.start + (preview?.edge === "start" ? delta : 0));
+                  const end = Math.max(row.start, row.end + (preview?.edge === "end" ? delta : 0));
+                  const left = Math.max(0, start), right = Math.min(units, end + 1);
+                  return /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-row", children: [
+                    /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-label", children: row.label }),
+                    /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-track", children: [
+                      today != null && today >= 0 && today < units && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          className: "ui-range-timeline-today",
+                          style: { insetInlineStart: `${(today + 0.5) / units * 100}%` }
+                        }
+                      ),
+                      right <= left && (end < 0 ? /* @__PURE__ */ jsxs("span", { className: "ui-range-timeline-outside", "data-direction": "before", children: [
+                        /* @__PURE__ */ jsx(
+                          ChevronLeft,
                           {
-                            variant: "ghost",
-                            size: "icon-xs",
-                            className: "ui-range-timeline-handle",
-                            "data-edge": edge,
-                            "aria-label": edge === "start" ? row.startLabel : row.endLabel,
-                            onPointerDown: (event) => {
-                              const width = track.current?.getBoundingClientRect().width ?? 0;
-                              if (!width || event.button !== 0) return;
-                              event.currentTarget.setPointerCapture(event.pointerId);
-                              drag.current = {
-                                id: row.id,
-                                edge,
-                                x: event.clientX,
-                                width,
-                                direction: getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1
-                              };
-                            },
-                            onPointerMove: (event) => {
-                              if (drag.current)
-                                setPreview({
-                                  id: drag.current.id,
-                                  edge: drag.current.edge,
-                                  delta: deltaAt(event.clientX)
-                                });
-                            },
-                            onPointerUp: complete,
-                            onPointerCancel: cancel,
-                            onLostPointerCapture: cancel,
-                            onKeyDown: (event) => {
-                              if (event.key === "Escape") {
-                                cancel();
-                                return;
-                              }
-                              const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
-                              if (!step) return;
-                              event.preventDefault();
-                              const direction = getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1;
-                              const delta2 = step * direction;
-                              if (edge === "start" ? row.start + delta2 <= row.end : row.end + delta2 >= row.start)
-                                onRangeChange(row.id, edge, delta2);
-                            },
-                            children: /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true" })
+                            "aria-hidden": "true",
+                            className: "ui-range-timeline-outside-icon"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: t("rangeTimeline.outsideBefore") })
+                      ] }) : /* @__PURE__ */ jsxs("span", { className: "ui-range-timeline-outside", "data-direction": "after", children: [
+                        /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: t("rangeTimeline.outsideAfter") }),
+                        /* @__PURE__ */ jsx(
+                          ChevronRight,
+                          {
+                            "aria-hidden": "true",
+                            className: "ui-range-timeline-outside-icon"
+                          }
+                        )
+                      ] })),
+                      right > left && /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "ui-range-timeline-bar",
+                          style: {
+                            insetInlineStart: `${left / units * 100}%`,
+                            inlineSize: `${(right - left) / units * 100}%`
                           },
-                          edge
-                        ))
-                      }
-                    )
-                  ] })
-                ] }, row.id);
-              })
+                          children: onRangeChange && (right - left) * Math.max(1, columns.length) >= units && ["start", "end"].filter(
+                            (edge) => edge === "start" ? start >= 0 && start < units : end >= 0 && end < units
+                          ).map((edge) => /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              variant: "ghost",
+                              size: "icon-xs",
+                              className: "ui-range-timeline-handle",
+                              "data-edge": edge,
+                              "aria-label": edge === "start" ? row.startLabel : row.endLabel,
+                              onPointerDown: (event) => {
+                                const width = track.current?.getBoundingClientRect().width ?? 0;
+                                if (!width || event.button !== 0) return;
+                                event.currentTarget.setPointerCapture(event.pointerId);
+                                drag.current = {
+                                  id: row.id,
+                                  edge,
+                                  x: event.clientX,
+                                  width,
+                                  direction: getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1
+                                };
+                              },
+                              onPointerMove: (event) => {
+                                if (drag.current)
+                                  setPreview({
+                                    id: drag.current.id,
+                                    edge: drag.current.edge,
+                                    delta: deltaAt(event.clientX)
+                                  });
+                              },
+                              onPointerUp: complete,
+                              onPointerCancel: cancel,
+                              onLostPointerCapture: cancel,
+                              onKeyDown: (event) => {
+                                if (event.key === "Escape") {
+                                  cancel();
+                                  return;
+                                }
+                                const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+                                if (!step) return;
+                                event.preventDefault();
+                                const direction = getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1;
+                                const delta2 = step * direction;
+                                if (edge === "start" ? row.start + delta2 <= row.end : row.end + delta2 >= row.start)
+                                  onRangeChange(row.id, edge, delta2);
+                              },
+                              children: /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true" })
+                            },
+                            edge
+                          ))
+                        }
+                      )
+                    ] })
+                  ] }, row.id);
+                })
+              ] })
             ]
           }
         )

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

@@ -13,6 +13,14 @@ export type TableProps = React.HTMLAttributes<HTMLTableElement> & {
      * (default `--border`).
      */
     bordered?: boolean;
+    /**
+     * Zebra rows — every even LOGICAL body row wears `--table-row-striped-background`, so a wide list
+     * row is easy to follow across its columns. An expanded detail row (a `<tr data-expanded-row>`
+     * under its record) is skipped when counting and takes its record's stripe. Leave it out to
+     * inherit the theme default (`--table-row-striped-alpha`, `0%` unless a service turns striping on
+     * for every table); `true` / `false` override that default for this table only.
+     */
+    striped?: boolean;
     /**
      * Named collection contract. `"default"` (the default) emits no attribute and keeps the plain
      * table exactly as it is.
@@ -64,6 +72,14 @@ export declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes
      * (default `--border`).
      */
     bordered?: boolean;
+    /**
+     * Zebra rows — every even LOGICAL body row wears `--table-row-striped-background`, so a wide list
+     * row is easy to follow across its columns. An expanded detail row (a `<tr data-expanded-row>`
+     * under its record) is skipped when counting and takes its record's stripe. Leave it out to
+     * inherit the theme default (`--table-row-striped-alpha`, `0%` unless a service turns striping on
+     * for every table); `true` / `false` override that default for this table only.
+     */
+    striped?: boolean;
     /**
      * Named collection contract. `"default"` (the default) emits no attribute and keeps the plain
      * table exactly as it is.

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

@@ -7,6 +7,7 @@ const Table = React.forwardRef(
     className,
     scrollable = true,
     bordered = false,
+    striped,
     preset = "default",
     collapseBelow = "sm",
     columnWidths,
@@ -41,6 +42,7 @@ const Table = React.forwardRef(
           {
             ref,
             "data-slot": "table",
+            "data-striped": striped === void 0 ? void 0 : striped ? "" : "false",
             className: cn("w-full caption-bottom", bordered && "ui-table-bordered", className),
             ...props
           }