@nldd/design-system 0.8.93 → 0.8.94

package/custom-elements.json

@@ -19,7 +19,7 @@
         },
         {
           "kind": "class",
-          "description": "A horizontal container for grouping buttons with a neutral background. Automatically propagates its size and variant to all child nldd-button and nldd-icon-button elements. Renders nldd-button-bar-divider elements as internal dividers — no separate component needed.",
+          "description": "A horizontal container for grouping buttons with a neutral background. Automatically propagates its size and appearance to all child nldd-button and nldd-icon-button elements. Renders nldd-button-bar-divider elements as internal dividers — no separate component needed. The bar is one surface for actions; on/off buttons do not go in it. For a row of toggles use nldd-toggle-button-group, and for one choice out of a few options on one surface nldd-segmented-control. An nldd-toggle-button placed here is shown as it is, and a warning says so in development.",
           "name": "NLDDButtonBar",
           "members": [
             {
@@ -34,12 +34,12 @@
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "appearance",
               "type": {
                 "text": "string"
               },
               "default": "'neutral-tinted'",
-              "attribute": "variant",
+              "attribute": "appearance",
               "reflects": true
             },
             {
@@ -64,13 +64,13 @@
               "description": "Bar size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md'). At 'lg', icon-button children stack their label below the icon (mobile action-bar style)."
             },
             {
-              "name": "variant",
+              "name": "appearance",
               "type": {
                 "text": "string"
               },
               "default": "'neutral-tinted'",
-              "fieldName": "variant",
-              "description": "Button variant (default: 'neutral-tinted')"
+              "fieldName": "appearance",
+              "description": "Visual style of the buttons (default: 'neutral-tinted'; 'inherit-tinted' and 'inherit-filled' for a colored surface)"
             },
             {
               "name": "disabled",
@@ -230,12 +230,12 @@
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "appearance",
               "type": {
-                "text": "Variant"
+                "text": "Appearance"
               },
               "default": "'neutral-tinted'",
-              "attribute": "variant",
+              "attribute": "appearance",
               "reflects": true
             },
             {
@@ -370,6 +370,16 @@
               "attribute": "loading",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "loadingText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "What the screen reader announces while loading. Empty falls back to the activity indicator's \"Laden\".",
+              "attribute": "loading-text"
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -419,7 +429,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Removes the per-variant highlight border (e.g. when nldd-button-bar draws a single group border instead).",
+              "description": "Removes the per-appearance highlight border (e.g. when nldd-button-bar draws a single group border instead).",
               "attribute": "no-highlight-border",
               "reflects": true
             },
@@ -546,13 +556,13 @@
           ],
           "attributes": [
             {
-              "name": "variant",
+              "name": "appearance",
               "type": {
-                "text": "Variant"
+                "text": "Appearance"
               },
               "default": "'neutral-tinted'",
-              "fieldName": "variant",
-              "description": "Button variant: 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-base' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'inherit-filled' | 'inherit-tinted'. The inherit variants derive their colors from currentColor, for buttons on colored surfaces; inherit-filled uses the surface color (--context-parent-background-color) as the label color, with a white/black contrast flip as a fallback."
+              "fieldName": "appearance",
+              "description": "Visual style, color included: 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-base' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'inherit-filled' | 'inherit-tinted'. The inherit appearances derive their colors from currentColor, for buttons on colored surfaces; inherit-filled uses the surface color (--context-parent-background-color) as the label color, with a white/black contrast flip as a fallback."
             },
             {
               "name": "size",
@@ -652,6 +662,15 @@
               "description": "Loading state (default: false). Shows an activity indicator over the visually hidden content, sets aria-busy on the inner control and blocks activation, without dropping the button from the tab order (unlike disabled). The content stays laid out, so the button keeps its width.",
               "fieldName": "loading"
             },
+            {
+              "name": "loading-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "What the screen reader announces while `loading` is on, for a button that does more than load: \"Aan het bewaren\". Leave it out and the activity indicator says its translated \"Laden\".",
+              "fieldName": "loadingText"
+            },
             {
               "name": "disabled",
               "type": {
@@ -694,7 +713,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Removes the per-variant highlight border (e.g. when nldd-button-bar draws a single group border instead).",
+              "description": "Removes the per-appearance highlight border (e.g. when nldd-button-bar draws a single group border instead).",
               "fieldName": "noHighlightBorder"
             },
             {
@@ -846,12 +865,12 @@
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "appearance",
               "type": {
-                "text": "Variant"
+                "text": "Appearance"
               },
               "default": "'neutral-tinted'",
-              "attribute": "variant",
+              "attribute": "appearance",
               "reflects": true
             },
             {
@@ -886,6 +905,16 @@
               "attribute": "loading",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "loadingText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "What the screen reader announces while loading. Empty falls back to the activity indicator's \"Laden\".",
+              "attribute": "loading-text"
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -903,7 +932,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Removes the per-variant highlight border (e.g. when nldd-button-bar draws a single group border instead).",
+              "description": "Removes the per-appearance highlight border (e.g. when nldd-button-bar draws a single group border instead).",
               "attribute": "no-highlight-border",
               "reflects": true
             },
@@ -1104,13 +1133,13 @@
           ],
           "attributes": [
             {
-              "name": "variant",
+              "name": "appearance",
               "type": {
-                "text": "Variant"
+                "text": "Appearance"
               },
               "default": "'neutral-tinted'",
-              "fieldName": "variant",
-              "description": "Button variant: 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'inherit-filled' | 'inherit-tinted' | 'primary' | 'secondary' | 'destructive'. The inherit variants derive their colors from currentColor, for buttons on colored surfaces."
+              "fieldName": "appearance",
+              "description": "Visual style, color included: 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'inherit-filled' | 'inherit-tinted' | 'primary' | 'secondary' | 'destructive'. The inherit appearances derive their colors from currentColor, for buttons on colored surfaces."
             },
             {
               "name": "size",
@@ -1139,6 +1168,15 @@
               "description": "Loading state (default: false). Shows an activity indicator over the visually hidden icon, sets aria-busy on the inner control and blocks activation, without dropping the button from the tab order (unlike disabled).",
               "fieldName": "loading"
             },
+            {
+              "name": "loading-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "What the screen reader announces while `loading` is on, for a button that does more than load: \"Aan het bewaren\". Leave it out and the activity indicator says its translated \"Laden\".",
+              "fieldName": "loadingText"
+            },
             {
               "name": "disabled",
               "type": {
@@ -1154,7 +1192,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Removes the per-variant highlight border (e.g. when a control group draws a single border instead).",
+              "description": "Removes the per-appearance highlight border (e.g. when a control group draws a single border instead).",
               "fieldName": "noHighlightBorder"
             },
             {
@@ -1575,6 +1613,15 @@
               "default": "null",
               "description": "Which menu owns this item, set by that nldd-menu. Not part of the public API.\n\n`null` until one claims it, and an unclaimed item carries no menu role.\nA menu role is a promise about what is around you, so an item cannot make\nit on its own. `nldd-toolbar-item` holds exactly such an item: the\ndeclaration of what belongs in the overflow menu, which the toolbar clones\ninto the real menu when it collapses. The clone is claimed there and the\ndeclaration stays what it is."
             },
+            {
+              "kind": "field",
+              "name": "checkColumn",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether this item keeps the check-mark column free without being\ncheckable, because another item in its menu is. Set by that nldd-menu.\nNot part of the public API."
+            },
             {
               "kind": "method",
               "name": "focus",
@@ -1693,7 +1740,7 @@
               "type": {
                 "text": "'button' | 'checkbox' | 'radio'"
               },
-              "description": "Item type: 'button' | 'checkbox' | 'radio'. Default: 'button'.",
+              "description": "Item type: 'button' | 'checkbox' | 'radio'. Default: 'button'. One checkbox or radio item gives every item in its menu the check-mark column, so the text of the whole menu starts at one line, as in a native menu. Submenus decide for themselves.",
               "name": "type",
               "default": "'button'",
               "fieldName": "type"
@@ -1914,9 +1961,16 @@
                   "type": {
                     "text": "string"
                   }
+                },
+                {
+                  "name": "{ hide = true }",
+                  "default": "{}",
+                  "type": {
+                    "text": "{ hide?: boolean }"
+                  }
                 }
               ],
-              "description": "Filter items based on a query string.\n\nMatching items are kept visible. Non-matching items are hidden. Matching\nitems receive `query=<query>` so their text-cell bolds the non-typed\nremainder (predictive completion — the ARIA APG pattern for combobox).\n\nWhen the query is empty, all items are shown and `query` is cleared."
+              "description": "Filter items based on a query string.\n\nMatching items are kept visible. Non-matching items are hidden. Matching\nitems receive `query=<query>` so their text-cell bolds the non-typed\nremainder (predictive completion — the ARIA APG pattern for combobox).\n\nWhen the query is empty, all items are shown and `query` is cleared.\n\nWith `hide: false` nothing is hidden and every item gets the `query`, for\na list someone else already filtered, such as a server answering per\nkeystroke. Text without the query in it is shown as it is."
             },
             {
               "kind": "method",
@@ -2167,12 +2221,12 @@
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "appearance",
               "type": {
                 "text": "string"
               },
               "default": "'neutral-tinted'",
-              "attribute": "variant",
+              "attribute": "appearance",
               "reflects": true
             },
             {
@@ -2248,13 +2302,13 @@
               "description": "Button size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md')"
             },
             {
-              "name": "variant",
+              "name": "appearance",
               "type": {
                 "text": "string"
               },
               "default": "'neutral-tinted'",
-              "fieldName": "variant",
-              "description": "Button variant (default: 'neutral-tinted')"
+              "fieldName": "appearance",
+              "description": "Visual style (default: 'neutral-tinted'; 'inherit-tinted' and 'inherit-filled' for a colored surface)"
             },
             {
               "name": "disabled",
@@ -3441,13 +3495,13 @@
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "appearance",
               "type": {
-                "text": "CodeViewerVariant"
+                "text": "CodeViewerAppearance"
               },
               "default": "'box-tinted'",
               "description": "Visual style. The `box` values are a framed card and name the surface they\nfill with; `simple` drops the frame.",
-              "attribute": "variant",
+              "attribute": "appearance",
               "reflects": true
             },
             {
@@ -3521,13 +3575,13 @@
           ],
           "attributes": [
             {
-              "name": "variant",
+              "name": "appearance",
               "type": {
-                "text": "CodeViewerVariant"
+                "text": "CodeViewerAppearance"
               },
               "default": "'box-tinted'",
               "description": "Visual style. The two `box` values are a framed card with rounded corners, padding, fill, and a 1px border ring, and differ in which surface they fill with; `box-tinted` is the default. `simple` drops the entire frame — use when embedding inside a parent surface.",
-              "fieldName": "variant"
+              "fieldName": "appearance"
             },
             {
               "name": "language",
@@ -4464,13 +4518,13 @@
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "appearance",
               "type": {
-                "text": "Variant"
+                "text": "Appearance"
               },
               "default": "'box'",
               "description": "'box' (default) renders each key as a keycap with a fill and highlight\nborder. 'simple' renders the keys as plain text with separators — lighter,\nfor inline use such as inside a menu item.",
-              "attribute": "variant",
+              "attribute": "appearance",
               "reflects": true
             },
             {
@@ -4542,13 +4596,13 @@
               "description": "Size: 'sm' | 'md' | 'inherit' (default: 'md'). 'inherit' takes the font-size from the container; in the box variant the keycaps then scale along in em."
             },
             {
-              "name": "variant",
+              "name": "appearance",
               "type": {
-                "text": "Variant"
+                "text": "Appearance"
               },
               "default": "'box'",
               "description": "'box' (default) shows each key as a keycap with a fill and a highlight edge. 'simple' shows the keys as plain text with separators: lighter, for inline use such as in a menu item.",
-              "fieldName": "variant"
+              "fieldName": "appearance"
             },
             {
               "name": "color",
@@ -5565,7 +5619,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A layout wrapper for the action buttons at the bottom of a form (typically a submit button or a button group). Follows the same responsive layout as `nldd-form-field`: with `label-alignment=\"right\"` or `\"left\"` the content gets the same indent as the fields above it, thanks to a `::before` pseudo-element that acts as the spacer column where the label would sit. Inherits `label-alignment` automatically from a wrapping `<nldd-form>`: the form propagates its own `label-alignment` as `form-label-alignment` to descendant `nldd-form-actions` (and `nldd-form-field`) through a MutationObserver. An explicit `label-alignment` on the form-actions itself wins through the CSS cascade, and the form code never touches the `label-alignment` attribute of the descendant. <nldd-form label-alignment=\"right\"> <nldd-form-field>...</nldd-form-field> <nldd-form-actions> <nldd-button-group> <nldd-button variant=\"primary\" type=\"submit\" text=\"Bewaar\"></nldd-button> </nldd-button-group> </nldd-form-actions> </nldd-form>",
+          "description": "A layout wrapper for the action buttons at the bottom of a form (typically a submit button or a button group). Follows the same responsive layout as `nldd-form-field`: with `label-alignment=\"right\"` or `\"left\"` the content gets the same indent as the fields above it, thanks to a `::before` pseudo-element that acts as the spacer column where the label would sit. Inherits `label-alignment` automatically from a wrapping `<nldd-form>`: the form propagates its own `label-alignment` as `form-label-alignment` to descendant `nldd-form-actions` (and `nldd-form-field`) through a MutationObserver. An explicit `label-alignment` on the form-actions itself wins through the CSS cascade, and the form code never touches the `label-alignment` attribute of the descendant. <nldd-form label-alignment=\"right\"> <nldd-form-field>...</nldd-form-field> <nldd-form-actions> <nldd-button-group> <nldd-button appearance=\"primary\" type=\"submit\" text=\"Bewaar\"></nldd-button> </nldd-button-group> </nldd-form-actions> </nldd-form>",
           "name": "NLDDFormActions",
           "members": [
             {
@@ -7172,6 +7226,14 @@
             "name": "NLDDJustInTimeEducation",
             "module": "./status-and-feedback/just-in-time-education/just-in-time-education.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "setTranslations",
+          "declaration": {
+            "name": "setTranslations",
+            "module": "../utilities/translations.js"
+          }
         }
       ]
     },
@@ -8105,7 +8167,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A monospace editor for code, YAML, JSON and other technical content, built on CodeMirror 6 (via NLDDCodeMirrorElement). Visually pairs with nldd-code-viewer for a matching read-only surface. Default `variant=\"simple\"` is a bare, flush editor (no frame, no focus ring) for use inside an nldd-form-field or a consumer composition that owns its own chrome and focus treatment; the caret is rendered as a prominent accent as the focus cue. `variant=\"input-field\"` adds the framed surface (border ring, tinted fill, inner padding, radius) and a focus ring for standalone use. The simple variant has no surrounding space of its own: let a layout container own the spacing and forward clicks with `focusFromPoint()` so clicking the padding still starts editing. Optional `language` enables lazy syntax highlighting; `line-numbers` adds a gutter (click a number to move the caret to that line).",
+          "description": "A monospace editor for code, YAML, JSON and other technical content, built on CodeMirror 6 (via NLDDCodeMirrorElement). Visually pairs with nldd-code-viewer for a matching read-only surface. Default `appearance=\"simple\"` is a bare, flush editor (no frame, no focus ring) for use inside an nldd-form-field or a consumer composition that owns its own chrome and focus treatment; the caret is rendered as a prominent accent as the focus cue. `appearance=\"input-field\"` adds the framed surface (border ring, tinted fill, inner padding, radius) and a focus ring for standalone use. The simple variant has no surrounding space of its own: let a layout container own the spacing and forward clicks with `focusFromPoint()` so clicking the padding still starts editing. Optional `language` enables lazy syntax highlighting; `line-numbers` adds a gutter (click a number to move the caret to that line).",
           "name": "NLDDCodeEditor",
           "members": [
             {
@@ -8226,12 +8288,12 @@
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "appearance",
               "type": {
-                "text": "CodeEditorVariant"
+                "text": "CodeEditorAppearance"
               },
               "default": "'simple'",
-              "attribute": "variant",
+              "attribute": "appearance",
               "reflects": true
             },
             {
@@ -8579,12 +8641,12 @@
               "description": "'none' (fixed) | 'vertical' (drag) | 'auto' (grow, default)"
             },
             {
-              "name": "variant",
+              "name": "appearance",
               "type": {
-                "text": "CodeEditorVariant"
+                "text": "CodeEditorAppearance"
               },
               "default": "'simple'",
-              "fieldName": "variant",
+              "fieldName": "appearance",
               "description": "'simple' (default, bare) | 'input-field' (framed surface)"
             },
             {
@@ -8780,6 +8842,17 @@
               "attribute": "allow-custom",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "noFilter",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Leaves the options as they are while typing: the list was filtered already, by a server.",
+              "attribute": "no-filter",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "name",
@@ -9201,9 +9274,18 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Allow committing free-typed values that match no option (Enter/blur). Default false: only menu options are accepted.",
+              "description": "Allow committing free-typed values that match no option (Enter/blur). Default false: only menu options are accepted. Typing an option's label in full picks that option, ignoring case and the spaces around it; with two such labels, the first one.",
               "fieldName": "allowCustom"
             },
+            {
+              "name": "no-filter",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Leaves the options as they are while typing, for a list your server already filtered per keystroke. Without it the field hides options that do not contain the typed text, which also hides a server match on, say, an e-mail address.",
+              "fieldName": "noFilter"
+            },
             {
               "name": "name",
               "type": {
@@ -14686,6 +14768,17 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "SegmentedControlAppearance"
+              },
+              "default": "'neutral-tinted'",
+              "description": "Set by nldd-segmented-control. Not part of the public API.",
+              "attribute": "appearance",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "size",
@@ -14813,6 +14906,15 @@
               "fieldName": "disabled",
               "description": "Disabled state"
             },
+            {
+              "name": "appearance",
+              "type": {
+                "text": "SegmentedControlAppearance"
+              },
+              "default": "'neutral-tinted'",
+              "description": "Visual style: 'neutral-tinted' | 'neutral-base' (default: 'neutral-tinted'). Set by nldd-segmented-control.",
+              "fieldName": "appearance"
+            },
             {
               "name": "size",
               "type": {
@@ -14938,6 +15040,16 @@
               "default": "[]",
               "description": "Selected values for checkbox type.\nUse property binding: .values=${['New York', 'Amsterdam']}\nDoes not reflect to an attribute — safe for values containing spaces or special characters."
             },
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "SegmentedControlAppearance"
+              },
+              "default": "'neutral-tinted'",
+              "attribute": "appearance",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "size",
@@ -15243,6 +15355,15 @@
               "description": "Selected value for radio type",
               "fieldName": "value"
             },
+            {
+              "name": "appearance",
+              "type": {
+                "text": "SegmentedControlAppearance"
+              },
+              "default": "'neutral-tinted'",
+              "fieldName": "appearance",
+              "description": "Visual style, color included: 'neutral-tinted' | 'neutral-base' (default: 'neutral-tinted'). neutral-base is for a tinted surface. For a quiet row without a track, use nldd-toggle-button-group with type=\"radio\" and a transparent appearance."
+            },
             {
               "name": "size",
               "type": {
@@ -17664,6 +17785,27 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/inputs/text-editor/text-editor.labels.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "relabel",
+          "description": "Says the editor's labels changed, such as after a language switch: the\nwidgets that draw a translated label rebuild with the new text."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "relabel",
+          "declaration": {
+            "name": "relabel",
+            "module": "src/components/inputs/text-editor/text-editor.labels.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/inputs/text-editor/text-editor.links.ts",
@@ -17939,6 +18081,15 @@
       "kind": "javascript-module",
       "path": "src/components/inputs/text-editor/text-editor.mentions.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "DEFAULT_TYPEAHEAD_QUERY",
+          "type": {
+            "text": "string"
+          },
+          "default": "'[\\\\p{L}\\\\p{M}\\\\p{N}_.+-]*'",
+          "description": "What may follow a trigger when a list says nothing else: letters in any\nscript and with any accent, digits, `_`, `.`, `+` and `-`. A name like\n`józef` reaches the source whole, and so does the `+1` of `:+1:`. A space\nends the query, as it ends a mention in most systems."
+        },
         {
           "kind": "function",
           "name": "typeaheadQueryAt",
@@ -17963,7 +18114,7 @@
             {
               "name": "triggers",
               "type": {
-                "text": "readonly string[]"
+                "text": "readonly TypeaheadTrigger[]"
               }
             }
           ],
@@ -18070,12 +18221,27 @@
               "type": {
                 "text": "(choice: TypeaheadChoice) => void"
               }
+            },
+            {
+              "name": "defaultEmptyText",
+              "default": "() => null",
+              "type": {
+                "text": "(query: string) => string | null"
+              }
             }
           ],
           "description": "The typeaheads. `getTypeaheads` is read on every keystroke, so the editor can\nhand over its current lists; choosing a candidate writes what the list's\n`insert` says and calls `onChoose`. Without lists it is inert."
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "DEFAULT_TYPEAHEAD_QUERY",
+          "declaration": {
+            "name": "DEFAULT_TYPEAHEAD_QUERY",
+            "module": "src/components/inputs/text-editor/text-editor.mentions.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "typeaheadQueryAt",
@@ -18180,6 +18346,76 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/inputs/text-editor/text-editor.spellcheck.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "spellcheckExclusions",
+          "description": "Says whether a syntax node is left out of spellchecking, and with it all it\ncontains. A plugin that renders something of its own adds a test here, so\nits syntax does not get a red underline in every consumer's editor."
+        },
+        {
+          "kind": "function",
+          "name": "leaveDeletionToBrowser",
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
+          },
+          "parameters": [
+            {
+              "name": "view",
+              "type": {
+                "text": "EditorView"
+              }
+            },
+            {
+              "name": "key",
+              "type": {
+                "text": "'Backspace' | 'Delete'"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "spellcheck",
+          "return": {
+            "type": {
+              "text": "Extension"
+            }
+          },
+          "description": "Spellchecking on the content, without the parts that are not running text."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "spellcheckExclusions",
+          "declaration": {
+            "name": "spellcheckExclusions",
+            "module": "src/components/inputs/text-editor/text-editor.spellcheck.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "leaveDeletionToBrowser",
+          "declaration": {
+            "name": "leaveDeletionToBrowser",
+            "module": "src/components/inputs/text-editor/text-editor.spellcheck.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "spellcheck",
+          "declaration": {
+            "name": "spellcheck",
+            "module": "src/components/inputs/text-editor/text-editor.spellcheck.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/inputs/text-editor/text-editor.syntax.ts",
@@ -18282,7 +18518,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A hybrid markdown editor built on CodeMirror 6 (via NLDDCodeMirrorElement): the document stays plain markdown text, but formatting is shown inline (bold is bold, headings are larger, links are colored) while the syntax markers stay visible, only dimmed — the iA Writer / Kirby approach. No WYSIWYG tree, so the data stays portable. Default `variant=\"simple\"` is bare (no frame, no focus ring) for use inside a composition (e.g. a message field) that owns its chrome and focus; the caret is a prominent accent. `variant=\"input-field\"` adds a framed surface + focus Headless: there is no built-in toolbar. A consumer drives formatting via the command methods (toggleBold/toggleItalic/toggleInlineCode/toggleStrikethrough/ toggleHeading/toggleBulletList/toggleTaskList/toggleQuote/toggleLink/runCommand to toggle, and setHeading/setList for picker-style \"set\" semantics), reads the active formats with getState(), listens to the nldd-text-editor-state event to render toggle states, and forwards padding clicks with focusFromPoint(). Cmd/Ctrl+B/I/E/K are bound out of the box. Commands keep focus on the editor. An inline toggle wraps the selected text (whitespace at its edges stays outside the markers), unwraps a run the caret is in, and with the caret at the very end of a run steps out of it. Bold that a typed space has broken (`**woord **`) keeps its styling while the caret is inside; the space moves outside the markers when the caret leaves. insertAtCursor(text) puts text at the caret and replaceRange(from, to, text) writes at the same clean offsets getSelection() reads. An @-mention typeahead (mentionSource) collapses to an atomic token, further typeahead lists on their own trigger (typeaheads) write what you tell them to, and a W3C-style annotation overlay (annotations) marks ranges with a dashed underline, light tint and a count badge without touching the underlying text.",
+          "description": "A hybrid markdown editor built on CodeMirror 6 (via NLDDCodeMirrorElement): the document stays plain markdown text, but formatting is shown inline (bold is bold, headings are larger, links are colored) while the syntax markers stay visible, only dimmed — the iA Writer / Kirby approach. No WYSIWYG tree, so the data stays portable. Default `appearance=\"simple\"` is bare (no frame, no focus ring) for use inside a composition (e.g. a message field) that owns its chrome and focus; the caret is a prominent accent. `appearance=\"input-field\"` adds a framed surface + focus Headless: there is no built-in toolbar. A consumer drives formatting via the command methods (toggleBold/toggleItalic/toggleInlineCode/toggleStrikethrough/ toggleHeading/toggleBulletList/toggleTaskList/toggleQuote/toggleLink/runCommand to toggle, and setHeading/setList for picker-style \"set\" semantics), reads the active formats with getState(), listens to the nldd-text-editor-state event to render toggle states, and forwards padding clicks with focusFromPoint(). Cmd/Ctrl+B/I/E/K are bound out of the box. Commands keep focus on the editor. An inline toggle wraps the selected text (whitespace at its edges stays outside the markers), unwraps a run the caret is in, and with the caret at the very end of a run steps out of it. Bold that a typed space has broken (`**woord **`) keeps its styling while the caret is inside; the space moves outside the markers when the caret leaves. insertAtCursor(text) puts text at the caret and replaceRange(from, to, text) writes at the same clean offsets getSelection() reads. An @-mention typeahead (mentionSource) collapses to an atomic token, further typeahead lists on their own trigger (typeaheads) write what you tell them to, and a W3C-style annotation overlay (annotations) marks ranges with a dashed underline, light tint and a count badge without touching the underlying text.",
           "name": "NLDDTextEditor",
           "members": [
             {
@@ -18372,6 +18608,17 @@
               "attribute": "required",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "noSpellcheck",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Turns spellchecking off. On by default, without code, URLs and mentions.",
+              "attribute": "no-spellcheck",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "wrap",
@@ -18403,12 +18650,12 @@
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "appearance",
               "type": {
-                "text": "TextEditorVariant"
+                "text": "TextEditorAppearance"
               },
               "default": "'simple'",
-              "attribute": "variant",
+              "attribute": "appearance",
               "reflects": true
             },
             {
@@ -18428,6 +18675,22 @@
               },
               "description": "Consumer-supplied"
             },
+            {
+              "kind": "field",
+              "name": "mentionQuery",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "What may follow the `@` of a mention, as a regular expression without\nanchors or capturing groups. Property only. Without it: letters with any\naccent, digits, `_`, `.`, `+` and `-`. Allow one space to search on a full\nname: `'[\\\\p{L}\\\\p{M}\\\\p{N}_.+-]*(?: [\\\\p{L}\\\\p{M}\\\\p{N}_.+-]+)?'`."
+            },
+            {
+              "kind": "field",
+              "name": "mentionEmptyText",
+              "type": {
+                "text": "(query: string) => string | null | undefined | undefined"
+              },
+              "description": "What to say when the"
+            },
             {
               "kind": "field",
               "name": "typeaheads",
@@ -19095,6 +19358,15 @@
               "fieldName": "required",
               "description": "Required state"
             },
+            {
+              "name": "no-spellcheck",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Turns spellchecking off. It is on by default, like the other text fields, and leaves out what is not running text: inline code and code blocks, the address of a link and a bare URL (the link text is checked), and mentions. Autocorrect and autocapitalize follow the user's own settings, as in the other fields, also with `no-spellcheck`. Two limits come from the browser: text that was already there is checked once you edit near it, not when the editor opens (the editor lives in a shadow root; Firefox only checks around the caret), and markup that changes how a line is built, such as starting a list item, hides the underlines on that line until you type on.",
+              "fieldName": "noSpellcheck"
+            },
             {
               "name": "wrap",
               "type": {
@@ -19123,12 +19395,12 @@
               "description": "'none' (fixed) | 'vertical' (drag) | 'auto' (grow, default)"
             },
             {
-              "name": "variant",
+              "name": "appearance",
               "type": {
-                "text": "TextEditorVariant"
+                "text": "TextEditorAppearance"
               },
               "default": "'simple'",
-              "fieldName": "variant",
+              "fieldName": "appearance",
               "description": "'simple' (default, bare) | 'input-field' (framed surface)"
             },
             {
@@ -19275,6 +19547,22 @@
             "module": "./text-editor.mentions.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "TypeaheadTrigger",
+          "declaration": {
+            "name": "TypeaheadTrigger",
+            "module": "./text-editor.mentions.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DEFAULT_TYPEAHEAD_QUERY",
+          "declaration": {
+            "name": "DEFAULT_TYPEAHEAD_QUERY",
+            "module": "./text-editor.mentions.js"
+          }
+        },
         {
           "kind": "js",
           "name": "Annotation",
@@ -21066,7 +21354,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Groups nldd-toggle-button elements and manages selection, keyboard navigation, and forwarding of type, name, size, and disabled state to all buttons. For type=\"radio\" (single-select), arrow keys navigate between buttons and automatically select the focused one. For type=\"checkbox\" (multi-select), multiple buttons can be selected simultaneously.",
+          "description": "Groups nldd-toggle-button elements and manages selection, keyboard navigation, and forwarding of type, name, appearance, size, and disabled state to all buttons. For type=\"radio\" (single-select), arrow keys navigate between buttons and automatically select the focused one. For type=\"checkbox\" (multi-select), multiple buttons can be selected simultaneously.",
           "name": "NLDDToggleButtonGroup",
           "members": [
             {
@@ -21109,6 +21397,16 @@
               "default": "''",
               "attribute": "name"
             },
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "ToggleButtonAppearance"
+              },
+              "default": "'neutral-tinted'",
+              "attribute": "appearance",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "size",
@@ -21208,6 +21506,15 @@
               "fieldName": "name",
               "description": "Forwarded to all buttons"
             },
+            {
+              "name": "appearance",
+              "type": {
+                "text": "ToggleButtonAppearance"
+              },
+              "default": "'neutral-tinted'",
+              "fieldName": "appearance",
+              "description": "Forwarded to all buttons (default: 'neutral-tinted')"
+            },
             {
               "name": "size",
               "type": {
@@ -21299,7 +21606,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A selectable button that toggles between selected and unselected. Available as a button (aria-pressed), a checkbox, or a radio. In radio mode the button itself is the radio: it carries the role, the state and its place in the group. A native radio in a shadow root of its own would be a group of one, counted as \"1 of 1\" and stopped at by Tab.",
+          "description": "A selectable button that toggles between selected and unselected. Available as a button (aria-pressed), a checkbox, or a radio. The label stays the same in both states: the state is in aria-pressed (or checked) and in the fill, so a screen reader says \"Favoriet, pressed\". A label that changes with the state (\"Volgen\", then \"Ontvolgen\") says what the button does next; that is an nldd-button whose text you change, not a toggle. In radio mode the button itself is the radio: it carries the role, the state and its place in the group. A native radio in a shadow root of its own would be a group of one, counted as \"1 of 1\" and stopped at by Tab.",
           "name": "NLDDToggleButton",
           "members": [
             {
@@ -21332,6 +21639,16 @@
               "attribute": "type",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "ToggleButtonAppearance"
+              },
+              "default": "'neutral-tinted'",
+              "attribute": "appearance",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "size",
@@ -21413,6 +21730,17 @@
               "description": "Icon name for the nldd-icon element. When not set, the icon slot is used; the\nicon and icon-and-text variants show a placeholder icon when neither is provided.",
               "attribute": "icon"
             },
+            {
+              "kind": "field",
+              "name": "selectedIcon",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Icon shown instead of `icon` while selected. On the transparent\nappearances it replaces the fill, so it is reflected for the styles.",
+              "attribute": "selected-icon",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "variant",
@@ -21700,6 +22028,15 @@
               "fieldName": "type",
               "description": "What the button is: a button with aria-pressed, a native checkbox, or a radio (default: 'button')"
             },
+            {
+              "name": "appearance",
+              "type": {
+                "text": "ToggleButtonAppearance"
+              },
+              "default": "'neutral-tinted'",
+              "fieldName": "appearance",
+              "description": "Visual style, color included (default: 'neutral-tinted'). Selected is filled in each of them; the transparent ones are for a toggle among transparent buttons, and with a selected-icon they stay quiet when on."
+            },
             {
               "name": "size",
               "type": {
@@ -21772,6 +22109,15 @@
               "description": "Icon name for nldd-icon",
               "fieldName": "icon"
             },
+            {
+              "name": "selected-icon",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Icon shown instead of `icon` while selected, such as `check-mark` for `plus` or `heart-filled` for `heart`. The appearances with a surface fill it when on, as without one. The transparent appearances have no surface to fill: with a selected-icon they stay quiet when on and the change of shape says it is on; without one they fill, so the state always shows.",
+              "fieldName": "selectedIcon"
+            },
             {
               "name": "variant",
               "type": {
@@ -21849,7 +22195,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A multi-select input that looks like a normal input field: chosen values show as dismissible tokens in a wrapping row, followed by an inline text input that stretches to fill the remaining space and wraps to a new line (growing the field) when it no longer fits. Options are supplied as a slotted nldd-menu, exactly like nldd-combo-box; the menu filters as you type, with a chevron picker button, arrow-key roving across the tokens and ElementInternals form participation.",
+          "description": "A multi-select input that looks like a normal input field: chosen values show as dismissible tokens in a wrapping row, followed by an inline text input that stretches to fill the remaining space and wraps to a new line (growing the field) when it no longer fits. Options are supplied as a slotted nldd-menu, exactly like nldd-combo-box; the menu filters as you type, with a chevron picker button, arrow-key roving across the tokens and ElementInternals form participation. Options can arrive after the keystroke, from a server you query per keystroke. Slot them into the menu when they come in: if the user is still in the field and the keystroke found nothing to show, the menu opens then. After Escape, or once the user left the field, it stays shut.",
           "name": "NLDDTokenField",
           "members": [
             {
@@ -21929,6 +22275,17 @@
               "attribute": "allow-custom",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "noFilter",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Leaves the options as they are while typing: the list was filtered already, by a server.",
+              "attribute": "no-filter",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "valid",
@@ -22288,9 +22645,18 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Allow free-typed values (not just menu options)",
+              "description": "Allow free-typed values (not just menu options). Typing an option's label in full adds that option, with its value, ignoring case and the spaces around it; with two such labels, the first one.",
               "fieldName": "allowCustom"
             },
+            {
+              "name": "no-filter",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Leaves the options as they are while typing, for a list your server already filtered per keystroke. Without it the field hides options that do not contain the typed text, which also hides a server match on, say, an e-mail address.",
+              "fieldName": "noFilter"
+            },
             {
               "name": "valid",
               "type": {
@@ -22554,7 +22920,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A visually bounded card with optional header, body and footer sections. The card is elevated by default. Padding is left to nested containers. With `href` the whole card becomes a link (an overlay anchor across the card), with `button` a button (an overlay button that fires a plain, composed `click`, so a click listener or htmx attribute on the card itself works directly, and Enter/Space work natively). `href` wins when both are set. Nested interactive content, footer buttons for instance, has to be lifted above it with `position: relative; z-index: 1` to stay clickable.",
+          "description": "A visually bounded card with optional header, body and footer sections. The card is elevated by default. Padding is left to nested containers. With `href` the whole card becomes a link (an overlay anchor across the card), with `button` a button (an overlay button that fires a plain, composed `click`, so a click listener or htmx attribute on the card itself works directly, and Enter/Space work natively). `href` wins when both are set. Nested interactive content, footer buttons for instance, has to be lifted above it with `position: relative; z-index: 1` to stay clickable. A card that is a link or button steps its surface and border one shade up on hover and one more while pressed, as a neutral-base button does; content lifted above the overlay does not set it off.",
           "name": "NLDDCard",
           "members": [
             {
@@ -30330,18 +30696,18 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A cell component for displaying timeline track indicators in lists. Shows a vertical line with a dot indicating timeline position and state. The row's block padding belongs to the cell itself (via `--context-cell-padding-block`), so the line spans the cell's own box edge to edge and consecutive steps connect without gaps. By default the cell is a bare track: a line with a dot per row, for a timeline of events. With `variant=\"step\"` the dot grows big enough for a number or an icon and you have a list of steps under each other, the vertical counterpart of `nldd-step-indicator`. The size belongs to the variant rather than to the content: every dot in a list is the same size, or the track would jump.",
+          "description": "A cell component for displaying timeline track indicators in lists. Shows a vertical line with a dot indicating timeline position and state. The row's block padding belongs to the cell itself (via `--context-cell-padding-block`), so the line spans the cell's own box edge to edge and consecutive steps connect without gaps. By default the cell is a bare track: a line with a dot per row, for a timeline of events. With `size=\"md\"` the dot grows big enough for a number or an icon and you have a list of steps under each other, the vertical counterpart of `nldd-step-indicator`. The size belongs to the lane rather than to the content: every dot in a list is the same size, or the track would jump.",
           "name": "NLDDTimelineTrackCell",
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "level",
               "type": {
-                "text": "Variant"
+                "text": "Level"
               },
               "default": "'major'",
               "description": "What stands in the lane: a whole dot, a smaller one, or nothing.\n\nA rank rather than a measurement — the cell picks the sizes, so the scale\ncan change later without every consumer following. `minor` is a row that\nbelongs under the one above it, and its dot stays empty: a number would not\nfit and would make the row a step of its own, so carry that hierarchy in\nthe row instead, with an `nldd-text-cell` rather than an `nldd-title-cell`.\n`none` is a row that carries what a step holds rather than being one.",
-              "attribute": "variant",
+              "attribute": "level",
               "reflects": true
             },
             {
@@ -30453,13 +30819,13 @@
           ],
           "attributes": [
             {
-              "name": "variant",
+              "name": "level",
               "type": {
-                "text": "Variant"
+                "text": "Level"
               },
               "default": "'major'",
               "description": "What stands in the lane: a whole dot (`major`, the default), a smaller one for a row that belongs under the one above it (`minor`), or nothing at all (`none`) for a row that carries what a step holds rather than being a step. A `none` row keeps its `size` and its `status`, so it stays in the same lane and the track runs on in the right color",
-              "fieldName": "variant"
+              "fieldName": "level"
             },
             {
               "name": "status",
@@ -30495,7 +30861,7 @@
               },
               "default": "'between'",
               "fieldName": "position",
-              "description": "Place in the series (default 'between'): decides whether the line continues above the dot, below it, or on both sides. `only` is the single row in the series and gets a line on neither side: a track of one dot leads nowhere. On a `variant=\"none\"` row, which is nothing but line, `only` leaves it out altogether: the track ends above it"
+              "description": "Place in the series (default 'between'): decides whether the line continues above the dot, below it, or on both sides. `only` is the single row in the series and gets a line on neither side: a track of one dot leads nowhere. On a `level=\"none\"` row, which is nothing but line, `only` leaves it out altogether: the track ends above it"
             },
             {
               "name": "line",
@@ -30503,7 +30869,7 @@
                 "text": "Line"
               },
               "default": "'auto'",
-              "description": "Which halves of the track you have covered, when `status` and `direction` get it wrong (default 'auto', which is what those two say). The halves you name are drawn as covered and the other one as still ahead, so `none` covers neither. Which halves are drawn at all stays with `position`, except that naming a half draws it: `line=\"both\"` on a `first` row draws one above too. A row that opens a group of its own is the case for `both`, since the going carries on below it. A `variant=\"none\"` row has one line rather than two halves, and no point where a fill could change over, so there the status colors the whole of it and `line` overrules the whole of it. On a `current` row that leans the way the timeline runs: what belongs to a point usually comes after it, so going `down` the stretch reads as still ahead and going `up` as behind you",
+              "description": "Which halves of the track you have covered, when `status` and `direction` get it wrong (default 'auto', which is what those two say). The halves you name are drawn as covered and the other one as still ahead, so `none` covers neither. Which halves are drawn at all stays with `position`, except that naming a half draws it: `line=\"both\"` on a `first` row draws one above too. A row that opens a group of its own is the case for `both`, since the going carries on below it. A `level=\"none\"` row has one line rather than two halves, and no point where a fill could change over, so there the status colors the whole of it and `line` overrules the whole of it. On a `current` row that leans the way the timeline runs: what belongs to a point usually comes after it, so going `down` the stretch reads as still ahead and going `up` as behind you",
               "fieldName": "line"
             },
             {
@@ -31731,13 +32097,13 @@
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "appearance",
               "type": {
-                "text": "ListVariant"
+                "text": "ListAppearance"
               },
               "default": "'simple'",
               "description": "Visual style of the list. `simple` is a plain vertical strip with\nno chrome (no rounded corners, no fill, no border); `box` is a\nframed card with rounded corners, fill, and an inset border ring.",
-              "attribute": "variant",
+              "attribute": "appearance",
               "reflects": true
             },
             {
@@ -31818,12 +32184,12 @@
           "attributes": [
             {
               "type": {
-                "text": "ListVariant"
+                "text": "ListAppearance"
               },
               "description": "Visual style (default 'simple'): `simple` is a plain vertical strip with no chrome, the two `box` values a framed card with rounded corners, fill and inset border ring. `box-tinted` for a list on a plain page, `box-base` for one on an already-tinted parent (the border ring gets +2 palette steps so it still reads against a card-on-card)",
-              "name": "variant",
+              "name": "appearance",
               "default": "'simple'",
-              "fieldName": "variant"
+              "fieldName": "appearance"
             },
             {
               "type": {
@@ -34258,7 +34624,17 @@
             "package": "lit"
           },
           "tagName": "nldd-top-navigation-bar",
-          "customElement": true
+          "customElement": true,
+          "slots": [
+            {
+              "name": "global",
+              "description": "The global navigation: an nldd-menu-bar with nldd-menu-bar-item elements. On narrow widths these items move into the menu sheet behind the menu button."
+            },
+            {
+              "name": "utility",
+              "description": "The utility navigation, such as search and language: an nldd-menu-bar with nldd-menu-bar-item elements. Stays in the bar on every width."
+            }
+          ]
         }
       ],
       "exports": [
@@ -36104,17 +36480,17 @@
         },
         {
           "kind": "class",
-          "description": "Exports both NLDDProgressBar and NLDDProgressBarSegmentIndicator. A progress bar that supports a single value (loading-style) or multiple segments (multi-stage progress, or distribution like storage usage). The consumer provides raw values; the component computes percentages from `max`. Two modes: - `progress` (default): segments sum toward `max`; remaining space is empty track. ARIA reads \"X% voltooid\". - `distribution`: segments fill the bar; ARIA enumerates segments. If the sum of segment values exceeds `max`, segments are normalized proportionally to fit and a warning is logged.",
+          "description": "Exports both NLDDProgressBar and NLDDProgressBarSegmentIndicator. A progress bar that supports a single value (loading-style) or multiple segments (multi-stage progress, or distribution like storage usage). The consumer provides raw values; the component computes percentages from `max`. Two variants: - `progress` (default): segments sum toward `max`; remaining space is empty track. ARIA reads \"X% voltooid\". - `distribution`: segments fill the bar; ARIA enumerates segments. If the sum of segment values exceeds `max`, segments are normalized proportionally to fit and a warning is logged.",
           "name": "NLDDProgressBar",
           "members": [
             {
               "kind": "field",
-              "name": "mode",
+              "name": "variant",
               "type": {
-                "text": "ProgressBarMode"
+                "text": "ProgressBarVariant"
               },
               "default": "'progress'",
-              "attribute": "mode",
+              "attribute": "variant",
               "reflects": true
             },
             {
@@ -36230,12 +36606,12 @@
           ],
           "attributes": [
             {
-              "name": "mode",
+              "name": "variant",
               "type": {
-                "text": "ProgressBarMode"
+                "text": "ProgressBarVariant"
               },
               "default": "'progress'",
-              "fieldName": "mode",
+              "fieldName": "variant",
               "description": "Semantics for ARIA and visualization (default: 'progress')"
             },
             {
@@ -36482,17 +36858,17 @@
         },
         {
           "kind": "class",
-          "description": "Exports both NLDDProgressCircle and NLDDProgressCircleSegmentIndicator. A circular progress indicator that mirrors the API of nldd-progress-bar: single-value or multi-segment, progress or distribution mode, 24 colors, fade transitions between determinate/indeterminate, indeterminate indicator. Visual differences vs the bar: - SVG arcs instead of rectangular bars. - Label below the circle (not above). - No center text; the consumer can wrap the circle if needed. - One combined tooltip on the whole circle showing all segment info (no per-segment tooltips). - Indeterminate uses a rotating elastic arc (Material-style) instead of the bar's Knight Rider scanner.",
+          "description": "Exports both NLDDProgressCircle and NLDDProgressCircleSegmentIndicator. A circular progress indicator that mirrors the API of nldd-progress-bar: single-value or multi-segment, progress or distribution variant, 24 colors, fade transitions between determinate/indeterminate, indeterminate indicator. Visual differences vs the bar: - SVG arcs instead of rectangular bars. - Label below the circle (not above). - No center text; the consumer can wrap the circle if needed. - One combined tooltip on the whole circle showing all segment info (no per-segment tooltips). - Indeterminate uses a rotating elastic arc (Material-style) instead of the bar's Knight Rider scanner.",
           "name": "NLDDProgressCircle",
           "members": [
             {
               "kind": "field",
-              "name": "mode",
+              "name": "variant",
               "type": {
-                "text": "ProgressCircleMode"
+                "text": "ProgressCircleVariant"
               },
               "default": "'progress'",
-              "attribute": "mode",
+              "attribute": "variant",
               "reflects": true
             },
             {
@@ -36607,12 +36983,12 @@
           ],
           "attributes": [
             {
-              "name": "mode",
+              "name": "variant",
               "type": {
-                "text": "ProgressCircleMode"
+                "text": "ProgressCircleVariant"
               },
               "default": "'progress'",
-              "fieldName": "mode",
+              "fieldName": "variant",
               "description": "Semantics for ARIA and gap behavior (default: 'progress')"
             },
             {
@@ -36720,7 +37096,13 @@
             "package": "lit"
           },
           "tagName": "nldd-progress-circle",
-          "customElement": true
+          "customElement": true,
+          "slots": [
+            {
+              "name": "",
+              "description": "Place for nldd-progress-circle-segment-indicator elements"
+            }
+          ]
         }
       ],
       "exports": [
@@ -39214,6 +39596,103 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/utilities/translations.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "setTranslations",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "translations",
+              "type": {
+                "text": "Translations"
+              }
+            }
+          ],
+          "description": "Sets the texts for the whole package, replacing what was set before. Keys you\nleave out fall back to Dutch. To start from the shipped English and change a\nfew texts, spread them: `setTranslations({ ...enUS, 'key': 'Mine' })`.\n\nCall it before the components render. Calling it again re-renders the\ncomponents on the page, so a language switch at runtime works too. Call it\nwhen the language changes, not on every render: each call walks the page.\nA component inside a closed shadow root is out of its reach and keeps its old\ntexts until it renders again; ask it to with `requestUpdate()`."
+        },
+        {
+          "kind": "function",
+          "name": "getTranslations",
+          "return": {
+            "type": {
+              "text": "Readonly<Translations>"
+            }
+          },
+          "description": "What the app set with `setTranslations()`, for tests and debugging."
+        },
+        {
+          "kind": "function",
+          "name": "translate",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "own",
+              "type": {
+                "text": "Partial<T> | undefined"
+              }
+            },
+            {
+              "name": "defaults",
+              "type": {
+                "text": "T"
+              }
+            },
+            {
+              "name": "key",
+              "type": {
+                "text": "keyof T"
+              }
+            },
+            {
+              "name": "vars",
+              "optional": true,
+              "type": {
+                "text": "Record<string, string | number>"
+              }
+            }
+          ],
+          "description": "Looks a key up through the three layers and fills in `{placeholders}`. Every\ncomponent's `_t()` goes through here, so none of them skips the package-wide\nlayer."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "setTranslations",
+          "declaration": {
+            "name": "setTranslations",
+            "module": "src/utilities/translations.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getTranslations",
+          "declaration": {
+            "name": "getTranslations",
+            "module": "src/utilities/translations.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "translate",
+          "declaration": {
+            "name": "translate",
+            "module": "src/utilities/translations.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/utilities/visibility-mixin.ts",