lithesome 0.13.7 → 0.14.0

package/dist/components/Accordion/Accordion.svelte

@@ -1,33 +1,20 @@
-<script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
-import { AccordionContext } from "./context.svelte.js";
-export const { context, contextName } = setupContext();
-</script>
-
-<script lang="ts">import { useActions, classProp } from "../../internal/index.js";
-import { setContext } from "svelte";
+<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 = new AccordionContext({ single });
-const active = $derived(ctx.activeItems.length > 0);
-setContext(contextName, ctx);
-$effect(() => {
-  ctx.single = single;
+const ctx = createAccordionRootContext({
+  single: stateValue(() => single),
+  value: stateValue(() => value)
 });
 </script>
 
-<div
-	bind:this={self}
-	use:useActions={use}
-	id={ctx.uid()}
-	class={classProp(klass, { active })}
-	data-accordion=""
-	{...props}
->
-	{@render children({ active })}
+<div bind:this={self} use:useActions={use} class={classProp(klass)} {...ctx.attrs} {...props}>
+	{@render children({})}
 </div>

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

@@ -1,6 +1,4 @@
 import { SvelteComponent } from "svelte";
-import { AccordionContext } from './context.svelte.js';
-export declare const context: () => AccordionContext, contextName: string;
 import type { AccordionProps } from './types.js';
 declare const __propDef: {
     props: AccordionProps;

package/dist/components/Accordion/AccordionButton.svelte

@@ -1,31 +1,16 @@
-<script lang="ts">import { context } from "./Accordion.svelte";
+<script lang="ts">import { useAccordionButton } from "./main.svelte.js";
 import { useActions, classProp } from "../../internal/index.js";
-import { getContext } from "svelte";
-let { children, class: klass, use = [], self = $bindable(), onClick, ...props } = $props();
-const ctx = context();
-const itemId = getContext("accordionitem-id");
-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)
-    ctx.toggle(itemId);
-};
+let { children, class: klass, use = [], self = $bindable(), ...props } = $props();
+const ctx = useAccordionButton();
 </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}
+	class={classProp(klass, ctx.state)}
+	{...ctx.attrs}
 	{...props}
 >
-	{@render children({ active, disabled: item?.disabled || false })}
+	{@render children(ctx.state)}
 </button>

package/dist/components/Accordion/AccordionContent.svelte

@@ -1,27 +1,22 @@
-<script lang="ts">import { context } from "./Accordion.svelte";
+<script lang="ts">import { useAccordionContent } from "./main.svelte.js";
 import { useActions, getTransition, classProp } from "../../internal/index.js";
-import { getContext } from "svelte";
 let { children, class: klass, use = [], self = $bindable(), transition, ...props } = $props();
-const ctx = context();
-const itemId = getContext("accordionitem-id");
-const active = $derived(ctx.activeItems.includes(itemId));
+const ctx = useAccordionContent();
 const { inTransition, outTransition } = getTransition(transition);
 const attrs = $derived({
-  id: ctx.uid("content"),
-  "data-accordioncontent": "",
-  "data-active": active || void 0,
-  class: classProp(klass, { active })
+  ...ctx.attrs,
+  class: classProp(klass)
 });
 </script>
 
