@ncds/ui-admin 1.8.28-alpha.2 → 1.8.28-alpha.4

package/dist/types/assets/scripts/table/rowSpanBlock.d.ts

@@ -0,0 +1,29 @@
+type RowSpanEdge = 'top' | 'bottom';
+type RowSpanBlock = {
+    start: number;
+    end: number;
+};
+/**
+ * 병합을 쪼개지 않고 통째로 옮길 수 있는 최소 행 구간을 구한다.
+ * 범위가 겹치면 어느 쪽도 쪼갤 수 없으므로 연결된 범위를 모두 합친다.
+ *
+ * @param rowSpans 행별 셀 rowSpan 목록. 병합에 덮여 생략된 셀은 포함하지 않는다
+ * @param index 기준 행의 위치
+ */
+export declare const computeRowSpanBlock: (rowSpans: readonly (readonly number[])[], index: number) => RowSpanBlock;
+/**
+ * 드롭을 받을 수 있는 변. 블록 가운데에 떨어뜨리면 그 블록이 쪼개지므로 경계만 연다.
+ */
+export declare const computeOpenEdges: (rowSpans: readonly (readonly number[])[], index: number) => RowSpanEdge[];
+/** 고른 행들이 끌고 오는 행 전부. 병합 블록을 쪼개면 병합이 깨지므로 블록째 더한다. */
+export declare const collectBlockIndices: (rowSpans: number[][], indices: number[]) => number[];
+/** 행이 속한 `tbody` 와 그 안에서의 위치. 표 밖 요소면 `null`. */
+export declare const locateRow: (rowEl: HTMLTableRowElement) => {
+    body: HTMLTableSectionElement;
+    index: number;
+} | null;
+/** 표 본문의 행별 rowSpan 을 읽어 `computeRowSpanBlock` 에 넘길 형태로 만든다. */
+export declare const readRowSpans: (body: HTMLTableSectionElement) => number[][];
+export type { RowSpanBlock, RowSpanEdge };
+/** 다중 선택으로 고른 행들이 끌고 오는 행 전부. 행 순서는 표에 놓인 순서를 따른다. */
+export declare const expandRowsToBlocks: (rows: HTMLTableRowElement[]) => HTMLTableRowElement[];

