@sentropic/design-system-svelte 0.6.0 → 0.8.0

package/dist/StreamingMessage.svelte

@@ -0,0 +1,292 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import ChatMessage, {
+    type ChatMessageRole,
+    type ChatMessageStatus
+  } from "./ChatMessage.svelte";
+
+  export type StreamingMessageEvent =
+    | { type: "message.delta"; messageId?: string; delta: string }
+    | { type: "message.completed"; messageId?: string }
+    | { type: "tool.started"; toolCallId: string; toolName: string; messageId?: string }
+    | {
+        type: "tool.completed";
+        toolCallId: string;
+        status: "success" | "error";
+        toolName?: string;
+        messageId?: string;
+      }
+    | {
+        type: "permission.requested";
+        toolCallId: string;
+        choices: string[];
+        messageId?: string;
+      }
+    | {
+        type: "checkpoint.requested";
+        checkpointId: string;
+        label: string;
+        messageId?: string;
+      };
+
+  export type StreamingMessageMode = "live" | "passive";
+
+  type ToolCallState = {
+    toolCallId: string;
+    toolName: string;
+    status: "pending" | "processing" | "success" | "error";
+  };
+
+  type StreamingMessageProps = Omit<
+    HTMLAttributes<HTMLElement>,
+    "class" | "children" | "role"
+  > & {
+    role?: ChatMessageRole;
+    status?: ChatMessageStatus;
+    streamId?: string;
+    initialEvents?: StreamingMessageEvent[];
+    events?: StreamingMessageEvent[];
+    finalContent?: string;
+    mode?: StreamingMessageMode;
+    placeholder?: string;
+    showTrail?: boolean;
+    class?: string;
+    footer?: Snippet;
+    actions?: Snippet;
+  };
+
+  let {
+    role = "assistant",
+    status = "processing",
+    streamId,
+    initialEvents = [],
+    events = [],
+    finalContent,
+    mode = "live",
+    placeholder = "Streaming en cours…",
+    showTrail = true,
+    class: className,
+    footer,
+    actions,
+    ...rest
+  }: StreamingMessageProps = $props();
+
+  const classes = () => ["st-streamingMessage", className].filter(Boolean).join(" ");
+
+  const mergedEvents = () => [...initialEvents, ...events];
+
+  const resolvedContent = () => {
+    if (finalContent) return finalContent;
+    return mergedEvents()
+      .filter((event) => event.type === "message.delta")
+      .map((event) => event.delta)
+      .join("");
+  };
+
+  const hasAnyEvent = () => mergedEvents().length > 0;
+
+  const toolCalls = (): ToolCallState[] => {
+    const byId = new Map<string, ToolCallState>();
+
+    for (const event of mergedEvents()) {
+      if (event.type === "tool.started") {
+        byId.set(event.toolCallId, {
+          toolCallId: event.toolCallId,
+          toolName: event.toolName,
+          status: "processing"
+        });
+      }
+
+      if (event.type === "tool.completed") {
+        const current =
+          byId.get(event.toolCallId) ??
+          ({
+            toolCallId: event.toolCallId,
+            toolName: event.toolName ?? "tool",
+            status: "pending"
+          } as ToolCallState);
+
+        byId.set(event.toolCallId, {
+          ...current,
+          status: event.status === "error" ? "error" : "success"
+        });
+      }
+    }
+
+    return [...byId.values()];
+  };
+
+  const permissionRequests = () =>
+    mergedEvents().filter((event) => event.type === "permission.requested");
+
+  const checkpoints = () =>
+    mergedEvents().filter((event) => event.type === "checkpoint.requested");
+
+  const eventLabel = (event: StreamingMessageEvent) => {
+    switch (event.type) {
+      case "message.delta":
+        return "message.delta";
+      case "message.completed":
+        return "message.completed";
+      case "tool.started":
+        return `${event.toolName} démarré (${event.toolCallId})`;
+      case "tool.completed":
+        return `${event.toolName ?? "tool"} terminé (${event.status})`;
+      case "permission.requested":
+        return `permission demandée (${event.toolCallId})`;
+      case "checkpoint.requested":
+        return `checkpoint demandé (${event.label})`;
+      default:
+        return "event";
+    }
+  };
+
+  const streamIdLabel = () =>
+    streamId ? `Flux : ${streamId}` : "Flux de streaming";
+</script>
+
+<ChatMessage
+  {...rest}
+  role={role}
+  {status}
+  class={classes()}
+  data-stream-id={streamId}
+  footer={footer}
+  actions={actions}
+>
+  {#if resolvedContent()}
+    <p class="st-streamingMessage__text">{resolvedContent()}</p>
+  {:else}
+    <p class="st-streamingMessage__text st-streamingMessage__text--muted">
+      {placeholder}
+    </p>
+  {/if}
+
+  <p class="st-streamingMessage__meta">({streamIdLabel()})</p>
+
+  {#if (toolCalls().length > 0 || permissionRequests().length > 0 || checkpoints().length > 0) && mode === "live"}
+    <details class="st-streamingMessage__trail">
+      <summary class="st-streamingMessage__trailToggle">Détails du stream</summary>
+      <ul class="st-streamingMessage__trailList">
+        {#if toolCalls().length > 0}
+          <li class="st-streamingMessage__trailSection">
+            <strong>Outils</strong>
+            <ul class="st-streamingMessage__subList">
+              {#each toolCalls() as toolCall}
+                <li>
+                  <span>{toolCall.toolName}</span>
+                  <span> — {toolCall.status}</span>
+                </li>
+              {/each}
+            </ul>
+          </li>
+        {/if}
+
+        {#if permissionRequests().length > 0}
+          <li class="st-streamingMessage__trailSection">
+            <strong>Permissions</strong>
+            <ul class="st-streamingMessage__subList">
+              {#each permissionRequests() as permissionEvent}
+                <li>{permissionEvent.toolCallId}: {permissionEvent.choices.join(", ")}</li>
+              {/each}
+            </ul>
+          </li>
+        {/if}
+
+        {#if checkpoints().length > 0}
+          <li class="st-streamingMessage__trailSection">
+            <strong>Checkpoints</strong>
+            <ul class="st-streamingMessage__subList">
+              {#each checkpoints() as checkpointEvent}
+                <li>{checkpointEvent.label} ({checkpointEvent.checkpointId})</li>
+              {/each}
+            </ul>
+          </li>
+        {/if}
+
+        {#if hasAnyEvent() && showTrail}
+          <li class="st-streamingMessage__trailSection">
+            <strong>Derniers events</strong>
+            <ul class="st-streamingMessage__subList">
+              {#each mergedEvents().slice(-6) as event}
+                <li>{eventLabel(event)}</li>
+              {/each}
+            </ul>
+          </li>
+        {/if}
+      </ul>
+    </details>
+  {/if}
+</ChatMessage>
+
+<style>
+  .st-streamingMessage {
+    position: relative;
+  }
+
+  .st-streamingMessage__text {
+    font-family: var(--st-component-chatMessage-font, var(--st-typography-fontFamilyBody, inherit));
+    margin: 0;
+    white-space: pre-wrap;
+  }
+
+  .st-streamingMessage__text--muted {
+    color: var(--st-semantic-text-muted);
+    font-style: italic;
+  }
+
+  .st-streamingMessage__meta {
+    color: var(--st-semantic-text-muted);
+    font-size: 0.75rem;
+    margin: 0.35rem 0 0;
+  }
+
+  .st-streamingMessage__trail {
+    margin-top: 0.5rem;
+  }
+
+  .st-streamingMessage__trailToggle {
+    color: var(--st-component-chatMessage-actionText, var(--st-semantic-text-secondary));
+    cursor: pointer;
+    font-size: 0.75rem;
+  }
+
+  .st-streamingMessage__trailList,
+  .st-streamingMessage__subList {
+    margin: 0.4rem 0 0 1rem;
+    padding: 0;
+  }
+
+  .st-streamingMessage__trailSection {
+    margin-bottom: 0.45rem;
+  }
+
+  .st-streamingMessage__trailSection strong {
+    color: var(--st-semantic-text-secondary);
+    font-size: 0.75rem;
+    font-weight: 600;
+  }
+
+  .st-streamingMessage__trailSection :global(li) {
+    color: var(--st-semantic-text-primary);
+    font-size: 0.75rem;
+    line-height: 1.4;
+    list-style: none;
+  }
+
+  .st-streamingMessage__trailSection :global(li + li) {
+    margin-top: 0.2rem;
+  }
+
+  .st-streamingMessage__trailSection :global(li::before) {
+    content: "• ";
+    color: var(--st-semantic-text-muted);
+  }
+
+  @media (max-width: 640px) {
+    .st-streamingMessage__trail {
+      margin-top: 0.35rem;
+    }
+  }
+</style>

package/dist/StreamingMessage.svelte.d.ts

@@ -0,0 +1,51 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import { type ChatMessageRole, type ChatMessageStatus } from "./ChatMessage.svelte";
+export type StreamingMessageEvent = {
+    type: "message.delta";
+    messageId?: string;
+    delta: string;
+} | {
+    type: "message.completed";
+    messageId?: string;
+} | {
+    type: "tool.started";
+    toolCallId: string;
+    toolName: string;
+    messageId?: string;
+} | {
+    type: "tool.completed";
+    toolCallId: string;
+    status: "success" | "error";
+    toolName?: string;
+    messageId?: string;
+} | {
+    type: "permission.requested";
+    toolCallId: string;
+    choices: string[];
+    messageId?: string;
+} | {
+    type: "checkpoint.requested";
+    checkpointId: string;
+    label: string;
+    messageId?: string;
+};
+export type StreamingMessageMode = "live" | "passive";
+type StreamingMessageProps = Omit<HTMLAttributes<HTMLElement>, "class" | "children" | "role"> & {
+    role?: ChatMessageRole;
+    status?: ChatMessageStatus;
+    streamId?: string;
+    initialEvents?: StreamingMessageEvent[];
+    events?: StreamingMessageEvent[];
+    finalContent?: string;
+    mode?: StreamingMessageMode;
+    placeholder?: string;
+    showTrail?: boolean;
+    class?: string;
+    footer?: Snippet;
+    actions?: Snippet;
+};
+declare const StreamingMessage: import("svelte").Component<StreamingMessageProps, {}, "">;
+type StreamingMessage = ReturnType<typeof StreamingMessage>;
+export default StreamingMessage;
+//# sourceMappingURL=StreamingMessage.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StreamingMessage.svelte.d.ts","sourceRoot":"","sources":["../src/lib/StreamingMessage.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAoB,EAChB,KAAK,eAAe,EACpB,KAAK,iBAAiB,EACvB,MAAM,sBAAsB,CAAC;AAG9B,MAAM,MAAM,qBAAqB,GAC7B;IAAE,IAAI,EAAE,eAAe,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAC5D;IAAE,IAAI,EAAE,mBAAmB,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GACjD;IAAE,IAAI,EAAE,cAAc,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAClF;IACE,IAAI,EAAE,gBAAgB,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,SAAS,GAAG,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GACD;IACE,IAAI,EAAE,sBAAsB,CAAC;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GACD;IACE,IAAI,EAAE,sBAAsB,CAAC;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEN,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,SAAS,CAAC;AAQtD,KAAK,qBAAqB,GAAG,IAAI,CAC/B,cAAc,CAAC,WAAW,CAAC,EAC3B,OAAO,GAAG,UAAU,GAAG,MAAM,CAC9B,GAAG;IACF,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACxC,MAAM,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA0KJ,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/StructuredList.svelte

@@ -0,0 +1,86 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export interface StructuredListItem {
+    key: string;
+    value: string | Snippet;
+  }
+</script>
+
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type StructuredListProps = Omit<HTMLAttributes<HTMLDListElement>, "class"> & {
+    items: StructuredListItem[];
+    bordered?: boolean;
+    class?: string;
+  };
+
+  let {
+    items,
+    bordered = true,
+    class: className,
+    ...rest
+  }: StructuredListProps = $props();
+
+  const classes = () =>
+    ["st-structuredList", bordered ? "st-structuredList--bordered" : null, className]
+      .filter(Boolean)
+      .join(" ");
+
+  function isSnippet(value: string | Snippet): value is Snippet {
+    return typeof value === "function";
+  }
+</script>
+
+<dl {...rest} class={classes()}>
+  {#each items as item (item.key)}
+    <div class="st-structuredList__row">
+      <dt class="st-structuredList__term">{item.key}</dt>
+      <dd class="st-structuredList__definition">
+        {#if isSnippet(item.value)}
+          {@render item.value()}
+        {:else}
+          {item.value}
+        {/if}
+      </dd>
+    </div>
+  {/each}
+</dl>
+
+<style>
+  .st-structuredList {
+    color: var(--st-semantic-text-primary);
+    display: grid;
+    margin: 0;
+    width: 100%;
+  }
+
+  .st-structuredList--bordered {
+    border-block-start: 1px solid
+      var(--st-component-structuredList-border, var(--st-semantic-border-subtle));
+  }
+
+  .st-structuredList__row {
+    align-items: baseline;
+    display: grid;
+    gap: var(--st-spacing-3, 0.75rem);
+    grid-template-columns: minmax(8rem, 1fr) 2fr;
+    padding: 0.75rem 0;
+  }
+
+  .st-structuredList--bordered .st-structuredList__row {
+    border-block-end: 1px solid
+      var(--st-component-structuredList-border, var(--st-semantic-border-subtle));
+  }
+
+  .st-structuredList__term {
+    color: var(--st-semantic-text-secondary);
+    font-weight: 600;
+    margin: 0;
+  }
+
+  .st-structuredList__definition {
+    margin: 0;
+  }
+</style>

package/dist/StructuredList.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+export interface StructuredListItem {
+    key: string;
+    value: string | Snippet;
+}
+import type { HTMLAttributes } from "svelte/elements";
+type StructuredListProps = Omit<HTMLAttributes<HTMLDListElement>, "class"> & {
+    items: StructuredListItem[];
+    bordered?: boolean;
+    class?: string;
+};
+declare const StructuredList: import("svelte").Component<StructuredListProps, {}, "">;
+type StructuredList = ReturnType<typeof StructuredList>;
+export default StructuredList;
+//# sourceMappingURL=StructuredList.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StructuredList.svelte.d.ts","sourceRoot":"","sources":["../src/lib/StructuredList.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;CACzB;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,mBAAmB,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GAAG;IAC3E,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA2CJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/Tag.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
   import type { HTMLAttributes } from "svelte/elements";
+  import { X } from "@lucide/svelte";
 
   type TagProps = Omit<HTMLAttributes<HTMLSpanElement>, "class"> & {
     tone?: "neutral" | "success" | "warning" | "error" | "info";
@@ -46,7 +47,7 @@
       {disabled}
       onclick={handleDismiss}
     >
-      <span aria-hidden="true">×</span>
+      <X size={14} strokeWidth={2} aria-hidden="true" />
     </button>
   {/if}
 </span>

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Tag.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC,GAAG;IAC/D,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAC5D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA0CJ,QAAA,MAAM,GAAG,8CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Tag.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Tag.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIpD,KAAK,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC,GAAG;IAC/D,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAC5D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA2CJ,QAAA,MAAM,GAAG,8CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}

package/dist/TileGroup.svelte

@@ -0,0 +1,179 @@
+<script lang="ts" module>
+  export interface TileGroupItem {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type TileGroupProps = Omit<
+    HTMLAttributes<HTMLFieldSetElement>,
+    "class" | "onchange"
+  > & {
+    items: TileGroupItem[];
+    value?: string;
+    name?: string;
+    legend?: string;
+    legendHidden?: boolean;
+    disabled?: boolean;
+    class?: string;
+    onchange?: (value: string) => void;
+  };
+
+  let {
+    items,
+    value = $bindable<string | undefined>(undefined),
+    name,
+    legend,
+    legendHidden = false,
+    disabled = false,
+    class: className,
+    onchange,
+    ...rest
+  }: TileGroupProps = $props();
+
+  const groupId = $props.id();
+  const groupName = $derived(name ?? `st-tileGroup-${groupId}`);
+
+  const classes = () =>
+    ["st-tileGroup", disabled ? "st-tileGroup--disabled" : null, className]
+      .filter(Boolean)
+      .join(" ");
+
+  function select(next: string, itemDisabled?: boolean) {
+    if (disabled || itemDisabled) return;
+    value = next;
+    onchange?.(next);
+  }
+</script>
+
+<fieldset {...rest} class={classes()} {disabled}>
+  {#if legend}
+    <legend class={legendHidden ? "st-tileGroup__legend st-tileGroup__legend--hidden" : "st-tileGroup__legend"}
+    >{legend}</legend>
+  {/if}
+  <div class="st-tileGroup__items">
+    {#each items as item (item.value)}
+      {@const checked = value === item.value}
+      <label
+        class="st-tileGroup__tile"
+        class:st-tileGroup__tile--checked={checked}
+        class:st-tileGroup__tile--disabled={item.disabled || disabled}
+      >
+        <input
+          type="radio"
+          class="st-tileGroup__input"
+          name={groupName}
+          value={item.value}
+          {checked}
+          disabled={item.disabled || disabled}
+          onchange={() => select(item.value, item.disabled)}
+        />
+        <span class="st-tileGroup__content">
+          <span class="st-tileGroup__label">{item.label}</span>
+          {#if item.description}
+            <span class="st-tileGroup__description">{item.description}</span>
+          {/if}
+        </span>
+      </label>
+    {/each}
+  </div>
+</fieldset>
+
+<style>
+  .st-tileGroup {
+    border: 0;
+    color: var(--st-semantic-text-primary);
+    margin: 0;
+    min-width: 0;
+    padding: 0;
+  }
+
+  .st-tileGroup__legend {
+    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
+    font-weight: 600;
+    margin-block-end: var(--st-spacing-2, 0.5rem);
+    padding: 0;
+  }
+
+  .st-tileGroup__legend--hidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
+  .st-tileGroup__items {
+    display: grid;
+    gap: var(--st-spacing-2, 0.5rem);
+    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  }
+
+  .st-tileGroup__tile {
+    background: var(--st-component-card-background, var(--st-semantic-surface-raised));
+    border: 1px solid
+      var(--st-component-card-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-card-radius, 0.5rem);
+    cursor: pointer;
+    display: grid;
+    gap: 0.5rem;
+    grid-template-columns: auto 1fr;
+    padding: 0.875rem 1rem;
+    transition:
+      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+      box-shadow var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+  }
+
+  .st-tileGroup__tile:hover:not(.st-tileGroup__tile--disabled) {
+    border-color: var(
+      --st-component-control-hoverBorder,
+      var(--st-semantic-border-strong)
+    );
+  }
+
+  .st-tileGroup__tile--checked {
+    border-color: var(
+      --st-component-control-focusRing,
+      var(--st-semantic-border-interactive)
+    );
+    box-shadow: 0 0 0 1px
+      var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+  }
+
+  .st-tileGroup__tile--disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  .st-tileGroup__input {
+    accent-color: var(
+      --st-component-control-focusRing,
+      var(--st-semantic-border-interactive)
+    );
+    margin: 0.25rem 0 0;
+  }
+
+  .st-tileGroup__content {
+    display: grid;
+    gap: 0.25rem;
+  }
+
+  .st-tileGroup__label {
+    font-size: 0.9375rem;
+    font-weight: 600;
+  }
+
+  .st-tileGroup__description {
+    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
+    font-size: 0.8125rem;
+  }
+</style>

package/dist/TileGroup.svelte.d.ts

@@ -0,0 +1,21 @@
+export interface TileGroupItem {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+import type { HTMLAttributes } from "svelte/elements";
+type TileGroupProps = Omit<HTMLAttributes<HTMLFieldSetElement>, "class" | "onchange"> & {
+    items: TileGroupItem[];
+    value?: string;
+    name?: string;
+    legend?: string;
+    legendHidden?: boolean;
+    disabled?: boolean;
+    class?: string;
+    onchange?: (value: string) => void;
+};
+declare const TileGroup: import("svelte").Component<TileGroupProps, {}, "value">;
+type TileGroup = ReturnType<typeof TileGroup>;
+export default TileGroup;
+//# sourceMappingURL=TileGroup.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TileGroup.svelte.d.ts","sourceRoot":"","sources":["../src/lib/TileGroup.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,cAAc,GAAG,IAAI,CACxB,cAAc,CAAC,mBAAmB,CAAC,EACnC,OAAO,GAAG,UAAU,CACrB,GAAG;IACF,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AA0DJ,QAAA,MAAM,SAAS,yDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}