slexkit 0.2.0

package/src/components/svelte/content/CodeBlock.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import { bindPropStore } from "../bindProps";
+  import { text } from "../helpers";
+  import InlineIcon from "../InlineIcon.svelte";
+  import type { PropValues, SvelteComponentProps } from "../types";
+
+  type CodeToken = {
+    text: string;
+    kind?: "comment" | "keyword" | "literal" | "number" | "string";
+  };
+
+  const supportedLanguages = new Set([
+    "bash",
+    "css",
+    "html",
+    "javascript",
+    "js",
+    "json",
+    "markdown",
+    "md",
+    "python",
+    "py",
+    "sh",
+    "shell",
+    "sql",
+    "ts",
+    "tsx",
+    "typescript",
+    "xml",
+    "yaml",
+    "yml",
+  ]);
+
+  const keywordLanguages = new Set(["javascript", "js", "ts", "tsx", "typescript"]);
+  const keywords = new Set([
+    "as",
+    "async",
+    "await",
+    "break",
+    "case",
+    "catch",
+    "class",
+    "const",
+    "continue",
+    "default",
+    "do",
+    "else",
+    "export",
+    "extends",
+    "finally",
+    "for",
+    "from",
+    "function",
+    "if",
+    "import",
+    "in",
+    "interface",
+    "let",
+    "new",
+    "of",
+    "return",
+    "switch",
+    "throw",
+    "try",
+    "type",
+    "var",
+    "while",
+  ]);
+  const literals = new Set(["false", "null", "true", "undefined"]);
+  const tokenPattern = /\/\/[^\n]*|\/\*[\s\S]*?\*\/|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`(?:\\.|[^`\\])*`|\r\n|\r|\n|\b\d+(?:\.\d+)?\b|\b[$A-Z_a-z][$\w]*\b|./g;
+
+  let { props }: SvelteComponentProps = $props();
+  let p = $state<PropValues>({});
+  let code = $derived(text(p.code ?? p.content ?? p.source));
+  let languageName = $derived(text(p.language).trim().toLowerCase());
+  let languageClass = $derived(languageName === "js" ? "javascript" : languageName || "");
+  let lines = $derived(highlightCode(code, languageName) ?? plainCodeLines(code));
+  let highlighted = $derived(supportedLanguages.has(languageName));
+  let showLineNumbers = $derived(p.lineNumbers !== false && p.lineNumbers !== "false");
+  $effect(() => bindPropStore(props, (next) => (p = next)));
+
+  function highlightCode(source: string, language: string): CodeToken[][] | null {
+    if (!supportedLanguages.has(language)) return null;
+
+    const tokens = Array.from(source.matchAll(tokenPattern), ([value]) => {
+      if (value.startsWith("//") || value.startsWith("/*")) return { text: value, kind: "comment" };
+      if (/^["'`]/.test(value)) return { text: value, kind: "string" };
+      if (/^\d/.test(value)) return { text: value, kind: "number" };
+      if (literals.has(value)) return { text: value, kind: "literal" };
+      if (keywordLanguages.has(language) && keywords.has(value)) return { text: value, kind: "keyword" };
+      return { text: value };
+    });
+    return splitTokenLines(tokens);
+  }
+
+  function plainCodeLines(source: string): CodeToken[][] {
+    return splitTokenLines([{ text: source }]);
+  }
+
+  function splitTokenLines(tokens: CodeToken[]): CodeToken[][] {
+    const lines: CodeToken[][] = [[]];
+    for (const token of tokens) {
+      for (const part of token.text.split(/(\r\n|\r|\n)/)) {
+        if (!part) continue;
+        if (part === "\n" || part === "\r" || part === "\r\n") {
+          lines.push([]);
+        } else {
+          lines[lines.length - 1].push({ ...token, text: part });
+        }
+      }
+    }
+    return lines;
+  }
+</script>
+
+<figure class="slex-code-block">
+  {#if p.title || p.language || p.icon}
+    <figcaption class="slex-code-block-header">
+      <span class="slex-code-block-title">
+        {#if p.icon}<InlineIcon name={p.icon} className="slex-code-block-icon" />{/if}
+        {#if p.title}<span>{text(p.title)}</span>{/if}
+      </span>
+      {#if p.language}<span class="slex-code-block-language">{text(p.language)}</span>{/if}
+    </figcaption>
+  {/if}
+  <pre class="slex-code-block-pre"><code
+    class={`${highlighted ? "slex-code-highlight" : ""} slex-code-lines${p.language ? ` language-${highlighted ? languageClass : text(p.language)}` : ""}`.trim()}
+    data-line-numbers={showLineNumbers ? "true" : "false"}
+  >{#each lines as line}<span class="slex-code-line"><span class="slex-code-line-content">{#each line as token}{#if token.kind}<span class={`slex-code-token slex-code-token--${token.kind}`}>{token.text}</span>{:else}{token.text}{/if}{/each}</span></span>{/each}</code></pre>
+</figure>

package/src/components/svelte/content/Divider.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { bindPropStore } from "../bindProps";
+  import { text } from "../helpers";
+  import InlineIcon from "../InlineIcon.svelte";
+  import type { PropValues, SvelteComponentProps } from "../types";
+
+  let { props }: SvelteComponentProps = $props();
+  let p = $state<PropValues>({});
+  $effect(() => bindPropStore(props, (next) => (p = next)));
+</script>
+
+{#if p.label || p.icon}
+  <div class="slex-divider slex-divider--labeled" role="separator">
+    <span class="slex-divider-label">
+      {#if p.icon}<InlineIcon name={p.icon} className="slex-divider-icon" />{/if}
+      {#if p.label}<span>{text(p.label)}</span>{/if}
+    </span>
+  </div>
+{:else}
+  <hr class="slex-divider" />
+{/if}

package/src/components/svelte/content/Link.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { bindPropStore } from "../bindProps";
+  import { text } from "../helpers";
+  import InlineIcon from "../InlineIcon.svelte";
+  import type { PropValues, SvelteComponentProps } from "../types";
+
+  let { props }: SvelteComponentProps = $props();
+  let p = $state<PropValues>({});
+  $effect(() => bindPropStore(props, (next) => (p = next)));
+</script>
+
+<a
+  class="slex-link"
+  data-variant={text(p.variant)}
+  href={text(p.href, "#")}
+  target={text(p.target) || undefined}
+  rel={p.target === "_blank" ? "noreferrer" : undefined}
+>
+  {#if p.icon}<InlineIcon name={p.icon} className="slex-link-icon" />{/if}
+  <span>{text(p.text ?? p.label ?? p.content ?? p.href)}</span>
+</a>

package/src/components/svelte/content/Section.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { bindPropStore } from "../bindProps";
+  import { renderChildren, text } from "../helpers";
+  import InlineIcon from "../InlineIcon.svelte";
+  import type { PropValues, SvelteComponentProps } from "../types";
+
+  let { props, ctx, componentName }: SvelteComponentProps = $props();
+  let p = $state<PropValues>({});
+  $effect(() => bindPropStore(props, (next) => (p = next)));
+</script>
+
+<section class="slex-section" id={text(p.id ?? componentName) || undefined}>
+  {#if p.title || p.subtitle || p.eyebrow}
+    <header class="slex-section-header">
+      {#if p.eyebrow}<div class="slex-section-eyebrow">{text(p.eyebrow)}</div>{/if}
+      {#if p.title || p.icon}
+        <h2 class="slex-section-title">{#if p.icon}<InlineIcon name={p.icon} className="slex-section-icon" />{/if}{#if p.title}<span>{text(p.title)}</span>{/if}</h2>
+      {/if}
+      {#if p.subtitle}<p class="slex-section-subtitle">{text(p.subtitle)}</p>{/if}
+      {#if p.actionLabel}<a href={text(p.actionHref, "#")} class="slex-section-action">{text(p.actionLabel)}</a>{/if}
+    </header>
+  {/if}
+  <div class="slex-section-body" use:renderChildren={ctx}></div>
+</section>

package/src/components/svelte/content/Table.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { bindPropStore } from "../bindProps";
+  import { readCell, readColumnLabel, readColumns, rows, text } from "../helpers";
+  import InlineIcon from "../InlineIcon.svelte";
+  import type { PropValues, SvelteComponentProps } from "../types";
+
+  let { props }: SvelteComponentProps = $props();
+  let p = $state<PropValues>({});
+  $effect(() => bindPropStore(props, (next) => (p = next)));
+</script>
+
+<div class="slex-table-wrap">
+  <table class="slex-table">
+    {#if readColumns(p.columns).length}
+      <thead>
+        <tr>
+          {#each rows(p.columns) as column, index}
+            <th scope="col">
+              <span class="slex-table-column-label">
+                {#if column && typeof column === "object" && "icon" in column}
+                  <InlineIcon name={(column as Record<string, unknown>).icon} className="slex-table-column-icon" />
+                {/if}
+                <span>{readColumnLabel(column, readColumns(p.columns)[index] ?? "")}</span>
+              </span>
+            </th>
+          {/each}
+        </tr>
+      </thead>
+    {/if}
+    <tbody>
+      {#each rows(p.rows ?? p.items) as row}
+        <tr>
+          {#if readColumns(p.columns).length}
+            {#each readColumns(p.columns) as column}<td>{readCell(row, column)}</td>{/each}
+          {:else if Array.isArray(row)}
+            {#each row as cell}<td>{text(cell)}</td>{/each}
+          {:else}
+            <td>{text(row)}</td>
+          {/if}
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>

package/src/components/svelte/disclosure/Accordion.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import { bindPropStore } from "../bindProps";
+  import { emit, list, text } from "../helpers";
+  import InlineIcon from "../InlineIcon.svelte";
+  import type { PropValues, SvelteComponentProps } from "../types";
+
+  let { props, ctx }: SvelteComponentProps = $props();
+  let p = $state<PropValues>({});
+  let value = $state<unknown>(undefined);
+  let openStates = $state<Record<string, boolean>>({});
+  const items = $derived(list(p.items));
+
+  function keyFor(item: Record<string, unknown>) {
+    return text(item.value ?? item.label);
+  }
+
+  function valueForKey(key: string) {
+    const item = items.find((entry) => keyFor(entry) === key);
+    return item ? (item.value ?? item.label) : undefined;
+  }
+
+  function selectedKeys(nextValue: unknown, multiple: boolean) {
+    if (multiple && Array.isArray(nextValue)) return nextValue.map((entry) => text(entry));
+    const selected = text(nextValue);
+    return selected ? [selected] : [];
+  }
+
+  function openValue(states = openStates) {
+    const keys = Object.keys(states).filter((key) => states[key]);
+    if (p.multiple) return keys.map((key) => valueForKey(key)).filter((entry) => entry !== undefined);
+    return keys.length ? valueForKey(keys[0]) : undefined;
+  }
+
+  $effect(() => bindPropStore(props, (next) => {
+    p = next;
+    value = next.value;
+    const selected = selectedKeys(next.value, next.multiple === true);
+    const nextOpenStates: Record<string, boolean> = {};
+    for (const item of list(next.items)) {
+      const key = keyFor(item);
+      nextOpenStates[key] = selected.includes(key);
+    }
+    openStates = nextOpenStates;
+  }));
+
+  function toggleItem(key: string) {
+    const open = !!openStates[key];
+    let nextStates: Record<string, boolean>;
+    if (p.multiple) {
+      nextStates = { ...openStates, [key]: !open };
+    } else {
+      nextStates = {};
+      for (const item of items) nextStates[keyFor(item)] = false;
+      nextStates[key] = !open;
+    }
+
+    openStates = nextStates;
+    const nextValue = openValue(nextStates);
+    value = nextValue;
+    emit(ctx, "change", nextValue);
+  }
+</script>
+
+<div class="slex-accordion" data-scope="accordion">
+  <div class="slex-accordion-inner">
+    {#each items as item}
+      {@const key = keyFor(item)}
+      {@const open = !!openStates[key]}
+      <section class="slex-accordion-item" data-state={open ? "open" : "closed"}>
+        <h3 class="slex-accordion-heading">
+          <button
+            type="button"
+            class="slex-accordion-trigger"
+            data-state={open ? "open" : "closed"}
+            aria-expanded={open}
+            aria-controls={`${ctx.id}-${key}-content`}
+            onclick={() => toggleItem(key)}
+            disabled={item.disabled === true}
+          >
+            <span class="slex-accordion-label">
+              {#if item.icon}<InlineIcon name={item.icon} selected={open} className="slex-accordion-icon" />{/if}
+              <span>{text(item.label)}</span>
+            </span>
+            <span class="slex-accordion-indicator" aria-hidden="true"></span>
+          </button>
+        </h3>
+        <div
+          id={`${ctx.id}-${key}-content`}
+          class="slex-accordion-content"
+          data-state={open ? "open" : "closed"}
+          aria-hidden={!open}
+        >
+          <div class="slex-accordion-content-inner">
+            {text(item.content)}
+          </div>
+        </div>
+      </section>
+    {/each}
+  </div>
+</div>

package/src/components/svelte/disclosure/Collapsible.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { bindPropStore } from "../bindProps";
+  import { emit, label, renderChildren, text } from "../helpers";
+  import InlineIcon from "../InlineIcon.svelte";
+  import type { PropValues, SvelteComponentProps } from "../types";
+
+  let { props, ctx }: SvelteComponentProps = $props();
+  let p = $state<PropValues>({});
+  let open = $state(false);
+  $effect(() => bindPropStore(props, (next) => {
+    p = next;
+    open = !!(next.open ?? next.value);
+  }));
+
+  function toggle(): void {
+    open = !open;
+    emit(ctx, open ? "open" : "close", open);
+    emit(ctx, "change", open);
+  }
+</script>
+
+<div class="slex-collapsible" data-state={open ? "open" : "closed"}>
+  <button
+    type="button"
+    class="slex-collapsible-trigger"
+    data-state={open ? "open" : "closed"}
+    aria-expanded={open}
+    aria-controls={`${ctx.id}-content`}
+    onclick={toggle}
+  >
+    <span class="slex-collapsible-label">
+      {#if p.icon}<InlineIcon name={p.icon} selected={open} className="slex-collapsible-icon" />{/if}
+      <span>{label(ctx, "collapsible.trigger", p.trigger, "Toggle")}</span>
+    </span>
+    <span class="slex-collapsible-indicator" aria-hidden="true"></span>
+  </button>
+  <div
+    id={`${ctx.id}-content`}
+    class="slex-collapsible-content"
+    data-state={open ? "open" : "closed"}
+    aria-hidden={!open}
+  >
+    <div class="slex-collapsible-content-inner" use:renderChildren={ctx}>{text(p.content)}</div>
+  </div>
+</div>

package/src/components/svelte/display/Stat.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import { bindPropStore } from "../bindProps";
+  import { text } from "../helpers";
+  import InlineIcon from "../InlineIcon.svelte";
+  import type { PropValues, SvelteComponentProps } from "../types";
+
+  let { props, componentName }: SvelteComponentProps = $props();
+  let p = $state<PropValues>({});
+  let previousDisplayValue = $state("");
+  let currentDisplayValue = $state("");
+  let valueChange = $state<"up" | "down" | "changed">("changed");
+  let hasDisplayValue = false;
+  let shouldAnimateValue = $state(false);
+  let valueAnimationPhase = $state<"initial" | "update">("update");
+  const valueText = $derived(text(p.value));
+  const valueSegments = $derived(statSegments(previousDisplayValue, currentDisplayValue));
+
+  $effect(() => bindPropStore(props, (next) => (p = next)));
+
+  function numericValue(value: string): number | null {
+    const parsed = Number.parseFloat(value.replaceAll(",", ""));
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+
+  function changeDirection(previous: string, next: string): "up" | "down" | "changed" {
+    const previousNumber = numericValue(previous);
+    const nextNumber = numericValue(next);
+    if (previousNumber === null || nextNumber === null) return "changed";
+    if (nextNumber > previousNumber) return "up";
+    if (nextNumber < previousNumber) return "down";
+    return "changed";
+  }
+
+  function booleanProp(value: unknown): boolean {
+    return value === true || value === "true" || value === 1 || value === "1";
+  }
+
+  function initialPreviousValue(value: string): string {
+    return Array.from(value).map((char) => isDigit(char) ? "0" : char).join("");
+  }
+
+  $effect(() => {
+    const next = valueText;
+    if (!hasDisplayValue) {
+      shouldAnimateValue = booleanProp(p.animateInitial);
+      previousDisplayValue = shouldAnimateValue ? initialPreviousValue(next) : next;
+      currentDisplayValue = next;
+      valueChange = "up";
+      valueAnimationPhase = "initial";
+      hasDisplayValue = true;
+      return;
+    }
+    if (next === currentDisplayValue) return;
+    valueChange = changeDirection(currentDisplayValue, next);
+    previousDisplayValue = currentDisplayValue;
+    currentDisplayValue = next;
+    shouldAnimateValue = true;
+    valueAnimationPhase = "update";
+  });
+
+  function isDigit(char: string): boolean {
+    return /^[0-9]$/.test(char);
+  }
+
+  function statSegments(previous: string, current: string) {
+    const previousChars = Array.from(previous);
+    const currentChars = Array.from(current);
+    const currentOffset = Math.max(0, currentChars.length - previousChars.length);
+    const previousOffset = Math.max(0, previousChars.length - currentChars.length);
+    return currentChars.map((char, index) => {
+      const previousChar = previousChars[index - currentOffset + previousOffset] ?? "";
+      return {
+        char,
+        previousChar,
+        changed: previousChar !== char,
+        key: `${index}:${char}`,
+        kind: isDigit(char) ? "digit" : "symbol",
+      };
+    });
+  }
+</script>
+
+<div class="slex-stat" data-tone={p.tone || p.type ? text(p.tone ?? p.type) : undefined}>
+  <div class="slex-stat-label">
+    {#if p.icon}<InlineIcon name={p.icon} className="slex-stat-icon" />{/if}
+    <span>{text(p.label ?? componentName)}</span>
+  </div>
+  <div class="slex-stat-value">
+    <span class="slex-stat-number">
+      {#each valueSegments as segment (segment.key)}
+        <span
+          class="slex-stat-character"
+          data-stat-kind={segment.kind}
+          data-stat-change={segment.changed && shouldAnimateValue ? valueChange : undefined}
+          data-stat-initial={segment.changed && shouldAnimateValue && valueAnimationPhase === "initial" ? "true" : undefined}
+          data-stat-previous={segment.previousChar || undefined}
+        ><span class="slex-stat-character-current">{segment.char}</span></span>
+      {/each}
+    </span>
+    {#if p.unit}<span class="slex-stat-unit">{text(p.unit)}</span>{/if}
+  </div>
+</div>

package/src/components/svelte/display/Text.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { bindPropStore } from "../bindProps";
+  import { text } from "../helpers";
+  import type { PropValues, SvelteComponentProps } from "../types";
+
+  let { props }: SvelteComponentProps = $props();
+  let p = $state<PropValues>({});
+  $effect(() => bindPropStore(props, (next) => (p = next)));
+</script>
+
+<div class={`slex-text${p.variant ? ` slex-text--${text(p.variant)}` : ""}${p.class ? ` ${text(p.class)}` : ""}`}>{text(p.content ?? p.text ?? p.label)}</div>

package/src/components/svelte/feedback/Progress.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { bindPropStore } from "../bindProps";
+  import { text } from "../helpers";
+  import InlineIcon from "../InlineIcon.svelte";
+  import type { PropValues, SvelteComponentProps } from "../types";
+
+  let { props }: SvelteComponentProps = $props();
+  let p = $state<PropValues>({});
+  $effect(() => bindPropStore(props, (next) => (p = next)));
+
+  function value(): number {
+    const next = Number(p.value ?? 0);
+    return Number.isFinite(next) ? Math.min(100, Math.max(0, next)) : 0;
+  }
+</script>
+
+<div
+  class="slex-progress"
+  data-scope="progress"
+  data-state={p.indeterminate ? "indeterminate" : "determinate"}
+  role="progressbar"
+  aria-label={text(p["aria-label"] ?? p.ariaLabel ?? p.label) || undefined}
+  aria-valuemin={p.indeterminate ? undefined : 0}
+  aria-valuemax={p.indeterminate ? undefined : 100}
+  aria-valuenow={p.indeterminate ? undefined : value()}
+>
+  {#if p.label || p.icon}
+    <div class="slex-progress-label">
+      {#if p.icon}<InlineIcon name={p.icon} className="slex-progress-icon" />{/if}
+      {#if p.label}<span>{text(p.label)}</span>{/if}
+    </div>
+  {/if}
+  <div class="slex-progress-track"><div class="slex-progress-range" style:width={`${value()}%`}></div></div>
+</div>

package/src/components/svelte/feedback/Toast.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import FlowbiteToast from "../../../../node_modules/flowbite-svelte/dist/toast/Toast.svelte";
+  import { bindPropStore } from "../bindProps";
+  import { bool, emit, label, text } from "../helpers";
+  import InlineIcon from "../InlineIcon.svelte";
+  import type { PropValues, SvelteComponentProps } from "../types";
+
+  let { props, ctx }: SvelteComponentProps = $props();
+  let p = $state<PropValues>({});
+  let visible = $state(true);
+  $effect(() => bindPropStore(props, (next) => (p = next)));
+
+  $effect(() => {
+    const title = titleText();
+    const description = descriptionText();
+    const type = tone();
+    if (!title && !description && !type) return;
+
+    visible = true;
+    const ms = durationMs();
+    if (ms <= 0) return;
+
+    const timer = setTimeout(() => {
+      visible = false;
+    }, ms);
+    return () => clearTimeout(timer);
+  });
+
+  function tone(): string {
+    const raw = text(p.type ?? p.tone ?? "info").toLowerCase();
+    if (raw === "error" || raw === "destructive") return "danger";
+    if (raw === "neutral" || raw === "default") return "info";
+    return raw;
+  }
+
+  function titleText(): string {
+    return text(p.title ?? p.label ?? p.heading);
+  }
+
+  function descriptionText(): string {
+    return text(p.description ?? p.text ?? p.message ?? p.content);
+  }
+
+  function dismissable(): boolean {
+    if (p.dismissable === undefined && p.dismissible === undefined) return true;
+    return bool(p.dismissable ?? p.dismissible);
+  }
+
+  function durationMs(): number {
+    const value = Number(p.duration ?? 0);
+    return Number.isFinite(value) && value > 0 ? value : 0;
+  }
+
+  function close(): void {
+    if (!visible) return;
+    visible = false;
+    emit(ctx, "close", { type: "close", target: ctx.id });
+  }
+
+  function handleGroupClick(event: MouseEvent): void {
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+    if (target.closest(".slex-toast-close")) close();
+  }
+
+  function role(): "alert" | "status" {
+    return tone() === "danger" ? "alert" : "status";
+  }
+
+  function color(): "blue" | "green" | "yellow" | "red" | "gray" {
+    const kind = tone();
+    if (kind === "success") return "green";
+    if (kind === "warning") return "yellow";
+    if (kind === "danger") return "red";
+    if (kind === "muted" || kind === "neutral") return "gray";
+    return "blue";
+  }
+
+  function closeLabel(): string {
+    return label(ctx, "toast.close", p.closeLabel ?? p.closeAriaLabel, "Close");
+  }
+</script>
+
+<div class="slex-toast-group" data-scope="toast" onclick={handleGroupClick}>
+  {#if visible}
+    <FlowbiteToast
+      bind:toastStatus={visible}
+      class="slex-toast"
+      data-tone={tone()}
+      color={color()}
+      role={role()}
+      aria-live={role() === "alert" ? "assertive" : "polite"}
+      dismissable={dismissable()}
+      closeAriaLabel={closeLabel()}
+      classes={{ icon: "slex-toast-mark", content: "slex-toast-content", close: "slex-toast-close" }}
+      onclose={close}
+    >
+      {#snippet icon()}
+        <span aria-hidden="true"></span>
+      {/snippet}
+      {#if titleText()}<div class="slex-toast-title">{#if p.icon}<InlineIcon name={p.icon} className="slex-toast-icon" />{/if}<span>{titleText()}</span></div>{/if}
+      {#if descriptionText()}<div class="slex-toast-description">{descriptionText()}</div>{/if}
+    </FlowbiteToast>
+  {/if}
+</div>