@nldd/design-system 0.8.83 → 0.8.84
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +3415 -476
- package/dist/components/actions/button/button.d.ts +4 -2
- package/dist/components/actions/button/button.d.ts.map +1 -1
- package/dist/components/actions/button/button.js +7 -2
- package/dist/components/actions/button/button.js.map +1 -1
- package/dist/components/actions/icon-button/icon-button.d.ts +1 -1
- package/dist/components/actions/icon-button/icon-button.js +1 -1
- package/dist/components/actions/menu/menu.d.ts +3 -1
- package/dist/components/actions/menu/menu.d.ts.map +1 -1
- package/dist/components/actions/menu/menu.js +22 -11
- package/dist/components/actions/menu/menu.js.map +1 -1
- package/dist/components/actions/toolbar/toolbar.styles.js +2 -2
- package/dist/components/components.js +2027 -941
- package/dist/components/content/avatar/avatar.d.ts +6 -0
- package/dist/components/content/avatar/avatar.d.ts.map +1 -1
- package/dist/components/content/avatar/avatar.js +9 -0
- package/dist/components/content/avatar/avatar.js.map +1 -1
- package/dist/components/content/avatar/avatar.template.d.ts.map +1 -1
- package/dist/components/content/avatar/avatar.template.js +2 -0
- package/dist/components/content/avatar/avatar.template.js.map +1 -1
- package/dist/components/content/avatar-group/avatar-group.styles.d.ts.map +1 -1
- package/dist/components/content/avatar-group/avatar-group.styles.js +6 -16
- package/dist/components/content/avatar-group/avatar-group.styles.js.map +1 -1
- package/dist/components/content/blockquote/blockquote.d.ts +3 -4
- package/dist/components/content/blockquote/blockquote.d.ts.map +1 -1
- package/dist/components/content/blockquote/blockquote.js +3 -4
- package/dist/components/content/blockquote/blockquote.js.map +1 -1
- package/dist/components/content/icon/icon-aliases.d.ts.map +1 -1
- package/dist/components/content/icon/icon-aliases.js +2 -0
- package/dist/components/content/icon/icon-aliases.js.map +1 -1
- package/dist/components/content/icon/icon-gallery-status.d.ts.map +1 -1
- package/dist/components/content/icon/icon-gallery-status.js +2 -0
- package/dist/components/content/icon/icon-gallery-status.js.map +1 -1
- package/dist/components/content/icon/icon-registry.d.ts.map +1 -1
- package/dist/components/content/icon/icon-registry.js +2 -0
- package/dist/components/content/icon/icon-registry.js.map +1 -1
- package/dist/components/content/image/image.d.ts +1 -1
- package/dist/components/content/image/image.js +1 -1
- package/dist/components/content/image/image.styles.d.ts.map +1 -1
- package/dist/components/content/image/image.styles.js +11 -0
- package/dist/components/content/image/image.styles.js.map +1 -1
- package/dist/components/content/keyboard-shortcut/keyboard-shortcut.d.ts +30 -30
- package/dist/components/content/keyboard-shortcut/keyboard-shortcut.js +30 -30
- package/dist/components/content/rich-text/rich-text.d.ts +20 -20
- package/dist/components/content/rich-text/rich-text.js +20 -20
- package/dist/components/content/title/title.d.ts +4 -4
- package/dist/components/content/title/title.js +4 -4
- package/dist/components/content/tooltip/tooltip.d.ts +1 -1
- package/dist/components/content/tooltip/tooltip.js +1 -1
- package/dist/components/{decorate-BKn10QQi.js → decorate-lwt_OrAG.js} +1 -1
- package/dist/components/{dist-TpIL8G4G.js → dist-762GHPyH.js} +3 -3
- package/dist/components/{dist-OBifyiJS.js → dist-BB7TxeMK.js} +2 -2
- package/dist/components/{dist-CJR_Rwhh.js → dist-BJI4-6iQ.js} +1 -1
- package/dist/components/{dist-C400RcFU.js → dist-B_3OW7pC.js} +1 -1
- package/dist/components/{dist-afrAoubg.js → dist-C09E9-dJ.js} +34 -34
- package/dist/components/{dist-Ccw7ZfsU.js → dist-C6gnorjP.js} +4 -3
- package/dist/components/{dist-bO14jlsr.js → dist-CRsR6ckU.js} +1 -1
- package/dist/components/{dist-C0PiB1dr.js → dist-CjaG8dOI.js} +2 -2
- package/dist/components/{dist-CCg5Mso_.js → dist-DZoFKUO-.js} +1 -1
- package/dist/components/{dist-Bq4xc7Bm.js → dist-DaavuU6W.js} +14 -3
- package/dist/components/{dist-BYVOPNHp.js → dist-la_b3ZSq.js} +1 -1
- package/dist/components/forms/form/form.d.ts +76 -22
- package/dist/components/forms/form/form.d.ts.map +1 -1
- package/dist/components/forms/form/form.js +127 -22
- package/dist/components/forms/form/form.js.map +1 -1
- package/dist/components/forms/form-actions/form-actions.d.ts +14 -15
- package/dist/components/forms/form-actions/form-actions.d.ts.map +1 -1
- package/dist/components/forms/form-actions/form-actions.js +14 -15
- package/dist/components/forms/form-actions/form-actions.js.map +1 -1
- package/dist/components/forms/form-field/form-field.d.ts +42 -39
- package/dist/components/forms/form-field/form-field.d.ts.map +1 -1
- package/dist/components/forms/form-field/form-field.js +79 -111
- package/dist/components/forms/form-field/form-field.js.map +1 -1
- package/dist/components/forms/form-field/form-field.styles.d.ts +0 -1
- package/dist/components/forms/form-field/form-field.styles.d.ts.map +1 -1
- package/dist/components/forms/form-field/form-field.styles.js +7 -73
- package/dist/components/forms/form-field/form-field.styles.js.map +1 -1
- package/dist/components/forms/form-field/form-field.template.d.ts +0 -2
- package/dist/components/forms/form-field/form-field.template.d.ts.map +1 -1
- package/dist/components/forms/form-field/form-field.template.js +0 -15
- package/dist/components/forms/form-field/form-field.template.js.map +1 -1
- package/dist/components/forms/form-section/form-section.d.ts +26 -28
- package/dist/components/forms/form-section/form-section.d.ts.map +1 -1
- package/dist/components/forms/form-section/form-section.js +27 -29
- package/dist/components/forms/form-section/form-section.js.map +1 -1
- package/dist/components/forms/validation-list/validation-list.d.ts +193 -0
- package/dist/components/forms/validation-list/validation-list.d.ts.map +1 -0
- package/dist/components/forms/validation-list/validation-list.js +358 -0
- package/dist/components/forms/validation-list/validation-list.js.map +1 -0
- package/dist/components/forms/validation-list/validation-list.styles.d.ts +3 -0
- package/dist/components/forms/validation-list/validation-list.styles.d.ts.map +1 -0
- package/dist/components/forms/validation-list/validation-list.styles.js +58 -0
- package/dist/components/forms/validation-list/validation-list.styles.js.map +1 -0
- package/dist/components/forms/validation-list/validation-list.template.d.ts +5 -0
- package/dist/components/forms/validation-list/validation-list.template.d.ts.map +1 -0
- package/dist/components/forms/validation-list/validation-list.template.js +16 -0
- package/dist/components/forms/validation-list/validation-list.template.js.map +1 -0
- package/dist/components/{icon-C1Kikpol.js → icon-VTLbdcvZ.js} +4 -1
- package/dist/components/{icon-button-BYy6hnAY.js → icon-button-Sne5TwRG.js} +5 -5
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +1 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/inputs/checkbox/checkbox.d.ts +20 -1
- package/dist/components/inputs/checkbox/checkbox.d.ts.map +1 -1
- package/dist/components/inputs/checkbox/checkbox.js +32 -2
- package/dist/components/inputs/checkbox/checkbox.js.map +1 -1
- package/dist/components/inputs/checkbox/checkbox.template.d.ts.map +1 -1
- package/dist/components/inputs/checkbox/checkbox.template.js +2 -0
- package/dist/components/inputs/checkbox/checkbox.template.js.map +1 -1
- package/dist/components/inputs/checkbox-field/checkbox-field.d.ts +16 -1
- package/dist/components/inputs/checkbox-field/checkbox-field.d.ts.map +1 -1
- package/dist/components/inputs/checkbox-field/checkbox-field.js +27 -2
- package/dist/components/inputs/checkbox-field/checkbox-field.js.map +1 -1
- package/dist/components/inputs/checkbox-field/checkbox-field.template.d.ts.map +1 -1
- package/dist/components/inputs/checkbox-field/checkbox-field.template.js +2 -0
- package/dist/components/inputs/checkbox-field/checkbox-field.template.js.map +1 -1
- package/dist/components/inputs/code-editor/code-editor.d.ts +14 -1
- package/dist/components/inputs/code-editor/code-editor.d.ts.map +1 -1
- package/dist/components/inputs/code-editor/code-editor.js +21 -2
- package/dist/components/inputs/code-editor/code-editor.js.map +1 -1
- package/dist/components/inputs/combo-box/combo-box.d.ts +13 -2
- package/dist/components/inputs/combo-box/combo-box.d.ts.map +1 -1
- package/dist/components/inputs/combo-box/combo-box.js +32 -5
- package/dist/components/inputs/combo-box/combo-box.js.map +1 -1
- package/dist/components/inputs/combo-box/combo-box.styles.d.ts.map +1 -1
- package/dist/components/inputs/combo-box/combo-box.styles.js +9 -0
- package/dist/components/inputs/combo-box/combo-box.styles.js.map +1 -1
- package/dist/components/inputs/combo-box/combo-box.template.d.ts.map +1 -1
- package/dist/components/inputs/combo-box/combo-box.template.js +4 -0
- package/dist/components/inputs/combo-box/combo-box.template.js.map +1 -1
- package/dist/components/inputs/date-field/date-field.d.ts +29 -31
- package/dist/components/inputs/date-field/date-field.d.ts.map +1 -1
- package/dist/components/inputs/date-field/date-field.js +40 -37
- package/dist/components/inputs/date-field/date-field.js.map +1 -1
- package/dist/components/inputs/date-field/date-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/date-field/date-field.styles.js +11 -0
- package/dist/components/inputs/date-field/date-field.styles.js.map +1 -1
- package/dist/components/inputs/date-field/date-field.template.d.ts.map +1 -1
- package/dist/components/inputs/date-field/date-field.template.js +0 -1
- package/dist/components/inputs/date-field/date-field.template.js.map +1 -1
- package/dist/components/inputs/date-picker/date-picker.d.ts +34 -21
- package/dist/components/inputs/date-picker/date-picker.d.ts.map +1 -1
- package/dist/components/inputs/date-picker/date-picker.js +42 -22
- package/dist/components/inputs/date-picker/date-picker.js.map +1 -1
- package/dist/components/inputs/dropdown/dropdown.d.ts +23 -2
- package/dist/components/inputs/dropdown/dropdown.d.ts.map +1 -1
- package/dist/components/inputs/dropdown/dropdown.js +36 -3
- package/dist/components/inputs/dropdown/dropdown.js.map +1 -1
- package/dist/components/inputs/file-field/file-field.d.ts +4 -3
- package/dist/components/inputs/file-field/file-field.d.ts.map +1 -1
- package/dist/components/inputs/file-field/file-field.js +8 -7
- package/dist/components/inputs/file-field/file-field.js.map +1 -1
- package/dist/components/inputs/file-field/file-field.template.d.ts.map +1 -1
- package/dist/components/inputs/file-field/file-field.template.js +0 -1
- package/dist/components/inputs/file-field/file-field.template.js.map +1 -1
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.d.ts +7 -3
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.d.ts.map +1 -1
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.js +12 -8
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.js.map +1 -1
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.template.d.ts.map +1 -1
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.template.js +2 -1
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.template.js.map +1 -1
- package/dist/components/inputs/number-field/number-field.d.ts +12 -1
- package/dist/components/inputs/number-field/number-field.d.ts.map +1 -1
- package/dist/components/inputs/number-field/number-field.js +18 -3
- package/dist/components/inputs/number-field/number-field.js.map +1 -1
- package/dist/components/inputs/number-field/number-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/number-field/number-field.styles.js +8 -16
- package/dist/components/inputs/number-field/number-field.styles.js.map +1 -1
- package/dist/components/inputs/password-field/password-field.d.ts +10 -3
- package/dist/components/inputs/password-field/password-field.d.ts.map +1 -1
- package/dist/components/inputs/password-field/password-field.js +18 -8
- package/dist/components/inputs/password-field/password-field.js.map +1 -1
- package/dist/components/inputs/password-field/password-field.template.d.ts.map +1 -1
- package/dist/components/inputs/password-field/password-field.template.js +3 -1
- package/dist/components/inputs/password-field/password-field.template.js.map +1 -1
- package/dist/components/inputs/radio-button/radio-button.d.ts +18 -1
- package/dist/components/inputs/radio-button/radio-button.d.ts.map +1 -1
- package/dist/components/inputs/radio-button/radio-button.js +27 -2
- package/dist/components/inputs/radio-button/radio-button.js.map +1 -1
- package/dist/components/inputs/radio-button/radio-button.template.d.ts.map +1 -1
- package/dist/components/inputs/radio-button/radio-button.template.js +1 -0
- package/dist/components/inputs/radio-button/radio-button.template.js.map +1 -1
- package/dist/components/inputs/radio-button-field/radio-button-field.d.ts +14 -1
- package/dist/components/inputs/radio-button-field/radio-button-field.d.ts.map +1 -1
- package/dist/components/inputs/radio-button-field/radio-button-field.js +22 -2
- package/dist/components/inputs/radio-button-field/radio-button-field.js.map +1 -1
- package/dist/components/inputs/radio-button-field/radio-button-field.template.d.ts.map +1 -1
- package/dist/components/inputs/radio-button-field/radio-button-field.template.js +1 -0
- package/dist/components/inputs/radio-button-field/radio-button-field.template.js.map +1 -1
- package/dist/components/inputs/radio-button-group/radio-button-group.d.ts +11 -0
- package/dist/components/inputs/radio-button-group/radio-button-group.d.ts.map +1 -1
- package/dist/components/inputs/radio-button-group/radio-button-group.js +21 -0
- package/dist/components/inputs/radio-button-group/radio-button-group.js.map +1 -1
- package/dist/components/inputs/search-field/search-field.d.ts +23 -1
- package/dist/components/inputs/search-field/search-field.d.ts.map +1 -1
- package/dist/components/inputs/search-field/search-field.js +37 -3
- package/dist/components/inputs/search-field/search-field.js.map +1 -1
- package/dist/components/inputs/search-field/search-field.template.d.ts.map +1 -1
- package/dist/components/inputs/search-field/search-field.template.js +4 -0
- package/dist/components/inputs/search-field/search-field.template.js.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.d.ts +28 -0
- package/dist/components/inputs/segmented-control/segmented-control.d.ts.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.js +52 -2
- package/dist/components/inputs/segmented-control/segmented-control.js.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.template.d.ts.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.template.js +1 -0
- package/dist/components/inputs/segmented-control/segmented-control.template.js.map +1 -1
- package/dist/components/inputs/stepper/stepper.d.ts +14 -1
- package/dist/components/inputs/stepper/stepper.d.ts.map +1 -1
- package/dist/components/inputs/stepper/stepper.js +21 -2
- package/dist/components/inputs/stepper/stepper.js.map +1 -1
- package/dist/components/inputs/switch/switch.d.ts +20 -1
- package/dist/components/inputs/switch/switch.d.ts.map +1 -1
- package/dist/components/inputs/switch/switch.js +31 -2
- package/dist/components/inputs/switch/switch.js.map +1 -1
- package/dist/components/inputs/switch/switch.template.d.ts.map +1 -1
- package/dist/components/inputs/switch/switch.template.js +2 -0
- package/dist/components/inputs/switch/switch.template.js.map +1 -1
- package/dist/components/inputs/switch-field/switch-field.d.ts +18 -1
- package/dist/components/inputs/switch-field/switch-field.d.ts.map +1 -1
- package/dist/components/inputs/switch-field/switch-field.js +25 -1
- package/dist/components/inputs/switch-field/switch-field.js.map +1 -1
- package/dist/components/inputs/switch-field/switch-field.template.d.ts.map +1 -1
- package/dist/components/inputs/switch-field/switch-field.template.js +2 -0
- package/dist/components/inputs/switch-field/switch-field.template.js.map +1 -1
- package/dist/components/inputs/text-editor/text-editor.d.ts +14 -1
- package/dist/components/inputs/text-editor/text-editor.d.ts.map +1 -1
- package/dist/components/inputs/text-editor/text-editor.js +21 -2
- package/dist/components/inputs/text-editor/text-editor.js.map +1 -1
- package/dist/components/inputs/text-field/text-field.d.ts +10 -3
- package/dist/components/inputs/text-field/text-field.d.ts.map +1 -1
- package/dist/components/inputs/text-field/text-field.js +18 -8
- package/dist/components/inputs/text-field/text-field.js.map +1 -1
- package/dist/components/inputs/text-field/text-field.template.d.ts.map +1 -1
- package/dist/components/inputs/text-field/text-field.template.js +3 -1
- package/dist/components/inputs/text-field/text-field.template.js.map +1 -1
- package/dist/components/inputs/time-field/time-field.d.ts +33 -35
- package/dist/components/inputs/time-field/time-field.d.ts.map +1 -1
- package/dist/components/inputs/time-field/time-field.js +43 -40
- package/dist/components/inputs/time-field/time-field.js.map +1 -1
- package/dist/components/inputs/time-field/time-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/time-field/time-field.styles.js +12 -0
- package/dist/components/inputs/time-field/time-field.styles.js.map +1 -1
- package/dist/components/inputs/time-field/time-field.template.d.ts.map +1 -1
- package/dist/components/inputs/time-field/time-field.template.js +0 -1
- package/dist/components/inputs/time-field/time-field.template.js.map +1 -1
- package/dist/components/inputs/time-picker/time-picker.d.ts +34 -19
- package/dist/components/inputs/time-picker/time-picker.d.ts.map +1 -1
- package/dist/components/inputs/time-picker/time-picker.js +42 -22
- package/dist/components/inputs/time-picker/time-picker.js.map +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.d.ts +22 -1
- package/dist/components/inputs/toggle-button/toggle-button.d.ts.map +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.js +35 -2
- package/dist/components/inputs/toggle-button/toggle-button.js.map +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.template.d.ts.map +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.template.js +3 -0
- package/dist/components/inputs/toggle-button/toggle-button.template.js.map +1 -1
- package/dist/components/inputs/toggle-button-group/toggle-button-group.d.ts +27 -0
- package/dist/components/inputs/toggle-button-group/toggle-button-group.d.ts.map +1 -1
- package/dist/components/inputs/toggle-button-group/toggle-button-group.js +46 -0
- package/dist/components/inputs/toggle-button-group/toggle-button-group.js.map +1 -1
- package/dist/components/inputs/token-field/token-field.d.ts +7 -1
- package/dist/components/inputs/token-field/token-field.d.ts.map +1 -1
- package/dist/components/inputs/token-field/token-field.js +14 -1
- package/dist/components/inputs/token-field/token-field.js.map +1 -1
- package/dist/components/layout/app-view/app-view.d.ts.map +1 -1
- package/dist/components/layout/app-view/app-view.js +12 -0
- package/dist/components/layout/app-view/app-view.js.map +1 -1
- package/dist/components/layout/box/box.d.ts +1 -1
- package/dist/components/layout/box/box.js +1 -1
- package/dist/components/layout/box/box.styles.d.ts.map +1 -1
- package/dist/components/layout/box/box.styles.js +1 -0
- package/dist/components/layout/box/box.styles.js.map +1 -1
- package/dist/components/layout/card/card.d.ts +18 -19
- package/dist/components/layout/card/card.d.ts.map +1 -1
- package/dist/components/layout/card/card.js +18 -19
- package/dist/components/layout/card/card.js.map +1 -1
- package/dist/components/layout/card/card.styles.d.ts.map +1 -1
- package/dist/components/layout/card/card.styles.js +1 -0
- package/dist/components/layout/card/card.styles.js.map +1 -1
- package/dist/components/layout/collection/collection.d.ts.map +1 -1
- package/dist/components/layout/collection/collection.js +6 -2
- package/dist/components/layout/collection/collection.js.map +1 -1
- package/dist/components/layout/divider/divider.d.ts +1 -1
- package/dist/components/layout/divider/divider.js +1 -1
- package/dist/components/layout/popover/popover.d.ts +1 -1
- package/dist/components/layout/popover/popover.d.ts.map +1 -1
- package/dist/components/layout/popover/popover.js +15 -2
- package/dist/components/layout/popover/popover.js.map +1 -1
- package/dist/components/layout/sheet/sheet.d.ts +1 -1
- package/dist/components/layout/sheet/sheet.js +2 -2
- package/dist/components/layout/sheet/sheet.js.map +1 -1
- package/dist/components/layout/sheet/sheet.styles.d.ts.map +1 -1
- package/dist/components/layout/sheet/sheet.styles.js +5 -0
- package/dist/components/layout/sheet/sheet.styles.js.map +1 -1
- package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.d.ts +8 -0
- package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.d.ts.map +1 -1
- package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.js +29 -11
- package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.js.map +1 -1
- package/dist/components/layout/window/window.d.ts +20 -21
- package/dist/components/layout/window/window.d.ts.map +1 -1
- package/dist/components/layout/window/window.js +21 -22
- package/dist/components/layout/window/window.js.map +1 -1
- package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.d.ts +41 -12
- package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.d.ts.map +1 -1
- package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.js +47 -17
- package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.js.map +1 -1
- package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.js +42 -13
- package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.js.map +1 -1
- package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.template.d.ts.map +1 -1
- package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.template.js +12 -4
- package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.template.js.map +1 -1
- package/dist/components/lists-and-tables/list/list.d.ts +117 -25
- package/dist/components/lists-and-tables/list/list.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list/list.i18n.d.ts +0 -1
- package/dist/components/lists-and-tables/list/list.i18n.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list/list.i18n.js +0 -1
- package/dist/components/lists-and-tables/list/list.i18n.js.map +1 -1
- package/dist/components/lists-and-tables/list/list.js +292 -67
- package/dist/components/lists-and-tables/list/list.js.map +1 -1
- package/dist/components/lists-and-tables/list/list.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list/list.styles.js +5 -0
- package/dist/components/lists-and-tables/list/list.styles.js.map +1 -1
- package/dist/components/lists-and-tables/list/list.template.d.ts +1 -3
- package/dist/components/lists-and-tables/list/list.template.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list/list.template.js +2 -7
- package/dist/components/lists-and-tables/list/list.template.js.map +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.d.ts +41 -3
- package/dist/components/lists-and-tables/list-item/list-item.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.js +82 -16
- package/dist/components/lists-and-tables/list-item/list-item.js.map +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.styles.js +1 -1
- package/dist/components/lists-and-tables/list-item-segment/list-item-segment.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list-item-segment/list-item-segment.js +8 -4
- package/dist/components/lists-and-tables/list-item-segment/list-item-segment.js.map +1 -1
- package/dist/components/lists-and-tables/table/table.d.ts +12 -9
- package/dist/components/lists-and-tables/table/table.d.ts.map +1 -1
- package/dist/components/lists-and-tables/table/table.i18n.d.ts +0 -1
- package/dist/components/lists-and-tables/table/table.i18n.d.ts.map +1 -1
- package/dist/components/lists-and-tables/table/table.i18n.js +0 -1
- package/dist/components/lists-and-tables/table/table.i18n.js.map +1 -1
- package/dist/components/lists-and-tables/table/table.js +26 -16
- package/dist/components/lists-and-tables/table/table.js.map +1 -1
- package/dist/components/lists-and-tables/table/table.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/table/table.styles.js +5 -0
- package/dist/components/lists-and-tables/table/table.styles.js.map +1 -1
- package/dist/components/lists-and-tables/table/table.template.d.ts +1 -1
- package/dist/components/lists-and-tables/table/table.template.d.ts.map +1 -1
- package/dist/components/lists-and-tables/table/table.template.js +5 -9
- package/dist/components/lists-and-tables/table/table.template.js.map +1 -1
- package/dist/components/navigation/link/link.d.ts +30 -24
- package/dist/components/navigation/link/link.d.ts.map +1 -1
- package/dist/components/navigation/link/link.js +33 -24
- package/dist/components/navigation/link/link.js.map +1 -1
- package/dist/components/navigation/link/link.template.js +1 -1
- package/dist/components/navigation/link/link.template.js.map +1 -1
- package/dist/components/navigation/menu-bar/menu-bar.d.ts +7 -7
- package/dist/components/navigation/menu-bar/menu-bar.js +7 -7
- package/dist/components/navigation/menu-bar-item/menu-bar-item.d.ts +23 -23
- package/dist/components/navigation/menu-bar-item/menu-bar-item.js +23 -23
- package/dist/components/navigation/pagination/pagination.d.ts +4 -4
- package/dist/components/navigation/pagination/pagination.js +4 -4
- package/dist/components/navigation/skip-link/skip-link.d.ts +7 -7
- package/dist/components/navigation/skip-link/skip-link.js +7 -7
- package/dist/components/navigation/tab-bar/tab-bar.d.ts +5 -3
- package/dist/components/navigation/tab-bar/tab-bar.d.ts.map +1 -1
- package/dist/components/navigation/tab-bar/tab-bar.js +18 -13
- package/dist/components/navigation/tab-bar/tab-bar.js.map +1 -1
- package/dist/components/navigation/tab-bar/tab-bar.styles.js +8 -8
- package/dist/components/navigation/tab-bar/tab-bar.template.js +5 -5
- package/dist/components/navigation/tab-bar/tab-bar.template.js.map +1 -1
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.d.ts +15 -15
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.js +15 -15
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.d.ts.map +1 -1
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js +14 -2
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js.map +1 -1
- package/dist/components/navigation/top-title-bar/top-title-bar.d.ts +2 -2
- package/dist/components/navigation/top-title-bar/top-title-bar.js +2 -2
- package/dist/components/navigation/top-title-bar/top-title-bar.styles.js +2 -2
- package/dist/components/status-and-feedback/badge/badge.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/badge/badge.styles.js +6 -4
- package/dist/components/status-and-feedback/badge/badge.styles.js.map +1 -1
- package/dist/components/status-and-feedback/badge/badge.template.js +1 -1
- package/dist/components/status-and-feedback/badge/badge.template.js.map +1 -1
- package/dist/components/status-and-feedback/banner/banner.styles.js +2 -2
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.d.ts +37 -36
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.d.ts.map +1 -1
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.js +37 -36
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.js.map +1 -1
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.d.ts +1 -1
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.js +2 -2
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.js.map +1 -1
- package/dist/components/status-and-feedback/notification/notification-region.js +1 -1
- package/dist/components/status-and-feedback/status-bar/status-bar.d.ts +29 -28
- package/dist/components/status-and-feedback/status-bar/status-bar.d.ts.map +1 -1
- package/dist/components/status-and-feedback/status-bar/status-bar.js +29 -28
- package/dist/components/status-and-feedback/status-bar/status-bar.js.map +1 -1
- package/dist/components/status-and-feedback/step-indicator/step-indicator.styles.js +1 -1
- package/dist/components/{visibility-mixin-GxbwkBb1.js → visibility-mixin-vbfhyo7f.js} +1 -1
- package/dist/components/{with-translations-DzAdFTK8.js → with-translations-CqUV9S5g.js} +1 -1
- package/dist/css/form-section.css +28 -46
- package/dist/css/form.css +7 -13
- package/dist/css/rich-text.css +5 -5
- package/dist/css/variables.css +108 -7
- package/dist/nldd.min.js +851 -753
- package/dist/types/vue.d.ts +439 -291
- package/dist/utilities/codemirror/codemirror-element.d.ts.map +1 -1
- package/dist/utilities/codemirror/codemirror-element.js +5 -0
- package/dist/utilities/codemirror/codemirror-element.js.map +1 -1
- package/dist/utilities/described-by-mixin.d.ts +49 -0
- package/dist/utilities/described-by-mixin.d.ts.map +1 -0
- package/dist/utilities/described-by-mixin.js +109 -0
- package/dist/utilities/described-by-mixin.js.map +1 -0
- package/dist/utilities/form-associated-mixin.d.ts +5 -0
- package/dist/utilities/form-associated-mixin.d.ts.map +1 -1
- package/dist/utilities/form-associated-mixin.js +69 -0
- package/dist/utilities/form-associated-mixin.js.map +1 -1
- package/package.json +14 -6
package/dist/types/vue.d.ts
CHANGED
|
@@ -46,7 +46,6 @@ import type { NLDDFileField } from '@nldd/design-system/file-field';
|
|
|
46
46
|
import type { NLDDForm } from '@nldd/design-system/form';
|
|
47
47
|
import type { NLDDFormActions } from '@nldd/design-system/form-actions';
|
|
48
48
|
import type { NLDDFormField } from '@nldd/design-system/form-field';
|
|
49
|
-
import type { NLDDFormFieldErrorText } from '@nldd/design-system/form-field';
|
|
50
49
|
import type { NLDDFormFieldHelpText } from '@nldd/design-system/form-field';
|
|
51
50
|
import type { NLDDFormSection } from '@nldd/design-system/form-section';
|
|
52
51
|
import type { NLDDFullBleedSection } from '@nldd/design-system/full-bleed-section';
|
|
@@ -136,6 +135,8 @@ import type { NLDDTooltip } from '@nldd/design-system/tooltip';
|
|
|
136
135
|
import type { NLDDTopNavigationBar } from '@nldd/design-system/top-navigation-bar';
|
|
137
136
|
import type { NLDDTopTitleBar } from '@nldd/design-system/top-title-bar';
|
|
138
137
|
import type { NLDDTwoThirdsOneThirdSection } from '@nldd/design-system/two-thirds-one-third-section';
|
|
138
|
+
import type { NLDDValidationItem } from '@nldd/design-system/validation-list';
|
|
139
|
+
import type { NLDDValidationList } from '@nldd/design-system/validation-list';
|
|
139
140
|
import type { NLDDWindow } from '@nldd/design-system/window';
|
|
140
141
|
|
|
141
142
|
declare module 'vue' {
|
|
@@ -198,6 +199,10 @@ declare module 'vue' {
|
|
|
198
199
|
'tooltipTiming'?: NLDDAvatar['tooltipTiming'];
|
|
199
200
|
/** Makes the avatar a link to this URL; the shape itself becomes the link, so the hit area and the focus ring follow it */
|
|
200
201
|
'href'?: NLDDAvatar['href'];
|
|
202
|
+
/** Takes the control out of the tab order (tabindex="-1"), for an avatar that is a link or a button inside a roving container (a row of an nldd-list). Does nothing on a decorative avatar. */
|
|
203
|
+
'no-tab'?: NLDDAvatar['noTab'];
|
|
204
|
+
/** Takes the control out of the tab order (tabindex="-1"), for an avatar that is a link or a button inside a roving container (a row of an nldd-list). Does nothing on a decorative avatar. */
|
|
205
|
+
'noTab'?: NLDDAvatar['noTab'];
|
|
201
206
|
/** Makes the avatar a button; ignored when `href` is set */
|
|
202
207
|
'button'?: NLDDAvatar['button'];
|
|
203
208
|
/** Link target for href (e.g. '_blank'); completes rel and announces "Opens in a new tab" */
|
|
@@ -290,7 +295,7 @@ declare module 'vue' {
|
|
|
290
295
|
};
|
|
291
296
|
|
|
292
297
|
type NLDDBoxProps = {
|
|
293
|
-
/** Which surface this box draws, named as it is on nldd-app-view, nldd-page, nldd-split-view-pane and nldd-card. It starts tinted where a card starts base: a box is there to stand out from the page, a card to sit on it. - `tinted` (default): a box on a plain page background. - `base`: a box on an already-tinted parent (the border ring gets +2 palette steps so it still reads against a card-on-card). - `critical`: a region whose actions are destructive or irreversible (a "danger zone"), tinted and outlined in critical. It carries no ARIA of its own: unlike nldd-banner this is not an announcement but a permanent part of the page, so the heading and the button labels have to name the danger —
|
|
298
|
+
/** Which surface this box draws, named as it is on nldd-app-view, nldd-page, nldd-split-view-pane and nldd-card. It starts tinted where a card starts base: a box is there to stand out from the page, a card to sit on it. - `tinted` (default): a box on a plain page background. - `base`: a box on an already-tinted parent (the border ring gets +2 palette steps so it still reads against a card-on-card). - `critical`: a region whose actions are destructive or irreversible (a "danger zone"), tinted and outlined in critical. It carries no ARIA of its own: unlike nldd-banner this is not an announcement but a permanent part of the page, so the heading and the button labels have to name the danger — color is a reinforcement, never the only signal (WCAG 1.4.1). The box draws the surface and nothing else: it has no padding of its own, the same way nldd-card has none. Put an nldd-container inside it and let that set the inset, so one component owns spacing wherever it is used. */
|
|
294
299
|
'background'?: NLDDBox['background'];
|
|
295
300
|
};
|
|
296
301
|
|
|
@@ -313,7 +318,7 @@ declare module 'vue' {
|
|
|
313
318
|
};
|
|
314
319
|
|
|
315
320
|
type NLDDButtonProps = {
|
|
316
|
-
/** Button variant: 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-base' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'inherit-filled' | 'inherit-tinted'.
|
|
321
|
+
/** 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. */
|
|
317
322
|
'variant'?: NLDDButton['variant'];
|
|
318
323
|
/** Button size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md'). 'lg' uses larger text and 24px start/end icons. */
|
|
319
324
|
'size'?: NLDDButton['size'];
|
|
@@ -385,6 +390,8 @@ declare module 'vue' {
|
|
|
385
390
|
'popoverTargetElement'?: NLDDButton['popoverTargetElement'];
|
|
386
391
|
/** Action the browser performs when the button is clicked, mirroring the standard `popovertargetaction` attribute. Defaults to `'toggle'`. Use `'show'` when a separate handler owns the close path (e.g. the consumer toggles the popover programmatically) so the browser's default action doesn't double-fire. */
|
|
387
392
|
'popoverTargetAction'?: NLDDButton['popoverTargetAction'];
|
|
393
|
+
/** Set by nldd-form-field. A consumer never writes this. */
|
|
394
|
+
'describedByElements'?: NLDDButton['describedByElements'];
|
|
388
395
|
/** When button is clicked (not fired when disabled) */
|
|
389
396
|
'onClick'?: (event: CustomEvent) => void;
|
|
390
397
|
};
|
|
@@ -409,21 +416,21 @@ declare module 'vue' {
|
|
|
409
416
|
};
|
|
410
417
|
|
|
411
418
|
type NLDDCardProps = {
|
|
412
|
-
/**
|
|
419
|
+
/** Surface color of the card: `base` (default) on a plain page background, `tinted` when the card should stand out against a base surface */
|
|
413
420
|
'background'?: NLDDCard['background'];
|
|
414
|
-
/**
|
|
421
|
+
/** Accessible name of the card; with `href`/`button` it names the link or button, otherwise the card region */
|
|
415
422
|
'accessible-label'?: NLDDCard['accessibleLabel'];
|
|
416
|
-
/**
|
|
423
|
+
/** Accessible name of the card; with `href`/`button` it names the link or button, otherwise the card region */
|
|
417
424
|
'accessibleLabel'?: NLDDCard['accessibleLabel'];
|
|
418
|
-
/**
|
|
425
|
+
/** Makes the whole card a link to this URL (empty = no link) */
|
|
419
426
|
'href'?: NLDDCard['href'];
|
|
420
|
-
/**
|
|
427
|
+
/** Makes the whole card a button; ignored when `href` is set */
|
|
421
428
|
'button'?: NLDDCard['button'];
|
|
422
|
-
/** Link target
|
|
429
|
+
/** Link target for href (e.g. '_blank'); adjusts rel automatically and adds an "Opent in nieuw tabblad" announcement for '_blank' */
|
|
423
430
|
'target'?: NLDDCard['target'];
|
|
424
|
-
/** Link rel
|
|
431
|
+
/** Link rel for href; defaults to 'noopener noreferrer' with target='_blank' */
|
|
425
432
|
'rel'?: NLDDCard['rel'];
|
|
426
|
-
/**
|
|
433
|
+
/** Override translation keys (e.g. the "Opent in nieuw tabblad" announcement) */
|
|
427
434
|
'translations'?: NLDDCard['translations'];
|
|
428
435
|
};
|
|
429
436
|
|
|
@@ -463,16 +470,26 @@ declare module 'vue' {
|
|
|
463
470
|
'decorative'?: NLDDCheckbox['decorative'];
|
|
464
471
|
/** Disabled state */
|
|
465
472
|
'disabled'?: NLDDCheckbox['disabled'];
|
|
473
|
+
/** Takes the control out of the tab order (tabindex="-1"), for a control owned by a roving container (a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable. */
|
|
474
|
+
'no-tab'?: NLDDCheckbox['noTab'];
|
|
475
|
+
/** Takes the control out of the tab order (tabindex="-1"), for a control owned by a roving container (a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable. */
|
|
476
|
+
'noTab'?: NLDDCheckbox['noTab'];
|
|
466
477
|
/** Indeterminate state (takes precedence over checked visually) */
|
|
467
478
|
'indeterminate'?: NLDDCheckbox['indeterminate'];
|
|
468
479
|
/** Value for form submission */
|
|
469
480
|
'value'?: NLDDCheckbox['value'];
|
|
470
481
|
/** Name for form submission */
|
|
471
482
|
'name'?: NLDDCheckbox['name'];
|
|
472
|
-
/** Accessible label forwarded as aria-label to the native input.
|
|
483
|
+
/** Accessible label forwarded as aria-label to the native input. */
|
|
473
484
|
'accessible-label'?: NLDDCheckbox['accessibleLabel'];
|
|
474
|
-
/** Accessible label forwarded as aria-label to the native input.
|
|
485
|
+
/** Accessible label forwarded as aria-label to the native input. */
|
|
475
486
|
'accessibleLabel'?: NLDDCheckbox['accessibleLabel'];
|
|
487
|
+
/** Required state */
|
|
488
|
+
'required'?: NLDDCheckbox['required'];
|
|
489
|
+
/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. Note: aria-labelledby is not supported as IDREF resolution cannot cross shadow DOM boundaries. */
|
|
490
|
+
'invalid'?: NLDDCheckbox['invalid'];
|
|
491
|
+
/** Set by nldd-form-field. A consumer never writes this. */
|
|
492
|
+
'describedByElements'?: NLDDCheckbox['describedByElements'];
|
|
476
493
|
'internals'?: NLDDCheckbox['internals'];
|
|
477
494
|
/** Fired when the checkbox state changes; detail: { checked: boolean, value: string } */
|
|
478
495
|
'onChange'?: (event: CustomEvent) => void;
|
|
@@ -491,6 +508,12 @@ declare module 'vue' {
|
|
|
491
508
|
'name'?: NLDDCheckboxField['name'];
|
|
492
509
|
/** Label text for the checkbox */
|
|
493
510
|
'label'?: NLDDCheckboxField['label'];
|
|
511
|
+
/** Required state */
|
|
512
|
+
'required'?: NLDDCheckboxField['required'];
|
|
513
|
+
/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
|
|
514
|
+
'invalid'?: NLDDCheckboxField['invalid'];
|
|
515
|
+
/** Set by nldd-form-field. A consumer never writes this. */
|
|
516
|
+
'describedByElements'?: NLDDCheckboxField['describedByElements'];
|
|
494
517
|
'internals'?: NLDDCheckboxField['internals'];
|
|
495
518
|
/** When checked state changes; detail: { checked: boolean, value: string } */
|
|
496
519
|
'onChange'?: (event: CustomEvent) => void;
|
|
@@ -531,6 +554,10 @@ declare module 'vue' {
|
|
|
531
554
|
'accessible-label'?: NLDDCodeEditor['accessibleLabel'];
|
|
532
555
|
/** Accessible label forwarded to the editor. Set automatically by nldd-form-field. */
|
|
533
556
|
'accessibleLabel'?: NLDDCodeEditor['accessibleLabel'];
|
|
557
|
+
/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
|
|
558
|
+
'invalid'?: NLDDCodeEditor['invalid'];
|
|
559
|
+
/** Set by nldd-form-field. A consumer never writes this. */
|
|
560
|
+
'describedByElements'?: NLDDCodeEditor['describedByElements'];
|
|
534
561
|
'internals'?: NLDDCodeEditor['internals'];
|
|
535
562
|
/** When the content changes (detail: { value }) */
|
|
536
563
|
'onInput'?: (event: CustomEvent) => void;
|
|
@@ -623,6 +650,16 @@ declare module 'vue' {
|
|
|
623
650
|
'noSpellcheck'?: NLDDComboBox['noSpellcheck'];
|
|
624
651
|
/** Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container. */
|
|
625
652
|
'width'?: NLDDComboBox['width'];
|
|
653
|
+
/** Required state */
|
|
654
|
+
'required'?: NLDDComboBox['required'];
|
|
655
|
+
/** Regular expression the value has to match, as the native `pattern`. */
|
|
656
|
+
'pattern'?: NLDDComboBox['pattern'];
|
|
657
|
+
/** Fewest characters the value may have. */
|
|
658
|
+
'minlength'?: NLDDComboBox['minlength'];
|
|
659
|
+
/** Most characters the value may have. */
|
|
660
|
+
'maxlength'?: NLDDComboBox['maxlength'];
|
|
661
|
+
/** Set by nldd-form-field. A consumer never writes this. */
|
|
662
|
+
'describedByElements'?: NLDDComboBox['describedByElements'];
|
|
626
663
|
'internals'?: NLDDComboBox['internals'];
|
|
627
664
|
/** When the input value changes; detail: { value: string } */
|
|
628
665
|
'onInput'?: (event: CustomEvent) => void;
|
|
@@ -794,93 +831,95 @@ declare module 'vue' {
|
|
|
794
831
|
};
|
|
795
832
|
|
|
796
833
|
type NLDDDateFieldProps = {
|
|
797
|
-
/** 'md' (
|
|
834
|
+
/** 'md' (default) | 'sm'. Set automatically by nldd-form-field. */
|
|
798
835
|
'size'?: NLDDDateField['size'];
|
|
799
|
-
/**
|
|
836
|
+
/** The date as ISO (yyyy-mm-dd). With `range` an ISO 8601 interval: `yyyy-mm-dd/yyyy-mm-dd`. Empty when there is no valid date. */
|
|
800
837
|
'value'?: NLDDDateField['value'];
|
|
801
|
-
/**
|
|
838
|
+
/** Pick a period: two inputs and a calendar in range mode. */
|
|
802
839
|
'range'?: NLDDDateField['range'];
|
|
803
|
-
/**
|
|
840
|
+
/** Earliest allowed date as ISO (yyyy-mm-dd). */
|
|
804
841
|
'min'?: NLDDDateField['min'];
|
|
805
|
-
/**
|
|
842
|
+
/** Latest allowed date as ISO (yyyy-mm-dd). */
|
|
806
843
|
'max'?: NLDDDateField['max'];
|
|
807
|
-
/**
|
|
844
|
+
/** Hides the calendar button. It is shown by default. */
|
|
808
845
|
'no-picker'?: NLDDDateField['noPicker'];
|
|
809
|
-
/**
|
|
846
|
+
/** Hides the calendar button. It is shown by default. */
|
|
810
847
|
'noPicker'?: NLDDDateField['noPicker'];
|
|
811
|
-
/**
|
|
848
|
+
/** Sets the id on the internal input. Set automatically by nldd-form-field. */
|
|
812
849
|
'input-id'?: NLDDDateField['inputId'];
|
|
813
|
-
/**
|
|
850
|
+
/** Sets the id on the internal input. Set automatically by nldd-form-field. */
|
|
814
851
|
'inputId'?: NLDDDateField['inputId'];
|
|
815
|
-
/**
|
|
852
|
+
/** Placeholder text. Do not put a format here; use the supporting label of nldd-form-field for that. */
|
|
816
853
|
'placeholder'?: NLDDDateField['placeholder'];
|
|
817
|
-
/**
|
|
854
|
+
/** Marks the field as invalid. */
|
|
818
855
|
'invalid'?: NLDDDateField['invalid'];
|
|
819
|
-
/**
|
|
856
|
+
/** Marks the field as valid. */
|
|
820
857
|
'valid'?: NLDDDateField['valid'];
|
|
821
|
-
/**
|
|
858
|
+
/** Disabled state. */
|
|
822
859
|
'disabled'?: NLDDDateField['disabled'];
|
|
823
|
-
/**
|
|
860
|
+
/** Read-only state. */
|
|
824
861
|
'readonly'?: NLDDDateField['readonly'];
|
|
825
|
-
/**
|
|
862
|
+
/** Required state. */
|
|
826
863
|
'required'?: NLDDDateField['required'];
|
|
827
|
-
/**
|
|
864
|
+
/** Name for form submission. */
|
|
828
865
|
'name'?: NLDDDateField['name'];
|
|
829
|
-
/** Autocomplete
|
|
866
|
+
/** Autocomplete hint, for example 'bday'. */
|
|
830
867
|
'autocomplete'?: NLDDDateField['autocomplete'];
|
|
831
|
-
/**
|
|
868
|
+
/** Accessible label for the internal input. Set automatically by nldd-form-field. */
|
|
832
869
|
'accessible-label'?: NLDDDateField['accessibleLabel'];
|
|
833
|
-
/**
|
|
870
|
+
/** Accessible label for the internal input. Set automatically by nldd-form-field. */
|
|
834
871
|
'accessibleLabel'?: NLDDDateField['accessibleLabel'];
|
|
835
|
-
/**
|
|
836
|
-
'error-message-ids'?: NLDDDateField['errorMessageIds'];
|
|
837
|
-
/** Ids voor aria-describedby. Wordt automatisch gezet door nldd-form-field. */
|
|
838
|
-
'errorMessageIds'?: NLDDDateField['errorMessageIds'];
|
|
839
|
-
/** Breedte. Standaard precies breed genoeg voor een datum plus de iconen; 'full' vult de container, of geef een eigen CSS-lengte. */
|
|
872
|
+
/** Width. By default exactly wide enough for a date plus the icons; 'full' fills the container; 'fit-content' drops the room for the validation icon and grows again as soon as the field turns valid or invalid; or pass your own CSS length. */
|
|
840
873
|
'width'?: NLDDDateField['width'];
|
|
841
|
-
/**
|
|
874
|
+
/** Translations; unspecified keys fall back to Dutch. */
|
|
842
875
|
'translations'?: NLDDDateField['translations'];
|
|
876
|
+
/** Set by nldd-form-field. A consumer never writes this. */
|
|
877
|
+
'describedByElements'?: NLDDDateField['describedByElements'];
|
|
843
878
|
'internals'?: NLDDDateField['internals'];
|
|
844
|
-
/**
|
|
879
|
+
/** On every change. detail: { value } with the ISO date, or '' while there is no valid date. */
|
|
845
880
|
'onInput'?: (event: CustomEvent) => void;
|
|
846
|
-
/**
|
|
881
|
+
/** When the value is committed. detail: { value } with the ISO date, or ''. */
|
|
847
882
|
'onChange'?: (event: CustomEvent) => void;
|
|
848
883
|
};
|
|
849
884
|
|
|
850
885
|
type NLDDDatePickerProps = {
|
|
851
|
-
/**
|
|
886
|
+
/** The chosen date as ISO (yyyy-mm-dd). Only without `range`. */
|
|
852
887
|
'value'?: NLDDDatePicker['value'];
|
|
853
|
-
/**
|
|
888
|
+
/** Start of the period as ISO. Only with `range`. */
|
|
854
889
|
'start'?: NLDDDatePicker['start'];
|
|
855
|
-
/**
|
|
890
|
+
/** End of the period as ISO. Only with `range`. */
|
|
856
891
|
'end'?: NLDDDatePicker['end'];
|
|
857
|
-
/**
|
|
892
|
+
/** Width: `full` (fills the container) or a CSS length (e.g. `560px`). Empty (default) is the intrinsic width of seven day cells; the cells stretch along with the width you pass. */
|
|
858
893
|
'width'?: NLDDDatePicker['width'];
|
|
859
|
-
/**
|
|
894
|
+
/** Pick a period instead of a single date. */
|
|
860
895
|
'range'?: NLDDDatePicker['range'];
|
|
861
|
-
/**
|
|
896
|
+
/** Earliest allowed date: ISO, or `today` with an offset (`today-18y`). */
|
|
862
897
|
'min'?: NLDDDatePicker['min'];
|
|
863
|
-
/**
|
|
898
|
+
/** Latest allowed date: ISO, or `today` with an offset (`today+1y`). */
|
|
864
899
|
'max'?: NLDDDatePicker['max'];
|
|
865
|
-
/**
|
|
900
|
+
/** First day of the week, 0 is Sunday. Default 1 (Monday). */
|
|
866
901
|
'first-day-of-week'?: NLDDDatePicker['firstDayOfWeek'];
|
|
867
|
-
/**
|
|
902
|
+
/** First day of the week, 0 is Sunday. Default 1 (Monday). */
|
|
868
903
|
'firstDayOfWeek'?: NLDDDatePicker['firstDayOfWeek'];
|
|
869
|
-
/**
|
|
904
|
+
/** Shows ISO week numbers in a column on the left. */
|
|
870
905
|
'week-numbers'?: NLDDDatePicker['weekNumbers'];
|
|
871
|
-
/**
|
|
906
|
+
/** Shows ISO week numbers in a column on the left. */
|
|
872
907
|
'weekNumbers'?: NLDDDatePicker['weekNumbers'];
|
|
873
|
-
/**
|
|
908
|
+
/** Accessible name of the calendar. */
|
|
874
909
|
'accessible-label'?: NLDDDatePicker['accessibleLabel'];
|
|
875
|
-
/**
|
|
910
|
+
/** Accessible name of the calendar. */
|
|
876
911
|
'accessibleLabel'?: NLDDDatePicker['accessibleLabel'];
|
|
877
|
-
/**
|
|
912
|
+
/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
|
|
913
|
+
'invalid'?: NLDDDatePicker['invalid'];
|
|
914
|
+
/** Translations; unspecified keys fall back to Dutch. */
|
|
878
915
|
'translations'?: NLDDDatePicker['translations'];
|
|
879
916
|
/** Marks individual dates as unselectable - weekends, holidays, dates already booked. */
|
|
880
917
|
'isDateUnavailable'?: NLDDDatePicker['isDateUnavailable'];
|
|
881
|
-
/**
|
|
918
|
+
/** Set by nldd-form-field. A consumer never writes this. */
|
|
919
|
+
'describedByElements'?: NLDDDatePicker['describedByElements'];
|
|
920
|
+
/** When a date or a complete period has been chosen. detail: { value } or { start, end }. */
|
|
882
921
|
'onChange'?: (event: CustomEvent) => void;
|
|
883
|
-
/**
|
|
922
|
+
/** Also on the intermediate step of a period, when only the start date is set. */
|
|
884
923
|
'onInput'?: (event: CustomEvent) => void;
|
|
885
924
|
};
|
|
886
925
|
|
|
@@ -980,6 +1019,10 @@ declare module 'vue' {
|
|
|
980
1019
|
'accessible-label'?: NLDDDropdown['accessibleLabel'];
|
|
981
1020
|
/** Accessible name, forwarded as aria-label to the slotted select */
|
|
982
1021
|
'accessibleLabel'?: NLDDDropdown['accessibleLabel'];
|
|
1022
|
+
/** Required state, handed to the slotted <select>. A `required` on the <select> itself is left alone. */
|
|
1023
|
+
'required'?: NLDDDropdown['required'];
|
|
1024
|
+
/** Set by nldd-form-field. A consumer never writes this. */
|
|
1025
|
+
'describedByElements'?: NLDDDropdown['describedByElements'];
|
|
983
1026
|
/** Bubbles up from the slotted select; detail: { value: string } */
|
|
984
1027
|
'onChange'?: (event: CustomEvent) => void;
|
|
985
1028
|
};
|
|
@@ -999,10 +1042,6 @@ declare module 'vue' {
|
|
|
999
1042
|
'input-id'?: NLDDFileField['inputId'];
|
|
1000
1043
|
/** Sets the id on the native input. Set automatically by nldd-form-field. */
|
|
1001
1044
|
'inputId'?: NLDDFileField['inputId'];
|
|
1002
|
-
/** Ids for aria-describedby on the inner input. Set automatically by nldd-form-field. */
|
|
1003
|
-
'error-message-ids'?: NLDDFileField['errorMessageIds'];
|
|
1004
|
-
/** Ids for aria-describedby on the inner input. Set automatically by nldd-form-field. */
|
|
1005
|
-
'errorMessageIds'?: NLDDFileField['errorMessageIds'];
|
|
1006
1045
|
/** Marks the field as valid; shows a check icon on the right, like nldd-dropdown */
|
|
1007
1046
|
'valid'?: NLDDFileField['valid'];
|
|
1008
1047
|
/** Marks the field as invalid; shows an alert icon on the right, like nldd-dropdown */
|
|
@@ -1016,15 +1055,17 @@ declare module 'vue' {
|
|
|
1016
1055
|
/** Override translation keys; unset keys fall back to Dutch */
|
|
1017
1056
|
'translations'?: NLDDFileField['translations'];
|
|
1018
1057
|
'files'?: NLDDFileField['files'];
|
|
1058
|
+
/** Set by nldd-form-field. A consumer never writes this. */
|
|
1059
|
+
'describedByElements'?: NLDDFileField['describedByElements'];
|
|
1019
1060
|
'internals'?: NLDDFileField['internals'];
|
|
1020
1061
|
/** When the chosen files change, including a clear; detail: { files: File[] } */
|
|
1021
1062
|
'onChange'?: (event: CustomEvent) => void;
|
|
1022
1063
|
};
|
|
1023
1064
|
|
|
1024
1065
|
type NLDDFormProps = {
|
|
1025
|
-
/** Default `label-alignment`
|
|
1066
|
+
/** Default `label-alignment` for descendant nldd-form-field and nldd-form-actions ('top' | 'right' | 'left'). Propagated to descendants as `form-label-alignment`. A `label-alignment` of its own on the descendant takes precedence through the CSS cascade. */
|
|
1026
1067
|
'label-alignment'?: NLDDForm['labelAlignment'];
|
|
1027
|
-
/** Default `label-alignment`
|
|
1068
|
+
/** Default `label-alignment` for descendant nldd-form-field and nldd-form-actions ('top' | 'right' | 'left'). Propagated to descendants as `form-label-alignment`. A `label-alignment` of its own on the descendant takes precedence through the CSS cascade. */
|
|
1028
1069
|
'labelAlignment'?: NLDDForm['labelAlignment'];
|
|
1029
1070
|
/** The inner <form> element. Useful for `form.checkValidity()` etc. */
|
|
1030
1071
|
'form'?: NLDDForm['form'];
|
|
@@ -1033,16 +1074,16 @@ declare module 'vue' {
|
|
|
1033
1074
|
};
|
|
1034
1075
|
|
|
1035
1076
|
type NLDDFormActionsProps = {
|
|
1036
|
-
/** 'top' (default) | 'right' | 'left'.
|
|
1077
|
+
/** 'top' (default) | 'right' | 'left'. A value of its own always wins over the inherited form-label-alignment. */
|
|
1037
1078
|
'label-alignment'?: NLDDFormActions['labelAlignment'];
|
|
1038
|
-
/** 'top' (default) | 'right' | 'left'.
|
|
1079
|
+
/** 'top' (default) | 'right' | 'left'. A value of its own always wins over the inherited form-label-alignment. */
|
|
1039
1080
|
'labelAlignment'?: NLDDFormActions['labelAlignment'];
|
|
1040
1081
|
};
|
|
1041
1082
|
|
|
1042
1083
|
type NLDDFormFieldProps = {
|
|
1043
|
-
/** 'top' (default) | 'right' | 'left'.
|
|
1084
|
+
/** 'top' (default) | 'right' | 'left'. A value of its own always wins over the inherited form-label-alignment. */
|
|
1044
1085
|
'label-alignment'?: NLDDFormField['labelAlignment'];
|
|
1045
|
-
/** 'top' (default) | 'right' | 'left'.
|
|
1086
|
+
/** 'top' (default) | 'right' | 'left'. A value of its own always wins over the inherited form-label-alignment. */
|
|
1046
1087
|
'labelAlignment'?: NLDDFormField['labelAlignment'];
|
|
1047
1088
|
/** Field label text. Omit for no-label layout. */
|
|
1048
1089
|
'label'?: NLDDFormField['label'];
|
|
@@ -1058,20 +1099,15 @@ declare module 'vue' {
|
|
|
1058
1099
|
'optionalLabel'?: NLDDFormField['optionalLabel'];
|
|
1059
1100
|
};
|
|
1060
1101
|
|
|
1061
|
-
type NLDDFormFieldErrorTextProps = {
|
|
1062
|
-
/** Visibility managed automatically by nldd-form-field. */
|
|
1063
|
-
'invalid'?: NLDDFormFieldErrorText['invalid'];
|
|
1064
|
-
};
|
|
1065
|
-
|
|
1066
1102
|
type NLDDFormFieldHelpTextProps = {
|
|
1067
1103
|
};
|
|
1068
1104
|
|
|
1069
1105
|
type NLDDFormSectionProps = {
|
|
1070
|
-
/** Heading
|
|
1106
|
+
/** Heading text (rendered in the `<legend>`). */
|
|
1071
1107
|
'text'?: NLDDFormSection['text'];
|
|
1072
|
-
/**
|
|
1108
|
+
/** Short description under the heading. Keep it to roughly 80 characters or less (see the a11y note). */
|
|
1073
1109
|
'supporting-text'?: NLDDFormSection['supportingText'];
|
|
1074
|
-
/**
|
|
1110
|
+
/** Short description under the heading. Keep it to roughly 80 characters or less (see the a11y note). */
|
|
1075
1111
|
'supportingText'?: NLDDFormSection['supportingText'];
|
|
1076
1112
|
};
|
|
1077
1113
|
|
|
@@ -1201,7 +1237,7 @@ declare module 'vue' {
|
|
|
1201
1237
|
};
|
|
1202
1238
|
|
|
1203
1239
|
type NLDDIconButtonProps = {
|
|
1204
|
-
/** Button variant: 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'inherit-filled' | 'inherit-tinted' | 'primary' | 'secondary' | 'destructive'.
|
|
1240
|
+
/** 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. */
|
|
1205
1241
|
'variant'?: NLDDIconButton['variant'];
|
|
1206
1242
|
/** Button size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md') */
|
|
1207
1243
|
'size'?: NLDDIconButton['size'];
|
|
@@ -1372,84 +1408,88 @@ declare module 'vue' {
|
|
|
1372
1408
|
};
|
|
1373
1409
|
|
|
1374
1410
|
type NLDDJustInTimeEducationProps = {
|
|
1375
|
-
/**
|
|
1411
|
+
/** Show the coach mark. Driven by the app; false by default. */
|
|
1376
1412
|
'active'?: NLDDJustInTimeEducation['active'];
|
|
1377
|
-
/**
|
|
1413
|
+
/** Title of the callout. */
|
|
1378
1414
|
'text'?: NLDDJustInTimeEducation['text'];
|
|
1379
|
-
/**
|
|
1415
|
+
/** Supporting text under the title. */
|
|
1380
1416
|
'supporting-text'?: NLDDJustInTimeEducation['supportingText'];
|
|
1381
|
-
/**
|
|
1417
|
+
/** Supporting text under the title. */
|
|
1382
1418
|
'supportingText'?: NLDDJustInTimeEducation['supportingText'];
|
|
1383
|
-
/** 'auto' | 'top' | 'bottom' | 'left' | 'right' (
|
|
1419
|
+
/** 'auto' | 'top' | 'bottom' | 'left' | 'right' (default 'auto'). */
|
|
1384
1420
|
'placement'?: NLDDJustInTimeEducation['placement'];
|
|
1385
|
-
/**
|
|
1421
|
+
/** Show the dismiss button and allow closing with one click or key press outside the coach mark. False by default: the consumer then manages closing itself. */
|
|
1386
1422
|
'dismissable'?: NLDDJustInTimeEducation['dismissable'];
|
|
1387
|
-
/**
|
|
1423
|
+
/** Arrow length, and therefore the distance between card and control, as a CSS length (e.g. `333px`, `30vh`). Empty = the DS default; anything under 40px is clamped. */
|
|
1388
1424
|
'arrow-length'?: NLDDJustInTimeEducation['arrowLength'];
|
|
1389
|
-
/**
|
|
1425
|
+
/** Arrow length, and therefore the distance between card and control, as a CSS length (e.g. `333px`, `30vh`). Empty = the DS default; anything under 40px is clamped. */
|
|
1390
1426
|
'arrowLength'?: NLDDJustInTimeEducation['arrowLength'];
|
|
1391
|
-
/**
|
|
1427
|
+
/** Hide the arrow; the card then sits close against the control. */
|
|
1392
1428
|
'no-arrow'?: NLDDJustInTimeEducation['noArrow'];
|
|
1393
|
-
/**
|
|
1429
|
+
/** Hide the arrow; the card then sits close against the control. */
|
|
1394
1430
|
'noArrow'?: NLDDJustInTimeEducation['noArrow'];
|
|
1395
1431
|
'translations'?: NLDDJustInTimeEducation['translations'];
|
|
1396
|
-
/**
|
|
1432
|
+
/** When the coach mark closes. detail: { reason: 'completed' | 'dismissed' | 'ignored' }. */
|
|
1397
1433
|
'onNlddClose'?: (event: CustomEvent) => void;
|
|
1398
1434
|
};
|
|
1399
1435
|
|
|
1400
1436
|
type NLDDKeyboardShortcutProps = {
|
|
1401
|
-
/**
|
|
1437
|
+
/** Keys separated by '+' (e.g. 'Cmd+K' or 'Ctrl+Shift+P'). Use '+++' for a literal '+' key: 'Ctrl+++' becomes 'Ctrl' + '+'. For more complex cases (a combo with several '+' keys, for instance) use the default slot with your own <kbd> elements instead of the keys attribute. */
|
|
1402
1438
|
'keys'?: NLDDKeyboardShortcut['keys'];
|
|
1403
|
-
/**
|
|
1439
|
+
/** Optional override for macOS (iPhone/iPad/iPod included). */
|
|
1404
1440
|
'mac-keys'?: NLDDKeyboardShortcut['macKeys'];
|
|
1405
|
-
/**
|
|
1441
|
+
/** Optional override for macOS (iPhone/iPad/iPod included). */
|
|
1406
1442
|
'macKeys'?: NLDDKeyboardShortcut['macKeys'];
|
|
1407
|
-
/**
|
|
1443
|
+
/** Optional override for Windows. */
|
|
1408
1444
|
'windows-keys'?: NLDDKeyboardShortcut['windowsKeys'];
|
|
1409
|
-
/**
|
|
1445
|
+
/** Optional override for Windows. */
|
|
1410
1446
|
'windowsKeys'?: NLDDKeyboardShortcut['windowsKeys'];
|
|
1411
|
-
/**
|
|
1447
|
+
/** Optional override for Linux/ChromeOS. */
|
|
1412
1448
|
'linux-keys'?: NLDDKeyboardShortcut['linuxKeys'];
|
|
1413
|
-
/**
|
|
1449
|
+
/** Optional override for Linux/ChromeOS. */
|
|
1414
1450
|
'linuxKeys'?: NLDDKeyboardShortcut['linuxKeys'];
|
|
1415
|
-
/**
|
|
1451
|
+
/** 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. */
|
|
1416
1452
|
'size'?: NLDDKeyboardShortcut['size'];
|
|
1417
|
-
/** 'box' (default)
|
|
1453
|
+
/** '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. */
|
|
1418
1454
|
'variant'?: NLDDKeyboardShortcut['variant'];
|
|
1419
|
-
/** 'neutral' (default)
|
|
1455
|
+
/** 'neutral' (default) uses the component colors of its own. 'inherit' lets the keys and separators follow the surrounding text color (currentColor), with a translucent contrast fill and highlight edge. Useful on a filled surface color or a highlighted row. */
|
|
1420
1456
|
'color'?: NLDDKeyboardShortcut['color'];
|
|
1421
|
-
/**
|
|
1457
|
+
/** Show on touch-only devices too, where shortcuts cannot be invoked. */
|
|
1422
1458
|
'always-visible'?: NLDDKeyboardShortcut['alwaysVisible'];
|
|
1423
|
-
/**
|
|
1459
|
+
/** Show on touch-only devices too, where shortcuts cannot be invoked. */
|
|
1424
1460
|
'alwaysVisible'?: NLDDKeyboardShortcut['alwaysVisible'];
|
|
1425
1461
|
};
|
|
1426
1462
|
|
|
1427
1463
|
type NLDDLinkProps = {
|
|
1428
|
-
/** Link
|
|
1464
|
+
/** Link target */
|
|
1429
1465
|
'href'?: NLDDLink['href'];
|
|
1430
|
-
/** Link target (
|
|
1466
|
+
/** Link target (e.g. '_blank'); adjusts rel automatically. With '_blank' the link adds a visually hidden "Opent in nieuw tabblad" announcement for screen readers (WCAG 2.1 SC 3.2.2). */
|
|
1431
1467
|
'target'?: NLDDLink['target'];
|
|
1432
|
-
/** Link rel
|
|
1468
|
+
/** Link rel attribute; defaults to 'noopener noreferrer' with target='_blank' */
|
|
1433
1469
|
'rel'?: NLDDLink['rel'];
|
|
1434
|
-
/**
|
|
1470
|
+
/** Text size: 'xs' | 'sm' | 'md' | 'lg' | 'inherit'. Empty = inherit. */
|
|
1435
1471
|
'size'?: NLDDLink['size'];
|
|
1436
|
-
/** Link
|
|
1472
|
+
/** Link text (alternative to the default slot) */
|
|
1437
1473
|
'text'?: NLDDLink['text'];
|
|
1438
|
-
/**
|
|
1474
|
+
/** Icon before the text */
|
|
1439
1475
|
'start-icon'?: NLDDLink['startIcon'];
|
|
1440
|
-
/**
|
|
1476
|
+
/** Icon before the text */
|
|
1441
1477
|
'startIcon'?: NLDDLink['startIcon'];
|
|
1442
|
-
/**
|
|
1478
|
+
/** Icon after the text */
|
|
1443
1479
|
'end-icon'?: NLDDLink['endIcon'];
|
|
1444
|
-
/**
|
|
1480
|
+
/** Icon after the text */
|
|
1445
1481
|
'endIcon'?: NLDDLink['endIcon'];
|
|
1446
|
-
/**
|
|
1482
|
+
/** Accessible label for screen readers */
|
|
1447
1483
|
'accessible-label'?: NLDDLink['accessibleLabel'];
|
|
1448
|
-
/**
|
|
1484
|
+
/** Accessible label for screen readers */
|
|
1449
1485
|
'accessibleLabel'?: NLDDLink['accessibleLabel'];
|
|
1450
|
-
/**
|
|
1486
|
+
/** Disabled state */
|
|
1451
1487
|
'disabled'?: NLDDLink['disabled'];
|
|
1452
|
-
/**
|
|
1488
|
+
/** Takes the control out of the tab order (tabindex="-1"), for a control owned by a roving container (a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable. */
|
|
1489
|
+
'no-tab'?: NLDDLink['noTab'];
|
|
1490
|
+
/** Takes the control out of the tab order (tabindex="-1"), for a control owned by a roving container (a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable. */
|
|
1491
|
+
'noTab'?: NLDDLink['noTab'];
|
|
1492
|
+
/** Override translation keys (e.g. the "Opent in nieuw tabblad" announcement); unset keys fall back to Dutch. */
|
|
1453
1493
|
'translations'?: NLDDLink['translations'];
|
|
1454
1494
|
};
|
|
1455
1495
|
|
|
@@ -1464,14 +1504,6 @@ declare module 'vue' {
|
|
|
1464
1504
|
'dividers'?: NLDDList['dividers'];
|
|
1465
1505
|
/** Listbox only: caps the options' scroll region at this CSS length (e.g. '320px'). Unset means no cap. */
|
|
1466
1506
|
'height'?: NLDDList['height'];
|
|
1467
|
-
/** Text for the default empty-state dialog (falls back to the Dutch i18n default). Ignored when `[slot=empty]` is filled. */
|
|
1468
|
-
'empty-text'?: NLDDList['emptyText'];
|
|
1469
|
-
/** Text for the default empty-state dialog (falls back to the Dutch i18n default). Ignored when `[slot=empty]` is filled. */
|
|
1470
|
-
'emptyText'?: NLDDList['emptyText'];
|
|
1471
|
-
/** Supporting text for the default empty-state dialog. Ignored when `[slot=empty]` is filled. */
|
|
1472
|
-
'empty-supporting-text'?: NLDDList['emptySupportingText'];
|
|
1473
|
-
/** Supporting text for the default empty-state dialog. Ignored when `[slot=empty]` is filled. */
|
|
1474
|
-
'emptySupportingText'?: NLDDList['emptySupportingText'];
|
|
1475
1507
|
/** Accessible name, forwarded to the list in `type="list"` and to the search field in `type="listbox"`. For `type="navigation"` set `aria-label` / `aria-labelledby` on the element itself. Falls back to the i18n default. */
|
|
1476
1508
|
'accessible-label'?: NLDDList['accessibleLabel'];
|
|
1477
1509
|
/** Accessible name, forwarded to the list in `type="list"` and to the search field in `type="listbox"`. For `type="navigation"` set `aria-label` / `aria-labelledby` on the element itself. Falls back to the i18n default. */
|
|
@@ -1579,59 +1611,59 @@ declare module 'vue' {
|
|
|
1579
1611
|
};
|
|
1580
1612
|
|
|
1581
1613
|
type NLDDMenuBarProps = {
|
|
1582
|
-
/**
|
|
1614
|
+
/** Text for the overflow button (default through i18n) */
|
|
1583
1615
|
'overflow-text'?: NLDDMenuBar['overflowText'];
|
|
1584
|
-
/**
|
|
1616
|
+
/** Text for the overflow button (default through i18n) */
|
|
1585
1617
|
'overflowText'?: NLDDMenuBar['overflowText'];
|
|
1586
|
-
/** aria-label
|
|
1618
|
+
/** aria-label for the nav landmark */
|
|
1587
1619
|
'accessible-label'?: NLDDMenuBar['accessibleLabel'];
|
|
1588
|
-
/** aria-label
|
|
1620
|
+
/** aria-label for the nav landmark */
|
|
1589
1621
|
'accessibleLabel'?: NLDDMenuBar['accessibleLabel'];
|
|
1590
|
-
/**
|
|
1622
|
+
/** Propagates the compact attribute to slotted items (activates content priority) */
|
|
1591
1623
|
'compact'?: NLDDMenuBar['compact'];
|
|
1592
1624
|
'translations'?: NLDDMenuBar['translations'];
|
|
1593
1625
|
};
|
|
1594
1626
|
|
|
1595
1627
|
type NLDDMenuBarItemProps = {
|
|
1596
|
-
/**
|
|
1628
|
+
/** Text of the item */
|
|
1597
1629
|
'text'?: NLDDMenuBarItem['text'];
|
|
1598
|
-
/**
|
|
1630
|
+
/** Mark as the active or current item */
|
|
1599
1631
|
'current'?: NLDDMenuBarItem['current'];
|
|
1600
|
-
/** aria-current
|
|
1632
|
+
/** aria-current value when current is true ('page', 'step', 'location', 'true'). Default: 'page' */
|
|
1601
1633
|
'current-type'?: NLDDMenuBarItem['currentType'];
|
|
1602
|
-
/** aria-current
|
|
1634
|
+
/** aria-current value when current is true ('page', 'step', 'location', 'true'). Default: 'page' */
|
|
1603
1635
|
'currentType'?: NLDDMenuBarItem['currentType'];
|
|
1604
|
-
/**
|
|
1636
|
+
/** Optional link URL. Without href it renders as a button. */
|
|
1605
1637
|
'href'?: NLDDMenuBarItem['href'];
|
|
1606
|
-
/**
|
|
1638
|
+
/** Optional icon name (nldd-icon) */
|
|
1607
1639
|
'icon'?: NLDDMenuBarItem['icon'];
|
|
1608
|
-
/**
|
|
1640
|
+
/** Show the disclosure icon and open the slotted `<nldd-menu>` on click */
|
|
1609
1641
|
'expandable'?: NLDDMenuBarItem['expandable'];
|
|
1610
|
-
/**
|
|
1642
|
+
/** Hide the text visually (always) */
|
|
1611
1643
|
'icon-only'?: NLDDMenuBarItem['iconOnly'];
|
|
1612
|
-
/**
|
|
1644
|
+
/** Hide the text visually (always) */
|
|
1613
1645
|
'iconOnly'?: NLDDMenuBarItem['iconOnly'];
|
|
1614
|
-
/**
|
|
1646
|
+
/** Decides what stays visible in compact mode: 'icon' hides the text, 'text' hides the icon */
|
|
1615
1647
|
'content-priority'?: NLDDMenuBarItem['contentPriority'];
|
|
1616
|
-
/**
|
|
1648
|
+
/** Decides what stays visible in compact mode: 'icon' hides the text, 'text' hides the icon */
|
|
1617
1649
|
'contentPriority'?: NLDDMenuBarItem['contentPriority'];
|
|
1618
|
-
/**
|
|
1650
|
+
/** Activates content-priority behavior (set by the parent nldd-menu-bar) */
|
|
1619
1651
|
'compact'?: NLDDMenuBarItem['compact'];
|
|
1620
|
-
/**
|
|
1652
|
+
/** Turn interaction off */
|
|
1621
1653
|
'disabled'?: NLDDMenuBarItem['disabled'];
|
|
1622
|
-
/**
|
|
1654
|
+
/** Override aria-label */
|
|
1623
1655
|
'accessible-label'?: NLDDMenuBarItem['accessibleLabel'];
|
|
1624
|
-
/**
|
|
1656
|
+
/** Override aria-label */
|
|
1625
1657
|
'accessibleLabel'?: NLDDMenuBarItem['accessibleLabel'];
|
|
1626
|
-
/** aria-haspopup
|
|
1658
|
+
/** aria-haspopup value (e.g. "menu", "dialog") */
|
|
1627
1659
|
'haspopup'?: NLDDMenuBarItem['haspopup'];
|
|
1628
|
-
/**
|
|
1660
|
+
/** Whether the matching popover is open; sets aria-expanded on the button when expandable or haspopup is set. Tracked automatically for a slotted `<nldd-menu>`. */
|
|
1629
1661
|
'expanded'?: NLDDMenuBarItem['expanded'];
|
|
1630
1662
|
/** Direct element reference to the popover this item invokes — IDL-only counterpart to `popovertarget` that works across shadow boundaries. Set by `nldd-menu` when this item is wired up as the menu's anchor so the browser recognizes the inner button as the menu's invoker and excludes the click from popover light-dismiss. */
|
|
1631
1663
|
'popoverTargetElement'?: NLDDMenuBarItem['popoverTargetElement'];
|
|
1632
1664
|
/** Action the browser performs when the inner button is clicked, mirroring the standard `popovertargetaction` attribute. The menu keeps this in sync with its open state — `'hide'` while open, `'show'` while closed — so the browser's native invoker action always matches the intent of the click without racing. */
|
|
1633
1665
|
'popoverTargetAction'?: NLDDMenuBarItem['popoverTargetAction'];
|
|
1634
|
-
/**
|
|
1666
|
+
/** On a click on a non-expandable button item (bubbles, composed) */
|
|
1635
1667
|
'onSelect'?: (event: CustomEvent) => void;
|
|
1636
1668
|
};
|
|
1637
1669
|
|
|
@@ -1646,7 +1678,7 @@ declare module 'vue' {
|
|
|
1646
1678
|
type NLDDMenuItemProps = {
|
|
1647
1679
|
/** Display text. Supports **bold** markdown syntax. */
|
|
1648
1680
|
'text'?: NLDDMenuItem['text'];
|
|
1649
|
-
/**
|
|
1681
|
+
/** A value of the item's own, read off the item in a `select` handler. The default filter matches on it as well as on `text` and `aliases`. Not a form value: this component is not form-associated. */
|
|
1650
1682
|
'value'?: NLDDMenuItem['value'];
|
|
1651
1683
|
/** Optional link target. A plain button item with an href renders as an `<a>` so it is a real link (middle-click, open in new tab, copy link). Ignored for submenu openers, checkbox/radio items, and while disabled. */
|
|
1652
1684
|
'href'?: NLDDMenuItem['href'];
|
|
@@ -1705,7 +1737,7 @@ declare module 'vue' {
|
|
|
1705
1737
|
'accessibleLabel'?: NLDDModalDialog['accessibleLabel'];
|
|
1706
1738
|
/** When the dialog is opened */
|
|
1707
1739
|
'onOpen'?: (event: CustomEvent) => void;
|
|
1708
|
-
/** When the dialog is fully closed */
|
|
1740
|
+
/** When the dialog is fully closed. Does not bubble: overlays nest, and a listener on one dialog asking about that dialog should not also hear the form it opened. */
|
|
1709
1741
|
'onClose'?: (event: CustomEvent) => void;
|
|
1710
1742
|
};
|
|
1711
1743
|
|
|
@@ -1748,16 +1780,18 @@ declare module 'vue' {
|
|
|
1748
1780
|
'accessible-label'?: NLDDMultiLineTextField['accessibleLabel'];
|
|
1749
1781
|
/** Accessible label forwarded to the inner textarea. Set automatically by nldd-form-field. */
|
|
1750
1782
|
'accessibleLabel'?: NLDDMultiLineTextField['accessibleLabel'];
|
|
1751
|
-
/** Ids for aria-describedby on the inner textarea. Set automatically by nldd-form-field. */
|
|
1752
|
-
'error-message-ids'?: NLDDMultiLineTextField['errorMessageIds'];
|
|
1753
|
-
/** Ids for aria-describedby on the inner textarea. Set automatically by nldd-form-field. */
|
|
1754
|
-
'errorMessageIds'?: NLDDMultiLineTextField['errorMessageIds'];
|
|
1755
1783
|
/** Disables browser spellchecking on the inner textarea */
|
|
1756
1784
|
'no-spellcheck'?: NLDDMultiLineTextField['noSpellcheck'];
|
|
1757
1785
|
/** Disables browser spellchecking on the inner textarea */
|
|
1758
1786
|
'noSpellcheck'?: NLDDMultiLineTextField['noSpellcheck'];
|
|
1759
1787
|
/** Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container. */
|
|
1760
1788
|
'width'?: NLDDMultiLineTextField['width'];
|
|
1789
|
+
/** Fewest characters the value may have. */
|
|
1790
|
+
'minlength'?: NLDDMultiLineTextField['minlength'];
|
|
1791
|
+
/** Most characters the value may have. */
|
|
1792
|
+
'maxlength'?: NLDDMultiLineTextField['maxlength'];
|
|
1793
|
+
/** Set by nldd-form-field. A consumer never writes this. */
|
|
1794
|
+
'describedByElements'?: NLDDMultiLineTextField['describedByElements'];
|
|
1761
1795
|
'internals'?: NLDDMultiLineTextField['internals'];
|
|
1762
1796
|
/** When value changes */
|
|
1763
1797
|
'onInput'?: (event: CustomEvent) => void;
|
|
@@ -1843,6 +1877,10 @@ declare module 'vue' {
|
|
|
1843
1877
|
'accessibleLabel'?: NLDDNumberField['accessibleLabel'];
|
|
1844
1878
|
/** Translations; unspecified keys fall back to Dutch */
|
|
1845
1879
|
'translations'?: NLDDNumberField['translations'];
|
|
1880
|
+
/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
|
|
1881
|
+
'invalid'?: NLDDNumberField['invalid'];
|
|
1882
|
+
/** Set by nldd-form-field. A consumer never writes this. */
|
|
1883
|
+
'describedByElements'?: NLDDNumberField['describedByElements'];
|
|
1846
1884
|
'internals'?: NLDDNumberField['internals'];
|
|
1847
1885
|
/** When the value changes (typing, +/- button, or on-commit correction); detail: { value: number } */
|
|
1848
1886
|
'onInput'?: (event: CustomEvent) => void;
|
|
@@ -1978,15 +2016,15 @@ declare module 'vue' {
|
|
|
1978
2016
|
'total'?: NLDDPagination['total'];
|
|
1979
2017
|
/** Disabled state */
|
|
1980
2018
|
'disabled'?: NLDDPagination['disabled'];
|
|
1981
|
-
/**
|
|
2019
|
+
/** Centers the pagination in the container (host fills row, items grouped in the middle) */
|
|
1982
2020
|
'centered'?: NLDDPagination['centered'];
|
|
1983
|
-
/** URL
|
|
2021
|
+
/** URL pattern with a {page} placeholder, renders links instead of buttons */
|
|
1984
2022
|
'href-pattern'?: NLDDPagination['hrefPattern'];
|
|
1985
|
-
/** URL
|
|
2023
|
+
/** URL pattern with a {page} placeholder, renders links instead of buttons */
|
|
1986
2024
|
'hrefPattern'?: NLDDPagination['hrefPattern'];
|
|
1987
|
-
/**
|
|
2025
|
+
/** Translations; unspecified keys fall back to Dutch */
|
|
1988
2026
|
'translations'?: NLDDPagination['translations'];
|
|
1989
|
-
/**
|
|
2027
|
+
/** On a page change (detail: { page: number, href?: string }). Only cancelable in href mode: preventDefault() blocks navigation (SPA). */
|
|
1990
2028
|
'onPageChange'?: (event: CustomEvent) => void;
|
|
1991
2029
|
};
|
|
1992
2030
|
|
|
@@ -2037,12 +2075,16 @@ declare module 'vue' {
|
|
|
2037
2075
|
'accessible-label'?: NLDDPasswordField['accessibleLabel'];
|
|
2038
2076
|
/** Accessible label forwarded to the inner input. Set automatically by nldd-form-field. */
|
|
2039
2077
|
'accessibleLabel'?: NLDDPasswordField['accessibleLabel'];
|
|
2040
|
-
/** Ids for aria-describedby on the inner input. Set automatically by nldd-form-field. */
|
|
2041
|
-
'error-message-ids'?: NLDDPasswordField['errorMessageIds'];
|
|
2042
|
-
/** Ids for aria-describedby on the inner input. Set automatically by nldd-form-field. */
|
|
2043
|
-
'errorMessageIds'?: NLDDPasswordField['errorMessageIds'];
|
|
2044
2078
|
/** Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container. */
|
|
2045
2079
|
'width'?: NLDDPasswordField['width'];
|
|
2080
|
+
/** Regular expression the value has to match, as the native `pattern`. */
|
|
2081
|
+
'pattern'?: NLDDPasswordField['pattern'];
|
|
2082
|
+
/** Fewest characters the value may have. */
|
|
2083
|
+
'minlength'?: NLDDPasswordField['minlength'];
|
|
2084
|
+
/** Most characters the value may have. */
|
|
2085
|
+
'maxlength'?: NLDDPasswordField['maxlength'];
|
|
2086
|
+
/** Set by nldd-form-field. A consumer never writes this. */
|
|
2087
|
+
'describedByElements'?: NLDDPasswordField['describedByElements'];
|
|
2046
2088
|
'internals'?: NLDDPasswordField['internals'];
|
|
2047
2089
|
/** When the input value changes ({ detail: { value } }) */
|
|
2048
2090
|
'onInput'?: (event: CustomEvent) => void;
|
|
@@ -2081,7 +2123,7 @@ declare module 'vue' {
|
|
|
2081
2123
|
'open'?: NLDDPopover['open'];
|
|
2082
2124
|
/** When the popover opens */
|
|
2083
2125
|
'onOpen'?: (event: CustomEvent) => void;
|
|
2084
|
-
/** When the popover closes */
|
|
2126
|
+
/** When the popover closes. Does not bubble: overlays nest, and a listener on the sheet or window around this one should not hear it close. */
|
|
2085
2127
|
'onClose'?: (event: CustomEvent) => void;
|
|
2086
2128
|
};
|
|
2087
2129
|
|
|
@@ -2184,16 +2226,24 @@ declare module 'vue' {
|
|
|
2184
2226
|
'decorative'?: NLDDRadioButton['decorative'];
|
|
2185
2227
|
/** Disabled state */
|
|
2186
2228
|
'disabled'?: NLDDRadioButton['disabled'];
|
|
2229
|
+
/** Takes the control out of the tab order (tabindex="-1"), for a control owned by a roving container (a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable. */
|
|
2230
|
+
'no-tab'?: NLDDRadioButton['noTab'];
|
|
2231
|
+
/** Takes the control out of the tab order (tabindex="-1"), for a control owned by a roving container (a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable. */
|
|
2232
|
+
'noTab'?: NLDDRadioButton['noTab'];
|
|
2187
2233
|
/** Required state */
|
|
2188
2234
|
'required'?: NLDDRadioButton['required'];
|
|
2189
2235
|
/** Radio group name for form submission; ties the buttons of one group together */
|
|
2190
2236
|
'name'?: NLDDRadioButton['name'];
|
|
2191
2237
|
/** Value submitted with the form when this radio button is checked */
|
|
2192
2238
|
'value'?: NLDDRadioButton['value'];
|
|
2193
|
-
/** Accessible label forwarded as aria-label to the native input.
|
|
2239
|
+
/** Accessible label forwarded as aria-label to the native input. */
|
|
2194
2240
|
'accessible-label'?: NLDDRadioButton['accessibleLabel'];
|
|
2195
|
-
/** Accessible label forwarded as aria-label to the native input.
|
|
2241
|
+
/** Accessible label forwarded as aria-label to the native input. */
|
|
2196
2242
|
'accessibleLabel'?: NLDDRadioButton['accessibleLabel'];
|
|
2243
|
+
/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. Note: aria-labelledby is not supported as IDREF resolution cannot cross shadow DOM boundaries. */
|
|
2244
|
+
'invalid'?: NLDDRadioButton['invalid'];
|
|
2245
|
+
/** Set by nldd-form-field. A consumer never writes this. */
|
|
2246
|
+
'describedByElements'?: NLDDRadioButton['describedByElements'];
|
|
2197
2247
|
'internals'?: NLDDRadioButton['internals'];
|
|
2198
2248
|
/** When checked state changes; detail: { checked: boolean, value: string, name: string } */
|
|
2199
2249
|
'onChange'?: (event: CustomEvent) => void;
|
|
@@ -2212,6 +2262,10 @@ declare module 'vue' {
|
|
|
2212
2262
|
'required'?: NLDDRadioButtonField['required'];
|
|
2213
2263
|
/** Label text for the radio button */
|
|
2214
2264
|
'label'?: NLDDRadioButtonField['label'];
|
|
2265
|
+
/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
|
|
2266
|
+
'invalid'?: NLDDRadioButtonField['invalid'];
|
|
2267
|
+
/** Set by nldd-form-field. A consumer never writes this. */
|
|
2268
|
+
'describedByElements'?: NLDDRadioButtonField['describedByElements'];
|
|
2215
2269
|
'internals'?: NLDDRadioButtonField['internals'];
|
|
2216
2270
|
/** When checked state changes; detail: { checked: boolean, value: string } */
|
|
2217
2271
|
'onChange'?: (event: CustomEvent) => void;
|
|
@@ -2232,6 +2286,8 @@ declare module 'vue' {
|
|
|
2232
2286
|
'accessible-labeled-by'?: NLDDRadioButtonGroup['accessibleLabeledBy'];
|
|
2233
2287
|
/** Id of an external label element, set as aria-labelledby on the group */
|
|
2234
2288
|
'accessibleLabeledBy'?: NLDDRadioButtonGroup['accessibleLabeledBy'];
|
|
2289
|
+
/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
|
|
2290
|
+
'invalid'?: NLDDRadioButtonGroup['invalid'];
|
|
2235
2291
|
/** Bubbles up from the checked field; detail: { checked: boolean, value: string } */
|
|
2236
2292
|
'onChange'?: (event: CustomEvent) => void;
|
|
2237
2293
|
};
|
|
@@ -2241,9 +2297,9 @@ declare module 'vue' {
|
|
|
2241
2297
|
'spacing'?: NLDDRichText['spacing'];
|
|
2242
2298
|
/** Centers the main column inside the container; without it, content is left-aligned */
|
|
2243
2299
|
'centered'?: NLDDRichText['centered'];
|
|
2244
|
-
/** Opt-in
|
|
2300
|
+
/** Opt-in automatic hyphenation for running text (p, li, dd). Needs a correct `lang` on the page (`lang="nl"` on `<html>`, for instance): without language information the browser does not hyphenate. An `overflow-wrap: break-word` safety net on p/li is always on, independent of this attribute, so long URLs and compounds break neatly instead of overflowing even without a dictionary. */
|
|
2245
2301
|
'hyphens'?: NLDDRichText['hyphens'];
|
|
2246
|
-
/** 'inherit'
|
|
2302
|
+
/** 'inherit' lets all text follow the color of the surface (for colored areas such as the filled categories). Links stay underlined as an affordance; secondary text (figcaption) gets the same color at a lowered opacity. Known v1 gaps: inline code, mark, tables and hr keep their own surfaces. Empty = the default content colors. */
|
|
2247
2303
|
'color'?: NLDDRichText['color'];
|
|
2248
2304
|
/** Override translation keys; unset keys fall back to Dutch */
|
|
2249
2305
|
'translations'?: NLDDRichText['translations'];
|
|
@@ -2276,6 +2332,18 @@ declare module 'vue' {
|
|
|
2276
2332
|
'noSpellcheck'?: NLDDSearchField['noSpellcheck'];
|
|
2277
2333
|
/** Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container. */
|
|
2278
2334
|
'width'?: NLDDSearchField['width'];
|
|
2335
|
+
/** Required state */
|
|
2336
|
+
'required'?: NLDDSearchField['required'];
|
|
2337
|
+
/** Regular expression the value has to match, as the native `pattern`. */
|
|
2338
|
+
'pattern'?: NLDDSearchField['pattern'];
|
|
2339
|
+
/** Fewest characters the value may have. */
|
|
2340
|
+
'minlength'?: NLDDSearchField['minlength'];
|
|
2341
|
+
/** Most characters the value may have. */
|
|
2342
|
+
'maxlength'?: NLDDSearchField['maxlength'];
|
|
2343
|
+
/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
|
|
2344
|
+
'invalid'?: NLDDSearchField['invalid'];
|
|
2345
|
+
/** Set by nldd-form-field. A consumer never writes this. */
|
|
2346
|
+
'describedByElements'?: NLDDSearchField['describedByElements'];
|
|
2279
2347
|
'internals'?: NLDDSearchField['internals'];
|
|
2280
2348
|
/** When the input value changes; detail: { value: string } */
|
|
2281
2349
|
'onInput'?: (event: CustomEvent) => void;
|
|
@@ -2286,6 +2354,10 @@ declare module 'vue' {
|
|
|
2286
2354
|
};
|
|
2287
2355
|
|
|
2288
2356
|
type NLDDSegmentedControlProps = {
|
|
2357
|
+
/** Marks the group as required. Enforced in radio mode; in checkbox mode only announced. */
|
|
2358
|
+
'required'?: NLDDSegmentedControl['required'];
|
|
2359
|
+
/** Marks the group as invalid. Announced with aria-invalid; nothing is drawn for it. */
|
|
2360
|
+
'invalid'?: NLDDSegmentedControl['invalid'];
|
|
2289
2361
|
/** Selected value for radio type */
|
|
2290
2362
|
'value'?: NLDDSegmentedControl['value'];
|
|
2291
2363
|
/** Control size: 'sm' | 'md' | 'lg' (default: 'md') */
|
|
@@ -2316,6 +2388,8 @@ declare module 'vue' {
|
|
|
2316
2388
|
};
|
|
2317
2389
|
|
|
2318
2390
|
type NLDDSegmentedControlItemProps = {
|
|
2391
|
+
/** Required state. Set by nldd-segmented-control. */
|
|
2392
|
+
'required'?: NLDDSegmentedControlItem['required'];
|
|
2319
2393
|
/** Value for this item */
|
|
2320
2394
|
'value'?: NLDDSegmentedControlItem['value'];
|
|
2321
2395
|
/** Whether this item is selected (set by parent) */
|
|
@@ -2357,7 +2431,7 @@ declare module 'vue' {
|
|
|
2357
2431
|
'width'?: NLDDSheet['width'];
|
|
2358
2432
|
/** Fired when the sheet is opened */
|
|
2359
2433
|
'onOpen'?: (event: CustomEvent) => void;
|
|
2360
|
-
/** Fired when the sheet is fully closed */
|
|
2434
|
+
/** Fired when the sheet is fully closed. Does not bubble: overlays nest, and a listener on one sheet asking about that sheet should not also hear the form it opened. */
|
|
2361
2435
|
'onClose'?: (event: CustomEvent) => void;
|
|
2362
2436
|
};
|
|
2363
2437
|
|
|
@@ -2479,9 +2553,9 @@ declare module 'vue' {
|
|
|
2479
2553
|
};
|
|
2480
2554
|
|
|
2481
2555
|
type NLDDSkipLinkProps = {
|
|
2482
|
-
/**
|
|
2556
|
+
/** Text of the skip link. Falls back to the i18n default. */
|
|
2483
2557
|
'text'?: NLDDSkipLink['text'];
|
|
2484
|
-
/**
|
|
2558
|
+
/** Optional external target id. Without href it jumps to the end of its own content. */
|
|
2485
2559
|
'href'?: NLDDSkipLink['href'];
|
|
2486
2560
|
'translations'?: NLDDSkipLink['translations'];
|
|
2487
2561
|
};
|
|
@@ -2565,17 +2639,17 @@ declare module 'vue' {
|
|
|
2565
2639
|
};
|
|
2566
2640
|
|
|
2567
2641
|
type NLDDStatusBarProps = {
|
|
2568
|
-
/**
|
|
2642
|
+
/** Color of the bar (default: 'neutral') */
|
|
2569
2643
|
'variant'?: NLDDStatusBar['variant'];
|
|
2570
|
-
/**
|
|
2644
|
+
/** The status text (one line; truncated with an ellipsis) */
|
|
2571
2645
|
'text'?: NLDDStatusBar['text'];
|
|
2572
|
-
/**
|
|
2646
|
+
/** Makes the whole bar a link (renders an <a>) */
|
|
2573
2647
|
'href'?: NLDDStatusBar['href'];
|
|
2574
|
-
/** Link target (
|
|
2648
|
+
/** Link target (e.g. '_blank'); only used with href */
|
|
2575
2649
|
'target'?: NLDDStatusBar['target'];
|
|
2576
|
-
/** Link rel;
|
|
2650
|
+
/** Link rel; defaults to 'noopener noreferrer' with target='_blank' */
|
|
2577
2651
|
'rel'?: NLDDStatusBar['rel'];
|
|
2578
|
-
/**
|
|
2652
|
+
/** Makes the whole bar a button; ignored when href is set */
|
|
2579
2653
|
'button'?: NLDDStatusBar['button'];
|
|
2580
2654
|
};
|
|
2581
2655
|
|
|
@@ -2630,6 +2704,10 @@ declare module 'vue' {
|
|
|
2630
2704
|
'accessibleLabel'?: NLDDStepper['accessibleLabel'];
|
|
2631
2705
|
/** Translations; unspecified keys fall back to Dutch */
|
|
2632
2706
|
'translations'?: NLDDStepper['translations'];
|
|
2707
|
+
/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
|
|
2708
|
+
'invalid'?: NLDDStepper['invalid'];
|
|
2709
|
+
/** Set by nldd-form-field. A consumer never writes this. */
|
|
2710
|
+
'describedByElements'?: NLDDStepper['describedByElements'];
|
|
2633
2711
|
'internals'?: NLDDStepper['internals'];
|
|
2634
2712
|
/** When the value changes; detail: { value: number } */
|
|
2635
2713
|
'onChange'?: (event: CustomEvent) => void;
|
|
@@ -2642,6 +2720,10 @@ declare module 'vue' {
|
|
|
2642
2720
|
'checked'?: NLDDSwitch['checked'];
|
|
2643
2721
|
/** Disabled state */
|
|
2644
2722
|
'disabled'?: NLDDSwitch['disabled'];
|
|
2723
|
+
/** Takes the control out of the tab order (tabindex="-1"), for a control owned by a roving container (a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable. */
|
|
2724
|
+
'no-tab'?: NLDDSwitch['noTab'];
|
|
2725
|
+
/** Takes the control out of the tab order (tabindex="-1"), for a control owned by a roving container (a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable. */
|
|
2726
|
+
'noTab'?: NLDDSwitch['noTab'];
|
|
2645
2727
|
/** Switch size: 'xs' | 'sm' (default: 'sm') */
|
|
2646
2728
|
'size'?: NLDDSwitch['size'];
|
|
2647
2729
|
/** Accessible label forwarded as aria-label to the native input. Required when using nldd-switch without nldd-switch-field. */
|
|
@@ -2650,6 +2732,12 @@ declare module 'vue' {
|
|
|
2650
2732
|
'accessibleLabel'?: NLDDSwitch['accessibleLabel'];
|
|
2651
2733
|
/** Value submitted with the form when the switch is on (default: 'on') */
|
|
2652
2734
|
'value'?: NLDDSwitch['value'];
|
|
2735
|
+
/** Required state */
|
|
2736
|
+
'required'?: NLDDSwitch['required'];
|
|
2737
|
+
/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
|
|
2738
|
+
'invalid'?: NLDDSwitch['invalid'];
|
|
2739
|
+
/** Set by nldd-form-field. A consumer never writes this. */
|
|
2740
|
+
'describedByElements'?: NLDDSwitch['describedByElements'];
|
|
2653
2741
|
'internals'?: NLDDSwitch['internals'];
|
|
2654
2742
|
/** When the switch state changes; detail: { checked: boolean, value: string } */
|
|
2655
2743
|
'onChange'?: (event: CustomEvent) => void;
|
|
@@ -2666,6 +2754,12 @@ declare module 'vue' {
|
|
|
2666
2754
|
'name'?: NLDDSwitchField['name'];
|
|
2667
2755
|
/** Label text for the switch */
|
|
2668
2756
|
'label'?: NLDDSwitchField['label'];
|
|
2757
|
+
/** Required state */
|
|
2758
|
+
'required'?: NLDDSwitchField['required'];
|
|
2759
|
+
/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
|
|
2760
|
+
'invalid'?: NLDDSwitchField['invalid'];
|
|
2761
|
+
/** Set by nldd-form-field. A consumer never writes this. */
|
|
2762
|
+
'describedByElements'?: NLDDSwitchField['describedByElements'];
|
|
2669
2763
|
/** When checked state changes; detail: { checked: boolean, value: string } */
|
|
2670
2764
|
'onChange'?: (event: CustomEvent) => void;
|
|
2671
2765
|
};
|
|
@@ -2690,8 +2784,8 @@ declare module 'vue' {
|
|
|
2690
2784
|
};
|
|
2691
2785
|
|
|
2692
2786
|
type NLDDTabBarItemProps = {
|
|
2693
|
-
/**
|
|
2694
|
-
'
|
|
2787
|
+
/** The item you are on. A tab bar switching content manages it itself and renders it as `aria-selected`; a `navigation` bar leaves it to the consumer, since it follows the route, and renders it as `aria-current="page"`. Unlike a list row, which separates `current` from `selected` because it can be both at once, a tab bar has exactly one active item. */
|
|
2788
|
+
'current'?: NLDDTabBarItem['current'];
|
|
2695
2789
|
/** Optional link URL; renders an anchor instead of a button */
|
|
2696
2790
|
'href'?: NLDDTabBarItem['href'];
|
|
2697
2791
|
/** Set by nldd-tab-bar. Not part of the public API. */
|
|
@@ -2729,14 +2823,6 @@ declare module 'vue' {
|
|
|
2729
2823
|
'accessibleLabel'?: NLDDTable['accessibleLabel'];
|
|
2730
2824
|
/** Opt into row selection: body rows expose aria-selected (true/false). Without it, rows omit aria-selected so a non-selectable table isn't announced as selectable. */
|
|
2731
2825
|
'selectable'?: NLDDTable['selectable'];
|
|
2732
|
-
/** Text for the default empty-state dialog (falls back to the Dutch i18n default). Ignored when `[slot=empty]` is filled */
|
|
2733
|
-
'empty-text'?: NLDDTable['emptyText'];
|
|
2734
|
-
/** Text for the default empty-state dialog (falls back to the Dutch i18n default). Ignored when `[slot=empty]` is filled */
|
|
2735
|
-
'emptyText'?: NLDDTable['emptyText'];
|
|
2736
|
-
/** Supporting text for the default empty-state dialog. Ignored when `[slot=empty]` is filled */
|
|
2737
|
-
'empty-supporting-text'?: NLDDTable['emptySupportingText'];
|
|
2738
|
-
/** Supporting text for the default empty-state dialog. Ignored when `[slot=empty]` is filled */
|
|
2739
|
-
'emptySupportingText'?: NLDDTable['emptySupportingText'];
|
|
2740
2826
|
/** Override translation keys; unset keys fall back to Dutch */
|
|
2741
2827
|
'translations'?: NLDDTable['translations'];
|
|
2742
2828
|
};
|
|
@@ -2860,10 +2946,14 @@ declare module 'vue' {
|
|
|
2860
2946
|
'annotatable'?: NLDDTextEditor['annotatable'];
|
|
2861
2947
|
/** Override the editor's assistive-tech strings (the open-in-new-tab link badge and the annotation count badge). Unset keys fall back to Dutch. */
|
|
2862
2948
|
'translations'?: NLDDTextEditor['translations'];
|
|
2949
|
+
/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
|
|
2950
|
+
'invalid'?: NLDDTextEditor['invalid'];
|
|
2863
2951
|
/** Consumer-supplied */
|
|
2864
2952
|
'mentionSource'?: NLDDTextEditor['mentionSource'];
|
|
2865
2953
|
/** Consumer-supplied annotations (W3C-style overlay). Property only (set via JS). Render only when `annotatable` is on. The text stays clean; these render as a light tint and a count badge, anchored by offset and mapped through edits. IMPORTANT: assign a NEW array to apply changes. Lit dirty-checks this property by identity, so mutating the existing array in place (`editor.annotations.push(next)`, `editor.annotations[0].end = 9`, …) does NOT trigger a re-render. Always replace it: `editor.annotations = [...editor.annotations, next]`. */
|
|
2866
2954
|
'annotations'?: NLDDTextEditor['annotations'];
|
|
2955
|
+
/** Set by nldd-form-field. A consumer never writes this. */
|
|
2956
|
+
'describedByElements'?: NLDDTextEditor['describedByElements'];
|
|
2867
2957
|
'internals'?: NLDDTextEditor['internals'];
|
|
2868
2958
|
/** When the content changes (detail: { value }) */
|
|
2869
2959
|
'onInput'?: (event: CustomEvent) => void;
|
|
@@ -2914,16 +3004,20 @@ declare module 'vue' {
|
|
|
2914
3004
|
'accessible-label'?: NLDDTextField['accessibleLabel'];
|
|
2915
3005
|
/** Accessible label forwarded to the inner input. Set automatically by nldd-form-field. */
|
|
2916
3006
|
'accessibleLabel'?: NLDDTextField['accessibleLabel'];
|
|
2917
|
-
/** Ids for aria-describedby on the inner input. Set automatically by nldd-form-field. */
|
|
2918
|
-
'error-message-ids'?: NLDDTextField['errorMessageIds'];
|
|
2919
|
-
/** Ids for aria-describedby on the inner input. Set automatically by nldd-form-field. */
|
|
2920
|
-
'errorMessageIds'?: NLDDTextField['errorMessageIds'];
|
|
2921
3007
|
/** Disables browser spellchecking on the inner input */
|
|
2922
3008
|
'no-spellcheck'?: NLDDTextField['noSpellcheck'];
|
|
2923
3009
|
/** Disables browser spellchecking on the inner input */
|
|
2924
3010
|
'noSpellcheck'?: NLDDTextField['noSpellcheck'];
|
|
2925
3011
|
/** Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container. */
|
|
2926
3012
|
'width'?: NLDDTextField['width'];
|
|
3013
|
+
/** Regular expression the value has to match, as the native `pattern`. */
|
|
3014
|
+
'pattern'?: NLDDTextField['pattern'];
|
|
3015
|
+
/** Fewest characters the value may have. */
|
|
3016
|
+
'minlength'?: NLDDTextField['minlength'];
|
|
3017
|
+
/** Most characters the value may have. */
|
|
3018
|
+
'maxlength'?: NLDDTextField['maxlength'];
|
|
3019
|
+
/** Set by nldd-form-field. A consumer never writes this. */
|
|
3020
|
+
'describedByElements'?: NLDDTextField['describedByElements'];
|
|
2927
3021
|
'internals'?: NLDDTextField['internals'];
|
|
2928
3022
|
/** When input value changes */
|
|
2929
3023
|
'onInput'?: (event: CustomEvent) => void;
|
|
@@ -2932,95 +3026,99 @@ declare module 'vue' {
|
|
|
2932
3026
|
};
|
|
2933
3027
|
|
|
2934
3028
|
type NLDDTimeFieldProps = {
|
|
2935
|
-
/** 'md' (
|
|
3029
|
+
/** 'md' (default) | 'sm'. Set automatically by nldd-form-field. */
|
|
2936
3030
|
'size'?: NLDDTimeField['size'];
|
|
2937
|
-
/**
|
|
3031
|
+
/** The time as `HH:mm` (24-hour). Empty when there is no valid time. */
|
|
2938
3032
|
'value'?: NLDDTimeField['value'];
|
|
2939
|
-
/**
|
|
3033
|
+
/** Earliest allowed time as `HH:mm`. Also the base that `step` counts from. */
|
|
2940
3034
|
'min'?: NLDDTimeField['min'];
|
|
2941
|
-
/**
|
|
3035
|
+
/** Latest allowed time as `HH:mm`. */
|
|
2942
3036
|
'max'?: NLDDTimeField['max'];
|
|
2943
|
-
/**
|
|
3037
|
+
/** Step in minutes (default 1). Decides which times are valid, what rounding snaps to, and how far the arrow keys jump. */
|
|
2944
3038
|
'step'?: NLDDTimeField['step'];
|
|
2945
|
-
/**
|
|
3039
|
+
/** Hides the picker button. It is shown by default. */
|
|
2946
3040
|
'no-picker'?: NLDDTimeField['noPicker'];
|
|
2947
|
-
/**
|
|
3041
|
+
/** Hides the picker button. It is shown by default. */
|
|
2948
3042
|
'noPicker'?: NLDDTimeField['noPicker'];
|
|
2949
|
-
/**
|
|
3043
|
+
/** Sets the id on the internal input. Set automatically by nldd-form-field. */
|
|
2950
3044
|
'input-id'?: NLDDTimeField['inputId'];
|
|
2951
|
-
/**
|
|
3045
|
+
/** Sets the id on the internal input. Set automatically by nldd-form-field. */
|
|
2952
3046
|
'inputId'?: NLDDTimeField['inputId'];
|
|
2953
|
-
/**
|
|
3047
|
+
/** Placeholder text. Do not put a format here; use the supporting label of nldd-form-field for that. */
|
|
2954
3048
|
'placeholder'?: NLDDTimeField['placeholder'];
|
|
2955
|
-
/**
|
|
3049
|
+
/** Marks the field as invalid. */
|
|
2956
3050
|
'invalid'?: NLDDTimeField['invalid'];
|
|
2957
|
-
/**
|
|
3051
|
+
/** Marks the field as valid. */
|
|
2958
3052
|
'valid'?: NLDDTimeField['valid'];
|
|
2959
|
-
/**
|
|
3053
|
+
/** Disabled state. */
|
|
2960
3054
|
'disabled'?: NLDDTimeField['disabled'];
|
|
2961
|
-
/**
|
|
3055
|
+
/** Read-only state. */
|
|
2962
3056
|
'readonly'?: NLDDTimeField['readonly'];
|
|
2963
|
-
/**
|
|
3057
|
+
/** Required state. */
|
|
2964
3058
|
'required'?: NLDDTimeField['required'];
|
|
2965
|
-
/**
|
|
3059
|
+
/** Name for form submission. */
|
|
2966
3060
|
'name'?: NLDDTimeField['name'];
|
|
2967
|
-
/** Autocomplete
|
|
3061
|
+
/** Autocomplete hint. */
|
|
2968
3062
|
'autocomplete'?: NLDDTimeField['autocomplete'];
|
|
2969
|
-
/**
|
|
3063
|
+
/** Accessible label for the internal input. Set automatically by nldd-form-field. */
|
|
2970
3064
|
'accessible-label'?: NLDDTimeField['accessibleLabel'];
|
|
2971
|
-
/**
|
|
3065
|
+
/** Accessible label for the internal input. Set automatically by nldd-form-field. */
|
|
2972
3066
|
'accessibleLabel'?: NLDDTimeField['accessibleLabel'];
|
|
2973
|
-
/**
|
|
2974
|
-
'error-message-ids'?: NLDDTimeField['errorMessageIds'];
|
|
2975
|
-
/** Ids voor aria-describedby. Wordt automatisch gezet door nldd-form-field. */
|
|
2976
|
-
'errorMessageIds'?: NLDDTimeField['errorMessageIds'];
|
|
2977
|
-
/** Breedte. Standaard precies breed genoeg voor een tijd plus het validatie-icoon; 'full' vult de container, of geef een eigen CSS-lengte. */
|
|
3067
|
+
/** Width. By default exactly wide enough for a time plus the validation icon; 'full' fills the container; 'fit-content' drops the room for the validation icon and grows again as soon as the field turns valid or invalid; or pass your own CSS length. */
|
|
2978
3068
|
'width'?: NLDDTimeField['width'];
|
|
2979
|
-
/**
|
|
3069
|
+
/** Translations; unspecified keys fall back to Dutch. */
|
|
2980
3070
|
'translations'?: NLDDTimeField['translations'];
|
|
3071
|
+
/** Set by nldd-form-field. A consumer never writes this. */
|
|
3072
|
+
'describedByElements'?: NLDDTimeField['describedByElements'];
|
|
2981
3073
|
'internals'?: NLDDTimeField['internals'];
|
|
2982
|
-
/**
|
|
3074
|
+
/** On every change. detail: { value } with `HH:mm`, or '' while there is no valid time. */
|
|
2983
3075
|
'onInput'?: (event: CustomEvent) => void;
|
|
2984
|
-
/**
|
|
3076
|
+
/** When the value is committed: on leaving the field, and on closing the picker in a way that keeps the choice. detail: { value } with `HH:mm`, or ''. */
|
|
2985
3077
|
'onChange'?: (event: CustomEvent) => void;
|
|
2986
3078
|
};
|
|
2987
3079
|
|
|
2988
3080
|
type NLDDTimePickerProps = {
|
|
2989
|
-
/**
|
|
3081
|
+
/** The chosen time as `HH:mm` (24-hour). */
|
|
2990
3082
|
'value'?: NLDDTimePicker['value'];
|
|
2991
|
-
/**
|
|
3083
|
+
/** Earliest allowed time as `HH:mm`. Also the base that `step` counts from. */
|
|
2992
3084
|
'min'?: NLDDTimePicker['min'];
|
|
2993
|
-
/**
|
|
3085
|
+
/** Latest allowed time as `HH:mm`. */
|
|
2994
3086
|
'max'?: NLDDTimePicker['max'];
|
|
2995
|
-
/**
|
|
3087
|
+
/** Step in minutes (default 1). Decides which minutes are in the column. */
|
|
2996
3088
|
'step'?: NLDDTimePicker['step'];
|
|
2997
|
-
/**
|
|
3089
|
+
/** Height of the columns in rows (default 7, minimum 3). The chosen value always sits in the middle, so an odd number shows whole rows and an even number cuts off half a row at the top and bottom. */
|
|
2998
3090
|
'rows'?: NLDDTimePicker['rows'];
|
|
2999
|
-
/**
|
|
3091
|
+
/** Width: `full` fills the container, or pass your own CSS length. */
|
|
3000
3092
|
'width'?: NLDDTimePicker['width'];
|
|
3001
|
-
/**
|
|
3093
|
+
/** Accessible name of the picker. */
|
|
3002
3094
|
'accessible-label'?: NLDDTimePicker['accessibleLabel'];
|
|
3003
|
-
/**
|
|
3095
|
+
/** Accessible name of the picker. */
|
|
3004
3096
|
'accessibleLabel'?: NLDDTimePicker['accessibleLabel'];
|
|
3005
|
-
/**
|
|
3097
|
+
/** Translations; unspecified keys fall back to Dutch. */
|
|
3006
3098
|
'translations'?: NLDDTimePicker['translations'];
|
|
3007
|
-
/**
|
|
3099
|
+
/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
|
|
3100
|
+
'invalid'?: NLDDTimePicker['invalid'];
|
|
3101
|
+
/** Set by nldd-form-field. A consumer never writes this. */
|
|
3102
|
+
'describedByElements'?: NLDDTimePicker['describedByElements'];
|
|
3103
|
+
/** On every change: scrolling, the arrow keys. detail: { value } with `HH:mm`. */
|
|
3008
3104
|
'onInput'?: (event: CustomEvent) => void;
|
|
3009
|
-
/**
|
|
3105
|
+
/** When the choice is confirmed: a click on a value or on the selection, or Enter. detail: { value } with `HH:mm`. Scrolling only fires `input`, because otherwise a field showing the picker in a popover would commit as soon as you stopped scrolling. */
|
|
3010
3106
|
'onChange'?: (event: CustomEvent) => void;
|
|
3011
3107
|
};
|
|
3012
3108
|
|
|
3013
3109
|
type NLDDTimelineTrackCellProps = {
|
|
3014
|
-
/**
|
|
3110
|
+
/** How far along this row is (default 'past'); the same values as `nldd-step-indicator-item`. It colors the dot and the track around it: covered above where you are, still ahead below */
|
|
3015
3111
|
'status'?: NLDDTimelineTrackCell['status'];
|
|
3016
|
-
/**
|
|
3112
|
+
/** How wide the lane is and so how big the dot: `sm` (default, 16px) for a timeline of events, `md` (24px) where a number or an icon has to fit. Every row in one list takes the same size, or the track jumps */
|
|
3113
|
+
'size'?: NLDDTimelineTrackCell['size'];
|
|
3114
|
+
/** 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 */
|
|
3017
3115
|
'variant'?: NLDDTimelineTrackCell['variant'];
|
|
3018
|
-
/** This row belongs under the previous one: a smaller dot in the same lane, so the track runs straight on and nothing indents. The dot stays empty (a number or an icon would not fit, and would make the row a step of its own); carry the hierarchy in the row itself instead, with an `nldd-text-cell` rather than an `nldd-title-cell` for example */
|
|
3019
|
-
'minor'?: NLDDTimelineTrackCell['minor'];
|
|
3020
3116
|
/** The direction the timeline moves forward in: `down` (default) puts the past above, `up` below. Only the current step has half a track, so this only has an effect there */
|
|
3021
3117
|
'direction'?: NLDDTimelineTrackCell['direction'];
|
|
3022
|
-
/** 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 */
|
|
3118
|
+
/** 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 */
|
|
3023
3119
|
'position'?: NLDDTimelineTrackCell['position'];
|
|
3120
|
+
/** 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 */
|
|
3121
|
+
'line'?: NLDDTimelineTrackCell['line'];
|
|
3024
3122
|
/** Number or short text in the dot */
|
|
3025
3123
|
'text'?: NLDDTimelineTrackCell['text'];
|
|
3026
3124
|
/** Icon name in the dot; wins over `text` */
|
|
@@ -3029,14 +3127,14 @@ declare module 'vue' {
|
|
|
3029
3127
|
'hideBelow'?: NLDDTimelineTrackCell['hideBelow'];
|
|
3030
3128
|
'hide-above'?: NLDDTimelineTrackCell['hideAbove'];
|
|
3031
3129
|
'hideAbove'?: NLDDTimelineTrackCell['hideAbove'];
|
|
3032
|
-
/** Only a
|
|
3130
|
+
/** Only a whole dot in a wide lane has room to read a number in: a minor one is smaller still, and would claim to be a step of its own. */
|
|
3033
3131
|
'showsContent'?: NLDDTimelineTrackCell['showsContent'];
|
|
3034
3132
|
};
|
|
3035
3133
|
|
|
3036
3134
|
type NLDDTitleProps = {
|
|
3037
3135
|
/** Visual size of the title: 1–6 (default: 3) */
|
|
3038
3136
|
'size'?: NLDDTitle['size'];
|
|
3039
|
-
/** 'inherit' lets the title
|
|
3137
|
+
/** 'inherit' lets the title follow the text color of the surface (for colored areas such as the filled categories); overline and subtitle get the same color at a lowered opacity. Empty = the default content colors. */
|
|
3040
3138
|
'color'?: NLDDTitle['color'];
|
|
3041
3139
|
};
|
|
3042
3140
|
|
|
@@ -3092,6 +3190,8 @@ declare module 'vue' {
|
|
|
3092
3190
|
};
|
|
3093
3191
|
|
|
3094
3192
|
type NLDDToggleButtonProps = {
|
|
3193
|
+
/** Required state. Set by nldd-toggle-button-group. */
|
|
3194
|
+
'required'?: NLDDToggleButton['required'];
|
|
3095
3195
|
/** Underlying element (default: 'button') */
|
|
3096
3196
|
'type'?: NLDDToggleButton['type'];
|
|
3097
3197
|
/** Button size (default: 'md') */
|
|
@@ -3100,6 +3200,10 @@ declare module 'vue' {
|
|
|
3100
3200
|
'selected'?: NLDDToggleButton['selected'];
|
|
3101
3201
|
/** Disabled state */
|
|
3102
3202
|
'disabled'?: NLDDToggleButton['disabled'];
|
|
3203
|
+
/** Takes the control out of the tab order (tabindex="-1"), for a control owned by a roving container (a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable. */
|
|
3204
|
+
'no-tab'?: NLDDToggleButton['noTab'];
|
|
3205
|
+
/** Takes the control out of the tab order (tabindex="-1"), for a control owned by a roving container (a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable. */
|
|
3206
|
+
'noTab'?: NLDDToggleButton['noTab'];
|
|
3103
3207
|
/** Value for form submission (checkbox/radio) */
|
|
3104
3208
|
'value'?: NLDDToggleButton['value'];
|
|
3105
3209
|
/** Name for form submission (checkbox/radio) */
|
|
@@ -3114,12 +3218,18 @@ declare module 'vue' {
|
|
|
3114
3218
|
'accessible-label'?: NLDDToggleButton['accessibleLabel'];
|
|
3115
3219
|
/** Accessible label; required for icon-only usage */
|
|
3116
3220
|
'accessibleLabel'?: NLDDToggleButton['accessibleLabel'];
|
|
3221
|
+
/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
|
|
3222
|
+
'invalid'?: NLDDToggleButton['invalid'];
|
|
3223
|
+
/** Set by nldd-form-field. A consumer never writes this. */
|
|
3224
|
+
'describedByElements'?: NLDDToggleButton['describedByElements'];
|
|
3117
3225
|
'internals'?: NLDDToggleButton['internals'];
|
|
3118
3226
|
/** When selection changes; detail: { selected: boolean, value: string } */
|
|
3119
3227
|
'onChange'?: (event: CustomEvent) => void;
|
|
3120
3228
|
};
|
|
3121
3229
|
|
|
3122
3230
|
type NLDDToggleButtonGroupProps = {
|
|
3231
|
+
/** Marks the group as required. Enforced in radio mode; in checkbox mode only announced. */
|
|
3232
|
+
'required'?: NLDDToggleButtonGroup['required'];
|
|
3123
3233
|
/** Selection mode (default: 'checkbox') */
|
|
3124
3234
|
'type'?: NLDDToggleButtonGroup['type'];
|
|
3125
3235
|
/** Forwarded to all buttons */
|
|
@@ -3136,6 +3246,8 @@ declare module 'vue' {
|
|
|
3136
3246
|
'accessible-labeled-by'?: NLDDToggleButtonGroup['accessibleLabeledBy'];
|
|
3137
3247
|
/** ID of an external label element (aria-labelledby) */
|
|
3138
3248
|
'accessibleLabeledBy'?: NLDDToggleButtonGroup['accessibleLabeledBy'];
|
|
3249
|
+
/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
|
|
3250
|
+
'invalid'?: NLDDToggleButtonGroup['invalid'];
|
|
3139
3251
|
/** Bubbles up from the changed button; detail: { selected: boolean, value: string } */
|
|
3140
3252
|
'onChange'?: (event: CustomEvent) => void;
|
|
3141
3253
|
};
|
|
@@ -3202,6 +3314,8 @@ declare module 'vue' {
|
|
|
3202
3314
|
'name'?: NLDDTokenField['name'];
|
|
3203
3315
|
/** Override translation keys; unset keys fall back to Dutch */
|
|
3204
3316
|
'translations'?: NLDDTokenField['translations'];
|
|
3317
|
+
/** Set by nldd-form-field. A consumer never writes this. */
|
|
3318
|
+
'describedByElements'?: NLDDTokenField['describedByElements'];
|
|
3205
3319
|
'internals'?: NLDDTokenField['internals'];
|
|
3206
3320
|
/** When the selected values change; detail: { values: string[] } */
|
|
3207
3321
|
'onChange'?: (event: CustomEvent) => void;
|
|
@@ -3271,7 +3385,7 @@ declare module 'vue' {
|
|
|
3271
3385
|
type NLDDTooltipProps = {
|
|
3272
3386
|
/** Tooltip text */
|
|
3273
3387
|
'text'?: NLDDTooltip['text'];
|
|
3274
|
-
/** Forces the tooltip visible, whatever hover or focus does. Use it for programmatic feedback ("Copied", for instance). Reset it to false to restore the hover
|
|
3388
|
+
/** Forces the tooltip visible, whatever hover or focus does. Use it for programmatic feedback ("Copied", for instance). Reset it to false to restore the hover behavior. */
|
|
3275
3389
|
'open'?: NLDDTooltip['open'];
|
|
3276
3390
|
/** Position: 'top' | 'bottom' | 'left' | 'right' (default: 'bottom'; automatically 'top' on touch devices) */
|
|
3277
3391
|
'placement'?: NLDDTooltip['placement'];
|
|
@@ -3282,47 +3396,47 @@ declare module 'vue' {
|
|
|
3282
3396
|
};
|
|
3283
3397
|
|
|
3284
3398
|
type NLDDTopNavigationBarProps = {
|
|
3285
|
-
/**
|
|
3399
|
+
/** Name of the website or application, above the menu bar. Empty leaves the title line out. */
|
|
3286
3400
|
'website-title'?: NLDDTopNavigationBar['websiteTitle'];
|
|
3287
|
-
/**
|
|
3401
|
+
/** Name of the website or application, above the menu bar. Empty leaves the title line out. */
|
|
3288
3402
|
'websiteTitle'?: NLDDTopNavigationBar['websiteTitle'];
|
|
3289
|
-
/**
|
|
3403
|
+
/** Hides the whole logo bar, wordmark included. */
|
|
3290
3404
|
'no-logo'?: NLDDTopNavigationBar['noLogo'];
|
|
3291
|
-
/**
|
|
3405
|
+
/** Hides the whole logo bar, wordmark included. */
|
|
3292
3406
|
'noLogo'?: NLDDTopNavigationBar['noLogo'];
|
|
3293
|
-
/**
|
|
3407
|
+
/** Limits the bar content to a max-width so it lines up with the page sections. 'full' fills the entire width, or pass your own CSS length. */
|
|
3294
3408
|
'width'?: NLDDTopNavigationBar['width'];
|
|
3295
|
-
/**
|
|
3409
|
+
/** Title of the wordmark next to the logo. Without it the logo stands alone. */
|
|
3296
3410
|
'logo-title'?: NLDDTopNavigationBar['logoTitle'];
|
|
3297
|
-
/**
|
|
3411
|
+
/** Title of the wordmark next to the logo. Without it the logo stands alone. */
|
|
3298
3412
|
'logoTitle'?: NLDDTopNavigationBar['logoTitle'];
|
|
3299
|
-
/**
|
|
3413
|
+
/** Subtitle under the wordmark title. Only visible when there is a wordmark. */
|
|
3300
3414
|
'logo-subtitle'?: NLDDTopNavigationBar['logoSubtitle'];
|
|
3301
|
-
/**
|
|
3415
|
+
/** Subtitle under the wordmark title. Only visible when there is a wordmark. */
|
|
3302
3416
|
'logoSubtitle'?: NLDDTopNavigationBar['logoSubtitle'];
|
|
3303
|
-
/**
|
|
3417
|
+
/** First supporting line under the wordmark title. Only visible when there is a wordmark. */
|
|
3304
3418
|
'logo-supporting-text-1'?: NLDDTopNavigationBar['logoSupportingText1'];
|
|
3305
|
-
/**
|
|
3419
|
+
/** First supporting line under the wordmark title. Only visible when there is a wordmark. */
|
|
3306
3420
|
'logoSupportingText1'?: NLDDTopNavigationBar['logoSupportingText1'];
|
|
3307
|
-
/**
|
|
3421
|
+
/** Second supporting line under the wordmark title. Only visible when there is a wordmark. */
|
|
3308
3422
|
'logo-supporting-text-2'?: NLDDTopNavigationBar['logoSupportingText2'];
|
|
3309
|
-
/**
|
|
3423
|
+
/** Second supporting line under the wordmark title. Only visible when there is a wordmark. */
|
|
3310
3424
|
'logoSupportingText2'?: NLDDTopNavigationBar['logoSupportingText2'];
|
|
3311
|
-
/** URL
|
|
3425
|
+
/** URL for the logo and wordmark. Without it they are not a link but an image with an accessible label. */
|
|
3312
3426
|
'logo-href'?: NLDDTopNavigationBar['logoHref'];
|
|
3313
|
-
/** URL
|
|
3427
|
+
/** URL for the logo and wordmark. Without it they are not a link but an image with an accessible label. */
|
|
3314
3428
|
'logoHref'?: NLDDTopNavigationBar['logoHref'];
|
|
3315
|
-
/** URL
|
|
3429
|
+
/** URL for the website title. Without it the title stays plain text. */
|
|
3316
3430
|
'website-href'?: NLDDTopNavigationBar['websiteHref'];
|
|
3317
|
-
/** URL
|
|
3431
|
+
/** URL for the website title. Without it the title stays plain text. */
|
|
3318
3432
|
'websiteHref'?: NLDDTopNavigationBar['websiteHref'];
|
|
3319
|
-
/** URL
|
|
3433
|
+
/** URL of the back button. Without it a click fires the `back-click` event, so the consumer navigates itself. */
|
|
3320
3434
|
'back-href'?: NLDDTopNavigationBar['backHref'];
|
|
3321
|
-
/** URL
|
|
3435
|
+
/** URL of the back button. Without it a click fires the `back-click` event, so the consumer navigates itself. */
|
|
3322
3436
|
'backHref'?: NLDDTopNavigationBar['backHref'];
|
|
3323
|
-
/**
|
|
3437
|
+
/** Text of the back button. The button appears as soon as back-text or back-href is set; without text it falls back to the translation ("Terug"). */
|
|
3324
3438
|
'back-text'?: NLDDTopNavigationBar['backText'];
|
|
3325
|
-
/**
|
|
3439
|
+
/** Text of the back button. The button appears as soon as back-text or back-href is set; without text it falls back to the translation ("Terug"). */
|
|
3326
3440
|
'backText'?: NLDDTopNavigationBar['backText'];
|
|
3327
3441
|
'translations'?: NLDDTopNavigationBar['translations'];
|
|
3328
3442
|
};
|
|
@@ -3350,9 +3464,9 @@ declare module 'vue' {
|
|
|
3350
3464
|
'dismiss-text'?: NLDDTopTitleBar['dismissText'];
|
|
3351
3465
|
/** Text of the dismiss button. Empty hides that button. */
|
|
3352
3466
|
'dismissText'?: NLDDTopTitleBar['dismissText'];
|
|
3353
|
-
/** Fired when the back button is clicked (not fired when back-href is set) */
|
|
3467
|
+
/** Fired when the back button is clicked (not fired when back-href is set). It bubbles and is composed, so an ancestor hears it too, which is how nldd-navigation-split-view lets a consumer catch the back of any pane in one place. Listen in one place then: bound to both this bar and an ancestor, a single press runs the handler twice. */
|
|
3354
3468
|
'onBack'?: (event: CustomEvent) => void;
|
|
3355
|
-
/** Fired when the dismiss button is clicked */
|
|
3469
|
+
/** Fired when the dismiss button is clicked. Bubbles and is composed, with the same caveat as `back`. */
|
|
3356
3470
|
'onDismiss'?: (event: CustomEvent) => void;
|
|
3357
3471
|
};
|
|
3358
3472
|
|
|
@@ -3399,38 +3513,70 @@ declare module 'vue' {
|
|
|
3399
3513
|
'height'?: NLDDTwoThirdsOneThirdSection['height'];
|
|
3400
3514
|
};
|
|
3401
3515
|
|
|
3516
|
+
type NLDDValidationItemProps = {
|
|
3517
|
+
/** Regular expression the value has to contain. Not anchored, unlike the native `pattern`: `[A-Z]` means "has a capital in it". */
|
|
3518
|
+
'match'?: NLDDValidationItem['match'];
|
|
3519
|
+
/** Fewest characters the value may have. */
|
|
3520
|
+
'minlength'?: NLDDValidationItem['minlength'];
|
|
3521
|
+
/** Most characters the value may have. */
|
|
3522
|
+
'maxlength'?: NLDDValidationItem['maxlength'];
|
|
3523
|
+
/** The value may not be empty. Use it on a field whose other rules would pass an empty value. */
|
|
3524
|
+
'required'?: NLDDValidationItem['required'];
|
|
3525
|
+
/** Show this item before there is a verdict, whatever the list says. */
|
|
3526
|
+
'hint'?: NLDDValidationItem['hint'];
|
|
3527
|
+
/** Whether the value fails this item. Managed by the list; do not set it yourself. */
|
|
3528
|
+
'unmet'?: NLDDValidationItem['unmet'];
|
|
3529
|
+
/** Whether the item is on screen. Managed by the list. */
|
|
3530
|
+
'visible'?: NLDDValidationItem['visible'];
|
|
3531
|
+
/** Whether this item judges itself, or waits for the app to name it. */
|
|
3532
|
+
'hasRule'?: NLDDValidationItem['hasRule'];
|
|
3533
|
+
};
|
|
3534
|
+
|
|
3535
|
+
type NLDDValidationListProps = {
|
|
3536
|
+
/** Id of the control this list is about. Not needed inside an nldd-form-field, which hands its own control over. */
|
|
3537
|
+
'for'?: NLDDValidationList['for'];
|
|
3538
|
+
/** Show every item before there is a verdict, as the requirements of the field. Overridable per item. */
|
|
3539
|
+
'hint'?: NLDDValidationList['hint'];
|
|
3540
|
+
/** Drop the hints, because this field has been judged. Turned on by the list itself once its control is `invalid`, and settable by hand. What turns red follows `invalid`, not this. */
|
|
3541
|
+
'judging'?: NLDDValidationList['judging'];
|
|
3542
|
+
/** The control this list is about. Set by the wrapping nldd-form-field, which already answers "which control is this field about" for the label and the description. A `for` of its own wins, and setting this property directly is what a test or a story does. */
|
|
3543
|
+
'control'?: NLDDValidationList['control'];
|
|
3544
|
+
/** The value to check, when there is no control to read it from. */
|
|
3545
|
+
'value'?: NLDDValidationList['value'];
|
|
3546
|
+
};
|
|
3547
|
+
|
|
3402
3548
|
type NLDDWindowProps = {
|
|
3403
|
-
/**
|
|
3549
|
+
/** Modeless (no backdrop or focus trap); the window is modal by default */
|
|
3404
3550
|
'modeless'?: NLDDWindow['modeless'];
|
|
3405
|
-
/**
|
|
3551
|
+
/** A click on the backdrop does not close the window. For windows where dismissing by accident costs work: a wizard, a form with filled-in fields. Escape and the dismiss button keep working. */
|
|
3406
3552
|
'no-light-dismiss'?: NLDDWindow['noLightDismiss'];
|
|
3407
|
-
/**
|
|
3553
|
+
/** A click on the backdrop does not close the window. For windows where dismissing by accident costs work: a wizard, a form with filled-in fields. Escape and the dismiss button keep working. */
|
|
3408
3554
|
'noLightDismiss'?: NLDDWindow['noLightDismiss'];
|
|
3409
|
-
/** (
|
|
3555
|
+
/** (required) Accessible name (aria-label). Falls back to the i18n default ('Venster') when unset. Always pass a unique, descriptive name per window. */
|
|
3410
3556
|
'accessible-label'?: NLDDWindow['accessibleLabel'];
|
|
3411
|
-
/** (
|
|
3557
|
+
/** (required) Accessible name (aria-label). Falls back to the i18n default ('Venster') when unset. Always pass a unique, descriptive name per window. */
|
|
3412
3558
|
'accessibleLabel'?: NLDDWindow['accessibleLabel'];
|
|
3413
|
-
/** Override translation keys; unset keys
|
|
3559
|
+
/** Override translation keys; unset keys fall back to the Dutch default. */
|
|
3414
3560
|
'translations'?: NLDDWindow['translations'];
|
|
3415
|
-
/** CSS top
|
|
3561
|
+
/** CSS top position of the top edge (e.g. '0', '100px') */
|
|
3416
3562
|
'top'?: NLDDWindow['top'];
|
|
3417
|
-
/** CSS left
|
|
3563
|
+
/** CSS left position of the left edge */
|
|
3418
3564
|
'left'?: NLDDWindow['left'];
|
|
3419
|
-
/** CSS right
|
|
3565
|
+
/** CSS right value */
|
|
3420
3566
|
'right'?: NLDDWindow['right'];
|
|
3421
|
-
/** CSS bottom
|
|
3567
|
+
/** CSS bottom value */
|
|
3422
3568
|
'bottom'?: NLDDWindow['bottom'];
|
|
3423
|
-
/**
|
|
3569
|
+
/** Centers both axes on the viewport. Overridable per axis: `centered top="0"` is horizontally centered, top aligned. Mirrors CSS `place-items: center` with `align-items`/`justify-items` overrides. */
|
|
3424
3570
|
'centered'?: NLDDWindow['centered'];
|
|
3425
|
-
/** CSS width (
|
|
3571
|
+
/** CSS width (default: var(--components-window-default-width)) */
|
|
3426
3572
|
'width'?: NLDDWindow['width'];
|
|
3427
|
-
/** CSS height (
|
|
3573
|
+
/** CSS height (default: content height) */
|
|
3428
3574
|
'height'?: NLDDWindow['height'];
|
|
3429
3575
|
/** Color scheme (default 'inherit'). */
|
|
3430
3576
|
'scheme'?: NLDDWindow['scheme'];
|
|
3431
|
-
/**
|
|
3577
|
+
/** When the window opens */
|
|
3432
3578
|
'onOpen'?: (event: CustomEvent) => void;
|
|
3433
|
-
/**
|
|
3579
|
+
/** When the window has fully closed. Does not bubble: overlays can sit inside each other, and a listener on one window should not also hear the form that opened it. */
|
|
3434
3580
|
'onClose'?: (event: CustomEvent) => void;
|
|
3435
3581
|
};
|
|
3436
3582
|
|
|
@@ -3449,7 +3595,7 @@ declare module 'vue' {
|
|
|
3449
3595
|
'nldd-banner': DefineComponent<NLDDBannerProps>;
|
|
3450
3596
|
/** A vertical split view with a main area and an unlimited number of bar panels. Each child determines its order per breakpoint via sm-order, md-order, and lg-order. Children without order attributes are sorted by DOM order. All bars are in normal flow at every breakpoint and stack vertically. A divider is drawn only where the main pane meets an adjacent bar — directly above and/or below main — at every breakpoint (including sm). Two stacked bars on the same side never get a divider between them, so a toolbar and a tab-bar read as one visual unit. Consumers never manage dividers themselves. Give each bar a unique slot name (e.g. slot="toolbar", slot="status-bar"). Use slot="bar-1", slot="bar-2" if no meaningful name applies. The main panel always uses slot="main". Sets --context-parent-background-color, which cascades to all descendants. */
|
|
3451
3597
|
'nldd-bar-split-view': DefineComponent<NLDDBarSplitViewProps>;
|
|
3452
|
-
/**
|
|
3598
|
+
/** Shows a quote with an optional source attribution. */
|
|
3453
3599
|
'nldd-blockquote': DefineComponent<NLDDBlockquoteProps>;
|
|
3454
3600
|
/** Use a box to visually group related components in a distinct, contained region. Boxes draw attention to a set of controls or content that belong together, helping users understand their relationship at a glance. */
|
|
3455
3601
|
'nldd-box': DefineComponent<NLDDBoxProps>;
|
|
@@ -3463,7 +3609,7 @@ declare module 'vue' {
|
|
|
3463
3609
|
'nldd-button-bar-divider': DefineComponent<anonymous_0Props>;
|
|
3464
3610
|
/** A container for grouping related buttons together, either horizontally or vertically. */
|
|
3465
3611
|
'nldd-button-group': DefineComponent<NLDDButtonGroupProps>;
|
|
3466
|
-
/**
|
|
3612
|
+
/** 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. */
|
|
3467
3613
|
'nldd-card': DefineComponent<NLDDCardProps>;
|
|
3468
3614
|
/** A generic cell for wrapping arbitrary content in a list item. Controls vertical alignment and sizing without imposing content opinions. `vertical-alignment="center"` (default) stretches the cell to fill the full row height and centers its content within that space. Use `min-height` to set a minimum centered region. For strict top alignment without a minimum height, use `vertical-alignment="top"`. */
|
|
3469
3615
|
'nldd-cell': DefineComponent<NLDDCellProps>;
|
|
@@ -3480,13 +3626,13 @@ declare module 'vue' {
|
|
|
3480
3626
|
'nldd-combo-box': DefineComponent<NLDDComboBoxProps>;
|
|
3481
3627
|
/** A simple layout primitive: pick a layout mode, give it a gap, optionally align contents, and add padding. Padding can be set for all sides, per axis (inline/block), or per individual side. Specificity: per side > per axis > all sides. Responsive padding and gap have sm/md/lg variants. Each variant emits both an @media (viewport) and @container (layout-container) query. When inside a layout-container the @container query wins; otherwise the @media query provides the viewport-based fallback. Layout modes: - `stack` (default): block items, stacked vertically. The "what you expect from DOM flow" mode. - `row`: flex row, no wrapping. Items shrink or overflow. - `wrap`: flex row, items wrap to new lines. - `grid`: CSS grid, auto-fit columns at min 280px wide. - `columns`: CSS multi-column flow, 280px minimum column width, items don't split across column breaks. Alignment maps to the layout's natural axis: - `stack`: vertical = main-axis (justify-content), horizontal = cross-axis (align-items) - `row` / `wrap`: horizontal = main-axis, vertical = cross-axis - `grid`: horizontal = justify-items, vertical = align-items (per cell) - `columns`: alignment props have no effect (CSS multicol doesn't expose alignment) Item order is set per-child via attributes on the slotted children themselves: `<child order="3">` for a fixed position, or `<child sm-order="N">` / `<child md-order="N">` / `<child lg-order="N">` to override per breakpoint (resolved against THIS container's width via @container queries, same scope as the responsive padding/gap). The container observes slot changes and child attribute mutations and bridges these to `--_slot-order` / `--_slot-sm-order` / etc. custom properties on each child's inline style, which the container's CSS then reads via `::slotted(*)` inside @container queries. Cascade: `sm-order` falls back to `order` falls back to `0` at sm (and analogously for md/lg). No-op for `layout="columns"` (CSS multicol has no per-item ordering hook). The `column-count` attribute (1-8) forces an exact column count for `layout="grid"` (overrides auto-fit) and `layout="columns"` (overrides the natural width-driven count). `sm-column-count` / `md-column-count` / `lg-column-count` resolve against this container's OWN width via an `@container (...)` query on the host — not against the viewport. That lets a footer in a narrow sidebar choose its own column count independent of the surrounding page width. `layout="lanes"` packs items into balanced columns using native CSS grid lanes where supported, falling back to CSS multicol (column-order) elsewhere. CSS-only, no JS. Honours `gap` on both axes and `column-count`. */
|
|
3482
3628
|
'nldd-container': DefineComponent<NLDDContainerProps>;
|
|
3483
|
-
/**
|
|
3629
|
+
/** A text field for a date, with an optional calendar in a popover. The value is always ISO (yyyy-mm-dd); on screen it shows the Dutch notation (dd-mm-yyyy). Typing is not masked: input is accepted generously and normalized only when the field is left. Error messages belong to nldd-form-field, not here. This field reflects only `invalid` / `valid`, like nldd-text-field. */
|
|
3484
3630
|
'nldd-date-field': DefineComponent<NLDDDateFieldProps>;
|
|
3485
|
-
/**
|
|
3631
|
+
/** A calendar for picking a date or a period. The component works on its own (inline on a page, in a filter panel) and also sits in the popover of nldd-date-field. Values are always ISO (yyyy-mm-dd). With `range` the user picks a start and an end date in two steps. */
|
|
3486
3632
|
'nldd-date-picker': DefineComponent<NLDDDatePickerProps>;
|
|
3487
3633
|
/** A cell component for displaying a title-description pair in lists. `vertical-alignment="center"` (default) stretches the cell to fill the full row height and centers its content within that space. Use `min-height` to set a minimum centered region. For strict top alignment without a minimum height, use `vertical-alignment="top"`. */
|
|
3488
3634
|
'nldd-description-cell': DefineComponent<NLDDDescriptionCellProps>;
|
|
3489
|
-
/**
|
|
3635
|
+
/** A rule that visually separates sections of content. */
|
|
3490
3636
|
'nldd-divider': DefineComponent<NLDDDividerProps>;
|
|
3491
3637
|
/** A horizontal tab bar for document tabs with an automatic overflow button and an end slot for action buttons. Exports both NLDDDocumentTabBar and NLDDDocumentTabBarItem. */
|
|
3492
3638
|
'nldd-document-tab-bar': DefineComponent<NLDDDocumentTabBarProps>;
|
|
@@ -3497,14 +3643,13 @@ declare module 'vue' {
|
|
|
3497
3643
|
'nldd-dropdown': DefineComponent<NLDDDropdownProps>;
|
|
3498
3644
|
/** A file picker that reads as one control: an nldd-button flush in the corner of a tinted surface, the chosen file next to it, and a dismiss button to clear it again. It wraps a hidden native `<input type="file">`, which is what makes the picker open at all — a file dialog only opens from a user gesture on a real input. The surface deliberately does not look like an input field. A border with field semantics promises you can type into it; here you can only press a button, so it uses button and surface colors instead of `--semantics-input-fields-*`. The button keeps its own tinted background and therefore sits a shade darker in the surface, which is what marks it as the thing to press. Several files are summarized, not listed: "3 bestanden" with a single cross that clears all of them. Every pick replaces the whole FileList, and rebuilding it to add or drop one file means going through DataTransfer, which does not deduplicate (even the same File object twice yields two entries) — and a File has no id, so deduplicating would come down to guessing from name, size and last-modified. A list with a cross per file would promise an edit the platform does not support. A page that does want to show the files renders its own list from the `File[]` in the change event. */
|
|
3499
3645
|
'nldd-file-field': DefineComponent<NLDDFileFieldProps>;
|
|
3500
|
-
/** Nederlandse Digitale Dienst Form Component Plain custom element (extends HTMLElement, no Lit)
|
|
3646
|
+
/** Nederlandse Digitale Dienst Form Component Plain custom element (extends HTMLElement, no Lit), required for light-DOM autofill. Renders a real <form> element in the LIGHT DOM around its children. Chrome's autofill engine looks for native <input> elements that have a <form> ancestor in the light DOM; with shadow-DOM inputs it can't find them, so we keep this component shadow-less. **Differs from other nldd-* components:** - No shadowRoot: all children live in the light DOM (inside the inner <form>) - No Lit: a plain HTMLElement with manual attribute mirroring - **Requires a global stylesheet import**: the vertical rhythm rules live in `dist/css/form.css` (or `global.css`), not in a component-specific shadow stylesheet. Import it as part of your app's global CSS bundle. **Two usage modes:** 1. **Auto-wrap** (default): write children directly. Component creates a `<form>` element and migrates children into it via MutationObserver. Simplest API. 2. **User-provided form** (framework-friendly): write your own `<form>` as direct child. Component detects it, takes over attribute mirroring, and skips the migration. Children stay where your framework puts them, so there is no DOM shuffling to conflict with React/Vue/Angular reconciliation. **Framework interop:** In auto-wrap mode every direct child is moved into the inner form through a MutationObserver. That works fine for most React/Vue use cases, because frameworks only mutate the DOM when their virtual DOM changes. For edge cases (animation libraries that track DOM position, SSR hydration mismatches, frameworks that actively check sibling positions) use **user-provided form** mode instead. For programmatic manipulation, use the `form` getter so you work with the inner `<form>` element directly: const inner = document.querySelector('nldd-form').form; inner.checkValidity(); inner.appendChild(myInput); // skips the migration overhead */
|
|
3501
3647
|
'nldd-form': DefineComponent<NLDDFormProps>;
|
|
3502
|
-
/**
|
|
3648
|
+
/** 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="Opslaan"></nldd-button> </nldd-button-group> </nldd-form-actions> </nldd-form> */
|
|
3503
3649
|
'nldd-form-actions': DefineComponent<NLDDFormActionsProps>;
|
|
3504
3650
|
'nldd-form-field': DefineComponent<NLDDFormFieldProps>;
|
|
3505
|
-
'nldd-form-field-error-text': DefineComponent<NLDDFormFieldErrorTextProps>;
|
|
3506
3651
|
'nldd-form-field-help-text': DefineComponent<NLDDFormFieldHelpTextProps>;
|
|
3507
|
-
/** Nederlandse Digitale Dienst Form Section Component Plain custom element (extends HTMLElement, no Lit)
|
|
3652
|
+
/** Nederlandse Digitale Dienst Form Section Component Plain custom element (extends HTMLElement, no Lit). The light-DOM render works around an NVDA + Firefox a11y bug where a shadow-DOM <fieldset> + <legend> is not reliably announced as the group label for slotted controls. A native fieldset/legend in the light DOM works correctly across all AT/browser combinations. **Differs from shadow components:** - No shadowRoot: all children live in the light DOM (inside the rendered <fieldset>). - No Lit: a plain HTMLElement with manual DOM mutation. - **Requires a global stylesheet import**: `dist/css/form-section.css` (or `global.css`). Form-section has no shadow stylesheet. Renders to: <nldd-form-section> <fieldset class="form-section"> <legend class="form-section__header"> <span class="form-section__title">Title</span> <span class="form-section__subtitle">Subtitle</span> </legend> <div class="form-section__main"> [user's children] </div> </fieldset> </nldd-form-section> **Accessibility note**: the title renders as a `<legend>`. Semantically that is a **group label**, not a heading. Screen readers announce it when the user enters the fieldset, but users jumping through headings with the H key skip it. Visually it looks like a heading, so use this component for *form grouping*, not as page structure. For real page headings, use a separate heading element above the form. **Supporting-text length**: the subtitle sits as a `<span>` inside the `<legend>` so a screen reader reads it along as the group label. Side effect: on every field entry within the section, the whole legend (title + subtitle) is spoken again. Keep `supporting-text` short (roughly 80 characters or less) and use it to introduce the group ("Vul je adresgegevens in"), not for detailed instructions. For a longer explanation on one specific field, use `nldd-form-field-help-text` on that field. <nldd-form> <nldd-form-section text="Persoonsgegevens" supporting-text="Vul je gegevens in."> <nldd-form-field label="Voornaam">...</nldd-form-field> <nldd-form-field label="Achternaam">...</nldd-form-field> </nldd-form-section> <nldd-form-section text="Adres"> <nldd-form-field label="Straat">...</nldd-form-field> </nldd-form-section> <nldd-form-actions>...</nldd-form-actions> </nldd-form> */
|
|
3508
3653
|
'nldd-form-section': DefineComponent<NLDDFormSectionProps>;
|
|
3509
3654
|
/** A section that spans the full width without horizontal padding. Useful for background colors, images, or other content that runs edge to edge. Vertical padding and gap adjust via container queries. */
|
|
3510
3655
|
'nldd-full-bleed-section': DefineComponent<NLDDFullBleedSectionProps>;
|
|
@@ -3521,13 +3666,13 @@ declare module 'vue' {
|
|
|
3521
3666
|
'nldd-image': DefineComponent<NLDDImageProps>;
|
|
3522
3667
|
/** An inline status component for empty state, confirmations and feedback. Fills the container and has no minimum width. */
|
|
3523
3668
|
'nldd-inline-dialog': DefineComponent<NLDDInlineDialogProps>;
|
|
3524
|
-
/**
|
|
3669
|
+
/** A guided-discovery coach mark. Put a control (nldd-search-field, for instance) in the default slot. While `active` is set, the component lifts a callout (title + supporting text + dismiss) into the top layer through the Popover API (`popover="manual"`), anchored to the control with Floating UI. No backdrop, non-modal: the background stays interactive. The control itself stays where it is in the flow. With `dismissable` the component manages closing and fires nldd-close: - the user performs the suggested interaction on the control -> close{completed} - the dismiss button -> close{dismissed} - a click or key press OUTSIDE the coach mark -> close{ignored} Without `dismissable` nothing closes by itself (no button, no outside or slot click); the consumer then decides when to close through `active` or `complete()`. `complete()` always works and closes with close{completed}, for example only once a real search has been submitted. */
|
|
3525
3670
|
'nldd-just-in-time-education': DefineComponent<NLDDJustInTimeEducationProps>;
|
|
3526
|
-
/**
|
|
3671
|
+
/** Shows a key combination (such as Cmd+K or Ctrl+Shift+P) in one combined container with a semantic <kbd> element per key. On touch-only devices (no hover-capable input) the shortcut is hidden by default, because it cannot be invoked there. Use the `always-visible` attribute when the shortcut is purely informative and should stay visible. For cross-platform shortcuts you can set `mac-keys`, `windows-keys` and `linux-keys`. The component picks the right one from the detected OS, with `keys` as the fallback for unknown platforms. */
|
|
3527
3672
|
'nldd-keyboard-shortcut': DefineComponent<NLDDKeyboardShortcutProps>;
|
|
3528
|
-
/** Hyperlink component
|
|
3673
|
+
/** Hyperlink component with two modes: 1. **Standalone (sized)**: set `size="xs"|"sm"|"md"|"lg"` for menus, action areas or overviews. Fixed text size, `display: inline-flex` with `gap` for icon spacing. 2. **Inline (inherit)**: leave `size` out or set `size="inherit"` explicitly. The link inherits `font-size`, `line-height` and `font-family` from its surroundings. Text wraps naturally across lines (`display: inline`). Icons work here too; the natural whitespace between icon and text provides the spacing. For links in CMS or markdown output, where the `<a>` arrives as HTML, `<nldd-rich-text>` with a raw `<a>` remains the route to take. */
|
|
3529
3674
|
'nldd-link': DefineComponent<NLDDLinkProps>;
|
|
3530
|
-
/** 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.
|
|
3675
|
+
/** 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>`. - `form` — rows that are not actions themselves: the controls inside them are. A row of a label and a field, a switch, a menu button, or a value you cannot change at all. Semantically the same as `list` (`role="list"`, `role="listitem"`), and everything visual is unchanged; what falls away is the keyboard of a list you walk through. No arrow navigation, so no promise of it either, and no tab stop on the row: Tab goes straight to the controls, in source order, the way it does in any form. Rows that ARE actions (`href`, `button`, `checkbox`, or a segment) contradict that and warn in development. SwiftUI draws the same line between `List` and `Form`, for the same reason. - `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. A list you walk through answers to the arrow keys, and there is no attribute to switch that on. Whether the keys do something is not a property of one list: it is what a reader may assume about all of them, and a per-list setting made that unknowable from the outside. It follows the type, which you can see before you touch a key. - ArrowUp / ArrowDown — move focus between the rows there is something to do with. A row of nothing but text is skipped, because focus that leads nowhere is a dead end. - Home / End — the first / last of those rows. - Tab — the list is ONE tab stop, so Tab moves past it rather than through it. Within the current row Tab walks that row's own controls: a chevron beside a checkbox, a menu button at the end. The same controls in the other rows are held out of the tab order (`tabindex="-1"`, or `no-tab` on a design-system control that keeps its tab stop in its own shadow root), and so are this row's once focus leaves the list, so tabbing back in lands on the row again. - Escape — out of a control the row holds, back onto the row. One level up, where Shift+Tab is one step back. On the row itself the list claims nothing, so Escape carries on to whatever holds the list, and a control showing a menu keeps the first press for closing that menu. While focus sits in a control a row holds, the list stands down: those keys are the control's, and a list that took them anyway would pull focus out of a combo box or a text field mid-word. What the row IS — its own link, button or segments — keeps answering here. Arrows move focus only; selection stays consumer-managed. Three types answer differently, and all three say so on screen before you touch a key: a listbox runs its keyboard from its search field, a reorderable list moves rows with the arrows, and a form has no rows to move between at all. 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 the roving arrow keys are ignored in listbox mode (listbox has its own keyboard). A tree adds to that keyboard, and counts the rows of an open branch as part of the order the arrows walk: - 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 — follows the row: its own link or button, or on a segmented branch the first action that is not the chevron. A branch with only a chevron folds instead. - 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 segment 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. */
|
|
3531
3676
|
'nldd-list': DefineComponent<NLDDListProps>;
|
|
3532
3677
|
/** 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 segments 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 segments stay in the grid, so their footprint is position-independent and tree columns line up at any depth. By default the divider starts at the row's first text or title cell, so the line lands on the words rather than on whatever leads up to them — an icon, an avatar, a checkbox, or the spacers a tree indents with. Rows of different shapes then still line their dividers up with each other, and a tree's dividers step inward with its indentation. Text inside an `nldd-list-item-segment` counts as the row's content, and the marker is that text cell rather than the action: the action carries its own inline padding, so its edge sits before the words. A row with no text or title cell keeps the full content width. 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 leading 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-segment[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`). */
|
|
3533
3678
|
'nldd-list-item': DefineComponent<NLDDListItemProps>;
|
|
@@ -3535,9 +3680,9 @@ declare module 'vue' {
|
|
|
3535
3680
|
'nldd-list-item-segment': DefineComponent<NLDDListItemSegmentProps>;
|
|
3536
3681
|
/** A floating menu component using the Popover API. Positioned relative to an anchor element using Floating UI. Supports filtering, keyboard navigation, and highlight management. Use nldd-menu-item and nldd-menu-divider as children. Note: Only type="button" items are supported when used inside nldd-combo-box-field. Radio and checkbox types may be used in standalone menus. */
|
|
3537
3682
|
'nldd-menu': DefineComponent<NLDDMenuProps>;
|
|
3538
|
-
/**
|
|
3683
|
+
/** Horizontal row of nldd-menu-bar-item elements with automatic overflow detection. Items that do not fit are hidden behind an overflow button with a popover menu. */
|
|
3539
3684
|
'nldd-menu-bar': DefineComponent<NLDDMenuBarProps>;
|
|
3540
|
-
/**
|
|
3685
|
+
/** Interactive building block for use in a menu bar. Renders as an <a> (with href) or a <button> (without href). Supports an icon, text, a disclosure indicator, and an expandable popover through a slotted `<nldd-menu>` (or another popover element). */
|
|
3541
3686
|
'nldd-menu-bar-item': DefineComponent<NLDDMenuBarItemProps>;
|
|
3542
3687
|
/** A horizontal rule between groups of items in an `nldd-menu`. */
|
|
3543
3688
|
'nldd-menu-divider': DefineComponent<NLDDMenuDividerProps>;
|
|
@@ -3584,7 +3729,7 @@ declare module 'vue' {
|
|
|
3584
3729
|
'nldd-radio-button-field': DefineComponent<NLDDRadioButtonFieldProps>;
|
|
3585
3730
|
/** Groups nldd-radio-button-field elements, handles keyboard navigation, and forwards name and disabled state to all child fields. Use inside nldd-form-field which provides the group label. */
|
|
3586
3731
|
'nldd-radio-button-group': DefineComponent<NLDDRadioButtonGroupProps>;
|
|
3587
|
-
/** A container for rich text content that automatically applies responsive typography. Uses no shadow DOM so styles apply to all nested elements. Import nldd-rich-text.css globally in your application.
|
|
3732
|
+
/** A container for rich text content that automatically applies responsive typography. Uses no shadow DOM so styles apply to all nested elements. Import nldd-rich-text.css globally in your application. Children are placed in three zones: text (headings, paragraphs, lists, blockquote, div/section) reads at the `main` size; media and tables (img, figure, video, iframe, table) get the `wide` accent; everything else, code blocks and every component, gets the full `full` span with `justify-self: start`, so the room is available without being forced. Overridable per child with `data-width="main" | "wide" | "full"`. In the left-aligned layout, wide and full read as a bleed to the right; with `centered` they are symmetrical. */
|
|
3588
3733
|
'nldd-rich-text': DefineComponent<NLDDRichTextProps>;
|
|
3589
3734
|
/** A search input with a leading search icon, an optional dismiss button, and an optional search button. */
|
|
3590
3735
|
'nldd-search-field': DefineComponent<NLDDSearchFieldProps>;
|
|
@@ -3599,7 +3744,7 @@ declare module 'vue' {
|
|
|
3599
3744
|
'nldd-sidebar-section': DefineComponent<NLDDSidebarSectionProps>;
|
|
3600
3745
|
/** A basic section with responsive padding and gap based on container size. Contains optional header and footer slots. The padding and spacing between slots adjust automatically via container queries. */
|
|
3601
3746
|
'nldd-simple-section': DefineComponent<NLDDSimpleSectionProps>;
|
|
3602
|
-
/** Accessibility
|
|
3747
|
+
/** Accessibility pattern that lets keyboard users skip past content. Wraps content in a default slot. Without href it focuses the first element after the skip link in the DOM (nextElementSibling). Make sure a focusable element follows the component, otherwise the skip link has no effect. */
|
|
3603
3748
|
'nldd-skip-link': DefineComponent<NLDDSkipLinkProps>;
|
|
3604
3749
|
/** Add explicit space between elements. Components in this design system have no margins of their own — all whitespace is set by a spacer. Use a single `size` attribute for whitespace that's the same at every viewport. Combine with `sm-size`, `md-size` and/or `lg-size` to override the size at specific breakpoints (mobile-first cascade is intentionally avoided — each breakpoint that needs a different value declares it explicitly): - `size` applies at every breakpoint that has no per-viewport override. - `sm-size` overrides at sm (max-width: 640px). - `md-size` overrides at md (641px–1007px). - `lg-size` overrides at lg (min-width: 1008px). Use `flexible` (in any of the four attributes) to fill the remaining space in a flex container. */
|
|
3605
3750
|
'nldd-spacer': DefineComponent<NLDDSpacerProps>;
|
|
@@ -3613,7 +3758,7 @@ declare module 'vue' {
|
|
|
3613
3758
|
'nldd-split-view-pane': DefineComponent<NLDDSplitViewPaneProps>;
|
|
3614
3759
|
/** A vertical split view with multiple stacked panes. The number of panes is set via the `panes` attribute. Each pane automatically gets a numbered slot: pane-1, pane-2, etc. Panes that do not fit the available height are automatically hidden. */
|
|
3615
3760
|
'nldd-stacked-split-view': DefineComponent<NLDDStackedSplitViewProps>;
|
|
3616
|
-
/**
|
|
3761
|
+
/** A narrow, page-wide status bar (24px) with a deep background color per variant. Use it for persistent system state: an outage, planned maintenance, a draft view or a recording in progress. The bar deliberately shows no icon and supports text only. The text itself has to name the status ("Storing: …", "Gepland onderhoud …"), so the meaning does not follow from color alone (WCAG 1.4.1). Keep the text short: the bar shows one line and truncates with an ellipsis, certainly on narrower screens. For a long message with a lot of information only the essence belongs in the bar. Point to a separate page or sheet for the rest (through `href` or `button`, for instance), where the user can read on. The whole bar can be clickable: set `href` (renders an `<a>`) or `button` (renders a `<button>`; listen for the native `click` event). Without either the bar is static. On interaction a chevron appears as an affordance. One action per bar at most; several actions, or links in running text, belong in nldd-banner. role and aria-live are set automatically from the variant: - critical → role="alert" (implies aria-live="assertive"; interrupts the screen reader) - others → role="status" aria-live="polite" Not overridable. If you need a quieter component, pick a different one. Use `critical` only for a real emergency: role="alert" interrupts the screen reader on every change of the content, so do not put text in it that changes regularly (a counting-down timer, for example). */
|
|
3617
3762
|
'nldd-status-bar': DefineComponent<NLDDStatusBarProps>;
|
|
3618
3763
|
/** Shows where you are in a process of several steps: a row of discs with a number (or a check mark on what is done), a label under each and a line connecting them. The parent holds the truth: `current` (1-based) derives the status of every child — `past` before it, `future` after. A child can override that with a `status` of its own, for flows that jump back or skip a step. Horizontal only. For steps under each other, build an `nldd-list` with an `nldd-timeline-track-cell` and an `nldd-title-cell` per row: vertical steps usually carry more than a title, and a list row already does that. Below the sm breakpoint (a container query, so measured on the component itself rather than on the viewport) it folds into one line of text plus a segmented bar. The full list of steps stays in the DOM, only visually hidden, so assistive software hears no less than a wide screen shows. Accessibility: a `nav` with a label, holding a `role="list"` with a `role="listitem"` per step. The current step gets `aria-current="step"`, the only notion WAI-ARIA has for this. "Done" and "still to do" do not exist as ARIA tokens and travel along as visually hidden text instead. */
|
|
3619
3764
|
'nldd-step-indicator': DefineComponent<NLDDStepIndicatorProps>;
|
|
@@ -3640,9 +3785,9 @@ declare module 'vue' {
|
|
|
3640
3785
|
/** 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/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 @-mention typeahead (mentionSource) collapses to an atomic token, and a W3C-style annotation overlay (annotations) marks ranges with a dashed underline, light tint and a count badge without touching the underlying text. */
|
|
3641
3786
|
'nldd-text-editor': DefineComponent<NLDDTextEditorProps>;
|
|
3642
3787
|
'nldd-text-field': DefineComponent<NLDDTextFieldProps>;
|
|
3643
|
-
/**
|
|
3788
|
+
/** A text field for a time. The value is always 24-hour `HH:mm`, which is how Dutch shows it too, so unlike nldd-date-field there is nothing to convert. Typing is not masked: input is accepted generously and normalized only when the field is left. Error messages belong to nldd-form-field, not here. This field reflects only `invalid` / `valid`, like nldd-text-field. What you do in the picker is a preview until you leave it. The field shows the time right away but commits it on close. "Klaar" and Enter keep the choice, and so does a click outside once you have picked something. Cancel and Escape put the old time back. On an empty field the wheels open at `min`, or otherwise at the current time rounded to `step`, which does not fill in the field yet. */
|
|
3644
3789
|
'nldd-time-field': DefineComponent<NLDDTimeFieldProps>;
|
|
3645
|
-
/**
|
|
3790
|
+
/** Two columns, hours and minutes, that slide like a wheel past the selection in the middle. The component works on its own (inline on a page, in a filter panel) and also sits in the popover of nldd-time-field. Values are always 24-hour `HH:mm`. Scrolling is choosing: whatever comes to rest in the middle is the value. The keyboard drives that same selection, because that is what a wheel is: hour and minute are each a spinbutton. The columns underneath are aria-hidden, so the same values are not read out twice. */
|
|
3646
3791
|
'nldd-time-picker': DefineComponent<NLDDTimePickerProps>;
|
|
3647
3792
|
/** 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. */
|
|
3648
3793
|
'nldd-timeline-track-cell': DefineComponent<NLDDTimelineTrackCellProps>;
|
|
@@ -3663,13 +3808,16 @@ declare module 'vue' {
|
|
|
3663
3808
|
'nldd-toolbar-title': DefineComponent<NLDDToolbarTitleProps>;
|
|
3664
3809
|
/** A wrapper that shows a tooltip on hover or focus of its child element. It uses `display: contents`, so it does not affect the child's layout. */
|
|
3665
3810
|
'nldd-tooltip': DefineComponent<NLDDTooltipProps>;
|
|
3666
|
-
/**
|
|
3811
|
+
/** The top bar of a page: a logo bar with the Rijkslogo and an optional wordmark, and below it the main bar with the website title, a back button, the global navigation and the utility navigation. On narrow widths the global navigation moves into a menu sheet behind the menu button. */
|
|
3667
3812
|
'nldd-top-navigation-bar': DefineComponent<NLDDTopNavigationBarProps>;
|
|
3668
3813
|
/** A toolbar for page and container headings with optional navigation and action buttons. The component has two states: - Default: the back button shows the previous page title as a text button - Compact (class `is-compact`): the back button is an icon button, a divider and the toolbar title are visible When `collapse-anchor` is set, the `is-compact` class is automatically applied as soon as the top of the anchor element reaches this bar's own top edge (the sticky header line). Measuring the bar rather than the page keeps it correct in both nested and root scroll modes; it also re-points at the live scroll target when the page switches mode. Without `collapse-anchor` the bar takes a static state: compact when `text` is set (so the title shows in the title-group), non-compact otherwise (so the `back-text` button stays visible). An anchored bar hides its own title from assistive technology. The anchor is the heading the title swaps in for, so both carry the same words: once you scroll past the heading, a screen reader would otherwise find the same title twice. Sighted readers see one at a time, and this makes that true for everyone. Anchor at the heading, then, and not at some other element that happens to sit at the right height: the bar hands its title over to it. */
|
|
3669
3814
|
'nldd-top-title-bar': DefineComponent<NLDDTopTitleBarProps>;
|
|
3670
3815
|
/** A section with 2/3 main content on the left and a 1/3 sidebar on the right. The columns wrap automatically when they become smaller than 280px. Padding and gap adjust via container queries. */
|
|
3671
3816
|
'nldd-two-thirds-one-third-section': DefineComponent<NLDDTwoThirdsOneThirdSectionProps>;
|
|
3672
|
-
|
|
3817
|
+
'nldd-validation-item': DefineComponent<NLDDValidationItemProps>;
|
|
3818
|
+
/** Nederlandse Digitale Dienst Validation List (Lit + TypeScript) Everything a value has to satisfy, in one list. A requirement you can state up front is an item with a rule, and it checks itself while you type. One only a server can decide is an item without a rule, and the app names it in `unmet` on the control. The list has two modes and `judging` is the switch. Before a verdict it shows its hints, which are the requirements of the field. After one it shows everything the value does not satisfy, and the hints are gone. It throws that switch itself the moment its control turns `invalid`, so when the field is judged is the consumer's decision, and the right moment is on submit. Hints are off by default. A phone number does not need its format spelled out before anyone has typed, while the rules for a password do. There are no checkmarks. The control already shows a validation icon of its own, and repeating that per line says the same thing three times. */
|
|
3819
|
+
'nldd-validation-list': DefineComponent<NLDDValidationListProps>;
|
|
3820
|
+
/** A floating window based on the native <dialog> element. Can be shown modal or modeless. Positionable through CSS values. No header of its own: consumers use nldd-page with a sticky header inside for a title bar. */
|
|
3673
3821
|
'nldd-window': DefineComponent<NLDDWindowProps>;
|
|
3674
3822
|
}
|
|
3675
3823
|
}
|