-{#if inTransition && outTransition && active}
+{#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({ active })}
+		{@render children({})}
 	</div>
-{:else if active}
+{:else if ctx.item.Active}
 	<div bind:this={self} use:useActions={use} {...attrs} {...props}>
-		{@render children({ active })}
+		{@render children({})}
 	</div>
 {/if}

package/dist/components/Accordion/AccordionHeading.svelte

@@ -1,15 +1,9 @@
-<script lang="ts">import { useActions, classProp } from "../../internal/index.js";
+<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>
 
-<div
-	bind:this={self}
-	use:useActions={use}
-	class={classProp(klass)}
-	role="heading"
-	aria-level={level}
-	data-accordionheading=""
-	{...props}
->
+<div bind:this={self} use:useActions={use} class={classProp(klass)} {...ctx.attrs} {...props}>
 	{@render children({})}
 </div>

package/dist/components/Accordion/AccordionItem.svelte

@@ -1,6 +1,5 @@
-<script lang="ts">import { context } from "./Accordion.svelte";
-import { log, useActions, createUID, classProp } from "../../internal/index.js";
-import { onMount, setContext } from "svelte";
+<script lang="ts">import { createAccordionItemContext } from "./main.svelte.js";
+import { useActions, classProp, stateValue } from "../../internal/index.js";
 let {
   children,
   class: klass,
@@ -9,32 +8,11 @@ let {
   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 (!ctx)
-    log.error("<AccordionItem /> must be a direct child of <Accordion />");
-  ctx.register({
-    id: uid(),
-    disabled
-  });
-});
-$effect(() => {
-  ctx.setDisabled(uid(), disabled);
+const ctx = createAccordionItemContext({
+  disabled: stateValue(() => 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 bind:this={self} use:useActions={use} {...ctx.attrs} class={classProp(klass, ctx.state)} {...props}>
+	{@render children(ctx.state)}
 </div>

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

@@ -0,0 +1,93 @@
+import { type StateValues } from '../../internal/index.js';
+interface Item {
+    id: string;
+    disabled: boolean;
+}
+type AccordionRootProps = StateValues<{
+    single: boolean;
+    value?: string;
+}>;
+declare class AccordionRoot {
+    uid: (component?: string) => string;
+    $value: AccordionRootProps['value'];
+    $single: AccordionRootProps['single'];
+    items: Item[];
+    activeItems: string[];
+    constructor(props: AccordionRootProps);
+    toggleActiveItem: (itemId: string) => void;
+    attrs: {
+        readonly id: string;
+        readonly 'data-accordion': "";
+    };
+}
+type AccordionItemProps = StateValues<{
+    disabled: boolean;
+}>;
+declare class AccordionItem {
+    uid: (component?: string) => string;
+    root: AccordionRoot;
+    $disabled: AccordionItemProps['disabled'];
+    Active: boolean;
+    constructor(root: AccordionRoot, props: AccordionItemProps);
+    attrs: {
+        readonly 'data-accordionitem': "";
+        readonly 'data-disabled': boolean;
+        readonly 'data-state': "opened" | "closed";
+    };
+    state: {
+        active: boolean;
+        disabled: boolean;
+    };
+}
+interface AccordionHeadingProps {
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+}
+declare class AccordionHeading {
+    level: 1 | 2 | 5 | 3 | 4 | 6;
+    root: AccordionRoot;
+    constructor(root: AccordionRoot, props: AccordionHeadingProps);
+    attrs: {
+        role: string;
+        'aria-level': 1 | 2 | 5 | 3 | 4 | 6;
+        'data-accordionheading': string;
+    };
+}
+declare class AccordionButton {
+    #private;
+    root: AccordionRoot;
+    item: AccordionItem;
+    constructor(item: AccordionItem, root: AccordionRoot);
+    attrs: {
+        readonly 'aria-expanded': boolean;
+        readonly 'aria-disabled': boolean;
+        readonly 'aria-controls': string | undefined;
+        readonly tabindex: 0 | -1;
+        readonly 'data-accordionbutton': "";
+        readonly 'data-active': true | undefined;
+        readonly onclick: () => void;
+    };
+    state: {
+        active: boolean;
+        disabled: boolean;
+    };
+}
+declare class AccordionContent {
+    item: AccordionItem;
+    root: AccordionRoot;
+    constructor(item: AccordionItem, root: AccordionRoot);
+    attrs: {
+        id: string;
+        'data-accordioncontent': string;
+        'data-active': boolean;
+    } | {
+        id?: undefined;
+        'data-accordioncontent'?: undefined;
+        'data-active'?: undefined;
+    };
+}
+export declare const createAccordionRootContext: (props: AccordionRootProps) => AccordionRoot;
+export declare const createAccordionItemContext: (props: AccordionItemProps) => AccordionItem;
+export declare const useAccordionHeading: (props: AccordionHeadingProps) => AccordionHeading;
+export declare const useAccordionButton: () => AccordionButton;
+export declare const useAccordionContent: () => AccordionContent;
+export {};

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

@@ -0,0 +1,126 @@
+import { buildContext, createUID } from '../../internal/index.js';
+class AccordionRoot {
+    uid = createUID('accordion').uid;
+    $value;
+    $single;
+    items = $state([]);
+    activeItems = $state([]);
+    constructor(props) {
+        this.$single = props.single;
+        this.$value = props.value;
+    }
+    toggleActiveItem = (itemId) => {
+        if (this.$single.val) {
+            this.activeItems = this.activeItems[0] === itemId ? [] : [itemId];
+        }
+        else {
+            if (this.activeItems.includes(itemId))
+                this.activeItems = this.activeItems.filter((el) => el !== itemId);
+            else
+                this.activeItems.push(itemId);
+        }
+    };
+    attrs = $derived.by(() => ({
+        id: this.uid(),
+        'data-accordion': ''
+    }));
+}
+class AccordionItem {
+    uid = createUID('item').uid;
+    root;
+    $disabled;
+    Active = $derived.by(() => this.root.activeItems.includes(this.uid()) || false);
+    constructor(root, props) {
+        this.root = root;
+        this.$disabled = props.disabled;
+    }
+    attrs = $derived.by(() => ({
+        'data-accordionitem': '',
+        'data-disabled': this.$disabled.val,
+        'data-state': this.Active ? 'opened' : 'closed'
+    }));
+    state = $derived.by(() => ({
+        active: this.Active,
+        disabled: this.$disabled.val
+    }));
+}
+class AccordionHeading {
+    level = $state(3);
+    root;
+    constructor(root, props) {
+        this.root = root;
+        this.level = props.level;
+    }
+    attrs = $derived.by(() => ({
+        role: 'heading',
+        'aria-level': this.level,
+        'data-accordionheading': ''
+    }));
+}
+//
+// Button
+//
+class AccordionButton {
+    root;
+    item;
+    constructor(item, root) {
+        this.root = root;
+        this.item = item;
+    }
+    #handleClick = () => {
+        if (this.item.$disabled.val)
+            return;
+        this.root.toggleActiveItem(this.item.uid());
+    };
+    attrs = $derived.by(() => ({
+        'aria-expanded': this.item.Active,
+        'aria-disabled': this.item.$disabled.val,
+        'aria-controls': this.item.Active ? this.root.uid('content') : undefined,
+        tabindex: this.item.$disabled.val ? -1 : 0,
+        'data-accordionbutton': '',
+        'data-active': this.item.Active || undefined,
+        onclick: this.#handleClick
+    }));
+    state = $derived.by(() => ({
+        active: this.item.Active,
+        disabled: this.item.$disabled.val
+    }));
+}
+//
+// Content
+//
+class AccordionContent {
+    item;
+    root;
+    constructor(item, root) {
+        this.item = item;
+        this.root = root;
+    }
+    attrs = $derived.by(() => this.item && this.root
+        ? {
+            id: this.root.uid('content'),
+            'data-accordioncontent': '',
+            'data-active': this.item.Active
+        }
+        : {});
+}
+//
+// Builders
+//
+const rootContext = buildContext(AccordionRoot);
+const itemContext = buildContext(AccordionItem);
+export const createAccordionRootContext = (props) => {
+    return rootContext.createContext(props);
+};
+export const createAccordionItemContext = (props) => {
+    return itemContext.createContext(rootContext.getContext(), props);
+};
+export const useAccordionHeading = (props) => {
+    return rootContext.register(AccordionHeading, props);
+};
+export const useAccordionButton = () => {
+    return itemContext.register(AccordionButton, rootContext.getContext());
+};
+export const useAccordionContent = () => {
+    return itemContext.register(AccordionContent, rootContext.getContext());
+};

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

@@ -1,17 +1,11 @@
-import type { Props, Handler, Transition } from '../../internal/index.js';
-interface AccordionState {
-    /** True if any item is opened. */
-    active: boolean;
-}
-export interface AccordionProps extends Props<HTMLDivElement, AccordionState> {
+import type { Props, Transition } from '../../internal/index.js';
+export interface AccordionProps extends Props<HTMLDivElement> {
+    /** The value of the active item. */
+    value?: string;
     /** Allow only a singluar `AccordionItem` to be opened at once. */
     single?: boolean;
 }
-interface AccordionContentState {
-    /** True if any item is opened. */
-    active: boolean;
-}
-export interface AccordionContentProps extends Props<HTMLDivElement, AccordionContentState> {
+export interface AccordionContentProps extends Props<HTMLDivElement> {
     /**
      * The `svelte/transtion` you wish to use.
      *
@@ -30,7 +24,6 @@ interface AccordionButtonState {
     disabled: boolean;
 }
 export interface AccordionButtonProps extends Props<HTMLButtonElement, AccordionButtonState> {
-    onClick?: Handler<MouseEvent, HTMLButtonElement>;
 }
 interface AccordionItemState {
     /** True if the item is opened. */

package/dist/components/Checkbox/Checkbox.svelte

@@ -12,8 +12,7 @@ let {
 } = $props();
 const handleClick = (e) => {
   onClick?.(e);
-  if (disabled)
-    return;
+  if (disabled) return;
   checked = checked === "mixed" ? true : !checked;
 };
 </script>

package/dist/components/Combobox/Combobox.svelte

@@ -1,56 +1,47 @@
-<script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
-import { ComboboxContext } from "./context.svelte.js";
-export const { context, contextName } = setupContext();
-</script>
-
-<script lang="ts" generics="ValueType">import { useActions, classProp } from "../../internal/index.js";
-import { setContext, onMount, tick } from "svelte";
+<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(),
+  touched = $bindable(false),
+  disabled = $bindable(false),
+  visible = $bindable(true),
   self = $bindable(),
   onChange,
   ...props
 } = $props();
 const multiple = Array.isArray(value);
-const ctx = new ComboboxContext(
-  { 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;
+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 });
     }
-  }
-);
-setContext(contextName, ctx);
-onMount(async () => {
-  await tick();
-  ctx.setInitialSelected(value);
-  ctx.close();
-  ctx.mounted = true;
+  ),
+  multiple: stateValue(() => multiple),
+  touched: stateValue(
+    () => touched,
+    (v) => touched = v
+  ),
+  visible: stateValue(
+    () => visible,
+    (v) => visible = v
+  )
 });
 </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 bind:this={self} use:useActions={use} class={classProp(klass, ctx.state)} {...ctx.attrs} {...props}>
+	{@render children(ctx.state)}
 </div>

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

@@ -1,17 +1,15 @@
 import { SvelteComponent } from "svelte";
-import { ComboboxContext } from './context.svelte.js';
-export declare const context: () => ComboboxContext<any>, contextName: string;
 import type { ComboboxProps } from './types.js';
-declare class __sveltets_Render<ValueType> {
-    props(): ComboboxProps<ValueType>;
-    events(): {} & {
+declare const __propDef: {
+    props: ComboboxProps;
+    events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots(): {};
+    slots: {};
+};
+type ComboboxProps_ = typeof __propDef.props;
+export { ComboboxProps_ as ComboboxProps };
+export type ComboboxEvents = typeof __propDef.events;
+export type ComboboxSlots = typeof __propDef.slots;
+export default class Combobox extends SvelteComponent<ComboboxProps_, ComboboxEvents, ComboboxSlots> {
 }
-export type ComboboxProps_<ValueType> = ReturnType<__sveltets_Render<ValueType>['props']>;
-export type ComboboxEvents<ValueType> = ReturnType<__sveltets_Render<ValueType>['events']>;
-export type ComboboxSlots<ValueType> = ReturnType<__sveltets_Render<ValueType>['slots']>;
-export default class Combobox<ValueType> extends SvelteComponent<ComboboxProps_<ValueType>, ComboboxEvents<ValueType>, ComboboxSlots<ValueType>> {
-}
-export {};

package/dist/components/Combobox/ComboboxArrow.svelte

@@ -1,14 +1,7 @@
-<script lang="ts">import { context } from "./Combobox.svelte";
-import { FloatingArrow } from "../../internal/index.js";
+<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 = context();
+const ctx = useComboboxArrow();
 </script>
 
-<FloatingArrow
-	{ctx}
-	component="Combobox"
-	state={{ visible: ctx.visible }}
-	class={klass}
-	id={ctx.uid('arrow')}
-	{...props}
-/>
+<FloatingArrow {ctx} component="Combobox" class={klass} {...props} />

package/dist/components/Combobox/ComboboxContent.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">import { context } from "./Combobox.svelte";
-import { classProp, FloatingContent } from "../../internal/index.js";
+<script lang="ts">import { FloatingContent } from "../../internal/index.js";
+import { useComboboxContent } from "./main.svelte.js";
 let {
   children,
   transition,
@@ -12,16 +12,13 @@ let {
   constrainViewport = false,
   ...props
 } = $props();
-const ctx = context();
-const state = $derived({ visible: ctx.visible });
+const ctx = useComboboxContent();
 </script>
 
 <FloatingContent
 	{children}
-	componentName="Select"
-	visible={ctx.visible}
-	bind:self
-	{state}
+	componentName="Combobox"
+	visible={ctx.root.$visible.val}
 	{ctx}
 	{transition}
 	{use}
@@ -29,9 +26,8 @@ const state = $derived({ visible: ctx.visible });
 	{constrainViewport}
 	{placement}
 	{portalTarget}
-	outsideCallback={() => ctx.close()}
+	outsideCallback={() => ctx.root.close()}
 	role="listbox"
-	class={classProp(klass, state)}
-	hidden={!ctx.mounted || undefined}
+	class={klass}
 	{...props}
 />