@techsio/ui-kit 0.54.1 → 0.54.2

package/dist/organisms/data-table.js

@@ -1,8 +1,13 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
-import { restrictToHorizontalAxis, restrictToVerticalAxis } from "@dnd-kit/modifiers";
-import { SortableContext, arrayMove, horizontalListSortingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
+import { CollisionPriority, CollisionType } from "@dnd-kit/abstract";
+import { RestrictToHorizontalAxis, RestrictToVerticalAxis } from "@dnd-kit/abstract/modifiers";
+import { closestCenter } from "@dnd-kit/collision";
+import { Accessibility, PointerActivationConstraints, PointerSensor } from "@dnd-kit/dom";
+import { OptimisticSortingPlugin } from "@dnd-kit/dom/sortable";
+import { getFirstScrollableAncestor, isHTMLElement, isKeyboardEvent, scrollIntoViewIfNeeded } from "@dnd-kit/dom/utilities";
+import { arrayMove } from "@dnd-kit/helpers";
+import { DragDropProvider, useDragOperation } from "@dnd-kit/react";
+import { useSortable } from "@dnd-kit/react/sortable";
 import { flexRender, useTable } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { Fragment as external_react_Fragment, createContext, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -61,7 +66,7 @@ const dataTableVariants = tv({
             "active:cursor-grabbing"
         ],
         resizeHandle: [
-            "w-(length:--size-data-table-resize-handle) absolute end-0 top-0 h-full cursor-col-resize touch-none select-none",
+            "w-(length:--size-data-table-resize-handle) absolute inset-e-0 top-0 h-full cursor-col-resize touch-none select-none",
             "opacity-0 transition-opacity duration-200 motion-reduce:transition-none",
             "bg-data-table-resize-handle-bg hover:opacity-100 focus-visible:opacity-100",
             "group-hover/header:opacity-100"
@@ -132,80 +137,192 @@ function useControllable(controlled, initial, callback) {
         onChange
     ];
 }
+const tableSortablePlugins = (defaults)=>defaults.filter((plugin)=>plugin !== OptimisticSortingPlugin);
+const tableDragAccessibility = {
+    screenReaderInstructions: {
+        draggable: "To reorder, focus a drag handle and press Space or Enter. Use Up and Down for rows, or Left and Right for columns. Press Space or Enter to drop, or Escape to cancel."
+    },
+    announcements: {
+        dragstart: ({ operation: { source } })=>source ? `Picked up ${source.data.label}, position ${source.data.index + 1}.` : void 0,
+        dragover: ({ operation: { source, target } })=>{
+            if (!(source && target) || source.id === target.id) return;
+            const side = source.data.index < target.data.index ? "after" : "before";
+            return `${source.data.label} will move ${side} ${target.data.label}.`;
+        },
+        dragend: ({ canceled, operation: { source, target } })=>{
+            if (!source) return;
+            if (canceled || !target) return `Reordering ${source.data.label} canceled.`;
+            return `Dropped ${source.data.label}, position ${target.data.index + 1}.`;
+        }
+    }
+};
+const tableDragPlugins = (defaults)=>defaults.map((plugin)=>plugin === Accessibility ? Accessibility.configure(tableDragAccessibility) : plugin);
+const tableDragSensors = (defaults)=>defaults.map((sensor)=>sensor === PointerSensor ? PointerSensor.configure({
+            activationConstraints: [
+                new PointerActivationConstraints.Distance({
+                    value: 5
+                })
+            ]
+        }) : sensor);
+const tableCollisionDetector = (input)=>{
+    const { dragOperation, droppable } = input;
+    if (!isKeyboardEvent(dragOperation.activatorEvent)) return closestCenter(input);
+    const targetId = dragOperation.target?.id ?? dragOperation.source?.id;
+    return droppable.id === targetId ? {
+        id: droppable.id,
+        value: 1,
+        type: CollisionType.Collision,
+        priority: CollisionPriority.Normal
+    } : null;
+};
+function tableDragScrollBounds(cell, scroller) {
+    const viewport = scroller.getBoundingClientRect();
+    let left = viewport.left + scroller.clientLeft;
+    let right = left + scroller.clientWidth;
+    for (const sibling of cell.parentElement?.children ?? []){
+        const style = getComputedStyle(sibling);
+        if ("sticky" !== style.position) continue;
+        const rect = sibling.getBoundingClientRect();
+        if ("auto" !== style.left) left = Math.max(left, rect.right);
+        if ("auto" !== style.right) right = Math.min(right, rect.left);
+    }
+    return {
+        left,
+        right
+    };
+}
+function revealTableDragHandle(element) {
+    const cell = element.closest("td, th");
+    if (!(cell && element.isConnected) || "fixed" === getComputedStyle(cell).position || cell.parentElement && "fixed" === getComputedStyle(cell.parentElement).position) return;
+    const cellStyle = getComputedStyle(cell);
+    if ("sticky" === cellStyle.position && ("auto" !== cellStyle.left || "auto" !== cellStyle.right)) return;
+    const scroller = getFirstScrollableAncestor(cell);
+    if (!isHTMLElement(scroller) || scroller.scrollWidth <= scroller.clientWidth) return;
+    const { left, right } = tableDragScrollBounds(cell, scroller);
+    if (right <= left) return;
+    const cellRect = cell.getBoundingClientRect();
+    const rect = cellRect.width <= right - left ? cellRect : element.getBoundingClientRect();
+    let delta = 0;
+    if (rect.width > right - left) delta = (rect.left + rect.right - left - right) / 2;
+    else if (rect.left < left) delta = rect.left - left;
+    else if (rect.right > right) delta = rect.right - right;
+    scroller.scrollLeft += delta;
+}
+function handleTableDragFocus(event) {
+    if (event.currentTarget.matches(":focus-visible")) revealTableDragHandle(event.currentTarget);
+}
+function useTableDragHandleReveal(sortable) {
+    const { sortable: entity, isDragging, isDropping } = sortable;
+    useLayoutEffect(()=>{
+        const handle = entity.draggable.handle;
+        if (!(isDragging || isDropping) && handle && handle.ownerDocument.activeElement === handle && handle.matches(":focus-visible")) revealTableDragHandle(handle);
+    }, [
+        entity,
+        isDragging,
+        isDropping
+    ]);
+}
+const handleTableKeyboardMove = (event, manager)=>{
+    const { source, target } = manager.dragOperation;
+    if (!(source && isKeyboardEvent(event.nativeEvent) && event.by)) return;
+    event.preventDefault();
+    const column = "column" === source.data.kind;
+    let direction = Math.sign(column ? event.by.x : event.by.y);
+    if (column && source.element && "rtl" === getComputedStyle(source.element).direction) direction *= -1;
+    if (!direction) return;
+    const index = target?.data.index ?? source.data.index;
+    const next = [
+        ...manager.registry.droppables
+    ].filter((entry)=>!entry.disabled && entry.element?.isConnected && entry.accepts(source) && entry.data.kind === source.data.kind && (entry.data.index - index) * direction > 0).sort((a, b)=>(a.data.index - b.data.index) * direction)[0];
+    if (!next?.element) return;
+    const controller = manager.dragOperation.controller;
+    manager.actions.setDropTarget(next.id).then(()=>{
+        const operation = manager.dragOperation;
+        if (!operation.status.dragging || operation.controller !== controller || controller?.signal.aborted || operation.target?.id !== next.id || !next.element?.isConnected || !operation.shape) return;
+        scrollIntoViewIfNeeded(next.element, {
+            block: column ? "none" : "nearest",
+            inline: column ? "nearest" : "none"
+        });
+        if (column) revealTableDragHandle(next.element.querySelector("button") ?? next.element);
+        const rect = next.element.getBoundingClientRect();
+        const center = operation.shape.current.center;
+        manager.actions.move({
+            by: {
+                x: column ? rect.left + rect.width / 2 - center.x : 0,
+                y: column ? 0 : rect.top + rect.height / 2 - center.y
+            }
+        });
+    });
+};
 function dropEdge(sortable, edges) {
-    if (!sortable.isOver || sortable.isDragging) return;
+    if (!sortable.isDropTarget || sortable.isDragging) return;
     return sortable.activeIndex < sortable.overIndex ? edges.after : edges.before;
 }
-function SortableHeaderContent({ columnId, children }) {
+function useTableSortable(kind, id, index, label, edges) {
     const sortable = useSortable({
-        id: columnId,
+        id: `${kind}:${id}`,
+        index,
+        type: kind,
+        accept: kind,
+        group: `${kind}s`,
         data: {
-            type: "column"
-        }
+            kind,
+            id,
+            index,
+            label
+        },
+        modifiers: [
+            "column" === kind ? RestrictToHorizontalAxis : RestrictToVerticalAxis
+        ],
+        collisionDetector: tableCollisionDetector,
+        plugins: tableSortablePlugins
     });
-    const style = {
-        transform: CSS.Translate.toString(sortable.transform),
-        transition: sortable.transition,
-        opacity: sortable.isDragging ? 0.4 : 1
-    };
+    useTableDragHandleReveal(sortable);
+    const { source } = useDragOperation();
     const dropSide = dropEdge({
-        isOver: sortable.isOver,
+        isDropTarget: sortable.isDropTarget,
         isDragging: sortable.isDragging,
-        activeIndex: sortable.activeIndex ?? 0,
-        overIndex: sortable.overIndex ?? 0
-    }, {
+        activeIndex: source?.data.index ?? index,
+        overIndex: index
+    }, edges);
+    return {
+        sortable,
+        dropSide
+    };
+}
+function SortableHeaderContent({ columnId, index, label, children }) {
+    const { sortable, dropSide } = useTableSortable("column", columnId, index, label, {
         after: "end",
         before: "start"
     });
-    return /*#__PURE__*/ jsx(Fragment, {
-        children: children({
-            setActivatorNodeRef: sortable.setActivatorNodeRef,
-            listeners: sortable.listeners,
-            style,
-            setNodeRef: sortable.setNodeRef,
-            isDragging: sortable.isDragging,
-            dropSide,
-            attributes: sortable.attributes
-        })
+    return children({
+        handleRef: sortable.handleRef,
+        nodeRef: sortable.ref,
+        style: {
+            opacity: sortable.isDragging ? 0.4 : 1
+        },
+        isDragging: sortable.isDragging,
+        dropSide
     });
 }
-function SortableRow({ row, enabled, children }) {
-    const sortable = useSortable({
-        id: row.id,
-        disabled: !enabled,
-        data: {
-            type: "row"
-        }
-    });
-    const style = {
-        transform: CSS.Transform.toString(sortable.transform),
-        transition: sortable.transition,
-        opacity: sortable.isDragging ? 0.4 : 1,
-        position: "relative",
-        zIndex: sortable.isDragging ? 1 : void 0
-    };
-    const dropSide = dropEdge({
-        isOver: sortable.isOver,
-        isDragging: sortable.isDragging,
-        activeIndex: sortable.activeIndex ?? 0,
-        overIndex: sortable.overIndex ?? 0
-    }, {
+function SortableRow({ row, index, label, children }) {
+    const { sortable, dropSide } = useTableSortable("row", row.id, index, label, {
         after: "bottom",
         before: "top"
     });
-    const dragHandleProps = {
-        ref: sortable.setActivatorNodeRef,
-        ...sortable.attributes,
-        ...sortable.listeners
-    };
-    return /*#__PURE__*/ jsx(Fragment, {
-        children: children({
-            setNodeRef: sortable.setNodeRef,
-            style,
-            dragHandleProps,
-            isDragging: sortable.isDragging,
-            dropSide
-        })
+    return children({
+        nodeRef: sortable.ref,
+        style: {
+            opacity: sortable.isDragging ? 0.4 : 1,
+            position: "relative",
+            zIndex: sortable.isDragging ? 1 : void 0
+        },
+        dragHandleProps: {
+            onFocus: handleTableDragFocus,
+            ref: sortable.handleRef
+        },
+        isDragging: sortable.isDragging,
+        dropSide
     });
 }
 const DataTableContext = /*#__PURE__*/ createContext(null);
@@ -226,6 +343,8 @@ const DEFAULT_TRANSLATIONS = {
     actionsLabel: "Actions",
     filtersLabel: "Column filters",
     selectAllLabel: "Select all rows",
+    selectionLabel: "Select rows",
+    reorderLabel: "Reorder rows",
     loadingLabel: "Loading data",
     operatorLabels: {},
     editingLabel: "Editing a row — other table controls are locked",
@@ -250,14 +369,13 @@ function pinClass(column, kind) {
         isFirstEndPinned(column) ? "border-s-(length:--border-width-data-table) border-data-table-border" : ""
     ].join(" ");
 }
-function HeaderDragHandle({ styles, setActivatorNodeRef, listeners, attributes, label }) {
+function HeaderDragHandle({ styles, handleRef, label }) {
     return /*#__PURE__*/ jsx("button", {
         "aria-label": `Drag to reorder ${label}`,
         className: styles.dragHandle(),
-        ref: setActivatorNodeRef,
+        onFocus: handleTableDragFocus,
+        ref: handleRef,
         type: "button",
-        ...attributes,
-        ...listeners,
         children: /*#__PURE__*/ jsx(Icon, {
             icon: "icon-[mdi--drag-vertical]",
             size: "current"
@@ -459,7 +577,7 @@ function editingRowElementId(editingRowId, instanceId, rowId) {
 }
 function composeRowRef(dnd, consumerRef) {
     return (node)=>{
-        dnd?.setNodeRef(node);
+        dnd?.nodeRef(node);
         if ("function" == typeof consumerRef) consumerRef(node);
         else if (consumerRef) consumerRef.current = node;
     };
@@ -598,6 +716,8 @@ function DataTable(props) {
             locked,
             getRowLabel,
             selectAllLabel: translations.selectAllLabel,
+            selectionLabel: translations.selectionLabel,
+            reorderLabel: translations.reorderLabel,
             showSelectAll: "multiple" === selectionMode && null == maxSelectedRows
         }), [
         userColumns,
@@ -606,6 +726,8 @@ function DataTable(props) {
         locked,
         getRowLabel,
         translations.selectAllLabel,
+        translations.selectionLabel,
+        translations.reorderLabel,
         selectionMode,
         maxSelectedRows
     ]);
@@ -875,10 +997,6 @@ function DataTable(props) {
             row,
             index
         }));
-    const [activeDragAxis, setActiveDragAxis] = useState(null);
-    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
-        coordinateGetter: sortableKeyboardCoordinates
-    }));
     useEffect(()=>{
         if (!onReachEnd || maxHeight) return;
         const onWindowScroll = ()=>{
@@ -929,29 +1047,29 @@ function DataTable(props) {
         checkReachEnd(distance, reachEndThreshold, reachedEndRef, fireReachEnd);
     };
     const handleColumnDragEnd = (event)=>{
-        const { active, over } = event;
-        if (!over || active.id === over.id) return;
-        const current = table.state.columnOrder.length ? table.state.columnOrder : table.getAllLeafColumns().map((c)=>c.id);
-        const from = current.indexOf(active.id);
-        const to = current.indexOf(over.id);
+        const { source, target } = event.operation;
+        if (event.canceled || locked || !(source && target) || source.id === target.id || "column" !== source.data.kind || "column" !== target.data.kind || !reorderableLeafIds.includes(source.data.id) || !reorderableLeafIds.includes(target.data.id)) return;
+        const current = table.getAllLeafColumns().map((column)=>column.id);
+        const from = current.indexOf(source.data.id);
+        const to = current.indexOf(target.data.id);
         if (-1 === from || -1 === to) return;
         const next = arrayMove(current, from, to);
         setColumnOrder(next);
         const publicBefore = current.filter((id)=>!BUILTIN_COLUMN_IDS.has(id));
         const publicOrder = next.filter((id)=>!BUILTIN_COLUMN_IDS.has(id));
         onColumnReorder?.({
-            from: publicBefore.indexOf(active.id),
-            to: publicOrder.indexOf(active.id),
-            columnId: active.id,
+            from: publicBefore.indexOf(source.data.id),
+            to: publicOrder.indexOf(source.data.id),
+            columnId: source.data.id,
             order: publicOrder
         });
     };
     const handleRowDragEnd = (event)=>{
-        const { active, over } = event;
-        if (!over || active.id === over.id) return;
+        const { source, target } = event.operation;
+        if (event.canceled || !rowReorderActive || !(source && target) || source.id === target.id || "row" !== source.data.kind || "row" !== target.data.kind || !rootRowIds.includes(source.data.id) || !rootRowIds.includes(target.data.id)) return;
         const coreRowsById = table.getCoreRowModel().rowsById;
-        const from = coreRowsById[active.id]?.index;
-        const to = coreRowsById[over.id]?.index;
+        const from = coreRowsById[source.data.id]?.index;
+        const to = coreRowsById[target.data.id]?.index;
         if (void 0 === from || void 0 === to) return;
         const next = arrayMove([
             ...data
@@ -959,7 +1077,7 @@ function DataTable(props) {
         onRowReorder?.({
             from,
             to,
-            rowId: active.id,
+            rowId: source.data.id,
             data: next
         });
     };
@@ -1023,7 +1141,7 @@ function DataTable(props) {
             colSpan: header.colSpan,
             "data-dragging": dnd?.isDragging || void 0,
             "data-pinned": column.getIsPinned() || void 0,
-            ref: dnd?.setNodeRef,
+            ref: dnd?.nodeRef,
             style: {
                 ...OPAQUE_HEADER_BG,
                 ...stickyRowOffset(stickyHeader, headerOffsets, groupIndex),
@@ -1036,10 +1154,8 @@ function DataTable(props) {
                     className: styles.headerLabel(),
                     children: [
                         dnd && /*#__PURE__*/ jsx(HeaderDragHandle, {
-                            attributes: dnd.attributes,
+                            handleRef: dnd.handleRef,
                             label: columnLabel(column),
-                            listeners: dnd.listeners,
-                            setActivatorNodeRef: dnd.setActivatorNodeRef,
                             styles: styles
                         }),
                         /*#__PURE__*/ jsx(HeaderSortLabel, {
@@ -1074,11 +1190,13 @@ function DataTable(props) {
                             const reorderable = enableColumnReorder && !locked && 0 === header.subHeaders.length && !header.column.getIsPinned() && !BUILTIN_COLUMN_IDS.has(header.column.id);
                             return reorderable ? /*#__PURE__*/ jsx(SortableHeaderContent, {
                                 columnId: header.column.id,
+                                index: reorderableLeafIds.indexOf(header.column.id),
+                                label: columnLabel(header.column),
                                 children: (dnd)=>renderHeaderCell(header, groupIndex, dnd)
                             }, header.id) : renderHeaderCell(header, groupIndex);
                         }),
                         hasActionsColumn && 0 === groupIndex && /*#__PURE__*/ jsx(Table.ColumnHeader, {
-                            className: stickyActions ? "sticky end-0" : void 0,
+                            className: stickyActions ? "sticky inset-e-0" : void 0,
                             numeric: true,
                             rowSpan: table.getHeaderGroups().length,
                             style: {
@@ -1116,7 +1234,7 @@ function DataTable(props) {
                             })
                         }, column.id)),
                     hasActionsColumn && /*#__PURE__*/ jsx("td", {
-                        className: stickyActions ? `${styles.filterCell()} sticky end-0 bg-data-table-filter-row-bg` : styles.filterCell(),
+                        className: stickyActions ? `${styles.filterCell()} sticky inset-e-0 bg-data-table-filter-row-bg` : styles.filterCell(),
                         style: {
                             ...OPAQUE_FILTER_ROW_BG,
                             ...stickyHeader ? {
@@ -1207,7 +1325,7 @@ function DataTable(props) {
     };
     const expandAriaControls = (rowId)=>renderExpandedRow ? `${instanceId}-detail-${rowId}` : void 0;
     const renderActionsCell = (row)=>/*#__PURE__*/ jsx(Table.Cell, {
-            className: stickyActions ? "data-table-frozen-cell sticky end-0" : void 0,
+            className: stickyActions ? "data-table-frozen-cell sticky inset-e-0" : void 0,
             numeric: true,
             style: stickyActions ? {
                 zIndex: DATA_TABLE_Z.stickyActionsCell
@@ -1332,7 +1450,8 @@ function DataTable(props) {
     };
     const rowReorderActive = enableRowReorder && !locked && 0 === sorting.length && 0 === columnFilters.length && !globalFilter;
     const bodyRows = renderRows.map(({ row, index: rowIndex })=>rowReorderActive && 0 === row.depth ? /*#__PURE__*/ jsx(SortableRow, {
-            enabled: enableRowReorder,
+            index: rootRowIds.indexOf(row.id),
+            label: getRowLabel?.(row) ?? `row ${row.id}`,
             row: row,
             children: (dnd)=>renderBodyRow(row, rowIndex, dnd)
         }, row.id) : renderBodyRow(row, rowIndex));
@@ -1348,7 +1467,7 @@ function DataTable(props) {
                             })
                         }, `${rowKey}-${column.id}`)),
                     hasActionsColumn && /*#__PURE__*/ jsx(Table.Cell, {
-                        className: stickyActions ? "data-table-frozen-cell sticky end-0" : void 0,
+                        className: stickyActions ? "data-table-frozen-cell sticky inset-e-0" : void 0,
                         numeric: true,
                         style: stickyActions ? {
                             zIndex: DATA_TABLE_Z.stickyActionsCell
@@ -1429,7 +1548,7 @@ function DataTable(props) {
                             children: header.isPlaceholder ? null : flexRender(header.column.columnDef.footer, header.getContext())
                         }, header.id)),
                     hasActionsColumn && /*#__PURE__*/ jsx(Table.Cell, {
-                        className: stickyActions ? "sticky end-0 bg-data-table-footer-bg" : void 0,
+                        className: stickyActions ? "sticky inset-e-0 bg-data-table-footer-bg" : void 0,
                         numeric: true,
                         style: stickyActions ? {
                             zIndex: DATA_TABLE_Z.stickyActionsCell
@@ -1455,36 +1574,22 @@ function DataTable(props) {
             caption && /*#__PURE__*/ jsx(Table.Caption, {
                 children: caption
             }),
-            enableColumnReorder ? /*#__PURE__*/ jsx(SortableContext, {
-                items: reorderableLeafIds,
-                strategy: horizontalListSortingStrategy,
-                children: headerContent
-            }) : headerContent,
-            rowReorderActive ? /*#__PURE__*/ jsx(SortableContext, {
-                items: rootRowIds,
-                strategy: verticalListSortingStrategy,
-                children: bodyContent
-            }) : bodyContent,
+            headerContent,
+            bodyContent,
             footerContent
         ]
     });
-    const isColumnDrag = (event)=>event.active.data.current?.type === "column";
     const handleDragEnd = (event)=>{
-        if (enableColumnReorder && isColumnDrag(event)) return void handleColumnDragEnd(event);
-        if (rowReorderActive) handleRowDragEnd(event);
+        if (event.canceled) return;
+        if (enableColumnReorder && event.operation.source?.data.kind === "column") handleColumnDragEnd(event);
+        else if (rowReorderActive) handleRowDragEnd(event);
     };
     let scrollBody = tableEl;
-    if (enableColumnReorder || rowReorderActive) scrollBody = /*#__PURE__*/ jsx(DndContext, {
-        collisionDetection: closestCenter,
-        modifiers: [
-            "column" === activeDragAxis ? restrictToHorizontalAxis : restrictToVerticalAxis
-        ],
-        onDragEnd: (event)=>{
-            handleDragEnd(event);
-            setActiveDragAxis(null);
-        },
-        onDragStart: (event)=>setActiveDragAxis(enableColumnReorder && isColumnDrag(event) ? "column" : "row"),
-        sensors: sensors,
+    if (enableColumnReorder || rowReorderActive) scrollBody = /*#__PURE__*/ jsx(DragDropProvider, {
+        onDragEnd: handleDragEnd,
+        onDragMove: handleTableKeyboardMove,
+        plugins: tableDragPlugins,
+        sensors: tableDragSensors,
         children: scrollBody
     });
     const ctxValue = {
@@ -1537,11 +1642,14 @@ function DataTable(props) {
         })
     });
 }
-function buildColumns({ userColumns, enableRowReorder, enableRowSelection, locked, getRowLabel, selectAllLabel, showSelectAll }) {
+function buildColumns({ userColumns, enableRowReorder, enableRowSelection, locked, getRowLabel, selectAllLabel, selectionLabel, reorderLabel, showSelectAll }) {
     const leading = [];
     if (enableRowReorder) leading.push({
         id: DRAG_COLUMN_ID,
-        header: ()=>null,
+        header: ()=>/*#__PURE__*/ jsx("span", {
+                className: "sr-only",
+                children: reorderLabel
+            }),
         cell: ()=>null,
         enableSorting: false,
         enableColumnFilter: false,
@@ -1558,7 +1666,10 @@ function buildColumns({ userColumns, enableRowReorder, enableRowSelection, locke
                 disabled: locked,
                 indeterminate: table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected(),
                 onChange: table.getToggleAllRowsSelectedHandler()
-            }) : null,
+            }) : /*#__PURE__*/ jsx("span", {
+                className: "sr-only",
+                children: selectionLabel
+            }),
         cell: ({ row })=>/*#__PURE__*/ jsx(Checkbox, {
                 "aria-label": `Select ${getRowLabel?.(row) ?? `row ${row.id}`}`,
                 checked: row.getIsSelected(),

package/dist/organisms/footer.js

@@ -8,7 +8,7 @@ const footerVariants = tv({
         container: "w-full max-w-footer-max bg-footer-container-bg",
         section: "bg-footer-section-bg",
         list: "flex list-none flex-col gap-footer-list bg-footer-list-bg",
-        bottom: "flex w-full items-center justify-between border-t-(length:--border-footer-width) bg-footer-bottom-bg pt-footer-bottom",
+        bottom: "border-t-(length:--border-footer-width) flex w-full items-center justify-between bg-footer-bottom-bg pt-footer-bottom",
         title: "font-footer-title text-footer-title-fg transition-footer-title hover:text-footer-title-fg-hover",
         link: "font-footer-link text-footer-link-fg transition-footer-link hover:text-footer-link-fg-hover",
         text: "text-footer-text-fg",

package/dist/organisms/gallery.js

@@ -7,9 +7,9 @@ import { tv } from "../utils.js";
 const galleryVariants = tv({
     slots: {
         root: "w-full gap-gallery-root",
-        main: "relative flex min-w-0 h-fit",
+        main: "relative flex h-fit min-w-0",
         thumbnails: "shrink-0",
-        thumbnailsScrollArea: "scrollbar-thin",
+        thumbnailsScrollArea: "scrollbar-auto",
         thumbnailsList: "flex gap-gallery-sm",
         thumbnailTrigger: [
             "relative shrink-0",
@@ -26,7 +26,7 @@ const galleryVariants = tv({
             "brightness-gallery-trigger",
             "hover:brightness-gallery-trigger-active data-active:brightness-gallery-trigger-active",
             "transition duration-200 motion-reduce:transition-none",
-            "*:h-full *:w-full *:object-cover"
+            "*:size-full *:object-cover"
         ]
     },
     variants: {
@@ -42,7 +42,7 @@ const galleryVariants = tv({
                 root: "flex flex-col md:grid md:grid-cols-[minmax(0,1fr)_auto] md:items-start",
                 main: "order-1 md:col-start-1 md:row-start-1",
                 thumbnails: "order-2 md:col-start-2 md:row-start-1",
-                thumbnailsScrollArea: "w-full overflow-x-auto overflow-y-hidden md:max-h-gallery md:overflow-x-hidden md:overflow-y-auto",
+                thumbnailsScrollArea: "w-full overflow-x-auto overflow-y-hidden md:max-h-gallery md:overflow-y-auto md:overflow-x-hidden",
                 thumbnailsList: "flex-row items-center py-gallery-sm md:flex-col md:items-stretch md:px-gallery-xs md:py-0"
             }
         }
@@ -175,6 +175,22 @@ Gallery.Thumbnail = function({ index, children, imageAs, imageClassName, classNa
         "--gallery-thumbnail-size": `${thumbnailSize}px`,
         ...style
     };
+    let fallbackThumbnail = null;
+    if (thumbnailSource) fallbackThumbnail = hasCustomThumbnailComponent ? /*#__PURE__*/ jsx(CustomThumbnailComponent, {
+        alt: thumbnailAlt,
+        className: imageClassName,
+        height: thumbnailSize,
+        src: thumbnailSource,
+        width: thumbnailSize,
+        ...item.thumbnailImageProps
+    }) : /*#__PURE__*/ jsx(Image, {
+        alt: thumbnailAlt,
+        className: imageClassName,
+        height: thumbnailSize,
+        src: thumbnailSource,
+        width: thumbnailSize,
+        ...item.thumbnailImageProps
+    });
     return /*#__PURE__*/ jsx(Button, {
         "aria-current": isActive ? "true" : void 0,
         "aria-label": getThumbnailAriaLabel({
@@ -191,21 +207,7 @@ Gallery.Thumbnail = function({ index, children, imageAs, imageClassName, classNa
         theme: "unstyled",
         type: "button",
         ...props,
-        children: children ?? item.thumbnailContent ?? (thumbnailSource ? hasCustomThumbnailComponent ? /*#__PURE__*/ jsx(CustomThumbnailComponent, {
-            alt: thumbnailAlt,
-            className: imageClassName,
-            height: thumbnailSize,
-            src: thumbnailSource,
-            width: thumbnailSize,
-            ...item.thumbnailImageProps
-        }) : /*#__PURE__*/ jsx(Image, {
-            alt: thumbnailAlt,
-            className: imageClassName,
-            height: thumbnailSize,
-            src: thumbnailSource,
-            width: thumbnailSize,
-            ...item.thumbnailImageProps
-        }) : null)
+        children: children ?? item.thumbnailContent ?? fallbackThumbnail
     });
 };
 Gallery.Carousel = function({ children, onPageChange, ...props }) {

package/dist/organisms/table.js

@@ -80,11 +80,11 @@ const tableVariants = tv({
         stickyFirstColumn: {
             true: {
                 columnHeader: [
-                    "first:sticky first:start-0 first:z-20",
+                    "first:sticky first:inset-s-0 first:z-20",
                     "bg-table-header-bg"
                 ],
                 cell: [
-                    "first:sticky first:start-0 first:z-10",
+                    "first:sticky first:inset-s-0 first:z-10",
                     "bg-table-bg group-data-[selected=true]:bg-table-row-bg-selected",
                     "group-data-[selected=true]:text-table-row-fg-selected"
                 ]