@w5-ui/svelte 0.2.0 → 0.3.0

package/src/lib/components/TopbarActions.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import IconButton from './IconButton.svelte';
+  import Avatar from './Avatar.svelte';
+  import SearchIcon from '../icons/SearchIcon.svelte';
+  import UpdatesIcon from '../icons/UpdatesIcon.svelte';
+  import BellIcon from '../icons/BellIcon.svelte';
+  import HelpIcon from '../icons/HelpIcon.svelte';
+
+  interface Props {
+    /** Avatar initials shown in the trailing account chip. */
+    initials?: string;
+    /** Unread count surfaced via the bell `aria-label` and the red dot
+     * overlay. `0` hides the dot. */
+    notificationCount?: number;
+  }
+
+  let { initials = 'MS', notificationCount = 1 }: Props = $props();
+</script>
+
+<!--
+  The canonical right-side action group inside <Topbar>: Search, Updates,
+  Notifications (with red dot overlay when unread), Help, and the account
+  <Avatar>. Renders the same five controls in the same order and with the
+  same Tailwind chrome as the default block inside <Topbar> itself, so
+  passing <Topbar actions={...}>{<TopbarActions />}</> behaves identically
+  to omitting the snippet.
+
+  Use it when userland wants to slot extra controls (theme toggle, status
+  pill, environment switch) _alongside_ the canonical block rather than
+  replace it. Compose your custom controls plus <TopbarActions /> and the
+  Topbar keeps the search / bell / avatar rhythm the reference dashboard
+  ships without copying classes, icons, or the inline notif span.
+-->
+<IconButton aria-label="Search" title="Search"><SearchIcon /></IconButton>
+<IconButton aria-label="Updates" title="Updates"><UpdatesIcon /></IconButton>
+<IconButton
+  aria-label={notificationCount > 0
+    ? `Notifications, ${notificationCount} new`
+    : 'Notifications'}
+  title="Notifications"
+  class="relative"
+>
+  <BellIcon />
+  {#if notificationCount > 0}
+    <span
+      aria-hidden="true"
+      class="absolute right-1.5 top-1.5 h-1.5 w-1.5 rounded-full border-[1.5px] border-bg-page bg-status-danger"
+    ></span>
+  {/if}
+</IconButton>
+<IconButton aria-label="Help" title="Help"><HelpIcon /></IconButton>
+<Avatar initials={initials} size="sm" alt="Account, {initials}" class="ml-1" />

package/src/lib/components/TransferList.svelte

@@ -107,22 +107,30 @@
       moveLeft(selTgt);
     }
   }
+
+  const PANEL_CLS = 'flex min-w-0 flex-1 flex-col gap-1.5 rounded-lg border border-border-1 bg-divider p-2';
+  const HEADER_CLS = 'flex items-center justify-between px-1 text-12 font-semibold uppercase tracking-[0.05em] text-text-3';
+  const COUNT_CLS = 'rounded bg-row-active px-1.5 py-0.5 text-11 text-text-4 tabular-nums';
+  const LIST_CLS = 'm-0 flex max-h-[240px] list-none flex-col gap-0.5 overflow-y-auto p-0 focus:outline-none';
+  const ITEM_CLS = 'flex cursor-pointer flex-col items-start gap-0 rounded px-2 py-1.5 text-13 text-text-2 hover:bg-row-hover aria-selected:bg-brand-05/[0.18] aria-selected:text-text-1 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-brand-05';
+  const EMPTY_CLS = 'rounded px-2 py-3 text-center text-11 text-text-4';
+  const BTN_CLS = 'inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded border border-border-2 bg-transparent text-13 text-text-3 hover:bg-row-hover hover:text-text-1 disabled:cursor-not-allowed disabled:opacity-30 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05';
 </script>
 
-<div class="tl {className}">
-  <div class="tl__panel">
-    <div class="tl__header">
-      {sourceLabel} <span class="tl__count">{source.length}</span>
+<div class="flex items-start gap-3 {className}">
+  <div class={PANEL_CLS}>
+    <div class={HEADER_CLS}>
+      {sourceLabel} <span class={COUNT_CLS}>{source.length}</span>
     </div>
     <ul
       role="listbox"
       aria-label={sourceLabel}
       aria-multiselectable="true"
