@winkintel/bootstrap-svelte 0.0.1

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

@@ -0,0 +1,45 @@
+import type { Form } from './index.js';
+/**
+ * ## 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.
+ */
+declare const FormSearchInput: import("svelte").Component<Form.SearchInputProps, {}, "value" | "elementRef">;
+type FormSearchInput = ReturnType<typeof FormSearchInput>;
+export default FormSearchInput;

package/dist/Form/form-select.svelte

@@ -0,0 +1,85 @@
+<!--
+@component
+## Form.Select
+Bootstrap-styled select input component for dropdown selection.
+
+@example
+```svelte
+// Default select
+<Form.Select aria-label="Default select example">
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+</Form.Select>
+
+// Disabled select
+<Form.Select aria-label="Disabled select example" disabled>
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+</Form.Select>
+
+// Multiple select
+<Form.Select aria-label="Multiple select example" multiple>
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+</Form.Select>
+
+// With specific size
+<Form.Select aria-label="Size of 2 select example" multiple size={2}>
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+</Form.Select>
+
+// Small sizing
+<Form.Select aria-label="Default select example" sizing="sm">
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+</Form.Select>
+```
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the select.
+- `elementRef` (HTMLSelectElement): Optional. Reference to the select 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.
+- `multiple` (boolean): Optional. When true, allows multiple selections. If undefined, only single selection is allowed.
+- `sizing` ('sm' | 'lg'): Optional. Controls the size of the select element.
+- `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 classes = $derived(uniqueClsx('form-select', {
+    [`form-select-${sizing}`]: !!sizing,
+    'is-valid': isValid,
+    'is-invalid': isInvalid
+}, classValues));
+</script>
+
+{#if multiple}
+    <select
+        aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : undefined}
+        bind:this={elementRef}
+        bind:value
+        class={classes}
+        multiple
+        {...restOfProps}>
+        {@render children?.()}
+    </select>
+{:else}
+    <select
+        aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : undefined}
+        bind:this={elementRef}
+        bind:value
+        class={classes}
+        {...restOfProps}>
+        {@render children?.()}
+    </select>
+{/if}

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

@@ -0,0 +1,59 @@
+import type { Form } from './index.js';
+/**
+ * ## Form.Select
+ * Bootstrap-styled select input component for dropdown selection.
+ *
+ * @example
+ * ```svelte
+ * // Default select
+ * <Form.Select aria-label="Default select example">
+ * <option selected>Open this select menu</option>
+ * <option value="1">One</option>
+ * <option value="2">Two</option>
+ * <option value="3">Three</option>
+ * </Form.Select>
+ *
+ * // Disabled select
+ * <Form.Select aria-label="Disabled select example" disabled>
+ * <option selected>Open this select menu</option>
+ * <option value="1">One</option>
+ * <option value="2">Two</option>
+ * <option value="3">Three</option>
+ * </Form.Select>
+ *
+ * // Multiple select
+ * <Form.Select aria-label="Multiple select example" multiple>
+ * <option selected>Open this select menu</option>
+ * <option value="1">One</option>
+ * <option value="2">Two</option>
+ * <option value="3">Three</option>
+ * </Form.Select>
+ *
+ * // With specific size
+ * <Form.Select aria-label="Size of 2 select example" multiple size={2}>
+ * <option selected>Open this select menu</option>
+ * <option value="1">One</option>
+ * <option value="2">Two</option>
+ * <option value="3">Three</option>
+ * </Form.Select>
+ *
+ * // Small sizing
+ * <Form.Select aria-label="Default select example" sizing="sm">
+ * <option selected>Open this select menu</option>
+ * <option value="1">One</option>
+ * <option value="2">Two</option>
+ * <option value="3">Three</option>
+ * </Form.Select>
+ * ```
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the select.
+ * - `elementRef` (HTMLSelectElement): Optional. Reference to the select 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.
+ * - `multiple` (boolean): Optional. When true, allows multiple selections. If undefined, only single selection is allowed.
+ * - `sizing` ('sm' | 'lg'): Optional. Controls the size of the select element.
+ * - `value` (string): Optional. The selected value of the select. If undefined, the select is empty.
+ */
+declare const FormSelect: import("svelte").Component<Form.SelectProps, {}, "value" | "elementRef">;
+type FormSelect = ReturnType<typeof FormSelect>;
+export default FormSelect;

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

@@ -0,0 +1,54 @@
+<!--
+@component
+## Form.SwitchInput
+Bootstrap-styled switch input component for toggling between two states.
+
+@example
+```svelte
+// Default switch
+<Form.Check isSwitch>
+    <Form.SwitchInput id="switchDefault" name="switchDefault" />
+    <Form.CheckLabel for="switchDefault">Default switch</Form.CheckLabel>
+</Form.Check>
+
+// Checked switch
+<Form.Check isSwitch>
+    <Form.SwitchInput checked id="switchChecked" name="switchChecked" />
+    <Form.CheckLabel for="switchChecked">Checked switch</Form.CheckLabel>
+</Form.Check>
+
+// Disabled switch
+<Form.Check isSwitch>
+    <Form.SwitchInput disabled id="switchDisabled" name="switchDisabled" />
+    <Form.CheckLabel for="switchDisabled">Disabled switch</Form.CheckLabel>
+</Form.Check>
+
+// Disabled checked switch
+<Form.Check isSwitch>
+    <Form.SwitchInput checked disabled id="switchDisabledChecked" name="switchDisabledChecked" />
+    <Form.CheckLabel for="switchDisabledChecked">Disabled checked switch</Form.CheckLabel>
+</Form.Check>
+```
+### Props
+- `checked` (boolean): Optional. Binds the switch state. If undefined, the switch is unchecked.
+- `class` (string): Optional. Additional CSS classes to apply to the switch.
+- `elementRef` (HTMLInputElement): Optional. Reference to the switch 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.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+let { 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
+}, classValues));
+</script>
+
+<input
+    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : undefined}
+    bind:this={elementRef}
+    bind:checked
+    class={classes}
+    role="switch"
+    type="checkbox"
+    {...restOfProps} />

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

@@ -0,0 +1,41 @@
+import type { Form } from './index.js';
+/**
+ * ## Form.SwitchInput
+ * Bootstrap-styled switch input component for toggling between two states.
+ *
+ * @example
+ * ```svelte
+ * // Default switch
+ * <Form.Check isSwitch>
+ * <Form.SwitchInput id="switchDefault" name="switchDefault" />
+ * <Form.CheckLabel for="switchDefault">Default switch</Form.CheckLabel>
+ * </Form.Check>
+ *
+ * // Checked switch
+ * <Form.Check isSwitch>
+ * <Form.SwitchInput checked id="switchChecked" name="switchChecked" />
+ * <Form.CheckLabel for="switchChecked">Checked switch</Form.CheckLabel>
+ * </Form.Check>
+ *
+ * // Disabled switch
+ * <Form.Check isSwitch>
+ * <Form.SwitchInput disabled id="switchDisabled" name="switchDisabled" />
+ * <Form.CheckLabel for="switchDisabled">Disabled switch</Form.CheckLabel>
+ * </Form.Check>
+ *
+ * // Disabled checked switch
+ * <Form.Check isSwitch>
+ * <Form.SwitchInput checked disabled id="switchDisabledChecked" name="switchDisabledChecked" />
+ * <Form.CheckLabel for="switchDisabledChecked">Disabled checked switch</Form.CheckLabel>
+ * </Form.Check>
+ * ```
+ * ### Props
+ * - `checked` (boolean): Optional. Binds the switch state. If undefined, the switch is unchecked.
+ * - `class` (string): Optional. Additional CSS classes to apply to the switch.
+ * - `elementRef` (HTMLInputElement): Optional. Reference to the switch 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.
+ */
+declare const FormSwitchInput: import("svelte").Component<Form.SwitchInputProps, {}, "elementRef" | "checked">;
+type FormSwitchInput = ReturnType<typeof FormSwitchInput>;
+export default FormSwitchInput;

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

@@ -0,0 +1,25 @@
+<!--
+@component
+## Form.SwitchLabel
+Bootstrap-styled label component specifically for switch inputs.
+
+@example
+```svelte
+// Radio with label
+<Form.Check isSwitch>
+    <Form.SwitchInput id="switchExample" name="switchExample" value="option1" />
+    <Form.SwitchLabel for="switchExample">Radio example</Form.RadioLabel>
+</Form.Check>
+```
+### 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-switch-label.svelte.d.ts

@@ -0,0 +1,19 @@
+/**
+ * ## Form.SwitchLabel
+ * Bootstrap-styled label component specifically for switch inputs.
+ *
+ * @example
+ * ```svelte
+ * // Radio with label
+ * <Form.Check isSwitch>
+ * <Form.SwitchInput id="switchExample" name="switchExample" value="option1" />
+ * <Form.SwitchLabel for="switchExample">Radio example</Form.RadioLabel>
+ * </Form.Check>
+ * ```
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the label.
+ * - `elementRef` (HTMLLabelElement): Optional. Reference to the label DOM element.
+ */
+declare const FormSwitchLabel: import("svelte").Component<import("../index.js").LabelElement, {}, "elementRef">;
+type FormSwitchLabel = ReturnType<typeof FormSwitchLabel>;
+export default FormSwitchLabel;

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

@@ -0,0 +1,129 @@
+<!--
+@component
+## Form.TelephoneInput
+Bootstrap-styled telephone input component for entering phone numbers.
+
+@example
+```svelte
+// Default telephone input
+<Form.TelephoneInput placeholder="555-867-5309" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
+
+// Disabled telephone input
+<Form.TelephoneInput disabled placeholder="555-867-5309" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
+
+// Readonly telephone input
+<Form.TelephoneInput readonly placeholder="555-867-5309" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
+
+// Readonly plaintext telephone input
+<Form.TelephoneInput isPlaintext readonly placeholder="555-867-5309" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
+
+// Small sizing
+<Form.TelephoneInput sizing="sm" placeholder="555-867-5309" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
+
+// Large sizing
+<Form.TelephoneInput sizing="lg" placeholder="555-867-5309" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
+
+// With datalist
+<Form.TelephoneInput list="listOfTelephones" placeholder="555-867-5309" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
+<datalist id="listOfTelephones">
+    <option value="555-123-4567"></option>
+    <option value="555-234-5678"></option>
+    <option value="555-345-6789"></option>
+</datalist>
+
+// With mask (single template)
+<Form.TelephoneInput mask="(###) ###-####" pattern="\(\d{3}\) \d{3}-\d{4}" placeholder="(555) 515-1212" />
+
+// With mask (multiple templates — picks the shortest one that fits the typed digit count)
+<Form.TelephoneInput mask={['###-###-####', '(###) ###-####']} />
+```
+### 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.
+- `mask` (string | string[]): Optional. Mask template(s) applied as the user types. `#` marks a digit
+  slot; any other character (`(`, `)`, `-`, `.`, space, `+`, etc.) is a literal and inserted automatically.
+  When an array is provided, the mask whose digit-slot count fits the typed digit count is chosen.
+  Independent of `pattern` — `pattern` continues to drive native browser validation only.
+- `sizing` ('sm' | 'lg'): Optional. Controls the size of the input element.
+- `value` (string): Optional. The telephone number value. If undefined, the input is empty.
+-->
+<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 classes = $derived(uniqueClsx({
+    'form-control': !isPlaintext,
+    'form-control-plaintext': isPlaintext,
+    [`form-control-${sizing}`]: !!sizing,
+    'is-valid': isValid,
+    'is-invalid': isInvalid
+}, classValues));
+/**
+ * Format `rawValue` against a mask template. `#` slots are filled with the next
+ * digit from `rawValue` (non-digits in the source are skipped). Literal
+ * characters in the template — `(`, `)`, `-`, `.`, space, `+`, etc. — are
+ * inserted only after at least one digit has been consumed, so the user
+ * doesn't see dangling separators when they delete the trailing digits.
+ */
+function applyMask(rawValue, mask) {
+    const digits = rawValue.replace(/\D/g, '');
+    let digitIndex = 0;
+    let result = '';
+    for (const char of mask) {
+        if (char === '#') {
+            const digit = digits[digitIndex];
+            if (digit === undefined) {
+                break;
+            }
+            result += digit;
+            digitIndex++;
+        }
+        else if (digitIndex < digits.length) {
+            result += char;
+        }
+    }
+    return result;
+}
+/** Count the number of `#` digit slots in a mask template. */
+function countMaskSlots(mask) {
+    return [...mask].filter((char) => char === '#').length;
+}
+/**
+ * Pick the first mask whose digit-slot count fits the current digit count.
+ * Falls back to the longest mask (the last one) once the user has typed more
+ * digits than any mask can hold.
+ */
+function chooseMask(rawValue, masks) {
+    const digitCount = rawValue.replace(/\D/g, '').length;
+    return masks.find((candidate) => digitCount <= countMaskSlots(candidate)) ?? masks[masks.length - 1] ?? masks[0];
+}
+const handleInput = (event) => {
+    if (mask !== undefined) {
+        const masks = Array.isArray(mask) ? mask : [mask];
+        if (masks.length > 0) {
+            const selectedMask = chooseMask(event.currentTarget.value, masks);
+            const maskedValue = applyMask(event.currentTarget.value, selectedMask);
+            if (event.currentTarget.value !== maskedValue) {
+                event.currentTarget.value = maskedValue;
+            }
+            value = maskedValue;
+        }
+    }
+    // `oninput` defaults to `noop` but Svelte's HTMLAttributes types it as
+    // `FormEventHandler | null | undefined`, so we null-check before invoking.
+    if (oninput !== null) {
+        oninput(event);
+    }
+};
+</script>
+
+<input
+    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : undefined}
+    bind:this={elementRef}
+    bind:value
+    class={classes}
+    oninput={handleInput}
+    type="tel"
+    {...restOfProps} />

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

