@medyll/idae-slotui-svelte 0.109.0 → 0.110.0

package/dist/base/alert/Alert.svelte

@@ -1,18 +1,33 @@
+<script module lang="ts">
+	import type { Snippet } from "svelte";
+	import type { ElementProps, CommonProps } from '../../types/index.js'; 
+ 
+	export interface AlertProps extends CommonProps {
+		/** alert level */
+		level?: ElementProps["levels"];
+		/** message to be shown */
+		message?: string;
+		/** make the alert draggable */
+		draggable?: boolean;
+		/** show or hide the alert */
+		isOpen?: boolean;
+		children?: Snippet;
+		alertTopButton?: Snippet;
+		alertMessage?: Snippet;
+		alertButtonZone?: Snippet;
+		alertButtonClose?: Snippet;
+	}
+</script>
+
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 	import Divider from '../divider/Divider.svelte';
 	import Button from '../../controls/button/Button.svelte';
-	import type { ElementProps, ExpandProps } from '../../types/index.js';
-	import type { AlertProps } from './types.js';
+	import type { ExpandProps } from '../../types/index.js';
+	// import type { AlertProps } from './types.js';
 	import Slotted from '../../utils/slotted/Slotted.svelte';
 	import IconButton from '../../controls/button/IconButton.svelte';
 
