tera-system-ui 0.0.38 → 0.0.41

package/dist/components/avatar/Avatar.svelte.d.ts

@@ -1,4 +1,3 @@
 import { type AvatarProps } from "./Avatar";
 declare const Avatar: import("svelte").Component<AvatarProps, {}, "ref">;
-type Avatar = ReturnType<typeof Avatar>;
 export default Avatar;

package/dist/components/brand-logo/BrandLogo.svelte.d.ts

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

package/dist/components/button/Button.svelte.d.ts

@@ -2,5 +2,4 @@ import { type ButtonProps } from "./Button";
 declare const Button: import("svelte").Component<ButtonProps & {
     ref: HTMLButtonElement;
 }, {}, "ref">;
-type Button = ReturnType<typeof Button>;
 export default Button;

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

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

package/dist/components/command/command.js

@@ -284,9 +284,9 @@ export function createCommand(props) {
         // console.log('validItems', validItems)
         // console.log(validItems)
         // console.log(scores)
-        console.log(validItems.map(i => {
-            return scores.get(i.getAttribute('id') ?? '');
-        }));
+        // console.log(validItems.map(i => {
+        // 	return scores.get(i.getAttribute('id') ?? '');
+        // }))
         for (const item of validItems) {
             const group = item.closest(GROUP_ITEMS_SELECTOR);
             const closest = item.closest(`${GROUP_ITEMS_SELECTOR} > *`);

package/dist/components/command/components/Command.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
     import {addEventListener, executeCallbacks, srOnlyStyles, styleToString} from '../../../internal';
 
-    import {createCommand} from '../command';
-    import type {CommandProps} from '../types';
+    import {createCommand} from '../command.js';
+    import type {CommandProps} from '../types.js';
 
     let {
         children,

package/dist/components/command/components/Command.svelte.d.ts

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

package/dist/components/command/components/CommandEmpty.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import {getState} from '../command';
-    import type {EmptyProps} from '../types';
+    import {getState} from '../command.js';
+    import type {EmptyProps} from '../types.js';
     import {derived} from "svelte/store";
     import {onMount} from "svelte";
 

package/dist/components/command/components/CommandEmpty.svelte.d.ts

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

package/dist/components/command/components/CommandGroup.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-    import {generateId} from '../../../internal';
+    import {generateId} from '../../../internal/index.js';
     import {derived} from 'svelte/store';
-    import {createGroup, getCtx, getState, VALUE_ATTR} from '../command';
-    import type {GroupProps} from '../types';
+    import {createGroup, getCtx, getState, VALUE_ATTR} from '../command.js';
+    import type {GroupProps} from '../types.js';
     import {onMount} from 'svelte';
 
     type $$Props = GroupProps;

package/dist/components/command/components/CommandGroup.svelte.d.ts

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

package/dist/components/command/components/CommandInput.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
     import {derived, get} from 'svelte/store';
-    import {getCtx, getState, ITEM_SELECTOR, VALUE_ATTR} from '../command';
-    import {isBrowser} from '../../../internal';
-    import type {InputEvents, InputProps} from '../types';
-    import {sleep} from '../../../internal/helpers/sleep';
+    import {getCtx, getState, ITEM_SELECTOR, VALUE_ATTR} from '../command.js';
+    import {isBrowser} from '../../../internal/index.js';
+    import type {InputEvents, InputProps} from '../types.js';
+    import {sleep} from '../../../internal/helpers/sleep.js';
     import {styles} from "../../input/Input";
     import {IconSearch} from "../../..";
 
@@ -40,7 +40,6 @@
         if (autofocus) {
             sleep(200).then(() => {
                 node.focus()
-                console.log('CommandInput autofocus')
             });
         }
     }

package/dist/components/command/components/CommandInput.svelte.d.ts

@@ -1,8 +1,7 @@
 declare const CommandInput: import("svelte").Component<{
     el?: HTMLInputElement;
     asChild?: boolean;
-} & import("svelte/elements").HTMLInputAttributes & {
+} & import("svelte/elements.js").HTMLInputAttributes & {
     el?: HTMLElement;
 }, {}, "value">;
-type CommandInput = ReturnType<typeof CommandInput>;
 export default CommandInput;

package/dist/components/command/components/CommandItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-    import {addEventListener, executeCallbacks, generateId, isUndefined} from '../../../internal';
-    import {getCtx, getGroup, getState, VALUE_ATTR} from '../command';
-    import type {ItemProps} from '../types';
+    import {addEventListener, executeCallbacks, generateId, isUndefined} from '../../../internal/index.js';
+    import {getCtx, getGroup, getState, VALUE_ATTR} from '../command.js';
+    import type {ItemProps} from '../types.js';
     import {derived} from 'svelte/store';
     import {onMount} from "svelte";
 

package/dist/components/command/components/CommandItem.svelte.d.ts

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

package/dist/components/command/components/CommandList.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-    import {isHTMLElement} from '../../../internal';
-    import {getCtx, getState} from '../command';
-    import type {ListProps} from '../types';
+    import {isHTMLElement} from '../../../internal/index.js';
+    import {getCtx, getState} from '../command.js';
+    import type {ListProps} from '../types.js';
 
     const {ids} = getCtx();
     const commandState = getState();

package/dist/components/command/components/CommandList.svelte.d.ts

@@ -1,6 +1,5 @@
 declare const CommandList: import("svelte").Component<{
-    children: any;
-    el: any;
-} & Record<string, any>, {}, "">;
-type CommandList = ReturnType<typeof CommandList>;
+    children: unknown;
+    el: unknown;
+} & Record<string, unknown>, {}, "">;
 export default CommandList;

package/dist/components/command/components/CommandLoading.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { LoadingProps } from '../types';
+	import type { LoadingProps } from '../types.js';
 	import type {Snippet} from "svelte";
 
 	type $$Props = LoadingProps;

package/dist/components/command/components/CommandLoading.svelte.d.ts

@@ -1,9 +1,8 @@
-type $$Props = LoadingProps;
-type $$ComponentProps = $$Props & {
-    childrenWithProps: Snippet<[any]>;
-};
-import type { LoadingProps } from '../types';
 import type { Snippet } from "svelte";
-declare const CommandLoading: import("svelte").Component<$$ComponentProps, {}, "">;
-type CommandLoading = ReturnType<typeof CommandLoading>;
+declare const CommandLoading: import("svelte").Component<{
+    progress?: number;
+    asChild?: boolean;
+} & import("../../../internal/types.js").HTMLDivAttributes & {
+    childrenWithProps: Snippet<[any]>;
+}, {}, "">;
 export default CommandLoading;

package/dist/components/command/components/CommandSeparator.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { derived } from 'svelte/store';
-	import { getState } from '../command';
-	import type { SeparatorProps } from '../types';
+	import { getState } from '../command.js';
+	import type { SeparatorProps } from '../types.js';
 
 	type $$Props = SeparatorProps;
 

package/dist/components/command/components/CommandSeparator.svelte.d.ts

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

package/dist/components/dialog/Dialog.astro

@@ -39,7 +39,7 @@ const hasFooterSlot = !!Astro.slots["footer"];
                         icon={true}
                         client:idle
                         variant="ghost"
-                        size="sm">
+                        size="md">
                     <IconX/>
                 </Button>
             </form>

package/dist/components/dialog/Dialog.js

@@ -4,7 +4,7 @@ export const styles = tv({
         base: '',
         dialog: 'bg-transparent text-inherit',
         dialogContainer: 'py-4 rounded-container',
-        header: 'font-bold px-4 mb-2',
+        header: 'font-semibold px-4 mb-2',
         body: 'px-4',
         footer: 'mt-3 px-4 flex items-center justify-end gap-2.5'
     },

package/dist/components/dialog/Dialog.svelte

@@ -37,7 +37,6 @@
             ref?.close()
             sleep(200).then(() => {
                 stillAnimating = open
-                console.log('stillAnimating', stillAnimating)
             })
 
             if (focusTriggerAfterClose && hasOpened && triggerRef) {
@@ -84,7 +83,7 @@
             <form method="dialog">
                 <Button class="absolute right-1 top-1 [&>svg]:opacity-45 [&>svg]:hover:opacity-90 z-10" icon
                         variant="ghost"
-                        size="sm">
+                        size="md">
                     <IconX/>
                 </Button>
             </form>

package/dist/components/dialog/Dialog.svelte.d.ts

@@ -1,5 +1,4 @@
 import { type DialogProps } from "./Dialog";
 import './dialog.scss';
 declare const Dialog: import("svelte").Component<DialogProps, {}, "ref" | "open">;
-type Dialog = ReturnType<typeof Dialog>;
 export default Dialog;

package/dist/components/dialog/dialog.scss

@@ -23,6 +23,7 @@ dialog {
         width: 24rem;
         max-width: min(calc(100vw - 1rem), 24rem);
     }
+
     &[size="sm"] {
         width: 30rem;
         max-width: min(calc(100vw - 1rem), 30rem);
@@ -47,11 +48,15 @@ dialog {
 }
 
 dialog[open] {
-    //@apply grid place-content-center grid-cols-1;
     @apply inline-flex;
 }
 
 dialog {
+    --transition-duration: 0.2s;
+    transform: translateY(0px);
+
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+
     &[data-position="top"] {
         position: fixed;
         top: 0;
@@ -60,57 +65,112 @@ dialog {
         margin: 0;
     }
 
-
-    --transition-duration: 0.2s;
-    transform: translateY(0px);
-
     &, &::backdrop {
-        transition: display var(--transition-duration) allow-discrete, overlay var(--transition-duration) allow-discrete, opacity var(--transition-duration), transform var(--transition-duration) allow-discrete,;
+        transition: opacity var(--transition-duration) ease-out,
+        transform var(--transition-duration) ease-out,
+        display var(--transition-duration) allow-discrete,
+        overlay var(--transition-duration) allow-discrete,
+        box-shadow var(--transition-duration) ease-out;
+
         opacity: 0;
+
+        will-change: transform, opacity, box-shadow;
+        backface-visibility: hidden;
+        -webkit-backface-visibility: hidden;
     }
 
+
     &[open] {
+        animation: slide-in var(--transition-duration) ease-out;
         opacity: 1;
+        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.12); /* Ant Design-inspired shadow */
         &::backdrop {
             opacity: 1;
         }
+
+        &[data-position="top"] {
+            animation: slide-in-top var(--transition-duration) ease-out;
+        }
     }
 
     &:not([open]) {
-        transform: translateX(0) translateY(-40px);
+        animation: slide-out var(--transition-duration) ease-out;
+        opacity: 0;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); /* Subtle shadow for hidden state */
+        &::backdrop {
+            opacity: 0;
+        }
 
         &[data-position="top"] {
-            top: 0;
-            left: 50%;
-            transform: translateX(-50%) translateY(-40px);
+            animation: slide-out-top var(--transition-duration) ease-out;
         }
+    }
 
+}
+
+@keyframes slide-in {
+    from {
+        transform: translateY(-40px);
         opacity: 0;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
 
-        &::backdrop {
-            opacity: 0; /* Fade-out backdrop */
-        }
     }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.12);
 
-    @starting-style {
-        &[open] {
-            transform: translateX(0) translateY(-40px);
+    }
+}
 
-            &[data-position="top"] {
-                top: 0;
-                left: 50%;
-                transform: translateX(-50%) translateY(-40px);
-            }
-        }
+@keyframes slide-out {
+    from {
+        transform: translateY(0);
+        opacity: 1;
+        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.12);
+    }
+    to {
+        transform: translateY(-40px);
+        opacity: 0;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+    }
+}
 
-        &[open],
-        &[open]::backdrop {
-            opacity: 0;
-        }
+@keyframes slide-in-top {
+    from {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%) translateY(-40px);
+        opacity: 0;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+    }
+    to {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%) translateY(0.5rem);
+        opacity: 1;
+        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.12);
     }
 }
 
