@w5-ui/svelte 0.2.1 → 0.3.0

package/src/lib/components/BodyLg.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<!--
+  Longer-form prose paragraph - settings descriptions, onboarding copy,
+  empty-state explanations, anywhere the default 14 px body feels too
+  cramped for multi-sentence reading. Renders <p class="dash-ui-body-lg">
+  so the .dash-ui-body-lg rule in @w5-ui/tokens/tokens.css applies the
+  canonical 16 px / regular weight, 1.55 line-height, and --text-2
+  colour pair. Stops userland reaching for a one-off font-size: 16px;
+  line-height: 1.6; duo on every settings description. Typed equivalent
+  of <p class="dash-ui-body-lg"> (the userland-facing semantic class
+  documented in Foundations / Type). Reach for <BodyLg> when the cliff
+  between 1.25 (heading) and 1.4 (default body) feels too dense for a
+  2-3 sentence paragraph; keep the default .dash-ui-body (14 / 1.4) for
+  table cells, table footnotes, and single-line labels.
+-->
+<p class="dash-ui-body-lg {className}">
+  {@render children?.()}
+</p>

package/src/lib/components/Breadcrumb.svelte

@@ -1,34 +1,41 @@
 <script module lang="ts">
-  export interface BreadcrumbItem { label: string; href?: string; }
+  export interface BreadcrumbItem { label: string; href?: string }
 </script>
 
 <script lang="ts">
-  
   interface Props {
     items?: BreadcrumbItem[];
     class?: string;
     onnavigate?: (payload: number) => void;
   }
 
-  let { items = [], class: className = '',
-    onnavigate,
-  }: Props = $props();
+  let { items = [], class: className = '', onnavigate }: Props = $props();
 </script>
 
-<nav aria-label="Breadcrumb" class="breadcrumb {className}">
-  <ol class="breadcrumb__list">
+<nav aria-label="Breadcrumb" class={className}>
+  <ol class="m-0 flex flex-wrap items-center gap-x-1.5 gap-y-0.5 p-0 text-12 [list-style:none]">
     {#each items as item, i}
       {@const isLast = i === items.length - 1}
-      <li class="breadcrumb__item">
+      <li class="flex items-center gap-1.5">
         {#if isLast}
-          <span aria-current="page" class="breadcrumb__current">{item.label}</span>
+          <span
+            aria-current="page"
+            class="font-medium text-text-2"
+          >{item.label}</span>
         {:else if item.href}
-          <a href={item.href} class="breadcrumb__link">{item.label}</a>
+          <a
+            href={item.href}
+            class="cursor-pointer text-text-4 no-underline transition-colors duration-100 hover:text-text-2 focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
+          >{item.label}</a>
         {:else}
-          <button type="button" class="breadcrumb__link" onclick={() => onnavigate?.(i)}>{item.label}</button>
+          <button
+            type="button"
+            class="cursor-pointer border-0 bg-transparent p-0 font-[inherit] text-text-4 transition-colors duration-100 hover:text-text-2 focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
+            onclick={() => onnavigate?.(i)}
+          >{item.label}</button>
         {/if}
         {#if !isLast}
-          <span aria-hidden="true" class="breadcrumb__sep">/</span>
+          <span class="select-none text-border-3" aria-hidden="true">/</span>
         {/if}
       </li>
     {/each}

package/src/lib/components/Button.svelte

@@ -12,6 +12,14 @@
     class?: string;
     style?: string;
     'aria-label'?: string | undefined;
+    /** ARIA popup trigger: `'dialog'` for popover-style buttons that open
+     * an inline calendar / picker; mirrors the React `<Button>` API and the
+     * actual prop usage in DatePicker / DateRangePicker / TimeRange. */
+    'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | boolean | undefined;
+    /** Expanded state for popup triggers. */
+    'aria-expanded'?: boolean | undefined;
+    /** ID of the controlled popup/dialog. */
+    'aria-controls'?: string | undefined;
     onclick?: (event: MouseEvent) => void;
     children?: Snippet;
   }
@@ -26,17 +34,38 @@
     class: className = '',
     style = '',
     'aria-label': ariaLabel = undefined,
+    'aria-haspopup': ariaHasPopup = undefined,
+    'aria-expanded': ariaExpanded = undefined,
+    'aria-controls': ariaControls = undefined,
     onclick,
     children,
   }: Props = $props();
+
+  // Pre-compose variant strings so Tailwind's static scanner picks them up.
+  // Motif-aware:
+  //   primary: brand-blue, always white text (works against blue in both motifs).
+  //   ghost:   transparent surface with motif-aware text/border + hover.
+  //   danger:  semantic status-danger text + faded border.
+  const VARIANT: Record<NonNullable<Props['variant']>, string> = {
+    primary: 'bg-brand-05 text-white hover:bg-brand-06 border-transparent',
+    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',
+  };
 </script>
 
 <button
   {type}
   {title}
   aria-label={ariaLabel}
+  aria-haspopup={ariaHasPopup}
+  aria-expanded={ariaExpanded}
+  aria-controls={ariaControls}
   {onclick}
-  class="btn btn-{variant} {iconOnly ? 'btn-icon' : ''} {className}"
+  class="inline-flex h-[30px] cursor-pointer items-center gap-1.5 whitespace-nowrap rounded-md 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
+    {VARIANT[variant]}
+    {iconOnly ? 'w-[30px] justify-center p-0' : ''}
+    {className}"
   {style}
   disabled={disabled || loading}
   aria-busy={loading ? true : undefined}

package/src/lib/components/CIDRInput.svelte

@@ -3,8 +3,6 @@
 </script>
 
 <script lang="ts">
-  
-
   interface Props {
     label?: string | undefined;
     value?: string;
@@ -97,13 +95,23 @@
       setTimeout(() => focusAt(4), 0);
     }
   }
