@medyll/idae-slotui-svelte 0.3.0

package/dist/ui/preview/Preview.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { PreviewProps } from './types.js';
+declare const __propDef: {
+    props: PreviewProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type PreviewProps_ = typeof __propDef.props;
+export { PreviewProps_ as PreviewProps };
+export type PreviewEvents = typeof __propDef.events;
+export type PreviewSlots = typeof __propDef.slots;
+export default class Preview extends SvelteComponent<PreviewProps_, PreviewEvents, PreviewSlots> {
+}

package/dist/ui/preview/types.d.ts

@@ -0,0 +1,18 @@
+import type { Data, CommonProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+export type PreviewProps<T = Data> = CommonProps & {
+    /** Data to be displayed in the grid */
+    data?: T[];
+    /** Number of columns in the grid */
+    columns?: number;
+    /** Whether the grid is expanded or not */
+    isExpanded?: boolean;
+    /** Children snippet for the default content */
+    children?: Snippet<[{
+        data: T;
+    }]>;
+    /** Slot for the zoomed in view */
+    previewZoom?: Snippet<[{
+        data: T;
+    }]>;
+};

package/dist/ui/preview/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/serviceBox/ServiceBox.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">import IconButton from "../../controls/button/IconButton.svelte";
+import ButtonMenu from "../../controls/button/ButtonAction.svelte";
+import Debug from "../../base/debug/Debug.svelte";
+const onclose = function() {
+  console.log("close ??");
+};
+</script>
+
+<div class="service-box">
+	<div class="service-box-main gridIconBis">
+		{#each [...Array(6)] as key, val}
+			<!--for popper-->
+			<ButtonMenu actionComponent={Debug}>Setting {val}</ButtonMenu>
+		{/each}
+	</div>
+	<div class="service-box-buttons">
+		<IconButton icon="faList"></IconButton>
+		<IconButton icon="faList"></IconButton>
+	</div>
+</div>
+
+<style>.gridIconBis {
+  width: 100%;
+  display: grid;
+  grid-gap: 8px;
+  grid-template-columns: repeat(auto-fill, minmax(30%, auto));
+}
+
+.service-box {
+  width: 360px;
+  height: 360px;
+  display: flex;
+  flex-direction: column;
+}
+
+.service-box-main {
+  flex: 1;
+  padding: var(--sld-pad-large);
+}
+
+.service-box-buttons {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--sld-pad-med);
+}</style>

package/dist/ui/serviceBox/ServiceBox.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ServiceBoxProps = typeof __propDef.props;
+export type ServiceBoxEvents = typeof __propDef.events;
+export type ServiceBoxSlots = typeof __propDef.slots;
+export default class ServiceBox extends SvelteComponent<ServiceBoxProps, ServiceBoxEvents, ServiceBoxSlots> {
+}
+export {};

package/dist/ui/startMenu/BootMenu.svelte

@@ -0,0 +1,177 @@
+<svelte:options immutable={true} />
+
+<script lang="ts">import { fade } from "svelte/transition";
+import { sx4u } from "../../utils/uses/sx4u/sx4u.js";
+import { clickAway } from "../../utils/uses/clickAway/clickAway.js";
+import Panel from "../panel/Panel.svelte";
+import PanelSlide from "../panel/PanelSlide.svelte";
+import { toggleStartMenu, startMenuStore } from "../../utils/engine/wactions.utils.js";
+import { openWindow } from "../window/actions.svelte.js";
+import { setContext } from "svelte";
+import IconButton from "../../controls/button/IconButton.svelte";
+import { writable } from "svelte/store";
+import Debug from "../../base/debug/Debug.svelte";
+import { onEvent } from "../../utils/uses/event.js";
+const menuStore = writable(null);
+let slideLeft;
+let slideRight;
+function toggleSlidePanels() {
+  slideLeft.actions.toggle();
+  slideRight.actions.toggle();
+  menuStore.set({
+    ...$menuStore,
+    open: !$menuStore?.open
+  });
+  setContext("PanelSlide", menuStore);
+}
+</script>
+
+{#if $startMenuStore}
+	<div
+		class="boot-menu"
+		transition:fade|global={{ duration: 50 }}
+		use:sx4u={{ position: 'absolute', radius: 8, w: 96, h: 64 }}
+		use:clickAway={{ action: toggleStartMenu }}
+		use:onEvent={{ event: 'panel-button-clicked', action: toggleSlidePanels }}
+	>
+		<div use:sx4u={{ p: 2, py: 2 }} style="margin-bottom:2rem">
+			<input style="width: 100%;" type="search" placeholder="Recherche" />
+		</div>
+		<div style="position:relative" class="boot-menuContent">
+			<PanelSlide open={true} bind:this={slideLeft}>
+				<Panel title="Pinned Items">
+					<div class="gridIcon">
+						{#each [...Array(9)] as key, val}
+							<!-- svelte-ignore a11y_click_events_have_key_events -->
+							<!-- svelte-ignore a11y_no_static_element_interactions -->
+							<div
+								onclick={() => {
+									openWindow('try ' + val, {
+										component: Debug,
+										componentProps: { some: 'props', someother: 'deprops' }
+									});
+								}}
+								class="buttonPole"
+							>
+								key
+							</div>
+						{/each}
+					</div>
+				</Panel>
+				<Panel title="Recent Items">
+					<div class="gridIconBis">
+						{#each [...Array(12)] as key}
+							<div class="buttonPole">here</div>
+						{/each}
+					</div>
+				</Panel>
+				<Panel>
+					<div class="gridOne">
+						{#each [...Array(3)] as key}
+							<div class="buttonPole">here</div>
+						{/each}
+					</div>
+				</Panel>
+			</PanelSlide>
+			<PanelSlide open={false} bind:this={slideRight}>
+				<Panel title="Zoom area">
+					<div class="gridIconMid">
+						{#each [...Array(130)] as key}
+							<div class="buttonPole">here</div>
+						{/each}
+					</div>
+				</Panel>
+			</PanelSlide>
+		</div>
+		<div class="bottomBar">
+			<IconButton style="color:white" icon="faBed" />
+			<IconButton style="color:white" icon="faTruck" />
+			<IconButton style="color:white" icon="faSign" />
+		</div>
+	</div>
+{/if}
+
+<style>:root {
+  --boot-menu-background-color: rgba(90, 67, 52, 0.9);
+  --boot-menu-backdrop-filter: blur(10px);
+  --boot-menu-color: white;
+  --boot-menu-max-height: 600px;
+  --boot-menu-height: 80%;
+  --boot-menu-box-shadow: 0px 0px 3px 1px rgba(51, 51, 51, 0.5);
+  --boot-menu-z-index: 3000;
+  --boot-menu-margin-top: 1rem;
+  --boot-menu-button-pole-border-radius: var(--sld-radius-small);
+  --boot-menu-button-pole-border: 1px solid rgba(208, 191, 151, 0.3);
+  --boot-menu-button-pole-padding: var(--sld-pad-tiny);
+  --boot-menu-grid-icon-gap: 10px;
+  --boot-menu-grid-icon-template-columns: repeat(auto-fill, minmax(30%, auto));
+  --boot-menu-grid-icon-bis-template-columns: repeat(auto-fill, minmax(15%, auto));
+  --boot-menu-grid-icon-mid-template-columns: repeat(auto-fill, minmax(49%, auto));
+  --boot-menu-grid-one-template-columns: repeat(auto-fill, minmax(100%, auto));
+  --boot-menu-bottom-bar-box-shadow: 0px 0px 3px 1px rgba(51, 51, 51, 0.5);
+  --boot-menu-bottom-bar-padding: var(--sld-pad-small) var(--sld-pad-medium);
+}
+
+.boot-menu {
+  background-color: var(--boot-menu-background-color);
+  backdrop-filter: var(--boot-menu-backdrop-filter);
+  color: var(--boot-menu-color);
+  display: flex;
+  flex-direction: column;
+  max-height: var(--boot-menu-max-height);
+  height: var(--boot-menu-height);
+  left: 50%;
+  transform: translate(-50%, 0);
+  box-shadow: var(--boot-menu-box-shadow);
+  overflow: hidden;
+  z-index: var(--boot-menu-z-index);
+  position: absolute;
+  margin-top: var(--boot-menu-margin-top);
+}
+
+.boot-menu .boot-menuContent {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.boot-menu .buttonPole {
+  border-radius: var(--boot-menu-button-pole-border-radius);
+  border: var(--boot-menu-button-pole-border);
+  padding: var(--boot-menu-button-pole-padding);
+}
+
+.boot-menu .gridIcon {
+  width: 100%;
+  display: grid;
+  grid-gap: var(--boot-menu-grid-icon-gap);
+  grid-template-columns: var(--boot-menu-grid-icon-template-columns);
+}
+
+.boot-menu .gridIconBis {
+  width: 100%;
+  display: grid;
+  grid-gap: var(--boot-menu-grid-icon-gap);
+  grid-template-columns: var(--boot-menu-grid-icon-bis-template-columns);
+}
+
+.boot-menu .gridIconMid {
+  width: 100%;
+  display: grid;
+  grid-gap: var(--boot-menu-grid-icon-gap);
+  grid-template-columns: var(--boot-menu-grid-icon-mid-template-columns);
+}
+
+.boot-menu .gridOne {
+  width: 100%;
+  display: grid;
+  grid-gap: var(--boot-menu-grid-icon-gap);
+  grid-template-columns: var(--boot-menu-grid-one-template-columns);
+}
+
+.boot-menu .bottomBar {
+  box-shadow: var(--boot-menu-bottom-bar-box-shadow);
+  display: flex;
+  align-items: end;
+  padding: var(--boot-menu-bottom-bar-padding);
+}</style>

package/dist/ui/startMenu/BootMenu.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BootMenuProps = typeof __propDef.props;
+export type BootMenuEvents = typeof __propDef.events;
+export type BootMenuSlots = typeof __propDef.slots;
+export default class BootMenu extends SvelteComponent<BootMenuProps, BootMenuEvents, BootMenuSlots> {
+}
+export {};

package/dist/ui/startMenu/boot-menu.scss

@@ -0,0 +1,86 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+    --boot-menu-background-color: rgba(90, 67, 52, 0.9);
+    --boot-menu-backdrop-filter: blur(10px);
+    --boot-menu-color: white;
+    --boot-menu-max-height: 600px;
+    --boot-menu-height: 80%;
+    --boot-menu-box-shadow: 0px 0px 3px 1px rgba(51, 51, 51, 0.5);
+    --boot-menu-z-index: 3000;
+    --boot-menu-margin-top: 1rem;
+    --boot-menu-button-pole-border-radius: var(--sld-radius-small);
+    --boot-menu-button-pole-border: 1px solid rgba(208, 191, 151, 0.3);
+    --boot-menu-button-pole-padding: var(--sld-pad-tiny);
+    --boot-menu-grid-icon-gap: 10px;
+    --boot-menu-grid-icon-template-columns: repeat(auto-fill, minmax(30%, auto));
+    --boot-menu-grid-icon-bis-template-columns: repeat(auto-fill, minmax(15%, auto));
+    --boot-menu-grid-icon-mid-template-columns: repeat(auto-fill, minmax(49%, auto));
+    --boot-menu-grid-one-template-columns: repeat(auto-fill, minmax(100%, auto));
+    --boot-menu-bottom-bar-box-shadow: 0px 0px 3px 1px rgba(51, 51, 51, 0.5);
+    --boot-menu-bottom-bar-padding: var(--sld-pad-small) var(--sld-pad-medium);
+}
+
+.boot-menu {
+    background-color: var(--boot-menu-background-color);
+    backdrop-filter: var(--boot-menu-backdrop-filter);
+    color: var(--boot-menu-color);
+    display: flex;
+    flex-direction: column;
+    max-height: var(--boot-menu-max-height);
+    height: var(--boot-menu-height);
+    left: 50%;
+    transform: translate(-50%, 0);
+    box-shadow: var(--boot-menu-box-shadow);
+    overflow: hidden;
+    z-index: var(--boot-menu-z-index);
+    position: absolute;
+    margin-top: var(--boot-menu-margin-top);
+
+    .boot-menuContent {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+
+    .buttonPole {
+        border-radius: var(--boot-menu-button-pole-border-radius);
+        border: var(--boot-menu-button-pole-border);
+        padding: var(--boot-menu-button-pole-padding);
+    }
+
+    .gridIcon {
+        width: 100%;
+        display: grid;
+        grid-gap: var(--boot-menu-grid-icon-gap);
+        grid-template-columns: var(--boot-menu-grid-icon-template-columns);
+    }
+
+    .gridIconBis {
+        width: 100%;
+        display: grid;
+        grid-gap: var(--boot-menu-grid-icon-gap);
+        grid-template-columns: var(--boot-menu-grid-icon-bis-template-columns);
+    }
+
+    .gridIconMid {
+        width: 100%;
+        display: grid;
+        grid-gap: var(--boot-menu-grid-icon-gap);
+        grid-template-columns: var(--boot-menu-grid-icon-mid-template-columns);
+    }
+
+    .gridOne {
+        width: 100%;
+        display: grid;
+        grid-gap: var(--boot-menu-grid-icon-gap);
+        grid-template-columns: var(--boot-menu-grid-one-template-columns);
+    }
+
+    .bottomBar {
+        box-shadow: var(--boot-menu-bottom-bar-box-shadow);
+        display: flex;
+        align-items: end;
+        padding: var(--boot-menu-bottom-bar-padding);
+    }
+}

package/dist/ui/taskbar/TaskBarContent.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">import { wStore } from "../window/store.js";
+import IconButton from "../../controls/button/IconButton.svelte";
+import Slotted from "../../utils/slotted/Slotted.svelte";
+let { children, ...rest } = $props();
+function toggleWindow(frameId) {
+  $wStore.activeFrame = frameId;
+}
+</script>
+
+{#each Object.keys($wStore.instances ?? {}) as key}
+	<IconButton
+		onclick={() => {
+			toggleWindow(key);
+		}}
+		style="color:white;font-size: large"
+		icon="home"
+	/>
+{/each}
+<Slotted child={children}></Slotted>

package/dist/ui/taskbar/TaskBarContent.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        children: unknown;
+    } & Record<string, unknown>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TaskBarContentProps = typeof __propDef.props;
+export type TaskBarContentEvents = typeof __propDef.events;
+export type TaskBarContentSlots = typeof __propDef.slots;
+export default class TaskBarContent extends SvelteComponent<TaskBarContentProps, TaskBarContentEvents, TaskBarContentSlots> {
+}
+export {};

package/dist/ui/taskbar/Taskbar.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">import Slotted from "../../utils/slotted/Slotted.svelte";
+let {
+  element,
+  style,
+  class: className,
+  taskBarLeft,
+  taskBarRight,
+  children,
+  ...restProps
+} = $props();
+</script>
+
+<div class="taskbar {className}" {...restProps}>
+	<Slotted child={taskBarLeft} />
+	<div class="taskbar-main">
+		<Slotted child={children} />
+	</div>
+	<Slotted child={taskBarRight} />
+</div>
+
+<style>:root {
+  --taskbar-grid-gap: var(--sld-gap-tiny);
+  --taskbar-background-color: rgba(255, 255, 255, 0.5);
+  --taskbar-backdrop-filter: blur(20px);
+  --taskbar-min-height: 48px;
+  --taskbar-border-bottom: rgba(255, 255, 255, 0.2);
+  --taskbar-box-shadow: var(--sld-elevation-3);
+}
+
+.taskbar {
+  display: flex;
+  align-items: center;
+  grid-gap: var(--taskbar-grid-gap);
+  background-size: auto;
+  background-color: var(--taskbar-background-color);
+  --moz-backdrop-filter: var(--taskbar-backdrop-filter);
+  backdrop-filter: var(--taskbar-backdrop-filter);
+  min-height: var(--taskbar-min-height);
+  border-bottom: 1px solid var(--taskbar-border-bottom);
+  box-shadow: var(--taskbar-box-shadow);
+  box-sizing: border-box;
+}
+
+.taskbar-main {
+  flex: 1;
+}</style>

package/dist/ui/taskbar/Taskbar.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { TaskbarProps } from './types.js';
+declare const __propDef: {
+    props: TaskbarProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type TaskbarProps_ = typeof __propDef.props;
+export { TaskbarProps_ as TaskbarProps };
+export type TaskbarEvents = typeof __propDef.events;
+export type TaskbarSlots = typeof __propDef.slots;
+export default class Taskbar extends SvelteComponent<TaskbarProps_, TaskbarEvents, TaskbarSlots> {
+}

package/dist/ui/taskbar/taskbar.scss

@@ -0,0 +1,28 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+    --taskbar-grid-gap: var(--sld-gap-tiny);
+    --taskbar-background-color: rgba(255, 255, 255, 0.5);
+    --taskbar-backdrop-filter: blur(20px);
+    --taskbar-min-height: 48px;
+    --taskbar-border-bottom: rgba(255, 255, 255, 0.2);
+    --taskbar-box-shadow: var(--sld-elevation-3);
+}
+
+.taskbar {
+    display: flex;
+    align-items: center;
+    grid-gap: var(--taskbar-grid-gap);
+    background-size: auto;
+    background-color: var(--taskbar-background-color);
+    --moz-backdrop-filter: var(--taskbar-backdrop-filter);
+    backdrop-filter: var(--taskbar-backdrop-filter);
+    min-height: var(--taskbar-min-height);
+    border-bottom: 1px solid var(--taskbar-border-bottom);
+    box-shadow: var(--taskbar-box-shadow);
+    box-sizing: border-box;
+
+    &-main {
+        flex: 1;
+    }
+}

package/dist/ui/taskbar/types.d.ts

@@ -0,0 +1,11 @@
+import type { CommonProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+export type TaskbarProps = CommonProps & {
+    /** className off the root component */
+    class?: string;
+    /** element root HTMLDivElement props */
+    element: HTMLDivElement;
+    /** slots for the taskbar */
+    taskBarLeft?: Snippet;
+    taskBarRight?: Snippet;
+};

package/dist/ui/taskbar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/themeswitcher/ThemeSwitcher.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">import IconButton from "../../controls/button/IconButton.svelte";
+function switchThemeMode() {
+  const themeMode = localStorage.getItem("themeMode") ?? "light";
+  const newThemeMode = themeMode === "light" ? "dark" : "light";
+  document.body.setAttribute("data-theme", newThemeMode);
+  localStorage.setItem("themeMode", newThemeMode);
+}
+</script>
+
+<IconButton
+	variant="naked"
+	{...$$restProps}
+	onclick={() => {
+		switchThemeMode();
+	}}
+/>

package/dist/ui/themeswitcher/ThemeSwitcher.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ThemeSwitcherProps = typeof __propDef.props;
+export type ThemeSwitcherEvents = typeof __propDef.events;
+export type ThemeSwitcherSlots = typeof __propDef.slots;
+export default class ThemeSwitcher extends SvelteComponent<ThemeSwitcherProps, ThemeSwitcherEvents, ThemeSwitcherSlots> {
+}
+export {};

package/dist/ui/toast/Toast.demo.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">import Toast from "./Toast.svelte";
+import { defaultsArgs, defaultsArgsFromProps } from "../../base/demoer/demoer.utils.js";
+import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
+import DemoerCode from "../../base/demoer/DemoerCode.svelte";
+import Demoer from "../../base/demoer/Demoer.svelte";
+import DemoPage from "../../base/demoer/DemoPage.svelte";
+import Icon from "../../base/icon/Icon.svelte";
+import { uiPresets } from "../../utils/engine/presets.js";
+import Toaster from "./Toaster.svelte";
+let codeSlot = ` `;
+</script>
+
+<Toast autoClose={true}>toast</Toast>
+<Toast>toast</Toast>

package/dist/ui/toast/Toast.demo.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToastProps = typeof __propDef.props;
+export type ToastEvents = typeof __propDef.events;
+export type ToastSlots = typeof __propDef.slots;
+export default class Toast extends SvelteComponent<ToastProps, ToastEvents, ToastSlots> {
+}
+export {};

package/dist/ui/toast/Toast.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">import Box from "../../base/box/Box.svelte";
+import { toastStore } from "./store.js";
+import { onMount } from "svelte";
+import Toaster from "./Toaster.svelte";
+import Slotted from "../../utils/slotted/Slotted.svelte";
+let {
+  class: className = "",
+  element = $bindable(),
+  style = "",
+  toastId = crypto.randomUUID(),
+  autoClose = false,
+  autoCloseDelay = 5e3,
+  component,
+  componentProps,
+  toasterId = "defaultToasterRoot",
+  children,
+  ...rest
+} = $props();
+let isOpen = true;
+if (!$toastStore[toastId]) {
+  $toastStore[toastId] = {
+    toastId,
+    autoClose,
+    autoCloseDelay,
+    component,
+    componentProps
+  };
+}
+onMount(() => {
+  if (!document.body.querySelector("[data-toasterId=" + toasterId + "]")) {
+    let a = new Toaster({
+      target: document.body,
+      props: { toasterId }
+    });
+    console.log(a);
+  }
+  document?.body.querySelector('[data-toasterId="' + toasterId + '"]')?.appendChild(document.body.querySelector('[data-toastId="' + toastId + '"]'));
+});
+$effect(() => {
+  if (autoClose) {
+    setTimeout(() => {
+      isOpen = false;
+    }, autoCloseDelay ?? 5e3);
+  }
+});
+</script>
+
+<Box bind:element style="width:auto;" data-toastId={toastId} {isOpen} {...rest}>
+	<Slotted child={children} />
+</Box>
+
+<style></style>

package/dist/ui/toast/Toast.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { ToastProps } from './types.js';
+declare const __propDef: {
+    props: ToastProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type ToastProps_ = typeof __propDef.props;
+export { ToastProps_ as ToastProps };
+export type ToastEvents = typeof __propDef.events;
+export type ToastSlots = typeof __propDef.slots;
+export default class Toast extends SvelteComponent<ToastProps_, ToastEvents, ToastSlots> {
+}

package/dist/ui/toast/Toaster.svelte

@@ -0,0 +1,16 @@
+<!--
+Wrapper for the toaster family
+called automatically
+-->
+<script lang="ts">import Slotted from "../../utils/slotted/Slotted.svelte";
+let { toasterId = "defaultToasterRoot", children, ...rest } = $props();
+</script>
+
+<div
+	style="position:fixed;bottom:0;right:0;margin:1rem;"
+	class="flex-v gap-tiny"
+	{...rest}
+	data-toasterId={toasterId}
+>
+	<Slotted child={children} />
+</div>