@spaethtech/svelte-ui 0.1.10 → 0.3.1-dev.3.e16df24

package/README.md

@@ -1,80 +1,218 @@
-# Svelte UI Component Library
+# svelte-ui
 
-A collection of reusable Svelte 5 UI components with Tailwind CSS styling and FontAwesome icon support.
+Reusable **Svelte 5** (runes) UI components, styled with **Tailwind CSS v4** and a small set of
+shared design tokens. Icons are **MDI** via [`unplugin-icons`](https://github.com/unplugin/unplugin-icons) —
+there's no per-component icon dependency; you render icons into snippets.
 
-See JUNIE.md for how Junie (our autonomous programmer) handles repository rules files like CLAUDE.md and .cursorrules.
+Three entry points:
+
+- **`svelte-ui`** — the components.
+- **`svelte-ui/data`** — the headless data layer (query language parser/AST + `createGrid`) that
+  powers `DataTable`/`Query`.
+- **`svelte-ui/theme.css`** — the theme (color + sizing tokens, light + dark).
 
 ## Components
 
-- **Button** - Flexible button/anchor with variants and icon support
-- **Dialog** - Modal dialog with backdrop handling
-- **Input** - Enhanced text input with icons and validation
-- **Select** - Custom dropdown with keyboard navigation
-- **Rating** - Interactive star rating component
-- **NotesEditor** - Auto-sizing textarea component
+- **Form** — `Button`, `Input`, `Select`, `Checkbox`, `TextArea`, `Rating`, plus the specialized
+  inputs `SearchInput` / `EmailInput` / `PasswordInput` / `NumberInput`.
+- **Data** — `DataTable`, `Query` (on the `svelte-ui/data` headless layer).
+- **Overlays** — `Dialog`, `Popup`, `Menu`, and the `use:tooltip` action.
+- **Display / theme** — `Badge`, `NotesEditor`, `ThemeSelector`.
+- **Positioning** — the `anchored` engine (Svelte action + `computePlacement`) shared by
+  `Popup` / `Menu` / tooltips.
+
+### Cross-cutting axes
+
+Most components share two props that behave the same everywhere:
+
+- **`variant`** — color/style: `primary` `secondary` `danger` `info` `success` `warning` `ghost`
+  `plain` (`plain` = borderless/transparent, for dense icon controls).
+- **`size`** — `sm` (24px) · `md` (32px, **default**) · `lg` (40px).
 
 ## Installation
 
-```bash
-# For local development
-npm install ../path/to/svelte-ui/dist
+Published to the public npm registry:
 
-# Or build from source
-cd svelte-ui
-npm install
-npm run package
+```bash
+npm install @spaethtech/svelte-ui
 ```
 
-## Prerequisites
+Consumers pin a caret range and pick up releases with `npm update`. Note this package is **pre-1.0**,
+so `^0.2.0` allows `0.2.x` (patch fixes) but **not** `0.3.0` — breaking changes bump the MINOR (see
+`CHANGELOG.md`), so a new minor is adopted deliberately by bumping the range, never silently.
 
-Your project must have these peer dependencies installed:
+During active co-development you can still link a local checkout with a `file:` dependency instead:
+
+```jsonc
+// package.json
+"dependencies": {
+  "@spaethtech/svelte-ui": "file:../svelte-ui"
+}
+```
+
+### Peer dependencies
 
 ```bash
-npm install svelte@^5.0.0 tailwindcss@^4.0.0
-npm install @fortawesome/fontawesome-svg-core@^6.7.0
-npm install @fortawesome/free-solid-svg-icons@^6.7.0
+npm install svelte@^5 tailwindcss@^4 unplugin-icons@^23 @iconify-json/mdi@^1
 ```
 
+`unplugin-icons` + `@iconify-json/mdi` are **required**: the packaged components ship bare
+`~icons/mdi/*` imports that the consumer resolves at build time.
+
 ## Setup
 
-### 1. Tailwind Configuration
+**1. Vite — add the icon resolver** (`vite.config.ts`):
 
-Add the component paths to your `tailwind.config.js`:
+```ts
+import Icons from "unplugin-icons/vite";
 
-```js
-export default {
-  content: [
-    './src/**/*.{html,js,svelte,ts}',
-    './node_modules/svelte-ui/**/*.{html,js,svelte,ts}'
-  ],
-  // ... rest of config
-}
+export default defineConfig({
+  plugins: [/* sveltekit(), tailwindcss(), */ Icons({ compiler: "svelte" })],
+});
+```
+
+**2. CSS — import Tailwind + the theme, and scan the dist** (`app.css`, Tailwind v4):
+
+```css
+@import "tailwindcss";
+@import "svelte-ui/theme.css";
+
+/* Generate the utility classes the components use (path is relative to this file). */
+@source "../node_modules/svelte-ui/dist";
 ```
 
-### 2. Import Components
+**3. Use components** — render icons into snippets with `~icons/mdi/*`:
+
+```svelte
+<script>
+  import { Button, Input, Select } from "svelte-ui";
+  import IconSearch from "~icons/mdi/magnify";
+</script>
+
+<Button text="Save" variant="primary" size="md" />
+
+<Input placeholder="Search…">
+  {#snippet icon()}<IconSearch />{/snippet}
+</Input>
+
+<Select bind:value={selected} options={myOptions} />
+```
+
+## Tooltips
+
+Themed tooltips come from the `use:tooltip` action (built on `anchored`) — no global handler.
+`Button` drives it from its `title`, so native `title` tooltips are replaced wherever a Button is
+used; apply the action directly on any other element:
 
 ```svelte
 <script>
-  import { Button, Dialog, Input, Select, Rating } from 'svelte-ui';
-  import { faSearch, faSave } from '@fortawesome/free-solid-svg-icons';
+  import { Button, tooltip } from "svelte-ui";
 </script>
 
-<Button text="Click me" variant="primary" />
-<Input bind:value={searchQuery} icon={faSearch} placeholder="Search..." />
-<Select options={myOptions} bind:value={selected} />
+<Button title="Delete" variant="danger" />
+<!-- title → themed tooltip + aria-label backstop -->
+<span use:tooltip={{ text: "Any element", side: "top" }}>hover me</span>
 ```
 
+## Theme
+
+`svelte-ui/theme.css` is the single source of truth — semantic color tokens
+(`--ui-color-primary` / `--ui-color-secondary` / `--ui-color-text` / `--ui-color-background` / …) and sizing
+tokens (`--ui-height*`, `--ui-border`), **light + dark only**. Dark follows the system preference;
+force either with the `.theme-light` / `.theme-dark` classes on `<html>` (see `ThemeSelector`).
+
+## Composition standard
+
+Compound components are built **only** from the library's own core components — never raw
+`<button>` / `<select>` / `<input>`. e.g. `DataTable`'s controls + pagination are
+`<Button variant="plain" size="sm">` and its per-page is `<Select size="sm">`; `Query` is built on
+`<Input>`. See `CLAUDE.md` for the full standard and the shared `variant`/`size` axes.
+
 ## Development
 
 ```bash
-npm run dev     # Start demo server
-npm run package # Build library
-npm run check   # TypeScript validation
+npm run dev      # demo server (http://localhost:5173)
+npm run package  # build the distributable (svelte-package + publint)
+npm run check    # svelte-check
+npm run test     # Playwright
+```
+
+The demo (every component) runs at `http://localhost:5173`, served in dev behind
+https://svelte-ui.spaethtech.dev. Component reference and examples live in `docs/`.
+
+## Releasing
+
+Releases are published to npm by CI (`.github/workflows/publish.yml`) when a `v*` tag is pushed —
+authenticated via npm **OIDC trusted publishing** (no `NPM_TOKEN` secret). Build provenance is off
+because npm only supports it for **public** source repos (this repo is private); if it ever goes
+public, re-add `"provenance": true` to `publishConfig`.
+
+```bash
+# 1. Roll CHANGELOG [Unreleased] into the new version heading, commit it.
+# 2. Bump + tag (choose one). Pre-1.0: breaking changes are a MINOR bump.
+npm version minor        # or: patch | major  → edits package.json, creates the vX.Y.Z tag
+# 3. Push the commit and the tag; the tag push triggers the publish workflow.
+git push && git push --tags
+```
+
+CI verifies the tag matches `package.json`, type-checks, then runs `npm publish` (the `prepack`
+script builds `dist/` fresh — never commit `dist/`). Versions are **immutable**: a number can't be
+republished, so don't tag until the CHANGELOG/version are right.
+
+### Dev / canary builds
+
+Every push to `main` also publishes a prerelease under the **`dev`** dist-tag (same workflow, no git
+tag needed) — version `<next patch>-dev.<run>.<sha>`. It never touches `latest`, and caret ranges
+(`^0.3.0`) skip prereleases, so it's invisible unless a consumer opts in:
+
+```bash
+npm install @spaethtech/svelte-ui@dev   # newest main build; re-run / npm update to refresh
+```
+
+Use it to test unreleased work in a consumer before cutting a real release. (Publishing on every push
+does accumulate prerelease versions on the registry — that's expected.)
+
+**One-time setup (already done once, listed for reference):** on npmjs.com → the package → Settings →
+add a **Trusted Publisher** for GitHub Actions (org `spaethtech`, repo `svelte-ui`, workflow
+`publish.yml`, "Allow npm publish"). Both the release and dev paths live in that one workflow file, so
+the single trusted-publisher entry covers both.
+
+## Known issues
+
+### White / outline-less mouse cursor on Windows (`text`, `grab`, `grabbing`, `crosshair`)
+
+On some Windows machines — most often with **AMD GPUs** (including AMD APU-presented hybrid
+laptops) — the `text` (I-beam), `grab`/`grabbing`, and `crosshair` cursors render as a **white,
+outline-less mask** that's nearly invisible on light backgrounds, until _any_ repaint (data
+loading, a theme toggle, scrolling) momentarily clears it. The default arrow and pointer/hand
+cursors are unaffected, because the OS draws those natively while Chromium supplies its own bitmap
+for the affected ones.
+
+**This is NOT a bug in svelte-ui — or in any web app/framework.** It's a known **Chromium +
+Windows** defect in the GPU **Multiplane Overlay (MPO)** present path: the legacy monochrome cursor
+mask is composited incorrectly on the overlay plane. It reproduces across unrelated sites, in both
+Chrome and Edge, and is independent of `color-scheme`, hydration, or anything in CSS. Tracked
+upstream:
+
+- https://issues.chromium.org/issues/40239916
+- https://issues.chromium.org/issues/339818333
+
+**Per-machine fix — disable MPO** (keeps hardware acceleration on; only the overlay path changes):
+
+```bat
+reg add "HKLM\SOFTWARE\Microsoft\Windows\Dwm" /v OverlayTestMode /t REG_DWORD /d 5 /f
 ```
 
-## Demo
+Reboot, then confirm in `chrome://gpu` that multiple-plane overlays are no longer active. Revert
+with `reg delete "HKLM\SOFTWARE\Microsoft\Windows\Dwm" /v OverlayTestMode /f` + reboot. The only
+tradeoff is slightly higher power during video playback. Alternatives: disable "Use graphics
+acceleration" in the browser (broader hammer), set the Windows Text Select pointer to an ARGB
+cursor such as `beam_r.cur` (fixes the I-beam only), or update the GPU driver.
 
-Run `npm run dev` to see all components in action at http://localhost:5173
+**Do not work around this in component code.** A custom CSS `cursor:` would override every healthy
+user's correct native cursor (size, DPI, accessibility, OS shape) just to patch a client-side GPU
+bug — and you can't feature-detect the broken state to apply it conditionally. The fix belongs on
+the affected client, not in the library.
 
 ## License
 

package/dist/components/Alert.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { Size } from "../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../types/responsive.js";
+
+  /**
+   * A status banner — themed via the semantic colour tokens, so it tracks light/dark + per-tenant
+   * accent. Honours the shared {@link Variant} + {@link Size} axes (the status subset). Replaces
+   * hand-rolled `[color:var(--ui-color-error)]` divs. Renders nothing when empty (drop-in for `{#if err}`).
+   */
+  type AlertVariant =
+    "neutral" | "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "ghost";
+  interface Props {
+    variant?: AlertVariant;
+    size?: Responsive<Size>;
+    text?: string;
+    /** Faint tinted background in addition to the bordered + coloured text. */
+    filled?: boolean;
+    /** Drop the visible frame while keeping the 1px box: border colour = the alert's own background
+     *  (the `filled` tint, or transparent when not filled). Defaults `false` — an Alert reads as a
+     *  bordered status frame. */
+    borderless?: boolean;
+    /** Optional icon — a Snippet (icon-set-agnostic), like Button/Input. Inherits the alert colour. */
+    icon?: Snippet;
+    /** Which side the icon sits on. Defaults to leading (left). */
+    iconPosition?: "left" | "right";
+    class?: string;
+    children?: Snippet;
+  }
+  let {
+    variant = "info",
+    size = "md",
+    text = "",
+    filled = false,
+    borderless = false,
+    icon,
+    iconPosition = "left",
+    class: cls = "",
+    children,
+  }: Props = $props();
+
+  // Variant → semantic token (danger maps to the renamed --ui-color-error).
+  const tokenFor: Record<AlertVariant, string> = {
+    neutral: "--ui-color-text",
+    primary: "--ui-color-primary",
+    secondary: "--ui-color-secondary",
+    success: "--ui-color-success",
+    info: "--ui-color-info",
+    warning: "--ui-color-warning",
+    danger: "--ui-color-error",
+    ghost: "--ui-color-text",
+  };
+  const sizeClass: Record<Size, string> = {
+    sm: "px-2 py-1 text-xs gap-1.5",
+    md: "px-3 py-2 text-sm gap-2",
+    lg: "px-4 py-3 text-base gap-2",
+  };
+  // Inline-icon svg size per tier (14 / 16 / 20px), matching Button/Input.
+  const iconSizeClass: Record<Size, string> = {
+    sm: "[&_svg]:w-3.5 [&_svg]:h-3.5",
+    md: "[&_svg]:w-4 [&_svg]:h-4",
+    lg: "[&_svg]:w-5 [&_svg]:h-5",
+  };
+  const token = $derived(tokenFor[variant]);
+  // Same tint scale as Badge/Card — border / text / (optional) fill all from the shared strengths.
+  // The background is the `filled` tint or transparent; `borderless` paints the border that same
+  // colour so the frame disappears without altering the 1px box.
+  // `ghost` is the quiet, near-transparent alert (mirrors Badge/Button ghost): no fill, a faint
+  // text-tint border, muted text — regardless of `filled`. Every other variant uses the shared tint scale.
+  const isGhost = $derived(variant === "ghost");
+  const bgColor = $derived(
+    filled ? `color-mix(in srgb, var(${token}) var(--ui-tint-soft), transparent)` : "transparent",
+  );
+  const standardBorder = $derived(
+    isGhost
+      ? "color-mix(in srgb, var(--ui-color-text) 20%, transparent)"
+      : `color-mix(in srgb, var(${token}) var(--ui-tint-border), transparent)`,
+  );
+  const textColor = $derived(
+    isGhost
+      ? "color-mix(in srgb, var(--ui-color-text) 65%, transparent)"
+      : `color-mix(in srgb, var(${token}) var(--ui-tint-strong), var(--ui-color-text))`,
+  );
+  const style = $derived(
+    `border-color: ${borderless ? bgColor : standardBorder};` +
+      ` color: ${textColor};` +
+      (filled ? ` background-color: ${bgColor};` : ""),
+  );
+  const has = $derived(!!children || !!text);
+</script>
+
+{#if has}
+  <div
+    role="alert"
+    class="flex items-center [border-radius:var(--ui-border-radius)] border {responsiveClasses(
+      size,
+      sizeClass,
+    )} {cls}"
+    {style}
+  >
+    {#if icon && iconPosition === "left"}
+      <span
+        class="inline-flex shrink-0 [&_svg]:fill-current {responsiveClasses(size, iconSizeClass)}"
+        >{@render icon()}</span
+      >
+    {/if}
+    <span class="min-w-0"
+      >{#if children}{@render children()}{:else}{text}{/if}</span
+    >
+    {#if icon && iconPosition === "right"}
+      <span
+        class="ml-auto inline-flex shrink-0 [&_svg]:fill-current {responsiveClasses(
+          size,
+          iconSizeClass,
+        )}">{@render icon()}</span
+      >
+    {/if}
+  </div>
+{/if}

package/dist/components/Alert.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { Snippet } from "svelte";
+import type { Size } from "../types/sizes.js";
+import { type Responsive } from "../types/responsive.js";
+/**
+ * A status banner — themed via the semantic colour tokens, so it tracks light/dark + per-tenant
+ * accent. Honours the shared {@link Variant} + {@link Size} axes (the status subset). Replaces
+ * hand-rolled `[color:var(--ui-color-error)]` divs. Renders nothing when empty (drop-in for `{#if err}`).
+ */
+type AlertVariant = "neutral" | "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "ghost";
+interface Props {
+    variant?: AlertVariant;
+    size?: Responsive<Size>;
+    text?: string;
+    /** Faint tinted background in addition to the bordered + coloured text. */
+    filled?: boolean;
+    /** Drop the visible frame while keeping the 1px box: border colour = the alert's own background
+     *  (the `filled` tint, or transparent when not filled). Defaults `false` — an Alert reads as a
+     *  bordered status frame. */
+    borderless?: boolean;
+    /** Optional icon — a Snippet (icon-set-agnostic), like Button/Input. Inherits the alert colour. */
+    icon?: Snippet;
+    /** Which side the icon sits on. Defaults to leading (left). */
+    iconPosition?: "left" | "right";
+    class?: string;
+    children?: Snippet;
+}
+declare const Alert: import("svelte").Component<Props, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/components/Badge/Badge.svelte

@@ -1,80 +1,153 @@
 <script lang="ts">
-    import Icon from "../Icon/Icon.svelte";
-    import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";
-    import type { Variant } from "../../types/variants.js";
-    import type { Size } from "../../types/sizes.js";
-    import {
-        getVariantClasses,
-        getVariantStyles,
-    } from "../../styles/variants.js";
-    import {
-        badgeSizeClasses,
-        componentHeights,
-        textSizes,
-    } from "../../styles/sizes.js";
-    interface Props {
-        icon?: IconDefinition;
-        text?: string;
-        variant?: Variant;
-        size?: Size;
-        iconPosition?: "left" | "right";
-        rounded?: boolean;
-    }
+  import type { Snippet } from "svelte";
+  import Close from "~icons/mdi/close";
+  import type { Size } from "../../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../../types/responsive.js";
+
+  /**
+   * A compact status chip — themed via the semantic colour tokens like
+   * Alert. Honours the shared {@link Variant} + {@link Size} axes;
+   * chips scale in lockstep with the surrounding text.
+   *
+   * Variant → semantic token. `default` uses `--ui-color-secondary`
+   * (the neutral in every theme). The chip fills with a soft tint
+   * of the token and borders with the token at full strength; the
+   * text stays high-contrast against the background.
+   */
+  type BadgeVariant =
+    | "neutral"
+    | "default"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "info"
+    | "warning"
+    | "danger"
+    | "ghost";
 
-    let {
-        icon,
-        text = "",
-        variant = "primary",
-        size = "md",
-        iconPosition = "left",
-        rounded = true,
-    }: Props = $props();
+  interface Props {
+    text?: string;
+    variant?: BadgeVariant;
+    size?: Responsive<Size>;
+    dismissible?: boolean;
+    rounded?: boolean;
+    /** Hide the border WITHOUT changing the box: the border stays 1px (so height/width are
+     *  identical to a bordered chip) but its colour is set to the chip's own background, so the
+     *  visible ring disappears. Set `borderless={false}` for the classic ringed chip — the ring is
+     *  `--ui-tint-border` (30%) over the `--ui-tint-soft` (12%) fill. Defaults `true` (fill only). */
+    borderless?: boolean;
+    /** When set, the badge renders as an `<a href>` (clickable, `cursor-pointer`) instead of a
+     *  static `<span>`. Mirrors Button's `href`. */
+    href?: string;
+    ondismiss?: () => void;
+    children?: Snippet;
+  }
 
-    // Get text and icon adjustments from variant styles
-    const textAdjustment = $derived(getVariantStyles(variant).textAdjustment);
-    const iconAdjustment = $derived(getVariantStyles(variant).iconAdjustment);
+  let {
+    text = "",
+    variant = "default",
+    size = "md",
+    dismissible = false,
+    rounded = true,
+    borderless = true,
+    href,
+    ondismiss,
+    children,
+  }: Props = $props();
 
-    // Icon-only badges should be square (w=h)
-    const isIconOnly = $derived(icon && !text);
+  // Every variant maps to a library-wide colour token — no Tailwind
+  // palette here, no hardcoded hex. `default` uses --ui-color-secondary
+  // (the neutral) so themes control it via the shared bridge.
+  const tokenFor: Record<BadgeVariant, string> = {
+    neutral: "--ui-color-text",
+    default: "--ui-color-secondary",
+    primary: "--ui-color-primary",
+    secondary: "--ui-color-secondary",
+    success: "--ui-color-success",
+    info: "--ui-color-info",
+    warning: "--ui-color-warning",
+    danger: "--ui-color-error",
+    ghost: "--ui-color-text",
+  };
 
-    // Map sizes to explicit widths (matching heights)
-    const squareWidths = {
-        sm: "w-7", // matches h-7
-        md: "w-8", // matches h-8
-        lg: "w-9", // matches h-9
-    } as const;
+  // Sizing follows the Record<Size, string> pattern (Card, Alert,
+  // Checkbox). No explicit height — padding + line-height decide
+  // the chip's vertical footprint so it aligns to inherited text.
+  const sizeClass: Record<Size, string> = {
+    sm: "text-xs px-1.5 py-0.5",
+    md: "text-sm px-2 py-0.5",
+    lg: "text-base px-2.5 py-1",
+  };
+  const iconSizeClass: Record<Size, string> = {
+    sm: "w-3 h-3",
+    md: "w-3.5 h-3.5",
+    lg: "w-4 h-4",
+  };
 
-    const sizeClasses = $derived(
-        isIconOnly
-            ? `${componentHeights[size]} ${textSizes[size]} ${squareWidths[size]}`
-            : badgeSizeClasses[size],
-    );
+  const token = $derived(tokenFor[variant]);
+  // `ghost` is the neutral, near-transparent chip (mirrors Button's ghost): no fill, faint text-tint
+  // ring, muted text. Every other variant fills with a soft tint of its token and rings with the
+  // standard tint-border. The fill + ring are computed separately so `borderless` can collapse the
+  // ring onto the fill (keeping the 1px border — the box is unchanged — but hiding it).
+  const bgColor = $derived(
+    variant === "ghost"
+      ? "transparent"
+      : `color-mix(in srgb, var(${token}) var(--ui-tint-soft), transparent)`,
+  );
+  const standardBorder = $derived(
+    variant === "ghost"
+      ? "color-mix(in srgb, var(--ui-color-text) 20%, transparent)"
+      : `color-mix(in srgb, var(${token}) var(--ui-tint-border), transparent)`,
+  );
+  const textColor = $derived(
+    variant === "ghost"
+      ? "color-mix(in srgb, var(--ui-color-text) 65%, transparent)"
+      : `color-mix(in srgb, var(${token}) var(--ui-tint-strong), var(--ui-color-text))`,
+  );
+  const style = $derived(
+    `background-color: ${bgColor};` +
+      ` border-color: ${borderless ? bgColor : standardBorder};` +
+      ` color: ${textColor};`,
+  );
 
-    // Ghost variant uses outline (doesn't affect layout) instead of border
-    // Other variants don't need borders since they have solid backgrounds
+  function handleDismiss() {
+    ondismiss?.();
+  }
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      handleDismiss();
+    }
+  }
+
+  const hasContent = $derived(!!children || !!text);
 </script>
 
