@winkintel/bootstrap-svelte 0.0.1

package/dist/Dropdown/dropdown.svelte.js

@@ -0,0 +1,435 @@
+import { isRTL } from '../common/dom.js';
+import { Context } from '../common/index.js';
+import { createPopper } from '@popperjs/core';
+import { tick } from 'svelte';
+export class DropdownRootState {
+    props;
+    #activeItemIndex = $state(-1); // Zero-based index for active item
+    #autoClose = $state(true); // Determines how the dropdown should close (default is true, meaning it closes on any click outside).
+    #direction = $state('dropdown');
+    #display = $state('dynamic');
+    #elementRef = $state(null);
+    #isButtonGroup = $state(false);
+    #isNavItem = $state(false);
+    #isShown = $state(false);
+    #items = $state([]);
+    ariaLabelledBy = $state(undefined); // Used for accessibility, linking the dropdown to a label.
+    constructor(props) {
+        this.props = props;
+        this.#autoClose = this.props.autoClose !== undefined ? this.props.autoClose : true; // Default to true if not specified.
+        this.#direction = this.props.direction || 'dropdown';
+        this.#display = this.props.display || 'dynamic';
+        this.#elementRef = this.props.elementRef || null;
+        this.#isButtonGroup = this.props.isButtonGroup || false;
+        // Bind the method to ensure `this` context is correct when passed as a callback.
+        this.focusOnNextItem = this.focusOnNextItem.bind(this);
+        this.focusOnPreviousItem = this.focusOnPreviousItem.bind(this);
+        this.registerItem = this.registerItem.bind(this);
+        this.toggleIsShown = this.toggleIsShown.bind(this);
+    }
+    get activeItemIndex() {
+        return this.#activeItemIndex;
+    }
+    set activeItemIndex(index) {
+        this.#activeItemIndex = index;
+    }
+    get autoClose() {
+        return this.#autoClose;
+    }
+    set autoClose(autoClose) {
+        this.#autoClose = autoClose;
+    }
+    get direction() {
+        return this.#direction;
+    }
+    set direction(direction) {
+        this.#direction = direction;
+    }
+    get display() {
+        return this.#display;
+    }
+    set display(display) {
+        this.#display = display;
+    }
+    get elementRef() {
+        return this.#elementRef;
+    }
+    set elementRef(element) {
+        // The root element reference, typically the dropdown toggle button or a wrapper.
+        // This is used by Popper.js to position the dropdown menu.
+        this.#elementRef = element;
+        if (this.#elementRef) {
+            const parentElement = this.#elementRef.parentElement;
+            this.#isNavItem = parentElement ? parentElement.classList.contains('navbar-nav') : false;
+        }
+    }
+    get hasItems() {
+        return this.#items.length > 0;
+    }
+    get isButtonGroup() {
+        return this.#isButtonGroup;
+    }
+    set isButtonGroup(isButtonGroup) {
+        this.#isButtonGroup = isButtonGroup;
+    }
+    get isNavItem() {
+        return this.#isNavItem;
+    }
+    get isShown() {
+        return this.#isShown;
+    }
+    focusOnNextItem() {
+        if (this.#items.length === 0) {
+            return;
+        }
+        this.#activeItemIndex = (this.#activeItemIndex + 1) % this.#items.length;
+        this.#items[this.#activeItemIndex]?.props.elementRef?.focus();
+    }
+    focusOnPreviousItem() {
+        if (this.#items.length === 0) {
+            return;
+        }
+        this.#activeItemIndex = (this.#activeItemIndex - 1 + this.#items.length) % this.#items.length;
+        this.#items[this.#activeItemIndex]?.props.elementRef?.focus();
+    }
+    registerItem(item) {
+        item.itemIndex = this.#items.length; // Set the item's index based on current length.
+        this.#items.push(item);
+    }
+    toggleIsShown(event) {
+        if (!this.#isShown) {
+            this.props.onShow?.(event);
+        }
+        if (this.#isShown) {
+            this.props.onHide?.(event);
+        }
+        this.#isShown = !this.#isShown;
+        this.#activeItemIndex = -1; // Reset active item index when toggling visibility.
+        if (this.#isShown) {
+            this.props.onShown?.(event);
+        }
+        if (!this.#isShown) {
+            this.props.onHidden?.(event);
+        }
+    }
+}
+export class DropdownToggleState {
+    props;
+    root;
+    // Derives its shown state directly from the root state.
+    isShown = $derived.by(() => this.root.isShown);
+    constructor(props, root) {
+        this.props = props;
+        this.root = root;
+        // Bind the method to ensure `this` context is correct when used as an event handler.
+        this.onclick = this.onclick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
+        if (this.props.isSplit && !this.root.isButtonGroup) {
+            // If the toggle is a split button, the root must be treated as a button group
+            // to ensure correct Bootstrap styling and layout.
+            this.root.isButtonGroup = true;
+        }
+        this.root.ariaLabelledBy = this.props.id || undefined; // Set the aria-labelledby attribute for accessibility.
+    }
+    onclick(event) {
+        event.preventDefault();
+        this.root.toggleIsShown(event);
+    }
+    onkeydown(event) {
+        handleKeydown(event, this.root);
+    }
+}
+export class DropdownMenuState {
+    props;
+    root;
+    // Private
+    #autoClose = $derived.by(() => this.root?.autoClose);
+    #elementRef = $state(null); // Reference to the dropdown menu element itself.
+    #isEnd = $state(false);
+    #popperInstance = null;
+    #popperOffset = $state([0, 2]);
+    #popperPlacement = $state(undefined);
+    #rootElementRef = $derived.by(() => this.root?.elementRef); // Reference to the root dropdown element, used for Popper.js positioning.
+    // Public
+    isShown = $derived.by(() => this.root.isShown); // Derives its shown state directly from the root state.
+    ariaLabelledBy = $derived.by(() => this.root.ariaLabelledBy);
+    constructor(props, root) {
+        this.props = props;
+        this.root = root;
+        this.#elementRef = this.props.elementRef || null;
+        this.#isEnd = this.props.isEnd || false;
+        this.#popperOffset = this.props.offset || [0, 2];
+        // Bind methods to ensure `this` context is correct when passed as callbacks or event handlers.
+        this.bodyOnclick = this.bodyOnclick.bind(this);
+        this.createPopperInstance = this.createPopperInstance.bind(this);
+        this.destroyPopper = this.destroyPopper.bind(this);
+        this.determinePopperPlacement = this.determinePopperPlacement.bind(this);
+        this.dispose = this.dispose.bind(this);
+        this.syncIsEndWithRoot = this.syncIsEndWithRoot.bind(this);
+        // Ensure the dropdown menu's end alignment is consistent with the root's direction.
+        this.syncIsEndWithRoot();
+        // Effect to manage the Popper.js instance lifecycle.
+        // It creates the instance when the menu is shown and elements are available,
+        // and implicitly handles destruction/recreation if dependencies change.
+        $effect(() => {
+            if (this.#rootElementRef && this.#elementRef && this.isShown) {
+                this.createPopperInstance();
+            }
+        });
+    }
+    get autoClose() {
+        return this.#autoClose;
+    }
+    get elementRef() {
+        return this.#elementRef;
+    }
+    set elementRef(element) {
+        this.#elementRef = element;
+    }
+    get isEnd() {
+        return this.#isEnd;
+    }
+    set isEnd(isEnd) {
+        this.#isEnd = isEnd;
+        // Ensure the dropdown menu's end alignment is consistent with the root's direction.
+        this.syncIsEndWithRoot();
+    }
+    get popperOffset() {
+        return this.#popperOffset;
+    }
+    set popperOffset(offset) {
+        this.#popperOffset = offset;
+        // Recreate the Popper instance to apply the new offset.
+        this.createPopperInstance();
+    }
+    get popperPlacement() {
+        return this.#popperPlacement;
+    }
+    // Handles clicks on the document body to close the dropdown when clicking outside.
+    bodyOnclick(event) {
+        if (!this.isShown) {
+            return;
+        }
+        const target = event.target;
+        // Check if the click occurred within this specific dropdown instance.
+        // This prevents closing if a click happens inside the dropdown menu or on its toggle.
+        const nearestDropdown = target.closest(`#${this.root.props.id}`);
+        if (nearestDropdown && nearestDropdown.id === this.root.props.id) {
+            // The click is within the current dropdown, so do nothing.
+            return;
+        }
+        // Only close on outside clicks if autoClose is true or 'outside'
+        // false: only close on toggle click (ignore body clicks)
+        // 'inside': only close on item/toggle clicks (ignore body clicks)
+        // 'outside': close on toggle/body clicks (ignore item clicks)
+        // true: close on any click (toggle, item, or body)
+        if (this.autoClose === true || this.autoClose === 'outside') {
+            this.root.toggleIsShown(event);
+        }
+    }
+    // Cleans up resources, particularly the Popper.js instance and element references.
+    dispose() {
+        this.destroyPopper();
+        this.#elementRef = null;
+        this.#rootElementRef = null; // Clearing derived state source if it were directly settable.
+        this.#popperInstance = null;
+    }
+    createPopperInstance() {
+        this.destroyPopper();
+        if (!this.#elementRef || !this.#rootElementRef) {
+            return;
+        }
+        this.#popperPlacement = this.determinePopperPlacement();
+        const popperConfig = {
+            placement: this.#popperPlacement,
+            modifiers: this.determinePopperModifiers()
+        };
+        this.#popperInstance = createPopper(this.#rootElementRef, this.#elementRef, popperConfig);
+    }
+    determinePopperModifiers() {
+        const isStaticDisplay = this.root.isNavItem || this.root.display === 'static';
+        if (isStaticDisplay) {
+            return [
+                {
+                    name: 'applyStyles', // Disables Popper.js styles, allowing Bootstrap to handle positioning.
+                    enabled: false
+                }
+            ];
+        }
+        return [
+            {
+                name: 'preventOverflow',
+                enabled: true,
+                options: {
+                    boundary: 'clippingParents' // Ensures the dropdown stays within viewport boundaries
+                }
+            },
+            {
+                name: 'offset', // Adds a small offset between the toggle and the menu
+                enabled: true,
+                options: {
+                    offset: this.#popperOffset
+                }
+            }
+        ];
+    }
+    // Determines the appropriate Popper.js placement based on the dropdown's direction
+    // and whether the UI is in Right-To-Left (RTL) mode.
+    determinePopperPlacement() {
+        const _isRTL = isRTL();
+        // Define placement mappings for better maintainability
+        const placementMap = {
+            dropend: { ltr: 'right-start', rtl: 'left-start' },
+            dropstart: { ltr: 'left-start', rtl: 'right-start' },
+            'dropup-center': { ltr: 'top', rtl: 'top' },
+            'dropup-end': { ltr: 'top-end', rtl: 'top-start' },
+            dropup: { ltr: 'top-start', rtl: 'top-end' },
+            'dropdown-center': { ltr: 'bottom', rtl: 'bottom' },
+            'dropdown-end': { ltr: 'bottom-end', rtl: 'bottom-start' }
+        };
+        const direction = this.root.direction;
+        const mapping = placementMap[direction];
+        if (mapping) {
+            return _isRTL ? mapping.rtl : mapping.ltr;
+        }
+        // Default placement if the direction is not in the map (e.g., 'dropdown').
+        // For 'dropdown', the default is 'bottom-start' (LTR) or 'bottom-end' (RTL).
+        return _isRTL ? 'bottom-end' : 'bottom-start';
+    }
+    destroyPopper() {
+        if (!this.#popperInstance) {
+            return;
+        }
+        this.#popperInstance.destroy();
+        this.#popperInstance = null;
+    }
+    syncIsEndWithRoot() {
+        const currentDirection = this.root.direction;
+        const configuredDirection = this.root.props.direction ?? 'dropdown';
+        const hasCompatibleDirection = currentDirection.endsWith('-end') || configuredDirection.endsWith('-end');
+        // If the menu is aligned to the end, but the root direction doesn't reflect this,
+        // update the root direction to ensure consistent behavior and styling.
+        if (this.#isEnd && !hasCompatibleDirection) {
+            const direction = currentDirection;
+            if (direction === 'dropdown' || direction === 'dropdown-center') {
+                this.root.direction = 'dropdown-end';
+            }
+            else if (direction === 'dropup' || direction === 'dropup-center') {
+                this.root.direction = 'dropup-end';
+            }
+            else {
+                // Default to dropdown-end if the current direction is unusual (e.g., dropstart/dropend with isEnd).
+                this.root.direction = 'dropdown-end';
+            }
+        }
+    }
+}
+export class DropdownItemState {
+    props;
+    root;
+    #autoClose = $derived.by(() => this.root?.autoClose);
+    #itemIndex = $state(-1); // The index of this item within the dropdown, set when registered with the root.
+    constructor(props, root) {
+        this.props = props;
+        this.root = root;
+        // Bind the method to ensure `this` context is correct when used as an event handler.
+        this.onclick = this.onclick.bind(this);
+        this.onfocus = this.onfocus.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
+    }
+    get autoClose() {
+        return this.#autoClose;
+    }
+    get itemIndex() {
+        return this.#itemIndex;
+    }
+    set itemIndex(index) {
+        this.#itemIndex = index;
+    }
+    // When a dropdown item is clicked, it should typically close the dropdown.
+    onclick(event) {
+        // Only close on item clicks if autoClose is true or 'inside'
+        // false: only close on toggle click (ignore item clicks)
+        // 'inside': close on item/toggle clicks (ignore body clicks)
+        // 'outside': only close on toggle/body clicks (ignore item clicks)
+        // true: close on any click (toggle, item, or body)
+        if (this.autoClose === true || this.autoClose === 'inside') {
+            this.root.toggleIsShown(event);
+        }
+    }
+    onfocus(_event) {
+        this.root.activeItemIndex = this.#itemIndex;
+    }
+    onkeydown(event) {
+        handleKeydown(event, this.root);
+    }
+}
+// Svelte Context key for sharing the DropdownRootState.
+const DropdownRootContext = new Context('dropdown-root');
+// Initializes and provides the DropdownRootState via Svelte Context.
+// This allows child components (Toggle, Menu, Item) to access and interact with the root state.
+export function initDropdownRootState(props) {
+    const rootState = new DropdownRootState(props);
+    return DropdownRootContext.set(rootState);
+}
+// Initializes DropdownToggleState, ensuring it has access to the DropdownRootState from context.
+export function initDropdownToggleState(props) {
+    if (!DropdownRootContext.exists()) {
+        throw new Error('DropdownRootState must be initialized before DropdownToggleState');
+    }
+    const rootState = DropdownRootContext.get();
+    return new DropdownToggleState(props, rootState);
+}
+// Initializes DropdownMenuState, ensuring it has access to the DropdownRootState from context.
+export function initDropdownMenuState(props) {
+    if (!DropdownRootContext.exists()) {
+        // Changed error message to reflect DropdownMenuState dependency
+        throw new Error('DropdownRootState must be initialized before DropdownMenuState');
+    }
+    const rootState = DropdownRootContext.get();
+    return new DropdownMenuState(props, rootState);
+}
+// Initializes DropdownItemState, ensuring it has access to the DropdownRootState from context.
+export function initDropdownItemState(props) {
+    if (!DropdownRootContext.exists()) {
+        throw new Error('DropdownRootState must be initialized before DropdownItemState');
+    }
+    const rootState = DropdownRootContext.get();
+    const itemState = new DropdownItemState(props, rootState);
+    rootState.registerItem(itemState);
+    return itemState;
+}
+/**
+ * Handles keyboard navigation for the toggle and items within the dropdown.
+ * Supports opening the dropdown with ArrowUp/ArrowDown and navigating between items.
+ *
+ * @param event KeyboardEvent
+ * @param root DropdownRootState
+ */
+function handleKeydown(event, root) {
+    const { key } = event;
+    const isUpOrDownEvent = ['ArrowUp', 'ArrowDown'].includes(event.key);
+    if (isUpOrDownEvent && !root.isShown) {
+        event.preventDefault();
+        root.toggleIsShown(event);
+        // Wait for the dropdown to be shown and items to be rendered before focusing.
+        tick().then(() => {
+            if (key === 'ArrowDown') {
+                root.focusOnNextItem();
+            }
+            else if (key === 'ArrowUp') {
+                root.focusOnPreviousItem();
+            }
+        });
+    }
+    else {
+        if (key === 'ArrowDown') {
+            event.preventDefault();
+            root.focusOnNextItem();
+        }
+        else if (key === 'ArrowUp') {
+            event.preventDefault();
+            root.focusOnPreviousItem();
+        }
+    }
+}

