lithesome 0.6.2 → 0.7.0

package/README.md

@@ -17,18 +17,18 @@ pnpm i -D lithesome
 
 ```svelte
 <script>
-	import { Menu, MenuTrigger, MenuDropdown, MenuItem } from 'lithesome';
+	import { Menu, MenuTrigger, MenuContent, MenuItem } from 'lithesome';
 </script>
 
 <Menu>
 	<MenuTrigger>
 		<button>Auth</button>
 	</MenuTrigger>
-	<MenuDropdown>
+	<MenuContent>
 		<MenuItem>My Profile</MenuItem>
 		<MenuItem>Account Settings</MenuItem>
 		<MenuItem>Logout</MenuItem>
-	</MenuDropdown>
+	</MenuContent>
 </Menu>
 ```
 

package/dist/components/Combobox/ComboboxArrow.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">import { context } from "./Combobox.svelte";
+import { useActions, classProp, log } from "../../internal/index.js";
+import { onMount } from "svelte";
+let { class: klass, use = [], self = $bindable(), ...props } = $props();
+const ctx = context();
+onMount(() => {
+  if (!ctx)
+    log.error("<ComboboxArrow /> must be a child element of <ComboboxContent />");
+  if (!self)
+    return;
+  ctx.arrow = self;
+});
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	id={ctx.uid('arrow')}
+	class={classProp(klass, { visible: ctx.visible })}
+	data-popoverarrow=""
+	{...props}
+/>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { type BasePropsNoChildren } from '../../internal/index.js';
+declare const __propDef: {
+    props: BasePropsNoChildren<HTMLDivElement, {
+        visible: boolean;
+    }>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComboboxArrowProps = typeof __propDef.props;
+export type ComboboxArrowEvents = typeof __propDef.events;
+export type ComboboxArrowSlots = typeof __propDef.slots;
+export default class ComboboxArrow extends SvelteComponent<ComboboxArrowProps, ComboboxArrowEvents, ComboboxArrowSlots> {
+}
+export {};

package/dist/components/Combobox/{ComboboxDropdown.svelte → ComboboxContent.svelte}

@@ -22,34 +22,41 @@ let {
   ...props
 } = $props();
 const ctx = context();
-let dropdownCleanup = $state(void 0);
+let contentCleanup = $state(void 0);
 const _transition = getTransition(transition);
 const attrs = $derived({
-  id: ctx.uid("dropdown"),
+  id: ctx.uid("content"),
   "aria-labelledby": ctx.uid("trigger"),
   role: "listbox",
   class: classProp(klass, { visible: ctx.visible }),
-  "data-comboboxdropdown": "",
+  "data-comboboxcontent": "",
   hidden: !ctx.mounted || void 0
 });
 onMount(() => {
   if (!ctx)
-    log.error("<ComboboxDropdown> Must be a direct child of <Combobox />");
+    log.error("<ComboboxContent> Must be a direct child of <Combobox />");
 });
 $effect(() => {
   if (ctx.visible && self)
-    ctx.dropdown = self;
+    ctx.content = self;
 });
 $effect(() => {
-  if (ctx.visible && ctx.trigger && ctx.dropdown) {
-    dropdownCleanup = anchorElement(ctx.trigger, ctx.dropdown, {
-      placement,
-      constrainViewport,
-      sameWidth
-    });
+  if (ctx.visible && ctx.trigger && ctx.content) {
+    contentCleanup = anchorElement(
+      {
+        anchor: ctx.trigger,
+        target: ctx.content,
+        arrow: ctx.arrow
+      },
+      {
+        placement,
+        constrainViewport,
+        sameWidth
+      }
+    );
   }
   return () => {
-    dropdownCleanup?.();
+    contentCleanup?.();
   };
 });
 </script>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { type BaseProps, type ContentProps } from '../../internal/index.js';
+declare const __propDef: {
+    props: BaseProps<HTMLDivElement, {
+        visible: boolean;
+    }> & ContentProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComboboxContentProps = typeof __propDef.props;
+export type ComboboxContentEvents = typeof __propDef.events;
+export type ComboboxContentSlots = typeof __propDef.slots;
+export default class ComboboxContent extends SvelteComponent<ComboboxContentProps, ComboboxContentEvents, ComboboxContentSlots> {
+}
+export {};

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

@@ -15,13 +15,11 @@ interface Hooks<ValueType> {
         newLabel?: string;
     }) => void;
 }
-export declare class ComboboxContext<ValueType = any> extends Context<Hooks<ValueType>> {
+export declare class ComboboxContext<ValueType = any> extends Context<Hooks<ValueType>, HTMLInputElement> {
     #private;
     visible: boolean;
     hoveredIndex: number;
     options: HTMLElement[];
-    trigger: HTMLInputElement | null;
-    dropdown: HTMLElement | null;
     selectedOptions: HTMLElement[];
     mounted: boolean;
     touched: boolean;

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

@@ -4,8 +4,6 @@ export class ComboboxContext extends Context {
     visible = $state(true);
     hoveredIndex = $state(-1);
     options = $state([]);
-    trigger = $state(null);
-    dropdown = $state(null);
     selectedOptions = $state([]);
     mounted = $state(false);
     touched = $state(false);
@@ -25,7 +23,7 @@ export class ComboboxContext extends Context {
         this.visible = !this.visible;
     }
     queryElements() {
-        const elements = removeDisabledElements(`#${this.uid('dropdown')} [data-comboboxoption]`);
+        const elements = removeDisabledElements(`#${this.uid('content')} [data-comboboxoption]`);
         if (!elements)
             return;
         this.options = elements;

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

@@ -1,4 +1,5 @@
 export { default as Combobox } from './Combobox.svelte';
-export { default as ComboboxDropdown } from './ComboboxDropdown.svelte';
+export { default as ComboboxContent } from './ComboboxContent.svelte';
 export { default as ComboboxInput } from './ComboboxInput.svelte';
 export { default as ComboboxOption } from './ComboboxOption.svelte';
+export { default as ComboboxArrow } from './ComboboxArrow.svelte';

package/dist/components/Combobox/index.js

@@ -1,4 +1,5 @@
 export { default as Combobox } from './Combobox.svelte';
-export { default as ComboboxDropdown } from './ComboboxDropdown.svelte';
+export { default as ComboboxContent } from './ComboboxContent.svelte';
 export { default as ComboboxInput } from './ComboboxInput.svelte';
 export { default as ComboboxOption } from './ComboboxOption.svelte';
+export { default as ComboboxArrow } from './ComboboxArrow.svelte';

package/dist/components/Hovercard/HovercardArrow.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">import { context } from "./Hovercard.svelte";
+import { useActions, classProp, log } from "../../internal/index.js";
+import { onMount } from "svelte";
+let { class: klass, use = [], self = $bindable(), ...props } = $props();
+const ctx = context();
+onMount(() => {
+  if (!ctx)
+    log.error("<HovercardArrow /> must be a child element of <HovercardContent />");
+  if (!self)
+    return;
+  ctx.arrow = self;
+});
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	id={ctx.uid('arrow')}
+	class={classProp(klass, { visible: ctx.visible })}
+	data-hovercardarrow=""
+	{...props}
+/>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { type BasePropsNoChildren } from '../../internal/index.js';
+declare const __propDef: {
+    props: BasePropsNoChildren<HTMLDivElement, {
+        visible: boolean;
+    }>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type HovercardArrowProps = typeof __propDef.props;
+export type HovercardArrowEvents = typeof __propDef.events;
+export type HovercardArrowSlots = typeof __propDef.slots;
+export default class HovercardArrow extends SvelteComponent<HovercardArrowProps, HovercardArrowEvents, HovercardArrowSlots> {
+}
+export {};

package/dist/components/Hovercard/HovercardContent.svelte

@@ -42,11 +42,18 @@ $effect(() => {
 });
 $effect(() => {
   if (ctx.visible && ctx.trigger && ctx.content) {
-    contentCleanup = anchorElement(ctx.trigger, ctx.content, {
-      placement,
-      constrainViewport,
-      sameWidth
-    });
+    contentCleanup = anchorElement(
+      {
+        anchor: ctx.trigger,
+        target: ctx.content,
+        arrow: ctx.arrow
+      },
+      {
+        placement,
+        constrainViewport,
+        sameWidth
+      }
+    );
   }
   return () => {
     contentCleanup?.();

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

@@ -1,9 +1,9 @@
 import { SvelteComponent } from "svelte";
-import { type BaseProps, type Handler, type DropdownProps } from '../../internal/index.js';
+import { type BaseProps, type Handler, type ContentProps } from '../../internal/index.js';
 declare const __propDef: {
     props: BaseProps<HTMLDivElement, {
         visible: boolean;
-    }> & DropdownProps & {
+    }> & ContentProps & {
         onMouseenter?: Handler<MouseEvent, HTMLDivElement> | undefined;
         onMouseleave?: Handler<MouseEvent, HTMLDivElement> | undefined;
     };

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

@@ -8,8 +8,6 @@ interface Init {
 export declare class HovercardContext extends Context {
     #private;
     visible: boolean;
-    trigger: HTMLElement | null;
-    content: HTMLElement | null;
     timeout: number | null;
     delays: {
         in: number;

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

@@ -1,8 +1,6 @@
 import { Context, effects } from '../../internal/index.js';
 export class HovercardContext extends Context {
     visible = $state(false);
-    trigger = $state(null);
-    content = $state(null);
     timeout = $state(null);
     delays = $state({ in: 700, out: 700 });
     hovered = $state(false);

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

@@ -1,3 +1,4 @@
 export { default as Hovercard } from './Hovercard.svelte';
 export { default as HovercardTrigger } from './HovercardTrigger.svelte';
 export { default as HovercardContent } from './HovercardContent.svelte';
+export { default as HovercardArrow } from './HovercardArrow.svelte';

package/dist/components/Hovercard/index.js

@@ -1,3 +1,4 @@
 export { default as Hovercard } from './Hovercard.svelte';
 export { default as HovercardTrigger } from './HovercardTrigger.svelte';
 export { default as HovercardContent } from './HovercardContent.svelte';
+export { default as HovercardArrow } from './HovercardArrow.svelte';

package/dist/components/Menu/MenuArrow.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">import { context } from "./Menu.svelte";
+import { useActions, classProp, log } from "../../internal/index.js";
+import { onMount } from "svelte";
+let { class: klass, use = [], self = $bindable(), ...props } = $props();
+const ctx = context();
+onMount(() => {
+  if (!ctx)
+    log.error("<MenuArrow /> must be a child element of <MenuContent />");
+  if (!self)
+    return;
+  ctx.arrow = self;
+});
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	id={ctx.uid('arrow')}
+	class={classProp(klass, { visible: ctx.visible })}
+	data-menuarrow=""
+	{...props}
+/>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { type BasePropsNoChildren } from '../../internal/index.js';
+declare const __propDef: {
+    props: BasePropsNoChildren<HTMLDivElement, {
+        visible: boolean;
+    }>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MenuArrowProps = typeof __propDef.props;
+export type MenuArrowEvents = typeof __propDef.events;
+export type MenuArrowSlots = typeof __propDef.slots;
+export default class MenuArrow extends SvelteComponent<MenuArrowProps, MenuArrowEvents, MenuArrowSlots> {
+}
+export {};

package/dist/components/Menu/{MenuDropdown.svelte → MenuContent.svelte}

@@ -22,33 +22,40 @@ let {
   ...props
 } = $props();
 const ctx = context();
-let dropdownCleanup = $state(void 0);
+let contentCleanup = $state(void 0);
 const _transition = getTransition(transition);
 const attrs = $derived({
-  id: ctx.uid("dropdown"),
+  id: ctx.uid("content"),
   "aria-labelledby": ctx.uid("trigger"),
   role: "menu",
   class: classProp(klass, { visible: ctx.visible }),
-  "data-menudropdown": ""
+  "data-menucontent": ""
 });
 onMount(async () => {
   if (!ctx)
-    log.error("<MenuDropdown> Must be a direct child of <Menu />");
+    log.error("<MenuContent> Must be a direct child of <Menu />");
 });
 $effect(() => {
   if (ctx.visible && self)
-    ctx.dropdown = self;
+    ctx.content = self;
 });
 $effect(() => {
-  if (ctx.visible && ctx.trigger && ctx.dropdown) {
-    dropdownCleanup = anchorElement(ctx.trigger, ctx.dropdown, {
-      placement,
-      constrainViewport,
-      sameWidth
-    });
+  if (ctx.visible && ctx.trigger && ctx.content) {
+    contentCleanup = anchorElement(
+      {
+        anchor: ctx.trigger,
+        target: ctx.content,
+        arrow: ctx.arrow
+      },
+      {
+        placement,
+        constrainViewport,
+        sameWidth
+      }
+    );
   }
   return () => {
-    dropdownCleanup?.();
+    contentCleanup?.();
   };
 });
 </script>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { type BaseProps, type ContentProps } from '../../internal/index.js';
+declare const __propDef: {
+    props: BaseProps<HTMLDivElement, {
+        visible: boolean;
+    }> & ContentProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MenuContentProps = typeof __propDef.props;
+export type MenuContentEvents = typeof __propDef.events;
+export type MenuContentSlots = typeof __propDef.slots;
+export default class MenuContent extends SvelteComponent<MenuContentProps, MenuContentEvents, MenuContentSlots> {
+}
+export {};

package/dist/components/Menu/MenuTrigger.svelte

@@ -35,7 +35,7 @@ $effect(() => {
   if (ctx.visible) {
     setNodeProps(target, {
       "aria-expanded": "true",
-      "aria-controls": ctx.uid("dropdown")
+      "aria-controls": ctx.uid("content")
     });
   }
   if (!ctx.visible) {

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

@@ -3,8 +3,6 @@ export declare class MenuContext extends Context {
     #private;
     visible: boolean;
     hoveredIndex: number;
-    trigger: HTMLElement | null;
-    dropdown: HTMLElement | null;
     items: string[];
     hoveredItem: string | undefined;
     constructor();

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

@@ -2,8 +2,6 @@ import { calculateIndex, disableScroll, Context, effects } from '../../internal/
 export class MenuContext extends Context {
     visible = $state(false);
     hoveredIndex = $state(-1);
-    trigger = $state(null);
-    dropdown = $state(null);
     items = $state([]);
     hoveredItem = $derived(this.items[this.hoveredIndex]);
     constructor() {

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

@@ -1,4 +1,4 @@
 export { default as Menu } from './Menu.svelte';
 export { default as MenuTrigger } from './MenuTrigger.svelte';
-export { default as MenuDropdown } from './MenuDropdown.svelte';
+export { default as MenuContent } from './MenuContent.svelte';
 export { default as MenuItem } from './MenuItem.svelte';

package/dist/components/Menu/index.js

@@ -1,4 +1,4 @@
 export { default as Menu } from './Menu.svelte';
 export { default as MenuTrigger } from './MenuTrigger.svelte';
-export { default as MenuDropdown } from './MenuDropdown.svelte';
+export { default as MenuContent } from './MenuContent.svelte';
 export { default as MenuItem } from './MenuItem.svelte';

package/dist/components/Pin/PinInput.svelte

@@ -36,6 +36,8 @@ const handleInput = async (event) => {
   if (e.inputType !== "insertText" && e.inputType !== "deleteContentBackward")
     return;
   await tick();
+  if (e.target.value.length > 1)
+    e.target.value = e.data;
   ctx.setValue(index, e.data);
   if (value.length === 1) {
     moveFocus("next");
@@ -122,7 +124,7 @@ const moveFocus = (direction) => {
 	disabled={ctx.disabled}
 	placeholder={focused ? '' : ctx.placeholder}
 	data-pininput=""
-	data-filled={ctx.filled || undefined}
+	data-filled={ctx.filled}
 	oninput={handleInput}
 	onkeydown={handleKeyDown}
 	onfocus={handleFocus}

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

@@ -6,7 +6,7 @@ interface Init {
     placeholder: string;
 }
 interface Hooks {
-    onChange?: (value: string) => void;
+    onChange: (value: string) => void;
 }
 export declare class PinContext extends Context<Hooks> {
     #private;

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

@@ -6,7 +6,7 @@ export class PinContext extends Context {
     type = $state('text');
     placeholder = $state('');
     transformedValue = $derived(this.value.join());
-    filled = $derived(this.value.every((el) => el?.length));
+    filled = $derived(this.value.length === this.inputs.length && this.value.every((el) => el?.length === 1));
     constructor(init, hooks) {
         super('pin', hooks);
         this.value = init.value;
@@ -22,7 +22,7 @@ export class PinContext extends Context {
     }
     #effects = effects(() => {
         $effect(() => {
-            this.hooks?.onChange?.(this.transformedValue);
+            this.hooks?.onChange(this.transformedValue);
         });
     });
 }

package/dist/components/Popover/PopoverArrow.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">import { context } from "./Popover.svelte";
+import { useActions, classProp, log } from "../../internal/index.js";
+import { onMount } from "svelte";
+let { class: klass, use = [], self = $bindable(), ...props } = $props();
+const ctx = context();
+onMount(() => {
+  if (!ctx)
+    log.error("<PopoverArrow /> must be a child element of <PopoverContent />");
+  if (!self)
+    return;
+  ctx.arrow = self;
+});
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	id={ctx.uid('arrow')}
+	class={classProp(klass, { visible: ctx.visible })}
+	data-popoverarrow=""
+	{...props}
+/>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { type BasePropsNoChildren } from '../../internal/index.js';
+declare const __propDef: {
+    props: BasePropsNoChildren<HTMLDivElement, {
+        visible: boolean;
+    }>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PopoverArrowProps = typeof __propDef.props;
+export type PopoverArrowEvents = typeof __propDef.events;
+export type PopoverArrowSlots = typeof __propDef.slots;
+export default class PopoverArrow extends SvelteComponent<PopoverArrowProps, PopoverArrowEvents, PopoverArrowSlots> {
+}
+export {};

package/dist/components/Popover/PopoverContent.svelte

@@ -42,11 +42,18 @@ $effect(() => {
 });
 $effect(() => {
   if (ctx.visible && ctx.trigger && ctx.content) {
-    contentCleanup = anchorElement(ctx.trigger, ctx.content, {
-      placement,
-      constrainViewport,
-      sameWidth
-    });
+    contentCleanup = anchorElement(
+      {
+        anchor: ctx.trigger,
+        target: ctx.content,
+        arrow: ctx.arrow
+      },
+      {
+        placement,
+        constrainViewport,
+        sameWidth
+      }
+    );
   }
   return () => {
     contentCleanup?.();

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

@@ -1,9 +1,9 @@
 import { SvelteComponent } from "svelte";
-import { type BaseProps, type DropdownProps } from '../../internal/index.js';
+import { type BaseProps, type ContentProps } from '../../internal/index.js';
 declare const __propDef: {
     props: BaseProps<HTMLDivElement, {
         visible: boolean;
-    }> & DropdownProps;
+    }> & ContentProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -8,8 +8,6 @@ interface Hooks {
 export declare class PopoverContext extends Context<Hooks> {
     #private;
     visible: boolean;
-    trigger: HTMLElement | null;
-    content: HTMLElement | null;
     constructor(init: Init, hooks: Hooks);
     close(): void;
     toggle(): void;

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

@@ -1,8 +1,6 @@
 import { Context, effects } from '../../internal/index.js';
 export class PopoverContext extends Context {
     visible = $state(false);
-    trigger = $state(null);
-    content = $state(null);
     constructor(init, hooks) {
         super('popover', hooks);
         this.visible = init.visible;

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

@@ -1,3 +1,4 @@
 export { default as Popover } from './Popover.svelte';
 export { default as PopoverTrigger } from './PopoverTrigger.svelte';
 export { default as PopoverContent } from './PopoverContent.svelte';
+export { default as PopoverArrow } from './PopoverArrow.svelte';

package/dist/components/Popover/index.js

@@ -1,3 +1,4 @@
 export { default as Popover } from './Popover.svelte';
 export { default as PopoverTrigger } from './PopoverTrigger.svelte';
 export { default as PopoverContent } from './PopoverContent.svelte';
+export { default as PopoverArrow } from './PopoverArrow.svelte';

package/dist/components/Select/PopoverArrow.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">import { context } from "./Select.svelte";
+import { useActions, classProp, log } from "../../internal/index.js";
+import { onMount } from "svelte";
+let { class: klass, use = [], self = $bindable(), ...props } = $props();
+const ctx = context();
+onMount(() => {
+  if (!ctx)
+    log.error("<SelectArrow /> must be a child element of <SelectContent />");
+  if (!self)
+    return;
+  ctx.arrow = self;
+});
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	id={ctx.uid('arrow')}
+	class={classProp(klass, { visible: ctx.visible })}
+	data-selectarrow=""
+	{...props}
+/>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { type BasePropsNoChildren } from '../../internal/index.js';
+declare const __propDef: {
+    props: BasePropsNoChildren<HTMLDivElement, {
+        visible: boolean;
+    }>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PopoverArrowProps = typeof __propDef.props;
+export type PopoverArrowEvents = typeof __propDef.events;
+export type PopoverArrowSlots = typeof __propDef.slots;
+export default class PopoverArrow extends SvelteComponent<PopoverArrowProps, PopoverArrowEvents, PopoverArrowSlots> {
+}
+export {};

package/dist/components/Select/{SelectDropdown.svelte → SelectContent.svelte}

@@ -22,34 +22,41 @@ let {
   ...props
 } = $props();
 const ctx = context();
-let dropdownCleanup = $state(void 0);
+let contentCleanup = $state(void 0);
 const _transition = getTransition(transition);
 const attrs = $derived({
-  id: ctx.uid("dropdown"),
+  id: ctx.uid("content"),
   "aria-labelledby": ctx.uid("trigger"),
   role: "listbox",
   class: classProp(klass, { visible: ctx.visible }),
-  "data-selectdropdown": "",
+  "data-selectcontent": "",
   hidden: !ctx.mounted || void 0
 });
 onMount(() => {
   if (!ctx)
-    log.error("<SelectDropdown> Must be a direct child of <Select />");
+    log.error("<SelectContent> Must be a direct child of <Select />");
 });
 $effect(() => {
   if (ctx.visible && self)
-    ctx.dropdown = self;
+    ctx.content = self;
 });
 $effect(() => {
-  if (ctx.visible && ctx.trigger && ctx.dropdown) {
-    dropdownCleanup = anchorElement(ctx.trigger, ctx.dropdown, {
-      placement,
-      constrainViewport,
-      sameWidth
-    });
+  if (ctx.visible && ctx.trigger && ctx.content) {
+    contentCleanup = anchorElement(
+      {
+        anchor: ctx.trigger,
+        target: ctx.content,
+        arrow: ctx.arrow
+      },
+      {
+        placement,
+        constrainViewport,
+        sameWidth
+      }
+    );
   }
   return () => {
-    dropdownCleanup?.();
+    contentCleanup?.();
   };
 });
 </script>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { type BaseProps, type ContentProps } from '../../internal/index.js';
+declare const __propDef: {
+    props: BaseProps<HTMLDivElement, {
+        visible: boolean;
+    }> & ContentProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SelectContentProps = typeof __propDef.props;
+export type SelectContentEvents = typeof __propDef.events;
+export type SelectContentSlots = typeof __propDef.slots;
+export default class SelectContent extends SvelteComponent<SelectContentProps, SelectContentEvents, SelectContentSlots> {
+}
+export {};

package/dist/components/Select/SelectTrigger.svelte

@@ -63,7 +63,7 @@ $effect(() => {
   if (ctx.visible) {
     setNodeProps(target, {
       "aria-expanded": "true",
-      "aria-controls": ctx.uid("dropdown")
+      "aria-controls": ctx.uid("content")
     });
   }
   if (!ctx.visible) {

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

@@ -16,8 +16,6 @@ export declare class SelectContext<ValueType = any> extends Context<Hooks<ValueT
     visible: boolean;
     hoveredIndex: number;
     options: HTMLElement[];
-    trigger: HTMLElement | null;
-    dropdown: HTMLElement | null;
     selectedOptions: HTMLElement[];
     mounted: boolean;
     multiple: boolean;

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

@@ -4,8 +4,6 @@ export class SelectContext extends Context {
     visible = $state(true);
     hoveredIndex = $state(-1);
     options = $state([]);
-    trigger = $state(null);
-    dropdown = $state(null);
     selectedOptions = $state([]);
     mounted = $state(false);
     multiple = $state(false);
@@ -24,7 +22,7 @@ export class SelectContext extends Context {
         this.visible = !this.visible;
     }
     queryElements() {
-        const elements = removeDisabledElements(`#${this.uid('dropdown')} [data-selectoption]`);
+        const elements = removeDisabledElements(`#${this.uid('content')} [data-selectoption]`);
         if (!elements)
             return;
         this.options = elements;

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

@@ -1,5 +1,5 @@
 export { default as Select } from './Select.svelte';
 export { default as SelectTrigger } from './SelectTrigger.svelte';
-export { default as SelectDropdown } from './SelectDropdown.svelte';
+export { default as SelectContent } from './SelectContent.svelte';
 export { default as SelectOption } from './SelectOption.svelte';
 export { default as SelectValue } from './SelectValue.svelte';

package/dist/components/Select/index.js

@@ -1,5 +1,5 @@
 export { default as Select } from './Select.svelte';
 export { default as SelectTrigger } from './SelectTrigger.svelte';
-export { default as SelectDropdown } from './SelectDropdown.svelte';
+export { default as SelectContent } from './SelectContent.svelte';
 export { default as SelectOption } from './SelectOption.svelte';
 export { default as SelectValue } from './SelectValue.svelte';

package/dist/internal/helpers/anchor.d.ts

@@ -1,9 +1,14 @@
 import { type Placement } from '@floating-ui/dom';
 type AnchorElement = HTMLElement | undefined | null;
+interface AnchorElements {
+    anchor: AnchorElement;
+    target: AnchorElement;
+    arrow?: AnchorElement;
+}
 interface AnchorConfig {
     placement?: Placement;
     constrainViewport?: boolean;
     sameWidth?: boolean;
 }
-export declare const anchorElement: (anchor: AnchorElement, target: AnchorElement, config?: AnchorConfig) => (() => void) | undefined;
+export declare const anchorElement: (elements: AnchorElements, config?: AnchorConfig) => (() => void) | undefined;
 export {};

package/dist/internal/helpers/anchor.js

@@ -1,17 +1,19 @@
-import { computePosition, flip, shift, autoUpdate, size } from '@floating-ui/dom';
+import { computePosition, flip, shift, autoUpdate, size, arrow as floatingArrow } from '@floating-ui/dom';
 import { defaultConfig } from './utils.svelte.js';
-export const anchorElement = (anchor, target, config) => {
-    if (!anchor || !target)
+export const anchorElement = (elements, config) => {
+    if (!elements.anchor || !elements.target)
         return;
     const { placement, constrainViewport, sameWidth } = defaultConfig(config, {
         placement: 'bottom',
         constrainViewport: false,
         sameWidth: false
     });
+    const { anchor, target, arrow } = elements;
     const cleanup = autoUpdate(anchor, target, () => {
         computePosition(anchor, target, {
             placement,
             middleware: [
+                arrow ? floatingArrow({ element: arrow }) : undefined,
                 flip(),
                 shift({
                     padding: 10
@@ -29,7 +31,7 @@ export const anchorElement = (anchor, target, config) => {
                     }
                 })
             ]
-        }).then(({ x, y, placement }) => {
+        }).then(({ x, y, placement, middlewareData }) => {
             const [side, alignment] = placement.split('-');
             Object.assign(target.style, {
                 left: `${x}px`,
@@ -38,6 +40,27 @@ export const anchorElement = (anchor, target, config) => {
             });
             target.setAttribute('data-side', side);
             target.setAttribute('data-alignment', alignment || 'center');
+            if (arrow) {
+                const arrowPos = middlewareData.arrow;
+                const side = {
+                    top: 'bottom',
+                    right: 'left',
+                    bottom: 'top',
+                    left: 'right'
+                }[placement.split('-')[0]];
+                if (!arrowPos || !side)
+                    return;
+                const arrowSize = (arrow.getBoundingClientRect().width / 3).toFixed();
+                Object.assign(arrow.style, {
+                    left: arrowPos.x != null ? `${arrowPos.x}px` : '',
+                    top: arrowPos.y != null ? `${arrowPos.y}px` : '',
+                    right: '',
+                    bottom: '',
+                    [side]: `-${arrowSize}px`,
+                    position: 'absolute'
+                });
+                arrow.setAttribute('data-side', side);
+            }
         });
     });
     return cleanup;

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

@@ -1,7 +1,10 @@
 import { type UID } from './utils.svelte.js';
-export declare class Context<H = any> {
+export declare class Context<H = any, T extends HTMLElement = any> {
     #private;
     uid: UID;
+    arrow: HTMLElement | null;
+    content: HTMLElement | null;
+    trigger: T | null;
     protected hooks: H | null;
     protected _mounted: boolean;
     constructor(name: string, hooks?: H);

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

@@ -2,6 +2,9 @@ import { createUID } from './utils.svelte.js';
 import { onDestroy, getContext, onMount } from 'svelte';
 export class Context {
     uid = $state();
+    arrow = $state(null);
+    content = $state(null);
+    trigger = $state(null);
     hooks = null;
     _mounted = $state(false);
     constructor(name, hooks) {

package/dist/internal/helpers/log.js

@@ -1,5 +1,5 @@
 export const log = {
     error(message) {
-        throw Error(`[Lithesome] ${message}`);
+        throw new Error(`[Lithesome] ${message}`);
     }
 };

package/dist/internal/types.d.ts

@@ -35,19 +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 {
+export interface ContentProps {
     /**
      * 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. */
+    /** The element to portal the content menu to. */
     portalTarget?: string | HTMLElement;
-    /** The anchor point of the dropdown relative to the trigger. */
+    /** The anchor point of the content relative to the trigger. */
     placement?: Placement;
-    /** Keeps the dropdown from ever growing outside of the viewport. */
+    /** Keeps the content from ever growing outside of the viewport. */
     constrainViewport?: boolean;
-    /** Makes the dropdown the same width as the trigger. */
+    /** Makes the content the same width as the trigger. */
     sameWidth?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lithesome",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/Gibbu/lithesome.git"

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

@@ -1,17 +0,0 @@
-import { SvelteComponent } from "svelte";
-import { type BaseProps, type DropdownProps } from '../../internal/index.js';
-declare const __propDef: {
-    props: BaseProps<HTMLDivElement, {
-        visible: boolean;
-    }> & DropdownProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ComboboxDropdownProps = typeof __propDef.props;
-export type ComboboxDropdownEvents = typeof __propDef.events;
-export type ComboboxDropdownSlots = typeof __propDef.slots;
-export default class ComboboxDropdown extends SvelteComponent<ComboboxDropdownProps, ComboboxDropdownEvents, ComboboxDropdownSlots> {
-}
-export {};

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

@@ -1,17 +0,0 @@
-import { SvelteComponent } from "svelte";
-import { type BaseProps, type DropdownProps } from '../../internal/index.js';
-declare const __propDef: {
-    props: BaseProps<HTMLDivElement, {
-        visible: boolean;
-    }> & DropdownProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type MenuDropdownProps = typeof __propDef.props;
-export type MenuDropdownEvents = typeof __propDef.events;
-export type MenuDropdownSlots = typeof __propDef.slots;
-export default class MenuDropdown extends SvelteComponent<MenuDropdownProps, MenuDropdownEvents, MenuDropdownSlots> {
-}
-export {};

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

@@ -1,17 +0,0 @@
-import { SvelteComponent } from "svelte";
-import { type BaseProps, type DropdownProps } from '../../internal/index.js';
-declare const __propDef: {
-    props: BaseProps<HTMLDivElement, {
-        visible: boolean;
-    }> & DropdownProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type SelectDropdownProps = typeof __propDef.props;
-export type SelectDropdownEvents = typeof __propDef.events;
-export type SelectDropdownSlots = typeof __propDef.slots;
-export default class SelectDropdown extends SvelteComponent<SelectDropdownProps, SelectDropdownEvents, SelectDropdownSlots> {
-}
-export {};