@medyll/idae-slotui-svelte 0.119.0 → 0.121.0

package/dist/index.js

@@ -1,5 +1,6 @@
 // auto exports of entry components
 export * from './componentCite.js';
+export * from './csss/csss.js';
 export * as windowMinCss from './slotui-css/window.min.css';
 export * as windowCss from './slotui-css/window.css';
 export * as treeMinCss from './slotui-css/tree.min.css';
@@ -108,16 +109,15 @@ export * as autoCompleteMinCss from './slotui-css/auto-complete.min.css';
 export * as autoCompleteCss from './slotui-css/auto-complete.css';
 export * as alertMinCss from './slotui-css/alert.min.css';
 export * as alertCss from './slotui-css/alert.css';
-export * from './csss/csss.js';
+export * from './utils/stylesheet/utils.js';
+export * from './utils/stylesheet/types.js';
+export { default as StyleSheet } from './utils/stylesheet/StyleSheet.svelte';
 export * from './utils/uses/toggler.js';
 export * from './utils/uses/positioner.js';
 export * from './utils/uses/navigation.js';
 export * from './utils/uses/makeOnTop.js';
 export * from './utils/uses/event.js';
 export * from './utils/uses/draggabler.js';
-export * from './utils/stylesheet/utils.js';
-export * from './utils/stylesheet/types.js';
-export { default as StyleSheet } from './utils/stylesheet/StyleSheet.svelte';
 export { default as Slotted } from './utils/slotted/Slotted.svelte';
 export * from './utils/looper/types.js';
 export { default as Looper } from './utils/looper/Looper.svelte';
@@ -129,14 +129,14 @@ export * from './utils/engine/presets.js';
 export * from './utils/engine/engine.js';
 export * from './utils/engine/elem.js';
 export * from './utils/effects/transitions.js';
-export { default as Css } from './utils/css/Css.svelte';
 export { default as ContextRooter } from './utils/contextRooter/ContextRooter.svelte';
 export * from './utils/content/types.js';
 export { default as Content } from './utils/content/Content.svelte';
+export { default as Css } from './utils/css/Css.svelte';
+export { default as Window } from './ui/window/Window.svelte';
 export * from './ui/window/types.js';
 export * from './ui/window/store.js';
 export * from './ui/window/actions.svelte.js';
-export { default as Window } from './ui/window/Window.svelte';
 export * from './ui/tree/types.js';
 export * from './ui/tree/tree.utils.js';
 export { default as Tree } from './ui/tree/Tree.svelte';
@@ -144,27 +144,26 @@ export * from './ui/toolBar/types.js';
 export { default as ToolBar } from './ui/toolBar/ToolBar.svelte';
 export * from './ui/toggleBar/types.js';
 export { default as ToggleBar } from './ui/toggleBar/ToggleBar.svelte';
-export * from './ui/toast/types.js';
-export * from './ui/toast/store.js';
-export { default as Toaster } from './ui/toast/Toaster.svelte';
-export { default as Toast } from './ui/toast/Toast.svelte';
 export { default as ThemeSwitcher } from './ui/themeswitcher/ThemeSwitcher.svelte';
 export * from './ui/taskbar/types.js';
-export { default as Taskbar } from './ui/taskbar/Taskbar.svelte';
 export { default as TaskBarContent } from './ui/taskbar/TaskBarContent.svelte';
-export { default as BootMenu } from './ui/startMenu/BootMenu.svelte';
-export { default as ServiceBox } from './ui/serviceBox/ServiceBox.svelte';
+export { default as Taskbar } from './ui/taskbar/Taskbar.svelte';
+export * from './ui/toast/types.js';
+export { default as Toaster } from './ui/toast/Toaster.svelte';
+export { default as Toast } from './ui/toast/Toast.svelte';
+export * from './ui/toast/store.js';
 export * from './ui/preview/types.js';
