@w5-ui/svelte 0.2.1 → 0.3.0

package/src/lib/components/ResizablePanel.svelte

@@ -22,14 +22,16 @@
     label = 'Resize panels',
     style = '',
     first,
-    second
+    second,
   }: Props = $props();
 
   // svelte-ignore state_referenced_locally
   let size = $state(defaultSize);
   let container = $state<HTMLDivElement | undefined>(undefined);
 
-  function clamp(v: number) { return Math.min(max, Math.max(min, v)); }
+  function clamp(v: number) {
+    return Math.min(max, Math.max(min, v));
+  }
 
   function onMouseDown(e: MouseEvent) {
     e.preventDefault();
@@ -37,9 +39,10 @@
     function onMove(me: MouseEvent) {
       if (!container) return;
       const rect = container.getBoundingClientRect();
-      const pct = orientation === 'vertical'
-        ? ((me.clientX - rect.left) / rect.width) * 100
-        : ((me.clientY - rect.top) / rect.height) * 100;
+      const pct =
+        orientation === 'vertical'
+          ? ((me.clientX - rect.left) / rect.width) * 100
+          : ((me.clientY - rect.top) / rect.height) * 100;
       size = clamp(Math.round(pct));
     }
 
@@ -65,29 +68,37 @@
     if (e.key === 'End') { e.preventDefault(); size = max; }
   }
 
-  let firstStyle = $derived(orientation === 'vertical'
-    ? `flex: 0 0 ${size}%; min-width: 0;`
-    : `flex: 0 0 ${size}%; min-height: 0;`);
+  let firstStyle = $derived(
+    orientation === 'vertical'
+      ? `flex: 0 0 ${size}%; min-width: 0;`
+      : `flex: 0 0 ${size}%; min-height: 0;`,
+  );
 </script>
 
-<div bind:this={container} class="rp rp--{orientation}" {style}>
-  <div class="rp-pane" style={firstStyle}>
+<div
+  bind:this={container}
+  data-orientation={orientation}
+  class="flex h-full w-full overflow-hidden data-[orientation=horizontal]:flex-col"
+  {style}
+>
+  <div class="overflow-hidden" style={firstStyle}>
     {@render first?.()}
   </div>
   <!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
   <div
     role="separator"
-    tabindex="0"
+    tabindex={0}
     aria-orientation={orientation}
     aria-valuenow={size}
     aria-valuemin={min}
     aria-valuemax={max}
     aria-label={label}
-    class="rp-handle"
+    data-orientation={orientation}
+    class="shrink-0 cursor-col-resize bg-row-active hover:bg-brand-05/40 data-[orientation=horizontal]:cursor-row-resize data-[orientation=vertical]:w-1 data-[orientation=horizontal]:h-1 focus-visible:bg-brand-05 focus-visible:outline-none"
     onmousedown={onMouseDown}
     onkeydown={onKeyDown}
-></div>
-  <div class="rp-pane rp-pane--second">
+  ></div>
+  <div class="min-w-0 flex-1 overflow-hidden">
     {@render second?.()}
   </div>
 </div>

package/src/lib/components/RowToggle.svelte

@@ -4,6 +4,7 @@
 
 <script lang="ts">
   import Toggle from './Toggle.svelte';
+
   interface Props {
     title: string;
     description: string;
@@ -17,13 +18,14 @@
     on = $bindable(false),
     ontoggle,
   }: Props = $props();
+
   const descId = `dash-ui-rowtoggle-${++counter}`;
 </script>
 
-<div class="row-toggle">
-  <div class="info">
-    <div class="t">{title}</div>
-    <div class="d" id={descId}>{description}</div>
+<div class="flex items-center gap-3.5 border-b border-border-1 py-2.5">
+  <div class="flex-1">
+    <div class="text-13 font-medium text-text-1">{title}</div>
+    <div class="mt-0.5 text-11 text-text-4" id={descId}>{description}</div>
   </div>
   <Toggle bind:on ariaLabel={title} ariaDescribedBy={descId} {ontoggle} />
 </div>

