@spaethtech/svelte-ui 0.12.0 → 0.13.0

package/.claude/skills/svelte-ui/SKILL.md

@@ -167,14 +167,18 @@ examples):
   `parse`/`format` for per-country)
 - **Date / time:** `DatePicker` `Calendar` `TimePicker` `TimeSpinner` `TimeRangeInput` `DateTimeInput`
 - **Data:** `DataTable` `Query` — driven by the headless layer at **`@spaethtech/svelte-ui/data`**
-  (query-language parser/AST, `createGrid`, `DataGrid<T>`, `DataSet`).
+  (query-language parser/AST, `createGrid`, `DataGrid<T>`, `DataSet`). · **`Pagination`** (standalone
+  pager: numbered buttons + ellipsis, prev/next/first/last, `bind:page`/`bind:perPage`, `total`,
+  `perPageOptions`, `showTotal`; built from `Button`+`Select` — the reusable DataTable footer pager).
 - **Overlays:** `Dialog` (pure modal shell — BYO content; `width`/`height` take any CSS value;
   `onShow(ctx)`/`onHide(ctx)` control focus — set `ctx.autoFocus` to a selector/element/`false`,
   `ctx.restoreFocus` likewise) · `ConfirmDialog` (title + message + Confirm/Cancel, built on Dialog)
   · **`Drawer`** (edge-anchored sliding panel / "sheet"; `side` left/right/top/bottom, `size` CSS
   length, `bind:open`, `dismissible`/`backdrop`; same modal mechanics as Dialog — a pure shell, put a
   Card inside) · `Popup` `Menu` · `tooltip` (a Svelte `use:` action) · `anchored` (positioning engine)