-export { default as Preview } from './ui/preview/Preview.svelte';
-export * from './ui/popper/usePopper.js';
-export * from './ui/popper/types.js';
-export * from './ui/popper/actions.js';
-export { default as Popper } from './ui/popper/Popper.svelte';
 export * from './ui/panel/types.js';
-export { default as Paneler } from './ui/panel/Paneler.svelte';
 export { default as PanelSlide } from './ui/panel/PanelSlide.svelte';
 export { default as PanelGrid } from './ui/panel/PanelGrid.svelte';
+export { default as Paneler } from './ui/panel/Paneler.svelte';
 export { default as Panel } from './ui/panel/Panel.svelte';
+export * from './ui/popper/usePopper.js';
+export * from './ui/popper/types.js';
+export { default as Popper } from './ui/popper/Popper.svelte';
+export * from './ui/popper/actions.js';
+export { default as BootMenu } from './ui/startMenu/BootMenu.svelte';
+export { default as ServiceBox } from './ui/serviceBox/ServiceBox.svelte';
 export * from './ui/menuList/types.js';
 export { default as MenuListTitle } from './ui/menuList/MenuListTitle.svelte';
 export { default as MenuListItem } from './ui/menuList/MenuListItem.svelte';
@@ -180,20 +179,16 @@ export * from './ui/login/store.js';
 export { default as Login } from './ui/login/Login.svelte';
 export * from './ui/frame/types.js';
 export { default as Frame } from './ui/frame/Frame.svelte';
+export { default as BootStrApp } from './ui/bootstrapp/BootStrApp.svelte';
 export * from './ui/chromeFrame/types.js';
-export * from './ui/chromeFrame/chromeFrame.utils.js';
-export * from './ui/chromeFrame/chromeFrame.store.js';
 export { default as ChromeFrameList } from './ui/chromeFrame/ChromeFrameList.svelte';
 export { default as ChromeFrameButtonList } from './ui/chromeFrame/ChromeFrameButtonList.svelte';
+export * from './ui/chromeFrame/chromeFrame.utils.js';
 export { default as ChromeFrame } from './ui/chromeFrame/ChromeFrame.svelte';
-export { default as BootStrApp } from './ui/bootstrapp/BootStrApp.svelte';
+export * from './ui/chromeFrame/chromeFrame.store.js';
 export * from './styles/slotuisheet/utils.js';
 export * from './styles/slotuisheet/types.js';
 export { default as SlotuiSheet } from './styles/slotuisheet/SlotuiSheet.svelte';
-export * from './navigation/tabs/types.js';
-export { default as Tabs } from './navigation/tabs/Tabs.svelte';
-export * from './navigation/drawer/types.js';
-export { default as Drawer } from './navigation/drawer/Drawer.svelte';
 export * from './data/sorter/types.js';
 export { default as Sorterer } from './data/sorter/Sorterer.svelte';
 export { default as Sorter } from './data/sorter/Sorter.svelte';
@@ -204,8 +199,6 @@ export { default as ListItem } from './data/list/ListItem.svelte';
 export { default as List } from './data/list/List.svelte';
 export * from './data/jsoner/types.js';
 export { default as Jsoner } from './data/jsoner/Jsoner.svelte';
-export * from './data/grouper/types.js';
-export { default as Grouper } from './data/grouper/Grouper.svelte';
 export * from './data/finder/types.js';
 export { default as Finder } from './data/finder/Finder.svelte';
 export * from './data/dataList/types.js';
@@ -213,17 +206,19 @@ export { default as DataListRow } from './data/dataList/DataListRow.svelte';
 export { default as DataListHead } from './data/dataList/DataListHead.svelte';
 export { default as DataListCell } from './data/dataList/DataListCell.svelte';
 export { default as DataList } from './data/dataList/DataList.svelte';
