@winkintel/bootstrap-svelte 0.0.1

package/dist/Modal/modal-footer.svelte.d.ts

@@ -0,0 +1,20 @@
+/**
+ * ## Modal.Footer
+ * Footer component for the Modal content.
+ *
+ * @example
+ * ```svelte
+ * <Modal.Footer>
+ * <Button colorVariant="secondary" onclick={() => setIsShown(false)}>Close</Button>
+ * <Button colorVariant="primary" onclick={() => handleSave()}>Save changes</Button>
+ * </Modal.Footer>
+ * ```
+ * ### Props
+ * - `children` (slot): Content to display inside the footer
+ * - `class` (string): Optional. Additional CSS classes
+ * - `elementRef` (HTMLElement): Optional. Reference to the footer DOM element
+ * - `id` (string): Optional. ID for the footer element
+ */
+declare const ModalFooter: import("svelte").Component<import("../index.js").DivElement, {}, "elementRef">;
+type ModalFooter = ReturnType<typeof ModalFooter>;
+export default ModalFooter;

package/dist/Modal/modal-header.svelte

@@ -0,0 +1,50 @@
+<!--
+@component
+## Modal.Header
+Header component for the Modal. Usually contains the Modal.Title and a close button.
+
+@example
+```svelte
+<Modal.Header>
+    <Modal.Title>Modal Title</Modal.Title>
+</Modal.Header>
+```
+
+#### Without close button
+```svelte
+<Modal.Header isDismissible={false}>
+    <Modal.Title>Modal Title</Modal.Title>
+</Modal.Header>
+```
+
+### Props
+- `children` (slot): Content to display inside the header
+- `class` (string): Optional. Additional CSS classes
+- `elementRef` (HTMLElement): Optional. Reference to the header DOM element
+- `id` (string): Optional. ID for the header element
+- `isDismissible` (boolean): Optional. Controls whether the header has a close button
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+import { CloseButton } from '../index.js';
+import { Modal } from './index.js';
+import { initModalHeaderState, ModalHeaderState } from './modal.svelte.js';
+// Generate a unique ID for the modal header element, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), id = `modal-header-${uid}`, isDismissible = true, ...restOfProps } = $props();
+const headerState = initModalHeaderState({
+    get isDismissible() {
+        return isDismissible;
+    }
+});
+let classes = $derived(uniqueClsx('modal-header', classValues));
+const handleClick = (_event) => {
+    headerState.onclick();
+};
+</script>
+
+<div bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+    {#if isDismissible}
+        <CloseButton onclick={handleClick}></CloseButton>
+    {/if}
+</div>

package/dist/Modal/modal-header.svelte.d.ts

@@ -0,0 +1,29 @@
+import { Modal } from './index.js';
+/**
+ * ## Modal.Header
+ * Header component for the Modal. Usually contains the Modal.Title and a close button.
+ *
+ * @example
+ * ```svelte
+ * <Modal.Header>
+ * <Modal.Title>Modal Title</Modal.Title>
+ * </Modal.Header>
+ * ```
+ *
+ * #### Without close button
+ * ```svelte
+ * <Modal.Header isDismissible={false}>
+ * <Modal.Title>Modal Title</Modal.Title>
+ * </Modal.Header>
+ * ```
+ *
+ * ### Props
+ * - `children` (slot): Content to display inside the header
+ * - `class` (string): Optional. Additional CSS classes
+ * - `elementRef` (HTMLElement): Optional. Reference to the header DOM element
+ * - `id` (string): Optional. ID for the header element
+ * - `isDismissible` (boolean): Optional. Controls whether the header has a close button
+ */
+declare const ModalHeader: import("svelte").Component<Modal.HeaderProps, {}, "elementRef">;
+type ModalHeader = ReturnType<typeof ModalHeader>;
+export default ModalHeader;

package/dist/Modal/modal-title.svelte

@@ -0,0 +1,45 @@
+<!--
+@component
+## Modal.Title
+Title component for the Modal.Header.
+
+@example
+```svelte
+<Modal.Title>Modal Title</Modal.Title>
+```
+
+#### Custom heading level
+```svelte
+<Modal.Title level={1}>H1 Title</Modal.Title>
+<Modal.Title level={2}>H2 Title</Modal.Title>
+```
+
+### Props
+- `children` (slot): Content to display inside the title
+- `class` (string): Optional. Additional CSS classes
+- `elementRef` (HTMLElement): Optional. Reference to the title DOM element
+- `id` (string): Optional. ID for the title element
+- `level` (number): Optional. Heading level (1-6) for the title element
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+import { onDestroy } from 'svelte';
+import { getOptionalModalRootState } from './modal.svelte.js';
+// Generate a unique ID for the modal title element, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), id = `modal-title-${uid}`, level = 5, ...restOfProps } = $props();
+let elementType = $derived(`h${level}`);
+let classes = $derived(uniqueClsx('modal-title', classValues));
+const rootState = getOptionalModalRootState();
+$effect(() => {
+    if (id)
+        rootState?.registerTitleId(id);
+});
+onDestroy(() => {
+    if (id)
+        rootState?.unregisterTitleId(id);
+});
+</script>
+
+<svelte:element this={elementType} bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</svelte:element>

package/dist/Modal/modal-title.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Modal } from './index.js';
+/**
+ * ## Modal.Title
+ * Title component for the Modal.Header.
+ *
+ * @example
+ * ```svelte
+ * <Modal.Title>Modal Title</Modal.Title>
+ * ```
+ *
+ * #### Custom heading level
+ * ```svelte
+ * <Modal.Title level={1}>H1 Title</Modal.Title>
+ * <Modal.Title level={2}>H2 Title</Modal.Title>
+ * ```
+ *
+ * ### Props
+ * - `children` (slot): Content to display inside the title
+ * - `class` (string): Optional. Additional CSS classes
+ * - `elementRef` (HTMLElement): Optional. Reference to the title DOM element
+ * - `id` (string): Optional. ID for the title element
+ * - `level` (number): Optional. Heading level (1-6) for the title element
+ */
+declare const ModalTitle: import("svelte").Component<Modal.TitleProps, {}, "elementRef">;
+type ModalTitle = ReturnType<typeof ModalTitle>;
+export default ModalTitle;

