@medyll/idae-slotui-svelte 0.36.0 → 0.38.0

package/dist/base/icon/Icon.svelte

@@ -32,6 +32,7 @@
 	let finalStyle = $derived(
 		`display:block;font-size:${sizes[finSize]};color:${finCol};transform: rotate(${finRotation}deg);${style};`
 	);
+ 
 </script>
 
 {#key [icon, iconName, color, finalStyle]}

package/dist/controls/button/Button.svelte

@@ -35,8 +35,7 @@
 	}: ButtonProps = $props();
 
 	let startRef: HTMLDivElement | undefined = $state<HTMLDivElement | undefined>(undefined);
- 
-	$inspect(startRef?.clientWidth)
+  
 </script>
 
 <button
@@ -140,9 +139,30 @@
   transition: all 0.2s ease-in-out;
   overflow: hidden;
   cursor: pointer;
-  align-content: stretch;
-  align-items: stretch;
+  align-content: center;
+  align-items: center;
   background: var(--sld-button-background);
+  /*     :focus {
+      outline: 1px solid var(--sld-button-focus-border-color);
+      outline-offset: 2px;
+      box-shadow: var(--sld-button-focus-shadow);
+  }
+  :focus-visible {
+      outline: 1px solid var(--sld-button-focus-border-color);
+      outline-offset: -2px;
+      box-shadow: var(--sld-button-focus-shadow);
+  }
+  :hover {
+      background-color: var(--sld-button-hover-background);
+      box-shadow: var(--sld-button-hover-shadow);
+  }
+  :active {
+      transform: translateY(1px);
+      box-shadow: var(--sld-button-active-shadow);
+  }
+  :focus:not(:focus-visible) {
+      box-shadow: var(--sld-button-focus-shadow);
+  } */
   --preset-width: var(--sld-width-small);
   width: var(--preset-width-small);
 }
@@ -424,52 +444,6 @@
   box-shadow: var(--sld-elevation-5);
 }
 
-:global(button) :focus,
-:global(.button) :focus,
-:global(button.button) :focus,
-:global(input[type="button"]) :focus,
-:global(input[type="submit"]) :focus {
-  outline: 1px solid var(--sld-button-focus-border-color);
-  outline-offset: 2px;
-  box-shadow: var(--sld-button-focus-shadow);
-}
-
-:global(button) :focus-visible,
-:global(.button) :focus-visible,
-:global(button.button) :focus-visible,
-:global(input[type="button"]) :focus-visible,
-:global(input[type="submit"]) :focus-visible {
-  outline: 1px solid var(--sld-button-focus-border-color);
-  outline-offset: -2px;
-  box-shadow: var(--sld-button-focus-shadow);
-}
-
-:global(button) :hover,
-:global(.button) :hover,
-:global(button.button) :hover,
-:global(input[type="button"]) :hover,
-:global(input[type="submit"]) :hover {
-  background-color: var(--sld-button-hover-background);
-  box-shadow: var(--sld-button-hover-shadow);
-}
-
-:global(button) :active,
-:global(.button) :active,
-:global(button.button) :active,
-:global(input[type="button"]) :active,
-:global(input[type="submit"]) :active {
-  transform: translateY(1px);
-  box-shadow: var(--sld-button-active-shadow);
-}
-
-:global(button) :focus:not(:focus-visible),
-:global(.button) :focus:not(:focus-visible),
-:global(button.button) :focus:not(:focus-visible),
-:global(input[type="button"]) :focus:not(:focus-visible),
-:global(input[type="submit"]) :focus:not(:focus-visible) {
-  box-shadow: var(--sld-button-focus-shadow);
-}
-
 :global(button) .button-start,
 :global(.button) .button-start,
 :global(button.button) .button-start,
@@ -481,7 +455,7 @@
   max-height: 100%;
   align-items: center;
   align-content: center;
-  padding: 0 0.15rem;
+  padding: 0 0.5rem;
   display: block;
 }
 
@@ -499,13 +473,18 @@
 :global(input[type="button"]) .button-central,
 :global(input[type="submit"]) .button-central {
   --preset-ellipsis-line: 1;
+  display: block;
   max-width: 100%;
   max-height: 100%;
   flex: 1;
   align-items: center;
   align-content: center;
-  padding-right: calc(var(--content-padding, 0.25rem) / 2);
+  justify-content: center;
+  justify-items: center;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
   text-align: var(--sld-button-text-align, center);
+  overflow: hidden;
 }
 
 :global(button) .button-central[ellipsis], :global(button) .button-central.ellipsis,

package/dist/controls/button/ButtonAction.svelte

@@ -99,9 +99,30 @@
   transition: all 0.2s ease-in-out;
   overflow: hidden;
   cursor: pointer;
-  align-content: stretch;
-  align-items: stretch;
+  align-content: center;
+  align-items: center;
   background: var(--sld-button-background);
