@w5-ui/svelte 0.2.1 → 0.4.0

package/src/lib/components/OTPInput.svelte

@@ -3,8 +3,6 @@
 </script>
 
 <script lang="ts">
-  
-
   interface Props {
     label?: string | undefined;
     length?: number;
@@ -73,16 +71,24 @@
     commit(next);
     setTimeout(() => focusAt(Math.min(text.length, length - 1)), 0);
   }
+
+  const DIGIT_CLS =
+    'h-9 w-9 rounded-md border border-border-2 bg-bg-page text-center font-mono text-15 text-text-1 outline-none transition-colors duration-100 focus:border-brand-05 focus:shadow-[0_0_0_2px_rgba(0,111,255,0.2)]';
 </script>
 
-<div class="otp-input-wrapper {className}">
+<div class={className}>
   {#if label}
-    <label for="{uid}-0" class="otp-input__label">{label}</label>
+    <label for="{uid}-0" class="text-12 text-text-4">{label}</label>
   {/if}
-  <div class="otp-input{disabled ? ' otp-input--disabled' : ''}" role="group" aria-label={label ?? 'One-time password'}>
+  <div
+    role="group"
+    aria-label={label ?? 'One-time password'}
+    data-disabled={disabled ? 'true' : undefined}
+    class="inline-flex items-center gap-1.5 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-40"
+  >
     {#each digits as d, i}
       {#if i === half}
-        <span class="otp-input__separator" aria-hidden="true">&ndash;</span>
+        <span aria-hidden="true" class="select-none text-13 text-text-4">&ndash;</span>
       {/if}
       <input
         bind:this={inputs[i]}
@@ -91,10 +97,10 @@
         inputmode="numeric"
         pattern="[0-9]*"
         maxlength={1}
-        aria-label="Digit {i + 1} of {length}"
+        aria-label={`Digit ${i + 1} of ${length}`}
         value={d}
         {disabled}
-        class="otp-input__digit"
+        class={DIGIT_CLS}
         autocomplete={i === 0 ? 'one-time-code' : 'off'}
         oninput={(e) => handleInput(i, e.currentTarget.value)}
         onkeydown={(e) => handleKey(i, e)}

package/src/lib/components/PageHeader.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  interface Props {
+    title: string;
+    sticky?: boolean;
+    class?: string;
+    actions?: import('svelte').Snippet;
+  }
+
+  let {
+    title,
+    sticky = true,
+    class: className = '',
+    actions,
+  }: Props = $props();
+</script>
+
+<div
+  class="ph-bar {className}"
+  style={sticky ? undefined : 'position: static'}
+>
+  <h2 class="ph-title">{title}</h2>
+  {#if actions}
+    <div class="ph-actions">{@render actions?.()}</div>
+  {/if}
+</div>

package/src/lib/components/Pagination.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  
-
   interface Props {
     page?: number;
     pageSize?: number;
@@ -8,9 +6,8 @@
     onchange?: (payload: number) => void;
   }
 
-  let { page = 1, pageSize = 10, total = 0,
-    onchange,
-  }: Props = $props();
+  let { page = 1, pageSize = 10, total = 0, onchange }: Props = $props();
+
   function getPageNumbers(p: number, tp: number): (number | '...')[] {
     if (tp <= 7) return Array.from({ length: tp }, (_, i) => i + 1);
     const items: (number | '...')[] = [1];
@@ -23,38 +20,45 @@
     return items;
   }
 
-  function go(p: number) { onchange?.(p); }
+  function go(p: number) {
+    onchange?.(p);
+  }
+
   let totalPages = $derived(Math.max(1, Math.ceil(total / pageSize)));
   let pages = $derived(getPageNumbers(page, totalPages));
+
+  const BTN_BASE =
+    'inline-flex h-[30px] min-w-[30px] cursor-pointer items-center justify-center rounded-md border border-transparent bg-transparent px-1.5 text-13 font-medium leading-none text-text-3 transition-[background-color,color,border-color] duration-100 hover:bg-row-hover hover:text-text-1 hover:border-border-2 disabled:cursor-not-allowed disabled:opacity-35 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05';
+  const BTN_ACTIVE = 'bg-brand-05 text-white border-brand-05 hover:bg-brand-06 hover:border-brand-06';
 </script>
 
 {#if totalPages > 1}
-  <nav class="pagination" aria-label="Pagination">
+  <nav class="flex items-center gap-0.5" aria-label="Pagination">
     <button
       type="button"
-      class="pagination-btn"
       aria-label="Previous page"
       disabled={page <= 1}
+      class={BTN_BASE}
       onclick={() => go(page - 1)}
     >&#x2039;</button>
     {#each pages as p, i (typeof p === 'number' ? p : `e${i}`)}
       {#if p === '...'}
-        <span class="pagination-ellipsis" aria-hidden="true">&#x2026;</span>
+        <span aria-hidden="true" class="inline-flex h-[30px] min-w-[30px] items-center justify-center text-13 text-text-4">&#x2026;</span>
       {:else}
         <button
           type="button"
-          class="pagination-btn{p === page ? ' active' : ''}"
-          aria-label="Page {p}"
+          aria-label={`Page ${p}`}
           aria-current={p === page ? 'page' : undefined}
+          class="{BTN_BASE} {p === page ? BTN_ACTIVE : ''}"
           onclick={() => go(p)}
         >{p}</button>
       {/if}
     {/each}
     <button
       type="button"
-      class="pagination-btn"
       aria-label="Next page"
       disabled={page >= totalPages}
+      class={BTN_BASE}
       onclick={() => go(page + 1)}
     >&#x203A;</button>
   </nav>

package/src/lib/components/PasswordInput.svelte

@@ -3,8 +3,6 @@
 </script>
 
 <script lang="ts">
-  
-
   interface Props {
     label?: string | undefined;
     value?: string;
@@ -34,15 +32,18 @@
   }
 </script>
 
-<div class="pwd-input-wrapper {className}">
+<div class={className}>
   {#if label}
-    <label for={uid} class="pwd-input__label">{label}</label>
+    <label for={uid} class="text-12 text-text-4">{label}</label>
   {/if}
-  <div class="pwd-input{disabled ? ' pwd-input--disabled' : ''}">
+  <div
+    data-disabled={disabled ? 'true' : undefined}
+    class="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 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-40"
+  >
     <input
       id={uid}
       type={shown ? 'text' : 'password'}
-      class="pwd-input__field"
+      class="min-w-0 flex-1 border-0 bg-transparent px-3 text-13 text-text-1 outline-none placeholder:text-text-4"
       {value}
       {placeholder}
       {disabled}
@@ -51,10 +52,10 @@
     />
     <button
       type="button"
-      class="pwd-input__toggle"
       aria-pressed={shown}
       aria-label={shown ? 'Hide password' : 'Show password'}
       {disabled}
+      class="inline-flex h-full w-9 shrink-0 cursor-pointer items-center justify-center border-0 border-l border-l-white/[0.08] bg-transparent text-text-4 transition-colors duration-100 hover:bg-row-hover hover:text-text-1 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-brand-05"
       onclick={() => (shown = !shown)}
     >
       {#if shown}

package/src/lib/components/Pill.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
-  
+  import type { Snippet } from 'svelte';
+
+  export type PillVariant = 'success' | 'warn' | 'danger' | 'info' | 'neutral';
+
   interface Props {
-    variant?: 'success' | 'warn' | 'danger' | 'info' | 'neutral';
+    variant?: PillVariant;
     showDot?: boolean;
     class?: string;
     style?: string;
-    children?: import('svelte').Snippet;
+    children?: Snippet;
   }
 
   let {
@@ -13,11 +16,36 @@
     showDot = true,
     class: className = '',
     style = '',
-    children
+    children,
   }: Props = $props();
+
+  // Pre-compose so Tailwind's static scanner picks up every variant.
+  // Backgrounds use the literal 14% opacity from `dashboard.css`; text
+  // colours resolve to the semantic status tokens so they stay legible
+  // against the 14% tinted background in both motifs. The neutral variant
+  // sits on `--row-active` (brand-blue tint) so it stays visible on a
+  // white page bg.
+  const PILL: Record<PillVariant, string> = {
+    success: 'bg-status-success/14 text-status-success',
+    warn: 'bg-status-warning/14 text-status-warning',
+    danger: 'bg-status-danger/14 text-status-danger',
+    info: 'bg-status-info/14 text-status-info',
+    neutral: 'bg-row-active text-text-2',
+  };
+  const DOT: Record<PillVariant, string> = {
+    success: 'bg-status-success',
+    warn: 'bg-status-warning',
+    danger: 'bg-status-danger',
+    info: 'bg-status-info',
+    neutral: 'bg-status-neutral',
+  };
+
+  let pillClass = $derived(
+    `inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-medium leading-[1.4] ${PILL[variant]} ${className}`,
+  );
 </script>
 
-<span class="pill pill-{variant} {className}" {style}>
-  {#if showDot}<span class="dot" aria-hidden="true"></span>{/if}
+<span class={pillClass} {style}>
+  {#if showDot}<span class="h-1.5 w-1.5 rounded-full {DOT[variant]}" aria-hidden="true"></span>{/if}
   {@render children?.()}
 </span>

package/src/lib/components/Popover.svelte

@@ -4,12 +4,34 @@
 
 <script lang="ts">
   import { onMount, onDestroy, tick } from 'svelte';
+  import Button from './Button.svelte';
+  import { portal } from '../actions/portal.ts';
 
   interface Props {
     label: string;
     variant?: 'ghost' | 'primary';
     title?: string | undefined;
     placement?: 'bottom-start' | 'bottom-end' | 'bottom';
+    /**
+     * Controlled open state. Default uncontrolled (`$bindable(false)`):
+     * the trigger button toggles it and outside-clicks close it.
+     * Callers can `bind:open` to drive it programmatically (e.g. close
+     * the popover after a form submit) or to coordinate with other
+     * UI. When the trigger button is used, the bound variable updates
+     * automatically.
+     */
+    open?: boolean;
+    /**
+     * Optional custom trigger snippet. When provided, renders inline
+     * with the rest of the popover root and receives a `toggle` fn so
+     * the snippet can drive open/close. The default `label`-Button
+     * trigger renders only when no `trigger` snippet is passed.
+     *
+     * Use for icon-only triggers (eye-icon view-options menus, gear
+     * icons, etc.) where the upstream `<Button label>` chrome doesn't
+     * fit the surrounding UI.
+     */
+    trigger?: import('svelte').Snippet<[{ toggle: () => void; open: boolean }]>;
     children?: import('svelte').Snippet;
   }
 
@@ -18,7 +40,9 @@
     variant = 'ghost',
     title = undefined,
     placement = 'bottom-start',
-    children
+    open = $bindable(false),
+    trigger,
+    children,
   }: Props = $props();
 
   const uid = `dash-ui-pop-${++counter}`;
@@ -27,15 +51,40 @@
   const FOCUSABLE =
     'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
 
-  let open = $state(false);
   let rootEl = $state<HTMLDivElement | undefined>(undefined);
-  let triggerEl = $state<HTMLButtonElement | undefined>(undefined);
+  let triggerEl = $state<HTMLElement | undefined>(undefined);
   let panelEl = $state<HTMLDivElement | undefined>(undefined);
+  /** Top + left in viewport coordinates. Computed from the trigger's
+   *  bounding rect every time the panel opens / window resizes /
+   *  the user scrolls. The panel uses `position: fixed` so we never
+   *  get clipped by an ancestor's `overflow: hidden`. */
+  let panelTop = $state(0);
+  let panelLeft = $state(0);
+
+  /** Recompute the panel's viewport coords. The panel itself must be
+   *  rendered (size > 0) for accurate measurement; call after the
+   *  open + tick + paint. */
+  function recomputePosition() {
+    if (!triggerEl || !panelEl) return;
+    const tr = triggerEl.getBoundingClientRect();
+    const margin = 8;
+    const offset = 6; // gap between trigger bottom and panel top
+    const panelWidth = panelEl.offsetWidth;
+    let left: number;
+    if (placement === 'bottom-start') left = tr.left;
+    else if (placement === 'bottom-end') left = tr.right - panelWidth;
+    else left = tr.left + tr.width / 2 - panelWidth / 2; // 'bottom'
+    // Clamp into the visible viewport with the configured gutter.
+    left = Math.max(margin, Math.min(left, window.innerWidth - panelWidth - margin));
+    panelLeft = left;
+    panelTop = tr.bottom + offset;
+  }
 
   async function toggle() {
     if (!open) {
       open = true;
       await tick();
+      recomputePosition();
       const first = panelEl?.querySelector<HTMLElement>(FOCUSABLE);
       (first ?? panelEl)?.focus();
     } else {
@@ -63,38 +112,73 @@
   }
 
   function onPointer(e: PointerEvent) {
-    if (open && !rootEl?.contains(e.target as Node)) open = false;
+    if (!open) return;
+    const target = e.target as Node;
+    // The panel is portalled to <body> so it's no longer a descendant
+    // of rootEl. Check both so clicks INSIDE the panel don't count as
+    // outside-clicks and immediately close the popover.
+    if (rootEl?.contains(target)) return;
+    if (panelEl?.contains(target)) return;
+    open = false;
+  }
+
+  function onResize() {
+    if (open) recomputePosition();
+  }
+
+  function onScroll() {
+    if (open) recomputePosition();
   }
 
   onMount(() => {
     window.addEventListener('keydown', onKey);
+    window.addEventListener('resize', onResize);
+    // Capture-phase scroll listener picks up scrolls in ANY ancestor
+    // (the sidebar's own overflow, the page itself, etc.) so the
+    // fixed-positioned panel tracks the trigger as it moves.
+    window.addEventListener('scroll', onScroll, true);
     document.addEventListener('pointerdown', onPointer);
+    triggerEl =
+      rootEl?.querySelector<HTMLButtonElement>('button[aria-haspopup="dialog"]') ?? undefined;
   });
   onDestroy(() => {
     window.removeEventListener('keydown', onKey);
+    window.removeEventListener('resize', onResize);
+    window.removeEventListener('scroll', onScroll, true);
     document.removeEventListener('pointerdown', onPointer);
   });
 </script>
 
-<div class="popover-root" bind:this={rootEl}>
-  <button
-    bind:this={triggerEl}
-    type="button"
-    class="btn btn-{variant}"
-    aria-haspopup="dialog"
-    aria-expanded={open}
-    onclick={toggle}
-  >{label}</button>
+<div class="relative inline-flex items-center" bind:this={rootEl}>
+  {#if trigger}
+    {@render trigger({ toggle, open })}
+  {:else}
+    <Button {variant} aria-label={label} onclick={toggle}>
+      {label}
+    </Button>
+  {/if}
   {#if open}
+    <!--
+      `position: fixed` so the panel can extend outside any ancestor
+      with `overflow: hidden` (the sidebar's session-list scroll, the
+      app's main grid columns, etc.). Coords are computed from the
+      trigger's `getBoundingClientRect()` in `recomputePosition`.
+    -->
     <div
       bind:this={panelEl}
+      use:portal
       role="dialog"
       aria-labelledby={title ? titleId : undefined}
-      class="popover popover-{placement}"
-      tabindex="-1"
+      class="fixed z-[9100] min-w-[200px] max-w-[320px] rounded-[10px] border border-border-3 bg-bg-2 shadow-[0_8px_32px_rgba(0,0,0,0.5)] focus:outline-none"
+      style={`top: ${panelTop}px; left: ${panelLeft}px`}
+      tabindex={-1}
     >
-      {#if title}<div id={titleId} class="popover-h">{title}</div>{/if}
-      <div class="popover-b">{@render children?.()}</div>
+      {#if title}
+        <div id={titleId} class="border-b border-border-1 px-3.5 pb-2 pt-2.5 text-11 font-semibold uppercase tracking-[0.06em] text-text-4">
+          {title}
+        </div>
+      {/if}
+      <div class="flex flex-col gap-2.5 px-3.5 py-3">{@render children?.()}</div>
     </div>
   {/if}
 </div>

package/src/lib/components/ProgressBar.svelte

@@ -10,22 +10,22 @@
     value,
     label = undefined,
     valueText = undefined,
-    color = '#006FFF'
+    color = '#006FFF',
   }: Props = $props();
   let clamped = $derived(Math.max(0, Math.min(100, value)));
   let displayed = $derived(valueText ?? `${Math.round(clamped)}%`);
   let hasHeader = $derived(label !== undefined || valueText !== undefined);
 </script>
 
-<div class="pb">
+<div class="flex flex-col gap-1">
   {#if hasHeader}
-    <div class="pb-header">
-      {#if label}<span class="pb-label">{label}</span>{/if}
-      <span class="pb-value">{displayed}</span>
+    <div class="flex justify-between text-12">
+      {#if label}<span class="text-text-2">{label}</span>{/if}
+      <span class="font-mono text-text-3">{displayed}</span>
     </div>
   {/if}
   <div
-    class="pb-track"
+    class="h-1.5 overflow-hidden rounded-[3px] bg-row-active"
     role="progressbar"
     aria-valuenow={Math.round(clamped)}
     aria-valuemin={0}
@@ -33,6 +33,9 @@
     aria-label={label}
     aria-valuetext={displayed}
   >
-    <div class="pb-fill" style="width:{clamped}%;background:{color};"></div>
+    <div
+      class="h-full rounded-[3px] transition-[width] duration-300 ease-out motion-reduce:transition-none"
+      style="width:{clamped}%;background:{color};"
+    ></div>
   </div>
 </div>

package/src/lib/components/RadioGroup.svelte

@@ -24,20 +24,34 @@
     options = [],
     value = $bindable(undefined),
     srOnlyLegend = false,
-    horizontal = false
+    horizontal = false,
   }: Props = $props();
 
   // svelte-ignore state_referenced_locally
   const groupName = name ?? `dash-ui-rg-${++counter}`;
+
+  // Native radio input drawn with Tailwind utilities. The selected dot is
+  // an inline-SVG bg-image (matches the legacy checkbox approach).
+  const DOT_SVG = `url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3' fill='%23fff'/%3E%3C/svg%3E")`;
+
+  const INPUT_CLS =
+    'mt-px relative inline-block h-4 w-4 min-w-4 shrink-0 cursor-pointer appearance-none rounded-full border-[1.5px] border-border-3 bg-bg-1 align-middle bg-center bg-no-repeat transition-[border-color,background-color] duration-100 hover:border-text-3 checked:border-brand-05 checked:bg-brand-05 disabled:cursor-not-allowed focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05';
+
+  // Horizontal layout uses flex-wrap row gap; vertical stacks the options.
+  let groupCls = $derived(
+    horizontal ? 'flex flex-wrap gap-x-5 gap-y-1 border-0 m-0 p-0' : 'flex flex-col border-0 m-0 p-0',
+  );
 </script>
 
-<fieldset class="radio-group {horizontal ? 'radio-group--h' : ''}">
-  <legend class={srOnlyLegend ? 'sr-only' : 'radio-group__legend'}>{legend}</legend>
+<fieldset class={groupCls}>
+  <legend class={srOnlyLegend ? 'sr-only' : 'block p-0 mb-2 text-12 text-text-3'}>{legend}</legend>
   {#each options as opt}
     {@const optId = `${groupName}-${opt.value}`}
     <label
       for={optId}
-      class="radio-option{opt.disabled ? ' radio-option--disabled' : ''}"
+      class="flex cursor-pointer select-none items-start gap-2 py-1.5 text-13 text-text-2 {opt.disabled
+        ? 'cursor-not-allowed opacity-40'
+        : ''}"
     >
       <input
         type="radio"
@@ -46,13 +60,14 @@
         value={opt.value}
         checked={value === opt.value}
         disabled={opt.disabled}
-        class="radio"
+        class={INPUT_CLS}
+        style={value === opt.value ? `background-image: ${DOT_SVG};` : ''}
         onchange={() => { value = opt.value; }}
       />
-      <span class="radio-text">
+      <span class="flex flex-col gap-px">
         <span>{opt.label}</span>
         {#if opt.description}
-          <span class="radio-description">{opt.description}</span>
+          <span class="text-12 text-text-3">{opt.description}</span>
         {/if}
       </span>
     </label>

package/src/lib/components/RangeSlider.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  
-
   interface Props {
     label?: string | undefined;
     min?: number;
@@ -37,26 +35,33 @@
     high = Math.max(Number((e.target as HTMLInputElement).value), low + step);
     onchange?.([low, high]);
   }
+
+  // Native dual-thumb range slider. Both `<input type="range">` overlap
+  // visually; we toggle z-index so the focused one is on top.
+  const INPUT_CLS =
+    'pointer-events-auto absolute inset-x-0 top-0 m-0 h-4 w-full cursor-pointer appearance-none bg-transparent outline-none [&::-webkit-slider-thumb]:[-webkit-appearance:none] [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-brand-05 [&::-webkit-slider-thumb]:bg-white [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:w-3.5 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-brand-05 [&::-moz-range-thumb]:bg-white';
 </script>
 
-<div class="range-slider">
+<div class="flex flex-col gap-1.5">
   {#if label}
-    <div class="range-slider__header">
-      <span class="range-slider__label">{label}</span>
-      <span class="range-slider__value" aria-live="polite">{low}{suffix ?? ''} &ndash; {high}{suffix ?? ''}</span>
+    <div class="flex items-center justify-between gap-2">
+      <span class="text-12 text-text-4">{label}</span>
+      <span class="text-12 font-medium text-text-1 tabular-nums" aria-live="polite">{low}{suffix ?? ''} &ndash; {high}{suffix ?? ''}</span>
     </div>
   {/if}
   <div
-    class="range-slider__wrap"
-    style="--rs-low:{lowPct}%;--rs-high:{highPct}%"
+    class="relative h-4"
     role="group"
     aria-label={label}
   >
-    <div class="range-slider__track-bg"></div>
-    <div class="range-slider__fill"></div>
+    <div class="absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-sm bg-bg-3"></div>
+    <div
+      class="absolute top-1/2 h-1 -translate-y-1/2 rounded-sm bg-brand-05"
+      style="left:{lowPct}%; right:{100 - highPct}%"
+    ></div>
     <input
       type="range"
-      class="range-slider__input"
+      class={INPUT_CLS}
       {min} {max} {step}
       value={low}
       {disabled}
@@ -67,7 +72,7 @@
     />
     <input
       type="range"
-      class="range-slider__input"
+      class={INPUT_CLS}
       {min} {max} {step}
       value={high}
       {disabled}

package/src/lib/components/RankedList.svelte

@@ -8,7 +8,6 @@
 </script>
 
 <script lang="ts">
-
   interface Props {
     items: RankedItem[];
     unit?: string | undefined;
@@ -16,17 +15,12 @@
     ariaLabel?: string;
   }
 
-  let {
-    items,
-    unit = undefined,
-    max = undefined,
-    ariaLabel = 'Ranked list'
-  }: Props = $props();
+  let { items, unit = undefined, max = undefined, ariaLabel = 'Ranked list' }: Props = $props();
 
   let resolvedMax = $derived(max ?? Math.max(...items.map((i) => i.value), 1));
 </script>
 
-<table class="rl" aria-label={ariaLabel}>
+<table class="w-full border-collapse text-13" aria-label={ariaLabel}>
   <caption class="sr-only">{ariaLabel}</caption>
   <thead class="sr-only">
     <tr>
@@ -38,22 +32,22 @@
   </thead>
   <tbody>
     {#each items as item, i}
-      <tr class="rl-row">
-        <td class="rl-rank">{i + 1}</td>
-        <td class="rl-label-cell">
-          <div class="rl-label">{item.label}</div>
-          {#if item.sublabel}<div class="rl-sublabel">{item.sublabel}</div>{/if}
+      <tr class="border-b border-border-1 last:border-b-0">
+        <td class="w-8 py-1.5 text-12 text-text-4 tabular-nums">{i + 1}</td>
+        <td class="py-1.5 pr-3">
+          <div class="text-text-2">{item.label}</div>
+          {#if item.sublabel}<div class="text-11 text-text-4">{item.sublabel}</div>{/if}
         </td>
-        <td class="rl-bar-col" aria-hidden="true">
-          <div class="rl-bar-track">
+        <td class="w-1/3 py-1.5 pr-3" aria-hidden="true">
+          <div class="h-1.5 w-full overflow-hidden rounded-sm bg-row-active">
             <div
-              class="rl-bar-fill"
+              class="h-full rounded-sm"
               style="width:{((item.value / resolvedMax) * 100).toFixed(1)}%;background:{item.color ?? '#006FFF'}"
             ></div>
           </div>
         </td>
-        <td class="rl-val">
-          {item.value.toLocaleString()}{#if unit}<span class="rl-unit"> {unit}</span>{/if}
+        <td class="py-1.5 text-right font-medium text-text-1 tabular-nums">
+          {item.value.toLocaleString()}{#if unit}<span class="ml-1 text-11 text-text-4"> {unit}</span>{/if}
         </td>
       </tr>
     {/each}