@w5-ui/svelte 0.2.1 → 0.4.0

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>

package/src/lib/components/ColumnToggle.svelte

@@ -9,7 +9,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
 
-
   interface Props {
     columns?: ColumnDef[];
     visible?: Set<string>;
@@ -56,14 +55,15 @@
   });
 </script>
 
-<div class="col-toggle">
+<div class="relative inline-block">
   <button
     bind:this={btnEl}
     type="button"
-    class="col-toggle__btn{open ? ' col-toggle__btn--active' : ''}"
+    data-open={open ? 'true' : undefined}
     aria-haspopup="dialog"
     aria-expanded={open}
     aria-controls={panelId}
+    class="inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-md border border-border-2 bg-transparent px-2.5 text-12 font-medium text-text-3 transition-colors duration-100 hover:bg-row-hover hover:text-text-1 data-[open=true]:border-brand-05 data-[open=true]:bg-brand-05/[0.10] data-[open=true]:text-brand-05 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
     onclick={() => (open = !open)}
   >
     <svg viewBox="0 0 14 14" width="14" height="14" fill="none" aria-hidden="true" focusable="false">
@@ -77,18 +77,19 @@
     <div
       bind:this={panelEl}
       id={panelId}
-      class="col-toggle__panel"
       role="dialog"
       aria-label="Toggle columns"
+      class="absolute right-0 top-[calc(100%+4px)] z-[9100] min-w-[200px] rounded-lg border border-border-3 bg-bg-2 p-1 shadow-[0_8px_24px_rgba(0,0,0,0.5)]"
     >
-      <div class="col-toggle__header">Columns</div>
-      <ul class="col-toggle__list" role="list">
+      <div class="px-2.5 pb-1.5 pt-2 text-11 font-semibold uppercase tracking-[0.06em] text-text-4">Columns</div>
+      <ul class="m-0 list-none p-0" role="list">
         {#each columns as col (col.key)}
-          <li class="col-toggle__item">
-            <label class="col-toggle__label">
+          <li>
+            <label class="flex cursor-pointer items-center gap-2 rounded-[5px] px-2.5 py-1.5 text-13 text-text-2 hover:bg-row-active hover:text-text-1 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50">
               <input
                 type="checkbox"
-                class="col-toggle__check"
+                class="h-3.5 w-3.5 cursor-pointer appearance-none rounded-sm border-[1.5px] border-border-3 bg-bg-1 checked:border-brand-05 checked:bg-brand-05 disabled:cursor-not-allowed"
+                style="background-image: var(--check-img, none);"
                 checked={visible.has(col.key)}
                 disabled={col.required}
                 onchange={() => { if (!col.required) toggle(col.key); }}

package/src/lib/components/Combobox.svelte

@@ -1,6 +1,9 @@
 <script module lang="ts">
   let counter = 0;
-  export interface ComboboxOption { value: string; label: string; }
+  export interface ComboboxOption {
+    value: string;
+    label: string;
+  }
 </script>
 
 <script lang="ts">
@@ -27,7 +30,6 @@
     class: className = '',
     onchange,
   }: Props = $props();
-  
 
   const uid = `dash-ui-cb-${++counter}`;
   let inputId = $derived(id ?? uid);
@@ -40,13 +42,15 @@
 
   let selectedOption = $derived(options.find((o) => o.value === value));
 
-  let filtered = $derived(query.trim() === ''
-    ? options
-    : options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase())));
+  let filtered = $derived(
+    query.trim() === ''
+      ? options
+      : options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase())),
+  );
 
-  let activeOptionId = $derived(activeIdx >= 0 && filtered[activeIdx]
-    ? `${listboxId}-opt-${activeIdx}`
-    : undefined);
+  let activeOptionId = $derived(
+    activeIdx >= 0 && filtered[activeIdx] ? `${listboxId}-opt-${activeIdx}` : undefined,
+  );
 
   let displayValue = $derived(open ? query : (selectedOption?.label ?? ''));
 
@@ -93,9 +97,9 @@
   onDestroy(() => document.removeEventListener('mousedown', handleOutside));
 </script>
 
