@winkintel/bootstrap-svelte 0.0.1

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

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

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

@@ -0,0 +1,43 @@
+<!--
+@component
+## Form.FileInput
+Bootstrap-styled file input component for file uploads.
+
+@example
+```svelte
+// Default file input
+<Form.FileInput accept=".png, .jpg, image/png, image/jpeg" name="newFile" />
+
+// Disabled file input
+<Form.FileInput accept=".png, .jpg, image/png, image/jpeg" disabled name="newFile" />
+
+// Small sizing
+<Form.FileInput accept=".png, .jpg, image/png, image/jpeg" name="newFile" sizing="sm" />
+
+// Large sizing
+<Form.FileInput accept=".png, .jpg, image/png, image/jpeg" name="newFile" sizing="lg" />
+```
+### 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 input element.
+- `value` (File | File[]): Optional. The file(s) selected in the input. 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(undefined), ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('form-control', {
+    [`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="file"
+    {...restOfProps} />

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

@@ -0,0 +1,30 @@
+import type { Form } from './index.js';
+/**
+ * ## Form.FileInput
+ * Bootstrap-styled file input component for file uploads.
+ *
+ * @example
+ * ```svelte
+ * // Default file input
+ * <Form.FileInput accept=".png, .jpg, image/png, image/jpeg" name="newFile" />
+ *
+ * // Disabled file input
+ * <Form.FileInput accept=".png, .jpg, image/png, image/jpeg" disabled name="newFile" />
+ *
+ * // Small sizing
+ * <Form.FileInput accept=".png, .jpg, image/png, image/jpeg" name="newFile" sizing="sm" />
+ *
+ * // Large sizing
+ * <Form.FileInput accept=".png, .jpg, image/png, image/jpeg" name="newFile" sizing="lg" />
+ * ```
+ * ### 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 input element.
+ * - `value` (File | File[]): Optional. The file(s) selected in the input. If undefined, the input is empty.
+ */
+declare const FormFileInput: import("svelte").Component<Form.FileInputProps, {}, "value" | "elementRef">;
+type FormFileInput = ReturnType<typeof FormFileInput>;
+export default FormFileInput;

package/dist/Form/form-floating.svelte

@@ -0,0 +1,44 @@
+<!--
+@component
+## Form.Floating
+Bootstrap-styled floating label container for form inputs.
+
+@example
+```svelte
+// Default floating label
+<Form.Floating>
+    <Form.EmailInput placeholder="name@example.com" id="floatingEmailInput" />
+    <Form.InputLabel for="floatingEmailInput" isFloating>Email address</Form.InputLabel>
+</Form.Floating>
+
+// Disabled floating label
+<Form.Floating>
+    <Form.EmailInput disabled placeholder="name@example.com" id="floatingEmailInput" />
+    <Form.InputLabel for="floatingEmailInput" isFloating>Email address</Form.InputLabel>
+</Form.Floating>
+
+// Readonly floating label
+<Form.Floating>
+    <Form.EmailInput placeholder="name@example.com" id="floatingEmailInput" readonly />
+    <Form.InputLabel for="floatingEmailInput" isFloating>Email address</Form.InputLabel>
+</Form.Floating>
+
+// Small sizing floating label
+<Form.Floating>
+    <Form.EmailInput placeholder="name@example.com" id="floatingEmailInput" sizing="sm" />
+    <Form.InputLabel for="floatingEmailInput" isFloating>Email address</Form.InputLabel>
+</Form.Floating>
+```
+### Props
+- `children` (any): Required. Child elements to be rendered inside the floating container.
+- `class` (string): Optional. Additional CSS classes to apply to the container.
+- `elementRef` (HTMLDivElement): Optional. Reference to the container 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-floating', classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {...restOfProps}>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,38 @@
+/**
+ * ## Form.Floating
+ * Bootstrap-styled floating label container for form inputs.
+ *
+ * @example
+ * ```svelte
+ * // Default floating label
+ * <Form.Floating>
+ * <Form.EmailInput placeholder="name@example.com" id="floatingEmailInput" />
+ * <Form.InputLabel for="floatingEmailInput" isFloating>Email address</Form.InputLabel>
+ * </Form.Floating>
+ *
+ * // Disabled floating label
+ * <Form.Floating>
+ * <Form.EmailInput disabled placeholder="name@example.com" id="floatingEmailInput" />
+ * <Form.InputLabel for="floatingEmailInput" isFloating>Email address</Form.InputLabel>
+ * </Form.Floating>
+ *
+ * // Readonly floating label
+ * <Form.Floating>
+ * <Form.EmailInput placeholder="name@example.com" id="floatingEmailInput" readonly />
+ * <Form.InputLabel for="floatingEmailInput" isFloating>Email address</Form.InputLabel>
+ * </Form.Floating>
+ *
+ * // Small sizing floating label
+ * <Form.Floating>
+ * <Form.EmailInput placeholder="name@example.com" id="floatingEmailInput" sizing="sm" />
+ * <Form.InputLabel for="floatingEmailInput" isFloating>Email address</Form.InputLabel>
+ * </Form.Floating>
+ * ```
+ * ### Props
+ * - `children` (any): Required. Child elements to be rendered inside the floating container.
+ * - `class` (string): Optional. Additional CSS classes to apply to the container.
+ * - `elementRef` (HTMLDivElement): Optional. Reference to the container DOM element.
+ */
+declare const FormFloating: import("svelte").Component<import("../index.js").DivElement, {}, "elementRef">;
+type FormFloating = ReturnType<typeof FormFloating>;
+export default FormFloating;

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

@@ -0,0 +1,35 @@
+<!--
+@component
+## Form.HelperText
+Bootstrap-styled helper text component for providing additional information about form controls.
+
+@example
+```svelte
+// Basic helper text
+<Form.TextInput placeholder="Enter your username" />
+<Form.HelperText>Your username must be 8-20 characters long.</Form.HelperText>
+
+// With ID association for accessibility
+<Form.TextInput id="emailInput" placeholder="Enter your email" aria-describedby="email-help" />
+<Form.HelperText id="email-help">We'll never share your email with anyone else.</Form.HelperText>
+
+// Inside a form group
+<Form.Group>
+    <Form.InputLabel for="passwordInput">Password</Form.InputLabel>
+    <Form.PasswordInput id="passwordInput" />
+    <Form.HelperText>Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces or emoji.</Form.HelperText>
+</Form.Group>
+```
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the helper text.
+- `elementRef` (HTMLDivElement): Optional. Reference to the helper text DOM element.
+- `id` (string): Optional. Unique identifier for the helper text element, used with aria-describedby.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+let { children, class: classValues, elementRef = $bindable(null), ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('form-text', classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {...restOfProps}>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,29 @@
+/**
+ * ## Form.HelperText
+ * Bootstrap-styled helper text component for providing additional information about form controls.
+ *
+ * @example
+ * ```svelte
+ * // Basic helper text
+ * <Form.TextInput placeholder="Enter your username" />
+ * <Form.HelperText>Your username must be 8-20 characters long.</Form.HelperText>
+ *
+ * // With ID association for accessibility
+ * <Form.TextInput id="emailInput" placeholder="Enter your email" aria-describedby="email-help" />
+ * <Form.HelperText id="email-help">We'll never share your email with anyone else.</Form.HelperText>
+ *
+ * // Inside a form group
+ * <Form.Group>
+ * <Form.InputLabel for="passwordInput">Password</Form.InputLabel>
+ * <Form.PasswordInput id="passwordInput" />
+ * <Form.HelperText>Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces or emoji.</Form.HelperText>
+ * </Form.Group>
+ * ```
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the helper text.
+ * - `elementRef` (HTMLDivElement): Optional. Reference to the helper text DOM element.
+ * - `id` (string): Optional. Unique identifier for the helper text element, used with aria-describedby.
+ */
+declare const FormHelperText: import("svelte").Component<import("../index.js").DivElement, {}, "elementRef">;
+type FormHelperText = ReturnType<typeof FormHelperText>;
+export default FormHelperText;

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

@@ -0,0 +1,18 @@
+<!--
+@component
+## Form.HiddenInput
+Bootstrap-styled hidden input component for passing data in forms without visual representation.
+
+@example
+```svelte
+<Form.HiddenInput name="hiddenInput" value="Nothing to see here" />
+```
+### Props
+- `elementRef` (HTMLInputElement): Optional. Reference to the input DOM element.
+- `value` (any): Optional. The value of the hidden input. If undefined, the input is empty.
+-->
+<script lang="ts">let { elementRef = $bindable(null), value = $bindable(undefined), ...restOfProps } = $props();
+export {};
+</script>
+
+<input bind:this={elementRef} bind:value type="hidden" {...restOfProps} />

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

@@ -0,0 +1,16 @@
+import type { Form } from './index.js';
+/**
+ * ## Form.HiddenInput
+ * Bootstrap-styled hidden input component for passing data in forms without visual representation.
+ *
+ * @example
+ * ```svelte
+ * <Form.HiddenInput name="hiddenInput" value="Nothing to see here" />
+ * ```
+ * ### Props
+ * - `elementRef` (HTMLInputElement): Optional. Reference to the input DOM element.
+ * - `value` (any): Optional. The value of the hidden input. If undefined, the input is empty.
+ */
+declare const FormHiddenInput: import("svelte").Component<Form.FileInputProps, {}, "value" | "elementRef">;
+type FormHiddenInput = ReturnType<typeof FormHiddenInput>;
+export default FormHiddenInput;

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

@@ -0,0 +1,30 @@
+<!--
+@component
+## Form.ImageInput
+Bootstrap-styled image input component that acts as a graphical submit button.
+
+@example
+```svelte
+// Basic image input
+<Form.ImageInput src="https://www.w3schools.com/tags/img_submit.gif" alt="Submit" width="48" height="48" />
+
+// Inside a form
+<form action="/submit" method="post">
+    <Form.TextInput name="username" placeholder="Username" />
+    <Form.PasswordInput name="password" placeholder="Password" />
+    <Form.ImageInput src="/images/submit-button.png" alt="Submit" width="100" height="40" />
+</form>
+
+// With additional styling
+<Form.ImageInput class="rounded shadow" src="/images/login-button.png" alt="Login" width="120" height="40" title="Click to login" />
+```
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the image input.
+- `elementRef` (HTMLInputElement): Optional. Reference to the input DOM element.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+let { class: classValues, elementRef = $bindable(null), ...restOfProps } = $props();
+let classes = $derived(uniqueClsx(classValues));
+</script>
+
+<input bind:this={elementRef} class={classes} type="image" {...restOfProps} />

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

@@ -0,0 +1,26 @@
+/**
+ * ## Form.ImageInput
+ * Bootstrap-styled image input component that acts as a graphical submit button.
+ *
+ * @example
+ * ```svelte
+ * // Basic image input
+ * <Form.ImageInput src="https://www.w3schools.com/tags/img_submit.gif" alt="Submit" width="48" height="48" />
+ *
+ * // Inside a form
+ * <form action="/submit" method="post">
+ * <Form.TextInput name="username" placeholder="Username" />
+ * <Form.PasswordInput name="password" placeholder="Password" />
+ * <Form.ImageInput src="/images/submit-button.png" alt="Submit" width="100" height="40" />
+ * </form>
+ *
+ * // With additional styling
+ * <Form.ImageInput class="rounded shadow" src="/images/login-button.png" alt="Login" width="120" height="40" title="Click to login" />
+ * ```
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the image input.
+ * - `elementRef` (HTMLInputElement): Optional. Reference to the input DOM element.
+ */
+declare const FormImageInput: import("svelte").Component<import("../index.js").InputElement, {}, "elementRef">;
+type FormImageInput = ReturnType<typeof FormImageInput>;
+export default FormImageInput;

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

@@ -0,0 +1,47 @@
+<!--
+@component
+## Form.InputGroupText
+Bootstrap-styled text component for input groups, typically used for prepending or appending text to form inputs.
+
+@example
+```svelte
+// Prepended text
+<Form.InputGroup>
+    <Form.InputGroupText>@</Form.InputGroupText>
+    <Form.TextInput placeholder="Username" />
+</Form.InputGroup>
+
+// Appended text
+<Form.InputGroup>
+    <Form.TextInput placeholder="Recipient's username" />
+    <Form.InputGroupText>@example.com</Form.InputGroupText>
+</Form.InputGroup>
+
+// Multiple addons
+<Form.InputGroup>
+    <Form.InputGroupText>$</Form.InputGroupText>
+    <Form.TextInput placeholder="Amount" aria-label="Amount" />
+    <Form.InputGroupText>.00</Form.InputGroupText>
+</Form.InputGroup>
+
+// With checkbox
+<Form.InputGroup>
+    <Form.InputGroupText>
+        <input type="checkbox" aria-label="Checkbox for following text input" />
+    </Form.InputGroupText>
+    <Form.TextInput placeholder="Check me out" aria-label="Text input with checkbox" />
+</Form.InputGroup>
+```
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the input group text.
+- `elementRef` (HTMLSpanElement): Optional. Reference to the input group text DOM element.
+- `elementType` (string): Optional. The type of element to render, either 'span' or 'label'. Defaults to 'span'.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+let { children, class: classValues, elementRef = $bindable(null), elementType = 'span', ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('input-group-text', classValues));
+</script>
+
+<svelte:element this={elementType} bind:this={elementRef} class={classes} {...restOfProps}>
+    {@render children?.()}
+</svelte:element>

package/dist/Form/form-input-group-text.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { Form } from './index.js';
+/**
+ * ## Form.InputGroupText
+ * Bootstrap-styled text component for input groups, typically used for prepending or appending text to form inputs.
+ *
+ * @example
+ * ```svelte
+ * // Prepended text
+ * <Form.InputGroup>
+ * <Form.InputGroupText>@</Form.InputGroupText>
+ * <Form.TextInput placeholder="Username" />
+ * </Form.InputGroup>
+ *
+ * // Appended text
+ * <Form.InputGroup>
+ * <Form.TextInput placeholder="Recipient's username" />
+ * <Form.InputGroupText>@example.com</Form.InputGroupText>
+ * </Form.InputGroup>
+ *
+ * // Multiple addons
+ * <Form.InputGroup>
+ * <Form.InputGroupText>$</Form.InputGroupText>
+ * <Form.TextInput placeholder="Amount" aria-label="Amount" />
+ * <Form.InputGroupText>.00</Form.InputGroupText>
+ * </Form.InputGroup>
+ *
+ * // With checkbox
+ * <Form.InputGroup>
+ * <Form.InputGroupText>
+ *     <input type="checkbox" aria-label="Checkbox for following text input" />
+ * </Form.InputGroupText>
+ * <Form.TextInput placeholder="Check me out" aria-label="Text input with checkbox" />
+ * </Form.InputGroup>
+ * ```
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the input group text.
+ * - `elementRef` (HTMLSpanElement): Optional. Reference to the input group text DOM element.
+ * - `elementType` (string): Optional. The type of element to render, either 'span' or 'label'. Defaults to 'span'.
+ */
+declare const FormInputGroupText: import("svelte").Component<Form.InputGroupTextProps, {}, "elementRef">;
+type FormInputGroupText = ReturnType<typeof FormInputGroupText>;
+export default FormInputGroupText;

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

@@ -0,0 +1,52 @@
+<!--
+@component
+## Form.InputGroup
+Bootstrap-styled container for grouping form controls with additional elements like text, buttons, or other inputs.
+
+@example
+```svelte
+// Basic input group with text
+<Form.InputGroup>
+    <span class="input-group-text">@</span>
+    <Form.TextInput placeholder="Username" />
+</Form.InputGroup>
+
+// Input with prefix and suffix
+<Form.InputGroup>
+    <span class="input-group-text">$</span>
+    <Form.TextInput aria-label="Amount (to the nearest dollar)" />
+    <span class="input-group-text">.00</span>
+</Form.InputGroup>
+
+// Input with button
+<Form.InputGroup>
+    <Form.TextInput placeholder="Recipient's username" aria-label="Recipient's username" />
+    <button class="btn btn-outline-secondary" type="button">Button</button>
+</Form.InputGroup>
+
+// Multiple inputs
+<Form.InputGroup>
+    <span class="input-group-text">First and last name</span>
+    <Form.TextInput aria-label="First name" />
+    <Form.TextInput aria-label="Last name" />
+</Form.InputGroup>
+```
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the input group.
+- `elementRef` (HTMLDivElement): Optional. Reference to the input group DOM element.
+- `hasValidation` (boolean): Optional. Indicates if the input group has validation styles applied.
+- `noWrap` (boolean): Optional. If true, prevents wrapping of the input group elements.
+- `sizing` ('sm' | 'lg'): Optional. Controls the size of the input element.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+let { children, class: classValues, elementRef = $bindable(null), hasValidation, noWrap, sizing, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('input-group', {
+    [`input-group-${sizing}`]: !!sizing,
+    'has-validation': hasValidation,
+    'flex-nowrap': noWrap
+}, classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {...restOfProps}>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,43 @@
+import type { Form } from './index.js';
+/**
+ * ## Form.InputGroup
+ * Bootstrap-styled container for grouping form controls with additional elements like text, buttons, or other inputs.
+ *
+ * @example
+ * ```svelte
+ * // Basic input group with text
+ * <Form.InputGroup>
+ * <span class="input-group-text">@</span>
+ * <Form.TextInput placeholder="Username" />
+ * </Form.InputGroup>
+ *
+ * // Input with prefix and suffix
+ * <Form.InputGroup>
+ * <span class="input-group-text">$</span>
+ * <Form.TextInput aria-label="Amount (to the nearest dollar)" />
+ * <span class="input-group-text">.00</span>
+ * </Form.InputGroup>
+ *
+ * // Input with button
+ * <Form.InputGroup>
+ * <Form.TextInput placeholder="Recipient's username" aria-label="Recipient's username" />
+ * <button class="btn btn-outline-secondary" type="button">Button</button>
+ * </Form.InputGroup>
+ *
+ * // Multiple inputs
+ * <Form.InputGroup>
+ * <span class="input-group-text">First and last name</span>
+ * <Form.TextInput aria-label="First name" />
+ * <Form.TextInput aria-label="Last name" />
+ * </Form.InputGroup>
+ * ```
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the input group.
+ * - `elementRef` (HTMLDivElement): Optional. Reference to the input group DOM element.
+ * - `hasValidation` (boolean): Optional. Indicates if the input group has validation styles applied.
+ * - `noWrap` (boolean): Optional. If true, prevents wrapping of the input group elements.
+ * - `sizing` ('sm' | 'lg'): Optional. Controls the size of the input element.
+ */
+declare const FormInputGroup: import("svelte").Component<Form.InputGroupProps, {}, "elementRef">;
+type FormInputGroup = ReturnType<typeof FormInputGroup>;
+export default FormInputGroup;

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

@@ -0,0 +1,33 @@
+<!--
+@component
+## Form.InputLabel
+Bootstrap-styled label component for form input elements.
+
+@example
+```svelte
+// Standard label for input
+<Form.Group>
+    <Form.InputLabel for="exampleInput">Email address</Form.InputLabel>
+    <Form.EmailInput id="exampleInput" placeholder="name@example.com" />
+    <Form.HelperText>We'll never share your email with anyone else.</Form.HelperText>
+</Form.Group>
+
+// Floating label (used with Form.Floating)
+<Form.Floating>
+    <Form.EmailInput id="floatingInput" placeholder="name@example.com" />
+    <Form.InputLabel for="floatingInput" isFloating>Email address</Form.InputLabel>
+</Form.Floating>
+```
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the label.
+- `elementRef` (HTMLLabelElement): Optional. Reference to the label DOM element.
+- `isFloating` (boolean): Optional. When true, formats the label for use in floating label contexts.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+let { children, class: classValues, elementRef = $bindable(null), isFloating = false, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx({ 'form-label': !isFloating }, classValues));
+</script>
+
+<label bind:this={elementRef} class={classes} {...restOfProps}>
+    {@render children?.()}
+</label>

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

@@ -0,0 +1,28 @@
+import type { Form } from './index.js';
+/**
+ * ## Form.InputLabel
+ * Bootstrap-styled label component for form input elements.
+ *
+ * @example
+ * ```svelte
+ * // Standard label for input
+ * <Form.Group>
+ * <Form.InputLabel for="exampleInput">Email address</Form.InputLabel>
+ * <Form.EmailInput id="exampleInput" placeholder="name@example.com" />
+ * <Form.HelperText>We'll never share your email with anyone else.</Form.HelperText>
+ * </Form.Group>
+ *
+ * // Floating label (used with Form.Floating)
+ * <Form.Floating>
+ * <Form.EmailInput id="floatingInput" placeholder="name@example.com" />
+ * <Form.InputLabel for="floatingInput" isFloating>Email address</Form.InputLabel>
+ * </Form.Floating>
+ * ```
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the label.
+ * - `elementRef` (HTMLLabelElement): Optional. Reference to the label DOM element.
+ * - `isFloating` (boolean): Optional. When true, formats the label for use in floating label contexts.
+ */
+declare const FormInputLabel: import("svelte").Component<Form.InputLabelProps, {}, "elementRef">;
+type FormInputLabel = ReturnType<typeof FormInputLabel>;
+export default FormInputLabel;