@markout-lang/bootstrap-kit 0.4.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markout-lang/bootstrap-kit",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "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",

package/parts/alert.htm

@@ -7,7 +7,7 @@
     `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
+    `::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

package/parts/badge.htm

@@ -24,8 +24,6 @@
     ].filter(s => s).join(' ')}
 
     class=${_class}
-  >
-    <:slot />
-  </:define>
+  ><:slot /></:define>
 
 </lib>

package/parts/button.htm

@@ -4,7 +4,7 @@
   <!---
     Bootstrap's button, as a real `<button>`.
 
-    `:toggle`/`:target`/`:dismiss` write the `data-bs-*` triplet every
+    `::toggle`/`::target`/`::dismiss` write the `data-bs-*` triplet every
     JS-driven component in this kit is opened and closed by, so a trigger for
     a modal, an offcanvas or a collapse is this same tag rather than a
     component of its own:
@@ -51,8 +51,8 @@
 
   <!---
     The same styling on an `<a>`, for a link that is meant to look like a
-    button. Left as it is, it is an ordinary link; `:button` turns it into
-    one, and `:variant` then means what it means on `bs-button`.
+    button. Left as it is, it is an ordinary link; `::button` turns it into
+    one, and `::variant` then means what it means on `bs-button`.
   -->
   <:define tag="bs-link:a"
 
@@ -83,12 +83,10 @@
     aria-disabled=${disabled ? 'true' : null}
     data-bs-toggle=${toggle}
     data-bs-target=${target}
-  >
-    <:slot />
-  </:define>
+  ><:slot /></:define>
 
   <!---
-    A button group. `:label` is Bootstrap's requirement, not this kit's: the
+    A button group. `::label` is Bootstrap's requirement, not this kit's: the
     group needs an accessible name of its own, since the buttons inside only
     name themselves.
   -->

package/parts/check.htm

@@ -4,9 +4,9 @@
   <!---
     Checkbox, radio and switch are one component: in Bootstrap a switch IS a
     checkbox with `.form-switch` on the wrapper, and a radio differs only by
-    `type`. `:type` picks between them.
+    `type`. `::type` picks between them.
 
-    A group of radios shares one `:name`, as it does in plain HTML — that is
+    A group of radios shares one `::name`, as it does in plain HTML — that is
     what makes them exclusive, and the kit doesn't hide it.
   -->
   <:define tag="bs-check:div"
@@ -54,13 +54,13 @@
 
   <!---
     A whole group of radios or checkboxes from one array, sharing a name and
-    reporting the selection back through `:value`. Entries are strings or
+    reporting the selection back through `::value`. Entries are strings or
     `{ name, value, disabled }`, as in `bs-select`.
 
-    What `:value` HOLDS is decided by `:type`, because that is what the two
+    What `::value` HOLDS is decided by `::type`, because that is what the two
     controls mean: a radio group submits one value and a checkbox group
     submits every box that is ticked, under the same name. So a radio group's
-    `:value` is the selected value or `null`, and a checkbox or switch
+    `::value` is the selected value or `null`, and a checkbox or switch
     group's is an ARRAY, in the order the options were given rather than the
     order they were clicked — a summary sentence reading it should not
     reorder itself under the reader.
@@ -68,7 +68,7 @@
     It used to be one value either way, which made a checkbox group behave
     like a radio group that could not make up its mind: ticking a second box
     unticked the first, and unticking a box left it ticked. Not a shape
-    guessed from a value — `:type` is declared, and it is the same thing that
+    guessed from a value — `::type` is declared, and it is the same thing that
     already picks the input's type and the switch class.
   -->
   <:define tag="bs-check-group:div"
@@ -87,7 +87,7 @@
     :_name=${`bs-check-group-${$id}`}
     :_legendId=${`bs-check-group-legend-${$id}`}
     :_multi=${type !== 'radio'}
-    // a lone value read as a list of one, the way `:options` reads a lone
+    // a lone value read as a list of one, the way `::options` reads a lone
     // string as an entry: passing `:value="Slack"` to a checkbox group says
     // something unambiguous, and spreading a string into characters is not it
     :_selected=${!_multi ? [] : Array.isArray(value) ? value : value == null ? [] : [value]}
@@ -152,8 +152,8 @@
     :_id=${`bs-range-${$id}`}
   >
     <!---
-      The label row, which either half can be alone in: `:showValue` with no
-      `:label` used to render nothing at all, since the row was gated on the
+      The label row, which either half can be alone in: `::showValue` with no
+      `::label` used to render nothing at all, since the row was gated on the
       label.
 
       A row rather than a `<label>` wrapping both, so the readout stays out

package/parts/collapse.htm

@@ -4,12 +4,12 @@
   <!---
     A collapsible region. The trigger is deliberately not part of it —
     anything can open a collapse, and often several things do — so the region
-    takes a `:name` and a `bs-button` points at it:
+    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>
 
-    `:horizontal` collapses width instead of height, in which case Bootstrap
+    `::horizontal` collapses width instead of height, in which case Bootstrap
     needs the content to have a width of its own.
   -->
   <:define tag="bs-collapse:div"

package/parts/input.htm

@@ -5,7 +5,7 @@
     A form control with its label, help text and validation state wired up
     rather than left to the caller.
 
-    `:value` is read AND written: the component keeps it in step with what is
+    `::value` is read AND written: the component keeps it in step with what is
     typed, so a page can name the instance and read it from anywhere else on
     the page —
 
