@winkintel/bootstrap-svelte 0.0.1

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

@@ -0,0 +1,63 @@
+<!--
+@component
+## Form.MonthInput
+Bootstrap-styled month input component for selecting a specific month and year.
+
+@example
+```svelte
+// Default month input
+<Form.MonthInput title="Choose a month" value="2025-06" />
+
+// Disabled month input
+<Form.MonthInput disabled title="Choose a month" value="2025-06" />
+
+// Readonly month input
+<Form.MonthInput readonly title="Choose a month" value="2025-06" />
+
+// Readonly plaintext month input
+<Form.MonthInput isPlaintext readonly title="Choose a month" value="2025-06" />
+
+// Small sizing
+<Form.MonthInput sizing="sm" title="Choose a month" value="2025-06" />
+
+// Large sizing
+<Form.MonthInput sizing="lg" title="Choose a month" value="2025-06" />
+
+// With datalist
+<Form.MonthInput list="listOfMonths" title="Choose a month" />
+<datalist id="listOfMonths">
+    <option value="2025-01"></option>
+    <option value="2025-02"></option>
+    <option value="2025-03"></option>
+    <option value="2025-04"></option>
+    <option value="2025-05"></option>
+    <option value="2025-06"></option>
+</datalist>
+```
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the input.
+- `elementRef` (HTMLInputElement): Optional. Reference to the input DOM element.
+- `isInvalid` (boolean): Optional. Indicates whether the input is invalid. If undefined, no validation styles are applied.
+- `isPlaintext` (boolean): Optional. When true, renders as plaintext (no input border).
+- `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` (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 classes = $derived(uniqueClsx({
+    'form-control': !isPlaintext,
+    'form-control-plaintext': isPlaintext,
+    [`form-control-${sizing}`]: !!sizing,
+    'is-valid': isValid,
+    'is-invalid': isInvalid
+}, classValues));
+</script>
+
+<input
+    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : undefined}
+    bind:this={elementRef}
+    bind:value
+    class={classes}
+    type="month"
+    {...restOfProps} />

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

@@ -0,0 +1,48 @@
+import type { Form } from './index.js';
+/**
+ * ## Form.MonthInput
+ * Bootstrap-styled month input component for selecting a specific month and year.
+ *
+ * @example
+ * ```svelte
+ * // Default month input
+ * <Form.MonthInput title="Choose a month" value="2025-06" />
+ *
+ * // Disabled month input
+ * <Form.MonthInput disabled title="Choose a month" value="2025-06" />
+ *
+ * // Readonly month input
+ * <Form.MonthInput readonly title="Choose a month" value="2025-06" />
+ *
+ * // Readonly plaintext month input
+ * <Form.MonthInput isPlaintext readonly title="Choose a month" value="2025-06" />
+ *
+ * // Small sizing
+ * <Form.MonthInput sizing="sm" title="Choose a month" value="2025-06" />
+ *
+ * // Large sizing
+ * <Form.MonthInput sizing="lg" title="Choose a month" value="2025-06" />
+ *
+ * // With datalist
+ * <Form.MonthInput list="listOfMonths" title="Choose a month" />
+ * <datalist id="listOfMonths">
+ * <option value="2025-01"></option>
+ * <option value="2025-02"></option>
+ * <option value="2025-03"></option>
+ * <option value="2025-04"></option>
+ * <option value="2025-05"></option>
+ * <option value="2025-06"></option>
+ * </datalist>
+ * ```
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the input.
+ * - `elementRef` (HTMLInputElement): Optional. Reference to the input DOM element.
+ * - `isInvalid` (boolean): Optional. Indicates whether the input is invalid. If undefined, no validation styles are applied.
+ * - `isPlaintext` (boolean): Optional. When true, renders as plaintext (no input border).
+ * - `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` (string): Optional. The month value in the format "YYYY-MM". If undefined, the input is empty.
+ */
+declare const FormMonthInput: import("svelte").Component<Form.MonthInputProps, {}, "value" | "elementRef">;
+type FormMonthInput = ReturnType<typeof FormMonthInput>;
+export default FormMonthInput;

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

