@markout-lang/bootstrap-kit 0.2.1 → 0.2.2

package/README.md

@@ -108,6 +108,19 @@ That holds however deeply the component sits: a `bs-toast :aka="saved"`
 written inside a `bs-toast-container` is still named where you wrote it, so
 `saved.open = true` reaches it from anywhere on the page.
 
+`bs-input` and `bs-textarea` answer `valid` the same way -- is there a value,
+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>
+```
+
+It is not the negation of the error state. An empty field is not marked
+wrong, which is what keeps a form from opening in red, and it is not
+something to submit either -- so it shows nothing and answers `false`.
+`required` is what makes empty an error as well as a gap.
+
 **Optional regions are `:if`.** A region that exists only when a parameter
 was given is written `:if=${header}`, and nothing inside it evaluates while
 the condition is false — which is what makes `${user.name}` safe to write in
@@ -230,6 +243,9 @@ commented.
 | `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.
+
 ### Components
 
 | Tag | Parameters |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markout-lang/bootstrap-kit",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "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/input.htm

@@ -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.
@@ -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}>
@@ -123,6 +137,9 @@
     :_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}

package/parts/navbar.htm

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