@@ -0,0 +1,55 @@
+import type { Form } from './index.js';
+/**
+ * ## Form.TelephoneInput
+ * Bootstrap-styled telephone input component for entering phone numbers.
+ *
+ * @example
+ * ```svelte
+ * // Default telephone input
+ * <Form.TelephoneInput placeholder="555-867-5309" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
+ *
+ * // Disabled telephone input
+ * <Form.TelephoneInput disabled placeholder="555-867-5309" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
+ *
+ * // Readonly telephone input
+ * <Form.TelephoneInput readonly placeholder="555-867-5309" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
+ *
+ * // Readonly plaintext telephone input
+ * <Form.TelephoneInput isPlaintext readonly placeholder="555-867-5309" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
+ *
+ * // Small sizing
+ * <Form.TelephoneInput sizing="sm" placeholder="555-867-5309" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
+ *
+ * // Large sizing
+ * <Form.TelephoneInput sizing="lg" placeholder="555-867-5309" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
+ *
+ * // With datalist
+ * <Form.TelephoneInput list="listOfTelephones" placeholder="555-867-5309" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
+ * <datalist id="listOfTelephones">
+ *   <option value="555-123-4567"></option>
+ *   <option value="555-234-5678"></option>
+ *   <option value="555-345-6789"></option>
+ * </datalist>
+ *
+ * // With mask (single template)
+ * <Form.TelephoneInput mask="(###) ###-####" pattern="\(\d{3}\) \d{3}-\d{4}" placeholder="(555) 515-1212" />
+ *
+ * // With mask (multiple templates — picks the shortest one that fits the typed digit count)
+ * <Form.TelephoneInput mask={['###-###-####', '(###) ###-####']} />
+ * ```
+ * ### 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.
+ * - `mask` (string | string[]): Optional. Mask template(s) applied as the user types. `#` marks a digit
+ * slot; any other character (`(`, `)`, `-`, `.`, space, `+`, etc.) is a literal and inserted automatically.
+ * When an array is provided, the mask whose digit-slot count fits the typed digit count is chosen.
+ * Independent of `pattern` — `pattern` continues to drive native browser validation only.
+ * - `sizing` ('sm' | 'lg'): Optional. Controls the size of the input element.
+ * - `value` (string): Optional. The telephone number value. If undefined, the input is empty.
+ */
+declare const FormTelephoneInput: import("svelte").Component<Form.TelephoneInputProps, {}, "value" | "elementRef">;
+type FormTelephoneInput = ReturnType<typeof FormTelephoneInput>;
+export default FormTelephoneInput;

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

