components-svelte 0.1.0

package/dist/components/accordion/Accordion.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+  import slugify from "@sindresorhus/slugify";
+  import { cn } from "../../utils/cn";
+  // @ts-ignore - Svelte component default export
+  import AccordionCover from "./AccordionCover.svelte";
+  import { CONNECTING_CHARACTER } from "./accordion-url-utils";
+  import { getContext, setContext } from "svelte";
+  import type { Snippet } from "svelte";
+
+  // Svelte context key for parentIds — replaces React createContext
+  const AccordionContextKey = "accordion-context";
+
+  type AccordionProps = {
+    title: string | Snippet;
+    description?: string;
+    defaultOpen?: boolean | string;
+    icon?: string | Snippet;
+    iconType?: string;
+    children?: Snippet;
+    class?: string;
+    _disabled?: boolean;
+    trackOpen?: (event: { title: string }) => void;
+    trackClose?: (event: { title: string }) => void;
+    onMount?: () => void;
+    topOffset?: string;
+    getInitialOpenFromUrl?: (id: string, parentIds: string[]) => boolean;
+    onUrlStateChange?: (isOpen: boolean, id: string | undefined, parentIds: string[]) => void;
+    _onKeyDownCapture?: (e: KeyboardEvent) => void;
+  };
+
+  let {
+    title,
+    description,
+    defaultOpen = false,
+    icon,
+    iconType,
+    children,
+    class: className,
+    _disabled,
+    trackOpen,
+    trackClose,
+    onMount,
+    topOffset,
+    getInitialOpenFromUrl,
+    onUrlStateChange,
+    _onKeyDownCapture,
+  }: AccordionProps = $props();
+
+  // Svelte helper for title string — replaces React titleStr
+  let titleStr = $derived(typeof title === "string" ? title as string : "");
+
+  function handleChange(open: boolean) {
+    if (open) {
+      trackOpen?.({ title: titleStr });
+    } else {
+      trackClose?.({ title: titleStr });
+    }
+  }
+
+  // Svelte Icon handling — keep string | Snippet as is, AccordionCover will render string via placeholder (mirrors React Icon)
+
+  // Use Svelte context for parentIds — replaces React useContext(AccordionContext)
+  let parentContext = getContext<{ parentIds: string[] }>(AccordionContextKey);
+  let parentIds = $derived(parentContext?.parentIds ?? []);
+
+  // Svelte id generation — replaces React useId + slugify
+  let generatedId = $derived(Math.random().toString(36).slice(2, 9));
+  let id = $derived(
+    typeof title === "string"
+      ? slugify(title.split(CONNECTING_CHARACTER).join("-"), { decamelize: false })
+      : generatedId
+  );
+
+  // Svelte initial open logic — replaces React initialOpen IIFE
+  let initialOpen = $derived.by(() => {
+    if (getInitialOpenFromUrl && id) {
+      const urlResult = getInitialOpenFromUrl(id, parentIds);
+      if (urlResult === true) return true;
+    }
+    // Handle defaultOpen being string "true" as in React
+    if (defaultOpen === true || (typeof defaultOpen === "string" && defaultOpen === "true")) return true;
+    return false;
+  });
+
+  // svelte-ignore state_referenced_locally
+  let open = $state(initialOpen);
+  // svelte-ignore state_referenced_locally
+  let openRef = $state(initialOpen);
+
+  // Svelte effect for onMount and URL initial — replaces React useEffect
+  $effect(() => {
+    if (getInitialOpenFromUrl && id) {
+      const urlResult = getInitialOpenFromUrl(id, parentIds);
+      if (urlResult === true && !openRef) {
+        open = true;
+        openRef = true;
+      }
+    }
+    onMount?.();
+  });
+
+  function onClickOpen(isOpen: boolean) {
+    open = isOpen;
+    openRef = isOpen;
+
+    if (!_disabled && onUrlStateChange) {
+      onUrlStateChange(isOpen, typeof title === "string" ? id : undefined, parentIds);
+    }
+
+    handleChange(isOpen);
+  }
+
+  // Svelte context provider for children — replaces React AccordionContext.Provider
+  let childParentIds = $derived([...parentIds, ...(typeof title === "string" ? [id] : [])]);
+  setContext(AccordionContextKey, {
+    get parentIds() {
+      return childParentIds;
+    },
+  });
+
+  // Svelte details toggle handler — replaces React onToggle
+  function handleToggle(e: Event) {
+    const details = e.currentTarget as HTMLDetailsElement;
+    const newState = details.open;
+    if (newState !== openRef) {
+      onClickOpen(newState);
+    }
+  }
+</script>
+
+<details
+  class={cn("mb-3 cursor-default overflow-hidden rounded-2xl border border-stone-200/70 bg-white dark:border-white/10 dark:bg-[#0b0c0e]", className)}
+  data-component-part="accordion"
+  open={open}
+  ontoggle={handleToggle}
+  onkeydowncapture={_onKeyDownCapture}
+>
+  <AccordionCover description={description} icon={icon} iconType={iconType} id={id} open={open} title={title} topOffset={topOffset} />
+  <div
+    aria-labelledby={`${id}-label`}
+    class="prose prose-stone dark:prose-invert mx-6 mt-2 mb-4 cursor-default overflow-x-auto"
+    data-component-part="accordion-content"
+    id={`${id}-accordion-children`}
+    role="region"
+  >
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+</details>

