@w5-ui/svelte 0.2.1 → 0.4.0

package/src/lib/components/Mac.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<!--
+  Inline monospace label for MAC addresses, IPs, SKUs, serial numbers and
+  other fixed-width identifiers that read inside a table cell or a property
+  row. Renders a <span class="mac"> so the .mac rule in
+  @w5-ui/tokens/dashboard.css applies the canonical JetBrains Mono family,
+  12 px size, and muted colour. Stops userland reaching for inline
+  font-family / font-size overrides on bare identifiers. Typed equivalent of
+  <span class="mac"> (apply the class directly to a <td> when the entire
+  cell is the identifier, or wrap the cell contents with <Mac> when the cell
+  carries other markup too).
+-->
+<span class="mac {className}">
+  {@render children?.()}
+</span>

package/src/lib/components/Menubar.svelte

@@ -1,7 +1,16 @@
 <script module lang="ts">
   let counter = 0;
-  export interface MenubarItem { id: string; label: string; disabled?: boolean; separator?: boolean; }
-  export interface MenubarMenu { id: string; label: string; items: MenubarItem[]; }
+  export interface MenubarItem {
+    id: string;
+    label: string;
+    disabled?: boolean;
+    separator?: boolean;
+  }
+  export interface MenubarMenu {
+    id: string;
+    label: string;
+    items: MenubarItem[];
+  }
 </script>
 
 <script lang="ts">
@@ -27,9 +36,9 @@
   let triggerEls: HTMLButtonElement[] = $state([]);
   let rootEl = $state<HTMLDivElement | undefined>(undefined);
 
-  let currentEligible = $derived(openIdx !== null
-    ? menus[openIdx].items.filter((i) => !i.separator && !i.disabled)
-    : []);
+  let currentEligible = $derived(
+    openIdx !== null ? menus[openIdx].items.filter((i) => !i.separator && !i.disabled) : [],
+  );
 
   function openMenu(idx: number, focusLast = false) {
     const items = menus[idx].items.filter((i) => !i.separator && !i.disabled);
@@ -37,7 +46,9 @@
     openIdx = idx;
   }
 
