@ornery/ui-grid-vanilla 5.0.2 → 5.0.3

package/dist/browser/ui-grid-element.js

@@ -1494,6 +1494,11 @@ function isGroupingEnabled(options) {
 function canExpandRows(options) {
   return options.enableExpandable === true && !!options.expandableRowTemplate;
 }
+function getGroupingValue(row, column, field) {
+  if (column?.groupingValue) return column.groupingValue(row.entity);
+  if (column?.valueGetter || column?.field) return getCellValue(row.entity, column);
+  return getPathValue(row.entity, field);
+}
 function buildRowDisplayItems(rows, options) {
   const items = [];
   rows.forEach((row, visibleIndex) => {
@@ -1510,8 +1515,9 @@ function buildGroupedItems(rows, columns, options, groupBy, collapsedGroups, dep
   }
   const [currentField, ...rest] = groupBy;
   const groups = /* @__PURE__ */ new Map();
+  const column = columns.find((candidate) => candidate.name === currentField);
   for (const row of rows) {
-    const value = stringifyCellValue(getPathValue(row.entity, currentField));
+    const value = stringifyCellValue(getGroupingValue(row, column, currentField));
     const key = value || "Unassigned";
     const bucket = groups.get(key) ?? [];
     bucket.push(row);
@@ -2464,11 +2470,19 @@ var warnedWasmAuditKeys = /* @__PURE__ */ new Set();
 function currentWasmInitSource() {
   return getConfiguredUiGridWasmAssetBase() ?? "package";
 }
+var wasmPackageLoader = null;
 async function loadWasmCoreModule() {
   if (!getConfiguredUiGridWasmAssetBase()) {
-    return import("@ornery/ui-grid-wasm/bundler");
+    if (!wasmPackageLoader) {
+      throw new Error(
+        "UI Grid WASM is opt-in: call enableUiGridWasmEngine() from @ornery/ui-grid-core/wasm, configure a WASM asset base, or register a module with registerUiGridWasmEngineFromModule()."
+      );
+    }
+    return await wasmPackageLoader();
   }
   const module = await import(
+    /* webpackIgnore: true */
+    /* turbopackIgnore: true */
     /* @vite-ignore */
     getUiGridWasmModulePath()
   );
@@ -2715,6 +2729,7 @@ function normalizeColumnForWasm(column) {
     ...column,
     sortingAlgorithm: void 0,
     valueGetter: void 0,
+    groupingValue: void 0,
     formatter: void 0,
     headerRenderer: void 0,
     cellTemplate: void 0,
@@ -2961,6 +2976,7 @@ function createGridApi(bindings) {
   const sortChanged = new GridEvent();
   const groupingChanged = new GridEvent();
   const columnOrderChanged = new GridEvent();
+  const columnSizeChanged = new GridEvent();
   const benchmarkComplete = new GridEvent();
   const paginationChanged = new GridEvent();
   const rowExpandedStateChanged = new GridEvent();
@@ -3085,6 +3101,7 @@ function createGridApi(bindings) {
         sortChanged: (listener) => sortChanged.subscribe(listener),
         groupingChanged: (listener) => groupingChanged.subscribe(listener),
         columnOrderChanged: (listener) => columnOrderChanged.subscribe(listener),
+        columnSizeChanged: (listener) => columnSizeChanged.subscribe(listener),
         benchmarkComplete: (listener) => benchmarkComplete.subscribe(listener)
       },
       raise: {
@@ -3099,6 +3116,7 @@ function createGridApi(bindings) {
         sortChanged: (columnName, direction) => sortChanged.emit(columnName, direction),
         groupingChanged: (groupBy) => groupingChanged.emit(groupBy),
         columnOrderChanged: (order) => columnOrderChanged.emit(order),
+        columnSizeChanged: (columnName, width) => columnSizeChanged.emit(columnName, width),
         benchmarkComplete: (result) => benchmarkComplete.emit(result)
       },
       refresh: bindings.refresh,
@@ -3573,12 +3591,6 @@ var defaultGridEngine = new RustBackedGridEngine();
 function registerUiGridWasmEngineFromModule(module) {
   registerWasmCoreModule(module);
 }
-async function enableUiGridWasmEngine() {
-  const ready = await initWasmCore();
-  if (!ready) {
-    throw new Error("Failed to initialize UI Grid WASM module");
-  }
-}
 function downloadGridCsvFile(csv, filename) {
   if (typeof Blob === "undefined" || typeof URL === "undefined" || typeof document === "undefined") {
     return;
@@ -3794,7 +3806,8 @@ var FrameworkSlotBridge = class {
     this.diffAndEmit(
       this.lastExpandableRowSlots,
       this.pendingExpandableRowSlots,
-      "expandableRowSlotsChanged"
+      "expandableRowSlotsChanged",
+      (previous, current) => previous.context.row !== current.context.row || previous.rowIndex !== current.rowIndex || previous.context.expanded !== current.context.expanded
     );
     this.lastExpandableRowSlots = this.pendingExpandableRowSlots;
     this.pendingExpandableRowSlots = /* @__PURE__ */ new Map();
@@ -3805,17 +3818,26 @@ var FrameworkSlotBridge = class {
     );
     this.lastGroupRowSlots = this.pendingGroupRowSlots;
     this.pendingGroupRowSlots = /* @__PURE__ */ new Map();
-    this.diffAndEmit(this.lastHeaderSlots, this.pendingHeaderSlots, "headerSlotsChanged");
+    this.diffAndEmit(
+      this.lastHeaderSlots,
+      this.pendingHeaderSlots,
+      "headerSlotsChanged",
+      (previous, current) => previous.context.column !== current.context.column
+    );
     this.lastHeaderSlots = this.pendingHeaderSlots;
     this.pendingHeaderSlots = /* @__PURE__ */ new Map();
-    this.diffAndEmit(this.lastFilterSlots, this.pendingFilterSlots, "filterSlotsChanged");
+    this.diffAndEmit(
+      this.lastFilterSlots,
+      this.pendingFilterSlots,
+      "filterSlotsChanged",
+      (previous, current) => previous.value !== current.value || previous.placeholder !== current.placeholder || previous.disabled !== current.disabled || previous.column !== current.column
+    );
     this.lastFilterSlots = this.pendingFilterSlots;
     this.pendingFilterSlots = /* @__PURE__ */ new Map();
-    this.diffAndEmitSingleton(
-      this.lastEmptyStateSlot,
-      this.pendingEmptyStateSlot,
+    this.diffAndEmitSingleton(this.lastEmptyStateSlot, this.pendingEmptyStateSlot, [
+      "emptyStateSlotsChanged",
       "emptyStateSlotChanged"
-    );
+    ]);
     this.lastEmptyStateSlot = this.pendingEmptyStateSlot;
     this.pendingEmptyStateSlot = null;
   }
@@ -3841,36 +3863,41 @@ var FrameworkSlotBridge = class {
   flushRemovals() {
     this.flush();
   }
-  diffAndEmit(previous, current, eventName) {
+  diffAndEmit(previous, current, eventName, changed) {
     const added = [];
     const removed = [];
+    const updated = [];
     for (const [key, slot] of current) {
-      if (!previous.has(key)) added.push(slot);
+      const before = previous.get(key);
+      if (!before) added.push(slot);
+      else if (changed?.(before, slot)) updated.push(slot);
     }
     for (const [key, slot] of previous) {
       if (!current.has(key)) removed.push(slot);
     }
-    if (added.length === 0 && removed.length === 0) return;
+    if (added.length === 0 && removed.length === 0 && updated.length === 0) return;
     this.host.dispatchEvent(
       new CustomEvent(eventName, {
-        detail: { added, removed },
+        detail: { added, removed, updated },
         bubbles: false,
         composed: false
       })
     );
   }
-  diffAndEmitSingleton(previous, current, eventName) {
+  diffAndEmitSingleton(previous, current, eventNames) {
     if (previous === current) return;
     if (!previous && !current) return;
     const added = current ? [current] : [];
     const removed = previous ? [previous] : [];
-    this.host.dispatchEvent(
-      new CustomEvent(eventName, {
-        detail: { added, removed },
-        bubbles: false,
-        composed: false
-      })
-    );
+    for (const eventName of eventNames) {
+      this.host.dispatchEvent(
+        new CustomEvent(eventName, {
+          detail: { added, removed, updated: [] },
+          bubbles: false,
+          composed: false
+        })
+      );
+    }
   }
 };
 function setsEqual(a, b) {
@@ -4083,17 +4110,20 @@ function slotRegistryMarkup(cellSlots) {
 function filterRowMarkup(templateColumns, filterCells) {
   return `<div class="filter-grid ui-grid-header" style="grid-template-columns:${templateColumns}">${filterCells}</div>`;
 }
-function bodyVirtualMarkup(templateColumns, totalVirtualHeight, virtualOffset, bodyContent) {
-  return `<div class="grid-virtual-spacer" style="height:${totalVirtualHeight}px"><div class="body-grid ui-grid-canvas grid-virtual-body" style="grid-template-columns:${templateColumns};top:${virtualOffset}px">${bodyContent}</div></div>`;
+function virtualSpacerStyle(totalVirtualHeight, rowSize) {
+  return `height:${totalVirtualHeight}px;--ui-grid-row-height:${rowSize}px`;
+}
+function bodyVirtualMarkup(templateColumns, totalVirtualHeight, virtualOffset, bodyContent, rowSize) {
+  return `<div class="grid-virtual-spacer" style="${virtualSpacerStyle(totalVirtualHeight, rowSize)}"><div class="body-grid ui-grid-canvas grid-virtual-body" style="grid-template-columns:${templateColumns};top:${virtualOffset}px">${bodyContent}</div></div>`;
 }
 function bodyStaticMarkup(templateColumns, bodyContent) {
   return `<div class="body-grid ui-grid-canvas" style="grid-template-columns:${templateColumns}">${bodyContent}</div>`;
 }
 function emptyDataMarkup(heading, description) {
-  return `<div class="empty-state ui-grid-no-row-overlay"><strong>${heading}</strong><p>${description}</p></div>`;
+  return `<div part="empty-state" class="empty-state ui-grid-no-row-overlay"><strong>${heading}</strong><p>${description}</p></div>`;
 }
 function expandableRowMarkup(expandableContent) {
-  return `<div class="expandable-row ui-grid-row ui-grid-expandable-row" style="grid-column:1 / -1">${expandableContent}</div>`;
+  return `<div part="expandable-row" class="expandable-row ui-grid-row ui-grid-expandable-row" style="grid-column:1 / -1">${expandableContent}</div>`;
 }
 function treeToggleMarkup(rowId, toggleLabel, iconViewBox, iconPath) {
   return `<button type="button" class="row-toggle" data-action="toggle-tree" data-row="${rowId}" aria-label="${toggleLabel}">${iconMarkup("toggle-icon", iconViewBox, iconPath)}<span class="sr-only">${toggleLabel}</span></button>`;
@@ -4114,6 +4144,12 @@ function resizerMarkup(columnName, headerValue) {
   return `<button type="button" class="column-resizer" data-action="resize" data-column="${columnName}" aria-label="Resize ${headerValue} column" title="Drag to resize, double-click to auto fit"></button>`;
 }
 
+// src/pagination-range-label.ts
+function formatPaginationRangeLabel(range) {
+  if (range.totalItems === 0) return "0 of 0";
+  return `${range.firstRowIndex + 1}-${range.lastRowIndex + 1} of ${range.totalItems}`;
+}
+
 // src/utils/cell-class.ts
 function bodyCellClass(isOdd, align, isPinned, isPinnedLeftLast, isPinnedRightFirst, isFocused, isEditing, isRowSelected, isRowFocused, isRowDirty, isRowSaving, isRowError, isCellInvalid) {
   let cls = "body-cell ui-grid-cell";
@@ -4200,7 +4236,10 @@ function renderHeaderCell(el, column, sortEnabled, groupingEnabled, pinningEnabl
     const selectAll = el.snapshot?.selectAll === true;
     const showSelectAll = resolvedSel.enableSelectAll && resolvedSel.multiSelect;
     const inner = showSelectAll ? `<button type="button" class="ui-grid-selection-select-all" data-action="select-all" aria-label="Select all rows"${selectAll ? ' aria-checked="true"' : ' aria-checked="false"'}><span class="ui-grid-selection-checkbox${selectAll ? " ui-grid-selection-checkbox-checked" : ""}"></span></button>` : "";
-    return `<ui-grid-header-cell class="header-cell ui-grid-selection-row-header" data-column="selectionRowHeaderCol">${inner}</ui-grid-header-cell>`;
+    const pinOffset2 = controller.isPinned(column) ? controller.pinnedOffset(column) : null;
+    const pinClass = pinOffset2 ? ` is-pinned${controller.isPinnedLeftLast(column) ? " is-pinned-left-last" : ""}` : "";
+    const stickyStyle2 = pinOffset2 ? ` style="${escapeHtml(`${pinOffset2.side}:${pinOffset2.offset};`)}"` : "";
+    return `<ui-grid-header-cell part="header-cell" class="header-cell ui-grid-selection-row-header${pinClass}"${stickyStyle2} data-column="selectionRowHeaderCol">${inner}</ui-grid-header-cell>`;
   }
   if (el.frameworkSlots.hasHeader(column.name)) {
     el.frameworkSlots.stageHeader(column);
@@ -4208,7 +4247,16 @@ function renderHeaderCell(el, column, sortEnabled, groupingEnabled, pinningEnabl
     const isPinned2 = controller.isPinned(column);
     const pinOffset2 = isPinned2 ? controller.pinnedOffset(column) : null;
     const stickyStyle2 = pinOffset2 ? `${pinOffset2.side}:${pinOffset2.offset};` : "";
-    return `<ui-grid-header-cell class="header-cell"${stickyStyle2 ? ` style="${escapeHtml(stickyStyle2)}"` : ""} data-column="${escapeHtml(column.name)}" data-pinned="${isPinned2}" data-sticky-style="${escapeHtml(stickyStyle2)}"><slot name="${escapeHtml(slotName)}"></slot></ui-grid-header-cell>`;
+    const slotClassName = headerCellClass(
+      false,
+      isPinned2,
+      controller.isPinnedLeftLast(column),
+      controller.isPinnedRightFirst(column),
+      false,
+      false,
+      false
+    );
+    return `<ui-grid-header-cell part="header-cell" class="${slotClassName}"${stickyStyle2 ? ` style="${escapeHtml(stickyStyle2)}"` : ""} data-column="${escapeHtml(column.name)}" data-pinned="${isPinned2}" data-sticky-style="${escapeHtml(stickyStyle2)}"><slot name="${escapeHtml(slotName)}"></slot></ui-grid-header-cell>`;
   }
   const sortDirection = controller.getSortDirection(column);
   const sortLabel = controller.sortButtonLabel(column);
@@ -4239,13 +4287,14 @@ function renderHeaderCell(el, column, sortEnabled, groupingEnabled, pinningEnabl
     isDragTarget,
     isDragging
   );
-  return `<ui-grid-header-cell class="${className}"${isDraggable ? ' draggable="true"' : ""}${stickyStyle ? ` style="${escapeHtml(stickyStyle)}"` : ""} data-column="${escapeHtml(column.name)}" data-sort-active="${sortDirection !== SORT_DIRECTIONS.none}" data-pinned="${isPinned}" data-pinned-left-last="${isPinnedLeftLast}" data-pinned-right-first="${isPinnedRightFirst}" data-pin-menu-open="${isPinMenuOpen}" data-drag-target="${isDragTarget}" data-dragging="${isDragging}" data-draggable="${isDraggable}" data-sticky-style="${escapeHtml(stickyStyle)}"><span class="header-label">${headerValue}</span><span class="header-actions">${canSort ? `<button type="button" class="header-action" data-action="sort" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(sortLabel)}">${el.icons.renderControlIcon(sortIconKey)}<span class="sr-only">${escapeHtml(sortLabel)}</span></button>` : ""}${canGroup ? `<button type="button" class="chip-action${controller.isColumnGrouped(column) ? " chip-action-active" : ""}" data-action="group" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(groupingLabel)}">${el.icons.renderControlIcon("group")}<span class="sr-only">${escapeHtml(groupingLabel)}</span></button>` : ""}${canPin ? `<div class="pin-control${isPinMenuOpen ? " pin-control-open" : ""}"><button type="button" class="chip-action pin-trigger${isPinned ? " chip-action-active" : ""}" data-action="pin-trigger" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(pinLabel)}">${el.icons.renderControlIcon("pin")}<span class="sr-only">${escapeHtml(pinLabel)}</span></button><div class="pin-menu" role="menu" aria-label="${escapeHtml(pinLabel)}"><button type="button" class="pin-menu-action" data-action="pin-left" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(el.snapshot?.labels.pinLeft ?? "Pin left")}">${el.icons.renderIconWithClass("control-icon", "pinLeft")}<span class="sr-only">${escapeHtml(el.snapshot?.labels.pinLeft ?? "Pin left")}</span></button><button type="button" class="pin-menu-action" data-action="pin-right" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(el.snapshot?.labels.pinRight ?? "Pin right")}">${el.icons.renderIconWithClass("control-icon", "pinRight")}<span class="sr-only">${escapeHtml(el.snapshot?.labels.pinRight ?? "Pin right")}</span></button></div></div>` : ""}</span>${resizerHtml}</ui-grid-header-cell>`;
+  return `<ui-grid-header-cell part="header-cell" class="${className}"${isDraggable ? ' draggable="true"' : ""}${stickyStyle ? ` style="${escapeHtml(stickyStyle)}"` : ""} data-column="${escapeHtml(column.name)}" data-sort-active="${sortDirection !== SORT_DIRECTIONS.none}" data-pinned="${isPinned}" data-pinned-left-last="${isPinnedLeftLast}" data-pinned-right-first="${isPinnedRightFirst}" data-pin-menu-open="${isPinMenuOpen}" data-drag-target="${isDragTarget}" data-dragging="${isDragging}" data-draggable="${isDraggable}" data-sticky-style="${escapeHtml(stickyStyle)}"><span class="header-label" part="header-label">${headerValue}</span><span class="header-actions" part="header-actions">${canSort ? `<button type="button" class="header-action" data-action="sort" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(sortLabel)}">${el.icons.renderControlIcon(sortIconKey)}<span class="sr-only">${escapeHtml(sortLabel)}</span></button>` : ""}${canGroup ? `<button type="button" class="chip-action${controller.isColumnGrouped(column) ? " chip-action-active" : ""}" data-action="group" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(groupingLabel)}">${el.icons.renderControlIcon("group")}<span class="sr-only">${escapeHtml(groupingLabel)}</span></button>` : ""}${canPin ? `<div class="pin-control${isPinMenuOpen ? " pin-control-open" : ""}"><button type="button" class="chip-action pin-trigger${isPinned ? " chip-action-active" : ""}" data-action="pin-trigger" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(pinLabel)}">${el.icons.renderControlIcon("pin")}<span class="sr-only">${escapeHtml(pinLabel)}</span></button><div class="pin-menu" part="pin-menu" role="menu" aria-label="${escapeHtml(pinLabel)}"><button type="button" class="pin-menu-action" data-action="pin-left" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(el.snapshot?.labels.pinLeft ?? "Pin left")}">${el.icons.renderIconWithClass("control-icon", "pinLeft")}<span class="sr-only">${escapeHtml(el.snapshot?.labels.pinLeft ?? "Pin left")}</span></button><button type="button" class="pin-menu-action" data-action="pin-right" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(el.snapshot?.labels.pinRight ?? "Pin right")}">${el.icons.renderIconWithClass("control-icon", "pinRight")}<span class="sr-only">${escapeHtml(el.snapshot?.labels.pinRight ?? "Pin right")}</span></button></div></div>` : ""}</span>${resizerHtml}</ui-grid-header-cell>`;
 }
 function renderFilterCell(el, column) {
   if (column.name === "selectionRowHeaderCol") {
     const pinOffset2 = el.controller.isPinned(column) ? el.controller.pinnedOffset(column) : null;
     const stickyStyle2 = pinOffset2 ? `${pinOffset2.side}:${pinOffset2.offset};` : "";
-    return `<div class="filter-cell ui-grid-selection-row-header" data-column="selectionRowHeaderCol"${stickyStyle2 ? ` style="${escapeHtml(stickyStyle2)}"` : ""}></div>`;
+    const pinClass = pinOffset2 ? " is-pinned" : "";
+    return `<div part="filter-cell" class="filter-cell ui-grid-selection-row-header${pinClass}" data-column="selectionRowHeaderCol"${stickyStyle2 ? ` style="${escapeHtml(stickyStyle2)}"` : ""}></div>`;
   }
   const value = el.snapshot?.activeFilters[column.name] ?? "";
   const controller = el.controller;
@@ -4255,9 +4304,10 @@ function renderFilterCell(el, column) {
   if (el.frameworkSlots.hasFilter(column.name)) {
     el.frameworkSlots.stageFilter(column, value, controller.filterPlaceholder(column), !canFilter);
     const slotName = filterSlotName(column);
-    return `<div class="filter-cell ui-grid-filter-container" data-column="${escapeHtml(column.name)}"${stickyStyle ? ` style="${escapeHtml(stickyStyle)}"` : ""}><slot name="${escapeHtml(slotName)}"></slot></div>`;
+    const pinClass = pinOffset ? ` is-pinned${controller.isPinnedLeftLast(column) ? " is-pinned-left-last" : ""}${controller.isPinnedRightFirst(column) ? " is-pinned-right-first" : ""}` : "";
+    return `<div part="filter-cell" class="filter-cell ui-grid-filter-container${pinClass}" data-column="${escapeHtml(column.name)}"${stickyStyle ? ` style="${escapeHtml(stickyStyle)}"` : ""}><slot name="${escapeHtml(slotName)}"></slot></div>`;
   }
-  return `<ui-grid-filter-cell data-column="${escapeHtml(column.name)}" data-value="${escapeHtml(value)}" data-placeholder="${escapeHtml(controller.filterPlaceholder(column))}" data-disabled="${!canFilter}" data-pinned="${controller.isPinned(column)}" data-pinned-left-last="${controller.isPinnedLeftLast(column)}" data-pinned-right-first="${controller.isPinnedRightFirst(column)}" data-sticky-style="${escapeHtml(stickyStyle)}"></ui-grid-filter-cell>`;
+  return `<ui-grid-filter-cell part="filter-cell" data-column="${escapeHtml(column.name)}" data-value="${escapeHtml(value)}" data-placeholder="${escapeHtml(controller.filterPlaceholder(column))}" data-disabled="${!canFilter}" data-pinned="${controller.isPinned(column)}" data-pinned-left-last="${controller.isPinnedLeftLast(column)}" data-pinned-right-first="${controller.isPinnedRightFirst(column)}" data-sticky-style="${escapeHtml(stickyStyle)}"></ui-grid-filter-cell>`;
 }
 function renderDisplayItem(el, item, displayIndex) {
   if (!el.snapshot || !el.controller) return "";
@@ -4266,12 +4316,12 @@ function renderDisplayItem(el, item, displayIndex) {
     if (el.frameworkSlots.hasGroupRow()) {
       el.frameworkSlots.stageGroupRow(group);
       const slotName = groupRowSlotName(group);
-      return `<div class="group-row ui-grid-row ui-grid-group-row" data-group="${escapeHtml(group.id)}" style="grid-column:1 / -1"><slot name="${escapeHtml(slotName)}"></slot></div>`;
+      return `<div part="group-row" class="group-row ui-grid-row ui-grid-group-row" data-group="${escapeHtml(group.id)}" style="grid-column:1 / -1"><slot name="${escapeHtml(slotName)}"></slot></div>`;
     }
     const iconKey = group.collapsed ? "groupCollapsed" : "groupExpanded";
     const icon = el.icons.resolve(iconKey);
     const disclosureLabel = el.controller.groupDisclosureLabel(group);
-    return `<ui-grid-group-row data-action="toggle-group" data-group="${escapeHtml(group.id)}" data-collapsed="${group.collapsed ? "true" : "false"}" data-field="${escapeHtml(group.field)}" data-label="${escapeHtml(group.label)}" data-count="${group.count}" data-depth="${group.depth}" data-disclosure-label="${escapeHtml(disclosureLabel)}" data-icon-path="${icon.path}" data-icon-view-box="${icon.viewBox ?? "0 0 24 24"}" data-rows-suffix="${escapeHtml(el.snapshot.labels.groupRowsSuffix)}"></ui-grid-group-row>`;
+    return `<ui-grid-group-row part="group-row" data-action="toggle-group" data-group="${escapeHtml(group.id)}" data-collapsed="${group.collapsed ? "true" : "false"}" data-field="${escapeHtml(group.field)}" data-column-label="${escapeHtml(el.controller.groupColumnLabel(group))}" data-label="${escapeHtml(group.label)}" data-count="${group.count}" data-depth="${group.depth}" data-disclosure-label="${escapeHtml(disclosureLabel)}" data-icon-path="${icon.path}" data-icon-view-box="${icon.viewBox ?? "0 0 24 24"}" data-rows-suffix="${escapeHtml(el.controller.groupRowsSuffix(group))}"></ui-grid-group-row>`;
   }
   if (item.kind === "expandable") {
     const row = item.row;
@@ -4338,7 +4388,7 @@ function renderBodyCell(el, row, column, displayIndex) {
     isCellInvalid
   );
   const titleAttr = isCellInvalid ? ` title="${escapeHtml(controller.gridApi.validate.getTitleFormattedErrors(row.entity, column))}"` : "";
-  return `<ui-grid-body-cell class="${className}" tabindex="0"${stickyStyle ? ` style="${escapeHtml(stickyStyle)}"` : ""}${titleAttr} data-row="${escapeHtml(rowId)}" data-column="${escapeHtml(columnName)}" data-odd="${displayIndex % 2 !== 0}" data-align="${escapeHtml(align)}" data-pinned="${isPinned}" data-pinned-left-last="${isPinnedLeftLast}" data-pinned-right-first="${isPinnedRightFirst}" data-focused="${isFocused}" data-editing="${editing}" data-sticky-style="${escapeHtml(stickyStyle)}"><div class="cell-shell" style="padding-inline-start:${escapeHtml(controller.cellIndent(row, column))}">${treeToggle}${expandToggle}<div class="cell-content">${content}</div></div></ui-grid-body-cell>`;
+  return `<ui-grid-body-cell part="body-cell" class="${className}" tabindex="0"${stickyStyle ? ` style="${escapeHtml(stickyStyle)}"` : ""}${titleAttr} data-row="${escapeHtml(rowId)}" data-column="${escapeHtml(columnName)}" data-odd="${displayIndex % 2 !== 0}" data-align="${escapeHtml(align)}" data-pinned="${isPinned}" data-pinned-left-last="${isPinnedLeftLast}" data-pinned-right-first="${isPinnedRightFirst}" data-focused="${isFocused}" data-editing="${editing}" data-sticky-style="${escapeHtml(stickyStyle)}"><div class="cell-shell" style="padding-inline-start:${escapeHtml(controller.cellIndent(row, column))}">${treeToggle}${expandToggle}<div class="cell-content">${content}</div></div></ui-grid-body-cell>`;
 }
 function renderCellShellContents(el, row, column, displayIndex, editing, templateMarkupMap) {
   const controller = el.controller;
@@ -4376,7 +4426,12 @@ function renderPagination(el, snapshot) {
   const pageSizes = snapshot.options.paginationPageSizes ?? [10, 25, 50, 100];
   const prevIcon = el.icons.resolve("paginationPrev");
   const nextIcon = el.icons.resolve("paginationNext");
-  return `<ui-grid-pagination data-range-label="${escapeHtml(`${snapshot.firstRowIndex + 1}-${snapshot.lastRowIndex + 1} of ${snapshot.pipeline.totalItems}`)}" data-current-page="${snapshot.currentPage}" data-total-pages="${snapshot.totalPages}" data-page-label="${escapeHtml(snapshot.labels.paginationPage)}" data-of-label="${escapeHtml(snapshot.labels.paginationOf)}" data-prev-label="${escapeHtml(snapshot.labels.paginationPrevious)}" data-next-label="${escapeHtml(snapshot.labels.paginationNext)}" data-rows-label="${escapeHtml(snapshot.labels.paginationRows)}" data-prev-icon-path="${prevIcon.path}" data-prev-icon-view-box="${prevIcon.viewBox ?? "0 0 24 24"}" data-next-icon-path="${nextIcon.path}" data-next-icon-view-box="${nextIcon.viewBox ?? "0 0 24 24"}" data-page-sizes="${escapeHtml(JSON.stringify(pageSizes))}" data-page-size="${snapshot.pageSize}" data-prev-disabled="${snapshot.currentPage <= 1}" data-next-disabled="${snapshot.currentPage >= snapshot.totalPages}"></ui-grid-pagination>`;
+  const rangeLabel = formatPaginationRangeLabel({
+    firstRowIndex: snapshot.firstRowIndex,
+    lastRowIndex: snapshot.lastRowIndex,
+    totalItems: snapshot.pipeline.totalItems
+  });
+  return `<ui-grid-pagination part="pagination" data-range-label="${escapeHtml(rangeLabel)}" data-current-page="${snapshot.currentPage}" data-total-pages="${snapshot.totalPages}" data-page-label="${escapeHtml(snapshot.labels.paginationPage)}" data-of-label="${escapeHtml(snapshot.labels.paginationOf)}" data-prev-label="${escapeHtml(snapshot.labels.paginationPrevious)}" data-next-label="${escapeHtml(snapshot.labels.paginationNext)}" data-rows-label="${escapeHtml(snapshot.labels.paginationRows)}" data-prev-icon-path="${prevIcon.path}" data-prev-icon-view-box="${prevIcon.viewBox ?? "0 0 24 24"}" data-next-icon-path="${nextIcon.path}" data-next-icon-view-box="${nextIcon.viewBox ?? "0 0 24 24"}" data-page-sizes="${escapeHtml(JSON.stringify(pageSizes))}" data-page-size="${snapshot.pageSize}" data-prev-disabled="${snapshot.currentPage <= 1}" data-next-disabled="${snapshot.currentPage >= snapshot.totalPages}"></ui-grid-pagination>`;
 }
 function renderSlotRegistry(columns) {
   const cellSlots = columns.map((column) => `<slot name="${escapeHtml(`cell-${column.name}`)}"></slot>`).join("");
@@ -4559,7 +4614,7 @@ function renderPatch(el, plan, root) {
   reconcilePagination(el, root, snapshot, paginationEnabled && showPagination);
   el.frameworkSlots.flush();
 }
-function reconcileBodyRoot(el, root, kind, options, labels, templateColumns, virtualOffset, totalVirtualHeight) {
+function reconcileBodyRoot(el, root, kind, options, labels, templateColumns, virtualOffset, totalVirtualHeight, rowSize) {
   const bodyViewport = root.querySelector(".grid-body-viewport");
   if (!bodyViewport) return null;
   const currentEmpty = bodyViewport.querySelector(":scope > .empty-state");
@@ -4596,7 +4651,7 @@ function reconcileBodyRoot(el, root, kind, options, labels, templateColumns, vir
       return currentVirtual.querySelector(".grid-virtual-body");
     }
     const fresh2 = createFromMarkup(
-      bodyVirtualMarkup(templateColumns, totalVirtualHeight, virtualOffset, "")
+      bodyVirtualMarkup(templateColumns, totalVirtualHeight, virtualOffset, "", rowSize)
     );
     if (fresh2) swapBodyChild(bodyViewport, currentNode, fresh2);
     return fresh2?.querySelector(".grid-virtual-body") ?? null;
@@ -4628,15 +4683,26 @@ function reconcilePagination(el, root, snapshot, shouldShow) {
 function patchFilterCells(el, filterGrid, snapshot) {
   const controller = el.controller;
   const existing = /* @__PURE__ */ new Map();
-  for (const e of filterGrid.querySelectorAll("ui-grid-filter-cell[data-column]")) {
+  for (const e of filterGrid.querySelectorAll(
+    "ui-grid-filter-cell[data-column], .ui-grid-filter-container[data-column]"
+  )) {
     const column = e.dataset["column"];
     if (column) existing.set(column, e);
   }
   for (const column of snapshot.visibleColumns) {
-    const target = existing.get(column.name);
-    if (!target) continue;
     const value = snapshot.activeFilters[column.name] ?? "";
     const canFilter = controller.isColumnFilterable(column);
+    if (el.frameworkSlots.hasFilter(column.name)) {
+      el.frameworkSlots.stageFilter(column, value, controller.filterPlaceholder(column), !canFilter);
+      const target2 = existing.get(column.name);
+      const pinOffset2 = controller.isPinned(column) ? controller.pinnedOffset(column) : null;
+      if (target2) {
+        setAttr(target2, "style", pinOffset2 ? `${pinOffset2.side}:${pinOffset2.offset};` : "");
+      }
+      continue;
+    }
+    const target = existing.get(column.name);
+    if (!target) continue;
     const pinOffset = controller.isPinned(column) ? controller.pinnedOffset(column) : null;
     const stickyStyle = pinOffset ? `${pinOffset.side}:${pinOffset.offset};` : "";
     setAttr(target, "data-value", value);
@@ -4659,7 +4725,8 @@ function patchBodyRegion(el, root, snapshot, options, labels, templateColumns, v
     labels,
     templateColumns,
     virtualOffset,
-    totalVirtualHeight
+    totalVirtualHeight,
+    snapshot.rowSize
   );
   if (!hasRows) {
     el.lastItemsFingerprint = "";
@@ -4668,8 +4735,9 @@ function patchBodyRegion(el, root, snapshot, options, labels, templateColumns, v
   const itemsFingerprint = fingerprintItems(itemsToRender);
   if (virtualizationEnabled) {
     const spacer = root.querySelector(".grid-virtual-spacer");
-    if (spacer && totalVirtualHeight !== el.lastTotalVirtualHeight) {
-      spacer.setAttribute("style", `height:${totalVirtualHeight}px`);
+    const spacerStyle = virtualSpacerStyle(totalVirtualHeight, snapshot.rowSize);
+    if (spacer && spacer.getAttribute("style") !== spacerStyle) {
+      spacer.setAttribute("style", spacerStyle);
       el.lastTotalVirtualHeight = totalVirtualHeight;
     }
     if (bodyContainer) {
@@ -4830,19 +4898,19 @@ function buildRowFingerprint(row, displayIndex, visibleColumns) {
   return `${displayIndex}|${flags}|${row.treeLevel}|${row.height}|${row.expandedRowHeight}|${invalidBits}`;
 }
 function patchGroupRow(el, target, group) {
-  const snapshot = el.snapshot;
   const controller = el.controller;
   const iconKey = group.collapsed ? "groupCollapsed" : "groupExpanded";
   const icon = el.icons.resolve(iconKey);
   setAttr(target, "data-collapsed", group.collapsed ? "true" : "false");
   setAttr(target, "data-field", group.field);
+  setAttr(target, "data-column-label", controller.groupColumnLabel(group));
   setAttr(target, "data-label", group.label);
   setAttr(target, "data-count", String(group.count));
   setAttr(target, "data-depth", String(group.depth));
   setAttr(target, "data-disclosure-label", controller.groupDisclosureLabel(group));
   setAttr(target, "data-icon-path", icon.path);
   setAttr(target, "data-icon-view-box", icon.viewBox ?? "0 0 24 24");
-  setAttr(target, "data-rows-suffix", snapshot.labels.groupRowsSuffix);
+  setAttr(target, "data-rows-suffix", controller.groupRowsSuffix(group));
 }
 function patchBodyCell(el, cell, row, column, displayIndex, templateMarkupMap) {
   const controller = el.controller;
@@ -4921,7 +4989,11 @@ function patchPagination(el, paginationEl, snapshot) {
   setAttr(
     paginationEl,
     "data-range-label",
-    `${snapshot.firstRowIndex + 1}-${snapshot.lastRowIndex + 1} of ${snapshot.pipeline.totalItems}`
+    formatPaginationRangeLabel({
+      firstRowIndex: snapshot.firstRowIndex,
+      lastRowIndex: snapshot.lastRowIndex,
+      totalItems: snapshot.pipeline.totalItems
+    })
   );
   setAttr(paginationEl, "data-current-page", String(snapshot.currentPage));
   setAttr(paginationEl, "data-total-pages", String(snapshot.totalPages));
@@ -5897,6 +5969,7 @@ var VanillaGridController = class {
   columnWidthOverrides = {};
   viewportWidth = 0;
   currentPage = 1;
+  lastOptionsCurrentPage;
   pageSize = 0;
   editingCell = null;
   editingValue = "";
@@ -5928,6 +6001,7 @@ var VanillaGridController = class {
   subscribers = /* @__PURE__ */ new Set();
   gridApi;
   constructor(options) {
+    this.syncPaginationCurrentPage(options);
     this.options = options;
     this.labels = resolveGridLabels2(options.labels);
     this.validatorRegistry = createGridValidatorRegistry2(this.labels);
@@ -6138,7 +6212,15 @@ var VanillaGridController = class {
     this.disposeLanguageListener = null;
     this.subscribers.clear();
   }
+  syncPaginationCurrentPage(options) {
+    const page = options.paginationCurrentPage;
+    if (page !== void 0 && page !== this.lastOptionsCurrentPage) {
+      this.currentPage = Number.isFinite(page) ? Math.max(1, Math.floor(page)) : 1;
+    }
+    this.lastOptionsCurrentPage = page;
+  }
   setOptions(options) {
+    this.syncPaginationCurrentPage(options);
     this.options = options;
     this.labels = resolveGridLabels2(options.labels);
     const rebuiltDefaults = createGridValidatorRegistry2(this.labels);
@@ -6904,8 +6986,10 @@ var VanillaGridController = class {
   }
   setColumnWidthOverride(columnName, widthPx) {
     const nextWidth = `${Math.max(88, Math.round(widthPx))}px`;
+    if (this.columnWidthOverrides[columnName] === nextWidth) return;
     this.columnWidthOverrides = { ...this.columnWidthOverrides, [columnName]: nextWidth };
     this.refresh();
+    this.gridApi.core.raise.columnSizeChanged(columnName, nextWidth);
   }
   /** Returns the grid-template-columns string as if `columnName` had the given width,
    * without triggering a full refresh. Used for smooth drag-resize DOM updates. */
@@ -6977,22 +7061,42 @@ var VanillaGridController = class {
     if (typeof condition === "boolean") return condition;
     return condition({ row: row.entity, column, rowIndex: row.index });
   }
+  // Pin state as laid out: the selection row-header column sits in front of
+  // the left-pinned columns, so it is pinned with them (#7399).
+  layoutPinnedColumns() {
+    const pinned = this.pinnedColumns;
+    if (pinned[SELECTION_COLUMN] !== void 0) return pinned;
+    if (!Object.values(pinned).includes("left")) return pinned;
+    if (this.visibleColumns[0]?.name !== SELECTION_COLUMN) return pinned;
+    return { [SELECTION_COLUMN]: "left", ...pinned };
+  }
   isPinned(column) {
-    return this.pinnedColumns[column.name] !== void 0;
+    return this.layoutPinnedColumns()[column.name] !== void 0;
   }
   isPinnedLeftLast(column) {
-    const leftPinned = this.visibleColumns.filter((c) => this.pinnedColumns[c.name] === "left");
+    const pinned = this.layoutPinnedColumns();
+    const leftPinned = this.visibleColumns.filter((c) => pinned[c.name] === "left");
     return leftPinned.length > 0 && leftPinned[leftPinned.length - 1].name === column.name;
   }
   isPinnedRightFirst(column) {
-    const rightPinned = this.visibleColumns.filter((c) => this.pinnedColumns[c.name] === "right");
+    const pinned = this.layoutPinnedColumns();
+    const rightPinned = this.visibleColumns.filter((c) => pinned[c.name] === "right");
     return rightPinned.length > 0 && rightPinned[0].name === column.name;
   }
   groupDisclosureLabel(group) {
     return gridGroupDisclosureLabel2(group.collapsed, this.labels);
   }
+  groupColumnLabel(group) {
+    const column = this.options.columnDefs.find((candidate) => candidate.name === group.field);
+    return column ? headerLabel2(column) : group.field;
+  }
+  groupRowsSuffix(group) {
+    const plural = this.labels.groupRowsSuffix;
+    if (group.count !== 1) return plural;
+    return this.labels.groupRowSuffixOne ?? GROUP_ROW_SUFFIX_ONE[plural] ?? plural;
+  }
   pinnedOffset(column) {
-    return computePinnedOffset2(this.visibleColumns, this.pinnedColumns, column);
+    return computePinnedOffset2(this.visibleColumns, this.layoutPinnedColumns(), column);
   }
   displayValue(row, column) {
     return formatGridCellDisplayValue2(buildGridCellContext2(row, column));
@@ -7198,15 +7302,25 @@ var VanillaGridController = class {
     }
     this.emit();
   }
+  awaitingWasmEngine = false;
+  // WASM is opt-in (#7396). The grid starts a load only when the app set a
+  // WASM asset base; otherwise it waits for a load the app started. Either
+  // way it refreshes once WASM is ready so it switches engines.
   maybeEnableWasmEngine() {
-    if (getWasmCoreInitializationState() !== "idle") {
+    const state = getWasmCoreInitializationState();
+    const optedIn = state === "loading" || state === "idle" && getConfiguredUiGridWasmAssetBase() !== null;
+    if (this.awaitingWasmEngine || !optedIn) {
       return;
     }
-    void enableUiGridWasmEngine().then(() => {
-      if (!this.disposed) {
+    this.awaitingWasmEngine = true;
+    void initWasmCore().then((ready) => {
+      this.awaitingWasmEngine = false;
+      if (ready && !this.disposed) {
         this.refresh();
       }
-    }).catch(() => void 0);
+    }).catch(() => {
+      this.awaitingWasmEngine = false;
+    });
   }
   emit() {
     const snapshot = this.getSnapshot();
@@ -7250,9 +7364,14 @@ var VanillaGridController = class {
       this.pageSize
     );
   }
+  // Core's index helpers describe the slice, which external paging skips; the
+  // range shown and returned by the API is where this page sits in totalItems.
+  rangeOptions() {
+    return this.options.useExternalPagination === true ? { ...this.options, useExternalPagination: false } : this.options;
+  }
   getFirstRowIndex() {
     return getFirstRowIndexValue2(
-      this.options,
+      this.rangeOptions(),
       this.currentPage,
       this.pipeline.totalItems,
       this.pageSize
@@ -7260,7 +7379,7 @@ var VanillaGridController = class {
   }
   getLastRowIndex() {
     return getLastRowIndexValue2(
-      this.options,
+      this.rangeOptions(),
       this.currentPage,
       this.pipeline.totalItems,
       this.pageSize
@@ -7665,13 +7784,17 @@ var VanillaGridController = class {
     };
   }
 };
+var SELECTION_COLUMN = "selectionRowHeaderCol";
+var GROUP_ROW_SUFFIX_ONE = {
+  rows: "row",
+  lignes: "ligne",
+  Zeilen: "Zeile",
+  filas: "fila"
+};
 function createVanillaGridController(options) {
   return new VanillaGridController(options);
 }
 
-// scss-inline:/home/runner/work/ui-grid/ui-grid/projects/ui-grid-vanilla/src/ui-grid-shell.scss
-var ui_grid_shell_default = ':host{--_ui-grid-border-color: var(--ui-grid-border-color, var(--app-ui-grid-border-color, #d4d4d8));--_ui-grid-header-background: var( --ui-grid-header-background, var(--app-ui-grid-header-background, #f3f4f6) );--_ui-grid-row-odd: var(--ui-grid-row-odd, var(--app-ui-grid-row-odd, #fcfcfd));--_ui-grid-row-even: var(--ui-grid-row-even, var(--app-ui-grid-row-even, #f7f7f8));--_ui-grid-row-hover: var( --ui-grid-row-hover, var( --app-ui-grid-row-hover, color-mix(in srgb, var(--_ui-grid-accent) 4%, var(--_ui-grid-surface)) ) );--_ui-grid-row-focus-background: var( --ui-grid-row-focus-background, var( --app-ui-grid-row-focus-background, color-mix(in srgb, var(--_ui-grid-accent) 9%, var(--_ui-grid-surface)) ) );--_ui-grid-cell-color: var(--ui-grid-cell-color, var(--app-ui-grid-cell-color, #111827));--_ui-grid-muted-color: var(--ui-grid-muted-color, var(--app-ui-grid-muted-color, #6b7280));--_ui-grid-surface: var(--ui-grid-surface, var(--app-ui-grid-surface, #ffffff));--_ui-grid-radius: var(--ui-grid-radius, var(--app-ui-grid-radius, 4px));--_ui-grid-shadow: var( --ui-grid-shadow, var(--app-ui-grid-shadow, 0 10px 24px rgba(15, 23, 42, 0.08)) );--_ui-grid-header-weight: var(--ui-grid-header-weight, var(--app-ui-grid-header-weight, 700));--_ui-grid-accent: var(--ui-grid-accent, var(--app-ui-grid-accent, #2563eb));--_ui-grid-group-background: var( --ui-grid-group-background, var(--app-ui-grid-group-background, #eceff3) );--_ui-grid-status-active-bg: var( --ui-grid-status-active-bg, var(--app-ui-grid-status-active-bg, rgba(22, 163, 74, 0.14)) );--_ui-grid-status-active-color: var( --ui-grid-status-active-color, var(--app-ui-grid-status-active-color, #166534) );--_ui-grid-status-expansion-bg: var( --ui-grid-status-expansion-bg, var(--app-ui-grid-status-expansion-bg, rgba(37, 99, 235, 0.14)) );--_ui-grid-status-expansion-color: var( --ui-grid-status-expansion-color, var(--app-ui-grid-status-expansion-color, #1d4ed8) );--_ui-grid-status-enterprise-bg: var( --ui-grid-status-enterprise-bg, var(--app-ui-grid-status-enterprise-bg, rgba(15, 118, 110, 0.14)) );--_ui-grid-status-enterprise-color: var( --ui-grid-status-enterprise-color, var(--app-ui-grid-status-enterprise-color, #115e59) );--_ui-grid-status-pilot-bg: var( --ui-grid-status-pilot-bg, var(--app-ui-grid-status-pilot-bg, rgba(234, 88, 12, 0.14)) );--_ui-grid-status-pilot-color: var( --ui-grid-status-pilot-color, var(--app-ui-grid-status-pilot-color, #c2410c) );--_ui-grid-shell-gap: var(--ui-grid-shell-gap, var(--app-ui-grid-shell-gap, 1.5rem));--_ui-grid-hero-gap: var(--ui-grid-hero-gap, var(--app-ui-grid-hero-gap, 1.5rem));--_ui-grid-hero-padding-block: var( --ui-grid-hero-padding-block, var(--app-ui-grid-hero-padding-block, 1rem) );--_ui-grid-eyebrow-margin-block-end: var( --ui-grid-eyebrow-margin-block-end, var(--app-ui-grid-eyebrow-margin-block-end, 0.5rem) );--_ui-grid-eyebrow-letter-spacing: var( --ui-grid-eyebrow-letter-spacing, var(--app-ui-grid-eyebrow-letter-spacing, 0.18em) );--_ui-grid-eyebrow-font-size: var( --ui-grid-eyebrow-font-size, var(--app-ui-grid-eyebrow-font-size, 0.72rem) );--_ui-grid-hero-title-font-size: var( --ui-grid-hero-title-font-size, var(--app-ui-grid-hero-title-font-size, clamp(1.4rem, 2vw, 2rem)) );--_ui-grid-hero-title-line-height: var( --ui-grid-hero-title-line-height, var(--app-ui-grid-hero-title-line-height, 1.1) );--_ui-grid-hero-deck-max-width: var( --ui-grid-hero-deck-max-width, var(--app-ui-grid-hero-deck-max-width, 56ch) );--_ui-grid-hero-deck-margin-block-start: var( --ui-grid-hero-deck-margin-block-start, var(--app-ui-grid-hero-deck-margin-block-start, 0.75rem) );--_ui-grid-hero-actions-gap: var( --ui-grid-hero-actions-gap, var(--app-ui-grid-hero-actions-gap, 1rem) );--_ui-grid-action-radius: var(--ui-grid-action-radius, var(--app-ui-grid-action-radius, 999px));--_ui-grid-action-padding-block: var( --ui-grid-action-padding-block, var(--app-ui-grid-action-padding-block, 0.8rem) );--_ui-grid-action-padding-inline: var( --ui-grid-action-padding-inline, var(--app-ui-grid-action-padding-inline, 1.1rem) );--_ui-grid-stats-card-min-width: var( --ui-grid-stats-card-min-width, var(--app-ui-grid-stats-card-min-width, 8rem) );--_ui-grid-stats-card-padding-block: var( --ui-grid-stats-card-padding-block, var(--app-ui-grid-stats-card-padding-block, 0.85rem) );--_ui-grid-stats-card-padding-inline: var( --ui-grid-stats-card-padding-inline, var(--app-ui-grid-stats-card-padding-inline, 1rem) );--_ui-grid-stats-card-value-font-size: var( --ui-grid-stats-card-value-font-size, var(--app-ui-grid-stats-card-value-font-size, 1.9rem) );--_ui-grid-metrics-gap: var(--ui-grid-metrics-gap, var(--app-ui-grid-metrics-gap, 1rem));--_ui-grid-metric-card-padding-block: var( --ui-grid-metric-card-padding-block, var(--app-ui-grid-metric-card-padding-block, 1rem) );--_ui-grid-metric-card-padding-inline: var( --ui-grid-metric-card-padding-inline, var(--app-ui-grid-metric-card-padding-inline, 1.1rem) );--_ui-grid-metric-value-font-size: var( --ui-grid-metric-value-font-size, var(--app-ui-grid-metric-value-font-size, 1.3rem) );--_ui-grid-toolbar-gap: var(--ui-grid-toolbar-gap, var(--app-ui-grid-toolbar-gap, 1rem));--_ui-grid-toolbar-padding-block: var( --ui-grid-toolbar-padding-block, var(--app-ui-grid-toolbar-padding-block, 1rem) );--_ui-grid-toolbar-padding-inline: var( --ui-grid-toolbar-padding-inline, var(--app-ui-grid-toolbar-padding-inline, 1.25rem) );--_ui-grid-toolbar-inline-gap: var( --ui-grid-toolbar-inline-gap, var(--app-ui-grid-toolbar-inline-gap, 0.4rem) );--_ui-grid-overflow-x: var(--ui-grid-overflow-x, var(--app-ui-grid-overflow-x, auto));--_ui-grid-overflow-y: var(--ui-grid-overflow-y, var(--app-ui-grid-overflow-y, auto));--_ui-grid-header-z-index: var(--ui-grid-header-z-index, var(--app-ui-grid-header-z-index, 3));--_ui-grid-pinned-cell-z-index: var( --ui-grid-pinned-cell-z-index, var(--app-ui-grid-pinned-cell-z-index, 2) );--_ui-grid-pin-menu-open-z-index: var( --ui-grid-pin-menu-open-z-index, var(--app-ui-grid-pin-menu-open-z-index, 8) );--_ui-grid-pin-menu-z-index: var(--ui-grid-pin-menu-z-index, var(--app-ui-grid-pin-menu-z-index, 20));--_ui-grid-header-cell-gap: var( --ui-grid-header-cell-gap, var(--app-ui-grid-header-cell-gap, 0.75rem) );--_ui-grid-header-cell-padding-block: var( --ui-grid-header-cell-padding-block, var(--app-ui-grid-header-cell-padding-block, 0.85rem) );--_ui-grid-header-cell-padding-inline: var( --ui-grid-header-cell-padding-inline, var(--app-ui-grid-header-cell-padding-inline, 1rem) );--_ui-grid-header-cell-background-active: var( --ui-grid-header-cell-background-active, var( --app-ui-grid-header-cell-background-active, color-mix(in srgb, var(--_ui-grid-accent) 8%, var(--_ui-grid-header-background)) ) );--_ui-grid-pinned-divider-shadow-left: var( --ui-grid-pinned-divider-shadow-left, var( --app-ui-grid-pinned-divider-shadow-left, 2px 0 4px rgba(0, 0, 0, 0.06) ) );--_ui-grid-pinned-divider-shadow-right: var( --ui-grid-pinned-divider-shadow-right, var( --app-ui-grid-pinned-divider-shadow-right, -2px 0 4px rgba(0, 0, 0, 0.06) ) );--_ui-grid-pinned-divider-clip-left: var( --ui-grid-pinned-divider-clip-left, var(--app-ui-grid-pinned-divider-clip-left, inset(0 -4px 0 0)) );--_ui-grid-pinned-divider-clip-right: var( --ui-grid-pinned-divider-clip-right, var(--app-ui-grid-pinned-divider-clip-right, inset(0 0 0 -4px)) );--_ui-grid-header-actions-gap: var( --ui-grid-header-actions-gap, var(--app-ui-grid-header-actions-gap, 0.4rem) );--_ui-grid-control-size: var(--ui-grid-control-size, var(--app-ui-grid-control-size, 2rem));--_ui-grid-control-radius: var( --ui-grid-control-radius, var(--app-ui-grid-control-radius, 999px) );--_ui-grid-control-icon-size: var( --ui-grid-control-icon-size, var(--app-ui-grid-control-icon-size, 1rem) );--_ui-grid-control-background: var( --ui-grid-control-background, var(--app-ui-grid-control-background, var(--_ui-grid-surface)) );--_ui-grid-control-border-color: var( --ui-grid-control-border-color, var(--app-ui-grid-control-border-color, var(--_ui-grid-border-color)) );--_ui-grid-control-color: var( --ui-grid-control-color, var(--app-ui-grid-control-color, var(--_ui-grid-muted-color)) );--_ui-grid-control-background-active: var( --ui-grid-control-background-active, var( --app-ui-grid-control-background-active, color-mix(in srgb, var(--_ui-grid-accent) 12%, var(--_ui-grid-surface)) ) );--_ui-grid-control-border-color-active: var( --ui-grid-control-border-color-active, var( --app-ui-grid-control-border-color-active, color-mix(in srgb, var(--_ui-grid-accent) 35%, var(--_ui-grid-border-color)) ) );--_ui-grid-control-color-active: var( --ui-grid-control-color-active, var(--app-ui-grid-control-color-active, var(--_ui-grid-accent)) );--_ui-grid-pin-menu-offset-block-start: var( --ui-grid-pin-menu-offset-block-start, var(--app-ui-grid-pin-menu-offset-block-start, 0.35rem) );--_ui-grid-pin-menu-gap: var(--ui-grid-pin-menu-gap, var(--app-ui-grid-pin-menu-gap, 0.25rem));--_ui-grid-pin-menu-padding: var( --ui-grid-pin-menu-padding, var(--app-ui-grid-pin-menu-padding, 0.25rem) );--_ui-grid-pin-menu-radius: var(--ui-grid-pin-menu-radius, var(--app-ui-grid-pin-menu-radius, 999px));--_ui-grid-pin-menu-shadow: var( --ui-grid-pin-menu-shadow, var( --app-ui-grid-pin-menu-shadow, 0 10px 24px color-mix(in srgb, var(--_ui-grid-cell-color) 10%, transparent) ) );--_ui-grid-pin-menu-action-size: var( --ui-grid-pin-menu-action-size, var(--app-ui-grid-pin-menu-action-size, 1.75rem) );--_ui-grid-pin-control-collapsed-size: var( --ui-grid-pin-control-collapsed-size, var(--app-ui-grid-pin-control-collapsed-size, 1px) );--_ui-grid-pin-control-transition-duration: var( --ui-grid-pin-control-transition-duration, var(--app-ui-grid-pin-control-transition-duration, 160ms) );--_ui-grid-pin-control-transition-easing: var( --ui-grid-pin-control-transition-easing, var(--app-ui-grid-pin-control-transition-easing, cubic-bezier(0.22, 1, 0.36, 1)) );--_ui-grid-pin-menu-scale-closed: var( --ui-grid-pin-menu-scale-closed, var(--app-ui-grid-pin-menu-scale-closed, 0.72) );--_ui-grid-filter-cell-padding-block-start: var( --ui-grid-filter-cell-padding-block-start, var(--app-ui-grid-filter-cell-padding-block-start, 0.75rem) );--_ui-grid-filter-cell-padding-block-end: var( --ui-grid-filter-cell-padding-block-end, var(--app-ui-grid-filter-cell-padding-block-end, 1rem) );--_ui-grid-filter-cell-padding-inline: var( --ui-grid-filter-cell-padding-inline, var(--app-ui-grid-filter-cell-padding-inline, 1rem) );--_ui-grid-filter-input-padding-block: var( --ui-grid-filter-input-padding-block, var(--app-ui-grid-filter-input-padding-block, 0.55rem) );--_ui-grid-filter-input-padding-inline: var( --ui-grid-filter-input-padding-inline, var(--app-ui-grid-filter-input-padding-inline, 0.7rem) );--_ui-grid-filter-input-focus-outline: var( --ui-grid-filter-input-focus-outline, var( --app-ui-grid-filter-input-focus-outline, 2px solid color-mix(in srgb, var(--_ui-grid-accent) 18%, transparent) ) );--_ui-grid-body-cell-padding-block: var( --ui-grid-body-cell-padding-block, var(--app-ui-grid-body-cell-padding-block, 0.95rem) );--_ui-grid-body-cell-padding-inline: var( --ui-grid-body-cell-padding-inline, var(--app-ui-grid-body-cell-padding-inline, 1rem) );--_ui-grid-cell-shell-gap: var(--ui-grid-cell-shell-gap, var(--app-ui-grid-cell-shell-gap, 0.55rem));--_ui-grid-row-toggle-size: var(--ui-grid-row-toggle-size, var(--app-ui-grid-row-toggle-size, 1.55rem));--_ui-grid-row-toggle-radius: var( --ui-grid-row-toggle-radius, var(--app-ui-grid-row-toggle-radius, 999px) );--_ui-grid-toggle-icon-size: var( --ui-grid-toggle-icon-size, var(--app-ui-grid-toggle-icon-size, 1.1rem) );--_ui-grid-group-disclosure-icon-size: var( --ui-grid-group-disclosure-icon-size, var(--app-ui-grid-group-disclosure-icon-size, 0.9rem) );--_ui-grid-pagination-icon-size: var( --ui-grid-pagination-icon-size, var(--app-ui-grid-pagination-icon-size, 1.2rem) );--_ui-grid-expandable-row-padding-block: var( --ui-grid-expandable-row-padding-block, var(--app-ui-grid-expandable-row-padding-block, 1rem) );--_ui-grid-expandable-row-padding-inline: var( --ui-grid-expandable-row-padding-inline, var(--app-ui-grid-expandable-row-padding-inline, 1.25rem) );--_ui-grid-expandable-row-background: var( --ui-grid-expandable-row-background, var( --app-ui-grid-expandable-row-background, color-mix(in srgb, var(--_ui-grid-accent) 4%, var(--_ui-grid-surface)) ) );--_ui-grid-cell-focus-background: var( --ui-grid-cell-focus-background, var( --app-ui-grid-cell-focus-background, color-mix(in srgb, var(--_ui-grid-accent) 14%, var(--_ui-grid-surface)) ) );--_ui-grid-cell-focus-ring: var( --ui-grid-cell-focus-ring, var( --app-ui-grid-cell-focus-ring, inset 0 0 0 1px color-mix(in srgb, var(--_ui-grid-accent) 28%, transparent) ) );--_ui-grid-cell-editing-background: var( --ui-grid-cell-editing-background, var( --app-ui-grid-cell-editing-background, color-mix(in srgb, var(--_ui-grid-accent) 7%, var(--_ui-grid-surface)) ) );--_ui-grid-cell-editor-border-color: var( --ui-grid-cell-editor-border-color, var( --app-ui-grid-cell-editor-border-color, color-mix(in srgb, var(--_ui-grid-accent) 45%, var(--_ui-grid-border-color)) ) );--_ui-grid-cell-editor-radius: var( --ui-grid-cell-editor-radius, var(--app-ui-grid-cell-editor-radius, calc(var(--_ui-grid-radius) - 1px)) );--_ui-grid-cell-editor-padding-block: var( --ui-grid-cell-editor-padding-block, var(--app-ui-grid-cell-editor-padding-block, 0.45rem) );--_ui-grid-cell-editor-padding-inline: var( --ui-grid-cell-editor-padding-inline, var(--app-ui-grid-cell-editor-padding-inline, 0.55rem) );--_ui-grid-cell-editor-focus-outline: var( --ui-grid-cell-editor-focus-outline, var( --app-ui-grid-cell-editor-focus-outline, 2px solid color-mix(in srgb, var(--_ui-grid-accent) 18%, transparent) ) );--_ui-grid-group-row-gap: var(--ui-grid-group-row-gap, var(--app-ui-grid-group-row-gap, 0.9rem));--_ui-grid-group-row-padding-block: var( --ui-grid-group-row-padding-block, var(--app-ui-grid-group-row-padding-block, 0.9rem) );--_ui-grid-group-row-padding-inline: var( --ui-grid-group-row-padding-inline, var(--app-ui-grid-group-row-padding-inline, 1rem) );--_ui-grid-drag-preview-shadow: var( --ui-grid-drag-preview-shadow, var(--app-ui-grid-drag-preview-shadow, 0 12px 30px rgba(15, 23, 42, 0.16)) );--_ui-grid-drag-preview-radius: var( --ui-grid-drag-preview-radius, var(--app-ui-grid-drag-preview-radius, 0.9rem) );--_ui-grid-drag-placeholder-opacity: var( --ui-grid-drag-placeholder-opacity, var(--app-ui-grid-drag-placeholder-opacity, 0.3) );--_ui-grid-drag-placeholder-background: var( --ui-grid-drag-placeholder-background, var( --app-ui-grid-drag-placeholder-background, color-mix(in srgb, var(--_ui-grid-accent) 9%, var(--_ui-grid-header-background)) ) );--_ui-grid-drag-placeholder-border: var( --ui-grid-drag-placeholder-border, var( --app-ui-grid-drag-placeholder-border, 1px dashed color-mix(in srgb, var(--_ui-grid-accent) 45%, var(--_ui-grid-border-color)) ) );--_ui-grid-drag-placeholder-shadow: var( --ui-grid-drag-placeholder-shadow, var( --app-ui-grid-drag-placeholder-shadow, inset 0 0 0 1px color-mix(in srgb, var(--_ui-grid-accent) 18%, transparent) ) );--_ui-grid-empty-state-gap: var( --ui-grid-empty-state-gap, var(--app-ui-grid-empty-state-gap, 0.35rem) );--_ui-grid-empty-state-min-height: var( --ui-grid-empty-state-min-height, var(--app-ui-grid-empty-state-min-height, 16rem) );--_ui-grid-empty-state-padding: var( --ui-grid-empty-state-padding, var(--app-ui-grid-empty-state-padding, 2rem) );--_ui-grid-pagination-gap: var(--ui-grid-pagination-gap, var(--app-ui-grid-pagination-gap, 1rem));--_ui-grid-pagination-padding-block: var( --ui-grid-pagination-padding-block, var(--app-ui-grid-pagination-padding-block, 0.85rem) );--_ui-grid-pagination-padding-inline: var( --ui-grid-pagination-padding-inline, var(--app-ui-grid-pagination-padding-inline, 1.25rem) );--_ui-grid-pagination-controls-gap: var( --ui-grid-pagination-controls-gap, var(--app-ui-grid-pagination-controls-gap, 0.75rem) );--_ui-grid-pagination-size-gap: var( --ui-grid-pagination-size-gap, var(--app-ui-grid-pagination-size-gap, 0.4rem) );--_ui-grid-pagination-button-padding-block: var( --ui-grid-pagination-button-padding-block, var(--app-ui-grid-pagination-button-padding-block, 0.45rem) );--_ui-grid-pagination-button-padding-inline: var( --ui-grid-pagination-button-padding-inline, var(--app-ui-grid-pagination-button-padding-inline, 0.8rem) );--_ui-grid-pagination-select-padding-block: var( --ui-grid-pagination-select-padding-block, var(--app-ui-grid-pagination-select-padding-block, 0.35rem) );--_ui-grid-pagination-select-padding-inline: var( --ui-grid-pagination-select-padding-inline, var(--app-ui-grid-pagination-select-padding-inline, 0.55rem) );--_ui-grid-status-pill-padding-block: var( --ui-grid-status-pill-padding-block, var(--app-ui-grid-status-pill-padding-block, 0.2rem) );--_ui-grid-status-pill-padding-inline: var( --ui-grid-status-pill-padding-inline, var(--app-ui-grid-status-pill-padding-inline, 0.55rem) );--_ui-grid-status-pill-radius: var( --ui-grid-status-pill-radius, var(--app-ui-grid-status-pill-radius, 999px) );--_ui-grid-status-pill-font-size: var( --ui-grid-status-pill-font-size, var(--app-ui-grid-status-pill-font-size, 0.85rem) );--_ui-grid-status-pill-default-bg: var( --ui-grid-status-pill-default-bg, var(--app-ui-grid-status-pill-default-bg, rgba(15, 23, 42, 0.07)) );display:block;color:var(--_ui-grid-cell-color)}:host *,:host *::before,:host *::after{--ui-grid-border-color: var(--_ui-grid-border-color);--ui-grid-header-background: var(--_ui-grid-header-background);--ui-grid-row-odd: var(--_ui-grid-row-odd);--ui-grid-row-even: var(--_ui-grid-row-even);--ui-grid-row-hover: var(--_ui-grid-row-hover);--ui-grid-row-focus-background: var(--_ui-grid-row-focus-background);--ui-grid-cell-color: var(--_ui-grid-cell-color);--ui-grid-muted-color: var(--_ui-grid-muted-color);--ui-grid-surface: var(--_ui-grid-surface);--ui-grid-radius: var(--_ui-grid-radius);--ui-grid-shadow: var(--_ui-grid-shadow);--ui-grid-header-weight: var(--_ui-grid-header-weight);--ui-grid-accent: var(--_ui-grid-accent);--ui-grid-group-background: var(--_ui-grid-group-background);--ui-grid-status-active-bg: var(--_ui-grid-status-active-bg);--ui-grid-status-active-color: var(--_ui-grid-status-active-color);--ui-grid-status-expansion-bg: var(--_ui-grid-status-expansion-bg);--ui-grid-status-expansion-color: var(--_ui-grid-status-expansion-color);--ui-grid-status-enterprise-bg: var(--_ui-grid-status-enterprise-bg);--ui-grid-status-enterprise-color: var(--_ui-grid-status-enterprise-color);--ui-grid-status-pilot-bg: var(--_ui-grid-status-pilot-bg);--ui-grid-status-pilot-color: var(--_ui-grid-status-pilot-color);--ui-grid-shell-gap: var(--_ui-grid-shell-gap);--ui-grid-hero-gap: var(--_ui-grid-hero-gap);--ui-grid-hero-padding-block: var(--_ui-grid-hero-padding-block);--ui-grid-eyebrow-margin-block-end: var(--_ui-grid-eyebrow-margin-block-end);--ui-grid-eyebrow-letter-spacing: var(--_ui-grid-eyebrow-letter-spacing);--ui-grid-eyebrow-font-size: var(--_ui-grid-eyebrow-font-size);--ui-grid-hero-title-font-size: var(--_ui-grid-hero-title-font-size);--ui-grid-hero-title-line-height: var(--_ui-grid-hero-title-line-height);--ui-grid-hero-deck-max-width: var(--_ui-grid-hero-deck-max-width);--ui-grid-hero-deck-margin-block-start: var(--_ui-grid-hero-deck-margin-block-start);--ui-grid-hero-actions-gap: var(--_ui-grid-hero-actions-gap);--ui-grid-action-radius: var(--_ui-grid-action-radius);--ui-grid-action-padding-block: var(--_ui-grid-action-padding-block);--ui-grid-action-padding-inline: var(--_ui-grid-action-padding-inline);--ui-grid-stats-card-min-width: var(--_ui-grid-stats-card-min-width);--ui-grid-stats-card-padding-block: var(--_ui-grid-stats-card-padding-block);--ui-grid-stats-card-padding-inline: var(--_ui-grid-stats-card-padding-inline);--ui-grid-stats-card-value-font-size: var(--_ui-grid-stats-card-value-font-size);--ui-grid-metrics-gap: var(--_ui-grid-metrics-gap);--ui-grid-metric-card-padding-block: var(--_ui-grid-metric-card-padding-block);--ui-grid-metric-card-padding-inline: var(--_ui-grid-metric-card-padding-inline);--ui-grid-metric-value-font-size: var(--_ui-grid-metric-value-font-size);--ui-grid-toolbar-gap: var(--_ui-grid-toolbar-gap);--ui-grid-toolbar-padding-block: var(--_ui-grid-toolbar-padding-block);--ui-grid-toolbar-padding-inline: var(--_ui-grid-toolbar-padding-inline);--ui-grid-toolbar-inline-gap: var(--_ui-grid-toolbar-inline-gap);--ui-grid-overflow-x: var(--_ui-grid-overflow-x);--ui-grid-overflow-y: var(--_ui-grid-overflow-y);--ui-grid-header-z-index: var(--_ui-grid-header-z-index);--ui-grid-pinned-cell-z-index: var(--_ui-grid-pinned-cell-z-index);--ui-grid-pin-menu-open-z-index: var(--_ui-grid-pin-menu-open-z-index);--ui-grid-pin-menu-z-index: var(--_ui-grid-pin-menu-z-index);--ui-grid-header-cell-gap: var(--_ui-grid-header-cell-gap);--ui-grid-header-cell-padding-block: var(--_ui-grid-header-cell-padding-block);--ui-grid-header-cell-padding-inline: var(--_ui-grid-header-cell-padding-inline);--ui-grid-header-cell-background-active: var(--_ui-grid-header-cell-background-active);--ui-grid-pinned-divider-shadow-left: var(--_ui-grid-pinned-divider-shadow-left);--ui-grid-pinned-divider-shadow-right: var(--_ui-grid-pinned-divider-shadow-right);--ui-grid-pinned-divider-clip-left: var(--_ui-grid-pinned-divider-clip-left);--ui-grid-pinned-divider-clip-right: var(--_ui-grid-pinned-divider-clip-right);--ui-grid-header-actions-gap: var(--_ui-grid-header-actions-gap);--ui-grid-control-size: var(--_ui-grid-control-size);--ui-grid-control-radius: var(--_ui-grid-control-radius);--ui-grid-control-icon-size: var(--_ui-grid-control-icon-size);--ui-grid-control-background: var(--_ui-grid-control-background);--ui-grid-control-border-color: var(--_ui-grid-control-border-color);--ui-grid-control-color: var(--_ui-grid-control-color);--ui-grid-control-background-active: var(--_ui-grid-control-background-active);--ui-grid-control-border-color-active: var(--_ui-grid-control-border-color-active);--ui-grid-control-color-active: var(--_ui-grid-control-color-active);--ui-grid-pin-menu-offset-block-start: var(--_ui-grid-pin-menu-offset-block-start);--ui-grid-pin-menu-gap: var(--_ui-grid-pin-menu-gap);--ui-grid-pin-menu-padding: var(--_ui-grid-pin-menu-padding);--ui-grid-pin-menu-radius: var(--_ui-grid-pin-menu-radius);--ui-grid-pin-menu-shadow: var(--_ui-grid-pin-menu-shadow);--ui-grid-pin-menu-action-size: var(--_ui-grid-pin-menu-action-size);--ui-grid-pin-control-collapsed-size: var(--_ui-grid-pin-control-collapsed-size);--ui-grid-pin-control-transition-duration: var(--_ui-grid-pin-control-transition-duration);--ui-grid-pin-control-transition-easing: var(--_ui-grid-pin-control-transition-easing);--ui-grid-pin-menu-scale-closed: var(--_ui-grid-pin-menu-scale-closed);--ui-grid-filter-cell-padding-block-start: var(--_ui-grid-filter-cell-padding-block-start);--ui-grid-filter-cell-padding-block-end: var(--_ui-grid-filter-cell-padding-block-end);--ui-grid-filter-cell-padding-inline: var(--_ui-grid-filter-cell-padding-inline);--ui-grid-filter-input-padding-block: var(--_ui-grid-filter-input-padding-block);--ui-grid-filter-input-padding-inline: var(--_ui-grid-filter-input-padding-inline);--ui-grid-filter-input-focus-outline: var(--_ui-grid-filter-input-focus-outline);--ui-grid-body-cell-padding-block: var(--_ui-grid-body-cell-padding-block);--ui-grid-body-cell-padding-inline: var(--_ui-grid-body-cell-padding-inline);--ui-grid-cell-shell-gap: var(--_ui-grid-cell-shell-gap);--ui-grid-row-toggle-size: var(--_ui-grid-row-toggle-size);--ui-grid-row-toggle-radius: var(--_ui-grid-row-toggle-radius);--ui-grid-toggle-icon-size: var(--_ui-grid-toggle-icon-size);--ui-grid-group-disclosure-icon-size: var(--_ui-grid-group-disclosure-icon-size);--ui-grid-pagination-icon-size: var(--_ui-grid-pagination-icon-size);--ui-grid-expandable-row-padding-block: var(--_ui-grid-expandable-row-padding-block);--ui-grid-expandable-row-padding-inline: var(--_ui-grid-expandable-row-padding-inline);--ui-grid-expandable-row-background: var(--_ui-grid-expandable-row-background);--ui-grid-cell-focus-background: var(--_ui-grid-cell-focus-background);--ui-grid-cell-focus-ring: var(--_ui-grid-cell-focus-ring);--ui-grid-cell-editing-background: var(--_ui-grid-cell-editing-background);--ui-grid-cell-editor-border-color: var(--_ui-grid-cell-editor-border-color);--ui-grid-cell-editor-radius: var(--_ui-grid-cell-editor-radius);--ui-grid-cell-editor-padding-block: var(--_ui-grid-cell-editor-padding-block);--ui-grid-cell-editor-padding-inline: var(--_ui-grid-cell-editor-padding-inline);--ui-grid-cell-editor-focus-outline: var(--_ui-grid-cell-editor-focus-outline);--ui-grid-group-row-gap: var(--_ui-grid-group-row-gap);--ui-grid-group-row-padding-block: var(--_ui-grid-group-row-padding-block);--ui-grid-group-row-padding-inline: var(--_ui-grid-group-row-padding-inline);--ui-grid-drag-preview-shadow: var(--_ui-grid-drag-preview-shadow);--ui-grid-drag-preview-radius: var(--_ui-grid-drag-preview-radius);--ui-grid-drag-placeholder-opacity: var(--_ui-grid-drag-placeholder-opacity);--ui-grid-drag-placeholder-background: var(--_ui-grid-drag-placeholder-background);--ui-grid-drag-placeholder-border: var(--_ui-grid-drag-placeholder-border);--ui-grid-drag-placeholder-shadow: var(--_ui-grid-drag-placeholder-shadow);--ui-grid-empty-state-gap: var(--_ui-grid-empty-state-gap);--ui-grid-empty-state-min-height: var(--_ui-grid-empty-state-min-height);--ui-grid-empty-state-padding: var(--_ui-grid-empty-state-padding);--ui-grid-pagination-gap: var(--_ui-grid-pagination-gap);--ui-grid-pagination-padding-block: var(--_ui-grid-pagination-padding-block);--ui-grid-pagination-padding-inline: var(--_ui-grid-pagination-padding-inline);--ui-grid-pagination-controls-gap: var(--_ui-grid-pagination-controls-gap);--ui-grid-pagination-size-gap: var(--_ui-grid-pagination-size-gap);--ui-grid-pagination-button-padding-block: var(--_ui-grid-pagination-button-padding-block);--ui-grid-pagination-button-padding-inline: var(--_ui-grid-pagination-button-padding-inline);--ui-grid-pagination-select-padding-block: var(--_ui-grid-pagination-select-padding-block);--ui-grid-pagination-select-padding-inline: var(--_ui-grid-pagination-select-padding-inline);--ui-grid-status-pill-padding-block: var(--_ui-grid-status-pill-padding-block);--ui-grid-status-pill-padding-inline: var(--_ui-grid-status-pill-padding-inline);--ui-grid-status-pill-radius: var(--_ui-grid-status-pill-radius);--ui-grid-status-pill-font-size: var(--_ui-grid-status-pill-font-size);--ui-grid-status-pill-default-bg: var(--_ui-grid-status-pill-default-bg);box-sizing:border-box}:host{isolation:isolate;contain:layout paint}.grid-shell{display:grid;gap:var(--ui-grid-shell-gap)}.grid-hero{display:flex;justify-content:space-between;gap:var(--ui-grid-hero-gap);align-items:end;padding:var(--ui-grid-hero-padding-block) 0;color:var(--ui-grid-cell-color)}.eyebrow{margin:0 0 var(--ui-grid-eyebrow-margin-block-end);text-transform:uppercase;letter-spacing:var(--ui-grid-eyebrow-letter-spacing);font-size:var(--ui-grid-eyebrow-font-size);color:var(--ui-grid-muted-color)}h1{margin:0;font-size:var(--ui-grid-hero-title-font-size);line-height:var(--ui-grid-hero-title-line-height)}.deck{max-width:var(--ui-grid-hero-deck-max-width);margin:var(--ui-grid-hero-deck-margin-block-start) 0 0;color:var(--ui-grid-muted-color)}.hero-actions{display:flex;gap:var(--ui-grid-hero-actions-gap);align-items:center;flex-wrap:wrap}.action{border:0;border-radius:var(--ui-grid-action-radius);padding:var(--ui-grid-action-padding-block) var(--ui-grid-action-padding-inline);font:inherit;cursor:pointer}.action-secondary{background:var(--ui-grid-surface);color:var(--ui-grid-cell-color);border:1px solid var(--ui-grid-border-color)}.stats-card{min-width:var(--ui-grid-stats-card-min-width);padding:var(--ui-grid-stats-card-padding-block) var(--ui-grid-stats-card-padding-inline);border-radius:var(--ui-grid-radius);background:var(--ui-grid-surface);border:1px solid var(--ui-grid-border-color);display:grid}.stats-card span{font-size:var(--ui-grid-stats-card-value-font-size);font-weight:700}.stats-card small{color:var(--ui-grid-muted-color)}.grid-frame{display:grid;grid-template-rows:auto minmax(0, 1fr) auto;height:100%;min-height:0;border-radius:var(--ui-grid-radius);background:var(--ui-grid-surface);border:1px solid var(--ui-grid-border-color);box-shadow:var(--ui-grid-shadow);overflow:hidden}.metrics-strip{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:var(--ui-grid-metrics-gap)}.metrics-strip article{padding:var(--ui-grid-metric-card-padding-block) var(--ui-grid-metric-card-padding-inline);border-radius:var(--ui-grid-radius);background:var(--ui-grid-surface);border:1px solid var(--ui-grid-border-color);display:grid}.metrics-strip strong{font-size:var(--ui-grid-metric-value-font-size)}.metrics-strip span{color:var(--ui-grid-muted-color)}.grid-toolbar{display:flex;justify-content:space-between;gap:var(--ui-grid-toolbar-gap);padding:var(--ui-grid-toolbar-padding-block) var(--ui-grid-toolbar-padding-inline);align-items:center;background:var(--ui-grid-header-background);border-bottom:1px solid var(--ui-grid-border-color)}.grid-toolbar div{display:flex;gap:var(--ui-grid-toolbar-inline-gap);align-items:baseline}.grid-toolbar p{margin:0;color:var(--ui-grid-muted-color)}.grid-table{position:relative;height:100%;min-height:0;width:100%;min-width:0;display:flex;flex-direction:column;background:var(--ui-grid-surface);overflow-anchor:none}.grid-header-strip,.grid-filter-strip{flex:0 0 auto;position:sticky;z-index:var(--ui-grid-header-z-index);background:var(--ui-grid-surface);overflow:hidden}.grid-header-strip{top:0}.grid-filter-strip{top:var(--ui-grid-header-sticky-top, 0px)}.grid-body-viewport{flex:1 1 auto;min-height:0;overflow-x:auto;overflow-anchor:none;overscroll-behavior-x:none}.header-grid,.filter-grid,.body-grid{display:grid;width:100%;min-width:max-content}.header-cell,.filter-cell,.body-cell,.group-row{min-width:0}.header-cell{display:grid;grid-template-columns:minmax(0, 1fr) auto;gap:var(--ui-grid-header-cell-gap);padding:var(--ui-grid-header-cell-padding-block) var(--ui-grid-header-cell-padding-inline);border-bottom:1px solid var(--ui-grid-border-color);background:var(--ui-grid-header-background);font-weight:var(--ui-grid-header-weight);align-items:center;position:relative}.header-cell.is-active{background:var(--ui-grid-header-cell-background-active)}.header-cell[draggable=true]{cursor:grab}.header-cell.is-dragging{opacity:.6}.header-cell.is-drag-target{background:color-mix(in srgb, var(--ui-grid-accent) 9%, var(--ui-grid-header-background));border:1px dashed color-mix(in srgb, var(--ui-grid-accent) 45%, var(--ui-grid-border-color));box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ui-grid-accent) 18%, transparent)}.header-cell.is-pin-menu-open{z-index:var(--ui-grid-pin-menu-open-z-index)}.header-cell.is-pinned,.filter-cell.is-pinned,.body-cell.is-pinned{position:sticky;z-index:var(--ui-grid-pinned-cell-z-index);background:var(--ui-grid-surface)}.header-cell.is-pinned{background:var(--ui-grid-header-background)}.body-cell.is-pinned.body-cell-odd{background:var(--ui-grid-row-odd)}.body-cell.is-pinned:not(.body-cell-odd){background:var(--ui-grid-row-even)}.header-cell.is-pinned-left-last,.filter-cell.is-pinned-left-last,.body-cell.is-pinned-left-last{box-shadow:var(--ui-grid-pinned-divider-shadow-left);clip-path:var(--ui-grid-pinned-divider-clip-left)}.header-cell.is-pinned-right-first,.filter-cell.is-pinned-right-first,.body-cell.is-pinned-right-first{box-shadow:var(--ui-grid-pinned-divider-shadow-right);clip-path:var(--ui-grid-pinned-divider-clip-right)}.header-label{min-width:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:clip;hyphens:none}.header-actions{display:inline-flex;align-items:center;gap:var(--ui-grid-header-actions-gap);justify-self:end}.column-resizer{position:absolute;top:0;right:-4px;width:8px;height:100%;padding:0;border:0;background:rgba(0,0,0,0);cursor:col-resize;z-index:5}.column-resizer::after{content:"";position:absolute;top:20%;bottom:20%;left:50%;width:2px;transform:translateX(-50%);border-radius:999px;background:color-mix(in srgb, var(--_ui-grid-border-color) 80%, transparent);opacity:0;transition:opacity 120ms ease}.header-cell:hover .column-resizer::after,.column-resizer:focus-visible::after{opacity:1}.pin-control{position:relative;display:inline-grid;place-items:center;justify-items:center;min-width:var(--ui-grid-control-size);overflow:hidden}.header-action,.chip-action{display:inline-flex;align-items:center;justify-content:center;width:var(--ui-grid-control-size);height:var(--ui-grid-control-size);display:flex;border:0;background:var(--ui-grid-control-background);padding:0;font:inherit;border-radius:var(--ui-grid-control-radius);cursor:pointer}.header-action-disabled{cursor:default}.header-action svg,.chip-action svg{width:var(--ui-grid-control-icon-size);height:var(--ui-grid-control-icon-size);fill:currentColor}.header-action{color:var(--ui-grid-control-color);border:1px solid var(--ui-grid-control-border-color)}.header-cell.is-active .header-action{color:var(--ui-grid-control-color-active);border-color:var(--ui-grid-control-border-color-active)}.chip-action{border:1px solid var(--ui-grid-control-border-color);color:var(--ui-grid-control-color)}.chip-action-active{background:var(--ui-grid-control-background-active);border-color:var(--ui-grid-control-border-color-active);color:var(--ui-grid-control-color-active)}.pin-trigger{grid-area:1/1;transform-origin:center;transition:width var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),height var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),opacity var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),transform var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),border-color var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),background-color var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),color var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing)}.pin-menu{grid-area:1/1;z-index:var(--ui-grid-pin-menu-z-index);display:grid;grid-auto-rows:var(--ui-grid-pin-menu-action-size);gap:var(--ui-grid-pin-menu-gap);padding:var(--ui-grid-pin-menu-padding);border:1px solid var(--ui-grid-border-color);border-radius:var(--ui-grid-pin-menu-radius);background:var(--ui-grid-surface);box-shadow:var(--ui-grid-pin-menu-shadow);justify-items:center;align-items:center;width:var(--ui-grid-control-size);max-height:var(--ui-grid-pin-control-collapsed-size);opacity:0;pointer-events:none;transform:scale(var(--ui-grid-pin-menu-scale-closed));transform-origin:center;transition:max-height var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),opacity var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),transform var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),padding var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),border-color var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),box-shadow var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing)}.pin-control-open{align-items:start}.pin-control-open .pin-trigger{width:var(--ui-grid-pin-control-collapsed-size);height:var(--ui-grid-pin-control-collapsed-size);opacity:0;transform:scale(0.72);pointer-events:none}.pin-control-open .pin-menu{max-height:calc(var(--ui-grid-pin-menu-action-size)*2 + var(--ui-grid-pin-menu-gap) + var(--ui-grid-pin-menu-padding)*2);opacity:1;pointer-events:auto;transform:scale(1)}.pin-menu-action{display:inline-flex;align-items:center;justify-content:center;width:var(--ui-grid-pin-menu-action-size);height:var(--ui-grid-pin-menu-action-size);border:0;border-radius:var(--ui-grid-control-radius);background:rgba(0,0,0,0);color:var(--ui-grid-control-color);cursor:pointer}.pin-menu-action:hover,.pin-menu-action:focus-visible{outline:0;background:var(--ui-grid-control-background-active);color:var(--ui-grid-control-color-active)}.pin-menu-action svg{width:var(--ui-grid-control-icon-size);height:var(--ui-grid-control-icon-size);fill:currentColor}.body-cell{padding:var(--ui-grid-body-cell-padding-block) var(--ui-grid-body-cell-padding-inline);border-bottom:1px solid var(--ui-grid-border-color);color:var(--ui-grid-cell-color);background:var(--ui-grid-row-even);outline:0}.body-cell.body-cell-odd{background:var(--ui-grid-row-odd)}.cell-shell{display:flex;align-items:center;gap:var(--ui-grid-cell-shell-gap);min-width:0}.cell-value{min-width:0;flex:1 1 auto}.row-toggle{border:1px solid var(--ui-grid-border-color);background:var(--ui-grid-surface);color:var(--ui-grid-cell-color);width:var(--ui-grid-row-toggle-size);height:var(--ui-grid-row-toggle-size);border-radius:var(--ui-grid-row-toggle-radius);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;padding:0;font:inherit}.toggle-icon{width:var(--ui-grid-toggle-icon-size);height:var(--ui-grid-toggle-icon-size);fill:currentColor;pointer-events:none}.group-disclosure-icon{width:var(--ui-grid-group-disclosure-icon-size);height:var(--ui-grid-group-disclosure-icon-size)}.pagination-icon{width:var(--ui-grid-pagination-icon-size);height:var(--ui-grid-pagination-icon-size);fill:currentColor}.expandable-row{padding:var(--ui-grid-expandable-row-padding-block) var(--ui-grid-expandable-row-padding-inline);border-bottom:1px solid var(--ui-grid-border-color);background:var(--ui-grid-expandable-row-background)}.body-grid>.body-cell:hover:not(.row-focused):not(.cell-focused):not(.cell-editing){background:var(--ui-grid-row-hover);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ui-grid-accent) 10%, transparent)}.body-cell.row-focused,.body-grid>.body-cell.row-focused{background:var(--ui-grid-row-focus-background)}.body-cell.cell-focused,.body-grid>.body-cell.cell-focused{background:var(--ui-grid-cell-focus-background);box-shadow:var(--ui-grid-cell-focus-ring)}.body-cell.cell-editing,.body-grid>.body-cell.cell-editing{background:var(--ui-grid-cell-editing-background)}.cell-editor{display:block;width:100%;min-width:0;max-width:100%;border:1px solid var(--ui-grid-cell-editor-border-color);border-radius:var(--ui-grid-cell-editor-radius);background:var(--ui-grid-surface);color:var(--ui-grid-cell-color);padding:var(--ui-grid-cell-editor-padding-block) var(--ui-grid-cell-editor-padding-inline);font:inherit}.cell-editor:focus{outline:var(--ui-grid-cell-editor-focus-outline)}.grid-viewport{width:100%}.grid-virtual-spacer{position:relative;width:max-content;min-width:100%}.grid-virtual-body{position:absolute;left:0}.body-cell.align-center{text-align:center}.body-cell.align-end{text-align:right}.empty-state{display:grid;place-items:center;gap:var(--ui-grid-empty-state-gap);min-height:var(--ui-grid-empty-state-min-height);text-align:center;padding:var(--ui-grid-empty-state-padding);color:var(--ui-grid-muted-color);background:var(--ui-grid-surface)}.empty-state p,.empty-state strong{margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.status-pill{display:inline-flex;align-items:center;justify-content:center;padding:var(--ui-grid-status-pill-padding-block) var(--ui-grid-status-pill-padding-inline);border-radius:var(--ui-grid-status-pill-radius);background:var(--ui-grid-status-pill-default-bg);color:var(--ui-grid-cell-color);font-size:var(--ui-grid-status-pill-font-size);font-weight:700}.status-pill-enterprise{background:var(--ui-grid-status-enterprise-bg);color:var(--ui-grid-status-enterprise-color)}.status-pill-active{background:var(--ui-grid-status-active-bg);color:var(--ui-grid-status-active-color)}.status-pill-expansion{background:var(--ui-grid-status-expansion-bg);color:var(--ui-grid-status-expansion-color)}.status-pill-pilot{background:var(--ui-grid-status-pilot-bg);color:var(--ui-grid-status-pilot-color)}@media(max-width: 900px){.metrics-strip{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-hero,.grid-toolbar{grid-template-columns:1fr;display:grid}.hero-actions{justify-content:space-between}}@media(max-width: 640px){.metrics-strip{grid-template-columns:1fr}}.ui-grid-row-selected,.body-cell.ui-grid-row-selected{background:var(--ui-grid-row-selected-bg, var(--app-ui-grid-row-selected-bg, color-mix(in srgb, var(--ui-grid-accent, #2563eb) 22%, var(--ui-grid-surface, #ffffff))));color:var(--ui-grid-row-selected-color, var(--app-ui-grid-row-selected-color, var(--ui-grid-cell-color)))}.body-cell.ui-grid-row-selected.body-cell-odd{background:var(--ui-grid-row-selected-bg-odd, var(--app-ui-grid-row-selected-bg-odd, color-mix(in srgb, var(--ui-grid-accent, #2563eb) 26%, var(--ui-grid-surface, #ffffff))))}.ui-grid-row-focused,.body-cell.ui-grid-row-focused{outline:1px dashed var(--ui-grid-accent, #2563eb);outline-offset:-1px}.body-cell[data-column=selectionRowHeaderCol],.header-cell[data-column=selectionRowHeaderCol],.filter-cell[data-column=selectionRowHeaderCol]{padding:0 !important;cursor:pointer;user-select:none;-webkit-user-select:none;display:flex;align-items:center;justify-content:center}.body-cell[data-column=selectionRowHeaderCol]>.cell-shell,.body-cell[data-column=selectionRowHeaderCol]>.cell-shell>.cell-content{padding:0 !important;padding-inline-start:0 !important;margin:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.filter-cell[data-column=selectionRowHeaderCol]{padding:0;background:var(--_ui-grid-header-background, var(--ui-grid-header-background, transparent));border-bottom:1px solid var(--_ui-grid-border-color, var(--ui-grid-border-color, transparent))}.ui-grid-selection-row-header-buttons{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;cursor:pointer}.ui-grid-selection-checkbox{display:inline-block;width:16px;height:16px;box-sizing:border-box;border:2px solid currentColor;border-radius:3px;background:rgba(0,0,0,0);color:var(--ui-grid-cell-color, currentColor);position:relative;transition:background 120ms ease,border-color 120ms ease,color 120ms ease;opacity:.7}.ui-grid-selection-row-header-buttons:hover .ui-grid-selection-checkbox{opacity:1;color:var(--ui-grid-accent, var(--_ui-grid-accent, #2563eb))}.ui-grid-selection-checkbox-checked{background:var(--ui-grid-accent, var(--_ui-grid-accent, #2563eb));color:var(--ui-grid-accent, var(--_ui-grid-accent, #2563eb));border-color:var(--ui-grid-accent, var(--_ui-grid-accent, #2563eb));opacity:1}.ui-grid-selection-checkbox-checked::after{content:"";position:absolute;left:3px;top:0;width:5px;height:9px;border:2px solid var(--ui-grid-surface, var(--_ui-grid-surface, #ffffff));border-top:0;border-left:0;transform:rotate(45deg)}.ui-grid-selection-checkbox-disabled{opacity:.3;cursor:not-allowed}.ui-grid-selection-select-all{display:inline-flex;align-items:center;justify-content:center;background:rgba(0,0,0,0);border:0;padding:0;margin:0;cursor:pointer;width:100%;height:100%}.ui-grid-selection-select-all:focus-visible{outline:2px solid var(--_ui-grid-accent, var(--ui-grid-accent, #2563eb));outline-offset:-2px}.grid-body-viewport:has([data-column=selectionRowHeaderCol]){user-select:none;-webkit-user-select:none}.body-cell.ui-grid-row-dirty{color:var(--ui-grid-row-dirty-color, var(--app-ui-grid-row-dirty-color, #610B38));background:var(--ui-grid-row-dirty-bg, var(--app-ui-grid-row-dirty-bg, color-mix(in srgb, var(--ui-grid-accent, #2563eb) 8%, var(--ui-grid-surface, #ffffff))))}.body-cell.ui-grid-row-saving{color:var(--ui-grid-row-saving-color, var(--app-ui-grid-row-saving-color, #848484)) !important;opacity:var(--ui-grid-row-saving-opacity, 0.75);cursor:progress}.body-cell.ui-grid-row-error{color:var(--ui-grid-row-error-color, var(--app-ui-grid-row-error-color, #FF0000)) !important;background:var(--ui-grid-row-error-bg, var(--app-ui-grid-row-error-bg, color-mix(in srgb, #ff0000 14%, var(--ui-grid-surface, #ffffff))))}.body-cell.ui-grid-cell-invalid{position:relative;background:var(--ui-grid-cell-invalid-bg, var(--app-ui-grid-cell-invalid-bg, color-mix(in srgb, #ff0000 10%, var(--ui-grid-surface, #ffffff))))}.body-cell.ui-grid-cell-invalid::after{content:"";position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 var(--ui-grid-cell-invalid-marker-size, 8px) var(--ui-grid-cell-invalid-marker-size, 8px) 0;border-color:rgba(0,0,0,0) var(--ui-grid-cell-invalid-marker-color, #ff0000) rgba(0,0,0,0) rgba(0,0,0,0);pointer-events:none}.filter-cell{padding:var(--ui-grid-filter-cell-padding-block-start) var(--ui-grid-filter-cell-padding-inline) var(--ui-grid-filter-cell-padding-block-end);border-bottom:1px solid var(--ui-grid-border-color);background:var(--ui-grid-header-background)}.filter-cell input{width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--ui-grid-border-color);border-radius:var(--ui-grid-radius);background:var(--ui-grid-surface);padding:var(--ui-grid-filter-input-padding-block) var(--ui-grid-filter-input-padding-inline);font:inherit}.filter-cell input:focus{outline:var(--ui-grid-filter-input-focus-outline);border-color:var(--ui-grid-accent)}.group-row{display:flex;align-items:center;gap:var(--ui-grid-group-row-gap);border:0;width:100%;padding:var(--ui-grid-group-row-padding-block) var(--ui-grid-group-row-padding-inline);background:var(--ui-grid-group-background);border-bottom:1px solid var(--ui-grid-border-color);color:var(--ui-grid-cell-color);cursor:pointer;text-align:left}.group-row span,.group-row small{color:var(--ui-grid-muted-color)}.pagination-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-grid-pagination-gap);padding:var(--ui-grid-pagination-padding-block) var(--ui-grid-pagination-padding-inline);border-top:1px solid var(--ui-grid-border-color);background:var(--ui-grid-header-background)}.pagination-bar p{margin:0;color:var(--ui-grid-muted-color)}.pagination-controls{display:flex;align-items:center;gap:var(--ui-grid-pagination-controls-gap);flex-wrap:wrap}.pagination-button{padding:var(--ui-grid-pagination-button-padding-block) var(--ui-grid-pagination-button-padding-inline)}.pagination-size{display:inline-flex;align-items:center;gap:var(--ui-grid-pagination-size-gap)}.pagination-size select{border:1px solid var(--ui-grid-border-color);border-radius:var(--ui-grid-radius);background:var(--ui-grid-surface);padding:var(--ui-grid-pagination-select-padding-block) var(--ui-grid-pagination-select-padding-inline);font:inherit}';
-
 // src/adopt-styles.ts
 var sheetsSupported = null;
 function supportsAdoptedStyleSheets() {
@@ -7705,9 +7828,36 @@ function adoptStyles(shadowRoot, css, key) {
     sheetCache.set(key, sheet);
   }
   if (!shadowRoot.adoptedStyleSheets.includes(sheet)) {
-    shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, sheet];
+    const own = shadowRoot.adoptedStyleSheets.filter((s) => !isUserSheet(shadowRoot, s));
+    shadowRoot.adoptedStyleSheets = [...own, sheet, ...userSheetsOf(shadowRoot)];
   }
 }
+var userSheets = /* @__PURE__ */ new WeakMap();
+function userSheetsOf(shadowRoot) {
+  return userSheets.get(shadowRoot) ?? [];
+}
+function isUserSheet(shadowRoot, sheet) {
+  return userSheetsOf(shadowRoot).includes(sheet);
+}
+function addUserStyles(shadowRoot, css) {
+  if (!supportsAdoptedStyleSheets()) {
+    const styleEl = document.createElement("style");
+    styleEl.textContent = css;
+    shadowRoot.append(styleEl);
+    return () => styleEl.remove();
+  }
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(css);
+  userSheets.set(shadowRoot, [...userSheetsOf(shadowRoot), sheet]);
+  shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, sheet];
+  return () => {
+    userSheets.set(shadowRoot, userSheetsOf(shadowRoot).filter((s) => s !== sheet));
+    shadowRoot.adoptedStyleSheets = shadowRoot.adoptedStyleSheets.filter((s) => s !== sheet);
+  };
+}
+
+// scss-inline:/home/runner/work/ui-grid/ui-grid/projects/ui-grid-vanilla/src/ui-grid-shell.scss
+var ui_grid_shell_default = ':host{--_ui-grid-border-color: var(--ui-grid-border-color, var(--app-ui-grid-border-color, #d4d4d8));--_ui-grid-header-background: var( --ui-grid-header-background, var(--app-ui-grid-header-background, #f3f4f6) );--_ui-grid-row-odd: var(--ui-grid-row-odd, var(--app-ui-grid-row-odd, #fcfcfd));--_ui-grid-row-even: var(--ui-grid-row-even, var(--app-ui-grid-row-even, #f7f7f8));--_ui-grid-row-hover: var( --ui-grid-row-hover, var( --app-ui-grid-row-hover, color-mix(in srgb, var(--_ui-grid-accent) 4%, var(--_ui-grid-surface)) ) );--_ui-grid-row-focus-background: var( --ui-grid-row-focus-background, var( --app-ui-grid-row-focus-background, color-mix(in srgb, var(--_ui-grid-accent) 9%, var(--_ui-grid-surface)) ) );--_ui-grid-cell-color: var(--ui-grid-cell-color, var(--app-ui-grid-cell-color, #111827));--_ui-grid-muted-color: var(--ui-grid-muted-color, var(--app-ui-grid-muted-color, #6b7280));--_ui-grid-surface: var(--ui-grid-surface, var(--app-ui-grid-surface, #ffffff));--_ui-grid-radius: var(--ui-grid-radius, var(--app-ui-grid-radius, 4px));--_ui-grid-shadow: var( --ui-grid-shadow, var(--app-ui-grid-shadow, 0 10px 24px rgba(15, 23, 42, 0.08)) );--_ui-grid-header-weight: var(--ui-grid-header-weight, var(--app-ui-grid-header-weight, 700));--_ui-grid-accent: var(--ui-grid-accent, var(--app-ui-grid-accent, #2563eb));--_ui-grid-group-background: var( --ui-grid-group-background, var(--app-ui-grid-group-background, #eceff3) );--_ui-grid-status-active-bg: var( --ui-grid-status-active-bg, var(--app-ui-grid-status-active-bg, rgba(22, 163, 74, 0.14)) );--_ui-grid-status-active-color: var( --ui-grid-status-active-color, var(--app-ui-grid-status-active-color, #166534) );--_ui-grid-status-expansion-bg: var( --ui-grid-status-expansion-bg, var(--app-ui-grid-status-expansion-bg, rgba(37, 99, 235, 0.14)) );--_ui-grid-status-expansion-color: var( --ui-grid-status-expansion-color, var(--app-ui-grid-status-expansion-color, #1d4ed8) );--_ui-grid-status-enterprise-bg: var( --ui-grid-status-enterprise-bg, var(--app-ui-grid-status-enterprise-bg, rgba(15, 118, 110, 0.14)) );--_ui-grid-status-enterprise-color: var( --ui-grid-status-enterprise-color, var(--app-ui-grid-status-enterprise-color, #115e59) );--_ui-grid-status-pilot-bg: var( --ui-grid-status-pilot-bg, var(--app-ui-grid-status-pilot-bg, rgba(234, 88, 12, 0.14)) );--_ui-grid-status-pilot-color: var( --ui-grid-status-pilot-color, var(--app-ui-grid-status-pilot-color, #c2410c) );--_ui-grid-shell-gap: var(--ui-grid-shell-gap, var(--app-ui-grid-shell-gap, 1.5rem));--_ui-grid-hero-gap: var(--ui-grid-hero-gap, var(--app-ui-grid-hero-gap, 1.5rem));--_ui-grid-hero-padding-block: var( --ui-grid-hero-padding-block, var(--app-ui-grid-hero-padding-block, 1rem) );--_ui-grid-eyebrow-margin-block-end: var( --ui-grid-eyebrow-margin-block-end, var(--app-ui-grid-eyebrow-margin-block-end, 0.5rem) );--_ui-grid-eyebrow-letter-spacing: var( --ui-grid-eyebrow-letter-spacing, var(--app-ui-grid-eyebrow-letter-spacing, 0.18em) );--_ui-grid-eyebrow-font-size: var( --ui-grid-eyebrow-font-size, var(--app-ui-grid-eyebrow-font-size, 0.72rem) );--_ui-grid-hero-title-font-size: var( --ui-grid-hero-title-font-size, var(--app-ui-grid-hero-title-font-size, clamp(1.4rem, 2vw, 2rem)) );--_ui-grid-hero-title-line-height: var( --ui-grid-hero-title-line-height, var(--app-ui-grid-hero-title-line-height, 1.1) );--_ui-grid-hero-deck-max-width: var( --ui-grid-hero-deck-max-width, var(--app-ui-grid-hero-deck-max-width, 56ch) );--_ui-grid-hero-deck-margin-block-start: var( --ui-grid-hero-deck-margin-block-start, var(--app-ui-grid-hero-deck-margin-block-start, 0.75rem) );--_ui-grid-hero-actions-gap: var( --ui-grid-hero-actions-gap, var(--app-ui-grid-hero-actions-gap, 1rem) );--_ui-grid-action-radius: var(--ui-grid-action-radius, var(--app-ui-grid-action-radius, 999px));--_ui-grid-action-padding-block: var( --ui-grid-action-padding-block, var(--app-ui-grid-action-padding-block, 0.8rem) );--_ui-grid-action-padding-inline: var( --ui-grid-action-padding-inline, var(--app-ui-grid-action-padding-inline, 1.1rem) );--_ui-grid-stats-card-min-width: var( --ui-grid-stats-card-min-width, var(--app-ui-grid-stats-card-min-width, 8rem) );--_ui-grid-stats-card-padding-block: var( --ui-grid-stats-card-padding-block, var(--app-ui-grid-stats-card-padding-block, 0.85rem) );--_ui-grid-stats-card-padding-inline: var( --ui-grid-stats-card-padding-inline, var(--app-ui-grid-stats-card-padding-inline, 1rem) );--_ui-grid-stats-card-value-font-size: var( --ui-grid-stats-card-value-font-size, var(--app-ui-grid-stats-card-value-font-size, 1.9rem) );--_ui-grid-metrics-gap: var(--ui-grid-metrics-gap, var(--app-ui-grid-metrics-gap, 1rem));--_ui-grid-metric-card-padding-block: var( --ui-grid-metric-card-padding-block, var(--app-ui-grid-metric-card-padding-block, 1rem) );--_ui-grid-metric-card-padding-inline: var( --ui-grid-metric-card-padding-inline, var(--app-ui-grid-metric-card-padding-inline, 1.1rem) );--_ui-grid-metric-value-font-size: var( --ui-grid-metric-value-font-size, var(--app-ui-grid-metric-value-font-size, 1.3rem) );--_ui-grid-toolbar-gap: var(--ui-grid-toolbar-gap, var(--app-ui-grid-toolbar-gap, 1rem));--_ui-grid-toolbar-padding-block: var( --ui-grid-toolbar-padding-block, var(--app-ui-grid-toolbar-padding-block, 1rem) );--_ui-grid-toolbar-padding-inline: var( --ui-grid-toolbar-padding-inline, var(--app-ui-grid-toolbar-padding-inline, 1.25rem) );--_ui-grid-toolbar-inline-gap: var( --ui-grid-toolbar-inline-gap, var(--app-ui-grid-toolbar-inline-gap, 0.4rem) );--_ui-grid-overflow-x: var(--ui-grid-overflow-x, var(--app-ui-grid-overflow-x, auto));--_ui-grid-overflow-y: var(--ui-grid-overflow-y, var(--app-ui-grid-overflow-y, auto));--_ui-grid-header-z-index: var(--ui-grid-header-z-index, var(--app-ui-grid-header-z-index, 3));--_ui-grid-pinned-cell-z-index: var( --ui-grid-pinned-cell-z-index, var(--app-ui-grid-pinned-cell-z-index, 2) );--_ui-grid-pin-menu-open-z-index: var( --ui-grid-pin-menu-open-z-index, var(--app-ui-grid-pin-menu-open-z-index, 8) );--_ui-grid-pin-menu-z-index: var(--ui-grid-pin-menu-z-index, var(--app-ui-grid-pin-menu-z-index, 20));--_ui-grid-header-cell-gap: var( --ui-grid-header-cell-gap, var(--app-ui-grid-header-cell-gap, 0.75rem) );--_ui-grid-header-cell-padding-block: var( --ui-grid-header-cell-padding-block, var(--app-ui-grid-header-cell-padding-block, 0.85rem) );--_ui-grid-header-cell-padding-inline: var( --ui-grid-header-cell-padding-inline, var(--app-ui-grid-header-cell-padding-inline, 1rem) );--_ui-grid-header-cell-background-active: var( --ui-grid-header-cell-background-active, var( --app-ui-grid-header-cell-background-active, color-mix(in srgb, var(--_ui-grid-accent) 8%, var(--_ui-grid-header-background)) ) );--_ui-grid-pinned-divider-shadow-left: var( --ui-grid-pinned-divider-shadow-left, var( --app-ui-grid-pinned-divider-shadow-left, 2px 0 4px rgba(0, 0, 0, 0.06) ) );--_ui-grid-pinned-divider-shadow-right: var( --ui-grid-pinned-divider-shadow-right, var( --app-ui-grid-pinned-divider-shadow-right, -2px 0 4px rgba(0, 0, 0, 0.06) ) );--_ui-grid-pinned-divider-clip-left: var( --ui-grid-pinned-divider-clip-left, var(--app-ui-grid-pinned-divider-clip-left, inset(0 -4px 0 0)) );--_ui-grid-pinned-divider-clip-right: var( --ui-grid-pinned-divider-clip-right, var(--app-ui-grid-pinned-divider-clip-right, inset(0 0 0 -4px)) );--_ui-grid-header-actions-gap: var( --ui-grid-header-actions-gap, var(--app-ui-grid-header-actions-gap, 0.4rem) );--_ui-grid-control-size: var(--ui-grid-control-size, var(--app-ui-grid-control-size, 2rem));--_ui-grid-control-radius: var( --ui-grid-control-radius, var(--app-ui-grid-control-radius, 999px) );--_ui-grid-control-icon-size: var( --ui-grid-control-icon-size, var(--app-ui-grid-control-icon-size, 1rem) );--_ui-grid-control-background: var( --ui-grid-control-background, var(--app-ui-grid-control-background, var(--_ui-grid-surface)) );--_ui-grid-control-border-color: var( --ui-grid-control-border-color, var(--app-ui-grid-control-border-color, var(--_ui-grid-border-color)) );--_ui-grid-control-color: var( --ui-grid-control-color, var(--app-ui-grid-control-color, var(--_ui-grid-muted-color)) );--_ui-grid-control-background-active: var( --ui-grid-control-background-active, var( --app-ui-grid-control-background-active, color-mix(in srgb, var(--_ui-grid-accent) 12%, var(--_ui-grid-surface)) ) );--_ui-grid-control-border-color-active: var( --ui-grid-control-border-color-active, var( --app-ui-grid-control-border-color-active, color-mix(in srgb, var(--_ui-grid-accent) 35%, var(--_ui-grid-border-color)) ) );--_ui-grid-control-color-active: var( --ui-grid-control-color-active, var(--app-ui-grid-control-color-active, var(--_ui-grid-accent)) );--_ui-grid-pin-menu-offset-block-start: var( --ui-grid-pin-menu-offset-block-start, var(--app-ui-grid-pin-menu-offset-block-start, 0.35rem) );--_ui-grid-pin-menu-gap: var(--ui-grid-pin-menu-gap, var(--app-ui-grid-pin-menu-gap, 0.25rem));--_ui-grid-pin-menu-padding: var( --ui-grid-pin-menu-padding, var(--app-ui-grid-pin-menu-padding, 0.25rem) );--_ui-grid-pin-menu-radius: var(--ui-grid-pin-menu-radius, var(--app-ui-grid-pin-menu-radius, 999px));--_ui-grid-pin-menu-shadow: var( --ui-grid-pin-menu-shadow, var( --app-ui-grid-pin-menu-shadow, 0 10px 24px color-mix(in srgb, var(--_ui-grid-cell-color) 10%, transparent) ) );--_ui-grid-pin-menu-direction: var( --ui-grid-pin-menu-direction, var(--app-ui-grid-pin-menu-direction, row) );--_ui-grid-pin-menu-action-size: var( --ui-grid-pin-menu-action-size, var(--app-ui-grid-pin-menu-action-size, 1.75rem) );--_ui-grid-pin-control-collapsed-size: var( --ui-grid-pin-control-collapsed-size, var(--app-ui-grid-pin-control-collapsed-size, 1px) );--_ui-grid-pin-control-transition-duration: var( --ui-grid-pin-control-transition-duration, var(--app-ui-grid-pin-control-transition-duration, 160ms) );--_ui-grid-pin-control-transition-easing: var( --ui-grid-pin-control-transition-easing, var(--app-ui-grid-pin-control-transition-easing, cubic-bezier(0.22, 1, 0.36, 1)) );--_ui-grid-pin-menu-scale-closed: var( --ui-grid-pin-menu-scale-closed, var(--app-ui-grid-pin-menu-scale-closed, 0.72) );--_ui-grid-filter-cell-padding-block-start: var( --ui-grid-filter-cell-padding-block-start, var(--app-ui-grid-filter-cell-padding-block-start, 0.75rem) );--_ui-grid-filter-cell-padding-block-end: var( --ui-grid-filter-cell-padding-block-end, var(--app-ui-grid-filter-cell-padding-block-end, 1rem) );--_ui-grid-filter-cell-padding-inline: var( --ui-grid-filter-cell-padding-inline, var(--app-ui-grid-filter-cell-padding-inline, 1rem) );--_ui-grid-filter-input-padding-block: var( --ui-grid-filter-input-padding-block, var(--app-ui-grid-filter-input-padding-block, 0.55rem) );--_ui-grid-filter-input-padding-inline: var( --ui-grid-filter-input-padding-inline, var(--app-ui-grid-filter-input-padding-inline, 0.7rem) );--_ui-grid-filter-input-focus-outline: var( --ui-grid-filter-input-focus-outline, var( --app-ui-grid-filter-input-focus-outline, 2px solid color-mix(in srgb, var(--_ui-grid-accent) 18%, transparent) ) );--_ui-grid-body-cell-padding-block: var( --ui-grid-body-cell-padding-block, var(--app-ui-grid-body-cell-padding-block, 0.95rem) );--_ui-grid-body-cell-padding-inline: var( --ui-grid-body-cell-padding-inline, var(--app-ui-grid-body-cell-padding-inline, 1rem) );--_ui-grid-body-cell-align: var(--ui-grid-body-cell-align, var(--app-ui-grid-body-cell-align, start));--_ui-grid-cell-shell-gap: var(--ui-grid-cell-shell-gap, var(--app-ui-grid-cell-shell-gap, 0.55rem));--_ui-grid-row-toggle-size: var(--ui-grid-row-toggle-size, var(--app-ui-grid-row-toggle-size, 1.55rem));--_ui-grid-row-toggle-radius: var( --ui-grid-row-toggle-radius, var(--app-ui-grid-row-toggle-radius, 999px) );--_ui-grid-toggle-icon-size: var( --ui-grid-toggle-icon-size, var(--app-ui-grid-toggle-icon-size, 1.1rem) );--_ui-grid-group-disclosure-icon-size: var( --ui-grid-group-disclosure-icon-size, var(--app-ui-grid-group-disclosure-icon-size, 0.9rem) );--_ui-grid-pagination-icon-size: var( --ui-grid-pagination-icon-size, var(--app-ui-grid-pagination-icon-size, 1.2rem) );--_ui-grid-expandable-row-padding-block: var( --ui-grid-expandable-row-padding-block, var(--app-ui-grid-expandable-row-padding-block, 1rem) );--_ui-grid-expandable-row-padding-inline: var( --ui-grid-expandable-row-padding-inline, var(--app-ui-grid-expandable-row-padding-inline, 1.25rem) );--_ui-grid-expandable-row-background: var( --ui-grid-expandable-row-background, var( --app-ui-grid-expandable-row-background, color-mix(in srgb, var(--_ui-grid-accent) 4%, var(--_ui-grid-surface)) ) );--_ui-grid-cell-focus-background: var( --ui-grid-cell-focus-background, var( --app-ui-grid-cell-focus-background, color-mix(in srgb, var(--_ui-grid-accent) 14%, var(--_ui-grid-surface)) ) );--_ui-grid-cell-focus-ring: var( --ui-grid-cell-focus-ring, var( --app-ui-grid-cell-focus-ring, inset 0 0 0 1px color-mix(in srgb, var(--_ui-grid-accent) 28%, transparent) ) );--_ui-grid-cell-editing-background: var( --ui-grid-cell-editing-background, var( --app-ui-grid-cell-editing-background, color-mix(in srgb, var(--_ui-grid-accent) 7%, var(--_ui-grid-surface)) ) );--_ui-grid-cell-editor-border-color: var( --ui-grid-cell-editor-border-color, var( --app-ui-grid-cell-editor-border-color, color-mix(in srgb, var(--_ui-grid-accent) 45%, var(--_ui-grid-border-color)) ) );--_ui-grid-cell-editor-radius: var( --ui-grid-cell-editor-radius, var(--app-ui-grid-cell-editor-radius, calc(var(--_ui-grid-radius) - 1px)) );--_ui-grid-cell-editor-padding-block: var( --ui-grid-cell-editor-padding-block, var(--app-ui-grid-cell-editor-padding-block, 0.45rem) );--_ui-grid-cell-editor-padding-inline: var( --ui-grid-cell-editor-padding-inline, var(--app-ui-grid-cell-editor-padding-inline, 0.55rem) );--_ui-grid-cell-editor-focus-outline: var( --ui-grid-cell-editor-focus-outline, var( --app-ui-grid-cell-editor-focus-outline, 2px solid color-mix(in srgb, var(--_ui-grid-accent) 18%, transparent) ) );--_ui-grid-group-row-gap: var(--ui-grid-group-row-gap, var(--app-ui-grid-group-row-gap, 0.9rem));--_ui-grid-group-row-padding-block: var( --ui-grid-group-row-padding-block, var(--app-ui-grid-group-row-padding-block, 0.9rem) );--_ui-grid-group-row-padding-inline: var( --ui-grid-group-row-padding-inline, var(--app-ui-grid-group-row-padding-inline, 1rem) );--_ui-grid-drag-preview-shadow: var( --ui-grid-drag-preview-shadow, var(--app-ui-grid-drag-preview-shadow, 0 12px 30px rgba(15, 23, 42, 0.16)) );--_ui-grid-drag-preview-radius: var( --ui-grid-drag-preview-radius, var(--app-ui-grid-drag-preview-radius, 0.9rem) );--_ui-grid-drag-placeholder-opacity: var( --ui-grid-drag-placeholder-opacity, var(--app-ui-grid-drag-placeholder-opacity, 0.3) );--_ui-grid-drag-placeholder-background: var( --ui-grid-drag-placeholder-background, var( --app-ui-grid-drag-placeholder-background, color-mix(in srgb, var(--_ui-grid-accent) 9%, var(--_ui-grid-header-background)) ) );--_ui-grid-drag-placeholder-border: var( --ui-grid-drag-placeholder-border, var( --app-ui-grid-drag-placeholder-border, 1px dashed color-mix(in srgb, var(--_ui-grid-accent) 45%, var(--_ui-grid-border-color)) ) );--_ui-grid-drag-placeholder-shadow: var( --ui-grid-drag-placeholder-shadow, var( --app-ui-grid-drag-placeholder-shadow, inset 0 0 0 1px color-mix(in srgb, var(--_ui-grid-accent) 18%, transparent) ) );--_ui-grid-empty-state-gap: var( --ui-grid-empty-state-gap, var(--app-ui-grid-empty-state-gap, 0.35rem) );--_ui-grid-empty-state-min-height: var( --ui-grid-empty-state-min-height, var(--app-ui-grid-empty-state-min-height, 16rem) );--_ui-grid-empty-state-padding: var( --ui-grid-empty-state-padding, var(--app-ui-grid-empty-state-padding, 2rem) );--_ui-grid-pagination-gap: var(--ui-grid-pagination-gap, var(--app-ui-grid-pagination-gap, 1rem));--_ui-grid-pagination-padding-block: var( --ui-grid-pagination-padding-block, var(--app-ui-grid-pagination-padding-block, 0.85rem) );--_ui-grid-pagination-padding-inline: var( --ui-grid-pagination-padding-inline, var(--app-ui-grid-pagination-padding-inline, 1.25rem) );--_ui-grid-pagination-controls-gap: var( --ui-grid-pagination-controls-gap, var(--app-ui-grid-pagination-controls-gap, 0.75rem) );--_ui-grid-pagination-size-gap: var( --ui-grid-pagination-size-gap, var(--app-ui-grid-pagination-size-gap, 0.4rem) );--_ui-grid-pagination-button-padding-block: var( --ui-grid-pagination-button-padding-block, var(--app-ui-grid-pagination-button-padding-block, 0.45rem) );--_ui-grid-pagination-button-padding-inline: var( --ui-grid-pagination-button-padding-inline, var(--app-ui-grid-pagination-button-padding-inline, 0.8rem) );--_ui-grid-pagination-select-padding-block: var( --ui-grid-pagination-select-padding-block, var(--app-ui-grid-pagination-select-padding-block, 0.35rem) );--_ui-grid-pagination-select-padding-inline: var( --ui-grid-pagination-select-padding-inline, var(--app-ui-grid-pagination-select-padding-inline, 0.55rem) );--_ui-grid-status-pill-padding-block: var( --ui-grid-status-pill-padding-block, var(--app-ui-grid-status-pill-padding-block, 0.2rem) );--_ui-grid-status-pill-padding-inline: var( --ui-grid-status-pill-padding-inline, var(--app-ui-grid-status-pill-padding-inline, 0.55rem) );--_ui-grid-status-pill-radius: var( --ui-grid-status-pill-radius, var(--app-ui-grid-status-pill-radius, 999px) );--_ui-grid-status-pill-font-size: var( --ui-grid-status-pill-font-size, var(--app-ui-grid-status-pill-font-size, 0.85rem) );--_ui-grid-status-pill-default-bg: var( --ui-grid-status-pill-default-bg, var(--app-ui-grid-status-pill-default-bg, rgba(15, 23, 42, 0.07)) );display:block;color:var(--_ui-grid-cell-color)}:host *,:host *::before,:host *::after{--ui-grid-border-color: var(--_ui-grid-border-color);--ui-grid-header-background: var(--_ui-grid-header-background);--ui-grid-row-odd: var(--_ui-grid-row-odd);--ui-grid-row-even: var(--_ui-grid-row-even);--ui-grid-row-hover: var(--_ui-grid-row-hover);--ui-grid-row-focus-background: var(--_ui-grid-row-focus-background);--ui-grid-cell-color: var(--_ui-grid-cell-color);--ui-grid-muted-color: var(--_ui-grid-muted-color);--ui-grid-surface: var(--_ui-grid-surface);--ui-grid-radius: var(--_ui-grid-radius);--ui-grid-shadow: var(--_ui-grid-shadow);--ui-grid-header-weight: var(--_ui-grid-header-weight);--ui-grid-accent: var(--_ui-grid-accent);--ui-grid-group-background: var(--_ui-grid-group-background);--ui-grid-status-active-bg: var(--_ui-grid-status-active-bg);--ui-grid-status-active-color: var(--_ui-grid-status-active-color);--ui-grid-status-expansion-bg: var(--_ui-grid-status-expansion-bg);--ui-grid-status-expansion-color: var(--_ui-grid-status-expansion-color);--ui-grid-status-enterprise-bg: var(--_ui-grid-status-enterprise-bg);--ui-grid-status-enterprise-color: var(--_ui-grid-status-enterprise-color);--ui-grid-status-pilot-bg: var(--_ui-grid-status-pilot-bg);--ui-grid-status-pilot-color: var(--_ui-grid-status-pilot-color);--ui-grid-shell-gap: var(--_ui-grid-shell-gap);--ui-grid-hero-gap: var(--_ui-grid-hero-gap);--ui-grid-hero-padding-block: var(--_ui-grid-hero-padding-block);--ui-grid-eyebrow-margin-block-end: var(--_ui-grid-eyebrow-margin-block-end);--ui-grid-eyebrow-letter-spacing: var(--_ui-grid-eyebrow-letter-spacing);--ui-grid-eyebrow-font-size: var(--_ui-grid-eyebrow-font-size);--ui-grid-hero-title-font-size: var(--_ui-grid-hero-title-font-size);--ui-grid-hero-title-line-height: var(--_ui-grid-hero-title-line-height);--ui-grid-hero-deck-max-width: var(--_ui-grid-hero-deck-max-width);--ui-grid-hero-deck-margin-block-start: var(--_ui-grid-hero-deck-margin-block-start);--ui-grid-hero-actions-gap: var(--_ui-grid-hero-actions-gap);--ui-grid-action-radius: var(--_ui-grid-action-radius);--ui-grid-action-padding-block: var(--_ui-grid-action-padding-block);--ui-grid-action-padding-inline: var(--_ui-grid-action-padding-inline);--ui-grid-stats-card-min-width: var(--_ui-grid-stats-card-min-width);--ui-grid-stats-card-padding-block: var(--_ui-grid-stats-card-padding-block);--ui-grid-stats-card-padding-inline: var(--_ui-grid-stats-card-padding-inline);--ui-grid-stats-card-value-font-size: var(--_ui-grid-stats-card-value-font-size);--ui-grid-metrics-gap: var(--_ui-grid-metrics-gap);--ui-grid-metric-card-padding-block: var(--_ui-grid-metric-card-padding-block);--ui-grid-metric-card-padding-inline: var(--_ui-grid-metric-card-padding-inline);--ui-grid-metric-value-font-size: var(--_ui-grid-metric-value-font-size);--ui-grid-toolbar-gap: var(--_ui-grid-toolbar-gap);--ui-grid-toolbar-padding-block: var(--_ui-grid-toolbar-padding-block);--ui-grid-toolbar-padding-inline: var(--_ui-grid-toolbar-padding-inline);--ui-grid-toolbar-inline-gap: var(--_ui-grid-toolbar-inline-gap);--ui-grid-overflow-x: var(--_ui-grid-overflow-x);--ui-grid-overflow-y: var(--_ui-grid-overflow-y);--ui-grid-header-z-index: var(--_ui-grid-header-z-index);--ui-grid-pinned-cell-z-index: var(--_ui-grid-pinned-cell-z-index);--ui-grid-pin-menu-open-z-index: var(--_ui-grid-pin-menu-open-z-index);--ui-grid-pin-menu-z-index: var(--_ui-grid-pin-menu-z-index);--ui-grid-header-cell-gap: var(--_ui-grid-header-cell-gap);--ui-grid-header-cell-padding-block: var(--_ui-grid-header-cell-padding-block);--ui-grid-header-cell-padding-inline: var(--_ui-grid-header-cell-padding-inline);--ui-grid-header-cell-background-active: var(--_ui-grid-header-cell-background-active);--ui-grid-pinned-divider-shadow-left: var(--_ui-grid-pinned-divider-shadow-left);--ui-grid-pinned-divider-shadow-right: var(--_ui-grid-pinned-divider-shadow-right);--ui-grid-pinned-divider-clip-left: var(--_ui-grid-pinned-divider-clip-left);--ui-grid-pinned-divider-clip-right: var(--_ui-grid-pinned-divider-clip-right);--ui-grid-header-actions-gap: var(--_ui-grid-header-actions-gap);--ui-grid-control-size: var(--_ui-grid-control-size);--ui-grid-control-radius: var(--_ui-grid-control-radius);--ui-grid-control-icon-size: var(--_ui-grid-control-icon-size);--ui-grid-control-background: var(--_ui-grid-control-background);--ui-grid-control-border-color: var(--_ui-grid-control-border-color);--ui-grid-control-color: var(--_ui-grid-control-color);--ui-grid-control-background-active: var(--_ui-grid-control-background-active);--ui-grid-control-border-color-active: var(--_ui-grid-control-border-color-active);--ui-grid-control-color-active: var(--_ui-grid-control-color-active);--ui-grid-pin-menu-offset-block-start: var(--_ui-grid-pin-menu-offset-block-start);--ui-grid-pin-menu-gap: var(--_ui-grid-pin-menu-gap);--ui-grid-pin-menu-padding: var(--_ui-grid-pin-menu-padding);--ui-grid-pin-menu-radius: var(--_ui-grid-pin-menu-radius);--ui-grid-pin-menu-shadow: var(--_ui-grid-pin-menu-shadow);--ui-grid-pin-menu-direction: var(--_ui-grid-pin-menu-direction);--ui-grid-pin-menu-action-size: var(--_ui-grid-pin-menu-action-size);--ui-grid-pin-control-collapsed-size: var(--_ui-grid-pin-control-collapsed-size);--ui-grid-pin-control-transition-duration: var(--_ui-grid-pin-control-transition-duration);--ui-grid-pin-control-transition-easing: var(--_ui-grid-pin-control-transition-easing);--ui-grid-pin-menu-scale-closed: var(--_ui-grid-pin-menu-scale-closed);--ui-grid-filter-cell-padding-block-start: var(--_ui-grid-filter-cell-padding-block-start);--ui-grid-filter-cell-padding-block-end: var(--_ui-grid-filter-cell-padding-block-end);--ui-grid-filter-cell-padding-inline: var(--_ui-grid-filter-cell-padding-inline);--ui-grid-filter-input-padding-block: var(--_ui-grid-filter-input-padding-block);--ui-grid-filter-input-padding-inline: var(--_ui-grid-filter-input-padding-inline);--ui-grid-filter-input-focus-outline: var(--_ui-grid-filter-input-focus-outline);--ui-grid-body-cell-padding-block: var(--_ui-grid-body-cell-padding-block);--ui-grid-body-cell-padding-inline: var(--_ui-grid-body-cell-padding-inline);--ui-grid-body-cell-align: var(--_ui-grid-body-cell-align);--ui-grid-cell-shell-gap: var(--_ui-grid-cell-shell-gap);--ui-grid-row-toggle-size: var(--_ui-grid-row-toggle-size);--ui-grid-row-toggle-radius: var(--_ui-grid-row-toggle-radius);--ui-grid-toggle-icon-size: var(--_ui-grid-toggle-icon-size);--ui-grid-group-disclosure-icon-size: var(--_ui-grid-group-disclosure-icon-size);--ui-grid-pagination-icon-size: var(--_ui-grid-pagination-icon-size);--ui-grid-expandable-row-padding-block: var(--_ui-grid-expandable-row-padding-block);--ui-grid-expandable-row-padding-inline: var(--_ui-grid-expandable-row-padding-inline);--ui-grid-expandable-row-background: var(--_ui-grid-expandable-row-background);--ui-grid-cell-focus-background: var(--_ui-grid-cell-focus-background);--ui-grid-cell-focus-ring: var(--_ui-grid-cell-focus-ring);--ui-grid-cell-editing-background: var(--_ui-grid-cell-editing-background);--ui-grid-cell-editor-border-color: var(--_ui-grid-cell-editor-border-color);--ui-grid-cell-editor-radius: var(--_ui-grid-cell-editor-radius);--ui-grid-cell-editor-padding-block: var(--_ui-grid-cell-editor-padding-block);--ui-grid-cell-editor-padding-inline: var(--_ui-grid-cell-editor-padding-inline);--ui-grid-cell-editor-focus-outline: var(--_ui-grid-cell-editor-focus-outline);--ui-grid-group-row-gap: var(--_ui-grid-group-row-gap);--ui-grid-group-row-padding-block: var(--_ui-grid-group-row-padding-block);--ui-grid-group-row-padding-inline: var(--_ui-grid-group-row-padding-inline);--ui-grid-drag-preview-shadow: var(--_ui-grid-drag-preview-shadow);--ui-grid-drag-preview-radius: var(--_ui-grid-drag-preview-radius);--ui-grid-drag-placeholder-opacity: var(--_ui-grid-drag-placeholder-opacity);--ui-grid-drag-placeholder-background: var(--_ui-grid-drag-placeholder-background);--ui-grid-drag-placeholder-border: var(--_ui-grid-drag-placeholder-border);--ui-grid-drag-placeholder-shadow: var(--_ui-grid-drag-placeholder-shadow);--ui-grid-empty-state-gap: var(--_ui-grid-empty-state-gap);--ui-grid-empty-state-min-height: var(--_ui-grid-empty-state-min-height);--ui-grid-empty-state-padding: var(--_ui-grid-empty-state-padding);--ui-grid-pagination-gap: var(--_ui-grid-pagination-gap);--ui-grid-pagination-padding-block: var(--_ui-grid-pagination-padding-block);--ui-grid-pagination-padding-inline: var(--_ui-grid-pagination-padding-inline);--ui-grid-pagination-controls-gap: var(--_ui-grid-pagination-controls-gap);--ui-grid-pagination-size-gap: var(--_ui-grid-pagination-size-gap);--ui-grid-pagination-button-padding-block: var(--_ui-grid-pagination-button-padding-block);--ui-grid-pagination-button-padding-inline: var(--_ui-grid-pagination-button-padding-inline);--ui-grid-pagination-select-padding-block: var(--_ui-grid-pagination-select-padding-block);--ui-grid-pagination-select-padding-inline: var(--_ui-grid-pagination-select-padding-inline);--ui-grid-status-pill-padding-block: var(--_ui-grid-status-pill-padding-block);--ui-grid-status-pill-padding-inline: var(--_ui-grid-status-pill-padding-inline);--ui-grid-status-pill-radius: var(--_ui-grid-status-pill-radius);--ui-grid-status-pill-font-size: var(--_ui-grid-status-pill-font-size);--ui-grid-status-pill-default-bg: var(--_ui-grid-status-pill-default-bg);box-sizing:border-box}:host{isolation:isolate;contain:layout paint}.grid-shell{display:grid;gap:var(--ui-grid-shell-gap)}.grid-hero{display:flex;justify-content:space-between;gap:var(--ui-grid-hero-gap);align-items:end;padding:var(--ui-grid-hero-padding-block) 0;color:var(--ui-grid-cell-color)}.eyebrow{margin:0 0 var(--ui-grid-eyebrow-margin-block-end);text-transform:uppercase;letter-spacing:var(--ui-grid-eyebrow-letter-spacing);font-size:var(--ui-grid-eyebrow-font-size);color:var(--ui-grid-muted-color)}h1{margin:0;font-size:var(--ui-grid-hero-title-font-size);line-height:var(--ui-grid-hero-title-line-height)}.deck{max-width:var(--ui-grid-hero-deck-max-width);margin:var(--ui-grid-hero-deck-margin-block-start) 0 0;color:var(--ui-grid-muted-color)}.hero-actions{display:flex;gap:var(--ui-grid-hero-actions-gap);align-items:center;flex-wrap:wrap}.action{border:0;border-radius:var(--ui-grid-action-radius);padding:var(--ui-grid-action-padding-block) var(--ui-grid-action-padding-inline);font:inherit;cursor:pointer}.action-secondary{background:var(--ui-grid-surface);color:var(--ui-grid-cell-color);border:1px solid var(--ui-grid-border-color)}.stats-card{min-width:var(--ui-grid-stats-card-min-width);padding:var(--ui-grid-stats-card-padding-block) var(--ui-grid-stats-card-padding-inline);border-radius:var(--ui-grid-radius);background:var(--ui-grid-surface);border:1px solid var(--ui-grid-border-color);display:grid}.stats-card span{font-size:var(--ui-grid-stats-card-value-font-size);font-weight:700}.stats-card small{color:var(--ui-grid-muted-color)}.grid-frame{display:grid;grid-template-rows:auto minmax(0, 1fr) auto;height:100%;min-height:0;border-radius:var(--ui-grid-radius);background:var(--ui-grid-surface);border:1px solid var(--ui-grid-border-color);box-shadow:var(--ui-grid-shadow);overflow:hidden}.metrics-strip{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:var(--ui-grid-metrics-gap)}.metrics-strip article{padding:var(--ui-grid-metric-card-padding-block) var(--ui-grid-metric-card-padding-inline);border-radius:var(--ui-grid-radius);background:var(--ui-grid-surface);border:1px solid var(--ui-grid-border-color);display:grid}.metrics-strip strong{font-size:var(--ui-grid-metric-value-font-size)}.metrics-strip span{color:var(--ui-grid-muted-color)}.grid-toolbar{display:flex;justify-content:space-between;gap:var(--ui-grid-toolbar-gap);padding:var(--ui-grid-toolbar-padding-block) var(--ui-grid-toolbar-padding-inline);align-items:center;background:var(--ui-grid-header-background);border-bottom:1px solid var(--ui-grid-border-color)}.grid-toolbar div{display:flex;gap:var(--ui-grid-toolbar-inline-gap);align-items:baseline}.grid-toolbar p{margin:0;color:var(--ui-grid-muted-color)}.grid-table{position:relative;height:100%;min-height:0;width:100%;min-width:0;display:flex;flex-direction:column;background:var(--ui-grid-surface);overflow-anchor:none}.grid-header-strip,.grid-filter-strip{flex:0 0 auto;position:sticky;z-index:var(--ui-grid-header-z-index);background:var(--ui-grid-surface);overflow:hidden;width:calc(100% - var(--ui-grid-scrollbar-width, 0px))}.grid-header-strip{top:0}.grid-filter-strip{top:var(--ui-grid-header-sticky-top, 0px)}.grid-body-viewport{flex:1 1 auto;min-height:0;overflow-x:auto;overflow-anchor:none;overscroll-behavior-x:none}.header-grid,.filter-grid,.body-grid{display:grid;width:100%;min-width:max-content}.header-cell,.filter-cell,.body-cell,.group-row{min-width:0}.header-cell{display:grid;grid-template-columns:minmax(0, 1fr) auto;gap:var(--ui-grid-header-cell-gap);padding:var(--ui-grid-header-cell-padding-block) var(--ui-grid-header-cell-padding-inline);border-bottom:1px solid var(--ui-grid-border-color);background:var(--ui-grid-header-background);font-weight:var(--ui-grid-header-weight);align-items:center;position:relative}.header-cell.is-active{background:var(--ui-grid-header-cell-background-active)}.header-cell[draggable=true]{cursor:grab}.header-cell.is-dragging{opacity:.6}.header-cell.is-drag-target{background:color-mix(in srgb, var(--ui-grid-accent) 9%, var(--ui-grid-header-background));border:1px dashed color-mix(in srgb, var(--ui-grid-accent) 45%, var(--ui-grid-border-color));box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ui-grid-accent) 18%, transparent)}.header-cell.is-pinned.is-pin-menu-open{z-index:var(--ui-grid-pin-menu-open-z-index)}.header-cell.is-pin-menu-open:not(.is-pinned){z-index:max(0,var(--ui-grid-pinned-cell-z-index) - 1)}.header-cell.is-pinned,.filter-cell.is-pinned,.body-cell.is-pinned{position:sticky;z-index:var(--ui-grid-pinned-cell-z-index);background:var(--ui-grid-surface)}.header-cell.is-pinned{background:var(--ui-grid-header-background)}.body-cell.is-pinned.body-cell-odd{background:var(--ui-grid-row-odd)}.body-cell.is-pinned:not(.body-cell-odd){background:var(--ui-grid-row-even)}.header-cell.is-pinned-left-last,.filter-cell.is-pinned-left-last,.body-cell.is-pinned-left-last{box-shadow:var(--ui-grid-pinned-divider-shadow-left);clip-path:var(--ui-grid-pinned-divider-clip-left)}.header-cell.is-pinned-right-first,.filter-cell.is-pinned-right-first,.body-cell.is-pinned-right-first{box-shadow:var(--ui-grid-pinned-divider-shadow-right);clip-path:var(--ui-grid-pinned-divider-clip-right)}.header-label{min-width:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:clip;hyphens:none}.header-actions{display:inline-flex;align-items:center;gap:var(--ui-grid-header-actions-gap);justify-self:end}.column-resizer{position:absolute;top:0;right:-4px;width:8px;height:100%;padding:0;border:0;background:rgba(0,0,0,0);cursor:col-resize;z-index:5}.column-resizer::after{content:"";position:absolute;top:20%;bottom:20%;left:50%;width:2px;transform:translateX(-50%);border-radius:999px;background:color-mix(in srgb, var(--_ui-grid-border-color) 80%, transparent);opacity:0;transition:opacity 120ms ease}.header-cell:hover .column-resizer::after,.column-resizer:focus-visible::after{opacity:1}.pin-control{position:relative;display:inline-grid;place-items:center;justify-items:center;min-width:var(--ui-grid-control-size);overflow:hidden}.header-action,.chip-action{display:inline-flex;align-items:center;justify-content:center;width:var(--ui-grid-control-size);height:var(--ui-grid-control-size);display:flex;border:0;background:var(--ui-grid-control-background);padding:0;font:inherit;border-radius:var(--ui-grid-control-radius);cursor:pointer}.header-action-disabled{cursor:default}.header-action svg,.chip-action svg{width:var(--ui-grid-control-icon-size);height:var(--ui-grid-control-icon-size);fill:currentColor}.header-action{color:var(--ui-grid-control-color);border:1px solid var(--ui-grid-control-border-color)}.header-cell.is-active .header-action{color:var(--ui-grid-control-color-active);border-color:var(--ui-grid-control-border-color-active)}.chip-action{border:1px solid var(--ui-grid-control-border-color);color:var(--ui-grid-control-color)}.chip-action-active{background:var(--ui-grid-control-background-active);border-color:var(--ui-grid-control-border-color-active);color:var(--ui-grid-control-color-active)}.pin-trigger{grid-area:1/1;transform-origin:center;transition:width var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),height var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),opacity var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),transform var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),border-color var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),background-color var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),color var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing)}.pin-menu{grid-area:1/1;z-index:var(--ui-grid-pin-menu-z-index);display:grid;grid-auto-flow:var(--ui-grid-pin-menu-direction);grid-auto-rows:var(--ui-grid-pin-menu-action-size);grid-auto-columns:var(--ui-grid-pin-menu-action-size);gap:var(--ui-grid-pin-menu-gap);padding:var(--ui-grid-pin-menu-padding);border:1px solid var(--ui-grid-border-color);border-radius:var(--ui-grid-pin-menu-radius);background:var(--ui-grid-surface);box-shadow:var(--ui-grid-pin-menu-shadow);justify-items:center;align-items:center;width:var(--ui-grid-control-size);max-height:var(--ui-grid-pin-control-collapsed-size);opacity:0;pointer-events:none;transform:scale(var(--ui-grid-pin-menu-scale-closed));transform-origin:center;transition:max-height var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),opacity var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),transform var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),padding var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),border-color var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),box-shadow var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing)}.pin-control-open{align-items:start;overflow:visible}.pin-control-open .pin-trigger{width:var(--ui-grid-pin-control-collapsed-size);height:var(--ui-grid-pin-control-collapsed-size);opacity:0;transform:scale(0.72);pointer-events:none}.pin-control-open .pin-menu{max-height:calc(var(--ui-grid-pin-menu-action-size)*2 + var(--ui-grid-pin-menu-gap) + var(--ui-grid-pin-menu-padding)*2);width:max-content;min-width:var(--ui-grid-control-size);opacity:1;pointer-events:auto;transform:scale(1)}.pin-menu-action{display:inline-flex;align-items:center;justify-content:center;width:var(--ui-grid-pin-menu-action-size);height:var(--ui-grid-pin-menu-action-size);border:0;border-radius:var(--ui-grid-control-radius);background:rgba(0,0,0,0);color:var(--ui-grid-control-color);cursor:pointer}.pin-menu-action:hover,.pin-menu-action:focus-visible{outline:0;background:var(--ui-grid-control-background-active);color:var(--ui-grid-control-color-active)}.pin-menu-action svg{width:var(--ui-grid-control-icon-size);height:var(--ui-grid-control-icon-size);fill:currentColor}.body-cell{display:grid;grid-template-columns:minmax(0, 1fr);align-items:var(--ui-grid-body-cell-align);padding:var(--ui-grid-body-cell-padding-block) var(--ui-grid-body-cell-padding-inline);border-bottom:1px solid var(--ui-grid-border-color);color:var(--ui-grid-cell-color);background:var(--ui-grid-row-even);outline:0}.body-cell.body-cell-odd{background:var(--ui-grid-row-odd)}.cell-shell{display:flex;align-items:center;gap:var(--ui-grid-cell-shell-gap);min-width:0}.cell-value{min-width:0;flex:1 1 auto}.row-toggle{border:1px solid var(--ui-grid-border-color);background:var(--ui-grid-surface);color:var(--ui-grid-cell-color);width:var(--ui-grid-row-toggle-size);height:var(--ui-grid-row-toggle-size);border-radius:var(--ui-grid-row-toggle-radius);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;padding:0;font:inherit}.toggle-icon{width:var(--ui-grid-toggle-icon-size);height:var(--ui-grid-toggle-icon-size);fill:currentColor;pointer-events:none}.group-disclosure-icon{width:var(--ui-grid-group-disclosure-icon-size);height:var(--ui-grid-group-disclosure-icon-size)}.pagination-icon{width:var(--ui-grid-pagination-icon-size);height:var(--ui-grid-pagination-icon-size);fill:currentColor}.expandable-row{padding:var(--ui-grid-expandable-row-padding-block) var(--ui-grid-expandable-row-padding-inline);border-bottom:1px solid var(--ui-grid-border-color);background:var(--ui-grid-expandable-row-background)}.body-grid>.body-cell:hover:not(.row-focused):not(.cell-focused):not(.cell-editing){background:var(--ui-grid-row-hover);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ui-grid-accent) 10%, transparent)}.body-cell.row-focused,.body-grid>.body-cell.row-focused{background:var(--ui-grid-row-focus-background)}.body-cell.cell-focused,.body-grid>.body-cell.cell-focused{background:var(--ui-grid-cell-focus-background);box-shadow:var(--ui-grid-cell-focus-ring)}.body-cell.cell-editing,.body-grid>.body-cell.cell-editing{background:var(--ui-grid-cell-editing-background)}.cell-editor{display:block;width:100%;min-width:0;max-width:100%;border:1px solid var(--ui-grid-cell-editor-border-color);border-radius:var(--ui-grid-cell-editor-radius);background:var(--ui-grid-surface);color:var(--ui-grid-cell-color);padding:var(--ui-grid-cell-editor-padding-block) var(--ui-grid-cell-editor-padding-inline);font:inherit}.cell-editor:focus{outline:var(--ui-grid-cell-editor-focus-outline)}.grid-viewport{width:100%}.grid-virtual-spacer{position:relative;width:max-content;min-width:100%}.grid-virtual-body{position:absolute;left:0}.grid-virtual-body>:not(.expandable-row){box-sizing:border-box;height:var(--ui-grid-row-height);overflow:hidden}.body-cell.align-center{text-align:center}.body-cell.align-end{text-align:right}.empty-state{display:grid;place-items:center;gap:var(--ui-grid-empty-state-gap);min-height:var(--ui-grid-empty-state-min-height);text-align:center;padding:var(--ui-grid-empty-state-padding);color:var(--ui-grid-muted-color);background:var(--ui-grid-surface)}.empty-state p,.empty-state strong{margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.status-pill{display:inline-flex;align-items:center;justify-content:center;padding:var(--ui-grid-status-pill-padding-block) var(--ui-grid-status-pill-padding-inline);border-radius:var(--ui-grid-status-pill-radius);background:var(--ui-grid-status-pill-default-bg);color:var(--ui-grid-cell-color);font-size:var(--ui-grid-status-pill-font-size);font-weight:700}.status-pill-enterprise{background:var(--ui-grid-status-enterprise-bg);color:var(--ui-grid-status-enterprise-color)}.status-pill-active{background:var(--ui-grid-status-active-bg);color:var(--ui-grid-status-active-color)}.status-pill-expansion{background:var(--ui-grid-status-expansion-bg);color:var(--ui-grid-status-expansion-color)}.status-pill-pilot{background:var(--ui-grid-status-pilot-bg);color:var(--ui-grid-status-pilot-color)}@media(max-width: 900px){.metrics-strip{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-hero,.grid-toolbar{grid-template-columns:1fr;display:grid}.hero-actions{justify-content:space-between}}@media(max-width: 640px){.metrics-strip{grid-template-columns:1fr}}.ui-grid-row-selected,.body-cell.ui-grid-row-selected{background:var(--ui-grid-row-selected-bg, var(--app-ui-grid-row-selected-bg, color-mix(in srgb, var(--ui-grid-accent, #2563eb) 22%, var(--ui-grid-surface, #ffffff))));color:var(--ui-grid-row-selected-color, var(--app-ui-grid-row-selected-color, var(--ui-grid-cell-color)))}.body-cell.ui-grid-row-selected.body-cell-odd{background:var(--ui-grid-row-selected-bg-odd, var(--app-ui-grid-row-selected-bg-odd, color-mix(in srgb, var(--ui-grid-accent, #2563eb) 26%, var(--ui-grid-surface, #ffffff))))}.ui-grid-row-focused,.body-cell.ui-grid-row-focused{outline:1px dashed var(--ui-grid-accent, #2563eb);outline-offset:-1px}.body-cell[data-column=selectionRowHeaderCol],.header-cell[data-column=selectionRowHeaderCol],.filter-cell[data-column=selectionRowHeaderCol]{padding:0 !important;cursor:pointer;user-select:none;-webkit-user-select:none;display:flex;align-items:center;justify-content:center}.body-cell[data-column=selectionRowHeaderCol]>.cell-shell,.body-cell[data-column=selectionRowHeaderCol]>.cell-shell>.cell-content{padding:0 !important;padding-inline-start:0 !important;margin:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.filter-cell[data-column=selectionRowHeaderCol]{padding:0;background:var(--_ui-grid-header-background, var(--ui-grid-header-background, transparent));border-bottom:1px solid var(--_ui-grid-border-color, var(--ui-grid-border-color, transparent))}.ui-grid-selection-row-header-buttons{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;cursor:pointer}.ui-grid-selection-checkbox{display:inline-block;width:16px;height:16px;box-sizing:border-box;border:2px solid currentColor;border-radius:3px;background:rgba(0,0,0,0);color:var(--ui-grid-cell-color, currentColor);position:relative;transition:background 120ms ease,border-color 120ms ease,color 120ms ease;opacity:.7}.ui-grid-selection-row-header-buttons:hover .ui-grid-selection-checkbox{opacity:1;color:var(--ui-grid-accent, var(--_ui-grid-accent, #2563eb))}.ui-grid-selection-checkbox-checked{background:var(--ui-grid-accent, var(--_ui-grid-accent, #2563eb));color:var(--ui-grid-accent, var(--_ui-grid-accent, #2563eb));border-color:var(--ui-grid-accent, var(--_ui-grid-accent, #2563eb));opacity:1}.ui-grid-selection-checkbox-checked::after{content:"";position:absolute;left:3px;top:0;width:5px;height:9px;border:2px solid var(--ui-grid-surface, var(--_ui-grid-surface, #ffffff));border-top:0;border-left:0;transform:rotate(45deg)}.ui-grid-selection-checkbox-disabled{opacity:.3;cursor:not-allowed}.ui-grid-selection-select-all{display:inline-flex;align-items:center;justify-content:center;background:rgba(0,0,0,0);border:0;padding:0;margin:0;cursor:pointer;width:100%;height:100%}.ui-grid-selection-select-all:focus-visible{outline:2px solid var(--_ui-grid-accent, var(--ui-grid-accent, #2563eb));outline-offset:-2px}.grid-body-viewport:has([data-column=selectionRowHeaderCol]){user-select:none;-webkit-user-select:none}.body-cell.ui-grid-row-dirty{color:var(--ui-grid-row-dirty-color, var(--app-ui-grid-row-dirty-color, #610B38));background:var(--ui-grid-row-dirty-bg, var(--app-ui-grid-row-dirty-bg, color-mix(in srgb, var(--ui-grid-accent, #2563eb) 8%, var(--ui-grid-surface, #ffffff))))}.body-cell.ui-grid-row-saving{color:var(--ui-grid-row-saving-color, var(--app-ui-grid-row-saving-color, #848484)) !important;opacity:var(--ui-grid-row-saving-opacity, 0.75);cursor:progress}.body-cell.ui-grid-row-error{color:var(--ui-grid-row-error-color, var(--app-ui-grid-row-error-color, #FF0000)) !important;background:var(--ui-grid-row-error-bg, var(--app-ui-grid-row-error-bg, color-mix(in srgb, #ff0000 14%, var(--ui-grid-surface, #ffffff))))}.body-cell.ui-grid-cell-invalid{position:relative;background:var(--ui-grid-cell-invalid-bg, var(--app-ui-grid-cell-invalid-bg, color-mix(in srgb, #ff0000 10%, var(--ui-grid-surface, #ffffff))))}.body-cell.ui-grid-cell-invalid::after{content:"";position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 var(--ui-grid-cell-invalid-marker-size, 8px) var(--ui-grid-cell-invalid-marker-size, 8px) 0;border-color:rgba(0,0,0,0) var(--ui-grid-cell-invalid-marker-color, #ff0000) rgba(0,0,0,0) rgba(0,0,0,0);pointer-events:none}.filter-cell{padding:var(--ui-grid-filter-cell-padding-block-start) var(--ui-grid-filter-cell-padding-inline) var(--ui-grid-filter-cell-padding-block-end);border-bottom:1px solid var(--ui-grid-border-color);background:var(--ui-grid-header-background)}.filter-cell input{width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--ui-grid-border-color);border-radius:var(--ui-grid-radius);background:var(--ui-grid-surface);padding:var(--ui-grid-filter-input-padding-block) var(--ui-grid-filter-input-padding-inline);font:inherit}.filter-cell input:focus{outline:var(--ui-grid-filter-input-focus-outline);border-color:var(--ui-grid-accent)}.group-row{display:flex;align-items:center;gap:var(--ui-grid-group-row-gap);border:0;width:100%;padding:var(--ui-grid-group-row-padding-block) var(--ui-grid-group-row-padding-inline);background:var(--ui-grid-group-background);border-bottom:1px solid var(--ui-grid-border-color);color:var(--ui-grid-cell-color);cursor:pointer;text-align:left}.group-row span,.group-row small{color:var(--ui-grid-muted-color)}.pagination-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-grid-pagination-gap);padding:var(--ui-grid-pagination-padding-block) var(--ui-grid-pagination-padding-inline);border-top:1px solid var(--ui-grid-border-color);background:var(--ui-grid-header-background)}.pagination-bar p{margin:0;color:var(--ui-grid-muted-color)}.pagination-controls{display:flex;align-items:center;gap:var(--ui-grid-pagination-controls-gap);flex-wrap:wrap}.pagination-button{padding:var(--ui-grid-pagination-button-padding-block) var(--ui-grid-pagination-button-padding-inline)}.pagination-size{display:inline-flex;align-items:center;gap:var(--ui-grid-pagination-size-gap)}.pagination-size select{border:1px solid var(--ui-grid-border-color);border-radius:var(--ui-grid-radius);background:var(--ui-grid-surface);padding:var(--ui-grid-pagination-select-padding-block) var(--ui-grid-pagination-select-padding-inline);font:inherit}';
 
 // src/ui-grid-empty.template.ts
 var STYLE_KEY = {};
@@ -7716,7 +7866,7 @@ function emptyTemplate(ctx) {
     connect(root) {
       if (!root) return;
       adoptStyles(root, ui_grid_shell_default, STYLE_KEY);
-      root.innerHTML = `<section class="grid-shell ui-grid-shell"><div class="empty-state ui-grid-no-row-overlay"><strong>${ctx.message}</strong></div></section>`;
+      root.innerHTML = `<section class="grid-shell ui-grid-shell"><div part="empty-state" class="empty-state ui-grid-no-row-overlay"><strong>${ctx.message}</strong></div></section>`;
     }
   };
 }
@@ -7729,7 +7879,7 @@ function gridShellTemplate(ctx) {
       const target = root ?? ctx.shadowRoot;
       if (!target) return;
       adoptStyles(target, ui_grid_shell_default, STYLE_KEY2);
-      target.innerHTML = `${ctx.slotRegistry}<section class="grid-frame ui-grid" role="grid" aria-label="${ctx.gridTitle}"><div class="grid-table ui-grid-contents-wrapper" style="${ctx.gridTableStyle}"><div class="grid-header-strip"><div class="header-grid ui-grid-header ui-grid-header-canvas" style="grid-template-columns:${ctx.templateColumns}">` + ctx.headerContent + `</div></div><div class="grid-filter-strip">` + ctx.filterRowContent + `</div><div class="grid-body-viewport" style="${ctx.bodyViewportStyle}">` + ctx.bodyContent + `</div>` + ctx.paginationContent + `</div></section>`;
+      target.innerHTML = `${ctx.slotRegistry}<section class="grid-frame ui-grid" part="grid-frame" role="grid" aria-label="${ctx.gridTitle}"><div class="grid-table ui-grid-contents-wrapper" style="${ctx.gridTableStyle}"><div class="grid-header-strip"><div class="header-grid ui-grid-header ui-grid-header-canvas" part="header" style="grid-template-columns:${ctx.templateColumns}">` + ctx.headerContent + `</div></div><div class="grid-filter-strip">` + ctx.filterRowContent + `</div><div class="grid-body-viewport" style="${ctx.bodyViewportStyle}">` + ctx.bodyContent + `</div>` + ctx.paginationContent + `</div></section>`;
     }
   };
 }
@@ -7741,7 +7891,7 @@ var grid_filter_cell_default = ":host{display:block;box-sizing:border-box;paddin
 var STYLE_KEY3 = {};
 function renderFilterCell2(ctx, shadowRoot) {
   adoptStyles(shadowRoot, grid_filter_cell_default, STYLE_KEY3);
-  shadowRoot.innerHTML = `<input class="ui-grid-filter-input" data-role="filter" data-column="${ctx.columnName}" placeholder="${ctx.placeholder}" value="${ctx.value}">`;
+  shadowRoot.innerHTML = `<input class="ui-grid-filter-input" data-role="filter" data-column="${escapeHtml(ctx.columnName)}" placeholder="${escapeHtml(ctx.placeholder)}" value="${escapeHtml(ctx.value)}">`;
 }
 
 // src/components/grid-filter-cell/grid-filter-cell.ts
@@ -7844,7 +7994,7 @@ var grid_group_row_default = ".sr-only{position:absolute;width:1px;height:1px;pa
 var STYLE_KEY4 = {};
 function renderGroupRow(ctx, shadowRoot) {
   adoptStyles(shadowRoot, grid_group_row_default, STYLE_KEY4);
-  shadowRoot.innerHTML = `<svg class="toggle-icon group-disclosure-icon" viewBox="${ctx.iconViewBox}" aria-hidden="true" focusable="false"><path d="${ctx.iconPath}"></path></svg><span class="sr-only">${ctx.disclosureLabel}</span><strong>${ctx.field}: ${ctx.label}</strong><span>${ctx.count} ${ctx.rowsSuffix}</span>`;
+  shadowRoot.innerHTML = `<svg class="toggle-icon group-disclosure-icon" viewBox="${escapeHtml(ctx.iconViewBox)}" aria-hidden="true" focusable="false"><path d="${escapeHtml(ctx.iconPath)}"></path></svg><span class="sr-only">${escapeHtml(ctx.disclosureLabel)}</span><strong>${escapeHtml(ctx.columnLabel || ctx.field)}: ${escapeHtml(ctx.label)}</strong><span>${escapeHtml(ctx.count)} ${escapeHtml(ctx.rowsSuffix)}</span>`;
 }
 
 // src/components/grid-group-row/grid-group-row.ts
@@ -7852,6 +8002,8 @@ var UIGridGroupRow = class _UIGridGroupRow extends HTMLElement {
   static TAG = "ui-grid-group-row";
   /** The grouping field name (e.g. "category"). */
   field = "";
+  /** The grouped column's header (e.g. "Category"); falls back to `field`. */
+  columnLabel = "";
   /** The group value label (e.g. "Fruit"). */
   label = "";
   /** Number of rows in this group. */
@@ -7873,6 +8025,7 @@ var UIGridGroupRow = class _UIGridGroupRow extends HTMLElement {
       "data-group",
       "data-collapsed",
       "data-field",
+      "data-column-label",
       "data-label",
       "data-count",
       "data-depth",
@@ -7893,6 +8046,7 @@ var UIGridGroupRow = class _UIGridGroupRow extends HTMLElement {
   render() {
     const depth = parseInt(this.getAttribute("data-depth") ?? "0", 10);
     this.field = this.getAttribute("data-field") ?? "";
+    this.columnLabel = this.getAttribute("data-column-label") ?? "";
     this.label = this.getAttribute("data-label") ?? "";
     this.count = this.getAttribute("data-count") ?? "0";
     this.disclosureLabel = this.getAttribute("data-disclosure-label") ?? "";
@@ -8444,6 +8598,10 @@ var UiGridStandaloneElement = class extends HTMLElement {
     this.icons.setOverrides(this.activeOptions.iconOverrides ?? {});
     this.ensureController(this.buildEffectiveOptions(this.activeOptions));
   }
+  /** Append application CSS after the grid styles; return a removal callback. */
+  addStyles(cssText) {
+    return addUserStyles(this.ensureShadowRoot(), cssText);
+  }
   /**
    * Declare which slots are framework-rendered. When a slot is flagged, the
    * element renders a `<slot name="…">` placeholder at the usual site instead
@@ -8464,6 +8622,7 @@ var UiGridStandaloneElement = class extends HTMLElement {
   setFrameworkRenderedSlots(config) {
     if (this.frameworkSlots.configure(config)) {
       this.lastRowStateFingerprints.clear();
+      this.lastStructureKey = null;
       this.render();
     }
   }
@@ -8846,6 +9005,9 @@ var UiGridStandaloneElement = class extends HTMLElement {
     this.templateObserver?.disconnect();
     this.templateObserver = null;
     this.teardownAutoResize();
+    this.scrollbarObserver?.disconnect();
+    this.scrollbarObserver = null;
+    this.observedBodyViewport = null;
     if (this.scrollFrame !== null) {
       cancelAnimationFrame(this.scrollFrame);
       this.scrollFrame = null;
@@ -9118,8 +9280,27 @@ var UiGridStandaloneElement = class extends HTMLElement {
         this.render();
       });
     }
+    this.syncScrollbarCompensation(root);
     this.autoAdjustHeight(snapshot);
   }
+  scrollbarObserver = null;
+  observedBodyViewport = null;
+  // The header and filter strips have no scrollbar, so they are narrowed by the
+  // body viewport's to keep right-pinned cells and scroll range aligned (#7402).
+  syncScrollbarCompensation(root) {
+    const frame = root.querySelector(".grid-frame");
+    const viewport = root.querySelector(".grid-body-viewport");
+    if (!frame || !viewport) return;
+    const width = `${Math.max(0, viewport.offsetWidth - viewport.clientWidth)}px`;
+    if (frame.style.getPropertyValue("--ui-grid-scrollbar-width") !== width) {
+      frame.style.setProperty("--ui-grid-scrollbar-width", width);
+    }
+    if (viewport === this.observedBodyViewport || typeof ResizeObserver === "undefined") return;
+    this.scrollbarObserver ??= new ResizeObserver(() => this.syncScrollbarCompensation(root));
+    if (this.observedBodyViewport) this.scrollbarObserver.unobserve(this.observedBodyViewport);
+    this.scrollbarObserver.observe(viewport);
+    this.observedBodyViewport = viewport;
+  }
   /** @internal */
   inAutoAdjust = false;
   lastAutoHeight = 0;
@@ -9264,7 +9445,7 @@ var UiGridStandaloneElement = class extends HTMLElement {
       snapshot.visibleColumns.map((column) => this.renderFilterCell(column)).join("")
     ) : "";
     const bodyContent = itemsToRender.map((item, index) => this.renderDisplayItem(item, startIndex + index)).join("");
-    const body = snapshot.pipeline.displayItems.length > 0 ? virtualizationEnabled ? bodyVirtualMarkup(templateColumns, totalVirtualHeight, virtualOffset, bodyContent) : bodyStaticMarkup(templateColumns, bodyContent) : this.renderEmptyState(
+    const body = snapshot.pipeline.displayItems.length > 0 ? virtualizationEnabled ? bodyVirtualMarkup(templateColumns, totalVirtualHeight, virtualOffset, bodyContent, snapshot.rowSize) : bodyStaticMarkup(templateColumns, bodyContent) : this.renderEmptyState(
       options.emptyMessage ?? labels.emptyHeading,
       labels.emptyDescription
     );
@@ -9293,8 +9474,8 @@ var UiGridStandaloneElement = class extends HTMLElement {
   renderPatch(plan, root) {
     renderPatch(this, plan, root);
   }
-  reconcileBodyRoot(root, kind, options, labels, templateColumns, virtualOffset, totalVirtualHeight) {
-    return reconcileBodyRoot(this, root, kind, options, labels, templateColumns, virtualOffset, totalVirtualHeight);
+  reconcileBodyRoot(root, kind, options, labels, templateColumns, virtualOffset, totalVirtualHeight, rowSize) {
+    return reconcileBodyRoot(this, root, kind, options, labels, templateColumns, virtualOffset, totalVirtualHeight, rowSize);
   }
   reconcilePagination(root, snapshot, shouldShow) {
     reconcilePagination(this, root, snapshot, shouldShow);