@winkintel/bootstrap-svelte 1.0.5 → 1.0.6

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

@@ -32,16 +32,66 @@ Bootstrap-styled radio input component for single selection options.
 ### Props
 - `class` (string): Optional. Additional CSS classes to apply to the radio.
 - `elementRef` (HTMLInputElement): Optional. Reference to the radio DOM element.
-- `group` (string): Optional. Name of the radio group to which this input belongs. If undefined, the radio input is not grouped.
+- `checked` (boolean): Optional. Controls checked state once it is boolean; undefined is uncontrolled.
+- `group` (string): Optional. Binds this radio's selected value; it may initially be undefined.
 - `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.
 -->
 <script lang="ts">import { uniqueClsx } from '../common/css.js';
-let { class: classValues, elementRef = $bindable(null), group = $bindable(undefined), isInvalid, isValid, ...restOfProps } = $props();
+import { noop } from '../common/noop.js';
+let { 'aria-invalid': ariaInvalid, checked = $bindable(undefined), class: classValues, elementRef = $bindable(null), group = $bindable(undefined), isInvalid, isValid, onchange = noop, value = 'on', ...restOfProps } = $props();
+let controlsChecked = $derived(checked !== undefined);
+const unset = Symbol('unset');
+const controlledSnapshot = { checked: unset, group: unset };
 let classes = $derived(uniqueClsx('form-check-input', {
     'is-valid': isValid,
     'is-invalid': isInvalid
 }, classValues));
+$effect(() => {
+    const currentChecked = checked;
+    const currentGroup = group;
+    if (!controlsChecked) {
+        controlledSnapshot.checked = unset;
+        controlledSnapshot.group = unset;
+        return;
+    }
+    const isInitialSync = controlledSnapshot.checked === unset;
+    const checkedChanged = !isInitialSync && controlledSnapshot.checked !== currentChecked;
+    const groupChanged = !isInitialSync && controlledSnapshot.group !== currentGroup;
+    controlledSnapshot.checked = currentChecked;
+    controlledSnapshot.group = currentGroup;
+    // `checked` establishes the initial selection and drives later explicit
+    // checked updates. Group updates are authoritative otherwise so sibling
+    // radios and parent assignments can clear this radio without ping-ponging.
+    if (isInitialSync || (checkedChanged && !groupChanged)) {
+        const nextGroup = currentChecked ? value : currentGroup === value ? undefined : currentGroup;
+        if (currentGroup !== nextGroup) {
+            group = nextGroup;
+        }
+    }
+    else if (groupChanged) {
+        const nextChecked = currentGroup === value;
+        if (currentChecked !== nextChecked) {
+            checked = nextChecked;
+        }
+    }
+});
+const handleChange = (event) => {
+    if (controlsChecked) {
+        checked = event.currentTarget.checked;
+    }
+    onchange?.(event);
+};
 </script>
 
-<input bind:this={elementRef} bind:group class={classes} type="radio" {...restOfProps} />
+<!-- svelte-ignore a11y_role_supports_aria_props_implicit -->
+<input
+    {...restOfProps}
+    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : ariaInvalid}
+    bind:this={elementRef}
+    bind:group
+    checked={controlsChecked ? checked : undefined}
+    class={classes}
+    onchange={handleChange}
+    {value}
+    type="radio" />

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

@@ -32,10 +32,11 @@ import type { Form } from './index.js';
  * ### Props
  * - `class` (string): Optional. Additional CSS classes to apply to the radio.
  * - `elementRef` (HTMLInputElement): Optional. Reference to the radio DOM element.
- * - `group` (string): Optional. Name of the radio group to which this input belongs. If undefined, the radio input is not grouped.
+ * - `checked` (boolean): Optional. Controls checked state once it is boolean; undefined is uncontrolled.
+ * - `group` (string): Optional. Binds this radio's selected value; it may initially be undefined.
  * - `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.
  */
-declare const FormRadioInput: import("svelte").Component<Form.RadioInputProps, {}, "elementRef" | "group">;
+declare const FormRadioInput: import("svelte").Component<Form.RadioInputProps, {}, "elementRef" | "group" | "checked">;
 type FormRadioInput = ReturnType<typeof FormRadioInput>;
 export default FormRadioInput;

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

