@w5-ui/svelte 0.1.0

package/src/lib/components/BarChart.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  export interface BarChartSeries {
+    label: string;
+    color: string;
+    values: number[];
+  }
+
+  export let series: BarChartSeries[] = [];
+  export let labels: string[] = [];
+  export let height: number = 160;
+  export let ariaLabel: string = 'Bar chart';
+
+  const VW = 400;
+  const PAD = { t: 12, r: 8, b: 28, l: 8 };
+
+  $: n = series[0]?.values.length ?? 0;
+  $: m = series.length;
+  $: maxV = series.length ? Math.max(...series.flatMap((s) => s.values)) || 1 : 1;
+  $: chartW = VW - PAD.l - PAD.r;
+  $: chartH = height - PAD.t - PAD.b;
+  $: bot = PAD.t + chartH;
+  $: gw = n > 0 ? chartW / n : chartW;
+  $: gap = gw * 0.15;
+  $: barW = Math.max((gw - gap * (m + 1)) / m, 1);
+
+  $: gridLines = [0.25, 0.5, 0.75, 1].map((f) => PAD.t + (1 - f) * chartH);
+
+  $: bars = series.flatMap((s, si) =>
+    s.values.map((v, gi) => {
+      const x = PAD.l + gi * gw + gap * (si + 1) + barW * si;
+      const bh = (v / maxV) * chartH;
+      return { x: x.toFixed(1), y: (bot - bh).toFixed(1), w: barW.toFixed(1), h: bh.toFixed(1), color: s.color, key: `${si}-${gi}` };
+    }),
+  );
+</script>
+
+<div role="img" aria-label={ariaLabel} style="width:100%;">
+  <svg viewBox="0 0 {VW} {height}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+    {#each gridLines as y}
+      <line x1={PAD.l} y1={y} x2={VW - PAD.r} y2={y} stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+    {/each}
+    {#each bars as b (b.key)}
+      <rect x={b.x} y={b.y} width={b.w} height={b.h} fill={b.color} fill-opacity="0.9" rx="2" />
+    {/each}
+    {#if labels.length > 0}
+      {#each labels as lbl, i}
+        {@const x = (PAD.l + (i + 0.5) * gw).toFixed(1)}
+        <text x={x} y={height - 4} text-anchor="middle" fill="#6E7079" font-size="9">{lbl}</text>
+      {/each}
+    {/if}
+  </svg>
+</div>

package/src/lib/components/BeeswarmChart.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  export interface BeeswarmSeries {
+    label: string;
+    points: number[];
+    color?: string;
+  }
+
+  export let series: BeeswarmSeries[] = [];
+  export let yRange: [number, number] | undefined = undefined;
+  export let height = 200;
+  export let unit = '';
+  export let dotRadius = 4;
+  export let ariaLabel = 'Beeswarm chart';
+
+  const PALETTE = ['#006FFF', '#00C875', '#FF7B7B', '#F5C26B', '#A78BFA', '#34D399'];
+  const VW = 340;
+  const PAD_L = 28;
+  const PAD_R = 8;
+  const PAD_T = 8;
+  const PAD_B = 24;
+
+  function swarmedPositions(values: number[], tyFn: (v: number) => number, r: number, halfWidth: number): { x: number; y: number }[] {
+    const pts: { x: number; y: number }[] = [];
+    const sorted = [...values].sort((a, b) => a - b);
+    const step = r * 2 + 0.5;
+    for (const v of sorted) {
+      const cy = tyFn(v);
+      let chosen = 0;
+      let found = false;
+      for (let dist = 0; dist <= halfWidth && !found; dist += step) {
+        const candidates = dist === 0 ? [0] : [dist, -dist];
+        for (const cx of candidates) {
+          if (pts.every((p) => Math.hypot(cx - p.x, cy - p.y) >= r * 2)) {
+            chosen = cx;
+            found = true;
+            break;
+          }
+        }
+      }
+      pts.push({ x: chosen, y: cy });
+    }
+    return pts;
+  }
+
+  $: PLOT_W = VW - PAD_L - PAD_R;
+  $: PLOT_H = height - PAD_T - PAD_B;
+  $: n = series.length || 1;
+  $: colWidth = PLOT_W / n;
+  $: halfWidth = colWidth / 2 - dotRadius;
+  $: allPts = series.flatMap((s) => s.points);
+  $: minV = yRange ? yRange[0] : allPts.length ? Math.min(...allPts) : 0;
+  $: maxV = yRange ? yRange[1] : allPts.length ? Math.max(...allPts) : 1;
+  $: vRange = maxV - minV || 1;
+  $: yTicks = [minV, (minV + maxV) / 2, maxV];
+
+  function ty(v: number): number {
+    return PAD_T + (1 - (v - minV) / vRange) * PLOT_H;
+  }
+
+  function colCx(i: number): number {
+    return PAD_L + (i + 0.5) * colWidth;
+  }
+
+  $: swarmed = series.map((s) => swarmedPositions(s.points, ty, dotRadius, halfWidth));
+</script>
+
+{#if series.length > 0}
+  <div role="img" aria-label={ariaLabel} style="width:100%;">
+    <svg viewBox="0 0 {VW} {height}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+      {#each yTicks as v, i (i)}
+        <line x1={PAD_L} y1={ty(v)} x2={PAD_L + PLOT_W} y2={ty(v)} stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+        <text x={PAD_L - 4} y={ty(v) + 4} fill="#6E7079" font-size="8" text-anchor="end" font-family="inherit">{Math.round(v)}{unit}</text>
+      {/each}
+
+      {#each series as s, si (si)}
+        {@const cx = colCx(si)}
+        {@const color = s.color ?? PALETTE[si % PALETTE.length]}
+        {@const pts = swarmed[si]}
+        <g>
+          {#each pts as p, pi (pi)}
+            <circle cx={cx + p.x} cy={p.y} r={dotRadius} fill={color} fill-opacity="0.75" />
+          {/each}
+          <text x={cx} y={height - 4} fill="#6E7079" font-size="9" text-anchor="middle" font-family="inherit">{s.label}</text>
+        </g>
+      {/each}
+    </svg>
+  </div>
+{/if}

package/src/lib/components/BoxPlot.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  export interface BoxSeries {
+    label: string;
+    q0: number;
+    q1: number;
+    q2: number;
+    q3: number;
+    q4: number;
+    color?: string;
+  }
+
+  export let series: BoxSeries[] = [];
+  export let yRange: [number, number] | undefined = undefined;
+  export let height: number = 160;
+  export let ariaLabel: string = 'Box plot';
+
+  const VW = 400;
+  const PAD = { t: 12, r: 8, b: 28, l: 8 };
+
+  $: allVals = series.flatMap((s) => [s.q0, s.q1, s.q2, s.q3, s.q4]);
+  $: y0 = yRange ? yRange[0] : allVals.length ? Math.min(...allVals) : 0;
+  $: y1 = yRange ? yRange[1] : allVals.length ? Math.max(...allVals) : 1;
+  $: ySpan = y1 - y0 || 1;
+  $: chartW = VW - PAD.l - PAD.r;
+  $: chartH = height - PAD.t - PAD.b;
+  $: slotW = series.length > 0 ? chartW / series.length : chartW;
+
+  $: gridLines = [0.25, 0.5, 0.75, 1].map((f) => (PAD.t + (1 - f) * chartH).toFixed(1));
+
+  $: boxes = series.map((s, i) => {
+    const cx = PAD.l + (i + 0.5) * slotW;
+    const bw = slotW * 0.4;
+    const ty = (v: number) => PAD.t + chartH - ((v - y0) / ySpan) * chartH;
+    return {
+      key: String(i),
+      cx: cx.toFixed(1),
+      color: s.color ?? '#006FFF',
+      label: s.label,
+      whiskerY0: ty(s.q0).toFixed(1),
+      whiskerY4: ty(s.q4).toFixed(1),
+      capX0: (cx - bw / 2).toFixed(1),
+      capX1: (cx + bw / 2).toFixed(1),
+      boxX: (cx - bw / 2).toFixed(1),
+      boxW: bw.toFixed(1),
+      boxY: ty(s.q3).toFixed(1),
+      boxH: (ty(s.q1) - ty(s.q3)).toFixed(1),
+      medY: ty(s.q2).toFixed(1),
+    };
+  });
+</script>
+
+<div role="img" aria-label={ariaLabel} style="width:100%;">
+  <svg viewBox="0 0 {VW} {height}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+    {#each gridLines as y}
+      <line x1={PAD.l} y1={y} x2={VW - PAD.r} y2={y} stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+    {/each}
+    {#each boxes as b (b.key)}
+      <line x1={b.cx} y1={b.whiskerY4} x2={b.cx} y2={b.whiskerY0} stroke={b.color} stroke-width="1.5" stroke-opacity="0.6" />
+      <line x1={b.capX0} y1={b.whiskerY0} x2={b.capX1} y2={b.whiskerY0} stroke={b.color} stroke-width="1.5" stroke-opacity="0.6" />
+      <line x1={b.capX0} y1={b.whiskerY4} x2={b.capX1} y2={b.whiskerY4} stroke={b.color} stroke-width="1.5" stroke-opacity="0.6" />
+      <rect x={b.boxX} y={b.boxY} width={b.boxW} height={b.boxH} fill={b.color} fill-opacity="0.2" stroke={b.color} stroke-width="1.5" stroke-opacity="0.8" rx="2" />
+      <line x1={b.capX0} y1={b.medY} x2={b.capX1} y2={b.medY} stroke={b.color} stroke-width="2.5" />
+      <text x={b.cx} y={height - 4} text-anchor="middle" fill="#6E7079" font-size="9" font-family="inherit">{b.label}</text>
+    {/each}
+  </svg>
+</div>

package/src/lib/components/Breadcrumb.svelte

@@ -0,0 +1,31 @@
+<script context="module" lang="ts">
+  export interface BreadcrumbItem { label: string; href?: string; }
+</script>
+
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  export let items: BreadcrumbItem[] = [];
+  let className = '';
+  export { className as class };
+  const dispatch = createEventDispatcher<{ navigate: number }>();
+</script>
+
+<nav aria-label="Breadcrumb" class="breadcrumb {className}">
+  <ol class="breadcrumb__list">
+    {#each items as item, i}
+      {@const isLast = i === items.length - 1}
+      <li class="breadcrumb__item">
+        {#if isLast}
+          <span aria-current="page" class="breadcrumb__current">{item.label}</span>
+        {:else if item.href}
+          <a href={item.href} class="breadcrumb__link">{item.label}</a>
+        {:else}
+          <button type="button" class="breadcrumb__link" on:click={() => dispatch('navigate', i)}>{item.label}</button>
+        {/if}
+        {#if !isLast}
+          <span aria-hidden="true" class="breadcrumb__sep">/</span>
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</nav>

package/src/lib/components/BubbleChart.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  export interface BubblePoint {
+    x: number;
+    y: number;
+    size: number;
+    color?: string;
+    label?: string;
+    key?: string;
+  }
+
+  export let points: BubblePoint[] = [];
+  export let xRange: [number, number] | undefined = undefined;
+  export let yRange: [number, number] | undefined = undefined;
+  export let rRange: [number, number] = [4, 20];
+  export let height: number = 160;
+  export let ariaLabel: string = 'Bubble chart';
+
+  const VW = 400;
+  const PAD = { t: 12, r: 12, b: 12, l: 12 };
+
+  $: xs = points.map((p) => p.x);
+  $: ys = points.map((p) => p.y);
+  $: sizes = points.map((p) => p.size);
+  $: x0 = xRange ? xRange[0] : xs.length ? Math.min(...xs) : 0;
+  $: x1 = xRange ? xRange[1] : xs.length ? Math.max(...xs) : 1;
+  $: y0 = yRange ? yRange[0] : ys.length ? Math.min(...ys) : 0;
+  $: y1 = yRange ? yRange[1] : ys.length ? Math.max(...ys) : 1;
+  $: s0 = sizes.length ? Math.min(...sizes) : 0;
+  $: s1 = sizes.length ? Math.max(...sizes) : 1;
+  $: xSpan = x1 - x0 || 1;
+  $: ySpan = y1 - y0 || 1;
+  $: sSpan = s1 - s0 || 1;
+  $: chartW = VW - PAD.l - PAD.r;
+  $: chartH = height - PAD.t - PAD.b;
+
+  $: gridLines = [0.25, 0.5, 0.75].map((f) => ({
+    gx: (PAD.l + f * chartW).toFixed(1),
+    gy: (PAD.t + (1 - f) * chartH).toFixed(1),
+  }));
+
+  $: bubbles = points.map((p, i) => ({
+    cx: (PAD.l + ((p.x - x0) / xSpan) * chartW).toFixed(1),
+    cy: (PAD.t + chartH - ((p.y - y0) / ySpan) * chartH).toFixed(1),
+    r: (rRange[0] + ((p.size - s0) / sSpan) * (rRange[1] - rRange[0])).toFixed(1),
+    color: p.color ?? '#006FFF',
+    key: p.key ?? String(i),
+  }));
+</script>
+
+<div role="img" aria-label={ariaLabel} style="width:100%;">
+  <svg viewBox="0 0 {VW} {height}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+    {#each gridLines as g}
+      <line x1={g.gx} y1={PAD.t} x2={g.gx} y2={PAD.t + chartH} stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+      <line x1={PAD.l} y1={g.gy} x2={VW - PAD.r} y2={g.gy} stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+    {/each}
+    {#each bubbles as b (b.key)}
+      <circle
+        cx={b.cx}
+        cy={b.cy}
+        r={b.r}
+        fill={b.color}
+        fill-opacity="0.6"
+        stroke={b.color}
+        stroke-opacity="0.9"
+        stroke-width="1.5"
+      />
+    {/each}
+  </svg>
+</div>

package/src/lib/components/BulletChart.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  export interface BulletItem {
+    label: string;
+    value: number;
+    target?: number;
+    ranges?: [number, number];
+    unit?: string;
+    color?: string;
+  }
+
+  export let items: BulletItem[] = [];
+  export let max: number = 100;
+  export let ariaLabel: string = 'Bullet chart';
+
+  const VW = 400;
+  const LABEL_W = 110;
+  const VAL_W = 44;
+  const TRACK_H = 10;
+  const RANGE_H = 18;
+  const ROW_H = 34;
+  const PAD = 8;
+
+  $: trackW = VW - LABEL_W - VAL_W;
+  $: totalH = items.length * ROW_H + PAD * 2;
+
+  $: rows = items.map((item, i) => {
+    const y = PAD + i * ROW_H;
+    const midY = y + ROW_H / 2;
+    const rangeY = midY - RANGE_H / 2;
+    const trackY = midY - TRACK_H / 2;
+    const [r1, r2] = item.ranges ?? [50, 75];
+    const r1w = (r1 / max) * trackW;
+    const r2w = (r2 / max) * trackW;
+    const valW = Math.min(item.value / max, 1) * trackW;
+    const targetX = item.target != null ? (Math.min(item.target, max) / max) * trackW : null;
+    return {
+      midY,
+      rangeY,
+      trackY,
+      r1w,
+      r2w,
+      valW,
+      targetX,
+      color: item.color ?? '#006FFF',
+      unit: item.unit ?? '%',
+      label: item.label,
+      value: item.value,
+    };
+  });
+</script>
+
+<div role="img" aria-label={ariaLabel} style="width:100%;">
+  <svg viewBox="0 0 {VW} {totalH}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+    {#each rows as row}
+      <text x={LABEL_W - 8} y={row.midY + 4} text-anchor="end" fill="#A4A7B5" font-size="11" font-family="inherit">
+        {row.label}
+      </text>
+      <rect x={LABEL_W} y={row.rangeY} width={trackW} height={RANGE_H} fill="rgba(255,255,255,0.04)" rx="2" />
+      <rect x={LABEL_W + row.r1w} y={row.rangeY} width={trackW - row.r1w} height={RANGE_H} fill="rgba(255,255,255,0.07)" rx="2" />
+      <rect x={LABEL_W + row.r2w} y={row.rangeY} width={trackW - row.r2w} height={RANGE_H} fill="rgba(255,255,255,0.10)" rx="2" />
+      <rect x={LABEL_W} y={row.trackY} width={row.valW} height={TRACK_H} fill={row.color} fill-opacity="0.9" rx="2" />
+      {#if row.targetX != null}
+        <rect x={LABEL_W + row.targetX - 1.5} y={row.rangeY} width="3" height={RANGE_H} fill="rgba(255,255,255,0.85)" rx="1" />
+      {/if}
+      <text x={LABEL_W + trackW + 6} y={row.midY + 4} fill="#fff" font-size="11" font-family="inherit" font-variant-numeric="tabular-nums">
+        {row.value}{row.unit}
+      </text>
+    {/each}
+  </svg>
+</div>

package/src/lib/components/BumpChart.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  export interface BumpSeries {
+    label: string;
+    ranks: number[];
+    color?: string;
+  }
+
+  export let labels: string[] = [];
+  export let series: BumpSeries[] = [];
+  export let ariaLabel: string = 'Bump chart';
+
+  const VW = 380;
+  const PAD_L = 12;
+  const PAD_R = 76;
+  const PAD_T = 8;
+  const PAD_B = 20;
+  const ROW_H = 28;
+  const DOT_R = 5;
+  const COLORS = ['#006FFF', '#00C8C8', '#F5A623', '#7FB6FF', '#A878F5', '#F56342'];
+
+  $: maxRank = Math.max(...series.flatMap((s) => s.ranks), 1);
+  $: TRACK_W = VW - PAD_L - PAD_R;
+  $: svgH = PAD_T + maxRank * ROW_H + PAD_B;
+  $: rankRows = Array.from({ length: maxRank }, (_, i) => i);
+
+  function xOf(i: number): number {
+    return labels.length > 1
+      ? PAD_L + (i / (labels.length - 1)) * TRACK_W
+      : PAD_L + TRACK_W / 2;
+  }
+
+  function yOf(rank: number): number {
+    return PAD_T + (rank - 1) * ROW_H + ROW_H / 2;
+  }
+
+  function buildPath(ranks: number[]): string {
+    return ranks
+      .map((rank, i) => {
+        const x = xOf(i);
+        const y = yOf(rank);
+        if (i === 0) return `M${x},${y}`;
+        const prevX = xOf(i - 1);
+        const prevY = yOf(ranks[i - 1]);
+        const cpX = (prevX + x) / 2;
+        return `C${cpX},${prevY} ${cpX},${y} ${x},${y}`;
+      })
+      .join(' ');
+  }
+</script>
+
+<div role="img" aria-label={ariaLabel} style="width:100%;">
+  <svg
+    viewBox="0 0 {VW} {svgH}"
+    style="width:100%;height:auto;display:block;"
+    aria-hidden="true"
+    focusable="false"
+  >
+    {#each labels as label, i (i)}
+      <g>
+        <line
+          x1={xOf(i)} y1={PAD_T}
+          x2={xOf(i)} y2={PAD_T + maxRank * ROW_H}
+          stroke="rgba(255,255,255,0.06)" stroke-width="1"
+        />
+        <text
+          x={xOf(i)} y={svgH - 5}
+          fill="#6E7079" font-size="9" text-anchor="middle" font-family="inherit"
+        >{label}</text>
+      </g>
+    {/each}
+
+    {#each rankRows as r (r)}
+      <line
+        x1={PAD_L} y1={yOf(r + 1)}
+        x2={PAD_L + TRACK_W} y2={yOf(r + 1)}
+        stroke="rgba(255,255,255,0.04)" stroke-width="1"
+      />
+    {/each}
+
+    {#each series as s, si (si)}
+      {@const color = s.color ?? COLORS[si % COLORS.length]}
+      {@const lastRank = s.ranks[s.ranks.length - 1]}
+      <g>
+        <path
+          d={buildPath(s.ranks)}
+          fill="none"
+          stroke={color}
+          stroke-width="2.5"
+          opacity="0.85"
+        />
+        {#each s.ranks as rank, i (i)}
+          <circle
+            cx={xOf(i)} cy={yOf(rank)} r={DOT_R}
+            fill={color}
+            stroke="#1A1F2E"
+            stroke-width="1.5"
+          />
+        {/each}
+        <text
+          x={xOf(labels.length - 1) + DOT_R + 6}
+          y={yOf(lastRank) + 4}
+          fill={color}
+          font-size="10"
+          font-family="inherit"
+        >{s.label}</text>
+      </g>
+    {/each}
+  </svg>
+</div>

package/src/lib/components/Button.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import Spinner from './Spinner.svelte';
+  export let variant: 'primary' | 'ghost' | 'danger' = 'ghost';
+  export let iconOnly = false;
+  export let loading = false;
+  export let title: string | undefined = undefined;
+  export let type: 'button' | 'submit' | 'reset' = 'button';
+  export let disabled = false;
+  let className = '';
+  export { className as class };
+  export let style: string = '';
+</script>
+
+<button
+  {type}
+  {title}
+  on:click
+  class="btn btn-{variant} {iconOnly ? 'btn-icon' : ''} {className}"
+  {style}
+  disabled={disabled || loading}
+  aria-busy={loading ? true : undefined}
+>
+  {#if loading}<Spinner size="sm" />{/if}
+  <slot />
+</button>

package/src/lib/components/CIDRInput.svelte

@@ -0,0 +1,142 @@
+<script context="module" lang="ts">
+  let counter = 0;
+</script>
+
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  export let label: string | undefined = undefined;
+  export let value: string = '0.0.0.0/0';
+  export let disabled: boolean = false;
+  let className = '';
+  export { className as class };
+
+  const dispatch = createEventDispatcher<{ change: string }>();
+  const uid = `dash-ui-cidr-${++counter}`;
+
+  function clampOctet(s: string): string {
+    if (s === '') return s;
+    const n = Number(s);
+    if (isNaN(n)) return s;
+    return String(Math.min(255, Math.max(0, n)));
+  }
+
+  function clampPrefix(s: string): string {
+    if (s === '') return s;
+    const n = Number(s);
+    if (isNaN(n)) return s;
+    return String(Math.min(32, Math.max(0, n)));
+  }
+
+  function parseCIDR(cidr: string): [string, string, string, string, string] {
+    const [ip = '0.0.0.0', prefix = '24'] = cidr.split('/');
+    const parts = ip.split('.');
+    return [parts[0] ?? '0', parts[1] ?? '0', parts[2] ?? '0', parts[3] ?? '0', prefix];
+  }
+
+  let fields: [string, string, string, string, string] = parseCIDR(value);
+  let inputs: (HTMLInputElement | null)[] = [null, null, null, null, null];
+
+  function focusAt(i: number) {
+    const el = inputs[i];
+    if (el) { el.focus(); el.select(); }
+  }
+
+  function commitFields() {
+    value = `${fields.slice(0, 4).join('.')}/${fields[4]}`;
+    dispatch('change', value);
+  }
+
+  function commitOctet(i: number, raw: string) {
+    if (!/^\d{0,3}$/.test(raw)) return;
+    fields[i] = clampOctet(raw);
+    fields = fields as [string, string, string, string, string];
+    commitFields();
+    if (raw.length === 3 && i < 4) setTimeout(() => focusAt(i + 1), 0);
+  }
+
+  function commitPrefix(raw: string) {
+    if (!/^\d{0,2}$/.test(raw)) return;
+    fields[4] = clampPrefix(raw);
+    fields = fields as [string, string, string, string, string];
+    commitFields();
+  }
+
+  function handleKey(i: number, e: KeyboardEvent) {
+    const el = inputs[i]!;
+    if (e.key === '.' && i < 3) {
+      e.preventDefault();
+      focusAt(i + 1);
+    } else if (e.key === '/' && i <= 3) {
+      e.preventDefault();
+      focusAt(4);
+    } else if (e.key === 'ArrowRight' && el.selectionStart === el.value.length) {
+      if (i < 4) { e.preventDefault(); focusAt(i + 1); }
+    } else if (e.key === 'ArrowLeft' && el.selectionStart === 0) {
+      if (i > 0) { e.preventDefault(); focusAt(i - 1); }
+    } else if (e.key === 'Backspace' && el.value === '' && i > 0) {
+      e.preventDefault(); focusAt(i - 1);
+    }
+  }
+
+  function handlePaste(e: ClipboardEvent) {
+    const text = e.clipboardData?.getData('text').trim() ?? '';
+    if (/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\/\d{1,2}$/.test(text)) {
+      e.preventDefault();
+      const [ip = '0.0.0.0', prefix = '0'] = text.split('/');
+      fields = [...ip.split('.').map(clampOctet), clampPrefix(prefix)] as [string, string, string, string, string];
+      commitFields();
+      setTimeout(() => focusAt(4), 0);
+    }
+  }
+</script>
+
+<div class="cidr-input-wrapper {className}">
+  {#if label}
+    <label for="{uid}-0" class="cidr-input__label">{label}</label>
+  {/if}
+  <div class="cidr-input{disabled ? ' cidr-input--disabled' : ''}" role="group" aria-label={label ?? 'CIDR'}>
+    {#each [0, 1, 2, 3] as i (i)}
+      <input
+        bind:this={inputs[i]}
+        id={i === 0 ? `${uid}-0` : undefined}
+        type="text"
+        inputmode="numeric"
+        pattern="[0-9]*"
+        role="spinbutton"
+        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"
+        on:input={(e) => commitOctet(i, e.currentTarget.value)}
+        on:keydown={(e) => handleKey(i, e)}
+        on:paste={handlePaste}
+        on:focus={(e) => e.currentTarget.select()}
+      />
+      <span class="cidr-input__dot" aria-hidden="true">{i < 3 ? '.' : '/'}</span>
+    {/each}
+    <input
+      bind:this={inputs[4]}
+      type="text"
+      inputmode="numeric"
+      pattern="[0-9]*"
+      role="spinbutton"
+      aria-label="Prefix length"
+      aria-valuenow={fields[4] === '' ? 0 : Number(fields[4])}
+      aria-valuemin={0}
+      aria-valuemax={32}
+      value={fields[4]}
+      {disabled}
+      maxlength={2}
+      class="cidr-input__prefix"
+      on:input={(e) => commitPrefix(e.currentTarget.value)}
+      on:keydown={(e) => handleKey(4, e)}
+      on:paste={handlePaste}
+      on:focus={(e) => e.currentTarget.select()}
+    />
+  </div>
+</div>