npm - @markout-lang/bootstrap-kit - Versions diffs - 0.2.0 - Mend

@markout-lang/bootstrap-kit 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,331 @@
+# Bootstrap Kit
+Bootstrap 5.3 as Markout components — one part per component, following
+[Bootstrap's own cheatsheet](https://getbootstrap.com/docs/5.3/examples/cheatsheet/).
+```sh
+npm install @markout-lang/bootstrap-kit      # in a project
+npm install -g @markout-lang/bootstrap-kit   # for a bare docroot
+```
+See [where kits are found](../../docs/reference/cli.md#where-kits-are-found):
+a project's own kits are used whole, and a globally installed one is visible
+only to a docroot that has none of its own.
+```html
+<head>
+  <:import src="/npm/@markout-lang/bootstrap-kit/all.htm" />
+</head>
+```
+`/npm/` names the package the fragment came from, and is resolved at compile
+time; everything the kit publishes is then addressed at `/bootstrap-kit`, the
+logical root it declares. See [npm kits](../../docs/design/npm-kits.md) —
+including the other case, a kit vendored into a docroot, which is imported by
+its path instead.
+`all.htm` pulls in everything. Each part imports `base.htm` itself and a file
+is only imported once per page, so importing parts by hand never leaves
+Bootstrap out:
+```html
+<:import src="/npm/@markout-lang/bootstrap-kit/parts/button.htm" />
+<:import src="/npm/@markout-lang/bootstrap-kit/parts/card.htm" />
+```
+Run the showcase — every component below, live — with:
+```sh
+npm run dev
+```
+That serves [the site](../../sites/site/), which is where the pages built on
+this kit live: `/demos/kitchen-sink.html`, every component one after another;
+and `/demos/orbit.html`, an operations dashboard built out of them, which is
+what they look like wired to one page's data.
+The site is a plain Express app rather than markout's `Server`, because Orbit
+is a whole application: it has an API of its own, served from a fake
+in-memory database (`orbit-db.ts`), and markout is the middleware that
+renders its pages. Orbit reads that API with `std-data` from the std kit,
+which fetches while the page renders — so the served console is complete and
+the browser asks for nothing.
+Orbit is four files, which is the shape an application takes:
+`demos/orbit.html` for its state, layout and logic; `demos/orbit/components.htm`
+for the tags it defines on top of the kit's; `demos/orbit/sources.htm` for
+where its data comes from; and `server.ts` for its API. The first is imported,
+the second included — a definition wants to arrive once per page however often
+it is named, and an instance wants to be spliced exactly where it is written,
+because that is where its name resolves.
+`orbit/sources.htm` also shows the token pattern working for an application's
+own fragment: its root carries `:apiBase="/api"`, which lands on whatever
+contains the `<:include>` unless that element declares it, so a page points
+Orbit at another host without the fragment changing. That is the same
+mechanism as `bsCssUrl` below — not something kits get and applications
+don't.
+## Tests
+`packages/cli/test/kits/bootstrap-kit.test.ts`, in two tiers:
+- **compiled**, which is most of it: every part compiles on its own, the
+  showcase compiles and server-renders with nothing reported, and the id
+  wiring is checked mechanically — every `aria-controls`, `aria-labelledby`,
+  `for`, `data-bs-target` and `data-bs-parent` has to name an element that
+  exists. That last one is the kit's whole reason for existing, so it is
+  worth a test that can't be argued with.
+- **live**, in Playwright: the value-driven components actually driven, and
+  a stubbed Bootstrap asserting the plugin calls. Skipped when no browser is
+  installed (`npx playwright install chromium`).
+Nothing reaches the network: the tests set the URL tokens to local files.
+## What is and isn't a component
+A component earns its place by removing something a person would otherwise
+have to keep right by hand:
+- **id wiring.** A modal, an accordion, a carousel, a navbar toggler, a
+  dropdown menu and a tab panel all connect two elements by `id`. Here the id
+  comes from `$id`, which is unique per instance, so a component can appear
+  twice on a page.
+- **accessibility.** `role`, `aria-label`, `aria-current`, `aria-expanded`,
+  `visually-hidden` text: written once, not per use.
+- **repetition.** A nav, a breadcrumb, a table, a dropdown menu, a carousel
+  and a list group are one shape repeated over a list, so their API is that
+  list.
+Typography, spacing, the grid and the colour utilities are **not** components.
+They are already one class each, and a tag that only forwards a class is a
+name to learn for nothing.
+## Conventions
+Every component follows the same rules, so knowing one is close to knowing
+all of them.
+**Parameters for the chrome, the slot for the content.** What a card *has* —
+a title, a footer, an image — is a parameter. What it *contains* is slotted.
+**`:extra` adds classes.** A `class` written at a usage site *replaces* the
+one a definition sets, which is the language's rule and not something this
+kit overrides. So every component takes `:extra` for the utility classes a
+caller wants on top:
+```html
+<bs-alert :variant="warning" :extra="mb-0">Careful</bs-alert>
+```
+**Comments in a tag: `//` for one line, `/* … */` for more.** Both are
+stripped at parse time. A run of `//` lines reads as a stack of fragments;
+one block says it once.
+**Lists are arrays.** `:items`, `:options`, `:columns`, `:rows`, `:slides`.
+The default value of each is the shape it expects — read the definition to
+see it.
+**Callbacks are values, not events.** `:select`, `:check` and `:link` are
+functions the component calls. `:on-click` and friends stay what they are in
+the language: DOM events.
+**A plugin is built on attach and released on detach.** The five components
+that hand their element to Bootstrap's JS — `bs-modal`, `bs-offcanvas`,
+`bs-toast`, `bs-tooltip`, `bs-popover` — do it from `:did-attach` and undo it
+from `:will-detach`, not from `:did-init`/`:will-dispose`. A `:for-data`
+region takes its markup out of the page without its scope going anywhere,
+and a plugin left holding a removed element leaves its backdrop, its popper
+and the page's scroll lock behind.
+**Values are read and written.** `bs-input`, `bs-select`, `bs-check`,
+`bs-range`, `bs-modal`, `bs-offcanvas` and `bs-toast` keep `:value` or
+`:open` in step with what is on screen. Name the instance and read it from
+anywhere:
+```html
+<bs-input :aka="email" :label="Email" :type="email" />
+<bs-button :disabled=${!email.value}>Send</bs-button>
+```
+That holds however deeply the component sits: a `bs-toast :aka="saved"`
+written inside a `bs-toast-container` is still named where you wrote it, so
+`saved.open = true` reaches it from anywhere on the page.
+**Optional regions are `:if`.** A region that exists only when a parameter
+was given is written `:if=${header}`, and nothing inside it evaluates while
+the condition is false — which is what makes `${user.name}` safe to write in
+one. It asks the question JavaScript asks, so an unset parameter and an
+empty string both count as absent:
+```html
+<bs-close :if=${dismissible} />
+<span :if=${!split}>${label}</span>
+```
+`:else-if` and `:else` continue it, on the element immediately after. The
+kit uses them where a component chooses between renderings rather than
+merely omitting one — `bs-nav` between a tab button and a plain link:
+```html
+<button class="nav-link" :if=${toggle} ...>${item.name}</button>
+<a class="nav-link" :else ...>${item.name}</a>
+```
+and `bs-dropdown` between the three things an item can be:
+```html
+<hr class="dropdown-divider" :if=${item.divider}>
+<h6 class="dropdown-header" :else-if=${item.header}>${item.header}</h6>
+<a class="dropdown-item" :else ...>${item.name}</a>
+```
+`:for-data` is for the other case — there is something to show, and the body
+wants it. It is `!= null` rather than truthy, so `0` and `''` stay data, and
+it binds the item as `data`. The kit has no use for it: every optional region
+here renders a parameter it already has a name for.
+Optional parts of a component are parameters, and a named slot where markup
+belongs — `bs-card`'s header is both: `:header` sets the text, and a
+`:slot="header"` replaces it with markup. A `<:slot>` may sit inside a
+`:for-data` but not inside a `:for-each`, which is what makes that possible.
+## Where Bootstrap comes from
+The CDN URLs and their hashes are tokens like any other, so a page points the
+kit at its own copy without forking `base.htm`:
+```html
+<head ::bsCssUrl="/vendor/bootstrap.min.css"
+      ::bsJsUrl="/vendor/bootstrap.bundle.min.js"
+      ::bsCssIntegrity=${null}
+      ::bsJsIntegrity=${null}>
+  <:import src="/bootstrap-kit/all.htm" />
+</head>
+```
+| Token | Default |
+| --- | --- |
+| `bsCssUrl` | jsDelivr, Bootstrap 5.3.8 |
+| `bsJsUrl` | jsDelivr, Bootstrap 5.3.8 |
+| `bsCssIntegrity` | the matching SRI hash |
+| `bsJsIntegrity` | the matching SRI hash |
+Drop the hashes when self-hosting: `crossorigin` follows the hash, and
+neither means anything on a same-origin file.
+Four reasons this is worth having rather than a convenience:
+- **A content security policy** that allows no third-party origin, which is
+  most of them once an app is behind a login.
+- **An offline or air-gapped build**, where a CDN isn't reachable at all.
+- **A vendored, pinned copy**, so the page doesn't depend on a third party
+  staying up or staying honest.
+- **Your own Bootstrap build.** The tokens below only reach what Bootstrap
+  exposes as CSS variables; a design system usually compiles Bootstrap from
+  Sass with its own variables. Pointing `bsCssUrl` at that build is how
+  the kit gets out of the way of it.
+## Theming
+`base.htm` declares the kit's tokens and writes them into Bootstrap's own CSS
+variables, so restyling everything is setting one value at the import site:
+```html
+<head ::bsRadius="1rem" ::bsLinkDecoration="none">
+  <:import src="/bootstrap-kit/all.htm" />
+</head>
+```
+| Token | Default |
+| --- | --- |
+| `bsRadius` | `0.375rem` |
+| `bsRadiusSm` | `0.25rem` |
+| `bsRadiusLg` | `0.5rem` |
+| `bsRadiusPill` | `50rem` |
+| `bsFontSans` | Bootstrap's system stack |
+| `bsLinkDecoration` | `underline` |
+Colour modes are `theme.htm`: an inline pre-paint script so the page never
+flashes the wrong mode, and `<bs-theme-toggle />` to switch it.
+## Components
+Every tag also takes `:extra`. Defaults are in the definitions, which are
+commented.
+### Content
+| Tag | Parameters |
+| --- | --- |
+| `bs-image` | `src` `alt` `fluid` `thumbnail` `rounded` |
+| `bs-figure` | `src` `alt` `caption` `align` |
+| `bs-table` | `columns` `rows` `caption` `striped` `hover` `bordered` `borderless` `small` `variant` `headVariant` `align` `responsive` |
+### Forms
+| Tag | Parameters |
+| --- | --- |
+| `bs-input` | `label` `type` `name` `value` `placeholder` `help` `size` `disabled` `readonly` `required` `floating` `check` `message` |
+| `bs-textarea` | `label` `name` `value` `placeholder` `rows` `help` `disabled` `readonly` `required` `check` `message` |
+| `bs-select` | `label` `name` `options` `value` `placeholder` `help` `size` `multiple` `disabled` `required` `floating` |
+| `bs-check` | `label` `type` (`checkbox`/`radio`/`switch`) `name` `value` `checked` `inline` `reverse` `disabled` `help` |
+| `bs-check-group` | `legend` `type` `options` `value` `inline` `disabled` |
+| `bs-range` | `label` `name` `min` `max` `step` `value` `disabled` `showValue` |
+| `bs-input-group` | `prefix` `suffix` `size` |
+### Components
+| Tag | Parameters |
+| --- | --- |
+| `bs-accordion` | `exclusive` `flush` |
+| `bs-accordion-item` | `title` `open` |
+| `bs-alert` | `variant` `heading` `dismissible` |
+| `bs-badge` | `variant` `pill` `position` |
+| `bs-breadcrumb` | `items` `divider` |
+| `bs-button` | `variant` `outline` `size` `active` `disabled` `type` `toggle` `target` `dismiss` |
+| `bs-link` | `href` `variant` `outline` `size` `active` `disabled` `button` `toggle` `target` |
+| `bs-button-group` | `label` `size` `vertical` |
+| `bs-button-toolbar` | `label` `gap` |
+| `bs-close` | `label` `dismiss` `disabled` |
+| `bs-card` | `title` `subtitle` `header` `footer` `image` `imageAlt` `imageBottom` `variant` `border` `align` `bodyExtra` |
+| `bs-card-group` | `cols` `gap` `attached` |
+| `bs-carousel` | `slides` `controls` `indicators` `captions` `fade` `ride` `interval` `dark` |
+| `bs-collapse` | `name` `open` `horizontal` |
+| `bs-dropdown` | `label` `items` `variant` `outline` `size` `split` `direction` `align` `dark` |
+| `bs-list-group` | `items` `flush` `horizontal` |
+| `bs-modal` | `name` `title` `size` `centered` `scrollable` `fullscreen` `staticBackdrop` `open` |
+| `bs-nav` | `items` `variant` `fill` `justified` `vertical` `align` `toggle` |
+| `bs-tab-content`, `bs-tab-pane` | `name` `active` |
+| `bs-navbar` | `items` `brand` `expand` `container` `sticky` `fixed` `theme` `bg`; slots: default (brand), `end` |
+| `bs-offcanvas` | `name` `title` `placement` `backdrop` `scroll` `responsive` `open` |
+| `bs-pagination` | `current` `pages` `size` `align` `prev` `next` `link` `select` `label` |
+| `bs-placeholder` | `cols` `size` `variant` `animation` |
+| `bs-popover` | `title` `content` `placement` `trigger` `html` |
+| `bs-progress` | `value` `min` `max` `label` `variant` `striped` `animated` `height` `name` |
+| `bs-progress-stacked` | — |
+| `bs-scrollspy` | `target` `offset` `smooth` `height` |
+| `bs-spinner` | `variant` `type` `small` `label` |
+| `bs-theme-toggle` | `variant` `outline` `size` |
+| `bs-toast` | `title` `time` `variant` `open` `autohide` `delay` |
+| `bs-toast-container` | `placement` |
+| `bs-tooltip` | `title` `placement` `html` `trigger` |
+## Notes on the awkward corners
+A few components are shaped by something in the language rather than by
+Bootstrap, and each says so in its own file:
+- **`bs-accordion-item` reads `$host`.** An item needs the id of the
+  accordion it sits in, and slotted markup resolves at the call site, so it
+  cannot reach it by name. `$host` is the instance it was slotted *into* —
+  the one place the kit needs the structural relationship rather than the
+  lexical one. No id is written by anyone.
+- **`bs-pagination` says `:current`, not `:page`.** `page` is already the
+  name of `<html>`'s own scope, so a parameter of that name would resolve to
+  the scope rather than to the number.
+- **`bs-tooltip` and `bs-popover` construct their plugin from a
+  `:handle-`.** They are the only two components Bootstrap doesn't start by
+  itself, and the usual answer — a page-level loop over
+  `[data-bs-toggle="tooltip"]` — misses anything added later. A handler
+  builds one per instance instead, and rebuilds it when the text changes.

package/all.htm ADDED Viewed

@@ -0,0 +1,44 @@
+<!---
+  Everything the kit defines. Import this for a page that uses a bit of
+  everything; import individual parts for one that doesn't.
+  Each part imports `base.htm` itself, and a file is only imported once per
+  page, so picking parts by hand never leaves Bootstrap out.
+-->
+<lib>
+  <:import src="parts/base.htm" />
+  <!--- content -->
+  <:import src="parts/image.htm" />
+  <:import src="parts/table.htm" />
+  <!--- forms -->
+  <:import src="parts/check.htm" />
+  <:import src="parts/input.htm" />
+  <:import src="parts/select.htm" />
+  <!--- components -->
+  <:import src="parts/accordion.htm" />
+  <:import src="parts/alert.htm" />
+  <:import src="parts/badge.htm" />
+  <:import src="parts/breadcrumb.htm" />
+  <:import src="parts/button.htm" />
+  <:import src="parts/card.htm" />
+  <:import src="parts/carousel.htm" />
+  <:import src="parts/collapse.htm" />
+  <:import src="parts/dropdown.htm" />
+  <:import src="parts/list-group.htm" />
+  <:import src="parts/modal.htm" />
+  <:import src="parts/nav.htm" />
+  <:import src="parts/navbar.htm" />
+  <:import src="parts/offcanvas.htm" />
+  <:import src="parts/pagination.htm" />
+  <:import src="parts/placeholder.htm" />
+  <:import src="parts/popover.htm" />
+  <:import src="parts/progress.htm" />
+  <:import src="parts/scrollspy.htm" />
+  <:import src="parts/spinner.htm" />
+  <:import src="parts/theme.htm" />
+  <:import src="parts/toast.htm" />
+  <:import src="parts/tooltip.htm" />
+</lib>

package/package.json ADDED Viewed

@@ -0,0 +1,33 @@
+{
+  "name": "@markout-lang/bootstrap-kit",
+  "version": "0.2.0",
+  "description": "Bootstrap 5.3 as Markout components: one part per component, with the id wiring, the ARIA attributes and the repetition written once",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fcapolini/markout.git",
+    "directory": "kits/bootstrap-kit"
+  },
+  "bugs": {
+    "url": "https://github.com/fcapolini/markout/issues"
+  },
+  "homepage": "https://markout.dev",
+  "markout": {
+    "root": "/bootstrap-kit"
+  },
+  "keywords": [
+    "markout",
+    "markout-kit",
+    "bootstrap",
+    "components",
+    "html"
+  ],
+  "author": "Fabrizio Capolini",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "all.htm",
+    "parts"
+  ]
+}

