@w5-ui/svelte 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@w5-ui/svelte",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "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",

package/src/lib/actions/portal.ts

@@ -0,0 +1,55 @@
+import type { Action } from 'svelte/action'
+
+/**
+ * Move a DOM node into `target` (default: `document.body`) for the
+ * lifetime of the action. Used by floating UI primitives so
+ * `position: fixed` + `z-index` always escape:
+ *
+ *   - ancestor `overflow: hidden` / `overflow: clip` (would clip
+ *     a non-portalled child even at `position: fixed` if the
+ *     ancestor establishes a containing block)
+ *   - ancestor `transform`, `filter`, `perspective`, `contain: paint`,
+ *     `will-change: transform` (any of which create a containing
+ *     block for `position: fixed` descendants, defeating viewport
+ *     positioning)
+ *   - ancestor stacking contexts with a lower `z-index` than the
+ *     popover's `z-index`, which would otherwise trap it underneath
+ *     sibling chrome
+ *
+ * The node still belongs to the Svelte component that owns it: props,
+ * reactivity, lifecycle, and event handlers continue to work; only
+ * the DOM position changes. The action removes the node on destroy
+ * so cleanup is automatic.
+ *
+ * SSR-safe: actions don't run during server rendering.
+ */
+export const portal: Action<HTMLElement, HTMLElement | string | undefined> = (
+  node,
+  target = 'body',
+) => {
+  const resolveTarget = (value: HTMLElement | string | undefined): HTMLElement | null => {
+    if (value === undefined) return document.body
+    if (typeof value === 'string') {
+      return document.querySelector<HTMLElement>(value)
+    }
+    return value
+  }
+
+  const move = (value: HTMLElement | string | undefined) => {
+    const parent = resolveTarget(value)
+    if (parent !== null && parent !== node.parentNode) {
+      parent.appendChild(node)
+    }
+  }
+
+  move(target)
+
+  return {
+    update(next: HTMLElement | string | undefined) {
+      move(next)
+    },
+    destroy() {
+      node.remove()
+    },
+  }
+}

package/src/lib/components/Popover.svelte

@@ -5,6 +5,7 @@
 <script lang="ts">
   import { onMount, onDestroy, tick } from 'svelte';
   import Button from './Button.svelte';
+  import { portal } from '../actions/portal.ts';
 
   interface Props {
     label: string;
@@ -111,7 +112,14 @@
   }
 
   function onPointer(e: PointerEvent) {
-    if (open && !rootEl?.contains(e.target as Node)) open = false;
+    if (!open) return;
+    const target = e.target as Node;
+    // The panel is portalled to <body> so it's no longer a descendant
+    // of rootEl. Check both so clicks INSIDE the panel don't count as
+    // outside-clicks and immediately close the popover.
+    if (rootEl?.contains(target)) return;
+    if (panelEl?.contains(target)) return;
+    open = false;
   }
 
   function onResize() {
@@ -141,7 +149,7 @@
   });
 </script>
 
-<div class="relative inline-block" bind:this={rootEl}>
+<div class="relative inline-flex items-center" bind:this={rootEl}>
   {#if trigger}
     {@render trigger({ toggle, open })}
   {:else}
@@ -158,6 +166,7 @@
     -->
     <div
       bind:this={panelEl}
+      use:portal
       role="dialog"
       aria-labelledby={title ? titleId : undefined}
       class="fixed z-[9100] min-w-[200px] max-w-[320px] rounded-[10px] border border-border-3 bg-bg-2 shadow-[0_8px_32px_rgba(0,0,0,0.5)] focus:outline-none"

package/src/lib/components/Topbar.svelte

@@ -1,11 +1,27 @@
 <script module lang="ts">
+  import type { AppLogoKey } from '@w5-ui/assets';
+
+  /** Logo identifier. Either a built-in `AppLogoKey` (resolved via
+   *  `@w5-ui/assets`'s `appLogos` map) or a raw URL string — use the
+   *  latter when the consuming app wants to brand an entry with its
+   *  own image without having to upstream a new asset into the
+   *  design system. */
+  export type AppLogo = AppLogoKey | (string & {})
   export interface AppDef { id: string; label: string; logo: AppLogo }
   export type TopbarStatus = 'ok' | 'warn' | 'danger' | 'neutral';
 </script>
 
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { appLogos, type AppLogoKey as AppLogo } from '@w5-ui/assets';
+  import { appLogos, type AppLogoKey } from '@w5-ui/assets';
+
+  /** Resolve an `AppLogo` to an `<img src>` URL. Known keys go
+   *  through the bundled `appLogos` map; anything else is treated as
+   *  a URL the consumer supplied directly. */
+  function resolveLogo(logo: string): string {
+    if (logo in appLogos) return appLogos[logo as AppLogoKey]
+    return logo
+  }
   import IconButton from './IconButton.svelte';
   import Avatar from './Avatar.svelte';
   import CaretIcon from '../icons/CaretIcon.svelte';
@@ -28,6 +44,12 @@
     notificationCount?: number;
     /** Health colour of the site-name status ring. Defaults to 'ok' (green). */
     status?: TopbarStatus;
+    /** Optional URL of a square logo (or w5-ui `AppLogoKey`) to render in
+     *  place of the status dot, next to `siteName`. The status colour
+     *  becomes a thin ring AROUND the logo so the health signal is
+     *  preserved without claiming a dedicated dot. Falls back to the
+     *  classic status-dot layout when undefined. */
+    siteLogo?: AppLogo;
     /** When false, the site label renders as a static element instead of a
      * site-switcher dropdown trigger. Use for single-site dashboards. */
     siteSwitchable?: boolean;
@@ -45,6 +67,7 @@
     initials = 'MS',
     notificationCount = 1,
     status = 'ok',
+    siteLogo,
     siteSwitchable = true,
     actions,
     onappchange,
@@ -67,11 +90,23 @@
     danger: 'bg-status-danger',
     neutral: 'bg-status-neutral',
   };
