@w5-ui/svelte 0.2.1 → 0.3.0

package/src/lib/components/Spinner.svelte

@@ -5,6 +5,21 @@
   }
 
   let { size = 'md', label = 'Loading' }: Props = $props();
+
+  // Pre-compose so Tailwind's scanner picks up every variant. Tailwind's
+  // `animate-spin` is `animation: spin 1s linear infinite` (rotate 360deg);
+  // dashboard.css used 0.65s — we mirror that with arbitrary-value
+  // `[animation-duration:0.65s]` to stay pixel-equivalent.
+  const SIZE: Record<NonNullable<Props['size']>, string> = {
+    sm: 'h-2.5 w-2.5 border-[1.5px]',
+    md: 'h-3.5 w-3.5 border-2',
+    lg: 'h-5 w-5 border-2',
+  };
 </script>
 
-<span role="status" aria-label={label} class="spinner {size}"></span>
+<span
+  role="status"
+  aria-label={label}
+  class="inline-block shrink-0 animate-spin rounded-full border-border-3 border-t-current [animation-duration:0.65s] motion-reduce:[animation-duration:10s]
+    {SIZE[size]}"
+></span>

package/src/lib/components/SplitButton.svelte

@@ -1,6 +1,10 @@
 <script module lang="ts">
   let counter = 0;
-  export interface SplitButtonItem { id: string; label: string; disabled?: boolean; }
+  export interface SplitButtonItem {
+    id: string;
+    label: string;
+    disabled?: boolean;
+  }
 </script>
 
 <script lang="ts">
@@ -70,24 +74,34 @@
 
   onMount(() => document.addEventListener('mousedown', handleOutside));
   onDestroy(() => document.removeEventListener('mousedown', handleOutside));
+
+  // Pre-composed variant chrome so Tailwind's static scanner sees the literals.
+  const VARIANT: Record<NonNullable<Props['variant']>, string> = {
+    primary: 'bg-brand-05 text-white hover:bg-brand-06 border-brand-05',
+    ghost: 'bg-transparent text-text-2 border-border-2 hover:bg-row-hover hover:text-text-1',
+    danger: 'bg-transparent text-status-danger border-status-danger/30',
+  };
+  // Shared button base — same metrics as the migrated Button.
+  const BTN_BASE =
+    'inline-flex h-[30px] cursor-pointer items-center gap-1.5 whitespace-nowrap border px-3 text-13 font-medium transition-all duration-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05 disabled:cursor-not-allowed disabled:opacity-55';
 </script>
 
-<div class="split-btn" bind:this={wrapperEl}>
+<div class="relative inline-flex items-stretch" bind:this={wrapperEl}>
   <button
     type="button"
-    class="btn btn-{variant} split-btn-primary"
     {disabled}
+    class="{BTN_BASE} {VARIANT[variant]} rounded-l-md border-r-0 rounded-r-none"
     onclick={() => onprimary?.()}
   >{label}</button>
   <button
     bind:this={caretEl}
     type="button"
-    class="btn btn-{variant} split-btn-caret"
     {disabled}
-    aria-label="{label} options"
+    aria-label={`${label} options`}
     aria-haspopup="menu"
     aria-expanded={open}
     aria-controls={open ? menuId : undefined}
+    class="{BTN_BASE} {VARIANT[variant]} w-[26px] shrink-0 justify-center rounded-r-md rounded-l-none px-0 border-l border-l-white/15"
     onclick={toggleMenu}
     onkeydown={onKeyDown}
   >
@@ -96,14 +110,19 @@
     </svg>
   </button>
   {#if open}
-    <ul id={menuId} role="menu" aria-label="{label} options" class="action-menu">
+    <ul
+      id={menuId}
+      role="menu"
+      aria-label={`${label} options`}
+      class="absolute right-0 top-[calc(100%+4px)] z-[9100] m-0 min-w-[148px] list-none rounded-lg border border-border-3 bg-bg-2 p-1 shadow-[0_8px_24px_rgba(0,0,0,0.5)]"
+    >
       {#each items as item, idx (item.id)}
         <li
           role="menuitem"
-          tabindex="-1"
+          tabindex={-1}
           aria-disabled={item.disabled}
           data-active={idx === activeIdx ? 'true' : undefined}
-          class="action-menu-item"
+          class="flex cursor-pointer items-center 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-disabled:cursor-not-allowed aria-disabled:opacity-40"
           onmouseenter={() => { activeIdx = idx; }}
           onmousedown={(e) => { e.preventDefault(); (() => { if (!item.disabled) activate(item.id); })(); }}
         >{item.label}</li>

package/src/lib/components/Spoiler.svelte

@@ -14,9 +14,8 @@
     showLabel = 'Show more',
     hideLabel = 'Show less',
     class: klass = '',
-    children
+    children,
   }: Props = $props();
-  
 
   let expanded = $state(false);
   let clipped = $state(false);
@@ -27,8 +26,8 @@
   });
 </script>
 
