Improved docs.

docs/index.html

@@ -2775,20 +2775,20 @@ <h3>Syntax</h3>
 <span style="color: #000000">    </span><span style="color: #800000">&lt;input</span><span style="color: #000000"> </span><span style="color: #FF0000">type</span><span style="color: #000000">=</span><span style="color: #0000FF">&quot;submit&quot;</span><span style="color: #800000">&gt;</span>
 <span style="color: #800000">&lt;/form&gt;</span>
 </code></pre>
-			<p>The name defined in <code>data-ok</code> is the key of the validator dictionary object defined in the JS.
+			<p>The name defined in <code>data-ok</code> is the key of the validator dictionary object defined in the JS Ok constructor parameter.
 			if the given fn evaluates to false, the input will be marked as invalid.</p>
 			<a href="#validation" id="validation" style="color: inherit; text-decoration: none;">
 				<h3>Validation</h3>
 			</a>
 			<p>Once the user inputs on a field bound by Ok, the validator function will be run. If it evaluates to true, the field is valid.
-			If it evaluates falsy, the field will be marked as invalid, and the JS validity will be updated (which will show a popup containing the validator message, based on the browser).</p>
+			If it evaluates falsy, the field will be marked as invalid, and the input validity will be updated (which will show a popup containing the validator message, based on the browser).</p>
 			<a href="#chaining" id="chaining" style="color: inherit; text-decoration: none;">
 				<h3>Chaining</h3>
 			</a>
-			<p>Multiple validators can be used for a single field in a given order by chaining them. to chain multiple validators, simply add a comma between their keys in the ok attribute. When using chaining, the field will only be considered valid if all validators succeed. Once a validator marks the field as invalid, all further validators are skipped.</p>
+			<p>Multiple validators can be used for a single element in a given order by chaining them. to chain multiple validators, simply add a comma between their keys in the ok attribute. When using chaining, the field will only be considered valid if all validators succeed. Once a validator marks the field as invalid, all further validators are skipped.</p>
 			<pre><code class="language-html"><span style="color: #800000">&lt;div</span><span style="color: #000000"> </span><span style="color: #FF0000">class</span><span style="color: #000000">=</span><span style="color: #0000FF">&quot;form-group&quot;</span><span style="color: #800000">&gt;</span>
 <span style="color: #000000">    </span><span style="color: #800000">&lt;label</span><span style="color: #000000"> </span><span style="color: #FF0000">for</span><span style="color: #000000">=</span><span style="color: #0000FF">&quot;exampleInputEmail&quot;</span><span style="color: #800000">&gt;</span><span style="color: #000000">Email ID (all caps and ending in .de)</span><span style="color: #800000">&lt;/label&gt;</span>
-<span style="color: #000000">    </span><span style="color: #800000">&lt;input</span><span style="color: #000000"> </span><span style="color: #FF0000">type</span><span style="color: #000000">=</span><span style="color: #0000FF">&quot;email&quot;</span><span style="color: #000000"> </span><span style="color: #FF0000">required</span><span style="color: #000000"> </span><span style="color: #FF0000">data-ok</span><span style="color: #000000">=</span><span style="color: #0000FF">&quot;nameCaps, emailDe&quot;</span><span style="color: #800000">&gt;</span>
+<span style="color: #000000">    </span><span style="color: #800000">&lt;input</span><span style="color: #000000"> </span><span style="color: #FF0000">type</span><span style="color: #000000">=</span><span style="color: #0000FF">&quot;email&quot;</span><span style="color: #000000"> </span><span style="color: #FF0000">required</span><span style="color: #000000"> </span><span style="color: #FF0000">data-ok</span><span style="color: #000000">=</span><span style="color: #0000FF">&quot;nameCaps,emailDe&quot;</span><span style="color: #800000">&gt;</span>
 <span style="color: #800000">&lt;/div&gt;</span>
 </code></pre>
 			<pre><code class="language-typescript"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">Ok</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;okjs&quot;</span><span style="color: #000000">;</span>
@@ -2804,6 +2804,16 @@ <h3>Chaining</h3>
 <span style="color: #000000">    }</span>
 <span style="color: #000000">});</span>
 </code></pre>