+  /*     :focus {
+      outline: 1px solid var(--sld-button-focus-border-color);
+      outline-offset: 2px;
+      box-shadow: var(--sld-button-focus-shadow);
+  }
+  :focus-visible {
+      outline: 1px solid var(--sld-button-focus-border-color);
+      outline-offset: -2px;
+      box-shadow: var(--sld-button-focus-shadow);
+  }
+  :hover {
+      background-color: var(--sld-button-hover-background);
+      box-shadow: var(--sld-button-hover-shadow);
+  }
+  :active {
+      transform: translateY(1px);
+      box-shadow: var(--sld-button-active-shadow);
+  }
+  :focus:not(:focus-visible) {
+      box-shadow: var(--sld-button-focus-shadow);
+  } */
   --preset-width: var(--sld-width-small);
   width: var(--preset-width-small);
 }
@@ -383,52 +404,6 @@
   box-shadow: var(--sld-elevation-5);
 }
 
-:global(button) :focus,
-:global(.button) :focus,
-:global(button.button) :focus,
-:global(input[type="button"]) :focus,
-:global(input[type="submit"]) :focus {
-  outline: 1px solid var(--sld-button-focus-border-color);
-  outline-offset: 2px;
-  box-shadow: var(--sld-button-focus-shadow);
-}
-
-:global(button) :focus-visible,
-:global(.button) :focus-visible,
-:global(button.button) :focus-visible,
-:global(input[type="button"]) :focus-visible,
-:global(input[type="submit"]) :focus-visible {
-  outline: 1px solid var(--sld-button-focus-border-color);
-  outline-offset: -2px;
-  box-shadow: var(--sld-button-focus-shadow);
-}
-
-:global(button) :hover,
-:global(.button) :hover,
-:global(button.button) :hover,
-:global(input[type="button"]) :hover,
-:global(input[type="submit"]) :hover {
-  background-color: var(--sld-button-hover-background);
-  box-shadow: var(--sld-button-hover-shadow);
-}
-
-:global(button) :active,
-:global(.button) :active,
-:global(button.button) :active,
-:global(input[type="button"]) :active,
-:global(input[type="submit"]) :active {
-  transform: translateY(1px);
-  box-shadow: var(--sld-button-active-shadow);
-}
-
-:global(button) :focus:not(:focus-visible),
-:global(.button) :focus:not(:focus-visible),
-:global(button.button) :focus:not(:focus-visible),
-:global(input[type="button"]) :focus:not(:focus-visible),
-:global(input[type="submit"]) :focus:not(:focus-visible) {
-  box-shadow: var(--sld-button-focus-shadow);
-}
-
 :global(button) .button-start,
 :global(.button) .button-start,
 :global(button.button) .button-start,
@@ -440,7 +415,7 @@
   max-height: 100%;
   align-items: center;
   align-content: center;
-  padding: 0 0.15rem;
+  padding: 0 0.5rem;
   display: block;
 }
 
@@ -458,13 +433,18 @@
 :global(input[type="button"]) .button-central,
 :global(input[type="submit"]) .button-central {
   --preset-ellipsis-line: 1;
+  display: block;
   max-width: 100%;
   max-height: 100%;
   flex: 1;
   align-items: center;
   align-content: center;
-  padding-right: calc(var(--content-padding, 0.25rem) / 2);
+  justify-content: center;
+  justify-items: center;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
   text-align: var(--sld-button-text-align, center);
+  overflow: hidden;
 }
 
 :global(button) .button-central[ellipsis], :global(button) .button-central.ellipsis,

package/dist/controls/button/IconButton.svelte

@@ -36,8 +36,10 @@
 		children,
 		...rest
 	}: IconButtonProps = $props();
+
+	let finalIcon = $derived(typeof icon === 'object' ? {...icon,iconSize:iconFontSize} : {icon,iconSize:iconFontSize});
 </script>
 
-<!-- <Button variant="square" bind:element width={size} tall="unset" {ratio} {...rest}>
-	<Icon style="display:block; " {rotation} {icon} iconSize={iconFontSize} />
-</Button> -->
+<Button variant="square" bind:element width={size} tall="unset" {ratio} {...rest}>
+	<Icon style="display:inline; " {rotation} icon={finalIcon}   />
+</Button>

package/dist/controls/button/button.scss

@@ -55,34 +55,32 @@
     overflow: hidden;
     cursor: pointer;
 
-    align-content: stretch;
-    align-items: stretch;
+    align-content: center;
+    align-items: center;
 
     background: var(--sld-button-background);
 