-<div class="combobox-wrapper {className}" bind:this={wrapperEl}>
+<div class="relative block {className}" bind:this={wrapperEl}>
   {#if label}<label for={inputId} class="sr-only">{label}</label>{/if}
-  <div class="combobox-field">
+  <div class="relative flex items-center">
     <input
       bind:this={inputEl}
       id={inputId}
@@ -113,24 +117,34 @@
       oninput={onInputChange}
       onfocus={openList}
       onkeydown={onKeyDown}
-      class="combobox-input"
+      class="box-border h-[34px] w-full rounded-md border border-border-2 bg-bg-page py-0 pl-3 pr-9 text-13 leading-none text-text-1 transition-colors duration-100 hover:border-border-3 focus:border-brand-05 focus:outline-none focus:shadow-[0_0_0_2px_rgba(0,111,255,0.2)] disabled:cursor-not-allowed disabled:opacity-40"
     />
     <button
       type="button"
-      tabindex="-1"
+      tabindex={-1}
       aria-hidden="true"
-      class="combobox-chevron-btn"
+      class="absolute right-2 flex cursor-pointer items-center border-0 bg-transparent p-0.5 leading-none text-text-4"
       onclick={() => { if (open) { open = false; query = ''; } else { inputEl?.focus(); openList(); } }}
     >
-      <svg class="select-chevron{open ? ' combobox-chevron-open' : ''}" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+      <svg
+        viewBox="0 0 16 16"
+        aria-hidden="true"
+        focusable="false"
+        class="h-3.5 w-3.5 transition-transform duration-100 motion-reduce:transition-none {open ? 'rotate-180' : ''}"
+      >
         <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
       </svg>
     </button>
   </div>
   {#if open}
-    <ul id={listboxId} role="listbox" aria-label={label} class="select-listbox combobox-listbox">
+    <ul
+      id={listboxId}
+      role="listbox"
+      aria-label={label}
+      class="absolute left-0 top-[calc(100%+4px)] z-[9000] m-0 max-h-60 min-w-full list-none overflow-y-auto rounded-lg border border-border-3 bg-bg-2 p-1 shadow-[0_8px_24px_rgba(0,0,0,0.5)]"
+    >
       {#if filtered.length === 0}
-        <li class="combobox-empty">No results</li>
+        <li class="list-none p-2.5 text-center text-13 text-text-4">No results</li>
       {:else}
         {#each filtered as opt, idx (opt.value)}
           <li
@@ -138,7 +152,7 @@
             role="option"
             aria-selected={opt.value === value}
             data-active={idx === activeIdx ? 'true' : undefined}
-            class="select-option"
+            class="flex cursor-pointer items-center rounded-[5px] px-2.5 py-1.5 text-13 text-text-2 hover:bg-row-active hover:text-text-1 data-[active=true]:bg-row-active data-[active=true]:text-text-1 aria-selected:font-medium aria-selected:text-brand-05"
             onmousedown={(e) => { e.preventDefault(); (() => pick(opt))(); }}
             onmouseenter={() => { activeIdx = idx; }}
           >{opt.label}</li>

package/src/lib/components/CommandPalette.svelte

@@ -19,7 +19,10 @@
     onclose?: () => void;
   }
 
-  let { open = false, items = [], placeholder = 'Search pages and actions…',
+  let {
+    open = false,
+    items = [],
+    placeholder = 'Search pages and actions…',
     onselect,
     onclose,
   }: Props = $props();
@@ -28,21 +31,24 @@
   let inputEl = $state<HTMLInputElement | undefined>(undefined);
   const listboxId = `cp-list-${Math.random().toString(36).slice(2)}`;
 
-  let filtered =
-    $derived(query.trim() === ''
+  let filtered = $derived(
+    query.trim() === ''
       ? items
-      : items.filter((i) => i.label.toLowerCase().includes(query.toLowerCase())));
+      : items.filter((i) => i.label.toLowerCase().includes(query.toLowerCase())),
+  );
 
-  let grouped = $derived(filtered.reduce(
-    (acc, item) => {
-      const g = item.group ?? '';
-      const found = acc.find((a: { group: string }) => a.group === g);
-      if (found) found.items.push(item);
-      else acc.push({ group: g, items: [item] });
-      return acc;
-    },
-    [] as { group: string; items: CommandItem[] }[],
-  ));
+  let grouped = $derived(
+    filtered.reduce(
+      (acc, item) => {
+        const g = item.group ?? '';
+        const found = acc.find((a: { group: string }) => a.group === g);
+        if (found) found.items.push(item);
+        else acc.push({ group: g, items: [item] });
+        return acc;
+      },
+      [] as { group: string; items: CommandItem[] }[],
+    ),
+  );
 
   $effect(() => {
     if (open) {
@@ -86,16 +92,21 @@
 
 {#if open}
   <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-  <div class="cp-backdrop" role="presentation" onclick={handleBackdrop} onkeydown={handleKey}>
+  <div
+    class="fixed inset-0 z-[9300] flex items-start justify-center bg-black/60 pt-[15vh] backdrop-blur-md"
+    role="presentation"
+    onclick={handleBackdrop}
+    onkeydown={handleKey}
+  >
     <div
       role="dialog"
       aria-modal="true"
       aria-label="Command palette"
-      class="cp-panel"
+      class="w-[520px] max-w-[90vw] overflow-hidden rounded-xl border border-border-3 bg-bg-1 shadow-[0_24px_64px_rgba(0,0,0,0.6)]"
     >
-      <div class="cp-search">
+      <div class="flex items-center gap-2.5 border-b border-border-1 px-4 py-3">
         <svg
-          class="cp-search-icon"
+          class="shrink-0 text-text-4"
           width="16"
           height="16"
           viewBox="0 0 16 16"
@@ -112,7 +123,6 @@
         </svg>
         <input
           bind:this={inputEl}
-          class="cp-input"
           type="text"
           role="combobox"
           aria-expanded={filtered.length > 0}
@@ -121,33 +131,39 @@
           {placeholder}
           bind:value={query}
           onkeydown={handleKey}
+          class="min-w-0 flex-1 border-0 bg-transparent text-[15px] leading-none text-text-1 outline-none placeholder:text-text-4"
         />
-        <span class="cp-kbd">Esc</span>
+        <span class="shrink-0 whitespace-nowrap rounded border border-border-2 bg-row-active px-1.5 py-0.5 text-[10px] text-text-4">Esc</span>
       </div>
-      <ul id={listboxId} role="listbox" aria-label="Results" class="cp-list">
+      <ul
+        id={listboxId}
+        role="listbox"
+        aria-label="Results"
+        class="m-0 max-h-[360px] list-none overflow-y-auto p-1.5"
+      >
         {#if filtered.length === 0}
-          <li class="cp-empty">No results for &ldquo;{query}&rdquo;</li>
+          <li class="list-none p-6 text-center text-13 text-text-4">No results for &ldquo;{query}&rdquo;</li>
         {:else}
           {#each grouped as { group, items: groupItems }}
             <li role="presentation">
               {#if group}
-                <div class="cp-group-label">{group}</div>
+                <div class="px-2.5 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-[0.06em] text-text-4">{group}</div>
               {/if}
               {#each groupItems as item}
                 {@const idx = filtered.indexOf(item)}
                 <!-- svelte-ignore a11y_click_events_have_key_events -->
                 <div
                   role="option"
-                  tabindex="-1"
+                  tabindex={-1}
                   aria-selected={idx === activeIdx}
                   data-active={idx === activeIdx ? 'true' : undefined}
-                  class="cp-item"
+                  class="flex cursor-pointer list-none items-center gap-2.5 rounded-md px-2.5 py-2 text-13 text-text-2 outline-none data-[active=true]:bg-brand-05/15 data-[active=true]:text-text-1"
                   onclick={() => commit(item.id)}
                   onmouseenter={() => (activeIdx = idx)}
                 >
                   {item.label}
                   {#if item.shortcut}
-                    <span class="cp-item-shortcut" aria-label={item.shortcut.replace(/\+/g, ' then ')}>
+                    <span class="ml-auto shrink-0" aria-label={item.shortcut.replace(/\+/g, ' then ')}>
                       <Kbd keys={item.shortcut} />
                     </span>
                   {/if}

package/src/lib/components/ConfirmDialog.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onDestroy } from 'svelte';
+  import Button from './Button.svelte';
 
   interface Props {
     open?: boolean;
@@ -26,10 +27,17 @@
   const FOCUSABLE =
     'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
 
-  const VARIANT_CLASS: Record<string, string> = {
-    danger: 'btn cd-confirm cd-confirm--danger',
-    warning: 'btn cd-confirm cd-confirm--warning',
-    info: 'btn cd-confirm cd-confirm--info',
+  // Map confirm-variant to the migrated `Button` variants. `warning` doesn't
+  // exist on `Button`, so we mark it as primary + override colours inline.
+  const CONFIRM_VARIANT: Record<NonNullable<Props['variant']>, 'primary' | 'danger'> = {
+    danger: 'danger',
+    warning: 'primary',
+    info: 'primary',
+  };
+  const CONFIRM_EXTRA: Record<NonNullable<Props['variant']>, string> = {
+    danger: '!bg-status-danger !text-white hover:!bg-[#ff5e5e] !border-status-danger',
+    warning: '!bg-status-warning !text-neutral-00 hover:!bg-[#ffba42] !border-status-warning',
+    info: '',
   };
 
   let dialogEl = $state<HTMLDivElement | undefined>(undefined);
@@ -59,8 +67,6 @@
     }
   }
 
-  // Replaces the old `$: if (open) { ... }` + `afterUpdate` combo. `$effect`
-  // runs after the DOM commits, so `dialogEl` is bound before we query it.
   $effect(() => {
     if (open) {
       prev = document.activeElement as HTMLElement | null;
@@ -86,7 +92,7 @@
 </script>
 
 <div
-  class="backdrop {open ? 'show' : ''}"
+  class="fixed inset-0 z-[60] items-center justify-center bg-black/55 backdrop-blur-lg {open ? 'flex' : 'hidden'}"
   role="presentation"
   onclick={(e) => {
     if (e.target === e.currentTarget) onCancel();
@@ -94,22 +100,22 @@
 >
   <div
     bind:this={dialogEl}
-    class="modal cd-dialog"
+    class="w-[400px] max-w-[90vw] overflow-hidden rounded-xl border border-border-2 bg-bg-1 shadow-modal"
     role="alertdialog"
     aria-modal="true"
     aria-labelledby="cd-title"
     aria-describedby={description ? 'cd-desc' : undefined}
-    tabindex="-1"
+    tabindex={-1}
   >
-    <div class="modal-h">
-      <h2 id="cd-title">{title}</h2>
+    <div class="flex items-center justify-between border-b border-border-1 px-5 py-4">
+      <h2 id="cd-title" class="m-0 text-16 font-semibold">{title}</h2>
     </div>
     {#if description}
-      <div id="cd-desc" class="cd-body">{description}</div>
+      <div id="cd-desc" class="px-5 py-3.5 text-13 leading-[1.5] text-text-3">{description}</div>
     {/if}
-    <div class="modal-f">
-      <button type="button" class="btn btn-ghost" onclick={onCancel}>{cancelLabel}</button>
-      <button type="button" class={VARIANT_CLASS[variant]} onclick={onConfirm}>{confirmLabel}</button>
+    <div class="flex justify-end gap-2 border-t border-border-1 bg-bg-0 px-5 py-3.5">
+      <Button variant="ghost" onclick={onCancel}>{cancelLabel}</Button>
+      <Button variant={CONFIRM_VARIANT[variant]} class={CONFIRM_EXTRA[variant]} onclick={onConfirm}>{confirmLabel}</Button>
     </div>
   </div>
 </div>

package/src/lib/components/ContextMenu.svelte

@@ -33,10 +33,12 @@
   let menuEl = $state<HTMLUListElement | undefined>(undefined);
   let activeIdx = $state(0);
 
-  let actionItems = $derived(items.reduce<ContextMenuItem[]>((acc, e) => {
-    if (!('separator' in e)) acc.push(e);
-    return acc;
-  }, []));
+  let actionItems = $derived(
+    items.reduce<ContextMenuItem[]>((acc, e) => {
+      if (!('separator' in e)) acc.push(e);
+      return acc;
+    }, []),
+  );
 
   const menuW = 168;
   let menuH = $derived(items.length * 30 + 8);
@@ -92,28 +94,26 @@
     bind:this={menuEl}
     role="menu"
     aria-label={label}
-    tabindex="-1"
-    class="ctx-menu"
+    tabindex={-1}
+    class="fixed z-[9200] m-0 min-w-[168px] list-none rounded-lg border border-border-3 bg-bg-2 p-1 shadow-[0_8px_24px_rgba(0,0,0,0.5)] focus:outline-none"
     style="left:{cx}px;top:{cy}px"
     onkeydown={handleKeyDown}
   >
     {#each items as entry, i (i)}
       {#if 'separator' in entry}
-        <li role="separator" class="ctx-menu-sep"></li>
+        <li role="separator" class="my-1 h-px bg-row-active"></li>
       {:else}
         <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
         <li
           role="menuitem"
-          tabindex="-1"
+          tabindex={-1}
           aria-disabled={entry.disabled || undefined}
           data-active={actionIndex(entry) === activeIdx ? 'true' : undefined}
           data-danger={entry.danger || undefined}
-          class="ctx-menu-item"
+          class="flex cursor-pointer items-center whitespace-nowrap rounded-[5px] px-3 py-1.5 text-13 text-text-2 outline-none hover:bg-row-active hover:text-text-1 data-[active=true]:bg-row-active data-[active=true]:text-text-1 data-[danger=true]:text-status-danger data-[danger=true]:hover:bg-status-danger/10 aria-disabled:cursor-not-allowed aria-disabled:opacity-40"
           onmouseenter={() => (activeIdx = actionIndex(entry))}
           onmousedown={(e) => { e.preventDefault(); (() => { if (!entry.disabled) activate(entry.id); })(); }}
-        >
-          {entry.label}
-        </li>
+        >{entry.label}</li>
       {/if}
     {/each}
   </ul>

package/src/lib/components/ContextualHelp.svelte

@@ -50,16 +50,21 @@
     window.removeEventListener('keydown', onKey);
     document.removeEventListener('pointerdown', onPointer);
   });
+
+  const PLACEMENT: Record<NonNullable<Props['placement']>, string> = {
+    top: 'bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2',
+    bottom: 'top-[calc(100%+8px)] left-1/2 -translate-x-1/2',
+  };
 </script>
 
-<span class="ch-root" bind:this={rootEl}>
+<span class="relative inline-flex items-center" bind:this={rootEl}>
   <button
     bind:this={triggerEl}
     type="button"
-    class="ch-trigger"
     aria-label="Help"
     aria-haspopup="dialog"
     aria-expanded={open}
+    class="inline-flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded-full border border-border-3 bg-transparent p-0 text-[10px] font-bold leading-none text-text-4 transition-[border-color,color] duration-100 hover:border-text-3 hover:text-text-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
     onclick={toggle}
   >?</button>
   {#if open}
@@ -67,11 +72,11 @@
       bind:this={panelEl}
       role="dialog"
       aria-labelledby={titleId}
-      class="ch-panel ch-panel--{placement}"
-      tabindex="-1"
+      class="absolute z-[9200] min-w-[220px] max-w-[300px] rounded-[10px] border border-border-3 bg-bg-2 shadow-[0_8px_32px_rgba(0,0,0,0.5)] focus:outline-none {PLACEMENT[placement]}"
+      tabindex={-1}
     >
-      <div id={titleId} class="ch-title">{title}</div>
-      <div class="ch-body">{body}</div>
+      <div id={titleId} class="border-b border-border-1 px-3.5 pb-2 pt-2.5 text-12 font-semibold text-text-2">{title}</div>
+      <div class="px-3.5 py-2.5 text-12 leading-[1.5] text-text-3">{body}</div>
     </div>
   {/if}
 </span>

package/src/lib/components/CopyButton.svelte

@@ -20,8 +20,9 @@
 
 <button
   type="button"
-  class="copy-btn {copied ? 'copy-btn--done' : ''}"
+  data-copied={copied ? 'true' : undefined}
   aria-label={copied ? 'Copied!' : label}
+  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"
   onclick={handleCopy}
 >
   {#if copied}