@winkintel/bootstrap-svelte 0.0.1

package/dist/Navbar/navbar-text.svelte

@@ -0,0 +1,36 @@
+<!--
+@component
+## Navbar.Text
+Component for displaying text content within a navbar with proper vertical alignment.
+
+@example
+```svelte
+<Navbar.Root>
+    <Navbar.Brand href="/">My Brand</Navbar.Brand>
+    <Navbar.Toggle />
+    <Navbar.Collapse>
+        <Navbar.Nav class="me-auto">
+            <Nav.Item>
+                <Nav.Link href="/">Home</Nav.Link>
+            </Nav.Item>
+        </Navbar.Nav>
+        <Navbar.Text>Logged in as: User</Navbar.Text>
+    </Navbar.Collapse>
+</Navbar.Root>
+```
+### Props
+- `children`: Optional. Content to render inside the text container.
+- `class` (string): Optional. Additional CSS classes to apply to the text container.
+- `elementRef` (HTMLDivElement): Optional. Reference to the DOM div element.
+- `id` (string): Optional. Unique ID for the text container. Defaults to `navbar-{uid}`.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/index.js';
+// Generate a unique ID for the component, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), id = `navbar-${uid}`, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('navbar-text', classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</div>

package/dist/Navbar/navbar-text.svelte.d.ts

@@ -0,0 +1,28 @@
+/**
+ * ## Navbar.Text
+ * Component for displaying text content within a navbar with proper vertical alignment.
+ *
+ * @example
+ * ```svelte
+ * <Navbar.Root>
+ * <Navbar.Brand href="/">My Brand</Navbar.Brand>
+ * <Navbar.Toggle />
+ * <Navbar.Collapse>
+ *     <Navbar.Nav class="me-auto">
+ *         <Nav.Item>
+ *             <Nav.Link href="/">Home</Nav.Link>
+ *         </Nav.Item>
+ *     </Navbar.Nav>
+ *     <Navbar.Text>Logged in as: User</Navbar.Text>
+ * </Navbar.Collapse>
+ * </Navbar.Root>
+ * ```
+ * ### Props
+ * - `children`: Optional. Content to render inside the text container.
+ * - `class` (string): Optional. Additional CSS classes to apply to the text container.
+ * - `elementRef` (HTMLDivElement): Optional. Reference to the DOM div element.
+ * - `id` (string): Optional. Unique ID for the text container. Defaults to `navbar-{uid}`.
+ */
+declare const NavbarText: import("svelte").Component<import("../common/index.js").DivElement, {}, "elementRef">;
+type NavbarText = ReturnType<typeof NavbarText>;
+export default NavbarText;

package/dist/Navbar/navbar-toggler-icon.svelte

@@ -0,0 +1,34 @@
+<!--
+@component
+## Navbar.TogglerIcon
+Default hamburger icon for the navbar toggle button.
+
+@example
+```svelte
+<Navbar.Root>
+    <Navbar.Brand href="/">My Brand</Navbar.Brand>
+    <Navbar.Toggler>
+        <Navbar.TogglerIcon />
+    </Navbar.Toggler>
+    <Navbar.Collapse>
+        <Navbar.Nav>
+            <Nav.Item>
+                <Nav.Link href="/">Home</Nav.Link>
+            </Nav.Item>
+        </Navbar.Nav>
+    </Navbar.Collapse>
+</Navbar.Root>
+```
+### Props
+- `children`: Optional. Custom content to render inside the icon span (rarely used).
+- `class` (string): Optional. Additional CSS classes to apply to the icon.
+- `elementRef` (HTMLSpanElement): Optional. Reference to the DOM span element.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/index.js';
+let { children, class: classValues, elementRef = $bindable(null), ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('navbar-toggler-icon', classValues));
+</script>
+
+<span bind:this={elementRef} class={classes} {...restOfProps}>
+    {@render children?.()}
+</span>

package/dist/Navbar/navbar-toggler-icon.svelte.d.ts

