@winkintel/bootstrap-svelte 0.0.1

package/dist/common/navbar-offcanvas.svelte.d.ts

@@ -0,0 +1,101 @@
+import type { Navbar, Offcanvas } from '../index.js';
+import type { OffcanvasBackdrop, OffcanvasBreakpoint } from '../Offcanvas/types.js';
+/**
+ * NavbarRootState is the state of the Navbar component.
+ * It is used to manage the state of the Navbar and its children.
+ */
+export declare class NavbarRootState {
+    #private;
+    readonly props: Navbar.RootProps;
+    ariaControls: string | undefined;
+    transitionDuration: number;
+    constructor(props: Navbar.RootProps);
+    get isExpanded(): boolean;
+    toggleIsExpanded(): void;
+}
+/**
+ * NavbarTogglerState is the state of the Navbar.Toggler component.
+ * It is used to manage the state of the Navbar.Toggler and its children.
+ */
+export declare class NavbarTogglerState {
+    readonly props: Navbar.TogglerProps;
+    readonly root: NavbarRootState;
+    isExpanded: boolean;
+    constructor(props: Navbar.TogglerProps, root: NavbarRootState);
+    onclick(): void;
+}
+/**
+ * NavbarCollapseState is the state of the Navbar.Collapse component.
+ * It is used to manage the state of the Navbar.Collapse and its children.
+ */
+export declare class NavbarCollapseState {
+    readonly props: Navbar.CollapseProps;
+    readonly root: NavbarRootState;
+    isExpanded: boolean;
+    constructor(props: Navbar.CollapseProps, root: NavbarRootState);
+}
+/**
+ * OffcanvasRootState is the state of the Offcanvas component.
+ * It is used to manage the state of the Offcanvas and its children.
+ */
+export declare class OffcanvasRootState {
+    #private;
+    readonly props: Offcanvas.RootProps;
+    readonly isMediaQueryMatched: boolean;
+    readonly transitionDuration: number;
+    constructor(props: Offcanvas.RootProps);
+    get isShown(): boolean;
+    get useBackdrop(): OffcanvasBackdrop;
+    set useBackdrop(value: OffcanvasBackdrop);
+    get showOnBreakpoint(): OffcanvasBreakpoint | undefined;
+    set showOnBreakpoint(value: OffcanvasBreakpoint | undefined);
+    get isBackdropShown(): boolean;
+    toggleIsShown(): void;
+}
+/**
+ * OffcanvasHeaderState is the state of the Offcanvas.Header component.
+ * It is used to manage the state of the Offcanvas.Header and its children.
+ */
+export declare class OffcanvasHeaderState {
+    readonly props: Offcanvas.HeaderProps;
+    readonly root: OffcanvasRootState;
+    isShown: boolean;
+    isDismissible: boolean;
+    constructor(props: Offcanvas.HeaderProps, root: OffcanvasRootState);
+    onclick(): void;
+}
+/**
+ * Creates a new NavbarRootState and sets it in the NavbarRootContext.
+ * It should be called in the root Navbar component.
+ * @param props The props of the Navbar component.
+ * @returns The created NavbarRootState instance.
+ */
+export declare function initNavbarRootState(props: Navbar.RootProps): NavbarRootState;
+/**
+ * Creates a new NavbarItemState and sets it in the NavbarItemContext.
+ * It should be called in the NavbarItem component.
+ * @param props The props of the Navbar.Toggler component.
+ * @returns The created NavbarTogglerState instance.
+ */
+export declare function initNavbarTogglerState(props: Navbar.TogglerProps): NavbarTogglerState;
+/**
+ * Creates a new NavbarCollapseState and sets it in the NavbarCollapseContext.
+ * It should be called in the Navbar.Collapse component.
+ * @param props The props of the Navbar.Collapse component.
+ * @returns The created NavbarCollapseState instance.
+ */
+export declare function initNavbarCollapseState(props: Navbar.CollapseProps): NavbarCollapseState;
+/**
+ * Creates a new OffcanvasRootState and sets it in the OffcanvasRootContext.
+ * This is used to manage the state of the Offcanvas component and its children.
+ * @param props The props of the Offcanvas component.
+ * @returns The created OffcanvasRootState.
+ */
+export declare function initOffcanvasRootState(props: Offcanvas.RootProps): OffcanvasRootState;
+/**
+ * Creates a new OffcanvasHeaderState and sets it in the OffcanvasHeaderContext.
+ * This is used to manage the state of the Offcanvas.Header component and its children.
+ * @param props The props of the Offcanvas.Header component.
+ * @returns The created OffcanvasHeaderState.
+ */
+export declare function initOffcanvasHeaderState(props: Offcanvas.HeaderProps): OffcanvasHeaderState;

