@winkintel/bootstrap-svelte 1.0.8 → 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.8`, 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/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.8",
+    "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"
     ]
 }