@w5-ui/svelte 0.2.0 → 0.3.0

package/src/lib/components/FilterBuilder.svelte

@@ -14,15 +14,17 @@
   }
 
   const TEXT_OPS = ['contains', 'not contains', 'equals', 'not equals', 'starts with'];
-  const NUM_OPS  = ['equals', 'not equals', 'greater than', 'less than', 'at least', 'at most'];
-  const SEL_OPS  = ['is', 'is not'];
+  const NUM_OPS = ['equals', 'not equals', 'greater than', 'less than', 'at least', 'at most'];
+  const SEL_OPS = ['is', 'is not'];
 
   function opsFor(type?: string) {
     if (type === 'number') return NUM_OPS;
     if (type === 'select') return SEL_OPS;
     return TEXT_OPS;
   }
-  function defaultOp(type?: string) { return opsFor(type)[0]; }
+  function defaultOp(type?: string) {
+    return opsFor(type)[0];
+  }
 </script>
 
 <script lang="ts">
@@ -43,7 +45,6 @@
   }: Props = $props();
 
   const uid = `dash-ui-fb-${++counter}`;
-
   const CONJUNCTIONS = ['and', 'or'] as const;
 
   function emit(rules: FilterRule[], conj: 'and' | 'or' = conjunction) {
@@ -61,56 +62,77 @@
 
   function setField(id: string, key: string) {
     const f = fields.find((x) => x.key === key);
-    emit(value.map((r) => r.id === id ? { ...r, field: key, op: defaultOp(f?.type), value: '' } : r));
+    emit(value.map((r) => (r.id === id ? { ...r, field: key, op: defaultOp(f?.type), value: '' } : r)));
   }
 
   function setOp(id: string, op: string) {
-    emit(value.map((r) => r.id === id ? { ...r, op } : r));
+    emit(value.map((r) => (r.id === id ? { ...r, op } : r)));
   }
 
   function setValue(id: string, v: string) {
-    emit(value.map((r) => r.id === id ? { ...r, value: v } : r));
+    emit(value.map((r) => (r.id === id ? { ...r, value: v } : r)));
   }
+
+  // Field chrome: select chevron uses a data-URL bg so the chrome stays in
+  // class strings rather than scoped CSS.
+  const SELECT_CHEVRON =
+    'background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'10\' height=\'6\' viewBox=\'0 0 10 6\'%3E%3Cpath d=\'M1 1l4 4 4-4\' stroke=\'%236E7079\' stroke-width=\'1.5\' fill=\'none\' stroke-linecap=\'round\'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;';
+
+  const SELECT_CLS =
+    'h-[30px] cursor-pointer appearance-none rounded border border-border-2 bg-row-active px-2 pr-6 text-13 leading-none text-text-1 outline-none transition-colors duration-100 hover:border-border-3 focus:border-brand-05';
+  const INPUT_CLS =
+    'h-[30px] min-w-[140px] flex-1 rounded border border-border-2 bg-row-active px-2 text-13 leading-none text-text-1 outline-none transition-colors duration-100 placeholder:text-text-4 hover:border-border-3 focus:border-brand-05';
 </script>
 
-<div class="fb" role="group" aria-label={ariaLabel}>
-  <div class="fb-header">
-    <span class="fb-label">Filters</span>
+<div class="flex flex-col gap-1.5" role="group" aria-label={ariaLabel}>
+  <div class="flex min-h-8 flex-wrap items-center gap-2">
+    <span class="mr-1 text-12 font-semibold uppercase tracking-[0.05em] text-text-3">Filters</span>
     {#if value.length > 0}
-      <span class="fb-conj-label">Match</span>
-      <div class="fb-conj" role="group" aria-label="Conjunction">
+      <span class="text-13 text-text-4">Match</span>
+      <div class="flex overflow-hidden rounded border border-border-2" role="group" aria-label="Conjunction">
         {#each CONJUNCTIONS as c}
           <button
             type="button"
-            class="fb-conj-btn{conjunction === c ? ' is-active' : ''}"
             aria-pressed={conjunction === c}
+            class="cursor-pointer border-0 bg-transparent px-2.5 py-0.5 text-11 font-bold uppercase tracking-[0.06em] text-text-4 hover:bg-row-active hover:text-text-1 aria-pressed:bg-brand-05/[0.18] aria-pressed:text-status-info focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-brand-05"
             onclick={() => emit(value, c)}
           >{c.toUpperCase()}</button>
         {/each}
       </div>
-      <span class="fb-conj-label">conditions</span>
+      <span class="text-13 text-text-4">conditions</span>
     {/if}
-    <button type="button" class="fb-add" onclick={addRule} aria-label="Add filter rule">+ Add rule</button>
+    <button
+      type="button"
+      aria-label="Add filter rule"
+      class="ml-auto cursor-pointer rounded border border-dashed border-border-3 bg-transparent px-2.5 py-1 text-12 leading-none text-brand-05 hover:border-brand-05 hover:bg-brand-05/[0.08] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
+      onclick={addRule}
+    >+ Add rule</button>
     {#if value.length > 0}
-      <button type="button" class="fb-clear" onclick={() => emit([])} aria-label="Clear all filters">Clear</button>
+      <button
+        type="button"
+        aria-label="Clear all filters"
+        class="cursor-pointer border-0 bg-transparent px-1.5 py-1 text-12 leading-none text-text-4 hover:text-text-1 focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
+        onclick={() => emit([])}
+      >Clear</button>
     {/if}
   </div>
   {#if value.length > 0}
-    <ul class="fb-rules" aria-label="Filter rules">
+    <ul class="m-0 flex list-none flex-col gap-1 p-0" aria-label="Filter rules">
       {#each value as rule, i}
         {@const f = fields.find((x) => x.key === rule.field)}
         {@const ops = opsFor(f?.type)}
         {@const fieldId = `${uid}-f${i}`}
         {@const opId = `${uid}-op${i}`}
         {@const valId = `${uid}-v${i}`}
-        <li class="fb-rule">
+        <li class="flex items-center gap-1.5">
           <label class="sr-only" for={fieldId}>Field {i + 1}</label>
           <select
             id={fieldId}
-            class="fb-select"
+            class={SELECT_CLS}
+            style={SELECT_CHEVRON}
             value={rule.field}
             onchange={(e) => setField(rule.id, e.currentTarget.value)}
-            aria-label="Rule {i + 1} field"
+            aria-label={`Rule ${i + 1} field`}
           >
             {#each fields as x}
               <option value={x.key}>{x.label}</option>
@@ -119,10 +141,11 @@
           <label class="sr-only" for={opId}>Operator {i + 1}</label>
           <select
             id={opId}
-            class="fb-select fb-select--op"
+            class={SELECT_CLS}
+            style={SELECT_CHEVRON}
             value={rule.op}
             onchange={(e) => setOp(rule.id, e.currentTarget.value)}
-            aria-label="Rule {i + 1} operator"
+            aria-label={`Rule ${i + 1} operator`}
           >
             {#each ops as op}
               <option value={op}>{op}</option>
@@ -132,10 +155,11 @@
           {#if f?.type === 'select'}
             <select
               id={valId}
-              class="fb-select fb-select--val"
+              class={SELECT_CLS}
+              style={SELECT_CHEVRON}
               value={rule.value}
               onchange={(e) => setValue(rule.id, e.currentTarget.value)}
-              aria-label="Rule {i + 1} value"
+              aria-label={`Rule ${i + 1} value`}
             >
               <option value="">Any</option>
               {#each f.options ?? [] as o}
@@ -145,19 +169,19 @@
           {:else}
             <input
               id={valId}
-              class="fb-input"
+              class={INPUT_CLS}
               type={f?.type === 'number' ? 'number' : 'text'}
               value={rule.value}
               placeholder="Value…"
               oninput={(e) => setValue(rule.id, e.currentTarget.value)}
-              aria-label="Rule {i + 1} value"
+              aria-label={`Rule ${i + 1} value`}
             />
           {/if}
           <button
             type="button"
-            class="fb-remove icon-btn"
+            aria-label={`Remove rule ${i + 1}`}
+            class="flex h-[26px] w-[26px] shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-text-4 hover:bg-status-danger/10 hover:text-status-danger focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
             onclick={() => removeRule(rule.id)}
-            aria-label="Remove rule {i + 1}"
           >
             <svg viewBox="0 0 12 12" width="10" height="10" aria-hidden="true" fill="currentColor">
               <path d="M1 1l10 10M11 1L1 11" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>

package/src/lib/components/FormActions.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<!--
+  Right-aligned action row closing a form <Card> or modal body
+  (display:flex; justify-content:flex-end; gap:8px; margin-top:16px).
+  Typed equivalent of `<div class="form-actions">` from
+  @w5-ui/tokens/dashboard.css.
+-->
+<div class="form-actions {className}">
+  {@render children?.()}
+</div>

package/src/lib/components/FormRow.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<!--
+  Two-column form grid (1fr 1fr, 14px gap, 6px top offset) that every Settings
+  card uses. Typed equivalent of `<div class="form-row">` from
+  @w5-ui/tokens/dashboard.css. Use inside wider <Card> tiles for dense editors.
+-->
+<div class="form-row {className}">
+  {@render children?.()}
+</div>

package/src/lib/components/Grid.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<!--
+  The canonical 12-column page grid (repeat(12, 1fr), 12px gap, 16px 24px
+  padding, reserves room for the bottom panel). Typed equivalent of
+  `<div class="grid">` from @w5-ui/tokens/dashboard.css.
+-->
+<div class="grid {className}">
+  {@render children?.()}
+</div>

package/src/lib/components/GroupedList.svelte

@@ -34,57 +34,71 @@
   };
 
   const uid = Math.random().toString(36).slice(2, 9);
-  // Initial open state mirrors each group's `defaultOpen` once; afterwards
-  // the user toggles each entry independently.
   // svelte-ignore state_referenced_locally
   let open: boolean[] = $state(groups.map((g) => g.defaultOpen !== false));
 
-  function toggle(i: number) { open[i] = !open[i]; open = [...open]; }
+  function toggle(i: number) {
+    open[i] = !open[i];
+    open = [...open];
+  }
+
+  const HEADER_CLS =
+    'flex w-full items-center gap-2 rounded-md border border-border-1 bg-divider px-3 py-2 text-13 text-text-1';
+  const HEADER_BTN =
+    HEADER_CLS + ' cursor-pointer hover:bg-row-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05';
 </script>
 
-<div class="gl" aria-label={ariaLabel}>
+<div class="flex flex-col gap-1.5" aria-label={ariaLabel}>
   {#each groups as group, gi}
     {@const isOpen = open[gi]}
     {@const panelId = `${uid}-gl-${gi}`}
-    <div class="gl-group">
+    <div class="flex flex-col gap-0.5">
       {#if collapsible}
         <button
           type="button"
-          class="gl-header"
           aria-expanded={isOpen}
           aria-controls={panelId}
+          class={HEADER_BTN}
           onclick={() => toggle(gi)}
         >
-          {#if group.color}<span class="gl-color-dot" style="background:{group.color}" aria-hidden="true"></span>{/if}
-          <span class="gl-title">{group.label}</span>
-          <span class="gl-count">{group.items.length}</span>
+          {#if group.color}
+            <span class="inline-block h-2 w-2 shrink-0 rounded-full" style="background:{group.color}" aria-hidden="true"></span>
+          {/if}
+          <span class="flex-1 text-left font-medium">{group.label}</span>
+          <span class="rounded bg-row-active px-1.5 py-0.5 text-11 text-text-3 tabular-nums">{group.items.length}</span>
           <svg
-            class="gl-chevron{isOpen ? ' gl-chevron--open' : ''}"
             width="12" height="12" viewBox="0 0 12 12"
             aria-hidden="true" focusable="false"
+            class="text-text-4 transition-transform duration-100 motion-reduce:transition-none {isOpen ? 'rotate-180' : ''}"
           >
             <path d="M2 4l4 4 4-4" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         </button>
       {:else}
-        <div class="gl-header gl-header--static">
-          {#if group.color}<span class="gl-color-dot" style="background:{group.color}" aria-hidden="true"></span>{/if}
-          <span class="gl-title">{group.label}</span>
-          <span class="gl-count">{group.items.length}</span>
+        <div class={HEADER_CLS}>
+          {#if group.color}
+            <span class="inline-block h-2 w-2 shrink-0 rounded-full" style="background:{group.color}" aria-hidden="true"></span>
+          {/if}
+          <span class="flex-1 text-left font-medium">{group.label}</span>
+          <span class="rounded bg-row-active px-1.5 py-0.5 text-11 text-text-3 tabular-nums">{group.items.length}</span>
         </div>
       {/if}
       {#if !collapsible || isOpen}
-        <ul id={panelId} class="gl-items" role="list">
+        <ul id={panelId} class="m-0 flex list-none flex-col gap-0.5 p-0 pl-4" role="list">
           {#each group.items as item}
-            <li class="gl-item">
+            <li class="flex items-center gap-2 rounded px-2 py-1.5 text-13 hover:bg-divider">
               {#if item.status}
-                <span class="gl-item-dot" style="background:{STATUS_COLORS[item.status]}" aria-label={item.status}></span>
+                <span
+                  class="inline-block h-2 w-2 shrink-0 rounded-full"
+                  style="background:{STATUS_COLORS[item.status]}"
+                  aria-label={item.status}
+                ></span>
               {/if}
-              <div class="gl-item-body">
-                <div class="gl-item-label">{item.label}</div>
-                {#if item.sublabel}<div class="gl-item-sublabel">{item.sublabel}</div>{/if}
+              <div class="min-w-0 flex-1">
+                <div class="truncate text-text-2">{item.label}</div>
+                {#if item.sublabel}<div class="truncate text-11 text-text-4">{item.sublabel}</div>{/if}
               </div>
-              {#if item.meta}<span class="gl-item-meta">{item.meta}</span>{/if}
+              {#if item.meta}<span class="shrink-0 text-11 text-text-4 tabular-nums">{item.meta}</span>{/if}
             </li>
           {/each}
         </ul>

package/src/lib/components/H1.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<!--
+  Page title - the 38 px / bold / --lh-snug rhythm with
+  --tracking-display (-0.02em) used for the top-of-page heading on
+  marketing surfaces (login, onboarding splash, top-level landing).
+  Renders <h1 class="dash-ui-h1"> so the .dash-ui-h1 rule in
+  @w5-ui/tokens/tokens.css pins the canonical size, weight, line-
+  height, letter-spacing, and --text-1 colour. Stops userland reaching
+  for a one-off <h1 style="font-size: 36px"> (or worse, leaving an
+  unstyled browser default <h1> at 32 px / 700 / 1.2 with no negative
+  tracking, which is the documented "headings break awkwardly across
+  two lines" drift fixed by --tracking-display). Typed equivalent of
+  <h1 class="dash-ui-h1"> (the userland-facing semantic class
+  documented in Foundations / Type). Use <H1> for marketing-grade page
+  titles. In-app pages should reach for <PageHeader> (which already
+  styles the page title) and use <H2> for section heads, <H3> for sub-
+  sections, <H4> for card titles.
+-->
+<h1 class="dash-ui-h1 {className}">
+  {@render children?.()}
+</h1>

package/src/lib/components/H2.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<!--
+  Page section heading - the 30 px / semibold / --lh-snug rhythm used
+  for top-of-section labels on a dashboard page (above a grid of cards,
+  above a table, above a settings group). Renders
+  <h2 class="dash-ui-h2"> so the .dash-ui-h2 rule in
+  @w5-ui/tokens/tokens.css pins the canonical size, weight, line-height,
+  and --text-1 colour. Stops userland reaching for a one-off
+  <h2 style="font-size: 30px; font-weight: 600"> (or worse, leaving an
+  unstyled browser default <h2> at ~24 px with 700 weight and 1.2 line-
+  height, which is the documented "section headings feel cramped on one
+  line" drift). Typed equivalent of <h2 class="dash-ui-h2"> (the
+  userland-facing semantic class documented in Foundations / Type). Use
+  <H2> for the page section head ("Devices", "Wi-Fi", "Settings")
+  sitting above a content block. For card titles prefer <H4> (or just
+  <Card title="..."> which injects .dash-ui-h4 for you); for full page
+  titles in marketing pages prefer <H1>.
+-->
+<h2 class="dash-ui-h2 {className}">
+  {@render children?.()}
+</h2>

package/src/lib/components/H3.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<!--
+  Sub-section heading - the 24 px / semibold / --lh-snug rhythm used
+  for sub-section labels on a dashboard page (a heading inside a card
+  region, a settings sub-group, a divider above a secondary table).
+  Renders <h3 class="dash-ui-h3"> so the .dash-ui-h3 rule in
+  @w5-ui/tokens/tokens.css pins the canonical size, weight, line-height,
+  and --text-1 colour. Stops userland reaching for a one-off
+  <h3 style="font-size: 24px; font-weight: 600"> (or worse, leaving an
+  unstyled browser default <h3> at ~18.7 px with 700 weight and 1.2
+  line-height, which is the documented "sub-section headings drift away
+  from the reference" case). Typed equivalent of
+  <h3 class="dash-ui-h3"> (the userland-facing semantic class
+  documented in Foundations / Type). Use <H3> for a sub-section head
+  sitting below an <H2> page section head. For card titles prefer <H4>
+  (or just <Card title="..."> which injects .dash-ui-h4 for you); for
+  page section heads prefer <H2>.
+-->
+<h3 class="dash-ui-h3 {className}">
+  {@render children?.()}
+</h3>

package/src/lib/components/H4.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<!--
+  Card / tile title - the 18 px / semibold / --lh-snug rhythm used for
+  the heading that sits inside a card, a stat tile, or a settings
+  sub-panel. Renders <h4 class="dash-ui-h4"> so the .dash-ui-h4 rule in
+  @w5-ui/tokens/tokens.css pins the canonical size, weight, line-height,
+  and --text-1 colour. Stops userland reaching for a one-off
+  <h3 style="font-size: 20px"> or text-xl (the documented "card title
+  size doesn't match the reference" case), and stops them leaving an
+  unstyled browser default <h4> at ~13.3 px / 700 / 1.2 which reads as
+  caption text instead of a title. Typed equivalent of
+  <h4 class="dash-ui-h4"> (the userland-facing semantic class documented
+  in Foundations / Type). Use <H4> when you build a card-like tile by
+  hand and need the canonical 18 / 600 title. If you reach for
+  <Card title="..."> you get the same class injected for you - prefer
+  that. For page section heads prefer <H2>; for sub-section heads
+  prefer <H3>.
+-->
+<h4 class="dash-ui-h4 {className}">
+  {@render children?.()}
+</h4>

package/src/lib/components/HealthBar.svelte

@@ -10,13 +10,13 @@
     value,
     fillStyle = '',
     label = undefined,
-    valueText = undefined
+    valueText = undefined,
   }: Props = $props();
   let clamped = $derived(Math.max(0, Math.min(100, value)));
 </script>
 
 <div
-  class="hb"
+  class="h-1 overflow-hidden rounded-sm bg-row-active"
   role="progressbar"
   aria-valuenow={Math.round(clamped)}
   aria-valuemin={0}
@@ -24,5 +24,8 @@
   aria-label={label}
   aria-valuetext={valueText}
 >
-  <div class="hb-fill" style="width:{clamped}%; {fillStyle}"></div>
+  <div
+    class="h-full bg-gradient-to-r from-brand-05 to-brand-06"
+    style="width:{clamped}%; {fillStyle}"
+  ></div>
 </div>

package/src/lib/components/HoverCard.svelte

@@ -4,6 +4,7 @@
 
 <script lang="ts">
   import { onDestroy } from 'svelte';
+
   interface Props {
     placement?: 'top' | 'bottom' | 'left' | 'right';
     delay?: number;
@@ -17,9 +18,8 @@
     delay = 300,
     class: className = '',
     trigger,
-    content
+    content,
   }: Props = $props();
-  
 
   const id = `dash-ui-hovercard-${++counter}`;
   let open = $state(false);
@@ -36,21 +36,32 @@
   }
 
   onDestroy(() => { if (timer) clearTimeout(timer); });
+
+  const PLACEMENT: Record<NonNullable<Props['placement']>, string> = {
+    top: 'bottom-[calc(100%+6px)] left-0',
+    bottom: 'top-[calc(100%+6px)] left-0',
+    left: 'right-[calc(100%+6px)] top-0',
+    right: 'left-[calc(100%+6px)] top-0',
+  };
 </script>
 
 <div
   role="group"
-  class="hovercard-wrapper hovercard-{placement} {className}"
+  class="relative block {className}"
   onmouseenter={show}
   onmouseleave={hide}
   onfocusin={show}
   onfocusout={hide}
 >
-  <div class="hovercard-trigger" aria-describedby={open ? id : undefined}>
+  <div class="block" aria-describedby={open ? id : undefined}>
     {@render trigger?.()}
   </div>
   {#if open}
-    <div {id} role="tooltip" class="hovercard">
+    <div
+      {id}
+      role="tooltip"
+      class="absolute z-[9998] min-w-[200px] max-w-[280px] rounded-[10px] border border-border-3 bg-bg-2 p-3 text-12 shadow-[0_8px_32px_rgba(0,0,0,0.5)] {PLACEMENT[placement]}"
+    >
       {@render content?.()}
     </div>
   {/if}

package/src/lib/components/IPInput.svelte

@@ -3,8 +3,6 @@
 </script>
 
 <script lang="ts">
-  
-
   interface Props {
     label?: string | undefined;
     value?: string;
@@ -75,13 +73,21 @@
       setTimeout(() => focusAt(3), 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';
 </script>
 
-<div class="ip-input-wrapper {className}">
+<div class={className}>
   {#if label}
-    <label for="{uid}-0" class="ip-input__label">{label}</label>
+    <label for="{uid}-0" class="text-12 text-text-4">{label}</label>
   {/if}
-  <div class="ip-input{disabled ? ' ip-input--disabled' : ''}" role="group" aria-label={label ?? 'IP address'}>
+  <div
+    role="group"
+    aria-label={label ?? 'IP 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 octets as oct, i}
       <input
         bind:this={inputs[i]}
@@ -90,21 +96,21 @@
         inputmode="numeric"
         pattern="[0-9]*"
         role="spinbutton"
-        aria-label="Octet {i + 1} of 4"
+        aria-label={`Octet ${i + 1} of 4`}
         aria-valuenow={oct === '' ? 0 : Number(oct)}
         aria-valuemin={0}
         aria-valuemax={255}
         value={oct}
         {disabled}
         maxlength={3}
-        class="ip-input__octet"
+        class={OCTET_CLS}
         oninput={(e) => commitOctet(i, e.currentTarget.value)}
         onkeydown={(e) => handleKey(i, e)}
         onpaste={handlePaste}
         onfocus={(e) => e.currentTarget.select()}
       />
       {#if i < 3}
-        <span class="ip-input__dot" aria-hidden="true">.</span>
+        <span aria-hidden="true" class="select-none text-13 leading-none text-text-4">.</span>
       {/if}
     {/each}
   </div>

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}