@winkintel/bootstrap-svelte 0.0.1

package/dist/ListGroup/composition.js

@@ -0,0 +1,3 @@
+export { default as ItemAction } from './list-group-item-action.svelte';
+export { default as Item } from './list-group-item.svelte';
+export { default as Root } from './list-group.svelte';

package/dist/ListGroup/index.d.ts

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

package/dist/ListGroup/index.js

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

package/dist/ListGroup/list-group-item-action.svelte

@@ -0,0 +1,50 @@
+<!--
+@component
+## ListGroup.ItemAction
+An action item within a list group, typically used for navigation or triggering actions.
+
+@example
+```svelte
+<ListGroup.ItemAction href="#!">Action</ListGroup.ItemAction>
+<ListGroup.ItemAction>Another action</ListGroup.ItemAction>
+```
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the item.
+- `colorVariant` (string): Optional. Color variant for the item ('primary', 'success', etc.).
+- `elementRef` (HTMLElement): Optional. Reference to the item DOM element.
+- `href` (string): Optional. If provided, the item will be rendered as an anchor (`<a>`). If not, it will be a button (`<button>`).
+- `id` (string): Optional. Unique identifier for the item. Defaults to a generated ID.
+- `onclick` (EventListener): Optional. Click event handler for the item.
+- `isActive` (boolean): Optional. Applies active styling to the item.
+- `isDisabled` (boolean): Optional. Applies disabled styling to the item.
+-->
+<script lang="ts">/* eslint-disable @typescript-eslint/no-explicit-any -- restOfProps spread targets a union element type that is not spreadable without as any */
+import { uniqueClsx } from '../common/css.js';
+import { noop } from '../common/noop.js';
+// Generate a unique ID for the element, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, colorVariant, elementRef = $bindable(null), href, id = `list-group-item-action-${uid}`, isActive = false, isDisabled = false, onclick = noop, ...restOfProps } = $props();
+const isAnchor = $derived(Boolean(href));
+const elementType = $derived(isAnchor ? 'a' : 'button');
+let classes = $derived(uniqueClsx('list-group-item', 'list-group-item-action', {
+    active: isActive,
+    disabled: isDisabled
+}, colorVariant && `list-group-item-${colorVariant}`, classValues));
+const handleClick = (event) => {
+    onclick(event);
+};
+</script>
+
+<svelte:element
+    this={elementType}
+    aria-current={isActive}
+    aria-disabled={isDisabled}
+    bind:this={elementRef}
+    class={classes}
+    {href}
+    {id}
+    onclick={handleClick}
+    type={isAnchor ? undefined : 'button'}
+    {...restOfProps as any}>
+    {@render children?.()}
+</svelte:element>

package/dist/ListGroup/list-group-item-action.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { ListGroup } from './index.js';
+/**
+ * ## ListGroup.ItemAction
+ * An action item within a list group, typically used for navigation or triggering actions.
+ *
+ * @example
+ * ```svelte
+ * <ListGroup.ItemAction href="#!">Action</ListGroup.ItemAction>
+ * <ListGroup.ItemAction>Another action</ListGroup.ItemAction>
+ * ```
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the item.
+ * - `colorVariant` (string): Optional. Color variant for the item ('primary', 'success', etc.).
+ * - `elementRef` (HTMLElement): Optional. Reference to the item DOM element.
+ * - `href` (string): Optional. If provided, the item will be rendered as an anchor (`<a>`). If not, it will be a button (`<button>`).
+ * - `id` (string): Optional. Unique identifier for the item. Defaults to a generated ID.
+ * - `onclick` (EventListener): Optional. Click event handler for the item.
+ * - `isActive` (boolean): Optional. Applies active styling to the item.
+ * - `isDisabled` (boolean): Optional. Applies disabled styling to the item.
+ */
+declare const ListGroupItemAction: import("svelte").Component<ListGroup.ItemActionProps, {}, "elementRef">;
+type ListGroupItemAction = ReturnType<typeof ListGroupItemAction>;
+export default ListGroupItemAction;

