@medyll/idae-slotui-svelte 0.3.0

package/dist/base/contentSwitcher/content-switcher.scss

@@ -0,0 +1,22 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+    --sld-content-switcher-overflow: hidden;
+}
+.content-switcher {
+    min-width: auto;
+    max-width: 100%;
+    width: 100%;
+    gap: 0.5rem;
+    overflow: var(--sld-content-switcher-overflow);
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex: 1;
+    .content {
+        position: relative;
+        overflow: var(--sld-content-switcher-overflow);
+        min-width: auto;
+        flex: 1 1 auto;
+    }
+}

package/dist/base/contentSwitcher/types.d.ts

@@ -0,0 +1,20 @@
+import type { CommonProps, IconObj } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+import type { DemoerStoryProps } from '../demoer/types.js';
+export type ContentSwitcherProps = CommonProps & {
+    /** className off the root component */
+    class?: string;
+    /** element root HTMLDivElement props */
+    element?: HTMLDivElement;
+    /** icon for the switcher */
+    icon?: string | IconObj;
+    /** icon for the back action */
+    iconback?: string | IconObj;
+    /** parent element of the switcher */
+    parent?: HTMLElement;
+    contentSwitcherTogglerIcon?: Snippet;
+    contentSwitcherBackIcon?: Snippet;
+    contentSwitcherReveal?: Snippet;
+};
+export declare const contentSwitcherDemoValues: DemoerStoryProps<ContentSwitcherProps>;
+export declare let parameters: DemoerStoryProps<ContentSwitcherProps>, componentArgs: ContentSwitcherProps;

package/dist/base/contentSwitcher/types.js

@@ -0,0 +1,12 @@
+import { demoerArgs } from '../demoer/demoer.utils.js';
+export const contentSwitcherDemoValues = {
+    icon: {
+        type: 'icon',
+        values: ['mdi:window', 'mdi:user', undefined]
+    },
+    iconback: {
+        type: 'icon',
+        values: ['mdi:window', 'mdi:user', undefined]
+    }
+};
+export let { parameters, componentArgs } = demoerArgs(contentSwitcherDemoValues);

package/dist/base/contentSwitcher/useContentSwitcher.d.ts

@@ -0,0 +1,7 @@
+export type UseContentSwitcherProps = {
+    parent: HTMLElement | string;
+    disabled?: boolean;
+};
+export declare const useContentSwitcher: (node: HTMLElement, props: UseContentSwitcherProps) => {
+    destroy: () => void;
+};

package/dist/base/contentSwitcher/useContentSwitcher.js

@@ -0,0 +1,5 @@
+export const useContentSwitcher = (node, props) => {
+    return {
+        destroy: () => { }
+    };
+};

package/dist/base/debug/Debug.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">import Cartouche from "../cartouche/Cartouche.svelte";
+const items = [
+  { label: "theTitle", code: "theTitle1" },
+  { label: "theTitle bis", code: "theTitle2" },
+  {
+    label: "theTitle ter",
+    code: "theTitle3",
+    component: Cartouche,
+    componentProps: { label: "dynamic" }
+  }
+];
+</script>
+
+<div style="padding:0.5rem">
+	<Cartouche isOpen={true} primary="debug zone here">
+		<pre>{JSON.stringify($$props, null, ' ')}</pre>
+	</Cartouche>
+</div>

package/dist/base/debug/Debug.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 DebugProps = typeof __propDef.props;
+export type DebugEvents = typeof __propDef.events;
+export type DebugSlots = typeof __propDef.slots;
+export default class Debug extends SvelteComponent<DebugProps, DebugEvents, DebugSlots> {
+}
+export {};

