@winkintel/bootstrap-svelte 1.0.8 → 1.0.11

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, and `pnpm indexnow` pushes changed URLs to Bing and the other [IndexNow](https://www.indexnow.org/) engines after a deploy.
+- 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.8`, but feedback from Svelte developers is still very welcome. Useful feedback includes:
+This package is published as `1.0.11`, but feedback from Svelte developers is still very welcome. Useful feedback includes:
 
 - Component API ergonomics
 - Svelte 5 idioms and runes compatibility

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-title.svelte

@@ -22,6 +22,7 @@ Title component for the Modal.Header.
 - `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();
@@ -29,14 +30,19 @@ let { children, class: classValues, elementRef = $bindable(null), id = `modal-ti
 let elementType = $derived(`h${level}`);
 let classes = $derived(uniqueClsx('modal-title', classValues));
 const rootState = getOptionalModalRootState();
+// Stable identity for this title's registry entry, so an id change updates
+// the entry in place and keeps its position among sibling titles...
+const titleKey = Symbol('modal-title');
 $effect(() => {
-    const registeredId = id;
-    if (!registeredId)
-        return;
-    rootState?.registerTitleId(registeredId);
-    return () => {
-        rootState?.unregisterTitleId(registeredId);
-    };
+    if (id) {
+        rootState?.registerTitleId(titleKey, id);
+    }
+    else {
+        rootState?.unregisterTitleId(titleKey);
+    }
+});
+onDestroy(() => {
+    rootState?.unregisterTitleId(titleKey);
 });
 </script>
 

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/Modal/modal.svelte.js

@@ -8,6 +8,10 @@ export class ModalRootState {
     // Private
     #isShown = $state(false);
     #useBackdrop = $state(true);
+    // Plain (non-reactive) ordered registry of mounted Modal.Title components,
+    // keyed by a stable per-instance token so an id change updates the entry in
+    // place instead of moving it. The first registered title labels the dialog...
+    #titles = [];
     titleId = $state(undefined);
     constructor(props) {
         this.props = props;
@@ -30,13 +34,23 @@ export class ModalRootState {
     toggleIsShown() {
         this.#isShown = !this.#isShown;
     }
-    registerTitleId(id) {
-        this.titleId ??= id;
-    }
-    unregisterTitleId(id) {
-        if (this.titleId === id) {
-            this.titleId = undefined;
+    // Both methods are called from Modal.Title. They must never read `titleId`
+    // (reactive state) there, or the title's `$effect` would depend on the state
+    // it writes and Svelte >= 5.56.5 loops with "Maximum update depth exceeded".
+    // The registry is a plain array, and `titleId` is only written...
+    registerTitleId(key, id) {
+        const entry = this.#titles.find((title) => title.key === key);
+        if (entry) {
+            entry.id = id;
+        }
+        else {
+            this.#titles.push({ key, id });
         }
+        this.titleId = this.#titles[0]?.id;
+    }
+    unregisterTitleId(key) {
+        this.#titles = this.#titles.filter((title) => title.key !== key);
+        this.titleId = this.#titles[0]?.id;
     }
 }
 /**

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.8",
+    "version": "1.0.11",
     "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"
     },
@@ -26,6 +26,7 @@
         "doctor": "svelte-doctor check",
         "format": "prettier --write --ignore-path=.prettierignore $(git diff --name-only --diff-filter d --relative . && git ls-files --others --exclude-standard | sed \"s|^$(git rev-parse --show-prefix)||\")",
         "format-all": "prettier --write --ignore-path=.prettierignore ./src",
+        "indexnow": "node scripts/indexnow.mjs",
         "lint": "prettier --check ./src && eslint ./src",
         "ncu:check": "ncu --target minor && ncu --target minor --cooldown 0d --filter \"@sveltejs/adapter-static,@sveltejs/kit,@sveltejs/vite-plugin-svelte,svelte,svelte-check,svelte-preprocess\"",
         "ncu:upgrade": "ncu --target minor -u && ncu --target minor --cooldown 0d -u --filter \"@sveltejs/adapter-static,@sveltejs/kit,@sveltejs/vite-plugin-svelte,svelte,svelte-check,svelte-preprocess\" && pnpm install",
@@ -87,7 +88,7 @@
         "publint": "~0.3.21",
         "rimraf": "~6.1.3",
         "sass": "1.77.6",
-        "svelte": "~5.56.4",
+        "svelte": "~5.57.0",
         "svelte-check": "~4.7.2",
         "svelte-doctor": "~0.3.1",
         "svelte-highlight": "~7.14.1",
@@ -99,10 +100,15 @@
     },
     "keywords": [
         "bootstrap",
+        "bootstrap5",
+        "bootstrap-5",
         "components",
+        "component-library",
         "svelte",
         "svelte5",
+        "sveltekit",
         "typescript",
-        "ui"
+        "ui",
+        "ui-library"
     ]
 }