-{#if text || icon}
-    <span
-        class="inline-flex items-center justify-center gap-2 select-none {sizeClasses} {getVariantClasses(
-            variant,
-            {
-                includeBorder: true,
-                includeIcon: false,
-                includeHover: false,
-            },
-        )} {rounded ? 'rounded-full' : 'rounded'}"
-    >
-        <span class="flex items-center justify-center gap-2">
-            {#if iconPosition === "left" && icon}
-                <span class={iconAdjustment}><Icon {icon} /></span>
-            {/if}
-            {#if text}
-                <span class={textAdjustment}>{text}</span>
-            {/if}
-            {#if iconPosition === "right" && icon}
-                <span class={iconAdjustment}><Icon {icon} /></span>
-            {/if}
-        </span>
+{#if hasContent}
+  <svelte:element
+    this={href ? "a" : "span"}
+    {href}
+    class="inline-flex items-center gap-1 border no-underline select-none {href
+      ? 'cursor-pointer hover:brightness-95'
+      : 'cursor-default'} {responsiveClasses(size, sizeClass)} {rounded
+      ? 'rounded-full'
+      : 'rounded'} transition-[filter,background-color,border-color] duration-150"
+    {style}
+  >
+    <span class="truncate">
+      {#if children}{@render children()}{:else}{text}{/if}
     </span>
+
+    {#if dismissible}
+      <button
+        type="button"
+        onclick={handleDismiss}
+        onkeydown={handleKeydown}
+        aria-label="Dismiss"
+        class="inline-flex items-center justify-center rounded-full hover:[background-color:color-mix(in_srgb,currentColor_15%,transparent)] focus:outline-none transition-colors duration-150"
+      >
+        <Close class={responsiveClasses(size, iconSizeClass)} />
+      </button>
+    {/if}
+  </svelte:element>
 {/if}