@sentropic/design-system-svelte 0.3.0

package/dist/Switch.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from "svelte/elements";
+
+  type SwitchProps = Omit<HTMLInputAttributes, "class" | "role" | "type"> & {
+    label: string;
+    helperText?: string;
+    class?: string;
+  };
+
+  let { label, helperText, checked = false, class: className, ...rest }: SwitchProps = $props();
+  const classes = () => ["st-switch", className].filter(Boolean).join(" ");
+</script>
+
+<label class={classes()}>
+  <input {...rest} class="st-switch__input" type="checkbox" role="switch" {checked} aria-checked={checked ? "true" : "false"} />
+  <span class="st-switch__track" aria-hidden="true">
+    <span class="st-switch__thumb"></span>
+  </span>
+  <span class="st-switch__content">
+    <span class="st-switch__label">{label}</span>
+    {#if helperText}<span class="st-switch__help">{helperText}</span>{/if}
+  </span>
+</label>
+
+<style>
+  .st-switch {
+    align-items: center;
+    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
+    display: inline-grid;
+    gap: 0.75rem;
+    grid-template-columns: auto 1fr;
+    position: relative;
+  }
+
+  .st-switch__input {
+    height: 1.25rem;
+    margin: 0;
+    opacity: 0;
+    position: absolute;
+    width: 2.25rem;
+  }
+
+  .st-switch__track {
+    align-items: center;
+    background: var(--st-component-selection-switchTrack, var(--st-semantic-border-strong));
+    border-radius: var(--st-radius-pill, 999px);
+    display: inline-flex;
+    height: 1.25rem;
+    padding: 0.125rem;
+    transition: background var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+    width: 2.25rem;
+  }
+
+  .st-switch__thumb {
+    background: var(--st-component-selection-switchThumb, var(--st-semantic-surface-default));
+    border-radius: var(--st-radius-pill, 999px);
+    height: 1rem;
+    transform: translateX(0);
+    transition: transform var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+    width: 1rem;
+  }
+
+  .st-switch__input:checked + .st-switch__track {
+    background: var(--st-component-selection-switchTrackChecked, var(--st-semantic-action-primary));
+  }
+
+  .st-switch__input:checked + .st-switch__track .st-switch__thumb {
+    transform: translateX(1rem);
+  }
+
+  .st-switch__input:focus-visible + .st-switch__track {
+    box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+  }
+
+  .st-switch__content {
+    display: grid;
+    gap: 0.25rem;
+  }
+
+  .st-switch__label {
+    font-size: 0.9375rem;
+  }
+
+  .st-switch__help {
+    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
+    font-size: 0.8125rem;
+  }
+</style>

package/dist/Switch.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+type SwitchProps = Omit<HTMLInputAttributes, "class" | "role" | "type"> & {
+    label: string;
+    helperText?: string;
+    class?: string;
+};
+declare const Switch: import("svelte").Component<SwitchProps, {}, "">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;
+//# sourceMappingURL=Switch.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Switch.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,WAAW,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC,GAAG;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAwBJ,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/Table.svelte

@@ -0,0 +1,104 @@
+<script lang="ts" module>
+  export interface TableColumn {
+    key: string;
+    label: string;
+    align?: "left" | "right" | "center";
+  }
+
+  export type TableRow = Record<string, unknown>;
+</script>
+
+<script lang="ts">
+  import type { HTMLTableAttributes } from "svelte/elements";
+
+  type TableProps = Omit<HTMLTableAttributes, "class"> & {
+    columns: TableColumn[];
+    rows: TableRow[];
+    caption?: string;
+    class?: string;
+  };
+
+  let { columns, rows, caption, class: className, ...rest }: TableProps = $props();
+
+  const classes = () => ["st-table", className].filter(Boolean).join(" ");
+  const cellValue = (row: TableRow, key: string) => String(row[key] ?? "");
+</script>
+
+<div class="st-table-wrap">
+  <table {...rest} class={classes()}>
+    {#if caption}<caption>{caption}</caption>{/if}
+    <thead>
+      <tr>
+        {#each columns as column}
+          <th class:st-table__cell--right={column.align === "right"} class:st-table__cell--center={column.align === "center"} scope="col">
+            {column.label}
+          </th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody>
+      {#each rows as row}
+        <tr>
+          {#each columns as column}
+            <td class:st-table__cell--right={column.align === "right"} class:st-table__cell--center={column.align === "center"}>
+              {cellValue(row, column.key)}
+            </td>
+          {/each}
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
+
+<style>
+  .st-table-wrap {
+    overflow-x: auto;
+  }
+
+  .st-table {
+    background: var(--st-component-dataTable-rowBackground, var(--st-semantic-surface-default));
+    border: 1px solid var(--st-component-dataTable-border, var(--st-semantic-border-subtle));
+    border-collapse: separate;
+    border-radius: var(--st-component-dataTable-radius, 0.5rem);
+    border-spacing: 0;
+    color: var(--st-component-dataTable-text, var(--st-semantic-text-primary));
+    min-width: 100%;
+  }
+
+  .st-table caption {
+    color: var(--st-component-dataTable-captionText, var(--st-semantic-text-secondary));
+    font-weight: 600;
+    padding: 0.75rem;
+    text-align: left;
+  }
+
+  .st-table th,
+  .st-table td {
+    border-bottom: 1px solid var(--st-component-dataTable-border, var(--st-semantic-border-subtle));
+    padding: 0.75rem;
+    text-align: left;
+    vertical-align: top;
+  }
+
+  .st-table th {
+    background: var(--st-component-dataTable-headerBackground, var(--st-semantic-surface-subtle));
+    font-size: 0.875rem;
+    font-weight: 650;
+  }
+
+  .st-table tbody tr:hover {
+    background: var(--st-component-dataTable-rowHoverBackground, var(--st-semantic-surface-subtle));
+  }
+
+  .st-table tbody tr:last-child td {
+    border-bottom: 0;
+  }
+
+  .st-table__cell--right {
+    text-align: right;
+  }
+
+  .st-table__cell--center {
+    text-align: center;
+  }
+</style>

package/dist/Table.svelte.d.ts

@@ -0,0 +1,17 @@
+export interface TableColumn {
+    key: string;
+    label: string;
+    align?: "left" | "right" | "center";
+}
+export type TableRow = Record<string, unknown>;
+import type { HTMLTableAttributes } from "svelte/elements";
+type TableProps = Omit<HTMLTableAttributes, "class"> & {
+    columns: TableColumn[];
+    rows: TableRow[];
+    caption?: string;
+    class?: string;
+};
+declare const Table: import("svelte").Component<TableProps, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;
+//# sourceMappingURL=Table.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Table.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;CACrC;AAED,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAGjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,UAAU,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC,GAAG;IACrD,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA2CJ,QAAA,MAAM,KAAK,gDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/Tabs.svelte

@@ -0,0 +1,102 @@
+<script lang="ts" module>
+  export interface TabItem {
+    value: string;
+    label: string;
+    content: string;
+    disabled?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type TabsProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    items: TabItem[];
+    activeValue?: string;
+    label?: string;
+    class?: string;
+    onchange?: (value: string) => void;
+  };
+
+  let {
+    items,
+    activeValue,
+    label = "Tabs",
+    class: className,
+    onchange,
+    ...rest
+  }: TabsProps = $props();
+
+  let selected = $state<string | undefined>(undefined);
+  let current = $derived(
+    selected ?? activeValue ?? items.find((item) => !item.disabled)?.value ?? items[0]?.value
+  );
+  const classes = () => ["st-tabs", className].filter(Boolean).join(" ");
+  const activeItem = () => items.find((item) => item.value === current) ?? items[0];
+
+  function select(value: string): void {
+    selected = value;
+    onchange?.(value);
+  }
+</script>
+
+<section {...rest} class={classes()}>
+  <div class="st-tabs__list" role="tablist" aria-label={label}>
+    {#each items as item}
+      <button
+        class="st-tabs__tab"
+        class:st-tabs__tab--active={item.value === current}
+        type="button"
+        role="tab"
+        disabled={item.disabled}
+        aria-selected={item.value === current ? "true" : "false"}
+        onclick={() => select(item.value)}
+      >
+        {item.label}
+      </button>
+    {/each}
+  </div>
+  <div class="st-tabs__panel" role="tabpanel">
+    {activeItem()?.content}
+  </div>
+</section>
+
+<style>
+  .st-tabs {
+    color: var(--st-component-tabs-activeText, var(--st-semantic-text-primary));
+    display: grid;
+    gap: var(--st-spacing-4, 1rem);
+  }
+
+  .st-tabs__list {
+    border-bottom: 1px solid var(--st-component-tabs-border, var(--st-semantic-border-subtle));
+    display: flex;
+    gap: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-tabs__tab {
+    background: transparent;
+    border: 0;
+    border-bottom: 2px solid transparent;
+    color: var(--st-component-tabs-inactiveText, var(--st-semantic-text-secondary));
+    cursor: pointer;
+    font: inherit;
+    font-weight: 600;
+    padding: 0.75rem 0.25rem;
+  }
+
+  .st-tabs__tab--active {
+    border-bottom-color: var(--st-component-tabs-indicator, var(--st-semantic-action-primary));
+    color: var(--st-component-tabs-activeText, var(--st-semantic-text-primary));
+  }
+
+  .st-tabs__tab:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  .st-tabs__panel {
+    background: var(--st-component-tabs-panelBackground, var(--st-semantic-surface-default));
+    line-height: 1.5;
+  }
+</style>

package/dist/Tabs.svelte.d.ts

@@ -0,0 +1,18 @@
+export interface TabItem {
+    value: string;
+    label: string;
+    content: string;
+    disabled?: boolean;
+}
+import type { HTMLAttributes } from "svelte/elements";
+type TabsProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    items: TabItem[];
+    activeValue?: string;
+    label?: string;
+    class?: string;
+    onchange?: (value: string) => void;
+};
+declare const Tabs: import("svelte").Component<TabsProps, {}, "">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;
+//# sourceMappingURL=Tabs.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Tabs.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAC5D,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AA8CJ,QAAA,MAAM,IAAI,+CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/Textarea.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import type { HTMLTextareaAttributes } from "svelte/elements";
+
+  type TextareaProps = Omit<HTMLTextareaAttributes, "class"> & {
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    invalid?: boolean;
+    class?: string;
+  };
+
+  let {
+    label,
+    helperText,
+    errorText,
+    invalid = false,
+    class: className,
+    ...rest
+  }: TextareaProps = $props();
+
+  const fieldClasses = () => ["st-field", className].filter(Boolean).join(" ");
+  const isInvalid = () => invalid || Boolean(errorText);
+</script>
+
+<div class={fieldClasses()}>
+  <label class="st-field__control">
+    {#if label}<span class="st-field__label">{label}</span>{/if}
+    <textarea {...rest} class="st-textarea" aria-invalid={isInvalid() ? "true" : undefined}></textarea>
+  </label>
+  {#if errorText}
+    <span class="st-field__error">{errorText}</span>
+  {:else if helperText}
+    <span class="st-field__help">{helperText}</span>
+  {/if}
+</div>
+
+<style>
+  .st-field {
+    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
+    display: grid;
+    gap: var(--st-component-field-gap, 0.5rem);
+    max-width: var(--st-component-field-maxWidth, 28rem);
+  }
+
+  .st-field__control {
+    display: grid;
+    gap: var(--st-component-field-gap, 0.5rem);
+  }
+
+  .st-field__label {
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+
+  .st-field__help,
+  .st-field__error {
+    font-size: 0.8125rem;
+    line-height: 1.4;
+  }
+
+  .st-field__help {
+    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
+  }
+
+  .st-field__error {
+    color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
+  }
+
+  .st-textarea {
+    background: var(--st-component-control-background, var(--st-semantic-surface-default));
+    border: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-control-radius, 0.375rem);
+    color: var(--st-component-control-text, var(--st-semantic-text-primary));
+    font: inherit;
+    min-height: 6rem;
+    min-width: 0;
+    padding: 0.625rem 0.75rem;
+    resize: vertical;
+    width: 100%;
+  }
+
+  .st-textarea:focus-visible {
+    border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline: none;
+  }
+
+  .st-textarea[aria-invalid="true"] {
+    border-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
+  }
+
+  .st-textarea:disabled {
+    background: var(--st-component-control-disabledBackground, var(--st-semantic-surface-subtle));
+    color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
+    cursor: not-allowed;
+  }
+</style>

package/dist/Textarea.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLTextareaAttributes } from "svelte/elements";
+type TextareaProps = Omit<HTMLTextareaAttributes, "class"> & {
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    invalid?: boolean;
+    class?: string;
+};
+declare const Textarea: import("svelte").Component<TextareaProps, {}, "">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;
+//# sourceMappingURL=Textarea.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Textarea.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAG5D,KAAK,aAAa,GAAG,IAAI,CAAC,sBAAsB,EAAE,OAAO,CAAC,GAAG;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAkCJ,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/ThemeProvider.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { compileTheme, sentTechTheme, type TenantTheme } from "@sentropic/design-system-themes";
+
+  type ThemeProviderProps = {
+    theme?: TenantTheme;
+    namespace?: string;
+    children?: Snippet;
+  };
+
+  let { theme = sentTechTheme, namespace = "st", children }: ThemeProviderProps = $props();
+
+  let css = $derived(compileTheme(theme, { selector: `[data-st-theme="${theme.id}"]`, namespace }));
+</script>
+
+<svelte:head>
+  {@html `<style data-st-theme-provider="${theme.id}">${css}</style>`}
+</svelte:head>
+
+<div data-st-theme={theme.id}>
+  {@render children?.()}
+</div>

package/dist/ThemeProvider.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+import { type TenantTheme } from "@sentropic/design-system-themes";
+type ThemeProviderProps = {
+    theme?: TenantTheme;
+    namespace?: string;
+    children?: Snippet;
+};
+declare const ThemeProvider: import("svelte").Component<ThemeProviderProps, {}, "">;
+type ThemeProvider = ReturnType<typeof ThemeProvider>;
+export default ThemeProvider;
+//# sourceMappingURL=ThemeProvider.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ThemeProvider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAA+B,KAAK,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAG9F,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAqBJ,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/Toast.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type ToastProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    tone?: "info" | "success" | "warning" | "error";
+    title: string;
+    message?: string;
+    class?: string;
+    actions?: Snippet;
+  };
+
+  let { tone = "info", title, message, class: className, actions, ...rest }: ToastProps = $props();
+  const classes = () => ["st-toast", `st-toast--${tone}`, className].filter(Boolean).join(" ");
+  const role = () => (tone === "error" ? "alert" : "status");
+</script>
+
+<section {...rest} class={classes()} role={role()}>
+  <div class="st-toast__content">
+    <h2 class="st-toast__title">{title}</h2>
+    {#if message}<p class="st-toast__message">{message}</p>{/if}
+  </div>
+  {#if actions}
+    <div class="st-toast__actions">
+      {@render actions()}
+    </div>
+  {/if}
+</section>
+
+<style>
+  .st-toast {
+    background: var(--st-component-toast-background, var(--st-semantic-surface-raised));
+    border: 1px solid var(--st-component-toast-border, var(--st-semantic-border-subtle));
+    border-left-width: 0.25rem;
+    border-radius: var(--st-component-toast-radius, 0.5rem);
+    box-shadow: var(--st-component-toast-shadow, 0 18px 45px rgb(15 23 42 / 0.18));
+    color: var(--st-component-toast-text, var(--st-semantic-text-primary));
+    display: flex;
+    gap: var(--st-spacing-4, 1rem);
+    justify-content: space-between;
+    padding: var(--st-spacing-4, 1rem);
+    width: min(100%, 28rem);
+    z-index: var(--st-component-toast-zIndex, 100);
+  }
+
+  .st-toast--info {
+    border-left-color: var(--st-component-toast-infoBorder, var(--st-semantic-feedback-info));
+  }
+
+  .st-toast--success {
+    border-left-color: var(--st-component-toast-successBorder, var(--st-semantic-feedback-success));
+  }
+
+  .st-toast--warning {
+    border-left-color: var(--st-component-toast-warningBorder, var(--st-semantic-feedback-warning));
+  }
+
+  .st-toast--error {
+    border-left-color: var(--st-component-toast-errorBorder, var(--st-semantic-feedback-error));
+  }
+
+  .st-toast__content {
+    display: grid;
+    gap: 0.25rem;
+  }
+
+  .st-toast__title {
+    font-size: 0.9375rem;
+    margin: 0;
+  }
+
+  .st-toast__message {
+    color: var(--st-semantic-text-secondary);
+    font-size: 0.875rem;
+    line-height: 1.5;
+    margin: 0;
+  }
+
+  .st-toast__actions {
+    align-items: start;
+    display: flex;
+    gap: var(--st-spacing-2, 0.5rem);
+  }
+</style>

package/dist/Toast.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type ToastProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    tone?: "info" | "success" | "warning" | "error";
+    title: string;
+    message?: string;
+    class?: string;
+    actions?: Snippet;
+};
+declare const Toast: import("svelte").Component<ToastProps, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;
+//# sourceMappingURL=Toast.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Toast.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAC7D,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA2BJ,QAAA,MAAM,KAAK,gDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/Tooltip.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type TooltipProps = Omit<HTMLAttributes<HTMLSpanElement>, "class"> & {
+    content: string;
+    placement?: "top" | "bottom";
+    class?: string;
+    children?: Snippet;
+  };
+
+  let { content, placement = "top", class: className, children, ...rest }: TooltipProps = $props();
+  const classes = () => ["st-tooltip", `st-tooltip--${placement}`, className].filter(Boolean).join(" ");
+</script>
+
+<span {...rest} class={classes()}>
+  <span class="st-tooltip__trigger">
+    {@render children?.()}
+  </span>
+  <span class="st-tooltip__content" role="tooltip">{content}</span>
+</span>
+
+<style>
+  .st-tooltip {
+    display: inline-flex;
+    position: relative;
+  }
+
+  .st-tooltip__trigger {
+    display: inline-flex;
+  }
+
+  .st-tooltip__content {
+    background: var(--st-component-tooltip-background, var(--st-semantic-surface-inverse));
+    border-radius: var(--st-component-tooltip-radius, 0.375rem);
+    box-shadow: var(--st-component-tooltip-shadow, 0 8px 24px rgb(15 23 42 / 0.12));
+    color: var(--st-component-tooltip-text, var(--st-semantic-text-inverse));
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    max-width: 16rem;
+    opacity: 0;
+    padding: 0.375rem 0.5rem;
+    pointer-events: none;
+    position: absolute;
+    transition: opacity var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+    width: max-content;
+    z-index: var(--st-component-tooltip-zIndex, 80);
+  }
+
+  .st-tooltip--top .st-tooltip__content {
+    bottom: calc(100% + 0.5rem);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .st-tooltip--bottom .st-tooltip__content {
+    left: 50%;
+    top: calc(100% + 0.5rem);
+    transform: translateX(-50%);
+  }
+
+  .st-tooltip:hover .st-tooltip__content,
+  .st-tooltip:focus-within .st-tooltip__content {
+    opacity: 1;
+  }
+</style>