@medyll/idae-slotui-svelte 0.3.0

package/dist/index.js

@@ -0,0 +1,286 @@
+// Reexport of entry components
+export * from './_css/alert.css';
+export * from './_css/alert.min.css';
+export * from './_css/auto-complete.css';
+export * from './_css/auto-complete.min.css';
+export * from './_css/avatar.css';
+export * from './_css/avatar.min.css';
+export * from './_css/backdrop.css';
+export * from './_css/backdrop.min.css';
+export * from './_css/badge.css';
+export * from './_css/badge.min.css';
+export * from './_css/boot-menu.css';
+export * from './_css/boot-menu.min.css';
+export * from './_css/box.css';
+export * from './_css/box.min.css';
+export * from './_css/breadCrumb.css';
+export * from './_css/breadCrumb.min.css';
+export * from './_css/button-action.css';
+export * from './_css/button-action.min.css';
+export * from './_css/button-menu.css';
+export * from './_css/button-menu.min.css';
+export * from './_css/button.css';
+export * from './_css/button.min.css';
+export * from './_css/buttonMenu.css';
+export * from './_css/buttonMenu.min.css';
+export * from './_css/cartouche.css';
+export * from './_css/cartouche.min.css';
+export * from './_css/checkbox.css';
+export * from './_css/checkbox.min.css';
+export * from './_css/chipper.css';
+export * from './_css/chipper.min.css';
+export * from './_css/chrome-frame.css';
+export * from './_css/chrome-frame.min.css';
+export * from './_css/confirm.css';
+export * from './_css/confirm.min.css';
+export * from './_css/content-switcher.css';
+export * from './_css/content-switcher.min.css';
+export * from './_css/csss.css';
+export * from './_css/csss.min.css';
+export * from './_css/dataList.css';
+export * from './_css/dataList.min.css';
+export * from './_css/divider.css';
+export * from './_css/divider.min.css';
+export * from './_css/drawer.css';
+export * from './_css/drawer.min.css';
+export * from './_css/finder.css';
+export * from './_css/finder.min.css';
+export * from './_css/frame.css';
+export * from './_css/frame.min.css';
+export * from './_css/icon.css';
+export * from './_css/icon.min.css';
+export * from './_css/loader.css';
+export * from './_css/loader.min.css';
+export * from './_css/marquee.css';
+export * from './_css/marquee.min.css';
+export * from './_css/menu-list.css';
+export * from './_css/menu-list.min.css';
+export * from './_css/menu.css';
+export * from './_css/menu.min.css';
+export * from './_css/panel.css';
+export * from './_css/panel.min.css';
+export * from './_css/paper.css';
+export * from './_css/paper.min.css';
+export * from './_css/popper.css';
+export * from './_css/popper.min.css';
+export * from './_css/progress.css';
+export * from './_css/progress.min.css';
+export * from './_css/rating.css';
+export * from './_css/rating.min.css';
+export * from './_css/select.css';
+export * from './_css/select.min.css';
+export * from './_css/slider.css';
+export * from './_css/slider.min.css';
+export * from './_css/slotui-combined.css';
+export * from './_css/slotui-mixins.css';
+export * from './_css/slotui-mixins.min.css';
+export * from './_css/slotui-presets.css';
+export * from './_css/slotui-presets.min.css';
+export * from './_css/slotui-sheet.css';
+export * from './_css/slotui-sheet.min.css';
+export * from './_css/sorterer.css';
+export * from './_css/sorterer.min.css';
+export * from './_css/stepper.css';
+export * from './_css/stepper.min.css';
+export * from './_css/stylesheet-container.css';
+export * from './_css/stylesheet-container.min.css';
+export * from './_css/stylesheet.css';
+export * from './_css/stylesheet.min.css';
+export * from './_css/switch.css';
+export * from './_css/switch.min.css';
+export * from './_css/tabs.css';
+export * from './_css/tabs.min.css';
+export * from './_css/taskbar.css';
+export * from './_css/taskbar.min.css';
+export * from './_css/textfield.css';
+export * from './_css/textfield.min.css';
+export * from './_css/title-bar.css';
+export * from './_css/title-bar.min.css';
+export * from './_css/toggle-bar.css';
+export * from './_css/toggle-bar.min.css';
+export * from './_css/toolbar.css';
+export * from './_css/toolbar.min.css';
+export * from './_css/tree.css';
+export * from './_css/tree.min.css';
+export * from './_css/window.css';
+export * from './_css/window.min.css';
+export { default as Alert } from './base/alert/Alert.svelte';
+export * from './base/alert/types.js';
+export { default as Avatar } from './base/avatar/Avatar.svelte';
+export * from './base/avatar/types.js';
+export { default as Backdrop } from './base/backdrop/Backdrop.svelte';
+export * from './base/backdrop/types.js';
+export * from './base/backdrop/useBackDrop.js';
+export { default as Badge } from './base/badge/Badge.svelte';
+export * from './base/badge/types.js';
+export { default as Box } from './base/box/Box.svelte';
+export * from './base/box/types.js';
+export { default as BreadCrumb } from './base/breadCrumb/BreadCrumb.svelte';
+export * from './base/breadCrumb/types.js';
+export { default as Cartouche } from './base/cartouche/Cartouche.svelte';
+export * from './base/cartouche/types.js';
+export { default as Chipper } from './base/chipper/Chipper.svelte';
+export * from './base/chipper/types.js';
+export { default as Column } from './base/columner/Column.svelte';
+export { default as Columner } from './base/columner/Columner.svelte';
+export * from './base/columner/types.js';
+export { default as ContentSwitcher } from './base/contentSwitcher/ContentSwitcher.svelte';
+export * from './base/contentSwitcher/types.js';
+export * from './base/contentSwitcher/useContentSwitcher.js';
+export { default as Debug } from './base/debug/Debug.svelte';
+export { default as Demoer } from './base/demoer/Demoer.svelte';
+export * from './base/demoer/demoer.utils.js';
+export { default as DemoerCode } from './base/demoer/DemoerCode.svelte';
+export { default as DemoerComponent } from './base/demoer/DemoerComponent.svelte';
+export { default as DemoPage } from './base/demoer/DemoPage.svelte';
+export * from './base/demoer/types.js';
+export { default as Divider } from './base/divider/Divider.svelte';
+export * from './base/divider/types.js';
+export { default as Icon } from './base/icon/Icon.svelte';
+export * from './base/icon/types.js';
+export { default as Paper } from './base/paper/Paper.svelte';
+export * from './base/paper/type.js';
+export { default as TitleBar } from './base/titleBar/TitleBar.svelte';
+export * from './base/titleBar/types.js';
+export * from './componentCite.js';
+export { default as AutoComplete } from './controls/autocomplete/AutoComplete.svelte';
+export * from './controls/autocomplete/types.js';
+export { default as Button } from './controls/button/Button.svelte';
+export { default as ButtonAction } from './controls/button/ButtonAction.svelte';
+export { default as ButtonMenu } from './controls/button/ButtonMenu.svelte';
+export { default as IconButton } from './controls/button/IconButton.svelte';
+export * from './controls/button/types.js';
+export { default as Checkbox } from './controls/checkbox/Checkbox.svelte';
+export * from './controls/checkbox/types.js';
+export { default as Confirm } from './controls/confirm/Confirm.svelte';
+export * from './controls/confirm/types.js';
+export { default as InPlaceEdit } from './controls/inplaceedit/InPlaceEdit.svelte';
+export * from './controls/inplaceedit/types.js';
+export { default as Progress } from './controls/progress/Progress.svelte';
+export * from './controls/progress/types.js';
+export { default as Rating } from './controls/rating/Rating.svelte';
+export * from './controls/rating/types.js';
+export { default as Select } from './controls/select/Select.svelte';
+export { default as Slider } from './controls/slider/Slider.svelte';
+export * from './controls/slider/types.js';
+export { default as Stepper } from './controls/stepper/Stepper.svelte';
+export * from './controls/stepper/types.js';
+export { default as Switch } from './controls/switch/Switch.svelte';
+export * from './controls/switch/types.js';
+export { default as TextField } from './controls/textfield/TextField.svelte';
+export * from './controls/textfield/types.js';
+export * from './csss/csss.js';
+export { default as DataList } from './data/dataList/DataList.svelte';
+export { default as DataListCell } from './data/dataList/DataListCell.svelte';
+export { default as DataListHead } from './data/dataList/DataListHead.svelte';
+export { default as DataListRow } from './data/dataList/DataListRow.svelte';
+export * from './data/dataList/types.js';
+export { default as Finder } from './data/finder/Finder.svelte';
+export * from './data/finder/types.js';
+export { default as Grouper } from './data/grouper/Grouper.svelte';
+export * from './data/grouper/types.js';
+export { default as Jsoner } from './data/jsoner/Jsoner.svelte';
+export * from './data/jsoner/types.js';
+export { default as List } from './data/list/List.svelte';
+export { default as ListItem } from './data/list/ListItem.svelte';
+export { default as ListTitle } from './data/list/ListTitle.svelte';
+export { default as Loader } from './data/loader/Loader.svelte';
+export * from './data/loader/types.js';
+export { default as Sorter } from './data/sorter/Sorter.svelte';
+export { default as Sorterer } from './data/sorter/Sorterer.svelte';
+export * from './data/sorter/types.js';
+export { default as Drawer } from './navigation/drawer/Drawer.svelte';
+export * from './navigation/drawer/types.js';
+export { default as Tabs } from './navigation/tabs/Tabs.svelte';
+export * from './navigation/tabs/types.js';
+export * from './styles/slotuisheet/containerConfig.css';
+export { default as SlotuiSheet } from './styles/slotuisheet/SlotuiSheet.svelte';
+export * from './styles/slotuisheet/types.js';
+export * from './styles/slotuisheet/utils.js';
+export * from './types/slotui-ambient.d.js';
+export { default as BootStrApp } from './ui/bootstrapp/BootStrApp.svelte';
+export * from './ui/chromeFrame/chromeFrame.store.js';
+export { default as ChromeFrame } from './ui/chromeFrame/ChromeFrame.svelte';
+export * from './ui/chromeFrame/chromeFrame.utils.js';
+export { default as ChromeFrameButtonList } from './ui/chromeFrame/ChromeFrameButtonList.svelte';
+export { default as ChromeFrameList } from './ui/chromeFrame/ChromeFrameList.svelte';
+export * from './ui/chromeFrame/types.js';
+export { default as Frame } from './ui/frame/Frame.svelte';
+export * from './ui/frame/types.js';
+export { default as Login } from './ui/login/Login.svelte';
+export * from './ui/login/store.js';
+export * from './ui/login/types.js';
+export { default as Marquee } from './ui/marquee/Marquee.svelte';
+export * from './ui/marquee/types.js';
+export { default as Menu } from './ui/menu/Menu.svelte';
+export { default as MenuItem } from './ui/menu/MenuItem.svelte';
+export { default as MenuTitle } from './ui/menu/MenuTitle.svelte';
+export * from './ui/menu/types.js';
+export { default as MenuList } from './ui/menuList/MenuList.svelte';
+export { default as MenuListItem } from './ui/menuList/MenuListItem.svelte';
+export { default as MenuListTitle } from './ui/menuList/MenuListTitle.svelte';
+export * from './ui/menuList/types.js';
+export { default as Panel } from './ui/panel/Panel.svelte';
+export { default as Paneler } from './ui/panel/Paneler.svelte';
+export { default as PanelGrid } from './ui/panel/PanelGrid.svelte';
+export { default as PanelSlide } from './ui/panel/PanelSlide.svelte';
+export * from './ui/panel/types.js';
+export * from './ui/popper/actions.js';
+export { default as Popper } from './ui/popper/Popper.svelte';
+export * from './ui/popper/types.js';
+export * from './ui/popper/usePopper.js';
+export { default as Preview } from './ui/preview/Preview.svelte';
+export * from './ui/preview/Preview.svelte.demo';
+export * from './ui/preview/types.js';
+export { default as ServiceBox } from './ui/serviceBox/ServiceBox.svelte';
+export { default as BootMenu } from './ui/startMenu/BootMenu.svelte';
+export { default as Taskbar } from './ui/taskbar/Taskbar.svelte';
+export { default as TaskBarContent } from './ui/taskbar/TaskBarContent.svelte';
+export * from './ui/taskbar/types.js';
+export { default as ThemeSwitcher } from './ui/themeswitcher/ThemeSwitcher.svelte';
+export * from './ui/toast/store.js';
+export { default as Toast } from './ui/toast/Toast.svelte';
+export { default as Toaster } from './ui/toast/Toaster.svelte';
+export * from './ui/toast/types.js';
+export { default as ToggleBar } from './ui/toggleBar/ToggleBar.svelte';
+export * from './ui/toggleBar/types.js';
+export { default as ToolBar } from './ui/toolBar/ToolBar.svelte';
+export * from './ui/toolBar/types.js';
+export { default as Tree } from './ui/tree/Tree.svelte';
+export * from './ui/tree/tree.utils.js';
+export * from './ui/tree/types.js';
+export * from './ui/window/actions.svelte.js';
+export * from './ui/window/store.js';
+export * from './ui/window/types.js';
+export { default as Window } from './ui/window/Window.svelte';
+export { default as Content } from './utils/content/Content.svelte';
+export * from './utils/content/types.js';
+export { default as ContextRooter } from './utils/contextRooter/ContextRooter.svelte';
+export { default as Css } from './utils/css/Css.svelte';
+export * from './utils/effects/transitions.js';
+export * from './utils/engine/elem.js';
+export * from './utils/engine/engine.js';
+export * from './utils/engine/presets.js';
+export * from './utils/engine/site.utils.js';
+export * from './utils/engine/stator.js';
+export * from './utils/engine/utils.js';
+export * from './utils/engine/wactions.utils.js';
+export { default as Looper } from './utils/looper/Looper.svelte';
+export * from './utils/looper/types.js';
+export { default as Slotted } from './utils/slotted/Slotted.svelte';
+export * from './utils/stylesheet/containerConfig.css';
+export { default as StyleSheet } from './utils/stylesheet/StyleSheet.svelte';
+export * from './utils/stylesheet/types.js';
+export * from './utils/stylesheet/utils.js';
+export * from './utils/uses/autofocus/autofocus.js';
+export * from './utils/uses/clickAway/clickAway.js';
+export * from './utils/uses/draggabler.js';
+export * from './utils/uses/event.js';
+export * from './utils/uses/makeOnTop.js';
+export * from './utils/uses/navigation.js';
+export * from './utils/uses/positioner.js';
+export * from './utils/uses/resizer/resizer.js';
+export * from './utils/uses/stickTo/stickTo.js';
+export * from './utils/uses/sx4u/sx4u.js';
+export * from './utils/uses/sx4u/sx4uPreprocess.js';
+export * from './utils/uses/toggler.js';

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