+@keyframes slide-out-top {
+    from {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%) translateY(0.5rem);
+        opacity: 1;
+        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.12);
+    }
+    to {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%) translateY(-40px);
+        opacity: 0;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+    }
+}
 
 dialog::backdrop {
     @apply backdrop-blur-[0.2rem] bg-neutral-token-13/20;
+    transition: opacity var(--transition-duration) ease-out;
 }

package/dist/components/dropdown-menu/components/DropdownMenu.svelte.d.ts

@@ -1,4 +1,3 @@
 import { type DropdownMenuProps } from "../DropdownMenu";
 declare const DropdownMenu: import("svelte").Component<DropdownMenuProps, {}, "open">;
-type DropdownMenu = ReturnType<typeof DropdownMenu>;
 export default DropdownMenu;

package/dist/components/dropdown-menu/components/DropdownMenuGroup.svelte.d.ts

@@ -1,6 +1,5 @@
 declare const DropdownMenuGroup: import("svelte").Component<{
-    children: any;
-    class: any;
-} & Record<string, any>, {}, "">;
-type DropdownMenuGroup = ReturnType<typeof DropdownMenuGroup>;
+    children: unknown;
+    class: unknown;
+} & Record<string, unknown>, {}, "">;
 export default DropdownMenuGroup;