package/dist/Modal/modal.svelte

@@ -0,0 +1,233 @@
+<!--
+@component
+## Modal
+Add dialogs to your site for lightboxes, user notifications, or completely custom content.
+
+@example
+```svelte
+<Modal isShown={true}>
+    <Modal.Dialog>
+        <Modal.Content>
+            <Modal.Header>
+                <Modal.Title>Modal Title</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                Modal content goes here.
+            </Modal.Body>
+            <Modal.Footer>
+                <Button onclick={() => setIsShown(false)}>Close</Button>
+            </Modal.Footer>
+        </Modal.Content>
+    </Modal.Dialog>
+</Modal>
+```
+
+#### Static backdrop
+```svelte
+<Modal useBackdrop="static">...</Modal>
+```
+
+#### Keyboard dismissible
+```svelte
+<Modal isKeyboardDismissible={true}>...</Modal>
+```
+
+### Props
+- `children` (slot): Content to display inside the modal.
+- `class` (string): Optional. Additional CSS classes.
+- `elementRef` (HTMLElement): Optional. Reference to the modal DOM element.
+- `id` (string): Optional. ID for the modal element.
+- `isFocusable` (boolean): Optional. Controls whether the modal can receive focus.
+- `isKeyboardDismissible` (boolean): Optional. Controls whether the modal can be dismissed with the Escape key.
+- `isShown` (boolean): Optional. Controls whether the modal is visible.
+- `onHide` (function): Optional. Callback to invoke when the modal starts hiding.
+- `onHidden` (function): Optional. Callback to invoke when the modal has been hidden.
+- `onShow` (function): Optional. Callback to invoke when the modal starts showing.
+- `onShown` (function): Optional. Callback to invoke when the modal has been shown.
+- `useBackdrop` (boolean | 'static'): Optional. Controls whether the modal has a backdrop and if it's static (non-dismissible).
+- `useFade` (boolean): Optional. Controls whether the modal uses a fade transition.
+-->
+<script lang="ts">import { disableBodyScrolling, noop, resetBodyScrolling, uniqueClsx } from '../common/index.js';
+import { Portal } from '../index.js';
+import { onMount, tick } from 'svelte';
+import { fade, fly } from 'svelte/transition';
+import { initModalRootState, ModalRootState } from './modal.svelte.js';
+// Generate a unique ID for the modal element, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), id = `modal-${uid}`, isShown = false, isKeyboardDismissible = true, isFocusable = true, onHide = noop, onHidePrevented = noop, onHidden = noop, onShow = noop, onShown = noop, useBackdrop = true, useFade = true, ...restOfProps } = $props();
+// Initialize the root state of the modal component...
+let bodyElement = $state(null);
+let previouslyFocusedElement = null;
+const unset = Symbol('unset');
+let previousIsShown = unset;
+let previousRootIsShown = false;
+let previousUseBackdrop = unset;
+const rootState = initModalRootState({
+    get isShown() {
+        return isShown;
+    },
+    get useBackdrop() {
+        return useBackdrop;
+    }
+});
+// Derived classes for the modal component...
+let isHidePrevented = $state(false);
+let backDropClasses = $derived(uniqueClsx('modal-backdrop', { fade: useFade, show: rootState.isShown }));
+let classes = $derived(uniqueClsx('modal', {
+    fade: useFade,
+    show: rootState.isShown,
+    'd-block': rootState.isShown,
+    'modal-static': isHidePrevented
+}, classValues));
+// Listen changes to the isShown prop and update the root state accordingly...
+$effect(() => {
+    if (previousIsShown !== unset && previousIsShown !== isShown) {
+        if (isShown && !rootState.isShown) {
+            rootState.toggleIsShown();
+        }
+        else if (!isShown && rootState.isShown) {
+            rootState.toggleIsShown();
+        }
+    }
+    previousIsShown = isShown;
+});
+// Listen changes to the useBackdrop prop and update the root state accordingly...
+$effect(() => {
+    if (previousUseBackdrop !== unset && previousUseBackdrop !== useBackdrop) {
+        if (useBackdrop && !rootState.useBackdrop) {
+            rootState.useBackdrop = useBackdrop;
+        }
+        else if (!useBackdrop && rootState.useBackdrop) {
+            rootState.useBackdrop = useBackdrop;
+        }
+    }
+    previousUseBackdrop = useBackdrop;
+});
+$effect(() => {
+    if (rootState.isShown && !previousRootIsShown) {
+        previouslyFocusedElement = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        focusModal();
+    }
+    else if (!rootState.isShown && previousRootIsShown) {
+        restoreFocus();
+    }
+    previousRootIsShown = rootState.isShown;
+});
+const handleOnShow = (event) => {
+    if (bodyElement) {
+        disableBodyScrolling(bodyElement);
+        bodyElement.classList.add('modal-open');
+    }
+    onShow(event);
+};
+const handleOnHidden = (event) => {
+    if (bodyElement) {
+        resetBodyScrolling(bodyElement);
+        bodyElement.classList.remove('modal-open');
+    }
+    onHidden(event);
+};
+async function focusModal() {
+    if (!isFocusable)
+        return;
+    await tick();
+    const focusTarget = getFocusableElements()[0] ?? elementRef;
+    focusTarget?.focus({ preventScroll: true });
+}
+function restoreFocus() {
+    if (previouslyFocusedElement?.isConnected) {
+        previouslyFocusedElement.focus({ preventScroll: true });
+    }
+    previouslyFocusedElement = null;
+}
+function getFocusableElements() {
+    if (!elementRef)
+        return [];
+    return Array.from(elementRef.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter((element) => !element.hasAttribute('disabled') && element.getAttribute('aria-hidden') !== 'true');
+}
+function trapFocus(event) {
+    const focusableElements = getFocusableElements();
+    const firstElement = focusableElements[0] ?? elementRef;
+    const lastElement = focusableElements[focusableElements.length - 1] ?? elementRef;
+    if (!firstElement || !lastElement)
+        return;
+    if (event.shiftKey && document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+    }
+    else if (!event.shiftKey && document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+    }
+}
+// Get the body element when the component is mounted...
+onMount(() => {
+    if (typeof window !== 'undefined') {
+        bodyElement = document.querySelector('body');
+    }
+});
+// Dismiss the modal when the backdrop is clicked...
+const handleBackdropMouseDown = (event) => {
+    const target = event.target;
+    const closestModal = target.closest('.modal-dialog');
+    if (closestModal) {
+        event.stopPropagation();
+        return;
+    }
+    if (rootState.isShown && useBackdrop === 'static') {
+        event.stopPropagation();
+        onHidePrevented(event);
+        isHidePrevented = true;
+        setTimeout(() => {
+            isHidePrevented = false;
+        }, 300);
+        return;
+    }
+    if (rootState.isShown && useBackdrop !== 'static') {
+        event.stopPropagation();
+        rootState.toggleIsShown();
+    }
+};
+// Handle keyboard events to dismiss modal on Escape key press
+const handleKeydown = (event) => {
+    const keyboardEvent = event;
+    if (!rootState.isShown)
+        return;
+    if (keyboardEvent.key === 'Tab') {
+        trapFocus(keyboardEvent);
+        return;
+    }
+    if (rootState.isShown && isKeyboardDismissible && keyboardEvent.key === 'Escape') {
+        rootState.toggleIsShown();
+    }
+};
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+{#if rootState.isShown}
+    <div
+        aria-labelledby={rootState.titleId}
+        aria-modal={rootState.isShown}
+        bind:this={elementRef}
+        class={classes}
+        {id}
+        role="dialog"
+        tabindex={isFocusable ? -1 : undefined}
+        onmousedown={handleBackdropMouseDown}
+        onintrostart={handleOnShow}
+        onintroend={onShown}
+        onoutrostart={onHide}
+        onoutroend={handleOnHidden}
+        transition:fly={{ duration: useFade ? 300 : 0, y: '-50px', opacity: 0 }}
+        {...restOfProps}>
+        {@render children?.()}
+    </div>
+{/if}
+
+<Portal target="body">
+    {#if rootState.isBackdropShown}
+        <div class={backDropClasses} onmousedown={handleBackdropMouseDown} role="presentation" transition:fade={{ duration: useFade ? 150 : 0 }}>
+        </div>
+    {/if}
+</Portal>

package/dist/Modal/modal.svelte.d.ts

@@ -0,0 +1,52 @@
+import type { Modal } from './index.js';
+/**
+ * ## Modal
+ * Add dialogs to your site for lightboxes, user notifications, or completely custom content.
+ *
+ * @example
+ * ```svelte
+ * <Modal isShown={true}>
+ * <Modal.Dialog>
+ *     <Modal.Content>
+ *         <Modal.Header>
+ *             <Modal.Title>Modal Title</Modal.Title>
+ *         </Modal.Header>
+ *         <Modal.Body>
+ *             Modal content goes here.
+ *         </Modal.Body>
+ *         <Modal.Footer>
+ *             <Button onclick={() => setIsShown(false)}>Close</Button>
+ *         </Modal.Footer>
+ *     </Modal.Content>
+ * </Modal.Dialog>
+ * </Modal>
+ * ```
+ *
+ * #### Static backdrop
+ * ```svelte
+ * <Modal useBackdrop="static">...</Modal>
+ * ```
+ *
+ * #### Keyboard dismissible
+ * ```svelte
+ * <Modal isKeyboardDismissible={true}>...</Modal>
+ * ```
+ *
+ * ### Props
+ * - `children` (slot): Content to display inside the modal.
+ * - `class` (string): Optional. Additional CSS classes.
+ * - `elementRef` (HTMLElement): Optional. Reference to the modal DOM element.
+ * - `id` (string): Optional. ID for the modal element.
+ * - `isFocusable` (boolean): Optional. Controls whether the modal can receive focus.
+ * - `isKeyboardDismissible` (boolean): Optional. Controls whether the modal can be dismissed with the Escape key.
+ * - `isShown` (boolean): Optional. Controls whether the modal is visible.
+ * - `onHide` (function): Optional. Callback to invoke when the modal starts hiding.
+ * - `onHidden` (function): Optional. Callback to invoke when the modal has been hidden.
+ * - `onShow` (function): Optional. Callback to invoke when the modal starts showing.
+ * - `onShown` (function): Optional. Callback to invoke when the modal has been shown.
+ * - `useBackdrop` (boolean | 'static'): Optional. Controls whether the modal has a backdrop and if it's static (non-dismissible).
+ * - `useFade` (boolean): Optional. Controls whether the modal uses a fade transition.
+ */
+declare const Modal: import("svelte").Component<Modal.RootProps, {}, "elementRef">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/Modal/modal.svelte.js

@@ -0,0 +1,86 @@
+import { Context } from '../common/index.js';
+/**
+ * ModalRootState is the state of the Modal component.
+ * It is used to manage the state of the Modal and its children.
+ */
+export class ModalRootState {
+    props;
+    // Private
+    #isShown = $state(false);
+    #useBackdrop = $state(true);
+    titleId = $state(undefined);
+    constructor(props) {
+        this.props = props;
+        this.toggleIsShown = this.toggleIsShown.bind(this);
+        this.#isShown = this.props.isShown ?? false;
+        this.#useBackdrop = this.props.useBackdrop ?? true;
+    }
+    get isBackdropShown() {
+        return this.isShown && this.#useBackdrop !== false;
+    }
+    get isShown() {
+        return this.#isShown;
+    }
+    get useBackdrop() {
+        return this.#useBackdrop;
+    }
+    set useBackdrop(value) {
+        this.#useBackdrop = value;
+    }
+    toggleIsShown() {
+        this.#isShown = !this.#isShown;
+    }
+    registerTitleId(id) {
+        this.titleId ??= id;
+    }
+    unregisterTitleId(id) {
+        if (this.titleId === id) {
+            this.titleId = undefined;
+        }
+    }
+}
+/**
+ * ModalHeaderState is the state of the Modal.Header component.
+ * It is used to manage the state of the Modal.Header and its children.
+ */
+export class ModalHeaderState {
+    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 ModalRootContext = new Context('modal-root');
+/**
+ * Creates a new ModalRootState and sets it in the ModalRootContext.
+ * This is used to manage the state of the Modal component and its children.
+ * @param props The props of the Modal component.
+ * @returns The created ModalRootState.
+ */
+export function initModalRootState(props) {
+    const rootState = new ModalRootState(props);
+    return ModalRootContext.set(rootState);
+}
+/**
+ * Creates a new ModalHeaderState and sets it in the ModalHeaderContext.
+ * This is used to manage the state of the Modal.Header component and its children.
+ * @param props The props of the Modal.Header component.
+ * @returns The created ModalHeaderState.
+ */
+export function initModalHeaderState(props) {
+    const rootState = ModalRootContext.get();
+    return new ModalHeaderState(props, rootState);
+}
+export function getModalRootState() {
+    return ModalRootContext.get();
+}
+export function getOptionalModalRootState() {
+    return ModalRootContext.getOr(undefined);
+}

package/dist/Modal/types.d.ts

@@ -0,0 +1,31 @@
+import type { BaseBreakpoint, DivElement, HeadingElement, HeadingLevels } from '../common/types.js';
+export type ModalBackdrop = 'static' | boolean;
+export type ModalFullscreenBreakpoint = BaseBreakpoint | 'always';
+export type ModalSize = 'sm' | 'lg' | 'xl';
+export type ModalRootProps = DivElement & {
+    isFocusable?: boolean;
+    isKeyboardDismissible?: boolean;
+    isShown?: boolean;
+    onHide?: EventListener;
+    onHidePrevented?: EventListener;
+    onHidden?: EventListener;
+    onShow?: EventListener;
+    onShown?: EventListener;
+    useBackdrop?: ModalBackdrop;
+    useFade?: boolean;
+};
+export type ModalDialogProps = DivElement & {
+    fullscreenOnBreakpoint?: ModalFullscreenBreakpoint;
+    isScrollable?: boolean;
+    isVerticallyCentered?: boolean;
+    size?: ModalSize;
+};
+export type ModalContentProps = DivElement;
+export type ModalHeaderProps = DivElement & {
+    isDismissible?: boolean;
+};
+export type ModalTitleProps = HeadingElement & {
+    level?: HeadingLevels;
+};
+export type ModalBodyProps = DivElement;
+export type ModalFooterProps = DivElement;

package/dist/Modal/types.js

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

package/dist/Nav/composition.d.ts

@@ -0,0 +1,4 @@
+export { default as Item } from './nav-item.svelte';
+export { default as Link } from './nav-link.svelte';
+export { default as Root } from './nav.svelte';
+export type { NavItemProps as ItemProps, NavLinkProps as LinkProps, NavRootProps as RootProps } from './types.js';

package/dist/Nav/composition.js

@@ -0,0 +1,3 @@
+export { default as Item } from './nav-item.svelte';
+export { default as Link } from './nav-link.svelte';
+export { default as Root } from './nav.svelte';

package/dist/Nav/index.d.ts

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

package/dist/Nav/index.js

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

package/dist/Nav/nav-item.svelte

@@ -0,0 +1,25 @@
+<!--
+@component
+## Nav.Item
+Nav item component to wrap Nav.Link components.
+
+@example
+```svelte
+<Nav.Item>
+    <Nav.Link href="#!" isActive={true}>Active</Nav.Link>
+</Nav.Item>
+```
+### Props
+- `class` (string): Optional. Additional CSS classes
+- `elementRef` (HTMLElement): Optional. Reference to the item DOM element
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+import { doesTabRootContextExists } from '../common/nav-tab.svelte.js';
+let { children, class: classValues, elementRef = $bindable(null), role, ...restOfProps } = $props();
+let defaultRole = $derived(doesTabRootContextExists() ? 'presentation' : role);
+let classes = $derived(uniqueClsx('nav-item', classValues));
+</script>
+
+<li bind:this={elementRef} class={classes} role={defaultRole} {...restOfProps}>
+    {@render children?.()}
+</li>

package/dist/Nav/nav-item.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Nav } from './index.js';
+/**
+ * ## Nav.Item
+ * Nav item component to wrap Nav.Link components.
+ *
+ * @example
+ * ```svelte
+ * <Nav.Item>
+ * <Nav.Link href="#!" isActive={true}>Active</Nav.Link>
+ * </Nav.Item>
+ * ```
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes
+ * - `elementRef` (HTMLElement): Optional. Reference to the item DOM element
+ */
+declare const NavItem: import("svelte").Component<Nav.ItemProps, {}, "elementRef">;
+type NavItem = ReturnType<typeof NavItem>;
+export default NavItem;