@w5-ui/svelte 0.2.1 → 0.4.0

package/src/lib/components/IconButton.svelte

@@ -11,7 +11,6 @@
     [key: string]: unknown;
   }
 
-  // svelte-ignore state_referenced_locally
   // svelte-ignore state_referenced_locally
   let {
     title = undefined,
@@ -26,7 +25,7 @@
 
 <button
   {type}
-  class="icon-btn {className}"
+  class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-text-3 hover:bg-row-hover hover:text-text-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05 {className}"
   {title}
   {style}
   {...rest}

package/src/lib/components/InlineEdit.svelte

@@ -8,12 +8,7 @@
     placeholder?: string;
   }
 
-  let {
-    value,
-    onconfirm,
-    label,
-    placeholder = ''
-  }: Props = $props();
+  let { value, onconfirm, label, placeholder = '' }: Props = $props();
 
   let editing = $state(false);
   // svelte-ignore state_referenced_locally
@@ -50,30 +45,46 @@
 </script>
 
 {#if editing}
-  <span class="ie ie--editing">
+  <span class="inline-flex items-center gap-1">
     <input
       bind:this={inputEl}
-      class="ie__input"
-      aria-label="Edit {label}"
+      class="min-w-[80px] max-w-[200px] rounded-[5px] border border-brand-05/50 bg-row-active px-[7px] py-0.5 text-13 leading-none text-text-1 outline-none focus:border-brand-05 focus:bg-brand-05/[0.08]"
+      aria-label={`Edit ${label}`}
       bind:value={draft}
       {placeholder}
       onkeydown={handleKeydown}
     />
-    <button type="button" class="ie__btn ie__btn--save" aria-label="Save" onclick={confirm}>
+    <button
+      type="button"
+      aria-label="Save"
+      class="inline-flex cursor-pointer items-center rounded border-0 bg-transparent px-1 py-0.5 text-status-success transition-[color,background-color] duration-100 hover:bg-status-success/15 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
+      onclick={confirm}
+    >
       <svg viewBox="0 0 14 14" width="12" height="12" fill="none" aria-hidden="true" focusable="false">
         <path d="M2.5 7.5l3.5 3.5L12 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
     </button>
-    <button type="button" class="ie__btn ie__btn--cancel" aria-label="Cancel" onclick={cancel}>
+    <button
+      type="button"
+      aria-label="Cancel"
+      class="inline-flex cursor-pointer items-center rounded border-0 bg-transparent px-1 py-0.5 text-text-4 transition-[color,background-color] duration-100 hover:bg-row-active hover:text-text-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
+      onclick={cancel}
+    >
       <svg viewBox="0 0 14 14" width="12" height="12" fill="none" aria-hidden="true" focusable="false">
         <path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
       </svg>
     </button>
   </span>
 {:else}
-  <span class="ie">
-    <span class="ie__text">{value}</span>
-    <button bind:this={editBtnEl} type="button" class="ie__edit" aria-label="Edit {label}" onclick={startEdit}>
+  <span class="group/ie inline-flex items-center gap-1">
+    <span class="text-13 text-text-1">{value}</span>
+    <button
+      bind:this={editBtnEl}
+      type="button"
+      aria-label={`Edit ${label}`}
+      class="inline-flex cursor-pointer items-center rounded border-0 bg-transparent px-1 py-0.5 text-text-4 opacity-0 transition-[opacity,color] duration-100 hover:text-text-2 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05 group-hover/ie:opacity-100"
+      onclick={startEdit}
+    >
       <svg viewBox="0 0 14 14" width="12" height="12" fill="none" aria-hidden="true" focusable="false">
         <path d="M9.5 2l2.5 2.5-8 8H1.5v-2.5l8-8z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>

package/src/lib/components/Input.svelte

@@ -1,3 +1,12 @@
+<script module lang="ts">
+  // Shared utility-class string for native input elements. Matches the
+  // dashboard.css `.input` rule exactly so Field + Input render identically
+  // and old markup with `class="input"` keeps working through the
+  // unmigrated tail. Update both sites in lockstep if it ever moves.
+  export const INPUT_CLASSES =
+    "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)]";
+</script>
+
 <script lang="ts">
   interface Props {
     value?: string;
@@ -26,7 +35,7 @@
 
 {#if type === 'text'}
   <input
-    class="input {className}"
+    class="{INPUT_CLASSES} {className}"
     type="text"
     {placeholder}
     bind:value
@@ -38,7 +47,7 @@
   />
 {:else if type === 'password'}
   <input
-    class="input {className}"
+    class="{INPUT_CLASSES} {className}"
     type="password"
     {placeholder}
     bind:value
@@ -50,7 +59,7 @@
   />
 {:else if type === 'number'}
   <input
-    class="input {className}"
+    class="{INPUT_CLASSES} {className}"
     type="number"
     {placeholder}
     bind:value
@@ -62,7 +71,7 @@
   />
 {:else}
   <input
-    class="input {className}"
+    class="{INPUT_CLASSES} {className}"
     {type}
     {placeholder}
     {value}

package/src/lib/components/InputGroup.svelte

@@ -8,12 +8,23 @@
   let { prefix = undefined, suffix = undefined, children }: Props = $props();
 </script>
 
-<div class="input-group">
+<!--
+  Input group: prefix / suffix addons flank a slot-rendered `<Input>` and
+  trim/round its corners. The `[&_input]:rounded-none` selector targets the
+  child input regardless of its own utility classes. Addons inherit the
+  same height as the migrated Input (34px).
+-->
+<div
+  class="flex items-stretch
+    [&_input]:flex-1 [&_input]:min-w-0 [&_input]:rounded-none
+    {prefix === undefined ? '[&_input]:rounded-l-md' : ''}
+    {suffix === undefined ? '[&_input]:rounded-r-md' : ''}"
+>
   {#if prefix !== undefined}
-    <span class="input-group-addon input-group-addon--prefix">{prefix}</span>
+    <span class="flex shrink-0 select-none items-center whitespace-nowrap rounded-l-md border border-r-0 border-border-2 bg-row-active px-2.5 text-13 text-text-4">{prefix}</span>
   {/if}
   {@render children?.()}
   {#if suffix !== undefined}
-    <span class="input-group-addon input-group-addon--suffix">{suffix}</span>
+    <span class="flex shrink-0 select-none items-center whitespace-nowrap rounded-r-md border border-l-0 border-border-2 bg-row-active px-2.5 text-13 text-text-4">{suffix}</span>
   {/if}
 </div>

package/src/lib/components/JsonViewer.svelte

@@ -5,6 +5,7 @@
 <script lang="ts">
   import JsonViewerNode from './JsonViewerNode.svelte';
   import type { JsVal } from './JsonViewerNode.svelte';
+
   interface Props {
     data: unknown;
     label?: string;
@@ -16,11 +17,15 @@
     data,
     label = 'JSON viewer',
     defaultExpanded = true,
-    maxDepth = 3
+    maxDepth = 3,
   }: Props = $props();
   let root = $derived(data as JsVal);
 </script>
 
-<div class="json-viewer" role="tree" aria-label={label}>
+<div
+  class="overflow-auto rounded-md border border-border-1 bg-bg-page py-2 font-mono text-12 leading-[1.8]"
+  role="tree"
+  aria-label={label}
+>
   <JsonViewerNode v={root} depth={0} {maxDepth} startOpen={defaultExpanded} />
 </div>

package/src/lib/components/JsonViewerNode.svelte

@@ -4,6 +4,7 @@
 
 <script lang="ts">
   import JsonViewerNode from './JsonViewerNode.svelte';
+
   interface Props {
     v: JsVal;
     k?: string | undefined;
@@ -12,64 +13,69 @@
     startOpen?: boolean;
   }
 
-  let {
-    v,
-    k = undefined,
-    depth = 0,
-    maxDepth = 3,
-    startOpen = true
-  }: Props = $props();
+  let { v, k = undefined, depth = 0, maxDepth = 3, startOpen = true }: Props = $props();
 
   let isArr = $derived(Array.isArray(v));
   let isObj = $derived(v !== null && typeof v === 'object');
   let expandable = $derived(isArr || isObj);
 
-  // `open` is initialised from `startOpen`/`depth`/`maxDepth` props but is
-  // intentionally a one-shot snapshot at construction time — afterwards
-  // the user controls it via the toggle.
   // svelte-ignore state_referenced_locally
   let open = $state(startOpen && depth < maxDepth);
 
-  let entries = $derived(isArr
-    ? (v as JsVal[]).map((item: JsVal, i: number) => ({ ek: String(i), ev: item, arrItem: true }))
-    : isObj
-    ? Object.entries(v as { [key: string]: JsVal }).map(([ek, ev]) => ({ ek, ev, arrItem: false }))
-    : []);
+  let entries = $derived(
+    isArr
+      ? (v as JsVal[]).map((item: JsVal, i: number) => ({ ek: String(i), ev: item, arrItem: true }))
+      : isObj
+        ? Object.entries(v as { [key: string]: JsVal }).map(([ek, ev]) => ({ ek, ev, arrItem: false }))
+        : [],
+  );
   let count = $derived(entries.length);
   let ob = $derived(isArr ? '[' : '{');
   let cb = $derived(isArr ? ']' : '}');
   let indent = $derived(depth * 14);
+
+  // Syntax-highlight palette is motif-aware: dark uses the familiar
+  // VS Code dark-plus accents; light flips to a calmer, slightly
+  // higher-contrast set tuned for #ffffff page bg.
+  const KEY = 'text-[#9cdcfe] dark:text-[#9cdcfe] light:text-[#0451a5]';
+  const COLON = 'text-text-4';
+  const NULL = 'text-text-4 italic';
+  const STR = 'text-[#ce9178] dark:text-[#ce9178] light:text-[#a31515]';
+  const NUM = 'text-[#b5cea8] dark:text-[#b5cea8] light:text-[#098658]';
+  const BOOL = 'text-[#569cd6] dark:text-[#569cd6] light:text-[#0000ff]';
+  const BRACKET = 'text-text-2';
+  const COUNT = 'text-text-4 tabular-nums px-1';
 </script>
 
 {#if !expandable}
-  <div role="treeitem" aria-selected="false" class="jv-row" style:padding-left="{indent}px">
-    {#if k != null}<span class="jv-key">"{k}"</span><span class="jv-colon">: </span>{/if}
-    {#if v === null}<span class="jv-null">null</span>
-    {:else if typeof v === 'string'}<span class="jv-string">"{v}"</span>
-    {:else if typeof v === 'number'}<span class="jv-number">{v}</span>
-    {:else}<span class="jv-boolean">{String(v)}</span>{/if}
+  <div role="treeitem" aria-selected="false" class="px-3 py-px" style:padding-left="{indent + 12}px">
+    {#if k != null}<span class={KEY}>"{k}"</span><span class={COLON}>: </span>{/if}
+    {#if v === null}<span class={NULL}>null</span>
+    {:else if typeof v === 'string'}<span class={STR}>"{v}"</span>
+    {:else if typeof v === 'number'}<span class={NUM}>{v}</span>
+    {:else}<span class={BOOL}>{String(v)}</span>{/if}
   </div>
 {:else}
-  <div role="treeitem" aria-selected="false" aria-expanded={open} class="jv-node">
+  <div role="treeitem" aria-selected="false" aria-expanded={open} class="block">
     <button
       type="button"
-      class="jv-toggle-row"
-      onclick={() => (open = !open)}
-      aria-label="{open ? 'Collapse' : 'Expand'} {k ?? (isArr ? 'array' : 'object')}"
+      aria-label={`${open ? 'Collapse' : 'Expand'} ${k ?? (isArr ? 'array' : 'object')}`}
+      class="flex w-full cursor-pointer items-baseline border-0 bg-transparent px-3 py-px text-left font-mono text-12 leading-[1.8] hover:bg-divider focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-brand-05"
       style:padding-left="{indent}px"
+      onclick={() => (open = !open)}
     >
-      <span class="jv-caret" aria-hidden="true">{open ? '▾' : '▸'}</span>
-      {#if k != null}<span class="jv-key">"{k}"</span><span class="jv-colon">: </span>{/if}
-      <span class="jv-bracket">{ob}</span>
-      {#if !open}<span class="jv-count">&thinsp;{count}&thinsp;</span><span class="jv-bracket">{cb}</span>{/if}
+      <span class="mr-1 inline-block w-3 text-text-4" aria-hidden="true">{open ? '▾' : '▸'}</span>
+      {#if k != null}<span class={KEY}>"{k}"</span><span class={COLON}>: </span>{/if}
+      <span class={BRACKET}>{ob}</span>
+      {#if !open}<span class={COUNT}>&thinsp;{count}&thinsp;</span><span class={BRACKET}>{cb}</span>{/if}
     </button>
     {#if open}
-      <div role="group" class="jv-children">
+      <div role="group" class="block">
         {#each entries as { ek, ev, arrItem } (ek)}
           <JsonViewerNode v={ev} k={arrItem ? undefined : ek} depth={depth + 1} {maxDepth} {startOpen} />
         {/each}
-        <div class="jv-row jv-close" style:padding-left="{indent}px">
-          <span class="jv-bracket">{cb}</span>
+        <div class="px-3 py-px" style:padding-left="{indent + 12}px">
+          <span class={BRACKET}>{cb}</span>
         </div>
       </div>
     {/if}

package/src/lib/components/KVTable.svelte

@@ -7,15 +7,21 @@
   let { rows = [], caption = undefined }: Props = $props();
 </script>
 
-<table class="kv-table">
+<table class="w-full border-collapse text-13">
   {#if caption}
     <caption class="sr-only">{caption}</caption>
   {/if}
   <tbody>
     {#each rows as { label, value, valueColor }}
-      <tr class="kv-table__row">
-        <th scope="row" class="kv-table__label">{label}</th>
-        <td class="kv-table__value" style={valueColor ? `color:${valueColor}` : undefined}>{value}</td>
+      <tr class="border-b border-border-1 last:border-b-0">
+        <th
+          scope="row"
+          class="w-2/5 whitespace-nowrap py-1.5 pr-3 text-left align-top font-medium text-text-3"
+        >{label}</th>
+        <td
+          class="py-1.5 align-top text-text-1 break-words"
+          style={valueColor ? `color:${valueColor}` : undefined}
+        >{value}</td>
       </tr>
     {/each}
   </tbody>

package/src/lib/components/KanbanBoard.svelte

@@ -14,8 +14,6 @@
 </script>
 
 <script lang="ts">
-
-
   interface Props {
     columns: KanbanColumn[];
     onCardMove?: ((cardId: string, fromColId: string, toColId: string) => void) | undefined;
@@ -35,7 +33,7 @@
   function say(msg: string) { announce = msg; }
 
   function colOf(cardId: string): KanbanColumn | undefined {
-    return columns.find(c => c.cards.some(k => k.id === cardId));
+    return columns.find((c) => c.cards.some((k) => k.id === cardId));
   }
 
   function handleKeyDown(e: KeyboardEvent, card: KanbanCard, col: KanbanColumn) {
@@ -54,7 +52,7 @@
       say('Move cancelled.');
     } else if ((e.key === 'ArrowLeft' || e.key === 'ArrowRight') && grabbed?.cardId === card.id) {
       e.preventDefault();
-      const idx = columns.findIndex(c => c.id === grabbed!.colId);
+      const idx = columns.findIndex((c) => c.id === grabbed!.colId);
       const nextIdx = e.key === 'ArrowLeft' ? idx - 1 : idx + 1;
       if (nextIdx < 0 || nextIdx >= columns.length) return;
       const nextCol = columns[nextIdx];
@@ -79,8 +77,8 @@
   function handleDrop(e: DragEvent, toColId: string) {
     e.preventDefault();
     if (!dragSrc || dragSrc.colId === toColId) { dragSrc = null; dragOverCol = null; return; }
-    const card = colOf(dragSrc.cardId)?.cards.find(c => c.id === dragSrc!.cardId);
-    const toCol = columns.find(c => c.id === toColId);
+    const card = colOf(dragSrc.cardId)?.cards.find((c) => c.id === dragSrc!.cardId);
+    const toCol = columns.find((c) => c.id === toColId);
     onCardMove?.(dragSrc.cardId, dragSrc.colId, toColId);
     if (card && toCol) say(`Moved ${card.title} to ${toCol.title}.`);
     dragSrc = null;
@@ -88,7 +86,7 @@
   }
 </script>
 
-<div class="kanban" role="region" aria-label={ariaLabel}>
+<div role="region" aria-label={ariaLabel}>
   <span
     id={announceId}
     role="status"
@@ -97,49 +95,53 @@
     class="sr-only"
   >{announce}</span>
 
-  <div class="kanban-board" role="list">
+  <div class="flex gap-3 overflow-x-auto" role="list">
     {#each columns as col (col.id)}
       <div
-        class="kanban-col"
-        class:kanban-col--over={dragOverCol === col.id}
+        data-over={dragOverCol === col.id ? 'true' : undefined}
         role="listitem"
-        ondragover={e => handleDragOver(e, col.id)}
+        class="flex min-w-[240px] flex-1 flex-col gap-2 rounded-lg border border-border-1 bg-divider p-2 data-[over=true]:border-brand-05/40 data-[over=true]:bg-brand-05/[0.04]"
+        ondragover={(e) => handleDragOver(e, col.id)}
         ondragleave={() => { dragOverCol = null; }}
-        ondrop={e => handleDrop(e, col.id)}
+        ondrop={(e) => handleDrop(e, col.id)}
       >
-        <div class="kanban-col-header">
+        <div class="flex items-center gap-2 px-1 pt-0.5">
           {#if col.color}
-            <span class="kanban-col-dot" style="background:{col.color}" aria-hidden="true"></span>
+            <span class="inline-block h-2 w-2 shrink-0 rounded-full" style="background:{col.color}" aria-hidden="true"></span>
           {/if}
-          <span class="kanban-col-title">{col.title}</span>
-          <span class="kanban-col-count" aria-label="{col.cards.length} card{col.cards.length !== 1 ? 's' : ''}">
+          <span class="flex-1 text-12 font-semibold uppercase tracking-[0.05em] text-text-3">{col.title}</span>
+          <span
+            class="rounded bg-row-active px-1.5 py-0.5 text-11 text-text-4 tabular-nums"
+            aria-label={`${col.cards.length} card${col.cards.length !== 1 ? 's' : ''}`}
+          >
             {col.cards.length}
           </span>
         </div>
 
-        <ul class="kanban-cards" aria-label="{col.title} cards">
-          {#each col.cards as card (card.id)}
+        <ul class="m-0 flex list-none flex-col gap-1.5 p-0" aria-label={`${col.title} cards`}>
+          {#each col.cards as card (col.id + '/' + card.id)}
             {@const isGrabbed = grabbed?.cardId === card.id}
-            <li class="kanban-card-item" class:is-grabbed={isGrabbed}>
+            <li>
               <button
                 bind:this={cardRefs[card.id]}
                 type="button"
-                class="kanban-card"
                 draggable={true}
                 aria-pressed={isGrabbed}
-                aria-label="{card.title}{card.subtitle ? `, ${card.subtitle}` : ''}{card.meta ? `, ${card.meta}` : ''}. {isGrabbed ? 'Moving. Use arrow keys to change column, Space to drop, Escape to cancel.' : 'Press Space to move.'}"
-                onkeydown={e => handleKeyDown(e, card, col)}
-                ondragstart={e => handleDragStart(e, card.id, col.id)}
+                aria-label={`${card.title}${card.subtitle ? `, ${card.subtitle}` : ''}${card.meta ? `, ${card.meta}` : ''}. ${isGrabbed ? 'Moving. Use arrow keys to change column, Space to drop, Escape to cancel.' : 'Press Space to move.'}`}
+                data-grabbed={isGrabbed ? 'true' : undefined}
+                class="flex w-full cursor-grab flex-col items-start gap-0.5 rounded-md border border-border-1 bg-bg-1 p-2 text-left active:cursor-grabbing hover:border-border-3 data-[grabbed=true]:border-brand-05 data-[grabbed=true]:bg-brand-05/[0.08] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
+                onkeydown={(e) => handleKeyDown(e, card, col)}
+                ondragstart={(e) => handleDragStart(e, card.id, col.id)}
                 ondragend={() => { dragSrc = null; dragOverCol = null; }}
               >
-                <span class="kanban-card-title">{card.title}</span>
-                {#if card.subtitle}<span class="kanban-card-sub">{card.subtitle}</span>{/if}
-                {#if card.meta}<span class="kanban-card-meta">{card.meta}</span>{/if}
+                <span class="text-13 font-medium text-text-1">{card.title}</span>
+                {#if card.subtitle}<span class="text-12 text-text-3">{card.subtitle}</span>{/if}
+                {#if card.meta}<span class="text-11 text-text-4">{card.meta}</span>{/if}
               </button>
             </li>
           {/each}
           {#if col.cards.length === 0}
-            <li class="kanban-empty" role="note" aria-label="{col.title} is empty">Empty</li>
+            <li class="rounded-md border border-dashed border-border-1 p-3 text-center text-11 text-text-4" role="note" aria-label={`${col.title} is empty`}>Empty</li>
           {/if}
         </ul>
       </div>

package/src/lib/components/Kbd.svelte

@@ -5,16 +5,19 @@
   }
 
   let { keys, class: className = '' }: Props = $props();
-  
 
   let parts = $derived(typeof keys === 'string' ? keys.split('+') : keys);
 </script>
 
-<kbd class="kbd {className}">
+<kbd class="inline-flex shrink-0 items-center gap-px font-mono text-[11px] leading-none {className}">
   {#each parts as key, i}
-    <span class="kbd__segment">
-      {#if i > 0}<span class="kbd__plus" aria-hidden="true">+</span>{/if}
-      <kbd class="kbd__key">{key}</kbd>
+    <span class="inline-flex items-center gap-0.5">
+      {#if i > 0}
+        <span class="px-px font-sans text-[10px] leading-none text-text-4" aria-hidden="true">+</span>
+      {/if}
+      <kbd
+        class="inline-flex min-w-[18px] items-center justify-center rounded border border-b-2 border-border-3 bg-row-active px-1.5 py-0.5 font-[inherit] text-text-3 [box-shadow:0_1px_0_rgba(0,0,0,0.4)]"
+      >{key}</kbd>
     </span>
   {/each}
 </kbd>

package/src/lib/components/Label.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<!--
+  Small categorical label - the line above a KPI number ("Active devices"),
+  the cell heading on a hand-rolled form row, the tag on a definition list
+  term, anywhere a 13 px / medium-weight tag belongs without the full form
+  field machinery. Renders <span class="dash-ui-label"> so the
+  .dash-ui-label rule in @w5-ui/tokens/tokens.css applies the canonical
+  13 px / 500 weight, 1.25 line-height, and --text-2 colour. Stops
+  userland reaching for a one-off font-size: 13px; font-weight: 500; duo
+  on every KPI label or hand-rolled form caption. Typed equivalent of
+  <span class="dash-ui-label"> (the userland-facing semantic class
+  documented in Foundations / Type). For real form fields prefer
+  <Field label="..."> - it wires htmlFor, required, hint, and error
+  semantics for you. For KPI tiles prefer the <Stat> label slot. Reach
+  for <Label> only when hand-rolling a tile or row where the higher-level
+  component doesn't fit.
+-->
+<span class="dash-ui-label {className}">
+  {@render children?.()}
+</span>

package/src/lib/components/LogViewer.svelte

@@ -37,24 +37,28 @@
     info: '#006FFF',
     debug: '#4A4B53',
   };
+  const SEV_TXT: Record<string, string> = {
+    error: 'text-status-danger',
+    warn: 'text-status-warning',
+    info: 'text-brand-05',
+    debug: 'text-text-4',
+  };
 
-  // Replaces `afterUpdate`: `$effect` runs after every DOM commit triggered
-  // by reactive dependencies. Reading `entries` ensures we re-scroll on
-  // every new batch.
   $effect(() => {
     void entries.length;
     if (follow && bodyEl) bodyEl.scrollTop = bodyEl.scrollHeight;
   });
 </script>
 
-<div class="lv {className}">
-  <div class="lv__toolbar">
-    <span class="lv__count">{entries.length} entries</span>
+<div class="flex flex-col gap-1 rounded-lg border border-border-1 bg-bg-page {className}">
+  <div class="flex items-center justify-between border-b border-border-1 px-3 py-1.5 text-12 text-text-4">
+    <span class="tabular-nums">{entries.length} entries</span>
     <button
       type="button"
-      class="lv__follow{follow ? ' lv__follow--on' : ''}"
-      onclick={() => { follow = !follow; }}
+      data-on={follow ? 'true' : undefined}
       aria-pressed={follow}
+      class="inline-flex h-6 cursor-pointer items-center rounded border border-border-2 bg-transparent px-2 text-12 text-text-3 transition-colors duration-100 hover:bg-row-hover hover:text-text-1 data-[on=true]:border-brand-05 data-[on=true]:bg-brand-05/[0.10] data-[on=true]:text-brand-05 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
+      onclick={() => { follow = !follow; }}
     >Follow</button>
   </div>
   <div
@@ -62,12 +66,12 @@
     role="log"
     aria-live="polite"
     aria-label={ariaLabel}
-    class="lv__body"
+    class="overflow-auto"
     style="height:{height}px;"
   >
-    <table class="lv__table">
+    <table class="w-full border-collapse font-mono text-12">
       <caption class="sr-only">{ariaLabel}</caption>
-      <thead>
+      <thead class="sr-only">
         <tr>
           <th scope="col">Severity</th>
           <th scope="col">Source</th>
@@ -79,18 +83,18 @@
       </thead>
       <tbody>
         {#each entries as e, i (e.id ?? i)}
-          <tr>
-            <td>
-              <span class="lv__sev lv__sev--{e.level}">
-                <span class="lv__dot" style="background:{SEV_DOT[e.level] ?? SEV_DOT.info};" aria-hidden="true"></span>
+          <tr class="border-b border-divider last:border-b-0 hover:bg-divider">
+            <td class="whitespace-nowrap py-1 pl-3 pr-2">
+              <span class="inline-flex items-center gap-1 {SEV_TXT[e.level] ?? SEV_TXT.info}">
+                <span class="inline-block h-1.5 w-1.5 rounded-full" style="background:{SEV_DOT[e.level] ?? SEV_DOT.info};" aria-hidden="true"></span>
                 {e.level === 'error' ? 'crit' : e.level}
               </span>
             </td>
-            <td class="lv__cat">{e.category ?? ''}</td>
-            <td class="lv__time">{e.timestamp}</td>
-            <td class="lv__event">{e.event}</td>
-            <td class="lv__subject">{e.subject ?? ''}</td>
-            <td class="lv__detail">{e.detail ?? ''}</td>
+            <td class="whitespace-nowrap px-2 py-1 text-text-4">{e.category ?? ''}</td>
+            <td class="whitespace-nowrap px-2 py-1 text-text-4 tabular-nums">{e.timestamp}</td>
+            <td class="whitespace-nowrap px-2 py-1 text-text-2">{e.event}</td>
+            <td class="whitespace-nowrap px-2 py-1 text-text-2">{e.subject ?? ''}</td>
+            <td class="px-2 py-1 pr-3 text-text-3">{e.detail ?? ''}</td>
           </tr>
         {/each}
       </tbody>

package/src/lib/components/MACInput.svelte

@@ -3,8 +3,6 @@
 </script>
 
 <script lang="ts">
-  
-
   interface Props {
     label?: string | undefined;
     value?: string;
@@ -75,31 +73,39 @@
       setTimeout(() => focusAt(5), 0);
     }
   }
+
+  const PAIR_CLS =
+    'w-6 border-0 bg-transparent p-0 text-center font-mono text-13 uppercase text-text-1 outline-none';
 </script>
 
-<div class="mac-input-wrapper {className}">
+<div class={className}>
   {#if label}
-    <label for="{uid}-0" class="mac-input__label">{label}</label>
+    <label for="{uid}-0" class="text-12 text-text-4">{label}</label>
   {/if}
-  <div class="mac-input{disabled ? ' mac-input--disabled' : ''}" role="group" aria-label={label ?? 'MAC address'}>
+  <div
+    role="group"
+    aria-label={label ?? 'MAC address'}
+    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 pairs as pair, i}
       <input
         bind:this={inputs[i]}
         id={i === 0 ? `${uid}-0` : undefined}
         type="text"
         inputmode="text"
-        aria-label="Byte {i + 1} of 6"
+        aria-label={`Byte ${i + 1} of 6`}
         value={pair}
         {disabled}
         maxlength={2}
-        class="mac-input__pair"
+        class={PAIR_CLS}
         oninput={(e) => commitPair(i, e.currentTarget.value)}
         onkeydown={(e) => handleKey(i, e)}
         onpaste={handlePaste}
         onfocus={(e) => e.currentTarget.select()}
       />
       {#if i < 5}
-        <span class="mac-input__colon" aria-hidden="true">:</span>
+        <span aria-hidden="true" class="select-none text-13 leading-none text-text-4">:</span>
       {/if}
     {/each}
   </div>