-- **Navigation:** `TabStrip` (tabs; `size`/`variant`, `gap`/`pad` bordered spacer cells, `height` for a
+- **Navigation:** **`Breadcrumbs`** (trail of `BreadcrumbItem` {`label`,`href`,`onclick`,`icon`}; last =
+  current page; `maxItems` collapses the middle to a `⋯` Menu; `separator` slot) · `TabStrip` (tabs;
+  `size`/`variant`, `gap`/`pad` bordered spacer cells, `height` for a
   fixed-height bar with bottom-aligned tabs, `activeSurface` to flow the active tab into the content
   below) · **`SideBarMenu`** (data-driven vertical nav: `items`/`bottomItems` of `SideBarMenuItem`
   {`icon`,`label`,`link`,`badge`,`children`,`onclick`,`popout`,`reload`,`trailing` snippet,`activeMatch`};
@@ -189,11 +193,16 @@ examples):
   · **`Skeleton`** (neutral loading placeholder; `shape` text/rect/circle, `lines`, `width`/`height`,
   `animate` shimmer. No `variant` — it's absent-content, not a themed surface. Compose to sketch a card.)
 - **Layout:** `Card` `CardHeader` `CardBody` `CardFooter` · **`Grid`** (auto-placed equal-cell grid;
-  `columns` + `gap`)
+  `columns` + `gap`) · **`Divider`** (thin `role="separator"` rule; `orientation` h/v, optional inline
+  `label`+`labelAlign`; `--ui-border-color`)
 - **Disclosure:** **`Disclosure`** (one expand/collapse section; `title`/`header`, `bind:open`, panel
   stays mounted so state is preserved) · **`Accordion`** (coordinated group — `multiple` single/multi,
   `bind:value`; children are `<Disclosure value="…">`, no per-item `bind:open`)
-- **Display / theme:** `NotesEditor` · `ThemeSelector` (Auto/Light/Dark Select) · `ThemeToggle`
+- **Display / theme:** **`Chip`** (interactive pill — `selected` toggle fill, `removable` ×/`onremove`,
+  `onclick`/`href`, `icon`; the interactive counterpart to display-only `Badge`) · **`Avatar`** (image →
+  `name` initials → `icon` → glyph fallback; `size`, `variant` fill, `shape`, `status` dot) +
+  **`AvatarGroup`** (overlapped stack; `items`+`max` → `+N`) ·
+  `NotesEditor` · `ThemeSelector` (Auto/Light/Dark Select) · `ThemeToggle`
   (compact ☀/☾ icon button, same persisted state)
 - **Types / utils:** `Variant` `Size` `TabDefinition` `MenuItem` `ButtonGroupItem` `ButtonGroupSelect`
   (types), `responsiveClasses` / `resolveScalar`, `BREAKPOINT_PX`.

package/dist/components/Avatar/Avatar.svelte

@@ -0,0 +1,118 @@
+<!--
+/**
+ * Avatar — a person/entity likeness: image, else initials (from `name`), else icon, else a default
+ * person glyph. Shared `size` axis; the fallback fill uses the `variant` semantic tokens. Optional
+ * status dot. See Avatar.spec.md.
+ */
+-->
+<script lang="ts" module>
+  export type AvatarShape = "circle" | "square";
+  export type AvatarStatus = "online" | "offline" | "busy" | "away";
+</script>
+
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { Variant } from "../../types/variants.js";
+  import { variantToken } from "../../types/variants.js";
+  import type { Size } from "../../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../../types/responsive.js";
+  import IconAccount from "~icons/mdi/account";
+
+  let {
+    src,
+    name,
+    alt,
+    icon,
+    size = "md",
+    variant = "secondary",
+    shape = "circle",
+    status,
+    class: cls = "",
+  }: {
+    src?: string;
+    name?: string;
+    alt?: string;
+    icon?: Snippet;
+    size?: Responsive<Size>;
+    variant?: Variant;
+    shape?: AvatarShape;
+    status?: AvatarStatus;
+    class?: string;
+  } = $props();
+
+  let imgFailed = $state(false);
+  // Reset the failed flag whenever the source changes.
+  $effect(() => {
+    void src;
+    imgFailed = false;
+  });
+
+  const initials = $derived(
+    (name ?? "")
+      .trim()
+      .split(/\s+/)
+      .filter(Boolean)
+      .slice(0, 2)
+      .map((w) => w[0]!.toUpperCase())
+      .join(""),
+  );
+  const showImg = $derived(!!src && !imgFailed);
+  const token = $derived(variantToken[variant]);
+
+  const boxMap: Record<Size, string> = {
+    sm: "w-8 h-8 text-xs",
+    md: "w-10 h-10 text-sm",
+    lg: "w-12 h-12 text-base",
+  };
+  const iconBox: Record<Size, string> = {
+    sm: "[&_svg]:w-4 [&_svg]:h-4",
+    md: "[&_svg]:w-5 [&_svg]:h-5",
+    lg: "[&_svg]:w-6 [&_svg]:h-6",
+  };
+  const statusColor: Record<AvatarStatus, string> = {
+    online: "--ui-color-success",
+    busy: "--ui-color-error",
+    away: "--ui-color-warning",
+    offline: "--ui-color-secondary",
+  };
+  const statusSize: Record<Size, string> = { sm: "w-2 h-2", md: "w-2.5 h-2.5", lg: "w-3 h-3" };
+
+  const shapeClass = $derived(shape === "circle" ? "rounded-full" : "rounded-[var(--ui-border-radius)]");
+</script>
+
+<span class="relative inline-flex shrink-0 {cls}">
+  <span
+    class="ui-avatar inline-flex items-center justify-center overflow-hidden font-medium select-none {shapeClass} {responsiveClasses(
+      size,
+      boxMap,
+    )} {responsiveClasses(size, iconBox)}"
+    style={showImg
+      ? ""
+      : `background-color: color-mix(in srgb, var(${token}) 20%, transparent); color: color-mix(in srgb, var(${token}) var(--ui-tint-strong), var(--ui-color-text));`}
+  >
+    {#if showImg}
+      <img
+        {src}
+        alt={alt ?? name ?? ""}
+        class="w-full h-full object-cover"
+        onerror={() => (imgFailed = true)}
+      />
+    {:else if initials}
+      {initials}
+    {:else if icon}
+      {@render icon()}
+    {:else}
+      <IconAccount />
+    {/if}
+  </span>
+  {#if status}
+    <span
+      title={status}
+      class="absolute bottom-0 right-0 rounded-full border-2 [border-color:var(--ui-color-background)] {responsiveClasses(
+        size,
+        statusSize,
+      )}"
+      style="background-color: var({statusColor[status]});"
+    ></span>
+  {/if}
+</span>

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

