@shival99/z-ui-svelte 0.1.1 → 0.1.3

package/dist/components/z-chat-navigator/ZChatNavigator.svelte

@@ -239,7 +239,7 @@
 
     <div
       class={zMergeClasses(
-        'z-chat-navigator-viewport focus-visible:outline-ring pointer-events-auto absolute inset-y-0 left-0 w-12 touch-none overflow-hidden outline-none focus-visible:rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2',
+        'z-chat-navigator-viewport focus-visible:outline-ring pointer-events-auto absolute inset-y-0 left-0 w-full max-w-12 touch-none overflow-hidden outline-none focus-visible:rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2',
         maxOffset > 0 && 'z-chat-navigator-viewport--overflowing'
       )}
       role="slider"

package/dist/components/z-command/ZCommand.svelte

@@ -106,6 +106,8 @@
   let indicator = $state<{ top: number; left: number; width: number; height: number } | null>(null);
   let activeIndex = $state(0);
   let listEl = $state<HTMLElement | null>(null);
+  // Bumped when a sub-page finishes sliding in: its rows moved while it slid, so the highlight is measured again.
+  let settled = $state(0);
 
   // Items with `children` open a sub-page; `path` is the way down to it.
   let path = $state<ZCommandItem<T>[]>([]);
@@ -145,10 +147,14 @@
     void flat;
     void contentHeight;
     void path.length;
+    void settled;
     const index = current;
     const row = index >= 0 ? listEl?.querySelector<HTMLElement>(`#${CSS.escape(optionId(index))}`) : null;
-    indicator = row
-      ? { top: row.offsetTop, left: row.offsetLeft, width: row.offsetWidth, height: row.offsetHeight }
+    // Measured against the list itself, not offsetParent: a page that is sliding in carries a transform and
+    // would otherwise become the reference, leaving the highlight offset once it stops.
+    const box = row && content ? { row: row.getBoundingClientRect(), list: content.getBoundingClientRect() } : null;
+    indicator = box
+      ? { top: box.row.top - box.list.top, left: box.row.left - box.list.left, width: box.row.width, height: box.row.height }
       : null;
   });
 
@@ -349,7 +355,7 @@
               ></div>
             {/if}
             {#key path.length}
-              <div class="space-y-1" in:fly={{ x: direction * 16, duration: ms(Z_COMMAND_PAGE_MS), opacity: 0 }}>
+              <div class="space-y-1" in:fly={{ x: direction * 16, duration: ms(Z_COMMAND_PAGE_MS), opacity: 0 }} onintroend={() => settled++}>
                 {#if flat.length === 0}
                   <div class="text-muted-foreground py-6 text-center text-sm" role="presentation">
                     {#if empty}

package/dist/components/z-tooltip/z-tooltip.variants.js

@@ -1,9 +1,9 @@
 import { cva } from 'class-variance-authority';
 /** Same palette as core-ui's z-tooltip; enter/exit motion lives in the Svelte transition instead of classes. */
-export const zTooltipVariants = cva('z-tooltip relative rounded-sm shadow-md', {
+export const zTooltipVariants = cva('z-tooltip relative rounded-md shadow-lg', {
     variants: {
         zType: {
-            default: 'bg-foreground text-background border border-foreground!',
+            default: 'bg-popover text-popover-foreground border border-border!',
             dark: 'bg-slate-900 text-white border border-slate-700!',
             light: 'bg-white text-slate-900 border border-slate-200!',
             primary: 'bg-primary text-primary-foreground border border-primary!',
@@ -26,7 +26,7 @@ export const zTooltipVariants = cva('z-tooltip relative rounded-sm shadow-md', {
 export const zTooltipContentVariants = cva('relative z-10 rounded-xs font-medium p-1.5 break-words leading-[1.7]', {
     variants: {
         zType: {
-            default: 'bg-foreground',
+            default: 'bg-popover',
             dark: 'bg-slate-900',
             light: 'bg-white',
             primary: 'bg-primary',
@@ -57,7 +57,7 @@ export const zTooltipArrowVariants = cva('absolute z-0 size-2.5 rotate-45 rounde
             'right-bottom': 'bottom-2 -left-1 border-b border-l',
         },
         zType: {
-            default: 'bg-foreground border-foreground!',
+            default: 'bg-popover border-border!',
             dark: 'bg-slate-900 border-slate-700!',
             light: 'bg-white border-slate-200!',
             primary: 'bg-primary border-primary!',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shival99/z-ui-svelte",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Z-UI component library for Svelte 5 (runes, no CDK).",
   "license": "MIT",
   "type": "module",