@medyll/idae-slotui-svelte 0.122.1 → 0.124.0

package/dist/base/cartouche/Cartouche.svelte

@@ -1,116 +1,116 @@
-<script lang="ts">
-	import { slide } from 'svelte/transition';
-	import Icon from '../icon/Icon.svelte';
-	import Button from '../../controls/button/Button.svelte';
-	import IconButton from '../../controls/button/IconButton.svelte';
-	import type { CartoucheClasses, CartoucheProps } from './types.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { ExpandProps } from '../../types/index.js';
-
-	export const actions = {
-		open,
-		toggle,
-		close
-	};
-
-	let {
-		class: className = '',
-		classes = {} as CartoucheClasses,
-		style = undefined,
-		element = $bindable(),
-		primary,
-		secondary,
-		icon,
-		stacked = false,
-		component,
-		componentProps = {},
-		keepCartoucheContent = true,
-		showTitleDivider = false,
-		bordered = false,
-		children,
-		cartoucheIcon,
-		cartouchePrimary,
-		cartoucheSecondary,
-		cartoucheButtons,
-		isOpen = $bindable(),
-		dense,
-		tall = "small"
-	}: ExpandProps<CartoucheProps> = $props();
-
-	function open() {
-		isOpen = true;
-	}
-	function toggle(event: Event) {
-		isOpen = !isOpen;
-	}
-	function close() {
-		isOpen = false;
-	}
-
-	const chevronIcon = $derived(!isOpen ? 'chevron-down' : 'chevron-up');
-
-	let Component = $state(component);
-</script>
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	class:stacked
-	bind:this={element}
-	class="cartouche {className}"
-	data-bordered={bordered ?? false}
-	aria-expanded={isOpen} 
-	{style}
->
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div class="control {classes.control} tall-{tall}" {tall} onclick={actions.toggle}>
-		{#if icon || cartoucheIcon}
-			<div class="controlIcon {classes.controlIcon}">
-				<Slotted child={cartoucheIcon}>
-					<Icon {icon} />
-				</Slotted>
-			</div>
-		{/if}
-		<div class="controlLabel {classes.controlLabel}">
-			{#if primary || cartouchePrimary}
-				<Slotted child={cartouchePrimary}>
-					{primary}
-				</Slotted>
-				<div>
-					<Slotted child={cartoucheSecondary}>
-						{secondary ?? ''}
-					</Slotted>
-				</div>
-			{/if}
-		</div>
-		<div class={showTitleDivider ? 'divider' : ''} style="flex:1" />
-		{#if cartoucheButtons}
-			<div
-				onclick={(event) => {
-					event.preventDefault();
-					event.stopPropagation();
-				}}
-				class="cartouche-control-actions"
-			>
-				<Slotted child={cartoucheButtons}></Slotted>
-			</div>
-		{/if}
-		<div class="chevron">
-			<Button variant="flat"   icon={chevronIcon} />
-		</div>
-	</div>
-	{#if isOpen || keepCartoucheContent}
-	<div class="content-wrapper" aria-expanded={isOpen}>	
-		<div aria-expanded={isOpen} class="content {classes.content}" transition:slide>
-			{#if Component}
-				<Component  {...componentProps} />
-			{/if}
-			<Slotted child={children} />
-		</div>
-	</div>
-	{/if}
-</div>
-
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+	import Icon from '../icon/Icon.svelte';
+	import Button from '../../controls/button/Button.svelte';
+	import IconButton from '../../controls/button/IconButton.svelte';
+	import type { CartoucheClasses, CartoucheProps } from './types.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { ExpandProps } from '../../types/index.js';
+
+	export const actions = {
+		open,
+		toggle,
+		close
+	};
+
+	let {
+		class: className = '',
+		classes = {} as CartoucheClasses,
+		style = undefined,
+		element = $bindable(),
+		primary,
+		secondary,
+		icon,
+		stacked = false,
+		component,
+		componentProps = {},
+		keepCartoucheContent = true,
+		showTitleDivider = false,
+		bordered = false,
+		children,
+		cartoucheIcon,
+		cartouchePrimary,
+		cartoucheSecondary,
+		cartoucheButtons,
+		isOpen = $bindable(),
+		dense,
+		tall = "small"
+	}: ExpandProps<CartoucheProps> = $props();
+
+	function open() {
+		isOpen = true;
+	}
+	function toggle(event: Event) {
+		isOpen = !isOpen;
+	}
+	function close() {
+		isOpen = false;
+	}
+
+	const chevronIcon = $derived(!isOpen ? 'chevron-down' : 'chevron-up');
+
+	let Component = $state(component);
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class:stacked
+	bind:this={element}
+	class="cartouche {className}"
+	data-bordered={bordered ?? false}
+	aria-expanded={isOpen} 
+	{style}
+>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="control {classes.control} tall-{tall}" {tall} onclick={actions.toggle}>
+		{#if icon || cartoucheIcon}
+			<div class="controlIcon {classes.controlIcon}">
+				<Slotted child={cartoucheIcon}>
+					<Icon {icon} />
+				</Slotted>
+			</div>
+		{/if}
+		<div class="controlLabel {classes.controlLabel}">
+			{#if primary || cartouchePrimary}
+				<Slotted child={cartouchePrimary}>
+					{primary}
+				</Slotted>
+				<div>
+					<Slotted child={cartoucheSecondary}>
+						{secondary ?? ''}
+					</Slotted>
+				</div>
+			{/if}
+		</div>
+		<div class={showTitleDivider ? 'divider' : ''} style="flex:1" />
+		{#if cartoucheButtons}
+			<div
+				onclick={(event) => {
+					event.preventDefault();
+					event.stopPropagation();
+				}}
+				class="cartouche-control-actions"
+			>
+				<Slotted child={cartoucheButtons}></Slotted>
+			</div>
+		{/if}
+		<div class="chevron">
+			<Button variant="flat"   icon={chevronIcon} />
+		</div>
+	</div>
+	{#if isOpen || keepCartoucheContent}
+	<div class="content-wrapper" aria-expanded={isOpen}>	
+		<div aria-expanded={isOpen} class="content {classes.content}" transition:slide>
+			{#if Component}
+				<Component  {...componentProps} />
+			{/if}
+			<Slotted child={children} />
+		</div>
+	</div>
+	{/if}
+</div>
+
 <style>:root {
   --cartouche-radius: var(--sld-radius-small);
   --cartouche-control-gap: var(--sld-gap-small);
@@ -224,4 +224,4 @@
 }
 .cartouche .content[aria-expanded=false] {
   display: none;
-}</style>
+}</style>

package/dist/base/cartouche/cartouche.scss

@@ -1,114 +1,114 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-  --cartouche-radius: var(--sld-radius-small);
-  --cartouche-control-gap: var(--sld-gap-small);
-  --cartouche-border: var(--sld-color-foreground-alpha-high);
-  --cartouche-background-color: var(--sld-color-background);
-  --cartouche-background-color-hover: var(--sld-color-background-darken-low);
-  --cartouche-divider-border: var(--sld-color-foreground-alpha-mid);
-}
-
-.cartouche {
-  & {
-    border-radius: var(--cartouche-radius);
-    background-clip: padding-box;
-    overflow: hidden;
-    box-shadow: var(--sld-elevation-1);
-  }
-
-  &[aria-expanded="true"] {
-    box-shadow: var(--sld-elevation-2);
-  }
-
-  &.stacked {
-    border-radius: 0;
-    &:first-child {
-      border-top-left-radius: var(--cartouche-radius);
-      border-top-right-radius: var(--cartouche-radius);
-    }
-    &:last-child {
-      border-bottom-left-radius: var(--cartouche-radius);
-      border-bottom-right-radius: var(--cartouche-radius);
-    }
-  }
-
-  .control {
-    @include slotui-mixins.ui-tall-presets;
-    @include slotui-mixins.ui-transition;
-
-    & {
-      display: flex;
-      align-items: center;
-      gap: var(--cartouche-control-gap);
-      background-color: var(--cartouche-background-color);
-      padding: auto 0.25rem;
-      cursor: pointer;
-    }
-
-    &:hover {
-      background-color: var(--cartouche-background-color-hover);
-    }
-
-    .controlIcon {
-      display: flex;
-      align-items: center;
-      padding: 0 0.5rem;
-    }
-
-    .controlLabel {
-      cursor: pointer;
-      padding: 0 0.5rem;
-    }
-
-    .cartouche-control-actions {
-      cursor: default;
-    }
-
-    .chevron {
-      cursor: pointer;
-      padding: 0.5rem;
-      align-items: center;
-      align-content: center;
-    }
-
-    .divider {
-      // border-bottom: 1px solid var(--cartouche-divider-border);
-    }
-  }
-
-  .content {
-    @include slotui-mixins.ui-transition;
-
-    & {
-      overflow: hidden;
-      background-color: var(--cartouche-background-color);
-      content-visibility: auto;
-      padding: 1px;
-      padding-top: 0;
-      border-radius: 4px;
-    }
-    &-wrapper {
-      padding: 1px;
-      padding-top: 0;
-      //border: 1px solid var(--cartouche-border, red);
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      border-top: none !important;
-      background-color: var(--cartouche-background-color);
-      &[aria-expanded="false"] {
-        display: none;
-      }
-      &[aria-expanded="true"] {
-        //border-top: 1px solid var(--cartouche-border);
-      }
-    }
-
-    &[aria-expanded="false"] {
-      display: none;
-    }
-    &[aria-expanded="true"] {
-      //border-top: 1px solid var(--cartouche-border);
-    }
-  }
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+  --cartouche-radius: var(--sld-radius-small);
+  --cartouche-control-gap: var(--sld-gap-small);
+  --cartouche-border: var(--sld-color-foreground-alpha-high);
+  --cartouche-background-color: var(--sld-color-background);
+  --cartouche-background-color-hover: var(--sld-color-background-darken-low);
+  --cartouche-divider-border: var(--sld-color-foreground-alpha-mid);
+}
+
+.cartouche {
+  & {
+    border-radius: var(--cartouche-radius);
+    background-clip: padding-box;
+    overflow: hidden;
+    box-shadow: var(--sld-elevation-1);
+  }
+
+  &[aria-expanded="true"] {
+    box-shadow: var(--sld-elevation-2);
+  }
+
+  &.stacked {
+    border-radius: 0;
+    &:first-child {
+      border-top-left-radius: var(--cartouche-radius);
+      border-top-right-radius: var(--cartouche-radius);
+    }
+    &:last-child {
+      border-bottom-left-radius: var(--cartouche-radius);
+      border-bottom-right-radius: var(--cartouche-radius);
+    }
+  }
+
+  .control {
+    @include slotui-mixins.ui-tall-presets;
+    @include slotui-mixins.ui-transition;
+
+    & {
+      display: flex;
+      align-items: center;
+      gap: var(--cartouche-control-gap);
+      background-color: var(--cartouche-background-color);
+      padding: auto 0.25rem;
+      cursor: pointer;
+    }
+
+    &:hover {
+      background-color: var(--cartouche-background-color-hover);
+    }
+
+    .controlIcon {
+      display: flex;
+      align-items: center;
+      padding: 0 0.5rem;
+    }
+
+    .controlLabel {
+      cursor: pointer;
+      padding: 0 0.5rem;
+    }
+
+    .cartouche-control-actions {
+      cursor: default;
+    }
+
+    .chevron {
+      cursor: pointer;
+      padding: 0.5rem;
+      align-items: center;
+      align-content: center;
+    }
+
+    .divider {
+      // border-bottom: 1px solid var(--cartouche-divider-border);
+    }
+  }
+
+  .content {
+    @include slotui-mixins.ui-transition;
+
+    & {
+      overflow: hidden;
+      background-color: var(--cartouche-background-color);
+      content-visibility: auto;
+      padding: 1px;
+      padding-top: 0;
+      border-radius: 4px;
+    }
+    &-wrapper {
+      padding: 1px;
+      padding-top: 0;
+      //border: 1px solid var(--cartouche-border, red);
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-top: none !important;
+      background-color: var(--cartouche-background-color);
+      &[aria-expanded="false"] {
+        display: none;
+      }
+      &[aria-expanded="true"] {
+        //border-top: 1px solid var(--cartouche-border);
+      }
+    }
+
+    &[aria-expanded="false"] {
+      display: none;
+    }
+    &[aria-expanded="true"] {
+      //border-top: 1px solid var(--cartouche-border);
+    }
+  }
+}

package/dist/base/chipper/Chipper.demo.svelte

@@ -1,45 +1,45 @@
-<script lang="ts">
-	import ComponentDemo from '../demoer/DemoerComponent.svelte';
-	import Demoer from '../demoer/Demoer.svelte';
-	import DemoPage from '../demoer/DemoPage.svelte';
-	import { chipperDemoValues, type ChipperProps } from './types.js';
-	import { defaultsArgs } from '../demoer/demoer.utils.js';
-	import Chipper from './Chipper.svelte';
-
-	import { parameters, componentArgs } from './types.js';
-
-	let codeSlot = `
-<Chipper >
-	<div class="pad-2">some content</div>
-	{#snippet chipperChip()}
-		<div class="theme-bg-primary radius-small w-full h-full"></div>
-	{/snippet}
-</Chipper>`;
-
-	let codeProps = `
-<Chipper
-	content="<div class='pad'>Some props html content<\/div>"
-	color="red" />`;
-</script>
-
-<ComponentDemo component="Chipper">
-	<DemoPage component="Chipper" code={codeSlot}>
-		<Demoer {parameters} {componentArgs}>
-			{#snippet children({ activeParams })}
-				<Chipper {...activeParams}>
-					<div class="pad-2">some content</div>
-					{#snippet chipperChip()}
-						<div class="theme-bg-primary radius-small w-full h-full"></div>
-					{/snippet}
-				</Chipper>
-			{/snippet}
-		</Demoer>
-	</DemoPage>
-	<DemoPage title="Without slots" component="Chipper" code={codeProps}>
-		<Demoer {parameters} {componentArgs}>
-			{#snippet children({ activeParams })}
-				<Chipper {...activeParams} />
-			{/snippet}
-		</Demoer>
-	</DemoPage>
-</ComponentDemo>
+<script lang="ts">
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+	import Demoer from '../demoer/Demoer.svelte';
+	import DemoPage from '../demoer/DemoPage.svelte';
+	import { chipperDemoValues, type ChipperProps } from './types.js';
+	import { defaultsArgs } from '../demoer/demoer.utils.js';
+	import Chipper from './Chipper.svelte';
+
+	import { parameters, componentArgs } from './types.js';
+
+	let codeSlot = `
+<Chipper >
+	<div class="pad-2">some content</div>
+	{#snippet chipperChip()}
+		<div class="theme-bg-primary radius-small w-full h-full"></div>
+	{/snippet}
+</Chipper>`;
+
+	let codeProps = `
+<Chipper
+	content="<div class='pad'>Some props html content<\/div>"
+	color="red" />`;
+</script>
+
+<ComponentDemo component="Chipper">
+	<DemoPage component="Chipper" code={codeSlot}>
+		<Demoer {parameters} {componentArgs}>
+			{#snippet children({ activeParams })}
+				<Chipper {...activeParams}>
+					<div class="pad-2">some content</div>
+					{#snippet chipperChip()}
+						<div class="theme-bg-primary radius-small w-full h-full"></div>
+					{/snippet}
+				</Chipper>
+			{/snippet}
+		</Demoer>
+	</DemoPage>
+	<DemoPage title="Without slots" component="Chipper" code={codeProps}>
+		<Demoer {parameters} {componentArgs}>
+			{#snippet children({ activeParams })}
+				<Chipper {...activeParams} />
+			{/snippet}
+		</Demoer>
+	</DemoPage>
+</ComponentDemo>

package/dist/base/chipper/Chipper.svelte

@@ -1,38 +1,38 @@
-<script lang="ts">
-	import type { CommonProps, ElementProps, ExpandProps } from '../../types/index.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { ChipperProps } from './types.js';
-
-	let {
-		class: className = '',
-		style,
-		element = $bindable<HTMLDivElement>(),
-		position = 'bottom',
-		theme: status = 'primary',
-		color = '',
-		content = '',
-		showChip = true,
-		chipperChip,
-		children
-	}: ExpandProps<ChipperProps> = $props();
-
-	let cssColor = $derived(color ?? (status ? `var(--sld-color-${status})` : ''));
-</script>
-
-<div bind:this={element} style="{style};position:relative;" class="chipper {className} ">
-	<Slotted child={children}>
-		{#if content}
-			<div class="chipper-content">{@html content ?? ''}</div>
-		{/if}
-	</Slotted>
-
-	<chip class="chipper-chip" data-position={position} style:--css-button-chip-color={cssColor}>
-		{#if showChip}
-			<Slotted child={chipperChip} />
-		{/if}
-	</chip>
-</div>
-
+<script lang="ts">
+	import type { CommonProps, ElementProps, ExpandProps } from '../../types/index.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { ChipperProps } from './types.js';
+
+	let {
+		class: className = '',
+		style,
+		element = $bindable<HTMLDivElement>(),
+		position = 'bottom',
+		theme: status = 'primary',
+		color = '',
+		content = '',
+		showChip = true,
+		chipperChip,
+		children
+	}: ExpandProps<ChipperProps> = $props();
+
+	let cssColor = $derived(color ?? (status ? `var(--sld-color-${status})` : ''));
+</script>
+
+<div bind:this={element} style="{style};position:relative;" class="chipper {className} ">
+	<Slotted child={children}>
+		{#if content}
+			<div class="chipper-content">{@html content ?? ''}</div>
+		{/if}
+	</Slotted>
+
+	<chip class="chipper-chip" data-position={position} style:--css-button-chip-color={cssColor}>
+		{#if showChip}
+			<Slotted child={chipperChip} />
+		{/if}
+	</chip>
+</div>
+
 <style>:root {
   --chipper-gap: var(--sld-gap-tiny);
   --chipper-radius: var(--sld-radius-large);
@@ -88,4 +88,4 @@
   width: 100%;
   min-height: 3px;
   background-color: var(--chipper-chip-color);
-}</style>
+}</style>