npm - @markout-lang/bootstrap-kit - Versions diffs - 0.2.2 → 0.3.0 - Mend

@markout-lang/bootstrap-kit 0.2.2 → 0.3.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 (31) hide show

package/README.md CHANGED Viewed

@@ -65,24 +65,24 @@ 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
+**`::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
+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>
+<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`.
+**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
+**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.
@@ -95,13 +95,13 @@ 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
+`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>
+<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"`
@@ -112,8 +112,8 @@ written inside a `bs-toast-container` is still named where you wrote it, so
 and does it pass `check`? -- which is what a submit button needs:
 ```html
-<bs-input :aka="email" :label="Email" :check=${v => v.includes('@')} />
-<bs-button :disabled=${!email.valid}>Send</bs-button>
+<bs-input :aka="email" ::label="Email" ::check=${v => v.includes('@')} />
+<bs-button ::disabled=${!email.valid}>Send</bs-button>
 ```
 It is not the negation of the error state. An empty field is not marked
@@ -155,7 +155,7 @@ 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
+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.
@@ -165,10 +165,10 @@ 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}>
+<head :const-bsCssUrl="/vendor/bootstrap.min.css"
+      :const-bsJsUrl="/vendor/bootstrap.bundle.min.js"
+      :const-bsCssIntegrity=${null}
+      :const-bsJsIntegrity=${null}>
   <:import src="/bootstrap-kit/all.htm" />
 </head>
 ```
@@ -201,7 +201,7 @@ Four reasons this is worth having rather than a convenience:
 variables, so restyling everything is setting one value at the import site:
 ```html
-<head ::bsRadius="1rem" ::bsLinkDecoration="none">
+<head :const-bsRadius="1rem" :const-bsLinkDecoration="none">
   <:import src="/bootstrap-kit/all.htm" />
 </head>
 ```
@@ -220,7 +220,7 @@ flashes the wrong mode, and `<bs-theme-toggle />` to switch it.
 ## Components
-Every tag also takes `:extra`. Defaults are in the definitions, which are
+Every tag also takes `::extra`. Defaults are in the definitions, which are
 commented.
 ### Content
@@ -293,7 +293,7 @@ Bootstrap, and each says so in its own file:
   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
+- **`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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@markout-lang/bootstrap-kit",
-  "version": "0.2.2",
+  "version": "0.3.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",
@@ -11,6 +11,9 @@
     "url": "https://github.com/fcapolini/markout/issues"
   },
   "homepage": "https://markout.dev",
+  "peerDependencies": {
+    "@markout-lang/core": "^0.5.0"
+  },
   "markout": {
     "root": "/bootstrap-kit"
   },

package/parts/accordion.htm CHANGED Viewed

@@ -6,8 +6,8 @@
     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-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
@@ -28,9 +28,9 @@
     class="accordion ${extra ?? ''}"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :exclusive=${true}  // one open panel at a time
-    :flush=${false}
+    ::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
@@ -48,9 +48,9 @@
     class="accordion-item ${extra ?? ''}"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :title=${''}
-    :open=${false}
+    ::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}

package/parts/alert.htm CHANGED Viewed

@@ -22,10 +22,10 @@
     role="alert"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :variant=${'primary'}
-    :heading=${null}
-    :dismissible=${false}
+    ::extra=${null}      // extra classes for this instance
+    ::variant=${'primary'}
+    ::heading=${null}
+    ::dismissible=${false}
     // private
     :_class=${['alert', `alert-${variant}`, extra].filter(s => s).join(' ')}
@@ -40,8 +40,8 @@
     <:slot />
-    <bs-close :dismiss="alert"
-      :label="Close alert"
+    <bs-close ::dismiss="alert"
+      ::label="Close alert"
       :if=${dismissible} />
   </:define>

package/parts/badge.htm CHANGED Viewed

@@ -9,10 +9,10 @@
   <: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