@@ -0,0 +1,20 @@
+export type AvatarShape = "circle" | "square";
+export type AvatarStatus = "online" | "offline" | "busy" | "away";
+import type { Snippet } from "svelte";
+import type { Variant } from "../../types/variants.js";
+import type { Size } from "../../types/sizes.js";
+import { type Responsive } from "../../types/responsive.js";
+type $$ComponentProps = {
+    src?: string;
+    name?: string;
+    alt?: string;
+    icon?: Snippet;
+    size?: Responsive<Size>;
+    variant?: Variant;
+    shape?: AvatarShape;
+    status?: AvatarStatus;
+    class?: string;
+};
+declare const Avatar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/Avatar/AvatarGroup.svelte

@@ -0,0 +1,83 @@
+<!--
+/**
+ * AvatarGroup — stacks Avatars with an overlap + a background-coloured ring around each. Data-driven
+ * via `items` (with an optional `+N` overflow chip when `max` is set), or hand-authored via children
+ * (overlapped, no overflow chip). See Avatar.spec.md.
+ */
+-->
+<script lang="ts" module>
+  import type { Variant } from "../../types/variants.js";
+  import type { Snippet } from "svelte";
+  import type { AvatarShape } from "./Avatar.svelte";
+
+  export type AvatarItem = {
+    src?: string;
+    name?: string;
+    alt?: string;
+    variant?: Variant;
+    icon?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import Avatar from "./Avatar.svelte";
+  import { variantToken } from "../../types/variants.js";
+  import type { Size } from "../../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../../types/responsive.js";
+
+  let {
+    items,
+    max,
+    size = "md",
+    shape = "circle",
+    variant = "secondary",
+    class: cls = "",
+    children,
+  }: {
+    items?: AvatarItem[];
+    max?: number;
+    size?: Responsive<Size>;
+    shape?: AvatarShape;
+    variant?: Variant;
+    class?: string;
+    children?: Snippet;
+  } = $props();
+
+  const shown = $derived(
+    items ? (max != null && items.length > max ? items.slice(0, max) : items) : [],
+  );
+  const overflow = $derived(items && max != null && items.length > max ? items.length - max : 0);
+
+  const boxMap: Record<Size, string> = {
+    sm: "w-8 h-8 text-xs",
+    md: "w-10 h-10 text-sm",
+    lg: "w-12 h-12 text-base",
+  };
+  const shapeClass = $derived(shape === "circle" ? "rounded-full" : "rounded-[var(--ui-border-radius)]");
+  const token = $derived(variantToken[variant]);
+</script>
+
+<!-- Overlap + a background-coloured ring around each avatar's shape (`.ui-avatar`) so stacked
+     avatars stay visually separated. -->
+<div
+  class="flex items-center [&_.ui-avatar]:border-2 [&_.ui-avatar]:[border-color:var(--ui-color-background)] [&>*:not(:first-child)]:-ml-2 {cls}"
+>
+  {#if items}
+    {#each shown as it, i (i)}
+      <Avatar {...it} {size} {shape} variant={it.variant ?? variant} />
+    {/each}
+    {#if overflow > 0}
+      <span
+        class="ui-avatar relative inline-flex shrink-0 items-center justify-center overflow-hidden font-medium select-none {shapeClass} {responsiveClasses(
+          size,
+          boxMap,
+        )}"
+        style="background-color: color-mix(in srgb, var({token}) 20%, transparent); color: color-mix(in srgb, var({token}) var(--ui-tint-strong), var(--ui-color-text));"
+      >
+        +{overflow}
+      </span>
+    {/if}
+  {:else}
+    {@render children?.()}
+  {/if}
+</div>

package/dist/components/Avatar/AvatarGroup.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Variant } from "../../types/variants.js";
+import type { Snippet } from "svelte";
+import type { AvatarShape } from "./Avatar.svelte";
+export type AvatarItem = {
+    src?: string;
+    name?: string;
+    alt?: string;
+    variant?: Variant;
+    icon?: Snippet;
+};
+import type { Size } from "../../types/sizes.js";
+import { type Responsive } from "../../types/responsive.js";
+type $$ComponentProps = {
+    items?: AvatarItem[];
+    max?: number;
+    size?: Responsive<Size>;
+    shape?: AvatarShape;
+    variant?: Variant;
+    class?: string;
+    children?: Snippet;
+};
+declare const AvatarGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type AvatarGroup = ReturnType<typeof AvatarGroup>;
+export default AvatarGroup;

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Avatar } from "./Avatar.svelte";
+export type { AvatarShape, AvatarStatus } from "./Avatar.svelte";
+export { default as AvatarGroup } from "./AvatarGroup.svelte";
+export type { AvatarItem } from "./AvatarGroup.svelte";

