@sewadah/selaras 0.4.0 → 0.5.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "selaras",
   "configKey": "selaras",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/runtime/components/DashboardResizeHandle.vue

@@ -12,8 +12,9 @@ const isMobile = computed(() => dashboard?.isMobile.value ?? false);
 const theme = useComponentTheme("dashboardResizeHandle", dashboardResizeHandleTheme);
 const ui = computed(() => theme.value());
 const rootUi = computed(() => resolveSlot(ui.value.root, props.ui?.root));
+const lineUi = computed(() => resolveSlot(ui.value.line, props.ui?.line));
 </script>
 
 <template>
-  <SplitterResizeHandle v-if="!isMobile" direction="horizontal" :ui="{ root: rootUi, line: props.ui?.line }" />
+  <SplitterResizeHandle v-if="!isMobile" direction="horizontal" :ui="{ root: rootUi, line: lineUi }" />
 </template>

package/dist/runtime/theme/dashboard-resize-handle.d.ts

@@ -2,25 +2,31 @@ export declare const dashboardResizeHandleTheme: import("tailwind-variants").TVR
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
+            line?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
+            line?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
     root: string;
+    line: string;
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
+            line?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
     root: string;
+    line: string;
 }, import("tailwind-variants").TVReturnTypeLike<unknown, {
     root: string;
+    line: string;
 }>>;
 export type DashboardResizeHandleThemeSlots = keyof (typeof dashboardResizeHandleTheme)['slots'];

package/dist/runtime/theme/dashboard-resize-handle.js

@@ -1,17 +1,9 @@
 import { tv } from "tailwind-variants";
 export const dashboardResizeHandleTheme = tv({
   slots: {
-    // SplitterResizeHandle's own hit area is deliberately wider than its
-    // visible line (a comfortable grab target, invisible padding on
-    // either side) - harmless when both adjacent panels share one
-    // background, but once DashboardSidebar's own root reads as
-    // --selaras-resolved-surface-elevated (a step apart from DashboardPanel's own plain
-    // --selaras-resolved-surface-default), that "invisible" padding stops being invisible: it reads
-    // as a sliver of the wrong background bleeding through right at the
-    // sidebar's own edge. A background split exactly down the middle -
-    // matching each side's real background - makes the hit area blend
-    // into whichever panel it happens to be sitting over instead of
-    // showing through as its own separate strip.
-    root: "bg-[linear-gradient(to_right,var(--selaras-resolved-surface-elevated)_50%,var(--selaras-resolved-surface-default)_50%)]"
+    // Overlap the panel boundary without consuming layout space or painting
+    // either surface. Both panels keep their own backgrounds beneath the target.
+    root: "z-10 -mx-1 w-2 bg-transparent",
+    line: "rtl:translate-x-1/2 group-focus-visible:bg-[var(--_selaras-color-indicator)]"
   }
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sewadah/selaras",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "A UI component library for Nuxt, built on Reka UI and Tailwind v4",
   "author": "Wicaksana Pratama <wicaksanapratama@gmail.com>",
   "license": "MIT",