package/dist/components/dropdown-menu/components/DropdownMenuHeader.svelte.d.ts

@@ -1,6 +1,5 @@
 declare const DropdownMenuHeader: import("svelte").Component<{
-    children: any;
-    class: any;
-} & Record<string, any>, {}, "">;
-type DropdownMenuHeader = ReturnType<typeof DropdownMenuHeader>;
+    children: unknown;
+    class: unknown;
+} & Record<string, unknown>, {}, "">;
 export default DropdownMenuHeader;

package/dist/components/dropdown-menu/components/DropdownMenuItem.svelte

@@ -22,7 +22,7 @@
 {/snippet}
 
 {#if href}
-    <a href={href}>
+    <a href={href} data-no-translate>
         {@render button()}
     </a>
 {:else }

package/dist/components/dropdown-menu/components/DropdownMenuItem.svelte.d.ts

@@ -1,4 +1,3 @@
 import { type DropdownMenuItemProps } from "../DropdownMenu";
 declare const DropdownMenuItem: import("svelte").Component<DropdownMenuItemProps, {}, "">;
-type DropdownMenuItem = ReturnType<typeof DropdownMenuItem>;
 export default DropdownMenuItem;

package/dist/components/dropdown-menu/components/DropdownMenuSeparator.svelte.d.ts

@@ -1,6 +1,5 @@
 declare const DropdownMenuSeparator: import("svelte").Component<{
-    children: any;
-    class: any;
-} & Record<string, any>, {}, "">;
-type DropdownMenuSeparator = ReturnType<typeof DropdownMenuSeparator>;
+    children: unknown;
+    class: unknown;
+} & Record<string, unknown>, {}, "">;
 export default DropdownMenuSeparator;

