@markout-lang/bootstrap-kit 0.2.2 → 0.4.0

package/README.md

@@ -24,8 +24,15 @@ 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
+`all.htm` pulls in everything, and that is the ordinary thing to import: a
+component no tag on the page uses is dropped before the page is served, so
+what the whole kit costs is what you actually reach for. A page importing all
+of it and using one `bs-alert` serves 4.7KB where the same page with that
+pass turned off is 19.8KB.
+
+Importing parts by hand is for when you want to be explicit rather than to
+save weight — it is worth 134 bytes on that page. Each part imports
+`base.htm` itself and a file is only imported once, so it never leaves
 Bootstrap out:
 
 ```html
@@ -33,6 +40,20 @@ Bootstrap out:
 <:import src="/npm/@markout-lang/bootstrap-kit/parts/card.htm" />
 ```
 
+Those 134 bytes are the pass being careful rather than a component sneaking
+through, and they are two stencils: `bs-alert` names `<bs-close>` in its
+body, `bs-close` lives in `button.htm`, and so `bs-button` and `bs-badge`
+count as used. A tag named inside another definition's body is kept even
+when that definition is itself dropped — narrowing that needs the usage
+graph rather than a flat set, and getting it wrong deletes markup a page
+needs.
+
+Both pages there do the same things, which is what makes the comparison mean
+anything. `theme.htm` used to be the exception: importing `all.htm` brought a
+pre-paint script the hand-picked page never got, so the whole-kit page was
+278 bytes larger for doing something more. Colour modes are opt-in now, so
+that difference belongs to whichever page asks for them.
+
 Every component below is shown one after another in the [kitchen
 sink](https://markout.dev/demos/kitchen-sink), and
 [Orbit](https://markout.dev/demos/orbit) is an operations dashboard built out
@@ -65,24 +86,31 @@ 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
+**`class+=` 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:
+kit overrides — and since every component here computes its own, writing one
+gets you a warning naming `class+=`. That is the spelling to reach for:
 
 ```html
-<bs-alert :variant="warning" :extra="mb-0">Careful</bs-alert>
+<bs-alert ::variant="warning" class+="mb-0">Careful</bs-alert>
+<bs-alert ::dismissible class-="fade">No animation, please</bs-alert>
 ```
 
+Every component used to declare an `::extra` parameter for this, hand-rolled
+into its own class list — 28 files agreeing on a convention the language now
+has a spelling for. `::bodyExtra` on `bs-card` stays, and says why the rest
+went: `class+=` reaches a component's own element, and the card's *body* is a
+different element.
+
 **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 +123,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 +140,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 +183,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 +193,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 +229,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>
 ```
@@ -215,13 +243,21 @@ variables, so restyling everything is setting one value at the import site:
 | `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.
+Colour modes are `theme.htm`, and they are opt-in: write `<bs-theme-auto />`
+for the behaviour on its own — the page follows a stored choice, or the
+system — or a `<bs-theme-toggle />` for the behaviour and a button to drive
+it. Either keeps the inline pre-paint script that stops the page flashing the
+wrong mode; a page that writes neither ships neither, even having imported
+the whole kit.
+
+That is `:when-used` doing what it is for. Before it, importing `all.htm`
+gave every page colour modes whether it had asked or not, which is the one
+thing in this kit that DID something merely because a file was imported.
 
 ## Components
 
-Every tag also takes `:extra`. Defaults are in the definitions, which are
-commented.
+Every tag takes `class+=` and `class-=`, which are the language's and not
+listed here. Defaults are in the definitions, which are commented.
 
 ### Content
 
@@ -239,13 +275,29 @@ commented.
 | `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-check-group` | `legend` `type` `options` `value` (see below) `inline` `disabled` |
 | `bs-range` | `label` `name` `min` `max` `step` `value` `disabled` `showValue` |
 | `bs-input-group` | `prefix` `suffix` `size` |
 
 `bs-input` and `bs-textarea` also answer `valid`, which is read rather than
 passed -- see *Values are read and written* above.
 
+**`bs-check-group`'s `::value` is decided by its `::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 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:
+
+```html
+<bs-check-group :aka="channels"
+  ::type="checkbox"
+  ::value=${['Slack']}
+  ::options=${['Email', 'Slack', 'SMS']} />
+
+Deliver to ${channels.value.join(', ')}
+```
+
 ### Components
 
 | Tag | Parameters |
@@ -278,6 +330,7 @@ passed -- see *Values are read and written* above.
 | `bs-progress-stacked` | — |
 | `bs-scrollspy` | `target` `offset` `smooth` `height` |
 | `bs-spinner` | `variant` `type` `small` `label` |
+| `bs-theme-auto` | — (declares that the page uses colour modes) |
 | `bs-theme-toggle` | `variant` `outline` `size` |
 | `bs-toast` | `title` `time` `variant` `open` `autohide` `delay` |
 | `bs-toast-container` | `placement` |
@@ -293,7 +346,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

@@ -1,6 +1,6 @@
 {
   "name": "@markout-lang/bootstrap-kit",
-  "version": "0.2.2",
+  "version": "0.4.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 <1.0.0"
+  },
   "markout": {
     "root": "/bootstrap-kit"
   },

package/parts/accordion.htm

@@ -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
@@ -25,12 +25,11 @@
     collide and nothing has to be named.
   -->
   <:define tag="bs-accordion:div"
-    class="accordion ${extra ?? ''}"
+    class="accordion"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :exclusive=${true}  // one open panel at a time
-    :flush=${false}
+    ::exclusive=${true}  // one open panel at a time
+    ::flush=${false}
 
     /*
       private: the id the items point at. Owned here rather than
@@ -45,12 +44,11 @@
   </:define>
 
   <:define tag="bs-accordion-item:div"
-    class="accordion-item ${extra ?? ''}"
+    class="accordion-item"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :title=${''}
-    :open=${false}
+    ::title=${''}
+    ::open=${false}
 
     // private: the accordion this item was slotted into, if any
     :_parent=${$host && $host.exclusive ? $host._id : null}

package/parts/alert.htm

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

package/parts/badge.htm

@@ -9,10 +9,9 @@
   <: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
+    ::variant=${'primary'}
+    ::pill=${false}
+    ::position=${null}    // 'top-end' | 'bottom-end' — for a badge on a button
 
     // private
     :_class=${[
@@ -22,7 +21,6 @@
       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}

package/parts/base.htm

@@ -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

@@ -12,16 +12,14 @@
   -->
   <:define tag="bs-breadcrumb:nav"
     aria-label="breadcrumb"
-    class=${extra}
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :items=${[
+    ::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

@@ -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,23 +20,21 @@
   <: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}
+    ::variant=${'primary'}
+    ::outline=${false}
+    ::size=${null}
+    ::active=${false}
+    ::disabled=${false}
+    ::type=${'button'}
+    ::toggle=${null}
+    ::target=${null}
+    ::dismiss=${null}
 
     // private
     :_class=${[
       'btn',
       variant ? `btn-${outline ? 'outline-' : ''}${variant}` : '',
       size ? `btn-${size}` : '',
-      extra,
     ].filter(s => s).join(' ')}
 
     class=${_class}
@@ -59,16 +57,15 @@
   <: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}
+    ::href=${'#'}
+    ::variant=${null}
+    ::outline=${false}
+    ::size=${null}
+    ::active=${false}
+    ::disabled=${false}
+    ::button=${false}
+    ::toggle=${null}
+    ::target=${null}
 
     // private
     :_class=${[
@@ -76,7 +73,6 @@
       button && variant ? `btn-${outline ? 'outline-' : ''}${variant}` : '',
       button && size ? `btn-${size}` : '',
       !button && variant ? `link-${variant}` : '',
-      extra,
     ].filter(s => s).join(' ') || null}
 
     class=${_class}
@@ -99,16 +95,14 @@
   <:define tag="bs-button-group:div"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :label=${'Button group'}
-    :size=${null}
-    :vertical=${false}
+    ::label=${'Button group'}
+    ::size=${null}
+    ::vertical=${false}
 
     // private
     :_class=${[
       vertical ? 'btn-group-vertical' : 'btn-group',
       size ? `btn-group-${size}` : '',
-      extra,
     ].filter(s => s).join(' ')}
 
     class=${_class}
@@ -123,13 +117,12 @@
     buttons inside one, and this is the wrapper that says so.
   -->
   <:define tag="bs-button-toolbar:div"
-    class="btn-toolbar ${extra ?? ''}"
+    class="btn-toolbar"
     role="toolbar"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :label=${'Toolbar'}
-    :gap=${2}
+    ::label=${'Toolbar'}
+    ::gap=${2}
 
     aria-label=${label}
     :class-gap-1=${gap === 1}
@@ -146,13 +139,12 @@
   -->
   <:define tag="bs-close:button"
     type="button"
-    class="btn-close ${extra ?? ''}"
+    class="btn-close"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :label=${'Close'}
-    :dismiss=${null}
-    :disabled=${false}
+    ::label=${'Close'}
+    ::dismiss=${null}
+    ::disabled=${false}
 
     aria-label=${label}
     :attr-disabled=${disabled}

package/parts/card.htm

@@ -7,30 +7,29 @@
     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>
 
-    The body is the one region a caller cannot reach with `:extra`, which
-    goes on the card itself -- hence `:bodyExtra`, for the padding Bootstrap
+    The body is the one region a caller cannot reach with `class+=`, which
+    goes on the card itself -- hence `::bodyExtra`, for the padding Bootstrap
     leaves to a utility class: `p-0` for a table or a code surface that runs
     to the edges, `p-4` for a card that is mostly one paragraph.
   -->
   <: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'
+    ::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=${[
@@ -38,7 +37,6 @@
       variant ? `text-bg-${variant}` : '',
       border ? `border-${border}` : '',
       align ? `text-${align}` : '',
-      extra,
     ].filter(s => s).join(' ')}
 
     class=${_class}
@@ -84,18 +82,15 @@
   <: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
+    ::cols=${3}
+    ::gap=${4}
+    ::attached=${false}     // a seamless strip instead of separate cards
 
     // private
     :_class=${attached
       ? 'card-group'
       : `row row-cols-1 row-cols-md-${cols} g-${gap}`}
-    :_groupClass=${extra ? `${_class} ${extra}` : _class}
-
-    class=${_groupClass}
+    class=${_class}
   >
     <:slot />
   </:define>

package/parts/carousel.htm

@@ -10,18 +10,17 @@
     is worth a component at all.
   -->
   <:define tag="bs-carousel:div"
-    class="carousel slide ${extra ?? ''}"
+    class="carousel slide"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :slides=${[]}
-    :controls=${true}
-    :indicators=${true}
-    :captions=${true}
-    :fade=${false}
-    :ride=${true}
-    :interval=${5000}
-    :dark=${false}
+    ::slides=${[]}
+    ::controls=${true}
+    ::indicators=${true}
+    ::captions=${true}
+    ::fade=${false}
+    ::ride=${true}
+    ::interval=${5000}
+    ::dark=${false}
 
     // private
     :_id=${`bs-carousel-${$id}`}