lithesome 0.5.0 → 0.6.1

package/dist/components/Accordion/Accordion.svelte

@@ -1,10 +1,9 @@
-<script context="module">import { getContext } from "svelte";
+<script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
 import { AccordionContext } from "./context.svelte.js";
-const contextName = "accordion-context";
-export const context = () => getContext(contextName);
+export const { context, contextName } = setupContext("accordion");
 </script>
 
-<script>import { useActions, classProp } from "../../internal/index.js";
+<script lang="ts">import { useActions, classProp } from "../../internal/index.js";
 import { setContext } from "svelte";
 let { children, use = [], class: klass, self = $bindable(), single = $bindable(false), ...props } = $props();
 const ctx = new AccordionContext({ single });

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

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

package/dist/components/Accordion/AccordionButton.svelte

@@ -1,4 +1,4 @@
-<script>import { context } from "./Accordion.svelte";
+<script lang="ts">import { context } from "./Accordion.svelte";
 import { useActions, classProp } from "../../internal/index.js";
 import { getContext } from "svelte";
 let { children, class: klass, use = [], self = $bindable(), onClick, ...props } = $props();

package/dist/components/Accordion/AccordionContent.svelte

@@ -1,4 +1,4 @@
-<script>import { context } from "./Accordion.svelte";
+<script lang="ts">import { context } from "./Accordion.svelte";
 import { useActions, getTransition, classProp } from "../../internal/index.js";
 import { getContext } from "svelte";
 let { children, class: klass, use = [], self = $bindable(), transition, ...props } = $props();

package/dist/components/Accordion/AccordionHeading.svelte

@@ -1,4 +1,4 @@
-<script>import { useActions, classProp } from "../../internal/index.js";
+<script lang="ts">import { useActions, classProp } from "../../internal/index.js";
 let { children, class: klass, use = [], level = 3, self = $bindable(), ...props } = $props();
 </script>
 

package/dist/components/Accordion/AccordionItem.svelte

@@ -1,4 +1,4 @@
-<script>import { context } from "./Accordion.svelte";
+<script lang="ts">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 = $bindable(false), ...props } = $props();

package/dist/components/Checkbox/Checkbox.svelte

@@ -1,6 +1,6 @@
-<script context="module"></script>
+<script lang="ts" context="module"></script>
 
