@dso-toolkit/core 76.0.0 → 78.0.0

package/dist/types/components.d.ts

@@ -15,6 +15,7 @@ import { AnnotationActiveChangeEvent, AnnotationWijzigactie } from "./components
 import { AnnotationKaartClickEvent } from "./components/annotation/annotation-kaart/annotation-kaart.interfaces";
 import { AutosuggestMarkFunction, Suggestion, SuggestionGroup } from "./components/autosuggest/autosuggest.interfaces";
 import { BadgeStatus } from "./components/badge/badge.interfaces";
+import { ButtonGroupDirection } from "./components/button-group/button-group.interfaces";
 import { CardClickEvent } from "./components/card/card.interfaces";
 import { CardContainerMode } from "./components/card-container/card-container.interfaces";
 import { DatePickerBlurEvent, DatePickerChangeEvent, DatePickerFocusEvent, DatePickerKeyboardEvent } from "./components/date-picker/date-picker.interfaces";
@@ -22,7 +23,6 @@ import { DsoDatePickerLegacyChangeEvent, DsoDatePickerLegacyDirection, DsoDatePi
 import { DocumentCardClickEvent } from "./components/document-card/document-card.interfaces";
 import { DocumentComponentAnnotationsWijzigactie, DocumentComponentInputType, DocumentComponentMarkFunction, DocumentComponentMarkItemHighlightEvent, DocumentComponentMode, DocumentComponentOpenToggleEvent, DocumentComponentOzonContentAnchorClickEvent, DocumentComponentRecursiveToggleEvent, DocumentComponentRecursiveToggleState, DocumentComponentTableOfContentsClickEvent, DocumentComponentToggleAnnotationEvent, DocumentComponentWijzigactie } from "./components/document-component/document-component.interfaces";
 import { OzonContentAnchorClickEvent, OzonContentClickEvent, OzonContentInputType, OzonContentMarkFunction, OzonContentMarkItemHighlightEvent, OzonContentUrlResolver } from "./components/ozon-content/ozon-content.interfaces";
-import { Placement } from "@popperjs/core";
 import { ExpandableAnimationEndEvent, ExpandableAnimationStartEvent } from "./components/expandable/expandable";
 import { HeaderEvent, HeaderMenuItem } from "./components/header/header.interfaces";
 import { InfoButtonToggleEvent } from "./components/info-button/info-button.interfaces";
@@ -46,8 +46,9 @@ import { SkiplinkClickEvent } from "./components/skiplink/skiplink.interfaces";
 import { SlideToggleActiveEvent } from "./components/slide-toggle/slide-toggle.interfaces";
 import { SurveyRatingCloseEvent, SurveyRatingSubmitEvent } from "./components/survey-rating/survey-rating.interfaces";
 import { TabsSwitchEvent } from "./components/tabs/tabs.interfaces";
+import { Placement } from "@popperjs/core";
 import { TreeViewItem, TreeViewPointerEvent } from "./components/tree-view/tree-view.interfaces";
-import { ViewerGridActiveTabSwitchEvent, ViewerGridChangeSizeAnimationEndEvent, ViewerGridChangeSizeEvent, ViewerGridCloseFilterPanelEvent, ViewerGridCloseOverlayEvent, ViewerGridMainExpandEvent, ViewerGridMainToggleEvent, ViewerGridPanelSize, ViewerGridTab } from "./components/viewer-grid/viewer-grid.interfaces";
+import { ViewerGridActiveTabSwitchEvent, ViewerGridChangeSizeAnimationEndEvent, ViewerGridChangeSizeEvent, ViewerGridCloseFilterPanelEvent, ViewerGridCloseOverlayEvent, ViewerGridMainToggleEvent, ViewerGridPanelSize, ViewerGridTab } from "./components/viewer-grid/viewer-grid.interfaces";
 import { OzonContentUrlResolver as OzonContentUrlResolver1 } from "./components";
 export { AccordionInternalState, AccordionVariant } from "./components/accordion/accordion.interfaces";
 export { RenvooiMarkFunction, RenvooiMarkItemHighlightEvent, RenvooiValue } from "./components/renvooi/renvooi.interfaces";
@@ -59,6 +60,7 @@ export { AnnotationActiveChangeEvent, AnnotationWijzigactie } from "./components
 export { AnnotationKaartClickEvent } from "./components/annotation/annotation-kaart/annotation-kaart.interfaces";
 export { AutosuggestMarkFunction, Suggestion, SuggestionGroup } from "./components/autosuggest/autosuggest.interfaces";
 export { BadgeStatus } from "./components/badge/badge.interfaces";
+export { ButtonGroupDirection } from "./components/button-group/button-group.interfaces";
 export { CardClickEvent } from "./components/card/card.interfaces";
 export { CardContainerMode } from "./components/card-container/card-container.interfaces";
 export { DatePickerBlurEvent, DatePickerChangeEvent, DatePickerFocusEvent, DatePickerKeyboardEvent } from "./components/date-picker/date-picker.interfaces";
@@ -66,7 +68,6 @@ export { DsoDatePickerLegacyChangeEvent, DsoDatePickerLegacyDirection, DsoDatePi
 export { DocumentCardClickEvent } from "./components/document-card/document-card.interfaces";
 export { DocumentComponentAnnotationsWijzigactie, DocumentComponentInputType, DocumentComponentMarkFunction, DocumentComponentMarkItemHighlightEvent, DocumentComponentMode, DocumentComponentOpenToggleEvent, DocumentComponentOzonContentAnchorClickEvent, DocumentComponentRecursiveToggleEvent, DocumentComponentRecursiveToggleState, DocumentComponentTableOfContentsClickEvent, DocumentComponentToggleAnnotationEvent, DocumentComponentWijzigactie } from "./components/document-component/document-component.interfaces";
 export { OzonContentAnchorClickEvent, OzonContentClickEvent, OzonContentInputType, OzonContentMarkFunction, OzonContentMarkItemHighlightEvent, OzonContentUrlResolver } from "./components/ozon-content/ozon-content.interfaces";
-export { Placement } from "@popperjs/core";
 export { ExpandableAnimationEndEvent, ExpandableAnimationStartEvent } from "./components/expandable/expandable";
 export { HeaderEvent, HeaderMenuItem } from "./components/header/header.interfaces";
 export { InfoButtonToggleEvent } from "./components/info-button/info-button.interfaces";
@@ -90,8 +91,9 @@ export { SkiplinkClickEvent } from "./components/skiplink/skiplink.interfaces";
 export { SlideToggleActiveEvent } from "./components/slide-toggle/slide-toggle.interfaces";
 export { SurveyRatingCloseEvent, SurveyRatingSubmitEvent } from "./components/survey-rating/survey-rating.interfaces";
 export { TabsSwitchEvent } from "./components/tabs/tabs.interfaces";
+export { Placement } from "@popperjs/core";
 export { TreeViewItem, TreeViewPointerEvent } from "./components/tree-view/tree-view.interfaces";
-export { ViewerGridActiveTabSwitchEvent, ViewerGridChangeSizeAnimationEndEvent, ViewerGridChangeSizeEvent, ViewerGridCloseFilterPanelEvent, ViewerGridCloseOverlayEvent, ViewerGridMainExpandEvent, ViewerGridMainToggleEvent, ViewerGridPanelSize, ViewerGridTab } from "./components/viewer-grid/viewer-grid.interfaces";
+export { ViewerGridActiveTabSwitchEvent, ViewerGridChangeSizeAnimationEndEvent, ViewerGridChangeSizeEvent, ViewerGridCloseFilterPanelEvent, ViewerGridCloseOverlayEvent, ViewerGridMainToggleEvent, ViewerGridPanelSize, ViewerGridTab } from "./components/viewer-grid/viewer-grid.interfaces";
 export { OzonContentUrlResolver as OzonContentUrlResolver1 } from "./components";
 export namespace Components {
     interface DsoAccordion {
@@ -108,10 +110,12 @@ export namespace Components {
     interface DsoAccordionSection {
         /**
           * A boolean to indicate if the Accordion Section is capable of being activated. When `true` a Slide Toggle displays on the right in the heading handle (optional). Works only for `variant` `compact-black` and `reverseAlign` false.
+          * @default false
          */
         "activatable": boolean;
         /**
           * A boolean to indicate if the Accordion Section is `active`. Only applicable when the Accordion Section is `activatable`.
+          * @default false
          */
         "active": boolean;
         /**
@@ -132,10 +136,12 @@ export namespace Components {
         "handleUrl"?: string;
         /**
           * Set when this Accordion Section contains or will contain an Accordion.
+          * @default false
          */
         "hasNestedAccordion": boolean;
         /**
           * Which heading element to use.
+          * @default "h2"
          */
         "heading": AccordionHeading;
         /**
@@ -152,6 +158,7 @@ export namespace Components {
         "labelStatus"?: LabelStatus;
         /**
           * Set the Accordion Section open.
+          * @default false
          */
         "open": boolean;
         /**
@@ -176,10 +183,12 @@ export namespace Components {
     interface DsoActionListItem {
         /**
           * Places a dashed line at the bottom of the item.
+          * @default false
          */
         "divider": boolean;
         /**
           * Show flow line to next step
+          * @default false
          */
         "flowLine": boolean;
         /**
@@ -192,6 +201,7 @@ export namespace Components {
         "step": number;
         /**
           * When there is a warning.
+          * @default false
          */
         "warning": boolean;
     }
@@ -206,12 +216,14 @@ export namespace Components {
         "activeHint"?: string;
         /**
           * The options to display in the select.
+          * @default []
          */
         "options": AdvancedSelectOptionOrGroup<never>[];
     }
     interface DsoAlert {
         /**
           * When `false` the close button in the alert will not be rendered.
+          * @default false
          */
         "closable": boolean;
         /**
@@ -349,6 +361,7 @@ export namespace Components {
     interface DsoAutosuggest {
         /**
           * Shows progress indicator when fetching results.
+          * @default false
          */
         "loading": boolean;
         /**
@@ -357,6 +370,7 @@ export namespace Components {
         "loadingDelayed"?: number;
         /**
           * To override progress indicator's default loading label.
+          * @default "Een moment geduld."
          */
         "loadingLabel"?: string;
         /**
@@ -369,10 +383,12 @@ export namespace Components {
         "notFoundLabel"?: string;
         /**
           * Whether the previous suggestions will be presented when the input gets focus again.
+          * @default false
          */
         "suggestOnFocus": boolean;
         /**
           * The suggestions for the value of the slotted input element.  This can be an array of type Suggestion or an Array of type SuggestionGroup.  A suggestionGroup must have a `groupLabel` and `suggestions`.  A suggestion must have a `value` and can have a `type`, an `item` or `extras`.  The `type` is used to style the suggestion. `item` can be use to reference the original object that was used to create the suggestion. `extras` is an array of additional strings to further specify the suggestion.  The value should be null when no suggestions have been fetched.
+          * @default null
          */
         "suggestions": Suggestion[] | SuggestionGroup[] | null;
     }
@@ -385,10 +401,12 @@ export namespace Components {
     interface DsoBanner {
         /**
           * Compact mode.
+          * @default false
          */
         "compact": boolean;
         /**
           * *Icon can only be hidden when the 'compact' property is set to true.  Option to show banner icon.
+          * @default false
          */
         "icon": boolean;
         /**
@@ -396,6 +414,13 @@ export namespace Components {
          */
         "status": "success" | "error" | "info" | "warning";
     }
+    interface DsoButtonGroup {
+        /**
+          * The direction in which the buttons are displayed.  Defaults to `row`.
+          * @default "row"
+         */
+        "direction": ButtonGroupDirection;
+    }
     interface DsoCard {
         /**
           * Makes the Card active.
@@ -413,6 +438,7 @@ export namespace Components {
     interface DsoCardContainer {
         /**
           * The mode of the Card Container.
+          * @default "list"
          */
         "mode": CardContainerMode;
     }
@@ -425,10 +451,12 @@ export namespace Components {
         "describedBy"?: string;
         /**
           * Makes the date picker input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.
+          * @default false
          */
         "disabled": boolean;
         /**
           * Should the input be focused on load?
+          * @default false
          */
         "dsoAutofocus": boolean;
         /**
@@ -449,14 +477,17 @@ export namespace Components {
         "min": string | undefined;
         /**
           * Name of the date picker input.
+          * @default "dso-date"
          */
         "name": string;
         /**
           * Should the input be marked as required?
+          * @default false
          */
         "required": boolean;
         /**
           * Date value. Must be in Dutch date format: DD-MM-YYYY.
+          * @default ""
          */
         "value": string;
     }
@@ -467,14 +498,17 @@ export namespace Components {
         "describedBy"?: string;
         /**
           * Forces the opening direction of the calendar modal to be always left or right. This setting can be useful when the input is smaller than the opening date picker would be as by default the picker always opens towards right.
+          * @default "right"
          */
         "direction": DsoDatePickerLegacyDirection;
         /**
           * Makes the date picker input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.
+          * @default false
          */
         "disabled": boolean;
         /**
           * Should the input be focused on load?
+          * @default false
          */
         "dsoAutofocus": boolean;
         /**
@@ -499,14 +533,17 @@ export namespace Components {
         "min": string | undefined;
         /**
           * Name of the date picker input.
+          * @default "date"
          */
         "name": string;
         /**
           * Should the input be marked as required?
+          * @default false
          */
         "required": boolean;
         /**
           * Defines a specific role attribute for the date picker input.
+          * @default null
          */
         "role": string | null;
         /**
@@ -519,6 +556,7 @@ export namespace Components {
         "show": () => Promise<void>;
         /**
           * Date value. Must be in Dutch date format: DD-MM-YYYY.
+          * @default ""
          */
         "value": string;
     }
@@ -539,6 +577,7 @@ export namespace Components {
         "alternativeTitle"?: string;
         /**
           * Enables annotations.
+          * @default false
          */
         "annotated": boolean;
         /**
@@ -547,22 +586,27 @@ export namespace Components {
         "annotationsWijzigactie"?: DocumentComponentAnnotationsWijzigactie;
         /**
           * Marks as draft.
+          * @default false
          */
         "bevatOntwerpInformatie": boolean;
         /**
           * Marks this Document Component as belonging to an active filter.
+          * @default false
          */
         "filtered": boolean;
         /**
           * When a child Document Component has a status "Draft".
+          * @default false
          */
         "genesteOntwerpInformatie": boolean;
         /**
           * Marks Document Component as reserved.
+          * @default false
          */
         "gereserveerd": boolean;
         /**
           * The heading element to use.
+          * @default "h2"
          */
         "heading": "h2" | "h3" | "h4" | "h5" | "h6";
         /**
@@ -583,18 +627,22 @@ export namespace Components {
         "mark"?: DocumentComponentMarkFunction;
         /**
           * The mode of the Document Component. One of "document" or "table-of-contents". Defaults to "document"
+          * @default "document"
          */
         "mode": DocumentComponentMode;
         /**
           * Marks this Document Component as not-applicable.
+          * @default false
          */
         "notApplicable": boolean;
         /**
           * This boolean attribute indicates whether the children are visible.
+          * @default false
          */
         "open": boolean;
         /**
           * When the Annotation is opened, set this to true.
+          * @default false
          */
         "openAnnotation": boolean;
         /**
@@ -611,6 +659,7 @@ export namespace Components {
         "type"?: string;
         /**
           * Marks the Document Component as expired.
+          * @default false
          */
         "vervallen": boolean;
         /**
@@ -619,38 +668,31 @@ export namespace Components {
         "wijzigactie"?: DocumentComponentWijzigactie;
     }
     interface DsoDropdownMenu {
-        /**
-          * Selector for the element the dropdown options should not be overflowing.
-         */
-        "boundary"?: string;
         /**
           * Whether the menu is checkable.
+          * @default false
          */
         "checkable": boolean;
         /**
           * Alignment of the dropdown
+          * @default "left"
          */
         "dropdownAlign": "left" | "right";
         /**
           * Space between button and dropdown options
+          * @default 2
          */
         "dropdownOptionsOffset": number;
         /**
           * Whether the menu is open or closed. This attribute is reflected and mutable.
+          * @default false
          */
         "open": boolean;
-        /**
-          * Force placement of dropdown.  This property overrides `dropdownAlign`.
-         */
-        "placement"?: Placement;
-        /**
-          * Set position strategy of dropdown options
-         */
-        "strategy": "auto" | "absolute" | "fixed";
     }
     interface DsoExpandable {
         /**
           * Set to `true` to show the content animated.
+          * @default false
          */
         "enableAnimation": boolean;
         /**
@@ -665,6 +707,7 @@ export namespace Components {
     interface DsoHeader {
         /**
           * Used to show the login/logout option. 'none' renders nothing.
+          * @default "none"
          */
         "authStatus": "none" | "loggedIn" | "loggedOut";
         /**
@@ -681,14 +724,17 @@ export namespace Components {
         "logoutUrl"?: string;
         /**
           * The main menu items.
+          * @default []
          */
         "mainMenu"?: HeaderMenuItem[];
         /**
           * Show a help-button or link in the header
+          * @default false
          */
         "showHelp"?: boolean | undefined;
         /**
           * Either have the dropdown menu appear automatically or always.
+          * @default "auto"
          */
         "useDropDownMenu": "always" | "auto";
         /**
@@ -759,6 +805,7 @@ export namespace Components {
         "active"?: boolean;
         /**
           * The label.
+          * @default "Toelichting bij optie"
          */
         "label": string;
         /**
@@ -793,6 +840,7 @@ export namespace Components {
         "step"?: number;
         /**
           * The unit of the range.
+          * @default ""
          */
         "unit": string;
         /**
@@ -830,6 +878,7 @@ export namespace Components {
         "active"?: boolean;
         /**
           * To disable the Legend Item
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -840,6 +889,7 @@ export namespace Components {
     interface DsoListButton {
         /**
           * Whether the List Button is checked.
+          * @default false
          */
         "checked": boolean;
         /**
@@ -848,6 +898,7 @@ export namespace Components {
         "count"?: number;
         /**
           * Whether the List Button is disabled.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -886,6 +937,7 @@ export namespace Components {
         "logoUrl"?: string;
         /**
           * An alternative name for the logo wordmark Omgevingsloket. For instance `Environment| Desk`. It should contains a pipe-character: the left-hand side of the pipe will be shown in grasgroen, the right-hand side of the pipe will be shown in bosgroen. When omitted the logo wordmark will default to Omgevingsloket, with 'Omgevings' shown in grasgroen and 'loket' in bosgroen.
+          * @default "Omgevings|loket"
          */
         "name": string;
         /**
@@ -900,6 +952,7 @@ export namespace Components {
         "baseLayers": BaseLayer[];
         /**
           * To group the overlays together. Generally the default value suffices.
+          * @default uuidv4()
          */
         "group": string;
     }
@@ -910,6 +963,7 @@ export namespace Components {
         "disableZoom"?: "in" | "out" | "both";
         /**
           * To show and hide the Map Controls.
+          * @default false
          */
         "open": boolean;
         /**
@@ -921,6 +975,7 @@ export namespace Components {
     interface DsoMapOverlays {
         /**
           * To group the overlays together. Generally the default value suffices.
+          * @default uuidv4()
          */
         "group": string;
         /**
@@ -939,6 +994,7 @@ export namespace Components {
         "dsoFocus": (options?: MarkBarFocusOptions) => Promise<void>;
         /**
           * The label for the input field.
+          * @default "Zoeken in document"
          */
         "label": string;
         /**
@@ -953,10 +1009,12 @@ export namespace Components {
     interface DsoModal {
         /**
           * when `false` the close button in the header will not be rendered.  Needs `modalTitle` to be set.
+          * @default false
          */
         "closable": boolean;
         /**
           * the role for the modal `dialog` | `alert` | `alertdialog`.
+          * @default "dialog"
          */
         "dialogRole": string | null;
         /**
@@ -969,12 +1027,14 @@ export namespace Components {
         "modalTitle"?: string;
         /**
           * The element to return focus to after the modal is closed.  * `undefined` will return focus to the previously focused element (default). * `false` will not return focus to any element. * or, provide your own `HTMLElement` that will receive focus upon closing.
+          * @default undefined
          */
         "returnFocus": false | HTMLElement | undefined;
     }
     interface DsoOnboardingTip {
         /**
           * Where to place the Onboarding Tip relative to its reference element.
+          * @default "right"
          */
         "placement": OnboardingTipPlacement;
     }
@@ -985,6 +1045,7 @@ export namespace Components {
         "content"?: OzonContentInputType;
         /**
           * Setting this property creates dso-ozon-content as inline element instead of a block element.
+          * @default false
          */
         "inline": boolean;
         /**
@@ -1003,6 +1064,7 @@ export namespace Components {
         "currentPage"?: number;
         /**
           * This function is called to format the href
+          * @default (page) => "#" + page
          */
         "formatHref": (page: number) => string;
         /**
@@ -1017,6 +1079,7 @@ export namespace Components {
         "closeButtonLabel"?: string;
         /**
           * To display the panel as an emphasized panel.
+          * @default false
          */
         "emphasized": boolean;
     }
@@ -1031,6 +1094,7 @@ export namespace Components {
         "href": string | undefined;
         /**
           * Opens the urls in a new window or tab
+          * @default false
          */
         "targetBlank": boolean;
         /**
@@ -1041,10 +1105,12 @@ export namespace Components {
     interface DsoProgressBar {
         /**
           * When the operation completes.
+          * @default 100
          */
         "max": number;
         /**
           * From where progress is made.
+          * @default 0
          */
         "min": number;
         /**
@@ -1166,14 +1232,17 @@ export namespace Components {
         "accessibleLabel"?: string;
         /**
           * Set to true if Slide Toggle is checked.
+          * @default false
          */
         "checked": boolean;
         /**
           * Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.
+          * @default false
          */
         "disabled": boolean;
         /**
           * Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for="id">`.
+          * @default v4()
          */
         "identifier": string;
         /**
@@ -1201,6 +1270,7 @@ export namespace Components {
     interface DsoTable {
         /**
           * Prevents the table being opened in a modal.
+          * @default false
          */
         "noModal": boolean;
     }
@@ -1209,10 +1279,12 @@ export namespace Components {
     interface DsoToggletip {
         /**
           * Toggletip label.
+          * @default "Toelichting"
          */
         "label": string;
         /**
           * Toggletip position.
+          * @default "right"
          */
         "position": Placement;
         /**
@@ -1231,6 +1303,7 @@ export namespace Components {
         "activate": () => Promise<void>;
         /**
           * Whether or not to show the tooltip. To control the tooltip add the `active` attribute or use the `activate()` and `deactivate()` instance methods.
+          * @default false
          */
         "active": boolean;
         /**
@@ -1239,14 +1312,17 @@ export namespace Components {
         "deactivate": () => Promise<void>;
         /**
           * Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`.
+          * @default false
          */
         "descriptive": boolean;
         /**
           * Set attribute `no-arrow` to hide the arrow
+          * @default false
          */
         "noArrow": boolean;
         /**
           * Set position of tooltip relative to target
+          * @default "top"
          */
         "position": Placement;
         /**
@@ -1259,6 +1335,7 @@ export namespace Components {
         "stateless"?: boolean;
         /**
           * Set position strategy of tooltip
+          * @default "auto"
          */
         "strategy": "auto" | "absolute" | "fixed";
     }
@@ -1282,14 +1359,17 @@ export namespace Components {
         "activeTab"?: ViewerGridTab;
         /**
           * Set to true when document panel should show.
+          * @default false
          */
         "documentPanelOpen": boolean;
         /**
           * Size of the panel when component loads.  Default size is `large`.
+          * @default "large"
          */
         "documentPanelSize": ViewerGridPanelSize;
         /**
           * Set to true when filter panel should show.
+          * @default false
          */
         "filterPanelOpen": boolean;
         /**
@@ -1298,18 +1378,22 @@ export namespace Components {
         "filterPanelTitle"?: string;
         /**
           * Set to show main panel expanded.
+          * @default false
          */
         "mainPanelExpanded": boolean;
         /**
           * Set to hide the main panel.
+          * @default false
          */
         "mainPanelHidden": boolean;
         /**
           * Size of the panel when component loads.  Default size is `large`.
+          * @default "large"
          */
         "mainSize": ViewerGridPanelSize;
         /**
           * Set to true when overlay should show.
+          * @default false
          */
         "overlayOpen": boolean;
     }
@@ -1320,10 +1404,12 @@ export namespace Components {
         "jsonFile"?: string;
         /**
           * The mode of the Document Component. One of "document" or "table-of-contents". Defaults to "document"
+          * @default "document"
          */
         "mode": DocumentComponentMode;
         /**
           * The default state for all Document Components.
+          * @default false
          */
         "openDefault": boolean;
         /**
@@ -1332,6 +1418,7 @@ export namespace Components {
         "ozonContentUrlResolver"?: OzonContentUrlResolver1;
         /**
           * Show canvas to where Document Component extends.
+          * @default false
          */
         "showCanvas": boolean;
     }
@@ -1711,6 +1798,12 @@ declare global {
         prototype: HTMLDsoBannerElement;
         new (): HTMLDsoBannerElement;
     };
+    interface HTMLDsoButtonGroupElement extends Components.DsoButtonGroup, HTMLStencilElement {
+    }
+    var HTMLDsoButtonGroupElement: {
+        prototype: HTMLDsoButtonGroupElement;
+        new (): HTMLDsoButtonGroupElement;
+    };
     interface HTMLDsoCardElementEventMap {
         "dsoCardClick": CardClickEvent;
     }
@@ -2388,7 +2481,6 @@ declare global {
         "dsoMainSizeChangeAnimationEnd": ViewerGridChangeSizeAnimationEndEvent;
         "dsoDocumentPanelSizeChange": ViewerGridChangeSizeEvent;
         "dsoDocumentPanelSizeChangeAnimationEnd": ViewerGridChangeSizeAnimationEndEvent;
-        "dsoMainPanelExpand": ViewerGridMainExpandEvent;
         "dsoMainPanelToggle": ViewerGridMainToggleEvent;
     }
     interface HTMLDsoViewerGridElement extends Components.DsoViewerGrid, HTMLStencilElement {
@@ -2439,6 +2531,7 @@ declare global {
         "dso-autosuggest": HTMLDsoAutosuggestElement;
         "dso-badge": HTMLDsoBadgeElement;
         "dso-banner": HTMLDsoBannerElement;
+        "dso-button-group": HTMLDsoButtonGroupElement;
         "dso-card": HTMLDsoCardElement;
         "dso-card-container": HTMLDsoCardContainerElement;
         "dso-contact-information": HTMLDsoContactInformationElement;
@@ -2503,10 +2596,12 @@ declare namespace LocalJSX {
     interface DsoAccordionSection {
         /**
           * A boolean to indicate if the Accordion Section is capable of being activated. When `true` a Slide Toggle displays on the right in the heading handle (optional). Works only for `variant` `compact-black` and `reverseAlign` false.
+          * @default false
          */
         "activatable"?: boolean;
         /**
           * A boolean to indicate if the Accordion Section is `active`. Only applicable when the Accordion Section is `activatable`.
+          * @default false
          */
         "active"?: boolean;
         /**
@@ -2523,10 +2618,12 @@ declare namespace LocalJSX {
         "handleUrl"?: string;
         /**
           * Set when this Accordion Section contains or will contain an Accordion.
+          * @default false
          */
         "hasNestedAccordion"?: boolean;
         /**
           * Which heading element to use.
+          * @default "h2"
          */
         "heading"?: AccordionHeading;
         /**
@@ -2559,6 +2656,7 @@ declare namespace LocalJSX {
         "onDsoToggleClick"?: (event: DsoAccordionSectionCustomEvent<AccordionSectionToggleClickEvent>) => void;
         /**
           * Set the Accordion Section open.
+          * @default false
          */
         "open"?: boolean;
         /**
@@ -2583,10 +2681,12 @@ declare namespace LocalJSX {
     interface DsoActionListItem {
         /**
           * Places a dashed line at the bottom of the item.
+          * @default false
          */
         "divider"?: boolean;
         /**
           * Show flow line to next step
+          * @default false
          */
         "flowLine"?: boolean;
         /**
@@ -2599,6 +2699,7 @@ declare namespace LocalJSX {
         "step": number;
         /**
           * When there is a warning.
+          * @default false
          */
         "warning"?: boolean;
     }
@@ -2621,12 +2722,14 @@ declare namespace LocalJSX {
         "onDsoRedirect"?: (event: DsoAdvancedSelectCustomEvent<AdvancedSelectRedirectEvent>) => void;
         /**
           * The options to display in the select.
+          * @default []
          */
         "options"?: AdvancedSelectOptionOrGroup<never>[];
     }
     interface DsoAlert {
         /**
           * When `false` the close button in the alert will not be rendered.
+          * @default false
          */
         "closable"?: boolean;
         /**
@@ -2788,6 +2891,7 @@ declare namespace LocalJSX {
     interface DsoAutosuggest {
         /**
           * Shows progress indicator when fetching results.
+          * @default false
          */
         "loading"?: boolean;
         /**
@@ -2796,6 +2900,7 @@ declare namespace LocalJSX {
         "loadingDelayed"?: number;
         /**
           * To override progress indicator's default loading label.
+          * @default "Een moment geduld."
          */
         "loadingLabel"?: string;
         /**
@@ -2820,10 +2925,12 @@ declare namespace LocalJSX {
         "onDsoSelect"?: (event: DsoAutosuggestCustomEvent<Suggestion>) => void;
         /**
           * Whether the previous suggestions will be presented when the input gets focus again.
+          * @default false
          */
         "suggestOnFocus"?: boolean;
         /**
           * The suggestions for the value of the slotted input element.  This can be an array of type Suggestion or an Array of type SuggestionGroup.  A suggestionGroup must have a `groupLabel` and `suggestions`.  A suggestion must have a `value` and can have a `type`, an `item` or `extras`.  The `type` is used to style the suggestion. `item` can be use to reference the original object that was used to create the suggestion. `extras` is an array of additional strings to further specify the suggestion.  The value should be null when no suggestions have been fetched.
+          * @default null
          */
         "suggestions"?: Suggestion[] | SuggestionGroup[] | null;
     }
@@ -2836,10 +2943,12 @@ declare namespace LocalJSX {
     interface DsoBanner {
         /**
           * Compact mode.
+          * @default false
          */
         "compact"?: boolean;
         /**
           * *Icon can only be hidden when the 'compact' property is set to true.  Option to show banner icon.
+          * @default false
          */
         "icon"?: boolean;
         /**
@@ -2847,6 +2956,13 @@ declare namespace LocalJSX {
          */
         "status": "success" | "error" | "info" | "warning";
     }
+    interface DsoButtonGroup {
+        /**
+          * The direction in which the buttons are displayed.  Defaults to `row`.
+          * @default "row"
+         */
+        "direction"?: ButtonGroupDirection;
+    }
     interface DsoCard {
         /**
           * Makes the Card active.
@@ -2868,6 +2984,7 @@ declare namespace LocalJSX {
     interface DsoCardContainer {
         /**
           * The mode of the Card Container.
+          * @default "list"
          */
         "mode"?: CardContainerMode;
     }
@@ -2880,10 +2997,12 @@ declare namespace LocalJSX {
         "describedBy"?: string;
         /**
           * Makes the date picker input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.
+          * @default false
          */
         "disabled"?: boolean;
         /**
           * Should the input be focused on load?
+          * @default false
          */
         "dsoAutofocus"?: boolean;
         /**
@@ -2904,6 +3023,7 @@ declare namespace LocalJSX {
         "min"?: string | undefined;
         /**
           * Name of the date picker input.
+          * @default "dso-date"
          */
         "name"?: string;
         /**
@@ -2928,10 +3048,12 @@ declare namespace LocalJSX {
         "onDsoKeyUp"?: (event: DsoDatePickerCustomEvent<DatePickerKeyboardEvent>) => void;
         /**
           * Should the input be marked as required?
+          * @default false
          */
         "required"?: boolean;
         /**
           * Date value. Must be in Dutch date format: DD-MM-YYYY.
+          * @default ""
          */
         "value"?: string;
     }
@@ -2942,14 +3064,17 @@ declare namespace LocalJSX {
         "describedBy"?: string;
         /**
           * Forces the opening direction of the calendar modal to be always left or right. This setting can be useful when the input is smaller than the opening date picker would be as by default the picker always opens towards right.
+          * @default "right"
          */
         "direction"?: DsoDatePickerLegacyDirection;
         /**
           * Makes the date picker input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.
+          * @default false
          */
         "disabled"?: boolean;
         /**
           * Should the input be focused on load?
+          * @default false
          */
         "dsoAutofocus"?: boolean;
         /**
@@ -2970,6 +3095,7 @@ declare namespace LocalJSX {
         "min"?: string | undefined;
         /**
           * Name of the date picker input.
+          * @default "date"
          */
         "name"?: string;
         /**
@@ -2994,14 +3120,17 @@ declare namespace LocalJSX {
         "onDsoKeyUp"?: (event: DsoDatePickerLegacyCustomEvent<DsoDatePickerLegacyKeyboardEvent>) => void;
         /**
           * Should the input be marked as required?
+          * @default false
          */
         "required"?: boolean;
         /**
           * Defines a specific role attribute for the date picker input.
+          * @default null
          */
         "role"?: string | null;
         /**
           * Date value. Must be in Dutch date format: DD-MM-YYYY.
+          * @default ""
          */
         "value"?: string;
     }
@@ -3026,6 +3155,7 @@ declare namespace LocalJSX {
         "alternativeTitle"?: string;
         /**
           * Enables annotations.
+          * @default false
          */
         "annotated"?: boolean;
         /**
@@ -3034,22 +3164,27 @@ declare namespace LocalJSX {
         "annotationsWijzigactie"?: DocumentComponentAnnotationsWijzigactie;
         /**
           * Marks as draft.
+          * @default false
          */
         "bevatOntwerpInformatie"?: boolean;
         /**
           * Marks this Document Component as belonging to an active filter.
+          * @default false
          */
         "filtered"?: boolean;
         /**
           * When a child Document Component has a status "Draft".
+          * @default false
          */
         "genesteOntwerpInformatie"?: boolean;
         /**
           * Marks Document Component as reserved.
+          * @default false
          */
         "gereserveerd"?: boolean;
         /**
           * The heading element to use.
+          * @default "h2"
          */
         "heading"?: "h2" | "h3" | "h4" | "h5" | "h6";
         /**
@@ -3070,10 +3205,12 @@ declare namespace LocalJSX {
         "mark"?: DocumentComponentMarkFunction;
         /**
           * The mode of the Document Component. One of "document" or "table-of-contents". Defaults to "document"
+          * @default "document"
          */
         "mode"?: DocumentComponentMode;
         /**
           * Marks this Document Component as not-applicable.
+          * @default false
          */
         "notApplicable"?: boolean;
         /**
@@ -3102,10 +3239,12 @@ declare namespace LocalJSX {
         "onDsoTableOfContentsClick"?: (event: DsoDocumentComponentCustomEvent<DocumentComponentTableOfContentsClickEvent>) => void;
         /**
           * This boolean attribute indicates whether the children are visible.
+          * @default false
          */
         "open"?: boolean;
         /**
           * When the Annotation is opened, set this to true.
+          * @default false
          */
         "openAnnotation"?: boolean;
         /**
@@ -3122,6 +3261,7 @@ declare namespace LocalJSX {
         "type"?: string;
         /**
           * Marks the Document Component as expired.
+          * @default false
          */
         "vervallen"?: boolean;
         /**
@@ -3130,38 +3270,31 @@ declare namespace LocalJSX {
         "wijzigactie"?: DocumentComponentWijzigactie;
     }
     interface DsoDropdownMenu {
-        /**
-          * Selector for the element the dropdown options should not be overflowing.
-         */
-        "boundary"?: string;
         /**
           * Whether the menu is checkable.
+          * @default false
          */
         "checkable"?: boolean;
         /**
           * Alignment of the dropdown
+          * @default "left"
          */
         "dropdownAlign"?: "left" | "right";
         /**
           * Space between button and dropdown options
+          * @default 2
          */
         "dropdownOptionsOffset"?: number;
         /**
           * Whether the menu is open or closed. This attribute is reflected and mutable.
+          * @default false
          */
         "open"?: boolean;
-        /**
-          * Force placement of dropdown.  This property overrides `dropdownAlign`.
-         */
-        "placement"?: Placement;
-        /**
-          * Set position strategy of dropdown options
-         */
-        "strategy"?: "auto" | "absolute" | "fixed";
     }
     interface DsoExpandable {
         /**
           * Set to `true` to show the content animated.
+          * @default false
          */
         "enableAnimation"?: boolean;
         /**
@@ -3184,6 +3317,7 @@ declare namespace LocalJSX {
     interface DsoHeader {
         /**
           * Used to show the login/logout option. 'none' renders nothing.
+          * @default "none"
          */
         "authStatus"?: "none" | "loggedIn" | "loggedOut";
         /**
@@ -3200,6 +3334,7 @@ declare namespace LocalJSX {
         "logoutUrl"?: string;
         /**
           * The main menu items.
+          * @default []
          */
         "mainMenu"?: HeaderMenuItem[];
         /**
@@ -3208,10 +3343,12 @@ declare namespace LocalJSX {
         "onDsoHeaderClick"?: (event: DsoHeaderCustomEvent<HeaderEvent>) => void;
         /**
           * Show a help-button or link in the header
+          * @default false
          */
         "showHelp"?: boolean | undefined;
         /**
           * Either have the dropdown menu appear automatically or always.
+          * @default "auto"
          */
         "useDropDownMenu"?: "always" | "auto";
         /**
@@ -3286,6 +3423,7 @@ declare namespace LocalJSX {
         "active"?: boolean;
         /**
           * The label.
+          * @default "Toelichting bij optie"
          */
         "label"?: string;
         /**
@@ -3324,6 +3462,7 @@ declare namespace LocalJSX {
         "step"?: number;
         /**
           * The unit of the range.
+          * @default ""
          */
         "unit"?: string;
         /**
@@ -3364,6 +3503,7 @@ declare namespace LocalJSX {
         "active"?: boolean;
         /**
           * To disable the Legend Item
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -3386,6 +3526,7 @@ declare namespace LocalJSX {
     interface DsoListButton {
         /**
           * Whether the List Button is checked.
+          * @default false
          */
         "checked"?: boolean;
         /**
@@ -3394,6 +3535,7 @@ declare namespace LocalJSX {
         "count"?: number;
         /**
           * Whether the List Button is disabled.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -3440,6 +3582,7 @@ declare namespace LocalJSX {
         "logoUrl"?: string;
         /**
           * An alternative name for the logo wordmark Omgevingsloket. For instance `Environment| Desk`. It should contains a pipe-character: the left-hand side of the pipe will be shown in grasgroen, the right-hand side of the pipe will be shown in bosgroen. When omitted the logo wordmark will default to Omgevingsloket, with 'Omgevings' shown in grasgroen and 'loket' in bosgroen.
+          * @default "Omgevings|loket"
          */
         "name"?: string;
         /**
@@ -3462,6 +3605,7 @@ declare namespace LocalJSX {
         "baseLayers": BaseLayer[];
         /**
           * To group the overlays together. Generally the default value suffices.
+          * @default uuidv4()
          */
         "group"?: string;
         /**
@@ -3488,12 +3632,14 @@ declare namespace LocalJSX {
         "onDsoZoomOut"?: (event: DsoMapControlsCustomEvent<MouseEvent>) => void;
         /**
           * To show and hide the Map Controls.
+          * @default false
          */
         "open"?: boolean;
     }
     interface DsoMapOverlays {
         /**
           * To group the overlays together. Generally the default value suffices.
+          * @default uuidv4()
          */
         "group"?: string;
         /**
@@ -3512,6 +3658,7 @@ declare namespace LocalJSX {
         "current"?: number;
         /**
           * The label for the input field.
+          * @default "Zoeken in document"
          */
         "label"?: string;
         /**
@@ -3542,10 +3689,12 @@ declare namespace LocalJSX {
     interface DsoModal {
         /**
           * when `false` the close button in the header will not be rendered.  Needs `modalTitle` to be set.
+          * @default false
          */
         "closable"?: boolean;
         /**
           * the role for the modal `dialog` | `alert` | `alertdialog`.
+          * @default "dialog"
          */
         "dialogRole"?: string | null;
         /**
@@ -3562,6 +3711,7 @@ declare namespace LocalJSX {
         "onDsoClose"?: (event: DsoModalCustomEvent<ModalCloseEvent>) => void;
         /**
           * The element to return focus to after the modal is closed.  * `undefined` will return focus to the previously focused element (default). * `false` will not return focus to any element. * or, provide your own `HTMLElement` that will receive focus upon closing.
+          * @default undefined
          */
         "returnFocus"?: false | HTMLElement | undefined;
     }
@@ -3572,6 +3722,7 @@ declare namespace LocalJSX {
         "onDsoClose"?: (event: DsoOnboardingTipCustomEvent<OnboardingTipCloseEvent>) => void;
         /**
           * Where to place the Onboarding Tip relative to its reference element.
+          * @default "right"
          */
         "placement"?: OnboardingTipPlacement;
     }
@@ -3582,6 +3733,7 @@ declare namespace LocalJSX {
         "content"?: OzonContentInputType;
         /**
           * Setting this property creates dso-ozon-content as inline element instead of a block element.
+          * @default false
          */
         "inline"?: boolean;
         /**
@@ -3612,6 +3764,7 @@ declare namespace LocalJSX {
         "currentPage"?: number;
         /**
           * This function is called to format the href
+          * @default (page) => "#" + page
          */
         "formatHref"?: (page: number) => string;
         /**
@@ -3630,6 +3783,7 @@ declare namespace LocalJSX {
         "closeButtonLabel"?: string;
         /**
           * To display the panel as an emphasized panel.
+          * @default false
          */
         "emphasized"?: boolean;
         /**
@@ -3652,6 +3806,7 @@ declare namespace LocalJSX {
         "onDsoPlekinfoCardClick"?: (event: DsoPlekinfoCardCustomEvent<PlekinfoCardClickEvent>) => void;
         /**
           * Opens the urls in a new window or tab
+          * @default false
          */
         "targetBlank"?: boolean;
         /**
@@ -3662,10 +3817,12 @@ declare namespace LocalJSX {
     interface DsoProgressBar {
         /**
           * When the operation completes.
+          * @default 100
          */
         "max"?: number;
         /**
           * From where progress is made.
+          * @default 0
          */
         "min"?: number;
         /**
@@ -3797,14 +3954,17 @@ declare namespace LocalJSX {
         "accessibleLabel"?: string;
         /**
           * Set to true if Slide Toggle is checked.
+          * @default false
          */
         "checked"?: boolean;
         /**
           * Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.
+          * @default false
          */
         "disabled"?: boolean;
         /**
           * Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for="id">`.
+          * @default v4()
          */
         "identifier"?: string;
         /**
@@ -3847,6 +4007,7 @@ declare namespace LocalJSX {
     interface DsoTable {
         /**
           * Prevents the table being opened in a modal.
+          * @default false
          */
         "noModal"?: boolean;
     }
@@ -3855,10 +4016,12 @@ declare namespace LocalJSX {
     interface DsoToggletip {
         /**
           * Toggletip label.
+          * @default "Toelichting"
          */
         "label"?: string;
         /**
           * Toggletip position.
+          * @default "right"
          */
         "position"?: Placement;
         /**
@@ -3873,18 +4036,22 @@ declare namespace LocalJSX {
     interface DsoTooltip {
         /**
           * Whether or not to show the tooltip. To control the tooltip add the `active` attribute or use the `activate()` and `deactivate()` instance methods.
+          * @default false
          */
         "active"?: boolean;
         /**
           * Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`.
+          * @default false
          */
         "descriptive"?: boolean;
         /**
           * Set attribute `no-arrow` to hide the arrow
+          * @default false
          */
         "noArrow"?: boolean;
         /**
           * Set position of tooltip relative to target
+          * @default "top"
          */
         "position"?: Placement;
         /**
@@ -3897,6 +4064,7 @@ declare namespace LocalJSX {
         "stateless"?: boolean;
         /**
           * Set position strategy of tooltip
+          * @default "auto"
          */
         "strategy"?: "auto" | "absolute" | "fixed";
     }
@@ -3925,14 +4093,17 @@ declare namespace LocalJSX {
         "activeTab"?: ViewerGridTab;
         /**
           * Set to true when document panel should show.
+          * @default false
          */
         "documentPanelOpen"?: boolean;
         /**
           * Size of the panel when component loads.  Default size is `large`.
+          * @default "large"
          */
         "documentPanelSize"?: ViewerGridPanelSize;
         /**
           * Set to true when filter panel should show.
+          * @default false
          */
         "filterPanelOpen"?: boolean;
         /**
@@ -3941,14 +4112,17 @@ declare namespace LocalJSX {
         "filterPanelTitle"?: string;
         /**
           * Set to show main panel expanded.
+          * @default false
          */
         "mainPanelExpanded"?: boolean;
         /**
           * Set to hide the main panel.
+          * @default false
          */
         "mainPanelHidden"?: boolean;
         /**
           * Size of the panel when component loads.  Default size is `large`.
+          * @default "large"
          */
         "mainSize"?: ViewerGridPanelSize;
         /**
@@ -3971,10 +4145,6 @@ declare namespace LocalJSX {
           * Emitted after main size animation.
          */
         "onDsoDocumentPanelSizeChangeAnimationEnd"?: (event: DsoViewerGridCustomEvent<ViewerGridChangeSizeAnimationEndEvent>) => void;
-        /**
-          * Emitted when the user wants to expand the main panel.
-         */
-        "onDsoMainPanelExpand"?: (event: DsoViewerGridCustomEvent<ViewerGridMainExpandEvent>) => void;
         /**
           * Emitted when the user toggles the visibility of the main panel.  Also emitted by scripting when the panels do not fit anymore.
          */
@@ -3985,6 +4155,7 @@ declare namespace LocalJSX {
         "onDsoMainSizeChangeAnimationEnd"?: (event: DsoViewerGridCustomEvent<ViewerGridChangeSizeAnimationEndEvent>) => void;
         /**
           * Set to true when overlay should show.
+          * @default false
          */
         "overlayOpen"?: boolean;
     }
@@ -3995,6 +4166,7 @@ declare namespace LocalJSX {
         "jsonFile"?: string;
         /**
           * The mode of the Document Component. One of "document" or "table-of-contents". Defaults to "document"
+          * @default "document"
          */
         "mode"?: DocumentComponentMode;
         /**
@@ -4007,6 +4179,7 @@ declare namespace LocalJSX {
         "onDsotTableOfContentsClick"?: (event: DsotDocumentComponentDemoCustomEvent<DocumentComponentTableOfContentsClickEvent>) => void;
         /**
           * The default state for all Document Components.
+          * @default false
          */
         "openDefault"?: boolean;
         /**
@@ -4015,6 +4188,7 @@ declare namespace LocalJSX {
         "ozonContentUrlResolver"?: OzonContentUrlResolver1;
         /**
           * Show canvas to where Document Component extends.
+          * @default false
          */
         "showCanvas"?: boolean;
     }
@@ -4034,6 +4208,7 @@ declare namespace LocalJSX {
         "dso-autosuggest": DsoAutosuggest;
         "dso-badge": DsoBadge;
         "dso-banner": DsoBanner;
+        "dso-button-group": DsoButtonGroup;
         "dso-card": DsoCard;
         "dso-card-container": DsoCardContainer;
         "dso-contact-information": DsoContactInformation;
@@ -4106,6 +4281,7 @@ declare module "@stencil/core" {
             "dso-autosuggest": LocalJSX.DsoAutosuggest & JSXBase.HTMLAttributes<HTMLDsoAutosuggestElement>;
             "dso-badge": LocalJSX.DsoBadge & JSXBase.HTMLAttributes<HTMLDsoBadgeElement>;
             "dso-banner": LocalJSX.DsoBanner & JSXBase.HTMLAttributes<HTMLDsoBannerElement>;
+            "dso-button-group": LocalJSX.DsoButtonGroup & JSXBase.HTMLAttributes<HTMLDsoButtonGroupElement>;
             "dso-card": LocalJSX.DsoCard & JSXBase.HTMLAttributes<HTMLDsoCardElement>;
             "dso-card-container": LocalJSX.DsoCardContainer & JSXBase.HTMLAttributes<HTMLDsoCardContainerElement>;
             "dso-contact-information": LocalJSX.DsoContactInformation & JSXBase.HTMLAttributes<HTMLDsoContactInformationElement>;