package/dist/Dropdown/index.d.ts

@@ -0,0 +1 @@
+export * as Dropdown from './composition.js';

package/dist/Dropdown/index.js

@@ -0,0 +1 @@
+export * as Dropdown from './composition.js';

package/dist/Dropdown/types.d.ts

@@ -0,0 +1,47 @@
+import type { ButtonRootProps } from '../Button/index.js';
+import type { AnchorElement, DivElement, HeadingElement, HeadingLevels, ListItemElement, PopperOffset, SpanElement, UListElement } from '../common/types.js';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+export type DropdownAutoClose = boolean | 'inside' | 'outside';
+export type DropdownDisplay = 'dynamic' | 'static';
+export type DropdownDirection = 'dropdown' | 'dropdown-center' | 'dropdown-end' | 'dropup' | 'dropup-center' | 'dropup-end' | 'dropend' | 'dropstart';
+export type DropdownMenuContainer = string | HTMLElement | false;
+export type DropdownRootProps = DivElement & {
+    autoClose?: DropdownAutoClose;
+    direction?: DropdownDirection;
+    display?: DropdownDisplay;
+    isButtonGroup?: boolean;
+    onHide?: EventListener;
+    onHidden?: EventListener;
+    onShow?: EventListener;
+    onShown?: EventListener;
+};
+export type DropdownToggleProps = ButtonRootProps & {
+    isSplit?: boolean;
+    onclick?: EventListener;
+    onkeydown?: EventListener;
+};
+export type DropdownMenuProps = UListElement & {
+    container?: DropdownMenuContainer;
+    isDark?: boolean;
+    isEnd?: boolean;
+    offset?: PopperOffset;
+};
+export type DropdownItemProps = AnchorElement & {
+    href?: HTMLAnchorAttributes['href'];
+    isActive?: boolean;
+    isDisabled?: boolean;
+    listItemProps?: ListItemElement;
+    onclick?: EventListener;
+    onfocus?: EventListener;
+    onkeydown?: EventListener;
+};
+export type DropdownHeaderProps = HeadingElement & {
+    level?: HeadingLevels;
+    listItemProps?: ListItemElement;
+};
+export type DropdownDividerProps = DivElement & {
+    listItemProps?: ListItemElement;
+};
+export type DropdownTextProps = SpanElement & {
+    listItemProps?: ListItemElement;
+};