package/src/lib/components/SearchBox.svelte

@@ -18,8 +18,11 @@
   }: Props = $props();
 </script>
 
-<div class="search" role="search">
-  <span aria-hidden="true" style="display:inline-flex">
+<div
+  class="flex h-[30px] w-60 items-center gap-1.5 rounded-md border border-border-1 bg-bg-1 px-2.5 focus-within:border-brand-05"
+  role="search"
+>
+  <span aria-hidden="true" class="inline-flex">
     <SearchIcon size={14} style="color:#6E7079" />
   </span>
   <input
@@ -29,5 +32,6 @@
     bind:value
     {oninput}
     {onchange}
+    class="min-w-0 flex-1 border-0 bg-transparent text-13 text-text-1 outline-none placeholder:text-text-4"
   />
 </div>

package/src/lib/components/SegmentedControl.svelte

@@ -36,9 +36,23 @@
       root?.querySelector<HTMLButtonElement>('button[tabindex="0"]')?.focus();
     }
   }
+
+  const BTN_BASE =
+    'flex-shrink-0 grow-0 inline-flex h-7 cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-md border-0 bg-transparent px-3 text-12 font-medium leading-none text-text-3 transition-[background-color,color] duration-100 hover:bg-row-hover hover:text-text-1 disabled:cursor-not-allowed disabled:opacity-40 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-brand-05';
+  // Active button uses the elevated `--depthBg-3` so the active pill
+  // is legible on both motifs (a darker step on dark, a softer grey on light).
+  const BTN_ACTIVE =
+    'bg-bg-3 text-text-1 shadow-[0_1px_3px_rgba(0,0,0,0.18)] dark:shadow-[0_1px_3px_rgba(0,0,0,0.4)]';
 </script>
 
-<div bind:this={root} role="radiogroup" aria-label={label} class="seg-ctrl" tabindex="-1" onkeydown={handleKeyDown}>
+<div
+  bind:this={root}
+  role="radiogroup"
+  aria-label={label}
+  class="inline-flex gap-px rounded-lg bg-bg-2 p-0.5"
+  tabindex={-1}
+  onkeydown={handleKeyDown}
+>
   {#each options as opt (opt.value)}
     <button
       type="button"
@@ -46,7 +60,7 @@
       aria-checked={value === opt.value}
       disabled={opt.disabled}
       tabindex={value === opt.value ? 0 : -1}
-      class="seg-ctrl__btn{value === opt.value ? ' seg-ctrl__btn--active' : ''}"
+      class="{BTN_BASE} {value === opt.value ? BTN_ACTIVE : ''}"
       onclick={() => { value = opt.value; }}
     >
       {opt.label}

package/src/lib/components/Select.svelte

@@ -1,6 +1,9 @@
 <script module lang="ts">
   let counter = 0;
-  export interface SelectOption { value: string; label: string; }
+  export interface SelectOption {
+    value: string;
+    label: string;
+  }
 </script>
 
 <script lang="ts">
@@ -27,7 +30,6 @@
     class: className = '',
     onchange,
   }: Props = $props();
-  
 
   const uid = `dash-ui-sel-${++counter}`;
   let triggerId = $derived(id ?? uid);
@@ -83,7 +85,7 @@
   onDestroy(() => document.removeEventListener('mousedown', handleOutside));
 </script>
 
