@vireo-ai/trellis-ui 0.1.56 → 0.1.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vireo-ai/trellis-ui",
-  "version": "0.1.56",
+  "version": "0.1.58",
   "type": "module",
   "description": "Django-native UI toolkit for building realtime and interactive web apps.",
   "license": "MIT",
@@ -21,6 +21,7 @@
     "packages/client/src/styles/**/*.css",
     "packages/client/src/components/**/*.css",
     "packages/client/src/directives/**/*.css",
+    "packages/client/src/runtime/**/*.css",
     "packages/server/trellis_ui/static/trellis_ui/assets/css/trellis.css",
     "packages/server/trellis_ui/static/trellis_ui/assets/css/trellis.min.css",
     "packages/server/trellis_ui/static/trellis_ui/assets/js/trellis.js",

package/packages/client/src/components/data-grid/styles.css

@@ -30,22 +30,6 @@
     translate: -6px 0;
   }
 
-  [data-ui-data-grid-resize-handle]::after {
-    position: absolute;
-    inset-block: 0;
-    right: 0;
-    width: 1px;
-    background: var(--ui-data-grid-feedback-color, var(--ui-interaction-selected-edge-strong));
-    content: "";
-    opacity: 0;
-  }
-
-  [data-ui-data-grid-resize-handle]:hover::after,
-  [data-ui-data-grid-resize-handle]:focus-visible::after,
-  [data-ui-data-grid-resize-handle][data-resizing]::after {
-    opacity: 1;
-  }
-
   [data-ui-data-grid-cell][data-align="start"] {
     justify-content: flex-start;
     text-align: left;

package/packages/client/src/components/panels/styles.css

@@ -101,35 +101,27 @@
   }
 
   [data-ui-panels]:is([data-orientation="horizontal"]:not([data-layout-orientation]), [data-layout-orientation="horizontal"]) > [data-ui-panel][data-divider]:not(:last-child) {
-    border-inline-end: var(--border-width-edge-divider) solid var(--color-separator);
+    border-inline-end-width: var(--border-width-edge-divider);
   }
 
   [data-ui-panels]:is([data-orientation="vertical"]:not([data-layout-orientation]), [data-layout-orientation="vertical"]) > [data-ui-panel][data-divider]:not(:last-child) {
-    border-block-end: var(--border-width-edge-divider) solid var(--color-separator);
+    border-block-end-width: var(--border-width-edge-divider);
   }
 
   [data-ui-panel-resize-handle][data-orientation="horizontal"][data-resize-edge="start"] {
     inset-inline-start: 0;
-    transform: translateX(-50%);
-    border-inline-start-width: var(--border-width-edge-divider);
   }
 
   [data-ui-panel-resize-handle][data-orientation="horizontal"][data-resize-edge="end"] {
     inset-inline-end: 0;
-    transform: translateX(50%);
-    border-inline-end-width: var(--border-width-edge-divider);
   }
 
   [data-ui-panel-resize-handle][data-orientation="vertical"][data-resize-edge="start"] {
     inset-block-start: 0;
-    transform: translateY(-50%);
-    border-block-start-width: var(--border-width-edge-divider);
   }
 
   [data-ui-panel-resize-handle][data-orientation="vertical"][data-resize-edge="end"] {
     inset-block-end: 0;
-    transform: translateY(50%);
-    border-block-end-width: var(--border-width-edge-divider);
   }
 
   @media (pointer: coarse) {

package/packages/client/src/runtime/drag-and-drop/resize-handle.css

@@ -0,0 +1,50 @@
+@layer components {
+  [data-ui-resize-handle]::after {
+    position: absolute;
+    background-color: var(--color-intent-neutral-edge-hover);
+    content: "";
+    pointer-events: none;
+    opacity: 0;
+  }
+
+  [data-ui-resize-handle][aria-orientation="vertical"]::after {
+    inset-block: 0;
+    inset-inline-end: 0;
+    inline-size: var(--border-width-edge-divider);
+  }
+
+  [data-ui-resize-handle][aria-orientation="vertical"][data-resize-edge="start"]::after {
+    inset-inline-start: 0;
+    inset-inline-end: auto;
+  }
+
+  [data-ui-resize-handle][aria-orientation="horizontal"]::after {
+    inset-inline: 0;
+    inset-block-end: 0;
+    block-size: var(--border-width-edge-divider);
+  }
+
+  [data-ui-resize-handle][aria-orientation="horizontal"][data-resize-edge="start"]::after {
+    inset-block-start: 0;
+    inset-block-end: auto;
+  }
+
+  [data-ui-resize-handle]:hover::after {
+    background-color: var(--color-intent-neutral-edge-strong);
+    opacity: 1;
+  }
+
+  [data-ui-resize-handle]:focus-visible::after,
+  [data-ui-resize-handle][data-resizing]::after {
+    background-color: var(--color-intent-neutral-edge-strong);
+    opacity: 1;
+  }
+
+  [data-ui-resize-handle]:focus-visible {
+    box-shadow: inset 0 0 0 var(--color-intent-neutral-focus-width) var(--color-intent-neutral-focus);
+  }
+
+  [data-ui-resize-handle]:is([data-disabled], [data-resize-disabled], [aria-disabled="true"])::after {
+    opacity: 0;
+  }
+}

package/packages/client/src/styles/components.css

@@ -6,7 +6,7 @@
   ::part(...), :has(...), native quirks, or child-order selectors.
 */
 
-@import "./layout-participation.css";
+@import "../runtime/drag-and-drop/resize-handle.css";
 @import "../components/brand/styles.css";
 @import "../components/app/styles.css";
 @import "../components/scroll-area/styles.css";

package/packages/client/src/styles/generated/theme-fonts.css

@@ -1,5 +1,5 @@
 /* Generated by packages/theme-engine/scripts/generate-default-css.mjs. */
-/* Theme fc84066faf886ebd; CSS 9bd56c40eb5861dd. */
+/* Theme 46d048b6ba6226ca; CSS 9bd56c40eb5861dd. */
 @import url("https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap");
 
 @import url("https://fonts.bunny.net/css?family=fira-code:400,500,600,700&display=swap");