@winkintel/bootstrap-svelte 1.0.4 → 1.0.6

package/dist/Collapse/transition.js

@@ -1,3 +1,46 @@
+const hasValidTransitionDuration = (transitionDuration) => transitionDuration !== undefined && Number.isFinite(transitionDuration) && transitionDuration >= 0;
+const resolveTransitionDuration = (node, transitionDuration) => hasValidTransitionDuration(transitionDuration) ? transitionDuration : getTransitionDuration(node);
+const transitionTimingStates = new WeakMap();
+const applyTransitionTiming = (node, duration) => {
+    const owner = {};
+    let state = transitionTimingStates.get(node);
+    if (!state) {
+        state = {
+            duration: {
+                value: node.style.getPropertyValue('transition-duration'),
+                priority: node.style.getPropertyPriority('transition-duration')
+            },
+            delay: {
+                value: node.style.getPropertyValue('transition-delay'),
+                priority: node.style.getPropertyPriority('transition-delay')
+            },
+            owner
+        };
+        transitionTimingStates.set(node, state);
+    }
+    else {
+        state.owner = owner;
+    }
+    node.style.setProperty('transition-duration', `${duration}ms`);
+    node.style.setProperty('transition-delay', '0ms');
+    return () => {
+        if (transitionTimingStates.get(node)?.owner !== owner)
+            return;
+        transitionTimingStates.delete(node);
+        if (state.duration.value) {
+            node.style.setProperty('transition-duration', state.duration.value, state.duration.priority);
+        }
+        else {
+            node.style.removeProperty('transition-duration');
+        }
+        if (state.delay.value) {
+            node.style.setProperty('transition-delay', state.delay.value, state.delay.priority);
+        }
+        else {
+            node.style.removeProperty('transition-delay');
+        }
+    };
+};
 export function collapseIn(node, params) {
     const isHorizontal = params.isHorizontal;
     // Choose dimension to animate: width for horizontal, height for vertical
@@ -6,7 +49,16 @@ export function collapseIn(node, params) {
     node.classList.add('collapsing');
     node.classList.remove('collapse', 'show');
     node.style[stylePropName] = '0';
-    const duration = getTransitionDuration(node);
+    const duration = resolveTransitionDuration(node, params.transitionDuration);
+    const restoreTransitionTiming = hasValidTransitionDuration(params.transitionDuration) ? applyTransitionTiming(node, duration) : () => undefined;
+    // Svelte skips transition ticks when duration is zero, so complete the
+    // Bootstrap class state ourselves for explicit no-animation transitions.
+    if (duration === 0) {
+        node.classList.remove('collapsing');
+        node.classList.add('collapse', 'show');
+        node.style[stylePropName] = '';
+        restoreTransitionTiming();
+    }
     return {
         duration,
         css: (_progress, _remaining) => 'overflow: hidden;',
@@ -26,6 +78,7 @@ export function collapseIn(node, params) {
                 node.classList.remove('collapsing');
                 node.classList.add('collapse', 'show');
                 node.style[stylePropName] = '';
+                restoreTransitionTiming();
             }
         }
     };
@@ -38,7 +91,15 @@ export function collapseOut(node, params) {
     // Bootstrap collapse semantics: start with "collapsing" state, remove "collapse" and "show"
     node.classList.add('collapsing');
     node.classList.remove('collapse', 'show');
-    const duration = getTransitionDuration(node);
+    const duration = resolveTransitionDuration(node, params.transitionDuration);
+    const restoreTransitionTiming = hasValidTransitionDuration(params.transitionDuration) ? applyTransitionTiming(node, duration) : () => undefined;
+    // See collapseIn: a zero-duration transition does not receive a final tick.
+    if (duration === 0) {
+        node.classList.remove('collapsing');
+        node.classList.add('collapse');
+        node.style[dimension] = '';
+        restoreTransitionTiming();
+    }
     return {
         duration,
         css: (_progress, _remaining) => 'overflow: hidden;',
@@ -52,6 +113,7 @@ export function collapseOut(node, params) {
                 // Completion: remove "collapsing", add "collapse" (but not "show")
                 node.classList.remove('collapsing');
                 node.classList.add('collapse');
+                restoreTransitionTiming();
             }
         }
     };
@@ -59,17 +121,18 @@ export function collapseOut(node, params) {
 export function getTransitionDuration(element) {
     if (!element)
         return 0;
-    // Read CSS transition-duration and transition-delay from computed styles
-    let { transitionDuration, transitionDelay } = window.getComputedStyle(element);
-    const floatTransitionDuration = Number.parseFloat(transitionDuration);
-    const floatTransitionDelay = Number.parseFloat(transitionDelay);
-    // Return 0 if no transition is configured
-    if (!floatTransitionDuration && !floatTransitionDelay) {
-        return 0;
-    }
-    // If multiple durations are defined (comma-separated), take the first one
-    transitionDuration = transitionDuration.split(',')[0];
-    transitionDelay = transitionDelay.split(',')[0];
-    // Return total duration in milliseconds (duration + delay)
-    return (Number.parseFloat(transitionDuration) + Number.parseFloat(transitionDelay)) * 1000;
+    const { transitionDuration, transitionDelay } = window.getComputedStyle(element);
+    const parseTime = (value, allowNegative) => {
+        const firstValue = value.split(',')[0]?.trim() ?? '';
+        const match = /^([+-]?(?:\d+(?:\.\d*)?|\.\d+))(ms|s)$/i.exec(firstValue);
+        if (!match)
+            return 0;
+        const amount = Number(match[1]);
+        if (!Number.isFinite(amount) || (!allowNegative && amount < 0))
+            return 0;
+        return match[2]?.toLowerCase() === 'ms' ? amount : amount * 1000;
+    };
+    const duration = parseTime(transitionDuration, false);
+    const delay = parseTime(transitionDelay, true);
+    return Math.max(0, duration + delay);
 }

package/dist/Collapse/types.d.ts

@@ -2,6 +2,7 @@ import type { DivElement } from '../common/types.js';
 export type CollapseTransitionStylePropName = 'width' | 'height';
 export type CollapseTransitionParams = {
     isHorizontal?: boolean;
+    transitionDuration?: number;
 };
 export type CollapseRootProps = DivElement & {
     isHorizontal?: boolean;

package/dist/Dropdown/dropdown-item.svelte

@@ -22,6 +22,7 @@ A clickable item within a dropdown menu.
 <script lang="ts">/* eslint-disable @typescript-eslint/no-explicit-any -- restOfProps spread targets a union element type that is not spreadable without as any */
 import { uniqueClsx } from '../common/css.js';
 import { noop } from '../common/noop.js';
+import { onDestroy, onMount } from 'svelte';
 import { DropdownItemState, initDropdownItemState } from './dropdown.svelte.js';
 // Generate a unique ID for the dropdown item
 const uid = $props.id();
@@ -40,6 +41,8 @@ const itemState = initDropdownItemState({
         return isDisabled;
     }
 });
+onMount(() => itemState.root.scheduleReorderItems());
+onDestroy(() => itemState.root.unregisterItem(itemState));
 let isAnchor = $derived(Boolean(href));
 let elementType = $derived(isAnchor ? 'a' : 'button');
 let classes = $derived(uniqueClsx('dropdown-item', {
@@ -47,6 +50,10 @@ let classes = $derived(uniqueClsx('dropdown-item', {
     disabled: isDisabled
 }, classValues));
 const handleClick = (event) => {
+    if (isDisabled) {
+        event.preventDefault();
+        return;
+    }
     if (href && href === '#!') {
         event.preventDefault();
     }

package/dist/Dropdown/dropdown.svelte.js

@@ -13,6 +13,7 @@ export class DropdownRootState {
     #isNavItem = $state(false);
     #isShown = $state(false);
     #items = $state([]);
+    #reorderScheduled = false;
     ariaLabelledBy = $state(undefined); // Used for accessibility, linking the dropdown to a label.
     constructor(props) {
         this.props = props;
@@ -25,7 +26,10 @@ export class DropdownRootState {
         this.focusOnNextItem = this.focusOnNextItem.bind(this);
         this.focusOnPreviousItem = this.focusOnPreviousItem.bind(this);
         this.registerItem = this.registerItem.bind(this);
+        this.reorderItems = this.reorderItems.bind(this);
+        this.scheduleReorderItems = this.scheduleReorderItems.bind(this);
         this.toggleIsShown = this.toggleIsShown.bind(this);
+        this.unregisterItem = this.unregisterItem.bind(this);
     }
     get activeItemIndex() {
         return this.#activeItemIndex;
@@ -79,22 +83,50 @@ export class DropdownRootState {
         return this.#isShown;
     }
     focusOnNextItem() {
-        if (this.#items.length === 0) {
-            return;
-        }
-        this.#activeItemIndex = (this.#activeItemIndex + 1) % this.#items.length;
-        this.#items[this.#activeItemIndex]?.props.elementRef?.focus();
+        this.focusOnItemInDirection(1);
     }
     focusOnPreviousItem() {
-        if (this.#items.length === 0) {
-            return;
-        }
-        this.#activeItemIndex = (this.#activeItemIndex - 1 + this.#items.length) % this.#items.length;
-        this.#items[this.#activeItemIndex]?.props.elementRef?.focus();
+        this.focusOnItemInDirection(-1);
     }
     registerItem(item) {
         item.itemIndex = this.#items.length; // Set the item's index based on current length.
-        this.#items.push(item);
+        this.#items = [...this.#items, item];
+    }
+    unregisterItem(item) {
+        const removedIndex = this.#items.indexOf(item);
+        if (removedIndex === -1) {
+            return;
+        }
+        const activeItem = this.#items[this.#activeItemIndex];
+        const remainingItems = this.#items.filter((registeredItem) => registeredItem !== item);
+        remainingItems.forEach((registeredItem, index) => (registeredItem.itemIndex = index));
+        this.#items = remainingItems;
+        this.#activeItemIndex = activeItem && activeItem !== item ? remainingItems.indexOf(activeItem) : -1;
+    }
+    reorderItems() {
+        const activeItem = this.#items[this.#activeItemIndex];
+        const orderedItems = [...this.#items].sort((first, second) => {
+            const firstElement = first.props.elementRef;
+            const secondElement = second.props.elementRef;
+            if (!firstElement || !secondElement || firstElement === secondElement) {
+                return firstElement ? -1 : secondElement ? 1 : 0;
+            }
+            const position = firstElement.compareDocumentPosition(secondElement);
+            return position & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : position & Node.DOCUMENT_POSITION_PRECEDING ? 1 : 0;
+        });
+        orderedItems.forEach((item, index) => (item.itemIndex = index));
+        this.#items = orderedItems;
+        this.#activeItemIndex = activeItem ? orderedItems.indexOf(activeItem) : -1;
+    }
+    scheduleReorderItems() {
+        if (this.#reorderScheduled) {
+            return;
+        }
+        this.#reorderScheduled = true;
+        queueMicrotask(() => {
+            this.#reorderScheduled = false;
+            this.reorderItems();
+        });
     }
     toggleIsShown(event) {
         if (!this.#isShown) {
@@ -112,6 +144,24 @@ export class DropdownRootState {
             this.props.onHidden?.(event);
         }
     }
+    focusOnItemInDirection(direction) {
+        this.reorderItems();
+        let itemIndex = this.#activeItemIndex === -1
+            ? direction === 1
+                ? 0
+                : this.#items.length - 1
+            : (this.#activeItemIndex + direction + this.#items.length) % this.#items.length;
+        for (let count = 0; count < this.#items.length; count += 1) {
+            const item = this.#items[itemIndex];
+            if (item && !item.props.isDisabled) {
+                this.#activeItemIndex = itemIndex;
+                item.props.elementRef?.focus();
+                return;
+            }
+            itemIndex = (itemIndex + direction + this.#items.length) % this.#items.length;
+        }
+        this.#activeItemIndex = -1;
+    }
 }
 export class DropdownToggleState {
     props;
@@ -210,15 +260,9 @@ export class DropdownMenuState {
         if (!this.isShown) {
             return;
         }
-        if (!this.root.props.id) {
-            return;
-        }
         const target = event.target;
-        // Check if the click occurred within this specific dropdown instance.
-        // This prevents closing if a click happens inside the dropdown menu or on its toggle.
-        const nearestDropdown = target.closest(`#${CSS.escape(this.root.props.id)}`);
-        if (nearestDropdown && nearestDropdown.id === this.root.props.id) {
-            // The click is within the current dropdown, so do nothing.
+        if (this.#elementRef?.contains(target) || this.#rootElementRef?.contains(target)) {
+            // The click is within this menu or its toggle/root, so do nothing.
             return;
         }
         // Only close on outside clicks if autoClose is true or 'outside'
@@ -351,6 +395,9 @@ export class DropdownItemState {
     }
     // When a dropdown item is clicked, it should typically close the dropdown.
     onclick(event) {
+        if (this.props.isDisabled) {
+            return;
+        }
         // Only close on item clicks if autoClose is true or 'inside'
         // false: only close on toggle click (ignore item clicks)
         // 'inside': close on item/toggle clicks (ignore body clicks)

package/dist/Form/form-check-input.svelte

@@ -44,7 +44,7 @@ Bootstrap-styled checkbox input component for boolean selections.
 - `isValid` (boolean): Optional. Indicates whether the input is valid. If undefined, no validation styles are applied.
 -->
 <script lang="ts">import { noop, uniqueClsx } from '../common/index.js';
-let { checked = $bindable(false), class: classValues, elementRef = $bindable(null), group = $bindable(null), isIndeterminate, isInvalid, isValid, onchange = noop, value = undefined, ...restOfProps } = $props();
+let { 'aria-invalid': ariaInvalid, checked = $bindable(false), class: classValues, elementRef = $bindable(null), group = $bindable(null), isIndeterminate, isInvalid, isValid, onchange = noop, value = undefined, ...restOfProps } = $props();
 let classes = $derived(uniqueClsx('form-check-input', {
     'is-valid': isValid,
     'is-invalid': isInvalid
@@ -70,8 +70,8 @@ const handleChange = (event) => {
     }
 };
 $effect(() => {
-    if (elementRef && isIndeterminate !== undefined) {
-        elementRef.indeterminate = isIndeterminate;
+    if (elementRef) {
+        elementRef.indeterminate = isIndeterminate === true;
     }
 });
 $effect(() => {
@@ -82,11 +82,11 @@ $effect(() => {
 </script>
 
 <input
-    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : undefined}
+    {...restOfProps}
+    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : ariaInvalid}
     bind:this={elementRef}
     bind:checked
     class={classes}
     onchange={handleChange}
-    type="checkbox"
     {value}
-    {...restOfProps} />
+    type="checkbox" />

package/dist/Form/form-color-input.svelte

@@ -26,7 +26,8 @@ Bootstrap-styled color picker input component.
 - `value` (string): Optional. The color value in hex format (e.g., "#563d7c"). If undefined, the input is empty.
 -->
 <script lang="ts">import { uniqueClsx } from '../common/css.js';
-let { class: classValues, elementRef = $bindable(null), isInvalid, isValid, sizing, value = $bindable('#000000'), ...restOfProps } = $props();
+import { noop } from '../common/noop.js';
+let { 'aria-invalid': ariaInvalid, class: classValues, elementRef = $bindable(null), isInvalid, isValid, oninput = noop, sizing, value = $bindable('#000000'), ...restOfProps } = $props();
 let classes = $derived(uniqueClsx('form-control', 'form-control-color', {
     [`form-control-${sizing}`]: !!sizing,
     'is-valid': isValid,
@@ -43,12 +44,16 @@ $effect(() => {
         input.value = normalized;
     }
 });
+const handleInput = (event) => {
+    value = event.currentTarget.value;
+    oninput?.(event);
+};
 </script>
 
 <input
     {...restOfProps}
-    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : undefined}
+    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : ariaInvalid}
     bind:this={elementRef}
     class={classes}
-    oninput={(event) => (value = event.currentTarget.value)}
+    oninput={handleInput}
     type="color" />

package/dist/Form/form-date-input.svelte

@@ -42,7 +42,7 @@ Bootstrap-styled date input component for selecting dates.
 - `value` (string): Optional. The date value in the format "YYYY-MM-DD". If undefined, the input is empty.
 -->
 <script lang="ts">import { uniqueClsx } from '../common/css.js';
-let { autocomplete = 'off', class: classValues, 'data-form-type': dataFormType = 'email', 'data-lpignore': dataLpignore = undefined, elementRef = $bindable(null), isInvalid, isPlaintext = false, isValid, sizing, value = $bindable(undefined), ...restOfProps } = $props();
+let { 'aria-invalid': ariaInvalid, autocomplete = 'off', class: classValues, 'data-form-type': dataFormType = 'email', 'data-lpignore': dataLpignore = undefined, elementRef = $bindable(null), isInvalid, isPlaintext = false, isValid, sizing, value = $bindable(undefined), ...restOfProps } = $props();
 let classes = $derived(uniqueClsx({
     'form-control': !isPlaintext,
     'form-control-plaintext': isPlaintext,
@@ -53,12 +53,12 @@ let classes = $derived(uniqueClsx({
 </script>
 
 <input
-    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : undefined}
+    {...restOfProps}
+    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : ariaInvalid}
     {autocomplete}
     bind:this={elementRef}
     bind:value
     class={classes}
     data-form-type={autocomplete == 'off' ? 'other' : dataFormType}
     data-lpignore={autocomplete == 'off' ? 'true' : dataLpignore}
-    type="date"
-    {...restOfProps} />
+    type="date" />

package/dist/Form/form-datetime-local-input.svelte

@@ -41,7 +41,7 @@ Bootstrap-styled datetime-local input component for selecting both date and time
 - `value` (string): Optional. The datetime-local value in the format "YYYY-MM-DDTHH:MM". If undefined, the input is empty.
 -->
 <script lang="ts">import { uniqueClsx } from '../common/css.js';
-let { class: classValues, elementRef = $bindable(null), isInvalid, isPlaintext = false, isValid, sizing, value = $bindable(undefined), ...restOfProps } = $props();
+let { 'aria-invalid': ariaInvalid, class: classValues, elementRef = $bindable(null), isInvalid, isPlaintext = false, isValid, sizing, value = $bindable(undefined), ...restOfProps } = $props();
 let classes = $derived(uniqueClsx({
     'form-control': !isPlaintext,
     'form-control-plaintext': isPlaintext,
@@ -52,9 +52,9 @@ let classes = $derived(uniqueClsx({
 </script>
 
 <input
-    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : undefined}
+    {...restOfProps}
+    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : ariaInvalid}
     bind:this={elementRef}
     bind:value
     class={classes}
-    type="datetime-local"
-    {...restOfProps} />
+    type="datetime-local" />

package/dist/Form/form-email-input.svelte

@@ -42,7 +42,7 @@ Bootstrap-styled email input component for email address entry.
 - `value` (string): Optional. The email address value. If undefined, the input is empty.
 -->
 <script lang="ts">import { uniqueClsx } from '../common/css.js';
-let { autocomplete = 'off', class: classValues, 'data-form-type': dataFormType = 'email', 'data-lpignore': dataLpignore = undefined, elementRef = $bindable(null), isInvalid, isPlaintext = false, isValid, sizing, value = $bindable(undefined), ...restOfProps } = $props();
+let { 'aria-invalid': ariaInvalid, autocomplete = 'off', class: classValues, 'data-form-type': dataFormType = 'email', 'data-lpignore': dataLpignore = undefined, elementRef = $bindable(null), isInvalid, isPlaintext = false, isValid, sizing, value = $bindable(undefined), ...restOfProps } = $props();
 let classes = $derived(uniqueClsx({
     'form-control': !isPlaintext,
     'form-control-plaintext': isPlaintext,
@@ -53,12 +53,12 @@ let classes = $derived(uniqueClsx({
 </script>
 
 <input
-    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : undefined}
+    {...restOfProps}
+    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : ariaInvalid}
     {autocomplete}
     bind:this={elementRef}
     bind:value
     class={classes}
     data-form-type={autocomplete == 'off' ? 'other' : dataFormType}
     data-lpignore={autocomplete == 'off' ? 'true' : dataLpignore}
-    type="email"
-    {...restOfProps} />
+    type="email" />

package/dist/Form/form-file-input.svelte

@@ -23,21 +23,61 @@ Bootstrap-styled file input component for file uploads.
 - `isInvalid` (boolean): Optional. Indicates whether the input is invalid. If undefined, no validation styles are applied.
 - `isValid` (boolean): Optional. Indicates whether the input is valid. If undefined, no validation styles are applied.
 - `sizing` ('sm' | 'lg'): Optional. Controls the size of the input element.
-- `value` (File | File[]): Optional. The file(s) selected in the input. If undefined, the input is empty.
+- `files` (FileList | null): Optional. Binds the platform file list. Defaults to null.
+- `value` (string): Deprecated compatibility binding. Prefer `files`; non-empty parent values are ignored by the platform input.
 -->
 <script lang="ts">import { uniqueClsx } from '../common/css.js';
-let { class: classValues, elementRef = $bindable(null), isInvalid, isValid, sizing, value = $bindable(undefined), ...restOfProps } = $props();
+let { 'aria-invalid': ariaInvalid, class: classValues, elementRef = $bindable(null), files = $bindable(null), isInvalid, isValid, onchange, sizing, value = $bindable(undefined), ...restOfProps } = $props();
 let classes = $derived(uniqueClsx('form-control', {
     [`form-control-${sizing}`]: !!sizing,
     'is-valid': isValid,
     'is-invalid': isInvalid
 }, classValues));
+const handleChange = (event) => {
+    files = event.currentTarget.files;
+    value = event.currentTarget.value;
+    onchange?.(event);
+};
+$effect(() => {
+    const input = elementRef;
+    const requestedValue = value;
+    if (input && requestedValue === '' && input.value !== '') {
+        input.value = '';
+        if (files !== null) {
+            files = null;
+        }
+    }
+    if (input && files === null) {
+        if (input.value !== '') {
+            input.value = '';
+            if (value !== '') {
+                value = '';
+            }
+        }
+        return;
+    }
+    if (input && input.files !== files) {
+        try {
+            // Let the platform setter validate FileList identity so genuine
+            // cross-realm FileLists are not rejected by an instanceof check.
+            input.files = files;
+        }
+        catch {
+            input.value = '';
+            value = '';
+            if (files !== null) {
+                files = null;
+            }
+        }
+    }
+});
 </script>
 
 <input
-    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : undefined}
+    {...restOfProps}
+    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : ariaInvalid}
     bind:this={elementRef}
-    bind:value
     class={classes}
-    type="file"
-    {...restOfProps} />
+    onchange={handleChange}
+    value={undefined}
+    type="file" />

package/dist/Form/form-file-input.svelte.d.ts

@@ -23,8 +23,9 @@ import type { Form } from './index.js';
  * - `isInvalid` (boolean): Optional. Indicates whether the input is invalid. If undefined, no validation styles are applied.
  * - `isValid` (boolean): Optional. Indicates whether the input is valid. If undefined, no validation styles are applied.
  * - `sizing` ('sm' | 'lg'): Optional. Controls the size of the input element.
- * - `value` (File | File[]): Optional. The file(s) selected in the input. If undefined, the input is empty.
+ * - `files` (FileList | null): Optional. Binds the platform file list. Defaults to null.
+ * - `value` (string): Deprecated compatibility binding. Prefer `files`; non-empty parent values are ignored by the platform input.
  */
-declare const FormFileInput: import("svelte").Component<Form.FileInputProps, {}, "value" | "elementRef">;
+declare const FormFileInput: import("svelte").Component<Form.FileInputProps, {}, "value" | "elementRef" | "files">;
 type FormFileInput = ReturnType<typeof FormFileInput>;
 export default FormFileInput;

package/dist/Form/form-hidden-input.svelte

@@ -15,4 +15,4 @@ Bootstrap-styled hidden input component for passing data in forms without visual
 export {};
 </script>
 
-<input bind:this={elementRef} bind:value type="hidden" {...restOfProps} />
+<input {...restOfProps} bind:this={elementRef} bind:value type="hidden" />

package/dist/Form/form-hidden-input.svelte.d.ts

@@ -11,6 +11,6 @@ import type { Form } from './index.js';
  * - `elementRef` (HTMLInputElement): Optional. Reference to the input DOM element.
  * - `value` (any): Optional. The value of the hidden input. If undefined, the input is empty.
  */
-declare const FormHiddenInput: import("svelte").Component<Form.FileInputProps, {}, "value" | "elementRef">;
+declare const FormHiddenInput: import("svelte").Component<Form.HiddenInputProps, {}, "value" | "elementRef">;
 type FormHiddenInput = ReturnType<typeof FormHiddenInput>;
 export default FormHiddenInput;

package/dist/Form/form-image-input.svelte

@@ -27,4 +27,4 @@ let { class: classValues, elementRef = $bindable(null), ...restOfProps } = $prop
 let classes = $derived(uniqueClsx(classValues));
 </script>
 
-<input bind:this={elementRef} class={classes} type="image" {...restOfProps} />
+<input {...restOfProps} bind:this={elementRef} class={classes} type="image" />

package/dist/Form/form-image-input.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Form } from './index.js';
 /**
  * ## Form.ImageInput
  * Bootstrap-styled image input component that acts as a graphical submit button.
@@ -21,6 +22,6 @@
  * - `class` (string): Optional. Additional CSS classes to apply to the image input.
  * - `elementRef` (HTMLInputElement): Optional. Reference to the input DOM element.
  */
-declare const FormImageInput: import("svelte").Component<import("../index.js").InputElement, {}, "elementRef">;
+declare const FormImageInput: import("svelte").Component<Form.ImageInputProps, {}, "elementRef">;
 type FormImageInput = ReturnType<typeof FormImageInput>;
 export default FormImageInput;

package/dist/Form/form-month-input.svelte

@@ -44,7 +44,7 @@ Bootstrap-styled month input component for selecting a specific month and year.
 - `value` (string): Optional. The month value in the format "YYYY-MM". If undefined, the input is empty.
 -->
 <script lang="ts">import { uniqueClsx } from '../common/css.js';
-let { class: classValues, elementRef = $bindable(null), isInvalid, isPlaintext = false, isValid, sizing, value = $bindable(undefined), ...restOfProps } = $props();
+let { 'aria-invalid': ariaInvalid, class: classValues, elementRef = $bindable(null), isInvalid, isPlaintext = false, isValid, sizing, value = $bindable(undefined), ...restOfProps } = $props();
 let classes = $derived(uniqueClsx({
     'form-control': !isPlaintext,
     'form-control-plaintext': isPlaintext,
@@ -55,9 +55,9 @@ let classes = $derived(uniqueClsx({
 </script>
 
 <input
-    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : undefined}
+    {...restOfProps}
+    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : ariaInvalid}
     bind:this={elementRef}
     bind:value
     class={classes}
-    type="month"
-    {...restOfProps} />
+    type="month" />

package/dist/Form/form-number-input.svelte

@@ -43,7 +43,7 @@ Bootstrap-styled numeric input component for entering numbers.
 - `value` (number): Optional. The numeric value of the input. If undefined, the input is empty.
 -->
 <script lang="ts">import { uniqueClsx } from '../common/css.js';
-let { class: classValues, elementRef = $bindable(null), isInvalid, isPlaintext = false, isValid, sizing, value = $bindable(undefined), ...restOfProps } = $props();
+let { 'aria-invalid': ariaInvalid, class: classValues, elementRef = $bindable(null), isInvalid, isPlaintext = false, isValid, sizing, value = $bindable(undefined), ...restOfProps } = $props();
 let classes = $derived(uniqueClsx({
     'form-control': !isPlaintext,
     'form-control-plaintext': isPlaintext,
@@ -54,9 +54,9 @@ let classes = $derived(uniqueClsx({
 </script>
 
 <input
-    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : undefined}
+    {...restOfProps}
+    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : ariaInvalid}
     bind:this={elementRef}
     bind:value
     class={classes}
-    type="number"
-    {...restOfProps} />
+    type="number" />

package/dist/Form/form-password-input.svelte

@@ -37,7 +37,7 @@ Bootstrap-styled password input component with support for various states.
 - `value` (string): Optional. The password value. If undefined, the input is empty.
 -->
 <script lang="ts">import { uniqueClsx } from '../common/css.js';
-let { autocomplete = 'off', class: classValues, 'data-form-type': dataFormType = 'password', 'data-lpignore': dataLpignore = undefined, elementRef = $bindable(null), isInvalid, isPlaintext = false, isValid, sizing, showPassword = false, value = $bindable(undefined), ...restOfProps } = $props();
+let { 'aria-invalid': ariaInvalid, autocomplete = 'off', class: classValues, 'data-form-type': dataFormType = 'password', 'data-lpignore': dataLpignore = undefined, elementRef = $bindable(null), isInvalid, isPlaintext = false, isValid, sizing, showPassword = false, value = $bindable(undefined), ...restOfProps } = $props();
 let classes = $derived(uniqueClsx({
     'form-control': !isPlaintext,
     'form-control-plaintext': isPlaintext,
@@ -49,12 +49,12 @@ let inputType = $derived(showPassword ? 'text' : 'password');
 </script>
 
 <input
-    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : undefined}
+    {...restOfProps}
+    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : ariaInvalid}
     {autocomplete}
     bind:this={elementRef}
     bind:value
     class={classes}
     data-form-type={autocomplete == 'off' ? 'other' : dataFormType}
     data-lpignore={autocomplete == 'off' ? 'true' : dataLpignore}
-    type={inputType}
-    {...restOfProps} />
+    type={inputType} />