@valerius_petrini/corekit-ui 0.1.69 → 0.1.71

package/dist/components/display/Card/index.svelte

@@ -8,6 +8,7 @@
     let { 
         children = undefined, 
         class: className = "", 
+        element = $bindable(),
         href = undefined,
         external = false,
         variant = "bordered",
@@ -42,6 +43,7 @@
     style={mergedStyle}
     {...anchorProps}
     {...restProps}
+    bind:this={element}
 >
     {@render children?.()}
 </svelte:element>

package/dist/components/display/Card/index.svelte.d.ts

@@ -1,4 +1,4 @@
 import { type CardProps } from "./types.ts";
-declare const Index: import("svelte").Component<CardProps, {}, "">;
+declare const Index: import("svelte").Component<CardProps, {}, "element">;
 type Index = ReturnType<typeof Index>;
 export default Index;

package/dist/components/display/Card/types.d.ts

@@ -1,5 +1,5 @@
-import type { SizeStyle } from "$styles/size";
-import type { BaseComponentProps } from "$types/BaseComponent";
+import type { SizeStyle } from "../../../styles/size";
+import type { BaseComponentProps } from "../../../types/BaseComponent";
 export type CardVariant = "bordered" | "elevated";
 export interface CardProps extends BaseComponentProps {
     href?: string;

package/dist/components/display/KBD/index.svelte

@@ -4,6 +4,7 @@
     let { 
         children = undefined, 
         class: className = "",
+        element = $bindable(),
         subtext = undefined,
         ...restProps
     }: any = $props();
@@ -13,7 +14,7 @@
     const combinedClass = $derived(twMerge(defaultClass, className));
 </script>
 
-<span class={combinedClass} {...restProps}>
+<span class={combinedClass} {...restProps} bind:this={element}>
     {@render children?.()}
     {#if subtext}        
         <span class="text-sub-text text-[10px] mt-0.5">

package/dist/components/display/KBD/index.svelte.d.ts

@@ -1,3 +1,3 @@
-declare const Index: import("svelte").Component<any, {}, "">;
+declare const Index: import("svelte").Component<any, {}, "element">;
 type Index = ReturnType<typeof Index>;
 export default Index;

package/dist/components/display/Skeleton/index.svelte

@@ -8,6 +8,7 @@
     let { 
         variant = "text", 
         class: className = "",
+        element = $bindable(),
         count = 19, 
         size = "md" 
     }: SkeletonProps = $props();
@@ -38,7 +39,7 @@
     </div>
 {/snippet}
 
-<div class={combinedContainerClass}>
+<div class={combinedContainerClass} bind:this={element}>
     {#if variant === "default"}
         <div class="h-4 bg-sub-background rounded w-3/4"></div>
         <div class="h-4 bg-sub-background rounded w-full"></div>

package/dist/components/display/Skeleton/index.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { SkeletonProps } from "./types";
-declare const Index: import("svelte").Component<SkeletonProps, {}, "">;
+declare const Index: import("svelte").Component<SkeletonProps, {}, "element">;
 type Index = ReturnType<typeof Index>;
 export default Index;

package/dist/components/display/Skeleton/types.d.ts

@@ -1,4 +1,4 @@
-import type { BaseComponentProps } from "$types/BaseComponent";
+import type { BaseComponentProps } from "../../../types/BaseComponent";
 export type SkeletonVariant = "default" | "text" | "image" | "video" | "card";
 export interface SkeletonProps extends BaseComponentProps {
     variant?: SkeletonVariant;

package/dist/components/display/Table/index.svelte

@@ -5,6 +5,7 @@
     let { 
         children = undefined, 
         class: className = "",
+        element = $bindable(),
         tableHeaders = [],
         tableData = [],
         size = "md",
@@ -25,7 +26,7 @@
     const combinedTableHeaderClass = $derived(twMerge(defaultTableHeaderClass, defaultTableCellClass));
 </script>
 
-<div class="overflow-auto w-full">
+<div class="overflow-auto w-full" bind:this={element}>
     <table {...restProps} class={combinedTableClass}>
         <thead>
             <tr>

package/dist/components/display/Table/index.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { TableProps } from "./types";
-declare const Index: import("svelte").Component<TableProps, {}, "">;
+declare const Index: import("svelte").Component<TableProps, {}, "element">;
 type Index = ReturnType<typeof Index>;
 export default Index;

package/dist/components/feedback/Loader/index.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-    import { getSizeStyleClass } from "$styles/size.js";
+    import { getSizeStyleClass } from "../../../styles/size.js";
     import { twMerge } from "tailwind-merge";
     import type { LoaderProps } from "./types.js";
-    import { generateColorStyle } from "$styles/color.js";
+    import { generateColorStyle } from "../../../styles/color.js";
 
     let { 
         class: className = "",
+        element = $bindable(),
         size = "md",
         color = "blue",
         ...restProps
@@ -21,7 +22,7 @@
     ));
 </script>
 
-<div class={sizeClass} {...restProps}></div>
+<div class={sizeClass} {...restProps} bind:this={element}></div>
 
 <style>
     .loader {

package/dist/components/feedback/Loader/index.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { LoaderProps } from "./types.ts";
-declare const Index: import("svelte").Component<LoaderProps, {}, "">;
+declare const Index: import("svelte").Component<LoaderProps, {}, "element">;
 type Index = ReturnType<typeof Index>;
 export default Index;

package/dist/components/feedback/Loader/types.d.ts

@@ -1,5 +1,5 @@
-import type { ColorStyle } from "$styles/color";
-import type { SizeStyle } from "$styles/size";
+import type { ColorStyle } from "../../../styles/color";
+import type { SizeStyle } from "../../../styles/size";
 import type { BaseComponentProps } from "../../../types/BaseComponent.ts";
 export interface LoaderProps extends BaseComponentProps {
     size?: SizeStyle;

package/dist/components/feedback/Modal/index.svelte

@@ -8,6 +8,7 @@
     let { 
         children = undefined, 
         class: className = "",
+        element = $bindable(),
         open = $bindable(), 
         position = "center",
         ...restProps
@@ -27,7 +28,7 @@
 {#if open}
     <!-- svelte-ignore a11y_click_events_have_key_events -->
     <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class={combinedOuterDivClass} transition:fade={{ duration: 200 }} onclick={() => open = false}>
+    <div class={combinedOuterDivClass} transition:fade={{ duration: 200 }} onclick={() => open = false} bind:this={element}>
         <div class={combinedInnerDivClass} transition:fly={{ y: -20, duration: 200 }} onclick={(e) => e.stopPropagation()}>
             <Card class={combinedCardClass} {...restProps}>
                 {@render children()}

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

@@ -1,4 +1,4 @@
 import type { ModalProps } from "./types";
-declare const Index: import("svelte").Component<ModalProps, {}, "open">;
+declare const Index: import("svelte").Component<ModalProps, {}, "element" | "open">;
 type Index = ReturnType<typeof Index>;
 export default Index;

package/dist/components/feedback/Progress/index.svelte

@@ -8,6 +8,7 @@
     let { 
         children = undefined, 
         class: className = "",
+        element = $bindable(),
         divClass = "",
         progress = 100,
         animate = undefined,
@@ -64,6 +65,6 @@
     });
 </script>
 
-<div class={combinedDivClass} {...restProps} style="--duration: {animate?.duration}ms; {customStyle}">
+<div class={combinedDivClass} {...restProps} style="--duration: {animate?.duration}ms; {customStyle}" bind:this={element}>
     <div class={combinedInnerClass} style="width: {animate ? (mounted ? animate?.to : animate?.from) : progress}%; transition: width var(--duration) linear;"></div>
 </div>

package/dist/components/feedback/Progress/index.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ProgressProps } from "./types.ts";
-declare const Index: import("svelte").Component<ProgressProps, {}, "">;
+declare const Index: import("svelte").Component<ProgressProps, {}, "element">;
 type Index = ReturnType<typeof Index>;
 export default Index;

package/dist/components/feedback/Toast/index.svelte

@@ -26,6 +26,7 @@
         size = "md",
         radius = "md",
         onclose = undefined,
+        element = $bindable(),
         ...restProps
     }: ToastProps = $props();
 
@@ -58,7 +59,7 @@
     });
 </script>
 
-<div transition:fly={flyParams} class={combinedToastClass} {...restProps}>
+<div transition:fly={flyParams} class={combinedToastClass} {...restProps} bind:this={element}>
     <div class="w-8 h-8 flex-center">
         <Icon class={defualtIconClass}/>
     </div>

package/dist/components/feedback/Toast/index.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { ToastProps } from "./types.ts";
 import type { Component } from "svelte";
-declare const Index: Component<ToastProps, {}, "">;
+declare const Index: Component<ToastProps, {}, "element">;
 type Index = ReturnType<typeof Index>;
 export default Index;

package/dist/components/inputs/Button/index.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-    import { generateColorStyle } from "$styles/color";
+    import { generateColorStyle } from "../../../styles/color";
     import {
         getSizeStyle,
         getSizeStyleClass,
         getSizeStyleClassRecord,
-    } from "$styles/size";
+    } from "../../../styles/size";
     import type { ButtonProps } from "./types.js";
     import { twMerge } from "tailwind-merge";
     import { getLinkProps } from "../../../utils/link.js";
@@ -14,6 +14,7 @@
     let {
         children = undefined,
         class: className = "",
+        element = $bindable(),
         pill = false,
         icon = false,
         square = false,
@@ -84,6 +85,7 @@
     style={mergedStyle}
     {...anchorProps}
     {...restProps}
+    bind:this={element}
 >
     {#if loading}
         <Loader

package/dist/components/inputs/Button/index.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ButtonProps } from "./types.ts";
-declare const Index: import("svelte").Component<ButtonProps, {}, "">;
+declare const Index: import("svelte").Component<ButtonProps, {}, "element">;
 type Index = ReturnType<typeof Index>;
 export default Index;

package/dist/components/inputs/Button/size.d.ts

@@ -1,3 +1,3 @@
-import type { SizeStyle } from "$styles/size";
+import type { SizeStyle } from "../../../styles/size";
 export declare const buttonSizeStyles: Record<SizeStyle, string>;
 export declare const buttonIconSizeStyles: Record<SizeStyle, string>;

package/dist/components/inputs/Button/types.d.ts

@@ -1,6 +1,6 @@
-import type { ColorStyle, ButtonColorStyleType } from "$styles/color.js";
-import type { SizeStyle } from "$styles/size.js";
-import type { BaseComponentProps } from "$types/BaseComponent";
+import type { ColorStyle, ButtonColorStyleType } from "../../../styles/color.js";
+import type { SizeStyle } from "../../../styles/size.js";
+import type { BaseComponentProps } from "../../../types/BaseComponent";
 export interface ButtonProps extends BaseComponentProps {
     pill?: boolean;
     icon?: boolean;

package/dist/components/inputs/Checkbox/index.svelte

@@ -6,6 +6,7 @@
     let { 
         children = undefined, 
         class: className = "",
+        element = $bindable(),
         label = "",
         labelClass = "",
         divClass = "", 
@@ -29,7 +30,8 @@
         id={id}
         bind:checked={checked}
         class={combinedClass}
-        {...restProps}/>
+        {...restProps}
+        bind:this={element}/>
     <Text tag="label" for={id} class={combinedLabelClass}>
         {label}
     </Text>

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

@@ -1,4 +1,4 @@
 import type { CheckboxProps } from "./types";
-declare const Index: import("svelte").Component<CheckboxProps, {}, "checked">;
+declare const Index: import("svelte").Component<CheckboxProps, {}, "element" | "checked">;
 type Index = ReturnType<typeof Index>;
 export default Index;

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

@@ -1,4 +1,4 @@
-import type { BaseComponentProps } from "$types/BaseComponent";
+import type { BaseComponentProps } from "../../../types/BaseComponent";
 export interface CheckboxProps extends BaseComponentProps {
     label?: string;
     labelClass?: string;

package/dist/components/inputs/ColorInput/index.svelte

@@ -19,6 +19,7 @@
     let { 
         children = undefined, 
         class: className = "",
+        element = $bindable(),
         label = undefined,
         labelClass = "",
         divClass = "",
@@ -36,7 +37,6 @@
     let inputElement: HTMLInputElement;
     let dropdownX = $state(0);
     let dropdownY = $state(0);
-    let referenceEl = $state<HTMLElement>();
     let floatingEl = $state<HTMLDivElement>();
     let canvasEl = $state<HTMLDivElement>();
     let hueEl = $state<HTMLDivElement>();
@@ -79,11 +79,11 @@
     ));
 
     async function updateDropdownPosition() {
-        if (!referenceEl || !floatingEl) return;
+        if (!element || !floatingEl) return;
 
-        referenceWidth = referenceEl.offsetWidth;
+        referenceWidth = element.offsetWidth;
 
-        const { x, y } = await computePosition(referenceEl, floatingEl, {
+        const { x, y } = await computePosition(element, floatingEl, {
             placement: "bottom-start",
             middleware: [
                 offset(8),
@@ -110,7 +110,7 @@
     async function handleMouseDown(e: MouseEvent) {
         if (
             isOpen &&
-            referenceEl && !referenceEl.contains(e.target as Node) &&
+            element && !element.contains(e.target as Node) &&
             floatingEl && !floatingEl.contains(e.target as Node)
         ) {
             isOpen = false;
@@ -172,9 +172,9 @@
     }
 
     $effect(() => {
-        if (isOpen && referenceEl && floatingEl) {
+        if (isOpen && element && floatingEl) {
             const cleanup = autoUpdate(
-                referenceEl,
+                element,
                 floatingEl,
                 updateDropdownPosition
             );
@@ -262,7 +262,7 @@
 
 <svelte:window onmousedown={handleMouseDown}/>
 
-<div class={combinedOuterDivClass} bind:this={referenceEl}>
+<div class={combinedOuterDivClass} bind:this={element}>
     <Text tag="label" for={id} class={combinedLabelClass} style={getSizeStyle(size, "formLabel")}>
         {label}
         {#if required}
@@ -310,7 +310,7 @@
                 <div class="slider absolute w-5 h-1 border border-white shadow" style="top: {(hue / 360) * 100}%"></div>
             </div>
 
-            <div class="grow flex flex-col gap-2 min-w-[160px]">
+            <div class="grow flex flex-col gap-2 min-w-40">
                 <Input
                     type="text"
                     variant="floating"

package/dist/components/inputs/ColorInput/index.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ColorInputProps } from "./types";
-declare const Index: import("svelte").Component<ColorInputProps, {}, "value">;
+declare const Index: import("svelte").Component<ColorInputProps, {}, "element" | "value">;
 type Index = ReturnType<typeof Index>;
 export default Index;

package/dist/components/inputs/ColorInput/types.d.ts

@@ -1,5 +1,5 @@
-import type { SizeStyle } from "$styles/size";
-import type { BaseComponentProps } from "$types/BaseComponent";
+import type { SizeStyle } from "../../../styles/size";
+import type { BaseComponentProps } from "../../../types/BaseComponent";
 export type ColorInputVariant = "full" | "compact" | "input";
 export interface ColorInputProps extends BaseComponentProps {
     label?: string;

package/dist/components/inputs/Combobox/index.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { ComboboxProps } from "./types";
     import { twMerge } from "tailwind-merge";
-    import { getSizeStyleClass } from "$styles/size";
+    import { getSizeStyleClass } from "../../../styles/size";
     import { computePosition, flip, shift, offset, autoUpdate } from "@floating-ui/dom";
 
     import BaseInput from "../helper/BaseInput.svelte";
@@ -13,6 +13,7 @@
     let { 
         children = undefined, 
         class: className = "",
+        element = $bindable(),
         label = "",
         labelClass = "",
         divClass = "", 
@@ -38,7 +39,6 @@
 
     let dropdownX = $state(0);
     let dropdownY = $state(0);
-    let referenceEl = $state<HTMLElement>();
     let floatingEl = $state<HTMLDivElement>();
 
     let debouncedSearch = $state("");
@@ -81,11 +81,11 @@
     }
 
     async function updateDropdownPosition() {
-        if (!referenceEl || !floatingEl) return;
+        if (!element || !floatingEl) return;
 
-        referenceWidth = referenceEl.offsetWidth;
+        referenceWidth = element.offsetWidth;
 
-        const { x, y } = await computePosition(referenceEl, floatingEl, {
+        const { x, y } = await computePosition(element, floatingEl, {
             placement: "bottom-start",
             middleware: [
                 offset(8),
@@ -173,9 +173,9 @@
     let optionsContainerElement = $state<HTMLDivElement>();
 
     $effect(() => {
-        if (isFocused && referenceEl && floatingEl) {
+        if (isFocused && element && floatingEl) {
             const cleanup = autoUpdate(
-                referenceEl,
+                element,
                 floatingEl,
                 updateDropdownPosition
             );
@@ -186,7 +186,7 @@
     function handleMouseDown(e: MouseEvent) {
         if (
             isFocused &&
-            referenceEl && !referenceEl.contains(e.target as Node) &&
+            element && !element.contains(e.target as Node) &&
             floatingEl && !floatingEl.contains(e.target as Node)
         ) {
             isFocused = false;
@@ -213,7 +213,7 @@
     {id}
     {isFocused}
     {icon}
-    bind:wrapper={referenceEl}>
+    bind:wrapper={element}>
 
     {#snippet innerDivElement()}
         <input

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

@@ -1,4 +1,4 @@
 import type { ComboboxProps } from "./types";
-declare const Index: import("svelte").Component<ComboboxProps, {}, "value">;
+declare const Index: import("svelte").Component<ComboboxProps, {}, "element" | "value">;
 type Index = ReturnType<typeof Index>;
 export default Index;

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

@@ -1,4 +1,4 @@
-import type { BaseInputProps } from "$types/BaseComponent";
+import type { BaseInputProps } from "../../../types/BaseComponent";
 export interface ComboboxProps extends BaseInputProps {
     options?: string[];
     placeholder?: string;

package/dist/components/inputs/FileInput/index.svelte

@@ -12,6 +12,7 @@
     let { 
         children = undefined, 
         class: className = "",
+        element = $bindable(),
         label = undefined,
         labelClass = "",
         divClass = "",
@@ -75,7 +76,7 @@
     }
 </script>
 
-<div class={combinedOuterDivClass}>
+<div class={combinedOuterDivClass} bind:this={element}>
     <Text tag="label" for={id} class={combinedLabelClass} style={getSizeStyle(size, "formLabel")}>
         {label}
         {#if required}

package/dist/components/inputs/FileInput/index.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { FileInputProps } from "./types";
-declare const Index: import("svelte").Component<FileInputProps, {}, "files">;
+declare const Index: import("svelte").Component<FileInputProps, {}, "element" | "files">;
 type Index = ReturnType<typeof Index>;
 export default Index;

package/dist/components/inputs/FileInput/types.d.ts

@@ -1,5 +1,5 @@
-import type { SizeStyle } from "$styles/size";
-import type { BaseComponentProps } from "$types/BaseComponent";
+import type { SizeStyle } from "../../../styles/size";
+import type { BaseComponentProps } from "../../../types/BaseComponent";
 export interface FileInputProps extends BaseComponentProps {
     label?: string;
     labelClass?: string;

package/dist/components/inputs/Input/index.svelte

@@ -20,6 +20,7 @@
     let { 
         children = undefined, 
         class: className = "",
+        element = $bindable(),
         label = "",
         labelClass = "",
         divClass = "", 
@@ -128,6 +129,7 @@
     {isFocused}
     {id}
     icon={Icon}
+    bind:wrapper={element}
     {...restProps}>
     {#snippet outerDivElementAfter()}
         {#if touched && requirements}

package/dist/components/inputs/Input/index.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { InputProps } from "./types";
 import { type Component } from "svelte";
-declare const Index: Component<InputProps, {}, "value" | "valid">;
+declare const Index: Component<InputProps, {}, "element" | "value" | "valid">;
 type Index = ReturnType<typeof Index>;
 export default Index;

package/dist/components/inputs/Input/types.d.ts

@@ -1,4 +1,4 @@
-import type { BaseInputProps } from "$types/BaseComponent";
+import type { BaseInputProps } from "../../../types/BaseComponent";
 export interface InputRequirements {
     label: string;
     requirements: RegExp | ((value: any) => boolean);

package/dist/components/inputs/Select/index.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
     import { twMerge } from "tailwind-merge";
-    import { getSizeStyleClass } from "$styles/size";
+    import { getSizeStyleClass } from "../../../styles/size";
 
-    import type { SelectProps } from "../../../types/Input.js";
+    import type { SelectProps } from "./types";
     import BaseInput from "../helper/BaseInput.svelte";
 
     let { 
         children = undefined, 
         class: className = "",
+        element = $bindable(),
         label = "",
         labelClass = "",
         divClass = "", 
@@ -62,6 +63,7 @@
     {radius}
     {isFocused}
     {id}
+    bind:wrapper={element}
     {...restProps}>
     {#snippet innerDivElement()}
         <select 

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

@@ -1,3 +1,4 @@
-declare const Index: import("svelte").Component<SelectProps, {}, "value">;
+import type { SelectProps } from "./types";
+declare const Index: import("svelte").Component<SelectProps, {}, "element" | "value">;
 type Index = ReturnType<typeof Index>;
 export default Index;

package/dist/components/inputs/Select/types.d.ts

@@ -1,4 +1,4 @@
-import type { BaseInputProps } from "$types/BaseComponent";
+import type { BaseInputProps } from "../../../types/BaseComponent";
 export interface SelectProps extends BaseInputProps {
     options: {
         value: any;

package/dist/components/inputs/helper/BaseInput.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { twMerge } from "tailwind-merge";
-    import type { BaseInputProps } from "$types/BaseComponent";
+    import type { BaseInputProps } from "../../../types/BaseComponent";
     import Text from "../../typography/Text/index.svelte";
     import { getSizeStyleClass } from "../../../styles/size.js";
 

package/dist/components/inputs/helper/BaseInput.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { BaseInputProps } from "$types/BaseComponent";
+import type { BaseInputProps } from "../../../types/BaseComponent";
 declare const BaseInput: import("svelte").Component<BaseInputProps, {}, "value" | "wrapper">;
 type BaseInput = ReturnType<typeof BaseInput>;
 export default BaseInput;

package/dist/components/navigation/Breadcrumb/BreadcrumbItem.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
     import { twMerge } from "tailwind-merge";
     import type { BreadcrumbItemProps } from "./types";
-    import { Text } from "$components/typography";
+    import { Text } from "../../typography";
 
     let {
         children = undefined, 
         class: className = "",
+        element = $bindable(),
         href = undefined,
         ...restProps
     }: BreadcrumbItemProps = $props();
@@ -16,7 +17,7 @@
     ));
 </script>
 
-<li class={combinedClass} {...restProps} aria-current={href ? undefined : 'page'}>
+<li class={combinedClass} {...restProps} aria-current={href ? undefined : 'page'} bind:this={element}>
     {#if href}
         <a class="hover:underline hover:text-sub-text transition-colors" href={href}>
             {@render children?.()}

package/dist/components/navigation/Breadcrumb/BreadcrumbItem.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { BreadcrumbItemProps } from "./types";
-declare const BreadcrumbItem: import("svelte").Component<BreadcrumbItemProps, {}, "">;
+declare const BreadcrumbItem: import("svelte").Component<BreadcrumbItemProps, {}, "element">;
 type BreadcrumbItem = ReturnType<typeof BreadcrumbItem>;
 export default BreadcrumbItem;

package/dist/components/navigation/Breadcrumb/index.svelte

@@ -5,6 +5,7 @@
     let {
         children = undefined, 
         class: className = "",
+        element = $bindable(),
         ...restProps
     }: BreadcrumbProps = $props();
 
@@ -14,7 +15,7 @@
     ));
 </script>
 
-<nav aria-label="Breadcrumb" class={combinedClass} {...restProps}>
+<nav aria-label="Breadcrumb" class={combinedClass} {...restProps} bind:this={element}>
     <ol class="flex flex-wrap items-center">
         {@render children?.()}
     </ol>

package/dist/components/navigation/Breadcrumb/index.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { BreadcrumbProps } from "./types";
-declare const Index: import("svelte").Component<BreadcrumbProps, {}, "">;
+declare const Index: import("svelte").Component<BreadcrumbProps, {}, "element">;
 type Index = ReturnType<typeof Index>;
 export default Index;

package/dist/components/navigation/Breadcrumb/types.d.ts

@@ -1,4 +1,4 @@
-import type { BaseComponentProps } from "$types/BaseComponent";
+import type { BaseComponentProps } from "../../../types/BaseComponent";
 export interface BreadcrumbProps extends BaseComponentProps {
 }
 export interface BreadcrumbItemProps extends BaseComponentProps {

package/dist/components/navigation/Navbar/NavbarDropdown.svelte

@@ -2,14 +2,15 @@
     import { fly } from "svelte/transition";
     import NavbarElement from "./NavbarElement.svelte";
     import { tick } from "svelte";
-    import type { NavbarDropdownProps } from "$components/navigation/Navbar/types.js";
+    import type { NavbarDropdownProps } from "./types.js";
 
     let {
         children = undefined, 
         class: className = "", 
+        element = $bindable(),
         wrapperClass = "",
         label = "",
-        element = undefined,
+        navelement = undefined,
         ...restProps
     }: NavbarDropdownProps = $props();
 
@@ -58,11 +59,11 @@
 
 <svelte:window onclick={handleClickOutside}/>
 
-<div class="relative" bind:this={wrapperRef}>
+<div class="relative" bind:this={wrapperRef} bind:this={element}>
     <NavbarElement onclick={toggle} class={className} {...restProps} aria-haspopup="true" aria-expanded={open}>
         {label}
-        {#if element}
-            {@render element()}
+        {#if navelement}
+            {@render navelement()}
         {/if}
     </NavbarElement>
 

package/dist/components/navigation/Navbar/NavbarDropdown.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { NavbarDropdownProps } from "$components/navigation/Navbar/types.js";
-declare const NavbarDropdown: import("svelte").Component<NavbarDropdownProps, {}, "">;
+import type { NavbarDropdownProps } from "./types.js";
+declare const NavbarDropdown: import("svelte").Component<NavbarDropdownProps, {}, "element">;
 type NavbarDropdown = ReturnType<typeof NavbarDropdown>;
 export default NavbarDropdown;

package/dist/components/navigation/Navbar/NavbarElement.svelte

@@ -7,6 +7,7 @@
     let {
         children = undefined, 
         class: className = "", 
+        element = $bindable(),
         classTop = "",
         activeClass = "",
         href = undefined,
@@ -30,6 +31,6 @@
 
 <svelte:window bind:scrollY={scrollY}/>
 
-<Button radius="none" {href} color="none" class={combinedClass} {...restProps} aria-current={isActive ? 'page' : undefined}>
+<Button bind:element radius="none" {href} color="none" class={combinedClass} {...restProps} aria-current={isActive ? 'page' : undefined}>
     {@render children?.()}
 </Button>

package/dist/components/navigation/Navbar/NavbarElement.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { NavbarElementProps } from "./types";
-declare const NavbarElement: import("svelte").Component<NavbarElementProps, {}, "">;
+declare const NavbarElement: import("svelte").Component<NavbarElementProps, {}, "element">;
 type NavbarElement = ReturnType<typeof NavbarElement>;
 export default NavbarElement;

package/dist/components/navigation/Navbar/NavbarSeparator.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-    import { NavbarSeparatorClasses, type NavbarSeparatorProps } from "$components/navigation/Navbar/types.js";
+    import { NavbarSeparatorClasses, type NavbarSeparatorProps } from "./types.js";
 
     let {
         variant = "dynamic",
         class: className = "",
+        element = $bindable(),
         ...restProps
     }: NavbarSeparatorProps = $props();
 </script>
 
-<div class={NavbarSeparatorClasses[variant]} {...restProps}></div>
+<div bind:this={element} class={NavbarSeparatorClasses[variant]} {...restProps}></div>

package/dist/components/navigation/Navbar/NavbarSeparator.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type NavbarSeparatorProps } from "$components/navigation/Navbar/types.js";
-declare const NavbarSeparator: import("svelte").Component<NavbarSeparatorProps, {}, "">;
+import { type NavbarSeparatorProps } from "./types.js";
+declare const NavbarSeparator: import("svelte").Component<NavbarSeparatorProps, {}, "element">;
 type NavbarSeparator = ReturnType<typeof NavbarSeparator>;
 export default NavbarSeparator;

package/dist/components/navigation/Navbar/index.svelte

@@ -7,6 +7,7 @@
         class: className = "", 
         classTop = "",
         threshold = 10,
+        element = $bindable(),
         ...restProps
     }: NavbarProps = $props();
 
@@ -24,6 +25,6 @@
 
 <svelte:window bind:scrollY={scrollY}/>
 
-<nav class={combinedClass} {...restProps}>
+<nav class={combinedClass} {...restProps} bind:this={element}>
     {@render children?.()}
 </nav>

package/dist/components/navigation/Navbar/index.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { NavbarProps } from "./types.ts";
-declare const Index: import("svelte").Component<NavbarProps, {}, "">;
+declare const Index: import("svelte").Component<NavbarProps, {}, "element">;
 type Index = ReturnType<typeof Index>;
 export default Index;

package/dist/components/navigation/Navbar/types.d.ts

@@ -17,7 +17,7 @@ export interface NavbarSeparatorProps extends BaseComponentProps {
 }
 export interface NavbarDropdownProps extends BaseComponentProps {
     label?: string;
-    element?: Snippet;
+    navelement?: Snippet;
     classTop?: string;
     wrapperClass?: string;
     activeClass?: string;

package/dist/components/navigation/SideNavbar/index.svelte

@@ -8,6 +8,7 @@
     let { 
         children = undefined, 
         class: className = "", 
+        element = $bindable(),
         items = [],
         ...restProps
     }: SideNavbarProps = $props();
@@ -24,7 +25,7 @@
     ));
 </script>
 
-<nav class={combinedClass} {...restProps} onmouseenter={() => expanded = true} onmouseleave={() => expanded = false}>
+<nav class={combinedClass} {...restProps} onmouseenter={() => expanded = true} onmouseleave={() => expanded = false} bind:this={element}>
     {#each items as item}
         {@const isActive = page.url.pathname === item.href}
         <Button size="xs" class="{isActive ? 'bg-form-background text-main-text' : 'text-sub-text'} hover:text-main-text py-1 text-nowrap flex justify-start gap-2 overflow-hidden mx-1 w-[calc(100%-16px)] hover:bg-form-background px-1.5" href={item.href}>

package/dist/components/navigation/SideNavbar/index.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { SideNavbarProps } from "./types";
-declare const Index: import("svelte").Component<SideNavbarProps, {}, "">;
+declare const Index: import("svelte").Component<SideNavbarProps, {}, "element">;
 type Index = ReturnType<typeof Index>;
 export default Index;

package/dist/components/navigation/SideNavbar/types.d.ts

@@ -1,4 +1,4 @@
-import type { BaseComponentProps } from "$types/BaseComponent";
+import type { BaseComponentProps } from "../../../types/BaseComponent";
 import type { Component } from "svelte";
 export interface SideNavbarProps extends BaseComponentProps {
     items?: SideNavbarItem[];

package/dist/components/overlay/Tooltip/index.stories.svelte

@@ -2,7 +2,7 @@
 	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import Tooltip from "./index.svelte";
     import Button from "../../inputs/Button/index.svelte";
-    import { Text } from "$components/typography";
+    import { Text } from "../../typography";
 
 	const { Story } = defineMeta({
 		title: "Components/Overlay/Tooltip",

package/dist/components/overlay/Tooltip/index.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { TooltipPosition } from "$styles/posititon.js";
+    import type { TooltipPosition } from "../../../styles/posititon.js";
     import type { TooltipProps } from "./types.js";
     import { onMount, tick, type Snippet } from "svelte";
     import { fly } from "svelte/transition";
@@ -19,6 +19,7 @@
     let {
         text,
         position = "top",
+        element = $bindable(),
         delay = 150,
         interactive = false,
         children,
@@ -160,6 +161,7 @@
         class="z-999999 {interactive ? 'pointer-events-auto' : 'pointer-events-none'}"
         onmouseenter={onTooltipEnter}
         onmouseleave={onTooltipLeave}
+        bind:this={element}
     >
         <div
             bind:this={arrowEl}

package/dist/components/overlay/Tooltip/index.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { TooltipProps } from "./types.js";
-declare const Index: import("svelte").Component<TooltipProps, {}, "">;
+declare const Index: import("svelte").Component<TooltipProps, {}, "element">;
 type Index = ReturnType<typeof Index>;
 export default Index;

package/dist/components/typography/Text/index.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-    import { sizeStyleParts, textStyle, type SizeStyleTheme } from "$styles/size";
+    import { sizeStyleParts, textStyle, type SizeStyleTheme } from "../../../styles/size";
     import type { TextProps } from "./types.js";
     import { twMerge } from "tailwind-merge";
 
     let { 
         children = undefined, 
-        class: className = "", 
+        class: className = "",
+        element = $bindable(), 
         tag = "p",
         shrink = undefined,
         size = "none",
@@ -60,6 +61,6 @@
     ));
 </script>
 
-<svelte:element this={tag} style={shrinkStyle} class={combinedClass} {...restProps}>
+<svelte:element bind:this={element} this={tag} style={shrinkStyle} class={combinedClass} {...restProps}>
     {@render children?.()}
 </svelte:element>

package/dist/components/typography/Text/index.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { TextProps } from "./types.ts";
-declare const Index: import("svelte").Component<TextProps, {}, "">;
+declare const Index: import("svelte").Component<TextProps, {}, "element">;
 type Index = ReturnType<typeof Index>;
 export default Index;

package/dist/components/typography/Typewriter/index.svelte

@@ -8,6 +8,7 @@
     let { 
         actions, 
         class: className = "",
+        element = $bindable(),
         textClass = "",
         ...restProps
     }: TypewriterProps = $props();
@@ -65,7 +66,7 @@
     let combinedClass = $derived(twMerge("typewriter w-fit text-main-text", className));
 </script>
 
-<div class={combinedClass} {...restProps}>
+<div class={combinedClass} {...restProps} bind:this={element}>
     {#each displaySegments as segment}
         {#key segment}
             <Text tag="span" class={textClass} style="color: {segment.color}">{segment.text}</Text>

package/dist/components/typography/Typewriter/index.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { TypewriterProps } from "./types.ts";
-declare const Index: import("svelte").Component<TypewriterProps, {}, "">;
+declare const Index: import("svelte").Component<TypewriterProps, {}, "element">;
 type Index = ReturnType<typeof Index>;
 export default Index;

package/dist/types/BaseComponent.d.ts

@@ -1,8 +1,9 @@
-import type { SizeStyle } from "$styles/size";
+import type { SizeStyle } from "../styles/size";
 import type { Component } from "svelte";
 export interface BaseComponentProps {
     children?: any;
     class?: string;
+    element?: HTMLElement;
     [key: string]: any;
 }
 export type InputVariant = "default" | "floating";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@valerius_petrini/corekit-ui",
-	"version": "0.1.69",
+	"version": "0.1.71",
 	"description": "Component Library used across all my projects",
 	"author": "Valerius Petrini Jr.",
 	"license": "MIT",