@aquera/nile-elements 1.7.3 → 1.7.5

package/dist/src/nile-detail/nile-detail.js

@@ -2,10 +2,18 @@ import { __decorate } from "tslib";
 import { html, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { styles } from './nile-detail.css';
 import NileElement from '../internal/nile-element';
 import { watch } from '../internal/watch';
 import { animateShow, animateHide, showDetail, hideDetail, handleSummaryClick, handleSummaryKeyDown, } from './nile-detail.utils';
+import '../nile-checkbox/index';
+import '../nile-input/index';
+import '../nile-link/index';
+import '../nile-icon/index';
+import '../nile-lite-tooltip/index';
+import { VirtualizerController } from '@tanstack/lit-virtual';
+const IS_BROWSER = typeof window !== 'undefined';
 let NileDetail = class NileDetail extends NileElement {
     constructor() {
         super(...arguments);
@@ -14,12 +22,527 @@ let NileDetail = class NileDetail extends NileElement {
         this.description = '';
         this.expandIconPlacement = 'right';
         this.disabled = false;
+        this.variant = 'default';
+        this.items = [];
+        this.selected = [];
+        this.allowHtmlLabel = false;
+        this.disableLocalSearch = false;
+        this.pageSize = 200;
+        this.placeholderLabel = 'Loading…';
+        this.searchPlaceholder = 'Search...';
+        this.itemsLabel = 'attributes';
+        this.restoreLabel = 'Restore';
+        this.clearLabel = 'Clear';
+        this.gridRows = 6;
+        this.gridColumns = 3;
+        this.minColumnWidth = '220px';
+        this.laneHeight = 32;
+        this.orientation = 'horizontal';
+        this.maxHeight = '320px';
+        this.matrixColumns = 20;
+        this.virtualize = false;
+        this.virtualizeThreshold = 60;
+        this.overscan = 4;
         this._detailOpen = false;
+        this._searchTerm = '';
+        this._selectedSet = new Set();
+        this._restoreDefaults = null;
+        this._gridResizeObserver = null;
+        this._virtCtrl = null;
+        this._rowVirtCtrl = null;
+        this._colVirtCtrl = null;
+        this._pageCache = new Map();
+        this._pendingPages = new Set();
+    }
+    get _isInfiniteMode() {
+        return (this.variant === 'selection' &&
+            typeof this.fetchPage === 'function' &&
+            typeof this.totalCount === 'number' &&
+            this.orientation !== 'both');
+    }
+    _effectiveTotalCount() {
+        if (this._isInfiniteMode)
+            return this.totalCount ?? 0;
+        return this._filteredItems.length;
+    }
+    _getItemAt(index) {
+        if (!this._isInfiniteMode)
+            return this._filteredItems[index];
+        const pageSize = Math.max(1, this.pageSize);
+        const pageIndex = Math.floor(index / pageSize);
+        const page = this._pageCache.get(pageIndex);
+        if (!page)
+            return undefined;
+        return page[index - pageIndex * pageSize];
+    }
+    _scheduleFetchForRange(start, end) {
+        if (!this._isInfiniteMode || !this.fetchPage)
+            return;
+        const pageSize = Math.max(1, this.pageSize);
+        const total = this.totalCount ?? 0;
+        if (total <= 0)
+            return;
+        const firstPage = Math.floor(start / pageSize);
+        const lastPage = Math.floor(Math.min(end, total - 1) / pageSize);
+        for (let p = firstPage; p <= lastPage; p++) {
+            if (this._pageCache.has(p) || this._pendingPages.has(p))
+                continue;
+            this._loadPage(p);
+        }
+    }
+    async _loadPage(pageIndex) {
+        if (!this.fetchPage)
+            return;
+        const pageSize = Math.max(1, this.pageSize);
+        const offset = pageIndex * pageSize;
+        const total = this.totalCount ?? 0;
+        const limit = Math.min(pageSize, Math.max(0, total - offset));
+        if (limit <= 0)
+            return;
+        this._pendingPages.add(pageIndex);
+        try {
+            const rows = await this.fetchPage(offset, limit);
+            this._pageCache.set(pageIndex, Array.isArray(rows) ? rows : []);
+            this.dispatchEvent(new CustomEvent('nile-page-load', {
+                detail: { pageIndex, offset, limit, rows: this._pageCache.get(pageIndex) },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        catch (err) {
+            this.dispatchEvent(new CustomEvent('nile-page-error', {
+                detail: { pageIndex, offset, limit, error: err },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        finally {
+            this._pendingPages.delete(pageIndex);
+            this.requestUpdate();
+        }
+    }
+    /** Public: clear the page cache (use after a query change to refetch). */
+    resetPages() {
+        this._pageCache = new Map();
+        this._pendingPages = new Set();
+        this.requestUpdate();
+    }
+    get _isVirtualized() {
+        if (!IS_BROWSER)
+            return false;
+        if (this._isInfiniteMode)
+            return true;
+        return this.variant === 'selection'
+            && (this.virtualize || this.items.length > this.virtualizeThreshold);
+    }
+    get _columnWidthPx() {
+        const parsed = parseInt(this.minColumnWidth, 10);
+        return Number.isFinite(parsed) && parsed > 0 ? parsed : 220;
     }
     firstUpdated() {
         this._detailOpen = this.open;
         this.body.hidden = !this.open;
         this.body.style.height = this.open ? 'auto' : '0';
+        this._syncSelectedFromProperty();
+        if (this._restoreDefaults === null) {
+            this._restoreDefaults = [...this._selectedSet];
+        }
+        this._setupGridResizeObserver();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._gridResizeObserver?.disconnect();
+        this._gridResizeObserver = null;
+    }
+    updated(_changed) {
+        if (this.variant === 'selection') {
+            this._setupGridResizeObserver();
+            this._syncVirtualizer();
+            this._scheduleTooltipOverflowCheck();
+        }
+    }
+    _syncVirtualizer() {
+        if (!IS_BROWSER)
+            return;
+        if (!this._isVirtualized) {
+            this._virtCtrl = null;
+            this._rowVirtCtrl = null;
+            this._colVirtCtrl = null;
+            return;
+        }
+        const grid = this.shadowRoot?.querySelector('.detail__selection-grid');
+        if (!grid)
+            return;
+        if (this.orientation === 'both') {
+            this._virtCtrl = null;
+            this._syncBothVirtualizers();
+            return;
+        }
+        // Reset 2-axis controllers if we switched away from 'both'.
+        this._rowVirtCtrl = null;
+        this._colVirtCtrl = null;
+        const count = this._effectiveTotalCount();
+        const isVertical = this.orientation === 'vertical';
+        const lanes = Math.max(1, isVertical ? this.gridColumns : this.gridRows);
+        const itemSize = isVertical ? this.laneHeight : this._columnWidthPx;
+        if (!this._virtCtrl) {
+            this._virtCtrl = new VirtualizerController(this, {
+                count,
+                getScrollElement: () => this.shadowRoot?.querySelector('.detail__selection-grid'),
+                estimateSize: () => itemSize,
+                horizontal: !isVertical,
+                lanes,
+                overscan: this.overscan,
+            });
+            return;
+        }
+        const v = this._virtCtrl.getVirtualizer();
+        const prev = v.options;
+        const orientationChanged = !!prev.horizontal !== !isVertical;
+        if (prev.count !== count ||
+            prev.lanes !== lanes ||
+            prev.overscan !== this.overscan ||
+            orientationChanged) {
+            v.setOptions({
+                ...prev,
+                count,
+                lanes,
+                overscan: this.overscan,
+                horizontal: !isVertical,
+                estimateSize: () => itemSize,
+            });
+            v.measure();
+        }
+    }
+    _syncBothVirtualizers() {
+        const totalItems = this._filteredItems.length;
+        const cols = Math.max(1, this.matrixColumns);
+        const rows = Math.max(1, Math.ceil(totalItems / cols));
+        const columnWidth = this._columnWidthPx;
+        const rowHeight = this.laneHeight;
+        const getScrollEl = () => this.shadowRoot?.querySelector('.detail__selection-grid');
+        if (!this._rowVirtCtrl) {
+            this._rowVirtCtrl = new VirtualizerController(this, {
+                count: rows,
+                getScrollElement: getScrollEl,
+                estimateSize: () => rowHeight,
+                horizontal: false,
+                overscan: this.overscan,
+            });
+        }
+        else {
+            const rv = this._rowVirtCtrl.getVirtualizer();
+            const prev = rv.options;
+            if (prev.count !== rows || prev.overscan !== this.overscan) {
+                rv.setOptions({
+                    ...prev,
+                    count: rows,
+                    overscan: this.overscan,
+                    estimateSize: () => rowHeight,
+                });
+                rv.measure();
+            }
+        }
+        if (!this._colVirtCtrl) {
+            this._colVirtCtrl = new VirtualizerController(this, {
+                count: cols,
+                getScrollElement: getScrollEl,
+                estimateSize: () => columnWidth,
+                horizontal: true,
+                overscan: this.overscan,
+            });
+        }
+        else {
+            const cv = this._colVirtCtrl.getVirtualizer();
+            const prev = cv.options;
+            if (prev.count !== cols || prev.overscan !== this.overscan) {
+                cv.setOptions({
+                    ...prev,
+                    count: cols,
+                    overscan: this.overscan,
+                    estimateSize: () => columnWidth,
+                });
+                cv.measure();
+            }
+        }
+    }
+    _setupGridResizeObserver() {
+        if (this.variant !== 'selection')
+            return;
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const grid = this.shadowRoot?.querySelector('.detail__selection-grid');
+        if (!grid)
+            return;
+        if (this._gridResizeObserver)
+            return;
+        this._gridResizeObserver = new ResizeObserver(() => this._scheduleTooltipOverflowCheck());
+        this._gridResizeObserver.observe(grid);
+    }
+    _scheduleTooltipOverflowCheck() {
+        if (typeof requestAnimationFrame === 'undefined')
+            return;
+        requestAnimationFrame(() => this._updateTooltipOverflowStates());
+    }
+    async _updateTooltipOverflowStates() {
+        const tooltips = this.shadowRoot?.querySelectorAll('.detail__selection-tooltip');
+        if (!tooltips)
+            return;
+        for (const tip of tooltips) {
+            const cb = tip.querySelector('nile-checkbox');
+            if (!cb)
+                continue;
+            if (cb.updateComplete)
+                await cb.updateComplete;
+            const labelEl = cb.shadowRoot?.querySelector('[part="label"]');
+            const overflowing = !!labelEl && labelEl.scrollWidth > labelEl.clientWidth + 1;
+            if (overflowing)
+                tip.removeAttribute('disabled');
+            else
+                tip.setAttribute('disabled', '');
+        }
+    }
+    _onSelectedPropertyChange() {
+        this._syncSelectedFromProperty();
+    }
+    _onConfigChange() {
+        this._applyConfig();
+    }
+    _applyConfig() {
+        const c = this.config;
+        if (!c)
+            return;
+        if (c.variant !== undefined)
+            this.variant = c.variant;
+        if (c.heading !== undefined)
+            this.heading = c.heading;
+        if (c.description !== undefined)
+            this.description = c.description;
+        if (c.itemsLabel !== undefined)
+            this.itemsLabel = c.itemsLabel;
+        if (c.open !== undefined)
+            this.open = c.open;
+        if (c.disabled !== undefined)
+            this.disabled = c.disabled;
+        if (c.items !== undefined)
+            this.items = c.items;
+        if (c.selected !== undefined)
+            this.selected = c.selected;
+        if (c.renderItemConfig !== undefined)
+            this.renderItemConfig = c.renderItemConfig;
+        if (c.allowHtmlLabel !== undefined)
+            this.allowHtmlLabel = c.allowHtmlLabel;
+        if (c.layout) {
+            const l = c.layout;
+            if (l.orientation !== undefined)
+                this.orientation = l.orientation;
+            if (l.gridRows !== undefined)
+                this.gridRows = l.gridRows;
+            if (l.gridColumns !== undefined)
+                this.gridColumns = l.gridColumns;
+            if (l.matrixColumns !== undefined)
+                this.matrixColumns = l.matrixColumns;
+            if (l.minColumnWidth !== undefined)
+                this.minColumnWidth = l.minColumnWidth;
+            if (l.laneHeight !== undefined)
+                this.laneHeight = l.laneHeight;
+            if (l.maxHeight !== undefined)
+                this.maxHeight = l.maxHeight;
+            if (l.expandIconPlacement !== undefined)
+                this.expandIconPlacement = l.expandIconPlacement;
+        }
+        if (c.search) {
+            if (c.search.placeholder !== undefined)
+                this.searchPlaceholder = c.search.placeholder;
+            if (c.search.disableLocal !== undefined)
+                this.disableLocalSearch = c.search.disableLocal;
+        }
+        if (c.virtualization) {
+            if (c.virtualization.enabled !== undefined)
+                this.virtualize = c.virtualization.enabled;
+            if (c.virtualization.threshold !== undefined)
+                this.virtualizeThreshold = c.virtualization.threshold;
+            if (c.virtualization.overscan !== undefined)
+                this.overscan = c.virtualization.overscan;
+        }
+        if (c.pagination) {
+            if (c.pagination.totalCount !== undefined)
+                this.totalCount = c.pagination.totalCount;
+            if (c.pagination.pageSize !== undefined)
+                this.pageSize = c.pagination.pageSize;
+            if (c.pagination.fetchPage !== undefined)
+                this.fetchPage = c.pagination.fetchPage;
+            if (c.pagination.placeholderLabel !== undefined)
+                this.placeholderLabel = c.pagination.placeholderLabel;
+        }
+        if (c.labels) {
+            if (c.labels.restore !== undefined)
+                this.restoreLabel = c.labels.restore;
+            if (c.labels.clear !== undefined)
+                this.clearLabel = c.labels.clear;
+        }
+    }
+    _syncSelectedFromProperty() {
+        this._selectedSet = new Set(this.selected || []);
+    }
+    _getItemValue(item) {
+        const rc = this.renderItemConfig;
+        if (rc?.getValue)
+            return String(rc.getValue(item));
+        if (typeof item === 'string')
+            return item;
+        return String(item.value ?? '');
+    }
+    _getItemLabel(item) {
+        const rc = this.renderItemConfig;
+        if (rc?.getDisplayText)
+            return rc.getDisplayText(item);
+        if (typeof item === 'string')
+            return item;
+        return item.label ?? this._getItemValue(item);
+    }
+    _getItemSearchText(item) {
+        const rc = this.renderItemConfig;
+        if (rc?.getSearchText)
+            return rc.getSearchText(item);
+        return this._getItemLabel(item);
+    }
+    _getItemDescription(item) {
+        const rc = this.renderItemConfig;
+        if (rc?.getDescription)
+            return rc.getDescription(item) ?? '';
+        if (typeof item === 'string')
+            return '';
+        return item.description ?? '';
+    }
+    _getItemPrefix(item) {
+        const rc = this.renderItemConfig;
+        if (rc?.getPrefix)
+            return rc.getPrefix(item) ?? '';
+        if (typeof item === 'string')
+            return '';
+        return item.prefix ?? '';
+    }
+    _getItemSuffix(item) {
+        const rc = this.renderItemConfig;
+        if (rc?.getSuffix)
+            return rc.getSuffix(item) ?? '';
+        if (typeof item === 'string')
+            return '';
+        return item.suffix ?? '';
+    }
+    _getItemDisabled(item) {
+        const rc = this.renderItemConfig;
+        if (rc?.getDisabled)
+            return !!rc.getDisabled(item);
+        if (typeof item === 'string')
+            return false;
+        return !!item.disabled;
+    }
+    _getItemClassName(item) {
+        const rc = this.renderItemConfig;
+        if (rc?.getClassName)
+            return rc.getClassName(item) ?? '';
+        if (typeof item === 'string')
+            return '';
+        return item.className ?? '';
+    }
+    get _filteredItems() {
+        if (this.disableLocalSearch)
+            return this.items;
+        const q = this._searchTerm.trim().toLowerCase();
+        if (!q)
+            return this.items;
+        return this.items.filter(item => this._getItemSearchText(item).toLowerCase().includes(q));
+    }
+    _selectableValues() {
+        const source = this._isInfiniteMode
+            ? Array.from(this._pageCache.values()).flat()
+            : this.items;
+        return source
+            .filter(i => !this._getItemDisabled(i))
+            .map(i => this._getItemValue(i));
+    }
+    get _allChecked() {
+        const selectable = this._selectableValues();
+        if (selectable.length === 0)
+            return false;
+        return selectable.every(v => this._selectedSet.has(v));
+    }
+    get _indeterminate() {
+        const selectable = this._selectableValues();
+        const sel = selectable.filter(v => this._selectedSet.has(v)).length;
+        return sel > 0 && sel < selectable.length;
+    }
+    get _countLabel() {
+        const total = this._isInfiniteMode ? (this.totalCount ?? 0) : this.items.length;
+        return `${this._selectedSet.size} of ${total} ${this.itemsLabel} selected`;
+    }
+    _emitSelectionChange() {
+        this.selected = [...this._selectedSet];
+        this.dispatchEvent(new CustomEvent('nile-change', {
+            detail: { selected: [...this._selectedSet] },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _onItemChange(value, disabled, event) {
+        if (disabled) {
+            event.preventDefault();
+            return;
+        }
+        const target = event.target;
+        const next = new Set(this._selectedSet);
+        if (target.checked)
+            next.add(value);
+        else
+            next.delete(value);
+        this._selectedSet = next;
+        this._emitSelectionChange();
+    }
+    _onSelectAllChange(event) {
+        const target = event.target;
+        const selectable = this._selectableValues();
+        const next = new Set(this._selectedSet);
+        if (target.checked)
+            selectable.forEach(v => next.add(v));
+        else
+            selectable.forEach(v => next.delete(v));
+        this._selectedSet = next;
+        this._emitSelectionChange();
+    }
+    _emitSearch(value) {
+        this.dispatchEvent(new CustomEvent('nile-search', {
+            detail: { value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _onSearchInput(event) {
+        const target = event.target;
+        const value = target.value ?? '';
+        this._searchTerm = value;
+        if (this.disableLocalSearch)
+            this._emitSearch(value);
+    }
+    _onSearchClear() {
+        this._searchTerm = '';
+        if (this.disableLocalSearch)
+            this._emitSearch('');
+    }
+    _onRestore(event) {
+        event.preventDefault();
+        const source = this._restoreDefaults ?? this._selectableValues();
+        this._selectedSet = new Set(source);
+        this._emitSelectionChange();
+    }
+    _onClear(event) {
+        event.preventDefault();
+        this._selectedSet = new Set();
+        this._emitSelectionChange();
+    }
+    _stopHeaderToggle(event) {
+        event.stopPropagation();
     }
     _handleSummaryClick(event) {
         event.preventDefault();
@@ -47,7 +570,214 @@ let NileDetail = class NileDetail extends NileElement {
     get _summaryLabel() {
         return [this.heading, this.description].filter(Boolean).join(', ');
     }
+    _renderSelectionLabel() {
+        return html `
+      <div part="selection-label" class="detail__selection-label">
+        <nile-checkbox
+          part="select-all"
+          class="detail__select-all"
+          ?checked=${this._allChecked}
+          ?indeterminate=${this._indeterminate}
+          aria-label=${`Select all ${this.heading || this.itemsLabel}`}
+          @click=${this._stopHeaderToggle}
+          @nile-change=${this._onSelectAllChange}
+        ></nile-checkbox>
+        <div class="detail__selection-title">
+          <span part="label-text" class="detail__heading-text">${this.heading}</span>
+          <span part="selection-count" class="detail__selection-count">${this._countLabel}</span>
+        </div>
+      </div>
+    `;
+    }
+    _renderSelectionBody() {
+        const virtualized = this._isVirtualized;
+        const isVertical = this.orientation === 'vertical';
+        const isBoth = this.orientation === 'both';
+        const laneHeightPx = this.laneHeight;
+        const columnWidth = this._columnWidthPx;
+        let gridStyle = '';
+        if (virtualized) {
+            if (isBoth) {
+                gridStyle = `max-height: ${this.maxHeight}; height: ${this.maxHeight};`;
+            }
+            else if (isVertical) {
+                gridStyle = `max-height: ${this.maxHeight}; height: ${this.maxHeight};`;
+            }
+            else {
+                const lanes = Math.max(1, this.gridRows);
+                gridStyle = `height: ${lanes * laneHeightPx}px;`;
+            }
+        }
+        else if (isVertical) {
+            const cols = Math.max(1, this.gridColumns);
+            gridStyle = `grid-template-columns: repeat(${cols}, minmax(0, 1fr)); grid-auto-flow: row; max-height: ${this.maxHeight}; overflow-y: auto; overflow-x: hidden;`;
+        }
+        else {
+            const lanes = Math.max(1, this.gridRows);
+            gridStyle = `grid-template-rows: repeat(${lanes}, auto); grid-auto-columns: minmax(${this.minColumnWidth}, 1fr);`;
+        }
+        return html `
+      <div part="selection-toolbar" class="detail__selection-toolbar">
+        <nile-input
+          part="search"
+          class="detail__selection-search"
+          placeholder=${this.searchPlaceholder}
+          clearable
+          .value=${this._searchTerm}
+          @nile-input=${this._onSearchInput}
+          @nile-clear=${this._onSearchClear}
+        >
+          <nile-icon slot="prefix" name="search" library="system"></nile-icon>
+        </nile-input>
+        <div part="selection-actions" class="detail__selection-actions">
+          <nile-link href="#" variant="subtle" @click=${this._onRestore}>${this.restoreLabel}</nile-link>
+          <nile-link href="#" variant="subtle" @click=${this._onClear}>${this.clearLabel}</nile-link>
+        </div>
+      </div>
+      <div
+        part="selection-grid"
+        class=${classMap({
+            'detail__selection-grid': true,
+            'detail__selection-grid--virtual': virtualized,
+            'detail__selection-grid--vertical': isVertical,
+            'detail__selection-grid--both': isBoth,
+        })}
+        style=${gridStyle}
+      >
+        ${virtualized
+            ? (isBoth
+                ? this._renderBothVirtualGrid(laneHeightPx, columnWidth)
+                : this._renderVirtualGrid(laneHeightPx, columnWidth, isVertical))
+            : this._renderStaticGrid()}
+      </div>
+    `;
+    }
+    _renderItemContent(item) {
+        const label = this._getItemLabel(item);
+        const description = this._getItemDescription(item);
+        const prefix = this._getItemPrefix(item);
+        const suffix = this._getItemSuffix(item);
+        const allowHtml = this.allowHtmlLabel;
+        return html `
+      ${prefix
+            ? html `<span class="detail__selection-prefix" part="item-prefix">${allowHtml ? unsafeHTML(prefix) : prefix}</span>`
+            : ''}
+      <span class="detail__selection-text" part="item-text">
+        <span class="detail__selection-item-label" part="item-label">${allowHtml ? unsafeHTML(label) : label}</span>
+        ${description
+            ? html `<span class="detail__selection-desc" part="item-description">${allowHtml ? unsafeHTML(description) : description}</span>`
+            : ''}
+      </span>
+      ${suffix
+            ? html `<span class="detail__selection-suffix" part="item-suffix">${allowHtml ? unsafeHTML(suffix) : suffix}</span>`
+            : ''}
+    `;
+    }
+    _renderItemTooltip(item, opts = {}) {
+        const value = this._getItemValue(item);
+        const label = this._getItemLabel(item);
+        const description = this._getItemDescription(item);
+        const isDisabled = this._getItemDisabled(item);
+        const className = this._getItemClassName(item);
+        const tooltipContent = description ? `${label} — ${description}` : label;
+        const tooltipClass = `detail__selection-tooltip${opts.extraClasses ? ' ' + opts.extraClasses : ''}`;
+        const checkboxClass = classMap({
+            'detail__selection-checkbox': true,
+            'detail__selection-checkbox--disabled': isDisabled,
+            [className]: !!className,
+        });
+        return html `
+      <nile-lite-tooltip
+        class=${tooltipClass}
+        content=${tooltipContent}
+        size="small"
+        disabled
+        style=${opts.positionStyle ?? nothing}
+      >
+        <nile-checkbox
+          class=${checkboxClass}
+          ?checked=${this._selectedSet.has(value)}
+          ?disabled=${isDisabled}
+          @nile-change=${(e) => this._onItemChange(value, isDisabled, e)}
+        >${this._renderItemContent(item)}</nile-checkbox>
+      </nile-lite-tooltip>
+    `;
+    }
+    _renderStaticGrid() {
+        return html `${this._filteredItems.map(item => this._renderItemTooltip(item))}`;
+    }
+    _renderBothVirtualGrid(_laneHeightPx, _columnWidthPx) {
+        const rowV = this._rowVirtCtrl?.getVirtualizer();
+        const colV = this._colVirtCtrl?.getVirtualizer();
+        const rowTotal = rowV?.getTotalSize() ?? 0;
+        const colTotal = colV?.getTotalSize() ?? 0;
+        const rowItems = rowV?.getVirtualItems() ?? [];
+        const colItems = colV?.getVirtualItems() ?? [];
+        const cols = Math.max(1, this.matrixColumns);
+        const total = this._filteredItems.length;
+        return html `
+      <div
+        class="detail__selection-track"
+        style="width: ${colTotal}px; height: ${rowTotal}px; position: relative;"
+      >
+        ${rowItems.flatMap(rvi => colItems.map(cvi => {
+            const idx = rvi.index * cols + cvi.index;
+            if (idx >= total)
+                return null;
+            const item = this._filteredItems[idx];
+            if (item === undefined)
+                return null;
+            const positionStyle = `position: absolute; top: ${rvi.start}px; left: ${cvi.start}px; width: ${cvi.size}px; height: ${rvi.size}px;`;
+            return this._renderItemTooltip(item, {
+                positionStyle,
+                extraClasses: 'detail__selection-tooltip--virtual',
+            });
+        }))}
+      </div>
+    `;
+    }
+    _renderVirtualGrid(laneHeightPx, _columnWidthPx, isVertical) {
+        const v = this._virtCtrl?.getVirtualizer();
+        const totalSize = v?.getTotalSize() ?? 0;
+        const virtualItems = v?.getVirtualItems() ?? [];
+        const lanes = Math.max(1, isVertical ? this.gridColumns : this.gridRows);
+        if (this._isInfiniteMode && virtualItems.length > 0) {
+            const first = virtualItems[0].index;
+            const last = virtualItems[virtualItems.length - 1].index;
+            this._scheduleFetchForRange(first, last);
+        }
+        const trackStyle = isVertical
+            ? `width: 100%; height: ${totalSize}px; position: relative;`
+            : `width: ${totalSize}px; height: 100%; position: relative;`;
+        return html `
+      <div class="detail__selection-track" style=${trackStyle}>
+        ${virtualItems.map(vi => {
+            const laneIdx = vi.lane ?? 0;
+            const positionStyle = isVertical
+                ? `position: absolute; top: ${vi.start}px; left: calc(${laneIdx} * (100% / ${lanes})); width: calc(100% / ${lanes}); height: ${vi.size}px;`
+                : `position: absolute; top: ${laneIdx * laneHeightPx}px; left: ${vi.start}px; width: ${vi.size}px; height: ${laneHeightPx}px;`;
+            const item = this._getItemAt(vi.index);
+            if (item === undefined) {
+                return this._renderPlaceholder(positionStyle);
+            }
+            return this._renderItemTooltip(item, {
+                positionStyle,
+                extraClasses: 'detail__selection-tooltip--virtual',
+            });
+        })}
+      </div>
+    `;
+    }
+    _renderPlaceholder(positionStyle) {
+        return html `
+      <div class="detail__selection-placeholder" style=${positionStyle} part="item-placeholder">
+        <div class="detail__selection-placeholder-bar"></div>
+        <span class="detail__selection-placeholder-label">${this.placeholderLabel}</span>
+      </div>
+    `;
+    }
     render() {
+        const isSelection = this.variant === 'selection';
         return html `
       <details
         part="base"
@@ -56,6 +786,7 @@ let NileDetail = class NileDetail extends NileElement {
             'detail': true,
             'detail--open': this.open,
             'detail--disabled': this.disabled,
+            'detail--selection': isSelection,
         })}
       >
         <summary
@@ -73,10 +804,14 @@ let NileDetail = class NileDetail extends NileElement {
           @keydown=${this._handleSummaryKeyDown}
         >
           <slot name="label" part="label" class="detail__label">
-            <span part="label-text" class="detail__heading-text">${this.heading}</span>
-            ${this.description
-            ? html `<span part="description" class="detail__description">${this.description}</span>`
-            : ''}
+            ${isSelection
+            ? this._renderSelectionLabel()
+            : html `
+                  <span part="label-text" class="detail__heading-text">${this.heading}</span>
+                  ${this.description
+                ? html `<span part="description" class="detail__description">${this.description}</span>`
+                : ''}
+                `}
           </slot>
 
           <slot name="header-actions" part="header-actions" class="detail__header-actions"></slot>
@@ -98,6 +833,9 @@ let NileDetail = class NileDetail extends NileElement {
         </summary>
 
         <div part="content" class="detail__body">
+          ${isSelection
+            ? html `<div part="selection-content" class="detail__selection-content">${this._renderSelectionBody()}</div>`
+            : ''}
           <slot id="content" class="detail__content"></slot>
         </div>
       </details>
@@ -129,9 +867,96 @@ __decorate([
 __decorate([
     property({ attribute: true, type: Boolean, reflect: true })
 ], NileDetail.prototype, "disabled", void 0);
+__decorate([
+    property({ attribute: true, type: String, reflect: true })
+], NileDetail.prototype, "variant", void 0);
+__decorate([
+    property({ attribute: false, type: Array })
+], NileDetail.prototype, "items", void 0);
+__decorate([
+    property({ attribute: false, type: Array })
+], NileDetail.prototype, "selected", void 0);
+__decorate([
+    property({ attribute: false })
+], NileDetail.prototype, "renderItemConfig", void 0);
+__decorate([
+    property({ attribute: 'allow-html-label', type: Boolean })
+], NileDetail.prototype, "allowHtmlLabel", void 0);
+__decorate([
+    property({ attribute: 'disable-local-search', type: Boolean })
+], NileDetail.prototype, "disableLocalSearch", void 0);
+__decorate([
+    property({ attribute: 'total-count', type: Number })
+], NileDetail.prototype, "totalCount", void 0);
+__decorate([
+    property({ attribute: 'page-size', type: Number })
+], NileDetail.prototype, "pageSize", void 0);
+__decorate([
+    property({ attribute: false })
+], NileDetail.prototype, "fetchPage", void 0);
+__decorate([
+    property({ attribute: 'placeholder-label', type: String })
+], NileDetail.prototype, "placeholderLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], NileDetail.prototype, "config", void 0);
+__decorate([
+    property({ attribute: 'search-placeholder', type: String })
+], NileDetail.prototype, "searchPlaceholder", void 0);
+__decorate([
+    property({ attribute: 'items-label', type: String })
+], NileDetail.prototype, "itemsLabel", void 0);
+__decorate([
+    property({ attribute: 'restore-label', type: String })
+], NileDetail.prototype, "restoreLabel", void 0);
+__decorate([
+    property({ attribute: 'clear-label', type: String })
+], NileDetail.prototype, "clearLabel", void 0);
+__decorate([
+    property({ attribute: 'grid-rows', type: Number })
+], NileDetail.prototype, "gridRows", void 0);
+__decorate([
+    property({ attribute: 'grid-columns', type: Number })
+], NileDetail.prototype, "gridColumns", void 0);
+__decorate([
+    property({ attribute: 'min-column-width', type: String })
+], NileDetail.prototype, "minColumnWidth", void 0);
+__decorate([
+    property({ attribute: 'lane-height', type: Number })
+], NileDetail.prototype, "laneHeight", void 0);
+__decorate([
+    property({ attribute: true, type: String, reflect: true })
+], NileDetail.prototype, "orientation", void 0);
+__decorate([
+    property({ attribute: 'max-height', type: String })
+], NileDetail.prototype, "maxHeight", void 0);
+__decorate([
+    property({ attribute: 'matrix-columns', type: Number })
+], NileDetail.prototype, "matrixColumns", void 0);
+__decorate([
+    property({ attribute: true, type: Boolean })
+], NileDetail.prototype, "virtualize", void 0);
+__decorate([
+    property({ attribute: 'virtualize-threshold', type: Number })
+], NileDetail.prototype, "virtualizeThreshold", void 0);
+__decorate([
+    property({ attribute: 'overscan', type: Number })
+], NileDetail.prototype, "overscan", void 0);
 __decorate([
     state()
 ], NileDetail.prototype, "_detailOpen", void 0);
+__decorate([
+    state()
+], NileDetail.prototype, "_searchTerm", void 0);
+__decorate([
+    state()
+], NileDetail.prototype, "_selectedSet", void 0);
+__decorate([
+    watch('selected', { waitUntilFirstUpdate: false })
+], NileDetail.prototype, "_onSelectedPropertyChange", null);
+__decorate([
+    watch('config', { waitUntilFirstUpdate: false })
+], NileDetail.prototype, "_onConfigChange", null);
 __decorate([
     watch('open', { waitUntilFirstUpdate: true })
 ], NileDetail.prototype, "handleOpenChange", null);