@nldd/design-system 0.8.76 → 0.8.78

package/custom-elements.json

@@ -2813,7 +2813,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Maakt de avatar één link: de schijf zelf wordt de <a>, zodat klikgebied en\nfocusring de vorm volgen (een overlay zou vierkant zijn).",
+              "description": "Makes the avatar one link: the disc itself becomes the <a>, so the click\narea and the focus ring follow its shape (an overlay would be square).",
               "attribute": "href",
               "reflects": true
             },
@@ -2824,7 +2824,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Maakt de avatar een knop. Genegeerd zodra `href` staat: één avatar is één\nactie, en een link wint van een knop (zelfde regel als nldd-card).",
+              "description": "Makes the avatar a button. Ignored once `href` is set: one avatar is one\naction, and a link outranks a button (the same rule as nldd-card).",
               "attribute": "button",
               "reflects": true
             },
@@ -2853,7 +2853,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Toegankelijke naam van de link of knop; zonder deze valt hij terug op\n`name`. Alleen van belang wanneer de avatar interactief is.",
+              "description": "Accessible name of the link or button. Without it, it falls back to\n`name`. Only matters when the avatar is interactive.",
               "attribute": "accessible-label"
             },
             {
@@ -2862,7 +2862,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "True zodra de avatar zelf een control is.",
+              "description": "True once the avatar is a control itself.",
               "readonly": true
             },
             {
@@ -5038,7 +5038,7 @@
                 "text": "LabelAlignment | undefined"
               },
               "default": "undefined",
-              "description": "Default is `undefined` (and not `'top'`) so Lit doesn't reflect the\ndefault value to the attribute on first update. Zie `nldd-form-field`\nvoor uitleg — dezelfde reden: form-label-alignment fallback CSS\nwerkt op `:not([label-alignment])`.",
+              "description": "Default is `undefined` (and not `'top'`) so Lit doesn't reflect the\ndefault value to the attribute on first update. See `nldd-form-field` for\nthe explanation, for the same reason: the form-label-alignment fallback CSS\nworks on `:not([label-alignment])`.",
               "attribute": "label-alignment",
               "reflects": true
             }
@@ -5789,6 +5789,22 @@
             "module": "./inputs/text-field/text-field.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "NLDDTimeField",
+          "declaration": {
+            "name": "NLDDTimeField",
+            "module": "./inputs/time-field/time-field.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "NLDDTimePicker",
+          "declaration": {
+            "name": "NLDDTimePicker",
+            "module": "./inputs/time-picker/time-picker.js"
+          }
+        },
         {
           "kind": "js",
           "name": "NLDDToggleButton",
@@ -7968,7 +7984,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Toegankelijk label voor de interne input. Wordt automatisch gezet door nldd-form-field.",
+              "description": "Accessible label for the inner input. Set automatically by nldd-form-field.",
               "attribute": "accessible-label"
             },
             {
@@ -7987,7 +8003,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Optionele vaste breedte. Zonder waarde vult het veld zijn container.",
+              "description": "Optional fixed width. Without a value the field fills its container.",
               "attribute": "width",
               "reflects": true
             },
@@ -7998,7 +8014,7 @@
                 "text": "Partial<NLDDDateFieldTranslations>"
               },
               "default": "{}",
-              "description": "Overschrijf een of meer vertaalsleutels. Niet opgegeven sleutels vallen terug op het Nederlands.",
+              "description": "Override one or more translation keys. Keys left out fall back to Dutch.",
               "attribute": "translations"
             },
             {
@@ -8378,7 +8394,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Breedte: 'full' of een CSS-lengte; leeg is de intrinsieke zeven-cellen-breedte.",
+              "description": "Width: 'full' or a CSS length. Empty is the intrinsic seven-cell width.",
               "attribute": "width",
               "reflects": true
             },