@@ -0,0 +1,62 @@
+<!--
+@component
+## Form.NumberInput
+Bootstrap-styled numeric input component for entering numbers.
+
+@example
+```svelte
+// Default number input
+<Form.NumberInput max="5" min="1" title="Set a number" value="1" />
+
+// Disabled number input
+<Form.NumberInput disabled max="5" min="1" title="Set a number" value="1" />
+
+// Readonly number input
+<Form.NumberInput max="5" min="1" readonly title="Set a number" value="1" />
+
+// Readonly plaintext number input
+<Form.NumberInput isPlaintext max="5" min="1" readonly title="Set a number" value="1" />
+
+// Small sizing
+<Form.NumberInput max="5" min="1" sizing="sm" title="Set a number" value="1" />
+
+// Large sizing
+<Form.NumberInput max="5" min="1" sizing="lg" title="Set a number" value="1" />
+
+// With datalist
+<Form.NumberInput list="listOfNumbers" max="5" min="1" title="Set a number" />
+<datalist id="listOfNumbers">
+    <option value="1"></option>
+    <option value="2"></option>
+    <option value="3"></option>
+    <option value="4"></option>
+    <option value="5"></option>
+</datalist>
+```
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the input.
+- `elementRef` (HTMLInputElement): Optional. Reference to the input DOM element.
+- `isInvalid` (boolean): Optional. Indicates whether the input is invalid. If undefined, no validation styles are applied.
+- `isPlaintext` (boolean): Optional. When true, renders as plaintext (no input border).
+- `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` (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 classes = $derived(uniqueClsx({
+    'form-control': !isPlaintext,
+    'form-control-plaintext': isPlaintext,
+    [`form-control-${sizing}`]: !!sizing,
+    'is-valid': isValid,
+    'is-invalid': isInvalid
+}, classValues));
+</script>
+
+<input
+    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : undefined}
+    bind:this={elementRef}
+    bind:value
+    class={classes}
+    type="number"
+    {...restOfProps} />

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

@@ -0,0 +1,47 @@
+import type { Form } from './index.js';
+/**
+ * ## Form.NumberInput
+ * Bootstrap-styled numeric input component for entering numbers.
+ *
+ * @example
+ * ```svelte
+ * // Default number input
+ * <Form.NumberInput max="5" min="1" title="Set a number" value="1" />
+ *
+ * // Disabled number input
+ * <Form.NumberInput disabled max="5" min="1" title="Set a number" value="1" />
+ *
+ * // Readonly number input
+ * <Form.NumberInput max="5" min="1" readonly title="Set a number" value="1" />
+ *
+ * // Readonly plaintext number input
+ * <Form.NumberInput isPlaintext max="5" min="1" readonly title="Set a number" value="1" />
+ *
+ * // Small sizing
+ * <Form.NumberInput max="5" min="1" sizing="sm" title="Set a number" value="1" />
+ *
+ * // Large sizing
+ * <Form.NumberInput max="5" min="1" sizing="lg" title="Set a number" value="1" />
+ *
+ * // With datalist
+ * <Form.NumberInput list="listOfNumbers" max="5" min="1" title="Set a number" />
+ * <datalist id="listOfNumbers">
+ * <option value="1"></option>
+ * <option value="2"></option>
+ * <option value="3"></option>
+ * <option value="4"></option>
+ * <option value="5"></option>
+ * </datalist>
+ * ```
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the input.
+ * - `elementRef` (HTMLInputElement): Optional. Reference to the input DOM element.
+ * - `isInvalid` (boolean): Optional. Indicates whether the input is invalid. If undefined, no validation styles are applied.
+ * - `isPlaintext` (boolean): Optional. When true, renders as plaintext (no input border).
+ * - `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` (number): Optional. The numeric value of the input. If undefined, the input is empty.
+ */
+declare const FormNumberInput: import("svelte").Component<Form.NumberInputProps, {}, "value" | "elementRef">;
+type FormNumberInput = ReturnType<typeof FormNumberInput>;
+export default FormNumberInput;

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