package/dist/components/header/Header.svelte

@@ -22,7 +22,7 @@
                         onclick={onHamburgerClick}>
                     <IconHamburger/>
                 </Button>
-                <a href="/" class="header-brand-logo">
+                <a href="/" class="header-brand-logo" data-no-translate>
                     <BrandLogo class="hidden md:block !h-icon-md"/>
                     <BrandLogo class="md:hidden" shape="square"/>
                 </a>

package/dist/components/header/Header.svelte.d.ts

@@ -1,5 +1,4 @@
 import { type HeaderProps } from "./Header";
 import './header.scss';
 declare const Header: import("svelte").Component<HeaderProps, {}, "">;
-type Header = ReturnType<typeof Header>;
 export default Header;

package/dist/components/icons/IconArrowBigRightFilled.svelte.d.ts

@@ -1,5 +1,4 @@
 import { type IconsProps } from "./Icons";
 import { IconArrowBigRightFilled } from "@tabler/icons-svelte";
 declare const IconArrowBigRightFilled: import("svelte").Component<IconsProps, {}, "">;
-type IconArrowBigRightFilled = ReturnType<typeof IconArrowBigRightFilled>;
 export default IconArrowBigRightFilled;

package/dist/components/icons/IconBook.svelte.d.ts

@@ -1,5 +1,4 @@
 import { type IconsProps } from "./Icons";
 import { IconBook } from "@tabler/icons-svelte";
 declare const IconBook: import("svelte").Component<IconsProps, {}, "">;
-type IconBook = ReturnType<typeof IconBook>;
 export default IconBook;

package/dist/components/icons/IconBookmarkPlus.svelte.d.ts

@@ -1,5 +1,4 @@
 import { type IconsProps } from "./Icons";
 import { IconBookmarkPlus } from "@tabler/icons-svelte";
 declare const IconBookmarkPlus: import("svelte").Component<IconsProps, {}, "">;
-type IconBookmarkPlus = ReturnType<typeof IconBookmarkPlus>;
 export default IconBookmarkPlus;

package/dist/components/icons/IconCalculator.svelte.d.ts

@@ -1,5 +1,4 @@
 import { type IconsProps } from "./Icons";
 import { IconCalculator } from "@tabler/icons-svelte";
 declare const IconCalculator: import("svelte").Component<IconsProps, {}, "">;
-type IconCalculator = ReturnType<typeof IconCalculator>;
 export default IconCalculator;

package/dist/components/icons/IconCheck.svelte.d.ts

@@ -1,5 +1,4 @@
 import { type IconsProps } from "./Icons";
 import { IconCheck } from "@tabler/icons-svelte";
 declare const IconCheck: import("svelte").Component<IconsProps, {}, "">;
-type IconCheck = ReturnType<typeof IconCheck>;
 export default IconCheck;

package/dist/components/icons/IconChevronDown.svelte.d.ts

@@ -1,5 +1,4 @@
 import { type IconsProps } from "./Icons";
 import { IconChevronDown } from "@tabler/icons-svelte";
 declare const IconChevronDown: import("svelte").Component<IconsProps, {}, "">;
-type IconChevronDown = ReturnType<typeof IconChevronDown>;
 export default IconChevronDown;

package/dist/components/icons/IconCopy.svelte.d.ts

@@ -1,5 +1,4 @@
 import { type IconsProps } from "./Icons";
 import { IconCopy } from "@tabler/icons-svelte";
 declare const IconCopy: import("svelte").Component<IconsProps, {}, "">;
-type IconCopy = ReturnType<typeof IconCopy>;
 export default IconCopy;

package/dist/components/icons/IconCopyCheckFilled.svelte.d.ts

@@ -1,5 +1,4 @@
 import { type IconsProps } from "./Icons";
 import { IconCopyCheckFilled } from "@tabler/icons-svelte";
 declare const IconCopyCheckFilled: import("svelte").Component<IconsProps, {}, "">;
