@cloudparker/moldex.js 0.0.42 → 0.0.44

package/dist/views/core/button/components/button/button.svelte

@@ -6,7 +6,9 @@
 		| 'border'
 		| 'border-base'
 		| 'border-primary';
-	export type ButtonSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+	export type ButtonSizeType = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
 	export type ButtonPropsType = {
 		id?: string;
 		type?: 'button' | 'submit' | 'reset';
@@ -27,15 +29,20 @@
 		hasRipple?: boolean;
 		rippleColor?: string | 'light' | 'dark';
 		onClick?: (ev: MouseEvent) => void;
+		url?: string;
+		target?: string;
+		hasOpenInNew?: boolean;
+		openInNewIconClassName?: string;
+		openInNewIcon?: string;
 	};
 </script>
 
 <script lang="ts">
-	import '../../../../../tailwind.css';
 	import { ripple, type RipplePropsType } from '../../../../../actions/ripple.js';
-	import type { Snippet } from 'svelte';
+	import { Icon, mdiOpenInNew } from '../../../icon';
 	import { Spinner } from '../../../spinner';
-	import { Icon } from '../../../icon';
+	import type { Snippet } from 'svelte';
+	import '../../../../../tailwind.css';
 
 	let {
 		appearance = 'none',
@@ -56,7 +63,12 @@
 		children,
 		hasRipple = true,
 		rippleColor,
-		onClick = (ev: MouseEvent) => {}
+		onClick = (ev: MouseEvent) => {},
+		url,
+		target,
+		hasOpenInNew,
+		openInNewIconClassName,
+		openInNewIcon = mdiOpenInNew
 	}: ButtonPropsType = $props();
 
 	let btnAppearanceClassName = $derived.by(() => {
@@ -77,6 +89,8 @@
 
 	let btnSizeClassName = $derived.by(() => {
 		switch (size) {
+			case 'none':
+				return '';
 			case 'xs':
 				return 'px-1 py-0 text-xs';
 			case 'sm':
@@ -92,7 +106,7 @@
 		}
 	});
 
-	function maybeRipple(node: HTMLElement, options?: RipplePropsType) {
+	function handleRipple(node: HTMLElement, options?: RipplePropsType) {
 		if (hasRipple) {
 			options = options || { color: rippleColor };
 			return ripple(node, options);
@@ -120,18 +134,38 @@
 	{/if}
 {/snippet}
 
-<button
-	{id}
-	{type}
-	{form}
-	class="flex items-center justify-center gap-2 focus:outline-primary dark:focus:outline-primary rounded {btnSizeClassName} {btnAppearanceClassName} {className}"
-	onclick={onClick}
-	{disabled}
-	use:maybeRipple
->
-	{#if children}
-		{@render children()}
-	{:else}
-		{@render buttonContent()}
-	{/if}
-</button>
+{#if url}
+	<a
+		{id}
+		href={url}
+		{target}
+		class="relative flex items-center justify-center gap-2 focus:outline-primary dark:focus:outline-primary rounded {btnSizeClassName} {btnAppearanceClassName} {className}"
+		onclick={onClick}
+		use:handleRipple
+	>
+		{#if children}
+			{@render children()}
+		{:else}
+			{@render buttonContent()}
+		{/if}
+		{#if hasOpenInNew}
+			<Icon path={openInNewIcon} className=" {openInNewIconClassName}" sizeClassName="w-4 h-4" />
+		{/if}
+	</a>
+{:else}
+	<button
+		{id}
+		{type}
+		{form}
+		class="relative flex items-center justify-center gap-2 focus:outline-primary dark:focus:outline-primary rounded {btnSizeClassName} {btnAppearanceClassName} {className}"
+		onclick={onClick}
+		{disabled}
+		use:handleRipple
+	>
+		{#if children}
+			{@render children()}
+		{:else}
+			{@render buttonContent()}
+		{/if}
+	</button>
+{/if}

package/dist/views/core/button/components/button/button.svelte.d.ts

@@ -1,5 +1,5 @@
 export type ButtonAppearanceType = 'none' | 'primary' | 'base' | 'border' | 'border-base' | 'border-primary';
-export type ButtonSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type ButtonSizeType = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 export type ButtonPropsType = {
     id?: string;
     type?: 'button' | 'submit' | 'reset';
@@ -20,9 +20,14 @@ export type ButtonPropsType = {
     hasRipple?: boolean;
     rippleColor?: string | 'light' | 'dark';
     onClick?: (ev: MouseEvent) => void;
+    url?: string;
+    target?: string;
+    hasOpenInNew?: boolean;
+    openInNewIconClassName?: string;
+    openInNewIcon?: string;
 };
-import '../../../../../tailwind.css';
 import type { Snippet } from 'svelte';
+import '../../../../../tailwind.css';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/views/core/button/components/button-back/button-back.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { isSmallScreen } from '../../../../../services';
-	import { mdiArrowLeft, mdiChevronRight } from '../../../icon';
+	import { mdiArrowLeft } from '../../../icon';
 	import Button from '../button/button.svelte';
 
 	type PropsType = {
+		id?: string;
 		iconPath?: string;
 		iconClassName?: string;
 		className?: string;
@@ -12,6 +13,7 @@
 	};
 
 	let {
+		id,
 		iconPath = mdiArrowLeft,
 		iconClassName = '',
 		className = '',
@@ -28,8 +30,11 @@
 
 {#snippet button()}
 	<Button
+		{id}
+		appearance="none"
+		size="none"
 		{iconPath}
-		className="w-12 h-12 p-3 rounded-full hover:bg-gray-50 dark:hover:bg-gray-900 {className}"
+		className="w-12 h-12 rounded-full hover:bg-gray-50 dark:hover:bg-gray-900 {className}"
 		{iconClassName}
 		{onClick}
 	/>

package/dist/views/core/button/components/button-back/button-back.svelte.d.ts

@@ -12,6 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const ButtonBack: $$__sveltets_2_IsomorphicComponent<{
+    id?: string;
     iconPath?: string;
     iconClassName?: string;
     className?: string;

package/dist/views/core/button/components/button-close/button-close.svelte

@@ -4,4 +4,4 @@
 	let { className, ...props }: ButtonPropsType = $props();
 </script>
 
-<Button {...props} className="bg-gray-100 focus:bg-gray-200 p-2 px-4  {className}" />
+<Button {...props} size="none" className="bg-gray-100 focus:bg-gray-200 p-2 px-4  {className}" />

package/dist/views/core/button/components/button-close-icon/button-close-icon.svelte

@@ -4,7 +4,7 @@
 	import Button from '../button/button.svelte';
 
 	type PropsType = {
-		label?: string;
+		id?: string;
 		iconPath?: string;
 		iconClassName?: string;
 		className?: string;
@@ -14,7 +14,7 @@
 	};
 
 	let {
-		label = 'Close',
+		id,
 		iconPath = mdiClose,
 		iconClassName = '',
 		className = '',
@@ -31,6 +31,7 @@
 
 {#snippet button()}
 	<Button
+		{id}
 		{iconPath}
 		className="w-12 h-12 rounded-full text-gray-500 hover:text-gray-600 hover:bg-gray-50 {className}"
 		{iconClassName}

package/dist/views/core/button/components/button-close-icon/button-close-icon.svelte.d.ts

@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const ButtonCloseIcon: $$__sveltets_2_IsomorphicComponent<{
-    label?: string;
+    id?: string;
     iconPath?: string;
     iconClassName?: string;
     className?: string;

package/dist/views/core/icon/components/icon/icon.svelte

@@ -4,6 +4,7 @@
 	type IconPropsType = {
 		path: string;
 		className?: string;
+		sizeClassName?: string;
 		size?: number;
 		fill?: string;
 		viewBox?: string;
@@ -16,7 +17,8 @@
 		size = 24,
 		fill = 'currentColor',
 		viewBox = '',
-		color
+		color,
+		sizeClassName = 'w-6 h-6'
 	}: IconPropsType = $props();
 
 	$effect(() => {
@@ -24,6 +26,6 @@
 	});
 </script>
 
-<svg class="w-6 h-6 align-middle {className}" {viewBox} fill={color || fill}>
+<svg class="align-middle {sizeClassName} {className}" {viewBox} fill={color || fill}>
 	<path d={path} />
 </svg>

package/dist/views/core/icon/components/icon/icon.svelte.d.ts

@@ -15,6 +15,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const Icon: $$__sveltets_2_IsomorphicComponent<{
     path: string;
     className?: string;
+    sizeClassName?: string;
     size?: number;
     fill?: string;
     viewBox?: string;

package/dist/views/core/icon/services/icon-path-service.d.ts

@@ -19,3 +19,4 @@ export declare const mdiPageLast = "M5.59,7.41L10.18,12L5.59,16.59L7,18L13,12L7,
 export declare const mdiPhone = "M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z";
 export declare const mdiSquare = "M3,3V21H21V3";
 export declare const mdiUnfoldMoreHorizontal = "M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z";
+export declare const mdiOpenInNew = "M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z";

package/dist/views/core/icon/services/icon-path-service.js

@@ -20,3 +20,4 @@ export const mdiPageLast = "M5.59,7.41L10.18,12L5.59,16.59L7,18L13,12L7,6L5.59,7
 export const mdiPhone = "M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z";
 export const mdiSquare = "M3,3V21H21V3";
 export const mdiUnfoldMoreHorizontal = "M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z";
+export const mdiOpenInNew = "M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z";

package/dist/views/core/input/components/checkbox-field/checkbox-field.svelte

@@ -27,6 +27,16 @@
 		value = $bindable(false)
 	}: CheckboxPropsType = $props();
 
+	let inputRef: HTMLInputElement | null = $state(null);
+
+	export function getElement() {
+		return inputRef;
+	}
+
+	export function select() {
+		return inputRef && (inputRef as HTMLInputElement).select();
+	}
+
 	function handleChange(ev: Event) {
 		if (onChange) {
 			onChange(value);
@@ -48,12 +58,13 @@
 			{@render labelSnippet()}
 		{/if}
 		<input
+			bind:this={inputRef}
 			bind:checked={value}
 			id={id || name}
 			aria-describedby="comments-description"
 			name={name || id}
 			type="checkbox"
-			class="h-6 w-6 appearance-none rounded bg-base-200 dark:bg-base-700 dark:checked:bg-primary checked:bg-primary outline-primary border-base-300 dark:border-base-600   {className}"
+			class="h-6 w-6 appearance-none rounded bg-base-200 dark:bg-base-700 dark:checked:bg-primary checked:bg-primary outline-primary border-base-300 dark:border-base-600 {className}"
 			onchange={(ev) => handleChange(ev)}
 		/>
 		{#if position == 'left'}

package/dist/views/core/input/components/checkbox-field/checkbox-field.svelte.d.ts

@@ -25,6 +25,9 @@ declare const CheckboxField: $$__sveltets_2_IsomorphicComponent<{
     value?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "value">;
+}, {}, {
+    getElement: () => HTMLInputElement | null;
+    select: () => void | null;
+}, "value">;
 type CheckboxField = InstanceType<typeof CheckboxField>;
 export default CheckboxField;

package/dist/views/core/input/components/color-field/color-field.svelte

@@ -19,10 +19,18 @@
 	let btnRoundedClassName: string = $state('');
 	let colorValue: string = $state('#000000');
 
-	let inputFieldRef: InputField | null = $state(null);
+	let inputRef: InputField | null = $state(null);
 
 	export function focus() {
-		inputFieldRef?.focus();
+		inputRef?.focus();
+	}
+
+	export function getElement() {
+		return inputRef;
+	}
+
+	export function select() {
+		return inputRef && (inputRef as InputField).select();
 	}
 
 	function handleColorBtnClick() {
@@ -91,7 +99,7 @@
 		type="text"
 		{id}
 		{name}
-		bind:this={inputFieldRef}
+		bind:this={inputRef}
 		className="pr-8 {props?.className}"
 		rightSnippet={colorButton}
 		maxlength={9}

package/dist/views/core/input/components/color-field/color-field.svelte.d.ts

@@ -1,3 +1,4 @@
+import { SvelteComponent } from "svelte";
 import { type InputFieldPropsType } from '../input-field/input-field.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -18,6 +19,16 @@ declare const ColorField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;
+    getElement: () => (SvelteComponent<InputFieldPropsType, {
+        [evt: string]: CustomEvent<any>;
+    }, {}> & {
+        $$bindings?: "value" | undefined;
+    } & {
+        focus: () => void;
+        getElement: () => HTMLInputElement | HTMLTextAreaElement | null;
+        select: () => void | null;
+    }) | null;
+    select: () => void | null;
 }, "value">;
 type ColorField = InstanceType<typeof ColorField>;
 export default ColorField;

package/dist/views/core/input/components/combobox-field/combobox-field.svelte

@@ -335,7 +335,7 @@
 		{#if hasComboboxIcon}
 			<Icon
 				path={comboboxIconPath}
-				className=" text-gray-500 {comboboxIconSizeClassName} {comboboxIconClassName}"
+				className=" text-base-500 {comboboxIconSizeClassName} {comboboxIconClassName}"
 			/>
 		{/if}
 	</div>
@@ -348,13 +348,13 @@
 		<div class="flex items-center {displayClassName}" title={displayItemsTitle}>
 			{#each displayItems?.slice(0, displayItemsCount) as item, index}
 				<div
-					class="inline-flex items-center bg-gray-200 text-gray-700 text-sm font-medium px-2 mx-1 rounded-full text-nowrap {chipClassName}"
+					class="inline-flex items-center bg-base-200 text-base-700 text-sm font-medium px-2 mx-1 rounded-full text-nowrap {chipClassName}"
 				>
 					{item}
 				</div>
 			{/each}
 			{#if displayItemsCount && displayItems?.length > (displayItemsCount || 1)}
-				<div class="px-2 text-gray-400">+ {displayItems?.length - (displayItemsCount || 1)}</div>
+				<div class="px-2 text-base-400">+ {displayItems?.length - (displayItemsCount || 1)}</div>
 			{/if}
 		</div>
 	{:else}
@@ -371,7 +371,7 @@
 		value={_value}
 		type="text"
 		role="combobox"
-		onclick={handleInputClick}
+		onClick={handleInputClick}
 		className="pr-8 text-transparent {className}"
 		rightSnippet={rightIcon}
 		rightSnippetContainerClassName="pointer-events-none"
@@ -382,7 +382,7 @@
 		{appearance}
 		ariaControls="options"
 		ariaExpanded={isPlaced}
-		onkeydown={handleKeyDown}
+		onKeyDown={handleKeyDown}
 		contentSnippet={comboboxContentSnippet}
 		title={displayItemsTitle || ''}
 	/>

package/dist/views/core/input/components/date-field/date-field.svelte

@@ -8,6 +8,14 @@
 	export function focus() {
 		inputFieldRef?.focus();
 	}
+
+	export function getElement(){
+		return inputFieldRef;
+	}
+
+	export function select(){
+		  inputFieldRef && inputFieldRef.select();
+	}
 </script>
 
 <InputField bind:this={inputFieldRef} {...props} type="date" bind:value />

package/dist/views/core/input/components/date-field/date-field.svelte.d.ts

@@ -1,3 +1,4 @@
+import { SvelteComponent } from "svelte";
 import { type InputFieldPropsType } from '../input-field/input-field.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -16,6 +17,16 @@ declare const DateField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType,
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;
+    getElement: () => (SvelteComponent<InputFieldPropsType, {
+        [evt: string]: CustomEvent<any>;
+    }, {}> & {
+        $$bindings?: "value" | undefined;
+    } & {
+        focus: () => void;
+        getElement: () => HTMLInputElement | HTMLTextAreaElement | null;
+        select: () => void | null;
+    }) | null;
+    select: () => void;
 }, "value">;
 type DateField = InstanceType<typeof DateField>;
 export default DateField;

package/dist/views/core/input/components/datetime-field/datetime-field.svelte

@@ -8,6 +8,14 @@
 	export function focus() {
 		inputFieldRef?.focus();
 	}
+
+	export function getElement(){
+		return inputFieldRef;
+	}
+
+	export function select(){
+		  inputFieldRef && inputFieldRef.select();
+	}
 </script>
 
 <InputField bind:this={inputFieldRef} {...props} type="datetime-local" bind:value />

package/dist/views/core/input/components/datetime-field/datetime-field.svelte.d.ts

@@ -1,3 +1,4 @@
+import { SvelteComponent } from "svelte";
 import { type InputFieldPropsType } from '../input-field/input-field.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -16,6 +17,16 @@ declare const DatetimeField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsT
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;
+    getElement: () => (SvelteComponent<InputFieldPropsType, {
+        [evt: string]: CustomEvent<any>;
+    }, {}> & {
+        $$bindings?: "value" | undefined;
+    } & {
+        focus: () => void;
+        getElement: () => HTMLInputElement | HTMLTextAreaElement | null;
+        select: () => void | null;
+    }) | null;
+    select: () => void;
 }, "value">;
 type DatetimeField = InstanceType<typeof DatetimeField>;
 export default DatetimeField;

package/dist/views/core/input/components/email-field/email-field.svelte

@@ -7,6 +7,14 @@
 	export function focus() {
 		inputFieldRef?.focus();
 	}
+
+	export function getElement(){
+		return inputFieldRef;
+	}
+
+	export function select(){
+		  inputFieldRef && inputFieldRef.select();
+	}
 </script>
 
 <InputField

package/dist/views/core/input/components/email-field/email-field.svelte.d.ts

@@ -1,3 +1,4 @@
+import { SvelteComponent } from "svelte";
 import { type InputFieldPropsType } from '../input-field/input-field.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -16,6 +17,16 @@ declare const EmailField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;
+    getElement: () => (SvelteComponent<InputFieldPropsType, {
+        [evt: string]: CustomEvent<any>;
+    }, {}> & {
+        $$bindings?: "value" | undefined;
+    } & {
+        focus: () => void;
+        getElement: () => HTMLInputElement | HTMLTextAreaElement | null;
+        select: () => void | null;
+    }) | null;
+    select: () => void;
 }, "value">;
 type EmailField = InstanceType<typeof EmailField>;
 export default EmailField;

package/dist/views/core/input/components/file-field/file-field.svelte

@@ -29,6 +29,14 @@
 		inputFieldRef?.focus();
 	}
 
+	export function getElement(){
+		return inputFieldRef;
+	}
+
+	export function select(){
+		  inputFieldRef && inputFieldRef.select();
+	}
+
 	async function handleFileAttachment() {
 		let res: File | File[] = await openFilePicker({ accept, multiple });
 		if (res) {

package/dist/views/core/input/components/file-field/file-field.svelte.d.ts

@@ -1,3 +1,4 @@
+import { SvelteComponent } from "svelte";
 import { type InputFieldPropsType } from '../input-field/input-field.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -20,6 +21,16 @@ declare const FileField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;
+    getElement: () => (SvelteComponent<InputFieldPropsType, {
+        [evt: string]: CustomEvent<any>;
+    }, {}> & {
+        $$bindings?: "value" | undefined;
+    } & {
+        focus: () => void;
+        getElement: () => HTMLInputElement | HTMLTextAreaElement | null;
+        select: () => void | null;
+    }) | null;
+    select: () => void;
 }, "value">;
 type FileField = InstanceType<typeof FileField>;
 export default FileField;

package/dist/views/core/input/components/input-field/input-field.svelte

@@ -47,20 +47,20 @@
 		multiple?: boolean;
 		name?: string;
 		title?: string;
-		onblur?: (ev: any) => void;
-		onchange?: (ev: any) => void;
-		onclick?: (ev: MouseEvent) => void;
-		ondblclick?: (ev: MouseEvent) => void;
-		ondrag?: (ev: DragEvent) => void;
-		ondragover?: (ev: DragEvent) => void;
-		ondrop?: (ev: DragEvent) => void;
-		onfocus?: (ev: any) => void;
-		oninput?: (ev: any) => void;
-		onkeydown?: (ev: KeyboardEvent) => void;
-		onkeypress?: (ev: KeyboardEvent) => void;
-		onkeyup?: (ev: KeyboardEvent) => void;
-		onmousedown?: (ev: MouseEvent) => void;
-		onmouseup?: (ev: MouseEvent) => void;
+		onBlur?: (ev: any) => void;
+		onChange?: (ev: any) => void;
+		onClick?: (ev: MouseEvent) => void;
+		onDblClick?: (ev: MouseEvent) => void;
+		onDrag?: (ev: DragEvent) => void;
+		onDragOver?: (ev: DragEvent) => void;
+		onDrop?: (ev: DragEvent) => void;
+		onFocus?: (ev: any) => void;
+		onInput?: (ev: any) => void;
+		onKeyDown?: (ev: KeyboardEvent) => void;
+		onKeyPress?: (ev: KeyboardEvent) => void;
+		onKeyUp?: (ev: KeyboardEvent) => void;
+		onMouseDown?: (ev: MouseEvent) => void;
+		onMouseUp?: (ev: MouseEvent) => void;
 		pattern?: string;
 		placeholder?: string;
 		readonly?: boolean;
@@ -108,20 +108,20 @@
 		multiple = false,
 		name = '',
 		title,
-		onblur,
-		onchange,
-		onclick,
-		ondblclick,
-		ondrag,
-		ondragover,
-		ondrop,
-		onfocus,
-		oninput,
-		onkeydown,
-		onkeypress,
-		onkeyup,
-		onmousedown,
-		onmouseup,
+		onBlur,
+		onChange,
+		onClick,
+		onDblClick,
+		onDrag,
+		onDragOver,
+		onDrop,
+		onFocus,
+		onInput,
+		onKeyDown,
+		onKeyPress,
+		onKeyUp,
+		onMouseDown,
+		onMouseUp,
 		pattern,
 		placeholder = '',
 		readonly = false,
@@ -138,7 +138,7 @@
 		value = $bindable()
 	}: InputFieldPropsType = $props();
 
-	let inputRef: HTMLInputElement | HTMLTextAreaElement | HTMLButtonElement | null = $state(null);
+	let inputRef: HTMLInputElement | HTMLTextAreaElement | null = $state(null);
 
 	let sizeClassName = $state('');
 	let appearanceClassName = $state('');
@@ -150,6 +150,14 @@
 		inputRef && inputRef.focus();
 	}
 
+	export function getElement() {
+		return inputRef;
+	}
+
+	export function select() {
+		return inputRef && (inputRef as HTMLInputElement).select();
+	}
+
 	$effect(() => {
 		if (floatingLabel || leftSnippet != null || rightSnippet != null) {
 			containerClassName = (containerClassName || '') + ' relative';
@@ -292,20 +300,20 @@
 			{minlength}
 			{rows}
 			{cols}
-			{onchange}
-			{oninput}
-			{onfocus}
-			{onblur}
-			{ondblclick}
-			{onclick}
-			{onmousedown}
-			{onmouseup}
-			{onkeydown}
-			{onkeyup}
-			{onkeypress}
-			{ondrop}
-			{ondrag}
-			{ondragover}
+			onchange={onChange}
+			oninput={onInput}
+			onfocus={onFocus}
+			onblur={onBlur}
+			ondblclick={onDblClick}
+			onclick={onClick}
+			onmousedown={onMouseDown}
+			onmouseup={onMouseUp}
+			onkeydown={onKeyDown}
+			onkeyup={onKeyUp}
+			onkeypress={onKeyPress}
+			ondrop={onDrop}
+			ondrag={onDrag}
+			ondragover={onDragOver}
 		></textarea>
 	{:else}
 		<input
@@ -328,20 +336,20 @@
 			{pattern}
 			{multiple}
 			{role}
-			{onchange}
-			{oninput}
-			{onfocus}
-			{onblur}
-			{ondblclick}
-			{onclick}
-			{onmousedown}
-			{onmouseup}
-			{onkeydown}
-			{onkeyup}
-			{onkeypress}
-			{ondrop}
-			{ondrag}
-			{ondragover}
+			onchange={onChange}
+			oninput={onInput}
+			onfocus={onFocus}
+			onblur={onBlur}
+			ondblclick={onDblClick}
+			onclick={onClick}
+			onmousedown={onMouseDown}
+			onmouseup={onMouseUp}
+			onkeydown={onKeyDown}
+			onkeyup={onKeyUp}
+			onkeypress={onKeyPress}
+			ondrop={onDrop}
+			ondrag={onDrag}
+			ondragover={onDragOver}
 			aria-controls={ariaControls}
 			aria-expanded={ariaExpanded}
 		/>

package/dist/views/core/input/components/input-field/input-field.svelte.d.ts

@@ -28,20 +28,20 @@ export type InputFieldPropsType = {
     multiple?: boolean;
     name?: string;
     title?: string;
-    onblur?: (ev: any) => void;
-    onchange?: (ev: any) => void;
-    onclick?: (ev: MouseEvent) => void;
-    ondblclick?: (ev: MouseEvent) => void;
-    ondrag?: (ev: DragEvent) => void;
-    ondragover?: (ev: DragEvent) => void;
-    ondrop?: (ev: DragEvent) => void;
-    onfocus?: (ev: any) => void;
-    oninput?: (ev: any) => void;
-    onkeydown?: (ev: KeyboardEvent) => void;
-    onkeypress?: (ev: KeyboardEvent) => void;
-    onkeyup?: (ev: KeyboardEvent) => void;
-    onmousedown?: (ev: MouseEvent) => void;
-    onmouseup?: (ev: MouseEvent) => void;
+    onBlur?: (ev: any) => void;
+    onChange?: (ev: any) => void;
+    onClick?: (ev: MouseEvent) => void;
+    onDblClick?: (ev: MouseEvent) => void;
+    onDrag?: (ev: DragEvent) => void;
+    onDragOver?: (ev: DragEvent) => void;
+    onDrop?: (ev: DragEvent) => void;
+    onFocus?: (ev: any) => void;
+    onInput?: (ev: any) => void;
+    onKeyDown?: (ev: KeyboardEvent) => void;
+    onKeyPress?: (ev: KeyboardEvent) => void;
+    onKeyUp?: (ev: KeyboardEvent) => void;
+    onMouseDown?: (ev: MouseEvent) => void;
+    onMouseUp?: (ev: MouseEvent) => void;
     pattern?: string;
     placeholder?: string;
     readonly?: boolean;
@@ -76,6 +76,8 @@ declare const InputField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;
+    getElement: () => HTMLInputElement | HTMLTextAreaElement | null;
+    select: () => void | null;
 }, "value">;
 type InputField = InstanceType<typeof InputField>;
 export default InputField;

package/dist/views/core/input/components/number-field/number-field.svelte

@@ -8,6 +8,14 @@
 	export function focus() {
 		inputFieldRef?.focus();
 	}
+
+	export function getElement(){
+		return inputFieldRef;
+	}
+
+	export function select(){
+		  inputFieldRef && inputFieldRef.select();
+	}
 </script>
 
 <InputField bind:this={inputFieldRef} {...props} type="number" bind:value />

package/dist/views/core/input/components/number-field/number-field.svelte.d.ts

@@ -1,3 +1,4 @@
+import { SvelteComponent } from "svelte";
 import { type InputFieldPropsType } from '../input-field/input-field.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -16,6 +17,16 @@ declare const NumberField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsTyp
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;
+    getElement: () => (SvelteComponent<InputFieldPropsType, {
+        [evt: string]: CustomEvent<any>;
+    }, {}> & {
+        $$bindings?: "value" | undefined;
+    } & {
+        focus: () => void;
+        getElement: () => HTMLInputElement | HTMLTextAreaElement | null;
+        select: () => void | null;
+    }) | null;
+    select: () => void;
 }, "value">;
 type NumberField = InstanceType<typeof NumberField>;
 export default NumberField;

package/dist/views/core/input/components/password-field/password-field.svelte

@@ -28,6 +28,14 @@
 		inputFieldRef?.focus();
 	}
 
+	export function getElement(){
+		return inputFieldRef;
+	}
+
+	export function select(){
+		  inputFieldRef && inputFieldRef.select();
+	}
+
 	function handleTogglePassword() {
 		if (type == 'password') {
 			type = 'text';
@@ -66,7 +74,7 @@
 	<button
 		id="btn-eye-{name || id}"
 		type="button"
-		class="px-3 h-full hover:bg-gray-100 focus:outline-primary {btnRoundedClassName} {buttonClassName}"
+		class="px-3 h-full hover:bg-base-100 focus:outline-primary {btnRoundedClassName} {buttonClassName}"
 		use:ripple
 		onclick={handleTogglePassword}
 	>

package/dist/views/core/input/components/password-field/password-field.svelte.d.ts

@@ -1,3 +1,4 @@
+import { SvelteComponent } from "svelte";
 import { type InputFieldPropsType } from '../input-field/input-field.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -19,6 +20,16 @@ declare const PasswordField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsT
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;
+    getElement: () => (SvelteComponent<InputFieldPropsType, {
+        [evt: string]: CustomEvent<any>;
+    }, {}> & {
+        $$bindings?: "value" | undefined;
+    } & {
+        focus: () => void;
+        getElement: () => HTMLInputElement | HTMLTextAreaElement | null;
+        select: () => void | null;
+    }) | null;
+    select: () => void;
 }, "value">;
 type PasswordField = InstanceType<typeof PasswordField>;
 export default PasswordField;

package/dist/views/core/input/components/phone-field/phone-field.svelte

@@ -79,6 +79,14 @@
 		inputFieldRef?.focus();
 	}
 
+	export function getElement(){
+		return inputFieldRef;
+	}
+
+	export function select(){
+		  inputFieldRef && inputFieldRef.select();
+	}
+
 	function formatDialCode(dialcode: string) {
 		dialcode = `${dialCode}`.trim();
 		if (!dialCode.startsWith('+')) {
@@ -202,6 +210,6 @@
 	{floatingLabel}
 	className="pl-16  {className}"
 	labelClassName=" {floatingLabel ? 'peer-placeholder-shown:ps-16' : ''} {labelClassName}"
-	oninput={handleNumberInput}
-	onkeydown={handleNumberKeyDown}
+	onInput={handleNumberInput}
+	onKeyDown={handleNumberKeyDown}
 />

package/dist/views/core/input/components/phone-field/phone-field.svelte.d.ts

@@ -1,3 +1,4 @@
+import { SvelteComponent } from "svelte";
 export type LibPhoneNumberParseType = {
     isValid: () => boolean;
     nationalNumber: string;
@@ -40,6 +41,16 @@ declare const PhoneField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;
+    getElement: () => (SvelteComponent<InputFieldPropsType, {
+        [evt: string]: CustomEvent<any>;
+    }, {}> & {
+        $$bindings?: "value" | undefined;
+    } & {
+        focus: () => void;
+        getElement: () => HTMLInputElement | HTMLTextAreaElement | null;
+        select: () => void | null;
+    }) | null;
+    select: () => void;
 }, "value" | "dialCode">;
 type PhoneField = InstanceType<typeof PhoneField>;
 export default PhoneField;

package/dist/views/core/input/components/radio-field/radio-field.svelte

@@ -46,6 +46,7 @@
 		descClassName,
 		onChange
 	}: RadioPropsType = $props();
+ 
 
 	let hasPrimitiveItemsData = $derived.by(() => {
 		if (items?.length) {
@@ -75,7 +76,7 @@
 		}
 		return [];
 	});
-
+ 
 	function handleChange(ev: Event, item: RadioItemType) {
 		value = item.value;
 		if (onChange && value) {

package/dist/views/core/input/components/range-field/range-field.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import InputField, {
-		type InputFieldSizeType
-	} from '../input-field/input-field.svelte';
+	import InputField, { type InputFieldSizeType } from '../input-field/input-field.svelte';
 
 	type RangeFieldPropsType = {
 		id?: string;
@@ -33,7 +31,7 @@
 
 	let rangeSizeClassName = $state('');
 
-	 	$effect(() => {
+	$effect(() => {
 		switch (size) {
 			case 'lg':
 				rangeSizeClassName = 'h-3 ';
@@ -49,9 +47,25 @@
 				break;
 		}
 	});
+
+	let inputRef: HTMLInputElement | null = $state(null);
+
+	export function getElement() {
+		return inputRef;
+	}
+
+	export function focus() {
+		return inputRef && inputRef.focus();
+	}
+
+	export function select() {
+		return inputRef && inputRef.select();
+	}
 </script>
 
 <input
+	bind:this={inputRef}
+	bind:value
 	{id}
 	{name}
 	type="range"
@@ -59,8 +73,7 @@
 	{min}
 	{max}
 	{step}
-	bind:value
-	{oninput} 
+	{oninput}
 	{onfocus}
 	{onblur}
 />

package/dist/views/core/input/components/range-field/range-field.svelte.d.ts

@@ -26,6 +26,10 @@ declare const RangeField: $$__sveltets_2_IsomorphicComponent<{
     onblur?: (ev: any) => void;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "value">;
+}, {}, {
+    getElement: () => HTMLInputElement | null;
+    focus: () => void | null;
+    select: () => void | null;
+}, "value">;
 type RangeField = InstanceType<typeof RangeField>;
 export default RangeField;

package/dist/views/core/input/components/search-field/search-field.svelte

@@ -7,10 +7,13 @@
 		className,
 		placeholder,
 		iconClassName,
-value=$bindable(''),
+		value = $bindable(''),
 		onSearch,
 		...props
-	}: InputFieldPropsType & { iconClassName?: string; onSearch?: (value: string) => void } = $props();
+	}: InputFieldPropsType & {
+		iconClassName?: string;
+		onSearch?: (value: string) => void;
+	} = $props();
 
 	const debouncedSearch = debounce(search, 300);
 	let lastQuery: string;
@@ -21,6 +24,13 @@ value=$bindable(''),
 		inputFieldRef?.focus();
 	}
 
+	export function getElement() {
+		return inputFieldRef;
+	}
+	export function select() {
+		inputFieldRef && inputFieldRef.select();
+	}
+
 	function handleInput(ev: any) {
 		// console.log(ev);
 		let input: HTMLInputElement = ev?.target;
@@ -56,13 +66,13 @@ value=$bindable(''),
 	<Icon path={mdiMagnify} className="mx-3 text-gray-400 {iconClassName}"></Icon>
 {/snippet}
 <InputField
+	bind:value
 	bind:this={inputFieldRef}
 	{...props}
 	type="search"
 	maxlength={props?.maxlength || 200}
 	leftSnippet={searchIcon}
-	className=" pl-12 {className}"
+	className="pl-12 {className}"
 	{placeholder}
-	oninput={handleInput}
-	bind:value
+	onInput={handleInput}
 />

package/dist/views/core/input/components/search-field/search-field.svelte.d.ts

@@ -1,3 +1,4 @@
+import { SvelteComponent } from "svelte";
 import { type InputFieldPropsType } from '../input-field/input-field.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -19,6 +20,16 @@ declare const SearchField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsTyp
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;
+    getElement: () => (SvelteComponent<InputFieldPropsType, {
+        [evt: string]: CustomEvent<any>;
+    }, {}> & {
+        $$bindings?: "value" | undefined;
+    } & {
+        focus: () => void;
+        getElement: () => HTMLInputElement | HTMLTextAreaElement | null;
+        select: () => void | null;
+    }) | null;
+    select: () => void;
 }, "value">;
 type SearchField = InstanceType<typeof SearchField>;
 export default SearchField;

package/dist/views/core/input/components/text-field/text-field.svelte

@@ -9,6 +9,14 @@
 	export function focus() {
 		inputFieldRef?.focus();
 	}
+
+	export function getElement(){
+		return inputFieldRef;
+	}
+
+	export function select(){
+		return inputFieldRef && inputFieldRef.select();
+	}
 </script>
 
 <InputField

package/dist/views/core/input/components/text-field/text-field.svelte.d.ts

@@ -1,3 +1,4 @@
+import { SvelteComponent } from "svelte";
 import { type InputFieldPropsType } from '../input-field/input-field.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -16,6 +17,16 @@ declare const TextField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType,
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;
+    getElement: () => (SvelteComponent<InputFieldPropsType, {
+        [evt: string]: CustomEvent<any>;
+    }, {}> & {
+        $$bindings?: "value" | undefined;
+    } & {
+        focus: () => void;
+        getElement: () => HTMLInputElement | HTMLTextAreaElement | null;
+        select: () => void | null;
+    }) | null;
+    select: () => void | null;
 }, "value">;
 type TextField = InstanceType<typeof TextField>;
 export default TextField;

package/dist/views/core/input/components/textarea-field/textarea-field.svelte

@@ -7,6 +7,14 @@
 	export function focus() {
 		inputFieldRef?.focus();
 	}
+
+	export function getElement(){
+		return inputFieldRef;
+	}
+
+	export function select(){
+		return inputFieldRef && inputFieldRef.select();
+	}
 </script>
 
 <InputField

package/dist/views/core/input/components/textarea-field/textarea-field.svelte.d.ts

@@ -1,3 +1,4 @@
+import { SvelteComponent } from "svelte";
 import { type InputFieldPropsType } from '../input-field/input-field.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -16,6 +17,16 @@ declare const TextareaField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsT
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;
+    getElement: () => (SvelteComponent<InputFieldPropsType, {
+        [evt: string]: CustomEvent<any>;
+    }, {}> & {
+        $$bindings?: "value" | undefined;
+    } & {
+        focus: () => void;
+        getElement: () => HTMLInputElement | HTMLTextAreaElement | null;
+        select: () => void | null;
+    }) | null;
+    select: () => void | null;
 }, "value">;
 type TextareaField = InstanceType<typeof TextareaField>;
 export default TextareaField;

package/dist/views/core/input/components/time-field/time-field.svelte

@@ -7,6 +7,14 @@
 	export function focus() {
 		inputFieldRef?.focus();
 	}
+
+	export function getElement(){
+		return inputFieldRef;
+	}
+
+	export function select(){
+		return inputFieldRef && inputFieldRef.select();
+	}
 </script>
 
 <InputField bind:this={inputFieldRef} {...props} type="time" bind:value />

package/dist/views/core/input/components/time-field/time-field.svelte.d.ts

@@ -1,3 +1,4 @@
+import { SvelteComponent } from "svelte";
 import { type InputFieldPropsType } from '../input-field/input-field.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -16,6 +17,16 @@ declare const TimeField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType,
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;
+    getElement: () => (SvelteComponent<InputFieldPropsType, {
+        [evt: string]: CustomEvent<any>;
+    }, {}> & {
+        $$bindings?: "value" | undefined;
+    } & {
+        focus: () => void;
+        getElement: () => HTMLInputElement | HTMLTextAreaElement | null;
+        select: () => void | null;
+    }) | null;
+    select: () => void | null;
 }, "value">;
 type TimeField = InstanceType<typeof TimeField>;
 export default TimeField;

package/dist/views/core/navbar/components/navbar/navbar.svelte

@@ -6,6 +6,7 @@
 	import '../../../../../tailwind.css';
 
 	type PropsType = {
+		disabledLogo?: boolean;
 		backIconPath?: string;
 		backButtonClassName?: string;
 		centerContainerClassName?: string;
@@ -40,6 +41,7 @@
 	};
 
 	let {
+		disabledLogo,
 		backButtonClassName,
 		backIconPath,
 		centerContainerClassName = '',
@@ -91,7 +93,7 @@
 			<button
 				type="button"
 				class="h-full px-2 text-base-800 dark:text-base-100 {drawerButtonClassName}"
-				disabled={!onMore}
+				disabled={disabledLogo}
 				onclick={onMore}
 			>
 				<Icon path={moreIconPath} />

package/dist/views/core/navbar/components/navbar/navbar.svelte.d.ts

@@ -14,6 +14,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const Navbar: $$__sveltets_2_IsomorphicComponent<{
+    disabledLogo?: boolean;
     backIconPath?: string;
     backButtonClassName?: string;
     centerContainerClassName?: string;

package/dist/views/core/pagination/components/pagination/pagination.svelte

@@ -100,11 +100,11 @@
 	});
 </script>
 
-{#snippet pageButton({ onclick, disabled, icon }: any)}
+{#snippet pageButton({ onClick, disabled, icon }: any)}
 	<Button
 		className="hover:bg-gray-100 p-1 px-2 outline-none focus:bg-gray-200 disabled:bg-white disabled:text-gray-400 rounded"
 		{disabled}
-		{onclick}
+		onClick={onClick}
 		iconPath={icon}
 	/>
 {/snippet}
@@ -116,7 +116,7 @@
 		<div class="">
 			<ButtonMenu
 				className="px-3 py-2 rounded hover:bg-gray-100 outline-none focus:bg-gray-200"
-				label={pageSize}
+				title={pageSize}
 				dropdownClassName="w-20"
 			>
 				{#each pageSizeOptions as opt, index (index)}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cloudparker/moldex.js",
-    "version": "0.0.42",
+    "version": "0.0.44",
     "author": "cloudparker.com",
     "license": "MIT",
     "keywords": [