+export * from './data/grouper/types.js';
+export { default as Grouper } from './data/grouper/Grouper.svelte';
 export * from './controls/textfield/types.js';
 export { default as TextField } from './controls/textfield/TextField.svelte';
-export * from './controls/switch/types.js';
-export { default as Switch } from './controls/switch/Switch.svelte';
 export * from './controls/stepper/types.js';
 export { default as Stepper } from './controls/stepper/Stepper.svelte';
-export * from './controls/slider/types.js';
-export { default as Slider } from './controls/slider/Slider.svelte';
+export * from './controls/switch/types.js';
+export { default as Switch } from './controls/switch/Switch.svelte';
 export { default as Select } from './controls/select/Select.svelte';
 export * from './controls/rating/types.js';
 export { default as Rating } from './controls/rating/Rating.svelte';
+export * from './controls/slider/types.js';
+export { default as Slider } from './controls/slider/Slider.svelte';
 export * from './controls/progress/types.js';
 export { default as Progress } from './controls/progress/Progress.svelte';
 export * from './controls/inplaceedit/types.js';
@@ -232,31 +227,28 @@ export * from './controls/confirm/types.js';
 export { default as Confirm } from './controls/confirm/Confirm.svelte';
 export * from './controls/checkbox/types.js';
 export { default as Checkbox } from './controls/checkbox/Checkbox.svelte';
+export * from './controls/autocomplete/types.js';
+export { default as AutoComplete } from './controls/autocomplete/AutoComplete.svelte';
 export * from './controls/button/types.js';
 export { default as IconButton } from './controls/button/IconButton.svelte';
 export { default as ButtonMenu } from './controls/button/ButtonMenu.svelte';
 export { default as ButtonAction } from './controls/button/ButtonAction.svelte';
 export { default as Button } from './controls/button/Button.svelte';
-export * from './controls/autocomplete/types.js';
-export { default as AutoComplete } from './controls/autocomplete/AutoComplete.svelte';
 export * from './base/titleBar/types.js';
 export { default as TitleBar } from './base/titleBar/TitleBar.svelte';
 export * from './base/paper/type.js';
 export { default as Paper } from './base/paper/Paper.svelte';
 export * from './base/icon/types.js';
 export { default as Icon } from './base/icon/Icon.svelte';
-export * from './base/divider/types.js';
-export { default as Divider } from './base/divider/Divider.svelte';
 export * from './base/demoer/types.js';
-export * from './base/demoer/demoer.utils.js';
+export { default as DemoPage } from './base/demoer/DemoPage.svelte';
 export { default as DemoerComponent } from './base/demoer/DemoerComponent.svelte';
 export { default as DemoerCode } from './base/demoer/DemoerCode.svelte';
+export * from './base/demoer/demoer.utils.js';
 export { default as Demoer } from './base/demoer/Demoer.svelte';
-export { default as DemoPage } from './base/demoer/DemoPage.svelte';
 export { default as Debug } from './base/debug/Debug.svelte';
-export * from './base/contentSwitcher/useContentSwitcher.js';
-export * from './base/contentSwitcher/types.js';
-export { default as ContentSwitcher } from './base/contentSwitcher/ContentSwitcher.svelte';
+export * from './base/divider/types.js';
+export { default as Divider } from './base/divider/Divider.svelte';
 export * from './base/columner/types.js';
 export { default as Columner } from './base/columner/Columner.svelte';
 export { default as Column } from './base/columner/Column.svelte';
@@ -268,6 +260,9 @@ export * from './base/breadCrumb/types.js';
 export { default as BreadCrumb } from './base/breadCrumb/BreadCrumb.svelte';
 export * from './base/box/types.js';
 export { default as Box } from './base/box/Box.svelte';
+export * from './base/contentSwitcher/useContentSwitcher.js';
+export * from './base/contentSwitcher/types.js';
+export { default as ContentSwitcher } from './base/contentSwitcher/ContentSwitcher.svelte';
 export * from './base/badge/types.js';
 export { default as Badge } from './base/badge/Badge.svelte';
 export * from './base/backdrop/useBackDrop.js';