@@ -0,0 +1,28 @@
+/**
+ * ## Navbar.TogglerIcon
+ * Default hamburger icon for the navbar toggle button.
+ *
+ * @example
+ * ```svelte
+ * <Navbar.Root>
+ * <Navbar.Brand href="/">My Brand</Navbar.Brand>
+ * <Navbar.Toggler>
+ *     <Navbar.TogglerIcon />
+ * </Navbar.Toggler>
+ * <Navbar.Collapse>
+ *     <Navbar.Nav>
+ *         <Nav.Item>
+ *             <Nav.Link href="/">Home</Nav.Link>
+ *         </Nav.Item>
+ *     </Navbar.Nav>
+ * </Navbar.Collapse>
+ * </Navbar.Root>
+ * ```
+ * ### Props
+ * - `children`: Optional. Custom content to render inside the icon span (rarely used).
+ * - `class` (string): Optional. Additional CSS classes to apply to the icon.
+ * - `elementRef` (HTMLSpanElement): Optional. Reference to the DOM span element.
+ */
+declare const NavbarTogglerIcon: import("svelte").Component<import("../common/index.js").SpanElement, {}, "elementRef">;
+type NavbarTogglerIcon = ReturnType<typeof NavbarTogglerIcon>;
+export default NavbarTogglerIcon;

package/dist/Navbar/navbar-toggler.svelte

@@ -0,0 +1,75 @@
+<!--
+@component
+## Navbar.Toggler
+Toggle button for collapsible navbar content. Controls the expansion/collapse of Navbar.Collapse component.
+
+@example
+```svelte
+<Navbar.Root>
+    <Navbar.Brand href="/">My Brand</Navbar.Brand>
+    <Navbar.Toggler>
+        <Navbar.TogglerIcon />
+    </Navbar.Toggler>
+    <Navbar.Collapse>
+        <Navbar.Nav>
+            <Nav.Item>
+                <Nav.Link href="/">Home</Nav.Link>
+            </Nav.Item>
+        </Navbar.Nav>
+    </Navbar.Collapse>
+</Navbar.Root>
+```
+
+#### Custom toggle button text
+```svelte
+<Navbar.Root>
+    <Navbar.Brand href="/">My Brand</Navbar.Brand>
+    <Navbar.Toggler>Menu</Navbar.Toggler>
+    <Navbar.Collapse>
+        <Navbar.Nav>
+            <Nav.Item>
+                <Nav.Link href="/">Home</Nav.Link>
+            </Nav.Item>
+        </Navbar.Nav>
+    </Navbar.Collapse>
+</Navbar.Root>
+```
+
+### Props
+- `ariaLabel` (string): Optional. Accessibility label for the toggle button. Defaults to 'Toggle navigation'.
+- `children`: Optional. Content to render inside the toggle button.
+- `class` (string): Optional. Additional CSS classes to apply to the toggle button.
+- `elementRef` (HTMLButtonElement): Optional. Reference to the DOM button element.
+- `id` (string): Optional. Unique ID for the toggle button. Defaults to `navbar-toggler-{uid}`.
+- `type` (string): Optional. Button type attribute.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/index.js';
+import { initNavbarTogglerState, NavbarTogglerState } from '../common/navbar-offcanvas.svelte.js';
+// Generate a unique ID for the component, in case one is not provided...
+const uid = $props.id();
+let { ariaLabel = 'Toggle navigation', children, class: classValues, elementRef = $bindable(null), id = `navbar-toggler-${uid}`, type: _type, ...restOfProps } = $props();
+const togglerState = initNavbarTogglerState({
+    get id() {
+        return id;
+    }
+});
+let ariaControls = $derived(togglerState.root.ariaControls);
+let isExpanded = $derived(togglerState.isExpanded);
+let classes = $derived(uniqueClsx('navbar-toggler', { collapsed: !isExpanded }, classValues));
+const handleClick = (_event) => {
+    togglerState.onclick();
+};
+</script>
+
+<button
+    aria-controls={ariaControls}
+    aria-expanded={isExpanded}
+    aria-label={ariaLabel}
+    bind:this={elementRef}
+    class={classes}
+    {id}
+    onclick={handleClick}
+    type="button"
+    {...restOfProps}>
+    {@render children?.()}
+</button>

package/dist/Navbar/navbar-toggler.svelte.d.ts