@@ -0,0 +1,48 @@
+<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.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 DrawerProps = typeof __propDef.props;
+export type DrawerEvents = typeof __propDef.events;
+export type DrawerSlots = typeof __propDef.slots;
+export default class Drawer extends SvelteComponent<DrawerProps, DrawerEvents, DrawerSlots> {
+}
+export {};

package/dist/navigation/drawer/Drawer.svelte

@@ -0,0 +1,249 @@
+<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 Slotted from "../../utils/slotted/Slotted.svelte";
+export const actions = {
+  toggle: (visibleSate) => {
+    isOpen = visibleSate !== void 0 ? visibleSate : !isOpen;
+  }
+};
+export function toggle(visibleSate) {
+  isOpen = visibleSate !== void 0 ? visibleSate : !isOpen;
+}
+let {
+  class: className = "",
+  style,
+  primary = void 0,
+  secondary = void 0,
+  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
+} = $props();
+let dspStyle;
+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;
+let widthStyle;
+let finalStyle = $state("");
+let sens = 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);
+  --drawer-backdrop-filter: blur(0px);
+  --drawer-box-shadow: var(--sld-elevation-3);
+  --drawer-border-left: var(--sld-color-primary-alpha-mid);
+  --drawer-icon-padding: 0 0.5rem;
+  --drawer-header-min-height: 48px;
+  --drawer-header-bar-title-font-size: large;
+  --drawer-content-flex: 1;
+}
+
+.drawer {
+  color: var(--drawer-color);
+  background-color: var(--drawer-background-color);
+  --webkit-backdrop-filter: var(--drawer-backdrop-filter);
+  backdrop-filter: var(--drawer-backdrop-filter);
+  z-index: 3000;
+  box-shadow: var(--drawer-box-shadow);
+  border-left: 1px solid var(--drawer-border-left);
+  overflow: visible;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  height: 100%;
+  transition: all 0.1s;
+}
+
+.drawer-icon {
+  padding: var(--drawer-icon-padding);
+  display: flex;
+  align-items: center;
+}
+
+.drawer-opener {
+  position: absolute;
+  z-index: 8600;
+}
+
+.drawer header, .drawer-header {
+  min-height: var(--drawer-header-min-height);
+  display: flex;
+  width: 100%;
+}
+
+.drawer header, .drawer-header {
+  --preset-tall: var(--sld-tall-small);
+  min-height: var(--preset-tall-small);
+  height: var(--preset-tall-small);
+}
+
+.drawer header[tall=tiny], .drawer header.tall-tiny, .drawer-header[tall=tiny], .drawer-header.tall-tiny {
+  min-height: var(--sld-tall-tiny) !important;
+}
+
+.drawer header[tall=mini], .drawer header.tall-mini, .drawer-header[tall=mini], .drawer-header.tall-mini {
+  min-height: var(--sld-tall-mini) !important;
+}
+
+.drawer header[tall=small], .drawer header.tall-small, .drawer-header[tall=small], .drawer-header.tall-small {
+  min-height: var(--sld-tall-small) !important;
+}
+
+.drawer header[tall=med], .drawer header.tall-med, .drawer-header[tall=med], .drawer-header.tall-med {
+  min-height: var(--sld-tall-med) !important;
+}
+
+.drawer header[tall=kind], .drawer header.tall-kind, .drawer-header[tall=kind], .drawer-header.tall-kind {
+  min-height: var(--sld-tall-kind) !important;
+}
+
+.drawer header[tall=auto], .drawer header.tall-auto, .drawer-header[tall=auto], .drawer-header.tall-auto {
+  min-height: var(--sld-tall-auto) !important;
+}
+
+.drawer header[tall=default], .drawer header.tall-default, .drawer-header[tall=default], .drawer-header.tall-default {
+  min-height: var(--sld-tall-default) !important;
+}
+
+.drawer header-bar, .drawer-header-bar {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.drawer header-bar-title, .drawer-header-bar-title {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: var(--drawer-header-bar-title-font-size);
+}
+
+.drawer-content {
+  flex: var(--drawer-content-flex);
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+}</style>

package/dist/navigation/drawer/Drawer.svelte.d.ts

@@ -0,0 +1,59 @@
+import { SvelteComponent } from "svelte";
+declare class __sveltets_Render<T> {
+    props(): {
+        'anchor-for'?: string;
+        element?: HTMLElement;
+        class?: string;
+        style?: string;
+        container?: `inline` | `size` | `normal`;
+        hideMaxWidth?: string;
+        hideMaxHeight?: string;
+        hideMinWidth?: string;
+        hideMinHeight?: string;
+        children?: import("svelte").Snippet<[any]>;
+        primary?: string;
+        secondary?: string;
+        icon?: string;
+        isOpen?: boolean;
+        hideCloseIcon?: boolean;
+        flow?: import("../../types/index.js").ElementProps["flow"];
+        stickTo?: import("../../types/index.js").ElementProps["position"];
+        showOpenerIcon?: boolean;
+        defaultWidth?: string;
+        defaultVisibleArea?: string;
+        dense?: import("../../types/index.js").ElementProps["dense"];
+        tall?: import("../../types/index.js").ElementProps["dense"];
+        defaultHeight?: string;
+        drawerContent?: import("svelte").Snippet;
+        drawerIcon?: import("svelte").Snippet;
+        drawerTitle?: import("svelte").Snippet;
+        drawerPrimary?: import("svelte").Snippet;
+        drawerSecondary?: import("svelte").Snippet;
+        drawerTop?: import("svelte").Snippet;
+        drawerFooter?: import("svelte").Snippet;
+        actions?: {
+            toggle: (visibleSate?: boolean) => void;
+        };
+    } & {
+        /** @deprecated use actions.toggle */ actions?: {
+            toggle: (visibleSate?: boolean) => void;
+        } | undefined;
+        toggle?: ((visibleSate?: boolean) => void) | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type DrawerProps_<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type DrawerEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type DrawerSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class Drawer<T> extends SvelteComponent<DrawerProps_<T>, DrawerEvents<T>, DrawerSlots<T>> {
+    get actions(): {
+        toggle: (visibleSate?: boolean) => void;
+    } & {
+        toggle: (visibleSate?: boolean) => void;
+    };
+    get toggle(): (visibleSate?: boolean) => void;
+}
+export {};