@w5-ui/svelte 0.2.1 → 0.4.0

package/README.md

@@ -1,8 +1,120 @@
 # @w5-ui/svelte
 
-Svelte component library for the Dash UI design system. Mirrors `@w5-ui/react` 1:1.
+Svelte component library for the Dash UI design system. Mirrors `@w5-ui/react` 1:1. Pairs with
+`@w5-ui/tokens` for design tokens and `@w5-ui/assets` for brand SVGs.
 
-```ts
-import '@w5-ui/svelte/styles.css'
-import { Card, Pill, Button, Topbar, Sidebar } from '@w5-ui/svelte'
+```bash
+yarn add @w5-ui/svelte
 ```
+
+## Quick start
+
+```svelte
+<script lang="ts">
+  import '@w5-ui/svelte/styles.css' // ships @w5-ui/tokens/dashboard.css
+  import { AppLayout, Topbar, Sidebar, PageHeader, Card, Stat, Pill } from '@w5-ui/svelte'
+</script>
+
+<AppLayout pageLabel="Dashboard">
+  <Topbar slot="topbar" siteName="HQ" activeApp="system" />
+  <Sidebar slot="sidebar" sections={SECTIONS} activeId={page} on:change={(e) => (page = e.detail)} />
+
+  <PageHeader title="Dashboard" />
+  <div class="grid">
+    <Stat span={4} label="Internet" value="847" unit="Mbps" />
+    <Stat span={4} label="Clients" value="124" />
+    <Stat span={4} label="Throughput" value="12.4" unit="Gbps" />
+    <Card span={8}>
+      <h3>
+        Traffic <Pill variant="success">healthy</Pill>
+      </h3>
+    </Card>
+    <Card span={4}>
+      <h3>Top clients</h3>
+    </Card>
+  </div>
+</AppLayout>
+```
+
+That single skeleton (`AppLayout` then `PageHeader` then `<div class="grid">` then
+`<Card span={n}>`) carries every padding, gap, and column value the reference dashboards use.
+Reproduce it verbatim and spacing falls into place automatically.
+
+## The contract (read this before styling anything)
+
+The reference dashboards (`apps/dashboard-svelte`, rendered in Storybook under **Dashboard**) all
+share one skeleton. Userland looking different almost always comes down to one of these:
+
+| Don't                                                          | Do                                                                                 |
+| -------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
+| Wrap `.grid` in your own `<div style="padding: ...">`          | Render `.grid` as a direct child of `<main>`. It already pads 16px x 24px.         |
+| `display: flex; gap: ...` on the page root                     | Render `<Banner>`, `<PageHeader>`, `.grid` as siblings. They own their spacing.    |
+| Re-implement `.card` with a `<div>` and a custom border-radius | Use `<Card>` or `<Stat>`. The radius, padding, and `<h3>` rhythm ship together.    |
+| `<h3>` outside a `<Card>`                                      | Keep titles inside `<Card>`. The `.card h3` selector sizes and colours them.       |
+| `<span style="color: green">online</span>`                     | Use `<Pill variant="success">online</Pill>` (also `<Badge>`, `<StatusIndicator>`). |
+| Mix `span={5}` and `span={7}`                                  | Use 4 / 6 / 8 / 12 so rows divide cleanly into the 12-column grid.                 |
+| Skip `AppLayout` and roll your own `.app` grid                 | Use `AppLayout` once at the root. `.app`, `.workspace`, and `<main>` line up.      |
+| Hand-pick hex colours                                          | Use tokens via the `data-motif` CSS variables. See `@w5-ui/tokens`.                |
+
+## Grid math
+
+`.grid` is `repeat(12, 1fr)` with a 12px gap and 16px x 24px outer padding.
+
+| Tile width | `span` | Typical use                          |
+| ---------- | ------ | ------------------------------------ |
+| Third      | `4`    | Single-stat card, donut              |
+| Half       | `6`    | Two-column comparison                |
+| Two-thirds | `8`    | Wide table, line chart               |
+| Full       | `12`   | Time series, sankey, page-wide table |
+
+4+4+4, 8+4, 6+6, and 12 all snap cleanly. Avoid 5 and 7. They leave dead pixels and force the next
+row to wrap unevenly.
+
+## What lives where
+
+| Package         | Description                                              |
+| --------------- | -------------------------------------------------------- |
+| `@w5-ui/svelte` | ~170 Svelte components (this package)                    |
+| `@w5-ui/react`  | The same component surface for React                     |
+| `@w5-ui/tokens` | CSS variables (`data-motif="dark"` / `"light"`) + JS map |
+| `@w5-ui/assets` | Brand mark, wordmark, app-rail SVGs                      |
+
+`@w5-ui/svelte/styles.css` re-exports `@w5-ui/tokens/dashboard.css`, so importing it once is enough
+for tokens, the `.app` / `.workspace` / `.grid` / `.card` classes, and component styles.
+
+## Themes
+
+Two motifs ship in tokens:
+
+```html
+<html data-motif="dark">
+  <!-- the default -->
+</html>
+<html data-motif="light"></html>
+```
+
+Set the attribute on `<html>` (or any ancestor of the app root) to switch.
+
+## CSS hooks you can rely on
+
+Stable class names that ship from `@w5-ui/tokens/dashboard.css`:
+
+- `.app`, `.workspace`, `.content`: outer chrome, wired up by `AppLayout`
+- `.grid`: 12-column page grid with the canonical gutter
+- `.card`, `.card h3`: tile shell and title rhythm. Use through `<Card>` or `<Stat>`.
+- `.ph-bar`, `.ph-title`, `.ph-actions`: page header primitives. Use through `<PageHeader>`.
+- `.field-stack`, `.form-row`, `.form-actions`: form rhythm primitives
+- `.mac`, `.name-cell`: monospace and avatar-style cell layouts
+
+Anything else (raw colours, ad-hoc paddings) should come from tokens, not bespoke values.
+
+## Reference
+
+- **Storybook (Svelte)**: `/svelte/` in the published site
+- **Foundations / Page layout**: the canonical recipe in full, with anatomy and pitfalls
+- **Foundations / Spacing**: the 12-token spacing scale and rhythm rules
+- **Foundations / Colours**, **Type**, **Icons**, **Forms**, **Tables**, **Charts**, **Status &
+  feedback**, **Navigation**, **Overlays**, **Actions**: pick-by-question tables for every primitive
+
+The Storybook **Dashboard** section renders the reference pages 1:1. When your page looks different,
+open the matching story and diff the markup.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@w5-ui/svelte",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "Svelte 5 components for the Dash UI design system - mirrors the @w5-ui/react API 1:1. Part of Webber's design systems.",
   "keywords": [
     "svelte",
@@ -48,7 +48,7 @@
     "@w5-ui/tokens": "^0.2.1"
   },
   "devDependencies": {
-    "svelte": "^5.43.5",
+    "svelte": "^5.55.8",
     "typescript": "^5.5.0"
   },
   "files": [

package/src/lib/actions/portal.ts

@@ -0,0 +1,55 @@
+import type { Action } from 'svelte/action'
+
+/**
+ * Move a DOM node into `target` (default: `document.body`) for the
+ * lifetime of the action. Used by floating UI primitives so
+ * `position: fixed` + `z-index` always escape:
+ *
+ *   - ancestor `overflow: hidden` / `overflow: clip` (would clip
+ *     a non-portalled child even at `position: fixed` if the
+ *     ancestor establishes a containing block)
+ *   - ancestor `transform`, `filter`, `perspective`, `contain: paint`,
+ *     `will-change: transform` (any of which create a containing
+ *     block for `position: fixed` descendants, defeating viewport
+ *     positioning)
+ *   - ancestor stacking contexts with a lower `z-index` than the
+ *     popover's `z-index`, which would otherwise trap it underneath
+ *     sibling chrome
+ *
+ * The node still belongs to the Svelte component that owns it: props,
+ * reactivity, lifecycle, and event handlers continue to work; only
+ * the DOM position changes. The action removes the node on destroy
+ * so cleanup is automatic.
+ *
+ * SSR-safe: actions don't run during server rendering.
+ */
+export const portal: Action<HTMLElement, HTMLElement | string | undefined> = (
+  node,
+  target = 'body',
+) => {
+  const resolveTarget = (value: HTMLElement | string | undefined): HTMLElement | null => {
+    if (value === undefined) return document.body
+    if (typeof value === 'string') {
+      return document.querySelector<HTMLElement>(value)
+    }
+    return value
+  }
+
+  const move = (value: HTMLElement | string | undefined) => {
+    const parent = resolveTarget(value)
+    if (parent !== null && parent !== node.parentNode) {
+      parent.appendChild(node)
+    }
+  }
+
+  move(target)
+
+  return {
+    update(next: HTMLElement | string | undefined) {
+      move(next)
+    },
+    destroy() {
+      node.remove()
+    },
+  }
+}

package/src/lib/components/Accordion.svelte

@@ -6,6 +6,6 @@
   let { children }: Props = $props();
 </script>
 
-<div class="accordion">
+<div class="flex flex-col">
   {@render children?.()}
 </div>

package/src/lib/components/AccordionItem.svelte

@@ -14,31 +14,30 @@
   const panelId = `acc-panel-${uid}`;
 </script>
 
-<div class="accordion-item">
-  <h3 class="accordion-header">
+<div class="border-b border-border-1 last:border-b-0">
+  <h3 class="m-0">
     <button
       id={btnId}
       type="button"
-      class="accordion-trigger"
       aria-expanded={open}
       aria-controls={panelId}
+      class="flex w-full cursor-pointer items-center justify-between gap-2.5 border-0 bg-transparent py-2.5 text-left text-13 font-medium leading-[1.4] text-text-1 transition-colors duration-100 hover:text-text-link focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
       onclick={() => (open = !open)}
     >
       <span>{title}</span>
       <svg
-        class="accordion-chevron"
-        class:open
         viewBox="0 0 16 16"
         fill="none"
         aria-hidden="true"
+        class="h-3.5 w-3.5 shrink-0 text-text-4 transition-transform duration-200 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" />
       </svg>
     </button>
   </h3>
   {#if open}
-    <div id={panelId} role="region" aria-labelledby={btnId} class="accordion-panel">
-      <div class="accordion-content">
+    <div id={panelId} role="region" aria-labelledby={btnId}>
+      <div class="pb-2.5">
         {@render children?.()}
       </div>
     </div>

package/src/lib/components/ActionMenu.svelte

@@ -1,6 +1,11 @@
 <script module lang="ts">
   let counter = 0;
-  export interface ActionMenuItem { id: string; label: string; danger?: boolean; disabled?: boolean; }
+  export interface ActionMenuItem {
+    id: string;
+    label: string;
+    danger?: boolean;
+    disabled?: boolean;
+  }
 </script>
 
 <script lang="ts">
@@ -12,9 +17,7 @@
     onaction?: (payload: string) => void;
   }
 
-  let { items = [], label = 'Actions',
-    onaction,
-  }: Props = $props();
+  let { items = [], label = 'Actions', onaction }: Props = $props();
   const uid = `dash-ui-am-${++counter}`;
   const menuId = `${uid}-menu`;
 
@@ -64,15 +67,15 @@
   onDestroy(() => document.removeEventListener('mousedown', handleOutside));
 </script>
 
-<div class="action-menu-root" bind:this={wrapperEl}>
+<div class="group/am relative inline-block" bind:this={wrapperEl}>
   <button
     bind:this={triggerEl}
     type="button"
-    class="icon-btn action-menu-trigger"
     aria-label={label}
     aria-haspopup="menu"
     aria-expanded={open}
     aria-controls={open ? menuId : undefined}
+    class="inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md bg-transparent text-text-3 opacity-0 transition-opacity duration-100 hover:bg-row-hover hover:text-text-1 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05 aria-expanded:opacity-100 group-hover/am:opacity-100 motion-reduce:transition-none"
     onclick={toggle}
     onkeydown={onKeyDown}
   >
@@ -83,15 +86,20 @@
     </svg>
   </button>
   {#if open}
-    <ul id={menuId} role="menu" aria-label={label} class="action-menu">
+    <ul
+      id={menuId}
+      role="menu"
+      aria-label={label}
+      class="absolute right-0 top-[calc(100%+4px)] z-[9100] m-0 min-w-[148px] list-none rounded-lg border border-border-3 bg-bg-2 p-1 shadow-[0_8px_24px_rgba(0,0,0,0.5)]"
+    >
       {#each items as item, idx (item.id)}
         <li
           role="menuitem"
-          tabindex="-1"
+          tabindex={-1}
           aria-disabled={item.disabled}
           data-active={idx === activeIdx ? 'true' : undefined}
           data-danger={item.danger ? 'true' : undefined}
-          class="action-menu-item"
+          class="flex cursor-pointer items-center whitespace-nowrap rounded-[5px] px-2.5 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 = idx; }}
           onmousedown={(e) => { e.preventDefault(); (() => { if (!item.disabled) activate(item.id); })(); }}
         >{item.label}</li>

package/src/lib/components/ActivityFeed.svelte

@@ -28,46 +28,52 @@
 
   let endEl = $state<HTMLDivElement | undefined>(undefined);
 
-  // Replaces `afterUpdate`. Reading `items.length` makes the effect depend
-  // on the visible list so we re-scroll whenever an item is appended.
   $effect(() => {
     void items.length;
     if (autoScroll && endEl) endEl.scrollIntoView({ block: 'nearest' });
   });
+
+  const SEVERITY_DOT: Record<ActivitySeverity, string> = {
+    info: 'bg-brand-05',
+    success: 'bg-status-success',
+    warn: 'bg-status-warning',
+    error: 'bg-status-danger',
+    neutral: 'bg-status-neutral',
+  };
 </script>
 
 <div
   role="feed"
   aria-label={label}
   aria-busy={busy}
-  class="activity-feed"
+  class="flex flex-col gap-1 overflow-y-auto"
   style:max-height="{maxHeight}px"
-  style:overflow-y="auto"
 >
   {#each items as item, i (item.id)}
-    <!-- svelte-ignore a11y_no_noninteractive_tabindex - navigable feed item for keyboard users -->
+    {@const sev = item.severity ?? 'neutral'}
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
     <article
-      class="af-item af-item--{item.severity ?? 'neutral'}"
       aria-labelledby="af-title-{item.id}"
       aria-describedby={item.description ? `af-desc-${item.id}` : undefined}
       aria-posinset={i + 1}
       aria-setsize={items.length}
-      tabindex="0"
+      tabindex={0}
+      class="flex items-start gap-2 rounded-md px-2 py-1.5 text-13 hover:bg-divider focus-visible:bg-row-hover focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-brand-05"
     >
-      <div class="af-dot" aria-hidden="true"></div>
-      <div class="af-body">
-        <div class="af-header">
-          <span id="af-title-{item.id}" class="af-title">{item.title}</span>
-          <span class="af-time">{item.time}</span>
+      <div class="mt-1.5 h-2 w-2 shrink-0 rounded-full {SEVERITY_DOT[sev]}" aria-hidden="true"></div>
+      <div class="min-w-0 flex-1">
+        <div class="flex items-baseline justify-between gap-2">
+          <span id="af-title-{item.id}" class="truncate font-medium text-text-1">{item.title}</span>
+          <span class="shrink-0 text-11 text-text-4 tabular-nums">{item.time}</span>
         </div>
         {#if item.description}
-          <p id="af-desc-{item.id}" class="af-desc">{item.description}</p>
+          <p id="af-desc-{item.id}" class="m-0 mt-0.5 text-12 text-text-3">{item.description}</p>
         {/if}
       </div>
     </article>
   {/each}
   {#if items.length === 0}
-    <div class="af-empty" role="status">No activity</div>
+    <div class="py-6 text-center text-12 text-text-4" role="status">No activity</div>
   {/if}
   <div bind:this={endEl}></div>
 </div>

package/src/lib/components/Alert.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import CloseIcon from '../icons/CloseIcon.svelte';
+  import IconButton from './IconButton.svelte';
+
   interface Props {
     variant?: 'success' | 'warn' | 'danger' | 'info';
     onDismiss?: (() => void) | undefined;
@@ -7,18 +9,34 @@
   }
 
   let { variant = 'info', onDismiss = undefined, children }: Props = $props();
+
+  // Variant strings statically composed so Tailwind's scanner picks them
+  // up. Values match dashboard.css exactly: 10% bg tint + left-border in
+  // the variant base colour + hand-tuned readable text colour.
+  const VARIANT: Record<NonNullable<Props['variant']>, string> = {
+    success: 'bg-status-success/10 border-l-status-success text-status-success',
+    warn: 'bg-status-warning/10 border-l-status-warning text-status-warning',
+    danger: 'bg-status-danger/10 border-l-status-danger text-status-danger',
+    info: 'bg-status-info/10 border-l-brand-05 text-status-info',
+  };
 </script>
 
 <div
-  class="alert alert-{variant}"
+  class="flex items-center gap-2.5 rounded-lg border-l-[3px] px-3.5 py-2.5 text-13 leading-[1.4]
+    {VARIANT[variant]}"
   role={variant === 'danger' ? 'alert' : 'status'}
   aria-live={variant === 'danger' ? 'assertive' : 'polite'}
   aria-atomic="true"
 >
-  <span class="alert-body">{@render children?.()}</span>
+  <span class="flex-1">{@render children?.()}</span>
   {#if onDismiss}
-    <button type="button" class="alert-dismiss icon-btn" onclick={onDismiss} aria-label="Dismiss alert">
+    <IconButton
+      title="Dismiss alert"
+      onclick={onDismiss}
+      class="ml-auto h-6 w-6 shrink-0"
+      aria-label="Dismiss alert"
+    >
       <CloseIcon />
-    </button>
+    </IconButton>
   {/if}
 </div>

package/src/lib/components/AppLayout.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import SkipLink from './SkipLink.svelte';
+
+  interface Props {
+    /** Page title for the visually-hidden h1 that labels main (WCAG 2.4.6). */
+    pageLabel: string;
+    class?: string;
+    /** Topbar snippet, typically a Topbar component. */
+    topbar?: import('svelte').Snippet;
+    /** Sidebar snippet, typically a Sidebar component. */
+    sidebar?: import('svelte').Snippet;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    pageLabel,
+    class: className = '',
+    topbar,
+    sidebar,
+    children,
+  }: Props = $props();
+</script>
+
+<div class="app {className}">
+  <SkipLink />
+  {@render topbar?.()}
+  <div class="workspace">
+    {@render sidebar?.()}
+    <main class="content" id="main-content" tabindex="-1" aria-labelledby="page-title">
+      <h1 id="page-title" class="sr-only">{pageLabel}</h1>
+      {@render children?.()}
+    </main>
+  </div>
+</div>

package/src/lib/components/Avatar.svelte

@@ -10,7 +10,8 @@
     alt?: string | undefined;
     size?: AvatarSize;
     status?: AvatarStatus | undefined;
-    className?: string;
+    /** Extra Tailwind utilities to compose with the avatar root. */
+    class?: string;
     style?: string;
   }
 
@@ -20,23 +21,39 @@
     alt = undefined,
     size = 'md',
     status = undefined,
-    className = '',
-    style = ''
+    class: className = '',
+    style = '',
   }: Props = $props();
+
+  // Pre-compose class strings so Tailwind's static scanner picks them up.
+  const SIZE: Record<AvatarSize, string> = {
+    sm: 'h-6 w-6 text-[9px]',
+    md: 'h-8 w-8 text-[12px]',
+    lg: 'h-10 w-10 text-[16px]',
+  };
+  const STATUS_BG: Record<AvatarStatus, string> = {
+    online: 'bg-status-success',
+    offline: 'bg-status-neutral',
+    away: 'bg-status-warning',
+  };
+
+  // Hardcoded neutral chrome to match dashboard.css's literal #4a4b53 / #fff,
+  // independent of motif. See the comment in Topbar.svelte for rationale.
+  let rootClass = $derived(
+    `relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-neutral-06 font-semibold text-white ${SIZE[size]} ${className}`,
+  );
 </script>
 
-<span
-  class="avatar avatar-{size}{className ? ` ${className}` : ''}"
-  role="img"
-  aria-label={alt ?? (src ? '' : initials)}
-  {style}
->
+<span class={rootClass} role="img" aria-label={alt ?? (src ? '' : initials)} {style}>
   {#if src}
-    <img {src} alt="" />
+    <img {src} alt="" class="block h-full w-full object-cover" />
   {:else}
     {initials}
   {/if}
   {#if status}
-    <span class="avatar-status avatar-status-{status}" aria-hidden="true"></span>
+    <span
+      class="absolute bottom-0 right-0 h-2 w-2 rounded-full border-[1.5px] border-bg-page {STATUS_BG[status]}"
+      aria-hidden="true"
+    ></span>
   {/if}
 </span>

package/src/lib/components/AvatarGroup.svelte

@@ -21,23 +21,40 @@
     avatars = [],
     max = 5,
     size = 'md',
-    ariaLabel = 'Avatar group'
+    ariaLabel = 'Avatar group',
   }: Props = $props();
 
   let visible = $derived(avatars.slice(0, max));
   let overflow = $derived(avatars.length - visible.length);
+
+  const SIZE: Record<AvatarSize, string> = {
+    sm: 'h-6 w-6 text-[9px]',
+    md: 'h-8 w-8 text-[12px]',
+    lg: 'h-10 w-10 text-[16px]',
+  };
+  // Group avatars overlap by 8px to the left and add a 2px bg-coloured ring
+  // to read clearly when stacked. Ring uses the chrome's literal
+  // #0a0a0b (neutral-10) to match dashboard.css.
+  const OVERLAP =
+    '[&_>*:not(:last-child)>span]:-ml-2 [&_>*>span]:border-2 [&_>*>span]:border-bg-page';
 </script>
 
-<span class="avatar-group" role="list" aria-label={ariaLabel}>
+<span
+  class="inline-flex flex-row-reverse items-center {OVERLAP}"
+  role="list"
+  aria-label={ariaLabel}
+>
   {#each visible as av, i (i)}
-    <span role="listitem" class="avatar-group-item">
+    <span role="listitem" class="contents">
       <Avatar initials={av.initials} src={av.src} alt={av.alt} {size} />
     </span>
   {/each}
   {#if overflow > 0}
     <span
       role="listitem"
-      class="avatar avatar-{size} avatar-overflow"
+      class="relative inline-flex shrink-0 select-none items-center justify-center overflow-visible rounded-full border-2 border-bg-page bg-neutral-07 font-bold text-text-3 {SIZE[
+        size
+      ]}"
       aria-label="{overflow} more"
     >+{overflow}</span>
   {/if}

package/src/lib/components/Badge.svelte

@@ -20,19 +20,35 @@
     showZero = false,
     color = 'danger',
     class: klass = '',
-    children
+    children,
   }: Props = $props();
-  
 
   let show = $derived(dot || (count !== undefined && (showZero || count > 0)));
   let label = $derived(count !== undefined ? (count > max ? `${max}+` : String(count)) : '');
+
+  // Variant strings pre-composed for Tailwind's static scanner. Warn keeps
+  // dashboard.css's `color: #111` (legible on the orange chip).
+  const COLOR: Record<BadgeColor, string> = {
+    danger: 'bg-status-danger text-white',
+    // Status-warning is yellow in both motifs; near-black text stays
+    // legible against it. `text-neutral-10` resolves to `#0a0a0b`.
+    warn: 'bg-status-warning text-neutral-10',
+    info: 'bg-brand-05 text-white',
+    success: 'bg-status-success text-white',
+    neutral: 'bg-status-neutral text-white',
+  };
 </script>
 
-<span class="badge-wrapper{klass ? ` ${klass}` : ''}">
+<span class="relative inline-flex {klass}">
   {@render children?.()}
   {#if show}
-    <span class="badge badge-{color}{dot ? ' badge-dot' : ''}" aria-hidden="true">
-      {#if !dot}{label}{/if}
-    </span>
+    <span
+      class="pointer-events-none absolute z-10 flex items-center justify-center whitespace-nowrap rounded-lg border-[1.5px] border-bg-page text-[10px] font-bold leading-none
+        {COLOR[color]}
+        {dot
+          ? '-right-0.5 -top-0.5 h-2 w-2 min-w-2 p-0'
+          : '-right-1.5 -top-1 h-4 min-w-4 px-1'}"
+      aria-hidden="true"
+    >{#if !dot}{label}{/if}</span>
   {/if}
 </span>