+
+  const OCTET_CLS =
+    'w-9 border-0 bg-transparent p-0 text-center font-mono text-13 text-text-1 outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none';
+  const PREFIX_CLS =
+    'w-7 border-0 bg-transparent p-0 text-center font-mono text-13 text-text-1 outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none';
 </script>
 
-<div class="cidr-input-wrapper {className}">
+<div class={className}>
   {#if label}
-    <label for="{uid}-0" class="cidr-input__label">{label}</label>
+    <label for="{uid}-0" class="text-12 text-text-4">{label}</label>
   {/if}
-  <div class="cidr-input{disabled ? ' cidr-input--disabled' : ''}" role="group" aria-label={label ?? 'CIDR'}>
+  <div
+    role="group"
+    aria-label={label ?? 'CIDR'}
+    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 [0, 1, 2, 3] as i (i)}
       <input
         bind:this={inputs[i]}
@@ -112,20 +120,20 @@
         inputmode="numeric"
         pattern="[0-9]*"
         role="spinbutton"
-        aria-label="Octet {i + 1} of 4"
+        aria-label={`Octet ${i + 1} of 4`}
         aria-valuenow={fields[i] === '' ? 0 : Number(fields[i])}
         aria-valuemin={0}
         aria-valuemax={255}
         value={fields[i]}
         {disabled}
         maxlength={3}
-        class="cidr-input__octet"
+        class={OCTET_CLS}
         oninput={(e) => commitOctet(i, e.currentTarget.value)}
         onkeydown={(e) => handleKey(i, e)}
         onpaste={handlePaste}
         onfocus={(e) => e.currentTarget.select()}
       />
-      <span class="cidr-input__dot" aria-hidden="true">{i < 3 ? '.' : '/'}</span>
+      <span aria-hidden="true" class="select-none text-13 leading-none text-text-4">{i < 3 ? '.' : '/'}</span>
     {/each}
     <input
       bind:this={inputs[4]}
@@ -140,7 +148,7 @@
       value={fields[4]}
       {disabled}
       maxlength={2}
-      class="cidr-input__prefix"
+      class={PREFIX_CLS}
       oninput={(e) => commitPrefix(e.currentTarget.value)}
       onkeydown={(e) => handleKey(4, e)}
       onpaste={handlePaste}

package/src/lib/components/Callout.svelte

@@ -10,33 +10,54 @@
   }
 
   let { variant = 'info', title = undefined, children }: Props = $props();
+
+  // Per-variant chrome ramp (bg + left border + body text colour) and a
+  // separate title colour. Pre-composed so Tailwind v4's static scanner
+  // picks them up.
+  const VARIANT: Record<CalloutVariant, string> = {
+    info: 'bg-brand-05/[0.08] border-l-brand-05 text-status-info',
+    success: 'bg-status-success/[0.08] border-l-status-success text-status-success',
+    warn: 'bg-status-warning/[0.08] border-l-status-warning text-status-warning',
+    danger: 'bg-status-danger/[0.08] border-l-status-danger text-status-danger',
+    tip: 'bg-brand-04/[0.08] border-l-brand-04 text-status-info',
+  };
+  const TITLE_COLOUR: Record<CalloutVariant, string> = {
+    info: 'text-status-info',
+    success: 'text-status-success',
+    warn: 'text-status-warning',
+    danger: 'text-status-danger',
+    tip: 'text-status-info',
+  };
 </script>
 