-  function closeMenu() { openIdx = null; }
+  function closeMenu() {
+    openIdx = null;
+  }
 
   function activate(menuId: string, itemId: string) {
     onaction?.({ menuId, itemId });
@@ -93,13 +104,13 @@
   bind:this={rootEl}
   role="menubar"
   aria-label={label}
-  class={`menubar${klass ? ' ' + klass : ''}`}
+  class="inline-flex items-center gap-0.5 rounded-md border border-border-1 bg-divider p-0.5 {klass}"
 >
   {#each menus as menu, idx (menu.id)}
     {@const isOpen = openIdx === idx}
     {@const menuId = `${uid}-menu-${idx}`}
     {@const elig = menu.items.filter((i) => !i.separator && !i.disabled)}
-    <div class="menubar-menu">
+    <div class="relative">
       <button
         bind:this={triggerEls[idx]}
         type="button"
@@ -107,25 +118,31 @@
         aria-haspopup="menu"
         aria-expanded={isOpen}
         aria-controls={isOpen ? menuId : undefined}
-        class={`menubar-trigger${isOpen ? ' is-open' : ''}`}
+        data-open={isOpen ? 'true' : undefined}
+        class="inline-flex cursor-pointer items-center rounded border-0 bg-transparent px-2.5 py-1.5 text-13 leading-none text-text-3 transition-[background-color,color] duration-100 hover:bg-row-active hover:text-text-1 focus-visible:outline-2 focus-visible:outline-offset-[1px] focus-visible:outline-brand-05 data-[open=true]:bg-row-active data-[open=true]:text-text-1"
         onclick={() => { if (isOpen) closeMenu(); else openMenu(idx); }}
         onkeydown={(e) => handleTriggerKeyDown(e, idx)}
       >
         {menu.label}
       </button>
       {#if isOpen}
-        <ul id={menuId} role="menu" aria-label={menu.label} class="menubar-dropdown">
+        <ul
+          id={menuId}
+          role="menu"
+          aria-label={menu.label}
+          class="absolute left-0 top-[calc(100%+2px)] z-[200] m-0 min-w-[180px] list-none rounded-md border border-border-3 bg-bg-2 p-1 shadow-[0_8px_24px_rgba(0,0,0,0.4)]"
+        >
           {#each menu.items as item (item.id)}
             {#if item.separator}
-              <li role="separator" class="menubar-sep" aria-hidden="true"></li>
+              <li role="separator" aria-hidden="true" class="my-[3px] h-px list-none bg-row-active"></li>
             {:else}
               {@const eligIdx = elig.indexOf(item)}
               <li
                 role="menuitem"
-                tabindex="-1"
+                tabindex={-1}
                 aria-disabled={item.disabled}
                 data-active={eligIdx === activeItemIdx && !item.disabled ? 'true' : undefined}
-                class="menubar-item"
+                class="flex cursor-pointer select-none items-center whitespace-nowrap rounded px-2.5 py-1.5 text-13 text-text-3 transition-colors duration-75 hover:bg-row-active hover:text-text-1 data-[active=true]:bg-row-active data-[active=true]:text-text-1 aria-disabled:cursor-default aria-disabled:text-white/25 aria-disabled:pointer-events-none"
                 onmouseenter={() => { if (!item.disabled) activeItemIdx = eligIdx; }}
                 onmousedown={(e) => { e.preventDefault(); (() => { if (!item.disabled) activate(menu.id, item.id); })(); }}
               >{item.label}</li>

package/src/lib/components/Modal.svelte

@@ -72,8 +72,15 @@
 
 <svelte:window onkeydown={onKeydown} />
 
+<!--
+  Modal chrome matches dashboard.css literal values for cross-motif
+  consistency: backdrop is solid 55% black with 8px blur, modal panel is
+  bg #141415 (neutral-09) with rgba(255,255,255,0.1) border, header +
+  footer separators at rgba(255,255,255,0.06), footer surface at #0f0f10.
+-->
 <div
-  class="backdrop {open ? 'show' : ''}"
+  class="fixed inset-0 z-[60] items-center justify-center bg-black/55 backdrop-blur-lg
+    {open ? 'flex' : 'hidden'}"
   onmousedown={(e) => (downOnBackdrop = e.target === e.currentTarget)}
   onclick={(e) => {
     if (downOnBackdrop && e.target === e.currentTarget) open = false;
@@ -83,21 +90,23 @@
 >
   <div
     bind:this={modalEl}
-    class="modal"
+    class="w-[520px] max-w-[90vw] overflow-hidden rounded-xl border border-border-2 bg-bg-1 shadow-modal"
     role="dialog"
     aria-modal="true"
     aria-labelledby={titleId}
     tabindex="-1"
   >
-    <div class="modal-h">
-      <h2 id={titleId}>{title}</h2>
+    <div class="flex items-center justify-between border-b border-border-1 px-5 py-4">
+      <h2 id={titleId} class="m-0 text-16 font-semibold">{title}</h2>
       <IconButton title="Close" onclick={() => (open = false)}>
         <CloseIcon />
       </IconButton>
     </div>
-    <div class="modal-b">{@render children?.()}</div>
+    <div class="px-5 py-4">{@render children?.()}</div>
     {#if footer}
-      <div class="modal-f">{@render footer?.()}</div>
+      <div
+        class="flex justify-end gap-2 border-t border-border-1 bg-bg-0 px-5 py-3.5"
+      >{@render footer?.()}</div>
     {/if}
   </div>
 </div>

package/src/lib/components/Mono.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<!--
+  Inline monospace identifier for MAC addresses, IPs, hex IDs, ports,
+  firmware versions, config keys, and other machine-shaped values that
+  read inside body copy or a property row. Renders a
+  <span class="dash-ui-mono"> so the .dash-ui-mono rule in
+  @w5-ui/tokens/tokens.css applies the canonical JetBrains Mono family,
+  13 px size, regular weight, 1.4 line-height, and --text-2 colour. The
+  class also enables font-variant-numeric: tabular-nums so a column of
+  MACs / IPs / versions aligns vertically. Stops userland reaching for
+  bare font-family: monospace (which falls back to a serif Courier with
+  proportional digits) or one-off font-size overrides on identifiers.
+  Typed equivalent of <span class="dash-ui-mono"> (the userland-facing
+  semantic class documented in Foundations / Type). Prefer <Mono> for
+  new userland code; reach for <Mac> only when you need the dashboard's
+  denser 12 px .mac variant (reference Devices / Clients table cells).
+-->
+<span class="dash-ui-mono {className}">
+  {@render children?.()}
+</span>

package/src/lib/components/MultiSelect.svelte

@@ -1,6 +1,9 @@
 <script module lang="ts">
   let counter = 0;
-  export interface MultiSelectOption { value: string; label: string; }
+  export interface MultiSelectOption {
+    value: string;
+    label: string;
+  }
 </script>
 
 <script lang="ts">
@@ -27,7 +30,6 @@
     class: className = '',
     onchange,
   }: Props = $props();
-  
 
   const uid = `dash-ui-ms-${++counter}`;
   let inputId = $derived(id ?? uid);
@@ -40,13 +42,15 @@
 
   let selectedSet = $derived(new Set(value));
 
-  let filtered =
-    $derived(query.trim() === ''
+  let filtered = $derived(
+    query.trim() === ''
       ? options
-      : options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase())));
+      : options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase())),
+  );
 
-  let activeOptionId =
-    $derived(activeIdx >= 0 && filtered[activeIdx] ? `${listboxId}-opt-${activeIdx}` : undefined);
+  let activeOptionId = $derived(
+    activeIdx >= 0 && filtered[activeIdx] ? `${listboxId}-opt-${activeIdx}` : undefined,
+  );
 
   function toggle(optValue: string) {
     const next = new Set(selectedSet);
@@ -88,22 +92,23 @@
   onDestroy(() => document.removeEventListener('mousedown', handleOutside));
 </script>
 
-<div class="multiselect-wrapper {className}" bind:this={wrapperEl}>
+<div class="relative block {className}" bind:this={wrapperEl}>
   {#if label}<label for={inputId} class="sr-only">{label}</label>{/if}
   <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
   <div
-    class="multiselect-field{open ? ' multiselect-field--open' : ''}"
+    data-open={open ? 'true' : undefined}
+    class="relative 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-9 transition-colors duration-100 hover:border-border-3 data-[open=true]:border-brand-05 data-[open=true]:shadow-[0_0_0_2px_rgba(0,111,255,0.2)]"
     onclick={() => { if (!disabled) inputEl?.focus(); }}
   >
     {#each value as v (v)}
       {@const opt = options.find((o) => o.value === v)}
       {#if opt}
-        <span class="tag">
-          <span class="tag__label">{opt.label}</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">{opt.label}</span>
           <button
             type="button"
-            class="tag__remove"
-            aria-label="Remove {opt.label} filter"
+            aria-label={`Remove ${opt.label} filter`}
+            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(); (() => toggle(v))(); }}
           >
             <svg viewBox="0 0 10 10" width="10" height="10" fill="none" aria-hidden="true" focusable="false">
@@ -130,38 +135,53 @@
       oninput={onInput}
       onfocus={() => { if (!disabled) open = true; }}
       onkeydown={onKeyDown}
-      class="multiselect-input"
+      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"
     />
     <button
       type="button"
-      tabindex="-1"
+      tabindex={-1}
       aria-hidden="true"
-      class="combobox-chevron-btn"
+      class="absolute right-2 flex cursor-pointer items-center border-0 bg-transparent p-0.5 leading-none text-text-4"
       onclick={(e) => { e.stopPropagation(); (() => { if (open) { open = false; query = ''; } else { inputEl?.focus(); open = true; } })(); }}
     >
-      <svg class="select-chevron{open ? ' combobox-chevron-open' : ''}" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+      <svg
+        viewBox="0 0 16 16"
+        aria-hidden="true"
+        focusable="false"
+        class="h-3.5 w-3.5 transition-transform duration-100 motion-reduce:transition-none {open ? 'rotate-180' : ''}"
+      >
         <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
       </svg>
     </button>
   </div>
   {#if open}
-    <ul id={listboxId} role="listbox" aria-label={label} aria-multiselectable="true" class="select-listbox multiselect-listbox">
+    <ul
+      id={listboxId}
+      role="listbox"
+      aria-label={label}
+      aria-multiselectable="true"
+      class="absolute left-0 top-[calc(100%+4px)] z-[9000] m-0 max-h-60 min-w-full list-none overflow-y-auto rounded-lg border border-border-3 bg-bg-2 p-1 shadow-[0_8px_24px_rgba(0,0,0,0.5)]"
+    >
       {#if filtered.length === 0}
-        <li class="combobox-empty">No results</li>
+        <li class="list-none p-2.5 text-center text-13 text-text-4">No results</li>
       {:else}
         {#each filtered as opt, idx (opt.value)}
+          {@const selected = selectedSet.has(opt.value)}
           <!-- svelte-ignore a11y_click_events_have_key_events -->
           <li
             id="{listboxId}-opt-{idx}"
             role="option"
-            aria-selected={selectedSet.has(opt.value)}
+            aria-selected={selected}
             data-active={idx === activeIdx ? 'true' : undefined}
-            class="select-option multiselect-option"
+            class="flex cursor-pointer items-center gap-2 rounded-[5px] px-2.5 py-1.5 text-13 text-text-2 hover:bg-row-active hover:text-text-1 data-[active=true]:bg-row-active data-[active=true]:text-text-1"
             onmousedown={(e) => { e.preventDefault(); (() => toggle(opt.value))(); }}
             onmouseenter={() => { activeIdx = idx; }}
           >
-            <span class="multiselect-check" aria-hidden="true">
-              {#if selectedSet.has(opt.value)}
+            <span
+              aria-hidden="true"
+              class="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-sm border border-border-3 {selected ? 'border-brand-05 bg-brand-05 text-white' : 'text-transparent'}"
+            >
+              {#if selected}
                 <svg viewBox="0 0 12 12" width="12" height="12" fill="none" aria-hidden="true">
                   <path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                 </svg>

package/src/lib/components/Muted.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<!--
+  Inline span that drops a phrase to the tertiary text colour
+  (--text-3). Renders <span class="t-muted"> so the .t-muted rule in
+  @w5-ui/tokens/dashboard.css applies the canonical muted colour used by
+  .submeta, .stat .unit and the .card h3 title chrome. Use for
+  "X active" counters next to an icon, caption-style metadata sitting
+  beside a primary label, or any sub-line that would otherwise tempt
+  userland to reach for a one-off color: #... override. Typed equivalent
+  of <span class="t-muted"> (the contrast pair is AA against every motif
+  background, verified for --text-3 over --depthBg-0/--depthBg-1/--depthBg-2
+  in both dark and light motifs).
+-->
+<span class="t-muted {className}">
+  {@render children?.()}
+</span>

package/src/lib/components/NameCell.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    /**
+     * Extra class for the inner .nc-thumb (e.g. "cam" for the camera
+     * gradient variant). Ignored when the thumb snippet is not supplied.
+     */
+    thumbClass?: string;
+    /**
+     * Square 28px avatar / initial that sits to the left of the name. Pass
+     * a snippet rendering a letter, emoji, or small SVG. Omit if the row
+     * has no leading affordance.
+     */
+    thumb?: import('svelte').Snippet;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className = '', thumbClass = '', thumb, children }: Props = $props();
+</script>
+
+<!--
+  First-column row in a list / table: a 28px square thumbnail or initial
+  followed by the device / client / alert name. Renders the canonical
+  <div class="name-cell"><span class="nc-thumb">...</span>...</div> markup
+  so the .name-cell and .nc-thumb rules from @w5-ui/tokens/dashboard.css
+  apply (28px thumb, 10px gap, white name colour, JetBrains Mono initial).
+  Typed equivalent of the manual <div class="name-cell">... pattern used
+  across the Dashboard, Devices, Wi-Fi, and Alarms reference pages.
+-->
+<div class="name-cell {className}">
+  {#if thumb}
+    <span class="nc-thumb {thumbClass}">{@render thumb()}</span>
+  {/if}
+  {@render children?.()}
+</div>

package/src/lib/components/NotifDot.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+  }
+
+  let { class: className = '' }: Props = $props();
+</script>
+
+<!--
+  Tiny red dot that sits on top of a bell / mail / inbox icon to flag unread
+  activity. Renders <span aria-hidden class="topbar-notif-dot"> so the
+  .topbar-notif-dot rule in @w5-ui/tokens/dashboard.css paints the canonical
+  6 px circle with the danger colour and a neutral-10 ring (the ring is what
+  keeps the dot legible over the deep topbar background). The dot is
+  presentational — wrap your bell <IconButton> and put the live count in its
+  aria-label (e.g. aria-label="Notifications, 3 new") so screen readers
+  announce the number while sighted users see the indicator. The hosting
+  button must be position: relative for the dot to anchor in the top-right
+  corner. Typed equivalent of <span aria-hidden class="topbar-notif-dot" />
+  for userland that slots a custom <Topbar actions> block and wants to keep
+  the unread indicator wired up without copying the class name.
+-->
+<span aria-hidden="true" class="topbar-notif-dot {className}"></span>

package/src/lib/components/NotificationPanel.svelte

@@ -15,8 +15,6 @@
 <script lang="ts">
   import { onDestroy } from 'svelte';
 
-
-
   interface Props {
     open?: boolean;
     notifications?: Notification[];
@@ -30,7 +28,7 @@
     notifications = [],
     onClose = () => {},
     onMarkRead = undefined,
-    onMarkAllRead = undefined
+    onMarkAllRead = undefined,
   }: Props = $props();
 
   let filter: 'all' | NotifType = $state('all');
@@ -51,7 +49,9 @@
     update: 'Update',
   };
 
-  function setFilter(f: string) { filter = f as 'all' | NotifType; }
+  function setFilter(f: string) {
+    filter = f as 'all' | NotifType;
+  }
 
   let unread = $derived(notifications.filter((n) => !n.read).length);
   let filtered = $derived(filter === 'all' ? notifications : notifications.filter((n) => n.type === filter));
@@ -95,46 +95,56 @@
 
 <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
 <div
-  class="np-overlay{open ? ' np-overlay--show' : ''}"
+  data-open={open ? 'true' : undefined}
+  class="fixed inset-0 z-[9100] hidden bg-black/45 backdrop-blur-sm data-[open=true]:block"
   onclick={onClose}
   aria-hidden="true"
 ></div>
 <div
   bind:this={panelEl}
-  class="np-panel{open ? ' np-panel--show' : ''}"
+  data-open={open ? 'true' : undefined}
+  class="fixed right-0 top-0 z-[9200] flex h-full w-[380px] max-w-[90vw] translate-x-full flex-col overflow-hidden border-l border-border-1 bg-bg-1 shadow-[0_0_40px_rgba(0,0,0,0.6)] transition-transform duration-200 data-[open=true]:translate-x-0 motion-reduce:transition-none"
   role="dialog"
   aria-modal="true"
   aria-labelledby={titleId}
-  tabindex="-1"
+  tabindex={-1}
 >
-  <div class="np-header">
-    <div class="np-title-row">
-      <h2 id={titleId} class="np-title">
+  <div class="border-b border-border-1 px-4 py-3">
+    <div class="flex items-center justify-between gap-2">
+      <h2 id={titleId} class="m-0 flex items-center gap-2 text-15 font-semibold text-text-1">
         Notifications
         {#if unread > 0}
-          <span class="np-badge" aria-label="{unread} unread">{unread}</span>
+          <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>
         {/if}
       </h2>
-      <div class="np-header-actions">
+      <div class="flex items-center gap-1.5">
         {#if unread > 0 && onMarkAllRead}
-          <button type="button" class="np-mark-all" onclick={onMarkAllRead}>
-            Mark all read
-          </button>
+          <button
+            type="button"
+            class="cursor-pointer rounded border-0 bg-transparent px-1.5 py-0.5 text-11 text-brand-05 hover:text-status-info focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
+            onclick={onMarkAllRead}
+          >Mark all read</button>
         {/if}
-        <button type="button" class="icon-btn" onclick={onClose} aria-label="Close notifications">
+        <button
+          type="button"
+          aria-label="Close notifications"
+          class="inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded border-0 bg-transparent text-text-4 hover:bg-row-hover hover:text-text-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
+          onclick={onClose}
+        >
           <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
             <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06z"/>
           </svg>
         </button>
       </div>
     </div>
-    <div class="np-filters" role="tablist" aria-label="Filter by type">
+    <div class="mt-2 flex gap-1" role="tablist" aria-label="Filter by type">
       {#each ['all', 'alarm', 'system', 'update'] as f}
         <button
           type="button"
           role="tab"
           aria-selected={filter === f}
-          class="np-filter{filter === f ? ' np-filter--active' : ''}"
+          data-active={filter === f ? 'true' : undefined}
+          class="cursor-pointer rounded border border-border-2 bg-transparent px-2.5 py-0.5 text-11 text-text-3 hover:bg-row-hover hover:text-text-1 data-[active=true]:border-brand-05 data-[active=true]:bg-brand-05/[0.10] data-[active=true]:text-brand-05 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
           onclick={() => setFilter(f)}
         >
           {TYPE_LABEL[f] ?? f}
@@ -143,39 +153,42 @@
     </div>
   </div>
   <div
-    class="np-list"
+    class="flex-1 overflow-y-auto"
     role="log"
     aria-live="polite"
     aria-label="Notifications"
     aria-relevant="additions"
   >
     {#if filtered.length === 0}
-      <div class="np-empty">No notifications</div>
+      <div class="p-6 text-center text-13 text-text-4">No notifications</div>
     {:else}
       {#each filtered as n (n.id)}
-        <div class="np-item{n.read ? ' np-item--read' : ''}">
+        <div
+          data-read={n.read ? 'true' : undefined}
+          class="flex items-start gap-2 border-b border-border-1 px-4 py-3 last:border-b-0 data-[read=true]:opacity-60"
+        >
           <span
-            class="np-dot"
+            class="mt-1.5 inline-block h-2 w-2 shrink-0 rounded-full"
             style="background:{SEV_COLOR[n.severity ?? 'info']};"
             aria-hidden="true"
           ></span>
-          <div class="np-item-body">
-            <div class="np-item-top">
-              <span class="np-item-title">{n.title}</span>
-              <span class="np-item-time">{n.time}</span>
+          <div class="min-w-0 flex-1">
+            <div class="flex items-baseline justify-between gap-2">
+              <span class="truncate text-13 font-medium text-text-1">{n.title}</span>
+              <span class="shrink-0 text-11 text-text-4 tabular-nums">{n.time}</span>
             </div>
             {#if n.description}
-              <p class="np-item-desc">{n.description}</p>
+              <p class="m-0 mt-0.5 text-12 text-text-3">{n.description}</p>
             {/if}
-            <span class="np-type-badge">{TYPE_LABEL[n.type]}</span>
+            <span class="mt-1 inline-block rounded bg-row-active px-1.5 py-0.5 text-[10px] uppercase tracking-[0.05em] text-text-4">{TYPE_LABEL[n.type]}</span>
           </div>
           {#if !n.read && onMarkRead}
             <button
               type="button"
-              class="np-read-btn"
-              onclick={() => onMarkRead?.(n.id)}
-              aria-label="Mark as read: {n.title}"
+              aria-label={`Mark as read: ${n.title}`}
               title="Mark as read"
+              class="inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded border-0 bg-transparent text-status-success hover:bg-status-success/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
+              onclick={() => onMarkRead?.(n.id)}
             >&#10003;</button>
           {/if}
         </div>

package/src/lib/components/NumberInput.svelte

@@ -3,8 +3,6 @@
 </script>
 
 <script lang="ts">
-  
-
   interface Props {
     label?: string | undefined;
     value?: number;
@@ -30,10 +28,10 @@
     class: className = '',
     onchange,
   }: Props = $props();
-  
 
   const uid = `dash-ui-ni-${++counter}`;
   let inputId = $derived(id ?? uid);
+
   function clamp(n: number): number {
     let v = n;
     if (min !== undefined) v = Math.max(min, v);
@@ -62,19 +60,22 @@
 
   let canDecrement = $derived(!disabled && (min === undefined || value > min));
   let canIncrement = $derived(!disabled && (max === undefined || value < max));
+
+  const BTN_CLS =
+    'inline-flex h-full w-[30px] shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent text-base text-text-4 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';
 </script>
 
-<div class="number-input {className}">
+<div class="inline-flex flex-col gap-1 {className}">
   {#if label}
-    <label for={inputId} class="number-input__label">{label}</label>
+    <label for={inputId} class="text-12 text-text-4">{label}</label>
   {/if}
-  <div class="number-input__control">
+  <div class="inline-flex h-[34px] items-stretch overflow-hidden rounded-md border border-border-2 bg-bg-page transition-colors duration-100 focus-within:border-brand-05">
     <button
       type="button"
-      class="number-input__btn"
       aria-label="Decrement"
-      tabindex="-1"
+      tabindex={-1}
       disabled={!canDecrement}
+      class={BTN_CLS}
       onclick={() => commit(value - step)}
     >−</button>
     <!-- svelte-ignore a11y_no_redundant_roles - role kept explicit for screen reader compat -->
@@ -88,19 +89,19 @@
       aria-valuetext={suffix ? `${value} ${suffix}` : undefined}
       {value}
       {disabled}
-      class="number-input__field"
+      class="w-[6ch] min-w-[40px] border-0 bg-transparent px-1 text-center text-13 text-text-1 outline-none [appearance:textfield] [-moz-appearance:textfield] [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none"
       onchange={handleChange}
       onkeydown={handleKey}
     />
     {#if suffix}
-      <span class="number-input__suffix" aria-hidden="true">{suffix}</span>
+      <span aria-hidden="true" class="flex items-center whitespace-nowrap pl-0.5 pr-2 text-12 text-text-4">{suffix}</span>
     {/if}
     <button
       type="button"
-      class="number-input__btn"
       aria-label="Increment"
-      tabindex="-1"
+      tabindex={-1}
       disabled={!canIncrement}
+      class={BTN_CLS}
       onclick={() => commit(value + step)}
     >+</button>
   </div>