-	export const actions: Record<'open' | 'toggle' | 'close', Function> = {
-		open,
-		toggle,
-		close
-	};
-
 	let {
 		class: className,
 		message,
@@ -25,7 +40,13 @@
 		alertMessage,
 		alertButtonZone,
 		alertButtonClose
-	}: ExpandProps<AlertProps> = $props();
+	}: AlertProps = $props();
+
+	export const actions: Record<'open' | 'toggle' | 'close', Function> = {
+		open,
+		toggle,
+		close
+	};
 
 	const handleClick = (event: Event) => {
 		if ((event?.target as Element)?.getAttribute('data-close')) {

package/dist/base/alert/Alert.svelte.d.ts

@@ -1,25 +1,22 @@
-import type { ElementProps } from '../../types/index.js';
-declare const Alert: import("svelte").Component<{
-    level?: ElementProps["levels"] | undefined;
-    message?: string | undefined;
-    draggable?: boolean | undefined;
-    isOpen?: boolean | undefined;
-    children?: import("svelte").Snippet | undefined;
-    alertTopButton?: import("svelte").Snippet | undefined;
-    alertMessage?: import("svelte").Snippet | undefined;
-    alertButtonZone?: import("svelte").Snippet | undefined;
-    alertButtonClose?: import("svelte").Snippet | undefined;
-    'anchor-for'?: string | undefined;
-    element?: HTMLElement | undefined;
-    class?: string | undefined;
-    style?: string | undefined;
-    container?: `inline` | `size` | `normal` | undefined;
-    hideMaxWidth?: string | undefined;
-    hideMaxHeight?: string | undefined;
-    hideMinWidth?: string | undefined;
-    hideMinHeight?: string | undefined;
-}, {
+import type { Snippet } from "svelte";
+import type { ElementProps, CommonProps } from '../../types/index.js';
+export interface AlertProps extends CommonProps {
+    /** alert level */
+    level?: ElementProps["levels"];
+    /** message to be shown */
+    message?: string;
+    /** make the alert draggable */
+    draggable?: boolean;
+    /** show or hide the alert */
+    isOpen?: boolean;
+    children?: Snippet;
+    alertTopButton?: Snippet;
+    alertMessage?: Snippet;
+    alertButtonZone?: Snippet;
+    alertButtonClose?: Snippet;
+}
+declare const Alert: import("svelte").Component<AlertProps, {
     actions: Record<"open" | "toggle" | "close", Function>;
-}, "level" | "isOpen" | "element">;
+}, "element" | "isOpen" | "level">;
 type Alert = ReturnType<typeof Alert>;
 export default Alert;

package/dist/base/avatar/Avatar.svelte

@@ -1,7 +1,29 @@
+<script module lang="ts" >
+import type { Snippet } from "svelte";
+import type { CommonProps,ElementProps } from '../../types/index.js';
+
+export interface AvatarProps    {
+  /** icon name 	*/
+  icon?: string;
+  /**
+   * size of the avatar
+   */
+  size?: ElementProps["width"];
+  /**
+   * size of the icon
+   */
+  iconSize?: ElementProps["iconSize"];
+  element?: HTMLElement;
+  class?: string;
+  children?: Snippet;
+  avatarBadge?: Snippet;
+};
+
+</script>
+
 <script lang="ts">
 	import Icon from '../icon/Icon.svelte';
-	import type { ExpandProps } from '../../types/index.js';
-	import type { AvatarProps } from './types.js';
+	import type { ExpandProps } from '../../types/index.js'; 
 	import Content from '../../utils/content/Content.svelte';
 
 	let {
@@ -13,7 +35,7 @@
 		children,
 		avatarBadge,
 		...rest
-	}: ExpandProps<AvatarProps> = $props();
+	}: AvatarProps = $props();
 
 	const sizes = {
 		tiny: '2rem',

package/dist/base/avatar/Avatar.svelte.d.ts

@@ -1,18 +1,21 @@
-declare const Avatar: import("svelte").Component<{
-    'anchor-for'?: string | undefined;
-    element?: HTMLElement | undefined;
-    class?: string | undefined;
-    style?: string | undefined;
-    container?: `inline` | `size` | `normal` | undefined;
-    hideMaxWidth?: string | undefined;
-    hideMaxHeight?: string | undefined;
-    hideMinWidth?: string | undefined;
-    hideMinHeight?: string | undefined;
-    children?: (import("svelte").Snippet<[any]> & import("svelte").Snippet<[]>) | undefined;
-    icon?: string | undefined;
-    size?: import("../../types/index.js").ElementProps["width"] | undefined;
-    iconSize?: import("../../types/index.js").ElementProps["iconSize"] | undefined;
-    avatarBadge?: import("svelte").Snippet | undefined;
-}, {}, "element">;
+import type { Snippet } from "svelte";
+import type { ElementProps } from '../../types/index.js';
+export interface AvatarProps {
+    /** icon name 	*/
+    icon?: string;
+    /**
+     * size of the avatar
+     */
+    size?: ElementProps["width"];
+    /**
+     * size of the icon
+     */
+    iconSize?: ElementProps["iconSize"];
+    element?: HTMLElement;
+    class?: string;
+    children?: Snippet;
+    avatarBadge?: Snippet;
+}
+declare const Avatar: import("svelte").Component<AvatarProps, {}, "element">;
 type Avatar = ReturnType<typeof Avatar>;
 export default Avatar;

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

@@ -7,23 +7,6 @@ export declare enum statusPreset {
     info = "info",
     discrete = "discrete"
 }
-import type { CommonProps, ElementProps } from "../../types/index.js";
-import type { Snippet } from "svelte";
-export type AvatarProps = CommonProps & {
-    /** icon name 	*/
-    icon?: string;
-    /**
-     * size of the avatar
-     */
-    size?: ElementProps["width"];
-    /**
-     * size of the icon
-     */
-    iconSize?: ElementProps["iconSize"];
-    element?: HTMLElement;
-    class?: string;
-    children?: Snippet;
-    avatarBadge?: Snippet;
-};
+import type { AvatarProps } from "./Avatar.svelte";
 export declare const AvatarDemoValues: DemoerStoryProps<AvatarProps>;
 export declare let parameters: DemoerStoryProps<AvatarProps>, componentArgs: AvatarProps;

package/dist/base/box/Box.svelte.d.ts

@@ -25,6 +25,6 @@ declare const Box: import("svelte").Component<{
         toggle: () => void;
         close: () => void;
     };
-}, "isOpen" | "element">;
+}, "element" | "isOpen">;
 type Box = ReturnType<typeof Box>;
 export default Box;

package/dist/base/cartouche/Cartouche.svelte.d.ts

@@ -35,6 +35,6 @@ declare const Cartouche: import("svelte").Component<{
         toggle: (event: Event) => void;
         close: () => void;
     };
-}, "isOpen" | "element">;
+}, "element" | "isOpen">;
 type Cartouche = ReturnType<typeof Cartouche>;
 export default Cartouche;

package/dist/base/icon/Icon.svelte

