@markout-lang/bootstrap-kit 0.2.1 → 0.3.0

package/parts/input.htm

@@ -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.
@@ -19,6 +19,17 @@
     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 —
+
+      <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
+    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
+    what makes empty an error as well as a gap.
+
     Floating labels are the same control with the label after the input
     instead of before it — Bootstrap's CSS keys off that order — so the two
     layouts are two regions rather than one with a class toggled on it.
@@ -27,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}`}
@@ -49,6 +60,9 @@
     :_invalid=${_empty ? required : !check(value)}
     :_class=${['form-control', size ? `form-control-${size}` : '']
               .filter(s => s).join(' ')}
+
+    // read from outside: is there a value, and does it pass?
+    :valid=${!_empty && check(value)}
   >
     <!--- plain layout: label, control, feedback -->
     <div :if=${!floating}>
@@ -105,24 +119,27 @@
     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}`}
     :_helpId=${`bs-textarea-help-${$id}`}
     :_empty=${value === '' || value == null}
     :_invalid=${_empty ? required : !check(value)}
+
+    // read from outside, as bs-input's is
+    :valid=${!_empty && check(value)}
   >
     <label class="form-label"
       for=${_id}
@@ -155,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

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

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

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

@@ -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}`}
@@ -40,6 +40,17 @@
       extra,
     ].filter(s => s).join(' ')}
 
+    // The gap under the links is only wanted while they are stacked, which
+    // is up to `expand` and not to any one breakpoint: left at `mb-lg-0` it
+    // would survive into a bar that has already gone horizontal and push the
+    // links up off the brand's line. A navbar that never collapses has no
+    // stacked state to space out, hence the plain `mb-0`.
+    :_navClass=${[
+      'navbar-nav',
+      'me-auto',
+      expand ? `mb-2 mb-${expand}-0` : 'mb-0',
+    ].join(' ')}
+
     class=${_class}
     :class-sticky-top=${sticky}
     :class-fixed-top=${fixed}
@@ -59,7 +70,7 @@
       </button>
 
       <div class="collapse navbar-collapse" id=${_id}>
-        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+        <ul class=${_navClass}>
           <li class="nav-item" :for-each=${items} :for-as="item">
             <a class="nav-link"
               :class-active=${item.active}

package/parts/offcanvas.htm

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

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

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

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

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

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

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

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

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

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

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

@@ -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=${() => {