@@ -0,0 +1,60 @@
+<!--
+@component
+## Form.PasswordInput
+Bootstrap-styled password input component with support for various states.
+
+@example
+```svelte
+// Default password input
+<Form.PasswordInput title="Set a password" value="myP@55w0rd" />
+
+// Disabled password input
+<Form.PasswordInput disabled title="Set a password" value="myP@55w0rd" />
+
+// Readonly password input
+<Form.PasswordInput readonly title="Set a password" value="myP@55w0rd" />
+
+// Readonly plaintext password input
+<Form.PasswordInput isPlaintext readonly title="Set a password" value="myP@55w0rd" />
+
+// Small sizing
+<Form.PasswordInput sizing="sm" title="Set a password" value="myP@55w0rd" />
+
+// Large sizing
+<Form.PasswordInput sizing="lg" title="Set a password" value="myP@55w0rd" />
+
+// Show password as plain text
+<Form.PasswordInput showPassword title="Set a password" value="myP@55w0rd" />
+```
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the input.
+- `elementRef` (HTMLInputElement): Optional. Reference to the input DOM element.
+- `isInvalid` (boolean): Optional. Indicates whether the input is invalid. If undefined, no validation styles are applied.
+- `isPlaintext` (boolean): Optional. When true, renders as plaintext (no input border).
+- `isValid` (boolean): Optional. Indicates whether the input is valid. If undefined, no validation styles are applied.
+- `showPassword` (boolean): Optional. When true, shows the password as plain text instead of obscured characters.
+- `sizing` ('sm' | 'lg'): Optional. Controls the size of the input element.
+- `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 classes = $derived(uniqueClsx({
+    'form-control': !isPlaintext,
+    'form-control-plaintext': isPlaintext,
+    [`form-control-${sizing}`]: !!sizing,
+    'is-valid': isValid,
+    'is-invalid': isInvalid
+}, classValues));
+let inputType = $derived(showPassword ? 'text' : 'password');
+</script>
+
+<input
+    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : undefined}
+    {autocomplete}
+    bind:this={elementRef}
+    bind:value
+    class={classes}
+    data-form-type={autocomplete == 'off' ? 'other' : dataFormType}
+    data-lpignore={autocomplete == 'off' ? 'true' : dataLpignore}
+    type={inputType}
+    {...restOfProps} />

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

@@ -0,0 +1,41 @@
+import type { Form } from './index.js';
+/**
+ * ## Form.PasswordInput
+ * Bootstrap-styled password input component with support for various states.
+ *
+ * @example
+ * ```svelte
+ * // Default password input
+ * <Form.PasswordInput title="Set a password" value="myP@55w0rd" />
+ *
+ * // Disabled password input
+ * <Form.PasswordInput disabled title="Set a password" value="myP@55w0rd" />
+ *
+ * // Readonly password input
+ * <Form.PasswordInput readonly title="Set a password" value="myP@55w0rd" />
+ *
+ * // Readonly plaintext password input
+ * <Form.PasswordInput isPlaintext readonly title="Set a password" value="myP@55w0rd" />
+ *
+ * // Small sizing
+ * <Form.PasswordInput sizing="sm" title="Set a password" value="myP@55w0rd" />
+ *
+ * // Large sizing
+ * <Form.PasswordInput sizing="lg" title="Set a password" value="myP@55w0rd" />
+ *
+ * // Show password as plain text
+ * <Form.PasswordInput showPassword title="Set a password" value="myP@55w0rd" />
+ * ```
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the input.
+ * - `elementRef` (HTMLInputElement): Optional. Reference to the input DOM element.
+ * - `isInvalid` (boolean): Optional. Indicates whether the input is invalid. If undefined, no validation styles are applied.
+ * - `isPlaintext` (boolean): Optional. When true, renders as plaintext (no input border).
+ * - `isValid` (boolean): Optional. Indicates whether the input is valid. If undefined, no validation styles are applied.
+ * - `showPassword` (boolean): Optional. When true, shows the password as plain text instead of obscured characters.
+ * - `sizing` ('sm' | 'lg'): Optional. Controls the size of the input element.
+ * - `value` (string): Optional. The password value. If undefined, the input is empty.
+ */
+declare const FormPasswordInput: import("svelte").Component<Form.PasswordInputProps, {}, "value" | "elementRef">;
+type FormPasswordInput = ReturnType<typeof FormPasswordInput>;
+export default FormPasswordInput;

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

@@ -0,0 +1,47 @@
+<!--
+@component
+## Form.RadioInput
+Bootstrap-styled radio input component for single selection options.
+
+@example
+```svelte
+// Default radio
+<Form.Check>
+    <Form.RadioInput id="radioDefault" value="" />
+    <Form.RadioLabel for="radioDefault">Default radio</Form.RadioLabel>
+</Form.Check>
+
+// Checked radio
+<Form.Check>
+    <Form.RadioInput checked id="radioChecked" value="" />
+    <Form.RadioLabel for="radioChecked">Checked radio</Form.RadioLabel>
+</Form.Check>
+
+// Disabled radio
+<Form.Check>
+    <Form.RadioInput disabled id="radioDisabled" value="" />
+    <Form.RadioLabel for="radioDisabled">Disabled radio</Form.RadioLabel>
+</Form.Check>
+
+// Disabled checked radio
+<Form.Check>
+    <Form.RadioInput checked disabled id="radioDisabledChecked" value="" />
+    <Form.RadioLabel for="radioDisabledChecked">Disabled checked radio</Form.RadioLabel>
+</Form.Check>
+```
+### 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.
+- `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();
+let classes = $derived(uniqueClsx('form-check-input', {
+    'is-valid': isValid,
+    'is-invalid': isInvalid
+}, classValues));
+</script>
+
+<input bind:this={elementRef} bind:group class={classes} type="radio" {...restOfProps} />

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

