@w5-ui/svelte 0.2.1 → 0.4.0

package/src/lib/components/DatePicker.svelte

@@ -37,6 +37,7 @@
 
 <script lang="ts">
   import { onMount, onDestroy, tick } from 'svelte';
+  import Button from './Button.svelte';
 
   interface Props {
     value?: Date | null;
@@ -45,7 +46,10 @@
     onchange?: (payload: Date) => void;
   }
 
-  let { value = null, placeholder = 'Pick a date', disabled = false,
+  let {
+    value = null,
+    placeholder = 'Pick a date',
+    disabled = false,
     onchange,
   }: Props = $props();
   const uid = `dash-ui-dp-${++counter}`;
@@ -58,7 +62,7 @@
   // svelte-ignore state_referenced_locally
   let viewMonth = $state(value?.getMonth() ?? today.getMonth());
   let focusIdx = $state(0);
-  let triggerEl = $state<HTMLButtonElement | undefined>(undefined);
+  let triggerEl = $state<HTMLElement | undefined>(undefined);
   let calEl = $state<HTMLDivElement | undefined>(undefined);
   let dayEls: (HTMLButtonElement | null)[] = $state(Array(42).fill(null));
 
@@ -125,25 +129,25 @@
 
   onMount(() => document.addEventListener('mousedown', handleOutside));
   onDestroy(() => document.removeEventListener('mousedown', handleOutside));
+
+  function dayCls(outside: boolean, isToday: boolean, isSelected: boolean) {
+    let cls = 'flex h-8 w-8 cursor-pointer items-center justify-center rounded border-0 bg-transparent text-12 leading-none transition-colors duration-100 hover:bg-row-active focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-brand-05';
+    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';
+    return cls;
+  }
 </script>
 
-<div class="dp-root">
-  <button
-    bind:this={triggerEl}
-    type="button"
-    class="btn dp-trigger"
-    aria-haspopup="dialog"
-    aria-expanded={open}
-    aria-controls={open ? calId : undefined}
-    {disabled}
-    onclick={() => open ? closeCal() : openCal()}
-  >
+<div class="relative inline-block" bind:this={triggerEl}>
+  <Button variant="ghost" aria-haspopup="dialog" aria-expanded={open} aria-controls={open ? calId : undefined} disabled={disabled} onclick={() => open ? closeCal() : openCal()}>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
       <rect x="1" y="2" width="12" height="11" rx="1.5" />
       <path d="M1 6h12M4 1v2M10 1v2" />
     </svg>
     {value ? formatDate(value) : placeholder}
-  </button>
+  </Button>
 
   {#if open}
     <div
@@ -152,27 +156,27 @@
       role="dialog"
       aria-modal="true"
       aria-label={`Choose date, ${label}`}
-      class="dp-cal"
+      class="absolute left-0 top-[calc(100%+4px)] z-[9100] rounded-lg border border-border-3 bg-bg-2 p-2 shadow-[0_8px_24px_rgba(0,0,0,0.5)]"
     >
-      <div class="dp-header">
-        <button type="button" class="dp-nav" onclick={prevMonth} aria-label="Previous month">
+      <div class="flex items-center justify-between px-1 py-1">
+        <button type="button" 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={prevMonth} aria-label="Previous month">
           <svg width="8" height="12" viewBox="0 0 8 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
             <path d="M7 1L2 6l5 5" />
           </svg>
         </button>
-        <span class="dp-month-label" aria-live="polite">{label}</span>
-        <button type="button" class="dp-nav" onclick={nextMonth} aria-label="Next month">
+        <span class="text-13 font-medium text-text-1" aria-live="polite">{label}</span>
+        <button type="button" 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={nextMonth} aria-label="Next month">
           <svg width="8" height="12" viewBox="0 0 8 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
             <path d="M1 1l5 5-5 5" />
           </svg>
         </button>
       </div>
 
-      <table role="grid" class="dp-grid" aria-label={label}>
+      <table role="grid" class="mt-1 border-collapse" aria-label={label}>
         <thead>
           <tr>
             {#each DAYS as d}
-              <th scope="col" abbr={d}>{d}</th>
+              <th scope="col" abbr={d} class="p-0 text-center text-11 font-semibold uppercase tracking-[0.05em] text-text-4">{d}</th>
             {/each}
           </tr>
         </thead>
@@ -185,12 +189,12 @@
                 {@const outside = day.getMonth() !== viewMonth}
                 {@const isToday = isSameDay(day, today)}
                 {@const isSelected = value ? isSameDay(day, value) : false}
-                <td role="gridcell" aria-selected={isSelected}>
+                <td role="gridcell" aria-selected={isSelected} class="p-0">
                   <button
                     bind:this={dayEls[idx]}
                     type="button"
                     tabindex={idx === focusIdx ? 0 : -1}
-                    class="dp-day{outside ? ' dp-day--outside' : ''}{isToday && !isSelected ? ' dp-day--today' : ''}{isSelected ? ' dp-day--selected' : ''}"
+                    class={dayCls(outside, isToday, isSelected)}
                     aria-label={day.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })}
                     onkeydown={(e) => onGridKey(e, idx)}
                     onclick={() => select(day)}

package/src/lib/components/DateRangePicker.svelte

@@ -42,6 +42,7 @@
 
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
+  import Button from './Button.svelte';
 
   interface Props {
     value?: DateRange;
@@ -50,7 +51,10 @@
     onchange?: (payload: DateRange) => void;
   }
 
-  let { value = { start: null, end: null }, placeholder = 'Select date range', disabled = false,
+  let {
+    value = { start: null, end: null },
+    placeholder = 'Select date range',
+    disabled = false,
     onchange,
   }: Props = $props();
   const uid = `dash-ui-drp-${++counter}`;
@@ -62,7 +66,7 @@
   let hoverDate: Date | null = $state(null);
   let viewYear = $state(today.getFullYear());
   let viewMonth = $state(today.getMonth());
-  let triggerEl = $state<HTMLButtonElement | undefined>(undefined);
+  let triggerEl = $state<HTMLDivElement | undefined>(undefined);
   let dlgEl = $state<HTMLDivElement | undefined>(undefined);
 
   let rightMonth = $derived(viewMonth === 11 ? 0 : viewMonth + 1);
@@ -90,7 +94,6 @@
       hoverDate = null;
       onchange?.({ start: s, end: e });
       open = false;
-      triggerEl?.focus();
     }
   }
 
