lithesome 0.3.1 → 0.3.2

package/dist/components/Accordion/Accordion.svelte

@@ -4,15 +4,24 @@ const contextName = "accordion-context";
 export const context = () => getContext(contextName);
 </script>
 
-<script>import { createUID, useActions, classProp } from "../../internal/index.js";
+<script>import { useActions, classProp } from "../../internal/index.js";
 import { setContext } from "svelte";
-let { children, use = [], class: klass, self = $bindable(), single, ...props } = $props();
-const { uid } = createUID("accordion");
-const API = createContext(uid, single);
-const active = $derived(API.activeItems.length > 0);
-setContext(contextName, API);
+let { children, use = [], class: klass, self = $bindable(), single = $bindable(false), ...props } = $props();
+const ctx = createContext({ single });
+const active = $derived(ctx.activeItems.length > 0);
+setContext(contextName, ctx);
+$effect(() => {
+  ctx.setSingle(single);
+});
 </script>
 
-<div bind:this={self} use:useActions={use} id={uid()} class={classProp(klass, { active })} data-accordion="" {...props}>
+<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/Accordion.svelte.d.ts

@@ -1,11 +1,12 @@
 import { SvelteComponent } from "svelte";
 export declare const context: () => {
-    items: import("./context.svelte.js").Item[];
-    activeItems: string[];
+    uid: (component?: string | undefined) => string;
     toggle(itemId: string): void;
     register(item: import("./context.svelte.js").Item): void;
     setDisabled(id: string, val: boolean): void;
-    uid: import("../../internal/index.js").UID;
+    setSingle(val: boolean): void;
+    readonly items: import("./context.svelte.js").Item[];
+    readonly activeItems: string[];
 };
 import { type BaseProps } from '../../internal/index.js';
 declare const __propDef: {

package/dist/components/Accordion/AccordionButton.svelte

@@ -2,14 +2,14 @@
 import { useActions, classProp } from "../../internal/index.js";
 import { getContext } from "svelte";
 let { children, class: klass, use = [], self = $bindable(), onClick, ...props } = $props();
-const API = context();
+const ctx = context();
 const itemId = getContext("accordionitem-id");
-const active = $derived(API.activeItems.includes(itemId));
-const item = $derived(API.items.find((el) => el.id === itemId));
+const active = $derived(ctx.activeItems.includes(itemId));
+const item = $derived(ctx.items.find((el) => el.id === itemId));
 const handleClick = (e) => {
   onClick?.(e);
   if (!item?.disabled)
-    API.toggle(itemId);
+    ctx.toggle(itemId);
 };
 </script>
 
@@ -20,7 +20,7 @@ const handleClick = (e) => {
 	class={classProp(klass, { active, disabled: item?.disabled || false })}
 	aria-expanded={active}
 	aria-disabled={item?.disabled}
-	aria-controls={active ? API.uid('content') : undefined}
+	aria-controls={active ? ctx.uid('content') : undefined}
 	tabindex={item?.disabled ? -1 : 0}
 	data-accordionbutton=""
 	data-active={active || undefined}

package/dist/components/Accordion/AccordionContent.svelte

@@ -2,12 +2,12 @@
 import { useActions, getTransition, classProp } from "../../internal/index.js";
 import { getContext } from "svelte";
 let { children, class: klass, use = [], self = $bindable(), transition, ...props } = $props();
-const API = context();
+const ctx = context();
 const itemId = getContext("accordionitem-id");
-const active = $derived(API.activeItems.includes(itemId));
+const active = $derived(ctx.activeItems.includes(itemId));
 const _transition = getTransition(transition);
 const attrs = $derived({
-  id: API.uid("content"),
+  id: ctx.uid("content"),
   "data-accordioncontent": "",
   "data-active": active || void 0,
   class: classProp(klass, { active })

package/dist/components/Accordion/AccordionItem.svelte

@@ -1,21 +1,21 @@
 <script>import { context } from "./Accordion.svelte";
 import { log, useActions, createUID, classProp } from "../../internal/index.js";
 import { onMount, setContext } from "svelte";
-let { children, class: klass, use = [], self = $bindable(), disabled = false, ...props } = $props();
-const API = context();
+let { children, class: klass, use = [], self = $bindable(), disabled = $bindable(false), ...props } = $props();
+const ctx = context();
 const { uid } = createUID("item");
+const active = $derived(ctx.activeItems.includes(uid()));
+setContext("accordionitem-id", uid());
 onMount(() => {
-  if (!API)
+  if (!ctx)
     log.error("<AccordionItem /> must be a direct child of <Accordion />");
-  API.register({
+  ctx.register({
     id: uid(),
     disabled
   });
 });
-const active = $derived(API.activeItems.includes(uid()));
-setContext("accordionitem-id", uid());
 $effect(() => {
-  API.setDisabled(uid(), disabled);
+  ctx.setDisabled(uid(), disabled);
 });
 </script>
 
@@ -23,11 +23,11 @@ $effect(() => {
 	bind:this={self}
 	use:useActions={use}
 	id={uid()}
-	class={classProp(klass, { active })}
+	class={classProp(klass, { active, disabled })}
 	data-accordionitem=""
 	data-disabled={disabled || undefined}
 	data-state={active ? 'opened' : 'closed'}
 	{...props}
 >
-	{@render children({ active })}
+	{@render children({ active, disabled })}
 </div>

package/dist/components/Accordion/AccordionItem.svelte.d.ts

@@ -3,6 +3,7 @@ import { type BaseProps } from '../../internal/index.js';
 declare const __propDef: {
     props: BaseProps<HTMLDivElement, {
         active: boolean;
+        disabled: boolean;
     }> & {
         disabled?: boolean | undefined;
     };

package/dist/components/Accordion/context.svelte.d.ts

@@ -1,13 +1,17 @@
-import { type UID } from '../../internal/index.js';
 export interface Item {
     id: string;
     disabled: boolean;
 }
-export declare const createContext: (uid: UID, single?: boolean) => {
-    items: Item[];
-    activeItems: string[];
+interface InitialValues {
+    single?: boolean;
+}
+export declare const createContext: (init: InitialValues) => {
+    uid: (component?: string | undefined) => string;
     toggle(itemId: string): void;
     register(item: Item): void;
     setDisabled(id: string, val: boolean): void;
-    uid: UID;
+    setSingle(val: boolean): void;
+    readonly items: Item[];
+    readonly activeItems: string[];
 };
+export {};

package/dist/components/Accordion/context.svelte.js

@@ -1,8 +1,11 @@
-import {} from '../../internal/index.js';
-export const createContext = (uid, single = false) => {
+import { createUID } from '../../internal/index.js';
+export const createContext = (init) => {
+    const { uid } = createUID('accordion');
     let items = $state([]);
     let activeItems = $state([]);
-    const functions = {
+    let single = $state(init.single || false);
+    return {
+        uid,
         toggle(itemId) {
             if (single) {
                 if (activeItems[0] === itemId)
@@ -23,11 +26,10 @@ export const createContext = (uid, single = false) => {
         setDisabled(id, val) {
             const index = items.findIndex((el) => el.id === id);
             items[index].disabled = val;
-        }
-    };
-    return {
-        uid,
-        ...functions,
+        },
+        setSingle(val) {
+            single = val;
+        },
         get items() {
             return items;
         },

package/dist/components/Combobox/Combobox.svelte

@@ -4,7 +4,7 @@ const contextName = "combobox-context";
 export const context = () => getContext(contextName);
 </script>
 
-<script generics="ValueType">import { createUID, useActions, classProp } from "../../internal/index.js";
+<script generics="ValueType">import { useActions, classProp } from "../../internal/index.js";
 import { setContext } from "svelte";
 let {
   children,
@@ -17,39 +17,41 @@ let {
   onChange,
   ...props
 } = $props();
-const { uid } = createUID("combobox");
 const multiple = Array.isArray(value);
-const API = createContext(uid, multiple, {
-  onChange({ newValue, newTouched, newLabel }) {
-    if (newValue) {
-      value = newValue;
-      onChange?.({ value: newValue });
+const ctx = createContext(
+  { multiple },
+  {
+    onChange({ newValue, newTouched, newLabel }) {
+      if (newValue) {
+        value = newValue;
+        onChange?.({ value: newValue });
+      }
+      if (newLabel && !multiple) {
+        label = newLabel;
+        onChange?.({ label: newLabel });
+      }
+      if (typeof newTouched === "boolean")
+        touched = newTouched;
     }
-    if (newLabel && !multiple) {
-      label = newLabel;
-      onChange?.({ label: newLabel });
-    }
-    if (typeof newTouched === "boolean")
-      touched = newTouched;
   }
-});
-setContext(contextName, API);
+);
+setContext(contextName, ctx);
 onMount(async () => {
   await tick();
-  API.setInitialSelected(value);
-  API.close();
-  API.setMounted(true);
+  ctx.setInitialSelected(value);
+  ctx.close();
+  ctx.setMounted(true);
 });
 </script>
 
 <div
 	bind:this={self}
 	use:useActions={use}
-	id={uid()}
-	class={classProp(klass, { visible: API.visible && API.mounted })}
+	id={ctx.uid()}
+	class={classProp(klass, { visible: ctx.visible && ctx.mounted })}
 	data-select=""
-	data-state={API.visible && API.mounted ? 'opened' : 'closed'}
+	data-state={ctx.visible && ctx.mounted ? 'opened' : 'closed'}
 	{...props}
 >
-	{@render children({ visible: API.visible && API.mounted })}
+	{@render children({ visible: ctx.visible && ctx.mounted })}
 </div>

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

@@ -1,15 +1,6 @@
 import { SvelteComponent } from "svelte";
 export declare const context: () => {
-    visible: boolean;
-    hoveredIndex: number;
-    options: HTMLElement[];
-    touched: HTMLElement[];
-    dropdown: HTMLElement | null;
-    mounted: boolean;
-    selectedOptions: HTMLElement[];
-    hoveredOption: HTMLElement;
-    trigger: HTMLInputElement | null;
-    multiple: boolean;
+    uid: (component?: string | undefined) => string;
     open(): void;
     close(): void;
     toggle(): void;
@@ -22,7 +13,16 @@ export declare const context: () => {
     setDropdown(node: HTMLElement): void;
     setMounted(value: boolean): void;
     setTouched(value: boolean): void;
-    uid: import("../../internal/index.js").UID;
+    readonly visible: boolean;
+    readonly hoveredIndex: number;
+    readonly options: HTMLElement[];
+    readonly touched: HTMLElement[];
+    readonly dropdown: HTMLElement | null;
+    readonly mounted: boolean;
+    readonly selectedOptions: HTMLElement[];
+    readonly hoveredOption: HTMLElement;
+    readonly trigger: HTMLInputElement | null;
+    multiple: boolean | undefined;
 };
 import { type BaseProps } from '../../internal/index.js';
 declare class __sveltets_Render<ValueType> {

package/dist/components/Combobox/ComboboxDropdown.svelte

@@ -21,28 +21,28 @@ let {
   constrainViewport = false,
   ...props
 } = $props();
-const API = context();
+const ctx = context();
 let dropdownCleanup = $state(void 0);
 const _transition = getTransition(transition);
 const attrs = $derived({
-  id: API.uid("dropdown"),
-  "aria-labelledby": API.uid("trigger"),
+  id: ctx.uid("dropdown"),
+  "aria-labelledby": ctx.uid("trigger"),
   role: "listbox",
-  class: classProp(klass, { visible: API.visible }),
+  class: classProp(klass, { visible: ctx.visible }),
   "data-comboboxdropdown": "",
-  hidden: !API.mounted || void 0
+  hidden: !ctx.mounted || void 0
 });
 onMount(() => {
-  if (!API)
+  if (!ctx)
     log.error("<ComboboxDropdown> Must be a direct child of <Combobox />");
 });
 $effect(() => {
-  if (API.visible && self)
-    API.setDropdown(self);
+  if (ctx.visible && self)
+    ctx.setDropdown(self);
 });
 $effect(() => {
-  if (API.visible && API.trigger && API.dropdown) {
-    dropdownCleanup = anchorElement(API.trigger, API.dropdown, {
+  if (ctx.visible && ctx.trigger && ctx.dropdown) {
+    dropdownCleanup = anchorElement(ctx.trigger, ctx.dropdown, {
       placement,
       constrainViewport,
       sameWidth
@@ -55,10 +55,10 @@ $effect(() => {
 </script>
 
 {#if _transition}
-	{#if API.visible}
+	{#if ctx.visible}
 		<div
 			bind:this={self}
-			use:clickOutside={{ exclude: [API.trigger], callback: API.close }}
+			use:clickOutside={{ exclude: [ctx.trigger], callback: ctx.close }}
 			use:portal={portalTarget}
 			use:useActions={use}
 			in:_transition.in.fn={_transition.in.params}
@@ -66,18 +66,18 @@ $effect(() => {
 			{...attrs}
 			{...props}
 		>
-			{@render children({ visible: API.visible })}
+			{@render children({ visible: ctx.visible })}
 		</div>
 	{/if}
-{:else if API.visible}
+{:else if ctx.visible}
 	<div
 		bind:this={self}
-		use:clickOutside={{ exclude: [API.trigger], callback: API.close }}
+		use:clickOutside={{ exclude: [ctx.trigger], callback: ctx.close }}
 		use:portal={portalTarget}
 		use:useActions={use}
 		{...attrs}
 		{...props}
 	>
-		{@render children({ visible: API.visible })}
+		{@render children({ visible: ctx.visible })}
 	</div>
 {/if}

package/dist/components/Combobox/ComboboxInput.svelte

@@ -11,23 +11,23 @@ let {
   use = [],
   value = $bindable(),
   self = $bindable(),
-  disabled,
+  disabled = $bindable(false),
   onClick,
   onFocus,
   onKeydown,
   ...props
 } = $props();
-const API = context();
+const ctx = context();
 onMount(() => {
-  if (!API || !self)
+  if (!ctx || !self)
     return;
-  API.setTrigger(self);
+  ctx.setTrigger(self);
 });
 const handleClick = (e) => {
   onClick?.(e);
   if (disabled)
     return;
-  API.toggle();
+  ctx.toggle();
 };
 const handleKeydown = (e) => {
   onKeydown?.(e);
@@ -35,37 +35,37 @@ const handleKeydown = (e) => {
     return;
   const { key } = e;
   if (!PREVENT_KEYS.includes(key)) {
-    API.setTouched(true);
-    if (!API.visible)
-      API.open();
+    ctx.setTouched(true);
+    if (!ctx.visible)
+      ctx.open();
   }
   if (key === KEYS.arrowUp || key === KEYS.arrowDown || key === KEYS.end || key === KEYS.home) {
     e.preventDefault();
-    if (!API.visible)
-      API.open();
+    if (!ctx.visible)
+      ctx.open();
   }
   if (key === KEYS.home)
-    API.navigateOptions("first");
+    ctx.navigateOptions("first");
   if (key === KEYS.end)
-    API.navigateOptions("last");
+    ctx.navigateOptions("last");
   if (key === KEYS.arrowUp)
-    API.navigateOptions("prev");
+    ctx.navigateOptions("prev");
   if (key === KEYS.arrowDown)
-    API.navigateOptions("next");
+    ctx.navigateOptions("next");
   if (key === KEYS.escape)
-    API.close();
+    ctx.close();
   if (key === KEYS.enter) {
     e.preventDefault();
-    if (API.hoveredOption && API.visible) {
-      document.querySelector(`#${API.hoveredOption.id}`).click();
-      if (!API.multiple)
-        API.close();
+    if (ctx.hoveredOption && ctx.visible) {
+      document.querySelector(`#${ctx.hoveredOption.id}`).click();
+      if (!ctx.multiple)
+        ctx.close();
     } else {
-      API.open();
+      ctx.open();
     }
   }
   if (key === "Tab")
-    API.close();
+    ctx.close();
 };
 </script>
 
@@ -73,8 +73,8 @@ const handleKeydown = (e) => {
 	type="text"
 	bind:this={self}
 	use:useActions={use}
-	id={API.uid('input')}
-	class={classProp(klass, { visible: API.visible })}
+	id={ctx.uid('input')}
+	class={classProp(klass, { visible: ctx.visible })}
 	onclick={handleClick}
 	onkeydown={handleKeydown}
 	bind:value

package/dist/components/Combobox/ComboboxOption.svelte

@@ -13,22 +13,22 @@ let {
   value,
   label: labelProp,
   self = $bindable(),
-  disabled,
+  disabled = $bindable(false),
   onClick,
   onFocus,
   onMouseenter,
   ...props
 } = $props();
 let optionEl;
-const API = context();
+const ctx = context();
 const { uid } = createUID("item");
-const hovered = $derived(API.hoveredOption?.id === uid());
-const selected = $derived(!!API.selectedOptions.find((el) => el.dataset.value === value));
+const hovered = $derived(ctx.hoveredOption?.id === uid());
+const selected = $derived(!!ctx.selectedOptions.find((el) => el.dataset.value === value));
 const label = $derived(labelProp || isBrowser && self ? self?.textContent?.trim() : "");
 const handleClick = (e) => {
   onClick?.(e);
   if (!disabled) {
-    API.setSelectedOptions();
+    ctx.setSelectedOptions();
   }
 };
 const handleFocus = (e) => {
@@ -37,15 +37,15 @@ const handleFocus = (e) => {
 const handleMouseover = (e) => {
   onMouseenter?.(e);
   if (!disabled)
-    API.setHoveredOption(uid());
+    ctx.setHoveredOption(uid());
 };
 onMount(() => {
-  API.queryElements();
+  ctx.queryElements();
   return async () => {
-    if (!API.visible)
+    if (!ctx.visible)
       return;
     await tick();
-    API.queryElements();
+    ctx.queryElements();
   };
 });
 </script>

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

@@ -1,28 +1,22 @@
-import { type CalcIndexAction, type UID, type JsonValue } from '../../internal/index.js';
+import { type CalcIndexAction, type JsonValue } from '../../internal/index.js';
 export interface Option {
     value: JsonValue;
     label: string;
     id: string;
     disabled?: boolean;
 }
+interface InitialValues {
+    multiple?: boolean;
+}
 interface Hooks<ValueType> {
-    onChange: (values: {
+    onChange?: (values: {
         newValue?: ValueType;
         newTouched?: boolean;
         newLabel?: string;
     }) => void;
 }
-export declare const createContext: <ValueType>(uid: UID, multiple: boolean | undefined, hooks: Hooks<ValueType>) => {
-    visible: boolean;
-    hoveredIndex: number;
-    options: HTMLElement[];
-    touched: HTMLElement[];
-    dropdown: HTMLElement | null;
-    mounted: boolean;
-    selectedOptions: HTMLElement[];
-    hoveredOption: HTMLElement;
-    trigger: HTMLInputElement | null;
-    multiple: boolean;
+export declare const createContext: <ValueType>({ multiple }: InitialValues, hooks?: Hooks<ValueType>) => {
+    uid: (component?: string | undefined) => string;
     open(): void;
     close(): void;
     toggle(): void;
@@ -35,6 +29,15 @@ export declare const createContext: <ValueType>(uid: UID, multiple: boolean | un
     setDropdown(node: HTMLElement): void;
     setMounted(value: boolean): void;
     setTouched(value: boolean): void;
-    uid: UID;
+    readonly visible: boolean;
+    readonly hoveredIndex: number;
+    readonly options: HTMLElement[];
+    readonly touched: HTMLElement[];
+    readonly dropdown: HTMLElement | null;
+    readonly mounted: boolean;
+    readonly selectedOptions: HTMLElement[];
+    readonly hoveredOption: HTMLElement;
+    readonly trigger: HTMLInputElement | null;
+    multiple: boolean | undefined;
 };
 export {};

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

@@ -1,6 +1,7 @@
-import { calculateIndex, disableScroll, removeDisabledElements } from '../../internal/index.js';
+import { calculateIndex, disableScroll, removeDisabledElements, createUID } from '../../internal/index.js';
 import { tick } from 'svelte';
-export const createContext = (uid, multiple = false, hooks) => {
+export const createContext = ({ multiple }, hooks) => {
+    const { uid } = createUID('combobox');
     let visible = $state(true);
     let hoveredIndex = $state(-1);
     let options = $state([]);
@@ -32,9 +33,10 @@ export const createContext = (uid, multiple = false, hooks) => {
     $effect(() => {
         if (!visible)
             return;
-        hooks.onChange({ newTouched: touched });
+        hooks?.onChange?.({ newTouched: touched });
     });
-    const functions = {
+    return {
+        uid,
         open() {
             visible = true;
         },
@@ -74,11 +76,11 @@ export const createContext = (uid, multiple = false, hooks) => {
                 selectedOptions[0] = hoveredOption;
             }
             if (!multiple) {
-                functions.close();
+                visible = false;
             }
             const value = multiple ? selectedOptions.map((el) => el.dataset.value) : selectedOptions[0].dataset.value;
             const label = multiple ? '' : selectedOptions[0].dataset.label || '';
-            hooks.onChange({ newValue: value, newLabel: label });
+            hooks?.onChange?.({ newValue: value, newLabel: label });
         },
         async setInitialSelected(value) {
             selectedOptions = options.filter((el) => {
@@ -99,11 +101,7 @@ export const createContext = (uid, multiple = false, hooks) => {
         },
         setTouched(value) {
             touched = value;
-        }
-    };
-    return {
-        uid,
-        ...functions,
+        },
         get visible() {
             return visible;
         },

package/dist/components/Menu/Menu.svelte

@@ -4,22 +4,21 @@ const contextName = "menu-context";
 export const context = () => getContext(contextName);
 </script>
 
-<script>import { createUID, useActions, classProp } from "../../internal/index.js";
+<script>import { useActions, classProp } from "../../internal/index.js";
 import { setContext } from "svelte";
 let { children, use = [], class: klass, self = $bindable(), ...props } = $props();
-const { uid } = createUID("menu");
-const API = createContext(uid);
-setContext(contextName, API);
+const ctx = createContext();
+setContext(contextName, ctx);
 </script>
 
 <div
 	bind:this={self}
 	use:useActions={use}
-	id={uid()}
-	class={classProp(klass, { visible: API.visible })}
+	id={ctx.uid()}
+	class={classProp(klass, { visible: ctx.visible })}
 	data-menu=""
-	data-state={API.visible ? 'opened' : 'closed'}
+	data-state={ctx.visible ? 'opened' : 'closed'}
 	{...props}
 >
-	{@render children({ visible: API.visible })}
+	{@render children({ visible: ctx.visible })}
 </div>