@w5-ui/svelte 0.7.0 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@w5-ui/svelte",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "Svelte 5 components for the Dash UI design system - mirrors the @w5-ui/react API 1:1. Part of Webber's design systems.",
   "keywords": [
     "svelte",
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@w5-ui/assets": "^0.2.1",
-    "@w5-ui/tokens": "^0.7.0"
+    "@w5-ui/tokens": "^0.8.0"
   },
   "devDependencies": {
     "svelte": "^5.56.4",

package/src/lib/components/Badge.svelte

@@ -33,7 +33,7 @@
     // Status-warning is yellow in both motifs; near-black text stays
     // legible against it. `text-neutral-10` resolves to `#0a0a0b`.
     warn: 'bg-status-warning text-neutral-10',
-    info: 'bg-brand-05 text-white',
+    info: 'bg-primary-fill text-primary-fill-fg',
     success: 'bg-status-success text-white',
     neutral: 'bg-status-neutral text-white',
   };

package/src/lib/components/Button.svelte

@@ -47,7 +47,7 @@
   //   ghost:   transparent surface with motif-aware text/border + hover.
   //   danger:  semantic status-danger text + faded border.
   const VARIANT: Record<NonNullable<Props['variant']>, string> = {
-    primary: 'bg-brand-05 text-white hover:bg-brand-06 border-transparent',
+    primary: 'bg-primary-fill text-primary-fill-fg hover:bg-primary-fill-hover active:bg-primary-fill-press border-transparent',
     ghost:
       'bg-transparent text-text-2 border-border-2 hover:bg-row-hover hover:text-text-1',
     danger: 'bg-transparent text-status-danger border-status-danger/30',

package/src/lib/components/ContextMenu.svelte

@@ -26,6 +26,7 @@
 <script lang="ts">
   import { onDestroy, tick } from 'svelte';
   import Pill from './Pill.svelte';
+  import { computeMenuPosition } from './menu-position';
 
   const PILL_SLOT = '{pill}';
 
@@ -71,10 +72,29 @@
     }, []),
   );
 
-  const menuW = 168;
-  let menuH = $derived(items.length * 30 + 8);
-  let cx = $derived(Math.min(x, (typeof window !== 'undefined' ? window.innerWidth : 1200) - menuW - 8));
-  let cy = $derived(Math.min(y, (typeof window !== 'undefined' ? window.innerHeight : 800) - menuH - 8));
+  /** Space kept between the menu and every viewport edge. */
+  const MENU_MARGIN = 8;
+  // Placed from the menu's MEASURED size once it is in the DOM, by the
+  // effect below. Effects run before the browser paints, so the menu is
+  // never seen at this starting point.
+  let cx = $state(0);
+  let cy = $state(0);
+  $effect(() => {
+    void items;
+    if (!open || menuEl === undefined) return;
+    const { width, height } = menuEl.getBoundingClientRect();
+    const placed = computeMenuPosition({
+      x,
+      y,
+      menuWidth: width,
+      menuHeight: height,
+      viewportWidth: window.innerWidth,
+      viewportHeight: window.innerHeight,
+      margin: MENU_MARGIN,
+    });
+    cx = placed.left;
+    cy = placed.top;
+  });
 
   function activate(id: string) {
     onaction?.(id);

package/src/lib/components/DatePicker.svelte

@@ -135,7 +135,7 @@
     if (outside) cls += ' text-text-4';
     else cls += ' text-text-2';
     if (isToday && !isSelected) cls += ' ring-1 ring-inset ring-brand-05';
-    if (isSelected) cls += ' bg-brand-05 text-white hover:bg-brand-06';
+    if (isSelected) cls += ' bg-primary-fill text-primary-fill-fg hover:bg-primary-fill-hover';
     return cls;
   }
 </script>

package/src/lib/components/DateRangePicker.svelte

@@ -137,7 +137,7 @@
     if (outside) cls += ' text-text-4';
     else cls += ' text-text-2';
     if (isTodayDay && !start && !end) cls += ' ring-1 ring-inset ring-brand-05';
-    if (start || end) cls += ' bg-brand-05 text-white hover:bg-brand-06';
+    if (start || end) cls += ' bg-primary-fill text-primary-fill-fg hover:bg-primary-fill-hover';
     else if (inRange) cls += ' bg-brand-05/20 text-text-1';
     return cls;
   }

package/src/lib/components/NotificationPanel.svelte