@@ -16,8 +16,8 @@
     special to forms.
 
     The validity policy is this component's own, not Bootstrap's: a control is
-    invalid once it is non-empty and fails `:check`. Empty is neutral, so a
-    form doesn't open covered in errors. `:required` extends that to empty.
+    invalid once it is non-empty and fails `::check`. Empty is neutral, so a
+    form doesn't open covered in errors. `::required` extends that to empty.
 
     `:valid` is the other side of that, and what a form's own controls read —
 
@@ -27,7 +27,7 @@
     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
     what keeps the form out of red — and it is also not something to submit.
-    So empty answers `false` here while showing nothing, and `:required` is
+    So empty answers `false` here while showing nothing, and `::required` is
     what makes empty an error as well as a gap.
 
     Floating labels are the same control with the label after the input
@@ -166,8 +166,8 @@
   </:define>
 
   <!---
-    An input group: text or markup either side of a control. `:prefix` and
-    `:suffix` cover the common case; anything richer goes in the slot as
+    An input group: text or markup either side of a control. `::prefix` and
+    `::suffix` cover the common case; anything richer goes in the slot as
     ordinary `.input-group-text` markup.
   -->
   <:define tag="bs-input-group:div"

package/parts/modal.htm

@@ -13,7 +13,7 @@
     optional region: a `<:slot>` can't live inside a `:for-each`, and a
     fallback is the better answer here anyway.
 
-    `:open` is the other way in — a value the page owns, which lets the modal
+    `::open` is the other way in — a value the page owns, which lets the modal
     be driven by state rather than by a click. `:handle-open` is the door to
     the imperative half of the DOM: `show()` and `hide()` are verbs, so no
     amount of markup expresses them, and a handler is what runs them.

package/parts/nav.htm

@@ -62,7 +62,7 @@
     </li>
   </:define>
 
-  <!--- The panes a `:toggle`-ing `bs-nav` switches between. -->
+  <!--- The panes a `::toggle`-ing `bs-nav` switches between. -->
   <:define tag="bs-tab-content:div" class="tab-content">
     <:slot />
   </:define>

package/parts/navbar.htm

@@ -3,7 +3,7 @@
 
   <!---
     Bootstrap's navbar, driven by an array of entries rather than by writing
-    `<li><a class="nav-link">` per link. `:items` is this component's API, not
+    `<li><a class="nav-link">` per link. `::items` is this component's API, not
     something from the Bootstrap docs — see the default below for its shape;
     `button: true` turns an entry into a call to action.
 

package/parts/offcanvas.htm

@@ -4,7 +4,7 @@
 
   <!---
     An offcanvas panel: the same shape as `bs-modal`, opened by a trigger
-    naming it or by the `:open` value.
+    naming it or by the `::open` value.
 
       <bs-button ::toggle="offcanvas" ::target="#menu">Menu</bs-button>
       <bs-offcanvas ::name="menu" ::title="Menu">…</bs-offcanvas>

package/parts/pagination.htm

@@ -3,15 +3,15 @@
 
   <!---
     Pagination driven by a page number rather than by markup: give it the
-    `:current` page and the total `:pages` and it works out which entry is
+    `::current` page and the total `::pages` and it works out which entry is
     active and when the arrows are dead.
 
-    The current page is `:current` rather than `:page`, because `page` is
+    The current page is `::current` rather than `:page`, because `page` is
     already the name of `<html>`'s own scope — a parameter of that name would
     resolve to the scope instead of to the number.
 
-    `:link` and `:select` are the two ways to answer "what does a click do".
-    `:link` builds an href per page for a server-rendered list; `:select` is
+    `::link` and `::select` are the two ways to answer "what does a click do".
+    `::link` builds an href per page for a server-rendered list; `::select` is
     called with the page number for one that stays on the page. Both are
     ordinary function parameters — a callback the component calls, not a DOM
     event, so it is a value and not an `:on-` handler.

package/parts/progress.htm

@@ -4,9 +4,9 @@
   <!---
     Bootstrap 5.3 moved the ARIA onto the outer `.progress` and left
     `.progress-bar` as the visual fill, so a progress bar is two elements
-    whose values have to agree. Here they are derived from one `:value`.
+    whose values have to agree. Here they are derived from one `::value`.
 
-    `:label` is the text drawn inside the bar; leave it off for a bare bar.
+    `::label` is the text drawn inside the bar; leave it off for a bare bar.
   -->
   <:define tag="bs-progress:div"
     class="progress"

package/parts/scrollspy.htm

@@ -3,7 +3,7 @@
 
   <!---
     Scrollspy is behaviour rather than appearance: it marks the entry in a
-    nav that matches what is currently on screen. `:target` is the selector
+    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} />

package/parts/table.htm

@@ -2,14 +2,14 @@
   <:import src="base.htm" />
 
   <!---
-    A table from `:columns` and `:rows`.
+    A table from `::columns` and `::rows`.
 
     A column is `{ key, name, class }`; a row is any object the columns can
     be read out of. That is the one place in this kit where markup is
     generated from data twice over — once per column, once per row — and it
     is the case where writing it by hand hurts most.
 
-    `:responsive` is a class on the same element rather than an extra
+    `::responsive` is a class on the same element rather than an extra
     wrapper: `.table-responsive` only sets `overflow-x`, so it costs nothing
     when off.
   -->