-<div class="select-wrapper {className}" bind:this={wrapperEl}>
+<div class="relative inline-block {className}" bind:this={wrapperEl}>
   {#if label}<label for={triggerId} class="sr-only">{label}</label>{/if}
   <button
     bind:this={triggerEl}
@@ -94,24 +96,34 @@
     aria-controls={listboxId}
     aria-label={label}
     {disabled}
-    class="select-trigger"
+    type="button"
+    class="inline-flex h-[34px] cursor-pointer select-none items-center gap-1.5 whitespace-nowrap rounded-md border border-border-2 bg-bg-page pl-3 pr-2.5 text-13 leading-none text-text-1 transition-colors duration-100 hover:border-border-3 aria-expanded:border-brand-05 aria-expanded:shadow-[0_0_0_2px_rgba(0,111,255,0.2)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05 disabled:cursor-not-allowed disabled:opacity-40"
     onclick={toggle}
     onkeydown={onKeyDown}
-    type="button"
   >
     <span>{displayLabel}</span>
-    <svg class="select-chevron" 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 shrink-0 text-text-4 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>
   {#if open}
-    <ul id={listboxId} role="listbox" aria-label={label} class="select-listbox">
+    <ul
+      id={listboxId}
+      role="listbox"
+      aria-label={label}
+      class="absolute left-0 top-[calc(100%+4px)] z-[9000] m-0 min-w-full list-none rounded-lg border border-border-3 bg-bg-2 p-1 shadow-[0_8px_24px_rgba(0,0,0,0.5)]"
+    >
       {#each options as opt, idx (opt.value)}
         <li
           role="option"
           aria-selected={opt.value === value}
           data-active={idx === activeIdx ? 'true' : undefined}
-          class="select-option"
+          class="flex cursor-pointer items-center 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 aria-selected:font-medium aria-selected:text-brand-05"
           onmousedown={(e) => { e.preventDefault(); (() => pick(opt.value))(); }}
           onmouseenter={() => { activeIdx = idx; }}
         >{opt.label}</li>

package/src/lib/components/SelectionToolbar.svelte

@@ -9,7 +9,6 @@
 <script lang="ts">
   import CloseIcon from '../icons/CloseIcon.svelte';
 
-
   interface Props {
     count: number;
     actions?: SelectionToolbarAction[];
@@ -23,20 +22,25 @@
     actions = [],
     onClear,
     ariaLabel = 'Selection actions',
-    children
+    children,
   }: Props = $props();
 </script>
 
 {#if count > 0}
-  <div class="sel-toolbar" role="toolbar" aria-label={ariaLabel}>
-    <span class="sel-toolbar__count" aria-live="polite" aria-atomic="true">
-      <strong>{count}</strong> selected
+  <div
+    role="toolbar"
+    aria-label={ariaLabel}
+    class="flex items-center gap-3 rounded-lg border border-brand-05/25 bg-brand-05/[0.08] px-4 py-2 text-13 text-text-2"
+  >
+    <span class="whitespace-nowrap" aria-live="polite" aria-atomic="true">
+      <strong class="text-text-1">{count}</strong> selected
     </span>
-    <div class="sel-toolbar__actions">
+    <div class="flex flex-1 items-center gap-2">
       {#each actions as action}
         <button
           type="button"
-          class="sel-toolbar__btn{action.variant === 'danger' ? ' sel-toolbar__btn--danger' : ''}"
+          data-danger={action.variant === 'danger' ? 'true' : undefined}
+          class="inline-flex h-7 cursor-pointer items-center rounded border border-border-2 bg-row-hover px-2.5 text-12 font-medium text-text-2 transition-colors duration-100 hover:border-border-3 hover:bg-row-active hover:text-text-1 data-[danger=true]:border-status-danger/30 data-[danger=true]:text-status-danger data-[danger=true]:hover:bg-status-danger/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
           onclick={action.onClick}
         >
           {action.label}
@@ -46,9 +50,9 @@
     </div>
     <button
       type="button"
-      class="sel-toolbar__clear icon-btn"
-      onclick={onClear}
       aria-label="Clear selection"
+      class="inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded border-0 bg-transparent text-text-4 hover:bg-row-active hover:text-text-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
+      onclick={onClear}
     >
       <CloseIcon />
     </button>

package/src/lib/components/Sidebar.svelte

@@ -14,34 +14,55 @@
 </script>
 
 <script lang="ts">
-  
   interface Props {
     sections?: SidebarSectionDef[];
     activeId: string;
     onchange?: (payload: string) => void;
   }
 
-  let { sections = [], activeId = $bindable(),
-    onchange,
-  }: Props = $props();
+  let { sections = [], activeId = $bindable(), onchange }: Props = $props();
 </script>
 
-<nav class="sidebar" aria-label="Primary">
+<!--
+  Motif-aware chrome: bg via `var(--bg-page)`, border via `var(--border-1)`,
+  text via the standard `text-1/2/3/4` ramp. Active row uses `--row-active`
+  (brand-blue tint) so it stays visible in both motifs.
+-->
+<nav
+  class="overflow-auto border-r border-border-1 bg-bg-page py-2"
+  aria-label="Primary"
+>
   {#each sections as sec (sec.title)}
-    <h2 class="sb-section">{sec.title}</h2>
-    <ul class="sb-list">
+    <h2
+      class="m-0 px-4 pb-1.5 pt-3.5 text-[10px] font-semibold uppercase leading-[1.4] tracking-[0.06em] text-text-4"
+    >{sec.title}</h2>
+    <ul class="m-0 flex list-none flex-col gap-px px-2">
       {#each sec.items as it (it.id)}
         <li>
           <button
             type="button"
-            class="sb-item {it.id === activeId ? 'active' : ''}"
+            class="flex w-full cursor-pointer select-none items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left font-[inherit] text-13 leading-[18px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05
+              {it.id === activeId
+                ? '[&_.sb-ico]:text-brand-05 bg-row-active text-text-1'
+                : 'bg-transparent text-text-2 hover:bg-row-hover hover:text-text-1'}"
             aria-current={it.id === activeId ? 'page' : undefined}
             onclick={() => { activeId = it.id; onchange?.(it.id); }}
           >
-            <span class="sb-ico"><it.icon /></span>
+            <span class="sb-ico shrink-0 text-text-3 [&_svg]:h-4 [&_svg]:w-4"
+              ><it.icon /></span>
             {it.label}
-            {#if it.count !== undefined}<span class="sb-count">{it.count}</span>{/if}
-            {#if it.pill !== undefined}<span class="sb-pill">{it.pill}<span class="sr-only"> alert{it.pill !== 1 ? 's' : ''}</span></span>{/if}
+            {#if it.count !== undefined}
+              <span
+                class="ml-auto text-[11px] tabular-nums {it.id === activeId
+                  ? 'text-text-3'
+                  : 'text-text-4'}"
+              >{it.count}</span>
+            {/if}
+            {#if it.pill !== undefined}
+              <span
+                class="ml-auto rounded-full bg-brand-05 px-1.5 py-px text-[10px] font-semibold text-white"
+              >{it.pill}<span class="sr-only"> alert{it.pill !== 1 ? 's' : ''}</span></span>
+            {/if}
           </button>
         </li>
       {/each}

package/src/lib/components/Signal.svelte

@@ -8,9 +8,10 @@
 </script>
 
 <span
-  class="signal {weak ? 'weak' : ''}"
+  data-weak={weak ? 'true' : undefined}
+  class="inline-flex h-3 items-end gap-px [&>i]:block [&>i]:w-0.5 [&>i]:rounded-[0.5px] [&>i]:bg-status-success data-[weak=true]:[&>i:nth-child(3)]:bg-bg-3 data-[weak=true]:[&>i:nth-child(4)]:bg-bg-3"
   role="img"
   aria-label={label ?? (weak ? 'Signal: weak' : 'Signal: strong')}
 >
-  <i></i><i></i><i></i><i></i>
+  <i class="h-[3px]"></i><i class="h-1.5"></i><i class="h-[9px]"></i><i class="h-3"></i>
 </span>

package/src/lib/components/Skeleton.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  
   interface Props {
     variant?: 'text' | 'title' | 'stat' | 'circle' | 'block';
     width?: string | number | undefined;
@@ -13,20 +12,33 @@
     width = undefined,
     height = undefined,
     class: className = '',
-    ariaLabel = 'Loading'
+    ariaLabel = 'Loading',
   }: Props = $props();
 
-  let variantClass = $derived(variant === 'block' ? '' : variant);
   let w = $derived(width ?? (variant === 'circle' ? height : undefined));
-  let style = $derived([
-    w !== undefined ? `width:${typeof w === 'number' ? w + 'px' : w}` : '',
-    height !== undefined ? `height:${typeof height === 'number' ? height + 'px' : height}` : '',
-  ].filter(Boolean).join(';'));
+  let inlineStyle = $derived(
+    [
+      w !== undefined ? `width:${typeof w === 'number' ? w + 'px' : w}` : '',
+      height !== undefined ? `height:${typeof height === 'number' ? height + 'px' : height}` : '',
+    ]
+      .filter(Boolean)
+      .join(';'),
+  );
+
+  // Pre-composed variant strings so Tailwind's static scanner picks them up.
+  // Mirrors the legacy `.skeleton.text/.title/.stat/.circle` ramp.
+  const VARIANT: Record<NonNullable<Props['variant']>, string> = {
+    text: 'h-3 rounded-[3px]',
+    title: 'h-[18px] rounded',
+    stat: 'h-7 rounded',
+    circle: 'rounded-full',
+    block: 'rounded',
+  };
 </script>
 
 <span
-  class="skeleton {variantClass} {className}"
-  {style}
+  class="block animate-shimmer bg-[length:200%_100%] bg-[linear-gradient(90deg,rgba(255,255,255,0.04)_0%,rgba(255,255,255,0.1)_50%,rgba(255,255,255,0.04)_100%)] motion-reduce:animate-none {VARIANT[variant]} {className}"
+  style={inlineStyle}
   role="status"
   aria-label={ariaLabel}
   aria-busy="true"

package/src/lib/components/SkipLink.svelte

@@ -6,9 +6,12 @@
   }
 
   let { href = '#main-content', class: className = '', children }: Props = $props();
-  
 </script>
 
-<a class="skip-link {className}" {href}>
+<a
+  class="absolute left-0 top-0 z-[100] -translate-y-full rounded-br-md bg-brand-05 px-3 py-2 text-13 font-semibold text-white no-underline focus:translate-y-0 focus:outline-2 focus:-outline-offset-4 focus:outline-white
+    {className}"
+  {href}
+>
   {#if children}{@render children()}{:else}Skip to main content{/if}
 </a>

package/src/lib/components/Slider.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  
-
   interface Props {
     label?: string | undefined;
     value?: number;
@@ -34,27 +32,36 @@
     value = Number((e.target as HTMLInputElement).value);
     onchange?.(value);
   }
+
+  // The native <input type="range"> track gets a gradient-fill background
+  // composed inline (so the fill % is reactive). Thumb chrome lives in
+  // arbitrary-value pseudo-element utilities — Tailwind v4 handles them
+  // statically.
+  const TRACK_CLS =
+    'h-1 w-full cursor-pointer appearance-none rounded-sm outline-none transition-opacity duration-100 disabled:cursor-not-allowed disabled:opacity-40 ' +
+    '[&::-webkit-slider-thumb]:[-webkit-appearance:none] [&::-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="slider">
+<div class="flex flex-col gap-1.5">
   {#if label}
-    <div class="slider__header">
-      <label for={inputId} class="slider__label">{label}</label>
-      <span class="slider__value" aria-live="polite">
-        {value}{#if suffix}<span class="slider__suffix">{suffix}</span>{/if}
+    <div class="flex items-center justify-between gap-2">
+      <label for={inputId} class="text-12 text-text-4">{label}</label>
+      <span class="flex items-baseline gap-px text-12 font-medium text-text-1 tabular-nums" aria-live="polite">
+        {value}{#if suffix}<span class="ml-px text-11 text-text-4">{suffix}</span>{/if}
       </span>
     </div>
   {/if}
   <input
     {id}
     type="range"
-    class="slider__track"
+    class={TRACK_CLS}
     {min}
     {max}
     {step}
     {value}
     {disabled}
-    style="--slider-fill:{pct}%"
+    style={`background: linear-gradient(to right, var(--brand-05) 0%, var(--brand-05) ${pct}%, rgba(255,255,255,0.12) ${pct}%, rgba(255,255,255,0.12) 100%);`}
     aria-label={label}
     aria-valuetext={suffix ? `${value} ${suffix}` : undefined}
     oninput={handleChange}

package/src/lib/components/SortHeader.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  
   interface Props {
     sortKey: string;
     activeKey?: string | null;
@@ -15,14 +14,24 @@
     children,
     onsort,
   }: Props = $props();
+
   let active = $derived(activeKey === sortKey);
-  let ariaSort = $derived((active ? (dir === 'asc' ? 'ascending' : 'descending') : 'none') as 'ascending' | 'descending' | 'none');
+  let ariaSort = $derived(
+    (active ? (dir === 'asc' ? 'ascending' : 'descending') : 'none') as
+      | 'ascending'
+      | 'descending'
+      | 'none',
+  );
 </script>
 
 <th scope="col" aria-sort={ariaSort}>
-  <button type="button" class="sort-header-btn" onclick={() => onsort?.(sortKey)}>
+  <button
+    type="button"
+    class="inline-flex w-full cursor-pointer items-center gap-1.5 whitespace-nowrap border-0 bg-transparent px-3 py-2 font-inherit text-inherit hover:text-text-2 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-brand-05"
+    onclick={() => onsort?.(sortKey)}
+  >
     {@render children?.()}
-    <svg class="sort-icon" viewBox="0 0 8 11" aria-hidden="true" fill="currentColor">
+    <svg class="h-[11px] w-2 shrink-0" viewBox="0 0 8 11" aria-hidden="true" fill="currentColor">
       <path d="M4 0L7 4H1Z" opacity={active && dir === 'asc' ? 1 : 0.3} />
       <path d="M4 11L1 7H7Z" opacity={active && dir === 'desc' ? 1 : 0.3} />
     </svg>

package/src/lib/components/SortableList.svelte

@@ -7,7 +7,6 @@
 </script>
 
 <script lang="ts">
-
   interface Props {
     items?: SortableItem[];
     onChange?: (items: SortableItem[]) => void;
@@ -22,8 +21,8 @@
 
   function reorder(fromId: string, toId: string) {
     if (fromId === toId) return;
-    const from = items.findIndex(i => i.id === fromId);
-    const to = items.findIndex(i => i.id === toId);
+    const from = items.findIndex((i) => i.id === fromId);
+    const to = items.findIndex((i) => i.id === toId);
     const arr = [...items];
     const [item] = arr.splice(from, 1);
     arr.splice(to, 0, item);
@@ -32,7 +31,7 @@
   }
 
   function move(id: string, dir: -1 | 1) {
-    const idx = items.findIndex(i => i.id === id);
+    const idx = items.findIndex((i) => i.id === id);
     const next = idx + dir;
     if (next < 0 || next >= items.length) return;
     const arr = [...items];
@@ -53,25 +52,25 @@
   }
 </script>
 
-<ol class="sortable-list" aria-label={ariaLabel}>
+<ol class="m-0 flex list-none flex-col gap-1 p-0" aria-label={ariaLabel}>
   {#each items as item, idx (item.id)}
     <li
-      class="sortable-list__item"
-      class:is-grabbed={grabbed === item.id}
-      class:is-drag-over={dragOver === item.id}
+      data-grabbed={grabbed === item.id ? 'true' : undefined}
+      data-dragover={dragOver === item.id ? 'true' : undefined}
       draggable="true"
-      ondragstart={e => { e.dataTransfer?.setData('text/plain', item.id); if (e.dataTransfer) e.dataTransfer.effectAllowed = 'move'; dragSrc = item.id; }}
+      class="flex items-center gap-2 rounded-md border border-border-1 bg-divider px-2 py-1.5 transition-colors duration-100 data-[grabbed=true]:border-brand-05 data-[grabbed=true]:bg-brand-05/[0.08] data-[dragover=true]:border-brand-05"
+      ondragstart={(e) => { e.dataTransfer?.setData('text/plain', item.id); if (e.dataTransfer) e.dataTransfer.effectAllowed = 'move'; dragSrc = item.id; }}
       ondragend={() => { dragSrc = null; dragOver = null; }}
-      ondragover={e => { e.preventDefault(); if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'; dragOver = item.id; }}
+      ondragover={(e) => { e.preventDefault(); if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'; dragOver = item.id; }}
       ondragleave={() => { dragOver = null; }}
-      ondrop={e => { e.preventDefault(); if (dragSrc) reorder(dragSrc, item.id); dragSrc = null; dragOver = null; }}
+      ondrop={(e) => { e.preventDefault(); if (dragSrc) reorder(dragSrc, item.id); dragSrc = null; dragOver = null; }}
     >
       <button
         type="button"
-        class="sortable-list__handle"
-        aria-label="{grabbed === item.id ? 'Release' : 'Grab'} {item.label}. Use arrow keys to reorder."
+        aria-label={`${grabbed === item.id ? 'Release' : 'Grab'} ${item.label}. Use arrow keys to reorder.`}
         aria-pressed={grabbed === item.id}
-        onkeydown={e => handleKeyDown(e, item.id)}
+        class="flex h-6 w-6 cursor-grab items-center justify-center rounded border-0 bg-transparent p-0 text-text-4 hover:bg-row-hover hover:text-text-1 active:cursor-grabbing focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
+        onkeydown={(e) => handleKeyDown(e, item.id)}
       >
         <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" aria-hidden="true" focusable="false">
           <rect x="3" y="2" width="2" height="2" rx="1" />
@@ -82,13 +81,13 @@
           <rect x="9" y="10" width="2" height="2" rx="1" />
         </svg>
       </button>
-      <span class="sortable-list__content">
-        <span class="sortable-list__label">{item.label}</span>
+      <span class="flex min-w-0 flex-1 flex-col">
+        <span class="truncate text-13 text-text-1">{item.label}</span>
         {#if item.meta}
-          <span class="sortable-list__meta">{item.meta}</span>
+          <span class="truncate text-11 text-text-4">{item.meta}</span>
         {/if}
       </span>
-      <span class="sortable-list__index" aria-hidden="true">{idx + 1}</span>
+      <span class="shrink-0 text-11 text-text-4 tabular-nums" aria-hidden="true">{idx + 1}</span>
     </li>
   {/each}
 </ol>

package/src/lib/components/Sparkline.svelte

@@ -10,7 +10,7 @@
     bars = 36,
     active = false,
     seed = 1,
-    ariaLabel = 'Activity sparkline'
+    ariaLabel = 'Activity sparkline',
   }: Props = $props();
 
   function rng(s0: number) {
@@ -21,21 +21,27 @@
     };
   }
 
-  let heights = $derived((() => {
-    const r = rng(seed);
-    const out: number[] = [];
-    let prev = 12;
-    for (let i = 0; i < bars; i++) {
-      const v = Math.max(4, Math.min(40, prev + (r() * 10 - 5)));
-      prev = v;
-      out.push(v);
-    }
-    return out;
-  })());
+  let heights = $derived(
+    (() => {
+      const r = rng(seed);
+      const out: number[] = [];
+      let prev = 12;
+      for (let i = 0; i < bars; i++) {
+        const v = Math.max(4, Math.min(40, prev + (r() * 10 - 5)));
+        prev = v;
+        out.push(v);
+      }
+      return out;
+    })(),
+  );
 </script>
 
-<div class="spark" role="img" aria-label={ariaLabel}>
+<div class="flex h-12 items-end gap-px" role="img" aria-label={ariaLabel}>
   {#each heights as h, i}
-    <div class="b" aria-hidden="true" style="height:{h}px;opacity:{active ? 0.4 + i / (bars * 1.4) : 0.5 + i / (bars * 1.6)}"></div>
+    <div
+      class="flex-1 rounded-t-[1px] bg-gradient-to-b from-brand-06 to-brand-04"
+      aria-hidden="true"
+      style="height:{h}px;opacity:{active ? 0.4 + i / (bars * 1.4) : 0.5 + i / (bars * 1.6)}"
+    ></div>
   {/each}
 </div>