@medyll/idae-slotui-svelte 0.35.0 → 0.37.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

@@ -11,6 +11,7 @@ declare class __sveltets_Render<T = any> {
         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 */
+    /** @deprecated text displayed on initial button */
     primaryInitial: string;
-    /** text displayed on the confirm phase */
+    /**  @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);