-<script>import {
+<script lang="ts">import {
   useActions,
   classProp
 } from "../../internal/index.js";

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

@@ -12,7 +12,7 @@ declare const __propDef: {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
         use?: import("../../internal/index.js").HTMLActionArray | undefined;
-        class?: import("../../internal/types").ClassProp<{
+        class?: import("../../internal/index.js").ClassProp<{
             checked: Checked;
         }>;
         self?: HTMLButtonElement | undefined;

package/dist/components/Combobox/Combobox.svelte

@@ -1,11 +1,10 @@
-<script context="module">import { getContext, onMount, tick } from "svelte";
+<script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
 import { ComboboxContext } from "./context.svelte.js";
-const contextName = "combobox-context";
-export const context = () => getContext(contextName);
+export const { context, contextName } = setupContext("combobox");
 </script>
 
-<script generics="ValueType">import { useActions, classProp } from "../../internal/index.js";
-import { setContext } from "svelte";
+<script lang="ts" generics="ValueType">import { useActions, classProp } from "../../internal/index.js";
+import { setContext, onMount, tick } from "svelte";
 let {
   children,
   use = [],

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

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import { ComboboxContext } from './context.svelte.js';
-export declare const context: () => ComboboxContext<any>;
+export declare const context: () => ComboboxContext<any>, contextName: string;
 import { type BaseProps } from '../../internal/index.js';
 declare class __sveltets_Render<ValueType> {
     props(): BaseProps<HTMLDivElement, {

package/dist/components/Combobox/ComboboxDropdown.svelte

@@ -1,4 +1,4 @@
-<script>import { context } from "./Combobox.svelte";
+<script lang="ts">import { context } from "./Combobox.svelte";
 import {
   clickOutside,
   anchorElement,

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

@@ -1,25 +1,9 @@
 import { SvelteComponent } from "svelte";
-import { type Transition, type BaseProps } from '../../internal/index.js';
-import type { Placement } from '@floating-ui/dom';
+import { type BaseProps, type DropdownProps } from '../../internal/index.js';
 declare const __propDef: {
     props: BaseProps<HTMLDivElement, {
         visible: boolean;
-    }> & {
-        /**
-         * The `svelte/transtion` you wish to use.
-         *
-         * @see https://lithesome.dev/docs/api#transition-prop
-         */
-        transition?: Transition | undefined;
-        /** The element to portal the dropdown menu to. */
-        portalTarget?: string | HTMLElement | undefined;
-        /** The anchor point of the dropdown relative to the trigger. */
-        placement?: Placement | undefined;
-        /** Keeps the dropdown from ever growing outside of the viewport. */
-        constrainViewport?: boolean | undefined;
-        /** Makes the dropdown the same width as the trigger. */
-        sameWidth?: boolean | undefined;
-    };
+    }> & DropdownProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/Combobox/ComboboxInput.svelte

@@ -1,4 +1,4 @@
-<script>import { context } from "./Combobox.svelte";
+<script lang="ts">import { context } from "./Combobox.svelte";
 import {
   useActions,
   classProp,

package/dist/components/Combobox/ComboboxOption.svelte

@@ -1,4 +1,4 @@
-<script>import { context } from "./Combobox.svelte";
+<script lang="ts">import { context } from "./Combobox.svelte";
 import {
   useActions,
   classProp,

package/dist/components/Hovercard/Hovercard.svelte

@@ -1,33 +1,14 @@
-<script context="module">import { getContext } from "svelte";
+<script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
 import { HovercardContext } from "./context.svelte.js";
-const contextName = "hovercard-context";
-export const context = () => getContext(contextName);
+export const { context, contextName } = setupContext("hovercard");
 </script>
 
-<script>import { useActions, classProp, parseDelay } from "../../internal/index.js";
+<script lang="ts">import { useActions, classProp, parseDelay } from "../../internal/index.js";
 import { setContext } from "svelte";
-let {
-  children,
-  use = [],
-  class: klass,
-  visible = $bindable(false),
-  self = $bindable(),
-  delay = 700,
-  ...props
-} = $props();
+let { children, use = [], class: klass, self = $bindable(), delay = 700, ...props } = $props();
 const delays = parseDelay(delay);
-const ctx = new HovercardContext(
-  { visible, delays },
-  {
-    onChange(val) {
-      visible = val;
-    }
-  }
-);
+const ctx = new HovercardContext({ delays });
 setContext(contextName, ctx);
-$effect(() => {
-  ctx.visible = visible;
-});
 </script>
 
 <div

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

@@ -1,15 +1,11 @@
 import { SvelteComponent } from "svelte";
 import { HovercardContext } from './context.svelte.js';
-export declare const context: () => HovercardContext;
+export declare const context: () => HovercardContext, contextName: string;
 import { type BaseProps } from '../../internal/index.js';
 declare const __propDef: {
     props: BaseProps<HTMLDivElement, {
         visible: boolean;
     }> & {
-        /**
-         * Whether or not the content is visible or not.
-         */
-        visible?: boolean | undefined;
         /**
          * The delay between the the content being visible or not.
          *

package/dist/components/Hovercard/HovercardContent.svelte

@@ -1,10 +1,9 @@
-<script>import { context } from "./Hovercard.svelte";
+<script lang="ts">import { context } from "./Hovercard.svelte";
 import {
   clickOutside,
   anchorElement,
   portal,
   useActions,
-  trap,
   getTransition,
   classProp
 } from "../../internal/index.js";
@@ -31,9 +30,7 @@ const attrs = $derived({
   id: ctx.uid("content"),
   "aria-labelledby": ctx.uid("trigger"),
   class: classProp(klass, { visible: ctx.visible }),
-  "data-menucontent": "",
-  role: "menu",
-  tabindex: -1
+  "data-hovercardcontent": ""
 });
 onMount(async () => {
   if (!ctx)
@@ -83,6 +80,8 @@ const handleMouseleave = (e) => {
 			out:_transition.out.fn={_transition.out.params}
 			onmouseenter={handleMouseenter}
 			onmouseleave={handleMouseleave}
+			role="menu"
+			tabindex={-1}
 			{...attrs}
 			{...props}
 		>
@@ -102,6 +101,8 @@ const handleMouseleave = (e) => {
 		use:useActions={use}
 		onmouseenter={handleMouseenter}
 		onmouseleave={handleMouseleave}
+		role="menu"
+		tabindex={-1}
 		{...attrs}
 		{...props}
 	>

package/dist/components/Hovercard/HovercardContent.svelte.d.ts

@@ -1,24 +1,9 @@
 import { SvelteComponent } from "svelte";
-import { type Transition, type BaseProps, type Handler } from '../../internal/index.js';
-import type { Placement } from '@floating-ui/dom';
+import { type BaseProps, type Handler, type DropdownProps } from '../../internal/index.js';
 declare const __propDef: {
     props: BaseProps<HTMLDivElement, {
         visible: boolean;
-    }> & {
-        /**
-         * The `svelte/transtion` you wish to use.
-         *
-         * @see https://lithesome.dev/docs/api#transition-prop
-         */
-        transition?: Transition | undefined;
-        /** The element to portal the content menu to. */
-        portalTarget?: string | HTMLElement | undefined;
-        /** The anchor point of the content relative to the trigger. */
-        placement?: Placement | undefined;
-        /** Keeps the content from ever growing outside of the viewport. */
-        constrainViewport?: boolean | undefined;
-        /** Makes the content the same width as the trigger. */
-        sameWidth?: boolean | undefined;
+    }> & DropdownProps & {
         onMouseenter?: Handler<MouseEvent, HTMLDivElement> | undefined;
         onMouseleave?: Handler<MouseEvent, HTMLDivElement> | undefined;
     };

package/dist/components/Hovercard/HovercardTrigger.svelte

@@ -1,4 +1,4 @@
-<script>import { context } from "./Hovercard.svelte";
+<script lang="ts">import { context } from "./Hovercard.svelte";
 import {
   log,
   setNodeProps,

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

@@ -1,15 +1,11 @@
 import { Context } from '../../internal/index.js';
 interface Init {
-    visible: boolean;
     delays: {
         in: number;
         out: number;
     };
 }
-interface Hooks {
-    onChange: (value: boolean) => void;
-}
-export declare class HovercardContext extends Context<Hooks> {
+export declare class HovercardContext extends Context {
     #private;
     visible: boolean;
     trigger: HTMLElement | null;
@@ -20,7 +16,7 @@ export declare class HovercardContext extends Context<Hooks> {
         out: number;
     };
     hovered: boolean;
-    constructor(init: Init, hooks: Hooks);
+    constructor(init: Init);
     open(): void;
     close(): void;
 }

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

@@ -6,9 +6,8 @@ export class HovercardContext extends Context {
     timeout = $state(null);
     delays = $state({ in: 700, out: 700 });
     hovered = $state(false);
-    constructor(init, hooks) {
-        super('hovercard', hooks);
-        this.visible = init.visible;
+    constructor(init) {
+        super('hovercard');
         this.delays = init.delays;
     }
     open() {

package/dist/components/Menu/Menu.svelte

@@ -1,10 +1,9 @@
-<script context="module">import { getContext } from "svelte";
+<script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
 import { MenuContext } from "./context.svelte.js";
-const contextName = "menu-context";
-export const context = () => getContext(contextName);
+export const { context, contextName } = setupContext("menu");
 </script>
 
-<script>import { useActions, classProp } from "../../internal/index.js";
+<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();

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

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import { MenuContext } from './context.svelte.js';
-export declare const context: () => MenuContext;
+export declare const context: () => MenuContext, contextName: string;
 import { type BaseProps } from '../../internal/index.js';
 declare const __propDef: {
     props: BaseProps<HTMLDivElement, {

package/dist/components/Menu/MenuDropdown.svelte

@@ -1,4 +1,4 @@
-<script>import { context } from "./Menu.svelte";
+<script lang="ts">import { context } from "./Menu.svelte";
 import {
   clickOutside,
   anchorElement,

package/dist/components/Menu/MenuDropdown.svelte.d.ts

@@ -1,25 +1,9 @@
 import { SvelteComponent } from "svelte";
-import { type Transition, type BaseProps } from '../../internal/index.js';
-import type { Placement } from '@floating-ui/dom';
+import { type BaseProps, type DropdownProps } from '../../internal/index.js';
 declare const __propDef: {
     props: BaseProps<HTMLDivElement, {
         visible: boolean;
-    }> & {
-        /**
-         * The `svelte/transtion` you wish to use.
-         *
-         * @see https://lithesome.dev/docs/api#transition-prop
-         */
-        transition?: Transition | undefined;
-        /** The element to portal the dropdown menu to. */
-        portalTarget?: string | HTMLElement | undefined;
-        /** The anchor point of the dropdown relative to the trigger. */
-        placement?: Placement | undefined;
-        /** Keeps the dropdown from ever growing outside of the viewport. */
-        constrainViewport?: boolean | undefined;
-        /** Makes the dropdown the same width as the trigger. */
-        sameWidth?: boolean | undefined;
-    };
+    }> & DropdownProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/Menu/MenuItem.svelte

@@ -1,4 +1,4 @@
-<script>import { context } from "./Menu.svelte";
+<script lang="ts">import { context } from "./Menu.svelte";
 import { useActions, classProp } from "../../internal/index.js";
 import { createUID } from "../../internal/index.js";
 import { onMount } from "svelte";

package/dist/components/Menu/MenuTrigger.svelte

@@ -1,4 +1,4 @@
-<script>import { context } from "./Menu.svelte";
+<script lang="ts">import { context } from "./Menu.svelte";
 import {
   log,
   setNodeProps,

package/dist/components/Modal/Modal.svelte

@@ -1,10 +1,9 @@
-<script context="module">import { getContext } from "svelte";
+<script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
 import { ModalContext } from "./context.svelte.js";
-const contextName = "modal-context";
-export const context = () => getContext(contextName);
+export const { context, contextName } = setupContext("modal");
 </script>
 
-<script>import { createUID, useActions, portal, KEYS, isBrowser, classProp } from "../../internal/index.js";
+<script lang="ts">import { createUID, useActions, portal, KEYS, isBrowser, classProp } from "../../internal/index.js";
 import { setContext } from "svelte";
 let {
   children,

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

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import { ModalContext } from './context.svelte.js';
-export declare const context: () => ModalContext;
+export declare const context: () => ModalContext, contextName: string;
 import { type BaseProps } from '../../internal/index.js';
 declare const __propDef: {
     props: BaseProps<HTMLDivElement, any> & {

package/dist/components/Modal/ModalContent.svelte

@@ -1,4 +1,4 @@
-<script>import { useActions, getTransition, classProp, trap } from "../../internal/index.js";
+<script lang="ts">import { useActions, getTransition, classProp, trap } from "../../internal/index.js";
 import { context } from "./Modal.svelte";
 let { children, class: klass, use = [], self = $bindable(), transition, ...props } = $props();
 const ctx = context();

package/dist/components/Modal/ModalDescription.svelte

@@ -1,4 +1,4 @@
-<script>import { useActions, classProp } from "../../internal/index.js";
+<script lang="ts">import { useActions, classProp } from "../../internal/index.js";
 import { context } from "./Modal.svelte";
 let { children, class: klass, use = [], self = $bindable(), ...props } = $props();
 const ctx = context();

package/dist/components/Modal/ModalOverlay.svelte

@@ -1,4 +1,4 @@
-<script>import {
+<script lang="ts">import {
   useActions,
   getTransition,
   classProp

package/dist/components/Modal/ModalTitle.svelte

@@ -1,4 +1,4 @@
-<script>import { useActions, classProp } from "../../internal/index.js";
+<script lang="ts">import { useActions, classProp } from "../../internal/index.js";
 import { context } from "./Modal.svelte";
 let { children, class: klass, use = [], self = $bindable(), ...props } = $props();
 const ctx = context();

package/dist/components/Pin/Pin.svelte

@@ -1,10 +1,9 @@
-<script context="module">import { getContext } from "svelte";
+<script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
 import { PinContext } from "./context.svelte.js";
-const contextName = "pin-context";
-export const context = () => getContext(contextName);
+export const { context, contextName } = setupContext("pin");
 </script>
 
-<script>import { useActions, classProp } from "../../internal/index.js";
+<script lang="ts">import { useActions, classProp } from "../../internal/index.js";
 import { setContext } from "svelte";
 let {
   children,

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

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import { PinContext } from './context.svelte.js';
-export declare const context: () => PinContext;
+export declare const context: () => PinContext, contextName: string;
 import { type BaseProps } from '../../internal/index.js';
 declare const __propDef: {
     props: BaseProps<HTMLDivElement, {

package/dist/components/Pin/PinInput.svelte

@@ -1,4 +1,4 @@
-<script>import { context } from "./Pin.svelte";
+<script lang="ts">import { context } from "./Pin.svelte";
 import {
   log,
   useActions,

package/dist/components/Pin/PinValue.svelte

@@ -1,4 +1,4 @@
-<script>import { context } from "./Pin.svelte";
+<script lang="ts">import { context } from "./Pin.svelte";
 import { log, useActions, classProp } from "../../internal/index.js";
 import { onMount } from "svelte";
 let { class: klass, use = [], self = $bindable(), name, ...props } = $props();

package/dist/components/Popover/Popover.svelte

@@ -1,10 +1,9 @@
-<script context="module">import { getContext } from "svelte";
+<script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
 import { PopoverContext } from "./context.svelte.js";
-const contextName = "popover-context";
-export const context = () => getContext(contextName);
+export const { context, contextName } = setupContext("popover");
 </script>
 
-<script>import { createUID, useActions, KEYS, isBrowser, classProp } from "../../internal/index.js";
+<script lang="ts">import { useActions, KEYS, classProp } from "../../internal/index.js";
 import { setContext } from "svelte";
 let { children, use = [], class: klass, self = $bindable(), visible = $bindable(false), ...props } = $props();
 const ctx = new PopoverContext(

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

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import { PopoverContext } from './context.svelte.js';
-export declare const context: () => PopoverContext;
+export declare const context: () => PopoverContext, contextName: string;
 import { type BaseProps } from '../../internal/index.js';
 declare const __propDef: {
     props: BaseProps<HTMLDivElement, {

package/dist/components/Popover/PopoverContent.svelte

@@ -1,4 +1,4 @@
-<script>import { context } from "./Popover.svelte";
+<script lang="ts">import { context } from "./Popover.svelte";
 import {
   clickOutside,
   anchorElement,

package/dist/components/Popover/PopoverContent.svelte.d.ts

@@ -1,25 +1,9 @@
 import { SvelteComponent } from "svelte";
-import { type Transition, type BaseProps } from '../../internal/index.js';
-import type { Placement } from '@floating-ui/dom';
+import { type BaseProps, type DropdownProps } from '../../internal/index.js';
 declare const __propDef: {
     props: BaseProps<HTMLDivElement, {
         visible: boolean;
-    }> & {
-        /**
-         * The `svelte/transtion` you wish to use.
-         *
-         * @see https://lithesome.dev/docs/api#transition-prop
-         */
-        transition?: Transition | undefined;
-        /** The element to portal the content menu to. */
-        portalTarget?: string | HTMLElement | undefined;
-        /** The anchor point of the content relative to the trigger. */
-        placement?: Placement | undefined;
-        /** Keeps the content from ever growing outside of the viewport. */
-        constrainViewport?: boolean | undefined;
-        /** Makes the content the same width as the trigger. */
-        sameWidth?: boolean | undefined;
-    };
+    }> & DropdownProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/Popover/PopoverTrigger.svelte

@@ -1,4 +1,4 @@
-<script>import { context } from "./Popover.svelte";
+<script lang="ts">import { context } from "./Popover.svelte";
 import {
   log,
   setNodeProps,

package/dist/components/RadioGroup/RadioGroup.svelte

@@ -1,10 +1,9 @@
-<script context="module">import { getContext } from "svelte";
+<script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
 import { RadiogroupContext } from "./context.svelte.js";
-const contextName = "radiogroup-context";
-export const context = () => getContext(contextName);
+export const { context, contextName } = setupContext("radiogroup");
 </script>
 
-<script>import { useActions, classProp } from "../../internal/index.js";
+<script lang="ts">import { useActions, classProp } from "../../internal/index.js";
 import { setContext } from "svelte";
 let {
   children,

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

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import { RadiogroupContext } from './context.svelte.js';
-export declare const context: () => RadiogroupContext;
+export declare const context: () => RadiogroupContext, contextName: string;
 import { type BaseProps, type JsonValue } from '../../internal/index.js';
 declare const __propDef: {
     props: BaseProps<HTMLDivElement, any> & {

package/dist/components/RadioGroup/RadioGroupItem.svelte

@@ -1,4 +1,4 @@
-<script>import { context } from "./RadioGroup.svelte";
+<script lang="ts">import { context } from "./RadioGroup.svelte";
 import {
   log,
   useActions,

package/dist/components/Select/Select.svelte

@@ -1,11 +1,10 @@
-<script context="module">import { getContext, onMount, tick } from "svelte";
+<script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
 import { SelectContext } from "./context.svelte.js";
-const contextName = "select-context";
-export const context = () => getContext(contextName);
+export const { context, contextName } = setupContext("select");
 </script>
 
-<script generics="ValueType">import { useActions, classProp } from "../../internal/index.js";
-import { setContext } from "svelte";
+<script lang="ts" generics="ValueType">import { useActions, classProp } from "../../internal/index.js";
+import { setContext, onMount, tick } from "svelte";
 let {
   children,
   use = [],

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

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import { SelectContext } from './context.svelte.js';
-export declare const context: () => SelectContext<any>;
+export declare const context: () => SelectContext<any>, contextName: string;
 import { type BaseProps, type JsonValue } from '../../internal/index.js';
 declare class __sveltets_Render<ValueType> {
     props(): BaseProps<HTMLDivElement, {

package/dist/components/Select/SelectDropdown.svelte

@@ -1,4 +1,4 @@
-<script>import { context } from "./Select.svelte";
+<script lang="ts">import { context } from "./Select.svelte";
 import {
   clickOutside,
   anchorElement,

package/dist/components/Select/SelectDropdown.svelte.d.ts

@@ -1,25 +1,9 @@
 import { SvelteComponent } from "svelte";
-import { type Transition, type BaseProps } from '../../internal/index.js';
-import type { Placement } from '@floating-ui/dom';
+import { type BaseProps, type DropdownProps } from '../../internal/index.js';
 declare const __propDef: {
     props: BaseProps<HTMLDivElement, {
         visible: boolean;
-    }> & {
-        /**
-         * The `svelte/transtion` you wish to use.
-         *
-         * @see https://lithesome.dev/docs/api#transition-prop
-         */
-        transition?: Transition | undefined;
-        /** The element to portal the dropdown menu to. */
-        portalTarget?: string | HTMLElement | undefined;
-        /** The anchor point of the dropdown relative to the trigger. */
-        placement?: Placement | undefined;
-        /** Keeps the dropdown from ever growing outside of the viewport. */
-        constrainViewport?: boolean | undefined;
-        /** Makes the dropdown the same width as the trigger. */
-        sameWidth?: boolean | undefined;
-    };
+    }> & DropdownProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/Select/SelectOption.svelte

@@ -1,4 +1,4 @@
-<script>import { context } from "./Select.svelte";
+<script lang="ts">import { context } from "./Select.svelte";
 import {
   useActions,
   classProp,

package/dist/components/Select/SelectTrigger.svelte

@@ -1,4 +1,4 @@
-<script>import { context } from "./Select.svelte";
+<script lang="ts">import { context } from "./Select.svelte";
 import {
   log,
   setNodeProps,

package/dist/components/Select/SelectValue.svelte

@@ -1,4 +1,4 @@
-<script>import { context } from "./Select.svelte";
+<script lang="ts">import { context } from "./Select.svelte";
 import { useActions, classProp } from "../../internal/index.js";
 let { class: klass, use = [], self = $bindable(), placeholder = "Select an option...", ...props } = $props();
 const ctx = context();

package/dist/components/Tabs/Tabs.svelte

@@ -1,16 +1,15 @@
-<script context="module">import { getContext } from "svelte";
+<script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
 import { TabsContext } from "./context.svelte.js";
-const contextName = "tabs-context";
-export const context = () => getContext(contextName);
+export const { context, contextName } = setupContext("tabs");
 </script>
 
-<script>import { useActions, classProp } from "../../internal/index.js";
+<script lang="ts">import { useActions, classProp } from "../../internal/index.js";
 import { setContext } from "svelte";
 let {
   children,
   use = [],
   class: klass,
-  self,
+  self = $bindable(),
   orientation = "horizontal",
   value = $bindable(""),
   ...props

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

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import { TabsContext } from './context.svelte.js';
-export declare const context: () => TabsContext;
+export declare const context: () => TabsContext, contextName: string;
 import { type BaseProps } from '../../internal/index.js';
 declare const __propDef: {
     props: BaseProps<HTMLDivElement, {

package/dist/components/Tabs/TabsButton.svelte

@@ -1,4 +1,4 @@
-<script>import { context } from "./Tabs.svelte";
+<script lang="ts">import { context } from "./Tabs.svelte";
 import {
   useActions,
   KEYS,

package/dist/components/Tabs/TabsContent.svelte

@@ -1,4 +1,4 @@
-<script>import { context } from "./Tabs.svelte";
+<script lang="ts">import { context } from "./Tabs.svelte";
 import { useActions, classProp } from "../../internal/index.js";
 let { children, class: klass, use = [], self = $bindable(), value, ...props } = $props();
 const ctx = context();

package/dist/components/Tabs/TabsList.svelte

@@ -1,4 +1,4 @@
-<script>import { context } from "./Tabs.svelte";
+<script lang="ts">import { context } from "./Tabs.svelte";
 import { useActions, classProp } from "../../internal/index.js";
 let { children, class: klass, use = [], self, ...props } = $props();
 const ctx = context();

package/dist/internal/helpers/context.svelte.d.ts

@@ -4,4 +4,17 @@ export declare class Context<H = any> {
     protected hooks: H | null;
     constructor(name: string, hooks?: H);
 }
+/**
+ * Helper function to create a svelte context with a
+ * unique name to avoid naming collisions.
+ * @param name The name of the context
+ * @returns
+ */
+export declare const setupContext: <T>(name: string) => {
+    contextName: string;
+    context: () => T;
+};
+/**
+ * Auto cleanup effects when the component is unmounted from the DOM.
+ */
 export declare const effects: (fn: () => void) => () => void;

package/dist/internal/helpers/context.svelte.js

@@ -1,5 +1,5 @@
 import { createUID } from './utils.svelte.js';
-import { onDestroy } from 'svelte';
+import { onDestroy, getContext } from 'svelte';
 export class Context {
     uid = $state();
     hooks = null;
@@ -10,6 +10,22 @@ export class Context {
             this.hooks = hooks;
     }
 }
+/**
+ * Helper function to create a svelte context with a
+ * unique name to avoid naming collisions.
+ * @param name The name of the context
+ * @returns
+ */
+export const setupContext = (name) => {
+    let { uid } = createUID(name + 'Context');
+    return {
+        contextName: uid(),
+        context: () => getContext(uid())
+    };
+};
+/**
+ * Auto cleanup effects when the component is unmounted from the DOM.
+ */
 export const effects = (fn) => {
     let cleanUp = $effect.root(fn);
     const destroy = () => {

package/dist/internal/helpers/utils.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { JsonValue, ClassProp } from '../types.js';
 export type CalcIndexAction = 'prev' | 'next' | 'first' | 'last';
+export type UID = (component?: string) => string;
 /**
  * Calculates the index position of the action given.
  * @param action Which direction to navigate the index.
@@ -8,7 +9,6 @@ export type CalcIndexAction = 'prev' | 'next' | 'first' | 'last';
  * @param loop Loops around the items array if true.
  */
 export declare const calculateIndex: (action: CalcIndexAction, items: any[], index: number, loop?: boolean) => number;
-export type UID = (component?: string) => string;
 /**
  * Creates a unique ID to be used for accessability.
  */

package/dist/internal/types.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { HTMLActionArray } from './index.js';
+import type { HTMLActionArray, Transition } from './index.js';
+import type { Placement } from '@floating-ui/dom';
 export type JsonObject = {
     [key: string]: JsonValue;
 };
@@ -34,3 +35,19 @@ export interface BaseProps<T extends HTMLElement, C extends Record<string, any>
     self?: T;
 }
 export type BasePropsNoChildren<T extends HTMLElement, C extends Record<string, any> = any> = Omit<BaseProps<T, C>, 'children'>;
+export interface DropdownProps {
+    /**
+     * The `svelte/transtion` you wish to use.
+     *
+     * @see https://lithesome.dev/docs/api#transition-prop
+     */
+    transition?: Transition;
+    /** The element to portal the dropdown menu to. */
+    portalTarget?: string | HTMLElement;
+    /** The anchor point of the dropdown relative to the trigger. */
+    placement?: Placement;
+    /** Keeps the dropdown from ever growing outside of the viewport. */
+    constrainViewport?: boolean;
+    /** Makes the dropdown the same width as the trigger. */
+    sameWidth?: boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lithesome",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/Gibbu/lithesome.git"
@@ -48,7 +48,7 @@
     "rehype-slug": "^6.0.0",
     "remark-external-links": "^9.0.1",
     "shiki": "^1.2.0",
-    "svelte": "5.0.0-next.84",
+    "svelte": "5.0.0-next.94",
     "svelte-check": "^3.6.6",
     "tailwind-merge": "^2.2.1",
     "tailwindcss": "^3.4.1",

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

@@ -1,15 +0,0 @@
-import { Context } from '../../internal/helpers/context.svelte.js';
-interface Hooks {
-    onChange: (value: string[]) => void;
-}
-interface Init {
-    value: string[];
-    disabled: boolean;
-}
-export declare class TagsContext extends Context<Hooks> {
-    #private;
-    value: string[];
-    disabled: boolean;
-    constructor(init: Init, hooks: Hooks);
-}
-export {};

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

@@ -1,15 +0,0 @@
-import { Context, effects } from '../../internal/helpers/context.svelte.js';
-export class TagsContext extends Context {
-    value = $state([]);
-    disabled = $state(false);
-    constructor(init, hooks) {
-        super('tags', hooks);
-        this.value = init.value;
-        this.disabled = init.disabled;
-    }
-    #cleanup = effects(() => {
-        $effect(() => {
-            this.hooks?.onChange(this.value);
-        });
-    });
-}