@@ -0,0 +1,57 @@
+<!--
+@component
+## Form.TextArea
+Bootstrap-styled textarea component for multi-line text input.
+
+@example
+```svelte
+// Default textarea
+<Form.TextArea title="Set a text value" value="textarea value" />
+
+// Disabled textarea
+<Form.TextArea disabled title="Set a textarea value" value="textarea value" />
+
+// Readonly textarea
+<Form.TextArea readonly title="Set a textarea value" value="textarea value" />
+
+// Small sizing
+<Form.TextArea sizing="sm" title="Set a textarea value" value="textarea value" />
+
+// Large sizing
+<Form.TextArea sizing="lg" title="Set a textarea value" value="textarea value" />
+
+// Non-resizable textarea
+<Form.TextArea isResizable={false} title="Set a textarea value" value="textarea value" />
+```
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the textarea.
+- `elementRef` (HTMLTextAreaElement): Optional. Reference to the textarea DOM element.
+- `isInvalid` (boolean): Optional. Indicates whether the input is invalid. If undefined, no validation styles are applied.
+- `isResizable` (boolean): Optional. Controls whether the textarea is resizable. Defaults to true.
+- `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 textarea element.
+- `style` (string): Optional. Custom inline styles to apply to the textarea.
+- `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 classes = $derived(uniqueClsx('form-control', {
+    [`form-control-${sizing}`]: !!sizing,
+    'is-valid': isValid,
+    'is-invalid': isInvalid
+}, classValues));
+let styles = $derived.by(() => {
+    if (isResizable && style === undefined) {
+        return undefined;
+    }
+    return isResizable === false ? `resize: none; ${style}` : style || undefined;
+});
+</script>
+
+<textarea
+    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : undefined}
+    bind:this={elementRef}
+    bind:value
+    class={classes}
+    style={styles}
+    {...restOfProps}></textarea>

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