package/dist/Dropdown/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Form/composition.d.ts

@@ -0,0 +1,34 @@
+export { default as CheckInput } from './form-check-input.svelte';
+export { default as CheckLabel } from './form-check-label.svelte';
+export { default as Check } from './form-check.svelte';
+export { default as ColorInput } from './form-color-input.svelte';
+export { default as DateInput } from './form-date-input.svelte';
+export { default as DatetimeLocalInput } from './form-datetime-local-input.svelte';
+export { default as EmailInput } from './form-email-input.svelte';
+export { default as Feedback } from './form-feedback.svelte';
+export { default as FileInput } from './form-file-input.svelte';
+export { default as Floating } from './form-floating.svelte';
+export { default as HelperText } from './form-helper-text.svelte';
+export { default as HiddenInput } from './form-hidden-input.svelte';
+export { default as ImageInput } from './form-image-input.svelte';
+export { default as InputGroupText } from './form-input-group-text.svelte';
+export { default as InputGroup } from './form-input-group.svelte';
+export { default as InputLabel } from './form-input-label.svelte';
+export { default as MonthInput } from './form-month-input.svelte';
+export { default as NumberInput } from './form-number-input.svelte';
+export { default as PasswordInput } from './form-password-input.svelte';
+export { default as RadioInput } from './form-radio-input.svelte';
+export { default as RadioLabel } from './form-radio-label.svelte';
+export { default as RangeInput } from './form-range-input.svelte';
+export { default as SearchInput } from './form-search-input.svelte';
+export { default as Select } from './form-select.svelte';
+export { default as SwitchInput } from './form-switch-input.svelte';
+export { default as SwitchLabel } from './form-switch-label.svelte';
+export { default as TelephoneInput } from './form-telephone-input.svelte';
+export { default as TextArea } from './form-text-area.svelte';
+export { default as TextInput } from './form-text-input.svelte';
+export { default as TimeInput } from './form-time-input.svelte';
+export { default as UrlInput } from './form-url-input.svelte';
+export { default as WeekInput } from './form-week-Input.svelte';
+export { default as Root } from './form.svelte';
+export type { FormCheckInputProps as CheckInputProps, FormCheckLabelProps as CheckLabelProps, FormCheckProps as CheckProps, FormColorInputProps as ColorInputProps, FormDateInputProps as DateInputProps, FormDatetimeLocalInputProps as DatetimeLocalInputProps, FormEmailInputProps as EmailInputProps, FormFeedbackProps as FeedbackProps, FormFileInputProps as FileInputProps, FormFloatingProps as FloatingProps, FormHelperTextProps as HelperTextProps, FormHiddenInputProps as HiddenInputProps, FormImageInputProps as ImageInputProps, FormInputGroupProps as InputGroupProps, FormInputGroupTextProps as InputGroupTextProps, FormInputLabelProps as InputLabelProps, FormMonthInputProps as MonthInputProps, FormNumberInputProps as NumberInputProps, FormPasswordInputProps as PasswordInputProps, FormRadioInputProps as RadioInputProps, FormRadioLabelProps as RadioLabelProps, FormRangeInputProps as RangeInputProps, FormRootProps as RootProps, FormSearchInputProps as SearchInputProps, FormSelectProps as SelectProps, FormSwitchInputProps as SwitchInputProps, FormSwitchLabelProps as SwitchLabelProps, FormTelephoneInputProps as TelephoneInputProps, FormTextAreaProps as TextAreaProps, FormTextInputProps as TextInputProps, FormTimeInputProps as TimeInputProps, FormUrlInputProps as UrlInputProps, FormWeekInputProps as WeekInputProps } from './types.js';