@@ -40,4 +40,4 @@ let { class: classValues, elementRef = $bindable(null), value = $bindable(undefi
 let classes = $derived(uniqueClsx('form-range', classValues));
 </script>
 
-<input bind:this={elementRef} bind:value class={classes} type="range" {...restOfProps} />
+<input {...restOfProps} bind:this={elementRef} bind:value class={classes} type="range" />

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

@@ -1,3 +1,4 @@
+import type { Form } from './index.js';
 /**
  * ## Form.RangeInput
  * Bootstrap-styled range slider input component for selecting a value within a range.
@@ -34,6 +35,6 @@
  * - `elementRef` (HTMLInputElement): Optional. Reference to the input DOM element.
  * - `value` (number): Optional. The numeric value of the input. If undefined, the input is empty.
  */
-declare const FormRangeInput: import("svelte").Component<import("../index.js").InputElement, {}, "value" | "elementRef">;
+declare const FormRangeInput: import("svelte").Component<Form.RangeInputProps, {}, "value" | "elementRef">;
 type FormRangeInput = ReturnType<typeof FormRangeInput>;
 export default FormRangeInput;

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

@@ -41,7 +41,7 @@ Bootstrap-styled search input component with search-specific features.
 - `value` (string): Optional. The search 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 = 'search', '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 = 'search', '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,
@@ -52,12 +52,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="search"
-    {...restOfProps} />
+    type="search" />

package/dist/Form/form-select.svelte

@@ -55,7 +55,7 @@ Bootstrap-styled select input component for dropdown selection.
 - `value` (string): Optional. The selected value of the select. If undefined, the select is empty.
 -->
 <script lang="ts">import { uniqueClsx } from '../common/css.js';
-let { children, class: classValues, elementRef = $bindable(null), isInvalid, isValid, multiple, sizing, value = $bindable(multiple ? [] : undefined), ...restOfProps } = $props();
+let { 'aria-invalid': ariaInvalid, children, class: classValues, elementRef = $bindable(null), isInvalid, isValid, multiple, sizing, value = $bindable(multiple ? [] : undefined), ...restOfProps } = $props();
 let classes = $derived(uniqueClsx('form-select', {
     [`form-select-${sizing}`]: !!sizing,
     'is-valid': isValid,
@@ -65,21 +65,21 @@ let classes = $derived(uniqueClsx('form-select', {
 
 {#if multiple}
     <select
-        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}
-        multiple
-        {...restOfProps}>
+        multiple>
         {@render children?.()}
     </select>
 {:else}
     <select
-        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}
-        {...restOfProps}>
+        class={classes}>
         {@render children?.()}
     </select>
 {/if}

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

@@ -37,7 +37,7 @@ Bootstrap-styled switch input component for toggling between two states.
 - `isValid` (boolean): Optional. Indicates whether the input is valid. If undefined, no validation styles are applied.
 -->
 <script lang="ts">import { uniqueClsx } from '../common/css.js';
-let { checked = $bindable(undefined), class: classValues, elementRef = $bindable(null), isInvalid, isValid, ...restOfProps } = $props();
+let { 'aria-invalid': ariaInvalid, checked = $bindable(undefined), class: classValues, elementRef = $bindable(null), isInvalid, isValid, ...restOfProps } = $props();
 let classes = $derived(uniqueClsx('form-check-input', {
     'is-valid': isValid,
     'is-invalid': isInvalid
@@ -45,10 +45,10 @@ let classes = $derived(uniqueClsx('form-check-input', {
 </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}
     role="switch"
-    type="checkbox"
-    {...restOfProps} />
+    type="checkbox" />

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

@@ -52,7 +52,7 @@ Bootstrap-styled telephone input component for entering phone numbers.
 -->
 <script lang="ts">import { uniqueClsx } from '../common/css.js';
 import { noop } from '../common/index.js';
-let { class: classValues, elementRef = $bindable(null), isInvalid, isPlaintext = false, isValid, mask, oninput = noop, sizing, value = $bindable(undefined), ...restOfProps } = $props();
+let { 'aria-invalid': ariaInvalid, class: classValues, elementRef = $bindable(null), isInvalid, isPlaintext = false, isValid, mask, oninput = noop, sizing, value = $bindable(undefined), ...restOfProps } = $props();
 let classes = $derived(uniqueClsx({
     'form-control': !isPlaintext,
     'form-control-plaintext': isPlaintext,
@@ -120,10 +120,10 @@ const handleInput = (event) => {
 </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}
     oninput={handleInput}
-    type="tel"
-    {...restOfProps} />
+    type="tel" />

package/dist/Form/form-text-area.svelte

@@ -34,7 +34,7 @@ Bootstrap-styled textarea component for multi-line text input.
 - `value` (string): Optional. The text value of the textarea. If undefined, the textarea is empty.
 -->
 <script lang="ts">import { uniqueClsx } from '../common/css.js';
-let { class: classValues, elementRef = $bindable(null), isInvalid, isResizable = true, isValid, sizing, style, value = $bindable(undefined), ...restOfProps } = $props();
+let { 'aria-invalid': ariaInvalid, class: classValues, elementRef = $bindable(null), isInvalid, isResizable = true, isValid, sizing, style, value = $bindable(undefined), ...restOfProps } = $props();
 let classes = $derived(uniqueClsx('form-control', {
     [`form-control-${sizing}`]: !!sizing,
     'is-valid': isValid,
@@ -49,9 +49,9 @@ let styles = $derived.by(() => {
 </script>
 
 <textarea
-    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}
-    style={styles}
-    {...restOfProps}></textarea>
+    style={styles}></textarea>

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

@@ -33,7 +33,7 @@ Input field component for standard text values with Bootstrap styling.
 - `value` (string): Optional. The text value of the input. If undefined, the input is empty.
 -->
 <script lang="ts">import { uniqueClsx } from '../common/css.js';
-let { autocomplete = 'off', class: classValues, 'data-form-type': dataFormType = undefined, '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 = undefined, '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,
@@ -44,12 +44,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="text"
-    {...restOfProps} />
+    type="text" />

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

@@ -43,7 +43,7 @@ Bootstrap-styled time input component for selecting a specific time.
 - `value` (string): Optional. The time value in the format "HH: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,
@@ -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="time"
-    {...restOfProps} />
+    type="time" />

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

@@ -41,7 +41,7 @@ Bootstrap-styled URL input component for entering website addresses.
 - `value` (string): Optional. The URL value. 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="url"
-    {...restOfProps} />
+    type="url" />

package/dist/Form/form-week-Input.svelte

@@ -43,7 +43,7 @@ Bootstrap-styled week input component for selecting a specific week of a year.
 - `value` (string): Optional. The week value in the format "YYYY-Www". 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="week"
-    {...restOfProps} />
+    type="week" />

package/dist/Form/types.d.ts

@@ -1,6 +1,10 @@
 import type { enhance } from '$app/forms';
 import type { DivElement, FormControlSize, FormElement, FormInputGroupSize, InputElement, LabelElement, SelectElement, SpanElement, TextAreaElement } from '../common/types.js';
-export type FormCheckInputProps = InputElement & {
+type FixedInputType<Type extends string> = {
+    /** The matching literal remains accepted; mismatched input types are rejected because specialized inputs own this attribute. */
+    type?: Type;
+};
+export type FormCheckInputProps = Omit<InputElement, 'type'> & FixedInputType<'checkbox'> & {
     isIndeterminate?: boolean;
     isInvalid?: boolean;
     isValid?: boolean;
@@ -12,24 +16,24 @@ export type FormCheckProps = DivElement & {
     isInline?: boolean;
     isSwitch?: boolean;
 };
-export type FormColorInputProps = InputElement & {
+export type FormColorInputProps = Omit<InputElement, 'type'> & FixedInputType<'color'> & {
     isInvalid?: boolean;
     isValid?: boolean;
     sizing?: FormControlSize;
 };
-export type FormDateInputProps = InputElement & {
+export type FormDateInputProps = Omit<InputElement, 'type'> & FixedInputType<'date'> & {
     isInvalid?: boolean;
     isPlaintext?: boolean;
     isValid?: boolean;
     sizing?: FormControlSize;
 };
-export type FormDatetimeLocalInputProps = InputElement & {
+export type FormDatetimeLocalInputProps = Omit<InputElement, 'type'> & FixedInputType<'datetime-local'> & {
     isInvalid?: boolean;
     isPlaintext?: boolean;
     isValid?: boolean;
     sizing?: FormControlSize;
 };
-export type FormEmailInputProps = InputElement & {
+export type FormEmailInputProps = Omit<InputElement, 'type'> & FixedInputType<'email'> & {
     'data-form-type'?: string;
     'data-lpignore'?: string;
     isInvalid?: boolean;
@@ -42,15 +46,16 @@ export type FormFeedbackProps = DivElement & {
     isTooltip?: boolean;
     isValid?: boolean;
 };
-export type FormFileInputProps = InputElement & {
+export type FormFileInputProps = Omit<InputElement, 'files' | 'type'> & FixedInputType<'file'> & {
+    files?: FileList | null;
     isInvalid?: boolean;
     isValid?: boolean;
     sizing?: FormControlSize;
 };
 export type FormFloatingProps = DivElement;
 export type FormHelperTextProps = DivElement;
-export type FormHiddenInputProps = InputElement;
-export type FormImageInputProps = InputElement;
+export type FormHiddenInputProps = Omit<InputElement, 'type'> & FixedInputType<'hidden'>;
+export type FormImageInputProps = Omit<InputElement, 'type'> & FixedInputType<'image'>;
 export type FormInputGroupProps = DivElement & {
     hasValidation?: boolean;
     noWrap?: boolean;
@@ -62,19 +67,19 @@ export type FormInputGroupTextProps = (SpanElement | LabelElement) & {
 export type FormInputLabelProps = LabelElement & {
     isFloating?: boolean;
 };
-export type FormMonthInputProps = InputElement & {
+export type FormMonthInputProps = Omit<InputElement, 'type'> & FixedInputType<'month'> & {
     isInvalid?: boolean;
     isPlaintext?: boolean;
     isValid?: boolean;
     sizing?: FormControlSize;
 };
-export type FormNumberInputProps = InputElement & {
+export type FormNumberInputProps = Omit<InputElement, 'type'> & FixedInputType<'number'> & {
     isInvalid?: boolean;
     isPlaintext?: boolean;
     isValid?: boolean;
     sizing?: FormControlSize;
 };
-export type FormPasswordInputProps = InputElement & {
+export type FormPasswordInputProps = Omit<InputElement, 'type'> & FixedInputType<'password'> & {
     autocomplete?: 'current-password' | 'new-password' | 'off' | 'on';
     'data-form-type'?: string;
     'data-lpignore'?: string;
@@ -84,18 +89,18 @@ export type FormPasswordInputProps = InputElement & {
     sizing?: FormControlSize;
     showPassword?: boolean;
 };
-export type FormRadioInputProps = InputElement & {
+export type FormRadioInputProps = Omit<InputElement, 'type'> & FixedInputType<'radio'> & {
     isInvalid?: boolean;
     isValid?: boolean;
 };
-export type FormRangeInputProps = InputElement;
+export type FormRangeInputProps = Omit<InputElement, 'type'> & FixedInputType<'range'>;
 export type FormRadioLabelProps = LabelElement;
 export type FormRootProps = FormElement & {
     enhance?: typeof enhance | ((el: HTMLFormElement, events?: any) => ReturnType<typeof enhance>);
     needsValidation?: boolean;
     wasValidated?: boolean;
 };
-export type FormSearchInputProps = InputElement & {
+export type FormSearchInputProps = Omit<InputElement, 'type'> & FixedInputType<'search'> & {
     'data-form-type'?: string;
     'data-lpignore'?: string;
     isInvalid?: boolean;
@@ -108,12 +113,12 @@ export type FormSelectProps = SelectElement & {
     isValid?: boolean;
     sizing?: FormControlSize;
 };
-export type FormSwitchInputProps = InputElement & {
+export type FormSwitchInputProps = Omit<InputElement, 'type'> & FixedInputType<'checkbox'> & {
     isInvalid?: boolean;
     isValid?: boolean;
 };
 export type FormSwitchLabelProps = LabelElement;
-export type FormTelephoneInputProps = InputElement & {
+export type FormTelephoneInputProps = Omit<InputElement, 'type'> & FixedInputType<'tel'> & {
     isInvalid?: boolean;
     isPlaintext?: boolean;
     isValid?: boolean;
@@ -140,7 +145,7 @@ export type FormTextAreaProps = TextAreaElement & {
     isValid?: boolean;
     sizing?: FormControlSize;
 };
-export type FormTextInputProps = InputElement & {
+export type FormTextInputProps = Omit<InputElement, 'type'> & FixedInputType<'text'> & {
     'data-form-type'?: string;
     'data-lpignore'?: string;
     isInvalid?: boolean;
@@ -148,21 +153,22 @@ export type FormTextInputProps = InputElement & {
     isValid?: boolean;
     sizing?: FormControlSize;
 };
-export type FormTimeInputProps = InputElement & {
+export type FormTimeInputProps = Omit<InputElement, 'type'> & FixedInputType<'time'> & {
     isInvalid?: boolean;
     isPlaintext?: boolean;
     isValid?: boolean;
     sizing?: FormControlSize;
 };
-export type FormUrlInputProps = InputElement & {
+export type FormUrlInputProps = Omit<InputElement, 'type'> & FixedInputType<'url'> & {
     isInvalid?: boolean;
     isPlaintext?: boolean;
     isValid?: boolean;
     sizing?: FormControlSize;
 };
-export type FormWeekInputProps = InputElement & {
+export type FormWeekInputProps = Omit<InputElement, 'type'> & FixedInputType<'week'> & {
     isInvalid?: boolean;
     isPlaintext?: boolean;
     isValid?: boolean;
     sizing?: FormControlSize;
 };
+export {};

package/dist/ListGroup/list-group-item-action.svelte

@@ -23,28 +23,35 @@ import { uniqueClsx } from '../common/css.js';
 import { noop } from '../common/noop.js';
 // Generate a unique ID for the element, in case one is not provided...
 const uid = $props.id();
-let { children, class: classValues, colorVariant, elementRef = $bindable(null), href, id = `list-group-item-action-${uid}`, isActive = false, isDisabled = false, onclick = noop, ...restOfProps } = $props();
-const isAnchor = $derived(Boolean(href));
+let { 'aria-current': ariaCurrent, 'aria-disabled': ariaDisabled, children, class: classValues, colorVariant, elementRef = $bindable(null), href, id = `list-group-item-action-${uid}`, isActive = false, isDisabled = false, onclick = noop, role: consumerRole, tabindex: consumerTabIndex, type: consumerType, ...restOfProps } = $props();
+const isAnchor = $derived(href !== undefined);
 const elementType = $derived(isAnchor ? 'a' : 'button');
 let classes = $derived(uniqueClsx('list-group-item', 'list-group-item-action', {
     active: isActive,
     disabled: isDisabled
 }, colorVariant && `list-group-item-${colorVariant}`, classValues));
 const handleClick = (event) => {
+    if (isDisabled) {
+        event.preventDefault();
+        return;
+    }
     onclick(event);
 };
 </script>
 
 <svelte:element
     this={elementType}
-    aria-current={isActive}
-    aria-disabled={isDisabled}
+    {...restOfProps as any}
+    aria-current={isActive ? 'page' : ariaCurrent}
+    aria-disabled={isDisabled ? 'true' : ariaDisabled}
     bind:this={elementRef}
     class={classes}
-    {href}
+    href={isAnchor && !isDisabled ? href : undefined}
     {id}
+    disabled={isAnchor ? undefined : isDisabled}
     onclick={handleClick}
-    type={isAnchor ? undefined : 'button'}
-    {...restOfProps as any}>
+    role={consumerRole}
+    tabindex={isDisabled ? -1 : consumerTabIndex}
+    type={isAnchor ? consumerType : 'button'}>
     {@render children?.()}
 </svelte:element>