+			<a href="#caveats" id="caveats" style="color: inherit; text-decoration: none;">
+				<h3>Caveats</h3>
+			</a>
+			<a href="#radiobuttons" id="radiobuttons" style="color: inherit; text-decoration: none;">
+				<h4>Radiobuttons</h4>
+			</a>
+			<p>Due to the way input elements with type <code>radio</code> work, validation is not straightforward. A single
+				radio button only fires its <code>change</code>/<code>input</code> event when itself is changed, not if it becomes e.g.
+				inactive due to another radiobutton being selected. A workaround is using an enclosing fieldset and
+			listening to the events of that.</p>
 			<a href="#compatibility" id="compatibility" style="color: inherit; text-decoration: none;">
 				<h2>Compatibility</h2>
 			</a>

docs/modules.html

@@ -2775,20 +2775,20 @@ <h3>Syntax</h3>
 <span style="color: #000000">    </span><span style="color: #800000">&lt;input</span><span style="color: #000000"> </span><span style="color: #FF0000">type</span><span style="color: #000000">=</span><span style="color: #0000FF">&quot;submit&quot;</span><span style="color: #800000">&gt;</span>
 <span style="color: #800000">&lt;/form&gt;</span>
 </code></pre>
-			<p>The name defined in <code>data-ok</code> is the key of the validator dictionary object defined in the JS.
+			<p>The name defined in <code>data-ok</code> is the key of the validator dictionary object defined in the JS Ok constructor parameter.
 			if the given fn evaluates to false, the input will be marked as invalid.</p>
 			<a href="#validation" id="validation" style="color: inherit; text-decoration: none;">
 				<h3>Validation</h3>
 			</a>
 			<p>Once the user inputs on a field bound by Ok, the validator function will be run. If it evaluates to true, the field is valid.
-			If it evaluates falsy, the field will be marked as invalid, and the JS validity will be updated (which will show a popup containing the validator message, based on the browser).</p>
+			If it evaluates falsy, the field will be marked as invalid, and the input validity will be updated (which will show a popup containing the validator message, based on the browser).</p>
 			<a href="#chaining" id="chaining" style="color: inherit; text-decoration: none;">
 				<h3>Chaining</h3>
 			</a>
-			<p>Multiple validators can be used for a single field in a given order by chaining them. to chain multiple validators, simply add a comma between their keys in the ok attribute. When using chaining, the field will only be considered valid if all validators succeed. Once a validator marks the field as invalid, all further validators are skipped.</p>
+			<p>Multiple validators can be used for a single element in a given order by chaining them. to chain multiple validators, simply add a comma between their keys in the ok attribute. When using chaining, the field will only be considered valid if all validators succeed. Once a validator marks the field as invalid, all further validators are skipped.</p>
 			<pre><code class="language-html"><span style="color: #800000">&lt;div</span><span style="color: #000000"> </span><span style="color: #FF0000">class</span><span style="color: #000000">=</span><span style="color: #0000FF">&quot;form-group&quot;</span><span style="color: #800000">&gt;</span>
 <span style="color: #000000">    </span><span style="color: #800000">&lt;label</span><span style="color: #000000"> </span><span style="color: #FF0000">for</span><span style="color: #000000">=</span><span style="color: #0000FF">&quot;exampleInputEmail&quot;</span><span style="color: #800000">&gt;</span><span style="color: #000000">Email ID (all caps and ending in .de)</span><span style="color: #800000">&lt;/label&gt;</span>
-<span style="color: #000000">    </span><span style="color: #800000">&lt;input</span><span style="color: #000000"> </span><span style="color: #FF0000">type</span><span style="color: #000000">=</span><span style="color: #0000FF">&quot;email&quot;</span><span style="color: #000000"> </span><span style="color: #FF0000">required</span><span style="color: #000000"> </span><span style="color: #FF0000">data-ok</span><span style="color: #000000">=</span><span style="color: #0000FF">&quot;nameCaps, emailDe&quot;</span><span style="color: #800000">&gt;</span>
+<span style="color: #000000">    </span><span style="color: #800000">&lt;input</span><span style="color: #000000"> </span><span style="color: #FF0000">type</span><span style="color: #000000">=</span><span style="color: #0000FF">&quot;email&quot;</span><span style="color: #000000"> </span><span style="color: #FF0000">required</span><span style="color: #000000"> </span><span style="color: #FF0000">data-ok</span><span style="color: #000000">=</span><span style="color: #0000FF">&quot;nameCaps,emailDe&quot;</span><span style="color: #800000">&gt;</span>
 <span style="color: #800000">&lt;/div&gt;</span>
 </code></pre>
 			<pre><code class="language-typescript"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">Ok</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;okjs&quot;</span><span style="color: #000000">;</span>
