@gp-grid/angular 0.16.1 → 0.18.0

package/dist/styles.css

@@ -88,9 +88,15 @@
    GP Grid - Clean Flat Design
    ============================================================================= */
 
-/* Grid Container */
+/* Grid Container - structural */
 .gp-grid-container {
   outline: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Visual properties - :where() for zero specificity, consumers can override with a single class */
+:where(.gp-grid-container) {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   font-size: 13px;
   line-height: 1.5;
@@ -98,12 +104,13 @@
   background-color: var(--gp-grid-bg);
   border: 1px solid var(--gp-grid-border);
   border-radius: 6px;
-  user-select: none;
-  -webkit-user-select: none;
 }
 
 .gp-grid-container:focus {
   outline: none;
+}
+
+:where(.gp-grid-container:focus) {
   border-color: var(--gp-grid-primary);
 }
 
@@ -116,39 +123,43 @@
   position: sticky;
   top: 0;
   left: 0;
-  /* z-index set inline (100) to ensure header stays above rows wrapper */
-  background-color: var(--gp-grid-header-bg);
-  border-bottom: 1px solid var(--gp-grid-border);
   flex-shrink: 0;
   z-index: 11;
   overflow: hidden;
 }
 
+:where(.gp-grid-header) {
+  background-color: var(--gp-grid-header-bg);
+  border-bottom: 1px solid var(--gp-grid-border);
+}
+
 .gp-grid-container .gp-grid-header-cell {
   position: absolute;
   box-sizing: border-box;
+  user-select: none;
+  display: flex;
+  top: 0;
+  touch-action: none;
+}
+
+:where(.gp-grid-header-cell) {
+  align-items: center;
+  padding: 0 12px;
   border-right: 1px solid var(--gp-grid-border);
   font-weight: 600;
   font-size: 12px;
   letter-spacing: 0.5px;
   color: var(--gp-grid-header-text);
   cursor: pointer;
-  user-select: none;
-  display: flex;
-  align-items: center;
-  padding: 0 12px;
   background-color: transparent;
   transition: background-color 0.1s ease;
-  top: 0;
-  background: transparent;
-  touch-action: none;
 }
 
-.gp-grid-container .gp-grid-header-cell:hover {
+:where(.gp-grid-header-cell:hover) {
   background-color: var(--gp-grid-hover);
 }
 
-.gp-grid-container .gp-grid-header-cell:active {
+:where(.gp-grid-header-cell:active) {
   background-color: var(--gp-grid-border-light);
 }
 
@@ -157,6 +168,9 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+}
+
+:where(.gp-grid-header-text) {
   color: var(--gp-grid-header-text);
 }
 
@@ -184,20 +198,20 @@
   gap: 2px;
 }
 