@@ -14973,116 +14989,1042 @@
               }
             },
             {
-              "kind": "method",
-              "name": "focus",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Delegates focus to the inner native `<input>`, so consumers can call\n`textFieldEl.focus()` without reaching into shadow DOM."
+            },
+            {
+              "kind": "field",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/utilities/form-associated-mixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "internals",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/utilities/form-associated-mixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "formState",
+              "return": {
+                "type": {
+                  "text": "FormValue | undefined"
+                }
+              },
+              "description": "Extra state kept for bfcache and state restore, when the submitted\nvalue alone cannot rebuild the control (a combo box submits a code but\nshows a label). Override alongside `formValue()`.",
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/utilities/form-associated-mixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "commitFormValue",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Commit the value now, from the handler that changed it.",
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/utilities/form-associated-mixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "formDisabledCallback",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/utilities/form-associated-mixin.ts"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "input",
+              "description": "When input value changes"
+            },
+            {
+              "name": "change",
+              "description": "When input value is committed"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "'md' | 'sm'"
+              },
+              "default": "'md'",
+              "fieldName": "size",
+              "description": "'md' (default) | 'sm'. Set automatically by nldd-form-field."
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "value",
+              "description": "The input value"
+            },
+            {
+              "name": "input-id",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "inputId",
+              "description": "Sets the id on the native input. Set automatically by nldd-form-field."
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "placeholder",
+              "description": "Placeholder text"
+            },
+            {
+              "name": "invalid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "invalid",
+              "description": "Marks the field as invalid"
+            },
+            {
+              "name": "valid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "valid",
+              "description": "Marks the field as valid"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled",
+              "description": "Disabled state"
+            },
+            {
+              "name": "type",
+              "type": {
+                "text": "InputType"
+              },
+              "default": "'text'",
+              "fieldName": "type",
+              "description": "Input type: 'text' | 'email' | 'tel' | 'url'"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "name",
+              "description": "Input name for form submission"
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "readonly",
+              "description": "Readonly state"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "required",
+              "description": "Required state"
+            },
+            {
+              "name": "autocomplete",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "autocomplete",
+              "description": "Autocomplete hint"
+            },
+            {
+              "name": "accessible-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible label forwarded to the inner input. Set automatically by nldd-form-field.",
+              "fieldName": "accessibleLabel"
+            },
+            {
+              "name": "error-message-ids",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "errorMessageIds",
+              "description": "Ids for aria-describedby on the inner input. Set automatically by nldd-form-field."
+            },
+            {
+              "name": "no-spellcheck",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "noSpellcheck",
+              "description": "Disables browser spellchecking on the inner input"
+            },
+            {
+              "name": "width",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Optional fixed width (any CSS length, e.g. \"240px\"). Default: stretches to fill container.",
+              "fieldName": "width"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FormAssociated",
+              "module": "/src/utilities/form-associated-mixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "nldd-text-field",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "NLDDTextField",
+          "declaration": {
+            "name": "NLDDTextField",
+            "module": "src/components/inputs/text-field/text-field.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nldd-text-field",
+          "declaration": {
+            "name": "NLDDTextField",
+            "module": "src/components/inputs/text-field/text-field.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/inputs/time-field/time-field.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "parseTime",
+          "return": {
+            "type": {
+              "text": "string | null"
+            }
+          },
+          "parameters": [
+            {
+              "name": "raw",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "Read a typed time generously. Deliberately not a mask: reformatting per\nkeystroke moves the caret, breaks backspace mid-value and confuses screen\nreaders, so we accept what people type and normalize once on commit.\n\nAccepts 9, 09, 9:30, 9.30, 9,30, 9u30, 930 and 0930. After a letter the\nminutes may be left off (\"9u\" is a finished thought), after punctuation they\nmay not: \"9:\" is halfway through typing and should not produce a value yet."
+        },
+        {
+          "kind": "function",
+          "name": "roundToStep",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "time",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "step",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "base",
+              "default": "'00:00'"
+            }
+          ],
+          "description": "The nearest time that falls on the step, counted from `base`. Input exactly\nin between rounds up.\n\nNever rolls over the edge of the day: if rounding up would pass 23:59, step\nback instead. Rolling over to 00:00 silently shifts the day, and a consumer\nwho puts this field next to a date field then has a bug nobody sees\ncoming."
+        },
+        {
+          "kind": "class",
+          "description": "Een tekstveld voor een tijd. De waarde is altijd 24-uurs `HH:mm`; dat is in het Nederlands ook de weergave, dus anders dan bij nldd-date-field valt er niets om te rekenen. Er wordt niet gemaskeerd tijdens het typen: invoer wordt royaal geaccepteerd en pas bij het verlaten van het veld genormaliseerd. Foutmeldingen horen bij nldd-form-field, niet hier. Dit veld reflecteert alleen `invalid` / `valid`, net als nldd-text-field. Wat je in de picker doet is een voorbeeld tot je hem verlaat: het veld toont de tijd meteen, maar legt hem pas vast bij het sluiten. \"Klaar\" en Enter houden de keuze, een klik ernaast ook zodra je iets gekozen hebt, en Annuleer en Escape zetten de oude tijd terug. Op een leeg veld openen de wielen op `min`, of anders op de huidige tijd afgerond op `step`; dat vult het veld nog niet in.",
+          "name": "NLDDTimeField",
+          "members": [
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'md' | 'sm'"
+              },
+              "default": "'md'",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "min",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "min"
+            },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "max"
+            },
+            {
+              "kind": "field",
+              "name": "step",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "attribute": "step"
+            },
+            {
+              "kind": "field",
+              "name": "noPicker",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "no-picker",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "inputId",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "input-id"
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "placeholder",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "invalid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "invalid",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "valid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "valid",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "readonly",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "required",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "autocomplete",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "autocomplete"
+            },
+            {
+              "kind": "field",
+              "name": "accessibleLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible label for the inner input. Set automatically by nldd-form-field.",
+              "attribute": "accessible-label"
+            },
+            {
+              "kind": "field",
+              "name": "errorMessageIds",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "error-message-ids"
+            },
+            {
+              "kind": "field",
+              "name": "width",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Optional fixed width. Without a value the field is exactly wide enough.",
+              "attribute": "width",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "translations",
+              "type": {
+                "text": "Partial<NLDDTimeFieldTranslations>"
+              },
+              "default": "{}",
+              "description": "Override one or more translation keys. Keys left out fall back to Dutch.",
+              "attribute": "translations"
+            },
+            {
+              "kind": "method",
+              "name": "formValue",
+              "return": {
+                "type": {
+                  "text": "FormValue"
+                }
+              },
+              "description": "The value submitted under `name`; `null` submits nothing. Override.",
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/utilities/form-associated-mixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "formResetCallback",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "formStateRestoreCallback",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "state",
+                  "type": {
+                    "text": "File | string | FormData | null"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/utilities/form-associated-mixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "internals",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/utilities/form-associated-mixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "formState",
+              "return": {
+                "type": {
+                  "text": "FormValue | undefined"
+                }
+              },
+              "description": "Extra state kept for bfcache and state restore, when the submitted\nvalue alone cannot rebuild the control (a combo box submits a code but\nshows a label). Override alongside `formValue()`.",
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/utilities/form-associated-mixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "commitFormValue",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Commit the value now, from the handler that changed it.",
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/utilities/form-associated-mixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "formDisabledCallback",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/utilities/form-associated-mixin.ts"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "input",
+              "description": "Bij elke wijziging. detail: { value } met `HH:mm`, of '' zolang er geen geldige tijd staat."
+            },
+            {
+              "name": "change",
+              "description": "Wanneer de waarde is vastgelegd: bij het verlaten van het veld, en bij het sluiten van de picker op een manier die de keuze houdt. detail: { value } met `HH:mm`, of ''."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "'md' | 'sm'"
+              },
+              "default": "'md'",
+              "fieldName": "size",
+              "description": "'md' (standaard) | 'sm'. Wordt automatisch gezet door nldd-form-field."
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "value",
+              "description": "De tijd als `HH:mm` (24-uurs). Leeg wanneer er geen geldige tijd staat."
+            },
+            {
+              "name": "min",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "min",
+              "description": "Vroegst toegestane tijd als `HH:mm`. Is tevens de basis waarvandaan `step` telt."
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "max",
+              "description": "Laatst toegestane tijd als `HH:mm`."
+            },
+            {
+              "name": "step",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "fieldName": "step",
+              "description": "Minutenstap (standaard 1). Bepaalt welke tijden geldig zijn, waarop wordt afgerond en hoe ver de pijltjestoetsen verspringen."
+            },
+            {
+              "name": "no-picker",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "noPicker",
+              "description": "Verbergt de picker-knop. Standaard staat die knop er wel."
+            },
+            {
+              "name": "input-id",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "inputId",
+              "description": "Zet het id op de interne input. Wordt automatisch gezet door nldd-form-field."
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "placeholder",
+              "description": "Placeholdertekst. Zet hier geen formaat in; gebruik daarvoor de supporting-label van nldd-form-field."
+            },
+            {
+              "name": "invalid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "invalid",
+              "description": "Markeert het veld als ongeldig."
+            },
+            {
+              "name": "valid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "valid",
+              "description": "Markeert het veld als geldig."
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled",
+              "description": "Uitgeschakelde staat."
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "readonly",
+              "description": "Alleen-lezen staat."
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "required",
+              "description": "Verplichte staat."
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "name",
+              "description": "Naam voor formulierverzending."
+            },
+            {
+              "name": "autocomplete",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "autocomplete",
+              "description": "Autocomplete-hint."
+            },
+            {
+              "name": "accessible-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Toegankelijk label voor de interne input. Wordt automatisch gezet door nldd-form-field.",
+              "fieldName": "accessibleLabel"
+            },
+            {
+              "name": "error-message-ids",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "errorMessageIds",
+              "description": "Ids voor aria-describedby. Wordt automatisch gezet door nldd-form-field."
+            },
+            {
+              "name": "width",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Breedte. Standaard precies breed genoeg voor een tijd plus het validatie-icoon; 'full' vult de container, of geef een eigen CSS-lengte.",
+              "fieldName": "width"
+            },
+            {
+              "name": "translations",
+              "type": {
+                "text": "Partial<NLDDTimeFieldTranslations>"
+              },
+              "default": "{}",
+              "description": "Vertalingen; niet opgegeven sleutels vallen terug op het Nederlands.",
+              "fieldName": "translations"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FormAssociated",
+              "module": "/src/utilities/form-associated-mixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "nldd-time-field",
+          "customElement": true,
+          "slots": [
+            {
+              "name": "picker",
+              "description": "Een eigen nldd-time-picker, in plaats van de standaardpicker. Het veld blijft `value`, `min`, `max` en `step` zetten; gebruik de slot voor wat alleen een picker weet, zoals eigen vertalingen."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "parseTime",
+          "declaration": {
+            "name": "parseTime",
+            "module": "src/components/inputs/time-field/time-field.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "roundToStep",
+          "declaration": {
+            "name": "roundToStep",
+            "module": "src/components/inputs/time-field/time-field.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "NLDDTimeField",
+          "declaration": {
+            "name": "NLDDTimeField",
+            "module": "src/components/inputs/time-field/time-field.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nldd-time-field",
+          "declaration": {
+            "name": "NLDDTimeField",
+            "module": "src/components/inputs/time-field/time-field.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/inputs/time-picker/time-picker.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "toMinutes",
+          "return": {
+            "type": {
+              "text": "number"
+            }
+          },
+          "parameters": [
+            {
+              "name": "time",
+              "type": {
+                "text": "string"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "fromMinutes",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "total",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "class",
+          "description": "Twee kolommen, uren en minuten, die als een wiel langs de selectie in het midden schuiven. Het component is zelfstandig bruikbaar (inline op een pagina, in een filterpaneel) en zit ook in de popover van nldd-time-field. Waarden zijn altijd 24-uurs `HH:mm`. Scrollen ís kiezen: wat in het midden tot stilstand komt, is de waarde. Met het toetsenbord bedien je de selectie, want dat is wat een wiel is: uur en minuut zijn er elk een spinbutton. De kolommen eronder staan op aria-hidden, zodat dezelfde waarden niet twee keer worden voorgelezen.",
+          "name": "NLDDTimePicker",
+          "members": [
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "min",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "min"
+            },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "max"
+            },
+            {
+              "kind": "field",
+              "name": "step",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "attribute": "step"
+            },
+            {
+              "kind": "field",
+              "name": "rows",
+              "type": {
+                "text": "number"
               },
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ],
-              "description": "Delegates focus to the inner native `<input>`, so consumers can call\n`textFieldEl.focus()` without reaching into shadow DOM."
+              "default": "7",
+              "attribute": "rows",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "formAssociated",
+              "name": "width",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "static": true,
-              "default": "true",
-              "inheritedFrom": {
-                "name": "FormAssociated",
-                "module": "src/utilities/form-associated-mixin.ts"
-              }
+              "default": "''",
+              "attribute": "width",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "internals",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormAssociated",
-                "module": "src/utilities/form-associated-mixin.ts"
-              }
+              "name": "accessibleLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "accessible-label"
             },
             {
-              "kind": "method",
-              "name": "formState",
-              "return": {
-                "type": {
-                  "text": "FormValue | undefined"
-                }
+              "kind": "field",
+              "name": "translations",
+              "type": {
+                "text": "Partial<NLDDTimePickerTranslations>"
               },
-              "description": "Extra state kept for bfcache and state restore, when the submitted\nvalue alone cannot rebuild the control (a combo box submits a code but\nshows a label). Override alongside `formValue()`.",
-              "inheritedFrom": {
-                "name": "FormAssociated",
-                "module": "src/utilities/form-associated-mixin.ts"
-              }
+              "default": "{}",
+              "attribute": "translations"
             },
             {
               "kind": "method",
-              "name": "commitFormValue",
+              "name": "focus",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "description": "Commit the value now, from the handler that changed it.",
-              "inheritedFrom": {
-                "name": "FormAssociated",
-                "module": "src/utilities/form-associated-mixin.ts"
-              }
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Focus lands on the hour, the way nldd-date-picker focuses a day. The host\nitself forwards nowhere, so an overlay that focuses this picker would leave\nthe arrow keys dead until the user tabbed into the selection themselves."
             },
             {
               "kind": "method",
-              "name": "formDisabledCallback",
+              "name": "scrollSelectedIntoView",
+              "privacy": "public",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "parameters": [
-                {
-                  "name": "disabled",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "FormAssociated",
-                "module": "src/utilities/form-associated-mixin.ts"
-              }
+              "description": "Put the chosen value in the middle of the view. The column is seven values\ntall, so `center` lands it on the fourth row with three above and three\nbelow.\n\nPublic because a hidden element cannot be scrolled: with the picker in a\npopover it has no dimensions yet when the value is set, and scrollIntoView\ndoes nothing. The field therefore calls this as soon as the popover\nopens."
             }
           ],
           "events": [
             {
               "name": "input",
-              "description": "When input value changes"
+              "description": "Bij elke wijziging: scrollen, de pijltjestoetsen. detail: { value } met `HH:mm`."
             },
             {
               "name": "change",
-              "description": "When input value is committed"
+              "description": "Wanneer de keuze is bevestigd: een klik op een waarde of op de selectie, of Enter. detail: { value } met `HH:mm`. Scrollen geeft alleen `input`, want anders zou een veld dat de picker in een popover toont al vastleggen zodra je stopt met scrollen."
             }
           ],
           "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "'md' | 'sm'"
-              },
-              "default": "'md'",
-              "fieldName": "size",
-              "description": "'md' (default) | 'sm'. Set automatically by nldd-form-field."
-            },
             {
               "name": "value",
               "type": {
@@ -15090,97 +16032,52 @@
               },
               "default": "''",
               "fieldName": "value",
-              "description": "The input value"
-            },
-            {
-              "name": "input-id",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "inputId",
-              "description": "Sets the id on the native input. Set automatically by nldd-form-field."
+              "description": "De gekozen tijd als `HH:mm` (24-uurs)."
             },
             {
-              "name": "placeholder",
+              "name": "min",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "placeholder",
-              "description": "Placeholder text"
-            },
-            {
-              "name": "invalid",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "invalid",
-              "description": "Marks the field as invalid"
-            },
-            {
-              "name": "valid",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "valid",
-              "description": "Marks the field as valid"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "disabled",
-              "description": "Disabled state"
-            },
-            {
-              "name": "type",
-              "type": {
-                "text": "InputType"
-              },
-              "default": "'text'",
-              "fieldName": "type",
-              "description": "Input type: 'text' | 'email' | 'tel' | 'url'"
+              "fieldName": "min",
+              "description": "Vroegst toegestane tijd als `HH:mm`. Is tevens de basis waarvandaan `step` telt."
             },
             {
-              "name": "name",
+              "name": "max",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "name",
-              "description": "Input name for form submission"
+              "fieldName": "max",
+              "description": "Laatst toegestane tijd als `HH:mm`."
             },
             {
-              "name": "readonly",
+              "name": "step",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "fieldName": "readonly",
-              "description": "Readonly state"
+              "default": "1",
+              "fieldName": "step",
+              "description": "Minutenstap (standaard 1). Bepaalt welke minuten in de kolom staan."
             },
             {
-              "name": "required",
+              "name": "rows",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "fieldName": "required",
-              "description": "Required state"
+              "default": "7",
+              "fieldName": "rows",
+              "description": "Hoogte van de kolommen in rijen (standaard 7, minimaal 3). De gekozen waarde staat altijd in het midden, dus een oneven aantal toont hele rijen en een even aantal kapt boven en onder een halve rij af."
             },
             {
-              "name": "autocomplete",
+              "name": "width",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "autocomplete",
-              "description": "Autocomplete hint"
+              "fieldName": "width",
+              "description": "Breedte: `full` vult de container, of geef een eigen CSS-lengte."
             },
             {
               "name": "accessible-label",
@@ -15188,66 +16085,58 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Accessible label forwarded to the inner input. Set automatically by nldd-form-field.",
-              "fieldName": "accessibleLabel"
-            },
-            {
-              "name": "error-message-ids",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "errorMessageIds",
-              "description": "Ids for aria-describedby on the inner input. Set automatically by nldd-form-field."
-            },
-            {
-              "name": "no-spellcheck",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "noSpellcheck",
-              "description": "Disables browser spellchecking on the inner input"
+              "fieldName": "accessibleLabel",
+              "description": "Toegankelijke naam van de picker."
             },
             {
-              "name": "width",
+              "name": "translations",
               "type": {
-                "text": "string"
+                "text": "Partial<NLDDTimePickerTranslations>"
               },
-              "default": "''",
-              "description": "Optional fixed width (any CSS length, e.g. \"240px\"). Default: stretches to fill container.",
-              "fieldName": "width"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "FormAssociated",
-              "module": "/src/utilities/form-associated-mixin.js"
+              "default": "{}",
+              "fieldName": "translations",
+              "description": "Vertalingen; niet opgegeven sleutels vallen terug op het Nederlands."
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "nldd-text-field",
+          "tagName": "nldd-time-picker",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "NLDDTextField",
+          "name": "toMinutes",
           "declaration": {
-            "name": "NLDDTextField",
-            "module": "src/components/inputs/text-field/text-field.ts"
+            "name": "toMinutes",
+            "module": "src/components/inputs/time-picker/time-picker.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fromMinutes",
+          "declaration": {
+            "name": "fromMinutes",
+            "module": "src/components/inputs/time-picker/time-picker.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "NLDDTimePicker",
+          "declaration": {
+            "name": "NLDDTimePicker",
+            "module": "src/components/inputs/time-picker/time-picker.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nldd-text-field",
+          "name": "nldd-time-picker",
           "declaration": {
-            "name": "NLDDTextField",
-            "module": "src/components/inputs/text-field/text-field.ts"
+            "name": "NLDDTimePicker",
+            "module": "src/components/inputs/time-picker/time-picker.ts"
           }
         }
       ]
@@ -21601,7 +22490,7 @@
                   "text": "Promise<void>"
                 }
               },
-              "description": "Herberekent positie t.o.v. anchor. Wordt automatisch aangeroepen bij openen."
+              "description": "Recomputes the position relative to the anchor. Called automatically on open."
             }
           ],
           "attributes": [
@@ -25038,7 +25927,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A row within an `nldd-list`. Renders as a link when `href` is set, as a checkbox when `checkbox` is set, as a button when `button` is set, or as a plain container otherwise. All cells and action segmented actions share one flat slot, in source order. Two rules govern every row: 1. State fills always paint the WIDENED row geometry — the row box extended by the indicator inline inset on both sides — whether or not the row is interactive. Paint never differs between a selected plain row and a selected interactive row. 2. The widened strip belongs to the ROW, never to a segment. A row with any action (its own `href`/`button`/`checkbox`, or a slotted segment) pulls itself outward (`is-interactive` host class → negative inline margin) and pads the row block back by the same amount, so content stays on the grid. A row-wide action owns that padding itself, making the whole widened box one hit area; slotted segmented actions stay in the grid, so their footprint is position-independent and tree columns line up at any depth. The divider spans the content width by default, with one exception: a row that opens with an `nldd-icon-cell` followed by a text or title cell starts the divider at that text, so the line aligns with the words rather than the icon. Leading spacers are ignored when deciding this. Mark a cell with `divider-start` and/or `divider-end` to place it yourself instead — an explicit marker replaces the derived one entirely, so `divider-start` on the icon cell restores the full-width line. Multiple markers resolve as the union: first `divider-start` through last `divider-end`. A start past the last end is an authoring error — the item DEV-warns and falls back to the full content width. A branch row can disclose its children in two ways: a dedicated `nldd-list-item-action[disclosure]` segment (only the chevron is clickable), or the row itself as the control (`button` + `expanded`, the whole row toggles). In the second case, mark the chevron's `nldd-icon-cell` with `disclosure` and the row turns it with `expanded` — the same affordance, without having to trade a clickable row for a turning chevron. `checkbox` makes the WHOLE row the control: the inner action becomes a `role=\"checkbox\"` button carrying `aria-checked`, it toggles `checked` on activation and fires `change`. Slot a visual `nldd-checkbox` (or any glyph) before the text and mark it `aria-hidden` + non-focusable — the row already conveys role and state, and a second focusable control would double the tab stops. Do NOT nest a real `<input type=\"checkbox\">` in the action: interactive content inside a `<button>` is invalid HTML and AT announces the button, not the checked state. A `<label>` variant is not offered for the same reason it cannot work — label-to-input association walks the DOM tree, and a slotted input is not a descendant of a label in the shadow root. When it renders as a link, `target` and `rel` are forwarded to the inner `<a>` (e.g. `target=\"_blank\" rel=\"noopener noreferrer\"`). With `target=\"_blank\"` the item also injects a visually hidden \"opens in new tab\" announcement for assistive technology (WCAG 2.1 SC 3.2.2). The item synchronises its ARIA with its parent `nldd-list`'s `type`: - `list` parent → `role=\"listitem\"` - `navigation` parent → `role=\"listitem\"` + `aria-current=\"page\"` on the inner `<a>` / `<button>` when `selected` - `listbox` parent → `role=\"option\"` + `aria-selected` reflecting `selected`. The list points its search input's `aria-activedescendant` at the active option via `_highlighted` (separate from `selected`).",
+          "description": "A row within an `nldd-list`. Renders as a link when `href` is set, as a checkbox when `checkbox` is set, as a button when `button` is set, or as a plain container otherwise. All cells and action segmented actions share one flat slot, in source order. Two rules govern every row: 1. State fills always paint the WIDENED row geometry — the row box extended by the indicator inline inset on both sides — whether or not the row is interactive. Paint never differs between a selected plain row and a selected interactive row. 2. The widened strip belongs to the ROW, never to a segment. A row with any action (its own `href`/`button`/`checkbox`, or a slotted segment) pulls itself outward (`is-interactive` host class → negative inline margin) and pads the row block back by the same amount, so content stays on the grid. A row-wide action owns that padding itself, making the whole widened box one hit area; slotted segmented actions stay in the grid, so their footprint is position-independent and tree columns line up at any depth. The divider spans the content width by default, with one exception: a row that opens with an `nldd-icon-cell` followed by a text or title cell starts the divider at that text, so the line aligns with the words rather than the icon. Leading spacers are ignored when deciding this. Mark a cell with `divider-start` and/or `divider-end` to place it yourself instead — an explicit marker replaces the derived one entirely, so `divider-start` on the icon cell restores the full-width line. Multiple markers resolve as the union: first `divider-start` through last `divider-end`. A start past the last end is an authoring error — the item DEV-warns and falls back to the full content width. A branch row can disclose its children in two ways: a dedicated `nldd-list-item-action[disclosure]` segment (only the chevron is clickable), or the row itself as the control (`button` + `expanded`, the whole row toggles). In the second case, mark the chevron's `nldd-icon-cell` with `disclosure` and the row turns it with `expanded` — the same affordance, without having to trade a clickable row for a turning chevron. `checkbox` makes the WHOLE row the control: the inner action becomes a `role=\"checkbox\"` button carrying `aria-checked`, it toggles `checked` on activation and fires `change`. Slot a visual `nldd-checkbox` (or any glyph) before the text and mark it `aria-hidden` + non-focusable — the row already conveys role and state, and a second focusable control would double the tab stops. Do NOT nest a real `<input type=\"checkbox\">` in the action: interactive content inside a `<button>` is invalid HTML and AT announces the button, not the checked state. A `<label>` variant is not offered for the same reason it cannot work — label-to-input association walks the DOM tree, and a slotted input is not a descendant of a label in the shadow root. When it renders as a link, `target` and `rel` are forwarded to the inner `<a>` (e.g. `target=\"_blank\" rel=\"noopener noreferrer\"`). With `target=\"_blank\"` the item also injects a visually hidden \"opens in new tab\" announcement for assistive technology (WCAG 2.1 SC 3.2.2). The item synchronizes its ARIA with its parent `nldd-list`'s `type`: - `list` parent → `role=\"listitem\"` - `navigation` parent → `role=\"listitem\"` + `aria-current=\"page\"` on the inner `<a>` / `<button>` when `selected` - `listbox` parent → `role=\"option\"` + `aria-selected` reflecting `selected`. The list points its search input's `aria-activedescendant` at the active option via `_highlighted` (separate from `selected`).",
           "name": "NLDDListItem",
           "slots": [
             {
@@ -25351,7 +26240,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A container for `nldd-list-item` elements. The `type` attribute switches the list's a11y role and behavior: - `list` (default) — `role=\"list\"`, items `role=\"listitem\"`. Reorderable allowed. - `tree` — `role=\"tree\"`, items `role=\"treeitem\"`. Branch rows put their child rows in their own `slot=\"children\"`, which the item renders as a `role=\"group\"`. Level, position and set size are NOT authored: the nesting represents the hierarchy, so assistive technology derives them. A branch row must carry `expanded`; the group is hidden while it is false. Visual indentation is the consumer's — repeat a spacer-cell per level. Comes with its own keyboard, see \"Tree\" below. - `navigation` — host `role=\"navigation\"`, items with `selected` get `aria-current=\"page\"` on their inner `<a>` or `<button>`. - `listbox` — an accessible, filterable listbox (combobox pattern). The list renders its OWN search input (`role=\"combobox\"`) pinned above the options; `.list__items` becomes `role=\"listbox\"` and items become `role=\"option\"`. Focus stays in the input, the active option moves via `aria-activedescendant`, and filtering is consumer-managed via the `input` event (toggle `[hidden]` on items). See \"Listbox\" below. Selection state is consumer-managed: the list never mutates `selected` itself. In `type=\"listbox\"` the list owns a native `<input role=\"combobox\">` (mirroring how `nldd-combo-box` wires an input to a slotted listbox). Keyboard, handled on the input so focus never leaves it: - ArrowDown / ArrowUp — move the active option among the VISIBLE (non-`[hidden]`) options (wrap around). - Home / End — first / last visible option. - Enter — activate the active option by triggering its inner action (a link navigates, a button fires the consumer's handler). Selection stays consumer-managed. - Escape — clear the search value (and refire `input`). On every active change the input's `aria-activedescendant` is set to the active option's id and the option is scrolled into view. The active option (`_highlighted` on the item, a highlight) is distinct from `selected`. Filtering is the consumer's job: listen to `input` (`{ detail: { value } }`) and toggle `[hidden]` on items; after the visible set changes the list resets the active option to the first visible one. `reorderable` and `arrow-navigation` are ignored in listbox mode (listbox has its own keyboard). A tree is a composite widget, so it brings its own keyboard — `arrow-navigation` is implied and needn't be set: - ArrowDown / ArrowUp — move between the rows in the order they appear on screen, the rows of an open branch included. - Home / End — first / last row. - ArrowRight — opens a closed branch; on an open one it steps to its first child. - ArrowLeft — closes an open branch; on a leaf it steps out to the parent row. - Enter / Space — open and close, the same as Right and Left. Only while focus sits on the row itself: a row that is its own control, and a segmented action you tabbed into, handle both keys themselves. Opening and closing runs through the row's own disclosure control — the segmented action marked `disclosure`, or the row itself when it is a button. The list activates that control rather than writing `expanded`, so the state keeps being set in one place: the consumer's handler. A row that is a link is never activated this way, since that would navigate away. The tree is one tab stop. Focus lands on the row itself when the row has no control of its own, because that is where `treeitem` sits and it makes assistive technology announce the row rather than a button inside it. Tab then walks the controls of THAT row (a chevron beside a checkbox, say) and leaves the list after the last one. A deliberate deviation: strictly speaking a row with several controls is a `treegrid`, not a `tree`. We keep the tree semantics — level and set size are what matters here, not rows and columns — and borrow the \"Tab within the row\" behaviour from the grid pattern. Should a tree with real columns come up, that is when `treegrid` earns its own type. On reorder (type=\"list\" + reorderable), the list dispatches `nldd-reorder` with `fromIndex` / `toIndex` and expects the consumer to mutate the DOM (or their data model that renders the DOM). Focus is restored to the moved item's drag handle via a single `requestAnimationFrame` — this assumes the consumer reorders **synchronously** in the event handler. Async renderers (React, Vue, …) that update the DOM on a later tick will miss the focus restore and should manage focus themselves after their render commits.",
+          "description": "A container for `nldd-list-item` elements. The `type` attribute switches the list's a11y role and behavior: - `list` (default) — `role=\"list\"`, items `role=\"listitem\"`. Reorderable allowed. - `tree` — `role=\"tree\"`, items `role=\"treeitem\"`. Branch rows put their child rows in their own `slot=\"children\"`, which the item renders as a `role=\"group\"`. Level, position and set size are NOT authored: the nesting represents the hierarchy, so assistive technology derives them. A branch row must carry `expanded`; the group is hidden while it is false. Visual indentation is the consumer's — repeat a spacer-cell per level. Comes with its own keyboard, see \"Tree\" below. - `navigation` — host `role=\"navigation\"`, items with `selected` get `aria-current=\"page\"` on their inner `<a>` or `<button>`. - `listbox` — an accessible, filterable listbox (combobox pattern). The list renders its OWN search input (`role=\"combobox\"`) pinned above the options; `.list__items` becomes `role=\"listbox\"` and items become `role=\"option\"`. Focus stays in the input, the active option moves via `aria-activedescendant`, and filtering is consumer-managed via the `input` event (toggle `[hidden]` on items). See \"Listbox\" below. Selection state is consumer-managed: the list never mutates `selected` itself. In `type=\"listbox\"` the list owns a native `<input role=\"combobox\">` (mirroring how `nldd-combo-box` wires an input to a slotted listbox). Keyboard, handled on the input so focus never leaves it: - ArrowDown / ArrowUp — move the active option among the VISIBLE (non-`[hidden]`) options (wrap around). - Home / End — first / last visible option. - Enter — activate the active option by triggering its inner action (a link navigates, a button fires the consumer's handler). Selection stays consumer-managed. - Escape — clear the search value (and refire `input`). On every active change the input's `aria-activedescendant` is set to the active option's id and the option is scrolled into view. The active option (`_highlighted` on the item, a highlight) is distinct from `selected`. Filtering is the consumer's job: listen to `input` (`{ detail: { value } }`) and toggle `[hidden]` on items; after the visible set changes the list resets the active option to the first visible one. `reorderable` and `arrow-navigation` are ignored in listbox mode (listbox has its own keyboard). A tree is a composite widget, so it brings its own keyboard — `arrow-navigation` is implied and needn't be set: - ArrowDown / ArrowUp — move between the rows in the order they appear on screen, the rows of an open branch included. - Home / End — first / last row. - ArrowRight — opens a closed branch; on an open one it steps to its first child. - ArrowLeft — closes an open branch; on a leaf it steps out to the parent row. - Enter / Space — open and close, the same as Right and Left. Only while focus sits on the row itself: a row that is its own control, and a segmented action you tabbed into, handle both keys themselves. Opening and closing runs through the row's own disclosure control — the segmented action marked `disclosure`, or the row itself when it is a button. The list activates that control rather than writing `expanded`, so the state keeps being set in one place: the consumer's handler. A row that is a link is never activated this way, since that would navigate away. The tree is one tab stop. Focus lands on the row itself when the row has no control of its own, because that is where `treeitem` sits and it makes assistive technology announce the row rather than a button inside it. Tab then walks the controls of THAT row (a chevron beside a checkbox, say) and leaves the list after the last one. A deliberate deviation: strictly speaking a row with several controls is a `treegrid`, not a `tree`. We keep the tree semantics — level and set size are what matters here, not rows and columns — and borrow the \"Tab within the row\" behavior from the grid pattern. Should a tree with real columns come up, that is when `treegrid` earns its own type. On reorder (type=\"list\" + reorderable), the list dispatches `nldd-reorder` with `fromIndex` / `toIndex` and expects the consumer to mutate the DOM (or their data model that renders the DOM). Focus is restored to the moved item's drag handle via a single `requestAnimationFrame` — this assumes the consumer reorders **synchronously** in the event handler. Async renderers (React, Vue, …) that update the DOM on a later tick will miss the focus restore and should manage focus themselves after their render commits.",
           "name": "NLDDList",
           "slots": [
             {
@@ -28590,6 +29479,16 @@
               "attribute": "variant",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "BannerSize"
+              },
+              "default": "'md'",
+              "attribute": "size",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "icon",
@@ -28667,6 +29566,15 @@
               "fieldName": "variant",
               "description": "Color and default icon (default: 'neutral')"
             },
+            {
+              "name": "size",
+              "type": {
+                "text": "BannerSize"
+              },
+              "default": "'md'",
+              "fieldName": "size",
+              "description": "Banner size (default: 'md'). 'sm' tightens the padding to 8px, drops the icon to 24px and uses a smaller dismiss button — for a bar that sits between chrome and content rather than a standalone page-level notice. The typography is unchanged."
+            },
             {
               "name": "icon",
               "type": {