@es-joy/jsoe 0.29.0 → 0.30.0

package/src/jsoe.css

@@ -151,6 +151,24 @@ video.recordedMedia {
   color: #b00;
 }
 
+/* `demo/index-search.js`'s "Check validity" button and its immediately-
+   following result text (`.validityResult`) are both inline (a `<button>`
+   and a `<span>`), so without this they run together with no gap. */
+.checkValidityButton {
+  margin-inline-end: 0.5em;
+}
+
+/* `demo/index-search.js`'s per-section "Get query" result: a query for a
+   deeply-nested schema can be a long single-line JSON string, so this needs
+   the same scrollable-box treatment as `.jsoe-raw-editor` rather than
+   growing the page. */
+.queryResult {
+  max-width: 100%;
+  max-height: 300px;
+  overflow: auto;
+  border: 1px solid;
+}
+
 .visualizer {
   height: 60px;
 }
@@ -211,6 +229,7 @@ video.recordedMedia {
   background-color: purple;
 }
 [data-type="date"] {
+  color: white;
   background-color: teal;
 }
 [data-type="regexp"] {
@@ -258,6 +277,191 @@ video.recordedMedia {
   background-color: lightgray;
 }
 
+/* Search widgets (`buildSearchChoices`/`buildSearchWidget`, `src/search/`):
+   every built widget's custom-element root carries `data-search-kind`
+   (the leaf/composite kind it was built for - `object`, `array`, or, for
+   the "checked"-type factories that have no structural schema of their
+   own, the full tag name e.g. `jsoe-search-error`). Block-level with the
+   same border/padding treatment as `fieldset.xorTypeChoices` above, so a
+   hierarchical type's recursively-nested child widgets land on their own
+   indented line rather than running together inline, and the same
+   background colors as the corresponding view/edit UI `[data-type]` rules
+   above, so a given type reads the same whether browsing or searching. */
+[data-search-kind] {
+  display: block;
+  margin-block: 0.3em;
+  padding: 0.3em 0.6em 0.4em;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  /* Reset explicitly rather than relying on inheriting the page default:
+     a light-background kind (e.g. `tuple`'s "args" widget nested inside a
+     dark-background `function`) would otherwise inherit that ancestor's
+     `color: white` and become unreadable against its own light
+     background. */
+  color: #000;
+}
+
+/* `objectSearchType.js` hides a "Doesn't have" property's own recursed
+   widget via the native `hidden` attribute - restore its effect, since the
+   unconditional `display: block` above (an author rule) would otherwise
+   beat the browser's default `[hidden] { display: none }` UA rule. */
+[data-search-kind][hidden] {
+  display: none;
+}
+
+/* A descendant selector rather than `>` (direct child): every search module
+   places its own `.searchLabel` as a direct child of its widget root except
+   `objectSearchType.js`, which nests it one level deeper inside its own
+   `.searchObjectControls` wrapper (alongside the "Add property" pull-down) -
+   a `>` combinator would leave that one span inline, squished directly
+   against the pull-down's label right after it with no gap. */
+[data-search-kind] .searchLabel {
+  display: block;
+  font-weight: bold;
+  margin-block-end: 0.2em;
+}
+
+/* `objectSearchType.js`'s required-property row, and `searchUtils.js`'s
+   shared `buildOptInFieldset` (array/set/tuple/filelist's element match(es),
+   map/record's key/value, file's name/content-type), both wrap a recursed
+   widget in a `<fieldset disabled>` (native constraint-validation opt-out
+   for the whole subtree, toggled by an "opt in" checkbox) purely for that
+   behavior, not for its default border/padding - which would otherwise
+   double up with the child widget's own `[data-search-kind]` box drawn just
+   inside it. `[class^=...]` matches `buildOptInFieldset`'s `key`-suffixed
+   class regardless of `key`. */
+fieldset.searchRequiredPropertyFieldset,
+fieldset[class^="jsoeSearchOptInFieldset--"] {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* `buildOptInFieldset`'s own "Key matches"/"Element matches"/etc. checkbox
+   label - `[data-search-kind] label`'s `margin-inline-end` above is meant
+   for short *inline* control pairs sharing one line (a "From:"/"To:"
+   pair), not a facet-toggling label like this one, which reads better
+   started on its own line rather than run together with whatever came
+   before it (an adjacent length/size control, another facet's own label,
+   etc). */
+[data-search-kind] .jsoeSearchOptInLabel {
+  display: block;
+}
+
+/* `searchUtils.js`'s `buildAtLeastOneSentinel` - kept off-screen without
+   `display: none`/the `hidden` attribute, which would exempt it from the
+   Constraint Validation API entirely (the same reason `[hidden]` needed a
+   `display: none` override above for `objectSearchType.js`'s "Doesn't
+   have" case, just the opposite problem: there, hiding needed to *win*;
+   here, hiding must *not* affect validity). Standard "visually-hidden"
+   technique - present and rendered, just clipped to nothing. */
+.searchAtLeastOneSentinel {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Inline control pairs built by `searchUtils.js` (a "Mode:"/"Value:" pair
+   from `buildLiteralRegexControls`, a "From:"/"To:" pair from
+   `buildRangeInputsPair`, a trailing tri-state like "Integer:") are each
+   their own `<label>` with no whitespace between them in the built markup,
+   so without this they visually run together (e.g. "To: [input]Integer:
+   [select]"). */
+[data-search-kind] label {
+  margin-inline-end: 0.6em;
+}
+
+/* Nested child widgets get progressively inset, so a hierarchical type's
+   structure (object properties, array/set elements, map/record key-value,
+   union branches, etc.) stays legible several levels deep. */
+[data-search-kind] [data-search-kind] {
+  margin-inline-start: 0.8em;
+}
+
+/* Dark backgrounds get a light text color so labels/inputs stay readable
+   (unlike the view/edit `[data-type]` rules above, which - for these same
+   colors - rely on their content being a short, bolded inline leaf rather
+   than a whole widget's worth of labels and form controls). */
+[data-search-kind="jsoe-search-undefined"] {
+  background-color: green;
+  color: white;
+}
+[data-search-kind="jsoe-search-null"] {
+  background-color: lightgreen;
+}
+[data-search-kind="jsoe-search-nan"] {
+  background-color: green;
+  color: white;
+}
+[data-search-kind="boolean"] {
+  background-color: aqua;
+}
+[data-search-kind="number"] {
+  background-color: violet;
+}
+[data-search-kind="string"] {
+  background-color: lightblue;
+}
+[data-search-kind="array"], [data-search-kind="tuple"] {
+  background-color: lightyellow;
+}
+[data-search-kind="object"], [data-search-kind="record"] {
+  background-color: orange;
+}
+[data-search-kind="symbol"] {
+  background-color: lightgreen;
+}
+[data-search-kind="promise"] {
+  background-color: orange;
+}
+[data-search-kind="function"] {
+  background-color: teal;
+  color: white;
+}
+[data-search-kind="date"] {
+  background-color: teal;
+  color: white;
+}
+[data-search-kind="regexp"] {
+  background-color: yellow;
+}
+[data-search-kind="SpecialRealNumber"] {
+  background-color: red;
+  color: white;
+}
+[data-search-kind="blobHTML"] {
+  background-color: sandybrown;
+}
+[data-search-kind="jsoe-search-error"],
+[data-search-kind="jsoe-search-errors-special"] {
+  background-color: red;
+  color: white;
+}
+[data-search-kind="file"] {
+  background-color: beige;
+}
+[data-search-kind="filelist"] {
+  background-color: bisque;
+}
+[data-search-kind="blob"] {
+  background-color: lightgray;
+}
+[data-search-kind="buffersource"] {
+  background-color: beige;
+}
+[data-search-kind="map"], [data-search-kind="set"],
+[data-search-kind="bigint"], [data-search-kind="domexception"],
+[data-search-kind="jsoe-search-domrect"], [data-search-kind="jsoe-search-dompoint"],
+[data-search-kind="jsoe-search-dommatrix"] {
+  background-color: lightgray;
+}
+
 .typedArrayArea {
   overflow: auto;
   max-height: 250px;

package/src/search/fundamentalTypes/arraySearchType.js

@@ -1,4 +1,8 @@
-import {buildPathLabel, buildLengthSizeControls, readLengthSizeQuery} from '../searchUtils.js';
+import {
+  buildPathLabel, buildLengthSizeControls, readLengthSizeQuery,
+  buildOptInFieldset, readOptInChecked, wireOptInFieldset,
+  buildAtLeastOneSentinel, syncAtLeastOneCheck
+} from '../searchUtils.js';
 import {combineAnd} from '../queryTreeBuilders.js';
 import {findSearchElement, getQueryViaElement, hasGetQuery} from '../searchElementUtils.js';
 import {buildSearchWidget} from '../searchDispatch.js';
@@ -7,12 +11,32 @@ import {buildSearchWidget} from '../searchDispatch.js';
  * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
  */
 
+/**
+ * @param {Element} root - a `jsoe-search-array` element
+ * @returns {void}
+ */
+function syncArrayValidity (root) {
+  syncAtLeastOneCheck(
+    root, () => readLengthSizeQuery(root, '') !== undefined || readOptInChecked(root)
+  );
+}
+
 /**
  * Has length/size of <number>; Is/Is not sparse (README), plus - by
  * recursing into the element schema's own search widget (search plan §6
  * build order) - "the array contains at least one element matching Y",
  * expressed via a `*` path segment (`queryTree.js`) so no dedicated wrapper
- * leaf kind is needed: the two constraints simply combine with `$and`.
+ * leaf kind is needed: the two constraints simply combine with `$and`. The
+ * element match is wrapped in `buildOptInFieldset` (default unchecked/
+ * disabled) so a length/size-only search stays valid: unlike the length/
+ * size inputs (plain, un-`required` numbers), the recursed element widget
+ * can itself carry `required` controls (e.g. a `string` element's Value),
+ * which would otherwise force this whole array invalid just for existing,
+ * whether or not the user actually wants an element constraint. Leaving
+ * both length/size and the element match unconfigured at once is still
+ * invalid, though (`buildAtLeastOneSentinel`) - the same "no absent values"
+ * reasoning as everywhere else, just with two facets where either alone
+ * already suffices.
  * @type {SearchTypeObject}
  */
 const arraySearchType = {
@@ -35,12 +59,23 @@ const arraySearchType = {
       dataset: {searchPath: path, searchKind: 'array'},
       title: label,
       $define: {
+        /** @this {HTMLElement} */
+        connectedCallback () {
+          wireOptInFieldset(this, '', () => syncArrayValidity(this));
+          this.querySelector('input.jsoeSearchSize')?.addEventListener(
+            'input', () => syncArrayValidity(this)
+          );
+          this.querySelector('select.jsoeSearchTriState--')?.addEventListener(
+            'change', () => syncArrayValidity(this)
+          );
+          syncArrayValidity(this);
+        },
         /** @this {HTMLElement} */
         getQuery () {
           const searchPath = this.dataset.searchPath ?? '';
           const lengthLeaf = readLengthSizeQuery(this, searchPath);
           const elementEl = findSearchElement(this, `${searchPath}/*`);
-          const elementLeaf = elementEl && hasGetQuery(elementEl)
+          const elementLeaf = elementEl && hasGetQuery(elementEl) && readOptInChecked(this)
             ? elementEl.getQuery()
             : undefined;
           return combineAnd([lengthLeaf, elementLeaf]);
@@ -54,10 +89,10 @@ const arraySearchType = {
         max: arraySchemaObject.maxLength,
         includeSparse: true
       }),
-      ['div', {class: 'searchArrayElement'}, [
-        ['span', ['Element matches: ']],
-        elementArr
-      ]]
+      ...buildOptInFieldset({
+        name: `${name}-element`, label: 'Element matches', children: [elementArr]
+      }),
+      buildAtLeastOneSentinel()
     ]];
   },
   getQuery: getQueryViaElement

package/src/search/fundamentalTypes/bigintSearchType.js

@@ -1,4 +1,6 @@
-import {buildPathLabel, buildRangeInputsPair, readRangeInputsPair} from '../searchUtils.js';
+import {
+  buildPathLabel, buildRangeInputsPair, readRangeInputsPair, syncRangeValidity
+} from '../searchUtils.js';
 import {makeRangeLeaf} from '../queryTreeBuilders.js';
 import {getQueryViaElement} from '../searchElementUtils.js';
 
@@ -37,6 +39,10 @@ const bigintSearchType = {
       dataset: {searchPath: path, searchKind: 'bigint'},
       title: label,
       $define: {
+        /** @this {HTMLElement} */
+        connectedCallback () {
+          syncRangeValidity(this);
+        },
         /** @this {HTMLElement} */
         getQuery () {
           const {gte: gteStr, lte: lteStr} = readRangeInputsPair(this);

package/src/search/fundamentalTypes/blobSearchType.js

@@ -1,5 +1,6 @@
 import {buildPathLabel, buildLiteralRegexControls, readLiteralRegexQuery} from '../searchUtils.js';
 import {getQueryViaElement} from '../searchElementUtils.js';
+import regexpType from '../../fundamentalTypes/regexpType.js';
 
 /**
  * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
@@ -32,7 +33,7 @@ const blobSearchType = {
       }
     }, [
       ['span', {class: 'searchLabel'}, [`${label} (MIME type)`]],
-      buildLiteralRegexControls({name})
+      buildLiteralRegexControls({name, flagOptions: regexpType.allowedFlags})
     ]];
   },
   getQuery: getQueryViaElement

package/src/search/fundamentalTypes/booleanSearchType.js

@@ -30,7 +30,7 @@ const booleanSearchType = {
       ['span', {class: 'searchLabel'}, [label]],
       ['label', [
         `${label}: `,
-        buildTriStateSelect({name, trueLabel: 'True', falseLabel: 'False'})
+        buildTriStateSelect({name, trueLabel: 'True', falseLabel: 'False', required: true})
       ]]
     ]];
   },

package/src/search/fundamentalTypes/dateSearchType.js

@@ -1,6 +1,8 @@
 import {buildDateInputControl} from '../../fundamentalTypes/dateType.js';
-import {buildPathLabel} from '../searchUtils.js';
-import {makeRangeLeaf} from '../queryTreeBuilders.js';
+import {
+  buildPathLabel, buildTriStateSelect, readTriStateSelect, isExemptedByAncestorHasProperty
+} from '../searchUtils.js';
+import {makeRangeLeaf, makeValidDateCheckLeaf, combineAnd} from '../queryTreeBuilders.js';
 import {getQueryViaElement} from '../searchElementUtils.js';
 
 /**
@@ -13,7 +15,7 @@ import {getQueryViaElement} from '../searchElementUtils.js';
  * methods (`$define`, search plan §8) are installed once on the shared
  * prototype the first time the tag is defined - every instance must read
  * its own state off `this`, never off a build-time closure variable.
- * @param {HTMLElement} el
+ * @param {Element} el
  * @returns {{gte: string, lte: string}}
  */
 function readInputs (el) {
@@ -24,9 +26,69 @@ function readInputs (el) {
 }
 
 /**
- * OR date range/Is Not Range (README). `dateType.js`'s own
- * `buildDateInputControl` is reused twice (range start/end) so the min/max
- * wiring and ISO-slicing stay in one place.
+ * Cross-validates the pair the same way `searchUtils.js`'s
+ * `buildRangeInputsPair` does for its own (numeric) range pairs: leaving
+ * both ends blank is invalid (an added range row needs *some* bound, same
+ * "no absent values" reasoning as `buildLiteralRegexControls`'s Value
+ * input) - but only while the "Valid: (any)" tri-state is still unset.
+ * Once "Valid date" or "Invalid date" is explicitly chosen, that alone is
+ * already a complete constraint, so the range goes back to being fully
+ * optional (an empty range combined with "Valid date" still means
+ * something: "matches any valid date"); "Invalid date" additionally
+ * disables the whole fieldset (an "Invalid Date" has no orderable time
+ * value to compare), which independently exempts it from constraint
+ * validation regardless. If both ends are filled with "To" before "From",
+ * that's invalid either way. `datetime-local` values (`YYYY-MM-DDTHH:mm`)
+ * compare correctly as plain strings, so no `Date` parsing is needed here.
+ * Also called (with `this` as the `<jsoe-search-date>` root itself, which
+ * `this.closest('jsoe-search-date')` still resolves to - `closest` checks
+ * the element itself first) from the widget's own `connectedCallback` below
+ * and from the "Valid" tri-state's own `change` handler (the "at least one
+ * bound" requirement itself flips based on that selection, not just the
+ * range values) - the same reason `searchUtils.js`'s `syncRangeValidity`
+ * gives for `connectedCallback`: the `input`/`change` events wired below
+ * only fire from the user's first interaction, so a freshly-built pair
+ * would otherwise stay "valid" until then. Also relaxed, independently of
+ * its own local "Valid" tri-state, while `isExemptedByAncestorHasProperty`
+ * says an enclosing `objectSearchType.js` has-property row's own "Has"/
+ * "Doesn't have" already provides a complete constraint (e.g. this is a
+ * `date`-typed property's own widget).
+ * @this {Element}
+ * @returns {void}
+ */
+function validateRange () {
+  const root = this.closest('jsoe-search-date');
+  if (!root) {
+    return;
+  }
+  const {gte, lte} = readInputs(root);
+  const [gteInput, lteInput] = /** @type {HTMLInputElement[]} */ (
+    [...root.querySelectorAll('input[type="datetime-local"]')]
+  );
+  const requiresBound = readTriStateSelect(root, 'valid') === undefined &&
+    !isExemptedByAncestorHasProperty(root);
+  const bothEmpty = requiresBound && gte === '' && lte === '';
+  const outOfOrder = gte !== '' && lte !== '' && lte < gte;
+  const emptyMessage = 'Enter at least one bound (From or To).';
+  gteInput.setCustomValidity(bothEmpty ? emptyMessage : '');
+  let lteMessage = '';
+  if (bothEmpty) {
+    lteMessage = emptyMessage;
+  } else if (outOfOrder) {
+    lteMessage = 'End of range must not be before the start of the range.';
+  }
+  lteInput.setCustomValidity(lteMessage);
+}
+
+/**
+ * OR date range/Is Not Range, Is/Is not a valid date (README) -
+ * `dateType.js`'s own `buildDateInputControl` is reused twice (range start/
+ * end) so the min/max wiring and ISO-slicing stay in one place. Choosing
+ * "Invalid date" disables the range fieldset (an "Invalid Date" has no
+ * orderable time value to compare - same as `dateType.js`'s own
+ * `notANum`/`ValidDate`/`InvalidDate` handling treating it as a distinct
+ * state from an ordinary `Date`), producing a `validDateCheck` leaf
+ * (`queryTreeBuilders.js`) instead of/alongside the range leaf.
  * @type {SearchTypeObject}
  */
 const dateSearchType = {
@@ -35,35 +97,66 @@ const dateSearchType = {
     const dateSchemaObject = /** @type {import('zodexy').SzDate} */ (
       schemaObject
     );
+    const name = `${typeNamespace}-date`;
     return ['jsoe-search-date', {
       dataset: {searchPath: path, searchKind: 'date'},
       title: label,
       $define: {
+        /** @this {HTMLElement} */
+        connectedCallback () {
+          validateRange.call(this);
+        },
         /** @this {HTMLElement} */
         getQuery () {
+          const searchPath = this.dataset.searchPath ?? '';
+          const validCheck = readTriStateSelect(this, 'valid');
+          const validLeaf = validCheck === undefined
+            ? undefined
+            : makeValidDateCheckLeaf(searchPath, validCheck);
           const {gte, lte} = readInputs(this);
-          if (!gte && !lte) {
-            return undefined;
-          }
-          return makeRangeLeaf(
-            this.dataset.searchPath ?? '',
-            'date',
-            {
+          const rangeLeaf = validCheck === false || (!gte && !lte)
+            ? undefined
+            : makeRangeLeaf(searchPath, 'date', {
               ...(gte ? {$gte: new Date(gte).toISOString()} : {}),
               ...(lte ? {$lte: new Date(lte).toISOString()} : {})
-            }
-          );
+            });
+          return combineAnd([validLeaf, rangeLeaf]);
         }
       }
     }, [
       ['span', {class: 'searchLabel'}, [label]],
       ['label', [
-        'From: ',
-        buildDateInputControl({name: `${typeNamespace}-date-gte`, dateSchemaObject})
+        'Valid: ',
+        buildTriStateSelect({
+          name: `${name}-valid`, key: 'valid', trueLabel: 'Valid date',
+          falseLabel: 'Invalid date',
+          /** @this {HTMLElement} */
+          onChange () {
+            const root = this.closest('jsoe-search-date');
+            const fieldset = root?.querySelector('fieldset.searchDateRangeFieldset');
+            if (fieldset) {
+              /** @type {HTMLFieldSetElement} */ (fieldset).disabled =
+                /** @type {HTMLSelectElement} */ (this).value === 'false';
+            }
+            if (root) {
+              validateRange.call(root);
+            }
+          }
+        })
       ]],
-      ['label', [
-        'To: ',
-        buildDateInputControl({name: `${typeNamespace}-date-lte`, dateSchemaObject})
+      ['fieldset', {class: 'searchDateRangeFieldset'}, [
+        ['label', [
+          'From: ',
+          buildDateInputControl({
+            name: `${name}-gte`, dateSchemaObject, onValidate: validateRange
+          })
+        ]],
+        ['label', [
+          'To: ',
+          buildDateInputControl({
+            name: `${name}-lte`, dateSchemaObject, onValidate: validateRange
+          })
+        ]]
       ]]
     ]];
   },

package/src/search/fundamentalTypes/domexceptionSearchType.js

@@ -1,19 +1,37 @@
 import {domExceptionNames} from '../../fundamentalTypes/domexceptionType.js';
-import {buildPathLabel, buildMultiSelect, readMultiSelect, buildLiteralRegexControls, readLiteralRegexQuery} from '../searchUtils.js';
+import {
+  buildPathLabel, buildMultiSelect, readMultiSelect, buildLiteralRegexControls,
+  readLiteralRegexQuery, buildOptInFieldset, readOptInChecked, wireOptInFieldset,
+  buildAtLeastOneSentinel, syncAtLeastOneCheck
+} from '../searchUtils.js';
 import {makeMultiSelectLeaf, combineAnd} from '../queryTreeBuilders.js';
 import {getQueryViaElement} from '../searchElementUtils.js';
+import regexpType from '../../fundamentalTypes/regexpType.js';
 
 /**
  * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
  */
 
+/**
+ * @param {Element} root - a `jsoe-search-domexception` element
+ * @returns {void}
+ */
+function syncDomexceptionValidity (root) {
+  syncAtLeastOneCheck(
+    root, () => readMultiSelect(root).length > 0 || readOptInChecked(root, 'message')
+  );
+}
+
 /**
  * DOMException: Literal/Regex search of child string properties; also
  * pull-down of name for DOMException (README) - `.name` gets the
  * multi-select pull-down (its standard predefined values, imported as-is
  * from `domexceptionType.js`'s own `domExceptionNames` export rather than a
- * second copy of the list), `.message` gets the usual literal/regex/
- * does-not-contain control, combined via `$and`.
+ * second copy of the list, and already properly optional on its own - an
+ * empty selection needs no opt-in gate), `.message` gets the usual literal/
+ * regex/does-not-contain control (wrapped in `buildOptInFieldset`, since
+ * that one *does* carry a `required` Value input), combined via `$and`.
+ * `buildAtLeastOneSentinel` requires at least one of the two.
  * @type {SearchTypeObject}
  */
 const domexceptionSearchType = {
@@ -24,6 +42,14 @@ const domexceptionSearchType = {
       dataset: {searchPath: path, searchKind: 'domexception'},
       title: label,
       $define: {
+        /** @this {HTMLElement} */
+        connectedCallback () {
+          this.querySelector('select.jsoeSearchMultiSelect')?.addEventListener(
+            'change', () => syncDomexceptionValidity(this)
+          );
+          wireOptInFieldset(this, 'message', () => syncDomexceptionValidity(this));
+          syncDomexceptionValidity(this);
+        },
         /** @this {HTMLElement} */
         getQuery () {
           const searchPath = this.dataset.searchPath ?? '';
@@ -31,9 +57,9 @@ const domexceptionSearchType = {
           const nameLeaf = selectedNames.length
             ? makeMultiSelectLeaf(`${searchPath}/name`, {$in: selectedNames})
             : undefined;
-          const messageLeaf = readLiteralRegexQuery(
-            this, `${searchPath}/message`, 'message'
-          );
+          const messageLeaf = readOptInChecked(this, 'message')
+            ? readLiteralRegexQuery(this, `${searchPath}/message`, 'message')
+            : undefined;
           return combineAnd([nameLeaf, messageLeaf]);
         }
       }
@@ -43,10 +69,13 @@ const domexceptionSearchType = {
         ['span', ['Name: ']],
         buildMultiSelect({name: `${name}-name`, options: domExceptionNames})
       ]],
-      ['div', {class: 'domexceptionMessage'}, [
-        ['span', ['Message: ']],
-        buildLiteralRegexControls({name: `${name}-message`, key: 'message'})
-      ]]
+      ...buildOptInFieldset({
+        name: `${name}-message`, key: 'message', label: 'Message',
+        children: [buildLiteralRegexControls({
+          name: `${name}-message`, key: 'message', flagOptions: regexpType.allowedFlags
+        })]
+      }),
+      buildAtLeastOneSentinel()
     ]];
   },
   getQuery: getQueryViaElement

package/src/search/fundamentalTypes/enumSearchType.js

@@ -19,6 +19,10 @@ import {getQueryViaElement} from '../searchElementUtils.js';
  * from its values (unlike a plain `z.enum([...])`, where they're the same)
  * still gets a usable widget here, just not that extra key-vs-value mode
  * yet; `values`'s keys are shown alongside their value as a hint.
+ * `buildMultiSelect`'s `required` leaves the whole selection invalid until
+ * at least one value is picked, natively (no build-time-empty gap like
+ * `buildRangeInputsPair`'s custom validity needed a `connectedCallback`
+ * for - `<select multiple required>` is evaluated by the browser itself).
  * @type {SearchTypeObject}
  */
 const enumSearchType = {
@@ -49,7 +53,7 @@ const enumSearchType = {
       }
     }, [
       ['span', {class: 'searchLabel'}, [label]],
-      buildMultiSelect({name, options})
+      buildMultiSelect({name, options, required: true})
     ]];
   },
   getQuery: getQueryViaElement