@uipath/apollo-wind 2.52.0 → 2.52.2

package/dist/components/ui/index.cjs

@@ -30,13 +30,13 @@ var __webpack_modules__ = {
     "./calendar" (module) {
         module.exports = require("./calendar.cjs");
     },
-    "./card" (module) {
+    "@/components/ui/card" (module) {
         module.exports = require("./card.cjs");
     },
     "./chart" (module) {
         module.exports = require("./chart.cjs");
     },
-    "@/components/ui/checkbox" (module) {
+    "./checkbox" (module) {
         module.exports = require("./checkbox.cjs");
     },
     "./collapsible" (module) {
@@ -60,7 +60,7 @@ var __webpack_modules__ = {
     "./datetime-picker" (module) {
         module.exports = require("./datetime-picker.cjs");
     },
-    "./dialog" (module) {
+    "@/components/ui/dialog" (module) {
         module.exports = require("./dialog.cjs");
     },
     "./drawer" (module) {
@@ -87,13 +87,13 @@ var __webpack_modules__ = {
     "@/components/ui/info-tooltip" (module) {
         module.exports = require("./info-tooltip.cjs");
     },
-    "./input-group" (module) {
+    "@/components/ui/input-group" (module) {
         module.exports = require("./input-group.cjs");
     },
-    "@/components/ui/input" (module) {
+    "./input" (module) {
         module.exports = require("./input.cjs");
     },
-    "./label" (module) {
+    "@/components/ui/label" (module) {
         module.exports = require("./label.cjs");
     },
     "./layout" (module) {
@@ -168,16 +168,16 @@ var __webpack_modules__ = {
     "./tabs" (module) {
         module.exports = require("./tabs.cjs");
     },
-    "@/components/ui/textarea" (module) {
+    "./textarea" (module) {
         module.exports = require("./textarea.cjs");
     },
     "./toggle-group" (module) {
         module.exports = require("./toggle-group.cjs");
     },
-    "./toggle" (module) {
+    "@/components/ui/toggle" (module) {
         module.exports = require("./toggle.cjs");
     },
-    "./tooltip" (module) {
+    "@/components/ui/tooltip" (module) {
         module.exports = require("./tooltip.cjs");
     },
     "./tree-view" (module) {
@@ -303,7 +303,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_calendar__rspack_import_9[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _card__rspack_import_10 = __webpack_require__("./card");
+    var _card__rspack_import_10 = __webpack_require__("@/components/ui/card");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _card__rspack_import_10)if ([
         "TreeView",
@@ -317,7 +317,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_chart__rspack_import_11[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _checkbox__rspack_import_12 = __webpack_require__("@/components/ui/checkbox");
+    var _checkbox__rspack_import_12 = __webpack_require__("./checkbox");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _checkbox__rspack_import_12)if ([
         "TreeView",
@@ -373,7 +373,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_datetime_picker__rspack_import_19[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dialog__rspack_import_20 = __webpack_require__("./dialog");
+    var _dialog__rspack_import_20 = __webpack_require__("@/components/ui/dialog");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dialog__rspack_import_20)if ([
         "TreeView",
@@ -436,21 +436,21 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_info_tooltip__rspack_import_28[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _input__rspack_import_29 = __webpack_require__("@/components/ui/input");
+    var _input__rspack_import_29 = __webpack_require__("./input");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _input__rspack_import_29)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_input__rspack_import_29[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _input_group__rspack_import_30 = __webpack_require__("./input-group");
+    var _input_group__rspack_import_30 = __webpack_require__("@/components/ui/input-group");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _input_group__rspack_import_30)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_input_group__rspack_import_30[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _label__rspack_import_31 = __webpack_require__("./label");
+    var _label__rspack_import_31 = __webpack_require__("@/components/ui/label");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _label__rspack_import_31)if ([
         "TreeView",
@@ -625,14 +625,14 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_tabs__rspack_import_55[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _textarea__rspack_import_56 = __webpack_require__("@/components/ui/textarea");
+    var _textarea__rspack_import_56 = __webpack_require__("./textarea");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _textarea__rspack_import_56)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_textarea__rspack_import_56[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _toggle__rspack_import_57 = __webpack_require__("./toggle");
+    var _toggle__rspack_import_57 = __webpack_require__("@/components/ui/toggle");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _toggle__rspack_import_57)if ([
         "TreeView",
@@ -646,7 +646,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_toggle_group__rspack_import_58[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _tooltip__rspack_import_59 = __webpack_require__("./tooltip");
+    var _tooltip__rspack_import_59 = __webpack_require__("@/components/ui/tooltip");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _tooltip__rspack_import_59)if ([
         "TreeView",

package/dist/components/ui/resizable.cjs

@@ -40,12 +40,12 @@ const ResizablePanelGroup = ({ className, ...props })=>/*#__PURE__*/ (0, jsx_run
 const ResizablePanel = external_react_resizable_panels_namespaceObject.Panel;
 const ResizableHandle = ({ withHandle, className, ...props })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_resizable_panels_namespaceObject.Separator, {
         "data-slot": "resizable-handle",
-        className: (0, index_cjs_namespaceObject.cn)('group relative flex w-px items-center justify-center bg-border transition-colors data-[separator=hover]:bg-primary data-[separator=active]:bg-primary after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90', className),
+        className: (0, index_cjs_namespaceObject.cn)('group relative flex w-px items-center justify-center bg-[var(--resizable-handle-divider-bg,var(--ap-wind-border))] transition-colors data-[separator=hover]:bg-primary! data-[separator=active]:bg-primary! after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90', className),
         ...props,
         children: withHandle && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-            className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border transition-colors group-data-[separator=hover]:bg-primary group-data-[separator=active]:bg-primary",
+            className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border transition-colors group-data-[separator=hover]:bg-primary! group-data-[separator=active]:bg-primary! [.light:not(.react-flow)_&]:bg-border-subtle [.dark:not(.react-flow)_&]:bg-foreground-subtle [.light:not(.react-flow)_&]:border-border-subtle [.light-hc_&]:border-border-subtle [.dark:not(.react-flow)_&]:border-border-subtle [.dark-hc_&]:border-border-subtle",
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.GripVertical, {
-                className: "h-2.5 w-2.5"
+                className: "h-2.5 w-2.5 [.light:not(.react-flow)_&]:text-foreground-emp [.light-hc_&]:text-foreground-inverse [.dark:not(.react-flow)_&]:text-foreground-inverse [.dark-hc_&]:text-foreground-inverse"
             })
         })
     });

package/dist/components/ui/resizable.d.ts

@@ -1,5 +1,5 @@
-import { Group, Panel, Separator } from 'react-resizable-panels';
 import type { PanelImperativeHandle } from 'react-resizable-panels';
+import { Group, Panel, Separator } from 'react-resizable-panels';
 declare const ResizablePanelGroup: ({ className, ...props }: React.ComponentProps<typeof Group>) => import("react/jsx-runtime").JSX.Element;
 declare const ResizablePanel: typeof Panel;
 declare const ResizableHandle: ({ withHandle, className, ...props }: React.ComponentProps<typeof Separator> & {

package/dist/components/ui/resizable.js

@@ -10,12 +10,12 @@ const ResizablePanelGroup = ({ className, ...props })=>/*#__PURE__*/ jsx(Group,
 const ResizablePanel = Panel;
 const ResizableHandle = ({ withHandle, className, ...props })=>/*#__PURE__*/ jsx(Separator, {
         "data-slot": "resizable-handle",
-        className: cn('group relative flex w-px items-center justify-center bg-border transition-colors data-[separator=hover]:bg-primary data-[separator=active]:bg-primary after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90', className),
+        className: cn('group relative flex w-px items-center justify-center bg-[var(--resizable-handle-divider-bg,var(--ap-wind-border))] transition-colors data-[separator=hover]:bg-primary! data-[separator=active]:bg-primary! after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90', className),
         ...props,
         children: withHandle && /*#__PURE__*/ jsx("div", {
-            className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border transition-colors group-data-[separator=hover]:bg-primary group-data-[separator=active]:bg-primary",
+            className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border transition-colors group-data-[separator=hover]:bg-primary! group-data-[separator=active]:bg-primary! [.light:not(.react-flow)_&]:bg-border-subtle [.dark:not(.react-flow)_&]:bg-foreground-subtle [.light:not(.react-flow)_&]:border-border-subtle [.light-hc_&]:border-border-subtle [.dark:not(.react-flow)_&]:border-border-subtle [.dark-hc_&]:border-border-subtle",
             children: /*#__PURE__*/ jsx(GripVertical, {
-                className: "h-2.5 w-2.5"
+                className: "h-2.5 w-2.5 [.light:not(.react-flow)_&]:text-foreground-emp [.light-hc_&]:text-foreground-inverse [.dark:not(.react-flow)_&]:text-foreground-inverse [.dark-hc_&]:text-foreground-inverse"
             })
         })
     });

package/dist/components/ui/tabs.cjs

@@ -173,7 +173,7 @@ ScrollableTabsList.displayName = 'ScrollableTabsList';
 const TabsTrigger = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_tabs_namespaceObject.Trigger, {
         ref: ref,
         "data-slot": "tabs-trigger",
-        className: (0, index_cjs_namespaceObject.cn)('inline-flex cursor-pointer items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm', className),
+        className: (0, index_cjs_namespaceObject.cn)('inline-flex cursor-pointer items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-(--tabs-active-shadow)', className),
         ...props
     }));
 TabsTrigger.displayName = react_tabs_namespaceObject.Trigger.displayName;

package/dist/components/ui/tabs.js

@@ -141,7 +141,7 @@ ScrollableTabsList.displayName = 'ScrollableTabsList';
 const TabsTrigger = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Trigger, {
         ref: ref,
         "data-slot": "tabs-trigger",
-        className: cn('inline-flex cursor-pointer items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm', className),
+        className: cn('inline-flex cursor-pointer items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-(--tabs-active-shadow)', className),
         ...props
     }));
 TabsTrigger.displayName = Trigger.displayName;

package/dist/styles.css

@@ -2482,6 +2482,12 @@
   .bg-\[\#ff0000\] {
     background-color: #ff0000;
   }
+  .bg-\[var\(--resizable-handle-divider-bg\,var\(--ap-wind-border\)\)\] {
+    background-color: var(--resizable-handle-divider-bg,var(--ap-wind-border));
+  }
+  .bg-\[var\(\.\.\.\)\] {
+    background-color: var(...);
+  }
   .bg-accent {
     background-color: var(--accent);
   }
@@ -4600,14 +4606,14 @@
       opacity: 100%;
     }
   }
-  .group-data-\[separator\=active\]\:bg-primary {
+  .group-data-\[separator\=active\]\:bg-primary\! {
     &:is(:where(.group)[data-separator="active"] *) {
-      background-color: var(--primary);
+      background-color: var(--primary) !important;
     }
   }
-  .group-data-\[separator\=hover\]\:bg-primary {
+  .group-data-\[separator\=hover\]\:bg-primary\! {
     &:is(:where(.group)[data-separator="hover"] *) {
-      background-color: var(--primary);
+      background-color: var(--primary) !important;
     }
   }
   .group-data-\[state\=open\]\/section\:rotate-90 {
@@ -5786,14 +5792,14 @@
       color: var(--foreground);
     }
   }
-  .data-\[separator\=active\]\:bg-primary {
+  .data-\[separator\=active\]\:bg-primary\! {
     &[data-separator="active"] {
-      background-color: var(--primary);
+      background-color: var(--primary) !important;
     }
   }
-  .data-\[separator\=hover\]\:bg-primary {
+  .data-\[separator\=hover\]\:bg-primary\! {
     &[data-separator="hover"] {
-      background-color: var(--primary);
+      background-color: var(--primary) !important;
     }
   }
   .data-\[side\=bottom\]\:translate-y-1 {
@@ -5867,6 +5873,12 @@
       color: var(--foreground);
     }
   }
+  .data-\[state\=active\]\:shadow-\(--tabs-active-shadow\) {
+    &[data-state="active"] {
+      --tw-shadow: var(--tabs-active-shadow);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .data-\[state\=active\]\:shadow-none {
     &[data-state="active"] {
       --tw-shadow: 0 0 #0000;
@@ -7149,6 +7161,56 @@
       rotate: 180deg;
     }
   }
+  .\[\.dark-hc_\&\]\:border-border-subtle {
+    .dark-hc & {
+      border-color: var(--border-subtle);
+    }
+  }
+  .\[\.dark-hc_\&\]\:text-foreground-inverse {
+    .dark-hc & {
+      color: var(--foreground-inverse);
+    }
+  }
+  .\[\.dark\:not\(\.react-flow\)_\&\]\:border-border-subtle {
+    .dark:not(.react-flow) & {
+      border-color: var(--border-subtle);
+    }
+  }
+  .\[\.dark\:not\(\.react-flow\)_\&\]\:bg-foreground-subtle {
+    .dark:not(.react-flow) & {
+      background-color: var(--foreground-subtle);
+    }
+  }
+  .\[\.dark\:not\(\.react-flow\)_\&\]\:text-foreground-inverse {
+    .dark:not(.react-flow) & {
+      color: var(--foreground-inverse);
+    }
+  }
+  .\[\.light-hc_\&\]\:border-border-subtle {
+    .light-hc & {
+      border-color: var(--border-subtle);
+    }
+  }
+  .\[\.light-hc_\&\]\:text-foreground-inverse {
+    .light-hc & {
+      color: var(--foreground-inverse);
+    }
+  }
+  .\[\.light\:not\(\.react-flow\)_\&\]\:border-border-subtle {
+    .light:not(.react-flow) & {
+      border-color: var(--border-subtle);
+    }
+  }
+  .\[\.light\:not\(\.react-flow\)_\&\]\:bg-border-subtle {
+    .light:not(.react-flow) & {
+      background-color: var(--border-subtle);
+    }
+  }
+  .\[\.light\:not\(\.react-flow\)_\&\]\:text-foreground-emp {
+    .light:not(.react-flow) & {
+      color: var(--foreground-emp);
+    }
+  }
   .\[\[data-slot\=card-content\]_\&\]\:bg-transparent {
     [data-slot=card-content] & {
       background-color: transparent;
@@ -9976,6 +10038,7 @@ html[dir='rtl'], [data-sonner-toaster][dir='rtl'] {
 }
 :root {
   --radius: 0.75rem;
+  --tabs-active-shadow: 0 0 #0000;
 }
 body.light, .light:not(.react-flow), body.light-hc, .light-hc, body.dark, .dark:not(.react-flow), body.dark-hc, .dark-hc, body.future-dark, .future-dark, body.future-light, .future-light {
   --surface: var(--color-background);
@@ -10056,16 +10119,21 @@ body.light, .light:not(.react-flow), body.light-hc, .light-hc, body.dark, .dark:
   --destructive-foreground: var(--foreground-on-accent);
   --border-de-emp: var(--border-subtle);
   --input: var(--border-subtle);
+  --tabs-active-shadow: 0 0 0 1px var(--input);
 }
 body.light, .light:not(.react-flow), body.light-hc, .light-hc {
   --surface-muted: var(--color-background-gray);
   --warning: var(--color-warning-text);
+  --muted: var(--surface-overlay);
   color-scheme: light;
 }
 body.dark, .dark:not(.react-flow), body.dark-hc, .dark-hc {
   --surface-hover: var(--color-background-gray);
   color-scheme: dark;
 }
+body.light, .light:not(.react-flow), body.light-hc, .light-hc, body.dark, .dark:not(.react-flow), body.dark-hc, .dark-hc {
+  --resizable-handle-divider-bg: var(--border-subtle);
+}
 body.future-dark, .future-dark, body.future-light, .future-light {
   --brand-darker: var(--color-primary-darker);
   --ring: var(--color-focus-indicator);
@@ -10076,6 +10144,7 @@ body.future-dark, .future-dark, body.future-light, .future-light {
   --destructive: var(--color-red-500);
   --destructive-foreground: var(--color-zinc-50);
   --input: var(--ap-wind-border);
+  --tabs-active-shadow: 0 0 #0000;
   --font-sans: Inter, noto-sans, "Noto Sans JP", "Noto Sans KR", "Noto Sans SC",
     "Noto Sans TC", system-ui, sans-serif;
   --font-normal: var(--font-sans);

package/dist/tailwind.css

@@ -19,6 +19,11 @@
 :root {
   --radius: 0.75rem;
   /* 12px — base border-radius for buttons and UI elements */
+
+  /* Active pill-tab edge. Themes override this below; the default is a no-op
+     shadow so the box-shadow stack (focus ring included) stays valid when no
+     theme class is present. */
+  --tabs-active-shadow: 0 0 #0000;
 }
 
 /* Variant active when the component is inside a Future Dark or Light theme */
@@ -154,6 +159,11 @@ body.future-light, .future-light {
   --destructive-foreground: var(--foreground-on-accent);
   --border-de-emp: var(--border-subtle);
   --input: var(--border-subtle);
+
+  /* Classic themes mark the active pill tab with a 1px hairline in the same
+     color as input and panel borders, drawn in the shadow slot so consumer
+     shadow overrides keep working. The Future family clears it below. */
+  --tabs-active-shadow: 0 0 0 1px var(--input);
 }
 
 /* ── Classic light family — mapping divergences + element-scoped color-scheme ── */
@@ -161,6 +171,10 @@ body.light, .light:not(.react-flow),
 body.light-hc, .light-hc {
   --surface-muted: var(--color-background-gray);
   --warning: var(--color-warning-text);
+  /* Classic light's raised surface is the same white as the page, so the
+     shared --muted mapping renders with no contrast (e.g. Tabs track).
+     Use the overlay surface instead, matching the Future family mapping. */
+  --muted: var(--surface-overlay);
   color-scheme: light;
 }
 
@@ -171,6 +185,20 @@ body.dark-hc, .dark-hc {
   color-scheme: dark;
 }
 
+/* ResizableHandle's divider needs a resting background that matches its own
+   border-subtle-toned box in classic themes (see resizable.tsx). Exposed as a
+   variable, with an unset default falling back to --ap-wind-border, so a
+   consumer's own bg-* override (e.g. bg-transparent) still wins: cn()/
+   tailwind-merge can't dedupe a plain bg-* class against one scoped to an
+   arbitrary theme variant, so the variant class must stay a single, unvaried
+   bg-[var(...)] utility for consumer overrides to keep working. */
+body.light, .light:not(.react-flow),
+body.light-hc, .light-hc,
+body.dark, .dark:not(.react-flow),
+body.dark-hc, .dark-hc {
+  --resizable-handle-divider-bg: var(--border-subtle);
+}
+
 /* ── Future family — mapping divergences (color-scheme comes from core) ──── */
 body.future-dark, .future-dark,
 body.future-light, .future-light {
@@ -185,6 +213,8 @@ body.future-light, .future-light {
   --destructive: var(--color-red-500);
   --destructive-foreground: var(--color-zinc-50);
   --input: var(--ap-wind-border);
+  /* Future is flat: the active pill is distinguished by surface alone, no edge or shadow */
+  --tabs-active-shadow: 0 0 #0000;
 
   /* Typography: Inter, shipped by apollo-core. Neither Inter nor noto-sans
      covers CJK, so the four bundled Noto CJK families are chained explicitly

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-wind",
-  "version": "2.52.0",
+  "version": "2.52.2",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",