@@ -0,0 +1,48 @@
+import type { Navbar } from './index.js';
+/**
+ * ## Navbar.Toggler
+ * Toggle button for collapsible navbar content. Controls the expansion/collapse of Navbar.Collapse component.
+ *
+ * @example
+ * ```svelte
+ * <Navbar.Root>
+ * <Navbar.Brand href="/">My Brand</Navbar.Brand>
+ * <Navbar.Toggler>
+ *     <Navbar.TogglerIcon />
+ * </Navbar.Toggler>
+ * <Navbar.Collapse>
+ *     <Navbar.Nav>
+ *         <Nav.Item>
+ *             <Nav.Link href="/">Home</Nav.Link>
+ *         </Nav.Item>
+ *     </Navbar.Nav>
+ * </Navbar.Collapse>
+ * </Navbar.Root>
+ * ```
+ *
+ * #### Custom toggle button text
+ * ```svelte
+ * <Navbar.Root>
+ * <Navbar.Brand href="/">My Brand</Navbar.Brand>
+ * <Navbar.Toggler>Menu</Navbar.Toggler>
+ * <Navbar.Collapse>
+ *     <Navbar.Nav>
+ *         <Nav.Item>
+ *             <Nav.Link href="/">Home</Nav.Link>
+ *         </Nav.Item>
+ *     </Navbar.Nav>
+ * </Navbar.Collapse>
+ * </Navbar.Root>
+ * ```
+ *
+ * ### Props
+ * - `ariaLabel` (string): Optional. Accessibility label for the toggle button. Defaults to 'Toggle navigation'.
+ * - `children`: Optional. Content to render inside the toggle button.
+ * - `class` (string): Optional. Additional CSS classes to apply to the toggle button.
+ * - `elementRef` (HTMLButtonElement): Optional. Reference to the DOM button element.
+ * - `id` (string): Optional. Unique ID for the toggle button. Defaults to `navbar-toggler-{uid}`.
+ * - `type` (string): Optional. Button type attribute.
+ */
+declare const NavbarToggler: import("svelte").Component<Navbar.TogglerProps, {}, "elementRef">;
+type NavbarToggler = ReturnType<typeof NavbarToggler>;
+export default NavbarToggler;

package/dist/Navbar/navbar.svelte

@@ -0,0 +1,116 @@
+<!--
+@component
+## Navbar.Root
+Root navigation bar component that provides responsive navigation header functionality.
+
+@example
+```svelte
+<Navbar.Root>
+    <Navbar.Brand href="/">
+        My Brand
+    </Navbar.Brand>
+    <Navbar.Toggle />
+    <Navbar.Collapse>
+        <Nav.Root horizontalAlignment="end">
+            <Nav.Item>
+                <Nav.Link href="/" isActive={true}>Home</Nav.Link>
+            </Nav.Item>
+            <Nav.Item>
+                <Nav.Link href="/about">About</Nav.Link>
+            </Nav.Item>
+        </Nav.Root>
+    </Navbar.Collapse>
+</Navbar.Root>
+```
+
+#### With color variant
+```svelte
+<Navbar.Root colorVariant="bg-primary">
+    <Navbar.Brand href="/">
+        My Brand
+    </Navbar.Brand>
+    <Navbar.Toggle />
+    <Navbar.Collapse>
+        <Nav.Root horizontalAlignment="end">
+            <Nav.Item>
+                <Nav.Link href="/">Home</Nav.Link>
+            </Nav.Item>
+        </Nav.Root>
+    </Navbar.Collapse>
+</Navbar.Root>
+```
+
+#### With colored background (manual class)
+```svelte
+<Navbar.Root class="bg-dark navbar-dark">
+    <Navbar.Brand href="/">
+        My Brand
+    </Navbar.Brand>
+    <Navbar.Toggle />
+    <Navbar.Collapse>
+        <Nav.Root horizontalAlignment="end">
+            <Nav.Item>
+                <Nav.Link href="/">Home</Nav.Link>
+            </Nav.Item>
+        </Nav.Root>
+    </Navbar.Collapse>
+</Navbar.Root>
+```
+
+#### Fixed to top
+```svelte
+<Navbar.Root placement="fixed-top">
+    <Navbar.Brand href="/">
+        My Brand
+    </Navbar.Brand>
+    <Navbar.Toggle />
+    <Navbar.Collapse>
+        <Nav.Root horizontalAlignment="end">
+            <Nav.Item>
+                <Nav.Link href="/">Home</Nav.Link>
+            </Nav.Item>
+        </Nav.Root>
+    </Navbar.Collapse>
+</Navbar.Root>
+```
+
+### Props
+- `children`: Optional. Content to render inside the navbar.
+- `class` (string): Optional. Additional CSS classes to apply to the navbar.
+- `colorVariant` (NavbarColorVariant): Optional. Background color variant for the navbar, one of: 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'.
+- `elementRef` (HTMLElement): Optional. Reference to the DOM element.
+- `expandOnBreakpoint` (string): Optional. Breakpoint at which navbar will expand, one of: 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'. Defaults to 'xs'.
+- `id` (string): Optional. Unique ID for the navbar element. Defaults to `navbar-{uid}`, where `uid` is a unique identifier.
+- `placement` (string): Optional. Navbar positioning, one of: 'fixed-top', 'fixed-bottom', 'sticky-top', 'sticky-bottom'.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/index.js';
+import { initNavbarRootState, NavbarRootState } from '../common/navbar-offcanvas.svelte.js';
+// Generate a unique ID for the component, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, colorVariant, elementRef = $bindable(null), expandOnBreakpoint = 'xs', id = `navbar-${uid}`, placement, ...restOfProps } = $props();
+const _rootState = initNavbarRootState({
+    get expandOnBreakpoint() {
+        return expandOnBreakpoint;
+    },
+    get id() {
+        return id;
+    }
+});
+let hasExpandedOnBreakpoint = $derived(!!expandOnBreakpoint); // !! to convert to boolean
+let classes = $derived(uniqueClsx('navbar', { [`navbar-expand-${expandOnBreakpoint}`]: hasExpandedOnBreakpoint && expandOnBreakpoint !== 'xs' }, {
+    'fixed-top': placement === 'fixed-top',
+    'fixed-bottom': placement === 'fixed-bottom',
+    'sticky-top': placement === 'sticky-top',
+    'sticky-bottom': placement === 'sticky-bottom'
+}, colorVariant && `bg-${colorVariant}`, classValues));
+// Determines the Bootstrap data-bs-theme attribute for dark backgrounds
+// to ensure proper text contrast as per Bootstrap documentation
+let theme = $derived.by(() => {
+    const darkVariants = ['dark', 'primary', 'secondary', 'success', 'danger'];
+    return darkVariants.includes(colorVariant ?? '') ? 'dark' : undefined;
+});
+</script>
+
+<nav bind:this={elementRef} class={classes} {id} data-bs-theme={theme} {...restOfProps}>
+    {@render children?.()}
+</nav>