package/parts/accordion.htm ADDED Viewed

@@ -0,0 +1,81 @@
+<lib>
+  <:import src="base.htm" />
+  <!---
+    An accordion, in two tags, because its panels hold arbitrary markup and
+    markup belongs in a slot rather than in an array.
+      <bs-accordion>
+        <bs-accordion-item :title="First" :open>…</bs-accordion-item>
+        <bs-accordion-item :title="Second">…</bs-accordion-item>
+      </bs-accordion>
+    The item needs one thing from the accordion — the id Bootstrap closes the
+    others by — and it asks for it with `$host`, which is the enclosing
+    instance rather than the scope the markup was written in. So neither tag
+    carries an id the caller had to invent, and the whole coupling is one
+    expression in the definition instead of a back-reference at every usage.
+    An item written outside an accordion has no `$host` and simply opens and
+    closes on its own, which is Bootstrap's "always open" behaviour reached
+    by itself rather than by remembering to leave an attribute off. Setting
+    `:exclusive=${false}` on the accordion asks for the same thing.
+    Every id here is derived from `$id`, so two accordions on a page cannot
+    collide and nothing has to be named.
+  -->
+  <:define tag="bs-accordion:div"
+    class="accordion ${extra ?? ''}"
+    // parameters
+    :extra=${null}      // extra classes for this instance
+    :exclusive=${true}  // one open panel at a time
+    :flush=${false}
+    /*
+      private: the id the items point at. Owned here rather than
+      rebuilt there, so the two can't drift apart
+    */
+    :_id=${`bs-accordion-${$id}`}
+    id=${_id}
+    :class-accordion-flush=${flush}
+  >
+    <:slot />
+  </:define>
+  <:define tag="bs-accordion-item:div"
+    class="accordion-item ${extra ?? ''}"
+    // parameters
+    :extra=${null}      // extra classes for this instance
+    :title=${''}
+    :open=${false}
+    // private: the accordion this item was slotted into, if any
+    :_parent=${$host && $host.exclusive ? $host._id : null}
+    :_id=${`bs-accordion-item-${$id}`}
+    :_headingId=${`bs-accordion-heading-${$id}`}
+  >
+    <h2 class="accordion-header" id=${_headingId}>
+      <button class="accordion-button"
+        type="button"
+        :class-collapsed=${!open}
+        data-bs-toggle="collapse"
+        data-bs-target="#${_id}"
+        aria-expanded=${open ? 'true' : 'false'}
+        aria-controls=${_id}>${title}</button>
+    </h2>
+    <div class="accordion-collapse collapse"
+      id=${_id}
+      :class-show=${open}
+      aria-labelledby=${_headingId}
+      data-bs-parent=${_parent ? `#${_parent}` : null}>
+      <div class="accordion-body">
+        <:slot />
+      </div>
+    </div>
+  </:define>
+</lib>

