@w5-ui/svelte 0.2.0 → 0.3.0

package/src/lib/components/Tag.svelte

@@ -8,11 +8,13 @@
   let { label, class: className = '', onclick }: Props = $props();
 </script>
 
-<span class="tag {className}">
-  <span class="tag__label">{label}</span>
+<span
+  class="inline-flex h-6 items-center gap-1 whitespace-nowrap rounded-full border border-brand-05/25 bg-brand-05/14 pl-2.5 pr-1 text-12 font-medium text-status-info {className}"
+>
+  <span class="leading-none">{label}</span>
   <button
     type="button"
-    class="tag__remove"
+    class="inline-flex h-[18px] w-[18px] shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 text-status-info transition-[background,color] duration-100 hover:bg-brand-05/25 hover:text-text-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
     aria-label="Remove {label} filter"
     {onclick}
   >

package/src/lib/components/TagInput.svelte

@@ -3,8 +3,6 @@
 </script>
 
 <script lang="ts">
-  
-
   interface Props {
     label?: string | undefined;
     value?: string[];
@@ -56,26 +54,27 @@
   }
 </script>
 
-<div class="tag-input-wrapper {klass}">
+<div class={klass}>
   {#if label}
-    <label for={uid} class="tag-input__label">{label}</label>
+    <label for={uid} class="text-12 text-text-4">{label}</label>
   {/if}
   <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
   <!-- svelte-ignore a11y_no_noninteractive_element_interactions - group container focuses input on click -->
   <div
     role="group"
     aria-label={label ?? 'Tags'}
-    class="tag-input{disabled ? ' tag-input--disabled' : ''}"
+    data-disabled={disabled ? 'true' : undefined}
+    class="flex min-h-[34px] cursor-text flex-wrap items-center gap-1 rounded-md border border-border-2 bg-bg-page py-[3px] pl-2 pr-2 transition-colors duration-100 hover:border-border-3 focus-within:border-brand-05 focus-within:shadow-[0_0_0_2px_rgba(0,111,255,0.2)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-40"
     onclick={() => inputEl?.focus()}
   >
     {#each value as tag, i}
-      <span class="tag">
-        <span class="tag__label">{tag}</span>
+      <span class="inline-flex h-6 items-center gap-1 whitespace-nowrap rounded-full border border-brand-05/25 bg-brand-05/[0.14] pl-2.5 pr-1 text-12 font-medium text-status-info">
+        <span class="leading-none">{tag}</span>
         {#if !disabled}
           <button
             type="button"
-            class="tag__remove"
-            aria-label="Remove {tag}"
+            aria-label={`Remove ${tag}`}
+            class="inline-flex h-[18px] w-[18px] shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 text-status-info transition-colors duration-100 hover:bg-brand-05/25 hover:text-text-1 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-brand-05"
             onclick={(e) => { e.stopPropagation(); (() => removeTag(i))(); }}
           >
             <svg viewBox="0 0 10 10" width="10" height="10" fill="none" aria-hidden="true" focusable="false">
@@ -89,12 +88,12 @@
       bind:this={inputEl}
       id={uid}
       type="text"
-      class="tag-input__field"
       bind:value={draft}
       {disabled}
       placeholder={value.length === 0 ? placeholder : ''}
       aria-label={label ?? 'Add tag'}
       autocomplete="off"
+      class="h-6 min-w-[80px] flex-1 border-0 bg-transparent px-1 text-13 leading-none text-text-1 outline-none placeholder:text-text-4"
       onkeydown={handleKeyDown}
       onblur={handleBlur}
     />

package/src/lib/components/Textarea.svelte

@@ -37,9 +37,15 @@
   let inputId = $derived(id ?? uid);
 </script>
 
+<!--
+  Textarea reuses the dashboard.css/Input layout (.input + .textarea sit
+  together; the `auto` height + min-height: 80px + resize: vertical + 8px
+  vertical padding + 1.5 line-height overrides come from .textarea). All
+  inline now.
+-->
 <textarea
   id={inputId}
-  class="input textarea {className}"
+  class="block min-h-20 w-full resize-y rounded-md border border-border-2 bg-bg-page px-3 py-2 font-[inherit] text-13 leading-[1.5] text-text-1 outline-none transition-[border-color] duration-100 focus:border-brand-05 focus:[box-shadow:0_0_0_2px_rgba(0,111,255,0.2)] aria-[invalid='true']:border-status-danger aria-[invalid='true']:focus:[box-shadow:0_0_0_2px_rgba(240,58,58,0.12)] {className}"
   {style}
   {rows}
   {placeholder}

package/src/lib/components/TimePicker.svelte

@@ -3,8 +3,6 @@
 </script>
 
 <script lang="ts">
-  
-
   interface Props {
     label?: string | undefined;
     value?: string;
@@ -73,13 +71,21 @@
     field === 0 ? commit(clamped, minutes) : commit(hours, clamped);
     if (raw.length === 2 && field === 0) setTimeout(() => inputs[1]?.focus(), 0);
   }
+
+  const FIELD_CLS =
+    'w-9 border-0 bg-transparent p-0 text-center font-mono text-13 text-text-1 outline-none';
 </script>
 
-<div class="time-picker-wrapper {className}">
+<div class={className}>
   {#if label}
-    <label for="{uid}-h" class="time-picker__label">{label}</label>
+    <label for="{uid}-h" class="text-12 text-text-4">{label}</label>
   {/if}
-  <div class="time-picker{disabled ? ' time-picker--disabled' : ''}" role="group" aria-label={label ?? 'Time'}>
+  <div
+    role="group"
+    aria-label={label ?? 'Time'}
+    data-disabled={disabled ? 'true' : undefined}
+    class="inline-flex h-[34px] items-center gap-0.5 rounded-md border border-border-2 bg-bg-page px-2 transition-colors duration-100 focus-within:border-brand-05 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-40"
+  >
     <input
       bind:this={inputs[0]}
       id="{uid}-h"
@@ -95,12 +101,12 @@
       value={pad(hours)}
       {disabled}
       maxlength={2}
-      class="time-picker__field"
+      class={FIELD_CLS}
       oninput={(e) => handleInput(0, e)}
       onkeydown={(e) => handleKey(0, e)}
       onfocus={(e) => e.currentTarget.select()}
     />
-    <span class="time-picker__sep" aria-hidden="true">:</span>
+    <span aria-hidden="true" class="select-none text-13 leading-none text-text-4">:</span>
     <input
       bind:this={inputs[1]}
       type="text"
@@ -115,7 +121,7 @@
       value={pad(minutes)}
       {disabled}
       maxlength={2}
-      class="time-picker__field"
+      class={FIELD_CLS}
       oninput={(e) => handleInput(1, e)}
       onkeydown={(e) => handleKey(1, e)}
       onfocus={(e) => e.currentTarget.select()}

package/src/lib/components/TimeRange.svelte

@@ -12,21 +12,19 @@
 
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
+  import Button from './Button.svelte';
 
   interface Props {
     value?: TimeRangeId;
     onchange?: (payload: TimeRangeId) => void;
   }
 
-  let { value = '1h',
-    onchange,
-  }: Props = $props();
+  let { value = '1h', onchange }: Props = $props();
   const uid = `dash-ui-tr-${++counter}`;
   const listId = `${uid}-list`;
 
   let open = $state(false);
   let activeIdx = $state(0);
-  let triggerEl = $state<HTMLButtonElement | undefined>(undefined);
   let wrapperEl = $state<HTMLDivElement | undefined>(undefined);
 
   let selected = $derived(PRESETS.find((p) => p.id === value) ?? PRESETS[0]);
@@ -39,7 +37,6 @@
   function select(id: TimeRangeId) {
     onchange?.(id);
     open = false;
-    triggerEl?.focus();
   }
 
   function onKeyDown(e: KeyboardEvent) {
@@ -51,7 +48,7 @@
       }
       return;
     }
-    if (e.key === 'Escape') { e.preventDefault(); open = false; triggerEl?.focus(); }
+    if (e.key === 'Escape') { e.preventDefault(); open = false; }
     else if (e.key === 'ArrowDown') { e.preventDefault(); activeIdx = Math.min(activeIdx + 1, PRESETS.length - 1); }
     else if (e.key === 'ArrowUp') { e.preventDefault(); activeIdx = Math.max(activeIdx - 1, 0); }
     else if (e.key === 'Home') { e.preventDefault(); activeIdx = 0; }
@@ -68,31 +65,32 @@
   onDestroy(() => document.removeEventListener('mousedown', handleOutside));
 </script>
 
-<div class="time-range-root" bind:this={wrapperEl}>
-  <button
-    bind:this={triggerEl}
-    type="button"
-    class="btn time-range-trigger"
-    aria-haspopup="listbox"
-    aria-expanded={open}
-    aria-controls={open ? listId : undefined}
-    onclick={toggle}
-    onkeydown={onKeyDown}
-  >
+<div
+  class="relative inline-block"
+  bind:this={wrapperEl}
+  onkeydown={onKeyDown}
+  role="presentation"
+>
+  <Button variant="ghost" aria-haspopup="listbox" aria-expanded={open} aria-controls={open ? listId : undefined} onclick={toggle}>
     {selected.short}
-    <svg class="time-range-chevron" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <svg width="10" height="6" viewBox="0 0 10 6" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 transition-transform duration-100 motion-reduce:transition-none {open ? 'rotate-180' : ''}">
       <path d="M1 1l4 4 4-4" />
     </svg>
-  </button>
+  </Button>
   {#if open}
-    <ul id={listId} role="listbox" aria-label="Time range" class="time-range-list">
+    <ul
+      id={listId}
+      role="listbox"
+      aria-label="Time range"
+      class="absolute right-0 top-[calc(100%+4px)] z-[9100] m-0 min-w-[152px] list-none rounded-lg border border-border-3 bg-bg-2 p-1 shadow-[0_8px_24px_rgba(0,0,0,0.5)]"
+    >
       {#each PRESETS as p, idx (p.id)}
         <li
           role="option"
           aria-selected={p.id === value}
-          tabindex="-1"
+          tabindex={-1}
           data-active={idx === activeIdx ? 'true' : undefined}
-          class="time-range-option"
+          class="flex cursor-pointer items-center justify-between gap-2 whitespace-nowrap rounded-[5px] px-2.5 py-1.5 text-13 text-text-2 outline-none hover:bg-row-active hover:text-text-1 data-[active=true]:bg-row-active data-[active=true]:text-text-1 aria-selected:text-status-info"
           onmouseenter={() => { activeIdx = idx; }}
           onmousedown={(e) => { e.preventDefault(); (() => select(p.id))(); }}
         >

package/src/lib/components/Timeline.svelte

@@ -15,20 +15,31 @@
   }
 
   let { events, class: className = '' }: Props = $props();
-  
+
+  type V = NonNullable<TimelineEvent['variant']>;
+  const VARIANT: Record<V, string> = {
+    info: 'bg-brand-05',
+    success: 'bg-status-success',
+    warn: 'bg-status-warning',
+    danger: 'bg-status-danger',
+    neutral: 'bg-status-neutral',
+  };
 </script>
 
-<ol class="timeline {className}" aria-label="Event timeline">
+<ol class="relative m-0 list-none p-0 {className}" aria-label="Event timeline">
   {#each events as e (e.id)}
-    <li class="timeline__item timeline__item--{e.variant ?? 'neutral'}">
-      <span class="timeline__dot" aria-hidden="true"></span>
-      <div class="timeline__content">
-        <div class="timeline__header">
-          <span class="timeline__title">{e.title}</span>
-          <time class="timeline__time">{e.time}</time>
+    <li class="relative flex gap-3 pb-3 pl-4 last:pb-0 [&:not(:last-child)]:before:absolute [&:not(:last-child)]:before:bottom-0 [&:not(:last-child)]:before:left-[5px] [&:not(:last-child)]:before:top-4 [&:not(:last-child)]:before:w-px [&:not(:last-child)]:before:bg-row-active [&:not(:last-child)]:before:content-['']">
+      <span
+        class="absolute left-0 top-1.5 inline-block h-2.5 w-2.5 shrink-0 rounded-full {VARIANT[e.variant ?? 'neutral']}"
+        aria-hidden="true"
+      ></span>
+      <div class="min-w-0 flex-1">
+        <div class="flex items-baseline justify-between gap-2">
+          <span class="font-medium text-text-1">{e.title}</span>
+          <time class="shrink-0 text-11 text-text-4 tabular-nums">{e.time}</time>
         </div>
         {#if e.description}
-          <p class="timeline__desc">{e.description}</p>
+          <p class="m-0 mt-0.5 text-12 text-text-3">{e.description}</p>
         {/if}
       </div>
     </li>

package/src/lib/components/Toast.svelte

@@ -30,16 +30,35 @@
 </script>
 
 <script lang="ts">
-  // store and dismiss are in module scope — accessible in template via $store
+  // store + dismiss live in module scope; template uses $store
+  // Pre-composed variant classes for Tailwind's static scanner.
+  // Backgrounds at 16% (matches dashboard.css), left border solid, text
+  // colour the legibility-tuned literal hue.
+  const TOAST: Record<ToastVariant, string> = {
+    success: 'bg-status-success/16 border-l-status-success text-status-success',
+    warn: 'bg-status-warning/16 border-l-status-warning text-status-warning',
+    danger: 'bg-status-danger/16 border-l-status-danger text-status-danger',
+    info: 'bg-status-info/16 border-l-brand-05 text-status-info',
+  };
 </script>
 
-<div class="toaster" role="log" aria-label="Notifications" aria-live="polite" aria-atomic="false">
+<div
+  class="pointer-events-none fixed bottom-6 right-6 z-[9900] flex min-w-[240px] max-w-[360px] flex-col gap-2"
+  role="log"
+  aria-label="Notifications"
+  aria-live="polite"
+  aria-atomic="false"
+>
   {#each $store as item (item.id)}
-    <div class="toast toast-{item.variant}" role={item.variant === 'danger' ? 'alert' : 'status'}>
-      <span class="toast-msg">{item.message}</span>
+    <div
+      class="pointer-events-auto flex items-center gap-2.5 rounded-lg border-l-[3px] px-3.5 py-2.5 text-13 leading-[1.4] [animation:toast-in_150ms_ease] [box-shadow:0_4px_16px_rgba(0,0,0,0.5)]
+        {TOAST[item.variant]}"
+      role={item.variant === 'danger' ? 'alert' : 'status'}
+    >
+      <span class="flex-1">{item.message}</span>
       <button
         type="button"
-        class="toast-dismiss icon-btn"
+        class="ml-auto inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-current hover:bg-row-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
         onclick={() => dismiss(item.id)}
         aria-label="Dismiss notification"
       >

package/src/lib/components/Toggle.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  
   interface Props {
     on?: boolean;
     ariaLabel?: string | undefined;
@@ -7,7 +6,10 @@
     ontoggle?: (payload: boolean) => void;
   }
 
-  let { on = $bindable(false), ariaLabel = undefined, ariaDescribedBy = undefined,
+  let {
+    on = $bindable(false),
+    ariaLabel = undefined,
+    ariaDescribedBy = undefined,
     ontoggle,
   }: Props = $props();
   function flip() {
@@ -22,8 +24,12 @@
   aria-checked={on}
   aria-label={ariaLabel}
   aria-describedby={ariaDescribedBy}
-  class="toggle-track {on ? 'on' : 'off'}"
+  class="relative inline-block h-[18px] w-8 shrink-0 cursor-pointer appearance-none rounded-full border-0 p-0 font-[inherit] text-[inherit] transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05
+    {on ? 'bg-brand-05' : 'bg-text-4'}"
   onclick={flip}
 >
-  <span class="knob"></span>
+  <span
+    class="absolute top-0.5 h-3.5 w-3.5 rounded-full bg-white transition-[left] duration-150
+      {on ? 'left-4' : 'left-0.5'}"
+  ></span>
 </button>

package/src/lib/components/ToggleGroup.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  
-
   interface Props {
     options?: { value: string; label: string; disabled?: boolean }[];
     value?: string[];
@@ -18,20 +16,32 @@
     class: klass = '',
     onchange,
   }: Props = $props();
+
   function toggle(v: string) {
     const next = value.includes(v) ? value.filter((x) => x !== v) : [...value, v];
     value = next;
     onchange?.(next);
   }
+
+  // Pre-composed size strings — Tailwind's static scanner must see literals.
+  const SIZE: Record<NonNullable<Props['size']>, string> = {
+    sm: 'h-6 px-[9px] text-11',
+    md: 'h-7 px-3 text-12',
+  };
 </script>
 
-<div role="group" aria-label={ariaLabel} class="tg-group tg-group--{size}{klass ? ` ${klass}` : ''}">
+<div
+  role="group"
+  aria-label={ariaLabel}
+  class="inline-flex flex-wrap gap-px rounded-lg bg-row-hover p-0.5 {klass}"
+>
   {#each options as opt}
+    {@const on = value.includes(opt.value)}
     <button
       type="button"
-      aria-pressed={value.includes(opt.value)}
+      aria-pressed={on}
       disabled={opt.disabled}
-      class="tg-btn{value.includes(opt.value) ? ' tg-btn--on' : ''}"
+      class="flex-shrink-0 grow-0 inline-flex cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-md border-0 bg-transparent font-medium leading-none text-text-3 transition-[background-color,color] duration-100 hover:bg-row-hover hover:text-text-1 disabled:cursor-not-allowed disabled:opacity-40 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-brand-05 {SIZE[size]} {on ? 'bg-bg-3 text-text-1 shadow-[0_1px_3px_rgba(0,0,0,0.18)] dark:shadow-[0_1px_3px_rgba(0,0,0,0.4)]' : ''}"
       onclick={() => toggle(opt.value)}
     >
       {opt.label}

package/src/lib/components/Tooltip.svelte

@@ -14,13 +14,28 @@
     label,
     placement = 'top',
     class: className = '',
-    children
+    children,
   }: Props = $props();
-  
+
   const id = `dash-ui-tooltip-${++counter}`;
+
+  // Pre-composed placement strings so Tailwind's scanner picks each up.
+  // The wrapper carries `group` so the content shows on group-hover or
+  // group-focus-within (replaces dashboard.css's `:hover .tooltip-content`).
+  const PLACEMENT: Record<NonNullable<Props['placement']>, string> = {
+    top: 'bottom-[calc(100%+6px)] left-1/2 -translate-x-1/2',
+    bottom: 'top-[calc(100%+6px)] left-1/2 -translate-x-1/2',
+    left: 'right-[calc(100%+6px)] top-1/2 -translate-y-1/2',
+    right: 'left-[calc(100%+6px)] top-1/2 -translate-y-1/2',
+  };
 </script>
 
-<span class="tooltip-wrapper tooltip-{placement} {className}">
-  <span class="tooltip-trigger" aria-describedby={id}>{@render children?.()}</span>
-  <span {id} role="tooltip" class="tooltip-content">{label}</span>
+<span class="group relative inline-flex {className}">
+  <span class="inline-flex" aria-describedby={id}>{@render children?.()}</span>
+  <span
+    {id}
+    role="tooltip"
+    class="pointer-events-none absolute z-[9999] whitespace-nowrap rounded border border-border-1 bg-bg-2 px-2 py-1 text-[11px] leading-[1.3] text-text-2 opacity-0 transition-opacity duration-100 group-hover:opacity-100 group-focus-within:opacity-100 motion-reduce:transition-none
+      {PLACEMENT[placement]}"
+  >{label}</span>
 </span>

package/src/lib/components/Topbar.svelte

@@ -1,9 +1,10 @@
 <script module lang="ts">
   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 IconButton from './IconButton.svelte';
   import Avatar from './Avatar.svelte';
@@ -25,6 +26,15 @@
     apps?: AppDef[];
     initials?: string;
     notificationCount?: number;
+    /** Health colour of the site-name status ring. Defaults to 'ok' (green). */
+    status?: TopbarStatus;
+    /** When false, the site label renders as a static element instead of a
+     * site-switcher dropdown trigger. Use for single-site dashboards. */
+    siteSwitchable?: boolean;
+    /** Custom right-side actions snippet. When provided, replaces the default
+     * Search/Updates/Notifications/Help/Avatar block in full. Use to slot in
+     * app-specific controls (theme toggle, status pill, etc.). */
+    actions?: Snippet;
     onappchange?: (payload: string) => void;
   }
 
@@ -34,44 +44,115 @@
     apps = DEFAULT_APPS,
     initials = 'MS',
     notificationCount = 1,
+    status = 'ok',
+    siteSwitchable = true,
+    actions,
     onappchange,
   }: Props = $props();
+
+  // Status-ring colour mapping. We pre-compose the Tailwind class strings here
+  // (rather than inline) so the consumer's Tailwind compiler picks them up
+  // unambiguously via static-string scanning.
+  // Ring background opacities chosen to match dashboard.css exactly
+  // (`.status-ring { background: rgba(<colour>, 0.18) }`).
+  const RING_BG: Record<TopbarStatus, string> = {
+    ok: 'bg-status-success/18',
+    warn: 'bg-status-warning/18',
+    danger: 'bg-status-danger/18',
+    neutral: 'bg-status-neutral/18',
+  };
+  const RING_DOT: Record<TopbarStatus, string> = {
+    ok: 'bg-status-success',
+    warn: 'bg-status-warning',
+    danger: 'bg-status-danger',
+    neutral: 'bg-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]}`);
 </script>
 
-<header class="topbar">
-  <button type="button" class="site-switch" aria-label="Switch site: {siteName}" aria-haspopup="menu">
-    <span class="status-ring"></span>
-    <span class="site-name" aria-hidden="true">{siteName}</span>
-    <CaretIcon class="caret" />
-  </button>
-  <nav class="app-tabs" aria-label="Apps">
+<!--
+  Motif-aware chrome: surfaces resolve via `var(--bg-page)`, text via
+  `var(--text-1)`, borders via `var(--border-1)`. In dark motif the
+  values still resolve to the original `#0a0a0b` / `#ffffff` /
+  rgba(255,255,255,0.06) so the baseline look is unchanged. Light motif
+  flips them to `#ffffff` / `#0a0a0b` / `#ececee`.
+-->
+<header
+  class="flex h-12 shrink-0 items-center gap-0 bg-bg-page px-2"
+>
+  {#if siteSwitchable}
+    <button
+      type="button"
+      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"
+    >
+      <span class={ringWrapClass}><span class={ringDotClass}></span></span>
+      <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>
+      <span class="text-13 font-medium text-text-1">{siteName}</span>
+    </div>
+  {/if}
+
+  <nav class="ml-3.5 flex h-12 items-center gap-0.5" aria-label="Apps">
     {#each apps as a (a.id)}
       <button
         type="button"
-        class="app-tab {a.id === activeApp ? 'active' : ''}"
+        class="flex h-12 w-16 cursor-pointer flex-col items-center justify-center py-1.5 transition-colors duration-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05
+          {a.id === activeApp
+            ? 'bg-bg-1 text-text-1'
+            : 'bg-transparent text-text-3 hover:text-text-1'}"
         aria-current={a.id === activeApp ? 'page' : undefined}
         onclick={() => { activeApp = a.id; onappchange?.(a.id); }}
       >
-        <img src={appLogos[a.logo]} alt="" width="24" height="24" />
-        <span class="label">{a.label}</span>
+        <img
+          src={appLogos[a.logo]}
+          alt=""
+          width="24"
+          height="24"
+          class="transition-[opacity,filter] duration-150
+            {a.id === activeApp
+              ? 'opacity-100 dark:brightness-[1.6]'
+              : 'opacity-65 hover:opacity-90 dark:hover:brightness-[1.4]'}"
+        />
+        <span class="mt-0.5 text-[10px] font-medium leading-none">{a.label}</span>
       </button>
     {/each}
   </nav>
-  <div class="topbar-spacer"></div>
-  <div class="topbar-right">
-    <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"
-      style="position:relative;"
-    >
-      <BellIcon />
-      {#if notificationCount > 0}
-        <span aria-hidden="true" style="position:absolute;top:6px;right:6px;width:6px;height:6px;background:#F03A3A;border-radius:50%;border:1.5px solid #0A0A0B;"></span>
-      {/if}
-    </IconButton>
-    <IconButton aria-label="Help" title="Help"><HelpIcon /></IconButton>
-    <Avatar initials={initials} size="sm" alt="Account, {initials}" />
+
+  <div class="flex-1"></div>
+
+  <div class="flex items-center gap-1 pr-2">
+    {#if actions}
+      {@render actions()}
+    {:else}
+      <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" />
+    {/if}
   </div>
 </header>