package/dist/components/accordion/Accordion.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from "svelte";
+type AccordionProps = {
+    title: string | Snippet;
+    description?: string;
+    defaultOpen?: boolean | string;
+    icon?: string | Snippet;
+    iconType?: string;
+    children?: Snippet;
+    class?: string;
+    _disabled?: boolean;
+    trackOpen?: (event: {
+        title: string;
+    }) => void;
+    trackClose?: (event: {
+        title: string;
+    }) => void;
+    onMount?: () => void;
+    topOffset?: string;
+    getInitialOpenFromUrl?: (id: string, parentIds: string[]) => boolean;
+    onUrlStateChange?: (isOpen: boolean, id: string | undefined, parentIds: string[]) => void;
+    _onKeyDownCapture?: (e: KeyboardEvent) => void;
+};
+declare const Accordion: import("svelte").Component<AccordionProps, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/accordion/AccordionCover.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { cn } from "../../utils/cn";
+  import { ChevronRight } from "@lucide/svelte";
+  import Icon from "../icon/Icon.svelte";
+  import type { Snippet } from "svelte";
+
+  type AccordionCoverProps = {
+    id: string;
+    title: string | Snippet;
+    description?: string;
+    open: boolean;
+    icon?: string | Snippet;
+    iconType?: string;
+    topOffset?: string;
+  };
+
+  let { id, title, description, open, icon, iconType, topOffset = "-top-18" }: AccordionCoverProps = $props();
+
+  // Svelte helper to check if title is string for rendering
+  let isTitleString = $derived(typeof title === "string");
+</script>
+
+<!-- Svelte summary — replaces React summary with same Tailwind and ARIA -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<summary
+  aria-controls={`${id}-accordion-children`}
+  aria-expanded={open}
+  class="not-prose relative flex w-full cursor-pointer list-none flex-row content-center items-center space-x-2 rounded-t-xl px-5 py-4 hover:bg-stone-100 hover:dark:bg-stone-800 [&::-webkit-details-marker]:hidden"
+  data-component-part="accordion-button"
+  id={`${id}-label`}
+>
+  <div class={cn("absolute", topOffset)} id={id}></div>
+  <div class="mr-2" data-component-part="accordion-caret-right">
+    <ChevronRight
+      class={cn("size-3 text-stone-700 transition dark:text-stone-400", open && "-mt-1 rotate-90 duration-200", !open && "duration-75")}
+      size={12}
+    />
+  </div>
+  {#if icon}
+    <div
+      class="flex size-4 items-center justify-center fill-stone-800 text-stone-800 dark:fill-stone-100 dark:text-stone-100"
+      data-component-part="accordion-icon"
+    >
+      {#if typeof icon === "string"}
+        <Icon icon={icon} iconType={iconType as any} size={16} />
+      {:else}
+        {@render icon()}
+      {/if}
+    </div>
+  {/if}
+  <div
+    class="w-full text-left leading-tight"
+    data-component-part="accordion-title-container"
+  >
+    <p class="m-0 font-medium text-stone-900 dark:text-stone-200" data-component-part="accordion-title">
+      {#if isTitleString}
+        {title}
+      {:else}
+        {@render (title as Snippet)()}
+      {/if}
+    </p>
+    {#if description}
+      <p class="m-0 text-stone-900 dark:text-stone-200" data-component-part="accordion-description">
+        {description}
+      </p>
+    {/if}
+  </div>
+</summary>

package/dist/components/accordion/AccordionCover.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type AccordionCoverProps = {
+    id: string;
+    title: string | Snippet;
+    description?: string;
+    open: boolean;
+    icon?: string | Snippet;
+    iconType?: string;
+    topOffset?: string;
+};
+declare const AccordionCover: import("svelte").Component<AccordionCoverProps, {}, "">;
+type AccordionCover = ReturnType<typeof AccordionCover>;
+export default AccordionCover;

package/dist/components/accordion/AccordionGroup.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn } from "../../utils/cn";
+  import type { Snippet } from "svelte";
+
+  type AccordionGroupProps = {
+    children?: Snippet;
+    class?: string;
+  };
+
+  let { children, class: className }: AccordionGroupProps = $props();
+</script>
+
+<div
+  class={cn(
+    "prose prose-stone dark:prose-invert mt-0 mb-3 overflow-hidden rounded-xl border border-stone-200/70 dark:border-white/10 [&>details+details]:border-t [&>details+details]:border-t-stone-200/70 dark:[&>details+details]:border-t-white/10 [&>details>summary]:rounded-none [&>details]:mb-0 [&>details]:rounded-none [&>details]:border-0",
+    className
+  )}
+  data-component-part="accordion-group"
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

package/dist/components/accordion/AccordionGroup.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type AccordionGroupProps = {
+    children?: Snippet;
+    class?: string;
+};
+declare const AccordionGroup: import("svelte").Component<AccordionGroupProps, {}, "">;
+type AccordionGroup = ReturnType<typeof AccordionGroup>;
+export default AccordionGroup;

package/dist/components/accordion/accordion-url-utils.d.ts

@@ -0,0 +1,4 @@
+declare const CONNECTING_CHARACTER = ":";
+declare const getInitialOpenState: () => (id: string, parentIds: string[]) => boolean;
+declare const updateAndCopyUrl: () => (isOpen: boolean, id: string | undefined, parentIds: string[]) => void;
+export { CONNECTING_CHARACTER, getInitialOpenState, updateAndCopyUrl };

package/dist/components/accordion/accordion-url-utils.js

@@ -0,0 +1,48 @@
+import isEqual from "lodash/isEqual";
+const CONNECTING_CHARACTER = ":";
+const getInitialOpenState = () => {
+    return (id, parentIds) => {
+        const hash = typeof window !== "undefined" ? window.location.hash.substring(1) : "";
+        if (!hash) {
+            return false;
+        }
+        const hashes = hash.split(CONNECTING_CHARACTER);
+        if (hashes.length > parentIds.length) {
+            return isEqual(parentIds, hashes.slice(0, parentIds.length)) && hashes[parentIds.length] === id;
+        }
+        return false;
+    };
+};
+const updateAndCopyUrl = () => {
+    const buildHistoryUrl = (idsString) => {
+        const url = new URL(window.location.href);
+        url.hash = idsString;
+        return url.toString();
+    };
+    const updateAndCopy = (ids) => {
+        if (typeof window === "undefined" || typeof document === "undefined" || !document.hasFocus()) {
+            return;
+        }
+        const idsString = ids.join(CONNECTING_CHARACTER);
+        const newUrl = buildHistoryUrl(idsString);
+        window.history.replaceState({ ...window.history.state, as: newUrl, url: newUrl }, "", newUrl);
+    };
+    return (isOpen, id, parentIds) => {
+        if (isOpen) {
+            if (id) {
+                updateAndCopy([...parentIds, id]);
+            }
+        }
+        else if (parentIds.length > 0) {
+            updateAndCopy(parentIds);
+        }
+        else {
+            if (typeof window === "undefined" || typeof document === "undefined" || !document.hasFocus()) {
+                return;
+            }
+            const newUrl = buildHistoryUrl("");
+            window.history.replaceState({ ...window.history.state, as: newUrl, url: newUrl }, "", newUrl);
+        }
+    };
+};
+export { CONNECTING_CHARACTER, getInitialOpenState, updateAndCopyUrl };

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

@@ -0,0 +1,29 @@
+export declare const Accordion: import("svelte").Component<{
+    title: string | import("svelte").Snippet;
+    description?: string;
+    defaultOpen?: boolean | string;
+    icon?: string | import("svelte").Snippet;
+    iconType?: string;
+    children?: import("svelte").Snippet;
+    class?: string;
+    _disabled?: boolean;
+    trackOpen?: (event: {
+        title: string;
+    }) => void;
+    trackClose?: (event: {
+        title: string;
+    }) => void;
+    onMount?: () => void;
+    topOffset?: string;
+    getInitialOpenFromUrl?: (id: string, parentIds: string[]) => boolean;
+    onUrlStateChange?: (isOpen: boolean, id: string | undefined, parentIds: string[]) => void;
+    _onKeyDownCapture?: (e: KeyboardEvent) => void;
+}, {}, ""> & {
+    Group: import("svelte").Component<{
+        children?: import("svelte").Snippet;
+        class?: string;
+    }, {}, "">;
+};
+export type { default as AccordionProps } from "./Accordion.svelte";
+export type { default as AccordionGroupProps } from "./AccordionGroup.svelte";
+export { getInitialOpenState, updateAndCopyUrl } from "./accordion-url-utils";

package/dist/components/accordion/index.js

@@ -0,0 +1,6 @@
+import AccordionBase from "./Accordion.svelte";
+import AccordionGroup from "./AccordionGroup.svelte";
+export const Accordion = Object.assign(AccordionBase, {
+    Group: AccordionGroup,
+});
+export { getInitialOpenState, updateAndCopyUrl } from "./accordion-url-utils";

package/dist/components/badge/Badge.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+  import { cn } from "../../utils/cn";
+  import Icon from "../icon/Icon.svelte";
+  import type { IconLibrary, IconType } from "../../utils/icon-utils";
+  import type { Snippet } from "svelte";
+
+  const BADGE_COLORS = ["gray","blue","green","orange","yellow","red","purple","white","surface","white-destructive","surface-destructive"] as const;
+  const BADGE_SHAPES = ["rounded","pill"] as const;
+  const BADGE_SIZES = ["xs","sm","md","lg"] as const;
+  const BADGE_VARIANTS = ["solid","outline"] as const;
+
+  type BadgeSize = (typeof BADGE_SIZES)[number];
+  type BadgeShape = (typeof BADGE_SHAPES)[number];
+  type BadgeVariant = (typeof BADGE_VARIANTS)[number];
+  type BadgeColor = (typeof BADGE_COLORS)[number];
+
+  const sizeVariants: Record<BadgeSize, string> = {
+    lg: 'gap-1 py-1 pl-2.5 pr-2.5 [&_svg]:size-3.5 text-sm tracking-[-0.1px] data-[shape="rounded"]:rounded-[8px]',
+    md: 'gap-1 py-0.5 pl-2 pr-2 [&_svg]:size-3.5 text-sm tracking-[-0.1px] data-[shape="rounded"]:rounded-[8px]',
+    sm: 'gap-[3px] py-0.5 pl-1.5 pr-1.5 [&_svg]:size-3 text-xs data-[shape="rounded"]:rounded-[6px]',
+    xs: 'gap-0.5 py-0 pl-1 pr-1 [&_svg]:size-2.5 text-xs data-[shape="rounded"]:rounded-[4px]',
+  };
+
+  const colorVariants: Record<BadgeColor, string> = {
+    gray: "[--color-bg:#F5F5F5] dark:[--color-bg:#262727] [--color-text:#78787A] dark:[--color-text:#D7D7D7] [--color-bg-disabled:#F5F5F5] dark:[--color-bg-disabled:#262727] [--color-text-disabled:#E9E9EA] dark:[--color-text-disabled:#3C3C3D]",
+    blue: "[--color-bg:#E3EAFD] dark:[--color-bg:#07296A] [--color-text:#133A9A] dark:[--color-text:#7196F4] [--color-bg-disabled:#F0F4FE] dark:[--color-bg-disabled:#03153A] [--color-text-disabled:rgba(51,104,240,0.50)] dark:[--color-text-disabled:rgba(51,104,240,0.30)]",
+    green: "[--color-bg:#D1FAE4] dark:[--color-bg:#0F4C2C] [--color-text:#166E3F] dark:[--color-text:#6AE1A1] [--color-bg-disabled:#EDFDF4] dark:[--color-bg-disabled:#072213] [--color-text-disabled:rgba(38,189,108,0.50)] dark:[--color-text-disabled:rgba(38,189,108,0.30)]",
+    yellow: "[--color-bg:#FEF9C3] dark:[--color-bg:#713F12] [--color-text:#A16207] dark:[--color-text:#FDE047] [--color-bg-disabled:#FEFCE8] dark:[--color-bg-disabled:#422006] [--color-text-disabled:#FEF08A] dark:[--color-text-disabled:#854D0E]",
+    orange: "[--color-bg:#FDEAD8] dark:[--color-bg:#613105] [--color-text:#AE590A] dark:[--color-text:#F8B577] [--color-bg-disabled:#FEF4EC] dark:[--color-bg-disabled:#301903] [--color-text-disabled:rgba(244,142,47,0.50)] dark:[--color-text-disabled:rgba(244,142,47,0.30)]",
+    red: "[--color-bg:#FCE5E4] dark:[--color-bg:#64120D] [--color-text:#9A1C13] dark:[--color-text:#F08B85] [--color-bg-disabled:#FDF2F1] dark:[--color-bg-disabled:#360A07] [--color-text-disabled:rgba(230,72,61,0.50)] dark:[--color-text-disabled:rgba(230,72,61,0.30)]",
+    purple: "[--color-bg:#ECDFFB] dark:[--color-bg:#3A0F71] [--color-text:#5314A3] dark:[--color-text:#B78AF0] [--color-bg-disabled:#ECDFFB] dark:[--color-bg-disabled:#3A0F71] [--color-text-disabled:rgba(135,61,230,0.50)] dark:[--color-text-disabled:rgba(135,61,230,0.30)]",
+    white: "[--color-bg:rgba(255,255,255,0.95)] dark:[--color-bg:rgba(255,255,255,0.95)] [--color-text:rgba(11,12,14,0.60)] dark:[--color-text:rgba(11,12,14,0.60)] [--color-bg-disabled:rgba(255,255,255,0.08)] dark:[--color-bg-disabled:rgba(255,255,255,0.24)] [--color-text-disabled:#E9E9EA] dark:[--color-text-disabled:#3C3C3D]",
+    surface: "[--color-bg:rgba(255,255,255,0.95)] dark:[--color-bg:#262727] [--color-text:#78787A] dark:[--color-text:#D7D7D7] [--color-bg-disabled:rgba(255,255,255,0.95)] dark:[--color-bg-disabled:#262727] [--color-text-disabled:#E9E9EA] dark:[--color-text-disabled:#3C3C3D]",
+    "white-destructive": "[--color-bg:rgba(255,255,255,0.95)] dark:[--color-bg:rgba(255,255,255,0.95)] [--color-text:#E6483D] dark:[--color-text:#E6483D] [--color-bg-disabled:rgba(255,255,255,0.08)] dark:[--color-bg-disabled:rgba(255,255,255,0.24)] [--color-text-disabled:rgba(230,72,61,0.30)] dark:[--color-text-disabled:rgba(230,72,61,0.40)]",
+    "surface-destructive": "[--color-bg:rgba(255,255,255,0.95)] dark:[--color-bg:#262727] [--color-text:#E6483D] dark:[--color-text:#E6483D] [--color-bg-disabled:rgba(255,255,255,0.95)] dark:[--color-bg-disabled:#262727] [--color-text-disabled:rgba(230,72,61,0.30)] dark:[--color-text-disabled:rgba(230,72,61,0.40)]",
+  };
+
+  type BadgeProps = {
+    children?: Snippet;
+    color?: BadgeColor;
+    shape?: BadgeShape;
+    size?: BadgeSize;
+    variant?: BadgeVariant;
+    disabled?: boolean;
+    class?: string;
+    leadIcon?: string | Snippet;
+    tailIcon?: string | Snippet;
+    iconType?: IconType;
+    iconLibrary?: IconLibrary;
+    onClick?: () => void;
+    href?: string;
+    /** @deprecated Use leadIcon or tailIcon instead — Svelte: kept for 1:1 */
+    icon?: string | Snippet;
+    /** @deprecated Use variant="outline" instead */
+    stroke?: boolean;
+  };
+
+  let {
+    children,
+    color = "gray",
+    shape = "rounded",
+    variant: variantProp,
+    stroke,
+    disabled = false,
+    size = "md",
+    leadIcon,
+    tailIcon: tailIconProp,
+    icon,
+    iconType,
+    iconLibrary = "fontawesome",
+    onClick,
+    href,
+    class: className,
+  }: BadgeProps = $props();
+
+  let variant = $derived(variantProp ?? (stroke ? "outline" : "solid"));
+  let tailIcon = $derived(tailIconProp ?? icon);
+
+  let isInteractive = $derived(!!(onClick || href));
+  let Component = $derived(href && !disabled ? "a" : onClick && !disabled ? "button" : "span");
+
+  let commonClass = $derived(
+    cn(
+      "relative inline-flex w-fit items-center font-medium data-disabled:cursor-not-allowed",
+      "data-[shape='pill']:rounded-full",
+      "data-[variant='outline']:outline-1 data-[variant='outline']:outline-[rgba(11,12,14,0.08)] data-[variant='outline']:outline-solid data-[variant='outline']:-outline-offset-1 dark:data-[variant='outline']:outline-[rgba(255,255,255,0.14)]",
+      "bg-[var(--color-bg)] text-[var(--color-text)] data-disabled:bg-[var(--color-bg-disabled)] data-disabled:text-[var(--color-text-disabled)]",
+      '[&_[data-component-part$="-icon"][data-icon-type="string"]_svg]:bg-[var(--color-text)] data-disabled:[&_[data-component-part$="-icon"][data-icon-type="string"]_svg]:bg-[var(--color-text-disabled)]',
+      '[&_[data-component-part$="-icon"][data-icon-type="inline"]_svg]:fill-current',
+      sizeVariants[size],
+      colorVariants[color],
+      isInteractive && !disabled && "cursor-pointer transition-opacity hover:opacity-80",
+      Component === "button" && "border-0",
+      className
+    )
+  );
+</script>
+
+{#snippet renderIcon(iconNode: string | Snippet | undefined, position: "lead" | "tail")}
+  {#if iconNode}
+    {@const isStringIcon = typeof iconNode === "string"}
+    <span data-component-part={`${position}-icon`} data-icon-type={isStringIcon ? "string" : "inline"}>
+      {#if isStringIcon}
+        <Icon class="shrink-0" icon={iconNode as string} iconLibrary={iconLibrary} iconType={iconType} overrideColor overrideSize />
+      {:else}
+        {@render (iconNode as Snippet)()}
+      {/if}
+    </span>
+  {/if}
+{/snippet}
+
+{#if Component === "a"}
+  <a
+    data-shape={shape}
+    data-variant={variant}
+    data-disabled={disabled || undefined}
+    class={commonClass}
+    data-debug={commonClass}
+    href={href}
+    onclick={onClick}
+  >
+    {@render renderIcon(leadIcon, "lead")}
+    {#if children}{@render children()}{/if}
+    {@render renderIcon(tailIcon, "tail")}
+  </a>
+{:else if Component === "button"}
+  <button
+    data-shape={shape}
+    data-variant={variant}
+    data-disabled={disabled || undefined}
+    class={commonClass}
+    data-debug={commonClass}
+    onclick={onClick}
+    type="button"
+  >
+    {@render renderIcon(leadIcon, "lead")}
+    {#if children}{@render children()}{/if}
+    {@render renderIcon(tailIcon, "tail")}
+  </button>
+{:else}
+  <span
+    data-shape={shape}
+    data-variant={variant}
+    data-disabled={disabled || undefined}
+    class={commonClass}
+    data-debug={commonClass}
+  >
+    {@render renderIcon(leadIcon, "lead")}
+    {#if children}{@render children()}{/if}
+    {@render renderIcon(tailIcon, "tail")}
+  </span>
+{/if}

package/dist/components/badge/Badge.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { IconLibrary, IconType } from "../../utils/icon-utils";
+import type { Snippet } from "svelte";
+declare const Badge: import("svelte").Component<{
+    children?: Snippet;
+    color?: "gray" | "blue" | "green" | "orange" | "yellow" | "red" | "purple" | "white" | "surface" | "white-destructive" | "surface-destructive";
+    shape?: "rounded" | "pill";
+    size?: "xs" | "sm" | "md" | "lg";
+    variant?: "outline" | "solid";
+    disabled?: boolean;
+    class?: string;
+    leadIcon?: string | Snippet;
+    tailIcon?: string | Snippet;
+    iconType?: IconType;
+    iconLibrary?: IconLibrary;
+    onClick?: () => void;
+    href?: string;
+    /** @deprecated Use leadIcon or tailIcon instead — Svelte: kept for 1:1 */
+    icon?: string | Snippet;
+    /** @deprecated Use variant="outline" instead */
+    stroke?: boolean;
+}, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

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

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

package/dist/components/badge/index.js

@@ -0,0 +1,2 @@
+// @ts-ignore - Svelte component default export
+export { default as Badge } from "./Badge.svelte";