@streamscloud/kit 0.2.42 → 0.9.1

package/dist/ui/textarea/cmp.textarea.svelte

@@ -0,0 +1,254 @@
+<script lang="ts">import { HtmlHelper } from '../../core/utils';
+import { InputEmojiPicker } from '../_internal/input-emoji-picker';
+const { value, size = 'md', disabled = false, readonly = false, inert = false, error = false, borderless = false, emoji = false, singleLine = false, submitOnEnter = false, placeholder = '', name = '', id = null, autofocus = false, maxLength = null, rows = 3, autoresize = true, maxRows = 12, autocomplete, spellcheck, 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel, 'aria-required': ariaRequired, on } = $props();
+let textareaEl = $state.raw(undefined);
+const sanitizeLineBreaks = (text) => text.replace(/[\r\n]+/g, ' ');
+const valueParsed = $derived(singleLine && value ? sanitizeLineBreaks(value) : (value ?? ''));
+const effectiveRows = $derived(singleLine ? 1 : rows);
+/** Imperative API exposed via `bind:this` on `<Textarea>`. */
+export const focus = () => textareaEl?.focus();
+export const select = () => textareaEl?.select();
+const resize = () => {
+    if (!textareaEl || !autoresize) {
+        return;
+    }
+    textareaEl.style.overflow = 'hidden';
+    textareaEl.style.height = 'auto';
+    const styles = getComputedStyle(textareaEl);
+    const lineHeight = parseFloat(styles.lineHeight) || parseFloat(styles.fontSize) * 1.4;
+    const paddingY = parseFloat(styles.paddingTop) + parseFloat(styles.paddingBottom);
+    const max = lineHeight * maxRows + paddingY;
+    textareaEl.style.height = Math.min(textareaEl.scrollHeight, max) + 'px';
+    textareaEl.style.overflow = '';
+};
+const initTextarea = (node) => {
+    textareaEl = node;
+    if (autofocus) {
+        node.focus();
+    }
+    on?.mounted?.({ textarea: node });
+    resize();
+};
+$effect(() => {
+    void valueParsed;
+    resize();
+});
+const handleInput = () => {
+    if (!textareaEl) {
+        return;
+    }
+    resize();
+    on?.input?.(textareaEl.value);
+};
+const handleChange = () => {
+    if (!textareaEl) {
+        return;
+    }
+    on?.change?.(textareaEl.value);
+};
+const handleBeforeInput = (e) => {
+    if (!singleLine || !textareaEl) {
+        return;
+    }
+    if (e.inputType === 'insertLineBreak' || e.inputType === 'insertParagraph') {
+        e.preventDefault();
+        return;
+    }
+    if (e.data && /[\r\n]/.test(e.data)) {
+        e.preventDefault();
+        const start = textareaEl.selectionStart;
+        const end = textareaEl.selectionEnd;
+        textareaEl.setRangeText(sanitizeLineBreaks(e.data), start, end, 'end');
+        textareaEl.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+};
+const handleKeydown = (e) => {
+    if (submitOnEnter && e.key === 'Enter' && !(e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)) {
+        e.preventDefault();
+        on?.submit?.();
+    }
+};
+const handleBlur = () => {
+    if (textareaEl) {
+        textareaEl.value = valueParsed;
+    }
+    on?.blur?.();
+};
+const handleEmojiSelect = (emojiChar) => {
+    if (textareaEl) {
+        HtmlHelper.pasteIntoInput(emojiChar, textareaEl);
+    }
+};
+const focusTextarea = () => textareaEl?.focus();
+</script>
+
+<div
+  class="textarea textarea--{size}"
+  class:textarea--disabled={disabled}
+  class:textarea--readonly={readonly}
+  class:textarea--inert={inert}
+  class:textarea--error={error}
+  class:textarea--borderless={borderless}
+  onclick={focusTextarea}
+  onkeydown={() => undefined}
+  role="none">
+  <!-- svelte-ignore a11y_autofocus -->
+  <textarea
+    use:initTextarea
+    class="textarea__el"
+    name={name}
+    id={id}
+    placeholder={placeholder}
+    disabled={disabled}
+    readonly={readonly}
+    inert={inert}
+    autofocus={autofocus}
+    autocomplete={autocomplete}
+    spellcheck={spellcheck}
+    rows={effectiveRows}
+    value={valueParsed}
+    maxlength={maxLength}
+    aria-invalid={error ? 'true' : undefined}
+    aria-describedby={ariaDescribedby}
+    aria-label={ariaLabel}
+    aria-required={ariaRequired ? 'true' : undefined}
+    oninput={handleInput}
+    onchange={handleChange}
+    onbeforeinput={handleBeforeInput}
+    onkeydown={handleKeydown}
+    onblur={handleBlur}
+    onfocus={() => on?.focus?.()}></textarea>
+
+  {#if emoji}
+    <InputEmojiPicker size={size} on={{ select: handleEmojiSelect }} />
+  {/if}
+</div>
+
+<!--
+@component
+Multi-line text input. Auto-resizes to content between `rows` and `maxRows` by default.
+Set `singleLine` to strip line breaks (paste-safe), `submitOnEnter` to fire `on.submit` on
+plain Enter, `emoji` to show the inline emoji picker. Imperative `focus()` / `select()`
+exposed via `bind:this`.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--textarea--padding-block` | Vertical padding | per size |
+| `--sc-kit--textarea--padding-inline` | Horizontal padding | per size |
+| `--sc-kit--textarea--width` | Container width | `100%` |
+| `--sc-kit--textarea--background` | Container background | `var(--sc-kit--color--bg--field)` |
+| `--sc-kit--textarea--background--disabled` | Disabled / inert background | `var(--sc-kit--color--bg--field-alt)` |
+| `--sc-kit--textarea--border-color` | Border color | `var(--sc-kit--color--border--field)` |
+| `--sc-kit--textarea--border-color--hover` | Border color on hover | `var(--sc-kit--color--border--strong)` |
+| `--sc-kit--textarea--border-color--error` | Border color in error state | `var(--sc-kit--color--danger)` |
+| `--sc-kit--textarea--border-radius` | Border radius | `var(--sc-kit--radius--sm)` |
+| `--sc-kit--textarea--underline-color` | Inset bottom-underline (transparent default, accent on focus-within, danger on error) | `transparent` |
+| `--sc-kit--textarea--font-size` | Text font size | per size |
+| `--sc-kit--textarea--color` | Text color | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--textarea--placeholder--color` | Placeholder text color | `var(--sc-kit--color--text--placeholder)` |
+-->
+
+<style>.textarea {
+  --_ta--padding-block: var(--sc-kit--textarea--padding-block, 0.5rem);
+  --_ta--padding-inline: var(--sc-kit--textarea--padding-inline, var(--sc-kit--field--padding-inline--md));
+  --_ta--width: var(--sc-kit--textarea--width, 100%);
+  --_ta--background: var(--sc-kit--textarea--background, var(--sc-kit--color--bg--field));
+  --_ta--background-disabled: var(--sc-kit--textarea--background--disabled, var(--sc-kit--color--bg--field-alt));
+  --_ta--border-color: var(--sc-kit--textarea--border-color, var(--sc-kit--color--border--field));
+  --_ta--border-color-hover: var(--sc-kit--textarea--border-color--hover, var(--sc-kit--color--border--strong));
+  --_ta--border-color-error: var(--sc-kit--textarea--border-color--error, var(--sc-kit--color--danger));
+  --_ta--border-radius: var(--sc-kit--textarea--border-radius, var(--sc-kit--radius--sm));
+  --_ta--underline-color: var(--sc-kit--textarea--underline-color, transparent);
+  --_ta--font-size: var(--sc-kit--textarea--font-size, var(--sc-kit--font-size--md));
+  --_ta--color: var(--sc-kit--textarea--color, var(--sc-kit--color--text--primary));
+  --_ta--placeholder-color: var(--sc-kit--textarea--placeholder--color, var(--sc-kit--color--text--placeholder));
+  --_--input-affordance--opacity: 0;
+  --_--input-affordance--scale: 0;
+}
+.textarea:where(:hover), .textarea:where(:focus-within) {
+  --_--input-affordance--opacity: 1;
+  --_--input-affordance--scale: 1;
+}
+.textarea {
+  --_--input-affordance--scale: 1;
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  width: var(--_ta--width);
+  max-width: 100%;
+  padding: var(--_ta--padding-block) var(--_ta--padding-inline);
+  background: var(--_ta--background);
+  border: 1px solid var(--_ta--border-color);
+  border-radius: var(--_ta--border-radius);
+  color: var(--_ta--color);
+  font-size: var(--_ta--font-size);
+  line-height: var(--sc-kit--leading--normal);
+  cursor: text;
+  box-shadow: inset 0 -0.13em var(--_ta--underline-color);
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.textarea--sm {
+  --sc-kit--textarea--padding-block: 0.375rem;
+  --sc-kit--textarea--padding-inline: var(--sc-kit--field--padding-inline--sm);
+  --sc-kit--textarea--font-size: var(--sc-kit--font-size--sm);
+}
+.textarea--md {
+  --sc-kit--textarea--padding-block: 0.5rem;
+  --sc-kit--textarea--padding-inline: var(--sc-kit--field--padding-inline--md);
+  --sc-kit--textarea--font-size: var(--sc-kit--font-size--md);
+}
+.textarea--lg {
+  --sc-kit--textarea--padding-block: 0.625rem;
+  --sc-kit--textarea--padding-inline: var(--sc-kit--field--padding-inline--lg);
+  --sc-kit--textarea--font-size: var(--sc-kit--font-size--lg);
+}
+.textarea:where(:hover) {
+  --sc-kit--textarea--border-color: var(--_ta--border-color-hover);
+}
+.textarea:where(:focus-within) {
+  --sc-kit--textarea--underline-color: var(--sc-kit--color--accent);
+}
+.textarea--error {
+  --sc-kit--textarea--border-color: var(--_ta--border-color-error);
+  --sc-kit--textarea--underline-color: var(--sc-kit--color--danger);
+}
+.textarea--disabled, .textarea--readonly, .textarea--inert {
+  --sc-kit--textarea--border-color: unset;
+  --sc-kit--textarea--underline-color: unset;
+  --_--input-affordance--opacity: 0;
+  --_--input-affordance--scale: 0;
+  cursor: default;
+}
+.textarea--disabled {
+  --sc-kit--textarea--background: var(--_ta--background-disabled);
+  --sc-kit--textarea--color: var(--sc-kit--color--text--muted);
+}
+.textarea--borderless {
+  --sc-kit--textarea--background: transparent;
+  --sc-kit--textarea--border-color: transparent;
+  --sc-kit--textarea--underline-color: transparent;
+  box-shadow: none;
+}
+.textarea__el {
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  resize: none;
+}
+.textarea__el::placeholder {
+  color: var(--_ta--placeholder-color);
+}
+.textarea__el:disabled {
+  cursor: default;
+}</style>

package/dist/ui/textarea/cmp.textarea.svelte.d.ts

@@ -0,0 +1,80 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+type Props = {
+    value: string | null | undefined;
+    /** @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    /** Non-editable but selectable. */
+    readonly?: boolean;
+    /** Visual display mode — non-focusable, no hover/focus animations. */
+    inert?: boolean;
+    /** Visual error state — also sets `aria-invalid="true"`. */
+    error?: boolean;
+    /** Strip border + background + focus underline. */
+    borderless?: boolean;
+    /** Show emoji-picker trigger inside the textarea. */
+    emoji?: boolean;
+    /**
+     * Single-line mode: starts at 1 row, strips Enter and pasted line breaks. Long text
+     * still soft-wraps and the textarea grows vertically up to `maxRows` — that's the
+     * point of using a textarea over `<input>` for no-enter fields like article titles.
+     */
+    singleLine?: boolean;
+    /** Fire `on.submit` on Enter (without modifiers). Shift+Enter still inserts a newline. */
+    submitOnEnter?: boolean;
+    placeholder?: string;
+    name?: string;
+    id?: string | null;
+    autofocus?: boolean;
+    maxLength?: number | null;
+    /** Minimum visible rows. @default 3 */
+    rows?: number;
+    /** Auto-grow to content up to maxRows. @default true */
+    autoresize?: boolean;
+    /** Maximum auto-grown rows before scrolling kicks in. @default 12 */
+    maxRows?: number;
+    autocomplete?: HTMLTextareaAttributes['autocomplete'];
+    spellcheck?: boolean;
+    'aria-describedby'?: string;
+    'aria-label'?: string;
+    'aria-required'?: boolean;
+    on?: {
+        input?: (value: string) => void;
+        change?: (value: string) => void;
+        submit?: () => void;
+        mounted?: (data: {
+            textarea: HTMLTextAreaElement;
+        }) => void;
+        blur?: () => void;
+        focus?: () => void;
+    };
+};
+/**
+ * Multi-line text input. Auto-resizes to content between `rows` and `maxRows` by default.
+ * Set `singleLine` to strip line breaks (paste-safe), `submitOnEnter` to fire `on.submit` on
+ * plain Enter, `emoji` to show the inline emoji picker. Imperative `focus()` / `select()`
+ * exposed via `bind:this`.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--textarea--padding-block` | Vertical padding | per size |
+ * | `--sc-kit--textarea--padding-inline` | Horizontal padding | per size |
+ * | `--sc-kit--textarea--width` | Container width | `100%` |
+ * | `--sc-kit--textarea--background` | Container background | `var(--sc-kit--color--bg--field)` |
+ * | `--sc-kit--textarea--background--disabled` | Disabled / inert background | `var(--sc-kit--color--bg--field-alt)` |
+ * | `--sc-kit--textarea--border-color` | Border color | `var(--sc-kit--color--border--field)` |
+ * | `--sc-kit--textarea--border-color--hover` | Border color on hover | `var(--sc-kit--color--border--strong)` |
+ * | `--sc-kit--textarea--border-color--error` | Border color in error state | `var(--sc-kit--color--danger)` |
+ * | `--sc-kit--textarea--border-radius` | Border radius | `var(--sc-kit--radius--sm)` |
+ * | `--sc-kit--textarea--underline-color` | Inset bottom-underline (transparent default, accent on focus-within, danger on error) | `transparent` |
+ * | `--sc-kit--textarea--font-size` | Text font size | per size |
+ * | `--sc-kit--textarea--color` | Text color | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--textarea--placeholder--color` | Placeholder text color | `var(--sc-kit--color--text--placeholder)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {
+    /** Imperative API exposed via `bind:this` on `<Textarea>`. */ focus: () => void;
+    select: () => void;
+}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/textarea/index.d.ts

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

package/dist/ui/textarea/index.js

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

package/dist/ui/time-ago/cmp.time-ago.svelte

@@ -61,7 +61,7 @@ const disableTimeout = () => {
 };
 </script>
 
-<span>
+<span class="time-ago">
   {#if timeSpan}
     {timeSpan}
   {/if}
@@ -69,6 +69,9 @@ const disableTimeout = () => {
 
 <!--
 @component
-Displays a human-readable relative time string (e.g. "5 minutes ago") that auto-updates.
-Falls back to an absolute date after the threshold is exceeded.
+Displays a human-readable relative time string (e.g. "5 minutes ago") that auto-updates on a self-scheduled
+timer. Falls back to an absolute date/time after `thresholdMinutes`.
+
+Inherits typography from the parent — pass `font-size` / `color` through CSS on a surrounding element to
+restyle. The host element exposes no public CSS API of its own.
 -->

package/dist/ui/time-ago/cmp.time-ago.svelte.d.ts

@@ -5,8 +5,11 @@ type Props = {
     thresholdMinutes?: number;
 };
 /**
- * Displays a human-readable relative time string (e.g. "5 minutes ago") that auto-updates.
- * Falls back to an absolute date after the threshold is exceeded.
+ * Displays a human-readable relative time string (e.g. "5 minutes ago") that auto-updates on a self-scheduled
+ * timer. Falls back to an absolute date/time after `thresholdMinutes`.
+ *
+ * Inherits typography from the parent — pass `font-size` / `color` through CSS on a surrounding element to
+ * restyle. The host element exposes no public CSS API of its own.
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/toast/cmp.toast-item.svelte

@@ -0,0 +1,191 @@
+<script lang="ts">import { Icon } from '../icon';
+import { ToastLocalization } from './toast-localization';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_12_regular.svg?raw';
+const { toast, on } = $props();
+const localization = new ToastLocalization();
+let dragX = $state(0);
+let dragging = $state(false);
+let pointerId = null;
+let startX = 0;
+const SWIPE_THRESHOLD = 80;
+const handlePointerDown = (event) => {
+    if (!toast.swipeable) {
+        return;
+    }
+    if (event.button !== 0) {
+        return;
+    }
+    pointerId = event.pointerId;
+    startX = event.clientX;
+    dragging = true;
+    event.currentTarget.setPointerCapture(event.pointerId);
+};
+const handlePointerMove = (event) => {
+    if (!dragging || event.pointerId !== pointerId) {
+        return;
+    }
+    dragX = event.clientX - startX;
+};
+const handlePointerUp = (event) => {
+    if (!dragging || event.pointerId !== pointerId) {
+        return;
+    }
+    dragging = false;
+    pointerId = null;
+    if (Math.abs(dragX) > SWIPE_THRESHOLD) {
+        on.dismiss();
+        return;
+    }
+    dragX = 0;
+};
+const handleClose = (event) => {
+    event.stopPropagation();
+    on.dismiss();
+};
+const handleBodyClick = (event) => {
+    if (!toast.onClick) {
+        return;
+    }
+    const target = event.target;
+    if (target?.closest('button, a, input, textarea, select')) {
+        return;
+    }
+    toast.onClick();
+};
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div
+  class="toast toast--{toast.variant}"
+  class:toast--dragging={dragging}
+  class:toast--clickable={!!toast.onClick}
+  role="status"
+  aria-live="polite"
+  style:transform="translateX({dragX}px)"
+  style:opacity={dragging && Math.abs(dragX) > 0 ? Math.max(0.3, 1 - Math.abs(dragX) / 200) : 1}
+  onclick={handleBodyClick}
+  onpointerdown={handlePointerDown}
+  onpointermove={handlePointerMove}
+  onpointerup={handlePointerUp}
+  onpointercancel={handlePointerUp}>
+  <div class="toast__indicator" aria-hidden="true"></div>
+  <div class="toast__body">
+    <div class="toast__message">
+      {#if typeof toast.message === 'string'}
+        {toast.message}
+      {:else}
+        {@render toast.message()}
+      {/if}
+    </div>
+    {#if toast.description}
+      <div class="toast__description">{toast.description}</div>
+    {/if}
+  </div>
+  {#if toast.closable}
+    <button type="button" class="toast__close" aria-label={localization.dismiss} onclick={handleClose} onpointerdown={(e) => e.stopPropagation()}>
+      <Icon src={IconDismiss} />
+    </button>
+  {/if}
+</div>
+
+<style>.toast {
+  --_toast--background: var(--sc-kit--toast--background, var(--sc-kit--color--bg--panel));
+  --_toast--color: var(--sc-kit--toast--color, var(--sc-kit--color--text--primary));
+  --_toast--description-color: var(--sc-kit--toast--description--color, var(--sc-kit--color--text--secondary));
+  --_toast--border-color: var(--sc-kit--toast--border-color, var(--sc-kit--color--border));
+  --_toast--border-radius: var(--sc-kit--toast--border-radius, var(--sc-kit--radius--md));
+  --_toast--padding-block: var(--sc-kit--toast--padding-block, var(--sc-kit--space--3));
+  --_toast--padding-inline: var(--sc-kit--toast--padding-inline, var(--sc-kit--space--4));
+  --_toast--gap: var(--sc-kit--toast--gap, var(--sc-kit--space--3));
+  --_toast--shadow: var(--sc-kit--toast--shadow, var(--sc-kit--shadow--lg));
+  --_toast--indicator-color: var(--sc-kit--toast--indicator-color, var(--sc-kit--color--accent));
+  pointer-events: auto;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--_toast--gap);
+  width: 100%;
+  min-width: 0;
+  padding: var(--_toast--padding-block) var(--_toast--padding-inline);
+  color: var(--_toast--color);
+  background: var(--_toast--background);
+  border: 1px solid var(--_toast--border-color);
+  border-radius: var(--_toast--border-radius);
+  box-shadow: var(--_toast--shadow);
+  cursor: default;
+  user-select: none;
+  transition: transform var(--sc-kit--duration--base) var(--sc-kit--ease--default), opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.toast--clickable {
+  cursor: pointer;
+}
+.toast--dragging {
+  cursor: grabbing;
+  transition: none;
+}
+.toast--info {
+  --sc-kit--toast--indicator-color: var(--sc-kit--color--accent);
+}
+.toast--success {
+  --sc-kit--toast--indicator-color: var(--sc-kit--color--success);
+}
+.toast--warning {
+  --sc-kit--toast--indicator-color: var(--sc-kit--color--warning);
+}
+.toast--error {
+  --sc-kit--toast--indicator-color: var(--sc-kit--color--danger);
+}
+.toast__indicator {
+  flex-shrink: 0;
+  width: 0.25rem;
+  align-self: stretch;
+  background: var(--_toast--indicator-color);
+  border-radius: 0.125rem;
+}
+.toast__body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+.toast__message {
+  font-size: var(--sc-kit--font-size--md);
+  line-height: var(--sc-kit--line-height--md);
+  font-weight: var(--sc-kit--font-weight--medium);
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.toast__description {
+  font-size: var(--sc-kit--font-size--sm);
+  line-height: var(--sc-kit--line-height--sm);
+  color: var(--_toast--description-color);
+  white-space: pre-line;
+  word-break: break-word;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+.toast__close {
+  --sc-kit--icon--size: 0.75rem;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  background: transparent;
+  color: var(--sc-kit--color--text--muted);
+  border: none;
+  border-radius: var(--sc-kit--radius--sm);
+  cursor: pointer;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.toast__close:hover {
+  background: var(--sc-kit--color--bg--hover);
+  color: var(--sc-kit--color--text--primary);
+}</style>

package/dist/ui/{form-group/cmp.form-group-note.svelte.d.ts → toast/cmp.toast-item.svelte.d.ts}

@@ -1,6 +1,9 @@
-import type { Snippet } from 'svelte';
+import type { Toast } from './types';
 type Props = {
-    children: Snippet;
+    toast: Toast;
+    on: {
+        dismiss: () => void;
+    };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/toast/cmp.toaster.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">import ToastItem from './cmp.toast-item.svelte';
+import { toastStore } from './toast-store.svelte';
+const { id = '', position = 'bottom-right' } = $props();
+let containerEl = $state();
+const toasts = $derived(toastStore.toasts(id));
+$effect(() => {
+    toastStore.registerMount(id);
+    return () => {
+        toastStore.unregisterMount(id);
+    };
+});
+$effect(() => {
+    if (!containerEl) {
+        return;
+    }
+    if (!('showPopover' in containerEl)) {
+        return;
+    }
+    const hasToasts = toasts.length > 0;
+    const isOpen = containerEl.matches(':popover-open');
+    try {
+        if (hasToasts && !isOpen) {
+            containerEl.showPopover();
+        }
+        else if (!hasToasts && isOpen) {
+            containerEl.hidePopover();
+        }
+    }
+    catch {
+        // SSR / unsupported / mid-transition; ignore.
+    }
+});
+</script>
+
+<div bind:this={containerEl} popover="manual" class="toaster toaster--{position}" aria-live="polite" aria-atomic="false">
+  {#each toasts as t (t.id)}
+    <ToastItem toast={t} on={{ dismiss: () => toastStore.dismiss(t.id, id) }} />
+  {/each}
+</div>
+
+<!--
+@component
+Toaster — renders toasts pushed via the `Toastr` static API. Mount once at
+the root of your app for the default container, or with an explicit `id` to
+route specific toasts there. Uses the browser Popover API to render in the
+top layer above page content.
+
+### Props
+| Prop | Type | Description |
+|---|---|---|
+| `id` | `string` | Container id; default `''` |
+| `position` | `ToastrPosition` | One of `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`. Default `bottom-right` |
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--toaster--gap` | Vertical gap between toasts | `var(--sc-kit--space--2)` |
+| `--sc-kit--toaster--margin` | Distance from viewport edge | `var(--sc-kit--space--4)` |
+| `--sc-kit--toaster--max-width` | Max toast width | `420px` |
+-->
+
+<style>.toaster {
+  --_toaster--gap: var(--sc-kit--toaster--gap, var(--sc-kit--space--2));
+  --_toaster--margin: var(--sc-kit--toaster--margin, var(--sc-kit--space--4));
+  --_toaster--max-width: var(--sc-kit--toaster--max-width, 26.25rem);
+  position: fixed;
+  inset: unset;
+  z-index: var(--sc-kit--z-index--toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--_toaster--gap);
+  width: 100%;
+  max-width: var(--_toaster--max-width);
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: none;
+  pointer-events: none;
+  overflow: visible;
+}
+.toaster:popover-open {
+  display: flex;
+}
+.toaster--top-right {
+  top: var(--_toaster--margin);
+  right: var(--_toaster--margin);
+}
+.toaster--top-left {
+  top: var(--_toaster--margin);
+  left: var(--_toaster--margin);
+}
+.toaster--top-center {
+  top: var(--_toaster--margin);
+  left: 50%;
+  transform: translateX(-50%);
+}
+.toaster--bottom-right {
+  bottom: var(--_toaster--margin);
+  right: var(--_toaster--margin);
+  flex-direction: column-reverse;
+}
+.toaster--bottom-left {
+  bottom: var(--_toaster--margin);
+  left: var(--_toaster--margin);
+  flex-direction: column-reverse;
+}
+.toaster--bottom-center {
+  bottom: var(--_toaster--margin);
+  left: 50%;
+  transform: translateX(-50%);
+  flex-direction: column-reverse;
+}</style>