-    & {
-        :focus {
-            outline: 1px solid var(--sld-button-focus-border-color);
-            outline-offset: 2px;
-            box-shadow: var(--sld-button-focus-shadow);
-        }
-        :focus-visible {
-            outline: 1px solid var(--sld-button-focus-border-color);
-            outline-offset: -2px;
-            box-shadow: var(--sld-button-focus-shadow);
-        }
-        :hover {
-            background-color: var(--sld-button-hover-background);
-            box-shadow: var(--sld-button-hover-shadow);
-        }
-        :active {
-            transform: translateY(1px);
-            box-shadow: var(--sld-button-active-shadow);
-        }
-        :focus:not(:focus-visible) {
-            box-shadow: var(--sld-button-focus-shadow);
-        }
+    /*     :focus {
+        outline: 1px solid var(--sld-button-focus-border-color);
+        outline-offset: 2px;
+        box-shadow: var(--sld-button-focus-shadow);
+    }
+    :focus-visible {
+        outline: 1px solid var(--sld-button-focus-border-color);
+        outline-offset: -2px;
+        box-shadow: var(--sld-button-focus-shadow);
+    }
+    :hover {
+        background-color: var(--sld-button-hover-background);
+        box-shadow: var(--sld-button-hover-shadow);
+    }
+    :active {
+        transform: translateY(1px);
+        box-shadow: var(--sld-button-active-shadow);
     }
+    :focus:not(:focus-visible) {
+        box-shadow: var(--sld-button-focus-shadow);
+    } */
 
     .button-start {
         position: relative;
@@ -91,7 +89,7 @@
         max-height: 100%;
         align-items: center;
         align-content: center;
-        padding: 0 0.15rem;
+        padding: 0 0.5rem;
         display: block;
         &:empty {
             display: none;
@@ -100,13 +98,18 @@
 
     .button-central {
         @include ui-ellipsises-presets;
+        display: block;
         max-width: 100%;
         max-height: 100%;
         flex: 1;
         align-items: center;
         align-content: center;
-        padding-right: calc(var(--content-padding, 0.25rem) / 2);
+        justify-content: center;
+        justify-items: center;
+        padding-left: 0.25rem; //calc(var(--content-padding, 0.25rem) / 2);
+        padding-right: 0.25rem; //calc(var(--content-padding, 0.25rem) / 2);
         text-align: var(--sld-button-text-align, center);
+        overflow: hidden;
         &:empty {
             display: none;
         }

package/dist/controls/confirm/Confirm.demo.svelte

@@ -16,8 +16,15 @@
 </Confirm>`;
 
 	let codeProps = `
-<Confirm
-  primary="confirm deletion" />`;
+<Confirm 
+	buttonInitial={{
+		icon: {icon:'fa-solid:question', size:'auto',color:'green'},
+		value: 'Would you please click me once ?',
+		ellipsis: true
+	}}
+>
+	<Button type="submit" icon="fa-solid:check" >confirm</Button>
+</Confirm>`;
 </script>
 
 <ComponentDemo
@@ -30,11 +37,14 @@ V.Hugo 1850"
 		<DemoPage component="Chipper" code={codeSlot}>
 			<Demoer {parameters} {componentArgs}>
 				{#snippet children({ activeParams })}
-					<Confirm {...activeParams}>
-						{#snippet confirmInitial()}
-							<Button icon="fa-solid:question" width="med">Would you please click once ?</Button>
-						{/snippet}
-						<Button type="submit" width="kind">confirm</Button>
+					<Confirm {...activeParams}
+						buttonInitial={{
+							icon: {icon:'fa-solid:question', size:'auto',color:'green'},
+							value: 'Would you please click me once ?',
+							ellipsis: true
+						}}
+					>
+						<Button type="submit" icon="fa-solid:check" >confirm</Button>
 					</Confirm>
 				{/snippet}
 			</Demoer>

package/dist/controls/confirm/Confirm.svelte

@@ -1,13 +1,12 @@
 <script lang="ts" generics="T=any">
 	import { fade } from 'svelte/transition';
 	import Button from '../button/Button.svelte';
-	import IconButton from '../button/IconButton.svelte';
 	import { onDestroy } from 'svelte';
 	import Slotted from '../../utils/slotted/Slotted.svelte';
 	import type { ConfirmProps } from './types.js';
 	import type { HTMLAttributes } from 'svelte/elements';
 
-	let step: string = $state('initial');
+	let step: string = $state('initial'); 
 
 	let {
 		class: className = '',
@@ -26,7 +25,11 @@
 		loading,
 		data,
 		action = () => {},
-		iconCancel = { icon: 'fluent-mdl2:navigate-back', color: 'red' },
+		iconCancel = { icon: 'mdi:cancel-bold', color: 'red',iconSize:'large' },
+		variant,
+		buttonInitial,
+		buttonConfirm,
+		buttonCancel,
 		children,
 		confirmInitial,
 		...rest
@@ -87,8 +90,7 @@
 	});
 </script>
 
-<!-- #todo <Content>somecontent</Content> -->
-
+<!-- #todo <Content>somecontent</Content> --> 
 <div {...rost} class="confirm {className}">
 	{#if step === 'initial'}
 		<!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -101,48 +103,60 @@
 			title={tooltipInitial}
 		>
 			<Slotted child={confirmInitial} slotArgs={{ step }}>
+			{#if buttonInitial}
+				<Button {tall} {variant} {...buttonInitial}  />
+			{:else}
 				<Button
 					{tall}
-					variant="naked"
+					variant= {variant}
 					width="full"
 					icon={{ icon: iconInitial, color: iconColorInitial }}
 					title={tooltipInitial}
 				>
-					{primaryInitial}
+					{primaryInitial} 
 				</Button>
+			{/if} 
 			</Slotted>
 		</div>
 	{/if}
 	{#if step === 'confirm'}
-		<div class={className + ' confirm-validate'} in:fade|global bind:this={contentRef}>
-			<IconButton
-				onclick={handleClickCancel}
-				width="tiny"
-				ratio="1/1"
-				variant="naked"
-				icon={iconCancel}
-				{tall}
-				title="cancel"
-			/>
+			{#if buttonCancel}
+				<Button {tall}   {...buttonCancel} onclick={(event:any)=>{handleClickCancel(event);buttonCancel?.onclick?.(event)}}    />
+			{:else}
+				<Button
+					onclick={handleClickCancel}  
+					variant= {'naked'}
+					icon={iconCancel}
+					{tall}
+					title="cancel"
+					value="cancel"
+					width="auto"
+				/>
+			{/if}
+		<div class={className + ' confirm-validate'} in:fade|global bind:this={contentRef}> 
 			<Slotted child={children} slotArgs={{ step }}>
-				<IconButton
+			{#if buttonConfirm}
+				<Button {tall} {variant} {...buttonConfirm}  onclick={(event:any)=>{handleAction(event);buttonConfirm?.onclick?.(event)}}    />
+			{:else}
+				<Button
 					title="confirm"
 					loading={loadingState}
 					{tall}
 					onclick={handleAction}
-					{icon}
-					width="auto"
+					{icon} 
+					variant= {variant}
 					value={primaryConfirm}
 				/>
+			{/if}
 			</Slotted>
 		</div>
 	{/if}
 </div>
 
 <style>.confirm {
-  display: contents;
   display: flex;
   align-items: center;
+  gap: 0.5rem;
 }
 .confirm-validate {
   display: flex;

package/dist/controls/confirm/Confirm.svelte.d.ts

@@ -4,13 +4,14 @@ declare class __sveltets_Render<T = any> {
         initialRef?: HTMLElement | null;
         contentRef?: HTMLElement | null;
         tooltipInitial?: string | null;
-        primaryInitial: string;
+        primaryInitial?: string;
         primaryConfirm: string;
         iconInitial?: string;
         iconColorInitial?: string;
         primary?: string;
         icon?: import("../../types/index.js").ElementProps["icon"];
         tall?: import("../../types/index.js").ElementProps["tall"];
+        variant: import("../../types/index.js").ElementProps["buttonVariant"];
         iconColor?: string;
         iconSize?: string;
         autoClose?: boolean;
@@ -18,6 +19,9 @@ declare class __sveltets_Render<T = any> {
         iconLoading?: import("../../types/index.js").ElementProps["icon"];
         action?: Promise<T> | ((data?: T | undefined) => void) | undefined;
         iconCancel?: import("../../types/index.js").ElementProps["icon"];
+        buttonInitial?: import("../button/types.js").ButtonProps;
+        buttonConfirm?: import("../button/types.js").ButtonProps;
+        buttonCancel?: import("../button/types.js").ButtonProps;
         children?: import("svelte").Snippet;
         confirmInitial?: import("svelte").Snippet;
     } & Partial<Omit<HTMLDivElement, "style">>;

package/dist/controls/confirm/confirm.scss

@@ -1,8 +1,8 @@
 @import "../../styles/slotui-mixins.scss";
 .confirm {
-    display: contents;
     display: flex;
     align-items: center;
+    gap: 0.5rem;
     &-initial {
     }
     &-validate {

package/dist/controls/confirm/types.d.ts

@@ -1,6 +1,7 @@
-import type { DemoerStoryProps } from '../../base/demoer/types.js';
-import { type CommonProps, type ElementProps } from '../../types/index.js';
-import type { Snippet } from 'svelte';
+import type { DemoerStoryProps } from "../../base/demoer/types.js";
+import { type CommonProps, type ElementProps } from "../../types/index.js";
+import type { Snippet } from "svelte";
+import type { ButtonProps } from "../button/types.js";
 export type ConfirmProps<T = any> = CommonProps & {
     /** element data sent on confirm */
     data?: T;
@@ -8,22 +9,24 @@ export type ConfirmProps<T = any> = CommonProps & {
     initialRef?: HTMLElement | null;
     /** element confirm HTMLDivElement props */
     contentRef?: HTMLElement | null;
-    /** text displayed on initial button */
+    /**  @deprecated text displayed on initial button */
     tooltipInitial?: string | null;
-    /** text displayed on initial button */
-    primaryInitial: string;
-    /** text displayed on the confirm phase */
+    /** @deprecated text displayed on initial button */
+    primaryInitial?: string;
+    /**  @deprecated text displayed on the confirm phase */
     primaryConfirm: string;
-    /** icon displayed on the initial button */
+    /**  @deprecated icon displayed on the initial button */
     iconInitial?: string;
-    /** color of the icon displayed on the initial button */
+    /**  @deprecated color of the icon displayed on the initial button */
     iconColorInitial?: string;
     /** text displayed on confirm button */
     primary?: string;
     /** icon displayed on the confirm button */
-    icon?: ElementProps['icon'];
+    icon?: ElementProps["icon"];
     /**  button height */
-    tall?: ElementProps['tall'];
+    tall?: ElementProps["tall"];
+    /** variant for buttons */
+    variant: ElementProps["buttonVariant"];
     /** color of the icon displayed on the confirm button
      * @type string
      */
@@ -32,11 +35,14 @@ export type ConfirmProps<T = any> = CommonProps & {
     autoClose?: boolean;
     /** loading state on validate */
     loading?: boolean;
-    iconLoading?: ElementProps['icon'];
+    iconLoading?: ElementProps["icon"];
     /** action initiated on confirmation */
     action?: Promise<T> | ((data?: T) => void);
-    /** icon to display for back action */
-    iconCancel?: ElementProps['icon'];
+    /**  @deprecated icon to display for back action */
+    iconCancel?: ElementProps["icon"];
+    buttonInitial?: ButtonProps;
+    buttonConfirm?: ButtonProps;
+    buttonCancel?: ButtonProps;
     children?: Snippet;
     confirmInitial?: Snippet;
 };

package/dist/controls/confirm/types.js

@@ -1,39 +1,49 @@
-import { demoerArgs } from '../../base/demoer/demoer.utils.js';
-import { iconSize } from '../../types/index.js';
+import { demoerArgs } from "../../base/demoer/demoer.utils.js";
+import { buttonVariant, iconSize, tallPreset, } from "../../types/index.js";
 export const ConfirmDemoValues = {
     primaryInitial: {
-        type: 'string',
-        values: ['Would you please click once ?'],
-        private: true
+        type: "string",
+        values: ["Would you please click once ?"],
+        private: true,
     },
     tooltipInitial: {
-        type: 'string',
-        values: ['Would you please click once ?'],
-        private: true
+        type: "string",
+        values: ["Would you please click once ?"],
+        private: true,
     },
     iconInitial: {
-        type: 'icon',
-        values: ['fa-solid:question']
+        type: "icon",
+        values: ["fa-solid:question"],
     },
     iconColorInitial: {
-        type: 'color',
-        values: ['green', 'blue', undefined]
+        type: "color",
+        values: ["green", "blue", undefined],
     },
     primary: {
-        type: 'icon',
-        values: ['Confirm deletion']
+        type: "icon",
+        values: ["Confirm deletion"],
     },
     icon: {
-        type: 'icon',
-        values: ['mdi:close', undefined]
+        type: "icon",
+        values: ["mdi:close", undefined],
     },
     iconColor: {
-        type: 'color',
-        values: ['red', 'orange', undefined]
+        type: "color",
+        values: ["red", "orange", undefined],
     },
     iconSize: {
-        type: 'iconSize',
-        default: iconSize.medium
-    }
+        type: "iconSize",
+        default: iconSize.medium,
+    },
+    tall: {
+        type: "tall",
+        values: Object.values(tallPreset),
+        default: tallPreset.default,
+    },
+    variant: {
+        type: "buttonVariant",
+        values: Object.values(buttonVariant),
+        default: buttonVariant.contained,
+    },
 };
 export let { parameters, componentArgs } = demoerArgs(ConfirmDemoValues);

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 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,15 +106,16 @@ 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';

package/dist/index.js

@@ -1,6 +1,5 @@
 // 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,15 +107,16 @@ 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';

package/dist/slotui-css/button.css

@@ -44,9 +44,30 @@
   transition: all 0.2s ease-in-out;
   overflow: hidden;
   cursor: pointer;
-  align-content: stretch;
-  align-items: stretch;
+  align-content: center;
+  align-items: center;
   background: var(--sld-button-background);
+  /*     :focus {
+      outline: 1px solid var(--sld-button-focus-border-color);
+      outline-offset: 2px;
+      box-shadow: var(--sld-button-focus-shadow);
+  }
+  :focus-visible {
+      outline: 1px solid var(--sld-button-focus-border-color);
+      outline-offset: -2px;
+      box-shadow: var(--sld-button-focus-shadow);
+  }
+  :hover {
+      background-color: var(--sld-button-hover-background);
+      box-shadow: var(--sld-button-hover-shadow);
+  }
+  :active {
+      transform: translateY(1px);
+      box-shadow: var(--sld-button-active-shadow);
+  }
+  :focus:not(:focus-visible) {
+      box-shadow: var(--sld-button-focus-shadow);
+  } */
   --preset-width: var(--sld-width-small);
   width: var(--preset-width-small);
 }
@@ -305,47 +326,6 @@
 :global(input[type="submit"])[elevation-5] {
   box-shadow: var(--sld-elevation-5);
 }
-:global(button) :focus,
-:global(.button) :focus,
-:global(button.button) :focus,
-:global(input[type="button"]) :focus,
-:global(input[type="submit"]) :focus {
-  outline: 1px solid var(--sld-button-focus-border-color);
-  outline-offset: 2px;
-  box-shadow: var(--sld-button-focus-shadow);
-}
-:global(button) :focus-visible,
-:global(.button) :focus-visible,
-:global(button.button) :focus-visible,
-:global(input[type="button"]) :focus-visible,
-:global(input[type="submit"]) :focus-visible {
-  outline: 1px solid var(--sld-button-focus-border-color);
-  outline-offset: -2px;
-  box-shadow: var(--sld-button-focus-shadow);
-}
-:global(button) :hover,
-:global(.button) :hover,
-:global(button.button) :hover,
-:global(input[type="button"]) :hover,
-:global(input[type="submit"]) :hover {
-  background-color: var(--sld-button-hover-background);
-  box-shadow: var(--sld-button-hover-shadow);
-}
-:global(button) :active,
-:global(.button) :active,
-:global(button.button) :active,
-:global(input[type="button"]) :active,
-:global(input[type="submit"]) :active {
-  transform: translateY(1px);
-  box-shadow: var(--sld-button-active-shadow);
-}
-:global(button) :focus:not(:focus-visible),
-:global(.button) :focus:not(:focus-visible),
-:global(button.button) :focus:not(:focus-visible),
-:global(input[type="button"]) :focus:not(:focus-visible),
-:global(input[type="submit"]) :focus:not(:focus-visible) {
-  box-shadow: var(--sld-button-focus-shadow);
-}
 :global(button) .button-start,
 :global(.button) .button-start,
 :global(button.button) .button-start,
@@ -357,7 +337,7 @@
   max-height: 100%;
   align-items: center;
   align-content: center;
-  padding: 0 0.15rem;
+  padding: 0 0.5rem;
   display: block;
 }
 :global(button) .button-start:empty,
@@ -373,13 +353,18 @@
 :global(input[type="button"]) .button-central,
 :global(input[type="submit"]) .button-central {
   --preset-ellipsis-line: 1;
+  display: block;
   max-width: 100%;
   max-height: 100%;
   flex: 1;
   align-items: center;
   align-content: center;
-  padding-right: calc(var(--content-padding, 0.25rem) / 2);
+  justify-content: center;
+  justify-items: center;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
   text-align: var(--sld-button-text-align, center);
+  overflow: hidden;
 }
 :global(button) .button-central[ellipsis], :global(button) .button-central.ellipsis,
 :global(.button) .button-central[ellipsis],

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

@@ -44,9 +44,30 @@
   transition: all 0.2s ease-in-out;
   overflow: hidden;
   cursor: pointer;
-  align-content: stretch;
-  align-items: stretch;
+  align-content: center;
+  align-items: center;
   background: var(--sld-button-background);
+  /*     :focus {
+      outline: 1px solid var(--sld-button-focus-border-color);
+      outline-offset: 2px;
+      box-shadow: var(--sld-button-focus-shadow);
+  }
+  :focus-visible {
+      outline: 1px solid var(--sld-button-focus-border-color);
+      outline-offset: -2px;
+      box-shadow: var(--sld-button-focus-shadow);
+  }
+  :hover {
+      background-color: var(--sld-button-hover-background);
+      box-shadow: var(--sld-button-hover-shadow);
+  }
+  :active {
+      transform: translateY(1px);
+      box-shadow: var(--sld-button-active-shadow);
+  }
+  :focus:not(:focus-visible) {
+      box-shadow: var(--sld-button-focus-shadow);
+  } */
   --preset-width: var(--sld-width-small);
   width: var(--preset-width-small);
 }
@@ -305,47 +326,6 @@
 :global(input[type="submit"])[elevation-5] {
   box-shadow: var(--sld-elevation-5);
 }
-:global(button) :focus,
-:global(.button) :focus,
-:global(button.button) :focus,
-:global(input[type="button"]) :focus,
-:global(input[type="submit"]) :focus {
-  outline: 1px solid var(--sld-button-focus-border-color);
-  outline-offset: 2px;
-  box-shadow: var(--sld-button-focus-shadow);
-}
-:global(button) :focus-visible,
-:global(.button) :focus-visible,
-:global(button.button) :focus-visible,
-:global(input[type="button"]) :focus-visible,
-:global(input[type="submit"]) :focus-visible {
-  outline: 1px solid var(--sld-button-focus-border-color);
-  outline-offset: -2px;
-  box-shadow: var(--sld-button-focus-shadow);
-}
-:global(button) :hover,
-:global(.button) :hover,
-:global(button.button) :hover,
-:global(input[type="button"]) :hover,
-:global(input[type="submit"]) :hover {
-  background-color: var(--sld-button-hover-background);
-  box-shadow: var(--sld-button-hover-shadow);
-}
-:global(button) :active,
-:global(.button) :active,
-:global(button.button) :active,
-:global(input[type="button"]) :active,
-:global(input[type="submit"]) :active {
-  transform: translateY(1px);
-  box-shadow: var(--sld-button-active-shadow);
-}
-:global(button) :focus:not(:focus-visible),
-:global(.button) :focus:not(:focus-visible),
-:global(button.button) :focus:not(:focus-visible),
-:global(input[type="button"]) :focus:not(:focus-visible),
-:global(input[type="submit"]) :focus:not(:focus-visible) {
-  box-shadow: var(--sld-button-focus-shadow);
-}
 :global(button) .button-start,
 :global(.button) .button-start,
 :global(button.button) .button-start,
@@ -357,7 +337,7 @@
   max-height: 100%;
   align-items: center;
   align-content: center;
-  padding: 0 0.15rem;
+  padding: 0 0.5rem;
   display: block;
 }
 :global(button) .button-start:empty,
@@ -373,13 +353,18 @@
 :global(input[type="button"]) .button-central,
 :global(input[type="submit"]) .button-central {
   --preset-ellipsis-line: 1;
+  display: block;
   max-width: 100%;
   max-height: 100%;
   flex: 1;
   align-items: center;
   align-content: center;
-  padding-right: calc(var(--content-padding, 0.25rem) / 2);
+  justify-content: center;
+  justify-items: center;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
   text-align: var(--sld-button-text-align, center);
+  overflow: hidden;
 }
 :global(button) .button-central[ellipsis], :global(button) .button-central.ellipsis,
 :global(.button) .button-central[ellipsis],

package/dist/slotui-css/confirm.css

@@ -1,7 +1,7 @@
 .confirm {
-  display: contents;
   display: flex;
   align-items: center;
+  gap: 0.5rem;
 }
 .confirm-validate {
   display: flex;

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

@@ -1,7 +1,7 @@
 .confirm {
-  display: contents;
   display: flex;
   align-items: center;
+  gap: 0.5rem;
 }
 .confirm-validate {
   display: flex;

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

@@ -3247,9 +3247,9 @@ label {
 
 /** confirm.scss ----------------*/
 .confirm {
-  display: contents;
   display: flex;
   align-items: center;
+  gap: 0.5rem;
 }
 .confirm-validate {
   display: flex;
@@ -3428,9 +3428,30 @@ label {
   transition: all 0.2s ease-in-out;
   overflow: hidden;
   cursor: pointer;
-  align-content: stretch;
-  align-items: stretch;
+  align-content: center;
+  align-items: center;
   background: var(--sld-button-background);
+  /*     :focus {
+      outline: 1px solid var(--sld-button-focus-border-color);
+      outline-offset: 2px;
+      box-shadow: var(--sld-button-focus-shadow);
+  }
+  :focus-visible {
+      outline: 1px solid var(--sld-button-focus-border-color);
+      outline-offset: -2px;
+      box-shadow: var(--sld-button-focus-shadow);
+  }
+  :hover {
+      background-color: var(--sld-button-hover-background);
+      box-shadow: var(--sld-button-hover-shadow);
+  }
+  :active {
+      transform: translateY(1px);
+      box-shadow: var(--sld-button-active-shadow);
+  }
+  :focus:not(:focus-visible) {
+      box-shadow: var(--sld-button-focus-shadow);
+  } */
   --preset-width: var(--sld-width-small);
   width: var(--preset-width-small);
 }
@@ -3689,47 +3710,6 @@ label {
 :global(input[type="submit"])[elevation-5] {
   box-shadow: var(--sld-elevation-5);
 }
-:global(button) :focus,
-:global(.button) :focus,
-:global(button.button) :focus,
-:global(input[type="button"]) :focus,
-:global(input[type="submit"]) :focus {
-  outline: 1px solid var(--sld-button-focus-border-color);
-  outline-offset: 2px;
-  box-shadow: var(--sld-button-focus-shadow);
-}
-:global(button) :focus-visible,
-:global(.button) :focus-visible,
-:global(button.button) :focus-visible,
-:global(input[type="button"]) :focus-visible,
-:global(input[type="submit"]) :focus-visible {
-  outline: 1px solid var(--sld-button-focus-border-color);
-  outline-offset: -2px;
-  box-shadow: var(--sld-button-focus-shadow);
-}
-:global(button) :hover,
-:global(.button) :hover,
-:global(button.button) :hover,
-:global(input[type="button"]) :hover,
-:global(input[type="submit"]) :hover {
-  background-color: var(--sld-button-hover-background);
-  box-shadow: var(--sld-button-hover-shadow);
-}
-:global(button) :active,
-:global(.button) :active,
-:global(button.button) :active,
-:global(input[type="button"]) :active,
-:global(input[type="submit"]) :active {
-  transform: translateY(1px);
-  box-shadow: var(--sld-button-active-shadow);
-}
-:global(button) :focus:not(:focus-visible),
-:global(.button) :focus:not(:focus-visible),
-:global(button.button) :focus:not(:focus-visible),
-:global(input[type="button"]) :focus:not(:focus-visible),
-:global(input[type="submit"]) :focus:not(:focus-visible) {
-  box-shadow: var(--sld-button-focus-shadow);
-}
 :global(button) .button-start,
 :global(.button) .button-start,
 :global(button.button) .button-start,
@@ -3741,7 +3721,7 @@ label {
   max-height: 100%;
   align-items: center;
   align-content: center;
-  padding: 0 0.15rem;
+  padding: 0 0.5rem;
   display: block;
 }
 :global(button) .button-start:empty,
@@ -3757,13 +3737,18 @@ label {
 :global(input[type="button"]) .button-central,
 :global(input[type="submit"]) .button-central {
   --preset-ellipsis-line: 1;
+  display: block;
   max-width: 100%;
   max-height: 100%;
   flex: 1;
   align-items: center;
   align-content: center;
-  padding-right: calc(var(--content-padding, 0.25rem) / 2);
+  justify-content: center;
+  justify-items: center;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
   text-align: var(--sld-button-text-align, center);
+  overflow: hidden;
 }
 :global(button) .button-central[ellipsis], :global(button) .button-central.ellipsis,
 :global(.button) .button-central[ellipsis],

package/dist/ui/chromeFrame/chromeFrame.store.d.ts

@@ -0,0 +1,28 @@
+import type { ChromeFrameArgs, IChromeOptionsFrameArgs } from './types.js';
+export type WindowStoreListType = Map<string | number, ChromeFrameArgs>;
+/** used as a reference */
+export declare const windowListObjects: Map<string | number, ChromeFrameArgs<Record<string, any>>>;
+/** active frameId */
+export declare const activeFrame: import("svelte/store").Writable<string | number>;
+/** host the generic configuration */
+export declare const chromeFrameConfigStore: import("svelte/store").Writable<IChromeOptionsFrameArgs>;
+/** host the chromeFrame list */
+export declare const chromeFrameListStore: import("svelte/store").Writable<WindowStoreListType>;
+export declare const chromeFrameStore: {
+    subscribe: {
+        (this: void, run: import("svelte/store").Subscriber<WindowStoreListType>, invalidate?: (() => void) | undefined): import("svelte/store").Unsubscriber;
+        (this: void, run: import("svelte/store").Subscriber<WindowStoreListType>, invalidate?: (() => void) | undefined): import("svelte/store").Unsubscriber;
+    };
+    activeFrame: import("svelte/store").Writable<string | number>;
+    defaultConfigStore: import("svelte/store").Writable<IChromeOptionsFrameArgs>;
+    create: (payload: ChromeFrameArgs) => void;
+    open: (payload: ChromeFrameArgs) => void;
+    close: (frameId: string | number) => void;
+    minimize: (frameId: string | number) => void;
+    toggle: (frameId: string | number) => void;
+    remove: (frameId: string | number) => void;
+    updatePos: (frameId: string | number, position: ChromeFrameArgs["position"]) => void;
+    makeOnTop: (frameId: string | number) => void;
+    reset: () => void;
+};
+export declare const chromeFrameListRef: Record<string, any>;

package/dist/ui/chromeFrame/chromeFrame.utils.d.ts

@@ -1,6 +1,9 @@
 import type { ChromeFrameArgs } from './types.js';
 export declare function getChromeFrame(frameId: string | number): {
-    subscribe: (this: void, run: (value: ChromeFrameArgs<Record<string, any>> | undefined) => void, invalidate?: () => void) => () => void;
+    subscribe: {
+        (this: void, run: import("svelte/store").Subscriber<ChromeFrameArgs<Record<string, any>> | undefined>, invalidate?: (() => void) | undefined): import("svelte/store").Unsubscriber;
+        (this: void, run: import("svelte/store").Subscriber<ChromeFrameArgs<Record<string, any>> | undefined>, invalidate?: (() => void) | undefined): import("svelte/store").Unsubscriber;
+    };
     updatePos: (position: ChromeFrameArgs["position"]) => void;
     remove: () => void;
     makeOnTop: () => void;

package/dist/ui/login/store.d.ts

@@ -0,0 +1,5 @@
+type UserStoreType = {
+    logged: boolean;
+};
+export declare const userStore: import("svelte/store").Writable<UserStoreType>;
+export {};

package/dist/ui/window/store.d.ts

@@ -5,8 +5,14 @@ export interface Wstore {
     activatedFrame?: string;
 }
 export declare const wStore: {
-    subscribe: (this: void, run: (value: Wstore) => void, invalidate?: () => void) => () => void;
-    set: (this: void, value: Wstore) => void;
+    subscribe: {
+        (this: void, run: import("svelte/store").Subscriber<Wstore>, invalidate?: (() => void) | undefined): import("svelte/store").Unsubscriber;
+        (this: void, run: import("svelte/store").Subscriber<Wstore>, invalidate?: (() => void) | undefined): import("svelte/store").Unsubscriber;
+    };
+    set: {
+        (this: void, value: Wstore): void;
+        (this: void, value: Wstore): void;
+    };
     get: typeof get;
     create: (payload: any) => void;
     open: (payload: any) => void;

package/dist/utils/engine/wactions.utils.d.ts

@@ -0,0 +1,3 @@
+export declare const startMenuStore: import("svelte/store").Writable<boolean>;
+declare function toggleStartMenu(event: PointerEvent): void;
+export { toggleStartMenu };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@medyll/idae-slotui-svelte",
-	"version": "0.36.0",
+	"version": "0.38.0",
 	"scope": "@medyll",
 	"scripts": {
 		"dev": "vite dev",
@@ -40,7 +40,7 @@
 		"@medyll/idae-prettier-config": "^1.1.0",
 		"@playwright/test": "^1.45.3",
 		"@sveltejs/adapter-auto": "^3.2.2",
-		"@sveltejs/kit": "^2.5.20",
+		"@sveltejs/kit": "^2.5.28",
 		"@sveltejs/package": "^2.3.2",
 		"@sveltejs/vite-plugin-svelte": "^3.1.1",
 		"@types/eslint": "9.6.0",
@@ -73,7 +73,7 @@
 		"rimraf": "^6.0.1",
 		"sass": "^1.77.8",
 		"sveld": "^0.20.0",
-		"svelte": "^5.0.0-next.210",
+		"svelte": "^5.0.0-next.257",
 		"svelte-check": "^3.8.5",
 		"svelte2tsx": "^0.7.15",
 		"tslib": "^2.6.3",
@@ -87,8 +87,8 @@
 	"dependencies": {
 		"@iconify/svelte": "^4.0.2",
 		"@medyll/cssfabric": "^0.4.2",
-		"@medyll/idae-be": "^0.36.0",
-		"@medyll/idae-engine": "^1.34.0",
+		"@medyll/idae-be": "^0.38.0",
+		"@medyll/idae-engine": "^1.36.0",
 		"d3": "^7.9.0",
 		"lerna": "^8.1.8",
 		"npm-check-updates": "^17.0.2",
@@ -97,4 +97,4 @@
 		"svelte-preprocess": "^6.0.2",
 		"svelte-spa-router": "^4.0.1"
 	}
-}
+}