package/dist/common/navbar-offcanvas.svelte.js

@@ -0,0 +1,228 @@
+import { Context } from './index.js';
+import { BreakpointMinimumMediaQuery } from './types.js';
+import { tick } from 'svelte';
+import { MediaQuery } from 'svelte/reactivity';
+/**
+ * NavbarRootState is the state of the Navbar component.
+ * It is used to manage the state of the Navbar and its children.
+ */
+export class NavbarRootState {
+    props;
+    // Private
+    #isExpanded = $state(false);
+    #expandOnBreakpoint = $state('xs');
+    #mediaQuery = $state(undefined);
+    // Public
+    ariaControls = $state(undefined);
+    transitionDuration = $state(0);
+    constructor(props) {
+        this.props = props;
+        this.toggleIsExpanded = this.toggleIsExpanded.bind(this);
+        this.#expandOnBreakpoint = this.props.expandOnBreakpoint || 'xs';
+        if (typeof window !== 'undefined' && this.#expandOnBreakpoint) {
+            const query = BreakpointMinimumMediaQuery[this.#expandOnBreakpoint];
+            this.#mediaQuery = new MediaQuery(query || '');
+        }
+        // Reset the explicit-expanded flag when we cross from inline mode
+        // (media query matched) back into collapsed/offcanvas mode. Without
+        // this, a previous toggle keeps the offcanvas appearing pre-opened on
+        // the next downward cross.
+        let previousMediaQueryMatched = undefined;
+        $effect(() => {
+            const matched = this.#mediaQuery?.current;
+            if (previousMediaQueryMatched === true && matched === false && this.#isExpanded) {
+                this.#isExpanded = false;
+            }
+            previousMediaQueryMatched = matched;
+        });
+    }
+    get isExpanded() {
+        return this.#isExpanded || this.#mediaQuery?.current || false;
+    }
+    toggleIsExpanded() {
+        this.#isExpanded = !this.#isExpanded;
+    }
+}
+/**
+ * NavbarTogglerState is the state of the Navbar.Toggler component.
+ * It is used to manage the state of the Navbar.Toggler and its children.
+ */
+export class NavbarTogglerState {
+    props;
+    root;
+    isExpanded = $derived.by(() => this.root.isExpanded);
+    constructor(props, root) {
+        this.props = props;
+        this.root = root;
+        this.onclick = this.onclick.bind(this);
+    }
+    onclick() {
+        // When the Navbar is collapsed, we need to set the `transitionDuration` prop to 350 before we toggle the collapse
+        // to ensure that the transition is smooth. Otherwise, the transition will be instant.
+        if (this.isExpanded === false) {
+            this.root.transitionDuration = 350;
+            // We need to allow the `transitionDuration` reactivity to be complete before we toggle the collapse...
+            tick().then(() => {
+                this.root.toggleIsExpanded();
+            });
+        }
+        else {
+            this.root.toggleIsExpanded();
+        }
+    }
+}
+/**
+ * NavbarCollapseState is the state of the Navbar.Collapse component.
+ * It is used to manage the state of the Navbar.Collapse and its children.
+ */
+export class NavbarCollapseState {
+    props;
+    root;
+    isExpanded = $derived.by(() => this.root.isExpanded);
+    constructor(props, root) {
+        this.props = props;
+        this.root = root;
+        if (!this.props.id) {
+            console.warn('props.id is required for the Navbar.Collapse to set accessibility correctly');
+        }
+        this.root.ariaControls = this.props.id || undefined;
+    }
+}
+/**
+ * OffcanvasRootState is the state of the Offcanvas component.
+ * It is used to manage the state of the Offcanvas and its children.
+ */
+export class OffcanvasRootState {
+    props;
+    // Private
+    #isShown = $state(false);
+    #useBackdrop = $state(true);
+    #mediaQuery = $state(undefined);
+    #showOnBreakpoint = $state(undefined);
+    #navbarRootState = $state(undefined);
+    // Public
+    isMediaQueryMatched = $derived(this.#mediaQuery?.current || false);
+    transitionDuration = $derived(this.#mediaQuery?.current ? 0 : 350);
+    constructor(props) {
+        this.props = props;
+        this.toggleIsShown = this.toggleIsShown.bind(this);
+        this.#isShown = this.props.isShown ?? false;
+        this.#useBackdrop = this.props.useBackdrop ?? true;
+        if (NavbarRootContext.exists()) {
+            this.#navbarRootState = NavbarRootContext.get();
+            this.showOnBreakpoint = this.#navbarRootState.props.expandOnBreakpoint;
+            $effect(() => {
+                if (this.#navbarRootState && this.#isShown !== this.#navbarRootState.isExpanded) {
+                    const navbarIsExpanded = this.#navbarRootState.isExpanded;
+                    // Because the transition is asynchronous, we need to wait for the next tick before toggling the state...
+                    tick().then(() => {
+                        this.#isShown = navbarIsExpanded;
+                    });
+                }
+            });
+        }
+        else {
+            this.showOnBreakpoint = this.props.showOnBreakpoint;
+        }
+    }
+    get isShown() {
+        return this.#isShown || this.#mediaQuery?.current || false;
+    }
+    get useBackdrop() {
+        return this.#useBackdrop;
+    }
+    set useBackdrop(value) {
+        this.#useBackdrop = value;
+    }
+    get showOnBreakpoint() {
+        return this.#showOnBreakpoint;
+    }
+    set showOnBreakpoint(value) {
+        this.#showOnBreakpoint = value;
+        if (typeof window !== 'undefined' && this.#showOnBreakpoint) {
+            const query = BreakpointMinimumMediaQuery[this.#showOnBreakpoint];
+            this.#mediaQuery = new MediaQuery(query || '');
+        }
+    }
+    get isBackdropShown() {
+        return this.isShown && this.#useBackdrop && !this.isMediaQueryMatched;
+    }
+    toggleIsShown() {
+        if (this.#navbarRootState) {
+            this.#navbarRootState.toggleIsExpanded();
+        }
+        else {
+            this.#isShown = !this.#isShown;
+        }
+    }
+}
+/**
+ * OffcanvasHeaderState is the state of the Offcanvas.Header component.
+ * It is used to manage the state of the Offcanvas.Header and its children.
+ */
+export class OffcanvasHeaderState {
+    props;
+    root;
+    isShown = $derived.by(() => this.root.isShown);
+    isDismissible = $state(false);
+    constructor(props, root) {
+        this.props = props;
+        this.root = root;
+        this.isDismissible = this.props.isDismissible ?? false;
+    }
+    onclick() {
+        this.root.toggleIsShown();
+    }
+}
+const NavbarRootContext = new Context('navbar-root');
+const OffcanvasRootContext = new Context('offcanvas-root');
+/**
+ * Creates a new NavbarRootState and sets it in the NavbarRootContext.
+ * It should be called in the root Navbar component.
+ * @param props The props of the Navbar component.
+ * @returns The created NavbarRootState instance.
+ */
+export function initNavbarRootState(props) {
+    const rootState = new NavbarRootState(props);
+    return NavbarRootContext.set(rootState);
+}
+/**
+ * Creates a new NavbarItemState and sets it in the NavbarItemContext.
+ * It should be called in the NavbarItem component.
+ * @param props The props of the Navbar.Toggler component.
+ * @returns The created NavbarTogglerState instance.
+ */
+export function initNavbarTogglerState(props) {
+    const rootState = NavbarRootContext.get();
+    return new NavbarTogglerState(props, rootState);
+}
+/**
+ * Creates a new NavbarCollapseState and sets it in the NavbarCollapseContext.
+ * It should be called in the Navbar.Collapse component.
+ * @param props The props of the Navbar.Collapse component.
+ * @returns The created NavbarCollapseState instance.
+ */
+export function initNavbarCollapseState(props) {
+    const rootState = NavbarRootContext.get();
+    return new NavbarCollapseState(props, rootState);
+}
+/**
+ * Creates a new OffcanvasRootState and sets it in the OffcanvasRootContext.
+ * This is used to manage the state of the Offcanvas component and its children.
+ * @param props The props of the Offcanvas component.
+ * @returns The created OffcanvasRootState.
+ */
+export function initOffcanvasRootState(props) {
+    const rootState = new OffcanvasRootState(props);
+    return OffcanvasRootContext.set(rootState);
+}
+/**
+ * Creates a new OffcanvasHeaderState and sets it in the OffcanvasHeaderContext.
+ * This is used to manage the state of the Offcanvas.Header component and its children.
+ * @param props The props of the Offcanvas.Header component.
+ * @returns The created OffcanvasHeaderState.
+ */
+export function initOffcanvasHeaderState(props) {
+    const rootState = OffcanvasRootContext.get();
+    return new OffcanvasHeaderState(props, rootState);
+}

package/dist/common/noop.d.ts

@@ -0,0 +1,4 @@
+/**
+ * A no operation function (does nothing).
+ */
+export declare const noop: () => void;

package/dist/common/noop.js

@@ -0,0 +1,4 @@
+/**
+ * A no operation function (does nothing).
+ */
+export const noop = () => { };

package/dist/common/scrollbar.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Calculates the width of the browser's scrollbar
+ *
+ * @returns {number} The width of the scrollbar in pixels
+ */
+export declare const getScrollbarWidth: () => number;
+/**
+ * Disables body scrolling by setting overflow to hidden and
+ * adjusting padding to prevent layout shift from scrollbar removal
+ *
+ * @param {HTMLElement} bodyElement - The body element to disable scrolling on
+ */
+export declare const disableBodyScrolling: (bodyElement: HTMLElement) => void;
+/**
+ * Restores body scrolling by resetting overflow and padding-right to their
+ * original values before scrolling was disabled
+ *
+ * @param {HTMLElement} bodyElement - The body element to restore scrolling on
+ */
+export declare const resetBodyScrolling: (bodyElement: HTMLElement) => void;

package/dist/common/scrollbar.js

@@ -0,0 +1,53 @@
+import { hasAttribute, isRTL, setAttribute } from './dom.js';
+const SCROLLBAR_INITIAL_OVERFLOW = 'data-scrollbar-initial-overflow-value';
+const SCROLLBAR_INITIAL_PADDING = 'data-scrollbar-initial-padding-value';
+/**
+ * Calculates the width of the browser's scrollbar
+ *
+ * @returns {number} The width of the scrollbar in pixels
+ */
+export const getScrollbarWidth = () => {
+    const documentWidth = document.documentElement.clientWidth;
+    return Math.abs(window.innerWidth - documentWidth);
+};
+/**
+ * Disables body scrolling by setting overflow to hidden and
+ * adjusting padding to prevent layout shift from scrollbar removal
+ *
+ * @param {HTMLElement} bodyElement - The body element to disable scrolling on
+ */
+export const disableBodyScrolling = (bodyElement) => {
+    const paddingPropName = isRTL() ? 'padding-left' : 'padding-right';
+    const scrollbarWidth = getScrollbarWidth();
+    // Save initial style values as data attributes
+    const initialOverflow = bodyElement.style.getPropertyValue('overflow');
+    const initialPadding = bodyElement.style.getPropertyValue(paddingPropName);
+    setAttribute(bodyElement, SCROLLBAR_INITIAL_OVERFLOW, initialOverflow);
+    setAttribute(bodyElement, SCROLLBAR_INITIAL_PADDING, initialPadding);
+    // Set the overflow to hidden and add padding-right to prevent layout shift
+    const newPaddingRight = parseInt(initialPadding || '0', 10) + scrollbarWidth;
+    bodyElement.style.setProperty('overflow', 'hidden');
+    bodyElement.style.setProperty(paddingPropName, `${newPaddingRight}px`);
+};
+/**
+ * Restores body scrolling by resetting overflow and padding-right to their
+ * original values before scrolling was disabled
+ *
+ * @param {HTMLElement} bodyElement - The body element to restore scrolling on
+ */
+export const resetBodyScrolling = (bodyElement) => {
+    // Skip reset if data attributes aren't present (scrolling was never disabled)
+    if (!hasAttribute(bodyElement, SCROLLBAR_INITIAL_OVERFLOW) || !hasAttribute(bodyElement, SCROLLBAR_INITIAL_PADDING)) {
+        return;
+    }
+    // Get the initial values from the data attributes
+    const initialOverflow = bodyElement.getAttribute(SCROLLBAR_INITIAL_OVERFLOW);
+    const initialPadding = bodyElement.getAttribute(SCROLLBAR_INITIAL_PADDING);
+    // Reset the overflow and padding-right values to their initial values
+    const paddingPropName = isRTL() ? 'padding-left' : 'padding-right';
+    bodyElement.style.setProperty('overflow', initialOverflow || '');
+    bodyElement.style.setProperty(paddingPropName, initialPadding || '');
+    // Remove the data attributes
+    bodyElement.removeAttribute(SCROLLBAR_INITIAL_OVERFLOW);
+    bodyElement.removeAttribute(SCROLLBAR_INITIAL_PADDING);
+};

package/dist/common/types.d.ts

@@ -0,0 +1,143 @@
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes, HTMLFormAttributes, HTMLImgAttributes, HTMLInputAttributes, HTMLLabelAttributes, HTMLLiAttributes, HTMLSelectAttributes, HTMLTableAttributes, HTMLTdAttributes, HTMLTextareaAttributes, HTMLThAttributes } from 'svelte/elements';
+/**
+ * Represents the background color variants available in Bootstrap 5.
+ * See Bootstrap 5 documentation: https://getbootstrap.com/docs/5.3/utilities/background/#background-color
+ */
+export type BackgroundColorVariant = 'bg-primary' | 'bg-secondary' | 'bg-success' | 'bg-danger' | 'bg-warning' | 'bg-info' | 'bg-light' | 'bg-dark' | 'bg-body' | 'bg-body-secondary' | 'bg-body-tertiary' | 'bg-white' | 'bg-black' | 'bg-transparent';
+/**
+ * Represents the subtle background color variants available in Bootstrap 5.
+ * See Bootstrap 5 documentation: https://getbootstrap.com/docs/5.3/utilities/background/#background-color
+ */
+export type BackgroundSubtleColorVariant = 'bg-primary-subtle' | 'bg-secondary-subtle' | 'bg-success-subtle' | 'bg-danger-subtle' | 'bg-warning-subtle' | 'bg-info-subtle' | 'bg-light-subtle' | 'bg-dark-subtle';
+/**
+ * Represents the theme colors available in Bootstrap 5.
+ * See Bootstrap 5 documentation: https://getbootstrap.com/docs/5.3/customize/color/
+ */
+export type BaseColorVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
+/**
+ * Represents the breakpoints available in Bootstrap 5.
+ * See Bootstrap 5 documentation: https://getbootstrap.com/docs/5.3/layout/breakpoints/
+ */
+export type BaseBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+/**
+ * Represents the border color variants available in Bootstrap 5.
+ * See Bootstrap 5 documentation: https://getbootstrap.com/docs/5.3/utilities/borders/#border-color
+ */
+export type BorderColorVariant = 'border-primary' | 'border-primary-subtle' | 'border-secondary' | 'border-secondary-subtle' | 'border-success' | 'border-success-subtle' | 'border-danger' | 'border-danger-subtle' | 'border-warning' | 'border-warning-subtle' | 'border-info' | 'border-info-subtle' | 'border-light' | 'border-light-subtle' | 'border-dark' | 'border-dark-subtle' | 'border-white' | 'border-black';
+/**
+ * Represents the media queries available in Bootstrap 5.
+ * See Bootstrap 5 documentation: https://getbootstrap.com/docs/5.3/layout/breakpoints/
+ * The reason for using *.98px is to ensure that the media query is inclusive of the breakpoint.
+ * See https://stackoverflow.com/a/54596322/22025584
+ */
+export declare const BreakpointBoxedMediaQuery: {
+    [index: string]: string;
+};
+/**
+ * Represents the media queries available in Bootstrap 5.
+ * Only the maximum media queries are used.
+ * See Bootstrap 5 documentation: https://getbootstrap.com/docs/5.3/layout/breakpoints/
+ */
+export declare const BreakpointMaximumMediaQuery: {
+    [index: string]: string;
+};
+/**
+ * Represents the media queries available in Bootstrap 5.
+ * Only the minimum media queries are used.
+ * See Bootstrap 5 documentation: https://getbootstrap.com/docs/5.3/layout/breakpoints/
+ */
+export declare const BreakpointMinimumMediaQuery: {
+    [index: string]: string;
+};
+/**
+ * Represents the row-col options for bootstrap grid system.
+ * Values should be numbers between 1 and 6.
+ */
+export type OneToSix = 1 | 2 | 3 | 4 | 5 | 6;
+export type ZeroToFive = 0 | 1 | 2 | 3 | 4 | 5;
+/**
+ * Represents the sizing options for bootstrap grid system.
+ * Values should be numbers between 1 and 12.
+ */
+export type OneToTwelve = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type ZeroToEleven = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
+/**
+ * Represents the options for auto or asterisk in Bootstrap.
+ */
+export type AutoOrAsterisk = 'auto' | '*';
+export type FirstOrLast = 'first' | 'last';
+/**
+ * Represents the form control sizing options available in Bootstrap 5.
+ * See Bootstrap 5 documentation: https://getbootstrap.com/docs/5.3/forms/form-control/#sizing
+ */
+export type FormControlSize = 'sm' | 'lg';
+/**
+ * Represents the input group sizing options available in Bootstrap 5.
+ * See Bootstrap 5 documentation: https://getbootstrap.com/docs/5.3/forms/input-group/#sizing
+ */
+export type FormInputGroupSize = 'sm' | 'lg';
+/**
+ * Represents the levels of headings available in HTML's h1 to h6.
+ * See HTML documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
+ */
+export type HeadingLevels = 1 | 2 | 3 | 4 | 5 | 6;
+/**
+ * Represents the placement options available in Bootstrap 5.
+ * See Bootstrap 5 documentation: https://getbootstrap.com/docs/5.3/components/popovers/#four-directions
+ */
+export type PopperPlacement = 'auto' | 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Represents the offset options available in Bootstrap 5.
+ * See Bootstrap 5 documentation: https://getbootstrap.com/docs/5.3/components/popovers/#offsets
+ * See Popper.js documentation: https://popper.js.org/docs/v2/modifiers/offset/#options
+ * The basic offset accepts an array with two numbers in the form [skidding, distance].
+ */
+export type PopperOffset = [number, number];
+/**
+ * Represents the background color variants available in Bootstrap 5.
+ * See Bootstrap 5 documentation: https://getbootstrap.com/docs/5.3/helpers/color-background/#overview
+ */
+export type TextBackgroundColorVariant = 'text-bg-primary' | 'text-bg-secondary' | 'text-bg-success' | 'text-bg-danger' | 'text-bg-warning' | 'text-bg-info' | 'text-bg-light' | 'text-bg-dark';
+export type TextColorVariant = 'text-primary' | 'text-secondary' | 'text-success' | 'text-danger' | 'text-warning' | 'text-info' | 'text-light' | 'text-dark' | 'text-black' | 'text-white' | 'text-body' | 'text-body-secondary' | 'text-body-tertiary' | 'text-muted';
+export type TextDirection = 'ltr' | 'rtl';
+export type TextEmphasisColorVariant = 'text-primary-emphasis' | 'text-secondary-emphasis' | 'text-success-emphasis' | 'text-danger-emphasis' | 'text-warning-emphasis' | 'text-info-emphasis' | 'text-light-emphasis' | 'text-dark-emphasis';
+export type TextDecoration = 'underline' | 'line-through' | 'none';
+/**
+ * Represents the text decoration options available in Bootstrap 5.
+ * See Bootstrap 5 documentation: https://getbootstrap.com/docs/5.3/utilities/vertical-align/
+ */
+export type VerticalAlign = 'baseline' | 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom';
+/**
+ * The `WithElementRef` type is a utility type that extends a given type `T` with an optional `ref` property.
+ */
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+    elementRef?: U | null;
+};
+/**
+ * Represents the HTML elements that can be used in Bootstrap components.
+ * These elements are typically used as props in Svelte components to specify the type of element to render.
+ */
+export type AnchorElement = WithElementRef<HTMLAnchorAttributes>;
+export type ButtonElement = WithElementRef<HTMLButtonAttributes>;
+export type CaptionElement = WithElementRef<HTMLAttributes<HTMLElement>>;
+export type DivElement = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+export type FormElement = WithElementRef<HTMLFormAttributes>;
+export type HeadingElement = WithElementRef<HTMLAttributes<HTMLHeadingElement>>;
+export type ImgElement = WithElementRef<HTMLImgAttributes>;
+export type InputElement = WithElementRef<HTMLInputAttributes>;
+export type LabelElement = WithElementRef<HTMLLabelAttributes>;
+export type ListElement = OListElement | UListElement;
+export type ListItemElement = WithElementRef<HTMLLiAttributes>;
+export type NavElement = WithElementRef<HTMLAttributes<HTMLElement>>;
+export type OListElement = WithElementRef<HTMLAttributes<HTMLOListElement>>;
+export type SelectElement = WithElementRef<HTMLSelectAttributes>;
+export type SpanElement = WithElementRef<HTMLAttributes<HTMLSpanElement>>;
+export type TableDataElement = WithElementRef<HTMLTdAttributes>;
+export type TableElement = WithElementRef<HTMLTableAttributes>;
+export type TableFootElement = WithElementRef<HTMLAttributes<HTMLTableSectionElement>>;
+export type TableHeadElement = WithElementRef<HTMLAttributes<HTMLTableSectionElement>>;
+export type TableHeaderElement = WithElementRef<HTMLThAttributes>;
+export type TableBodyElement = WithElementRef<HTMLAttributes<HTMLTableSectionElement>>;
+export type TableRowElement = WithElementRef<HTMLAttributes<HTMLTableRowElement>>;
+export type TextAreaElement = WithElementRef<HTMLTextareaAttributes>;
+export type UListElement = WithElementRef<HTMLAttributes<HTMLUListElement>>;

package/dist/common/types.js

@@ -0,0 +1,40 @@
+/**
+ * Represents the media queries available in Bootstrap 5.
+ * See Bootstrap 5 documentation: https://getbootstrap.com/docs/5.3/layout/breakpoints/
+ * The reason for using *.98px is to ensure that the media query is inclusive of the breakpoint.
+ * See https://stackoverflow.com/a/54596322/22025584
+ */
+export const BreakpointBoxedMediaQuery = {
+    xs: '(max-width: 575.98px)',
+    sm: '(min-width: 576px) and (max-width: 767.98px)',
+    md: '(min-width: 768px) and (max-width: 991.98px)',
+    lg: '(min-width: 992px) and (max-width: 1199.98px)',
+    xl: '(min-width: 1200px) and (max-width: 1399.98px)',
+    xxl: '(min-width: 1400px)'
+};
+/**
+ * Represents the media queries available in Bootstrap 5.
+ * Only the maximum media queries are used.
+ * See Bootstrap 5 documentation: https://getbootstrap.com/docs/5.3/layout/breakpoints/
+ */
+export const BreakpointMaximumMediaQuery = {
+    xs: '(max-width: 575.98px)',
+    sm: '(max-width: 576px)',
+    md: '(max-width: 768px)',
+    lg: '(max-width: 992px)',
+    xl: '(max-width: 1200px)',
+    xxl: '(max-width: 1400px)'
+};
+/**
+ * Represents the media queries available in Bootstrap 5.
+ * Only the minimum media queries are used.
+ * See Bootstrap 5 documentation: https://getbootstrap.com/docs/5.3/layout/breakpoints/
+ */
+export const BreakpointMinimumMediaQuery = {
+    xs: '(max-width: 575.98px)',
+    sm: '(min-width: 576px)',
+    md: '(min-width: 768px)',
+    lg: '(min-width: 992px)',
+    xl: '(min-width: 1200px)',
+    xxl: '(min-width: 1400px)'
+};

package/dist/index.d.ts

@@ -0,0 +1,33 @@
+export * from './Accordion/index.js';
+export * from './Alert/index.js';
+export * from './Badge/index.js';
+export * from './Breadcrumb/index.js';
+export * from './BreakpointListener/index.js';
+export * from './Button/index.js';
+export * from './ButtonGroup/index.js';
+export * from './Card/index.js';
+export * from './Carousel/index.js';
+export * from './CloseButton/index.js';
+export * from './Col/index.js';
+export * from './Collapse/index.js';
+export * from './common/index.js';
+export * from './Container/index.js';
+export * from './Dropdown/index.js';
+export * from './Form/index.js';
+export * from './ListGroup/index.js';
+export * from './Modal/index.js';
+export * from './Nav/index.js';
+export * from './Navbar/index.js';
+export * from './Offcanvas/index.js';
+export * from './Pagination/index.js';
+export * from './Placeholder/index.js';
+export * from './Popover/index.js';
+export * from './Portal/index.js';
+export * from './Progress/index.js';
+export * from './Row/index.js';
+export * from './Scrollspy/index.js';
+export * from './Spinner/index.js';
+export * from './Tab/index.js';
+export * from './Table/index.js';
+export * from './Toast/index.js';
+export * from './Tooltip/index.js';

package/dist/index.js

@@ -0,0 +1,33 @@
+export * from './Accordion/index.js';
+export * from './Alert/index.js';
+export * from './Badge/index.js';
+export * from './Breadcrumb/index.js';
+export * from './BreakpointListener/index.js';
+export * from './Button/index.js';
+export * from './ButtonGroup/index.js';
+export * from './Card/index.js';
+export * from './Carousel/index.js';
+export * from './CloseButton/index.js';
+export * from './Col/index.js';
+export * from './Collapse/index.js';
+export * from './common/index.js';
+export * from './Container/index.js';
+export * from './Dropdown/index.js';
+export * from './Form/index.js';
+export * from './ListGroup/index.js';
+export * from './Modal/index.js';
+export * from './Nav/index.js';
+export * from './Navbar/index.js';
+export * from './Offcanvas/index.js';
+export * from './Pagination/index.js';
+export * from './Placeholder/index.js';
+export * from './Popover/index.js';
+export * from './Portal/index.js';
+export * from './Progress/index.js';
+export * from './Row/index.js';
+export * from './Scrollspy/index.js';
+export * from './Spinner/index.js';
+export * from './Tab/index.js';
+export * from './Table/index.js';
+export * from './Toast/index.js';
+export * from './Tooltip/index.js';