tera-system-ui 0.1.63 → 0.1.66

package/dist/COMPONENT_API.md

@@ -0,0 +1,2 @@
+Read file in /llms/index.md for installation instructions, setup, and basic usage of the Tera System UI component
+library. Each component has its own guide linked in the Component Guides section.

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

@@ -1,3 +1,7 @@
+/**
+ * @component Accordion - Collapsible content panels with single or multi-open support.
+ * Built on BitsUI Accordion primitive with full keyboard navigation.
+ */
 import { type VariantProps } from "tailwind-variants";
 import type { Snippet } from "svelte";
 import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
@@ -5,15 +9,30 @@ export declare const styles: import("tailwind-variants").TVReturnType<{}, undefi
 type AccordionVariants = VariantProps<typeof styles>;
 export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'>, AccordionVariants {
     children?: Snippet;
+    /** Additional CSS classes for the root element. */
     class?: string;
+    /** Whether only one item can be open at a time ('single') or many ('multiple'). */
     type: 'multiple' | 'single';
+    /** The currently open item value(s). Bindable. */
     value: string | string[];
+    /** Called when the open item(s) change. */
     onchange?: (value: string | string[]) => void;
+    /** Use controlled mode — manage value externally and pass it back via onchange. */
     controlledValue?: boolean;
+    /** Whether the entire accordion is disabled. */
+    disabled?: boolean;
+    /** Whether keyboard navigation wraps around at the first/last item. */
+    loop?: boolean;
+    /** Layout orientation — affects arrow-key navigation direction. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Bindable reference to the root element. */
     ref?: HTMLDivElement | null;
 }
 export interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Unique identifier for this item — matched against the root `value`. */
     value: string;
+    /** Prevents the user from interacting with this specific item. */
+    disabled?: boolean;
     ref?: HTMLDivElement | null;
     children?: Snippet;
 }
@@ -23,6 +42,11 @@ export interface AccordionTriggerProps extends HTMLButtonAttributes {
 }
 export interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {
     children?: Snippet;
+    /**
+     * Keep the content mounted in the DOM even when the item is collapsed.
+     * Useful for Svelte transitions or preserving internal component state.
+     */
+    forceMount?: boolean;
     ref?: HTMLDivElement | null;
 }
 export {};

package/dist/components/accordion/Accordion.js

