@sentropic/design-system-svelte 0.6.0 → 0.8.0

package/dist/ChatMessage.svelte

@@ -0,0 +1,271 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  export type ChatMessageRole = "user" | "assistant" | "system" | "tool";
+  export type ChatMessageStatus = "pending" | "processing" | "completed" | "failed";
+  type ChatMessageLegacyStatus = "idle" | "streaming" | "error";
+
+  type ChatMessageProps = Omit<HTMLAttributes<HTMLElement>, "class" | "role"> & {
+    role: ChatMessageRole;
+    status?: ChatMessageStatus | ChatMessageLegacyStatus;
+    timestamp?: string;
+    class?: string;
+    avatar?: Snippet;
+    children: Snippet;
+    footer?: Snippet;
+    actions?: Snippet;
+  };
+
+  let {
+    role,
+    status = "completed",
+    timestamp,
+    class: className,
+    avatar,
+    children,
+    footer,
+    actions,
+    ...rest
+  }: ChatMessageProps = $props();
+
+  const normalizedStatus = () => {
+    if (status === "idle" || status === "streaming") return "processing";
+    if (status === "error") return "failed";
+    return status;
+  };
+
+  const isStreaming = () => normalizedStatus() === "processing";
+
+  const classes = () =>
+    [
+      "st-chatMessage",
+      `st-chatMessage--${role}`,
+      `st-chatMessage--${normalizedStatus()}`,
+      className
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+  const alignment = $derived(role === "user" ? "end" : "start");
+</script>
+
+<article
+  {...rest}
+  class={classes()}
+  data-role={role}
+  data-status={normalizedStatus()}
+  data-align={alignment}
+  aria-live={isStreaming() ? "polite" : undefined}
+>
+  {#if avatar}
+    <div class="st-chatMessage__avatar" aria-hidden="true">
+      {@render avatar()}
+    </div>
+  {/if}
+  <div class="st-chatMessage__body">
+    <div class="st-chatMessage__bubble">
+      <div class="st-chatMessage__content">
+        {@render children()}
+      </div>
+      {#if isStreaming()}
+        <span class="st-chatMessage__pulse" aria-hidden="true"></span>
+      {/if}
+    </div>
+    {#if footer || timestamp}
+      <div class="st-chatMessage__footer">
+        {#if footer}{@render footer()}{:else if timestamp}<span class="st-chatMessage__timestamp">{timestamp}</span>{/if}
+      </div>
+    {/if}
+    {#if actions}
+      <div class="st-chatMessage__actions">
+        {@render actions()}
+      </div>
+    {/if}
+  </div>
+</article>
+
+<style>
+  .st-chatMessage {
+    align-items: flex-start;
+    color: var(--st-semantic-text-primary);
+    display: flex;
+    gap: var(--st-component-chatMessage-gap, 0.5rem);
+    width: 100%;
+  }
+
+  .st-chatMessage[data-align="end"] {
+    flex-direction: row-reverse;
+  }
+
+  .st-chatMessage__avatar {
+    align-items: center;
+    background: var(--st-component-chatMessage-avatarBackground, var(--st-semantic-surface-subtle));
+    border-radius: 999px;
+    color: var(--st-semantic-text-secondary);
+    display: inline-flex;
+    flex: 0 0 auto;
+    font-size: 0.75rem;
+    height: var(--st-component-chatMessage-avatarSize, 1.75rem);
+    justify-content: center;
+    overflow: hidden;
+    width: var(--st-component-chatMessage-avatarSize, 1.75rem);
+  }
+
+  .st-chatMessage__body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    min-width: 0;
+    max-width: var(--st-component-chatMessage-maxWidth, min(42rem, 100%));
+  }
+
+  .st-chatMessage[data-align="end"] .st-chatMessage__body {
+    align-items: flex-end;
+  }
+
+  .st-chatMessage__bubble {
+    border: 1px solid transparent;
+    border-radius: var(--st-component-chatMessage-radius, 0.75rem);
+    line-height: 1.5;
+    padding: var(--st-component-chatMessage-padding, 0.625rem 0.875rem);
+    position: relative;
+    word-break: break-word;
+  }
+
+  .st-chatMessage__content :global(p) {
+    margin: 0;
+  }
+  .st-chatMessage__content :global(p + p),
+  .st-chatMessage__content :global(* + p),
+  .st-chatMessage__content :global(* + ul),
+  .st-chatMessage__content :global(* + ol),
+  .st-chatMessage__content :global(* + pre) {
+    margin-top: 0.5rem;
+  }
+
+  .st-chatMessage--user .st-chatMessage__bubble {
+    background: var(
+      --st-component-chatMessage-userBackground,
+      var(--st-component-chat-userBubbleBackground, var(--st-semantic-action-primary, #2563eb))
+    );
+    color: var(
+      --st-component-chatMessage-userText,
+      var(--st-component-chat-userBubbleText, #ffffff)
+    );
+  }
+
+  .st-chatMessage--assistant .st-chatMessage__bubble {
+    background: var(
+      --st-component-chatMessage-assistantBackground,
+      var(--st-component-chat-assistantBubbleBackground, var(--st-semantic-surface-subtle, #f8fafc))
+    );
+    color: var(
+      --st-component-chatMessage-assistantText,
+      var(--st-component-chat-assistantBubbleText, var(--st-semantic-text-primary))
+    );
+  }
+
+  .st-chatMessage--system .st-chatMessage__bubble {
+    background: var(
+      --st-component-chatMessage-systemBackground,
+      var(--st-semantic-surface-default, #ffffff)
+    );
+    border-color: var(
+      --st-component-chatMessage-systemBorder,
+      var(--st-semantic-border-subtle)
+    );
+    color: var(
+      --st-component-chatMessage-systemText,
+      var(--st-semantic-text-secondary)
+    );
+    font-size: 0.875rem;
+  }
+
+  .st-chatMessage--tool .st-chatMessage__bubble {
+    background: var(
+      --st-component-chatMessage-toolBackground,
+      var(--st-component-chatMessage-assistantBackground, var(--st-component-chat-assistantBubbleBackground, var(--st-semantic-surface-subtle, #f8fafc)))
+    );
+    color: var(
+      --st-component-chatMessage-toolText,
+      var(--st-component-chatMessage-assistantText, var(--st-component-chat-assistantBubbleText, var(--st-semantic-text-primary)))
+    );
+    border-color: var(
+      --st-component-chatMessage-toolBorder,
+      var(--st-semantic-border-subtle)
+    );
+    font-style: italic;
+  }
+
+  .st-chatMessage--pending .st-chatMessage__bubble {
+    border-color: var(
+      --st-component-chatMessage-pendingBorder,
+      var(--st-semantic-status-pending, #d97706)
+    );
+  }
+
+  .st-chatMessage--processing .st-chatMessage__bubble {
+    border-color: var(
+      --st-component-chatMessage-processingBorder,
+      var(--st-semantic-status-processing, #2563eb)
+    );
+  }
+
+  .st-chatMessage--failed .st-chatMessage__bubble {
+    border-color: var(
+      --st-component-chatMessage-errorBorder,
+      var(--st-semantic-feedback-danger, #b91c1c)
+    );
+  }
+
+  .st-chatMessage__pulse {
+    background: currentColor;
+    border-radius: 999px;
+    display: inline-block;
+    height: 0.5rem;
+    margin-left: 0.5rem;
+    opacity: 0.65;
+    vertical-align: middle;
+    width: 0.5rem;
+    animation: st-chatMessage-pulse 1.1s ease-in-out infinite;
+  }
+
+  @keyframes st-chatMessage-pulse {
+    0%,
+    100% {
+      opacity: 0.25;
+      transform: scale(0.85);
+    }
+    50% {
+      opacity: 0.9;
+      transform: scale(1.05);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-chatMessage__pulse {
+      animation: none;
+      opacity: 0.6;
+    }
+  }
+
+  .st-chatMessage__footer {
+    color: var(--st-semantic-text-secondary);
+    font-size: 0.75rem;
+    line-height: 1.3;
+  }
+
+  .st-chatMessage__timestamp {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .st-chatMessage__actions {
+    display: flex;
+    gap: 0.25rem;
+  }
+
+  .st-chatMessage[data-align="end"] .st-chatMessage__actions {
+    justify-content: flex-end;
+  }
+</style>

package/dist/ChatMessage.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export type ChatMessageRole = "user" | "assistant" | "system" | "tool";
+export type ChatMessageStatus = "pending" | "processing" | "completed" | "failed";
+type ChatMessageLegacyStatus = "idle" | "streaming" | "error";
+type ChatMessageProps = Omit<HTMLAttributes<HTMLElement>, "class" | "role"> & {
+    role: ChatMessageRole;
+    status?: ChatMessageStatus | ChatMessageLegacyStatus;
+    timestamp?: string;
+    class?: string;
+    avatar?: Snippet;
+    children: Snippet;
+    footer?: Snippet;
+    actions?: Snippet;
+};
+declare const ChatMessage: import("svelte").Component<ChatMessageProps, {}, "">;
+type ChatMessage = ReturnType<typeof ChatMessage>;
+export default ChatMessage;
+//# sourceMappingURL=ChatMessage.svelte.d.ts.map

package/dist/ChatMessage.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessage.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ChatMessage.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AACvE,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,QAAQ,CAAC;AAClF,KAAK,uBAAuB,GAAG,MAAM,GAAG,WAAW,GAAG,OAAO,CAAC;AAE9D,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IAC5E,IAAI,EAAE,eAAe,CAAC;IACtB,MAAM,CAAC,EAAE,iBAAiB,GAAG,uBAAuB,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA0EJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/ChatThread.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type ChatThreadProps = Omit<HTMLAttributes<HTMLElement>, "class" | "aria-label"> & {
+    label: string;
+    autoScroll?: boolean;
+    class?: string;
+    children?: Snippet;
+    emptyState?: Snippet;
+  };
+
+  let {
+    label,
+    autoScroll = true,
+    class: className,
+    children,
+    emptyState,
+    ...rest
+  }: ChatThreadProps = $props();
+
+  let scrollEl: HTMLElement | undefined = $state();
+  let listEl: HTMLElement | undefined = $state();
+  let hasChildren = $state(true);
+
+  const classes = () => ["st-chatThread", className].filter(Boolean).join(" ");
+
+  function scrollToBottom() {
+    const node = scrollEl;
+    if (!node) return;
+    node.scrollTop = node.scrollHeight;
+  }
+
+  $effect(() => {
+    if (!autoScroll) return;
+    const node = listEl;
+    if (!node) return;
+    // Initial scroll on mount and on children change.
+    scrollToBottom();
+    const observer = new MutationObserver(() => {
+      scrollToBottom();
+    });
+    observer.observe(node, { childList: true, subtree: true, characterData: true });
+    return () => observer.disconnect();
+  });
+
+  $effect(() => {
+    const node = listEl;
+    if (!node) {
+      hasChildren = false;
+      return;
+    }
+    const update = () => {
+      hasChildren = node.childElementCount > 0;
+    };
+    update();
+    const observer = new MutationObserver(update);
+    observer.observe(node, { childList: true });
+    return () => observer.disconnect();
+  });
+</script>
+
+<section
+  {...rest}
+  bind:this={scrollEl}
+  class={classes()}
+  role="log"
+  aria-label={label}
+  aria-live="polite"
+  aria-relevant="additions text"
+>
+  <div bind:this={listEl} class="st-chatThread__list">
+    {@render children?.()}
+  </div>
+  {#if emptyState && !hasChildren}
+    <div class="st-chatThread__empty">
+      {@render emptyState()}
+    </div>
+  {/if}
+</section>
+
+<style>
+  .st-chatThread {
+    background: var(--st-component-chatThread-background, transparent);
+    border-radius: var(--st-component-chatThread-radius, 0.75rem);
+    color: var(--st-semantic-text-primary);
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-component-chatThread-gap, 0.75rem);
+    max-height: var(--st-component-chatThread-maxHeight, 32rem);
+    min-height: var(--st-component-chatThread-minHeight, 12rem);
+    overflow-y: auto;
+    padding: var(--st-component-chatThread-padding, 0.75rem);
+    position: relative;
+    scroll-behavior: smooth;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-chatThread {
+      scroll-behavior: auto;
+    }
+  }
+
+  .st-chatThread__list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-component-chatThread-gap, 0.75rem);
+    min-height: 0;
+  }
+
+  .st-chatThread__empty {
+    align-items: center;
+    color: var(--st-semantic-text-secondary);
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    padding: var(--st-spacing-4, 1rem);
+    text-align: center;
+  }
+</style>

package/dist/ChatThread.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type ChatThreadProps = Omit<HTMLAttributes<HTMLElement>, "class" | "aria-label"> & {
+    label: string;
+    autoScroll?: boolean;
+    class?: string;
+    children?: Snippet;
+    emptyState?: Snippet;
+};
+declare const ChatThread: import("svelte").Component<ChatThreadProps, {}, "">;
+type ChatThread = ReturnType<typeof ChatThread>;
+export default ChatThread;
+//# sourceMappingURL=ChatThread.svelte.d.ts.map

package/dist/ChatThread.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatThread.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ChatThread.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,YAAY,CAAC,GAAG;IACjF,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAuEJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/CodeSnippet.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import CopyButton from "./CopyButton.svelte";
+
+  type CodeSnippetProps = {
+    code: string;
+    language?: string;
+    inline?: boolean;
+    copyable?: boolean;
+    copyLabel?: string;
+    copiedLabel?: string;
+    class?: string;
+  };
+
+  let {
+    code,
+    language,
+    inline = false,
+    copyable = true,
+    copyLabel = "Copy",
+    copiedLabel = "Copied",
+    class: className
+  }: CodeSnippetProps = $props();
+
+  const inlineClasses = () =>
+    ["st-codeSnippet--inline", className].filter(Boolean).join(" ");
+  const blockClasses = () => ["st-codeSnippet", className].filter(Boolean).join(" ");
+</script>
+
+{#if inline}
+  <code class={inlineClasses()} data-language={language}>{code}</code>
+{:else}
+  <div class="st-codeSnippet__wrapper">
+    <pre class={blockClasses()} data-language={language}><code
+        class="st-codeSnippet__code">{code}</code></pre>
+    {#if copyable}
+      <span class="st-codeSnippet__copy">
+        <CopyButton value={code} size="sm" label={copyLabel} copiedLabel={copiedLabel} />
+      </span>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .st-codeSnippet__wrapper {
+    position: relative;
+  }
+
+  .st-codeSnippet {
+    background: var(
+      --st-component-codeSnippet-background,
+      var(--st-semantic-surface-subtle)
+    );
+    border: 1px solid
+      var(--st-component-codeSnippet-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-codeSnippet-radius, 0.375rem);
+    color: var(--st-component-codeSnippet-text, var(--st-semantic-text-primary));
+    font-family: var(--st-font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
+    font-size: 0.8125rem;
+    line-height: 1.5;
+    margin: 0;
+    max-height: var(--st-component-codeSnippet-maxHeight, 16rem);
+    overflow: auto;
+    padding: 0.75rem 0.875rem;
+    padding-inline-end: 4rem;
+  }
+
+  .st-codeSnippet__code {
+    font: inherit;
+    white-space: pre;
+  }
+
+  .st-codeSnippet__copy {
+    position: absolute;
+    inset-block-start: 0.375rem;
+    inset-inline-end: 0.375rem;
+  }
+
+  .st-codeSnippet--inline {
+    background: var(
+      --st-component-codeSnippet-background,
+      var(--st-semantic-surface-subtle)
+    );
+    border: 1px solid
+      var(--st-component-codeSnippet-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-radius-sm, 0.25rem);
+    color: var(--st-component-codeSnippet-text, var(--st-semantic-text-primary));
+    font-family: var(--st-font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
+    font-size: 0.8125rem;
+    padding: 0.0625rem 0.375rem;
+  }
+</style>

package/dist/CodeSnippet.svelte.d.ts

@@ -0,0 +1,13 @@
+type CodeSnippetProps = {
+    code: string;
+    language?: string;
+    inline?: boolean;
+    copyable?: boolean;
+    copyLabel?: string;
+    copiedLabel?: string;
+    class?: string;
+};
+declare const CodeSnippet: import("svelte").Component<CodeSnippetProps, {}, "">;
+type CodeSnippet = ReturnType<typeof CodeSnippet>;
+export default CodeSnippet;
+//# sourceMappingURL=CodeSnippet.svelte.d.ts.map

package/dist/CodeSnippet.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeSnippet.svelte.d.ts","sourceRoot":"","sources":["../src/lib/CodeSnippet.svelte.ts"],"names":[],"mappings":"AAME,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAqCJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/Combobox.svelte

@@ -7,6 +7,7 @@
 </script>
 
 <script lang="ts">
+  import { ChevronDown, X } from "@lucide/svelte";
   import type { HTMLInputAttributes } from "svelte/elements";
 
   type ComboboxProps = Omit<
@@ -158,7 +159,7 @@
           {disabled}
           onclick={clear}
         >
-          <span aria-hidden="true">×</span>
+          <X size={16} strokeWidth={2.25} aria-hidden="true" />
         </button>
       {/if}
       <button
@@ -169,7 +170,12 @@
         {disabled}
         onclick={() => (expanded = !expanded)}
       >
-        <span aria-hidden="true">▾</span>
+        <ChevronDown
+          class={`st-combobox__toggleIcon ${expanded ? "st-combobox__toggleIcon--open" : ""}`}
+          size={18}
+          strokeWidth={2.25}
+          aria-hidden="true"
+        />
       </button>
     </span>
   </label>
@@ -339,6 +345,14 @@
     cursor: not-allowed;
   }
 
+  .st-combobox__toggleIcon {
+    transition: transform var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+  }
+
+  .st-combobox__toggleIcon--open {
+    transform: rotate(180deg);
+  }
+
   .st-combobox__list {
     background: var(--st-component-dropdown-background, var(--st-semantic-surface-default));
     border: 1px solid var(--st-component-dropdown-border, var(--st-semantic-border-subtle));

package/dist/Combobox.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Combobox.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAGH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,aAAa,GAAG,IAAI,CACvB,mBAAmB,EACnB,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CACjD,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAqJJ,QAAA,MAAM,QAAQ,wDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Combobox.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Combobox.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAIH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,aAAa,GAAG,IAAI,CACvB,mBAAmB,EACnB,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CACjD,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAsJJ,QAAA,MAAM,QAAQ,wDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/CopyButton.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { HTMLButtonAttributes } from "svelte/elements";
+  import { Check, Copy } from "@lucide/svelte";
 
   type CopyButtonProps = Omit<HTMLButtonAttributes, "class" | "type"> & {
     value: string;
@@ -59,14 +60,9 @@
 >
   <span class="st-copyButton__icon" aria-hidden="true">
     {#if copied}
-      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" width="14" height="14">
-        <path d="m3 8 3.5 3.5L13 5" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
+      <Check size={14} strokeWidth={2} aria-hidden="true" />
     {:else}
-      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" width="14" height="14">
-        <rect x="4" y="4" width="9" height="10" rx="1.5" />
-        <path d="M3 11V3a1 1 0 0 1 1-1h7" />
-      </svg>
+      <Copy size={14} strokeWidth={2} aria-hidden="true" />
     {/if}
   </span>
   <span class="st-copyButton__label">{copied ? copiedLabel : label}</span>

package/dist/CopyButton.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CopyButton.svelte.d.ts","sourceRoot":"","sources":["../src/lib/CopyButton.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,KAAK,eAAe,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA8DJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"CopyButton.svelte.d.ts","sourceRoot":"","sources":["../src/lib/CopyButton.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAI1D,KAAK,eAAe,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA0DJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/Drawer.svelte

@@ -15,7 +15,7 @@
   };
 
   let {
-    open = false,
+    open = $bindable(false),
     title,
     description,
     side = "right",
@@ -28,17 +28,37 @@
   }: DrawerProps = $props();
 
   const classes = () => ["st-drawer", `st-drawer--${side}`, className].filter(Boolean).join(" ");
+
+  function close() {
+    open = false;
+    onclose?.();
+  }
+
+  function onBackdropClick(event: MouseEvent) {
+    if (event.target === event.currentTarget) {
+      close();
+    }
+  }
+
+  function onWindowKeydown(event: KeyboardEvent) {
+    if (event.key === "Escape" && open) {
+      event.preventDefault();
+      close();
+    }
+  }
 </script>
 
+<svelte:window onkeydown={onWindowKeydown} />
+
 {#if open}
-  <div class="st-drawer__backdrop">
+  <div class="st-drawer__backdrop" onclick={onBackdropClick} role="presentation">
     <aside {...rest} class={classes()} role="dialog" aria-modal="true" aria-label={title}>
       <header class="st-drawer__header">
         <div>
           <h2 class="st-drawer__title">{title}</h2>
           {#if description}<p class="st-drawer__description">{description}</p>{/if}
         </div>
-        <button class="st-drawer__close" type="button" aria-label={closeLabel} onclick={onclose}>
+        <button class="st-drawer__close" type="button" aria-label={closeLabel} onclick={close}>
           <span aria-hidden="true">x</span>
         </button>
       </header>

package/dist/Drawer.svelte.d.ts

@@ -11,7 +11,7 @@ type DrawerProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
     footer?: Snippet;
     onclose?: () => void;
 };
-declare const Drawer: import("svelte").Component<DrawerProps, {}, "">;
+declare const Drawer: import("svelte").Component<DrawerProps, {}, "open">;
 type Drawer = ReturnType<typeof Drawer>;
 export default Drawer;
 //# sourceMappingURL=Drawer.svelte.d.ts.map