@winkintel/bootstrap-svelte 0.0.1

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

@@ -0,0 +1,48 @@
+import type { Form } from './index.js';
+/**
+ * ## Form.CheckInput
+ * Bootstrap-styled checkbox input component for boolean selections.
+ *
+ * @example
+ * ```svelte
+ * // Default checkbox
+ * <Form.Check>
+ * <Form.CheckInput id="checkDefault" name="checkDefault" value="" />
+ * <Form.CheckLabel for="checkDefault">Default checkbox</Form.CheckLabel>
+ * </Form.Check>
+ *
+ * // Checked checkbox
+ * <Form.Check>
+ * <Form.CheckInput checked id="checkChecked" name="checkChecked" value="" />
+ * <Form.CheckLabel for="checkChecked">Checked checkbox</Form.CheckLabel>
+ * </Form.Check>
+ *
+ * // Disabled checkbox
+ * <Form.Check>
+ * <Form.CheckInput disabled id="checkDisabled" name="checkDisabled" value="" />
+ * <Form.CheckLabel for="checkDisabled">Disabled checkbox</Form.CheckLabel>
+ * </Form.Check>
+ *
+ * // Disabled and checked checkbox
+ * <Form.Check>
+ * <Form.CheckInput checked disabled id="checkDisabledChecked" name="checkDisabledChecked" value="" />
+ * <Form.CheckLabel for="checkDisabledChecked">Disabled checked checkbox</Form.CheckLabel>
+ * </Form.Check>
+ *
+ * // Indeterminate checkbox
+ * <Form.Check>
+ * <Form.CheckInput id="checkReadonly" isIndeterminate={true} name="checkReadonly" value="" />
+ * <Form.CheckLabel for="checkReadonly">Indeterminate checkbox</Form.CheckLabel>
+ * </Form.Check>
+ * ```
+ * ### Props
+ * - `checked` (boolean): Optional. Binds the checkbox state. If undefined, the checkbox is unchecked.
+ * - `class` (string): Optional. Additional CSS classes to apply to the checkbox.
+ * - `elementRef` (HTMLInputElement): Optional. Reference to the checkbox DOM element.
+ * - `isIndeterminate` (boolean): Optional. Sets the checkbox to indeterminate state when true.
+ * - `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 FormCheckInput: import("svelte").Component<Form.CheckInputProps, {}, "elementRef" | "group" | "checked">;
+type FormCheckInput = ReturnType<typeof FormCheckInput>;
+export default FormCheckInput;

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

@@ -0,0 +1,26 @@
+<!--
+@component
+## Form.CheckLabel
+Bootstrap-styled label component for checkbox and radio inputs.
+
+@example
+```svelte
+// Checkbox with label
+<Form.Check>
+    <Form.CheckInput id="checkExample" name="checkExample" />
+    <Form.CheckLabel for="checkExample">Checkbox example</Form.CheckLabel>
+</Form.Check>
+```
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the label.
+- `elementRef` (HTMLLabelElement): Optional. Reference to the label DOM element.
+- `for` (string): Optional. ID of the input element this label is associated with.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+let { children, class: classValues, elementRef = $bindable(null), elementType = 'label', ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('form-check-label', classValues));
+</script>
+
+<svelte:element this={elementType} bind:this={elementRef} class={classes} {...restOfProps}>
+    {@render children?.()}
+</svelte:element>

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

@@ -0,0 +1,21 @@
+import type { Form } from './index.js';
+/**
+ * ## Form.CheckLabel
+ * Bootstrap-styled label component for checkbox and radio inputs.
+ *
+ * @example
+ * ```svelte
+ * // Checkbox with label
+ * <Form.Check>
+ * <Form.CheckInput id="checkExample" name="checkExample" />
+ * <Form.CheckLabel for="checkExample">Checkbox example</Form.CheckLabel>
+ * </Form.Check>
+ * ```
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the label.
+ * - `elementRef` (HTMLLabelElement): Optional. Reference to the label DOM element.
+ * - `for` (string): Optional. ID of the input element this label is associated with.
+ */
+declare const FormCheckLabel: import("svelte").Component<Form.CheckLabelProps, {}, "elementRef">;
+type FormCheckLabel = ReturnType<typeof FormCheckLabel>;
+export default FormCheckLabel;

package/dist/Form/form-check.svelte

