@w5-ui/svelte 0.2.0 → 0.3.0

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}

package/src/lib/components/DatePicker.svelte

@@ -37,6 +37,7 @@
 
 <script lang="ts">
   import { onMount, onDestroy, tick } from 'svelte';
+  import Button from './Button.svelte';
 
   interface Props {
     value?: Date | null;
@@ -45,7 +46,10 @@
     onchange?: (payload: Date) => void;
   }
 
-  let { value = null, placeholder = 'Pick a date', disabled = false,
+  let {
+    value = null,
+    placeholder = 'Pick a date',
+    disabled = false,
     onchange,
   }: Props = $props();
   const uid = `dash-ui-dp-${++counter}`;
@@ -58,7 +62,7 @@
   // svelte-ignore state_referenced_locally
   let viewMonth = $state(value?.getMonth() ?? today.getMonth());
   let focusIdx = $state(0);
-  let triggerEl = $state<HTMLButtonElement | undefined>(undefined);
+  let triggerEl = $state<HTMLElement | undefined>(undefined);
   let calEl = $state<HTMLDivElement | undefined>(undefined);
   let dayEls: (HTMLButtonElement | null)[] = $state(Array(42).fill(null));
 
@@ -125,25 +129,25 @@
 
   onMount(() => document.addEventListener('mousedown', handleOutside));
   onDestroy(() => document.removeEventListener('mousedown', handleOutside));
+
+  function dayCls(outside: boolean, isToday: boolean, isSelected: boolean) {
+    let cls = 'flex h-8 w-8 cursor-pointer items-center justify-center rounded border-0 bg-transparent text-12 leading-none transition-colors duration-100 hover:bg-row-active focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-brand-05';
+    if (outside) cls += ' text-text-4';
+    else cls += ' text-text-2';
+    if (isToday && !isSelected) cls += ' ring-1 ring-inset ring-brand-05';
+    if (isSelected) cls += ' bg-brand-05 text-white hover:bg-brand-06';
+    return cls;
+  }
 </script>
 
-<div class="dp-root">
-  <button
-    bind:this={triggerEl}
-    type="button"
-    class="btn dp-trigger"
-    aria-haspopup="dialog"
-    aria-expanded={open}
-    aria-controls={open ? calId : undefined}
-    {disabled}
-    onclick={() => open ? closeCal() : openCal()}
-  >
+<div class="relative inline-block" bind:this={triggerEl}>
+  <Button variant="ghost" aria-haspopup="dialog" aria-expanded={open} aria-controls={open ? calId : undefined} disabled={disabled} onclick={() => open ? closeCal() : openCal()}>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
       <rect x="1" y="2" width="12" height="11" rx="1.5" />
       <path d="M1 6h12M4 1v2M10 1v2" />
     </svg>
     {value ? formatDate(value) : placeholder}
-  </button>
+  </Button>
 
   {#if open}
     <div
@@ -152,27 +156,27 @@
       role="dialog"
       aria-modal="true"
       aria-label={`Choose date, ${label}`}
-      class="dp-cal"
+      class="absolute left-0 top-[calc(100%+4px)] z-[9100] rounded-lg border border-border-3 bg-bg-2 p-2 shadow-[0_8px_24px_rgba(0,0,0,0.5)]"
     >
-      <div class="dp-header">
-        <button type="button" class="dp-nav" onclick={prevMonth} aria-label="Previous month">
+      <div class="flex items-center justify-between px-1 py-1">
+        <button type="button" 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={prevMonth} aria-label="Previous month">
           <svg width="8" height="12" viewBox="0 0 8 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
             <path d="M7 1L2 6l5 5" />
           </svg>
         </button>
-        <span class="dp-month-label" aria-live="polite">{label}</span>
-        <button type="button" class="dp-nav" onclick={nextMonth} aria-label="Next month">
+        <span class="text-13 font-medium text-text-1" aria-live="polite">{label}</span>
+        <button type="button" 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={nextMonth} aria-label="Next month">
           <svg width="8" height="12" viewBox="0 0 8 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
             <path d="M1 1l5 5-5 5" />
           </svg>
         </button>
       </div>
 
-      <table role="grid" class="dp-grid" aria-label={label}>
+      <table role="grid" class="mt-1 border-collapse" aria-label={label}>
         <thead>
           <tr>
             {#each DAYS as d}
-              <th scope="col" abbr={d}>{d}</th>
+              <th scope="col" abbr={d} class="p-0 text-center text-11 font-semibold uppercase tracking-[0.05em] text-text-4">{d}</th>
             {/each}
           </tr>
         </thead>
@@ -185,12 +189,12 @@
                 {@const outside = day.getMonth() !== viewMonth}
                 {@const isToday = isSameDay(day, today)}
                 {@const isSelected = value ? isSameDay(day, value) : false}
-                <td role="gridcell" aria-selected={isSelected}>
+                <td role="gridcell" aria-selected={isSelected} class="p-0">
                   <button
                     bind:this={dayEls[idx]}
                     type="button"
                     tabindex={idx === focusIdx ? 0 : -1}
-                    class="dp-day{outside ? ' dp-day--outside' : ''}{isToday && !isSelected ? ' dp-day--today' : ''}{isSelected ? ' dp-day--selected' : ''}"
+                    class={dayCls(outside, isToday, isSelected)}
                     aria-label={day.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })}
                     onkeydown={(e) => onGridKey(e, idx)}
                     onclick={() => select(day)}