package/dist/Navbar/navbar.svelte.d.ts

@@ -0,0 +1,88 @@
+import type { Navbar } from './index.js';
+/**
+ * ## Navbar.Root
+ * Root navigation bar component that provides responsive navigation header functionality.
+ *
+ * @example
+ * ```svelte
+ * <Navbar.Root>
+ * <Navbar.Brand href="/">
+ *     My Brand
+ * </Navbar.Brand>
+ * <Navbar.Toggle />
+ * <Navbar.Collapse>
+ *     <Nav.Root horizontalAlignment="end">
+ *         <Nav.Item>
+ *             <Nav.Link href="/" isActive={true}>Home</Nav.Link>
+ *         </Nav.Item>
+ *         <Nav.Item>
+ *             <Nav.Link href="/about">About</Nav.Link>
+ *         </Nav.Item>
+ *     </Nav.Root>
+ * </Navbar.Collapse>
+ * </Navbar.Root>
+ * ```
+ *
+ * #### With color variant
+ * ```svelte
+ * <Navbar.Root colorVariant="bg-primary">
+ * <Navbar.Brand href="/">
+ *     My Brand
+ * </Navbar.Brand>
+ * <Navbar.Toggle />
+ * <Navbar.Collapse>
+ *     <Nav.Root horizontalAlignment="end">
+ *         <Nav.Item>
+ *             <Nav.Link href="/">Home</Nav.Link>
+ *         </Nav.Item>
+ *     </Nav.Root>
+ * </Navbar.Collapse>
+ * </Navbar.Root>
+ * ```
+ *
+ * #### With colored background (manual class)
+ * ```svelte
+ * <Navbar.Root class="bg-dark navbar-dark">
+ * <Navbar.Brand href="/">
+ *     My Brand
+ * </Navbar.Brand>
+ * <Navbar.Toggle />
+ * <Navbar.Collapse>
+ *     <Nav.Root horizontalAlignment="end">
+ *         <Nav.Item>
+ *             <Nav.Link href="/">Home</Nav.Link>
+ *         </Nav.Item>
+ *     </Nav.Root>
+ * </Navbar.Collapse>
+ * </Navbar.Root>
+ * ```
+ *
+ * #### Fixed to top
+ * ```svelte
+ * <Navbar.Root placement="fixed-top">
+ * <Navbar.Brand href="/">
+ *     My Brand
+ * </Navbar.Brand>
+ * <Navbar.Toggle />
+ * <Navbar.Collapse>
+ *     <Nav.Root horizontalAlignment="end">
+ *         <Nav.Item>
+ *             <Nav.Link href="/">Home</Nav.Link>
+ *         </Nav.Item>
+ *     </Nav.Root>
+ * </Navbar.Collapse>
+ * </Navbar.Root>
+ * ```
+ *
+ * ### Props
+ * - `children`: Optional. Content to render inside the navbar.
+ * - `class` (string): Optional. Additional CSS classes to apply to the navbar.
+ * - `colorVariant` (NavbarColorVariant): Optional. Background color variant for the navbar, one of: 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'.
+ * - `elementRef` (HTMLElement): Optional. Reference to the DOM element.
+ * - `expandOnBreakpoint` (string): Optional. Breakpoint at which navbar will expand, one of: 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'. Defaults to 'xs'.
+ * - `id` (string): Optional. Unique ID for the navbar element. Defaults to `navbar-{uid}`, where `uid` is a unique identifier.
+ * - `placement` (string): Optional. Navbar positioning, one of: 'fixed-top', 'fixed-bottom', 'sticky-top', 'sticky-bottom'.
+ */
+declare const Navbar: import("svelte").Component<Navbar.RootProps, {}, "elementRef">;
+type Navbar = ReturnType<typeof Navbar>;
+export default Navbar;