package/parts/alert.htm ADDED Viewed

@@ -0,0 +1,48 @@
+<lib>
+  <:import src="base.htm" />
+  <:import src="button.htm" />
+  <!---
+    An alert, with the two parts that are easy to get wrong done for you:
+    `role="alert"` so it is announced, and the `fade show` + close button
+    combination that a dismissible one needs to animate out.
+    `:heading` and the dismiss button are optional REGIONS, and both are
+    `:if`: there is something to decide, not something to show. Truthiness
+    is what is wanted of a heading — `:heading=""` is a heading nobody
+    asked for, and `:for-data`'s `!= null` would have rendered the empty
+    `<h4>` around it.
+    The body is a `<:slot>` and the heading a parameter because that is
+    what each of them is — markup in one case, text in the other. It used
+    to be forced as well: an optional region was a `:for-each` over a
+    one-or-zero list, and a `<:slot>` cannot sit inside one of those.
+  -->
+  <:define tag="bs-alert:div"
+    role="alert"
+    // parameters
+    :extra=${null}      // extra classes for this instance
+    :variant=${'primary'}
+    :heading=${null}
+    :dismissible=${false}
+    // private
+    :_class=${['alert', `alert-${variant}`, extra].filter(s => s).join(' ')}
+    class=${_class}
+    :class-alert-dismissible=${dismissible}
+    :class-fade=${dismissible}
+    :class-show=${dismissible}
+  >
+    <h4 class="alert-heading"
+      :if=${heading}>${heading}</h4>
+    <:slot />
+    <bs-close :dismiss="alert"
+      :label="Close alert"
+      :if=${dismissible} />
+  </:define>
+</lib>