@@ -114,7 +114,7 @@
       <h2 id={titleId} class="m-0 flex items-center gap-2 text-15 font-semibold text-text-1">
         Notifications
         {#if unread > 0}
-          <span class="inline-flex h-5 min-w-[20px] items-center justify-center rounded-full bg-brand-05 px-1.5 text-11 font-bold text-white tabular-nums" aria-label={`${unread} unread`}>{unread}</span>
+          <span class="inline-flex h-5 min-w-[20px] items-center justify-center rounded-full bg-primary-fill px-1.5 text-11 font-bold text-primary-fill-fg tabular-nums" aria-label={`${unread} unread`}>{unread}</span>
         {/if}
       </h2>
       <div class="flex items-center gap-1.5">

package/src/lib/components/Pagination.svelte

@@ -29,7 +29,7 @@
 
   const BTN_BASE =
     'inline-flex h-[30px] min-w-[30px] cursor-pointer items-center justify-center rounded-md border border-transparent bg-transparent px-1.5 text-13 font-medium leading-none text-text-3 transition-[background-color,color,border-color] duration-100 hover:bg-row-hover hover:text-text-1 hover:border-border-2 disabled:cursor-not-allowed disabled:opacity-35 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05';
-  const BTN_ACTIVE = 'bg-brand-05 text-white border-brand-05 hover:bg-brand-06 hover:border-brand-06';
+  const BTN_ACTIVE = 'bg-primary-fill text-primary-fill-fg border-primary-fill hover:bg-primary-fill-hover hover:border-primary-fill-hover';
 </script>
 
 {#if totalPages > 1}

package/src/lib/components/Sidebar.svelte

@@ -60,7 +60,7 @@
             {/if}
             {#if it.pill !== undefined}
               <span
-                class="ml-auto rounded-full bg-brand-05 px-1.5 py-px text-[10px] font-semibold text-white"
+                class="ml-auto rounded-full bg-primary-fill px-1.5 py-px text-[10px] font-semibold text-primary-fill-fg"
               >{it.pill}<span class="sr-only"> alert{it.pill !== 1 ? 's' : ''}</span></span>
             {/if}
           </button>

package/src/lib/components/SkipLink.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <a
-  class="absolute left-0 top-0 z-[100] -translate-y-full rounded-br-md bg-brand-05 px-3 py-2 text-13 font-semibold text-white no-underline focus:translate-y-0 focus:outline-2 focus:-outline-offset-4 focus:outline-white
+  class="absolute left-0 top-0 z-[100] -translate-y-full rounded-br-md bg-primary-fill px-3 py-2 text-13 font-semibold text-primary-fill-fg no-underline focus:translate-y-0 focus:outline-2 focus:-outline-offset-4 focus:outline-white
     {className}"
   {href}
 >

package/src/lib/components/SplitButton.svelte

@@ -77,7 +77,7 @@
 
   // Pre-composed variant chrome so Tailwind's static scanner sees the literals.
   const VARIANT: Record<NonNullable<Props['variant']>, string> = {
-    primary: 'bg-brand-05 text-white hover:bg-brand-06 border-brand-05',
+    primary: 'bg-primary-fill text-primary-fill-fg hover:bg-primary-fill-hover active:bg-primary-fill-press border-primary-fill',
     ghost: 'bg-transparent text-text-2 border-border-2 hover:bg-row-hover hover:text-text-1',
     danger: 'bg-transparent text-status-danger border-status-danger/30',
   };

package/src/lib/components/Stepper.svelte

@@ -20,7 +20,7 @@
   //   - label: colour + weight
   //   - connector line (::before via Tailwind arbitrary): bg colour
   const NUM: Record<'active' | 'done' | 'upcoming', string> = {
-    active: 'border-brand-05 bg-brand-05 text-white',
+    active: 'border-primary-fill bg-primary-fill text-primary-fill-fg',
     done: 'border-brand-05 bg-brand-05/[0.18] text-status-info',
     upcoming: 'border-bg-3 bg-bg-1 text-text-4',
   };

package/src/lib/components/menu-position.ts

@@ -0,0 +1,38 @@
+/**
+ * Where a context menu opens: at the pointer, the way OS menus do.
+ *
+ * Takes the menu's MEASURED size, never a guess: menus hold labels of
+ * any length, and a guessed width let a long one run off the edge.
+ *   - It opens at the pointer when it fits.
+ *   - It flips to the pointer's left (or above it) when it would cross
+ *     the right edge (or the bottom).
+ *   - When neither side has room, it is clamped inside the margins, and
+ *     a menu bigger than the viewport is pinned to the margin.
+ *
+ * Pure. The React twin is `packages/react/src/components/menu-position.ts`.
+ */
+export interface MenuPositionInput {
+  /** The pointer, in viewport coordinates. */
+  x: number
+  y: number
+  menuWidth: number
+  menuHeight: number
+  viewportWidth: number
+  viewportHeight: number
+  /** Space kept between the menu and every viewport edge. */
+  margin: number
+}
+
+function along(pointer: number, size: number, viewport: number, margin: number): number {
+  const far = viewport - margin
+  if (pointer + size <= far) return Math.max(margin, pointer)
+  if (pointer - size >= margin) return pointer - size
+  return Math.max(margin, Math.min(pointer, far - size))
+}
+
+export function computeMenuPosition(input: MenuPositionInput): { left: number; top: number } {
+  return {
+    left: along(input.x, input.menuWidth, input.viewportWidth, input.margin),
+    top: along(input.y, input.menuHeight, input.viewportHeight, input.margin),
+  }
+}