@@ -128,55 +131,59 @@
 
   onMount(() => document.addEventListener('mousedown', handleOutside));
   onDestroy(() => document.removeEventListener('mousedown', handleOutside));
+
+  function dayCls(outside: boolean, isTodayDay: boolean, start: boolean, end: boolean, inRange: boolean) {
+    let cls = 'flex h-8 w-8 cursor-pointer items-center justify-center rounded border-0 bg-transparent text-12 leading-none transition-colors duration-100 hover:bg-row-active focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-brand-05';
+    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';
+    else if (inRange) cls += ' bg-brand-05/20 text-text-1';
+    return cls;
+  }
+
+  const NAV_BTN =
+    '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';
 </script>
 
-<div class="drp-root">
-  <button
-    bind:this={triggerEl}
-    type="button"
-    class="btn dp-trigger"
-    aria-haspopup="dialog"
-    aria-expanded={open}
-    aria-controls={open ? dlgId : undefined}
-    {disabled}
-    onclick={() => { if (open) { open = false; picking = null; } else open = true; }}
-  >
+<div class="relative inline-block" bind:this={triggerEl}>
+  <Button variant="ghost" aria-haspopup="dialog" aria-expanded={open} aria-controls={open ? dlgId : undefined} disabled={disabled} onclick={() => { if (open) { open = false; picking = null; } else open = true; }}>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
       <rect x="1" y="2" width="12" height="11" rx="1.5" />
       <path d="M1 6h12M4 1v2M10 1v2" />
     </svg>
     {formatRange() ?? placeholder}
