@ims360/svelte-ivory 0.5.2 → 0.5.4

package/dist/colorTheme.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colorTheme.svelte.d.ts","sourceRoot":"","sources":["../src/lib/colorTheme.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAK5C,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAE/D,cAAM,eAAe;IACjB,OAAO,CAAC,YAAY,CAA0C;;IAY9D,IAAI,KAAK,IAWQ,oBAAoB,CATpC;IAED,IAAI,OAAO,qBAKV;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,oBAAoB,EAepC;IAED,uEAAuE;IACvE,MAAM,EAAE,MAAM,CAcZ;CACL;AAED,eAAO,MAAM,UAAU,iBAAwB,CAAC"}
+{"version":3,"file":"colorTheme.svelte.d.ts","sourceRoot":"","sources":["../src/lib/colorTheme.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAK5C,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAI/D,cAAM,eAAe;IACjB,OAAO,CAAC,YAAY,CAA0C;;IAY9D,IAAI,KAAK,IAWQ,oBAAoB,CATpC;IAED,IAAI,OAAO,qBAKV;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,oBAAoB,EAepC;IAED,uEAAuE;IACvE,MAAM,EAAE,MAAM,CAcZ;CACL;AAED,eAAO,MAAM,UAAU,iBAAwB,CAAC"}

package/dist/colorTheme.svelte.js

@@ -1,6 +1,6 @@
-import { browser } from '$app/environment';
 import { cookie } from './utils/functions';
 const COOKIE_THEME_KEY = 'theme';
+const browser = typeof window !== 'undefined';
 class ThemeController {
     currentTheme = $state('system');
     constructor() {

package/dist/components/basic/toggle/Toggle.svelte

@@ -8,6 +8,7 @@
         value?: boolean;
         class?: ClassValue;
         children?: Snippet;
+        onclick?: () => void;
     };
 </script>
 

package/dist/components/basic/toggle/Toggle.svelte.d.ts

@@ -5,6 +5,7 @@ export type ToggleProps = IvoryComponent<HTMLElement> & {
     value?: boolean;
     class?: ClassValue;
     children?: Snippet;
+    onclick?: () => void;
 };
 declare const Toggle: import("svelte").Component<ToggleProps, {}, "">;
 type Toggle = ReturnType<typeof Toggle>;

package/dist/components/basic/toggle/Toggle.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACpD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AA8BN,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACpD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AA8BN,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/inputs/ColorInput.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <Input {...props}>
-    {#snippet children({ id, class: inputClass })}
+    {#snippet children({ id, class: inputClass, ...inputProps })}
         <div class={merge(inputClass, 'flex grow flex-row items-center justify-between gap-4 p-0')}>
             <input
                 type="text"
@@ -17,6 +17,7 @@
                 class={['h-full rounded', INPUT_UNSET_OUTLINE]}
                 {id}
                 {...props.form.as('color')}
+                {...inputProps}
             />
         </div>
     {/snippet}

package/dist/components/inputs/Input.svelte

@@ -3,20 +3,18 @@
     import { merge, pseudoRandomId } from '../../utils/functions';
     import type { RemoteFormField, RemoteFormFieldValue } from '@sveltejs/kit';
     import type { Snippet } from 'svelte';
-    import type { ClassValue } from 'svelte/elements';
+    import type { HTMLAttributes } from 'svelte/elements';
     import { slide } from 'svelte/transition';
     import FormIssues from './issues/FormIssues.svelte';
 
-    interface CommonProps {
-        id?: string;
-        class?: ClassValue;
-        style?: string;
+    export interface InputProps<T extends RemoteFormFieldValue> extends Omit<
+        HTMLAttributes<HTMLInputElement>,
+        'children'
+    > {
+        form: RemoteFormField<T>;
         label?: string;
         disabled?: boolean;
-    }
-
-    export interface InputProps<T extends RemoteFormFieldValue> extends CommonProps {
-        form: RemoteFormField<T>;
+        fixTitle?: boolean;
     }
 
     export const INPUT_UNSET_OUTLINE =
@@ -24,10 +22,8 @@
 </script>
 
 <script lang="ts" generics="T extends RemoteFormFieldValue">
-    interface Props<K extends RemoteFormFieldValue> extends CommonProps {
-        children: Snippet<[{ class: string; id: string; disabled?: boolean }]>;
-        fixTitle?: boolean;
-        form: Pick<RemoteFormField<K>, 'value' | 'issues'>;
+    interface Props<K extends RemoteFormFieldValue> extends InputProps<K> {
+        children: Snippet<[HTMLAttributes<HTMLInputElement>]>;
     }
 
     let {

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

@@ -1,25 +1,15 @@
 import type { RemoteFormField, RemoteFormFieldValue } from '@sveltejs/kit';
 import type { Snippet } from 'svelte';
-import type { ClassValue } from 'svelte/elements';
-interface CommonProps {
-    id?: string;
-    class?: ClassValue;
-    style?: string;
+import type { HTMLAttributes } from 'svelte/elements';
+export interface InputProps<T extends RemoteFormFieldValue> extends Omit<HTMLAttributes<HTMLInputElement>, 'children'> {
+    form: RemoteFormField<T>;
     label?: string;
     disabled?: boolean;
-}
-export interface InputProps<T extends RemoteFormFieldValue> extends CommonProps {
-    form: RemoteFormField<T>;
+    fixTitle?: boolean;
 }
 export declare const INPUT_UNSET_OUTLINE = "border-none outline-none ring-transparent focus:outline-none";
-interface Props<K extends RemoteFormFieldValue> extends CommonProps {
-    children: Snippet<[{
-        class: string;
-        id: string;
-        disabled?: boolean;
-    }]>;
-    fixTitle?: boolean;
-    form: Pick<RemoteFormField<K>, 'value' | 'issues'>;
+interface Props<K extends RemoteFormFieldValue> extends InputProps<K> {
+    children: Snippet<[HTMLAttributes<HTMLInputElement>]>;
 }
 declare function $$render<T extends RemoteFormFieldValue>(): {
     props: Props<T>;

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

@@ -1 +1 @@
-{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/Input.svelte.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/Input.svelte.ts"],"names":[],"mappings":"AAKI,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAItD,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,oBAAoB,CAAE,SAAQ,IAAI,CACpE,cAAc,CAAC,gBAAgB,CAAC,EAChC,UAAU,CACb;IACG,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,iEACkC,CAAC;AAEnE,UAAU,KAAK,CAAC,CAAC,SAAS,oBAAoB,CAAE,SAAQ,UAAU,CAAC,CAAC,CAAC;IACjE,QAAQ,EAAE,OAAO,CAAC,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;CACzD;AAAC,iBAAS,QAAQ,CAAC,CAAC,SAAS,oBAAoB;WAiEzB,KAAK,CAAC,CAAC,CAAC;;;;;EAA4E;AACjH,cAAM,iBAAiB,CAAC,CAAC,SAAS,oBAAoB;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS,oBAAoB,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACzZ,CAAC,CAAC,SAAS,oBAAoB,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACxJ,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,KAAK,EAAE,qBAAmC,CAAC;AAC/B,KAAK,KAAK,CAAC,CAAC,SAAS,oBAAoB,IAAI,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AAC7E,eAAe,KAAK,CAAC"}

package/dist/components/inputs/PasswordCreateInput.svelte

@@ -24,7 +24,7 @@
 </script>
 
 <div bind:this={target} class={['bg-inherit ', clazz]}>
-    <PasswordInput {...props} newPassword onfocusin={popover?.open} onfocusout={popover?.close} />
+    <PasswordInput {...props} onfocusin={popover?.open} onfocusout={popover?.close} />
 </div>
 
 <Popover

package/dist/components/inputs/PasswordInput.svelte

@@ -3,25 +3,15 @@
     import Input from './Input.svelte';
 
     type Props = InputProps<string> & {
-        newPassword?: boolean;
         onfocusin?: () => void;
         onfocusout?: () => void;
     };
 
-    let { newPassword = false, onfocusin, onfocusout, ...props }: Props = $props();
+    let { onfocusin, onfocusout, ...props }: Props = $props();
 </script>
 
 <Input {...props}>
     {#snippet children(inputProps)}
-        <input
-            {...inputProps}
-            {...props.form.as?.('password')}
-            type="password"
-            autocapitalize="off"
-            autocomplete={newPassword ? 'new-password' : 'current-password'}
-            required
-            {onfocusin}
-            {onfocusout}
-        />
+        <input {...inputProps} {...props.form.as?.('password')} {onfocusin} {onfocusout} />
     {/snippet}
 </Input>

package/dist/components/inputs/PasswordInput.svelte.d.ts

@@ -1,6 +1,5 @@
 import type { InputProps } from './Input.svelte';
 type Props = InputProps<string> & {
-    newPassword?: boolean;
     onfocusin?: () => void;
     onfocusout?: () => void;
 };

package/dist/components/inputs/PasswordInput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/PasswordInput.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAI7C,KAAK,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAiBN,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"PasswordInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/PasswordInput.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAI7C,KAAK,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAiBN,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/inputs/ToggleInput.svelte

@@ -8,8 +8,8 @@
     const value = $derived(form.value());
 </script>
 
-<div class={['flex flex-col gap-2', clazz]} {...props}>
-    <input {...form.as('checkbox')} class="hidden" />
+<div class={['flex flex-col gap-2', clazz]}>
+    <input {...form.as('checkbox')} class="hidden" {...props} />
     <button
         type="button"
         class="flex flex-row items-center gap-2"

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

@@ -10,7 +10,6 @@ export { default as PasswordCreateInput, type PasswordCreateInputProps, type Pas
 export { default as PasswordInput } from './PasswordInput.svelte';
 export { default as Select } from './select/Select.svelte';
 export { default as SelectOption } from './select/SelectOption.svelte';
-export { default as TextareaInput } from './TextareaInput.svelte';
 export { default as TextInput } from './TextInput.svelte';
 export { default as ToggleInput } from './ToggleInput.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/inputs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/E,OAAO,EACH,OAAO,IAAI,kBAAkB,EAC7B,KAAK,uBAAuB,EAC/B,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EACH,OAAO,IAAI,mBAAmB,EAC9B,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,EAC3B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/E,OAAO,EACH,OAAO,IAAI,kBAAkB,EAC7B,KAAK,uBAAuB,EAC/B,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EACH,OAAO,IAAI,mBAAmB,EAC9B,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,EAC3B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/inputs/index.js

@@ -10,6 +10,5 @@ export { default as PasswordCreateInput } from './PasswordCreateInput.svelte';
 export { default as PasswordInput } from './PasswordInput.svelte';
 export { default as Select } from './select/Select.svelte';
 export { default as SelectOption } from './select/SelectOption.svelte';
-export { default as TextareaInput } from './TextareaInput.svelte';
 export { default as TextInput } from './TextInput.svelte';
 export { default as ToggleInput } from './ToggleInput.svelte';

package/dist/components/layout/modal/Modal.svelte

@@ -17,12 +17,7 @@
 </script>
 
 <script lang="ts">
-    interface Props extends ModalProps {
-        /** If you don't want the title and close button to be included you can overwrite the default modal */
-        inner?: Snippet;
-    }
-
-    let { children, dialog: dialogProps = {}, ...props }: Props = $props();
+    let { children, dialog: dialogProps = {}, ...props }: ModalProps = $props();
 
     let dialog = $state<Dialog>();
 

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

@@ -11,12 +11,8 @@ export type ModalProps = IvoryComponent<HTMLDivElement> & {
     children?: Snippet;
     onclick?: MouseEventHandler<HTMLDivElement>;
 };
-interface Props extends ModalProps {
-    /** If you don't want the title and close button to be included you can overwrite the default modal */
-    inner?: Snippet;
-}
 /** A modal inside a dialog element */
-declare const Modal: import("svelte").Component<Props, {
+declare const Modal: import("svelte").Component<ModalProps, {
     close: () => void | undefined;
     open: () => void | undefined;
     isOpen: () => boolean | undefined;

package/dist/components/layout/modal/Modal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/modal/Modal.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAErD,sFAAsF;AACtF,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACtD,iEAAiE;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAC/C,CAAC;AAEF,UAAU,KAAM,SAAQ,UAAU;IAC9B,sGAAsG;IACtG,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAuCL,sCAAsC;AACtC,QAAA,MAAM,KAAK;;;;;MAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/modal/Modal.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAErD,sFAAsF;AACtF,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACtD,iEAAiE;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAC/C,CAAC;AAsCN,sCAAsC;AACtC,QAAA,MAAM,KAAK;;;;;MAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/layout/tabs/Tab.svelte

@@ -1,5 +1,4 @@
 <script lang="ts" module>
-    import { page } from '$app/state';
     import type { IvoryComponent } from '../../../types';
     import { merge, pseudoRandomId } from '../../../utils/functions';
     import { onMount, type Snippet } from 'svelte';
@@ -33,7 +32,7 @@
         if (typeof active === 'boolean') {
             return active;
         } else if (href) {
-            return page.url.pathname.startsWith(href);
+            return window.location.href.startsWith(href);
         } else if (tabs && tabs.selectedTab === tabId) {
             return true;
         } else {

package/dist/components/layout/tabs/Tab.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tabs/Tab.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC3E,KAAK,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,QAAQ,EAAE,OAAO,KAAK,UAAU,CAAC,CAAC;IACzD,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC,CAAC;IAC3C,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AA6CL,QAAA,MAAM,GAAG,8CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Tab.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tabs/Tab.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC3E,KAAK,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,QAAQ,EAAE,OAAO,KAAK,UAAU,CAAC,CAAC;IACzD,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC,CAAC;IAC3C,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AA6CL,QAAA,MAAM,GAAG,8CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}

package/dist/utils/attachments/shortcut.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shortcut.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/attachments/shortcut.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGrD,MAAM,WAAW,cAAc;IAC3B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AA4CD,wBAAgB,QAAQ,CAAC,MAAM,EAAE,cAAc,GAAG,UAAU,CAQ3D"}
+{"version":3,"file":"shortcut.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/attachments/shortcut.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGrD,MAAM,WAAW,cAAc;IAC3B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AA8CD,wBAAgB,QAAQ,CAAC,MAAM,EAAE,cAAc,GAAG,UAAU,CAQ3D"}

package/dist/utils/attachments/shortcut.svelte.js

@@ -1,5 +1,5 @@
-import { browser } from '$app/environment';
 import { pseudoRandomId } from '../functions';
+const browser = typeof window !== 'undefined';
 // eslint-disable-next-line svelte/prefer-svelte-reactivity
 const callbacks = new Map();
 function setupListener() {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ims360/svelte-ivory",
-    "version": "0.5.2",
+    "version": "0.5.4",
     "keywords": [
         "svelte"
     ],
@@ -86,13 +86,14 @@
         "@eslint/compat": "^2.0.2",
         "@eslint/js": "^10.0.1",
         "@sveltejs/adapter-auto": "^7.0.1",
+        "@sveltejs/kit": "^2.55.0",
         "@sveltejs/package": "^2.5.7",
-        "@sveltejs/vite-plugin-svelte": "^6.2.4",
+        "@sveltejs/vite-plugin-svelte": "^7.3.0",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/svelte": "^5.3.1",
         "@testing-library/user-event": "^14.6.1",
         "@vitest/browser": "^4.1.4",
-        "@vitest/coverage-v8": "^4.1.4",
+        "@vitest/coverage-v8": "^4.1.5",
         "@vitest/spy": "^4.1.4",
         "eslint": "^10.0.2",
         "eslint-config-prettier": "^10.1.8",
@@ -106,13 +107,12 @@
         "svelte-check": "^4.4.4",
         "typescript": "^5.9.3",
         "typescript-eslint": "^8.56.1",
-        "vite": "^7.0.0",
+        "vite": "^8.0.0",
         "vitest": "^4.1.4",
         "zod": "^4.3.6"
     },
     "peerDependencies": {
         "@skeletonlabs/skeleton": "^4.0.0",
-        "@sveltejs/kit": "^2.55.0",
         "svelte": "^5.55.1"
     }
 }

package/src/lib/colorTheme.svelte.ts

@@ -1,4 +1,3 @@
-import { browser } from '$app/environment';
 import type { Handle } from '@sveltejs/kit';
 import { cookie } from './utils/functions';
 
@@ -6,6 +5,8 @@ const COOKIE_THEME_KEY = 'theme';
 
 export type ColorThemePreference = 'system' | 'light' | 'dark';
 
+const browser = typeof window !== 'undefined';
+
 class ThemeController {
     private currentTheme = $state<ColorThemePreference>('system');
 

package/src/lib/components/basic/toggle/Toggle.svelte

@@ -8,6 +8,7 @@
         value?: boolean;
         class?: ClassValue;
         children?: Snippet;
+        onclick?: () => void;
     };
 </script>
 

package/src/lib/components/inputs/ColorInput.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <Input {...props}>
-    {#snippet children({ id, class: inputClass })}
+    {#snippet children({ id, class: inputClass, ...inputProps })}
         <div class={merge(inputClass, 'flex grow flex-row items-center justify-between gap-4 p-0')}>
             <input
                 type="text"
@@ -17,6 +17,7 @@
                 class={['h-full rounded', INPUT_UNSET_OUTLINE]}
                 {id}
                 {...props.form.as('color')}
+                {...inputProps}
             />
         </div>
     {/snippet}

package/src/lib/components/inputs/Input.svelte

@@ -3,20 +3,18 @@
     import { merge, pseudoRandomId } from '$lib/utils/functions';
     import type { RemoteFormField, RemoteFormFieldValue } from '@sveltejs/kit';
     import type { Snippet } from 'svelte';
-    import type { ClassValue } from 'svelte/elements';
+    import type { HTMLAttributes } from 'svelte/elements';
     import { slide } from 'svelte/transition';
     import FormIssues from './issues/FormIssues.svelte';
 
-    interface CommonProps {
-        id?: string;
-        class?: ClassValue;
-        style?: string;
+    export interface InputProps<T extends RemoteFormFieldValue> extends Omit<
+        HTMLAttributes<HTMLInputElement>,
+        'children'
+    > {
+        form: RemoteFormField<T>;
         label?: string;
         disabled?: boolean;
-    }
-
-    export interface InputProps<T extends RemoteFormFieldValue> extends CommonProps {
-        form: RemoteFormField<T>;
+        fixTitle?: boolean;
     }
 
     export const INPUT_UNSET_OUTLINE =
@@ -24,10 +22,8 @@
 </script>
 
 <script lang="ts" generics="T extends RemoteFormFieldValue">
-    interface Props<K extends RemoteFormFieldValue> extends CommonProps {
-        children: Snippet<[{ class: string; id: string; disabled?: boolean }]>;
-        fixTitle?: boolean;
-        form: Pick<RemoteFormField<K>, 'value' | 'issues'>;
+    interface Props<K extends RemoteFormFieldValue> extends InputProps<K> {
+        children: Snippet<[HTMLAttributes<HTMLInputElement>]>;
     }
 
     let {

package/src/lib/components/inputs/PasswordCreateInput.svelte

@@ -24,7 +24,7 @@
 </script>
 
 <div bind:this={target} class={['bg-inherit ', clazz]}>
-    <PasswordInput {...props} newPassword onfocusin={popover?.open} onfocusout={popover?.close} />
+    <PasswordInput {...props} onfocusin={popover?.open} onfocusout={popover?.close} />
 </div>
 
 <Popover

package/src/lib/components/inputs/PasswordInput.svelte

@@ -3,25 +3,15 @@
     import Input from './Input.svelte';
 
     type Props = InputProps<string> & {
-        newPassword?: boolean;
         onfocusin?: () => void;
         onfocusout?: () => void;
     };
 
-    let { newPassword = false, onfocusin, onfocusout, ...props }: Props = $props();
+    let { onfocusin, onfocusout, ...props }: Props = $props();
 </script>
 
 <Input {...props}>
     {#snippet children(inputProps)}
-        <input
-            {...inputProps}
-            {...props.form.as?.('password')}
-            type="password"
-            autocapitalize="off"
-            autocomplete={newPassword ? 'new-password' : 'current-password'}
-            required
-            {onfocusin}
-            {onfocusout}
-        />
+        <input {...inputProps} {...props.form.as?.('password')} {onfocusin} {onfocusout} />
     {/snippet}
 </Input>

package/src/lib/components/inputs/ToggleInput.svelte

@@ -8,8 +8,8 @@
     const value = $derived(form.value());
 </script>
 
-<div class={['flex flex-col gap-2', clazz]} {...props}>
-    <input {...form.as('checkbox')} class="hidden" />
+<div class={['flex flex-col gap-2', clazz]}>
+    <input {...form.as('checkbox')} class="hidden" {...props} />
     <button
         type="button"
         class="flex flex-row items-center gap-2"

package/src/lib/components/inputs/index.ts

@@ -17,6 +17,5 @@ export {
 export { default as PasswordInput } from './PasswordInput.svelte';
 export { default as Select } from './select/Select.svelte';
 export { default as SelectOption } from './select/SelectOption.svelte';
-export { default as TextareaInput } from './TextareaInput.svelte';
 export { default as TextInput } from './TextInput.svelte';
 export { default as ToggleInput } from './ToggleInput.svelte';

package/src/lib/components/layout/modal/Modal.svelte

@@ -17,12 +17,7 @@
 </script>
 
 <script lang="ts">
-    interface Props extends ModalProps {
-        /** If you don't want the title and close button to be included you can overwrite the default modal */
-        inner?: Snippet;
-    }
-
-    let { children, dialog: dialogProps = {}, ...props }: Props = $props();
+    let { children, dialog: dialogProps = {}, ...props }: ModalProps = $props();
 
     let dialog = $state<Dialog>();
 

package/src/lib/components/layout/tabs/Tab.svelte

@@ -1,5 +1,4 @@
 <script lang="ts" module>
-    import { page } from '$app/state';
     import type { IvoryComponent } from '$lib/types';
     import { merge, pseudoRandomId } from '$lib/utils/functions';
     import { onMount, type Snippet } from 'svelte';
@@ -33,7 +32,7 @@
         if (typeof active === 'boolean') {
             return active;
         } else if (href) {
-            return page.url.pathname.startsWith(href);
+            return window.location.href.startsWith(href);
         } else if (tabs && tabs.selectedTab === tabId) {
             return true;
         } else {

package/src/lib/utils/attachments/shortcut.svelte.ts

@@ -1,4 +1,3 @@
-import { browser } from '$app/environment';
 import type { Attachment } from 'svelte/attachments';
 import { pseudoRandomId } from '../functions';
 
@@ -10,6 +9,8 @@ export interface ShortcutParams {
     callback: () => void;
 }
 
+const browser = typeof window !== 'undefined';
+
 // eslint-disable-next-line svelte/prefer-svelte-reactivity
 const callbacks: Map<string, IdShortcutParams[]> = new Map();
 

package/dist/components/inputs/TextareaInput.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-    import TextArea from '../basic/Textarea.svelte';
-    import Input, { type InputProps } from './Input.svelte';
-
-    let { ...props }: InputProps<string> = $props();
-
-    let inputElement = $state<TextArea>();
-    export function focus() {
-        inputElement?.focus();
-    }
-</script>
-
-<Input {...props}>
-    {#snippet children(inputProps)}
-        {@const { name } = props.form.as('text')}
-        <TextArea
-            {...inputProps}
-            {name}
-            bind:value={props.form.value, props.form.set}
-            bind:this={inputElement}
-        />
-    {/snippet}
-</Input>

package/dist/components/inputs/TextareaInput.svelte.d.ts

@@ -1,7 +0,0 @@
-import { type InputProps } from './Input.svelte';
-declare const TextareaInput: import("svelte").Component<InputProps<string>, {
-    focus: () => void;
-}, "">;
-type TextareaInput = ReturnType<typeof TextareaInput>;
-export default TextareaInput;
-//# sourceMappingURL=TextareaInput.svelte.d.ts.map

package/dist/components/inputs/TextareaInput.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextareaInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/TextareaInput.svelte.ts"],"names":[],"mappings":"AAIA,OAAc,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAuBxD,QAAA,MAAM,aAAa;;MAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/src/lib/components/inputs/TextareaInput.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-    import TextArea from '../basic/Textarea.svelte';
-    import Input, { type InputProps } from './Input.svelte';
-
-    let { ...props }: InputProps<string> = $props();
-
-    let inputElement = $state<TextArea>();
-    export function focus() {
-        inputElement?.focus();
-    }
-</script>
-
-<Input {...props}>
-    {#snippet children(inputProps)}
-        {@const { name } = props.form.as('text')}
-        <TextArea
-            {...inputProps}
-            {name}
-            bind:value={props.form.value, props.form.set}
-            bind:this={inputElement}
-        />
-    {/snippet}
-</Input>