-<div class="callout callout--{variant}" role="note">
+<div
+  role="note"
+  class="flex gap-3 rounded-lg border-l-[3px] px-4 py-3 text-13 leading-[1.5] {VARIANT[variant]}"
+>
   {#if variant === 'info'}
-    <svg class="callout-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+    <svg class="mt-px h-4 w-4 shrink-0" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
       <path fill-rule="evenodd" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1ZM7.25 5.5a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0ZM7 7.5h2v4H7v-4Z" />
     </svg>
   {:else if variant === 'success'}
-    <svg class="callout-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+    <svg class="mt-px h-4 w-4 shrink-0" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
       <path fill-rule="evenodd" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm3.78 5.47-4.25 4.5a.75.75 0 0 1-1.06.03L4.72 9.22a.75.75 0 1 1 1.06-1.06l1.22 1.22 3.72-3.94a.75.75 0 1 1 1.06 1.03Z" />
     </svg>
   {:else if variant === 'warn'}
-    <svg class="callout-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+    <svg class="mt-px h-4 w-4 shrink-0" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
       <path fill-rule="evenodd" d="M8.9 1.6a1 1 0 0 0-1.8 0L.6 13a1 1 0 0 0 .9 1.5h13a1 1 0 0 0 .9-1.5L8.9 1.6ZM7.25 6.5a.75.75 0 1 1 1.5 0v3a.75.75 0 0 1-1.5 0v-3Zm.75 6a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
     </svg>
   {:else if variant === 'danger'}
-    <svg class="callout-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+    <svg class="mt-px h-4 w-4 shrink-0" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
       <path fill-rule="evenodd" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1ZM5.97 5.97a.75.75 0 0 1 1.06 0L8 6.94l.97-.97a.75.75 0 1 1 1.06 1.06L9.06 8l.97.97a.75.75 0 0 1-1.06 1.06L8 9.06l-.97.97a.75.75 0 0 1-1.06-1.06L6.94 8l-.97-.97a.75.75 0 0 1 0-1.06Z" />
     </svg>
   {:else}
-    <svg class="callout-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+    <svg class="mt-px h-4 w-4 shrink-0" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
       <path d="M8 1a5 5 0 0 1 3 9.01V11H5v-.99A5 5 0 0 1 8 1Zm-1 12h2v1.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5V13Z" />
     </svg>
   {/if}
-  <div class="callout-body">
+  <div class="flex-1">
     {#if title}
-      <div class="callout-title">{title}</div>
+      <div class="mb-1 font-semibold {TITLE_COLOUR[variant]}">{title}</div>
     {/if}
     <div>{@render children?.()}</div>
   </div>

package/src/lib/components/Caption.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<!--
+  Small helper / metadata text - "last updated 5 min ago", table footnote,
+  timestamp under a chart, byline beneath a section heading. Renders
+  <span class="dash-ui-caption"> so the .dash-ui-caption rule in
+  @w5-ui/tokens/tokens.css applies the canonical 12 px / regular weight,
+  1.25 line-height, and the muted --text-3 colour. Stops userland reaching
+  for a one-off font-size: 12px; color: #a4a7b5; trio on every caption.
+  Typed equivalent of <span class="dash-ui-caption"> (the userland-facing
+  semantic class documented in Foundations / Type). Use <Caption> for
+  non-essential metadata only: on --depthBg-3 (popovers, drawers) the
+  --text-3 contrast slides toward 4.0:1, so keep primary copy on
+  .dash-ui-body / --text-2. Pair with <Muted> when you want the same
+  colour at the default 14 px body size.
+-->
+<span class="dash-ui-caption {className}">
+  {@render children?.()}
+</span>

package/src/lib/components/Card.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  
   interface Props {
     span?: number | undefined;
     class?: string;
@@ -11,11 +10,20 @@
     span = undefined,
     class: className = '',
     style = '',
-    children
+    children,
   }: Props = $props();
   let spanStyle = $derived(span !== undefined ? `grid-column: span ${span};` : '');
 </script>
 
-<div class="card {className}" style="{spanStyle} {style}">
+<!--
+  Motif-aware card surface: bg via `var(--depthBg-1)` (= `#141415` dark,
+  `#ffffff` light) and border via `var(--border-1)`. The `h3` child
+  styling lives in the consumer slot — Tailwind utilities at the call
+  site, not bundled here.
+-->
+<div
+  class="flex min-w-0 flex-col gap-2 rounded-[8px] border border-border-1 bg-bg-1 px-4 py-3.5 {className}"
+  style="{spanStyle} {style}"
+>
   {@render children?.()}
 </div>

package/src/lib/components/CardMore.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  interface Props {
+    href?: string;
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { href = undefined, class: className = '', children }: Props = $props();
+</script>
+
+<!--
+  Trailing "View all" / "More →" affordance inside a <Card> title row. Renders
+  an <a class="more"> so the `.card h3 .more` rule in
+  @w5-ui/tokens/dashboard.css styles it (muted colour, pointer cursor) and the
+  parent <h3> flex pushes it to the right edge of the title. Pair with <Card>
+  and a plain <h3> for the canonical card title pattern.
+-->
+<a {href} class="more {className}">
+  {@render children?.()}
+</a>

package/src/lib/components/CardTitle.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<!--
+  Title row inside a <Card> tile. Renders a plain <h3> so the `.card h3` rule
+  in @w5-ui/tokens/dashboard.css sets the canonical 12 px size, weight 500,
+  --text-3 (muted) colour, and flex layout (title on the left, any trailing
+  <Pill> / <CardMore> pushed to the right edge). Stops userland reaching for
+  an <h2> or a custom <div class="title"> that would skip the rule and read
+  broken inside the tile. Pair with <CardMore> for a "View all →" affordance.
+-->
+<h3 class={className}>
+  {@render children?.()}
+</h3>

package/src/lib/components/Carousel.svelte

@@ -6,7 +6,6 @@
   }
 
   let { slides = [], label, class: klass = '' }: Props = $props();
-  
 
   let index = $state(0);
 
@@ -19,49 +18,57 @@
 </script>
 
 <section
-  class="carousel {klass}"
+  class="relative overflow-hidden rounded-lg border border-border-1 bg-divider {klass}"
   aria-roledescription="carousel"
   aria-label={label}
 >
-  <div class="carousel-track" aria-live="polite" aria-atomic="false">
+  <div class="relative min-h-[140px]" aria-live="polite" aria-atomic="false">
     {#each slides as slide, i (slide.id)}
       <div
         role="group"
         aria-roledescription="slide"
-        aria-label="{i + 1} of {slides.length}"
-        class="carousel-slide{i === index ? ' is-active' : ''}"
+        aria-label={`${i + 1} of ${slides.length}`}
+        data-active={i === index ? 'true' : undefined}
+        class="absolute inset-0 flex items-stretch gap-3 p-4 opacity-0 transition-opacity duration-200 data-[active=true]:opacity-100 data-[active=true]:relative"
         aria-hidden={i !== index ? true : undefined}
       >
         {#if slide.color}
-          <div class="carousel-slide-accent" style="background:{slide.color}" aria-hidden="true"></div>
+          <div class="w-1 shrink-0 rounded" style="background:{slide.color}" aria-hidden="true"></div>
         {/if}
-        <div class="carousel-slide-body">
-          <div class="carousel-slide-title">{slide.title}</div>
+        <div class="min-w-0 flex-1">
+          <div class="text-15 font-semibold text-text-1">{slide.title}</div>
           {#if slide.description}
-            <div class="carousel-slide-desc">{slide.description}</div>
+            <div class="mt-1 text-13 text-text-3">{slide.description}</div>
           {/if}
         </div>
       </div>
     {/each}
   </div>
-  <div class="carousel-controls">
-    <button type="button" class="carousel-btn" aria-label="Previous slide" onclick={prev}
-      >&#8249;</button
-    >
-    <div role="tablist" aria-label="Choose slide to display" class="carousel-indicators">
+  <div class="flex items-center justify-between border-t border-border-1 bg-bg-page px-2 py-1.5">
+    <button
+      type="button"
+      aria-label="Previous slide"
+      class="inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded border-0 bg-transparent text-text-4 hover:bg-row-hover hover:text-text-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
+      onclick={prev}
+    >&#8249;</button>
+    <div role="tablist" aria-label="Choose slide to display" class="flex items-center gap-1.5">
       {#each slides as slide, i (slide.id)}
         <button
           type="button"
           role="tab"
           aria-selected={i === index}
-          aria-label="Slide {i + 1}: {slide.title}"
-          class="carousel-dot{i === index ? ' is-active' : ''}"
+          aria-label={`Slide ${i + 1}: ${slide.title}`}
+          data-active={i === index ? 'true' : undefined}
+          class="h-1.5 w-1.5 cursor-pointer rounded-full border-0 bg-border-3 transition-all duration-150 hover:bg-text-3 data-[active=true]:w-4 data-[active=true]:bg-brand-05"
           onclick={() => (index = i)}
-></button>
+        ></button>
       {/each}
     </div>
-    <button type="button" class="carousel-btn" aria-label="Next slide" onclick={next}
-      >&#8250;</button
-    >
+    <button
+      type="button"
+      aria-label="Next slide"
+      class="inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded border-0 bg-transparent text-text-4 hover:bg-row-hover hover:text-text-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
+      onclick={next}
+    >&#8250;</button>
   </div>
 </section>

package/src/lib/components/Checkbox.svelte

@@ -38,16 +38,36 @@
       el.indeterminate = indeterminate;
     }
   });
+
+  // The ✓ + indeterminate dash glyphs ship as inline SVG data URLs so the
+  // checkbox stays a single `<input type="checkbox">` (no wrapping span,
+  // native AT behaviour, native focus ring), with the marks drawn by
+  // `background-image`. Tailwind v4 supports arbitrary-value `bg-[url(...)]`
+  // but the SVG payload would have to live inline in a class string; we
+  // keep these as `var(...)` references via a tiny inline style so the
+  // class string stays scannable + the icons stay editable.
+  const CHECK_SVG = `url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8.5l3 3 6.5-6' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E")`;
+  const DASH_SVG = `url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8h8' stroke='%23fff' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E")`;
+
+  // Compose the background image conditionally for the input style.
+  let bgImage = $derived(indeterminate ? DASH_SVG : checked ? CHECK_SVG : 'none');
+
+  const INPUT_CLS =
+    'relative inline-block h-4 w-4 min-w-4 cursor-pointer appearance-none rounded-sm border-[1.5px] border-border-3 bg-bg-1 align-middle bg-[length:100%_100%] bg-center bg-no-repeat transition-[border-color,background-color] duration-100 hover:border-text-3 checked:border-brand-05 checked:bg-brand-05 indeterminate:border-brand-05 indeterminate:bg-brand-05 disabled:cursor-not-allowed disabled:opacity-40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05';
 </script>
 
 {#if label}
-  <label class="checkbox-label" for={inputId}>
+  <label
+    class="inline-flex cursor-pointer select-none items-center gap-2 text-13 text-text-2 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-40"
+    for={inputId}
+  >
     <input
       bind:this={el}
       type="checkbox"
       id={inputId}
       {disabled}
-      class="checkbox"
+      class={INPUT_CLS}
+      style="background-image: {bgImage};"
       {onchange}
       {...rest}
     />
@@ -59,7 +79,8 @@
     type="checkbox"
     id={inputId}
     {disabled}
-    class="checkbox"
+    class={INPUT_CLS}
+    style="background-image: {bgImage};"
     {onchange}
     {...rest}
   />

package/src/lib/components/Code.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<!--
+  Inline code snippet for key names, config paths, environment variables
+  and other short literal strings that read inside body copy. Renders a
+  <code class="dash-ui-code"> so the .dash-ui-code rule in
+  @w5-ui/tokens/css applies the canonical JetBrains Mono family, 12 px
+  size, muted text colour, and the inset --depthBg-2 chip background
+  with a 1 px border. Stops userland reaching for bare <code> (which
+  falls back to a serif monospace on #fff) or inline font-family /
+  background overrides on every snippet. Typed equivalent of
+  <code class="dash-ui-code"> (reach for <CodeBlock> when the snippet
+  wraps to multiple lines; this primitive is for the inline case).
+-->
+<code class="dash-ui-code {className}">
+  {@render children?.()}
+</code>

package/src/lib/components/CodeBlock.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onDestroy } from 'svelte';
+
   interface Props {
     code?: string;
     label?: string;
@@ -11,9 +12,8 @@
     code = '',
     label = 'Code block',
     language = '',
-    class: className = ''
+    class: className = '',
   }: Props = $props();
-  
 
   let copied = $state(false);
   let timer: ReturnType<typeof setTimeout> | null = null;
@@ -29,17 +29,18 @@
   onDestroy(() => { if (timer) clearTimeout(timer); });
 </script>
 
-<div role="region" aria-label={label} class="code-block {className}">
-  <div class="code-block__header">
+<div role="region" aria-label={label} class="overflow-hidden rounded-lg border border-border-2 bg-bg-page {className}">
+  <div class="flex min-h-8 items-center justify-between border-b border-border-1 bg-bg-page py-1.5 pl-3 pr-2">
     {#if language}
-      <span class="code-block__lang">{language}</span>
+      <span class="font-mono text-11 uppercase tracking-[0.05em] text-text-4">{language}</span>
     {:else}
       <span></span>
     {/if}
     <button
       type="button"
-      class="copy-btn{copied ? ' copy-btn--done' : ''}"
+      data-copied={copied ? 'true' : undefined}
       aria-label={copied ? 'Copied!' : 'Copy code'}
+      class="inline-flex h-[22px] w-[22px] shrink-0 cursor-pointer items-center justify-center rounded border-0 bg-transparent text-text-4 transition-[color,background-color] duration-100 hover:bg-row-hover hover:text-text-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05 data-[copied=true]:text-status-success data-[copied=true]:hover:bg-status-success/10 data-[copied=true]:hover:text-status-success"
       onclick={handleCopy}
     >
       {#if copied}
@@ -54,5 +55,5 @@
       {/if}
     </button>
   </div>
-  <pre class="code-block__pre"><code class="code-block__code">{code}</code></pre>
+  <pre class="m-0 overflow-x-auto px-3.5 py-3"><code class="whitespace-pre font-mono text-12 leading-[1.6] text-text-2">{code}</code></pre>
 </div>

package/src/lib/components/ColorPicker.svelte

@@ -35,7 +35,7 @@
     value = $bindable(COLOR_SWATCHES[0].value),
     swatches = COLOR_SWATCHES,
     disabled = false,
-    onChange = undefined
+    onChange = undefined,
   }: Props = $props();
 
   const groupId = `dash-ui-cp-${++counter}`;
@@ -48,8 +48,7 @@
     const idx = cells.findIndex((c) => c.value === value);
     let next = idx;
     if (e.key === 'ArrowRight' || e.key === 'ArrowDown') next = (idx + 1) % cells.length;
-    else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp')
-      next = (idx - 1 + cells.length) % cells.length;
+    else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') next = (idx - 1 + cells.length) % cells.length;
     else if (e.key === 'Home') next = 0;
     else if (e.key === 'End') next = cells.length - 1;
     else return;
@@ -62,28 +61,29 @@
   let hasMatch = $derived(swatches.some((s) => s.value === value));
 </script>
 
-<div class="color-picker{disabled ? ' color-picker--disabled' : ''}">
-  <div id="{groupId}-label" class="color-picker__label{srOnlyLabel ? ' sr-only' : ''}"
-    >{label}</div
-  >
+<div
+  data-disabled={disabled ? 'true' : undefined}
+  class="inline-flex flex-col gap-1.5 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-40"
+>
+  <div id="{groupId}-label" class={srOnlyLabel ? 'sr-only' : 'text-12 text-text-4'}>{label}</div>
   <div
     role="radiogroup"
     aria-labelledby="{groupId}-label"
-    class="color-picker__grid"
-    tabindex="-1"
+    class="flex flex-wrap gap-1.5"
+    tabindex={-1}
     onkeydown={handleKeyDown}
   >
     {#each swatches as sw, i}
       {@const checked = sw.value === value}
       {@const tabIdx = checked || (i === 0 && !hasMatch) ? 0 : -1}
-      <label class="color-picker__swatch" title={sw.label}>
+      <label class="group/sw inline-flex cursor-pointer" title={sw.label}>
         <input
           type="radio"
           name={groupId}
           value={sw.value}
           {checked}
           {disabled}
-          class="sr-only"
+          class="peer sr-only"
           tabindex={tabIdx}
           aria-label={sw.label}
           onchange={() => {
@@ -92,10 +92,10 @@
           }}
         />
         <span
-          class="color-picker__circle{checked ? ' color-picker__circle--selected' : ''}"
+          class="inline-block h-5 w-5 rounded-full transition-[transform,box-shadow] duration-100 hover:scale-110 motion-reduce:hover:scale-100 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-brand-05 {checked ? 'shadow-[0_0_0_2px_#0a0a0b,0_0_0_4px_#fff]' : ''}"
           style="background:{sw.color}"
           aria-hidden="true"
-></span>
+        ></span>
       </label>
     {/each}
   </div>