@revolist/revogrid 4.25.0 → 4.25.2

package/dist/collection/components/revoGrid/revo-grid-style.css

@@ -1,4 +1,5 @@
-revo-grid[data-rg-theme-base=default] {
+revo-grid:is([theme=default], [theme=dark]),
+revo-grid:not([theme]) {
   --rg-theme-font-family: var(
     --revo-grid-font-family,
     Helvetica,
@@ -21,80 +22,111 @@ revo-grid[data-rg-theme-base=default] {
   border: 1px solid var(--rg-theme-header-border);
   font-size: var(--rg-theme-font-size);
 }
-revo-grid[data-rg-theme-base=default] .rowHeaders revogr-header {
+revo-grid:is([theme=default], [theme=dark]) .rowHeaders revogr-header,
+revo-grid:not([theme]) .rowHeaders revogr-header {
   box-shadow: -1px 0 0 0 var(--rg-theme-header-border) inset;
 }
-revo-grid[data-rg-theme-base=default] revogr-header {
+revo-grid:is([theme=default], [theme=dark]) revogr-header,
+revo-grid:not([theme]) revogr-header {
   text-align: var(--rg-theme-header-text-align);
   line-height: var(--rg-theme-header-height);
   background-color: var(--rg-theme-header-bg);
 }
-revo-grid[data-rg-theme-base=default] revogr-header .group-rgRow {
+revo-grid:is([theme=default], [theme=dark]) revogr-header .group-rgRow,
+revo-grid:not([theme]) revogr-header .group-rgRow {
   box-shadow: none;
 }
-revo-grid[data-rg-theme-base=default] revogr-header .group-rgRow .rgHeaderCell {
+revo-grid:is([theme=default], [theme=dark]) revogr-header .group-rgRow .rgHeaderCell,
+revo-grid:not([theme]) revogr-header .group-rgRow .rgHeaderCell {
   box-shadow: -1px 0 0 0 var(--rg-theme-header-border), -1px 0 0 0 var(--rg-theme-header-border) inset, 0 -1px 0 0 var(--rg-theme-header-border), 0 -1px 0 0 var(--rg-theme-header-border) inset;
 }
-revo-grid[data-rg-theme-base=default] revogr-header .header-rgRow,
-revo-grid[data-rg-theme-base=default] revogr-header .group-rgRow {
+revo-grid:is([theme=default], [theme=dark]) revogr-header .header-rgRow,
+revo-grid:is([theme=default], [theme=dark]) revogr-header .group-rgRow,
+revo-grid:not([theme]) revogr-header .header-rgRow,
+revo-grid:not([theme]) revogr-header .group-rgRow {
   text-transform: var(--rg-theme-header-text-transform);
   font-size: var(--rg-theme-header-font-size);
   font-weight: var(--rg-theme-header-font-weight);
   color: var(--rg-theme-header-color);
 }
-revo-grid[data-rg-theme-base=default] revogr-header .header-rgRow {
+revo-grid:is([theme=default], [theme=dark]) revogr-header .header-rgRow,
+revo-grid:not([theme]) revogr-header .header-rgRow {
   height: var(--rg-theme-header-height);
   box-shadow: 0 -1px 0 0 var(--rg-theme-header-border) inset;
 }
-revo-grid[data-rg-theme-base=default] revogr-header .rgHeaderCell {
+revo-grid:is([theme=default], [theme=dark]) revogr-header .rgHeaderCell,
+revo-grid:not([theme]) revogr-header .rgHeaderCell {
   box-shadow: -1px 0 0 0 var(--rg-theme-header-border) inset, 0 -1px 0 0 var(--rg-theme-header-border), 0 -1px 0 0 var(--rg-theme-header-border) inset;
 }
-revo-grid[data-rg-theme-base=default] .rowHeaders {
+revo-grid:is([theme=default], [theme=dark]) .rowHeaders,
+revo-grid:not([theme]) .rowHeaders {
   background-color: var(--rg-theme-row-headers-bg);
 }
-revo-grid[data-rg-theme-base=default] .rowHeaders revogr-data .rgCell {
+revo-grid:is([theme=default], [theme=dark]) .rowHeaders revogr-data .rgCell,
+revo-grid:not([theme]) .rowHeaders revogr-data .rgCell {
   color: var(--rg-theme-row-headers-color);
 }
-revo-grid[data-rg-theme-base=default] .rowHeaders revogr-data .rgCell:first-child {
+revo-grid:is([theme=default], [theme=dark]) .rowHeaders revogr-data .rgCell:first-child,
+revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:first-child {
   box-shadow: 0 -1px 0 0 var(--rg-theme-header-border) inset;
 }
-revo-grid[data-rg-theme-base=default] .rowHeaders revogr-data .rgCell:not(:first-child) {
+revo-grid:is([theme=default], [theme=dark]) .rowHeaders revogr-data .rgCell:not(:first-child),
+revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:not(:first-child) {
   box-shadow: 0 -1px 0 0 var(--rg-theme-header-border) inset, -1px 0 0 0 var(--rg-theme-header-border) inset;
 }
-revo-grid[data-rg-theme-base=default] .rowHeaders revogr-data .rgCell:last-child {
+revo-grid:is([theme=default], [theme=dark]) .rowHeaders revogr-data .rgCell:last-child,
+revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:last-child {
   border-right: 1px solid var(--rg-theme-header-border);
 }
-revo-grid[data-rg-theme-base=default] .rowHeaders revogr-data revogr-header {
+revo-grid:is([theme=default], [theme=dark]) .rowHeaders revogr-data revogr-header,
+revo-grid:not([theme]) .rowHeaders revogr-data revogr-header {
   box-shadow: 0 -1px 0 0 var(--rg-theme-header-border) inset;
 }
-revo-grid[data-rg-theme-base=default] revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child {
+revo-grid:is([theme=default], [theme=dark]) revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child,
+revo-grid:not([theme]) revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child {
   box-shadow: 0 -1px 0 0 var(--rg-theme-cell-border) inset, -1px 0 0 0 var(--rg-theme-header-border) inset;
 }
-revo-grid[data-rg-theme-base=default] revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell {
+revo-grid:is([theme=default], [theme=dark]) revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell,
+revo-grid:not([theme]) revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell {
   box-shadow: 0 1px 0 0 var(--rg-theme-header-border) inset, -1px 0 0 0 var(--rg-theme-header-border) inset;
 }
-revo-grid[data-rg-theme-base=default] revogr-viewport-scroll.colPinEnd,
-revo-grid[data-rg-theme-base=default] revogr-viewport-scroll.colPinEnd revogr-header {
+revo-grid:is([theme=default], [theme=dark]) revogr-viewport-scroll.colPinEnd,
+revo-grid:is([theme=default], [theme=dark]) revogr-viewport-scroll.colPinEnd revogr-header,
+revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd,
+revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd revogr-header {
   box-shadow: 1px 0 0 var(--rg-theme-header-border) inset;
 }
-revo-grid[data-rg-theme-base=default] .footer-wrapper revogr-data .rgRow:first-child .rgCell {
+revo-grid:is([theme=default], [theme=dark]) .footer-wrapper revogr-data .rgRow:first-child .rgCell,
+revo-grid:not([theme]) .footer-wrapper revogr-data .rgRow:first-child .rgCell {
   box-shadow: 0 1px 0 0 var(--rg-theme-cell-border) inset, -1px 0 0 0 var(--rg-theme-cell-border) inset, 0 -1px 0 0 var(--rg-theme-cell-border) inset;
 }
-revo-grid[data-rg-theme-base=default] revogr-data {
+revo-grid:is([theme=default], [theme=dark]) revogr-data,
+revo-grid:not([theme]) revogr-data {
   text-align: var(--rg-theme-cell-text-align);
 }
-revo-grid[data-rg-theme-base=default] revogr-data .revo-draggable {
+revo-grid:is([theme=default], [theme=dark]) revogr-data .revo-draggable,
+revo-grid:not([theme]) revogr-data .revo-draggable {
   float: left;
 }
-revo-grid[data-rg-theme-base=default] revogr-data .rgRow {
+revo-grid:is([theme=default], [theme=dark]) revogr-data .rgRow,
+revo-grid:not([theme]) revogr-data .rgRow {
   line-height: var(--rg-theme-row-size, 27px);
 }
-revo-grid[data-rg-theme-base=default] revogr-data .rgCell {
+revo-grid:is([theme=default], [theme=dark]) revogr-data .rgCell,
+revo-grid:not([theme]) revogr-data .rgCell {
   padding: var(--rg-theme-cell-padding);
   box-shadow: 0 -1px 0 0 var(--rg-theme-cell-border) inset, -1px 0 0 0 var(--rg-theme-cell-border) inset;
 }
 
-revo-grid[data-rg-theme-base=material] {
+/*
+ * Material built-ins and standalone custom themes share the common tokenized
+ * structure. A custom theme remains identified only by its own `theme` value.
+ */
+revo-grid:is([theme=material], [theme=darkMaterial]),
+revo-grid[theme]:not([theme=default],
+[theme=dark],
+[theme=compact],
+[theme=darkCompact]) {
   --rg-theme-font-family: var(
     --revo-grid-font-family,
     Nunito,
@@ -125,7 +157,11 @@ revo-grid[data-rg-theme-base=material] {
   --rg-theme-cell-padding: var(--revo-grid-cell-padding, 0 15px);
   font-family: var(--rg-theme-font-family);
 }
-revo-grid[data-rg-theme-base=material] revogr-header {
+revo-grid:is([theme=material], [theme=darkMaterial]) revogr-header,
+revo-grid[theme]:not([theme=default],
+[theme=dark],
+[theme=compact],
+[theme=darkCompact]) revogr-header {
   color: var(--rg-theme-header-color);
   background-color: var(--rg-theme-header-bg);
   line-height: var(--rg-theme-header-height);
@@ -134,32 +170,60 @@ revo-grid[data-rg-theme-base=material] revogr-header {
   text-transform: var(--rg-theme-header-text-transform);
   text-align: var(--rg-theme-header-text-align);
 }
-revo-grid[data-rg-theme-base=material] revogr-header .rgHeaderCell {
+revo-grid:is([theme=material], [theme=darkMaterial]) revogr-header .rgHeaderCell,
+revo-grid[theme]:not([theme=default],
+[theme=dark],
+[theme=compact],
+[theme=darkCompact]) revogr-header .rgHeaderCell {
   padding: var(--rg-theme-header-padding);
   text-overflow: ellipsis;
 }
-revo-grid[data-rg-theme-base=material] revogr-header .header-rgRow {
+revo-grid:is([theme=material], [theme=darkMaterial]) revogr-header .header-rgRow,
+revo-grid[theme]:not([theme=default],
+[theme=dark],
+[theme=compact],
+[theme=darkCompact]) revogr-header .header-rgRow {
   height: var(--rg-theme-header-height);
 }
-revo-grid[data-rg-theme-base=material] .rowHeaders {
+revo-grid:is([theme=material], [theme=darkMaterial]) .rowHeaders,
+revo-grid[theme]:not([theme=default],
+[theme=dark],
+[theme=compact],
+[theme=darkCompact]) .rowHeaders {
   color: var(--rg-theme-row-headers-color);
   background-color: var(--rg-theme-row-headers-bg);
 }
-revo-grid[data-rg-theme-base=material] .rowHeaders revogr-data .rgCell {
+revo-grid:is([theme=material], [theme=darkMaterial]) .rowHeaders revogr-data .rgCell,
+revo-grid[theme]:not([theme=default],
+[theme=dark],
+[theme=compact],
+[theme=darkCompact]) .rowHeaders revogr-data .rgCell {
   color: var(--rg-theme-row-headers-color);
 }
-revo-grid[data-rg-theme-base=material] revogr-data {
+revo-grid:is([theme=material], [theme=darkMaterial]) revogr-data,
+revo-grid[theme]:not([theme=default],
+[theme=dark],
+[theme=compact],
+[theme=darkCompact]) revogr-data {
   text-align: var(--rg-theme-cell-text-align);
 }
-revo-grid[data-rg-theme-base=material] revogr-data .rgRow {
+revo-grid:is([theme=material], [theme=darkMaterial]) revogr-data .rgRow,
+revo-grid[theme]:not([theme=default],
+[theme=dark],
+[theme=compact],
+[theme=darkCompact]) revogr-data .rgRow {
   line-height: var(--rg-theme-row-size, 42px);
 }
-revo-grid[data-rg-theme-base=material] revogr-data .rgCell {
+revo-grid:is([theme=material], [theme=darkMaterial]) revogr-data .rgCell,
+revo-grid[theme]:not([theme=default],
+[theme=dark],
+[theme=compact],
+[theme=darkCompact]) revogr-data .rgCell {
   padding: var(--rg-theme-cell-padding);
   box-shadow: -1px 0 0 0 var(--rg-theme-cell-vertical-border) inset;
 }
 
-revo-grid[data-rg-theme-base=compact] {
+revo-grid:is([theme=compact], [theme=darkCompact]) {
   --rg-theme-font-family: var(
     --revo-grid-font-family,
     Nunito,
@@ -190,7 +254,7 @@ revo-grid[data-rg-theme-base=compact] {
   --rg-theme-cell-padding: var(--revo-grid-cell-padding, 0 15px);
   font-family: var(--rg-theme-font-family);
 }
-revo-grid[data-rg-theme-base=compact] revogr-header {
+revo-grid:is([theme=compact], [theme=darkCompact]) revogr-header {
   color: var(--rg-theme-header-color);
   background-color: var(--rg-theme-header-bg);
   line-height: var(--rg-theme-header-height);
@@ -199,31 +263,31 @@ revo-grid[data-rg-theme-base=compact] revogr-header {
   text-transform: var(--rg-theme-header-text-transform);
   text-align: var(--rg-theme-header-text-align);
 }
-revo-grid[data-rg-theme-base=compact] revogr-header .rgHeaderCell {
+revo-grid:is([theme=compact], [theme=darkCompact]) revogr-header .rgHeaderCell {
   padding: var(--rg-theme-header-padding);
   text-overflow: ellipsis;
 }
-revo-grid[data-rg-theme-base=compact] revogr-header .header-rgRow {
+revo-grid:is([theme=compact], [theme=darkCompact]) revogr-header .header-rgRow {
   height: var(--rg-theme-header-height);
 }
-revo-grid[data-rg-theme-base=compact] .rowHeaders {
+revo-grid:is([theme=compact], [theme=darkCompact]) .rowHeaders {
   color: var(--rg-theme-row-headers-color);
   background-color: var(--rg-theme-row-headers-bg);
 }
-revo-grid[data-rg-theme-base=compact] .rowHeaders revogr-data .rgCell {
+revo-grid:is([theme=compact], [theme=darkCompact]) .rowHeaders revogr-data .rgCell {
   color: var(--rg-theme-row-headers-color);
 }
-revo-grid[data-rg-theme-base=compact] revogr-data {
+revo-grid:is([theme=compact], [theme=darkCompact]) revogr-data {
   text-align: var(--rg-theme-cell-text-align);
 }
-revo-grid[data-rg-theme-base=compact] revogr-data .rgRow {
+revo-grid:is([theme=compact], [theme=darkCompact]) revogr-data .rgRow {
   line-height: var(--rg-theme-row-size, 32px);
 }
-revo-grid[data-rg-theme-base=compact] revogr-data .rgCell {
+revo-grid:is([theme=compact], [theme=darkCompact]) revogr-data .rgCell {
   padding: var(--rg-theme-cell-padding);
   box-shadow: -1px 0 0 0 var(--rg-theme-cell-vertical-border) inset;
 }
-revo-grid[data-rg-theme-base=compact] revo-dropdown .rv-dr-root {
+revo-grid:is([theme=compact], [theme=darkCompact]) revo-dropdown .rv-dr-root {
   padding: 0px 9px;
 }
 
@@ -308,41 +372,33 @@ revo-grid[dir=rtl] revogr-edit {
 revo-grid[dir=rtl] .rgHeaderCell {
   direction: rtl;
 }
-revo-grid[dir=rtl][data-rg-theme-base=material] revogr-header {
+revo-grid[dir=rtl] revogr-header,
+revo-grid[dir=rtl] revogr-data {
   text-align: right;
 }
-revo-grid[dir=rtl][data-rg-theme-base=material] revogr-data {
-  text-align: right;
-}
-revo-grid[dir=rtl][data-rg-theme-base=default] .rowHeaders {
+revo-grid[dir=rtl]:is([theme=default], [theme=dark]) .rowHeaders, revo-grid[dir=rtl]:not([theme]) .rowHeaders {
   background-color: var(--rg-theme-row-headers-bg);
 }
-revo-grid[dir=rtl][data-rg-theme-base=default] .rowHeaders revogr-data .rgCell {
+revo-grid[dir=rtl]:is([theme=default], [theme=dark]) .rowHeaders revogr-data .rgCell, revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell {
   color: var(--rg-theme-row-headers-color);
 }
-revo-grid[dir=rtl][data-rg-theme-base=default] .rowHeaders revogr-data .rgCell:first-child {
+revo-grid[dir=rtl]:is([theme=default], [theme=dark]) .rowHeaders revogr-data .rgCell:first-child, revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell:first-child {
   box-shadow: 0 -1px 0 0 var(--rg-theme-header-border) inset;
 }
-revo-grid[dir=rtl][data-rg-theme-base=default] .rowHeaders revogr-data .rgCell:not(:first-child) {
+revo-grid[dir=rtl]:is([theme=default], [theme=dark]) .rowHeaders revogr-data .rgCell:not(:first-child), revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell:not(:first-child) {
   box-shadow: 0 -1px 0 0 var(--rg-theme-header-border) inset, 1px 0 0 0 var(--rg-theme-header-border) inset;
 }
-revo-grid[dir=rtl][data-rg-theme-base=default] .rowHeaders revogr-data .rgCell:last-child {
+revo-grid[dir=rtl]:is([theme=default], [theme=dark]) .rowHeaders revogr-data .rgCell:last-child, revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell:last-child {
   border-left: 1px solid var(--rg-theme-header-border);
   border-right: none;
 }
-revo-grid[dir=rtl][data-rg-theme-base=default] .rowHeaders revogr-data revogr-header {
+revo-grid[dir=rtl]:is([theme=default], [theme=dark]) .rowHeaders revogr-data revogr-header, revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data revogr-header {
   box-shadow: 0 -1px 0 0 var(--rg-theme-header-border) inset;
 }
-revo-grid[dir=rtl][data-rg-theme-base=default] revogr-header {
-  text-align: right;
-}
-revo-grid[dir=rtl][data-rg-theme-base=default] revogr-data {
-  text-align: right;
-}
-revo-grid[dir=rtl][data-rg-theme-base=compact] revogr-header {
+revo-grid[dir=rtl]:is([theme=default], [theme=dark]) revogr-header, revo-grid[dir=rtl]:not([theme]) revogr-header {
   text-align: right;
 }
-revo-grid[dir=rtl][data-rg-theme-base=compact] revogr-data {
+revo-grid[dir=rtl]:is([theme=default], [theme=dark]) revogr-data, revo-grid[dir=rtl]:not([theme]) revogr-data {
   text-align: right;
 }
 
@@ -382,8 +438,33 @@ revo-grid[dir=rtl][data-rg-theme-base=compact] revogr-data {
   text-overflow: ellipsis;
 }
 
+/* Built-in Material and Compact themes historically inherited their surfaces. */
+revo-grid[theme]:is([theme=compact],
+[theme=darkCompact],
+[theme=material],
+[theme=darkMaterial]) {
+  background-color: transparent;
+}
+revo-grid[theme]:is([theme=compact],
+[theme=darkCompact],
+[theme=material],
+[theme=darkMaterial]) revogr-header,
+revo-grid[theme]:is([theme=compact],
+[theme=darkCompact],
+[theme=material],
+[theme=darkMaterial]) .rowHeaders {
+  background-color: transparent;
+  color: inherit;
+}
+revo-grid[theme]:is([theme=compact],
+[theme=darkCompact],
+[theme=material],
+[theme=darkMaterial]) .rowHeaders revogr-data .rgCell {
+  color: inherit;
+}
+
 revo-grid {
-  /* Internal fallbacks keep public --revo-grid-* variables inheritable. */
+  /* Internal defaults preserve inherited legacy public values. */
   --rg-theme-primary: var(--revo-grid-primary, #266ae8);
   --rg-theme-primary-transparent: var(
     --revo-grid-primary-transparent,
@@ -533,7 +614,10 @@ revo-grid[data-rg-theme-scheme=dark] {
   --rg-theme-foreground: var(--revo-grid-foreground, #fff);
   --rg-theme-text: var(--revo-grid-text, rgba(255, 255, 255, 0.9));
   --rg-theme-divider: var(--revo-grid-divider, #505050);
-  --rg-theme-border: var(--revo-grid-border, rgba(255, 255, 255, 0.2));
+  --rg-theme-border: var(
+    --revo-grid-border,
+    rgba(255, 255, 255, 0.2)
+  );
   --rg-theme-filter-panel-bg: var(--revo-grid-filter-panel-bg, #212529);
   --rg-theme-filter-panel-border: var(
     --revo-grid-filter-panel-border,
@@ -555,8 +639,22 @@ revo-grid[data-rg-theme-scheme=dark] {
   --rg-theme-header-color: var(--revo-grid-header-color, #fff);
   --rg-theme-header-border: var(--revo-grid-header-border, #505050);
   --rg-theme-cell-border: var(--revo-grid-cell-border, #424242);
-  --rg-theme-focused-bg: var(--revo-grid-focused-bg, rgba(52, 58, 64, 0.5));
-  --rg-theme-row-hover: var(--revo-grid-row-hover, rgba(80, 80, 80, 0.5));
+  --rg-theme-focused-bg: var(
+    --revo-grid-focused-bg,
+    rgba(52, 58, 64, 0.5)
+  );
+  --rg-theme-row-hover: var(
+    --revo-grid-row-hover,
+    rgba(80, 80, 80, 0.5)
+  );
+  --rg-theme-row-headers-bg: var(
+    --revo-grid-row-headers-bg,
+    rgba(52, 58, 64, 0.8)
+  );
+  --rg-theme-row-headers-color: var(
+    --revo-grid-row-headers-color,
+    rgba(255, 255, 255, 0.8)
+  );
   --rg-theme-cell-disabled-bg: var(
     --revo-grid-cell-disabled-bg,
     rgba(255, 255, 255, 0.07)
@@ -573,6 +671,69 @@ revo-grid[data-rg-theme-scheme=dark] {
 revo-grid[data-rg-theme-scheme=light] {
   color-scheme: light;
 }
+revo-grid {
+  /* Keep existing descendant integrations on the legacy public contract. */
+}
+revo-grid > * {
+  --revo-grid-primary: var(--rg-theme-primary);
+  --revo-grid-primary-transparent: var(--rg-theme-primary-transparent);
+  --revo-grid-background: var(--rg-theme-background);
+  --revo-grid-foreground: var(--rg-theme-foreground);
+  --revo-grid-divider: var(--rg-theme-divider);
+  --revo-grid-shadow: var(--rg-theme-shadow);
+  --revo-grid-text: var(--rg-theme-text);
+  --revo-grid-border: var(--rg-theme-border);
+  --revo-grid-header-bg: var(--rg-theme-header-bg);
+  --revo-grid-header-color: var(--rg-theme-header-color);
+  --revo-grid-header-border: var(--rg-theme-header-border);
+  --revo-grid-header-focused-bg: var(--rg-theme-header-focused-bg);
+  --revo-grid-header-hover-bg: var(--rg-theme-header-hover-bg);
+  --revo-grid-cell-border: var(--rg-theme-cell-border);
+  --revo-grid-cell-vertical-border: var(--rg-theme-cell-vertical-border);
+  --revo-grid-focused-bg: var(--rg-theme-focused-bg);
+  --revo-grid-row-hover: var(--rg-theme-row-hover);
+  --revo-grid-row-headers-bg: var(--rg-theme-row-headers-bg);
+  --revo-grid-row-headers-color: var(--rg-theme-row-headers-color);
+  --revo-grid-cell-disabled-bg: var(--rg-theme-cell-disabled-bg);
+  --revo-grid-filter-panel-bg: var(--rg-theme-filter-panel-bg);
+  --revo-grid-filter-panel-border: var(--rg-theme-filter-panel-border);
+  --revo-grid-filter-panel-shadow: var(--rg-theme-filter-panel-shadow);
+  --revo-grid-filter-panel-input-bg: var(--rg-theme-filter-panel-input-bg);
+  --revo-grid-filter-panel-divider: var(--rg-theme-filter-panel-divider);
+  --revo-grid-filter-panel-select-border: var(--rg-theme-filter-panel-select-border);
+  --revo-grid-filter-panel-select-border-hover: var(--rg-theme-filter-panel-select-border-hover);
+  --revo-grid-filter-panel-reorder-accent: var(--rg-theme-filter-panel-reorder-accent);
+  --revo-grid-filter-panel-reorder-color: var(--rg-theme-filter-panel-reorder-color);
+  --revo-grid-filter-panel-text: var(--rg-theme-filter-panel-text);
+  --revo-grid-filter-panel-muted-text: var(--rg-theme-filter-panel-muted-text);
+  --revo-grid-filter-panel-focus-ring: var(--rg-theme-filter-panel-focus-ring);
+  --revo-grid-filter-panel-icon: var(--rg-theme-filter-panel-icon);
+  --revo-grid-filter-panel-icon-active: var(--rg-theme-filter-panel-icon-active);
+  --revo-grid-font-family: var(--rg-theme-font-family);
+  --revo-grid-font-size: var(--rg-theme-font-size);
+  --revo-grid-header-height: var(--rg-theme-header-height);
+  --revo-grid-header-font-size: var(--rg-theme-header-font-size);
+  --revo-grid-header-font-weight: var(--rg-theme-header-font-weight);
+  --revo-grid-header-text-transform: var(--rg-theme-header-text-transform);
+  --revo-grid-header-text-align: var(--rg-theme-header-text-align);
+  --revo-grid-cell-text-align: var(--rg-theme-cell-text-align);
+  --revo-grid-header-padding: var(--rg-theme-header-padding);
+  --revo-grid-cell-padding: var(--rg-theme-cell-padding);
+  --revo-grid-selection-border: var(--rg-theme-selection-border);
+  --revo-grid-selection-bg: var(--rg-theme-selection-bg);
+  --revo-grid-autofill-handle-bg: var(--rg-theme-autofill-handle-bg);
+  --revo-grid-autofill-handle-border: var(--rg-theme-autofill-handle-border);
+  --revo-grid-range-handle-bg: var(--rg-theme-range-handle-bg);
+  --revo-grid-temporary-range-border: var(--rg-theme-temporary-range-border);
+  --revo-grid-temporary-selection-border: var(--rg-theme-temporary-selection-border);
+  --revo-grid-header-resize-hover: var(--rg-theme-header-resize-hover);
+  --revo-grid-button-text: var(--rg-theme-button-text);
+  --revo-grid-button-bg: var(--rg-theme-button-bg);
+  --revo-grid-button-success-bg: var(--rg-theme-button-success-bg);
+  --revo-grid-button-danger-bg: var(--rg-theme-button-danger-bg);
+  --revo-grid-button-outline-border: var(--rg-theme-button-outline-border);
+  --revo-grid-button-outline-text: var(--rg-theme-button-outline-text);
+}
 revo-grid {
   direction: ltr !important;
 }

package/dist/collection/components/revoGrid/revo-grid.js

@@ -1149,7 +1149,7 @@ export class RevoGridComponent {
         const dimensions = this.dimensionProvider.stores;
         const verticalScroll = (h("revogr-scroll-virtual", { class: "vertical", dimension: typeRow, clientSize: viewports[typeRow].store.get('clientSize'), virtualSize: viewports[typeRow].store.get('virtualSize'), realSize: dimensions[typeRow].store.get('realSize'), ref: el => this.scrollingService.registerElement(el, 'rowScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }));
         const horizontalScroll = (h("revogr-scroll-virtual", { class: "horizontal", dimension: typeCol, clientSize: viewports[typeCol].store.get('clientSize'), virtualSize: viewports[typeCol].store.get('virtualSize'), realSize: dimensions[typeCol].store.get('realSize'), ref: el => this.scrollingService.registerElement(el, 'colScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }));
-        return (h(Host, { dir: this.rtl ? 'rtl' : 'ltr', "data-rg-theme-base": this.themeService.theme.base, "data-rg-theme-scheme": this.themeService.theme.colorScheme, style: this.themeStyles }, this.hideAttribution ? null : (h("revogr-attribution", { class: "attribution" })), h("slot", { name: "header" }), h("div", { class: "main-viewport", onClick: (e) => {
+        return (h(Host, { dir: this.rtl ? 'rtl' : 'ltr', "data-rg-theme-scheme": this.themeService.theme.colorScheme, style: this.themeStyles }, this.hideAttribution ? null : (h("revogr-attribution", { class: "attribution" })), h("slot", { name: "header" }), h("div", { class: "main-viewport", onClick: (e) => {
                 var _a;
                 if (e.currentTarget === e.target) {
                     (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.clearEdit();

package/dist/collection/themeManager/presets/aurora.js

@@ -75,7 +75,6 @@ const auroraButtons = [
 /** Compact graphite and evergreen preset with luminous emerald states. */
 export const auroraTheme = defineTheme({
     name: 'aurora',
-    extends: 'darkCompact',
     colorScheme: 'dark',
     defaultRowSize: 34,
     tokens: createPresetTokens({

package/dist/collection/themeManager/presets/high-contrast-dark.js

@@ -75,7 +75,6 @@ const highContrastDarkButtons = [
 /** High-contrast dark preset with luminous yellow and cyan interaction states. */
 export const highContrastDarkTheme = defineTheme({
     name: 'highContrastDark',
-    extends: 'darkMaterial',
     colorScheme: 'dark',
     defaultRowSize: 40,
     tokens: createPresetTokens({

package/dist/collection/themeManager/presets/high-contrast.js

@@ -75,7 +75,6 @@ const highContrastButtons = [
 /** High-contrast light preset with dark structure and vivid blue focus states. */
 export const highContrastTheme = defineTheme({
     name: 'highContrast',
-    extends: 'material',
     colorScheme: 'light',
     defaultRowSize: 40,
     tokens: createPresetTokens({

package/dist/collection/themeManager/presets/midnight.js

@@ -75,7 +75,6 @@ const midnightButtons = [
 /** Deep navy preset with cyan selection and violet action accents. */
 export const midnightTheme = defineTheme({
     name: 'midnight',
-    extends: 'darkMaterial',
     colorScheme: 'dark',
     defaultRowSize: 40,
     tokens: createPresetTokens({

package/dist/collection/themeManager/presets/ocean.js

@@ -75,7 +75,6 @@ const oceanButtons = [
 /** Bright blue and slate preset for data-heavy daytime interfaces. */
 export const oceanTheme = defineTheme({
     name: 'ocean',
-    extends: 'material',
     colorScheme: 'light',
     defaultRowSize: 38,
     tokens: createPresetTokens({

package/dist/collection/themeManager/theme.service.js

@@ -14,7 +14,6 @@ const builtInThemeNames = new Set(allowedThemes);
 const builtInThemes = Object.freeze({
     default: Object.freeze({
         name: 'default',
-        base: 'default',
         colorScheme: 'light',
         defaultRowSize: 27,
         tokens: Object.freeze({}),
@@ -22,7 +21,6 @@ const builtInThemes = Object.freeze({
     }),
     material: Object.freeze({
         name: 'material',
-        base: 'material',
         colorScheme: 'light',
         defaultRowSize: 42,
         tokens: Object.freeze({}),
@@ -30,7 +28,6 @@ const builtInThemes = Object.freeze({
     }),
     compact: Object.freeze({
         name: 'compact',
-        base: 'compact',
         colorScheme: 'light',
         defaultRowSize: 32,
         tokens: Object.freeze({}),
@@ -38,7 +35,6 @@ const builtInThemes = Object.freeze({
     }),
     darkMaterial: Object.freeze({
         name: 'darkMaterial',
-        base: 'material',
         colorScheme: 'dark',
         defaultRowSize: 42,
         tokens: Object.freeze({}),
@@ -46,7 +42,6 @@ const builtInThemes = Object.freeze({
     }),
     darkCompact: Object.freeze({
         name: 'darkCompact',
-        base: 'compact',
         colorScheme: 'dark',
         defaultRowSize: 32,
         tokens: Object.freeze({}),
@@ -62,6 +57,11 @@ function isPositiveSize(size) {
 function getColorScheme(scheme, fallback) {
     return scheme === 'light' || scheme === 'dark' ? scheme : fallback;
 }
+function getCssOnlyThemeColorScheme(theme) {
+    // Before resolved theme metadata existed, the dark defaults were selected by
+    // the case-sensitive CSS selector `[theme*='dark']`.
+    return theme.includes('dark') ? 'dark' : 'light';
+}
 function getThemeTokens(tokens) {
     if (!tokens || typeof tokens !== 'object') {
         return {};
@@ -120,7 +120,7 @@ export default class ThemeService {
         }
         const definition = this.customThemes.get(name);
         if (!definition) {
-            this.currentTheme = Object.assign(Object.assign({}, builtInThemes.default), { name, tokens: {}, custom: true });
+            this.currentTheme = Object.assign(Object.assign({}, builtInThemes.default), { name, colorScheme: getCssOnlyThemeColorScheme(name), tokens: {}, custom: true });
             return this.currentTheme;
         }
         this.currentTheme = this.resolveDefinition(name);
@@ -155,7 +155,6 @@ export default class ThemeService {
         for (const definition of definitions) {
             resolved = {
                 name: definition.name,
-                base: resolved.base,
                 colorScheme: getColorScheme(definition.colorScheme, resolved.colorScheme),
                 defaultRowSize: isPositiveSize(definition.defaultRowSize)
                     ? definition.defaultRowSize

package/dist/esm/index.js

@@ -266,7 +266,6 @@ const oceanButtons = [
 /** Bright blue and slate preset for data-heavy daytime interfaces. */
 const oceanTheme = defineTheme({
     name: 'ocean',
-    extends: 'material',
     colorScheme: 'light',
     defaultRowSize: 38,
     tokens: createPresetTokens({
@@ -351,7 +350,6 @@ const midnightButtons = [
 /** Deep navy preset with cyan selection and violet action accents. */
 const midnightTheme = defineTheme({
     name: 'midnight',
-    extends: 'darkMaterial',
     colorScheme: 'dark',
     defaultRowSize: 40,
     tokens: createPresetTokens({
@@ -436,7 +434,6 @@ const auroraButtons = [
 /** Compact graphite and evergreen preset with luminous emerald states. */
 const auroraTheme = defineTheme({
     name: 'aurora',
-    extends: 'darkCompact',
     colorScheme: 'dark',
     defaultRowSize: 34,
     tokens: createPresetTokens({
@@ -521,7 +518,6 @@ const highContrastButtons = [
 /** High-contrast light preset with dark structure and vivid blue focus states. */
 const highContrastTheme = defineTheme({
     name: 'highContrast',
-    extends: 'material',
     colorScheme: 'light',
     defaultRowSize: 40,
     tokens: createPresetTokens({
@@ -606,7 +602,6 @@ const highContrastDarkButtons = [
 /** High-contrast dark preset with luminous yellow and cyan interaction states. */
 const highContrastDarkTheme = defineTheme({
     name: 'highContrastDark',
-    extends: 'darkMaterial',
     colorScheme: 'dark',
     defaultRowSize: 40,
     tokens: createPresetTokens({