-type IconCopyCheckFilled = ReturnType<typeof IconCopyCheckFilled>;
 export default IconCopyCheckFilled;

package/dist/components/icons/IconHamburger.svelte.d.ts

@@ -1,4 +1,3 @@
 import { type IconsProps } from "./Icons";
 declare const IconHamburger: import("svelte").Component<IconsProps, {}, "">;
-type IconHamburger = ReturnType<typeof IconHamburger>;
 export default IconHamburger;

package/dist/components/icons/IconLanguage.svelte.d.ts

@@ -1,5 +1,4 @@
 import { type IconsProps } from "./Icons";
 import { IconLanguage } from "@tabler/icons-svelte";
 declare const IconLanguage: import("svelte").Component<IconsProps, {}, "">;
-type IconLanguage = ReturnType<typeof IconLanguage>;
 export default IconLanguage;

package/dist/components/icons/IconLoader2.svelte.d.ts

@@ -1,5 +1,4 @@
 import { type IconsProps } from "./Icons";
 import { IconLoader2 } from "@tabler/icons-svelte";
 declare const IconLoader2: import("svelte").Component<IconsProps, {}, "">;
-type IconLoader2 = ReturnType<typeof IconLoader2>;
 export default IconLoader2;

package/dist/components/icons/IconLogout.svelte.d.ts

@@ -1,5 +1,4 @@
 import { type IconsProps } from "./Icons";
 import { IconLogout } from "@tabler/icons-svelte";
 declare const IconLogout: import("svelte").Component<IconsProps, {}, "">;
-type IconLogout = ReturnType<typeof IconLogout>;
 export default IconLogout;

package/dist/components/icons/IconMoon.svelte.d.ts

@@ -1,4 +1,3 @@
 import { type IconsProps } from "./Icons";
 declare const IconMoon: import("svelte").Component<IconsProps, {}, "">;
-type IconMoon = ReturnType<typeof IconMoon>;
 export default IconMoon;

package/dist/components/icons/IconPointFilled.svelte.d.ts

@@ -1,5 +1,4 @@
 import { type IconsProps } from "./Icons";
 import { IconPointFilled } from "@tabler/icons-svelte";
 declare const IconPointFilled: import("svelte").Component<IconsProps, {}, "">;
-type IconPointFilled = ReturnType<typeof IconPointFilled>;
 export default IconPointFilled;

package/dist/components/icons/IconSearch.svelte.d.ts

@@ -1,5 +1,4 @@
 import { type IconsProps } from "./Icons";
 import { IconSearch } from "@tabler/icons-svelte";
 declare const IconSearch: import("svelte").Component<IconsProps, {}, "">;
-type IconSearch = ReturnType<typeof IconSearch>;
 export default IconSearch;

package/dist/components/icons/IconSettings.svelte.d.ts

@@ -1,5 +1,4 @@
 import { type IconsProps } from "./Icons";
 import { IconSettings } from "@tabler/icons-svelte";
 declare const IconSettings: import("svelte").Component<IconsProps, {}, "">;
-type IconSettings = ReturnType<typeof IconSettings>;
 export default IconSettings;

package/dist/components/icons/IconSun.svelte.d.ts

@@ -1,4 +1,3 @@
 import { type IconsProps } from "./Icons";
 declare const IconSun: import("svelte").Component<IconsProps, {}, "">;
-type IconSun = ReturnType<typeof IconSun>;
 export default IconSun;

package/dist/components/icons/IconSwitchHorizontal.svelte.d.ts

@@ -1,5 +1,4 @@
 import { type IconsProps } from "./Icons";
 import { IconSwitchHorizontal } from "@tabler/icons-svelte";
 declare const IconSwitchHorizontal: import("svelte").Component<IconsProps, {}, "">;
-type IconSwitchHorizontal = ReturnType<typeof IconSwitchHorizontal>;
 export default IconSwitchHorizontal;

package/dist/components/icons/IconSwitchVertical.svelte.d.ts

@@ -1,5 +1,4 @@
 import { type IconsProps } from "./Icons";
 import { IconSwitchVertical } from "@tabler/icons-svelte";
 declare const IconSwitchVertical: import("svelte").Component<IconsProps, {}, "">;
-type IconSwitchVertical = ReturnType<typeof IconSwitchVertical>;
 export default IconSwitchVertical;

package/dist/components/icons/IconTransform.svelte.d.ts

@@ -1,5 +1,4 @@
 import { type IconsProps } from "./Icons";
 import { IconTransform } from "@tabler/icons-svelte";
 declare const IconTransform: import("svelte").Component<IconsProps, {}, "">;
-type IconTransform = ReturnType<typeof IconTransform>;
 export default IconTransform;

package/dist/components/icons/IconX.svelte.d.ts