-      class="tl__list"
+      class={LIST_CLS}
       onkeydown={srcKey}
     >
       {#if source.length === 0}
-        <li class="tl__empty" role="option" aria-selected="false" aria-disabled="true">Empty</li>
+        <li class={EMPTY_CLS} role="option" aria-selected="false" aria-disabled="true">Empty</li>
       {:else}
         {#each source as item, i (item.id)}
           <li
@@ -130,46 +138,46 @@
             role="option"
             aria-selected={selSrc.has(item.id)}
             tabindex={i === focSrc ? 0 : -1}
-            class="tl__item{selSrc.has(item.id) ? ' tl__item--sel' : ''}"
+            class={ITEM_CLS}
             onclick={() => { focSrc = i; toggleSrc(item.id); }}
             onkeydown={(e) => { if (e.key === ' ') { e.preventDefault(); focSrc = i; toggleSrc(item.id); } }}
           >
-            <span class="tl__item-label">{item.label}</span>
-            {#if item.description}<span class="tl__item-desc">{item.description}</span>{/if}
+            <span>{item.label}</span>
+            {#if item.description}<span class="text-11 text-text-4">{item.description}</span>{/if}
           </li>
         {/each}
       {/if}
     </ul>
   </div>
 
-  <div class="tl__controls" role="group" aria-label="Transfer controls">
-    <button type="button" class="tl__btn" aria-label="Move all to {targetLabel}"
+  <div class="flex flex-col items-center gap-1 pt-7" role="group" aria-label="Transfer controls">
+    <button type="button" class={BTN_CLS} aria-label={`Move all to ${targetLabel}`}
       disabled={source.length === 0}
       onclick={() => moveRight(new Set(source.map((i) => i.id)))}>»</button>
-    <button type="button" class="tl__btn" aria-label="Move selected to {targetLabel}"
+    <button type="button" class={BTN_CLS} aria-label={`Move selected to ${targetLabel}`}
       disabled={selSrc.size === 0}
       onclick={() => moveRight(selSrc)}>›</button>
-    <button type="button" class="tl__btn" aria-label="Move selected back to {sourceLabel}"
+    <button type="button" class={BTN_CLS} aria-label={`Move selected back to ${sourceLabel}`}
       disabled={selTgt.size === 0}
       onclick={() => moveLeft(selTgt)}>‹</button>
-    <button type="button" class="tl__btn" aria-label="Move all back to {sourceLabel}"
+    <button type="button" class={BTN_CLS} aria-label={`Move all back to ${sourceLabel}`}
       disabled={target.length === 0}
       onclick={() => moveLeft(new Set(target.map((i) => i.id)))}>«</button>
   </div>
 
-  <div class="tl__panel">
-    <div class="tl__header">
-      {targetLabel} <span class="tl__count">{target.length}</span>
+  <div class={PANEL_CLS}>
+    <div class={HEADER_CLS}>
+      {targetLabel} <span class={COUNT_CLS}>{target.length}</span>
     </div>
     <ul
       role="listbox"
       aria-label={targetLabel}
       aria-multiselectable="true"
-      class="tl__list"
+      class={LIST_CLS}
       onkeydown={tgtKey}
     >
       {#if target.length === 0}
-        <li class="tl__empty" role="option" aria-selected="false" aria-disabled="true">Empty</li>
+        <li class={EMPTY_CLS} role="option" aria-selected="false" aria-disabled="true">Empty</li>
       {:else}
         {#each target as item, i (item.id)}
           <li
@@ -177,12 +185,12 @@
             role="option"
             aria-selected={selTgt.has(item.id)}
             tabindex={i === focTgt ? 0 : -1}
-            class="tl__item{selTgt.has(item.id) ? ' tl__item--sel' : ''}"
+            class={ITEM_CLS}
             onclick={() => { focTgt = i; toggleTgt(item.id); }}
             onkeydown={(e) => { if (e.key === ' ') { e.preventDefault(); focTgt = i; toggleTgt(item.id); } }}
           >
-            <span class="tl__item-label">{item.label}</span>
-            {#if item.description}<span class="tl__item-desc">{item.description}</span>{/if}
+            <span>{item.label}</span>
+            {#if item.description}<span class="text-11 text-text-4">{item.description}</span>{/if}
           </li>
         {/each}
       {/if}

package/src/lib/components/TreeItem.svelte

@@ -17,12 +17,7 @@
     focusedId: string;
   }
 
-  let {
-    node,
-    expanded,
-    selected,
-    focusedId
-  }: Props = $props();
+  let { node, expanded, selected, focusedId }: Props = $props();
 
   let hasChildren = $derived(!!node.children?.length);
   let isExpanded = $derived(expanded.has(node.id));
@@ -35,15 +30,18 @@
   aria-selected={isSelected}
   tabindex={focusedId === node.id ? 0 : -1}
   data-tree-id={node.id}
-  class="tree__item"
+  class="list-none"
 >
-  <div class="tree__row{isSelected ? ' tree__row--selected' : ''}">
+  <div
+    data-selected={isSelected ? 'true' : undefined}
+    class="flex items-center gap-2 rounded px-2 py-1 text-13 text-text-2 hover:bg-row-hover data-[selected=true]:bg-brand-05/[0.18] data-[selected=true]:text-text-1"
+  >
     {#if hasChildren}
       <svg
-        class="tree__chevron{isExpanded ? ' tree__chevron--open' : ''}"
         viewBox="0 0 12 12"
         fill="none"
         aria-hidden="true"
+        class="h-3 w-3 shrink-0 text-text-4 transition-transform duration-100 motion-reduce:transition-none {isExpanded ? 'rotate-90' : ''}"
       >
         <path
           d="M4 2l4 4-4 4"
@@ -54,13 +52,13 @@
         />
       </svg>
     {:else}
-      <span class="tree__indent" aria-hidden="true"></span>
+      <span class="inline-block w-3 shrink-0" aria-hidden="true"></span>
     {/if}
-    <span class="tree__label">{node.label}</span>
-    {#if node.meta}<span class="tree__meta">{node.meta}</span>{/if}
+    <span class="flex-1 truncate">{node.label}</span>
+    {#if node.meta}<span class="text-11 text-text-4">{node.meta}</span>{/if}
   </div>
   {#if hasChildren && isExpanded && node.children}
-    <ul role="group" class="tree__group">
+    <ul role="group" class="m-0 list-none pl-4">
       {#each node.children as child (child.id)}
         <TreeItem
           node={child}

package/src/lib/components/Unit.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<!--
+  Small inline label that trails a hero number inside a .stat row or a <Card>
+  title row (e.g. "Mbps · down", "Last 24 h", "ms · jitter band"). Renders a
+  <span class="unit"> so the .unit rule in @w5-ui/tokens/dashboard.css sets
+  the canonical muted colour, 12 px size, and inline-block rhythm. Stops
+  userland reaching for inline font-size / color overrides next to bare
+  numbers. Pair with <Stat> (which already wires this internally) for hero
+  tiles, or compose by hand inside a <Card> when the number sits above a
+  chart.
+-->
+<span class="unit {className}">
+  {@render children?.()}
+</span>

package/src/lib/components/VirtualList.svelte

@@ -14,7 +14,7 @@
     height = 400,
     label = undefined,
     overscan = 3,
-    children
+    children,
   }: Props = $props();
 
   let scrollTop = $state(0);
@@ -22,27 +22,30 @@
   let totalHeight = $derived(items.length * itemHeight);
   let firstVisible = $derived(Math.floor(scrollTop / itemHeight));
   let startIndex = $derived(Math.max(0, firstVisible - overscan));
-  let endIndex = $derived(Math.min(items.length, firstVisible + Math.ceil(height / itemHeight) + overscan + 1));
-  let visible = $derived(items.slice(startIndex, endIndex).map((item, i) => ({ item, index: startIndex + i })));
+  let endIndex = $derived(
+    Math.min(items.length, firstVisible + Math.ceil(height / itemHeight) + overscan + 1),
+  );
+  let visible = $derived(
+    items.slice(startIndex, endIndex).map((item, i) => ({ item, index: startIndex + i })),
+  );
 </script>
 
 <div
   role="list"
   aria-label={label}
-  class="vl"
+  class="relative overflow-y-auto"
   style:height="{height}px"
-  style:overflow-y="auto"
   onscroll={(e) => (scrollTop = e.currentTarget.scrollTop)}
 >
-  <div style:height="{totalHeight}px" style:position="relative">
-    <div style:position="absolute" style:top="{startIndex * itemHeight}px" style:width="100%">
+  <div class="relative" style:height="{totalHeight}px">
+    <div class="absolute left-0 right-0" style:top="{startIndex * itemHeight}px">
       {#each visible as { item, index } (index)}
         <div
           role="listitem"
+          class="overflow-hidden"
           style:height="{itemHeight}px"
-          style:overflow="hidden"
         >
-          {@render children?.({ item, index, })}
+          {@render children?.({ item, index })}
         </div>
       {/each}
     </div>

package/src/lib/index.ts

@@ -28,6 +28,7 @@ export { default as Signal } from './components/Signal.svelte'
 export { default as StatusIndicator } from './components/StatusIndicator.svelte'
 export { default as Donut } from './components/Donut.svelte'
 export { default as Topbar } from './components/Topbar.svelte'
+export type { AppDef, TopbarStatus } from './components/Topbar.svelte'
 export { default as Sidebar } from './components/Sidebar.svelte'
 export type { SidebarSectionDef, SidebarItemDef } from './components/Sidebar.svelte'
 export { default as Skeleton } from './components/Skeleton.svelte'
@@ -271,5 +272,39 @@ export type {
   GroupedListGroup,
   GroupedListItemStatus,
 } from './components/GroupedList.svelte'
+export { default as PageHeader } from './components/PageHeader.svelte'
+export { default as AppLayout } from './components/AppLayout.svelte'
+export { default as Grid } from './components/Grid.svelte'
+export { default as FieldStack } from './components/FieldStack.svelte'
+export { default as FormRow } from './components/FormRow.svelte'
+export { default as FormActions } from './components/FormActions.svelte'
+export { default as TableShell } from './components/TableShell.svelte'
+export { default as TablePager } from './components/TablePager.svelte'
+export { default as Submeta } from './components/Submeta.svelte'
+export { default as Delta } from './components/Delta.svelte'
+export { default as CardMore } from './components/CardMore.svelte'
+export { default as Unit } from './components/Unit.svelte'
+export { default as StatNumber } from './components/StatNumber.svelte'
+export { default as CardTitle } from './components/CardTitle.svelte'
+export { default as Mac } from './components/Mac.svelte'
+export { default as NameCell } from './components/NameCell.svelte'
+export { default as SrOnly } from './components/SrOnly.svelte'
+export { default as NotifDot } from './components/NotifDot.svelte'
+export { default as StatusRing } from './components/StatusRing.svelte'
+export { default as TopbarActions } from './components/TopbarActions.svelte'
+export { default as Muted } from './components/Muted.svelte'
+export { default as Code } from './components/Code.svelte'
+export { default as Eyebrow } from './components/Eyebrow.svelte'
+export { default as Mono } from './components/Mono.svelte'
+export { default as Caption } from './components/Caption.svelte'
+export { default as BodyLg } from './components/BodyLg.svelte'
+export { default as Body } from './components/Body.svelte'
+export { default as Label } from './components/Label.svelte'
+export { default as Display1 } from './components/Display1.svelte'
+export { default as Display2 } from './components/Display2.svelte'
+export { default as H1 } from './components/H1.svelte'
+export { default as H2 } from './components/H2.svelte'
+export { default as H3 } from './components/H3.svelte'
+export { default as H4 } from './components/H4.svelte'
 
 export * from './icons.js'