lithesome 0.14.1 → 0.14.2

package/dist/components/Accordion/Accordion.svelte

@@ -1,20 +1,24 @@
-<script lang="ts">import { useActions, classProp, stateValue } from "../../internal/index.js";
-import { createAccordionRootContext } from "./main.svelte.js";
-let {
-  children,
-  use = [],
-  class: klass,
-  value = $bindable(),
-  self = $bindable(),
-  single = $bindable(false),
-  ...props
-} = $props();
-const ctx = createAccordionRootContext({
-  single: stateValue(() => single),
-  value: stateValue(() => value)
-});
+<script lang="ts">
+	import { useActions, classProp, stateValue } from '../../internal/index.js';
+	import type { AccordionProps } from './types.js';
+	import { createAccordionRootContext } from './main.svelte.js';
+
+	let {
+		children,
+		use = [],
+		class: klass,
+		value = $bindable(),
+		self = $bindable(),
+		single = $bindable(false),
+		...props
+	}: AccordionProps = $props();
+
+	const ctx = createAccordionRootContext({
+		single: stateValue(() => single),
+		value: stateValue(() => value)
+	});
 </script>
 
 <div bind:this={self} use:useActions={use} class={classProp(klass)} {...ctx.attrs} {...props}>
-	{@render children({})}
+	{@render children?.({})}
 </div>

package/dist/components/Accordion/AccordionButton.svelte

@@ -1,9 +1,13 @@
-<script lang="ts">import { useAccordionButton } from "./main.svelte.js";
-import { useActions, classProp } from "../../internal/index.js";
-let { children, class: klass, use = [], self = $bindable(), onClick, ...props } = $props();
-const ctx = useAccordionButton({
-  onClick
-});
+<script lang="ts">
+	import { useAccordionButton } from './main.svelte.js';
+	import { useActions, classProp } from '../../internal/index.js';
+	import type { AccordionButtonProps } from './types.js';
+
+	let { children, class: klass, use = [], self = $bindable(), onClick, ...props }: AccordionButtonProps = $props();
+
+	const ctx = useAccordionButton({
+		onClick
+	});
 </script>
 
 <button