package/parts/badge.htm ADDED Viewed

@@ -0,0 +1,33 @@
+<lib>
+  <:import src="base.htm" />
+  <!---
+    `text-bg-*` rather than `bg-*`: it sets the foreground colour along with
+    the background, which is the pairing that stays readable in both colour
+    modes.
+  -->
+  <:define tag="bs-badge:span"
+    // parameters
+    :extra=${null}      // extra classes for this instance
+    :variant=${'primary'}
+    :pill=${false}
+    :position=${null}    // 'top-end' | 'bottom-end' — for a badge on a button
+    // private
+    :_class=${[
+      'badge',
+      `text-bg-${variant}`,
+      pill ? 'rounded-pill' : '',
+      position ? 'position-absolute translate-middle' : '',
+      position === 'top-end' ? 'top-0 start-100' : '',
+      position === 'bottom-end' ? 'top-100 start-100' : '',
+      extra,
+    ].filter(s => s).join(' ')}
+    class=${_class}
+  >
+    <:slot />
+  </:define>
+</lib>

package/parts/base.htm ADDED Viewed

@@ -0,0 +1,71 @@
+<!---
+  The one part every other part imports. It brings in Bootstrap itself and
+  declares the kit's design tokens.
+  A token is a value rather than a per-component CSS override: it is written
+  once into Bootstrap's own CSS variables below, so restyling the kit means
+  setting one value at the import site instead of patching each component:
+    <head ::bsRadius="1rem">
+      <:import src="/bootstrap-kit/all.htm" />
+    </head>
+  Where Bootstrap itself comes from is a token too. A page under a content
+  security policy that allows no third party, an offline build, or a vendored
+  copy pinned on purpose sets the two URLs and drops the hashes rather than
+  forking this file — and so does a page serving its own Sass build, which is
+  how a design system gets past what the tokens below can reach:
+    <head ::bsCssUrl="/vendor/bootstrap.min.css"
+          ::bsJsUrl="/vendor/bootstrap.bundle.min.js"
+          ::bsCssIntegrity=${null}
+          ::bsJsIntegrity=${null}>
+-->
+<lib
+  // where Bootstrap comes from
+  ::bsCssUrl=${'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css'}
+  ::bsCssIntegrity=${'sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB'}
+  ::bsJsUrl=${'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js'}
+  ::bsJsIntegrity=${'sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI'}
+  // tokens
+  ::bsRadius=${'0.375rem'}
+  ::bsRadiusSm=${'0.25rem'}
+  ::bsRadiusLg=${'0.5rem'}
+  ::bsRadiusPill=${'50rem'}
+  ::bsFontSans=${'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'}
+  ::bsLinkDecoration=${'underline'}
+>
+  <meta charset="utf-8">
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1">
+  <!--- `crossorigin` follows the hash: it is what makes one checkable, and
+       means nothing on a same-origin file -->
+  <link href=${bsCssUrl}
+    rel="stylesheet"
+    integrity=${bsCssIntegrity}
+    crossorigin=${bsCssIntegrity ? 'anonymous' : null}>
+  <!---
+    Deliberately not `async`. The components that need Bootstrap's JS
+    (tooltips, popovers, toasts) create their plugin instance from a
+    `:handle-`, which runs the moment Markout hydrates; loading the bundle
+    synchronously here is what guarantees `window.bootstrap` already exists
+    by then. Everything driven by `data-bs-*` alone would be fine either way.
+  -->
+  <script src=${bsJsUrl}
+    integrity=${bsJsIntegrity}
+    crossorigin=${bsJsIntegrity ? 'anonymous' : null}></script>
+  <style>
+    :root {
+      --bs-border-radius: ${bsRadius};
+      --bs-border-radius-sm: ${bsRadiusSm};
+      --bs-border-radius-lg: ${bsRadiusLg};
+      --bs-border-radius-pill: ${bsRadiusPill};
+      --bs-font-sans-serif: ${bsFontSans};
+      --bs-link-decoration: ${bsLinkDecoration};
+    }
+  </style>
+</lib>