@@ -1,6 +1,74 @@
+<script module lang="ts">
+import type { ElementProps, IconObj } from "../../types/index.js"; 
+
+/**
+ * Properties for the IconApp component.
+ */
+export type IconAppProps = {
+  /**
+   * Icon name for Iconify.
+   * @param icon
+   */
+  icon?: ElementProps["icon"];
+
+  /**
+   * Class name of the root component.
+   * @param class
+   */
+  class?: string;
+
+  /**
+   * CSS style of the root component.
+   * @param style
+   */
+  style?: string;
+
+  /**
+   * Root HTMLDivElement properties.
+   * @param element
+   */
+  element?: HTMLDivElement | null | any;
+
+  /**
+   * Icon object for Iconify, replaces and invalidates `icon` prop.
+   * @param ico
+   */
+  ico?: IconObj;
+
+  /**
+   * Icon size.
+   * @param iconSize
+   */
+  iconSize?: ElementProps["iconSize"];
+
+  /**
+   * Rotate icon.
+   * @param rotate
+   */
+  rotate?: boolean;
+
+  /**
+   * Icon color.
+   * @param color
+   */
+  color?: string;
+
+  /**
+   * Icon rotation.
+   * @param rotation
+   */
+  rotation?: number;
+
+  /**
+   * Display property for the icon.
+   * @param display
+   */
+  display?: "block" | "inline-block" | "inline";
+};
+</script>
+
 <script lang="ts">