package/dist/ListGroup/list-group-item.svelte

@@ -0,0 +1,58 @@
+<!--
+@component
+## ListGroup.Item
+A component that represents an item in a list group. It can be used as a standalone item or as part of a list group.
+
+@example
+```svelte
+<ListGroup.Item>Basic list item</ListGroup.Item>
+```
+
+#### Standard list items
+```svelte
+<ListGroup.Item>Default item</ListGroup.Item>
+<ListGroup.Item isActive={true}>Active item</ListGroup.Item>
+<ListGroup.Item isDisabled={true}>Disabled item</ListGroup.Item>
+```
+
+#### Actionable items
+```svelte
+<ListGroup.Item isActionable={true}>Clickable item</ListGroup.Item>
+<ListGroup.Item isActionable={true} isActive={true}>Active and clickable</ListGroup.Item>
+```
+
+#### Item color variants
+```svelte
+<ListGroup.Item colorVariant="primary">Primary</ListGroup.Item>
+<ListGroup.Item colorVariant="secondary">Secondary</ListGroup.Item>
+<ListGroup.Item colorVariant="success">Success</ListGroup.Item>
+<ListGroup.Item colorVariant="danger">Danger</ListGroup.Item>
+<ListGroup.Item colorVariant="warning">Warning</ListGroup.Item>
+<ListGroup.Item colorVariant="info">Info</ListGroup.Item>
+<ListGroup.Item colorVariant="light">Light</ListGroup.Item>
+<ListGroup.Item colorVariant="dark">Dark</ListGroup.Item>
+```
+
+#### Combined properties
+```svelte
+<ListGroup.Item colorVariant="success" isActive={true}>Active success item</ListGroup.Item>
+<ListGroup.Item colorVariant="danger" isDisabled={true}>Disabled danger item</ListGroup.Item>
+```
+
+### Props
+- `class` (string): Optional. CSS classes for styling the item.
+- `colorVariant` (string): Optional. Color variant for the item ('primary', 'success', etc.).
+- `elementRef` (HTMLElement): Optional. Reference to the list item DOM element.
+- `id` (string): Optional. ID for the list item element.
+- `isActive` (boolean): Optional. Applies active styling to the item.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+// Generate a unique ID for the card element, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, colorVariant, elementRef = $bindable(null), id = `list-group-item-${uid}`, isActive = false, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('list-group-item', { active: isActive }, colorVariant && `list-group-item-${colorVariant}`, classValues));
+</script>
+
+<li aria-current={isActive} bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</li>

package/dist/ListGroup/list-group-item.svelte.d.ts