@@ -0,0 +1,41 @@
+import type { Form } from './index.js';
+/**
+ * ## Form.RadioInput
+ * Bootstrap-styled radio input component for single selection options.
+ *
+ * @example
+ * ```svelte
+ * // Default radio
+ * <Form.Check>
+ * <Form.RadioInput id="radioDefault" value="" />
+ * <Form.RadioLabel for="radioDefault">Default radio</Form.RadioLabel>
+ * </Form.Check>
+ *
+ * // Checked radio
+ * <Form.Check>
+ * <Form.RadioInput checked id="radioChecked" value="" />
+ * <Form.RadioLabel for="radioChecked">Checked radio</Form.RadioLabel>
+ * </Form.Check>
+ *
+ * // Disabled radio
+ * <Form.Check>
+ * <Form.RadioInput disabled id="radioDisabled" value="" />
+ * <Form.RadioLabel for="radioDisabled">Disabled radio</Form.RadioLabel>
+ * </Form.Check>
+ *
+ * // Disabled checked radio
+ * <Form.Check>
+ * <Form.RadioInput checked disabled id="radioDisabledChecked" value="" />
+ * <Form.RadioLabel for="radioDisabledChecked">Disabled checked radio</Form.RadioLabel>
+ * </Form.Check>
+ * ```
+ * ### 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.
+ * - `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">;
+type FormRadioInput = ReturnType<typeof FormRadioInput>;
+export default FormRadioInput;

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

@@ -0,0 +1,41 @@
+<!--
+@component
+## Form.RadioLabel
+Bootstrap-styled label component specifically for radio inputs.
+
+@example
+```svelte
+// Radio with label
+<Form.Check>
+    <Form.RadioInput id="radioExample" name="radioExample" value="option1" />
+    <Form.RadioLabel for="radioExample">Radio example</Form.RadioLabel>
+</Form.Check>
+
+// Radio group with labels
+<div>
+    <Form.Check>
+        <Form.RadioInput id="radio1" name="radioGroup" value="option1" />
+        <Form.RadioLabel for="radio1">First radio</Form.RadioLabel>
+    </Form.Check>
+    <Form.Check>
+        <Form.RadioInput id="radio2" name="radioGroup" value="option2" />
+        <Form.RadioLabel for="radio2">Second radio</Form.RadioLabel>
+    </Form.Check>
+    <Form.Check>
+        <Form.RadioInput id="radio3" name="radioGroup" value="option3" />
+        <Form.RadioLabel for="radio3">Third radio</Form.RadioLabel>
+    </Form.Check>
+</div>
+```
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the label.
+- `elementRef` (HTMLLabelElement): Optional. Reference to the label DOM element.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+let { children, class: classValues, elementRef = $bindable(null), ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('form-check-label', classValues));
+</script>
+
+<label bind:this={elementRef} class={classes} {...restOfProps}>
+    {@render children?.()}
+</label>

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

@@ -0,0 +1,35 @@
+/**
+ * ## Form.RadioLabel
+ * Bootstrap-styled label component specifically for radio inputs.
+ *
+ * @example
+ * ```svelte
+ * // Radio with label
+ * <Form.Check>
+ * <Form.RadioInput id="radioExample" name="radioExample" value="option1" />
+ * <Form.RadioLabel for="radioExample">Radio example</Form.RadioLabel>
+ * </Form.Check>
+ *
+ * // Radio group with labels
+ * <div>
+ * <Form.Check>
+ *     <Form.RadioInput id="radio1" name="radioGroup" value="option1" />
+ *     <Form.RadioLabel for="radio1">First radio</Form.RadioLabel>
+ * </Form.Check>
+ * <Form.Check>
+ *     <Form.RadioInput id="radio2" name="radioGroup" value="option2" />
+ *     <Form.RadioLabel for="radio2">Second radio</Form.RadioLabel>
+ * </Form.Check>
+ * <Form.Check>
+ *     <Form.RadioInput id="radio3" name="radioGroup" value="option3" />
+ *     <Form.RadioLabel for="radio3">Third radio</Form.RadioLabel>
+ * </Form.Check>
+ * </div>
+ * ```
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the label.
+ * - `elementRef` (HTMLLabelElement): Optional. Reference to the label DOM element.
+ */
+declare const FormRadioLabel: import("svelte").Component<import("../index.js").LabelElement, {}, "elementRef">;
+type FormRadioLabel = ReturnType<typeof FormRadioLabel>;
+export default FormRadioLabel;

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