package/dist/types/src/components/data-display/table/Table.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import type { SortDirection, TableBodyProps, TableColGroupProps, TableDragCellProps, TableDragHeaderCellProps, TableEmptyProps, TableFooterProps, TableHeaderProps, TablePaginationProps } from './types';
+import type { SortDirection, TableBodyProps, TableColGroupProps, TableDragCellProps, TableDragHeaderCellProps, TableEmptyProps, TableFooterProps, TableHeaderProps, TablePaginationProps, TableRowGroupProps } from './types';
 export declare const Table: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "draggable" | "ref"> & {
     type?: import("./types").TableType | undefined;
     fixedHeader?: boolean | undefined;
@@ -19,6 +19,10 @@ export declare const Table: import("react").ForwardRefExoticComponent<Omit<impor
         ({ children, className, onRowDrop }: TableBodyProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    RowGroup: {
+        ({ children, className, onRowDrop }: TableRowGroupProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
     Row: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
         selected?: boolean | undefined;
         status?: import("./types").RowStatus | undefined;
@@ -29,7 +33,7 @@ export declare const Table: import("react").ForwardRefExoticComponent<Omit<impor
         displayName: string;
     };
     DragCell: {
-        ({ disabled, className, children }: TableDragCellProps): import("react/jsx-runtime").JSX.Element;
+        ({ disabled, className, rowSpan, children }: TableDragCellProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     HeaderCell: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & {
@@ -58,4 +62,4 @@ export declare const Table: import("react").ForwardRefExoticComponent<Omit<impor
         displayName: string;
     };
 };
-export type { RowStatus, SortDirection, TableBodyProps, TableCellProps, TableColGroupProps, TableDragCellProps, TableDragHeaderCellProps, TableEmptyProps, TableFooterProps, TableHeaderCellProps, TableHeaderProps, TablePaginationProps, TableProps, TableRowProps, TableType, } from './types';
+export type { RowStatus, SortDirection, TableBodyProps, TableCellProps, TableColGroupProps, TableDragCellProps, TableDragHeaderCellProps, TableEmptyProps, TableFooterProps, TableHeaderCellProps, TableHeaderProps, TablePaginationProps, TableProps, TableRowDropHandler, TableRowGroupProps, TableRowProps, TableType, } from './types';

package/dist/types/src/components/data-display/table/__tests__/Table.rowGroup.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/data-display/table/__tests__/Table.rowGroupDnd.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/data-display/table/__tests__/tableSelectableStyle.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/data-display/table/dnd-context.d.ts

@@ -1,6 +1,9 @@
+import { type MutableRefObject } from 'react';
+import type { TableRowDropHandler } from './types';
 type TableDndContextValue = {
     isDraggable: boolean;
     tableId: string;
+    onRowDropRef: MutableRefObject<TableRowDropHandler | undefined>;
 };
 declare const TableDndContext: import("react").Context<TableDndContextValue>;
 type RowDndContextValue = {

package/dist/types/src/components/data-display/table/dnd-move.d.ts

@@ -0,0 +1,17 @@
+declare const DRAG_ID_ATTRIBUTE = "data-draggable-id";
+/** 행 위치는 `tbody` 기준이라 묶음이 여러 개면 서로 겹친다 — 어느 `tbody` 인지 함께 본다 */
+export declare const locateRow: (rowEl: HTMLTableRowElement) => {
+    bodyIndex: number;
+    body: HTMLTableSectionElement;
+    index: number;
+} | null;
+/** 병합이 덮는 행은 따로 옮길 수 없다. 드래그 단위를 그 행이 속한 병합 블록으로 넓힌다. */
+export declare const findRowSpanBlock: (rowEl: HTMLTableRowElement) => {
+    bodyIndex: number;
+    rows: HTMLTableRowElement[];
+    start: number;
+    end: number;
+} | null;
+/** 이번 드래그로 옮겨야 하는 행 전부. 고른 행이 여럿이면 각자의 병합 블록까지 끌고 온다. */
+export declare const planMoveIds: (rowEl: HTMLTableRowElement) => string[];
+export { DRAG_ID_ATTRIBUTE };

package/dist/types/src/components/data-display/table/dnd-preview.d.ts

@@ -2,5 +2,9 @@ declare const TABLE_DND_ID_RADIX = 36;
 declare const TABLE_DND_ID_SLICE_START = 2;
 declare const TABLE_DND_ID_SLICE_END = 9;
 declare const PREVIEW_BADGE_SIZE = 24;
-declare const buildDragPreview: (rows: HTMLElement[], rowRect: DOMRect) => HTMLDivElement;
+/**
+ * @param rows 미리보기에 그릴 행. 병합 묶음은 한 건이라도 행이 여러 개다
+ * @param itemCount 옮기는 건수. 병합 묶음은 행 수와 다르므로, 생략하면 행 수를 건수로 본다
+ */
+declare const buildDragPreview: (rows: HTMLElement[], rowRect: DOMRect, itemCount?: number) => HTMLDivElement;
 export { TABLE_DND_ID_RADIX, TABLE_DND_ID_SLICE_START, TABLE_DND_ID_SLICE_END, PREVIEW_BADGE_SIZE, buildDragPreview };

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

@@ -30,14 +30,21 @@ export type TableHeaderProps = {
     children: ReactNode;
     className?: string;
 };
+/**
+ * draggable=true 테이블에서 행이 재정렬될 때 호출된다.
+ * fromId → toId 로 이동, edge는 toId 행의 위(top)/아래(bottom) 삽입 위치.
+ * @param moveIds 이번 드래그로 옮겨야 하는 행 전부 — 다중 선택과 각 행의 병합 블록을 모두 반영한다
+ */
+export type TableRowDropHandler = (fromId: string, toId: string, edge: 'top' | 'bottom', moveIds: string[]) => void;
 export type TableBodyProps = {
     children: ReactNode;
     className?: string;
-    /**
-     * draggable=true 테이블에서 행이 재정렬될 때 호출된다.
-     * fromId → toId 로 이동, edge는 toId 행의 위(top)/아래(bottom) 삽입 위치.
-     */
-    onRowDrop?: (fromId: string, toId: string, edge: 'top' | 'bottom') => void;
+    onRowDrop?: TableRowDropHandler;
+};
+export type TableRowGroupProps = {
+    children: ReactNode;
+    className?: string;
+    onRowDrop?: TableRowDropHandler;
 };
 export type TableRowProps = Omit<ComponentProps<'tr'>, 'ref'> & {
     selected?: boolean;
@@ -48,6 +55,8 @@ export type TableRowProps = Omit<ComponentProps<'tr'>, 'ref'> & {
 export type TableDragCellProps = {
     disabled?: boolean;
     className?: string;
+    /** 묶음에서 여러 행을 덮을 때 지정한다. 다른 칸과 달리 병합되지 않으면 묶음 첫 칸만 쪼개져 보인다. */
+    rowSpan?: number;
     /** 드래그 셀에 함께 배치할 콘텐츠 (예: CheckboxInput). 아이콘 우측 8px gap으로 배치된다. */
     children?: ReactNode;
 };

package/dist/ui-admin/assets/styles/style.css

@@ -6660,6 +6660,19 @@ button {
 .ncua-table--hoverable .ncua-table__row--selected.ncua-table__row--error:hover th {
   background: transparent;
 }
+.ncua-table__row-group:not(:last-child) > .ncua-table__row:last-child td,
+.ncua-table__row-group:not(:last-child) > .ncua-table__row:last-child th.ncua-table__cell {
+  border-bottom: 1px solid var(--gray-100);
+}
+.ncua-table__row-group:has(> .ncua-table__row--selected) > .ncua-table__row:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error) {
+  background: var(--gray-50);
+}
+.ncua-table--hoverable .ncua-table__row-group:hover > .ncua-table__row:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error) {
+  background: color-mix(in srgb, var(--gray-50) 40%, transparent);
+}
+.ncua-table--hoverable .ncua-table__row-group:has(> .ncua-table__row--selected):hover > .ncua-table__row:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error) {
+  background: color-mix(in srgb, var(--gray-200) 10%, var(--gray-50));
+}
 .ncua-table__cell {
   padding: 10px var(--spacing-s);
   font-size: var(--font-size-xs);
@@ -6729,8 +6742,7 @@ button {
 .ncua-table--selectable {
   border-left: none;
 }
-.ncua-table--selectable .ncua-table__header-cell:first-child,
-.ncua-table--selectable .ncua-table__body .ncua-table__row:not(.ncua-table__row--selected) td:first-child {
+.ncua-table--selectable .ncua-table__header-cell:first-child, .ncua-table--selectable .ncua-table__body .ncua-table__row:not(.ncua-table__row--selected), .ncua-table--selectable .ncua-table__body .ncua-table__row:not(.ncua-table__row--selected) > td[rowspan]:first-child {
   box-shadow: inset 1px 0 0 0 var(--gray-100);
 }
 .ncua-table--selectable {
@@ -6754,8 +6766,7 @@ button {
 .ncua-table--selectable:has(.ncua-table__footer) > .ncua-table__table:not(.ncua-table__table--head) {
   box-shadow: none;
 }
-.ncua-table--in-data-grid.ncua-table--selectable .ncua-table__header-cell:first-child,
-.ncua-table--in-data-grid.ncua-table--selectable .ncua-table__body .ncua-table__row:not(.ncua-table__row--selected) td:first-child {
+.ncua-table--in-data-grid.ncua-table--selectable .ncua-table__header-cell:first-child, .ncua-table--in-data-grid.ncua-table--selectable .ncua-table__body .ncua-table__row:not(.ncua-table__row--selected), .ncua-table--in-data-grid.ncua-table--selectable .ncua-table__body .ncua-table__row:not(.ncua-table__row--selected) > td[rowspan]:first-child {
   box-shadow: none;
   border-left: none;
 }
@@ -7035,6 +7046,51 @@ button {
   display: none;
 }
 
+.ncua-table__cell[rowspan]:where(:not([rowspan="1"])) {
+  --ncua-merge-selected: 0;
+  --ncua-merge-hovered: 0;
+  --ncua-merge-base: color-mix(in srgb, var(--gray-50) calc(var(--ncua-merge-selected) * 100%), var(--base-white));
+  --ncua-merge-overlay: color-mix(in srgb, var(--gray-200) calc(var(--ncua-merge-selected) * 100%), var(--gray-50));
+  --ncua-merge-overlay-amount: calc(
+    var(--ncua-merge-hovered) * (var(--ncua-merge-selected) * 10% + (1 - var(--ncua-merge-selected)) * 40%)
+  );
+  background: color-mix(in srgb, var(--ncua-merge-overlay) var(--ncua-merge-overlay-amount), var(--ncua-merge-base));
+}
+
+:where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr:hover) > .ncua-table__cell[rowspan="2"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr:hover) > .ncua-table__cell[rowspan="3"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr:hover) > .ncua-table__cell[rowspan="3"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr:hover) > .ncua-table__cell[rowspan="4"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr:hover) > .ncua-table__cell[rowspan="4"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr:hover) > .ncua-table__cell[rowspan="4"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr:hover) > .ncua-table__cell[rowspan="5"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr:hover) > .ncua-table__cell[rowspan="5"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr:hover) > .ncua-table__cell[rowspan="5"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr + tr:hover) > .ncua-table__cell[rowspan="5"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr:hover) > .ncua-table__cell[rowspan="6"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr:hover) > .ncua-table__cell[rowspan="6"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr:hover) > .ncua-table__cell[rowspan="6"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr + tr:hover) > .ncua-table__cell[rowspan="6"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr:hover) > .ncua-table__cell[rowspan="6"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr:hover) > .ncua-table__cell[rowspan="7"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr:hover) > .ncua-table__cell[rowspan="7"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr:hover) > .ncua-table__cell[rowspan="7"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr + tr:hover) > .ncua-table__cell[rowspan="7"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr:hover) > .ncua-table__cell[rowspan="7"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr + tr:hover) > .ncua-table__cell[rowspan="7"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr:hover) > .ncua-table__cell[rowspan="8"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr:hover) > .ncua-table__cell[rowspan="8"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr:hover) > .ncua-table__cell[rowspan="8"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr + tr:hover) > .ncua-table__cell[rowspan="8"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr:hover) > .ncua-table__cell[rowspan="8"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr + tr:hover) > .ncua-table__cell[rowspan="8"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr + tr + tr:hover) > .ncua-table__cell[rowspan="8"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr:hover) > .ncua-table__cell[rowspan="9"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr:hover) > .ncua-table__cell[rowspan="9"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr:hover) > .ncua-table__cell[rowspan="9"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr + tr:hover) > .ncua-table__cell[rowspan="9"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr:hover) > .ncua-table__cell[rowspan="9"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr + tr:hover) > .ncua-table__cell[rowspan="9"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr + tr + tr:hover) > .ncua-table__cell[rowspan="9"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr + tr + tr + tr:hover) > .ncua-table__cell[rowspan="9"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr:hover) > .ncua-table__cell[rowspan="10"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr:hover) > .ncua-table__cell[rowspan="10"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr:hover) > .ncua-table__cell[rowspan="10"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr + tr:hover) > .ncua-table__cell[rowspan="10"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr:hover) > .ncua-table__cell[rowspan="10"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr + tr:hover) > .ncua-table__cell[rowspan="10"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr + tr + tr:hover) > .ncua-table__cell[rowspan="10"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr + tr + tr + tr:hover) > .ncua-table__cell[rowspan="10"], :where(.ncua-table--hoverable) .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr + tr + tr + tr + tr:hover) > .ncua-table__cell[rowspan="10"],
+:where(.ncua-table--hoverable) .ncua-table__body > tr:hover > .ncua-table__cell[rowspan] {
+  --ncua-merge-hovered: 1;
+}
+
+.ncua-table__body > tr:has(+ tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="2"], .ncua-table__body > tr:has(+ tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="3"], .ncua-table__body > tr:has(+ tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="3"], .ncua-table__body > tr:has(+ tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="4"], .ncua-table__body > tr:has(+ tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="4"], .ncua-table__body > tr:has(+ tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="4"], .ncua-table__body > tr:has(+ tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="5"], .ncua-table__body > tr:has(+ tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="5"], .ncua-table__body > tr:has(+ tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="5"], .ncua-table__body > tr:has(+ tr + tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="5"], .ncua-table__body > tr:has(+ tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="6"], .ncua-table__body > tr:has(+ tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="6"], .ncua-table__body > tr:has(+ tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="6"], .ncua-table__body > tr:has(+ tr + tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="6"], .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="6"], .ncua-table__body > tr:has(+ tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="7"], .ncua-table__body > tr:has(+ tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="7"], .ncua-table__body > tr:has(+ tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="7"], .ncua-table__body > tr:has(+ tr + tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="7"], .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="7"], .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="7"], .ncua-table__body > tr:has(+ tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="8"], .ncua-table__body > tr:has(+ tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="8"], .ncua-table__body > tr:has(+ tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="8"], .ncua-table__body > tr:has(+ tr + tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="8"], .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="8"], .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="8"], .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="8"], .ncua-table__body > tr:has(+ tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="9"], .ncua-table__body > tr:has(+ tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="9"], .ncua-table__body > tr:has(+ tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="9"], .ncua-table__body > tr:has(+ tr + tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="9"], .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="9"], .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="9"], .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="9"], .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr + tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="9"], .ncua-table__body > tr:has(+ tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="10"], .ncua-table__body > tr:has(+ tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="10"], .ncua-table__body > tr:has(+ tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="10"], .ncua-table__body > tr:has(+ tr + tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="10"], .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="10"], .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="10"], .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="10"], .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr + tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="10"], .ncua-table__body > tr:has(+ tr + tr + tr + tr + tr + tr + tr + tr + tr.ncua-table__row--selected) > .ncua-table__cell[rowspan="10"],
+.ncua-table__body > tr.ncua-table__row--selected > .ncua-table__cell[rowspan] {
+  --ncua-merge-selected: 1;
+}
+
+:where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="2"]:hover) + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="3"]:hover) + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="3"]:hover) + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="4"]:hover) + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="4"]:hover) + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="4"]:hover) + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="5"]:hover) + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="5"]:hover) + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="5"]:hover) + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="5"]:hover) + tr + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="6"]:hover) + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="6"]:hover) + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="6"]:hover) + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="6"]:hover) + tr + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="6"]:hover) + tr + tr + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="7"]:hover) + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="7"]:hover) + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="7"]:hover) + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="7"]:hover) + tr + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="7"]:hover) + tr + tr + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="7"]:hover) + tr + tr + tr + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="8"]:hover) + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="8"]:hover) + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="8"]:hover) + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="8"]:hover) + tr + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="8"]:hover) + tr + tr + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="8"]:hover) + tr + tr + tr + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="8"]:hover) + tr + tr + tr + tr + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="9"]:hover) + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="9"]:hover) + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="9"]:hover) + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="9"]:hover) + tr + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="9"]:hover) + tr + tr + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="9"]:hover) + tr + tr + tr + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="9"]:hover) + tr + tr + tr + tr + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="9"]:hover) + tr + tr + tr + tr + tr + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="10"]:hover) + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="10"]:hover) + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="10"]:hover) + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="10"]:hover) + tr + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="10"]:hover) + tr + tr + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="10"]:hover) + tr + tr + tr + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="10"]:hover) + tr + tr + tr + tr + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="10"]:hover) + tr + tr + tr + tr + tr + tr + tr + tr, :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="10"]:hover) + tr + tr + tr + tr + tr + tr + tr + tr + tr {
+  background: color-mix(in srgb, var(--gray-50) 40%, transparent);
+}
+
+.ncua-table__body > tr:has(> .ncua-table__cell[rowspan="2"]:last-child) + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="3"]:last-child) + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="3"]:last-child) + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="4"]:last-child) + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="4"]:last-child) + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="4"]:last-child) + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="5"]:last-child) + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="5"]:last-child) + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="5"]:last-child) + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="5"]:last-child) + tr + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="6"]:last-child) + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="6"]:last-child) + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="6"]:last-child) + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="6"]:last-child) + tr + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="6"]:last-child) + tr + tr + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="7"]:last-child) + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="7"]:last-child) + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="7"]:last-child) + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="7"]:last-child) + tr + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="7"]:last-child) + tr + tr + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="7"]:last-child) + tr + tr + tr + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="8"]:last-child) + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="8"]:last-child) + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="8"]:last-child) + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="8"]:last-child) + tr + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="8"]:last-child) + tr + tr + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="8"]:last-child) + tr + tr + tr + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="8"]:last-child) + tr + tr + tr + tr + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="9"]:last-child) + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="9"]:last-child) + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="9"]:last-child) + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="9"]:last-child) + tr + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="9"]:last-child) + tr + tr + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="9"]:last-child) + tr + tr + tr + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="9"]:last-child) + tr + tr + tr + tr + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="9"]:last-child) + tr + tr + tr + tr + tr + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="10"]:last-child) + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="10"]:last-child) + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="10"]:last-child) + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="10"]:last-child) + tr + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="10"]:last-child) + tr + tr + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="10"]:last-child) + tr + tr + tr + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="10"]:last-child) + tr + tr + tr + tr + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="10"]:last-child) + tr + tr + tr + tr + tr + tr + tr + tr > .ncua-table__cell:last-child, .ncua-table__body > tr:has(> .ncua-table__cell[rowspan="10"]:last-child) + tr + tr + tr + tr + tr + tr + tr + tr + tr > .ncua-table__cell:last-child {
+  border-right: 1px solid var(--gray-100);
+}
+
+.ncua-table__body:last-of-type > tr:has(+ tr:last-child) > .ncua-table__cell[rowspan="2"], .ncua-table__body:last-of-type > tr:has(+ tr + tr:last-child) > .ncua-table__cell[rowspan="3"], .ncua-table__body:last-of-type > tr:has(+ tr + tr + tr:last-child) > .ncua-table__cell[rowspan="4"], .ncua-table__body:last-of-type > tr:has(+ tr + tr + tr + tr:last-child) > .ncua-table__cell[rowspan="5"], .ncua-table__body:last-of-type > tr:has(+ tr + tr + tr + tr + tr:last-child) > .ncua-table__cell[rowspan="6"], .ncua-table__body:last-of-type > tr:has(+ tr + tr + tr + tr + tr + tr:last-child) > .ncua-table__cell[rowspan="7"], .ncua-table__body:last-of-type > tr:has(+ tr + tr + tr + tr + tr + tr + tr:last-child) > .ncua-table__cell[rowspan="8"], .ncua-table__body:last-of-type > tr:has(+ tr + tr + tr + tr + tr + tr + tr + tr:last-child) > .ncua-table__cell[rowspan="9"], .ncua-table__body:last-of-type > tr:has(+ tr + tr + tr + tr + tr + tr + tr + tr + tr:last-child) > .ncua-table__cell[rowspan="10"] {
+  border-bottom: none;
+}
+
+.ncua-table__body > tr:has(> [rowspan="2"]:first-child).ncua-table__row--selected + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), .ncua-table__body > tr:has(> [rowspan="3"]:first-child).ncua-table__row--selected + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), .ncua-table__body > tr:has(> [rowspan="3"]:first-child).ncua-table__row--selected + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), .ncua-table__body > tr:has(> [rowspan="4"]:first-child).ncua-table__row--selected + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), .ncua-table__body > tr:has(> [rowspan="4"]:first-child).ncua-table__row--selected + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), .ncua-table__body > tr:has(> [rowspan="4"]:first-child).ncua-table__row--selected + tr + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected + tr + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected + tr + tr + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error) {
+  background: var(--gray-50);
+}
+
+:where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="2"]:first-child):hover:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="2"]:first-child):hover + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="2"]:first-child):has(+ tr:hover):not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="2"]:first-child):has(+ tr:hover) + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="3"]:first-child):hover:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="3"]:first-child):hover + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="3"]:first-child):hover + tr + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="3"]:first-child):has(+ tr:hover):not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="3"]:first-child):has(+ tr:hover) + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="3"]:first-child):has(+ tr:hover) + tr + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="3"]:first-child):has(+ tr + tr:hover):not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="3"]:first-child):has(+ tr + tr:hover) + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="3"]:first-child):has(+ tr + tr:hover) + tr + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child):hover:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child):hover + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child):hover + tr + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child):hover + tr + tr + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child):has(+ tr:hover):not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child):has(+ tr:hover) + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child):has(+ tr:hover) + tr + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child):has(+ tr:hover) + tr + tr + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child):has(+ tr + tr:hover):not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child):has(+ tr + tr:hover) + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child):has(+ tr + tr:hover) + tr + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child):has(+ tr + tr:hover) + tr + tr + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child):has(+ tr + tr + tr:hover):not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child):has(+ tr + tr + tr:hover) + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child):has(+ tr + tr + tr:hover) + tr + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child):has(+ tr + tr + tr:hover) + tr + tr + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child):hover:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child):hover + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child):hover + tr + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child):hover + tr + tr + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child):hover + tr + tr + tr + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child):has(+ tr:hover):not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child):has(+ tr:hover) + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child):has(+ tr:hover) + tr + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child):has(+ tr:hover) + tr + tr + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child):has(+ tr:hover) + tr + tr + tr + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child):has(+ tr + tr:hover):not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child):has(+ tr + tr:hover) + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child):has(+ tr + tr:hover) + tr + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child):has(+ tr + tr:hover) + tr + tr + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child):has(+ tr + tr:hover) + tr + tr + tr + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child):has(+ tr + tr + tr:hover):not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child):has(+ tr + tr + tr:hover) + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child):has(+ tr + tr + tr:hover) + tr + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child):has(+ tr + tr + tr:hover) + tr + tr + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child):has(+ tr + tr + tr:hover) + tr + tr + tr + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child):has(+ tr + tr + tr + tr:hover):not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child):has(+ tr + tr + tr + tr:hover) + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child):has(+ tr + tr + tr + tr:hover) + tr + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child):has(+ tr + tr + tr + tr:hover) + tr + tr + tr:not(.ncua-table__row--selected), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child):has(+ tr + tr + tr + tr:hover) + tr + tr + tr + tr:not(.ncua-table__row--selected) {
+  background: color-mix(in srgb, var(--gray-50) 40%, transparent);
+}
+
+:where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="2"]:first-child).ncua-table__row--selected:hover:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="2"]:first-child).ncua-table__row--selected:hover + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="2"]:first-child).ncua-table__row--selected:has(+ tr:hover):not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="2"]:first-child).ncua-table__row--selected:has(+ tr:hover) + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="3"]:first-child).ncua-table__row--selected:hover:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="3"]:first-child).ncua-table__row--selected:hover + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="3"]:first-child).ncua-table__row--selected:hover + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="3"]:first-child).ncua-table__row--selected:has(+ tr:hover):not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="3"]:first-child).ncua-table__row--selected:has(+ tr:hover) + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="3"]:first-child).ncua-table__row--selected:has(+ tr:hover) + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="3"]:first-child).ncua-table__row--selected:has(+ tr + tr:hover):not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="3"]:first-child).ncua-table__row--selected:has(+ tr + tr:hover) + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="3"]:first-child).ncua-table__row--selected:has(+ tr + tr:hover) + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child).ncua-table__row--selected:hover:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child).ncua-table__row--selected:hover + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child).ncua-table__row--selected:hover + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child).ncua-table__row--selected:hover + tr + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child).ncua-table__row--selected:has(+ tr:hover):not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child).ncua-table__row--selected:has(+ tr:hover) + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child).ncua-table__row--selected:has(+ tr:hover) + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child).ncua-table__row--selected:has(+ tr:hover) + tr + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child).ncua-table__row--selected:has(+ tr + tr:hover):not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child).ncua-table__row--selected:has(+ tr + tr:hover) + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child).ncua-table__row--selected:has(+ tr + tr:hover) + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child).ncua-table__row--selected:has(+ tr + tr:hover) + tr + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child).ncua-table__row--selected:has(+ tr + tr + tr:hover):not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child).ncua-table__row--selected:has(+ tr + tr + tr:hover) + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child).ncua-table__row--selected:has(+ tr + tr + tr:hover) + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="4"]:first-child).ncua-table__row--selected:has(+ tr + tr + tr:hover) + tr + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected:hover:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected:hover + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected:hover + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected:hover + tr + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected:hover + tr + tr + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected:has(+ tr:hover):not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected:has(+ tr:hover) + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected:has(+ tr:hover) + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected:has(+ tr:hover) + tr + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected:has(+ tr:hover) + tr + tr + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected:has(+ tr + tr:hover):not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected:has(+ tr + tr:hover) + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected:has(+ tr + tr:hover) + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected:has(+ tr + tr:hover) + tr + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected:has(+ tr + tr:hover) + tr + tr + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected:has(+ tr + tr + tr:hover):not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected:has(+ tr + tr + tr:hover) + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected:has(+ tr + tr + tr:hover) + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected:has(+ tr + tr + tr:hover) + tr + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected:has(+ tr + tr + tr:hover) + tr + tr + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected:has(+ tr + tr + tr + tr:hover):not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected:has(+ tr + tr + tr + tr:hover) + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected:has(+ tr + tr + tr + tr:hover) + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected:has(+ tr + tr + tr + tr:hover) + tr + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error), :where(.ncua-table--hoverable) .ncua-table__body > tr:has(> [rowspan="5"]:first-child).ncua-table__row--selected:has(+ tr + tr + tr + tr:hover) + tr + tr + tr + tr:not(.ncua-table__row--selected.ncua-table__row--warning):not(.ncua-table__row--selected.ncua-table__row--error) {
+  background: color-mix(in srgb, var(--gray-200) 10%, var(--gray-50));
+}
+
 .ncua-table-dnd-preview {
   position: fixed;
   top: -9999px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.8.28-alpha.2",
+  "version": "1.8.28-alpha.4",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",