@@ -0,0 +1,51 @@
+import type { ListGroup } from './index.js';
+/**
+ * ## ListGroup.Item
+ * A component that represents an item in a list group. It can be used as a standalone item or as part of a list group.
+ *
+ * @example
+ * ```svelte
+ * <ListGroup.Item>Basic list item</ListGroup.Item>
+ * ```
+ *
+ * #### Standard list items
+ * ```svelte
+ * <ListGroup.Item>Default item</ListGroup.Item>
+ * <ListGroup.Item isActive={true}>Active item</ListGroup.Item>
+ * <ListGroup.Item isDisabled={true}>Disabled item</ListGroup.Item>
+ * ```
+ *
+ * #### Actionable items
+ * ```svelte
+ * <ListGroup.Item isActionable={true}>Clickable item</ListGroup.Item>
+ * <ListGroup.Item isActionable={true} isActive={true}>Active and clickable</ListGroup.Item>
+ * ```
+ *
+ * #### Item color variants
+ * ```svelte
+ * <ListGroup.Item colorVariant="primary">Primary</ListGroup.Item>
+ * <ListGroup.Item colorVariant="secondary">Secondary</ListGroup.Item>
+ * <ListGroup.Item colorVariant="success">Success</ListGroup.Item>
+ * <ListGroup.Item colorVariant="danger">Danger</ListGroup.Item>
+ * <ListGroup.Item colorVariant="warning">Warning</ListGroup.Item>
+ * <ListGroup.Item colorVariant="info">Info</ListGroup.Item>
+ * <ListGroup.Item colorVariant="light">Light</ListGroup.Item>
+ * <ListGroup.Item colorVariant="dark">Dark</ListGroup.Item>
+ * ```
+ *
+ * #### Combined properties
+ * ```svelte
+ * <ListGroup.Item colorVariant="success" isActive={true}>Active success item</ListGroup.Item>
+ * <ListGroup.Item colorVariant="danger" isDisabled={true}>Disabled danger item</ListGroup.Item>
+ * ```
+ *
+ * ### Props
+ * - `class` (string): Optional. CSS classes for styling the item.
+ * - `colorVariant` (string): Optional. Color variant for the item ('primary', 'success', etc.).
+ * - `elementRef` (HTMLElement): Optional. Reference to the list item DOM element.
+ * - `id` (string): Optional. ID for the list item element.
+ * - `isActive` (boolean): Optional. Applies active styling to the item.
+ */
+declare const ListGroupItem: import("svelte").Component<ListGroup.ItemProps, {}, "elementRef">;
+type ListGroupItem = ReturnType<typeof ListGroupItem>;
+export default ListGroupItem;

package/dist/ListGroup/list-group.svelte

@@ -0,0 +1,83 @@
+<!--
+@component
+## ListGroup.Root
+A component that serves as a container for list group items. It can be used to create a list of items with various styles and behaviors.
+
+@example
+```svelte
+<ListGroup.Root>
+    <ListGroup.Item>Basic list item 1</ListGroup.Item>
+    <ListGroup.Item>Basic list item 2</ListGroup.Item>
+</ListGroup.Root>
+```
+
+#### Standard list group
+```svelte
+<ListGroup.Root>
+    <ListGroup.Item>First item</ListGroup.Item>
+    <ListGroup.Item>Second item</ListGroup.Item>
+    <ListGroup.Item>Third item</ListGroup.Item>
+</ListGroup.Root>
+```
+
+#### Flush list group (without outer borders)
+```svelte
+<ListGroup.Root isFlush={true}>
+    <ListGroup.Item>Flush list item 1</ListGroup.Item>
+    <ListGroup.Item>Flush list item 2</ListGroup.Item>
+    <ListGroup.Item>Flush list item 3</ListGroup.Item>
+</ListGroup.Root>
+```
+
+#### Horizontal list group
+```svelte
+<ListGroup.Root isHorizontal={true}>
+    <ListGroup.Item>Horizontal item 1</ListGroup.Item>
+    <ListGroup.Item>Horizontal item 2</ListGroup.Item>
+    <ListGroup.Item>Horizontal item 3</ListGroup.Item>
+</ListGroup.Root>
+```
+
+#### Numbered list group
+```svelte
+<ListGroup.Root isNumbered={true}>
+    <ListGroup.Item>Numbered item 1</ListGroup.Item>
+    <ListGroup.Item>Numbered item 2</ListGroup.Item>
+    <ListGroup.Item>Numbered item 3</ListGroup.Item>
+</ListGroup.Root>
+```
+
+#### Combined properties
+```svelte
+<ListGroup.Root isFlush={true} isNumbered={true}>
+    <ListGroup.Item>Flush and numbered item 1</ListGroup.Item>
+    <ListGroup.Item>Flush and numbered item 2</ListGroup.Item>
+</ListGroup.Root>
+```
+
+### Props
+- `class` (string): Optional. CSS classes for styling the list group
+- `elementRef` (HTMLElement): Optional. Reference to the list group DOM element
+- `id` (string): Optional. ID for the list group element
+- `isFlush` (boolean): Optional. Removes outer borders and rounded corners
+- `isHorizontal` (boolean): Optional. Changes list group direction to horizontal
+- `isNumbered` (boolean): Optional. Creates a numbered list with `<ol>` instead of `<ul>`
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+// Generate a unique ID for the card element, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), horizontalOnBreakpoint, id = `list-group-${uid}`, isFlush, isNumbered, ...restOfProps } = $props();
+let elementType = $derived(isNumbered ? 'ol' : 'ul');
+let hasHorizontalOnBreakpoint = $derived(!!horizontalOnBreakpoint); // !! to convert to boolean
+let isAlwaysHorizontal = $derived(hasHorizontalOnBreakpoint && horizontalOnBreakpoint === 'xs'); // Check if always horizontal
+let classes = $derived(uniqueClsx('list-group', {
+    'list-group-flush': isFlush,
+    'list-group-horizontal': isAlwaysHorizontal,
+    [`list-group-horizontal-${horizontalOnBreakpoint}`]: hasHorizontalOnBreakpoint && !isAlwaysHorizontal,
+    'list-group-numbered': isNumbered
+}, classValues));
+</script>
+
+<svelte:element this={elementType} bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</svelte:element>