package/dist/base/demoer/DemoPage.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">import Icon from "../icon/Icon.svelte";
+import DemoerCode from "./DemoerCode.svelte";
+import Slotted from "../../utils/slotted/Slotted.svelte";
+let {
+  title = "",
+  code = "",
+  subTitle,
+  component,
+  children,
+  demoerCode
+} = $props();
+let codeT = subTitle ? subTitle : `component ${component} demo ${title?.toLowerCase()}`;
+</script>
+
+<div>
+	<div class="pad-l-2">
+		{#if code || demoerCode}
+			<div>
+				<!-- {@render demoerCode?.()} -->
+				<Slotted child={demoerCode}>
+					<DemoerCode {code} />
+				</Slotted>
+			</div>
+		{/if}
+		<h6 class="border-b w-medium pad flex-h flex-align-middle gap-small">
+			<Icon icon="cib:svelte" /> playground
+		</h6>
+		<div class="os-rel">
+			{#if children}
+				{@render children?.()}
+			{/if}
+		</div>
+	</div>
+</div>

package/dist/base/demoer/DemoPage.svelte.d.ts

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

package/dist/base/demoer/Demoer.svelte

@@ -0,0 +1,166 @@
+<script lang="ts" generics="T=Record<string, any>">import Button from "../../controls/button/Button.svelte";
+import Icon from "../icon/Icon.svelte";
+import Switch from "../../controls/switch/Switch.svelte";
+import Slotted from "../../utils/slotted/Slotted.svelte";
+import { densePreset, flowPreset, uiPresets } from "../../types/index.js";
+import IconButton from "../../controls/button/IconButton.svelte";
+let {
+  title,
+  parameters = $bindable({}),
+  component = $bindable(),
+  componentArgs = $bindable({}),
+  multiple = {},
+  children
+} = $props();
+let activeParams = $state({ ...componentArgs });
+$inspect(activeParams);
+</script>
+
+{#if title}
+	<div class="pad">{title}</div>
+{/if}
+
+{#snippet main({ parameter, values })}
+	{#each parameters?.[parameter]?.values ?? values ?? [] as value}
+		{@const finalValue = value === undefined ? 'unset' : value}
+		<Button
+			width="small"
+			variant="flat"
+			showChip={activeParams[parameter] === value}
+			onclick={() => {
+				activeParams[parameter] = value;
+			}}
+		>
+			{finalValue}
+		</Button>
+		<div class="border-r pad-tb-1"></div>
+	{/each}
+{/snippet}
+{#snippet boolean({ parameter })}
+	<Switch
+		name={crypto.randomUUID()}
+		checked={activeParams[parameter]}
+		onChange={(val, metadata) => {
+			activeParams[parameter] = val;
+		}}
+	/>
+{/snippet}
+{#snippet color({ parameter, values })}
+	<input
+		type="color"
+		onchange={(event) => {
+			activeParams[parameter] = event.target.value;
+		}}
+	/>
+{/snippet}
+{#snippet icon({ parameter, values })}
+	{#each ['fa-solid:tree', 'mdi:window', 'mdi:user', 'mdi:close', 'search'] as red}
+		<IconButton
+			icon={red}
+			title={red}
+			showChip={activeParams[parameter] === red}
+			onclick={() => {
+				activeParams[parameter] = red;
+			}}
+		/>
+	{/each}
+{/snippet}
+
+<div class="flex-v gap-small">
+	<div class="pad-l-8">
+		<h6 class="border-b w-medium pad flex-h flex-align-middle gap-small">
+			<Icon icon="cib:svelte" /> component
+		</h6>
+		<div class="pad-2">
+			{#if Object.entries(multiple).length > 0}
+				<div class="flex-h flex-align-middle flex-wrap gap-medium">
+					{#each Object.keys(multiple) as tiple}
+						{#each Object.keys(multiple[tiple]) as params}
+							<div>
+								<Slotted
+									child={children}
+									slotArgs={{
+										activeParams: {
+											...activeParams,
+											...multiple[tiple][params]
+										}
+									}}
+								/>
+								<svelte:component this={component} {componentArgs} {...multiple[tiple][params]} />
+
+								<div class="pad-2 text-center">{tiple} {params}</div>
+							</div>
+							<div class="border-r pad-tb-4" />
+						{/each}
+					{/each}
+				</div>
+			{:else if component}
+				<!-- <svelte:component this={component} {...componentArgs} {...activeParams} /> -->
+			{:else}
+				{#key activeParams}
+					{@render children?.({ activeParams })}
+				{/key}
+			{/if}
+		</div>
+		<h6 class="border-b w-medium pad flex-h flex-align-middle gap-small">
+			<Icon icon="clarity:command-line" />
+			parameters
+		</h6>
+		<div class=" pad flex-h flex-wrap flex-align-middle gap-small">
+			<table style="width:100%;table-layout:auto;border-spacing: 0.5rem">
+				<tbody>
+					{#each Object.keys(parameters) as parameter}
+						{#if parameters?.[parameter]?.private !== true}
+							<tr>
+								<td class="w-medium-min text-bold">{parameter}</td>
+								<td>{parameters?.[parameter]?.type} </td>
+								<td>
+									<div class="flex flex-align-middle gap-small w-mid-min flex-wrap">
+										{#if parameters?.[parameter]?.type === 'boolean'}
+											{@render boolean({ parameter, values: [false, true] })}
+										{:else if parameters?.[parameter]?.type === 'color'}
+											{@render color({ parameter, values: uiPresets.theme })}
+										{:else if parameters?.[parameter]?.type === 'icon'}
+											{@render icon({ parameter })}
+										{:else if parameters?.[parameter]?.type === 'dense'}
+											{@render main({ parameter, values: uiPresets.dense })}
+										{:else if parameters?.[parameter]?.type === 'flow'}
+											{@render main({ parameter, values: uiPresets.flow })}
+										{:else if parameters?.[parameter]?.type === 'buttonVariant'}
+											{@render main({ parameter, values: uiPresets.buttonVariant })}
+										{:else if parameters?.[parameter]?.type === 'iconSize'}
+											{@render main({ parameter, values: uiPresets.iconSize })}
+										{:else if parameters?.[parameter]?.type === 'width'}
+											{@render main({ parameter, values: uiPresets.width })}
+										{:else if parameters?.[parameter]?.type === 'status'}
+											{@render main({ parameter, values: uiPresets.status })}
+										{:else if parameters?.[parameter]?.type === 'stickyPosition'}
+											{@render main({ parameter, values: uiPresets.stickyPosition })}
+										{:else if parameters?.[parameter]?.type === 'position'}
+											{@render main({ parameter, values: uiPresets.position })}
+										{:else if parameters?.[parameter]?.type === 'levels'}
+											{@render main({ parameter, values: uiPresets.levels })}
+										{:else if parameters?.[parameter]?.type === 'theme'}
+											{@render main({ parameter, values: uiPresets.theme })}
+										{:else if parameters?.[parameter]?.type === 'direction'}
+											{@render main({ parameter, values: uiPresets.orientation })}
+										{:else if parameters?.[parameter]?.type === 'elevation'}
+											{@render main({ parameter, values: uiPresets.elevation })}
+										{:else if parameters?.[parameter]?.type === 'tall'}
+											{@render main({ parameter, values: uiPresets.tall })}
+										{:else if parameters?.[parameter]?.type === 'gutter'}
+											{@render main({ parameter, values: uiPresets.gutter })}
+										{:else}
+											<!-- array, default -->
+											{@render main({ parameter })}
+										{/if}
+									</div>
+								</td>
+							</tr>
+						{/if}
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	</div>
+</div>

package/dist/base/demoer/Demoer.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { DemoerProps } from './types.js';
+declare class __sveltets_Render<T = Record<string, any>> {
+    props(): DemoerProps<T>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type DemoerProps_<T = Record<string, any>> = ReturnType<__sveltets_Render<T>['props']>;
+export type DemoerEvents<T = Record<string, any>> = ReturnType<__sveltets_Render<T>['events']>;
+export type DemoerSlots<T = Record<string, any>> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class Demoer<T = Record<string, any>> extends SvelteComponent<DemoerProps_<T>, DemoerEvents<T>, DemoerSlots<T>> {
+}
+export {};

package/dist/base/demoer/DemoerCode.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">import Prism from "prismjs";
+import "prismjs/plugins/normalize-whitespace/prism-normalize-whitespace";
+import "prism-svelte";
+import Icon from "../icon/Icon.svelte";
+let { title = void 0, code = "", subTitle, component, demoerCode } = $props();
+const highlighted = Prism.highlight(code, Prism.languages.svelte, "svelte");
+</script>
+
+<div>
+	{#if code || demoerCode}
+		<h6 class="border-b w-medium pad flex-h flex-align-middle gap-small">
+			<Icon icon="mdi:code" /> code
+		</h6>
+		{#if title}<div class="text-bold pad pad-l-4">- {title}</div>{/if}
+		<div class="marg-l-2 dsp-block-inline radius-small pad-ii-2">
+			{#if demoerCode}
+				{@render demoerCode()}
+			{:else}
+				<pre><code lang="language-svelte">{@html highlighted}</code></pre>
+			{/if}
+		</div>
+	{/if}
+</div>

package/dist/base/demoer/DemoerCode.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
+import 'prism-svelte';
+import type { Snippet } from 'svelte';
+declare const __propDef: {
+    props: {
+        title?: string;
+        code: string;
+        subTitle?: string;
+        component?: string;
+        demoerCode?: Snippet;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type DemoerCodeProps_ = typeof __propDef.props;
+export { DemoerCodeProps_ as DemoerCodeProps };
+export type DemoerCodeEvents = typeof __propDef.events;
+export type DemoerCodeSlots = typeof __propDef.slots;
+export default class DemoerCode extends SvelteComponent<DemoerCodeProps_, DemoerCodeEvents, DemoerCodeSlots> {
+}

package/dist/base/demoer/DemoerComponent.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" generics="T=Data">import { componentCite } from "../../componentCite.js";
+import Slotted from "../../utils/slotted/Slotted.svelte";
+let {
+  component,
+  cite = componentCite?.[component.toLowerCase()] ?? "",
+  code,
+  title = "",
+  componentArgs = {},
+  parameters = {},
+  children
+} = $props();
+let citation = componentCite?.[component.toLowerCase()]?.cite ?? "";
+let author = componentCite?.[component.toLowerCase()]?.author ?? "";
+</script>
+
+<div class="flex-v gap-large w-full">
+	<div class="flex-v gap-small flex-align-middle">
+		<h5>{`<${component} />`}</h5>
+		<!-- <span>@medyll/slotted/{compDet?.group}/{compDet?.code}.svelte</span> -->
+	</div>
+	<cite><p>"{@html citation}"<br />{@html author}</p></cite>
+	{#if children}
+		<div class="flex-v gap-medium">
+			{component} svelte component
+			<div class="marg-l-4">
+				<Slotted child={children} />
+			</div>
+		</div>
+	{/if}
+</div>

package/dist/base/demoer/DemoerComponent.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import type { Snippet } from 'svelte';
+import type { Data } from '../../types/index.js';
+declare class __sveltets_Render<T = Data> {
+    props(): {
+        component: string;
+        /** parameters values for the component */
+        parameters?: T | undefined;
+        /** component demo arguments for props */
+        componentArgs?: T | undefined;
+        cite?: string;
+        /** code sample */
+        code?: string;
+        title?: string;
+        /** use for several DemoPage */
+        children: Snippet;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type DemoerComponentProps<T = Data> = ReturnType<__sveltets_Render<T>['props']>;
+export type DemoerComponentEvents<T = Data> = ReturnType<__sveltets_Render<T>['events']>;
+export type DemoerComponentSlots<T = Data> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class DemoerComponent<T = Data> extends SvelteComponent<DemoerComponentProps<T>, DemoerComponentEvents<T>, DemoerComponentSlots<T>> {
+}
+export {};

package/dist/base/demoer/demoer.utils.d.ts

@@ -0,0 +1,7 @@
+import type { DemoerStoryProps } from './types.js';
+export declare function demoerArgs<T = Record<string, any>>(parametersProps: DemoerStoryProps<T>): {
+    parameters: DemoerStoryProps<T>;
+    componentArgs: T;
+};
+export declare function defaultsArgs<T = Record<string, any>>(parametersProps: DemoerStoryProps<T>): T;
+export declare function defaultsArgsFromProps(prop: string, parametersProps: Record<string, any>): any;

package/dist/base/demoer/demoer.utils.js

@@ -0,0 +1,15 @@
+export function demoerArgs(parametersProps) {
+    return { parameters: parametersProps, componentArgs: defaultsArgs({ ...parametersProps }) };
+}
+export function defaultsArgs(parametersProps) {
+    const out = {};
+    for (const prop of Object.keys(parametersProps)) {
+        out[prop] =
+            parametersProps[prop]?.default ??
+                { ...parametersProps }[prop]?.values?.[0];
+    }
+    return out;
+}
+export function defaultsArgsFromProps(prop, parametersProps) {
+    return parametersProps[prop]?.values?.[0];
+}

package/dist/base/demoer/types.d.ts

@@ -0,0 +1,38 @@
+import type { CommonProps } from '../../types/index.js';
+import type { uiPresets } from '../../utils/engine/presets.js';
+import type { Component, Snippet } from 'svelte';
+export type DemoerProps<T = Record<string, any>> = {
+    title?: string;
+    parameters: DemoerStoryProps<T>;
+    componentArgs?: T;
+    component?: Component<any> /** svelte component*/;
+    multiple?: Record<string, any>;
+    children?: Snippet<[{
+        activeParams: T;
+    }]>;
+};
+export type DemoerArgsType = 'boolean' | 'flow-preset' | 'string' | 'icon' | 'dense' | 'tall' | string;
+export type DemoerParameters = {
+    type: DemoerArgsType;
+    values?: any[];
+    default?: any;
+};
+export type DemoPageProps = CommonProps & {
+    title?: string;
+    subTitle?: string;
+    component: string;
+    code?: string;
+    demoerCode?: Snippet;
+    children: Snippet;
+    slots?: {
+        code: Snippet;
+    };
+};
+export type DemoerStoryProps<T = Record<string, any>> = {
+    [K in keyof T]: {
+        type: keyof typeof uiPresets | T[K] | K | string;
+        values?: T[K][] | any[];
+        default?: T[K];
+        private?: boolean;
+    };
+};

package/dist/base/demoer/types.js

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

package/dist/base/divider/Divider.demo.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">import Divider from "./Divider.svelte";
+import ComponentDemo from "../demoer/DemoerComponent.svelte";
+import Demoer from "../demoer/Demoer.svelte";
+import DemoPage from "../demoer/DemoPage.svelte";
+import { parameters, componentArgs } from "./types.js";
+let codeSlot = `
+	<Divider />`;
+</script>
+
+<ComponentDemo
+	component="Divider"
+	cite="What is separating before from after is not a time nor a place : it's only a component <br /> B. Franklin,
+1854"
+>
+	<div class=" flex-v gap-small">
+		<DemoPage component="Divider" code={codeSlot}>
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<div class="pad">
+						<div class="pad">What is before</div>
+						<Divider {...activeParams} />
+						<div class="pad">And what is after</div>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/base/divider/Divider.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 DividerProps = typeof __propDef.props;
+export type DividerEvents = typeof __propDef.events;
+export type DividerSlots = typeof __propDef.slots;
+export default class Divider extends SvelteComponent<DividerProps, DividerEvents, DividerSlots> {
+}
+export {};

package/dist/base/divider/Divider.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">import { uiPresets } from "../../utils/engine/presets.js";
+let {
+  class: className = "",
+  style,
+  element = null,
+  dense: density = "default",
+  orientation: direction = "horizontal",
+  expansion = "full",
+  shadowed: shadow = false,
+  color
+} = $props();
+let extensionClass = {
+  horizontal: {
+    full: "",
+    padded: "marg-ii-12",
+    centered: "marg-ii-6"
+  },
+  vertical: {
+    full: "",
+    padded: "marg-ii-12",
+    centered: "marg-ii-6"
+  }
+};
+let addStyle = style ?? "";
+const shadowClass = $derived(shadow ? "shad-3" : "");
+if (color) addStyle += `--sld-color-border:${color};`;
+if (direction === "vertical" && (element?.nextElementSibling ?? element?.previousElementSibling)) {
+  let maxHeight = (element?.previousElementSibling ?? element?.nextElementSibling)?.getBoundingClientRect()?.height;
+  addStyle += `height:calc(${maxHeight}px - ${getDensity(density)});`;
+}
+function getDensity(density2) {
+  return uiPresets.density?.[density2];
+}
+switch (direction) {
+  case "horizontal":
+    addStyle += `margin-top:${getDensity(density)};margin-bottom:${getDensity(density)};`;
+    break;
+  case "vertical":
+    addStyle += `margin-left:${getDensity(density)};margin-right:${getDensity(density)};`;
+    break;
+}
+</script>
+
+<hr
+	bind:this={element}
+	class="{extensionClass[direction][expansion]} {className} {shadowClass}"
+	class:vertical={direction === 'vertical'}
+	style={addStyle}
+/>
+
+<style>:root {
+  --divider-border-top: var(--sld-color-border, var(--sld-color-foreground-alpha-high, #333));
+  --divider-background-color: var(--sld-color-border, var(--sld-color-foreground-alpha-mid, #333));
+  --divider-border-right: var(--sld-color-border, var(--sld-color-foreground-alpha-mid, #333));
+}
+
+hr {
+  border: none;
+  border-top: 1px solid var(--divider-border-top);
+  background-color: var(--divider-background-color);
+  display: block;
+}
+
+hr.vertical {
+  width: 1px;
+  border-right: 1px solid var(--divider-border-right);
+}</style>

package/dist/base/divider/Divider.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+/** extends button */
+import type { ElementProps } from '../../types/index.js';
+declare const __propDef: {
+    props: {
+        class?: string;
+        style?: CSSStyleDeclaration;
+        element?: HTMLDivElement | null;
+        dense?: ElementProps["dense"];
+        orientation?: ElementProps["orientation"];
+        expansion?: "full" | "padded" | "centered";
+        shadowed?: boolean;
+        color?: string | null;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type DividerProps_ = typeof __propDef.props;
+export { DividerProps_ as DividerProps };
+export type DividerEvents = typeof __propDef.events;
+export type DividerSlots = typeof __propDef.slots;
+export default class Divider extends SvelteComponent<DividerProps_, DividerEvents, DividerSlots> {
+}