@markout-lang/bootstrap-kit 0.2.2 → 0.4.0

package/parts/placeholder.htm

@@ -9,14 +9,13 @@
   <: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
+    ::cols=${6}
+    ::size=${null}         // 'xs' | 'sm' | 'lg'
+    ::variant=${null}
+    ::animation=${'glow'}  // 'glow' | 'wave' | null
 
     // private
-    :_class=${[animation ? `placeholder-${animation}` : '', extra]
+    :_class=${[animation ? `placeholder-${animation}` : '']
               .filter(s => s).join(' ') || null}
     :_barClass=${[
       'placeholder',

package/parts/popover.htm

@@ -10,15 +10,14 @@
     part that usually changes; both are read when it runs.
   -->
   <:define tag="bs-popover:span"
-    class="d-inline-block ${extra ?? ''}"
+    class="d-inline-block"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :title=${''}
-    :content=${''}
-    :placement=${'right'}
-    :trigger=${'click'}
-    :html=${false}
+    ::title=${''}
+    ::content=${''}
+    ::placement=${'right'}
+    ::trigger=${'click'}
+    ::html=${false}
 
     // private
     :_build=${() => {

package/parts/progress.htm

@@ -9,19 +9,18 @@
     `:label` is the text drawn inside the bar; leave it off for a bare bar.
   -->
   <:define tag="bs-progress:div"
-    class="progress ${extra ?? ''}"
+    class="progress"
 
     // 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'}
+    ::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

@@ -6,19 +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}
+    ::target=${null}
+    ::offset=${0}
+    ::smooth=${false}
+    ::height=${null}
 
-    class=${extra}
     data-bs-spy="scroll"
     data-bs-target=${target}
     data-bs-root-margin="${offset}px 0px -40%"

package/parts/select.htm

@@ -5,24 +5,23 @@
     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 ?? ''}"
+    class="mb-3"
 
     // 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}
+    ::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}`}
@@ -51,13 +50,15 @@
 
         <option value=""
           :if=${placeholder}
-          :attr-selected=${value == null}>${placeholder}</option>
+          :attr-selected=${value == null}
+          :prop-selected=${value == null}>${placeholder}</option>
 
         <option :for-each=${_options}
           :for-as="option"
           value=${option.value}
           :attr-disabled=${option.disabled}
-          :attr-selected=${option.value === value}>${option.name}</option>
+          :attr-selected=${option.value === value}
+          :prop-selected=${option.value === value}>${option.name}</option>
       </select>
 
       <label for=${_id}

package/parts/spinner.htm

@@ -10,18 +10,16 @@
     role="status"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :variant=${null}
-    :type=${'border'}    // 'border' | 'grow'
-    :small=${false}
-    :label=${'Loading…'}
+    ::variant=${null}
+    ::type=${'border'}    // 'border' | 'grow'
+    ::small=${false}
+    ::label=${'Loading…'}
 
     // private
     :_class=${[
       `spinner-${type}`,
       small ? `spinner-${type}-sm` : '',
       variant ? `text-${variant}` : '',
-      extra,
     ].filter(s => s).join(' ')}
 
     class=${_class}

package/parts/table.htm

@@ -16,19 +16,18 @@
   <: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}
+    ::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=${[
@@ -42,7 +41,6 @@
       align ? `align-${align}` : '',
     ].filter(s => s).join(' ')}
 
-    class=${extra}
     :class-table-responsive=${responsive}
   >
     <table class=${_class}>

package/parts/theme.htm

@@ -10,6 +10,16 @@
     piece of this kit that cannot be reactive, because it has to happen
     before Markout exists.
 
+    It is also the one piece that would otherwise DO something merely because
+    a file was imported. `all.htm` pulls this file in, so every page taking
+    the whole kit used to get colour modes whether it asked for them or not —
+    which is the kind of action at a distance the rest of the kit has none
+    of. So the script waits on a tag: write `<bs-theme-auto />` for the
+    behaviour on its own, or a `<bs-theme-toggle />` for the behaviour and a
+    button to drive it, and a page that writes neither ships neither. Naming
+    a tag no `<:define>` declares is a compile error, which is what stops a
+    rename from leaving this waiting on a name nothing will ever use.
+
     From there `_theme` is an ordinary value, and it starts as whatever that
     script decided rather than as a literal: a served page knows nothing
     about this visitor, so a default written here would be a guess that the
@@ -28,7 +38,7 @@
     kit would rather say so at the point of use than pretend a server has
     them.
   -->
-  <script>
+  <script :when-used="bs-theme-auto bs-theme-toggle">
     (() => {
       const stored = localStorage.getItem('bs-theme');
       const theme = stored
@@ -37,14 +47,28 @@
     })();
   </script>
 
+  <!---
+    "This page uses colour modes", and nothing else. The script above does
+    the work; this is how a page asks for it without also asking for a
+    button, and it has no element, so what it costs the page is one empty
+    scope — 58 bytes on the counter example.
+
+    Deliberately holding no value. It could expose the current mode for a
+    page that needs it in an expression rather than in CSS, and that is 109
+    bytes of props on every page that opts in and doesn't read it, which is
+    all of them so far. A component whose job is to say one thing should
+    cost what saying it costs; the value can be added the day something
+    wants it, and adding it then breaks nothing.
+  -->
+  <:define tag="bs-theme-auto:logic" />
+
   <:define tag="bs-theme-toggle:button"
     type="button"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :variant=${'secondary'}
-    :outline=${true}
-    :size=${null}
+    ::variant=${'secondary'}
+    ::outline=${true}
+    ::size=${null}
 
     // private
     :_theme=${globalThis.document?.documentElement.getAttribute('data-bs-theme') ?? 'light'}
@@ -52,7 +76,6 @@
       'btn',
       `btn-${outline ? 'outline-' : ''}${variant}`,
       size ? `btn-${size}` : '',
-      extra,
     ].filter(s => s).join(' ')}
 
     class=${_class}

package/parts/toast.htm

@@ -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,16 +20,15 @@
     aria-atomic="true"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :title=${null}
-    :time=${null}
-    :variant=${null}
-    :open=${false}
-    :autohide=${true}
-    :delay=${5000}
+    ::title=${null}
+    ::time=${null}
+    ::variant=${null}
+    ::open=${false}
+    ::autohide=${true}
+    ::delay=${5000}
 
     // private
-    :_class=${['toast', variant ? `text-bg-${variant} border-0` : '', extra]
+    :_class=${['toast', variant ? `text-bg-${variant} border-0` : '']
               .filter(s => s).join(' ')}
 
     class=${_class}
@@ -60,7 +59,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 +78,9 @@
         <:slot />
       </div>
 
-      <bs-close :dismiss="toast"
-        :label="Close notification"
-        :extra="me-2 m-auto"
+      <bs-close ::dismiss="toast"
+        ::label="Close notification"
+        class+="me-2 m-auto"
         :if=${!title} />
     </div>
   </:define>
@@ -93,8 +92,7 @@
   <: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'
+    ::placement=${'bottom-end'}   // 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'top-center'
 
     // private
     :_class=${[
@@ -103,7 +101,6 @@
       placement.endsWith('start') ? 'start-0' : '',
       placement.endsWith('end') ? 'end-0' : '',
       placement.endsWith('center') ? 'start-50 translate-middle-x' : '',
-      extra,
     ].filter(s => s).join(' ')}
 
     class=${_class}

package/parts/tooltip.htm

@@ -26,14 +26,13 @@
     of its own to hang off; wrap the trigger, not the page around it.
   -->
   <:define tag="bs-tooltip:span"
-    class="d-inline-block ${extra ?? ''}"
+    class="d-inline-block"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :title=${''}
-    :placement=${'top'}
-    :html=${false}
-    :trigger=${'hover focus'}
+    ::title=${''}
+    ::placement=${'top'}
+    ::html=${false}
+    ::trigger=${'hover focus'}
 
     // private
     :_build=${() => {