@@ -277,9 +272,13 @@ export * from './base/avatar/types.js';
 export { default as Avatar } from './base/avatar/Avatar.svelte';
 export * from './base/alert/types.js';
 export { default as Alert } from './base/alert/Alert.svelte';
+export * from './navigation/tabs/types.js';
+export { default as Tabs } from './navigation/tabs/Tabs.svelte';
+export * from './navigation/drawer/types.js';
+export { default as Drawer } from './navigation/drawer/Drawer.svelte';
+export * from './utils/uses/stickTo/stickTo.js';
 export * from './utils/uses/sx4u/sx4uPreprocess.js';
 export * from './utils/uses/sx4u/sx4u.js';
-export * from './utils/uses/stickTo/stickTo.js';
+export * from './utils/uses/autofocus/autofocus.js';
 export * from './utils/uses/resizer/resizer.js';
 export * from './utils/uses/clickAway/clickAway.js';
-export * from './utils/uses/autofocus/autofocus.js';

package/dist/navigation/drawer/Drawer.demo.svelte

@@ -1,52 +1,52 @@
-<script lang="ts">
-	import Drawer from './Drawer.svelte';
-
-	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
-	import Demoer from '../../base/demoer/Demoer.svelte';
-	import DemoPage from '../../base/demoer/DemoPage.svelte';
-	import Icon from '../../base/icon/Icon.svelte';
-
-	import { parameters, componentArgs } from './types.js';
-
-	let code = `
-<Drawer >
-	{#snippet drawerIcon()}
-		<Icon icon="window" />
-	{/snippet}
-	{#snippet drawerTop()}
-		<div class="pad-2">Drawer's title</div>
-	{/snippet}
-	<div class="pad-2">Drawer's content</div>
-	{#snippet drawerBottom()}
-		<div class="pad-2">Drawer's bottom zone</div>
-	{/snippet}
-</Drawer>s`;
-</script>
-
-<ComponentDemo component="Drawer">
-	<div class="flex-v gap-medium w-full">
-		<DemoPage component="Drawer" {code}>
-			<Demoer {parameters} {componentArgs}>
-				{#snippet children({ activeParams })}
-					<div style="width:450px;height:500px;position:relative;" class="pad flex-h">
-						<div class="flex-main pad-4 text-right">
-							Side content Side content Side content Side content
-						</div>
-						<Drawer {...activeParams}>
-							{#snippet drawerIcon()}
-								<Icon icon="window" />
-							{/snippet}
-							{#snippet drawerTop()}
-								<div class="pad-2">Drawer's title</div>
-							{/snippet}
-							{#snippet drawerFooter()}
-								<div class="pad-2">Drawer's bottom zone</div>
-							{/snippet}
-							<div class="pad-2">Drawer's content</div>
-						</Drawer>
-					</div>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import Drawer from './Drawer.svelte';
+
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import Demoer from '../../base/demoer/Demoer.svelte';
+	import DemoPage from '../../base/demoer/DemoPage.svelte';
+	import Icon from '../../base/icon/Icon.svelte';
+
+	import { parameters, componentArgs } from './types.js';
+
+	let code = `
+<Drawer >
+	{#snippet drawerIcon()}
+		<Icon icon="window" />
+	{/snippet}
+	{#snippet drawerTop()}
+		<div class="pad-2">Drawer's title</div>
+	{/snippet}
+	<div class="pad-2">Drawer's content</div>
+	{#snippet drawerBottom()}
+		<div class="pad-2">Drawer's bottom zone</div>
+	{/snippet}
+</Drawer>s`;
+</script>
+
+<ComponentDemo component="Drawer">
+	<div class="flex-v gap-medium w-full">
+		<DemoPage component="Drawer" {code}>
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<div style="width:450px;height:500px;position:relative;" class="pad flex-h">
+						<div class="flex-main pad-4 text-right">
+							Side content Side content Side content Side content
+						</div>
+						<Drawer {...activeParams}>
+							{#snippet drawerIcon()}
+								<Icon icon="window" />
+							{/snippet}
+							{#snippet drawerTop()}
+								<div class="pad-2">Drawer's title</div>
+							{/snippet}
+							{#snippet drawerFooter()}
+								<div class="pad-2">Drawer's bottom zone</div>
+							{/snippet}
+							<div class="pad-2">Drawer's content</div>
+						</Drawer>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/navigation/drawer/Drawer.svelte

@@ -1,165 +1,165 @@
-<script lang="ts" generics="T">
-	import IconButton from '../../controls/button/IconButton.svelte';
-	import Button from '../../controls/button/Button.svelte';
-	import Icon from '../../base/icon/Icon.svelte';
-	import type { DrawerProps } from './types.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { ExpandProps } from '../../types/index.js';
-
-	/** @deprecated use actions.toggle */
-	export const actions = {
-		toggle: (visibleSate?: boolean) => {
-			isOpen = visibleSate !== undefined ? visibleSate : !isOpen;
-		}
-	};
-	export function toggle(visibleSate?: boolean) {
-		isOpen = visibleSate !== undefined ? visibleSate : !isOpen;
-	}
-
-	let {
-		class: className = '',
-		style,
-		primary = undefined,
-		secondary = undefined,
-		icon,
-		hideCloseIcon = $bindable(false),
-		showOpenerIcon = false,
-		element = $bindable(),
-		isOpen = $bindable(true),
-		flow = $bindable('fixed'),
-		stickTo = $bindable('left'),
-		defaultWidth = '288px',
-		defaultVisibleArea = '0px',
-		defaultHeight = '288px',
-		drawerContent,
-		drawerIcon,
-		drawerTitle,
-		drawerPrimary,
-		drawerSecondary,
-		drawerTop,
-		drawerFooter,
-		children,
-		...rest
-	}: ExpandProps<DrawerProps<T>> = $props();
-
-	let dspStyle: string;
-
-	const stickToStyle = {
-		right: 'right:0;top:0;height:100%;height:100%;',
-		left: 'left:0;top:0;bottom:0;height:100%;height:100%;',
-		top: `left:0;right:0;top:0;height:${defaultHeight};`,
-		bottom: `left:0;right:0;bottom:0;height:${defaultHeight};`
-	};
-
-	const openerIconStyle = {
-		right: 'left:-16px;top:8px;',
-		left: 'right:-16px;top:8px;',
-		top: 'bottom:-16px;right:8px;',
-		bottom: 'top:-16px;right:8px;'
-	};
-
-	let sensSuffix = '';
-	let dimKeyVary: string;
-	let widthStyle: string;
-	let finalStyle: string = $state('');
-	let sens: number = 0;
-	$effect(() => {
-		dimKeyVary = ['top', 'bottom'].includes(stickTo) ? 'height' : 'width';
-		switch (stickTo) {
-			case 'top':
-				sensSuffix = isOpen ? 'up' : 'down';
-				sens = isOpen ? 180 : 0;
-				break;
-			case 'right':
-				sensSuffix = isOpen ? 'right' : 'left';
-				sens = isOpen ? 180 : 0;
-				break;
-			case 'bottom':
-				sensSuffix = isOpen ? 'down' : 'up';
-				sens = isOpen ? 180 : 0;
-				break;
-			case 'left':
-				sensSuffix = isOpen ? 'left' : 'right';
-				sens = isOpen ? 180 : 0;
-				break;
-		}
-	});
-
-	$effect(() => {
-		dspStyle = isOpen ? 'flex' : 'flex';
-		widthStyle = isOpen ? defaultWidth : defaultVisibleArea;
-		finalStyle = `display:${dspStyle};position:${flow};${stickToStyle[stickTo]};${dimKeyVary}:${widthStyle};${style};`;
-	});
-</script>
-
-<div
-	bind:this={element}
-	class="drawer {className}"
-	style={finalStyle}
-	aria-expanded={isOpen}
-	aria-orientation="vertical"
-	{...rest}
->
-	{#if showOpenerIcon}
-		<div class="drawer-opener" style={openerIconStyle[stickTo]}>
-			<IconButton
-				--sld-button-radius="50%"
-				icon={'chevron-right'}
-				rotation={sens}
-				style="cursor:pointer;"
-				onclick={() => actions.toggle()}
-			/>
-		</div>
-	{/if}
-	{#if isOpen}
-		{#if drawerTop || drawerIcon || Boolean(primary) || Boolean(icon)}
-			<header class="drawer-header">
-				{#if Boolean(icon) || drawerIcon}
-					<div class="drawer-icon">
-						<Slotted child={drawerIcon}>
-							<Icon {icon} />
-						</Slotted>
-					</div>
-				{/if}
-				<div class="drawer-header-bar">
-					<div class="drawer-header-bar-title">
-						<Slotted child={drawerTitle}>
-							<Slotted child={drawerPrimary}>
-								{#if primary}
-									<div style="font-size:18px;">{primary}</div>
-								{/if}
-							</Slotted>
-							<Slotted child={drawerSecondary}>
-								{#if secondary}
-									<div>{secondary}</div>
-								{/if}
-							</Slotted>
-						</Slotted>
-					</div>
-					<Slotted child={drawerTop}></Slotted>
-				</div>
-				{#if !hideCloseIcon && !showOpenerIcon}
-					<Button
-						onclick={() => {
-							toggle();
-						}}
-						icon="window-close"
-						variant="naked"
-					/>
-				{/if}
-			</header>
-		{/if}
-		<div class="drawer-content">
-			<Slotted child={drawerContent}>
-				<Slotted child={children}></Slotted>
-			</Slotted>
-		</div>
-		<footer>
-			<Slotted child={drawerFooter}></Slotted>
-		</footer>
-	{/if}
-</div>
-
+<script lang="ts" generics="T">
+	import IconButton from '../../controls/button/IconButton.svelte';
+	import Button from '../../controls/button/Button.svelte';
+	import Icon from '../../base/icon/Icon.svelte';
+	import type { DrawerProps } from './types.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { ExpandProps } from '../../types/index.js';
+
+	/** @deprecated use actions.toggle */
+	export const actions = {
+		toggle: (visibleSate?: boolean) => {
+			isOpen = visibleSate !== undefined ? visibleSate : !isOpen;
+		}
+	};
+	export function toggle(visibleSate?: boolean) {
+		isOpen = visibleSate !== undefined ? visibleSate : !isOpen;
+	}
+
+	let {
+		class: className = '',
+		style,
+		primary = undefined,
+		secondary = undefined,
+		icon,
+		hideCloseIcon = $bindable(false),
+		showOpenerIcon = false,
+		element = $bindable(),
+		isOpen = $bindable(true),
+		flow = $bindable('fixed'),
+		stickTo = $bindable('left'),
+		defaultWidth = '288px',
+		defaultVisibleArea = '0px',
+		defaultHeight = '288px',
+		drawerContent,
+		drawerIcon,
+		drawerTitle,
+		drawerPrimary,
+		drawerSecondary,
+		drawerTop,
+		drawerFooter,
+		children,
+		...rest
+	}: ExpandProps<DrawerProps<T>> = $props();
+
+	let dspStyle: string;
+
+	const stickToStyle = {
+		right: 'right:0;top:0;height:100%;height:100%;',
+		left: 'left:0;top:0;bottom:0;height:100%;height:100%;',
+		top: `left:0;right:0;top:0;height:${defaultHeight};`,
+		bottom: `left:0;right:0;bottom:0;height:${defaultHeight};`
+	};
+
+	const openerIconStyle = {
+		right: 'left:-16px;top:8px;',
+		left: 'right:-16px;top:8px;',
+		top: 'bottom:-16px;right:8px;',
+		bottom: 'top:-16px;right:8px;'
+	};
+
+	let sensSuffix = '';
+	let dimKeyVary: string;
+	let widthStyle: string;
+	let finalStyle: string = $state('');
+	let sens: number = 0;
+	$effect(() => {
+		dimKeyVary = ['top', 'bottom'].includes(stickTo) ? 'height' : 'width';
+		switch (stickTo) {
+			case 'top':
+				sensSuffix = isOpen ? 'up' : 'down';
+				sens = isOpen ? 180 : 0;
+				break;
+			case 'right':
+				sensSuffix = isOpen ? 'right' : 'left';
+				sens = isOpen ? 180 : 0;
+				break;
+			case 'bottom':
+				sensSuffix = isOpen ? 'down' : 'up';
+				sens = isOpen ? 180 : 0;
+				break;
+			case 'left':
+				sensSuffix = isOpen ? 'left' : 'right';
+				sens = isOpen ? 180 : 0;
+				break;
+		}
+	});
+
+	$effect(() => {
+		dspStyle = isOpen ? 'flex' : 'flex';
+		widthStyle = isOpen ? defaultWidth : defaultVisibleArea;
+		finalStyle = `display:${dspStyle};position:${flow};${stickToStyle[stickTo]};${dimKeyVary}:${widthStyle};${style};`;
+	});
+</script>
+
+<div
+	bind:this={element}
+	class="drawer {className}"
+	style={finalStyle}
+	aria-expanded={isOpen}
+	aria-orientation="vertical"
+	{...rest}
+>
+	{#if showOpenerIcon}
+		<div class="drawer-opener" style={openerIconStyle[stickTo]}>
+			<IconButton
+				--sld-button-radius="50%"
+				icon={'chevron-right'}
+				rotation={sens}
+				style="cursor:pointer;"
+				onclick={() => actions.toggle()}
+			/>
+		</div>
+	{/if}
+	{#if isOpen}
+		{#if drawerTop || drawerIcon || Boolean(primary) || Boolean(icon)}
+			<header class="drawer-header">
+				{#if Boolean(icon) || drawerIcon}
+					<div class="drawer-icon">
+						<Slotted child={drawerIcon}>
+							<Icon {icon} />
+						</Slotted>
+					</div>
+				{/if}
+				<div class="drawer-header-bar">
+					<div class="drawer-header-bar-title">
+						<Slotted child={drawerTitle}>
+							<Slotted child={drawerPrimary}>
+								{#if primary}
+									<div style="font-size:18px;">{primary}</div>
+								{/if}
+							</Slotted>
+							<Slotted child={drawerSecondary}>
+								{#if secondary}
+									<div>{secondary}</div>
+								{/if}
+							</Slotted>
+						</Slotted>
+					</div>
+					<Slotted child={drawerTop}></Slotted>
+				</div>
+				{#if !hideCloseIcon && !showOpenerIcon}
+					<Button
+						onclick={() => {
+							toggle();
+						}}
+						icon="window-close"
+						variant="naked"
+					/>
+				{/if}
+			</header>
+		{/if}
+		<div class="drawer-content">
+			<Slotted child={drawerContent}>
+				<Slotted child={children}></Slotted>
+			</Slotted>
+		</div>
+		<footer>
+			<Slotted child={drawerFooter}></Slotted>
+		</footer>
+	{/if}
+</div>
+
 <style global>:root {
   --drawer-color: inherit;
   --drawer-background-color: var(--sld-color-paper-alpha-low);
@@ -247,4 +247,4 @@
   position: relative;
   overflow: hidden;
   width: 100%;
-}</style>
+}</style>