@@ -0,0 +1,55 @@
+<!--
+@component
+## Form.Check
+Bootstrap-styled container for checkbox and radio inputs with their labels.
+
+@example
+```svelte
+// Default checkbox
+<Form.Check>
+    <Form.CheckInput id="checkDefault" name="checkDefault" value="" />
+    <Form.CheckLabel for="checkDefault">Default checkbox</Form.CheckLabel>
+</Form.Check>
+
+// Switch checkbox
+<Form.Check isSwitch>
+    <Form.SwitchInput checked id="switchChecked" name="switchChecked" value="" />
+    <Form.CheckLabel for="switchChecked">Checked checkbox</Form.CheckLabel>
+</Form.Check>
+
+// Checked checkbox
+<Form.Check>
+    <Form.CheckInput checked id="checkChecked" name="checkChecked" value="" />
+    <Form.CheckLabel for="checkChecked">Checked checkbox</Form.CheckLabel>
+</Form.Check>
+
+// Disabled checkbox
+<Form.Check>
+    <Form.CheckInput disabled id="checkDisabled" name="checkDisabled" value="" />
+    <Form.CheckLabel for="checkDisabled">Disabled checkbox</Form.CheckLabel>
+</Form.Check>
+
+// Radio buttons
+<Form.Check>
+    <Form.RadioInput id="radioDefault1" name="radioDefault" value="option1" />
+    <Form.CheckLabel for="radioDefault1">Default radio 1</Form.CheckLabel>
+</Form.Check>
+<Form.Check>
+    <Form.RadioInput id="radioDefault2" name="radioDefault" value="option2" />
+    <Form.CheckLabel for="radioDefault2">Default radio 2</Form.CheckLabel>
+</Form.Check>
+```
+### Props
+- `children` (any): Required. Child elements to be rendered inside the check container.
+- `class` (string): Optional. Additional CSS classes to apply to the container.
+- `elementRef` (HTMLDivElement): Optional. Reference to the container DOM element.
+- `isSwitch` (boolean): Optional. If true, applies switch styles to the check container.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+let { children, class: classValues, elementRef = $bindable(null), isInline = false, isSwitch = false, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('form-check', { 'form-switch': isSwitch, 'form-check-inline': isInline }, classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {...restOfProps}>
+    {@render children?.()}
+</div>

package/dist/Form/form-check.svelte.d.ts

@@ -0,0 +1,50 @@
+import type { Form } from './index.js';
+/**
+ * ## Form.Check
+ * Bootstrap-styled container for checkbox and radio inputs with their labels.
+ *
+ * @example
+ * ```svelte
+ * // Default checkbox
+ * <Form.Check>
+ * <Form.CheckInput id="checkDefault" name="checkDefault" value="" />
+ * <Form.CheckLabel for="checkDefault">Default checkbox</Form.CheckLabel>
+ * </Form.Check>
+ *
+ * // Switch checkbox
+ * <Form.Check isSwitch>
+ * <Form.SwitchInput checked id="switchChecked" name="switchChecked" value="" />
+ * <Form.CheckLabel for="switchChecked">Checked checkbox</Form.CheckLabel>
+ * </Form.Check>
+ *
+ * // Checked checkbox
+ * <Form.Check>
+ * <Form.CheckInput checked id="checkChecked" name="checkChecked" value="" />
+ * <Form.CheckLabel for="checkChecked">Checked checkbox</Form.CheckLabel>
+ * </Form.Check>
+ *
+ * // Disabled checkbox
+ * <Form.Check>
+ * <Form.CheckInput disabled id="checkDisabled" name="checkDisabled" value="" />
+ * <Form.CheckLabel for="checkDisabled">Disabled checkbox</Form.CheckLabel>
+ * </Form.Check>
+ *
+ * // Radio buttons
+ * <Form.Check>
+ * <Form.RadioInput id="radioDefault1" name="radioDefault" value="option1" />
+ * <Form.CheckLabel for="radioDefault1">Default radio 1</Form.CheckLabel>
+ * </Form.Check>
+ * <Form.Check>
+ * <Form.RadioInput id="radioDefault2" name="radioDefault" value="option2" />
+ * <Form.CheckLabel for="radioDefault2">Default radio 2</Form.CheckLabel>
+ * </Form.Check>
+ * ```
+ * ### Props
+ * - `children` (any): Required. Child elements to be rendered inside the check container.
+ * - `class` (string): Optional. Additional CSS classes to apply to the container.
+ * - `elementRef` (HTMLDivElement): Optional. Reference to the container DOM element.
+ * - `isSwitch` (boolean): Optional. If true, applies switch styles to the check container.
+ */
+declare const FormCheck: import("svelte").Component<Form.CheckProps, {}, "elementRef">;
+type FormCheck = ReturnType<typeof FormCheck>;
+export default FormCheck;

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

@@ -0,0 +1,54 @@
+<!--
+@component
+## Form.ColorInput
+Bootstrap-styled color picker input component.
+
+@example
+```svelte
+// Default color input
+<Form.ColorInput title="Choose your color" value="#563d7c" />
+
+// Disabled color input
+<Form.ColorInput disabled title="Choose your color" value="#563d7c" />
+
+// Small sizing
+<Form.ColorInput sizing="sm" title="Choose your color" value="#563d7c" />
+
+// Large sizing
+<Form.ColorInput sizing="lg" title="Choose your color" value="#563d7c" />
+```
+### 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.
+- `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 color picker.
+- `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();
+let classes = $derived(uniqueClsx('form-control', 'form-control-color', {
+    [`form-control-${sizing}`]: !!sizing,
+    'is-valid': isValid,
+    'is-invalid': isInvalid
+}, classValues));
+// Keep the input value in sync with the prop without using `bind:value` or the
+// `value` attribute directly. Chrome logs a warning whenever an `<input type="color">`
+// value transiently becomes `""` during hydration (see sveltejs/svelte#8446);
+// setting the property imperatively via an effect avoids that transient state.
+$effect(() => {
+    const input = elementRef;
+    const normalized = value || '#000000';
+    if (input && input.value !== normalized) {
+        input.value = normalized;
+    }
+});
+</script>
+
+<input
+    {...restOfProps}
+    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : undefined}
+    bind:this={elementRef}
+    class={classes}
+    oninput={(event) => (value = event.currentTarget.value)}
+    type="color" />

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

@@ -0,0 +1,30 @@
+import type { Form } from './index.js';
+/**
+ * ## Form.ColorInput
+ * Bootstrap-styled color picker input component.
+ *
+ * @example
+ * ```svelte
+ * // Default color input
+ * <Form.ColorInput title="Choose your color" value="#563d7c" />
+ *
+ * // Disabled color input
+ * <Form.ColorInput disabled title="Choose your color" value="#563d7c" />
+ *
+ * // Small sizing
+ * <Form.ColorInput sizing="sm" title="Choose your color" value="#563d7c" />
+ *
+ * // Large sizing
+ * <Form.ColorInput sizing="lg" title="Choose your color" value="#563d7c" />
+ * ```
+ * ### 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.
+ * - `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 color picker.
+ * - `value` (string): Optional. The color value in hex format (e.g., "#563d7c"). If undefined, the input is empty.
+ */
+declare const FormColorInput: import("svelte").Component<Form.ColorInputProps, {}, "value" | "elementRef">;
+type FormColorInput = ReturnType<typeof FormColorInput>;
+export default FormColorInput;

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

@@ -0,0 +1,64 @@
+<!--
+@component
+## Form.DateInput
+Bootstrap-styled date input component for selecting dates.
+
+@example
+```svelte
+// Default date input
+<Form.DateInput value="2025-06-10" title="Choose your date" />
+
+// Disabled date input
+<Form.DateInput disabled value="2025-06-10" title="Choose your date" />
+
+// Readonly date input
+<Form.DateInput readonly value="2025-06-10" title="Choose your date" />
+
+// Readonly plaintext date input
+<Form.DateInput isPlaintext readonly value="2025-06-10" title="Choose your date" />
+
+// Small sizing
+<Form.DateInput sizing="sm" value="2025-06-10" title="Choose your date" />
+
+// Large sizing
+<Form.DateInput sizing="lg" value="2025-06-10" title="Choose your date" />
+
+// With datalist
+<Form.DateInput list="listOfDates" title="Choose your date" />
+<datalist id="listOfDates">
+    <option value="2025-01-01"></option>
+    <option value="2025-02-01"></option>
+    <option value="2025-03-01"></option>
+</datalist>
+```
+### Props
+- `autocomplete` (string): Optional. Controls the autocomplete behavior of the input. Default is "off".
+- `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 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 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="date"
+    {...restOfProps} />

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

@@ -0,0 +1,46 @@
+import type { Form } from './index.js';
+/**
+ * ## Form.DateInput
+ * Bootstrap-styled date input component for selecting dates.
+ *
+ * @example
+ * ```svelte
+ * // Default date input
+ * <Form.DateInput value="2025-06-10" title="Choose your date" />
+ *
+ * // Disabled date input
+ * <Form.DateInput disabled value="2025-06-10" title="Choose your date" />
+ *
+ * // Readonly date input
+ * <Form.DateInput readonly value="2025-06-10" title="Choose your date" />
+ *
+ * // Readonly plaintext date input
+ * <Form.DateInput isPlaintext readonly value="2025-06-10" title="Choose your date" />
+ *
+ * // Small sizing
+ * <Form.DateInput sizing="sm" value="2025-06-10" title="Choose your date" />
+ *
+ * // Large sizing
+ * <Form.DateInput sizing="lg" value="2025-06-10" title="Choose your date" />
+ *
+ * // With datalist
+ * <Form.DateInput list="listOfDates" title="Choose your date" />
+ * <datalist id="listOfDates">
+ * <option value="2025-01-01"></option>
+ * <option value="2025-02-01"></option>
+ * <option value="2025-03-01"></option>
+ * </datalist>
+ * ```
+ * ### Props
+ * - `autocomplete` (string): Optional. Controls the autocomplete behavior of the input. Default is "off".
+ * - `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 date value in the format "YYYY-MM-DD". If undefined, the input is empty.
+ */
+declare const FormDateInput: import("svelte").Component<Form.DateInputProps, {}, "value" | "elementRef">;
+type FormDateInput = ReturnType<typeof FormDateInput>;
+export default FormDateInput;

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

@@ -0,0 +1,60 @@
+<!--
+@component
+## Form.DatetimeLocalInput
+Bootstrap-styled datetime-local input component for selecting both date and time.
+
+@example
+```svelte
+// Default datetime-local input
+<Form.DatetimeLocalInput title="Choose your datetime local" value="2025-06-10T19:30" />
+
+// Disabled datetime-local input
+<Form.DatetimeLocalInput disabled title="Choose your datetime local" value="2025-06-10T19:30" />
+
+// Readonly datetime-local input
+<Form.DatetimeLocalInput readonly title="Choose your datetime local" value="2025-06-10T19:30" />
+
+// Readonly plaintext datetime-local input
+<Form.DatetimeLocalInput isPlaintext readonly title="Choose your datetime local" value="2025-06-10T19:30" />
+
+// Small sizing
+<Form.DatetimeLocalInput sizing="sm" title="Choose your datetime local" value="2025-06-10T19:30" />
+
+// Large sizing
+<Form.DatetimeLocalInput sizing="lg" title="Choose your datetime local" value="2025-06-10T19:30" />
+
+// With datalist
+<Form.DatetimeLocalInput list="listOfDatetimes" title="Choose your datetime local" />
+<datalist id="listOfDatetimes">
+    <option value="2025-01-01T00:00"></option>
+    <option value="2025-02-01T00:00"></option>
+    <option value="2025-03-01T00:00"></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 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 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="datetime-local"
+    {...restOfProps} />

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

@@ -0,0 +1,45 @@
+import type { Form } from './index.js';
+/**
+ * ## Form.DatetimeLocalInput
+ * Bootstrap-styled datetime-local input component for selecting both date and time.
+ *
+ * @example
+ * ```svelte
+ * // Default datetime-local input
+ * <Form.DatetimeLocalInput title="Choose your datetime local" value="2025-06-10T19:30" />
+ *
+ * // Disabled datetime-local input
+ * <Form.DatetimeLocalInput disabled title="Choose your datetime local" value="2025-06-10T19:30" />
+ *
+ * // Readonly datetime-local input
+ * <Form.DatetimeLocalInput readonly title="Choose your datetime local" value="2025-06-10T19:30" />
+ *
+ * // Readonly plaintext datetime-local input
+ * <Form.DatetimeLocalInput isPlaintext readonly title="Choose your datetime local" value="2025-06-10T19:30" />
+ *
+ * // Small sizing
+ * <Form.DatetimeLocalInput sizing="sm" title="Choose your datetime local" value="2025-06-10T19:30" />
+ *
+ * // Large sizing
+ * <Form.DatetimeLocalInput sizing="lg" title="Choose your datetime local" value="2025-06-10T19:30" />
+ *
+ * // With datalist
+ * <Form.DatetimeLocalInput list="listOfDatetimes" title="Choose your datetime local" />
+ * <datalist id="listOfDatetimes">
+ * <option value="2025-01-01T00:00"></option>
+ * <option value="2025-02-01T00:00"></option>
+ * <option value="2025-03-01T00:00"></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 datetime-local value in the format "YYYY-MM-DDTHH:MM". If undefined, the input is empty.
+ */
+declare const FormDatetimeLocalInput: import("svelte").Component<Form.DatetimeLocalInputProps, {}, "value" | "elementRef">;
+type FormDatetimeLocalInput = ReturnType<typeof FormDatetimeLocalInput>;
+export default FormDatetimeLocalInput;

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

@@ -0,0 +1,64 @@
+<!--
+@component
+## Form.EmailInput
+Bootstrap-styled email input component for email address entry.
+
+@example
+```svelte
+// Default email input
+<Form.EmailInput placeholder="name@example.com" />
+
+// Disabled email input
+<Form.EmailInput disabled placeholder="name@example.com" />
+
+// Readonly email input
+<Form.EmailInput placeholder="name@example.com" readonly />
+
+// Readonly plaintext email input
+<Form.EmailInput isPlaintext readonly placeholder="name@example.com" />
+
+// Small sizing
+<Form.EmailInput sizing="sm" placeholder="name@example.com" />
+
+// Large sizing
+<Form.EmailInput sizing="lg" placeholder="name@example.com" />
+
+// With pattern validation and datalist
+<Form.EmailInput list="listOfEmails" pattern=".+@example\.com" placeholder="name@example.com" />
+<datalist id="listOfEmails">
+    <option value="alex@example.com"></option>
+    <option value="casey@example.com"></option>
+    <option value="jordan@example.com"></option>
+    <option value="taylor@example.com"></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 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 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="email"
+    {...restOfProps} />

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

@@ -0,0 +1,46 @@
+import type { Form } from './index.js';
+/**
+ * ## Form.EmailInput
+ * Bootstrap-styled email input component for email address entry.
+ *
+ * @example
+ * ```svelte
+ * // Default email input
+ * <Form.EmailInput placeholder="name@example.com" />
+ *
+ * // Disabled email input
+ * <Form.EmailInput disabled placeholder="name@example.com" />
+ *
+ * // Readonly email input
+ * <Form.EmailInput placeholder="name@example.com" readonly />
+ *
+ * // Readonly plaintext email input
+ * <Form.EmailInput isPlaintext readonly placeholder="name@example.com" />
+ *
+ * // Small sizing
+ * <Form.EmailInput sizing="sm" placeholder="name@example.com" />
+ *
+ * // Large sizing
+ * <Form.EmailInput sizing="lg" placeholder="name@example.com" />
+ *
+ * // With pattern validation and datalist
+ * <Form.EmailInput list="listOfEmails" pattern=".+@example\.com" placeholder="name@example.com" />
+ * <datalist id="listOfEmails">
+ * <option value="alex@example.com"></option>
+ * <option value="casey@example.com"></option>
+ * <option value="jordan@example.com"></option>
+ * <option value="taylor@example.com"></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 email address value. If undefined, the input is empty.
+ */
+declare const FormEmailInput: import("svelte").Component<Form.EmailInputProps, {}, "value" | "elementRef">;
+type FormEmailInput = ReturnType<typeof FormEmailInput>;
+export default FormEmailInput;

package/dist/Form/form-feedback.svelte

@@ -0,0 +1,36 @@
+<!--
+@component
+## Form.Feedback
+Bootstrap-styled form validation messages to apply custom colors, borders, focus styles, and background icons.
+
+@example
+```svelte
+// Valid feedback
+<Form.Feedback isValid>Looks good!</Form.Feedback>
+// Invalid feedback
+<Form.Feedback isInvalid>Please check this field.</Form.Feedback>
+// Valid tooltip
+<Form.Feedback isValid isTooltip>Looks good!</Form.Feedback>
+// Invalid tooltip
+<Form.Feedback isInvalid isTooltip>Please check this field.</Form.Feedback>
+```
+#### Props
+- `class` (string): Optional. Additional CSS classes to apply to the feedback element.
+- `elementRef` (HTMLElement): Optional. Reference to the feedback DOM element.
+- `isInvalid` (boolean): Optional. Indicates whether the input is invalid. If undefined, no validation styles are applied.
+- `isTooltip` (boolean): Optional. When true, renders as a tooltip instead of feedback.
+- `isValid` (boolean): Optional. Indicates whether the feedback is valid. If undefined, no validation styles are applied.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+let { children, class: classValues, elementRef = $bindable(null), isInvalid = false, isTooltip, isValid = false, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx({
+    'valid-feedback': isValid && !isTooltip,
+    'invalid-feedback': isInvalid && !isTooltip,
+    'valid-tooltip': isValid && isTooltip,
+    'invalid-tooltip': isInvalid && isTooltip
+}, classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {...restOfProps}>
+    {@render children?.()}
+</div>