@@ -14,5 +18,5 @@ const ctx = useAccordionButton({
 	{...ctx.attrs}
 	{...props}
 >
-	{@render children(ctx.state)}
+	{@render children?.(ctx.state)}
 </button>

package/dist/components/Accordion/AccordionContent.svelte

@@ -1,22 +1,27 @@
-<script lang="ts">import { useAccordionContent } from "./main.svelte.js";
-import { useActions, getTransition, classProp } from "../../internal/index.js";
-let { children, class: klass, use = [], self = $bindable(), transition, ...props } = $props();
-const ctx = useAccordionContent();
-const { inTransition, outTransition } = getTransition(transition);
-const attrs = $derived({
-  ...ctx.attrs,
-  class: classProp(klass)
-});
+<script lang="ts">
+	import { useAccordionContent } from './main.svelte.js';
+	import { useActions, getTransition, classProp } from '../../internal/index.js';
+	import type { AccordionContentProps } from './types.js';
+
+	let { children, class: klass, use = [], self = $bindable(), transition, ...props }: AccordionContentProps = $props();
+
+	const ctx = useAccordionContent();
+
+	const { inTransition, outTransition } = getTransition(transition);
+	const attrs = $derived({
+		...ctx.attrs,
+		class: classProp(klass)
+	} as const);
 </script>
 
 {#if inTransition && outTransition && ctx.item.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({})}
+		{@render children?.({})}
 	</div>
 {:else if ctx.item.Active}
 	<div bind:this={self} use:useActions={use} {...attrs} {...props}>
-		{@render children({})}
+		{@render children?.({})}
 	</div>
 {/if}

package/dist/components/Accordion/AccordionHeading.svelte

@@ -1,9 +1,13 @@
-<script lang="ts">import { useAccordionHeading } from "./main.svelte.js";
-import { useActions, classProp } from "../../internal/index.js";
-let { children, class: klass, use = [], level = 3, self = $bindable(), ...props } = $props();
-const ctx = useAccordionHeading({ level });
+<script lang="ts">
+	import { useAccordionHeading } from './main.svelte.js';
+	import { useActions, classProp } from '../../internal/index.js';
+	import type { AccordionHeadingProps } from './types.js';
+
+	let { children, class: klass, use = [], level = 3, self = $bindable(), ...props }: AccordionHeadingProps = $props();
+
+	const ctx = useAccordionHeading({ level });
 </script>
 
 <div bind:this={self} use:useActions={use} class={classProp(klass)} {...ctx.attrs} {...props}>
-	{@render children({})}
+	{@render children?.({})}
 </div>

package/dist/components/Accordion/AccordionItem.svelte

@@ -1,18 +1,23 @@
-<script lang="ts">import { createAccordionItemContext } from "./main.svelte.js";
-import { useActions, classProp, stateValue } from "../../internal/index.js";
-let {
-  children,
-  class: klass,
-  use = [],
-  self = $bindable(),
-  disabled = $bindable(false),
-  ...props
-} = $props();
-const ctx = createAccordionItemContext({
-  disabled: stateValue(() => disabled)
-});
+<script lang="ts">
+	import { createAccordionItemContext } from './main.svelte.js';
+	import { useActions, classProp, stateValue } from '../../internal/index.js';
+
+	import type { AccordionItemProps } from './types.js';
+
+	let {
+		children,
+		class: klass,
+		use = [],
+		self = $bindable(),
+		disabled = $bindable(false),
+		...props
+	}: AccordionItemProps = $props();
+
+	const ctx = createAccordionItemContext({
+		disabled: stateValue(() => disabled)
+	});
 </script>
 
 <div bind:this={self} use:useActions={use} {...ctx.attrs} class={classProp(klass, ctx.state)} {...props}>
-	{@render children(ctx.state)}
+	{@render children?.(ctx.state)}
 </div>

package/dist/components/Checkbox/Checkbox.svelte

@@ -1,20 +1,25 @@
-<script lang="ts">import { useActions, classProp } from "../../internal/index.js";
-let {
-  children,
-  class: klass,
-  use = [],
-  self = $bindable(),
-  checked = $bindable(false),
-  required = false,
-  disabled = $bindable(false),
-  onClick,
-  ...props
-} = $props();
-const handleClick = (e) => {
-  if (disabled) return;
-  onClick?.(e);
-  checked = checked === "mixed" ? true : !checked;
-};
+<script lang="ts">
+	import { useActions, classProp } from '../../internal/index.js';
+	import type { CheckboxProps } from './types.js';
+
+	let {
+		children,
+		class: klass,
+		use = [],
+		self = $bindable(),
+		checked = $bindable(false),
+		required = false,
+		disabled = $bindable(false),
+		onClick,
+		...props
+	}: CheckboxProps = $props();
+
+	const handleClick: typeof onClick = (e) => {
+		if (disabled) return;
+		onClick?.(e);
+
+		checked = checked === 'mixed' ? true : !checked;
+	};
 </script>
 
 <button

package/dist/components/Checkbox/types.d.ts

@@ -1,10 +1,10 @@
-import type { Handler, PropsMaybeChildren } from '../../internal/index.js';
+import type { Handler, Props } from '../../internal/index.js';
 export type Checked = boolean | 'mixed';
 interface CheckboxState {
     /** If the checkbox is checked or not. */
     checked: Checked;
 }
-export interface CheckboxProps extends PropsMaybeChildren<HTMLButtonElement, CheckboxState> {
+export interface CheckboxProps extends Props<HTMLButtonElement, CheckboxState> {
     /** If the checkbox is checked or not. */
     checked?: Checked;
     /** Adds aria attributes. */

package/dist/components/Combobox/Combobox.svelte

@@ -1,47 +1,52 @@
-<script lang="ts">import { useActions, classProp, stateValue } from "../../internal/index.js";
-import { createRootContext } from "./main.svelte.js";
-let {
-  children,
-  use = [],
-  class: klass,
-  value = $bindable(),
-  label = $bindable(),
-  touched = $bindable(false),
-  disabled = $bindable(false),
-  visible = $bindable(true),
-  self = $bindable(),
-  onChange,
-  ...props
-} = $props();
-const multiple = Array.isArray(value);
-const ctx = createRootContext({
-  value: stateValue(
-    () => value,
-    (v) => {
-      value = v;
-      onChange?.({ value: v });
-    }
-  ),
-  disabled: stateValue(() => disabled),
-  label: stateValue(
-    () => label || self?.textContent?.trim() || "",
-    (v) => {
-      label = v;
-      onChange?.({ label: v });
-    }
-  ),
-  multiple: stateValue(() => multiple),
-  touched: stateValue(
-    () => touched,
-    (v) => touched = v
-  ),
-  visible: stateValue(
-    () => visible,
-    (v) => visible = v
-  )
-});
+<script lang="ts">
+	import { useActions, classProp, stateValue } from '../../internal/index.js';
+	import { createRootContext } from './main.svelte.js';
+	import type { ComboboxProps } from './types.js';
+
+	let {
+		children,
+		use = [],
+		class: klass,
+		value = $bindable(),
+		label = $bindable(),
+		touched = $bindable(false),
+		disabled = $bindable(false),
+		visible = $bindable(true),
+		controlled,
+		self = $bindable(),
+		onChange,
+		...props
+	}: ComboboxProps = $props();
+
+	const ctx = createRootContext({
+		value: stateValue(
+			() => value,
+			(v) => {
+				value = v;
+				onChange?.({ value: v });
+			}
+		),
+		disabled: stateValue(() => disabled),
+		label: stateValue(
+			() => label || self?.textContent?.trim() || '',
+			(v) => {
+				label = v;
+				onChange?.({ label: v });
+			}
+		),
+		multiple: stateValue(() => Array.isArray(value)),
+		touched: stateValue(
+			() => touched,
+			(v) => (touched = v)
+		),
+		visible: stateValue(
+			() => visible,
+			(v) => (visible = v)
+		),
+		controlled: stateValue(() => controlled)
+	});
 </script>
 
 <div bind:this={self} use:useActions={use} class={classProp(klass, ctx.state)} {...ctx.attrs} {...props}>
-	{@render children(ctx.state)}
+	{@render children?.(ctx.state)}
 </div>

package/dist/components/Combobox/ComboboxArrow.svelte

@@ -1,7 +1,11 @@
-<script lang="ts">import { FloatingArrow } from "../../internal/index.js";
-import { useComboboxArrow } from "./main.svelte.js";
-let { class: klass, use = [], self = $bindable(), ...props } = $props();
-const ctx = useComboboxArrow();
+<script lang="ts">
+	import { FloatingArrow } from '../../internal/index.js';
+	import { useComboboxArrow } from './main.svelte.js';
+	import type { ComboboxArrowProps } from './types.js';
+
+	let { class: klass, use = [], self = $bindable(), ...props }: ComboboxArrowProps = $props();
+
+	const ctx = useComboboxArrow();
 </script>
 
 <FloatingArrow {ctx} component="Combobox" class={klass} {...props} />

package/dist/components/Combobox/ComboboxContent.svelte

@@ -1,24 +1,28 @@
-<script lang="ts">import { FloatingContent } from "../../internal/index.js";
-import { useComboboxContent } from "./main.svelte.js";
-let {
-  children,
-  transition,
-  use = [],
-  portalTarget = "body",
-  sameWidth = false,
-  class: klass,
-  self = $bindable(),
-  placement = "bottom",
-  constrainViewport = false,
-  ...props
-} = $props();
-const ctx = useComboboxContent();
+<script lang="ts">
+	import { FloatingContent } from '../../internal/index.js';
+	import { useComboboxContent } from './main.svelte.js';
+	import type { ComboboxContentProps } from './types.js';
+
+	let {
+		children,
+		transition,
+		use = [],
+		portalTarget = 'body',
+		sameWidth = false,
+		class: klass,
+		self = $bindable(),
+		placement = 'bottom',
+		constrainViewport = false,
+		...props
+	}: ComboboxContentProps = $props();
+
+	const ctx = useComboboxContent();
 </script>
 
 <FloatingContent
 	{children}
 	componentName="Combobox"
-	visible={ctx.root.$visible.val}
+	visible={ctx.root.SuperVisible}
 	{ctx}
 	{transition}
 	{use}

package/dist/components/Combobox/ComboboxInput.svelte

@@ -1,18 +1,23 @@
-<script lang="ts">import { useActions, classProp } from "../../internal/index.js";
-import { useComboboxInput } from "./main.svelte.js";
-let {
-  class: klass,
-  use = [],
-  value = $bindable(),
-  self = $bindable(),
-  onClick,
-  onKeydown,
-  ...props
-} = $props();
-const ctx = useComboboxInput({ onClick, onKeydown });
-$effect(() => {
-  if (self) ctx.registerTrigger(self);
-});
+<script lang="ts">
+	import { useActions, classProp } from '../../internal/index.js';
+	import { useComboboxInput } from './main.svelte.js';
+	import type { ComboboxInputProps } from './types.js';
+
+	let {
+		class: klass,
+		use = [],
+		value = $bindable(),
+		self = $bindable(),
+		onClick,
+		onKeydown,
+		...props
+	}: ComboboxInputProps = $props();
+
+	const ctx = useComboboxInput({ onClick, onKeydown });
+
+	$effect(() => {
+		if (self) ctx.registerTrigger(self);
+	});
 </script>
 
 <input bind:this={self} use:useActions={use} class={classProp(klass, ctx.state)} bind:value {...ctx.attrs} {...props} />

package/dist/components/Combobox/ComboboxOption.svelte

@@ -1,29 +1,33 @@
-<script lang="ts">import { useActions, classProp, stateValue } from "../../internal/index.js";
-import { useComboboxOption } from "./main.svelte.js";
-let {
-  children,
-  class: klass,
-  use = [],
-  value,
-  label,
-  self = $bindable(),
-  disabled = $bindable(false),
-  onClick,
-  onMouseover,
-  ...props
-} = $props();
-let optionEl;
-const ctx = useComboboxOption(
-  {
-    disabled: stateValue(() => disabled),
-    value: stateValue(() => value),
-    label: stateValue(() => label || self?.textContent?.trim() || "")
-  },
-  {
-    onClick,
-    onMouseover
-  }
-);
+<script lang="ts">
+	import { useActions, classProp, stateValue } from '../../internal/index.js';
+	import { useComboboxOption } from './main.svelte.js';
+	import type { ComboboxElement, ComboboxOptionProps } from './types.js';
+
+	let {
+		children,
+		class: klass,
+		use = [],
+		value,
+		label,
+		self = $bindable(),
+		disabled = $bindable(false),
+		onClick,
+		onMouseover,
+		...props
+	}: ComboboxOptionProps = $props();
+	let optionEl: ComboboxElement;
+
+	const ctx = useComboboxOption(
+		{
+			disabled: stateValue(() => disabled),
+			value: stateValue(() => value),
+			label: stateValue(() => label || self?.textContent?.trim() || '')
+		},
+		{
+			onClick,
+			onMouseover
+		}
+	);
 </script>
 
 <button
@@ -34,5 +38,5 @@ const ctx = useComboboxOption(
 	{...ctx.attrs}
 	{...props}
 >
-	{@render children(ctx.state)}
+	{@render children?.(ctx.state)}
 </button>

package/dist/components/Combobox/main.svelte.d.ts

@@ -7,6 +7,7 @@ type ComboboxRootProps = StateValues<{
     label: string;
     multiple: boolean;
     disabled: boolean;
+    controlled: boolean | undefined;
 }>;
 declare class ComboboxRoot extends Floating {
     uid: (component?: string) => string;
@@ -16,11 +17,13 @@ declare class ComboboxRoot extends Floating {
     $label: ComboboxRootProps['label'];
     $multiple: ComboboxRootProps['multiple'];
     $disabled: ComboboxRootProps['disabled'];
+    $controlled: ComboboxRootProps['controlled'];
     options: HTMLElement[];
     selectedOptions: HTMLElement[];
     mounted: boolean;
     hoveredIndex: number;
     HoveredOption: HTMLElement | undefined;
+    SuperVisible: boolean;
     constructor(props: ComboboxRootProps);
     open: () => void;
     close: () => void;

package/dist/components/Combobox/main.svelte.js

@@ -8,11 +8,13 @@ class ComboboxRoot extends Floating {
     $label;
     $multiple;
     $disabled;
+    $controlled;
     options = $state([]);
     selectedOptions = $state([]);
     mounted = $state(false);
     hoveredIndex = $state(-1);
     HoveredOption = $derived.by(() => this.options[this.hoveredIndex]);
+    SuperVisible = $derived.by(() => typeof this.$controlled.val === 'boolean' ? this.$controlled.val && this.$visible.val : this.$visible.val);
     constructor(props) {
         super();
         this.$visible = props.visible;
@@ -21,19 +23,20 @@ class ComboboxRoot extends Floating {
         this.$label = props.label;
         this.$multiple = props.multiple;
         this.$disabled = props.disabled;
+        this.$controlled = props.controlled;
         onMount(async () => {
             await tick();
             this.setInitialSelected(this.$value.val);
         });
         $effect(() => {
-            disableScroll(this.$visible.val && !document.body.style.overflow);
+            disableScroll(this.SuperVisible && !document.body.style.overflow);
         });
         $effect(() => {
-            if (!this.$visible.val || !this.options || this.hoveredIndex > this.options.length - 1)
+            if (!this.SuperVisible || !this.options || this.hoveredIndex > this.options.length - 1)
                 this.hoveredIndex = -1;
         });
         $effect(() => {
-            if (this.$visible.val) {
+            if (this.SuperVisible) {
                 tick().then(() => {
                     const index = this.options.findIndex((option) => option.ariaSelected === 'true');
                     this.hoveredIndex = index ?? 0;
@@ -104,10 +107,10 @@ class ComboboxRoot extends Floating {
     attrs = $derived.by(() => ({
         id: this.uid(),
         'data-combobox': '',
-        'data-state': this.$visible.val && this.mounted ? 'opened' : 'closed'
+        'data-state': this.SuperVisible && this.mounted ? 'opened' : 'closed'
     }));
     state = $derived.by(() => ({
-        visible: this.$visible.val && this.mounted
+        visible: this.SuperVisible && this.mounted
     }));
 }
 //
@@ -136,12 +139,12 @@ class ComboboxInput {
         const { key } = e;
         if (!PREVENT_KEYS.includes(key)) {
             this.root.$touched.val = true;
-            if (!this.root.$visible.val)
+            if (!this.root.SuperVisible)
                 this.root.open();
         }
         if (key === KEYS.arrowUp || key === KEYS.arrowDown || key === KEYS.end || key === KEYS.home) {
             e.preventDefault();
-            if (!this.root.$visible.val)
+            if (!this.root.SuperVisible)
                 this.root.open();
         }
         if (key === KEYS.home)
@@ -156,7 +159,7 @@ class ComboboxInput {
             this.root.close();
         if (key === KEYS.enter) {
             e.preventDefault();
-            if (this.root.HoveredOption && this.root.$visible.val) {
+            if (this.root.HoveredOption && this.root.SuperVisible) {
                 this.root.HoveredOption.click();
                 if (!this.root.$multiple.val)
                     this.root.close();
@@ -174,15 +177,15 @@ class ComboboxInput {
         role: 'combobox',
         'aria-autocomplete': 'list',
         'aria-haspopup': 'listbox',
-        'aria-controls': this.root.$visible.val ? this.root.uid('content') : undefined,
-        'aria-expanded': this.root.$visible.val,
+        'aria-controls': this.root.SuperVisible ? this.root.uid('content') : undefined,
+        'aria-expanded': this.root.SuperVisible,
         'aria-activedescendant': this.root.HoveredOption?.id || undefined,
         autocomplete: 'off',
         onclick: this.#handleCick,
         onkeydown: this.#handleKeydown
     }));
     state = $derived.by(() => ({
-        visible: this.root.$visible.val
+        visible: this.root.SuperVisible
     }));
 }
 //
@@ -209,7 +212,7 @@ class ComboboxContent {
         hidden: !this.root.mounted || undefined
     }));
     state = $derived.by(() => ({
-        visible: this.root.$visible.val
+        visible: this.root.SuperVisible
     }));
 }
 class ComboboxOption {
@@ -230,7 +233,7 @@ class ComboboxOption {
         onMount(() => {
             this.root.queryElements();
             return async () => {
-                if (!this.root.$visible.val)
+                if (!this.root.SuperVisible)
                     return;
                 await tick();
                 this.root.queryElements();

package/dist/components/Combobox/types.d.ts

@@ -15,6 +15,8 @@ export interface ComboboxProps extends Props<HTMLDivElement, ComboboxState> {
     visible?: boolean;
     /** If the user has modified the selected value in anyway. */
     touched?: boolean;
+    /** Allows for the combobox content to be visible only when this condition is met. */
+    controlled?: boolean;
     onChange?: (payload?: {
         value?: JsonValue;
         label?: string;