-	import { iconFontSize, type ElementProps, type ExpandProps } from '../../types/index.js';
-	import type { IconAppProps } from './types.js';
+	import { iconFontSize,   type ExpandProps } from '../../types/index.js'; 
 	import Iconify from '@iconify/svelte';
 
 	let {

package/dist/base/icon/Icon.svelte.d.ts

@@ -1,10 +1,65 @@
-import { type ElementProps } from '../../types/index.js';
+import type { ElementProps, IconObj } from "../../types/index.js";
+/**
+ * Properties for the IconApp component.
+ */
+export type IconAppProps = {
+    /**
+     * Icon name for Iconify.
+     * @param icon
+     */
+    icon?: ElementProps["icon"];
+    /**
+     * Class name of the root component.
+     * @param class
+     */
+    class?: string;
+    /**
+     * CSS style of the root component.
+     * @param style
+     */
+    style?: string;
+    /**
+     * Root HTMLDivElement properties.
+     * @param element
+     */
+    element?: HTMLDivElement | null | any;
+    /**
+     * Icon object for Iconify, replaces and invalidates `icon` prop.
+     * @param ico
+     */
+    ico?: IconObj;
+    /**
+     * Icon size.
+     * @param iconSize
+     */
+    iconSize?: ElementProps["iconSize"];
+    /**
+     * Rotate icon.
+     * @param rotate
+     */
+    rotate?: boolean;
+    /**
+     * Icon color.
+     * @param color
+     */
+    color?: string;
+    /**
+     * Icon rotation.
+     * @param rotation
+     */
+    rotation?: number;
+    /**
+     * Display property for the icon.
+     * @param display
+     */
+    display?: "block" | "inline-block" | "inline";
+};
 declare const Icon: import("svelte").Component<{
     icon?: ElementProps["icon"] | undefined;
     class?: string | undefined;
     style?: string | undefined;
     element?: HTMLDivElement | null | any;
-    ico?: import("../../types/index.js").IconObj | undefined;
+    ico?: IconObj | undefined;
     iconSize?: ElementProps["iconSize"] | undefined;
     rotate?: boolean | undefined;
     color?: string | undefined;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 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';
@@ -107,7 +108,6 @@ 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/uses/toggler.js';
 export * from './utils/uses/positioner.js';
 export * from './utils/uses/navigation.js';
@@ -189,10 +189,6 @@ export { default as BootStrApp } from './ui/bootstrapp/BootStrApp.svelte';
 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';
@@ -212,6 +208,10 @@ 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 './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 './controls/textfield/types.js';
 export { default as TextField } from './controls/textfield/TextField.svelte';
 export * from './controls/switch/types.js';

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,7 +109,6 @@ 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/uses/toggler.js';
 export * from './utils/uses/positioner.js';
 export * from './utils/uses/navigation.js';
@@ -190,10 +190,6 @@ export { default as BootStrApp } from './ui/bootstrapp/BootStrApp.svelte';
 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';
@@ -213,6 +209,10 @@ 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 './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 './controls/textfield/types.js';
 export { default as TextField } from './controls/textfield/TextField.svelte';
 export * from './controls/switch/types.js';

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

@@ -36,7 +36,7 @@ declare class __sveltets_Render<T> {
     };
     events(): {};
     slots(): {};
-    bindings(): "flow" | "isOpen" | "element" | "hideCloseIcon" | "stickTo";
+    bindings(): "flow" | "element" | "isOpen" | "hideCloseIcon" | "stickTo";
     exports(): {
         /** @deprecated use actions.toggle */ actions: {
             toggle: (visibleSate?: boolean) => void;

package/dist/slotui-css/slotui-css.css

@@ -3004,6 +3004,19 @@ label {
   color: var(--stepper-active-color);
 }
 
+/** select.scss ----------------*/
+:root {
+  --select-background-color: var(--sld-color-background);
+  --select-radius: var(--sld-radius-small);
+}
+
+.select {
+  background-color: var(--select-background-color);
+  height: 160px;
+  width: 160px;
+  border-radius: var(--select-radius);
+}
+
 /** slider.scss ----------------*/
 :root {
   --slider-background-color: var(--sld-color-background);
@@ -3080,19 +3093,6 @@ label {
   outline: 4px solid var(--slider-thumb-hover-outline);
 }
 
-/** select.scss ----------------*/
-:root {
-  --select-background-color: var(--sld-color-background);
-  --select-radius: var(--sld-radius-small);
-}
-
-.select {
-  background-color: var(--select-background-color);
-  height: 160px;
-  width: 160px;
-  border-radius: var(--select-radius);
-}
-
 /** rating.scss ----------------*/
 :root {
   --rating-gap: var(--sld-gap-small);

package/dist/slotui-css/slotui-min-css.css

@@ -3004,6 +3004,19 @@ label {
   color: var(--stepper-active-color);
 }
 
+/** select.scss ----------------*/
+:root {
+  --select-background-color: var(--sld-color-background);
+  --select-radius: var(--sld-radius-small);
+}
+
+.select {
+  background-color: var(--select-background-color);
+  height: 160px;
+  width: 160px;
+  border-radius: var(--select-radius);
+}
+
 /** slider.scss ----------------*/
 :root {
   --slider-background-color: var(--sld-color-background);
@@ -3080,19 +3093,6 @@ label {
   outline: 4px solid var(--slider-thumb-hover-outline);
 }
 
-/** select.scss ----------------*/
-:root {
-  --select-background-color: var(--sld-color-background);
-  --select-radius: var(--sld-radius-small);
-}
-
-.select {
-  background-color: var(--select-background-color);
-  height: 160px;
-  width: 160px;
-  border-radius: var(--select-radius);
-}
-
 /** rating.scss ----------------*/
 :root {
   --rating-gap: var(--sld-gap-small);

package/dist/ui/popper/Popper.svelte.d.ts

@@ -10,6 +10,6 @@ declare const Popper: import("svelte").Component<PopperProps, {
     };
     clickedAway: () => void;
     useStickTo: (node: HTMLElement) => void;
-}, "isOpen" | "element" | "autoClose">;
+}, "element" | "autoClose" | "isOpen">;
 type Popper = ReturnType<typeof Popper>;
 export default Popper;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@medyll/idae-slotui-svelte",
-	"version": "0.109.0",
+	"version": "0.110.0",
 	"scope": "@medyll",
 	"description": "A Svelte 5 component library for building modular and reactive user interfaces.",
 	"scripts": {
@@ -17,6 +17,7 @@
 		"format": "prettier --write .",
 		"test:integration": "playwright test",
 		"test:unit": "vitest",
+		"test:unit:docs": "vitest src/tests/docs.test.js",
 		"publish": "npm run package",
 		"build-docs:watch": "nodemon --watch ./src/lib --watch ./build-docs.js --ignore **/docs/** --ignore ./src/lib/svelte.index.js --ext svelte --ext scss --delay 2.5 build-docs.js",
 		"rename-scss": "node scripts/rename-scss-files.js",
@@ -88,8 +89,8 @@
 	"dependencies": {
 		"@iconify/svelte": "^4.2.0",
 		"@medyll/cssfabric": "^0.4.2",
-		"@medyll/idae-be": "^1.17.0",
-		"@medyll/idae-engine": "^1.106.0",
+		"@medyll/idae-be": "^1.18.0",
+		"@medyll/idae-engine": "^1.107.0",
 		"d3": "^7.9.0",
 		"lerna": "^8.2.1",
 		"npm-check-updates": "^17.1.16",