@@ -0,0 +1,43 @@
+<!--
+@component
+## Form.RangeInput
+Bootstrap-styled range slider input component for selecting a value within a range.
+
+@example
+```svelte
+<script>
+  import { Form } from '..';
+</script>
+
+// Default range input
+<Form.RangeInput max="5" min="0" step="0.5" title="Set a number" value="1" />
+
+// Disabled range input
+<Form.RangeInput disabled max="5" min="0" step="0.5" title="Set a number" value="1" />
+
+// With label and current value display
+<Form.Group>
+    <Form.InputLabel for="customRange">Example range</Form.InputLabel>
+    <Form.RangeInput id="customRange" max="10" min="0" />
+</Form.Group>
+
+// With steps and ticks
+<Form.Group>
+    <Form.InputLabel for="stepRange">Range with steps</Form.InputLabel>
+    <Form.RangeInput id="stepRange" max="5" min="0" step="1" />
+    <div class="d-flex justify-content-between">
+        <span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
+    </div>
+</Form.Group>
+```
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the range input.
+- `elementRef` (HTMLInputElement): Optional. Reference to the input DOM element.
+- `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), value = $bindable(undefined), ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('form-range', classValues));
+</script>
+
+<input bind:this={elementRef} bind:value class={classes} type="range" {...restOfProps} />

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

@@ -0,0 +1,39 @@
+/**
+ * ## Form.RangeInput
+ * Bootstrap-styled range slider input component for selecting a value within a range.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ * import { Form } from '..';
+ * </script>
+ *
+ * // Default range input
+ * <Form.RangeInput max="5" min="0" step="0.5" title="Set a number" value="1" />
+ *
+ * // Disabled range input
+ * <Form.RangeInput disabled max="5" min="0" step="0.5" title="Set a number" value="1" />
+ *
+ * // With label and current value display
+ * <Form.Group>
+ *   <Form.InputLabel for="customRange">Example range</Form.InputLabel>
+ *   <Form.RangeInput id="customRange" max="10" min="0" />
+ * </Form.Group>
+ *
+ * // With steps and ticks
+ * <Form.Group>
+ *   <Form.InputLabel for="stepRange">Range with steps</Form.InputLabel>
+ *   <Form.RangeInput id="stepRange" max="5" min="0" step="1" />
+ *   <div class="d-flex justify-content-between">
+ *       <span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
+ *   </div>
+ * </Form.Group>
+ * ```
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the range input.
+ * - `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">;
+type FormRangeInput = ReturnType<typeof FormRangeInput>;
+export default FormRangeInput;

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

@@ -0,0 +1,63 @@
+<!--
+@component
+## Form.SearchInput
+Bootstrap-styled search input component with search-specific features.
+
+@example
+```svelte
+// Default search input
+<Form.SearchInput title="Set a search value" value="search value" />
+
+// Disabled search input
+<Form.SearchInput disabled title="Set a search value" value="search value" />
+
+// Readonly search input
+<Form.SearchInput readonly title="Set a search value" value="search value" />
+
+// Readonly plaintext search input
+<Form.SearchInput isPlaintext readonly title="Set a search value" value="search value" />
+
+// Small sizing
+<Form.SearchInput sizing="sm" title="Set a search value" value="search value" />
+
+// Large sizing
+<Form.SearchInput sizing="lg" title="Set a search value" value="search value" />
+
+// With datalist
+<Form.SearchInput list="listOfSearchValues" title="Set a search value" value="search value" />
+<datalist id="listOfSearchValues">
+    <option value="search value 1"></option>
+    <option value="search value 2"></option>
+    <option value="search value 3"></option>
+</datalist>
+```
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the input.
+- `elementRef` (HTMLInputElement): Optional. Reference to the input DOM element.
+- `isInvalid` (boolean): Optional. Indicates whether the input is invalid. If undefined, no validation styles are applied.
+- `isPlaintext` (boolean): Optional. When true, renders as plaintext (no input border).
+- `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` (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 classes = $derived(uniqueClsx({
+    'form-control': !isPlaintext,
+    'form-control-plaintext': isPlaintext,
+    [`form-control-${sizing}`]: !!sizing,
+    'is-valid': isValid,
+    'is-invalid': isInvalid
+}, classValues));
+</script>
+
+<input
+    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : undefined}
+    {autocomplete}
+    bind:this={elementRef}
+    bind:value
+    class={classes}
+    data-form-type={autocomplete == 'off' ? 'other' : dataFormType}
+    data-lpignore={autocomplete == 'off' ? 'true' : dataLpignore}
+    type="search"
+    {...restOfProps} />