package/dist/Navbar/types.d.ts

@@ -0,0 +1,23 @@
+import type { CollapseRootProps } from '../Collapse/types.js';
+import type { AnchorElement, BaseBreakpoint, BaseColorVariant, ButtonElement, DivElement, NavElement, SpanElement, UListElement } from '../common/types.js';
+export type NavbarColorVariant = BaseColorVariant;
+export type NavbarExpandBreakpoint = BaseBreakpoint;
+export type NavbarPlacement = 'fixed-top' | 'fixed-bottom' | 'sticky-top' | 'sticky-bottom';
+export type NavbarRootProps = NavElement & {
+    colorVariant?: NavbarColorVariant;
+    expandOnBreakpoint?: NavbarExpandBreakpoint;
+    placement?: NavbarPlacement;
+};
+export type NavbarBrandProps = AnchorElement & {
+    href?: HTMLAnchorElement['href'];
+};
+export type NavbarCollapseProps = Omit<CollapseRootProps, 'isExpanded' | 'isHorizontal'>;
+export type NavbarNavProps = UListElement & {
+    isVerticalScrolling?: boolean;
+};
+export type NavbarTextProps = DivElement;
+export type NavbarTogglerIconProps = SpanElement;
+export type NavbarTogglerProps = ButtonElement & {
+    ariaLabel?: string;
+    type?: HTMLButtonElement['type'];
+};

package/dist/Navbar/types.js

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

package/dist/Offcanvas/composition.d.ts

@@ -0,0 +1,5 @@
+export { default as Body } from './offcanvas-body.svelte';
+export { default as Header } from './offcanvas-header.svelte';
+export { default as Title } from './offcanvas-title.svelte';
+export { default as Root } from './offcanvas.svelte';
+export type { OffcanvasBodyProps as BodyProps, OffcanvasHeaderProps as HeaderProps, OffcanvasRootProps as RootProps, OffcanvasTitleProps as TitleProps } from './types.js';

package/dist/Offcanvas/composition.js

@@ -0,0 +1,4 @@
+export { default as Body } from './offcanvas-body.svelte';
+export { default as Header } from './offcanvas-header.svelte';
+export { default as Title } from './offcanvas-title.svelte';
+export { default as Root } from './offcanvas.svelte';

package/dist/Offcanvas/index.d.ts

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

package/dist/Offcanvas/index.js

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

package/dist/Offcanvas/offcanvas-body.svelte

@@ -0,0 +1,25 @@
+<!--
+@component
+## Offcanvas.Body
+Body component for the Offcanvas content.
+
+@example
+```svelte
+<Offcanvas.Body>
+    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
+</Offcanvas.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
+-->
+<script lang="ts">import { uniqueClsx } from '../common/index.js';
+let { children, class: classValues, elementRef = $bindable(null), ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('offcanvas-body', classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {...restOfProps}>
+    {@render children?.()}
+</div>

package/dist/Offcanvas/offcanvas-body.svelte.d.ts

@@ -0,0 +1,19 @@
+/**
+ * ## Offcanvas.Body
+ * Body component for the Offcanvas content.
+ *
+ * @example
+ * ```svelte
+ * <Offcanvas.Body>
+ * Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
+ * </Offcanvas.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
+ */
+declare const OffcanvasBody: import("svelte").Component<import("../common/index.js").DivElement, {}, "elementRef">;
+type OffcanvasBody = ReturnType<typeof OffcanvasBody>;
+export default OffcanvasBody;