package/dist/Form/composition.js

@@ -0,0 +1,33 @@
+export { default as CheckInput } from './form-check-input.svelte';
+export { default as CheckLabel } from './form-check-label.svelte';
+export { default as Check } from './form-check.svelte';
+export { default as ColorInput } from './form-color-input.svelte';
+export { default as DateInput } from './form-date-input.svelte';
+export { default as DatetimeLocalInput } from './form-datetime-local-input.svelte';
+export { default as EmailInput } from './form-email-input.svelte';
+export { default as Feedback } from './form-feedback.svelte';
+export { default as FileInput } from './form-file-input.svelte';
+export { default as Floating } from './form-floating.svelte';
+export { default as HelperText } from './form-helper-text.svelte';
+export { default as HiddenInput } from './form-hidden-input.svelte';
+export { default as ImageInput } from './form-image-input.svelte';
+export { default as InputGroupText } from './form-input-group-text.svelte';
+export { default as InputGroup } from './form-input-group.svelte';
+export { default as InputLabel } from './form-input-label.svelte';
+export { default as MonthInput } from './form-month-input.svelte';
+export { default as NumberInput } from './form-number-input.svelte';
+export { default as PasswordInput } from './form-password-input.svelte';
+export { default as RadioInput } from './form-radio-input.svelte';
+export { default as RadioLabel } from './form-radio-label.svelte';
+export { default as RangeInput } from './form-range-input.svelte';
+export { default as SearchInput } from './form-search-input.svelte';
+export { default as Select } from './form-select.svelte';
+export { default as SwitchInput } from './form-switch-input.svelte';
+export { default as SwitchLabel } from './form-switch-label.svelte';
+export { default as TelephoneInput } from './form-telephone-input.svelte';
+export { default as TextArea } from './form-text-area.svelte';
+export { default as TextInput } from './form-text-input.svelte';
+export { default as TimeInput } from './form-time-input.svelte';
+export { default as UrlInput } from './form-url-input.svelte';
+export { default as WeekInput } from './form-week-Input.svelte';
+export { default as Root } from './form.svelte';

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