-  </button>
+  </Button>
 
   {#if open}
-    <!-- svelte-ignore a11y_no_noninteractive_element_interactions - dialog uses keyboard listener for Escape -->
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
     <div
       id={dlgId}
       bind:this={dlgEl}
       role="dialog"
       aria-modal="true"
       aria-label="Select date range"
-      tabindex="-1"
-      class="drp-cal"
+      tabindex={-1}
+      class="absolute left-0 top-[calc(100%+4px)] z-[9100] rounded-lg border border-border-3 bg-bg-2 p-2 shadow-[0_8px_24px_rgba(0,0,0,0.5)]"
       onkeydown={(e) => {
-        if (e.key === 'Escape') { e.preventDefault(); open = false; picking = null; triggerEl?.focus(); }
+        if (e.key === 'Escape') { e.preventDefault(); open = false; picking = null; }
       }}
     >
-      <div class="drp-months">
+      <div class="flex gap-3">
         <!-- Left calendar -->
-        <div class="drp-month">
-          <div class="dp-header">
-            <button type="button" class="dp-nav" onclick={prevMonth} aria-label="Previous month">
+        <div>
+          <div class="flex items-center justify-between px-1 py-1">
+            <button type="button" class={NAV_BTN} onclick={prevMonth} aria-label="Previous month">
               <svg width="8" height="12" viewBox="0 0 8 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
                 <path d="M7 1L2 6l5 5" />
               </svg>
             </button>
-            <span class="dp-month-label" aria-live="polite">{MONTHS[viewMonth]} {viewYear}</span>
-            <span style="width:28px;display:inline-block;" aria-hidden="true"></span>
+            <span class="text-13 font-medium text-text-1" aria-live="polite">{MONTHS[viewMonth]} {viewYear}</span>
+            <span class="inline-block w-7" aria-hidden="true"></span>
           </div>
-          <table role="grid" class="dp-grid" aria-label="{MONTHS[viewMonth]} {viewYear}">
+          <table role="grid" class="mt-1 border-collapse" aria-label={`${MONTHS[viewMonth]} ${viewYear}`}>
             <thead>
-              <tr>{#each DAYS as d}<th scope="col" abbr={d}>{d}</th>{/each}</tr>
+              <tr>{#each DAYS as d}<th scope="col" abbr={d} class="p-0 text-center text-11 font-semibold uppercase tracking-[0.05em] text-text-4">{d}</th>{/each}</tr>
             </thead>
             <tbody>
               {#each Array(6) as _, row}
@@ -189,10 +196,10 @@
                     {@const start = isStart(day)}
                     {@const end = isEnd(day)}
                     {@const inRange = isInRange(day)}
-                    <td role="gridcell" aria-selected={start || end}>
+                    <td role="gridcell" aria-selected={start || end} class="p-0">
                       <button
                         type="button"
-                        class="dp-day{outside ? ' dp-day--outside' : ''}{isTodayDay && !start && !end ? ' dp-day--today' : ''}{start ? ' dp-day--start' : ''}{end ? ' dp-day--end' : ''}{inRange ? ' dp-day--in-range' : ''}"
+                        class={dayCls(outside, isTodayDay, start, end, inRange)}
                         aria-label={day.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })}
                         onclick={() => handleDayClick(day)}
                         onmouseenter={() => { if (picking) hoverDate = day; }}
@@ -206,19 +213,19 @@
           </table>
         </div>
         <!-- Right calendar -->
-        <div class="drp-month">
-          <div class="dp-header">
-            <span style="width:28px;display:inline-block;" aria-hidden="true"></span>
-            <span class="dp-month-label" aria-live="polite">{MONTHS[rightMonth]} {rightYear}</span>
-            <button type="button" class="dp-nav" onclick={nextMonth} aria-label="Next month">
+        <div>
+          <div class="flex items-center justify-between px-1 py-1">
+            <span class="inline-block w-7" aria-hidden="true"></span>
+            <span class="text-13 font-medium text-text-1" aria-live="polite">{MONTHS[rightMonth]} {rightYear}</span>
+            <button type="button" class={NAV_BTN} onclick={nextMonth} aria-label="Next month">
               <svg width="8" height="12" viewBox="0 0 8 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
                 <path d="M1 1l5 5-5 5" />
               </svg>
             </button>
           </div>
-          <table role="grid" class="dp-grid" aria-label="{MONTHS[rightMonth]} {rightYear}">
+          <table role="grid" class="mt-1 border-collapse" aria-label={`${MONTHS[rightMonth]} ${rightYear}`}>
             <thead>
-              <tr>{#each DAYS as d}<th scope="col" abbr={d}>{d}</th>{/each}</tr>
+              <tr>{#each DAYS as d}<th scope="col" abbr={d} class="p-0 text-center text-11 font-semibold uppercase tracking-[0.05em] text-text-4">{d}</th>{/each}</tr>
             </thead>
             <tbody>
               {#each Array(6) as _, row}
@@ -231,10 +238,10 @@
                     {@const start = isStart(day)}
                     {@const end = isEnd(day)}
                     {@const inRange = isInRange(day)}
-                    <td role="gridcell" aria-selected={start || end}>
+                    <td role="gridcell" aria-selected={start || end} class="p-0">
                       <button
                         type="button"
-                        class="dp-day{outside ? ' dp-day--outside' : ''}{isTodayDay && !start && !end ? ' dp-day--today' : ''}{start ? ' dp-day--start' : ''}{end ? ' dp-day--end' : ''}{inRange ? ' dp-day--in-range' : ''}"
+                        class={dayCls(outside, isTodayDay, start, end, inRange)}
                         aria-label={day.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })}
                         onclick={() => handleDayClick(day)}
                         onmouseenter={() => { if (picking) hoverDate = day; }}
@@ -249,7 +256,7 @@
         </div>
       </div>
       {#if picking}
-        <p class="drp-hint" aria-live="polite">Pick the end date</p>
+        <p class="mt-2 px-1 text-12 text-status-info" aria-live="polite">Pick the end date</p>
       {/if}
     </div>
   {/if}

package/src/lib/components/Delta.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  interface Props {
+    dir: 'up' | 'down' | 'flat';
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { dir, class: className = '', children }: Props = $props();
+
+  let deltaClass = $derived(dir === 'flat' ? '' : `delta-${dir}`);
+  let merged = $derived(`${deltaClass} ${className}`.trim());
+</script>
+
+<!--
+  Trend indicator span used inside <Submeta> or any inline copy where a delta
+  needs to be colour-coded (success when up, danger when down, neutral when
+  flat). Emits a visually-hidden "Trend: " prefix so screen readers announce
+  the direction independent of any arrow glyph supplied by the caller. Typed
+  equivalent of `<span class="delta-up | delta-down">` from
+  @w5-ui/tokens/dashboard.css.
+-->
+<span class="sr-only">Trend: </span>
+<span class={merged || undefined}>
+  {@render children?.()}
+</span>

package/src/lib/components/Display1.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<!--
+  Display-1 - the 64 px / bold / --lh-tight / --tracking-display
+  (-0.02em) rhythm reserved for onboarding splashes and marketing
+  heroes (the top of the type scale, one step above the 48 px
+  <Display2>). Renders <h1 class="dash-ui-display-1"> so the
+  .dash-ui-display-1 rule in @w5-ui/tokens/tokens.css pins the canonical
+  size, weight, line-height, letter-spacing, and --text-1 colour. Stops
+  userland reaching for an ad-hoc <h1 style="font-size: 64px"> that
+  almost always forgets --lh-tight (1.1) and the negative tracking,
+  which is the documented "headings break awkwardly across two lines"
+  drift in Foundations / Type. Typed equivalent of
+  <h1 class="dash-ui-display-1"> (the userland-facing semantic class
+  documented in Foundations / Type). Use for onboarding splashes or
+  large marketing heroes. In-app pages should reach for <PageHeader>
+  (page title) and <H2> (section heads); never substitute <Display1>
+  for an in-app screen - its 64 px rhythm dwarfs dashboard chrome.
+-->
+<h1 class="dash-ui-display-1 {className}">
+  {@render children?.()}
+</h1>

package/src/lib/components/Display2.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<!--
+  Display-2 - the 48 px / bold / --lh-tight / --tracking-display
+  (-0.02em) rhythm used for login and large marketing surfaces (the
+  step below the 64 px Display-1 hero). Renders
+  <h1 class="dash-ui-display-2"> so the .dash-ui-display-2 rule in
+  @w5-ui/tokens/tokens.css pins the canonical size, weight, line-
+  height, letter-spacing, and --text-1 colour. Stops userland reaching
+  for an ad-hoc <h1 style="font-size: 48px"> that almost always
+  forgets --lh-tight (1.1) and the negative tracking, which is the
+  documented "headings break awkwardly across two lines" drift in
+  Foundations / Type. Typed equivalent of <h1 class="dash-ui-display-2">
+  (the userland-facing semantic class documented in Foundations /
+  Type). Use for login-page titles or large marketing heroes one step
+  down from <Display1>. In-app pages should reach for <PageHeader>
+  (page title) and <H2> (section heads); never substitute <Display2>
+  for an in-app screen - its 48 px rhythm dominates dashboard chrome.
+-->
+<h1 class="dash-ui-display-2 {className}">
+  {@render children?.()}
+</h1>

package/src/lib/components/Drawer.svelte

@@ -44,24 +44,25 @@
 <svelte:window onkeydown={onKeydown} />
 
 <div
-  class="drawer-overlay {open ? 'show' : ''}"
+  class="fixed inset-0 z-[60] bg-black/40 {open ? 'block' : 'hidden'}"
   onclick={() => (open = false)}
   aria-hidden="true"
   role="presentation"
 ></div>
 <div
   bind:this={panelEl}
-  class="drawer-panel {open ? 'show' : ''}"
+  class="fixed right-0 top-0 z-[61] flex h-full w-[380px] max-w-[90vw] flex-col border-l border-border-2 bg-bg-1 transition-transform duration-200 ease-out [box-shadow:-24px_0_64px_rgba(0,0,0,0.6)]
+    {open ? 'translate-x-0' : 'translate-x-full'}"
   role="dialog"
   aria-modal="true"
   aria-labelledby={titleId}
   tabindex="-1"
 >
-  <div class="drawer-h">
-    <h2 id={titleId}>{title}</h2>
+  <div class="flex shrink-0 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="drawer-b">{@render children?.()}</div>
+  <div class="flex-1 overflow-y-auto px-5 py-4">{@render children?.()}</div>
 </div>

package/src/lib/components/DurationInput.svelte

@@ -3,8 +3,6 @@
 </script>
 
 <script lang="ts">
-  
-
   interface Props {
     label?: string | undefined;
     value?: number;
@@ -39,7 +37,9 @@
 
   let [hours, minutes, seconds] = $derived(toHMS(value));
 
-  let inputs: [HTMLInputElement | null, HTMLInputElement | null, HTMLInputElement | null] = $state([null, null, null]);
+  let inputs: [HTMLInputElement | null, HTMLInputElement | null, HTMLInputElement | null] = $state([
+    null, null, null,
+  ]);
 
   function focusAt(i: number) {
     const el = inputs[i];
@@ -91,13 +91,21 @@
 
   let fieldVals = $derived([hours, minutes, seconds]);
   let fieldMaxes = $derived([maxHours, 59, 59]);
+
+  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="dur-input-wrapper {className}">
+<div class={className}>
   {#if label}
-    <label for="{uid}-h" class="dur-input__label">{label}</label>
+    <label for="{uid}-h" class="text-12 text-text-4">{label}</label>
   {/if}
-  <div class="dur-input{disabled ? ' dur-input--disabled' : ''}" role="group" aria-label={label ?? 'Duration'}>
+  <div
+    role="group"
+    aria-label={label ?? 'Duration'}
+    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"
+  >
     {#each FIELDS as { idx, ariaLabel }, i}
       <input
         bind:this={inputs[idx]}
@@ -114,13 +122,13 @@
         value={pad(fieldVals[idx])}
         {disabled}
         maxlength={2}
-        class="dur-input__field"
+        class={FIELD_CLS}
         oninput={(e) => handleInput(idx, e)}
         onkeydown={(e) => handleKey(idx, e)}
         onfocus={(e) => e.currentTarget.select()}
       />
       {#if i < 2}
-        <span class="dur-input__sep" aria-hidden="true">:</span>
+        <span aria-hidden="true" class="select-none text-13 leading-none text-text-4">:</span>
       {/if}
     {/each}
   </div>

package/src/lib/components/EmptyState.svelte

@@ -10,22 +10,31 @@
     title,
     description = undefined,
     class: className = '',
-    action
+    action,
   }: Props = $props();
-  
 </script>
 
-<div role="status" aria-live="polite" class="empty-state {className}">
-  <svg class="empty-state__icon" viewBox="0 0 48 48" fill="none" aria-hidden="true" focusable="false">
+<div
+  role="status"
+  aria-live="polite"
+  class="flex flex-col items-center justify-center gap-2.5 px-6 py-12 text-center {className}"
+>
+  <svg
+    class="h-12 w-12 shrink-0 text-border-3"
+    viewBox="0 0 48 48"
+    fill="none"
+    aria-hidden="true"
+    focusable="false"
+  >
     <rect x="6" y="11" width="36" height="28" rx="4" stroke="currentColor" stroke-width="1.5"/>
     <path d="M6 30h10l3 5h10l3-5h10" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
     <path d="M15 20h18M15 25h12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity=".4"/>
   </svg>
-  <p class="empty-state__title">{title}</p>
+  <p class="m-0 text-14 font-medium text-text-3">{title}</p>
   {#if description}
-    <p class="empty-state__desc">{description}</p>
+    <p class="m-0 max-w-[280px] text-12 leading-[1.5] text-text-4">{description}</p>
   {/if}
   {#if action}
-    <div class="empty-state__action">{@render action?.()}</div>
+    <div class="mt-1.5">{@render action?.()}</div>
   {/if}
 </div>

package/src/lib/components/ExpandableRow.svelte

@@ -6,35 +6,29 @@
     detail?: import('svelte').Snippet;
   }
 
-  let {
-    colSpan,
-    defaultExpanded = false,
-    row,
-    detail
-  }: Props = $props();
+  let { colSpan, defaultExpanded = false, row, detail }: Props = $props();
 
   // svelte-ignore state_referenced_locally
   let open = $state(defaultExpanded);
   const detailId = `exp-${Math.random().toString(36).slice(2, 9)}`;
 </script>
 
-<tbody class="exp-tbody">
-  <tr class="exp-row">
-    <td class="exp-toggle-cell">
+<tbody>
+  <tr>
+    <td class="w-8 px-1">
       <button
         type="button"
-        class="exp-toggle"
         aria-expanded={open}
         aria-controls={detailId}
         aria-label={open ? 'Collapse row' : 'Expand row'}
+        class="inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded border-0 bg-transparent p-0 text-text-4 transition-colors duration-100 hover:text-text-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
         onclick={() => (open = !open)}
       >
         <svg
-          class="exp-chevron"
-          class:exp-chevron--open={open}
           viewBox="0 0 10 6"
           fill="none"
           aria-hidden="true"
+          class="h-1.5 w-2.5 transition-transform duration-100 motion-reduce:transition-none {open ? 'rotate-180' : ''}"
         >
           <path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
         </svg>
@@ -44,11 +38,10 @@
   </tr>
   <tr
     id={detailId}
-    class="exp-detail"
-    class:exp-detail--open={open}
     aria-hidden={!open}
+    class="{open ? 'table-row' : 'hidden'}"
   >
-    <td colspan={colSpan + 1} class="exp-detail-cell">
+    <td colspan={colSpan + 1} class="border-b border-border-1 bg-divider pb-3 pl-9 pr-3 pt-2">
       {@render detail?.()}
     </td>
   </tr>

package/src/lib/components/Eyebrow.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<!--
+  Uppercase, tracked overline used as a section eyebrow / category tag
+  above a heading or beside a primary label. Renders
+  <span class="dash-ui-eyebrow"> so the .dash-ui-eyebrow rule in
+  @w5-ui/tokens/css applies the canonical 11 px / semibold weight,
+  0.08em letter-spacing, uppercase text-transform and the muted
+  --text-3 colour. Stops userland reaching for a one-off
+  text-transform: uppercase + letter-spacing + font-size: 11px trio
+  on every overline. Typed equivalent of
+  <span class="dash-ui-eyebrow"> (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="dash-ui-eyebrow {className}">
+  {@render children?.()}
+</span>

package/src/lib/components/Field.svelte

@@ -20,7 +20,7 @@
     error = undefined,
     required = false,
     hint = undefined,
-    children
+    children,
   }: Props = $props();
   // svelte-ignore state_referenced_locally
   const inputId = id ?? `dash-ui-field-${++counter}`;
@@ -29,18 +29,18 @@
   let describedBy = $derived([hintId, errorId].filter(Boolean).join(' ') || undefined);
 </script>
 
-<div class="field">
-  <label for={inputId}>
-    {label}{#if required}<span class="req" aria-hidden="true"> *</span>{/if}
+<div class="mb-3 flex flex-col gap-1.5">
+  <label for={inputId} class="text-12 font-medium text-text-3">
+    {label}{#if required}<span class="text-status-danger" aria-hidden="true"> *</span>{/if}
   </label>
   {#if hint}
-    <div class="field-hint" id={hintId}>{hint}</div>
+    <div class="text-12 text-text-3" id={hintId}>{hint}</div>
   {/if}
   {#if children}
     {@render children?.()}
   {:else}
     <input
-      class="input"
+      class="h-[34px] w-full rounded-md border border-border-2 bg-bg-page px-3 text-13 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)]"
       id={inputId}
       bind:value
       {required}
@@ -49,6 +49,6 @@
     />
   {/if}
   {#if error}
-    <div class="field-error" id={errorId} role="alert">{error}</div>
+    <div class="text-12 text-status-danger" id={errorId} role="alert">{error}</div>
   {/if}
 </div>