@@ -2804,6 +2804,16 @@ <h3>Chaining</h3>
 <span style="color: #000000">    }</span>
 <span style="color: #000000">});</span>
 </code></pre>
+			<a href="#caveats" id="caveats" style="color: inherit; text-decoration: none;">
+				<h3>Caveats</h3>
+			</a>
+			<a href="#radiobuttons" id="radiobuttons" style="color: inherit; text-decoration: none;">
+				<h4>Radiobuttons</h4>
+			</a>
+			<p>Due to the way input elements with type <code>radio</code> work, validation is not straightforward. A single
+				radio button only fires its <code>change</code>/<code>input</code> event when itself is changed, not if it becomes e.g.
+				inactive due to another radiobutton being selected. A workaround is using an enclosing fieldset and
+			listening to the events of that.</p>
 			<a href="#compatibility" id="compatibility" style="color: inherit; text-decoration: none;">
 				<h2>Compatibility</h2>
 			</a>

src/Ok.ts

@@ -3,23 +3,17 @@ import type { ValidatorDictionary } from "./validator/ValidatorDictionary";
 import type { ValidatableElement } from "./dom/ValidatableElement";
 
 /**
- * @internal
- */
-type ValidatorMap = Map<string, Validator>;
-
-/**
- * Ok class.
- *
- * @class
+ * Wraps a dictionary of validators and allows binding/applying it to DOM elements.
  */
 export class Ok {
-    private readonly map: ValidatorMap;
+    private readonly map: Map<string, Validator>;
 
     /**
-     * Ok constructor.
+     * Creates a new instance.
      *
-     * @public
      * @param validators Object containing the validators to use.
+     *                   Each key corresponds to the key used when referencing the validator from the HTML attribute.
+     *                   The value contains the validator to apply. See {@link Validator} for details.
      */
     public constructor(validators: ValidatorDictionary) {
         this.map = new Map(Object.entries(validators));
@@ -28,7 +22,6 @@ export class Ok {
     /**
      * Binds a {@link Ok#validate} event handler to a validatable element.
      *
-     * @public
      * @param element ValidatableElement to bind an event to.
      * @param eventType Event type to bind. Recommended is either 'input' or 'change'. Defaults to 'input'.
      */
@@ -60,6 +53,9 @@ export class Ok {
         return true;
     }
 
+    /**
+     * @internal
+     */
     private getValidators(element: ValidatableElement): Validator[] {
         const okAttr = element.dataset.ok;
         if (okAttr == null || okAttr.length === 0) {

src/dom/ValidatableElement.ts

@@ -4,8 +4,6 @@
  *
  * Some other elements also have such a method but are not suitable for Ok, such as
  * {@link HTMLFieldSetElement}, {@link HTMLObjectElement} and {@link HTMLButtonElement}.
- *
- * @public
  */
 export type ValidatableElement =
     | HTMLInputElement

src/validator/Validator.ts

@@ -10,26 +10,20 @@ type ValidatableElementFunction<
 
 /**
  * Function that returns a validation message.
- *
- * @public
  */
 type ValidationMessageFunction<
     UElement extends ValidatableElement
 > = ValidatableElementFunction<string, UElement>;
 
 /**
  * Function that checks if the element value is valid.
- *
- * @public
  */
 type ValidatorFunction<
     UElement extends ValidatableElement
 > = ValidatableElementFunction<boolean, UElement>;
 
 /**
  * Interface for a single validator.
- *
- * @public
  */
 export interface Validator<
     UElement extends ValidatableElement = ValidatableElement

src/validator/ValidatorDictionary.ts

@@ -2,8 +2,6 @@ import type { Validator } from "./Validator";
 
 /**
  * Dictionary of validator name and validator instance.
- *
- * @public
  */
 export interface ValidatorDictionary {
     readonly [key: string]: Validator;