package/dist/Offcanvas/offcanvas-header.svelte

@@ -0,0 +1,39 @@
+<!--
+@component
+## Offcanvas.Header
+Header component for the Offcanvas. Usually contains the Offcanvas.Title and a close button.
+
+@example
+```svelte
+<Offcanvas.Header>
+    <Offcanvas.Title>Offcanvas Title</Offcanvas.Title>
+</Offcanvas.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
+-->
+<script lang="ts">import { uniqueClsx } from '../common/index.js';
+import { initOffcanvasHeaderState, OffcanvasHeaderState } from '../common/navbar-offcanvas.svelte.js';
+import { CloseButton } from '../index.js';
+import { Offcanvas } from './index.js';
+let { children, class: classValues, elementRef = $bindable(null), isDismissible = false, ...restOfProps } = $props();
+const headerState = initOffcanvasHeaderState({
+    get isDismissible() {
+        return isDismissible;
+    }
+});
+let classes = $derived(uniqueClsx('offcanvas-header', classValues));
+const handleClick = (_event) => {
+    headerState.onclick();
+};
+</script>
+
+<div bind:this={elementRef} class={classes} {...restOfProps}>
+    {@render children?.()}
+    {#if isDismissible}
+        <CloseButton onclick={handleClick}></CloseButton>
+    {/if}
+</div>

package/dist/Offcanvas/offcanvas-header.svelte.d.ts

@@ -0,0 +1,20 @@
+import { Offcanvas } from './index.js';
+/**
+ * ## Offcanvas.Header
+ * Header component for the Offcanvas. Usually contains the Offcanvas.Title and a close button.
+ *
+ * @example
+ * ```svelte
+ * <Offcanvas.Header>
+ * <Offcanvas.Title>Offcanvas Title</Offcanvas.Title>
+ * </Offcanvas.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
+ */
+declare const OffcanvasHeader: import("svelte").Component<Offcanvas.HeaderProps, {}, "elementRef">;
+type OffcanvasHeader = ReturnType<typeof OffcanvasHeader>;
+export default OffcanvasHeader;

package/dist/Offcanvas/offcanvas-title.svelte

@@ -0,0 +1,31 @@
+<!--
+@component
+## Offcanvas.Title
+Title component for the Offcanvas.Header.
+
+@example
+```svelte
+<Offcanvas.Title>Offcanvas Title</Offcanvas.Title>
+```
+
+#### Custom heading level
+```svelte
+<Offcanvas.Title level={1}>H1 Title</Offcanvas.Title>
+<Offcanvas.Title level={2}>H2 Title</Offcanvas.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
+- `level` (number): Optional. Heading level (1-6) for the title element
+-->
+<script lang="ts">import { uniqueClsx } from '../common/index.js';
+let { children, class: classValues, elementRef = $bindable(null), level = 5, ...restOfProps } = $props();
+let elementType = $derived(`h${level}`);
+let classes = $derived(uniqueClsx('offcanvas-title', classValues));
+</script>
+
+<svelte:element this={elementType} bind:this={elementRef} class={classes} {...restOfProps}>
+    {@render children?.()}
+</svelte:element>

package/dist/Offcanvas/offcanvas-title.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Offcanvas } from './index.js';
+/**
+ * ## Offcanvas.Title
+ * Title component for the Offcanvas.Header.
+ *
+ * @example
+ * ```svelte
+ * <Offcanvas.Title>Offcanvas Title</Offcanvas.Title>
+ * ```
+ *
+ * #### Custom heading level
+ * ```svelte
+ * <Offcanvas.Title level={1}>H1 Title</Offcanvas.Title>
+ * <Offcanvas.Title level={2}>H2 Title</Offcanvas.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
+ * - `level` (number): Optional. Heading level (1-6) for the title element
+ */
+declare const OffcanvasTitle: import("svelte").Component<Offcanvas.TitleProps, {}, "elementRef">;
+type OffcanvasTitle = ReturnType<typeof OffcanvasTitle>;
+export default OffcanvasTitle;