@@ -0,0 +1,92 @@
+<!--
+@component
+## 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.
+-->
+<script lang="ts">import { noop, uniqueClsx } from '../common/index.js';
+let { checked = $bindable(false), class: classValues, elementRef = $bindable(null), group = $bindable(null), isIndeterminate, isInvalid, isValid, onchange = noop, value = undefined, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('form-check-input', {
+    'is-valid': isValid,
+    'is-invalid': isInvalid
+}, classValues));
+const handleChange = (event) => {
+    if (group !== null) {
+        if (!Array.isArray(group)) {
+            console.warn('Form.CheckInput: `group` prop should be an array when used for grouped inputs.');
+            return;
+        }
+        const isIncluded = group.includes(value);
+        if (!isIncluded) {
+            // Add the value to the group array
+            group = [...group, value];
+        }
+        else if (isIncluded) {
+            // Remove the value from the group array
+            group = group.filter((val) => val !== value);
+        }
+    }
+    if (onchange !== null) {
+        onchange(event);
+    }
+};
+$effect(() => {
+    if (elementRef && isIndeterminate !== undefined) {
+        elementRef.indeterminate = isIndeterminate;
+    }
+});
+$effect(() => {
+    if (group !== null && Array.isArray(group)) {
+        checked = group.includes(value);
+    }
+});
+</script>
+
+<input
+    aria-invalid={isInvalid === true ? 'true' : isValid === true ? 'false' : undefined}
+    bind:this={elementRef}
+    bind:checked
+    class={classes}
+    onchange={handleChange}
+    type="checkbox"
+    {value}
+    {...restOfProps} />