-<div class="spoiler {klass}">
-  <div class="spoiler-outer" style="position:relative">
+<div class="flex flex-col {klass}">
+  <div class="relative">
     <div
       bind:this={bodyEl}
       style={!expanded && clipped ? `max-height:${maxHeight}px;overflow:hidden` : undefined}
@@ -36,14 +35,17 @@
       {@render children?.()}
     </div>
     {#if !expanded && clipped}
-      <div class="spoiler-fade" aria-hidden="true"></div>
+      <div
+        class="pointer-events-none absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-b from-transparent to-[#1a1d23]"
+        aria-hidden="true"
+      ></div>
     {/if}
   </div>
   {#if clipped}
     <button
       type="button"
-      class="spoiler-toggle"
       aria-expanded={expanded}
+      class="mt-1 inline-flex items-center border-0 bg-transparent px-0 py-1 text-12 leading-none text-brand-05 cursor-pointer hover:text-status-info focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
       onclick={() => (expanded = !expanded)}
     >
       {expanded ? hideLabel : showLabel}

package/src/lib/components/SrOnly.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<!--
+  Visually-hidden text that stays available to assistive tech. Renders a
+  <span class="sr-only"> so the .sr-only rule in @w5-ui/tokens/dashboard.css
+  clips it from the visual layout while keeping it announceable by screen
+  readers. Use it to name regions that the design intentionally leaves
+  unlabelled, the way the reference Tables recipe wires
+  <caption class="sr-only"> onto every <table> (WCAG 1.3.1). Typed equivalent
+  of <span class="sr-only"> (apply the class directly to a <caption> /
+  <label> when the whole element is the hidden text, or wrap an inline
+  phrase with <SrOnly> when it sits alongside visible markup).
+-->
+<span class="sr-only {className}">
+  {@render children?.()}
+</span>

package/src/lib/components/StackedProgress.svelte

@@ -18,25 +18,33 @@
     segments,
     total = undefined,
     ariaLabel = undefined,
-    showLegend = true
+    showLegend = true,
   }: Props = $props();
   let sum = $derived(total ?? segments.reduce((a, s) => a + s.value, 0));
-  let text = $derived(ariaLabel ?? segments.map((s) => `${s.label} ${Math.round((s.value / sum) * 100)}%`).join(', '));
+  let text = $derived(
+    ariaLabel ?? segments.map((s) => `${s.label} ${Math.round((s.value / sum) * 100)}%`).join(', '),
+  );
 </script>
 
-<div class="sp" role="img" aria-label={text}>
-  <div class="sp-bar" aria-hidden="true">
+<div class="flex w-full flex-col gap-2" role="img" aria-label={text}>
+  <div
+    class="flex h-2 w-full overflow-hidden rounded-sm bg-row-active"
+    aria-hidden="true"
+  >
     {#each segments as { label, value, color }}
-      <div class="sp-seg" style="width:{((value / sum) * 100).toFixed(2)}%;background:{color}"></div>
+      <div
+        class="h-full first:rounded-l-sm last:rounded-r-sm"
+        style="width:{((value / sum) * 100).toFixed(2)}%;background:{color}"
+      ></div>
     {/each}
   </div>
   {#if showLegend}
-    <div class="sp-legend" aria-hidden="true">
+    <div class="flex flex-wrap items-center gap-3" aria-hidden="true">
       {#each segments as { label, value, color }}
-        <span class="sp-item">
-          <span class="sp-dot" style="background:{color}"></span>
+        <span class="inline-flex items-center gap-1.5 text-12 text-text-2">
+          <span class="inline-block h-2 w-2 shrink-0 rounded-full" style="background:{color}"></span>
           {label}
-          <span class="sp-pct">{Math.round((value / sum) * 100)}%</span>
+          <span class="text-text-4 tabular-nums">{Math.round((value / sum) * 100)}%</span>
         </span>
       {/each}
     </div>

package/src/lib/components/StarRating.svelte

@@ -18,7 +18,7 @@
     max = 5,
     readOnly = false,
     size = 'md',
-    onChange = undefined
+    onChange = undefined,
   }: Props = $props();
 
   const gid = `dash-ui-sr-${++counter}`;
@@ -28,31 +28,48 @@
     value = star;
     onChange?.(star);
   }
+
+  const STAR_SIZE: Record<NonNullable<Props['size']>, string> = {
+    sm: 'h-[15px] w-[15px]',
+    md: 'h-5 w-5',
+  };
 </script>
 
 {#if readOnly}
   <span
-    class="star-rating{size === 'sm' ? ' star-rating--sm' : ''} star-rating--readonly"
+    class="m-0 inline-flex items-center gap-0.5 border-0 bg-transparent p-0"
     role="img"
-    aria-label="{value} out of {max} stars"
+    aria-label={`${value} out of ${max} stars`}
   >
     {#each Array(max) as _, i}
-      <span class="star-icon{i < value ? ' star-icon--on' : ''}" aria-hidden="true">
-        <svg viewBox="0 0 24 24" fill={i < value ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="1.5" aria-hidden="true" focusable="false">
+      {@const on = i < value}
+      <span
+        aria-hidden="true"
+        class="flex items-center {on ? 'text-status-warning' : 'text-white/[0.18]'}"
+      >
+        <svg
+          class={STAR_SIZE[size]}
+          viewBox="0 0 24 24"
+          fill={on ? 'currentColor' : 'none'}
+          stroke="currentColor"
+          stroke-width="1.5"
+          aria-hidden="true"
+          focusable="false"
+        >
           <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" />
         </svg>
       </span>
     {/each}
   </span>
 {:else}
-  <fieldset class="star-rating{size === 'sm' ? ' star-rating--sm' : ''}">
+  <fieldset class="m-0 inline-flex items-center gap-0.5 border-0 bg-transparent p-0">
     <legend class="sr-only">{label}</legend>
     {#each Array(max) as _, i}
       {@const star = i + 1}
       {@const on = star <= (hovered || value)}
       <label
         for="{gid}-{star}"
-        class="star-label{on ? ' star-label--on' : ''}"
+        class="group/star relative flex cursor-pointer items-center rounded-sm p-px transition-colors duration-100 {on ? 'text-status-warning' : 'text-white/[0.18]'} has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-brand-05"
         onmouseenter={() => (hovered = star)}
         onmouseleave={() => (hovered = 0)}
       >
@@ -62,11 +79,19 @@
           name={gid}
           value={String(star)}
           checked={value === star}
-          class="star-radio"
-          aria-label="{star} out of {max}"
+          class="sr-only"
+          aria-label={`${star} out of ${max}`}
           onchange={() => pick(star)}
         />
-        <svg viewBox="0 0 24 24" fill={on ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="1.5" aria-hidden="true" focusable="false">
+        <svg
+          class={STAR_SIZE[size]}
+          viewBox="0 0 24 24"
+          fill={on ? 'currentColor' : 'none'}
+          stroke="currentColor"
+          stroke-width="1.5"
+          aria-hidden="true"
+          focusable="false"
+        >
           <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" />
         </svg>
       </label>

package/src/lib/components/Stat.svelte

@@ -29,18 +29,32 @@
   }: Props = $props();
 
   let deltaClass = $derived(
-    deltaDir === 'up' ? 'delta-up' : deltaDir === 'down' ? 'delta-down' : '',
+    deltaDir === 'up'
+      ? 'text-status-success'
+      : deltaDir === 'down'
+        ? 'text-status-danger'
+        : '',
   );
 </script>
 
 <Card {span}>
+  <!--
+    `.card h3` rules in dashboard.css still target this <h3> for now;
+    leaving them there until every Card consumer migrates its heading
+    too. Stat's value + submeta are Tailwind utilities below.
+  -->
   <h3>{label}</h3>
-  <div class="stat" style={color ? `color:${color};` : ''}>
-    {#if valueSlot}{@render valueSlot()}{:else}{value}{/if}{#if unit}<span class="unit">{unit}</span>{/if}
+  <div
+    class="text-[28px] font-semibold leading-[1.05] tracking-[-0.01em] tabular-nums text-text-1"
+    style={color ? `color:${color};` : ''}
+  >
+    {#if valueSlot}{@render valueSlot()}{:else}{value}{/if}{#if unit}<span
+        class="ml-1 text-13 font-normal text-text-4"
+      >{unit}</span>{/if}
   </div>
   {#if sub || delta}
-    <div class="submeta">
-      {#if sub}{sub}{/if}{#if sub && delta} · {/if}{#if delta}<span class="sr-only">Trend: </span><span class={deltaClass}>{delta}</span>{/if}
+    <div class="text-[11px] tabular-nums text-text-4">
+      {#if sub}{sub}{/if}{#if sub && delta} \u00b7 {/if}{#if delta}<span class="sr-only">Trend: </span><span class={deltaClass}>{delta}</span>{/if}
     </div>
   {/if}
 </Card>

package/src/lib/components/StatNumber.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<!--
+  Hero-number row inside a <Card>: the big tabular-nums value (optionally
+  followed by a trailing <Unit>). Renders a <div class="stat"> so the .stat
+  rule in @w5-ui/tokens/dashboard.css sets the canonical 30 px size, semibold
+  weight, tabular figures, and primary text colour. Stops userland reaching
+  for inline font-size / font-weight overrides on bare numbers. Pair with
+  <Unit> for the suffix label and <Submeta> for the muted line underneath;
+  <Stat> already wires all three internally, so reach for <StatNumber> when
+  you compose .stat by hand (e.g. number above a chart inside a <Card>).
+-->
+<div class="stat {className}">
+  {@render children?.()}
+</div>

package/src/lib/components/StatusIndicator.svelte

@@ -8,7 +8,14 @@
   let { color, text, textColor = undefined }: Props = $props();
 </script>
 
-<span style="display:inline-flex;align-items:center;gap:6px;color:{textColor ?? color};font-size:12px;">
-  <span aria-hidden="true" style="width:6px;height:6px;border-radius:50%;background:{color};"></span>
+<span
+  class="inline-flex items-center gap-1.5 text-12"
+  style="color:{textColor ?? color};"
+>
+  <span
+    class="h-1.5 w-1.5 rounded-full"
+    aria-hidden="true"
+    style="background:{color};"
+  ></span>
   {text}
 </span>

package/src/lib/components/StatusRing.svelte

@@ -0,0 +1,36 @@
+<script module lang="ts">
+  export type StatusRingStatus = 'ok' | 'warn' | 'danger' | 'neutral';
+</script>
+
+<script lang="ts">
+  interface Props {
+    class?: string;
+    style?: string;
+    /** Health colour of the ring. Defaults to `'ok'` (success green). */
+    status?: StatusRingStatus;
+  }
+
+  let { class: className = '', style = '', status = 'ok' }: Props = $props();
+
+  const MODIFIER: Record<StatusRingStatus, string> = {
+    ok: '',
+    warn: 'status-ring--warn',
+    danger: 'status-ring--danger',
+    neutral: 'status-ring--neutral',
+  };
+  let modifier = $derived(MODIFIER[status]);
+</script>
+
+<!--
+  Pulsing status indicator: a soft translucent ring around a solid coloured
+  inner dot. Renders <span aria-hidden class="status-ring"> so the .status-ring
+  rule in @w5-ui/tokens/dashboard.css paints the canonical 18 px ring + 8 px
+  inner dot without userland having to hand-roll the two layers. The `status`
+  prop swaps the ring + dot colour: 'ok' (default, success green), 'warn'
+  (amber), 'danger' (red), 'neutral' (grey). Used by <Topbar> next to the site
+  name to signal site health; also suitable for tunnel / session / device
+  tiles where a small live-state dot sits at the leading edge of a row.
+  Decorative — the typed wrapper sets aria-hidden; pair with a label so
+  screen readers announce the state.
+-->
+<span aria-hidden="true" class="status-ring {modifier} {className}" {style}></span>

package/src/lib/components/Stepper.svelte

@@ -13,19 +13,41 @@
   }
 
   let { steps, active, class: className = '' }: Props = $props();
-  
+  let activeIdx = $derived(steps.findIndex((s) => s.id === active));
 
-  let activeIdx = $derived(steps.findIndex(s => s.id === active));
+  // Per-state ramp:
+  //   - num circle: ring + bg + text colour
+  //   - label: colour + weight
+  //   - connector line (::before via Tailwind arbitrary): bg colour
+  const NUM: Record<'active' | 'done' | 'upcoming', string> = {
+    active: 'border-brand-05 bg-brand-05 text-white',
+    done: 'border-brand-05 bg-brand-05/[0.18] text-status-info',
+    upcoming: 'border-bg-3 bg-bg-1 text-text-4',
+  };
+  const LABEL: Record<'active' | 'done' | 'upcoming', string> = {
+    active: 'text-text-1 font-medium',
+    done: 'text-status-info',
+    upcoming: 'text-text-4',
+  };
+  // Connector tail to the left, drawn from item to item.
+  const TAIL: Record<'active' | 'done' | 'upcoming', string> = {
+    active: 'before:bg-brand-05',
+    done: 'before:bg-brand-05',
+    upcoming: 'before:bg-bg-3',
+  };
 </script>
 
-<nav aria-label="Progress" class="stepper {className}">
-  <ol class="stepper__list">
+<nav aria-label="Progress" class="w-full {className}">
+  <ol class="m-0 flex list-none items-start p-0">
     {#each steps as step, idx}
       {@const isActive = step.id === active}
       {@const isDone = idx < activeIdx}
-      {@const state = isActive ? 'active' : isDone ? 'done' : 'upcoming'}
-      <li class="stepper__item stepper__item--{state}">
-        <span class="stepper__num" aria-hidden="true">
+      {@const state = (isActive ? 'active' : isDone ? 'done' : 'upcoming') as 'active' | 'done' | 'upcoming'}
+      <li class="relative flex flex-1 flex-col items-center gap-1.5 [&:not(:first-child)]:before:absolute [&:not(:first-child)]:before:left-[-50%] [&:not(:first-child)]:before:right-1/2 [&:not(:first-child)]:before:top-[13px] [&:not(:first-child)]:before:h-px [&:not(:first-child)]:before:content-[''] {TAIL[state]}">
+        <span
+          class="relative z-10 flex h-[26px] w-[26px] shrink-0 items-center justify-center rounded-full border-[1.5px] text-11 font-semibold {NUM[state]}"
+          aria-hidden="true"
+        >
           {#if isDone}
             <svg viewBox="0 0 12 12" width="12" height="12" fill="none">
               <path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
@@ -35,7 +57,7 @@
           {/if}
         </span>
         {#if isDone}<span class="sr-only">completed: </span>{/if}
-        <span class="stepper__label" aria-current={isActive ? 'step' : undefined}>
+        <span class="text-center text-11 leading-[1.3] {LABEL[state]}" aria-current={isActive ? 'step' : undefined}>
           {step.label}
         </span>
       </li>

package/src/lib/components/Submeta.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<!--
+  Secondary one-line caption inside a <Card> tile: the muted row that sits
+  under the headline .stat number and carries supporting metrics, deltas, or
+  status. Typed equivalent of `<div class="submeta">` from
+  @w5-ui/tokens/dashboard.css. Pair with `.delta-up` / `.delta-down` spans
+  for trend text so screen readers announce the direction.
+-->
+<div class="submeta {className}">
+  {@render children?.()}
+</div>

package/src/lib/components/SwitchPortGrid.svelte

@@ -13,7 +13,6 @@
 </script>
 
 <script lang="ts">
-  
   interface Props {
     ports?: SwitchPort[];
     columns?: number;
@@ -21,29 +20,43 @@
     onportclick?: (payload: number) => void;
   }
 
-  let { ports = [], columns = 12, ariaLabel = 'Switch port panel',
+  let {
+    ports = [],
+    columns = 12,
+    ariaLabel = 'Switch port panel',
     onportclick,
   }: Props = $props();
+
+  const STATUS_BTN: Record<SwitchPortStatus, string> = {
+    up: 'border-status-success/40 bg-status-success/[0.08] text-status-success hover:bg-status-success/15',
+    poe: 'border-status-warning/40 bg-status-warning/[0.10] text-status-warning hover:bg-status-warning/20',
+    down: 'border-border-1 bg-divider text-text-4 hover:bg-row-hover',
+  };
 </script>
 
-<ul class="spg" role="list" aria-label={ariaLabel} style="grid-template-columns: repeat({columns}, 1fr);">
+<ul
+  class="m-0 grid list-none gap-1 p-0"
+  role="list"
+  aria-label={ariaLabel}
+  style="grid-template-columns: repeat({columns}, 1fr);"
+>
   {#each ports as port, i}
     {@const n = i + 1}
     {@const desc = `Port ${n}: ${STATUS_LABEL[port.status]}${port.speed ? ` · ${port.speed}` : ''}${port.label ? ` · ${port.label}` : ''}`}
     <li>
       <button
         type="button"
-        class="spg__btn"
         data-status={port.status}
         aria-label={desc}
+        class="flex aspect-square w-full cursor-pointer flex-col items-center justify-center gap-0.5 rounded border p-1 text-11 font-medium transition-colors duration-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05 {STATUS_BTN[port.status]}"
         onclick={() => onportclick?.(i)}
       >
-        <span class="spg__num">{n}</span>
+        <span class="font-bold leading-none">{n}</span>
         {#if port.speed}
-          <span class="spg__speed--{port.status}">{port.speed}</span>
+          <span class="text-[9px] leading-none opacity-75">{port.speed}</span>
         {/if}
         {#if port.status === 'poe'}
-          <span class="spg__poe" aria-hidden="true">PoE</span>
+          <span class="text-[9px] font-bold leading-none" aria-hidden="true">PoE</span>
         {/if}
       </button>
     </li>

package/src/lib/components/TablePager.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<!--
+  Sibling row that sits directly under a <TableShell> (or
+  <div class="table-shell">) and carries the rows-per-page control on the
+  left and the <Pagination> nav on the right. Renders the canonical
+  <div class="table-pager"> markup so the flex / space-between / 12px top
+  margin from @w5-ui/tokens/dashboard.css applies and userland drops the
+  inline flex / space-between wrapper that every reference page used to ship.
+  Render as a sibling of <TableShell>, never inside it, so focus rings on the
+  pager buttons aren't clipped.
+-->
+<div class="table-pager {className}">
+  {@render children?.()}
+</div>

package/src/lib/components/TableShell.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<!--
+  Rounded, bordered wrapper for any full-width <table> on a page. Carries the
+  8px radius, --neutral-09 background, single 1px border and overflow: hidden
+  clip. Typed equivalent of `<div class="table-shell">` from
+  @w5-ui/tokens/dashboard.css. Render <Pagination> as a sibling below, not
+  inside, so focus rings aren't clipped.
+-->
+<div class="table-shell {className}">
+  {@render children?.()}
+</div>

package/src/lib/components/Tabs.svelte

@@ -3,7 +3,6 @@
 </script>
 
 <script lang="ts">
-  
   interface Props {
     items?: TabItem[];
     active: string;
@@ -11,7 +10,10 @@
     onchange?: (payload: string) => void;
   }
 
-  let { items = [], active = $bindable(), ariaLabel = undefined,
+  let {
+    items = [],
+    active = $bindable(),
+    ariaLabel = undefined,
     onchange,
   }: Props = $props();
   let buttons: (HTMLButtonElement | null)[] = $state([]);
@@ -32,12 +34,19 @@
   }
 </script>
 
-<div class="tabs" role="tablist" aria-label={ariaLabel}>
+<div
+  class="flex gap-0 overflow-x-auto border-b border-border-1 px-6"
+  role="tablist"
+  aria-label={ariaLabel}
+>
   {#each items as t, i (t.id)}
     <button
       bind:this={buttons[i]}
       type="button"
-      class="tab {t.id === active ? 'active' : ''}"
+      class="-mb-px cursor-pointer select-none whitespace-nowrap border-0 border-b-2 bg-transparent px-3.5 py-[11px] text-13 leading-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-brand-05
+        {t.id === active
+          ? 'border-b-brand-05 text-text-1'
+          : 'border-b-transparent text-text-3 hover:text-text-1'}"
       role="tab"
       id="tab-{t.id}"
       aria-selected={t.id === active}
@@ -47,7 +56,9 @@
       onkeydown={(e) => onKey(e, i)}
     >
       {t.label}
-      {#if t.badge !== undefined}<span class="badge">{t.badge}</span>{/if}
+      {#if t.badge !== undefined}
+        <span class="ml-1.5 tabular-nums text-text-4">{t.badge}</span>
+      {/if}
     </button>
   {/each}
 </div>