@@ -1,3 +1,7 @@
+/**
+ * @component Accordion - Collapsible content panels with single or multi-open support.
+ * Built on BitsUI Accordion primitive with full keyboard navigation.
+ */
 import { tv } from "tailwind-variants";
 export const styles = tv({
     base: '',

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

@@ -1,11 +1,5 @@
-<script lang="ts">
-    import {Accordion as AccordionPrimitive} from "bits-ui";
-
-    let {
-        ref = $bindable(null),
-        value = $bindable(),
-        ...restProps
-    }: AccordionPrimitive.RootProps = $props();
+<script lang="ts">import { Accordion as AccordionPrimitive } from "bits-ui";
+let { ref = $bindable(null), value = $bindable(), ...restProps } = $props();
 </script>
 
 <AccordionPrimitive.Root

package/dist/components/accordion/components/AccordionContent.svelte

@@ -1,22 +1,15 @@
-<script lang="ts">
-    import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
-    import {cn} from "../../../utils";
-
-    let {
-        ref = $bindable(null),
-        class: className,
-        children,
-        ...restProps
-    }: WithoutChild<AccordionPrimitive.ContentProps> = $props();
+<script lang="ts">import { Accordion as AccordionPrimitive } from "bits-ui";
+import { cn } from "../../../utils";
+let { ref = $bindable(null), class: className, children, ...restProps } = $props();
 </script>
 
 <AccordionPrimitive.Content
         bind:ref
         class={cn(
-		"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all pb-4",
+		"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
 		className
 	)}
         {...restProps}
 >
-    {@render children?.()}
+    <div class="pb-4">{@render children?.()}</div>
 </AccordionPrimitive.Content>

package/dist/components/accordion/components/AccordionItem.svelte

@@ -1,12 +1,6 @@
-<script lang="ts">
-    import { Accordion as AccordionPrimitive } from "bits-ui";
-    import {cn} from "../../../utils";
-
-    let {
-        ref = $bindable(null),
-        class: className,
-        ...restProps
-    }: AccordionPrimitive.ItemProps = $props();
+<script lang="ts">import { Accordion as AccordionPrimitive } from "bits-ui";
+import { cn } from "../../../utils";
+let { ref = $bindable(null), class: className, ...restProps } = $props();
 </script>
 
 <AccordionPrimitive.Item bind:ref class={cn("border-b", className)} {...restProps} />

package/dist/components/accordion/components/AccordionTrigger.svelte

@@ -1,17 +1,7 @@
-<script lang="ts">
-    import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
-    import { cn } from "../../../utils";
-    import {IconChevronDown} from "../../icons";
-
-    let {
-        ref = $bindable(null),
-        class: className,
-        level = 3,
-        children,
-        ...restProps
-    }: WithoutChild<AccordionPrimitive.TriggerProps> & {
-        level?: AccordionPrimitive.HeaderProps["level"];
-    } = $props();
+<script lang="ts">import { Accordion as AccordionPrimitive } from "bits-ui";
+import { cn } from "../../../utils";
+import { IconChevronDown } from "../../icons";
+let { ref = $bindable(null), class: className, level = 3, children, ...restProps } = $props();
 </script>
 
 <AccordionPrimitive.Header {level} class="flex">
@@ -24,6 +14,6 @@
             {...restProps}
     >
         {@render children?.()}
-        <IconChevronDown class="size-4 shrink-0 transition-transform duration-200" />
+        <IconChevronDown class="size-4 shrink-0 transition-transform ease-ui duration-150" />
     </AccordionPrimitive.Trigger>
 </AccordionPrimitive.Header>

package/dist/components/ai/ChatBubble.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">let { role, content, avatar, timestamp, status = 'sent', class: className = '', } = $props();
+const isUser = $derived(role === 'user');
+export {};
+</script>
+
+<div
+    class="flex gap-2 animate-in slide-in-from-bottom-2 fade-in duration-300 ease-spring {isUser ? 'flex-row-reverse' : 'flex-row'} {className}"
+>
+    {#if avatar}
+        <div class="shrink-0 size-8">{@render avatar()}</div>
+    {/if}
+
+    <div class="flex flex-col gap-1 max-w-[75%] {isUser ? 'items-end' : 'items-start'}">
+        <div
+            class="px-4 py-2.5 text-sm leading-relaxed {isUser
+                ? 'bg-interactive-subtle text-text-primary rounded-2xl rounded-br-sm'
+                : 'bg-surface-raised text-text-primary rounded-2xl rounded-bl-sm border border-border-default'}"
+        >
+            {#if typeof content === 'string'}
+                {content}
+            {:else}
+                {@render content()}
+            {/if}
+        </div>
+
+        <div class="flex items-center gap-1.5 text-[10px] text-text-tertiary">
+            {#if timestamp}<span>{timestamp}</span>{/if}
+            {#if isUser && status === 'sending'}
+                <span class="italic">Sending…</span>
+            {:else if isUser && status === 'error'}
+                <span class="text-error-500">Failed to send</span>
+            {/if}
+        </div>
+    </div>
+</div>

package/dist/components/ai/ChatBubble.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    role: 'user' | 'assistant';
+    content: string | Snippet;
+    avatar?: Snippet;
+    timestamp?: string;
+    status?: 'sending' | 'sent' | 'error';
+    class?: string;
+};
+declare const ChatBubble: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChatBubble = ReturnType<typeof ChatBubble>;
+export default ChatBubble;

package/dist/components/ai/PromptInput.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">import ThinkingLoader from './ThinkingLoader.svelte';
+import SuggestionChips from './SuggestionChips.svelte';
+let { value = $bindable(''), onsubmit, placeholder = 'Ask me anything…', maxLength, loading, disabled, suggestions = [], class: className = '', } = $props();
+function handleKeydown(e) {
+    if (e.key === 'Enter' && !e.shiftKey && !loading && value.trim()) {
+        e.preventDefault();
+        submit();
+    }
+}
+function submit() {
+    if (!value.trim() || loading)
+        return;
+    onsubmit?.(value);
+}
+function handleSuggestion(s) {
+    value = Array.isArray(s) ? s[0] : s;
+}
+</script>
+
+<div class="flex flex-col gap-2 {className}">
+    {#if suggestions.length > 0}
+        <SuggestionChips {suggestions} onSelect={handleSuggestion} />
+    {/if}
+
+    <div
+        class="relative flex items-end gap-2 border rounded bg-surface transition-[border-color,box-shadow] ease-ui duration-150
+            {loading ? 'border-interactive shadow-glow' : 'border-border-default focus-within:border-interactive focus-within:shadow-focus'}"
+    >
+        <textarea
+            class="flex-1 resize-none bg-transparent outline-none px-3 py-2.5 text-sm text-text-primary placeholder:text-text-tertiary min-h-[42px] max-h-40"
+            {placeholder}
+            maxlength={maxLength}
+            {disabled}
+            bind:value
+            onkeydown={handleKeydown}
+            rows={1}
+        ></textarea>
+
+        <div class="shrink-0 pb-2 pr-2">
+            {#if loading}
+                <ThinkingLoader size="sm" />
+            {:else}
+                <button
+                    type="button"
+                    class="size-7 rounded-full flex items-center justify-center transition-colors ease-ui duration-150
+                        {value.trim() ? 'bg-interactive text-interactive-on' : 'bg-surface-hover text-text-tertiary cursor-not-allowed'}"
+                    onclick={submit}
+                    disabled={!value.trim() || disabled}
+                    aria-label="Send"
+                >
+                    <svg class="size-3.5" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M7 12V2M2 7l5-5 5 5"/>
+                    </svg>
+                </button>
+            {/if}
+        </div>
+    </div>
+</div>

package/dist/components/ai/PromptInput.svelte.d.ts

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    value?: string;
+    onsubmit?: (value: string) => void;
+    placeholder?: string;
+    maxLength?: number;
+    loading?: boolean;
+    disabled?: boolean;
+    suggestions?: string[];
+    class?: string;
+};
+declare const PromptInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type PromptInput = ReturnType<typeof PromptInput>;
+export default PromptInput;

package/dist/components/ai/StreamText.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">"use strict";
+let { text, speed = 'normal', onComplete, cursor = true, class: className = '', } = $props();
+const msPerChar = { slow: 30, normal: 15, fast: 5 };
+let displayed = $state('');
+let done = $state(false);
+let timer;
+$effect(() => {
+    displayed = '';
+    done = false;
+    let i = 0;
+    clearInterval(timer);
+    timer = setInterval(() => {
+        if (i < text.length) {
+            displayed += text[i];
+            i++;
+        }
+        else {
+            clearInterval(timer);
+            done = true;
+            onComplete?.();
+        }
+    }, msPerChar[speed]);
+    return () => clearInterval(timer);
+});
+</script>
+
+<span aria-live="polite" class={className}>
+    {displayed}{#if cursor && !done}<span class="cursor-blink">|</span>{/if}
+</span>
+
+<style>
+    .cursor-blink {
+        animation: blink 530ms step-end infinite;
+        margin-left: 1px;
+    }
+
+    @keyframes blink {
+        0%, 100% { opacity: 1; }
+        50%       { opacity: 0; }
+    }
+</style>

package/dist/components/ai/StreamText.svelte.d.ts

@@ -0,0 +1,11 @@
+type StreamSpeed = 'slow' | 'normal' | 'fast';
+type $$ComponentProps = {
+    text: string;
+    speed?: StreamSpeed;
+    onComplete?: () => void;
+    cursor?: boolean;
+    class?: string;
+};
+declare const StreamText: import("svelte").Component<$$ComponentProps, {}, "">;
+type StreamText = ReturnType<typeof StreamText>;
+export default StreamText;

package/dist/components/ai/SuggestionChips.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">"use strict";
+let { suggestions, onSelect, label, multiple, class: className = '', } = $props();
+let selected = $state([]);
+function toggle(s) {
+    if (multiple) {
+        selected = selected.includes(s) ? selected.filter(x => x !== s) : [...selected, s];
+        onSelect?.(selected);
+    }
+    else {
+        selected = [s];
+        onSelect?.(s);
+    }
+}
+</script>
+
+<div class="flex flex-col gap-2 {className}">
+    {#if label}
+        <p class="text-xs text-text-tertiary">{label}</p>
+    {/if}
+    <div class="flex flex-wrap gap-2 overflow-x-auto">
+        {#each suggestions as s (s)}
+            <button
+                type="button"
+                class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium border transition-[background-color,border-color,color] ease-ui duration-150 whitespace-nowrap
+                    {selected.includes(s)
+                        ? 'bg-interactive-subtle border-interactive text-primary-700'
+                        : 'bg-surface-raised border-border-default text-text-secondary hover:bg-surface-hover hover:border-border-strong'}"
+                onclick={() => toggle(s)}
+            >
+                {s}
+            </button>
+        {/each}
+    </div>
+</div>

package/dist/components/ai/SuggestionChips.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    suggestions: string[];
+    onSelect?: (value: string | string[]) => void;
+    label?: string;
+    multiple?: boolean;
+    class?: string;
+};
+declare const SuggestionChips: import("svelte").Component<$$ComponentProps, {}, "">;
+type SuggestionChips = ReturnType<typeof SuggestionChips>;
+export default SuggestionChips;

package/dist/components/ai/ThinkingLoader.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">"use strict";
+let { variant = 'dots', size = 'md', label, class: className = '', } = $props();
+const dotSize = { sm: 'size-1.5', md: 'size-2' };
+</script>
+
+<div
+    class="inline-flex items-center gap-2 {className}"
+    aria-label="AI is thinking"
+    role="status"
+>
+    <div class="flex items-center gap-1">
+        {#each [0, 1, 2] as i (i)}
+            <span
+                class="rounded-full bg-interactive {dotSize[size]}"
+                style="animation: {variant === 'pulse' ? `pulse-dot 800ms ${i * 160}ms ease-in-out infinite` : `wave-dot 1.2s ${i * 150}ms ease-[var(--ease-spring)] infinite`}"
+            ></span>
+        {/each}
+    </div>
+    {#if label}
+        <span class="text-xs text-text-tertiary">{label}</span>
+    {/if}
+</div>
+
+<style>
+    @keyframes wave-dot {
+        0%, 100% { transform: translateY(0); }
+        40%       { transform: translateY(-6px); }
+    }
+
+    @keyframes pulse-dot {
+        0%, 100% { opacity: 0.3; }
+        50%       { opacity: 1; }
+    }
+</style>

package/dist/components/ai/ThinkingLoader.svelte.d.ts

@@ -0,0 +1,11 @@
+type ThinkingVariant = 'dots' | 'wave' | 'pulse';
+type ThinkingSize = 'sm' | 'md';
+type $$ComponentProps = {
+    variant?: ThinkingVariant;
+    size?: ThinkingSize;
+    label?: string;
+    class?: string;
+};
+declare const ThinkingLoader: import("svelte").Component<$$ComponentProps, {}, "">;
+type ThinkingLoader = ReturnType<typeof ThinkingLoader>;
+export default ThinkingLoader;

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

@@ -0,0 +1,5 @@
+export { default as ChatBubble } from './ChatBubble.svelte';
+export { default as StreamText } from './StreamText.svelte';
+export { default as ThinkingLoader } from './ThinkingLoader.svelte';
+export { default as SuggestionChips } from './SuggestionChips.svelte';
+export { default as PromptInput } from './PromptInput.svelte';

package/dist/components/ai/index.js

@@ -0,0 +1,5 @@
+export { default as ChatBubble } from './ChatBubble.svelte';
+export { default as StreamText } from './StreamText.svelte';
+export { default as ThinkingLoader } from './ThinkingLoader.svelte';
+export { default as SuggestionChips } from './SuggestionChips.svelte';
+export { default as PromptInput } from './PromptInput.svelte';

package/dist/components/alert/Alert.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">let { variant = 'info', title, description, closable, icon = true, children, class: className = '', ...props } = $props();
+let visible = $state(true);
+const config = {
+    info: { bg: 'bg-information-50', border: 'border-l-4 border-information-500', icon: 'ℹ', iconColor: 'text-information-600', textColor: 'text-information-900' },
+    success: { bg: 'bg-success-50', border: 'border-l-4 border-success-500', icon: '✓', iconColor: 'text-success-600', textColor: 'text-success-900' },
+    warning: { bg: 'bg-warning-50', border: 'border-l-4 border-warning-500', icon: '⚠', iconColor: 'text-warning-600', textColor: 'text-warning-900' },
+    error: { bg: 'bg-error-50', border: 'border-l-4 border-error-500', icon: '✕', iconColor: 'text-error-600', textColor: 'text-error-900' },
+};
+const c = $derived(config[variant]);
+export {};
+</script>
+
+{#if visible}
+    <div
+        role="alert"
+        class="{c.bg} {c.border} rounded p-4 flex gap-3 {className}"
+        {...props}
+    >
+        {#if icon}
+            <span class="shrink-0 font-bold text-base leading-none mt-0.5 {c.iconColor}">{c.icon}</span>
+        {/if}
+        <div class="flex-1 min-w-0">
+            {#if title}
+                <p class="font-medium text-sm {c.textColor} mb-0.5">{title}</p>
+            {/if}
+            {#if typeof description === 'string'}
+                <p class="text-sm {c.textColor} opacity-85">{description}</p>
+            {:else if description}
+                {@render description()}
+            {:else if children}
+                <div class="text-sm {c.textColor} opacity-85">{@render children()}</div>
+            {/if}
+        </div>
+        {#if closable}
+            <button
+                type="button"
+                class="shrink-0 hover:opacity-60 transition-opacity {c.iconColor}"
+                onclick={() => visible = false}
+                aria-label="Close"
+            >
+                <svg class="size-4" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+                    <path d="M4 4l8 8M12 4l-8 8"/>
+                </svg>
+            </button>
+        {/if}
+    </div>
+{/if}

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+type $$ComponentProps = {
+    variant?: AlertVariant;
+    title?: string;
+    description?: string | Snippet;
+    closable?: boolean;
+    icon?: boolean;
+    children?: Snippet;
+    class?: string;
+    [key: string]: unknown;
+};
+declare const Alert: import("svelte").Component<$$ComponentProps, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

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

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

package/dist/components/alert/index.js

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

package/dist/components/avatar/Avatar.svelte

@@ -1,28 +1,12 @@
-<script lang="ts">
-    import {type AvatarProps, styles} from "./Avatar";
-    import {getUserAvatarUrl} from "../../internal/service/user.service";
-    import {cn} from "../../utils/utils";
-
-    let {
-        children,
-        alt = 'Avatar',
-        size = 'md',
-        src,
-        class: className,
-        border = true,
-        ref = $bindable(),
-        userUid,
-        apiUrl,
-        ...props
-    }: AvatarProps = $props();
-
-    let isError = $state()
-
-    function handleErrorImage() {
-        isError = true
-    }
-
-    let imgUrl = $derived(src ? src : userUid ? getUserAvatarUrl(userUid, apiUrl) : undefined)
+<script lang="ts">import { styles } from "./Avatar";
+import { getUserAvatarUrl } from "../../internal/service/user.service";
+import { cn } from "../../utils/utils";
+let { children, alt = 'Avatar', size = 'md', src, class: className, border = true, ref = $bindable(), userUid, apiUrl, ...props } = $props();
+let isError = $state();
+function handleErrorImage() {
+    isError = true;
+}
+let imgUrl = $derived(src ? src : userUid ? getUserAvatarUrl(userUid, apiUrl) : undefined);
 </script>
 
 <div bind:this={ref}

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

@@ -0,0 +1,52 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        primary: string;
+        success: string;
+        error: string;
+        warning: string;
+        info: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+    };
+}, undefined, "inline-flex items-center gap-1 rounded-full font-medium select-none", {
+    variant: {
+        default: string;
+        primary: string;
+        success: string;
+        error: string;
+        warning: string;
+        info: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        primary: string;
+        success: string;
+        error: string;
+        warning: string;
+        info: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+    };
+}, undefined, "inline-flex items-center gap-1 rounded-full font-medium select-none", unknown, unknown, undefined>>;
+type BadgeVariants = VariantProps<typeof styles>;
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, BadgeVariants {
+    children?: Snippet;
+    class?: string;
+    dot?: boolean;
+    closable?: boolean;
+    onclose?: () => void;
+}
+export {};

package/dist/components/badge/Badge.js

@@ -0,0 +1,22 @@
+import { tv } from "tailwind-variants";
+export const styles = tv({
+    base: 'inline-flex items-center gap-1 rounded-full font-medium select-none',
+    variants: {
+        variant: {
+            default: 'bg-surface-sunken text-text-secondary border border-border-default',
+            primary: 'bg-interactive-subtle text-interactive-text border border-interactive-border',
+            success: 'bg-success-subtle text-success-text border border-success-border',
+            error: 'bg-error-subtle text-error-text border border-error-border',
+            warning: 'bg-warning-subtle text-warning-text border border-warning-border',
+            info: 'bg-information-subtle text-information-text border border-information-border',
+        },
+        size: {
+            sm: 'px-2 py-0.5 text-[10px] leading-none',
+            md: 'px-2.5 py-1 text-[11px] leading-none uppercase tracking-wider',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'md',
+    },
+});

package/dist/components/badge/Badge.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">import { styles } from './Badge.js';
+let { children, class: className, variant, size, dot, closable, onclose, ...props } = $props();
+</script>
+
+<span class={styles({ variant, size, className })} {...props}>
+    {#if dot}
+        <span class="size-1.5 rounded-full bg-current opacity-70"></span>
+    {/if}
+    {@render children?.()}
+    {#if closable}
+        <button
+            type="button"
+            class="ml-0.5 hover:opacity-70 transition-opacity leading-none"
+            onclick={onclose}
+            aria-label="Remove"
+        >
+            <svg class="size-2.5" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.5">
+                <path d="M2 2l6 6M8 2l-6 6"/>
+            </svg>
+        </button>
+    {/if}
+</span>

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

@@ -0,0 +1,4 @@
+import { type BadgeProps } from './Badge.js';
+declare const Badge: import("svelte").Component<BadgeProps, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;