@nldd/design-system 0.8.83 → 0.8.84

package/dist/components/forms/form-field/form-field.template.js

@@ -30,11 +30,6 @@ export function formFieldTemplate(component) {
 			${headerEl}
 			<div class="form-field__main">
 				<slot></slot>
-				<div class="form-field__errors"
-					aria-live="polite"
-				>
-					<slot name="errors"></slot>
-				</div>
 				<slot name="help"></slot>
 			</div>
 		</div>
@@ -50,14 +45,4 @@ export function formFieldHelpTextTemplate(_component) {
 		</p>
 	`;
 }
-/* ============================================================
-   nldd-form-field-error-text
-   ============================================================ */
-export function formFieldErrorTextTemplate(_component) {
-    return html `
-		<p class="form-field__error-text">
-			<slot></slot>
-		</p>
-	`;
-}
 //# sourceMappingURL=form-field.template.js.map

package/dist/components/forms/form-field/form-field.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-field.template.js","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.template.ts"],"names":[],"mappings":"AAAA,4FAA4F;AAC5F,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAKpD;;kEAEkE;AAElE,SAAS,cAAc,CAAC,KAAa;IACpC,OAAO,IAAI,CAAA,sCAAsC,KAAK,SAAS,CAAC;AACjE,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,SAAwB;IACzD,MAAM,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,kBAAkB,GAAG,OAAO,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;IAC9D,MAAM,aAAa,GAAG,CAAC,QAAQ,IAAI,CAAC,kBAAkB,CAAC;IAEvD,MAAM,QAAQ,GAAG,IAAI,CAAA;mCACa,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;KAC7D,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA;;cAEN,CAAC,CAAQ,EAAE,EAAE,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC;;OAE7C,SAAS,CAAC,KAAK;OACf,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,OAAO;;IAEzE,CAAC,CAAC,CAAC,OAAO;KACT,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAA;iDACmB,SAAS,CAAC,eAAe;IACtE,CAAC,CAAC,CAAC,OAAO;;EAEZ,CAAC;IAEF,OAAO,IAAI,CAAA;;KAEP,QAAQ;;;;;;;;;;;EAWX,CAAC;AACH,CAAC;AAED;;kEAEkE;AAElE,MAAM,UAAU,yBAAyB,CAAC,UAAiC;IAC1E,OAAO,IAAI,CAAA;;;;EAIV,CAAC;AACH,CAAC;AAED;;kEAEkE;AAElE,MAAM,UAAU,0BAA0B,CAAC,UAAkC;IAC5E,OAAO,IAAI,CAAA;;;;EAIV,CAAC;AACH,CAAC"}
+{"version":3,"file":"form-field.template.js","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.template.ts"],"names":[],"mappings":"AAAA,4FAA4F;AAC5F,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAIpD;;kEAEkE;AAElE,SAAS,cAAc,CAAC,KAAa;IACpC,OAAO,IAAI,CAAA,sCAAsC,KAAK,SAAS,CAAC;AACjE,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,SAAwB;IACzD,MAAM,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,kBAAkB,GAAG,OAAO,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;IAC9D,MAAM,aAAa,GAAG,CAAC,QAAQ,IAAI,CAAC,kBAAkB,CAAC;IAEvD,MAAM,QAAQ,GAAG,IAAI,CAAA;mCACa,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;KAC7D,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA;;cAEN,CAAC,CAAQ,EAAE,EAAE,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC;;OAE7C,SAAS,CAAC,KAAK;OACf,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,OAAO;;IAEzE,CAAC,CAAC,CAAC,OAAO;KACT,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAA;iDACmB,SAAS,CAAC,eAAe;IACtE,CAAC,CAAC,CAAC,OAAO;;EAEZ,CAAC;IAEF,OAAO,IAAI,CAAA;;KAEP,QAAQ;;;;;;EAMX,CAAC;AACH,CAAC;AAED;;kEAEkE;AAElE,MAAM,UAAU,yBAAyB,CAAC,UAAiC;IAC1E,OAAO,IAAI,CAAA;;;;EAIV,CAAC;AACH,CAAC"}

package/dist/components/forms/form-section/form-section.d.ts

@@ -1,18 +1,18 @@
 /**
  * Nederlandse Digitale Dienst Form Section Component
  *
- * Plain custom element (extends HTMLElement, no Lit) — light-DOM render
- * lost een NVDA + Firefox a11y-bug op waar shadow-DOM <fieldset> + <legend>
- * niet betrouwbaar als group-label aangekondigd worden voor slotted
- * controls. Native fieldset/legend in light DOM werkt correct over alle
- * AT/browser-combinaties.
+ * Plain custom element (extends HTMLElement, no Lit). The light-DOM render
+ * works around an NVDA + Firefox a11y bug where a shadow-DOM <fieldset> +
+ * <legend> is not reliably announced as the group label for slotted controls.
+ * A native fieldset/legend in the light DOM works correctly across all
+ * AT/browser combinations.
  *
  * **Differs from shadow components:**
- * - Geen shadowRoot — alle children leven in light DOM (binnen het
- *   gerenderde <fieldset>).
- * - Geen Lit — pure HTMLElement met handmatige DOM-mutation.
- * - **Vereist global stylesheet import** — `dist/css/form-section.css`
- *   (of `global.css`). Form-section heeft geen shadow stylesheet.
+ * - No shadowRoot: all children live in the light DOM (inside the rendered
+ *   <fieldset>).
+ * - No Lit: a plain HTMLElement with manual DOM mutation.
+ * - **Requires a global stylesheet import**: `dist/css/form-section.css` (or
+ *   `global.css`). Form-section has no shadow stylesheet.
  *
  * Renders to:
  *
@@ -28,22 +28,20 @@
  *         </fieldset>
  *     </nldd-form-section>
  *
- * **Accessibility note**: de title rendert als `<legend>`. Dat is
- * semantisch een **groep-label**, geen heading. Screenreaders
- * kondigen 't aan wanneer de gebruiker in de fieldset komt, maar
- * gebruikers die met de H-toets door headings springen slaan 'm
- * over. Visueel lijkt 't op een heading; gebruik dit component dus
- * voor *form-grouping*, niet als pagina-structuur. Voor echte
- * page-headings: gebruik een apart heading-element boven het form.
+ * **Accessibility note**: the title renders as a `<legend>`. Semantically that
+ * is a **group label**, not a heading. Screen readers announce it when the user
+ * enters the fieldset, but users jumping through headings with the H key skip
+ * it. Visually it looks like a heading, so use this component for *form
+ * grouping*, not as page structure. For real page headings, use a separate
+ * heading element above the form.
  *
- * **Supporting-text lengte**: de subtitle staat als `<span>` binnen
- * de `<legend>` zodat SR 'm meeleest als group label. Bijwerking: bij
- * elke field-entry binnen de sectie wordt de hele legend (titel +
- * subtitel) opnieuw uitgesproken. Houd `supporting-text` daarom kort
- * (richtlijn: ≤ ~80 tekens) en gebruik 'm voor groep-introductie
- * ("Vul je adresgegevens in"), niet voor uitgebreide instructies.
- * Voor langere uitleg op een specifiek veld: gebruik
- * `nldd-form-field-help-text` op dat veld.
+ * **Supporting-text length**: the subtitle sits as a `<span>` inside the
+ * `<legend>` so a screen reader reads it along as the group label. Side effect:
+ * on every field entry within the section, the whole legend (title + subtitle)
+ * is spoken again. Keep `supporting-text` short (roughly 80 characters or less)
+ * and use it to introduce the group ("Vul je adresgegevens in"), not for
+ * detailed instructions. For a longer explanation on one specific field, use
+ * `nldd-form-field-help-text` on that field.
  *
  *     <nldd-form>
  *         <nldd-form-section text="Persoonsgegevens" supporting-text="Vul je gegevens in.">
@@ -60,10 +58,10 @@
  *
  * @element nldd-form-section
  *
- * @attr {string} text - Heading-tekst (gerenderd in `<legend>`).
- * @attr {string} supporting-text - Korte beschrijving onder de heading. Houd ≤ ~80 tekens (zie a11y-note).
+ * @attr {string} text - Heading text (rendered in the `<legend>`).
+ * @attr {string} supporting-text - Short description under the heading. Keep it to roughly 80 characters or less (see the a11y note).
  *
- * Children van de form-section worden in `.form-section__main` geplaatst.
+ * Children of the form-section are placed in `.form-section__main`.
  */
 export declare class NLDDFormSection extends HTMLElement {
     static get observedAttributes(): string[];

package/dist/components/forms/form-section/form-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-section.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-section/form-section.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AAQH,qBAAa,eAAgB,SAAQ,WAAW;IAC/C,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,SAAS,CAAoC;IACrD,OAAO,CAAC,OAAO,CAAkC;IACjD,OAAO,CAAC,KAAK,CAA+B;IAC5C,OAAO,CAAC,SAAS,CAAiC;IAClD,OAAO,CAAC,iBAAiB,CAAS;IAElC,IAAI,IAAI,IAAI,MAAM,CAEjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAGrB;IAED,IAAI,cAAc,IAAI,MAAM,CAE3B;IACD,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,EAG/B;IAED,iBAAiB,IAAI,IAAI;IAyBzB,oBAAoB,IAAI,IAAI;IAK5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAU5C,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,eAAe;IA4BvB,OAAO,CAAC,aAAa;CAsCrB;AAMD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}
+{"version":3,"file":"form-section.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-section/form-section.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AAQH,qBAAa,eAAgB,SAAQ,WAAW;IAC/C,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,SAAS,CAAoC;IACrD,OAAO,CAAC,OAAO,CAAkC;IACjD,OAAO,CAAC,KAAK,CAA+B;IAC5C,OAAO,CAAC,SAAS,CAAiC;IAClD,OAAO,CAAC,iBAAiB,CAAS;IAElC,IAAI,IAAI,IAAI,MAAM,CAEjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAGrB;IAED,IAAI,cAAc,IAAI,MAAM,CAE3B;IACD,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,EAG/B;IAED,iBAAiB,IAAI,IAAI;IAyBzB,oBAAoB,IAAI,IAAI;IAK5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAU5C,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,eAAe;IA4BvB,OAAO,CAAC,aAAa;CAsCrB;AAMD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}

package/dist/components/forms/form-section/form-section.js

@@ -1,18 +1,18 @@
 /**
  * Nederlandse Digitale Dienst Form Section Component
  *
- * Plain custom element (extends HTMLElement, no Lit) — light-DOM render
- * lost een NVDA + Firefox a11y-bug op waar shadow-DOM <fieldset> + <legend>
- * niet betrouwbaar als group-label aangekondigd worden voor slotted
- * controls. Native fieldset/legend in light DOM werkt correct over alle
- * AT/browser-combinaties.
+ * Plain custom element (extends HTMLElement, no Lit). The light-DOM render
+ * works around an NVDA + Firefox a11y bug where a shadow-DOM <fieldset> +
+ * <legend> is not reliably announced as the group label for slotted controls.
+ * A native fieldset/legend in the light DOM works correctly across all
+ * AT/browser combinations.
  *
  * **Differs from shadow components:**
- * - Geen shadowRoot — alle children leven in light DOM (binnen het
- *   gerenderde <fieldset>).
- * - Geen Lit — pure HTMLElement met handmatige DOM-mutation.
- * - **Vereist global stylesheet import** — `dist/css/form-section.css`
- *   (of `global.css`). Form-section heeft geen shadow stylesheet.
+ * - No shadowRoot: all children live in the light DOM (inside the rendered
+ *   <fieldset>).
+ * - No Lit: a plain HTMLElement with manual DOM mutation.
+ * - **Requires a global stylesheet import**: `dist/css/form-section.css` (or
+ *   `global.css`). Form-section has no shadow stylesheet.
  *
  * Renders to:
  *
@@ -28,22 +28,20 @@
  *         </fieldset>
  *     </nldd-form-section>
  *
- * **Accessibility note**: de title rendert als `<legend>`. Dat is
- * semantisch een **groep-label**, geen heading. Screenreaders
- * kondigen 't aan wanneer de gebruiker in de fieldset komt, maar
- * gebruikers die met de H-toets door headings springen slaan 'm
- * over. Visueel lijkt 't op een heading; gebruik dit component dus
- * voor *form-grouping*, niet als pagina-structuur. Voor echte
- * page-headings: gebruik een apart heading-element boven het form.
+ * **Accessibility note**: the title renders as a `<legend>`. Semantically that
+ * is a **group label**, not a heading. Screen readers announce it when the user
+ * enters the fieldset, but users jumping through headings with the H key skip
+ * it. Visually it looks like a heading, so use this component for *form
+ * grouping*, not as page structure. For real page headings, use a separate
+ * heading element above the form.
  *
- * **Supporting-text lengte**: de subtitle staat als `<span>` binnen
- * de `<legend>` zodat SR 'm meeleest als group label. Bijwerking: bij
- * elke field-entry binnen de sectie wordt de hele legend (titel +
- * subtitel) opnieuw uitgesproken. Houd `supporting-text` daarom kort
- * (richtlijn: ≤ ~80 tekens) en gebruik 'm voor groep-introductie
- * ("Vul je adresgegevens in"), niet voor uitgebreide instructies.
- * Voor langere uitleg op een specifiek veld: gebruik
- * `nldd-form-field-help-text` op dat veld.
+ * **Supporting-text length**: the subtitle sits as a `<span>` inside the
+ * `<legend>` so a screen reader reads it along as the group label. Side effect:
+ * on every field entry within the section, the whole legend (title + subtitle)
+ * is spoken again. Keep `supporting-text` short (roughly 80 characters or less)
+ * and use it to introduce the group ("Vul je adresgegevens in"), not for
+ * detailed instructions. For a longer explanation on one specific field, use
+ * `nldd-form-field-help-text` on that field.
  *
  *     <nldd-form>
  *         <nldd-form-section text="Persoonsgegevens" supporting-text="Vul je gegevens in.">
@@ -60,10 +58,10 @@
  *
  * @element nldd-form-section
  *
- * @attr {string} text - Heading-tekst (gerenderd in `<legend>`).
- * @attr {string} supporting-text - Korte beschrijving onder de heading. Houd ≤ ~80 tekens (zie a11y-note).
+ * @attr {string} text - Heading text (rendered in the `<legend>`).
+ * @attr {string} supporting-text - Short description under the heading. Keep it to roughly 80 characters or less (see the a11y note).
  *
- * Children van de form-section worden in `.form-section__main` geplaatst.
+ * Children of the form-section are placed in `.form-section__main`.
  */
 const FIELDSET_CLASS = 'form-section';
 const HEADER_CLASS = 'form-section__header';
@@ -198,7 +196,7 @@ export class NLDDFormSection extends HTMLElement {
         // Accessibility implication: without a legend the <fieldset> has no
         // accessible name. Screen reader behavior varies (Chrome: "group", Firefox:
         // nothing). That is a deliberate choice: a form section can also be used
-        // purely as visual grouping (divider + padding) without a heading. Want a
+        // purely as visual grouping (the padding around it) without a heading. Want a
         // screen reader name without a visible title? Wrap the form in an
         // nldd-form-section WITH text, or use aria-labelledby on the individual
         // fields.

package/dist/components/forms/form-section/form-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-section.js","sourceRoot":"","sources":["../../../../src/components/forms/form-section/form-section.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"form-section.js","sourceRoot":"","sources":["../../../../src/components/forms/form-section/form-section.ts"],"names":[],"mappings":"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"}

package/dist/components/forms/validation-list/validation-list.d.ts

@@ -0,0 +1,193 @@
+/**
+ * Nederlandse Digitale Dienst Validation List (Lit + TypeScript)
+ *
+ * Everything a value has to satisfy, in one list. A requirement you can state
+ * up front is an item with a rule, and it checks itself while you type. One
+ * only a server can decide is an item without a rule, and the app names it in
+ * `unmet` on the control.
+ *
+ * The list has two modes and `judging` is the switch. Before a verdict it shows
+ * its hints, which are the requirements of the field. After one it shows
+ * everything the value does not satisfy, and the hints are gone. It throws that
+ * switch itself the moment its control turns `invalid`, so when the field is
+ * judged is the consumer's decision, and the right moment is on submit.
+ *
+ * Hints are off by default. A phone number does not need its format spelled out
+ * before anyone has typed, while the rules for a password do.
+ *
+ * There are no checkmarks. The control already shows a validation icon of its
+ * own, and repeating that per line says the same thing three times.
+ *
+ * @element nldd-validation-list
+ *
+ * @attr {string} for - Id of the control this list is about. Not needed inside an nldd-form-field, which hands its own control over.
+ * @attr {boolean} hint - Show every item before there is a verdict, as the requirements of the field. Overridable per item.
+ * @attr {boolean} judging - Drop the hints, because this field has been judged. Turned on by the list itself once its control is `invalid`, and settable by hand. What turns red follows `invalid`, not this.
+ *
+ * @slot - nldd-validation-item elements.
+ *
+ * ─────────────────────────────────────────────────────────────────────────
+ *
+ * @element nldd-validation-item
+ *
+ * @attr {string} match - Regular expression the value has to contain. Not anchored, unlike the native `pattern`: `[A-Z]` means "has a capital in it".
+ * @attr {number} minlength - Fewest characters the value may have.
+ * @attr {number} maxlength - Most characters the value may have.
+ * @attr {boolean} required - The value may not be empty. Use it on a field whose other rules would pass an empty value.
+ * @attr {boolean} hint - Show this item before there is a verdict, whatever the list says.
+ * @attr {boolean} unmet - Whether the value fails this item. Managed by the list; do not set it yourself.
+ * @attr {boolean} visible - Whether the item is on screen. Managed by the list.
+ *
+ * @slot - The text of the requirement.
+ *
+ * ─────────────────────────────────────────────────────────────────────────
+ *
+ * Give every item an id that names its field as well as its rule. An id has to
+ * be unique in the whole document, and `length` is the first thing three fields
+ * in one form will all reach for.
+ *
+ * @example
+ * <nldd-form-field label="Wachtwoord">
+ *   <nldd-password-field name="password" invalid unmet="password-breach"></nldd-password-field>
+ *   <nldd-validation-list hint>
+ *     <nldd-validation-item id="password-length" minlength="8">Minimaal 8 tekens</nldd-validation-item>
+ *     <nldd-validation-item id="password-capital" match="[A-Z]">Een hoofdletter</nldd-validation-item>
+ *     <nldd-validation-item id="password-breach">Dit wachtwoord staat in een bekend datalek</nldd-validation-item>
+ *   </nldd-validation-list>
+ * </nldd-form-field>
+ */
+import { LitElement, type PropertyValues } from 'lit';
+export declare class NLDDValidationItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Not anchored, unlike the native `pattern`. See the note at the top. */
+    match: string;
+    minlength?: number;
+    maxlength?: number;
+    /** For a field whose other rules would pass an empty value. See `test`. */
+    required: boolean;
+    hint: boolean;
+    unmet: boolean;
+    visible: boolean;
+    /** Whether this item judges itself, or waits for the app to name it. */
+    get hasRule(): boolean;
+    /**
+     * Whether `value` satisfies this item, or null when there is nothing to
+     * satisfy because the item carries no rule.
+     *
+     * An empty value is held against the rules like any other, so "minimaal 8
+     * tekens" fails on it, because it does. What keeps a fresh field from
+     * lighting up all of its requirements is not this method but the verdict: an
+     * item only turns critical once the control says `invalid`, and an untouched
+     * field has not been judged yet.
+     */
+    test(value: string): boolean | null;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult;
+}
+export declare class NLDDValidationList extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Id of the control, for a list that sits outside an nldd-form-field. */
+    for: string;
+    hint: boolean;
+    /**
+     * Whether the list is judging the value or explaining what the field wants.
+     *
+     * The switch between the two modes. Off, the hints state the requirements;
+     * on, they are gone and what is left is whatever the value fails. It goes on
+     * the moment the control is `invalid`, and then stays on. A field that has
+     * been judged does not become unjudged: repair the value and the control
+     * turns valid again, but the question the hints answered has been asked and
+     * settled, so bringing them back would undo the one thing the verdict
+     * achieved.
+     *
+     * What it does not decide is what turns red. That follows `invalid` on the
+     * control and nothing else, so a line never goes critical under a field that
+     * looks fine.
+     *
+     * So when a field starts being judged is decided by whoever writes `invalid`
+     * on the control, and the moment to do that is on submit. Writing it while
+     * someone is still typing turns a field red about a value that is not
+     * finished, which is the one thing this list is built to avoid.
+     *
+     * Set it yourself to flip the mode without a control saying anything, and
+     * clear it to put the field back the way it started, which is what a reset
+     * wants.
+     */
+    judging: boolean;
+    /**
+     * The control this list is about.
+     *
+     * Set by the wrapping nldd-form-field, which already answers "which control
+     * is this field about" for the label and the description. A `for` of its own
+     * wins, and setting this property directly is what a test or a story does.
+     */
+    control: Element | null;
+    /** The value to check, when there is no control to read it from. */
+    value?: string;
+    private _resolved;
+    private _observer;
+    private _onInput;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Resolving and latching happen before the render, not after it.
+     *
+     * Both write a reactive property, `_resolved` and `judging`, and writing one
+     * from `updated()` asks for a second render on top of the one that just
+     * finished. That is a dev-mode warning on every field that arrives already
+     * invalid. Reading what they need does not take a render: the control is
+     * found by id or handed over as a property, and the items are light DOM.
+     */
+    willUpdate(changed: PropertyValues): void;
+    updated(): void;
+    /**
+     * A field that has been judged does not become unjudged, so this only ever
+     * goes on. What turns red is `invalid` and nothing else; this decides only
+     * whether the hints are still on screen.
+     */
+    private _latchJudging;
+    render(): import("lit-html").TemplateResult;
+    private get _items();
+    /**
+     * Finds the control and starts listening to it.
+     *
+     * `getRootNode()` and not `document`: an IDREF only resolves inside its own
+     * tree, and a consumer who puts this form inside a component of their own
+     * would otherwise find nothing.
+     */
+    private _resolve;
+    private _detach;
+    private _currentValue;
+    /**
+     * Decides per item whether it is met, and what that makes visible.
+     *
+     * An item with a rule judges itself; one without waits to be named in
+     * `unmet` on the control. Never both: a rule is held against the value as it
+     * is now, while `unmet` is a snapshot of the last check and therefore older,
+     * so letting the snapshot win would show a mistake that has been fixed.
+     */
+    private _evaluate;
+    /**
+     * Hands the verdict to the control, so a form with a failing rule does not
+     * submit.
+     *
+     * Only the rules. What the app named in `unmet` it already knows, and
+     * reporting that back would be this list telling the app what the app told
+     * it.
+     *
+     * Through `setCustomValidity` and not into `internals` directly. A control
+     * reports its own `required` and `pattern` through the same channel, and
+     * `setValidity` writes the whole set of flags at once: writing here would
+     * erase those on the way in, and they would erase this on the next render.
+     * The platform's own name for a reason of your own is the one both sides
+     * understand, and a plain native input answers to it too.
+     */
+    private _reportValidity;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-validation-list': NLDDValidationList;
+        'nldd-validation-item': NLDDValidationItem;
+    }
+}
+//# sourceMappingURL=validation-list.d.ts.map

package/dist/components/forms/validation-list/validation-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-list.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/validation-list/validation-list.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAiBtD,qBACa,kBAAmB,SAAQ,UAAU;IACjD,OAAgB,MAAM,0BAAwB;IAE9C,0EAA0E;IAE1E,KAAK,SAAM;IAGX,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,2EAA2E;IAE3E,QAAQ,UAAS;IAGjB,IAAI,UAAS;IAGb,KAAK,UAAS;IAGd,OAAO,UAAS;IAEhB,wEAAwE;IACxE,IAAI,OAAO,IAAI,OAAO,CAKrB;IAED;;;;;;;;;OASG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAS1B,iBAAiB;IAKjB,MAAM;CAGf;AAOD,qBACa,kBAAmB,SAAQ,UAAU;IACjD,OAAgB,MAAM,0BAAwB;IAE9C,0EAA0E;IAE1E,GAAG,SAAM;IAGT,IAAI,UAAS;IAEb;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IAEH,OAAO,UAAS;IAEhB;;;;;;OAMG;IAEH,OAAO,EAAE,OAAO,GAAG,IAAI,CAAQ;IAE/B,oEAAoE;IAEpE,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,OAAO,CAAC,SAAS,CAAwB;IAEzC,OAAO,CAAC,SAAS,CAAiC;IAClD,OAAO,CAAC,QAAQ,CAA0B;IAEjC,iBAAiB;IAKjB,oBAAoB;IAK7B;;;;;;;;OAQG;IACM,UAAU,CAAC,OAAO,EAAE,cAAc;IAKlC,OAAO;IAIhB;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAIZ,MAAM;IAIf,OAAO,KAAK,MAAM,GAGjB;IAED;;;;;;OAMG;IACH,OAAO,CAAC,QAAQ;IAsBhB,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,aAAa;IAMrB;;;;;;;OAOG;IACH,OAAO,CAAC,SAAS;IAuCjB;;;;;;;;;;;;;;OAcG;IACH,OAAO,CAAC,eAAe;CAKvB;AAGD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,sBAAsB,EAAE,kBAAkB,CAAC;QAC3C,sBAAsB,EAAE,kBAAkB,CAAC;KAC3C;CACD"}