@winkintel/bootstrap-svelte 1.0.7 → 1.0.10

package/README.md

@@ -1,5 +1,11 @@
 # Bootstrap Svelte
 
+[![npm version](https://img.shields.io/npm/v/@winkintel/bootstrap-svelte.svg)](https://www.npmjs.com/package/@winkintel/bootstrap-svelte)
+[![weekly downloads](https://img.shields.io/npm/dw/@winkintel/bootstrap-svelte.svg)](https://www.npmjs.com/package/@winkintel/bootstrap-svelte)
+[![CI](https://github.com/WinkIntel/bootstrap-svelte/actions/workflows/ci.yml/badge.svg)](https://github.com/WinkIntel/bootstrap-svelte/actions/workflows/ci.yml)
+[![license](https://img.shields.io/npm/l/@winkintel/bootstrap-svelte.svg)](https://github.com/WinkIntel/bootstrap-svelte/blob/main/LICENSE.md)
+[![documentation](https://img.shields.io/badge/docs-bootstrap--svelte.vercel.app-7952b3.svg)](https://bootstrap-svelte.vercel.app/)
+
 > Bootstrap 5 components for Svelte 5 with TypeScript support.
 
 Bootstrap Svelte provides ready-to-use, type-safe Bootstrap components for Svelte 5 applications. It follows Bootstrap's design language and class conventions while exposing Svelte-native component APIs.
@@ -8,11 +14,21 @@ Use it when you want Bootstrap's familiar grid, utilities, and UI patterns in a
 
 ## Links
 
+- Documentation: <https://bootstrap-svelte.vercel.app/>
 - npm: [`@winkintel/bootstrap-svelte`](https://www.npmjs.com/package/@winkintel/bootstrap-svelte)
 - Repository: [`WinkIntel/bootstrap-svelte`](https://github.com/WinkIntel/bootstrap-svelte)
 - Bootstrap: <https://getbootstrap.com/>
 - Svelte: <https://svelte.dev/>
 
+## Machine-readable documentation
+
+The showcase at <https://bootstrap-svelte.vercel.app> is published for AI agents and tools as well as people:
+
+- `/llms.txt` indexes every page with one-line summaries ([llms.txt format](https://llmstxt.org)); `/llms-full.txt` bundles every page into one Markdown file.
+- Every page is available as Markdown from its own URL with `Accept: text/markdown` (quality values are honored; the response carries `Vary: Accept` and a `Link` alternate header), or by appending `.md` to the path, for example `/components/button.md`.
+- `/agents.md` explains when to use the library and how to integrate it; `/sitemap.xml` and `/robots.txt` serve crawlers.
+- Paths that do not exist return a real HTTP 404 with a Markdown or HTML body that links back to the documentation index.
+
 ## Why this exists
 
 Bootstrap is still a practical choice for many product, enterprise, and internal applications: it is familiar, well documented, stable, and easy for mixed frontend/backend teams to work with.
@@ -51,11 +67,7 @@ yarn add @winkintel/bootstrap-svelte bootstrap
 
 ### Peer dependency
 
-This package requires Svelte 5:
-
-```bash
-pnpm add svelte@^5.29.0
-```
+This package requires Svelte `^5.29.0` as a peer dependency. Keep Svelte installed in your application; do not replace the package/bootstrap install command with a Svelte install command.
 
 ## Bootstrap CSS
 
@@ -82,23 +94,19 @@ Or use Bootstrap SCSS from your app stylesheet/build pipeline:
     let showModal = $state(false);
 </script>
 
-<Alert colorVariant="primary" isDismissible>
-    Welcome to Bootstrap Svelte!
-</Alert>
+<Alert colorVariant="primary" isDismissible>Welcome to Bootstrap Svelte!</Alert>
 
-<Card>
+<Card.Root>
     <Card.Header>
         <Card.Title>Getting Started</Card.Title>
     </Card.Header>
     <Card.Body>
         <Card.Text>This is a card built with Bootstrap Svelte components.</Card.Text>
-        <Button colorVariant="primary" onclick={() => (showModal = true)}>
-            Open Modal
-        </Button>
+        <Button colorVariant="primary" onclick={() => (showModal = true)}>Open Modal</Button>
     </Card.Body>
-</Card>
+</Card.Root>
 
-<Modal isShown={showModal}>
+<Modal.Root isShown={showModal}>
     <Modal.Dialog>
         <Modal.Content>
             <Modal.Header>
@@ -106,13 +114,11 @@ Or use Bootstrap SCSS from your app stylesheet/build pipeline:
             </Modal.Header>
             <Modal.Body>Modal content goes here.</Modal.Body>
             <Modal.Footer>
-                <Button colorVariant="secondary" onclick={() => (showModal = false)}>
-                    Close
-                </Button>
+                <Button colorVariant="secondary" onclick={() => (showModal = false)}>Close</Button>
             </Modal.Footer>
         </Modal.Content>
     </Modal.Dialog>
-</Modal>
+</Modal.Root>
 ```
 
 ## Available components
@@ -174,7 +180,7 @@ Interactive components are implemented as Svelte components rather than requirin
 
 ## Status and feedback
 
-This package is published as `1.0.7`, but feedback from Svelte developers is still very welcome. Useful feedback includes:
+This package is published as `1.0.10`, but feedback from Svelte developers is still very welcome. Useful feedback includes:
 
 - Component API ergonomics
 - Svelte 5 idioms and runes compatibility

package/dist/Dropdown/dropdown-menu.svelte

@@ -21,14 +21,16 @@ The container for dropdown items.
 - `isDark` (boolean): Optional. Makes the dropdown menu dark-themed, default is false.
 - `isEnd` (boolean): Optional. Aligns the dropdown menu to the end of its parent, default is false.
 - `offset` (number[]): Optional. Offset for the dropdown menu position, default is `[0, 2]`.
+- `onkeydown` (EventListener): Optional. Keydown handler, called after the menu's own Escape dismissal.
 -->
 <script lang="ts">import { uniqueClsx } from '../common/css.js';
+import { noop } from '../common/noop.js';
 import { Portal } from '../index.js';
 import { onMount } from 'svelte';
 import { DropdownMenuState, initDropdownMenuState } from './dropdown.svelte.js';
 // Generate a unique ID for the dropdown menu
 const uid = $props.id();
-let { children, class: classValues, container = false, elementRef = $bindable(null), id = `dropdown-menu-${uid}`, isDark = false, isEnd = false, offset = [0, 2], ...restOfProps } = $props();
+let { children, class: classValues, container = false, elementRef = $bindable(null), id = `dropdown-menu-${uid}`, isDark = false, isEnd = false, offset = [0, 2], onkeydown = noop, ...restOfProps } = $props();
 let containerElement = $derived(container === false ? 'body' : container);
 const menuState = initDropdownMenuState({
     get elementRef() {
@@ -63,9 +65,14 @@ $effect(() => {
 $effect(() => {
     menuState.isEnd = isEnd;
 });
+const handleKeydown = (event) => {
+    menuState.onkeydown(event);
+    onkeydown(event);
+};
 </script>
 
 <svelte:body onclick={menuState.bodyOnclick} />
+<svelte:window onkeyup={menuState.windowOnkeyup} />
 
 <Portal target={containerElement} disabled={container === false}>
     <ul
@@ -75,6 +82,7 @@ $effect(() => {
         data-bs-popper={menuState.isShown && menuState.root.isNavItem ? 'static' : undefined}
         data-popper-placement={menuState.popperPlacement}
         {id}
+        onkeydown={handleKeydown}
         role={menuState.root.hasItems ? 'menu' : undefined}
         {...restOfProps}>
         {@render children?.()}

package/dist/Dropdown/dropdown-menu.svelte.d.ts

@@ -21,6 +21,7 @@ import type { Dropdown } from './index.js';
  * - `isDark` (boolean): Optional. Makes the dropdown menu dark-themed, default is false.
  * - `isEnd` (boolean): Optional. Aligns the dropdown menu to the end of its parent, default is false.
  * - `offset` (number[]): Optional. Offset for the dropdown menu position, default is `[0, 2]`.
+ * - `onkeydown` (EventListener): Optional. Keydown handler, called after the menu's own Escape dismissal.
  */
 declare const DropdownMenu: import("svelte").Component<Dropdown.MenuProps, {}, "elementRef">;
 type DropdownMenu = ReturnType<typeof DropdownMenu>;

package/dist/Dropdown/dropdown-toggle.svelte

@@ -28,6 +28,9 @@ import { DropdownToggleState, initDropdownToggleState } from './dropdown.svelte.
 const uid = $props.id();
 let { children, class: classValues, colorVariant, disabled = false, elementRef = $bindable(null), href, id = `dropdown-toggle-${uid}`, isSplit = false, onclick = noop, onkeydown = noop, size, type, ...restOfProps } = $props();
 const toggleState = initDropdownToggleState({
+    get elementRef() {
+        return elementRef;
+    },
     get id() {
         return id;
     },

package/dist/Dropdown/dropdown.svelte.js

@@ -13,7 +13,9 @@ export class DropdownRootState {
     #isNavItem = $state(false);
     #isShown = $state(false);
     #items = $state([]);
+    #menu = null; // The menu belonging to this dropdown, registered on construction.
     #reorderScheduled = false;
+    #toggle = null; // The toggle that controls this dropdown, registered on construction.
     ariaLabelledBy = $state(undefined); // Used for accessibility, linking the dropdown to a label.
     constructor(props) {
         this.props = props;
@@ -25,6 +27,8 @@ export class DropdownRootState {
         // Bind the method to ensure `this` context is correct when passed as a callback.
         this.focusOnNextItem = this.focusOnNextItem.bind(this);
         this.focusOnPreviousItem = this.focusOnPreviousItem.bind(this);
+        this.focusOnToggle = this.focusOnToggle.bind(this);
+        this.hide = this.hide.bind(this);
         this.registerItem = this.registerItem.bind(this);
         this.reorderItems = this.reorderItems.bind(this);
         this.scheduleReorderItems = this.scheduleReorderItems.bind(this);
@@ -82,12 +86,43 @@ export class DropdownRootState {
     get isShown() {
         return this.#isShown;
     }
+    get menu() {
+        return this.#menu;
+    }
+    set menu(menu) {
+        this.#menu = menu;
+    }
+    get toggle() {
+        return this.#toggle;
+    }
+    set toggle(toggle) {
+        this.#toggle = toggle;
+    }
+    // True when the given element is part of this dropdown — its root (toggle included)
+    // or its menu, which may be portaled outside the root via the menu's `container` prop.
+    containsElement(element) {
+        if (!element) {
+            return false;
+        }
+        return Boolean(this.#elementRef?.contains(element) || this.#menu?.elementRef?.contains(element));
+    }
     focusOnNextItem() {
         this.focusOnItemInDirection(1);
     }
     focusOnPreviousItem() {
         this.focusOnItemInDirection(-1);
     }
+    focusOnToggle() {
+        this.#toggle?.props.elementRef?.focus();
+    }
+    // Closes the dropdown if it is open, firing the onHide/onHidden callbacks.
+    // Unlike toggleIsShown this is a no-op when the dropdown is already closed.
+    hide(event) {
+        if (!this.#isShown) {
+            return;
+        }
+        this.toggleIsShown(event);
+    }
     registerItem(item) {
         item.itemIndex = this.#items.length; // Set the item's index based on current length.
         this.#items = [...this.#items, item];
@@ -174,6 +209,7 @@ export class DropdownToggleState {
         // Bind the method to ensure `this` context is correct when used as an event handler.
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
+        this.root.toggle = this; // Let the root find the toggle again, e.g. to restore focus on Escape.
         if (this.props.isSplit && !this.root.isButtonGroup) {
             // If the toggle is a split button, the root must be treated as a button group
             // to ensure correct Bootstrap styling and layout.
@@ -215,7 +251,10 @@ export class DropdownMenuState {
         this.destroyPopper = this.destroyPopper.bind(this);
         this.determinePopperPlacement = this.determinePopperPlacement.bind(this);
         this.dispose = this.dispose.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
         this.syncIsEndWithRoot = this.syncIsEndWithRoot.bind(this);
+        this.windowOnkeyup = this.windowOnkeyup.bind(this);
+        this.root.menu = this; // Let the root reach the menu element, which may be portaled outside the root.
         // Ensure the dropdown menu's end alignment is consistent with the root's direction.
         this.syncIsEndWithRoot();
         // Effect to manage the Popper.js instance lifecycle.
@@ -274,9 +313,38 @@ export class DropdownMenuState {
             this.root.toggleIsShown(event);
         }
     }
+    // Backstop for Escape pressed on focusable content inside the menu that is not a
+    // Dropdown.Item — a form input, a plain link, a consumer's own button. Items and the
+    // toggle consume Escape before it can bubble this far, so this never double-handles.
+    onkeydown(event) {
+        if (event.key !== 'Escape') {
+            return;
+        }
+        handleEscape(event, this.root);
+    }
+    // Closes the dropdown once Tab has moved focus out of it. Handled on keyup rather than
+    // keydown because focus has not moved yet while the key is down, and at window level
+    // because the newly focused element is usually outside this component's markup.
+    windowOnkeyup(event) {
+        if (!this.isShown || event.key !== 'Tab') {
+            return;
+        }
+        if (this.root.containsElement(document.activeElement)) {
+            // Focus moved between items inside the dropdown, so it stays open.
+            return;
+        }
+        // Tabbing away is an interaction outside the dropdown, so it follows the same
+        // autoClose rules as an outside click.
+        if (this.autoClose === true || this.autoClose === 'outside') {
+            this.root.hide(event);
+        }
+    }
     // Cleans up resources, particularly the Popper.js instance and element references.
     dispose() {
         this.destroyPopper();
+        if (this.root.menu === this) {
+            this.root.menu = null;
+        }
         this.#elementRef = null;
         this.#rootElementRef = null; // Clearing derived state source if it were directly settable.
         this.#popperInstance = null;
@@ -449,15 +517,52 @@ export function initDropdownItemState(props) {
     rootState.registerItem(itemState);
     return itemState;
 }
+/**
+ * Dismisses an open dropdown in response to Escape, returning focus to the toggle.
+ *
+ * Shared by the toggle, the items, and the menu itself. The menu is the backstop that
+ * catches Escape from focusable content a consumer renders inside it — inputs, links,
+ * arbitrary buttons — which are not Dropdown.Items and carry no handler of their own.
+ * Because the toggle and items stop a consumed Escape from propagating, the menu-level
+ * handler never sees the same key twice.
+ *
+ * Escape ignores autoClose: it is an explicit dismissal rather than an incidental one.
+ *
+ * @param event KeyboardEvent
+ * @param root DropdownRootState
+ */
+function handleEscape(event, root) {
+    if (!root.isShown) {
+        return;
+    }
+    event.preventDefault();
+    // Stop the event here so an ancestor that also dismisses on Escape (a modal, an
+    // offcanvas, an app-level sidebar) does not close as well. Escape should unwind one
+    // layer at a time, which is what Bootstrap's own dropdown does.
+    //
+    // This covers listeners in the bubble path only. A listener bound on document or
+    // window in the *capture* phase runs before the event ever reaches the dropdown and
+    // cannot be stopped from here — notably Bootstrap's own data-API handlers, which are
+    // registered with capture. Loading Bootstrap's JS bundle alongside this package makes
+    // both implementations respond to the same markup and is not a supported setup.
+    event.stopPropagation();
+    root.hide(event);
+    root.focusOnToggle();
+}
 /**
  * Handles keyboard navigation for the toggle and items within the dropdown.
- * Supports opening the dropdown with ArrowUp/ArrowDown and navigating between items.
+ * Supports opening the dropdown with ArrowUp/ArrowDown, navigating between items,
+ * and dismissing an open dropdown with Escape.
  *
  * @param event KeyboardEvent
  * @param root DropdownRootState
  */
 function handleKeydown(event, root) {
     const { key } = event;
+    if (key === 'Escape') {
+        handleEscape(event, root);
+        return;
+    }
     const isUpOrDownEvent = ['ArrowUp', 'ArrowDown'].includes(event.key);
     if (isUpOrDownEvent && !root.isShown) {
         event.preventDefault();

package/dist/Dropdown/types.d.ts

@@ -25,6 +25,7 @@ export type DropdownMenuProps = UListElement & {
     isDark?: boolean;
     isEnd?: boolean;
     offset?: PopperOffset;
+    onkeydown?: EventListener;
 };
 export type DropdownItemProps = AnchorElement & {
     href?: HTMLAnchorAttributes['href'];

package/dist/Form/form-helper-text.svelte

@@ -13,12 +13,12 @@ Bootstrap-styled helper text component for providing additional information abou
 <Form.TextInput id="emailInput" placeholder="Enter your email" aria-describedby="email-help" />
 <Form.HelperText id="email-help">We'll never share your email with anyone else.</Form.HelperText>
 
-// Inside a form group
-<Form.Group>
+// Inside an input group
+<Form.InputGroup>
     <Form.InputLabel for="passwordInput">Password</Form.InputLabel>
     <Form.PasswordInput id="passwordInput" />
     <Form.HelperText>Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces or emoji.</Form.HelperText>
-</Form.Group>
+</Form.InputGroup>
 ```
 ### Props
 - `class` (string): Optional. Additional CSS classes to apply to the helper text.

package/dist/Form/form-helper-text.svelte.d.ts

@@ -12,12 +12,12 @@
  * <Form.TextInput id="emailInput" placeholder="Enter your email" aria-describedby="email-help" />
  * <Form.HelperText id="email-help">We'll never share your email with anyone else.</Form.HelperText>
  *
- * // Inside a form group
- * <Form.Group>
+ * // Inside an input group
+ * <Form.InputGroup>
  * <Form.InputLabel for="passwordInput">Password</Form.InputLabel>
  * <Form.PasswordInput id="passwordInput" />
  * <Form.HelperText>Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces or emoji.</Form.HelperText>
- * </Form.Group>
+ * </Form.InputGroup>
  * ```
  * ### Props
  * - `class` (string): Optional. Additional CSS classes to apply to the helper text.

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

@@ -6,11 +6,11 @@ Bootstrap-styled label component for form input elements.
 @example
 ```svelte
 // Standard label for input
-<Form.Group>
+<Form.InputGroup>
     <Form.InputLabel for="exampleInput">Email address</Form.InputLabel>
     <Form.EmailInput id="exampleInput" placeholder="name@example.com" />
     <Form.HelperText>We'll never share your email with anyone else.</Form.HelperText>
-</Form.Group>
+</Form.InputGroup>
 
 // Floating label (used with Form.Floating)
 <Form.Floating>

package/dist/Form/form-input-label.svelte.d.ts

@@ -6,11 +6,11 @@ import type { Form } from './index.js';
  * @example
  * ```svelte
  * // Standard label for input
- * <Form.Group>
+ * <Form.InputGroup>
  * <Form.InputLabel for="exampleInput">Email address</Form.InputLabel>
  * <Form.EmailInput id="exampleInput" placeholder="name@example.com" />
  * <Form.HelperText>We'll never share your email with anyone else.</Form.HelperText>
- * </Form.Group>
+ * </Form.InputGroup>
  *
  * // Floating label (used with Form.Floating)
  * <Form.Floating>

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

@@ -16,19 +16,19 @@ Bootstrap-styled range slider input component for selecting a value within a ran
 <Form.RangeInput disabled max="5" min="0" step="0.5" title="Set a number" value="1" />
 
 // With label and current value display
-<Form.Group>
+<Form.InputGroup>
     <Form.InputLabel for="customRange">Example range</Form.InputLabel>
     <Form.RangeInput id="customRange" max="10" min="0" />
-</Form.Group>
+</Form.InputGroup>
 
 // With steps and ticks
-<Form.Group>
+<Form.InputGroup>
     <Form.InputLabel for="stepRange">Range with steps</Form.InputLabel>
     <Form.RangeInput id="stepRange" max="5" min="0" step="1" />
     <div class="d-flex justify-content-between">
         <span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
     </div>
-</Form.Group>
+</Form.InputGroup>
 ```
 ### Props
 - `class` (string): Optional. Additional CSS classes to apply to the range input.

package/dist/Form/form-range-input.svelte.d.ts

@@ -16,19 +16,19 @@ import type { Form } from './index.js';
  * <Form.RangeInput disabled max="5" min="0" step="0.5" title="Set a number" value="1" />
  *
  * // With label and current value display
- * <Form.Group>
+ * <Form.InputGroup>
  *   <Form.InputLabel for="customRange">Example range</Form.InputLabel>
  *   <Form.RangeInput id="customRange" max="10" min="0" />
- * </Form.Group>
+ * </Form.InputGroup>
  *
  * // With steps and ticks
- * <Form.Group>
+ * <Form.InputGroup>
  *   <Form.InputLabel for="stepRange">Range with steps</Form.InputLabel>
  *   <Form.RangeInput id="stepRange" max="5" min="0" step="1" />
  *   <div class="d-flex justify-content-between">
  *       <span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
  *   </div>
- * </Form.Group>
+ * </Form.InputGroup>
  * ```
  * ### Props
  * - `class` (string): Optional. Additional CSS classes to apply to the range input.

package/dist/Modal/modal.svelte

@@ -5,7 +5,7 @@ Add dialogs to your site for lightboxes, user notifications, or completely custo
 
 @example
 ```svelte
-<Modal isShown={true}>
+<Modal.Root isShown={true}>
     <Modal.Dialog>
         <Modal.Content>
             <Modal.Header>
@@ -19,17 +19,17 @@ Add dialogs to your site for lightboxes, user notifications, or completely custo
             </Modal.Footer>
         </Modal.Content>
     </Modal.Dialog>
-</Modal>
+</Modal.Root>
 ```
 
 #### Static backdrop
 ```svelte
-<Modal useBackdrop="static">...</Modal>
+<Modal.Root useBackdrop="static">...</Modal.Root>
 ```
 
 #### Keyboard dismissible
 ```svelte
-<Modal isKeyboardDismissible={true}>...</Modal>
+<Modal.Root isKeyboardDismissible={true}>...</Modal.Root>
 ```
 
 ### Props

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

@@ -5,7 +5,7 @@ import type { Modal } from './index.js';
  *
  * @example
  * ```svelte
- * <Modal isShown={true}>
+ * <Modal.Root isShown={true}>
  * <Modal.Dialog>
  *     <Modal.Content>
  *         <Modal.Header>
@@ -19,17 +19,17 @@ import type { Modal } from './index.js';
  *         </Modal.Footer>
  *     </Modal.Content>
  * </Modal.Dialog>
- * </Modal>
+ * </Modal.Root>
  * ```
  *
  * #### Static backdrop
  * ```svelte
- * <Modal useBackdrop="static">...</Modal>
+ * <Modal.Root useBackdrop="static">...</Modal.Root>
  * ```
  *
  * #### Keyboard dismissible
  * ```svelte
- * <Modal isKeyboardDismissible={true}>...</Modal>
+ * <Modal.Root isKeyboardDismissible={true}>...</Modal.Root>
  * ```
  *
  * ### Props

package/dist/Offcanvas/offcanvas.svelte

@@ -5,37 +5,37 @@ Build hidden sidebars into your project for navigation, shopping carts, and more
 
 @example
 ```svelte
-<Offcanvas placement="start" isVisible={true}>
+<Offcanvas.Root placement="start" isShown={true}>
     <Offcanvas.Header>
         <Offcanvas.Title>Offcanvas Title</Offcanvas.Title>
     </Offcanvas.Header>
     <Offcanvas.Body>
         Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
     </Offcanvas.Body>
-</Offcanvas>
+</Offcanvas.Root>
 ```
 
 #### Placement options
 ```svelte
-<Offcanvas placement="start">...</Offcanvas>
-<Offcanvas placement="end">...</Offcanvas>
-<Offcanvas placement="top">...</Offcanvas>
-<Offcanvas placement="bottom">...</Offcanvas>
+<Offcanvas.Root placement="start">...</Offcanvas.Root>
+<Offcanvas.Root placement="end">...</Offcanvas.Root>
+<Offcanvas.Root placement="top">...</Offcanvas.Root>
+<Offcanvas.Root placement="bottom">...</Offcanvas.Root>
 ```
 
 #### Body scrolling
 ```svelte
-<Offcanvas bodyScrolling={true}>...</Offcanvas>
+<Offcanvas.Root isBodyScrollable={true}>...</Offcanvas.Root>
 ```
 
 #### Static backdrop
 ```svelte
-<Offcanvas isStatic={true}>...</Offcanvas>
+<Offcanvas.Root useBackdrop="static">...</Offcanvas.Root>
 ```
 
 #### Responsive offcanvas
 ```svelte
-<Offcanvas breakpoint="lg">...</Offcanvas>
+<Offcanvas.Root showOnBreakpoint="lg">...</Offcanvas.Root>
 ```
 
 ### Props

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

@@ -5,37 +5,37 @@ import type { Offcanvas } from './index.js';
  *
  * @example
  * ```svelte
- * <Offcanvas placement="start" isVisible={true}>
+ * <Offcanvas.Root placement="start" isShown={true}>
  * <Offcanvas.Header>
  *     <Offcanvas.Title>Offcanvas Title</Offcanvas.Title>
  * </Offcanvas.Header>
  * <Offcanvas.Body>
  *     Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
  * </Offcanvas.Body>
- * </Offcanvas>
+ * </Offcanvas.Root>
  * ```
  *
  * #### Placement options
  * ```svelte
- * <Offcanvas placement="start">...</Offcanvas>
- * <Offcanvas placement="end">...</Offcanvas>
- * <Offcanvas placement="top">...</Offcanvas>
- * <Offcanvas placement="bottom">...</Offcanvas>
+ * <Offcanvas.Root placement="start">...</Offcanvas.Root>
+ * <Offcanvas.Root placement="end">...</Offcanvas.Root>
+ * <Offcanvas.Root placement="top">...</Offcanvas.Root>
+ * <Offcanvas.Root placement="bottom">...</Offcanvas.Root>
  * ```
  *
  * #### Body scrolling
  * ```svelte
- * <Offcanvas bodyScrolling={true}>...</Offcanvas>
+ * <Offcanvas.Root isBodyScrollable={true}>...</Offcanvas.Root>
  * ```
  *
  * #### Static backdrop
  * ```svelte
- * <Offcanvas isStatic={true}>...</Offcanvas>
+ * <Offcanvas.Root useBackdrop="static">...</Offcanvas.Root>
  * ```
  *
  * #### Responsive offcanvas
  * ```svelte
- * <Offcanvas breakpoint="lg">...</Offcanvas>
+ * <Offcanvas.Root showOnBreakpoint="lg">...</Offcanvas.Root>
  * ```
  *
  * ### Props

package/package.json

@@ -1,14 +1,14 @@
 {
     "author": "Wink, Inc.",
     "name": "@winkintel/bootstrap-svelte",
-    "version": "1.0.7",
+    "version": "1.0.10",
     "description": "Bootstrap components for Svelte 5 with TypeScript support.",
     "license": "Apache-2.0",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/WinkIntel/bootstrap-svelte.git"
     },
-    "homepage": "https://github.com/WinkIntel/bootstrap-svelte#readme",
+    "homepage": "https://bootstrap-svelte.vercel.app/",
     "bugs": {
         "url": "https://github.com/WinkIntel/bootstrap-svelte/issues"
     },
@@ -99,10 +99,15 @@
     },
     "keywords": [
         "bootstrap",
+        "bootstrap5",
+        "bootstrap-5",
         "components",
+        "component-library",
         "svelte",
         "svelte5",
+        "sveltekit",
         "typescript",
-        "ui"
+        "ui",
+        "ui-library"
     ]
 }