@@ -0,0 +1,38 @@
+import type { Form } from './index.js';
+/**
+ * ## Form.TextArea
+ * Bootstrap-styled textarea component for multi-line text input.
+ *
+ * @example
+ * ```svelte
+ * // Default textarea
+ * <Form.TextArea title="Set a text value" value="textarea value" />
+ *
+ * // Disabled textarea
+ * <Form.TextArea disabled title="Set a textarea value" value="textarea value" />
+ *
+ * // Readonly textarea
+ * <Form.TextArea readonly title="Set a textarea value" value="textarea value" />
+ *
+ * // Small sizing
+ * <Form.TextArea sizing="sm" title="Set a textarea value" value="textarea value" />
+ *
+ * // Large sizing
+ * <Form.TextArea sizing="lg" title="Set a textarea value" value="textarea value" />
+ *
+ * // Non-resizable textarea
+ * <Form.TextArea isResizable={false} title="Set a textarea value" value="textarea value" />
+ * ```
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the textarea.
+ * - `elementRef` (HTMLTextAreaElement): Optional. Reference to the textarea DOM element.
+ * - `isInvalid` (boolean): Optional. Indicates whether the input is invalid. If undefined, no validation styles are applied.
+ * - `isResizable` (boolean): Optional. Controls whether the textarea is resizable. Defaults to true.
+ * - `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 textarea element.
+ * - `style` (string): Optional. Custom inline styles to apply to the textarea.
+ * - `value` (string): Optional. The text value of the textarea. If undefined, the textarea is empty.
+ */
+declare const FormTextArea: import("svelte").Component<Form.TextAreaProps, {}, "value" | "elementRef">;
+type FormTextArea = ReturnType<typeof FormTextArea>;
+export default FormTextArea;