+  /** Solid-colour ring drawn AROUND the site logo (when `siteLogo` is
+   *  set) so the health signal stays visible without the dot+halo
+   *  treatment. Pre-composed for the Tailwind static scanner. */
+  const LOGO_RING: Record<TopbarStatus, string> = {
+    ok: 'ring-status-success',
+    warn: 'ring-status-warning',
+    danger: 'ring-status-danger',
+    neutral: 'ring-status-neutral',
+  };
 
   let ringWrapClass = $derived(
     `inline-flex h-[18px] w-[18px] items-center justify-center rounded-full ${RING_BG[status]}`,
   );
   let ringDotClass = $derived(`h-2 w-2 rounded-full ${RING_DOT[status]}`);
+  let logoRingClass = $derived(
+    `inline-flex h-6 w-6 items-center justify-center overflow-hidden rounded-full ring-2 ring-inset ${LOGO_RING[status]}`,
+  );
 </script>
 
 <!--
@@ -90,14 +125,31 @@
       class="flex cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-row-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
       aria-label="Switch site: {siteName}"
       aria-haspopup="menu"
+      title={`${siteName} — status: ${status}`}
     >
-      <span class={ringWrapClass}><span class={ringDotClass}></span></span>
+      {#if siteLogo !== undefined}
+        <span class={logoRingClass} aria-hidden="true">
+          <img src={resolveLogo(siteLogo)} alt="" width="24" height="24" class="h-full w-full object-cover" />
+        </span>
+      {:else}
+        <span class={ringWrapClass}><span class={ringDotClass}></span></span>
+      {/if}
       <span class="text-13 font-medium text-text-1" aria-hidden="true">{siteName}</span>
       <CaretIcon class="h-3.5 w-3.5 text-text-3" />
     </button>
   {:else}
-    <div class="flex items-center gap-2 px-2.5 py-1.5" role="presentation">
-      <span class={ringWrapClass}><span class={ringDotClass}></span></span>
+    <div
+      class="flex items-center gap-2 px-2.5 py-1.5"
+      role="presentation"
+      title={`${siteName} — status: ${status}`}
+    >
+      {#if siteLogo !== undefined}
+        <span class={logoRingClass} aria-hidden="true">
+          <img src={resolveLogo(siteLogo)} alt="" width="24" height="24" class="h-full w-full object-cover" />
+        </span>
+      {:else}
+        <span class={ringWrapClass}><span class={ringDotClass}></span></span>
+      {/if}
       <span class="text-13 font-medium text-text-1">{siteName}</span>
     </div>
   {/if}
@@ -114,7 +166,7 @@
         onclick={() => { activeApp = a.id; onappchange?.(a.id); }}
       >
         <img
-          src={appLogos[a.logo]}
+          src={resolveLogo(a.logo)}
           alt=""
           width="24"
           height="24"

package/src/lib/index.ts

@@ -308,3 +308,5 @@ export { default as H3 } from './components/H3.svelte'
 export { default as H4 } from './components/H4.svelte'
 
 export * from './icons.js'
+
+export { portal } from './actions/portal.ts'