lithesome 0.13.2 → 0.13.3

package/dist/components/Accordion/Accordion.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
 import { AccordionContext } from "./context.svelte.js";
 export const { context, contextName } = setupContext();
-</script>
-
+</script>
+
 <script lang="ts">import { useActions, classProp } from "../../internal/index.js";
 import { setContext } from "svelte";
 let {
@@ -19,15 +19,15 @@ setContext(contextName, ctx);
 $effect(() => {
   ctx.single = single;
 });
-</script>
-
-<div
-	bind:this={self}
-	use:useActions={use}
-	id={ctx.uid()}
-	class={classProp(klass, { active })}
-	data-accordion=""
-	{...props}
->
-	{@render children({ active })}
-</div>
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	id={ctx.uid()}
+	class={classProp(klass, { active })}
+	data-accordion=""
+	{...props}
+>
+	{@render children({ active })}
+</div>

package/dist/components/Accordion/AccordionButton.svelte

@@ -11,21 +11,21 @@ const handleClick = (e) => {
   if (!item?.disabled)
     ctx.toggle(itemId);
 };
-</script>
-
-<button
-	type="button"
-	bind:this={self}
-	use:useActions={use}
-	class={classProp(klass, { active, disabled: item?.disabled || false })}
-	aria-expanded={active}
-	aria-disabled={item?.disabled}
-	aria-controls={active ? ctx.uid('content') : undefined}
-	tabindex={item?.disabled ? -1 : 0}
-	data-accordionbutton=""
-	data-active={active || undefined}
-	onclick={handleClick}
-	{...props}
->
-	{@render children({ active, disabled: item?.disabled || false })}
-</button>
+</script>
+
+<button
+	type="button"
+	bind:this={self}
+	use:useActions={use}
+	class={classProp(klass, { active, disabled: item?.disabled || false })}
+	aria-expanded={active}
+	aria-disabled={item?.disabled}
+	aria-controls={active ? ctx.uid('content') : undefined}
+	tabindex={item?.disabled ? -1 : 0}
+	data-accordionbutton=""
+	data-active={active || undefined}
+	onclick={handleClick}
+	{...props}
+>
+	{@render children({ active, disabled: item?.disabled || false })}
+</button>

package/dist/components/Accordion/AccordionContent.svelte

@@ -12,16 +12,16 @@ const attrs = $derived({
   "data-active": active || void 0,
   class: classProp(klass, { active })
 });
-</script>
-
-{#if inTransition && outTransition && active}
-	{@const { config: inConf, transition: inFn } = inTransition}
-	{@const { config: outConf, transition: outFn } = outTransition}
-	<div bind:this={self} use:useActions={use} in:inFn={inConf} out:outFn={outConf} {...attrs} {...props}>
-		{@render children({ active })}
-	</div>
-{:else if active}
-	<div bind:this={self} use:useActions={use} {...attrs} {...props}>
-		{@render children({ active })}
-	</div>
-{/if}
+</script>
+
+{#if inTransition && outTransition && active}
+	{@const { config: inConf, transition: inFn } = inTransition}
+	{@const { config: outConf, transition: outFn } = outTransition}
+	<div bind:this={self} use:useActions={use} in:inFn={inConf} out:outFn={outConf} {...attrs} {...props}>
+		{@render children({ active })}
+	</div>
+{:else if active}
+	<div bind:this={self} use:useActions={use} {...attrs} {...props}>
+		{@render children({ active })}
+	</div>
+{/if}

package/dist/components/Accordion/AccordionHeading.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">import { useActions, classProp } from "../../internal/index.js";
 let { children, class: klass, use = [], level = 3, self = $bindable(), ...props } = $props();
-</script>
-
-<div
-	bind:this={self}
-	use:useActions={use}
-	class={classProp(klass)}
-	role="heading"
-	aria-level={level}
-	data-accordionheading=""
-	{...props}
->
-	{@render children({})}
-</div>
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	class={classProp(klass)}
+	role="heading"
+	aria-level={level}
+	data-accordionheading=""
+	{...props}
+>
+	{@render children({})}
+</div>

package/dist/components/Accordion/AccordionItem.svelte

@@ -24,17 +24,17 @@ onMount(() => {
 $effect(() => {
   ctx.setDisabled(uid(), disabled);
 });
-</script>
-
-<div
-	bind:this={self}
-	use:useActions={use}
-	id={uid()}
-	class={classProp(klass, { active, disabled })}
-	data-accordionitem=""
-	data-disabled={disabled || undefined}
-	data-state={active ? 'opened' : 'closed'}
-	{...props}
->
-	{@render children({ active, disabled })}
-</div>
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	id={uid()}
+	class={classProp(klass, { active, disabled })}
+	data-accordionitem=""
+	data-disabled={disabled || undefined}
+	data-state={active ? 'opened' : 'closed'}
+	{...props}
+>
+	{@render children({ active, disabled })}
+</div>

package/dist/components/Checkbox/Checkbox.svelte

@@ -16,21 +16,21 @@ const handleClick = (e) => {
     return;
   checked = checked === "mixed" ? true : !checked;
 };
-</script>
-
-<button
-	type="button"
-	bind:this={self}
-	use:useActions={use}
-	class={classProp(klass, { checked })}
-	role="checkbox"
-	aria-checked={checked}
-	aria-required={required}
-	disabled={disabled || undefined}
-	data-state={checked ? 'checked' : 'unchecked'}
-	data-checkbox=""
-	onclick={handleClick}
-	{...props}
->
-	{@render children?.({ checked })}
-</button>
+</script>
+
+<button
+	type="button"
+	bind:this={self}
+	use:useActions={use}
+	class={classProp(klass, { checked })}
+	role="checkbox"
+	aria-checked={checked}
+	aria-required={required}
+	disabled={disabled || undefined}
+	data-state={checked ? 'checked' : 'unchecked'}
+	data-checkbox=""
+	onclick={handleClick}
+	{...props}
+>
+	{@render children?.({ checked })}
+</button>

package/dist/components/Combobox/Combobox.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
 import { ComboboxContext } from "./context.svelte.js";
 export const { context, contextName } = setupContext();
-</script>
-
+</script>
+
 <script lang="ts" generics="ValueType">import { useActions, classProp } from "../../internal/index.js";
 import { setContext, onMount, tick } from "svelte";
 let {
@@ -41,16 +41,16 @@ onMount(async () => {
   ctx.close();
   ctx.mounted = true;
 });
-</script>
-
-<div
-	bind:this={self}
-	use:useActions={use}
-	id={ctx.uid()}
-	class={classProp(klass, { visible: ctx.visible && ctx.mounted })}
-	data-select=""
-	data-state={ctx.visible && ctx.mounted ? 'opened' : 'closed'}
-	{...props}
->
-	{@render children({ visible: ctx.visible && ctx.mounted })}
-</div>
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	id={ctx.uid()}
+	class={classProp(klass, { visible: ctx.visible && ctx.mounted })}
+	data-select=""
+	data-state={ctx.visible && ctx.mounted ? 'opened' : 'closed'}
+	{...props}
+>
+	{@render children({ visible: ctx.visible && ctx.mounted })}
+</div>

package/dist/components/Combobox/ComboboxArrow.svelte

@@ -2,13 +2,13 @@
 import { FloatingArrow } from "../../internal/index.js";
 let { class: klass, use = [], self = $bindable(), ...props } = $props();
 const ctx = context();
-</script>
-
-<FloatingArrow
-	{ctx}
-	component="Combobox"
-	state={{ visible: ctx.visible }}
-	class={klass}
-	id={ctx.uid('arrow')}
-	{...props}
-/>
+</script>
+
+<FloatingArrow
+	{ctx}
+	component="Combobox"
+	state={{ visible: ctx.visible }}
+	class={klass}
+	id={ctx.uid('arrow')}
+	{...props}
+/>

package/dist/components/Combobox/ComboboxContent.svelte

@@ -14,24 +14,24 @@ let {
 } = $props();
 const ctx = context();
 const state = $derived({ visible: ctx.visible });
-</script>
-
-<FloatingContent
-	{children}
-	componentName="Select"
-	visible={ctx.visible}
-	bind:self
-	{state}
-	{ctx}
-	{transition}
-	{use}
-	{sameWidth}
-	{constrainViewport}
-	{placement}
-	{portalTarget}
-	outsideCallback={() => ctx.close()}
-	role="listbox"
-	class={classProp(klass, state)}
-	hidden={!ctx.mounted || undefined}
-	{...props}
-/>
+</script>
+
+<FloatingContent
+	{children}
+	componentName="Select"
+	visible={ctx.visible}
+	bind:self
+	{state}
+	{ctx}
+	{transition}
+	{use}
+	{sameWidth}
+	{constrainViewport}
+	{placement}
+	{portalTarget}
+	outsideCallback={() => ctx.close()}
+	role="listbox"
+	class={classProp(klass, state)}
+	hidden={!ctx.mounted || undefined}
+	{...props}
+/>

package/dist/components/Combobox/ComboboxInput.svelte

@@ -62,16 +62,16 @@ const handleKeydown = (e) => {
   if (key === "Tab")
     ctx.close();
 };
-</script>
-
-<input
-	type="text"
-	bind:this={self}
-	use:useActions={use}
-	id={ctx.uid('input')}
-	class={classProp(klass, { visible: ctx.visible })}
-	onclick={handleClick}
-	onkeydown={handleKeydown}
-	bind:value
-	{...props}
-/>
+</script>
+
+<input
+	type="text"
+	bind:this={self}
+	use:useActions={use}
+	id={ctx.uid('input')}
+	class={classProp(klass, { visible: ctx.visible })}
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+	bind:value
+	{...props}
+/>

package/dist/components/Combobox/ComboboxOption.svelte

@@ -44,28 +44,28 @@ onMount(() => {
     ctx.queryElements();
   };
 });
-</script>
-
-<button
-	bind:this={self}
-	bind:this={optionEl}
-	use:useActions={use}
-	id={uid()}
-	class={classProp(klass, { hovered, selected })}
-	type="button"
-	{disabled}
-	role="option"
-	tabindex="0"
-	aria-selected={selected}
-	data-hovered={hovered ? '' : undefined}
-	data-selected={selected ? '' : undefined}
-	data-comboboxoption=""
-	data-value={value}
-	data-label={label}
-	onmouseover={handleMouseover}
-	onfocus={handleFocus}
-	onclick={handleClick}
-	{...props}
->
-	{@render children({ hovered, selected })}
-</button>
+</script>
+
+<button
+	bind:this={self}
+	bind:this={optionEl}
+	use:useActions={use}
+	id={uid()}
+	class={classProp(klass, { hovered, selected })}
+	type="button"
+	{disabled}
+	role="option"
+	tabindex="0"
+	aria-selected={selected}
+	data-hovered={hovered ? '' : undefined}
+	data-selected={selected ? '' : undefined}
+	data-comboboxoption=""
+	data-value={value}
+	data-label={label}
+	onmouseover={handleMouseover}
+	onfocus={handleFocus}
+	onclick={handleClick}
+	{...props}
+>
+	{@render children({ hovered, selected })}
+</button>

package/dist/components/Hovercard/Hovercard.svelte

@@ -1,24 +1,24 @@
 <script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
 import { HovercardContext } from "./context.svelte.js";
 export const { context, contextName } = setupContext();
-</script>
-
+</script>
+
 <script lang="ts">import { useActions, classProp, parseDelay } from "../../internal/index.js";
 import { setContext } from "svelte";
 let { children, use = [], class: klass, self = $bindable(), delay = 700, ...props } = $props();
 const delays = parseDelay(delay);
 const ctx = new HovercardContext({ delays });
 setContext(contextName, ctx);
-</script>
-
-<div
-	bind:this={self}
-	use:useActions={use}
-	id={ctx.uid()}
-	class={classProp(klass, { visible: ctx.visible })}
-	data-hovercard=""
-	data-state={ctx.visible ? 'opened' : 'closed'}
-	{...props}
->
-	{@render children({ visible: ctx.visible })}
-</div>
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	id={ctx.uid()}
+	class={classProp(klass, { visible: ctx.visible })}
+	data-hovercard=""
+	data-state={ctx.visible ? 'opened' : 'closed'}
+	{...props}
+>
+	{@render children({ visible: ctx.visible })}
+</div>

package/dist/components/Hovercard/HovercardArrow.svelte

@@ -2,13 +2,13 @@
 import { FloatingArrow } from "../../internal/index.js";
 let { class: klass, use = [], self = $bindable(), ...props } = $props();
 const ctx = context();
-</script>
-
-<FloatingArrow
-	{ctx}
-	component="Hovercard"
-	state={{ visible: ctx.visible }}
-	class={klass}
-	id={ctx.uid('arrow')}
-	{...props}
-/>
+</script>
+
+<FloatingArrow
+	{ctx}
+	component="Hovercard"
+	state={{ visible: ctx.visible }}
+	class={klass}
+	id={ctx.uid('arrow')}
+	{...props}
+/>

package/dist/components/Hovercard/HovercardContent.svelte

@@ -26,25 +26,25 @@ const handleMouseleave = (e) => {
   ctx.hovered = false;
   ctx.close();
 };
-</script>
-
-<FloatingContent
-	{children}
-	componentName="Hovercard"
-	visible={ctx.visible}
-	bind:self
-	bind:sameWidth
-	bind:transition
-	bind:constrainViewport
-	bind:placement
-	bind:portalTarget
-	{state}
-	{ctx}
-	{use}
-	outsideCallback={() => ctx.forceClose()}
-	role="listbox"
-	class={classProp(klass, state)}
-	onmouseenter={handleMouseenter}
-	onmouseleave={handleMouseleave}
-	{...props}
-/>
+</script>
+
+<FloatingContent
+	{children}
+	componentName="Hovercard"
+	visible={ctx.visible}
+	bind:self
+	bind:sameWidth
+	bind:transition
+	bind:constrainViewport
+	bind:placement
+	bind:portalTarget
+	{state}
+	{ctx}
+	{use}
+	outsideCallback={() => ctx.forceClose()}
+	role="listbox"
+	class={classProp(klass, state)}
+	onmouseenter={handleMouseenter}
+	onmouseleave={handleMouseleave}
+	{...props}
+/>

package/dist/components/Hovercard/HovercardTrigger.svelte

@@ -37,14 +37,14 @@ $effect(() => {
     removeNodeProps(target, "aria-controls");
   }
 });
-</script>
-
-<div
-	bind:this={self}
-	use:useActions={use}
-	class={classProp(klass, { visible: ctx.visible })}
-	data-hovercardtrigger=""
-	{...props}
->
-	{@render children({ visible: ctx.visible })}
-</div>
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	class={classProp(klass, { visible: ctx.visible })}
+	data-hovercardtrigger=""
+	{...props}
+>
+	{@render children({ visible: ctx.visible })}
+</div>

package/dist/components/Menu/Menu.svelte

@@ -1,23 +1,23 @@
 <script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
 import { MenuContext } from "./context.svelte.js";
 export const { context, contextName } = setupContext();
-</script>
-
+</script>
+
 <script lang="ts">import { useActions, classProp } from "../../internal/index.js";
 import { setContext } from "svelte";
 let { children, use = [], class: klass, self = $bindable(), ...props } = $props();
 const ctx = new MenuContext();
 setContext(contextName, ctx);
-</script>
-
-<div
-	bind:this={self}
-	use:useActions={use}
-	id={ctx.uid()}
-	class={classProp(klass, { visible: ctx.visible })}
-	data-menu=""
-	data-state={ctx.visible ? 'opened' : 'closed'}
-	{...props}
->
-	{@render children({ visible: ctx.visible })}
-</div>
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	id={ctx.uid()}
+	class={classProp(klass, { visible: ctx.visible })}
+	data-menu=""
+	data-state={ctx.visible ? 'opened' : 'closed'}
+	{...props}
+>
+	{@render children({ visible: ctx.visible })}
+</div>

package/dist/components/Menu/MenuArrow.svelte

@@ -2,6 +2,6 @@
 import { FloatingArrow } from "../../internal/index.js";
 let { class: klass, use = [], self = $bindable(), ...props } = $props();
 const ctx = context();
-</script>
-
-<FloatingArrow {ctx} component="Menu" state={{ visible: ctx.visible }} class={klass} id={ctx.uid('arrow')} {...props} />
+</script>
+
+<FloatingArrow {ctx} component="Menu" state={{ visible: ctx.visible }} class={klass} id={ctx.uid('arrow')} {...props} />

package/dist/components/Menu/MenuContent.svelte

@@ -14,22 +14,22 @@ let {
 } = $props();
 const ctx = context();
 const state = $derived({ visible: ctx.visible });
-</script>
-
-<FloatingContent
-	{children}
-	componentName="Menu"
-	visible={ctx.visible}
-	{state}
-	{ctx}
-	{transition}
-	{use}
-	{sameWidth}
-	{constrainViewport}
-	{placement}
-	{portalTarget}
-	outsideCallback={() => ctx.close()}
-	role="listbox"
-	class={klass}
-	{...props}
-/>
+</script>
+
+<FloatingContent
+	{children}
+	componentName="Menu"
+	visible={ctx.visible}
+	{state}
+	{ctx}
+	{transition}
+	{use}
+	{sameWidth}
+	{constrainViewport}
+	{placement}
+	{portalTarget}
+	outsideCallback={() => ctx.close()}
+	role="listbox"
+	class={klass}
+	{...props}
+/>