package/dist/ListGroup/list-group.svelte.d.ts

@@ -0,0 +1,68 @@
+import type { ListGroup } from './index.js';
+/**
+ * ## ListGroup.Root
+ * A component that serves as a container for list group items. It can be used to create a list of items with various styles and behaviors.
+ *
+ * @example
+ * ```svelte
+ * <ListGroup.Root>
+ * <ListGroup.Item>Basic list item 1</ListGroup.Item>
+ * <ListGroup.Item>Basic list item 2</ListGroup.Item>
+ * </ListGroup.Root>
+ * ```
+ *
+ * #### Standard list group
+ * ```svelte
+ * <ListGroup.Root>
+ * <ListGroup.Item>First item</ListGroup.Item>
+ * <ListGroup.Item>Second item</ListGroup.Item>
+ * <ListGroup.Item>Third item</ListGroup.Item>
+ * </ListGroup.Root>
+ * ```
+ *
+ * #### Flush list group (without outer borders)
+ * ```svelte
+ * <ListGroup.Root isFlush={true}>
+ * <ListGroup.Item>Flush list item 1</ListGroup.Item>
+ * <ListGroup.Item>Flush list item 2</ListGroup.Item>
+ * <ListGroup.Item>Flush list item 3</ListGroup.Item>
+ * </ListGroup.Root>
+ * ```
+ *
+ * #### Horizontal list group
+ * ```svelte
+ * <ListGroup.Root isHorizontal={true}>
+ * <ListGroup.Item>Horizontal item 1</ListGroup.Item>
+ * <ListGroup.Item>Horizontal item 2</ListGroup.Item>
+ * <ListGroup.Item>Horizontal item 3</ListGroup.Item>
+ * </ListGroup.Root>
+ * ```
+ *
+ * #### Numbered list group
+ * ```svelte
+ * <ListGroup.Root isNumbered={true}>
+ * <ListGroup.Item>Numbered item 1</ListGroup.Item>
+ * <ListGroup.Item>Numbered item 2</ListGroup.Item>
+ * <ListGroup.Item>Numbered item 3</ListGroup.Item>
+ * </ListGroup.Root>
+ * ```
+ *
+ * #### Combined properties
+ * ```svelte
+ * <ListGroup.Root isFlush={true} isNumbered={true}>
+ * <ListGroup.Item>Flush and numbered item 1</ListGroup.Item>
+ * <ListGroup.Item>Flush and numbered item 2</ListGroup.Item>
+ * </ListGroup.Root>
+ * ```
+ *
+ * ### Props
+ * - `class` (string): Optional. CSS classes for styling the list group
+ * - `elementRef` (HTMLElement): Optional. Reference to the list group DOM element
+ * - `id` (string): Optional. ID for the list group element
+ * - `isFlush` (boolean): Optional. Removes outer borders and rounded corners
+ * - `isHorizontal` (boolean): Optional. Changes list group direction to horizontal
+ * - `isNumbered` (boolean): Optional. Creates a numbered list with `<ol>` instead of `<ul>`
+ */
+declare const ListGroup: import("svelte").Component<ListGroup.RootProps, {}, "elementRef">;
+type ListGroup = ReturnType<typeof ListGroup>;
+export default ListGroup;