+    ::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=${[

package/parts/base.htm CHANGED Viewed

@@ -6,7 +6,7 @@
   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">
+    <head :const-bsRadius="1rem">
       <:import src="/bootstrap-kit/all.htm" />
     </head>
@@ -16,25 +16,25 @@
   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}>
+    <head :const-bsCssUrl="/vendor/bootstrap.min.css"
+          :const-bsJsUrl="/vendor/bootstrap.bundle.min.js"
+          :const-bsCssIntegrity=${null}
+          :const-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'}
+  :const-bsCssUrl=${'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css'}
+  :const-bsCssIntegrity=${'sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB'}
+  :const-bsJsUrl=${'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js'}
+  :const-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'}
+  :const-bsRadius=${'0.375rem'}
+  :const-bsRadiusSm=${'0.25rem'}
+  :const-bsRadiusLg=${'0.5rem'}
+  :const-bsRadiusPill=${'50rem'}
+  :const-bsFontSans=${'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'}
+  :const-bsLinkDecoration=${'underline'}
 >
   <meta charset="utf-8">
   <meta name="viewport"

package/parts/breadcrumb.htm CHANGED Viewed

@@ -15,13 +15,13 @@
     class=${extra}
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :items=${[
+    ::extra=${null}      // extra classes for this instance
+    ::items=${[
       { name: 'Home', link: '#' },
       { name: 'Library', link: '#' },
       { name: 'Data' },
     ]}
-    :divider=${null}
+    ::divider=${null}
     /*
       Bootstrap reads the separator from a CSS custom property, and

package/parts/button.htm CHANGED Viewed

@@ -9,8 +9,8 @@
     a modal, an offcanvas or a collapse is this same tag rather than a
     component of its own:
-      <bs-button :toggle="modal" :target="#signup">Sign up</bs-button>
-      <bs-button :dismiss="modal" :variant="secondary">Close</bs-button>
+      <bs-button ::toggle="modal" ::target="#signup">Sign up</bs-button>
+      <bs-button ::dismiss="modal" ::variant="secondary">Close</bs-button>
     Note the two spellings of "conditional attribute" used throughout the kit:
     a plain `name=${expr}` sets a VALUE and removes the attribute when the
@@ -20,16 +20,16 @@
   <:define tag="bs-button:button"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :variant=${'primary'}
-    :outline=${false}
-    :size=${null}
-    :active=${false}
-    :disabled=${false}
-    :type=${'button'}
-    :toggle=${null}
-    :target=${null}
-    :dismiss=${null}
+    ::extra=${null}      // extra classes for this instance
+    ::variant=${'primary'}
+    ::outline=${false}
+    ::size=${null}
+    ::active=${false}
+    ::disabled=${false}
+    ::type=${'button'}
+    ::toggle=${null}
+    ::target=${null}
+    ::dismiss=${null}
     // private
     :_class=${[
@@ -59,16 +59,16 @@
   <:define tag="bs-link:a"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :href=${'#'}
-    :variant=${null}
-    :outline=${false}
-    :size=${null}
-    :active=${false}
-    :disabled=${false}
-    :button=${false}
-    :toggle=${null}
-    :target=${null}
+    ::extra=${null}      // extra classes for this instance
+    ::href=${'#'}
+    ::variant=${null}
+    ::outline=${false}
+    ::size=${null}
+    ::active=${false}
+    ::disabled=${false}
+    ::button=${false}
+    ::toggle=${null}
+    ::target=${null}
     // private
     :_class=${[
@@ -99,10 +99,10 @@
   <:define tag="bs-button-group:div"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :label=${'Button group'}
-    :size=${null}
-    :vertical=${false}
+    ::extra=${null}      // extra classes for this instance
+    ::label=${'Button group'}
+    ::size=${null}
+    ::vertical=${false}
     // private
     :_class=${[
@@ -127,9 +127,9 @@
     role="toolbar"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :label=${'Toolbar'}
-    :gap=${2}
+    ::extra=${null}      // extra classes for this instance
+    ::label=${'Toolbar'}
+    ::gap=${2}
     aria-label=${label}
     :class-gap-1=${gap === 1}
@@ -149,10 +149,10 @@
     class="btn-close ${extra ?? ''}"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :label=${'Close'}
-    :dismiss=${null}
-    :disabled=${false}
+    ::extra=${null}      // extra classes for this instance
+    ::label=${'Close'}
+    ::dismiss=${null}
+    ::disabled=${false}
     aria-label=${label}
     :attr-disabled=${disabled}

package/parts/card.htm CHANGED Viewed

@@ -7,7 +7,7 @@
     given, which is the kit's general shape — a caller writes what the card
     HAS, not the markup that produces it.
-      <bs-card :title="Card title" :footer="2 days ago">
+      <bs-card ::title="Card title" ::footer="2 days ago">
         <p class="card-text">Some quick example text.</p>
       </bs-card>
@@ -19,18 +19,18 @@
   <:define tag="bs-card:div"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :bodyExtra=${null}  // extra classes for the body: `p-0`, `p-4`, `d-flex`
-    :title=${null}
-    :subtitle=${null}
-    :header=${null}
-    :footer=${null}
-    :image=${null}
-    :imageAlt=${''}
-    :imageBottom=${false}
-    :variant=${null}       // colours the whole card, e.g. 'primary'
-    :border=${null}        // colours only the border
-    :align=${null}         // 'center' | 'end'
+    ::extra=${null}      // extra classes for this instance
+    ::bodyExtra=${null}  // extra classes for the body: `p-0`, `p-4`, `d-flex`
+    ::title=${null}
+    ::subtitle=${null}
+    ::header=${null}
+    ::footer=${null}
+    ::image=${null}
+    ::imageAlt=${''}
+    ::imageBottom=${false}
+    ::variant=${null}       // colours the whole card, e.g. 'primary'
+    ::border=${null}        // colours only the border
+    ::align=${null}         // 'center' | 'end'
     // private
     :_class=${[
@@ -84,10 +84,10 @@
   <:define tag="bs-card-group:div"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :cols=${3}
-    :gap=${4}
-    :attached=${false}     // a seamless strip instead of separate cards
+    ::extra=${null}      // extra classes for this instance
+    ::cols=${3}
+    ::gap=${4}
+    ::attached=${false}     // a seamless strip instead of separate cards
     // private
     :_class=${attached

package/parts/carousel.htm CHANGED Viewed

@@ -13,15 +13,15 @@
     class="carousel slide ${extra ?? ''}"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :slides=${[]}
-    :controls=${true}
-    :indicators=${true}
-    :captions=${true}
-    :fade=${false}
-    :ride=${true}
-    :interval=${5000}
-    :dark=${false}
+    ::extra=${null}      // extra classes for this instance
+    ::slides=${[]}
+    ::controls=${true}
+    ::indicators=${true}
+    ::captions=${true}
+    ::fade=${false}
+    ::ride=${true}
+    ::interval=${5000}
+    ::dark=${false}
     // private
     :_id=${`bs-carousel-${$id}`}

package/parts/check.htm CHANGED Viewed

@@ -12,16 +12,16 @@
   <:define tag="bs-check:div"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :label=${null}
-    :type=${'checkbox'}   // 'checkbox' | 'radio' | 'switch'
-    :name=${null}
-    :value=${null}
-    :checked=${false}
-    :inline=${false}
-    :reverse=${false}
-    :disabled=${false}
-    :help=${null}
+    ::extra=${null}      // extra classes for this instance
+    ::label=${null}
+    ::type=${'checkbox'}   // 'checkbox' | 'radio' | 'switch'
+    ::name=${null}
+    ::value=${null}
+    ::checked=${false}
+    ::inline=${false}
+    ::reverse=${false}
+    ::disabled=${false}
+    ::help=${null}
     // private
     :_id=${`bs-check-${$id}`}
@@ -62,13 +62,13 @@
     role="group"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :legend=${null}
-    :type=${'radio'}
-    :options=${[]}
-    :value=${null}
-    :inline=${false}
-    :disabled=${false}
+    ::extra=${null}      // extra classes for this instance
+    ::legend=${null}
+    ::type=${'radio'}
+    ::options=${[]}
+    ::value=${null}
+    ::inline=${false}
+    ::disabled=${false}
     // private
     :_name=${`bs-check-group-${$id}`}
@@ -113,15 +113,15 @@
     class="mb-3 ${extra ?? ''}"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :label=${null}
-    :name=${null}
-    :min=${0}
-    :max=${100}
-    :step=${1}
-    :value=${50}
-    :disabled=${false}
-    :showValue=${false}
+    ::extra=${null}      // extra classes for this instance
+    ::label=${null}
+    ::name=${null}
+    ::min=${0}
+    ::max=${100}
+    ::step=${1}
+    ::value=${50}
+    ::disabled=${false}
+    ::showValue=${false}
     // private
     :_id=${`bs-range-${$id}`}

package/parts/collapse.htm CHANGED Viewed

@@ -6,8 +6,8 @@
     anything can open a collapse, and often several things do — so the region
     takes a `:name` and a `bs-button` points at it:
-      <bs-button :toggle="collapse" :target="#details">Details</bs-button>
-      <bs-collapse :name="details">…</bs-collapse>
+      <bs-button ::toggle="collapse" ::target="#details">Details</bs-button>
+      <bs-collapse ::name="details">…</bs-collapse>
     `:horizontal` collapses width instead of height, in which case Bootstrap
     needs the content to have a width of its own.
@@ -16,10 +16,10 @@
     class="collapse ${extra ?? ''}"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :name=${null}
-    :open=${false}
-    :horizontal=${false}
+    ::extra=${null}      // extra classes for this instance
+    ::name=${null}
+    ::open=${false}
+    ::horizontal=${false}
     id=${name}
     :class-show=${open}

package/parts/dropdown.htm CHANGED Viewed

@@ -15,21 +15,21 @@
   <:define tag="bs-dropdown:div"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :label=${'Dropdown'}
-    :items=${[
+    ::extra=${null}      // extra classes for this instance
+    ::label=${'Dropdown'}
+    ::items=${[
       { name: 'Action', link: '#' },
       { name: 'Another action', link: '#' },
       { divider: true },
       { name: 'Something else here', link: '#' },
     ]}
-    :variant=${'primary'}
-    :outline=${false}
-    :size=${null}
-    :split=${false}
-    :direction=${'down'}   // 'down' | 'up' | 'start' | 'end'
-    :align=${'start'}      // 'start' | 'end'
-    :dark=${false}
+    ::variant=${'primary'}
+    ::outline=${false}
+    ::size=${null}
+    ::split=${false}
+    ::direction=${'down'}   // 'down' | 'up' | 'start' | 'end'
+    ::align=${'start'}      // 'start' | 'end'
+    ::dark=${false}
     // private
     :_id=${`bs-dropdown-${$id}`}

package/parts/image.htm CHANGED Viewed

@@ -8,12 +8,12 @@
   <:define tag="bs-image:img"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :src=${null}
-    :alt=${''}
-    :fluid=${true}
-    :thumbnail=${false}
-    :rounded=${false}
+    ::extra=${null}      // extra classes for this instance
+    ::src=${null}
+    ::alt=${''}
+    ::fluid=${true}
+    ::thumbnail=${false}
+    ::rounded=${false}
     class=${extra}
     src=${src}
@@ -28,11 +28,11 @@
     class="figure ${extra ?? ''}"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :src=${null}
-    :alt=${''}
-    :caption=${null}
-    :align=${null}      // 'center' | 'end'
+    ::extra=${null}      // extra classes for this instance
+    ::src=${null}
+    ::alt=${''}
+    ::caption=${null}
+    ::align=${null}      // 'center' | 'end'
   >
     <img class="figure-img img-fluid rounded"
       src=${src}

package/parts/input.htm CHANGED Viewed

@@ -9,8 +9,8 @@
     typed, so a page can name the instance and read it from anywhere else on
     the page —
-      <bs-input :aka="email" :label="Email" :type="email" />
-      <bs-button :disabled=${!email.value}>Send</bs-button>
+      <bs-input :aka="email" ::label="Email" ::type="email" />
+      <bs-button ::disabled=${!email.value}>Send</bs-button>
     — which is `:aka` doing what it does everywhere else, not a mechanism
     special to forms.
@@ -21,8 +21,8 @@
     `:valid` is the other side of that, and what a form's own controls read —
-      <bs-input :aka="email" :label="Email" :check=${v => v.includes('@')} />
-      <bs-button :disabled=${!email.valid}>Send</bs-button>
+      <bs-input :aka="email" ::label="Email" ::check=${v => v.includes('@')} />
+      <bs-button ::disabled=${!email.valid}>Send</bs-button>
     It is deliberately NOT the negation of the error state, which is the one
     thing about it worth knowing. An untouched field is not wrong — that is
@@ -38,20 +38,20 @@
     class="mb-3 ${extra ?? ''}"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :label=${null}
-    :type=${'text'}
-    :name=${null}
-    :value=${''}
-    :placeholder=${''}
-    :help=${null}
-    :size=${null}            // 'sm' | 'lg'
-    :disabled=${false}
-    :readonly=${false}
-    :required=${false}
-    :floating=${false}
-    :check=${(v) => true}
-    :message=${'Please check this value.'}
+    ::extra=${null}      // extra classes for this instance
+    ::label=${null}
+    ::type=${'text'}
+    ::name=${null}
+    ::value=${''}
+    ::placeholder=${''}
+    ::help=${null}
+    ::size=${null}            // 'sm' | 'lg'
+    ::disabled=${false}
+    ::readonly=${false}
+    ::required=${false}
+    ::floating=${false}
+    ::check=${(v) => true}
+    ::message=${'Please check this value.'}
     // private
     :_id=${`bs-input-${$id}`}
@@ -119,18 +119,18 @@
     class="mb-3 ${extra ?? ''}"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :label=${null}
-    :name=${null}
-    :value=${''}
-    :placeholder=${''}
-    :rows=${3}
-    :help=${null}
-    :disabled=${false}
-    :readonly=${false}
-    :required=${false}
-    :check=${(v) => true}
-    :message=${'Please check this value.'}
+    ::extra=${null}      // extra classes for this instance
+    ::label=${null}
+    ::name=${null}
+    ::value=${''}
+    ::placeholder=${''}
+    ::rows=${3}
+    ::help=${null}
+    ::disabled=${false}
+    ::readonly=${false}
+    ::required=${false}
+    ::check=${(v) => true}
+    ::message=${'Please check this value.'}
     // private
     :_id=${`bs-textarea-${$id}`}
@@ -172,10 +172,10 @@
   <:define tag="bs-input-group:div"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :prefix=${null}
-    :suffix=${null}
-    :size=${null}
+    ::extra=${null}      // extra classes for this instance
+    ::prefix=${null}
+    ::suffix=${null}
+    ::size=${null}
     // private
     :_class=${['input-group', size ? `input-group-${size}` : '', extra]

package/parts/list-group.htm CHANGED Viewed

@@ -14,14 +14,14 @@
   <:define tag="bs-list-group:div"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :items=${[
+    ::extra=${null}      // extra classes for this instance
+    ::items=${[
       { name: 'An item', active: true },
       { name: 'A second item' },
       { name: 'A disabled item', disabled: true },
     ]}
-    :flush=${false}
-    :horizontal=${false}
+    ::flush=${false}
+    ::horizontal=${false}
     // private
     :_class=${[
@@ -49,8 +49,8 @@
           :if=${item.text}>${item.text}</span>
       </span>
-      <bs-badge :variant=${item.badge?.variant ?? 'secondary'}
-        :pill
+      <bs-badge ::variant=${item.badge?.variant ?? 'secondary'}
+        ::pill
         :if=${item.badge}>${item.badge?.name ?? item.badge}</bs-badge>
     </a>
   </:define>

package/parts/modal.htm CHANGED Viewed

@@ -5,8 +5,8 @@
   <!---
     A modal. Opened the Bootstrap way, by a trigger naming it:
-      <bs-button :toggle="modal" :target="#signup">Sign up</bs-button>
-      <bs-modal :name="signup" :title="Sign up">…</bs-modal>
+      <bs-button ::toggle="modal" ::target="#signup">Sign up</bs-button>
+      <bs-modal ::name="signup" ::title="Sign up">…</bs-modal>
     The footer is a named slot with a working default, so a modal that only
     needs a Close button doesn't have to say so. That is also why it isn't an
@@ -23,15 +23,15 @@
     tabindex="-1"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :name=${null}
-    :title=${''}
-    :size=${null}          // 'sm' | 'lg' | 'xl'
-    :centered=${false}
-    :scrollable=${false}
-    :fullscreen=${null}    // true | 'sm-down' | 'md-down' | ...
-    :staticBackdrop=${false}
-    :open=${false}
+    ::extra=${null}      // extra classes for this instance
+    ::name=${null}
+    ::title=${''}
+    ::size=${null}          // 'sm' | 'lg' | 'xl'
+    ::centered=${false}
+    ::scrollable=${false}
+    ::fullscreen=${null}    // true | 'sm-down' | 'md-down' | ...
+    ::staticBackdrop=${false}
+    ::open=${false}
     // private
     :_labelId=${`bs-modal-title-${$id}`}
@@ -100,7 +100,7 @@
       <div class="modal-content">
         <div class="modal-header">
           <h1 class="modal-title fs-5" id=${_labelId}>${title}</h1>
-          <bs-close :dismiss="modal" />
+          <bs-close ::dismiss="modal" />
         </div>
         <div class="modal-body">
@@ -109,7 +109,7 @@
         <div class="modal-footer">
           <:slot name="footer">
-            <bs-button :variant="secondary" :dismiss="modal">Close</bs-button>
+            <bs-button ::variant="secondary" ::dismiss="modal">Close</bs-button>
           </:slot>
         </div>
       </div>

package/parts/nav.htm CHANGED Viewed

@@ -12,18 +12,18 @@
   <:define tag="bs-nav:ul"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :items=${[
+    ::extra=${null}      // extra classes for this instance
+    ::items=${[
       { name: 'Active', link: '#', active: true },
       { name: 'Link', link: '#' },
       { name: 'Disabled', link: '#', disabled: true },
     ]}
-    :variant=${null}      // 'tabs' | 'pills' | 'underline'
-    :fill=${false}
-    :justified=${false}
-    :vertical=${false}
-    :align=${'start'}     // 'start' | 'center' | 'end'
-    :toggle=${null}       // 'tab' | 'pill' — for tabbed panes
+    ::variant=${null}      // 'tabs' | 'pills' | 'underline'
+    ::fill=${false}
+    ::justified=${false}
+    ::vertical=${false}
+    ::align=${'start'}     // 'start' | 'center' | 'end'
+    ::toggle=${null}       // 'tab' | 'pill' — for tabbed panes
     // private
     :_class=${[
@@ -74,9 +74,9 @@
     role="tabpanel"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :name=${null}
-    :active=${false}
+    ::extra=${null}      // extra classes for this instance
+    ::name=${null}
+    ::active=${false}
     id=${name}
     :class-show=${active}

package/parts/navbar.htm CHANGED Viewed

@@ -17,19 +17,19 @@
   <:define tag="bs-navbar:nav"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :items=${[
+    ::extra=${null}      // extra classes for this instance
+    ::items=${[
       { name: 'Home', link: '#', active: true },
       { name: 'Features', link: '#' },
       { name: 'Pricing', link: '#' },
     ]}
-    :brand=${'#'}
-    :expand=${'lg'}
-    :container=${'container'}   // 'container' | 'container-fluid' | ...
-    :sticky=${false}
-    :fixed=${false}
-    :theme=${null}              // 'light' | 'dark' — independent of the page
-    :bg=${'body-tertiary'}
+    ::brand=${'#'}
+    ::expand=${'lg'}
+    ::container=${'container'}   // 'container' | 'container-fluid' | ...
+    ::sticky=${false}
+    ::fixed=${false}
+    ::theme=${null}              // 'light' | 'dark' — independent of the page
+    ::bg=${'body-tertiary'}
     // private
     :_id=${`bs-navbar-${$id}`}

package/parts/offcanvas.htm CHANGED Viewed

@@ -6,22 +6,22 @@
     An offcanvas panel: the same shape as `bs-modal`, opened by a trigger
     naming it or by the `:open` value.
-      <bs-button :toggle="offcanvas" :target="#menu">Menu</bs-button>
-      <bs-offcanvas :name="menu" :title="Menu">…</bs-offcanvas>
+      <bs-button ::toggle="offcanvas" ::target="#menu">Menu</bs-button>
+      <bs-offcanvas ::name="menu" ::title="Menu">…</bs-offcanvas>
   -->
   <:define tag="bs-offcanvas:div"
     class="offcanvas"
     tabindex="-1"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :name=${null}
-    :title=${''}
-    :placement=${'start'}   // 'start' | 'end' | 'top' | 'bottom'
-    :backdrop=${true}
-    :scroll=${false}
-    :responsive=${null}     // 'lg' — an offcanvas below this breakpoint only
-    :open=${false}
+    ::extra=${null}      // extra classes for this instance
+    ::name=${null}
+    ::title=${''}
+    ::placement=${'start'}   // 'start' | 'end' | 'top' | 'bottom'
+    ::backdrop=${true}
+    ::scroll=${false}
+    ::responsive=${null}     // 'lg' — an offcanvas below this breakpoint only
+    ::open=${false}
     // private
     :_labelId=${`bs-offcanvas-title-${$id}`}
@@ -79,7 +79,7 @@
   >
     <div class="offcanvas-header">
       <h5 class="offcanvas-title" id=${_labelId}>${title}</h5>
-      <bs-close :dismiss="offcanvas" />
+      <bs-close ::dismiss="offcanvas" />
     </div>
     <div class="offcanvas-body">

package/parts/pagination.htm CHANGED Viewed

@@ -19,16 +19,16 @@
   <:define tag="bs-pagination:nav"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :current=${1}
-    :pages=${5}
-    :size=${null}          // 'sm' | 'lg'
-    :align=${'start'}      // 'start' | 'center' | 'end'
-    :prev=${'«'}
-    :next=${'»'}
-    :link=${(n) => null}
-    :select=${(n) => {}}
-    :label=${'Page navigation'}
+    ::extra=${null}      // extra classes for this instance
+    ::current=${1}
+    ::pages=${5}
+    ::size=${null}          // 'sm' | 'lg'
+    ::align=${'start'}      // 'start' | 'center' | 'end'
+    ::prev=${'«'}
+    ::next=${'»'}
+    ::link=${(n) => null}
+    ::select=${(n) => {}}
+    ::label=${'Page navigation'}
     // private
     :_class=${[

package/parts/placeholder.htm CHANGED Viewed

@@ -9,11 +9,11 @@
   <:define tag="bs-placeholder:span"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :cols=${6}
-    :size=${null}         // 'xs' | 'sm' | 'lg'
-    :variant=${null}
-    :animation=${'glow'}  // 'glow' | 'wave' | null
+    ::extra=${null}      // extra classes for this instance
+    ::cols=${6}
+    ::size=${null}         // 'xs' | 'sm' | 'lg'
+    ::variant=${null}
+    ::animation=${'glow'}  // 'glow' | 'wave' | null
     // private
     :_class=${[animation ? `placeholder-${animation}` : '', extra]

package/parts/popover.htm CHANGED Viewed

@@ -13,12 +13,12 @@
     class="d-inline-block ${extra ?? ''}"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :title=${''}
-    :content=${''}
-    :placement=${'right'}
-    :trigger=${'click'}
-    :html=${false}
+    ::extra=${null}      // extra classes for this instance
+    ::title=${''}
+    ::content=${''}
+    ::placement=${'right'}
+    ::trigger=${'click'}
+    ::html=${false}
     // private
     :_build=${() => {

package/parts/progress.htm CHANGED Viewed

@@ -12,16 +12,16 @@
     class="progress ${extra ?? ''}"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :value=${0}
-    :min=${0}
-    :max=${100}
-    :label=${null}
-    :variant=${null}
-    :striped=${false}
-    :animated=${false}
-    :height=${null}
-    :name=${'Progress'}
+    ::extra=${null}      // extra classes for this instance
+    ::value=${0}
+    ::min=${0}
+    ::max=${100}
+    ::label=${null}
+    ::variant=${null}
+    ::striped=${false}
+    ::animated=${false}
+    ::height=${null}
+    ::name=${'Progress'}
     // private
     :_percent=${Math.max(0, Math.min(100, ((value - min) / (max - min || 1)) * 100))}

package/parts/scrollspy.htm CHANGED Viewed

@@ -6,17 +6,17 @@
     nav that matches what is currently on screen. `:target` is the selector
     of that nav, and the element this sits on is the thing being scrolled.
-      <bs-nav :vertical id="toc" :items=${sections} />
-      <bs-scrollspy :target="#toc" :height="300">…</bs-scrollspy>
+      <bs-nav ::vertical id="toc" ::items=${sections} />
+      <bs-scrollspy ::target="#toc" ::height="300">…</bs-scrollspy>
   -->
   <:define tag="bs-scrollspy:div"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :target=${null}
-    :offset=${0}
-    :smooth=${false}
-    :height=${null}
+    ::extra=${null}      // extra classes for this instance
+    ::target=${null}
+    ::offset=${0}
+    ::smooth=${false}
+    ::height=${null}
     class=${extra}
     data-bs-spy="scroll"

package/parts/select.htm CHANGED Viewed

@@ -5,24 +5,24 @@
     A select whose options come from an array. An entry is either a string or
     `{ name, value, disabled }`, so the quick case stays quick:
-      <bs-select :label="Size" :options=${['S', 'M', 'L']} />
+      <bs-select ::label="Size" ::options=${['S', 'M', 'L']} />
   -->
   <:define tag="bs-select:div"
     class="mb-3 ${extra ?? ''}"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :label=${null}
-    :name=${null}
-    :options=${[]}
-    :value=${null}
-    :placeholder=${null}
-    :help=${null}
-    :size=${null}          // 'sm' | 'lg'
-    :multiple=${false}
-    :disabled=${false}
-    :required=${false}
-    :floating=${false}
+    ::extra=${null}      // extra classes for this instance
+    ::label=${null}
+    ::name=${null}
+    ::options=${[]}
+    ::value=${null}
+    ::placeholder=${null}
+    ::help=${null}
+    ::size=${null}          // 'sm' | 'lg'
+    ::multiple=${false}
+    ::disabled=${false}
+    ::required=${false}
+    ::floating=${false}
     // private
     :_id=${`bs-select-${$id}`}

package/parts/spinner.htm CHANGED Viewed

@@ -10,11 +10,11 @@
     role="status"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :variant=${null}
-    :type=${'border'}    // 'border' | 'grow'
-    :small=${false}
-    :label=${'Loading…'}
+    ::extra=${null}      // extra classes for this instance
+    ::variant=${null}
+    ::type=${'border'}    // 'border' | 'grow'
+    ::small=${false}
+    ::label=${'Loading…'}
     // private
     :_class=${[

package/parts/table.htm CHANGED Viewed

@@ -16,19 +16,19 @@
   <:define tag="bs-table:div"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :columns=${[]}
-    :rows=${[]}
-    :caption=${null}
-    :striped=${false}
-    :hover=${false}
-    :bordered=${false}
-    :borderless=${false}
-    :small=${false}
-    :variant=${null}
-    :headVariant=${null}
-    :align=${null}          // 'middle' | 'bottom'
-    :responsive=${false}
+    ::extra=${null}      // extra classes for this instance
+    ::columns=${[]}
+    ::rows=${[]}
+    ::caption=${null}
+    ::striped=${false}
+    ::hover=${false}
+    ::bordered=${false}
+    ::borderless=${false}
+    ::small=${false}
+    ::variant=${null}
+    ::headVariant=${null}
+    ::align=${null}          // 'middle' | 'bottom'
+    ::responsive=${false}
     // private
     :_class=${[

package/parts/theme.htm CHANGED Viewed

@@ -41,10 +41,10 @@
     type="button"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :variant=${'secondary'}
-    :outline=${true}
-    :size=${null}
+    ::extra=${null}      // extra classes for this instance
+    ::variant=${'secondary'}
+    ::outline=${true}
+    ::size=${null}
     // private
     :_theme=${globalThis.document?.documentElement.getAttribute('data-bs-theme') ?? 'light'}

package/parts/toast.htm CHANGED Viewed

@@ -5,7 +5,7 @@
   <!---
     A toast, shown by setting a value rather than by calling anything:
-      <bs-toast :aka="saved" :title="Saved">Your changes are safe.</bs-toast>
+      <bs-toast :aka="saved" ::title="Saved">Your changes are safe.</bs-toast>
       <bs-button :on-click=${() => saved.open = true}>Save</bs-button>
     `:handle-open` turns that value into the `show()` / `hide()` the plugin
@@ -20,13 +20,13 @@
     aria-atomic="true"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :title=${null}
-    :time=${null}
-    :variant=${null}
-    :open=${false}
-    :autohide=${true}
-    :delay=${5000}
+    ::extra=${null}      // extra classes for this instance
+    ::title=${null}
+    ::time=${null}
+    ::variant=${null}
+    ::open=${false}
+    ::autohide=${true}
+    ::delay=${5000}
     // private
     :_class=${['toast', variant ? `text-bg-${variant} border-0` : '', extra]
@@ -60,7 +60,7 @@
       <strong class="me-auto">${title}</strong>
       <small class="text-body-secondary"
         :if=${time}>${time}</small>
-      <bs-close :dismiss="toast" :label="Close notification" />
+      <bs-close ::dismiss="toast" ::label="Close notification" />
     </div>
     <!---
@@ -79,9 +79,9 @@
         <:slot />
       </div>
-      <bs-close :dismiss="toast"
-        :label="Close notification"
-        :extra="me-2 m-auto"
+      <bs-close ::dismiss="toast"
+        ::label="Close notification"
+        ::extra="me-2 m-auto"
         :if=${!title} />
     </div>
   </:define>
@@ -93,8 +93,8 @@
   <:define tag="bs-toast-container:div"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :placement=${'bottom-end'}   // 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'top-center'
+    ::extra=${null}      // extra classes for this instance
+    ::placement=${'bottom-end'}   // 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'top-center'
     // private
     :_class=${[

package/parts/tooltip.htm CHANGED Viewed

@@ -29,11 +29,11 @@
     class="d-inline-block ${extra ?? ''}"
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :title=${''}
-    :placement=${'top'}
-    :html=${false}
-    :trigger=${'hover focus'}
+    ::extra=${null}      // extra classes for this instance
+    ::title=${''}
+    ::placement=${'top'}
+    ::html=${false}
+    ::trigger=${'hover focus'}
     // private
     :_build=${() => {