@@ -1,5 +1,4 @@
 import { type IconsProps } from "./Icons";
 import { IconX } from "@tabler/icons-svelte";
 declare const IconX: import("svelte").Component<IconsProps, {}, "">;
-type IconX = ReturnType<typeof IconX>;
 export default IconX;

package/dist/components/input/Input.svelte.d.ts

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

package/dist/components/language-picker-button/LanguagePickerButton.svelte

@@ -4,7 +4,7 @@
     import {Dialog} from "../dialog";
     import IconCheck from "../icons/IconCheck.svelte";
     import {getGlobalContext} from "../tera-ui-context/global-context";
-    import * as m from '../../paraglide/messages'
+    import * as m from '../../paraglide/messages.js'
 
     let {
         children,

package/dist/components/language-picker-button/LanguagePickerButton.svelte.d.ts

@@ -1,7 +1,5 @@
-type $$ComponentProps = LanguagePickerButtonProps & {
-    onLangSelect: (langCode: string) => void;
-};
 import { type LanguagePickerButtonProps } from "./LanguagePickerButton";
-declare const LanguagePickerButton: import("svelte").Component<$$ComponentProps, {}, "">;
-type LanguagePickerButton = ReturnType<typeof LanguagePickerButton>;
+declare const LanguagePickerButton: import("svelte").Component<LanguagePickerButtonProps & {
+    onLangSelect: (langCode: string) => void;
+}, {}, "">;
 export default LanguagePickerButton;

package/dist/components/light-dark-toggle/LightDarkToggle.svelte.d.ts

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

package/dist/components/popover/Popover.svelte

@@ -42,7 +42,6 @@
                 offset(offsetAmount),
                 size({
                     apply({rects, elements}) {
-                        console.log(elements.reference)
                         Object.assign(elements.floating.style, {
                             minWidth: `${rects.reference.width}px`,
                             maxWidth: `${window.innerWidth - 16}px`,

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

@@ -1,4 +1,3 @@
 import { type PopoverProps } from "./Popover";
 declare const Popover: import("svelte").Component<PopoverProps, {}, "open">;
-type Popover = ReturnType<typeof Popover>;
 export default Popover;

package/dist/components/popover-responsive/PopoverResponsive.svelte

@@ -51,8 +51,6 @@
             }
             openPopover = false
         }
-
-        console.log('toggleOpen Responsive Popover', open)
     }
 
     onMount(() => {

package/dist/components/popover-responsive/PopoverResponsive.svelte.d.ts

@@ -8,5 +8,4 @@ declare const PopoverResponsive: import("svelte").Component<PopoverResponsivePro
     flip?: boolean;
     triggerRef?: HTMLElement;
 }, {}, "open">;
-type PopoverResponsive = ReturnType<typeof PopoverResponsive>;
 export default PopoverResponsive;

package/dist/components/side-navigation/SideNavigation.svelte

@@ -15,7 +15,7 @@
     import IconTransform from "../icons/IconTransform.svelte";
     import IconCalculator from "../icons/IconCalculator.svelte";
     import {LightDarkToggle} from "../light-dark-toggle";
-    import * as m from '../../paraglide/messages'
+    import * as m from '../../paraglide/messages.js'
 
     import {getGlobalContext} from "../tera-ui-context/global-context";
 
@@ -53,7 +53,7 @@
     let langPath = (language === 'en' || !language) ? '' : `/${language}`
 
     function isSelected(href: string) {
-        return sideNavHref?.startsWith(href)
+        return href?.startsWith(sideNavHref || '')
     }
 
 

package/dist/components/side-navigation/SideNavigation.svelte.d.ts

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

package/dist/components/side-navigation/SideNavigationItem.svelte.d.ts

@@ -1,8 +1,7 @@
 declare const SideNavigationItem: import("svelte").Component<{
-    class: any;
-    href: any;
-    children: any;
-    icon: any;
+    class: unknown;
+    href: unknown;
+    children: unknown;
+    icon: unknown;
 }, {}, "">;
-type SideNavigationItem = ReturnType<typeof SideNavigationItem>;
 export default SideNavigationItem;

package/dist/components/side-navigation/SideNavigationLayout.svelte.d.ts

@@ -1,7 +1,6 @@
 import './sidenav.scss';
 declare const SideNavigationLayout: import("svelte").Component<{
-    children: any;
-    language: any;
+    children: unknown;
+    language: unknown;
 }, {}, "">;
-type SideNavigationLayout = ReturnType<typeof SideNavigationLayout>;
 export default SideNavigationLayout;

package/dist/components/slider/Slider.svelte

@@ -81,7 +81,6 @@
         // Calculate nearest step position
         const stepCount = Math.round(clampedPosition / stepSize);
 
-        console.log(stepCount)
         return min + stepCount
     };
 

package/dist/components/slider/Slider.svelte.d.ts

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

package/dist/components/star-rating/StarRating.js

@@ -3,9 +3,9 @@ export const styles = tv({
     base: '',
     variants: {
         size: {
-            sm: 'h-6 px-1',
-            md: 'h-8 px-1',
-            lg: 'h-10 px-1'
+            sm: 'size-6 p-1',
+            md: 'size-8 p-1',
+            lg: 'size-10 p-1'
         }
     },
     compoundVariants: [],

package/dist/components/star-rating/StarRating.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
     import {type StarRatingProps, styles} from "./StarRating";
-    import {cn} from "../../utils/utils";
 
     let {
         children,
@@ -30,21 +29,21 @@
         }
 
         onchange?.(v)
-        console.log('setRating', e.type)
+        // console.log('setRating', e.type)
 
     }
 
     // Updates hover state when hovering over a star
     function setHover(v, e) {
         hoverRating = v;
-        console.log('setHover', v, e.type)
+        // console.log('setHover', v, e.type)
     }
 
     // Resets hover state when leaving the star area
     function resetHover(e) {
 
         hoverRating = 0;
-        console.log('resetHover', e.type)
+        // console.log('resetHover', e.type)
     }
 
 </script>
@@ -83,7 +82,7 @@
     fill: hsl(var(--tw---token-color-neutral-token-5));
     transition-property: all;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 300ms
+    transition-duration: 350ms
 }
 [data-rating-icon]:first-child {
     padding-left: 0px

package/dist/components/star-rating/StarRating.svelte.d.ts

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

package/dist/components/tabs/components/Tabs.svelte

@@ -13,7 +13,7 @@
 
 
     function setValue(v: string) {
-        console.log('Change value', v)
+        // console.log('Change value', v)
         value = v
     }
 

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

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

package/dist/components/tabs/components/TabsContent.svelte.d.ts

@@ -1,7 +1,6 @@
 declare const TabsContent: import("svelte").Component<{
-    children: any;
-    class: any;
-    value: any;
-} & Record<string, any>, {}, "">;
-type TabsContent = ReturnType<typeof TabsContent>;
+    children: unknown;
+    class: unknown;
+    value: unknown;
+} & Record<string, unknown>, {}, "">;
 export default TabsContent;

package/dist/components/tabs/components/TabsItem.svelte.d.ts

@@ -1,7 +1,6 @@
 declare const TabsItem: import("svelte").Component<{
-    children: any;
-    class: any;
-    value: any;
-} & Record<string, any>, {}, "">;
-type TabsItem = ReturnType<typeof TabsItem>;
+    children: unknown;
+    class: unknown;
+    value: unknown;
+} & Record<string, unknown>, {}, "">;
 export default TabsItem;

package/dist/components/tabs/components/TabsList.svelte.d.ts

@@ -1,6 +1,5 @@
 declare const TabsList: import("svelte").Component<{
-    children: any;
-    class: any;
-} & Record<string, any>, {}, "">;
-type TabsList = ReturnType<typeof TabsList>;
+    children: unknown;
+    class: unknown;
+} & Record<string, unknown>, {}, "">;
 export default TabsList;

package/dist/components/tera-ui-context/TeraUiContext.svelte

@@ -16,11 +16,11 @@
         ...props
     })
 