-.gp-grid-sort-arrow-up,
-.gp-grid-sort-arrow-down {
+:where(.gp-grid-sort-arrow-up),
+:where(.gp-grid-sort-arrow-down) {
   opacity: 0.35;
   transition: opacity 0.15s ease, color 0.15s ease;
   color: var(--gp-grid-text);
 }
 
-.gp-grid-sort-arrow-up.active,
-.gp-grid-sort-arrow-down.active {
+:where(.gp-grid-sort-arrow-up.active),
+:where(.gp-grid-sort-arrow-down.active) {
   opacity: 1;
   color: var(--gp-grid-primary);
 }
 
-.gp-grid-sort-index {
+:where(.gp-grid-sort-index) {
   font-size: 9px;
   color: var(--gp-grid-primary);
   font-weight: 600;
@@ -210,6 +224,9 @@
   justify-content: center;
   width: 20px;
   height: 20px;
+}
+
+:where(.gp-grid-filter-icon) {
   border-radius: 4px;
   cursor: pointer;
   color: var(--gp-grid-text-secondary);
@@ -217,12 +234,12 @@
   margin-left: 2px;
 }
 
-.gp-grid-filter-icon:hover {
+:where(.gp-grid-filter-icon:hover) {
   background-color: var(--gp-grid-hover);
   color: var(--gp-grid-primary);
 }
 
-.gp-grid-filter-icon.active {
+:where(.gp-grid-filter-icon.active) {
   color: var(--gp-grid-primary);
   background-color: var(--gp-grid-primary-light);
 }
@@ -234,6 +251,8 @@
     min-height: 44px;
     width: 44px;
     height: 44px;
+  }
+  :where(.gp-grid-filter-icon) {
     margin-left: 0;
   }
 
@@ -246,6 +265,9 @@
 /* Disabled header state during data loading */
 .gp-grid-header--loading .gp-grid-header-cell {
   pointer-events: none;
+}
+
+:where(.gp-grid-header--loading .gp-grid-header-cell) {
   opacity: 0.6;
   cursor: default;
 }
@@ -265,8 +287,8 @@
   touch-action: none;
 }
 
-.gp-grid-header-resize-handle:hover,
-.gp-grid-header-resize-handle--active {
+:where(.gp-grid-header-resize-handle:hover),
+:where(.gp-grid-header-resize-handle--active) {
   background-color: var(--gp-grid-primary);
   opacity: 0.4;
 }
@@ -284,11 +306,14 @@
   top: 0;
   width: 2px;
   height: 100%;
-  background-color: var(--gp-grid-primary);
   z-index: 1000;
   pointer-events: none;
 }
 
+:where(.gp-grid-column-resize-line) {
+  background-color: var(--gp-grid-primary);
+}
+
 /* =============================================================================
    Column Move
    ============================================================================= */
@@ -296,23 +321,26 @@
 .gp-grid-column-move-ghost {
   position: fixed;
   pointer-events: none;
-  opacity: 0.7;
   z-index: 2000;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+:where(.gp-grid-column-move-ghost) {
+  opacity: 0.7;
   background-color: var(--gp-grid-header-bg);
   border: 2px solid var(--gp-grid-primary);
   border-radius: 4px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  display: flex;
-  align-items: center;
   padding: 0 12px;
   font-weight: 600;
   font-size: 12px;
   letter-spacing: 0.5px;
   color: var(--gp-grid-header-text);
-  box-sizing: border-box;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
 }
 
 .gp-grid-column-drop-indicator {
@@ -321,9 +349,12 @@
   left: 0;
   width: 3px;
   height: 100%;
-  background-color: var(--gp-grid-primary);
   z-index: 1000;
   pointer-events: none;
+}
+
+:where(.gp-grid-column-drop-indicator) {
+  background-color: var(--gp-grid-primary);
   border-radius: 2px;
 }
 
@@ -359,7 +390,6 @@
   top: 0;
   box-sizing: border-box;
   display: flex;
-  align-items: center;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -369,6 +399,7 @@
 
 /* Visual properties - :where() for zero specificity, so user highlight classes always win */
 :where(.gp-grid-cell) {
+  align-items: center;
   padding: 0 12px;
   cursor: cell;
   color: var(--gp-grid-text);
@@ -411,17 +442,20 @@
   position: absolute;
   width: 8px;
   height: 8px;
-  background-color: var(--gp-grid-primary);
-  border: 2px solid var(--gp-grid-bg);
-  cursor: crosshair;
   z-index: 11;
   pointer-events: auto;
   box-sizing: border-box;
-  border-radius: 1px;
   touch-action: none;
 }
 
-.gp-grid-fill-handle:hover {
+:where(.gp-grid-fill-handle) {
+  background-color: var(--gp-grid-primary);
+  border: 2px solid var(--gp-grid-bg);
+  cursor: crosshair;
+  border-radius: 1px;
+}
+
+:where(.gp-grid-fill-handle:hover) {
   transform: scale(1.2);
 }
 
@@ -429,13 +463,15 @@
   .gp-grid-fill-handle {
     width: 24px;
     height: 24px;
+  }
+  :where(.gp-grid-fill-handle) {
     border-width: 3px;
     border-radius: 3px;
   }
 }
 
 /* Fill preview (cells being filled) */
-.gp-grid-cell.gp-grid-cell--fill-preview {
+:where(.gp-grid-cell.gp-grid-cell--fill-preview) {
   background-color: var(--gp-grid-primary-light);
   border: 1px dashed var(--gp-grid-primary);
 }
@@ -447,6 +483,9 @@
 .gp-grid-edit-input {
   width: 100%;
   height: 100%;
+}
+
+:where(.gp-grid-edit-input) {
   padding: 0 11px;
   font-family: inherit;
   font-size: inherit;
@@ -459,6 +498,38 @@
   outline: none;
 }
 
+/* =============================================================================
+   Cell Peek (read-only multi-line overlay on dblclick of non-editable cell)
+   ============================================================================= */
+
+/* Structural: positioned absolutely by the framework wrapper; must sit above
+   selection (z:5), editing (z:10), fill handle (z:11). */
+.gp-grid-cell-peek {
+  position: absolute;
+  z-index: 20;
+  box-sizing: border-box;
+  overflow: auto;
+  max-height: 320px;
+}
+
+:where(.gp-grid-cell-peek) {
+  padding: 8px 11px;
+  background-color: var(--gp-grid-bg);
+  color: var(--gp-grid-text);
+  border: 2px solid var(--gp-grid-primary);
+  border-radius: 3px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1.4;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  cursor: text;
+  user-select: text;
+  -webkit-user-select: text;
+}
+
+
 
 /* =============================================================================
    Loading & Error States
@@ -481,12 +552,15 @@
   top: 0;
   left: 0;
   width: 100%;
-  height: 100%; 
+  height: 100%;
   pointer-events: none;
+}
+
+:where(.gp-grid-loading-overlay) {
   background-color: var(--gp-grid-loading-overlay-bg, rgba(255, 255, 255, 0.4));
 }
 
-.gp-grid-container--dark .gp-grid-loading-overlay {
+:where(.gp-grid-container--dark .gp-grid-loading-overlay) {
   background-color: var(--gp-grid-loading-overlay-bg, rgba(0, 0, 0, 0.3));
 }
 
@@ -496,6 +570,13 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  z-index: 1000;
+  display: flex;
+  pointer-events: auto;
+}
+
+:where(.gp-grid-loading) {
+  align-items: center;
   padding: 12px 20px;
   background-color: var(--gp-grid-loading-bg);
   color: var(--gp-grid-loading-text);
@@ -503,20 +584,19 @@
   border: 1px solid var(--gp-grid-border);
   font-weight: 500;
   font-size: 13px;
-  z-index: 1000;
-  display: flex;
-  align-items: center;
   gap: 10px;
-  pointer-events: auto;
 }
 
 .gp-grid-loading-spinner {
   width: 16px;
   height: 16px;
+  animation: gp-grid-spin 0.7s linear infinite;
+}
+
+:where(.gp-grid-loading-spinner) {
   border: 2px solid var(--gp-grid-border);
   border-top-color: var(--gp-grid-primary);
   border-radius: 50%;
-  animation: gp-grid-spin 0.7s linear infinite;
 }
 
 @keyframes gp-grid-spin {
@@ -530,6 +610,12 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  z-index: 1000;
+  user-select: text;
+  -webkit-user-select: text;
+}
+
+:where(.gp-grid-error) {
   padding: 12px 20px;
   background-color: var(--gp-grid-error-bg);
   color: var(--gp-grid-error-text);
@@ -537,11 +623,8 @@
   border: 1px solid var(--gp-grid-error-text);
   font-weight: 500;
   font-size: 13px;
-  z-index: 1000;
   max-width: 80%;
   text-align: center;
-  user-select: text;
-  -webkit-user-select: text;
   cursor: text;
 }
 
@@ -554,6 +637,9 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+}
+
+:where(.gp-grid-empty) {
   color: var(--gp-grid-text-muted);
   font-size: 14px;
   text-align: center;
@@ -569,20 +655,20 @@
   height: 8px;
 }
 
-.gp-grid-container::-webkit-scrollbar-track {
+:where(.gp-grid-container)::-webkit-scrollbar-track {
   background-color: var(--gp-grid-scrollbar-track);
 }
 
-.gp-grid-container::-webkit-scrollbar-thumb {
+:where(.gp-grid-container)::-webkit-scrollbar-thumb {
   background-color: var(--gp-grid-scrollbar-thumb);
   border-radius: 4px;
 }
 
-.gp-grid-container::-webkit-scrollbar-thumb:hover {
+:where(.gp-grid-container)::-webkit-scrollbar-thumb:hover {
   background-color: var(--gp-grid-scrollbar-thumb-hover);
 }
 
-.gp-grid-container::-webkit-scrollbar-corner {
+:where(.gp-grid-container)::-webkit-scrollbar-corner {
   background-color: var(--gp-grid-scrollbar-track);
 }
 
@@ -592,17 +678,21 @@
    ============================================================================= */
 
 .gp-grid-filter-popup {
+  max-height: 400px;
+  max-width: min(360px, calc(100vw - 16px));
+  display: flex;
+  flex-direction: column;
+}
+
+:where(.gp-grid-filter-popup) {
   background-color: var(--gp-grid-bg);
   border: 1px solid var(--gp-grid-border);
   border-radius: 6px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  max-height: 400px;
-  display: flex;
-  flex-direction: column;
   font-size: 13px;
 }
 
-.gp-grid-filter-header {
+:where(.gp-grid-filter-header) {
   padding: 10px 12px;
   font-weight: 600;
   border-bottom: 1px solid var(--gp-grid-border-light);
@@ -610,17 +700,23 @@
 }
 
 .gp-grid-filter-content {
-  padding: 10px 12px;
   display: flex;
   flex-direction: column;
-  gap: 10px;
   overflow-y: auto;
   min-height: 0;
 }
 
+:where(.gp-grid-filter-content) {
+  padding: 10px 12px;
+  gap: 10px;
+}
+
 /* Mode toggle (Values / Condition) */
 .gp-grid-filter-mode-toggle {
   display: flex;
+}
+
+:where(.gp-grid-filter-mode-toggle) {
   gap: 4px;
   background-color: var(--gp-grid-bg-alt);
   border-radius: 4px;
@@ -629,6 +725,9 @@
 
 .gp-grid-filter-mode-toggle button {
   flex: 1;
+}
+
+:where(.gp-grid-filter-mode-toggle button) {
   padding: 6px 10px;
   font-size: 11px;
   font-family: inherit;
@@ -640,18 +739,18 @@
   transition: background-color 0.15s ease, color 0.15s ease;
 }
 
-.gp-grid-filter-mode-toggle button:hover {
+:where(.gp-grid-filter-mode-toggle button:hover) {
   color: var(--gp-grid-text);
 }
 
-.gp-grid-filter-mode-toggle button.active {
+:where(.gp-grid-filter-mode-toggle button.active) {
   background-color: var(--gp-grid-bg);
   color: var(--gp-grid-text);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
 /* Info message for too many values */
-.gp-grid-filter-info {
+:where(.gp-grid-filter-info) {
   font-size: 11px;
   color: var(--gp-grid-text-secondary);
   padding: 6px 8px;
@@ -663,6 +762,10 @@
 .gp-grid-filter-search {
   width: 100%;
   height: 30px;
+  box-sizing: border-box;
+}
+
+:where(.gp-grid-filter-search) {
   padding: 0 10px;
   font-family: inherit;
   font-size: 12px;
@@ -670,10 +773,9 @@
   border-radius: 4px;
   background-color: var(--gp-grid-input-bg);
   color: var(--gp-grid-text);
-  box-sizing: border-box;
 }
 
-.gp-grid-filter-search:focus {
+:where(.gp-grid-filter-search:focus) {
   outline: none;
   border-color: var(--gp-grid-primary);
 }
@@ -681,11 +783,17 @@
 /* Select All / Deselect All actions */
 .gp-grid-filter-actions {
   display: flex;
+}
+
+:where(.gp-grid-filter-actions) {
   gap: 8px;
 }
 
 .gp-grid-filter-actions button {
   flex: 1;
+}
+
+:where(.gp-grid-filter-actions button) {
   padding: 4px 8px;
   font-size: 11px;
   font-family: inherit;
@@ -696,11 +804,11 @@
   cursor: pointer;
 }
 
-.gp-grid-filter-actions button:hover:not(:disabled) {
+:where(.gp-grid-filter-actions button:hover:not(:disabled)) {
   background-color: var(--gp-grid-hover);
 }
 
-.gp-grid-filter-actions button:disabled {
+:where(.gp-grid-filter-actions button:disabled) {
   opacity: 0.5;
   cursor: not-allowed;
 }
@@ -711,6 +819,9 @@
   overflow-y: auto;
   display: flex;
   flex-direction: column;
+}
+
+:where(.gp-grid-filter-list) {
   gap: 4px;
   border: 1px solid var(--gp-grid-border-light);
   border-radius: 4px;
@@ -720,18 +831,24 @@
 .gp-grid-filter-option {
   display: flex;
   align-items: center;
+}
+
+:where(.gp-grid-filter-option) {
   gap: 8px;
   padding: 4px 6px;
   border-radius: 3px;
   cursor: pointer;
 }
 
-.gp-grid-filter-option:hover {
+:where(.gp-grid-filter-option:hover) {
   background-color: var(--gp-grid-hover);
 }
 
 .gp-grid-filter-option input[type="checkbox"] {
   margin: 0;
+}
+
+:where(.gp-grid-filter-option input[type="checkbox"]) {
   cursor: pointer;
 }
 
@@ -742,7 +859,7 @@
   white-space: nowrap;
 }
 
-.gp-grid-filter-blank {
+:where(.gp-grid-filter-blank) {
   font-style: italic;
   color: var(--gp-grid-text-muted);
 }
@@ -751,17 +868,26 @@
 .gp-grid-filter-condition {
   display: flex;
   flex-direction: column;
+}
+
+:where(.gp-grid-filter-condition) {
   gap: 6px;
 }
 
 .gp-grid-filter-row {
   display: flex;
   align-items: center;
+}
+
+:where(.gp-grid-filter-row) {
   gap: 6px;
 }
 
 .gp-grid-filter-row select {
   height: 30px;
+}
+
+:where(.gp-grid-filter-row select) {
   padding: 0 6px;
   font-family: inherit;
   font-size: 12px;
@@ -778,6 +904,14 @@
 .gp-grid-filter-text-input {
   flex: 1;
   height: 30px;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+:where(.gp-grid-filter-row input[type="number"]),
+:where(.gp-grid-filter-row input[type="date"]),
+:where(.gp-grid-filter-row input[type="text"]),
+:where(.gp-grid-filter-text-input) {
   padding: 0 8px;
   font-family: inherit;
   font-size: 12px;
@@ -785,16 +919,14 @@
   border-radius: 4px;
   background-color: var(--gp-grid-input-bg);
   color: var(--gp-grid-text);
-  min-width: 0;
-  box-sizing: border-box;
 }
 
-.gp-grid-filter-row input:focus {
+:where(.gp-grid-filter-row input:focus) {
   outline: none;
   border-color: var(--gp-grid-primary);
 }
 
-.gp-grid-filter-to {
+:where(.gp-grid-filter-to) {
   font-size: 11px;
   color: var(--gp-grid-text-secondary);
 }
@@ -802,6 +934,9 @@
 .gp-grid-filter-remove {
   width: 24px;
   height: 24px;
+}
+
+:where(.gp-grid-filter-remove) {
   padding: 0;
   font-size: 16px;
   line-height: 1;
@@ -812,7 +947,7 @@
   cursor: pointer;
 }
 
-.gp-grid-filter-remove:hover {
+:where(.gp-grid-filter-remove:hover) {
   background-color: var(--gp-grid-error-bg);
   color: var(--gp-grid-error-text);
 }
@@ -820,12 +955,18 @@
 /* AND/OR combination toggle */
 .gp-grid-filter-combination {
   display: flex;
+}
+
+:where(.gp-grid-filter-combination) {
   gap: 4px;
   margin-bottom: 4px;
 }
 
 .gp-grid-filter-combination button {
   flex: 1;
+}
+
+:where(.gp-grid-filter-combination button) {
   padding: 4px 8px;
   font-size: 10px;
   font-family: inherit;
@@ -836,7 +977,7 @@
   cursor: pointer;
 }
 
-.gp-grid-filter-combination button.active {
+:where(.gp-grid-filter-combination button.active) {
   background-color: var(--gp-grid-primary);
   border-color: var(--gp-grid-primary);
   color: #fff;
@@ -845,6 +986,9 @@
 /* Add condition button */
 .gp-grid-filter-add {
   width: 100%;
+}
+
+:where(.gp-grid-filter-add) {
   padding: 6px;
   font-size: 11px;
   font-family: inherit;
@@ -855,7 +999,7 @@
   cursor: pointer;
 }
 
-.gp-grid-filter-add:hover {
+:where(.gp-grid-filter-add:hover) {
   background-color: var(--gp-grid-hover);
   border-color: var(--gp-grid-primary);
   color: var(--gp-grid-primary);
@@ -864,6 +1008,9 @@
 /* Apply / Clear buttons */
 .gp-grid-filter-buttons {
   display: flex;
+}
+
+:where(.gp-grid-filter-buttons) {
   gap: 8px;
   padding-top: 8px;
   border-top: 1px solid var(--gp-grid-border-light);
@@ -872,6 +1019,10 @@
 .gp-grid-filter-btn-clear,
 .gp-grid-filter-btn-apply {
   flex: 1;
+}
+
+:where(.gp-grid-filter-btn-clear),
+:where(.gp-grid-filter-btn-apply) {
   padding: 8px 12px;
   font-size: 12px;
   font-family: inherit;
@@ -879,23 +1030,23 @@
   cursor: pointer;
 }
 
-.gp-grid-filter-btn-clear {
+:where(.gp-grid-filter-btn-clear) {
   border: 1px solid var(--gp-grid-input-border);
   background-color: var(--gp-grid-bg);
   color: var(--gp-grid-text);
 }
 
-.gp-grid-filter-btn-clear:hover {
+:where(.gp-grid-filter-btn-clear:hover) {
   background-color: var(--gp-grid-hover);
 }
 
-.gp-grid-filter-btn-apply {
+:where(.gp-grid-filter-btn-apply) {
   border: 1px solid var(--gp-grid-primary);
   background-color: var(--gp-grid-primary);
   color: #fff;
 }
 
-.gp-grid-filter-btn-apply:hover {
+:where(.gp-grid-filter-btn-apply:hover) {
   opacity: 0.9;
 }
 
@@ -905,11 +1056,14 @@
    ============================================================================= */
 
 .gp-grid-cell--row-drag-handle {
-  cursor: grab;
   touch-action: none;
 }
 
-.gp-grid-cell--row-drag-handle:active {
+:where(.gp-grid-cell--row-drag-handle) {
+  cursor: grab;
+}
+
+:where(.gp-grid-cell--row-drag-handle:active) {
   cursor: grabbing;
 }
 
@@ -919,6 +1073,9 @@
   justify-content: center;
   width: 100%;
   height: 100%;
+}
+
+:where(.gp-grid-row-drag-icon) {
   color: var(--gp-grid-text-secondary);
 }
 
@@ -930,14 +1087,17 @@
 .gp-grid-row-drag-ghost {
   position: fixed;
   pointer-events: none;
-  opacity: 0.8;
   z-index: 2000;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+:where(.gp-grid-row-drag-ghost) {
+  opacity: 0.8;
   background-color: var(--gp-grid-bg, #fff);
   border: 2px solid var(--gp-grid-primary);
   border-radius: 4px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  overflow: hidden;
-  box-sizing: border-box;
 }
 
 .gp-grid-row-drop-indicator {
@@ -945,8 +1105,11 @@
   left: 0;
   width: 100%;
   height: 3px;
-  background-color: var(--gp-grid-primary);
   z-index: 1000;
   pointer-events: none;
+}
+
+:where(.gp-grid-row-drop-indicator) {
+  background-color: var(--gp-grid-primary);
   border-radius: 2px;
 }