package/dist/components/Avatar/index.js

@@ -0,0 +1,2 @@
+export { default as Avatar } from "./Avatar.svelte";
+export { default as AvatarGroup } from "./AvatarGroup.svelte";

package/dist/components/Breadcrumbs/Breadcrumbs.svelte

@@ -0,0 +1,131 @@
+<!--
+/**
+ * Breadcrumbs — a navigation trail (root → current). Link crumbs are `Button variant="ghost"`; the
+ * current (last) crumb is non-interactive text with aria-current. A long trail collapses its middle
+ * into an ellipsis that opens a `Menu` of the hidden crumbs. Composes library components only.
+ * See Breadcrumbs.spec.md.
+ */
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  export type BreadcrumbItem = {
+    label: string;
+    href?: string;
+    onclick?: () => void;
+    icon?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import Button from "../Button.svelte";
+  import Menu from "../Menu.svelte";
+  import type { MenuItem } from "../../data/table/types.js";
+  import type { Size } from "../../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../../types/responsive.js";
+  import IconChevronRight from "~icons/mdi/chevron-right";
+  import IconDots from "~icons/mdi/dots-horizontal";
+
+  let {
+    items,
+    separator,
+    maxItems,
+    size = "md",
+    class: cls = "",
+  }: {
+    items: BreadcrumbItem[];
+    separator?: Snippet | string;
+    maxItems?: number;
+    size?: Responsive<Size>;
+    class?: string;
+  } = $props();
+
+  type Node =
+    | { kind: "crumb"; item: BreadcrumbItem; last: boolean }
+    | { kind: "ellipsis"; hidden: BreadcrumbItem[] };
+
+  const nodes = $derived.by<Node[]>(() => {
+    const n = items.length;
+    const lastItem = items[n - 1];
+    const crumb = (item: BreadcrumbItem): Node => ({ kind: "crumb", item, last: item === lastItem });
+    if (!maxItems || n <= maxItems || maxItems < 3) return items.map(crumb);
+    const tailCount = Math.max(1, maxItems - 2);
+    return [
+      crumb(items[0]),
+      { kind: "ellipsis", hidden: items.slice(1, n - tailCount) },
+      ...items.slice(n - tailCount).map(crumb),
+    ];
+  });
+
+  const textSize: Record<Size, string> = { sm: "text-xs", md: "text-sm", lg: "text-base" };
+  const sepSize: 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",
+  };
+
+  // Ellipsis → Menu of the hidden crumbs.
+  let menuOpen = $state(false);
+  let menuAnchor = $state<HTMLButtonElement | HTMLAnchorElement | undefined>();
+  function hiddenMenu(hidden: BreadcrumbItem[]): MenuItem[] {
+    return hidden.map((h) => ({ label: h.label, href: h.href, onclick: h.onclick }));
+  }
+</script>
+
+<nav aria-label="Breadcrumb" class={cls}>
+  <ol
+    class="flex flex-wrap items-center gap-1 [color:color-mix(in_srgb,var(--ui-color-text)_60%,transparent)]"
+  >
+    {#each nodes as node, i (i)}
+      {#if i > 0}
+        <li aria-hidden="true" class="inline-flex items-center {responsiveClasses(size, sepSize)}">
+          {#if typeof separator === "string"}
+            <span>{separator}</span>
+          {:else if separator}
+            {@render separator()}
+          {:else}
+            <IconChevronRight />
+          {/if}
+        </li>
+      {/if}
+
+      <li class="inline-flex items-center">
+        {#if node.kind === "ellipsis"}
+          <Button
+            title="Show more"
+            variant="ghost"
+            {size}
+            aria-haspopup="menu"
+            aria-expanded={menuOpen}
+            bind:element={menuAnchor}
+            onclick={() => (menuOpen = !menuOpen)}
+          >
+            {#snippet icon()}<IconDots />{/snippet}
+          </Button>
+          <Menu anchor={menuAnchor} bind:open={menuOpen} items={hiddenMenu(node.hidden)} {size} />
+        {:else if node.last}
+          <span
+            aria-current="page"
+            class="inline-flex items-center gap-1 px-1 font-medium [color:var(--ui-color-text)] {responsiveClasses(
+              size,
+              textSize,
+            )}"
+          >
+            {#if node.item.icon}<span class="inline-flex {responsiveClasses(size, sepSize)}"
+                >{@render node.item.icon()}</span
+              >{/if}
+            <span class="truncate">{node.item.label}</span>
+          </span>
+        {:else}
+          <Button
+            text={node.item.label}
+            href={node.item.href}
+            variant="ghost"
+            {size}
+            icon={node.item.icon}
+            onclick={node.item.onclick}
+          />
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</nav>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from "svelte";
+export type BreadcrumbItem = {
+    label: string;
+    href?: string;
+    onclick?: () => void;
+    icon?: Snippet;
+};
+import type { Size } from "../../types/sizes.js";
+import { type Responsive } from "../../types/responsive.js";
+type $$ComponentProps = {
+    items: BreadcrumbItem[];
+    separator?: Snippet | string;
+    maxItems?: number;
+    size?: Responsive<Size>;
+    class?: string;
+};
+declare const Breadcrumbs: import("svelte").Component<$$ComponentProps, {}, "">;
+type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
+export default Breadcrumbs;

package/dist/components/Breadcrumbs/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Breadcrumbs } from "./Breadcrumbs.svelte";
+export type { BreadcrumbItem } from "./Breadcrumbs.svelte";

package/dist/components/Breadcrumbs/index.js

@@ -0,0 +1 @@
+export { default as Breadcrumbs } from "./Breadcrumbs.svelte";

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

@@ -37,6 +37,6 @@ type $$ComponentProps = {
     class?: string;
     children?: Snippet;
 };
-declare const ButtonGroup: import("svelte").Component<$$ComponentProps, {}, "value" | "values">;
+declare const ButtonGroup: import("svelte").Component<$$ComponentProps, {}, "values" | "value">;
 type ButtonGroup = ReturnType<typeof ButtonGroup>;
 export default ButtonGroup;

package/dist/components/Chip/Chip.svelte

@@ -0,0 +1,139 @@
+<!--
+/**
+ * Chip — an interactive pill: a filter/choice token, a removable tag, or a clickable label. The
+ * interactive counterpart to `Badge` (display-only). Shared `variant`/`size` axes, `--ui-*` tokens.
+ *
+ * The root is a `<span>` (or `<a href>`) with `role="button"` when clickable — NOT a `<button>` — so a
+ * removable chip's × can be a real nested `<button>` without invalid button-in-button nesting.
+ * See Chip.spec.md.
+ */
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import IconClose from "~icons/mdi/close";
+  import type { Variant } from "../../types/variants.js";
+  import { variantToken } from "../../types/variants.js";
+  import type { Size } from "../../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../../types/responsive.js";
+
+  let {
+    text,
+    icon,
+    variant = "secondary",
+    size = "md",
+    selected = false,
+    removable = false,
+    onremove,
+    onclick,
+    disabled = false,
+    href,
+    rounded = true,
+    class: cls = "",
+    children,
+  }: {
+    text?: string;
+    icon?: Snippet;
+    variant?: Variant;
+    size?: Responsive<Size>;
+    selected?: boolean;
+    removable?: boolean;
+    onremove?: () => void;
+    onclick?: (e: MouseEvent | KeyboardEvent) => void;
+    disabled?: boolean;
+    href?: string;
+    rounded?: boolean;
+    class?: string;
+    children?: Snippet;
+  } = $props();
+
+  const interactive = $derived(!!onclick || !!href);
+  const isButton = $derived(!!onclick && !href); // role=button (href navigates instead)
+
+  const token = $derived(variantToken[variant]);
+
+  const sizeClass: Record<Size, string> = {
+    sm: "h-6 text-xs px-2.5 gap-1",
+    md: "h-8 text-sm px-3 gap-1.5",
+    lg: "h-10 text-base px-4 gap-2",
+  };
+  const iconClass: 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",
+  };
+
+  // Selected = filled with the variant (white text); unselected = soft tint + tint border (same token
+  // vocabulary as Badge). `ghost` is the neutral, near-transparent chip.
+  const chipStyle = $derived(
+    variant === "ghost"
+      ? selected
+        ? "background-color: color-mix(in srgb, var(--ui-color-text) 12%, transparent); border-color: transparent; color: var(--ui-color-text);"
+        : "background-color: transparent; border-color: color-mix(in srgb, var(--ui-color-text) 20%, transparent); color: color-mix(in srgb, var(--ui-color-text) 70%, transparent);"
+      : selected
+        ? `background-color: var(${token}); border-color: var(${token}); color: white;`
+        : `background-color: color-mix(in srgb, var(${token}) var(--ui-tint-soft), transparent); border-color: color-mix(in srgb, var(${token}) var(--ui-tint-border), transparent); color: color-mix(in srgb, var(${token}) var(--ui-tint-strong), var(--ui-color-text));`,
+  );
+
+  const chipClass = $derived(
+    [
+      "inline-flex items-center border select-none no-underline align-middle",
+      responsiveClasses(size, sizeClass),
+      responsiveClasses(size, iconClass),
+      rounded ? "rounded-full" : "rounded-[var(--ui-border-radius)]",
+      interactive
+        ? "cursor-pointer hover:brightness-95 active:brightness-90 transition-[filter,background-color,border-color]"
+        : "transition-colors",
+      isButton
+        ? "focus-visible:[outline:2px_solid_color-mix(in_srgb,var(--ui-color-text)_70%,transparent)] focus-visible:[outline-offset:1px]"
+        : "",
+      disabled ? "opacity-50 pointer-events-none" : "",
+      cls,
+    ]
+      .filter(Boolean)
+      .join(" "),
+  );
+
+  function onKeydown(e: KeyboardEvent) {
+    if (disabled) return;
+    if (isButton && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      onclick?.(e);
+    } else if (removable && (e.key === "Backspace" || e.key === "Delete")) {
+      e.preventDefault();
+      onremove?.();
+    }
+  }
+</script>
+
+<svelte:element
+  this={href ? "a" : "span"}
+  {href}
+  role={isButton ? "button" : undefined}
+  tabindex={isButton ? (disabled ? -1 : 0) : undefined}
+  aria-pressed={isButton ? selected : undefined}
+  aria-disabled={disabled || undefined}
+  class={chipClass}
+  style={chipStyle}
+  onclick={interactive && !disabled ? onclick : undefined}
+  onkeydown={isButton || removable ? onKeydown : undefined}
+>
+  {#if icon}
+    <span class="inline-flex shrink-0" aria-hidden="true">{@render icon()}</span>
+  {/if}
+  {#if children}{@render children()}{:else if text}<span class="truncate">{text}</span>{/if}
+  {#if removable}
+    <button
+      type="button"
+      aria-label={text ? `Remove ${text}` : "Remove"}
+      tabindex={disabled ? -1 : 0}
+      {disabled}
+      onclick={(e) => {
+        e.stopPropagation();
+        if (!disabled) onremove?.();
+      }}
+      class="-mr-1 ml-0.5 inline-flex shrink-0 items-center justify-center rounded-full hover:[background-color:color-mix(in_srgb,currentColor_20%,transparent)] focus:outline-none transition-colors"
+    >
+      <IconClose />
+    </button>
+  {/if}
+</svelte:element>

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

@@ -0,0 +1,22 @@
+import type { Snippet } from "svelte";
+import type { Variant } from "../../types/variants.js";
+import type { Size } from "../../types/sizes.js";
+import { type Responsive } from "../../types/responsive.js";
+type $$ComponentProps = {
+    text?: string;
+    icon?: Snippet;
+    variant?: Variant;
+    size?: Responsive<Size>;
+    selected?: boolean;
+    removable?: boolean;
+    onremove?: () => void;
+    onclick?: (e: MouseEvent | KeyboardEvent) => void;
+    disabled?: boolean;
+    href?: string;
+    rounded?: boolean;
+    class?: string;
+    children?: Snippet;
+};
+declare const Chip: import("svelte").Component<$$ComponentProps, {}, "">;
+type Chip = ReturnType<typeof Chip>;
+export default Chip;

package/dist/components/Chip/index.d.ts

@@ -0,0 +1 @@
+export { default as Chip } from "./Chip.svelte";

package/dist/components/Chip/index.js

@@ -0,0 +1 @@
+export { default as Chip } from "./Chip.svelte";