package/dist/ListGroup/types.d.ts

@@ -0,0 +1,20 @@
+import type { AnchorElement, BaseBreakpoint, BaseColorVariant, ListElement, ListItemElement } from '../common/types.js';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+export type ListGroupItemColorVariant = BaseColorVariant;
+export type ListGroupHorizontalBreakpoint = BaseBreakpoint;
+export type ListGroupRootProps = ListElement & {
+    horizontalOnBreakpoint?: ListGroupHorizontalBreakpoint;
+    isFlush?: boolean;
+    isNumbered?: boolean;
+};
+export type ListGroupItemProps = ListItemElement & {
+    colorVariant?: ListGroupItemColorVariant;
+    isActive?: boolean;
+};
+export type ListGroupItemActionProps = AnchorElement & {
+    colorVariant?: ListGroupItemColorVariant;
+    href?: HTMLAnchorAttributes['href'];
+    isActive?: boolean;
+    isDisabled?: boolean;
+    onclick?: EventListener;
+};

package/dist/ListGroup/types.js

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

package/dist/Modal/composition.d.ts

@@ -0,0 +1,8 @@
+export { default as Body } from './modal-body.svelte';
+export { default as Content } from './modal-content.svelte';
+export { default as Dialog } from './modal-dialog.svelte';
+export { default as Footer } from './modal-footer.svelte';
+export { default as Header } from './modal-header.svelte';
+export { default as Title } from './modal-title.svelte';
+export { default as Root } from './modal.svelte';
+export type { ModalBodyProps as BodyProps, ModalContentProps as ContentProps, ModalDialogProps as DialogProps, ModalFooterProps as FooterProps, ModalHeaderProps as HeaderProps, ModalRootProps as RootProps, ModalTitleProps as TitleProps } from './types.js';

package/dist/Modal/composition.js

@@ -0,0 +1,7 @@
+export { default as Body } from './modal-body.svelte';
+export { default as Content } from './modal-content.svelte';
+export { default as Dialog } from './modal-dialog.svelte';
+export { default as Footer } from './modal-footer.svelte';
+export { default as Header } from './modal-header.svelte';
+export { default as Title } from './modal-title.svelte';
+export { default as Root } from './modal.svelte';

package/dist/Modal/index.d.ts

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

package/dist/Modal/index.js

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

package/dist/Modal/modal-body.svelte

@@ -0,0 +1,27 @@
+<!--
+@component
+## Modal.Body
+Body component for the Modal content.
+
+@example
+```svelte
+<Modal.Body>
+    Content for the modal goes here. You can place just about any Bootstrap component or custom elements here.
+</Modal.Body>
+```
+### Props
+- `children` (slot): Content to display inside the body
+- `class` (string): Optional. Additional CSS classes
+- `elementRef` (HTMLElement): Optional. Reference to the body DOM element
+- `id` (string): Optional. ID for the body element
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+// Generate a unique ID for the modal body element, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), id = `modal-body-${uid}`, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('modal-body', classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,19 @@
+/**
+ * ## Modal.Body
+ * Body component for the Modal content.
+ *
+ * @example
+ * ```svelte
+ * <Modal.Body>
+ * Content for the modal goes here. You can place just about any Bootstrap component or custom elements here.
+ * </Modal.Body>
+ * ```
+ * ### Props
+ * - `children` (slot): Content to display inside the body
+ * - `class` (string): Optional. Additional CSS classes
+ * - `elementRef` (HTMLElement): Optional. Reference to the body DOM element
+ * - `id` (string): Optional. ID for the body element
+ */
+declare const ModalBody: import("svelte").Component<import("../index.js").DivElement, {}, "elementRef">;
+type ModalBody = ReturnType<typeof ModalBody>;
+export default ModalBody;

