@adaptabletools/adaptable 24.0.0 → 24.0.1

package/devtools.d.ts

@@ -255,6 +255,18 @@ export type DevToolsMountPayload = {
     primaryKey?: string;
     /** Grouped modules visible in the Settings Panel sidebar for this instance. */
     settingsPanelNavigation?: DevToolsSettingsPanelNavigationGroup[];
+    appThemeVars?: DevToolsThemeVars;
+    themeVariant?: DevToolsThemeVariant;
+};
+/** Whether the current AdapTable theme is light or dark. */
+export type DevToolsThemeVariant = 'light' | 'dark';
+/**
+ * Computed `--ab-*` values of the page for the light and the dark theme: the AdapTable
+ * defaults with every app override applied.
+ */
+export type DevToolsThemeVars = {
+    light: Record<string, string>;
+    dark: Record<string, string>;
 };
 export type DevToolsHostPageLogMessage = {
     type: Extract<DevToolsHostPageMessageType, 'log'>;
@@ -294,6 +306,7 @@ export type DevToolsHostPageMessage = {
         userName?: string;
         primaryKey?: string;
         settingsPanelNavigation?: DevToolsSettingsPanelNavigationGroup[];
+        themeVariant?: DevToolsThemeVariant;
     };
 } | {
     type: Extract<DevToolsHostPageMessageType, 'column-info'>;

package/index.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.4 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer adaptable.reset, adaptable.components, adaptable.utilities, adaptable.theming;
 @property --tw-animation-delay {
@@ -2438,7 +2438,7 @@
   }
   .twa\:tabular-nums {
     --tw-numeric-spacing: tabular-nums;
-    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
   }
   .twa\:underline-offset-4 {
     text-underline-offset: 4px;
@@ -2489,19 +2489,19 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:ring-0 {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:ring-1 {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:ring-2 {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:ring-3 {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:ring-accent {
@@ -2531,7 +2531,7 @@
   }
   .twa\:ring-offset-1 {
     --tw-ring-offset-width: 1px;
-    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   }
   .twa\:ring-offset-background {
     --tw-ring-offset-color: var(--ab-color-background);
@@ -2556,7 +2556,7 @@
   .twa\:drop-shadow-\[0_0_1px_rgba\(0\,0\,0\,0\.9\)\] {
     --tw-drop-shadow-size: drop-shadow(0 0 1px var(--tw-drop-shadow-color, rgba(0,0,0,0.9)));
     --tw-drop-shadow: var(--tw-drop-shadow-size);
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
   .twa\:transition-\(--ab-cmp-simple-button__transition\) {
     transition-property: var(--ab-cmp-simple-button__transition);
@@ -2699,103 +2699,103 @@
   .twa\:not-focus-within\:\[--ab-focus__box-shadow\:none\]:not(:focus-within) {
     --ab-focus__box-shadow: none;
   }
-  .twa\:group-focus-within\:shadow-\(--ab-focus__box-shadow\):is(:where(.twa\:group):focus-within *) {
+  :is(:where(.twa\:group):focus-within .twa\:group-focus-within\:shadow-\(--ab-focus__box-shadow\)) {
     --tw-shadow: var(--ab-focus__box-shadow);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .twa\:group-focus\/dropdown-menu-item\:text-accent-foreground:is(:where(.twa\:group\/dropdown-menu-item):focus *) {
+  :is(:where(.twa\:group\/dropdown-menu-item):focus .twa\:group-focus\/dropdown-menu-item\:text-accent-foreground) {
     color: var(--ab-color-accent-foreground);
   }
-  .twa\:group-has-data-\[slot\=combobox-clear\]\/input-group\:hidden:is(:where(.twa\:group\/input-group):has([data-slot="combobox-clear"]) *) {
+  :is(:where(.twa\:group\/input-group):has([data-slot="combobox-clear"]) .twa\:group-has-data-\[slot\=combobox-clear\]\/input-group\:hidden) {
     display: none;
   }
-  .twa\:group-has-\[\>input\]\/input-group\:pt-2:is(:where(.twa\:group\/input-group):has( > input) *) {
+  :is(:where(.twa\:group\/input-group):has( > input) .twa\:group-has-\[\>input\]\/input-group\:pt-2) {
     padding-top: calc(var(--ab-base-space) * 2);
   }
-  .twa\:group-has-\[\>input\]\/input-group\:pb-2:is(:where(.twa\:group\/input-group):has( > input) *) {
+  :is(:where(.twa\:group\/input-group):has( > input) .twa\:group-has-\[\>input\]\/input-group\:pb-2) {
     padding-bottom: calc(var(--ab-base-space) * 2);
   }
-  .twa\:group-data-empty\/combobox-content\:flex:is(:where(.twa\:group\/combobox-content)[data-empty] *) {
+  :is(:where(.twa\:group\/combobox-content)[data-empty] .twa\:group-data-empty\/combobox-content\:flex) {
     display: flex;
   }
-  .twa\:group-data-resizable\/combobox-content\:flex:is(:where(.twa\:group\/combobox-content)[data-resizable] *) {
+  :is(:where(.twa\:group\/combobox-content)[data-resizable] .twa\:group-data-resizable\/combobox-content\:flex) {
     display: flex;
   }
-  .twa\:group-data-resizable\/combobox-content\:h-auto:is(:where(.twa\:group\/combobox-content)[data-resizable] *) {
+  :is(:where(.twa\:group\/combobox-content)[data-resizable] .twa\:group-data-resizable\/combobox-content\:h-auto) {
     height: auto;
   }
-  .twa\:group-data-resizable\/combobox-content\:max-h-none:is(:where(.twa\:group\/combobox-content)[data-resizable] *) {
+  :is(:where(.twa\:group\/combobox-content)[data-resizable] .twa\:group-data-resizable\/combobox-content\:max-h-none) {
     max-height: none;
   }
-  .twa\:group-data-resizable\/combobox-content\:min-h-0:is(:where(.twa\:group\/combobox-content)[data-resizable] *) {
+  :is(:where(.twa\:group\/combobox-content)[data-resizable] .twa\:group-data-resizable\/combobox-content\:min-h-0) {
     min-height: 0px;
   }
-  .twa\:group-data-resizable\/combobox-content\:flex-1:is(:where(.twa\:group\/combobox-content)[data-resizable] *) {
+  :is(:where(.twa\:group\/combobox-content)[data-resizable] .twa\:group-data-resizable\/combobox-content\:flex-1) {
     flex: 1;
   }
-  .twa\:group-data-resizable\/combobox-content\:flex-col:is(:where(.twa\:group\/combobox-content)[data-resizable] *) {
+  :is(:where(.twa\:group\/combobox-content)[data-resizable] .twa\:group-data-resizable\/combobox-content\:flex-col) {
     flex-direction: column;
   }
-  .twa\:group-data-vertical\/tabs\:w-full:is(:where(.twa\:group\/tabs)[data-vertical] *) {
+  :is(:where(.twa\:group\/tabs)[data-vertical] .twa\:group-data-vertical\/tabs\:w-full) {
     width: 100%;
   }
-  .twa\:group-data-vertical\/tabs\:justify-start:is(:where(.twa\:group\/tabs)[data-vertical] *) {
+  :is(:where(.twa\:group\/tabs)[data-vertical] .twa\:group-data-vertical\/tabs\:justify-start) {
     justify-content: flex-start;
   }
-  .twa\:group-data-\[disabled\=true\]\/input-group\:opacity-50:is(:where(.twa\:group\/input-group)[data-disabled="true"] *) {
+  :is(:where(.twa\:group\/input-group)[data-disabled="true"] .twa\:group-data-\[disabled\=true\]\/input-group\:opacity-50) {
     opacity: 50%;
   }
-  .twa\:group-data-\[focused\=true\]\/day\:relative:is(:where(.twa\:group\/day)[data-focused="true"] *) {
+  :is(:where(.twa\:group\/day)[data-focused="true"] .twa\:group-data-\[focused\=true\]\/day\:relative) {
     position: relative;
   }
-  .twa\:group-data-\[focused\=true\]\/day\:z-10:is(:where(.twa\:group\/day)[data-focused="true"] *) {
+  :is(:where(.twa\:group\/day)[data-focused="true"] .twa\:group-data-\[focused\=true\]\/day\:z-10) {
     z-index: 10;
   }
-  .twa\:group-data-\[focused\=true\]\/day\:border-ring:is(:where(.twa\:group\/day)[data-focused="true"] *) {
+  :is(:where(.twa\:group\/day)[data-focused="true"] .twa\:group-data-\[focused\=true\]\/day\:border-ring) {
     border-color: var(--ab-color-ring);
   }
-  .twa\:group-data-\[focused\=true\]\/day\:ring-\[3px\]:is(:where(.twa\:group\/day)[data-focused="true"] *) {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+  :is(:where(.twa\:group\/day)[data-focused="true"] .twa\:group-data-\[focused\=true\]\/day\:ring-\[3px\]) {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .twa\:group-data-\[focused\=true\]\/day\:ring-ring\/50:is(:where(.twa\:group\/day)[data-focused="true"] *) {
+  :is(:where(.twa\:group\/day)[data-focused="true"] .twa\:group-data-\[focused\=true\]\/day\:ring-ring\/50) {
     --tw-ring-color: var(--ab-color-ring);
   }
   @supports (color: color-mix(in lab, red, red)) {
-    .twa\:group-data-\[focused\=true\]\/day\:ring-ring\/50:is(:where(.twa\:group\/day)[data-focused="true"] *) {
+    :is(:where(.twa\:group\/day)[data-focused="true"] .twa\:group-data-\[focused\=true\]\/day\:ring-ring\/50) {
       --tw-ring-color: color-mix(in oklab, var(--ab-color-ring) 50%, transparent);
     }
   }
-  .twa\:group-data-\[orientation\=horizontal\]\/tabs\:h-input:is(:where(.twa\:group\/tabs)[data-orientation="horizontal"] *) {
+  :is(:where(.twa\:group\/tabs)[data-orientation="horizontal"] .twa\:group-data-\[orientation\=horizontal\]\/tabs\:h-input) {
     height: var(--ab-input-height);
   }
-  .twa\:group-data-\[orientation\=vertical\]\/tabs\:h-fit:is(:where(.twa\:group\/tabs)[data-orientation="vertical"] *) {
+  :is(:where(.twa\:group\/tabs)[data-orientation="vertical"] .twa\:group-data-\[orientation\=vertical\]\/tabs\:h-fit) {
     height: fit-content;
   }
-  .twa\:group-data-\[orientation\=vertical\]\/tabs\:flex-col:is(:where(.twa\:group\/tabs)[data-orientation="vertical"] *) {
+  :is(:where(.twa\:group\/tabs)[data-orientation="vertical"] .twa\:group-data-\[orientation\=vertical\]\/tabs\:flex-col) {
     flex-direction: column;
   }
-  .twa\:group-data-\[size\=sm\]\/alert-dialog-content\:grid:is(:where(.twa\:group\/alert-dialog-content)[data-size="sm"] *) {
+  :is(:where(.twa\:group\/alert-dialog-content)[data-size="sm"] .twa\:group-data-\[size\=sm\]\/alert-dialog-content\:grid) {
     display: grid;
   }
-  .twa\:group-data-\[size\=sm\]\/alert-dialog-content\:grid-cols-2:is(:where(.twa\:group\/alert-dialog-content)[data-size="sm"] *) {
+  :is(:where(.twa\:group\/alert-dialog-content)[data-size="sm"] .twa\:group-data-\[size\=sm\]\/alert-dialog-content\:grid-cols-2) {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
-  .twa\:group-data-\[variant\=line\]\/tabs-list\:bg-transparent:is(:where(.twa\:group\/tabs-list)[data-variant="line"] *) {
+  :is(:where(.twa\:group\/tabs-list)[data-variant="line"] .twa\:group-data-\[variant\=line\]\/tabs-list\:bg-transparent) {
     background-color: transparent;
   }
-  .twa\:peer-focus-visible\:border-ring:is(:where(.twa\:peer):focus-visible ~ *) {
+  :is(:where(.twa\:peer):focus-visible ~ .twa\:peer-focus-visible\:border-ring) {
     border-color: var(--ab-color-ring);
   }
-  .twa\:peer-focus-visible\:ring-3:is(:where(.twa\:peer):focus-visible ~ *) {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+  :is(:where(.twa\:peer):focus-visible ~ .twa\:peer-focus-visible\:ring-3) {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .twa\:peer-focus-visible\:ring-ring\/50:is(:where(.twa\:peer):focus-visible ~ *) {
+  :is(:where(.twa\:peer):focus-visible ~ .twa\:peer-focus-visible\:ring-ring\/50) {
     --tw-ring-color: var(--ab-color-ring);
   }
   @supports (color: color-mix(in lab, red, red)) {
-    .twa\:peer-focus-visible\:ring-ring\/50:is(:where(.twa\:peer):focus-visible ~ *) {
+    :is(:where(.twa\:peer):focus-visible ~ .twa\:peer-focus-visible\:ring-ring\/50) {
       --tw-ring-color: color-mix(in oklab, var(--ab-color-ring) 50%, transparent);
     }
   }
@@ -3043,27 +3043,27 @@
     --tw-content: "";
     content: var(--tw-content);
   }
-  .twa\:group-data-horizontal\/tabs\:after\:inset-x-0:is(:where(.twa\:group\/tabs)[data-horizontal] *)::after {
+  :is(:where(.twa\:group\/tabs)[data-horizontal] .twa\:group-data-horizontal\/tabs\:after\:inset-x-0)::after {
     content: var(--tw-content);
     inset-inline: 0px;
   }
-  .twa\:group-data-horizontal\/tabs\:after\:bottom-\[-5px\]:is(:where(.twa\:group\/tabs)[data-horizontal] *)::after {
+  :is(:where(.twa\:group\/tabs)[data-horizontal] .twa\:group-data-horizontal\/tabs\:after\:bottom-\[-5px\])::after {
     content: var(--tw-content);
     bottom: -5px;
   }
-  .twa\:group-data-horizontal\/tabs\:after\:h-0\.5:is(:where(.twa\:group\/tabs)[data-horizontal] *)::after {
+  :is(:where(.twa\:group\/tabs)[data-horizontal] .twa\:group-data-horizontal\/tabs\:after\:h-0\.5)::after {
     content: var(--tw-content);
     height: calc(var(--ab-base-space) * 0.5);
   }
-  .twa\:group-data-vertical\/tabs\:after\:inset-y-0:is(:where(.twa\:group\/tabs)[data-vertical] *)::after {
+  :is(:where(.twa\:group\/tabs)[data-vertical] .twa\:group-data-vertical\/tabs\:after\:inset-y-0)::after {
     content: var(--tw-content);
     inset-block: 0px;
   }
-  .twa\:group-data-vertical\/tabs\:after\:-right-1:is(:where(.twa\:group\/tabs)[data-vertical] *)::after {
+  :is(:where(.twa\:group\/tabs)[data-vertical] .twa\:group-data-vertical\/tabs\:after\:-right-1)::after {
     content: var(--tw-content);
     right: calc(var(--ab-base-space) * -1);
   }
-  .twa\:group-data-vertical\/tabs\:after\:w-0\.5:is(:where(.twa\:group\/tabs)[data-vertical] *)::after {
+  :is(:where(.twa\:group\/tabs)[data-vertical] .twa\:group-data-vertical\/tabs\:after\:w-0\.5)::after {
     content: var(--tw-content);
     width: calc(var(--ab-base-space) * 0.5);
   }
@@ -3082,7 +3082,7 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:focus-within\:ring-3:focus-within {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:focus-within\:ring-ring\/50:focus-within {
@@ -3115,7 +3115,7 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   :is(.twa\:\*\:focus-within\:ring-3 > *):focus-within {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   :is(.twa\:\*\:focus-within\:ring-ring\/50 > *):focus-within {
@@ -3244,7 +3244,7 @@
       opacity: 100%;
     }
     .twa\:hover\:ring-2:hover {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
     .twa\:hover\:ring-ring\/40:hover {
@@ -3282,7 +3282,7 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:focus\:ring-3:focus {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:focus\:ring-ring\/50:focus {
@@ -3329,23 +3329,23 @@
     border-color: var(--ab-color-ring);
   }
   .twa\:focus-visible\:ring-0:focus-visible {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:focus-visible\:ring-1:focus-visible {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:focus-visible\:ring-2:focus-visible {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:focus-visible\:ring-3:focus-visible {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:focus-visible\:ring-\[3px\]:focus-visible {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:focus-visible\:ring-accent:focus-visible {
@@ -3372,7 +3372,7 @@
   }
   .twa\:focus-visible\:ring-offset-1:focus-visible {
     --tw-ring-offset-width: 1px;
-    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   }
   .twa\:focus-visible\:outline-hidden:focus-visible {
     --tw-outline-style: none;
@@ -3425,7 +3425,7 @@
     border-color: inherit;
   }
   :where([data-slot="combobox-content"]) .twa\:in-data-\[slot\=combobox-content\]\:focus-within\:ring-0:focus-within {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   :where([data-slot="popover-content"]) .twa\:in-data-\[slot\=popover-content\]\:bg-transparent {
@@ -3444,7 +3444,7 @@
     border-color: var(--ab-color-destructive);
   }
   .twa\:has-aria-invalid\:ring-3:has([aria-invalid="true"]) {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:has-aria-invalid\:ring-destructive\/20:has([aria-invalid="true"]) {
@@ -3498,7 +3498,7 @@
     border-color: var(--ab-color-ring);
   }
   .twa\:has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-3:has(:is([data-slot=input-group-control]:focus-visible)) {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-ring\/50:has(:is([data-slot=input-group-control]:focus-visible)) {
@@ -3513,7 +3513,7 @@
     border-color: var(--ab-color-destructive);
   }
   .twa\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-3:has(:is([data-slot][aria-invalid=true])) {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/20:has(:is([data-slot][aria-invalid=true])) {
@@ -3576,11 +3576,11 @@
     border-color: var(--ab-color-destructive);
   }
   .twa\:aria-invalid\:ring-0[aria-invalid="true"] {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:aria-invalid\:ring-3[aria-invalid="true"] {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
@@ -3642,21 +3642,21 @@
   .twa\:data-active\:text-accent-foreground[data-active] {
     color: var(--ab-color-accent-foreground);
   }
-  .twa\:group-data-\[variant\=default\]\/tabs-list\:data-active\:shadow-sm:is(:where(.twa\:group\/tabs-list)[data-variant="default"] *)[data-active] {
+  :is(:where(.twa\:group\/tabs-list)[data-variant="default"] .twa\:group-data-\[variant\=default\]\/tabs-list\:data-active\:shadow-sm)[data-active] {
     --tw-shadow: var(--ab-shadow-sm);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .twa\:group-data-\[variant\=line\]\/tabs-list\:data-active\:border-transparent:is(:where(.twa\:group\/tabs-list)[data-variant="line"] *)[data-active] {
+  :is(:where(.twa\:group\/tabs-list)[data-variant="line"] .twa\:group-data-\[variant\=line\]\/tabs-list\:data-active\:border-transparent)[data-active] {
     border-color: transparent;
   }
-  .twa\:group-data-\[variant\=line\]\/tabs-list\:data-active\:bg-transparent:is(:where(.twa\:group\/tabs-list)[data-variant="line"] *)[data-active] {
+  :is(:where(.twa\:group\/tabs-list)[data-variant="line"] .twa\:group-data-\[variant\=line\]\/tabs-list\:data-active\:bg-transparent)[data-active] {
     background-color: transparent;
   }
-  .twa\:group-data-\[variant\=line\]\/tabs-list\:data-active\:shadow-none:is(:where(.twa\:group\/tabs-list)[data-variant="line"] *)[data-active] {
+  :is(:where(.twa\:group\/tabs-list)[data-variant="line"] .twa\:group-data-\[variant\=line\]\/tabs-list\:data-active\:shadow-none)[data-active] {
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .twa\:group-data-\[variant\=line\]\/tabs-list\:data-active\:after\:opacity-100:is(:where(.twa\:group\/tabs-list)[data-variant="line"] *)[data-active]::after {
+  :is(:where(.twa\:group\/tabs-list)[data-variant="line"] .twa\:group-data-\[variant\=line\]\/tabs-list\:data-active\:after\:opacity-100)[data-active]::after {
     content: var(--tw-content);
     opacity: 100%;
   }
@@ -3942,8 +3942,8 @@
   @supports (backdrop-filter: var(--tw)) {
     .twa\:supports-backdrop-filter\:backdrop-blur-xs {
       --tw-backdrop-blur: blur(var(--twa-blur-xs));
-      -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-      backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+      -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+      backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
     }
   }
   @media (width >= 40rem) {
@@ -3956,19 +3956,19 @@
     .twa\:sm\:justify-end {
       justify-content: flex-end;
     }
-    .twa\:sm\:group-data-\[size\=default\]\/alert-dialog-content\:row-span-2:is(:where(.twa\:group\/alert-dialog-content)[data-size="default"] *) {
+    :is(:where(.twa\:group\/alert-dialog-content)[data-size="default"] .twa\:sm\:group-data-\[size\=default\]\/alert-dialog-content\:row-span-2) {
       grid-row: span 2 / span 2;
     }
-    .twa\:sm\:group-data-\[size\=default\]\/alert-dialog-content\:place-items-start:is(:where(.twa\:group\/alert-dialog-content)[data-size="default"] *) {
+    :is(:where(.twa\:group\/alert-dialog-content)[data-size="default"] .twa\:sm\:group-data-\[size\=default\]\/alert-dialog-content\:place-items-start) {
       place-items: start;
     }
-    .twa\:sm\:group-data-\[size\=default\]\/alert-dialog-content\:text-left:is(:where(.twa\:group\/alert-dialog-content)[data-size="default"] *) {
+    :is(:where(.twa\:group\/alert-dialog-content)[data-size="default"] .twa\:sm\:group-data-\[size\=default\]\/alert-dialog-content\:text-left) {
       text-align: left;
     }
-    .twa\:sm\:group-data-\[size\=default\]\/alert-dialog-content\:group-has-data-\[slot\=alert-dialog-media\]\/alert-dialog-content\:col-start-2:is(:where(.twa\:group\/alert-dialog-content)[data-size="default"] *):is(:where(.twa\:group\/alert-dialog-content):has([data-slot="alert-dialog-media"]) *) {
+    :is(:where(.twa\:group\/alert-dialog-content):has([data-slot="alert-dialog-media"]) :is(:where(.twa\:group\/alert-dialog-content)[data-size="default"] .twa\:sm\:group-data-\[size\=default\]\/alert-dialog-content\:group-has-data-\[slot\=alert-dialog-media\]\/alert-dialog-content\:col-start-2)) {
       grid-column-start: 2;
     }
-    .twa\:sm\:group-data-\[size\=default\]\/alert-dialog-content\:has-data-\[slot\=alert-dialog-media\]\:grid-rows-\[auto_1fr\]:is(:where(.twa\:group\/alert-dialog-content)[data-size="default"] *):has([data-slot="alert-dialog-media"]) {
+    :is(:where(.twa\:group\/alert-dialog-content)[data-size="default"] .twa\:sm\:group-data-\[size\=default\]\/alert-dialog-content\:has-data-\[slot\=alert-dialog-media\]\:grid-rows-\[auto_1fr\]):has([data-slot="alert-dialog-media"]) {
       grid-template-rows: auto 1fr;
     }
     .twa\:data-\[size\=default\]\:sm\:max-w-lg[data-size="default"] {
@@ -10628,7 +10628,7 @@
   }
 }
 @layer properties {
-  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: block))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
       --tw-animation-delay: 0s;
       --tw-animation-direction: normal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "24.0.0",
+  "version": "24.0.1",
   "description": "Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1793356932854 || Date.now(),
-    VERSION: "24.0.0" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1793697750309 || Date.now(),
+    VERSION: "24.0.1" || '--current-version--',
 };

package/src/migration/VersionUpgrade24.d.ts

@@ -41,6 +41,10 @@ export declare class VersionUpgrade24 extends VersionUpgrade {
     constructor(logger: MigrationLogger, options?: {
         layoutTagOptions?: LayoutTagOptions;
     });
+    /** Custom function name → where the migration now calls it (one run). */
+    private customFunctionUsages;
+    /** Objects whose `PercentChange` predicate became `PERCENT_CHANGE(...) > n` (one run). */
+    private percentChangeObjects;
     migrateState(state: AdaptableState): AdaptableState;
     /**
      * Step 17. The 20 swatch colours were merged into the palette after its 12
@@ -76,10 +80,14 @@ export declare class VersionUpgrade24 extends VersionUpgrade {
      * Conversion uses the Phase 0 lossless lowering in `predicateExpressionMigration.ts`
      * (`columnFilterPredicatesToExpression` / `columnFilterPredicatesToPreferredFilter`).
      *
+     * Custom predicates become calls to the custom function replacing them
+     * (`largeNotional` → `LARGE_NOTIONAL([col])`); see
+     * {@link VersionUpgrade24.logCustomPredicateFunctions}.
+     *
      * Safety rules:
-     * - **Never drop a filter.** If any predicate cannot be lowered (custom predicate,
-     *   `PercentChange`, etc.), legacy `Predicates` are left untouched and a warning
-     *   is logged.
+     * - **Never drop a filter.** If any predicate cannot be lowered (a custom id
+     *   with no valid function name, an incomplete predicate, etc.), legacy
+     *   `Predicates` are left untouched and a warning is logged.
      * - **Idempotent.** Filters that already have an `Expression` skip conversion and
      *   drop any leftover `Predicates` / `PredicatesOperator` / `PreferredFilter`.
      */
@@ -135,11 +143,16 @@ export declare class VersionUpgrade24 extends VersionUpgrade {
      * Used by Alert, Flashing Cell, and Format Column migrations.
      * Conversion reuses Phase 0 lossless lowering (`rulePredicatesToBooleanExpression`).
      *
+     * Custom predicates become calls to the custom function replacing them
+     * (`largeNotional` → `LARGE_NOTIONAL($SCOPE)`), recorded under `label`.
+     *
+     * `PercentChange` becomes the approximate `PERCENT_CHANGE($SCOPE) > n`,
+     * recorded under `label` (see {@link VersionUpgrade24.logPercentChangeApproximations}).
+     *
      * Safety rules (shared by all predicate-rule modules):
-     * - **Never drop a rule.** If any predicate cannot be lowered (user-defined custom
-     *   predicate, `PercentChange` — AQL `PERCENT_CHANGE` returns a number, not a
-     *   boolean — or an incomplete predicate), legacy `Predicates` are left untouched.
-     *   (`AnyChange` lowers to `ANY_CHANGE(...)`.)
+     * - **Never drop a rule.** If any predicate cannot be lowered (a custom id with
+     *   no valid function name, or an incomplete predicate), legacy `Predicates`
+     *   are left untouched. (`AnyChange` lowers to `ANY_CHANGE(...)`.)
      * - **Idempotent.** A rule that already has `BooleanExpression`,
      *   `AggregatedBooleanExpression`, or `ObservableExpression` is skipped, and any
      *   leftover `Predicates` are removed.
@@ -185,10 +198,32 @@ export declare class VersionUpgrade24 extends VersionUpgrade {
      */
     private migrateGreenfieldExpressionTexts;
     /**
-     * Logs how many predicate rules were migrated vs preserved for a module.
-     * Preserved rules continue to evaluate via the legacy predicate path.
+     * Logs how many predicate rules were migrated for a module, and warns about
+     * each rule that was not: v24 does not evaluate Predicates, so the warning
+     * states what the rule now does.
+     *
+     * @param preserved one description per unconverted rule (object + Predicate ids)
      */
     private logPredicateMigrationSummary;
+    /** `Alert 'Big moves' (PercentChange)` — the object and its Predicate ids. */
+    private describePredicates;
+    /** Records where the custom functions of a converted rule are now called. */
+    private recordCustomFunctionCalls;
+    private recordPercentChange;
+    /**
+     * Warns where `PercentChange` became `PERCENT_CHANGE(...) > n`. The predicate
+     * divided the change by the smaller of the previous and new values,
+     * `PERCENT_CHANGE` divides it by the previous value: rises give the same
+     * percentage, falls a smaller one.
+     */
+    private logPercentChangeApproximations;
+    /**
+     * Logs, for each custom function the custom predicates were converted to,
+     * where it is now called and what the application must define. The
+     * migration does not check that the function exists: until it is defined
+     * the rules are invalid at runtime (logged, never applied).
+     */
+    private logCustomPredicateFunctions;
     /**
      * Unwraps every `Rule` / `Query` expression wrapper into its string, and
      * renames the `Query` properties to `Expression`.