-    console.log('tera-system-ui', 'TeraUIContext props', {
-        supportLanguages,
-        language,
-        ...props
-    })
+    // console.log('tera-system-ui', 'TeraUIContext props', {
+    //     supportLanguages,
+    //     language,
+    //     ...props
+    // })
 
     setLanguageTag(language)
 </script>

package/dist/components/tera-ui-context/TeraUiContext.svelte.d.ts

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

package/dist/components/tera-ui-context/global-context.js

@@ -8,13 +8,13 @@ export function setGlobalContext(data) {
     else {
         setContext('globalContext', data);
     }
-    console.log('tera-system-ui', 'set global context', data);
+    // console.log('tera-system-ui', 'set global context', data);
 }
 export function getGlobalContext() {
     let context = getContext('globalContext') || get(globalContextStore);
-    console.log('tera-system-ui', 'getGlobalContext', context);
+    // console.log('tera-system-ui', 'getGlobalContext', context);
     if (!context) {
-        console.error('tera-system-ui', 'Not set global context yet!', 'Using default context data');
+        // console.error('tera-system-ui', 'Not set global context yet!', 'Using default context data')
         return {
             language: 'en',
             supportLanguages: ['en']

package/dist/components/text-area/TextArea.svelte.d.ts

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

package/dist/components/user-avatar-with-menu/UserAvatarWithMenu.svelte

@@ -10,7 +10,7 @@
     } from "../dropdown-menu";
     import {IconLogout, IconSettings} from "../icons";
     import {extractShortUsernameFromEmail} from "../../internal/service/user.service";
-    import * as m from '../../paraglide/messages'
+    import * as m from '../../paraglide/messages.js'
     let {children, user, onLogout,...props}: UserAvatarWithMenuProps = $props();
 
     let shortUserName = extractShortUsernameFromEmail(user?.email)

package/dist/components/user-avatar-with-menu/UserAvatarWithMenu.svelte.d.ts

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

package/dist/themes/tera-ui-base.css

@@ -1,8 +1,15 @@
-@import "scrollbar.scss"; /* Default base style */
+/* Default base style */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+@import "scrollbar.scss";
+
+* {
+    font-synthesis: none !important;
+    -webkit-font-smoothing: antialiased;
+}
+
 .ripple {
     position: absolute;
     border-radius: 50%;

package/dist/themes/tw-preset.cjs

@@ -147,7 +147,7 @@ module.exports = {
                 DEFAULT: 'hsl(var(--tw---token-color-neutral-token-5))'
             },
             transitionDuration: {
-                "element-react": '300ms'
+                "element-react": '350ms'
             }
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "tera-system-ui",
-	"version": "0.0.38",
+	"version": "0.0.41",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run customPrepublish && npm run generate-index && vite build && npm run package && npm run postpublish",
@@ -63,40 +63,40 @@
 	"peerDependencies": {
 		"svelte": "^5.0.0"
 	},
-	"devDependencies": {
-		"@chromatic-com/storybook": "^3.2.2",
-		"@storybook/addon-essentials": "^8.4.4",
-		"@storybook/addon-interactions": "^8.4.4",
-		"@storybook/addon-links": "^8.4.4",
-		"@storybook/addon-styling": "^1.3.7",
-		"@storybook/addon-svelte-csf": "^5.0.0-next.11",
-		"@storybook/addon-themes": "^8.4.4",
-		"@storybook/addon-viewport": "^8.4.4",
-		"@storybook/blocks": "^8.4.4",
-		"@storybook/svelte": "^8.4.4",
-		"@storybook/sveltekit": "^8.4.4",
-		"@storybook/test": "^8.4.4",
-		"@sveltejs/adapter-auto": "^3.3.1",
-		"@sveltejs/kit": "^2.8.1",
-		"@sveltejs/package": "^2.3.7",
-		"@sveltejs/vite-plugin-svelte": "^4.0.1",
-		"npx": "^10.2.2",
-		"publint": "^0.2.12",
-		"sass-embedded": "^1.81.0",
-		"storybook": "^8.4.4",
-		"svelte": "^5.2.1",
-		"svelte-check": "^4.0.8",
-		"tailwindcss": "^3.4.15",
-		"typescript": "^5.6.3",
-		"vite": "^5.4.11"
-	},
-	"dependencies": {
-		"@floating-ui/dom": "^1.6.12",
-		"@inlang/paraglide-sveltekit": "0.11.5",
-		"@tabler/icons-svelte": "^3.22.0",
-		"clsx": "^2.1.1",
-		"autoprefixer": "^10.4.20",
-		"@inlang/paraglide-js": "1.11.3",
-		"tailwind-variants": "^0.3.0"
-	}
+	  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
+    "@storybook/addon-essentials": "^8.4.4",
+    "@storybook/addon-interactions": "^8.4.4",
+    "@storybook/addon-links": "^8.4.4",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/addon-svelte-csf": "^5.0.0-next.8",
+    "@storybook/addon-themes": "^8.4.4",
+    "@storybook/addon-viewport": "^8.4.4",
+    "@storybook/blocks": "^8.4.4",
+    "@storybook/svelte": "^8.4.4",
+    "@storybook/sveltekit": "^8.4.4",
+    "@storybook/test": "^8.4.4",
+    "@sveltejs/adapter-auto": "^3.3.1",
+    "@sveltejs/kit": "^2.8.1",
+    "@sveltejs/package": "^2.3.7",
+    "@sveltejs/vite-plugin-svelte": "^4.0.1",
+    "npx": "^10.2.2",
+    "publint": "^0.2.12",
+    "sass-embedded": "^1.81.0",
+    "storybook": "^8.4.4",
+    "svelte": "^5.2.1",
+    "svelte-check": "^4.0.8",
+    "tailwindcss": "^3.4.15",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.11"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.6.12",
+    "@inlang/paraglide-sveltekit": "0.11.5",
+    "@tabler/icons-svelte": "^3.22.0",
+    "clsx": "^2.1.1",
+    "autoprefixer": "^10.4.20",
+    "@inlang/paraglide-js": "1.11.3",
+    "tailwind-variants": "^0.3.0"
+  }
 }