package/dist/Modal/modal-content.svelte

@@ -0,0 +1,35 @@
+<!--
+@component
+## Modal.Content
+Content component that wraps the modal's header, body, and footer.
+
+@example
+```svelte
+<Modal.Content>
+    <Modal.Header>
+        <Modal.Title>Modal Title</Modal.Title>
+    </Modal.Header>
+    <Modal.Body>
+        Content for the modal goes here.
+    </Modal.Body>
+    <Modal.Footer>
+        <Button>Close</Button>
+    </Modal.Footer>
+</Modal.Content>
+```
+### Props
+- `children` (slot): Content to display inside the modal content
+- `class` (string): Optional. Additional CSS classes
+- `elementRef` (HTMLElement): Optional. Reference to the content DOM element
+- `id` (string): Optional. ID for the content element
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+// Generate a unique ID for the modal content element, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), id = `modal-content-${uid}`, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('modal-content', classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,27 @@
+/**
+ * ## Modal.Content
+ * Content component that wraps the modal's header, body, and footer.
+ *
+ * @example
+ * ```svelte
+ * <Modal.Content>
+ * <Modal.Header>
+ *     <Modal.Title>Modal Title</Modal.Title>
+ * </Modal.Header>
+ * <Modal.Body>
+ *     Content for the modal goes here.
+ * </Modal.Body>
+ * <Modal.Footer>
+ *     <Button>Close</Button>
+ * </Modal.Footer>
+ * </Modal.Content>
+ * ```
+ * ### Props
+ * - `children` (slot): Content to display inside the modal content
+ * - `class` (string): Optional. Additional CSS classes
+ * - `elementRef` (HTMLElement): Optional. Reference to the content DOM element
+ * - `id` (string): Optional. ID for the content element
+ */
+declare const ModalContent: import("svelte").Component<import("../index.js").DivElement, {}, "elementRef">;
+type ModalContent = ReturnType<typeof ModalContent>;
+export default ModalContent;

package/dist/Modal/modal-dialog.svelte

@@ -0,0 +1,65 @@
+<!--
+@component
+## Modal.Dialog
+Dialog component that wraps the modal content.
+
+@example
+```svelte
+<Modal.Dialog>
+    <Modal.Content>...</Modal.Content>
+</Modal.Dialog>
+```
+
+#### Different sizes
+```svelte
+<Modal.Dialog size="sm">...</Modal.Dialog>
+<Modal.Dialog size="lg">...</Modal.Dialog>
+<Modal.Dialog size="xl">...</Modal.Dialog>
+```
+
+#### Scrollable
+```svelte
+<Modal.Dialog isScrollable={true}>...</Modal.Dialog>
+```
+
+#### Vertically centered
+```svelte
+<Modal.Dialog isVerticallyCentered={true}>...</Modal.Dialog>
+```
+
+#### Fullscreen
+```svelte
+<Modal.Dialog fullscreenOnBreakpoint="always">...</Modal.Dialog>
+<Modal.Dialog fullscreenOnBreakpoint="sm">...</Modal.Dialog>
+<Modal.Dialog fullscreenOnBreakpoint="md">...</Modal.Dialog>
+<Modal.Dialog fullscreenOnBreakpoint="lg">...</Modal.Dialog>
+<Modal.Dialog fullscreenOnBreakpoint="xl">...</Modal.Dialog>
+<Modal.Dialog fullscreenOnBreakpoint="xxl">...</Modal.Dialog>
+```
+
+### Props
+- `children` (slot): Content to display inside the dialog.
+- `class` (string): Optional. Additional CSS classes.
+- `elementRef` (HTMLElement): Optional. Reference to the dialog DOM element.
+- `fullscreenOnBreakpoint` (string): Optional. Makes the modal fullscreen at a breakpoint ('always', 'sm', 'md', 'lg', 'xl', 'xxl').
+- `id` (string): Optional. ID for the dialog element.
+- `isScrollable` (boolean): Optional. Makes the modal body scrollable.
+- `isVerticallyCentered` (boolean): Optional. Centers the modal vertically.
+- `size` (string): Optional. Size of the modal ('sm', 'lg', 'xl').
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+// Generate a unique ID for the modal dialog element, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), fullscreenOnBreakpoint, id = `modal-dialog-${uid}`, isScrollable = false, isVerticallyCentered = false, size, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('modal-dialog', {
+    [`modal-${size}`]: !!size,
+    'modal-dialog-scrollable': isScrollable,
+    'modal-dialog-centered': isVerticallyCentered,
+    'modal-fullscreen': fullscreenOnBreakpoint === 'always',
+    [`modal-fullscreen-${fullscreenOnBreakpoint}-down`]: fullscreenOnBreakpoint && fullscreenOnBreakpoint !== 'always'
+}, classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,52 @@
+import type { Modal } from './index.js';
+/**
+ * ## Modal.Dialog
+ * Dialog component that wraps the modal content.
+ *
+ * @example
+ * ```svelte
+ * <Modal.Dialog>
+ * <Modal.Content>...</Modal.Content>
+ * </Modal.Dialog>
+ * ```
+ *
+ * #### Different sizes
+ * ```svelte
+ * <Modal.Dialog size="sm">...</Modal.Dialog>
+ * <Modal.Dialog size="lg">...</Modal.Dialog>
+ * <Modal.Dialog size="xl">...</Modal.Dialog>
+ * ```
+ *
+ * #### Scrollable
+ * ```svelte
+ * <Modal.Dialog isScrollable={true}>...</Modal.Dialog>
+ * ```
+ *
+ * #### Vertically centered
+ * ```svelte
+ * <Modal.Dialog isVerticallyCentered={true}>...</Modal.Dialog>
+ * ```
+ *
+ * #### Fullscreen
+ * ```svelte
+ * <Modal.Dialog fullscreenOnBreakpoint="always">...</Modal.Dialog>
+ * <Modal.Dialog fullscreenOnBreakpoint="sm">...</Modal.Dialog>
+ * <Modal.Dialog fullscreenOnBreakpoint="md">...</Modal.Dialog>
+ * <Modal.Dialog fullscreenOnBreakpoint="lg">...</Modal.Dialog>
+ * <Modal.Dialog fullscreenOnBreakpoint="xl">...</Modal.Dialog>
+ * <Modal.Dialog fullscreenOnBreakpoint="xxl">...</Modal.Dialog>
+ * ```
+ *
+ * ### Props
+ * - `children` (slot): Content to display inside the dialog.
+ * - `class` (string): Optional. Additional CSS classes.
+ * - `elementRef` (HTMLElement): Optional. Reference to the dialog DOM element.
+ * - `fullscreenOnBreakpoint` (string): Optional. Makes the modal fullscreen at a breakpoint ('always', 'sm', 'md', 'lg', 'xl', 'xxl').
+ * - `id` (string): Optional. ID for the dialog element.
+ * - `isScrollable` (boolean): Optional. Makes the modal body scrollable.
+ * - `isVerticallyCentered` (boolean): Optional. Centers the modal vertically.
+ * - `size` (string): Optional. Size of the modal ('sm', 'lg', 'xl').
+ */
+declare const ModalDialog: import("svelte").Component<Modal.DialogProps, {}, "elementRef">;
+type ModalDialog = ReturnType<typeof ModalDialog>;
+export default ModalDialog;

package/dist/Modal/modal-footer.svelte

@@ -0,0 +1,28 @@
+<!--
+@component
+## 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
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+// Generate a unique ID for the modal footer element, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), id = `modal-footer-${uid}`, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('modal-footer', classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</div>